/* =============================================================================
   BetSmart research desk — app layout (loaded after stats.css)
   Dense, data-first, dark. Uses the site's tokens; forces the dark set on the desk.
   ============================================================================= */

/* The dark token set lives in styles.css (":root, body.desk-app"). It used to
   be retyped here inside a light-mode media query, which meant two palettes to
   keep in step — and they had already drifted. Only the bits that are not
   colour values stay. */
@media (prefers-color-scheme: light) {
  body.desk-app{ color-scheme: dark; }
  body.desk-app .nav{ background:color-mix(in srgb, var(--bg) 85%, transparent); }
}
body.desk-app{ background:var(--bg); color:var(--text-hi); }
.desk-app .container{ max-width:1480px; }
.desk-app .sd-body{ padding-block:var(--s4) var(--s7); min-height:70vh; }

/* ---------------------------------------------------------- slim strip */
.desk-strip{ border-bottom:1px solid var(--line); background:var(--surface); }
.desk-strip-in{ display:flex; align-items:center; gap:var(--s3); min-height:44px; flex-wrap:wrap; padding-block:6px; }
.desk-title{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:1rem; }
.desk-strip .badge{ padding:.22rem .6rem; font-size:.62rem; }
.demo-pill{ margin-left:auto; font-size:.78rem; color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); padding:.2rem .7rem; border-radius:100px; }
.demo-pill a{ color:var(--text-hi); text-decoration:underline; text-underline-offset:2px; margin-left:6px; }

/* ---------------------------------------------------------- control bar, tighter */
.desk-app .sd-bar{ top:66px; background:color-mix(in srgb, var(--bg) 92%, transparent); }
.desk-app .sd-bar-in{ padding-block:8px; }
.desk-app .sd-tabs button, .desk-app .sport button{ padding:.36rem .85rem; font-size:.84rem; }
.desk-app .daystrip button{ min-width:48px; padding:4px 6px; }

/* ---------------------------------------------------------- matches layout */
.mx{ display:grid; grid-template-columns:272px minmax(0,1fr); gap:var(--s4); align-items:start; }
.mx-side{ position:sticky; top:136px; max-height:calc(100vh - 150px); overflow-y:auto; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface); scrollbar-width:thin; }
.mx-side-search{ padding:8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:1; }
.mx-side-search input{ width:100%; font:inherit; font-size:.84rem; color:var(--text-hi); background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; outline:0; }
.mx-side-search input:focus{ border-color:var(--brand); }
.mx-league-h{ display:flex; justify-content:space-between; padding:8px 12px 4px; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); background:var(--surface-2); border-bottom:1px solid var(--line); }
.mx-fx{ display:grid; grid-template-columns:40px 1fr 8px; gap:8px; align-items:center; width:100%; text-align:left;
  padding:7px 12px; border-bottom:1px solid var(--line); border-left:3px solid transparent; cursor:pointer; }
.mx-fx:hover{ background:var(--surface-2); }
.mx-fx.on{ background:color-mix(in srgb, var(--brand) 14%, var(--surface)); border-left-color:var(--brand); }
.mx-fx .t{ font-family:var(--mono); font-size:.74rem; color:var(--text-mid); display:grid; line-height:1.2; }
.mx-fx .t small{ font-size:.58rem; color:var(--text-lo); text-transform:uppercase; }
.mx-fx .teams{ display:grid; min-width:0; }
.mx-fx .teams b{ font-weight:500; font-size:.84rem; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lu-dot{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
.lu-dot.conf{ background:var(--accent); }
.lu-dot.exp{ background:none; box-shadow:inset 0 0 0 1.5px var(--accent); }
.mx-none{ padding:12px; }

.mx-main{ min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); }
.mx-head{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:12px 16px 0; }
.mx-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-lo); }
.mx-meta .lu.conf{ color:var(--accent-ink); }
.mx-meta b{ color:var(--warn); }
.mx-teams{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4); padding:12px 0 10px; }
.mx-t{ display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
.mx-t.aw{ justify-content:flex-end; }
.mx-t .tlink b{ font-family:var(--display); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:700; letter-spacing:-.025em; }
.mx-v{ font-family:var(--mono); color:var(--text-lo); font-size:.8rem; }
.mx-form{ display:inline-flex; gap:3px; }
.mx-form i{ font-style:normal; font-family:var(--mono); font-size:.62rem; font-weight:700; width:18px; height:18px; display:grid;
  place-items:center; border-radius:4px; background:var(--surface-3); color:var(--text-lo); }
.mx-form i.W{ background:color-mix(in srgb, var(--pos) 22%, transparent); color:var(--pos); }
.mx-form i.L{ background:color-mix(in srgb, var(--neg) 20%, transparent); color:var(--neg); }
.mx-subs{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; border-top:1px solid var(--line); margin:0 -16px; padding:0 8px; }
.mx-subs button{ padding:10px 12px; font-size:.84rem; color:var(--text-mid); border-bottom:2px solid transparent; white-space:nowrap; }
.mx-subs button:hover{ color:var(--text-hi); }
.mx-subs button[aria-selected="true"]{ color:var(--text-hi); border-bottom-color:var(--brand); font-weight:600; }

/* tools row */
.mx-tools{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.mx-tools .seg{ padding:2px; border-radius:8px; }
.mx-tools .seg button{ padding:.28rem .55rem; font-size:.76rem; border-radius:6px; }
.stepper.sm button{ width:28px; height:28px; font-size:1rem; }
.stepper.sm output{ min-width:2.6rem; font-size:.84rem; }
.mx-tools .chk{ font-size:.78rem; }
.mx-note{ margin:0; }

/* squads */
.mx-squad{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; min-width:0; }
.mx-squad-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:9px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.mx-squad-h b{ font-family:var(--display); font-size:1rem; font-weight:700; letter-spacing:-.015em; }
.mx-squad-h > span{ font-size:.74rem; color:var(--text-lo); }
.mx-key{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.7rem !important; }
.mx-key .c{ width:18px; height:18px; font-size:.64rem; }
.mx-scroll{ overflow-x:auto; }
.mx-two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (max-width:1200px){ .mx-two{ grid-template-columns:1fr; } }

/* dense table */
.mx-table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.mx-table th{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-lo);
  font-weight:500; text-align:right; padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface); }
.mx-table th button{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
.mx-table th.on{ color:var(--text-hi); }
.mx-table th.l, .mx-table td.l{ text-align:left; }
.mx-table th.g, .mx-table td.g{ padding-inline:1px; text-align:center; width:26px; }
.mx-table tr.sub th{ font-size:.56rem; padding-top:0; }
.mx-table td{ padding:5px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.mx-table tbody tr:last-child td{ border-bottom:0; }
.mx-table tbody tr[data-row]{ cursor:pointer; }
.mx-table tbody tr:hover td{ background:var(--surface-2); }
.mx-table td.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.mx-table td.dim{ color:var(--text-mid); }
.mx-table td.hl{ color:var(--warn); font-weight:700; }
.mx-pl{ text-align:left !important; position:sticky; left:0; background:var(--surface); z-index:1; min-width:170px; }
.mx-table th:first-child{ position:sticky; left:0; z-index:2; }
.mx-pl b{ font-weight:600; font-size:.84rem; }
.mx-pl .pos-tag{ font-size:.56rem; }
.mx-pl .xi, .mx-pl .bench{ font-family:var(--mono); font-size:.56rem; letter-spacing:.06em; margin-left:6px; }
.mx-pl .bench{ color:var(--text-lo); }
.c{ display:inline-grid; place-items:center; width:24px; height:22px; border-radius:4px; font-family:var(--mono);
  font-size:.72rem; font-weight:600; background:color-mix(in srgb, var(--text-lo) 13%, transparent); color:var(--text-mid); }
.c.hit{ background:color-mix(in srgb, var(--accent) 24%, transparent); color:var(--accent-ink); }
.c.sub{ box-shadow:inset 0 -2px 0 var(--warn); }
.c.gap{ background:none; border:1px dashed var(--line); }
.c.na{ opacity:.5; }
.hitc b{ font-size:.86rem; }
.hitc small{ color:var(--text-lo); font-size:.64rem; margin-left:5px; }
/* A rate cell: the rate (or k/n), then k/n and the 95% range, or "too few to rate". */
.rt{ display:inline-grid; justify-items:end; gap:1px; line-height:1.2; }
.rt b{ font-family:var(--mono); }
.rt small{ font-family:var(--mono); font-size:.6rem; color:var(--text-lo); white-space:nowrap; margin-left:0; }
.rt.few b{ color:var(--text-mid); font-weight:500; }
.rt.none{ color:var(--text-lo); }
.tile .ci{ font-family:var(--mono); font-size:.62rem; color:var(--text-lo); }
.heat{ background:color-mix(in srgb, var(--brand) var(--h,0%), transparent); }
.res.W{ color:var(--pos); } .res.L{ color:var(--neg); }
.mx-ref-h{ display:flex; gap:12px; align-items:baseline; margin-bottom:8px; }
.mx-ref-h b{ font-family:var(--display); font-size:1.2rem; }
.mx-ref-h span{ color:var(--text-lo); font-size:.8rem; }

/* ---------------------------------------------------------- phones + tablets */
@media (max-width:980px){
  .mx{ grid-template-columns:minmax(0,1fr); }
  .mx-side{ min-width:0; }
  .mx-side{ position:static; max-height:none; display:flex; overflow-x:auto; overflow-y:hidden; border-radius:var(--r-md); }
  .mx-league{ display:contents; }
  .mx-league-h{ display:none; }
  .mx-side-search{ display:none; }
  .mx-fx{ flex:0 0 176px; border-bottom:0; border-right:1px solid var(--line); border-left:0; border-top:3px solid transparent; }
  .mx-fx.on{ border-top-color:var(--brand); }
  .mx-teams{ grid-template-columns:1fr; gap:6px; }
  .mx-t.aw{ justify-content:flex-start; }
  .mx-v{ display:none; }
  .mx-key{ margin-left:0; }
}
@media (max-width:640px){
  .desk-app .sd-bar{ position:static; }
  .demo-pill{ margin-left:0; }
  .mx-pl{ min-width:140px; }
}

/* fixes: site-wide section padding, wrapping tool rows on phones */
.desk-app .mx-squad{ padding-block:0; }
.mx-tools .seg{ flex-wrap:wrap; max-width:100%; }
.mx-table.cmpt{ max-width:720px; }
.mx-table.cmpt th[colspan]{ text-align:center; color:var(--text-hi); }
/* Team stats on a phone: with each average's range under it the table scrolls sideways
   (570 wide in a 327 box at 375px), so each row's label sticks, opaque, beside the sticky
   corner; each For/Against header names its side (tnSubTh). */
.mx-table.cmpt td.l{ position:sticky; left:0; z-index:1; background:var(--surface); }
.mx-table.cmpt tbody tr:hover td.l{ background:var(--surface-2); }
.mx-meta span{ white-space:nowrap; }
/* The referee line wraps on a phone (it ran to x 468 at 375px, cut off before its n), but only
   between its parts: each part is a span, kept whole by the rule above, and each part after the
   name opens on its "·" (refPart), so a line breaks before a dot, never after one. */
.mx-meta .mx-ref{ white-space:normal; }
@media (max-width:640px){
  .mx-tools{ gap:6px; }
  .mx-head{ padding:10px 12px 0; }
  .mx-subs{ margin:0 -12px; }
}

/* =========================================================== squad grid */
.gside .mx-side-search select{ width:100%; font:inherit; font-size:.86rem; font-weight:600; color:var(--text-hi); background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; }
.gstat{ display:block; width:100%; text-align:left; padding:7px 14px; font-size:.84rem; color:var(--text-mid); border-left:3px solid transparent; }
.gstat:hover{ color:var(--text-hi); background:var(--surface-2); }
.gstat.on{ color:var(--text-hi); font-weight:600; border-left-color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.gmore{ padding:10px 14px 14px; line-height:1.5; }
.ghead{ padding-bottom:12px; }
.gtitle{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin:8px 0 12px; letter-spacing:-.03em; }
.gtitle span{ color:var(--text-mid); font-weight:500; }
.gnext{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); }
.gnext:hover{ text-decoration:underline; }
.gf .gl, .gtools .gl{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-lo); padding:0 6px 0 10px; }
.gtools .stepper.sm{ align-items:center; }

.gscroll{ max-height:calc(100vh - 170px); overflow:auto; }
.gtable{ border-collapse:separate; border-spacing:0; font-size:.78rem; min-width:100%; }
.gtable th, .gtable td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:0; white-space:nowrap; background:var(--surface); }
.gtable thead th{ position:sticky; top:0; z-index:3; font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-lo); padding:6px 6px; vertical-align:bottom; background:var(--surface-2); }
.gtable thead th button{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
.gtable thead th.on{ color:var(--text-hi); }
/* frozen left block: player · GP · avg · p90 · hits */
.gtable .gp{ position:sticky; left:0; z-index:2; min-width:190px; max-width:190px; padding:0 10px; text-align:left; overflow:hidden; text-overflow:ellipsis; }
.gtable .ga{ position:sticky; left:190px; z-index:2; width:40px; min-width:40px; text-align:center; }
.gtable .gv{ position:sticky; z-index:2; width:52px; min-width:52px; text-align:center; font-weight:700; }
.gtable th.gv:nth-child(3), .gtable td.gv:nth-child(3){ left:230px; }
.gtable th.gv:nth-child(4), .gtable td.gv:nth-child(4){ left:282px; color:var(--brand-soft); }
.gtable .gh{ position:sticky; left:334px; z-index:2; width:52px; min-width:52px; text-align:center; color:var(--accent-ink); border-right:2px solid var(--line-strong); }
.gtable thead .gp, .gtable thead .ga, .gtable thead .gv, .gtable thead .gh{ z-index:4; }
.gtable td.gp b{ font-weight:600; font-size:.82rem; }
.gtable td.gp .pos-tag{ font-size:.54rem; }
.gtable td.gp .xi{ font-family:var(--mono); font-size:.54rem; color:var(--accent-ink); margin-left:6px; }
.gtable td.gp .xi.exp{ color:var(--text-lo); }
.gtable tbody tr{ height:44px; cursor:pointer; }
.gtable tbody tr:hover td{ background:var(--surface-2); }
.gtable th.gm{ width:58px; min-width:58px; text-align:center; padding:6px 2px; }
.gm span{ display:block; line-height:1.35; }
.gm .gd{ color:var(--text-lo); }
.gm .go{ color:var(--text-hi); font-weight:600; font-size:.66rem; }
.gm .ha{ font-style:normal; margin-left:3px; color:var(--text-lo); font-size:.56rem; }
.gm .gs{ margin-top:3px; border-radius:4px; font-weight:700; color:var(--text-mid); background:var(--surface-3); }
.gm .gs.W{ color:var(--on-accent); background:var(--pos); } .gm .gs.L{ color:#fff; background:var(--neg); }
.gc{ position:relative; width:58px; min-width:58px; height:44px; text-align:center; }
.gc.played{ background:color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.gc.sub{ background:color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.gc.hit{ background:color-mix(in srgb, var(--accent) 26%, var(--surface)); }
.gc.hit .gval{ color:var(--accent-ink); }
.gc.dim{ opacity:.45; }
.gc.none{ background:var(--bg); }
.gc .gval{ font-family:var(--mono); font-size:.95rem; font-weight:700; line-height:44px; color:var(--text-hi); }
.gc .gval em{ font-style:normal; color:var(--text-lo); font-weight:500; }
.gc .gmin{ position:absolute; top:2px; right:4px; font-family:var(--mono); font-size:.52rem; color:var(--text-lo); line-height:1; }
.gc .grole{ position:absolute; bottom:2px; left:0; right:0; font-family:var(--mono); font-size:.5rem; color:var(--text-lo); line-height:1; letter-spacing:.03em; }
.gc .yc, .gkey .yc{ position:absolute; bottom:4px; left:4px; width:6px; height:9px; border-radius:1px; background:var(--warn); }
.gteamrow td{ background:var(--surface-2) !important; height:34px; font-weight:700; }
.gc.tot{ font-family:var(--mono); height:34px; }
.gkey{ display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 14px; font-size:.72rem; color:var(--text-lo); border-top:1px solid var(--line); }
.gkey span{ display:inline-flex; align-items:center; gap:6px; position:relative; }
.gkey .k{ width:14px; height:14px; border-radius:3px; background:color-mix(in srgb, var(--brand) 9%, var(--surface)); border:1px solid var(--line-strong); }
.gkey .k.hit{ background:color-mix(in srgb, var(--accent) 26%, var(--surface)); }
.gkey .k.sub{ background:color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.gkey .k.none{ background:var(--bg); }
.gkey .yc{ position:static; }

/* =========================================================== ranked side-by-side */
.rk{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:14px 14px 16px; }
.rk-cap{ text-align:center; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); margin-bottom:8px; }
.rk-teams{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.rk-teams b{ font-family:var(--display); font-size:1rem; }
.rk-teams b:first-child{ text-align:right; padding-right:66px; }
.rk-teams b:last-child{ padding-left:66px; }
.rk-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rk-cell{ display:flex; align-items:center; gap:10px; padding:4px 0; cursor:pointer; min-width:0; }
.rk-cell.hm{ justify-content:flex-end; text-align:right; }
.rk-cell.aw{ flex-direction:row-reverse; justify-content:flex-end; }
.rk-cell:hover .rk-name b{ color:var(--brand-soft); }
.rk-name{ display:grid; min-width:0; }
.rk-name b{ font-weight:600; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-name small{ font-family:var(--mono); font-size:.58rem; color:var(--text-lo); }
.rk-val{ flex:none; width:56px; height:32px; display:grid; place-items:center; border-radius:6px; font-family:var(--mono); font-weight:700; font-size:.95rem;
  background:color-mix(in srgb, var(--brand) calc(var(--w) * .45), var(--surface-2)); }
.rk-links{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
/* Per 90: the range and n under the name, a too-few row with no number (review round 2). */
.rk-name small.rk-ci{ color:var(--text-mid); }
.rk-ci span{ white-space:nowrap; }
.rk-val.none{ color:var(--text-lo); font-weight:500; }
.rk-note{ margin:10px 0 0; text-align:center; }
@media (max-width:640px){
  .rk-teams b:first-child{ padding-right:0; } .rk-teams b:last-child{ padding-left:0; }
  .rk-name small{ display:none; }
  .rk-name small.rk-ci{ display:block; }
  .rk-val{ width:44px; }
}

/* =========================================================== pitch lineups */
.pl-card{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; }
.pitch{ position:relative; margin:12px; border-radius:10px; padding:18px 8px; display:grid; gap:18px;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 6%, var(--surface-2)) 0 44px, color-mix(in srgb, var(--accent) 3%, var(--surface-2)) 44px 88px);
  border:1px solid var(--line-strong); }
.pl-line{ display:flex; justify-content:space-evenly; gap:6px; }
.pl-node{ display:grid; justify-items:center; gap:4px; min-width:0; flex:1; max-width:110px; }
.pl-v{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:.86rem;
  background:var(--surface); border:2px solid var(--line-strong); color:var(--text-hi); }
.pl-v.hi{ border-color:var(--accent); color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.pl-n{ font-size:.72rem; font-weight:600; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
@media (max-width:640px){ .pl-v{ width:40px; height:40px; font-size:.76rem; } .pl-n{ font-size:.64rem; } }

@media (max-width:980px){
  .gside .mx-side-search{ display:block; flex:0 0 160px; position:static; border-bottom:0; border-right:1px solid var(--line); }
  .gside .gstat{ flex:0 0 auto; width:auto; white-space:nowrap; border-left:0; border-top:3px solid transparent; padding:10px 12px; }
  .gside .gstat.on{ border-top-color:var(--brand); }
  .gmore{ display:none; }
  .gscroll{ max-height:none; }
}
@media (max-width:640px){
  .gtable .gp{ min-width:124px; max-width:124px; padding:0 6px; }
  .gtable .gp .pos-tag, .gtable .gp .xi{ display:none; }
  .gtable .ga, .gtable .gv, .gtable .gh{ position:static; }
  .gtable .gh{ border-right:1px solid var(--line); }
}

/* =========================================================== prices */
.odds-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-mid); cursor:pointer; margin-left:auto; }
.odds-toggle input{ accent-color:var(--accent); }
.odds-toggle + .demo-pill{ margin-left:0; }
.px{ display:inline-block; min-width:44px; padding:2px 6px; border-radius:5px; font-family:var(--mono); font-weight:700; font-size:.82rem; text-align:center;
  background:color-mix(in srgb, var(--warn) 14%, var(--surface-2)); color:var(--text-hi); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.px.none{ background:none; border-color:transparent; color:var(--text-lo); font-weight:400; }
.pximp{ display:block; font-family:var(--mono); font-size:.6rem; color:var(--text-lo); margin-top:1px; }
.oddtd .px{ min-width:40px; }
.oddtd .pximp{ display:inline; margin-left:4px; }
.odds-note{ font-size:.72rem; color:var(--text-lo); line-height:1.55; margin:10px 2px 0; }
.odds-note a{ color:var(--text-mid); text-decoration:underline; }
.rk-px{ font-style:normal; color:var(--warn); font-weight:700; }
/* player finder with a price column */
.prop-table.with-odds .pr{ grid-template-columns:minmax(170px,1.5fr) minmax(125px,1fr) minmax(200px,1.5fr) 112px 54px 88px 108px 78px; }
@media (max-width:980px){ .prop-table.with-odds .pr{ grid-template-columns:minmax(150px,1.4fr) minmax(200px,1.6fr) 110px 100px 76px; } }
@media (max-width:640px){
  .prop-table.with-odds .pr.row{ grid-template-columns:1fr auto; grid-template-areas:"pl hit" "chips chips" "opp odds"; }
  .prop-table.with-odds .pr .oddsc{ grid-area:odds; text-align:right; }
  .prop-table.with-odds .pr .oddsc::before{ content:attr(data-l); display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); margin-bottom:3px; }
}
/* grid price column (frozen, after the hit column) */
.gtable .godds{ position:sticky; left:386px; z-index:2; width:70px; min-width:70px; text-align:center; border-right:2px solid var(--line-strong); }
.gtable thead .godds{ z-index:4; }
.gtable .godds .pximp{ margin-top:0; }
.gtable .gh{ border-right:1px solid var(--line); }
@media (max-width:640px){ .gtable .godds{ position:static; } }

/* =========================================================== grid filter panel */
.gfilters{ display:grid; grid-template-columns:repeat(4, minmax(0,auto)); justify-content:start; gap:14px 36px; padding:4px 0 12px; }
.gf{ display:grid; align-content:start; gap:6px; }
.gf .chk.sw{ font-size:.8rem; }
.gf .chk small{ color:var(--text-lo); margin-left:2px; }
.gf .sd-select select{ max-width:none; }
.greset{ justify-self:start; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-soft); margin-top:4px; }
.greset:hover{ text-decoration:underline; }
@media (max-width:1100px){ .gfilters{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .gfilters{ grid-template-columns:1fr; gap:12px; } }

/* =========================================================== shot maps */
.sm-card .mx-squad-h{ align-items:center; }
.sm-who{ margin-left:auto; }
.sm-who select{ font-size:.78rem; padding:.3rem 1.8rem .3rem .7rem; }
.shotmap{ display:block; width:100%; max-width:520px; margin:12px auto 4px; }
.shotmap .pl{ fill:none; stroke:var(--line-strong); stroke-width:.35; }
.shotmap rect.pl:first-child{ fill:color-mix(in srgb, var(--accent) 4%, var(--surface-2)); }
.shotmap .gl{ fill:var(--text-mid); }
.shotmap .spot{ fill:var(--line-strong); }
.sh{ stroke-width:.35; }
circle.sh.goal{ fill:var(--accent); stroke:var(--bg); }
circle.sh.saved{ fill:color-mix(in srgb, var(--brand) 75%, transparent); stroke:var(--bg); }
circle.sh.blocked{ fill:color-mix(in srgb, var(--text-lo) 70%, transparent); stroke:var(--bg); }
circle.sh.off{ fill:none; stroke:var(--text-mid); stroke-width:.4; }
.sm-tiles{ margin:8px 12px 14px; grid-template-columns:repeat(6,1fr); }
.sm-tiles .tile{ padding:8px; }
.sm-tiles .tile .v{ font-size:1rem; }
@media (max-width:1300px){ .sm-tiles{ grid-template-columns:repeat(3,1fr); } }
.sm-legend{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.74rem; color:var(--text-lo); }
.sm-legend i.sh{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:6px; }
.sm-legend i.goal{ background:var(--accent); } .sm-legend i.saved{ background:var(--brand); }
.sm-legend i.blocked{ background:var(--text-lo); } .sm-legend i.off{ border:1.5px solid var(--text-mid); }
@media (max-width:640px){ .odds-toggle{ margin-left:0; } }
.odds-toggle[hidden]{ display:none; }

/* The 18+ line under every desk view and in every drawer. */
.desk-rg{ display:flex; gap:10px; align-items:flex-start; margin:var(--s5) 0 0; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r-md); font-size:.74rem; line-height:1.5; color:var(--text-mid); }
.desk-rg .age{ flex:none; font-family:var(--mono); font-weight:700; font-size:.72rem; border:1.5px solid var(--text-hi);
  color:var(--text-hi); border-radius:50%; width:30px; height:30px; display:grid; place-items:center; }
.desk-rg a{ color:var(--text-hi); text-decoration:underline; text-underline-offset:2px; }

/* =========================================================== streak reality (phase 2)
   One colour whatever the number: nothing here is painted by how good it looks. */
.sr{ font-size:.76rem; line-height:1.45; color:var(--text-mid); }
.sr b{ color:var(--text-hi); font-family:var(--mono); }
.sr-k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); margin-right:6px; }
.pr .sr{ grid-column:1 / -1; margin-top:calc(var(--s2) * -1); padding-top:6px; border-top:1px dashed var(--line); }
.dr-sr{ margin-top:var(--s4); }
.dr-sr .dr-sub{ margin-top:var(--s4); }
.dr-sr .sr{ font-size:.86rem; margin-top:6px; }

/* price check (in the player drawer) */
.pc{ margin-top:var(--s4); padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.pc .dr-sub{ margin-top:0; }
.pc-in{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:.8rem; color:var(--text-mid); }
.pc-in input{ width:7.5rem; font:inherit; font-family:var(--mono); font-size:1rem; color:var(--text-hi); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:8px; padding:.4rem .6rem; outline:0; }
.pc-in input:focus{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.pc-out{ display:grid; gap:6px; margin-top:10px; font-size:.84rem; color:var(--text-mid); }
.pc-out:empty{ display:none; }
.pc-out p{ margin:0; }
.pc-out b, .pc-be{ color:var(--text-hi); font-family:var(--mono); }
.pc-read{ padding:6px 10px; background:var(--surface-2); border-radius:6px; }
.pc-read b{ font-family:var(--sans); }
.pc-msg{ color:var(--warn); }
.pc-bar{ position:relative; height:14px; margin:6px 0 2px; border-radius:7px; background:color-mix(in srgb, var(--text-lo) 18%, transparent); }
.pc-bar i, .pc-bar b{ position:absolute; display:block; }
.pc-rng{ top:2px; bottom:2px; border-radius:5px; background:var(--brand); opacity:.75; }
.pc-sb{ top:5px; bottom:5px; border-radius:2px; background:var(--accent); }
.pc-tick{ top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--warn); }
.pc-key{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.7rem; color:var(--text-lo); }
.pc-key .k, .sx-key .k{ display:inline-block; width:12px; height:8px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.pc-key .k.rng{ background:var(--brand); } .pc-key .k.sb{ background:var(--accent); height:4px; }
.pc-key .k.tick{ width:2px; height:12px; background:var(--warn); }
.pc-rg{ margin-top:12px; }

/* the explorer */
.sx .sd-controls{ margin-top:var(--s3); }
.sx-fig{ margin:var(--s3) 0 0; padding:12px 14px 4px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.sx-chart{ display:block; width:100%; max-width:760px; height:auto; margin:0 auto; }
.sx-grid{ stroke:var(--line); stroke-width:1; }
.sx-ax{ fill:var(--text-lo); font-family:var(--mono); font-size:11px; }
.sx-ttl{ fill:var(--text-mid); font-family:var(--sans); font-size:12px; }
.sx-diag{ stroke:var(--text-lo); stroke-width:1.5; stroke-dasharray:6 5; }
.sx-ci{ stroke:var(--brand-soft); stroke-width:2; }
.sx-dot{ fill:var(--brand); stroke:var(--bg); stroke-width:2; }
.sx-key{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; margin:6px 0 0; font-size:.74rem; color:var(--text-lo); }
.sx-key .k.dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); }
.sx-key .k.diag{ width:18px; height:0; border-top:2px dashed var(--text-lo); border-radius:0; }
.sx-fig figcaption{ margin-top:10px; font-size:.88rem; line-height:1.55; color:var(--text-mid); max-width:72ch; }
.sx-fig figcaption p{ margin:0 0 8px; }
.sx-fig figcaption b{ color:var(--text-hi); font-family:var(--mono); }
.sx .table-wrap{ margin-top:var(--s3); }
.sx .table-wrap table{ min-width:0; }
.sx-table td{ white-space:nowrap; }
.sx-table caption{ caption-side:top; text-align:left; font-size:.74rem; color:var(--text-lo); padding:10px 16px 4px; }
.sx-held{ margin-top:var(--s3); padding:12px 14px; border:1px dashed var(--line-strong); border-radius:var(--r-md); color:var(--text-mid); font-size:.88rem; }
@media (max-width:640px){
  .pc-in{ flex-wrap:wrap; }
  .sx-fig{ padding:8px 8px 2px; }
  /* The chart scales to about half size on a phone: keep its words and marks readable. */
  .sx-ax{ font-size:19px; } .sx-ttl{ font-size:20px; }
  .sx-ci{ stroke-width:3.5; } .sx-diag{ stroke-width:2.5; } .sx-dot{ stroke-width:3; }
  .sx-table th, .sx-table td{ font-size:.74rem; padding:.45rem .4rem; }
}

/* ---------- lenses (desk phase 4): the Tonight board and the Referee lens */
/* minmax(0,1fr) and min-width:0: a wide table scrolls inside its card, never the page. */
.tn-list{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); margin-top:var(--s3); }
.tn-fx{ min-width:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:12px 14px; }
.tn-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:8px; }
.tn-h b{ font-size:.98rem; }
.tn-meta{ font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-lo); }
.tn-t th small, .rl-table th small{ display:block; font-size:.54rem; letter-spacing:.04em; text-transform:none; color:var(--text-lo); font-weight:400; }
/* A side's header sits at the LEFT of its For/Against pair (the table's th is right-aligned):
   on a phone the pair's first column scrolls into view with its owner's name, never without it. */
.tn-t th.tn-side{ text-align:left; }
/* Each sub-header names its side ("MLA for"), so a column scrolled into view says whose it is
   even when the name above it sits under the sticky corner. None of them sticks: the first
   (side 1's For) matched .mx-table th:first-child and stayed pinned inside the corner. */
.tn-t tr.sub th{ position:static; }
/* Greyed (under 8 games) by colour and weight, never opacity: --text-lo on the card is 5.4:1
   (4.9:1 on the highlighted row); at opacity .62 it was 2.9:1. */
.tn-t th.few{ color:var(--text-lo); }
.tn-t td.l{ font-family:var(--sans); position:sticky; left:0; z-index:1; background:var(--surface); }
.tn-t tr.on td.l{ background:color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.tn-c b, .rl-v b{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tn-c small, .rl-v small, .rl-table td small, .rl-sec td small{ display:block; font-family:var(--mono); font-size:.6rem; color:var(--text-lo); white-space:nowrap; }
.tn-c.few{ color:var(--text-lo); }
.tn-c.few b{ font-weight:500; }
.tn-c.none, .rl-v.none{ color:var(--text-lo); font-size:.7rem; white-space:normal; }
.tn-t tr.on td{ background:color-mix(in srgb, var(--brand) 7%, transparent); }
.tn-up{ display:block; font-style:normal; font-family:var(--mono); font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); }
.tn-none{ margin:0; }
.rl-v{ display:inline-grid; justify-items:end; gap:1px; line-height:1.2; }
.rl-table tr[data-ref]{ cursor:pointer; }
.rl-table tr[data-ref]:hover td{ background:var(--surface-2); }
.rl-table td:first-child small{ font-family:var(--sans); }
/* The page styles every <section> as a page band: a drawer section is not one. */
.rl-sec{ padding-block:0; }
.rl-sec .table-wrap table{ min-width:0; }
/* The drawer is narrow: let a cell's range and n wrap rather than push a column out of view. */
.rl-sec .record-table th, .rl-sec .record-table td{ padding:.5rem .55rem; }
.rl-sec .rl-v small, .rl-sec td small{ white-space:normal; }
/* On a phone its cells are at their narrowest, and "· n=N" is one unbreakable piece (fix round 3): a
   little less side padding keeps every column in view (at 375px a 5-column table ran 2px over). */
@media (max-width:520px){ .rl-sec .record-table th, .rl-sec .record-table td{ padding:.5rem .45rem; } }

/* =========================================================== desk sweep 2: every average ranged (19 Oct 2026) */
/* A range and its n in two unbreakable parts: a narrow cell may wrap between them, never inside the range. */
.nw{ white-space:nowrap; }
.rt small .nw{ white-space:nowrap; }
/* Squad grid: the frozen block is wide enough for a ranged Avg and P90 (two short lines) and the hit
   cell's k/n and range, and each frozen column's left offset is the sum of the widths before it. */
.gtable .gv{ width:84px; min-width:84px; max-width:84px; }
.gtable th.gv:nth-child(3), .gtable td.gv:nth-child(3){ left:230px; }
.gtable th.gv:nth-child(4), .gtable td.gv:nth-child(4){ left:314px; }
.gtable .gh{ left:398px; width:124px; min-width:124px; }
.gtable .godds{ left:522px; }
.gtable .gv .rt{ justify-items:center; }
.gtable .gv .rt small{ white-space:normal; line-height:1.15; }
/* Its range wraps before the "· n=N" (bound by a no-break space), never after the dot, and a little
   right padding keeps the range off the next column (fix round 3: at 375px it read "3.71 ·95% 1.71"). */
.gtable td.gv{ padding-right:4px; }
.gtable .gv .rt.none{ font-family:var(--mono); font-size:.6rem; font-weight:400; white-space:normal; line-height:1.2; padding:0 4px; }
/* Finder: the Avg column's range wraps under the average. */
.pr .avgc .rt small, .opp .rt small{ white-space:normal; }
.pr .avgc .rt.none, .opp .rt.none{ font-size:.66rem; }
/* Player drawer: each stat's average and its range on the heading line. */
.dr-stat .k .dr-avg{ display:inline-flex; gap:6px; align-items:baseline; }
.dr-stat .k .dr-avg small{ font-size:.62rem; }
/* Line-ups: each player's range and n under his value. */
.pl-node .pl-rt{ display:grid; justify-items:center; gap:3px; }
.pl-node .pl-rt .pl-ci{ font-family:var(--mono); font-size:.56rem; color:var(--text-lo); text-align:center; white-space:normal; line-height:1.2; max-width:100%; }
/* Line-ups on a phone (layout round, 20 Oct 2026). Those ranges grew each line past the pitch: its
   one grid column took the line's widest content (433px in a 301px pitch at 375px) and the card,
   which hides its overflow, cut players off (on the 18 Oct feed at 375px, 219 wholly hidden).
   - The pitch's column is the card's width, never more.
   - A node is never narrower than its circle and its widest range piece (min-width:auto undoes the
     base's 0; the name adds no width, so it still ellipsises), and a line too long for the pitch
     wraps onto a second row rather than run under the card's edge.
   - On a phone the range is a little smaller, and the pitch's margin, padding and gaps tighter, so a
     line of five keeps one row at 320px and a line of six at 375px. */
.pitch{ grid-template-columns:minmax(0,1fr); }
.pl-line{ flex-wrap:wrap; row-gap:10px; }
.pl-node{ min-width:auto; }
.pl-n{ width:0; min-width:100%; }
@media (max-width:640px){
  .pitch{ margin:8px; padding:18px 4px; }
  .pl-line{ column-gap:4px; }
  .pl-node .pl-rt .pl-ci{ font-size:.52rem; }
}