/* =====================================================================
   DESIGN TOKENS -- the single source of truth. See deploy/design_tokens.md
   =====================================================================
   Round 12, Phase 3. Extracted from novig.com's visual language via
   operator-supplied screenshots (the site returns HTTP 405 to any plain
   request, and rule 5 forbids working around that).

   NO LITERAL COLOUR MAY APPEAR BELOW THIS BLOCK. audit.sh SECTION 84
   enforces it. A one-off hex is how a design system stops being one.

   THE INVERSION TRAP. --bg and --bg-subtle each used to do two jobs,
   which only worked because #fff and #fafafa are nearly the same colour.
   In a light theme "subtle" means slightly DARKER; on black it must mean
   slightly LIGHTER. A mechanical swap inverts every nested relationship
   and makes controls vanish into their containers. So the page ground is
   its own token now, and the pop-out state is --surface-3. */
:root{
  /* Ground and surfaces. Depth is lightness, never shadow. */
  --ground:#000000;        /* the page, and the topbar that vanishes into it */
  --bg:#121215;            /* a card */
  --bg-subtle:#1C1C21;     /* a control or cell sitting ON a card */
  --surface-3:#26262C;     /* hover / active state of such a control */

  --border:#232329;        /* a divider you should not notice */
  --border-strong:#34343C; /* the edge of an interactive control */

  /* Text. Every one clears WCAG AA 4.5:1 on all four surfaces; the
     tightest is --text-faint on --surface-3 at 4.52. */
  --text:#FFFFFF;
  --text-muted:#ADADB8;
  --text-faint:#8C8C96;

  /* Accent: interactive and price-shaped. NOT a status colour. */
  --accent:#2E8FFF;
  --accent-hi:#5AA8FF;
  --accent-bg:rgba(46,143,255,.14);

  /* SEMANTIC STATUS -- assigned separately from the accent on purpose.
     The source design uses one blue for both sides of a market, where
     blue means "a price you can act on". Here green/red/amber mean
     positive/negative/warning AND the policy states GREEN/YELLOW/RED.
     Those are not brand colours and must never collapse into the accent.
     Re-tuned for a black ground: the light theme's #049f5e and #d0273e
     are unreadable on #000. */
  --green:#3DD68C;   --green-bg:rgba(61,214,140,.14);
  --red:#FF6470;     --red-bg:rgba(255,100,112,.14);
  --amber:#F0B429;   --amber-bg:rgba(240,180,41,.14);
  /* No --live token. The source design reserves orange for a running
     game; this dashboard has no live-game indicator, and staleness is
     already amber. A token added because the source has one, used by
     nothing, is the dead surface DASH-005 removed -- so it is not here.
     Add it when something needs it. */

  /* A DEFECT IS NOT A VERDICT. "broken" and "unsupported" mean the code
     failed, not that the money is bad and not that a balance is
     undeclared -- three things the fundability card is careful to keep
     apart. Purple because it must read as neither red nor grey.
     (There is deliberately no SIM colour: .sim-money distinguishes
     itself by a dashed border and a stripe, and its own comment says the
     style must never be the only thing marking simulated money. An
     unused token would be the dead surface DASH-005 just removed.) */
  --defect:#C084FC;  --defect-bg:rgba(192,132,252,.14);

  /* Neutral tints, so a wash never needs its own literal. */
  --wash:rgba(255,255,255,.04);
  --wash-strong:rgba(255,255,255,.08);

  /* PROVENANCE, not status: what produced a number. Distinct from the
     semantic trio on purpose -- "a trained classifier said so" is not a
     verdict. Values unchanged from the light theme: white-on-fill
     measures 7.10 / 5.47 / 5.02, and lifting them for the dark ground
     would have dropped two below AA. */
  --basis-ml:#6D28D9;      /* trained classifier */
  --basis-sim:#0F766E;     /* Monte Carlo        */
  --basis-stat:#B45309;    /* closed-form        */
  --amber-faint:rgba(240,180,41,.06);

  --radius-pill:999px; --radius:16px; --radius-sm:10px; --radius-xs:8px;

  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{
  font-family:var(--font-sans);
  background:var(--ground); color:var(--text);
  max-width:74rem; margin:0 auto; padding:0 1.25rem 3rem;
}
a{color:inherit}

.sport-section{margin-bottom:2.75rem}
.sport-head{display:flex; align-items:baseline; gap:.6rem; margin-bottom:1rem}
.sport-head h2{font-size:1.3rem; margin:0; font-weight:800; letter-spacing:-.02em}
.cat-pill{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); background:var(--bg); border:1px solid var(--border-strong);
  border-radius:var(--radius-pill); padding:.2rem .6rem;
}

.card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.25rem; margin-bottom:1rem;
}
.card h3{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); margin:0 0 .7rem;
}
.card h3 .src{text-transform:none; font-weight:500; letter-spacing:0; color:var(--text-faint)}

.statement{
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.9rem 1rem; font-family:var(--font-mono);
  /* pre-wrap, not pre: tennis's AI+ML reasoning lines can now run a few
     sentences (depth="detailed", 2026-08-15) instead of one <200-char
     line -- pre-wrap keeps the existing monospace/indentation look for
     every other report in this block but wraps a long line instead of
     forcing horizontal scroll on it. */
  font-size:.78rem; line-height:1.55; overflow-x:auto; white-space:pre-wrap; color:var(--text);
}
.muted{color:var(--text-muted); font-size:.88rem; margin:0}
.err{color:var(--red); font-size:.88rem; margin:0}

.stat-row{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.stat-big{font-size:2.1rem; font-weight:800; letter-spacing:-.03em}
.stat-n{color:var(--text-muted); font-size:.85rem}
.stat-flag{
  font-size:.72rem; font-weight:700; color:var(--amber); background:var(--amber-bg);
  border-radius:var(--radius-pill); padding:.1rem .55rem;
}

.market-grid{display:flex; flex-direction:column; gap:.5rem}
.market-row{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.6rem .85rem; font-size:.85rem;
}
.market-title{flex:1; min-width:9rem; font-weight:600}
.market-sub{color:var(--text-faint); font-size:.78rem; font-weight:400; display:block}
.pill{
  display:inline-flex; align-items:baseline; gap:.15rem;
  border-radius:var(--radius-pill); padding:.22rem .65rem; font-weight:700; font-size:.82rem;
  white-space:nowrap;
}
.pill-prob{background:var(--green-bg); color:var(--green)}

.bet-list{display:flex; flex-direction:column; gap:.6rem}
.bet-card{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.75rem 1rem;
}
.bet-main{flex:1; min-width:11rem}
.bet-main .ev{font-weight:700; font-size:.92rem}
.bet-main .sel{color:var(--text-muted); font-size:.82rem}
.bet-nums{display:flex; gap:1.1rem; font-size:.82rem; color:var(--text-muted)}
.bet-nums b{color:var(--text); font-weight:700}
.status-pill{font-size:.72rem; font-weight:700; border-radius:var(--radius-pill); padding:.2rem .6rem; text-transform:uppercase; letter-spacing:.03em}
.status-pending{background:var(--bg-subtle); color:var(--text-muted)}
.status-won{background:var(--green-bg); color:var(--green)}
.status-lost{background:var(--red-bg); color:var(--red)}
.pl-pos{color:var(--green); font-weight:700}
.pl-neg{color:var(--red); font-weight:700}
.bet-actions{display:flex; gap:.35rem; align-items:center}
.bet-actions form{display:inline}
.btn-mini{
  border:1px solid var(--border-strong); background:var(--bg); border-radius:var(--radius-pill);
  padding:.25rem .65rem; font-size:.75rem; font-weight:700; cursor:pointer; color:var(--text);
}
.btn-mini.win{color:var(--green); border-color:var(--green-bg)}
.btn-mini.loss{color:var(--red); border-color:var(--red-bg)}
.btn-mini.del{color:var(--text-faint)}

.add-form{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.85rem;
}
.add-form input, .add-form select{
  padding:.5rem .65rem; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:.85rem; font-family:inherit; background:var(--bg);
}
.add-form input{flex:1; min-width:7rem}
.btn-primary{
  background:var(--text); color:var(--ground); border:none; border-radius:var(--radius-sm);
  padding:.5rem 1.1rem; font-weight:700; font-size:.85rem; cursor:pointer;
}

details.notes{margin-top:.75rem; color:var(--text-muted); font-size:.8rem}
details.notes summary{cursor:pointer; font-weight:600; color:var(--text-faint)}
details.notes ul{margin:.5rem 0 0; padding-left:1.1rem}

.tabs{display:flex; gap:.4rem; margin-bottom:1.5rem; border-bottom:1px solid var(--border-strong); flex-wrap:wrap}
.tab-btn{
  appearance:none; border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:.95rem; font-weight:700; color:var(--text-muted); padding:.6rem 1rem;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--text); border-bottom-color:var(--text)}
.sport-panel{display:none}
.sport-panel.active{display:block}

.info-banner{
  background:var(--amber-bg); border:1px solid var(--amber); color:var(--amber); border-radius:var(--radius-sm);
  padding:.75rem 1rem; font-size:.82rem; margin-bottom:1rem; line-height:1.5;
}
.kind-tag{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:.15rem .5rem; border-radius:var(--radius-pill); margin-left:.4rem; vertical-align:middle;
}
.kind-logged{background:var(--green-bg); color:var(--green)}
.kind-suggested{background:var(--amber-bg); color:var(--amber)}

.refresh-grid{display:flex; flex-direction:column; gap:.5rem}
.refresh-row{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .85rem;
}
.refresh-info{display:flex; flex-direction:column; gap:.15rem; min-width:14rem}
.refresh-label{font-weight:700; font-size:.85rem}
.refresh-cadence{color:var(--text-faint); font-size:.75rem}
.refresh-lastrun{color:var(--text-muted); font-size:.75rem}

.today-bets{border-color:var(--green); border-width:1.5px}
.today-bets h3{color:var(--text)}

.risk-card{padding:1rem 1.2rem}
.risk-form{display:flex; align-items:center; gap:.7rem; margin-top:.4rem}
.risk-slider{flex:1; max-width:320px}
.risk-value{font-weight:800; min-width:1.4rem; text-align:center}
.risk-note{margin-top:.5rem}

.bankroll-card{padding:1rem 1.2rem; margin-top:.6rem}
.bankroll-form{display:flex; align-items:center; gap:.7rem; margin-top:.4rem}
.bankroll-input-wrap{position:relative; display:inline-flex; align-items:center}
.bankroll-input-wrap::before{
  content:"$"; position:absolute; left:.6rem; color:var(--text-muted); font-weight:700;
  font-size:.95rem; pointer-events:none;
}
.bankroll-input{
  width:8rem; padding:.4rem .6rem .4rem 1.35rem; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); font-size:.95rem; font-weight:700;
}
.field-status{font-size:.76rem; color:var(--text-faint)}

/* ===================================================================
   BADGES -- ACTIONABLE / READ ONLY / EXPERIMENTAL / SMALL SAMPLE /
   HIGH RISK / BACKTESTED / WEAKER MODEL. One small, consistent visual
   vocabulary for "what kind of information is this and how much should
   it be trusted" instead of that being buried in prose every time.
   =================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; border-radius:var(--radius-pill);
  padding:.18rem .58rem; white-space:nowrap; border:1px solid transparent;
}
.badge-actionable{background:var(--green-bg); color:var(--green); border-color:var(--green)}
.badge-readonly{background:var(--bg); color:var(--text-muted); border-color:var(--border-strong)}
.badge-experimental{background:var(--amber-bg); color:var(--amber); border-color:var(--amber)}
.badge-smallsample{background:var(--accent-bg); color:var(--accent); border-color:var(--accent)}
.badge-highrisk{background:var(--red-bg); color:var(--red); border-color:var(--red)}
.badge-backtested{background:var(--green-bg); color:var(--green); border-color:var(--green)}
.badge-weakermodel{background:var(--amber-bg); color:var(--amber); border-color:var(--amber)}
.badge-monitor{background:var(--bg-subtle); color:var(--text-muted); border-color:var(--border-strong)}
.badge-stale{background:var(--amber-bg); color:var(--amber); border-color:var(--amber)}
.badge-screened{background:var(--bg-subtle); color:var(--text-muted); border-color:var(--border-strong)}

/* Section-kind labels ("act now" vs "monitor" vs "diagnostics") reuse
   the badge classes above rather than inventing a second vocabulary. */

/* ===================================================================
   SUMMARY BAR -- per-sport, sticky just under the tab row. Only ever
   shows numbers pulled from real structured data (never parsed out of
   a raw text dump) -- a field that can't be safely derived shows "—",
   never a guess.
   =================================================================== */
.summary-bar{
  position:sticky; top:3.4rem; z-index:4; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:.7rem 1rem; margin-bottom:1.1rem; display:flex; gap:1.5rem;
  flex-wrap:wrap; align-items:center;
}
.summary-item{display:flex; flex-direction:column; gap:.05rem; min-width:5.2rem}
.summary-item .k{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint)}
.summary-item .v{font-size:1.05rem; font-weight:800; letter-spacing:-.01em}
.summary-item .v.up{color:var(--green)}
.summary-item .v.dn{color:var(--red)}

.mini-tag{display:inline-block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.05rem .32rem; border-radius:var(--radius-xs); margin-left:.2rem; vertical-align:middle; border:1px solid transparent}
.mini-tag.mt-green{background:var(--green-bg); color:var(--green)}
.mini-tag.mt-amber{background:var(--amber-bg); color:var(--amber)}


.kpi-grid{display:flex; flex-wrap:wrap; gap:1.4rem; margin-bottom:.9rem; padding-bottom:.9rem; border-bottom:1px solid var(--border)}
.kpi-grid .summary-item{min-width:6rem}
.insight-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.insight-list li{font-size:.84rem; line-height:1.5; padding:.5rem .65rem; border-radius:var(--radius-xs); background:var(--bg-subtle); border-left:3px solid var(--border)}
.insight-list li.warn{border-left-color:var(--red)}
.insight-list li.info{border-left-color:var(--amber)}

/* ===================================================================
   Collapsible section wrapper -- native <details>/<summary>, no JS
   required for the basic open/close behavior (keyboard- and
   screen-reader-accessible for free). Used to default-collapse long
   narrative/log sections per section.
   =================================================================== */
.collapse{border:1px solid var(--border); border-radius:var(--radius); margin-bottom:1rem; overflow:hidden}
.collapse > summary{
  cursor:pointer; list-style:none; padding:.85rem 1.1rem; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; gap:.5rem; justify-content:space-between;
  background:var(--bg-subtle);
}
.collapse > summary::-webkit-details-marker{display:none}
.collapse > summary::after{content:"▸"; color:var(--text-faint); transition:transform .12s}
.collapse[open] > summary::after{transform:rotate(90deg)}
.collapse > summary .lab{display:flex; align-items:center; gap:.5rem; min-width:0}
.collapse-body{padding:1rem 1.1rem}

/* ===================================================================
   Pick rows -- redesigned Today's Bets cards.
   =================================================================== */
.pick-row{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.85rem 1rem;
  margin-bottom:.6rem;
}
.pick-row.up-edge{border-left:3px solid var(--green)}
.pick-top{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; flex-wrap:wrap}
.pick-name{font-weight:700; font-size:.95rem}
.pick-vs{color:var(--text-muted); font-size:.82rem; font-weight:400}
.pick-nums{display:flex; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--text-muted); margin-top:.3rem}
.pick-nums b{color:var(--text)}
.pick-reason{font-size:.82rem; color:var(--text-muted); margin-top:.4rem}
.pick-flags{display:flex; gap:.35rem; margin-top:.4rem; flex-wrap:wrap; align-items:center}
.pick-flags .flag-sep{width:1px; align-self:stretch; background:var(--border); margin:0 .1rem}
.pick-toggle{text-align:right; white-space:nowrap}
.conf-tag{font-size:.68rem; font-weight:700; border-radius:var(--radius-pill); padding:.15rem .55rem; text-transform:uppercase; letter-spacing:.03em}
.conf-high{background:var(--green-bg); color:var(--green)}
.conf-medium{background:var(--amber-bg); color:var(--amber)}
.conf-low{background:var(--accent-bg); color:var(--accent)}
/* Compact "Edge / Stake / Pass above" stat line -- promoted out of the
   dense pick-nums row so the 3 numbers a user needs to decide are
   scannable in one line, right under the name, before anything else. */
.pick-stat-line{display:flex; gap:.9rem; flex-wrap:wrap; font-size:.86rem; margin-top:.35rem}
/* ---- Risk control card (2026-08-19) ---- */
.risk-control-card{border-left:3px solid var(--accent)}
.gate-banner{background:var(--amber-bg); border:1px solid var(--amber);
  border-radius:var(--radius-xs); padding:.55rem .7rem; margin:.2rem 0 .75rem; font-size:.83rem; line-height:1.45}
.meter-row{display:flex; align-items:center; gap:.7rem; margin:.45rem 0; font-size:.8rem; flex-wrap:wrap}
.meter-label{min-width:9.5rem; color:var(--muted)}
.meter{flex:1; min-width:8rem; height:8px; background:var(--border); border-radius:var(--radius-xs); overflow:hidden}
.meter-fill{display:block; height:100%; background:var(--accent); border-radius:var(--radius-xs); transition:width .3s}
.meter-fill.ok{background:var(--green)}
.meter-fill.warn{background:var(--amber)}
.meter-fill.over{background:var(--red)}
.meter-val{min-width:7rem; text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.risk-detail{display:flex; flex-direction:column; gap:.3rem; margin-top:.7rem; font-size:.8rem; color:var(--muted)}
.conc-warn{margin-top:.6rem; font-size:.8rem; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.conc-chip{background:var(--red-bg); border:1px solid var(--red);
  border-radius:var(--radius-xs); padding:.1rem .4rem; font-size:.75rem}
.hedge-calc{padding:.3rem 0}
.hedge-inputs{display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:.6rem}
.hedge-inputs label{display:flex; flex-direction:column; gap:.2rem; font-size:.76rem; color:var(--muted)}
.hedge-inputs input{width:8rem; padding:.3rem .4rem; border:1px solid var(--border-strong);
  border-radius:var(--radius-xs); background:var(--bg); color:var(--fg); font-size:.85rem}
.hedge-out{font-size:.85rem; line-height:1.6}
.stake-capped{font-size:.72rem; color:var(--muted); font-style:italic}
.quality-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.6rem; margin-top:.8rem}
.quality-box{border:1px solid var(--border); border-radius:var(--radius-xs); padding:.5rem .6rem;
  display:flex; flex-direction:column; gap:.25rem}
.q-label{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.q-val{font-size:.85rem; font-weight:600}
.pick-stat-line b{color:var(--text); font-weight:700}
.pick-stat-line .stat-edge-up{color:var(--green)}
.pick-stat-line .stat-edge-dn{color:var(--red)}
.filter-bar{display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; margin:.5rem 0 .8rem; padding:.5rem .7rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.78rem}
.filter-bar label{display:flex; align-items:center; gap:.3rem; color:var(--text-muted); cursor:pointer}
.trend-arrow{font-size:.7rem; margin-left:.3rem}
.trend-up{color:var(--green)}
.trend-dn{color:var(--red)}

.toolbar{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.75rem; font-size:.8rem}
.toolbar select, .toolbar input[type=number]{
  padding:.3rem .5rem; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:.8rem; font-family:inherit; background:var(--bg);
}
.toolbar label{display:flex; align-items:center; gap:.35rem; color:var(--text-muted)}
.toggle-more{
  background:none; border:1px solid var(--border-strong); border-radius:var(--radius-pill); cursor:pointer;
  font-size:.78rem; font-weight:600; padding:.3rem .8rem; color:var(--text-muted);
}
.toggle-more:hover{color:var(--text)}
.adv-col{display:none}
.show-adv .adv-col{display:inline}

.insight-card{
  background:linear-gradient(180deg,var(--bg-subtle),var(--bg)); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1rem;
}
.insight-card ul{margin:.5rem 0 0; padding-left:1.15rem}
.insight-card li{margin-bottom:.35rem; font-size:.85rem; line-height:1.5}

.tt{border-bottom:1px dotted var(--text-faint); cursor:help}

.warn-banner{
  background:var(--red-bg); border:1px solid var(--red); color:var(--red); border-radius:var(--radius-sm);
  padding:.7rem 1rem; font-size:.82rem; margin-bottom:.9rem; line-height:1.5;
}

.edge-chart{width:100%; height:64px; display:block; margin:.5rem 0 .25rem}

@media (max-width: 640px){
  body{padding:0 .75rem 3rem}
  .summary-bar{gap:.9rem; top:3rem}
  .summary-item{min-width:4rem}
  .bet-nums, .pick-nums{gap:.6rem; font-size:.78rem}
  .market-row{flex-direction:column; align-items:flex-start}
  .risk-form, .bankroll-form{flex-wrap:wrap}
  table{display:block; overflow-x:auto; white-space:nowrap}
  .btn-mini, .btn-primary{padding:.55rem 1rem}
}

/* =====================================================================
   PORTFOLIO WATERFALL
   =====================================================================
   Candidates -> screened -> actionable, then the pools that actionable
   is split across. Uses the existing tokens only; no new colours. The
   sub rows are indented and muted because they are a BREAKDOWN of the
   total above them, not further subtractions from it. */
.waterfall{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; font-size:.88rem;
}
.wf-row{
  display:grid; grid-template-columns:1fr auto auto; gap:.75rem;
  align-items:baseline; padding:.5rem .75rem;
  border-bottom:1px solid var(--border);
}
.wf-row:last-child{border-bottom:none}
.wf-label{color:var(--text)}
.wf-count{color:var(--text-muted); font-size:.8rem; text-align:right; min-width:5rem}
.wf-amt{
  font-variant-numeric:tabular-nums; font-weight:700;
  text-align:right; min-width:7rem;
}
.wf-minus{color:var(--text-muted)}
.wf-minus .wf-amt, .wf-minus .wf-label{color:var(--text-muted)}
.wf-total{background:var(--bg-subtle); font-weight:700}
.wf-total .wf-label, .wf-total .wf-amt{color:var(--text)}
.wf-sub .wf-label{padding-left:1rem; color:var(--text-muted); font-size:.82rem}
.wf-sub .wf-amt{font-weight:600; color:var(--text-muted)}
.wf-open .wf-amt{color:var(--amber)}
.wf-room .wf-amt{color:var(--green)}
@media (max-width: 640px){
  .wf-row{grid-template-columns:1fr auto; row-gap:.15rem}
  .wf-count{grid-column:2; font-size:.74rem}
  .wf-amt{grid-column:2; min-width:0}
}

/* ---------------------------------------------------------------
   LAB PANEL: SUMMARY BY DEFAULT.

   The lab renders ~1,500 lines of measurement -- funnels, four markout
   tables, a 103-row segment table, benchmark joins, inventory. All of it
   is correct and almost none of it is a thing to DO, and presented at
   once it made the panel unreadable: "even if I wanted to pick something
   I wouldn't know what I'm picking".

   ONE RULE, keyed on the summary card, hides every sibling after it.
   Wrapping each section in its own <details> was the obvious approach
   and is not available: those sections sit at Jinja depths 4 to 7, so
   the open tag would land inside an {% if %} and the close outside it.
   --------------------------------------------------------------- */
body[data-lab-view="summary"] .card.mm-lab > .lab-summary ~ *:not(.lab-toggle) {
  display: none;
}
.lab-toggle button { font-weight: 600; }
.linklike {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--text); font-weight: 700; text-decoration: underline;
  cursor: pointer;
}
.linklike:hover { color: var(--text-muted); }

/* =====================================================================
   MARKET-MAKING LAB -- everything here is SIMULATED.
   =====================================================================
   The .sim-money style is emphasis, NOT the marker. The marker lives
   inside the text content ("SIM $12.34"), written by the payload and
   printed by the sim_money() macro, so a stylesheet that fails to load
   loses the colour and keeps the label. This block must never become
   the only thing distinguishing simulated money from real money. */
.sim-money {
  font-weight: 700;
  color: var(--text);
  background: repeating-linear-gradient(45deg,
    var(--bg-subtle), var(--bg-subtle) 4px,
    transparent 4px, transparent 8px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 .3rem;
  white-space: nowrap;
}
/* UNKNOWN is a value and is rendered as the word. Never a dash, never
   an empty cell -- both of those read as zero. */
.mm-unknown {
  font-style: italic; font-weight: 600;
  color: var(--text-faint);
  border-bottom: 1px dotted var(--text-faint);
  cursor: help;
}
/* The two completeness measures sit side by side in SEPARATE bordered
   blocks. They are different questions and must never be read as one
   figure -- a 25% overlap was once taken for a like-for-like comparison
   because the join rate was 100%. */
.mm-split { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; }
.mm-half {
  flex: 1 1 20rem; min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  background: var(--bg-subtle);
}
.mm-half h4 { margin: 0 0 .3rem; font-size: .82rem; }
.mm-big { margin: .1rem 0; font-size: .95rem; font-weight: 700; }
.card.mm-lab { border-left: 3px dashed var(--border-strong); }

/* =====================================================================
   BASIS CHIP -- what produced a number.
   ===================================================================== */
.basis {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin: .2rem 0 .1rem; font-size: .68rem; line-height: 1.5;
}
.basis > span { padding: .05rem .4rem; border-radius: var(--radius-pill); white-space: nowrap; }
.basis-k { font-weight: 800; letter-spacing: .04em; color: var(--text); }
.basis-ml         { background: var(--basis-ml); }   /* trained classifier      */
.basis-simulation { background: var(--basis-sim); }   /* Monte Carlo             */
.basis-statistical{ background: var(--basis-stat); }   /* closed-form / logistic  */
.basis-t     { background: var(--bg); color: var(--text-muted);
               border: 1px solid var(--border); }
.basis-ok    { background: var(--green-bg); color: var(--green);
               border: 1px solid var(--green); }
.basis-no    { background: var(--amber-bg); color: var(--amber);
               border: 1px solid var(--amber); }
.basis-unk   { background: var(--bg); color: var(--text-faint);
               border: 1px dashed var(--border-strong); }
.basis-tier  { background: var(--bg); color: var(--text-muted);
               border: 1px solid var(--border-strong); font-weight: 700; }
.basis-ai-on { background: var(--green-bg); color: var(--green);
               border: 1px solid var(--green); font-weight: 700; }
.basis-ai-off{ background: var(--bg); color: var(--text-faint);
               border: 1px dashed var(--border-strong); font-weight: 700; }

/* =====================================================================
   CLV PANEL -- the headline metric.
   ===================================================================== */
.clv-card { border-left: 3px solid var(--text); }
.clv-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.2rem; margin:.5rem 0 .2rem }
.clv-hero { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap }
.clv-hero .k { font-size:.72rem; font-weight:700; text-transform:uppercase;
               letter-spacing:.03em; color:var(--text-muted) }
.clv-hero .v { font-size:1.5rem; font-weight:800; letter-spacing:-.02em }
.clv-verdict-text { margin:.15rem 0 0; font-size:.8rem; flex-basis:100% }

/* n is never optional. It sits inside the number, not beside it, so a
   figure cannot be copied out of context without it. */
.clv-n { font-size:.68rem; font-weight:700; color:var(--text-muted);
         background:var(--bg-subtle); border:1px solid var(--border);
         border-radius:var(--radius-pill); padding:.05rem .4rem; margin-left:.35rem;
         vertical-align:middle }

/* Verdicts. "insufficient sample" and "no edge" are deliberately NOT
   the same colour -- one is an absence of evidence, the other is a
   result. */
.clv-v { display:inline-block; font-size:.66rem; font-weight:800;
         letter-spacing:.02em; padding:.1rem .5rem; border-radius:var(--radius-pill);
         white-space:nowrap; text-transform:uppercase }
.clv-positive            { background:var(--green-bg);  color:var(--green);
                           border:1px solid var(--green) }
.clv-negative            { background:var(--red-bg); color:var(--red);
                           border:1px solid var(--red) }
.clv-no_edge             { background:var(--amber-bg); color:var(--amber);
                           border:1px solid var(--amber) }
.clv-insufficient_sample { background:var(--bg-subtle); color:var(--text-muted);
                           border:1px dashed var(--border-strong) }
.clv-not_measured,
.clv-no_data,
.clv-error               { background:var(--bg-subtle); color:var(--text-faint);
                           border:1px dashed var(--border-strong) }

/* Track-only pool: budgeted to $0 on purpose. Styled as a deliberate
   state, NOT as a warning and NOT as an empty meter -- the sport is
   still producing and measuring picks, and the row exists to show the
   sample it is accumulating. Amber would imply something is wrong. */
.meter-row.is-track-only { opacity:1 }
.track-only-note { font-size:.72rem; font-weight:700; letter-spacing:.02em;
                   text-transform:uppercase; color:var(--text-muted);
                   border:1px dashed var(--border-strong); border-radius:var(--radius-pill);
                   padding:.08rem .5rem; white-space:nowrap }
.track-only-val { font-variant-numeric:tabular-nums; color:var(--text) }

/* Cross-level join rate. Deliberately NOT muted-small: it is the line
   that stops two adjacent cards being read as one comparison, and it
   was learned the expensive way -- a 25% overlap was reported as an
   execution-quality finding before anyone checked the join. */
.clv-overlap { margin:.55rem 0 0; padding:.5rem .65rem; font-size:.78rem;
               line-height:1.5; border-radius:var(--radius-sm);
               background:var(--bg-subtle);
               border:1px solid var(--border-strong);
               display:flex; flex-direction:column; gap:.15rem }
.clv-overlap b { color:var(--text) }

/* Evidence caveat on a picks card. Sits between the title and the rows
   so it cannot be scrolled past on the way to the numbers. Amber, not
   red: track-only is "not shown to beat the close", which is an absence
   of demonstrated edge, NOT a measured loss. Colouring it red would
   overstate the finding in the other direction. */
.ev-caveat { display:flex; gap:.5rem; align-items:flex-start; flex-wrap:wrap;
             margin:.4rem 0 .55rem; padding:.5rem .65rem; font-size:.78rem;
             line-height:1.45; border-radius:var(--radius-sm);
             background:var(--amber-bg);
             border:1px solid var(--amber) }
.ev-caveat b { color:var(--amber) }
.ev-caveat-track_only { background:var(--amber-bg) }
.ev-caveat-not_measured,
.ev-caveat-unproven { background:var(--bg-subtle);
                      border-color:var(--border-strong) }

/* ---------------------------------------------------------------
   SOURCE FRESHNESS.
   Added 2026-09-01, after MLB CLV rendered "+6.28c / BEATING THE
   CLOSE" from a file that had not been written in 29 hours, sitting
   in the same row as a tennis figure refreshed 30 minutes earlier.
   Nothing on the page distinguished them.

   The rule this encodes: a stale figure must not LOOK like a live
   one. A badge alone does not achieve that -- the eye reads the big
   number first and the small badge second, if at all. So a stale
   card also loses the visual weight that signals "live": the figure
   goes muted, the level stripe goes grey, and the card is tinted.
   The number is still legible, because it is still the last real
   measurement and hiding it would be its own kind of lie.
   --------------------------------------------------------------- */
.clv-banner { display:flex; gap:.5rem; align-items:flex-start;
              margin:.6rem 0 .2rem; padding:.5rem .65rem;
              font-size:.78rem; line-height:1.45;
              border-radius:var(--radius-sm);
              background:var(--amber-bg);
              border:1px solid var(--amber);
              color:var(--text) }
.clv-banner b { color:var(--amber) }

.clv-stale { font-size:.6rem; font-weight:800; text-transform:uppercase;
             letter-spacing:.03em; border-radius:var(--radius-pill);
             padding:.05rem .4rem; white-space:nowrap;
             background:var(--amber-bg); color:var(--amber);
             border:1px solid var(--amber) }
/* "frozen" is louder than "stale" on purpose: it means this sport's
   OTHER stages are still running, so the dashboard looks alive while
   this one number is not. That is the case most likely to mislead. */
.clv-stale.is-frozen { background:var(--red-bg); color:var(--red);
                       border-color:var(--red) }

.clv-sport.is-stale { background:repeating-linear-gradient(
                        135deg, var(--bg-subtle), var(--bg-subtle) 9px,
                        var(--amber-faint) 9px, var(--amber-faint) 18px);
                      border-color:var(--amber) }
.clv-sport.is-stale .clv-main,
.clv-sport.is-stale .clv-rows b,
.clv-sport.is-stale .clv-roll b { color:var(--text-muted) }
/* The green "this is a real bet-level fill" stripe must not survive
   staleness -- it is a claim about trustworthiness. */
.clv-sport.is-stale { border-left-color:var(--amber) !important }

.clv-age { margin:.3rem 0 0; font-size:.68rem; color:var(--text-faint);
           font-variant-numeric:tabular-nums }
.clv-age.is-stale { color:var(--amber); font-weight:700 }

.clv-grid { display:grid; gap:.7rem; margin-top:.9rem;
            grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }
.clv-sport { border:1px solid var(--border); border-radius:var(--radius-sm);
             padding:.65rem .8rem; background:var(--bg-subtle) }
.clv-sport-head { display:flex; align-items:baseline; justify-content:space-between; gap:.4rem }
.clv-level { font-size:.6rem; font-weight:700; text-transform:uppercase;
             letter-spacing:.03em; color:var(--text-faint);
             border:1px solid var(--border-strong); border-radius:var(--radius-pill);
             padding:.05rem .35rem; white-space:nowrap }
/* Bet-level is the real thing; the others are model evidence. Marked so
   the eye can tell them apart without reading the label. */
.clv-lvl-bet         { border-left:3px solid var(--green) }
.clv-lvl-prediction  { border-left:3px solid var(--amber) }
.clv-lvl-forward_log { border-left:3px solid var(--amber) }
.clv-lvl-none        { border-left:3px solid var(--border-strong); opacity:.85 }

.clv-main { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin:.3rem 0 .25rem }
.clv-rows { margin-top:.45rem; font-size:.74rem; display:grid; gap:.15rem }
.clv-rows > div { display:flex; align-items:baseline; gap:.35rem }
.clv-rows span:first-child { color:var(--text-muted); min-width:5.2rem }
.clv-rows b { font-variant-numeric:tabular-nums }
.clv-roll { margin-top:.5rem; padding-top:.45rem; border-top:1px dashed var(--border);
            display:flex; flex-wrap:wrap; gap:.15rem .8rem; font-size:.7rem;
            color:var(--text-muted) }
.clv-roll-cell b { margin-left:.25rem; color:var(--text); font-variant-numeric:tabular-nums }
.clv-why { margin:.3rem 0 0; font-size:.74rem }
.clv-note { margin-top:.45rem }
.clv-note summary { padding:.3rem .5rem; font-size:.7rem }

/* =====================================================================
   EVIDENCE STATE + TIER
   =====================================================================
   Four states, four looks. track-only and unproven must NOT share
   styling: one is a result, the other is an absence of one, and a
   reader who cannot tell them apart will read both as "about zero". */
.ev { display:inline-block; font-size:.66rem; font-weight:800;
      letter-spacing:.02em; padding:.1rem .5rem; border-radius:var(--radius-pill);
      white-space:nowrap; text-transform:uppercase; vertical-align:middle }
.ev-validated_edge { background:var(--green-bg); color:var(--green);
                     border:1px solid var(--green) }
/* Measured, no edge. Neutral and factual -- deliberately NOT red.
   "no detectable edge" is a result, not an alarm, and colouring it as
   danger would overstate it exactly as much as calling it an edge. */
.ev-track_only     { background:var(--bg); color:var(--text);
                     border:1px solid var(--border-strong) }
/* Not yet measurable. Dashed = provisional, distinct from the solid
   border of a concluded result. */
.ev-unproven       { background:var(--bg-subtle); color:var(--text-muted);
                     border:1px dashed var(--border-strong) }
.ev-not_measured   { background:var(--bg-subtle); color:var(--text-faint);
                     border:1px dotted var(--border-strong) }

.tier-pill { display:inline-block; font-size:.62rem; font-weight:800;
             letter-spacing:.03em; padding:.05rem .4rem; border-radius:var(--radius-pill);
             border:1px solid var(--border-strong); background:var(--bg);
             color:var(--text-muted); cursor:help }
.tier-bet   { color:var(--green); border-color:var(--green) }
.tier-blend { color:var(--amber); border-color:var(--amber) }
.tier-track { color:var(--text-muted) }

.evidence-card { border-left:3px solid var(--text) }
.ev-grid { display:grid; gap:.8rem; margin-top:.5rem;
           grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.ev-box { border:1px solid var(--border); border-radius:var(--radius-sm);
          padding:.7rem .85rem; background:var(--bg-subtle) }
.ev-head { font-size:.8rem; display:flex; align-items:baseline;
           justify-content:space-between; gap:.4rem; flex-wrap:wrap }
.ev-lvl { font-size:.6rem; font-weight:700; text-transform:uppercase;
          letter-spacing:.03em; color:var(--text-faint);
          border:1px solid var(--border-strong); border-radius:var(--radius-pill);
          padding:.05rem .35rem; cursor:help; white-space:nowrap }
.ev-num { font-size:1.3rem; font-weight:800; letter-spacing:-.02em;
          margin:.35rem 0 .1rem }
.ev-rows { font-size:.74rem; display:grid; gap:.15rem; margin-top:.3rem }
.ev-rows > div { display:flex; align-items:baseline; gap:.35rem }
.ev-rows span:first-child { color:var(--text-muted); min-width:6.5rem }
.ev-rows b { font-variant-numeric:tabular-nums }
.ev-read { margin:.5rem 0 0; font-size:.78rem; line-height:1.45 }
.ev-foot { margin:.8rem 0 0; font-size:.78rem; line-height:1.5 }
.cap-evidence { margin:.5rem 0 0; font-size:.76rem; line-height:1.5 }

/* =====================================================================
   THE BOTTOM LINE -- the answer, above the evidence.
   =====================================================================
   Round 12, Phase 2. Measured before this existed: the layer nav sat
   10.2% down the visible page and the first picks card 12.1% down, so a
   first screen contained neither. This card and the nav now open the
   page.

   TOKENS ONLY. Every colour here is a var() from :root -- as is every
   colour in this file now; Phase 3 closed that out and SECTION 84
   enforces it.

   STATUS IS NEVER HUE ALONE. Each .bl-tag carries a WORD -- ACT, HELD,
   NONE, BROKEN -- so the state survives greyscale, colour blindness, and
   a screenshot pasted into a chat window. */
.card.bottomline{
  border:1px solid var(--border-strong);
  border-left:4px solid var(--text);
  background:var(--bg);
}
.card.bottomline h2{font-size:1.05rem; margin:0 0 .5rem; font-weight:800; letter-spacing:-.01em}
.bl-verdict{margin:.1rem 0 .7rem; font-size:.95rem; display:flex;
            align-items:baseline; gap:.5rem; flex-wrap:wrap}
.bl-money{font-size:1.25rem; font-weight:800; letter-spacing:-.02em}
.bl-basis{color:var(--text-muted); font-size:.78rem; font-weight:400}
.bl-list{margin:.2rem 0 .7rem; padding-left:0; list-style:none;
         display:flex; flex-direction:column; gap:.35rem}
.bl-list li{font-size:.84rem; line-height:1.45}
.bl-list a{color:var(--text-muted); text-decoration:underline; font-size:.78rem; white-space:nowrap}
.bl-list a:hover{color:var(--text)}
.bl-tag{
  display:inline-block; min-width:4.2rem; text-align:center;
  font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  border-radius:var(--radius-pill); padding:.15rem .5rem; margin-right:.4rem;
  border:1px solid transparent; vertical-align:baseline;
}
.bl-tag-go{color:var(--green); background:var(--green-bg); border-color:var(--green)}
.bl-tag-hold{color:var(--amber); background:var(--amber-bg); border-color:var(--amber)}
.bl-tag-quiet{color:var(--text-muted); background:var(--bg-subtle); border-color:var(--border-strong)}
.bl-tag-broke{color:var(--red); background:var(--red-bg); border-color:var(--red)}
.bl-safety{
  margin:.55rem 0 0; padding-top:.55rem; border-top:1px solid var(--border);
  font-size:.8rem; color:var(--text-muted);
}
.bl-safety b{color:var(--text)}
.bl-safety a{color:var(--text-muted); text-decoration:underline; margin-left:.35rem}

/* =====================================================================
   SECTION RULES -- betting is not market making.
   =====================================================================
   Round 12. The two activities were interleaved in one column: the lab
   card sat between the venue check and closing-line value, and the live
   order control sat between the daily cap and the portfolio. They are
   different activities -- backing an outcome versus quoting both sides
   of a market -- and reading them as one stack is what "I can't tell
   what I'm looking at" meant.

   A rule, not a card. Border, fill and radius all say "separate object";
   these say "everything after me is a different subject", which is a
   different job and gets a different device. */
.section-rule{
  margin:2.6rem 0 1rem; padding-top:.9rem;
  border-top:1px solid var(--border-strong);
}
.section-rule:first-of-type{margin-top:1.4rem}
.section-rule h2{
  font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text); margin:0 0 .3rem;
}
.section-rule p{
  margin:0; font-size:.8rem; line-height:1.55; color:var(--text-muted); max-width:46rem;
}
.section-rule b{color:var(--text)}

/* =====================================================================
   THE SHELL -- status bar, side nav, workspace. On every route.
   =====================================================================
   Round 13. This replaces the layer machinery, which is deleted. A layer
   lived in localStorage, could hide the betting board, and survived a
   reload with nothing on screen saying so. A route cannot: the address
   bar says where you are.

   The kill switch is pinned into the status bar, so it is reachable from
   every route without scrolling -- §1 requires that and it is not
   negotiable against a tidier bar. */
body{max-width:none; padding:0}
.shell{display:flex; flex-direction:column; min-height:100vh}
.statusbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:1.25rem; flex-wrap:wrap; padding:.55rem 1.25rem;
  background:var(--bg); border-bottom:1px solid var(--border-strong);
}
.brand{font-weight:800; letter-spacing:-.02em; text-decoration:none; font-size:.95rem}
.sb-item{display:flex; align-items:baseline; gap:.4rem; font-size:.75rem; white-space:nowrap}
.sb-k{color:var(--text-faint); text-transform:uppercase; letter-spacing:.07em; font-size:.62rem; font-weight:700}
.sb-v{font-weight:700; font-variant-numeric:tabular-nums}
.sb-ok{color:var(--green)} .sb-warn{color:var(--amber)} .sb-bad{color:var(--red)}
.sb-kill{gap:.45rem; padding:.15rem .55rem; border:1px solid var(--border-strong);
  border-radius:var(--radius-pill); background:var(--bg-subtle)}
.sb-form{display:inline}
.sb-btn{font:inherit; font-size:.66rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; cursor:pointer; padding:.14rem .55rem;
  border-radius:var(--radius-pill); border:1px solid var(--red);
  background:var(--red-bg); color:var(--red)}
.sb-btn:hover{background:var(--red); color:var(--ground)}
.sb-sim .sb-v{color:var(--text); background:var(--bg-subtle);
  border:1px dashed var(--border-strong); border-radius:var(--radius-xs);
  padding:0 .35rem; letter-spacing:.08em}
.sb-logout{margin-left:auto; font-size:.72rem; color:var(--text-faint); text-decoration:none}
.sb-logout:hover{color:var(--text)}

.shell-body{display:flex; flex:1; align-items:flex-start}
.sidenav{
  position:sticky; top:3rem; flex:0 0 12.5rem; display:flex; flex-direction:column;
  gap:.15rem; padding:1rem .6rem; border-right:1px solid var(--border);
}
.nav-item{
  display:flex; flex-direction:column; gap:.05rem; padding:.5rem .65rem;
  border-radius:var(--radius-sm); text-decoration:none; color:var(--text-muted);
  border:1px solid transparent;
}
.nav-item:hover{background:var(--bg-subtle); color:var(--text)}
.nav-item.active{background:var(--bg-subtle); color:var(--text);
  border-color:var(--border-strong); box-shadow:inset 2px 0 0 var(--accent)}
.nav-lbl{font-weight:700; font-size:.84rem}
.nav-sub{font-size:.66rem; color:var(--text-faint)}
.nav-gloss{margin-top:auto; padding:.5rem .65rem; font-size:.72rem;
  color:var(--text-faint); text-decoration:underline}
.workspace{flex:1; min-width:0; padding:1.25rem 1.5rem 4rem; max-width:74rem}

/* THE LAB TILE -- the only Lab content on the Desk, and the whole tile
   is the click target. */
.tile{display:flex; flex-direction:column; gap:.3rem; text-decoration:none;
  border-left:3px solid var(--accent)}
.tile:hover{background:var(--bg-subtle)}
.lt-k{font-size:.72rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em}
.lt-v{font-size:1.1rem; font-weight:800; letter-spacing:-.02em}
.lt-go{color:var(--green)} .lt-no{color:var(--text)}
.lt-sub{font-size:.74rem; color:var(--text-faint)}

.gloss{margin:0; display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:.5rem 1.25rem}
.gloss dt{font-weight:700; font-size:.82rem}
.gloss dd{margin:0; font-size:.82rem; color:var(--text-muted); line-height:1.55}
@media (max-width:52rem){
  .shell-body{flex-direction:column}
  .sidenav{position:static; flex:none; width:100%; flex-direction:row;
    flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--border)}
  .nav-gloss{margin-top:0}
  .workspace{padding:1rem}
  .gloss{grid-template-columns:1fr}
}

/* A REGION groups cards that answer one question. The information budget
   counts questions, not cards: "what is committed, what can fund it, and
   what is already exposed" is one thing to look at, not three. */
.region{display:block}
.region > .card{margin-bottom:.6rem}
.region > .card:last-child{margin-bottom:1rem}
.lt-block{font-size:.74rem; color:var(--text-muted); padding-top:.35rem;
  border-top:1px solid var(--border); margin-top:.15rem}
.lt-block b{color:var(--text)}

/* A SOURCE PAST ITS DECLARED CADENCE. Not a styling flourish: the age was
   already printed and read as a plain number. "odds read (34172 rows,
   383.9h)" was sixteen days old and looked like any other figure. */
.stale-flag{
  display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.05em;
  color:var(--amber); background:var(--amber-bg); border:1px solid var(--amber);
  border-radius:var(--radius-pill); padding:0 .4rem; margin-left:.25rem;
}

/* A DISCLOSURE THAT IS STILL OBVIOUSLY THERE. Collapsed by default
   because the Desk's ceiling is one viewport; never hidden, because
   §4 says tucking away is not deleting a distinction. */
.region-detail > summary{
  cursor:pointer; font-size:.78rem; font-weight:600; color:var(--text-muted);
  padding:.35rem 0; list-style:revert;
}
.region-detail > summary:hover{color:var(--text)}
.region-detail[open] > summary{margin-bottom:.4rem}
.clvtile{border-left-color:var(--text-muted)}

/* REFRESH CONTROLS. Each button is a real form post to a real route --
   restored in round 15 after the path bug behind them was fixed. */
.refresh-row{display:flex; flex-wrap:wrap; gap:.4rem}
.refresh-row form{display:inline}
.refresh-btn{
  font:inherit; font-size:.74rem; font-weight:600; cursor:pointer;
  padding:.3rem .7rem; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--bg-subtle); color:var(--text);
}
.refresh-btn:hover{background:var(--surface-3); border-color:var(--accent); color:var(--accent)}