/* ============================================================================
   PROJECTS — LAUNCH REDESIGN
   Sana · 2026-07-30 · a total redesign of /projects for day-one users

   Built on the Cockpit v2 design system (tokens copied verbatim from
   mocks/cockpit-v2/cockpit-v2.css) and on the War Room shell language Adam has
   now shipped — Working Set, lanes, context lanes, follow. Projects should feel
   like the same product as the War Room, not a neighbouring one.

   THE DIAGNOSIS THIS DESIGN ANSWERS
   The current project page has ELEVEN flat tabs — Overview, Team, Tasks,
   Gallery, Docs, Storage, Sessions, Connections, Environments, Credentials,
   Settings — and five of them are marked `external`, meaning they navigate away
   rather than render. So the tab bar is shaped like our STORAGE LAYOUT, not like
   anyone's job, and it is lying about being a container.

   The redesign collapses those eleven into FIVE surfaces named after what you
   are trying to do, and leads every screen with what needs a human.
   ============================================================================ */

/* ── LAYER 0 · Cockpit v2 tokens, verbatim ───────────────────────────────── */
:root{
  --ground:#0c0e13; --surface:#12151d; --surface2:#171b25; --raised:#1c212d;
  --rail:#0a0c11; --border:#232a38; --border2:#2c3546;
  --tx:#e7eaf1; --tx2:#98a2b3; --tx3:#5f6a7d;
  --accent:#7c8cff;
  --run:#39d0d8; --queued:#7c879a; --blocked:#e3a008; --stop:#f0603a;
  --done:#3fb950; --needs:#ff9e64;
  --c-violet:#c07cf8; --c-sky:#38bdf8; --c-teal:#2dd4bf; --c-pink:#f472b6;
  --c-amber:#e0b341; --c-slate:#8fa0b6; --c-green:#41c257;
  --sans:-apple-system,"SF Pro Text",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,monospace;
  --fs-display:23px; --fs-h1:16px; --fs-h3:14px; --fs-body:13.5px;
  --fs-sm:12.5px; --fs-xs:11.5px; --fs-2xs:10.5px; --fs-micro:9.5px;
  --fw-reg:450; --fw-med:600; --fw-semi:650; --fw-bold:750;
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px;
  --sp-6:14px; --sp-7:16px; --sp-8:20px; --sp-9:22px;
  --r-xs:5px; --r-sm:7px; --r-md:9px; --r-lg:11px; --r-xl:13px; --r-pill:20px;
  --ease:cubic-bezier(.4,0,.2,1);

/* ── LAYER 1 · NEW — launch-readiness semantics ──────────────────────────────
   Cockpit v2 says what a TASK is doing. Nothing in it says whether a PRODUCT is
   fit to put in front of a first user. That is the question this whole surface
   exists to answer, so it gets its own scale — and it is deliberately NOT the
   accent, so "ready" can never be confused with "selected". */
  --ready:#3fb950;      /* gate passed */
  --at-risk:#e3a008;    /* gate has a known problem, not yet failing */
  --failing:#f0603a;    /* gate failed — cannot go in front of a user */
  --unknown:#5f6a7d;    /* NEVER MEASURED. Distinct from failing on purpose:
                           "we don't know" and "we know it's bad" are different
                           states and collapsing them is how launches go wrong. */
  --lane:#c07cf8;       /* the War Room lane / working-set accent, matched to
                           Adam's shipped surface so the two read as one product */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}
body{background:var(--ground);color:var(--tx);
  font:var(--fw-reg) var(--fs-body)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── ACCESSIBILITY BASELINE ──────────────────────────────────────────────────
   Khoa asked for "super accessible", so this is not decoration:
   · every interactive element has a visible, high-contrast focus ring
   · focus-visible only, so mouse users do not get rings they did not ask for
   · a real skip link, because the rail comes before the content in DOM order
   · colour is never the only carrier of state — every status chip pairs a hue
     with a word, and every gate pairs a hue with a shape                       */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:var(--sp-5);top:-60px;z-index:100;background:var(--accent);
  color:#0c0e13;font-weight:var(--fw-semi);font-size:var(--fs-sm);
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-md);transition:top .12s var(--ease)}
.skip:focus{top:var(--sp-5)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── shell ───────────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:56px minmax(0,1fr);min-height:100vh}
.rail{background:var(--rail);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-5) 0;position:sticky;top:0;height:100vh}
.rail .logo{width:30px;height:30px;border-radius:var(--r-md);background:var(--accent);
  display:grid;place-items:center;font-weight:var(--fw-bold);font-size:13px;color:#0c0e13}
.rail a{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--tx3);font-size:15px}
.rail a:hover{background:var(--surface2);color:var(--tx2)}
.rail a[aria-current="page"]{background:var(--surface2);color:var(--tx)}
.rail .sp{flex:1}

/* ── THE PRODUCT STRIP — Khoa's daily-check requirement ──────────────────────
   Every product is pinned to the rail, one click from anywhere. But a shortcut
   alone would still make him open each page to see if it needs him — so each
   pin CARRIES ITS STATE. Amber dot = something needs you. Teal = agents live,
   nothing needed. No dot + dimmed = quiet. The answer to "do I need to check
   today?" is on the rail itself, before any click. State is also in the
   aria-label, never colour alone. */
.rail .rdiv{width:26px;height:1px;background:var(--border);margin:var(--sp-3) 0;flex:none}
.rail .rk{font-size:8px;letter-spacing:.14em;color:var(--tx3);font-weight:var(--fw-semi);
  text-transform:uppercase;writing-mode:horizontal-tb}
.pstrip{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.pchip{position:relative;width:32px;height:32px;border-radius:var(--r-md);
  display:grid;place-items:center;font-size:11px;font-weight:var(--fw-bold);
  background:var(--surface);color:var(--tx2);border:1px solid var(--border)}
.pchip:hover{border-color:var(--border2);color:var(--tx)}
.pchip[data-state="quiet"]{opacity:.45}
.pchip[data-state="quiet"]:hover{opacity:1}
.pchip .sdot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--rail)}
.pchip[data-state="wait"] .sdot{background:var(--blocked)}
.pchip[data-state="live"] .sdot{background:var(--run)}
.pchip[aria-current="page"]{border-color:var(--accent);color:var(--tx)}
.main{min-width:0;display:flex;flex-direction:column}

.top{display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-8);height:52px;
  border-bottom:1px solid var(--border);background:var(--surface);
  position:sticky;top:0;z-index:20;flex-wrap:wrap}
.top h1{font-size:var(--fs-h1);font-weight:var(--fw-semi);letter-spacing:-.01em}
.top .sp{flex:1}
.kbd{font-family:var(--mono);font-size:var(--fs-2xs);border:1px solid var(--border2);
  border-radius:var(--r-xs);padding:2px var(--sp-2);color:var(--tx3);background:var(--ground)}
.cmdk{display:flex;align-items:center;gap:var(--sp-3);border:1px solid var(--border);
  background:var(--ground);border-radius:var(--r-md);padding:5px var(--sp-5);
  color:var(--tx3);font-size:var(--fs-sm);min-width:210px}
.cmdk:hover{border-color:var(--border2);color:var(--tx2)}

.wrap{padding:var(--sp-8);max-width:1500px;width:100%;margin:0 auto}
.lede{font-size:var(--fs-body);color:var(--tx2);max-width:78ch;line-height:1.65}

/* ── section heads ───────────────────────────────────────────────────────── */
.shead{display:flex;align-items:baseline;gap:var(--sp-4);margin:var(--sp-9) 0 var(--sp-5);
  flex-wrap:wrap}
.shead:first-child{margin-top:0}
.shead h2{font-size:var(--fs-h1);font-weight:var(--fw-semi);letter-spacing:-.01em}
.shead .sub{font-size:var(--fs-sm);color:var(--tx3)}
.shead .sp{flex:1}
.k{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--tx3);font-weight:var(--fw-semi);
  text-transform:uppercase}

/* ── NEEDS YOU — the first thing on every screen ─────────────────────────────
   Borrowed from the pattern every incident tool converges on (Sentry, Datadog,
   PagerDuty): the top of the page is not a summary, it is a queue of things
   that will not move without a human. A dashboard that opens with charts makes
   you HUNT for your obligations. */
.attn{border:1px solid var(--blocked);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,#e3a0080e,transparent 60%);margin-bottom:var(--sp-8)}
.attn.clear{border-color:var(--border);background:var(--surface)}
.attn-h{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.attn.clear .attn-h{border-bottom:0}
.attn-h h2{font-size:var(--fs-h3);font-weight:var(--fw-semi)}
.attn-h .sp{flex:1}
.attn-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--sp-5);
  align-items:center;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border);
  width:100%;text-align:left}
.attn-row:last-child{border-bottom:0}
.attn-row:hover{background:var(--surface)}
.attn-row .who{display:flex;align-items:center;gap:var(--sp-3)}
.attn-row .av{width:26px;height:26px;border-radius:50%;background:var(--raised);
  color:var(--tx2);font-size:var(--fs-2xs);font-weight:var(--fw-semi);
  display:grid;place-items:center;flex:none}
.attn-row .d{min-width:0}
.attn-row .d b{display:block;font-size:var(--fs-body);font-weight:var(--fw-med)}
.attn-row .d span{display:block;font-size:var(--fs-xs);color:var(--tx3);margin-top:2px}
.attn-row .age{font-family:var(--mono);font-size:var(--fs-xs);color:var(--blocked);white-space:nowrap}
.attn-row .go{font-size:var(--fs-xs);color:var(--accent);font-weight:var(--fw-med);white-space:nowrap}
.allclear{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-6);
  font-size:var(--fs-sm);color:var(--tx2)}
.allclear .tick{width:20px;height:20px;border-radius:50%;background:#3fb95022;color:var(--done);
  display:grid;place-items:center;font-size:11px;flex:none}

/* ── the launch board ────────────────────────────────────────────────────── */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-6)}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  display:flex;flex-direction:column;overflow:hidden;text-align:left;width:100%}
.pcard:hover{border-color:var(--border2)}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* a hairline of launch state along the top — form as well as colour, so it is
   readable without relying on hue discrimination */
.pcard .bar{height:3px;background:var(--unknown)}
.pcard[data-state="ready"]   .bar{background:var(--ready)}
.pcard[data-state="at-risk"] .bar{background:var(--at-risk)}
.pcard[data-state="failing"] .bar{background:var(--failing)}
.pcard-h{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-6) var(--sp-6) var(--sp-4)}
.pcard-h .ico{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;
  font-size:15px;font-weight:var(--fw-bold);flex:none;background:var(--raised);color:var(--tx2)}
.pcard-h .t{flex:1;min-width:0}
.pcard-h h3{font-size:var(--fs-h3);font-weight:var(--fw-semi);letter-spacing:-.01em}
.pcard-h p{font-size:var(--fs-xs);color:var(--tx3);margin-top:3px;line-height:1.5}
.pcard .gates{display:flex;gap:var(--sp-2);padding:0 var(--sp-6) var(--sp-5);flex-wrap:wrap}
.pcard .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border-top:1px solid var(--border);margin-top:auto}
.pcard .stats div{background:var(--surface);padding:var(--sp-5) var(--sp-6)}
.pcard .stats .n{display:block;font-size:var(--fs-h3);font-weight:var(--fw-semi);font-family:var(--mono)}
.pcard .stats .n.warn{color:var(--blocked)}
.pcard .stats .n.zero{color:var(--tx3)}
.pcard .stats .l{display:block;font-size:var(--fs-micro);letter-spacing:.09em;color:var(--tx3);
  text-transform:uppercase;font-weight:var(--fw-semi);margin-top:3px}
.pcard .foot{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--tx3);flex-wrap:wrap}
.pcard .foot .sp{flex:1}

/* ── GATE PIPS — launch readiness as five shapes, not a percentage ───────────
   A single "78% ready" number hides WHICH thing is broken, and every launch
   post-mortem is about the specific broken thing. Five labelled pips, each with
   its own hue AND its own glyph, so the state survives greyscale and colour
   blindness both. */
.pip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);
  font-weight:var(--fw-med);padding:3px var(--sp-3);border-radius:var(--r-pill);
  border:1px solid var(--border2);color:var(--tx3);white-space:nowrap}
.pip::before{font-size:9px;line-height:1}
.pip[data-s="ready"]  {border-color:#3fb95055;color:var(--ready)}
.pip[data-s="ready"]::before{content:"\2713"}
.pip[data-s="at-risk"]{border-color:#e3a00855;color:var(--at-risk)}
.pip[data-s="at-risk"]::before{content:"\25B3"}
.pip[data-s="failing"]{border-color:#f0603a66;color:var(--failing)}
.pip[data-s="failing"]::before{content:"\2715"}
.pip[data-s="unknown"]{border-style:dashed;color:var(--unknown)}
.pip[data-s="unknown"]::before{content:"?"}

/* ── status chip: hue + word, never hue alone ────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);
  font-weight:var(--fw-med);padding:2px var(--sp-3);border-radius:var(--r-pill);
  white-space:nowrap;background:var(--surface2);color:var(--tx3)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.live{background:#39d0d81c;color:var(--run)}
.chip.wait{background:#e3a0081c;color:var(--blocked)}
.chip.ok{background:#3fb9501c;color:var(--done)}
.chip.bad{background:#f0603a1c;color:var(--stop)}
.chip.lane{background:#c07cf81c;color:var(--lane)}
.chip.idle{background:var(--surface2);color:var(--tx3)}

/* ── THE FIVE SURFACES — a real ARIA tablist ─────────────────────────────── */
.surfaces{display:flex;gap:var(--sp-2);border-bottom:1px solid var(--border);
  padding:0 var(--sp-8);background:var(--surface);position:sticky;top:52px;z-index:15;
  overflow-x:auto}
.surfaces [role="tab"]{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5);font-size:var(--fs-sm);font-weight:var(--fw-med);
  color:var(--tx3);border-bottom:2px solid transparent;white-space:nowrap}
.surfaces [role="tab"]:hover{color:var(--tx2)}
.surfaces [role="tab"][aria-selected="true"]{color:var(--tx);border-bottom-color:var(--accent)}
.surfaces [role="tab"] .cnt{font-size:var(--fs-2xs);font-weight:var(--fw-semi);
  background:var(--surface2);color:var(--tx3);border-radius:var(--r-pill);padding:1px 6px}
.surfaces [role="tab"] .cnt.warn{background:#e3a00822;color:var(--blocked)}
[role="tabpanel"]:not(.on){display:none}

/* ── panels ──────────────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-7);align-items:start}
@media (max-width:1080px){.grid2{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden}
.panel-h{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.panel-h h3{font-size:var(--fs-h3);font-weight:var(--fw-semi)}
.panel-h .sp{flex:1}
.panel-b{padding:var(--sp-6)}
.panel + .panel{margin-top:var(--sp-6)}

/* release gates as rows */
.gate{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-5);
  align-items:center;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border)}
.gate:last-child{border-bottom:0}
.gate .d b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-med)}
.gate .d span{display:block;font-size:var(--fs-xs);color:var(--tx3);margin-top:2px}
.gate .who{font-size:var(--fs-xs);color:var(--tx3);white-space:nowrap}

/* activity timeline */
.tl{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:56px 18px minmax(0,1fr);gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--border);align-items:start}
.ev:last-child{border-bottom:0}
.ev .t{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--tx3);padding-top:2px}
.ev .g{display:grid;place-items:center;padding-top:4px}
.ev .g i{width:7px;height:7px;border-radius:50%;background:var(--tx3);display:block;font-style:normal}
.ev[data-kind="agent"] .g i{background:var(--run)}
.ev[data-kind="you"]   .g i{background:var(--lane)}
.ev[data-kind="gate"]  .g i{background:var(--blocked)}
.ev[data-kind="ship"]  .g i{background:var(--done)}
.ev .d b{font-size:var(--fs-sm);font-weight:var(--fw-med)}
.ev .d p{font-size:var(--fs-xs);color:var(--tx3);margin-top:2px}

/* working set — carried from Adam's shipped War Room so the two read as one product */
.wset{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.wpin{display:flex;align-items:center;gap:var(--sp-3);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:3px var(--sp-4) 3px 3px;background:var(--ground)}
.wpin .av{width:22px;height:22px;border-radius:50%;background:var(--raised);color:var(--tx2);
  font-size:9.5px;font-weight:var(--fw-semi);display:grid;place-items:center;flex:none}
.wpin b{font-size:var(--fs-sm);font-weight:var(--fw-med)}
.wpin .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--run)}
.wpin .dot.wait{background:var(--blocked)}
.wpin .dot.idle{background:var(--tx3)}

/* asset rows */
.arow{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:var(--sp-5);
  align-items:center;padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--border);
  width:100%;text-align:left}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--surface2)}
.arow .ic{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--raised);color:var(--tx2);font-size:11px}
.arow .d b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-med)}
.arow .d span{display:block;font-size:var(--fs-xs);color:var(--tx3);margin-top:1px}
.arow .m{font-size:var(--fs-xs);color:var(--tx3);font-family:var(--mono);white-space:nowrap}

/* setup rows */
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-5);
  align-items:center;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border)}
.srow:last-child{border-bottom:0}
.srow .d b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-med)}
.srow .d span{display:block;font-size:var(--fs-xs);color:var(--tx3);margin-top:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);
  font-weight:var(--fw-med);padding:6px var(--sp-5);border-radius:var(--r-md);
  border:1px solid var(--border2);color:var(--tx2);white-space:nowrap}
.btn:hover{background:var(--surface2);color:var(--tx)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#0c0e13;font-weight:var(--fw-semi)}
.btn.pri:hover{filter:brightness(1.08);background:var(--accent);color:#0c0e13}
.btn.sm{font-size:var(--fs-xs);padding:4px var(--sp-4)}

/* filters */
.filters{display:flex;gap:var(--sp-2);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:3px}
.filters button{font-size:var(--fs-xs);font-weight:var(--fw-med);padding:4px var(--sp-5);
  border-radius:var(--r-pill);color:var(--tx3)}
.filters button[aria-pressed="true"]{background:var(--surface2);color:var(--tx)}

/* notes used on the rationale page */
.note{background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--accent);
  border-radius:var(--r-sm);padding:var(--sp-6);font-size:var(--fs-sm);color:var(--tx2);
  line-height:1.65;margin-bottom:var(--sp-6)}
.note b{color:var(--tx);font-weight:var(--fw-med)}
.note.warn{border-left-color:var(--blocked)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
th,td{text-align:left;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);
  vertical-align:top}
th{font-size:var(--fs-micro);letter-spacing:.1em;color:var(--tx3);font-weight:var(--fw-semi);
  text-transform:uppercase}
td{color:var(--tx2);line-height:1.55}
td b{color:var(--tx)}
.scrollx{overflow-x:auto}

/* ── OPERATOR SURFACES (rework 30 Jul: Khoa — "more like did any users join
   today, any issues, watch the recording, free or premium" — the page is the
   product's ADMIN, not its dev console. One cockpit, no separate admins;
   consistent with the locked Cockpit IA that put owner-admin inside it.) ── */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden;margin-bottom:var(--sp-6)}
.bignums > div{background:var(--surface);padding:var(--sp-6)}
.bignums .n{display:block;font-family:var(--mono);font-size:24px;font-weight:var(--fw-semi);
  letter-spacing:-.02em}
.bignums .n small{font-size:var(--fs-sm);color:var(--done);font-weight:var(--fw-med)}
.bignums .n.warn{color:var(--blocked)}
.bignums .l{display:block;font-size:var(--fs-micro);letter-spacing:.09em;color:var(--tx3);
  text-transform:uppercase;font-weight:var(--fw-semi);margin-top:4px}
/* plan chips — the free/premium answer at a glance */
.plan{font-size:var(--fs-2xs);font-weight:var(--fw-semi);padding:2px var(--sp-3);
  border-radius:var(--r-xs);white-space:nowrap}
.plan.premium{background:#7c8cff22;color:var(--accent)}
.plan.trial{background:#e0b34122;color:var(--c-amber)}
.plan.free{background:var(--surface2);color:var(--tx3)}
/* an issue row: what broke, who it hit, and the replay is FIRST-CLASS */
.irow{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto auto;gap:var(--sp-5);
  align-items:center;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border)}
.irow:last-child{border-bottom:0}
.irow .sev{width:10px;height:10px;border-radius:3px;background:var(--blocked)}
.irow .sev.bad{background:var(--stop)}
.irow .sev.ok{background:var(--tx3)}
.irow .d b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-med);font-family:var(--mono)}
.irow .d span{display:block;font-size:var(--fs-xs);color:var(--tx3);margin-top:2px}
.irow .m{font-size:var(--fs-xs);color:var(--tx3);font-family:var(--mono);white-space:nowrap}
.replay{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);
  font-weight:var(--fw-med);padding:4px var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--border2);color:var(--tx2);white-space:nowrap}
.replay:hover{border-color:var(--accent);color:var(--tx)}
.replay::before{content:"▶";font-size:8px;color:var(--run)}
/* users table */
.utab{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.utab th{font-size:var(--fs-micro);letter-spacing:.1em;color:var(--tx3);
  font-weight:var(--fw-semi);text-transform:uppercase;text-align:left;
  padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--border)}
.utab td{padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--border);
  color:var(--tx2);vertical-align:middle}
.utab tr:last-child td{border-bottom:0}
.utab tbody tr:hover{background:var(--surface2)}
.utab .u{display:flex;align-items:center;gap:var(--sp-3)}
.utab .u .av{width:24px;height:24px;border-radius:50%;background:var(--raised);color:var(--tx2);
  font-size:var(--fs-2xs);font-weight:var(--fw-semi);display:grid;place-items:center;flex:none}
.utab .u b{color:var(--tx);font-weight:var(--fw-med)}
.utab .u small{display:block;font-size:var(--fs-2xs);color:var(--tx3)}
.newrow{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:var(--sp-4);
  align-items:center;padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--border)}
.newrow:last-child{border-bottom:0}