/* ===========================================================================
   DD Scout console — "Grid & Signal".

   Swiss/International Typographic discipline (one 12-column grid, hierarchy
   carried by type, generous air, flat surfaces, functional colour) laid out as
   BENTO: self-contained rounded tiles of varied span composing every page.

   ---------------------------------------------------------------------------
   THE FOUR SYSTEMS. Everything on every page is built from these; nothing
   invents its own spacing, weight, colour or control.

   1. THE GRID
      shell (top bar) > .page > .wrap (1280 max) > .phead > .bento
      .bento is 12 columns, 16px gutters. A tile spans .b3 … .b12. Rows are
      deliberately asymmetric (7+5, 8+4, 5+4+3) — never a uniform card wall.

   2. THE TILE
      .tile = white, 1px hairline, 14px radius, flat (no shadow anywhere).
      .tile--flat is the recessed variant (a step not yet reachable, a note).
      .tile--night is the one dark surface: machine output (log, YAML).
      data-mark on a tile paints a 30px stub on its top edge — and ONLY when
      there is something to say: live / ask / flag. No stub = nothing to flag.

   3. TYPE — ONE FAMILY, MODULATED ON TWO AXES (Archivo Variable)
      display  wdth 112 · wght 640 · tight tracking .... page + tile titles
      body     wdth 100 · wght 400/600 ................. everything read
      micro    IBM Plex Mono · uppercase · .13em ....... labels, ids, counts
      Width does the shouting so weight doesn't have to. No italics in Archivo
      (the vendored file has none — synthesised obliques are banned); the one
      italic in the console is Plex Mono's, on server lines in the raw stream.

   4. COLOUR IS A SIGNAL, NEVER A DECORATION
      ink      the primary action, the answered result, all structure
      accent   live / current / the thing you are acting on  (never a severity)
      ask      the record didn't answer -> it becomes a seller question
      flag     a person must look
      There is NO green and no "all clear": an answered check is quiet ink.
      Buttons: .btn + exactly one of --primary/--secondary/--quiet/--danger.
      38px tall, or 30px with --sm. Never mix heights inside one row.
   =========================================================================== */

/* ---- vendored faces (OFL 1.1 — licences in static/fonts/<family>/OFL.txt) - */
@font-face {
  font-family: "Archivo"; font-style: normal;
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/static/fonts/archivo/archivo-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/plex-mono/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/static/fonts/plex-mono/plex-mono-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/plex-mono/plex-mono-500.woff2") format("woff2");
}

/* ---- tokens ---------------------------------------------------------------- */
:root {
  /* the six named values */
  --paper:  #F2F3F5;   /* the field the tiles sit on                          */
  --tile:   #FFFFFF;   /* a tile                                              */
  --ink:    #16181C;   /* text, structure, and the primary action             */
  --accent: #1F49E0;   /* live / current / interactive — never a severity     */
  --ask:    #9A5B00;   /* BLOCKED / UNAVAILABLE / NOT_RUN -> ask the seller   */
  --flag:   #C42B1C;   /* ERROR / AMBIGUOUS -> a person must look             */

  /* derived neutrals (all AA on --tile and --paper) */
  --ink-2:  #5C626B;   /* secondary prose ................ 6.1:1 on white     */
  --ink-3:  #6B7178;   /* micro-labels, meta ............. 4.9:1 on white     */
  --line:   rgba(22, 24, 28, .10);
  --line-2: rgba(22, 24, 28, .18);
  --line-3: rgba(22, 24, 28, .32);
  --wash:   rgba(22, 24, 28, .045);
  --field:  #EBEDF1;   /* recessed fill: dormant tiles, specimens             */

  /* graphic-weight variants of the signals (3:1+ as UI marks) */
  --ask-mark:    #D07A00;
  --accent-2:    #1A3CBB;               /* hovered / pressed accent           */
  --accent-tint: #EDF1FE;
  --ask-tint:    #FDF3E6;
  --flag-tint:   #FDECEA;
  --accent-ring: rgba(31, 73, 224, .20);

  /* the one dark surface: machine output */
  --night:      #101318;
  --night-ink:  #AEB6C2;
  --night-lit:  #F2F5F9;
  --night-dim:  #8892A2;
  --night-line: rgba(255, 255, 255, .09);
  --night-flag: #FF8A7A;

  --sans: "Archivo", ui-sans-serif, "Helvetica Neue", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --wrap: 1280px;
  --wrap-form: 1080px;
  --wrap-auth: 900px;

  --r:    14px;   /* tile        */
  --r-md: 10px;   /* panel       */
  --r-sm: 8px;    /* control     */
  --r-xs: 5px;    /* tick, chip  */
  --gut:  16px;

  --t-fast: 120ms;
  --t-mid: 200ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --sweep: 1400ms;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

a { color: var(--accent); text-decoration: underline;
    text-decoration-color: rgba(31, 73, 224, .32); text-underline-offset: 2px;
    transition: color var(--t-fast), text-decoration-color var(--t-fast); }
a:hover { color: var(--accent-2); text-decoration-color: currentColor; }

h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 640; }
h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.021em; font-variation-settings: "wdth" 112; }
h2 { font-size: 17px; line-height: 1.28; letter-spacing: -.011em; font-variation-settings: "wdth" 104; }
h3 { font-size: 14.5px; line-height: 1.35; letter-spacing: -.005em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: #fff; padding: 9px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-size: 13px; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }

/* ---- shared type utilities -------------------------------------------------- */
/* the micro-label: tile legends, column heads. --ink-2, not --ink-3, because a
   rubric also lands on --field (a dormant tile), where ink-3 falls under AA. */
.rubric {
  display: block;
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.2;
  color: var(--ink-2);
}
.mono { font-family: var(--mono); font-size: 12px; line-height: 1.5;
        font-variant-numeric: lining-nums tabular-nums; }
.dim { color: var(--ink-2); }
.prose { max-width: 68ch; }
.prose .mono { font-size: 12.5px; }
.num { font-variant-numeric: lining-nums tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   SHELL
   =========================================================================== */
.top {
  display: flex; align-items: center; gap: 30px;
  height: 60px; padding: 0 32px;
  background: var(--tile); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
/* the mark is the coverage strip, abbreviated: one bar per check, one of them
   not like the others — the whole product in twenty pixels */
.brand .mark { display: grid; grid-auto-flow: column; grid-auto-columns: 3px; gap: 2px;
               height: 17px; align-items: end; }
.brand .mark i { display: block; height: 100%; background: var(--ink); border-radius: 1px; }
.brand .mark i:nth-child(3) { height: 56%; }
.brand .name { font-size: 15.5px; font-weight: 700; letter-spacing: -.018em;
               font-variation-settings: "wdth" 108; color: var(--ink); }
.brand .sub { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }

nav.nav { display: flex; gap: 22px; align-items: stretch; height: 100%; }
nav.nav a {
  position: relative; display: flex; align-items: center;
  color: var(--ink-2); text-decoration: none;
  font-size: 13.5px; font-weight: 500; transition: color var(--t-fast);
}
nav.nav a:hover { color: var(--ink); }
nav.nav a[aria-current="page"] { color: var(--ink); font-weight: 640; }
nav.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 1px 1px 0 0;
}
.who { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.who .user { color: var(--ink-2); font-size: 13px; }
.who form { margin: 0; }
.who .logout {
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; font-size: 12.5px; font-weight: 500;
  padding: 6px 11px; transition: color var(--t-fast), border-color var(--t-fast);
}
.who .logout:hover { color: var(--ink); border-color: var(--line-3); }

main.page { padding: 30px 32px 80px; }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap--form { max-width: var(--wrap-form); }
.wrap--auth { max-width: var(--wrap-auth); margin-top: 7vh; }

/* ===========================================================================
   PAGE HEADER — flush left, no rule; whitespace does the separating
   =========================================================================== */
.phead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 32px; align-items: end; margin: 0 0 24px;
}
.phead h1 { grid-column: 1; grid-row: 1; }
.phead__purpose {
  grid-column: 1; grid-row: 2; margin: 0;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 66ch;
}
.phead__act {
  grid-column: 2; grid-row: 1 / -1; align-self: end;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.phead--doc h1 { font-size: 27px; }
.phead--doc .phead__act { grid-row: 1; align-self: center; }
.phead--doc .phead__purpose { grid-column: 1 / -1; max-width: none; }

/* ===========================================================================
   THE BENTO GRID + THE TILE
   =========================================================================== */
.bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gut); align-items: start;
}
.bento + .bento { margin-top: var(--gut); }
.b3 { grid-column: span 3; } .b4 { grid-column: span 4; }
.b5 { grid-column: span 5; } .b6 { grid-column: span 6; }
.b7 { grid-column: span 7; } .b8 { grid-column: span 8; }
.b9 { grid-column: span 9; } .b12 { grid-column: span 12; }
/* a grid cell that holds more than one tile, stacked on the same gutter */
.stack { display: flex; flex-direction: column; gap: var(--gut); min-width: 0; }

.tile {
  position: relative; min-width: 0;
  background: var(--tile); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 24px;
}
.tile--flat   { background: var(--field); border-color: transparent; }
.tile--pad0   { padding: 0; overflow: hidden; }
.tile--strip  { padding: 13px 24px; }   /* a tile that holds a single row of controls */
/* a secondary tile that rides alongside a much taller primary column */
.tile--sticky { position: sticky; top: 20px; }
.tile--tall   { height: 100%; }
.tile--center { text-align: center; }
.tile--col    { display: flex; flex-direction: column; }

/* the state stub: a tile only ever wears one, and only when it has something
   to say. Silence is the default, and silence means "answered". */
.tile[data-mark]::before {
  content: ""; position: absolute; left: 24px; top: -1px;
  width: 30px; height: 3px; border-radius: 0 0 2px 2px; background: var(--ink);
}
.tile[data-mark="live"]::before { background: var(--accent); }
.tile[data-mark="ask"]::before  { background: var(--ask-mark); }
.tile[data-mark="flag"]::before { background: var(--flag); }

.tile__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.tile__head h2 { flex: 1 1 auto; min-width: 0; }
.tile__head > .rubric { flex: 0 0 auto; }
.tile__head .aside { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.tile__note { font-size: 13px; color: var(--ink-2); margin: -4px 0 14px; max-width: 74ch; }
.tile__foot {
  margin: 16px -24px -22px; padding: 13px 24px;
  border-top: 1px solid var(--line); background: rgba(22, 24, 28, .02);
  border-radius: 0 0 var(--r) var(--r);
  font-size: 12.5px; color: var(--ink-2);
}
.tile--pad0 > .tile__foot { margin: 0; }

/* the big count — this console counts; it never percentages */
.figure {
  display: block; font-size: 46px; line-height: 1; font-weight: 620;
  letter-spacing: -.03em; font-variation-settings: "wdth" 116;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
}
.figure--sm { font-size: 30px; letter-spacing: -.024em; }
.figure__unit { font-size: .5em; font-weight: 500; color: var(--ink-3);
                letter-spacing: -.01em; margin-left: 3px; }
.figure-label { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 9px; }
/* a hero tile's one sentence, set on a tight measure — the Swiss counterweight
   to the micro-labels around it */
.claim {
  font-size: 23px; font-weight: 620; line-height: 1.26; letter-spacing: -.02em;
  font-variation-settings: "wdth" 106; margin: 14px 0 10px; max-width: 26ch;
}
.figure-pair { display: flex; gap: 34px; flex-wrap: wrap; }
.figure-pair > div { min-width: 0; }

/* the testing stamp — the same legal words as the banner, at page scale */
.stamp {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ask); background: var(--ask-tint); border: 1px solid rgba(154, 91, 0, .28);
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
.stamp::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--ask-mark); }

/* a closing action bar: note left, the one primary right */
.actionbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.actionbar__note { font-size: 12.5px; color: var(--ink-2); margin: 0; max-width: 62ch; }
.actionbar__acts { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* the destructive zone is a tile of its own — never beside a primary */
.danger-zone { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.danger-zone p { margin: 0; font-size: 12.5px; color: var(--ink-2); max-width: 48ch; }
.danger-zone .btn { margin-left: auto; }

/* ===========================================================================
   BUTTONS — one system, four roles
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 17px; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-size: 13.5px; font-weight: 620; line-height: 1;
  letter-spacing: -.004em;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--tile); color: var(--ink); text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; }

.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover:not(:disabled) { background: #2C313A; border-color: #2C313A; color: #fff; }
/* a disabled primary steps back to a plainly inert ghost, not a faded solid */
.btn--primary:disabled { background: var(--field); border-color: transparent; color: var(--ink-3); }

.btn--secondary { background: var(--tile); border-color: var(--line-2); color: var(--ink); }
.btn--secondary:hover:not(:disabled) { border-color: var(--ink); background: var(--wash); }

.btn--quiet {
  height: 30px; padding: 0 10px; background: none; border-color: transparent;
  color: var(--ink); font-weight: 600; font-size: 12.5px; text-decoration: none;
}
.btn--quiet:hover:not(:disabled) { background: var(--wash); border-color: var(--line); color: var(--ink); }

.btn--danger { background: none; border-color: var(--line-2); color: var(--flag); }
.btn--danger:hover:not(:disabled) { border-color: var(--flag); background: var(--flag-tint); color: var(--flag); }
.btn--quiet.btn--danger { border-color: transparent; color: var(--flag); }
.btn--quiet.btn--danger:hover:not(:disabled) { background: var(--flag-tint); border-color: transparent; }

.btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn--block { display: flex; width: 100%; }

/* ===========================================================================
   FORMS
   =========================================================================== */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block; font-size: 12.5px; font-weight: 620; line-height: 1.3;
  color: var(--ink); margin-bottom: 7px; letter-spacing: -.003em;
}
.field__hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 7px 0 0; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select {
  width: 100%; height: 40px; background: var(--tile); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 0 13px; outline-offset: 2px;
  transition: border-color var(--t-fast);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover:not(:disabled) { border-color: var(--line-3); }
input.mono-input { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; }
input.name-input { font-size: 16px; font-weight: 500; }
input::placeholder { color: var(--ink-3); opacity: .8; font-size: 13.5px; }
input.mono-input::placeholder { font-family: var(--mono); font-size: 12.5px; }
select { padding: 0 11px; }
select:disabled { color: var(--ink-2); background: var(--field); border-color: transparent; }

/* input + button bonded into one instrument */
.control-group { display: flex; align-items: stretch; }
.control-group > input { flex: 1 1 auto; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.control-group > input:focus-visible { z-index: 1; }
.control-group > .btn { height: 40px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: -1px; }

/* the tick — a rounded box with a real check, filled ink when set */
.square {
  display: inline-block; position: relative; width: 18px; height: 18px; flex: 0 0 18px;
  border: 1.5px solid var(--line-3); border-radius: var(--r-xs); background: var(--tile);
  vertical-align: middle; transition: background var(--t-fast), border-color var(--t-fast);
}
.square::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg) scale(0);
  transition: transform var(--t-fast) var(--ease);
}
.square.filled, .square.is-filled { background: var(--ink); border-color: var(--ink); }
.square.filled::after, .square.is-filled::after { transform: rotate(42deg) scale(1); }
label:has(input:checked) .square { background: var(--ink); border-color: var(--ink); }
label:has(input:checked) .square::after { transform: rotate(42deg) scale(1); }
.square.sm { width: 15px; height: 15px; flex-basis: 15px; border-radius: 4px; }
.square.sm::after { left: 4px; top: 1px; width: 3px; height: 7.5px; border-width: 0 1.5px 1.5px 0; }

/* messages written into the page — they stay put (no toasts) */
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--line-3);
  border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 18px;
  font-size: 13.5px; line-height: 1.55; background: var(--tile); max-width: 92ch;
}
.note :last-child { margin-bottom: 0; }
.note.warn  { border-color: rgba(196, 43, 28, .22); border-left-color: var(--flag); background: var(--flag-tint); }
.note.ask   { border-color: rgba(154, 91, 0, .22); border-left-color: var(--ask-mark); background: var(--ask-tint); }
.note.plain { border-color: transparent; border-left-color: var(--ink-3); background: var(--field); }
.note--tight { font-size: 13px; padding: 11px 14px; }
.note--last { margin-bottom: 0; }
/* a note that IS a grid cell fills its span — the prose cap is for notes inside
   a tile, where an unbroken 1200px line would be unreadable */
.bento > .note { max-width: none; margin-bottom: 0; }

/* ===========================================================================
   THE RESULT WORD + THE COVERAGE STRIP  (the signature instrument)
   Answered is quiet ink. Colour only ever marks what still needs something.
   =========================================================================== */
.result {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.3;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap; color: var(--ink-2);
}
.result.is-ask  { color: var(--ask); }
.result.is-warn { color: var(--flag); }
.result.is-live { color: var(--accent); }

/* one mark per check, in check order. Answered = a quiet grey bar; ask = amber;
   a person must look = vermilion. Never a badge, never a percentage. */
.covbar { display: flex; gap: 2px; align-items: stretch; height: 15px; }
.covbar i { display: block; width: 3px; border-radius: 1.5px; background: rgba(22, 24, 28, .18); }
.covbar i.m-ask  { background: var(--ask-mark); }
.covbar i.m-warn { background: var(--flag); }

/* the live strip: bars share the width, so the whole schedule is one object
   you can read at a glance while it fills */
.covbar--live {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 2px; height: 28px; margin-top: 18px; align-items: stretch;
}
.covbar--live i { width: auto; border-radius: 2px; background: var(--field); }
.covbar--live i.is-live { background: #C6D2F8; animation: pulse var(--sweep) ease-in-out infinite; }
.covbar--live i.m-ok   { background: rgba(22, 24, 28, .24); }
.covbar--live i.m-ask  { background: var(--ask-mark); }
.covbar--live i.m-warn { background: var(--flag); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ===========================================================================
   SCREENS (the runs register)
   =========================================================================== */
.runs__cols, .run-row {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(110px, 1fr) 148px 92px 122px;
  gap: 20px; align-items: center;
}
.runs__cols {
  padding: 12px 24px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.runs__cols span:nth-child(3), .runs__cols span:nth-child(5) { text-align: right; }
.run-row {
  position: relative; min-height: 68px; padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: background var(--t-fast);
}
.run-row:last-child { border-bottom: 0; }
/* the row's main link stretches over the whole row; secondary actions in the
   row sit above the stretch (z-index), so both stay one click each */
.run-link { color: inherit; text-decoration: none; }
.run-link::after { content: ""; position: absolute; inset: 0; }
.run-row:has(.run-link):hover { background: var(--wash); }
.run-row:has(.run-link):hover::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--accent);
}
.run-oc {
  display: block; position: relative; z-index: 1; margin-top: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.run-oc:hover { text-decoration: underline; }
.run-co { min-width: 0; }
.run-co .nm { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3;
              letter-spacing: -.014em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-co .idline { display: block; margin-top: 4px; }
.run-co .no { font-family: var(--mono); font-size: 11px; color: var(--ink-3);
              font-variant-numeric: lining-nums tabular-nums; }
.run-scope { min-width: 0; display: flex; align-items: center; }
.run-meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
            text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.run-by { font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }
.run-outcome {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; text-align: right; color: var(--ink-2);
}
.run-outcome.is-none { color: var(--ask); }

.runs-legend { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.runs-legend .k { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); }
.runs-legend .k::before { content: ""; width: 3px; height: 14px; border-radius: 1.5px;
                          background: rgba(22, 24, 28, .18); }
.runs-legend .k--ask::before  { background: var(--ask-mark); }
.runs-legend .k--warn::before { background: var(--flag); }

/* ---- empty states ------------------------------------------------------------ */
.empty { padding: 52px 24px; text-align: center; }
.empty .t { font-size: 18px; font-weight: 640; letter-spacing: -.016em; margin-bottom: 6px; }
.empty p { color: var(--ink-2); font-size: 13.5px; margin: 0 auto 20px; max-width: 52ch; }
.empty p:last-child { margin-bottom: 0; }
.empty .big { font-size: 56px; font-weight: 620; letter-spacing: -.03em; line-height: 1;
              font-variation-settings: "wdth" 116; color: var(--ink); margin-bottom: 12px;
              font-variant-numeric: lining-nums tabular-nums; }
.empty--flat { padding: 34px 24px; }

/* ===========================================================================
   SIGN IN
   =========================================================================== */
.login-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; height: 100%; }
.login-kicker { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
                text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.login-title { font-size: 36px; line-height: 1.04; letter-spacing: -.026em;
               font-variation-settings: "wdth" 114; margin: 0 0 10px; }
.login-lede { font-size: 14px; color: var(--ink-2); margin: 0; max-width: 36ch; }
.login-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
               gap: 3px; height: 40px; margin-top: 30px; }
.login-strip i { display: block; border-radius: 2px; background: rgba(22, 24, 28, .13); }
.login-strip i.k { background: rgba(22, 24, 28, .26); }
.login-strip i.a { background: var(--ask-mark); }
.login-strip i.f { background: var(--flag); }
.login-strip-note { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; max-width: 40ch; }

.identity { border-top: 1px solid var(--line); margin-top: 6px; }
.identity .sig {
  display: flex; align-items: center; gap: 12px; min-height: 46px; cursor: pointer;
  padding: 0 12px; margin: 0 -12px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; font-weight: 500; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.identity .sig:last-child { border-bottom: 0; }
.identity .sig:hover { background: var(--wash); }
.identity .sig input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.identity .square { border-radius: 999px; }
.identity .square::after {
  left: 3.5px; top: 3.5px; width: 7px; height: 7px; border: 0; border-radius: 999px;
  background: #fff; transform: scale(0);
}
.identity .sig:has(input:checked) .square::after { transform: scale(1); }
.identity .sig:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 0 4px var(--accent-ring);
}
.login-note { font-size: 12px; color: var(--ink-3); margin: 16px 0 0; }

/* ===========================================================================
   NEW SCREEN — the identity ceremony, three tiles in order
   =========================================================================== */
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 14px; }
.step__n {
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2); padding-top: 3px;
  font-variant-numeric: lining-nums tabular-nums;
}
.step__title { grid-column: 2; grid-row: 1; margin-bottom: 3px; }
.step__lede { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--ink-2);
              margin: 0 0 16px; max-width: 62ch; }
.step__body { grid-column: 2; grid-row: 3; min-width: 0; }
/* dormant: present and legible as "not yet" — never hidden */
.step.is-dormant { background: var(--field); border-color: transparent; }
.step.is-dormant .step__title { color: var(--ink-2); font-weight: 500; }
.step__wait { font-size: 13px; color: var(--ink-2); margin: 0;
              border-left: 2px solid var(--line-2); padding-left: 12px; }

/* candidates: real buttons, hairline-separated; the chosen one stays marked so
   one click switches between the alternatives you did not take */
.cands { border-top: 1px solid var(--line); }
.cands:empty { display: none; border: 0; }
.cand {
  display: flex; width: 100%; text-align: left; gap: 16px; align-items: center;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 13px 12px; cursor: pointer; position: relative; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.cand:last-child { border-bottom: 0; }
.cand:hover { background: var(--wash); }
.cand.is-chosen { background: var(--accent-tint); }
.cand.is-chosen::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: var(--accent);
}
.cand .nm { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.cand .meta { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 3px;
              font-variant-numeric: lining-nums tabular-nums; }
.cand .sc { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2);
            font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.cands-rubric { display: flex; justify-content: space-between; align-items: baseline; padding: 0 12px 8px; }

/* the confirmation instrument — the page's one emphasised object. Flush left
   like everything else: a centred block would read as a certificate, and this
   is a control, not a diploma. */
.instrument {
  background: var(--accent-tint); border: 1px solid rgba(31, 73, 224, .22);
  border-radius: var(--r-md); padding: 22px 24px;
}
.instrument > .rubric { margin-bottom: 12px; color: var(--accent); }
.instrument .co-name { font-size: 23px; font-weight: 640; line-height: 1.18;
                       letter-spacing: -.022em; font-variation-settings: "wdth" 108; margin: 0 0 6px; }
.instrument .co-meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin: 0;
                       font-variant-numeric: lining-nums tabular-nums; }
.instrument .divider { border: 0; border-top: 1px solid rgba(31, 73, 224, .22); margin: 16px 0; width: 100%; }
.instrument .warrant { font-size: 14px; line-height: 1.5; max-width: 56ch; margin: 0; }
.instrument .redline, .instrument .softline {
  margin: 16px 0 0; border-radius: var(--r-sm); padding: 12px 15px; font-size: 13.5px;
}
.instrument .redline { background: var(--flag-tint); border: 1px solid rgba(196, 43, 28, .25); }
.instrument .softline { background: var(--ask-tint); border: 1px solid rgba(154, 91, 0, .25); }
.instrument .redline .typed { text-decoration: line-through; color: var(--flag); font-weight: 600; }
.instrument .redline .registered { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.instrument .redline .lbl-inline { font-family: var(--mono); font-size: 10px; color: var(--ink-2);
                                   text-transform: uppercase; letter-spacing: .1em; margin-right: 8px; }
.confirm-tick {
  display: flex; gap: 12px; align-items: center; width: 100%;
  margin-top: 18px; padding: 13px 16px; cursor: pointer; font-size: 14px; font-weight: 500;
  background: var(--tile); border: 1px solid rgba(31, 73, 224, .28); border-radius: var(--r-sm);
  transition: border-color var(--t-fast);
}
.confirm-tick:hover { border-color: var(--accent); }
.confirm-tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.confirm-tick:has(input:checked) { border-color: var(--ink); }
.confirm-tick:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-ring);
}

/* the upload tray */
.tray {
  background: var(--field); border: 1px solid transparent; border-radius: var(--r-md);
  padding: 22px 24px; text-align: center; cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.tray:hover { background: #E3E6EC; }
.tray .tray__lead { font-size: 14px; font-weight: 500; margin: 0; }
.tray .choose {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 620;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.tray .choose:hover { color: var(--accent-2); }
.tray .hint { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; margin: 7px auto 0; max-width: 62ch; }
.tray.is-over { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent); }

.filelist:not(:empty) { margin-top: 12px; border-top: 1px solid var(--line); }
.filelist .frow { display: flex; gap: 12px; align-items: center;
                  padding: 9px 2px; border-bottom: 1px solid var(--line); }
.filelist .frow:last-child { border-bottom: 0; }
.filelist .fname { font-family: var(--mono); font-size: 12px; word-break: break-all; flex: 1 1 auto; }
.filelist .fsize { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap;
                   font-variant-numeric: lining-nums tabular-nums; }

/* ===========================================================================
   THE RUN — schedule board, panel, raw stream
   =========================================================================== */
.run-head .co { font-size: 30px; font-weight: 640; line-height: 1.1;
                letter-spacing: -.024em; font-variation-settings: "wdth" 112; margin: 0 0 8px; }
.run-head .meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin: 0;
                  font-variant-numeric: lining-nums tabular-nums; }

/* the stage rail: done · current · future */
.stage-rail { display: flex; flex-direction: column; gap: 13px; }
.stage-rail .stg { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink-3); }
.stage-rail .stg::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 3px;
  border: 1.5px solid var(--line-3); background: transparent;
}
.stage-rail .stg.is-done { color: var(--ink-2); }
.stage-rail .stg.is-done::before { border-color: var(--ink); background: var(--ink); }
.stage-rail .stg.is-current { color: var(--ink); font-weight: 620; }
.stage-rail .stg.is-current::before { border-color: var(--accent); background: var(--accent); }

.run-acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: auto;
            padding-top: 16px; }
.run-acts .btn { width: 100%; }
.run-acts .btn:only-child { margin-top: 0; }
.run-id { font-family: var(--mono); font-size: 11.5px; color: var(--ink); margin: 14px 0 0;
          word-break: break-all; }
.run-elapsed { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin: 5px 0 0;
               font-variant-numeric: lining-nums tabular-nums; }
.run-elapsed:empty { display: none; }

/* the board */
.board .conn-head {
  display: flex; gap: 12px; align-items: baseline;
  padding: 20px 0 7px 14px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 640; letter-spacing: -.008em;
}
.board .conn-head:first-child { padding-top: 2px; }
.board .conn-head .cnt { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 400;
                         color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
/* a long step's live line: the connector's own counter and current target, plus
   a clock that says TIME, not progress. It sits under the step's heading while
   the step runs and is removed the moment the step ends — a frozen counter next
   to a landed terminal state is the one thing here that could read as a result. */
.board .conn-prog {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  padding: 6px 0 7px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.board .conn-prog .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .conn-prog .since { flex: 0 0 auto; color: var(--ink-3); }

.board .brow { display: block; position: relative; padding: 9px 0 9px 14px;
               border-bottom: 1px solid var(--line); }
.board .brow .line1 { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; }
.board .brow .lbl { font-size: 13.5px; line-height: 1.4; min-width: 0; }
.board .brow .sub { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 5px 0 0; max-width: 58ch; }
.board .brow.is-queued .lbl { color: var(--ink-3); }
.board .brow.is-ask::before, .board .brow.is-warn::before, .board .brow.is-running::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
}
.board .brow.is-ask::before  { background: var(--ask-mark); animation: draw var(--t-fast) var(--ease); }
.board .brow.is-warn::before { background: var(--flag); animation: draw var(--t-fast) var(--ease); }
.board .brow.is-running::before { background: var(--accent); animation: pulse var(--sweep) ease-in-out infinite; }
@keyframes draw { from { transform: scaleY(0); transform-origin: top; } to { transform: none; } }

.board .brow .result.landed { animation: land 160ms var(--ease); }
@keyframes land { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* the finish: the panel a completed screen ends on. It is a statement of the
   result, not a celebration — the same white tile, the same ink, no green and
   no badge. The posture is set as the one emphasised line; the counts and every
   caveat sit directly under it in the same column, because "what was found" and
   "what could not be answered" are one answer, not a headline and a footnote. */
/* the target is named again here — the panel has to stand on its own — but as a
   meta line, not a second headline: the page h1 is directly above it, and the
   headline of the FINISH is the posture */
.complete__co { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin: 9px 0 0;
                font-variant-numeric: lining-nums tabular-nums; }
.complete__posture {
  margin: 10px 0 0; padding-left: 14px; border-left: 3px solid var(--ink);
  font-size: 21px; font-weight: 640; line-height: 1.22; letter-spacing: -.014em;
  font-variation-settings: "wdth" 106; color: var(--ink);
}
.complete__summary { font-size: 15.5px; font-weight: 500; margin: 16px 0 0; letter-spacing: -.008em; }
.complete__record { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin: 7px 0 0;
                    font-variant-numeric: lining-nums tabular-nums; }
.complete__note { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 11px 0 0; max-width: 82ch; }
.complete__reason { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin: 5px 0 0;
                    word-break: break-word; max-width: 82ch; }
/* the action strip, on the tile-foot grammar: one primary, the downloads that
   actually exist beside it */
.complete__acts {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 20px -24px -22px; padding: 15px 24px;
  border-top: 1px solid var(--line); background: rgba(22, 24, 28, .02);
  border-radius: 0 0 var(--r) var(--r);
}

/* the seal: what the run actually collected */
.seal { margin: 18px -24px -22px; padding: 14px 24px; border-top: 1px solid var(--line);
        background: rgba(22, 24, 28, .02); border-radius: 0 0 var(--r) var(--r); }
.seal .l1 { font-family: var(--mono); font-size: 11px; color: var(--ink); margin: 0;
            font-variant-numeric: lining-nums tabular-nums; }
.seal .l2 { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 5px 0 0;
            font-variant-numeric: lining-nums tabular-nums; }

/* the raw stream — the one dark surface: machine output shown as machine output */
.stream-block { position: sticky; top: 20px; }
.stream-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.stream-head .rubric { margin: 0; flex: 1 1 auto; }
.faults-toggle { display: flex; gap: 8px; align-items: center; cursor: pointer;
                 font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.faults-toggle:hover { color: var(--ink); }
.faults-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.faults-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.stream {
  background: var(--night); border-radius: var(--r);
  padding: 16px 0; min-height: 420px; max-height: 62vh; overflow-y: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--night-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.stream .line { padding: 0 16px; word-break: break-word; white-space: pre-wrap; }
.stream .line.srv { color: var(--night-dim); font-style: italic; }
/* sub-progress ticks are the most numerous lines in the stream and the least
   informative once read — dimmed so they never bury a check's result line */
.stream .line.prog { color: var(--night-dim); }
.stream .line.conn { color: var(--night-lit); font-weight: 500; }
.stream .line.fault { color: var(--night-flag); }
.stream .waiting { padding: 0 16px; color: var(--night-dim); font-style: italic; margin: 0; }
.stream.faults-only .line:not(.fault) { display: none; }

/* ===========================================================================
   REPORT VIEW
   =========================================================================== */
.report-frame { display: block; width: 100%; height: min(80vh, 1200px); border: 0; background: #fff; }
.artefact-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.artefact-row .rubric { flex: 0 0 auto; margin-right: 4px; }
.artefact-row .btn--quiet { font-family: var(--mono); font-size: 11.5px; font-weight: 400; }

/* ===========================================================================
   ORG CHART — the control structure, drawn server-side (no JS, no library)
   =========================================================================== */
/* a wide chart scrolls INSIDE the tile (the page never scrolls sideways);
   the inner shadows appear only at an edge with more chart behind it */
.chart-scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  background:
    linear-gradient(90deg, var(--tile) 40%, rgba(255, 255, 255, 0)) left,
    linear-gradient(270deg, var(--tile) 40%, rgba(255, 255, 255, 0)) right,
    linear-gradient(90deg, rgba(22, 24, 28, .12), rgba(22, 24, 28, 0)) left,
    linear-gradient(270deg, rgba(22, 24, 28, .12), rgba(22, 24, 28, 0)) right;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.chart-svg { display: block; }

.oc-box { fill: var(--tile); stroke: var(--line-2); stroke-width: 1; }
.oc-node--target .oc-box { stroke: var(--ink); stroke-width: 1.5; }
.oc-node--individual .oc-box { fill: var(--field); stroke: var(--line-2); }
.oc-node--unresolved .oc-box, .oc-node--opaque .oc-box, .oc-node--unknown .oc-box {
  stroke-dasharray: 4 3;
}
.oc-label { font-family: var(--sans); font-size: 12.5px; font-weight: 600;
            letter-spacing: -.01em; fill: var(--ink); }
.oc-meta  { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; fill: var(--ink-3); }

.oc-edge { fill: none; stroke: var(--line-3); stroke-width: 1.5; }
.oc-edge--ceased { stroke: var(--line-2); stroke-dasharray: 5 4; }
.oc-nature { font-family: var(--mono); font-size: 9px; letter-spacing: .02em; fill: var(--ink-2); }
.oc-nature--dim { fill: var(--ink-3); }

/* a break's stub: dashed riser -> diamond terminator -> its tag + reason */
.oc-stub { fill: none; stroke-width: 1.5; stroke-dasharray: 3 3; }
.oc-stub--ask  { stroke: var(--ask-mark); }
.oc-stub--flag { stroke: var(--flag); }
.oc-dot--ask   { fill: var(--ask-mark); }
.oc-dot--flag  { fill: var(--flag); }
.oc-stubtag { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; }
.oc-stubtxt { font-family: var(--mono); font-size: 9px; }
.oc-stubtxt--ask  { fill: var(--ask); }
.oc-stubtxt--flag { fill: var(--flag); }

/* legend chips the chart adds to the shared runs-legend */
.runs-legend .k--co::before { width: 14px; height: 10px; border-radius: 3px;
                              background: var(--tile); border: 1px solid var(--line-3); }
.runs-legend .k--person::before { width: 14px; height: 10px; border-radius: 999px;
                                  background: var(--field); border: 1px solid var(--line-3); }
.runs-legend .k--ceased::before { width: 14px; height: 0; border-radius: 0; background: none;
                                  border-top: 2px dashed var(--line-3); }

/* the side tile: one row per break — reason, then the ask, then the receipts */
.break-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.break-row:last-child { border-bottom: 0; padding-bottom: 0; }
.break-tag { font-family: var(--mono); font-size: 10px; font-weight: 500;
             letter-spacing: .1em; text-transform: uppercase; color: var(--ask); }
.break-tag.is-flag { color: var(--flag); }
.break-reason { font-size: 13.5px; line-height: 1.5; margin: 5px 0 7px; }
.break-ask { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0;
             border-left: 2px solid var(--ask-mark); padding-left: 10px; }
.break-ask.is-flag { border-left-color: var(--flag); }
.break-rcpt { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3);
              margin-top: 7px; word-break: break-all;
              font-variant-numeric: lining-nums tabular-nums; }

/* ===========================================================================
   GOLDEN SET
   =========================================================================== */
.sched-head {
  padding: 12px 24px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.sched-head .r { text-align: right; }
.srow { padding: 14px 24px; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }

.scen-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px 148px 168px;
            gap: 20px; align-items: center; }
.scen-row .scen-main { min-width: 0; }
.scen-file { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.scen-title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3;
              letter-spacing: -.013em; margin-top: 2px; }
.scen-desc { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 3px; max-width: 64ch; }
.scen-err { display: block; color: var(--flag); font-family: var(--mono); font-size: 11.5px;
            margin-top: 4px; word-break: break-word; }
.scen-actions { display: flex; gap: 2px; align-items: center; justify-content: flex-end; }
.scen-mod { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right;
            font-variant-numeric: lining-nums tabular-nums; }
.scen-row .result { text-align: right; }
.scen-foot { font-family: var(--mono); font-size: 11px; color: var(--ink-3); word-break: break-all; }

.evalrun-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 160px 108px 96px;
               gap: 20px; align-items: center; }
.evalrun-row .result { text-align: right; }
.evalrun-row .acts { display: flex; justify-content: flex-end; }

details.explainer > summary {
  cursor: pointer; font-size: 13px; font-weight: 620; color: var(--ink);
  list-style: none; display: inline-flex; align-items: center; gap: 9px; padding: 2px 0;
}
details.explainer > summary::-webkit-details-marker { display: none; }
details.explainer > summary::before {
  content: "+"; font-family: var(--mono); font-size: 13px; color: var(--ink-3);
  width: 19px; height: 19px; border: 1px solid var(--line-2); border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
details.explainer[open] > summary::before { content: "\2212"; }
details.explainer > summary:hover::before { border-color: var(--line-3); }
details.explainer .explainer__body {
  padding: 12px 0 0; margin: 0; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-2); max-width: 76ch;
}
details.explainer .explainer__body b { color: var(--ink); font-weight: 640; }
details.explainer .explainer__body .mono { font-size: 12px; color: var(--ink); }

.editor-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.editor-head .fname { font-family: var(--mono); font-size: 12.5px; flex: 1 1 auto; }
textarea.yaml-editor {
  display: block; width: 100%; min-height: 56vh; resize: vertical;
  background: var(--night); color: #DDE3EC; caret-color: var(--accent);
  border: 0; border-radius: var(--r-md);
  padding: 16px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
  white-space: pre; overflow-x: auto; tab-size: 2;
  font-variant-numeric: lining-nums tabular-nums;
}
textarea.yaml-editor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }

.eval-metrics { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin: -4px 0 14px;
                font-variant-numeric: lining-nums tabular-nums; }
.eval-line { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 14px;
             padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.eval-line:last-child { border-bottom: 0; }
.eval-line .what {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 3px;
}
.eval-line.is-miss .what { color: var(--flag); }
.eval-line .detail { word-break: break-word; min-width: 0; }

/* ===========================================================================
   KEYS — one row per key
   =========================================================================== */
.keys-cols, .keyrow {
  display: grid; grid-template-columns: 18px minmax(180px, 250px) minmax(180px, 1fr) 142px;
  gap: 16px; align-items: center;
}
.keys-cols {
  padding: 0 0 10px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.keys-cols .k-state { text-align: right; }
.keyrow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.keyrow:last-child { border-bottom: 0; }
.keyrow > .square { align-self: start; margin-top: 11px; }
.keyrow__name { min-width: 0; cursor: pointer; }
.keyrow__name .n { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3;
                   letter-spacing: -.009em; }
.keyrow__name .v { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
                   margin-top: 2px; }
.keyrow__ctl { min-width: 0; }
.keyrow__state { text-align: right; font-family: var(--mono); font-size: 11px; white-space: nowrap;
                 font-variant-numeric: lining-nums tabular-nums; }
.keyrow__state .mask { color: var(--ink); }
.keyrow__state .unset { color: var(--ink-3); }

.usage-cols, .usage-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px 122px 122px 104px;
  gap: 16px; align-items: baseline;
}
.usage-cols { padding: 0 0 10px; border-bottom: 1px solid var(--line);
              font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
              text-transform: uppercase; color: var(--ink-3); }
.usage-cols span + span, .usage-row span + span { text-align: right; }
.usage-row { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.usage-row:last-child { border-bottom: 0; }
.usage-row .num { font-family: var(--mono); font-size: 11.5px; }

/* ===========================================================================
   CLAUDE CODE
   =========================================================================== */
.specimen {
  position: relative; background: var(--field); border-radius: var(--r-md);
  padding: 15px 108px 15px 16px; margin: 0;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  word-break: break-all; white-space: pre-wrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.specimen .copy-btn { position: absolute; top: 10px; right: 10px; }
.specimen--token { background: var(--night); color: var(--night-lit); font-size: 13px;
                   padding-top: 18px; padding-bottom: 18px; }
.specimen--token .copy-btn { background: rgba(255, 255, 255, .12); border-color: var(--night-line);
                             color: var(--night-lit); }
.specimen--token .copy-btn:hover { background: rgba(255, 255, 255, .2);
                                   border-color: rgba(255, 255, 255, .42); color: #fff; }
.specimen__label { display: block; margin: 22px 0 8px; }
.specimen__label--first { margin-top: 4px; }

.token-cols, .token-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 168px 118px 92px;
  gap: 16px; align-items: center;
}
.token-cols { padding: 12px 24px; border-bottom: 1px solid var(--line);
              font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
              text-transform: uppercase; color: var(--ink-3); }
.token-row { padding: 12px 24px; border-bottom: 1px solid var(--line); }
.token-row:last-child { border-bottom: 0; }
.token-row .fp { font-family: var(--mono); font-size: 11.5px; }
.token-row .lbl { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.token-row .when { font-family: var(--mono); font-size: 11px; color: var(--ink-3);
                   font-variant-numeric: lining-nums tabular-nums; }
.token-row form { margin: 0; display: flex; justify-content: flex-end; }

/* ===========================================================================
   RESPONSIVE — the grid folds, the hierarchy does not
   =========================================================================== */
@media (max-width: 1279px) {
  main.page { padding: 26px 24px 72px; }
  .top { padding-left: 24px; padding-right: 24px; }
  .b3 { grid-column: span 4; }
  .b9 { grid-column: span 12; }
  .runs__cols, .run-row { grid-template-columns: minmax(180px, 2fr) minmax(96px, 1fr) 142px 80px 116px;
                          gap: 16px; padding-left: 20px; padding-right: 20px; }
  .keys-cols, .keyrow { grid-template-columns: 18px minmax(150px, 210px) minmax(160px, 1fr) 130px; gap: 14px; }
  .token-cols, .token-row { grid-template-columns: 132px minmax(0, 1fr) 150px 108px 92px; gap: 12px; }
  .figure { font-size: 42px; }
  /* the run header keeps its three tiles side by side, at equal thirds */
  .bento--run > .b5, .bento--run > .b4, .bento--run > .b3 { grid-column: span 4; }
}
/* the run's board + stream stop sharing a row before everything else does: a
   log line that wraps three times is no longer a log line */
@media (max-width: 1139px) {
  .bento:has(.stream-block) > * { grid-column: span 12; }
  .stream-block { position: static; }
  .stream { max-height: 380px; min-height: 240px; }
}
@media (max-width: 1079px) {
  .b3, .b4, .b5, .b6, .b7, .b8 { grid-column: span 12; }
  .bento--run > .b5, .bento--run > .b4, .bento--run > .b3 { grid-column: span 12; }
  .tile--sticky { position: static; }
  .scen-row { grid-template-columns: minmax(0, 1fr) 128px 168px; }
  .scen-mod { display: none; }
  .evalrun-row { grid-template-columns: minmax(0, 1fr) 150px 100px 92px; }
  .evalrun-row .evalrun-when { display: none; }
  .login-aside { gap: 20px; }
  .login-strip { height: 40px; }
}
@media (max-width: 859px) {
  main.page { padding: 20px 16px 64px; }
  .top { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px 20px; }
  nav.nav { height: auto; order: 3; width: 100%; flex-wrap: wrap; gap: 16px; }
  nav.nav a { height: 32px; }
  .phead { grid-template-columns: minmax(0, 1fr); }
  .phead__act { grid-column: 1; grid-row: 3; align-self: start; margin-top: 10px; }
  h1 { font-size: 28px; }
  .tile { padding: 18px; }
  .tile__foot, .seal, .complete__acts {
    margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px;
  }
  .complete__acts { margin-bottom: -18px; }
  .complete__posture { font-size: 19px; }
  .tile[data-mark]::before { left: 18px; }
  .step { grid-template-columns: minmax(0, 1fr); }
  .step__n { grid-row: 1; grid-column: 1; padding-bottom: 4px; }
  .step__title { grid-row: 2; } .step__lede { grid-row: 3; } .step__body { grid-row: 4; }
  .board .brow .line1 { flex-wrap: wrap; }
  .board .brow .result { width: 100%; }
  .runs__cols { display: none; }
  .run-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 16px; }
  .run-co { grid-column: 1; grid-row: 1; }
  .run-scope { grid-column: 1; grid-row: 2; }
  .run-meta { grid-column: 2; grid-row: 1; }
  .run-by { grid-column: 2; grid-row: 2; text-align: right; }
  .run-outcome { grid-column: 2; grid-row: 3; }
  .keys-cols { display: none; }
  .keyrow { grid-template-columns: 18px minmax(0, 1fr) 128px; gap: 10px 14px; }
  .keyrow__ctl { grid-column: 2 / span 2; }
  .usage-cols, .usage-row { grid-template-columns: minmax(0, 1fr) 60px 88px 88px 68px; gap: 10px; font-size: 12.5px; }
  .token-cols { display: none; }
  .token-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .sched-head, .srow, .runs__cols, .token-row { padding-left: 16px; padding-right: 16px; }
  .eval-line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .specimen { padding-right: 16px; padding-top: 46px; }
  .specimen .copy-btn { top: 8px; right: 8px; }
}

/* ---- reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .board .brow.is-running::before { background: var(--accent); }
  .covbar--live i.is-live { background: #C6D2F8; }
}

/* the hidden attribute always wins — display rules must never resurrect it */
[hidden] { display: none !important; }