/* DraftScout.ai app styles — lifted from mockups/overview-fm.html (approved design). */

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  background:radial-gradient(1200px 600px at 70% -10%, var(--bg-glow), var(--bg));
  color:var(--text); font-family:"DM Sans",system-ui,sans-serif; line-height:1.5; min-height:100vh;
}
/* Base anchor colour (M4 link-colour fix): every class-scoped anchor rule in
   this file has higher specificity (at least one class) than this bare `a`
   selector, so this only ever fills in anchors that no other rule reaches —
   it cannot win a cascade fight against `.foo a{}` or `a.foo{}`. Without it,
   an anchor with no matching class falls through to the browser's
   `a:-webkit-any-link` default (#0000EE, underlined) because `body{color}`
   does not cross that user-agent rule. --acc is the token BRAND.md reserves
   for interactive/nav/links, and it already resolves to the right hue in
   both themes (violet in Match Night, pitch green in Pitch & Chalk), so one
   rule covers both without a hex value. */
a{color:var(--acc)}
/* Visited outbound links only. Every third-party/outbound anchor in this
   codebase (news feed items, in-app notification links) carries
   target="_blank" — internal navigation never does — so this attribute
   selector reaches exactly the "read this article already" case without
   touching a template to add a class, and without dimming ordinary nav
   links that a user simply clicks a lot (those are not one-shot reads and
   a permanent "visited" tint on them would read as broken, not helpful). */
a[target="_blank"]:visited{color:color-mix(in srgb, var(--acc) 45%, var(--muted))}
/* FM-style figures: same face, tabular lining numerals (supersedes mono-numbers rule) */
.mono{font-family:"DM Sans",system-ui,sans-serif; font-variant-numeric:tabular-nums; font-weight:500}
h1,h2,.wordmark,.nav a,.cta,.scoreline .s{font-family:Poppins,"DM Sans",sans-serif}

/* ---------- Top nav (FM-style) ---------- */
.topbar{
  display:flex; align-items:center; gap:28px; padding:0 28px; height:58px;
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--card) 55%, transparent);
}
.wordmark{font-weight:700; font-size:18px; letter-spacing:-0.01em; white-space:nowrap}
.wordmark .ai{color:var(--volt); font-weight:500; font-size:0.82em}
.nav{display:flex; gap:4px; align-items:center; height:100%}
.nav a{
  display:flex; align-items:center; height:100%; padding:0 14px;
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;
  border-bottom:2px solid transparent;
}
.nav a.active{color:var(--acc); border-bottom-color:var(--acc)}
.nav a:hover{color:var(--text)}
.nav .soon{font-size:9px; margin-left:6px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 6px; letter-spacing:0.05em}
.top-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.gwbox{text-align:right; line-height:1.25}
.gwbox .l1{font-size:13px; font-weight:600}
.gwbox .l2{font-size:11px; color:var(--muted)}
.cta{
  display:flex; align-items:center; gap:8px; padding:9px 18px; border-radius:10px;
  background:linear-gradient(90deg, var(--acc), var(--acc-deep));
  color:#fff; font-size:14px; font-weight:600; text-decoration:none;
  box-shadow:0 2px 14px var(--cta-glow);
}

/* ---------- Top-bar search ---------- */
.searchbox input{
  background:var(--card-2); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-family:inherit; font-size:12.5px; padding:7px 12px; width:170px;
}
.searchbox input::placeholder{color:var(--muted)}
.searchbox input:focus{outline:none; border-color:var(--acc)}

/* ---------- Context strip ---------- */
.ctx{
  display:flex; gap:22px; align-items:center; padding:10px 28px; font-size:12.5px; color:var(--muted);
  border-bottom:1px solid var(--line-soft);
}
.ctx b{color:var(--text); font-weight:500}
.ctx .dot{width:5px;height:5px;border-radius:50%;background:var(--volt); display:inline-block; margin-right:7px; vertical-align:1px}

/* ---------- Deadline nudge ----------
   One strip under the context strip, on every page. Three urgency bands, set by
   the adapter (queries.DEADLINE_SOON_SECONDS / DEADLINE_URGENT_SECONDS):
   calm = muted hairline, soon = gold, urgent = red. Colour is never the only
   signal — the countdown itself is the message, and it bolds as it escalates. */
.deadline{
  display:flex; gap:14px; align-items:center; padding:8px 28px; font-size:12.5px;
  color:var(--muted); border-bottom:1px solid var(--line-soft);
  border-left:3px solid var(--line);
}
.deadline b{color:var(--text); font-weight:600}
.deadline-at{margin-left:2px; opacity:.75}
.deadline-do{margin-left:auto; color:var(--acc); text-decoration:none; font-weight:500; white-space:nowrap}
.deadline-do:hover{text-decoration:underline}
.deadline-soon{border-left-color:var(--flag); color:var(--text)}
.deadline-soon b{color:var(--flag)}
.deadline-urgent{
  border-left-color:var(--down); color:var(--text);
  background:color-mix(in srgb, var(--down) 8%, transparent);
}
.deadline-urgent b{color:var(--down)}

/* ---------- Layout ---------- */
main{display:grid; grid-template-columns:300px 1fr 300px; gap:18px; padding:22px 28px; max-width:1480px; margin:0 auto}
.col{display:flex; flex-direction:column; gap:18px; min-width:0}
.widget{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
}
.widget>h2{font-size:15px; font-weight:700; color:var(--label); margin-bottom:14px; letter-spacing:-0.01em}
.widget>h2 .right{float:right; font-size:12px; font-weight:500}
a.quiet{color:var(--acc); text-decoration:none}
a.quiet:hover{text-decoration:underline}
.empty-note{font-size:12.5px; color:var(--muted)}

/* ---------- Signals (FM inbox style) ---------- */
.sig{display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line-soft); align-items:center}
.sig:first-of-type{border-top:none}
.sig img.face{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top;background:var(--card-2);border:1px solid var(--line); flex:none}
.sig .t{min-width:0; flex:1}
.sig .t .n{font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px}
.sig .t .n img{width:14px;height:14px}
.sig .t .d{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chip{font-size:10px; font-weight:600; border-radius:5px; padding:2px 7px; flex:none; letter-spacing:0.03em}
.chip.flag{color:var(--flag); background:color-mix(in srgb, var(--flag) 12%, transparent)}
.chip.down{color:var(--down); background:color-mix(in srgb, var(--down) 12%, transparent)}
.chip.volt{color:var(--volt); background:color-mix(in srgb, var(--volt) 12%, transparent)}
/* M2: "Ahead of the game" — favourable-run-in flag; violet to read as a
   forward-looking call, not a grade. */
.chip.ahead{color:var(--acc); background:color-mix(in srgb, var(--acc) 14%, transparent); border:1px solid color-mix(in srgb, var(--acc) 30%, transparent)}
.aheadline{font-size:12.5px; color:var(--muted); margin:2px 0 10px; padding-left:11px; border-left:2px solid color-mix(in srgb, var(--acc) 55%, transparent)}
.aheadline .mono{color:var(--volt)}
[data-theme="light"] .aheadline .mono{color:var(--volt)}
/* 2.2/2.4: the freshness contract. Every Class B number carries either a
   muted batch timestamp (fresh) or a flag-coloured stale note (the data moved
   under it) — freshness travels with the number, never in a sibling widget. */
.batchline{margin:-6px 0 12px}
.batchstamp{font-size:11px; color:var(--muted); font-weight:400; letter-spacing:0}
.stalenote{font-size:11.5px; color:var(--flag); font-weight:500}
.stalenote .mono{color:var(--flag)}
[data-theme="light"] .stalenote, [data-theme="light"] .stalenote .mono{color:var(--flag)}
/* P3: time-horizon rationale line + the four structured summary blocks. */
.horizonline{font-size:12.5px; color:var(--muted); margin:2px 0 10px; padding-left:11px; border-left:2px solid var(--line)}
.horizonline b{color:var(--text)}
.pathgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; margin:4px 0 12px}
.pathblock{background:var(--card-2); border:1px solid var(--line-soft); border-radius:8px; padding:9px 11px; min-width:0}
.pathlabel{font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:4px}
.pathblock p{font-size:12.5px; line-height:1.5; margin:0; overflow-wrap:anywhere}

/* ---------- League table (FM stages style) ---------- */
table.lt{width:100%; border-collapse:collapse; font-size:13px}
table.lt td{padding:7px 0; border-top:1px solid var(--line-soft); vertical-align:middle}
table.lt tr:first-child td{border-top:none}
table.lt .pos{width:26px; color:var(--muted)}
table.lt .mono-b{font-weight:500}
.mgram{
  display:inline-flex; width:24px;height:24px;border-radius:50%; margin-right:9px;
  align-items:center; justify-content:center; font-size:8.5px; font-weight:700; letter-spacing:0.02em;
  background:var(--card-2); border:1px solid var(--line); vertical-align:middle; color:var(--muted);
}
tr.you{background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent)}
tr.you .mgram{color:var(--volt); border-color:color-mix(in srgb, var(--volt) 40%, transparent)}
tr.you td{color:var(--text)}
.nexttag{font-size:9px; color:var(--info); border:1px solid color-mix(in srgb, var(--info) 45%, transparent); border-radius:4px; padding:1px 5px; margin-left:7px; letter-spacing:0.04em}

/* ---------- H2H hero ---------- */
.hero{background:linear-gradient(180deg, var(--card-2), var(--card)); border:1px solid var(--line); border-radius:14px; padding:24px}
.hero h2{font-size:15px; font-weight:700; color:var(--label); margin-bottom:18px}
/* 2.1: the single-verb decision. HOLD and CLAIM share .verdict-line at the
   SAME size and weight — a hold is a first-class answer, never rendered dimmer
   or smaller than a claim (blueprint constraint 4 / Section 8). Only the stale
   fallback demotes the line, and it demotes hold and claim identically. */
.verdict{margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line-soft)}
.verdict-line{font-family:Poppins,"DM Sans",sans-serif; font-size:23px; font-weight:600; color:var(--label); line-height:1.25; letter-spacing:-0.01em}
.verdict-line .up{color:var(--volt)}
.verdict-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:10px; font-size:12px; color:var(--muted)}
.verdict-line-stale{font-size:14px; font-weight:500; color:var(--muted)}
.verdict-line-muted{font-size:15px; font-weight:500; color:var(--muted)}
.matchup{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; text-align:center}
.mteam{display:flex; flex-direction:column; align-items:center; gap:8px}
.crest{
  width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px; background:var(--card-2); border:1px solid var(--line);
}
.crest.us{color:var(--volt); border-color:color-mix(in srgb, var(--volt) 45%, transparent); box-shadow:0 0 24px var(--volt-glow)}
.mteam .nm{font-weight:600; font-size:14.5px}
.mteam .sub{font-size:11.5px; color:var(--muted)}
.scoreline{display:flex; align-items:baseline; gap:14px; justify-content:center}
.scoreline .s{font-size:40px; font-weight:500}
.scoreline .s.them{color:var(--muted)}
.scoreline .vs{font-size:11px; color:var(--muted); letter-spacing:0.12em}
.hero .note{text-align:center; font-size:12px; color:var(--muted); margin-top:4px}
.hero .note b{color:var(--volt); font-weight:500}
.scorebar{position:relative; height:7px; border-radius:999px; background:var(--line-soft); overflow:hidden; margin:16px 0 8px}
.scorebar .us{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, var(--volt), color-mix(in srgb, var(--volt) 65%, var(--acc))); border-radius:999px}
.barnote{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted)}
.hero .foot{display:flex; gap:22px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--muted); flex-wrap:wrap; justify-content:center}
.hero .foot b{color:var(--text); font-weight:500}

/* ---------- S5 season-complete card ---------- */
.ov-single{display:block}
.complete-row{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line-soft); font-size:13px; color:var(--text)}
.complete-row .lbl{min-width:130px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.05em}
.complete-row .right{margin-left:auto}
.complete-row b{font-weight:600}
.complete-flag{color:var(--flag)}
.complete-flag .lbl{color:var(--flag)}

/* 3.3 scorecard strip: the correct-call record beside the in-season hero. */
.scorestrip{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--text)}
.scorestrip .lbl{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.05em}
.scorestrip .right{margin-left:auto}
.scorestrip b{font-weight:600}

/* ---------- The call ---------- */
.swap{display:flex; align-items:center; gap:13px; padding:12px 0; border-top:1px solid var(--line-soft)}
.swap:first-of-type{border-top:none; padding-top:2px}
.face{
  width:48px;height:48px;border-radius:50%;flex:none; object-fit:cover; object-position:top;
  background:var(--card-2); border:1px solid var(--line);
}
.swap .who{min-width:0; flex:1}
.swap .who .in{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:8px}
.swap .who .in img.badge{width:15px;height:15px}
.swap .who .out{font-size:12px; color:var(--muted)}
.swap .who .out s{color:var(--down); text-decoration-color:var(--down)}
.swap .nums{text-align:right; flex:none}
.swap .nums .gain{font-size:17px; font-weight:500; color:var(--volt)}
.swap .nums .land{font-size:11.5px; color:var(--muted)}
.why{font-size:12.5px; color:var(--muted); border-top:1px solid var(--line-soft); padding-top:12px; margin-top:2px}
.why b{color:var(--text); font-weight:500}

/* ---------- Queue ---------- */
table.queue{width:100%; border-collapse:collapse; font-size:13px}
table.queue td{padding:9px 0; border-top:1px solid var(--line-soft); vertical-align:middle}
table.queue tr:first-child td{border-top:none}
table.queue .slot{color:var(--muted); width:24px}
table.queue .move b{font-weight:600}
table.queue .move .drop{color:var(--muted)}
table.queue .move{line-height:1.35}
table.queue .kind{display:block; color:var(--muted); font-size:10px; letter-spacing:0.06em; text-transform:uppercase}
table.queue .land{text-align:right; width:52px}
.l-hi{color:var(--volt)} .l-mid{color:var(--flag)}

/* ---------- Season strip ---------- */
.season .row{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--muted)}
.season .row:first-of-type{border-top:none}
.season .row b{font-size:16px; font-weight:500; color:var(--text)}

/* ---------- Placeholder pages ---------- */
.placeholder{max-width:560px; margin:60px auto; text-align:center}
.placeholder h1{font-size:20px; margin-bottom:10px}
.placeholder p{color:var(--muted); font-size:14px}

/* ---------- Full-width detail pages (/brief /team /league /model) ---------- */
main.page{display:flex; flex-direction:column; gap:18px; max-width:980px; margin:0 auto; padding:22px 28px}
.pagehead h1{font-size:22px; font-weight:700; letter-spacing:-0.01em}
.pagehead .sub{font-size:13px; color:var(--muted); margin-top:3px}
.pagehead .sub b{color:var(--text); font-weight:600}
.pagefoot{font-size:12px; color:var(--muted)}
.pos{color:var(--volt)} .neg{color:var(--down)}
.muted{color:var(--muted)}
.howto{font-size:12.5px; color:var(--muted); margin-bottom:12px}

/* shared metric pill */
.met{display:inline-flex; align-items:baseline; gap:7px; background:var(--card-2); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px}
.met .k{color:var(--muted)}
.met .v{font-weight:600}
.statrow{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}

/* shared details chevron */
details.working>summary, details.fbblock>summary, details.rdetail>summary, details.prowdetail>summary, details.queueguess>summary, details.storydrill>summary{
  cursor:pointer; list-style:none; font-size:12.5px; color:var(--acc); font-weight:600;
}
details.working>summary::-webkit-details-marker, details.fbblock>summary::-webkit-details-marker,
details.rdetail>summary::-webkit-details-marker, details.prowdetail>summary::-webkit-details-marker,
details.queueguess>summary::-webkit-details-marker, details.storydrill>summary::-webkit-details-marker{display:none}
details.working>summary::after, details.fbblock>summary::after, details.rdetail>summary::after, details.queueguess>summary::after, details.storydrill>summary::after{content:" +"; color:var(--muted)}
details[open].working>summary::after, details[open].fbblock>summary::after, details[open].rdetail>summary::after, details[open].queueguess>summary::after, details[open].storydrill>summary::after{content:" −"}

/* 4.2 fixtures drill-down: the GW story expands in place, full row width. */
tr.storyrow>td{padding:0 0 10px}
details.storydrill{border-top:1px solid var(--line-soft); padding-top:8px}
details.storydrill>summary{font-family:var(--font-display, inherit); font-size:14px}
details.storydrill>:not(summary){margin-top:8px}

/* 3.1 queue-guess disclosure: the measured-accuracy caption reads muted, the
   guesses stay folded until asked for. */
.queueguess-acc{font-size:12.5px; color:var(--muted); margin:6px 0 4px}
details.queueguess{margin-top:2px}

/* ---------- /brief ---------- */
.reccard .rechead{display:flex; align-items:center; gap:14px}
.recrank{width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 45%, transparent)}
.reccard .who{min-width:0; flex:1}
.reccard .who .in{font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.reccard .who .in img.badge{width:15px;height:15px}
.reccard .who .out{font-size:12px; color:var(--muted)}
.reccard .who .out s{color:var(--down); text-decoration-color:var(--down)}
.bnums{display:flex; gap:16px; flex:none; text-align:right}
.bnums .n{display:flex; flex-direction:column; align-items:flex-end}
.bnums .v{font-size:17px; font-weight:500; color:var(--volt)}
.bnums .k{font-size:11px; color:var(--muted)}
.reccard .why{margin-top:12px}
details.working{margin-top:12px; border-top:1px solid var(--line-soft); padding-top:10px}
.metgrid{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.metline{font-size:12.5px; color:var(--muted); margin:8px 0}
.metline b{color:var(--text); font-weight:600}
/* R4B #2: full_reasoning is rendered server-side (mdlite filter) into
   real h4/p/ul blocks, so the old white-space:pre-wrap (raw markdown era)
   would double every gap — block margins carry the rhythm instead. */
.reasoning{font-size:13px; color:var(--text); background:var(--card-2);
  border:1px solid var(--line-soft); border-radius:10px; padding:14px 16px; margin-top:8px; line-height:1.6}
.reasoning h4{font-size:12.5px; font-weight:700; margin:12px 0 6px}
.reasoning h4:first-child{margin-top:0}
.reasoning p{margin:0 0 8px}
.reasoning ul{margin:0 0 8px; padding-left:18px}
.reasoning li{margin-bottom:3px}
.reasoning>:last-child{margin-bottom:0}
details.fbblock{margin-top:12px; border-top:1px solid var(--line-soft); padding-top:10px}
.fbrow{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line-soft)}
.fbrow:first-of-type{border-top:none; margin-top:8px}
.face.sm{width:34px; height:34px}

/* per-GW lookahead (Batch D: persisted at recommend time) */
.tscroll{overflow-x:auto}
.lagw{margin:12px 0}
.lahead{font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px}
table.pergw{border-collapse:collapse; font-size:12.5px; min-width:340px}
table.pergw th{font-size:11px; color:var(--muted); font-weight:600; text-align:right; padding:4px 10px; border-bottom:1px solid var(--line-soft)}
table.pergw td{padding:4px 10px; text-align:right; border-bottom:1px solid var(--line-soft)}
table.pergw td:first-child, table.pergw th:first-child{text-align:left; padding-left:0; color:var(--muted)}
table.pergw tr.gainrow td{font-weight:600; border-bottom:none}
.lagw .howto{margin-top:6px; margin-bottom:0}

/* whole-roster scrutiny (Batch D: persisted at recommend time) */
table.scrutiny{border-collapse:collapse; font-size:12.5px; width:100%}
table.scrutiny th{font-size:11px; color:var(--muted); font-weight:600; text-align:left; padding:6px 10px; border-bottom:1px solid var(--line)}
table.scrutiny td{padding:6px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.scrutiny td.pcell{display:flex; align-items:center; gap:8px; white-space:nowrap}
table.scrutiny .tm{font-size:11px; color:var(--muted)}
table.scrutiny td.note{font-size:12px; color:var(--muted)}
.vpill{font-size:10px; font-weight:600; border-radius:5px; padding:2px 7px; letter-spacing:0.03em; white-space:nowrap}
.vpill.v-upgrade{color:var(--volt); background:color-mix(in srgb, var(--volt) 12%, transparent)}
.vpill.v-marginal{color:var(--flag); background:color-mix(in srgb, var(--flag) 12%, transparent)}
.vpill.v-hold{color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent)}
/* P3: J1 read-only insight surfacing (team page panel + player page note). */
.j1tag{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent); border-radius:5px; padding:2px 7px; margin-left:8px; vertical-align:middle}
.j1field{font-size:12.5px; color:var(--muted); margin-bottom:12px}
.j1field p{margin:0 0 6px}
.j1blanks{margin:0; padding-left:18px}
.j1blanks li{margin:2px 0}
table.j1tab{border-collapse:collapse; font-size:12.5px; width:100%}
table.j1tab th{font-size:11px; color:var(--muted); font-weight:600; text-align:left; padding:6px 10px; border-bottom:1px solid var(--line)}
table.j1tab td{padding:6px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.j1tab .tm{font-size:11px; color:var(--muted)}
.j1note{font-size:11.5px; color:var(--muted); margin-top:6px; max-width:60ch}

/* ---------- /team ---------- */
.pitch2{
  background:linear-gradient(180deg, var(--pitch-a), var(--pitch-b));
  border:1px solid var(--line); border-radius:12px; padding:22px 12px 16px;
  display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden;
}
.pitch2::before{ /* halfway line + centre circle, hairline */
  content:""; position:absolute; left:6%; right:6%; top:50%; height:1px;
  background:color-mix(in srgb, var(--line) 80%, transparent);
}
.pitch2::after{
  content:""; position:absolute; left:50%; top:50%; width:110px; height:110px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.prow{display:flex; justify-content:space-evenly; position:relative; z-index:1}
.pslot{display:flex; flex-direction:column; align-items:center; gap:2px; width:86px; text-align:center}
.pslot img.shirt{width:44px; height:44px; object-fit:contain}
.mgram-lg{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; background:var(--card-2); border:1px solid var(--line); color:var(--muted)}
.pslot .pname{font-size:11.5px; font-weight:600; max-width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pslot .ppts{font-size:11px; color:var(--volt)}
.benchrow{display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 6px 2px; border-top:1px solid var(--line-soft)}
.benchlabel{font-size:10px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; margin-right:6px}
.pslot.bench img.shirt, .pslot.bench .mgram-lg{width:36px; height:36px; opacity:.85}

table.rt{width:100%; border-collapse:collapse; font-size:13px}
table.rt th{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; text-align:left; padding:0 8px 8px 0; font-weight:600}
table.rt td{padding:8px 8px 8px 0; border-top:1px solid var(--line-soft); vertical-align:middle}
table.rt .num{text-align:right}
table.rt th.num{text-align:right}
table.rt .facecell{width:40px}
table.rt img.badge{width:14px; height:14px; vertical-align:-2px}
tr.inxi td{background:linear-gradient(90deg, color-mix(in srgb, var(--volt) 5%, transparent), transparent)}
.xitag{font-size:9px; color:var(--volt); border:1px solid color-mix(in srgb, var(--volt) 45%, transparent); border-radius:4px; padding:1px 5px; margin-left:7px; letter-spacing:0.04em}
details.prowdetail>summary{color:var(--text); font-size:13px}
.gwstrip{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.gwcell{display:flex; flex-direction:column; align-items:center; background:var(--card-2); border:1px solid var(--line-soft); border-radius:6px; padding:4px 7px}
.gwcell .g{font-size:9.5px; color:var(--muted)}
.gwcell .p{font-size:13px; font-weight:600}
.newsline{font-size:12px; color:var(--muted); margin-top:8px}

/* ---------- /league ---------- */
.lt-wide td{padding:9px 0}
.youtag{font-size:9px; color:var(--volt); border:1px solid color-mix(in srgb, var(--volt) 45%, transparent); border-radius:4px; padding:1px 5px; margin-left:7px; letter-spacing:0.04em}
.rivalgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px}
.rival{background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.rival .rhead{display:flex; align-items:center; gap:4px}
.rival .rname{font-weight:600; font-size:14px; flex:1; min-width:0}
.rival .rrank{color:var(--muted); font-size:13px}
.rsummary{font-size:12.5px; color:var(--muted); margin:10px 0 0; line-height:1.55}
details.rdetail{margin-top:10px; border-top:1px solid var(--line-soft); padding-top:8px}
ul.patterns{margin:10px 0 0; padding-left:18px; font-size:12.5px; color:var(--text)}
ul.patterns li{margin-bottom:5px}
.rstats{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}

/* ---------- Player links (names/photos app-wide) ---------- */
a.plink{color:inherit; text-decoration:none}
a.plink:hover{color:var(--acc); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--acc) 55%, transparent)}
a.facelink{display:contents}

/* ---------- /player profile ---------- */
.phero{display:flex; align-items:center; gap:20px; background:linear-gradient(180deg, var(--card-2), var(--card))}
.pheroface{width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:top;
  background:var(--card-2); border:1px solid var(--line); flex:none}
.pheromain{flex:1; min-width:0}
.pheromain h1{font-size:24px; font-weight:700; letter-spacing:-0.01em}
.pheromain .fullname{font-size:13px; color:var(--muted); margin-top:1px}
.heroline{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13.5px; font-weight:600}
.heroline img.badge{width:18px; height:18px}
.statusline{font-size:13px; margin-top:10px}
.ownline{font-size:12.5px; margin-top:4px; color:var(--muted)}
.ownline.yours{color:var(--volt)}
.ownline.free_agent{color:var(--flag)}
.heroshirt{width:72px; height:72px; object-fit:contain; flex:none; opacity:.9}
.spark{display:block; margin-bottom:12px}
.caption{font-size:12px; color:var(--muted); margin-top:12px; line-height:1.55}

/* ---------- /model ---------- */
table.mt{width:100%; border-collapse:collapse; font-size:13px}
table.mt th{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; text-align:left; padding:0 10px 8px 0; font-weight:600}
table.mt td{padding:8px 10px 8px 0; border-top:1px solid var(--line-soft); vertical-align:middle}
table.mt .num{text-align:right}
table.mt th.num{text-align:right}
table.mt .dropname{color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--down) 60%, transparent)}
.histtable{font-size:12.5px}

/* ---------- Glossary term-links (quiet, dotted) ---------- */
a.gloss{color:inherit; text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:color-mix(in srgb, var(--muted) 55%, transparent);
  text-underline-offset:2px; cursor:help}
a.gloss:hover{color:var(--acc); text-decoration-style:dotted; text-decoration-color:var(--acc)}

/* ---------- /glossary (DraftScoutpedia) ---------- */
.gjump{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.gjump a{font-size:12px; font-weight:600; color:var(--acc); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--card)}
.gjump a:hover{border-color:var(--acc)}
.gcat{margin-bottom:18px}
.gcards{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px}
.gcard{border:1px solid var(--line-soft); border-radius:10px; padding:14px 16px; background:var(--card-2); scroll-margin-top:90px}
.gcard h3{font-size:14px; font-weight:700; margin-bottom:8px}
.gcard:target{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc)}
.gdef{font-size:13px; line-height:1.6}
.gwhy,.ggood{font-size:12px; color:var(--muted); line-height:1.55; margin-top:8px}
.glabel{display:block; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:2px}
.ggood .glabel{color:var(--volt)}

/* ---------- /fixtures + standings W-D-L (Batch B) ---------- */
table.lt th{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; text-align:left; padding:0 0 7px; font-weight:600}
table.lt th.num, table.lt td.num{text-align:right; padding-left:8px}
table.lt thead + tbody tr:first-child td, table.lt thead ~ tr:first-of-type td{border-top:1px solid var(--line-soft)}
table.lt .ptscol{font-weight:600; color:var(--text)}
table.lt .mv{width:20px; text-align:right; font-size:10px}
.mv-up{color:var(--volt)} .mv-down{color:var(--down)} .mv-flat{color:var(--muted)}
.right.muted{color:var(--muted); font-weight:500; font-size:11px}

table.fx{width:100%; border-collapse:collapse; font-size:13px}
table.fx td{padding:9px 0; border-top:1px solid var(--line-soft); vertical-align:middle}
table.fx tr:first-child td{border-top:none}
table.fx .gw{width:52px; color:var(--muted)}
table.fx .opp .mgram{margin-right:9px}
table.fx .score{text-align:right; padding-right:14px; white-space:nowrap}
table.fx .res{width:40px; text-align:right; white-space:nowrap}
table.fx .fxr{margin-left:7px; color:var(--muted); font-size:11px}
.fxdot{display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:1px}
tr.fx-w .fxdot{background:var(--volt)}
tr.fx-l .fxdot{background:var(--down)}
tr.fx-d .fxdot{background:var(--flag)}
.dotkey .fxdot{margin:0 3px 0 6px}
.fxdot-w{background:var(--volt)} .fxdot-d{background:var(--flag)} .fxdot-l{background:var(--down)}
tr.fx-w .score{color:var(--text)}
table.fx-sm{font-size:12px}
table.fx-sm td{padding:6px 0}
table.fx-sm .gw{width:42px}
table.fx-sm .opp{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- Season nav dropdown (details/summary — tap + keyboard friendly) ---------- */
details.navgroup{position:relative; height:100%; display:flex; align-items:center}
details.navgroup>summary{
  display:flex; align-items:center; height:100%; padding:0 14px; cursor:pointer;
  color:var(--muted); font-size:14px; font-weight:600; list-style:none;
  border-bottom:2px solid transparent; font-family:Poppins,"DM Sans",sans-serif;
}
details.navgroup>summary::-webkit-details-marker{display:none}
details.navgroup>summary::after{content:" ▾"; font-size:10px; margin-left:5px; color:var(--muted)}
details.navgroup>summary:hover{color:var(--text)}
details.navgroup[data-active]>summary{color:var(--acc); border-bottom-color:var(--acc)}
details.navgroup[open]>summary{color:var(--text)}
.navdrop{
  position:absolute; top:100%; left:0; z-index:50; min-width:150px;
  background:var(--card); border:1px solid var(--line); border-radius:0 0 10px 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.25); padding:6px 0;
}
.navdrop a{
  display:block; height:auto; padding:9px 16px; border-bottom:none;
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
}
.navdrop a:hover{color:var(--text); background:var(--card-2)}
.navdrop a.active{color:var(--acc)}

/* N2: notifications centre (bell + dropdown, no JS) */
details.notif{position:relative; display:flex; align-items:center}
details.notif>summary{list-style:none; cursor:pointer; position:relative; display:flex; align-items:center; color:var(--muted); padding:4px}
details.notif>summary::-webkit-details-marker{display:none}
details.notif>summary:hover{color:var(--text)}
details.notif[open]>summary{color:var(--acc)}
.notif-badge{position:absolute; top:-3px; right:-5px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--down); color:#fff; font-size:9.5px; font-weight:700; line-height:15px; text-align:center; box-sizing:border-box}
.notif-panel{position:absolute; top:100%; right:0; z-index:60; width:320px; max-width:88vw; max-height:70vh; overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.3); padding:8px; margin-top:6px}
.notif-head{display:flex; justify-content:space-between; align-items:center; padding:4px 8px 8px; font-size:11.5px; font-weight:700; color:var(--label); text-transform:uppercase; letter-spacing:0.05em}
.notif-clear{font:inherit; font-size:11px; font-weight:600; color:var(--muted); background:transparent; border:1px solid var(--line-soft); border-radius:6px; padding:3px 8px; cursor:pointer}
.notif-clear:hover{color:var(--text); border-color:var(--acc)}
.notif-item{border-top:1px solid var(--line-soft)}
.notif-item>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px}
.notif-item>summary::-webkit-details-marker{display:none}
.notif-item.unread>summary::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--volt); flex:none}
.notif-item:not(.unread)>summary{opacity:.58}
.notif-chip{font-size:9px; font-weight:700; border-radius:4px; padding:1px 5px; flex:none; letter-spacing:0.03em}
.notif-chip.volt{color:var(--volt); background:color-mix(in srgb, var(--volt) 14%, transparent)}
.notif-chip.flag{color:var(--flag); background:color-mix(in srgb, var(--flag) 14%, transparent)}
.notif-chip.down{color:var(--down); background:color-mix(in srgb, var(--down) 14%, transparent)}
.notif-who{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--text)}
.notif-age{font-size:10.5px; color:var(--muted); flex:none}
.notif-body{padding:0 8px 10px 8px; font-size:12px; color:var(--muted)}
.notif-body p{margin:0 0 8px}
.notif-actions{display:flex; gap:12px; align-items:center}
.notif-link{font-size:11.5px; font-weight:600; color:var(--acc); text-decoration:none}
.notif-link:hover{text-decoration:underline}
.notif-read{font:inherit; font-size:11px; color:var(--muted); background:transparent; border:1px solid var(--line-soft); border-radius:6px; padding:3px 8px; cursor:pointer}
.notif-read:hover{color:var(--text); border-color:var(--volt)}
.notif-empty{padding:16px 10px; font-size:12.5px; color:var(--muted); text-align:center}

/* ---------- Motion ---------- */
:root{--dur-fast:160ms; --dur-mid:220ms; --ease-out:cubic-bezier(.2,.7,.3,1)}
@keyframes ds-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* Gate ALL motion behind BOTH the OS setting and the toggle: reduce-motion or
   html.motion-off collapses everything to the static, fully-visible state. */
@media (prefers-reduced-motion: no-preference){
  /* Entrance: hidden until motion.js adds .ds-in, then fade+rise once per load */
  html:not(.motion-off) [data-animate]{opacity:0}
  html:not(.motion-off) [data-animate].ds-in{animation:ds-rise var(--dur-mid) var(--ease-out) both}
  /* Hover-lift — quiet, no colour flash */
  html:not(.motion-off) .widget,
  html:not(.motion-off) .actionitem,
  html:not(.motion-off) .newsitem,
  html:not(.motion-off) table.lt tbody tr,
  html:not(.motion-off) table.lt tr,
  html:not(.motion-off) table.fx tr,
  html:not(.motion-off) table.wl tr{transition:transform var(--dur-fast), box-shadow var(--dur-fast)}
  html:not(.motion-off) .widget:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.18)}
  html:not(.motion-off) .actionitem:hover,
  html:not(.motion-off) .newsitem:hover,
  html:not(.motion-off) table.lt tr:hover,
  html:not(.motion-off) table.fx tr:hover,
  html:not(.motion-off) table.wl tr:hover{transform:translateY(-1px)}
  /* <details> open reveal — SCOPED to content expanders, NOT the nav dropdown */
  html:not(.motion-off) details.morestats[open]>:not(summary),
  html:not(.motion-off) details.working[open]>:not(summary),
  html:not(.motion-off) details.fbblock[open]>:not(summary),
  html:not(.motion-off) details.refreshlog[open]>:not(summary),
  html:not(.motion-off) details.prowdetail[open]>:not(summary),
  html:not(.motion-off) details.rdetail[open]>:not(summary){
    animation:ds-rise var(--dur-fast) var(--ease-out) both;
  }
}

/* ---------- Theme toggle (Chalk / Night) ---------- */
.themetoggle{
  background:var(--card-2); border:1px solid var(--line); border-radius:8px;
  color:var(--muted); font-family:Poppins,"DM Sans",sans-serif; font-size:12px; font-weight:600;
  padding:7px 12px; cursor:pointer; letter-spacing:0.02em; white-space:nowrap;
}
.themetoggle:hover{color:var(--text); border-color:var(--acc)}

/* ---------- /fdr matrix ---------- */
.fdrwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.fdr{border-collapse:separate; border-spacing:2px; font-size:11px}
table.fdr th{font-size:10px; color:var(--muted); font-weight:600; padding:2px 4px; text-align:center}
table.fdr th.club, table.fdr td.club{
  position:sticky; left:0; z-index:2; background:var(--card); text-align:left;
  padding:2px 10px 2px 0; white-space:nowrap; font-size:12px; font-weight:600;
}
table.fdr td.club img.badge{width:16px; height:16px; vertical-align:-3px; margin-right:7px}
table.fdr td.club .mgram{width:18px; height:18px; font-size:7px; margin-right:7px}
td.fdrcell{padding:0; vertical-align:top; min-width:36px}
.fdrfx{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:4px; padding:3px 2px; min-height:30px; line-height:1.15;
  color:var(--text);
}
.fdrfx+.fdrfx{margin-top:2px}
.fdrfx .o{font-size:9.5px; font-weight:600; letter-spacing:0.02em}
.fdrfx .d{font-size:9px; font-weight:700; color:color-mix(in srgb, var(--text) 78%, transparent)}
.fdr1{background:var(--fdr1)} .fdr2{background:var(--fdr2)} .fdr3{background:var(--fdr3)}
.fdr4{background:var(--fdr4)} .fdr5{background:var(--fdr5)}
.fdrbgw{background:color-mix(in srgb, var(--bg) 60%, var(--card-2)); border-radius:4px; min-height:30px}
td.fdr-done .fdrfx{opacity:.55}
.fdrkey{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; font-size:11px; color:var(--muted)}
.fdrkey .sw{display:inline-flex; align-items:center; justify-content:center; width:22px; height:15px; border-radius:3px; vertical-align:-3px; font-size:9px; font-weight:700; color:color-mix(in srgb, var(--text) 80%, transparent)}
.fdrkey-sep{opacity:.5}

/* ---------- /calendar ---------- */
.monthjump{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px}
.monthjump a{font-size:12px; font-weight:600; color:var(--acc); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--card)}
.monthjump a:hover{border-color:var(--acc)}
.month{scroll-margin-top:80px}
table.cal{width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed}
table.cal th{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; padding-bottom:4px; text-align:left}
td.calday{
  background:var(--card-2); border:1px solid var(--line-soft); border-radius:6px;
  vertical-align:top; padding:5px 6px; height:58px; font-size:11px;
}
td.calday.out{background:transparent; border-color:transparent}
td.calday.past{opacity:.55}
td.calday .dnum{color:var(--muted); font-size:10px}
.calchip{
  display:block; font-size:9.5px; font-weight:600; border-radius:4px; padding:2px 5px;
  margin-top:3px; letter-spacing:0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.calchip.deadline{color:var(--volt); background:color-mix(in srgb, var(--volt) 14%, transparent)}
.calchip.dgw{color:var(--flag); background:color-mix(in srgb, var(--flag) 14%, transparent)}
.calchip.bgw{color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent)}

/* P5a: your-players blank/double impact panel on /calendar */
.impactlist{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.impactrow{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  padding-bottom:10px; border-bottom:1px solid var(--line)}
.impactrow:last-child{border-bottom:0; padding-bottom:0}
.impactgw{flex:0 0 auto; font-weight:700; color:var(--muted)}
.impactline{flex:1 1 260px; font-size:13px; line-height:1.6}

/* ---------- 390px mobile audit (single block, audit-level fixes) ---------- */
@media (max-width: 480px){
  /* top bar wraps into two rows; nav links become a scrollable strip */
  .topbar{flex-wrap:wrap; height:auto; padding:8px 14px; gap:8px 14px; row-gap:0}
  .nav{order:3; flex-basis:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; height:44px}
  .nav a, details.navgroup>summary{padding:0 10px; white-space:nowrap}
  .top-right{margin-left:auto; gap:8px; flex-wrap:wrap; justify-content:flex-end}
  .searchbox input{width:120px}
  .gwbox{display:none}                 /* GW context still lives in the ctx strip */
  .cta{padding:8px 12px; font-size:13px}
  /* context strip wraps */
  .ctx{flex-wrap:wrap; gap:6px 16px; padding:8px 14px}
  .ctx span[style]{margin-left:0 !important}
  /* deadline strip wraps; the CTA drops onto its own row rather than squeezing */
  .deadline{flex-wrap:wrap; gap:4px 12px; padding:8px 14px}
  .deadline-do{margin-left:0}
  /* main grids collapse to one column */
  main{grid-template-columns:1fr; padding:14px}
  main.page{padding:14px}
  .widget{padding:14px}
  /* every widget/card becomes its own horizontal-scroll container so
     tables (queue, standings, roster, model) never break the page */
  .widget{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .hero{overflow-x:auto}
  /* hero scoreline stacks */
  .matchup{grid-template-columns:1fr; gap:10px}
  .scoreline .s{font-size:30px}
  .rivalgrid, .gcards{grid-template-columns:1fr}
  .phero{flex-wrap:wrap}
  td.calday{height:46px; padding:3px 4px}
  .calchip{font-size:8.5px}
  /* L1: brief cards lead with the gain numbers (up to 4 chips) — on a
     phone the card head wraps and the number row drops to its own
     full-width line instead of clipping the last chip off-screen. */
  .reccard .rechead{flex-wrap:wrap}
  .bnums{flex:1 1 100%; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; gap:12px}
}

/* --- Batch C: GW story + opposition report ------------------------------ */
.story-headline{font-size:26px; font-weight:700; letter-spacing:-0.01em; margin:4px 0 6px}
.teaser-headline{font-size:16px; font-weight:700; margin-bottom:6px}
.teaser-headline a{text-decoration:none}
.teaser-line{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.55}
.teaser-line .mono{color:var(--text)}
.storyline{display:flex; align-items:baseline; gap:10px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:13px; line-height:1.5}
.storyline:first-of-type{border-top:none}
.storyline .chip{flex:0 0 auto}
.storyline span:nth-child(2){flex:1}
.opphead{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.opphead .oppname{font-weight:600}
.opph3{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin:14px 0 6px}
table.fx .storylink{width:70px; text-align:right; white-space:nowrap; font-size:12px}

/* --- Batch C: action panel + watchlist ---------------------------------- */
.actionbar{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:14px 18px 0; padding:10px 14px; border:1px solid var(--line-soft); border-radius:10px; background:var(--panel)}
/* 2.3: the demoted housekeeping strip — a compact severity-ranked list sitting
   directly beneath the hero, quieter than a widget so it never reads as a
   competing hero. */
.actionstrip{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; padding:8px 12px; border:1px solid var(--line-soft); border-radius:10px; background:var(--panel)}
.actionstrip .actionbar-label{margin-right:2px}
.actionlist{display:flex; flex-wrap:wrap; gap:6px 8px; list-style:none; margin:0; padding:0; counter-reset:act}
.actionlist li{display:flex; align-items:baseline; gap:5px}
.actionlist li::before{counter-increment:act; content:counter(act); font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums}
.actionbar-label{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); flex:0 0 auto}
.actionitem{font-size:12.5px; text-decoration:none; padding:4px 10px; border-radius:999px; border:1px solid var(--line-soft); color:var(--text); line-height:1.4}
.actionitem:hover{border-color:var(--volt)}
.actionitem.flag{border-color:var(--flag); }
.actionitem.info{color:var(--muted)}
.watchform{display:flex; align-items:center; gap:10px; margin-top:10px}
.watchbtn{font:inherit; font-size:12.5px; font-weight:600; padding:5px 14px; border-radius:999px; cursor:pointer; background:transparent; color:var(--text); border:1px solid var(--line-soft)}
.watchbtn:hover{border-color:var(--volt)}
.watchbtn.watching{border-color:var(--volt); color:var(--volt)}
.watchhint{font-size:12px; color:var(--muted)}
table.wl{width:100%; border-collapse:collapse; font-size:13px}
table.wl th{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); text-align:left; padding:6px 8px}
table.wl th.num, table.wl td.num{text-align:right}
table.wl td{padding:8px; border-top:1px solid var(--line-soft); vertical-align:middle}
table.wl .face{width:34px; height:auto; border-radius:6px}
table.wl .badge{width:16px; height:16px; vertical-align:-3px; margin:0 4px}
.wl-status{font-size:12.5px; color:var(--muted)}
.wl-noteform{display:flex; gap:6px}
.wl-noteform input{font:inherit; font-size:12.5px; background:transparent; color:var(--text); border:1px solid var(--line-soft); border-radius:6px; padding:4px 8px; min-width:160px}
.wl-noteform button, .wl-remove{font:inherit; font-size:12px; padding:4px 10px; border-radius:6px; cursor:pointer; background:transparent; color:var(--muted); border:1px solid var(--line-soft)}
.wl-noteform button:hover, .wl-remove:hover{color:var(--text); border-color:var(--volt)}
/* N1: AI-cited reason + suggestions strip */
.wl-reason{font-size:11.5px; color:var(--muted); margin-top:3px; padding-left:9px; border-left:2px solid color-mix(in srgb, var(--volt) 45%, transparent); line-height:1.4}
.wl-suggest{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:16px; background:color-mix(in srgb, var(--volt) 4%, transparent)}
.wl-suggest-head{font-size:12.5px; font-weight:600; color:var(--label); margin-bottom:10px}
.wl-suggest-row{display:flex; align-items:center; gap:11px; padding:7px 0; border-top:1px solid var(--line-soft)}
.wl-suggest-row:first-of-type{border-top:none}
.wl-suggest-row .face{width:30px; height:auto; border-radius:6px}
.wl-suggest-row .badge{width:15px; height:15px; vertical-align:-3px; margin:0 4px}
.wl-suggest-who{flex:1; font-size:13px}
.wl-add{font:inherit; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; cursor:pointer; background:color-mix(in srgb, var(--volt) 12%, transparent); color:var(--volt); border:1px solid color-mix(in srgb, var(--volt) 40%, transparent)}
.wl-add:hover{background:color-mix(in srgb, var(--volt) 20%, transparent)}
/* P1: watch-from-anywhere. The inline add form must not force a line break
   in a table cell or news row; the "watching" state is a quiet, non-volt
   pill (a link, not an action) so it reads as status, not another button. */
.wl-addform{display:inline}
a.wl-add{display:inline-block; text-decoration:none; line-height:1.2}
.wl-add.watching{background:transparent; color:var(--muted); border-color:var(--line-soft)}
.wl-add.watching:hover{background:transparent; border-color:var(--volt); color:var(--volt)}

/* --- News hub (Batch E) --------------------------------------------- */
.refreshbtn{font:inherit; font-size:12px; font-weight:600; color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent); border:1px solid color-mix(in srgb, var(--acc) 35%, transparent); border-radius:6px; padding:4px 10px; cursor:pointer}
.refreshbtn:hover{background:color-mix(in srgb, var(--acc) 18%, transparent)}
.flash{font-size:12px; color:var(--volt); background:color-mix(in srgb, var(--volt) 8%, transparent); border:1px solid color-mix(in srgb, var(--volt) 25%, transparent); border-radius:6px; padding:6px 10px; margin-bottom:12px}
.filterchips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.fchip{font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 11px; text-decoration:none}
.fchip:hover{color:var(--text)}
.fchip.active{color:var(--acc); border-color:color-mix(in srgb, var(--acc) 45%, transparent); background:color-mix(in srgb, var(--acc) 10%, transparent)}
/* N4: day/squad grouping */
.newsgroup{margin-bottom:6px}
.newsgroup-head{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); padding:14px 0 4px; border-bottom:1px solid var(--line)}
.newsgroup-head.mine{color:var(--volt)}
.newsitem{padding:11px 0; border-top:1px solid var(--line-soft)}
.newsitem.mine{border-left:2px solid color-mix(in srgb, var(--volt) 45%, transparent); padding-left:10px; margin-left:-12px}
.newsmeta{display:flex; align-items:center; gap:9px; margin-bottom:4px}
.newsage{font-size:11px; color:var(--muted)}
.newscat{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em}
.newstitle{font-size:14px; font-weight:600}
.newstitle a{color:var(--text); text-decoration:none}
.newstitle a:hover{color:var(--acc)}
.newssummary{font-size:12.5px; color:var(--muted); margin-top:3px}
.newsplayers{display:flex; gap:7px; flex-wrap:wrap; margin-top:7px}
.pchip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:2px 10px 2px 3px}
.pchip img{width:20px; height:20px; border-radius:50%; object-fit:cover; object-position:top; background:var(--card-2)}
.pchip:hover{border-color:color-mix(in srgb, var(--acc) 45%, transparent)}
/* Batch H: per-refresh digest card + refresh log */
.digestcard{border:1px solid var(--line); border-radius:10px; padding:10px 13px; margin-bottom:12px; background:color-mix(in srgb, var(--acc) 4%, transparent)}
.digesttext{font-size:13px; margin-top:4px}
.refreshlog{margin-top:14px; font-size:12.5px; color:var(--muted)}
.refreshlog summary{cursor:pointer; font-weight:600}
.refreshrow{padding:5px 0 0 14px}

/* --- Live centre (Batch E) ------------------------------------------ */
.livelist{font-size:12.5px; color:var(--muted); margin:8px 0 0 18px; display:flex; flex-direction:column; gap:5px}
.livetotals{display:flex; align-items:baseline; gap:12px}
.livetotals .big{font-size:26px; font-weight:700}
.livetotals .vs{font-size:12px; color:var(--muted)}
.momentum{font-size:13px; margin-top:6px}
.winprob{font-size:12.5px; color:var(--muted); margin-top:8px}
.estlabel{font-size:11px; color:var(--muted); font-style:italic; margin-left:6px}

/* --- Batch F: Draft Room ------------------------------------------------ */
.dr-strip{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); padding:8px 0 12px; border-bottom:1px solid var(--line-soft)}
.dr-strip b{color:var(--text)}
.dr-stale{color:var(--flag); font-weight:600; cursor:help}
.dr-rebuild{margin:0}
.dr-rebuild .cta{border:none; cursor:pointer; font:inherit}
.dr-viewtabs{display:flex; gap:8px; margin:12px 0 4px}
.dr-tab{font-size:12.5px; text-decoration:none; padding:4px 12px; border-radius:999px; border:1px solid var(--line-soft); color:var(--muted)}
.dr-tab.on{color:var(--text); border-color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent)}
.dr-filters{display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin:10px 0 6px; font-size:11.5px}
.dr-flabel{color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-size:10px; margin:0 2px 0 8px}
.dr-flabel:first-child{margin-left:0}
.dr-fchip{text-decoration:none; color:var(--text); border:1px solid var(--line-soft); border-radius:999px; padding:2px 8px; line-height:1.5}
.dr-fchip:hover{border-color:var(--acc)}
.dr-fchip.on{border-color:var(--volt); color:var(--volt); background:color-mix(in srgb, var(--volt) 10%, transparent)}
.dr-wrap{overflow-x:auto}
table.dr{width:100%; border-collapse:collapse; font-size:13px}
table.dr th{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; text-align:left; padding:8px 10px 8px 0; font-weight:600}
table.dr td{padding:7px 10px 7px 0; border-top:1px solid var(--line-soft); vertical-align:middle}
table.dr .num{text-align:right}
table.dr th.num{text-align:right}
table.dr .dr-face{width:40px}
table.dr img.badge{width:14px; height:14px; vertical-align:-2px}
table.dr .dr-name .n{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
table.dr .dr-proj{font-weight:600}
table.dr .dr-blurb{font-size:12px; color:var(--muted); max-width:420px}
.dr-sort{color:inherit; text-decoration:none}
.dr-sort.on{color:var(--volt)}
.dr-sort:hover{color:var(--text)}
/* Tier chips: S volt-gold ramp down to F muted; ? = honest unknown. */
.tierchip{display:inline-block; min-width:22px; text-align:center; font-size:11px; font-weight:700; border-radius:5px; padding:2px 6px; letter-spacing:0.03em}
.tier-S{color:var(--bg); background:linear-gradient(135deg, var(--volt), var(--flag))}
.tier-A{color:var(--volt); background:color-mix(in srgb, var(--volt) 18%, transparent)}
.tier-B{color:var(--acc); background:color-mix(in srgb, var(--acc) 16%, transparent)}
.tier-C{color:var(--info); background:color-mix(in srgb, var(--info) 15%, transparent)}
.tier-D{color:var(--flag); background:color-mix(in srgb, var(--flag) 14%, transparent)}
.tier-F{color:var(--muted); background:color-mix(in srgb, var(--muted) 14%, transparent)}
.tier-q{color:var(--muted); background:transparent; border:1px dashed var(--line)}
.tier-X{color:var(--muted); background:color-mix(in srgb, var(--muted) 8%, transparent); border:1px solid var(--line); text-decoration:line-through}
.dr-arrow{font-size:10px}
.dr-arrow.up{color:var(--volt)}
.dr-arrow.down{color:var(--down)}
.dr-newschip{font-size:10.5px; text-decoration:none; color:var(--info); border:1px solid color-mix(in srgb, var(--info) 35%, transparent); border-radius:999px; padding:1px 7px; white-space:nowrap}
.dr-newschip:hover{border-color:var(--info)}
/* FM-style tier board */
.dr-tierboard{margin-top:8px}
.dr-tierrow{display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line-soft); align-items:flex-start}
.dr-tierlabel{flex:0 0 40px; padding-top:4px}
.dr-tierchips{display:flex; flex-wrap:wrap; gap:6px}
.dr-pchip{display:inline-flex; align-items:center; gap:6px; font-size:12px; border:1px solid var(--line-soft); border-radius:999px; padding:3px 10px 3px 4px; background:var(--card-2)}
.dr-pchip img.face{width:22px; height:22px}
.dr-pchip b{font-weight:600}
/* Live draft assistant (/draftroom/live) */
.dl-setup{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-top:10px}
.dl-setup label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted)}
.dl-in{background:var(--card-2); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:6px 8px; width:110px}
.dl-ctrls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.dl-advice{margin:10px 0; padding:10px 12px; border-left:3px solid var(--volt); background:color-mix(in srgb, var(--volt) 6%, transparent); font-size:13.5px}
.dl-alerts{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.dl-alerts:empty{margin:0}
.dl-alert{font-size:12px; color:var(--flag); border:1px solid color-mix(in srgb, var(--flag) 40%, transparent); background:color-mix(in srgb, var(--flag) 9%, transparent); border-radius:8px; padding:4px 10px}
.dl-ticker{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.dl-tick{display:inline-flex; align-items:center; gap:6px; font-size:12px; border:1px solid var(--line-soft); border-radius:999px; padding:3px 10px 3px 4px; background:var(--card-2)}
.dl-tick img.face{width:22px; height:22px}
.dl-tick.mine{border-color:color-mix(in srgb, var(--volt) 45%, transparent)}
.dl-squad{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; align-items:center}
.dl-sqlabel{font-size:11px; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase}
.dl-sqpos{display:inline-flex; align-items:center; gap:6px; font-size:12px; border:1px solid var(--line-soft); border-radius:8px; padding:4px 10px}
.dl-sqpos.full{border-color:color-mix(in srgb, var(--volt) 40%, transparent)}
.dl-sqname{color:var(--muted)}
.dl-draftbtn{font-size:11px; padding:3px 10px}

/* Friends Edition hub (finding 3): the PICK line, promoted to the top of
   the live room and made loud on the clock. NEW classes, not an edit to
   .dl-advice above — that rule is shared with the personal /draftroom/live
   page (draftlive.html) and must render byte-for-byte as it does today.
   .hub-advice is additive and only ever used in hub_room.html, so this
   changes nothing on the personal page. */
.hub-advice{margin:0 0 14px; padding:14px 15px; border-radius:13px;
  border:1px solid var(--line); background:var(--card-2)}
.hub-advice-label{font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); font-weight:700}
.hub-advice-line{font-size:17px; line-height:1.4; margin-top:6px}
.hub-advice-foot{font-size:12px; color:var(--muted); margin-top:9px; line-height:1.5}
.hub-advice.on-clock{border-color:var(--volt); border-width:2px;
  background:color-mix(in srgb, var(--volt) 12%, var(--card-2))}
.hub-advice.on-clock .hub-advice-label{color:var(--volt)}
@media (max-width:480px){.hub-advice-line{font-size:19px}}

/* Friends Edition hub (finding 4): the live-room and board columns the
   operator's board does not have (dr-rank/dr-blend/dr-surv/dr-act). Same
   card collapse as the protected R4 #16 block below, via the SAME
   table.dr.dr-cards selector, but every rule here is additionally scoped
   to a td class that block does not use — draftroom.html (the operator's
   board) and draftlive.html (the operator's live page) carry neither
   dr-rank, dr-blend, dr-surv nor dr-act, so nothing here can ever match
   either personal page. Appended here, well outside the R4 #16 block
   (app.css's byte-identity pin, tests/test_web_draftboard.py), rather than
   inside it. */
@media (max-width: 560px){
  table.dr.dr-cards td.dr-rank,
  table.dr.dr-cards td.dr-blend,
  table.dr.dr-cards td.dr-surv{
    display:inline-block; text-align:left; font-size:12px; margin:0 12px 0 0;
  }
  table.dr.dr-cards td.dr-rank::before{content:"FPL "; color:var(--muted)}
  table.dr.dr-cards td.dr-blend::before{content:"order "; color:var(--muted)}
  table.dr.dr-cards td.dr-surv::before{content:"survives "; color:var(--muted)}
  table.dr.dr-cards td.dr-act{margin-top:9px}
  table.dr.dr-cards td.dr-act .dl-draftbtn{
    display:block; width:100%; min-height:44px; font-size:14px; line-height:44px;
    padding:0 12px;
  }
}

/* Trades (/trades) — proposal cards + chess-mode chains */
.tradecard .tradehead{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.tradecard .tradehead .chip{margin-left:auto}
.tradeswap{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.tradeswap .tside{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.tradeswap .who{min-width:0; flex:1}
.tradeswap .who .in{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:8px}
.tradeswap .who .in img.badge{width:15px;height:15px}
.tradeswap .who .out{font-size:12px; color:var(--muted)}
.tradeswap .tarrow{flex:none; font-size:18px; color:var(--muted)}
.tradeswap .tside.pkgside{flex-direction:column; align-items:stretch; gap:8px}
.pkgside .pkglabel{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.pkgside .pkgrow{display:flex; align-items:center; gap:10px; min-width:0}
.treasons{margin-bottom:10px}
.chain{border-top:1px solid var(--line); padding-top:12px; margin-top:12px}
.chain:first-of-type{border-top:0; padding-top:0; margin-top:0}
.chainline{font-size:13.5px; margin-bottom:10px}

/* --- Batch H: draft player card + key-stat emphasis ----------------- */
.met.keystat{font-size:14px; padding:9px 14px; border-color:color-mix(in srgb, var(--volt) 35%, var(--line))}
.met.keystat .v{font-size:16px}
.morestats{margin-bottom:14px}
.morestats summary{cursor:pointer; color:var(--muted); font-size:12px; margin-bottom:8px}
.dp-steps td{vertical-align:top}
.dp-steplabel{white-space:nowrap}
.dp-rumours{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px}
.dp-rumour{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px}
.dp-rumour img.badge{width:18px; height:18px}
.dp-pct{color:var(--volt); font-size:12px}
a.dr-pchip{text-decoration:none; color:inherit}
a.dr-pchip:hover{border-color:var(--acc)}
.dr-newschip a{color:inherit; text-decoration:none}
.dr-newschip a:hover{text-decoration:underline}

/* ---------- Batch H: breadcrumbs, nav icons, customizable Overview ---------- */
.nav a{gap:7px}
.nav a svg.ic{flex:none; opacity:.85}
details.navgroup>summary{display:flex; align-items:center; gap:7px}
.navdrop a{display:flex; align-items:center; gap:7px}
.widget>h2 svg.ic, .hero>h2 svg.ic{vertical-align:-2.5px; margin-right:7px; opacity:.8}

.crumbs{
  display:flex; align-items:center; gap:8px; padding:8px 28px;
  font-size:12px; color:var(--muted);
}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{opacity:.5}
.crumbs .here{color:var(--text); font-weight:500}
.crumbs .crumb-back{margin-left:10px; border:1px solid var(--line); border-radius:999px; padding:1px 10px; font-size:11px}

/* Overview as one flat grid so client-side order/span/hide work (layout.js).
   Default spans come from data-span in markup. */
.ov-tools{display:flex; justify-content:flex-end; gap:8px; padding:14px 28px 0; max-width:1480px; margin:0 auto}
.ov-tools button{
  background:var(--card-2); border:1px solid var(--line); border-radius:8px;
  color:var(--muted); font-family:inherit; font-size:12px; font-weight:600;
  padding:5px 12px; cursor:pointer;
}
.ov-tools button:hover{color:var(--text); border-color:var(--acc)}
main.ov{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:start; padding-top:14px}
main.ov>section{min-width:0}
main.ov>[data-span="2"]{grid-column:span 2}
main.ov>.sz-s{grid-column:span 1 !important}
main.ov>.sz-l{grid-column:span 2 !important}
main.ov>.w-hidden{display:none}

/* Edit mode: control bars appear, hidden widgets ghost back at 40% with a
   Restore control so nothing is ever lost permanently. */
body.layout-edit main.ov>.w-hidden{display:block; opacity:.4}
.wctl{display:none; gap:6px; margin:-6px 0 10px; flex-wrap:wrap}
body.layout-edit .wctl{display:flex}
.wctl button{
  background:var(--card-2); border:1px solid var(--line); border-radius:6px;
  color:var(--muted); font-family:inherit; font-size:11px; font-weight:600;
  padding:2px 8px; cursor:pointer;
}
.wctl button:hover{color:var(--text); border-color:var(--acc)}
.wctl button.on{color:var(--acc); border-color:var(--acc)}

@media (max-width: 480px){
  main.ov{grid-template-columns:1fr}
  main.ov>section, main.ov>.sz-l, main.ov>[data-span="2"]{grid-column:auto !important}
  .crumbs{padding:8px 14px}
  .ov-tools{padding:10px 14px 0}
}

/* ---------- Overview intro / onboarding card (R4 #1) ---------- */
.introcard{position:relative; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--acc); border-radius:var(--radius-lg,12px);
  padding:14px 40px 14px 16px; margin:0 0 14px}
.introcard .introlead{font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px}
.introcard .introlead a{color:var(--acc); text-decoration:none; white-space:nowrap}
.introcard .introbullets{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
.introcard .introbullets li{font-size:12.5px; color:var(--muted); line-height:1.5}
.introcard .introbullets b{color:var(--text); font-weight:600}
.introclose{position:absolute; top:8px; right:10px; background:none; border:none;
  color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px}
.introclose:hover{color:var(--text)}
.introreopen{background:var(--card); border:1px solid var(--line); color:var(--muted);
  width:24px; height:24px; border-radius:999px; cursor:pointer; font-weight:700;
  margin:0 0 12px; line-height:1}
.introreopen:hover{border-color:var(--acc); color:var(--acc)}

/* ---------- Model verdict line (R4 #9) ---------- */
.verdict{font-size:13px; color:var(--text); background:color-mix(in srgb, var(--flag) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--flag) 30%, transparent); border-radius:8px;
  padding:8px 12px; margin-bottom:10px; line-height:1.5}

/* ---------- Zero-edge brief banner (R4 #3) ---------- */
.zerobar{border-left:3px solid var(--flag)}
.zerobar .zerohead{font-family:Poppins,"DM Sans",sans-serif; font-size:18px; font-weight:600; color:var(--text); margin-bottom:6px}
.zerobar p{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 6px}

/* ---------- R4 #16: phone-first draft board (card collapse < 560px) ----------
   Below 560px the 7-column sortable table clips off the right edge and rows go
   cavernous when a player carries news chips. Restack each row as a compact
   card: photo left, name+club line, a single POS · TIER · proj · VORP stat
   line, a clamped blurb, and at most one news chip. Desktop (>=560px) is
   untouched — the full sortable table stands. */
@media (max-width: 560px){
  table.dr.dr-cards{display:block; width:100%}
  table.dr.dr-cards thead{display:none}
  table.dr.dr-cards tbody{display:block}
  table.dr.dr-cards tr{
    display:block; position:relative;
    padding:11px 0 11px 52px; min-height:40px;
    border-top:1px solid var(--line-soft);
  }
  table.dr.dr-cards td{display:block; padding:0; border:none}
  /* photo pinned top-left */
  table.dr.dr-cards td.dr-face{position:absolute; left:0; top:11px; width:40px}
  table.dr.dr-cards td.dr-face .face{width:40px; height:auto; border-radius:6px}
  /* name line stays a wrapping flex row */
  table.dr.dr-cards td.dr-name{margin-bottom:3px}
  /* one compact stat line: POS · TIER · proj · VORP */
  table.dr.dr-cards td.dr-pos,
  table.dr.dr-cards td.dr-tier,
  table.dr.dr-cards td.dr-proj,
  table.dr.dr-cards td.dr-vorp{
    display:inline-block; text-align:left; font-size:12px; margin:0 12px 0 0; vertical-align:middle;
  }
  table.dr.dr-cards td.dr-proj::before{content:"proj "; color:var(--muted); font-weight:400}
  table.dr.dr-cards td.dr-vorp::before{content:"VORP "; color:var(--muted); font-weight:400}
  /* blurb clamps to two lines so rows never balloon */
  table.dr.dr-cards td.dr-blurb{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-top:4px; max-width:none;
  }
  /* cap news chips to one on the phone; the rest live on the player card */
  table.dr.dr-cards td.dr-name .dr-newschip ~ .dr-newschip{display:none}
}

/* --- Batch K2: FM player view — graded attributes, scout radar, stars ---
   Grade colours reuse the token trio the chips already speak (volt = good,
   flag = fine, down = worry) so both themes stay readable for free. */
.attrgroup{margin-bottom:14px; max-width:560px}
.attrgroup-title{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-bottom:2px}
.attrrow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; border-top:1px solid var(--line-soft); font-size:13px}
.attrname{color:var(--muted); min-width:0}
.attrval{font-weight:600; flex:none}
.attrval.attr-strong{color:var(--volt); background:color-mix(in srgb, var(--volt) 12%, transparent); border-radius:5px; padding:1px 7px}
.attrval.attr-ok{color:var(--flag); background:color-mix(in srgb, var(--flag) 10%, transparent); border-radius:5px; padding:1px 7px}
.attrval.attr-weak{color:var(--down); background:color-mix(in srgb, var(--down) 12%, transparent); border-radius:5px; padding:1px 7px}

/* Scout octagon (pure inline SVG, geometry from src/web/grading.py). */
.radar{display:block; max-width:100%; overflow:visible}
.radar .radar-guide{fill:none; stroke:var(--line); stroke-width:1}
.radar .radar-value{fill:color-mix(in srgb, var(--acc) 25%, transparent); stroke:var(--acc); stroke-width:1.5; stroke-linejoin:round}
.radar .radar-label{fill:var(--muted); font-size:9px; font-family:inherit}
.radarbox{flex:none; padding:0 18px}
.formwrap{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start}
.formwrap .formline{min-width:0; flex:1 1 260px}
.projwrap{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start}
.projwrap .projsteps{min-width:0; flex:1 1 320px; overflow-x:auto}

/* Star tiers (draft pages): gold literal — tokens.css has no gold, and
   #d4a017 reads on both the Match Night and Pitch & Chalk backgrounds.
   Half star = 50%-width gold overlay clipped over a muted outline. */
.stars{--gold:#d4a017; font-size:14px; letter-spacing:1px; line-height:1; vertical-align:1px; white-space:nowrap; flex:none}
.star{display:inline-block}
.star.full{color:var(--gold)}
.star.empty{color:var(--muted)}
.star.half{position:relative}
.star.half .half-base{color:var(--muted)}
.star.half .half-fill{position:absolute; left:0; top:0; width:50%; overflow:hidden; color:var(--gold)}

/* --- Batch K3: FM scout board (desktop table treatment) -----------------
   The star-ability column and graded VORP ride the >=561px board table
   only. The <560px card collapse (R4 #16 block above) is byte-untouched:
   the star cell is removed from the card flow here, in K3's own rule, so
   the cards render exactly as before. */
table.dr td.dr-stars, table.dr th.dr-stars{white-space:nowrap}
@media (max-width: 560px){
  table.dr.dr-cards td.dr-stars{display:none}
}
/* Row hover-lift: the board table was missed by the K1 motion block —
   same quiet lift as table.lt/fx/wl, scoped to the desktop table so the
   phone cards never move. */
@media (prefers-reduced-motion: no-preference) and (min-width: 561px){
  html:not(.motion-off) table.dr tbody tr{transition:transform var(--dur-fast), box-shadow var(--dur-fast)}
  html:not(.motion-off) table.dr tbody tr:hover{transform:translateY(-1px)}
}

/* ---------- Batch K4: sub-tabs + fixtures ---------- */
/* R4B #4 fix: this whole section used to sit INSIDE the K3 hover media
   query above (its closing brace was missing), so .subtabs and the
   fixtures polish only applied at >=561px with reduce-motion off — at
   390px the sub-tabs rendered as browser-default blue underlined links.
   Base styling now lives at top level for BOTH themes and all widths;
   only genuinely responsive bits stay in media queries. */

/* Sub-tab strip: quiet FM secondary row under the crumbs. Small caps-ish
   labels on a hairline rule; the lit tab takes --acc plus a 2px underline
   that sits on the rule (margin-bottom:-1px). Mobile: one horizontal
   scroll row, no wrap, scrollbar hidden. */
.subtabs{
  display:flex; gap:2px; padding:0 28px;
  border-bottom:1px solid var(--line);
  overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.subtabs::-webkit-scrollbar{display:none}
.subtabs a{
  flex:none; padding:7px 12px 6px;
  font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.subtabs a:hover{color:var(--text)}
.subtabs a.active{color:var(--acc); border-bottom-color:var(--acc)}

/* Fixtures (H2H manager results) polish — REAL columns only: GW, opponent
   monogram + name, score, result dot, story link. No month grouping, no
   club crests, no competition tags: that data does not exist on this view. */
table.fx td{padding:10px 0}
table.fx .gw{width:58px; font-size:12px}
table.fx .opp .mgram{width:27px; height:27px; font-size:9.5px; margin-right:11px}
table.fx .res{width:48px}
table.fx .res .fxdot{width:10px; height:10px; vertical-align:-1px}
table.fx .fxr{margin-left:8px}
table.fx .score{padding-right:18px; letter-spacing:0.02em}
/* Subtle zebra; row hover keeps the K1 translateY lift and adds a faint tint. */
table.fx tr:nth-child(even) td{background:color-mix(in srgb, var(--card-2) 45%, transparent)}
table.fx tr:hover td{background:color-mix(in srgb, var(--acc) 7%, transparent)}

/* Season record strip: slightly larger, values stay mono (refine only). */
.fx-record .met{font-size:13px; padding:8px 13px}
.fx-record .met .v{font-size:15px; font-weight:700}

@media (max-width: 480px){
  .subtabs{padding:0 14px}
}

/* ---------- R4B #1: laptop-width header overflow (1280–1440px) ----------
   The topbar is a fixed 58px single-row flex: wordmark + 12-item nav +
   .top-right (search, two toggles, GW chip, Run brief CTA). That chrome is
   ~1850px at min-content, so between the 480px phone stack and ~1700px
   wide desktops the right cluster ran offscreen (scrollWidth 1869 at a
   1280 viewport — R4 #18 regression). Fix: in the laptop middle ONLY, let
   the bar wrap. The nav may wrap onto extra 58px rows; .top-right wraps
   as a right-aligned second row with the search box shrinking first. All
   controls stay visible and labelled — nothing collapses to icon-only.
   <=480px keeps the existing phone stack; >1700px keeps the original
   single 58px row untouched. */
@media (min-width: 481px) and (max-width: 1700px){
  .topbar{flex-wrap:wrap; height:auto; min-height:58px; padding:0 20px; gap:0 18px; row-gap:0}
  .nav{flex-wrap:wrap; height:auto; min-height:58px}
  .nav a, details.navgroup, details.navgroup>summary{height:58px}
  .top-right{flex-wrap:wrap; justify-content:flex-end; gap:10px; padding:8px 0; margin-left:auto}
  .searchbox input{width:130px}
}

/* ---------- P1: extend the header wrap above 1700px ----------
   R4B (block above) wrapped the topbar only up to 1700px, on the assumption
   that the chrome (wordmark + nav + right cluster) fit a single 58px row on
   any wider viewport. Since then the nav has grown past that assumption, so
   the fixed row overflowed 1920px (the most common desktop width) by ~90px
   BEFORE this batch; the P1 nav addition (a Live tab) widened it further.
   Fix: allow the same wrap above 1700px too. flex-wrap only breaks a row
   when it must, so a viewport wide enough to fit the chrome still renders one
   row untouched; a narrower one wraps the right cluster down instead of
   overflowing. The R4B 481-1700 block is deliberately left unchanged. */
@media (min-width: 1701px){
  .topbar{flex-wrap:wrap; height:auto; min-height:58px; row-gap:0}
  .nav{flex-wrap:wrap; height:auto; min-height:58px}
  .nav a, details.navgroup, details.navgroup>summary{height:58px}
  .top-right{flex-wrap:wrap; justify-content:flex-end}
}

/* ---------- O4: shareable brief card (/brief/card) ----------
   The .sharecard block is sized for a screenshot, not for the desktop grid:
   a fixed 600px column, content-driven height, centred, so a phone crop
   lands on the card and nothing else. Below 600px it collapses to the
   viewport width rather than forcing a horizontal scroll. Colours come
   from the existing tokens (tokens.css is never-touch), so the card is
   correct in Night and Chalk without a per-theme rule. */
/* 600 card + main.page's 28px side padding on both sides. border-box is on,
   so this is what makes the card itself land at exactly 600px. */
main.page.cardpage{max-width:656px}

.sharecard{
  width:100%; max-width:600px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px 16px;
}
.sharecard .scbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line-soft);
}
.scmark{font-family:Poppins,"DM Sans",sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.01em}
.scmark .ai{color:var(--volt); font-weight:500}
.scgw{
  font-size:12px; font-weight:600; color:var(--label);
  background:var(--card-2); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px;
}
.sharecard .schead{
  font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.07em; margin:13px 0 4px;
}
.sharecard .scempty{font-size:13px; color:var(--muted); padding:16px 0}
.sczero{margin-top:14px; padding-left:12px; border-left:3px solid var(--flag)}
.sczerohead{font-size:15px; font-weight:700; color:var(--label); margin-bottom:6px}
.sczero p{font-size:13px; color:var(--muted); line-height:1.55}
.sczero .mono{color:var(--text)}

.scpick{padding:13px 0; border-top:1px solid var(--line-soft)}
.scpick:first-of-type{border-top:none}
.scrow{display:flex; align-items:center; gap:12px}
.scrank{
  font-size:12px; font-weight:700; color:var(--muted); flex:none;
  width:20px; text-align:center;
}
.scrow .face{width:44px; height:44px}
.scwho{min-width:0; flex:1}
.scin{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:15px; font-weight:600; letter-spacing:-0.01em;
}
.scin img.badge{width:15px; height:15px}
.scout{font-size:12px; color:var(--muted); margin-top:2px}
.scout s{color:var(--down); text-decoration-color:var(--down)}

.scnums{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0 32px}
.scn{
  display:inline-flex; align-items:baseline; gap:6px;
  background:var(--card-2); border:1px solid var(--line);
  border-radius:8px; padding:5px 10px;
}
.scn b{font-size:15px; font-weight:600; color:var(--volt)}
.scn i{font-style:normal; font-size:11px; color:var(--muted)}
.scwhy{font-size:12.5px; color:var(--muted); line-height:1.55; margin:9px 0 0 32px}
.scmore{
  display:inline-block; margin:8px 0 0 32px;
  font-size:11.5px; color:var(--acc); text-decoration:none;
}
.scmore:hover{text-decoration:underline}
.scfoot{
  margin-top:14px; padding-top:11px; border-top:1px solid var(--line-soft);
  font-size:11px; color:var(--muted);
}

/* The copy block sits OUTSIDE the card on purpose: a screenshot of the
   card should not be half raw text. */
.sharetext{
  width:100%; max-width:600px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px;
}
.sthead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.07em; margin-bottom:10px;
}
.stcopy{
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:12px; font-weight:600; letter-spacing:0; text-transform:none;
  color:#fff; background:linear-gradient(90deg, var(--acc), var(--acc-deep));
  border:none; border-radius:8px; padding:6px 14px; cursor:pointer;
}
.stcopy:hover{filter:brightness(1.08)}
/* pre-wrap + break-word: the block must never widen the page at any of the
   swept widths (390/1280/1366/1440/1920). It wraps inside its own box. */
.stpre{
  font-family:"DM Sans",system-ui,sans-serif; font-variant-numeric:tabular-nums;
  font-size:12.5px; line-height:1.6; color:var(--text);
  background:var(--card-2); border:1px solid var(--line-soft);
  border-radius:10px; padding:14px;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word;
  max-width:100%; margin-bottom:10px;
}
.sharetext .howto{margin-bottom:0}

@media (max-width: 640px){
  main.page.cardpage{padding:14px}
  .sharecard{padding:16px 14px 12px}
  .scnums, .scwhy, .scmore{margin-left:0}
}

/* --- GW retrospective (/history) — Review ----------------------------- */
/* Scrubber: a horizontal, scrollable strip of gameweek pills, modelled on
   .subtabs. The active GW is lit with the interactive accent. */
.scrubwrap{padding-bottom:14px}
.gwscrub{display:flex; gap:5px; overflow-x:auto; padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none}
.gwscrub::-webkit-scrollbar{display:none}
.gwpill{flex:0 0 auto; min-width:30px; text-align:center; font-size:12.5px; font-weight:600;
  padding:5px 8px; border-radius:8px; border:1px solid var(--line-soft); color:var(--muted);
  background:var(--card-2); text-decoration:none; font-variant-numeric:tabular-nums}
.gwpill:hover{color:var(--text); border-color:var(--line)}
.gwpill.active{color:var(--bg); background:var(--acc); border-color:var(--acc)}

.histscore{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.histscore .big{font-size:34px; font-weight:700; line-height:1; color:var(--volt)}
.histscore .lbl{font-size:13px; color:var(--muted)}
.conf-note{font-size:12px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:8px}
.captag{font-size:9px; font-weight:700; color:var(--flag); border:1px solid color-mix(in srgb, var(--flag) 55%, transparent);
  border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; margin-left:6px}

.histroster td, .histlb td{vertical-align:middle}

/* k-of-n summary banner: green when the calls net positive, red when they
   cost points. The tool cites its own record either way. */
.histsum{font-size:14px; font-weight:600; padding:10px 12px; border-radius:8px; margin-bottom:12px;
  border:1px solid var(--line-soft); background:var(--card-2)}
.histsum.good{color:var(--volt); border-color:color-mix(in srgb, var(--volt) 30%, transparent)}
.histsum.bad{color:var(--down); border-color:color-mix(in srgb, var(--down) 30%, transparent)}
.histsum b{font-weight:700}

/* Compact retrospective card: the call + how it turned out. */
.histcard{border-top:1px solid var(--line-soft); padding:12px 0}
.histcard:first-of-type{border-top:0}
.hchead{display:flex; align-items:center; gap:10px}
.hchead .who{min-width:0; flex:1}
.hchead .who .in{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-weight:600}
.hchead .who .out{font-size:12px; color:var(--muted); margin-top:2px}
.hchead img.badge{width:14px; height:14px; vertical-align:-2px}
.hcoutcome{display:flex; align-items:center; gap:7px; flex:none; margin-left:auto}
.ochip{font-size:10px; font-weight:700; border-radius:5px; padding:3px 8px; letter-spacing:0.03em}
.ochip.ok{color:var(--volt); background:color-mix(in srgb, var(--volt) 14%, transparent)}
.ochip.miss{color:var(--down); background:color-mix(in srgb, var(--down) 14%, transparent)}
.ochip.pending{color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent)}
.ogain{font-size:14px; font-weight:600}
.olbl{font-size:10px; color:var(--muted)}
.histcard .why{border-top:0; padding-top:8px; margin-top:6px}

/* --- P1: cross-feature wiring ---------------------------------------- */
/* Watch-from-anywhere: keep the affordance compact wherever it lands. */
.recwatch{display:flex; align-items:center; gap:8px; margin-top:7px}
.recwatch-lbl{font-size:11px; color:var(--muted)}
.pchipwrap{display:inline-flex; align-items:center; gap:5px; margin:0 6px 5px 0}
.pchipwrap .wl-add{padding:3px 9px; font-size:11px}
.watchcell{text-align:right; white-space:nowrap}
.watchcell .wl-add{padding:4px 10px}
.dr-watch{margin-top:5px}
.dr-watch .wl-add{padding:3px 10px; font-size:11px}
/* Player-page brief badge + related strip. */
.briefbadge{text-decoration:none}
.related .rel-head{font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px}
.rel-newsitem{display:flex; align-items:center; gap:9px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:13px}
.rel-newsitem:first-of-type{border-top:none}
.rel-newsitem a{flex:1; min-width:0}
.rel-draft{margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft); font-size:13px}
/* Overview: full-width reasons in the suggestions widget. */
.widget[data-widget="watch-suggest"] .sig .d{white-space:normal; overflow:visible}
/* Overview: the weekly checklist. */
.cklist{list-style:none; margin:4px 0 0; padding:0}
.ck{display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-top:1px solid var(--line-soft)}
.ck:first-child{border-top:none}
.ck-mark{flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%; border:1.6px solid var(--line); position:relative}
.ck-done .ck-mark{border-color:var(--volt); background:color-mix(in srgb, var(--volt) 18%, transparent)}
.ck-done .ck-mark::after{content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid var(--volt); border-width:0 1.8px 1.8px 0; transform:rotate(45deg)}
.ck-todo .ck-mark{border-color:var(--acc)}
.ck-waiting .ck-mark{border-style:dashed; border-color:var(--line-soft)}
.ck-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.ck-label{font-size:13.5px; font-weight:600}
.ck-todo .ck-label{color:var(--text)}
.ck-waiting .ck-label{color:var(--muted)}
.ck-detail{font-size:12px; color:var(--muted)}
.ck-act{flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:11px}
.ck-cmd{font-size:11px; color:var(--muted)}

/* ------------------------------------------------------------------
   Demo content frame. Wraps ANY fabricated page content (worked
   examples shown before real per-league or per-season data exists) in a
   bordered, tinted container carrying its own banner, so a fake number
   can never sit in the same unmarked frame as a real one. Consumed by
   the demo_notice()/demo_frame() macros in
   src/web/templates/_demo_notice.html; the fictional numbers themselves
   live in src/web/demo_data.py. --info (blue) rather than --flag/--down:
   this is a plain disclosure, not a warning that something is wrong.
   ------------------------------------------------------------------ */
.demo-frame{
  border:1px dashed color-mix(in srgb, var(--info) 50%, var(--line));
  border-radius:14px; padding:16px 18px; margin:12px 0;
  background:color-mix(in srgb, var(--info) 5%, transparent);
}
.demo-banner{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px}
.demo-badge{
  flex:none; font-size:10px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--info); line-height:1.6;
  background:color-mix(in srgb, var(--info) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--info) 40%, transparent);
  border-radius:5px; padding:3px 8px;
}
.demo-banner-text{margin:0; font-size:13px; line-height:1.55; color:var(--text)}
.demo-banner-text strong{color:var(--info)}
.demo-body{position:relative}

/* Worth-watching suggestions: position headers and the point breakdown.
   The breakdown exists so a one-off goal reads as one -- it is deliberately
   quieter than the reason line above it, because it is supporting evidence
   for that sentence rather than a second claim. */
.wl-suggest-pos{font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--label); font-weight:600; margin:14px 0 4px; padding-top:10px;
  border-top:1px solid var(--line-soft)}
.wl-suggest-pos:first-of-type{margin-top:6px; padding-top:0; border-top:0}
.wl-made-of{color:var(--muted); font-size:12px; margin-top:3px}
.wl-part{white-space:nowrap}
.wl-suggest-foot{color:var(--muted); font-size:12px; line-height:1.5;
  margin-top:14px; padding-top:10px; border-top:1px solid var(--line-soft)}

/* The thin-sample notice. Deliberately NOT styled as an error: nothing has
   gone wrong, the season is simply young. It reads as a caveat the page is
   volunteering, which is why it sits above the numbers it qualifies rather
   than in a footnote nobody reaches. */
.thin-sample{border-color:color-mix(in srgb, var(--flag) 45%, var(--line));
  background:color-mix(in srgb, var(--flag) 7%, transparent)}
.thin-sample h2{font-size:15px}
.thin-sample p{margin:8px 0 0; line-height:1.6; font-size:13.5px;
  color:var(--fg)}
.thin-sample .thin-sample-2,.thin-sample .thin-sample-3{color:var(--muted);
  font-size:13px}

/* Live centre: name both sides above the scoreline. The numbers were there
   from v1 and the names were not, so the page could say "1 vs 2" without
   saying whose. Sits above the totals and reads quieter than them: the
   score is the headline, the names are the context. */
.livenames{display:flex; align-items:baseline; justify-content:center;
  gap:12px; font-size:13.5px; margin-bottom:2px}
.livenames .lv-me{color:var(--acc); font-weight:600}
.livenames .lv-them{color:var(--fg); font-weight:600}
.livenames .lv-vs{color:var(--muted); font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase}

/* "Live now" strip on the Overview. Sits ABOVE the planning hero because it
   answers a different question: the hero is about the next gameweek, this is
   about the one being played. Deliberately compact and one line on desktop —
   it must not compete with the decision hero, only stop the page claiming
   there is no opponent while a match is running. */
.livenow{margin:0 0 14px}
.livenow-link{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  text-decoration:none; border:1px solid color-mix(in srgb, var(--acc) 40%, var(--line));
  background:color-mix(in srgb, var(--acc) 8%, transparent);
  border-radius:12px; padding:10px 13px; font-size:13.5px}
.livenow-link:hover{border-color:var(--acc)}
.livenow-tag{font-size:10.5px; letter-spacing:.09em; font-weight:700;
  color:var(--acc); border:1px solid var(--acc); border-radius:5px;
  padding:1px 5px}
.livenow-gw{color:var(--muted); font-size:12px; letter-spacing:.04em}
.livenow-teams{color:var(--fg); font-weight:600}
.livenow-teams b{font-size:15px; padding:0 3px}
.livenow-v{color:var(--muted)}
.livenow-more{color:var(--muted); font-size:12.5px; margin-left:auto}
@media (max-width:640px){ .livenow-more{margin-left:0; width:100%} }