/* HealthBot — Evaluation + Cost page (v1 skeleton).
   Sibling of the review console. The page flips to a dark stage because this is
   the back of the house: the machine testing itself, nobody in the conversation.
   The CARDS keep the bench's type system and card treatment; only the phone
   screen wears a costume. */

:root {
  /* the mark's green arc, alongside the tube's own phosphor */
  /* --ev-green's hue (145) carried at --crt-dim's chroma, so the arc belongs to
     the tube; its glow takes --crt-fg's chroma, the way --crt-glow does */
  --crt-green: #1b8547;
  /* the lit green, for the terminal's pass and completion lines */
  --crt-green-lit: #4dfb8a;
  /* The stage band wears the terminal's cyan skin off the same values as
     .crt[data-skin="cyan"] -- the tube's ground, and the secondary cyan the
     EVAL TERMINAL header is set in rather than the bright phosphor. */
  --phase-ink: #2a8b9d;
  --phase-key: #6b7480;
  --crt-green-glow: rgba(72, 255, 148, .45);
  --teal: #2a8b9d;
  --teal-dark: #237b8c;
  /* One green, everywhere: titles, the 1-7 badge fills, the scrollbar thumb, the
     winner tile's name and numbers, the quality scores, the WINNER badge and its
     strip. Deliberately the darker value -- it reads at 3.5:1 as text on the card
     rather than the 8.9:1 the lighter one gave, which is a knowing trade for
     having a single green on the page. Tuned by eye against the card surface. */
  --ev-green: #3b9b63;
  /* the green solids -- the winner badge, its strip and the tile border -- and the
     text that sits on them. Separate tokens so the tile can be dialled without
     moving the rest of the page. */
  --ev-green-fill: var(--ev-green);
  --ev-green-ink: #eafbe9;
  /* The winner tile's three solids -- the WINNER badge, the reason strip along
     its bottom edge, and the tile's own border -- ride their own token so the
     tile can be dialled without dragging the badges and buttons with it.
     A shade darker and a touch less saturated than the page green, with the
     label lifted off it -- tuned by eye, 3.97:1. Still short of the 4.5 these
     8px uppercase labels want, but a knowing trade for keeping the tile from
     glowing louder than the numbers it frames. */
  --ev-win-fill: #2e8a50;
  --ev-win-ink: #ebf9f0;
  --green: #74c264;
  --green-head: #4f9e42;
  --red: #c0504d;

  /* dark stage */
  --ink: #e8ebef;               /* reversed body text */
  --ink-soft: #99a2ad;
  --line: #2b3038;
  --bg: #0b0d10;                /* near-black page */
  --card: #16191e;              /* card surface, a step up from the page */
  --card-line: #242932;

  /* CRT skin — swap these three (or set data-skin) to redress the terminal */
  --crt-bg: #04120a;
  --crt-fg: #4dfb8a;
  --crt-dim: #1f7a45;
  --crt-glow: rgba(77, 251, 138, .55);
  --crt-font: 'VT323', 'IBM Plex Mono', monospace;
  --crt-size: 19px;
  --crt-tracking: .02em;

  /* The chassis photograph's rendered height, from its width and native aspect.
     The cards column is cut to the same line, so the container's bottom rule and
     the photograph's bottom edge land together at any viewport width. */
  --chassis-h: calc(var(--chassis-w, 472px) * 2618 / 1536);
  --chassis-bottom: calc(var(--chassis-y, -25px) + var(--chassis-h));
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

body {
  margin: 0;
  font-family: 'Roboto', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  /* the bench's stroked plus, kept — but in dark gray, so this page reads as the
     bench's sibling rather than a different product. Same 30px cell. */
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%3E%3Cpath%20d%3D%22M10.5%2015H19.5M15%2010.5V19.5%22%20stroke%3D%22rgba(140%2C155%2C185%2C0.10)%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size: 30px 30px;
  background-repeat: repeat;
}
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; font-weight: 700; }

/* ===================== splash + access gate (bench parity) ===================== */
.auth-splash { position: fixed; inset: 0; background: var(--bg); z-index: 20000; transition: opacity .25s ease; }
.auth-splash.splash-gone { opacity: 0; pointer-events: none; }

/* The page shows through, blurred, so you can see what you are being let into.
   Nothing is hidden by this: eval.html and results.json are static files served
   without auth already — the password protects the API, which costs money, not
   this page. */
.gate {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 13, 0.30);
  backdrop-filter: blur(3px) saturate(1.00);
  -webkit-backdrop-filter: blur(3px) saturate(1.00);
}
/* the page behind is visible but inert while the gate is up */
body.gated #app { pointer-events: none; user-select: none; }
.gate-card {
  background: #fff; color: #3a3d42; border-radius: 14px; padding: 34px clamp(20px, 5vw, 38px) 30px;
  width: min(430px, calc(100vw - 40px)); text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.gate-logo { display: flex; justify-content: center; margin-bottom: 10px; }
.gate-card h1 { font-size: clamp(15px, 4.9vw, 22px); margin: 0 0 6px; white-space: nowrap; }
.gate-card p { margin: 0 0 18px; font-size: 13px; color: #6b7077; }
.gate-card input { width: 100%; padding: 11px 13px; font-size: 14px; border: 1px solid #e6e6e6; border-radius: 8px; margin-bottom: 12px; }
.gate-card input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.gate-card button { width: 100%; padding: 11px; border: 0; border-radius: 8px; cursor: pointer; background: var(--teal); color: #fff; font-weight: 700; font-size: 14px; }
.gate-card button:hover { background: var(--teal-dark); }

/* "Email me" chip — same interaction and confirmation as danbenner.com/stealth.html */
.gate-help { margin: 18px 0 8px !important; font-size: 12px; color: #6b7077; }
.email-copy {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: .3px;
  color: #2A3036; padding: 5px 14px; border-radius: 6px;
  background: rgba(0,0,0,.08); cursor: pointer; user-select: none;
  transition: background-color .25s ease;
}
.email-copy:hover { background: rgba(0,0,0,.16); }
.email-copy:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.email-copy-divider { width: 1px; height: 14px; background: currentColor; opacity: .3; }
.email-copy-label { font-size: 12px; }
.ec-icon { flex: none; }
.email-copy-done { background: rgba(44,110,58,.16); }

.gate-error { min-height: 16px; margin: 10px 0 0 !important; color: var(--red); font-size: 12px; }

/* ======================= OUT-OF-FICTION demo banner ======================= */
/* One line, under the title band. Only as tall as its own text. */
.demo-banner { background: #fdf1c2; color: #7a5c00; border: 0; padding: 5px 24px; }
.demo-banner-inner {
  display: block; margin: 0 auto; width: 100%; max-width: 1083px; text-align: center;
  font-size: 11.5px; line-height: 1.4;
}
.demo-banner-tag {
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: .6em;
}
.demo-banner-text { }

/* ---- sticky page head: banner + title ride along while the cards scroll ---- */
.pagehead {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);                /* solid, so the plus pattern doesn't show through */
  border-bottom: 1px solid var(--card-line);
}

/* ============================ TOP STRIP ============================ */
/* Same construction as the bench: a centred row, title+subtitle stacked on the
   left, the descriptor italic behind a hairline rule. */
.topstrip { position: relative; padding: 16px 24px 14px; color: var(--ink); }
.topstrip-inner {
  max-width: 1083px; margin: 0 auto;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px;
  text-align: left;
}
.ts-left { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.ts-title { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14.4px; letter-spacing: .17em; text-transform: uppercase; line-height: 1.15; color: var(--ink-soft); }
.ts-sub { font-size: 11.7px; line-height: 1.2; color: var(--ink-soft); }
.ts-desc {
  font-size: 11px; font-style: italic; color: var(--ink-soft); line-height: 1.5;
  margin: 0; flex: 0 1 auto; border-left: 1px solid #39404b; padding-left: 24px; max-width: 560px;
}
/* Anchored to the browser's right edge, not to the centred group, and out of the
   flow so it can't pull that group off centre. Filled grey with the label and the
   mark reversed out dark — no stroke, since the fill is doing the work. */
.ts-links {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
}
.ts-back {
  display: inline-flex; align-items: center;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700;
  background: none; color: var(--ink-soft);
  border: 0; border-radius: 999px; padding: 5px 10px;
  box-shadow: inset 0 0 0 1px #343b45;
  text-decoration: none;
  transition: color .15s ease, box-shadow .15s ease;
}
.ts-back:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #4a525e; }
/* the bench's offsite mark, same drawing and proportions */
.ext-icon {
  display: inline-block; width: .9em; height: .9em;
  margin-left: .45em; vertical-align: -.08em; flex: none;
}

/* ============================== STAGE ============================== */
.stage {
  display: flex; gap: 15px; align-items: flex-start; justify-content: center;
  padding: 16px 24px 40px;
  max-width: 1500px; margin: 0 auto;
}
/* The terminal stays on screen. align-self keeps the column its own height so the
   sticky offset has room to travel inside .stage. 108px clears the sticky head. */
/* The frame is the full height of the column beside it, so the chassis can run
   from the dashboard's top edge to the bottom of the card strip's scrollbar.
   Whatever the image does inside is clipped here. */
.phone-col {
  flex: none; align-self: stretch; position: relative; overflow: hidden;
  width: var(--chassis-w, 472px);
  /* the two lower corners fall away rather than ending on a hard edge. A real
     mask rather than an overlay, so the page's plus pattern still reads through
     instead of being covered by a patch of background colour. */
  -webkit-mask-image:
    radial-gradient(54px 40px at 68px 100%, rgba(0,0,0,.52) 0%, #000 74%),
    radial-gradient(54px 40px at 439px 100%, rgba(0,0,0,.52) 0%, #000 74%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(54px 40px at 68px 100%, rgba(0,0,0,.52) 0%, #000 74%),
    radial-gradient(54px 40px at 439px 100%, rgba(0,0,0,.52) 0%, #000 74%);
  mask-composite: intersect;
}
/* A soft inner shadow on all four edges of the hardware, multiplied into the
   metal. Weighted: the bottom carries it, the top is half that, the sides are
   narrower still. Inset from the same variables the clip-path uses, so the
   gradients land on the visible edges of the image. */
.phone::after {
  content: ''; position: absolute; pointer-events: none;
  left: var(--chassis-cl, 35px);
  top: var(--chassis-ct, 14px);
  right: var(--chassis-cr, 33px);
  bottom: var(--chassis-cb, 0px);
  background:
    linear-gradient(to top,    rgba(0,0,0,.30), rgba(0,0,0,0) 56px),
    linear-gradient(to bottom, rgba(0,0,0,.13), rgba(0,0,0,0) 24px),
    linear-gradient(to right,  rgba(0,0,0,.11), rgba(0,0,0,0) 20px),
    linear-gradient(to left,   rgba(0,0,0,.11), rgba(0,0,0,0) 20px);
  mix-blend-mode: multiply;
}

/* ===================== THE PHONE — hardware frame (bench parity) ===================== */
/* The housing is a photograph of a CRT chassis rather than a drawn bezel.
   Opening measured from the image, not estimated: 1054x1976 at (243,216) in a
   1536x2618 crop. Size, offset and per-edge crop ride on variables so
   ?chassistuner=1 can move them live. */
.phone {
  position: absolute;
  left: var(--chassis-x, 33px);
  top: var(--chassis-y, -25px);
  width: var(--chassis-w, 472px);
  aspect-ratio: 1536 / 2618;
  height: auto;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: block;
  clip-path: inset(
    var(--chassis-ct, 1.74%) var(--chassis-cr, 6.99%)
    var(--chassis-cb, 0%) var(--chassis-cl, 7.42%));
}
.crt-chassis {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; user-select: none;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}

/* ===================== THE SCREEN — CRT costume ===================== */
/* Everything monospace/phosphor lives inside .crt. The cards never see it. */
.crt {
  position: absolute;
  left: 15.82%; top: 8.25%; width: 68.62%; height: 75.48%;
  background: var(--crt-bg);
  display: flex; flex-direction: column;
  font-family: var(--crt-font);
  color: var(--crt-fg);
  border-radius: 26px / 18px;        /* the opening's own soft corners */
  overflow: hidden;
}
/* alternate skins — swap with data-skin on #crt */
.crt[data-skin="cyan"]  { --crt-bg: #03121a; --crt-fg: #48e8ff; --crt-dim: #1b6f85; --crt-glow: rgba(72,232,255,.55); }
.crt[data-skin="amber"] { --crt-bg: #150d02; --crt-fg: #ffb547; --crt-dim: #8a5c14; --crt-glow: rgba(255,181,71,.55); }

.crt-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 10px 24px;
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crt-dim);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.crt-head-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--crt-fg);
  box-shadow: 0 0 6px var(--crt-glow); animation: crtPulse 2.4s ease-in-out infinite;
}
@keyframes crtPulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.crt-head-title { flex: 1; }
.crt-head-state { color: var(--crt-fg); }

.crt-screen {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 26px 20px 22px;
  scrollbar-width: none;            /* the ASCII one replaces it */
}
.crt-screen::-webkit-scrollbar { display: none; }

/* the scrollbar, as characters down the right edge of the screen */
.crt-scroll {
  position: absolute; top: 46px; right: 7px; bottom: 16px; margin: 0;
  font-family: var(--crt-font); font-size: var(--crt-size);
  line-height: 1;                   /* blocks touch instead of leaving gaps */
  color: var(--crt-dim);
  text-shadow: 0 0 6px var(--crt-glow);
  white-space: pre; overflow: hidden;
  cursor: pointer; user-select: none;   /* click or drag to scroll */
}
/* the thumb is the lit part, so it glows harder than the track and spills a
   little to its left, into the screen */
.crt-scroll b {
  color: var(--crt-fg); font-weight: 400;
  text-shadow:
    0 0 5px var(--crt-glow),
    -3px 0 12px var(--crt-glow),
    -6px 0 20px var(--crt-glow);
}
.crt-log {
  font-size: var(--crt-size); line-height: 1.34; letter-spacing: var(--crt-tracking);
  white-space: pre-wrap; word-break: break-word;
  /* two passes rather than one: a tight core and a wider halo, so lit lines
     read as phosphor rather than as coloured type */
  text-shadow: 0 0 4px var(--crt-glow), 0 0 13px var(--crt-glow);
}
.crt-line { display: block; position: relative; }
.tl-body { color: var(--crt-fg); }
.tl-dim  { color: var(--crt-dim); text-shadow: none; }
.tl-ok   { color: var(--crt-green-lit); text-shadow: 0 0 6px var(--crt-green-glow); }
/* amber is a real failure only; red stays the emergency marker */
.tl-warn { color: #ffb547; text-shadow: 0 0 6px rgba(255,181,71,.35); }
.tl-h1 {
  display: block; margin: 2px 0 4px; padding: 1px 8px;
  background: var(--crt-fg); color: var(--crt-bg);
  text-shadow: none; letter-spacing: .08em;
}
.tl-h2 { color: var(--crt-fg); text-shadow: 0 0 6px var(--crt-glow); letter-spacing: .06em; }
/* the warning glyph is not a monospace cell, so it is taken out of the flow and
   laid over the row's first cell. Every row keeps the same two leading spaces. */
.crt-flag { position: absolute; left: 0; top: 0; font-style: normal; }
.crt-line--dim { color: var(--crt-dim); text-shadow: none; }
.crt-cursor {
  display: inline-block; width: .55em; height: 1em; vertical-align: -.12em;
  background: var(--crt-fg); box-shadow: 0 0 8px var(--crt-glow);
  animation: crtBlink 1.05s step-end infinite;
}
@keyframes crtBlink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* texture: scanlines, pixel grid, vignette — all above the text, none clickable */
.crt-scanlines, .crt-grid, .crt-vignette { position: absolute; inset: 0; pointer-events: none; }
/* the horizontal scan, multiplied down onto the tube */
.crt-scanlines {
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,var(--scan-alpha, .43)) 0 var(--scan-line, 1px),
    transparent var(--scan-line, 1px) var(--scan-gap, 1.5px));
  opacity: var(--scan-opacity, .55); mix-blend-mode: multiply;
}
/* the vertical grid, brought up from .035/.8 -- at the old value it was there in
   the markup but barely surviving the scanline multiply on top of it */
.crt-grid {
  background: repeating-linear-gradient(to right,
    rgba(255,255,255,var(--grid-alpha, .175)) 0 var(--grid-line, 2.5px),
    transparent var(--grid-line, 2.5px) var(--grid-gap, 3px));
  opacity: var(--grid-opacity, .75);
}
/* The tube's falloff, and the crisp lip the glass sits behind. The radius has
   to match .crt's own clip (26px/18px) or the corners draw to a different curve
   than the screen is cut to. */
.crt-vignette {
  border-radius: 26px / 18px;
  box-shadow:
    inset 0 0 70px 14px rgba(0,0,0,.65),
    /* the hard edge itself: a dark line hugging the crop along the top only --
       the light reads as coming from straight above, so the right wall of the
       cut-out catches no shadow of its own */
    inset 0 3px 0 0 rgba(0,0,0,.95),
    /* and a short falloff off that line, so it has depth rather than being a border */
    inset 0 10px 9px -6px rgba(0,0,0,.8);
}
/* The light is a touch right of centre, so the top-right corner fills in where
   the two surfaces meet. A corner, not a side: it dies out well before the
   shadow could read as a right-hand edge. */
.crt-vignette::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(76px 54px at 100% 0%, rgba(0,0,0,.6), rgba(0,0,0,0) 72%);
}
/* Specular glints in the four corners — the highlight a curved glass tube
   catches. At 10% white these were invisible against a near-black screen, so
   they carry real weight now, warm at the top where the light would fall. */
.crt-glass {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  border-radius: 12px;
  background:
    radial-gradient(87px 57px at -4% -6%, rgba(214,242,255,.15), transparent 68%),
    radial-gradient(200px 140px at 104% -6%, rgba(214,242,255,.10), transparent 68%),
    radial-gradient(200px 140px at -4% 106%, rgba(190,225,240,.15), transparent 68%),
    radial-gradient(250px 165px at 104% 106%, rgba(200,232,245,.11), transparent 68%);
}
/* A second, tighter specular — one flattened oval tucked into each corner,
   inset from the outer wash and with a harder falloff so it reads as a defined
   reflection rather than a haze. Each is elongated along the edge it sits
   against, which is what gives the glass its bubble. */
/* The tighter specular: one flattened oval per corner, each canted so it runs
   with the curve rather than square to the frame. Real elements, because a
   gradient inside a single layer cannot be rotated on its own. */
.crt-glass .cg {
  position: absolute; width: 190px; height: 52px; border-radius: 50%;
  filter: blur(14px);
}
.cg-tl { top: 2%;  left: -6%;  transform: rotate(-40deg);
  background: radial-gradient(closest-side, rgba(230,250,255,.06), transparent); }
.cg-tr { top: 2%;  right: -6%; transform: rotate(40deg);
  background: radial-gradient(closest-side, rgba(230,250,255,.045), transparent); }
.cg-bl { bottom: 2%; left: -6%;  transform: rotate(40deg);
  background: radial-gradient(closest-side, rgba(210,238,250,.03), transparent); }
.cg-br { bottom: 2%; right: -6%; transform: rotate(-40deg);
  background: radial-gradient(closest-side, rgba(220,244,254,.045), transparent); }

/* the rim of the tube, catching a line of light along the top and left */
.crt-glass::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  box-shadow:
    inset 14px 0 22px -14px rgba(150, 188, 208, .10),
    inset 0 22px 44px -28px rgba(255,255,255,.30);
}

/* paused: the cursor sits still and the status dot stops pulsing */
.crt.is-paused .crt-cursor { display: none; }
.crt.is-paused .crt-head-dot { animation: none; opacity: .45; }

.crt-play {
  flex: none; margin-left: 8px; width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid currentColor; border-radius: 4px;
  color: var(--crt-dim); font-size: 8px; line-height: 1; cursor: pointer;
  letter-spacing: 0;
}
.crt-play:hover { color: var(--crt-fg); }

@media (prefers-reduced-motion: reduce) {
  .crt-cursor, .crt-head-dot { animation: none; }
}

/* ============================ CARDS COLUMN ============================ */
/* flexes to whatever the viewport leaves after the sticky phone, so more of the
   strip is visible on a wide screen; 660px is the floor, two strip cards wide */
.cards-col {
  flex: 1 1 auto; min-width: 0; max-width: 1040px;
  display: flex; flex-direction: column; gap: 16px;
  /* cut to the chassis: the dashboard takes what it needs and the strip takes the
     rest, so the bottom edges agree however the dashboard wraps */
  height: var(--chassis-bottom);
}

.panel {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.panel h3 {
  margin: 0 0 12px;
  font-family: 'Lato', sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* the bench's section-header style #2, reversed for the dark stage */
.panel h3.green-head.hs-2 {
  display: flex; justify-content: flex-start; align-items: flex-start;
  gap: 8px; line-height: 1.25;
  margin: -7px 0 12px; padding: 0 0 9px;
  background: none; color: var(--ev-green);
  --head-green: var(--ev-green);
  border-bottom: 1px solid var(--card-line);
}
.green-head.hs-2 .head-num {
  /* solid, not outlined: the digit is knocked out of the fill in the card's own
     surface colour, so the badge reads as one shape rather than a ring with a
     number floating inside it */
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; flex: none; align-self: center;
  /* the digit reads a pixel low and left inside the rounded square */
  padding: 0 0 2px 2px;
  border: 0; background: var(--head-green);
  font-family: 'Lato', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--card); opacity: 1;
}
.head-num--one { text-indent: -0.75px; }   /* Lato's 1 sits right of centre */
.head-title { flex: 0 1 auto; min-width: 0; align-self: center; letter-spacing: .1em; }

/* ------------------------------ card states ------------------------------ */
/* Neural Cascade badge pattern: ACTIVE glows, RECEIVING is being written to,
   DONE is already written this pass. idle = nothing has run. */
/* The stage marker, on its own line under the title. Reversed out in the
   terminal's own face and its own green, because the screen on the left prints
   the identical string as a batch replays -- same marker, both halves of the
   page. LABEL: VALUE, always. */
/* Tucked to the top right of the head, where it stays put while a long title
   wraps under it. The same string the terminal prints as a batch replays. */
.phase-chip {
  margin-left: auto; flex: none; align-self: center;
  font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 500;
  line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--phase-ink); white-space: nowrap;
}
/* the label half, a step back from its value so the pair reads as one word */
.phase-chip i { font-style: normal; color: var(--phase-key); margin-right: .36em; }
.phase-chip + .ev-badge { margin-left: 8px; }

.ev-badge { margin-left: auto; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-weight: 700; padding: 3px 7px; border-radius: 3px; }
.ev-card[data-state="idle"] .ev-badge { display: none; }

.ev-card[data-state="active"] {
  border-color: #4f9e42;
  box-shadow: 0 0 0 1px rgba(116,194,100,.35), 0 0 26px rgba(116,194,100,.22), 0 2px 14px rgba(0,0,0,.35);
}
.ev-card[data-state="active"] .ev-badge { background: var(--ev-green-fill); color: var(--ev-green-ink); }

.ev-card[data-state="receiving"] { border-color: #2a8b9d; box-shadow: 0 0 0 1px rgba(42,139,157,.30), 0 2px 14px rgba(0,0,0,.35); }
.ev-card[data-state="receiving"] .ev-badge { background: #206d7c; color: #dff3f7; }

.ev-card[data-state="done"] { opacity: .62; }
.ev-card[data-state="done"] .ev-badge { background: #2b3038; color: var(--ink-soft); }

/* ---- 1-5: their own horizontal scroller ---- */
/* The five cards are a bounded channel, not a row loose on the page: a hairline
   at each end closes the band, and a surface a half-step under the card colour
   gives the cards something to sit on. A card scrolling out then reads as
   passing behind an edge rather than dissolving into the page. */
.card-strip-wrap {
  position: relative; min-width: 0;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 12px 13px 0;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: #101318;
}
.card-strip {
  flex: 1 1 auto; min-height: 0;
  display: flex; gap: 16px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 12px;              /* room for the card shadow + the scrollbar */
  scrollbar-color: var(--ev-green) #14171c;   /* firefox */

}
.card-strip:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 10px; }
.card-strip::-webkit-scrollbar { height: 9px; }
.card-strip::-webkit-scrollbar-track { background: #14171c; border-radius: 5px; border: 1px solid #1d2229; }
.card-strip::-webkit-scrollbar-thumb {
  background: var(--ev-green);
  border-radius: 5px;
  box-shadow: 0 0 6px rgba(127,201,143,.5), 0 0 12px rgba(127,201,143,.35);
}
.card-strip::-webkit-scrollbar-thumb:hover { background: #9ee0ad; }

/* every card in the strip is the same size, so the row reads as one band */
.strip-card, .strip-card * { scrollbar-color: #2b3038 transparent; }

.strip-card {
  flex: 0 0 282px; width: 282px;
  /* the band's height comes from the column now, not a fixed figure; below this
     floor the cards stop shrinking and the strip runs past the chassis instead */
  height: auto; min-height: 300px;
  overflow-y: hidden;       /* containment only; the scrolling regions are inside */
  display: flex; flex-direction: column;
}
/* the card's body takes the leftover height and scrolls inside itself, so a long
   table never stretches the band */
.strip-card > .ev-copy { flex: 0 0 auto; }
.strip-card > .ev-slot { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.strip-card > .setup-list { flex: 0 0 auto; }
/* no scroller of its own: the seed list inside it is the one that scrolls */
.strip-card > .seed-wrap { flex: 1 1 auto; min-height: 0; }
.strip-card > .ev-foot { flex: none; }
/* Cost's table is short and its two notes belong under it. Without this the slot
   takes the leftover height and strands the second note at the card's floor. */
.ev-card--tight > .ev-slot { flex: 0 0 auto; }

/* a soft edge on the right so it reads as "there is more that way" */
.card-strip-wrap.at-end::after, .card-strip-wrap.at-start::before { opacity: 0; }
.card-strip-wrap::after, .card-strip-wrap::before { transition: opacity .18s ease; }
.card-strip-wrap::after, .card-strip-wrap::before {
  content: ''; position: absolute; top: 1px; width: 34px; bottom: 22px;
  pointer-events: none;
}
.card-strip-wrap::after {
  right: 1px; border-radius: 0 11px 0 0;
  background: linear-gradient(to right, rgba(16,19,24,0), rgba(16,19,24,.96));
}
/* the same fade mirrored on the near edge, so a card leaving to the left goes
   the same way a card arriving from the right does */
.card-strip-wrap::before {
  left: 1px; z-index: 1; border-radius: 11px 0 0 0;
  background: linear-gradient(to left, rgba(16,19,24,0), rgba(16,19,24,.96));
}



.ev-copy { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.ev-copy + .ev-copy { margin-top: 10px; }
/* an offsite link inside body copy, the review console's treatment */
.ev-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #4a525e; }
.ev-link:hover { text-decoration-color: var(--ink); }
/* an aside about the page itself, in the caption treatment but ranged left,
   because it belongs to the copy it sits under */
.ev-copy--aside {
  flex: none; margin-top: 4px; padding-top: 9px;
  border-top: 1px solid var(--card-line);
  font-size: 10.5px; line-height: 1.5; font-style: italic;
  color: #5f6773; text-align: center;
}
.ev-sub {
  flex: none; margin: 18px 0 4px;
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.green-head + .ev-sub { margin-top: 0; }
/* one real message, so the titles below are not the only thing the reader has
   seen of the set. Deliberately a mild one. */
.seed-quote {
  flex: none; margin: 9px 0 0; padding: 8px 11px;
  border-left: 2px solid var(--ev-green);
  background: #1b1f26; border-radius: 0 6px 6px 0;
}
.seed-quote .sq-label {
  display: block; margin-bottom: 5px;
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: #6b7480;
}
.seed-quote p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.seed-quote .sq-label em { display: block; margin-top: 2px; font-style: normal; color: var(--ink-soft); }
.ev-foot { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--card-line); font-size: 10.5px; font-style: italic; line-height: 1.45; color: #79818c; }

/* honest empty state — never a fake number */
.ev-empty-block {
  margin-top: 12px; border: 1px dashed #333a44; border-radius: 8px;
  padding: 18px; text-align: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6d757f;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 6px, transparent 6px 12px);
}
.ev-empty-block--tall { padding: 40px 18px; }
.ev-empty { margin: 0; font-size: 12px; color: var(--ink-soft); }

/* the last card is future state: the dashed border says so, and its phase
   marker reads Planning */
.ev-card--future { border-style: dashed; }
.ev-card--future .ev-sub { margin-top: 14px; }
.ev-card--future .green-head + .ev-sub { margin-top: 0; }
/* the closing copy scrolls; the way out stays pinned under it */
.nx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
.nx-body .green-head + .ev-sub, .nx-body > .ev-sub:first-child { margin-top: 0; }
/* the way out, under the copy rather than pinned to the floor: the header's
   own link treatment, with the invitation as a caption above it */
.nx-cta { margin-top: 18px; text-align: left; }
.nx-cta + .nx-cta { margin-top: 12px; }
.nx-cta-note {
  margin: 0 0 3px;
  font-size: 10.5px; line-height: 1.5; font-style: italic; color: #5f6773;
}

/* ------------------------- card 2: the 45 real seeds ------------------------- */
.seed-wrap { margin-top: 12px; display: flex; flex-direction: column; min-height: 0; }
/* pinned under the scroller, outside it, so it stays put while the 45 move */
.seed-legend {
  flex: none; display: flex; align-items: center; gap: 6px;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--card-line);
  font-size: 10px; color: #79818c;
}
.seed-legend strong { color: var(--ink-soft); font-weight: 700; }
.seed-warn { color: var(--red); flex: none; line-height: 0; display: inline-flex; vertical-align: -1px; }
.warn-ico { width: 11px; height: 11px; display: block; }
/* the caption under the list, on the dashboard's provenance line: same size,
   same italic, same grey, centred under what it describes */
.seed-note {
  flex: none; margin: 0; padding-top: 9px;
  border-top: 1px solid var(--card-line);
  font-size: 10.5px; line-height: 1.5; font-style: italic;
  color: #5f6773; text-align: center;
}
.seed-note .seed-warn { vertical-align: -1px; margin-right: 2px; }
.seed-list { flex: 1 1 auto; min-height: 150px; overflow-y: auto; padding: 6px 6px 0 0; border-top: 1px solid var(--card-line); }
.seed-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 11.5px; color: var(--ink-soft); }
.seed-row .seed-label { flex: 1 1 auto; min-width: 0; }
.seed-row .seed-who {
  flex: none; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #5f6773; font-family: 'Roboto', sans-serif;
}
.seed-row .seed-n { flex: none; width: 20px; text-align: right; font-size: 10px; color: #5f6773; font-variant-numeric: tabular-nums; transform: translateY(.5px); }
.seed-row.acute { color: #e0a5a3; }
.seed-list::-webkit-scrollbar { width: 8px; }
.seed-list::-webkit-scrollbar-thumb { background: #2b3038; border-radius: 4px; }

/* ------------------------- card 3: run setup ------------------------- */
.setup-list { margin: 12px 0 0; font-size: 12px; }
.setup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--card-line); }
.setup-row:first-child { border-top: 1px solid var(--card-line); }
.setup-row:last-child { border-bottom: 0; }
.setup-row dt {
  flex: none;
  font-family: 'Roboto', sans-serif; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: #5f6773;
  transform: translateY(.5px);
}
.setup-row dd { margin: 0; color: var(--ink-soft); text-align: right; }
.setup-row--rich dd { line-height: 1.25; }
.setup-row--rich dt { align-self: flex-start; line-height: 15px; }
.setup-row dd.pending { color: #5f6773; font-style: italic; }

/* ===================== TERMINAL HEAD: the transport =====================
   The replay panel is gone; the control and the phase line live on the tube. */
.crt-play {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 74px; padding: 4px 10px;
  background: none; border: 1px solid var(--crt-dim); border-radius: 4px;
  color: var(--crt-fg); cursor: pointer;
  font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crt-play:hover { border-color: var(--crt-fg); box-shadow: 0 0 8px var(--crt-glow); }
.pl-ico { font-size: 10px; line-height: 1; letter-spacing: 0; display: inline-block; transform: translateY(.5px); }
.pl-ico--pause { display: inline-flex; gap: 2px; align-items: center; height: 8px; transform: none; }
.pl-ico--pause::before, .pl-ico--pause::after {
  content: ''; width: 3px; height: 8px; background: currentColor; border-radius: .5px;
}

/* pinned under the head: which phase the log is on, and how far through */
.crt-subhead {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 34px 7px 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--crt-fg); text-shadow: 0 0 6px var(--crt-glow);
}
.crt-phase { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-phase-n { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.crt-phase-n .pd {
  width: 5px; height: 5px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--crt-dim);
  transition: background .2s ease, box-shadow .2s ease;
}
.crt-phase-n .pd.on {
  background: var(--crt-fg);
  box-shadow: inset 0 0 0 1px var(--crt-fg), 0 0 6px var(--crt-glow);
}

/* ============================== dev bar (?dev=1) ============================== */
.devbar {
  position: fixed; right: 14px; bottom: 14px; z-index: 500;
  background: #14171c; border: 1px solid var(--card-line); border-radius: 8px;
  padding: 11px 13px; box-shadow: 0 10px 30px rgba(0,0,0,.5); width: 250px;
}
.devbar-title { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #79818c; }
.devbar-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.devbar-row { display: flex; align-items: center; gap: 4px; }
.devbar-row .dr-name { font-size: 10px; color: #6d757f; width: 20px; flex: none; }
.devbar-row button { flex: 1; background: transparent; color: #6d757f; border: 1px solid var(--card-line); border-radius: 3px; font-size: 9px; padding: 3px 0; cursor: pointer; }
.devbar-row button.on { background: var(--ev-green-fill); border-color: var(--ev-green-fill); color: var(--ev-green-ink); }
.devbar-reset { margin-top: 9px; width: 100%; background: #22262d; color: #99a2ad; border: 1px solid var(--card-line); border-radius: 5px; padding: 5px; font-size: 10px; cursor: pointer; }

/* ============================== narrow screens ============================== */
/* The links are pinned to the strip's right edge, which works while the title,
   the description and the links all fit on one line. Below that they overlap the
   description, so the strip becomes a stack and the links join the flow. */
@media (max-width: 1240px) {
  .topstrip-inner { flex-wrap: wrap; justify-content: center; row-gap: 10px; padding-right: 0; }
  .ts-links { position: static; transform: none; width: 100%; justify-content: center; }
  .ts-desc { text-align: center; }
}
@media (max-width: 860px) {
  .ts-desc { border-left: 0; padding-left: 0; }
  .ts-desc br { display: none; }
}

@media (max-width: 1240px) { :root { --chassis-w: 420px; } }
@media (max-width: 1080px) { :root { --chassis-w: 366px; } }
@media (max-width: 940px)  { :root { --chassis-w: 320px; } }

@media (max-width: 820px) {
  .stage { flex-direction: column; align-items: center; }
  .cards-col { width: min(660px, 100%); }
  /* stacked: the chassis sits above the cards, so there is no bottom edge to
     agree with -- the strip goes back to its own height */
  .cards-col { height: auto; }
  .strip-card { height: 500px; }
  /* The chassis comes back into flow. Absolutely positioned it gave the column
     no height of its own, and align-self: stretch only stretches across a
     column, so the terminal collapsed to nothing and overflow: hidden ate it. */
  .phone-col {
    width: min(472px, 100%); height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .phone {
    position: relative; left: auto; top: auto; margin: 0 auto;
    width: min(472px, 100%);
  }
}

@media (max-width: 700px) {
  .card-grid { grid-template-columns: 1fr; }
  .ts-back { margin-left: 0; }
  .topstrip-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .phone { width: 100%; max-width: 393px; }
}

/* Cost runs full width with 6 and 7: the detail cards (1–4) pair up, the summary
   cards run wide. Card 5 will hold a per-model table, so it needs the room. */

/* ===================== RESULTS TABLES (only present once a batch exists) ===================== */
.ev-slot { margin-top: 12px; }

.rt { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 4px; }
.rt th {
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: #79818c;
  text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--card-line); white-space: nowrap;
}
.rt th.rt-sub { font-size: 8px; letter-spacing: .1em; color: #5f6773; padding-top: 0; }
.rt td { padding: 4px 6px; border-bottom: 1px solid #1d2127; color: var(--ink-soft); vertical-align: middle; }
.rt tbody tr:hover td { background: #1b1f25; }
.rt-seed { color: var(--ink); white-space: nowrap; }
.rt-persona { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #5f6773; }
.rt-acute .rt-seed { color: #e0a5a3; }
.rt-flag { color: var(--red); margin-right: 5px; }

/* numeric tables right-align everything but the label column */
.rt-num td:not(.rt-seed), .rt-num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.rt-hero { color: var(--ink); font-weight: 500; }

/* per-check chips: V voice, L length, H handoff, S in scope */
.rt-chips { white-space: nowrap; }
.chp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 3px; margin-right: 2px;
  font-size: 8.5px; font-weight: 700; font-family: 'Roboto', sans-serif;
  border: 1px solid transparent; cursor: help;
}
/* no strokes: the fill already separates them from the row */
.chp.ok    { background: #1c3a28; color: var(--ev-green); border-color: transparent; }
.chp.fail  { background: #3d2f12; color: #e2b466; border-color: transparent; }
.chp.na    { background: none; color: #454c57; border-color: #343b45; }
/* a missed handoff on an acute seed is the one failure that gets shouted about */



/* comparison: the winning cell in each column is marked, losses on safety shouted */
.rt-compare td.win { color: var(--ev-green); font-weight: 500; }
.rt-compare td.alarm { color: #e06663; font-weight: 700; }

/* ---- transposed measure table: labels down the left, a model per column ---- */
.rt-t th[scope="row"] {
  font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: #5f6773;
  border-bottom: 1px solid #1d2127; white-space: normal;
  transform: translateY(.5px);
}
.rt-t thead th { text-align: right; }
.rt-t thead th:first-child { width: 42%; }
.rt-t td { text-align: right; font-variant-numeric: tabular-nums; }
.rt-t .rt-sub2 { display: block; margin-top: 1px; font-size: 9px; color: #5f6773; }
/* the better of the two, in the page green, with a tick that takes no column */
.rt-t td.win { color: var(--ev-green); }
/* the lower figure, in weight rather than colour: still a count, not a verdict */
.rt-t td.lo { font-weight: 700; }
/* arithmetic off the two rows above it, not a verdict */
.rt-arith { margin: 7px 0 0; font-size: 10px; line-height: 1.5; color: #79818c; }
.rt-arith b { color: var(--ev-green); font-weight: 500; }
.rt-tick { margin-right: 3px; font-size: 9px; opacity: .85; }

/* ---- quality: a block per seed, a line per model ---- */
.qs-row { padding: 10px 0 5px; border-bottom: 1px solid #1d2127; }
.qs-row:hover { background: #1b1f25; }
.qs-seed { margin: 0 0 1px; font-size: 11.5px; color: var(--ink); }
.qs-acute .qs-seed { color: #e0a5a3; }
.qs-seed .rt-persona { display: inline; margin-left: 6px; }
.qs-line { display: flex; align-items: center; gap: 8px; margin: 1px 0 0; }
.qs-model {
  flex: none; width: 60px;
  /* uppercase has no descenders, so centring it by box leaves it reading high */
  transform: translateY(1px);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #5f6773;
}
.qs-chips { flex: 1 1 auto; white-space: nowrap; }
.qs-dash { color: #5f6773; }

/* the judge's score, as stars */
.qs-stars {
  flex: none; width: 36px; line-height: 1;
  display: inline-flex; justify-content: flex-start; gap: 1px;
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  border-radius: 3px;
}
.qs-stars:hover .st, .qs-stars[aria-expanded="true"] .st { opacity: .45; }
.qs-stars:hover .st.on, .qs-stars[aria-expanded="true"] .st.on { opacity: 1; filter: brightness(1.25); }
.qs-stars:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.qs-stars .st { color: var(--ink-soft); opacity: .22; font-size: 11px; }
.qs-stars .st.on { color: var(--ev-green); opacity: 1; }
.qs-stars.is-none { color: #5f6773; font-size: 11px; display: block; }

/* caption, pinned column header and pinned legend: the header and the legend
   stay put while the scenarios scroll between them */
.qs-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--card-line);
  font-family: 'Roboto', sans-serif; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: #5f6773;
}
.qs-h-model  { flex: none; width: 60px; }
.qs-h-checks { flex: 1 1 auto; }
.qs-h-score  { flex: none; width: 36px; text-align: left; transform: translateX(-14px); }
.qs-head + .ev-slot { margin-top: 0; }
.qs-legend {
  flex: none; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--card-line);
  font-size: 9.5px; line-height: 1.6; color: #5f6773;
}
.qs-legend p { margin: 0; }
.qs-legend b { color: var(--ink-soft); font-weight: 700; }
.qs-legend .chp {
  width: 12px; height: 12px; min-width: 12px; margin: 0;
  font-size: 11px; line-height: 0; cursor: default;
}
.qs-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.qs-key > span { display: inline-flex; align-items: center; gap: 4px; }
.qs-legend .st { color: var(--ev-green); font-size: 10px; }

/* ---- judge-reason popover: the bench's term-definition treatment ---- */
.term-popover {
  position: fixed; z-index: 30002; width: 320px; max-width: calc(100vw - 24px);
  background: rgba(255,255,255,.97);
  border: 2px solid var(--teal); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  padding: 14px 28px 14px 16px;
  font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 400; font-style: normal;
  line-height: 1.55; color: #24272b; text-align: left;
}
.tp-stars { margin-left: 7px; letter-spacing: 1px; }
.tp-stars .st { font-size: 11px; color: #3b9b63; }
.tp-stars .st:not(.on) { color: #9aa4ac; opacity: .5; }
.term-popover strong {
  display: block; font-family: 'Lato', sans-serif; font-weight: 700;
  font-size: 11.5px; color: #24272b; margin-bottom: 6px; letter-spacing: 0;
}
/* what the run failed, under a rule below the judge's reason */
.tp-fails { margin-top: 10px; padding-top: 9px; border-top: 1px solid #d9dee3; }
.tp-fails p { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 5px; font-size: 11px; line-height: 1.5; color: #4a515d; }
.tp-fails p:last-child { margin-bottom: 0; }
.tp-fails .chp { flex: none; margin: 1px 0 0; cursor: default; background: #f3e6c8; color: #8a6a1c; }
.tp-fails b { color: #24272b; font-weight: 700; }
.term-pop-close {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: #6b7077; padding: 2px 4px;
}
.term-pop-close:hover { color: #24272b; }
.rt-sub2 { font-size: 9px; color: #5f6773; }

/* the one sentence the page exists to produce */
.rt-verdict {
  position: relative; margin: 14px 0 0; border-radius: 8px; overflow: hidden;
  background: #151d18;
  border: 1px solid var(--ev-win-fill);
}
.rt-verdict > p {
  margin: 0; padding: 10px 12px 10px 31px;
  font-size: 11.5px; line-height: 1.55; color: var(--ink);
}
.rt-verdict strong { color: var(--ev-green); }
.rt-verdict-check {
  position: absolute; left: 12px; top: 10px;
  font-size: 12px; line-height: 1.55; color: var(--ev-green); font-weight: 700;
}
/* the tile's own bottom strip, full-bleed across the box */
.rt-verdict-strip {
  padding: 5px 10px;
  background: var(--ev-win-fill); color: var(--ev-win-ink);
  font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-align: center;
}
/* the caveats, as one block of bullets in the card's own body size */
.rt-caveats { margin: 0; padding-left: 15px; list-style: disc; }
.rt-caveats li { margin: 0 0 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.rt-caveats li b { color: var(--ink); font-weight: 700; }
.strip-card > .rt-caveats { flex: none; margin-top: 2px; }
.rt-caveats li:last-child { margin-bottom: 0; }
.rt-caveats::marker, .rt-caveats li::marker { color: #4a525e; }

/* ===================== TOP ROW: run dashboard + timeline ===================== */
/* The timeline no longer runs the full width — it takes the right half, and the
   left half answers the question at a glance: when, which models, who won. */
.toprow { display: grid; grid-template-columns: minmax(0, 475px); justify-content: start; gap: 16px; min-width: 0; }
.toprow > .panel { min-width: 0; }

/* ---- the dashboard. Bench typeface throughout — the CRT costume stays in the
   phone, so this reads as instrument panel, not screen. ---- */
.run-dash { display: flex; flex-direction: column; gap: 10px; border-color: var(--ev-win-fill); }

.rd-head { display: flex; align-items: center; gap: 10px; }
.rd-nav {
  flex: none; width: 22px; height: 22px; border-radius: 5px;
  background: #1d2127; color: var(--ink-soft); border: 1px solid #333a45;
  font-size: 9px; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.rd-nav:hover:not(:disabled) { color: var(--ink); border-color: #3a414d; }
.rd-nav:disabled { opacity: .45; cursor: not-allowed; }
.rd-id { flex: 1; min-width: 0; text-align: center; }
.rd-label { color: var(--ev-green); letter-spacing: .1em; margin-right: 6px; }
.rd-date { display: block; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.rd-meta { display: block; font-size: 9.5px; letter-spacing: .06em; color: #5f6773; margin-top: 2px; }

/* one tile per model — wraps to as many as a batch carries */
.rd-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.rd-empty { margin: 0; font-size: 11px; color: #5f6773; }

.rd-model {
  position: relative;
  border: 1px solid var(--card-line); border-radius: 8px;
  padding: 9px 10px 10px; background: #14171c;
  display: flex; flex-direction: column;
}
.rd-model.is-win { border-color: var(--ev-win-fill); background: #151d18; }

/* the model name is deliberately quiet — tiny, uppercase, low contrast */
.rd-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
/* the model name stays deliberately quiet — the numbers carry the tile */
.rd-name {
  font-family: 'Roboto', sans-serif; font-size: 8.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #6d757f;
}
.rd-model.is-win .rd-name { color: var(--ev-green); }
/* centred on the tile's top edge, straddling the border by a few pixels. It used
   to sit right-aligned at the corner, which read as an afterthought next to the
   full-bleed strip centred along the bottom. */
.rd-win {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ev-win-fill); color: var(--ev-win-ink);
  font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 6px 2px 5px; border-radius: 3px;
}
.rd-check { flex: none; }

/* four quadrants: two across, two down, each number over its label and centred.
   The labels wrap rather than nowrap — at a quarter of the tile they have to. */
.rd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; margin-bottom: 10px; }
.rd-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; min-width: 0; }
.rd-v { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.rd-k { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: #5f6773; line-height: 1.25; }
.rd-model.is-win .rd-v { color: var(--ev-green); }


/* the winner carries its reason across its own bottom edge, full-bleed */
.rd-strip {
  margin: auto -10px -10px; padding: 5px 10px;
  background: var(--ev-win-fill); color: var(--ev-win-ink);
  font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; border-radius: 0 0 7px 7px;
}

.rd-verdict {
  margin: 0; padding-top: 9px; border-top: 1px solid var(--card-line);
  font-size: 10.5px; line-height: 1.5; color: var(--ink-soft);
  text-align: center;
}
.rd-verdict-kind {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 3px;
  font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.rd-cost, .rd-clear { background: var(--ev-green-fill); color: var(--ev-green-ink); }
.rd-tie, .rd-single { background: #2b3038; color: #99a2ad; }
.rd-tradeoff { background: #6b5200; color: #fdf1c2; }
/* provenance: who made the call, testing or a person */
.rd-prov { display: block; font-style: italic; color: #5f6773; }
.rd-link { color: #99a2ad; text-decoration: underline; text-underline-offset: 2px; }
.rd-link:hover { color: var(--ink); }

@media (max-width: 900px) { .toprow { grid-template-columns: 1fr; } }


/* -------------------------------- toast --------------------------------
   Same shape as the review console's, in this page's dark palette. Used when
   a control has nothing to do -- paging past the only recorded batch -- so the
   press is answered rather than ignored. */
.ev-toast {
  position: fixed; left: 50%; top: 88px; transform: translateX(-50%) translateY(-6px);
  display: flex; align-items: center; gap: 12px;
  background: #1d232b; border: 1px solid #333a45; border-radius: 8px;
  padding: 13px 22px; font-size: 13px; line-height: 1.45; color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); z-index: 500;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.ev-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ev-toast span { color: var(--ink-soft); }
.ev-toast strong { color: var(--ink); font-family: 'Lato', sans-serif; font-weight: 700; }


/* ===================== ALTERNATE: bauble glass (?glass=bauble) =====================
   A different construction from the four-corner wash above, borrowed from the
   glassmorphism orb technique (codefronts / Z1Code liquid-glass). Where the
   current version adds light in four places, this one models a single light
   source and — the part that actually sells curvature — pairs it with a DARK
   inset from the opposite side. Light alone reads as haze; light opposed by
   shade reads as a bulge.

   Four layers, and it degrades to a frosted rectangle if any is dropped:
     1. one offset specular, up and left toward the light
     2. a hairline rim stroke around the whole perimeter
     3. a soft bounce inset from the far corner
     4. a shading inset from the near corner
   Values are pulled well down from the original, which assumed a light page. */
.crt.glass-bauble .crt-glass { background: none; }
.crt.glass-bauble .cg { display: none; }          /* the canted ovals step aside */

.crt.glass-bauble .crt-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px; background: none;
  /* the specular, offset toward the light rather than centred */
  background: radial-gradient(circle at 30% 22%,
    rgba(232,250,255,.20) 0 6%,
    rgba(232,250,255,.07) 24%,
    rgba(232,250,255,.02) 46%,
    transparent 62%);
}
.crt.glass-bauble .crt-glass::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(214,242,255,.13),          /* rim stroke */
    inset -18px -22px 44px rgba(214,242,255,.08),   /* bounce, far side */
    inset 14px 18px 38px rgba(2,14,26,.55);         /* shade, near side */
}


/* ===================== ALTERNATE: liquid glass (?glass=liquid) =====================
   The Apple "liquid glass" construction (dev.to/kevinbism). Its distinctive move
   is nothing like a gradient: a pair of inset shadows with ZERO blur and a large
   negative spread, which carves a hard crescent of light hugging one edge and
   following the border radius. A filter: blur() then softens that crescent, so
   the light has a defined shape underneath rather than being a wash.

   Adapted for a near-black tube: the original assumes a photo behind it and uses
   pure white at full alpha, which would blow out here. No backdrop-filter over
   the text either — frosting it would cost legibility, and the crescents are the
   part that carries the effect. */
.crt.glass-liquid .crt-glass { background: none; }
.crt.glass-liquid .cg { display: none; }

.crt.glass-liquid .crt-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  background: rgba(214, 242, 255, .022);
  /* the crescents: hard-edged, then blurred */
  box-shadow:
    inset -10px -8px 0 -11px rgba(226, 248, 255, .85),
    inset  0px -9px 0 -8px  rgba(226, 248, 255, .70),
    inset  9px  8px 0 -10px rgba(226, 248, 255, .45);
  filter: blur(1.5px) brightness(112%);
  opacity: .62;
}
/* the rim, plus the depth the crescents sit against */
.crt.glass-liquid .crt-glass::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  border: 1px solid rgba(226, 248, 255, .10);
  box-shadow: inset 0 4px 22px rgba(226, 248, 255, .07);
}


/* Phosphor bleeding onto the casing to the right of the screen. Tracks the
   scrollbar thumb, so the hardware lights where the terminal is looking.
   Screen-blended, because it is light being added to the metal, not paint. */
.crt-bleed {
  position: absolute;
  left: 0; top: 0;                  /* both set in px from the screen’s rect */
  width: 15px; height: 12px;
  transform: translate(-14px, -50%);
  background: radial-gradient(closest-side, var(--bleed-color, #48e8ff), transparent 74%);
  opacity: .34;
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: top .12s linear;
}
/* the outer one runs against the hardware rather than the glass */
.crt-bleed--out {
  transform: translate(11px, -50%);
  width: 13px;
  opacity: .26;
  filter: blur(11px);
}


/* ===================== the HealthBot mark, in characters ===================== */
.crt-logo-wrap { position: relative; display: inline-block; margin: 2px 0 2px 33px; }
.crt-logo {
  margin: 0;
  /* the sliver of gap is what keeps each # reading as a typed cell */
  line-height: 1.05; letter-spacing: 0; white-space: pre; text-align: left;
  font-size: .82em;
  color: var(--crt-dim); text-shadow: none;
}
.crt-logo .smile { color: var(--crt-green); text-shadow: none; }
.eye-star {
  position: absolute; top: 42%; line-height: 0; transform: translateY(.28em);
  font-size: 2.6em; color: var(--crt-dim); text-shadow: none;
}