/* ── 00-layers.css ── */
/* Janus kit · the one cascade order. Every kit rule sits in one of these layers; page stylesheets use @layer page.
   Served with the other assets/kit/NN-*.css files, in filename order, as /assets/kit.css. */
@layer reset, tokens, base, layout, primitives, forms, blocks, domain, overlays, shell, page, tones, states, utilities;

/* ── 01-tokens.css ── */
/* Janus kit · tokens. Paper register for work, navy register for presence, night for the control room.
   One action colour; severity = square + word + tone; LEDs are device truth.
   [data-theme=night], .presence and [data-scale=station] override tokens only. */
@layer tokens {
  @font-face { font-family: 'Jost V'; src: url(fonts/jost-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Jost V'; src: url(fonts/jost-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Jost V'; src: url(fonts/jost-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
  @font-face { font-family: 'Inter V'; src: url(fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Inter V'; src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Inter V'; src: url(fonts/inter-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

  /* A countdown ring's remaining share, animatable. */
  @property --cd-p { syntax: '<number>'; inherits: false; initial-value: 100; }

  :root {
    /* ── Palette ── */
    --navy-990: #061a2b; --navy-950: #0a263d; --navy-900: #103b61; --navy-850: #13446f; --navy-800: #154c7e; --navy-700: #1f6095; --navy-600: #2a74a8; --navy-500: #3588bb;
    --sky-700: #2f718d; --sky-600: #559ab8; --sky-500: #64a8c5; --sky-400: #86bcd3; --sky-300: #a9d0df; --sky-200: #cce3ec; --sky-100: #e7f2f6; --sky-50: #f3f9fb;
    --ink-950: #12202a; --ink-900: #1b2b35; --ink-800: #2b3d47; --ink-700: #40545f; --ink-600: #5a6d77; --ink-500: #71838c; --ink-400: #93a2a9; --ink-300: #b8c3c8; --ink-200: #d3dcdf; --ink-150: #e0e7e9; --ink-100: #ebf0f1; --ink-50: #f5f7f8;
    --green-700: #17633f; --green-600: #258056; --green-500: #2f9a68; --green-100: #e2f2e9; --green-50: #f1f8f4;
    --amber-800: #74490b; --amber-700: #936115; --amber-500: #d69326; --amber-400: #e2a020; --amber-100: #faecd0; --amber-50: #fff8e9;
    --red-800: #8f2629; --red-700: #b33135; --red-600: #d73c41; --red-100: #f9dddd; --red-50: #fff2f2;

    /* Device truth: signal tower and bay LEDs. Never re-tint, never decorate. */
    --led-red: #e5484d; --led-green: #30a46c; --led-blue: #3b82f6; --led-amber: #f5a524; --led-yellow: #f5d90a; --led-white: #ffffff;

    /* ── Surfaces, text, lines ── */
    --bg: #eef1f2; --rail: #f6f8f8; --sheet: #ffffff; --sheet-2: #f8fafa; --sheet-sunk: #f1f4f5;
    --text: var(--ink-900); --text-2: var(--ink-600); --text-3: #586a74;
    --line: var(--ink-150); --line-2: var(--ink-200); --line-soft: var(--ink-100); --line-strong: var(--ink-300);
    --hover: #f2f5f6; --selected: var(--sky-50); --selected-line: var(--sky-300);
    --accent: var(--navy-700); --accent-hover: var(--navy-800); --accent-fg: #ffffff; --accent-soft: var(--sky-100); --accent-text: var(--navy-700);
    --focus: #1679b8;
    --scrim: rgba(6, 26, 43, .42);
    --ink-on-dark: #e6f0f4; --ink-on-dark-2: #b3cdd9;   /* text on the navy toast, the draft bar and tooltips */
    --tip-bg: var(--ink-900);

    /* ── Tone quintets (read through --tone-* in components; see the tones layer) ── */
    --ok-fg: var(--green-700); --ok-bg: var(--green-100); --ok-line: var(--green-600); --ok-surface: var(--green-50); --ok-dot: var(--green-600);
    --warn-fg: var(--amber-800); --warn-bg: var(--amber-100); --warn-line: var(--amber-500); --warn-surface: var(--amber-50); --warn-dot: var(--amber-500);
    --bad-fg: var(--red-800); --bad-bg: var(--red-100); --bad-line: var(--red-600); --bad-surface: var(--red-50); --bad-dot: var(--red-600);
    --info-fg: var(--navy-800); --info-bg: var(--sky-100); --info-line: var(--sky-500); --info-surface: var(--sky-50); --info-dot: var(--sky-600);
    --idle-fg: var(--ink-700); --idle-bg: var(--ink-100); --idle-line: var(--ink-300); --idle-surface: var(--sheet-sunk); --idle-dot: var(--ink-400);
    /* Chart fills: graphics need 3:1 against paper (WCAG 1.4.11); status dots stay lighter because the word carries them. */
    --fill-ok: var(--green-600); --fill-warn: var(--amber-700); --fill-bad: var(--red-700); --fill-idle: var(--ink-500); --fill-info: var(--navy-600);

    /* ── Release: the Later · not in R1 mark is solid ink (metadata, never a severity) ── */
    --later-bg: var(--ink-800); --later-fg: #ffffff;

    /* ── The one selected/current look ── */
    --sel-bg: var(--sheet);          /* the chip on a sunk track (seg, tabs, nav, preview, toggles) */
    --sel-line: var(--line);         /* its hairline */
    --sel-ring: var(--accent);       /* the ring on a chosen card (option cards, rack/station choice) */

    /* ── Pattern language: dashed grey = Unknown, amber hatch = a Difference. Never swapped. ── */
    --dash-unknown-line: var(--cell-line);
    --dash-unknown: repeating-linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 6px);
    --dash-diff: repeating-linear-gradient(135deg, var(--amber-400) 0 3px, var(--amber-100) 3px 6px);
    --dash-diff-line: var(--amber-700);
    --cell-line: #6b7c85;            /* ≥ 3:1 against rack ground: cells are information, WCAG 1.4.11 */
    --cell-occ-line: var(--navy-600);

    /* ── Type ── */
    --font-ui: 'Inter V', 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-brand: 'Jost V', 'Jost Variable', 'Inter V', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --t-micro: 11px; --t-cap: 12px; --t-small: 13px; --t-data: 14px; --t-body: 15px; --t-lead: 17px; --t-section: 19px; --t-title: 24px; --t-page: 34px;
    --t-num: 30px; --t-num-lg: 48px; --t-num-xl: 76px;
    --t-display: clamp(32px, 4vw, 44px);
    --t-step: clamp(var(--t-title), 2.4vw, var(--t-page));     /* stepTitle() */
    --t-step-lg: clamp(var(--t-page), 3vw, var(--t-num));

    /* ── Space, radius, shadow ── */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
    --r1: 4px; --r2: 6px; --r3: 8px; --r4: 12px; --r5: 16px; --pill: 999px;
    --r-control: var(--r2); --r-card: var(--r3); --r-sheet: var(--r4); --r-hero: var(--r5);
    --shadow-1: 0 1px 2px rgba(18, 32, 42, .05), 0 1px 3px rgba(18, 32, 42, .04);
    --shadow-2: 0 4px 10px -4px rgba(18, 32, 42, .14), 0 2px 4px rgba(18, 32, 42, .05);
    --shadow-3: 0 18px 36px -14px rgba(14, 22, 28, .28), 0 6px 14px -6px rgba(14, 22, 28, .14);

    /* ── Size scales (one name set: xs sm md lg xl 2xl 3xl) ── */
    --h-sm: 36px; --h-md: 44px; --h-lg: 56px; --h-xl: 64px;
    --icon-sm: 15px; --icon-md: 18px; --icon-lg: 22px; --icon-xl: 28px; --icon-hero: 44px;
    --avatar-xs: 20px; --avatar-sm: 24px; --avatar-md: 32px; --avatar-lg: 40px; --avatar-xl: 56px; --avatar-2xl: 72px; --avatar-3xl: 88px;
    --tile-sm: 32px; --tile-md: 40px; --tile-lg: 56px; --tile-xl: 88px;
    --led-sm: 9px; --led-md: 12px; --led-lg: 16px; --led-xl: 22px; --led-2xl: 28px;
    --cd-sm: 64px; --cd-md: 112px; --cd-lg: 176px;
    --num-sm: var(--t-title); --num-md: var(--t-num); --num-lg: var(--t-num-lg); --num-xl: var(--t-num-xl);
    --cell-thumb: 4px; --cell-xs: 7px; --cell-sm: 11px; --cell-md: 18px; --cell-lg: 30px; --cell-xl: 40px;
    --bar-xs: 2px; --bar-sm: 4px; --bar-md: 6px; --bar-lg: 8px; --bar-xl: 12px;
    --row-compact: var(--s2) var(--s4); --row-default: var(--s3) var(--s5); --row-roomy: var(--s4) var(--s5);
    --target-min: 24px;              /* WCAG 2.5.8; 44 under pointer: coarse; 56 on the station scale (NFR-E2) */
    --target-primary: var(--target-min); /* a primary's floor: 64 on the station scale */

    /* ── Motion: durations and curves are named by purpose, never by feel ── */
    --m-press: 90ms;        /* pointer/key feedback */
    --m-state: 160ms;       /* colour/weight swaps in place */
    --m-enter: 240ms;       /* overlays, toasts, panes arriving */
    --m-exit: 160ms;        /* leaving is always faster than arriving */
    --m-travel: 320ms;      /* spatial moves: drawer, rail, reel into its cell */
    --m-settle: 480ms;      /* success settle: stamp, stored cell, receipt */
    --m-seam-step: 280ms;   /* minimum time one evidence step stays readable */
    --m-shake: 320ms;
    --m-led: 500ms;         /* HARDWARE: bay LED blink period, 1:1 duty (janus-ptl-driver). Never tune. */
    --m-shimmer: 1600ms;
    --e-standard: cubic-bezier(.2, 0, 0, 1);
    --e-enter: cubic-bezier(.16, 1, .3, 1);
    --e-exit: cubic-bezier(.4, 0, 1, 1);
    --e-travel: cubic-bezier(.32, .72, 0, 1);
    --e-settle: linear(0, .114, .342, .574, .762, .891, .97, 1.011, 1.026, 1.028, 1.023, 1.016, 1.01, 1.005, 1.002, 1);
    --e-progress: linear;

    /* ── Frame ── */
    --rail-w: 264px; --top-h: 64px; --actionbar-h: 0px; --phonebar-h: 0px; --gutter: var(--s8);
    color-scheme: light;
  }

  /* Night shift: the control-room register, chosen by the station, not by default. */
  :root[data-theme="night"] {
    --bg: #071723; --rail: #0a1f30; --sheet: #0e2638; --sheet-2: #112c41; --sheet-sunk: #0a2031;
    --text: #e6f0f4; --text-2: #a9c3d0; --text-3: #86a4b3;
    --line: rgba(169, 208, 223, .14); --line-2: rgba(169, 208, 223, .22); --line-soft: rgba(169, 208, 223, .08); --line-strong: rgba(169, 208, 223, .36);
    --hover: rgba(169, 208, 223, .07); --selected: rgba(100, 168, 197, .14); --selected-line: rgba(100, 168, 197, .55);
    --accent: var(--sky-500); --accent-hover: var(--sky-400); --accent-fg: #06202f; --accent-soft: rgba(100, 168, 197, .16); --accent-text: var(--sky-300);
    --focus: #7cc4ea;
    --sel-bg: #16354c;
    --cell-line: #7d9aa9; --cell-occ-line: #7fb3cf;
    --dash-diff: repeating-linear-gradient(135deg, var(--amber-400) 0 3px, rgba(226, 160, 32, .18) 3px 6px);
    --fill-ok: #3fb57c; --fill-warn: #e2a020; --fill-bad: #ef5d62; --fill-idle: #7d97a4; --fill-info: var(--sky-500);
    --ok-fg: #8fe0b6; --ok-bg: rgba(48, 164, 108, .18); --ok-line: #3fb57c; --ok-surface: rgba(48, 164, 108, .08); --ok-dot: #3fb57c;
    --warn-fg: #f4cf82; --warn-bg: rgba(226, 160, 32, .18); --warn-line: #e2a020; --warn-surface: rgba(226, 160, 32, .08); --warn-dot: #e2a020;
    --bad-fg: #ffb3b3; --bad-bg: rgba(229, 72, 77, .2); --bad-line: #e5484d; --bad-surface: rgba(229, 72, 77, .08); --bad-dot: #ef5d62;
    --info-fg: #bfe0ee; --info-bg: rgba(100, 168, 197, .18); --info-line: var(--sky-500); --info-surface: rgba(100, 168, 197, .07); --info-dot: var(--sky-500);
    --idle-fg: #b7c9d2; --idle-bg: rgba(169, 208, 223, .1); --idle-line: rgba(169, 208, 223, .3); --idle-surface: rgba(169, 208, 223, .05); --idle-dot: #7d97a4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 22px -8px rgba(0, 0, 0, .55); --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --tip-bg: #26475e;
    --later-bg: var(--ink-200); --later-fg: var(--ink-950);
    color-scheme: dark;
  }

  /* Presence register (kiosk, sign-in, phone camera, atlas hero): the navy ground. Its surface lives in base. */
  .presence {
    --ok-fg: #8fe0b6; --ok-bg: rgba(48, 164, 108, .18); --ok-line: #3fb57c; --ok-surface: rgba(48, 164, 108, .08); --ok-dot: #3fb57c;
    --warn-fg: #f4cf82; --warn-bg: rgba(226, 160, 32, .18); --warn-line: #e2a020; --warn-surface: rgba(226, 160, 32, .08); --warn-dot: #e2a020;
    --bad-fg: #ffb3b3; --bad-bg: rgba(229, 72, 77, .2); --bad-line: #e5484d; --bad-surface: rgba(229, 72, 77, .08); --bad-dot: #ef5d62;
    --info-fg: #bfe0ee; --info-bg: rgba(100, 168, 197, .18); --info-line: var(--sky-500); --info-surface: rgba(100, 168, 197, .07); --info-dot: var(--sky-500);
    --idle-fg: #b7c9d2; --idle-bg: rgba(169, 208, 223, .1); --idle-line: rgba(169, 208, 223, .3); --idle-surface: rgba(0, 0, 0, .18); --idle-dot: #7d97a4;
    --fill-ok: #3fb57c; --fill-warn: #e2a020; --fill-bad: #ef5d62; --fill-idle: #7d97a4; --fill-info: var(--sky-500);
    --text: #e6f0f4; --text-2: #b3cdd9; --text-3: #8fb0bf;
    --line: rgba(169, 208, 223, .16); --line-2: rgba(169, 208, 223, .24); --line-soft: rgba(169, 208, 223, .08); --line-strong: rgba(169, 208, 223, .4);
    --sheet: rgba(255, 255, 255, .05); --sheet-2: rgba(255, 255, 255, .03); --sheet-sunk: rgba(0, 0, 0, .18);
    --hover: rgba(169, 208, 223, .08); --selected: rgba(100, 168, 197, .14); --accent-soft: rgba(100, 168, 197, .16);
    --accent: var(--sky-500); --accent-hover: var(--sky-400); --accent-fg: #062033; --accent-text: var(--sky-300); --focus: #7cc4ea;
    --sel-bg: rgba(255, 255, 255, .12); --sel-line: transparent;
    --cell-line: rgba(169, 208, 223, .45); --cell-occ-line: #4d86a5;
    /* Buttons on navy: translucent, no resting shadow. */
    --btn-bg: rgba(255, 255, 255, .06); --btn-bg-hover: rgba(255, 255, 255, .12); --btn-line: rgba(169, 208, 223, .24); --btn-fg: #ffffff; --btn-shadow: none;
    --cd-bg: var(--navy-950);
    --later-bg: var(--ink-200); --later-fg: var(--ink-950);
    color-scheme: dark;
  }
  /* Layers opened from a navy ground get solid night surfaces back. */
  .presence :is(dialog, [popover]), dialog.presence {
    --sheet: #0e2638; --sheet-2: #112c41; --sheet-sunk: #0a2031;
  }

  /* Station scale: kiosk, handheld, phone-scan, sign-in, setup-wizard. Type, controls, icons, avatars and LEDs step up.
     The station ladder is Neo NFR-E2 (glove use): nothing a person presses is under 56 px (small and standard controls
     are both 56: a small control on a station is still pressed with a glove), large controls and every primary are 64,
     the thumb bar's one primary 72. */
  [data-scale="station"] {
    --t-cap: 13px; --t-small: 15px; --t-data: 16px; --t-body: 17px; --t-lead: 19px; --t-section: 22px; --t-title: 28px;
    --h-sm: 56px; --h-md: 56px; --h-lg: 64px; --h-xl: 72px;
    --icon-sm: 18px; --icon-md: 22px; --icon-lg: 28px; --icon-xl: 34px; --icon-hero: 56px;
    --avatar-xs: 24px; --avatar-sm: 32px; --avatar-md: 40px; --avatar-lg: 56px; --avatar-xl: 72px; --avatar-2xl: 88px; --avatar-3xl: 104px;
    --led-sm: 12px; --led-md: 16px; --led-lg: 22px; --led-xl: 28px; --led-2xl: 36px;
    --target-min: 56px; --target-primary: 64px;
    /* Must-read type follows the frame's width (container units; the frame's main area is the container): the one
       instruction is ≥ 64 px on the 1280 × 800 reference kiosk and grows to 72 on a wider wall screen, readable at 2 m
       (Neo NFR-E3), while a handheld stays proportionate (32 px at 480). The bay address is larger still
       (bayAddress({ size: 'hero' })). */
    --t-display: clamp(32px, 5.2cqi, 72px);
    --t-step: clamp(var(--t-title), 3.2cqi, 44px);
    --t-step-lg: clamp(34px, 5.2cqi, 72px);
  }

  /* Reduced motion: movement collapses; information and colour stay. Loops stop in the states layer. */
  @media (prefers-reduced-motion: reduce) {
    :root { --m-enter: 0ms; --m-exit: 0ms; --m-travel: 0ms; --m-settle: 0ms; --m-seam-step: 0ms; --m-shake: 0ms; }
  }
  @media (pointer: coarse) { :root { --target-min: 44px; } }
  @media (max-width: 900px) { :root { --t-page: 28px; --t-num-lg: 38px; --gutter: var(--s4); } }
}

/* ── 02-base.css ── */
/* Janus kit · reset and element defaults. */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  legend { padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    scroll-padding-top: calc(var(--top-h) + var(--s4));
    scroll-padding-bottom: calc(var(--actionbar-h) + var(--phonebar-h) + var(--s6));
  }
  body {
    background: var(--bg); color: var(--text); caret-color: var(--accent);
    font: 400 var(--t-body)/1.5 var(--font-ui); font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  :is(h1, h2, h3, h4) { text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 2px; }
  ::selection { background: var(--sky-200); color: var(--navy-950); }
  :root[data-theme="night"] ::selection, .presence ::selection { background: var(--sky-600); color: #fff; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r1); }
  /* A heading or receipt that script focused (tabindex=-1, never a Tab stop) is not a control: no ring. */
  :is(h1, h2, h3, h4, .receipt, .steptitle)[tabindex="-1"]:focus { outline: none; }
  input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
  * { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
  :root[data-theme="night"] *, .presence * { scrollbar-color: rgba(169, 208, 223, .25) transparent; }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: max(.92em, 12.5px); letter-spacing: -.01em; }
  kbd {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: var(--r1); border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--sheet);
    color: var(--text-2); font-size: 11px; font-weight: 600; line-height: 1; vertical-align: 1px;
  }
  mark { background: var(--warn-bg); color: inherit; border-radius: 2px; padding: 0 2px; }
  mark[data-tone] { background: var(--tone-bg); color: var(--tone-fg); }
  abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; }
  hr { border: 0; height: 1px; background: var(--line); margin: var(--s4) 0; }

  /* The one visually-hidden utility. */
  .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* The navy presence ground (tokens in the tokens layer). */
  .presence { background-color: var(--navy-950); background-image: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 38%, var(--navy-990) 100%); color: var(--text); }

  /* Cross-page view transitions: fade in over enter, out over exit; the head and page tabs hold still. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out var(--m-exit) var(--e-exit) both; }
  ::view-transition-new(root) { animation: vt-in var(--m-enter) var(--e-enter) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
  }
  html[data-motion="paused"]::view-transition-group(*), html[data-motion="paused"]::view-transition-old(*), html[data-motion="paused"]::view-transition-new(*) { animation: none; }

  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
    kbd { border-color: CanvasText; }
  }
}

/* ── 03-layout.css ── */
/* Janus kit · layout. Page widths, stacks, rows, grids, splits and sections. No colour, no component look. */
@layer layout {
  /* ── Page ── */
  .page { max-width: 1440px; margin: 0 auto; padding: var(--s8) var(--gutter) var(--s16); }
  .page--narrow { max-width: 1040px; }
  .page--md { max-width: 1200px; }
  .page--wide { max-width: none; }
  .page--flush { padding: 0; max-width: none; }
  @media (max-width: 900px) { .page { padding: var(--s5) var(--gutter) var(--s12); } }

  /* ── Stack: vertical rhythm ── */
  .stack { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .stack--0 { gap: 0; } .stack--1 { gap: var(--s1); } .stack--2 { gap: var(--s2); } .stack--3 { gap: var(--s3); }
  .stack--4 { gap: var(--s4); } .stack--5 { gap: var(--s5); } .stack--6 { gap: var(--s6); } .stack--7 { gap: var(--s7); } .stack--8 { gap: var(--s8); }

  /* ── Row: one line of things ── */
  .row { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
  .row--wrap { flex-wrap: wrap; }
  .row--between { justify-content: space-between; }
  .row--end { justify-content: flex-end; }
  .row--center { justify-content: center; }
  .row--top { align-items: flex-start; }
  .row--baseline { align-items: baseline; }
  .row--gap-0 { gap: 0; } .row--gap-1 { gap: var(--s1); } .row--gap-2 { gap: var(--s2); } .row--gap-3 { gap: var(--s3); }
  .row--gap-4 { gap: var(--s4); } .row--gap-5 { gap: var(--s5); } .row--gap-6 { gap: var(--s6); } .row--gap-8 { gap: var(--s8); }

  /* ── Grid: equal columns ── */
  .grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); }
  @media (max-width: 1180px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 900px) { .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 560px) { .grid--4 { grid-template-columns: minmax(0, 1fr); } }

  /* ── Split: main + side column ── */
  .split { --side: 380px; display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--s6); align-items: start; }
  .split > * { min-width: 0; }
  .split--side-sm { --side: 300px; }
  .split--side-md { --side: 380px; }
  .split--side-lg { --side: 460px; }
  .split--left { grid-template-columns: var(--side) minmax(0, 1fr); }
  .split--left:not(.split--side-md, .split--side-lg) { --side: 300px; }
  @media (max-width: 1180px) { .split:not(.split--left) { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 900px) { .split--left { grid-template-columns: minmax(0, 1fr); } }

  /* ── Section: a titled band of a page ── */
  .section { padding-block: var(--s6); }
  .section + .section { border-top: 1px solid var(--line); }
  .section--flush { padding-block: 0; }
  .section + .section--flush { border-top: 0; }
  .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
  .section__title { font-size: var(--t-section); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
  .section__meta { font-size: var(--t-small); color: var(--text-3); }
  .section__actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-left: auto; }

  /* ── Helpers ── */
  .grow { flex: 1; min-width: 0; }
  .sticky { position: sticky; top: calc(var(--top-h) + var(--s5)); }
  /* A sticky column that fits the viewport and scrolls on its own (side navigation). */
  .sticky--fit { max-height: calc(100dvh - var(--top-h) - var(--s5) * 2); overflow-y: auto; overscroll-behavior: contain; }
  @media (max-width: 900px) { .sticky--fit { position: static; max-height: none; } }
  .divider { height: 1px; background: var(--line); border: 0; margin: var(--s4) 0; }
}

/* ── 04-primitives.css ── */
/* Janus kit · primitives: icon, button, icon button, status word, badge, chip, tag, identifier, number, stat,
   avatar, person, LED, icon tile, rank, provenance, freshness, as-of, permit.
   Tone-aware primitives set their idle quintet on themselves, so they never inherit a parent's tone. */
@layer primitives {
  /* ── Icon (Lucide outline, 1.75 stroke) ── */
  .i {
    width: var(--i, var(--icon-md)); height: var(--i, var(--icon-md)); flex: none; display: inline-block; vertical-align: -4px;
    stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  }
  .i--sm { --i: var(--icon-sm); vertical-align: -3px; }
  .i--lg { --i: var(--icon-lg); vertical-align: -5px; }
  .i--xl { --i: var(--icon-xl); }
  .i--hero { --i: var(--icon-hero); stroke-width: 1.5; }

  /* ── Button ── */
  .btn {
    --bh: var(--h-md);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    height: var(--bh); min-width: var(--target-min); padding: 0 var(--s4);
    border-radius: var(--r-control); border: 1px solid var(--btn-line, var(--line-2));
    background: var(--btn-bg, var(--sheet)); color: var(--btn-fg, var(--text)); box-shadow: var(--btn-shadow, var(--shadow-1));
    font-size: var(--t-data); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--m-press), border-color var(--m-press), box-shadow var(--m-state), transform var(--m-press), color var(--m-press);
  }
  .btn:hover { background: var(--btn-bg-hover, var(--hover)); border-color: var(--line-strong); text-decoration: none; }
  .btn:active { transform: translateY(1px); }
  .btn--primary { --btn-bg: var(--accent); --btn-bg-hover: var(--accent-hover); --btn-fg: var(--accent-fg); --btn-line: transparent; box-shadow: 0 1px 2px rgba(10, 38, 61, .2), inset 0 1px 0 rgba(255, 255, 255, .12); }
  .btn--primary:hover, .btn--danger:hover, .btn--warn:hover { border-color: transparent; }
  .btn--danger { --btn-bg: var(--red-700); --btn-bg-hover: var(--red-800); --btn-fg: #fff; --btn-line: transparent; }
  .btn--warn { --btn-bg: var(--amber-400); --btn-bg-hover: var(--amber-500); --btn-fg: #2b1c02; --btn-line: transparent; }
  .btn--ghost { --btn-bg: transparent; --btn-line: transparent; --btn-fg: var(--text-2); box-shadow: none; }
  .btn--ghost:hover { color: var(--text); border-color: transparent; }
  .btn--quiet { box-shadow: none; }
  .btn--link { --btn-bg: transparent; --btn-bg-hover: transparent; --btn-line: transparent; --btn-fg: var(--accent-text); box-shadow: none; padding-inline: var(--s1); text-decoration: underline; text-underline-offset: 3px; }
  .btn--link:hover { text-decoration-thickness: 2px; border-color: transparent; }
  .btn--sm { --bh: var(--h-sm); padding: 0 var(--s3); font-size: var(--t-small); }
  .btn--lg { --bh: var(--h-lg); padding: 0 var(--s6); font-size: var(--t-body); border-radius: var(--r3); }
  .btn--xl { --bh: var(--h-xl); padding: 0 var(--s8); font-size: 18px; border-radius: var(--r4); }
  .btn--block { width: 100%; }
  .btn--start { justify-content: flex-start; text-align: start; }
  .btn--between { justify-content: space-between; text-align: start; }
  .btn--icon { width: var(--bh); padding: 0; }
  .btn__meta { margin-left: auto; font-weight: 400; font-size: var(--t-small); color: var(--text-2); }
  .btn--primary .btn__meta, .btn--danger .btn__meta { color: inherit; opacity: .8; }
  .btn .kbd-hint { margin-left: var(--s1); opacity: .7; font-size: 12px; font-weight: 600; }
  @media (pointer: coarse) { .btn--sm { --bh: var(--h-md); } }
  @media (max-width: 600px) { .btn--block-phone { width: 100%; } }

  /* Hold to confirm: a pointer or key hold fills from the left (app.js wires [data-hold]). */
  .hold { position: relative; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; touch-action: none; }
  .hold__fill { position: absolute; inset: 0; background: color-mix(in oklab, var(--accent) 35%, transparent); transform: scaleX(0); transform-origin: left; z-index: -1; }

  /* ── Icon button: always named; a badge is decorative (the name carries the count) ── */
  .iconbtn {
    --ib: 40px;
    position: relative; flex: none; width: var(--ib); height: var(--ib); display: inline-grid; place-items: center;
    border-radius: var(--r3); border: 0; background: transparent; color: var(--text-2); cursor: pointer; text-decoration: none;
    transition: background var(--m-press), color var(--m-press);
  }
  .iconbtn:hover { background: var(--hover); color: var(--text); }
  .iconbtn--sm { --ib: var(--h-sm); border-radius: var(--r2); }
  .iconbtn--lg { --ib: var(--h-md); }
  .iconbtn--xl { --ib: var(--h-lg); border-radius: var(--r4); }
  .iconbtn--line { box-shadow: inset 0 0 0 1px var(--line-2); background: var(--sheet); }
  .iconbtn__badge { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 2px; background: var(--bad-dot); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
  .iconbtn__badge:not(:empty) { width: auto; height: 16px; min-width: 16px; top: 2px; right: 2px; padding: 0 4px; border-radius: var(--pill); font: 700 10px/16px var(--font-ui); color: #fff; background: var(--fill-bad); text-align: center; font-variant-numeric: tabular-nums; }
  @media (pointer: coarse) { .iconbtn { --ib: var(--h-md); } }

  /* ── Status word: square + word (the default way to state a state) ── */
  .st {
    --tone-fg: var(--idle-fg); --tone-dot: var(--idle-dot);
    display: inline-flex; align-items: center; gap: 6px; color: var(--tone-fg);
    font-size: var(--t-small); font-weight: 600; white-space: nowrap;
  }
  .st::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--tone-dot); flex: none; }
  .st--sm { font-size: var(--t-cap); gap: 5px; } .st--sm::before { width: 7px; height: 7px; }
  .st--lg { font-size: var(--t-data); } .st--lg::before { width: 10px; height: 10px; }
  .st--hollow::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
  .st--wrap { white-space: normal; align-items: baseline; } .st--wrap::before { transform: translateY(-1px); }
  .st--live::before { animation: st-breath 1s ease-in-out infinite alternate; }
  @keyframes st-breath { to { opacity: .35; } }

  /* ── Badge: 24 px, square + word on the tone ground ── */
  .badge {
    --tone-fg: var(--idle-fg); --tone-bg: var(--idle-bg); --tone-line: var(--idle-line); --tone-fill: var(--fill-idle);
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--s2); border-radius: var(--r2);
    background: var(--tone-bg); color: var(--tone-fg); font-size: var(--t-cap); font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  }
  .badge::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .9; flex: none; }
  .badge--plain::before { display: none; }
  .badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
  .badge--outline[data-tone]:not([data-tone="idle"]) { box-shadow: inset 0 0 0 1px var(--tone-line); color: var(--tone-fg); }
  .badge--solid { background: var(--tone-fill, var(--fill-idle)); color: #fff; }
  /* Idle solid carries text: the 3:1 chart fill is too light for white words by day (ink-600 = 5.3:1). */
  .badge--solid:is(:not([data-tone]), [data-tone="idle"]) { background: var(--ink-600); }
  :root[data-theme="night"] .badge--solid:is(:not([data-tone]), [data-tone="idle"]), .presence .badge--solid:is(:not([data-tone]), [data-tone="idle"]) { background: var(--fill-idle); }
  :root[data-theme="night"] :is(.badge--solid, .iconbtn__badge:not(:empty)), .presence :is(.badge--solid, .iconbtn__badge:not(:empty)) { color: var(--navy-990); }

  /* ── Chip: a 24 px pill; a tone adds the square ── */
  .chip {
    --tone-fg: var(--idle-fg); --tone-bg: var(--idle-bg);
    display: inline-flex; align-items: center; gap: var(--s1); height: 24px; padding: 0 var(--s2); border-radius: var(--pill);
    background: var(--tone-bg); color: var(--tone-fg); font-size: var(--t-cap); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  .chip[data-tone]:not([data-tone="idle"])::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; margin-right: 2px; flex: none; }
  .chip .i { --i: 13px; vertical-align: -2px; }
  a.chip { min-height: var(--target-min); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--m-press); }
  a.chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); text-decoration: none; }

  /* ── Tag: mono identifier or code on a sunk ground ── */
  .tag {
    display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border-radius: var(--r1);
    border: 1px solid var(--line); background: var(--sheet-sunk); color: var(--text-2);
    font-family: var(--font-mono); font-size: 12px; white-space: nowrap;
  }
  .tag--sm { height: 20px; font-size: 11px; padding: 0 4px; }
  .tag--lg { height: 28px; font-size: 13px; padding: 0 var(--s2); }

  /* ── Identifier: ids never break inside ── */
  .ident { font-family: var(--font-mono); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; font-size: max(.92em, 12.5px); }
  .ident--sm { font-size: var(--t-small); }
  .ident--md { font-size: var(--t-data); }
  .ident--lg { font-size: 20px; letter-spacing: -.02em; }
  .ident--hero { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.04em; line-height: 1; }

  /* ── Number and stat (the big-number pattern; meters use it) ── */
  .num--sm { font-size: var(--num-sm); } .num--md { font-size: var(--num-md); } .num--lg { font-size: var(--num-lg); } .num--xl { font-size: var(--num-xl); }
  :is(.num--sm, .num--md, .num--lg, .num--xl) { font-weight: 400; line-height: 1; letter-spacing: -.03em; }
  .num__unit { font-family: var(--font-ui); font-size: max(.38em, 13px); color: var(--text-3); letter-spacing: 0; margin-left: 2px; font-weight: 500; }
  .stat { --tone-fg: var(--text); --stat-size: var(--num-lg); display: grid; gap: var(--s1); align-content: start; min-width: 0; }
  .stat--sm { --stat-size: var(--num-sm); } .stat--md { --stat-size: var(--num-md); } .stat--xl { --stat-size: var(--num-xl); }
  .stat__k { font-size: var(--t-small); color: var(--text-2); font-weight: 500; display: flex; align-items: center; gap: var(--s2); }
  .stat__v { font-family: var(--font-brand); font-size: var(--stat-size); font-weight: 400; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tone-fg); }
  .stat--text .stat__v { font: 600 var(--t-lead)/1.3 var(--font-ui); letter-spacing: 0; padding-top: .35em; font-variant-numeric: normal; }
  .stat__v small, .stat__v .num__unit { font-family: var(--font-ui); font-size: max(.38em, 13px); color: var(--text-3); letter-spacing: 0; margin-left: 2px; font-weight: 500; }
  .stat__f { font-size: var(--t-small); color: var(--text-3); }

  /* ── Avatar, person, stack ── */
  .avatar {
    width: var(--av, var(--avatar-md)); height: var(--av, var(--avatar-md)); flex: none;
    display: inline-grid; place-items: center; border-radius: 50%;
    background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text);
    font-size: max(11px, calc(var(--av, var(--avatar-md)) * .375)); font-weight: 700; letter-spacing: .02em; line-height: 1;
  }
  .avatar--xs { --av: var(--avatar-xs); } .avatar--sm { --av: var(--avatar-sm); } .avatar--md { --av: var(--avatar-md); }
  .avatar--lg { --av: var(--avatar-lg); } .avatar--xl { --av: var(--avatar-xl); } .avatar--2xl { --av: var(--avatar-2xl); } .avatar--3xl { --av: var(--avatar-3xl); }
  .avatar > .i { --i: 60%; vertical-align: 0; }
  .avatar--sys { background: var(--navy-800); color: #fff; box-shadow: none; }
  :root[data-theme="night"] .avatar--sys, .presence .avatar--sys { background: var(--sky-600); color: var(--navy-990); }
  .avatar--ghost { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .avatar--idle { background: var(--sheet-2); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); }

  .person { --av: var(--avatar-sm); display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; vertical-align: middle; color: inherit; text-decoration: none; }
  .person--md { --av: var(--avatar-md); } .person--lg { --av: var(--avatar-lg); gap: var(--s3); }
  .person__t { display: grid; min-width: 0; line-height: 1.3; }
  .person__n { font-size: var(--t-data); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .person--wrap .person__n { white-space: normal; overflow: visible; }
  .person--lg .person__n { font-size: var(--t-body); }
  .person__r { display: block; font-size: var(--t-cap); color: var(--text-2); font-weight: 400; }
  button.person { border: 0; background: none; padding: 2px var(--s2) 2px 2px; border-radius: var(--pill); cursor: pointer; text-align: start; min-height: var(--target-min); }
  :is(button.person, a.person):hover { background: var(--hover); text-decoration: none; }
  /* Chip: the person's menu button in a station head: a ringed pill at the control height. */
  .person.person--chip { gap: var(--s3); min-height: var(--h-md); padding: 3px var(--s4) 3px 3px; box-shadow: inset 0 0 0 1px var(--btn-line, var(--line-2)); }
  .person--chip > .i { color: var(--text-2); }
  .person--chip[aria-expanded="true"], .person--chip:has(+ :popover-open) { background: var(--hover); }
  /* On a phone the chip folds to its avatar; the name stays in its accessible name. */
  @media (max-width: 560px) { .person--chip { gap: var(--s1); padding-right: var(--s2); } .person--chip .person__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

  .avatar-stack { display: inline-flex; align-items: center; }
  .avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--sheet); }
  .avatar-stack > .avatar + .avatar { margin-left: -6px; }
  /* Small avatars overlap less, so two-letter initials stay whole. */
  .avatar-stack > :is(.avatar--xs, .avatar--sm) + .avatar { margin-left: -2px; }
  .avatar-stack__more { font-size: 11px; }

  /* ── LED: device truth. Blink is 500 ms, 1:1 duty; slow is 1 s. ── */
  .led {
    --led: var(--led-md);
    display: inline-block; flex: none; width: var(--led); height: var(--led); border-radius: calc(var(--led) * .25); vertical-align: -1px;
    background: var(--c, var(--led-green)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  }
  .led--sm { --led: var(--led-sm); } .led--lg { --led: var(--led-lg); } .led--xl { --led: var(--led-xl); } .led--2xl { --led: var(--led-2xl); }
  .led--red { --c: var(--led-red); } .led--green { --c: var(--led-green); } .led--blue { --c: var(--led-blue); } .led--amber { --c: var(--led-amber); }
  .led--yellow { --c: var(--led-yellow); } .led--white { --c: var(--led-white); }
  @media (max-width: 560px) { .btn--primary-phone { --btn-bg: var(--accent); --btn-bg-hover: var(--accent-hover); --btn-fg: var(--accent-fg); --btn-line: transparent; box-shadow: 0 1px 2px rgba(10, 38, 61, .2), inset 0 1px 0 rgba(255, 255, 255, .12); } }
  .chip--wrap { white-space: normal; height: auto; min-height: var(--target-min); padding-block: 2px; text-align: start; }
  .problink { --tone-fg: var(--text-2); display: inline; padding: 2px 0; font-size: var(--t-small); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
  .problink:hover .problink__t { text-decoration: underline; text-underline-offset: 3px; }
  .problink__st { font-weight: 650; color: var(--tone-fg); }
  .problink__st::before { content: ''; display: inline-block; width: .62em; height: .62em; margin-right: .4em; border-radius: 2px; background: var(--tone-dot, var(--idle-dot)); vertical-align: .02em; }
  .batt { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: var(--t-small); }
  .batt > i { position: relative; width: 18px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.25px currentColor; }
  .batt > i::before { content: ''; position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) * var(--b, 1)); background: currentColor; border-radius: 1px; }
  .batt > i::after { content: ''; position: absolute; right: -3px; top: 3px; width: 2px; height: 3px; background: currentColor; border-radius: 0 2px 2px 0; }
  .batt[data-tone] { color: var(--tone-fg); font-weight: 650; }
  .btn--wrap { white-space: normal; height: auto; min-height: var(--bh); padding-block: var(--s2); text-align: start; line-height: 1.25; }
  .iconbtn--round { border-radius: 50%; }
  .iconbtn--overlay { background: rgba(6, 26, 43, .55); color: #fff; backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
  .iconbtn--overlay:hover { background: rgba(6, 26, 43, .75); color: #fff; }
  /* Person tile: a big avatar over the name and role (the sign-in people grid). */
  .person.person--tile { flex-direction: column; justify-content: center; gap: var(--s2); width: 100%; min-height: 132px; padding: var(--s4) var(--s3); border-radius: var(--r4); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
  .person--tile .person__t { justify-items: center; }
  .person--tile .person__n { white-space: normal; font-size: var(--t-body); }
  :is(a, button).person--tile:hover { background: var(--hover); }
  .person--tile[aria-current="true"], .person--tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sel-ring); background: var(--selected); }
  .meta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-cap); font-weight: 600; color: var(--text-2); }
  .cite { display: inline-flex; align-items: center; gap: var(--s1); }
  .icontile { position: relative; }
  .icontile[data-ping]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); animation: k-ping 1200ms var(--e-exit, ease-out) 1; pointer-events: none; }
  @keyframes k-ping { to { box-shadow: 0 0 0 18px transparent; } }
  @media (prefers-reduced-motion: reduce) { .icontile[data-ping]::after { animation: none; } }
  html[data-motion="paused"] .icontile[data-ping]::after { animation: none; }
  /* A toned icon (icon(name, { tone })) takes the tone's foreground. */
  .i[data-tone] { color: var(--tone-fg); }
  .led--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .led--unknown { background: transparent; box-shadow: none; outline: 1.5px dashed var(--cell-line, var(--line-strong)); outline-offset: -1.5px; animation: none; }
  .led--blink { animation: led-blink var(--m-led) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  .led--slow { animation: led-blink calc(var(--m-led) * 2) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  @keyframes led-blink { 50% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); } }
  /* An LED that explains itself: a 24 px button that opens its hint. */
  .ledbtn { display: inline-grid; place-items: center; min-width: var(--target-min); min-height: var(--target-min); padding: 0; border: 0; border-radius: var(--r2); background: transparent; cursor: help; vertical-align: middle; }
  .ledbtn:hover { background: var(--hover); }

  /* ── Icon tile: an icon on its tone ground (square r3, or round) ── */
  .icontile {
    --tile: var(--tile-md); --tone-fg: var(--idle-fg); --tone-bg: var(--idle-bg);
    width: var(--tile); height: var(--tile); flex: none; display: inline-grid; place-items: center;
    border-radius: var(--r3); background: var(--tone-bg); color: var(--tone-fg);
  }
  .icontile > .i { --i: calc(var(--tile) * .5); vertical-align: 0; }
  .icontile--sm { --tile: var(--tile-sm); border-radius: var(--r2); }
  .icontile--lg { --tile: var(--tile-lg); border-radius: var(--r4); }
  .icontile--xl { --tile: var(--tile-xl); border-radius: var(--r5); }
  .icontile--xl > .i { stroke-width: 1.5; }
  .icontile--round { border-radius: 50%; }

  /* ── Rank: an ordinal, not a severity (severity lives on the status mark) ── */
  .rank { flex: none; display: inline-grid; place-items: center; min-width: 24px; font: 600 15px/1 var(--font-brand); color: var(--text-2); font-variant-numeric: tabular-nums; }

  /* ── Provenance: where a value came from ── */
  .src {
    --tone-fg: var(--idle-fg); --tone-bg: var(--idle-bg);
    display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r1);
    background: var(--tone-bg); color: var(--tone-fg); font-size: 12px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
  }
  .src[data-kind="label"] { --tone-fg: var(--info-fg); --tone-bg: var(--info-bg); }
  .src[data-kind="master"] { --tone-fg: var(--ok-fg); --tone-bg: var(--ok-bg); }
  .src[data-kind="op"] { --tone-fg: var(--warn-fg); --tone-bg: var(--warn-bg); }
  .src[data-kind="integration"] { --tone-fg: var(--info-fg); --tone-bg: color-mix(in oklab, var(--info-bg) 60%, var(--idle-bg)); }

  /* ── Freshness and as-of: how current a value is ── */
  .fresh { --tone-dot: var(--idle-dot); display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-cap); color: var(--text-3); white-space: nowrap; }
  .fresh::before { content: ''; width: 6px; height: 6px; border-radius: 1.5px; background: var(--tone-dot); flex: none; }
  .asof { font-size: var(--t-cap); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: var(--s1); }
  .val.is-stale { color: var(--text-3); }

  /* ── Permit chip on a rack head ── */
  .permit { display: inline-flex; align-items: center; gap: var(--s2); min-height: 28px; padding: 2px var(--s3); border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-text); font-size: var(--t-small); font-weight: 600; }

  @media (forced-colors: active) {
    .st::before, .badge::before, .chip[data-tone]::before, .fresh::before, .iconbtn__badge { forced-color-adjust: none; background: CanvasText; }
    .st--hollow::before { background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
    .led { forced-color-adjust: none; outline: 1px solid CanvasText; }
    .led--unknown { outline: 1.5px dashed CanvasText; }
    .btn, .iconbtn--line, .tag, .badge--outline { border: 1px solid ButtonText; }
    .avatar { border: 1px solid CanvasText; }
  }
}

/* ── The stop signal (liveState()): the connection's state wherever a person could act. Hidden while connected;
      warn "Reconnecting…" while the page catches up; bad "Not connected — nothing is being booked" once lost, its
      detail ("Offline · as of 14:32") under or beside it. app.js paints data-state and data-tone. It arrives at
      --m-enter and leaves at once, after the fresh render (the page is true again the moment it goes). Three forms:
      the pill (top bar), the strip (a handheld's 56 px band over its task bar), the veil (a kiosk task pane). ── */
@layer primitives {
  .livestate {
    --tone-fg: var(--warn-fg); --tone-surface: var(--warn-surface); --tone-line: var(--warn-line); --tone-dot: var(--warn-dot);
    display: inline-grid; grid-template-columns: 9px auto; align-items: center; column-gap: var(--s2); min-height: 32px; max-width: 100%;
    padding: 3px var(--s3); border-radius: var(--r3); background: var(--tone-surface); box-shadow: inset 0 0 0 1px var(--tone-line);
    color: var(--tone-fg); font-size: var(--t-cap); line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap;
    transition: opacity var(--m-enter) var(--e-enter), translate var(--m-enter) var(--e-enter);
    @starting-style { opacity: 0; translate: 0 -4px; }
  }
  .livestate[hidden] { display: none; }
  .livestate__mark { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--tone-dot); }
  .livestate__t { font-weight: 700; }
  .livestate__d { font-weight: 500; color: var(--text-2); }
  .livestate:not(.livestate--veil) .livestate__d { grid-column: 2; font-size: 11px; }
  .livestate:has(.livestate__d:empty) { border-radius: var(--pill); }
  .livestate__d:empty { display: none; }
  .livestate[data-state="stopped"] .livestate__t { color: var(--tone-fg); }
}
@layer domain {
  /* The strip: a full-width band at the station's control height, over the thumb zone. */
  .livestate--strip {
    display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 2px var(--s3); max-width: none; min-height: var(--h-md);
    padding: var(--s2) var(--s4); border-radius: 0; box-shadow: inset 0 2px 0 var(--tone-line), inset 0 -1px 0 var(--tone-line);
    font-size: var(--t-data); white-space: normal;
  }
  .livestate--strip .livestate__mark { width: 12px; height: 12px; }
  .livestate--strip .livestate__d { font-size: var(--t-small); }
  /* The veil: over the task pane it stops (its container is positioned), on the navy ground in every theme. The words
     are must-read (the station's display size: ≥ 64 px on the 1280 × 800 kiosk); the mark is the unplugged cord. */
  .livestate--veil {
    position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; max-width: none; padding: var(--s6); overflow: clip; white-space: normal; container-type: inline-size;
    border-radius: inherit; background: color-mix(in oklab, var(--navy-990) 90%, transparent); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 3px var(--tone-line); color: #e6f0f4; font-size: var(--t-lead);
    --bad-fg: #ffb3b3; --warn-fg: #f4cf82; --text-2: #b3cdd9;
  }
  .livestate--veil { grid-template-columns: minmax(0, 1fr); }
  .livestate--veil .livestate__card { display: grid; justify-items: center; gap: var(--s5); width: min(22ch, 100%); min-width: 0; text-align: center; overflow-wrap: anywhere; }
  .livestate--veil .livestate__words { display: grid; gap: var(--s3); }
  .livestate--veil .livestate__mark { width: auto; height: auto; background: none; color: var(--tone-line); }
  .livestate--veil .livestate__t { font: 450 min(var(--t-display), 10cqi)/1.04 var(--font-brand); letter-spacing: -.02em; color: #fff; }
  .livestate--veil[data-state="reconnecting"] .livestate__t { color: var(--tone-fg); }
  .livestate--veil .livestate__d { font-size: var(--t-lead); color: var(--text-2); }
  .livestate--veil .livestate__card > :last-child:not(.livestate__words) { width: min(560px, 80vw); justify-self: center; text-align: start; }
  @media (forced-colors: active) { .livestate, .livestate--veil { border: 2px solid CanvasText; forced-color-adjust: auto; } }
}

/* ── The release mark (release()): "Later · not in R1" is a solid ink pill with its clock; "R1" a quiet outline. ── */
@layer primitives {
  .release { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: 650 var(--t-cap)/1 var(--font-ui); white-space: nowrap; vertical-align: middle; }
  .release--later { background: var(--later-bg); color: var(--later-fg); box-shadow: none; }
  .release .i { --i: 13px; }
  .release--sm { height: 20px; padding: 0 6px; font-size: 11px; }
  @media (forced-colors: active) { .release { border: 1px solid CanvasText; } }
}


/* ── 05-forms.css ── */
/* Janus kit · forms: field, inputs, input group, check, switch, fieldset, option cards, segmented control,
   filter chips, toolbar, reason/ack/phrase gates, inline one-button forms.
   Checked/selected/invalid/disabled looks live in the states layer. */
@layer forms {
  /* ── Field ── */
  .field { display: grid; gap: var(--s2); min-width: 0; align-content: start; }
  .label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: var(--t-data); font-weight: 600; color: var(--text); }
  /* A label that is a sentence (typed-phrase gate) reads as one line, not spread to both edges. */
  .label:has(.phrase) { justify-content: flex-start; flex-wrap: wrap; gap: .35em; }
  .label .opt { font-weight: 400; color: var(--text-3); font-size: var(--t-small); }
  .hint { font-size: var(--t-small); color: var(--text-2); }
  .error { display: flex; gap: var(--s1); align-items: center; font-size: var(--t-small); font-weight: 500; color: var(--bad-fg); }
  .error > .i { --i: var(--icon-sm); }
  .field__error { display: none; gap: var(--s1); align-items: center; font-size: var(--t-small); font-weight: 500; color: var(--bad-fg); }
  .field--sm .label { font-size: var(--t-small); }
  .field--lg .label { font-size: var(--t-body); }

  /* ── Input, select, textarea ── */
  .input, .select, .textarea {
    --ch: var(--h-md);
    height: var(--ch); width: 100%; max-width: 100%; min-width: 0; padding: 0 var(--s3); border-radius: var(--r-control);
    border: 1px solid var(--line-2); background: var(--sheet); color: var(--text); font-size: var(--t-data);
    box-shadow: inset 0 1px 1px rgba(18, 32, 42, .03);
    transition: border-color var(--m-press), box-shadow var(--m-press);
  }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent); }
  /* The visible ring is the focus outline (2 px, 3:1); the soft halo stays as extra. */
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-radius: var(--r-control); outline: 2px solid var(--focus); outline-offset: 1px; }
  .textarea { height: auto; min-height: 96px; max-height: 40vh; padding: var(--s3); line-height: 1.5; resize: vertical; field-sizing: content; }
  .textarea--code, .input--mono { font-family: var(--font-mono); letter-spacing: -.01em; }
  .textarea--code { font-size: 13px; }
  .select {
    appearance: none; padding-right: var(--s8); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371838c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
  }
  .input--sm, .select--sm { --ch: var(--h-sm); font-size: var(--t-small); }
  .input--lg, .select--lg { --ch: var(--h-lg); font-size: var(--t-body); padding-inline: var(--s4); }
  /* Display size: a number or name that is the step's subject (wizard tiers and bays, a rule name). */
  .input--display { --ch: 56px; font: 500 var(--t-title)/1 var(--font-brand); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  /* Touch: small fields grow to the 44 px target; a group's field is the target, so the group adds its 1 px borders. */
  @media (pointer: coarse) { .input--sm, .select--sm { --ch: var(--h-md); } .inputgroup:not(.inputgroup--lg, .inputgroup--xl) { --ch: calc(var(--h-md) + 2px); } }
  .input--xl, .select--xl { --ch: var(--h-xl); font-size: 20px; padding-inline: var(--s4); border-radius: var(--r3); }
  .input--code { --ch: var(--h-xl); font: 600 24px/1 var(--font-mono); letter-spacing: .2em; text-align: center; border-radius: var(--r3); }
  .input--w-xs, .select--w-xs { width: 10ch; } .input--w-sm, .select--w-sm { width: min(12rem, 100%); }
  .input--w-md, .select--w-md { width: min(20rem, 100%); } .input--w-lg, .select--w-lg { width: min(32rem, 100%); }
  .select--w-auto { width: auto; max-width: 100%; }

  /* ── Input group: the search / scan field family (icon · input · unit · action) ── */
  .inputgroup {
    --ch: var(--h-md);
    display: flex; align-items: center; gap: var(--s2); height: var(--ch); min-width: 0; padding: 0 var(--s1) 0 var(--s3);
    border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--sheet); color: var(--text-2);
    box-shadow: inset 0 1px 1px rgba(18, 32, 42, .03); transition: border-color var(--m-press), box-shadow var(--m-press);
  }
  .inputgroup:hover { border-color: var(--line-strong); }
  .inputgroup:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent); }
  .inputgroup:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
  .inputgroup input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--t-data); }
  .inputgroup:not(:has(> .inputgroup__action)) { padding-right: var(--s3); }
  .inputgroup .input { height: 100%; border: 0; box-shadow: none; background: transparent; padding: 0; }
  .inputgroup__unit { color: var(--text-3); font-size: var(--t-small); white-space: nowrap; }
  .inputgroup__icon { color: var(--text-3); }
  .inputgroup__action { flex: none; }
  .inputgroup--sm { --ch: var(--h-sm); } .inputgroup--sm input { font-size: var(--t-small); }
  .inputgroup--lg { --ch: var(--h-lg); padding-left: var(--s4); } .inputgroup--lg input { font-size: var(--t-body); }
  .inputgroup--xl { --ch: var(--h-xl); padding-left: var(--s4); gap: var(--s3); border-radius: var(--r3); }
  .inputgroup--xl input { font-size: 20px; }
  .inputgroup--xl .inputgroup__icon { color: var(--accent-text); }
  .inputgroup--mono input { font-family: var(--font-mono); letter-spacing: -.01em; }

  /* ── Check (checkbox or radio with its words) ── */
  .check { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; font-size: var(--t-data); min-height: var(--target-min); }
  .check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
  .check__t { display: grid; gap: 2px; min-width: 0; }
  .check__hint { font-size: var(--t-small); color: var(--text-2); }
  @media (pointer: coarse) { .check input { width: 22px; height: 22px; margin-top: 0; } }

  /* ── Switch: the one switch recipe (40 × 24, accent when on) ── */
  .switch {
    position: relative; flex: none; width: 40px; height: 24px; margin: 0; appearance: none; cursor: pointer;
    border-radius: var(--pill); background: var(--ink-300); transition: background var(--m-state);
  }
  .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--m-state) var(--e-enter); }
  :root[data-theme="night"] .switch:not(:checked), .presence .switch:not(:checked) { background: rgba(169, 208, 223, .3); }
  .switchrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--h-md); cursor: pointer; }
  .switchrow__t { display: grid; gap: 2px; min-width: 0; font-size: var(--t-data); font-weight: 600; }
  .switchrow__t .hint { font-weight: 400; }

  /* ── Fieldset ── */
  .fieldset { display: grid; gap: var(--s2); min-width: 0; }
  .fieldset > legend { font-size: var(--t-data); font-weight: 600; margin-bottom: var(--s2); }
  .fieldset > legend + .hint { margin-top: calc(var(--s2) * -1); }

  /* ── Option cards: one choice group (radio or checkbox), selected ring from the states layer ── */
  .options { display: grid; gap: var(--s2); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
  @media (max-width: 560px) { .options { grid-template-columns: minmax(0, 1fr); } }
  .optcard {
    position: relative; display: grid; gap: var(--s1); align-content: start; padding: var(--s4);
    border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--sheet); cursor: pointer;
    transition: border-color var(--m-state), box-shadow var(--m-state), background var(--m-state);
  }
  .optcard:hover { border-color: var(--line-strong); }
  .optcard input[type="radio"], .optcard input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
  .optcard--sm { padding: var(--s3) var(--s4); }
  .optcard--lg { padding: var(--s5); }
  .optcard__main { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; }
  .optcard__body { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .optcard__t { font-size: var(--t-data); font-weight: 650; }
  .optcard--lg .optcard__t { font-size: var(--t-body); }
  .optcard__d { font-size: var(--t-small); color: var(--text-2); }
  .optcard__why { font-size: var(--t-small); color: var(--text-3); }
  .optcard__aside { flex: none; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--text-2); }
  .optcard__media { display: block; min-width: 0; }
  .optcard:is(.optcard--media-top, .optcard--media-start) > .optcard__media { order: -1; }
  @media (max-width: 560px) {
    .optcard--media-start { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s3); }
    .optcard--media-start > .optcard__media { grid-column: 1; grid-row: 1 / span 2; }
    .optcard--media-start > :not(.optcard__media, input) { grid-column: 2; }
  }
  .optcard__then { display: none; }
  .optcard:has(input:checked) .optcard__then { display: block; }
  /* Indicators: a drawn radio or check that follows the hidden input. */
  .optcard__ind { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--line-strong); background: var(--sheet); display: grid; place-items: center; transition: border-color var(--m-state), background var(--m-state); }
  .optcard__ind--radio { border-radius: 50%; }
  .optcard__ind--check { border-radius: var(--r1); }
  .optcard__ind::after { content: ''; opacity: 0; transition: opacity var(--m-state); }
  .optcard__ind--radio::after { width: 8px; height: 8px; border-radius: 50%; background: var(--sel-ring); }
  .optcard__ind--check::after { width: 5px; height: 9px; margin-top: -2px; border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg); }

  /* ── Segmented control: one track, one current chip (radio, nav, submit or toggle) ── */
  .seg { display: inline-flex; justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; border-radius: var(--r3); background: var(--sheet-sunk); border: 1px solid var(--line); vertical-align: middle; }
  .seg::-webkit-scrollbar { display: none; }
  .seg :is(button, a, label) {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); flex: none;
    height: var(--seg-h, 36px); padding: 0 var(--s3); border: 0; border-radius: var(--r2); background: transparent;
    color: var(--text-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--m-state), color var(--m-state), box-shadow var(--m-state);
  }
  .seg :is(button, a, label):hover { color: var(--text); }
  .seg label > input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
  .seg :is(button, a, label) { min-inline-size: var(--target-min); justify-content: center; }
  .seg label:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
  .seg--sm { --seg-h: 28px; }
  .seg--lg { --seg-h: var(--h-md); }
  .seg--lg :is(button, a, label) { font-size: var(--t-data); padding: 0 var(--s4); }
  .seg--block { display: flex; width: 100%; justify-self: stretch; }
  .seg--block :is(button, a, label) { flex: 1 1 auto; }
  @media (pointer: coarse) { .seg:not(.seg--lg) { --seg-h: var(--h-md); } }

  /* ── Filter chips: a GET form of pills; the URL holds the state ── */
  .chips, .filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
  .chips__label { font-size: var(--t-small); font-weight: 600; color: var(--text-2); margin-right: var(--s1); }
  .chips__trailing { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; min-width: 0; }
  .fchip {
    position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: var(--h-sm); padding: 0 var(--s3);
    border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--sheet); color: var(--text-2);
    font-size: var(--t-small); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background var(--m-state), color var(--m-state), border-color var(--m-state);
  }
  .fchip:hover { border-color: var(--line-strong); color: var(--text); text-decoration: none; }
  .fchip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
  .fchip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .fchip b { font-variant-numeric: tabular-nums; font-weight: 700; }
  .fchip .i { --i: var(--icon-sm); }
  @media (pointer: coarse) { .fchip { height: var(--h-md); } }

  .inputgroup--w-xs { max-width: 160px; } .inputgroup--w-sm { max-width: 240px; } .inputgroup--w-md { max-width: 360px; } .inputgroup--w-lg { max-width: 520px; }
  /* Option cards on one line (the tier picker): title · media · aside at 44 px. */
  .options--line .optcard { grid-template-columns: minmax(0, 1fr); padding: var(--s1) var(--s3); min-height: var(--h-md); align-content: center; }
  .options--line .optcard__main { align-items: center; }
  .options--line .optcard:has(> .optcard__media) { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); align-items: center; column-gap: var(--s3); }
  .options--line .optcard > .optcard__media { grid-row: 1; grid-column: 2; }
  .options--line .optcard__main .optcard__aside { margin-left: auto; }
  /* Suggestion chip and the show-more toggle. */
  .fchip--suggest { font: inherit; font-size: var(--t-small); cursor: pointer; }
  .toggle { position: relative; display: inline-flex; align-items: center; gap: var(--s1); height: var(--h-sm); padding: 0 var(--s3); border-radius: var(--r2); color: var(--text-2); font-size: var(--t-small); font-weight: 600; cursor: pointer; }
  .toggle:hover { background: var(--hover); color: var(--text); }
  .toggle:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .toggle__on, .toggle:has(:checked) .toggle__off { display: none; }
  .toggle:has(:checked) .toggle__on { display: inline; }
  @media (pointer: coarse) { .toggle { height: var(--h-md); } }

  /* ── Textarea counter · file drop ── */
  .textarea__count { margin: var(--s1) 0 0; font-size: var(--t-cap); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
  .filedrop { display: grid; justify-items: center; gap: var(--s2); padding: var(--s6); border: 1.5px dashed var(--line-2); border-radius: var(--r4); background: var(--sheet-2); color: var(--text-2); text-align: center; cursor: pointer; transition: border-color var(--m-state), background var(--m-state); }
  .filedrop > .i { color: var(--text-3); }
  .filedrop__t { font-weight: 650; color: var(--text); }
  .filedrop__hint { font-size: var(--t-small); }
  .filedrop:hover, .filedrop:focus-within { border-color: var(--accent); background: var(--sheet); }
  .filedrop:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .filedrop:has(input[type=file]:user-valid) { border-style: solid; border-color: var(--sel-ring, var(--accent)); background: var(--selected); }

  /* ── Setting rows: label column · control · hint ── */
  .setrows { display: grid; border-top: 1px solid var(--line-soft); }
  .setrow { display: grid; grid-template-columns: 200px minmax(0, 320px); gap: var(--s2) var(--s5); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); }
  .setrow--wide { grid-template-columns: 200px minmax(0, 1fr); }
  .setrow__k { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); min-width: 0; }
  .setrow__k .label { margin: 0; }
  .setrow__edited { font-size: var(--t-cap); font-weight: 650; color: var(--accent-text); }
  .setrow__v { display: grid; gap: var(--s1); min-width: 0; }
  .setrow__v > .hint { margin: 0; }
  @media (max-width: 700px) { .setrow, .setrow--wide { grid-template-columns: minmax(0, 1fr); } }

  /* ── Toggle group: short square toggles on a track (days of the week); checked wears the one selected chip. ── */
  .toggles { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 3px; border-radius: var(--r3); background: var(--sheet-sunk); border: 1px solid var(--line); }
  .toggles label { position: relative; display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 var(--s2); border-radius: var(--r2); color: var(--text-2); font-size: var(--t-small); font-weight: 600; cursor: pointer; transition: background var(--m-press), color var(--m-press), box-shadow var(--m-press); }
  .toggles label:hover { color: var(--text); }
  .toggles input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .toggles label:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
  .toggles label:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
  @media (pointer: coarse) { .toggles label { height: var(--h-md); } }

  /* ── Toolbar: filters, search, selects, and what the list is ── */
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
  .toolbar__search { flex: 1 1 260px; max-width: 420px; }
  .toolbar__trailing { margin-left: auto; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--text-2); }

  /* ── Filter bar (filterBar(), K1): search, one row of chips, More filters, the count. The chips never wrap: more
        than fit scroll sideways on their row. On a phone the chips and More filters fold behind one Filters button
        (.filterbar__lens is inline here and a popover there: 07-overlays.css). ── */
  .filterbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
  .filterbar__search { flex: 0 1 340px; min-width: 200px; }
  .filterbar__lens { display: flex; align-items: center; gap: var(--s2) var(--s3); min-width: 0; flex: 0 1 auto; }
  .filterbar__chips { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px 28px 3px 3px; margin: -3px -28px -3px -3px;
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .filterbar__chips > .fchip { flex: none; }
  .filterbar__more { flex: none; }
  .filterbar__open { display: none; }
  .filterbar__on { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px; border-radius: var(--pill); background: var(--accent); color: var(--accent-fg, #fff); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
  .filterbar__count { margin-left: auto; flex: none; font-size: var(--t-small); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .filterbar__trailing { flex: none; display: flex; align-items: center; gap: var(--s2); }
  .filterbar:not(:has(.filterbar__count)) .filterbar__trailing { margin-left: auto; }
  @media (max-width: 560px) {
    .filterbar { gap: var(--s2); }
    .filterbar__search { flex: 1 1 auto; min-width: 0; }
    .filterbar__open { display: inline-flex; flex: none; }
    .filterbar__more > .btn { display: none; }
  }
  /* compact (a master list's pane): the phone's form at every width. */
  .filterbar--compact { gap: var(--s2); }
  .filterbar--compact .filterbar__search { flex: 1 1 auto; min-width: 0; }
  .filterbar--compact .filterbar__open { display: inline-flex; flex: none; }
  .filterbar--compact .filterbar__more > .btn { display: none; }

  /* ── Reason, acknowledgement, typed phrase ── */
  .reason__count { font-size: var(--t-cap); color: var(--text-3); font-variant-numeric: tabular-nums; justify-self: end; }
  .ack { padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--sheet-sunk); border: 1px solid var(--line); }
  .phrase { display: inline-flex; align-items: center; padding: 2px var(--s2); border-radius: var(--r1); background: var(--warn-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn-line) 50%, transparent); color: var(--text); font: 600 var(--t-data) var(--font-mono); user-select: all; }

  /* ── A one-button POST that adds no box ── */
  .inline-form { display: contents; }

  @media (forced-colors: active) {
    .optcard, .fchip, .seg, .inputgroup, .input, .select, .textarea { border: 1px solid CanvasText; }
    .optcard__ind { border-color: CanvasText; }
    .optcard__ind::after { forced-color-adjust: none; background: Highlight; border-color: HighlightText; }
    .switch { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
    .switch::after { background: CanvasText; }
    .switch:checked { background: Highlight; }
  }
}

/* ── 06-blocks.css ── */
/* Janus kit · blocks and compositions: sheet, inset, list, table, spec, facts, meters, bar, timeline, steps, disclosure,
   versions, facets, then, status line, callout, notice, empty, skeleton, receipt, legend, action bar, changes, code,
   files, secret, QR, check list, crumbs, page tabs, tabs, side nav, nav list, pager; page head, workbench,
   master–detail, outcome, denied/lost, wizard step (KIT-SPEC §5.3, §5.5).
   Tone comes from data-tone (the tones layer sets --tone-*; each block sets idle defaults on itself so it never
   inherits a parent's tone). State comes from ARIA/native attributes or data-state. */
@layer blocks {
  /* ── Sheet: the white surface (r4, hairline, resting shadow) ── */
  .sheet {
    --tone-surface: var(--sheet); --tone-line: var(--line);
    background: var(--tone-surface); border: 1px solid var(--tone-line); border-radius: var(--r4); box-shadow: var(--shadow-1); min-width: 0;
  }
  .sheet[data-tone]:not([data-tone="idle"]) { border-color: color-mix(in oklab, var(--tone-line) 50%, transparent); }
  .sheet--pad-sm { padding: var(--s3) var(--s4); }
  .sheet--pad { padding: var(--s5); }
  .sheet--pad-lg { padding: var(--s6) var(--s8); }
  .sheet--flat { box-shadow: none; }
  .sheet--sunk { --tone-surface: var(--sheet-sunk); box-shadow: none; }
  .sheet--hero { border-radius: var(--r5); box-shadow: var(--shadow-2); }
  .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
  .sheet__title { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-data); font-weight: 650; }
  .sheet__meta { font-size: var(--t-small); color: var(--text-3); }
  .sheet__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }
  .sheet__body { padding: var(--s5); }
  .sheet__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap;
    padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--sheet-2);
    border-radius: 0 0 calc(var(--r4) - 1px) calc(var(--r4) - 1px);
  }
  @media (max-width: 560px) { .sheet--pad-lg { padding: var(--s5); } }

  /* ── Inset: the r3 panel inside a sheet or dialog ── */
  .inset { --tone-surface: var(--sheet-sunk); --tone-line: transparent; background: var(--tone-surface); box-shadow: inset 0 0 0 1px var(--tone-line); border-radius: var(--r3); padding: var(--s4); min-width: 0; }
  .inset[data-tone]:not([data-tone="idle"]) { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone-line) 45%, transparent); }
  .inset--pad-sm { padding: var(--s2) var(--s3); }
  .inset--pad-lg { padding: var(--s5); }

  /* ── Section (layout owns .section and its head; this is the level-3 title) ── */
  .section__title--3 { font-size: var(--t-lead); }

  /* ── List: every entity row family. One row recipe; the grid template (--cols) is the only per-page variation. ── */
  .list { --row-py: var(--s3); --row-px: 0px; container: list / inline-size; min-width: 0; }
  .list--sheet { --row-px: var(--s5); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r4); box-shadow: var(--shadow-1); }
  .list--compact { --row-py: var(--s2); }
  .list--roomy { --row-py: var(--s4); }
  .list__rows { margin: 0; padding: 0; list-style: none; }
  .list__row {
    --tone-surface: transparent; --tone-line: transparent;
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
    padding: var(--row-py) var(--row-px); border-bottom: 1px solid var(--line-soft); min-width: 0;
    background: var(--tone-surface); box-shadow: inset 3px 0 0 var(--tone-line);
  }
  .list__rows > :last-child { border-bottom: 0; }
  .list--plain .list__row { border-bottom: 0; }
  .list--sheet .list__rows > :first-child { border-top-left-radius: calc(var(--r4) - 1px); border-top-right-radius: calc(var(--r4) - 1px); }
  .list--sheet:not(:has(.list__foot)) .list__rows > :last-child { border-bottom-left-radius: calc(var(--r4) - 1px); border-bottom-right-radius: calc(var(--r4) - 1px); }
  .list__lead { flex: none; display: flex; align-items: center; min-width: 0; }
  .list__main { flex: 1 1 14rem; min-width: 0; }
  .list__title { font-size: var(--t-data); font-weight: 650; overflow-wrap: anywhere; }
  .list__sub { margin-top: 2px; font-size: var(--t-small); color: var(--text-2); }
  .list__meta { min-width: 0; font-size: var(--t-small); color: var(--text-2); }
  .list__aside { min-width: 0; }
  .list__actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
  .list__detail { flex: 1 0 100%; min-width: 0; }
  /* Rows rest at two lines (DESIGN.md › What shows when, rule 2): a sub of words clamps at 2 lines until the row is
     current or holds focus; its case (listRow detail) folds behind .list__more until the row is current or open. A sub
     that holds blocks is not a line of words and is not clamped (the density gate reads what it says). */
  .list__row:not([aria-current]) > .list__main > .list__sub:not(:has(div, p, ul, ol, dl, table, form, details)):not(:focus-within) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .list__more { flex: 1 0 100%; min-width: 0; margin: calc(var(--s1) * -1) 0 calc(var(--row-py) * -.5); }
  .list__more > summary { min-height: var(--target-min); padding-inline: 0; }
  .list__more > .disclosure__body { padding: 0 0 var(--s2) 0; }
  /* A lone link in a head's actions or a row's actions, aside or foot is a target: 24 px (44 on touch). */
  :is(.section__actions, .list__actions, .list__aside, .list__foot, .sheet__actions) > a:not(.btn, .iconbtn, .chip) { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); min-width: var(--target-min); }
  .list--cols .list__row { display: grid; grid-template-columns: var(--cols); }
  .list--cols :is(.list__detail, .list__more) { grid-column: 1 / -1; }
  .list--top .list__row { align-items: start; }
  /* Collapse: under 640 px of its own width (480 with stackBelow 'sm') a cols list becomes text + actions. */
  @container list (max-width: 640px) {
    .list--cols:not(.list--stack-sm) .list__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .list--cols:not(.list--stack-sm) .list__row:has(> .list__lead) { grid-template-columns: auto minmax(0, 1fr); }
    .list--cols:not(.list--stack-sm) .list__row:has(> .list__lead) > :not(.list__lead) { grid-column: 2; }
    .list--cols:not(.list--stack-sm) .list__row > :is(.list__detail, .list__more) { grid-column: 1 / -1; }
    /* Actions go to the end: their own column on the first line; title, meta and aside stack in the text column. */
    .list--cols:not(.list--stack-sm) .list__row:has(> .list__actions) { grid-template-columns: minmax(0, 1fr) auto; }
    .list--cols:not(.list--stack-sm) .list__row:has(> .list__lead):has(> .list__actions) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .list--cols:not(.list--stack-sm) .list__row:has(> .list__actions) > :not(.list__actions, .list__lead, .list__detail, .list__more) { grid-column: -3 / -2; }
    .list--cols:not(.list--stack-sm) .list__row:has(> .list__actions) > .list__actions { grid-column: -2 / -1; grid-row: 1; }
    /* leadStack: a wide lead (a rack glyph) goes above the text instead of squeezing it. */
    .list--cols:not(.list--stack-sm).list--lead-stack .list__row:has(> .list__lead) { grid-template-columns: minmax(0, 1fr); }
    .list--cols:not(.list--stack-sm).list--lead-stack .list__row:has(> .list__lead) > * { grid-column: 1; grid-row: auto; }
    .list--cols:not(.list--stack-sm).list--actions-below .list__row:has(> .list__actions) { grid-template-columns: minmax(0, 1fr); }
    .list--cols:not(.list--stack-sm).list--actions-below .list__row:has(> .list__lead):has(> .list__actions) { grid-template-columns: auto minmax(0, 1fr); }
    .list--cols:not(.list--stack-sm).list--actions-below .list__row:has(> .list__actions) > .list__actions { grid-column: -2 / -1; grid-row: auto; justify-content: flex-start; }
    .list--cols:not(.list--stack-sm).list--actions-below .list__row:has(> .list__actions) > :not(.list__actions, .list__lead, .list__detail, .list__more) { grid-column: -2 / -1; }
    /* leadStack + actionsBelow: everything in one column, lead on top, actions last. */
    .list--cols:not(.list--stack-sm).list--lead-stack.list--actions-below .list__row:has(> .list__lead):has(> .list__actions) { grid-template-columns: minmax(0, 1fr); }
    .list--cols:not(.list--stack-sm).list--lead-stack.list--actions-below .list__row:has(> .list__lead):has(> .list__actions) > * { grid-column: 1; grid-row: auto; }
    .list--lead-stack:not(.list--cols) .list__row > .list__lead { flex-basis: 100%; }
  }
  @container list (max-width: 480px) {
    .list--cols.list--stack-sm .list__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .list--cols.list--stack-sm .list__row:has(> .list__lead) { grid-template-columns: auto minmax(0, 1fr); }
    .list--cols.list--stack-sm .list__row:has(> .list__lead) > :not(.list__lead) { grid-column: 2; }
    .list--cols.list--stack-sm .list__row > :is(.list__detail, .list__more) { grid-column: 1 / -1; }
    /* Actions go to the end: their own column on the first line; title, meta and aside stack in the text column. */
    .list--cols.list--stack-sm .list__row:has(> .list__actions) { grid-template-columns: minmax(0, 1fr) auto; }
    .list--cols.list--stack-sm .list__row:has(> .list__lead):has(> .list__actions) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .list--cols.list--stack-sm .list__row:has(> .list__actions) > :not(.list__actions, .list__lead, .list__detail, .list__more) { grid-column: -3 / -2; }
    .list--cols.list--stack-sm .list__row:has(> .list__actions) > .list__actions { grid-column: -2 / -1; grid-row: 1; }
    /* leadStack: a wide lead (a rack glyph) goes above the text instead of squeezing it. */
    .list--cols.list--stack-sm.list--lead-stack .list__row:has(> .list__lead) { grid-template-columns: minmax(0, 1fr); }
    .list--cols.list--stack-sm.list--lead-stack .list__row:has(> .list__lead) > * { grid-column: 1; grid-row: auto; }
    .list--cols.list--stack-sm.list--actions-below .list__row:has(> .list__actions) { grid-template-columns: minmax(0, 1fr); }
    .list--cols.list--stack-sm.list--actions-below .list__row:has(> .list__lead):has(> .list__actions) { grid-template-columns: auto minmax(0, 1fr); }
    .list--cols.list--stack-sm.list--actions-below .list__row:has(> .list__actions) > .list__actions { grid-column: -2 / -1; grid-row: auto; justify-content: flex-start; }
    .list--cols.list--stack-sm.list--actions-below .list__row:has(> .list__actions) > :not(.list__actions, .list__lead, .list__detail, .list__more) { grid-column: -2 / -1; }
    /* leadStack + actionsBelow: everything in one column, lead on top, actions last. */
    .list--cols.list--stack-sm.list--lead-stack.list--actions-below .list__row:has(> .list__lead):has(> .list__actions) { grid-template-columns: minmax(0, 1fr); }
    .list--cols.list--stack-sm.list--lead-stack.list--actions-below .list__row:has(> .list__lead):has(> .list__actions) > * { grid-column: 1; grid-row: auto; }
  }
  /* Bullet list: sentences led by an 8 px tone square; icon list: rules led by an icon. One or two columns. */
  .bullets, .iconlist { --tone-dot: var(--idle-dot); display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--s2) var(--s6); margin: 0; padding: 0; list-style: none; font-size: var(--t-small); }
  .bullets > li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
  .bullets > li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--tone-dot); }
  .bullets--ruled { padding-block: var(--s3); border-block: 1px solid var(--line); }
  .iconlist > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s2); align-items: start; }
  .iconlist > li > .i { margin-top: 2px; color: var(--text-3); }
  .iconlist--muted { color: var(--text-2); }
  .iconlist--md { font-size: var(--t-body); row-gap: var(--s1); }
  .iconlist > li[data-tone] > .i { color: var(--tone-dot); }
  .leadline { max-width: 78ch; margin: 0; font-size: var(--t-small); color: var(--text-2); }
  .leadline > b { color: var(--text); font-weight: 650; }
  .callout--unknown { background: transparent; border-style: dashed; border-color: var(--dash-unknown-line, var(--line-strong)); color: var(--text-2); }
  /* Phones: one column, whatever --cols the list was given inline (an inline custom property would beat a rule setting --cols). */
  @media (max-width: 700px) { .bullets, .iconlist { grid-template-columns: minmax(0, 1fr); } }
  @media (pointer: coarse) { .steps :is(a, button) { min-height: var(--target-min); } }
  [data-scale="station"] .steps :is(a, button) { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); }
  /* Action row: a 72 px link or button row with a title, a wrapping sub line and a chevron. */
  .actionrow { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 72px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--sheet); color: var(--text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
  .actionrow:hover { background: var(--hover); text-decoration: none; }
  .actionrow__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r3); background: var(--accent-soft); color: var(--accent-text); }
  .actionrow__t { flex: 1; display: grid; gap: 2px; min-width: 0; }
  .actionrow__title { font-weight: 650; }
  .actionrow__sub { font-size: var(--t-small); color: var(--text-2); }
  .actionrow__chev { flex: none; color: var(--text-3); }
  /* Action tile: a glove-scale start tile (80 px, 88 px on the station scale): icon, a big title, a sub line, an aside chip. */
  .actiontile { display: flex; align-items: center; gap: var(--s3) var(--s5); width: 100%; min-height: calc(var(--h-xl) + 16px); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); box-shadow: var(--shadow-1); color: var(--text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
  .actiontile:hover { background: color-mix(in oklab, var(--sheet), var(--text) 5%); text-decoration: none; }
  .actiontile__icon { flex: none; display: grid; place-items: center; color: var(--text-2); }
  .actiontile__t { flex: 1; display: grid; gap: 2px; min-width: 0; }
  .actiontile__title { font-family: var(--font-brand); font-size: var(--t-step); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }
  .actiontile__sub { font-size: var(--t-lead); color: var(--text-2); }
  .actiontile__aside { flex: none; display: grid; justify-items: center; gap: var(--s1); font-size: var(--t-small); color: var(--text-2); }
  /* Focus card: the one thing to do now. An accent ring (or a tone's), the title, a big figure with its label and meta
     beside it, the action on the right; under 560 px of card the action drops under the words and fills the width. */
  .focuscard { --tone-line: var(--accent); container: focuscard / inline-size; min-width: 0; border: 2px solid var(--tone-line); border-radius: var(--r4); background: var(--sheet); box-shadow: var(--shadow-1); }
  .focuscard__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4) var(--s6); padding: var(--s5) var(--s6); }
  .focuscard__body { display: grid; gap: var(--s2); min-width: 0; }
  .focuscard__eyebrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); font-size: var(--t-small); color: var(--text-2); }
  .focuscard__title { margin: 0; font-family: var(--font-brand); font-size: var(--t-title); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
  .focuscard__lead { margin: 0; color: var(--text-2); }
  .focuscard__lead b { color: var(--text); }
  .focuscard__fig { min-width: 0; margin-top: var(--s2); }
  .focuscard__fig--num { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s5); }
  .focuscard__num { display: flex; align-items: baseline; gap: var(--s1); margin: 0; }
  .focuscard__v { font-size: clamp(48px, 9cqi, var(--t-num-xl)); font-weight: 400; letter-spacing: -.03em; line-height: .9; }
  .focuscard__unit { font-size: var(--t-section); font-weight: 500; color: var(--text-2); }
  .focuscard__side { flex: 1 1 240px; display: grid; gap: var(--s1); min-width: 0; }
  .focuscard__label { margin: 0; font-size: var(--t-lead); color: var(--text-2); }
  .focuscard__meta { min-width: 0; color: var(--text-2); }
  .focuscard__action { display: grid; }
  @container focuscard (max-width: 560px) { .focuscard__in { grid-template-columns: minmax(0, 1fr); padding: var(--s4) var(--s5); } }
  /* Context bar: "Viewing SR-02 · working rack stays SR-01 [Make working rack]" in a head's actions. */
  .ctxbar { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-md); max-width: 100%; padding: 3px 3px 3px var(--s3); border-radius: var(--r2); background: var(--sheet-sunk); border: 1px solid var(--line); font-size: var(--t-small); color: var(--text-2); }
  .ctxbar > .i { flex: none; color: var(--text-3); }
  .ctxbar__t { min-width: 0; }
  .ctxbar__t b, .ctxbar__t strong { color: var(--text); font-weight: 650; }
  .ctxbar__action { flex: none; margin-left: auto; }
  .ctxbar:not(:has(.ctxbar__action)) { padding-right: var(--s3); }
  /* A tone (data-tone, via the tones layer) tints the row and draws a 3 px edge; the row's words say the state. */
  .list:not(.list--sheet) .list__row[aria-current] { padding-inline: var(--s3); }
  .list__row[aria-current="true"], .list__row[aria-current="page"] { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); }
  .list__row:is([data-state="archived"], [data-state="idle"]) { color: var(--text-2); }
  .list__row:is([data-state="archived"], [data-state="idle"]) .list__title { font-weight: 500; color: var(--text-2); }
  .list__row[data-state="done"] .list__title { color: var(--text-2); }
  .list__row--skel .list__main { display: grid; gap: var(--s2); flex-basis: 8rem; }
  .list__row--skel .list__main .skel { width: var(--skel-w); }
  .list__group {
    --tone-dot: var(--idle-dot);
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
    padding: var(--s3) var(--row-px); background: var(--sheet-2); border-bottom: 1px solid var(--line);
  }
  .list:not(.list--sheet) .list__group { background: none; padding-block: var(--s4) var(--s2); }
  .list__group-title { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-cap); font-weight: 700; color: var(--text-2); letter-spacing: .01em; }
  .list__group[data-tone] .list__group-title::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--tone-dot); }
  .list__count { color: var(--text-3); font-variant-numeric: tabular-nums; }
  .list__group-meta { font-size: var(--t-cap); color: var(--text-3); }
  .list__foot { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s3) var(--row-px); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--text-2); }
  .list--sheet .list__foot { background: var(--sheet-2); border-radius: 0 0 calc(var(--r4) - 1px) calc(var(--r4) - 1px); }

  /* Whole-row links: the title link covers the row; other controls stay on top (middle-click and new tab keep working). */
  .rowlink { position: relative; }
  .rowlink .rowlink__a { color: inherit; text-decoration: none; }
  .rowlink .rowlink__a::after { content: ''; position: absolute; inset: 0; }
  .rowlink :is(a, button, input, select, textarea, label, summary, [tabindex]):not(.rowlink__a) { position: relative; z-index: 1; }
  .rowlink:hover { background: var(--hover); }
  .rowlink:hover .rowlink__a { text-decoration: underline; text-underline-offset: 3px; }
  .rowlink .rowlink__a:focus-visible { outline: none; }
  .rowlink:has(.rowlink__a:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }

  /* ── Table ── */
  /* position: relative keeps absolutely positioned descendants (.sr words) inside the scroller, not the page. */
  .table-wrap { position: relative; container: table / inline-size; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); box-shadow: var(--shadow-1); }
  .table-wrap--flat, :is(.sheet, .inset, dialog, .receipt) .table-wrap { box-shadow: none; }
  .table-wrap--sticky { max-block-size: min(72vh, 760px); overflow: auto; }
  .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-data); font-variant-numeric: tabular-nums; }
  .table__caption { caption-side: top; text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); font-size: var(--t-data); font-weight: 650; }
  .table th { text-align: left; font-size: var(--t-cap); font-weight: 600; color: var(--text-3); padding: var(--s3) var(--s4); background: var(--sheet-2); border-bottom: 1px solid var(--line); white-space: nowrap; width: var(--w, auto); }
  .table thead th { position: sticky; top: 0; z-index: 1; }
  .table td, .table tbody th[scope="row"] { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  .table tbody th[scope="row"] { background: none; font-size: var(--t-data); font-weight: 600; color: var(--text); white-space: normal; }
  .table :is(th, td).r { text-align: right; }
  .table :is(th, td).c { text-align: center; }
  .table tbody tr:last-child > :is(td, th) { border-bottom: 0; }
  .table tfoot :is(td, th) { border-top: 1px solid var(--line); border-bottom: 0; background: var(--sheet-2); font-size: var(--t-data); font-weight: 600; color: var(--text); padding: var(--s3) var(--s4); }
  .table tbody tr { transition: background var(--m-press); }
  .table tbody tr:hover { background: var(--hover); }
  .table tbody tr:is([aria-selected="true"], [aria-current]) { background: var(--selected); }
  .table tbody tr:target { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); }
  .table tbody tr[aria-current]:not([aria-current="false"]) { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); }
  /* A row picked by its checkbox wears the selected wash; done and archived rows go quiet (their words still say so). */
  .table tbody tr:has(> td > label > input[type="checkbox"]:checked, > td > input[type="checkbox"]:checked) { background: var(--selected); }
  .table tbody tr:is([data-state="done"], [data-state="archived"]) > td { color: var(--text-3); }
  /* Row links on every cell (table({ rowLinks })): app.js forwards a click on the row to its .rowlink__a. */
  [data-rowclick] tr.rowlink { cursor: pointer; }
  /* stickyHead 'page': on wide screens the head sticks under the top bar while the page scrolls. */
  @media (min-width: 1101px) { .table-wrap--page-head { overflow: clip; } .table-wrap--page-head thead th { top: var(--top-h); z-index: 2; } }
  .table tbody tr[data-tone]:not([data-tone="idle"]) { background: color-mix(in oklab, var(--tone-surface) 70%, transparent); }
  .table td[data-tone]:not([data-tone="idle"]) { background: var(--tone-surface); }
  .table .sub { display: block; margin-top: 1px; font-size: var(--t-small); color: var(--text-3); }
  .table .mono { white-space: nowrap; }
  .table--compact :is(td, tbody th[scope="row"]) { padding-block: var(--s2); }
  .table--dense { font-size: var(--t-small); }
  .table--dense :is(th, td) { padding: var(--s2) var(--s3); }
  .table__group { --tone-dot: var(--idle-dot); }
  .table .table__group > th { position: static; padding: var(--s2) var(--s4); background: var(--sheet-2); border-bottom: 1px solid var(--line); color: var(--text-2); font-size: var(--t-cap); font-weight: 700; text-align: left; white-space: normal; }
  .table__group[data-tone] > th::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--s2); background: var(--tone-dot); vertical-align: 0; }
  .table tbody tr.table__group:hover { background: none; }
  .table__group-meta { margin-left: var(--s2); font-weight: 500; color: var(--text-3); }
  .table .table__group > td { padding: var(--s2) var(--s4); background: var(--sheet-2); border-bottom: 1px solid var(--line); color: var(--text-2); font-size: var(--t-cap); font-weight: 650; }
  /* Sticky foot: totals stay in view at the bottom of the height-limited region. */
  .table--sticky-foot tfoot :is(td, th) { position: sticky; bottom: 0; z-index: 1; }
  .table--sticky-first :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--sheet); box-shadow: inset -1px 0 0 var(--line-soft); }
  .table--sticky-first thead th:first-child { z-index: 2; background: var(--sheet-2); }
  /* The sticky cell is opaque: the row's wash is layered over the sheet. */
  .table--sticky-first tbody tr:hover > :first-child { background: linear-gradient(var(--hover), var(--hover)), var(--sheet); }
  .table--sticky-first tbody tr[data-tone]:not([data-tone="idle"]) > :first-child { background: linear-gradient(color-mix(in oklab, var(--tone-surface) 70%, transparent), color-mix(in oklab, var(--tone-surface) 70%, transparent)), var(--sheet); }
  .table--sticky-first tbody tr:is([aria-selected="true"], [aria-current], :target) > :first-child { background: linear-gradient(var(--selected), var(--selected)), var(--sheet); }
  .sortbtn { all: unset; display: inline-flex; align-items: center; gap: 4px; min-height: var(--target-min); min-width: var(--target-min); border-radius: var(--r1); cursor: pointer; }
  .sortbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .sortbtn::after { content: '↕' / ''; font-size: 11px; opacity: .55; }
  .table th[aria-sort="ascending"], .table th[aria-sort="descending"] { color: var(--text); }
  th[aria-sort="ascending"] .sortbtn::after { content: '↑' / ''; opacity: 1; color: var(--accent-text); }
  th[aria-sort="descending"] .sortbtn::after { content: '↓' / ''; opacity: 1; color: var(--accent-text); }
  .table__skel td { padding-block: var(--s3); }
  .table__skel .skel { width: var(--skel-w); }
  /* Below 900 px wide tables scroll sideways inside their region (a stack table becomes cards instead). */
  @media (max-width: 900px) { .table-wrap > .table:not(.table--stack) { min-width: 720px; } }
  @container table (max-width: 640px) {
    .table--stack, .table--stack tbody, .table--stack caption { display: block; width: 100%; }
    .table--stack thead { display: none; }
    .table--stack tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); padding: var(--s4); border-bottom: 1px solid var(--line); }
    .table--stack tbody tr:last-child { border-bottom: 0; }
    .table--stack tbody :is(td, th) { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; position: static; box-shadow: none; }
    .table--stack tbody tr > :first-child { grid-column: 1 / -1; font-weight: 650; }
    .table--stack td[data-wide] { grid-column: 1 / -1; }
    .table--stack td:empty { display: none; }
    .table--stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--t-cap); font-weight: 500; color: var(--text-3); }
    .table--stack tbody tr.table__group { display: block; padding: 0; }
    .table--stack tbody tr.table__group > th { display: block; padding: var(--s2) var(--s4); font-weight: 700; }
    .table--stack.table--sticky-first :is(th, td):first-child { box-shadow: none; background: none; }
    /* Column roles: the status sits beside the first cell; meta cells drop their label. */
    .table--stack tbody td[data-col="status"] { grid-column: 2; grid-row: 1; text-align: end; }
    .table--stack tbody tr:has(> td[data-col="status"]) > :first-child { grid-column: 1; }
    .table--stack td[data-col="meta"]::before { content: none; }
  }
  @media (max-width: 900px) { .table-wrap > .table.table--stack { min-width: 0; } }

  /* ── Spec: dt/dd. cols = max-content + 1fr; rows = ruled rows with values at the end ── */
  .spec { display: grid; grid-template-columns: var(--key, max-content) minmax(0, 1fr); gap: var(--s2) var(--s6); margin: 0; font-size: var(--t-data); }
  .spec > div { display: contents; }
  .spec dt { color: var(--text-3); }
  .spec dd { --tone-fg: var(--text); margin: 0; min-width: 0; color: var(--tone-fg); font-weight: 500; overflow-wrap: anywhere; }
  .spec dd[data-tone]:not([data-tone="idle"]) { font-weight: 600; }
  .spec--sm { font-size: var(--t-small); gap: var(--s1) var(--s4); }
  .spec--end dd { text-align: end; }
  .spec--rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spec--rows > div { display: grid; grid-template-columns: var(--key, minmax(0, max-content)) minmax(0, 1fr); gap: var(--s4); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); }
  .spec--rows > div:last-child { border-bottom: 0; }
  .spec--rows:not(.spec--start) dd { text-align: end; }
  @media (max-width: 560px) {
    .spec:not(.spec--rows) { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .spec:not(.spec--rows) dd { margin-bottom: var(--s2); text-align: start; }
  }

  /* ── Facts: label over value, in a grid ── */
  .facts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--s4) var(--s5); margin: 0; }
  .facts__i { display: grid; gap: 2px; align-content: start; min-width: 0; }
  .facts__k { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-small); color: var(--text-3); }
  .facts__v { --tone-fg: var(--text); margin: 0; color: var(--tone-fg); font-size: var(--t-data); font-weight: 600; overflow-wrap: anywhere; }
  .facts__sub { display: block; font-size: var(--t-small); font-weight: 400; color: var(--text-3); }
  .facts--sm .facts__k { font-size: var(--t-cap); }
  .facts--sm .facts__v { font-size: var(--t-small); }
  .facts--lg .facts__v { font-size: var(--t-lead); }
  @media (max-width: 700px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 380px) { .facts { grid-template-columns: minmax(0, 1fr); } }

  /* ── Meters: the ruled strip of stats with provenance (the only metric pattern) ── */
  .meters { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-block: 1px solid var(--line); }
  .meter { display: grid; gap: var(--s2); align-content: start; min-width: 0; padding: var(--s5) var(--s5) var(--s5) 0; }
  .meter + .meter { padding-left: var(--s5); border-left: 1px solid var(--line); }
  .meters--sm .meter, .meters--md .meter { padding-block: var(--s3); }
  @media (max-width: 1180px) {
    .meters { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); }
    .meters .meter:nth-child(odd) { padding-left: 0; border-left: 0; }
    .meters .meter:nth-child(n+3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 560px) {
    .meters { grid-template-columns: minmax(0, 1fr); }
    .meters .meter { padding-left: 0; border-left: 0; }
    .meters .meter + .meter { border-top: 1px solid var(--line); }
  }

  /* ── Bar: one bar/track recipe (fill, segments, placed ranges, ticks) ── */
  .bar { --bar-h: var(--bar-md); position: relative; display: block; width: var(--bar-w, auto); height: var(--bar-h); border-radius: min(calc(var(--bar-h) / 2), 4px); background: var(--line-soft); }
  .bar--xs { --bar-h: var(--bar-xs); } .bar--sm { --bar-h: var(--bar-sm); } .bar--md { --bar-h: var(--bar-md); }
  .bar--lg { --bar-h: var(--bar-lg); } .bar--xl { --bar-h: var(--bar-xl); }
  .bar__track { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: inherit; }
  .bar--segs:not(.bar--placed) .bar__track { gap: 2px; }
  .bar--segs { background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line); }
  .bar__fill { --tone-fill: var(--accent); flex: none; display: block; width: calc(var(--pct, 0) * 1%); height: 100%; background: var(--tone-fill); }
  .bar__seg { --tone-fill: var(--accent); display: block; flex: var(--q) 0 0; min-width: 2px; height: 100%; background: var(--tone-fill); }
  .bar__rest { display: block; flex: var(--q) 0 0; }
  .bar--placed .bar__seg { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: calc(var(--q) * 1%); }
  .bar__seg[data-kind="unknown"] { background: var(--dash-unknown); box-shadow: inset 0 0 0 1px var(--line-2); }
  .bar__seg[data-kind="diff"] { background: var(--dash-diff); box-shadow: inset 0 0 0 1px var(--dash-diff-line); }
  .bar__seg[data-kind="draft"] { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--tone-fill) 40%, transparent) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone-fill) 55%, transparent); }
  .bar__seg[data-kind="outline"] { background: transparent; box-shadow: inset 0 0 0 2px var(--tone-fill); }
  .bar__seg[data-kind="short"] { background: transparent; box-shadow: inset 0 0 0 1px var(--bad-dot); }
  .bar__mark { --tone-dot: var(--text); position: absolute; top: -3px; bottom: -3px; left: calc(var(--at) * 1%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tone-dot); }
  .barwrap { display: grid; gap: var(--s1); width: var(--bar-w, auto); min-width: 0; }
  .barwrap > .bar { width: auto; }
  .bar__scale { position: relative; height: 16px; font-size: var(--t-cap); color: var(--text-2); }
  .bar__scale > span { position: absolute; left: calc(var(--at) * 1%); transform: translateX(-50%); white-space: nowrap; }

  /* ── Timeline: mono time, a pip on a 1 px line, the body ── */
  .timeline { display: grid; margin: 0; padding: 0; list-style: none; }
  .tl { --tone-dot: var(--idle-dot); position: relative; display: grid; grid-template-columns: 64px 18px minmax(0, 1fr) auto; column-gap: var(--s3); padding-bottom: var(--s4); }
  .tl__t { padding-top: 2px; text-align: right; font-family: var(--font-mono); font-size: var(--t-cap); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tl__dot { position: relative; display: flex; justify-content: center; }
  .tl__dot::before { content: ''; z-index: 1; width: 10px; height: 10px; margin-top: 5px; border-radius: 3px; background: var(--tone-dot); box-shadow: 0 0 0 3px var(--sheet); }
  .tl__dot--round::before { border-radius: 50%; }
  .tl__dot--ring::before { border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--tone-dot), 0 0 0 3px var(--sheet); }
  .tl__dot::after { content: ''; position: absolute; top: 16px; bottom: calc(var(--s4) * -1); width: 1px; background: var(--line-2); }
  .tl:last-child .tl__dot::after, .tl:has(+ .tl-group) .tl__dot::after { display: none; }
  .tl__b { min-width: 0; font-size: var(--t-data); }
  .tl__sub { font-size: var(--t-small); color: var(--text-3); }
  .tl__who { margin-top: var(--s1); }
  .tl__action { display: flex; align-items: flex-start; gap: var(--s2); }
  .tl[aria-current] .tl__title { font-weight: 650; }
  .tl[aria-current] .tl__dot::before { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--accent); }
  .tl[data-state="archived"] .tl__title { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
  .timeline--compact .tl { padding-bottom: var(--s2); }
  .timeline--compact .tl__dot::after { bottom: calc(var(--s2) * -1); }
  .timeline--ledger .tl { grid-template-columns: 7ch 18px minmax(0, 1fr) auto; padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); }
  .timeline--ledger .tl:last-child { border-bottom: 0; }
  .timeline--ledger .tl__t { padding-top: 3px; text-align: left; }
  .timeline--ledger .tl__dot::after { display: none; }
  .tl-group { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0 var(--s2); }
  .tl-group__t { font-size: var(--t-small); font-weight: 650; color: var(--text-2); }
  .tl-group__meta { font-size: var(--t-cap); color: var(--text-3); }
  .timeline--sticky .tl-group { position: sticky; top: var(--top-h); z-index: 2; background: var(--bg); }
  :is(.sheet, dialog) .timeline--sticky .tl-group { top: 0; background: var(--sheet); }
  @media (max-width: 560px) {
    .tl { grid-template-columns: 48px 18px minmax(0, 1fr); }
    .tl__action { grid-column: 3; padding-top: var(--s2); }
  }

  /* ── Steps: one stepper (horizontal bars, or a vertical path) ── */
  .steps { container: steps / inline-size; display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
  .step { --sc: var(--line-2); position: relative; flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); align-content: start; min-width: 0; padding-top: var(--s4); font-size: var(--t-small); color: var(--text-3); }
  .step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--sc); }
  .step__text { display: grid; gap: 2px; min-width: 0; }
  .step__label { font-size: var(--t-data); font-weight: 600; color: var(--text-2); }
  .step__label a { color: inherit; }
  .step__sub { font-size: var(--t-small); color: var(--text-3); }
  .step[data-state="done"] { --sc: var(--ok-dot); }
  .step:is([data-state="done"], [aria-current]) .step__label { color: var(--text); }
  .step[aria-current] { --sc: var(--accent); }
  .step[data-state="warn"] { --sc: var(--warn-dot); }
  .step[data-state="warn"] .step__label { color: var(--warn-fg); }
  .step[data-state="skip"] { --sc: var(--line-soft); }
  .step[data-state="skip"] .step__label { color: var(--text-3); font-weight: 500; }
  .step__mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--r2); background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--text-2); font: 600 12px/1 var(--font-brand); font-variant-numeric: tabular-nums; }
  .step[data-state="done"] .step__mark { background: var(--ok-dot); box-shadow: none; color: var(--accent-fg); }
  .step[aria-current] .step__mark { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-text); }
  .step[data-state="warn"] .step__mark { background: var(--warn-dot); box-shadow: none; color: var(--ink-950); }
  .step[data-state="skip"] .step__mark { background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); }
  .steps--num:not(.steps--v) .step { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); align-items: start; }
  .steps--compact .step { padding-top: var(--s2); }
  .steps--compact .step__label { font-size: var(--t-small); }
  .steps--compact .step__sub { display: none; }
  .steps--v { flex-direction: column; gap: 0; }
  .steps--v .step { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s3); padding: 0 0 var(--s5); }
  .steps--v .step::before { top: 32px; bottom: 4px; left: 13px; right: auto; width: 2px; height: auto; background: var(--line-2); }
  .steps--v .step[data-state="done"]::before { background: var(--ok-dot); }
  .steps--v .step:last-child { padding-bottom: 0; }
  .steps--v .step:last-child::before { display: none; }
  .steps--v .step__mark { width: 28px; height: 28px; }
  .steps--v:not(.steps--num) .step__mark { width: 12px; height: 12px; margin: 8px; border-radius: 3px; }
  .steps--v:not(.steps--num) .step::before { top: 24px; bottom: -8px; }
  .steps--v:not(.steps--num) .step[data-state="done"] .step__mark { background: var(--ok-dot); }
  .steps--v .step__text { padding-top: 4px; }
  /* collapse 'h': the vertical rules above 560 px; one scrolling row (current in view) at and below. */
  @media (min-width: 561px) {
    .steps.steps--v-h { flex-direction: column; gap: 0; }
    .steps.steps--v-h .step { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s3); padding: 0 0 var(--s5); }
    .steps.steps--v-h .step::before { top: 32px; bottom: 4px; left: 13px; right: auto; width: 2px; height: auto; background: var(--line-2); }
    .steps.steps--v-h .step[data-state="done"]::before { background: var(--ok-dot); }
    .steps.steps--v-h .step:last-child { padding-bottom: 0; }
    .steps.steps--v-h .step:last-child::before { display: none; }
    .steps.steps--v-h .step__mark { width: 28px; height: 28px; }
    .steps.steps--v-h:not(.steps--num) .step__mark { width: 12px; height: 12px; margin: 8px; border-radius: 3px; }
    .steps.steps--v-h:not(.steps--num) .step::before { top: 24px; bottom: -8px; }
    .steps.steps--v-h:not(.steps--num) .step[data-state="done"] .step__mark { background: var(--ok-dot); }
    .steps.steps--v-h .step__text { padding-top: 4px; }
  }
  @media (max-width: 560px) {
    .steps--v-h { overflow-x: auto; scrollbar-width: none; }
    .steps--v-h .step { flex: 0 0 auto; min-width: 5rem; }
    .steps--v-h .step:not([aria-current]) .step__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .steps--v-h .step[aria-current] { min-width: 10rem; }
  }
  /* Phones: the bars stay, only the current step keeps its words (the others stay in the accessibility tree). */
  @container steps (max-width: 520px) {
    .steps:not(.steps--v, .steps--v-h, .steps--keep) .step:not([aria-current]) .step__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .steps:not(.steps--v, .steps--v-h, .steps--keep) .step[aria-current] { flex-grow: 4; }
    .steps--num:not(.steps--v, .steps--v-h, .steps--keep) .step:not([aria-current]) { grid-template-columns: auto; }
  }

  /* ── Disclosure: native details, one chevron ── */
  .disclosure { border-top: 1px solid var(--line); }
  .disclosure--flush { border-top: 0; }
  .disclosure > summary {
    display: flex; align-items: center; gap: var(--s3); min-height: var(--h-md); padding: 0 var(--s1); border-radius: var(--r2);
    list-style: none; cursor: pointer; font-size: var(--t-data); font-weight: 600;
  }
  .disclosure > summary::-webkit-details-marker { display: none; }
  .disclosure > summary::before, .versions > summary::before {
    content: ''; flex: none; width: 7px; height: 7px; margin: 0 var(--s1);
    border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
    transform: rotate(-45deg); transition: transform var(--m-state) var(--e-standard);
  }
  .disclosure[open] > summary::before, .versions[open] > summary::before { transform: rotate(45deg); }
  .disclosure > summary:hover { background: var(--hover); }
  .disclosure__t { flex: 1 1 auto; min-width: 0; }
  .disclosure__aside { display: flex; align-items: center; gap: var(--s2); margin-left: auto; font-size: var(--t-small); font-weight: 500; color: var(--text-2); }
  .disclosure__body { padding: var(--s2) var(--s1) var(--s4) var(--s8); }
  .disclosure--l2 > summary { font-size: var(--t-section); font-weight: 650; }
  .disclosure--compact > summary { min-height: var(--h-sm); font-size: var(--t-small); color: var(--text-2); }
  .disclosure--compact > summary:hover { color: var(--text); }
  .disclosure--compact > .disclosure__body { padding: var(--s1) var(--s1) var(--s3) var(--s6); }
  .disclosure--sheet { border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); box-shadow: var(--shadow-1); }
  .disclosure--sheet > summary { min-height: 52px; padding: var(--s3) var(--s5); border-radius: calc(var(--r4) - 1px); }
  .disclosure--sheet[open] > summary { border-bottom: 1px solid var(--line); border-radius: calc(var(--r4) - 1px) calc(var(--r4) - 1px) 0 0; }
  .disclosure--sheet > .disclosure__body { padding: var(--s4) var(--s5) var(--s5); }
  .disclosure--button { border-top: 0; }
  .disclosure--button > summary { display: inline-flex; min-height: var(--h-sm); padding: 0 var(--s3); font-size: var(--t-small); color: var(--text-2); }
  .disclosure--button > summary:hover { color: var(--text); }
  .disclosure--button > .disclosure__body { padding: var(--s3) 0 0; }

  /* Done collapses (rule 3): a finished section is its title and one receipt line that opens it. */
  .section--done > .section__head { margin-bottom: var(--s1); }
  .section__done { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); font-weight: 500; }
  .section__done::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ok-dot); }
  /* A stepper's finished steps as one done step (steps({ done })); they open under it with their own numbers. */
  .step--fold .disclosure > summary { min-height: var(--target-min); padding: 0; font-size: inherit; }
  .step--fold .disclosure__body { padding: var(--s2) 0 0; }
  .steps__done { display: grid; gap: var(--s2); }
  .steps__done > .step { padding: 0; }
  .steps__done > .step::before { display: none; }
  /* A hint (hint(), rung 2): a teaching line, folded or open by Settings › Hints. */
  .hint > summary { color: var(--text-2); }

  /* ── Versions: who changed it, and a way back ── */
  .versions { border-top: 1px solid var(--line); }
  .versions > summary { display: flex; align-items: center; gap: var(--s3); min-height: var(--h-md); list-style: none; cursor: pointer; font-size: var(--t-small); font-weight: 600; }
  .versions > summary::-webkit-details-marker { display: none; }
  .versions__meta { margin-left: auto; font-weight: 400; color: var(--text-2); }
  .versions__list { margin: 0; padding: 0; list-style: none; }
  .versions__row { display: grid; grid-template-columns: 5ch minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
  .versions__row .mono, .versions__v { font-weight: 650; }
  .versions__what { display: grid; min-width: 0; }
  .versions__by { color: var(--text-2); }
  .versions__acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
  .versions__acts > a { display: inline-flex; align-items: center; min-height: var(--target-min); }
  .versions__inuse { font-size: var(--t-cap); font-weight: 650; color: var(--text-2); }
  .versions__changes { grid-column: 2 / -1; }

  /* ── Lines: facets, then, status line ── */
  .facets { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0; font-size: var(--t-small); color: var(--text-2); }
  .facets > span { min-width: 0; }
  .facets > span:not(:last-child)::after { content: '·' / ''; margin-left: var(--s2); color: var(--text-3); }
  .then { margin: var(--s2) 0 0; padding: var(--s2) 0 0 var(--s3); border-left: 2px solid var(--line-2); font-size: var(--t-small); color: var(--text-2); }
  .then b { color: var(--text); font-weight: 650; }
  .statusline { --tone-dot: var(--idle-dot); display: flex; align-items: baseline; gap: var(--s2); max-width: 68ch; margin: 0; color: var(--text); font-weight: 500; }
  .statusline::before { content: ''; flex: none; width: .62em; height: .62em; border-radius: 2px; background: var(--tone-dot); transform: translateY(.02em); }
  .statusline b { font-weight: 700; }
  .statusline__t { min-width: 0; }
  .statusline:empty { display: none; }

  /* ── Callout: an inline question or note with its actions ── */
  .callout {
    --tone-surface: var(--idle-surface); --tone-line: var(--line-2); --tone-fg: var(--text-2);
    display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r3);
    background: var(--tone-surface); border: 1px solid var(--tone-line); color: var(--text); font-size: var(--t-data);
  }
  .callout[data-tone]:not([data-tone="idle"]) { border-color: color-mix(in oklab, var(--tone-line) 45%, transparent); }
  .callout--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
  .callout__icon { flex: none; display: flex; color: var(--tone-fg); }
  .callout__body { display: grid; gap: var(--s1); min-width: 0; }
  .callout--row > .callout__body { flex: 1 1 260px; }
  .callout__title { font-weight: 650; }
  .callout__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

  /* ── Notice: a tinted surface, an icon, a 650 title, a body ── */
  .notice {
    --tone-surface: var(--idle-surface); --tone-line: var(--line-2); --tone-fg: var(--text);
    display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r3);
    background: var(--tone-surface); border: 1px solid var(--tone-line); color: var(--tone-fg); font-size: var(--t-data);
  }
  .notice[data-tone]:not([data-tone="idle"]) { border-color: color-mix(in oklab, var(--tone-line) 50%, transparent); }
  .notice > .i { margin-top: 2px; }
  .notice__body { flex: 1; display: grid; gap: var(--s1); min-width: 0; }
  .notice__title { font-weight: 650; }
  .notice p { color: inherit; }
  .notice__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
  .notice__trailing { flex: none; display: flex; flex-wrap: wrap; align-self: center; gap: var(--s2); }
  /* Phones: trailing actions drop under the words (aligned with them) instead of squeezing them. */
  @media (max-width: 560px) {
    .notice:has(> .notice__trailing) { flex-wrap: wrap; }
    .notice > .notice__trailing { flex-basis: 100%; }
    .notice:has(> .notice__icon) > .notice__trailing { padding-inline-start: calc(var(--icon-md) + var(--s3)); }
  }
  .notice--sm { gap: var(--s2); padding: var(--s2) var(--s3); font-size: var(--t-small); }
  .notice--lg { gap: var(--s4); padding: var(--s5); }
  .notice--lg .notice__title { font-family: var(--font-brand); font-size: var(--t-title); font-weight: 450; letter-spacing: -.015em; line-height: 1.15; }

  /* ── Empty ── */
  .empty { display: grid; justify-items: center; gap: var(--s3); padding: var(--s10) var(--s6); text-align: center; color: var(--text-2); }
  .empty__icon { display: flex; color: var(--ink-400); }
  .empty__title { font-size: var(--t-section); font-weight: 650; color: var(--text); }
  .empty__body { max-width: 52ch; margin: 0; }
  .empty__actions { display: flex; justify-content: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
  .empty--sm { padding: var(--s6) var(--s4); }
  .empty--sm .empty__title { font-size: var(--t-data); }
  .empty--lg { padding: var(--s16) var(--s8); }
  .empty--inline { display: flex; align-items: center; justify-items: start; gap: var(--s2); padding: var(--s3) 0; text-align: left; font-size: var(--t-small); }
  .empty--inline .empty__title { font-size: inherit; font-weight: 500; color: var(--text-2); }
  .empty--inline > .i { flex: none; color: var(--ink-400); }

  /* ── Skeleton: a shimmer; stops when motion is reduced or paused ── */
  .skeleton { display: grid; gap: var(--s3); }
  .skeleton__bars { display: grid; gap: var(--s2); }
  .skel {
    display: block; width: var(--skel-w, 100%); height: var(--skel-h, 12px); border-radius: var(--r1);
    background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%); background-size: 400% 100%;
    animation: skel var(--m-shimmer) linear 300ms infinite;
  }
  .skel--sm { --skel-h: 10px; }
  .skel--tile { width: var(--tile-md); height: var(--tile-md); border-radius: var(--r3); }
  .skel--btn { width: 96px; height: var(--h-sm); border-radius: var(--r2); }
  @keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  .skeleton__label { margin: 0; font-size: var(--t-small); color: var(--text-2); }

  /* ── Receipt: everything a decision closed ── */
  .receipt {
    position: relative; display: grid; gap: var(--s3); align-content: start; min-width: 0;
    padding: var(--s4) var(--s5) var(--s5); border: 1px solid var(--line); border-radius: var(--r3);
    background: var(--sheet); box-shadow: var(--shadow-1); font-size: var(--t-small);
  }
  .receipt--flat, :is(.sheet, .inset, dialog, .receipt) .receipt { box-shadow: none; }
  .receipt:focus { outline: none; }
  .receipt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .receipt__stamp { --tone-fg: var(--idle-fg); display: inline-flex; align-items: center; gap: 6px; margin: 0; justify-self: start; font-size: var(--t-small); font-weight: 700; color: var(--tone-fg); }
  .receipt__stamp:not(:has(> svg))::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
  .receipt__lead { margin: 0; font-size: var(--t-data); color: var(--text); }
  .receipt dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px var(--s4); margin: 0; }
  .receipt dl > div { display: contents; }
  .receipt dt { color: var(--text-3); }
  .receipt dd { --tone-fg: var(--text); margin: 0; color: var(--tone-fg); overflow-wrap: anywhere; }
  .receipt__closed { display: grid; gap: var(--s1); margin: 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); list-style: none; }
  .receipt__closed li { display: flex; align-items: baseline; gap: var(--s2); }
  .receipt__closed li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ok-dot); transform: translateY(-1px); }
  .receipt__closed b { font-weight: 650; }
  .receipt__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
  .receipt > .disclosure { margin-bottom: calc(var(--s2) * -1); }

  /* ── Legend and swatches ── */
  .legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t-cap); color: var(--text-2); }
  .legend > li { display: inline-flex; align-items: center; gap: 6px; }
  .legend > li > span[aria-hidden] { display: inline-flex; }
  .swatch { --c: var(--led-green); flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--cell-line); }
  .swatch--cell[data-v="occ"] { background: var(--sky-300); box-shadow: inset 0 0 0 1px var(--cell-occ-line); }
  :root[data-theme="night"] .swatch--cell[data-v="occ"], .presence .swatch--cell[data-v="occ"] { background: #2c5a74; box-shadow: inset 0 0 0 1px #4d86a5; }
  .swatch--cell[data-v="res"] { background: repeating-linear-gradient(135deg, var(--sky-300) 0 3px, var(--sky-100) 3px 6px); box-shadow: inset 0 0 0 1px var(--cell-occ-line); }
  .swatch--cell:is([data-v="review"], [data-v="extra"]) { background: var(--dash-diff); box-shadow: inset 0 0 0 1px var(--dash-diff-line); }
  .swatch--cell[data-v="fault"] { background: var(--red-600); box-shadow: inset 0 0 0 1px var(--red-700); }
  .swatch--cell[data-v="stale"], .swatch--dash { background: transparent; box-shadow: none; outline: 1.5px dashed var(--dash-unknown-line); outline-offset: -1.5px; }
  .swatch--cell[data-v="off"] { background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line-2); }
  .swatch--cell[data-v="decided"] { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
  .swatch--cell[data-v="hit"] { outline: 2px solid var(--accent); outline-offset: 1px; }
  .swatch--cell[data-v="target"] { background: var(--c); box-shadow: 0 0 0 1px var(--sheet), 0 0 0 2.5px var(--c); }
  .swatch--hatch { background: var(--dash-diff); box-shadow: inset 0 0 0 1px var(--dash-diff-line); }
  .swatch--led { background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
  .swatch--blink { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
  .swatch--tone { --tone-dot: var(--idle-dot); width: 8px; height: 8px; border-radius: 2px; background: var(--tone-dot); box-shadow: none; }
  .swatch--pip { width: 10px; height: 10px; border-radius: 3px; background: var(--ok-dot); box-shadow: none; }
  .swatch--pip[data-v="round"] { border-radius: 50%; }
  .swatch--mark { width: 2px; height: 12px; border-radius: 1px; background: var(--text); box-shadow: none; }
  .swatch--seg { width: 14px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: none; }
  .swatch--seg:is([data-v="done"], [data-v="available"], [data-v="ok"]) { background: var(--fill-ok); }
  .swatch--seg:is([data-v="reserved"], [data-v="part"], [data-v="accent"]) { background: var(--accent); }
  .swatch--seg[data-v="taken"] { background: var(--ink-400); }
  .swatch--seg[data-v="warn"] { background: var(--fill-warn); }
  .swatch--seg[data-v="bad"] { background: var(--fill-bad); }
  .swatch--seg[data-v="idle"] { background: var(--fill-idle); }
  .swatch--seg:is([data-v="review"], [data-v="outline"]) { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
  .swatch--seg[data-v="putin"] { background: transparent; box-shadow: inset 0 0 0 2px var(--ok-dot); }
  .swatch--seg[data-v="short"] { background: transparent; box-shadow: inset 0 0 0 1px var(--bad-dot); }
  .swatch--seg[data-v="unknown"] { background: var(--dash-unknown); box-shadow: inset 0 0 0 1px var(--line-2); }
  .swatch--seg[data-v="diff"] { background: var(--dash-diff); }
  .swatch--seg[data-v="bad-hatch"] { background: repeating-linear-gradient(135deg, var(--fill-bad) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--bad-line); }
  .swatch--due { width: 9px; height: 9px; margin: 1.5px; border-radius: 1px; background: var(--accent); box-shadow: none; transform: rotate(45deg); }
  .swatch--band { width: 14px; height: 10px; border-radius: 2px; background: color-mix(in oklab, var(--info-bg) 55%, transparent); box-shadow: inset 0 0 0 1.5px var(--info-fg); }
  .swatch--seg[data-v="quarantine"] { background: repeating-linear-gradient(90deg, var(--warn-dot) 0 2px, transparent 2px 5px); }
  .swatch--seg[data-v="transit"] { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 7px); }
  .swatch--seg[data-v="draft"] { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent) 40%, transparent) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent); }

  /* ── Action bar: drafts, bulk actions, stop bars. Pinned = float shadow (it floats); inline = in the flow. ── */
  .actionbar {
    position: sticky; bottom: var(--s4); z-index: 20; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    margin-top: var(--s5); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-radius: var(--r4);
    background: var(--sheet); color: var(--text); box-shadow: var(--shadow-3), 0 0 0 1px var(--line-2);
    animation: actionbar-in var(--m-enter) var(--e-enter);
  }
  @keyframes actionbar-in { from { opacity: 0; transform: translateY(8px); } }
  /* A bar pinned to the viewport's foot reserves its height, so a focused control never scrolls under it (WCAG 2.4.11:
     the base layer's scroll padding reads --actionbar-h). */
  :root:has(.actionbar:not(.actionbar--inline)) { --actionbar-h: 88px; }
  :root:has(.wstep--sticky .wstep__actions) { --actionbar-h: 96px; }
  .actionbar__icon { flex: none; color: var(--text-2); }
  .actionbar__text { flex: 1 1 200px; min-width: 0; margin: 0; font-size: var(--t-data); }
  .actionbar__text b { font-weight: 650; }
  .actionbar__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
  .actionbar--inline { position: static; margin-top: 0; box-shadow: var(--shadow-1), 0 0 0 1px var(--line-2); animation: none; }
  /* The draft bar is navy: it re-points the surface tokens so buttons and diffs inside read on navy. */
  .actionbar--draft {
    --text: var(--ink-on-dark); --text-2: var(--ink-on-dark-2); --text-3: #8fb0bf;
    --sheet: rgba(255, 255, 255, .08); --sheet-2: rgba(255, 255, 255, .05); --line: rgba(169, 208, 223, .16); --line-2: rgba(169, 208, 223, .25);
    --hover: rgba(255, 255, 255, .14); --accent: var(--sky-500); --accent-hover: var(--sky-400); --accent-fg: #062033; --accent-text: var(--sky-300);
    --focus: #7cc4ea; --ok-surface: rgba(48, 164, 108, .25);
    --btn-bg: rgba(255, 255, 255, .08); --btn-bg-hover: rgba(255, 255, 255, .14); --btn-line: rgba(169, 208, 223, .25); --btn-fg: #ffffff; --btn-shadow: none;
    background: var(--navy-950); color: var(--text); box-shadow: var(--shadow-3);
  }
  .actionbar--draft.actionbar--inline { box-shadow: var(--shadow-1); }
  .actionbar.actionbar--attached { position: static; margin: 0; border-radius: 0 0 var(--r4) var(--r4); border-inline: 0; border-bottom: 0; box-shadow: none; animation: none; }
  .actionbar--danger { box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in oklab, var(--bad-line) 60%, transparent); }
  .actionbar--danger.actionbar--inline { box-shadow: var(--shadow-1), 0 0 0 1px color-mix(in oklab, var(--bad-line) 60%, transparent); }
  @media (max-width: 560px) { .actionbar { bottom: calc(var(--phonebar-h) + var(--s2)); } }

  /* ── Changes: from → to ── */
  .changes { display: grid; gap: var(--s3); }
  .changes__group { margin: 0; font-size: var(--t-cap); font-weight: 700; color: var(--text-2); }
  .changes__list { display: grid; margin: 0; }
  .changes__row { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr); gap: var(--s1) var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-small); }
  .changes__row:last-child { border-bottom: 0; }
  .changes__row dt { color: var(--text-2); }
  .changes__row dd { margin: 0; }
  .chg { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
  td.chg { display: table-cell; }
  span.chg { display: inline-flex; } /* change(): inline in a sentence or a cell */
  .chg del { color: var(--text-3); text-decoration-thickness: 1px; }
  .chg ins { padding: 0 4px; border-radius: var(--r1); background: var(--ok-surface); font-weight: 650; text-decoration: none; }
  .chg__arrow { color: var(--text-3); }
  @media (max-width: 560px) { .changes__row { grid-template-columns: minmax(0, 1fr); } }

  /* ── Code, files, secret, QR, check list ── */
  .codeblock { display: grid; gap: var(--s2); min-width: 0; }
  .codeblock__pre {
    margin: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--sheet-sunk); color: var(--text);
    font: 12.5px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto;
    max-height: calc(var(--max, 16) * 1.5em + 2 * var(--s3));
  }
  .codeblock--nowrap .codeblock__pre { white-space: pre; overflow-wrap: normal; }
  .codeblock__bar { display: flex; justify-content: flex-end; }
  .files { display: grid; margin: 0; padding: 0; list-style: none; }
  .files > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-small); }
  .files > li:last-child { border-bottom: 0; }
  .files__icon { display: flex; color: var(--text-3); }
  .files__name { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
  a.files__name { display: inline-flex; align-items: center; min-height: var(--target-min); }
  .files__meta { color: var(--text-2); }
  .files__sum { flex-basis: 100%; font: 12px var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; }
  .secret {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s2); max-width: 100%; min-height: var(--h-sm);
    padding: var(--s1) var(--s1) var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--sheet-sunk);
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em;
  }
  .secret__v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .secret[data-state="revealed"] { letter-spacing: -.01em; background: var(--warn-surface); border-color: color-mix(in oklab, var(--warn-line) 50%, transparent); }
  .secret[data-state="revealed"] .secret__v { white-space: normal; overflow-wrap: anywhere; }
  .secret__cd { font: 600 var(--t-cap) var(--font-ui); letter-spacing: 0; color: var(--warn-fg); font-variant-numeric: tabular-nums; }
  .secret__actions { display: inline-flex; flex-wrap: wrap; gap: var(--s1); margin-left: auto; letter-spacing: 0; font-family: var(--font-ui); }
  .qr { --qr: 148px; flex: none; display: inline-grid; place-items: center; width: var(--qr); aspect-ratio: 1; padding: 8px; border: 1px solid var(--line-2); border-radius: var(--r2); background: #fff; }
  .qr svg { display: block; width: 100%; height: 100%; transition: filter var(--m-state) var(--e-standard); }
  .qr path { fill: var(--ink-950); }
  .qr--sm { --qr: 84px; padding: 5px; }
  .qr--lg { --qr: 200px; }
  .qr[data-state="masked"] svg { filter: blur(6px); }
  .checklist { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; font-size: var(--t-data); }
  .checklist > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: start; }
  .checklist__i { margin-top: 2px; }
  .checklist [data-ok="true"] .checklist__i { color: var(--ok-fg); }
  .checklist [data-ok="false"] .checklist__i { color: var(--bad-fg); }

  /* ── Navigation: crumbs, page tabs (level 1), tabs (level 2), side nav, nav list, pager ── */
  .crumbs { margin: 0 0 var(--s3); font-size: var(--t-small); line-height: 20px; }
  .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); margin: 0; padding: 0; list-style: none; }
  .crumbs li { display: inline-flex; align-items: center; gap: var(--s2); min-height: 24px; color: var(--text-2); }
  .crumbs li + li::before { content: ''; flex: none; width: 5px; height: 5px; margin: 0 3px 0 0; border-right: 1.5px solid var(--text-3); border-top: 1.5px solid var(--text-3); transform: rotate(45deg); }
  .crumbs a { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); color: var(--text-2); text-decoration: none; }
  .crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  .crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

  .viewnav { display: flex; gap: var(--s6); margin: calc(var(--s2) * -1) 0 var(--s6); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  /* Only the page's own head and tabs hold still across navigations (a name must be unique in the document). */
  .head + .viewnav { view-transition-name: viewnav; }
  .viewnav::-webkit-scrollbar { display: none; }
  .viewnav a { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--h-md); min-width: var(--target-min); color: var(--text-2); font-size: var(--t-data); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .viewnav a:hover { color: var(--text); }
  .viewnav a[aria-current="page"] { color: var(--text); }
  .viewnav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
  .viewnav a:focus-visible { outline-offset: -2px; }
  .viewnav__count, .tab__count, .sidenav__count { --tone-fg: var(--text-3); font-size: var(--t-cap); font-weight: 700; color: var(--tone-fg); font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) { .viewnav { gap: var(--s5); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } }

  .tabs { display: inline-flex; gap: 2px; max-width: 100%; margin-bottom: var(--s5); padding: 3px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--sheet-sunk); overflow-x: auto; scrollbar-width: none; vertical-align: top; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--s2); height: var(--h-sm); padding: 0 var(--s3); border: 0; border-radius: var(--r2); background: none; color: var(--text-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
  .tab:hover { color: var(--text); background: var(--hover); text-decoration: none; }
  .tab > input { position: absolute; opacity: 0; pointer-events: none; }
  .tab:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  @media (pointer: coarse) { .tab { height: var(--h-md); } }
  /* Radio tabs switch their panels in CSS: panel n+1 follows tab n. */
  .tabset > .tabpanel { display: none; }
  .tabset:not(:has(> .tabs input:checked)) > .tabpanel:nth-child(2),
  .tabset:has(> .tabs > .tab:nth-child(1) > input:checked) > .tabpanel:nth-child(2),
  .tabset:has(> .tabs > .tab:nth-child(2) > input:checked) > .tabpanel:nth-child(3),
  .tabset:has(> .tabs > .tab:nth-child(3) > input:checked) > .tabpanel:nth-child(4),
  .tabset:has(> .tabs > .tab:nth-child(4) > input:checked) > .tabpanel:nth-child(5),
  .tabset:has(> .tabs > .tab:nth-child(5) > input:checked) > .tabpanel:nth-child(6),
  .tabset:has(> .tabs > .tab:nth-child(6) > input:checked) > .tabpanel:nth-child(7),
  .tabset:has(> .tabs > .tab:nth-child(7) > input:checked) > .tabpanel:nth-child(8),
  .tabset:has(> .tabs > .tab:nth-child(8) > input:checked) > .tabpanel:nth-child(9) { display: block; }
  /* Horizontal strips fade at the edge that hides more (scroll-driven; app.js sets data-more where unsupported). */
  .viewnav[data-more="end"], .tabs[data-more="end"] { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .viewnav[data-more="start"], .tabs[data-more="start"] { mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .viewnav[data-more="both"], .tabs[data-more="both"] { mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  @supports (animation-timeline: scroll()) {
    .viewnav, .tabs { animation: strip-edge linear both; animation-timeline: scroll(self inline); }
    @keyframes strip-edge {
      from { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
      1%, 99% { mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
      to { mask-image: linear-gradient(90deg, transparent, #000 40px); }
    }
  }

  .sidenav { display: grid; gap: 2px; align-content: start; min-width: 0; }
  .sidenav__group { margin: 0; padding: var(--s3) var(--s3) var(--s1); font-size: var(--t-cap); font-weight: 600; color: var(--text-3); }
  .sidenav__a { display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: var(--s2) var(--s3); border-radius: var(--r2); color: var(--text-2); font-size: var(--t-data); font-weight: 500; text-decoration: none; }
  .sidenav__a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
  .sidenav__a[aria-current] { background: var(--selected); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--selected-line); }
  .sidenav__a:focus-visible { outline-offset: -2px; }
  button.sidenav__a { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
  .sidenav__a[aria-disabled="true"] { color: var(--text-3); cursor: default; }
  .sidenav__a[aria-disabled="true"]:hover { background: none; color: var(--text-3); }
  @media (pointer: coarse) { .sidenav__a, :is(.disclosure--compact, .disclosure--button) > summary { min-height: var(--h-md); } }
  .sidenav__t { flex: 1; display: grid; min-width: 0; }
  .sidenav__sub { font-size: var(--t-small); font-weight: 400; color: var(--text-3); }
  .sidenav__meta { font-size: var(--t-cap); color: var(--text-3); font-variant-numeric: tabular-nums; }

  .navlist { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); box-shadow: var(--shadow-1); }
  .navlist--plain { border: 0; border-radius: 0; background: none; box-shadow: none; }
  .navlist__a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
  .navlist__a:last-child { border-bottom: 0; }
  .navlist__a:hover { background: var(--hover); text-decoration: none; }
  .navlist__a:focus-visible { outline-offset: -2px; }
  .navlist__t { display: grid; min-width: 0; }
  .navlist__title { font-weight: 600; }
  .navlist__d { font-size: var(--t-small); color: var(--text-3); }
  .navlist__chev { color: var(--text-3); }

  .pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-small); color: var(--text-2); }
  .pager__pos { margin: 0; }
  .pager__btns { display: flex; gap: var(--s2); }

  /* ══════════════ Compositions ══════════════ */

  /* ── Page head: crumbs → h1 (+ badge) → sub → meta; actions on the right ── */
  .head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); flex-wrap: wrap; padding-bottom: var(--s6); }
  .head:has(h1.head__title) { view-transition-name: page-head; }
  .head--tight { padding-bottom: var(--s4); }
  .head__main, .head > div:first-child { flex: 1 1 28rem; min-width: 0; }
  .head__titlerow { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
  .head__title { margin: 0; font-family: var(--font-brand); font-size: var(--t-page); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; }
  .head__title .mono { font-family: var(--font-mono); font-size: .72em; font-weight: 500; letter-spacing: -.02em; }
  .head__title:focus { outline: none; }
  .head__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .head__sub { max-width: 68ch; margin: var(--s2) 0 0; font-size: var(--t-lead); color: var(--text-2); }
  .head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s2); font-size: var(--t-small); color: var(--text-2); }
  .head__meta > .facets { margin: 0; }
  .head__tech { margin-top: var(--s1); }
  .head__tech .head__moved { margin: 0 0 var(--s2); font-size: var(--t-small); color: var(--text-2); }
  .head__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
  @media (max-width: 900px) {
    .head { align-items: flex-start; }
    .head__actions { width: 100%; }
  }

  /* The page's explanation sits close to its title (K6); a section's beside its title. */
  .head__titlerow:has(> .head__explain) { gap: var(--s1) var(--s3); }
  .section__titlerow { display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; }
  .helppanel { display: grid; gap: var(--s4); max-width: 62ch; }
  .helppanel > * { margin: 0; }
  .helppanel h3 { font-size: var(--t-data); font-weight: 650; }
  .helppanel p, .helppanel li { color: var(--text-2); }

  /* ── Page templates (K0–K5, compose.ts): the frame's body region, the index, the queue, the record, the flow ── */
  .page__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-content: start; }
  .page__body > .section { padding-block: 0; }
  .page__body > .section + .section { padding-top: var(--s6); }
  .index, .queue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start; }
  .index__results { min-width: 0; }
  .flow--v { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .flow__rail { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
  .flow--v .flow__rail { position: sticky; top: calc(var(--top-h) + var(--s5)); }
  .flow--h { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .flow__step { min-width: 0; }
  @media (max-width: 900px) {
    .flow--v { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
    .flow--v .flow__rail { position: static; }
  }

  /* ── Workbench: the station two-pane task surface ── */
  .workbench {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-width: 0; overflow: clip;
    border: 1px solid var(--line); border-radius: var(--r5); background: var(--sheet); box-shadow: var(--shadow-1);
  }
  .workbench--side-sm { grid-template-columns: minmax(0, 1fr) min(340px, 45%); }
  .workbench--side-lg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .workbench--side-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .workbench--side-first.workbench--side-sm { grid-template-columns: min(340px, 45%) minmax(0, 1fr); }
  .workbench--side-first > .workbench__side { order: -1; border-left: 0; border-right: 1px solid var(--line); }
  /* Solo wins over every side width and position (same specificity as the side-first combinations, later). */
  .workbench.workbench--solo { grid-template-columns: minmax(0, 1fr); }
  .workbench--auto > .workbench__main { min-height: 0; }
  .workbench--solo > .workbench__side { display: none; }
  .workbench__main { container-type: inline-size; display: grid; gap: var(--s6); align-content: start; min-width: 0; min-height: 520px; padding: var(--s6); }
  .workbench__side { display: grid; gap: var(--s5); align-content: start; min-width: 0; padding: var(--s6); background: var(--sheet-sunk); border-left: 1px solid var(--line); }
  @media (max-width: 1100px) {
    .workbench, .workbench--side-sm, .workbench--side-lg, .workbench--side-first, .workbench--side-first.workbench--side-sm { grid-template-columns: minmax(0, 1fr); }
    .workbench__side, .workbench--side-first > .workbench__side { order: 0; border-left: 0; border-right: 0; border-top: 1px solid var(--line); }
    .workbench__main { min-height: 0; }
  }
  @media (max-width: 560px) { .workbench__main, .workbench__side { padding: var(--s4); } }

  /* ── Master–detail: a sticky master list beside the selected item ── */
  .master-detail { --md-list: 300px; display: grid; grid-template-columns: var(--md-list) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .master-detail--sm { --md-list: 240px; }
  .master-detail--lg { --md-list: 340px; }
  .master-detail__list { position: sticky; top: calc(var(--top-h) + var(--s5)); max-height: calc(100dvh - var(--top-h) - var(--s8)); overflow: auto; min-width: 0; }
  .master-detail__detail { min-width: 0; }
  @media (max-width: 900px) {
    .master-detail { grid-template-columns: minmax(0, 1fr); }
    .master-detail__list { position: static; max-height: none; }
  }

  /* ── Outcome: the sentence and next steps beside the receipt ── */
  .outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--s6); align-items: start; }
  .outcome__main { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
  .outcome__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
  /* The split follows the space it has (a bench stage beside its side pane), not the viewport. */
  .outcome-wrap { container-type: inline-size; min-width: 0; }
  @container (max-width: 720px) { .outcome { grid-template-columns: minmax(0, 1fr); } }
  /* Step titles read the step tokens, which the station scale lifts with the frame's width (kiosk from a distance). */
  .steptitle { margin: 0; font: 450 var(--t-step)/1.05 var(--font-brand); letter-spacing: -.03em; color: var(--text); }
  .steptitle--lg { font-size: var(--t-step-lg); }

  /* ── Crossfade: faces stacked in one cell (kiosk take-out: bay → destination) and station panes. kit.js
        crossfade(from, to) sets data-xfade; the motion lives here and stops with reduced or paused motion. ── */
  .xfade { display: grid; grid-template-columns: minmax(0, 1fr); }
  .xfade > * { grid-area: 1 / 1; min-width: 0; }
  [data-xfade="in"] { animation: k-xfade-in var(--m-enter) var(--e-enter) both; }
  .xfade > [data-xfade="in"] { transform-origin: 0 50%; animation: k-xfade-grow var(--m-travel) var(--e-settle) both; }
  [data-xfade="out"] { pointer-events: none; animation: k-xfade-out var(--m-seam-step) var(--e-exit) both; }
  @keyframes k-xfade-in { from { opacity: 0; transform: translateY(12px); } }
  @keyframes k-xfade-grow { from { opacity: 0; transform: scale(.5); } }
  @keyframes k-xfade-out { to { opacity: 0; transform: translateY(-24px); } }
  @media (max-width: 560px) { .head__sub--wide { display: none; } }

  /* ── Denied / lost: what is missing, who can give it, where you can go ── */
  .denied { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s8); align-items: start; padding-top: var(--s4); }
  .denied__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-content: start; min-width: 0; }
  .denied__intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); justify-items: start; }
  .denied__t { margin: 0; font-family: var(--font-brand); font-size: var(--t-page); font-weight: 450; line-height: 1.1; letter-spacing: -.025em; }
  .denied__t--display { font-size: var(--t-display); line-height: 1.05; letter-spacing: -.03em; }
  .denied__need { display: grid; gap: var(--s3); justify-items: start; }
  .denied__k { margin: 0; font-weight: 650; }
  .denied__need-line { margin: 0; font-size: var(--t-small); color: var(--text-2); }
  .denied__ask { display: flex; gap: var(--s2); flex-wrap: wrap; }
  .denied__addr { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--sheet-sunk); font-family: var(--font-mono); font-size: var(--t-small); color: var(--text-2); overflow-wrap: anywhere; }
  .denied__closest { margin: 0; font-size: var(--t-small); color: var(--text-2); }
  @media (max-width: 1000px) { .denied { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

  /* ── Wizard step ── */
  .wstep { display: grid; gap: var(--s4); align-content: start; max-width: 720px; }
  .wstep--wide { max-width: none; }
  .wstep__titlerow { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
  /* Sticky actions: the step's one primary stays in reach while a long step scrolls. --wstep-bleed is the padding of
     the surface the step sits on, so the bar spans it edge to edge. */
  .wstep--sticky .wstep__actions { position: sticky; bottom: var(--phonebar-h, 0px); z-index: 2; margin-inline: calc(var(--wstep-bleed, 0px) * -1); padding: var(--s4) var(--wstep-bleed, 0px); border-top: 1px solid var(--line); background: var(--sheet); }
  .wstep__eyebrow { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--text-2); }
  .wstep__title { margin: 0; font-family: var(--font-brand); font-size: var(--t-page); font-weight: 450; line-height: 1.1; letter-spacing: -.02em; }
  .wstep__title:focus { outline: none; }
  .wstep__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .wstep__lead { max-width: 60ch; margin: 0; font-size: var(--t-lead); color: var(--text-2); }
  .wstep__body { display: grid; gap: var(--s4); min-width: 0; }
  .wstep__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s2); }

  /* ── Motion: loops stop when motion is reduced or paused (the information stays) ── */
  @media (prefers-reduced-motion: reduce) {
    .skel { animation: none; }
    .actionbar { animation: none; }
    [data-xfade] { animation: none; }
  }
  html[data-motion="paused"] :is(.skel, .actionbar, [data-xfade]) { animation: none; }

  /* ── Forced colours: bars, squares, pips, the current item and swatches stay visible ── */
  @media (forced-colors: active) {
    :is(.bar, .bar__fill, .bar__seg, .bar__mark, .step::before, .step__mark, .tl__dot, .statusline, .receipt__stamp, .receipt__closed li, .list__group-title, .table__group > th, .bullets > li, .swatch, .qr, .viewnav a) { forced-color-adjust: none; }
    .bar { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
    .bar__fill, .bar__seg { background: CanvasText; }
    .bar__seg:is([data-kind="unknown"], [data-kind="outline"], [data-kind="short"], [data-kind="draft"]) { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
    .bar__seg[data-kind="unknown"] { box-shadow: none; outline: 1px dashed CanvasText; outline-offset: -1px; }
    .bar__mark { background: Highlight; }
    .step::before { background: GrayText; }
    .step[data-state="done"]::before { background: CanvasText; }
    .step[aria-current]::before { background: Highlight; }
    .step__mark { background: Canvas; color: CanvasText; box-shadow: inset 0 0 0 1.5px CanvasText; }
    .step[aria-current] .step__mark { box-shadow: inset 0 0 0 2px Highlight; }
    .tl__dot::before, .statusline::before, .receipt__stamp::before, .receipt__closed li::before, .list__group[data-tone] .list__group-title::before, .table__group[data-tone] > th::before, .bullets > li::before { background: CanvasText; }
    .tl__dot::after { background: GrayText; }
    .list__row[aria-current], .sidenav__a[aria-current], .table tbody tr:is([aria-selected="true"], [aria-current]) { outline: 2px solid Highlight; outline-offset: -2px; }
    .viewnav a { color: LinkText; }
    .viewnav a[aria-current="page"] { color: CanvasText; }
    .viewnav a[aria-current="page"]::after { background: Highlight; }
    .swatch { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
    .swatch:is(.swatch--led, .swatch--tone, .swatch--pip, .swatch--mark, .swatch--seg, .swatch--hatch), .swatch--cell:is([data-v="occ"], [data-v="fault"], [data-v="target"]) { background: CanvasText; }
    .swatch--cell[data-v="stale"], .swatch--dash { background: Canvas; box-shadow: none; outline: 1.5px dashed CanvasText; }
    .notice, .callout, .receipt, .sheet, .inset, .navlist, .table-wrap, .actionbar { border: 1px solid CanvasText; }
    .qr { background: #fff; }
  }
}

/* ── Later · not in R1 (later()): a parked surface says what it is, why it is not in R1 (the Neo source) and what R1
      does instead. A note on the quiet surface with the ink release rule down its edge: out of scope, not wrong. ── */
@layer blocks {
  .later {
    container-type: inline-size; display: grid; gap: var(--s3); padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 4px);
    border-radius: var(--r3); background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--later-bg);
  }
  .later__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
  .later__src { color: var(--text-3); font-size: var(--t-cap); font-weight: 600; }
  .later__what { margin: 0; font-size: var(--t-body); font-weight: 650; color: var(--text); max-width: 72ch; }
  .later__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4); margin: 0; font-size: var(--t-small); max-width: 96ch; }
  .later__facts > div { display: contents; }
  .later__facts dt { color: var(--text-3); font-weight: 650; }
  .later__facts dd { margin: 0; color: var(--text-2); }
  .later__go { font-weight: 600; white-space: nowrap; }
  .later--compact { padding-block: var(--s3); gap: var(--s2); }
  @container (max-width: 480px) { .later__facts { grid-template-columns: minmax(0, 1fr); } .later__facts dd + dt, .later__facts div + div dt { margin-top: var(--s2); } }
  @media (forced-colors: active) { .later { border: 1px solid CanvasText; border-left-width: 4px; } }
}


/* ── 07-overlays.css ── */
/* Janus kit · overlays. The browser owns the behaviour: <dialog> + showModal (top layer, inert page, focus trap, Esc,
   ::backdrop), [popover] (light dismiss), anchor positioning, @starting-style + allow-discrete for enter and exit.
   One dialog (dialog | drawer · md | wide | station), popover menus, hint tips, toasts, the palette. */
@layer overlays {
  dialog::backdrop { background: var(--scrim); backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--m-state), overlay var(--m-enter) allow-discrete, display var(--m-enter) allow-discrete; }
  dialog[open]::backdrop { opacity: 1; }
  @starting-style { dialog[open]::backdrop { opacity: 0; } }

  /* ── Dialog ── */
  .dialog {
    position: fixed; inset: 0; margin: auto; padding: 0; border: 0;
    width: min(560px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: calc(100dvh - 64px);
    flex-direction: column; overflow: auto;
    background: var(--sheet); color: var(--text); border-radius: var(--r5); box-shadow: var(--shadow-3);
    opacity: 0; transform: translateY(2%) scale(.98);
    transition: opacity var(--m-state), transform var(--m-enter) var(--e-enter), overlay var(--m-enter) allow-discrete, display var(--m-enter) allow-discrete;
  }
  .dialog:not([open]) { display: none; }
  .dialog[open] { display: flex; opacity: 1; transform: none; }
  @starting-style { .dialog[open] { opacity: 0; transform: translateY(2%) scale(.98); } }
  .dialog:focus, .dialog:focus-visible { outline: none; }
  .dialog--wide { width: min(880px, calc(100vw - 32px)); }
  .dialog--station { width: min(720px, calc(100vw - 32px)); }
  .dialog__form { display: contents; }
  .dialog__head { flex: none; display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5) var(--s6) var(--s4); }
  .dialog__head > .grow { display: grid; gap: var(--s1); padding-top: 2px; }
  .dialog__title { font-family: var(--font-brand); font-size: var(--t-title); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
  .dialog__title.mono, .dialog__title .mono { font-family: var(--font-mono); font-size: .8em; letter-spacing: -.02em; }
  .dialog__sub { font-size: var(--t-small); color: var(--text-2); }
  .dialog__lead { font-size: var(--t-data); color: var(--text-2); }
  .dialog__close { margin: -6px -10px 0 auto; }
  .dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s6) var(--s5); display: grid; gap: var(--s4); align-content: start; }
  .dialog__foot { flex: none; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; padding: var(--s4) var(--s6); border-top: 1px solid var(--line); background: var(--sheet-2); }
  .dialog__icon, .dialog__media { flex: none; }
  .dialog__status { margin-right: auto; align-self: center; font-size: var(--t-small); color: var(--text-2); }
  .dialog__status:empty { display: none; }
  .dialog--flow .dialog__body { flex: none; overflow: visible; }
  .dialog--station .dialog__title { font-size: 28px; }
  .dialog--station .dialog__foot .btn { --bh: var(--h-lg); font-size: var(--t-body); }

  /* Drawer: the same dialog from the right edge; travels in, leaves faster. */
  .dialog--drawer {
    inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); height: 100dvh; max-height: none; border-radius: 0;
    opacity: 1; transform: translateX(104%);
    transition: transform var(--m-exit) var(--e-exit), overlay var(--m-exit) allow-discrete, display var(--m-exit) allow-discrete;
  }
  .dialog--drawer[open] { transform: none; transition: transform var(--m-travel) var(--e-travel), overlay var(--m-travel) allow-discrete, display var(--m-travel) allow-discrete; }
  @starting-style { .dialog--drawer[open] { transform: translateX(104%); opacity: 1; } }
  .dialog--drawer.dialog--wide { width: min(760px, 100vw); }
  .dialog--drawer .dialog__head { padding: var(--s5); border-bottom: 1px solid var(--line); }
  .dialog--drawer .dialog__body { padding: var(--s5); gap: var(--s5); }
  .dialog--drawer .dialog__foot { padding: var(--s4) var(--s5); }
  @media (max-width: 560px) {
    .dialog:not(.dialog--drawer) { width: calc(100vw - 16px); max-height: calc(100dvh - 32px); }
    .dialog__head { padding: var(--s4) var(--s4) var(--s3); }
    .dialog__body { padding: 0 var(--s4) var(--s4); }
    .dialog__foot { padding: var(--s3) var(--s4); }
  }

  /* ── Popover menus ── */
  .popover {
    position: fixed; inset: auto; margin: 0; min-width: 240px; padding: var(--s2);
    background: var(--sheet); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow-3);
  }
  .popover:not(:popover-open) { display: none; }
  .popover:popover-open { display: block; animation: pop var(--m-state) var(--e-enter); }
  @keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
  .menu { width: 280px; position-area: block-end span-inline-start; margin-top: 6px; }
  @supports not (position-area: block-end) { .menu, .popover { inset: calc(var(--top-h) + 6px) 16px auto auto; } }
  .menu__head { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s2) var(--s3); margin-bottom: var(--s1); border-bottom: 1px solid var(--line); }
  .menu-item {
    display: flex; gap: var(--s3); align-items: center; width: 100%; height: 40px; padding: 0 var(--s3);
    border: 0; border-radius: var(--r2); background: none; color: var(--text); text-align: left; text-decoration: none;
    font: inherit; font-size: var(--t-data); cursor: pointer;
  }
  .menu-item:hover, .menu-item:focus-visible { background: var(--hover); text-decoration: none; }
  .menu-item:focus-visible { outline-offset: -2px; }
  .menu-item .sub { margin-left: auto; color: var(--text-3); font-size: var(--t-cap); }
  .menu-item .i { color: var(--text-2); }
  .menu-sep { border: 0; height: 1px; background: var(--line); margin: var(--s1) 0; }
  /* The on/off mark of a menuitemcheckbox: the switch recipe, scaled to the row. */
  .menu-item__state { margin-left: auto; flex: none; position: relative; width: 30px; height: 18px; border-radius: var(--pill); background: var(--ink-300); transition: background var(--m-state); }
  :root[data-theme="night"] .menu-item__state { background: rgba(169, 208, 223, .3); }
  .menu-item__state::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--m-state) var(--e-standard); }

  /* ── Hint tips (popover=hint, opened by interestfor or a button) ── */
  .tip {
    position: fixed; inset: auto; margin: 6px; max-width: min(320px, calc(100vw - 24px)); padding: 4px 8px; border: 0; border-radius: var(--r2);
    background: var(--tip-bg); color: #fff; font-size: var(--t-small); font-weight: 600; line-height: 1.35;
    position-area: block-start; position-try-fallbacks: flip-block, flip-inline;
  }
  .tip:not(:popover-open) { display: none; }
  .tip--side { position-area: inline-end center; margin: 0 0 0 10px; white-space: nowrap; }
  .tip--note { font-weight: 400; padding: var(--s2) var(--s3); white-space: normal; }

  /* ── Explanations on demand (explain(), hint(): DESIGN.md › What shows when, rule 7). An ⓘ beside what it explains,
        a popover anchored to it. Quiet at rest: the text-3 icon, no ring; the label (a hint in the first weeks) is the
        only words it adds to the layout. ── */
  .explain {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
    min-width: var(--target-min); min-height: var(--target-min); padding: 0; border: 0; border-radius: var(--pill);
    background: none; color: var(--text-3); font: inherit; font-size: var(--t-small); font-weight: 500; line-height: 1.2;
    cursor: help; vertical-align: middle; transition: color var(--m-state), background-color var(--m-state);
    justify-self: start; align-self: center;
  }
  .explain:hover, .explain:has(+ .explain__pop:popover-open) { color: var(--accent-text); background: var(--hover); }
  .explain--label { padding: 0 var(--s2) 0 6px; color: var(--text-2); text-align: left; }
  .explain--label .explain__l { text-decoration: underline dotted; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .explain[data-explain="first"][data-seen] { padding: 0; }
  .explain[data-explain="first"][data-seen] .explain__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .explain__pop {
    position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    margin: 6px 0; width: min(380px, calc(100vw - 32px)); min-width: 0; padding: var(--s3) var(--s4) var(--s4);
    font-family: var(--font-ui); font-size: var(--t-data); line-height: 1.5; text-align: left; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal;
  }
  .explain__pop:popover-open { display: grid; gap: var(--s2); }
  .explain__t { margin: 0; font-weight: 650; color: var(--text); font-family: var(--font-ui); font-size: var(--t-data); }
  .explain__b { color: var(--text-2); }
  .explain__b > * { margin: 0; }
  .explain__b > * + * { margin-top: var(--s2); }
  .explain__b a { color: var(--accent-text); }
  /* On a phone an anchored popover spans the screen inside the 16 px gutter, just under its button. */
  @media (max-width: 560px) {
    .explain__pop, .filterbar__pop, .filterbar__lens { position-area: none; position-try-fallbacks: none; inset-inline: 16px; top: anchor(bottom); bottom: auto; width: auto; max-width: none; margin: 6px 0 0; }
  }

  /* ── The filter bar's popovers (filterBar(), K1): More filters, and on a phone the Filters lens ── */
  .filterbar__pop { position-area: block-end span-inline-start; position-try-fallbacks: flip-inline; margin-top: 6px; width: min(420px, calc(100vw - 32px)); padding: var(--s4); }
  .filterbar__pop:popover-open { display: grid; gap: var(--s4); }
  @media (min-width: 561px) {
    /* A desk shows the lens in the row: the popover element is laid out in flow and never opens. */
    .filterbar:not(.filterbar--compact) .filterbar__lens[popover] { display: flex; position: static; inset: auto; margin: 0; padding: 0; width: auto; height: auto; overflow: visible; border: 0; background: none; color: inherit; }
  }
  @media (max-width: 560px) {
    .filterbar__lens { position: fixed; inset: auto; margin: 6px 0 0; width: min(420px, calc(100vw - 32px)); padding: var(--s4); flex-direction: column; align-items: stretch;
      position-area: block-end span-inline-start; position-try-fallbacks: flip-inline;
      background: var(--sheet); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow-3); }
    .filterbar__lens:not(:popover-open) { display: none; }
    .filterbar__lens:popover-open { display: flex; gap: var(--s4); }
    .filterbar__lens .filterbar__chips { flex-wrap: wrap; overflow: visible; mask-image: none; margin: 0; padding: 0; }
    /* Inside the lens, More filters is simply the rest of it. */
    .filterbar__lens .filterbar__pop[popover] { display: grid; gap: var(--s4); position: static; margin: 0; width: auto; padding: var(--s4) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; animation: none; }
    .filterbar__lens { position-area: none; position-try-fallbacks: none; inset-inline: 16px; top: anchor(bottom); bottom: auto; width: auto; }
  }
  /* compact: the lens is a popover at every width. */
    .filterbar--compact .filterbar__lens { position: fixed; inset: auto; margin: 6px 0 0; width: min(420px, calc(100vw - 32px)); padding: var(--s4); flex-direction: column; align-items: stretch;
      position-area: block-end span-inline-start; position-try-fallbacks: flip-inline;
      background: var(--sheet); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow-3); }
    .filterbar--compact .filterbar__lens:not(:popover-open) { display: none; }
    .filterbar--compact .filterbar__lens:popover-open { display: flex; gap: var(--s4); }
    .filterbar--compact .filterbar__lens .filterbar__chips { flex-wrap: wrap; overflow: visible; mask-image: none; margin: 0; padding: 0; }
    /* Inside the lens, More filters is simply the rest of it. */
    .filterbar--compact .filterbar__lens .filterbar__pop[popover] { display: grid; gap: var(--s4); position: static; margin: 0; width: auto; padding: var(--s4) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; animation: none; }
  

  /* ── Toasts: a manual top-layer popover, so they sit above open dialogs ── */
  .toasts {
    position: fixed; inset: auto var(--s6) calc(var(--actionbar-h) + var(--phonebar-h) + var(--s6)) auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible;
    display: grid; gap: var(--s2); width: min(400px, calc(100vw - 32px));
  }
  .toasts:not(:popover-open) { display: none; }
  @media (max-width: 900px) { .toasts { inset: auto var(--s4) calc(var(--actionbar-h) + var(--phonebar-h) + var(--s4)) auto; } }
  @media (max-width: 560px) { .toasts { inset: auto var(--s4) calc(var(--actionbar-h) + var(--phonebar-h) + var(--s4)) var(--s4); width: auto; } }
  .toast {
    --toast-ic: var(--sky-300);
    display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r3);
    background: var(--navy-950); color: var(--ink-on-dark); box-shadow: var(--shadow-3); font-size: var(--t-data);
    animation: toast-in var(--m-enter) var(--e-enter);
  }
  .toast b { color: #fff; }
  .toast > .i { color: var(--toast-ic); margin-top: 1px; }
  .toast[data-tone="ok"] { --toast-ic: #6fd6a2; } .toast[data-tone="warn"] { --toast-ic: var(--amber-400); } .toast[data-tone="bad"] { --toast-ic: #ff8f93; }
  .toast .btn { --btn-bg: transparent; --btn-bg-hover: rgba(255, 255, 255, .1); --btn-fg: #fff; --btn-line: rgba(169, 208, 223, .3); box-shadow: none; }
  .toast__undo { display: inline; }
  .toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--m-exit) var(--e-exit), transform var(--m-exit) var(--e-exit); }
  .toast__x { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r2); background: transparent; color: var(--ink-on-dark-2); cursor: pointer; }
  .toast__x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

  /* ── Command palette ── */
  .palette {
    position: fixed; inset: 12vh 0 auto 0; margin: 0 auto; padding: 0; width: min(680px, calc(100vw - 32px)); max-width: none; max-height: 76vh;
    flex-direction: column; overflow: hidden; background: var(--sheet); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r5); box-shadow: var(--shadow-3);
    opacity: 0; transform: translateY(-8px);
    transition: opacity var(--m-state), transform var(--m-enter) var(--e-enter), overlay var(--m-enter) allow-discrete, display var(--m-enter) allow-discrete;
  }
  .palette:not([open]) { display: none; }
  .palette[open] { display: flex; opacity: 1; transform: none; }
  @starting-style { .palette[open] { opacity: 0; transform: translateY(-8px); } }
  .palette::backdrop { background: rgba(6, 26, 43, .28); }
  .palette:focus, .palette:focus-visible { outline: none; }
  .palette__in { flex: none; display: flex; align-items: center; gap: var(--s3); height: 64px; padding: 0 var(--s5); border-bottom: 1px solid var(--line); color: var(--accent-text); }
  .palette__in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 19px; }
  .palette__list { flex: 1 1 auto; min-height: 0; max-height: 52vh; overflow-y: auto; padding: var(--s2); }
  .palette__list:empty { display: none; }
  .palette__grp { font-size: var(--t-cap); font-weight: 600; color: var(--text-3); padding: var(--s3) var(--s3) var(--s1); }
  .palette__item { display: flex; align-items: center; gap: var(--s3); min-height: 46px; padding: var(--s1) var(--s3); border-radius: var(--r2); color: var(--text); text-decoration: none; font-size: var(--t-data); }
  .palette__item > .i { color: var(--text-2); }
  .palette__item:hover, .palette__item.is-active, .palette__item[aria-selected="true"] { background: var(--selected); text-decoration: none; }
  .palette__item .sub { margin-left: auto; color: var(--text-3); font-size: var(--t-cap); white-space: nowrap; }
  .palette__empty { display: grid; gap: var(--s2); justify-items: center; text-align: center; padding: var(--s8) var(--s6); color: var(--text-2); }
  .palette__empty b { font-size: var(--t-section); font-weight: 650; color: var(--text); }
  .palette__foot { flex: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--sheet-2); font-size: var(--t-cap); color: var(--text-3); }
  @media (max-width: 560px) { .palette { inset: var(--s3) 0 auto 0; width: calc(100vw - 16px); } .palette__foot > :last-child { display: none; } }

  @media (forced-colors: active) {
    .dialog, .palette, .popover, .toast { border: 1px solid CanvasText; }
    .menu-item__state { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
    .menu-item__state::after { background: CanvasText; }
    .menu-item[aria-checked="true"] .menu-item__state { background: Highlight; }
  }
}

/* ── 07b-devtools.css ── */
/* Janus kit · the developer overlay (app/kit/devtools.ts, assets/devtools.js). Concept scaffolding, never ported.
   One floating button, bottom-right, out of every page's layout; one panel over the page. It is drawn in the presence
   navy on every theme, so it reads as the prototype's own object, never as a control of the page. */
@layer overlays {
  /* ── The button ── */
  .devfab {
    position: fixed; right: 16px; bottom: calc(16px + var(--devfab-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 45;
    transition: bottom var(--m-enter) var(--e-enter);
  }
  .devfab__btn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
    border: 1px solid rgba(169, 208, 223, .34); border-radius: var(--pill);
    background: var(--navy-950); color: var(--sky-300); box-shadow: var(--shadow-3);
    transition: background var(--m-state), color var(--m-state), border-radius var(--m-enter) var(--e-enter);
  }
  .devfab__btn:hover { background: var(--navy-900); color: #fff; }
  .devfab__btn:focus-visible { outline: 2px solid var(--sky-500); outline-offset: 3px; border-radius: var(--pill); }
  .devfab--station .devfab__btn { width: 56px; height: 56px; }
  .devfab--station .devfab__btn .i { width: 24px; height: 24px; }
  /* Riding in a page's own dialog: the viewport's corner still, above the dialog's backdrop. */
  dialog > .devfab { position: fixed; }

  /* ── The panel: a modal dialog anchored above the button ── */
  .dialog[data-devtools] {
    inset: auto 16px 16px auto; margin: 0; width: min(440px, calc(100vw - 32px)); max-height: min(780px, calc(100dvh - 32px));
    transform-origin: 100% 100%;
  }
  .dialog[data-devtools]::backdrop { background: rgba(6, 26, 43, .16); backdrop-filter: none; }
  .dialog[data-devtools] .dialog__head { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
  .dialog[data-devtools] .dialog__title { font-size: var(--t-section); }
  .dialog[data-devtools] .dialog__body { padding-top: var(--s4); }
  .dialog[data-devtools] .dialog__foot, .devtools__foot { justify-content: space-between; align-items: center; gap: var(--s3); }
  @media (max-width: 560px) { .dialog[data-devtools]:not(.dialog--drawer) { inset: auto 8px 8px 8px; width: auto; } }

  .devtools__body { display: grid; gap: var(--s5); align-content: start; }
  .devtools__sec { display: grid; gap: var(--s3); min-width: 0; }
  .devtools__sec[hidden] { display: none; }
  .devtools__sec + .devtools__sec:not([hidden]) { border-top: 1px solid var(--line); padding-top: var(--s4); }
  .devtools__sec[hidden] + .devtools__sec { border-top: 1px solid var(--line); padding-top: var(--s4); }
  .devtools__body > .devtools__sec:first-child { border-top: 0; padding-top: 0; }
  .devtools__h { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-small); font-weight: 650; color: var(--text); }
  .devtools__h .i { color: var(--text-3); }
  .devtools__now { margin-left: auto; font-weight: 500; color: var(--text-2); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .devtools__k { margin: 0; font-size: var(--t-cap); font-weight: 600; color: var(--text-2); }

  .devtools__states { display: grid; gap: var(--s3); }
  .devtools__states .seg { display: flex; flex-wrap: wrap; width: 100%; }
  .devtools__states .seg a { flex: 1 1 auto; justify-content: center; }
  .devtools__group, .devtools__later { display: grid; gap: var(--s2); }
  .devtools__later { padding-top: var(--s3); border-top: 1px solid var(--line); }
  .devtools__list { list-style: none; margin: 0; padding: 0; display: grid; }
  .devtools__list li { display: grid; gap: 0; padding-block: var(--s1); }
  .devtools__list li + li { border-top: 1px solid var(--line-soft); }
  .devtools__list a { display: inline-flex; align-items: center; min-height: max(36px, var(--target-min)); font-weight: 600; font-size: var(--t-data); color: var(--text); text-decoration: none; }
  .devtools__list a:hover { text-decoration: underline; }
  .devtools__list a[aria-current] { color: var(--accent-text); }
  .devtools__list a[aria-current]::before { content: ''; width: 6px; height: 6px; margin-right: var(--s2); border-radius: 1px; background: currentColor; }
  .devtools__src { flex: none; font-size: var(--t-cap); color: var(--text-3); }

  .devtools__sims { display: grid; gap: var(--s3); }
  .devtools__sim { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
  .devtools__sim > * { margin-top: 0; }

  .devtools__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .devtools__person { display: flex; align-items: center; gap: var(--s3); min-height: max(44px, var(--target-min)); padding: var(--s1) var(--s2); border-radius: var(--r3); color: var(--text); text-decoration: none; }
  .devtools__person:hover { background: var(--hover); }
  .devtools__person[aria-current] { background: var(--selected); box-shadow: inset 0 0 0 1px var(--selected-line); }
  .devtools__pt { display: grid; min-width: 0; }
  .devtools__pn { font-size: var(--t-data); font-weight: 600; }
  .devtools__pr { font-size: var(--t-cap); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .devtools__links { display: flex; flex-wrap: wrap; gap: var(--s1); }
  .devtools__keys { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--t-cap); color: var(--text-3); }
  .devtools__keys kbd + kbd { margin-left: 2px; }

  /* The kit page's specimen: the panel in the flow, as it opens. */
  .devtools--specimen { max-width: 440px; border: 1px solid var(--line); border-radius: var(--r5); background: var(--sheet); box-shadow: var(--shadow-3); overflow: hidden; }
  .devtools--specimen .devtools__body { padding: var(--s5); }
  .devtools__foot { display: flex; flex-wrap: wrap; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--sheet-2); }
  .devfab--specimen { position: static; display: inline-block; }

  /* A wrapper that only held a registered simulation takes no space once the slot is hidden. */
  :where(div):has(> [data-dev-slot]:only-child) { display: none; }

  @media print { :is(.devfab, dialog[data-devtools]) { display: none; } }
  @media (forced-colors: active) { .devfab__btn { border: 1px solid ButtonText; } }
}

/* ── 08-domain.css ── */
/* Janus kit · domain blocks. The rack glyph and its towers, the covered-by bar, the evidence seam, time (act-by,
   countdown, drain, clock), the scan parts and the station parts (keypad, PIN dots, result mark, frame, bottom nav).
   Meaning comes from attributes: cells carry data-kind (occ|res|review|fault|stale|off|stencil|extra|decided|lit|mark),
   lit things carry data-mode (steady|blink|slow) and --c (an --led-* colour), steps carry data-state.
   Pattern language: dashed = Unknown only, amber hatch = a Difference to decide only, a light hatch in the series'
   own colour = not final yet. */

/* Component tokens: the few rack colours that differ per register. Everything else reads the shared tokens. */
@layer tokens {
  :root {
    --cell-bg: #ffffff;
    --cell-occ: var(--sky-300);
    --cell-occ-ink: var(--navy-900);
    --cell-res: repeating-linear-gradient(135deg, var(--sky-300) 0 3px, var(--sky-100) 3px 6px);
    --tower-bg: var(--ink-800);
    --tower-ring: transparent;
    --lamp-dim: #1b2b35;
    --lit-ink: #062012;
  }
  :root[data-theme="night"] {
    --cell-bg: #0e2638;
    --cell-occ: #2c5a74;
    --cell-occ-ink: var(--sky-100);
    --tower-bg: #2a4a5f;
    --tower-ring: rgba(169, 208, 223, .35);
  }
  .presence {
    --cell-bg: rgba(255, 255, 255, .06);
    --cell-occ: #2c5a74;
    --cell-occ-ink: var(--sky-100);
    --tower-bg: #2a4a5f;
    --tower-ring: rgba(169, 208, 223, .35);
  }
}

@layer domain {
  /* ═════════════ Rack glyph ═════════════
     A rack drawn as tiers × bays, highest tier on top. One size scale (thumb xs sm md lg xl, or fit), one cell
     geometry (--cell-w × --cell-h), one radius formula, one halo formula. Overlays (zone, locator cross) are placed
     by the same geometry, in CSS. */
  .rackmap {
    --cell: var(--cell-md); --gap: 3px; --pad: calc(var(--gap) * 2 + 2px);
    --cell-w: var(--cell); --cell-h: var(--cell);
    --lbl: 16px; --lblx: 0px; --zl: 0px;
    --lamp: max(4px, calc(var(--cell) * .36)); --tt: 0px; --ttl: 0px;
    position: relative; display: inline-grid; gap: var(--gap); padding: var(--pad); padding-top: calc(var(--pad) + var(--tt) + var(--zl));
    justify-self: start; align-self: start; vertical-align: middle;
    background: var(--sheet-sunk); border: 1px solid var(--line-2);
    border-radius: clamp(3px, calc(var(--cell) * .33), var(--r3));
    forced-color-adjust: none;
  }
  .rackmap--thumb { --cell: var(--cell-thumb); --gap: 1px; --pad: 3px; --lamp: 3px; }
  .rackmap--xs { --cell: var(--cell-xs); --gap: 2px; --pad: 3px; }
  .rackmap--sm { --cell: var(--cell-sm); --gap: 2px; }
  .rackmap--md { --cell: var(--cell-md); --gap: 3px; }
  .rackmap--lg { --cell: var(--cell-lg); --gap: 4px; }
  .rackmap--xl { --cell: var(--cell-xl); --gap: 5px; }
  /* Fit: the drawing fills its .rackfit container. One formula; the component writes the shape's constants
     (--fit-n cell widths, --fit-g gaps, --fit-px fixed pixels) and the bounds (--fit-min, --fit-max). */
  .rackscroll { position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px; }
  .rackfit { display: block; width: 100%; min-width: 0; container-type: inline-size; }
  .rackmap--fit {
    --gap: 2px;
    --cell: clamp(var(--fit-min, 4px), calc((100cqi - var(--fit-px, 0) * 1px - var(--fit-g, 0) * var(--gap)) / var(--fit-n, 32)), var(--fit-max, 22px));
  }
  .rackmap--fit.rackmap--elev { --gap: 3px; }
  /* Elevation: the tall bay drawing of a rack page (rack, rack console, self-test). */
  .rackmap--elev { --cell-h: calc(var(--cell) * 1.8); --lbl: 22px; }
  /* Stretch: one tier across the whole width (count strips): every bay flexes, 40 px tall (32 on phones). */
  .rackmap--stretch { --cell: 18px; --cell-h: var(--stretch-h, 40px); display: grid; width: 100%; }
  .rackmap--stretch .rackmap__tier > .cell { flex: 1 1 0; width: auto; min-width: 4px; }
  @media (max-width: 560px) { .rackmap--stretch { --stretch-h: 32px; } }
  /* Badges: a numbered warn dot over a bay (ok on a decided bay). */
  .cell[data-n]::after { content: attr(data-n); position: absolute; top: -8px; right: -6px; z-index: 2; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--warn-dot); color: #2b1c02; font: 700 10px/1 var(--font-ui); box-shadow: 0 0 0 2px var(--sheet-sunk); }
  .cell[data-n][data-kind="decided"]::after { background: var(--ok-dot); color: #fff; }
  /* Bay strip: a tick per bay (tier picker). */
  .baystrip { display: flex; gap: 1px; width: 100%; min-width: 48px; height: 14px; }
  .baystrip--tall { height: 22px; }
  .baystrip > i { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: var(--line-2); }
  .baystrip > i[data-kind="stale"] { background: transparent; outline: 1px dashed var(--dash-unknown-line); outline-offset: -1px; }
  :is(.optcard:has(input:checked), [aria-selected="true"], [aria-current="true"]) .baystrip > i:not([data-kind]) { background: var(--accent); }
  /* dim: occupancy fades so marked and lit bays stand out. */
  .rackmap[data-dim] .cell[data-kind="occ"] { opacity: .38; }
  /* Tower lamps on an elevation stay readable when the cells shrink to fit a phone. */
  .rackmap--elev { --lamp: max(7px, calc(var(--cell) * .38)); }
  .rackmap--stencil { --cell-w: calc(var(--cell) * .5); --cell-h: calc(var(--cell) * 1.6); }
  .rackmap--elev.rackmap--stencil { --cell-w: calc(var(--cell) * .55); --cell-h: calc(var(--cell) * 2.4); }
  .rackmap--labels { --lblx: calc(var(--lbl) + 2px + var(--gap)); }
  .rackmap--ghost { background: transparent; }
  .rackmap--ghost .cell { --cell-bg: transparent; }

  .rackmap__tier { display: flex; gap: var(--gap); align-items: center; }
  .rackmap__gap { width: var(--gap); flex: none; }
  .rackmap__lbl {
    flex: none; display: flex; align-items: center; justify-content: flex-end;
    width: var(--lbl); height: var(--cell-h); margin-right: 2px;
    font: 400 11px/1 var(--font-mono); color: var(--text-2); white-space: nowrap;
  }
  .rackmap--elev .rackmap__lbl { font-size: 12px; font-weight: 600; }
  .rackmap--sides { display: inline-flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-end; padding: 0; background: transparent; border: 0; }
  .rackmap__face { position: relative; display: inline-grid; gap: var(--gap); padding: var(--pad); background: var(--sheet-sunk); border: 1px solid var(--line-2); border-radius: clamp(3px, calc(var(--cell) * .33), var(--r3)); }
  .rackmap--ghost .rackmap__face { background: transparent; }
  .rackmap__side { display: flex; align-items: center; min-height: calc(var(--lamp) + 3px); font: 700 11px/1.2 var(--font-ui); letter-spacing: .06em; color: var(--text-2); margin-bottom: 2px; }
  .rackmap--thumb .rackmap__side { font-size: var(--t-micro); }

  /* Ruler: bay numbers under the drawing (first, every 8th, last). */
  .rackmap__ruler { align-items: flex-start; height: 18px; }
  .rackmap__ruler > span:not(.rackmap__gap) { position: relative; flex: none; width: var(--cell-w); }
  .rackmap__ruler > .rackmap__rlbl { width: var(--lbl); margin-right: 2px; }
  .rackmap__ruler b { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font: 600 clamp(9px, calc(var(--cell) * .46), 12px)/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }

  /* Cells */
  .cell {
    position: relative; flex: none; display: inline-block; vertical-align: middle;
    width: var(--cell-w, var(--cell)); height: var(--cell-h, var(--cell));
    border-radius: clamp(1px, calc(min(var(--cell-w, var(--cell)), var(--cell-h, var(--cell))) * .16), 8px);
    background: var(--cell-bg); box-shadow: inset 0 0 0 1px var(--cell-line);
    --rim-w: clamp(1px, calc(min(var(--cell-w, var(--cell)), var(--cell-h, var(--cell))) * .11), 4px); --rim-band: calc(var(--rim-w) * .45);
  }
  .rackmap__tier--tall > .cell { height: calc(var(--cell-h) * 2 + var(--gap)); }
  .cell[data-kind="occ"] { background: var(--cell-occ); box-shadow: inset 0 0 0 1px var(--cell-occ-line); }
  .cell[data-kind="res"] { background: var(--cell-res); box-shadow: inset 0 0 0 1px var(--cell-occ-line); }
  .cell:is([data-kind="review"], [data-kind="extra"]) { background: var(--dash-diff); box-shadow: inset 0 0 0 1px var(--dash-diff-line); }
  .cell[data-kind="fault"] { background: var(--bad-line); box-shadow: inset 0 0 0 1px var(--fill-bad); }
  .cell[data-kind="stale"] { background: transparent; box-shadow: none; outline: 1.5px dashed var(--cell-line); outline-offset: -1.5px; }
  .cell[data-kind="off"] { background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line-2); }
  .cell[data-kind="stencil"], .rackmap--stencil .cell[data-kind="occ"] { background: var(--ink-400); box-shadow: inset 0 0 0 1px var(--ink-600); }
  .cell[data-kind="decided"] { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
  /* Lit: the LED colour fills the bay inside its own footprint, with an inset rim: a band of the LED colour at the edge
     (reads on the night sheet) and a line in its dark shade inside it (≥ 3:1 on the fill and on a day cell), so the
     grid stays even. The rim stays through the off phase of a blink. Marked, not
     lit (accent): the same form in the action colour. Only a real "light the bay" shows the LED colour. Annotations
     (this bay, selected, focus, careful neighbour) stay outside the cell as outlines: they are not LED truth. */
  .cell[data-kind="lit"] { background: var(--c, var(--led-green)); box-shadow: inset 0 0 0 var(--rim-band) var(--c, var(--led-green)), inset 0 0 0 var(--rim-w) color-mix(in oklab, var(--c, var(--led-green)) 20%, var(--ink-950)); }
  .cell[data-kind="mark"] { background: var(--accent); box-shadow: inset 0 0 0 var(--rim-band) var(--accent), inset 0 0 0 var(--rim-w) var(--accent-fg); }
  .cell[data-mode="blink"] { animation: k-cell-blink var(--m-led) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  .cell[data-mode="slow"] { animation: k-cell-blink calc(var(--m-led) * 2) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  @keyframes k-cell-blink { 50% { background: var(--cell-bg); } }
  .cell[data-hit] { z-index: 2; outline: 2px solid var(--accent); outline-offset: 1px; }
  .cell[data-caution] { z-index: 3; outline: clamp(2px, calc(var(--cell) * .05), 3px) solid var(--warn-dot); outline-offset: 2px; }
  .cell[data-hello] { background: var(--led-amber); box-shadow: inset 0 0 0 1px var(--amber-700); transition: background 80ms linear; }
  /* Bay numbers inside the cells (strips and close-ups). */
  .rackmap--ids .cell[data-id]::after {
    content: attr(data-id); position: absolute; inset: 0; display: grid; place-items: center;
    font: 600 clamp(8px, calc(var(--cell-w) * .32), 19px)/1 var(--font-mono); color: var(--text-2); opacity: .85;
  }
  .rackmap--ids .cell[data-kind="occ"][data-id]::after { color: var(--cell-occ-ink); }
  .rackmap--ids .cell[data-kind="lit"][data-id]::after { color: var(--lit-ink); font-weight: 800; opacity: 1; }
  .rackmap--ids .cell[data-kind="mark"][data-id]::after { color: var(--accent-fg); opacity: 1; }

  /* Pick grid: one tab stop, arrows move (app.js), Enter/Space picks. */
  .rackmap[role="grid"] .cell { cursor: pointer; }
  .rackmap[role="grid"] .cell:focus-visible { z-index: 4; outline: 2px solid var(--focus); outline-offset: 2px; border-radius: clamp(1px, calc(var(--cell) * .16), 8px); }
  .rackmap[role="grid"] .cell[aria-selected="true"] { z-index: 3; outline: 2px solid var(--text); outline-offset: 1px; }

  /* Towers lie down: a slim capsule, lamps left to right in the physical top-to-bottom order (red yellow green blue
     white, or only the lamps the tower has), in a strip along the rack's top edge (--tt: one capsule plus one gap)
     at the tower's side; on a two-sided rack it sits in the face's Side row. Nothing protrudes. Thumb folds it to one
     dot (the lit lamp; a dim dot when off). Lamps, states and motion are shared with the stack light below. */
  .rackmap--has-tower:not(.rackmap--sides) { --tt: calc(var(--lamp) + 3px + var(--gap)); --ttl: var(--pad); }
  .rackmap__tower { position: absolute; z-index: 2; top: var(--pad); right: var(--pad); --lamp-gap: 1.5px; --lamp-pad: 1.5px 2px; }
  .rackmap__tower--l { left: var(--pad); right: auto; }

  /* Overlays: a permit or work zone, and locator lines through a bay. Positions come from the cell geometry. */
  .rackmap__zone {
    position: absolute; pointer-events: none; z-index: 5; border: 2px solid var(--accent); border-radius: 4px;
    left: calc(var(--pad) + var(--lblx) + var(--x, 0) * (var(--cell-w) + var(--gap)) + var(--xg, 0) * 2 * var(--gap) - 3px);
    top: calc(var(--pad) + var(--tt) + var(--zl) + var(--y, 0) * (var(--cell-h) + var(--gap)) - 3px);
    width: calc(var(--w, 1) * (var(--cell-w) + var(--gap)) - var(--gap) + var(--wg, 0) * 2 * var(--gap) + 6px);
    height: calc(var(--h, 1) * (var(--cell-h) + var(--gap)) - var(--gap) + 6px);
  }
  /* A labelled zone: the drawing reserves a strip above the cells (--zl) and the label sits in it, never over the
     tier above the zone. */
  .rackmap--zl { --zl: 22px; }
  .rackmap__zone > b { position: absolute; left: -2px; top: calc(4px + var(--ttl) - var(--pad) - var(--zl) - var(--y, 0) * (var(--cell-h) + var(--gap))); white-space: nowrap; padding: 1px 6px; border-radius: 3px; background: var(--sheet); box-shadow: 0 0 0 1px var(--accent); font: 600 var(--t-cap)/1.2 var(--font-ui); color: var(--accent-text); }
  .rackmap__cross { position: absolute; pointer-events: none; z-index: 1; background: color-mix(in oklab, var(--accent) 45%, transparent); }
  .rackmap__cross--h { left: 0; right: 0; height: 1px; top: calc(var(--pad) + var(--tt) + var(--zl) + var(--y, 0) * (var(--cell-h) + var(--gap)) + (var(--h, 1) * (var(--cell-h) + var(--gap)) - var(--gap)) / 2); }
  .rackmap__cross--v { top: var(--tt); bottom: 0; width: 1px; left: calc(var(--pad) + var(--lblx) + var(--x, 0) * (var(--cell-w) + var(--gap)) + var(--xg, 0) * 2 * var(--gap) + var(--cell-w) / 2); }
  .presence .rackmap__cross { background: color-mix(in oklab, var(--sky-300) 55%, transparent); }

  /* Rack legend: the same cells, lamps and marks, at 12 px, each with its word. */
  .rack-legend { --cell: 12px; --cell-w: 12px; --cell-h: 12px; --gap: 2px; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t-cap); color: var(--text-2); forced-color-adjust: none; }
  .rack-legend > * { display: inline-flex; align-items: center; gap: 6px; }
  .rack-legend > li > span[aria-hidden] { display: inline-flex; align-items: center; }
  .rack-legend :is(.rack-legend__zone, .rack-legend__cross) { display: inline-block; }
  .rack-legend .cell { flex: none; }
  .rack-legend .cell[data-caution] { margin: 0 3px; }
  .rack-legend .cell[data-swatch="tall"] { --cell-h: 12px; height: 26px; }
  .rack-legend .cell[data-swatch="stencil"] { width: 8px; height: 20px; }
  .rack-legend .rack-legend__zone { width: 16px; height: 12px; border: 2px solid var(--accent); border-radius: 3px; flex: none; }
  .rack-legend .rack-legend__cross { position: relative; width: 12px; height: 12px; flex: none; }
  .rack-legend .rack-legend__cross::before, .rack-legend .rack-legend__cross::after { content: ''; position: absolute; background: color-mix(in oklab, var(--accent) 60%, transparent); }
  .rack-legend .rack-legend__cross::before { left: 0; right: 0; top: 50%; height: 1px; }
  .rack-legend .rack-legend__cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }

  /* Rack figure: rack title + muted place + glyph. */
  .rackfig { display: grid; gap: var(--s2); justify-items: start; min-width: 0; }
  .rackfig > figcaption { font-size: var(--t-small); font-weight: 600; color: var(--text); }
  .rackfig__place { font-weight: 400; color: var(--text-2); }

  /* Rack card: a to-scale thumbnail with its name, place, status and numbers; a link to the rack. */
  .rackcard {
    display: grid; gap: var(--s3); align-content: start; min-width: 0; padding: var(--s4);
    border-radius: var(--r4); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    color: var(--text); text-decoration: none;
    transition: border-color var(--m-state) var(--e-standard), box-shadow var(--m-state) var(--e-standard);
  }
  a.rackcard:hover { border-color: var(--line-strong); text-decoration: none; }
  .rackcard[data-tone="warn"] { border-color: var(--warn-line); }
  .rackcard[data-tone="bad"] { border-color: var(--bad-line); }
  .rackcard[aria-current="true"] { border-color: var(--sel-ring); box-shadow: 0 0 0 1px var(--sel-ring), var(--shadow-1); background: var(--selected); }
  .rackcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; }
  .rackcard__t { font-weight: 650; font-size: var(--t-data); }
  .rackcard__place { display: block; font-size: var(--t-small); color: var(--text-2); font-weight: 400; }
  .rackcard__nums { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
  .rackcard__num { display: grid; line-height: 1.1; }
  .rackcard__num b { font: 450 var(--t-num)/1 var(--font-brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .rackcard__num span { font-size: var(--t-cap); color: var(--text-2); }

  /* Rack strip: one tier, a window of bays around the one that matters, big enough to count. */
  .rackstrip { display: grid; gap: var(--s2); min-width: 0; }
  .rackstrip__h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-lead); font-weight: 650; }
  .rackstrip__h span { font-size: var(--t-small); font-weight: 500; color: var(--text-2); }
  .rackstrip .rackmap { --pad: 8px; }

  /* Location lockup: glyph + address. */
  .loc { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
  .loc__addr { font: 600 var(--t-small) var(--font-mono); letter-spacing: -.01em; }
  .loc__addr i { font-style: normal; font-weight: 400; color: var(--text-3); }

  /* ═════════════ Stack light (a standalone tower), and the lamps of every tower ═════════════
     One glyph: a capsule the height of one lamp, lamps left to right = top to bottom on the device. */
  .stack-light { --lamp: 11px; --lamp-gap: 3px; --lamp-pad: 3px 4px; vertical-align: middle; }
  .stack-light--sm { --lamp: 7px; --lamp-gap: 2px; --lamp-pad: 2.5px 3px; }
  .stack-light--xs { --lamp: 5px; --lamp-gap: 1.5px; --lamp-pad: 1.5px 2px; }
  :is(.rackmap__tower, .stack-light) {
    display: inline-flex; flex: none; align-items: center; gap: var(--lamp-gap); padding: var(--lamp-pad);
    border-radius: 999px; background: var(--tower-bg); box-shadow: inset 0 0 0 1px var(--tower-ring);
    forced-color-adjust: none;
  }
  :is(.rackmap__tower, .stack-light) > i { flex: none; width: calc(var(--lamp) * 1.5); height: var(--lamp); border-radius: 999px; background: color-mix(in oklab, var(--c) 25%, var(--lamp-dim)); }
  .rackmap--thumb .rackmap__tower > i { width: var(--lamp); }
  .rackmap__tower > i:not([style]) { background: var(--lamp-dim); }
  /* Unknown: a dashed grey capsule, lamps empty. */
  :is(.rackmap__tower, .stack-light)[data-state="stale"] { background: transparent; box-shadow: none; outline: 1px dashed var(--text-3); outline-offset: -1px; }
  :is(.rackmap__tower, .stack-light)[data-state="stale"] > i { background: transparent; }

  /* Lit lamps (towers and stack lights) */
  :is(.rackmap__tower, .stack-light) > i[data-mode] { background: var(--c); }
  :is(.rackmap__tower, .stack-light) > i[data-mode="blink"] { animation: k-lamp var(--m-led) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  :is(.rackmap__tower, .stack-light) > i[data-mode="slow"] { animation: k-lamp calc(var(--m-led) * 2) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  @keyframes k-lamp { 50% { background: color-mix(in oklab, var(--c) 25%, var(--lamp-dim)); } }

  /* A domain lamp: the big bay-address LED and the sensor LED. Square, device colour, never re-tinted. */
  .bulb { display: inline-block; flex: none; width: var(--bulb, var(--led-lg)); height: var(--bulb, var(--led-lg)); border-radius: calc(var(--bulb, var(--led-lg)) * .22); background: var(--c, var(--led-green)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); forced-color-adjust: none; }
  .bulb[data-mode="off"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .bulb[data-mode="blink"] { animation: k-bulb var(--m-led) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  .bulb[data-mode="slow"] { animation: k-bulb calc(var(--m-led) * 2) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  @keyframes k-bulb { 50% { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); } }

  /* ═════════════ Covered-by bar ═════════════
     A quantity decomposed into its sources, in the order they can be used. One encoding:
     available = ok solid · reserved = accent solid · taken out = grey solid · waiting for review = accent outline ·
     being put in = light ok hatch (not final yet) · on the way = accent stripes · quarantine = amber stripes ·
     Unknown = grey hatch · short = red outline. The first source that closes the gap is outlined. */
  .cover { display: grid; gap: var(--s2); min-width: 0; }
  .cover__bar { position: relative; display: flex; gap: 2px; height: var(--bar-xl); border-radius: 3px; background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line); forced-color-adjust: none; }
  .cover__seg { flex: var(--q, 1) 0 0; min-width: 3px; height: 100%; }
  .cover__seg:first-child { border-radius: 3px 0 0 3px; }
  .cover__seg:last-child { border-radius: 0 3px 3px 0; }
  .cover__seg:only-child { border-radius: 3px; }
  .cover--dense .cover__legend { font-size: var(--t-cap); gap: 2px var(--s3); }
  /* Cover cell: one order item in the same encoding (24 px; sm 12 px). none = not checked yet; part = taken, then accent. */
  .cover__cell { display: inline-block; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r2); background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--text-3); forced-color-adjust: none; vertical-align: middle; }
  .cover__cell--sm { width: 12px; height: 12px; border-radius: 3px; }
  .cover__cell:not([data-kind="none"]) { box-shadow: none; }
  button.cover__cell { cursor: pointer; }
  @media (pointer: coarse) { button.cover__cell { width: 44px; height: 44px; } }
  .cover__cell[data-kind="part"] { background: linear-gradient(90deg, var(--fill-idle) 50%, var(--accent) 50%); box-shadow: none; }
  .cover__cell[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="available"] { background: var(--fill-ok); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="reserved"] { background: var(--accent); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="taken"] { background: var(--fill-idle); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="review"] { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="putin"] { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--fill-ok) 55%, transparent) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--fill-ok); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="transit"] { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 7px); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="quarantine"] { background: repeating-linear-gradient(90deg, var(--warn-dot) 0 2px, transparent 2px 5px); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="unknown"] { background: repeating-linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--cell-line); }
  :is(.cover__seg, .cover__key, .cover__cell)[data-kind="short"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bad-line); }
  .cover__seg[data-state="now"] { outline: 2px solid var(--accent); outline-offset: 2px; }
  .cover__tick { position: absolute; top: -5px; bottom: -5px; left: calc(var(--at, 100) * 1%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
  .cover__legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--text-2); }
  .cover__legend li { display: inline-flex; align-items: center; gap: var(--s2); }
  .cover__key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; flex: none; forced-color-adjust: none; }
  .cover__legend b { color: var(--text); font-variant-numeric: tabular-nums; }
  .cover__verdict { font-weight: 600; color: var(--text); }

  /* ═════════════ Evidence seam ═════════════
     Steps Janus decides are square, steps a sensor confirms are round. The last step closes the line once. */
  .seam { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); margin: 0; padding: var(--s5) 0 var(--s2); list-style: none; }
  .seam__node { position: relative; display: grid; align-content: start; gap: 4px; padding-right: var(--s3); font-size: var(--t-small); }
  .seam__node::before { content: ''; position: absolute; top: 5px; left: 12px; right: 0; height: 2px; background: var(--line-2); transition: background var(--m-seam-step) var(--e-standard); }
  .seam__node:last-child::before { display: none; }
  .seam__pip { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 3px; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--line-2); forced-color-adjust: none; }
  .seam__node[data-lane="floor"] .seam__pip { border-radius: 50%; }
  .seam__name { margin-top: var(--s2); font-weight: 650; color: var(--text-2); }
  .seam__who { font-size: var(--t-cap); color: var(--text-3); }
  .seam__t { font: 400 var(--t-cap) var(--font-mono); color: var(--text-3); }
  .seam__node[data-state="done"] .seam__pip { background: var(--ok-dot); box-shadow: none; }
  .seam__node[data-state="done"]::before { background: var(--ok-dot); }
  .seam__node:is([data-state="done"], [data-state="now"]) .seam__name { color: var(--text); }
  .seam__node[data-state="now"] .seam__pip { background: var(--sheet); box-shadow: inset 0 0 0 2px var(--accent); }
  .seam__node[data-state="now"][data-mode] .seam__pip { background: var(--c, var(--led-green)); box-shadow: none; }
  .seam__node[data-state="now"][data-mode="blink"] .seam__pip { animation: k-bulb var(--m-led) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  .seam__node[data-state="warn"] .seam__pip { background: var(--warn-dot); box-shadow: none; }
  .seam__node[data-state="warn"] .seam__name { color: var(--warn-fg); }
  .seam__node[data-state="warn"]::before { background: repeating-linear-gradient(90deg, var(--warn-dot) 0 6px, transparent 6px 10px); }
  .seam__node[data-tone="bad"] .seam__pip { background: var(--bad-dot); box-shadow: none; }
  .seam__node[data-tone="bad"] .seam__name { color: var(--bad-fg); }
  .seam__node:last-child[data-state="done"] .seam__pip { animation: k-seam-close var(--m-settle) var(--e-settle); }
  @keyframes k-seam-close { from { transform: scale(.6); } }
  .seam__lanes { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: var(--t-cap); color: var(--text-2); }
  .seam__lanes li { display: inline-flex; align-items: center; gap: 6px; }
  .seam__lanes i { width: 10px; height: 10px; border-radius: 2px; background: var(--ok-dot); }
  .seam__lanes li + li i { border-radius: 50%; }
  .seam__deadline { height: 2px; margin-top: var(--s2); border-radius: 2px; background: var(--line-soft); overflow: hidden; }
  .seam__deadline > i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: k-drain var(--ms, 8000ms) linear forwards; }
  /* Compact: five pips on one line, the caption carries the words (handheld, rows). */
  .seam--compact { align-items: center; height: 24px; padding: 0; }
  .seam--compact .seam__node { display: grid; place-items: center; height: 24px; padding: 0; }
  .seam--compact .seam__node::before { top: 50%; left: 50%; right: -50%; margin-top: -1px; }
  .seam--compact .seam__pip { width: 14px; height: 14px; box-shadow: inset 0 0 0 2px var(--cell-line); }
  .seam--compact .seam__node[data-state="now"] .seam__pip { background: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
  .seam--compact .seam__node[data-state="now"][data-mode] .seam__pip { background: var(--c); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
  .seam--compact .seam__node[data-state="warn"] .seam__pip { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--warn-dot); }
  .seam__cap { margin: var(--s1) 0 0; font-size: var(--t-small); color: var(--text-2); }
  .seam__cap b { color: var(--text); font-weight: 650; }
  @media (max-width: 900px) {
    .seam:not(.seam--compact) { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-left: var(--s1); }
    .seam:not(.seam--compact) .seam__node { grid-template-columns: 12px 1fr; column-gap: var(--s3); }
    .seam:not(.seam--compact) .seam__node > :not(.seam__pip) { grid-column: 2; }
    .seam:not(.seam--compact) .seam__name { margin-top: -3px; }
    .seam:not(.seam--compact) .seam__node::before { top: 14px; left: 5px; right: auto; width: 2px; height: calc(100% + var(--s1)); }
  }

  /* Phone modes: line = one sentence instead of the steps; focus = only the step that matters, with the same line. */
  .seam__line { display: none; margin: 0; font-size: var(--t-small); color: var(--text-2); }
  .seam__line b { color: var(--text); font-weight: 650; }
  @media (max-width: 560px) {
    .seam-block--line > :is(.seam, .seam__lanes) { display: none; }
    .seam-block--line > .seam__line { display: block; }
  }
  @media (max-width: 760px) {
    .seam-block--focus .seam:not(.seam--compact) { grid-template-columns: minmax(0, 1fr); }
    .seam-block--focus .seam__node:not([aria-current], [data-state="warn"], [data-tone="bad"]) { display: none; }
    .seam-block--focus .seam__node::before { display: none; }
    .seam-block--focus > .seam__lanes { display: none; }
    .seam-block--focus > .seam__line { display: block; }
  }

  /* Seam row: Record … Sensor … in one row. A divergent row bends amber. */
  .seamrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s1) var(--s2); align-items: baseline; padding: var(--s1) 0; font-size: var(--t-small); }
  .seamrow__k { font-size: var(--t-cap); font-weight: 650; color: var(--text-2); }
  .seamrow__v { min-width: 0; color: var(--text); }
  .seamrow[data-tone="warn"] { background: linear-gradient(90deg, var(--warn-surface), transparent 85%); }
  .seamrow[data-tone="warn"] .seamrow__v:last-child { color: var(--warn-fg); font-weight: 600; }
  @media (max-width: 560px) { .seamrow { grid-template-columns: auto minmax(0, 1fr); } }

  /* Twin: Record | seam | Sensor. Closed = a green line and stamp; open = dashed amber. */
  .twin { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; }
  .twin--framed { border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); }
  .twin__face { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); min-width: 0; }
  .twin__h { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-cap); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .twin__seam { position: relative; display: grid; place-items: center; }
  .twin__seam::before { content: ''; position: absolute; top: var(--s4); bottom: var(--s4); left: 50%; width: 2px; transform: translateX(-50%); border-radius: 2px; background: var(--ok-dot); }
  .twin__seam > span { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r3); background: var(--ok-dot); color: #fff; box-shadow: 0 0 0 4px var(--sheet); }
  .twin[data-state="warn"] .twin__seam::before { background: repeating-linear-gradient(180deg, var(--warn-dot) 0 7px, transparent 7px 12px); }
  .twin[data-state="warn"] .twin__seam > span { background: var(--warn-dot); color: #2b1c02; }
  /* Both seam glyphs are rendered; data-state picks one, so a script flips the twin with one attribute. */
  .twin:not([data-state="warn"]) .twin__split, .twin[data-state="warn"] .twin__agree { display: none; }
  @media (max-width: 900px) {
    .twin { grid-template-columns: minmax(0, 1fr); }
    .twin__seam { height: 48px; }
    .twin__seam::before { top: 0; bottom: 0; }
  }

  /* ═════════════ Time ═════════════ */
  /* Act-by: time to act, the lead-time zone before run-out (hatched: not final yet), a now marker. Late = data-tone=bad. */
  .actby { display: grid; gap: 4px; min-width: 160px; }
  .actby__t { font-size: var(--t-small); font-variant-numeric: tabular-nums; }
  .actby__t b { font-weight: 650; }
  .actby[data-tone="bad"] .actby__t b { color: var(--bad-fg); }
  .actby__bar { position: relative; height: var(--bar-md); border-radius: 3px; background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line); forced-color-adjust: none; }
  .actby__lead { position: absolute; top: 0; bottom: 0; left: calc(var(--act, 50) * 1%); right: 0; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--warn-dot) 35%, transparent) 0 3px, transparent 3px 6px); }
  .actby__now { position: absolute; top: -3px; bottom: -3px; left: calc(var(--now, 0) * 1%); width: 2px; background: var(--text); }
  [data-stale] .actby__t b { color: var(--text-3); }

  /* Countdown ring, driven by the real deadline. Amber at ≤ 25 % left (data-state=warn), held amber when over (done). */
  .countdown {
    --size: var(--cd-md); --ms: 8000ms;
    display: grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%;
    background: conic-gradient(var(--cd-c, var(--accent)) calc(var(--cd-p) * 1%), var(--line-soft) 0);
    animation: k-cd var(--ms) linear forwards; animation-delay: var(--cd-delay, 0ms); animation-play-state: var(--cd-play, running);
    forced-color-adjust: none;
  }
  .countdown--sm { --size: var(--cd-sm); }
  .countdown--lg { --size: var(--cd-lg); }
  .countdown[data-state="warn"] { --cd-c: var(--warn-dot); }
  .countdown[data-state="done"] { --cd-c: var(--warn-dot); --cd-p: 100; animation: none; }
  .countdown > span { display: grid; place-items: center; align-content: center; width: calc(var(--size) - 18px); height: calc(var(--size) - 18px); border-radius: 50%; background: var(--cd-bg, var(--sheet)); text-align: center; font-size: var(--t-cap); line-height: 1.2; color: var(--text-3); }
  .countdown b { display: block; font: 400 calc(var(--size) * .3)/1 var(--font-brand); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
  .countdown--sm > span { font-size: 11px; }
  /* Text form: "off by itself in 30 s" inline in a sentence. */
  .countdown--text { --size: auto; display: inline; width: auto; height: auto; border-radius: 0; background: none; animation: none; }
  .countdown--text > span { display: inline; width: auto; height: auto; background: none; font-size: inherit; color: inherit; }
  .countdown--text b { display: inline; font-family: var(--font-ui); font-size: inherit; font-weight: 600; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  @keyframes k-cd { from { --cd-p: 100; } to { --cd-p: 0; } }

  /* Drain: the linear bar version (a window closing, an auto-return, an offer expiring). */
  .drain { height: var(--bar-sm); border-radius: 2px; background: var(--line-soft); overflow: hidden; forced-color-adjust: none; }
  .drain > i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: k-drain var(--ms, 5000ms) linear forwards; animation-delay: var(--delay, 0ms); }
  .drain[data-tone] > i { background: var(--tone-dot); }
  @keyframes k-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

  /* Site clock: top (the bar) and hero (sign-in, lock screens). app.js ticks [data-clock]. */
  .siteclock { display: grid; justify-items: start; line-height: 1; }
  .siteclock__t { font: 450 26px/1 var(--font-brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
  .siteclock__s { font-size: 15px; letter-spacing: 0; color: var(--text-2); margin-left: 1px; }
  .siteclock__d { margin-top: 3px; font-size: var(--t-cap); color: var(--text-2); white-space: nowrap; }
  @media (max-width: 560px) { .siteclock--top .siteclock__t { font-size: 22px; } }
  .siteclock--hero .siteclock__t { font-size: clamp(var(--t-num-lg), 9vw, 128px); font-weight: 300; letter-spacing: -.05em; line-height: .9; }
  .siteclock--hero .siteclock__d { margin-top: var(--s3); font-size: var(--t-section); }

  /* ═════════════ Scan parts ═════════════ */
  /* The one scanner sweep: one speed everywhere, transform not top. */
  .scanline { position: relative; overflow: hidden; }
  .scanline::after { content: ''; position: absolute; left: 16%; right: 16%; top: 0; height: 2px; background: var(--accent); opacity: .85; animation: k-scan 1800ms ease-in-out infinite alternate; }
  @keyframes k-scan { from { transform: translateY(calc(var(--scan-h, 120px) * .3)); } to { transform: translateY(calc(var(--scan-h, 120px) * .7)); } }

  /* Scan prompt: "Scan a reel" with the sweeping glyph. */
  .scanprompt { --tile: var(--tile-xl); display: grid; justify-items: center; gap: var(--s3); text-align: center; color: var(--text); }
  .scanprompt--lg { --tile: 112px; }
  .scanprompt--row { display: flex; align-items: center; justify-items: start; gap: var(--s5); text-align: left; }
  .scanprompt__glyph { --scan-h: var(--tile); display: grid; place-items: center; flex: none; width: var(--tile); height: var(--tile); border-radius: var(--r5); background: var(--accent-soft); color: var(--accent-text); }
  .scanprompt__glyph > .i { width: 50%; height: 50%; stroke-width: 1.4; }
  .scanprompt__t { display: block; font-size: var(--t-section); font-weight: 650; line-height: 1.25; }
  .scanprompt__s { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--text-2); }
  button.scanprompt { width: 100%; padding: var(--s5); border-radius: var(--r5); border: 2px solid var(--accent); background: var(--sheet); font: inherit; cursor: pointer; }
  button.scanprompt:hover { background: var(--hover); }

  /* Code entry: "Type or paste a code" — a folded or open form with a mono field and one primary. */
  .codeentry > summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-md); padding: 0 var(--s4); border-radius: var(--r2); border: 1px solid var(--line-2); background: var(--sheet); color: var(--text); font-size: var(--t-small); font-weight: 600; cursor: pointer; list-style: none; }
  .codeentry > summary::-webkit-details-marker { display: none; }
  .codeentry > summary:hover { background: var(--hover); }
  .codeentry[open] > summary { margin-bottom: var(--s3); }
  .codeentry__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); max-width: 520px; }
  .codeentry__in { flex: 1 1 200px; min-width: 0; height: var(--codeentry-h, var(--h-md)); padding: 0 var(--s3); border-radius: var(--r2); border: 1px solid var(--line-2); background: var(--sheet); color: var(--text); font: 500 var(--t-data) var(--font-mono); letter-spacing: -.01em; }
  .codeentry__in:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .codeentry__in[aria-invalid="true"], .codeentry__in:user-invalid { box-shadow: inset 0 0 0 1.5px var(--bad-line); }
  .codeentry__go { display: inline-flex; align-items: center; gap: var(--s2); height: var(--codeentry-h, var(--h-md)); padding: 0 var(--s4); border: 0; border-radius: var(--r2); background: var(--accent); color: var(--accent-fg); font: 600 var(--t-data) var(--font-ui); cursor: pointer; }
  .codeentry__go:hover { background: var(--accent-hover); }
  .codeentry__err { flex-basis: 100%; margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--warn-fg); }
  .codeentry--lg { --codeentry-h: var(--h-lg); }
  .codeentry--lg .codeentry__in { font-size: var(--t-lead); }

  /* Bay address: the big address a person walks to, with its lamp. */
  .bayaddr { --bulb: .38em; display: inline-flex; align-items: center; gap: .22em; margin: 0; font: 450 clamp(48px, 6vw, 72px)/.95 var(--font-brand); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--text); }
  .bayaddr--sm { font-size: var(--t-num); letter-spacing: -.02em; }
  .bayaddr--md { font-size: clamp(40px, 5vw, 56px); }
  .bayaddr--hero { font-size: clamp(88px, 11.4vw, 168px); gap: var(--s5); }
  .bayaddr .bulb { border-radius: .09em; }
  .bayaddr--hero .bulb { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 48px 2px var(--c); }
  .bayaddr__where { display: block; font-size: var(--t-section); font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  .bayaddr__where span { font-weight: 500; color: var(--text-2); }

  /* Sensor line: the sensor decides, the screen says so in one sentence. */
  .sensorline { display: flex; align-items: center; gap: var(--s3); min-height: var(--h-md); }
  .sensorline__t { display: block; font-size: var(--t-section); font-weight: 650; line-height: 1.25; color: var(--text); }
  .sensorline__s { display: block; font-size: var(--t-small); color: var(--text-2); }
  .sensorline[data-state="seen"] .sensorline__t { color: var(--ok-fg); }
  .sensorline[data-state="warn"] .sensorline__t { color: var(--warn-fg); }

  /* Entity head: an id with its status and part line, the quantity to the right. */
  .entityhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; }
  .entityhead__main { display: grid; gap: 2px; min-width: 0; }
  .entityhead__id { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); font: 600 var(--t-title)/1.15 var(--font-mono); letter-spacing: -.03em; color: var(--text); overflow-wrap: anywhere; }
  .entityhead__sub { font-size: var(--t-small); color: var(--text-2); }
  .entityhead__qty { font: 450 var(--t-num)/1 var(--font-brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
  .entityhead__qty small { margin-left: 4px; font: 500 var(--t-small) var(--font-ui); letter-spacing: 0; color: var(--text-2); }
  .entityhead--sm .entityhead__id { font-size: var(--t-lead); }
  .entityhead--sm .entityhead__qty { font-size: var(--t-title); }

  /* Scan sheet body (the scan dialog and the station answer screens): id, facts, a sentence, the rack, the lit bay. */
  .scan { display: grid; gap: var(--s4); }
  .scan__id { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); font-size: var(--t-lead); font-weight: 600; }
  .scan__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
  .scan__facts > div { display: grid; gap: 2px; min-width: 0; }
  .scan__facts dt { font-size: var(--t-cap); color: var(--text-2); }
  .scan__facts dd { margin: 0; font-size: var(--t-data); overflow-wrap: anywhere; }
  .scan__rack { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r3); background: var(--sheet-sunk); }
  .scan__rack .rackmap { flex: none; }
  .scan__lit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3); border-radius: var(--r3); background: var(--warn-bg); font-size: var(--t-small); }
  .scan__lit > .led { flex: none; }
  .scan__lit > .grow { flex: 1; min-width: 12ch; }
  /* The scan sheet's stable lit-bay region (role=status, filled by innerHTML): takes no room while empty. */
  .scan__slot:empty { margin-top: calc(-1 * var(--s4)); }
  .scan-sheet__content { display: contents; }
  @media (max-width: 560px) { .scan__facts { grid-template-columns: 1fr 1fr; } }

  /* ═════════════ Station parts ═════════════
     Stations wear data-scale="station" on the frame: type, controls, icons, avatars and LEDs step up by token. */
  .stationframe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100dvh; min-width: 0; }
  /* Scan ack: an inset edge flash on the frame for a read (ok) and a rejected read (warn). kit.js ack(frame, tone). */
  .stationframe[data-ack]::after { content: ''; position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 4px var(--ok-dot); animation: k-ack 600ms var(--e-exit, ease-out) forwards; }
  .stationframe[data-ack="warn"]::after { box-shadow: inset 0 0 0 4px var(--warn-dot); }
  @keyframes k-ack { to { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .stationframe[data-ack]::after { animation-duration: 1ms; animation-delay: 400ms; } }
  html[data-motion="paused"] .stationframe[data-ack]::after { animation-duration: 1ms; animation-delay: 400ms; }
  .stationframe__head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s3); min-height: var(--h-xl); padding: var(--s2) var(--s4); background: var(--sheet); border-bottom: 1px solid var(--line); }
  .stationframe--inline { min-height: 0; border: 1px solid var(--line); border-radius: var(--r4); overflow: clip; }
  .stationframe--inline > :is(.stationframe__head, .stationframe__foot) { position: static; }
  .presence .stationframe__head { background: color-mix(in oklab, var(--navy-990) 70%, transparent); backdrop-filter: blur(6px); }
  .stationframe__main { container: station / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s4); min-width: 0; padding: var(--s4); }
  .stationframe__foot { position: sticky; bottom: 0; z-index: 30; display: grid; }
  /* A whole-screen frame holds its head and thumb bar in place and scrolls its main between them, so the foot never sits
     over the last row. On a short viewport (a landscape phone, 200 % zoom) the page scrolls instead, the bars stay sticky,
     and the page's scroll padding keeps a focused row clear of both. */
  @media (min-height: 560px) {
    .stationframe:not(.stationframe--inline) { height: 100dvh; }
    .stationframe:not(.stationframe--inline) > .stationframe__main { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--s4); }
  }
  html:has(.stationframe:not(.stationframe--inline)) { scroll-padding-top: calc(var(--h-xl) + var(--s4)); scroll-padding-bottom: calc(2 * var(--h-xl) + var(--s4)); }
  .stationframe__bar { display: grid; gap: var(--s2); padding: var(--s3); padding-block-end: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); background: var(--sheet); border-top: 1px solid var(--line); box-shadow: 0 -10px 20px -16px rgba(18, 32, 42, .35); }
  .presence .stationframe__bar { background: var(--navy-950); }

  /* Bottom nav: the places of a station (and the phone bar). The current place wears a top indicator. */
  .bottomnav { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); align-items: center; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--sheet); border-top: 1px solid var(--line); }
  .bottomnav__item { position: relative; display: grid; place-items: center; align-content: center; gap: var(--s1); min-height: var(--h-xl); padding: var(--s1); border: 0; background: transparent; color: var(--text-2); font: 600 var(--t-cap)/1.1 var(--font-ui); text-decoration: none; cursor: pointer; }
  .bottomnav__item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
  .bottomnav__item > .i { width: var(--icon-lg); height: var(--icon-lg); }
  .bottomnav__item[aria-current="page"] { color: var(--accent-text); }
  .bottomnav__item[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .bottomnav__item--scan > .bottomnav__disc { display: grid; place-items: center; width: var(--h-lg); height: var(--h-lg); border-radius: 50%; background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-2); }
  .bottomnav__item--scan > .bottomnav__disc > .i { width: var(--icon-lg); height: var(--icon-lg); }
  .bottomnav__n { position: absolute; top: 4px; left: 56%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn-dot); color: #1b1300; font: 700 11px/18px var(--font-ui); text-align: center; }

  /* Keypad: digits in a 3 × 4 grid, a function key either side of 0, an optional value box and step row. */
  .keypad { --key-h: 72px; display: grid; gap: var(--s3); width: min(420px, 100%); }
  .keypad--sm { --key-h: var(--h-xl); }
  .keypad--lg { --key-h: 80px; }
  .keypad__v { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); height: calc(var(--key-h) * 1.05); padding: 0 var(--s5); border-radius: var(--r4); background: var(--sheet-sunk); border: 1px solid var(--line-2); font: 450 calc(var(--key-h) * .56)/calc(var(--key-h) * 1.05) var(--font-brand); font-variant-numeric: tabular-nums; color: var(--text); }
  .keypad__v small { font: 500 var(--t-lead) var(--font-ui); color: var(--text-2); }
  .keypad__keys, .keypad__step { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
  .keypad__step { grid-template-columns: repeat(var(--n, 4), 1fr); }
  .keypad__key { display: grid; place-items: center; height: var(--key-h); border-radius: var(--r4); border: 1px solid var(--line); background: var(--sheet); color: var(--text); font: 450 calc(var(--key-h) * .42) var(--font-brand); cursor: pointer; transition: background var(--m-press) var(--e-standard); touch-action: manipulation; }
  .keypad__step .keypad__key { height: calc(var(--key-h) * .8); }
  /* A keypad never squeezes a key under a glove's target: four step keys fit side by side at --target-min. */
  [data-scale="station"] .keypad { min-inline-size: calc(4 * var(--target-min) + 3 * var(--s2)); }
  .keypad__key:hover { background: var(--hover); }
  .keypad__key:active { background: var(--selected); }
  .keypad__key[data-fn] { background: transparent; font: 600 var(--t-body) var(--font-ui); color: var(--text-2); }
  .keypad__key[data-fn] > .i { width: var(--icon-lg); height: var(--icon-lg); }
  .keypad__key:disabled { opacity: .35; cursor: not-allowed; }

  /* PIN dots: how many digits are in, never which. */
  .pindots { display: flex; align-items: center; justify-content: center; gap: var(--s3); height: 64px; border-radius: var(--r4); background: var(--sheet-sunk); border: 1px solid var(--line); forced-color-adjust: none; }
  .pindots > i { width: 16px; height: 16px; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 2px var(--line-2); transition: background var(--m-press) var(--e-standard); }
  .pindots > i[data-on] { background: var(--accent); box-shadow: none; }
  .pindots[data-tone="bad"] { border-color: var(--bad-line); }

  /* Result mark: the square that says how a task ended (ok, warn, bad). */
  .resultmark { --mark: 64px; display: grid; place-items: center; flex: none; width: var(--mark); height: var(--mark); border-radius: var(--r5); background: var(--ok-bg); color: var(--ok-fg); forced-color-adjust: none; }
  .resultmark[data-tone] { background: var(--tone-bg); color: var(--tone-fg); }
  .resultmark--lg { --mark: var(--tile-xl); }
  .resultmark > .i { width: 62%; height: 62%; stroke-width: 2; }

  /* ═════════════ Motion: a blink shown still is split corner to corner, its two phases side by side (lit / off);
     loops stop; information stays (WCAG 2.2.2). Dashed stays reserved for Unknown. The same split is the static form
     under reduced or paused motion, in print, and wherever a glyph asks for it (blinkStyle: 'split' → data-blink). */
  :is(html[data-motion="paused"], [data-blink="split"]) .cell:is([data-mode="blink"], [data-mode="slow"]) { animation: none; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), var(--cell-bg) calc(50% + .5px)); }
  :is(html[data-motion="paused"], [data-blink="split"]) :is(.rackmap__tower, .stack-light) > i:is([data-mode="blink"], [data-mode="slow"]) { animation: none; background: linear-gradient(to bottom right, var(--c) calc(50% - .5px), color-mix(in oklab, var(--c) 25%, var(--lamp-dim)) calc(50% + .5px)); }
  :is(html[data-motion="paused"], [data-blink="split"]) :is(.bulb:is([data-mode="blink"], [data-mode="slow"]), .seam__node[data-state="now"]:is([data-mode="blink"], [data-mode="slow"]) .seam__pip) { animation: none; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), transparent calc(50% + .5px)); box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); }
  @media (prefers-reduced-motion: reduce), print {
    .cell:is([data-mode="blink"], [data-mode="slow"]) { animation: none; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), var(--cell-bg) calc(50% + .5px)); }
    :is(.rackmap__tower, .stack-light) > i:is([data-mode="blink"], [data-mode="slow"]) { animation: none; background: linear-gradient(to bottom right, var(--c) calc(50% - .5px), color-mix(in oklab, var(--c) 25%, var(--lamp-dim)) calc(50% + .5px)); }
    :is(.bulb:is([data-mode="blink"], [data-mode="slow"]), .seam__node[data-state="now"]:is([data-mode="blink"], [data-mode="slow"]) .seam__pip) { animation: none; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), transparent calc(50% + .5px)); box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); }
    .scanline::after { animation: none; }
    .countdown { animation-timing-function: steps(var(--steps, 8)); }
    .drain > i, .seam__deadline > i { animation-timing-function: steps(var(--steps, 8)); }
  }
  html[data-motion="paused"] .scanline::after { animation: none; }
  html[data-motion="paused"] .countdown { animation-timing-function: steps(var(--steps, 8)); }
  html[data-motion="paused"] :is(.drain, .seam__deadline) > i { animation-timing-function: steps(var(--steps, 8)); }
  html[data-motion="paused"] .seam__node:last-child[data-state="done"] .seam__pip { animation: none; }

  /* ═════════════ Forced colours: drawings keep their own palette; selection and focus use system colours. ═════════════ */
  @media (forced-colors: active) {
    .rackmap, .rackmap__face { border-color: CanvasText; }
    .rackmap[role="grid"] .cell[aria-selected="true"] { outline-color: Highlight; }
    .rackmap[role="grid"] .cell:focus-visible { outline-color: Highlight; }
    .cover__bar, .actby__bar, .drain { outline: 1px solid CanvasText; }
    .cover__seg[data-state="now"] { outline-color: Highlight; }
    .rackcard[aria-current="true"] { outline: 2px solid Highlight; }
    .bottomnav__item[aria-current="page"]::before { background: Highlight; forced-color-adjust: none; }
    .keypad__key { border-color: ButtonText; }
    .pindots > i { box-shadow: inset 0 0 0 2px CanvasText; }
    .pindots > i[data-on] { background: CanvasText; }
    .seamrow[data-tone="warn"] { outline: 1px solid CanvasText; }
  }
}

/* ═════════════ Legacy: old modifier classes still written by unmigrated pages (rack.ts, cover.ts, page markup,
   page scripts). Each maps onto the attribute mechanism above. Deleted when rg finds no users. ═════════════ */

/* ── 08b-annotate.css ── */
/* Janus kit · rack notes (rackNotes()). The rack glyph as a status picture: a pin on each bay or tower lamp that means
   something, the words behind it in a hint, and the light language behind a "?" under the drawing's end.
   Pins sit on their bay by anchor positioning: the glyph marks the bay (data-note="1…6"), the pin anchors to it, so
   the drawing keeps its one geometry. The pin is neutral (it points, it is not a light); a pin that is yours to act
   on wears the action ring. Without anchor positioning the pins line up under the drawing. */
@layer domain {
  .racknotes { --pin-room: 40px; display: grid; gap: var(--s2); min-width: 0; }
  .racknotes__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--target-min); }
  .racknotes__cap { min-width: 0; font-size: var(--t-small); color: var(--text-2); }
  .racknotes__key {
    flex: none; display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); min-width: var(--target-min); min-height: var(--target-min);
    padding: 0; border: 1px solid var(--btn-line, var(--line-2)); border-radius: 50%; background: transparent; color: var(--text-2); cursor: help;
  }
  .racknotes__key:hover { background: var(--hover); color: var(--text); }
  .racknotes__legend { position-area: block-start span-inline-start; position-try-fallbacks: flip-block; margin-bottom: 6px; width: min(420px, calc(100vw - 24px)); padding: var(--s3) var(--s4); }

  /* The drawing and its pins share one box; the pins are laid out by their anchors. */
  .racknotes__draw {
    position: relative; min-width: 0;
    anchor-scope: --rn1, --rn2, --rn3, --rn4, --rn5, --rn6, --rn-tl, --rn-tr, --rn-rack;
    /* A band above the top tier for the pins there and the towers' pins. */
    padding-top: var(--pin-room);
  }
  .racknotes .cell[data-note="1"] { anchor-name: --rn1; }
  .racknotes .cell[data-note="2"] { anchor-name: --rn2; }
  .racknotes .cell[data-note="3"] { anchor-name: --rn3; }
  .racknotes .cell[data-note="4"] { anchor-name: --rn4; }
  .racknotes .cell[data-note="5"] { anchor-name: --rn5; }
  .racknotes .cell[data-note="6"] { anchor-name: --rn6; }
  /* A tower pin points at the lit lamp (the last anchor of a name wins); an unlit or Unknown tower, at the tower. */
  .racknotes .rackmap__tower--l, .racknotes .rackmap__tower--l > i[data-mode] { anchor-name: --rn-tl; }
  .racknotes .rackmap__tower:not(.rackmap__tower--l), .racknotes .rackmap__tower:not(.rackmap__tower--l) > i[data-mode] { anchor-name: --rn-tr; }

  .racknotes__pins { display: contents; }
  .racknote {
    --pin: 32px; --pin-ring: var(--line-strong, var(--line-2)); --pin-bg: var(--sheet); --pin-fg: var(--text);
    position: absolute; z-index: 6; display: grid; place-items: end center;
    width: var(--target-min); height: calc(var(--pin) + 10px); min-height: var(--target-min); margin: 0; padding: 0;
    border: 0; background: none; color: var(--pin-fg); cursor: pointer;
    position-area: block-start center; margin-bottom: 1px;
  }
  .racknote[data-at="1"] { position-anchor: --rn1; }
  .racknote[data-at="2"] { position-anchor: --rn2; }
  .racknote[data-at="3"] { position-anchor: --rn3; }
  .racknote[data-at="4"] { position-anchor: --rn4; }
  .racknote[data-at="5"] { position-anchor: --rn5; }
  .racknote[data-at="6"] { position-anchor: --rn6; }
  .racknote[data-at="tl"] { position-anchor: --rn-tl; }
  /* Bay pins never cover a bay: the disc sits in the band above the drawing, over its bay's column, and a thin leader
     runs down to the bay (the target stays the disc's column, invisible). */
  .racknotes .rackmap { anchor-name: --rn-rack; }
  .racknote:is([data-at="1"], [data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]) {
    position-area: none; margin: 0; height: auto; min-height: 0; place-items: start center;
    top: calc(anchor(--rn-rack top) - var(--pin) - 6px); bottom: calc(anchor(top) + 1px); left: calc(anchor(center) - var(--target-min) / 2);
  }
  [data-scale="station"] .racknote:is([data-at="1"], [data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]) { left: calc(anchor(center) - var(--h-md) / 2); height: auto; min-height: var(--target-min); }
  .racknote:is([data-at="1"], [data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]) .racknote__pin { margin: 0; }
  .racknote:is([data-at="1"], [data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"]) .racknote__pin::after { display: none; }
  .racknote:is([data-at="1"], [data-at="2"], [data-at="3"], [data-at="4"], [data-at="5"], [data-at="6"])::after {
    content: ''; position: absolute; z-index: -1; left: 50%; top: calc(var(--pin) - 2px); bottom: 0; width: 2px; margin-left: -1px;
    background: var(--pin-ring); box-shadow: 0 0 0 1px color-mix(in oklab, var(--sheet-sunk, #000) 70%, transparent);
  }
  .racknote[data-at="tr"] { position-anchor: --rn-tr; }
  /* The pin: a disc with a short stem to its bay. Initials are the person it belongs to; an icon when nobody. */
  .racknote__pin {
    position: relative; display: grid; place-items: center; width: var(--pin); height: var(--pin); margin-bottom: 8px;
    border-radius: 50%; background: var(--pin-bg); color: var(--pin-fg);
    box-shadow: 0 0 0 2px var(--pin-ring), 0 4px 10px -4px rgba(0, 0, 0, .45);
    font: 700 13px/1 var(--font-ui); letter-spacing: .02em;
    transition: transform var(--m-state) var(--e-standard);
  }
  .racknote__pin::after {
    content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 8px; margin-left: -1px; background: var(--pin-ring);
  }
  .presence .racknote { --pin-bg: var(--navy-950); }
  .racknote[data-mine] { --pin-ring: var(--accent); --pin-bg: var(--accent); --pin-fg: var(--accent-fg); }
  .racknote:hover .racknote__pin, .racknote:focus-visible .racknote__pin, .racknote:has(+ .racknote__tip:popover-open) .racknote__pin { transform: translateY(-2px); }
  .racknote { border-radius: calc(var(--target-min) / 2); }
  .racknote:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .racknote__tip { max-width: min(340px, calc(100vw - 24px)); font-size: var(--t-data); }
  .racknote__tip b { font-weight: 650; }

  /* Station: glove targets (56 px) around a 36 px pin; the target is invisible, so it may overlap its neighbours. */
  [data-scale="station"] .racknote { --pin: 36px; width: var(--h-md); height: var(--h-md); }
  [data-scale="station"] .racknotes__key { width: var(--h-md); height: var(--h-md); }
  [data-scale="station"] .racknote__pin { font-size: 14px; }
  /* Phones: the drawing is small, the pins shrink with it (their target stays). */
  /* The tower pins fold away there (their lamps sit close to the corner bays' pins); the glyph's label still names the towers. */
  @media (max-width: 560px) { .racknote:is([data-at="tl"], [data-at="tr"]) { display: none; } .racknotes { --pin-room: 30px; } .racknote, [data-scale="station"] .racknote { --pin: 26px; } .racknote__pin, [data-scale="station"] .racknote__pin { font-size: 11px; margin-bottom: 5px; } .racknote__pin::after { height: 5px; } }

  /* No anchor positioning: the pins line up under the drawing, each still opening its words. */
  @supports not (anchor-name: --a) {
    .racknotes__pins { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s2); }
    .racknotes { --pin-room: 0px; }
    .racknote { position: static; height: auto; }
    .racknote__pin { margin: 0; }
    .racknote__pin::after { display: none; }
  }

  @media (forced-colors: active) { .racknote__pin { border: 2px solid CanvasText; } }
}

/* ── 08c-station.css ── */
/* Janus kit · station extensions: the thumb bar (thumbBar()) and glove-sized menus (menu({ size: 'station' })).
   One order on every task screen: Back · what the floor is doing now · (More) the one primary. */
@layer domain {
  .thumbbar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back status end";
    align-items: center; gap: var(--s3) var(--s5); min-height: var(--h-xl);
  }
  .thumbbar[hidden] { display: none; }
  /* A screen with no thumb bar (a station home) leaves no empty band at the bottom. */
  .stationframe__bar:not(:has(> :not([hidden]))) { display: none; }
  .thumbbar__back { grid-area: back; display: flex; align-items: center; gap: var(--s2); }
  .thumbbar__status { grid-area: status; display: flex; align-items: center; gap: var(--s3) var(--s5); min-width: 0; }
  .thumbbar__status > * { min-width: 0; }
  .thumbbar__end { grid-area: end; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); flex-wrap: wrap; }
  .thumbbar__back:empty, .thumbbar__end:empty { display: none; }
  /* A narrow frame: the live status reads first on its own row; Back and the end buttons share the rows under it,
     wrapping (the primary stays last) rather than squeezing. */
  @media (max-width: 720px) {
    .thumbbar { display: flex; flex-wrap: wrap; }
    .thumbbar__status { flex: 1 1 100%; order: -1; }
    .thumbbar__status:empty { display: none; }
    .thumbbar__back { flex: 0 1 auto; }
    .thumbbar { gap: var(--s2) var(--s3); }
    .thumbbar__end { flex: 1 1 auto; gap: var(--s2); }
  }
}

/* The compact seam at the station scale: pips a glove-reader can count, spaced along a fixed track. */
@layer domain {
  [data-scale="station"] .seam--compact { width: calc(var(--n, 5) * 40px); height: 28px; }
  [data-scale="station"] .seam--compact .seam__node { height: 28px; }
  [data-scale="station"] .seam--compact .seam__pip { width: 16px; height: 16px; }
}

/* The station ladder (NFR-E2): every control a glove presses is ≥ 56 px both ways (--target-min), every primary ≥ 64
   (--target-primary). Tokens carry most of it (--h-sm, --h-md, --target-min step up); these are the kit controls whose
   height is not a control token. A primary lifts the buttons beside it to its height, so a row stays even. */
@layer blocks {
  [data-scale="station"] :is(.disclosure--compact, .disclosure--button) > summary { min-height: var(--h-md); }
}
@layer forms {
  [data-scale="station"] .seg { --seg-h: var(--h-md); }
  [data-scale="station"] .toggles label { min-width: var(--target-min); height: var(--h-md); }
}
@layer primitives {
  [data-scale="station"] .iconbtn { --ib: var(--h-md); }
  [data-scale="station"] .iconbtn--xl { --ib: var(--h-lg); }
  [data-scale="station"] .btn { min-height: var(--target-min); }
  [data-scale="station"] :is(.btn--primary, :has(> .btn--primary) > .btn) { min-height: var(--target-primary); }
  [data-scale="station"] .btn--primary { min-width: var(--target-primary); }
}

@layer overlays {
  /* Station menus: items at the station control height, the sub line under the label, and room to open above a
     thumb bar. */
  .menu--station { width: min(400px, calc(100vw - 24px)); padding: var(--s2); position-try-fallbacks: flip-block, flip-inline; }
  .menu--station .menu-item { height: auto; min-height: var(--h-lg); gap: var(--s4); padding: var(--s2) var(--s4); font-size: var(--t-data); font-weight: 500; }
  .menu--station .menu-item__t { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .menu--station .menu-item .sub { margin-left: 0; font-size: var(--t-small); font-weight: 400; color: var(--text-2); }
  .menu--station .menu__head { padding: var(--s2) var(--s3) var(--s3); }
  .menu--station .menu-item__state { margin-left: auto; }
}

/* The connection row above a station's thumb bar (netState()): absent while live and nothing waits. "Offline · 2
   waiting to send" (bad), "Reconnecting…" (warn), "Sending 2…" (info), "Sent · 2 records · 14:36" (ok). Its button
   opens the outbox sheet (outboxSheet()): what is kept, then what waits for the network and why (.netq). */
@layer domain {
  .netstate {
    --tone-fg: var(--idle-fg); --tone-dot: var(--idle-dot); --tone-surface: var(--sheet); --tone-line: var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: var(--h-md); padding: var(--s2) var(--s4);
    background: var(--tone-surface); border-top: 1px solid var(--tone-line); color: var(--tone-fg); font-size: var(--t-data); font-weight: 650;
  }
  .presence .netstate { background: color-mix(in oklab, var(--navy-990) 86%, var(--tone-dot)); }
  .netstate[hidden] { display: none; }
  .netstate__dot { width: 10px; height: 10px; border-radius: 2px; background: var(--tone-dot); flex: none; }
  .netstate__t { flex: 1 1 12ch; min-width: 0; }
  .netq { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
  .netq__item { display: grid; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .netq__t { font-weight: 600; }
  .netq__s { color: var(--text-2); font-size: var(--t-small); }
}
/* A station's home (stationHome(), DESIGN.md › What shows when, the station budget): the rack is the status, then the
   one thing yours now, the folds and the one start tile, in that order. From 900 px of its own width the rack takes the
   left and the rest stacks beside it, so the focus and the start tile are in the first viewport of the reference kiosk. */
@layer domain {
  .shome { container: shome / inline-size; min-width: 0; }
  .shome__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "rack" "focus" "folds" "start"; gap: var(--s4); align-items: start; }
  .shome__rack { grid-area: rack; display: grid; gap: var(--s3); min-width: 0; }
  .shome__focus { grid-area: focus; min-width: 0; }
  .shome__folds { grid-area: folds; display: grid; min-width: 0; }
  .shome__folds > .disclosure + .disclosure { border-top: 1px solid var(--line); }
  .shome__start { grid-area: start; display: grid; gap: var(--s3); min-width: 0; }
  .shome__starth { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
  @container shome (min-width: 900px) {
    .shome__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; grid-template-areas: "rack focus" "rack folds" "rack start"; gap: var(--s4) var(--s8); }
    .shome__start { align-self: end; }
  }
}

/* ── 08d-evidence.css ── */
/* Janus kit · evidence marks on the rack glyph (rackGlyph spec keys presumed=, awaiting=, read=; rackLegend keys
   'presumed', 'awaiting'). They sit on top of what a cell already says (its kind, its light) and never replace it:
   - Presumed (Neo glossary §3): the record has a reel here and the bay read Present after an unobserved interval, but
     nobody re-confirmed which reel. A square corner tick (square = Janus decided, here by the reconnect comparison),
     top right, in the info ink (≥ 3:1 on an occupied cell, day and night): not a fault, not a light. It clears on a scan and a newer Present, a check or a Count.
   - Awaiting (Pending confirmation, 0031 §1): a take-out was scanned while the bay was not reporting. The cell stays
     dashed (Unknown), with an open round pip in its middle: the sensor's word the seam still waits for (round = floor
     observed, open = not yet). The settled read closes it (Confirmed) or bends it amber (Refuted, review).
   - Read (the settled read, board by board): a bay that was Unknown goes from dashed to what it holds. The motion
     explains the rack catching up; each board waits its turn (--board, set by the page: 0, 1, 2 …, one --m-settle
     per board, never less than 280 ms). Reduced motion: --m-settle is 0, the cells simply show what they hold. */
@layer domain {
  .cell[data-presumed]::after {
    content: ""; position: absolute; top: 0; right: 0;
    width: clamp(4px, calc(min(var(--cell-w, var(--cell)), var(--cell-h, var(--cell))) * .5), 12px); aspect-ratio: 1;
    background: var(--info-fg, var(--text)); clip-path: polygon(0 0, 100% 0, 100% 100%); pointer-events: none;
  }
  .cell[data-awaiting]::before {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: clamp(3px, calc(min(var(--cell-w, var(--cell)), var(--cell-h, var(--cell))) * .5), 14px); aspect-ratio: 1;
    border: clamp(1px, calc(var(--cell) * .08), 2px) solid var(--text-2); border-radius: 50%; background: transparent; pointer-events: none;
  }
  .cell[data-read] { animation: k-cell-read max(280ms, var(--m-settle)) var(--ease-out, ease-out) both; animation-delay: calc(var(--board, 0) * max(280ms, var(--m-settle))); }
  @keyframes k-cell-read {
    from { background: transparent; box-shadow: none; outline: 1.5px dashed var(--cell-line); outline-offset: -1.5px; }
    to { outline-color: transparent; }
  }
  @media (prefers-reduced-motion: reduce) { .cell[data-read] { animation: none; } }
  html[data-motion="paused"] .cell[data-read] { animation: none; }
  @media (forced-colors: active) {
    .cell[data-presumed]::after { background: CanvasText; }
    .cell[data-awaiting]::before { border-color: CanvasText; }
  }
}
/* The open seam (seamRow({ open: true })): the sensor's side has not answered. Its words sit in a dashed, unfilled
   frame (dashed = Unknown, the pattern language's one meaning of a dashed grey line) until the settled read closes it. */
@layer domain {
  .seamrow[data-state="open"] > .seamrow__v:last-child { padding: 0 var(--s2); border: 1.5px dashed var(--dash-unknown-line, var(--line-2)); border-radius: var(--r1, 4px); color: var(--text-2); }
}
/* The removal watch (removalWatch(), B6): an unexpected removal counting down to the Missing delay, then Missing in the
   system's own voice. The bay address leads (read at a glance, at station scale too); the drain is the one moving part
   and it moves because time passes on the floor (reduced or paused motion: it steps, like every drain). The square pip is
   the pattern language's "Janus decided". Open wears the bad tone's rule; booked the warn tone's, and the bay dims:
   the light went dark. */
@layer domain {
  .rwatch { container: rwatch / inline-size; padding: var(--s3) var(--s4);
    border: 1px solid var(--line); border-left: 4px solid var(--tone-dot, var(--line-2)); border-radius: var(--r3, 8px); background: var(--sheet); }
  .rwatch__in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s4); }
  /* Stacked under 560 px of card: the bay over the words, so the words keep their width. */
  @container rwatch (max-width: 560px) { .rwatch__in { grid-template-columns: minmax(0, 1fr); align-items: start; } }
  .rwatch__bay { font-family: var(--font-brand); font-size: var(--t-title); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  [data-scale="station"] .rwatch__bay { font-size: var(--t-step); }
  .rwatch__body { display: grid; gap: var(--s1); min-width: 0; }
  .rwatch__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
  .rwatch__by { display: inline-flex; align-items: baseline; gap: var(--s2); color: var(--text-2); font-size: var(--t-small); }
  .rwatch__pip { flex: none; width: .6em; height: .6em; background: var(--text-2); align-self: center; }
  /* Booked: done collapses to one receipt line (a disclosure) that opens the last bay, the delay and the entry. */
  .rwatch--line { padding: 0 var(--s4); }
  .rwatch__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-height: var(--target-min); padding-block: var(--s1); list-style: none; cursor: pointer; }
  .rwatch__line::-webkit-details-marker { display: none; }
  .rwatch__line::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 1.75px solid var(--text-3); border-bottom: 1.75px solid var(--text-3); transform: rotate(45deg); }
  .rwatch--line[open] > .rwatch__line::after { transform: rotate(-135deg); }
  .rwatch__facts { display: grid; gap: var(--s1); margin: 0 0 var(--s3); font-size: var(--t-small); color: var(--text-2); }
  .rwatch__facts > div { display: flex; gap: var(--s2); }
  .rwatch__facts dt { min-width: 7rem; color: var(--text-3); }
  .rwatch__facts dd { margin: 0; }
  .rwatch .drain { margin-top: var(--s1); }
  @starting-style { .rwatch[data-state="booked"] { opacity: .4; } }
  .rwatch[data-state="booked"] { transition: opacity var(--m-settle, 480ms) var(--e-settle, ease-out); }
  @media (prefers-reduced-motion: reduce) { .rwatch[data-state="booked"] { transition: none; } }
  @media (forced-colors: active) { .rwatch { border-left-color: CanvasText; } .rwatch__pip { background: CanvasText; } }
}
/* A person's decision on the seam (B10, manual operation: no sensor, the person confirms the bay): the square pip grows
   to carry their initials. Square = decided; the initials say who decided, on a tier the sensor can't read. */
@layer domain {
  .seam__node[data-state] .seam__pip[data-ini], .seam__pip[data-ini] { display: grid; place-items: center; width: auto; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--sheet); background: var(--text); box-shadow: none; }
  [data-scale="station"] .seam__node .seam__pip[data-ini] { min-width: 28px; height: 28px; font-size: 12px; }
  @media (forced-colors: active) { .seam__pip[data-ini] { color: Canvas; background: CanvasText; } }
}

/* ── 08e-count.css ── */
/* Janus kit · the Count's identity check (Neo decisions/0039; journeys/stock-count.md §3). A checked Count line wears a
   tick on its bay: the cell is decided only once the sensor saw the reel back (the Present, newer than the scan), so the
   tick lands on the Present, never on the scan, and settles once (--m-settle, the settle spring; under reduced motion
   --m-settle is 0 and the tick simply appears). The tick is a shape, not a colour: it reads in forced colours and in
   black and white. countProgress() (app/kit/domain/count.ts) is the identity-check progress: its bar, its words. */
@layer domain {
  .cell[data-tick]::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: clamp(4px, 40%, 12px); aspect-ratio: 2 / 1; min-height: 2px;
    border: solid var(--ok-fg); border-width: 0 0 clamp(1.5px, calc(var(--cell) * .09), 3px) clamp(1.5px, calc(var(--cell) * .09), 3px);
    transform: translate(-50%, -70%) rotate(-45deg); pointer-events: none;
  }
  .cell[data-tick].is-settled::before { animation: k-tick-land var(--m-settle) var(--e-settle) both; }
  @keyframes k-tick-land { from { opacity: 0; transform: translate(-50%, -70%) rotate(-45deg) scale(.3); } }
  .rackmap--ids .cell[data-tick][data-id]::after { opacity: 0; }

  .cntprog { display: grid; gap: var(--s2); min-width: 0; }
  .cntprog__w { margin: 0; font-size: var(--t-small); color: var(--text-2); overflow-wrap: anywhere; }
  .cntprog__w b { color: var(--text); font-weight: 600; }
  [data-scale="station"] .cntprog__w { font-size: var(--t-body); }

  @media (forced-colors: active) { .cell[data-tick]::before { border-color: CanvasText; } }
}

/* ── 08f-lastacts.css ── */
/* Janus kit · the last actions (lastActions(), app/kit/domain/station.ts): what a station sent, or could not, and what
   became of each write (Neo architecture/system-structure.md §6.5). One row per write: its words, one stamp, when. It
   reads on the stop veil's navy ground and on a sheet alike (its lines take the text colour). An Outcome unknown stamp
   that settles into Recorded or Not recorded settles once (data-settled), at --m-enter; under reduced or paused motion
   the new stamp just shows. */
@layer domain {
  .lastacts { display: grid; gap: var(--s2); min-width: 0; }
  .lastacts__h { margin: 0; font-size: var(--t-small); font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
  .lastacts__l { list-style: none; margin: 0; padding: 0; display: grid; }
  .lastacts__i {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--s3); min-width: 0;
    padding: var(--s2) 0; border-top: 1px solid color-mix(in oklab, currentColor 18%, transparent);
  }
  .lastacts__t { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
  .lastacts__s { grid-column: 1 / -1; margin: 0; color: var(--text-2); font-size: var(--t-small); }
  .lastacts__i[data-settled] > .st { animation: lastacts-settle var(--m-enter) var(--e-enter) both; }
  @keyframes lastacts-settle { from { opacity: 0; translate: 0 3px; } }
  @media (prefers-reduced-motion: reduce) { .lastacts__i[data-settled] > .st { animation: none; } }
  html[data-motion="paused"] .lastacts__i[data-settled] > .st { animation: none; }
  /* On the veil: the words sit under the stop signal at reading size, left-aligned in their column. */
  .livestate--veil .lastacts { width: 100%; text-align: start; font-size: var(--t-data); }
}

/* ── 08g-commission.css ── */
/* Janus kit · commissioning (app/kit/domain/commission.ts): follow the light, and the manual-operation mark.
   Follow the light (Neo J06 steps 10–11, 0032 §14) is the rack answering, bay by bay. Each sampled bay is a two-pip
   seam: the square pip is Janus lighting the bay (it blinks the bay's LED colour while lit), the round pip is the
   sensor. When the reel goes in at the lit bay the green line draws from the square to the round pip (--m-seam-step)
   and the round pip settles closed on the settle spring: the seam closing, once, as the live row changes state (a
   transition, so a page loaded with bays already followed shows them closed, with no replay). A bay that did not
   follow leaves the line broken amber and the round pip an open amber ring (an unclosed seam, never a dashed outline:
   dashed is Unknown only). A board in manual operation (0033 §6, 0035 §4) has no sensor check: its round pip becomes a
   square with a solid inner border, the same mark its bays carry on the rack glyph.
   Reduced motion: the tokens are 0, so the line and the pip change at once; a lit pip is drawn split corner to corner
   (lit / off) instead of blinking, as every lamp is. Paused motion (html[data-motion=paused]) does the same. */
@layer domain {
  .ftl { container-type: inline-size; display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
  .ftl__board { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--sheet); }
  .ftl__board[data-state="warn"] { border-color: var(--warn-line); box-shadow: inset 3px 0 0 var(--warn-dot); }
  .ftl__board[data-state="manual"] { box-shadow: inset 3px 0 0 var(--text-2); }
  .ftl__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); margin: 0; font-size: var(--t-small); }
  .ftl__title { font-weight: 600; color: var(--text); }
  .ftl__samples { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .ftl__s { display: grid; grid-template-columns: 48px 11.5rem minmax(0, 1fr) 28px; align-items: center; column-gap: var(--s3); min-height: 36px; margin: 0 calc(var(--s2) * -1); padding: 2px var(--s2); border-radius: var(--r2); font-size: var(--t-small); color: var(--text-2); }
  .ftl__s[data-state="lit"] { background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--line); }
  .ftl__s[data-state="todo"] { color: var(--text-3); }
  .ftl__bay { display: grid; line-height: 1.25; }
  .ftl__bay .mono { font-weight: 600; color: var(--text); }
  .ftl__s[data-state="todo"] .ftl__bay .mono { color: var(--text-2); font-weight: 500; }
  .ftl__why { font-size: var(--t-micro); color: var(--text-3); }
  .ftl__said { min-width: 0; }
  .ftl__said b { font-weight: 600; color: var(--text); }
  .ftl__s[data-state="miss"] .ftl__said b { color: var(--warn-fg); }
  .ftl__who { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); white-space: nowrap; }
  /* A board that followed folds to its bays and times: its why-lines are said once, while it is being lit. */
  .ftl__board[data-state="done"] .ftl__why { display: none; }
  .ftl__board[data-state="done"] .ftl__s { min-height: 28px; }
  /* collapse: 'done' — the boards that followed rest as one receipt line, first (open work below it). */
  .ftl__done { padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--sheet); }
  .ftl__fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-height: var(--target-min); list-style: none; cursor: pointer; font-size: var(--t-small); }
  .ftl__fold > summary::-webkit-details-marker { display: none; }
  .ftl__fold > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 1.75px solid var(--text-3); border-bottom: 1.75px solid var(--text-3); transform: rotate(45deg); }
  .ftl__fold[open] > summary::after { transform: rotate(-135deg); }
  .ftl__foldn { color: var(--text-2); }
  .ftl--done { padding-bottom: var(--s3); }
  .ftl__note { padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--t-small); }

  /* The two-pip seam: a grey line, the green line drawn over it when the sensor answers. */
  .ftl__seam { position: relative; display: flex; align-items: center; justify-content: space-between; width: 48px; height: 16px; }
  .ftl__seam::before, .ftl__seam::after { content: ""; position: absolute; top: 50%; left: 7px; right: 7px; height: 2px; margin-top: -1px; }
  .ftl__seam::before { background: var(--line-2); }
  .ftl__seam::after { background: var(--ok-dot); transform: scaleX(0); transform-origin: left center; transition: transform var(--m-seam-step) var(--e-standard); }
  .ftl__pip { position: relative; z-index: 1; display: block; width: 14px; height: 14px; border-radius: 3px; background: var(--sheet); box-shadow: inset 0 0 0 2px var(--line-2); forced-color-adjust: none;
    transition: background-color var(--m-seam-step) var(--e-standard), box-shadow var(--m-seam-step) var(--e-standard), transform var(--m-settle) var(--e-settle); }
  .ftl__pip[data-lane="floor"] { border-radius: 50%; }

  /* Lit: the square pip is the bay's lamp, blinking on the hardware's phase; the round pip waits, small, ringed. */
  .ftl__s[data-state="lit"] .ftl__pip[data-lane="system"] { background: var(--c, var(--led-green)); box-shadow: none; animation: k-bulb var(--m-led) steps(1, jump-end) infinite; animation-delay: var(--led-delay, 0ms); }
  .ftl__s[data-state="lit"] .ftl__pip[data-lane="floor"] { transform: scale(.72); box-shadow: inset 0 0 0 2px var(--accent); }

  /* Seen: Janus's step is done, the line draws, then the sensor's pip closes the seam on the settle spring. */
  .ftl__s:is([data-state="seen"], [data-state="miss"], [data-state="manual"]) .ftl__pip[data-lane="system"] { background: var(--ok-dot); box-shadow: none; }
  .ftl__s[data-state="seen"] .ftl__seam::after { transform: scaleX(1); }
  .ftl__s[data-state="seen"] .ftl__pip[data-lane="floor"] { background: var(--ok-dot); box-shadow: none; transition-delay: var(--m-seam-step); }

  /* Did not follow: the seam stays open, broken amber. */
  .ftl__s[data-state="miss"] .ftl__seam::before { background: repeating-linear-gradient(90deg, var(--warn-dot) 0 5px, transparent 5px 8px); }
  .ftl__s[data-state="miss"] .ftl__pip[data-lane="floor"] { box-shadow: inset 0 0 0 2px var(--warn-dot); }

  /* Manual operation: no sensor to close it; the floor pip is the manual mark (a square with a solid inner border). */
  .ftl__s[data-state="manual"] .ftl__pip[data-lane="floor"] { border-radius: 3px; box-shadow: inset 0 0 0 2px var(--text-2), inset 0 0 0 4px var(--sheet), inset 0 0 0 6px var(--text-2); }

  @container (max-width: 520px) {
    .ftl__s { grid-template-columns: 48px minmax(0, 1fr); row-gap: 2px; padding-block: var(--s1); }
    .ftl__said, .ftl__who { grid-column: 2; }
  }

  /* The manual-operation mark on the rack glyph (rackGlyph spec key manual=, rackLegend key 'manual'): a solid inner border on top of
     what the cell says. Not dashed (Unknown), not a hatch (Difference), not a tone: a shape. */
  .cell[data-manual] { outline: 2px solid var(--text-2); outline-offset: calc(clamp(2px, calc(var(--cell, 12px) * .2), 4px) * -1); }

  /* A lamp shown still: split corner to corner, lit / off. */
  :is(html[data-motion="paused"], [data-blink="split"]) .ftl__s[data-state="lit"] .ftl__pip[data-lane="system"] {
    animation: none; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), transparent calc(50% + .5px)); box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); }
  @media (prefers-reduced-motion: reduce) {
    .ftl__s[data-state="lit"] .ftl__pip[data-lane="system"] { animation: none; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), transparent calc(50% + .5px)); box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); }
  }
  html[data-motion="paused"] .ftl__seam::after, html[data-motion="paused"] .ftl__pip { transition: none; }
  @media (forced-colors: active) {
    .ftl__seam::before { background: GrayText; }
    .ftl__s[data-state="seen"] .ftl__seam::after, .ftl__s[data-state="seen"] .ftl__pip, .ftl__s:is([data-state="seen"], [data-state="miss"], [data-state="manual"]) .ftl__pip[data-lane="system"] { background: CanvasText; }
    .ftl__pip { box-shadow: inset 0 0 0 2px CanvasText; }
    .cell[data-manual] { outline-color: CanvasText; }
  }
}

/* ── 08g-pick.css ── */
/* Janus kit · station pull (Neo 0032 §5, 0046 §4, 0055 §6, 0060): the pick batch, the Closed short end-stop of the
   covered-by bar, and the shared demand summary.

   Pick batch (pickBatch(), app/kit/domain/pick.ts): one chip per task lit by one pull, numbered in walking order (the
   rack drawing's pins carry the same numbers). The lamp is device truth (blue blink = take this reel out) and keeps the
   hardware's one blink phase; the chip around it carries the task's state as a square and a word.
   Motion, only where it explains the rack:
   - ignition (`.pick[data-ignite]`): on first appearance the chips light in walking order, 40 ms apart (the lamps
     themselves keep their shared phase: only the chip arrives). Never on a re-render.
   - taken: the chip settles once (--m-settle, the settle spring) and its lamp is dark.
   - relit (`[data-relit]`): an undone take-out relights one chip, once.
   Reduced motion: --m-enter and --m-settle are 0: no stagger, no settle, a cut. Paused blinking: the lamp is split,
   lit / off (the kit's led rules). Closed short is scope of the demand, never a severity: an ink end-stop, never red. */
@layer domain {
  .pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s4) var(--s3); margin: 0; padding: var(--s2) 0 0 var(--s2); list-style: none; min-width: 0; }
  .pick__chip { position: relative; display: grid; align-content: start; gap: var(--s2); min-width: 0; padding: var(--s3) var(--s4) var(--s4) var(--s5); border-radius: var(--r3); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); transition: background var(--m-state) var(--e-standard), box-shadow var(--m-state) var(--e-standard); }
  .pick__chip[data-state="lit"], .pick__chip[data-state="lapsed"] { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-1); }
  .pick__chip[data-state="taken"] { background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--line); animation: pick-settle var(--m-settle) var(--e-settle) both; }
  .pick__chip[data-state="verify"] { box-shadow: inset 0 0 0 2px var(--warn-line, var(--warn-dot)), var(--shadow-1); }
  .pick__chip:is([data-state="dark"], [data-state="cancelled"]) { background: var(--sheet-sunk); box-shadow: inset 0 0 0 1px var(--line); }
  .pick__head, .pick__what, .pick__st, .pick__undo, .pick__note { margin: 0; min-width: 0; }
  .pick__head { display: flex; align-items: center; gap: var(--s3); }
  /* The walking-order number: the pin's number on the rack drawing, the same form (a filled accent disc), pinned to the
     chip's corner so the bay keeps the width. */
  .pick__n { position: absolute; top: calc(var(--s2) * -1); left: calc(var(--s2) * -1); display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent); color: var(--accent-fg, #fff); box-shadow: 0 0 0 2px var(--sheet); font: 650 var(--t-small)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
  .pick__chip:is([data-state="taken"], [data-state="dark"], [data-state="cancelled"]) .pick__n { background: var(--line-2); color: var(--text-2); }
  .pick__bay { display: inline-flex; align-items: center; gap: .24em; font: 450 clamp(32px, 3.4vw, 44px)/1 var(--font-brand); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
  .pick__chip:is([data-state="taken"], [data-state="cancelled"]) .pick__bay { color: var(--text-2); }
  .pick__what { font-size: var(--t-small); color: var(--text-2); overflow-wrap: anywhere; }
  .pick__undo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
  .pick__note { font-size: var(--t-small); color: var(--text-2); }
  /* On a station the batch is read at 2 m: 6 chips across the 1280 reference (NFR-E2/E3). */
  /* Empty tracks collapse, so a short batch reads wide; six still fit across the reference kiosk. */
  [data-scale="station"] .pick { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 360px)); }
  /* Every lit bay of a batch is an actionable bin address, so it is must-read at 2 m (NFR-E3, NR13): 64 px on the
     1280 × 800 reference; three chips fit across it, more wrap to a second row. */
  [data-scale="station"] .pick__bay { font-size: clamp(34px, 5.2cqi, 64px); }
  [data-scale="station"] .pick__what { font-size: var(--t-body); }

  .pick[data-ignite] .pick__chip { animation: pick-ignite var(--m-enter) var(--e-enter) both; animation-delay: calc(var(--at-i, 0) * 40ms); }
  .pick__chip[data-relit] { animation: pick-relight var(--m-settle) var(--e-settle) both; }
  @keyframes pick-ignite { from { opacity: 0; transform: translateY(6px); } }
  @keyframes pick-settle { from { transform: scale(1.02); } }
  @keyframes pick-relight { from { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in oklab, var(--accent) 35%, transparent); } }
  @media (prefers-reduced-motion: reduce) { .pick[data-ignite] .pick__chip, .pick__chip[data-state="taken"], .pick__chip[data-relit] { animation: none; } }
  html[data-motion="paused"] :is(.pick[data-ignite] .pick__chip, .pick__chip[data-state="taken"], .pick__chip[data-relit]) { animation: none; }

  /* Closed short: the end-stop of a demand line (terminal: future stock never reopens it). An ink stop at the start of
     the remainder, the remainder empty: scope, not severity, and never a dash (dashed means Unknown). */
  :is(.cover__seg, .cover__key)[data-kind="closed"] { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }
  .cover__seg[data-kind="closed"] { position: relative; }
  .cover__seg[data-kind="closed"]::before { content: ''; position: absolute; left: -2px; top: -4px; bottom: -4px; width: 3px; border-radius: 1px; background: var(--text); }
  .cover__unproved { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-small); color: var(--text-2); }
  .cover__unproved b { color: var(--text); }

  /* The shared demand summary: the route (source → destination) and four figures, a hairline strip, not cards. */
  .dsum { display: grid; gap: var(--s3); min-width: 0; }
  .dsum__route { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0; font-size: var(--t-lead); }
  .dsum__src { color: var(--text-2); }
  .dsum__from { color: var(--text-3); }
  .dsum__arrow { color: var(--text-3); }
  .dsum__dest { font-weight: 600; }
  .dsum__st { margin-left: auto; }
  .dsum__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
  .dsum__fig { display: grid; gap: 2px; padding: var(--s2) var(--s3); }
  .dsum__fig + .dsum__fig { border-left: 1px solid var(--line-soft); }
  .dsum__fig dt { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-cap); font-weight: 600; color: var(--text-2); }
  .dsum__fig[data-kind] dt::before { content: ''; width: 12px; height: 8px; border-radius: 2px; flex: none; }
  .dsum__fig[data-kind="reserved"] dt::before { background: var(--accent); }
  .dsum__fig[data-kind="taken"] dt::before { background: var(--fill-idle); }
  .dsum__fig[data-kind="closed"] dt::before { box-shadow: inset 0 0 0 1px var(--text-3); border-left: 3px solid var(--text); }
  .dsum__fig dd { margin: 0; font-variant-numeric: tabular-nums; }
  .dsum__fig dd b { font: 450 var(--t-title)/1.1 var(--font-brand); }
  .dsum__fig dd small { color: var(--text-3); font-size: var(--t-small); }
  .dsum__note { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-small); color: var(--text-2); }
  @media (max-width: 560px) { .dsum__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dsum__fig:nth-child(3) { border-left: 0; } }
  @media (forced-colors: active) {
    .pick__chip[data-state="lit"] { outline: 2px solid Highlight; }
    .cover__seg[data-kind="closed"]::before, .dsum__fig[data-kind] dt::before { forced-color-adjust: none; background: CanvasText; }
  }
}

/* ── 09-shell.css ── */
/* Janus kit · the app shell: skip link, rail, top bar, account menu, phone bar.
   Rail ≥ 1181 px: full; 901–1180 px: icon rail; ≤ 900 px: an off-canvas popover. Phone bar ≤ 560 px. */
@layer shell {
  .skip { position: absolute; left: var(--s4); top: -60px; z-index: 200; padding: var(--s3) var(--s4); border-radius: var(--r3); background: var(--navy-950); color: #fff; font-weight: 600; text-decoration: none; }
  .skip:focus { top: var(--s3); }

  /* The rail column is painted by the frame, so it runs the full page height in any scroll or capture. */
  .app {
    display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh;
    background: linear-gradient(90deg, var(--rail) calc(var(--rail-w) - 1px), var(--line) calc(var(--rail-w) - 1px) var(--rail-w), transparent var(--rail-w));
  }
  .main { min-width: 0; overflow-x: clip; }

  /* ── Rail ── */
  .rail {
    position: sticky; inset: 0 auto auto auto; margin: 0; padding: 0; width: var(--rail-w); height: 100vh;
    display: flex; flex-direction: column; overflow: hidden; z-index: 30;
    background: var(--rail); color: inherit; border: 0; border-right: 1px solid var(--line);
  }
  .rail__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s5) var(--s4) var(--s4); border-bottom: 1px solid var(--line); }
  .rail__brand { display: grid; gap: var(--s2); color: var(--text); text-decoration: none; border-radius: var(--r2); }
  .rail__brand:hover { text-decoration: none; }
  .rail__logo { display: block; width: 132px; height: auto; }
  .rail__logo--night { display: none; }
  :root[data-theme="night"] .rail__logo--paper { display: none; }
  :root[data-theme="night"] .rail__logo--night { display: block; }
  .rail__suite { display: flex; align-items: baseline; gap: var(--s2); }
  .brand__word { font-family: var(--font-brand); font-weight: 600; font-size: 15px; letter-spacing: .28em; }
  .rail__site { font-size: var(--t-cap); color: var(--text-2); }
  .rail__close { display: none; }
  .rail__foot { flex: none; display: flex; align-items: center; gap: var(--s1); padding: var(--s3); border-top: 1px solid var(--line); background: var(--rail); }
  .rail__help { flex: 1; display: inline-flex; align-items: center; gap: var(--s2); height: var(--h-sm); padding: 0 var(--s3); border: 0; border-radius: var(--r2); background: transparent; color: var(--text-2); font-size: var(--t-small); font-weight: 600; cursor: pointer; }
  .rail__help:hover { background: var(--hover); color: var(--text); }

  .nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--s4); align-content: start; padding: var(--s4) var(--s3); }
  .nav__group { display: grid; gap: 1px; }
  .nav__label { font-size: var(--t-cap); font-weight: 600; color: var(--text-3); padding: 0 var(--s3) var(--s1); letter-spacing: .01em; }
  .nav__item {
    position: relative; display: flex; align-items: center; gap: var(--s3); height: 34px; padding: 0 var(--s3); border-radius: var(--r2);
    color: var(--text-2); font-size: var(--t-data); font-weight: 500; text-decoration: none;
    transition: background var(--m-press), color var(--m-press);
  }
  .nav__item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
  .nav__item[aria-current="page"] { font-weight: 600; }
  .nav__item[aria-current="page"] > .i { color: var(--accent-text); }
  .nav__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__count {
    --tone-fg: var(--idle-fg); --tone-bg: var(--idle-bg);
    margin-left: auto; display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--pill);
    background: var(--tone-bg); color: var(--tone-fg); font-size: var(--t-cap); font-weight: 700; font-variant-numeric: tabular-nums;
  }
  @media (pointer: coarse) { .nav__item { height: var(--h-md); } }
  /* The Later group: parked pages, folded under their release mark at the foot of the page list. Its summary reads as
     a group label that opens; its items carry the Neo source that parks them. */
  .nav__later { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
  .nav__later-sum {
    display: flex; align-items: center; gap: var(--s2); min-height: max(32px, var(--target-min)); padding: 0 var(--s3); border-radius: var(--r2);
    color: var(--text-3); font-size: var(--t-cap); font-weight: 650; list-style: none; cursor: pointer;
  }
  .nav__later-sum::-webkit-details-marker { display: none; }
  .nav__later-sum > .i { --i: var(--icon-sm); color: var(--text-3); }
  .nav__later-sum::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: var(--s1); border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--m-state) var(--e-standard); }
  .nav__later[open] > .nav__later-sum::after { transform: rotate(45deg); }
  .nav__later-sum:hover { background: var(--hover); color: var(--text-2); }
  .nav__later-sum .nav__count { order: 3; margin-left: auto; }
  .nav__later-items { display: grid; gap: 1px; padding-top: 2px; }
  .nav__later .nav__item { color: var(--text-3); }
  .nav__src { margin-left: auto; flex: none; color: var(--text-3); font: 500 11px var(--font-mono); letter-spacing: -.01em; }
  @media (pointer: coarse) { .nav__later-sum { min-height: var(--h-md); } }
  /* A parked page's Later note sits under its head and tabs (the shell puts it there). */
  .page__later { margin: 0 0 var(--s6); }

  /* ── Top bar: time, scan-or-search, then the right cluster ── */
  .top {
    position: sticky; top: 0; z-index: 25; height: var(--top-h); display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s6);
    background: color-mix(in oklab, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  }
  .top__menu { display: none; }
  .top__right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
  /* The bar's slot for the kit clock (clock({ size: 'top' })): position and divider only; the clock draws itself. */
  .topclock { flex: none; padding-right: var(--s4); margin-right: var(--s1); border-right: 1px solid var(--line); }
  .omni {
    flex: 1; min-width: 0; max-width: 560px; height: 40px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2) 0 var(--s3);
    border: 0; border-radius: var(--r3); background: var(--sheet); color: inherit; font: inherit; text-align: left; cursor: text;
    box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); transition: box-shadow var(--m-state);
  }
  .omni:hover { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-strong); }
  .omni__glyph { color: var(--accent-text); }
  .omni__hint { flex: 1; min-width: 0; color: var(--text-3); font-size: var(--t-data); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .omni__keys { display: flex; gap: 3px; }

  .rackpick {
    --tone-dot: var(--ok-dot);
    display: inline-flex; align-items: center; gap: var(--s2); height: max(40px, var(--target-min)); max-width: 260px; padding: 0 var(--s2) 0 var(--s3);
    border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--sheet); color: var(--text); text-align: left; cursor: pointer;
  }
  .rackpick:hover { border-color: var(--ink-400); }
  .rackpick__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tone-dot); flex: none; }
  .rackpick__id { display: none; font-size: var(--t-small); font-weight: 650; white-space: nowrap; }
  .rackpick__t { display: grid; line-height: 1.15; min-width: 0; }
  .rackpick__k { font-size: 12px; color: var(--text-2); }
  .rackpick__n { font-size: var(--t-small); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Field: the same control in a form row (44 px, the name at data size). */
  .rackpick--field { height: var(--h-md); max-width: none; padding: 0 var(--s3); gap: var(--s3); }
  .rackpick--field .rackpick__n { font: 600 var(--t-data)/1.2 var(--font-ui); }

  .menuwrap { position: relative; }
  .userbtn { anchor-name: --usermenu; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 var(--s1) 0 3px; border: 1px solid transparent; border-radius: var(--pill); background: transparent; color: var(--text-2); cursor: pointer; }
  .userbtn:hover, .userbtn[aria-expanded="true"] { background: var(--hover); border-color: var(--line-2); }
  .usermenu { position-anchor: --usermenu; }
  .usermenu__n { font-weight: 650; }
  .usermenu__r { font-size: var(--t-small); color: var(--text-2); }

  /* Session and role facts (sessionChip(): Support session, View only) are top-bar chips with a popover, never page
     banners (DESIGN.md › What shows when, rule 9). */
  .sesschip { display: inline-flex; align-items: center; gap: 6px; height: max(32px, var(--target-min)); min-width: var(--target-min); padding: 0 var(--s3); border: 0; border-radius: var(--pill); background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: inherit; font-size: var(--t-cap); font-weight: 650; white-space: nowrap; cursor: pointer; }
  .sesschip:hover { color: var(--text); background: var(--hover); }
  .sesspop { inset: calc(var(--top-h) + 6px) 16px auto auto; width: min(360px, calc(100vw - 32px)); padding: var(--s3) var(--s4); }
  .sesspop:popover-open { display: grid; gap: var(--s1); }
  .sesspop__t { margin: 0; font-weight: 650; }
  .sesspop__b { margin: 0; font-size: var(--t-small); color: var(--text-2); }
  @media (max-width: 560px) { .sesschip { padding: 0 var(--s2); } .sesschip__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
  .draftchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--s3); border-radius: var(--pill); background: var(--warn-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn-line) 60%, transparent); color: var(--warn-fg); font-size: var(--t-cap); font-weight: 650; text-decoration: none; white-space: nowrap; }
  .draftchip:hover { text-decoration: none; background: var(--warn-bg); }


  /* ── Phone bar (shell pages ≤ 560 px) ── */
  .phonebar { display: none; }

  /* ── Tablet: an icon rail keeps the work area wide; names stay for assistive tech and show as tips ── */
  @media (min-width: 901px) and (max-width: 1180px) {
    :root { --rail-w: 72px; }
    .rail__head { padding: var(--s4) 0; justify-content: center; }
    .rail__brand { width: 26px; overflow: hidden; }
    .rail__logo { width: 132px; max-width: none; }
    .rail__suite { display: none; }
    .nav { padding: var(--s3) var(--s2); gap: var(--s3); }
    .nav__label, .nav__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .nav__group + .nav__group { border-top: 1px solid var(--line); padding-top: var(--s3); }
    .nav__item, .rail__help { justify-content: center; padding: 0; height: var(--h-md); }
    .nav__count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 16px; padding: 0 4px; font-size: 10px; margin: 0; }
    .nav__later-sum { position: relative; justify-content: center; padding: 0; height: var(--h-md); }
    .nav__later-sum > .i { --i: var(--icon-md); }
    .nav__later-sum::after, .nav__src { display: none; }
    .rail__foot { flex-direction: column; padding: var(--s2); }
    .rail__help { flex: none; width: var(--h-md); }
    .topclock .siteclock__d, .top .rackpick__k { display: none; }
  }
  /* Tips name the icon-rail items only where the names are hidden. */
  @media (min-width: 1181px), (max-width: 900px) { .nav .tip { display: none; } }

  /* ── Phone and small tablet: the rail is an off-canvas popover ── */
  @media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); background: none; }
    .rail { position: fixed; inset: 0 auto 0 0; width: 290px; height: 100dvh; box-shadow: var(--shadow-3); z-index: 85; transform: translateX(-102%); visibility: hidden; transition: transform var(--m-travel) var(--e-travel), visibility 0s linear var(--m-travel), overlay var(--m-travel) allow-discrete, display var(--m-travel) allow-discrete; }
    .rail:popover-open { display: flex; transform: none; visibility: visible; transition: transform var(--m-travel) var(--e-travel), overlay var(--m-travel) allow-discrete, display var(--m-travel) allow-discrete; }
    @starting-style { .rail:popover-open { transform: translateX(-102%); } }
    .rail::backdrop { background: var(--scrim); }
    .rail__close { display: inline-grid; position: absolute; top: var(--s3); right: var(--s3); }
    .top { padding: 0 var(--s4); gap: var(--s2); }
    .top__menu { display: inline-grid; }
    .topclock { display: none; }
    .omni { flex: 1 1 120px; min-width: 120px; max-width: none; }
    .omni__keys { display: none; }
    .top .rackpick { max-width: 150px; }
  }
  @media (min-width: 901px) { .rail[popover] { display: flex; } }
  @media (max-width: 760px) { .draftchip { font-size: 0; gap: 0; padding: 0 var(--s2); } .draftchip .i { font-size: initial; } }
  @media (max-width: 560px) {
    :root { --phonebar-h: 64px; }
    body:has(> .phonebar) { padding-bottom: var(--phonebar-h); }
    .omni, .top__menu, .top__alerts { display: none; }
    .topclock { display: block; border-right: 0; padding-right: 0; margin-right: auto; }
    .topclock .siteclock__d { display: none; }
    .top__right { gap: var(--s1); }
    .top .rackpick { padding: 0 var(--s2); }
    .top .rackpick > .i, .userbtn > .i { display: none; }
    .top .rackpick__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .top .rackpick__id { display: inline; }
    .userbtn { padding: 0 3px; }
    .phonebar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
      height: calc(var(--phonebar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--s2) env(safe-area-inset-bottom, 0px);
      background: var(--sheet); border-top: 1px solid var(--line);
    }
    .phonebar > :is(a, button) { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; height: 56px; border: 0; background: none; color: var(--text-2); font: 600 11px/1.1 var(--font-ui); text-decoration: none; cursor: pointer; }
    .phonebar > a[aria-current="page"] { color: var(--accent-text); }
    .phonebar .phonebar__scan { width: 56px; height: 56px; justify-self: center; border-radius: 50%; background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-2); }
    .phonebar__n { position: absolute; top: 4px; left: 55%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn-dot); color: #1b1300; font-size: 11px; line-height: 18px; }
  }
  @media (max-width: 420px) { .top { padding: 0 var(--s3); } }
  @media (pointer: coarse) { .top :is(.iconbtn, .userbtn) { min-width: 44px; height: 44px; } }

  @media (forced-colors: active) {
    .rail { border-right: 1px solid CanvasText; }
    .nav__item[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
    .rackpick__dot, .nav__count { forced-color-adjust: none; background: CanvasText; color: Canvas; }
    .omni, .rackpick, .sesschip { border: 1px solid ButtonText; }
  }

  /* ── Print: the page without its chrome, on white ── */
  @media print {
    :is(.skip, .rail, .rail[popover], .top, .phonebar, .toasts, [data-print]) { display: none; }
    .app { display: block; background: none; }
    body { background: #fff; color: #000; }
    main { padding: 0; }
  }
}

/* The stop signal in the top bar (liveState(), the pill; its look is the kit's, 04-primitives.css). It leads the right
   cluster and never shrinks; the scan field gives way. Below 560 px it leaves the crowded bar and hangs, full width,
   under it (it travels with the sticky bar), and the page moves down to make room while it shows. */
@layer shell {
  .top .livestate { flex: none; }
  @media (max-width: 560px) {
    .top .livestate:not([hidden]) { position: absolute; z-index: 1; top: calc(100% + 6px); inset-inline: var(--s3); white-space: normal; box-shadow: inset 0 0 0 1px var(--tone-line), var(--shadow-2); }
    body:has(.top .livestate:not([hidden])) #main { padding-top: 64px; }
  }
  /* A live region while the feed is down: its values dim, as the stale pattern does (the stamp is the top bar's). */
  [data-live][data-stale] .nav__count { opacity: .72; }
}

/* ── 10-tones.css ── */
/* Janus kit · tones. Meaning is an attribute: data-tone="ok|warn|bad|info|idle" on any tone-aware component.
   Components read var(--tone-fg|bg|line|surface|dot|fill) and set the idle quintet on themselves. */
@layer tones {
  [data-tone="ok"] { --tone-fg: var(--ok-fg); --tone-bg: var(--ok-bg); --tone-line: var(--ok-line); --tone-surface: var(--ok-surface); --tone-dot: var(--ok-dot); --tone-fill: var(--fill-ok); }
  [data-tone="warn"] { --tone-fg: var(--warn-fg); --tone-bg: var(--warn-bg); --tone-line: var(--warn-line); --tone-surface: var(--warn-surface); --tone-dot: var(--warn-dot); --tone-fill: var(--fill-warn); }
  [data-tone="bad"] { --tone-fg: var(--bad-fg); --tone-bg: var(--bad-bg); --tone-line: var(--bad-line); --tone-surface: var(--bad-surface); --tone-dot: var(--bad-dot); --tone-fill: var(--fill-bad); }
  [data-tone="info"] { --tone-fg: var(--info-fg); --tone-bg: var(--info-bg); --tone-line: var(--info-line); --tone-surface: var(--info-surface); --tone-dot: var(--info-dot); --tone-fill: var(--fill-info); }
  [data-tone="idle"] { --tone-fg: var(--idle-fg); --tone-bg: var(--idle-bg); --tone-line: var(--idle-line); --tone-surface: var(--idle-surface); --tone-dot: var(--idle-dot); --tone-fill: var(--fill-idle); }
}

/* ── 11-states.css ── */
/* Janus kit · states. State comes from ARIA and native state, never from is-* or modifier classes:
   aria-current · aria-selected (grid/listbox/tablist only) · aria-pressed · aria-expanded · aria-invalid · aria-busy ·
   aria-disabled · :checked · :disabled · [open] · :popover-open · :user-invalid · data-state for domain states.
   Defined once here: the selected chip, the selected ring, the pressed pill, on/off, disabled, busy, invalid,
   current step, stale values, the transient moments (is-changed, is-settled, shake, is-ack) and every motion stop. */
@layer states {
  /* ── The one "selected/current" look: a sheet chip on a sunk track ── */
  :is(.seg, .tabs, .toggles) :is(a, button, label):is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [aria-selected="true"]),
  :is(.seg, .tabs, .toggles) label:has(> input:checked),
  .nav__item[aria-current="page"] {
    background: var(--sel-bg); color: var(--text);
    box-shadow: var(--shadow-1), inset 0 0 0 1px var(--sel-line);
  }

  /* ── The column that is now (a table head with aria-current): accent words and a 2 px accent underline ── */
  .table thead th[aria-current] { color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); }

  /* ── The one "selected ring": a chosen card ── */
  .optcard[data-tone]:not([data-tone="idle"]) { --ring: var(--tone-line); --ring-bg: var(--tone-surface); }
  .optcard:is(:has(input:checked), [aria-pressed="true"], [aria-current="true"], [aria-selected="true"]),
  .btn:not(.btn--primary, .btn--danger, .btn--warn)[aria-pressed="true"] {
    border-color: var(--ring, var(--sel-ring)); background: var(--ring-bg, var(--selected));
    box-shadow: inset 0 0 0 1px var(--ring, var(--sel-ring));
  }
  .optcard:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
  .optcard:has(input:checked) .optcard__ind { border-color: var(--ring, var(--sel-ring)); }
  .optcard:has(input:checked) .optcard__ind--check { background: var(--ring, var(--sel-ring)); }
  .optcard:has(input:checked) .optcard__ind::after { opacity: 1; }

  /* ── Pressed pill (filter chips) ── */
  .fchip:is([aria-pressed="true"], [aria-current="true"], :has(input:checked)) { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
  :root[data-theme="night"] .fchip:is([aria-pressed="true"], [aria-current="true"], :has(input:checked)) { background: var(--sky-500); border-color: var(--sky-500); color: var(--navy-990); }

  /* ── On/off: switch, menu checkbox, pressed icon toggle ── */
  .switch:checked { background: var(--accent); }
  .switch:checked::after { transform: translateX(16px); }
  .menu-item[aria-checked="true"] .menu-item__state { background: var(--accent); }
  .menu-item[aria-checked="true"] .menu-item__state::after { transform: translateX(12px); }
  .iconbtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }

  /* ── Disabled ── */
  :is(.btn, .iconbtn, .fchip, .menu-item):is(:disabled, [aria-disabled="true"]),
  .seg :is(button, a, label):is(:disabled, [aria-disabled="true"], :has(> input:disabled)) {
    opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
  }
  .check:has(input:disabled), .switchrow:has(.switch:disabled), .setrow:has(:is(select, input, textarea):disabled) .setrow__k { opacity: .55; cursor: not-allowed; }
  /* A drafted choice keeps the ring while nothing in its group is checked ("draft no longer fits"). */
  .options:not(:has(input:checked)) .optcard[data-pending] { border-color: var(--ring, var(--sel-ring)); background: var(--ring-bg, var(--selected)); box-shadow: inset 0 0 0 1px var(--ring, var(--sel-ring)); }
  /* A disabled card is sunk and quiet, not faded: its reason (why) stays at full contrast. */
  .optcard:is(:has(input:disabled), [aria-disabled="true"]) { background: var(--sheet-sunk); border-color: var(--line); cursor: not-allowed; }
  .optcard:is(:has(input:disabled), [aria-disabled="true"]) :is(.optcard__t, .optcard__d, .optcard__media) { color: var(--text-3); }
  .optcard:is(:has(input:disabled), [aria-disabled="true"]) .optcard__media { opacity: .55; }
  /* Read-only fields look fixed, not editable (disabled keeps its own look). */
  :is(.input, .textarea):read-only:not(:disabled), .inputgroup:has(input:read-only:not(:disabled)) { background: var(--sheet-sunk); color: var(--text-2); }
  :is(.input, .select, .textarea):disabled, .inputgroup:has(input:disabled) { background: var(--sheet-sunk); color: var(--text-3); cursor: not-allowed; }
  .switch:disabled { cursor: not-allowed; }
  /* A gated submit waits for its form (app.js also disables it and names the unmet reason). */
  form:has(:invalid) [data-gated] { opacity: .45; pointer-events: none; }
  [data-state-root]:is([data-state="readonly"], [data-state="unavailable"], [data-state="locked"]) [data-edit] { opacity: .5; }

  /* ── Busy ── */
  [aria-busy="true"] { cursor: progress; }
  .btn[aria-busy="true"] { background-image: linear-gradient(100deg, transparent 30%, color-mix(in oklab, currentColor 16%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: busy 1.4s linear infinite; }
  @keyframes busy { from { background-position: 100% 0; } to { background-position: -150% 0; } }

  /* ── Invalid: server (aria-invalid) and client (:user-invalid, only after the person has interacted) ── */
  :is(.input, .select, .textarea):is([aria-invalid="true"], :user-invalid),
  .inputgroup:has(input:is([aria-invalid="true"], :user-invalid)) {
    border-color: var(--bad-line); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad-line) 16%, transparent);
  }
  .field:has(:user-invalid) .field__error, .fieldset:has(:user-invalid) .field__error { display: flex; }

  /* ── Current step (steppers and paths): aria-current="step" plus data-state for the rest ── */
  .step[aria-current="step"] { --sc: var(--accent); }
  .step[data-state="done"] { --sc: var(--ok-dot); }
  .step[data-state="warn"] { --sc: var(--warn-dot); }
  .step:is([aria-current="step"], [data-state="done"]) b { color: var(--text); }

  /* ── Stale values keep their own "as of" ── */
  [data-stale] .val { color: var(--text-3); }
  [data-stale] .asof { color: var(--warn-fg); font-weight: 600; }

  /* ── Transient moments (the only animation classes) ── */
  .is-changed { animation: changed 1000ms var(--e-standard); }
  @keyframes changed { from { background-color: var(--selected); } }
  .is-ack { animation: ack var(--m-settle) var(--e-settle); }
  @keyframes ack { from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok-dot) 60%, transparent); } to { box-shadow: 0 0 0 8px transparent; } }
  .is-settled { animation: settle var(--m-settle) var(--e-settle); }
  @keyframes settle { from { transform: scale(.7); box-shadow: 0 0 0 0 var(--ok-dot); } 60% { box-shadow: 0 0 0 4px transparent; } }
  .shake { animation: shake var(--m-shake) var(--e-standard); }
  @keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

  /* ── Motion stops: reduced motion and Pause blinking (WCAG 2.2.2). Blink becomes a still diagonal split (both phases, lit and off); loops stop. Dashed stays reserved for Unknown. ── */
  @media (prefers-reduced-motion: reduce) {
    .st--live::before { animation: none; }
    :is(.led--blink, .led--slow) { animation: none; outline: 0; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), transparent calc(50% + .5px)); box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); }
    .shake { animation: shake-rm 320ms; }
    @keyframes shake-rm { 50% { box-shadow: 0 0 0 2px var(--bad-line); } }
    .is-settled, .is-ack { animation: none; }
    .btn[aria-busy="true"] { animation: none; }
  }
  html[data-motion="paused"] :is(.led--blink, .led--slow) { animation: none; outline: 0; background: linear-gradient(to bottom right, var(--c, var(--led-green)) calc(50% - .5px), transparent calc(50% + .5px)); box-shadow: inset 0 0 0 1.5px var(--c, var(--led-green)); }
  html[data-motion="paused"] :is(.is-changed, .is-settled, .is-ack, .shake, .btn[aria-busy="true"]) { animation: none; }
  html[data-motion="paused"] .st--live::before { animation: none; }

  @media (forced-colors: active) {
    :is(.seg, .tabs, .toggles) :is(a, button, label):is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [aria-selected="true"]),
    :is(.seg, .tabs, .toggles) label:has(> input:checked),
    .fchip:is([aria-pressed="true"], :has(input:checked)) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    .optcard:is(:has(input:checked), [aria-pressed="true"], [aria-current="true"]),
    .btn[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -1px; }
    :is(.input, .select, .textarea):is([aria-invalid="true"], :user-invalid) { border: 2px solid Mark; }
  }
}

/* ── 12-utilities.css ── */
/* Janus kit · utilities: a small closed set of text and spacing helpers allowed in page markup (KIT-SPEC §6). */
@layer utilities {
  /* ── Text ── */
  .muted { color: var(--text-2); }
  .faint { color: var(--text-3); }
  .small { font-size: var(--t-small); }
  .cap { font-size: var(--t-cap); }
  .strong { font-weight: 600; }
  .mono { font-family: var(--font-mono); font-size: max(.92em, 12.5px); letter-spacing: -.01em; }
  :is(span, b, a, code, td, strong).mono { white-space: nowrap; }
  .num { font-family: var(--font-brand); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: -.01em; }
  .nowrap { white-space: nowrap; }
  .lead { font-size: var(--t-lead); color: var(--text-2); max-width: 66ch; }
  .prose { max-width: 66ch; color: var(--text-2); }
  .prose p + p { margin-top: var(--s3); }
  .h3 { font-size: var(--t-data); font-weight: 650; }
  .title { font-family: var(--font-brand); font-size: var(--t-title); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
  .display { font-family: var(--font-brand); font-weight: 450; font-size: var(--t-display); letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
  .measure { max-width: 66ch; }
  .measure-sm { max-width: 44ch; }

  /* ── Spacing and alignment ── */
  .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
  .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); } .mt-8 { margin-top: var(--s8); }
  .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--s1); } .mb-2 { margin-bottom: var(--s2); } .mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); }
  .mb-5 { margin-bottom: var(--s5); } .mb-6 { margin-bottom: var(--s6); } .mb-7 { margin-bottom: var(--s7); } .mb-8 { margin-bottom: var(--s8); }
  .self-start { align-self: start; justify-self: start; }
  .self-end { align-self: end; justify-self: end; }
}