/* Liminal Amp page, on top of ../assets/site.css and ../liminal-hz/page.css (the shared plugin page components) */

/* the signal chain */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; counter-reset: c; }
.chain li { position: relative; padding: 20px; border-radius: 16px; background: var(--s1); display: grid; gap: 4px; align-content: start; counter-increment: c; }
.chain li::before { content: counter(c, decimal-leading-zero); font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--dim); margin-bottom: 8px; }
.chain li:nth-child(3) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.chain li:nth-child(3)::before { color: var(--accent); }
.chain b { font-weight: 600; font-size: 18px; line-height: 28px; }
.chain span { color: var(--muted); font-size: 14px; line-height: 20px; }
/* a small arrow in the gap between stages */
.chain li + li::after { content: ""; position: absolute; left: -6px; top: 50%; width: 4px; height: 4px; border-top: 1.5px solid var(--dim); border-right: 1.5px solid var(--dim);
  transform: translate(-1px, -50%) rotate(45deg); }
@media (max-width: 960px) {
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chain li:nth-child(4)::after { display: none; }
}
@media (max-width: 520px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain li:nth-child(odd)::after { display: none; }
  .chain li:nth-child(4)::after { display: block; }
}

/* what it costs */
.cpu { margin-top: 8px; padding: 32px; border-radius: 24px; background: var(--s1); display: grid; gap: 16px; }
.cpu-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.cpu-head p { font-size: 20px; line-height: 28px; font-weight: 600; }
.cpu-head p span { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--dim); margin-left: 4px; }
.bar { display: flex; height: 24px; border-radius: 6px; background: var(--base); overflow: hidden; box-shadow: inset 0 0 0 1px var(--s3); }
.bar i { display: block; height: 100%; }
.bar i:nth-child(1), .legend li:nth-child(1) i { background: var(--accent); }
.bar i:nth-child(2), .legend li:nth-child(2) i { background: color-mix(in srgb, var(--accent) 62%, #000); }
.bar i:nth-child(3), .legend li:nth-child(3) i { background: color-mix(in srgb, var(--accent) 40%, var(--s4)); }
.bar i + i { box-shadow: inset 1px 0 0 rgba(0,0,0,.6); }
.scale { display: flex; justify-content: space-between; color: var(--dim); font-size: 12px; line-height: 16px; margin-top: -8px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; line-height: 20px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend .mono { color: var(--ink); }
.cpu-note { color: var(--dim); font-size: 14px; line-height: 20px; }
@media (max-width: 720px) { .cpu { padding: 24px; } }

/* see the amp */
.wide { margin: 0 0 8px; }
.two-up { margin-top: 8px; }

/* install, without the MPC OS 3.10.1 box above it */
.gens.after-easy { margin-top: 8px; }
.gen .actions { margin-top: 4px; }
.gen .meta { color: var(--dim); font-size: 14px; line-height: 20px; font-family: var(--mono); margin-top: -4px; }