/* Layout: "Matchday pitch". The header is the stand under floodlights with an LED scoreboard, then two rows of
   perimeter hoardings: a scrolling LED board fed from the data, and the view tabs as boards. Below the chalk
   touchline the page is mown grass; tables and cards sit on it like team sheets. */
:root{
  --red:#d7192a; --amber:#ffc23d; --chalk:#f4f7f2; --stand:#0c1310; --board:#0a0d0b;
  --grass1:#2a7433; --grass2:#2f7f39; --on-grass:#ffffff; --on-grass-2:#e4f0e2;
  --surface:#ffffff; --line:#dfe6de; --ink:#10261a; --muted:#536457;
  --accent:#b8121f; --accent-soft:#fde9ea; --thead:#0c1310; --thead-ink:#ffffff; --row-alt:#f4f8f3;
  --pitch:#127a3e; --fill:#2a7433; --on-wl:#fff;
  --w:#127a3e; --d:#c99a12; --l:#d1242c;
  --f1:#127a3e; --f2:#63b57f; --f3:#e1e7e0; --f4:#ef8f80; --f5:#c4232b;
  --f1t:#fff; --f2t:#082a16; --f3t:#26332a; --f4t:#3d0c08; --f5t:#fff;
  --shadow:0 0 0 2px rgba(244,247,242,.9),0 10px 22px rgba(0,0,0,.28);
  --num:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --grass1:#143b1f; --grass2:#18452a; --on-grass-2:#cfe3d3;
  --surface:#0f1b14; --line:#25382c; --ink:#e9f3eb; --muted:#9db3a3;
  --accent:#ff5a63; --accent-soft:#3a1a1f; --thead:#060a08; --row-alt:#122019;
  --pitch:#3fbf72; --fill:#5fae74; --on-wl:#0c1310;
  --w:#3fbf72; --d:#f0c03a; --l:#ff5a5f;
  --f1:#1f9a52; --f2:#256b43; --f3:#24352b; --f4:#7d3833; --f5:#d6343b;
  --f1t:#fff; --f2t:#def5e6; --f3t:#c8d6cc; --f4t:#ffe2dc; --f5t:#fff;
  --shadow:0 0 0 2px rgba(244,247,242,.55),0 10px 26px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --grass1:#143b1f; --grass2:#18452a; --on-grass-2:#cfe3d3;
  --surface:#0f1b14; --line:#25382c; --ink:#e9f3eb; --muted:#9db3a3;
  --accent:#ff5a63; --accent-soft:#3a1a1f; --thead:#060a08; --row-alt:#122019;
  --pitch:#3fbf72; --fill:#5fae74; --on-wl:#0c1310;
  --w:#3fbf72; --d:#f0c03a; --l:#ff5a5f;
  --f1:#1f9a52; --f2:#256b43; --f3:#24352b; --f4:#7d3833; --f5:#d6343b;
  --f1t:#fff; --f2t:#def5e6; --f3t:#c8d6cc; --f4t:#ffe2dc; --f5t:#fff;
  --shadow:0 0 0 2px rgba(244,247,242,.55),0 10px 26px rgba(0,0,0,.5); color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--grass1);background-image:repeating-linear-gradient(180deg,var(--grass1) 0 90px,var(--grass2) 90px 180px);color:var(--on-grass);font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}

/* Stand: floodlit terrace with seat rows */
.stand{color:#fff;padding-top:env(safe-area-inset-top,0px);background:
  radial-gradient(ellipse 40% 140% at 6% -40%,rgba(255,250,225,.24),transparent 70%),
  radial-gradient(ellipse 40% 140% at 94% -40%,rgba(255,250,225,.24),transparent 70%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 3px,transparent 3px 11px),
  var(--stand)}
.yoke{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;padding-block:16px}
.brand{min-width:0}
.eyebrow{font:600 13px var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-top:5px}
.tl-short{display:none}
.brand-name{display:block;font-family:var(--num);font-weight:900;font-size:clamp(28px,5vw,44px);line-height:.9;margin:0;text-transform:uppercase;letter-spacing:.01em;color:#fff;text-decoration:none}
.brand-name em{font-style:normal;color:var(--amber)}
/* Right of the header: the gameweek scoreboard with the deadline and time left beneath it */
.gwbox{display:flex;flex-direction:column;align-items:center;gap:6px}
.countdown{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:20px;font:600 13px var(--cond);letter-spacing:.04em;color:#e4ebe6;text-align:center;white-space:nowrap}
.countdown b{color:var(--amber);font-weight:700}
.countdown .live{padding:1px 7px;border-radius:3px;background:#1f9a52;color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.countdown .left{padding:1px 7px;border-radius:3px;background:var(--red);color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.meta{color:#b9c6bd;font:500 13px var(--cond);letter-spacing:.04em;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#3fbf72;display:inline-block;box-shadow:0 0 0 3px rgba(63,191,114,.25)}
.dot.stale{background:var(--amber);box-shadow:0 0 0 3px rgba(255,194,61,.25)}
/* LED pixel grid: laid over the big scoreboard digits, but kept behind smaller text so it stays readable */
.scoreboard b{position:relative;display:block}
.scoreboard b::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 0 1px,rgba(0,0,0,.45) 1.6px) 0 0/4px 4px}
.led .seq>*,nav.boards a{background-image:radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1.5px);background-size:4px 4px}
.scoreboard{display:flex;flex-direction:column;align-items:center;line-height:1;background:var(--board);border:3px solid #2a322d;border-radius:4px;padding:6px 16px 4px;box-shadow:0 0 0 1px #000,0 6px 16px rgba(0,0,0,.5)}
.scoreboard small{font:700 12px var(--cond);letter-spacing:.14em;color:#e4ebe6;text-transform:uppercase;margin-bottom:2px}
.scoreboard b{font-family:var(--num);font-weight:900;font-size:clamp(40px,7vw,64px);color:var(--amber);text-shadow:0 0 12px rgba(255,194,61,.55);letter-spacing:.04em}

/* Hoarding 1: scrolling LED board */
.led{overflow:hidden;height:34px;background:var(--board);border-top:2px solid #262d29}
.led .run{display:flex;width:max-content;height:100%}
.led .seq{display:flex}
.led .seq>*{display:flex;align-items:center;height:100%;padding:0 26px;font:700 16px var(--cond);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.led a:hover,.led a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.led a:focus-visible{outline-offset:-3px}
.led .seq>*:nth-child(4n+1){background-color:var(--board);color:var(--amber)}
.led .seq>*:nth-child(4n+2){background-color:var(--red);color:#fff}
.led .seq>*:nth-child(4n+3){background-color:var(--chalk);color:var(--stand);background-image:none}
.led .seq>*:nth-child(4n){background-color:#1747a6;color:#fff}
@media (prefers-reduced-motion:no-preference){.led .run{animation:led 70s linear infinite}.led:hover .run,.led:has(:focus-visible) .run{animation-play-state:paused}}
@keyframes led{to{transform:translateX(-50%)}}

/* Hoarding 2: view tabs as boards, with the touchline beneath */
nav.boards{position:sticky;top:0;z-index:5;background:#1b211e;border-bottom:4px solid var(--chalk);box-shadow:0 8px 14px rgba(0,0,0,.3)}
nav.boards .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:5px}
nav.boards a{flex:1 0 auto;text-align:center;font:700 16px var(--cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#d3dcd6;background-color:var(--board);padding:9px 16px;border-radius:2px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.6)}
nav.boards a:hover{color:#fff}
nav.boards a[aria-current="page"]{color:var(--amber);background-color:#1a2420;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 0 var(--amber)}
nav a:focus-visible,button:focus-visible,select:focus-visible,th[data-k]:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* Pitch: centre circle chalked just below the touchline */
main{padding-block:28px 56px;background:radial-gradient(circle at 50% -70px,transparent 0 150px,rgba(244,247,242,.2) 151px 154px,transparent 155px) no-repeat}
h1.pg,h2{font-family:var(--num);font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:1;text-wrap:balance;display:flex;align-items:center;gap:10px;color:var(--on-grass);text-shadow:0 1px 0 rgba(0,0,0,.25)}
h1.pg::before,h2::before{content:"";width:18px;height:18px;flex:none;border:2px solid var(--chalk);border-radius:50%;background:radial-gradient(circle,var(--chalk) 0 2.5px,transparent 3px)}
h3{font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px;color:var(--muted)}
.lede{color:var(--on-grass-2);max-width:70ch;margin:6px 0 0}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.ctrls{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap;box-shadow:var(--shadow)}
.seg button{font:700 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;border:0;background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--amber);color:var(--stand)}
select{font:700 14px var(--cond);letter-spacing:.04em;padding:8px 12px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* Tables: team sheets on the grass */
.panel{background:var(--surface);color:var(--ink);border-radius:4px;box-shadow:var(--shadow)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font:700 12px var(--cond);text-transform:uppercase;letter-spacing:.1em;color:var(--thead-ink);background:var(--thead);border-bottom:3px solid var(--amber)}
th[data-k]{cursor:pointer;user-select:none}
th[aria-sort]::after{content:" \25BE";color:var(--amber)}
th[aria-sort="ascending"]::after{content:" \25B4"}
td.l,th.l{text-align:left}
td.wrapc{white-space:normal;min-width:220px}
tbody tr:nth-child(even) td{background:var(--row-alt)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--accent-soft)}
td.pos{font-family:var(--num);font-weight:800;font-size:20px;width:36px;color:var(--ink);text-align:center}
/* Form table rows open a club panel. Striping and the top/bottom markers use classes, since detail rows break nth-child */
#ftable tbody tr.row{cursor:pointer}
#ftable tbody tr.row td{background:var(--surface)}
#ftable tbody tr.row.alt td{background:var(--row-alt)}
#ftable tbody tr.row:hover td,#ftable tbody tr.row.open td{background:var(--accent-soft)}
#ftable tbody tr.top td.pos{color:var(--pitch);box-shadow:inset 4px 0 0 var(--pitch)}
#ftable tbody tr.bot td.pos{color:var(--l);box-shadow:inset 4px 0 0 var(--l)}
#ftable tr.open td{border-bottom-color:transparent}
#ftable tr.detail td{background:var(--surface);text-align:left;white-space:normal;padding:12px 16px 14px;border-bottom:3px solid var(--amber)}
.detail .inner{position:sticky;left:16px;max-width:calc(100vw - 64px)}
.cd{display:grid;gap:14px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cd h3{margin-bottom:6px}
.cd-lines{margin:0;padding:0;list-style:none;font-size:13px}
.cd-lines li{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.cd-lines li:last-child{border-bottom:0}
.cd-lines .r{flex:none;width:18px;height:18px;font-size:10px}
.cd-lines .gw{width:34px;color:var(--muted);font:600 12px var(--cond)}
.cd-lines .opp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cd-lines small{color:var(--muted);font-size:11px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
button.exp{all:unset;cursor:pointer;display:inline-flex;align-items:center;font-weight:700}
button.exp::after{content:"";flex:none;width:6px;height:6px;margin:-3px 0 0 10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
button.exp[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}
button.exp:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
/* Wide tables: sticky first column, and a shaded edge while more is off to the right */
.stick{position:sticky;left:0;z-index:1}
td.stick{background:var(--surface)}
th.stick{z-index:2}
.scrollwrap{position:relative}
.scrollwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;border-radius:0 4px 4px 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.22));opacity:0;transition:opacity .2s}
.scrollwrap.more-r::after{opacity:1}
/* a line of text above wide tables, kept in place (just faded) so the page doesn't jump when you reach the end */
.swipe-hint{margin:0 2px 6px;text-align:right;font:600 13px var(--cond);letter-spacing:.04em;color:var(--on-grass-2);transition:opacity .2s}
.swipe-hint.done{opacity:0}
.scrollwrap.more-l .stick{box-shadow:6px 0 8px -6px rgba(0,0,0,.4)}
td .chips{flex-wrap:nowrap}
.team .short{display:none}
.team{font-weight:700}
.team small,td.back small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.ptsc{font-family:var(--num);font-weight:800;font-size:20px}
.form{display:inline-flex;gap:3px}
.r{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;font:700 11px var(--cond);color:#fff}
.r.W{background:var(--w)}.r.D{background:var(--d);color:#1c1500}.r.L{background:var(--l)}
.r.last{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.good{color:var(--w);font-weight:600}.bad{color:var(--l);font-weight:600}
.chip{display:inline-block;min-width:56px;text-align:center;padding:3px 6px;border-radius:3px;font:700 12px var(--cond);letter-spacing:.05em;text-transform:uppercase}
.f1{background:var(--f1);color:var(--f1t)}.f2{background:var(--f2);color:var(--f2t)}.f3{background:var(--f3);color:var(--f3t)}.f4{background:var(--f4);color:var(--f4t)}.f5{background:var(--f5);color:var(--f5t)}
.chip.blank{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
.chip.dif,.tk .chip.dif{display:inline-block;width:auto;min-width:44px;padding:3px 6px;font-size:13px}
.chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font:600 13px var(--cond);letter-spacing:.04em;color:var(--on-grass-2);margin-top:14px}
.legend .chip{min-width:30px}
.note{font-size:13px;color:var(--on-grass-2);margin-top:10px;max-width:90ch}
.card .note{color:var(--muted)}
.tk td{padding:6px 4px;vertical-align:middle}
.tk .cell{display:flex;flex-direction:column;gap:3px}
/* ticker chip: crest on a small white disc, then code over home/away, all on one line */
.tk .chip{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:84px;padding:5px 8px}
.tk .ct{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:30px}
.tk .chip b{font-size:14px}
.tk .chip i{font-style:normal;font-weight:500;font-size:11px;opacity:.85}
.gw-h small{display:block;font-weight:500;text-transform:none;letter-spacing:0;font-size:11px;color:#b9c6bd}
.num{font-family:var(--num);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}

/* FPL */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.card{background:var(--surface);color:var(--ink);border-radius:4px;padding:16px;min-width:0;box-shadow:var(--shadow)}
section+section{margin-top:44px}
.sec-head{margin-bottom:16px}
.cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.capc{position:relative;background:var(--surface);color:var(--ink);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0;box-shadow:var(--shadow);overflow:hidden}
.capc.main{background:var(--board);color:#fff;box-shadow:0 0 0 2px var(--amber),0 10px 22px rgba(0,0,0,.4)}
.capc.main .xp{color:var(--amber);text-shadow:0 0 10px rgba(255,194,61,.45)}
.capc.main .why{color:#c5d2c9}
.capc.main .tag{background:rgba(255,255,255,.12);color:#fff}
.capc .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.badge{display:inline-grid;place-items:center;height:26px;padding:0 12px;border-radius:4px;background:var(--amber);color:var(--stand);font:900 16px var(--num);letter-spacing:.06em;box-shadow:inset 0 3px 0 rgba(0,0,0,.12),inset 0 -3px 0 rgba(0,0,0,.12)}
.badge.vc{background:var(--surface);color:var(--ink);border:2px solid var(--ink)}
.capc .nm{font-family:var(--num);font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.capc .why{font-size:13px;color:var(--muted)}
/* close-call marker, chance of 10+ and the safe pick card */
.capc .top .tag.close{margin-left:auto;margin-right:8px;background:var(--amber);color:var(--stand)}
.capc.main .top .tag.close{background:var(--amber);color:var(--stand)}
.capc .p10{font:600 13px var(--cond);letter-spacing:.03em;color:var(--muted)}
.capc .p10 b{font:900 18px var(--num);color:var(--ink)}
.capc.main .p10,.capc.main .p10 b{color:#e4ebe6}
.cap-safe{margin-top:18px;max-width:720px}
.cap-safe .safe{display:flex;flex-direction:column;gap:6px;border-left:6px solid #1747a6}
.cap-safe .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cap-safe .nm{font:900 26px/1 var(--num);text-transform:uppercase;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cap-safe .nm .crest{width:22px;height:22px;margin-right:2px}
.cap-safe .xp{margin-left:auto;font-size:24px}
.cap-safe .card-sub{margin:0;font-size:14px;color:var(--ink)}
.xp{font-family:var(--num);font-weight:900;font-size:28px;line-height:1}
.xp small{font:600 12px var(--cond);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
ol.rank,ul.plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
ol.rank li,ul.plain li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
ol.rank li:last-child,ul.plain li:last-child{border-bottom:0}
.pp{flex:1;min-width:0}
.buys-bar{margin-top:28px}
#buys .rk{font:800 18px var(--num);color:var(--muted);width:22px;text-align:center;flex:none}
@media (min-width:760px){#buys{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:32px}#buys li:nth-child(5){border-bottom:0}}
.card-sub{color:var(--muted);font-size:13px;margin:-4px 0 10px}
.sw-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sw-run{display:grid;gap:4px;margin-top:6px}
.sw-run>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sw-run .chip{min-width:0;padding:3px 2px;font-size:11px}
.sw-gw{margin:0;font:700 11px var(--cond);letter-spacing:.06em;color:var(--muted);text-align:center}
.pp b{font-weight:700}
.pp small{display:block;color:var(--muted);font-size:12px;white-space:normal}
.tag{font:700 11px var(--cond);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--f3);color:var(--f3t);white-space:nowrap}
/* Predicted line-up: a chalked pitch with one disc per player */
.lu{display:grid;gap:18px;grid-template-columns:minmax(0,540px) minmax(0,1fr);align-items:start}
.pitch{position:relative;aspect-ratio:68/80;width:100%;border-radius:4px;color:rgba(244,247,242,.8);background:repeating-linear-gradient(180deg,#33913f 0 10%,#2c8238 10% 20%);box-shadow:var(--shadow);overflow:hidden}
.pitch .lines{position:absolute;inset:0;width:100%;height:100%}
.tok{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:86px}
.tok .pct{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:800 13px var(--cond);color:var(--stand);background:#fff;border:3px solid #1f9a52;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tok.mid .pct{background:var(--amber);border-color:#a8790c}
.tok.lo .pct{background:#fff3f3;border:3px dashed var(--red)}
.tok .nm{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 6px;border-radius:3px;background:rgba(6,10,8,.8);color:#fff;font:700 12px var(--cond);letter-spacing:.02em}
.tok .xp{font:600 11px var(--cond);color:#f1f8f0;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.lu-side h3 .crest{width:20px;height:20px;vertical-align:-5px;margin-right:6px}
.lu-side h3.gap{margin-top:16px}
#lineups select{align-self:flex-end}
@media (max-width:860px){.lu{grid-template-columns:1fr}}
@media (max-width:560px){.tok{width:64px}.tok .nm{max-width:64px;font-size:11px;padding:1px 4px}.tok .pct{width:32px;height:32px;font-size:12px}}
#market .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* plain tags are neutral labels (units, positions, percentages); colour only where it means something */
.tag.hot{background:var(--amber);color:var(--stand)}
.tag.cold{background:var(--l);color:var(--on-wl)}
.tag.up{background:var(--w);color:var(--on-wl)}
.tag.down{background:var(--l);color:var(--on-wl)}
.chips .tag{align-self:center}
.crest{width:20px;height:20px;object-fit:contain;vertical-align:-5px;margin-right:8px}
.pp b .crest,ul.plain .crest{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.capc .nm .crest{width:26px;height:26px;vertical-align:-2px;margin-right:8px}
.tk .chip .crest{display:block;flex:none;width:22px;height:22px;margin:0;padding:2px;background:#fff;border-radius:50%}
.flag{font:700 11px var(--cond);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;white-space:nowrap}
.flag.out{background:var(--l);color:#fff}.flag.doubt{background:var(--d);color:#1c1500}.flag.ok{background:var(--w);color:#fff}.flag.unk{background:var(--f3);color:var(--f3t)}
.chipcard{display:flex;flex-direction:column;gap:10px}
.chipcard .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chipcard .best{font-family:var(--num);font-weight:900;font-size:40px;line-height:.9}
.chipcard .best.edge{font-size:26px;color:var(--muted)}
.chipcard .best small{font:600 13px var(--cond);letter-spacing:.04em;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:6px}
.barrow{display:grid;grid-template-columns:44px 1fr 44px minmax(0,auto);gap:8px;align-items:center;font:600 13px var(--cond)}
.barrow .mk{display:flex;gap:3px}
.barrow .mk .tag{font-size:10px;padding:1px 5px}
/* weeks more than five ahead: lighter, because projections are rougher that far out */
.barrow.far{opacity:.55}
.barsep{margin:6px 0 0;padding-top:6px;border-top:1px dashed var(--line);font:700 11px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* the play-or-hold call for each chip */
.call{margin:0;padding:8px 10px;border-radius:4px;font:700 15px var(--cond);letter-spacing:.02em;line-height:1.3}
.call.now{background:var(--amber);color:var(--stand)}
.call.hold{background:#1747a6;color:#fff}
.call.last{background:var(--red);color:#fff}
.call.flat,.call.close{background:var(--f3);color:var(--f3t)}
.barrow .track{height:10px;background:var(--f3);border-radius:2px;overflow:hidden}
.barrow .fill{height:100%;background:var(--fill);border-radius:2px}
.barrow.top .fill{background:var(--red)}
.status{padding:40px 0;color:var(--on-grass-2)}
footer{color:#b9c6bd;font-size:13px;border-top:4px solid var(--chalk);background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 3px,transparent 3px 11px),var(--stand)}
footer .wrap{padding-block:20px 28px}
footer a{color:var(--amber)}
footer p{margin:0 0 6px;max-width:110ch}
@media (max-width:560px){.gwdone{display:none}.tl-long{display:none}.tl-short{display:inline}.eyebrow{font-size:12px}.team .full{display:none}.team .short{display:inline}.yoke{gap:8px 12px}.countdown{font-size:12px}.scoreboard{padding:4px 10px 3px}.scoreboard b{font-size:36px}h2{font-size:26px}.led .seq>*{font-size:15px;padding:0 18px}}
@media (prefers-reduced-motion:no-preference){tbody tr td{transition:background .12s}}

/* Page headings: each page's H1 matches the section headings, a size up */
h1.pg{font-size:36px}
/* Desktop navigation boards: ten pages, so a little tighter; it scrolls sideways on narrow screens */
nav.boards a{font-size:15px;padding:9px 12px;letter-spacing:.08em}
/* Phones: navigation moves to a bar at the bottom of the screen, with More for the rest */
.bottombar,.more-menu{display:none}
@media (max-width:760px){
  nav.boards{display:none}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .bottombar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--board);border-top:3px solid var(--chalk);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 16px rgba(0,0,0,.35)}
  .bottombar a,.bottombar button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:58px;font:700 12px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#c9d3cd;text-align:center}
  .bottombar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .bottombar a[aria-current="page"]{color:var(--amber);box-shadow:inset 0 3px 0 var(--amber)}
  .bottombar a:focus-visible,.bottombar button:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
  .more-menu{position:fixed;inset:auto 8px calc(70px + env(safe-area-inset-bottom,0px)) auto;margin:0;padding:8px;width:min(260px,calc(100vw - 16px));border:0;border-radius:6px;background:var(--board);box-shadow:0 0 0 2px var(--chalk),0 12px 30px rgba(0,0,0,.5)}
  .more-menu:popover-open{display:flex;flex-direction:column}
  .more-menu p{margin:4px 10px 6px;font:700 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#9fb0a5}
  .more-menu a{padding:11px 10px;border-radius:4px;color:#fff;text-decoration:none;font:700 16px var(--cond);letter-spacing:.06em;text-transform:uppercase}
  .more-menu a[aria-current="page"]{color:var(--amber)}
  .more-menu a:hover{background:#1a2420}
  h1.pg{font-size:30px}
}
/* Hub cards: one per tool, each leading to its page */
.hub{margin-top:4px}
.hubc{display:flex;flex-direction:column}
.hubc .hub-h{font:700 15px var(--cond);text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px;color:var(--muted);text-shadow:none;display:block}
.hubc .hub-h::before{display:none}
.hubc .hub-h a{color:inherit;text-decoration:none}
.hubc .hub-h a:hover{color:var(--ink)}
.hubc ul{flex:1}
.hubc .more{align-self:flex-start;margin-top:10px;font:700 14px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.hubc .more:hover{text-decoration:underline}
.hubc .badge{height:22px;padding:0 8px;font-size:14px}
.badge.alt{visibility:hidden}
.hubc .pp .chips,.hubc .pp .form{display:flex;margin-top:5px}
/* Explanations and FAQs under each tool: plain reading text on a card */
.explain{margin-top:44px}
.explain .prose{background:var(--surface);color:var(--ink);border-radius:4px;padding:20px 24px;box-shadow:var(--shadow);max-width:80ch}
.explain .prose h2{color:var(--ink);text-shadow:none;font-size:24px;margin:0 0 10px}
.explain .prose h2:not(:first-child){margin-top:28px}
.explain .prose h2::before{border-color:var(--ink);background:radial-gradient(circle,var(--ink) 0 2.5px,transparent 3px)}
.explain .prose h3{margin:22px 0 6px;color:var(--ink);letter-spacing:.08em}
.explain .prose p{margin:0 0 12px;line-height:1.6}
.explain .prose dl{margin:0}
.explain .prose dt{font-weight:700;margin-top:14px}
.explain .prose dd{margin:4px 0 0;line-height:1.6;color:var(--muted)}
.explain .prose a{color:var(--accent)}