/* ============================================================
   THE APP SHELL — sidebar + top bar + dashboard surfaces.
   Layered ON TOP of desk.css: every colour, type face, radius and motion
   token comes from there, and nothing here redefines one. Load order is
   desk.css then app.css.

   Why a second file rather than more desk.css: desk.css is the design system
   the whole site shares. This is one LAYOUT that one section uses. Keeping it
   separate means a page that never mounts the shell pays nothing for it, and
   the system file does not grow a set of rules only /dashboard can trigger.
   ============================================================ */

:root{
  --sb:212px;              /* sidebar width */
  --topbar:64px;
  --pulse-h:52px;          /* the bottom ticker */
  --pad:26px;
}

/* ---- frame -------------------------------------------------------------
   Grid, not fixed positioning. A fixed sidebar means every surface below it
   needs a matching margin-left and they drift apart the first time one
   changes; the grid keeps the two in step by construction. */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.app-main{min-width:0;display:flex;flex-direction:column}

/* ---- sidebar ---- */
.sb{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  border-right:1px solid var(--hair);background:linear-gradient(180deg,#0A0E12,#070A0D);
  z-index:40}
.sb-mark{display:flex;align-items:center;gap:9px;height:var(--topbar);
  padding:0 var(--pad);flex:none}
.sb-mark .pip{width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 10px rgba(45,212,167,.55);flex:0 0 auto}
.sb-mark b{font:600 19px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.sb-mark b i{font-style:normal;color:var(--brand)}

.sb-nav{flex:1;overflow-y:auto;padding:14px 12px;display:flex;
  flex-direction:column;gap:2px;scrollbar-width:thin}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:9px 13px;
  border-radius:var(--r);color:var(--ink2);font:500 13.5px/1 var(--sans);
  position:relative;transition:background var(--t-hover) ease,color var(--t-hover) ease}
.sb-nav a:hover{background:rgba(190,222,228,.05);color:var(--ink)}
.sb-nav a[aria-current="page"]{background:rgba(45,212,167,.10);color:var(--ink)}
/* The lit rim from rule 3, as the active marker — a left edge that is a light
   source rather than a filled tab. */
.sb-nav a[aria-current="page"]::before{content:"";position:absolute;left:0;
  top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--brand);
  box-shadow:0 0 8px rgba(45,212,167,.7)}
.sb-nav a[aria-current="page"] .ic{color:var(--brand)}
.sb-sec{font:600 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:16px 13px 6px}
.sb-sec-secondary{margin-top:10px;padding-top:18px;border-top:1px solid var(--hair)}
.sb-nav a.sb-secondary{padding-top:7px;padding-bottom:7px;color:var(--mut);font-size:12.5px}
.sb-nav a.sb-secondary .ic{width:14px;height:14px;opacity:.72}
.sb-nav a.sb-secondary:hover{color:var(--ink2)}

/* Icons are 16px line-art in currentColor, drawn as CSS boxes rather than an
   icon font or an SVG sprite: ten glyphs is not worth a network request, and a
   font would arrive after first paint and shift the whole rail. */
.ic{width:16px;height:16px;flex:0 0 auto;position:relative;color:var(--mut);
  border:1.4px solid currentColor;border-radius:2px;transition:color var(--t-hover) ease}
.ic::after{content:"";position:absolute;background:currentColor}
.ic-grid::after{inset:3px;background:none;border-top:1.4px solid currentColor;
  border-left:1.4px solid currentColor}
.ic-live::after{left:2px;right:2px;bottom:2px;height:1.4px;
  box-shadow:0 -4px 0 -0.5px currentColor,0 -8px 0 -0.5px currentColor}
.ic-ai{border-radius:50%}
.ic-ai::after{inset:4px;border-radius:50%}
.ic-lab::after{left:3px;right:3px;top:6px;height:1.4px}
.ic-engine{border-radius:50%}
.ic-engine::after{left:6.5px;right:6.5px;top:2px;bottom:2px}
.ic-grade::after{left:3px;top:3px;width:5px;height:5px}
.ic-perf::after{left:2px;bottom:2px;width:3px;height:4px;
  box-shadow:5px -3px 0 currentColor,10px -6px 0 currentColor}
.ic-bell{border-radius:50% 50% 2px 2px}
.ic-bell::after{left:5px;bottom:-3px;width:4px;height:2px}
.ic-watch::after{inset:4px;border-radius:50%}
.ic-set{border-radius:50%}
.ic-set::after{inset:5px;border-radius:50%}

.sb-foot{flex:none;padding:12px;border-top:1px solid var(--hair)}

/* ---- top bar ---- */
.tb{height:var(--topbar);flex:none;display:flex;align-items:center;gap:12px;
  padding:0 var(--pad);border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:30;
  background:rgba(6,8,10,.86);backdrop-filter:blur(10px)}
.tb-sp{margin-left:auto}
.tb-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border:1px solid var(--hair2);border-radius:var(--r);color:var(--ink2);
  font:500 13px/1 var(--sans);background:linear-gradient(180deg,#0E141A,#0A0F14);
  transition:border-color var(--t-hover) ease,color var(--t-hover) ease}
.tb-chip:hover{border-color:rgba(45,212,167,.4);color:var(--ink)}
.tb-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 8px rgba(45,212,167,.6)}
.tb-icon{width:38px;height:38px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--hair2);border-radius:var(--r);
  color:var(--mut);transition:color var(--t-hover) ease,border-color var(--t-hover) ease}
.tb-icon:hover{color:var(--ink);border-color:rgba(45,212,167,.4)}

/* ---- content ---- */
.app-body{flex:1;padding:var(--pad) var(--pad) calc(var(--pulse-h) + 28px);
  min-width:0}

/* ---- market-led homepage --------------------------------------------- */
.market-hero{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(520px,1.28fr);
  min-height:calc(100dvh - var(--topbar) - var(--pulse-h) - 52px);align-items:stretch;
  border-bottom:1px solid var(--hair2);margin-bottom:30px}
.market-hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:32px clamp(24px,4vw,58px) 32px 0;border-right:1px solid var(--hair)}
.market-kicker{display:block;color:var(--brand);font:600 10px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.market-hero h1{max-width:12ch;margin:0;color:var(--ink);
  font:700 clamp(34px,4.2vw,62px)/.98 var(--sans);letter-spacing:-.045em}
.market-promise{margin:18px 0 26px;color:var(--ink2);
  font:500 clamp(19px,2vw,28px)/1.15 var(--sans)}
.market-support{margin:0;color:var(--mut);font:500 10.5px/1.5 var(--mono);
  letter-spacing:.07em;text-transform:uppercase}
.market-support span{margin:0 9px;color:var(--dim)}
.market-terminal{display:flex;flex-direction:column;justify-content:stretch;
  min-width:0;padding:clamp(22px,3vw,42px);background:var(--g1)}
.market-hold{padding:48px 24px;border:1px solid var(--hair);text-align:center;
  color:var(--mut);font:400 13px/1.6 var(--sans)}
.market-hold span{display:block;color:var(--ink2);font:600 10px/1 var(--mono);
  letter-spacing:.14em;margin-bottom:10px}
.mh-top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;
  padding-bottom:24px}
.mh-league{display:block;margin-bottom:8px;color:var(--mut);font:600 10px/1 var(--mono);
  letter-spacing:.15em;text-transform:uppercase}
.mh-match{font:600 clamp(21px,2.3vw,32px)/1.1 var(--sans);color:var(--ink)}
.mh-time{text-align:right;color:var(--mut);font:500 11px/1.5 var(--mono)}
.mh-context{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;border-top:1px solid var(--hair2)}
.mh-context span,.mh-best span{display:block;color:var(--mut);font:600 10px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.mh-context strong{font:700 clamp(22px,2.4vw,32px)/1 var(--mono);letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.mh-context em{font:500 13px/1.3 var(--sans);font-style:normal;color:var(--ink2)}
.mh-best{padding:20px 0 24px;border-bottom:1px solid var(--hair2)}
.mh-best b{display:block;color:var(--brand);
  font:700 clamp(64px,8vw,112px)/.82 var(--mono);letter-spacing:-.075em;
  font-variant-numeric:tabular-nums}
.mh-best i{display:block;margin-top:12px;color:var(--ink);font:600 18px/1.2 var(--sans)}
.mh-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;
  margin-top:8px}
.mh-quote{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  min-height:52px;color:var(--ink2);font:500 13px/1.25 var(--sans)}
.mh-quote:nth-child(n+3){border-top:1px solid var(--hair)}
.mh-quote b{color:var(--ink);font:700 18px/1 var(--mono);font-variant-numeric:tabular-nums}
.mh-quote.best{color:var(--brand)}.mh-quote.best b{color:var(--brand)}
.mh-foot{display:flex;align-items:center;gap:14px;margin-top:18px;color:var(--mut);
  font:500 10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.mh-foot b{color:var(--brand);font-weight:600}.mh-foot a{margin-left:auto;color:var(--ink)}

.price-principle,.watch-section,.record-gateway{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(54px,7vw,96px) 0;
  border-top:1px solid var(--hair2)}
.price-principle h2,.watch-section h2,.record-gateway h2,.final-action h2{
  margin:0;color:var(--ink);font:700 clamp(30px,3.8vw,52px)/1.03 var(--sans);
  letter-spacing:-.04em}
.return-compare{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair2)}
.return-compare>div{padding:22px 0;border-bottom:1px solid var(--hair)}
.return-compare>div+div{padding-left:24px;border-left:1px solid var(--hair)}
.rc-label{display:block;color:var(--mut);font:600 10px/1 var(--mono);letter-spacing:.12em}
.return-compare strong{display:block;margin:12px 0 5px;color:var(--ink);
  font:700 clamp(27px,3vw,42px)/1 var(--mono);font-variant-numeric:tabular-nums}
.return-compare>div:last-of-type strong{color:var(--brand)}
.return-compare small{color:var(--mut);font:500 11px/1 var(--sans)}
.return-compare p{grid-column:1/-1;margin:0;padding:18px 0;color:var(--ink2);
  font:400 14px/1.5 var(--sans)}.return-compare p b{color:var(--brand)}
.watch-copy p,.record-copy p,.final-action p{max-width:52ch;color:var(--ink2);
  font:400 15px/1.65 var(--sans);margin:18px 0 24px}
.alert-terminal{border:1px solid var(--hair2);background:var(--g1);padding:26px}
.alert-label{display:block;color:var(--brand);font:600 10px/1 var(--mono);
  letter-spacing:.14em;margin-bottom:17px}.alert-terminal p{margin:0;color:var(--mut)}
.alert-move{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;
  padding:16px 0;border-top:1px solid var(--hair)}
.alert-move:first-of-type{border-top:0}.alert-move span{color:var(--ink2);
  font:500 12px/1.4 var(--sans)}.alert-move b{color:var(--ink);
  font:700 18px/1 var(--mono);font-variant-numeric:tabular-nums}
.alert-meta{display:flex;justify-content:space-between;gap:12px;padding-top:16px;
  border-top:1px solid var(--hair);color:var(--mut);font:500 10px/1.4 var(--mono)}
.record-number strong{display:block;color:var(--ink);font:700 clamp(72px,10vw,150px)/.82 var(--mono);
  letter-spacing:-.08em;font-variant-numeric:tabular-nums}
.record-number span{display:block;margin-top:20px;color:var(--mut);font:600 10px/1 var(--mono);
  letter-spacing:.15em}.final-action{padding:clamp(64px,9vw,120px) 0 72px;
  border-top:1px solid var(--hair2)}
.final-action h2{max-width:15ch}.final-action .dash-cta{margin-bottom:0}

/* ---- hero ---- */
.dash-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:32px;align-items:center;margin-bottom:26px}
.dash-hero h1{font:700 clamp(30px,3.6vw,46px)/1.06 var(--sans);
  letter-spacing:-.035em;text-transform:uppercase;margin:0 0 16px}
.dash-hero h1 span{display:block;color:var(--brand)}
.dash-hero .lede{color:var(--ink2);font:400 15px/1.6 var(--sans);max-width:46ch;
  margin-bottom:22px}
.dash-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;
  border-radius:var(--r);font:600 14px/1 var(--sans);
  transition:filter var(--t-hover) ease,border-color var(--t-hover) ease,
    background var(--t-hover) ease}
.btn-p{background:linear-gradient(180deg,var(--brand-hi),var(--brand));
  color:var(--g0);box-shadow:0 0 22px -8px rgba(45,212,167,.7)}
.btn-p:hover{filter:brightness(1.07);color:var(--g0)}
.btn-s{border:1px solid var(--hair2);color:var(--ink)}
.btn-s:hover{border-color:rgba(45,212,167,.45)}
.dash-trust{display:flex;align-items:flex-start;gap:11px;color:var(--ink2);
  font:400 13px/1.55 var(--sans)}
.dash-trust b{color:var(--ink);font-weight:600}
.dash-shield{width:22px;height:22px;flex:0 0 auto;border:1.5px solid var(--brand);
  border-radius:3px 3px 11px 11px;position:relative;margin-top:1px}
.dash-shield::after{content:"";position:absolute;left:5px;top:6px;width:7px;
  height:4px;border-left:1.5px solid var(--brand);border-bottom:1.5px solid var(--brand);
  transform:rotate(-45deg)}
/* ---- the hero render, with live text inside it ----------------------
   assets/slab.jpg is the ice and the empty screen cavity; the copy on that
   screen is real HTML laid over it. Nothing is baked in: baked type is soft on
   a retina display, unselectable, invisible to a screen reader and a crawler,
   and stale the moment a word changes — and the words on this screen are the
   product's positioning, which has been rewritten twice already.

   .dash-art carries the plate at the render's own 16:10. The aspect ratio is
   load-bearing, not decoration: the overlay is positioned in PERCENTAGES of
   this box, so if the box stops matching the render the text slides off the
   glass. */
.dash-art{position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--hair);background:var(--g0) center/cover no-repeat;
  aspect-ratio:16/10;min-height:230px}

/* THESE FOUR NUMBERS COME FROM THE RENDER, NOT FROM TASTE.
   tools/render_slab.py projects the screen plane's corners through the camera
   and prints SCREEN_RECT_PCT at the end of every run. Paste that line here.
   Re-render with the camera moved and it reprints; hand-tuning these instead
   is how the text ends up a few pixels off the cavity on one viewport and
   badly off on another. */
.hero-screen{position:absolute;left:25.74%;top:26.08%;
  width:48.97%;height:44.50%;
  display:flex;flex-direction:column;justify-content:center;
  padding:2.4% 3.2%;container-type:inline-size}
/* Type scales with the plate, so the overlay holds at every width. cqw is a
   percentage of THIS box, which is the only unit that stays locked to the
   render as the column resizes. */
.hero-screen .hs-mark{font:600 clamp(11px,7.2cqw,30px)/1 var(--sans);
  letter-spacing:-.02em;color:var(--ink)}
.hero-screen .hs-mark i{font-style:normal;color:var(--brand)}
.hero-screen .hs-sub{font:600 clamp(6px,2.5cqw,11px)/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--frost);
  opacity:.75;margin-top:2.5%}
.hero-screen ul{list-style:none;margin:6% 0 0;display:flex;
  flex-direction:column;gap:2.4%}
.hero-screen li{display:flex;align-items:center;gap:2.6%;
  font:500 clamp(6px,2.6cqw,12px)/1.25 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2)}
.hero-screen li::before{content:"";width:clamp(3px,1.1cqw,5px);
  height:clamp(3px,1.1cqw,5px);border-radius:50%;background:var(--brand);
  flex:0 0 auto;box-shadow:0 0 6px rgba(45,212,167,.7)}

/* Below the shell's breakpoint the plate is small enough that the overlay type
   would be under 9px. The screen keeps its glow and the words move out. */
@media (max-width:620px){
  .hero-screen{display:none}
}

/* ---- stat strip ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#0C1116,#080C10);margin-bottom:22px}
.stat{padding:16px 20px;border-right:1px solid var(--hair);min-width:0}
.stat:last-child{border-right:0}
.stat .k{display:block;color:var(--mut);font:500 11.5px/1.3 var(--sans);
  margin-bottom:7px}
.stat .v{font:700 26px/1.05 var(--sans);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:block}
.stat .v.up{color:var(--brand)}
.stat .v.dn{color:var(--dn)}
.stat .sub{display:block;color:var(--dim);font:500 11px/1.4 var(--mono);
  margin-top:6px;letter-spacing:.04em}
.stat.pending .v{color:var(--dim)}

/* ---- panels ---- */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;margin-bottom:22px}
.panel{border:1px solid var(--hair);border-radius:var(--r);min-width:0;
  background:linear-gradient(180deg,#0C1116,#080C10);
  box-shadow:inset 0 1px 0 rgba(190,240,245,.05)}
.panel-h{display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid var(--hair)}
.panel-h h2{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);margin:0}
.panel-h .more{margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand)}
.panel-h .more:hover{color:var(--brand-hi)}
.panel-b{padding:16px 18px}

/* rows inside a panel */
.prow{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--hair);min-width:0}
.prow:last-child{border-bottom:0}
.prow:first-child{padding-top:0}
.prow .nm{min-width:0;flex:1}
/* Wraps to a second line rather than clipping. With a crest beside each side
   a matchup is wide, and an ellipsis mid-team-name ("Minnesota Timberwolves…")
   removes the one piece of information the row exists to carry. Two lines is
   cheaper than a truncated name. */
.prow .nm b{display:block;font:600 13.5px/1.35 var(--sans);color:var(--ink);
  overflow-wrap:anywhere}
.prow .nm i{display:block;font-style:normal;color:var(--mut);
  font:500 11px/1.4 var(--mono);letter-spacing:.04em;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .rt{text-align:right;flex:0 0 auto}
.prow .rt b{display:block;font:700 14px/1.2 var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums}
.prow .rt b.up{color:var(--brand)}
.prow .rt b.dn{color:var(--dn)}
.prow .rt i{display:block;font-style:normal;color:var(--dim);
  font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;margin-top:3px}

/* metric bars — the calibration panel */
.mrow{display:grid;grid-template-columns:1fr auto;gap:6px 12px;
  align-items:baseline;padding:9px 0}
.mrow .lb{color:var(--ink2);font:500 13px/1.4 var(--sans)}
.mrow .vv{font:700 13px/1 var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums}
.mrow .bar{grid-column:1/-1;height:4px;border-radius:2px;
  background:rgba(190,222,228,.09);overflow:hidden}
.mrow .bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-hi))}
.mrow .bar i.warn{background:linear-gradient(90deg,#8A6D2F,var(--amber))}
.mrow .note{grid-column:1/-1;color:var(--dim);font:500 10.5px/1.45 var(--mono);
  letter-spacing:.03em;margin-top:2px}

/* ---- pulse ticker ---- */
.pulse{position:fixed;left:var(--sb);right:0;bottom:0;height:var(--pulse-h);
  display:flex;align-items:center;gap:16px;padding:0 var(--pad);z-index:35;
  border-top:1px solid var(--hair);background:rgba(8,12,16,.92);
  backdrop-filter:blur(10px)}
.pulse-t{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  color:var(--brand);font:600 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase}
.pulse-t .wv{width:14px;height:9px;border-left:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor}
/* The feed scrolls horizontally on purpose and the page never does: this is a
   row of RECORDS, and the next record being off-screen is normal. No FIELD is
   ever placed off-screen. */
.pulse-f{flex:1;display:flex;gap:22px;overflow-x:auto;min-width:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pulse-f::-webkit-scrollbar{display:none}
.pulse-i{display:inline-flex;align-items:baseline;gap:9px;flex:0 0 auto;
  color:var(--ink2);font:400 12.5px/1 var(--sans);white-space:nowrap}
.pulse-i em{font-style:normal;color:var(--dim);font:500 10.5px/1 var(--mono);
  letter-spacing:.06em}

/* ---- states ---- */
.pstate{padding:22px 0;text-align:center;color:var(--mut);
  font:400 13px/1.6 var(--sans)}
.pstate .tl{display:block;margin-bottom:6px}
.sk{height:11px;border-radius:2px;background:rgba(190,222,228,.07);
  animation:sk 1.4s ease-in-out infinite}
@keyframes sk{50%{background:rgba(190,222,228,.13)}}

/* ---- responsive ------------------------------------------------------
   The rail collapses to a top row rather than a hamburger. Ten destinations
   behind a toggle is a menu nobody opens; ten across a scrolling row is a
   thing people swipe. Same reasoning as the sport rail on the board. */
@media (max-width:1100px){
  .dash-hero{grid-template-columns:1fr}
  .dash-art{order:-1;min-height:200px}
  .market-hero{grid-template-columns:1fr;min-height:auto}
  .market-hero-copy{border-right:0;border-bottom:1px solid var(--hair);
    padding:46px 0 34px}.market-hero h1{max-width:15ch}
}
@media (max-width:860px){
  :root{--pad:15px}
  .app{grid-template-columns:1fr}
  /* Column, not row. Sharing one 375px line with the wordmark left the rail
     251px wide for ten destinations — measured — so most of the nav was
     off-screen behind a scroll nobody would guess was there. Stacked, the
     wordmark keeps its line and the rail gets the full width. */
  .sb{position:static;height:auto;border-right:0;
    border-bottom:1px solid var(--hair);overflow:hidden}
  .sb-mark{height:52px}
  .sb-nav{flex-direction:row;overflow-x:auto;padding:8px 10px;gap:4px;
    scrollbar-width:none}
  .sb-nav::-webkit-scrollbar{display:none}
  .sb-nav a{flex:0 0 auto;padding:9px 12px}
  .sb-nav a[aria-current="page"]::before{top:auto;bottom:0;left:8px;right:8px;
    width:auto;height:2px}
  .sb-sec,.sb-foot{display:none}
  .tb{position:static}
  .pulse{left:0}
  .dash-hero h1{font-size:clamp(26px,7vw,34px)}
  .stat{border-right:0;border-bottom:1px solid var(--hair)}
  .stat:last-child{border-bottom:0}
  .price-principle,.watch-section,.record-gateway{grid-template-columns:1fr}
}

/* Dashboard sport filter: the ALL pill and desk.js's league rail read as one
   control, so they share a row. #sportRail is the shared component and is left
   entirely alone; only the row around it belongs to this page. */
.d-rail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.d-rail #sportRail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  position:relative;min-width:0}

/* One-line glossary above the board. Quiet enough that a returning visitor
   reads past it, present enough that a first-time one is not guessing.
   --mut, not --dim: measured against --g1, --dim is 3.04:1 and --mut is
   5.60:1. This is the one paragraph on the page a newcomer has to read, so
   setting it in the site's quietest colour would have failed the people it
   exists for - and 4.5:1 is the AA floor for body text. The three terms take
   --ink because they are what the eye should land on. */
.legend{margin:0 0 16px;max-width:92ch;color:var(--mut);
  font:400 12.5px/1.7 var(--sans)}
.legend b{color:var(--ink);font:600 11px/1 var(--mono);letter-spacing:.08em}