/* expectedpointless.com — the one stylesheet (design/hub-plan.md, Phase 1–2).
 * Tokens first (light is the default; dark follows the OS unless the reader's
 * toggle says otherwise), then base, then components. Every text-bearing colour
 * pair is contrast-checked in design/tokens.md — change a hex here, re-run the
 * script there. The nav block between the NAVCSS markers is injected by
 * src/site_data.py:sync_navs(); edit NAV_CSS there, not here. */

/* ---------------------------------------------------------------- tokens: light (default) */
:root{
  color-scheme:light;
  --bg:#f2eff9;--bg-2:#ffffff;--bg-3:#f1eef6;--line:#d8d3e3;--line-2:#9287ab;
  --text:#1b1035;--text-2:#70628d;
  --link:#006c80;--link-hover:#005b6b;--up:#00754e;--down:#c6104e;--on-accent:#ffffff;
  --focus:#006c80;--wordmark:#009cb8;
  --chart-1:#0087a0;--chart-2:#6b2fd6;--chart-3:#d0421e;--chart-4:#3b6fe0;--chart-5:#a5309a;
  --chart-grid:var(--line);
  --shadow-pop:0 8px 24px rgb(27 16 53 / .14);
  /* fixture-difficulty bands: a one-hue ramp of the brand cyan, 1 hardest .. 5 easiest
     (text colour chosen per band; every pair >= 4.5:1) */
  --fdr-1:#eaf3f5;--fdr-2:#c4e3e9;--fdr-3:#88d0dd;--fdr-4:#10abc6;--fdr-5:#005f70;
  --fdr-1-ink:#1b1035;--fdr-2-ink:#1b1035;--fdr-3-ink:#1b1035;--fdr-4-ink:#1b1035;--fdr-5-ink:#ffffff;
  /* type */
  --font:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-1:12px;--fs-2:14px;--fs-3:16px;--fs-4:20px;--fs-5:30px;--fs-6:clamp(36px,2.8vw,40px);
  --fw-light:300;--fw-normal:400;--fw-medium:500;
  --lh-tight:1.15;--lh-body:1.5;
  /* spacing (4px grid), radii, cells, layout */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;
  --r-control:4px;--r-card:8px;
  --cell-y:6px;--cell-x:12px;
  --prose-w:68ch;--wrap-w:1200px;--header-w:1320px;
  /* transitional aliases — old names mapped onto the roles, so anything still
     saying --cyan/--muted (the homepage's injected nav, the pitch) resolves in
     both themes. They follow the theme because they point at the tokens above.
     REMOVE in Phase 4 when the homepage is rebuilt on the roles. */
  --ink:var(--bg);--panel:var(--bg-2);--muted:var(--text-2);
  --cyan:var(--link);--green:var(--up);--pink:var(--down);--violet:var(--chart-2);
}

/* ---------------------------------------------------------------- tokens: dark
   Declared twice so the toggle wins in both directions: the media block covers
   the OS setting, the data-theme block an explicit choice. KEEP THE TWO IDENTICAL. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#12021f;--bg-2:#1b1035;--bg-3:#271849;--line:#2e2050;--line-2:#6c5a96;
    --text:#f3eefb;--text-2:#a69dbb;
    --link:#04d9ff;--link-hover:#70e9ff;--up:#00f5a3;--down:#ff4d89;--on-accent:#12021f;
    --focus:#04d9ff;--wordmark:#04d9ff;
    --chart-1:#0aa5c4;--chart-2:#8f6cf0;--chart-3:#e85a33;--chart-4:#5b8def;--chart-5:#cc55bf;
    --shadow-pop:0 10px 26px rgb(0 0 0 / .5);
    --fdr-1:#213336;--fdr-2:#234b52;--fdr-3:#226a77;--fdr-4:#15a7c1;--fdr-5:#05daff;
    --fdr-1-ink:#f3eefb;--fdr-2-ink:#f3eefb;--fdr-3-ink:#f3eefb;--fdr-4-ink:#12021f;--fdr-5-ink:#12021f;
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#12021f;--bg-2:#1b1035;--bg-3:#271849;--line:#2e2050;--line-2:#6c5a96;
    --text:#f3eefb;--text-2:#a69dbb;
    --link:#04d9ff;--link-hover:#70e9ff;--up:#00f5a3;--down:#ff4d89;--on-accent:#12021f;
    --focus:#04d9ff;--wordmark:#04d9ff;
    --chart-1:#0aa5c4;--chart-2:#8f6cf0;--chart-3:#e85a33;--chart-4:#5b8def;--chart-5:#cc55bf;
    --shadow-pop:0 10px 26px rgb(0 0 0 / .5);
    --fdr-1:#213336;--fdr-2:#234b52;--fdr-3:#226a77;--fdr-4:#15a7c1;--fdr-5:#05daff;
    --fdr-1-ink:#f3eefb;--fdr-2-ink:#f3eefb;--fdr-3-ink:#f3eefb;--fdr-4-ink:#12021f;--fdr-5-ink:#12021f;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);
     font-family:var(--font);font-size:var(--fs-2);font-weight:var(--fw-normal);
     line-height:var(--lh-body);font-variant-numeric:tabular-nums;
     -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:100;padding:var(--s2) var(--s3);
      background:var(--bg-2);color:var(--link);border:1px solid var(--line-2);
      border-radius:var(--r-control)}
.skip:focus{top:var(--s2)}

/* layout: data pages use the screen; prose stays narrow */
.wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 var(--s4)}
header.top{border-bottom:1px solid var(--line);padding:var(--s3) 0;position:relative;
           background:var(--bg)}
header.top .wrap{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
                 max-width:var(--header-w)}
.logo{font-weight:900;font-style:italic;font-size:var(--fs-3);letter-spacing:-.02em;
      text-decoration:none;color:var(--text);white-space:nowrap}
.logo:hover{color:var(--text)}
.logo i{color:var(--wordmark);font-style:inherit}
.theme{margin-left:auto;font:inherit;color:var(--text-2);background:none;
       border:1px solid var(--line-2);border-radius:var(--r-control);
       padding:var(--s1) var(--s2);cursor:pointer;line-height:var(--lh-body)}
.theme:hover{color:var(--text);background:var(--bg-3)}
footer{border-top:1px solid var(--line);margin-top:var(--s6);padding:var(--s4) 0 var(--s6);
       color:var(--text-2);font-size:var(--fs-1)}
footer .wrap{padding-bottom:var(--s5)}

/* type: six sizes, weights 300/400/500, sentence case, no tracking */
h1,h2,h3{font-weight:var(--fw-medium);line-height:var(--lh-tight);letter-spacing:0;
         margin:0 0 var(--s3)}
h1{font-size:var(--fs-6);margin:var(--s2) 0 var(--s3)}
h2{font-size:var(--fs-4);margin:var(--s6) 0 var(--s2)}
h3{font-size:var(--fs-3)}
p{margin:0 0 var(--s3)}
p b,p strong{font-weight:var(--fw-medium)}
small,.meta{font-size:var(--fs-1);color:var(--text-2)}
.crumb{font-size:var(--fs-1);color:var(--text-2);margin-top:var(--s5)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.stand{font-size:var(--fs-3);color:var(--text-2);margin:0 0 var(--s4);max-width:var(--prose-w)}
.prose{max-width:var(--prose-w);font-size:var(--fs-3)}
.prose ul{padding-left:var(--s5);margin:0 0 var(--s3)}
.note{color:var(--text-2);max-width:var(--prose-w);border-top:1px solid var(--line);
      padding-top:var(--s3);margin:var(--s5) 0 0}
.article p,.article .stand{max-width:var(--prose-w)}
.art-kick{font-size:var(--fs-1);color:var(--text-2);margin-top:var(--s5)}
.art-by{font-size:var(--fs-1);color:var(--text-2);border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);padding:var(--s2) 0;margin:0 0 var(--s5)}

/* signed deltas: colour plus a glyph, never colour alone; one missing-value mark */
.up{color:var(--up)}
.down{color:var(--down)}
.up::before{content:"\25B2\00a0"}
.down::before{content:"\25BC\00a0"}
.na{color:var(--text-2)}

/* flags: a solid --down fill with --on-accent text, 12px/500 */
.flag{display:inline-block;padding:2px var(--s2);border-radius:var(--r-control);
      background:var(--down);color:var(--on-accent);font-size:var(--fs-1);
      font-weight:var(--fw-medium);margin:0 0 var(--s3)}
.flag.up{background:var(--up);color:var(--on-accent)}
.flag.up::before{content:none}

/* KPIs: no box, no bar — muted label, light large value, a change line */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s4);
     margin:0 0 var(--s6)}
.kpi>div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
     padding:var(--s4) var(--s5);box-shadow:0 1px 2px rgb(27 16 53 / .06)}
.kpi>div{border-top:3px solid var(--kpi-accent,#04d9ff)}      /* brand accent per tile */
.kpi>div:nth-child(4n+2){--kpi-accent:#8a3ffc}
.kpi>div:nth-child(4n+3){--kpi-accent:#ff1f6b}
.kpi>div:nth-child(4n+4){--kpi-accent:#00f5a3}
.kpi .l{font-size:var(--fs-3);color:var(--text-2);margin:0 0 var(--s1)}
.kpi .v{font-size:var(--fs-5);font-weight:var(--fw-light);line-height:var(--lh-tight)}
.kpi .v small{font-size:var(--fs-2);font-weight:var(--fw-normal);color:var(--text-2)}
.kpi .d{font-size:var(--fs-1);color:var(--text-2);margin-top:var(--s1)}

/* ---------------------------------------------------------------- tables
   Header band in --bg-3 at 12px/400, sentence case; faint striping instead of a
   rule under every row; numbers right-aligned in .num; sticky thead on long
   tables; a sort caret from [data-sort] + aria-sort; no underlines in cells. */
table{width:100%;border-collapse:collapse;margin:0 0 var(--s4);font-size:var(--fs-2)}
th,td{padding:var(--cell-y) var(--cell-x);text-align:left;vertical-align:baseline;border:0}
thead th{background:var(--bg-3);color:var(--text-2);font-size:var(--fs-1);
         font-weight:var(--fw-normal);border-bottom:1px solid var(--line);
         line-height:var(--lh-tight);padding-top:var(--s2);padding-bottom:var(--s2)}
table.long thead th{position:sticky;top:0;z-index:1}
table:not(.fdr) tbody tr:nth-child(even)>:is(td,th){background:var(--bg-3)}
table:not(.fdr) tbody tr:hover>:is(td,th){background:var(--bg-3)}
.num{text-align:right;font-variant-numeric:tabular-nums}
td small,th small{color:var(--text-2);font-weight:var(--fw-normal)}
table a{color:var(--link);text-decoration:none}
tbody tr.rowlink{cursor:pointer}
table:not(.fdr) tbody tr.rowlink:hover>:is(td,th){background:color-mix(in srgb,var(--link) 9%,var(--bg-2))}
tbody tr.rowlink:hover>:first-child a{text-decoration:underline}
table a:hover{color:var(--link);text-decoration:underline}
caption{text-align:left;color:var(--text-2);font-size:var(--fs-1);padding:0 0 var(--s1)}
tr.cap td.n::after{content:"C";display:inline-block;margin-left:var(--s2);padding:0 var(--s1);
                   border:1px solid var(--line-2);border-radius:var(--r-control);
                   font-size:var(--fs-1);line-height:16px;color:var(--text-2)}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]::after{content:" \25B4\25BE";opacity:0;transition:opacity .15s}
th[data-sort]:hover::after,th[data-sort]:focus-visible::after{opacity:.7}
table.nosort th[data-sort]{cursor:default}
table.nosort th[data-sort]::after{content:none}
tbody th[scope="row"]{font-weight:var(--fw-normal);text-align:left}
tfoot :is(td,th){border-top:1px solid var(--line-2);font-weight:var(--fw-medium);
  background:var(--bg-2);padding-top:var(--s2)}
tfoot small{font-weight:var(--fw-normal);color:var(--text-2)}
th[aria-sort="ascending"]::after{content:" \25B4";opacity:1}
th[aria-sort="descending"]::after{content:" \25BE";opacity:1}
th[aria-sort]{color:var(--text)}
/* a long table scrolls inside a box so the sticky header has something to stick
   to; a bare overflow-x wrapper would disable sticky, so it is separate */
.scroll{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-card);
        margin:0 0 var(--s4)}
.scroll>table{margin:0}
.scroll>table thead th{position:sticky;top:0;z-index:1}
.scroll-x{overflow-x:auto;margin:0 0 var(--s4)}
.scroll-x>table{margin:0}

/* ---------------------------------------------------------------- cards and tiles
   One recipe: 8px radius, 1px --line, no shadow, 20px padding, 20px title with
   controls on the right, footer with the source note and an "as of" stamp. */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
      padding:var(--s5);margin:0 0 var(--s5);box-shadow:0 1px 2px rgb(27 16 53 / .06)}
.card>header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
             margin:0 0 var(--s4)}
.card>header h2{font-size:var(--fs-4);font-weight:var(--fw-normal);margin:0}
.card>header .controls{display:flex;gap:var(--s2);align-items:center;color:var(--text-2)}
.card>footer{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
             margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--line);
             color:var(--text-2);font-size:var(--fs-1)}
.card>footer .asof::before{content:"as of "}
.card>table{margin:0 calc(-1 * var(--s5));width:calc(100% + 2 * var(--s5))}
.tw{margin:0 0 var(--s4)}
.tw>table{margin:0}
.card>.tw{margin-left:calc(-1 * var(--s5));margin-right:calc(-1 * var(--s5))}
.tw:has(>table[hidden]){display:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4);
       margin:0 0 var(--s5)}
.cards>.card{margin:0;display:flex;flex-direction:column}
.cards>.card>footer{margin-top:auto}
.home-hero .updated{font-size:var(--fs-1);color:var(--text-2);margin:calc(-1 * var(--s2)) 0 var(--s4)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--s2);
       margin:0 0 var(--s6)}
.tiles a{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
         background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
         color:var(--text);text-decoration:none;font-weight:var(--fw-medium)}
.tiles a:hover{background:var(--bg-3)}
.tiles img{width:18px;height:18px}
.pop{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
     box-shadow:var(--shadow-pop)}

/* ---------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s3);
     background:var(--link);color:var(--on-accent);border:1px solid transparent;
     border-radius:var(--r-control);font:inherit;font-weight:var(--fw-medium);line-height:1;
     cursor:pointer;text-decoration:none}
.btn:hover{background:var(--link-hover);color:var(--on-accent)}
.btn.ghost{background:transparent;color:var(--link);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--bg-3)}
input,select,textarea{height:32px;padding:0 var(--s2);background:var(--bg-2);color:var(--text);
                      border:1px solid var(--line-2);border-radius:var(--r-control);font:inherit}
input::placeholder{color:var(--text-2)}
label{display:block;font-size:var(--fs-1);color:var(--text-2);margin:0 0 var(--s1)}
.field{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- pitch
   An illustration, not a surface: it stays green in both themes. Server-rendered
   on club, gameweek and squad-builder pages beside its table. */
.pitch{position:relative;padding:var(--s3) var(--s2) var(--s2);overflow:hidden;display:flex;
       flex-direction:column;justify-content:space-evenly;min-height:300px;
       background:#2f9e5c;border-radius:var(--r-card);margin:0 0 var(--s4);max-width:470px}
.pitch::before{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:0;
               border:1.5px solid rgb(255 255 255 / .22);border-bottom:0;pointer-events:none}
.pitch::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
              width:44%;height:34px;border:1.5px solid rgb(255 255 255 / .22);border-top:0;
              pointer-events:none}
.prowline{display:flex;justify-content:space-evenly;position:relative;z-index:1}
.pl{flex:0 0 64px;min-width:0;text-align:center;position:relative}
.shirtwrap{position:relative;width:38px;height:38px;margin:0 auto}
.kitcirc{position:absolute;inset:0;border-radius:50%;overflow:hidden;
         background:rgb(255 255 255 / .16);border:1.5px solid rgb(255 255 255 / .34)}
.kitcirc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
             object-position:top center}
.crest{position:absolute;bottom:-2px;left:-3px;width:15px;height:15px;z-index:4;
       border-radius:50%;background:#12021f;padding:1px}
.plname{margin-top:2px;color:#fff;font-size:var(--fs-1);font-weight:var(--fw-medium);
        line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        text-shadow:0 1px 2px rgb(0 40 15 / .55)}
.plname a{color:inherit;text-decoration:none}
.plname a:hover{color:#fff;text-decoration:underline}
.plval{display:inline-block;margin-top:1px;padding:0 var(--s1);border-radius:3px;
       background:rgb(6 42 22 / .55);color:#eafff4;font-size:var(--fs-1);
       font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.plval.hi{background:#fff;color:#04160c}
.iscap .kitcirc{border:2px solid #fff}
.capb{position:absolute;top:-6px;right:-3px;width:18px;height:18px;border-radius:50%;
      background:#12021f;color:#fff;font-size:var(--fs-1);font-weight:var(--fw-medium);
      line-height:18px;z-index:5}
.board{display:grid;grid-template-columns:minmax(300px,470px) minmax(240px,1fr);
       gap:var(--s5);align-items:start;margin:0 0 var(--s6)}
.board .pitch{margin:0}
.board table{margin:0}

/* ---------------------------------------------------------------- fixture difficulty grid
   Sequential data: one hue, light to dark, hardest to easiest. Not up/down. */
.fdr{border-collapse:separate;border-spacing:2px;font-size:var(--fs-1)}
.fdr thead th{position:static;background:none;border:0;text-align:center;padding:var(--s1)}
.fdr thead th:first-child{text-align:left}
.fdr td{padding:var(--s1);text-align:center;line-height:1.25;border-radius:var(--r-control)}
.fdr td.n{text-align:left;font-size:var(--fs-2);font-weight:var(--fw-medium)}
.fdr td.fx{min-width:52px;font-weight:var(--fw-medium)}
.fdr td.fx i{display:block;font-style:normal;font-weight:var(--fw-normal)}
.fdr td.e{background:var(--fdr-1);color:var(--fdr-1-ink)}
.fdr td.d{background:var(--fdr-2);color:var(--fdr-2-ink)}
.fdr td.c{background:var(--fdr-3);color:var(--fdr-3-ink)}
.fdr td.b{background:var(--fdr-4);color:var(--fdr-4-ink)}
.fdr td.a{background:var(--fdr-5);color:var(--fdr-5-ink)}
.fdr td.blank{background:var(--bg-3);color:var(--text-2)}
.fdr td.num{font-size:var(--fs-2)}
/* set-piece cells: up to three takers stacked, order in muted */
td.sp{line-height:var(--lh-body)}
td.sp i{font-style:normal;color:var(--text-2);font-size:var(--fs-1)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:820px){.board{grid-template-columns:1fr}}
@media (max-width:600px){
  :root{--cell-x:8px}
  .card{padding:var(--s4)}
  .card>table{margin:0 calc(-1 * var(--s4));width:calc(100% + 2 * var(--s4))}
  .card>.tw{margin-left:calc(-1 * var(--s4));margin-right:calc(-1 * var(--s4))}
  .kpi{gap:var(--s4)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* homepage (write_home) */
[hidden]{display:none!important}
.home-hero h1{margin:var(--s6) 0 var(--s2)}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));margin-top:var(--s4)}
.card>header a.controls{font-size:var(--fs-2);color:var(--link);text-decoration:none;white-space:nowrap}
.card>header a.controls:hover{text-decoration:underline}
.card>footer a{white-space:nowrap;color:var(--link);text-decoration:none}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-control);overflow:hidden}
.seg button{font:inherit;font-size:var(--fs-1);padding:var(--s1) var(--s3);background:none;border:0;
  color:var(--text-2);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--bg-3);color:var(--text);font-weight:var(--fw-medium)}
.card>header{flex-wrap:wrap}
@media (max-width:600px){
  .kpi{gap:var(--s4)}
  .kpi .v{font-size:var(--fs-4)}
  .home-hero h1{margin-top:var(--s4)}
}

/* phones: data tables behave like an app's, not a squashed desktop table.
   One page scroll (no scroll box inside it), rows kept to one line and swiped
   sideways, the first column pinned so you always know whose row it is, low-
   value columns hidden per table with .m-hide-N, and tighter cells. */
@media (max-width:600px){
  :root{--cell-x:8px}
  .scroll{max-height:none}
  .tw{overflow-x:auto}
  :is(.scroll,.scroll-x,.tw) :is(td,th){white-space:nowrap}
  :is(.scroll,.scroll-x,.tw) td.wrap{white-space:normal;min-width:210px}
  :is(.scroll,.scroll-x,.tw) tr>:first-child{position:sticky;left:0;z-index:2;
    background:var(--bg-2);box-shadow:1px 0 0 var(--line)}
  :is(.scroll,.scroll-x,.tw) tbody tr:nth-child(even)>:first-child,
  :is(.scroll,.scroll-x,.tw) thead th:first-child{background:var(--bg-3)}
  :is(.scroll,.scroll-x,.tw) thead th:first-child{z-index:3}
  /* a club heading spans the table, so it can't pin; pin its label instead */
  :is(.scroll,.scroll-x,.tw) tr.group>th{position:static;box-shadow:none}
  :is(.scroll,.scroll-x,.tw) tr.group .grp-label{position:sticky;left:var(--cell-x);display:inline-block}
  table.m-hide-2 :is(th,td):nth-child(2),table.m-hide-3 :is(th,td):nth-child(3),
  table.m-hide-4 :is(th,td):nth-child(4),table.m-hide-5 :is(th,td):nth-child(5),
  table.m-hide-6 :is(th,td):nth-child(6),table.m-hide-7 :is(th,td):nth-child(7),
  table.m-hide-8 :is(th,td):nth-child(8){display:none}
}

/*NAVCSS*/
/* app shell: a fixed top bar (logo, search, theme) over a fixed left sidebar.
   Both are position:fixed, so they sit inside each page's existing header. */
:root{--topbar-h:60px;--side-w:240px}
html{scroll-padding-top:calc(var(--topbar-h) + var(--s3))}
body{padding-top:var(--topbar-h)}
header.top{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:40;padding:0;
  background:var(--bg-2);border-bottom:1px solid var(--line)}
header.top .wrap{max-width:none;height:100%;margin:0;padding:0 var(--s5);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:nowrap}
header.top .logo{order:1;white-space:nowrap}
.navtoggle{order:0;display:none;font:inherit;background:none;border:1px solid var(--line-2);
  border-radius:var(--r-control);cursor:pointer;padding:var(--s1) var(--s2);color:var(--text);
  align-items:center;gap:var(--s1)}
.navtoggle i{font-style:normal}
.navsearch{order:2;position:relative;flex:1 1 auto;max-width:560px;margin:0 auto;min-width:0}
.navsearch input{width:100%;font:inherit;font-size:var(--fs-2);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);color:var(--text)}
.navsearch input:focus{outline:2px solid var(--focus);outline-offset:1px;background:var(--bg-2)}
.navsearch ul{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;list-style:none;
  margin:0;padding:var(--s1);background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow-pop);max-height:70vh;overflow-y:auto}
.navsearch li a{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);
  border-radius:var(--r-control);color:var(--text);text-decoration:none}
.navsearch li a small{color:var(--text-2);white-space:nowrap}
.navsearch li.on a,.navsearch li a:hover{background:var(--bg-3)}
header.top .theme{order:3;margin-left:0}
.mainnav{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--side-w);z-index:30;
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  padding:var(--s4) var(--s3) var(--s6);background:var(--bg-2);border-right:1px solid var(--line)}
.mainnav a{display:block;padding:var(--cell-y) var(--s3);border-radius:var(--r-control);
  font-size:var(--fs-2);color:var(--text-2);text-decoration:none;white-space:nowrap}
.mainnav a:hover{background:var(--bg-3);color:var(--text)}
.mainnav a[aria-current="page"]{background:var(--bg-3);color:var(--link);
  font-weight:var(--fw-medium)}
.side-home{margin-bottom:var(--s3)}
/* groups read as groups: links sit close together, sections are split by a
   hairline and more space, and each label is a heading rather than a caption */
.side-sec{padding:var(--s3) 0;border-top:1px solid var(--line)}
.side-label{margin:0 0 var(--s2);padding:0 var(--s3);font-size:var(--fs-1);
  font-weight:var(--fw-medium);color:var(--chart-2);text-transform:uppercase;
  letter-spacing:.08em;cursor:default;user-select:none}   /* eyebrow, not a link:
  the site's one capitalised label, violet because cyan means clickable */
table.long thead th,table.data thead th{top:var(--topbar-h)}
@media (min-width:1024px){body{padding-left:var(--side-w)}}
@media (max-width:1023px){
  .navtoggle{display:inline-flex}
  .mainnav{width:min(280px,85vw);transform:translateX(-105%);visibility:hidden;
    transition:transform .2s ease,visibility .2s}
  .mainnav.open{transform:none;visibility:visible;box-shadow:var(--shadow-pop)}
}
@media (max-width:600px){
  :root{--topbar-h:104px}
  header.top .wrap{flex-wrap:wrap;align-content:center;row-gap:var(--s2);padding:var(--s2) var(--s3)}
  header.top .theme{margin-left:auto}
  .navsearch{order:9;flex-basis:100%;max-width:none}
}
/* brand frame: top bar and sidebar are the brand's deep purple in both themes,
   with the neon wordmark and active item; the content area stays light */
:root{--nav-bg:#1b1035;--nav-line:rgb(255 255 255 / .08);--nav-line-2:rgb(255 255 255 / .18);
  --nav-text:#c9bfe3;--nav-strong:#fff;--nav-hover:rgb(255 255 255 / .06);
  --nav-active:rgb(4 217 255 / .14);--nav-accent:#04d9ff;--nav-label:#b99cff;
  --nav-input:rgb(255 255 255 / .07)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--nav-bg:#0b0116}}
:root[data-theme="dark"]{--nav-bg:#0b0116}
header.top{background:var(--nav-bg);border-bottom-color:var(--nav-line)}
header.top .logo,header.top .logo:hover{color:var(--nav-strong)}
header.top .logo i{color:var(--nav-accent)}
header.top .navtoggle{color:var(--nav-strong);border-color:var(--nav-line-2)}
header.top .theme{color:var(--nav-text);border:1px solid var(--nav-line-2);background:none}
header.top .theme:hover{color:var(--nav-strong);background:var(--nav-hover)}
.navsearch input{background:var(--nav-input);border-color:var(--nav-line-2);color:var(--nav-strong)}
.navsearch input::placeholder{color:var(--nav-text);opacity:1}
.navsearch input:focus{background:rgb(255 255 255 / .12);outline-color:var(--nav-accent)}
.mainnav{background:var(--nav-bg);border-right-color:var(--nav-line)}
.mainnav a{color:var(--nav-text)}
.mainnav a:hover{background:var(--nav-hover);color:var(--nav-strong)}
.mainnav a[aria-current="page"]{background:var(--nav-active);color:var(--nav-accent)}
.side-sec{border-top-color:var(--nav-line)}
.side-label{color:var(--nav-label)}

/*/NAVCSS*/

/* entity index pages (src/site_pages.py) */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
table.data thead th{position:sticky;top:0;z-index:1}
.card-title{font-size:var(--fs-4);font-weight:var(--fw-normal);margin:0 0 var(--s3)}
.card-foot{color:var(--text-2);font-size:var(--fs-1);border-top:1px solid var(--line);
    padding-top:var(--s2);margin:var(--s3) 0 0}
.na{color:var(--text-2)}

/* /injuries club picker: all 20 clubs as toggles; none pressed shows every club */
.clubpick>header .controls{font-size:var(--fs-2)}
.clubpick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(172px,100%),1fr));gap:var(--s2)}
.clubpick-grid button{display:flex;align-items:center;gap:var(--s2);min-height:40px;min-width:0;margin:0;
    padding:var(--s1) var(--s3) var(--s1) var(--s2);font:inherit;font-size:var(--fs-2);
    color:var(--text);text-align:left;cursor:pointer;background:var(--bg-2);
    border:1px solid var(--line);border-radius:var(--r-card)}
.clubpick-grid button img{width:20px;height:20px;flex:none}
.clubpick-grid button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clubpick-grid .cs{display:none}
.clubpick-grid button small{font-size:var(--fs-1);color:var(--text-2);font-variant-numeric:tabular-nums}
.clubpick-grid button:hover{background:var(--bg-3);border-color:var(--line-2)}
.clubpick-grid button.none{color:var(--text-2)}
.clubpick-grid button.none img{opacity:.5}
.clubpick-grid button[aria-pressed="true"]{color:var(--text);border-color:var(--link);
    background:color-mix(in srgb,var(--link) 10%,var(--bg-2));box-shadow:inset 0 0 0 1px var(--link)}
.clubpick-grid button[aria-pressed="true"] small{color:var(--link);font-weight:var(--fw-medium)}
#clubpick-clear{font:inherit;color:var(--link);background:none;border:0;padding:0;cursor:pointer}
#clubpick-clear:hover{text-decoration:underline}
@media (max-width:600px){
  .clubpick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
  .clubpick-grid button{min-height:38px;padding-right:var(--s2)}
  .clubpick-grid .cf{display:none}
  .clubpick-grid .cs{display:block}
}

/* grouped tables (/injuries): each club is its own tbody under a tinted heading
   band with its crest, a gap above every band but the first, and hairlines
   instead of zebra stripes so the band is the only shaded row */
table.grouped tbody tr:nth-child(even)>:is(td,th){background:none}
table.grouped tbody tr:not(.group)+tr>:is(td,th){border-top:1px solid var(--line)}
table.grouped tr.group>th{background:color-mix(in srgb,var(--chart-2) 10%,var(--bg-2));
    color:var(--text);font-size:var(--fs-3);font-weight:var(--fw-medium);
    padding-top:var(--s2);padding-bottom:var(--s2);
    box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line),inset 3px 0 0 var(--chart-2)}
table.grouped tbody+tbody tr.group>th{border-top:var(--s5) solid var(--bg-2)}
table.grouped tbody tr.group:hover>th,
table.grouped tbody tr.group.rowlink:hover>th{background:color-mix(in srgb,var(--chart-2) 16%,var(--bg-2))}
table.grouped .grp-label{display:inline-flex;align-items:center;gap:var(--s2)}
table.grouped .grp-label img{width:20px;height:20px;flex:none}
table.grouped .grp-label a{color:var(--text)}
table.grouped .grp-label small{font-size:var(--fs-1);font-weight:var(--fw-normal);color:var(--text-2);
    margin-left:var(--s1)}
@media (max-width:600px){
  :is(.scroll,.scroll-x,.tw) table.grouped tr.group .grp-label{display:inline-flex}
  :is(.scroll,.scroll-x,.tw) table.grouped tbody tr:nth-child(even)>:first-child{background:var(--bg-2)}
}

/* the bench under a pitch (squad builder): same player cells on a darker strip,
   joined to the pitch, keeper first and the outfield order numbered */
.pitchwrap{max-width:470px}
.pitchwrap .pitch{margin:0;border-radius:var(--r-card) var(--r-card) 0 0}
.benchrow{background:#237a47;border-radius:0 0 var(--r-card) var(--r-card);
    padding:var(--s1) var(--s2) var(--s3);border-top:1.5px solid rgb(255 255 255 / .22)}
.benchlabel{margin:0 0 var(--s1);color:rgb(255 255 255 / .85);font-size:var(--fs-1);
    font-weight:var(--fw-medium);text-align:center}
.benchrow .prowline{justify-content:space-evenly}
.benchno{display:block;margin:0 auto 2px;color:rgb(255 255 255 / .75);font-size:10px;
    line-height:1;font-weight:var(--fw-medium)}
.board .pitchwrap{margin:0}

/* price changes: the latest update on /prices, and the pager between dated
   update pages (src/site_prices.py) */
.latest-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--s5)}
.latest h3{font-size:var(--fs-3);font-weight:var(--fw-medium);margin:0 0 var(--s2)}
.latest ul{list-style:none;margin:0;padding:0}
.latest li{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s1) 0;
    border-top:1px solid var(--line)}
.latest li small{color:var(--text-2)}
.latest li .px{margin-left:auto;font-variant-numeric:tabular-nums}
.latest li.more{justify-content:flex-start}
.latest li a{color:var(--link);text-decoration:none}
.latest li a:hover{text-decoration:underline}
.card>.empty{color:var(--text-2);margin:0}
.pager{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
    margin:var(--s5) 0 0;font-size:var(--fs-2)}
.pager a{color:var(--link);text-decoration:none}
.pager a:hover{text-decoration:underline}

/* /news (src/site_articles.py): the article list and the related links */
.newslist{display:grid;gap:var(--s4)}
.newsitem{margin:0}
.newsitem .art-kick{margin:0 0 var(--s1)}
.newsitem h2{font-size:var(--fs-4);font-weight:var(--fw-medium);margin:0 0 var(--s2)}
.newsitem h2 a{color:var(--text);text-decoration:none}
.newsitem h2 a:hover{color:var(--link);text-decoration:underline}
.newsitem p{margin:0;color:var(--text-2);max-width:var(--prose-w)}
.article h2{margin-top:var(--s6)}
.article ul,.article ol{max-width:var(--prose-w);padding-left:var(--s5)}
.article li{margin:0 0 var(--s1)}
.article .tw{margin-top:var(--s3)}
.article .tw>table{margin:0}
.related{margin:0;padding-left:var(--s5)}
.related li{margin:0 0 var(--s1)}
.related a{color:var(--link);text-decoration:none}
.article .tw{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media (max-width:600px){.article .tw{overflow-x:auto}}
.faq h3{font-size:var(--fs-3);font-weight:var(--fw-medium);margin:var(--s4) 0 var(--s1)}
.faq p{margin:0;max-width:var(--prose-w);color:var(--text-2)}

/* KPI tiles are click targets: the anchor on the value covers the whole tile */
.kpi>div{position:relative}
.kpi a.stretch{color:inherit;text-decoration:none}
.kpi a.stretch::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);cursor:pointer}
.kpi>div:hover{border-color:var(--line-2)}
.kpi>div:hover .v{color:var(--link)}
.kpi a.stretch:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* where the points come from (homepage): a ring of each player's projection
   around his face. Three hues plus a neutral, validated all-pairs for both
   themes, because segments drop out and any two can end up adjacent. */
.dna{position:relative}
.dna .dna-sub{color:var(--text-2);font-size:var(--fs-2);margin:0 0 var(--s3);max-width:var(--prose-w)}
.dna-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none;margin:0 0 var(--s5);padding:0;
    font-size:var(--fs-1);color:var(--text-2)}
.dna-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:var(--s2);vertical-align:-1px}
.k-att{background:var(--chart-1)}.k-def{background:var(--chart-3)}.k-bon{background:var(--chart-2)}
.k-app{background:var(--line-2)}
.dna-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s3)}
@media (max-width:760px){.dna-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s2)}}
.dna-card{display:block;text-align:center;text-decoration:none;color:var(--text);
    border-radius:var(--r-card);padding:var(--s2) 0}
a.dna-card:hover .dna-name{color:var(--link)}
a.dna-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.dna-ring{position:relative;width:min(156px,100%);aspect-ratio:1;margin:0 auto var(--s2)}
.dna-ring svg{position:absolute;inset:0;width:100%;height:100%}
.dna-ring .seg{pointer-events:stroke;animation:dna-in .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes dna-in{from{stroke-dashoffset:calc(var(--len) * 1px)}to{stroke-dashoffset:0}}
.dna-ring .seg:hover{stroke-width:17}
.s-att{stroke:var(--chart-1)}.s-def{stroke:var(--chart-3)}.s-bon{stroke:var(--chart-2)}.s-app{stroke:var(--line-2)}
.dna-face{position:absolute;inset:14.5%;border-radius:50%;overflow:hidden;background:var(--bg-3);pointer-events:none}
.dna-face img{width:100%;height:100%;object-fit:cover;object-position:top center}
.dna-name{margin:0;font-size:var(--fs-3);font-weight:var(--fw-medium);line-height:1.2}
.dna-meta{margin:0;font-size:var(--fs-1);color:var(--text-2)}
.dna-xp{margin:var(--s1) 0 0;font-size:var(--fs-4);font-weight:var(--fw-light);line-height:1}
.dna-xp small{font-size:var(--fs-1);color:var(--text-2)}
@media (prefers-reduced-motion:reduce){.dna-ring .seg{animation:none}}
.vm-tip{position:absolute;z-index:3;pointer-events:none;background:var(--bg-2);
    border:1px solid var(--line-2);border-radius:var(--r-card);padding:var(--s2) var(--s3);
    box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:2px;min-width:132px}
.vm-tip b{font-size:var(--fs-4);font-weight:var(--fw-medium);line-height:1.1}
.vm-tip span{font-size:var(--fs-2)}
.vm-tip small{font-size:var(--fs-1);color:var(--text-2)}
.vm-table{margin:var(--s5) 0 0}
.vm-table summary{color:var(--link);cursor:pointer;font-size:var(--fs-2)}
.vm-table table{margin-top:var(--s3)}

/* the player quick view (homepage): a drawer on desktop, a sheet on phones */
dialog.qv{position:fixed;inset:0 0 0 auto;width:min(440px,100vw);height:100dvh;max-height:none;
    margin:0;padding:var(--s5);border:0;border-left:1px solid var(--line);background:var(--bg-2);
    color:var(--text);overflow-y:auto;box-shadow:var(--shadow-pop);animation:qv-in .22s ease-out}
dialog.qv::backdrop{background:rgb(27 16 53 / .5)}
@keyframes qv-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.qv-close{position:absolute;top:var(--s3);right:var(--s3);width:36px;height:36px;border-radius:50%;
    border:1px solid var(--line);background:var(--bg-2);color:var(--text);font-size:var(--fs-3);cursor:pointer}
.qv-close:hover{background:var(--bg-3)}
.qv-head{display:flex;align-items:center;gap:var(--s4);margin:0 var(--s6) var(--s4) 0}
.qv-ring{width:104px;flex:none;margin:0}
.qv-who h2{margin:0;font-size:var(--fs-5);font-weight:var(--fw-normal);line-height:var(--lh-tight)}
.qv-meta{margin:var(--s1) 0 0;color:var(--text-2);font-size:var(--fs-2)}
.qv-flag{margin:0 0 var(--s4);padding:var(--s2) var(--s3);border-radius:var(--r-card);
    background:color-mix(in srgb,var(--down) 10%,var(--bg-2));border:1px solid color-mix(in srgb,var(--down) 35%,var(--bg-2));
    font-size:var(--fs-2)}
.qv-flag b{display:block;font-weight:var(--fw-medium)}
.qv-flag span{color:var(--text-2)}
.qv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:0 0 var(--s4)}
.qv-stats div{background:var(--bg-3);border-radius:var(--r-card);padding:var(--s2) var(--s3)}
.qv-stats b{display:block;font-size:var(--fs-4);font-weight:var(--fw-normal);line-height:1.15}
.qv-stats span{font-size:var(--fs-1);color:var(--text-2)}
dialog.qv h3{font-size:var(--fs-2);font-weight:var(--fw-medium);color:var(--text-2);margin:var(--s5) 0 var(--s2)}
.qv-table{margin:0;font-size:var(--fs-2)}
.qv-table th{font-weight:var(--fw-normal);color:var(--text-2);text-align:left;padding:var(--s1) var(--s3) var(--s1) 0;
    white-space:nowrap;background:none}
.qv-table td{text-align:right;padding:var(--s1) 0;font-variant-numeric:tabular-nums;background:none}
.qv-table tr+tr>*{border-top:1px solid var(--line)}
table.qv-table tbody tr:nth-child(even)>:is(td,th),table.qv-table tbody tr:hover>:is(td,th){background:none}
.qv-form{display:flex;gap:var(--s2);list-style:none;margin:0;padding:0}
.qv-form li{flex:1;text-align:center;background:var(--bg-3);border-radius:var(--r-card);padding:var(--s2) 0}
.qv-form li.dnp{opacity:.55}
.qv-form b{display:block;font-size:var(--fs-4);font-weight:var(--fw-normal);line-height:1.1}
.qv-form span{font-size:var(--fs-1);color:var(--text-2)}
.qv-parts,.qv-fx{list-style:none;margin:0;padding:0;font-size:var(--fs-2)}
.qv-parts li{display:grid;grid-template-columns:14px 1fr auto 40px;gap:var(--s2);align-items:center;padding:var(--s1) 0}
.qv-parts i{width:10px;height:10px;border-radius:50%}
.qv-parts b{font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.qv-parts small{color:var(--text-2);text-align:right}
.qv-fx li{display:grid;grid-template-columns:40px 92px 1fr 34px;gap:var(--s2);align-items:center;padding:var(--s1) 0}
.qv-fx .gw{color:var(--text-2);font-size:var(--fs-1)}
.qv-fx .bar{height:8px;border-radius:0 4px 4px 0;background:var(--bg-3);overflow:hidden}
.qv-fx .bar i{display:block;height:100%;background:var(--chart-1);border-radius:0 4px 4px 0}
.qv-fx b{text-align:right;font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.qv-more{display:block;margin:var(--s5) 0 var(--s2);padding:var(--s3);text-align:center;border-radius:var(--r-card);
    background:var(--text);color:var(--bg-2);text-decoration:none;font-weight:var(--fw-medium)}
.qv-more:hover{opacity:.9}
@media (max-width:600px){
  dialog.qv{inset:auto 0 0 0;width:100%;max-width:none;height:auto;max-height:90dvh;border-left:0;
      border-radius:16px 16px 0 0;animation-name:qv-up;padding:var(--s4)}
  @keyframes qv-up{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){dialog.qv{animation:none}}

/* the wire (homepage): what is happening now, in the brand frame's colours so
   it reads as part of the masthead rather than another card */
.wire{display:flex;align-items:stretch;gap:0;margin:0 0 var(--s5);border-radius:var(--r-card);overflow:hidden;
    background:var(--nav-bg);color:#f3eefb;border:1px solid var(--nav-line)}
.wire-tag{flex:none;display:flex;align-items:center;padding:0 var(--s4);font-size:var(--fs-1);
    font-weight:var(--fw-medium);letter-spacing:.08em;background:var(--nav-accent);color:#12021f}
.wire[data-state="breaking"] .wire-tag{background:#ffd60a;color:#12021f}
.wire[data-state="live"] .wire-tag{background:#ff1f6b;color:#fff}
.wire[data-state="live"] .wire-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;
    margin-right:var(--s2);animation:wire-pulse 1.4s ease-in-out infinite}
@keyframes wire-pulse{50%{opacity:.25}}
.wire-track{flex:1;min-width:0;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wire-track::-webkit-scrollbar{display:none}
.wire-track:focus-visible{outline:2px solid var(--nav-accent);outline-offset:-2px}
.wire-item{flex:none;scroll-snap-align:start;display:flex;align-items:baseline;gap:var(--s2);
    padding:var(--s3) var(--s4);color:inherit;text-decoration:none;font-size:var(--fs-2);white-space:nowrap;
    border-right:1px solid var(--nav-line)}
.wire-item:hover{background:rgb(255 255 255 / .07)}
.wire-item b{font-size:var(--fs-1);font-weight:var(--fw-medium);color:var(--nav-label)}
.wire-item small{font-size:var(--fs-1);color:rgb(243 238 251 / .62)}
.wire-item.k-live b{color:#ff7aa5}.wire-item.k-bench b{color:#ffb38a}
.wire-item.k-haul b,.wire-item.k-ft b{color:#7ff0c2}.wire-item.k-flag b{color:#ff9fbd}
.wire-ctl{flex:none;display:flex;border-left:1px solid var(--nav-line)}
.wire-ctl button{width:36px;border:0;background:none;color:inherit;font-size:var(--fs-4);cursor:pointer;line-height:1}
.wire-ctl button:hover{background:rgb(255 255 255 / .1)}
@media (max-width:600px){.wire-ctl{display:none}.wire-tag{padding:0 var(--s3)}
    .wire-item{padding:var(--s3)}}
@media (prefers-reduced-motion:reduce){.wire[data-state="live"] .wire-tag::before{animation:none}}

/* players, sitewide: a small head beside every name. Hidden where a bigger
   face is already there (the pitch) or where it would break a sentence. */
.pf{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:top center;
    background:var(--bg-3);vertical-align:-9px;margin-right:var(--s2);flex:none}
.pl-link{white-space:nowrap}
span.pl-link[data-pid]{cursor:pointer}
p .pf,.plname .pf,.article li .pf,h1 .pf,h2 .pf,h3 .pf,.wire .pf{display:none}
.dna-face .pf{margin:0;border-radius:0;vertical-align:baseline}

/* articles: the key players as rings under the byline, our eleven as a pitch,
   and a cluster of faces on each card of the news index */
.art-visual{margin:0 0 var(--s5)}
.art-visual .pitchwrap,.art-visual .pitch{margin:0}
.dna-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.dna-strip .dna-ring{width:min(116px,100%)}
.dna-strip .dna-name{font-size:var(--fs-2)}
.dna-strip .dna-xp{font-size:var(--fs-3)}
.art-cap{font-size:var(--fs-1);color:var(--text-2);margin:var(--s3) 0 0}
.newsitem{position:relative}
.stack{float:right;display:flex;margin:0 0 var(--s2) var(--s4)}
.stack .pf{width:36px;height:36px;margin:0 0 0 -10px;border:2px solid var(--bg-2);vertical-align:baseline}
.stack .pf:first-child{margin-left:0}
@media (max-width:600px){.stack .pf{width:30px;height:30px}}
tbody tr:has(>td:first-child .pl-link){cursor:pointer}

/* /latest: the wire as a page */
a.wire-tag{text-decoration:none}
a.wire-tag:hover{filter:brightness(1.08)}
.feed-filter{margin:0 0 var(--s5);flex-wrap:wrap}
.feed-day h2{font-size:var(--fs-3);font-weight:var(--fw-medium);color:var(--text-2);margin:var(--s5) 0 var(--s2)}
.feed-day.is-empty{display:none}
.feed{list-style:none;margin:0;padding:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card)}
.feed-item{display:grid;grid-template-columns:64px 1fr;gap:var(--s3);padding:var(--s3) var(--s4)}
.feed-item+.feed-item{border-top:1px solid var(--line)}
.feed-item time{font-size:var(--fs-1);color:var(--text-2);font-variant-numeric:tabular-nums;padding-top:3px}
.feed-kind{margin:0;font-size:var(--fs-1);color:var(--text-2)}
.feed-item.k-flag .feed-kind,.feed-item.k-bench time{color:var(--down)}
.feed-item.k-live time{color:var(--down);font-weight:var(--fw-medium)}
.feed-item.k-haul time,.feed-item.k-ft time{color:var(--up)}
.feed-title{margin:0;font-size:var(--fs-3);line-height:1.35;color:var(--text);text-decoration:none;display:block}
.feed-title a,a.feed-title{color:var(--text);text-decoration:none}
.feed-title a:hover,a.feed-title:hover{color:var(--link);text-decoration:underline}
.feed-text{margin:2px 0 0;font-size:var(--fs-2);color:var(--text-2);max-width:var(--prose-w)}
.feed-text a{color:var(--link);text-decoration:none}
.feed-item .stack{margin-top:2px}
.feed-now h2{display:flex;align-items:center;gap:var(--s3);color:var(--text)}
.feed-now .wire-tag{display:inline-flex;align-items:center;padding:3px var(--s2);border-radius:var(--r-control);
    font-size:var(--fs-1);font-weight:var(--fw-medium);letter-spacing:.08em;background:var(--nav-accent);color:#12021f}
.feed-now[data-state="breaking"] .wire-tag{background:#ffd60a}
.feed-now[data-state="live"] .wire-tag{background:#ff1f6b;color:#fff}
p.feed-title .pf{display:inline-block}
@media (max-width:600px){.feed-item{grid-template-columns:48px 1fr;padding:var(--s3)}}