/* 99th Division Fantasy — "The Rink at Night"
The league record as a filed document. See the direction contract in
index.html. Colour discipline, in one line each:
brand blue #0c4e8c FILLS ONLY, white text on top -> position & state
gold #d9b23c INK ONLY, never takes white text -> what was won
teal #144a57 / ink #4d9fb3 -> goalie, money
spoon #e07a70 -> last place only
Every text token below is verified >= 4.5:1 on every surface it lands on,
including the composited zebra, leader and hover row tints. */
/* ── faces ─────────────────────────────────────────────────────────── */
/* Self-hosted, WOFF2. Roboto used to come from the Google Fonts CDN — 44.9 KB
from two third-party origins on every cold load, and the woff2 arrived
uncompressed at transport. It is one variable file now (wght 100-900), so
400/500/700 all come from a single 43 KB request we own.
Neometric licence: free for PERSONAL use only (c) Andres Sanchez. This app
is on a public URL — flagged, not resolved. */
@font-face{font-family:'Neometric';src:url('/fonts/nm-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Neometric';src:url('/fonts/nm-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Neometric';src:url('/fonts/nm-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Neometric';src:url('/fonts/nm-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Neometric';src:url('/fonts/nm-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Roboto';src:url('/fonts/roboto-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
/* Ground and containers: TRUE NEUTRAL. No warm cast anywhere — the old
cream/khaki ramp read as aged paper and dated the whole record. */
--bg:#000000; --panel:#0a0a0a; --panel-2:#121212; --head:#1a1a1a;
--ink:#ffffff; --ink-2:#b4b4b4; --ink-3:#919191;
--rule:#2a2a2a; --rule-hair:#1c1c1c; --rule-hover:#4a4a4a;
--rule-card:#3a3a3a; /* the Gambling cards' edge, a step up from --rule (Bilal 2026-10-01: "slightly brighter") */
/* Accents keep their jobs: blue marks position, gold marks what was won.
--brand-ink lightened from #3a7fc4, which measured 4.10:1 on --panel-2
and failed AA on .show-more. #57a0dd is >=5.6:1 on every surface. */
--brand:#0c4e8c; --brand-ink:#57a0dd;
--gold:#d9b23c; --teal:#144a57; --teal-ink:#4d9fb3;
--spoon:#e07a70; --yahoo:#6001d2;
/* Type scale: eight steps, one job each. Was 22 rendered sizes against 6
declared roles; structural labels are floored at 11px. */
--t-label:11px; /* Neometric uppercase tracked — FLOOR, never go under */
--t-sub:12px; /* Roboto sub-lines and captions */
--t-num:13.5px; /* tabular figures in tables */
--t-body:14px; /* prose, table cells, names */
--t-title:15px; /* panel headers */
--t-value:17px; /* rank values, section titles */
--t-card:20px; /* manager / season card names */
--t-display:30px; /* masthead wordmark, big stats */
--fd:'Neometric',system-ui,sans-serif;
--fb:Roboto,system-ui,-apple-system,sans-serif;
--r:3px;
/* Motion is permitted ONLY where it carries state. 120ms ceiling. */
--tf:120ms cubic-bezier(.2,.7,.3,1);
}
/* Scenery, not information. Fixed so it does not travel with scroll, and
pinned behind everything — panels are opaque, so no text ever reads
against it except on the bare plate. Measured: the strokes land at 6/255 on
the plate and 13/255 in the masthead, taking white-on-black 21.0:1 -> 20.0:1. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:url('/rink.svg') no-repeat center center/min(1500px,175vw) auto;
opacity:.045}
*{box-sizing:border-box}
html,body{margin:0}
button,select,input,optgroup,textarea{font-family:var(--fb);color:var(--ink)}
option{font-family:var(--fb);background:#0a0a0a;color:#fff}
body{
background:var(--bg);color:var(--ink);position:relative;
font-family:var(--fb);font-size:var(--t-body);line-height:1.4;
-webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand);color:#fff}
/* Focus. Exact brand is 2.33:1 on the ground and cannot carry a ring. */
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;
padding:10px 16px;z-index:200;font-weight:700}
.skip:focus{left:0}
main:focus{outline:none}
/* ── masthead ───────────────────────────────────────────────────────────
One sticky bar: the 99 mark, the lockup, and the nav — instead of three
stacked full-width bands (wordmark, meta strip, tab strip) before any data.
The rink is a real NHL geometry (200x85ft, blue lines at 75/125, five
faceoff circles) drawn once in /rink.svg and washed back to ~9%. It is
scenery: it never carries meaning and never sits behind body text. */
.mast{position:sticky;top:0;z-index:50;background:var(--bg);
border-bottom:1px solid var(--rule)}
/* The rink wash is clipped by its own layer, not by the bar, so an open
mobile menu can overflow the masthead. */
.mast::before{overflow:hidden}
.mast::before{content:"";position:absolute;inset:0;pointer-events:none;
background:url('/rink.svg') no-repeat right -30px top 50%/auto 205%;
opacity:.09;
-webkit-mask-image:linear-gradient(to left,#000,#000 30%,transparent 76%);
mask-image:linear-gradient(to left,#000,#000 30%,transparent 76%)}
.mast-in{position:relative;max-width:1220px;margin:0 auto;padding:0 20px;
display:flex;align-items:center;justify-content:space-between;gap:22px;
flex-wrap:nowrap}
.navbtn{display:none;align-items:center;justify-content:center;width:42px;height:42px;
margin-left:-9px;background:none;border:1px solid transparent;border-radius:2px;
cursor:pointer;flex:0 0 auto;padding:0}
.navbtn svg,.calbtn svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2;
stroke-linecap:round;fill:none}
.navbtn:hover,.calbtn:hover,.dfobtn:hover{border-color:var(--rule);background:var(--panel-2)}
/* Mobile-only actions, right-aligned: Daily Faceoff's lines, then Schedule.
Tight 2px gap so the pair reads as one cluster against the 11px the
masthead puts between its other children. */
.acts{display:none;align-items:center;gap:2px;margin-left:auto;margin-right:-9px}
.calbtn,.dfobtn{display:flex;align-items:center;justify-content:center;
width:42px;height:42px;background:none;border:1px solid transparent;
border-radius:2px;flex:0 0 auto;padding:0;color:var(--ink)}
.calbtn[aria-current="page"]{border-color:var(--brand);background:var(--brand)}
.calbtn[aria-current="page"] svg{stroke:#fff}
/* The DF mark is a FILL shape, and unlike its stroked neighbours it fills its
viewBox edge to edge (0.7-224.4 of 225) where they inset to ~3.5-20.5 of 24.
At a matched 24px it reads noticeably heavier, so it runs at 22px. */
.dfobtn svg{width:22px;height:22px;fill:currentColor;stroke:none}
.id{display:flex;align-items:center;gap:12px;padding:7px 0;color:inherit}
.logo{height:46px;width:auto;display:block;flex:0 0 auto}
.lockup{display:flex;flex-direction:column;gap:4px;min-width:0}
.wordmark{font-family:var(--fd);font-weight:900;font-size:var(--t-card);line-height:1;
letter-spacing:-.012em;text-transform:uppercase;color:var(--ink)}
.wordmark-sub{font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
/* ── nav ────────────────────────────────────────────────────────────────
Lives inside the masthead bar now, so it carries no chrome of its own. */
.tabs{display:flex;flex-wrap:wrap;margin:0;padding:0;align-self:stretch;
align-items:stretch}
.tab{display:flex;align-items:center;min-height:40px;padding:0 11px;line-height:1;
font-family:var(--fd);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
letter-spacing:.13em;color:var(--ink-2);border-right:1px solid var(--rule-hair);
background:none;border-top:0;border-left:0;border-bottom:0;cursor:pointer;
white-space:nowrap}
.tab:first-child{border-left:1px solid var(--rule-hair)}
.tab:hover{color:var(--ink);background:var(--panel-2)}
.tab[aria-current="page"]{color:#fff;background:var(--brand)}
@media(max-width:1080px){
.mast-in{padding:0 13px;gap:0}
.id{padding:10px 0}
.logo{height:40px}
.wordmark{font-size:var(--t-value)}
.wordmark-sub{letter-spacing:.12em}
/* A permanent strip showed only 3 of 6 destinations and cost ~44px of every
screen. It is a drawer behind the menu button instead, so the header is
one row. */
.navbtn{display:flex}
.acts{display:flex}
.mast-in{flex-wrap:nowrap;justify-content:flex-start;gap:11px}
.tabs{position:absolute;left:0;right:0;top:100%;z-index:60;
flex-direction:column;background:var(--panel);
border-bottom:1px solid var(--rule);border-top:1px solid var(--rule-hair);
display:none}
.tabs[data-open]{display:flex}
.tab{min-height:50px;padding:0 16px;border:0;
border-bottom:1px solid var(--rule-hair);letter-spacing:.14em}
.tab:last-child{border-bottom:0}
.tab[aria-current="page"]{background:var(--brand)}
}
/* ── page ──────────────────────────────────────────────────────────── */
main{max-width:1220px;margin:0 auto;padding:18px 20px 70px}
.loading{color:var(--ink-3);padding:50px 0;text-align:center;font-family:var(--fd);
font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-label)}
.empty{color:var(--ink-3);text-align:center;padding:34px 14px;font-style:italic}
.empty.small{padding:12px;font-size:var(--t-sub)}
.foot{font-family:var(--fd);font-weight:700;max-width:1220px;margin:0 auto;padding:12px 20px 34px;border-top:1px solid var(--rule);
font-size:var(--t-label);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);
display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* ── controls ──────────────────────────────────────────────────────── */
.controls{display:flex;justify-content:space-between;align-items:center;gap:14px;
flex-wrap:wrap;padding:11px 0 13px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctl .lbl{font-family:var(--fd);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
letter-spacing:.18em;color:var(--ink)}
.ctl select{background:var(--panel);border:1px solid var(--rule);border-radius:2px;
padding:7px 9px;font-family:var(--fb);font-weight:500;font-size:var(--t-num);cursor:pointer;
font-variant-numeric:tabular-nums;min-height:34px}
.ctl select:hover{border-color:var(--rule-hover)}
.ctl .dash{color:var(--ink-3)}
.btn{background:var(--panel);color:var(--ink);border:1px solid var(--rule);
border-radius:2px;padding:0 12px;min-height:34px;font-family:var(--fd);font-weight:700;
font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.btn:hover{color:var(--ink);border-color:var(--rule-hover)}
.chk{display:flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--fb);
font-size:var(--t-sub);color:var(--ink-2);min-height:34px}
.chk input{accent-color:var(--brand);cursor:pointer;width:16px;height:16px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.seg button{appearance:none;background:transparent;border:0;cursor:pointer;color:var(--ink);
display:inline-flex;align-items:center;min-height:34px;padding:0 13px;line-height:1;
font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;
text-transform:uppercase;white-space:nowrap}
.seg button+button{border-left:1px solid var(--rule)}
.seg button:hover{color:var(--ink);background:var(--panel-2)}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff}
.pnote,.fnote{color:var(--ink-3);font-size:var(--t-sub)}
.controls.filtered{border-bottom-color:var(--brand-ink)}
html{overflow-x:hidden}
.grid>*,.card,.rank-row>*,.ctl,.trade,.cat-cell{min-width:0}
.tbl-scroll{max-width:100%}
.rank-name,.rank-sub,.bnm,.tr-p{overflow-wrap:anywhere}
/* ── panels ────────────────────────────────────────────────────────── */
.grid{display:grid;gap:16px;align-items:start}
.cols-2{grid-template-columns:1fr 1fr}
.cols-2w{grid-template-columns:1.42fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cols-2,.cols-2w,.cols-3{grid-template-columns:1fr}}
.gap{height:16px}
.card{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
background:var(--panel)}
.card>h2{margin:0;padding:8px 13px;background:var(--head);border-bottom:1px solid var(--rule);
font-family:var(--fd);font-weight:800;font-size:var(--t-title);text-transform:uppercase;
letter-spacing:.05em;color:var(--ink);display:flex;justify-content:flex-start;
align-items:center;gap:10px}
.card>h2::before{content:"";width:6px;align-self:stretch;background:var(--brand);
margin:-8px 0 -8px -13px}
.card.decided>h2::before{background:var(--gold)}
.card.decided>h2{box-shadow:inset 0 -1px 0 rgba(217,178,60,.4)}
.card .body{padding:9px 13px 12px}
.hint,.hnote{font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);text-align:right;margin-left:auto}
.section-title{font-family:var(--fd);font-weight:800;font-size:var(--t-value);text-transform:uppercase;
letter-spacing:.05em;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.section-title::before{content:"";width:6px;height:17px;background:var(--brand)}
.section-title .count{font-family:var(--fb);font-size:var(--t-sub);color:var(--ink-3);font-weight:400}
.section-title.former-title{margin-top:28px}
.sub{font-size:var(--t-sub);color:var(--ink-3);margin:-6px 0 12px}
/* ── tables ────────────────────────────────────────────────────────── */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font-family:var(--fd);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
font-weight:700;text-align:left;padding:0 7px 5px;border-bottom:1px solid var(--rule);
white-space:nowrap}
.tbl td{padding:5px 7px;font-size:var(--t-num);border-bottom:1px solid var(--rule-hair)}
.tbl tbody tr:nth-child(odd) td{background:rgba(255,255,255,.032)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:rgba(255,255,255,.06)}
.tbl .num{text-align:right;font-weight:700;white-space:nowrap}
.tbl .money{text-align:right;color:var(--teal-ink);font-weight:700;white-space:nowrap}
.tbl td.nowrap,.tbl th.nowrap{white-space:nowrap}
.tbl tr.rank1 td{background:rgba(12,78,140,.16)}
.tbl tr.rank1 .lead{color:var(--ink)}
.tbl td.rk{width:30px;text-align:center;color:var(--ink-3);font-size:var(--t-sub);font-weight:700;
font-variant-numeric:tabular-nums}
.tbl tr.rank1 td.rk{background:var(--brand);color:#fff}
td.rank{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
td.rank-first{color:var(--gold);font-weight:700}
td.rank-last{color:var(--spoon);font-weight:700}
td.rank-none{color:var(--ink-3)}
td.spoon{color:var(--spoon);font-weight:700}
.dim{color:var(--ink-2)}
.tiny{color:var(--ink-3);font-size:var(--t-sub)}
.zero{color:var(--ink-3)}
.won{color:var(--gold);font-weight:700}
small.muted{color:var(--ink-3);font-weight:400;margin-left:3px;font-size:var(--t-sub)}
.rowlink{color:inherit;display:block}
/* Inline variant for names inside a sentence-like row (trade items). */
.plink{color:inherit}
.plink:hover{text-decoration:underline;text-decoration-color:var(--brand-ink);text-underline-offset:2px}
.rowlink:hover{text-decoration:underline;text-decoration-color:var(--brand-ink);text-underline-offset:2px}
tr[data-nav]{cursor:pointer}
/* ── tags & chips ──────────────────────────────────────────────────── */
.tag{display:inline-block;font-family:var(--fd);font-size:var(--t-label);font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--teal);
padding:2px 5px 1px;border-radius:2px;line-height:1;vertical-align:2px;margin-left:5px}
.tag-disp{background:var(--teal)}
.tag-keep{background:var(--teal-ink);color:var(--bg)}
/* Platform provenance badge, in two forms. Both apply the platform's own
artwork as a CSS mask over white, so it reads as a reversed lockup on the
platform fill — a mask takes only alpha, so the source files keep their own
colours. Fantrax blue printed on a Fantrax-blue fill would vanish.
.plat WORDMARK — season cards and the season header, where there is room.
.plat-sm ICON — dense tables, where the wordmark is wider than a
season column and pushed rows onto two lines. */
.plat{display:inline-flex;align-items:center;height:15px;padding:0 5px;
border-radius:2px;vertical-align:-3px;margin-left:6px}
.plat i{display:block;height:8px;background:#fff;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-position:center;mask-position:center}
.plat-yahoo{background:var(--yahoo)}
.plat-fantrax{background:var(--brand)}
.plat-yahoo i{width:59px;-webkit-mask-image:url('/logo-yahoo.svg');mask-image:url('/logo-yahoo.svg')}
.plat-fantrax i{width:29px;-webkit-mask-image:url('/logo-fantrax.png');mask-image:url('/logo-fantrax.png')}
/* Icon form: a square chip carrying the Yahoo Fantasy trophy or the Fantrax
figure, cut from the platforms' own artwork.
The mark is centred STRUCTURALLY, not by eye: `i` fills the chip's content
box and the mask does the rest via contain + center, so the two marks stay
centred at any chip size despite having different aspect ratios (the trophy
is landscape, the figure is nearly square). Both PNGs are cropped to their
exact alpha bounds — the trophy shipped with 3px of asymmetric padding,
which pushed it a hair high inside the chip. */
.plat-sm{width:16px;height:16px;flex:0 0 16px;padding:3px;vertical-align:-3px}
.plat-sm i{width:100%;height:100%}
.plat-sm.plat-yahoo i{-webkit-mask-image:url('/icon-yahoo.png');mask-image:url('/icon-yahoo.png')}
.plat-sm.plat-fantrax i{-webkit-mask-image:url('/icon-fantrax.png');mask-image:url('/icon-fantrax.png')}
/* Screen readers still get the platform name; the mark is decorative. */
.plat .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}
.chip-w{color:var(--gold);font-weight:700}
.chip-l{color:var(--ink-3)}
.play-badge{font-family:var(--fd);font-size:var(--t-label);font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:#fff;background:var(--teal);padding:2px 5px 1px;
border-radius:2px}
.kept{color:var(--teal-ink);font-weight:700;letter-spacing:.04em;font-size:var(--t-sub)}
.today{color:var(--ink-3);font-size:var(--t-sub)}
.pickno{font-variant-numeric:tabular-nums}
.pickno .ovr{color:var(--ink-3);font-size:var(--t-sub)}
.pill{font-family:var(--fd);display:inline-block;padding:5px 11px;border-radius:2px;font-size:var(--t-label);
text-transform:uppercase;letter-spacing:.12em;background:var(--panel-2);
border:1px solid var(--rule);color:var(--ink-2);font-weight:700}
/* ── ranked lists ──────────────────────────────────────────────────── */
.ranklist{display:flex;flex-direction:column}
.rank-row{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:11px;
padding:7px 4px;border-bottom:1px solid var(--rule-hair);color:inherit}
.rank-row:last-child{border-bottom:none}
.rank-row:hover{background:rgba(255,255,255,.06)}
.rank-row .pos{font-weight:700;color:var(--ink-3);text-align:center;font-size:var(--t-sub);
font-variant-numeric:tabular-nums}
.rank-row.top .pos{background:var(--brand);color:#fff;border-radius:2px;padding:3px 0}
.rank-name{font-weight:700}
/* Never rely on template whitespace to separate these two — it collides. */
.rank-sub{color:var(--ink-3);font-size:var(--t-sub);margin-left:7px}
.rank-val{font-weight:700;font-size:var(--t-value);text-align:right;font-variant-numeric:tabular-nums}
.rank-val small{font-size:var(--t-label);color:var(--ink-3);font-weight:400;margin-left:1px}
.ranklist.compact .rank-row{padding:5px 4px}
.ranklist.compact .rank-name{font-size:var(--t-num)}
.ranklist.compact .rank-val{font-size:var(--t-body)}
.ranklist.compact .rank-val small{font-size:var(--t-label)}
.bar{height:5px;border-radius:2px;background:var(--rule-hair);overflow:hidden;margin-top:5px}
.bar>i{display:block;height:100%;background:var(--brand-ink)}
/* ── category kings ────────────────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1px;
background:var(--rule-hair)}
.cat-cell{background:var(--panel);padding:9px 11px}
.cat-cell .code{font-family:var(--fd);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;
color:var(--ink-3);font-weight:700}
.cat-cell.goalie .code{color:var(--teal-ink)}
.cat-cell .king{font-family:var(--fd);font-weight:800;font-size:var(--t-title);margin-top:3px;
text-transform:uppercase}
.cat-cell .kpct{color:var(--ink-3);font-size:var(--t-sub);font-variant-numeric:tabular-nums}
/* ── head to head ──────────────────────────────────────────────────── */
.pickers{display:flex;gap:12px;align-items:center;justify-content:center;
margin-bottom:16px;flex-wrap:wrap}
.sel{appearance:none;background:var(--panel);border:1px solid var(--rule);border-radius:2px;
padding:10px 34px 10px 13px;font-family:var(--fd);font-weight:700;font-size:var(--t-title);
text-transform:uppercase;letter-spacing:.04em;cursor:pointer;min-height:42px;
background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
background-position:right 16px center,right 11px center;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.vs-pill{font-family:var(--fd);font-weight:900;color:var(--ink-3);font-size:var(--t-label);
letter-spacing:.12em}
.scorebug{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
background:var(--panel)}
.sb-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
padding:26px 20px;gap:10px}
.sb-team{text-align:center}
.sb-team .nm{font-family:var(--fd);font-weight:900;font-size:clamp(20px,4vw,34px);
text-transform:uppercase;line-height:1.05}
.sb-team.win .nm{color:var(--ink)}
.sb-team.lose .nm{color:var(--ink-3)}
.sb-score{font-family:var(--fd);font-weight:900;font-size:clamp(38px,8vw,70px);
line-height:1;font-variant-numeric:tabular-nums;margin-top:6px}
.sb-mid{font-family:var(--fd);font-weight:700;text-align:center;color:var(--ink-3);font-size:var(--t-label);letter-spacing:.16em;
text-transform:uppercase}
.sb-mid .dash{font-size:var(--t-card);color:var(--ink-3)}
.sb-winbar{padding:0 20px 18px}
.sb-winbar .bar{height:8px}
.sb-winbar .lbl{font-family:var(--fd);font-weight:700;display:flex;justify-content:space-between;color:var(--ink-3);
font-size:var(--t-label);margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em;gap:10px}
.edge{display:flex;flex-direction:column}
.edge-row{display:grid;grid-template-columns:1fr 112px 1fr;align-items:center;gap:10px;
padding:5px 2px;border-bottom:1px solid var(--rule-hair)}
.edge-row:last-child{border-bottom:none}
.edge-head{font-family:var(--fd);font-weight:700;color:var(--ink-3);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em}
.edge-code{font-family:var(--fd);text-align:center;font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-3);
text-transform:uppercase;font-weight:700}
.edge-side{font-weight:700;font-size:var(--t-title);font-variant-numeric:tabular-nums}
.edge-side.l{text-align:right}
.edge-side.win{color:var(--gold)}
.edge-side.lose{color:var(--ink-3)}
.arrow{font-size:var(--t-label)}
.up{color:var(--gold)}.down{color:var(--ink-3)}.eq{color:var(--ink-3)}
/* ── manager / season cards ────────────────────────────────────────── */
.mgr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.mgr-card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
padding:14px 15px;display:block;color:inherit}
.mgr-card:hover{border-color:var(--brand-ink);background:var(--panel-2)}
.mgr-card .nm{display:block;font-family:var(--fd);font-weight:900;font-size:var(--t-card);
text-transform:uppercase;line-height:1.05}
.mgr-card .meta{display:block;color:var(--ink-3);font-size:var(--t-sub);margin-top:3px}
.mgr-card.former{border-style:dashed;color:var(--ink-2)}
.profile-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
margin-bottom:18px;flex-wrap:wrap}
.profile-head h1{font-family:var(--fd);font-weight:900;font-size:clamp(28px,6vw,50px);
margin:0;text-transform:uppercase;line-height:1}
.big-stats{display:flex;gap:24px;flex-wrap:wrap}
.big-stat .n{font-family:var(--fd);font-weight:900;font-size:var(--t-display);
font-variant-numeric:tabular-nums;line-height:1}
.big-stat .k{font-family:var(--fd);font-weight:700;color:var(--ink-3);font-size:var(--t-label);text-transform:uppercase;
letter-spacing:.14em;margin-top:3px}
.back{color:var(--ink-3);font-family:var(--fd);font-weight:700;text-transform:uppercase;
letter-spacing:.12em;font-size:var(--t-label);margin-bottom:14px;display:inline-block;
background:none;border:0;padding:6px 0;cursor:pointer}
.back:hover{color:var(--ink)}
.catbars{display:flex;flex-direction:column;gap:7px}
.catbar{display:grid;grid-template-columns:54px 1fr 44px;align-items:center;gap:10px}
.catbar .c{font-family:var(--fd);font-size:var(--t-label);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;
font-weight:700}
.catbar .v{font-weight:700;text-align:right;font-size:var(--t-num);font-variant-numeric:tabular-nums}
/* ── trades ─────────────────────────────────────────────────────────────
Grouped by RECIPIENT, not by item. The old format put direction on every
individual row ("player - from -> to"), so a three-player deal had to be
assembled in the reader's head. */
.trades{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:820px){.trades{grid-template-columns:1fr}}
.trade{background:var(--panel-2);border:1px solid var(--rule-hair);border-radius:2px;
overflow:hidden}
.tr-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:9px 11px;border-bottom:1px solid var(--rule-hair);background:var(--panel)}
.tr-who{font-family:var(--fd);font-weight:800;font-size:var(--t-num);
text-transform:uppercase;letter-spacing:.03em}
.tr-when{color:var(--ink-3);font-size:var(--t-sub);white-space:nowrap}
.tr-cols{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:480px){
.tr-cols{grid-template-columns:1fr}
.tr-col+.tr-col{border-left:0;border-top:1px solid var(--rule-hair)}
}
.tr-col{padding:9px 11px 11px;min-width:0}
.tr-col+.tr-col{border-left:1px solid var(--rule-hair)}
.tr-got{display:block;font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.11em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:6px}
.tr-p{display:block;font-size:var(--t-num);font-weight:700;padding:2px 0;
overflow-wrap:anywhere}
.tr-p.cash{color:var(--teal-ink)}
.tr-p.none{color:var(--ink-3);font-weight:400;font-style:italic}
.tr-drop{padding:7px 11px 9px;border-top:1px solid var(--rule-hair);
color:var(--ink-3);font-size:var(--t-sub)}
/* Reserved for "On this day" — see tradeSentence() in app.js. */
.tr-sentence{font-size:var(--t-body);line-height:1.55}
.tr-sentence .mgr{font-family:var(--fd);font-weight:800;text-transform:uppercase;
letter-spacing:.02em}
.tr-sentence .cash{color:var(--teal-ink)}
.expand-btn{background:var(--panel);color:var(--brand-ink);border:1px solid var(--rule);
border-radius:2px;width:26px;height:26px;line-height:1;cursor:pointer;
font-size:var(--t-label);padding:0}
.expand-btn:hover{border-color:var(--brand-ink);color:#fff}
.expand-btn[aria-expanded="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.trade-detail>td{background:var(--bg)}
.trade-detail-box{padding:4px 2px 8px}
/* ── players controls ──────────────────────────────────────────────── */
.players-controls{display:flex;gap:12px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:5px}
.field.grow{flex:1 1 260px;min-width:0}
.field label{font-family:var(--fd);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
letter-spacing:.16em;color:var(--ink-3)}
.search-input,.minf-input{background:var(--panel);border:1px solid var(--rule);
border-radius:2px;padding:10px 13px;font-family:var(--fb);font-size:var(--t-body);min-height:42px}
.minf-input{width:96px;text-align:center;font-variant-numeric:tabular-nums}
.search-input::placeholder{color:var(--ink-3)}
.search-input:focus,.minf-input:focus{border-color:var(--brand-ink)}
/* ── show more ─────────────────────────────────────────────────────── */
.card.expandable .extra-row{display:none}
.card.expandable.expanded .extra-row{display:table-row}
.show-more{margin:10px 13px 12px;width:calc(100% - 26px);background:var(--panel-2);
color:var(--brand-ink);border:1px solid var(--rule);border-radius:2px;min-height:38px;
font-family:var(--fd);font-weight:700;font-size:var(--t-label);text-transform:uppercase;
letter-spacing:.1em;cursor:pointer}
.show-more:hover{border-color:var(--brand-ink);color:#fff}
/* ── playoff bracket ───────────────────────────────────────────────── */
.champ-line{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:var(--t-num)}
.champ-line b{color:var(--gold)}
.bwrap{overflow-x:auto;padding-bottom:6px}
.bk{display:flex;align-items:center;gap:12px;min-width:820px}
.bcol{display:flex;flex-direction:column;justify-content:space-around;gap:12px;
min-width:158px;flex:1}
.brd{font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-3);text-align:center;margin-bottom:2px}
.bg{background:var(--panel-2);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.bg.final{border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,178,60,.25)}
.bg.pin{border-style:dashed;background:var(--panel)}
.bt{display:flex;align-items:center;gap:8px;padding:7px 9px}
.bt+.bt{border-top:1px solid var(--rule-hair)}
.bsd{background:var(--bg);color:var(--ink-3);font-size:var(--t-label);font-weight:700;padding:2px 5px;
border-radius:2px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.bnm{font-family:var(--fd);flex:1;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.bsc{font-weight:700;font-size:var(--t-num);font-variant-numeric:tabular-nums;background:var(--bg);
padding:2px 8px;border-radius:2px;min-width:30px;text-align:center}
.bt.w{background:rgba(217,178,60,.10)}
.bt.w .bnm,.bt.w .bsc{color:var(--gold)}
.bt.l{color:var(--ink-3)}
.btie{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
text-align:center;padding:3px}
.bbye{font-family:var(--fd);border:1px dashed var(--rule);border-radius:2px;padding:8px 9px;font-size:11px;
font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
text-align:center}
.bmid{min-width:190px}
.bfinal{text-align:center}
.btrophy{width:26px;height:26px;margin:0 auto;display:block;stroke:var(--gold);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.bchamp{font-family:var(--fd);font-weight:900;font-size:17px;letter-spacing:.05em;
color:var(--gold);margin:2px 0 8px;text-transform:uppercase}
.bchamp small{display:block;font-family:var(--fb);font-weight:400;font-size:var(--t-label);
letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;margin-top:2px}
.pinsec{margin-top:18px;padding-top:14px;border-top:1px dashed var(--rule)}
.pinhead{text-align:left;color:var(--ink-3);margin-bottom:10px}
.pinbk{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pincol{min-width:210px;flex:0 1 230px;justify-content:center}
.pincol .brd{text-align:left}
.pwk{color:var(--ink-3);letter-spacing:0;text-transform:none;font-weight:400}
.earn{font-family:var(--fd);font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
background:var(--gold);color:var(--bg);padding:2px 5px;border-radius:2px}
/* ── christmas cup ── the tree is FIXED (no re-seeding), so it is drawn in
full: R1 · QF · SF · Final · SF · QF · R1. Seven columns need more room
than the playoffs' five; .bwrap scrolls it on anything narrower. */
.bk.cup{min-width:1090px}
.bk.cup .bcol{min-width:138px}
.bk.cup .bmid{min-width:180px}
/* THE CUP IS RED (Bilal, 2026-09-23): its own lamp, separate from the gold
of the title. --cup is INK and OUTLINE only, never a fill with white text
(5.0:1 on --panel, 4.8:1 on --panel-2). Everything the playoff bracket
paints gold, the cup paints red: the winning side, the final's border,
the champion, the icon, the card slab, the counts in the trophy case. */
:root{--cup:#e34a4a}
.cupbk .bt.w{background:rgba(227,74,74,.10)}
.cupbk .bt.w .bnm,.cupbk .bt.w .bsc{color:var(--cup)}
.cupbk .bg.final{border-color:var(--cup);box-shadow:0 0 0 1px rgba(227,74,74,.25)}
.cupbk .btrophy{stroke:var(--cup)}
.cupbk .bchamp{color:var(--cup)}
.cupbk .champ-line b{color:var(--cup)}
.cupbk .ico-trophy{stroke:var(--cup)}
.card.cupcard>h2::before{background:var(--cup)}
.card.cupcard>h2{box-shadow:inset 0 -1px 0 rgba(227,74,74,.4)}
.cupwon{color:var(--cup);font-weight:700}
.cupbk .bfinal.mchamp{border-color:var(--cup);background:rgba(227,74,74,.05)}
/* Dashed means absent: a slot the bracket has not decided yet. An unplayed
final gets no red border either — the outline marks a decided final. */
.bg.tbd{border-style:dashed;background:var(--panel)}
.cupbk .bg.final.tbd,.bg.final.tbd{border-color:var(--rule);box-shadow:none}
.bchamp .tbd{color:var(--ink-3)}
.champ-line.dim{color:var(--ink-3)}
.bbye .bsd{margin-left:6px}
.bmob{display:none}
@media(max-width:860px){
.bwrap{display:none}
.bmob{display:block}
.mrd{margin-bottom:16px}
.mrd .brd{text-align:left;padding-bottom:5px;margin-bottom:8px;
border-bottom:1px solid var(--rule-hair)}
.mrd .bg{margin-bottom:8px}
.bfinal.mchamp{border:1px solid var(--gold);border-radius:2px;padding:13px;
background:rgba(217,178,60,.05);margin-top:4px}
.bfinal.mchamp .bchamp{margin-bottom:0}
.pinbk{flex-direction:column;align-items:stretch}
.pincol{min-width:0;flex:1 1 auto}
}
/* ── narrow ────────────────────────────────────────────────────────── */
@media(max-width:560px){
body{font-size:var(--t-num)}
main{padding:14px 13px 56px}
.foot{padding:12px 13px 30px}
.mgr-grid{gap:10px}
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.sb-head{padding:18px 12px}
.edge-row{grid-template-columns:1fr 96px 1fr}
.card .body,.tbl td{padding-left:9px;padding-right:9px}
/* .tbl-scroll can only scroll something wider than itself. */
.tbl-scroll table.tbl{min-width:520px}
/* Controls ate ~46% of the first viewport on a phone. Selects and the
phase segment now share the available width instead of each claiming a
full row, and every control clears a 40px touch target. */
.controls{gap:10px;padding:10px 0 12px}
.ctl{gap:7px;width:100%}
.ctl select{flex:1 1 auto;min-width:96px}
.seg{display:flex;flex:1 1 100%}
.seg button{flex:1;justify-content:center;padding:0 6px;min-height:40px}
.chk{min-height:40px}
.btn,.chip-x{min-height:40px}
.card>h2{font-size:var(--t-body);flex-wrap:wrap}
.hint,.hnote{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ══ ADDED 2026-08-22 — neutral rebuild ═════════════════════════════════
Everything below is new work against the true-neutral ground. Rules that
were expensive to reach and must not regress are called out in place. */
/* ── motion: ONLY where it carries state ───────────────────────────────
The Flat Plate Rule stands — no hover lifts, no entrances, no keyframes.
The exception is narrow and deliberate: a control that changed state must
be seen to change. Ceiling 120ms, and only on paint properties. */
.tab,.seg button,.btn,.show-more,.expand-btn,.mgr-card,.szn-card,
.rank-row,.tbl tbody tr,.chip-x,.sel,.ctl select{
transition:background-color var(--tf),color var(--tf),
border-color var(--tf),opacity var(--tf)}
/* ── manager cards: the roll call had to say who these people ARE ──────
The 12 photographs are not a coherent set (a cartoon, a cat, a tiger
badge, a product shot). Greyscale is what makes them one set — it is a
house treatment, not a filter, and it is why the incoherence stopped
mattering. Do not restore colour to these. */
.mgr-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.mgr-card:hover{border-color:var(--brand-ink);background:var(--panel-2)}
.mc-top{display:flex;align-items:center;gap:11px;padding:12px 13px 10px}
.av{width:44px;height:44px;flex:0 0 44px;border-radius:2px;object-fit:cover;
background:var(--panel-2);filter:grayscale(1) contrast(1.06);
border:1px solid var(--rule)}
.av-mono{display:flex;align-items:center;justify-content:center;
font-family:var(--fd);font-weight:900;font-size:var(--t-value);
color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
.mgr-card.champ .av{border-color:var(--gold)}
.mc-id{min-width:0;flex:1}
.mc-id .nm{display:block;font-family:var(--fd);font-weight:900;
font-size:var(--t-card);text-transform:uppercase;line-height:1.05;
overflow-wrap:anywhere}
.mc-id .meta{display:block;color:var(--ink-3);font-size:var(--t-sub);margin-top:3px}
.mc-stats{display:flex;border-top:1px solid var(--rule-hair);margin-top:auto}
.mc-stat{flex:1;padding:8px 13px 10px;min-width:0}
.mc-stat+.mc-stat{border-left:1px solid var(--rule-hair)}
.mc-stat .v{display:block;font-weight:700;font-size:var(--t-value);
font-variant-numeric:tabular-nums;line-height:1}
.mc-stat .k{display:block;font-family:var(--fd);font-weight:700;
font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-3);margin-top:4px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.mc-stat.titles .v{color:var(--gold)} /* gold = won. Nothing else. */
.mc-stat.none .v{color:var(--ink-3)}
.mgr-card.former{border-style:dashed}
.mgr-card.former img.av{opacity:.8}
/* ── season cards: the index page IS the honour roll ───────────────────
A season card that does not say who won that season is a link, not a card. */
.szn-card{background:var(--panel);border:1px solid var(--rule);
border-radius:var(--r);padding:13px 14px 14px;display:block;color:inherit}
.szn-card:hover{border-color:var(--brand-ink);background:var(--panel-2)}
.szn-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.szn-yr{font-family:var(--fd);font-weight:900;font-size:var(--t-card);
letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.szn-champ{margin-top:9px;padding-top:9px;border-top:1px solid var(--rule-hair)}
.szn-champ .who{display:block;font-family:var(--fd);font-weight:900;
font-size:var(--t-value);text-transform:uppercase;color:var(--gold);
line-height:1.1;overflow-wrap:anywhere}
.szn-champ .role{display:block;font-family:var(--fd);font-weight:700;
font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-3);margin-top:3px}
.szn-champ.unplayed .who{color:var(--ink-3)}
.szn-meta{display:block;color:var(--ink-3);font-size:var(--t-sub);margin-top:8px}
.szn-meta b{color:var(--ink-2);font-weight:700}
/* ── skeletons: hold the geometry instead of collapsing to "Loading…" ──
Every view used to swap in one paint, so the whole layout jumped. */
.skel-wrap{display:grid;gap:16px}
.skel{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);
overflow:hidden}
.skel-h{height:36px;background:var(--head);border-bottom:1px solid var(--rule)}
.skel-b{padding:11px 13px;display:flex;flex-direction:column;gap:11px}
.skel-r{height:12px;border-radius:2px;background:var(--rule-hair)}
.skel-r:nth-child(even){opacity:.66}
@media(prefers-reduced-motion:no-preference){
.skel-r{animation:skelpulse 1.1s ease-in-out infinite alternate}
}
@keyframes skelpulse{from{opacity:.45}to{opacity:.95}}
/* ── filter state: blue, because state is position, not glory ──────────
This was a 1px gold underline, which broke the Two Lamps Rule and was
invisible anyway — a returning visitor read filtered all-time numbers
without knowing a filter was on. */
.chip-x{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 11px;
background:var(--brand);color:#fff;border:0;border-radius:2px;cursor:pointer;
font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.11em;text-transform:uppercase}
.chip-x:hover{background:var(--brand-ink);color:#000}
.chip-x .x{font-size:var(--t-body);line-height:1;opacity:.85}
/* A blocked control has to say why. The phase segment silently refused to
turn off its last option, and its only explanation was a hover title. */
.seg button[aria-disabled="true"]{cursor:not-allowed}
.seg button[aria-pressed="true"][aria-disabled="true"]{color:#fff}
.ctl-note{font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
align-self:center}
/* ── rafter banners ─────────────────────────────────────────────────────
The honour roll as championship banners. Newest first, one per season,
gold only where a title was actually won. The unplayed season hangs as a
dashed blank rather than being omitted — the record states absences. */
.rafters{margin-bottom:16px}
.rail{border-top:3px solid var(--rule)}
.banners{display:flex;gap:8px;overflow-x:auto;padding:0 1px 4px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.banners::-webkit-scrollbar{display:none}
.ban{flex:0 0 80px;color:inherit;text-align:center;padding:12px 6px 28px;
background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 76%);
border:1px solid var(--rule);border-top:0;
clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.ban:hover{background:var(--panel-2)}
.ban .y{display:block;font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.02em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ban .c{display:block;font-family:var(--fd);font-weight:900;font-size:var(--t-num);
text-transform:uppercase;color:var(--gold);margin-top:6px;line-height:1.05;
overflow-wrap:anywhere}
.ban.none{border-style:dashed;background:var(--panel)}
.ban.none .c{color:var(--ink-3)}
@media(max-width:820px){
.banners{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
mask-image:linear-gradient(to right,#000 88%,transparent)}
}
@media(max-width:560px){.ban{flex:0 0 76px;padding:10px 6px 26px}}
/* The lockup yields before the masthead wraps. Measured with the real faces:
the sub-line is 246px and the wordmark 123px, against 86px of right-hand
actions + 42px menu button + logo. Above 560px everything fits; below it the
sub-line would wrap to two or three lines and grow the bar (nothing
overflows horizontally — the text wraps — but a two-line "99TH DIVISION" is
worse than no wordmark). The logo alone still links home.
Re-measure if the actions cluster gains a third icon. */
@media(max-width:560px){.wordmark-sub{display:none}}
@media(max-width:400px){.lockup{display:none}}
/* Drawn, not an emoji — a colour emoji ignores the palette and renders
differently on every platform. */
.ico-trophy{width:16px;height:16px;vertical-align:-3px;stroke:var(--gold);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* ── sortable table headers ─────────────────────────────────────────────
These must look EXACTLY like the plain headers they replaced. The control
is a real button for keyboard and screen-reader access, but visually it
inherits the th's own type, colour and alignment and shows no chrome.
The only mark is a small caret on the column currently sorted. */
.tbl th:has(.th-sort){padding:0}
.th-sort{display:flex;align-items:center;gap:5px;width:100%;
background:none;border:0;margin:0;cursor:pointer;
padding:0 7px 5px;
font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
text-align:left;white-space:nowrap}
.tbl th.num .th-sort{justify-content:flex-end}
.tbl th.rk .th-sort{justify-content:center}
.th-sort:hover{color:var(--ink)}
/* The caret's space is ALWAYS reserved, only its opacity changes. Collapsing
it to zero width made the column jump wider the moment you sorted it. */
.sort-ind{width:6px;height:6px;flex:0 0 6px;opacity:0;background:currentColor;
clip-path:polygon(50% 0,100% 100%,0 100%)}
th[aria-sort="ascending"] .sort-ind,
th[aria-sort="descending"] .sort-ind{opacity:1}
th[aria-sort="descending"] .sort-ind{clip-path:polygon(50% 100%,100% 0,0 0)}
/* Rivalry rows advertise where they go. */
.vs-go{display:block;font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.11em;text-transform:uppercase;color:var(--brand-ink);margin-top:2px}
/* Season header: the platform wordmark sits beside the team count, so every
season page states which era it came from. */
.head-meta{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.head-meta .plat{margin-left:0;height:19px;padding:0 7px}
.head-meta .plat i{height:10px}
.head-meta .plat-yahoo i{width:74px}
.head-meta .plat-fantrax i{width:36px}
/* ── Schedule ───────────────────────────────────────────────────────
A full Sunday..Saturday week, always seven columns. The league's scoring
periods are 5, 7 and 14 days long, so the view steps by CALENDAR WEEK and
labels the period — otherwise the column count would change screen to
screen.
MOBILE: the team column is the CREST ALONE. "New York Rangers" spends about
a third of the row restating what the logo says, and the seven day columns
are the entire point of the page. The city name returns at 760px.
table-layout:fixed is load-bearing — without it the opponent codes size the
columns unevenly and the grid stops being scannable down a day. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sc-nav{display:flex;align-items:center;gap:8px;margin:14px 0 10px}
/* 40px minimum: measured at 20px on a real 390px layout, which fails the
touch-target rule the rest of the app follows. */
.sc-nav select{flex:1 1 auto;min-width:0;max-width:420px;min-height:40px;
height:40px;padding:0 10px}
.sc-arrow{flex:none;width:40px;min-height:40px;display:flex;align-items:center;
justify-content:center;font-size:15px;line-height:1}
.sc-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sc-chip{font-family:'Neometric',system-ui,sans-serif;font-size:var(--t-label);
letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
background:var(--panel-2);border:1px solid var(--rule-hair);border-radius:3px;
padding:5px 8px;white-space:nowrap}
.sc-chip b{color:var(--ink);font-weight:700}
/* nowrap keeps "BUSIEST THU 13" from breaking after the label, but the team
lists inside can run to twenty codes -- on a light week that chip
measured 572px in a 390px viewport and scrolled the whole document
sideways. The label stays nowrap; only the list is allowed to wrap, and the
chip is capped so a flex item cannot exceed the row. */
.sc-chip{max-width:100%}
.sc-chip i{font-style:normal;color:var(--ink-2);text-transform:none;
letter-spacing:0;font-family:Roboto,system-ui,sans-serif;
white-space:normal;overflow-wrap:anywhere}
.sc-chip.acc{color:var(--brand-ink);border-color:rgba(87,160,221,.32)}
/* Gold marks the title-deciding weeks. INK ONLY, per the palette rule -- a
gold fill would need white text on it, which is the Two Lamps break. */
.sc-chip.po{color:var(--gold);border-color:rgba(217,178,60,.34)}
.sc-chip.po b,.sc-chip.po i{color:var(--gold)}
/* The PLAY-IN is its own phase and must not be gold. Gold is what was WON;
a play-in is a qualifier for the bracket, so it takes brand blue -- the
same split the `phase` filter draws (reg / playin / bracket). */
.sc-chip.pi{color:var(--brand-ink);border-color:rgba(87,160,221,.32)}
.sc-chip.pi b,.sc-chip.pi i{color:var(--brand-ink)}
/* The round name inside a chip: Play-in 1 of 2, Quarterfinal, Final. */
.sc-chip em{font-style:normal;font-weight:700;letter-spacing:.04em}
/* Grid lines get their own token. --rule-hair (#1c1c1c) disappeared against
the zebra's #131313 row; #3a3a3a reads on both bands without becoming a
cage around every crest. */
.sc-tbl{--sc-line:#3a3a3a}
/* The seven days are sized EXPLICITLY and identically. table-layout:fixed
distributes leftover space evenly in theory, but only a colgroup guarantees
it — any rounding of the remainder shows up as one column a pixel wider than
its neighbours, which is obvious once there is a rule between them.
7 x 13% = 91%, leaving 9% to be split by the team and GP columns. */
/* Days: 7 x 11% = 77%, an EXACT and equal share. GP is fixed, and the team
column is the only `auto` one, so it absorbs the remainder — nothing is
over-constrained. Declaring all three in px or all in % would total more
than 100% at phone width and the browser would silently shrink columns
unevenly, which is the wobble this is fixing. */
.sc-c-day{width:11%}
.sc-c-gp{width:38px}
.sc-c-tm{width:auto}
/* DESKTOP flips which column is fixed. On a phone the days are pinned at 11%
and the rail takes what is left; here the RAIL is pinned and the days split
the remainder — still equally, because table-layout:fixed divides leftover
space evenly between auto columns.
186px is measured, not picked: crest 46 + gap 10 + the widest city
("Philadelphia", 83px) + 20px of cell padding = 159px, plus headroom so a
font-loading difference cannot clip it again. At 156px, five cities were
losing their last 2-5px — Los Angeles, New Jersey, Philadelphia, Vegas and
Washington. */
/* DESKTOP pins all three, and the table is sized to their SUM (971px) rather
than the columns being fitted into a chosen width. The day columns keep the
103px they have always had — widening the rail must not come out of them.
186px for the rail is measured: crest 46 + gap 10 + the widest city
("Philadelphia", 83px) + 20px cell padding = 159, plus headroom so a
font-loading difference cannot clip it again. At the old 156px, five cities
lost their last 2-5px: Los Angeles, New Jersey, Philadelphia, Vegas,
Washington. */
@media (min-width:760px){
.sc-c-gp{width:64px}
.sc-c-tm{width:186px}
.sc-c-day{width:103px}
}
/* NO overflow here. `.tbl-scroll` sets overflow-x:auto, which makes overflow-y
compute to auto as well — that turns the wrapper into a scroll container, so
a sticky thead pins to the WRAPPER (which never scrolls vertically) instead
of the viewport, and the day names scroll away. The table is table-layout:
fixed and fits every width, so it does not need a scroll container. */
.sc-wrap{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel)}
.sc-tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
min-width:0}
.sc-tbl th,.sc-tbl td{padding:0;text-align:center;vertical-align:middle}
.sc-tbl thead th{background:var(--panel-2);border-bottom:1px solid var(--rule);
padding:6px 1px 7px;position:sticky;top:var(--mast-h,52px);z-index:12}
/* A rule between every day, so the eye can run DOWN a single column. Without
it the seven days read as one field of crests. */
.sc-tbl thead th.sc-day,.sc-tbl tbody td.sc-gm,
.sc-tbl tbody td.sc-off,.sc-tbl tbody td.sc-out{
border-right:1px solid var(--sc-line)}
.sc-dow{display:block;font-family:'Neometric',system-ui,sans-serif;
font-size:var(--t-label);letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-3);line-height:1.25}
.sc-dnum{display:block;font-size:13px;color:var(--ink-2);line-height:1.25;
font-variant-numeric:tabular-nums}
.sc-dct{display:block;margin-top:2px;font-size:var(--t-label);font-weight:700;
color:var(--ink-3);font-variant-numeric:tabular-nums}
.sc-day.light .sc-dct{color:var(--gold)}
.sc-day.heavy .sc-dct{color:var(--brand-ink)}
.sc-day.out{background:#0d0d0d}
.sc-day.out .sc-dow,.sc-day.out .sc-dnum{color:#4d4d4d}
/* PERIOD BOUNDARY INSIDE A WEEK. A week can hold two Fantrax periods -- in
2026/27 the regular season ends Wed Mar 10 and the playoffs open Thu Mar 11,
both inside Mar 7-13. Without a mark in the grid the week reads as one
continuous block and the chips above it look wrong. The rule runs the full
column height, and goes GOLD when the period it opens is a playoff one.
Left border, not right: it belongs to the day that STARTS the new period.
Everything is border-box (line 62), so this eats 2px of the cell rather
than widening the column -- table-layout:fixed keeps the grid exact. */
.sc-tbl thead th.sc-day.pb,
.sc-tbl tbody td.sc-gm.pb,.sc-tbl tbody td.sc-off.pb,.sc-tbl tbody td.sc-out.pb{
border-left:2px solid var(--brand-ink)}
.sc-tbl thead th.sc-day.pb.po,
.sc-tbl tbody td.sc-gm.pb.po,.sc-tbl tbody td.sc-off.pb.po,
.sc-tbl tbody td.sc-out.pb.po{border-left-color:var(--gold)}
/* The new period's number, in the header cell only. 11px is the structural
label floor, so this sits at it. */
.sc-pflag{display:block;margin-top:1px;font-family:'Neometric',system-ui,sans-serif;
font-size:var(--t-label);font-weight:700;letter-spacing:.02em;
line-height:1.1;color:var(--brand-ink)}
.sc-day.pb.po .sc-pflag{color:var(--gold)}
.sc-key.pb{background:var(--brand-ink)}
.sc-key.pi{background:var(--brand-ink)}
.sc-key.po{background:var(--gold)}
/* Zebra widened again: #050505 against #1a1a1a. Both stay TRUE NEUTRAL —
equal R/G/B — per the palette rule; a warm grey here would be a bug. The
dark band sits below the panel and the light band matches the header bar,
so the alternation reads without either row looking like a selection. */
.sc-tbl tbody tr:nth-child(odd) td,
.sc-tbl tbody tr:nth-child(odd) th{background:#050505}
.sc-tbl tbody tr:nth-child(even) td,
.sc-tbl tbody tr:nth-child(even) th{background:#1a1a1a}
.sc-tbl tbody tr:hover td,.sc-tbl tbody tr:hover th{background:#262626}
/* Rail surfaces: each one step lighter than the day cell on the same row. */
.sc-tbl tbody tr:nth-child(odd) th.sc-tm{background:#131313}
.sc-tbl tbody tr:nth-child(even) th.sc-tm{background:#242424}
.sc-tbl tbody tr:hover th.sc-tm{background:#303030}
/* TODAY'S COLUMN (Bilal 2026-09-30: "add a highlight on the column of the current day"; then "i dont
like blue tint" -- so NEUTRAL, per the Neutral Rule: a white veil, equal R/G/B). Laid over the zebra as a
background IMAGE, so every row keeps its own band and the hover still shows through (the zebra and hover
rules use the `background` shorthand; this selector outranks them for the image). The header's day and
date go full white and bold. */
.sc-tbl{--sc-now:rgba(255,255,255,.07)}
.sc-tbl tbody tr:nth-child(n) td.now,
.sc-tbl thead th.sc-day.now{background-image:linear-gradient(var(--sc-now),var(--sc-now))}
.sc-day.now .sc-dow,.sc-day.now .sc-dnum{color:var(--ink);font-weight:700}
.sc-tbl thead th.sc-tm{border-right:2px solid var(--rule-hover)}
/* The corner cell carries the WEEK and the PERIOD. It is inside the sticky
thead, so both stay put while the 32 team rows scroll -- the chips above the
table do not. Centred, against .sc-tm's left-align, because the two stacked
labels are a unit and not a row label.
Two sizes of the same text: the phone rail is ~44px and "Period 5" does not
fit it, the 186px desktop rail has room for the whole word. */
.sc-tbl thead th.sc-corner{text-align:center!important;padding:6px 2px 7px!important}
.sc-cw,.sc-cp{display:block;font-family:'Neometric',system-ui,sans-serif;
font-size:var(--t-label);letter-spacing:.02em;text-transform:uppercase;
line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.sc-cw{color:var(--ink-2)}
.sc-cw b,.sc-cp b{font-weight:700}
/* The second period of a straddling week, on its own line. `white-space` is
nowrap on the parent and the parent also ellipses, so this has to reset
both or the line is clipped instead of shown. */
.sc-nl{display:block;font-style:normal;white-space:nowrap}
.sc-cp{overflow:visible}
.sc-cp{color:var(--ink-3)}
.sc-cp.po{color:var(--gold)}
.sc-cp.pi{color:var(--brand-ink)}
/* Phone shows the short forms, desktop the words. BOTH halves of the switch
live here, together and AFTER every other .sc-sm/.sc-lg declaration -- the
first attempt put the base `display:none` after the @media override that was
meant to beat it, at equal specificity, and the desktop corner rendered
empty at every width. Same cascade trap as the .y/.f badge rule. */
.sc-sm{display:inline}
.sc-lg{display:none}
@media (min-width:760px){
.sc-sm{display:none}
.sc-lg{display:inline}
}
.sc-tbl thead th.sc-gp{border-left:2px solid var(--rule-hover)}
/* Rows are a FIXED height and nothing inside may grow them. Without the
nowrap below, a two-word nickname ("Golden Knights", "Maple Leafs") wrapped
in the rail and made that one row taller than its neighbours. */
.sc-tbl tbody tr{height:46px}
.sc-tbl tbody td,.sc-tbl tbody th{border-bottom:1px solid var(--sc-line);
height:46px;overflow:hidden}
.sc-tbl tbody tr:last-child td,.sc-tbl tbody tr:last-child th{border-bottom:0}
/* The team column is a RAIL, not a data column: it is the row's label, so it
sits on its own slightly lighter surface and is closed off with a heavier
rule. It still alternates with the zebra so the eye can track a row across
the divide — a flat rail against striped cells breaks that tracking. */
.sc-tm{text-align:left!important;border-right:2px solid var(--rule-hover);
padding:0 4px!important}
/* EVERY NHL logo is 3:2 (viewBox 960x640). A square box therefore letterboxes
it — a 30x30 slot rendered the crest at 30x20 and threw away a third of the
height. Fill the column WIDTH instead and let height follow the ratio; the
column, not the row, is the binding constraint at phone widths. */
/* One line, always. flex on a WRAPPER inside the cell — never on the |
itself, which would drop it out of table layout. */
.sc-tmwrap{display:flex;align-items:center;gap:0;min-width:0;width:100%;position:relative}
/* Every crest links to that team's lines on Daily Faceoff. The anchor is an
empty overlay stretched over the cell, so the crest img keeps its own box
and the 128 GENERATED per-team height rules below still match it.
`.sc-gm` is already position:relative for the "@" marker.
NO hover state: a hairline ring on every crest turned the grid into a field
of boxes on the way to anywhere (Bilal, 2026-09-22). Keyboard focus still
shows, via the global :focus-visible rule. */
.dfo-cell{position:absolute;inset:0;z-index:2}
.sc-crest{width:100%;max-width:52px;height:34px;object-fit:contain;display:block;margin:0 auto}
.sc-nm{display:none}
.sc-gm{position:relative;padding:0 2px!important}
/* Fixed box + contain: every crest is cropped to its artwork now, so each
one fills this box in its longest dimension. Sizes are equal at last —
before cropping, Seattle filled 44% of its viewBox where Montreal filled
68%, and rendered a third smaller for it. */
.sc-op{width:100%;height:30px;object-fit:contain;display:block;margin:0 auto}
/* The "vs BUF" line is gone: it cost a third of the cell to repeat what the
crest already says, and the crest is the thing being scanned. Home/away now
rides in the corner, and the opponent code stays in alt/title. */
.sc-vs{position:absolute;top:1px;left:2px;font-family:'Neometric',system-ui,sans-serif;
font-size:10px;line-height:1;letter-spacing:0;color:var(--ink-2);
pointer-events:none;font-weight:700}
.sc-gm.home .sc-vs{display:none}
.sc-off{color:#333}
.sc-off::after{content:"·";font-size:16px;color:#2e2e2e}
.sc-out{background:repeating-linear-gradient(45deg,#0b0b0b,#0b0b0b 4px,#101010 4px,#101010 8px)}
/* GP is the number the page exists to deliver — "how many games does this
team play this week" — so it is set like a headline, not a table cell, and
graded by VALUE so four reads differently from one without needing a legend.
Four is the practical weekly maximum; one is a team you would not start. */
.sc-gp{border-left:2px solid var(--rule-hover);padding:0 2px}
.sc-gp span{display:inline-flex;align-items:center;justify-content:center;
min-width:30px;height:30px;font-weight:900;font-size:22px;
line-height:1;font-variant-numeric:tabular-nums;
font-family:'Neometric',system-ui,sans-serif;color:var(--ink-3)}
/* FOUR is the week's prize, so it is the one number that takes a FILL. That
follows the palette rule in DESIGN.md — brand blue fills and carries white
text, it is never used as ink — and a filled chip beats coloured text at a
glance, which coloured text alone was not doing.
ONE and TWO are red at FULL strength — one is the worse week of the two,
so dimming it would have read as less urgent, which is backwards. --spoon
is the system's existing red (it marks last place), so no new hue enters
the palette. THREE stays plain white: the ordinary week, and the baseline the
other three are read against. */
/* The fill takes the WHOLE CELL, not a chip inside it. Note the specificity:
the zebra paints `.sc-tbl tbody tr:nth-child(odd) td` (0,2,3), so a plain
`.sc-gp[data-n="4"]` (0,2,0) would lose to it and the blue would never
appear on alternate rows. Qualifying with tbody + td.sc-gp gets to (0,3,2),
which wins on class count against both the zebra and the hover rule. */
.sc-tbl tbody td.sc-gp[data-n="4"],
.sc-tbl tbody td.sc-gp[data-n="5"],
.sc-tbl tbody td.sc-gp[data-n="6"]{background:var(--brand)}
.sc-tbl tbody tr:hover td.sc-gp[data-n="4"],
.sc-tbl tbody tr:hover td.sc-gp[data-n="5"],
.sc-tbl tbody tr:hover td.sc-gp[data-n="6"]{background:#125ea6}
.sc-gp[data-n="4"] span,.sc-gp[data-n="5"] span,.sc-gp[data-n="6"] span{
color:#fff;background:none}
.sc-gp[data-n="3"] span{color:var(--ink)}
.sc-gp[data-n="2"] span{color:var(--spoon)}
.sc-gp[data-n="1"] span,.sc-gp[data-n="0"] span{color:var(--spoon)}
/* .hi/.lo are RELATIVE to the week and used to set colour here, which beat
the value scale above on source order — a week whose maximum was 3 painted
3 blue and 1 gold, so the same number changed colour week to week. Colour
now means the VALUE and nothing else. The week's leaders keep a faint
backing instead, which stacks with the scale rather than fighting it. */
/* The week-relative .hi backing is gone: 4 carries a fill of its own now, and
two blue treatments on the same cell just muddied it. */
.sc-legend{display:flex;flex-wrap:wrap;gap:14px;margin:10px 2px 0;
font-size:var(--t-sub);color:var(--ink-3)}
.sc-legend b{color:var(--ink-2);font-weight:700}
.sc-key{display:inline-block;width:10px;height:10px;border-radius:2px;
vertical-align:-1px;margin-right:5px;background:#222}
.sc-key.out{background:repeating-linear-gradient(45deg,#0b0b0b,#0b0b0b 3px,#141414 3px,#141414 6px);
border:1px solid #242424}
@media (min-width:760px){
/* Capped well inside the 1220px shell. At full width the seven columns run
~150px each and the crests balloon. 971px is not a round number by
accident: it is exactly rail 186 + seven day columns of 103 + GP 64, so
every column is its intended size and nothing is squeezed to fit. Nav, chips, table and legend share
the measure so the block reads as one column. */
.sc-nav,.sc-meta,.sc-wrap,.sc-legend{max-width:971px;
margin-left:auto;margin-right:auto}
.sc-tm{padding:0 10px!important;display:table-cell}
.sc-tmwrap{gap:10px}
/* Rail crest only — the day-column crests are untouched.
HEIGHT is the binding constraint, not width: the logos are 3:2, so a
46x40 box rendered them at 46x30.7 (width-limited). A 68x45 box renders
them at ~67x45 — height-limited now, and roughly double the area.
The arithmetic that keeps it safe: rail 186 = padding 20 + crest 68 +
gap 10 + 88 left for text, against the 83px "Philadelphia" needs. And 45px
of crest sits inside the 52px row, so no row grows. */
.sc-crest{width:68px;max-width:68px;flex:0 0 68px;height:45px;
object-fit:contain;display:block;margin:0}
.sc-nm{display:flex;flex-direction:column;line-height:1.2;text-align:left;
min-width:0;flex:1 1 auto;overflow:hidden}
.sc-nm b,.sc-nm i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
display:block}
.sc-nm b{font-family:'Neometric',system-ui,sans-serif;font-size:13px;
font-weight:700;color:var(--ink)}
.sc-nm i{font-style:normal;font-size:var(--t-sub);color:var(--ink-3)}
.sc-gp span{font-size:26px;min-width:38px;height:38px}
.sc-op{height:36px}
.sc-vs{font-size:var(--t-label)}
.sc-tbl tbody tr{height:52px}
.sc-tbl tbody td,.sc-tbl tbody th{height:52px}
}
/* ── PHONE: tighter rows so more of the league fits on one screen ──────────
Bilal, 2026-08-23: "reduce the row heights and logo sizes on the left hand
side to fit a few more rows". Measured at 390x844 before and after:
9 rows visible -> 13. Desktop is deliberately untouched — it has the height
to spare and the 46px row is what makes the crests read at arm's length.
The rail crest shrinks FIRST because it was the binding constraint: at
35x34 in a 46px row it left only 6px of breathing room, so the row could
not come down without the crest touching the rules. Every NHL crest is 3:2
(viewBox 960x640), so width and height move together — 30x20 keeps the
ratio exactly and stays above the ~28px where the wordmark-style crests
(NYR, CBJ, DET) stop being identifiable.
Row 36px is the floor, not a preference: the opponent crest is 24px and the
cell keeps 6px top and bottom, which is what stops the zebra banding from
reading as a solid block. */
@media (max-width:759px){
.sc-tbl tbody tr{height:36px}
.sc-tbl tbody td,.sc-tbl tbody th{height:36px}
/* HEIGHT is the binding constraint here, not width, and that is why the
first pass looked shrunken. normalize_logos.py cropped every crest to its
own ARTWORK, so they are no longer the uniform 3:2 of the source viewBox
— the aspect now runs from VGK at 0.75 (tall) to NSH at 1.64 (wide),
median 1.15. With object-fit:contain, most crests are therefore fitted to
the box HEIGHT, so raising max-width alone does nothing: at 30x20 the
median crest rendered just 23x20 inside it.
28px in a 36px row leaves 4px top and bottom. max-width 46px is what the
widest crest (NSH) needs at that height, so no crest is width-clipped in
a rail wide enough to hold it. */
.sc-crest{max-width:46px;height:28px}
/* Give the rail those last few px rather than taking them off the day
columns, which still have to hold a 24px opponent crest. The rail is
the only `auto` column, so anything the GP column gives up lands here:
GP needs 26px for its chip plus padding, so 34px is enough and 38 was
generous. `.sc-tm` carries !important in the base rule, so the tighter
padding has to match it. Together they hand the crest ~8px. */
.sc-c-gp{width:34px}
.sc-tm{padding:0 2px!important}
.sc-op{height:24px}
.sc-gp span{min-width:26px;height:26px;font-size:18px}
/* The header stacks day / date / game-count on three lines, which cost 61px
— more than a row and a half. Tightened leading and no gap between the
date and the count claws back 12px without dropping a line. */
.sc-tbl thead th{padding:4px 1px 5px}
.sc-dow{line-height:1.1}
.sc-dnum{font-size:12px;line-height:1.1}
.sc-dct{margin-top:0;line-height:1.15}
}
/* ── projections (#proj, private) ───────────────────────────────────────
A probability is not a result: nothing here is gold. The favoured side is
full ink, the other tertiary; the finish grid is a brand-blue FILL (rank is
position) under white ink. */
.pj-pick{margin:0 0 10px}
.pj-game{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(60px,1.2fr) 44px minmax(0,1fr) 64px;
align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--rule-hair);color:var(--ink-3);
transition:background-color var(--tf)}
.pj-game:last-child{border-bottom:none}
.pj-game:hover{background:rgba(255,255,255,.06)}
.pj-nm{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:var(--t-title);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-nm.r{text-align:right}
.pj-p{font-weight:700;font-size:var(--t-num);font-variant-numeric:tabular-nums;text-align:center}
.pj-nm.fav,.pj-p.fav{color:var(--ink)}
.pj-bar .bar{margin-top:0}
.pj-sc{font-size:var(--t-sub);font-variant-numeric:tabular-nums;text-align:right}
.edge-side.pj-fav{color:var(--ink)}
.pj-exp{display:inline-block;min-width:52px;color:var(--ink-3);font-weight:400;font-size:var(--t-sub);
margin:0 10px}
.pj-tie{display:block;margin-top:3px;font-size:var(--t-label);color:var(--ink-3)}
.pj-h{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:var(--t-label);
letter-spacing:.13em;color:var(--ink-2);margin:0 0 6px}
.pj-slot{font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;
color:var(--ink-3);width:30px}
.pj-tot td{border-top:1px solid var(--rule);font-weight:700;color:var(--ink)}
.pj-heat{background:rgba(12,78,140,var(--a));color:#fff}
/* Sunday Morning Recap (Record Book): heat per column, colour from cbColor() in app.js (palette toggle); tight cells so 16 columns fit a desktop card */
.cb .cb-pal{margin-bottom:10px}
.cb .tbl th,.cb .tbl td{padding-left:7px;padding-right:7px}
.pj-fin td,.pj-fin th,.pj-mx td,.pj-mx th{padding-left:6px;padding-right:6px}
.pj-back{margin:14px 0 0}
.pj-sb .sb-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
@media (max-width:560px){
.pj-sb .sb-head{padding:18px 10px;gap:6px}
.pj-sb .sb-score{font-size:34px}
.pj-sb .sb-team .nm{font-size:var(--t-card)}
.pj-sb .pj-dates{display:none}
.pj-game{grid-template-columns:minmax(0,1fr) 38px 38px minmax(0,1fr);gap:8px}
.pj-bar,.pj-sc{display:none}
.pj-exp{min-width:40px;margin:0 6px}
}
/* >>> GENERATED crest sizes -- gen_crest_css.py */
/* Per-team crest heights: EQUAL APPARENT SIZE, not equal boxes.
normalize_logos.py crops each crest to its own artwork, so the aspects
run from VGK 0.75 (tall) to NSH 1.64 (wide). With object-fit:contain and
one box shape, a wide crest renders full-width and short while a tall one
renders full-height and narrow -- equal boxes, unequal ink (NSH covered
~1.6x the area VGK did).
The eye reads AREA, so h = sqrt(A / aspect), softened by K=0.34 (0.5 would
be exact) and clamped to the row -- exact equalisation puts VGK at 34.6px
in a 36px row. Area spread across the 32 clubs: 2.20x -> 1.50x.
Keyed on the img src, so no markup change is needed. The attribute
selector is (0,2,0) and beats the flat .sc-crest / .sc-op heights above
regardless of order. */
@media (max-width:759px){
.sc-crest[src$="/ANA.svg"]{height:28px}
.sc-crest[src$="/BOS.svg"]{height:29px}
.sc-crest[src$="/BUF.svg"]{height:29px}
.sc-crest[src$="/CAR.svg"]{height:25px}
.sc-crest[src$="/CBJ.svg"]{height:28px}
.sc-crest[src$="/CGY.svg"]{height:27px}
.sc-crest[src$="/CHI.svg"]{height:28px}
.sc-crest[src$="/COL.svg"]{height:27px}
.sc-crest[src$="/DAL.svg"]{height:27px}
.sc-crest[src$="/DET.svg"]{height:26px}
.sc-crest[src$="/EDM.svg"]{height:29px}
.sc-crest[src$="/FLA.svg"]{height:30px}
.sc-crest[src$="/LAK.svg"]{height:25px}
.sc-crest[src$="/MIN.svg"]{height:25px}
.sc-crest[src$="/MTL.svg"]{height:26px}
.sc-crest[src$="/NJD.svg"]{height:29px}
.sc-crest[src$="/NSH.svg"]{height:24px}
.sc-crest[src$="/NYI.svg"]{height:29px}
.sc-crest[src$="/NYR.svg"]{height:29px}
.sc-crest[src$="/OTT.svg"]{height:27px}
.sc-crest[src$="/PHI.svg"]{height:26px}
.sc-crest[src$="/PIT.svg"]{height:28px}
.sc-crest[src$="/SEA.svg"]{height:30px}
.sc-crest[src$="/SJS.svg"]{height:27px}
.sc-crest[src$="/STL.svg"]{height:27px}
.sc-crest[src$="/TBL.svg"]{height:28px}
.sc-crest[src$="/TOR.svg"]{height:30px}
.sc-crest[src$="/UTA.svg"]{height:26px}
.sc-crest[src$="/VAN.svg"]{height:28px}
.sc-crest[src$="/VGK.svg"]{height:30px}
.sc-crest[src$="/WPG.svg"]{height:29px}
.sc-crest[src$="/WSH.svg"]{height:25px}
.sc-op[src$="/ANA.svg"]{height:27px}
.sc-op[src$="/BOS.svg"]{height:28px}
.sc-op[src$="/BUF.svg"]{height:28px}
.sc-op[src$="/CAR.svg"]{height:24px}
.sc-op[src$="/CBJ.svg"]{height:27px}
.sc-op[src$="/CGY.svg"]{height:26px}
.sc-op[src$="/CHI.svg"]{height:27px}
.sc-op[src$="/COL.svg"]{height:26px}
.sc-op[src$="/DAL.svg"]{height:26px}
.sc-op[src$="/DET.svg"]{height:25px}
.sc-op[src$="/EDM.svg"]{height:28px}
.sc-op[src$="/FLA.svg"]{height:28px}
.sc-op[src$="/LAK.svg"]{height:24px}
.sc-op[src$="/MIN.svg"]{height:24px}
.sc-op[src$="/MTL.svg"]{height:25px}
.sc-op[src$="/NJD.svg"]{height:28px}
.sc-op[src$="/NSH.svg"]{height:24px}
.sc-op[src$="/NYI.svg"]{height:28px}
.sc-op[src$="/NYR.svg"]{height:28px}
.sc-op[src$="/OTT.svg"]{height:26px}
.sc-op[src$="/PHI.svg"]{height:25px}
.sc-op[src$="/PIT.svg"]{height:27px}
.sc-op[src$="/SEA.svg"]{height:28px}
.sc-op[src$="/SJS.svg"]{height:26px}
.sc-op[src$="/STL.svg"]{height:26px}
.sc-op[src$="/TBL.svg"]{height:27px}
.sc-op[src$="/TOR.svg"]{height:28px}
.sc-op[src$="/UTA.svg"]{height:25px}
.sc-op[src$="/VAN.svg"]{height:27px}
.sc-op[src$="/VGK.svg"]{height:28px}
.sc-op[src$="/WPG.svg"]{height:28px}
.sc-op[src$="/WSH.svg"]{height:24px}
}
/* DESKTOP: same treatment, same reasoning. The rail is held near where it
already was -- its 68x45 box had only 7px of vertical headroom in a 52px
row -- and the DAY crests are grown to meet it instead: they had 16px
spare and a 98px-wide box that only the tallest crests came near
filling. That closes the gap without touching the row height, the 186px
rail (measured against "Philadelphia") or anything else in the layout.
Before: day area / rail area 0.648, rail spread 2.02x, day spread 2.21x. */
@media (min-width:760px){
.sc-crest[src$="/ANA.svg"]{height:45px}
.sc-crest[src$="/BOS.svg"]{height:46px}
.sc-crest[src$="/BUF.svg"]{height:46px}
.sc-crest[src$="/CAR.svg"]{height:40px}
.sc-crest[src$="/CBJ.svg"]{height:45px}
.sc-crest[src$="/CGY.svg"]{height:45px}
.sc-crest[src$="/CHI.svg"]{height:45px}
.sc-crest[src$="/COL.svg"]{height:44px}
.sc-crest[src$="/DAL.svg"]{height:44px}
.sc-crest[src$="/DET.svg"]{height:43px}
.sc-crest[src$="/EDM.svg"]{height:46px}
.sc-crest[src$="/FLA.svg"]{height:46px}
.sc-crest[src$="/LAK.svg"]{height:41px}
.sc-crest[src$="/MIN.svg"]{height:41px}
.sc-crest[src$="/MTL.svg"]{height:42px}
.sc-crest[src$="/NJD.svg"]{height:46px}
.sc-crest[src$="/NSH.svg"]{height:40px}
.sc-crest[src$="/NYI.svg"]{height:46px}
.sc-crest[src$="/NYR.svg"]{height:46px}
.sc-crest[src$="/OTT.svg"]{height:44px}
.sc-crest[src$="/PHI.svg"]{height:42px}
.sc-crest[src$="/PIT.svg"]{height:46px}
.sc-crest[src$="/SEA.svg"]{height:46px}
.sc-crest[src$="/SJS.svg"]{height:45px}
.sc-crest[src$="/STL.svg"]{height:44px}
.sc-crest[src$="/TBL.svg"]{height:46px}
.sc-crest[src$="/TOR.svg"]{height:46px}
.sc-crest[src$="/UTA.svg"]{height:43px}
.sc-crest[src$="/VAN.svg"]{height:46px}
.sc-crest[src$="/VGK.svg"]{height:46px}
.sc-crest[src$="/WPG.svg"]{height:46px}
.sc-crest[src$="/WSH.svg"]{height:41px}
.sc-op[src$="/ANA.svg"]{height:43px}
.sc-op[src$="/BOS.svg"]{height:45px}
.sc-op[src$="/BUF.svg"]{height:45px}
.sc-op[src$="/CAR.svg"]{height:38px}
.sc-op[src$="/CBJ.svg"]{height:43px}
.sc-op[src$="/CGY.svg"]{height:43px}
.sc-op[src$="/CHI.svg"]{height:43px}
.sc-op[src$="/COL.svg"]{height:42px}
.sc-op[src$="/DAL.svg"]{height:42px}
.sc-op[src$="/DET.svg"]{height:41px}
.sc-op[src$="/EDM.svg"]{height:45px}
.sc-op[src$="/FLA.svg"]{height:46px}
.sc-op[src$="/LAK.svg"]{height:39px}
.sc-op[src$="/MIN.svg"]{height:39px}
.sc-op[src$="/MTL.svg"]{height:40px}
.sc-op[src$="/NJD.svg"]{height:45px}
.sc-op[src$="/NSH.svg"]{height:38px}
.sc-op[src$="/NYI.svg"]{height:45px}
.sc-op[src$="/NYR.svg"]{height:44px}
.sc-op[src$="/OTT.svg"]{height:42px}
.sc-op[src$="/PHI.svg"]{height:40px}
.sc-op[src$="/PIT.svg"]{height:44px}
.sc-op[src$="/SEA.svg"]{height:46px}
.sc-op[src$="/SJS.svg"]{height:42px}
.sc-op[src$="/STL.svg"]{height:42px}
.sc-op[src$="/TBL.svg"]{height:44px}
.sc-op[src$="/TOR.svg"]{height:46px}
.sc-op[src$="/UTA.svg"]{height:41px}
.sc-op[src$="/VAN.svg"]{height:44px}
.sc-op[src$="/VGK.svg"]{height:46px}
.sc-op[src$="/WPG.svg"]{height:45px}
.sc-op[src$="/WSH.svg"]{height:39px}
}
/* <<< END generated crest sizes */
/* ── Gambling (betting.py) ───────────────────────────────────────────────────
Concept A, the SCOREBUG CARD (Bilal 2026-10-01; previews/gambling-concepts.html). One card per
matchup: the Fantrax team logos, the live score, each team's expected games left, the three-way chance
bar, the three prices, then the line since it opened and the bets placed. The logos keep their colour,
like the NHL crests on the Schedule: they are team marks, not the manager photographs the greyscale rule
covers. Blue marks the selected pick (state); the outcome that came in is gold (what was won). Every
class here is bt- prefixed: .lbl .money .chip .won .out already mean something elsewhere. */
.bt-k{font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.bt-money{color:var(--teal-ink)}
.bt-wonv{color:var(--gold);font-weight:700}
.bt-top{margin:0 0 18px}
.bt-acct{display:flex;align-items:center;gap:12px;padding:0 0 14px;border-bottom:1px solid var(--rule-hair)}
.bt-acct .who{min-width:0;flex:1}
.bt-acct .who b{display:block;font-family:var(--fd);font-weight:900;font-size:var(--t-value);text-transform:uppercase;
line-height:1.05;overflow-wrap:anywhere}
.bt-acct .who .bt-k{display:block;margin-top:5px}
.bt-acct .roll{text-align:right}
.bt-acct .roll b{display:block;font-weight:700;font-size:var(--t-card);line-height:1;font-variant-numeric:tabular-nums}
.bt-acct .roll span{display:block;margin-top:5px;font-size:var(--t-sub);color:var(--ink-3);font-variant-numeric:tabular-nums}
.bt-acct.out .bt-k{flex:1;min-width:0}
.bt-acct .btn{flex:none;white-space:nowrap}
.btn.bt-pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.bt-on{border-color:var(--brand-ink)}
.bt-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:14px 0;border-bottom:1px solid var(--rule-hair)}
.bt-f{display:flex;flex-direction:column;gap:5px;flex:1 1 140px;min-width:0}
.bt-in{background:var(--panel-2);border:1px solid var(--rule);border-radius:2px;min-height:40px;
padding:0 10px;font-size:var(--t-body);width:100%;transition:border-color var(--tf)}
.bt-in:hover{border-color:var(--rule-hover)}
.bt-go{min-height:40px}
.bt-msg{flex-basis:100%;color:var(--spoon);font-size:var(--t-sub)}
/* period header: name and dates, the five-day strip (NHL games each day, today outlined), state */
.bt-period+.bt-period{margin-top:26px}
.bt-ph{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px;margin:0 0 12px}
.bt-pt h2{margin:0;font-family:var(--fd);font-weight:900;font-size:var(--t-card);text-transform:uppercase;line-height:1}
.bt-pt .bt-k{display:block;margin-top:5px}
.bt-pr{display:flex;align-items:center;gap:8px;justify-self:end}
.bt-lk{white-space:nowrap}
.bt-fmt button{min-height:28px;padding:0 9px}
.bt-days{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px}
.bt-dc{display:flex;align-items:center;justify-content:space-between;gap:4px;height:28px;padding:0 8px;
border:1px solid var(--rule);border-radius:2px}
.bt-dc .k{font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bt-dc .n{font-weight:700;font-size:var(--t-sub);color:var(--ink-3);font-variant-numeric:tabular-nums}
.bt-dc.done{background:var(--panel-2);border-color:var(--panel-2)}
.bt-dc.now{border-color:var(--brand-ink)}
.bt-dc.now .k,.bt-dc.now .n{color:var(--ink)}
.bt-chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--rule-hover);border-radius:2px;
font-family:var(--fd);font-weight:800;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;line-height:1;
color:var(--ink-2);white-space:nowrap}
.bt-chip.open{background:var(--brand);border-color:var(--brand);color:#fff}
.bt-chip.upd{border-style:dashed}
.bt-chip.final{border-color:var(--gold);color:var(--gold)}
@media (min-width:900px){
.bt-ph{grid-template-columns:auto 1fr auto;gap:12px 22px}
.bt-days{grid-column:auto;max-width:520px}
}
/* the cards */
.bt-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start} /* an opened chart grows only its own card */
@media (min-width:720px){.bt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* three a row once a card can be as wide as a phone's (Bilal: "i like the 3 in a row view better") */
@media (min-width:1150px){.bt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bt-card{border:1px solid var(--rule-card);border-radius:var(--r);background:var(--panel);padding:13px 13px 12px;min-width:0}
.bt-sb{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.bt-tm{display:flex;align-items:center;gap:9px;min-width:0}
.bt-tm.r{flex-direction:row-reverse;text-align:right}
.bt-logo{width:44px;height:44px;flex:0 0 44px;border-radius:2px;object-fit:cover;background:var(--panel-2);border:1px solid var(--rule)}
.bt-mono{display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;font-size:var(--t-value);
text-transform:uppercase;color:var(--ink-2)}
.bt-tm .nm{font-family:var(--fd);font-weight:900;font-size:var(--t-value);text-transform:uppercase;line-height:1.05;color:var(--ink-3);
min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-tm.lead .nm{color:var(--ink)}
.bt-tm.won .nm{color:var(--gold)}
.bt-tm.won .bt-logo{border-color:var(--gold)}
.bt-sc{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:900;font-size:var(--t-display);line-height:1;
font-variant-numeric:tabular-nums}
.bt-sc b{font-weight:900;color:var(--ink-3)}
.bt-sc b.hi{color:var(--ink)}
.bt-sc i{font-style:normal;font-size:var(--t-card);color:var(--rule-hover)}
.bt-gp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:9px}
.bt-gp>:last-child{text-align:right}
/* three-way chance bar: the favourite in Brand Ink (the win-percentage bar), the other side grey */
.bt-tri{display:flex;gap:2px;height:8px;margin-top:12px}
.bt-tri i{display:block;height:100%;min-width:2px;background:var(--ink-3)}
.bt-tri i:first-child{border-radius:2px 0 0 2px}
.bt-tri i:last-child{border-radius:0 2px 2px 0}
.bt-tri i.t{background:var(--rule-hover)}
.bt-tri i.fav{background:var(--brand-ink)}
.bt-tri-l{display:flex;justify-content:space-between;margin-top:6px;font-weight:700;font-size:var(--t-sub);color:var(--ink-3);
font-variant-numeric:tabular-nums}
.bt-tri-l .fav{color:var(--ink)}
.bt-tri-l .t{font-weight:400}
.bt-odds{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:6px;margin-top:10px}
.bt-odd{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;height:44px;padding:0 10px;
background:var(--panel-2);border:1px solid var(--rule);border-radius:2px;cursor:pointer;color:var(--ink);
transition:background-color var(--tf),border-color var(--tf),color var(--tf)}
.bt-odd:hover:not([disabled]){border-color:var(--rule-hover)}
.bt-odd .nm{font-family:var(--fd);font-weight:800;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bt-odd .o{font-weight:700;font-size:var(--t-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.bt-odd.tie{flex-direction:column;justify-content:center;gap:3px;padding:0 4px}
.bt-odd.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.bt-odd.sel .nm{color:#fff}
.bt-odd[disabled]{cursor:default;color:var(--ink-2)}
.bt-odd.mine{border-color:var(--brand-ink)}
.bt-odd.won{border-color:var(--gold)}
.bt-odd.won .nm,.bt-odd.won .o{color:var(--gold)}
.bt-slip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px;margin:8px 0 0;
background:var(--panel-2);border:1px solid var(--brand);border-radius:2px}
.bt-pick{font-family:var(--fd);font-weight:800;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase}
.bt-pick b{font-family:var(--fb);font-size:var(--t-num);letter-spacing:0;margin-left:6px}
.bt-q{display:flex;gap:4px;margin-left:auto}
.bt-q button{appearance:none;height:30px;padding:0 8px;border:1px solid var(--rule);border-radius:2px;background:var(--panel);cursor:pointer;
font-weight:700;font-size:var(--t-sub);font-variant-numeric:tabular-nums;transition:border-color var(--tf)}
.bt-q button[aria-pressed="true"]{border-color:var(--brand-ink)}
.bt-q button[disabled]{cursor:default;color:var(--ink-3)}
.bt-amt{display:flex;align-items:center;gap:6px;font-weight:700}
.bt-amt .bt-in{width:76px;min-height:36px;font-variant-numeric:tabular-nums}
.bt-win{display:flex;align-items:baseline;gap:7px;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.bt-win b{font-size:var(--t-value)}
.bt-slip .bt-go{min-height:36px}
.bt-note{color:var(--ink-3);font-size:var(--t-sub)}
/* the foot: the LINE toggle (the favourite's opening and current chance) and the bets placed;
the chart opens under it */
.bt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:11px;
border-top:1px solid var(--rule-hair)}
.bt-lt{appearance:none;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px 0 8px;min-width:0;
background:transparent;border:1px solid var(--rule);border-radius:2px;cursor:pointer;color:var(--ink-2);
transition:border-color var(--tf),background-color var(--tf)}
.bt-lt:hover{border-color:var(--rule-hover)}
.bt-lt[aria-expanded="true"]{border-color:var(--brand-ink)}
.bt-lt svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.bt-lt[aria-expanded="true"] svg{transform:rotate(180deg)}
.bt-lt .sum{font-size:var(--t-sub);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-book{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.bt-book .tot{display:flex;align-items:baseline;gap:7px}
.bt-book b{font-weight:700;font-size:var(--t-value);line-height:1.1;font-variant-numeric:tabular-nums}
.bt-sides{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 8px;font-size:var(--t-sub);color:var(--ink-3);
font-variant-numeric:tabular-nums}
/* the signed-in user's bets on the matchup, under the prices */
.bt-you{margin-top:8px;border-top:1px solid var(--rule-hair)}
.bt-yr{display:flex;align-items:baseline;gap:10px;padding:7px 0 0}
.bt-yr .p{font-family:var(--fd);font-weight:900;font-size:var(--t-body);text-transform:uppercase;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-yr .p b{font-family:var(--fb);font-weight:700;font-size:var(--t-num);margin-left:7px;color:var(--ink-2)}
.bt-yr .r{margin-left:auto;font-size:var(--t-sub);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.bt-yr .r b{font-size:var(--t-num);font-weight:700}
.bt-yr .x{margin-left:8px}
.bt-yr.lost .p{color:var(--ink-3)}
.bt-chart{margin-top:10px}
.bt-chart[hidden]{display:none}
.bt-ch-h{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0 0 6px}
.bt-leg{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-2)}
.bt-leg i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-left:4px}
.bt-leg i:first-child{margin-left:0}
.bt-leg i.fav{background:var(--brand-ink)}
.bt-leg i.oth{background:var(--ink-3)}
.bt-chart svg{display:block;width:100%;height:auto}
.bt-chart .g{stroke:var(--rule-hair);stroke-width:1}
.bt-chart .g.mid{stroke:var(--rule);stroke-dasharray:3 4}
.bt-chart .sep{stroke:var(--rule);stroke-width:1}
.bt-chart text{font-family:var(--fb);font-size:11px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.bt-chart text.d{font-family:var(--fd);font-weight:700;letter-spacing:.1em}
.bt-chart text.e{font-weight:700}
.bt-chart text.e.fav{fill:var(--ink)}
.bt-chart .ln{fill:none;stroke-width:2}
.bt-chart .ln.fav{stroke:var(--brand-ink)}
.bt-chart .ln.oth{stroke:var(--ink-3)}
.bt-chart .o{fill:var(--panel);stroke-width:1.5}
.bt-chart .o.fav{stroke:var(--brand-ink)}
.bt-chart .o.oth{stroke:var(--ink-3)}
.bt-card.shut .bt-odd .o{color:var(--ink-2)}
/* My Bets as tickets */
.bt-tks{margin:-9px -13px -12px}
.bt-tk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:11px 13px;border-bottom:1px solid var(--rule-hair)}
.bt-tk:last-child{border-bottom:0}
.bt-tk .m{font-family:var(--fd);font-weight:800;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bt-tk .p{font-family:var(--fd);font-weight:900;font-size:var(--t-value);text-transform:uppercase;line-height:1.1}
.bt-tk .p b{font-family:var(--fb);font-weight:700;font-size:var(--t-num);margin-left:8px;color:var(--ink-2)}
.bt-tk .r{grid-row:1/3;grid-column:2;align-self:center;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bt-tk .r span{font-size:var(--t-sub);color:var(--ink-3)}
.bt-tk .r b{font-weight:700;font-size:var(--t-value)}
.bt-tk .live{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:6px}
.bt-tk .x{font-size:var(--t-sub);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.bt-tk .x.bt-wonv{color:var(--gold)}
.bt-tk.lost .p{color:var(--ink-3)}
.bt-pb{flex:1;height:4px;border-radius:2px;background:var(--rule)}
.bt-pb i{display:block;height:100%;border-radius:2px;background:var(--brand-ink)}
/* My Bets / All Bets (2026-10-06): a status segment with counts, then Bettor / Period / Sort selects;
Record, Staked, Net for what the period and bettor filters keep; tickets, the first 12 until Show all */
.bt-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.bt-st button{padding:0 10px;gap:6px}
.bt-st button .c{font-family:var(--fb);font-weight:700;font-size:var(--t-sub);letter-spacing:0;color:var(--ink-3);
font-variant-numeric:tabular-nums}
.bt-st button[aria-pressed="true"] .c{color:#fff}
.bt-sels{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.bt-sel{appearance:none;background:var(--panel);border:1px solid var(--rule);border-radius:2px;min-height:34px;
padding:0 28px 0 10px;font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;
text-transform:uppercase;color:var(--ink);cursor:pointer;transition:border-color var(--tf);
background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.bt-sel:hover{border-color:var(--rule-hover)}
.bt-sum{display:flex;gap:22px;padding:0 0 10px;margin:0 0 9px;border-bottom:1px solid var(--rule-hair)}
.bt-sum>span{display:flex;flex-direction:column;gap:4px}
.bt-sum b{font-weight:700;font-size:var(--t-value);font-variant-numeric:tabular-nums;line-height:1}
.bt-sum b.neg,.bt-pn b.neg{color:var(--ink-2)}
.bt-list .bt-tks{margin:0 -13px -12px}
.bt-list:not(.expanded) .bt-tk:nth-child(n+13){display:none}
.bt-tk .m b{font-weight:800;color:var(--ink-2)}
@media (max-width:560px){
.bt-st{flex:1 1 100%}
.bt-st button{flex:1;justify-content:center;padding:0 4px;min-height:40px}
.bt-sels{margin-left:0;width:100%}
.bt-sel{flex:1 1 0;min-width:0;min-height:40px}
}
/* a settled period, compact under the live one: header + Results toggle; open, one row a matchup */
.bt-period.done .bt-ph{margin:0;padding:12px 0;border-top:1px solid var(--rule-hair);border-bottom:1px solid var(--rule-hair)}
.bt-period.done .bt-pt h2{font-size:var(--t-value)}
.bt-pn{display:inline-flex;align-items:baseline;gap:6px}
.bt-pn b{font-weight:700;font-size:var(--t-num);font-variant-numeric:tabular-nums}
.bt-rsl{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 36px;padding:4px 0 0}
.bt-rsl[hidden]{display:none}
.bt-rs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid var(--rule-hair)}
.bt-rs .bt-logo{width:30px;height:30px;flex-basis:30px}
.bt-rs .bt-tm .nm{font-size:var(--t-body)}
.bt-rsc{display:flex;align-items:center;gap:5px;font-family:var(--fd);font-weight:900;font-size:var(--t-value);line-height:1;
font-variant-numeric:tabular-nums}
.bt-rsc b{font-weight:900;color:var(--ink-3)}
.bt-rsc b.hi{color:var(--ink)}
.bt-rsc i{font-style:normal;color:var(--rule-hover)}
/* the leaderboard fits a phone (the shared table's 520px scroll floor clipped it) */
.bt-lb{width:100%;border-collapse:collapse;margin:-9px 0 -12px}
.bt-lb th{font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
text-align:left;padding:9px 6px;border-bottom:1px solid var(--rule)}
.bt-lb td{padding:9px 6px;border-bottom:1px solid var(--rule-hair);font-variant-numeric:tabular-nums}
.bt-lb tr:last-child td{border-bottom:0}
.bt-lb .num{text-align:right}
.bt-lb .rk{width:34px;text-align:center}
.bt-lb .rk span{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 3px;border-radius:2px;
font-weight:700;font-size:var(--t-sub)}
.bt-lb tr.first .rk span{background:var(--brand);color:#fff}
.bt-lb .u{font-weight:700;overflow-wrap:anywhere}
.bt-lb tr.me td{background:rgba(255,255,255,.035)}
@media (max-width:560px){
.bt-acct .roll b{font-size:var(--t-value)}
}
/* ── Roster Timeline: Career Share -> Slim Strips -> the why (player page; Bilal 2026-10-02) ─────────
Closed: one share bar. Open: a slim strip per season, each normalised from its own first day to its last
(blank = nobody had him). Segments alternate two neutral steps; a manager picked in the bar is lit in brand
blue (state), the stretch whose story is open is outlined in ink. The story is sentences, in date order.
Hover is the house ink wash. Every class is rt- prefixed (.gap .sel .on already mean something here). */
.rt-sg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;padding:0;
appearance:none;border:0;border-left:2px solid var(--panel);background:var(--rule-card);color:var(--ink);cursor:pointer;
container-type:inline-size;transition:background-color var(--tf)}
.rt-sg.rt-alt{background:var(--rule-hover)}
.rt-sg:hover{background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08))}
.rt-sg .rt-g{font-size:var(--t-sub);line-height:1;color:var(--ink-2)}
.rt-sg .rt-fu,.rt-sg .rt-ab{font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;
white-space:nowrap}
.rt-sg .rt-ab{display:none}
@container (max-width:58px){.rt-sg .rt-g{display:none}}
@container (max-width:44px){.rt-sg .rt-fu{display:none}.rt-sg .rt-ab{display:inline}}
@container (max-width:20px){.rt-sg .rt-ab{display:none}}
.rt-sg.rt-on{background:var(--brand)}
.rt-sg.rt-on .rt-g{color:#fff}
.rt-sg.rt-sel{outline:2px solid var(--ink);outline-offset:-2px}
.rt-top{display:flex;align-items:center;gap:8px}
.rt-share{position:relative;flex:1 1 auto;display:flex;height:26px;gap:2px;min-width:0}
.rt-share .rt-sg{position:relative;flex-basis:0;border-left:0;border-radius:2px}
.rt-none{display:flex;align-items:center;flex:1;padding:0 10px;border:1px dashed var(--rule-hover);border-radius:2px;
font-size:var(--t-sub);color:var(--ink-3)}
.rt-tog{appearance:none;flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;background:transparent;
border:1px solid var(--rule);border-radius:2px;cursor:pointer;font-family:var(--fd);font-weight:700;font-size:var(--t-label);
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:border-color var(--tf)}
.rt-tog:hover{border-color:var(--rule-hover)}
.rt-tog[aria-expanded="true"]{border-color:var(--brand-ink);color:var(--ink)}
.rt-tog svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8}
.rt-tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.rt-strips{display:flex;flex-direction:column;gap:5px;margin-top:12px;padding-top:11px;border-top:1px solid var(--rule-hair)}
.rt-strips[hidden]{display:none}
.rt-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center}
.rt-lab{appearance:none;display:flex;align-items:center;gap:5px;height:18px;padding:0;background:transparent;border:0;cursor:pointer;
font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.04em;color:var(--ink-2)}
.rt-lab .plat-sm{margin-left:0;vertical-align:0}
.rt-lab:hover,.rt-lab[aria-expanded="true"]{color:var(--ink)}
.rt-bar{position:relative;height:18px;background:var(--panel-2);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.rt-bar.rt-live{background:transparent;border-style:dashed;border-color:var(--rule-hover)}
.rt-st{margin:2px 0 6px 70px;padding:8px 0 4px;border-top:1px solid var(--rule-hair);border-bottom:1px solid var(--rule-hair)}
.rt-r{display:grid;grid-template-columns:50px 16px minmax(0,1fr);gap:6px;align-items:baseline;padding:4px 6px;border-radius:2px;
font-size:var(--t-sub);color:var(--ink-2)}
.rt-r .rt-d{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.rt-r .rt-gl{text-align:center;color:var(--ink-3)}
.rt-r .rt-t b{font-family:var(--fd);font-weight:800;font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.rt-r.rt-hl{background:rgba(87,160,221,.14)}
.rt-r.rt-gapr .rt-t,.rt-r.rt-void .rt-t{color:var(--ink-3)}
.rt-x{appearance:none;display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:0 6px;height:20px;background:transparent;
border:1px solid var(--rule);border-radius:2px;cursor:pointer;font-size:var(--t-sub);color:var(--ink-2);transition:border-color var(--tf)}
.rt-x:hover{border-color:var(--rule-hover)}
.rt-x[aria-expanded="true"]{border-color:var(--brand-ink)}
.rt-tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 16px;margin:2px 6px 6px 78px;padding:8px 10px;
background:var(--panel-2);border:1px solid var(--rule);border-radius:2px;font-size:var(--t-sub);color:var(--ink-2)}
.rt-tr[hidden]{display:none}
.rt-tr .rt-who{display:block;margin-bottom:3px;font-family:var(--fd);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3)}
.rt-tr .rt-me{color:var(--ink);font-weight:700}
@media (max-width:560px){.rt-st{margin-left:0}.rt-tr{margin-left:6px;grid-template-columns:1fr}}
/* ── On This Day: trades (Record Book; Bilal 2026-10-01) ─────────────────── */
.otd-r{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:baseline;padding:7px 0;
border-bottom:1px solid var(--rule-hair)}
.otd-r:last-child{border-bottom:0}
.otd .y{font-family:var(--fd);font-weight:900;font-size:var(--t-body);font-variant-numeric:tabular-nums}
.otd-t{display:flex;flex-wrap:wrap;gap:2px 16px;min-width:0}
.otd-side{min-width:0;overflow-wrap:anywhere}
.otd-to{color:var(--ink-3)}
#otd-card:not(.expanded) .otd-r:nth-child(n+7){display:none}
/* Will Smith Trade Options (Record Book, 2026-10-08): per-player points under each package */
#smith-card .rank-sub{display:block;margin-left:0}
#smith-card .tbl-scroll table.tbl{min-width:0}
|