/* sleeper/css/app.css — Thunder Buddies league viewer
   ------------------------------------------------------------------
   Direction: broadcast graphics package. A dark chrome block at the top
   — masthead, status line, tabs — then the content on warm paper below.

   That split is doing the work. An all-paper page reads as a document;
   putting the navigation on a dark ground turns it into an app, gives
   the accent colours something to sit against, and anchors the top of
   a phone screen so the tabs never get lost in the content.

   Colour is rationed and always means something:
     red    the league's own accent — live, leading, the playoff cut
     green  winning, and money won
     gold   weekly high scores and podium places
     blue   information

   The signature is the SPLIT BAR on every matchup: one hard-edged rule
   divided by the two teams' share of the combined score. During the 1pm
   games it tells you who is winning and by how much before you have read
   a single number.

   Deliberately not: rounded pills, drop shadows, a colour per team.
   Twelve owner avatars are already twelve colours.
*/

:root{
  /* Paper */
  --bg:      #ece8e0;
  --panel:   #ffffff;
  --panel-2: #f6f3ed;
  --rule:    #ded8cc;
  --rule-2:  #c2b9a8;

  /* Chrome — the dark block at the top of the page */
  --chrome:   #15181e;
  --chrome-2: #1e232b;
  --chrome-3: #2b323d;
  --on-chrome:      #f4f1ea;
  --on-chrome-dim:  rgba(244,241,234,.62);
  --on-chrome-dim2: rgba(244,241,234,.40);

  /* Ink on paper. Warm near-black; the alpha steps keep hierarchy
     consistent without inventing new greys. */
  --ink:   #16130e;
  --ink-2: rgba(22,19,14,.68);
  --ink-3: rgba(22,19,14,.56);

  /* Accents. Two versions of each: a bright one for dark grounds and
     fills, a darker one that still passes contrast as text on paper. */
  --red:       #e03131;
  --red-ink:   #c0271f;
  --green:     #12b76a;
  --green-ink: #087a48;
  --gold:      #eaa207;
  --gold-ink:  #8a6100;
  --blue:      #3b82f6;
  --blue-ink:  #1d4ed8;

  --silver: #9aa0a6;
  --bronze: #b0713a;

  --display: 'Saira Condensed', 'Oswald', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }

/* A bare `hidden` attribute loses to any class that sets display, and the
   views and week strip all set display. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.45;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Wide enough for the whole 12-team draft board — 36px round column + 12
   columns at 118px + gaps + padding — so a desktop never has to scroll
   sideways to see the last four teams. */
.app-shell{
  max-width:1560px;
  margin:0 auto;
  padding:0 0 72px;
  background:var(--bg);
}

/* Not everything wants the extra width. Grids of cards and wide boards use
   all of it; anything that is read as prose or as a single stacked column
   stays at a comfortable measure and centres, because a matchup ladder
   stretched across 1500px is worse than one at 1000, not better. */
.notice, .games, .roster, .feed{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

a{ color:inherit; }

/* ═══ CHROME ═════════════════════════════════════════════════════════
   Masthead, status line and tabs share one dark ground and read as a
   single block. */

.mast{
  background:var(--chrome);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
  padding:14px 16px 12px;
}
.mast-home{
  order:1;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-chrome-dim);
  text-decoration:none;
  padding:3px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.mast-home:hover{ color:var(--on-chrome); border-bottom-color:var(--red); }

.mast-title{
  order:3;
  flex:0 0 100%;
  min-width:0;
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:clamp(30px, 7.5vw, 52px);
  line-height:.9;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--on-chrome);
  margin:2px 0 0;
}
.mast-meta{
  order:2;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-chrome-dim2);
  min-width:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.mast-meta span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

.statline{
  background:var(--chrome);
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:0 16px 12px;
}
.stat{ display:flex; align-items:baseline; gap:6px; min-width:0; }
.stat-k{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-chrome-dim2);
}
.stat-v{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  text-transform:uppercase;
  color:var(--on-chrome);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.stat{ min-width:0; }
.stat-v.hot{ color:var(--red); }
.stat-v.live{ color:var(--green); }
.statline-end{ margin-left:auto; }

.reload{
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-chrome-dim);
  background:transparent;
  border:1px solid var(--chrome-3);
  padding:5px 12px;
  cursor:pointer;
}
.reload:hover{ color:var(--on-chrome); border-color:var(--red); }
.reload[disabled]{ opacity:.4; cursor:default; }

/* The season picker borrows the button treatment, but a <select> needs an
   explicit ground or the dropdown list renders unreadably on Windows. */
select.reload{
  appearance:none;
  -webkit-appearance:none;
  background:var(--chrome-2);
  color:var(--on-chrome);
  padding:5px 10px;
}
select.reload option{ background:var(--chrome-2); color:var(--on-chrome); }

/* ── Tabs ───────────────────────────────────────────────────────── */
/* Active tab is a solid red fill rather than a hairline underline — on a
   phone, mid-scroll, an underline is not enough to find. */
.tabs{
  background:var(--chrome);
  display:flex;
  gap:2px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:0 10px;
  border-bottom:3px solid var(--red);
}
.tab{
  flex:0 0 auto;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--on-chrome-dim);
  background:transparent;
  border:0;
  padding:9px 13px 8px;
  cursor:pointer;
  white-space:nowrap;
}
.tab:hover{ color:var(--on-chrome); background:var(--chrome-2); }
.tab.on{ color:#fff; background:var(--red); }

/* ── Week strip ─────────────────────────────────────────────────── */
.weeks{
  display:flex;
  gap:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  border-bottom:1px solid var(--rule-2);
  background:var(--panel);
}
.wk{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ink-3);
  background:transparent;
  border:0;
  border-right:1px solid var(--rule);
  padding:9px 13px;
  cursor:pointer;
  white-space:nowrap;
}
.wk:hover{ color:var(--ink); background:var(--panel-2); }
.wk.on{ color:#fff; background:var(--ink); }
.wk.playoff{ color:var(--gold-ink); }
.wk.playoff.on{ color:#fff; background:var(--gold-ink); }

/* ═══ PAPER ══════════════════════════════════════════════════════════ */

/* ── Notices ────────────────────────────────────────────────────── */
/* Block, not flex: these carry more than one inline <b> label, and as a
   flex row each label became its own squeezed column. */
.notice{
  display:block;
  margin:14px auto 0;
  padding-left:14px;
  padding:11px 14px;
  border-left:4px solid var(--blue);
  background:var(--panel);
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-2);
}
.notice b{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue-ink);
  white-space:nowrap;
}
.notice i{ font-style:italic; }
.notice-bad{ border-left-color:var(--red); }
.notice-bad b{ color:var(--red-ink); }
.notice-hold{ border-left-color:var(--gold); }
.notice-hold b{ color:var(--gold-ink); }

.empty{
  padding:44px 16px;
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ── Matchup card ───────────────────────────────────────────────── */
.games{ padding:12px 16px 8px; display:flex; flex-direction:column; gap:10px; }

.game{
  border:1px solid var(--rule);
  border-left:3px solid var(--rule-2);
  background:var(--panel);
}
.game.final{ border-left-color:var(--ink); }

.game-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:12px 14px 10px;
  cursor:pointer;
  user-select:none;
}
.game-head:hover{ background:var(--panel-2); }

.side{ display:flex; align-items:center; gap:9px; min-width:0; }
.side.right{ flex-direction:row-reverse; text-align:right; }

.side-av{
  width:34px; height:34px;
  flex:0 0 34px;
  border-radius:2px;
  background:var(--panel-2);
  object-fit:cover;
}
.side-id{ min-width:0; flex:1 1 auto; }
.side-name{
  font-family:var(--display);
  font-weight:700;
  font-size:15.5px;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side-owner{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.05em;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side-score{
  font-family:var(--mono);
  font-weight:700;
  font-size:20px;
  letter-spacing:-.02em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.side.lead .side-name{ color:var(--ink); }
.side.lead .side-score{ color:var(--ink); }
.game.final .side.lead .side-score{ color:var(--green-ink); }

.game-mid{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:center;
  line-height:1.5;
  flex:0 0 auto;
}
.game-mid .margin{
  display:block;
  color:var(--red-ink);
  font-weight:700;
  font-size:11px;
  letter-spacing:0;
}

/* The split bar. One rule, two shares — no gap, no rounding, so the
   boundary between the teams is the only thing the eye has to find. */
.bar{ display:flex; height:5px; background:var(--rule); overflow:hidden; }
.bar-l{ background:var(--ink); }
.bar-r{ background:var(--red); }

/* ── Head-to-head lineup ladder ─────────────────────────────────── */
.ladder{
  border-top:1px solid var(--rule);
  background:var(--panel-2);
}
.lrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
  align-items:center;
  gap:6px;
  padding:5px 12px;
  min-height:38px;   /* keeps rows even when one name would wrap */
}
.lrow + .lrow{ border-top:1px solid rgba(22,19,14,.06); }
.lrow.bench-head{ background:var(--rule); }
.lrow.total{ background:var(--ink); }
.lrow.total .pl-name{ color:var(--on-chrome); }
.lrow.total .pl-pts{ color:#fff; font-size:14px; }
.lrow.total .lslot{ color:var(--on-chrome-dim); border-color:var(--chrome-3); background:var(--chrome-2); }

.lslot{
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:center;
  border:1px solid var(--rule-2);
  background:var(--panel);
  padding:2px 0;
}

.pl{ display:flex; align-items:center; gap:7px; min-width:0; }
.pl.right{ flex-direction:row-reverse; text-align:right; }
.pl-id{ min-width:0; flex:1 1 auto; }
.pl-name{
  display:block;
  font-size:12.5px;
  font-weight:600;
  line-height:1.25;
  color:var(--ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-name.out{ color:var(--ink-3); text-decoration:line-through; }
.pl-meta{
  display:block;
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.04em;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-meta .inj{ color:var(--red-ink); font-weight:700; }
.pl-pts{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.pl.win .pl-pts{ color:var(--green-ink); font-weight:700; }
.pl.win .pl-name{ color:var(--ink); }
.pl-empty{ color:var(--ink-3); font-style:italic; font-size:12px; }

/* ── Tables ─────────────────────────────────────────────────────── */
.tblwrap{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:12px 16px 0;
}

table.tbl{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
  background:var(--panel);
}
.tbl thead th{
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-chrome-dim);
  background:var(--chrome);
  text-align:right;
  padding:8px;
  white-space:nowrap;
}
.tbl thead th:first-child,
.tbl thead th.l{ text-align:left; }
.tbl tbody td{
  padding:9px 8px;
  border-bottom:1px solid var(--rule);
  text-align:right;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-2);
  white-space:nowrap;
}
.tbl tbody tr:nth-child(even){ background:var(--panel-2); }
.tbl tbody tr:hover{ background:#fffbe9; cursor:pointer; }
.tbl td.l{ text-align:left; font-family:var(--body); }
.tbl .seed{ width:34px; text-align:center; padding-left:6px; padding-right:6px; }

/* Rank chip. Podium colours for the top three — the cheapest way to make
   a 12-row table read as a ranking rather than a list. */
.rankchip{
  display:inline-block;
  min-width:20px;
  padding:2px 4px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  text-align:center;
  color:var(--ink-3);
  background:var(--rule);
}
.tbl tr.playoff .rankchip{ background:var(--red); color:#fff; }
.rankchip.r1{ background:var(--gold);   color:#231a00; }
.rankchip.r2{ background:var(--silver); color:#14171a; }
.rankchip.r3{ background:var(--bronze); color:#fff; }

/* The playoff cut is the most important line in the standings. */
.tbl tr.playoff-cut td{ border-bottom:3px solid var(--red); }

.tteam{ display:flex; align-items:center; gap:8px; min-width:0; }
.tteam img{ width:26px; height:26px; border-radius:2px; flex:0 0 26px; background:var(--panel-2); }
.tteam-name{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  line-height:1.15;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tteam-div{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.05em;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tbl .num-strong{ color:var(--ink); font-weight:700; }
.tbl td.top-weeks{ color:var(--gold-ink); font-weight:700; }
.tbl td.money{ color:var(--green-ink); font-weight:700; }
.tbl td.gb{ color:var(--red-ink); font-weight:600; }
.streak-w{ color:var(--green-ink); font-weight:700; }
.streak-l{ color:var(--red-ink); font-weight:700; }

/* The record string is one character per week; as a row of blocks it reads
   as a shape — three losses in a row is a hole — instead of a word. */
.formline{ display:inline-flex; gap:2px; }
.formline i{
  width:7px; height:13px;
  display:inline-block;
  background:var(--rule-2);
  font-style:normal;
}
.formline i.w{ background:var(--green); }
.formline i.l{ background:var(--red); }
.formline i.t{ background:var(--ink-3); }

/* ── Win-% bar ──────────────────────────────────────────────────── */
/* Colour carries the meaning: above .550 is a playoff team, below .450
   is not. Length alone makes every row look much the same at a glance. */
.pctcell{ display:flex; align-items:center; gap:8px; min-width:120px; }
.pctbar{
  flex:1 1 auto;
  height:6px;
  background:var(--rule);
  display:block;
  min-width:48px;
}
.pctbar i{ display:block; height:100%; background:var(--ink-3); }
.pctbar.good i{ background:var(--green); }
.pctbar.mid  i{ background:var(--gold); }
.pctbar.bad  i{ background:var(--red); }
.pctval{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  color:var(--ink);
  flex:0 0 auto;
}

/* ── Weekly grid ────────────────────────────────────────────────── */
/* 14 weeks never fits a phone, so this one genuinely scrolls. The team
   column is pinned so you always know whose row you are reading. */
.gridwrap{ padding-bottom:4px; }
.grid-tbl th, .grid-tbl td{ padding:6px 7px; }
.tbl .stick{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--panel);
  border-right:2px solid var(--rule-2);
  min-width:160px;
}
.grid-tbl thead .stick{ background:var(--chrome); z-index:3; }
.grid-tbl tbody tr:nth-child(even) .stick{ background:var(--panel-2); }
.grid-tbl tbody tr:hover .stick{ background:#fffbe9; }
.grid-tbl .tteam img{ width:20px; height:20px; flex-basis:20px; }
.grid-tbl .tteam-name{ font-size:13px; }

.wk-cell{ text-align:center !important; min-width:62px; line-height:1.25; }
.wk-pts{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}
.wk-rec{
  display:block;
  font-family:var(--mono);
  font-size:9px;
  color:var(--ink-3);
}
.wk-none{ color:var(--rule-2); }

/* Weekly high score. A gold fill rather than a crown glyph — across 14
   columns the eye is picking out a colour, not reading an icon, and an
   emoji breaks the mono grid alignment. */
.wk-cell.wk-top{ background:rgba(234,162,7,.20); box-shadow:inset 3px 0 0 var(--gold); }
.wk-cell.wk-top .wk-pts{ color:var(--gold-ink); font-weight:700; }

/* ── Playoff race ───────────────────────────────────────────────── */
.racehead{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:21px;
  text-transform:uppercase;
  padding:22px 16px 8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.racehead::after{
  content:"";
  flex:1 1 auto;
  height:3px;
  background:var(--red);
}

.seedlist{ margin:0 16px; border:1px solid var(--rule); border-bottom:0; }
.seedrow{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-bottom:1px solid var(--rule);
  background:var(--panel);
  border-left:3px solid transparent;
  cursor:pointer;
}
.seedrow:nth-child(even){ background:var(--panel-2); }
.seedrow:hover{ background:#fffbe9; }
/* The top two seeds are the ones with a first-round bye. */
.seedrow:nth-child(-n+2){ border-left-color:var(--gold); }
.seedrow .tteam{ flex:1 1 180px; }

.seedno{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:27px;
  line-height:1;
  color:var(--rule-2);
  min-width:26px;
  text-align:center;
  flex:0 0 auto;
}
.seedrow:nth-child(-n+2) .seedno{ color:var(--gold-ink); }

.seedtag{
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 7px;
  color:#fff;
  background:var(--ink-3);
  white-space:nowrap;
  flex:0 0 auto;
}
.seedtag.tag-div { background:var(--red-ink); }
.seedtag.tag-rec { background:var(--ink); }
.seedtag.tag-wild{ background:var(--gold-ink); }

.seedstats{ display:flex; gap:16px; flex:0 0 auto; margin-left:auto; }
.seedstats span{ display:block; text-align:right; min-width:52px; }
.seedstats b{
  display:block;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.seedstats i{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:8.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:1px;
}

/* ── Transactions feed ──────────────────────────────────────────── */
.feed{ padding:12px 16px 20px; }
.tx{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:12px;
  padding:11px 12px;
  border-bottom:1px solid var(--rule);
  background:var(--panel);
}
.tx:nth-child(even){ background:var(--panel-2); }
.tx-kind{
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-top:2px;
}
.tx-kind.trade{ color:var(--gold-ink); }
.tx-kind.waiver{ color:var(--blue-ink); }
.tx-when{ font-family:var(--mono); font-size:9px; color:var(--ink-3); }
.tx-line{ font-size:13px; line-height:1.5; }
.tx-line .add{ color:var(--green-ink); font-weight:600; }
.tx-line .drop{ color:var(--ink-3); }
.tx-line .who{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.tx-faab{ font-family:var(--mono); font-size:10px; font-weight:700; color:var(--gold-ink); }

/* ═══ PHONE ══════════════════════════════════════════════════════════ */

@media (max-width:640px){
  /* Stackable tables become card rows: rank chip and team on the first
     line, then the stats as labelled blocks wrapping underneath. Nothing
     scrolls sideways and nothing important lands off-screen — which was
     the whole problem with a 9-column table on a 390px phone. */
  .tblwrap{ overflow-x:visible; padding:12px 10px 0; }

  .tbl.stackable{ display:block; background:transparent; }
  .tbl.stackable thead{ display:none; }
  .tbl.stackable tbody{ display:block; }

  .tbl.stackable tr{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
    padding:11px 12px;
    background:var(--panel);
    border:1px solid var(--rule);
    margin-bottom:-1px;   /* collapse the shared border between rows */
  }
  .tbl.stackable tr:nth-child(even){ background:var(--panel-2); }

  .tbl.stackable td{
    display:block;
    border:0;
    padding:0;
    text-align:left;
    white-space:nowrap;
  }
  .tbl.stackable td.seed{ width:auto; flex:0 0 auto; }
  /* Team fills the rest of line one, which forces the stats to wrap
     below it instead of squeezing in beside it. */
  .tbl.stackable td.team{ flex:1 1 calc(100% - 46px); min-width:0; }
  .tbl.stackable td[data-l]{ flex:0 0 auto; }
  .tbl.stackable td[data-l]::before{
    content:attr(data-l);
    display:block;
    font-family:var(--mono);
    font-size:8px;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-3);
    margin-bottom:1px;
  }
  .tbl.stackable td.pct{ flex:1 1 130px; }
  .tbl.stackable td.form{ flex:1 1 100%; }
  /* Cell borders are gone in this layout, so the cut moves to the row. */
  .tbl.stackable tr.playoff-cut{ border-bottom:3px solid var(--red); }
  .tbl.stackable tr.playoff-cut td{ border-bottom:0; }

  /* Chrome */
  .mast{ padding:12px 12px 10px; }
  .statline{ padding:0 12px 10px; gap:6px 14px; }
  .stat-k{ font-size:8.5px; }
  .stat-v{ font-size:14px; }
  .reload{ padding:4px 9px; font-size:9px; }
  .tabs{ padding:0 6px; }
  .tab{ font-size:14px; padding:9px 10px 8px; }

  /* Matchups — stacked scoreboard rows rather than two columns. */
  .games{ padding:10px 10px 8px; }
  .game-head{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    padding:10px;
  }
  .side, .side.right{ flex-direction:row; text-align:left; }
  .side-av{ width:30px; height:30px; flex-basis:30px; }
  .side-name{ font-size:14.5px; }
  .side-owner{ font-size:9px; }
  .side-score{ font-size:19px; margin-left:auto; padding-left:8px; }
  .game-mid{
    order:3;
    text-align:left;
    border-top:1px solid var(--rule);
    padding-top:6px;
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .game-mid .margin{ display:inline; }
  .game-mid .margin::after{ content:" margin"; font-size:8.5px; letter-spacing:.1em; color:var(--ink-3); font-weight:400; }
  .lrow{ grid-template-columns:1fr 38px 1fr; padding:5px 8px; gap:4px; min-height:36px; }
  .pl-name{ font-size:11.5px; }
  .pl-pts{ font-size:11.5px; }

  /* Race */
  .seedlist{ margin:0 10px; }
  .seedrow{ gap:8px 10px; padding:10px; }
  .seedno{ font-size:22px; min-width:20px; }
  .seedrow .tteam{ flex:1 1 calc(100% - 100px); }
  .seedstats{ margin-left:0; flex:1 1 100%; justify-content:flex-start; gap:18px; }
  .seedstats span{ text-align:left; min-width:0; }
  .racehead{ font-size:18px; padding:18px 10px 6px; }

  /* Everything else */
  .grid{ grid-template-columns:1fr; padding:10px; }
  .roster{ padding:0 10px 16px; }
  .feed{ padding:10px; }
  .boardwrap{ padding:12px 10px 20px; }
  .rrow{ grid-template-columns:42px 1fr auto; }
}

/* ── Live NFL slate ─────────────────────────────────────────────── */
/* The one place real team colour is allowed in, because it is the fastest
   way to tell sixteen near-identical score cards apart. It goes on a 4px
   edge only — a full team-coloured card would fight the accent system
   everywhere else in the app. */

.slate{
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
  padding:12px 16px 0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.slate-k b{
  font-family:var(--display);
  font-size:17px;
  font-weight:900;
  font-style:italic;
  letter-spacing:0;
  color:var(--ink);
  margin-right:4px;
}
.slate-k.on b{ color:var(--red); }
.slate-when{ margin-left:auto; }

.slate-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:10px;
  padding:8px 16px 20px;
}

.gm{
  background:var(--panel);
  border:1px solid var(--rule);
  display:flex;
  flex-direction:column;
}
.gm.post{ opacity:.72; }              /* finals recede; they are not news */
.gm.post:hover{ opacity:1; }
.gm.in{ border-color:var(--red); }    /* the only cards worth looking at */

.gm-head{ padding:4px 0; }
.gm-side{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:6px 12px 6px 10px;
  border-left:4px solid var(--tc, var(--rule-2));
  min-width:0;
}
.gm-abbr{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:17px;
  letter-spacing:.01em;
  color:var(--ink-3);
  min-width:44px;
}
.gm-name{
  font-size:12.5px;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1 1 auto;
}
.gm-rec{
  font-family:var(--mono);
  font-size:9px;
  color:var(--ink-3);
  flex:0 0 auto;
  min-width:26px;
  text-align:right;
}
.gm-score{
  font-family:var(--mono);
  font-weight:700;
  font-size:19px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
  /* box-sizing is border-box, so the padding comes out of min-width — 32px
     left only 22px of content and a two-digit score pushed the box 1px wider
     than a one-digit one. Sized for three digits so it never grows. */
  min-width:48px;
  text-align:right;
  padding-left:10px;
}
.gm-side.lead .gm-abbr,
.gm-side.lead .gm-name,
.gm-side.lead .gm-score{ color:var(--ink); }
.gm-side.lead .gm-score{ font-weight:700; }

.gm-status{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:6px 12px;
  border-top:1px solid var(--rule);
  background:var(--panel-2);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.gs-live{ color:var(--red); font-weight:700; display:flex; align-items:center; gap:5px; }
.gs-live i{
  width:6px; height:6px;
  background:var(--red);
  display:block;
  animation:gmPulse 1.6s ease-out infinite;
}
@keyframes gmPulse{ 0%{opacity:1} 50%{opacity:.25} 100%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .gs-live i{ animation:none; } }
.gs-final{ font-weight:700; color:var(--ink-2); }
.gs-pre{ color:var(--ink-2); font-weight:700; }
.gs-sit{ color:var(--ink-3); }
.gs-rz{
  color:#fff;
  background:var(--red);
  font-weight:700;
  padding:2px 5px;
  margin-left:auto;
}

/* The league's starters in this game — the reason this is not just a
   scoreboard. */
.gp{ border-top:1px solid var(--rule); }
.gp-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 50px 106px;
  align-items:center;
  gap:0 8px;
  padding:5px 12px;
}
.gp-row + .gp-row{ border-top:1px solid rgba(22,19,14,.06); }
.gp-name{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gp-meta{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.04em;
  color:var(--ink-3);
}
.gp-pts{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.gp-row.scored .gp-pts{ color:var(--green-ink); }
/* Hasn't kicked off: a dash, not a zero. */
.gp-pts.gp-yet{ color:var(--rule-2); font-weight:400; }
.gp-own{
  font-family:var(--display);
  font-weight:700;
  font-size:11.5px;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}
.gp-none{
  padding:8px 12px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* Starters still to kick off is the number that actually decides a Sunday. */
.tbl td.toplay{ color:var(--gold-ink); font-weight:700; }
.tbl td.inplay{ color:var(--red-ink); font-weight:700; }

@media (max-width:640px){
  .slate{ padding:12px 12px 0; gap:12px; }
  .slate-when{ margin-left:0; flex:1 1 100%; }
  .slate-grid{ grid-template-columns:1fr; padding:8px 10px 20px; gap:8px; }
  .gp-row{ grid-template-columns:minmax(0,1fr) 44px 88px; }
}

/* ── Gameday matchup rail ───────────────────────────────────────── */
/* Head-to-head cards, not a table. Same split-bar vocabulary as the
   Matchups tab so the two read as the same object seen twice. */
.mu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:8px;
  padding:8px 16px 4px;
}
.mu{
  background:var(--panel);
  border:1px solid var(--rule);
  display:flex;
  flex-direction:column;
}
.mu-side{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  min-width:0;
  cursor:pointer;
}
.mu-side:hover{ background:var(--panel-2); }
.mu-side img{ width:28px; height:28px; border-radius:2px; flex:0 0 28px; background:var(--panel-2); }
.mu-id{ min-width:0; flex:1 1 auto; }
.mu-name{
  font-family:var(--display);
  font-weight:700;
  font-size:14.5px;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mu-side.lead .mu-name{ color:var(--ink); }
.mu-sub{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.mu-sub .toplay{ color:var(--gold-ink); font-weight:700; }
.mu-sub .inplay{ color:var(--red-ink); font-weight:700; }
.mu-score{
  font-family:var(--mono);
  font-weight:700;
  font-size:18px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
  min-width:70px;
  text-align:right;
}
.mu-side.lead .mu-score{ color:var(--ink); }

.mu-mid{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:2px 10px 4px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.mu-margin{ color:var(--red-ink); font-weight:700; font-size:11px; letter-spacing:0; }
.mu-left{ margin-left:auto; }
.mu .bar{ margin-top:auto; }

/* ── Box-score line on a player row ─────────────────────────────── */
/* Its own line under the name rather than beside it: a stat line is
   variable-length by nature, and squeezing it into a column makes every
   row a different shape. */
/* name and meta stack in column 1; points and owner span both rows. */
.gp-name{ grid-column:1; grid-row:1; }
.gp-meta{ grid-column:1; grid-row:2; }
.gp-pts { grid-column:2; grid-row:1 / span 2; }
.gp-own { grid-column:3; grid-row:1 / span 2; }
.gp-stat{
  grid-column:1 / -1;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.02em;
  color:var(--ink-2);
  margin-top:3px;
  padding:2px 0 0;
  border-top:1px dotted var(--rule);
  white-space:normal;
  line-height:1.4;
}

@media (max-width:640px){
  .mu-grid{ grid-template-columns:1fr; padding:8px 10px 4px; }
}

/* ── Teams: every roster on one page ───────────────────────────── */
/* Twelve panels rather than twelve cards you click through one at a
   time. Comparing squads is the whole point of the tab, and you cannot
   compare things you can only see one at a time. */
.tgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:10px;
  padding:12px 16px 20px;
  align-items:start;
}

.tpanel{
  background:var(--panel);
  border:1px solid var(--rule);
  min-width:0;
}
.tpanel.on{ border-color:var(--red); box-shadow:inset 3px 0 0 var(--red); }

.tpanel-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  background:var(--chrome);
  color:var(--on-chrome);
}
.tpanel-head img{ width:34px; height:34px; border-radius:2px; flex:0 0 34px; background:var(--chrome-2); }
.tpanel-name{
  font-family:var(--display);
  font-weight:700;
  font-size:15.5px;
  line-height:1.1;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tpanel-sub{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.04em;
  color:var(--on-chrome-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tpanel-rec{ margin-left:auto; text-align:right; flex:0 0 auto; }
.tpanel-rec b{
  display:block;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.tpanel-rec i{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:8.5px;
  letter-spacing:.04em;
  color:var(--on-chrome-dim);
  margin-top:1px;
}

.tpanel-group{
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  background:var(--panel-2);
  padding:4px 11px;
  border-bottom:1px solid var(--rule);
}

/* Fixed tracks, so slot, weeks and points line up down the whole panel
   and across all twelve of them. */
.tprow{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 26px 46px;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  border-bottom:1px solid var(--rule);
}
.tprow:last-child{ border-bottom:0; }
.tprow .lslot{ font-size:8.5px; padding:1px 0; }
.tprow-id{ min-width:0; }
.tprow-name{
  display:block;
  font-size:12.5px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tprow-name .keep{ color:var(--gold-ink); font-size:9px; }
.tprow-meta{
  display:block;
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.03em;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tprow-meta .inj{ color:var(--red-ink); font-weight:700; }
.tprow-wks{
  font-family:var(--mono);
  font-size:9px;
  color:var(--ink-3);
  text-align:right;
}
.tprow-pts{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.tprow-empty{
  grid-column:2 / -1;
  font-size:12px;
  font-style:italic;
  color:var(--ink-3);
}

@media (max-width:640px){
  .tgrid{ grid-template-columns:1fr; padding:10px; }
}

/* ── Lottery round editor ───────────────────────────────────────── */
/* The draft board's column-header row, made draggable. Same 118px tiles,
   same dark band, same condensed caps — because it is literally the same
   thing: the round's pick order, reading left to right. */

.lot{
  margin:14px 16px 0;
  border:1px solid var(--rule);
  background:var(--panel);
  max-width:max-content;
}

.lot-head{ padding:8px 10px; background:var(--chrome); color:var(--on-chrome); }
.lot-head h3{
  font-family:var(--display);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0;
}
.lot-you{
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:var(--red);
  padding:2px 5px;
  margin-left:6px;
  vertical-align:1px;
}
.lot-hint{
  display:block;
  font-family:var(--body);
  font-size:11px;
  line-height:1.5;
  color:var(--on-chrome-dim);
  margin-top:4px;
  max-width:74ch;
}
.lot-hint b{ color:var(--on-chrome); font-weight:700; }

/* Scrolls rather than wraps: wrapping would break the drag, which works in
   one axis, and the board underneath scrolls the same way. */
.lot-strip{
  display:flex;
  gap:3px;
  padding:8px 10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  background:var(--panel-2);
}

/* Matches .dcol-team, the board's column header. */
.lot-tile{
  flex:0 0 118px;
  width:118px;
  min-height:56px;
  padding:6px 7px;
  background:var(--chrome);
  color:var(--on-chrome);
  border-left:3px solid var(--rule-2);
  cursor:grab;
  user-select:none;
  touch-action:none;          /* or a touch drag scrolls the strip instead */
  transition:transform .16s cubic-bezier(.25,.46,.45,.94);
}
.lot-tile:hover{ border-left-color:var(--red); }
.lot-tile:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }

.lot-pick{
  display:block;
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--red);
}
.lot-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--display);
  font-weight:700;
  font-size:12.5px;
  line-height:1.12;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-top:2px;
}
.lot-owner{
  display:block;
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.03em;
  color:var(--on-chrome-dim2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}

/* While dragging: the carried tile lifts, the rest slide under it. */
.lot-live{ cursor:grabbing; }
.lot-tile.lot-drag{
  cursor:grabbing;
  position:relative;
  z-index:3;
  transition:none;            /* the carried tile must track the pointer exactly */
  border-left-color:var(--red);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}

.lot-foot{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 10px;
  background:var(--panel);
  border-top:1px solid var(--rule);
}
.lot-foot .reload{ color:var(--ink-2); border-color:var(--rule-2); }
.lot-foot .reload:hover{ color:var(--ink); border-color:var(--red); }
/* Answers "did that take?" without being asked. */
.lot-state{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-right:auto;
}
.lot-state.on{ color:var(--green-ink); }
.lot-state.warn{ color:var(--gold-ink); }

/* The one button that changes what other people see. */
.lot-go{
  color:#fff !important;
  background:var(--red);
  border-color:var(--red) !important;
}
.lot-go:hover:not([disabled]){ background:var(--red-ink); border-color:var(--red-ink) !important; }
.lot-go[disabled]{ background:var(--rule-2); border-color:var(--rule-2) !important; color:var(--panel) !important; }

/* The exact link that gets pasted, visible so it can be checked or copied by
   hand when the clipboard API is unavailable. */
.lot-share{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:7px 10px;
  background:var(--panel-2);
  border-top:1px solid var(--rule);
}
.lot-share span{
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.lot-share code{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--ink-2);
  word-break:break-all;
  user-select:all;
}

.lot-peek{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 16px 0;
  padding:9px 12px;
  background:var(--chrome);
  color:var(--on-chrome-dim);
  font-size:12px;
}
.lot-peek .reload{ margin-left:auto; }

@media (max-width:640px){
  .lot{ margin:12px 10px 0; max-width:none; }
  .lot-state{ margin-right:0; flex:1 1 100%; }
  .lot-peek{ margin:12px 10px 0; }
  .lot-share{ flex-wrap:wrap; }
}

/* A drawn round has no direction, so the arrow becomes a ball. */
.dcol-round.drawn{ background:var(--red); color:#fff; }
.dcol-round.drawn i{ color:#fff; font-size:9px; }

@media (max-width:640px){
  .lot{ margin:12px 10px 0; }
  }

/* ── Draft room ─────────────────────────────────────────────────── */
/* Read at speed with a clock running, so the order on screen is the
   order of urgency: is it my pick, who do I take, what does waiting
   cost, then the whole board. */

.rm-me{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 16px 0;
}
.rm-me label{
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.rm-me select{ color:var(--ink); background:var(--panel); border-color:var(--rule-2); }

/* Status bar: the only thing that matters between picks. */
.rm-bar{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin:12px 16px 0;
  padding:12px 14px;
  background:var(--chrome);
  color:var(--on-chrome);
  border-left:4px solid var(--rule-2);
}
.rm-bar.mine{ border-left-color:var(--red); background:#2a1114; }
.rm-now i, .rm-stat i{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-chrome-dim2);
}
.rm-now b{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:26px;
  line-height:1.05;
  text-transform:uppercase;
}
.rm-bar.mine .rm-now b{ color:var(--red); }
.rm-stat{ margin-left:auto; text-align:right; }
.rm-stat + .rm-stat{ margin-left:0; }
.rm-stat b{
  font-family:var(--mono);
  font-size:20px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.rm-stat b span{ font-size:11px; color:var(--on-chrome-dim2); }
.rm-stat b.soon{ color:var(--red); }

/* The recommendation. */
.rm-list{ margin:0 16px; border:1px solid var(--rule); border-bottom:0; }
.rm-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 66px minmax(0,1.1fr);
  align-items:center;
  gap:10px;
  padding:8px 11px;
  background:var(--panel);
  border-bottom:1px solid var(--rule);
}
.rm-row:nth-child(even){ background:var(--panel-2); }
.rm-row.top{ box-shadow:inset 3px 0 0 var(--red); }
.rm-n{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:17px;
  color:var(--rule-2);
  text-align:center;
}
.rm-row.top .rm-n{ color:var(--red); }
.rm-who b{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  text-transform:uppercase;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rm-who i{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:9px;
  letter-spacing:.04em;
  color:var(--ink-3);
}
.rm-inj{ color:var(--red-ink); font-style:normal; font-weight:700; }
.rm-val{ text-align:right; }
.rm-val b{
  display:block;
  font-family:var(--mono);
  font-size:16px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.rm-val i{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:8.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-3);
}
/* Every nudge carries the sentence that produced it — an unexplained
   recommendation is one nobody follows at pick 3.07. */
.rm-why{ display:flex; flex-direction:column; gap:2px; }
.rm-why em{
  font-family:var(--mono);
  font-style:normal;
  font-size:9px;
  letter-spacing:.02em;
  color:var(--ink-2);
}

/* What waiting costs. */
.rm-runs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:8px;
  padding:8px 16px 0;
}
.rm-run{
  padding:9px 11px;
  background:var(--panel);
  border:1px solid var(--rule);
  border-left:3px solid var(--rule-2);
}
.rm-run.hot{ border-left-color:var(--red); }
.rm-run b{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:17px;
}
.rm-run-cost{
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  color:var(--ink-3);
  margin-left:8px;
}
.rm-run.hot .rm-run-cost{ color:var(--red-ink); }
.rm-run i, .rm-run-swap{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:9px;
  color:var(--ink-3);
  margin-top:3px;
}
.rm-run-swap{ color:var(--ink-2); }

/* My roster. */
.rm-mine{ margin:0 16px; border:1px solid var(--rule); background:var(--panel); }
.rm-open{ display:flex; flex-wrap:wrap; gap:5px; padding:9px 11px; background:var(--panel-2); }
.rm-slot{
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:var(--gold-ink);
  padding:3px 6px;
}
.rm-slot.done{ background:var(--green-ink); }
.rm-mine-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 46px;
  gap:10px;
  align-items:baseline;
  padding:5px 11px;
  border-top:1px solid var(--rule);
  font-size:12.5px;
}
.rm-mine-row i{ font-family:var(--mono); font-style:normal; font-size:9px; color:var(--ink-3); }
.rm-mine-row b{ font-family:var(--mono); font-size:10px; color:var(--ink-3); text-align:right; }

/* Board filter. */
.rm-postabs{ display:flex; gap:3px; padding:0 16px; flex-wrap:wrap; }
.rm-pos{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-2);
  background:var(--panel);
  border:1px solid var(--rule-2);
  padding:5px 11px;
  cursor:pointer;
}
.rm-pos:hover{ border-color:var(--red); }
.rm-pos.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tbl td.rm-guess{ color:var(--gold-ink); }

@media (max-width:640px){
  .rm-bar{ margin:12px 10px 0; gap:14px; }
  .rm-now b{ font-size:21px; }
  .rm-stat{ margin-left:0; text-align:left; }
  .rm-list, .rm-mine{ margin:0 10px; }
  .rm-row{ grid-template-columns:26px minmax(0,1fr) 58px; gap:8px; }
  .rm-why{ grid-column:1 / -1; padding-left:34px; }
  .rm-runs{ grid-template-columns:1fr; padding:8px 10px 0; }
  .rm-me, .rm-postabs{ padding-left:10px; padding-right:10px; }
}

/* ═══ SCROLLBARS ═════════════════════════════════════════════════════
   Thin, hard-edged, and themed to whichever ground they sit on. The
   thumb is inset with a track-coloured border rather than made narrow,
   so it reads as a floating bar with breathing room instead of a groove.

   iOS and modern Android use overlay scrollbars and ignore every rule
   here — on touch the gesture is its own affordance, so nothing is lost.
   This is desktop polish. */

/* Firefox has no pseudo-elements for this; two properties is all it gets. */
*{ scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--panel-2); }
::-webkit-scrollbar-thumb{
  background:var(--rule-2);
  border:3px solid var(--panel-2);   /* inset — see note above */
}
::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); }
::-webkit-scrollbar-thumb:active{ background:var(--red); }
::-webkit-scrollbar-corner{ background:var(--panel-2); }

/* The page itself scrolls against the paper ground, not a panel. */
html{ scrollbar-color:var(--rule-2) var(--bg); }
body::-webkit-scrollbar-track{ background:var(--bg); }
body::-webkit-scrollbar-thumb{ border-color:var(--bg); }

/* The two strips get a 3px rule instead — at tab height a full scrollbar
   would eat a fifth of the control, and these are swiped far more often
   than they are dragged. */
.tabs, .weeks{ scrollbar-color:var(--chrome-3) transparent; }
.tabs::-webkit-scrollbar,
.weeks::-webkit-scrollbar{ height:3px; }
.tabs::-webkit-scrollbar-track{ background:var(--chrome-2); }
.tabs::-webkit-scrollbar-thumb{ background:var(--chrome-3); border:0; }
.tabs:hover::-webkit-scrollbar-thumb{ background:var(--red); }

.weeks{ scrollbar-color:var(--rule-2) var(--rule); }
.weeks::-webkit-scrollbar-track{ background:var(--rule); }
.weeks::-webkit-scrollbar-thumb{ background:var(--rule-2); border:0; }
.weeks:hover::-webkit-scrollbar-thumb{ background:var(--red); }

/* The wide boards are the one place a scrollbar is genuinely load-bearing,
   so theirs is the full-height one and it darkens on hover of the board. */
.tblwrap:hover::-webkit-scrollbar-thumb,
.boardwrap:hover::-webkit-scrollbar-thumb{ background:var(--ink-3); }

@media (prefers-reduced-motion: reduce){
  .weeks{ scroll-behavior:auto; }
}