/* Design tokens and the document's base: the palette in both schemes, the type scale, the spacing scale, the
   control sizes, the motion curves, and the two width steps every other sheet is written against — so a
   palette or a type-scale change is one file.

   MOBILE FIRST, and that is a statement about where the DEFAULTS live rather than a slogan. Every rule in
   every sheet is written for a phone, and the two `min-width` blocks below are the only places a wider
   viewport is described. Before this the page carried NO width query at all: it was responsive by accident —
   `flex-wrap` plus a `max-width` — which is a different thing from being designed for the surface the board,
   the fleet and the transcript drawer are actually read on. Measured on the page as it stood, at 390x844: a
   header 187.6px tall before a single row of content, a launch footer 265.6px tall over a 120px reservation
   (so the bottom of the board sat UNDER it, unreachable), controls between 15px and 35px tall, and at 320px a
   page that scrolled sideways by 4px because the auth zone could not shrink.

   THE TWO STEPS ARE DERIVED, not chosen off a device list:

   · 640px — the card strip's own arithmetic. `.fleet` lays `minmax(min(260px,100%),1fr)` tracks with a 12px
     gap, so a second track needs 532px of strip; at this width the chrome (the gutters plus the section
     frame) still leaves that much, and below it the strip is honestly one column. It is therefore the width
     at which the page stops being a single column of cards, which is the first thing that genuinely changes.
   · 1024px — where the content column reaches its measure. `main` is capped at `--measure`, so past roughly
     this width the column stops growing and the gutters take the rest; it is also where a precise pointer
     becomes the likely input, which is what lets the secondary controls come back down from the touch
     minimum.

   The two numbers are REPEATED in the sheets that need them rather than named once, and that is a constraint
   rather than an oversight: `@media (--step)` needs custom media queries, which no browser ships and which
   only a build step could supply — and #63 §A forecloses a build step. A token cannot stand in either, because
   a custom property is not usable in a media query's condition. So the numbers are written out, and this
   paragraph is where they are explained. */
:root {
  color-scheme: light dark;

  /* Palette — light. A warm-neutral page with white panels lifted off it by a hairline and a shadow faint
     enough to read as depth rather than as a second border. */
  --bg:#f4f5f8; --panel:#fff; --line:#e2e5ec; --line-soft:#eceff4;
  --fg:#12141a; --muted:#5f6875; --faint:#949cab;
  --accent:#3b6ef0; --accent-soft:rgba(59,110,240,.10);
  --ready:#0f9960; --ready-soft:rgba(15,153,96,.12);
  --run:#b8790a; --run-soft:rgba(194,130,10,.13);
  --block:#c2410c; --block-soft:rgba(194,65,12,.11);
  --live:#d21f6b; --live-soft:rgba(210,31,107,.12);
  --limbo:#b45309; --limbo-soft:rgba(180,83,9,.14);
  /* `--crit` / `--crit-soft`, added for the usage pill's four-level scale (ok/notice/warn/crit ->
     green/amber/burnt-orange/red). Before this pair existed the top two levels, `warn` (>=70%) and `crit`
     (>=90%), had nowhere to render but `--block` — sharing the third token deletes the fourth level exactly
     when it matters, at the point a reading crosses from merely elevated into the last margin before the
     ceiling.

     `--crit` is also the ONE level rendered as a SOLID fill rather than a soft tint
     (`background:var(--crit); color:var(--panel)`), and that inversion is a second, independent reason it
     stays apart from `--block`: #b4121f and #c2410c sit close enough in hue that a colour-blind operator
     gets no help from hue alone, but a filled pill beside a tinted one reads as two different SHAPES of grey
     regardless of hue. Both text pairings are measured, not assumed: white-on-#b4121f is 6.89:1 (light) and
     #14181f-on-#ff5964 is 5.82:1 (dark) — both clear the 4.5:1 AA floor, with margin, in both schemes. */
  --crit:#b4121f; --crit-soft:rgba(180,18,31,.13);
  /* The translucent bands (header, footer), the modal scrim, and the two elevations. All four are
     scheme-dependent: a light scrim over a dark page is a flash, and a shadow on a near-black page is
     nothing at all. */
  --chrome:color-mix(in srgb, var(--bg) 76%, transparent);
  --scrim:rgba(18,20,26,.34);
  --lift:0 1px 2px rgba(18,20,26,.05);
  --lift-high:0 16px 44px rgba(18,20,26,.16), 0 2px 8px rgba(18,20,26,.06);

  /* Type. Five steps with real distance between them. The page used to span 11.5px to 15px — four values
     inside three and a half pixels, which is a difference nobody perceives and therefore no hierarchy at
     all. */
  --t-micro:11px;   /* uppercase eyebrows: section headings, repository group headers */
  --t-meta:12.5px;  /* tags, hints, the meta row under a board item */
  --t-ui:13.5px;    /* control labels: buttons, chips, tabs, selects */
  --t-body:15px;    /* the reading size: item titles, the drawer's prose */
  --t-lead:20px;    /* the page title. 20px on a phone, where the title row is a band of its own; 17px from
                       1024px up, where it shares a row with the counts and must not dwarf them. */

  /* Space. One scale, used everywhere, so two surfaces separated by "a bit" are separated by the same bit. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;

  --radius:14px; --radius-sm:10px; --radius-xs:7px; --radius-pill:999px;

  /* Layout. `--gutter` is the page's side margin; `--measure` is how wide the content column may ever grow.
     The header and the footer align their own contents to that same edge, so the three bands read as one
     column rather than as three surfaces that happen to be stacked. */
  --gutter:20px;
  --measure:1080px;
  --card-pad:16px;

  /* Control sizes. Both numbers are sourced rather than taste:
     · --tap 44px is Apple's Human Interface Guidelines minimum hit target, and it is spent on exactly the two
       things #63 names — the launch button, which is the click that spends the subscription, and the view
       tabs.
     · --control-h 40px on a touch surface for everything else: comfortably above WCAG 2.2 SC 2.5.8's 24x24
       floor, and it comes down to 32px from 1024px up, where the input is a mouse.
     · --check 24px is EXACTLY that floor, at EVERY width, and it is a floor rather than a preference: a
       checkbox is a replaced element whose hit area cannot be padded out without wrapping it in markup the
       harness pins by name, so the box IS the target. It was written as 18px from 1024px up on the same
       reasoning that brings the other controls down there, and the spec that measures it against the floor
       said no: SC 2.5.8 is not a touch criterion that a mouse exempts you from. */
  --tap:44px;
  --control-h:40px;
  --check:24px;

  /* Motion. One decelerating curve and two durations. The curve leaves quickly and arrives slowly, so a
     surface appears to settle rather than to stop. */
  --ease:cubic-bezier(.32,.72,0,1);
  --dur-1:.16s;
  --dur-2:.26s;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark is designed, not inverted. The panel is LIGHTER than the page — elevation in the dark is light,
       not shadow — the hairlines carry more of the separation because a shadow on a near-black page is
       invisible, and the accents are lifted in lightness so they stay legible against it. */
    --bg:#0a0c10; --panel:#14181f; --line:#242a34; --line-soft:#1a1f27;
    --fg:#e9ebef; --muted:#9aa3b1; --faint:#6c7583;
    --accent:#7c9dff; --accent-soft:rgba(124,157,255,.15);
    --ready:#3ecf8e; --ready-soft:rgba(62,207,142,.13);
    --run:#e0a63a; --run-soft:rgba(224,166,58,.14);
    --block:#f4805e; --block-soft:rgba(244,128,94,.13);
    --live:#ff5c9d; --live-soft:rgba(255,92,157,.16);
    --limbo:#f0a53a; --limbo-soft:rgba(240,165,58,.16);
    --crit:#ff5964; --crit-soft:rgba(255,89,100,.15);
    --chrome:color-mix(in srgb, var(--bg) 74%, transparent);
    --scrim:rgba(0,0,0,.58);
    --lift:0 1px 2px rgba(0,0,0,.4);
    --lift-high:0 16px 44px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  }
}

@media (min-width: 640px) {
  :root { --gutter:28px; --card-pad:18px; }
}

@media (min-width: 1024px) {
  :root { --gutter:40px; --card-pad:20px; --control-h:32px; --t-lead:17px; }
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:var(--t-body)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* A phone turned sideways must not silently enlarge the copy and re-wrap a layout that was measured. */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}

/* Focus, which this page had none of beyond whatever the browser happened to draw. Keyboard operation is
   already load-bearing here — the tab strip carries a roving tabindex, and a repository group header is a
   real button precisely so it can be reached — so WHERE the focus is has to be visible, in both schemes, on
   every control. `:focus-visible` rather than `:focus`, so a mouse press does not leave a ring behind it. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}