/* ground.css — the room. Two modes, one ladder, and the ladder only goes up.
   The old ground sat at L 33%, which let a mark mean "more" by getting lighter OR darker. Four
   builders chose differently and severity ended up inverted: the rail for HIGH was brighter than
   the rail for LOW. On a deep ground there is only one direction, so that defect is no longer
   expressible. The hue is unchanged — H 212, the slate the landing art is drawn in. */
:root{
  /* SURFACES — luminance only. Never state, never rank. Only ever a background.
     Two rooms. The default is the deep blue-grey the entry globe is drawn in; the toggle is a
     white room where green is the only colour. The supporting greys in both are quieter than the
     ground, so neither room reads as one wash of a single hue. */
  /* The raise screen's blue, adopted on the founder's order 2026-08-22: the compile theatre, the
     world's loading screen and the dark room now share one ground, so raising a world and living
     in it read as one place. Same ladder discipline, same single direction. */
  --g-0:#2E5379;   /* the room */
  --g-1:#33597F;   /* raised: the detail pane, the planes, the chat card */
  --g-2:#3A6188;   /* inset: hover, the selected row, a code block, a well */

  /* BOUNDARIES — graphics, never glyphs. */
  --line:#24425F;    /* a separator you feel, not read */
  --line-2:#4A719A;  /* a boundary you read */

  /* INK — typographic rank only. Three steps. There is no fourth, because the fourth was the
     severity rail and its deletion is what makes the inverted encoding unwritable. */
  --ink:#EEF3F8;     /* the thing itself */
  --ink-2:#C6D6E3;   /* its explanation */
  --ink-3:#9FB6C9;   /* the label naming the field */

  /* OUTCOME — hue at matched luminance. Green is the product's colour; the rest are verdicts. */
  --held:#76B900;
  --broke:#EEF3F8;
  --hold:#D89C36;    /* awaiting a human, and nothing else */
  --focus:#A5E800;   /* the focus ring, and nothing else */

  /* FILL — absence. Colour is never the carrier here. */
  --hatch:repeating-linear-gradient(45deg,transparent 0 2px,var(--ink-3) 2px 4px);

  /* DEPTH — three shadows, and only these three. Raised things wear sh-1, floating things sh-2,
     and the trial column casts sh-left over the floor. */
  --sh-1:0 1px 2px rgba(0,0,0,.22),0 6px 18px rgba(0,0,0,.16);
  --sh-2:0 2px 6px rgba(0,0,0,.28),0 16px 40px rgba(0,0,0,.32);
  --sh-left:-8px 0 22px rgba(0,0,0,.1);

  --disp:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-mode="light"]{
  /* The light room: a soft grey ground so the white cards have something to float on -- pure
     white everywhere was eye-hurting -- with green as the one colour and real shadows. */
  --g-0:#E9ECEF;
  --g-1:#F7F8FA;   /* the boxes: an off-white grey, neither white nor tinted */
  --g-2:#E2E7EB;
  --line:#D0D7DD;
  --line-2:#8E9CA9;
  --ink:#1C2B36;
  --ink-2:#45535F;
  --ink-3:#6E7C89;
  --held:#4E8A00;
  --broke:#1C2B36;
  --hold:#96601A;
  --focus:#3F6100;
  --sh-1:0 1px 2px rgba(23,34,45,.07),0 8px 22px rgba(23,34,45,.11);
  --sh-2:0 2px 6px rgba(23,34,45,.1),0 18px 44px rgba(23,34,45,.16);
  --sh-left:-8px 0 22px rgba(23,34,45,.045);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--g-0);color:var(--ink);font-family:var(--disp);font-size:15px;
     line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
[hidden]{display:none !important}
/* Scrollbars show only while something is being scrolled: the thumb is ours, in green, and it
   fades out a moment after the wheel stops. `.scrolling` is set by scrollbars.js on the element. */
html{scrollbar-width:thin;scrollbar-color:transparent transparent}
.scrolling{scrollbar-color:var(--held) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;transition:background .3s}
.scrolling::-webkit-scrollbar-thumb{background:var(--held)}

/* The one visually-hidden region. Streamed tokens must never land in a live region — a screen
   reader would read the answer letter by letter — so whole sentences are posted here instead. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

@page{margin:16mm}
@media print{
  :root{--g-0:#fff;--g-1:#fff;--g-2:#F2F5F9;--line:#D5DEE7;--line-2:#8DA4BB;
        --ink:#0F1D2E;--ink-2:#33495F;--ink-3:#5A7188;
        --held:#4E7C00;--broke:#0F1D2E;--hold:#96601A}
  body{overflow:visible}
  .sheet,section,.figure{break-inside:avoid}
  .noprint{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-family:var(--mono);font-size:9px}
}
/* The arrival: the run's tokens on both rooms, the raise block, the floor during the run, and the
   furniture that waits for the end. The room's own tokens stay; these are the ones the run
   figures read through ink.js, named the way the report names them. */
:root{
  --page:var(--g-0);--card:var(--g-1);--held-d:#639B00;--ramp:#A5E800;
  --open:#3E5D14;--broke:#E05A4A;--broke-tint:#4A1F1A;--transcript:#D9A45B;
}
html[data-mode="light"]{
  --open:#CBEE8E;--broke:#C0392B;--broke-tint:#F7DAD4;--transcript:#96601A;
}

/* ── stage A to C: the raise block, in the floor before anything else mounts ── */
.raise{padding:6px 18px 16px;display:grid;gap:12px;max-width:760px}
.raise[hidden]{display:none}
.raise-say{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.rail{display:flex;gap:3px;list-style:none;margin:0;padding:0}
.rail-cell{flex:1;min-width:0;position:relative;display:grid;gap:4px}
.rail-box{position:relative;height:28px;border:1px solid var(--line-2);overflow:hidden;display:flex;align-items:center;padding:0 9px}
.rail-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--held);opacity:.28;transition:width .45s cubic-bezier(.22,.68,.32,1)}
.rail-cell[data-state="done"] .rail-fill{opacity:.45}
.rail-cell[data-state="running"] .rail-box{border-color:var(--held)}
.rail-cell[data-state="running"] .rail-fill{animation:breathe 1.4s ease-in-out infinite}
.rail-cell[data-state="failed"] .rail-box{border-color:var(--broke)}
.rail-name{position:relative;font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-cell[data-state="done"] .rail-name,.rail-cell[data-state="running"] .rail-name{color:var(--ink)}
.rail-time{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-height:1.4em;font-variant-numeric:tabular-nums}
.raise-line{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);min-height:1.5em;font-variant-numeric:tabular-nums}
.raise-line:empty{display:none}
.raise-act{margin:0}
.raise-act[hidden]{display:none}
.raise-btn{display:inline-flex;align-items:center;height:34px;padding:0 15px;border:1px solid #527E08;border-radius:8px;background:#6FAE00;color:#112006;
  font:600 12.5px var(--disp);cursor:pointer;box-shadow:0 2px 0 #4F760C}
.raise-btn:hover{background:#7CBA0D}

/* The ident during the run: one mono line and the run's clock. */
.runline{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.runline:empty{display:none}
.runclock{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.runclock:empty{display:none}

/* During a first run the header keeps only its name and the run's line: the toggle (in settings
   now), the picker, the scope and the wallet are for a second run. The strip and the drawer wait
   for stage I and fade in on it. */
.shell.firstrun .hright>*:not(.runline):not(.runclock){display:none}
.shell.firstrun .taps,.shell.firstrun .drawer{display:none}
.shell.firstrun.landed .taps.in{display:flex}
.shell.firstrun.landed .drawer.in{display:block}
.taps.in,.drawer.in{animation:fadein .5s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* The chosen name is marked by colour alone. */
.taps .tap.on,.taps .tap.on:hover{box-shadow:none;background:rgba(118,185,0,.10);color:var(--ink);font-weight:600}
.taps a.tap{text-decoration:none}

/* ── stage D on: the floor ── */
.fr{display:grid;gap:18px;max-width:720px;padding:2px 0 24px}
.fr[hidden]{display:none}
.fr-head{margin:0;font-size:24px;font-weight:650;line-height:1.2;letter-spacing:-.012em;color:var(--ink);font-variant-numeric:tabular-nums}
.fr-head b{color:var(--ink);font-weight:650}
.fr-head b.ok{color:var(--held-d)}
html:not([data-mode="light"]) .fr-head b.ok{color:var(--held)}
.fr-head b.slab{width:1.6em;height:.72em;vertical-align:-.02em}
.fr-left{margin:-8px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fr-left[hidden]{display:none}
.fr-end{display:grid;gap:12px;justify-items:start;padding-top:6px}
.fr-end[hidden]{display:none}
.fr-go{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid #527E08;border-radius:8px;background:#6FAE00;color:#112006;
  font:600 13.5px var(--disp);text-decoration:none;box-shadow:0 2px 0 #4F760C;cursor:pointer}
.fr-go:hover{background:#7CBA0D}
.fr-also{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.fr-also a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.fr-also a:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rail-cell[data-state="running"] .rail-fill,.taps.in,.drawer.in{animation:none}}
/* The room: the shell, the tab strip, the heads, and the list/detail that replaced the deck of
   boxes. The list's geometry is structurally incapable of changing when the detail changes -- they
   are siblings in a fixed grid, not parent and child. */

/* ── the marks. Three shapes and one fill, used by the room and by the trial. ── */
.ok{width:10px;height:10px;flex:none;box-sizing:border-box;display:block}
.ok.held{background:var(--held)}
/* Struck through with a mask so the row's own ground shows in the gap: at 10px colour is not a
   shape, and this pair has to survive greyscale. */
.ok.broke{background:var(--ink);
  -webkit-mask:linear-gradient(#000 0 4px,transparent 4px 6px,#000 6px 10px);
          mask:linear-gradient(#000 0 4px,transparent 4px 6px,#000 6px 10px)}
.ok.unclear{background:var(--hatch);box-shadow:inset 0 0 0 1px var(--line-2)}
/* Waiting is the same empty square as not run yet: an absence, whichever side of Run it sits on. */
.ok.queued,.ok.waiting{box-shadow:inset 0 0 0 1px var(--line-2)}
.ok.hold{background:var(--hold)}
/* It does not pulse. State changes move once and hold; the seconds go in the mono meta. */
.ok.running{box-shadow:inset 0 0 0 1px var(--ink-3);
  background:radial-gradient(closest-side,var(--ink-3) 100%,transparent) center/4px 4px no-repeat}
.ok.none{background:none;box-shadow:none}

.arc{display:inline-flex;align-items:center;gap:3px;height:8px;flex:none}
.arc i{display:block;width:12px;flex:none;
       transition:height 180ms cubic-bezier(.22,.68,.32,1),background 180ms linear}
.arc i{height:2px;background:var(--line-2)}      /* never reached */
.arc i.on{height:3px;background:var(--ink-3)}    /* survived */
.arc i.brk{height:7px;background:var(--ink)}   /* gave way here */
.arc.held i.on:last-child{background:var(--held)}
.arcnum{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}

.meter{display:block;width:64px;height:3px;background:var(--line);position:relative;overflow:hidden}
.meter::after{content:'';position:absolute;inset:0 auto 0 0;background:var(--ink-3);
              width:calc(var(--v,0) * 100%);transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.gap{margin:12px 0}
.hatchrule{height:3px;background:var(--hatch);margin-bottom:9px}


/* ── the shell ── */
.shell{position:relative;height:100%;display:grid;grid-template-rows:minmax(0,1fr);
       grid-template-columns:minmax(0,1fr);padding:12px 12px 0 0}
/* One column that cannot be widened by a row: the header's nowrap pieces used to set the floor's
   min-content and push the whole room past the viewport by their overflow. */
.floor{position:relative;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;min-width:0;min-height:0;grid-template-columns:minmax(0,1fr)}

/* The retired Agents tab's rows: a label, a list, a state word and one press. */
.planwait{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.stagestate{margin-left:auto;font:500 11.5px var(--mono);letter-spacing:.02em;color:var(--ink-3);white-space:nowrap}
.stagestate[data-state="running"],.stagestate[data-state="waiting"]{color:var(--ink)}
.stagestate[data-state="held"]{color:var(--held)}
.stagestate[data-state="broke"]{color:var(--ink);font-weight:600}
.stagerow{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 16px;padding:8px 0;border-top:1px solid var(--line)}
.stagelabel{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.stagelist{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.stagelist li{font-size:13.5px;line-height:1.5;color:var(--ink);max-width:78ch}
.stagelist.mono li{font:400 11.5px var(--mono);color:var(--ink-2)}
.stageact{margin:10px 0 0;height:30px;padding:0 13px;border:0;cursor:pointer;font:600 12.5px var(--disp);
          background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .12s,box-shadow .12s}
.stageact:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}

/* While the world is still being raised behind this screen, the strip takes a row of its own above
   the tabs rather than pushing the pane out of the grid. */
/* Pinned: a hidden strip is no grid item, and the pane then took the terminal's row and squeezed it to nothing. */
.floor>.view{grid-row:4}.floor>.drawer{grid-row:5}
.floor .rstrip{margin:0 14px 10px 16px}

.ident{display:flex;align-items:center;gap:10px;padding:8px 14px 12px 16px;min-width:0}
/* One flat bar. No chips, no boxes-inside-boxes, no rounding: the name, the button, the fact,
   and two quiet items on the right. */
.runslot{display:flex;align-items:center;gap:9px;min-width:0}
.hright{margin-left:auto;display:flex;align-items:center;gap:9px;min-width:0}
/* The note yields first: the picker, the price and the button keep their width, the sentence
   between them takes what is left and ends in an ellipsis. */
/* The sentence beside the button wraps rather than truncating: a line cut off mid-word tells the
   reader nothing, and two short lines read where one clipped line does not. */
.runslot .gonote{flex:1 1 auto;min-width:0;white-space:normal;text-wrap:balance;line-height:1.35;max-height:2.7em;overflow:hidden}
/* The price, beside the button that spends it: the figure, and under it whose rate, which model,
   read when. Two lines inside the bar's height; the figure is what the eye lands on. */
.rate{display:inline-flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.2;
      padding-right:11px;box-shadow:inset -1px 0 0 var(--line)}
.rate b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rate small{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.rate.unknown b{color:var(--ink-2)}
/* The figure's place before the quote lands: a grey bar the width of a price, breathing. */
.rate.skel b{width:6.5ch;height:13px;border-radius:3px;background:var(--line-2);animation:rate-skel 1.4s ease-in-out infinite}
@keyframes rate-skel{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.rate.skel b{animation:none}}
@media(max-width:900px){.rate small{display:none}}
.wallet{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;color:var(--ink-2)}
.wallet svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wallet b{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ident .mk{height:34px;width:auto;flex:none;display:block}
/* The product's own name is the one thing on this bar that must never be cut: a customer reading
   "Refund & su..." is reading our layout, not their product. It keeps its width and the sentence
   beside the button gives way first. */
.ident .nm{font-size:15px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;max-width:38ch}

.taps{display:flex;align-items:stretch;border-bottom:1px solid var(--line);overflow-x:auto;
      height:40px;padding-left:12px}
.tap{position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 12px;background:transparent;
     border:0;cursor:pointer;white-space:nowrap;font-family:var(--disp);
     font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink-3);
     box-shadow:inset 0 -2px 0 transparent;transition:color .12s,box-shadow .12s}
.tap:hover{color:var(--ink-2)}
.tap.on,.tap.on:hover{color:var(--ink)}
.tap b{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tap.on b{color:var(--ink)}
.mode{flex:none;width:30px;height:30px;display:grid;place-content:center;border:0;
      background:transparent;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.mode:hover{background:var(--g-2);color:var(--ink)}
.mode svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.mode .moon{display:none;fill:currentColor;stroke:none}
html[data-mode="light"] .mode .sun{display:none}
html[data-mode="light"] .mode .moon{display:block}
/* Named, not just drawn. */
.feedback{display:inline-flex;align-items:center;gap:6px;flex:none;height:26px;padding:0 9px;
          border:1px solid var(--line);background:transparent;color:var(--ink-2);
          font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;
          transition:border-color .15s,color .15s}
.feedback:hover{border-color:var(--held);color:var(--ink)}
.feedback svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feedback[data-unread]{border-color:var(--held);color:var(--ink)}
.feedback[data-unread]::after{content:"";width:6px;height:6px;background:var(--held)}

/* The homepage of the session: three live instruments, the one button, then what the run found.
   Each instrument is an animated figure with its numbers beside it -- the meter IS the design. */
.insts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:8px 0 2px}
.inst{background:var(--g-1);border:1px solid var(--line);box-shadow:var(--sh-1);cursor:pointer;color:inherit;font:inherit;text-align:left;
      padding:16px 18px;display:flex;gap:18px;align-items:center;min-width:0;overflow:hidden}
.inst:hover{border-color:var(--held)}
.inst .ic{width:150px;height:150px;flex:none;image-rendering:pixelated}
/* One column beside a full-width chat; nudge the chat a little narrower and the three snap into
   a row. In the tight band the art gives one step so the row always fits; wide, it is full size. */
.insts{grid-template-columns:1fr}
@container (min-width:800px){
  .insts{grid-template-columns:repeat(3,1fr)}
  .inst{padding:12px 14px;gap:14px}
  .inst .ic{width:118px;height:118px}
}
@container (min-width:1100px){
  .inst{padding:16px 18px;gap:18px}
  .inst .ic{width:150px;height:150px}
}
.iwords{display:flex;flex-direction:column;gap:2px;min-width:0}
.inum{font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.iname{font-size:12px;font-weight:500;color:var(--ink-2)}
.isub{font-size:11.5px;color:var(--ink-3)}

/* The view is a fixed two-row grid: the head, then the pane. Neither scrolls the page. */
/* The same rule as the floor's, for the same reason: an undeclared grid column is `auto`, whose
   floor is its own min-content, so the widest thing in the report set the width of the room and the
   run's own head sat 300px off the right edge of a phone. */
.view{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);
      min-width:0;min-height:0;overflow:hidden;container-type:inline-size;padding:0}
#head{padding:16px clamp(14px,2vw,24px) 0}
/* A tab with no head leaves no white band for the page to scroll under. */
#head:empty{display:none}
#drawn{overflow-y:auto;padding:16px clamp(14px,2vw,24px) 32px;min-height:0}

.band{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
      font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink-2);
      padding:0 0 9px;border-bottom:1px solid var(--line);margin:18px 0 0}
#head>.band:first-child{margin-top:0}
.band span:last-child{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.aside{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:74ch}
.none{font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:56ch;margin:14px 0 0}

.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--sh-1)}
@container (max-width:720px){.planes{grid-template-columns:1fr}}
.plane{background:var(--g-1);padding:13px 15px 14px}
.plane .pn{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.plane .pv{font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.plane .ps{font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.plane .meter{width:auto;margin-top:10px}

.gorow{display:flex;align-items:center;gap:13px;margin:16px 0 0;flex-wrap:wrap}
.go{display:inline-flex;align-items:center;height:30px;background:var(--held);
    color:#FFFFFF;border:0;padding:0 13px;cursor:pointer;
    font-size:12.5px;font-weight:600;letter-spacing:.005em;box-shadow:var(--sh-1);
    transition:filter .12s,box-shadow .12s}
.go:hover{filter:brightness(1.08)}
.go:active{filter:brightness(.95)}
/* Running wears the same solid green as the button it was -- only the icon and the word change. */
.go.live,.go.live:hover{filter:none;cursor:default}
.go:disabled:not(.live){cursor:default;background:transparent;color:var(--ink-2);filter:none;
    box-shadow:inset 0 0 0 1px var(--line-2)}
.gonote{font-size:12px;color:var(--ink-3)}
.ghost{background:transparent;color:var(--ink-2);border:0;box-shadow:inset 0 0 0 1px var(--line-2);
       padding:7px 12px;cursor:pointer;font-size:12.5px;font-weight:500;
       transition:color .12s,box-shadow .12s}
.ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.ghost:disabled{color:var(--ink-3);cursor:default}
.filters{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 2px}
.fchip{font-family:var(--mono);font-size:10.5px;border:0;
       background:var(--g-2);color:var(--ink);padding:5px 9px;cursor:pointer;transition:color .12s,background .12s}
/* Shown is the resting state, so it is quiet; switched off has to be unmistakable, and a strike
   says it without spending the green. */
.fchip[aria-pressed="false"]{background:transparent;color:var(--ink-3);text-decoration:line-through;
                             box-shadow:inset 0 0 0 1px var(--line-2)}
.fchip:hover{color:var(--ink)}

/* ── the list and its detail ── */
.pane{display:grid;grid-template-columns:minmax(268px,336px) minmax(0,1fr);
      grid-template-rows:minmax(0,1fr);min-height:0;position:relative;margin-top:14px}
.index{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0;border-top:1px solid var(--line)}
.ihead{display:grid;grid-template-columns:26px 10px minmax(0,1fr) auto;gap:0 10px;align-items:center;
       height:28px;padding:0 12px 0 10px;border-bottom:1px solid var(--line);
       font-size:10.5px;font-weight:500;color:var(--ink-3)}
.rows{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0}
.rows:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* 44px, fixed, forever. A fixed row height is what makes the list scroll-stable, patchable in
   place, and safe to insert into above the fold. */
.row{display:grid;grid-template-columns:26px 10px minmax(0,1fr) auto;gap:0 10px;align-items:center;
     height:44px;padding:0 12px 0 10px;border-bottom:1px solid var(--line);background:transparent;
     cursor:pointer;transition:background 90ms linear}
.row:hover{background:var(--g-1)}
.row[aria-selected="true"]{background:var(--g-2);box-shadow:inset 2px 0 0 var(--ink)}
.row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.row .rk{font-family:var(--mono);font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
/* One line, ellipsised. The full title is the sheet's h2 -- a list that wraps is a list that
   reflows, and reflow is the whole complaint. */
.row .ti{font-size:13.5px;line-height:1.2;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row[aria-selected="true"] .ti{color:var(--ink)}
.row .right{display:flex;align-items:center;justify-content:flex-end;font-family:var(--mono);
            font-size:10px;color:var(--ink-3);white-space:nowrap}
/* A row that has just been settled is FILLED, not faded: the row was already on the list as a
   planned trial, and fading its ink in reads as the row itself arriving. */
.row.fresh .ti,.row.fresh .right{animation:ink 160ms linear both}
@keyframes ink{from{color:var(--line)}}

/* The pen, while a line is being written. It marks the place the words are landing. */
.pen::after{content:'';display:inline-block;width:.45em;height:1em;vertical-align:-.14em;margin-left:2px;
      background:var(--held);animation:pen 1s steps(1,end) infinite}
@keyframes pen{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pen::after{animation:none}}

.detail{background:var(--g-1);border-left:1px solid var(--line);border-top:1px solid var(--line);
        overflow-y:auto;overscroll-behavior:contain;min-width:0;min-height:0;
        padding:22px clamp(18px,2.4vw,30px) 44px;box-shadow:var(--sh-1)}
.detail:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.sheet{max-width:66ch;animation:sheet 180ms cubic-bezier(.22,.68,.32,1) both}
@keyframes sheet{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* The opened row's sheet, standing between the rows. */
.sheetbox{padding:18px clamp(14px,2vw,24px) 26px 46px;border-bottom:1px solid var(--line);background:var(--g-1);
          animation:sheet 180ms cubic-bezier(.22,.68,.32,1) both}
.detail{display:none}

/* The homepage never splits: the findings list is the page, and a row opens its sheet over it.
   No table header either -- "# Case Arc" over the findings made the page read as a data pane. */
.pane.solo{grid-template-columns:minmax(0,1fr)}
.pane.solo .ihead{display:none}
.pane.solo .index{border-top:0}
/* Parked off-screen it is INVISIBLE, shadow included -- a translated pane kept painting its
   shadow back over the floor's right edge as a border that never finished. */
.pane.solo .detail{position:absolute;inset:0;z-index:2;border-left:0;box-shadow:none;
                   visibility:hidden;transform:translateX(100%);
                   transition:transform 220ms cubic-bezier(.22,.68,.32,1),visibility 0s 220ms}
.pane.solo.showing .detail{visibility:visible;transform:none;
                   transition:transform 220ms cubic-bezier(.22,.68,.32,1)}
.pane.solo .detail .back{display:inline-block}

/* Narrow: the detail becomes a sheet over the list. A container query, not a media query -- the
   trial is drag-resizable, so the viewport width lies about this column. */
@container (max-width:720px){
  .pane{grid-template-columns:minmax(0,1fr)}
  .detail{position:absolute;inset:0;z-index:2;border-left:0;
          transform:translateX(100%);transition:transform 220ms cubic-bezier(.22,.68,.32,1)}
  .pane.showing .detail{transform:none}
  .detail .back{display:inline-block}
}

.dmeta{font-size:11px;font-weight:500;color:var(--ink-3);margin:0 0 9px}
.sheet h2{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0 0 10px;
          color:var(--ink);overflow-wrap:anywhere}
.dverd{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.lede{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.lab{display:block;font-size:11px;font-weight:600;letter-spacing:.01em;
     color:var(--ink-3);margin:26px 0 8px}
.lab.hold{color:var(--hold)}
.keel{margin:0;padding:3px 0 3px 13px;border-inline-start:2px solid var(--held);font-size:14px;
      line-height:1.6;color:var(--ink);font-style:italic;overflow-wrap:anywhere}
.defends{display:flex;align-items:center;gap:11px;margin:0;font-size:14px;color:var(--ink)}
.defends .mv{font-size:11px;color:var(--ink-3);white-space:nowrap}
.facts{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.7;overflow-wrap:anywhere}

.turns{list-style:none;margin:0;padding:0}
.turns li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:11px;align-items:baseline;
          padding:5px 0;border-top:1px solid var(--line)}
.turns li:first-child{border-top:0}
.turns .lvl{font-size:10.5px;font-weight:500;color:var(--ink-3);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turns li.brk .lvl{color:var(--ink)}
.turns li.brk .at{color:var(--ink)}
.turns .at{font-size:13px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
@container (max-width:520px){.turns li{grid-template-columns:1fr;gap:2px}}

.checks{list-style:none;margin:0;padding:0}
.checks li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;align-items:baseline;padding:5px 0}
.checks li .ok{margin-top:5px}
.checks span{font-size:13px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.checks .dim{display:block;font-size:10px;font-weight:500;color:var(--ink-3);margin-bottom:1px}
.checks .ruled{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.checks blockquote.keel{margin-top:5px}
.paths{display:flex;flex-direction:column;font-family:var(--mono);font-size:10.5px;line-height:1.8;color:var(--ink-2)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
pre.mono{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-2);background:var(--g-2);
         padding:10px 12px;margin:0;overflow-x:auto;white-space:pre}

/* ── the figures ── */
.figures{max-width:900px;padding-top:16px}
.figure{margin:14px 0 0}
.runline{width:100%;height:auto;display:block;overflow:visible}
.runline .grid{stroke:var(--line);stroke-width:1}
.runline .axis{font-family:var(--mono);font-size:9px;fill:var(--ink-3)}
.runline .path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.runline .dot{fill:none;stroke:var(--line-2);stroke-width:2}
.runline .dot.cur{fill:var(--ink);stroke:none}
.runline .path.held{stroke:var(--held);stroke-width:2;stroke-dasharray:4 3}
.runline .dot.held{stroke:var(--held);stroke-width:2}
.aside .heldkey{color:var(--held)}
.tracks{margin-top:14px}
.track{display:grid;grid-template-columns:170px minmax(0,1fr) 116px;gap:12px;align-items:center;
       padding:7px 0;border-top:1px solid var(--line)}
.track .lbl{font-size:11.5px;font-weight:500;color:var(--ink-3);
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track .rail{position:relative;height:11px;background:var(--line);}
.track .mk{position:absolute;top:0;width:9px;height:11px;margin-left:-4px;display:block}
.track .mk.prev{box-shadow:inset 0 0 0 2px var(--line-2)}
.track .mk.cur{background:var(--ink)}
/* Ink, never held/broke: the join spans two readings, and no floor exists per dimension to call one
   of them an improvement. */
.track .join{position:absolute;top:4px;height:3px;width:0;background:var(--ink-3);
             transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.track .val{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.track .notest{font-size:10.5px;color:var(--ink-3);padding-left:6px}

/* ── the sandbox drawer: a terminal, deliberately, identical in both rooms. The ground is OUR
   green taken dark, the prompt and accents are the green itself, and every word is the house blue
   ink -- green text on green ground read as soup. ── */
.drawer{border:0;margin:0 6px 0 0;font-family:var(--mono);overflow:hidden;border-radius:0 12px 0 0;
        /* a neutral dark ground with the pixel texture; green is chrome, never the wall */
        background:
          repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
          repeating-conic-gradient(rgba(255,255,255,.022) 0% 25%,transparent 0% 50%) 0 0/4px 4px,
          #14181C;
        /* a doubled pixel frame; corners stay square -- pixels are square */
        box-shadow:inset 0 0 0 2px rgba(118,185,0,.4),inset 0 0 0 4px rgba(118,185,0,.1)}
.dbar{display:flex;align-items:center;gap:4px;padding-right:6px}
.dhead{display:flex;align-items:center;gap:9px;padding:0 14px;height:34px;cursor:pointer;flex:none;
       min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:11.5px;
       letter-spacing:.07em;color:#A9BCCC}
.dhead:hover{color:#D5E1EA}
.dhead .prompt{color:#76B900;letter-spacing:0;margin-right:2px}
.dhead .chev{display:grid;place-content:center;transition:transform .2s;margin-left:2px}
.dhead .chev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dhead[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dbody{padding:4px 14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
       gap:14px 26px;align-items:start;max-height:38vh;overflow-y:auto}
.dbody dl{margin:0;min-width:0;overflow:hidden}
.dbody dl.wide{grid-column:1/-1}
.dbody dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8FA5B8}
.dbody dd{margin:5px 0 0;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:#E2EAF1;
          overflow-wrap:anywhere;min-width:0}
.dbody dd.lock{color:#EDF2F7}
.dbody dd.lock::before{content:'';display:inline-block;width:7px;height:7px;background:#76B900;margin-right:7px}
.dbody dd.many{display:flex;flex-wrap:wrap;gap:4px 8px}
.dbody dd.many span{white-space:normal;background:#252D37;padding:2px 8px;max-width:100%;overflow-wrap:anywhere}
/* In the light room the terminal turns the lamp on: the same green family, pale. */
html[data-mode="light"] .drawer{
  background:
    repeating-linear-gradient(0deg,rgba(28,43,54,.05) 0 1px,transparent 1px 3px),
    repeating-conic-gradient(rgba(28,43,54,.04) 0% 25%,transparent 0% 50%) 0 0/4px 4px,
    #F1F3F0;
  box-shadow:inset 0 0 0 2px rgba(92,145,0,.5),inset 0 0 0 4px rgba(92,145,0,.14)}
html[data-mode="light"] .dhead{color:#5A6B7C}
html[data-mode="light"] .dhead:hover{color:#1C2B36}
html[data-mode="light"] .dhead .prompt{color:#5C9100}
html[data-mode="light"] .dbody dt{color:#66757F}
html[data-mode="light"] .dbody dd{color:#1F3140}
html[data-mode="light"] .dbody dd.lock{color:#14202C}
html[data-mode="light"] .dbody dd.lock::before{background:#76B900}
html[data-mode="light"] .dbody dd.many span{background:#E3E8EB}


.pop{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:180px;padding:4px;
     background:var(--g-1);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-2)}
.pop[hidden]{display:none}
.pop button{display:block;width:100%;border:0;background:transparent;cursor:pointer;padding:8px 11px;
            text-align:left;font-family:var(--disp);font-size:13px;color:var(--ink-2)}
.pop button:hover{background:var(--g-2);color:var(--ink)}
.pop button.locked{cursor:default;color:var(--ink-3)}
.pop button.locked:hover{background:transparent}

@media(prefers-reduced-motion:reduce){.sheet,.row.fresh{animation:none}.detail{transition:none}}

/* The fixture bar itself is drawn by lib/fixture-bar.ts, which four screens share.
   The shell is height:100%, so the bar has to take a row rather than push it off the bottom. */
body.hasfix{display:flex;flex-direction:column}
body.hasfix .shell{flex:1;height:auto;min-height:0;width:100%}

.ident .nm{display:flex;align-items:baseline;gap:8px;min-width:0}
.ident .brand{color:var(--ink-3);font-weight:500}
.ident .sep{color:var(--ink-3);font-style:normal;opacity:.65}
.ident #pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The rulebook screen's isometric bars, reused: one material for the whole walk rather than a new
   chart per tab. Same geometry, same ramp, same tabular count under each bar. */
.found { margin: 0 0 26px; }
.foundhead { margin: 0 0 14px; font: 500 15px/1.2 var(--disp); }
.found .graph { display: grid; padding-top: 26px; gap: 16px 4px; align-items: end; margin: 0 0 20px; }
.found .graph .slot { appearance: none; border: 0; background: none; padding: 0 2px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; min-width: 0; font: inherit; color: inherit; }
.found .graph .slot canvas { width: 100%; max-width: 88px; height: auto; display: block; image-rendering: pixelated; }
.found .graph .slot b { margin-top: 5px; font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.15; }
.found .graph .slot span { font-family: var(--mono); font-size: 8.5px; line-height: 1.35; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; overflow-wrap: anywhere; }
.found .graph .slot:hover b { color: var(--ink); }
.found .graph .slot:hover span { color: var(--ink-2); }
.found .graph .slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* One card per kind of thing the run drives: the share that held, and what that kind checks. The
   figure above carries how many; nothing here repeats it. */
.found-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0 0 22px; }
.found-card { display: grid; gap: 6px; align-content: start; padding: 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--g-1); }
.found-card:hover { border-color: var(--line-2); }
.found-card.hurt { border-color: var(--line-2); }
.found-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.found-pct { font: 500 26px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--held); }
.found-card.hurt .found-pct { color: var(--ink); }
.found-n { font: 400 11px/1.3 var(--mono); color: var(--ink-3); }
.found-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.found-says { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.found-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px;
  font: 400 11px/1 var(--mono); color: var(--ink-3); }
.band-key::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; }
.band-key.held::before { background: var(--held); }
.band-key.broke::before { background: var(--ink); }
.band-key.unclear::before { background: var(--hold); }
.band-key.broke { color: var(--ink); }

/* The customer's own rules lead the page: the only cards on it they wrote themselves. */
.found-card.mine { background: var(--g-2); border-color: var(--line-2); }

/* ── the overview, as one column that patches in place ──
   The head no longer holds its own height: on the run tab the view scrolls as one document and the
   list sits under the head rather than being squeezed by it. The sheet a row opens covers the
   whole column. */
.view.column{overflow-y:auto;position:relative}
.view.column .pane.solo{position:static;min-height:0;margin-top:0}
.view.column .pane.solo .index{border-top:1px solid var(--line);margin:8px clamp(14px,2vw,24px) 40px}
.view.column .pane.solo .rows{overflow:visible}
.view.column .pane.solo .detail{position:absolute;top:0;left:0;right:0;bottom:auto;height:100%;z-index:2}
.view.column #head{padding-bottom:0}

.rv{display:grid;gap:18px;padding:2px 0 6px}
.rv-status{display:grid;gap:6px}
.rv-line{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.rv-meta{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
         font-variant-numeric:tabular-nums}
/* The one bar. Ink, never green: it moves because work finished, and progress is not an outcome. */
.rv-rail{height:3px;background:var(--line);position:relative;overflow:hidden;margin-top:4px}
.rv-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);
         transition:width 420ms cubic-bezier(.22,.68,.32,1)}
/* While the run is on: the door being driven and what has come back on it, under the rail. */
.rv-driven{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.rv-quote{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:78ch}
.rv-skipped{display:grid;gap:6px}
.rv-skip{display:flex;align-items:baseline;gap:10px;margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.rv-skip .ok{position:relative;top:2px}
.rv-compile{margin-left:auto;flex:none;border:0;background:none;cursor:pointer;padding:0;
            font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
.rv-compile:hover{color:var(--ink)}
.rv-h{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}

/* The trials in flight, one card each: who is asking, which turn, what was said, what came back. */
.rv-lanegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rv-lane{display:grid;gap:5px;padding:12px 13px;border:1px solid var(--line);background:var(--g-1);min-width:0}
.rv-lane-title{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-lane-kind{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
              color:var(--ink-3);margin-right:8px}
.rv-lane-kind:empty{display:none}
.rv-lane-meta{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv-said{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-reply{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;
          display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rv-lane.waiting .rv-reply{color:var(--ink-3)}
.rv-lane.waiting .rv-reply:empty::before{content:'waiting for the reply';font-family:var(--mono);font-size:10px;letter-spacing:.08em}

/* What it found: the rulebook screen's bars once, then cards whose numbers move in place. */
.rv-found .graph{display:grid;padding-top:22px;gap:16px 4px;align-items:end;margin:0 0 16px}
.rv-found .graph .slot{appearance:none;border:0;background:none;padding:0 2px 2px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;min-width:0;font:inherit;color:inherit}
.rv-found .graph .slot canvas{width:100%;max-width:88px;height:auto;display:block;image-rendering:pixelated}
.rv-found .graph .slot b{margin-top:5px;font-family:var(--mono);font-size:15px;font-weight:500;
  color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1.15}
.rv-found .graph .slot span{font-family:var(--mono);font-size:8.5px;line-height:1.35;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;overflow-wrap:anywhere}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.rv-card{display:grid;gap:6px;align-content:start;padding:14px;cursor:pointer;border:1px solid var(--line);
         background:var(--g-1)}
.rv-card:hover{border-color:var(--line-2)}
.rv-card.hurt{border-color:var(--line-2)}
.rv-card.mine{background:var(--g-2)}
.rv-card.quiet .rv-pct{color:var(--ink-3)}
.rv-card-top{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.rv-pct{font:500 24px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--held)}
.rv-card.hurt .rv-pct{color:var(--ink)}
.rv-n{font:400 11px/1.3 var(--mono);color:var(--ink-3)}
.rv-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.rv-says{margin:0;font-size:12px;line-height:1.45;color:var(--ink-2)}
.rv-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;font:400 11px/1 var(--mono);color:var(--ink-3)}

/* A row this run never dispatched: an outline square, struck through the middle. */
.ok.skipped{box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(var(--line-2),var(--line-2)) center/100% 1px no-repeat}

/* The run picker, beside the product's name. */
.runpick{position:relative;display:inline-flex}
.runpick-trigger{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:0;
  background:transparent;color:var(--ink-3);cursor:pointer;font:500 11px var(--mono);letter-spacing:.06em}
.runpick-trigger:hover,.runpick-trigger[aria-expanded="true"]{color:var(--ink);background:var(--g-2)}
.runpick-trigger svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.runpick-menu{min-width:280px;left:auto;right:0}
.runpick-menu button{display:grid;gap:2px}
.runpick-menu button b{font-size:12.5px;font-weight:600;color:var(--ink)}
.runpick-menu button span{font:400 10.5px var(--mono);color:var(--ink-3)}
.runpick-menu button.on{background:var(--g-2)}

.quiet{background:var(--g-2);border-radius:8px;padding:9px 12px;display:grid;gap:4px}
@media(prefers-reduced-motion:reduce){.rv-fill{transition:none}}

/* The map of the run: one column of stages, in the order the worker drives them. The rail on each
   stage fills because rows settled; the number on the left is the order, not a score. */
.rv-map{display:grid;gap:2px}
.rv-stage{display:grid;grid-template-columns:34px 1fr;gap:0 10px;padding:10px 0;border-top:1px solid var(--line)}
.rv-stage:last-child{border-bottom:1px solid var(--line)}
.rv-stage-n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);padding-top:2px}
.rv-stage[data-state="running"] .rv-stage-n,.rv-stage[data-state="done"] .rv-stage-n{color:var(--ink)}
.rv-stage-body{display:grid;gap:3px}
.rv-stage-name{font-size:13px;font-weight:600;color:var(--ink)}
.rv-stage[data-state="planned"] .rv-stage-name{color:var(--ink-2)}
.rv-stage-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}
.rv-stage.hurt .rv-stage-count{color:var(--ink)}
.rv-stage-says{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:78ch}
.rv-stage-rail{display:block;height:2px;background:var(--line);position:relative;overflow:hidden;margin-top:6px}
.rv-stage-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);transition:width .4s ease-out}
.rv-stage[data-state="done"] .rv-stage-fill{background:var(--ink)}
.rv-stage.hurt .rv-stage-fill{background:var(--ink)}

/* Work in flight, behind the settled fill on the same rail: a trial opening is work that
   finished, and it moves the rail a step before its verdict does. A step below the settled ink. */
.rv-flight,.rv-stage-flight{position:absolute;inset:0 auto 0 0;width:0;background:var(--line-2);
                            transition:width 420ms cubic-bezier(.22,.68,.32,1)}
@media(prefers-reduced-motion:reduce){.rv-flight,.rv-stage-flight{transition:none}}

/* The doors: one pixel door per place the product answers, in a row, the name and what this run
   holds for it under each. The one this run drives is marked by colour alone, the way a selected
   tab is: full ink on the name, full ember in the doorway. */

/* The palette's fact cards: the same frame as the three with art, one number and one line. */
.inst.plain{align-items:flex-start;padding:14px 16px}
.inst.plain .inum{font-size:22px}
.inst.hurt .inum{color:var(--ink)}
.rv-go{margin:2px 0 0;font-size:13.5px;font-weight:600;color:var(--ink)}

/* The doors as buttons: the product's door open and lit, the team's shut. */

/* The three lanes: one row, never a wall of sets. */
.rv-lanegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:900px){.rv-lanegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* After the run: the facts under the verdict, the columns where it gave way, and what was learned. */
.rv-facts{margin:2px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-2)}
.rv-gave{display:grid;gap:8px}
.rv-bars{display:grid;gap:12px 10px;align-items:end}
.rv-bar{appearance:none;border:0;background:none;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;
        display:grid;justify-items:center;gap:3px;width:100%}
.rv-bar canvas{display:block;image-rendering:pixelated}
.rv-bar-pct{font:500 15px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.rv-bar-name{font-size:12px;font-weight:600;color:var(--ink);text-align:center}
.rv-bar-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);text-align:center;line-height:1.4}
.rv-bar:hover .rv-bar-name{color:var(--held)}
.rv-learned{display:grid;gap:6px}
.rv-read{display:grid;gap:6px}
.rv-read p{margin:0;font-size:13px;line-height:1.55;color:var(--ink);max-width:78ch}
/* The shares, in the bars' material. The words sit under the figure, never above it. */
.rv-pies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin-top:10px;align-items:start}
.rv-pie{display:grid;justify-items:center;gap:3px;margin:0;min-width:0}
.rv-pie canvas{display:block;image-rendering:pixelated}
.rv-pie figcaption{display:grid;justify-items:center;gap:3px;min-width:0}
.rv-pie-name{font-size:12px;font-weight:600;color:var(--ink);text-align:center}
.rv-pie-legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);text-align:center;line-height:1.5;max-width:30ch}

.rv-gate{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.rv-bar-count{min-height:2.9em}

/* How it behaves: two columns of observations with the words it said. */
.rv-habits{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.rv-habit-head{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rv-habit{margin:0 0 12px;font-size:13px;line-height:1.45}
.rv-habit b{display:block;font-weight:500;color:var(--ink)}
.rv-habit q{display:block;color:var(--ink-2);font-style:italic;quotes:'\201C' '\201D'}
.rv-habit-more{margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
@media (max-width:760px){.rv-habits{grid-template-columns:1fr}}

/* The funnel: one figure per layer this run stopped at, in the pies' material, a sentence under each. */
.rv-paid{margin-top:26px}
.rv-paid-figs{display:grid;gap:8px;margin:0 0 4px}
.rv-paid-said{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.rv-paid-foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:18px}
.rv-paid-open{padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.rv-paid-open:hover{border-color:var(--ink-3)}
.rv-paid-price{margin:0;font-size:12.5px;color:var(--ink-2)}
.rv-paid-wall{margin-top:14px}

/* ── the arrival: the loading page, then the room one thing at a time ── */
.join{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#2E5379;
      transition:opacity .7s ease,visibility .7s}
.join.gone{opacity:0;visibility:hidden}
#world{width:min(300px,52vw);height:min(300px,52vw);image-rendering:pixelated;display:block}
/* Veiled until its turn: in place, invisible, then it settles in. */
/* Nothing on this screen fades into existence. A thing that has not arrived stands as its own
   shape in grey, at its own size, in its own place; when it arrives it is FILLED, in place. No
   opacity ramp and no slide: a fade is a thing appearing from nowhere, and the eye has nothing to
   walk. One rule for every region, because the moment one of them fades the whole room reads as a
   page still loading. */
.veil{transition:opacity .34s cubic-bezier(.22,.68,.32,1)}
/* Nothing waits as a grey bar. A line that has not been written yet takes no room at all, so the
   page grows downward as the words arrive rather than filling in slots that were already standing
   empty. A button holds its place and fades in, because its place is beside things already read. */
p.veil:not(.in),div.veil:not(.in),h1.veil:not(.in),button.veil:not(.in){opacity:0}
button.veil:not(.in){pointer-events:none}
/* A region that has not arrived keeps its own layout and greys its own parts: a tab stays tab
   shaped, a button stays button shaped, the identity bar keeps its columns, and nothing jumps when
   the row arrives. They are invisible rather than grey: a grey slab is a picture of a thing that is
   not there yet, and the eye reads it as content it cannot make out. */
.shell.arriving .ident:not(.in) > *,.shell.arriving .taps:not(.in) > *,
.shell.arriving .drawer:not(.in) > *{
      opacity:0;transition:opacity .34s cubic-bezier(.22,.68,.32,1)}
/* A rule with nothing on either side of it is furniture for content that has not arrived. The tab
   row and the list keep their rules once they hold something; until then they draw none. */
.shell.arriving .taps:not(.in){border-bottom-color:transparent;background:transparent}
.shell.arriving .view .pane .index,.shell.arriving .index{border-top-color:transparent}
.taps,.index{transition:border-color .34s ease,background-color .34s ease}
.rv-surfaces{margin:0 0 4px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.iline{margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.rv-words{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink);max-width:70ch;min-height:1.5em}
.rv-plan{justify-self:start;width:max-content;margin:10px 0 18px;padding:7px 12px;border:0;background:transparent;color:var(--ink);font:600 12.5px var(--disp);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .12s}
.rv-plan:hover{box-shadow:inset 0 0 0 1px var(--held)}

/* The skeleton: the box and its art stand from the first frame; the words are grey bars until the
   reveal reaches the card, then they fade in and the art takes the room's inks. */
.inst.skel{cursor:default}
.inst.skel .inum,.inst.skel .iname,.inst.skel .isub,.inst.skel .iline{opacity:0}
.inst .inum,.inst .iname,.inst .isub,.inst .iline{transition:opacity .4s ease}
/* The price, pointed at: the whole bill in plain English, built from the page. */
.rate{position:relative;cursor:default;outline:none}
.rate:focus-visible{box-shadow:inset -1px 0 0 var(--line),0 2px 0 var(--held)}
.ratetip{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:44ch;padding:10px 12px;
         border:1px solid var(--line-2);background:var(--g-1);color:var(--ink);font:400 12.5px/1.5 var(--disp);
         white-space:normal;text-align:left;box-shadow:var(--sh-1)}
.rate:hover .ratetip,.rate:focus-within .ratetip{display:block}
.rv-words{margin:14px 0 0}

/* ── every tab in one language: a lead in sentences, mono-caps labels, rows and cards that read as
   sentences, a state word, and nothing marked by a strip. ── */
.tablead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:baseline;margin:4px 0 6px}
.tabhow{margin:0;font-size:14px;line-height:1.55;color:var(--ink);max-width:76ch}
.tabsum{font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.aside{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:74ch}

/* The filters: each group under its own label; the chosen value is ink and heavy, nothing more. */
.sift{display:grid;gap:6px;margin:12px 0 4px}
.siftgroup{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 4px}
.siftlabel{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);min-width:84px}
.siftgroup button{appearance:none;border:0;background:transparent;padding:4px 8px;cursor:pointer;font:400 12.5px var(--disp);
                  color:var(--ink-3);transition:color .12s}
.siftgroup button:hover{color:var(--ink-2)}
.siftgroup button[aria-pressed="true"]{color:var(--ink);font-weight:600}

/* The list: a taller row, the title in ink, its facts under it in mono, the chosen row by colour. */
.ihead{height:26px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.row{height:52px}
.row .ti{font-size:14px;color:var(--ink)}
.row .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink-3)}
.row[aria-selected="true"]{background:var(--g-2);box-shadow:none}
.ghead{padding:14px 12px 6px 10px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* The sheet: the same labels as the plan's cards, the title a little quieter. */
.sheet h2{font-size:18px}
.dmeta{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.lab{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
     margin:22px 0 8px;padding-top:10px;border-top:1px solid var(--line)}
.lab.hold{color:var(--hold)}

/* Earlier runs: one card each, the verdict as a sentence, our fault said as ours. */
.runs{display:grid;gap:10px;margin-top:4px}
.runrow{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;
        padding:14px 18px;border:1px solid var(--line);background:var(--g-1)}
.runrow b{font-size:14px;font-weight:600;color:var(--ink)}
.runwhen,.runlen{font:400 11px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.runsaid{font-size:13.5px;line-height:1.5;color:var(--ink)}
.runfault{display:block;font-size:12.5px;color:var(--ink-2)}
.runhere{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* Your numbers: the same card as the plan's stages, with its labels. */
#drawn .outcomes-page h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
#drawn .outcomes-lede{font-size:14px;color:var(--ink);max-width:76ch;margin:8px 0 18px}
#drawn .outcome-card{border-radius:0;background:var(--g-1);min-height:0;gap:6px;padding:16px 18px 14px}
#drawn .outcome-card .stagelabel{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
#drawn .outcome-why{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
#drawn .outcome-proof{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink)}
#drawn .outcome-proof b{font:500 11px var(--mono);color:var(--ink-3)}
#drawn .outcome-proof b.failed{color:var(--ink)}
#drawn .outcome-segment{font:400 11px var(--mono);color:var(--ink-3)}

/* The agents: one card each, the same rows as the plan's stages. */
.agentgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px;margin-top:6px}
.agent{display:grid;align-content:start;gap:2px;padding:16px 18px 14px;border:1px solid var(--line);background:var(--g-1)}
.agenthead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.agentname{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.agentkind{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
.agenthead .stagestate{margin-left:auto}
.agentjob{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* Production, in the same language: square cards on the room's surface, the labels ours. */
#drawn .production-notice,#drawn .production-form,#drawn .production-choice{border-radius:0;background:var(--g-1);border-color:var(--line)}
#drawn .production-field input{border-radius:0}
#drawn .production-form-head b,#drawn .production-notice-copy b{font-size:15px;font-weight:600;letter-spacing:-.01em}
#drawn .production-field span{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ── the overview, built like the onboarding screens: art left, headline with its number in green,
   one sentence, the plan written under it. The same head counts the run and then reads the verdict. */
.rv{display:grid;gap:0;padding:6px 0 18px}
.rv-top .rv-art{float:none;width:100%;max-width:260px;height:auto;margin:0}
.rv-top{display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;align-items:center}
/* Every block of the report is allowed to be narrower than its widest line. A grid item's
   default floor is its own min-content, so one wide figure in the metrics set the width of the
   whole room and on a phone the run's head sat 300px off the right edge of the screen. */
.rv{grid-template-columns:minmax(0,1fr)}
.rv>*,.rv-top>*{min-width:0}
.rv-art{width:190px;height:190px;display:block;image-rendering:pixelated;justify-self:center;margin-top:0}
/* While the run plays the basin fills beside the head, one block per finished trial. */
.rv-words{min-width:0;padding-top:14px}
.rv-head{margin:0;font-size:27px;font-weight:600;line-height:1.22;letter-spacing:-.022em;color:var(--ink);
         max-width:22ch;font-variant-numeric:tabular-nums;min-height:1.22em}
.rv-head b{color:var(--held);font-weight:600}
.rv-line{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:62ch;min-height:1.6em;
         font-variant-numeric:tabular-nums}
.rv-rail{height:4px;background:var(--line);position:relative;overflow:hidden;margin:16px 0 0;max-width:62ch}
.rv-rail[hidden]{display:none}
.rv-flight{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-3);opacity:.3;
           transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.rv-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--held);
         transition:width 400ms cubic-bezier(.22,.68,.32,1)}
.rv-gate{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:62ch}
/* Whose fault it was and what to do, as a sentence under the head: no box, no strip. */
.rv-fault{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.rv-side{display:block;margin:0 0 4px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rv-label{margin:28px 0 8px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rv-planbox{max-width:62ch}
.rv-planrows{margin:0;padding:0;list-style:none}
.rv-planrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:0 12px;align-items:baseline;
            padding:9px 0;border-top:1px solid var(--line);cursor:pointer;transition:color .12s}
.rv-planrow:last-child{border-bottom:1px solid var(--line)}
.rv-planrow:hover .rv-plantitle{color:var(--held)}
.rv-planno{font:500 10px var(--mono);letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv-plantitle{font-size:13.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.rv-planrow.more .rv-plantitle{color:var(--ink-3)}
.rv-planfile{font:400 11px var(--mono);color:var(--ink-3);white-space:nowrap}
.rv-lanegrid{display:grid;grid-template-columns:1fr;gap:6px}
.rv-lane{display:grid;gap:4px;padding:10px 0 10px 16px;border:0;background:transparent;border-left:2px solid var(--line-2);min-width:0;
         animation:sheet 220ms cubic-bezier(.22,.68,.32,1) both}
.rv-lane.waiting{border-left-color:var(--held)}
.rv-lane-title{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-lane-meta{font:400 10.5px var(--mono);letter-spacing:.03em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv-said{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-reply{margin:0;font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;
          display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rv-lane.waiting .rv-reply:empty::before{content:'waiting for the reply';font:400 10.5px var(--mono);letter-spacing:.08em;color:var(--ink-3)}
/* Held back until the arrival reaches it; then in place, in one motion. */
.rv .veil{opacity:0;transform:translateY(6px);transition:opacity .45s cubic-bezier(.22,.68,.32,1),transform .45s cubic-bezier(.22,.68,.32,1)}
.rv .veil.in{opacity:1;transform:none}
.rv-head.veil,.rv-line.veil{transform:none}
@container (max-width:640px){.rv-top{grid-template-columns:1fr}.rv-art{width:150px;height:150px;justify-self:start}}
@media(prefers-reduced-motion:reduce){.rv .veil{transition:none}.rv-lane{animation:none}}
/* The art stands grey from the first frame and colours in; the headline waits as bars like a line. */
.rv canvas.veil{opacity:1;transform:none}
.rv-lane[data-verdict="broke"]{border-left-color:var(--ink)}
.rv-lane[data-verdict="held"]{border-left-color:var(--held)}
.rv-lane[data-verdict="unclear"]{border-left-color:var(--line-2)}

/* ── the bubbles: a customer line on the right, the app's reply on the left ── */
.tvm{margin:0;max-width:82%;padding:8px 11px;font-size:13px;line-height:1.5;border-radius:12px;overflow-wrap:anywhere;white-space:pre-wrap}
.tvm.you{align-self:flex-end;background:#76B900;color:#0F1E08;border-bottom-right-radius:4px}
.tvm.app{align-self:flex-start;background:#EAF1F8;color:#132338;border-bottom-left-radius:4px}
.tvm.app.none{background:transparent;color:#8FA3B5;box-shadow:inset 0 0 0 1px #2B3A44;font-family:var(--mono);font-size:11px}
.tvm.app.brk{box-shadow:0 0 0 2px var(--ink)}

/* ── the overview's sections: art, a label, a few plain sentences ── */
.rv-truth{margin:10px 0 0;max-width:72ch}
.rv-truth[hidden]{display:none}
.rv-truth>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:10px;padding:8px 12px;
                  border:1px solid var(--line);border-radius:6px;font-size:13px;line-height:1.5;color:var(--ink)}
.rv-truth>summary::-webkit-details-marker{display:none}
.rv-truth>summary::before{content:'';flex:none;width:6px;height:6px;margin-top:6px;border:solid var(--ink-2);
                          border-width:0 1.5px 1.5px 0;transform:rotate(-45deg)}
.rv-truth[open]>summary::before{transform:rotate(45deg)}
.rv-truth>summary:hover{border-color:var(--ink-3)}
.rv-truth-flat>summary{pointer-events:none}
.rv-truth-flat>summary::before{display:none}
.rv-truth-why{border-left:1px solid var(--line);margin:7px 0 0 3px;padding:2px 0 2px 11px}
.rv-truth-row{margin:0 0 5px;font-size:12px;line-height:1.55;color:var(--ink-2)}
.rv-truth-row b{color:var(--ink);font-weight:600}
.rv-truth-free{color:var(--ink-3)}
.rv-truth-free b{color:var(--ink-2);font-weight:600}
/* A caption under a figure of the report. */
.rv-sec-text{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2);min-height:1.6em}
.rv-sec-text b{color:var(--ink);font-weight:600}
.rv-sec-text b.n{color:var(--held)}

/* ── the cases, as trials ── */
.cg{display:grid;gap:26px;padding:6px clamp(14px,2vw,24px) 40px}
.cg.empty::before{content:'Nothing to show here yet.';font-size:13.5px;color:var(--ink-3)}
.cg-head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:0 12px;align-items:center;margin:0 0 10px}
.cg-art{width:40px;height:40px;display:block;image-rendering:pixelated}
.cg-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cg-count{font:400 10.5px var(--mono);letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container (max-width:760px){.cg-grid{grid-template-columns:1fr}}
.cc{display:grid;gap:8px;padding:12px 14px 11px;border-radius:12px;background:var(--g-1);box-shadow:inset 0 0 0 1px var(--line);
    cursor:pointer;min-width:0;transition:box-shadow .12s,background .12s}
.cc:hover,.cc.open{box-shadow:inset 0 0 0 1px var(--line-2)}
.cc:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cc-open{margin:0;align-self:start;justify-self:end;max-width:92%;padding:7px 11px;border-radius:12px;border-bottom-right-radius:4px;
         background:var(--held);color:#0F1E08;font-size:13px;line-height:1.45;overflow-wrap:anywhere;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-open.quiet{justify-self:start;background:transparent;color:var(--ink);padding:0;border-radius:0;font-weight:600}
.cc-ask{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-state{margin:0;display:flex;align-items:center;gap:8px;font:400 10.5px var(--mono);letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cc[data-outcome="broke"] .cc-state{color:var(--ink)}
.cc[data-outcome="held"] .cc-state{color:var(--held)}
.cc-sheet{grid-column:1/-1;display:grid;gap:10px;padding:14px 16px 18px;border-radius:12px;background:var(--g-2);
          animation:sheet 180ms cubic-bezier(.22,.68,.32,1) both}
.cc-feed{display:flex;flex-direction:column;gap:7px;max-width:70ch}
.cc-feed .tvm.you{background:var(--held);color:#0F1E08}
.cc-feed .tvm.app{background:var(--g-1);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.cc-feed .tvm.app.brk{box-shadow:inset 0 0 0 2px var(--ink)}
.cc-feed.planned .tvm.you{opacity:.8}
.cc-turn{margin:-2px 0 4px;font:400 10px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.cc-label{margin:6px 0 0;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cc-why{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);max-width:70ch}
.cc-why.quiet{color:var(--ink-2);font-size:12.5px}
.cc-checks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cc-checks li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:4px 10px;align-items:baseline;font-size:12.5px;line-height:1.5;color:var(--ink)}
.cc-checks li .ok{position:relative;top:1px}
.cc-checks li small{grid-column:2;font-size:11.5px;color:var(--ink-3)}
.cc-where{margin:0;font:400 11px var(--mono);color:var(--ink-3)}

/* The Run button arrives last, and asks to be pressed. */
.runslot.veil{opacity:0;transition:opacity .5s cubic-bezier(.22,.68,.32,1)}
.runslot.veil.in{opacity:1}
.shell:not(.arriving) .runslot.veil{opacity:1}
.go.pulse{animation:go-pulse 1.5s ease-in-out 4}
@keyframes go-pulse{0%,100%{box-shadow:0 0 0 0 rgba(118,185,0,.0)}50%{box-shadow:0 0 0 7px rgba(118,185,0,.28)}}
@media(prefers-reduced-motion:reduce){.go.pulse{animation:none}}

/* A figure's columns, with their words under them. */
.rv-columns{display:block;width:100%;height:auto;image-rendering:pixelated}
.rv-collabels{position:relative;height:64px;margin-top:4px}
.rv-collabel{position:absolute;top:0;display:grid;gap:2px;box-sizing:border-box;padding:0 3px;text-align:center;font-size:11.5px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.rv-collabel b{font-weight:600;color:var(--ink);white-space:normal;line-height:1.15}
.rv-collabel i{font:400 9.5px var(--mono);font-style:normal;color:var(--ink-3);white-space:normal;line-height:1.3}
.rv-collabel[data-hurt="1"] b{color:var(--ink)}

/* Cards land one after another, in reading order, the first time they are drawn. */
.cc{animation:sheet 260ms cubic-bezier(.22,.68,.32,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.cg-group{animation:sheet 300ms cubic-bezier(.22,.68,.32,1) both}
@media(prefers-reduced-motion:reduce){.cc,.cg-group{animation:none}}

/* The seven steps: the staircase beside its words. */
.rv-ladder{margin-top:8px;max-width:760px}
.rv-ladder-row{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:22px;align-items:center}
.rv-ladder-art{display:block;width:100%;height:auto;image-rendering:pixelated}
.rv-steps{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.rv-step{display:grid;gap:1px;font-size:12.5px;line-height:1.35}
.rv-step b{font-weight:600;color:var(--ink)}
.rv-step span{font:400 10.5px var(--mono);color:var(--ink-3)}
.rv-step.broke span{color:var(--ink)}
.rv-step.held span{color:var(--held)}
.rv-step.notGraded b{color:var(--ink-3)}
@container (max-width:700px){.rv-ladder-row{grid-template-columns:1fr}}

/* The drawer's head keeps its prompt; the words are green. */
.dhead{color:var(--held)}
html[data-mode="light"] .dhead{color:#5C9100}
/* Room between the staircase and the sentence under it; the sentence reads as a caption. */
.rv-ladder .rv-sec-text{margin-top:22px;max-width:60ch;font-size:12.5px;color:var(--ink-3)}

/* The report after a run. It takes the whole pane it sits in, because a quarter of the page left
   empty is a quarter the customer paid for. Width is spent on the tables and the folds; the prose
   keeps its own measure inside it, since a paragraph set to the full pane is a paragraph nobody
   finishes a line of. */
.rp{margin:8px 0 24px}
.rp-head{margin:26px 0 10px;padding-top:20px;border-top:1px solid var(--line)}
.rp-headline{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.rp-kept{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.rp-coverage{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--ink);max-width:76ch}
/* The compiler's word on a second run. Improved is the only one that wears the live colour; the
   other two carry weight, so the verdict survives a greyscale print and a colour-blind read. */
.rp-moved{font-weight:600;text-transform:lowercase}
.rp-moved.improved{color:var(--held)}
.rp-moved.regressed{color:var(--ink)}
.rp-moved.no-change{color:var(--ink-3)}
.rp-part{margin:0 0 22px}
.rp-written{display:grid;gap:15px;margin-bottom:26px}
.rp-written .rp-part{margin-bottom:18px}
.rp-para{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink);max-width:70ch}
/* The right of reply. Quiet, always there, never a colour that begs to be pressed. */
.rp-dispute{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 0}
.rp-dispute-btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-2);
                font:inherit;font-size:11.5px;padding:4px 10px;border-radius:6px;cursor:pointer}
.rp-dispute-btn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.rp-dispute-btn:disabled{opacity:.45;cursor:default}
.rp-dispute-said{font-size:11.5px;color:var(--ink-3)}

/* Everything the run touched: a reference, folded, in the same disclosure the failures use. */
.rp-kit{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 22px}
.rp-kit[open]{padding-bottom:14px}
.rp-kit-body{display:grid;gap:9px}
.rp-kit-body .rv-label{margin:6px 0 2px}
/* The name takes whatever width is left and the counts shrink to their own digits, so a long
   endpoint name reads on one or two lines instead of one word per line. The header cells carry the
   same gap as the body, or two headings run together as one word. */
.rp-kit-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rp-kit-table th{padding:0 16px 7px 0}
.rp-kit-table td{padding:6px 16px 6px 0;border-bottom:1px solid var(--line)}
.rp-kit-table.rp-table th.n,.rp-kit-table.rp-table td.n{width:1%;white-space:nowrap;padding:6px 0 6px 20px;
                                                        color:var(--ink-2);font-variant-numeric:tabular-nums}
.rp-kit-table.rp-table th.n{padding-top:0;padding-bottom:7px}
.rp-kit-table .rp-what{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.rp-kit-why{display:block;margin-top:2px;font-size:11.5px;line-height:1.45;font-weight:400;color:var(--ink-3)}
.rp-kit-table tr.thin .rp-what,.rp-kit-table tr.thin td.n{color:var(--ink-3)}

/* The numbers. The figure sits against its own name so the eye never travels: label, then the rate
   and its give or take, then what it rests on. */
.rp-table{width:100%;border-collapse:collapse;margin:2px 0 10px;font-size:12.5px}
.rp-table th{padding:0 0 7px;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
             color:var(--ink-3);font-weight:500;text-align:left;border-bottom:1px solid var(--line)}
.rp-table th.n{text-align:right}
.rp-table td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.rp-table td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-3);
               font:400 11px var(--mono);width:9ch;padding-left:10px}
.rp-what{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rp-what b{color:var(--ink);font-weight:600}
.rp-rowfig{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);
           background:color-mix(in srgb,#76b900 24%,transparent);border-radius:3px;padding:1px 6px}
.rp-table tr.thin .rp-what b{color:var(--ink-3)}
.rp-table tr.thin .rp-rowfig{background:none;color:var(--ink-3);font-weight:500;padding:0}
/* The interval plot. One axis for every row, so bands are compared by eye down the column, which
   is the whole reason the table is drawn rather than written. Green is the observed rate; the band
   around it is the uncertainty and is deliberately quieter than the tick, never a second colour. */
/* Capped, so a label and its own figure are read together instead of across the page. */
.rp-rates{max-width:660px}
.rp-rates td.rp-plot{width:clamp(190px,42%,300px);padding-left:16px;vertical-align:middle}
.rp-rates th.rp-axis-head{position:relative;padding-left:18px;overflow:visible}
.rp-axis-label{display:block}
.rp-axis{position:relative;display:block;height:9px;margin-top:5px}
.rp-axis-tick{position:absolute;top:0;width:1px;height:4px;background:var(--line-2)}
.rp-axis-tick::after{content:attr(data-at) "%";position:absolute;top:4px;left:0;transform:translateX(-50%);
                     font:400 8.5px var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.rp-axis-tick[data-at="0"]::after{transform:none}
.rp-axis-tick[data-at="100"]::after{transform:translateX(-100%)}
.rp-track{position:relative;display:block;height:12px;border-radius:3px;background:var(--g-2);
          border:1px solid var(--line);overflow:hidden}
.rp-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rp-band{position:absolute;top:1px;bottom:1px;border-radius:2px;
         background:color-mix(in srgb,#76b900 30%,transparent)}
.rp-point{position:absolute;top:-1px;bottom:-1px;width:2px;transform:translateX(-1px);background:var(--held)}
.rp-pips{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-height:12px}
.rp-pip{width:9px;height:9px;border-radius:2px;border:1px solid var(--line-2);background:transparent}
.rp-pip.on{background:var(--held);border-color:var(--held)}
.rp-pct{display:inline-block;margin-top:5px;font-variant-numeric:tabular-nums;font-weight:600;
        font-size:13px;color:var(--ink)}
.rp-pct.thin{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.rp-span{margin-left:8px;font:400 10.5px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.rp-rates tr.thin .rp-what b{color:var(--ink-3)}
@media (max-width:640px){
  .rp-rates td.rp-plot{width:auto;min-width:120px;padding-left:10px}
  .rp-rates td.n{width:8ch;padding-left:8px}
}
/* Observed behaviour: the statement, then the reply that proves it. A left rule carries whether it
   is wanted, so the mark is positional and not colour alone. */
.rp-habits{display:grid;gap:10px;margin:2px 0 12px}
.rp-habit{border-left:2px solid var(--line-2);padding:2px 0 2px 12px}
.rp-habit.off{border-left-color:var(--hold)}
.rp-habit.on{border-left-color:var(--held)}
.rp-habit-what{margin:0 0 5px;color:var(--ink);font-size:13px;line-height:1.5;max-width:70ch}
.rp-habit .rp-said{margin:0;font-size:12px}
.rp-floor{margin:0;font-size:12px;line-height:1.55;color:var(--ink-3);max-width:62ch}
/* The one word on this table nobody is born knowing, explained where it is used, on hover and on
   focus. Not a title attribute: that is the browser's furniture, not a state we designed. */
.rp-table thead th:first-child{position:relative;overflow:visible}
.rp-ask{appearance:none;border:0;background:none;padding:0;cursor:help;font:inherit;color:inherit;
        letter-spacing:inherit;text-transform:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.rp-note{position:absolute;left:0;top:100%;z-index:3;width:min(36ch,80vw);margin-top:6px;padding:10px 12px;
         background:var(--paper,#fff);color:var(--ink-2);border:1px solid var(--line);border-radius:8px;
         box-shadow:0 8px 24px var(--shadow,rgba(16,26,38,.12));font:400 11.5px/1.5 var(--disp);
         text-transform:none;letter-spacing:0;opacity:0;visibility:hidden;transition:opacity .12s}
.rp-ask:hover + .rp-note,.rp-ask:focus-visible + .rp-note{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.rp-note{transition:none}}

/* A fold in this report opens like a section of a document, not like a browser disclosure: the
   native triangle is gone and a caret turns in its place, so the only thing on the row that moves
   is the one we drew. */
.rp-fails{display:grid;border-top:1px solid var(--line)}
.rp-fail{border-bottom:1px solid var(--line)}
.rp-fail[open]{padding-bottom:16px}
.rp-fail-title{display:flex;align-items:baseline;gap:11px;margin:0;padding:12px 2px;
               cursor:pointer;list-style:none;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.rp-fail-title::-webkit-details-marker{display:none}
.rp-fail-title:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rp-fold{order:-1;flex:0 0 auto;width:7px;height:7px;align-self:center;
         border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
         transform:rotate(-45deg);transform-origin:60% 60%;transition:transform .16s}
.rp-fail[open]>.rp-fail-title .rp-fold,.rp-kit[open]>.rp-fail-title .rp-fold{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.rp-fold{transition:none}}

/* Inside a fold: the run's own facts, then the customer's rule, then the line their product said,
   then why it counted. Each keeps a measure, and a rule long enough to wrap breaks inside the
   column instead of pushing it. */
.rp-fail-cell{margin:0 0 2px;font:400 10.5px var(--mono);letter-spacing:.04em;color:var(--ink-3);
              font-style:normal;max-width:76ch}
.rp-rule{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:76ch;overflow-wrap:anywhere}
.rp-why{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:76ch}
.rp-fail .rp-said{display:block;margin:12px 0 0;padding:10px 14px;max-width:76ch;
                  background:var(--g-2);border-left:2px solid var(--line-2);border-radius:0 6px 6px 0;
                  font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
.rp-fail .rp-dispute{margin:14px 0 0}

/* A figure inside a sentence is marked the way somebody marks a page: a wash behind the words, the
   ink left alone. Colour on the text itself reads as a link and dies in greyscale. */
.rp-n{background:color-mix(in srgb,#76b900 26%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,#76b900 26%,transparent);
      border-radius:2px;color:inherit;font-weight:500}
.rp-name{font-weight:600;color:var(--ink)}
.rp-said{color:var(--ink);font-style:normal}
.rp-line{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:76ch}
.rp-lines{display:grid;gap:7px}

/* The room change: one cross-fade of the whole page, long enough to read as a change of light
   rather than a flicker. The old frame holds under the new one so the canvases cross-fade too. */
::view-transition-old(root),::view-transition-new(root){animation-duration:520ms;
  animation-timing-function:cubic-bezier(.4,0,.2,1);mix-blend-mode:normal}
::view-transition-old(root){animation-name:roomout}
/* The arrival: the light comes up over the blue room slowly, like a room being switched on, not cut. */
::view-transition-new(root){animation-name:roomin}
@keyframes roomout{to{opacity:0}}
@keyframes roomin{from{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

::selection{background:var(--nv,#76B900);color:var(--nv-ink,#0F1E08)}

/* The report at a glance: five facts in one ruled row, each a label, a figure and what it rests on.
   Divided by rules, not boxed: one instrument, not six identical cards. */
.rp-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:14px 0 26px;
           border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rp-glance-cell{padding:14px 16px 16px;border-left:1px solid var(--line);min-width:0}
.rp-glance-cell:first-child{border-left:0;padding-left:0}
.rp-glance-label{margin:0 0 6px;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rp-big{margin:0 0 8px;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.rp-sub{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}
.rp-glance-cell .rp-track{max-width:220px}
@media (max-width:640px){
  .rp-glance{grid-template-columns:1fr 1fr}
  .rp-glance-cell{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .rp-glance-cell:nth-child(-n+2){border-top:0}
}

/* The judge's reading: a term column and its statement, read as a short document. */
.rp-diag{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:10px 18px;margin:4px 0 0;max-width:880px}
.rp-diag dt{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.rp-diag dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
.rp-diag dd.rp-muted{color:var(--ink-3);font-size:12.5px}
@media (max-width:640px){.rp-diag{grid-template-columns:1fr}.rp-diag dd{margin-bottom:6px}}

/* Wide tables scroll inside themselves; the page never scrolls sideways. */
.rp-scroll{overflow-x:auto;max-width:100%}
.rp-score{max-width:880px}
.rp-table tr.rp-group th{padding:18px 0 6px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}

/* Counts by condition, worst first. A condition with any failure carries a wash on its failed count
   and a rule on its left edge, so where it breaks is visible before a number is read, in greyscale too. */
.rp-matrix{max-width:980px}
.rp-matrix td.rp-count{width:9ch;text-align:right;font:500 13px var(--mono);color:var(--ink)}
.rp-matrix td.rp-count.fail{background:color-mix(in srgb,var(--broke) 16%,transparent);color:var(--broke);font-weight:600}
.rp-matrix td.rp-count.open{color:var(--ink-3)}
.rp-matrix tr.rp-broke td:first-child{box-shadow:inset 2px 0 0 var(--broke);padding-left:10px}
.rp-matrix td.rp-plot{padding-left:18px;min-width:170px;vertical-align:middle}
.rp-matrix th.n{padding-left:10px}

/* Severity leads the failure title in words, so it survives greyscale. */
.rp-sev{flex:0 0 auto;font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:2px 0;color:var(--ink-3);min-width:6ch}
.rp-sev.high{color:var(--broke)}
.rp-sev.medium{color:var(--hold)}
/* The matrix keeps its columns readable and scrolls inside its wrapper on a narrow screen. */
.rp-matrix{min-width:640px}
.rp-matrix th{padding-right:12px;line-height:1.35;vertical-align:bottom}
.rp-matrix th:last-child{padding-left:18px}
.rp-score{min-width:520px}
.rp-kit-table{min-width:400px}
/* A name cell stays a table cell, so its rule lines up with the rest of the row. */
.rp-table td.rp-what{display:table-cell}
.rp-table td.rp-what b{margin-right:10px}
/* The reference tabs' own furniture: the second line every row carries, the filter row over the
   cases, the group heads in the unit tests list, and the run rows over the comparison. Nothing
   here encodes an outcome; the marks in room.css do that. */

/* The title, and under it how the row ended and the door it belongs to, both one line. */
.row .words{display:grid;gap:2px;min-width:0}
.row .sub{font-family:var(--mono);font-size:10px;line-height:1.2;color:var(--ink-3);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .sub:empty{display:none}
/* Narrower rungs in the list, so a six-turn arc leaves the line under the title room to finish. */
.row .arc i{width:9px}

/* A group head names the rows under it and is never a row: no rank, no mark, no selection. */
.ghead{padding:16px 12px 6px 10px;font-size:11px;font-weight:600;color:var(--ink-3);
       border-bottom:1px solid var(--line)}

/* Filters, marked by colour alone: on is ink on the inset ground, off is the label colour on
   nothing. No strike, no underline, no strip. */
.sift{display:flex;flex-wrap:wrap;gap:8px 22px;margin:10px 0 0}
.siftgroup{display:flex;flex-wrap:wrap;gap:3px}
.sift button{border:0;background:transparent;color:var(--ink-3);padding:4px 9px;cursor:pointer;
             font:500 11px var(--disp);transition:color .12s,background .12s}
.sift button:hover{color:var(--ink-2)}
.sift button[aria-pressed="true"]{background:var(--g-2);color:var(--ink)}

/* Runs: one card per run, newest first, told in sentences. */
.runs{max-width:760px;padding-top:16px;display:grid;gap:12px}
.runnone{margin:0;font-size:13.5px;color:var(--ink-2)}
.runcard{display:grid;gap:6px;padding:14px 16px;border-radius:12px;background:var(--g-1);box-shadow:inset 0 0 0 1px var(--line)}
.runhead{display:flex;align-items:baseline;gap:12px}
.runhead b{font-size:15px;font-weight:600;color:var(--ink)}
.runcard .runsaid{margin:0;font-size:14px;color:var(--ink)}
.runfacts{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.runcard .runfault{margin:0;font-size:12.5px;color:var(--ink-3)}
.runcard .ghost{justify-self:start;margin-top:4px}
.runrow{display:grid;grid-template-columns:56px 84px 44px minmax(0,1fr) auto;gap:14px;align-items:center;
        padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.runrow b{font-weight:600;color:var(--ink)}
.runwhen,.runlen{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.runsaid{color:var(--ink-2);min-width:0}
.runfault{display:block;font-size:12px;color:var(--ink-3)}
/* The run on screen is the lit one. */
.runhere{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--held)}
/* The Lab is a permanent product surface, not a compiler theatre. White paper, one ink hierarchy,
   green only for action/success, and no structural status strips or glowing online indicators.
   g-2 is the one surface that is not white: it is a fill that has to read as recessed against the
   page, so it is a neutral grey rather than the warm tone the rest of this palette dropped. */
html[data-mode="light"]{
  --g-0:#F4F7FA;--g-1:#FFFFFF;--g-2:#F2F5F9;--line:#DEE7F0;--line-2:#C8D5E2;
  --ink:#132338;--ink-2:#3F5570;--ink-3:#77899E;--held:#5F9700;--broke:#B1473C;
  --hold:#9A681D;--focus:#406500;--sh-1:0 1px 2px rgba(25,39,50,.05),0 10px 28px rgba(25,39,50,.07);
  --sh-2:0 3px 8px rgba(25,39,50,.1),0 24px 58px rgba(25,39,50,.13);--sh-left:-10px 0 28px rgba(25,39,50,.045)
}
body{background:var(--g-0)}
.shell{padding:12px;height:100%;max-width:1920px;margin:0 auto}
.floor{background:var(--g-1);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-1)}
.ident{height:58px;padding:10px 18px;gap:9px}.ident .mk{height:30px}.brandword{font-size:14px;font-weight:650}.crumb{color:var(--line-2)}.ident .nm{font-size:14px;font-weight:500;color:var(--ink-2)}
.wallet{padding-right:4px}.runslot .gonote{max-width:440px;color:var(--ink-3);font-size:11.5px}.runslot .go{height:34px;border:1px solid #527E08;background:#6FAE00;color:#112006;padding:0 15px;font-size:12.5px;font-weight:600;border-radius:8px;box-shadow:0 2px 0 #4F760C}.runslot .go:hover{background:#7CBA0D}.runslot .go:disabled{background:#E4E6E0;border-color:#D0D5D0;color:#89938F;box-shadow:none}
.taps{height:43px;padding-left:8px;background:var(--g-2)}.tap{padding:0 10px;font-size:11.5px}.tap.on,.tap.on:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.view{background:var(--g-1)}#head{padding:19px clamp(16px,2vw,28px) 0}.insts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:4px}.inst{border:1px solid var(--line);background:var(--g-2);box-shadow:none;border-radius:12px;padding:11px 12px;gap:10px}.inst .ic{width:78px;height:78px}.inum{font-size:25px}.iname{font-size:12.5px}
.lab-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:16px;background:var(--line);border:1px solid var(--line)}.map-card{min-width:0;padding:14px;background:var(--g-1)}.map-name{display:block;font:9.5px var(--mono);color:var(--ink-3)}.map-value{display:block;margin-top:8px;font-size:13.5px;line-height:1.35}.map-copy{margin:5px 0 0;color:var(--ink-3);font-size:11.5px;line-height:1.5}
.campaign{margin-top:14px;border:1px solid var(--line);background:var(--g-2)}.campaign-head{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid var(--line);align-items:baseline}.campaign-head b{font-size:12.5px}.campaign-head span{font:9.5px var(--mono);color:var(--ink-3)}.campaign-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;padding:8px 13px}.campaign-lane{display:grid;grid-template-columns:minmax(125px,1fr) auto 20px;gap:10px;align-items:center;min-width:0;padding:6px 0;border-bottom:1px solid var(--line)}.campaign-lane:nth-last-child(-n+2){border-bottom:0}.campaign-lane b{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.campaign-cells{display:flex;gap:3px}.campaign-cells i{width:12px;height:4px;background:var(--line)}.campaign-cells i.on{background:var(--ink-3)}.campaign-count{text-align:right;font:9.5px var(--mono);color:var(--ink-3)}
.activity{margin-top:16px;border:1px solid var(--line);background:var(--g-2)}.activity-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 13px;border-bottom:1px solid var(--line)}.activity-head b{font-size:12.5px}.activity-head span{font:9px var(--mono);color:var(--ink-3)}.activity-rows{display:grid}.activity-row{display:grid;grid-template-columns:44px minmax(140px,.7fr) minmax(0,1.3fr);gap:12px;padding:8px 12px;border-bottom:1px solid var(--line);align-items:baseline}.activity-row:last-child{border-bottom:0}.activity-time{font:9px var(--mono);color:var(--ink-3)}.activity-row b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-detail{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-row.failed,.activity-row.broke{background:rgba(177,71,60,.055)}.activity-row.held,.activity-row.passed{background:rgba(95,151,0,.045)}
.band{margin-top:18px}.pane{border-top:0}.index,.detail{background:var(--g-1)}.row:hover,.row[aria-selected="true"]{background:var(--g-2)}.drawer{margin:0;border:0;border-top:1px solid var(--line);background:var(--g-2);box-shadow:none!important}.dhead{color:var(--ink-3)}.dhead:hover{color:var(--ink)}.dhead .prompt{color:var(--ink-2)}.dbody dt{color:var(--ink-3)}.dbody dd,.dbody dd.lock{color:var(--ink-2)}.dbody dd.many span{background:var(--g-1);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}.dbody dd.lock::before{background:var(--held)}

.empty-page,.production-page,.profiles-page{max-width:900px;padding:36px 0}.empty-page h2,.production-page h2,.profiles-page h2{margin:0;font-size:28px;letter-spacing:-.035em}.empty-page>p,.production-lede,.profiles-lede{margin:10px 0 24px;max-width:68ch;color:var(--ink-2);font-size:14.5px}.release-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.release-flow>span{padding:16px;background:var(--g-2);font-size:13px}.production-connect,.production-copy{border:1px solid #527E08;background:#6FAE00;color:#112006;border-radius:8px;height:36px;padding:0 14px;font-weight:600;cursor:pointer}.production-connect:disabled,.production-copy:disabled{opacity:.55;cursor:wait}.production-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:12px;align-items:center}.production-result:empty{display:none}.production-result>b,.production-result>p{grid-column:1/-1}.production-result code{padding:12px;background:#DCE5EE;font:11px var(--mono);overflow:auto}.production-result p{margin:0;color:var(--ink-3);font-size:11.5px}.production-starter{grid-column:1/-1;max-height:260px;margin:2px 0 0;padding:14px;border:1px solid var(--line);background:var(--ink);color:#E7ECE8;overflow:auto;font:10.5px/1.55 var(--mono);white-space:pre}.production-starter+.production-secondary{grid-column:1/-1;justify-self:start}
.release-current{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;margin-bottom:12px;padding:13px 15px;border:1px solid var(--line);background:var(--g-2)}.release-current span{font-size:11px;color:var(--ink-3)}.release-current code{font:11px var(--mono);color:var(--ink)}.release-current b{justify-self:end;font-size:11.5px;font-weight:500;color:var(--ink-2)}
.release-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:5px 8px;padding:15px;background:var(--g-2)}.release-step>span{grid-row:1/3;font:9.5px var(--mono);color:var(--ink-3)}.release-step b{font-size:12.5px}.release-step small{font-size:10.5px;line-height:1.4;color:var(--ink-3)}.release-boundary{margin:12px 0 0!important;padding:12px 14px;border:1px solid var(--line);max-width:none!important;font-size:11.5px!important;line-height:1.5;color:var(--ink-3)!important}
.run-empty{padding:32px 0 8px}.run-empty h2{margin:0;font-size:27px;letter-spacing:-.035em}.run-empty>p{max-width:68ch;margin:9px 0 22px;color:var(--ink-2);font-size:13.5px;line-height:1.55}.run-empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}.run-empty-grid article{display:grid;gap:6px;padding:16px;background:var(--g-2)}.run-empty-grid b{font-size:12.5px}.run-empty-grid span{font-size:11px;line-height:1.5;color:var(--ink-3)}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}.profile-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--g-2)}.profile-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);align-items:baseline}.profile-head b{font-size:14px}.profile-head span{font:9.5px var(--mono);color:var(--ink-3)}.profile-field{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.profile-field span{font-size:10.5px;color:var(--ink-3)}.profile-field p{margin:0;color:var(--ink-2);font-size:11.5px;line-height:1.45}.profile-source{display:block;margin-top:11px;color:var(--ink-3);font:9.5px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profiles-empty{padding:18px;border:1px solid var(--line);background:var(--g-2);color:var(--ink-2);font-size:12.5px}
.outcomes-page{max-width:1040px;padding:28px 0 48px}.outcomes-page h2{margin:0;font-size:27px;line-height:1.1;letter-spacing:-.035em}.outcomes-lede{max-width:78ch;margin:9px 0 24px;color:var(--ink-2);font-size:13px;line-height:1.55}.outcome-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.outcome-card{display:grid;min-height:226px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--g-2)}.outcome-top{display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px;align-items:center}.outcome-art{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:68px;height:56px;padding:8px;border:1px solid var(--line);background:var(--g-1)}.outcome-art i{display:block;width:6px;height:13px;background:#D6D9D3}.outcome-art i:nth-child(2){height:20px}.outcome-art i:nth-child(3){height:29px}.outcome-art i:nth-child(4){height:38px}.outcome-art i:nth-child(5){height:46px}.outcome-art i.on{background:var(--ink-3)}.outcome-heading{display:grid;gap:4px}.outcome-heading b{font-size:15px;line-height:1.25}.outcome-heading span{font:9.5px var(--mono);color:var(--ink-3)}.outcome-why{margin:16px 0;color:var(--ink-2);font-size:12.5px;line-height:1.5}.outcome-proof{display:flex;align-self:end;justify-content:space-between;gap:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink-3);font-size:10.5px}.outcome-proof b{font:500 9.5px var(--mono);color:var(--ink-2)}.outcome-proof b.failed{color:var(--broke)}.outcome-segment{margin-top:8px;color:var(--ink-3);font:9.5px var(--mono)}.outcomes-boundary{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;margin-top:12px;padding:15px 17px;border:1px solid var(--line);background:var(--g-2)}.outcomes-boundary b{font-size:12.5px}.outcomes-boundary p{margin:0;color:var(--ink-2);font-size:11.5px;line-height:1.5}
.production-notice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin:18px 0;padding:20px;border:1px solid #B7C2B2;background:var(--g-2);border-radius:12px}.production-notice-copy b{display:block;font-size:14px}.production-notice-copy p{margin:6px 0 0;max-width:66ch;color:var(--ink-2);font-size:12.5px;line-height:1.55}.production-form{margin:18px 0;padding:20px;border:1px solid var(--line-2);border-radius:12px;background:var(--g-2)}.production-form-head b{font-size:15px}.production-form-head p{margin:6px 0 18px;color:var(--ink-2);font-size:12.5px;line-height:1.5}.production-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.production-field{display:grid;gap:6px}.production-field span{font-size:11.5px;color:var(--ink-2)}.production-field input{width:100%;height:38px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--g-1);color:var(--ink);font:12px var(--mono)}.production-field input:focus{outline:2px solid rgba(82,126,8,.2);border-color:#527E08}.production-choice{display:grid;grid-template-columns:18px minmax(0,1fr);gap:3px 8px;margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--g-1)}.production-choice input{grid-row:1/3;margin-top:2px}.production-choice span{font-size:12px}.production-choice small{color:var(--ink-3);font-size:10.5px}.production-form-actions{display:flex;align-items:center;gap:9px;margin-top:16px}.production-cancel,.production-secondary{height:36px;padding:0 13px;border:1px solid var(--line-2);border-radius:8px;background:var(--g-1);color:var(--ink-2);font-weight:600;cursor:pointer}.production-form-status{margin-left:6px;color:var(--ink-3);font-size:11.5px}.production-direct{margin-top:14px;padding:18px;border:1px solid var(--line);border-radius:12px}.production-direct>b,.production-sources>b{display:block;font-size:13.5px}.production-direct>p{margin:6px 0 13px;max-width:68ch;color:var(--ink-2);font-size:12px;line-height:1.5}.production-sources{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:12px}.production-source-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);align-items:baseline}.production-source-row span{text-transform:capitalize;font-size:11px;color:var(--ink-2)}.production-source-row b{font-size:12.5px}.production-source-row small{font:9.5px var(--mono);color:var(--ink-3)}
.production-intro{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:34px;align-items:center;margin-bottom:18px}.production-intro .production-lede{margin-bottom:0}.production-trace-art{margin:0;min-width:0}.production-trace-field{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding:16px;border:1px solid var(--line);background:var(--g-2)}.production-trace-field i{display:block;aspect-ratio:1;background:var(--line)}.production-trace-field i.known{background:#789B3E}.production-trace-field i.unknown{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 4px)}.production-trace-legend{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;margin-top:8px;align-items:center;font:9px var(--mono);color:var(--ink-3)}.production-trace-legend span:last-child{text-align:right}.production-trace-legend b{font-size:13px;color:var(--ink)}
.production-coverage{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.production-coverage-head{display:flex;justify-content:space-between;gap:16px;padding:13px 15px;background:var(--g-2);border-bottom:1px solid var(--line);align-items:baseline}.production-coverage-head b{font-size:13px}.production-coverage-head span{font:9.5px var(--mono);color:var(--ink-3)}.production-pattern{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(180px,1.4fr) auto;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:baseline}.production-pattern:last-child{border-bottom:0}.production-pattern b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.production-pattern span{font-size:10.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.production-pattern i{font:9.5px var(--mono);font-style:normal}.production-pattern i.represented{color:#4B7506}.production-pattern i.missing{color:var(--hold)}.production-coverage-boundary{margin:0;padding:11px 14px;border-top:1px solid var(--line);color:var(--ink-3);font-size:10.5px}.production-coverage>.production-secondary{margin:0 14px 14px}
.production-loading{margin:-10px 0 16px;color:var(--ink-3);font:10px var(--mono)}.production-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:18px 0;background:var(--line);border:1px solid var(--line)}.production-stat{display:grid;gap:3px;padding:15px;background:var(--g-2)}.production-stat b{font-size:20px;letter-spacing:-.025em}.production-stat span{font-size:12.5px}.production-stat small{color:var(--ink-3);font-size:10.5px}.production-observed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.production-distribution{min-width:0;padding:15px;border:1px solid var(--line);background:var(--g-2)}.production-distribution>b{display:block;margin-bottom:11px;font-size:12.5px}.production-distribution>p{margin:0;color:var(--ink-3);font-size:11.5px}.production-dist-row{display:grid;grid-template-columns:minmax(70px,.8fr) minmax(50px,1fr) 28px;gap:8px;align-items:center;margin-top:8px}.production-dist-row span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.production-dist-row i{height:4px;background:linear-gradient(90deg,var(--ink-3) var(--share),var(--line) var(--share));display:block}.production-dist-row small{font:9px var(--mono);color:var(--ink-3);text-align:right}.production-signal{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:11.5px}.production-signal:last-child{border-bottom:0}.production-boundary{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;margin-top:12px;padding:15px;border:1px solid var(--line)}.production-boundary>b{font-size:12.5px}.production-boundary p{margin:0;color:var(--ink-2);font-size:12px;line-height:1.55}
@media(max-width:1250px){.lab-map{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.runslot .gonote{display:none}.production-stats{grid-template-columns:repeat(2,1fr)}.production-observed{grid-template-columns:1fr}}
@container (max-width:620px){.insts{grid-template-columns:1fr}.inst .ic{width:92px;height:92px}}
/* minmax(0,1fr), never 1fr: a plain 1fr floors at the widest thing inside it, and the Field's rows
   are wider than a phone, so the one column grew past the viewport and the Field could not be
   reached at all. The floor has to be allowed to be narrower than its content for the same reason. */
@media(max-width:820px){.shell{padding:8px}.floor{min-width:0;border-radius:12px}.lab-map{grid-template-columns:1fr 1fr}.release-flow{grid-template-columns:1fr 1fr}}
/* On a phone the identity bar is two rows, not one clipped one: the name, then the actions under
   it. In one row the header's own Run sat 103px past the right edge of the screen and Open a
   pull request 257px past it, so a run could not be started or shipped from a phone at all. */
@media(max-width:560px){.ident{padding:9px 12px;height:auto;flex-wrap:wrap;row-gap:8px}.dbar,.dhead{height:auto;min-height:34px;flex-wrap:wrap;row-gap:7px;padding-top:7px;padding-bottom:7px}.mach-slot{width:100%;margin-left:0;flex-wrap:wrap;row-gap:7px}.mach-say,.mach-cmd{white-space:normal}.hright{width:100%;margin-left:0;justify-content:flex-end;flex-wrap:wrap;row-gap:8px}.runslot{flex-wrap:wrap;justify-content:flex-end}.brandword,.crumb,.wallet{display:none}.taps{padding-left:4px}.tap{padding:0 10px}.lab-map,.profile-grid{grid-template-columns:1fr}.profile-field{grid-template-columns:1fr;gap:3px}.activity-row{grid-template-columns:36px minmax(0,1fr)}.activity-detail{grid-column:2}.production-result{grid-template-columns:1fr}.production-stats{grid-template-columns:1fr 1fr}.production-boundary{grid-template-columns:1fr}.production-notice,.production-source-row,.production-pattern{grid-template-columns:1fr}.production-coverage-head{display:grid}.production-fields{grid-template-columns:1fr}.production-form-actions{flex-wrap:wrap}.production-form-status{width:100%;margin:4px 0 0}.release-flow{grid-template-columns:1fr}.insts{grid-template-columns:1fr}.inst{padding:10px}.inst .ic{width:90px;height:90px}}
@container (max-width:620px){.campaign-lanes{grid-template-columns:1fr}.campaign-lane:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* Repository identity stays quiet but present. A result without a repo and revision is a demo, not
   evidence an engineer can trust. */
.revision{margin-left:3px;padding-left:10px;border-left:1px solid var(--line);font:9.5px var(--mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

/* Fidelity is a measured boundary, not an online lamp. Four static cells make the idea tangible
   without a glow, pulse, or coloured status strip. */
.fidelity-mark{display:grid;grid-template-columns:repeat(2,5px);gap:2px;width:12px;height:12px}
.fidelity-mark span{display:block;background:var(--line-2)}
.fidelity-mark span:nth-child(2),.fidelity-mark span:nth-child(3){background:var(--ink-3)}
.fidelity-title{white-space:nowrap}
.fidelity-score{margin-left:2px;font:500 10.5px var(--mono);color:var(--ink);white-space:nowrap}
.fidelity-gaps{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.fidelity-gaps-title{grid-column:1/-1;padding:9px 11px;background:var(--g-2);font:500 10px var(--mono);color:var(--ink-3)}
.fidelity-gap{padding:11px;background:var(--g-1)}
.fidelity-gap b{display:block;font-size:11.5px}
.fidelity-gap p{margin:4px 0 0;font-size:10.5px;line-height:1.45;color:var(--ink-3)}

/* Coverage answers a narrow, auditable question: how much of the boundary we actually mapped has
   executable evidence. The empty cells are deliberately as visible as the filled ones. */
.coverage-page{max-width:1040px;padding:28px 0 48px}
.coverage-intro{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line)}
.coverage-score{font:500 54px/1 var(--mono);letter-spacing:-.07em;color:var(--ink)}
.coverage-score::after{content:' mapped';display:block;margin-top:8px;font:500 9.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.coverage-copy h2{margin:0;font-size:26px;line-height:1.12;letter-spacing:-.035em}
.coverage-copy p{margin:8px 0 0;max-width:70ch;color:var(--ink-2);font-size:13px;line-height:1.55}
.coverage-lattice{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:18px;border:1px solid var(--line);background:var(--line)}
.coverage-card{display:grid;gap:8px;padding:14px;background:var(--g-2);min-width:0}
.coverage-card b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coverage-fraction{font:9.5px var(--mono);color:var(--ink-3)}
.coverage-rail{position:relative;display:block;height:5px;background:var(--line);overflow:hidden}
.coverage-rail::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--coverage);background:var(--ink-3)}
.coverage-split{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:12px;margin-top:12px}
.coverage-risks,.coverage-gaps{border:1px solid var(--line);background:var(--g-2)}
.coverage-section-head{padding:11px 13px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600}
.coverage-risk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:9px 13px;border-bottom:1px solid var(--line);align-items:baseline}
.coverage-risk:last-child{border-bottom:0}.coverage-risk span{font-size:11.5px;color:var(--ink-2)}.coverage-risk b{font:500 9.5px var(--mono);color:var(--ink-3)}
.coverage-risk.missing span,.coverage-risk.missing b{color:var(--hold)}
.coverage-gaps{padding-bottom:13px}.coverage-gaps p{margin:0;padding:9px 13px;border-bottom:1px solid var(--line);font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.coverage-gaps .production-secondary{margin:13px 13px 0}

@media(max-width:1100px){.coverage-lattice{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.coverage-intro{grid-template-columns:1fr;gap:12px}.coverage-score{font-size:42px}.coverage-lattice{grid-template-columns:1fr 1fr}.coverage-split{grid-template-columns:1fr}.revision{display:none}.run-empty-grid,.outcome-grid{grid-template-columns:1fr}.release-current{grid-template-columns:auto 1fr}.release-current b{grid-column:1/-1;justify-self:start}.outcomes-boundary{grid-template-columns:1fr;gap:7px}.production-intro{grid-template-columns:1fr;gap:14px}.production-trace-art{max-width:320px}}
@media(max-width:460px){.coverage-lattice{grid-template-columns:1fr}}

.ident .hright{margin-left:auto}

/* The corner name is the switch between the two places the same trials run in. Field is listed and
   not yet built; it says so when it is asked for. The word is the trigger; the flask beside it is
   the mark. */
.place-wrap{position:relative;display:inline-flex}
button.brand{display:inline;padding:0;margin:0;border:0;background:none;color:var(--ink-2);font:inherit;font-weight:650;cursor:pointer}
button.brand:hover,button.brand[aria-expanded="true"]{color:var(--ink)}
.place-menu{position:absolute;left:0;top:28px;z-index:90;width:250px;padding:4px;border:1px solid var(--line-2);border-radius:8px;background:var(--g-1)}
.place-menu[hidden]{display:none}
.place-menu button{display:grid;gap:1px;width:100%;padding:7px 8px;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer;color:var(--ink-3)}
.place-menu button b{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.place-menu button i{font-style:normal;font-size:11px;color:var(--ink-3)}
.place-menu button:hover{background:var(--g-2)}
.place-menu button.on b{color:var(--held)}
.place-menu .soon{display:block;padding:2px 8px 6px;color:var(--ink-3);font-size:11px}
.ident{position:relative;z-index:100}
.ident .nm{overflow:visible}

/* Their machine, in the terminal bar at the foot of the floor. Connected is quiet; not connected
   turns the whole bar, because a world that is not there must be impossible to miss. */
.mach-slot{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
/* Named here, not borrowed: on this ground --broke is a pale paper tone, and the light drawer's own
   hatched ground outranks a bare attribute rule. */
html .drawer[data-machine="off"],html[data-mode="light"] .drawer[data-machine="off"],html .drawer[data-machine="stopped"],html[data-mode="light"] .drawer[data-machine="stopped"]{background:#C0392B;box-shadow:none}
html .drawer[data-machine="off"] .dhead,html .drawer[data-machine="off"] .dhead:hover,html .drawer[data-machine="off"] .dhead .prompt,html .drawer[data-machine="off"] .mach-say{color:#fff}
html .drawer[data-machine="stopped"] .dhead,html .drawer[data-machine="stopped"] .dhead:hover,html .drawer[data-machine="stopped"] .dhead .prompt,html .drawer[data-machine="stopped"] .mach-say{color:#fff}
.mach-why{font-family:var(--mono,ui-monospace,monospace);min-width:0;flex:1 1 auto}
/* Their app's last words are the reason the bar turned red: cut off mid-word they were not a reason at all. */
.drawer[data-machine="stopped"] .mach-slot{flex-wrap:wrap;row-gap:6px}
.drawer[data-machine="stopped"] .mach-say{white-space:normal}
.drawer[data-machine="waiting"] .dhead .prompt{color:var(--ink-3)}
/* The line above says the app is running on their machine. With the machine gone it is false, and
   the bar already says what is wrong. */
body:has(.drawer[data-machine="off"]) .rv-truth,body:has(.drawer[data-machine="stopped"]) .rv-truth{display:none}
.mach-say{font-size:12.5px;white-space:nowrap}
.mach-cmd{flex:none;padding:3px 10px;border:1.5px dashed rgba(255,255,255,.65);border-radius:8px;
          font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:#fff}
.mach-copy{flex:none;height:24px;padding:0 12px;border:0;border-radius:7px;cursor:pointer;background:#fff;color:#C0392B;
           font-family:var(--disp);font-size:12px;font-weight:650}
.mach-copy:hover{background:color-mix(in srgb,#fff 88%,#C0392B)}.mach-copy:disabled{opacity:.6;cursor:default}
.mach-copy:focus-visible{outline:2px solid #fff;outline-offset:2px}
.field-page{padding:4px 0 40px}.field-wait{margin:8px 0;color:var(--ink-3);font:10.5px var(--mono)}.field-page h2{margin:0 0 6px;font-size:20px;letter-spacing:-.02em}.field-lede{margin:0 0 18px;max-width:62ch;color:var(--ink-2);font-size:13px;line-height:1.5}.field-connect{max-width:720px}.field-connect>p{margin:14px 0 6px;color:var(--ink-2);font-size:12.5px;line-height:1.5;max-width:62ch}.field-go{height:40px;padding:0 18px;border:0;border-radius:8px;background:var(--ink);color:var(--g-0);font-weight:650;cursor:pointer}.field-go:disabled{opacity:.6;cursor:default}.field-once{display:block;margin-top:18px;font:10.5px var(--mono);color:var(--ink-3)}.field-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;margin:6px 0 0;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--g-2)}.field-copy pre{margin:0;overflow-x:auto;font:11.5px/1.5 var(--mono);color:var(--ink)}.field-copybtn{height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:6px;background:var(--g-1);color:var(--ink-2);font-weight:600;cursor:pointer}
.field-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:1px;margin:0 0 14px;background:var(--line);border:1px solid var(--line)}.field-figure{display:grid;gap:2px;padding:14px 15px;background:var(--g-2)}.field-figure b{font-size:22px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.field-figure span{font-size:12.5px;color:var(--ink-2)}.field-reading{grid-column:1/-1;padding:7px 15px;background:var(--g-2);font:10px var(--mono);color:var(--ink-3)}
.field-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(11px,1fr));gap:3px;margin:0 0 18px;padding:14px;border:1px solid var(--line);background:var(--g-2)}.field-cells i{display:block;aspect-ratio:1;background:var(--line);cursor:pointer}.field-cells i.held{background:var(--held)}.field-cells i.broke{background:var(--hold)}.field-cells i.unsure{background:var(--ink-3)}.field-cells i.reading{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 4px)}.field-cells i.none{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 4px);cursor:default}.field-cells i.picked{outline:2px solid var(--ink);outline-offset:1px}
.field-rules{margin:0 0 18px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.field-rule{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(110px,1fr) 152px;gap:14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}.field-rule:last-child{border-bottom:0}.field-rule-name{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-rule-name small{display:block;font:9.5px var(--mono);color:var(--ink-3)}.field-rule i{display:block;height:5px;background:linear-gradient(90deg,var(--held) 0 var(--w-held),var(--hold) var(--w-held) calc(var(--w-held) + var(--w-broke)),var(--line) calc(var(--w-held) + var(--w-broke)) 100%)}.field-rule>b{font:10.5px var(--mono);font-weight:500;color:var(--ink-3);text-align:right}.field-rule>b.broke{color:var(--hold)}
.field-rows{border-top:1px solid var(--line)}.field-row{display:grid;grid-template-columns:8px 64px minmax(0,1.8fr) minmax(0,1fr) 80px 110px;gap:0 12px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line);cursor:pointer}.field-row:hover{background:var(--g-1)}.field-row i{display:block;width:8px;height:8px;border-radius:50%;background:var(--line)}.field-row.held i{background:var(--held)}.field-row.broke i{background:var(--hold)}.field-row.unsure i{background:var(--ink-3)}.field-row.reading{cursor:default}.field-when{font:10px var(--mono);color:var(--ink-3);white-space:nowrap}.field-opener{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-outcome{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-mood{font-size:11px;color:var(--ink-3)}.field-row>b{font:10.5px var(--mono);font-weight:500;color:var(--ink-3);text-align:right;white-space:nowrap}.field-row>b.broke{color:var(--hold)}
.field-detail{padding:10px 6px 16px 26px;border-bottom:1px solid var(--line);background:var(--g-1)}.field-facts{margin:0 0 10px;font:10.5px var(--mono);color:var(--ink-3)}.field-ruling{display:grid;grid-template-columns:8px minmax(0,1fr);gap:4px 12px;align-items:start;padding:7px 0}.field-ruling i{display:block;width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--ink-3)}.field-ruling.held i{background:var(--held)}.field-ruling.broke i{background:var(--hold)}.field-ruling-req{font-size:12px;color:var(--ink-2)}.field-ruling.broke .field-ruling-req{color:var(--ink)}.field-quote{grid-column:2;display:block;font-size:12.5px;line-height:1.45;color:var(--ink)}.field-quote small{margin-left:8px;font:9.5px var(--mono);color:var(--ink-3)}.field-quote.none{color:var(--ink-3);font-size:11px}
@media(max-width:700px){.field-figures{grid-template-columns:1fr 1fr}.field-rule{grid-template-columns:1fr}.field-row{grid-template-columns:8px minmax(0,1fr) 100px}.field-outcome,.field-mood{display:none}}
.shell.field .rstrip,.shell.field .runslot{display:none}

/* ── The Field. One window of live conversations, read as they land: the head, the squares, and one
   of four lenses open under them. Every choice on this screen is marked by ink colour and nothing
   else: no underline, no bar, no fill that says "here". ── */
.field-head{display:grid;gap:11px;margin:0 0 14px}
.field-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 15px}
.field-pick-label{font:9.5px var(--mono);color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.field-picked{padding:0;border:0;background:none;color:var(--ink-3);font:inherit;font-size:12px;cursor:pointer}
.field-picked:hover{color:var(--ink-2)}
.field-picked.on{color:var(--ink)}
.field-picked:focus-visible{outline:none;border-radius:3px;box-shadow:0 0 0 2px var(--focus)}
.field-lens{margin:20px 0 12px;gap:8px 18px;font-size:13px}
.field-lens .field-picked{font-size:13.5px}
.field-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px;align-items:center}
.field-progress i,.field-import i{display:block;height:4px;background:var(--line)}
.field-progress i::after,.field-import i::after{content:'';display:block;height:4px;width:var(--done,0%);background:var(--held)}
.field-progress span{font:10px var(--mono);color:var(--ink-3);white-space:nowrap}
.field-none{margin:8px 0;color:var(--ink-3);font-size:11.5px;line-height:1.5}
.field-link{padding:0;border:0;background:none;color:var(--ink-2);font:inherit;font-size:11.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.field-link:hover{color:var(--ink)}

.field-groups{margin:0 0 18px}
.field-table{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.field-tr{display:grid;grid-template-columns:minmax(150px,1.5fr) 104px repeat(5,minmax(74px,1fr));gap:12px;align-items:baseline;padding:11px 14px;border-bottom:1px solid var(--line)}
.field-tr:last-child{border-bottom:0}
.field-tr.head{background:var(--g-2);font:9.5px/1.35 var(--mono);color:var(--ink-3)}
.field-tr>span:nth-child(2){font:11px var(--mono);color:var(--ink-2)}
.field-td-name b{display:block;font-size:12.5px}
.field-td-name small{display:block;margin-top:3px;font-size:10.5px;line-height:1.4;color:var(--ink-3)}
.field-td-num b{font-size:14.5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.field-td-num b.none{font-size:10.5px;letter-spacing:0;color:var(--ink-3)}
.field-td-num small{display:block;font:9.5px var(--mono);color:var(--ink-3)}

.field-rule.open{background:var(--g-2)}
.field-rule-name b{display:block;font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.field-rule-open{padding:0 14px 14px;border-bottom:1px solid var(--line);background:var(--g-2)}
.field-rule-open p{margin:0 0 9px;max-width:72ch;font-size:12px;line-height:1.5;color:var(--ink-2)}

.field-filter{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.field-said{min-width:0}
.field-said b{display:block;font-size:13px;font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-said small{display:block;margin-top:2px;font:9.5px var(--mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-measures{display:flex;flex-wrap:wrap;gap:5px 6px;margin:0 0 12px}
.field-measures span{padding:2px 8px;border:1px solid var(--line);border-radius:4px;font-size:11px;color:var(--ink-2)}
.field-ruling.skipped i{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.field-ruling.skipped .field-ruling-req{color:var(--ink-3)}
.field-pointer{display:flex;align-items:baseline;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.field-pointer span{font:9.5px var(--mono);color:var(--ink-3)}
.field-pointer code{font:11px var(--mono);color:var(--ink)}

.field-card{margin:18px 0;padding:14px 15px;border:1px solid var(--line);border-radius:10px;background:var(--g-2)}
.field-card h3{margin:0 0 4px;font-size:13px}
.field-store{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0 9px;border-top:1px solid var(--line)}
.field-store-name b{display:block;font-size:13px;font-weight:500}
.field-store-name small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
.field-import{display:grid;gap:6px;padding:9px 0}
.field-import span{font-size:11.5px;color:var(--ink-2)}

.field-form{display:grid;justify-items:start;gap:11px;margin-top:12px;padding-top:13px;border-top:1px solid var(--line)}
.field-form h3{margin:0;font-size:13px}
.field-form p{margin:0;max-width:64ch;font-size:12px;line-height:1.5;color:var(--ink-2)}
.field-input{display:grid;gap:4px;width:min(430px,100%)}
.field-input span{font:9.5px var(--mono);color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.field-input input{height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--g-1);color:var(--ink);font-size:12.5px}
.field-input input:focus{outline:none;border-color:var(--focus)}
.field-posture{display:grid;gap:3px;width:100%;margin-top:9px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--g-1);color:var(--ink-3);text-align:left;cursor:pointer}
.field-posture b{font-size:12.5px;font-weight:600;color:inherit}
.field-posture span{font-size:11.5px;line-height:1.5;color:inherit}
.field-posture.on{color:var(--ink);border-color:var(--line-2)}
.field-reading-lens{display:grid;gap:2px}
.field-measure-list{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.field-measure{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:baseline;padding:10px 13px;border-bottom:1px solid var(--line)}
.field-measure:last-child{border-bottom:0}
.field-measure b{font-size:12.5px;font-weight:400;color:var(--ink)}
.field-measure small{font:9.5px var(--mono);color:var(--ink-3);white-space:nowrap}
.field-blank p{margin:9px 0 0}
.field-install{margin-top:6px}
.field-install .field-pick{margin-bottom:8px}
@media(max-width:700px){
  .field-figure:last-child:nth-child(odd){grid-column:1/-1}
  .field-tr{grid-template-columns:minmax(0,1fr) 78px 78px;gap:9px}
  .field-tr>*:nth-child(n+4){display:none}
  .field-rule{grid-template-columns:minmax(0,1fr) 140px;gap:8px 12px}
  .field-rule i{grid-column:1/-1}
  .field-rule-name,.field-rule-name b{white-space:normal}
  .field-store,.field-measure{grid-template-columns:minmax(0,1fr)}
  .field-store .field-link,.field-measure .field-link{justify-self:start}
}
/* The run's board: the trials as cells that light as they settle, the figures over them, and one
   lens open under them. Before Run it is the same board at zero, so nothing on the screen changes
   shape when the run starts: cells fill, figures move, rows gain their verdicts. Every choice is
   marked by ink alone. Nothing here moves on a clock; a cell lights because a verdict landed. */

.board{display:grid;gap:16px;margin:22px 0 0;min-width:0}
.board[hidden]{display:none}

/* The figures. One size whether there are two or six of them. */
.board-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,196px));justify-content:start;gap:8px}
.board-fig{display:grid;gap:2px;padding:12px 14px 11px;border:1px solid var(--line);border-radius:12px;background:var(--g-1);min-width:0}
.board-fig[hidden]{display:none}
.board-fig b{font-size:24px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
.board-fig.lead b{color:var(--held)}
.board-fig.hurt b{color:var(--hold)}
.board-fig span{font-size:12px;line-height:1.35;color:var(--ink-2)}

/* The tracker: what a cell is, then the cells, one row per endpoint. */
.board-track{display:grid;gap:10px;padding:14px 15px 15px;border:1px solid var(--line);border-radius:14px;background:var(--g-1)}
.board-track-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.board-track-head>b{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.board-keys{display:flex;flex-wrap:wrap;gap:4px 14px}
.board-key{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.board-key[hidden]{display:none}
.board-key i,.board-cell{display:block;width:12px;height:12px;border-radius:3px;background:color-mix(in oklab,var(--line-2) 45%,transparent)}
.board-door{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:6px 14px;align-items:start}
.board-door-name{min-width:0;font-size:12px;line-height:1.4;color:var(--ink-2)}
.board-door-name b{display:block;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-door-name small{display:block;font:10.5px var(--mono);color:var(--ink-3)}
.board-door.shut .board-door-name b{color:var(--ink-3)}
.board-cells{display:grid;grid-template-columns:repeat(auto-fill,12px);gap:4px;padding-top:3px}
.board-cell{width:12px;height:12px;padding:0;border:0;cursor:pointer;transition:transform 140ms ease}
.board-cell:hover,.board-cell:focus-visible{transform:scale(1.5);outline:none}
.board-cell.picked{outline:2px solid var(--ink);outline-offset:1px}
.board-cell.held,.board-key i.held{background:var(--held)}
.board-cell.broke,.board-key i.broke{background:var(--hold)}
.board-cell.unclear,.board-key i.unclear{background:var(--ink-3)}
.board-cell.playing,.board-key i.playing{background:color-mix(in oklab,var(--held) 38%,transparent);box-shadow:inset 0 0 0 1.5px var(--held)}
.board-cell.playing{animation:board-play 1.1s ease-in-out infinite}
@keyframes board-play{50%{box-shadow:inset 0 0 0 1.5px var(--held),0 0 0 3px color-mix(in oklab,var(--held) 22%,transparent)}}
.board-cell.shut,.board-key i.shut{background:repeating-linear-gradient(135deg,var(--line-2) 0 2px,transparent 2px 4px)}
.board-cell.out,.board-key i.out{background:color-mix(in oklab,var(--line-2) 22%,transparent)}
.board-cell.lands{animation:board-land 620ms cubic-bezier(.2,.7,.3,1) both}
@keyframes board-land{0%{transform:scale(.3)}55%{transform:scale(1.5)}100%{transform:scale(1)}}

/* The last line that broke, while the run is on: the customer's own words for it. */
.board-break{display:grid;gap:3px;padding:10px 12px;border-left:2px solid var(--hold);background:var(--g-2);border-radius:0 10px 10px 0}
.board-break[hidden]{display:none}
.board-break q{display:block;font-size:13px;line-height:1.5;color:var(--ink);quotes:'\201C' '\201D';
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.board-break small{font:10.5px/1.5 var(--mono);color:var(--ink-3)}
.board-break small b{font-weight:500;color:var(--hold)}

/* The lenses, marked by ink alone. */
.board-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:4px 0 0}
.board-picked{padding:0;border:0;background:none;color:var(--ink-3);font:inherit;font-size:13.5px;cursor:pointer}
.board-picked:hover{color:var(--ink-2)}
.board-picked.on{color:var(--held);font-weight:600}
.board-picked:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px var(--focus)}
.board-picked small{margin-left:5px;font:10.5px var(--mono);color:var(--ink-3)}
.board-body{min-width:0}
.board-none{margin:8px 0;color:var(--ink-3);font-size:12.5px;line-height:1.55}

/* Rows: one border box, one line each, a dot for the state. */
.board-rows{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--g-1)}
.board-head{padding:9px 14px;background:var(--g-2);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2)}
.board-head:not(:first-child){border-top:1px solid var(--line)}
.board-row{display:grid;grid-template-columns:8px minmax(0,1.8fr) minmax(90px,.8fr) 150px;gap:0 12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.board-row:last-child{border-bottom:0}
.board-row.open{background:var(--g-2)}
.board-row[role="button"]{cursor:pointer}
.board-row[role="button"]:hover{background:var(--g-2)}
.board-row i{display:block;width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.board-row.held i{background:var(--held)}
.board-row.broke i{background:var(--hold)}
.board-row.unclear i{background:var(--ink-3)}
.board-row.playing i{background:var(--held);box-shadow:0 0 0 3px color-mix(in oklab,var(--held) 22%,transparent)}
.board-row.out i,.board-row.shut i{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.board-said{min-width:0}
.board-said b{display:block;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-row.out .board-said b,.board-row.shut .board-said b{color:var(--ink-3)}
.board-said small{display:block;margin-top:2px;font:10.5px var(--mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-bar{display:block;height:5px;border-radius:99px;overflow:hidden;
  background:linear-gradient(90deg,var(--held) 0 var(--w-held,0%),var(--hold) var(--w-held,0%) calc(var(--w-held,0%) + var(--w-broke,0%)),var(--line) calc(var(--w-held,0%) + var(--w-broke,0%)) 100%)}
.board-count{font:11px var(--mono);color:var(--ink-3);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.board-count.broke{color:var(--hold)}
.board-count.held{color:var(--held)}
.board-count small{display:block;font-size:9.5px;color:var(--ink-3)}

/* A trial, opened: its rulings with the line each rests on, then the exchange as it happened. */
.board-detail{display:grid;gap:12px;padding:12px 16px 16px 34px;border-bottom:1px solid var(--line);background:var(--g-2)}
.board-detail:last-child{border-bottom:0}
.board-facts{display:flex;flex-wrap:wrap;gap:5px 6px}
.board-facts span{padding:2px 9px;border:1px solid var(--line);border-radius:99px;font-size:11px;color:var(--ink-2)}
.board-rulings{display:grid;gap:2px}
.board-ruling{display:grid;grid-template-columns:8px minmax(0,1fr);gap:3px 12px;align-items:start;padding:6px 0}
.board-ruling i{display:block;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--ink-3)}
.board-ruling.held i{background:var(--held)}
.board-ruling.broke i{background:var(--hold)}
.board-ruling.waiting i{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.board-ruling-req{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.board-ruling.broke .board-ruling-req{color:var(--ink)}
.board-quote{grid-column:2;display:block;font-size:12.5px;line-height:1.5;color:var(--ink)}
.board-quote small{margin-left:8px;font:10px var(--mono);color:var(--ink-3);white-space:nowrap}
.board-quote small b{font-weight:500;color:var(--hold)}
.board-ruling.held .board-quote small b{color:var(--held)}
.board-quote.none{color:var(--ink-3);font-size:11.5px}
.board-feed{display:flex;flex-direction:column;gap:7px;max-width:70ch}
.board-feed .tvm.you{background:var(--held);color:#0F1E08}
.board-feed .tvm.app{background:var(--g-1);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.board-feed .tvm.app.brk{box-shadow:inset 0 0 0 2px var(--hold)}
.board-feed .tvm.app.none{color:var(--ink-3);font:11px var(--mono)}
.board-feed.planned .tvm.you{opacity:.8}
.board-turn{margin:-3px 0 3px;font:10px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.board-label{margin:2px 0 0;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* Judges: three counts and how sure the judge was. */
.board-judges{display:grid;gap:12px}
.board-judges .board-figs{grid-template-columns:repeat(auto-fit,minmax(150px,220px))}
.board-judges p{margin:0;max-width:72ch;font-size:13px;line-height:1.6;color:var(--ink-2)}
.board-judges p b{color:var(--ink);font-weight:600}

@container (max-width:700px){
  .board-figs{grid-template-columns:1fr 1fr}
  .board-door{grid-template-columns:1fr}
  .board-row{grid-template-columns:8px minmax(0,1fr) 110px;gap:0 10px}
  .board-row .board-bar{display:none}
  .board-detail{padding:12px 14px 14px 24px}
  .board-judges .board-figs{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .board-cell,.board-cell:hover{transition:none;transform:none}
  .board-cell.lands,.board-cell.playing{animation:none}
}

/* The reading: what every reply is put to, and how often each answer held. A rate row picked here
   stands its own cells above the rest; nothing is selected by a bar or an underline. */
.board-rates{display:grid;gap:10px;min-width:0}
.board-legend{margin:0;max-width:78ch;font-size:12px;line-height:1.6;color:var(--ink-3)}
.board-question{grid-template-columns:8px minmax(0,1fr) 190px}
.board-question .board-count,.board-rate .board-count{text-align:right}
.board-question .board-count small{font-size:9.5px;color:var(--ink-3)}
.board-question .board-said b,.board-rate .board-said b{white-space:normal}
.board-question .board-said small,.board-rate .board-said small{white-space:normal}
.board-wk{display:flex;flex-direction:column;gap:3px;min-width:0}
.board-wk small{font:10.5px var(--mono);color:var(--ink-3);white-space:nowrap}
.board-marks{display:flex;flex-wrap:wrap;gap:2px;align-content:center}
.board-cell.back{opacity:.25}
.board-track.picked .board-cell:not(.back){outline:1px solid var(--ink);outline-offset:1px}
.board-break.reading q{quotes:none;color:var(--ink)}
.board-break.reading{border-left-color:var(--held)}
.board-break.reading small b{color:var(--held)}

/* The readings under one reply, worst first: the question, then how sure the reader was. */
.board-readings{display:grid;gap:1px;margin:-2px 0 6px;padding:8px 10px;border-left:2px solid var(--line);background:var(--g-1);border-radius:0 8px 8px 0;max-width:70ch}
.board-readings .board-label{margin:0 0 4px}
.board-reading{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:0 10px;align-items:baseline;padding:2px 0}
.board-reading i{display:block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);transform:translateY(1px)}
.board-reading.held i{background:var(--held)}
.board-reading.broke i{background:var(--hold)}
.board-reading small{font:10px var(--mono);color:var(--ink-3);white-space:nowrap}
.board-reading.broke .board-ruling-req{color:var(--ink)}

/* The whisker, as board/whisker.ts draws it, in the room's own ink. */
.board-wk .wk{position:relative;display:block;height:14px;max-width:100%}
.board-wk .wk-tick{position:absolute;top:4px;width:1px;height:6px;background:var(--line-2)}
.board-wk .wk-line{position:absolute;top:6px;height:2px;background:var(--hold)}
.board-wk .wk-line.zero{background:repeating-linear-gradient(90deg,var(--ink-3) 0 3px,transparent 3px 6px)}
.board-wk .wk-dot{position:absolute;top:4px;width:6px;height:6px;box-sizing:border-box;border:1px solid var(--hold);background:var(--g-1)}
.board-wk .wk-dot.on{background:var(--hold)}

@container (max-width:700px){
  .board-rate,.board-question{grid-template-columns:8px minmax(0,1fr) 110px}
  .board-rate .board-wk,.board-rate .board-marks{display:none}
  .board-readings{padding:8px}
}

/* The Sweep surface. Register 1: hard edges, hairlines, Jost over Geist Mono, one green.
   State is carried by ink rank alone -- idle is the dimmest, running is the brightest, and there is
   no rail, no underline and no accent bar anywhere on this screen. On a deep ground there is one
   direction, so an inverted encoding is not expressible (ground.css says why). */

.sw{padding:18px 0 40px;display:grid;gap:22px}

.sw-head b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em}
.sw-lead{margin:5px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.sw-where{margin:9px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
          color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── the spine: the engine's own order, cheapest first ── */
.sw-spine{border:1px solid var(--line);background:var(--g-1)}
.sw-stage{display:grid;grid-template-columns:26px minmax(160px,auto) minmax(0,1fr) minmax(0,1fr) 92px;
          gap:14px;align-items:baseline;min-height:38px;padding:9px 13px;border-bottom:1px solid var(--line)}
.sw-stage:last-child{border-bottom:0}
.sw-stage-n,.sw-stage-fact,.sw-stage-state{font-family:var(--mono);font-size:10px;letter-spacing:.04em;
          font-variant-numeric:tabular-nums}
.sw-stage b{font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.sw-stage-fact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-stage-say{font-size:12px;line-height:1.5}
.sw-stage-state{text-align:right}
/* Not started carries no numbers and the dimmest ink. A zero here would be a measurement. */
.sw-stage[data-state="idle"]{color:var(--ink-3)}
.sw-stage[data-state="idle"] b{color:var(--ink-3)}
.sw-stage[data-state="done"]{color:var(--ink-3)}
.sw-stage[data-state="done"] b{color:var(--ink-2)}
.sw-stage[data-state="done"] .sw-stage-fact{color:var(--ink-2)}
.sw-stage[data-state="running"]{color:var(--ink-2);background:var(--g-2)}
.sw-stage[data-state="running"] b,
.sw-stage[data-state="running"] .sw-stage-fact,
.sw-stage[data-state="running"] .sw-stage-state{color:var(--ink)}
.sw-stage[data-state="capped"],.sw-stage[data-state="spent"]{color:var(--hold)}
.sw-stage[data-state="capped"] b,.sw-stage[data-state="spent"] b,
.sw-stage[data-state="capped"] .sw-stage-state,.sw-stage[data-state="spent"] .sw-stage-state{color:var(--hold)}
/* The one motion on the spine: the running row breathes. It never moves and never resizes. */
.sw-stage[data-state="running"] .sw-stage-n{animation:swpulse 1.6s cubic-bezier(.22,.68,.32,1) infinite}
@keyframes swpulse{50%{opacity:.32}}

/* What the sweep could not do, under the spine that says what it did. A coverage hole is a finding
   about the harness, and leaving it off the screen is how a partial run reads as a whole one. */
.sw-gaps{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--hold);max-width:78ch}

/* ── figures ──
   One column, not two. The curve's own turn axis needs the room: at half a pane its last tick and
   its axis name land on top of each other, and the figure is drawn 1:1 at the width it is read at. */
.sw-grid{display:grid;gap:20px}
.sw-figure{margin:0}
.sw-eyebrow{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
.sw-fig{border:1px solid var(--line);background:var(--g-1);padding:14px 16px 8px;overflow-x:auto}
.sw-fig svg{display:block;width:100%;height:auto}
.sw-figure figcaption{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--ink-3);max-width:72ch}
.sw-figure figcaption b{color:var(--ink-2);font-weight:500}
.sw-unmapped{display:block;margin-top:5px;color:var(--ink-3)}
/* The report's SVG marks read the room's own tokens, so one figure means one thing in both places. */
.sw-fig .f-held{fill:var(--held)}
.sw-fig .f-broke{fill:var(--broke)}
.sw-fig .f-ink{fill:var(--ink)}
.sw-fig .f-ink2{fill:var(--ink-2)}
.sw-fig .f-ink3{fill:var(--ink-3)}
.sw-fig .f-line2{fill:var(--line-2)}
.sw-fig .f-g1{fill:var(--g-1)}
.sw-fig .s-ink{stroke:var(--ink);fill:none}
.sw-fig .s-line{stroke:var(--line);fill:none}
.sw-fig .s-line2{stroke:var(--line-2);fill:none}
.sw-fig text{font-family:var(--disp)}
.sw-fig text.m{font-family:var(--mono);letter-spacing:.09em}

/* The Behavior screen's own bar graph, on the room's ground. */
.sw-fig .graph{display:none}
.sw-fig .graph.on{display:grid;padding-top:14px;gap:14px 4px;align-items:end}
.sw-fig .graph .slot{appearance:none;border:0;background:none;padding:0 2px 2px;cursor:pointer;
     display:flex;flex-direction:column;align-items:center;min-width:0;font:inherit;color:inherit}
.sw-fig .graph .slot canvas{width:100%;max-width:76px;height:auto;display:block;image-rendering:pixelated}
.sw-fig .graph .slot b{margin-top:5px;font-family:var(--mono);font-size:14px;font-weight:500;
     color:var(--held);font-variant-numeric:tabular-nums;line-height:1.15}
.sw-fig .graph .slot span{font-family:var(--mono);font-size:8.5px;line-height:1.35;letter-spacing:.08em;
     text-transform:uppercase;color:var(--ink-3);text-align:center;overflow-wrap:anywhere}
/* Picked is the lit bar plus brighter ink. Colour and luminance only. */
.sw-fig .graph .slot:hover span,.sw-fig .graph .slot.on span{color:var(--ink)}
.sw-fig .graph .slot.on span{font-weight:600}
.sw-fig .graph .slot:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── the two purses, never added together ── */
.sw-cost{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
         border:1px solid var(--line)}
.sw-purse{background:var(--g-1);padding:13px 15px;min-width:0}
.sw-purse-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--ink-3)}
.sw-purse b{display:block;margin-top:7px;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.sw-purse p{margin:5px 0 0;font-size:12px;line-height:1.55;color:var(--ink-3)}

/* ── the case list ── */
.sw-cases{border:1px solid var(--line);background:var(--g-1)}
.sw-cases-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
               padding:10px 13px;border-bottom:1px solid var(--line)}
.sw-cases-head b{font-size:12.5px}
.sw-cases-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sw-rows{max-height:52vh;overflow-y:auto}
/* A fixed row height is what makes the list scroll-stable and safe to insert into at the top. */
.swrow{display:grid;grid-template-columns:10px minmax(0,1.25fr) 168px auto minmax(0,1.6fr);
       gap:14px;align-items:center;height:40px;padding:0 13px;border-bottom:1px solid var(--line)}
.swrow:last-child{border-bottom:0}
.sw-lane{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3);
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-rule{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:baseline}
.sw-rule b{min-width:0;font-size:12.5px;font-weight:500;color:var(--ink-2);
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-rule b.sw-unnamed{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3)}
.sw-rule i{flex:none;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.12em;
       text-transform:uppercase;color:var(--ink-3)}
.sw-say{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swrow[data-out="broke"] .sw-say{color:var(--broke)}
.swrow[data-out="unclear"] .sw-say{color:var(--hold)}
.swrow.fresh{animation:swfade 140ms linear both}
@keyframes swfade{from{opacity:0}to{opacity:1}}

@media(max-width:1180px){
  .swrow{grid-template-columns:10px minmax(0,1fr) 150px auto minmax(0,1.2fr)}
}
@media(max-width:760px){
  .sw-stage{grid-template-columns:26px minmax(0,1fr) auto;height:auto;padding:9px 13px;row-gap:3px}
  .sw-stage-n,.sw-stage b{grid-row:1}
  .sw-stage-state{grid-column:3;grid-row:1}
  .sw-stage-say{grid-column:2/4;grid-row:2;white-space:normal}
  .sw-stage-fact{grid-column:2/4;grid-row:3;white-space:normal}
  .sw-cost{grid-template-columns:minmax(0,1fr)}
  .swrow{height:auto;grid-template-columns:10px minmax(0,1fr);gap:4px 10px;padding:9px 13px;align-items:baseline}
  .swrow .sw-lane,.swrow .sw-rule,.swrow .sw-say{grid-column:2}
  .swrow .sw-rule b,.swrow .sw-say{white-space:normal}
  .swrow .arc{grid-column:2;margin:2px 0}
  .sw-say{white-space:normal}
  .sw-rows{max-height:none}
}
@media(prefers-reduced-motion:reduce){
  .sw-stage[data-state="running"] .sw-stage-n{animation:none}
  .swrow.fresh{animation:none}
}
/* The Field, as a place rather than a form.

   The back is out of focus and the front is sharp: one ground behind the whole page, lit by how far
   the reading has actually got (--lit, set by field.js from read over landed), and glass cards in
   front of it. The arrival is a spine: five marks on one rail, green up to the step that is
   happening. Nothing in here moves on a clock. The only animation is a square or a log line
   landing, which happens because that conversation arrived while the screen was open, and the
   ground brightening, which happens because more of the window has been read. */

.field-page{position:relative;isolation:isolate;overflow-x:clip;padding:8px 0 56px}
.field-page>*{position:relative;z-index:1}


/* THE ARRIVAL. Two halves of one room: the steps on the left, what lands on the right. */
.field-cinema{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;max-width:1140px;padding:22px 0 0}
.field-cinema-main{min-width:0}
@media(min-width:1000px){
  .field-cinema{grid-template-columns:minmax(0,1.3fr) minmax(290px,.8fr);gap:38px}
  .field-aside{align-self:start}
}
.field-aside{min-width:0}
.field-aside-card{padding:18px 19px 17px;border:1px solid var(--line);border-radius:18px;
  background:color-mix(in oklab,var(--g-1) 92%,transparent);backdrop-filter:blur(18px);box-shadow:var(--sh-1)}
.field-aside-card>b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.field-aside-sub{margin-top:17px;color:var(--ink-2);font-weight:500}
.field-aside-lines{display:grid;gap:1px;margin-top:10px;border-radius:12px;overflow:hidden;background:var(--line)}
.field-aside-lines span{display:grid;gap:2px;padding:9px 12px;background:color-mix(in oklab,var(--g-2) 78%,transparent);font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.field-aside-lines span i{font-style:normal}
.field-aside-lines span b{font-size:12.5px;font-weight:600;color:var(--ink)}
.field-aside-lines span b.none{font-weight:400;color:var(--ink-3)}
.field-aside-foot{margin:15px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.field-open h2,.field-page h2{margin:0 0 10px;font-size:clamp(23px,3.2vw,33px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.field-lede{margin:0;max-width:54ch;color:var(--ink-2);font-size:14.5px;line-height:1.55}

.field-steps{list-style:none;display:grid;gap:0;margin:30px 0 0;padding:0}
.field-step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 16px;padding:0 0 14px}
.field-step:last-child{padding-bottom:6px}
/* The rail between one mark and the next, green as far as the work has actually got. */
.field-step::before{content:'';position:absolute;left:15px;top:36px;bottom:0;width:2px;border-radius:2px;background:var(--line-2);opacity:.5}
.field-step:last-child::before{display:none}
.field-step.done::before{background:var(--held);opacity:1}
.field-step-mark{width:32px;height:32px;border-radius:50%;border:2px solid var(--line-2);background:var(--g-1);display:grid;place-items:center}
.field-step.waiting .field-step-mark{opacity:.55}
.field-step.now .field-step-mark{border-color:var(--held);box-shadow:0 0 0 5px color-mix(in oklab,var(--held) 16%,transparent)}
.field-step.now .field-step-mark::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--held)}
.field-step.done .field-step-mark{background:var(--held);border-color:var(--held)}
.field-step.done .field-step-mark::after{content:'';width:11px;height:6px;margin-top:-3px;border-left:2.5px solid var(--g-0);border-bottom:2.5px solid var(--g-0);border-radius:1px;transform:rotate(-45deg)}
/* Each step is its own card, in front of the ground and connected to the next by the rail. */
.field-step-body{min-width:0;padding:13px 16px 14px;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in oklab,var(--g-1) 90%,transparent);backdrop-filter:blur(18px);box-shadow:var(--sh-1)}
.field-step.waiting .field-step-body{background:color-mix(in oklab,var(--g-1) 58%,transparent);box-shadow:none}
.field-step.now .field-step-body{border-color:color-mix(in oklab,var(--held) 40%,var(--line))}
.field-step-body>b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.field-step.waiting .field-step-body>b{color:var(--ink-2);font-weight:500}
.field-step-teach{margin:5px 0 0;max-width:58ch;color:var(--ink-2);font-size:13px;line-height:1.55}
.field-step.waiting .field-step-teach{color:var(--ink-3)}
.field-step-fact{margin:7px 0 0;font:11px var(--mono);letter-spacing:.01em;color:var(--held);font-weight:500}
.field-offer{margin:22px 0 4px;background:color-mix(in oklab,var(--held) 7%,var(--g-1));border-color:color-mix(in oklab,var(--held) 28%,var(--line))}
.field-offer h3{margin:0}
.field-offer p{margin:7px 0 13px;max-width:62ch;color:var(--ink-2);font-size:13px;line-height:1.55}

/* What the step that is happening asks for, inside that step's own card: glass over glass is mud. */
.field-step-do{margin-top:13px;padding:13px 0 0;border-top:1px solid var(--line)}
.field-go{height:40px;padding:0 20px;border:0;border-radius:11px;background:var(--held);color:#12210B;font-size:14px;font-weight:650;cursor:pointer}
html[data-mode="light"] .field-go{color:#FFF}
.field-go:hover{filter:brightness(1.07)}
.field-go:disabled{opacity:.6;cursor:default;filter:none}
.field-once{display:block;margin:0 0 8px;font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.field-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;margin:0;padding:12px 13px;
  border:1px solid var(--line);border-radius:12px;background:color-mix(in oklab,var(--g-2) 70%,transparent)}
.field-copy pre{margin:0;overflow-x:auto;font:11.5px/1.65 var(--mono);color:var(--ink)}
.field-copybtn{height:31px;padding:0 13px;border:1px solid var(--line-2);border-radius:9px;background:var(--g-1);color:var(--ink-2);font-size:12px;font-weight:600;cursor:pointer}
.field-copybtn:hover{color:var(--ink)}
.field-install .field-pick{margin:0 0 11px}
.field-listen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.field-listen span{color:var(--ink-2);font-size:13px;line-height:1.5}
.field-ear{width:12px;height:12px;border-radius:50%;background:var(--held);box-shadow:0 0 0 5px color-mix(in oklab,var(--held) 18%,transparent),0 0 0 11px color-mix(in oklab,var(--held) 8%,transparent)}

/* THE STRIP, once conversations are landing and something is still filling in. */
.field-arriving{margin:0 0 18px;padding:15px 16px 16px;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in oklab,var(--g-1) 94%,transparent);backdrop-filter:blur(16px);box-shadow:var(--sh-1)}
.field-arriving-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.field-arriving-head b{font-size:14px;font-weight:600}
.field-arriving-head span{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.field-arriving .field-step-teach{margin:5px 0 12px}

/* THE TRACKER. It moves because a reading finished. */
.field-import i{display:block;height:7px;border-radius:99px;background:color-mix(in oklab,var(--line-2) 45%,transparent);overflow:hidden}
.field-import i::after{content:'';display:block;height:7px;width:var(--done,0%);border-radius:99px;
  background:linear-gradient(90deg,color-mix(in oklab,var(--held) 72%,var(--g-0)) 0%,var(--held) 100%);
  transition:width 700ms cubic-bezier(.2,.7,.3,1)}

/* THE LOG. What the last readings actually said, in the words of the conversation. */
.field-eg{margin-top:14px;padding:12px 13px 13px;border:1px solid var(--line);border-radius:12px;background:var(--g-1)}
.field-eg>small{display:block;font:10px var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.field-eg>b{display:block;margin:5px 0 9px;font-size:13.5px;font-weight:500;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.field-eg .field-aside-lines{margin:0}
.field-eg.lands{animation:field-land 620ms cubic-bezier(.2,.7,.3,1) both}
@keyframes field-land{from{opacity:0;transform:translateY(-6px);background:color-mix(in oklab,var(--held) 22%,var(--g-1))}to{opacity:1;transform:none}}

/* One card, when there is nothing else to say yet. */
.field-note{max-width:60ch;margin:24px 0 0;padding:18px 20px;border:1px solid var(--line-2);border-radius:18px;
  background:color-mix(in oklab,var(--g-1) 94%,transparent);backdrop-filter:blur(16px);box-shadow:var(--sh-1)}
.field-note b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.field-note p{margin:8px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55}

/* THE WINDOW. */
.field-head{display:grid;gap:14px;margin:6px 0 16px}
/* A figure keeps its size whether there is one of them or five: a lone number stretched across the
   page is a banner, not a figure. */
.field-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,224px));justify-content:start;gap:10px;margin:0;border:0;background:none}
.field-figure{display:grid;gap:3px;padding:15px 16px 14px;border:1px solid var(--line-2);border-radius:16px;
  background:color-mix(in oklab,var(--g-1) 94%,transparent);backdrop-filter:blur(16px);box-shadow:var(--sh-1)}
.field-figure b{font-size:27px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1}
.field-figure:first-child b{color:var(--held)}
.field-figure span{color:var(--ink-2);font-size:12.5px;line-height:1.4}

.field-tracker{margin:0 0 22px;padding:15px 16px 16px;border:1px solid var(--line);border-radius:18px;
  background:color-mix(in oklab,var(--g-1) 90%,transparent);backdrop-filter:blur(16px)}
.field-tracker-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.field-tracker-head>b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.field-tracker-head>small{flex-basis:100%;font:10.5px var(--mono);color:var(--ink-3)}
.field-keys{display:flex;flex-wrap:wrap;gap:5px 15px}
.field-key{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.field-key i{width:10px;height:10px;border-radius:3px}
.field-tracker .field-cells{margin:13px 0 0;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none}
.field-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(16px,24px));justify-content:start;gap:5px;margin:0 0 22px;padding:16px;
  border:1px solid var(--line);border-radius:18px;background:color-mix(in oklab,var(--g-1) 90%,transparent);backdrop-filter:blur(16px)}
.field-cells i,.field-cells button{display:block;width:100%;padding:0;border:0;aspect-ratio:1;border-radius:4px;background:color-mix(in oklab,var(--line-2) 40%,transparent);cursor:pointer;transition:transform 160ms ease}
.field-cells button:hover,.field-cells i:hover{transform:scale(1.35)}
.field-cells button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus);transform:scale(1.35)}
.field-cells .held,.field-key i.held{background:var(--held)}
.field-cells .broke,.field-key i.broke{background:var(--hold)}
.field-cells .unsure,.field-key i.unsure{background:var(--ink-3)}
.field-cells .reading,.field-key i.reading{background:color-mix(in oklab,var(--held) 26%,transparent)}
.field-cells i.none{background:color-mix(in oklab,var(--line-2) 26%,transparent);cursor:default}
.field-cells .picked{outline:2px solid var(--ink);outline-offset:2px}
.field-cells .lands{animation:field-cell-land 700ms cubic-bezier(.2,.7,.3,1) both}
@keyframes field-cell-land{0%{opacity:0;transform:scale(.2)}55%{opacity:1;transform:scale(1.5);box-shadow:0 0 12px color-mix(in oklab,var(--held) 70%,transparent)}100%{transform:scale(1);box-shadow:none}}
.field-blank{margin:0 0 22px}
.field-blank .field-cells{margin:0}
.field-blank p{margin:10px 2px 0}

/* One row of choices, marked by colour alone. */
.field-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 16px}
.field-picked{padding:0;border:0;background:none;color:var(--ink-3);font:inherit;font-size:12.5px;cursor:pointer}
.field-picked:hover{color:var(--ink-2)}
.field-picked.on{color:var(--held);font-weight:600}
.field-picked:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px var(--focus)}
.field-lens{margin:24px 0 14px;font-size:14px}
.field-lens .field-picked{font-size:14px}

/* The lenses. They sit below the lit ground, so they are a plain surface: glass over nothing costs
   a repaint and buys no depth. */
.field-rows,.field-rules,.field-table,.field-measure-list,.field-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--g-1)}
.field-rows{border-top:1px solid var(--line)}
.field-row{padding:11px 14px;border-bottom:1px solid var(--line)}
.field-row:last-child{border-bottom:0}
.field-row:hover{background:var(--g-2)}
.field-row i{border-radius:50%}
.field-detail{padding:12px 16px 18px 34px;background:var(--g-2)}
.field-rule{padding:12px 15px}
.field-rules .field-rule{grid-template-columns:minmax(0,1.6fr) minmax(110px,1fr) 176px}
.field-rules .field-rule>b small{display:block;margin-top:2px;font-size:9.5px;color:var(--ink-3)}
.field-rule-head{padding:11px 15px;background:var(--g-2);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2)}
.field-rule-head:not(:first-child){border-top:1px solid var(--line)}
.field-rule-name,.field-rule-name b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.field-rule i{border-radius:99px;overflow:hidden}
.field-tr{padding:12px 15px}
.field-measures span{border-radius:99px;padding:3px 10px}
.field-card{margin:20px 0;padding:16px 17px}
.field-posture{border-radius:12px}
.field-input input{border-radius:10px}
.field-filter{padding:11px 14px}
.field-wait{margin:14px 0;color:var(--ink-3);font:11px var(--mono)}
.field-none{color:var(--ink-3);font-size:12px;line-height:1.55}

/* The terminal bar is the Lab's: a bar about the customer's own machine has nothing to say about
   traffic their app is sending from wherever it runs. */
.shell.field .drawer{display:none}

@media(max-width:700px){
  /* The page it sits in gives fourteen; a phone needs sixteen. */
  .field-page{padding:0 2px 40px}
  .field-cinema{padding-top:16px;gap:18px}
  .field-aside-card{padding:16px 15px 15px}
  .field-figures{grid-template-columns:1fr 1fr}
  .field-figure b{font-size:23px}
  .field-arriving-head{flex-wrap:wrap;gap:4px 12px}
  .field-copy{grid-template-columns:minmax(0,1fr);gap:10px}
  .field-copybtn{justify-self:start}
  .field-step{grid-template-columns:26px minmax(0,1fr);gap:0 13px}
  .field-step::before{left:12px;top:28px}
  .field-step-mark{width:26px;height:26px}
  /* A conversation on a phone: when and verdict on one line, what they said under it, how it ended
     under that. Nothing is cut off mid-sentence and nothing is dropped. */
  .field-row{grid-template-columns:10px minmax(0,1fr) auto;gap:3px 10px;align-items:start;padding:12px 14px}
  .field-row i{grid-area:1/1;margin-top:5px}
  .field-when{grid-area:1/2}
  .field-row>b{grid-area:1/3}
  .field-said{grid-area:2/2/auto/4}
  .field-said b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .field-said small{white-space:normal}
  .field-outcome{display:block;grid-area:3/2/auto/4;font-size:11.5px;color:var(--ink-2)}
  .field-mood{display:none}
  .field-detail{padding:12px 14px 16px 24px}
}

@media(prefers-reduced-motion:reduce){
  .field-import i::after,.field-cells i,.field-cells button{transition:none}
  .field-eg.lands,.field-cells .lands{animation:none}
  .field-cells i:hover,.field-cells button:hover{transform:none}
}

/* The raise strip. One component on two grounds: it takes whichever token family the page it is
   mounted on defines -- the console's --surface/--green/--ui, or the world room's --g-1/--held/
   --disp -- and keeps the product's shapes on both.

   One line and one bar. The bar is a canvas milled in the house pixel set by strip-ui/bar.ts -- same
   unit, same dithered green ramp and pressed shadow as the Behavior graph -- so the only thing this
   file gives it is a box to fill. Every cell it lights is derived from rows done, never from
   the clock: a real build always stalls late, and a fill driven by elapsed time runs ahead of the
   work and then sits still exactly where it matters. strip.test.mjs asserts that. */

/* No box. The strip sat in a bordered card inside the room's own panel, so the customer read two
   nested frames around one bar; it belongs to the surface it is on. */
.rstrip{display:block;color:var(--ink);margin:0 0 18px;font-family:var(--ui,var(--disp))}
/* Before either call has answered there is no build to report, so there is no bar. A dimmed empty
   shape is a picture of a bar, and it popped into life when the first event landed. It enters when
   it has a number to show, and from then on it fills in place and never blinks again. */
.rstrip[data-skeleton]{display:none}
.rstrip .rtop{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.rtitle{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* Edge to edge under the line, the way the journey's rail sits under its segments: progress starts
   where the strip starts. The canvas mills itself at the width this box gives it. */
.rrail{display:block}
.rbar{display:block;width:100%;height:18px;image-rendering:pixelated}

/* Why this step exists: under the title on hover or focus, drawn from the page. */
.rstrip .rtop{position:relative;flex-wrap:wrap}
.rtitle{cursor:default;outline:none}
.rtitle:focus-visible{box-shadow:0 2px 0 var(--green,var(--held))}
.rtime{font-size:12px;color:var(--ink-3)}
.rtip{font-size:12px;color:var(--ink-2)}
/* What is done and what is on now, under the bar. */
.rdone{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:90ch}

.rghost{appearance:none;border:0;background:none;padding:0;margin:0 0 10px;font:inherit;font-size:12.5px;color:var(--ink-3);cursor:pointer}
.rghost:hover{color:var(--ink)}

/* A world that came up stops taking the room. */
.rstrip[data-shut]{display:none}

.rnote{font-size:13px;color:var(--ink)}
.rnote p{margin:8px 0 0}

/* Terminal. It keeps every finished row on the page and leads with them, so the work that was real
   still reads as real. No error styling: a red panel is a verdict on the customer's repository. */
.rterm{margin:11px 0 0;border-top:1px solid var(--line);padding:11px 0 0}
.rdid{margin:0 0 5px;font-size:12.5px;color:var(--ink-2)}
.rwhy{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink)}
.rfix{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:11px}
.rfix label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-3);min-width:220px;flex:1}
.rfix input{border:1px solid var(--line-2);background:var(--page,var(--g-2));color:var(--ink);
            padding:7px 9px;font:inherit;font-size:13px;outline:none}
.rfix input:focus{border-color:var(--green,var(--held))}
.racts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rgo{border:0;background:var(--green,var(--held));color:#FFFFFF;font-weight:600;
     font-size:12.5px;padding:8px 13px;cursor:pointer}
.rgo:disabled{background:var(--line-2);cursor:default}
.rlog{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);cursor:pointer}
.rlog:hover{color:var(--ink)}
.rlines{margin:10px 0 0;padding:9px 10px;background:var(--raised,var(--g-2));font-family:var(--mono);
        font-size:11px;line-height:1.6;color:var(--ink-2);max-height:220px;overflow:auto;white-space:pre-wrap}
.rerr{margin:8px 0 0;font-size:12.5px;color:var(--red,var(--broke))}
.rfound{margin:9px 0 0;font-size:12.5px;color:var(--ink-3)}
.rfound a{color:var(--green-d,var(--held));font-weight:500}
.rfound a:hover{text-decoration:underline}

@media(max-width:640px){.rstrip{margin-bottom:12px}}
/* The start field inside the failure card: the connect step's own component, one press to accept. */
.rfix .startfield{border-top:0;padding-top:0}
.rfix .startrow input{font:500 12px var(--mono);color:var(--ink);background:var(--page,var(--g-2));border:1px solid var(--line-2);border-radius:6px;padding:7px 9px}
.rfix .startcmd{flex:1 1 240px;min-width:0}.rfix .startdir{flex:0 1 160px;min-width:0}
.rfix .startin,.rfix .startfrom,.rfix .startalt-lbl{font-size:11.5px;color:var(--ink-3)}.rfix .startfrom{margin:0}
.rfix .startalts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rfix .startalt{appearance:none;font:500 11.5px var(--mono);color:var(--ink-2);background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer}
.rfix .startfoot{display:flex;align-items:center;gap:10px}
/* Once added at runtime, so last, in the order they were appended. */
.rp-verdicts{display:grid;gap:10px}
.rp-verdict{display:grid;gap:7px;padding:13px 15px;border:1px solid var(--line);border-left:2px solid var(--hold);border-radius:0 12px 12px 0;background:var(--g-1)}
.rp-verdict-head b{display:block;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.rp-verdict-head small{display:block;margin-top:2px;font:10.5px var(--mono);color:var(--ink-3)}
.rp-verdict-rate{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.rp-verdict-rate b{color:var(--hold);font-weight:600;font-variant-numeric:tabular-nums}
.rp-verdict-quote{margin:0;padding:7px 11px;background:var(--g-2);border-radius:8px;font-size:12.5px;line-height:1.55;color:var(--ink)}
.rp-verdict-quote small{display:block;margin-top:3px;font:10px var(--mono);color:var(--ink-3)}
.rp-verdict-from{margin:0;font:10.5px var(--mono);color:var(--ink-3)}
.rp-verdict-press{display:flex;align-items:center;gap:9px;margin:5px 0 0;flex-wrap:wrap}
.rp-verdict-press-btn{padding:4px 10px;border:1px solid var(--line);border-radius:7px;background:var(--g-1);color:var(--ink-2);font:11px var(--mono);cursor:pointer}
.rp-verdict-press-btn:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)}
.rp-verdict-press-btn:disabled{opacity:.5;cursor:default}
.rp-verdict-press-said{font:11px var(--mono);color:var(--ink-3)}
/* A column of the grid is a question, and a question needs more than four letters to be one. */
.rp .grid .mx-col{height:280px;font-size:9.5px}
.rp .grid .mx-colend{height:110px}
/* A row is the owner's own cell with every axis named, which does not fit in two words. */
.rp .grid .mx-lab{width:300px}
.fixture{background:var(--hold,#D89C36);color:#160D00;padding:9px 14px;display:flex;
gap:12px;align-items:baseline;font-size:12px;flex:none}
.fixture b{font-weight:600}
.fixture span{font-size:12px;opacity:.85}
.gate{border:0;padding:0;background:transparent;color:var(--ink);font-family:var(--disp);
      max-width:none;max-height:calc(100dvh - 32px);overflow:auto}
.gate::backdrop{background:rgba(8,17,27,.62)}
html[data-mode="light"] .gate::backdrop{background:rgba(23,34,45,.38)}
.gate-box{box-sizing:border-box;width:min(900px,calc(100vw - 32px));background:var(--g-1);box-shadow:var(--sh-2);
          padding:30px;display:grid;gap:18px}
.gate-title{margin:0;font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.35;
            color:var(--ink);max-width:34ch}
.gate-intro{margin:-8px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:64ch}
.gate-limits{font-size:12px;color:var(--ink-3)}
.gate-limits summary{cursor:pointer}
.gate-limits p{margin:8px 0 0}
.gate-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
@media(max-width:620px){.gate-plans{grid-template-columns:1fr}}
.gate-plan{background:var(--g-0);box-shadow:inset 0 0 0 1px var(--line);padding:18px 18px 16px;
           display:grid;gap:10px;align-content:start}
.gate-plan.pick{box-shadow:inset 0 0 0 2px #76b900}
.gate-plan h3{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.gate-price{margin:0;display:flex;align-items:baseline;gap:7px}
.gate-price b{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.gate-price span{font-size:12px;color:var(--ink-3)}
.gate-plan .go{justify-content:center}
.gate-lines{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.gate-lines li{font-size:12.5px;line-height:1.5;color:var(--ink-2);
               padding-left:14px;position:relative}
.gate-lines li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;
                       background:#76b900}
.gate-lines li.off{color:var(--ink-3)}
.gate-lines li.off::before{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.gate-status{margin:0;font-size:12px;color:var(--ink-2)}
.gate-status:empty{display:none}
.gate-shut{justify-self:start;padding:0;border:0;background:none;cursor:pointer;
           font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.gate-shut:hover{color:var(--ink)}
.gate :focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* The second press in the run slot: the bar's own button geometry, in the quiet idiom, because
   there is one primary action and opening a pull request is not it. Neither button wraps: two of
   them in the bar let the flex row shrink both into two lines each. The slot's own skin sets a
   background on hover, so these carry its specificity rather than the room's. */
.runslot .go{flex:none;white-space:nowrap}
.runslot .go.second{background:transparent;border-color:var(--line-2);color:var(--ink-2);box-shadow:none}
.runslot .go.second:hover{background:var(--g-2);border-color:var(--ink-3);color:var(--ink);filter:none}
.behavior-offer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px;padding:4px 0 12px;text-align:left}
.behavior-offer section{min-width:0;padding-top:12px;border-top:2px solid var(--line,#d6e0eb)}
.behavior-offer section:first-child{border-top-color:#76b900}
.behavior-offer h3{margin:0 0 7px;font:600 16px/1.3 var(--disp,inherit);letter-spacing:-.015em;color:var(--ink,#132338)}
.behavior-offer p{margin:0;font:400 14px/1.55 var(--disp,inherit);color:var(--ink-2,#3f5570)}
@media(max-width:760px){.behavior-offer{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:480px){.behavior-offer{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}