/* APIs & Infrastructure page. Derived from the design's engineering.css (see LINEAGE.json): its assembly
   controls (.asm) and its page-scoped rules with .page-engineering replaced by .page-apis, so the presets
   and parts on /apis use the original assembly page's markup and styles (fixes-round-c.md G1). */

/* this first screen is an instrument with a row of switches, so it takes the whole screen, as Home does */
.page-apis .hero--page { min-height: var(--shot-h, max(640px, 100svh)); }

/* the assembly controls: a rail along the foot of the first screen */
.asm { position: relative; margin: 0 var(--gutter); padding-bottom: 20px; border-top: 1px solid var(--line); }
/* the drawing floor dissolves under the controls, so the switches sit on a plain ground */
.asm::before { content: ""; position: absolute; z-index: -1; inset: -56px calc(-1 * var(--gutter)) 0; background: linear-gradient(to bottom, rgba(8, 9, 10, 0), rgba(8, 9, 10, .9) 56px, var(--ink-0) 62%); pointer-events: none; }
.asm__top { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; min-height: 66px; padding: 10px 0; }
.asm__presets { display: inline-flex; flex: none; border: 1px solid var(--line-2); border-radius: 2px; }
.asm__presets button { min-height: 38px; padding: 0 16px; background: none; border: 0; color: var(--fg-2); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s; }
.asm__presets button + button { border-left: 1px solid var(--line-2); }
.asm__presets button:hover { color: var(--fg); }
.asm__presets button[aria-pressed="true"] { background: var(--fg); color: var(--ink-0); }
.asm__note { margin: 0; max-width: 64ch; text-align: right; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

.asm__parts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.asm__parts li + li { border-left: 1px solid var(--line); }
.asm__parts button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--fg-3); font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s; }
/* the lamp: hollow while the part waits in the rack, lit once it is in place, red while it is pointed at */
.asm__parts button::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--fg-3); transition: background .2s, border-color .2s; }
.asm__parts button[aria-pressed="true"] { color: var(--fg); }
.asm__parts button[aria-pressed="true"]::before { background: var(--fg); border-color: var(--fg); }
.asm__parts button:hover, .asm__parts button:focus-visible { color: var(--fg); background: rgba(236, 239, 241, .04); }
.asm__parts button:hover::before, .asm__parts button:focus-visible::before { border-color: var(--signal); }
.asm__parts button[aria-pressed="true"]:hover::before, .asm__parts button[aria-pressed="true"]:focus-visible::before { background: var(--signal); }
.asm__parts button:focus-visible { outline-offset: -2px; }
.asm button:disabled { cursor: default; }
/* where the figure cannot run there is nothing to switch: the still shows the first preset */
.no-webgl .asm__presets, .no-webgl .asm__parts { display: none; }
.no-webgl .asm__note { text-align: left; }

/* not in engineering.css: the page label above the presets */
.asm__label { margin: 0 0 10px; }

@media (max-width: 1239px) {
  .asm__parts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .asm__parts li:nth-child(n+7) { border-top: 1px solid var(--line); }
  .asm__parts li:nth-child(7) { border-left: 0; }
}
@media (max-width: 860px) {
  .asm { order: 4; display: flex; flex-direction: column; margin-top: 4px; padding-bottom: 0; border-top: 0; }
  .asm::before { display: none; }
  /* the figure's own frame fades into the page above and below it */
  .page-apis .fig::before, .page-apis .fig::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 15%; pointer-events: none; }
  .page-apis .fig::before { top: 0; background: linear-gradient(to bottom, var(--ink-0), rgba(8, 9, 10, 0)); }
  .page-apis .fig::after { bottom: 0; height: 9%; background: linear-gradient(to top, var(--ink-0), rgba(8, 9, 10, 0)); }
  .asm__top { display: contents; }
  .asm__presets { order: 1; display: flex; }
  .asm__presets button { flex: 1 1 auto; min-height: 42px; padding: 0 6px; font-size: 10px; letter-spacing: .05em; }
  .asm__parts { order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .asm__parts li:nth-child(n) { border-left: 0; border-top: 0; }
  .asm__parts li:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
  .asm__parts li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .asm__parts button { justify-content: flex-start; gap: 8px; padding: 0 10px; font-size: 10px; letter-spacing: .05em; }
  .asm__note { order: 3; max-width: none; min-height: 4.5em; margin-top: 14px; text-align: left; }
}

/* picture mode: the figure alone */
.bare .asm { visibility: hidden; }

/* Not in engineering.css (revision 8, REQ-24): above 860 px a set of controls with more than five buttons
   (seven presets, twelve parts) is a full-width row below the figure area, never over the canvas. */
@media (min-width: 861px) {
  .page-apis .hero--page > .fig,
  .page-apis .hero--page > .fig-still { position: relative; inset: auto; grid-area: 1 / 1; min-height: 0; }
  .page-apis .hero--page > .hero__copy { grid-area: 1 / 1; }
  .page-apis .hero--page > .asm { grid-area: 2 / 1; position: static; width: auto; margin: 0 var(--gutter); }
}

/* H1 (revision 12): the panel's dark backdrop (.asm::before, absolute, inset to its containing block) belongs to the
   overlaid panel of the original. With the panel static in the row below the figure, its containing block became
   the whole hero, and the 90 percent dark gradient lay over the canvas: the figure looked almost black. The row
   below the figure needs no backdrop, so it is not drawn there; the panel itself is a positioned box again. */
@media (min-width: 861px) {
  .page-apis .hero--page > .asm { position: relative; }
  .page-apis .hero--page > .asm::before { display: none; }
}

/* Revision 13 (J3, fixes-round-e.md): up to 860 px the seven presets wrap inside the page width,
   two columns at 390 px and three from 520 px; labels stay on one line; buttons at least 44 px high. */
@media (max-width: 860px) {
  .page-apis .asm__presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 100%; overflow: visible; }
  .page-apis .asm__presets button { min-height: 44px; min-width: 0; padding: 0 8px; letter-spacing: .06em; white-space: nowrap; }
}
@media (min-width: 520px) and (max-width: 860px) {
  .page-apis .asm__presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}