/* Twenty Clubs shared stylesheet. Generated by build/make-tc-css.cjs from assets/css/*.css; edit the partials, not this file. */
@layer tc;

/* ===== tokens.css ===== */
/* ==========================================================================
   Twenty Clubs colour tokens (stage F1). Source of truth: the approved Matchday Programme mockup,
   work2/shared.css lines 2-62. The house colours are ink and paper; colour belongs to the clubs and
   appears only on large surfaces.

   How these win over a page's own inline tokens: the stylesheet is linked after each page's <style>,
   and these rules are unlayered. Generated pages set their old tokens in :root, in a dark media block,
   and in :root[data-theme="light"] and :root[data-theme="dark"] (specificity 0,2,0). So the light block
   below also names :root[data-theme="light"], and the alias block names :root[data-theme], which keeps
   every token here at 0,2,0 or above whenever the theme script has run, and later in the document.

   Light and dark are both complete: every token used by a component is defined in the light block and
   redefined in both dark blocks (the media query for "Device", and data-theme="dark" for "Dark").
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #FFFFFF;
  --stand: #EEF0ED;
  --stand-2: #E1E5E0;
  --ink: #15171A;
  --ink-2: #3A3F3D;
  --muted: #5C6360;
  --rule: #D5D9D3;
  --plate: #15171A;
  --on-plate: #FFFFFF;
  --board: #15171A; --on-board: #FFFFFF; --on-board-2: #C3C8C5; --board-rule: #33383C; --board-plate: #FFFFFF; --on-board-plate: #15171A;
  --primary: #15171A; --on-primary: #FFFFFF; --primary-hover: #3A3F3D;
  --win: #1E7A4B; --draw: #6B716E; --loss: #C2352A; --on-form: #FFFFFF;
  /* Result fills under white text in BOTH themes (main's design review item 12 names them --res-*, with
     :where(:root) defaults of its own). One palette: the mockup's light result colours, which hold 5:1 or more
     under white. Not redefined in the dark blocks on purpose. */
  --res-w: #1E7A4B; --res-d: #6B716E; --res-l: #C2352A;
  --card-y: #F2C314; --card-r: #D6261D; --card-edge: rgba(0, 0, 0, .28);
  --disc: #FFFFFF;
  --dk: 0; --cbg: transparent;
  /* Older tokens that keep their own colours, at accessible values (REDESIGN-PLAN.md section 14, F1). */
  --money: #0C7F50;
  --gold: #A77B25;
  --gold-ink: #8A6417;
  --live: #D6323C;
  --brand: #7C3AED;
  /* Type and layout tokens used by the mockup's components. */
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --gutter: 16px;
  --max: 1360px;
  --strip-h: 0px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #131619; --stand: #1B1F23; --stand-2: #252A2F;
    --ink: #EDEFED; --ink-2: #C6CBC8; --muted: #9EA5A2; --rule: #2C3237;
    --plate: #2B3137; --on-plate: #EDEFED;
    --board: #22272C; --on-board: #EDEFED; --on-board-2: #B4BBB7; --board-rule: #383E44; --board-plate: #EDEFED; --on-board-plate: #131619;
    --primary: #EDEFED; --on-primary: #131619; --primary-hover: #C6CBC8;
    --win: #5CBF8A; --draw: #9AA19E; --loss: #F07A6F; --on-form: #131619;
    --card-edge: rgba(255, 255, 255, .25);
    --disc: #E4E7E4;
    --dk: 1; --cbg: var(--disc);
    --money: #2FD98A; --gold: #C9A24B; --gold-ink: #C9A24B; --live: #FF6B6B; --brand: #A78BFA;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #131619; --stand: #1B1F23; --stand-2: #252A2F;
  --ink: #EDEFED; --ink-2: #C6CBC8; --muted: #9EA5A2; --rule: #2C3237;
  --plate: #2B3137; --on-plate: #EDEFED;
  --board: #22272C; --on-board: #EDEFED; --on-board-2: #B4BBB7; --board-rule: #383E44; --board-plate: #EDEFED; --on-board-plate: #131619;
  --primary: #EDEFED; --on-primary: #131619; --primary-hover: #C6CBC8;
  --win: #5CBF8A; --draw: #9AA19E; --loss: #F07A6F; --on-form: #131619;
  --card-edge: rgba(255, 255, 255, .25);
  --disc: #E4E7E4;
  --dk: 1; --cbg: var(--disc);
  --money: #2FD98A; --gold: #C9A24B; --gold-ink: #C9A24B; --live: #FF6B6B; --brand: #A78BFA;
}

/* ---------- The reader's club ----------
   html[data-club] carries the club's light and dark colours (the club colour table below sets --club-l and
   friends). --club is the reader's club, or ink when none is set. The default is wrapped in :where() so it
   yields to a page's own older --club (the generated pages colour their hero kicker with it) until stage F5
   restyles the page head; a set club still wins. */
:where(:root) { --club: var(--ink); --on-club: var(--paper); }
html[data-club] { --club: var(--club-l, var(--ink)); --on-club: var(--on-club-l, var(--paper)); }
@media (prefers-color-scheme: dark) {
  html[data-club]:not([data-theme="light"]) { --club: var(--club-d, var(--ink)); --on-club: var(--on-club-d, var(--paper)); }
}
html[data-club][data-theme="dark"] { --club: var(--club-d, var(--ink)); --on-club: var(--on-club-d, var(--paper)); }

/* ---------- One club's colours on an element ----------
   [data-c="CODE"] sets --c-l/--c-d (solid fill) and --b-l/--b-d (band, 3:1 on the page); [data-h]/[data-a]
   set the home and away kit pair (--h-*, --a-*, --fh-*, --fa-*). These pick the right one for the theme. */
[data-c] { --c: var(--c-l); --on-c: var(--on-c-l); --b: var(--b-l); }
[data-kit] { --h: var(--h-l); --a: var(--a-l); --fh: var(--fh-l); --on-fh: var(--on-fh-l); --fa: var(--fa-l); --on-fa: var(--on-fa-l); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-c] { --c: var(--c-d); --on-c: var(--on-c-d); --b: var(--b-d); }
  :root:not([data-theme="light"]) [data-kit] { --h: var(--h-d); --a: var(--a-d); --fh: var(--fh-d); --on-fh: var(--on-fh-d); --fa: var(--fa-d); --on-fa: var(--on-fa-d); }
}
:root[data-theme="dark"] [data-c] { --c: var(--c-d); --on-c: var(--on-c-d); --b: var(--b-d); }
:root[data-theme="dark"] [data-kit] { --h: var(--h-d); --a: var(--a-d); --fh: var(--fh-d); --on-fh: var(--on-fh-d); --fa: var(--fa-d); --on-fa: var(--on-fa-d); }

/* ---------- Alias layer ----------
   The older names used by the generators and by the widget CSS in assets/*.js, mapped onto the new tokens
   (REDESIGN-PLAN.md section 14, F1), so every page takes the new palette before its family stage restyles it.
   They are references, so they follow the theme without being repeated in the dark blocks.
   --accent-btn maps to the plate, which is dark in both themes, so widgets that put white text on it stay
   readable. Remove an alias only when nothing in assets/ or build/ uses the old name any more. */
:root,
:root[data-theme] {
  --bg: var(--paper);
  --card: var(--paper);
  --soft: var(--stand);
  --chip: var(--stand);
  --accent-soft: var(--stand);
  --line: var(--rule);
  --ink2: var(--ink-2);
  --accent: var(--ink);
  --accent-2: var(--ink-2);
  --accent-btn: var(--plate);
  --mono: var(--display);
  --disp: var(--display);
  --radius: 4px;
  --maxw: var(--max);
}

/* ===== club-colours ===== */
/* Club colour table, generated by build/club-colours.cjs from build/og-clubs.json. Do not edit by hand. */
[data-c="ARS"]{--c-l:#DB0007;--on-c-l:#FFFFFF;--c-d:#DB0007;--on-c-d:#FFFFFF;--b-l:#DB0007;--b-d:#DB0007}
[data-c="AVL"]{--c-l:#7A1142;--on-c-l:#FFFFFF;--c-d:#7A1142;--on-c-d:#FFFFFF;--b-l:#7A1142;--b-d:#AD456D}
[data-c="BHA"]{--c-l:#005DAA;--on-c-l:#FFFFFF;--c-d:#005DAA;--on-c-d:#FFFFFF;--b-l:#005DAA;--b-d:#196BB9}
[data-c="BOU"]{--c-l:#B50E1B;--on-c-l:#FFFFFF;--c-d:#B50E1B;--on-c-d:#FFFFFF;--b-l:#B50E1B;--b-d:#C92B2D}
[data-c="BRE"]{--c-l:#C8102E;--on-c-l:#FFFFFF;--c-d:#C8102E;--on-c-d:#FFFFFF;--b-l:#C8102E;--b-d:#CF1D34}
[data-c="CHE"]{--c-l:#034694;--on-c-l:#FFFFFF;--c-d:#034694;--on-c-d:#FFFFFF;--b-l:#034694;--b-d:#2E6ABB}
[data-c="COV"]{--c-l:#1668A6;--on-c-l:#FFFFFF;--c-d:#1668A6;--on-c-d:#FFFFFF;--b-l:#1668A6;--b-d:#1E6EAC}
[data-c="CRY"]{--c-l:#1B458F;--on-c-l:#FFFFFF;--c-d:#1B458F;--on-c-d:#FFFFFF;--b-l:#1B458F;--b-d:#3C68B6}
[data-c="EVE"]{--c-l:#003399;--on-c-l:#FFFFFF;--c-d:#003399;--on-c-d:#FFFFFF;--b-l:#003399;--b-d:#3065CE}
[data-c="FUL"]{--c-l:#1A1A1A;--on-c-l:#FFFFFF;--c-d:#F2F3F1;--on-c-d:#15171A;--b-l:#1A1A1A;--b-d:#F2F3F1}
[data-c="HUL"]{--c-l:#C57200;--on-c-l:#15171A;--c-d:#C57200;--on-c-d:#15171A;--b-l:#C57200;--b-d:#C57200}
[data-c="IPS"]{--c-l:#12408A;--on-c-l:#FFFFFF;--c-d:#12408A;--on-c-d:#FFFFFF;--b-l:#12408A;--b-d:#3968B5}
[data-c="LEE"]{--c-l:#1D428A;--on-c-l:#FFFFFF;--c-d:#1D428A;--on-c-d:#FFFFFF;--b-l:#1D428A;--b-d:#4068B4}
[data-c="LIV"]{--c-l:#C8102E;--on-c-l:#FFFFFF;--c-d:#C8102E;--on-c-d:#FFFFFF;--b-l:#C8102E;--b-d:#CF1D34}
[data-c="MCI"]{--c-l:#1C6EB4;--on-c-l:#FFFFFF;--c-d:#1C6EB4;--on-c-d:#FFFFFF;--b-l:#1C6EB4;--b-d:#1C6EB4}
[data-c="MUN"]{--c-l:#DA291C;--on-c-l:#FFFFFF;--c-d:#DA291C;--on-c-d:#FFFFFF;--b-l:#DA291C;--b-d:#DA291C}
[data-c="NEW"]{--c-l:#1A1A1A;--on-c-l:#FFFFFF;--c-d:#F2F3F1;--on-c-d:#15171A;--b-l:#1A1A1A;--b-d:#F2F3F1}
[data-c="NFO"]{--c-l:#C8102E;--on-c-l:#FFFFFF;--c-d:#C8102E;--on-c-d:#FFFFFF;--b-l:#C8102E;--b-d:#CF1D34}
[data-c="SUN"]{--c-l:#C4122E;--on-c-l:#FFFFFF;--c-d:#C4122E;--on-c-d:#FFFFFF;--b-l:#C4122E;--b-d:#CD2135}
[data-c="TOT"]{--c-l:#132257;--on-c-l:#FFFFFF;--c-d:#F2F3F1;--on-c-d:#15171A;--b-l:#132257;--b-d:#F2F3F1}
html[data-club="ARS"]{--club-l:#DB0007;--on-club-l:#FFFFFF;--club-d:#DB0007;--on-club-d:#FFFFFF}
html[data-club="AVL"]{--club-l:#7A1142;--on-club-l:#FFFFFF;--club-d:#AD456D;--on-club-d:#FFFFFF}
html[data-club="BHA"]{--club-l:#005DAA;--on-club-l:#FFFFFF;--club-d:#196BB9;--on-club-d:#FFFFFF}
html[data-club="BOU"]{--club-l:#B50E1B;--on-club-l:#FFFFFF;--club-d:#C92B2D;--on-club-d:#FFFFFF}
html[data-club="BRE"]{--club-l:#C8102E;--on-club-l:#FFFFFF;--club-d:#CF1D34;--on-club-d:#FFFFFF}
html[data-club="CHE"]{--club-l:#034694;--on-club-l:#FFFFFF;--club-d:#2E6ABB;--on-club-d:#FFFFFF}
html[data-club="COV"]{--club-l:#1668A6;--on-club-l:#FFFFFF;--club-d:#1E6EAC;--on-club-d:#FFFFFF}
html[data-club="CRY"]{--club-l:#1B458F;--on-club-l:#FFFFFF;--club-d:#3C68B6;--on-club-d:#FFFFFF}
html[data-club="EVE"]{--club-l:#003399;--on-club-l:#FFFFFF;--club-d:#3065CE;--on-club-d:#FFFFFF}
html[data-club="FUL"]{--club-l:#1A1A1A;--on-club-l:#FFFFFF;--club-d:#F2F3F1;--on-club-d:#15171A}
html[data-club="HUL"]{--club-l:#C57200;--on-club-l:#15171A;--club-d:#C57200;--on-club-d:#15171A}
html[data-club="IPS"]{--club-l:#12408A;--on-club-l:#FFFFFF;--club-d:#3968B5;--on-club-d:#FFFFFF}
html[data-club="LEE"]{--club-l:#1D428A;--on-club-l:#FFFFFF;--club-d:#4068B4;--on-club-d:#FFFFFF}
html[data-club="LIV"]{--club-l:#C8102E;--on-club-l:#FFFFFF;--club-d:#CF1D34;--on-club-d:#FFFFFF}
html[data-club="MCI"]{--club-l:#1C6EB4;--on-club-l:#FFFFFF;--club-d:#1C6EB4;--on-club-d:#FFFFFF}
html[data-club="MUN"]{--club-l:#DA291C;--on-club-l:#FFFFFF;--club-d:#DA291C;--on-club-d:#FFFFFF}
html[data-club="NEW"]{--club-l:#1A1A1A;--on-club-l:#FFFFFF;--club-d:#F2F3F1;--on-club-d:#15171A;--club-bar:repeating-linear-gradient(90deg,#1A1A1A 0 9px,#F2F3F1 9px 18px)}
html[data-club="NFO"]{--club-l:#C8102E;--on-club-l:#FFFFFF;--club-d:#CF1D34;--on-club-d:#FFFFFF}
html[data-club="SUN"]{--club-l:#C4122E;--on-club-l:#FFFFFF;--club-d:#CD2135;--on-club-d:#FFFFFF}
html[data-club="TOT"]{--club-l:#132257;--on-club-l:#FFFFFF;--club-d:#F2F3F1;--on-club-d:#15171A}
[data-h="ARS"]{--h-l:#DB0007;--h-d:#DB0007;--fh-l:#DB0007;--on-fh-l:#FFFFFF;--fh-d:#DB0007;--on-fh-d:#FFFFFF}
[data-a="ARS"]{--a-l:#DB0007;--a-d:#DB0007;--fa-l:#DB0007;--on-fa-l:#FFFFFF;--fa-d:#DB0007;--on-fa-d:#FFFFFF}
[data-h="AVL"]{--h-l:#7A1142;--h-d:#AD456D;--fh-l:#7A1142;--on-fh-l:#FFFFFF;--fh-d:#7A1142;--on-fh-d:#FFFFFF}
[data-a="AVL"]{--a-l:#7A1142;--a-d:#AD456D;--fa-l:#7A1142;--on-fa-l:#FFFFFF;--fa-d:#7A1142;--on-fa-d:#FFFFFF}
[data-h="BHA"]{--h-l:#005DAA;--h-d:#196BB9;--fh-l:#005DAA;--on-fh-l:#FFFFFF;--fh-d:#005DAA;--on-fh-d:#FFFFFF}
[data-a="BHA"]{--a-l:#005DAA;--a-d:#196BB9;--fa-l:#005DAA;--on-fa-l:#FFFFFF;--fa-d:#005DAA;--on-fa-d:#FFFFFF}
[data-h="BOU"]{--h-l:#B50E1B;--h-d:#C92B2D;--fh-l:#B50E1B;--on-fh-l:#FFFFFF;--fh-d:#B50E1B;--on-fh-d:#FFFFFF}
[data-a="BOU"]{--a-l:#B50E1B;--a-d:#C92B2D;--fa-l:#B50E1B;--on-fa-l:#FFFFFF;--fa-d:#B50E1B;--on-fa-d:#FFFFFF}
[data-h="BRE"]{--h-l:#C8102E;--h-d:#CF1D34;--fh-l:#C8102E;--on-fh-l:#FFFFFF;--fh-d:#C8102E;--on-fh-d:#FFFFFF}
[data-a="BRE"]{--a-l:#C8102E;--a-d:#CF1D34;--fa-l:#C8102E;--on-fa-l:#FFFFFF;--fa-d:#C8102E;--on-fa-d:#FFFFFF}
[data-h="CHE"]{--h-l:#034694;--h-d:#2E6ABB;--fh-l:#034694;--on-fh-l:#FFFFFF;--fh-d:#034694;--on-fh-d:#FFFFFF}
[data-a="CHE"]{--a-l:#034694;--a-d:#2E6ABB;--fa-l:#034694;--on-fa-l:#FFFFFF;--fa-d:#034694;--on-fa-d:#FFFFFF}
[data-h="COV"]{--h-l:#1668A6;--h-d:#1E6EAC;--fh-l:#1668A6;--on-fh-l:#FFFFFF;--fh-d:#1668A6;--on-fh-d:#FFFFFF}
[data-a="COV"]{--a-l:#1668A6;--a-d:#1E6EAC;--fa-l:#1668A6;--on-fa-l:#FFFFFF;--fa-d:#1668A6;--on-fa-d:#FFFFFF}
[data-h="CRY"]{--h-l:#1B458F;--h-d:#3C68B6;--fh-l:#1B458F;--on-fh-l:#FFFFFF;--fh-d:#1B458F;--on-fh-d:#FFFFFF}
[data-a="CRY"]{--a-l:#1B458F;--a-d:#3C68B6;--fa-l:#1B458F;--on-fa-l:#FFFFFF;--fa-d:#1B458F;--on-fa-d:#FFFFFF}
[data-h="EVE"]{--h-l:#003399;--h-d:#3065CE;--fh-l:#003399;--on-fh-l:#FFFFFF;--fh-d:#003399;--on-fh-d:#FFFFFF}
[data-a="EVE"]{--a-l:#003399;--a-d:#3065CE;--fa-l:#003399;--on-fa-l:#FFFFFF;--fa-d:#003399;--on-fa-d:#FFFFFF}
[data-h="FUL"]{--h-l:#1A1A1A;--h-d:#F2F3F1;--fh-l:#1A1A1A;--on-fh-l:#FFFFFF;--fh-d:#F2F3F1;--on-fh-d:#15171A}
[data-a="FUL"]{--a-l:#1A1A1A;--a-d:#F2F3F1;--fa-l:#1A1A1A;--on-fa-l:#FFFFFF;--fa-d:#F2F3F1;--on-fa-d:#15171A}
[data-h="HUL"]{--h-l:#C57200;--h-d:#C57200;--fh-l:#C57200;--on-fh-l:#15171A;--fh-d:#C57200;--on-fh-d:#15171A}
[data-a="HUL"]{--a-l:#C57200;--a-d:#C57200;--fa-l:#C57200;--on-fa-l:#15171A;--fa-d:#C57200;--on-fa-d:#15171A}
[data-h="IPS"]{--h-l:#12408A;--h-d:#3968B5;--fh-l:#12408A;--on-fh-l:#FFFFFF;--fh-d:#12408A;--on-fh-d:#FFFFFF}
[data-a="IPS"]{--a-l:#12408A;--a-d:#3968B5;--fa-l:#12408A;--on-fa-l:#FFFFFF;--fa-d:#12408A;--on-fa-d:#FFFFFF}
[data-h="LEE"]{--h-l:#1D428A;--h-d:#4068B4;--fh-l:#1D428A;--on-fh-l:#FFFFFF;--fh-d:#1D428A;--on-fh-d:#FFFFFF}
[data-a="LEE"]{--a-l:#1D428A;--a-d:#4068B4;--fa-l:#1D428A;--on-fa-l:#FFFFFF;--fa-d:#1D428A;--on-fa-d:#FFFFFF}
[data-h="LIV"]{--h-l:#C8102E;--h-d:#CF1D34;--fh-l:#C8102E;--on-fh-l:#FFFFFF;--fh-d:#C8102E;--on-fh-d:#FFFFFF}
[data-a="LIV"]{--a-l:#C8102E;--a-d:#CF1D34;--fa-l:#C8102E;--on-fa-l:#FFFFFF;--fa-d:#C8102E;--on-fa-d:#FFFFFF}
[data-h="MCI"]{--h-l:#1C6EB4;--h-d:#1C6EB4;--fh-l:#1C6EB4;--on-fh-l:#FFFFFF;--fh-d:#1C6EB4;--on-fh-d:#FFFFFF}
[data-a="MCI"]{--a-l:#1C6EB4;--a-d:#1C6EB4;--fa-l:#1C6EB4;--on-fa-l:#FFFFFF;--fa-d:#1C6EB4;--on-fa-d:#FFFFFF}
[data-h="MUN"]{--h-l:#DA291C;--h-d:#DA291C;--fh-l:#DA291C;--on-fh-l:#FFFFFF;--fh-d:#DA291C;--on-fh-d:#FFFFFF}
[data-a="MUN"]{--a-l:#DA291C;--a-d:#DA291C;--fa-l:#DA291C;--on-fa-l:#FFFFFF;--fa-d:#DA291C;--on-fa-d:#FFFFFF}
[data-h="NEW"]{--h-l:#1A1A1A;--h-d:#F2F3F1;--fh-l:#1A1A1A;--on-fh-l:#FFFFFF;--fh-d:#F2F3F1;--on-fh-d:#15171A}
[data-a="NEW"]{--a-l:#1A1A1A;--a-d:#F2F3F1;--fa-l:#1A1A1A;--on-fa-l:#FFFFFF;--fa-d:#F2F3F1;--on-fa-d:#15171A}
[data-h="NFO"]{--h-l:#C8102E;--h-d:#CF1D34;--fh-l:#C8102E;--on-fh-l:#FFFFFF;--fh-d:#C8102E;--on-fh-d:#FFFFFF}
[data-a="NFO"]{--a-l:#C8102E;--a-d:#CF1D34;--fa-l:#C8102E;--on-fa-l:#FFFFFF;--fa-d:#C8102E;--on-fa-d:#FFFFFF}
[data-h="SUN"]{--h-l:#C4122E;--h-d:#CD2135;--fh-l:#C4122E;--on-fh-l:#FFFFFF;--fh-d:#C4122E;--on-fh-d:#FFFFFF}
[data-a="SUN"]{--a-l:#C4122E;--a-d:#CD2135;--fa-l:#C4122E;--on-fa-l:#FFFFFF;--fa-d:#C4122E;--on-fa-d:#FFFFFF}
[data-h="TOT"]{--h-l:#132257;--h-d:#F2F3F1;--fh-l:#132257;--on-fh-l:#FFFFFF;--fh-d:#F2F3F1;--on-fh-d:#15171A}
[data-a="TOT"]{--a-l:#132257;--a-d:#F2F3F1;--fa-l:#132257;--on-fa-l:#FFFFFF;--fa-d:#F2F3F1;--on-fa-d:#15171A}
body[data-pc="ARS"]{--pc-l:#DB0007;--on-pc-l:#FFFFFF;--pc-d:#DB0007;--on-pc-d:#FFFFFF;--pcr-l:#DB0007;--pcr-d:#DB0007}
body[data-pc="AVL"]{--pc-l:#7A1142;--on-pc-l:#FFFFFF;--pc-d:#7A1142;--on-pc-d:#FFFFFF;--pcr-l:#7A1142;--pcr-d:#AD456D}
body[data-pc="BHA"]{--pc-l:#005DAA;--on-pc-l:#FFFFFF;--pc-d:#005DAA;--on-pc-d:#FFFFFF;--pcr-l:#005DAA;--pcr-d:#196BB9}
body[data-pc="BOU"]{--pc-l:#B50E1B;--on-pc-l:#FFFFFF;--pc-d:#B50E1B;--on-pc-d:#FFFFFF;--pcr-l:#B50E1B;--pcr-d:#C92B2D}
body[data-pc="BRE"]{--pc-l:#C8102E;--on-pc-l:#FFFFFF;--pc-d:#C8102E;--on-pc-d:#FFFFFF;--pcr-l:#C8102E;--pcr-d:#CF1D34}
body[data-pc="CHE"]{--pc-l:#034694;--on-pc-l:#FFFFFF;--pc-d:#034694;--on-pc-d:#FFFFFF;--pcr-l:#034694;--pcr-d:#2E6ABB}
body[data-pc="COV"]{--pc-l:#1668A6;--on-pc-l:#FFFFFF;--pc-d:#1668A6;--on-pc-d:#FFFFFF;--pcr-l:#1668A6;--pcr-d:#1E6EAC}
body[data-pc="CRY"]{--pc-l:#1B458F;--on-pc-l:#FFFFFF;--pc-d:#1B458F;--on-pc-d:#FFFFFF;--pcr-l:#1B458F;--pcr-d:#3C68B6}
body[data-pc="EVE"]{--pc-l:#003399;--on-pc-l:#FFFFFF;--pc-d:#003399;--on-pc-d:#FFFFFF;--pcr-l:#003399;--pcr-d:#3065CE}
body[data-pc="FUL"]{--pc-l:#1A1A1A;--on-pc-l:#FFFFFF;--pc-d:#F2F3F1;--on-pc-d:#15171A;--pcr-l:#1A1A1A;--pcr-d:#F2F3F1}
body[data-pc="HUL"]{--pc-l:#C57200;--on-pc-l:#15171A;--pc-d:#C57200;--on-pc-d:#15171A;--pcr-l:#C57200;--pcr-d:#C57200}
body[data-pc="IPS"]{--pc-l:#12408A;--on-pc-l:#FFFFFF;--pc-d:#12408A;--on-pc-d:#FFFFFF;--pcr-l:#12408A;--pcr-d:#3968B5}
body[data-pc="LEE"]{--pc-l:#1D428A;--on-pc-l:#FFFFFF;--pc-d:#1D428A;--on-pc-d:#FFFFFF;--pcr-l:#1D428A;--pcr-d:#4068B4}
body[data-pc="LIV"]{--pc-l:#C8102E;--on-pc-l:#FFFFFF;--pc-d:#C8102E;--on-pc-d:#FFFFFF;--pcr-l:#C8102E;--pcr-d:#CF1D34}
body[data-pc="MCI"]{--pc-l:#1C6EB4;--on-pc-l:#FFFFFF;--pc-d:#1C6EB4;--on-pc-d:#FFFFFF;--pcr-l:#1C6EB4;--pcr-d:#1C6EB4}
body[data-pc="MUN"]{--pc-l:#DA291C;--on-pc-l:#FFFFFF;--pc-d:#DA291C;--on-pc-d:#FFFFFF;--pcr-l:#DA291C;--pcr-d:#DA291C}
body[data-pc="NEW"]{--pc-l:#1A1A1A;--on-pc-l:#FFFFFF;--pc-d:#F2F3F1;--on-pc-d:#15171A;--pcr-l:#1A1A1A;--pcr-d:#F2F3F1}
body[data-pc="NFO"]{--pc-l:#C8102E;--on-pc-l:#FFFFFF;--pc-d:#C8102E;--on-pc-d:#FFFFFF;--pcr-l:#C8102E;--pcr-d:#CF1D34}
body[data-pc="SUN"]{--pc-l:#C4122E;--on-pc-l:#FFFFFF;--pc-d:#C4122E;--on-pc-d:#FFFFFF;--pcr-l:#C4122E;--pcr-d:#CD2135}
body[data-pc="TOT"]{--pc-l:#132257;--on-pc-l:#FFFFFF;--pc-d:#F2F3F1;--on-pc-d:#15171A;--pcr-l:#132257;--pcr-d:#F2F3F1}

/* ===== base.css ===== */
/* ==========================================================================
   Base rules (stage F1), from the mockup's work2/shared.css lines 64-85. They sit in @layer tc, so a page's own
   inline rules still win until its family stage removes them; these only fill in what a page leaves unset.

   Left out on purpose until a later stage, because they would change the layout of pages that are not
   restyled yet: img { display: block } and .wrap (F3 and F5), .crest and its dark-mode disc (F2),
   .yours and .btn (F5).
   ========================================================================== */
@layer tc {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--display); font-size: 16px; line-height: 1.45;
    font-variant-numeric: tabular-nums lining-nums;
    overflow-wrap: break-word;
  }
  a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 2px; }
  /* Design review item 19: controls take the page's font, not the browser's Arial. font-family only, because
     the font shorthand would also inherit line-height and make controls taller. */
  button, input, select, textarea { font-family: inherit; }
  :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
  .vh { position: absolute !important; 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: 8px; top: -80px; z-index: 20; background: var(--ink); color: var(--paper); padding: 10px 14px; font-weight: 700; text-decoration: none; }
  .skip:focus { top: 8px; }
  section[id], aside[id] { scroll-margin-top: calc(var(--strip-h) + 12px); }
}

/* ===== type.css ===== */
/* ==========================================================================
   Type, figures, the reading measure and crests (stage F2). REDESIGN-PLAN.md sections 8.1, 8.2 and 14 F2.

   Two faces, both served from the site (decision 7): Archivo for everything that is data, interface or heading,
   across its width axis (narrow and heavy for scores, kick-off times and the cover headline), and Newsreader
   only for reading text: one-line introductions, standfirsts, news headlines and long reads (decision 8).
   Never Newsreader for data, tables or buttons. The faces themselves are in type-faces.css, generated by
   build/make-fonts.mjs. Figures are tabular everywhere: Archivo's digits are mapped to its tabular figures
   inside the font file, so no rule (not even a `font:` shorthand that resets font-variant-numeric) can bring
   back proportional or slashed figures, and Newsreader's default figures are tabular already.
   ========================================================================== */

/* ---------- Fallbacks while the fonts load ----------
   font-display: swap shows these first on a cold visit. Each is a local system face scaled to the web font's
   average width (size-adjust, measured with fontkit over a paragraph of the site's own copy) with the web
   font's vertical metrics, so text keeps its line breaks and height when the real face arrives:
     Arial         98.2% of Archivo at full width and 400; Arial Bold 101% at 700 to 800
     Arial Narrow  95% of Archivo at 70 to 75% width (the condensed titles and labels)
     Georgia       92.5% of Newsreader at 400 to 500
   The narrow faces answer condensed requests (font-stretch below 87.5%). Chrome moves to the next family, not
   the next face, when a local face is missing, so "Archivo fallback wide" catches condensed text on devices
   without Arial Narrow. Ascent and descent come from the web fonts (Archivo 878/210 per 1000, Newsreader
   1470/530 per 2000), divided by size-adjust as the override is scaled with it. */
@font-face { font-family: "Archivo fallback"; src: local("Arial Narrow"), local("ArialNarrow"); font-weight: 100 599; font-stretch: 50% 87.4%; size-adjust: 95%; ascent-override: 92.4%; descent-override: 22.1%; line-gap-override: 0%; }
@font-face { font-family: "Archivo fallback"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 600 1000; font-stretch: 50% 87.4%; size-adjust: 95%; ascent-override: 92.4%; descent-override: 22.1%; line-gap-override: 0%; }
@font-face { font-family: "Archivo fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 599; font-stretch: 87.5% 200%; size-adjust: 98.2%; ascent-override: 89.4%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 1000; font-stretch: 87.5% 200%; size-adjust: 101%; ascent-override: 86.9%; descent-override: 20.8%; line-gap-override: 0%; }
@font-face { font-family: "Archivo fallback wide"; src: local("Arial"), local("ArialMT"); font-weight: 100 599; font-stretch: 50% 200%; size-adjust: 98.2%; ascent-override: 89.4%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo fallback wide"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 1000; font-stretch: 50% 200%; size-adjust: 101%; ascent-override: 86.9%; descent-override: 20.8%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader fallback"; src: local("Georgia"); font-weight: 100 1000; size-adjust: 92.5%; ascent-override: 79.5%; descent-override: 28.6%; line-gap-override: 0%; }

/* The two stacks. tokens.css (F1) declares them without the metric-matched fallbacks; these replace them at the
   same specificity, later in the file. --mono and --disp already point at --display (the alias layer), so the
   old coding font is gone from every page that links this stylesheet (design review item 28). Archivo follows
   Newsreader's fallback in the reading stack because Newsreader and Georgia have no arrows: the "→" in a
   standfirst's link would otherwise come from Times New Roman. */
:root,
:root[data-theme] {
  --display: "Archivo", "Archivo fallback", "Archivo fallback wide", sans-serif;
  --serif: "Newsreader", "Newsreader fallback", "Archivo", Georgia, serif;
}

/* ---------- The page font ----------
   Unlayered on purpose: every generated page still sets `body{font:16px/1.65 'Segoe UI',system-ui,...}` in its
   own inline style, which beats anything in @layer tc. This sits later at the same specificity, so it wins, and
   it changes only the family and the figures (the pages keep their sizes and line heights until their family
   stage restyles them). Both are inherited, so any rule in @layer tc that names a family for an element still
   wins on that element. Headings need nothing here: the pages' own `h1,h2,h3{font-family:'Archivo',...}` now
   reaches the self-hosted Archivo, and an unlayered heading rule would block a later stage's layered one.
   Controls take the page font through base.css (`font-family: inherit`, design review item 19). */
body { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; }

@layer tc {
  /* ---------- Reading text in Newsreader (decision 8) ----------
     Where the mockup uses it: the one-line introduction under a page title and the standfirst. Bold is never
     synthesised (Newsreader ships 400 to 500 only), so a <b> inside stays clean at 500. */
  .hero .sub, .lead-p { font-family: var(--serif); font-synthesis: style; }
  .lead-p { line-height: 1.5; }

  /* Long reads: an opt-in class for the stages that restyle them (P8a: the City case, the referee guide, the league
     guides; P8b: the away-day guides). Headings, tables, lists of data and buttons inside stay in Archivo. */
  .prose :is(p, li, blockquote) { font-family: var(--serif); font-size: 18px; line-height: 1.55; font-synthesis: style; }
  .prose :is(table, th, td, button, .btn, nav, figcaption) { font-family: var(--display); }

  /* ---------- The reading measure (design review item 17) ----------
     About 60 to 65 characters, the mockup's 34em. Opt in by container rather than a blanket `main p`, which
     would push the centred Match Centre lines (.mx-pfine, .mx-empty, .cip-note) off-centre. Tables, grids and
     panels keep their full width. legacy-layout.css and its unlayered 840px cap went with stage F5, so this rule
     governs every paragraph it names; F5's --col cap on the column's blocks has zero specificity and yields to it. */
  main .lead-p,
  main :is(.wrap, section, details, .block, .callout, .cs-status, .of-status, .qa, .pl-box, .xband) > :is(p, blockquote),
  .prose :is(p, li, blockquote) { max-width: 34em; }

  /* ---------- Big figures (design review item 28) ----------
     Scores and countdown digits in narrow, heavy Archivo, the mockup's 62 to 70% width. Only the width is set
     here: the widgets inject their own weights and sizes after this stylesheet, and their stages (P1, P2, P3,
     P10) restyle them in full. Table figures, times and small scores stay at full width in the page font. */
  .mx-score > b, .cip-num, .mscore .n, .cd .u b { font-stretch: 70%; }

  /* ---------- Crests ----------
     The mockup's rule, for <img class="crest" src="/assets/crests/64/CODE.webp" width height alt>. In dark mode
     every crest sits on the same light disc (--dk and --cbg come from tokens.css), so dark badges such as Spurs
     and Liverpool stay legible; --cp sets the disc's padding where a crest is drawn larger. :where(img) keeps the
     mockup's specificity and leaves today's letter-chip <span class="crest"> alone until its stage replaces it. */
  :where(img).crest {
    width: 24px; height: 24px; object-fit: contain; flex: none;
    padding: calc(var(--cp, 2px) * var(--dk)); background: var(--cbg); border-radius: calc(50% * var(--dk));
  }
}

/* ===== type-faces.css ===== */
/* GENERATED by build/make-fonts.mjs from the pinned Google Fonts sources; do not edit. The self-hosted
   faces (decision 7). Each family has a core file (Latin, Latin-1 and the Latin Extended letters the site uses)
   and two more (ext, ext2) that a browser fetches only for a page showing one of the rarer letters. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-core.914d3f92fb.woff2?v=914d3f92fb") format("woff2");
  unicode-range: U+20-7E, U+A0-FF, U+102-103, U+106-107, U+10C-10D, U+110-111, U+118-11B, U+11E-11F, U+131, U+141-144, U+147-148, U+152-153, U+15A-15B, U+15E-161, U+179-17A, U+17D-17E, U+218-219, U+2BC, U+2C6, U+2DA, U+2DC, U+2009, U+2010-2011, U+2013-2015, U+2017-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+203E, U+2044, U+2052, U+20AC, U+2122, U+2190-2195, U+2212, U+2215, U+2248, U+FEFF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-ext.b40ed4752e.woff2?v=b40ed4752e") format("woff2");
  unicode-range: U+100-101, U+104-105, U+108-10B, U+10E-10F, U+112-117, U+11C-11D, U+120-130, U+132-140, U+145-146, U+149-151, U+154-159, U+15C-15D, U+162-178, U+17B-17C, U+17F, U+18F, U+192, U+19D, U+1A0-1A1, U+1AF-1B0, U+1C4-1DC, U+1E6-1E7, U+1EA-1EB, U+1FA-217, U+21A-21B, U+22A-22D, U+230-233, U+237, U+259, U+272, U+2B9-2BA, U+2C7, U+2C9, U+2DD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-ext2.60f7db408d.woff2?v=60f7db408d") format("woff2");
  unicode-range: U+300-304, U+306-30C, U+30F, U+311-313, U+31B, U+323-324, U+326-328, U+32E, U+331, U+335-338, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-core.a98f4fafbd.woff2?v=a98f4fafbd") format("woff2");
  unicode-range: U+20-7E, U+A0-FF, U+102-103, U+106-107, U+10C-10D, U+110-111, U+118-11B, U+11E-11F, U+131, U+141-144, U+147-148, U+152-153, U+15A-15B, U+15E-161, U+179-17A, U+17D-17E, U+218-219, U+2BC, U+2C6, U+2DA, U+2DC, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2212, U+2215, U+2248;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-ext.006c13a770.woff2?v=006c13a770") format("woff2");
  unicode-range: U+100-101, U+104-105, U+108-10B, U+10E-10F, U+112-117, U+11C-11D, U+120-130, U+134-140, U+145-146, U+14A-151, U+154-159, U+15C-15D, U+162-178, U+17B-17C, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, U+1C4-1CC, U+1E6-1E7, U+1EA-1EB, U+1FA-217, U+21A-21B, U+22A-22D, U+230-233, U+237, U+259, U+2B9-2BA, U+2C7, U+2DD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-ext2.fe4e87ee94.woff2?v=fe4e87ee94") format("woff2");
  unicode-range: U+300-304, U+306-30C, U+30F, U+311-312, U+31B, U+323-324, U+326-328, U+32E, U+331, U+335, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD;
}

/* ===== mast.css ===== */
/* ==========================================================================
   The header (stage F3): masthead, menu, club strip, the line in the reader's club colour, the club row on club
   subpages, and the rosette. Markup: build/chrome/header.cjs. Behaviour: assets/tc-chrome.js.
   From the approved mockup (work2/shared.css lines 113-213) and the your-club marker in
   build/redesign/NOTES-club-ring.md (an ink bar under the crest, never a ring).

   Unlayered and scoped under .mast on purpose: the generated pages' own inline styles carry unlayered rules such as
   `header .wrap`, `.brand span`, `.crest`, `p` and `a`, which would beat anything in @layer tc. Every rule here is
   at least two classes deep, so it wins over those whatever the order. The rosette classes (.mark, .mk-*) are not
   scoped, because the footer (F4) uses the same mark.
   ========================================================================== */

/* ---------- The reader's club, resolved on the root element ----------
   --rc is the reader's club colour (ink when none is set) and --rc-bar the line under the header (Newcastle's is
   striped). They are set on the root so a page's own --club, which club subpages set on <body> for the page's club,
   never changes the header. --club-l and --club-d come from the club colour table (html[data-club]). */
:root { --rc: var(--ink); --rc-bar: transparent; }
html[data-club] { --rc: var(--club-l, var(--ink)); --rc-bar: var(--club-bar, var(--rc)); }
@media (prefers-color-scheme: dark) {
  html[data-club]:not([data-theme="light"]) { --rc: var(--club-d, var(--ink)); }
}
html[data-club][data-theme="dark"] { --rc: var(--club-d, var(--ink)); }

/* ---------- The rosette ---------- */
.mark { display: block; height: 40px; width: auto; overflow: visible; flex: none; }
.mk-ink { fill: var(--ink); }
.mk-ring, .mk-num { fill: var(--paper); }
.mk-tail { fill: var(--rc, var(--ink)); }

/* ---------- Masthead ---------- */
.mast {
  position: relative; z-index: 30; margin: 0; padding: 0;
  background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 16px; line-height: 1.45; font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: normal;
}
/* The header's own wraps (F5's frame names .hero.ph, main, .site-ft and the old .site-hd, not .mast). Width and
   gutters are the frame's: --max, and --gutter, which .mast inherits from :root (16px in tokens.css, 32px from 768px
   and 40px from 1200px in F5's components-page.css), so the rosette sits on the left edge of the page head, the
   content and the footer. */
.mast .wrap { display: block; max-width: var(--max, 1360px); margin: 0 auto; padding: 0 var(--gutter); gap: 0; }
.mast a { color: inherit; font-weight: inherit; }
.mast p { margin: 0; color: inherit; }
.mast ul { list-style: none; margin: 0; padding: 0; }
.mast button { font-family: inherit; color: inherit; }
.mast img { display: block; max-width: none; }
.mast :focus-visible, .tc-picker :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.mast .skip { position: absolute; left: 8px; top: -80px; z-index: 40; background: var(--ink); color: var(--paper); padding: 10px 14px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.mast .skip:focus { top: 8px; }

.mast .mast-in { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.mast .brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; color: var(--ink); text-decoration: none; }
.mast .brand-name {
  display: block; min-width: 0; margin: 0; color: var(--ink);
  font-weight: 850; font-stretch: 70%; font-size: 26px; line-height: 1; letter-spacing: -.005em;
}
.mast .brand:hover .brand-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* The main links (the homepage's eight tabs, owner's request of 4 October 2026) and Called It's own button
   (.mast-ci), which the row pushes to its end, beside the club and menu buttons, where the old header had
   "Predict & win". The row shows from 1280px; narrower screens find the same links, and the button, in the menu. */
.mast .primary { display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 12px; }
/* On the narrowest phones, with "Your club" spelled out, "Twenty Clubs" may take two lines rather than push the
   buttons off the screen. From 480px it never wraps. */
@media (min-width: 480px) { .mast .brand-name { white-space: nowrap; } }
.mast .primary ul { display: flex; gap: 2px; flex: none; }
.mast .primary li > a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.mast .primary li > a:hover { background: var(--stand); }
.mast .primary li > a[aria-current] { box-shadow: inset 0 -3px 0 var(--ink); border-radius: 0; }
/* Called It's button: an outline in its money green (#0C7F50 on paper, the brighter green in dark mode), so the
   page's one filled button stays Called It's own green panel button (decision 6). */
.mast .mast-ci {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; margin: 0; padding: 6px 14px;
  background: transparent; color: var(--money); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--money);
  font-weight: 750; font-size: 15px; line-height: 1.2; white-space: nowrap; text-decoration: none;
}
.mast .mast-ci:hover { background: var(--stand); }
.mast .mast-ci[aria-current] { box-shadow: inset 0 0 0 3px var(--money); }
.mast .primary .mast-ci { margin-left: auto; }

.mast .mast-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mast .mast-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; margin: 0; padding: 6px 12px;
  background: transparent; color: var(--ink); border: 0; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.mast .mast-btn:hover { background: var(--stand); }
.mast .mast-btn svg { width: 18px; height: 18px; flex: none; }
.mast .yc-def, .mast .yc-btn-label { display: inline-flex; align-items: center; gap: 8px; }
.mast .yc-btn-mark { display: grid; place-items: center; }
.mast .yc-btn-mark svg { width: 17px; height: 19px; }
.mast .yc-btn .crest { width: 26px; height: 26px; }
.mast .yc-btn .l-short { display: none; }
/* Before tc-chrome.js runs, a reader with a club already set sees the button without "Set your club"; the label
   stays in the accessibility tree. The script then puts the crest and short name in. */
html[data-club] .mast .yc-def { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mast .menu-btn .i-close { display: none; }
.mast .menu-btn[aria-expanded="true"] .i-open { display: none; }
.mast .menu-btn[aria-expanded="true"] .i-close { display: block; }
.mast .menu-btn[aria-expanded="true"] { background: var(--stand); }

@media (max-width: 479px) {
  .mast .brand-name { font-size: 23px; }
  .mast .mark { height: 36px; }
  .mast .mast-in { gap: 12px; }
  /* the name stays "Set your club" for screen readers; the shorter "Your club" is only what shows */
  .mast .yc-btn .l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mast .yc-btn .l-short { display: inline; }
  .mast .menu-btn { padding: 0; }
  .mast .menu-btn .menu-label, html[data-club] .mast .yc-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-club] .mast .yc-btn { padding: 0; }
}
/* From 350 to 399px "Your club" drops its shield, so "Twenty Clubs" stays on one line beside it (under 350px the
   button keeps the shield and drops the words instead). */
@media (min-width: 350px) and (max-width: 399px) {
  .mast .yc-def .yc-btn-mark { display: none; }
}
@media (max-width: 349px) {
  .mast .brand { gap: 7px; }
  .mast .brand-name { font-size: 20px; }
  .mast .mark { height: 32px; }
  .mast .mast-in { gap: 8px; }
  .mast .mast-actions { gap: 6px; }
  .mast .yc-btn { padding: 0; }
  .mast .yc-btn .yc-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1280px) {
  .mast .primary { display: flex; }
  .mast .mast-in { gap: 20px; }
  /* the main links are in the row, so the menu button shrinks to its icon and the menu holds the settings */
  .mast .menu-btn { padding: 0; }
  .mast .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mast .menu-nav { display: none; }
}
/* Until the page reaches its full width (1360px), the links are a size smaller, so the row still fits with
   Bournemouth, the longest club name, in the club button. */
@media (min-width: 1280px) and (max-width: 1359px) {
  .mast .primary li > a { padding: 8px 7px; font-size: 14px; }
}

/* ---------- The line under the header in the reader's club colour ---------- */
.mast .thread { height: 0; }
html[data-club] .mast .thread { height: 6px; background: var(--rc-bar); }

/* ---------- Menu: the main links on phones, then the settings ---------- */
.mast .menu { background: var(--paper); border-bottom: 1px solid var(--rule); }
.mast .menu[hidden] { display: none; }
.mast .menu-in { display: grid; gap: 20px; padding-top: 4px; padding-bottom: 20px; }
.mast .menu-nav ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.mast .menu-nav li > a { display: block; padding: 11px 0; color: var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 650; font-size: 17px; line-height: 1.3; }
.mast .menu-nav li > a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mast .menu-nav li > a[aria-current] { font-weight: 800; box-shadow: inset 3px 0 0 var(--ink); padding-left: 10px; }
.mast .menu-nav .mast-ci { margin-top: 16px; font-size: 16px; }
.mast .menu-set { display: flex; flex-wrap: wrap; gap: 18px 48px; }
.mast .set-h { margin: 0 0 8px; color: var(--ink); font-weight: 750; font-size: 15px; line-height: 1.3; }
.mast .set-note { margin: 8px 0 0; max-width: 30em; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
/* The two controls are the footer's .seg (foot.css, stage F4), reused here as it is. The Appearance buttons are
   handled by the footer's theme script, which also reveals their group ([data-theme-ctl] is printed hidden), so a page
   without that script never shows buttons that cannot work. tc-chrome.js handles the Scores buttons. */
.mast .menu:not([hidden]) + .club-strip { border-top: 0; }

/* ---------- Club strip: all twenty crests, each a link to its club page ----------
   On narrow screens the row scrolls sideways inside itself, runs to the edge of the screen and fades where more crests
   wait (tc-chrome.js sets fade-l and fade-r); the page itself never scrolls sideways. From 1024px the crests share the
   full width. The reader's club is a 3px ink bar under its crest (NOTES-club-ring.md):
     - each target is 48px tall and the crest sits 1px above its middle, so no crest moves or changes size when chosen;
     - the bar sits 5px up from the bottom, so paper always parts it from the club-colour line below;
     - it stops 6px short of each side, inside the 3px keyboard focus frame, so a chosen crest with focus shows both;
     - it is a border, which still shows in Windows high contrast mode.
   Keyboard focus is a 3px ink frame drawn inside the target, a different shape from the bar. */
.mast .club-strip { border-top: 1px solid var(--rule); }
.mast .cs-in { display: flex; align-items: center; }
.mast .cs-label {
  flex: none; margin: 0 4px 2px 0; padding-right: 10px; border-right: 1px solid var(--rule);
  color: var(--ink-2); font-weight: 750; font-stretch: 85%; font-size: 13px; line-height: 1.1;
}
.mast .cs-label span { display: block; }
.mast .cs-list {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; margin: 0 calc(-1 * var(--gutter)) 0 0; padding: 0 var(--gutter) 0 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
.mast .cs-list::-webkit-scrollbar { display: none; }
.mast .cs-list li { flex: 1 0 44px; display: flex; justify-content: center; margin: 0; padding: 0; }
.mast .cs-list a { position: relative; display: grid; place-items: center; width: 44px; height: 48px; padding: 0 0 2px; border-radius: 3px; outline-offset: -3px; text-decoration: none; }
.mast .cs-list a:hover { background: var(--stand); }
.mast .cs-list a:focus-visible { outline-offset: -3px; }
.mast .cs-list a.is-mine::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; border-top: 3px solid var(--ink); }
.mast .club-strip.fade-r .cs-list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.mast .club-strip.fade-l .cs-list { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
.mast .club-strip.fade-l.fade-r .cs-list { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
@media (min-width: 768px) {
  .mast .cs-label { margin-right: 6px; padding-right: 14px; }
  .mast .cs-label span { display: inline; }
}
@media (min-width: 1024px) {
  .mast .cs-list { margin-right: 0; padding-right: 0; }
  .mast .cs-list li { flex-basis: 42px; }
  .mast .cs-list a { width: 42px; }
}

/* ---------- Crests in the header ----------
   <img class="crest" width height alt>, sized here by context. The base rule with the dark-mode disc is F2's
   `:where(img).crest` (type.css, in @layer tc): in dark mode each crest sits on the same light disc, so dark badges
   such as Spurs and Liverpool stay legible. The generated pages' own inline `.crest` rule (a 34px rounded letter
   chip, unlayered) beats that layered rule, so the header repeats F2's disc values here, scoped, until F5 retires the
   pages' inline rule. Keep the disc values in step with type.css. */
.mast .crest, .tc-picker .crest {
  display: block; flex: none; width: 28px; height: 28px; margin: 0; object-fit: contain;
  padding: calc(var(--cp, 2px) * var(--dk, 0)); background: var(--cbg, transparent); border-radius: calc(50% * var(--dk, 0));
  color: inherit; font-size: inherit; letter-spacing: normal; text-indent: 0;
}
@media (min-width: 1100px) { .mast .cs-list .crest { width: 30px; height: 30px; } }

/* ---------- Club row on club subpages (design review item 9) ----------
   The club's name and crest link back to its hub, the hub's sections follow with the current one marked by an ink
   bar, and the Follow button ends the row. On phones the name and Follow share the first line and the sections
   scroll sideways below; from 1024px it is one line. A 3px line in the page club's colour closes the header. */
.mast .crow { border-top: 1px solid var(--rule); box-shadow: inset 0 -3px 0 var(--b, var(--ink)); }
.mast .crow-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "club follow" "list list"; align-items: center; column-gap: 12px; padding-top: 6px; padding-bottom: 3px; }
.mast .crow-club {
  grid-area: club; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0;
  color: var(--ink); text-decoration: none; font-weight: 800; font-stretch: 85%; font-size: 18px; line-height: 1.15;
}
.mast .crow-club .crest { width: 26px; height: 26px; }
.mast .crow-club:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mast .crow-list {
  grid-area: list; position: relative; display: flex; min-width: 0; margin: 0 calc(-1 * var(--gutter)) 0 0; padding: 0 var(--gutter) 0 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
.mast .crow-list::-webkit-scrollbar { display: none; }
.mast .crow-list li { flex: none; }
.mast .crow-list a {
  position: relative; display: block; padding: 11px 10px 15px; color: var(--ink); text-decoration: none; outline-offset: -3px;
  font-weight: 600; font-size: 15px; line-height: 1.3; white-space: nowrap;
}
.mast .crow-list li:first-child a { padding-left: 0; }
.mast .crow-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mast .crow-list a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; border-top: 3px solid var(--ink); }
.mast .crow-list li:first-child a[aria-current]::after { left: 0; }
.mast .crow-list a[aria-current="page"] { font-weight: 800; }
.mast .crow.fade-r .crow-list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.mast .crow.fade-l .crow-list { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
.mast .crow.fade-l.fade-r .crow-list { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.mast .crow-follow {
  grid-area: follow; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin: 0; padding: 6px 12px;
  background: transparent; color: var(--ink); border: 0; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.mast .crow-follow:hover { background: var(--stand); }
.mast .crow-follow svg { width: 16px; height: 16px; flex: none; fill: none; }
.mast .crow-follow .fl-on { display: none; }
/* Following: solid ink with a filled star. html[data-follows] (the page's club is the reader's club) is set by the
   head script before first paint, so the label never jumps; tc-chrome.js keeps it and aria-pressed in step. */
html[data-follows] .mast .crow-follow, .mast .crow-follow[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
html[data-follows] .mast .crow-follow svg, .mast .crow-follow[aria-pressed="true"] svg { fill: currentColor; }
html[data-follows] .mast .crow-follow .fl-on, .mast .crow-follow[aria-pressed="true"] .fl-on { display: inline; }
html[data-follows] .mast .crow-follow .fl-off, .mast .crow-follow[aria-pressed="true"] .fl-off { display: none; }
@media (min-width: 1024px) {
  .mast .crow-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "club list follow"; column-gap: 28px; padding-top: 0; padding-bottom: 0; }
  .mast .crow-list { margin-right: 0; padding-right: 0; }
  .mast .crow-list a { padding-top: 15px; padding-bottom: 17px; }
}

/* ---------- Club picker (a dialog that tc-chrome.js adds to the page on first use) ----------
   Your club keeps the plain plate and takes the strip's mark: a 4px ink bar along the foot of its button. It never
   fills with the club colour, even on hover, so the bar always shows and hover alone never looks chosen. */
dialog.tc-picker {
  width: min(680px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0;
  border: 0; border-top: 6px solid var(--rc, var(--ink)); border-radius: 0; background: var(--paper); color: var(--ink);
  font-family: var(--display); font-size: 16px; line-height: 1.45; font-variant-numeric: tabular-nums lining-nums;
}
dialog.tc-picker::backdrop { background: rgba(8, 10, 12, .6); }
.tc-picker .pk { padding: 16px 16px 18px; }
.tc-picker .pk-head { display: flex; align-items: center; gap: 16px; }
.tc-picker .pk-head h2 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 28px; line-height: 1.05; letter-spacing: normal; }
.tc-picker .pk-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 0 auto; padding: 0; background: none; color: var(--ink); border: 0; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink); cursor: pointer; }
.tc-picker .pk-x:hover { background: var(--stand); }
.tc-picker .pk-x svg { width: 18px; height: 18px; }
.tc-picker .pk-intro { margin: 8px 0 0; max-width: 34em; color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.tc-picker .pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.tc-picker .pk-club {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; margin: 0; padding: 6px 10px;
  background: var(--stand); color: var(--ink); border: 0; border-radius: 3px; text-align: left;
  font-family: inherit; font-weight: 650; font-size: 15px; line-height: 1.2; cursor: pointer;
}
.tc-picker .pk-club:hover { background: var(--c); color: var(--on-c); }
.tc-picker .pk-club:hover .crest { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)); }
.tc-picker .pk-club[aria-pressed="true"]:hover { background: var(--stand-2); color: var(--ink); }
.tc-picker .pk-club[aria-pressed="true"]:hover .crest { filter: none; }
.tc-picker .pk-club[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-bottom: 4px solid var(--ink); border-radius: 0 0 3px 3px; }
.tc-picker .pk-club:focus-visible { outline-offset: 3px; }
.tc-picker .pk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.tc-picker .pk-foot[hidden] { display: none; }
/* "Clear my club" is F5's ink outline button (.btn in components.css), not restyled here. */
@media (min-width: 560px) {
  .tc-picker .pk { padding: 20px 20px 22px; }
  .tc-picker .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .mast .mast-btn, .mast .cs-list a, .mast .crow-follow, .tc-picker .pk-club { transition: background-color .12s ease, color .12s ease; }
}

/* ===== foot.css ===== */
/* ==========================================================================
   The site footer (stage F4, slimmed by the compact pass on 4 October 2026: "keep only what's needed in the
   footer"). Three parts, in keyboard order: the brand and the page's note, one row of links (All guides and
   pages, About, FAQ, Contact, Called It rules, Privacy, Terms) and the Light, Dark or Device control. Stacked on
   phones; one band of three columns from 960px. The 20 clubs and the Premier League pages are in the header's
   club strip and menu, and every other guide is on /guides.

   Cascade: unlayered and scoped under the root class .site-ft (see build/chrome/footer.cjs for why it is not
   the mockup's .foot). The generated pages still carry unlayered inline rules that reach the footer: footer,
   footer .wrap, footer a, a, p and h2. Every property those set is set again here at higher specificity, so
   the footer looks the same on every page whatever its generator printed. The footer's width is the page's
   frame: stage F5's components-page.css gives `:root .site-ft > .wrap` the --max width and the --gutter sides.

   .seg, the three-way theme control, is the one rule set not scoped under .site-ft: stage F3's menu uses the
   same control (the contract is in build/redesign/progress/F4.md).
   ========================================================================== */
.site-ft {
  margin-top: 48px; padding: 0;
  border-top: 4px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font-family: var(--display); font-size: 15px; line-height: 1.3;
}
.site-ft .ft-in { display: grid; gap: 16px; padding-top: 20px; padding-bottom: 28px; color: var(--ink); font-size: 15px; }
@media (min-width: 768px) { .site-ft { margin-top: 64px; } }
@media (min-width: 960px) {
  .site-ft .ft-in { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; column-gap: 40px; align-items: start; padding-top: 24px; padding-bottom: 36px; }
}

/* The theme control's label: sentence case in ink, never spaced capitals. */
.site-ft .ft-h {
  margin: 0; padding: 0; border: 0;
  font-family: var(--display); font-size: 15px; font-weight: 800; font-stretch: 85%;
  line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.site-ft .ft-h::before, .site-ft .ft-h::after { content: none; }

.site-ft a {
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.site-ft a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* The links: one wrapping row, with "All guides and pages" on a line of its own. */
.site-ft .ft-links { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0; padding: 0; }
.site-ft .ft-links li { margin: 0; padding: 0; }
.site-ft .ft-links li:first-child { flex-basis: 100%; }
.site-ft .ft-links a { display: inline-block; padding: 7px 0; font-size: 15px; line-height: 1.25; }
.site-ft .ft-links li:first-child a { font-weight: 800; }
.site-ft .ft-links a[aria-current="page"] { font-weight: 800; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
@media (min-width: 960px) { .site-ft .ft-nav { padding-top: 4px; } }

/* The brand and the page's note. */
.site-ft .ft-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.site-ft .ft-brand:hover .ft-word { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-ft .ft-brand svg { display: block; flex: none; width: auto; height: 36px; overflow: visible; }
/* The rosette's parts (F3's BRAND_SVG, class names from the mockup), coloured here as well as in the header, so
   the footer's mark is right whatever scope F3 gives its own rules. The ribbons take the reader's club, which
   mast.css resolves on the root as --rc (ink when none is set), the same as the header's; --club is only the
   fallback, because a page can still set its own --club for the page's club. */
.site-ft .mk-ink { fill: var(--ink); }
.site-ft .mk-ring, .site-ft .mk-num { fill: var(--paper); }
.site-ft .mk-tail { fill: var(--rc, var(--club)); }
.site-ft .ft-word {
  display: inline; margin: 0;
  font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 24px; line-height: 1;
  letter-spacing: -.005em; text-transform: none; color: var(--ink);
}
.site-ft .ft-note {
  margin: 8px 0 0; max-width: 34em;
  font-family: var(--serif); font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ink-2);
}

/* The theme control: the label beside the three buttons. */
.site-ft .ft-theme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.site-ft .ft-theme[hidden] { display: none; }
@media (min-width: 960px) { .site-ft .ft-theme { flex-direction: column; align-items: flex-start; } }

/* The theme control: Light, Dark or Device. The chosen option is solid ink in both themes, as in the mockup.
   Keyboard focus is a ring in the button's own text colour, inset, so it shows on the chosen (ink) option too. */
.seg {
  display: inline-flex; margin: 0; padding: 2px; border: 0; border-radius: 4px;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink);
}
.seg button {
  min-height: 40px; margin: 0; padding: 6px 14px;
  background: none; border: 0; border-radius: 3px; box-shadow: none; outline: 0;
  color: var(--ink); font-family: var(--display); font-weight: 650; font-size: 14px; line-height: 1.2;
  letter-spacing: 0; text-transform: none; cursor: pointer;
}
.seg button:hover { background: var(--stand); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
@media (forced-colors: active) {
  .seg { border: 2px solid CanvasText; }
  .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media (prefers-reduced-motion: no-preference) {
  .seg button { transition: background-color .12s ease, color .12s ease; }
}

/* ===== components.css ===== */
/* ==========================================================================
   Shared components (stage F5), from the approved mockup (work2/home.tpl.html, match.tpl.html and shared.css)
   and the owner's decisions of 3 October 2026. They sit in @layer tc, so a page's own inline rules still win
   until its family stage removes them. The page frame and the page head are in components-page.css, unlayered.

   Two kinds of rule:
   1. The generated pages' existing classes (sections, .lnk-grid, .gcard, .callout, .facts, .block, .kv, .faq,
      .cd, .pills and the rest). The generators' inline STYLE used to draw these; stage F5 stripped the visual
      rules from the shared STYLE (make-news-pages.cjs), BASE_STYLE (make-fixtures-pages.cjs) and the
      make-league-guides head(), so these rules now draw them. They are scoped to `.ph ~ main`, the main content
      of a page that has the page head, so the hand-tuned homepage, hubs, /predict and static pages are not
      touched when they link this stylesheet (stage F6). The class components are further scoped to
      `.ph:not(.ph-old)`: the page-head swap marks `ph-old` on a page that still prints its own copy of the old
      inline STYLE (today the derby and away-day pages, stage P8b), because there the old card rules and these
      panel rules would mix into a frame around separate cards. Such a page keeps its old body until its stage
      drops the copy; the marker then goes by itself at the next deploy.
   2. New vocabulary for the family stages and F6 (.sec-head, .dek, .btn, .plate, .yours, .mine, .league,
      .tc-tbl, .form-run, .clubs-grid, .club-block). These names are not used by any page today, except
      `.sec-head`, which /predict uses on a <p>, hence :not(p).

   Owner's rules carried here: section heads take the thick ink rule above the heading (decision 9), lists sit in
   one panel with thin dividers instead of walls of cards (item 10), one FAQ style with a visible plus and minus,
   no frame inside a frame (item 22), right-aligned figures and bold points in tables (item 29), slate panels and
   plates in dark mode, one filled button per page, Called It keeps its deep green, every other button is an ink
   outline, and small text is never set in a club's colour.
   ========================================================================== */
@layer tc {
  /* One width for every page part: the header, the page head, the content and the footer. */
  .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

  /* The content column: blocks stop at --col (960px) on wide screens. Zero specificity, so the reading measure
     (34em) and any family's own max-width win. */
  :where(.ph ~ main > .wrap) > * { max-width: var(--col); }

  /* ---------- Sections on generated pages: thick ink rule, heading, one line of text, the content ----------
     Each section opens with a 4px ink rule above its heading; that rule is the separator between sections. */
  .ph ~ main section { margin: 0 0 40px; }
  .ph ~ main section:last-child { margin-bottom: 24px; }
  .ph ~ main h2 {
    margin: 0 0 8px;
    font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 26px; line-height: 1.05;
    letter-spacing: 0; color: var(--ink);
  }
  /* The rule belongs to section-level headings only, not to a heading inside a boxed panel (the case status box,
     the baked blocks on club fixtures pages), where a rule inside a frame would read as a second frame. */
  .ph ~ main :is(.wrap, section) > h2 { padding-top: 10px; border-top: 4px solid var(--ink); }
  .ph ~ main h3 {
    margin: 18px 0 6px; font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 19px;
    line-height: 1.2; letter-spacing: 0; color: var(--ink);
  }
  .ph ~ main p { margin: 0 0 14px; line-height: 1.55; color: var(--ink-2); }
  /* Reading text stops at about 60 characters a line (item 17) through stage F2's reading measure in type.css
     (34em on main .lead-p and on paragraphs inside .wrap, section, details, .block, .callout and the rest), so no
     paragraph width is set here. */
  .ph ~ main h2 + p { margin-bottom: 16px; }
  /* Body links in ink. :not(.btn), so a link styled as a button keeps the button's own colours: at (0,1,2) this rule
     used to beat .btn, .btn-fill and .btn-ci (0,1,0), leaving ink text on the ink fill and on Called It's green. */
  .ph ~ main a:not(.btn) { color: var(--ink); font-weight: 600; }
  .ph ~ main .lead-p { margin: 0 0 32px; font-size: 18px; line-height: 1.5; color: var(--ink); }
  .ph ~ main .xband > h2 { font-size: 22px; }
  @media (min-width: 768px) {
    .ph ~ main section { margin-bottom: 48px; }
    .ph ~ main h2 { font-size: 32px; }
    .ph ~ main .xband > h2 { font-size: 26px; }
    .ph ~ main h3 { font-size: 20px; }
    .ph ~ main .lead-p { font-size: 19px; }
  }

  /* Small print and navigation lines. */
  .ph:not(.ph-old) ~ main .updated { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
  .ph:not(.ph-old) ~ main .fx-status { margin-top: 14px; }
  .ph:not(.ph-old) ~ main .backlink { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; font-weight: 650; font-size: 15px; }
  .ph:not(.ph-old) ~ main .fnav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; }
  .ph:not(.ph-old) ~ main .fnav a { font-weight: 600; font-size: 15px; color: var(--ink-2); }
  .ph:not(.ph-old) ~ main .pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
  .ph:not(.ph-old) ~ main .pill {
    padding: 3px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel);
    font-weight: 650; font-size: 14px; line-height: 1.3; color: var(--ink-2);
  }

  /* ---------- One panel with thin dividers (item 10) ----------
     A list of links is one panel: rows divided by 1px rules, one or more columns, no card per item. The rows draw
     their right and bottom rules and the panel clips the outer ones, so a short last row never leaves a stray
     line. Paper in light, slate in dark (--panel). Focus is drawn inside the row because the panel clips. */
  .ph:not(.ph-old) ~ main :is(.lnk-grid, .guide-grid, .clublist) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0;
    margin: 8px 0 6px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); overflow: hidden;
  }
  .ph:not(.ph-old) ~ main :is(.lnk, .gcard, .clubrow) {
    display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; margin: 0 -1px -1px 0; padding: 11px 16px;
    border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0;
    background: transparent; box-shadow: none; color: var(--ink); text-decoration: none; outline-offset: -3px;
  }
  .ph:not(.ph-old) ~ main :is(.lnk, .gcard, .clubrow):hover { background: var(--panel-hover); }
  .ph:not(.ph-old) ~ main .lnk { justify-content: space-between; font-weight: 650; font-size: 16px; line-height: 1.3; }
  .ph:not(.ph-old) ~ main .lnk small { display: block; margin-top: 2px; font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--muted); }
  .ph:not(.ph-old) ~ main .lnk .arw { flex: none; color: var(--muted); }
  /* A score inside a link row (a match page's other results: "Ipswich 0-2 Liverpool, Full time") is plain bold
     figures in the row's colour. The score plate of the fixture rows (components-home-rows.css) is for those rows:
     the generated pages' inline FX_STYLE sets the score's colour (ink, or red when live), so a plate behind it drew
     ink on ink (the G1 contrast scan of every page, 4 October 2026). */
  .lnk .fx-sc, .lnk .fx-sc.is-live { padding: 0; border-radius: 0; background: none; font-size: inherit; font-stretch: inherit; }
  .ph:not(.ph-old) ~ main .lnk:hover .arw { color: var(--ink); }
  .ph:not(.ph-old) ~ main .lnk:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
  /* Rows that open on a crest: club cards and club rows. */
  .ph:not(.ph-old) ~ main :is(.gcard, .clubrow) .crest { flex: none; width: 28px; height: 28px; font-size: 9px; border-radius: 6px; }
  .ph:not(.ph-old) ~ main .gcard .gt { min-width: 0; display: flex; flex-direction: column; }
  .ph:not(.ph-old) ~ main .gcard .gn, .ph:not(.ph-old) ~ main .clubrow b { display: block; font-weight: 700; font-size: 16px; line-height: 1.25; }
  .ph:not(.ph-old) ~ main .gcard .gc, .ph:not(.ph-old) ~ main .clubrow small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--muted); }
  .ph:not(.ph-old) ~ main :is(.gcard, .clubrow):hover :is(.gn, b) { text-decoration: underline; text-underline-offset: 3px; }
  /* The current club in a list is marked with the ink bar, never its own colour. */
  .ph:not(.ph-old) ~ main .gcard.on { box-shadow: inset 4px 0 0 var(--ink); }
  .ph:not(.ph-old) ~ main .gcard.on .gn { font-weight: 850; }

  /* A note on the stand tint. A link list inside it drops its own frame (no frame inside a frame, item 22). */
  .ph:not(.ph-old) ~ main .callout { margin: 8px 0 22px; padding: 16px 18px; border: 0; border-radius: 0; background: var(--stand); }
  .ph:not(.ph-old) ~ main .callout p { margin: 0 0 8px; font-size: 16px; color: var(--ink-2); }
  .ph:not(.ph-old) ~ main .callout p:last-child { margin-bottom: 0; }
  .ph:not(.ph-old) ~ main .callout h3 { margin-top: 0; }
  .ph:not(.ph-old) ~ main .callout :is(.lnk-grid, .guide-grid) { margin: 12px 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; }
  .ph:not(.ph-old) ~ main .callout :is(.lnk, .gcard) { padding-inline: 0 12px; }
  .ph:not(.ph-old) ~ main .callout :is(.lnk, .gcard):hover { background: var(--stand-2); }

  /* Facts and key values: one panel of cells divided by hairlines; short labels fit two to a row on a phone. */
  .ph:not(.ph-old) ~ main :is(.facts, .kv) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0;
    margin: 6px 0 28px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); overflow: hidden;
  }
  .ph:not(.ph-old) ~ main :is(.fact, .kv .k) {
    min-width: 0; margin: 0 -1px -1px 0; padding: 12px 14px;
    border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent;
  }
  .ph:not(.ph-old) ~ main :is(.fact .fl, .kv .k b) {
    display: block; font-weight: 650; font-size: 14px; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--muted);
  }
  .ph:not(.ph-old) ~ main :is(.fact .fv, .kv .k span) { display: block; margin-top: 3px; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--ink); }
  .ph:not(.ph-old) ~ main .fact .fs { margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--muted); }
  @media (min-width: 600px) { .ph:not(.ph-old) ~ main .kv { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

  /* Topic blocks (match and away-day pages): one list divided by rules instead of a card each. */
  .ph:not(.ph-old) ~ main .block { margin: 0; padding: 14px 0 6px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
  .ph:not(.ph-old) ~ main .block:not(:has(+ .block)) { margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .ph:not(.ph-old) ~ main .block h3 { margin: 0 0 6px; }
  .ph:not(.ph-old) ~ main .block p:last-child { margin-bottom: 8px; }
  .ph:not(.ph-old) ~ main .mtn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; margin-top: 8px; }
  .ph:not(.ph-old) ~ main .mtn-col h3 { margin: 0 0 10px; }
  .ph:not(.ph-old) ~ main .mtn-more { margin: 10px 0 0; font-size: 15px; }
  @media (max-width: 620px) { .ph:not(.ph-old) ~ main .mtn-grid { grid-template-columns: minmax(0, 1fr); } }

  /* The baked headline list (news.js replaces it for readers; crawlers and no-script readers see this). */
  .ph:not(.ph-old) ~ main .nw-bake { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); overflow: hidden; }
  .ph:not(.ph-old) ~ main .nw-bake li { border-top: 1px solid var(--rule); }
  .ph:not(.ph-old) ~ main .nw-bake li:first-child { border-top: 0; }
  .ph:not(.ph-old) ~ main .nw-bake a { display: block; padding: 12px 16px; font-weight: 600; font-size: 16px; line-height: 1.35; text-decoration: none; outline-offset: -3px; }
  .ph:not(.ph-old) ~ main .nw-bake a:hover { background: var(--panel-hover); }
  .ph:not(.ph-old) ~ main .nw-bake .s { font-weight: 700; font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--muted); }

  /* Countdown: figures on plates (ink in light, slate in dark). */
  .ph:not(.ph-old) ~ main .cd { display: inline-flex; gap: 8px; font-weight: 800; font-size: 20px; }
  .ph:not(.ph-old) ~ main .cd b { min-width: 44px; padding: 6px 9px; border-radius: 3px; background: var(--plate); color: var(--on-plate); text-align: center; font-weight: 850; font-stretch: 75%; }

  /* ---------- FAQ: one style, one panel, with a visible plus that turns into a minus ---------- */
  .ph:not(.ph-old) ~ main .faq details {
    margin: 0; padding: 0 16px; border: 1px solid var(--rule); border-top: 0; border-radius: 0; background: var(--panel);
  }
  .ph:not(.ph-old) ~ main .faq h2 + details, .ph:not(.ph-old) ~ main .faq details:first-of-type { border-top: 1px solid var(--rule); border-radius: 4px 4px 0 0; }
  .ph:not(.ph-old) ~ main .faq details:last-of-type { border-radius: 0 0 4px 4px; }
  .ph:not(.ph-old) ~ main .faq details:only-of-type { border-radius: 4px; }
  .ph:not(.ph-old) ~ main .faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 13px 0;
    border: 0; list-style: none; cursor: pointer; outline-offset: -2px;
    font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink);
  }
  .ph:not(.ph-old) ~ main .faq summary::-webkit-details-marker { display: none; }
  .ph:not(.ph-old) ~ main .faq summary::after {
    content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px;
    box-shadow: inset 0 0 0 2px var(--ink); font-weight: 600; font-size: 22px; line-height: 1; color: var(--ink);
  }
  .ph:not(.ph-old) ~ main .faq details[open] > summary { border: 0; }
  .ph:not(.ph-old) ~ main .faq details[open] > summary::after { content: "\2212"; }
  .ph:not(.ph-old) ~ main .faq summary:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ph:not(.ph-old) ~ main .faq details > p { margin: 0 0 16px; }
  .ph:not(.ph-old) ~ main .faq details > :last-child:not(summary) { margin-bottom: 16px; }

  /* ---------- New section heads for new markup (mockup .sec-head, .dek, .sec-note, .more) ---------- */
  .sec-head:not(p) { margin-bottom: 16px; padding-top: 10px; border-top: 4px solid var(--ink); }
  .sec-head:not(p) h2 { margin: 0; padding: 0; border: 0; font-weight: 850; font-stretch: 75%; font-size: 26px; line-height: 1.05; }
  .sec-note { margin: 6px 0 0; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--muted); }
  .dek { margin: 6px 0 0; max-width: 34em; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
  p.more { margin: 16px 0 0; font-weight: 650; font-size: 16px; }
  @media (min-width: 768px) { .sec-head:not(p) h2 { font-size: 32px; } .dek { font-size: 18px; } }

  /* ---------- Buttons ----------
     Every button is an ink outline. A page may have one filled button (.btn-fill): ink in light, light in dark.
     Called It keeps its deep money green with white text in both themes (decision 6). */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px;
    border: 0; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink);
    font-family: var(--display); font-weight: 750; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
  }
  .btn:hover { background: var(--stand); }
  .btn svg { width: 18px; height: 20px; flex: none; }
  .btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
  .btn-fill { background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .btn-fill:hover { background: var(--primary-hover); }
  .btn-ci { background: #0C7F50; color: #FFFFFF; box-shadow: none; }
  .btn-ci:hover { background: #0A6B43; }
  .btn-ci:focus-visible { outline-color: var(--ink); }
  .link-btn { padding: 0; border: 0; background: none; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  /* ---------- Plates: dark labels for days and scores (slate in dark mode) ---------- */
  .plate { margin: 0; padding: 9px 12px; background: var(--plate); color: var(--on-plate); font-weight: 750; font-stretch: 85%; font-size: 16px; line-height: 1.2; }
  .mini-plate {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 2px; border-radius: 3px; background: var(--plate); color: var(--on-plate);
    font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 17px; line-height: 1; vertical-align: 1px;
  }
  .mini-plate i { width: 6px; height: 2px; background: currentColor; }

  /* ---------- Your club: always ink, never the club's colour ----------
     tc-chrome.js (stage F3) adds .mine to [data-clubs] rows, .is-mine to [data-code] items and a .yours tag into
     [data-yours]. A row gets an ink bar down its left edge; a table row also gets the stand tint. */
  .yours {
    display: inline-flex; align-items: center; padding: 2px 6px 1px; border-radius: 2px; background: var(--ink); color: var(--paper);
    font-family: var(--display); font-weight: 750; font-stretch: 85%; font-size: 13px; line-height: 1.25; white-space: nowrap;
  }
  .mine:not(tr) { box-shadow: inset 4px 0 0 var(--ink); }
  tr.mine > * { background: var(--stand); }
  tr.mine > :first-child { box-shadow: inset 5px 0 0 var(--ink); }
  .is-mine { font-weight: 800; }

  /* ---------- Tables: the league table (.league) and any data table (.tc-tbl) ----------
     Figures are right-aligned and tabular, goal difference takes a true minus sign from the data (item 29, kept
     on main by lib-standings and standings.js), points are bold, the header sits on a 2px ink rule. Wrap a wide
     table in .tbl-wrap so it scrolls inside itself on a phone; the position and club cells can be pinned. */
  .tbl-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  :is(.league, .tc-tbl) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; font-variant-numeric: tabular-nums lining-nums; }
  :is(.league, .tc-tbl) :is(th, td) { height: 40px; padding: 0 6px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--rule); background: var(--paper); }
  :is(.league, .tc-tbl) thead th { height: 34px; font-size: 13px; font-weight: 650; letter-spacing: normal; text-transform: none; color: var(--muted); border-bottom: 2px solid var(--ink); }
  :is(.league, .tc-tbl) abbr { text-decoration: none; }
  :is(.league, .tc-tbl) :is(.n, .num, .gd, .pts) { text-align: right; }
  :is(.league, .tc-tbl) tbody .pts { font-weight: 850; font-stretch: 75%; font-size: 18px; color: var(--ink); }
  .league .pos { position: sticky; left: 0; z-index: 1; width: 32px; min-width: 32px; max-width: 32px; padding-left: 6px; color: var(--ink-2); font-weight: 600; }
  .league .club { position: sticky; left: 32px; z-index: 1; width: 100%; padding-right: 10px; font-weight: 600; }
  .league .club a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
  .league .club a:hover span { text-decoration: underline; text-underline-offset: 3px; }
  .league .club .crest { width: 22px; height: 22px; }
  .league .n { min-width: 27px; }
  .league .gd { min-width: 36px; }
  .league .pts { min-width: 36px; padding-right: 6px; }
  .league .form { padding: 0 4px 0 12px; }
  .tbl-wrap.scrolled .league .club { box-shadow: inset -1px 0 0 var(--rule); }
  .league tr.zone td { height: auto; padding: 14px 8px 5px; border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .league tr.mine .club { font-weight: 850; }
  .tbl-note { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
  /* Form: oldest result first; the letter is always printed, so the colour is never the only signal. */
  .form-run { display: inline-flex; gap: 2px; vertical-align: middle; }
  .f { width: 19px; height: 20px; display: inline-grid; place-items: center; border-radius: 2px; font-size: 13px; font-weight: 800; font-stretch: 85%; color: var(--on-form); }
  .f-W { background: var(--win); } .f-D { background: var(--draw); } .f-L { background: var(--loss); }

  /* ---------- Club colour block: the hub's top section, painted like the programme cover (F6b, P10) ----------
     <section class="club-block" data-c="ARS">: the club's solid fill with the right text colour on it, the crest on
     a white disc. Text on the block is white or ink, never the club colour on paper. */
  .club-block { background: var(--c); color: var(--on-c); padding: 20px 0 22px; --dk: 0; --cbg: transparent; }
  .club-block a { color: inherit; }
  .club-block :focus-visible { outline-color: currentColor; }
  .cb-disc { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: #FFFFFF; }
  .cb-disc img, .cb-disc .crest { width: 54px; height: 54px; object-fit: contain; }
  .cb-name { margin: 12px 0 0; font-weight: 850; font-stretch: 72%; font-size: 36px; line-height: 1; }
  .cb-meta { margin: 8px 0 0; font-weight: 650; font-size: 16px; line-height: 1.35; }
  @media (min-width: 768px) {
    .club-block { padding: 28px 0 30px; }
    .cb-disc { width: 96px; height: 96px; }
    .cb-disc img, .cb-disc .crest { width: 72px; height: 72px; }
    .cb-name { font-size: 56px; }
    .cb-meta { font-size: 18px; }
  }

  /* ---------- Club tiles: each tile carries its club's colour as a band, like a row of scarves ----------
     Your club: an ink bar along the foot of the tile (NOTES-club-ring.md), never a ring or a plate. */
  .clubs-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .clubs-grid li { min-width: 0; }
  .club-a {
    position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: center;
    height: 100%; min-height: 70px; padding: 12px 10px 12px 2px; border-top: 6px solid var(--b); color: var(--ink); text-decoration: none;
  }
  .club-a .crest { grid-row: 1 / span 3; width: 36px; height: 36px; --cp: 3px; }
  .club-n { font-weight: 750; font-size: 16px; line-height: 1.2; }
  .club-g { font-size: 13px; line-height: 1.3; color: var(--muted); }
  .club-t { margin-top: 4px; }
  .club-t:empty { display: none; }
  .club-a:hover .club-n { text-decoration: underline; text-underline-offset: 3px; }
  .club-a.mine { box-shadow: none; }
  .club-a.mine::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 4px solid var(--ink); }
  .club-a:focus-visible { outline-offset: 2px; }
  @media (min-width: 600px) { .clubs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .clubs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; } }
  @media (min-width: 1200px) { .clubs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

  @media (prefers-reduced-motion: no-preference) {
    .btn, .ph ~ main :is(.lnk, .gcard, .clubrow), .ph ~ main .nw-bake a { transition: background-color .12s ease, color .12s ease; }
  }
}

/* ===== components-compact.css ===== */
/* ==========================================================================
   The compact pass (4 October 2026): the owner found "just a lot of scrolling throughout". Shared pieces that make
   long pages shorter without hiding anything from search engines. In @layer tc, like the rest of components.

   1. .tc-index: a dense index of links in as many columns as fit (two on a phone, four or five on a desktop),
      one line each. Used by /guides (build/make-guides-page.cjs).
   2. [data-more]: a long list that shows its first items and a "Show all" button that opens the rest in place.
      Every item stays in the HTML; only the reader's view is shortened. assets/more.js adds the button.
   ========================================================================== */
@layer tc {
  /* ---------- 1. The link index ---------- */
  .tc-index { list-style: none; margin: 6px 0 0; padding: 0; font-size: 15px; columns: 150px auto; column-gap: 24px; }
  .tc-index li { margin: 0; padding: 0; break-inside: avoid; }
  .ph ~ main .tc-index a, .tc-index a {
    display: block; padding: 6px 0; border-bottom: 1px solid var(--rule);
    font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink);
    text-decoration: none;
  }
  .tc-index a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .tc-index a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* ---------- 2. Long lists: the first items, then "Show all" ---------- */
  /* !important: the widgets inject unlayered display rules for their rows (stats.js .stx-h2hm and the rest) */
  [data-more].is-short .is-more { display: none !important; }
  .tc-more {
    display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 16px; min-height: 40px; padding: 8px 14px;
    border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink);
    font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer;
  }
  .tc-more:hover { background: var(--stand); }
  .tc-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .tc-more svg { width: 12px; height: 12px; flex: none; }
  .tc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
}

@layer tc {
  /* ---------- 3. The short link where a repeated block went (home-compact.cjs, hubs-compact.cjs) ---------- */
  .tab-xref { margin: 4px 0 24px; padding: 10px 0 0; border-top: 1px solid var(--rule); max-width: 46em; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
  .tab-xref a { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
  .tab-xref a:hover { text-decoration-thickness: 2px; }

  /* ---------- 4. Two short sections side by side on wide screens (.tab-pair, written by the transforms) ---------- */
  @media (min-width: 1100px) {
    .tab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
  }
}

/* ===== components-home-rows.css ===== */
/* ==========================================================================
   Rows drawn by the shared client renderers (redesign Phase 1, Home lane): the round (assets/programme.js through
   live.js), the results scoreboard (programme.js, lastround.js), the league tables (live.js), the news lists
   (news.js) and the club and league fixture lists (fixtures.js). The renderers inject their old styles only on a page
   that does not link this stylesheet, so a page keeps its look until it adopts tc.css.
   In @layer tc: the generated fixtures pages (FX_STYLE in make-fixtures-pages.cjs, stage P1) keep their own inline
   rules for their baked .fx boards, which beat these until P1 restyles them.
   ========================================================================== */
@layer tc {
  /* ---------- The round: a dark plate for each day, then each kick-off time with its games (mockup 84-129) ---------- */
  .rd { container-type: inline-size; }
  .rd-day + .rd-day { margin-top: 28px; }
  .rd-plate { margin: 0; }
  .rd-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 6px; border-bottom: 1px solid var(--rule); }
  .rd-ko { margin: 0; padding: 13px 0 12px; font-weight: 850; font-stretch: 62%; font-size: 34px; line-height: .86; letter-spacing: -.01em; white-space: nowrap; position: sticky; top: var(--strip-h, 0px); align-self: start; background: var(--paper); }
  .rd-games { list-style: none; margin: 0; padding: 0; min-width: 0; }
  .rd-game + .rd-game { border-top: 1px solid var(--rule); }
  .rd-a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "h chev" "a chev" "meta chev"; column-gap: 12px; row-gap: 5px; align-items: center; padding: 11px 6px 11px 10px; text-decoration: none; color: inherit; }
  .rd-tm { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-stretch: 92%; font-size: 17px; line-height: 1.2; }
  .rd-tm .crest { width: 24px; height: 24px; }
  .rd-h { grid-area: h; }
  .rd-w { grid-area: a; }
  .rd-nm { min-width: 0; }
  .rd-sc { margin-left: auto; min-width: 26px; padding: 3px 6px 2px; border-radius: 2px; background: var(--plate); color: var(--on-plate); text-align: center; font-weight: 850; font-stretch: 70%; font-size: 19px; line-height: 1; }
  .rd-v { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rd-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; line-height: 1.35; color: var(--muted); }
  .rd-meta:empty, .rd-game.no-tv:not(.mine) .rd-meta { display: none; }
  .rd-venue { display: none; }
  .rd-tv { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 650; }
  .rd-tv svg { width: 16px; height: 16px; flex: none; }
  .rd-st { font-weight: 750; color: var(--ink); }
  .rd-st.is-live { color: var(--live); }
  .rd-chev { grid-area: chev; width: 16px; height: 16px; color: var(--muted); }
  .rd-a:hover .rd-nm { text-decoration: underline; text-underline-offset: 3px; }
  .rd-a:hover .rd-chev { color: var(--ink); }
  .rd-a:focus-visible { outline-offset: -3px; }
  .rd-tm.is-mine .rd-nm { font-weight: 800; }
  .rd-note { grid-column: 2; margin: 0 0 14px 10px; font-family: var(--serif); font-size: 15px; line-height: 1.4; color: var(--muted); }
  .rd-head { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
  .rd-head .rd-live { font-weight: 700; font-size: 14px; color: var(--live); }
  .lr-stale { margin: 0 0 12px; padding: 10px 12px; background: var(--stand); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
  @container (min-width: 460px) {
    .rd-slot { grid-template-columns: 80px minmax(0, 1fr); column-gap: 8px; }
    .rd-ko { font-size: 42px; padding: 12px 0; }
    .rd-a { grid-template-columns: minmax(0, 1fr) 172px 16px; grid-template-areas: "h meta chev" "a meta chev"; column-gap: 10px; row-gap: 6px; padding: 11px 8px 11px 12px; }
    .rd-meta, .rd-game.no-tv:not(.mine) .rd-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13.5px; }
    .rd-venue { display: block; }
    .rd-note { margin-left: 12px; }
  }
  @container (min-width: 680px) {
    .rd-slot { grid-template-columns: 92px minmax(0, 1fr); }
    .rd-ko { font-size: 46px; }
    .rd-a { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 172px 16px; grid-template-areas: "h v a meta chev"; padding: 13px 8px 13px 10px; }
    .rd-v { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; grid-area: v; text-align: center; font-weight: 650; font-size: 15px; color: var(--muted); }
    .rd-tm { font-size: 16px; gap: 9px; }
    .rd-h { justify-content: flex-end; text-align: right; }
    .rd-h .rd-nm { order: 1; }
    .rd-h .crest { order: 2; }
    .rd-h .rd-sc { order: 3; margin-left: 0; }
    .rd-w .rd-sc { order: -1; margin-left: 0; }
  }

  /* ---------- Results rows: on the season tab's dark scoreboard, and on paper in the Round-up tab ---------- */
  .sb-list, .lr-board { container-type: inline-size; }
  .sb-cols { display: grid; gap: 22px 36px; }
  .sb-day { margin: 18px 0 6px; font-weight: 750; font-stretch: 85%; font-size: 15px; line-height: 1.2; color: var(--on-board-2); }
  .sb-col > .sb-day:first-child { margin-top: 0; }
  .sb-rows { list-style: none; margin: 0; padding: 0; }
  .sb-row > a, .sb-row > .sb-a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 50px; padding: 7px 6px; border-top: 1px solid var(--board-rule); text-decoration: none; color: inherit; }
  .sb-rows .sb-row:last-child > * { border-bottom: 1px solid var(--board-rule); }
  .sb-row > a:focus-visible { outline-offset: -3px; }
  .sb-t { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 15px; line-height: 1.2; font-weight: 500; color: var(--on-board-2); }
  .sb-t .crest { width: 28px; height: 28px; --cp: 3px; }
  .sb-h { justify-content: flex-end; text-align: right; }
  .sb-t.won { font-weight: 800; color: var(--on-board); }
  .sb-row a:hover .sb-nm { text-decoration: underline; text-underline-offset: 3px; }
  .sb-sc { display: inline-flex; gap: 3px; }
  .sb-sc span { display: grid; place-items: center; width: 28px; height: 34px; border-radius: 2px; background: var(--board-plate); color: var(--on-board-plate); font-weight: 850; font-stretch: 70%; font-size: 24px; line-height: 1; }
  .sb-st { font-size: 13px; font-weight: 700; color: var(--on-board-2); text-align: center; white-space: nowrap; }
  .sb-row.mine { box-shadow: none; }
  .sb-row.mine > * { box-shadow: inset 4px 0 0 var(--on-board); background: color-mix(in srgb, var(--on-board) 9%, var(--board)); }
  @container (max-width: 419px) {
    .sb-row > a, .sb-row > .sb-a { column-gap: 8px; padding-inline: 2px; }
    .sb-t { gap: 7px; font-size: 14.5px; }
    .sb-t .crest { width: 26px; height: 26px; }
  }
  @container (min-width: 700px) { .sb-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  @media (min-width: 768px) { .sb-t { font-size: 16px; } }
  /* the Round-up tab: the same rows on paper */
  .lr-board { --board: var(--paper); --on-board: var(--ink); --on-board-2: var(--ink-2); --board-rule: var(--rule); --board-plate: var(--plate); --on-board-plate: var(--on-plate); }
  .lr-board .sb-day { color: var(--ink-2); }
  .lr-quiet, .gw-quiet { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

  /* ---------- League tables drawn by live.js (.league comes from components.css) ---------- */
  .tr-live > * { background: color-mix(in srgb, var(--live) 7%, var(--paper)); }
  .tbl-livedot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--live); vertical-align: 1px; }
  .league .club-in { display: flex; align-items: center; gap: 8px; }
  .league-mini .club { width: auto; }
  [data-live-upd]:not(:empty) { display: block; margin-bottom: 4px; color: var(--ink-2); font-weight: 600; }

  /* ---------- News lists (news.js): Newsreader headlines, then the source and the time on one line ---------- */
  .hl-list { list-style: none; margin: 0; padding: 0; }
  .hl { padding: 13px 0; border-top: 1px solid var(--rule); }
  .hl a { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--ink); text-decoration: none; }
  .hl a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .hl-m { margin: 5px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 13px; line-height: 1.3; color: var(--muted); }
  .hl-src { font-weight: 700; color: var(--ink-2); }
  .hl.mine { box-shadow: inset 4px 0 0 var(--ink); padding-left: 14px; }
  .hl-empty { padding: 16px 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
  .hl-empty .link-btn { margin-left: 6px; color: var(--ink); }
  .hl-sk { display: block; height: 14px; margin: 4px 0; border-radius: 2px; background: var(--stand); }
  .hl-sk.s { width: 30%; height: 11px; }
  .nw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
  .nw-head .nw-thread { margin-left: auto; font-weight: 700; color: var(--ink); }
  .nw-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
  .nw-chip { min-height: 36px; padding: 6px 13px; border: 0; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink); font-weight: 650; font-size: 14px; cursor: pointer; }
  .nw-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .nw-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
  .ph ~ main [data-news] .hl-list { padding: 0 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; }
  .ph ~ main [data-news] .hl:first-child { border-top: 0; }

  /* ---------- Club and league fixture lists (fixtures.js): month plates, dates and times in Archivo ---------- */
  .fx-list { margin-top: 12px; }
  .fx-month { margin: 18px 0 0; padding: 8px 12px; background: var(--plate); color: var(--on-plate); font-weight: 750; font-stretch: 85%; font-size: 15px; line-height: 1.2; }
  .fx-list .fx-month:first-child { margin-top: 0; }
  .fx-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px minmax(0, 1fr) minmax(0, 150px); align-items: center; gap: 10px; padding: 11px 8px; border-bottom: 1px solid var(--rule); }
  .fx-open { cursor: pointer; }
  .fx-open:hover, .fx-row.is-sel { background: var(--stand); }
  .fx-row.is-live { background: color-mix(in srgb, var(--live) 7%, var(--paper)); }
  .fx-dt { display: flex; flex-direction: column; line-height: 1.25; font-size: 13.5px; color: var(--ink-2); }
  .fx-dt b { color: var(--ink); font-weight: 850; font-stretch: 70%; font-size: 21px; line-height: 1.05; }
  .fx-comp { margin-top: 3px; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ink-2); }
  .fx-side { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .fx-side.h { justify-content: flex-end; text-align: right; }
  .fx-nm { min-width: 0; font-weight: 650; font-size: 15.5px; line-height: 1.25; color: var(--ink); }
  a.fx-nm { text-decoration: none; }
  a.fx-nm:hover { text-decoration: underline; text-underline-offset: 3px; }
  .fx-row .crest, .fx-logo { width: 24px; height: 24px; flex: none; object-fit: contain; }
  .fx-v { text-align: center; font-weight: 650; font-size: 14px; color: var(--muted); }
  .fx-sc { justify-self: center; padding: 3px 7px 2px; border-radius: 2px; background: var(--plate); color: var(--on-plate); font-weight: 850; font-stretch: 70%; font-size: 18px; line-height: 1; white-space: nowrap; }
  .fx-sc.is-live { background: var(--live); color: #FFFFFF; }
  .fx-bc { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; font-size: 13.5px; line-height: 1.3; text-align: right; }
  .fx-tv { font-weight: 650; color: var(--ink-2); }
  .fx-rd { display: none; }
  .fx-vn { color: var(--muted); overflow-wrap: anywhere; }
  .fx-ft, .fx-min { justify-self: end; font-weight: 750; font-size: 13.5px; color: var(--ink-2); }
  .fx-min { display: inline-flex; align-items: center; gap: 5px; color: var(--live); }
  .fx-min .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
  .fx-res { justify-self: end; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; font-weight: 800; font-size: 13px; color: var(--on-form); }
  .r-W { background: var(--win); } .r-D { background: var(--draw); } .r-L { background: var(--loss); }
  .fx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 14px; }
  .fx-filters { display: flex; flex-wrap: wrap; gap: 6px; }
  .fx-chip { min-height: 36px; padding: 6px 13px; border: 0; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink); font-weight: 650; font-size: 14px; cursor: pointer; }
  .fx-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .fx-chip.on { background: var(--ink); color: var(--paper); box-shadow: none; }
  .fx-tz { margin-left: auto; }
  .fx-tzg { display: inline-flex; padding: 2px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink); }
  .fx-tzb { min-height: 34px; padding: 4px 12px; border: 0; border-radius: 3px; background: none; color: var(--ink); font-weight: 650; font-size: 14px; cursor: pointer; }
  .fx-tzb.on { background: var(--ink); color: var(--paper); }
  .fx-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 0; }
  .fx-gt { margin: 0; padding: 0; border: 0; font-weight: 850; font-stretch: 75%; font-size: 22px; line-height: 1.1; }
  .fx-jump { font-weight: 650; font-size: 15px; color: var(--ink); }
  .fx-detail { margin-top: 12px; }
  .fx-loading, .fx-none { padding: 14px 0; font-size: 15px; color: var(--muted); }
  .mw-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 0; padding: 0 0 10px; border-bottom: 2px solid var(--ink); }
  .mw-nav b { font-weight: 850; font-stretch: 75%; font-size: 24px; }
  .mw-nav button { width: 44px; height: 44px; border: 0; border-radius: 4px; background: none; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
  .mw-nav button:hover:not(:disabled) { background: var(--stand); }
  .mw-nav button:disabled { opacity: .35; cursor: default; }
  .mw-body { margin-top: 0; }
  /* On a phone each game stacks: the date and time on the left, the two clubs one above the other, the score beside
     them, and the channel and ground underneath, so no club name is ever broken in the middle. */
  @media (max-width: 560px) {
    .fx-row { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "dt h sc" "dt a sc" "dt bc bc"; gap: 4px 10px; padding: 11px 4px; }
    .fx-dt { grid-area: dt; align-self: start; }
    .fx-dt b { font-size: 19px; }
    .fx-dow { display: none; }
    .fx-side.h { grid-area: h; flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
    .fx-side.a { grid-area: a; }
    .fx-v { display: none; }
    .fx-sc { grid-area: sc; align-self: center; }
    .fx-bc, .fx-ft, .fx-min, .fx-res { grid-area: bc; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; justify-self: start; gap: 2px 12px; text-align: left; }
    .fx-res { grid-area: sc; align-self: center; justify-self: end; }
    .fx-nm { font-size: 15px; overflow-wrap: normal; }
    .fx-row .crest, .fx-logo { width: 22px; height: 22px; }
    .fx-side { gap: 8px; }
  }
}
}

@layer tc {
  /* ---------- The Match Centre's game switcher (live.js) and the Round-up's lines ---------- */
  .mc-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
  .mc-tabs::-webkit-scrollbar { display: none; }
  .mc-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink); font-weight: 650; cursor: pointer; }
  .mc-tab:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .mc-tab.on { background: var(--stand); box-shadow: inset 0 0 0 2px var(--ink); }
  .mc-tab .mt-cr { display: inline-flex; gap: 4px; }
  .mc-tab .mt-cr .crest { width: 20px; height: 20px; }
  .mc-tab .mt-sc { font-weight: 850; font-stretch: 75%; font-size: 16px; }
  .mc-tab .mt-live { display: inline-flex; align-items: center; gap: 4px; font-weight: 750; font-size: 13px; color: var(--live); }
  .mc-tab .mt-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
  .mc-tab .mt-ft { font-weight: 700; font-size: 13px; color: var(--muted); }
  .mc-detail { margin-top: 12px; }
  .lr-loading { padding: 14px 0; font-size: 15px; color: var(--muted); }
  .lr-dek { margin: 0 0 12px; max-width: 34em; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
}

/* ===== components-home-strip.css ===== */
/* ==========================================================================
   The contents bar (redesign Phase 1, Home lane; the homepage, and any page with tabs that adopts it): a page's tabs as the mockup's sticky
   contents strip (work2/shared.css "Section strip"). It is the one sticky bar on the page; the header is not sticky.
     <nav class="cbar" id="nav" aria-label="..."><div class="wrap"><ul><li><a data-tab="x" href="..." aria-current="true">
   It must be a direct child of <main>, so it sticks for the whole page. The page's own tab router sets aria-current;
   assets/sectnav.js fades the edges that have more tabs to scroll to, keeps the current tab in view, and publishes
   the bar's height as --strip-h (the round's kick-off times stick under it, and anchors scroll clear of it).
   The current tab carries a 3px ink bar, the same mark as the reader's club in the header strip.
   ========================================================================== */
@layer tc {
  .cbar { position: sticky; top: 0; z-index: 6; background: var(--paper); border-block: 1px solid var(--rule); }
  .cbar ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cbar ul::-webkit-scrollbar { display: none; }
  .cbar li { flex: none; }
  .cbar a { display: block; padding: 13px 10px 10px; border-bottom: 3px solid transparent; color: var(--ink); font-weight: 750; font-size: 15px; line-height: 1.4; text-decoration: none; white-space: nowrap; outline-offset: -3px; }
  .cbar li:first-child a { padding-left: 0; }
  .cbar a[aria-current] { border-bottom-color: var(--ink); }
  .cbar a:hover { text-decoration: underline; text-underline-offset: 4px; }
  @media (max-width: 399px) { .cbar a { padding: 13px 8px 10px; font-size: 14.5px; } }
  @media (min-width: 768px) { .cbar a { padding: 14px 14px 11px; font-size: 16px; } }
  /* A soft edge where more tabs wait; a mask, not a colour. */
  .cbar.fade-r ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .cbar.fade-l ul { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
  /* From 1280px the header's own row carries the same eight tabs (build/chrome/header.cjs NAV, marked by the
     homepage router with aria-current), so the contents bar would repeat them: it steps aside there. Below 1280px the
     header keeps them in its menu, and the bar stays (compact pass, 4 October 2026). */
  @media (min-width: 1280px) { main.home > .cbar { display: none; } }
  .cbar.fade-l.fade-r ul { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
}

/* ===== components-home-tabs.css ===== */
/* ==========================================================================
   The homepage's other tabs (redesign Phase 1, Home lane): Round-up, Match Centre, Fixtures & Table, News, Fan Zone,
   Stats and Clubs keep their content and take the programme's look. Each section is the template the owner set in
   August (heading, one line of text, the content in one panel, then a separator), drawn with decision 9's thick ink
   rule above the heading instead of the coloured kicker. Labels are sentence case, never spaced capitals; nothing
   lifts on hover; every list sits in one panel with thin dividers.
   ========================================================================== */
@layer tc {
  /* ---------- the section template ---------- */
  main.home .tab-in { padding-bottom: 8px; }
  /* compact pass (4 October 2026): tighter on phones; a section may sit in a .tab-pair (two side by side from 1100px) */
  main.home :is(.tab-in, .tab-pair) > section { padding-top: 28px; }
  main.home :is(.tab-in, .tab-pair) > section > h2, main.home .tab-in .news-head h2 { margin: 0; padding: 8px 0 0; border-top: 4px solid var(--ink); font-weight: 850; font-stretch: 75%; font-size: 24px; line-height: 1.05; letter-spacing: normal; }
  main.home :is(.tab-in, .tab-pair) > section > .lead, main.home .tab-in .news-head + .lead { margin: 4px 0 12px; max-width: 34em; font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
  main.home :is(.tab-in, .tab-pair) > section > .lead a { color: var(--ink); font-family: var(--display); font-weight: 650; }
  main.home :is(.tab-in, .tab-pair) > section > h2 + :not(.lead) { margin-top: 12px; }
  @media (min-width: 768px) {
    main.home :is(.tab-in, .tab-pair) > section { padding-top: 40px; }
    main.home :is(.tab-in, .tab-pair) > section > h2, main.home .tab-in .news-head h2 { font-size: 30px; }
    main.home :is(.tab-in, .tab-pair) > section > .lead, main.home .tab-in .news-head + .lead { font-size: 17px; }
  }
  main.home .sec-panel { padding: 12px 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; }
  @media (min-width: 768px) { main.home .sec-panel { padding: 16px 18px; } }
  main.home .sec-panel > :first-child { margin-top: 0; }
  main.home .note, main.home .tbl-note, main.home .mc-hint, main.home .ch-foot, main.home .news-foot, main.home .cl-note { margin: 12px 0 0; max-width: 62em; font-size: 14px; line-height: 1.5; color: var(--muted); }
  main.home .ch-foot a { color: var(--ink); font-weight: 650; }

  /* ---------- Match Centre ---------- */
  main.home .wl-bar { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
  main.home .wl-grp { padding: 14px 16px; border-top: 1px solid var(--rule); }
  main.home .wl-grp:first-child { border-top: 0; }
  main.home .wl-lbl { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 750; font-size: 15px; color: var(--ink); }
  main.home .wl-lbl svg { width: 18px; height: 18px; flex: none; }
  main.home .wl-links { display: flex; flex-direction: column; }
  main.home .wl-link { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--rule); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
  main.home .wl-link:first-child { border-top: 0; }
  main.home .wl-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  main.home .wl-link svg { width: 14px; height: 14px; margin-left: auto; flex: none; color: var(--muted); }
  @media (min-width: 640px) { main.home .wl-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } main.home .wl-grp { border-top: 0; border-left: 1px solid var(--rule); } main.home .wl-grp:first-child { border-left: 0; } }
  main.home .wl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
  @media (min-width: 900px) { main.home .wl-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; padding: 16px 18px; } }
  main.home .wl-gh { margin: 0 0 4px; font-weight: 800; font-stretch: 85%; font-size: 16px; line-height: 1.25; color: var(--ink); }
  main.home .wl-list { list-style: none; margin: 0; padding: 0; }
  main.home .wl-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
  main.home .wl-list li:first-child a { border-top: 0; }
  main.home .wl-list b { grid-column: 1; font-weight: 700; font-size: 15px; line-height: 1.25; }
  main.home .wl-list span { grid-column: 1; font-size: 13px; line-height: 1.3; color: var(--muted); }
  main.home .wl-list .wl-ext { grid-column: 2; grid-row: 1; width: 10px; height: 10px; color: var(--muted); }
  main.home .wl-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
  main.home .wl-all > .lead { font-family: var(--display); font-size: 15px; }
  main.home .mc-round-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  main.home .mc-tbl-h { margin: 0 0 8px; font-weight: 800; font-size: 17px; }
  @media (min-width: 900px) { main.home .mc-round-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
  main.home .mj2 { padding: 0; }
  main.home .mj2-phase { padding: 20px 0 0; margin-top: 20px; border-top: 1px solid var(--rule); }
  main.home .mj2-phase.mj2-first { margin-top: 4px; padding-top: 0; border-top: 0; }
  main.home .mj2-h { margin: 0 0 12px; font-weight: 800; font-size: 18px; line-height: 1.25; }
  main.home .mj2-sub { display: block; margin-top: 2px; font-weight: 500; font-size: 15px; color: var(--muted); }
  main.home .mj2-posts { margin-top: 14px; border-top: 1px solid var(--rule); }
  main.home .mj2-post { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
  main.home .mj2-post:hover .mj2-pt { text-decoration: underline; text-underline-offset: 3px; }
  main.home .mj2-ico { flex: none; width: 42px; height: 30px; display: grid; place-items: center; border-radius: 3px; background: var(--stand); font-weight: 800; font-stretch: 85%; font-size: 12px; color: var(--ink-2); }
  main.home .mj2-pt { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: 15px; }
  main.home .mj2-tag { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
  main.home .mj2-ext { flex: none; width: 14px; height: 14px; color: var(--muted); }
  main.home .qref { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
  main.home .qref-col { min-width: 0; padding: 14px 16px; border-top: 1px solid var(--rule); }
  main.home .qref-col:first-child { border-top: 0; }
  @media (min-width: 760px) { main.home .qref.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } main.home .qref-col { border-top: 0; border-left: 1px solid var(--rule); } main.home .qref-col:first-child { border-left: 0; } }
  main.home .qref-h { margin-bottom: 4px; font-weight: 750; font-size: 15px; color: var(--ink); }
  main.home .qref-list { list-style: none; margin: 0; padding: 0; }
  main.home .qref-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
  main.home .qref-list li:first-child .qref-row { border-top: 0; }
  main.home .qref-row:hover .qref-nm { text-decoration: underline; text-underline-offset: 3px; }
  main.home .qref-ic { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
  main.home .qref-ic svg { width: 100%; height: 100%; }
  main.home .qref-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  main.home .qref-nm { font-weight: 700; font-size: 15px; color: var(--ink); }
  main.home .qref-sub { font-size: 13.5px; color: var(--muted); }
  main.home .qref-go { width: 13px; height: 13px; flex: none; color: var(--muted); }

  /* ---------- News ---------- */
  main.home .src-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--rule); }
  main.home .src-card { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
  main.home .src-card:hover .sc-nm { text-decoration: underline; text-underline-offset: 3px; }
  main.home .sc-ico { flex: none; width: 38px; height: 28px; display: grid; place-items: center; border-radius: 3px; background: var(--stand); font-weight: 800; font-stretch: 85%; font-size: 12px; color: var(--ink-2); }
  main.home .sc-tx { display: flex; flex-direction: column; min-width: 0; }
  main.home .sc-nm { font-weight: 700; font-size: 15px; color: var(--ink); }
  main.home .sc-tag { font-size: 13px; color: var(--muted); }
  @media (min-width: 760px) { main.home .src-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
  main.home .news-ticker { margin: 0; }
  main.home .news-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); }
  main.home .news-item:first-child { border-top: 0; padding-top: 2px; }
  main.home .news-ico { flex: none; width: 34px; height: 28px; display: grid; place-items: center; border-radius: 3px; background: var(--stand); font-weight: 800; font-stretch: 85%; font-size: 12px; color: var(--ink-2) !important; }
  main.home .news-pill { display: none; }
  main.home .news-line { flex: 1 1 auto; min-width: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
  main.home .news-src { display: block; margin-top: 2px; font-weight: 700; font-size: 13px; color: var(--muted); }
  main.home .news-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
  main.home .news-head > div { flex: 1 1 auto; }
  main.home .news-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 15px; color: var(--ink); }
  main.home .news-more svg { width: 13px; height: 13px; }
  main.home .feedlist { margin: 0; }
  main.home .frow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
  main.home .frow:first-child { border-top: 0; padding-top: 2px; }
  main.home .frow .tx { flex: 1 1 auto; min-width: 0; font-size: 15.5px; line-height: 1.35; }
  main.home .frow .tx b { font-weight: 750; }
  main.home a.frow:hover .tx b { text-decoration: underline; text-underline-offset: 3px; }
  main.home .frow .crest { width: 30px; height: 30px; }
  main.home .news-d, main.home .fz-src { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
  main.home .fk { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
  main.home .news-fee { flex: none; min-width: 56px; text-align: right; font-weight: 850; font-stretch: 75%; font-size: 19px; color: var(--ink); }
  /* a deal on one row: crest, the player and the move, the fee; the record tag under the move (compact pass) */
  main.home .news-deals .frow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "c tx fee" "c fk fee"; column-gap: 12px; row-gap: 2px; align-items: start; padding: 10px 0; }
  main.home .news-deals .frow .crest { grid-area: c; margin-top: 2px; }
  main.home .news-deals .frow .tx { grid-area: tx; }
  main.home .news-deals .fk { grid-area: fk; justify-self: start; }
  main.home .news-deals .news-fee { grid-area: fee; align-self: center; }
  main.home .se-stories { display: grid; grid-template-columns: minmax(0, 1fr); }
  main.home .se-story { padding: 18px 0; border-top: 1px solid var(--rule); }
  main.home .se-story:first-child { border-top: 0; padding-top: 2px; }
  main.home .se-story .k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
  main.home .se-tag { font-weight: 600; color: var(--muted); }
  main.home .se-tag::before { content: "\00B7\00A0"; }
  main.home .se-story h3 { margin: 6px 0 0; font-weight: 850; font-stretch: 80%; font-size: 22px; line-height: 1.15; }
  main.home .se-story p { margin: 8px 0 0; max-width: 34em; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
  main.home .se-crests { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; }
  main.home .se-who { display: inline-flex; align-items: center; gap: 9px; }
  main.home .se-who .crest { width: 28px; height: 28px; }
  main.home .se-who .txt { display: flex; flex-direction: column; line-height: 1.2; }
  main.home .se-who b { font-weight: 750; font-size: 15px; }
  main.home .se-who .txt > span { font-size: 13.5px; color: var(--muted); }
  main.home .se-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 650; font-size: 15px; color: var(--ink); }
  main.home .se-link svg { width: 14px; height: 14px; }
  @media (min-width: 900px) { main.home .se-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } main.home .se-story:nth-child(2) { border-top: 0; padding-top: 2px; } }

  /* ---------- Fan Zone ---------- */
  main.home .fz-vsub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 16px 0 0 !important; }
  main.home .fz-vsub b { font-weight: 800; font-size: 17px; }
  main.home .fz-vsub span { font-size: 14px; color: var(--muted); }
  main.home .fz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  main.home .fz-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--rule); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
  main.home .fz-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  main.home .fz-chip svg { width: 14px; height: 14px; flex: none; color: var(--ink-2); }
  main.home .fz-grph { margin: 14px 0 4px; font-weight: 750; font-size: 15px; color: var(--ink-2); }
  main.home .fz-grph:first-child { margin-top: 0; }
  main.home .fz-panel { display: flex; flex-direction: column; }
  main.home .fz-panel .fz-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
  main.home .fz-panel .fz-row:first-child { border-top: 0; padding-top: 2px; }
  main.home .fz-row:hover .fz-nm { text-decoration: underline; text-underline-offset: 3px; }
  main.home .fz-badge, main.home .fz-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 3px; background: var(--stand); color: var(--ink-2); }
  main.home .fz-badge svg, main.home .fz-ic svg { width: 18px; height: 18px; }
  main.home .fz-abbr { font-weight: 800; font-stretch: 85%; font-size: 12px; }
  main.home .fz-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  main.home .fz-rg { font-size: 13px; font-weight: 600; color: var(--muted); }
  main.home .fz-nm { font-weight: 750; font-size: 15.5px; color: var(--ink); }
  main.home .fz-d { font-size: 14px; color: var(--ink-2); }
  main.home .fz-go, main.home .fz-ext { flex: none; color: var(--muted); }
  main.home .fz-go, main.home .fz-go svg, main.home .fz-ext svg { width: 14px; height: 14px; }
  main.home .fz-tight .fz-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  @media (min-width: 900px) { main.home .fz-tight .fz-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; } }
  main.home .fz-tight .fz-panel .fz-row, main.home .fz-tight .fz-panel .fz-row:first-child { align-items: flex-start; gap: 6px; padding: 8px 0; border-top: 1px solid var(--rule); }
  main.home .fz-tight .fz-panel .fz-row:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  @media (min-width: 900px) { main.home .fz-tight .fz-panel .fz-row:nth-child(3) { border-top: 0; padding-top: 0; } }
  main.home .fz-tight :is(.fz-badge, .fz-ic) { display: none; }
  main.home .fz-tight .fz-row > svg { width: 10px; height: 10px; flex: none; margin-top: 5px; color: var(--muted); }
  main.home .fz-tight .fz-tx { line-height: 1.25; }
  main.home .fz-tight .fz-rg { font-size: 12.5px; }
  main.home .fz-tight .fz-nm { font-size: 15px; }
  main.home .fz-tight .fz-d { margin-top: 1px; font-size: 13.5px; line-height: 1.35; }
  main.home .fz-conv .fz-grp + .fz-grp { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
  main.home .fz-conv .fz-grph { margin: 0 0 4px; font-size: 14px; }
  @media (min-width: 768px) {
    main.home .fz-conv .fz-grp { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
    main.home .fz-conv .fz-grph { margin: 0; }
    main.home .fz-conv .fz-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main.home .fz-conv .fz-panel .fz-row:nth-child(3) { border-top: 1px solid var(--rule); padding-top: 8px; }
  }
  /* the narrowest phones: an account handle (@FabrizioRomano) is one long word that a half-width column would break
     mid-word, so the accounts run one to a line there */
  @media (max-width: 359px) {
    main.home .fz-conv .fz-panel { grid-template-columns: minmax(0, 1fr); }
    main.home .fz-conv .fz-panel .fz-row:nth-child(2) { border-top: 1px solid var(--rule); padding-top: 8px; }
  }
  main.home .fz-fpl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; }
  main.home .fz-fpl-k { font-weight: 700; font-size: 14px; color: var(--ink-2); }
  main.home .fz-fpl-d { margin-top: 4px; font-weight: 850; font-stretch: 75%; font-size: 26px; line-height: 1.1; }
  main.home .fz-fpl-s { margin-top: 6px; max-width: 34em; font-family: var(--serif); font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
  main.home .fz-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 750; font-size: 15px; color: var(--ink); text-decoration: none; }
  main.home .fz-btn:hover { background: var(--stand); }
  main.home .figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
  main.home .fig { padding: 14px 14px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  main.home .fig b { display: block; font-weight: 850; font-stretch: 70%; font-size: 34px; line-height: 1; }
  main.home .fig .k { margin-top: 6px; font-weight: 750; font-size: 15px; }
  main.home .fig .d { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
  @media (min-width: 900px) { main.home .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  main.home .fz-feed { margin-top: 16px !important; }
  main.home .fz-feed .frow { align-items: flex-start; }

  /* ---------- Stats (stats.js draws the body) ---------- */
  /* sentence case, as on every other tab: stats.js's own styles set its labels in spaced capitals */
  main.home #tab-stats .stx-body * { text-transform: none !important; letter-spacing: normal !important; }
  main.home .stx-seasons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  main.home .stx-slab { font-weight: 700; font-size: 14px; color: var(--ink-2); }

  /* ---------- Clubs: the compare board ---------- */
  main.home .cl-cmp { margin-top: 4px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
  main.home .cl-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px; border-bottom: 1px solid var(--rule); }
  main.home .cl-vs { display: none; }
  main.home .cl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  main.home .cl-lab { font-weight: 700; font-size: 14px; color: var(--ink-2); }
  main.home .cl-sel { width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font-weight: 650; font-size: 15px; }
  main.home .cl-board { padding: 16px; }
  main.home .cl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
  main.home .cl-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
  main.home .cl-team.cl-away { flex-direction: row-reverse; text-align: right; }
  main.home .cl-team .crest { width: 36px; height: 36px; }
  main.home .cl-team b { display: block; font-weight: 800; font-size: 16px; line-height: 1.15; overflow-wrap: normal; }
  main.home .cl-meta { min-width: 0; }
  main.home .cl-pos { font-size: 14px; color: var(--muted); }
  main.home .cl-mid { font-weight: 650; color: var(--muted); }
  main.home .cl-verdict { margin: 16px 0 6px; padding: 12px 14px; background: var(--stand); font-family: var(--serif); font-size: 16.5px; line-height: 1.5; color: var(--ink); }
  main.home .stat { margin-top: 14px; }
  main.home .stat .l { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; color: var(--muted); }
  main.home .stat .l b { font-weight: 700; color: var(--ink); }
  main.home .stat .l b.cl-win { font-weight: 850; }
  main.home .bar { display: flex; height: 8px; overflow: hidden; border-radius: 2px; background: var(--stand); }
  main.home .bar i { height: 100%; }
  main.home .bar .h { background: var(--ink); }
  main.home .bar .a { background: var(--muted); }
}

/* ===== components-home.css ===== */
/* ==========================================================================
   The homepage as the Matchday Programme (redesign Phase 1, Home lane), from the approved mockup
   (concepts/programme/home.html, work2/home.tpl.html). Markup: build/redesign/transforms/home-*.cjs; the data-driven
   parts are drawn by assets/programme.js, the same templates build/bake-home.mjs bakes in at deploy.
   Owner's rules carried here: one filled button on the page (Called It's deep green), every other button an ink
   outline; your club marked in ink, never by a ring or the club's colour on small text; the club colours only on
   large surfaces (the big game's two blocks, the club tiles' bands); slate, never mint, in dark mode.
   Phone order is DOM order (cover, contents bar, fixtures, big game, the link to the table, Called It, the links to
   the round-up, the news and the clubs), so the round's first game sits on a 390x844 phone's first screen. Since
   4 October 2026 the table is the Fixtures & Table tab's and the results scoreboard heads the Round-up tab; from 1024px the big game moves into the cover's right
   column (the inline "fg-slot" script moves the one element, so focus order follows what is seen).
   ========================================================================== */
@layer tc {
  /* ---------- The page's own defaults, at no specificity, so every component rule wins: the old homepage reset
     every margin, and its links take the text colour (the old inline styles did both). ---------- */
  :where(main.home, .home-close) :where(*) { margin: 0; }
  :where(main.home, .home-close) a { color: inherit; }
  :where(main.home) img { max-width: 100%; }
  /* an icon that no component sizes stays the size of its text, never the width of the page */
  :where(main.home, .home-close) svg:not([width]) { width: 1em; height: 1em; }

  /* ---------- Tabs: main[data-tab] says which is open; the cover belongs to the season tab ---------- */
  main.home .tab { display: none; }
  main.home[data-tab="season"] #tab-season, main.home[data-tab="roundup"] #tab-roundup, main.home[data-tab="matchcentre"] #tab-matchcentre,
  main.home[data-tab="fixtures"] #tab-fixtures, main.home[data-tab="news"] #tab-news, main.home[data-tab="fanzone"] #tab-fanzone,
  main.home[data-tab="stats"] #tab-stats, main.home[data-tab="clubs"] #tab-clubs { display: block; }
  main.home:not([data-tab="season"]) .pg-cover { display: none; }
  main.home [data-preseason] { display: none; }

  /* ---------- The cover: the round's title, its dates and your club ---------- */
  .pg-cover-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding-top: 18px; padding-bottom: 20px; }
  .pg-cover-main { min-width: 0; container-type: inline-size; }
  .pg-h1 { margin: 0; font-weight: 650; font-size: 17px; line-height: 1.25; letter-spacing: normal; color: var(--ink-2); }
  .pg-h1 em { font-style: normal; }
  .pg-mw { margin: 8px 0 0 -.035em; padding: 0; border: 0; font-weight: 900; font-stretch: 62%; font-size: min(19.5cqi, 132px); line-height: .86; letter-spacing: -.01em; }
  .pg-dates { margin: 12px 0 0; font-weight: 750; font-stretch: 85%; font-size: 19px; line-height: 1.25; }
  .yc { margin-top: 18px; }
  .yc-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .yc-prompt p { margin: 0; max-width: 27em; font-size: 15px; line-height: 1.4; color: var(--muted); }
  .yc-prompt[hidden], .yc-strip[hidden] { display: none; }
  /* a reader with a saved club never sees the prompt flash before their club's line replaces it */
  html[data-club] .yc-prompt:not([hidden]) { visibility: hidden; }
  .yc-strip { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; max-width: 36em; padding: 12px 14px 12px 16px; background: var(--stand); box-shadow: inset 6px 0 0 var(--rc, var(--ink)); }
  .yc-strip .crest { width: 30px; height: 30px; margin-top: 1px; }
  .yc-line { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 550; }
  .yc-line b { font-weight: 800; }
  .yc-links { grid-column: 2; margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-weight: 650; font-size: 15px; }
  .yc-links .link-btn { font-size: 15px; color: var(--ink); }
  .pg-cover-feature:empty { display: none; }
  @media (min-width: 1024px) {
    .pg-cover-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: center; padding-top: 32px; padding-bottom: 36px; }
    .pg-h1 { font-size: 19px; }
    .pg-dates { font-size: 22px; margin-top: 16px; }
    .yc { margin-top: 26px; }
  }

  /* ---------- The big game: two painted blocks in the clubs' colours, crests on white discs ---------- */
  .fg { min-width: 0; }
  .fg-teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3px; }
  .fg-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 18px 16px 16px; background: var(--fh); color: var(--on-fh); }
  .fg-side.fg-a { background: var(--fa); color: var(--on-fa); align-items: flex-end; text-align: right; }
  .fg-disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #FFFFFF; --dk: 0; --cbg: transparent; }
  .fg-disc .crest { width: 48px; height: 48px; }
  .fg-name { margin: 0; font-weight: 850; font-stretch: 72%; font-size: 25px; line-height: 1; overflow-wrap: normal; }
  .fg-pos { margin: auto 0 0; font-weight: 650; font-size: 15px; line-height: 1.3; }
  .fg-foot { display: grid; gap: 10px; padding: 16px 16px 18px; background: var(--stand); }
  .fg-when { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .fg-ko { font-weight: 850; font-stretch: 62%; font-size: 44px; line-height: .86; letter-spacing: -.01em; }
  .fg-day { font-weight: 750; font-size: 16px; }
  .fg-txt { margin: 0; max-width: 34em; font-family: var(--serif); font-size: 17px; line-height: 1.45; }
  .fg-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; font-size: 15px; }
  .fg-meta a { font-weight: 700; color: var(--ink); }
  .fg-tv { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 650; }
  .fg-tv:empty { display: none; }
  .fg-tv svg { width: 16px; height: 16px; flex: none; }
  @media (max-width: 359px) { .fg-name { font-size: 22px; } }
  @media (min-width: 600px) {
    .fg-side { padding: 20px 20px 18px; }
    .fg-foot { padding: 18px 20px 20px; }
    .fg-name { font-size: 30px; }
    .fg-disc { width: 76px; height: 76px; }
    .fg-disc .crest { width: 56px; height: 56px; }
  }

  /* ---------- The lead: fixtures, the big game (phones), the link to the table and Called It ---------- */
  .pg-lead { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-top: 20px; }
  .pg-sec, .pg-feature-home { min-width: 0; }
  .pg-sec .sec-head { margin-bottom: 16px; }
  .pg-sec .sec-head h2 { font-size: 26px; line-height: 1; }
  .pg-sec .dek { max-width: 34em; }
  @media (min-width: 768px) { .pg-lead { row-gap: 44px; } .pg-sec .sec-head h2 { font-size: 34px; } }
  @media (min-width: 1024px) {
    .pg-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 56px; grid-template-areas: "round coupon" "round tlink"; align-items: start; padding-top: 40px; }
    .pg-round { grid-area: round; }
    .pg-lead > .pg-callit { grid-area: coupon; }
    .pg-lead > .pg-tlink { grid-area: tlink; }
    .pg-feature-home { grid-column: 1 / -1; }
    .pg-feature-home:not(:has(> .fg)) { display: none; }
  }

  /* the link to the table where it was, and the table's own lines in the Fixtures & Table tab */
  .pg-tlink.tab-xref { margin: 0; }
  #standings .tbl-note { margin-top: 12px; }
  .yc-table { margin: 16px 0 0; padding: 12px 14px 12px 16px; background: var(--stand); box-shadow: inset 5px 0 0 var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
  .yc-table[hidden] { display: none; }

  /* ---------- Called It: the Called It lane's panel (callit.css) sits in the lead's grid ---------- */
  .pg-callit { min-width: 0; }

  /* ---------- Results: the round just played on a scoreboard, the one dark band on the page (it heads the Round-up
     tab, so it starts close under the contents bar) ---------- */
  .sb { margin-top: 40px; padding: 24px 0 26px; background: var(--board); color: var(--on-board); --dk: 1; --cbg: var(--disc); }
  .sb-in { display: grid; gap: 18px; }
  .sb-head h2 { margin: 0; padding: 0; border: 0; font-weight: 850; font-stretch: 75%; font-size: 30px; line-height: 1; color: var(--on-board); }
  .sb-dek { margin: 8px 0 0; max-width: 34em; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--on-board-2); }
  .sb .more { margin-top: 14px; }
  .sb .more a { color: var(--on-board); }
  .sb :focus-visible { outline-color: var(--on-board); }
  @media (min-width: 768px) { .sb-head h2 { font-size: 36px; } .sb-dek { font-size: 18px; } }
  #tab-roundup > .sb { margin-top: 20px; }
  @media (min-width: 1100px) {
    .sb { margin-top: 64px; padding: 36px 0 40px; }
    #tab-roundup > .sb { margin-top: 32px; }
    .sb-in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: start; }
  }

  /* ---------- The round-up, the headlines and the club pages: short links to their tabs (compact pass) ---------- */
  .pg-more .tab-xref { margin: 24px 0 0; }
  .pg-clubs { margin-top: 72px; }
  /* the narrowest phones: a smaller crest so "Bournemouth" and "Nottingham" fit their tile without breaking */
  @media (max-width: 359px) { main.home .club-a { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; } main.home .club-a .crest { width: 28px; height: 28px; } main.home .club-n { font-size: 15px; } }

  /* ---------- The closing band: this round's match pages (baked at deploy) and the share button ---------- */
  .home-close { margin-top: 40px; padding: 20px 0 8px; border-top: 1px solid var(--rule); }
  @media (min-width: 768px) { .home-close { margin-top: 56px; } }
  .mw-links p { margin: 0; max-width: 62em; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
  .mw-links a { font-weight: 650; color: var(--ink); }
  .home-share { margin-top: 16px; }
}

/* ===== components-hubs-crests.css ===== */
/* Generated by build/redesign/transforms/hubs-crests.cjs from build/crests-64.json. Edit that script, not this file.
   The hubs' letter-chip crests as the real crest: the header strip's 64px files, no tile in light mode, the light disc in dark. */
.hub .crest[class*="c-"] {
  color: transparent !important; overflow: hidden; text-shadow: none;
  background-color: var(--cbg) !important; background-repeat: no-repeat !important; background-position: center !important;
  background-size: contain !important; background-origin: content-box !important;
  padding: calc(var(--dk) * 3px); border-radius: calc(50% * var(--dk)) !important; box-shadow: none;
}
.hub .crest.c-ARS { background-image: url("/assets/crests/64/ARS.webp?v=7f3acf71d8") !important; }
.hub .crest.c-AVL { background-image: url("/assets/crests/64/AVL.webp?v=0499bf4f8d") !important; }
.hub .crest.c-BHA { background-image: url("/assets/crests/64/BHA.webp?v=228e8cd678") !important; }
.hub .crest.c-BOU { background-image: url("/assets/crests/64/BOU.webp?v=72fbf4b290") !important; }
.hub .crest.c-BRE { background-image: url("/assets/crests/64/BRE.webp?v=ca6849f5ac") !important; }
.hub .crest.c-CHE { background-image: url("/assets/crests/64/CHE.webp?v=dfcab463cd") !important; }
.hub .crest.c-COV { background-image: url("/assets/crests/64/COV.webp?v=5198cc5fd7") !important; }
.hub .crest.c-CRY { background-image: url("/assets/crests/64/CRY.webp?v=eba6237fb5") !important; }
.hub .crest.c-EVE { background-image: url("/assets/crests/64/EVE.webp?v=660e433be8") !important; }
.hub .crest.c-FUL { background-image: url("/assets/crests/64/FUL.webp?v=c358d698b0") !important; }
.hub .crest.c-HUL { background-image: url("/assets/crests/64/HUL.webp?v=a8edd29504") !important; }
.hub .crest.c-IPS { background-image: url("/assets/crests/64/IPS.webp?v=3bba5a6bab") !important; }
.hub .crest.c-LEE { background-image: url("/assets/crests/64/LEE.webp?v=93f9ba0157") !important; }
.hub .crest.c-LIV { background-image: url("/assets/crests/64/LIV.webp?v=9c85262e80") !important; }
.hub .crest.c-MCI { background-image: url("/assets/crests/64/MCI.webp?v=b57ff45bc4") !important; }
.hub .crest.c-MUN { background-image: url("/assets/crests/64/MUN.webp?v=b828b6cf57") !important; }
.hub .crest.c-NEW { background-image: url("/assets/crests/64/NEW.webp?v=1aff613e22") !important; }
.hub .crest.c-NFO { background-image: url("/assets/crests/64/NFO.webp?v=cf64a2be06") !important; }
.hub .crest.c-SUN { background-image: url("/assets/crests/64/SUN.webp?v=93b09c9f8f") !important; }
.hub .crest.c-TOT { background-image: url("/assets/crests/64/TOT.webp?v=c6299f3f8f") !important; }

/* ===== components-hubs.css ===== */
/* ==========================================================================
   The 20 club hubs (Phase 1, Hubs lane: F6b and P10). Markup: build/redesign/transforms/hubs.cjs.
   Every rule is scoped under body.hub, so no other page is touched. The rules are unlayered on purpose:
   - the hubs' own old CSS now sits in @layer hub-legacy (below tc), scoped to <main>, so anything here wins;
   - the widgets inject unlayered <style> blocks after this stylesheet (match.js, fixtures.js, videos.js,
     herofix.js and the rest), so a rule here needs one more class than the widget's own to win, which the
     .hub prefix gives.
   Design truth: the approved Matchday Programme mockup. The top section is the programme cover's club panel for
   one club (decision 10): the club's solid colour with its crest on a white disc, the name and the Follow button,
   and the next league game, its countdown and the "first up" line on a stand panel beside or under it. The tabs
   are the mockup's sticky contents bar (decision 3). Sections take the ink rule above the heading, one line of
   text and one panel (decision 9). Club colour only on large surfaces, never on small text; your club is an ink
   bar; slate panels and plates in dark mode; one filled button on the page, Called It's deep green.
   ========================================================================== */

/* ---------- Frame ---------- */
.hub .hub-main { display: block; }
.hub .hub-body { padding-top: 20px; padding-bottom: 8px; }
@media (min-width: 768px) { .hub .hub-body { padding-top: 28px; } }
.hub .hub-share { margin: 8px 0 0; }

/* ---------- The top section ---------- */
.hub .club-top { margin: 0; padding: 12px 0 0; border: 0; background: none; }
@media (min-width: 768px) { .hub .club-top { padding-top: 24px; } }
.hub .ct-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto 16px auto auto auto;
  grid-template-areas: "id" "card" "cd" "also" "note" "pad" "label" "h1" "sub";
}
/* The stand panel behind the next game, drawn by the grid itself so the hero's own elements can stay in one
   [data-herofix] element in their old order (bake-seo.mjs and herofix.js find them there). */
.hub .ct-grid::before { content: ""; grid-column: 1 / -1; grid-row: card-start / pad-end; background: var(--stand); }
.hub .ct-grid:has(.se-fix[style*="none"]):has(.cd[style*="none"])::before { display: none; }
.hub .ct-hero { display: contents; }
.hub .club-top [hidden] { display: none !important; }

/* The painted block: the club's solid colour and the text colour the colour table pairs with it. */
.hub .ct-id {
  grid-area: id; position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "disc name follow";
  align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--c); color: var(--on-c);
}
/* Newcastle: the black-and-white stripes along the foot of the block, as in the line under the header. */
.hub .club-top[data-c="NEW"] .ct-id { background: repeating-linear-gradient(90deg, #1A1A1A 0 9px, #F2F3F1 9px 18px) left bottom / 100% 8px no-repeat, var(--c); padding-bottom: 28px; }
.hub .ct-disc { grid-area: disc; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; }
.hub .ct-disc img { width: 36px; height: 36px; padding: 0; background: none; border-radius: 0; object-fit: contain; }
.hub .ct-name {
  grid-area: name; margin: 0; max-width: none; color: inherit;
  font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 28px; line-height: 1; letter-spacing: -.005em;
  overflow-wrap: anywhere; text-wrap: balance;
}
.hub .ct-follow {
  grid-area: follow; justify-self: end; align-self: start;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px;
  border: 0; border-radius: 4px; background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor;
  font-family: var(--display); font-weight: 750; font-size: 15px; line-height: 1.2; cursor: pointer;
}
.hub .ct-follow:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.hub .ct-follow:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.hub .ct-follow svg { width: 17px; height: 17px; flex: none; fill: none; }
.hub .ct-follow .fl-on { display: none; }
html[data-follows] .hub .ct-follow .fl-on, .hub .ct-follow[aria-pressed="true"] .fl-on { display: inline; }
html[data-follows] .hub .ct-follow .fl-off, .hub .ct-follow[aria-pressed="true"] .fl-off { display: none; }
html[data-follows] .hub .ct-follow svg, .hub .ct-follow[aria-pressed="true"] svg { fill: currentColor; }

/* The next league game: herofix.js's card, set in the programme's type on the stand panel. */
.hub .club-top .se-fix {
  grid-area: card; position: relative; margin: 0; padding: 12px 14px 0; min-width: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); transform: none;
}
.hub .club-top .se-fix::before, .hub .club-top .se-fix::after, .hub .club-top .se-fix .on-wash { display: none; }
.hub .club-top .se-fix .hd {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px;
  margin: 0 0 10px; padding: 0; border: 0; background: none;
  font-family: var(--display); font-size: 15px; font-weight: 750; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--ink-2);
}
.hub .club-top .se-fix .hd > span:last-child { font-weight: 800; font-stretch: 85%; font-size: 19px; color: var(--ink); }
.hub .club-top .se-fix .on-live { color: var(--live); }
.hub .club-top .se-fix .g { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; padding: 0; }
.hub .club-top .se-fix .t { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; margin: 0; text-align: left; }
.hub .club-top .se-fix .g > .t:last-child { flex-direction: row-reverse; text-align: right; }
.hub .club-top .se-fix .t b { min-width: 0; font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 19px; line-height: 1.15; letter-spacing: 0; color: var(--ink); overflow-wrap: break-word; }
.hub .club-top .se-fix .t .crest, .hub .club-top .se-fix .t .hx-logo { width: 30px; height: 30px; flex: none; font-size: 0; }
.hub .club-top .se-fix .v { margin: 0; font-family: var(--display); font-weight: 650; font-size: 15px; color: var(--muted); }
.hub .club-top .se-fix .se-sc { padding: 0 4px; font-family: var(--display); font-weight: 900; font-stretch: 70%; font-size: 32px; letter-spacing: 0; color: var(--ink); }
.hub .club-top .se-fix .foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin: 10px 0 0; padding: 10px 0 0;
  border: 0; border-top: 1px solid var(--rule); background: none;
  font-family: var(--display); font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--ink-2);
}
.hub .club-top .se-fix .foot b { font-weight: 750; color: var(--ink); }

/* The countdown on plates: ink in light, slate in dark. Its labels are lowercased here; the markup keeps them. */
.hub .club-top .cd { grid-area: cd; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 14px 0; padding: 0; border: 0; background: none; }
.hub .club-top .cd .u { display: grid; justify-items: center; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hub .club-top .cd .u b {
  display: grid; place-items: center; min-width: 46px; height: 40px; padding: 0 7px; border-radius: 3px;
  background: var(--plate); color: var(--on-plate);
  font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 26px; line-height: 1;
}
.hub .club-top .cd .u span { font-family: var(--display); font-size: 13px; font-weight: 650; letter-spacing: normal; text-transform: lowercase; color: var(--ink-2); }
.hub .club-top .cd .hx-cd-live { font-size: 16px; font-weight: 750; color: var(--ink); }
.hub .club-top .cd .hx-cd-live .live-dot { background: var(--live); }
/* The line from countdown.js: shown only when a cup tie comes before the next league game, or one is live. */
.hub .ct-also { grid-area: also; margin: 0 14px; }
.hub .ct-also:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.hub .club-top .hub-note { grid-area: note; margin: 12px 16px 0; max-width: 34em; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Under the panel, on paper: the label, the title and the standfirst, as the generated pages' page head. */
.hub .club-top .ct-hero > .eyebrow {
  grid-area: label; display: block; margin: 18px 0 4px; padding: 0;
  font-family: var(--display); font-weight: 650; font-stretch: 100%; font-size: 16px; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--ink-2);
}
.hub .club-top .ct-hero > .eyebrow .dot { display: none; }
.hub .club-top .ct-hero > h1 {
  grid-area: h1; margin: 0; padding: 0; max-width: var(--col);
  font-family: var(--display); font-weight: 850; font-stretch: 72%; font-size: 28px; line-height: 1.03; letter-spacing: -.005em; color: var(--ink); text-wrap: balance;
}
.hub .club-top .ct-hero > h1 em { font-style: normal; color: inherit; }
.hub .club-top .ct-hero > p:not([class]) {
  grid-area: sub; margin: 8px 0 0; max-width: 34em;
  font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--ink-2);
}
.hub .club-top .ct-hero > p:not([class]) b, .hub .club-top .ct-hero > p:not([class]) strong { font-weight: 500; color: var(--ink); }
@media (min-width: 768px) {
  .hub .ct-id { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "disc follow" "name name"; align-items: start; padding: 22px 24px 24px; gap: 16px; }
  .hub .ct-disc { width: 84px; height: 84px; }
  .hub .ct-disc img { width: 62px; height: 62px; }
  .hub .ct-name { font-size: 48px; }
  .hub .club-top .se-fix { padding: 20px 20px 0; }
  .hub .club-top .cd, .hub .ct-also { margin-left: 20px; margin-right: 20px; }
  .hub .club-top .hub-note { margin-left: 20px; margin-right: 20px; }
  .hub .club-top .ct-hero > .eyebrow { font-size: 18px; margin-top: 30px; }
  .hub .club-top .ct-hero > h1 { font-size: 44px; }
  .hub .club-top .ct-hero > p:not([class]) { font-size: 18px; line-height: 1.5; }
  .hub .club-top .cd .u b { min-width: 54px; height: 48px; font-size: 30px; }
}
@media (min-width: 1024px) {
  .hub .ct-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto auto auto 20px auto auto auto;
    grid-template-areas: "id card" "id cd" "id also" "id note" "id pad" "label label" "h1 h1" "sub sub";
  }
  .hub .ct-grid::before { grid-column: 2; grid-row: card-start / pad-end; }
  .hub .ct-id { align-content: space-between; padding: 28px; }
  .hub .ct-disc { width: 96px; height: 96px; }
  .hub .ct-disc img { width: 72px; height: 72px; }
  .hub .ct-name { font-size: 56px; }
}
@media (min-width: 1200px) { .hub .club-top .ct-hero > h1 { font-size: 52px; } }
/* On a phone the two clubs stack, one line each, as in the programme's fixture rows, so a long name never breaks
   inside a word; the "v" stays for screen readers, and a live or final score sits to the right of both lines. */
@media (max-width: 479px) {
  .hub .club-top .se-fix .g { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h mid" "a mid"; row-gap: 8px; column-gap: 12px; }
  .hub .club-top .se-fix .g > .t:first-child { grid-area: h; }
  .hub .club-top .se-fix .g > .t:last-child { grid-area: a; flex-direction: row; text-align: left; }
  .hub .club-top .se-fix .g > .v { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hub .club-top .se-fix .g > .se-sc { grid-area: mid; align-self: center; }
}
@media (max-width: 359px) {
  .hub .ct-name { font-size: 25px; }
  .hub .club-top .cd .u b { min-width: 48px; font-size: 26px; }
  .hub .club-top .se-fix .t b { font-size: 17px; }
}

/* ---------- The contents bar: the hub's tabs, pinned to the top of the screen ---------- */
.hub .hub-tabs { position: sticky; top: 0; z-index: 20; margin: 20px 0 0; background: var(--paper); border-block: 1px solid var(--rule); }
.hub .hub-tabs ul { position: relative; display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.hub .hub-tabs ul::-webkit-scrollbar { display: none; }
.hub .hub-tabs li { flex: none; }
.hub .hub-tabs a {
  display: block; padding: 13px 10px 10px; border-bottom: 3px solid transparent;
  font-family: var(--display); font-weight: 750; font-size: 15px; line-height: 1.4; color: var(--ink); text-decoration: none; white-space: nowrap; outline-offset: -3px;
}
.hub .hub-tabs li:first-child a { padding-left: 0; }
.hub .hub-tabs a[aria-current] { border-bottom-color: var(--ink); }
.hub .hub-tabs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hub .hub-tabs.fade-r ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.hub .hub-tabs.fade-l ul { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
.hub .hub-tabs.fade-l.fade-r ul { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
@media (min-width: 768px) { .hub .hub-tabs a { padding: 14px 14px 11px; font-size: 16px; } }
@media (max-width: 399px) { .hub .hub-tabs a { padding: 13px 8px 10px; font-size: 14.5px; } }

/* ---------- Sections: the ink rule, the heading, one line of text, one panel ---------- */
.hub .tab section { margin: 0 0 28px; padding: 0; border: 0; max-width: var(--col); }
.hub .tab section:last-child { margin-bottom: 24px; }
.hub .tab section > h2, .hub .tab .fzc-head > h2 {
  margin: 0; padding: 8px 0 0; border-top: 4px solid var(--ink);
  font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 24px; line-height: 1.05; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.hub .tab section > p.lead, .hub .tab .fzc-head > p.lead, .hub .tab section > .lead {
  margin: 4px 0 12px; max-width: 34em; font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--ink-2);
}
.hub .tab section > p.lead a, .hub .tab section > .lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub .tab section > h2 + :not(.lead) { margin-top: 12px; }
@media (min-width: 768px) {
  .hub .tab section { margin-bottom: 40px; }
  .hub .tab section > h2, .hub .tab .fzc-head > h2 { font-size: 30px; }
  .hub .tab section > p.lead, .hub .tab section > .lead { font-size: 17px; }
}
.hub .tab h3 { font-family: var(--display); letter-spacing: 0; text-transform: none; }
/* One panel per section, slate in dark mode. A card inside a panel loses its own frame (no frame inside a frame). */
.hub .sec-panel, .hub .fz-panel, .hub .mj2, .hub .gref-grid, .hub .wl-bar { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; box-shadow: none; }
.hub .sec-panel { padding: 12px 14px; }
@media (min-width: 768px) { .hub .sec-panel { padding: 18px 20px; } }
.hub .hub-note, .hub .news-note, .hub .st2-foot, .hub .ad-note, .hub .st2-note { margin: 12px 0 0; max-width: 46em; font-family: var(--display); font-size: 14px; line-height: 1.5; color: var(--muted); }
.hub .st2-note .st2-dot { display: none; }
/* Small labels across the old components: sentence case in the house face, never spaced capitals, never club colour. */
.hub :is(.mcw-region, .gref-h, .fz-rg, .fz-colh, .wl-lbl, .mj2-tag, .tcv-rowhead, .tcv-ch, .gfact-l, .news-colhd .news-tag, .fk, .st2-tag, .mx-ft, .mx-live, .mx-tag, .mx-predict-h, .mx-subs h4, .stx-slab, .stx-tp-h, .stx-hero-k, .stx-h3 span, .stx-h4 span, .stx-tbl th, .champ-ey) {
  font-family: var(--display); letter-spacing: normal; text-transform: none;
}
/* Never spaced capitals (the type rules): the old components and the widgets inside the tabs set some labels in
   uppercase with letter spacing; inside the hub's tabs every label reads in sentence case. Important, because the
   widgets inject their rules after this stylesheet. */
.hub .hub-body *:not(:where(.cit-slot, .cit-slot *)) { text-transform: none !important; letter-spacing: normal !important; }
/* Your club inside a hub: on your own club's hub every row would carry the bar, so it is left off there. */
html[data-follows] .hub .hub-body .mine:not(tr) { box-shadow: none; }
html[data-follows] .hub .hub-body tr.mine > * { background: none; box-shadow: none; }

/* Buttons: an ink outline everywhere; Called It's deep green is the one filled button on the page. */
.hub :is(.se-btn, .hub-jump .se-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: 4px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
  font-family: var(--display); font-weight: 750; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.hub .se-btn:hover { background: var(--stand); }
.hub .se-btn svg { width: 16px; height: 16px; flex: none; }
.hub .hub-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.hub .se-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; background: none; border: 0; color: var(--ink); font-family: var(--display); font-weight: 650; font-size: 15px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.hub .se-link svg { width: 14px; height: 14px; flex: none; color: var(--muted); }

/* ---------- The Season ---------- */
.hub .hub-champ .champ {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px;
  border: 1px solid var(--rule); border-left: 6px solid var(--gold); border-radius: 4px; background: var(--panel);
}
.hub .champ-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--gold-ink); background: none; color: var(--gold-ink); }
.hub .champ-ico svg { width: 24px; height: 24px; }
.hub .champ-ey { display: block; font-size: 14px; font-weight: 750; color: var(--gold-ink); }
.hub .champ-h { margin: 2px 0 4px; padding: 0; border: 0; font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 24px; line-height: 1.05; color: var(--ink); }
.hub .champ-d { margin: 0; max-width: 34em; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
/* Called It: the Season tab's section.hub-ci holds the club slot and the band follows </main>. Both are the Called
   It lane's components (assets/css/callit.css, the cit- classes), so nothing here styles them. */
/* Figures: last season's numbers in big condensed type on hairline cells. */
.hub .hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 0; margin: 0; }
.hub .hub-stat { padding: 12px 12px 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; text-align: left; box-shadow: none; }
.hub .hub-stat b { display: block; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 34px; line-height: 1; color: var(--ink); }
.hub .hub-stat span { display: block; margin-top: 4px; font-size: 14px; font-weight: 650; color: var(--muted); }
/* Rows: the summer's business, one line each with a plain tag. */
.hub .feedlist { display: block; margin: 0; }
.hub .frow { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "fk tx" ". tm"; gap: 4px 12px; align-items: baseline; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; color: var(--ink); text-decoration: none; }
.hub .frow:first-child { border-top: 0; padding-top: 2px; }
.hub .frow:hover .tx b { text-decoration: underline; text-underline-offset: 3px; }
.hub .frow .fk, .hub .news-tag, .hub .st2-tag {
  display: inline-block; padding: 2px 6px 1px; border-radius: 2px; background: none; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--ink-2);
  font-family: var(--display); font-size: 13px; font-weight: 750; line-height: 1.25; white-space: nowrap;
}
.hub .frow .fk { grid-area: fk; }
.hub .frow .tx { grid-area: tx; font-size: 16px; line-height: 1.4; color: var(--ink); }
.hub .frow .tx b { font-weight: 750; }
.hub .frow .sc { font-family: var(--display); font-weight: 750; color: var(--ink); background: none; }
.hub .frow time { grid-area: tm; font-family: var(--display); font-size: 13px; color: var(--muted); }
@media (min-width: 640px) { .hub .frow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "fk tx tm"; } }

/* ---------- Match Centre ---------- */
.hub .wl-bar { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.hub .wl-grp { padding: 14px 16px; border: 0; border-top: 1px solid var(--rule); }
.hub .wl-grp:first-child { border-top: 0; }
.hub .wl-lbl { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 750; color: var(--ink); }
.hub .wl-lbl svg { width: 17px; height: 17px; color: var(--ink-2); }
.hub .wl-link { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-family: var(--display); font-weight: 650; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.hub .wl-link:last-child { border-bottom: 0; }
.hub .wl-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub .wl-link svg { margin-left: auto; width: 14px; height: 14px; color: var(--muted); opacity: 1; }
@media (min-width: 680px) { .hub .wl-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hub .wl-grp { border-top: 0; border-left: 1px solid var(--rule); } .hub .wl-grp:first-child { border-left: 0; } }

/* The live match (match.js, the Home lane's renderer), restyled for the hub only. */
.hub #main .mx-card { border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.hub #main .mx-switch { gap: 0; margin: 14px 16px 0; padding: 2px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--ink); }
.hub #main .mx-sw { min-height: 40px; padding: 6px 12px; border: 0; border-radius: 3px; background: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 14.5px; }
.hub #main .mx-sw.is-on { background: var(--ink); color: var(--paper); }
.hub #main .mx-sw:not(.is-on):hover { background: var(--stand); color: var(--ink); }
.hub #main .mx-name { font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 17px; color: var(--ink); }
.hub #main .mx-score > b { font-family: var(--display); font-weight: 900; font-stretch: 70%; font-size: 48px; color: var(--ink); }
.hub #main .mx-score > span, .hub #main .mx-vs { font-family: var(--display); color: var(--muted); }
.hub #main .mx-live, .hub #main .mx-ft, .hub #main .mx-ko { font-size: 14px; font-weight: 750; }
.hub #main .mx-ft, .hub #main .mx-ko { color: var(--ink-2); }
.hub #main .mx-meta { font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.hub #main .mx-tag { padding: 2px 6px 1px; border-radius: 2px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 13px; font-weight: 750; }
.hub #main .mx-cbtn, .hub #main .mx-cbtn.watch, .hub #main .mx-cbtn.listen { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--display); font-weight: 750; font-size: 15px; }
.hub #main .mx-cbtn:hover { background: var(--stand); color: var(--ink); }
.hub #main .mx-cnote { font-size: 14px; color: var(--ink-2); }
.hub #main .mx-tabs { gap: 0; padding: 4px 16px 0; border-bottom: 1px solid var(--rule); justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.hub #main .mx-tab { flex: none; padding: 12px 10px 9px; border-bottom: 3px solid transparent; font-family: var(--display); font-weight: 750; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.hub #main .mx-tab:first-child { padding-left: 0; }
.hub #main .mx-tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.hub #main .mx-panel { padding: 16px; }
.hub #main .mx-empty { font-size: 15px; color: var(--ink-2); }
/* The timeline as the programme's phone timeline: one column of minute, crest, icon and sentence. */
.hub #main .mx-tl { display: block; }
.hub #main .mx-tl::before { display: none; }
.hub #main .mx-ev, .hub #main .mx-ev.h, .hub #main .mx-ev.a {
  display: grid; grid-template-columns: 52px 20px 18px minmax(0, 1fr); column-gap: 9px; align-items: start;
  width: 100%; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule); text-align: left; flex-direction: row;
}
.hub #main .mx-ev:last-child { border-bottom: 0; }
.hub #main .mx-emin, .hub #main .mx-ev.h .mx-emin { min-width: 0; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 22px; line-height: 1.1; color: var(--ink); text-align: left; }
.hub #main .mx-ec { display: block; width: 20px; height: 20px; margin-top: 2px; object-fit: contain; }
.hub #main .mx-ei { margin-top: 3px; }
.hub #main .mx-ei.goal { color: var(--ink); }
.hub #main .mx-ei.yel { background: var(--card-y); box-shadow: inset 0 0 0 1px var(--card-edge); }
.hub #main .mx-ei.red, .hub #main .mx-ei.og { background: var(--card-r); box-shadow: inset 0 0 0 1px var(--card-edge); }
.hub #main .mx-ei.var { color: var(--ink-2); border-color: var(--ink-2); }
.hub #main .mx-etx { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.hub #main .mx-etx b { font-weight: 750; }
/* Line-ups: the shapes stay, drawn in ink on a quiet panel instead of a green pitch. */
.hub #main .mx-pitch { background: var(--stand); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 4px; }
.hub #main .mx-pitch-mark::before { background: var(--rule); }
.hub #main .mx-pitch-mark::after { border-color: var(--rule); }
.hub #main .mx-no { background: var(--plate) !important; color: var(--on-plate) !important; border: 0 !important; box-shadow: none; font-family: var(--display); }
.hub #main .mx-no[style*="#fff"] { background: var(--paper) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink); }
.hub #main .mx-pn { color: var(--ink); text-shadow: none; font-size: 11px; font-weight: 700; }
.hub #main .mx-forms { font-size: 14px; color: var(--ink-2); }
.hub #main .mx-forms b { color: var(--ink); }
.hub #main .mx-subs h4 { font-size: 14px; font-weight: 750; color: var(--ink-2); }
.hub #main .mx-subs p { font-size: 15px; color: var(--ink); }
.hub #main .mx-chip { background: var(--stand); font-size: 13px; }
/* Stats: the numbers in condensed figures, this side in ink and the other in grey. */
.hub #main .mx-stat-top { font-size: 15px; }
.hub #main .mx-stat-top b { font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 18px; }
.hub #main .mx-stat-top span { font-size: 14px; font-weight: 650; color: var(--ink-2); }
.hub #main .mx-bar { gap: 2px; height: 8px; border-radius: 4px; background: var(--stand-2); }
.hub #main .mx-bar .h { background: var(--ink); }
.hub #main .mx-bar .a { background: var(--muted); opacity: 1; }
.hub #main .mx-predict { border-bottom: 1px solid var(--rule); }
.hub #main .mx-predict-h { font-size: 15px; font-weight: 750; color: var(--ink); }
.hub #main .mx-pbar .h, .hub #main .mx-cmpbar .h { background: var(--ink); }
.hub #main .mx-pbar .d { background: var(--draw); }
.hub #main .mx-pbar .a, .hub #main .mx-cmpbar .a { background: var(--muted); }
.hub #main .mx-pleg, .hub #main .mx-cmpl, .hub #main .mx-cmpv, .hub #main .mx-pfine { font-family: var(--display); color: var(--ink-2); }
.hub #main .mx-pleg b { font-family: var(--display); }
.hub #main .mx-h2h-w b { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 32px; }
.hub #main .mx-h2h-w span, .hub #main .mx-h2h-line, .hub #main .mx-h2h-cp { font-size: 13px; color: var(--ink-2); }
.hub #main .mx-h2h-row { border-top: 1px solid var(--rule); font-size: 14px; }
.hub #main .mx-h2h-dt { font-family: var(--display); font-size: 13px; color: var(--ink-2); }
.hub #main .mx-h2h-sc { font-family: var(--display); font-weight: 800; }

/* The matchday journey: one panel, phases parted by hairlines, video rows (videos.js) in the house type. */
.hub .mj2 { --mjhr: var(--rule); padding: 16px; }
@media (min-width: 768px) { .hub .mj2 { padding: 20px; } }
.hub .mj2-h { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); }
.hub .mj2-h::before { display: none; }
.hub .mj2-sub { display: block; margin: 2px 0 0; font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--ink-2); }
.hub .mj2-post { padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.hub .mj2-post:hover .mj2-pt { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub .mj2-ico { background: var(--stand); color: var(--ink); font-family: var(--display); font-size: 12px; font-weight: 800; border-radius: 3px; }
.hub .mj2-pt { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.hub .mj2-tag { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.hub .mj2-ext { color: var(--muted); }
/* videos.js (the Home lane's) draws its own calm cards; only the Fan Zone's rounder thumbnails come back to 4px. */
.hub #main .tcv-thumb { border-radius: 4px; }

/* ---------- Fixtures: the fixtures widget (fixtures.js, the Home lane's) in one panel, then the hub's own links ---------- */
.hub .sec-panel > p.seo-pre, .hub .sec-panel + p.seo-pre { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); max-width: 46em; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.hub p.seo-pre a, .hub .seo-pre a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub [data-fixtures] > .seo-pre h3, .hub [data-squad] > .seo-pre h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }

/* The fixtures list itself (fixtures.js) and the news rows (news.js) take the Home lane's shared row styles
   (assets/css/components-home-rows.css), so they read the same here as on the homepage; nothing here restyles them. */

/* ---------- News ---------- */
.hub .news-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hub .news-col { padding: 0; border: 0; background: none; }
.hub .news-col + .news-col { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (min-width: 680px) {
  .hub .news-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .hub .news-col + .news-col { margin-top: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--rule); }
}
.hub .news-colhd { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.hub .news-colhd h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink); }
.hub .news-move { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.hub .news-move .nm b { display: block; font-weight: 750; font-size: 16px; color: var(--ink); }
.hub .news-move .nm span { display: block; font-size: 14px; color: var(--ink-2); }
.hub .news-fee { font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 17px; color: var(--ink); white-space: nowrap; }
/* Where to get confirmed team news: a list of accounts instead of a ring of circles. */
.hub .fzx-circles.wtg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; justify-content: stretch; }
.hub .fzx-circles.wtg .fzx-c { display: flex; flex-direction: row; align-items: center; gap: 12px; width: auto; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; text-align: left; }
.hub .fzx-circles.wtg .fzx-c:first-child { border-top: 0; padding-top: 2px; }
@media (min-width: 680px) { .hub .fzx-circles.wtg { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .hub .fzx-circles.wtg .fzx-c:nth-child(2) { border-top: 0; padding-top: 2px; } }
.hub .fzx-badge { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--plate); color: var(--on-plate); box-shadow: none; }
.hub .fzx-badge svg { width: 20px; height: 20px; fill: currentColor; }
.hub .fzx-ab { font-family: var(--display); font-size: 12px; font-weight: 800; color: inherit; }
.hub .fzx-name { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); }
.hub .fzx-c:hover .fzx-name { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Stats: the static sections (the live panel is stats.js, the Home lane's) ---------- */
.hub .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: none; border: 0; border-radius: 0; overflow: visible; }
.hub .tbl th, .hub .tbl td { height: 40px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: right; white-space: nowrap; color: var(--ink); }
.hub .tbl thead th { height: 34px; font-size: 13px; font-weight: 650; color: var(--muted); border-bottom: 2px solid var(--ink); text-transform: none; letter-spacing: normal; font-family: var(--display); }
.hub .tbl .l, .hub .tbl th.l, .hub .tbl td.l { text-align: left; }
.hub .tbl .num, .hub .tbl td.num { font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 18px; }
.hub .tbl .pos { font-weight: 650; }
.hub .st2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.hub .st2-card, .hub .hi-stat { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "b s" "b e"; gap: 2px 14px; align-items: baseline; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; text-align: left; }
.hub .st2-card:first-child, .hub .hi-stat:first-child { border-top: 0; padding-top: 2px; }
.hub .st2-card b, .hub .hi-stat b { grid-area: b; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 30px; line-height: 1; color: var(--ink); }
.hub .st2-card span, .hub .hi-stat span { grid-area: s; font-size: 16px; font-weight: 750; color: var(--ink); }
.hub .st2-card em, .hub .hi-stat em { grid-area: e; font-family: var(--serif); font-style: normal; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hub .hi-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 760px) {
  .hub .st2-grid.st2-records, .hub .hi-cab { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .hub .st2-grid.st2-records .st2-card:nth-child(2), .hub .hi-cab .hi-stat:nth-child(2) { border-top: 0; padding-top: 2px; }
}
.hub .st2-links { display: grid; gap: 0; }
.hub .st2-links .se-link { padding: 9px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.hub .st2-links .se-link:first-child { border-top: 0; }
.hub .st2-links .se-link:hover { text-decoration: underline; }
.hub #main .stx-seg { padding: 2px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 2px var(--ink); }
.hub #main :is(.stx-season, .stx-cseason) { min-height: 40px; border-radius: 3px; font-family: var(--display); color: var(--ink); }
.hub #main :is(.stx-season, .stx-cseason).on { background: var(--ink); color: var(--paper); box-shadow: none; }
.hub #main .stx-slab { font-size: 14px; font-weight: 650; color: var(--ink-2); }
.hub #main .stx-tp-h, .hub #main .stx-hero-k { font-size: 14px; font-weight: 750; color: var(--ink); }
.hub #main :is(.stx-tp, .stx-hero, .stx-h2hsum, .stx-tblwrap, .stx-h2hlist) { border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); box-shadow: none; }
.hub #main .stx-tbl th { font-size: 13px; font-weight: 650; color: var(--muted); border-bottom: 2px solid var(--ink); }
.hub #main .stx-tbl td.num, .hub #main .stx-tbl td.pts, .hub #main .stx-sl b, .hub #main .stx-h2hnums .n, .hub #main .stx-hero-f .n { font-family: var(--display); }
.hub #main .stx-lbtab, .hub #main .stx-advtab { border: 0; border-radius: 4px; background: none; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--display); }
.hub #main .stx-lbtab.on, .hub #main .stx-advtab.on { background: var(--ink); color: var(--paper); }
.hub #main .stx-teamsel { border: 0; border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--display); }
.hub #main .stx-fm i { background: var(--ink); opacity: 1; }
.hub #main .stx-team:hover { color: var(--ink); text-decoration: underline; }
.hub #main .stx-scap .stx-dot { background: var(--ink-2); }

/* ---------- Fan Zone ---------- */
.hub .fz-panel { padding: 10px 14px; }
@media (min-width: 768px) { .hub .fz-panel { padding: 16px 20px; } }
.hub .fz-panel.fz-vids { margin: 0; padding: 16px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
@media (min-width: 768px) { .hub .fz-panel.fz-vids { padding: 20px; } }
.hub .fz-panel .fz-row { padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.hub .fz-panel .fz-row:first-child { border-top: 0; padding-top: 2px; }
.hub .fz-row:hover .fz-nm { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub .fz-badge, .hub .fz-ic { width: 32px; height: 32px; border-radius: 4px; background: var(--stand); color: var(--ink); box-shadow: none; }
.hub .fz-badge svg, .hub .fz-ic svg { width: 20px; height: 20px; }
.hub .fz-rg { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.hub .fz-nm { font-size: 16px; font-weight: 750; color: var(--ink); }
.hub .fz-d { font-family: var(--serif); font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.hub .fz-go { color: var(--muted); }
.hub .gref-grid { margin: 0; }
.hub .gref-col { padding: 14px 16px; border-color: var(--rule); }
.hub .gref-h { margin: 0 0 4px; font-size: 15px; font-weight: 750; color: var(--ink); }
.hub .gref-list li:not(:first-child) > .gref-row { border-top: 1px solid var(--rule); }
.hub a.gref-row:hover .gref-lb b, .hub a.gref-row:hover .gref-go, .hub a.gref-row:hover .gref-ic { color: var(--ink); }
.hub a.gref-row:hover .gref-lb b { text-decoration: underline; text-underline-offset: 3px; }
.hub .gref-lb b { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.hub .gref-lb span { font-size: 13.5px; color: var(--ink-2); }
.hub .gref-ic, .hub .gref-go { color: var(--muted); }
.hub .gref-divider { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--ink-2); border-top: 1px solid var(--rule); }
.hub .gref-row:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

/* ---------- Tickets and travel ---------- */
.hub .gfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); overflow: hidden; }
.hub .gfact { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }
.hub .gfact:nth-child(2n) { border-right: 0; }
.hub .gfact:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 900px) { .hub .gfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hub .gfact { border-bottom: 0; border-right: 1px solid var(--rule); } .hub .gfact:nth-child(2n) { border-right: 1px solid var(--rule); } .hub .gfact:last-child { border-right: 0; } }
.hub .gfact-l { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.hub .gfact-l svg { width: 16px; height: 16px; flex: none; color: var(--ink-2); }
.hub .gfact-v { font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 22px; line-height: 1.1; color: var(--ink); }
.hub .gfact-s { font-size: 13.5px; color: var(--ink-2); }
.hub .mcw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.hub .mcw-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; text-align: left; }
.hub .mcw-card:first-child { border-top: 0; padding-top: 2px; }
@media (min-width: 680px) {
  .hub .mcw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .hub .mcw-card:nth-child(2) { border-top: 0; padding-top: 2px; }
}
.hub .mcw-region { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.hub .mcw-card h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.hub .mcw-card p { margin: 2px 0 4px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.hub .tt-panel > .mcw-grid, .hub .tt-panel section > .mcw-grid { margin-bottom: 20px; padding: 16px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }

/* ---------- Store ---------- */
.hub .shop-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.hub .shop-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm go" "tag go"; gap: 2px 14px; align-items: center; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; color: var(--ink); text-decoration: none; transform: none; }
.hub .shop-card:first-child { border-top: 0; padding-top: 2px; }
.hub .shop-card.feat { background: none; border-color: var(--rule); }
.hub .shop-nm { grid-area: nm; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); }
.hub .shop-tag { grid-area: tag; font-size: 14px; color: var(--ink-2); }
.hub .shop-go, .hub .shop-card.feat .shop-go { grid-area: go; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 680px) {
  .hub .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .hub .shop-card:nth-child(2) { border-top: 0; padding-top: 2px; }
}
.hub .mch-kit .mch-shirt { background: var(--stand) !important; border-radius: 3px; margin: 0 0 10px; }
.hub .mch-svg { filter: none; }
@media (min-width: 680px) {
  .hub .sec-panel > .mcw-grid:has(.mch-kit) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub .sec-panel > .mcw-grid:has(.mch-kit) .mcw-card:nth-child(3) { border-top: 0; padding-top: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hub .ct-follow, .hub .se-btn, .hub .hub-tabs a { transition: background-color .12s ease, color .12s ease; }
}

/* ---------- The compact pass (4 October 2026: "just a lot of scrolling throughout") ----------
   Markup from build/redesign/transforms/hubs-compact.cjs. The short link where a repeated block went (.tab-xref) and
   the pair of short sections (.tab-pair) are drawn by components-compact.css; here they keep the hub's column. */
.hub .tab-pair { max-width: var(--col); }
@media (min-width: 1100px) { .hub .tab-pair > section { margin-bottom: 40px; } }
/* A list that has a row to itself runs in two columns from 900px; in a pair it keeps one. */
@media (min-width: 900px) {
  .hub .tab > section .fz-panel:not(.fz-vids) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .hub .tab > section .fz-panel:not(.fz-vids) .fz-row:nth-child(2) { border-top: 0; padding-top: 2px; }
}
/* The squad (squad.js): tighter rows, three columns of positions from 1100px. */
.hub .sq-row { padding: 6px 0; }
.hub .sq-group { margin-bottom: 16px; }
@media (min-width: 1100px) { .hub .sq-groups { columns: 3; column-gap: 28px; } }
/* The next-game sentence (bake-seo's data-nextmatch) under the match card, without a card of its own. */
.hub .mc-next p.seo-pre { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hub .mc-next p.seo-pre a { color: var(--ink); font-weight: 650; }
/* Phones: where to watch and where to listen side by side, the pub links under them; the list icons step aside so
   the descriptions run the width of the panel. */
@media (max-width: 679px) {
  .hub .wl-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub .wl-grp { padding: 10px 12px; border-top: 0; }
  .hub .wl-grp:nth-child(2) { border-left: 1px solid var(--rule); }
  .hub .wl-grp:nth-child(n+3) { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
  .hub .wl-grp:nth-child(n+3) .wl-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .hub .wl-link { padding: 7px 0; font-size: 15px; }
  .hub .fz-panel .fz-row > :is(.fz-ic, .fz-badge) { display: none; }
}
/* In a pair, a section's own grid keeps one column: two columns inside a half would squeeze the big figures. */
@media (min-width: 1100px) {
  .hub .tab-pair :is(.st2-grid.st2-records, .hi-cab) { grid-template-columns: minmax(0, 1fr); }
  .hub .tab-pair :is(.st2-grid.st2-records .st2-card, .hi-cab .hi-stat):nth-child(2) { border-top: 1px solid var(--rule); padding-top: 12px; }
}
/* "Where to get confirmed team news": the rows above (the Hubs lane's list). The hand-tuned page's pill frame (its
   border, rounding, card fill and 210px cap) still reached them from the legacy layer and left a narrow pill per line;
   it goes. One to a line on phones (a handle such as @afcbournemouth or a site address needs the width) and inside a
   pair, two from 680px elsewhere (the Hubs lane's rule above). */
.hub .fzx-circles.wtg .fzx-c { flex: none; max-width: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }
.hub .fzx-circles.wtg .fzx-c:first-child { border-top: 0; }
@media (min-width: 1100px) {
  .hub .tab-pair .fzx-circles.wtg { grid-template-columns: minmax(0, 1fr); }
  .hub .tab-pair .fzx-circles.wtg .fzx-c:nth-child(2) { border-top: 1px solid var(--rule); padding-top: 10px; }
}
/* The club's row on phones (crest, name, Follow) wraps as a flex row: the Follow button drops under the name when the
   club's longest word would not fit beside it, and a name never breaks inside a word ("Nottingh-am" at 320px). */
@media (max-width: 767px) {
  .hub .ct-id { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 10px; }
  .hub .ct-disc { flex: none; }
  .hub .ct-name { flex: 1 1 0; overflow-wrap: break-word; }
  .hub .ct-follow { margin-left: auto; align-self: center; }
}

/* ===== components-page.css ===== */
/* ==========================================================================
   The page frame and the page head of every generated page (stage F5).

   UNLAYERED on purpose, unlike components.css. The page head replaces the black top band (design review item 31)
   on all 1,523 generated pages at once, but four generators still print their own inline band rules until their
   family stage removes them: make-fixtures-pages FX_STYLE (the match-page .mh-* text in cream), and the STYLE
   copies in make-derby-pages and make-away-guides (.hero, .kicker, .badge, .vs, .wrap). Inline rules are
   unlayered, so a layered rule could never beat them. Every selector here starts with :root and the head's own
   class, which out-ranks the strongest inline band rule (`:root[data-theme="dark"] .hero`, 0,3,0).

   Scope: only a <section class="hero ph"> is restyled. The class is added by the page-head SWAP in
   build/chrome/page-head.cjs at deploy (bake-chrome) and printed by pageHead() and make-league-guides head().
   The hand-tuned pages (homepage, hubs, /predict, static pages) have their own .hero and are not touched; a
   stage that wants the page head there adds the ph class.

   Club colour: a club page's head carries data-c="CODE" from the club colour table, which draws the club line
   (the 6px band, never text) and puts the club's crest beside the title. The label is ink, in sentence case,
   for every club (design review item 1).
   ========================================================================== */

/* Component tokens. --panel is the one panel that a list or a FAQ sits in: paper in light, slate in dark. */
:root,
:root[data-theme="light"] { --panel: var(--paper); --panel-hover: var(--stand); --col: 960px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --panel: var(--stand); --panel-hover: var(--stand-2); }
}
:root[data-theme="dark"] { --panel: var(--stand); --panel-hover: var(--stand-2); }
/* The mockup's gutters (work2/shared.css 79-81). tokens.css sets 16px at 0,2,0, so these name :root[data-theme] too. */
@media (min-width: 768px) { :root, :root[data-theme] { --gutter: 32px; } }
@media (min-width: 1200px) { :root, :root[data-theme] { --gutter: 40px; } }

/* ---------- The frame: one width for the header, the page head, the content and the footer ----------
   Content sits on the header's left edge. Its column stops at --col (960px), so a 1366px screen keeps tables,
   lists and panels at a size the generators were designed for, and long prose is capped separately. */
:root .hero.ph > .wrap,
:root .ph ~ main > .wrap,
:root .site-ft > .wrap,
:root .site-hd > .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* The footer (.site-ft, stage F4) and the old header (.site-hd, until stage F3) take the same column. Their wraps
   are named here because the derby and away-day pages still print `.wrap{max-width:820px;padding:0 22px}`,
   `header .wrap` and `footer .wrap` inline, which would beat the layered .wrap. Only the width, the centring and
   the side gutters are set; F4's foot.css keeps the footer's own top and bottom padding. F3's header (.mast)
   scopes its own wraps. */
:root .ph ~ main > .wrap { padding-top: 28px; padding-bottom: 8px; }
/* The --col cap on the column's blocks is in components.css, inside the layer, so the reading measure and any
   family's own max-width can win over it. */
@media (min-width: 768px) { :root .ph ~ main > .wrap { padding-top: 36px; } }

/* ---------- The page head ---------- */
:root .hero.ph,
:root[data-theme] .hero.ph {
  position: relative; overflow: visible; margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
:root .hero.ph::before,
:root .hero.ph::after { content: none; display: none; }
/* The club line: a club page's head opens with a 6px band in the club's colour (its band value holds 3:1 on the
   page in both themes; Fulham, Newcastle and Spurs turn light in dark mode). */
:root .hero.ph[data-c] { border-top: 6px solid var(--b); }
/* Stage F3's header carries its own club row on club pages, ruled underneath in the club's colour; the head then
   leaves the line to it, so the club colour is drawn once. */
:root header:has(.crow) ~ .hero.ph[data-c] { border-top: 0; }
:root .hero.ph > .wrap { padding-top: 22px; padding-bottom: 24px; }
@media (min-width: 768px) { :root .hero.ph > .wrap { padding-top: 32px; padding-bottom: 30px; } }

/* The label: sentence case, ink, never the club's colour, so it reads for every club. */
:root .hero.ph .kicker {
  display: block; margin: 0 0 6px; padding: 0;
  font-weight: 650; font-stretch: 100%; font-size: 16px; line-height: 1.3;
  letter-spacing: normal; text-transform: none; color: var(--ink-2); opacity: 1;
}
@media (min-width: 768px) { :root .hero.ph .kicker { font-size: 18px; margin-bottom: 8px; } }

/* The title: condensed Archivo. flow-root keeps every line of a long title beside the crest. */
:root .hero.ph h1 {
  display: flow-root; margin: 0; max-width: var(--col);
  font-weight: 850; font-stretch: 72%; font-size: 36px; line-height: 1.02;
  letter-spacing: -.005em; color: var(--ink); text-wrap: balance;
}
@media (min-width: 768px) { :root .hero.ph h1 { font-size: 48px; } }
@media (min-width: 1200px) { :root .hero.ph h1 { font-size: 56px; } }

/* One standfirst in the reading face (Newsreader, decision 8), at about 60 characters a line. Its family is set
   here as well as in type.css because the derby and away-day pages still size .hero .sub inline. Headings take
   their family from the page and type.css, never from this unlayered file. */
:root .hero.ph .sub {
  clear: both; margin: 14px 0 0; max-width: 34em;
  font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.45;
  color: var(--ink-2); opacity: 1;
}
@media (min-width: 768px) { :root .hero.ph .sub { margin-top: 16px; } }
/* the mockup's standfirst: 19px, 21px on wide screens (work2/match.tpl.html .standfirst) */
@media (min-width: 1024px) { :root .hero.ph .sub { font-size: 21px; } }
/* Links in the head in ink, except a link styled as a button (.btn, .btn-fill, .btn-ci), which keeps its own colours. */
:root .hero.ph a:not(.btn) { color: var(--ink); font-weight: 600; }

/* The club's crest beside the title: floated at the start of the label, so the label and the title sit beside it
   and the standfirst runs under it. In dark mode it sits on the light disc every crest gets (--dk, --cbg). */
:root .hero.ph .ph-crest {
  float: left; position: relative; width: 52px; height: 52px; margin: 0 14px 4px 0;
  padding: calc(5px * var(--dk)); background: var(--cbg); border-radius: calc(50% * var(--dk));
}
:root .hero.ph .ph-crest img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) {
  :root .hero.ph .ph-crest { width: 72px; height: 72px; margin-right: 20px; padding: calc(7px * var(--dk)); }
}
@media (min-width: 1200px) { :root .hero.ph .ph-crest { width: 80px; height: 80px; } }
/* The narrowest phones keep more of the line for the title. */
@media (max-width: 359px) {
  :root .hero.ph h1 { font-size: 32px; }
  :root .hero.ph .ph-crest { width: 44px; height: 44px; margin-right: 12px; }
}

/* ---------- Match pages: the two-club block that sat on the black band, in page colours until stage P2 ----------
   FX_STYLE in make-fixtures-pages.cjs sets these in fixed cream for the dark band. */
:root .hero.ph .mh-teams { margin: 22px 0 0; }
/* the pair and its date line sit under the title, not spread across a wide screen */
:root .hero.ph :is(.mh-teams, .mh-line) { max-width: 560px; }
:root .hero.ph .mh-crest { background: var(--cbg); border-radius: calc(50% * var(--dk)); padding: calc(7px * var(--dk)); }
:root .hero.ph .mh-nm { font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 19px; color: var(--ink); }
:root .hero.ph .mh-role { font-size: 14px; font-weight: 650; letter-spacing: normal; text-transform: none; color: var(--muted); }
:root .hero.ph .mh-v { font-family: var(--display); font-weight: 650; font-size: 18px; color: var(--muted); }
:root .hero.ph .mh-line { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 560px) { :root .hero.ph .mh-nm { font-size: 16px; } }

/* ---------- Derby pages: the two club links that sat on the black band, until stage P8b ---------- */
:root .hero.ph .badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
:root .hero.ph .badge {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 12px 6px 6px;
  color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none;
}
:root .hero.ph .badge:hover { background: var(--panel-hover); }
:root .hero.ph .vs { color: var(--muted); opacity: 1; font-weight: 700; font-size: 14px; }

/* ---------- The score plate in fixture rows, on generated pages (until stage P1 retires FX_STYLE) ----------
   The fixture rows' score sits on a dark plate (components-home-rows.css, in the layer), but the inline FX_STYLE of
   make-fixtures-pages still prints `.fx-sc{color:var(--ink)}` unlayered, which beats the plate's text colour: the
   finished matchweek boards drew ink figures on the ink plate (the G1 contrast scan of every page, 4 October 2026).
   Naming the row out-ranks the inline rules (`.fx-sc`, `.fx-sc.is-live`) and keeps the plate readable. */
:root .fx-row .fx-sc { color: var(--on-plate); }
:root .fx-row .fx-sc.is-live { color: #FFFFFF; }

/* ---------- Fixture rows on phones, on generated pages (until stage P1 retires FX_STYLE) ----------
   On a phone each game stacks (components-home-rows.css: the date on the left, the two clubs one above the other,
   the score beside them, the channel and ground underneath). FX_STYLE's own phone rules, unlayered, replaced those
   columns and put the channel and ground (.fx-bc) across the second row, on top of the away club: /matchweek/6,
   /fixtures, the on-TV page and the match pages, live on 4 October 2026. These re-assert the stacked rows, and
   out-rank FX_STYLE's `.fx-row` and `.fx-bc` rules at the same 560px breakpoint. */
@media (max-width: 560px) {
  :root .fx-row { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "dt h sc" "dt a sc" "dt bc bc"; gap: 4px 10px; padding: 11px 4px; }
  :root .fx-row .fx-bc { grid-area: bc; padding-top: 0; border-top: 0; }
  /* A result in a club's list (fixtures.js marks it W, D or L) gets a column of its own after the score. Sharing the
     score's cell, the letter covered the score ("3L" for a 3-0 defeat) on every club's fixtures page and in the hubs'
     Fixtures tab (found 4 October 2026). A browser without :has() still places the letter in a column after the
     score, because the named area it asks for does not exist there. The letter is centred in its square again
     (the phone rule it shares with .fx-bc packed it into the top left corner). */
  :root .fx-row:has(> .fx-res) { grid-template-columns: 58px minmax(0, 1fr) auto auto; grid-template-areas: "dt h sc res" "dt a sc res" "dt bc bc bc"; }
  :root .fx-row > .fx-res { grid-area: res; align-self: center; justify-self: end; place-items: center; place-content: center; }
}

/* ===== components-pageclub.css ===== */
/* ==========================================================================
   Club pages in their club's colour (compact pass, 4 October 2026: the owner asked for "the black bars for headers
   like Where to watch and listen to be in clubs colours").

   Club pages are the 20 hubs and every /<club>/... page; their <body> carries data-pc (the page's own club, never
   the reader's choice): the hubs transform writes it, and bake-chrome adds it to every /<club>/... page through
   build/chrome/page-club.cjs. build/club-colours.cjs gives each club its values (body[data-pc="ARS"] and the rest):
     --pc and --on-pc   a bar with text on it: the solid kit colour and the white or ink that reads on it, at least
                        4.5:1 for every club in both themes (Manchester United 4.87:1 and Hull 4.94:1 are the lowest);
     --pcr              a rule with no text: the kit colour in light and the dark-page colour in dark, so it stands
                        out from both pages.
   What takes the colour: the thick rule over every section heading, and the dark day and month bars in fixture and
   travel lists. League pages keep ink. Small text never takes a club colour, and the reader's-club marker (the ink
   bar under a crest) stays ink so it cannot be confused with a section bar.

   Unlayered, so it beats the layered generated-page rules and the unlayered hub rules alike.
   ========================================================================== */
body[data-pc] { --pc: var(--pc-l); --on-pc: var(--on-pc-l); --pcr: var(--pcr-l); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-pc] { --pc: var(--pc-d); --on-pc: var(--on-pc-d); --pcr: var(--pcr-d); }
}
:root[data-theme="dark"] body[data-pc] { --pc: var(--pc-d); --on-pc: var(--on-pc-d); --pcr: var(--pcr-d); }

/* The thick rule over section headings: the generated club pages (components.css) and the hubs (components-hubs.css). */
body[data-pc] .ph ~ main :is(.wrap, section) > h2,
body[data-pc] .ph ~ main .sec-head:not(p),
body.hub[data-pc] .tab section > h2,
body.hub[data-pc] .tab .fzc-head > h2 { border-top-color: var(--pcr); }

/* The dark bars with text: month plates in fixture lists (fixtures.js), travel lists (awaydays.js) and plates. */
body[data-pc] :is(.fx-month, .ad-month, .plate) { background: var(--pc); color: var(--on-pc); }

/* ===== callit.css ===== */
/* ==========================================================================
   Called It (the Called It and info pages lane: stages F6a for /predict and the static pages, P3 and P11).
   The markup contract for the pages that place these components is build/redesign/progress/callit.md.

   UNLAYERED on purpose, like mast.css and foot.css (PROGRESS.md rule 9). The homepage and the hubs keep their own
   unlayered inline rules until stages P9 and P10 (a{color:inherit;text-decoration:none}, section{padding:...},
   h2{...}), and those would beat anything in @layer tc: on those pages a layered .btn-ci would even lose its white
   text to a{color:inherit}. So every rule here starts with the component's own root class and sets every property
   such a page rule could touch.

   Components:
     .cit-band     the closing band after </main> (it replaces the old .ci-closer); holds a .cit-promo
     .cit-promo    the promo panel: heading, the two prizes, one sentence and the button (--slim: one row)
     .cit-slot     a place on a page that assets/matchpredict.js fills with the Called It panel
     .cit-call     the panel itself: real score boxes with steppers, set out like a coupon (drawn by matchpredict.js)
     .cit-ui       a wrapper that gives its buttons the Called It button rules (the /predict head, the bio page)

   Owner's decision 6: Called It's deep money green, with white text in both themes (5.04:1), is the one filled
   button on a page. Every other button is an ink outline. Scores and boxes are drawn with real borders, not
   shadows, so they still show in Windows high contrast mode.
   ========================================================================== */

/* Called It's own colour: the same in light and dark. */
:root,
:root[data-theme] { --ci: #0C7F50; --ci-hover: #0A6B43; --on-ci: #FFFFFF; }

/* ---------- Buttons inside Called It components ---------- */
:root :is(.cit-promo, .cit-call, .cit-ui) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto;
  min-height: 44px; margin: 0; padding: 10px 18px; border: 0; border-radius: 4px;
  background: transparent; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink);
  font-family: var(--display); font-weight: 750; font-stretch: 100%; font-size: 16px; line-height: 1.2;
  letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none; cursor: pointer;
}
:root :is(.cit-promo, .cit-call, .cit-ui) .btn:hover { background: var(--stand); color: var(--ink); text-decoration: none; }
:root :is(.cit-promo, .cit-call, .cit-ui) .btn.btn-ci { background: var(--ci); color: var(--on-ci); box-shadow: none; }
:root :is(.cit-promo, .cit-call, .cit-ui) .btn.btn-ci:hover { background: var(--ci-hover); color: var(--on-ci); }
:root :is(.cit-promo, .cit-call, .cit-ui) .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Secondary actions are text buttons, so the green button stays the only fill. */
:root :is(.cit-promo, .cit-call, .cit-ui) .link-btn {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 2px; border: 0; background: none; color: var(--ink);
  font-family: var(--display); font-weight: 650; font-size: 15px; line-height: 1.2; letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer;
}
:root :is(.cit-promo, .cit-call, .cit-ui) .link-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (forced-colors: active) {
  :root :is(.cit-promo, .cit-call, .cit-ui) .btn { border: 2px solid ButtonText; }
}

/* ---------- The closing band ---------- */
:root .cit-band { display: block; margin: 0; padding: 48px 0; border: 0; background: none; color: var(--ink); }
@media (min-width: 1024px) { :root .cit-band { padding: 64px 0; } }
:root .cit-band-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- The promo panel ---------- */
:root .cit-promo {
  display: block; margin: 0; padding: 20px 18px 22px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink); text-align: left; box-shadow: none;
}
@media (min-width: 768px) { :root .cit-promo { padding: 28px 32px 30px; } }
:root .cit-promo .cit-promo-h {
  margin: 0; padding: 0; border: 0; max-width: 20em;
  font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 28px; line-height: 1.05;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
@media (min-width: 768px) { :root .cit-promo .cit-promo-h { font-size: 36px; } }
@media (max-width: 399px) { :root .cit-promo .cit-prize b { font-size: 46px; } :root .cit-promo .cit-plus { margin-top: 10px; } }
:root .cit-promo .cit-nb { white-space: nowrap; }
:root .cit-promo .cit-prizes { display: flex; align-items: flex-start; gap: 12px 16px; margin: 20px 0 0; padding: 0; }
:root .cit-promo .cit-prize {
  display: flex; flex-direction: column; gap: 6px; flex: 0 1 auto; max-width: 11em; margin: 0; padding: 0;
  font-family: var(--display); font-weight: 650; font-stretch: 100%; font-size: 15px; line-height: 1.3; color: var(--ink-2);
}
:root .cit-promo .cit-prize b {
  display: block; white-space: nowrap; font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: 56px; line-height: .86;
  letter-spacing: -.01em; color: var(--ink);
}
:root .cit-promo .cit-plus { flex: none; margin-top: 14px; font-family: var(--display); font-weight: 750; font-size: 24px; line-height: 1; color: var(--muted); }
:root .cit-promo .cit-promo-sub {
  margin: 18px 0 0; padding: 0; max-width: 34em;
  font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--ink-2);
}
:root .cit-promo .cit-promo-go { margin: 20px 0 0; padding: 0; }
/* The band is as wide as the page frame, so the viewport decides its layout: the prizes move beside the words. */
@media (min-width: 900px) {
  :root .cit-band .cit-promo {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h p" "s p" "g p";
    column-gap: 56px; align-items: start;
  }
  :root .cit-band .cit-promo-h { grid-area: h; }
  :root .cit-band .cit-prizes { grid-area: p; align-self: center; margin: 0; flex-wrap: nowrap; }
  :root .cit-band .cit-promo-sub { grid-area: s; }
  :root .cit-band .cit-promo-go { grid-area: g; }
  :root .cit-band .cit-prize b { font-size: 72px; }
}

/* The slim promo: one row where there is room (the words, then the button), stacked where there is not. */
:root .cit-promo.cit-promo--slim { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 16px 18px 18px; }
:root .cit-promo--slim .cit-slim-tx { flex: 1 1 22em; min-width: 0; }
:root .cit-promo--slim > .cit-slim-h, :root .cit-promo--slim > .cit-slim-sub { flex: 1 1 100%; }
:root .cit-promo--slim .cit-slim-h {
  margin: 0; padding: 0; font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 21px; line-height: 1.15;
  letter-spacing: 0; color: var(--ink);
}
:root .cit-promo--slim .cit-slim-sub { margin: 6px 0 0; padding: 0; max-width: 34em; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
:root .cit-promo--slim .cit-slim-sub b { font-family: var(--display); font-weight: 800; color: var(--ink); }
:root .cit-promo--slim .cit-promo-go { flex: 0 0 auto; margin: 0; }

/* ---------- The slot (filled by matchpredict.js) ---------- */
:root .cit-slot { display: block; margin: 0; padding: 0; }

/* ---------- The Called It panel: a call for one game, carried into Called It ----------
   Two columns from 560px of panel width (the words, then the call), one below. One row per club at every width,
   so a phone never wraps a score away from its club (design review item 2). */
:root .cit-call {
  display: block; margin: 16px 0 8px; padding: 0; border: 2px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink); text-align: left; container-type: inline-size;
}
:root .cit-call .cit-call-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
:root .cit-call .cit-call-h {
  margin: 0; padding: 0; border: 0; font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 26px;
  line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ink);
}
:root .cit-call .cit-call-tx p {
  margin: 8px 0 0; padding: 0; max-width: 34em; font-family: var(--serif); font-weight: 400; font-size: 17px;
  line-height: 1.5; color: var(--ink-2); text-align: left;
}
:root .cit-call .cit-call-form { display: grid; gap: 12px; align-content: start; min-width: 0; }
:root .cit-call .cit-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
:root .cit-call .cit-legend { padding: 0; margin: 0 0 4px; font-family: var(--display); font-weight: 750; font-size: 15px; line-height: 1.3; color: var(--ink); }
:root .cit-call .cit-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  margin: 0; padding: 6px 0; border: 0;
}
:root .cit-call .cit-row + .cit-row { border-top: 1px solid var(--rule); }
:root .cit-call .cit-team {
  display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0;
  font-family: var(--display); font-weight: 650; font-stretch: 92%; font-size: 16px; line-height: 1.2; color: var(--ink); cursor: default;
}
:root .cit-call .cit-team .crest { width: 24px; height: 24px; flex: none; }
:root .cit-call .cit-nm { min-width: 0; overflow-wrap: anywhere; }
:root .cit-call .cit-nm.is-mine { font-weight: 800; }
:root .cit-call .cit-score { display: inline-flex; align-items: center; gap: 4px; }
:root .cit-call .cit-step {
  display: grid; place-items: center; width: 40px; height: 44px; margin: 0; padding: 0; border: 2px solid var(--ink); border-radius: 3px;
  background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; cursor: pointer;
}
:root .cit-call .cit-step { -webkit-tap-highlight-color: transparent; }
:root .cit-call .cit-step:hover, :root .cit-call .cit-step:active { background: var(--stand); }
:root .cit-call .cit-in {
  width: 52px; height: 46px; margin: 0; padding: 0; border: 2px solid var(--ink); border-radius: 3px;
  background: var(--paper); color: var(--ink); text-align: center; box-shadow: none; -webkit-appearance: none; appearance: none;
  font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 26px; line-height: 1;
}
:root .cit-call .cit-in::placeholder { color: transparent; }
:root .cit-call :is(.cit-step, .cit-in):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
:root .cit-call .cit-go-p { margin: 4px 0 0; padding: 0; }
:root .cit-call .cit-msg { margin: 0; padding: 0; max-width: 30em; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink); }
:root .cit-call .cit-msg:empty { display: none; }
:root .cit-call .cit-note { margin: 0; padding: 0; max-width: 30em; font-family: var(--display); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--muted); }
@container (min-width: 560px) {
  :root .cit-call .cit-call-in { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: 32px; align-items: start; padding: 20px 22px 22px; }
}
@container (max-width: 359px) {
  :root .cit-call .cit-call-in { padding: 16px 14px; }
  :root .cit-call .cit-team { gap: 8px; font-size: 15px; }
  :root .cit-call .cit-step { width: 36px; }
  :root .cit-call .cit-in { width: 46px; }
}

/* ===== callit-board.css ===== */
/* ==========================================================================
   The leaderboard and leagues on /predict (assets/called-it.js, stage P3): sign-in, the join and create panels,
   the tabs and table, the league head, chat, pots and the owner dialogs. Every rule is scoped under
   [data-called-it] or the dialog's own .ci-mo, because some of these class names (.ci-prize, .ci-sub) also exist
   in the old Called It closer's inline CSS on other pages. Buttons come from callit.css (.cit-ui). Unlayered.
   ========================================================================== */
:root [data-called-it] .ci-wrap { margin: 0; }
:root [data-called-it] .ci-head { margin-bottom: 12px; }
:root [data-called-it] .ci-head .dek { margin-top: 8px; }
:root [data-called-it] .ci-prize { margin: 0 0 20px; max-width: 40em; font-family: var(--display); font-weight: 650; font-size: 16px; line-height: 1.45; color: var(--ink); }
:root [data-called-it] .ci-prize b { font-weight: 800; }
:root [data-called-it] .ci-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1024px) { :root [data-called-it] .ci-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; } }
:root [data-called-it] .ci-btn svg { width: 16px; height: 16px; flex: none; }
:root [data-called-it] :is(h3, p) { letter-spacing: 0; text-transform: none; }

/* ---------- Fields ---------- */
:root :is([data-called-it], .ci-mo) :is(input:not([type="checkbox"]), select, textarea) {
  min-height: 44px; margin: 0; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 3px; box-shadow: none;
  background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 16px; line-height: 1.3;
}
:root :is([data-called-it], .ci-mo) textarea { min-height: 72px; resize: vertical; }
:root :is([data-called-it], .ci-mo) :is(input, select, textarea):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
:root :is([data-called-it], .ci-mo) .ci-ff { margin: 0 0 12px; }
:root :is([data-called-it], .ci-mo) .ci-ff label { display: block; margin: 0 0 4px; font-family: var(--display); font-weight: 650; font-size: 14px; color: var(--ink-2); }
:root :is([data-called-it], .ci-mo) .ci-ff :is(input, textarea) { width: 100%; }
:root :is([data-called-it], .ci-mo) .ci-ffrow { display: flex; gap: 10px; }
:root :is([data-called-it], .ci-mo) .ci-ffrow .ci-ff { flex: 1; }

/* ---------- Signed out: sign in to play for the prizes ---------- */
:root [data-called-it] .ci-signinbar { margin: 0; padding: 16px 18px 18px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); }
:root [data-called-it] .ci-signin-h { margin: 0; padding: 0; border: 0; font-family: var(--display); font-weight: 850; font-stretch: 85%; font-size: 21px; line-height: 1.15; color: var(--ink); }
:root [data-called-it] .ci-signin-sub { margin: 6px 0 14px; max-width: 34em; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
:root [data-called-it] .ci-signin-sub b { font-family: var(--display); font-weight: 800; color: var(--ink); }
:root [data-called-it] .ci-signin { display: flex; flex-wrap: wrap; gap: 8px; }
:root [data-called-it] .ci-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-family: var(--display); font-weight: 650; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root [data-called-it] .ci-or::before, :root [data-called-it] .ci-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
:root [data-called-it] :is(.ci-emailform, .ci-lform, .ci-createrow, .ci-chatform) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:root [data-called-it] .ci-emailform input { flex: 1 1 12em; min-width: 0; }
:root [data-called-it] .ci-emailmsg { margin: 10px 0 0; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink); }
:root [data-called-it] .ci-emailmsg.err { color: var(--live); }

/* ---------- Join and create: one ruled panel with a cell for each ---------- */
:root [data-called-it] :is(.ci-joinout, .ci-leagues) { margin: 0 0 20px; }
:root [data-called-it] .ci-lgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; border: 1px solid var(--rule); background: var(--rule); }
@media (min-width: 600px) and (max-width: 1023px) { :root [data-called-it] .ci-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root [data-called-it] .ci-lcard { display: flex; flex-direction: column; margin: 0; padding: 14px 16px 16px; border: 0; border-radius: 0; background: var(--panel); }
:root [data-called-it] .ci-lcard-h { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; border: 0; font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 18px; line-height: 1.2; color: var(--ink); }
:root [data-called-it] .ci-lcard-h svg { width: 20px; height: 20px; flex: none; color: var(--ink); }
:root [data-called-it] .ci-lcard > p { margin: 6px 0 12px; font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
:root [data-called-it] .ci-lform { margin-top: auto; }
:root [data-called-it] .ci-createform { display: block; }
:root [data-called-it] .ci-createrow input { flex: 1 1 8em; min-width: 0; }
:root [data-called-it] .ci-lcard-join .ci-lform input { flex: 1 1 7em; min-width: 0; text-align: center; letter-spacing: .14em; font-weight: 750; text-transform: uppercase; }
:root [data-called-it] .ci-lcard-join .ci-lform input::placeholder { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); }
:root [data-called-it] .ci-adv { margin-top: 10px; }
:root [data-called-it] .ci-adv summary { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; font-family: var(--display); font-weight: 650; font-size: 15px; color: var(--ink-2); }
:root [data-called-it] .ci-adv summary::-webkit-details-marker { display: none; }
:root [data-called-it] .ci-adv summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 2px solid var(--ink); border-radius: 3px; font-size: 16px; line-height: 1; color: var(--ink); }
:root [data-called-it] .ci-adv[open] summary::before { content: "\2212"; }
:root [data-called-it] .ci-advhint { margin-left: auto; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
:root [data-called-it] .ci-advbody { padding: 8px 0 2px; }
:root [data-called-it] .ci-advbody select { width: 100%; }
:root [data-called-it] .ci-advlab { display: block; margin: 0 0 6px; font-family: var(--display); font-weight: 650; font-size: 14px; color: var(--ink-2); }
:root [data-called-it] :is(.ci-advnote, .ci-lnote) { margin: 8px 0 0; font-family: var(--display); font-size: 14px; line-height: 1.45; color: var(--muted); }
:root [data-called-it] .ci-leagues > .ci-lnote { margin-top: 10px; }

/* ---------- Signed in: the player bar and the name form ---------- */
:root [data-called-it] .ci-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 20px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); }
:root [data-called-it] .ci-who { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 15px; color: var(--ink-2); }
:root [data-called-it] .ci-whotx { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.25; }
:root [data-called-it] .ci-wholab { font-family: var(--display); font-weight: 650; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root [data-called-it] .ci-whotx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); }
:root [data-called-it] .ci-real { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--muted); }
:root [data-called-it] .ci-barbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
:root [data-called-it] .ci-nameform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; width: 100%; }
:root [data-called-it] .ci-nffields { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; min-width: 0; }
:root [data-called-it] .ci-nffields .ci-ff { flex: 1 1 150px; min-width: 140px; margin: 0; }
:root [data-called-it] .ci-nfbtns { display: flex; align-items: center; gap: 16px; }
:root [data-called-it] .ci-editnote { flex: 1 1 100%; margin: 2px 0 0; font-family: var(--display); font-size: 14px; line-height: 1.45; color: var(--muted); }
:root [data-called-it] .ci-av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 3px; background-size: cover; background-position: center; vertical-align: middle; }
:root [data-called-it] .ci-av.mono, :root .ci-mo .ci-av.mono { background: var(--stand-2); color: var(--ink); font-family: var(--display); font-weight: 800; }

/* ---------- Tabs, caption and the table ---------- */
:root [data-called-it] .ci-tabs { display: flex; margin: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
:root [data-called-it] .ci-tabs::-webkit-scrollbar { display: none; }
:root [data-called-it] .ci-tab {
  flex: none; min-height: 44px; margin: 0; padding: 10px 12px 7px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: none; color: var(--ink-2); font-family: var(--display); font-weight: 750; font-size: 15px; line-height: 1.3; white-space: nowrap; cursor: pointer;
}
:root [data-called-it] .ci-tab:first-child { padding-left: 0; }
:root [data-called-it] .ci-tab.on { border-bottom-color: var(--ink); color: var(--ink); }
:root [data-called-it] .ci-tab:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
:root [data-called-it] .ci-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
:root [data-called-it] .ci-boardcap { margin: 10px 0 8px; font-family: var(--display); font-size: 14px; line-height: 1.4; color: var(--muted); }
:root [data-called-it] .ci-board { margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
:root [data-called-it] .ci-tbl .ci-rank { width: 32px; padding-left: 4px; color: var(--ink-2); font-weight: 600; }
:root [data-called-it] .ci-tbl th.l { width: 100%; white-space: normal; text-align: left; font-weight: 400; }
:root [data-called-it] .ci-who2 { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; }
:root [data-called-it] .ci-nm { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.2; text-align: left; }
:root [data-called-it] .ci-nm b { overflow-wrap: anywhere; font-family: var(--display); font-weight: 750; color: var(--ink); }
:root [data-called-it] .ci-tbl tr.you > * { background: var(--stand); }
:root [data-called-it] .ci-tbl tr.you > :first-child { box-shadow: inset 5px 0 0 var(--ink); }
:root [data-called-it] .ci-youtag {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 6px 1px; border-radius: 2px; background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 750; font-stretch: 85%; font-size: 13px; line-height: 1.25; white-space: nowrap;
}
:root [data-called-it] :is(.ci-load, .ci-empty) { margin: 0; padding: 18px 0; font-family: var(--display); font-size: 15px; line-height: 1.45; color: var(--muted); text-align: left; }

/* ---------- A league: its head, members' tools and chat ---------- */
:root [data-called-it] .ci-lghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 12px 14px; border: 0; border-radius: 0; background: var(--stand); }
:root [data-called-it] .ci-lgid { display: flex; align-items: center; gap: 11px; min-width: 0; }
:root [data-called-it] .ci-lgcrest { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 3px; background: var(--plate); color: var(--on-plate); font-family: var(--display); font-weight: 850; font-size: 14px; }
:root [data-called-it] .ci-lgname { font-family: var(--display); font-weight: 850; font-stretch: 85%; font-size: 19px; line-height: 1.15; color: var(--ink); }
:root [data-called-it] .ci-lgdesc { margin: 2px 0; font-family: var(--serif); font-size: 15px; line-height: 1.4; color: var(--ink-2); }
:root [data-called-it] .ci-lgmeta { margin-top: 2px; font-family: var(--display); font-size: 14px; line-height: 1.4; color: var(--muted); }
:root [data-called-it] .ci-code { font-family: var(--display); font-weight: 800; letter-spacing: .08em; color: var(--ink); }
:root [data-called-it] .ci-lgpot { color: var(--ink); }
:root [data-called-it] .ci-lgbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
:root :is([data-called-it], .ci-mo) .ci-link {
  margin: 0 0 0 4px; padding: 2px 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-weight: 650; font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
:root :is([data-called-it], .ci-mo) .ci-link.danger { color: var(--live); }
:root [data-called-it] .ci-chat { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 0; background: var(--panel); }
:root [data-called-it] .ci-lh { margin: 0 0 8px; padding: 0; border: 0; font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 18px; line-height: 1.2; color: var(--ink); }
:root [data-called-it] .ci-chatfeed { max-height: 280px; margin: 8px 0; overflow-y: auto; }
:root :is([data-called-it], .ci-mo) :is(.ci-msg, .ci-mrow) { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
:root :is([data-called-it], .ci-mo) :is(.ci-msg, .ci-mrow):first-child { border-top: 0; }
:root :is([data-called-it], .ci-mo) .ci-mb { display: flex; flex-direction: column; min-width: 0; flex: 1; }
:root :is([data-called-it], .ci-mo) .ci-mh { font-family: var(--display); font-weight: 750; font-size: 14px; color: var(--ink); }
:root [data-called-it] .ci-mt { font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
:root [data-called-it] .ci-chatform { padding-top: 10px; border-top: 1px solid var(--rule); }
:root [data-called-it] .ci-chatform input { flex: 1 1 10em; min-width: 0; }
:root .ci-mo .ci-mctrl { display: flex; align-items: center; gap: 12px; }
:root .ci-mo .ci-tag { padding: 2px 6px; border: 1px solid var(--rule); border-radius: 2px; font-family: var(--display); font-weight: 650; font-size: 13px; color: var(--muted); }

/* ---------- Prize pots (only when the accounts worker turns payments on) ---------- */
:root [data-called-it] .ci-potswrap { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--rule); background: var(--panel); }
:root [data-called-it] .ci-pots { display: grid; gap: 10px; margin: 10px 0 0; }
:root [data-called-it] .ci-pot { padding: 12px; border: 1px solid var(--rule); background: var(--paper); }
:root [data-called-it] .ci-pothd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
:root [data-called-it] .ci-pottot { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 22px; color: var(--ink); }
:root [data-called-it] .ci-potmeta { margin: 2px 0 10px; font-size: 14px; color: var(--muted); }
:root [data-called-it] .ci-potin { font-weight: 750; color: var(--ink); }
:root [data-called-it] .ci-chk { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
:root [data-called-it] .ci-potbtns { display: flex; align-items: center; gap: 12px; }
:root [data-called-it] .ci-poterr { margin: 8px 0 0; font-size: 14px; color: var(--live); }

/* ---------- The owner dialogs (edit league, members) ---------- */
:root .ci-mo { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; background: rgba(8, 10, 12, .6); }
:root .ci-mo .ci-mo-p { width: 100%; max-width: 460px; margin: auto; border: 2px solid var(--ink); border-radius: 0; box-shadow: none; background: var(--paper); color: var(--ink); }
:root .ci-mo .ci-mo-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--rule); }
:root .ci-mo .ci-mo-h h3 { flex: 1; margin: 0; font-family: var(--display); font-weight: 850; font-stretch: 85%; font-size: 20px; color: var(--ink); }
:root .ci-mo .ci-mo-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 4px; background: none; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
:root .ci-mo .ci-mo-b { padding: 16px 18px; }
:root .ci-mo .ci-mo-f { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--rule); }
:root .ci-mo .ci-lnote { margin: 4px 0 0; font-family: var(--display); font-size: 14px; line-height: 1.45; color: var(--muted); }
:root .ci-mo .ci-load { padding: 12px 0; color: var(--muted); }

/* ===== callit-info.css ===== */
/* ==========================================================================
   The info pages (body.info: about, faq, contact, privacy, terms, called-it-rules), the 404 page (.e404) and the
   social bio page (body.bio, links.html), from the Called It and info pages lane (stage P11). The page head,
   sections, callouts and the FAQ panel are stage F5's (components.css, under .ph ~ main) and the reading text is
   stage F2's .prose; this file adds only what those pages have of their own. A sub-partial of callit.css because
   the stylesheet builder takes new files only as X-*.css of a listed part. Unlayered and scoped.
   ========================================================================== */

/* ---------- Reading: Newsreader through .prose; bold stays visible in Archivo (Newsreader ships 400 and 500) ---------- */
:root .info .prose :is(p, li) :is(b, strong) { font-family: var(--display); font-weight: 700; font-size: .94em; color: var(--ink); }
:root .info .prose section :is(ul, ol) { margin: 0 0 16px; padding-left: 1.2em; color: var(--ink-2); }
:root .info .prose li { margin: 0 0 8px; }
:root .info .prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root :is(.info, .e404-page) .ph ~ main a.btn { font-weight: 750; text-decoration: none; }

/* ---------- On this page: a ruled list, and from 1024px a rail beside the text that stays in view ---------- */
:root .info .toc { margin: 0 0 32px; padding: 10px 0 2px; border: 0; border-top: 4px solid var(--ink); border-radius: 0; background: none; }
:root .info .toc h2 { margin: 0 0 4px; padding: 0; border: 0; font-family: var(--display); font-weight: 750; font-stretch: 100%; font-size: 15px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .info .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
:root .info .toc li { margin: 0; padding: 0; border-bottom: 1px solid var(--rule); counter-increment: toc; font-family: var(--display); font-size: 16px; line-height: 1.3; }
:root .info .toc a { display: flex; gap: 8px; padding: 9px 0; font-family: var(--display); font-weight: 650; color: var(--ink); text-decoration: none; }
:root .info .toc a::before { content: counter(toc) "."; min-width: 1.4em; font-weight: 650; color: var(--muted); }
:root .info .toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  :root .info .info-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 64px; align-items: start; }
  :root .info .info-grid > * { grid-column: 2; min-width: 0; }
  :root .info .info-grid > .toc { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 24px; margin: 0; }
}

/* ---------- FAQ page: the groups are smaller section heads over one panel each ---------- */
:root .info .faq .grp { margin: 32px 0 0; }
:root .info .faq .grp:first-child { margin-top: 0; }
:root .info .faq .grp > h2 {
  margin: 0 0 12px; padding: 8px 0 0; border-top: 2px solid var(--ink); font-family: var(--display); font-weight: 800; font-stretch: 85%;
  font-size: 22px; line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--ink);
}
@media (min-width: 768px) { :root .info .faq .grp > h2 { font-size: 26px; } }

/* ---------- About ---------- */
:root .info .pillars {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; max-width: var(--col); margin: 8px 0; padding: 0;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--rule); overflow: hidden;
}
@media (min-width: 600px) { :root .info .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root .info .pillar { margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: var(--panel); }
:root .info .pillar h3 { margin: 0 0 6px; }
:root .info .pillar p { margin: 0; }
:root .info .honest { max-width: var(--col); margin: 8px 0 40px; padding: 18px 20px 20px; border: 0; border-radius: 0; background: var(--stand); }
:root .info .honest > h2 { margin-top: 0; padding-top: 0; border-top: 0; }
:root .info .honest > p:last-child { margin-bottom: 0; }
:root .info .donate { max-width: var(--col); margin: 0 0 40px; padding: 18px 20px 20px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
:root .info .donate > h2 { margin: 0 0 8px; padding: 0; border: 0; }
:root .info .donate .opt {
  display: inline-block; margin: 0 0 10px; padding: 1px 7px 0; border: 2px solid var(--ink); border-radius: 3px;
  font-family: var(--display); font-weight: 750; font-stretch: 85%; font-size: 13px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* ---------- Contact ---------- */
:root .info .contact-card { max-width: var(--col); margin: 0 0 40px; padding: 20px; border: 0; border-radius: 0; background: var(--stand); }
:root .info .contact-card .lead-p { margin: 0 0 16px; }

/* ---------- 404 ---------- */
:root .e404 .e404-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; }
:root .e404 .btn-fill, :root .e404 .btn-fill:hover { color: var(--on-primary); }
:root .e404 .e404-clubs { margin: 0 0 24px; }
:root .e404 .e404-l { font-size: 22px; }
@media (min-width: 768px) { :root .e404 .e404-l { font-size: 26px; } }

/* ---------- The social bio page (links.html): one column of link rows, Called It as the one green row ---------- */
:root body.bio { min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); }
:root .bio .bio-in { width: 100%; max-width: 480px; margin: 0 auto; padding: 40px 16px 48px; }
:root .bio .bio-hd { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
:root .bio .bio-hd .mark { height: 64px; width: auto; }
:root .bio .bio-name { margin: 4px 0 0; font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 40px; line-height: 1; letter-spacing: -.005em; color: var(--ink); }
:root .bio .bio-tag { margin: 0; max-width: 26em; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink-2); }
:root .bio .bio-links { margin: 28px 0 0; padding: 0; list-style: none; border: 2px solid var(--ink); }
:root .bio .bio-links li + li { border-top: 1px solid var(--rule); }
:root .bio .bio-a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; column-gap: 14px;
  min-height: 72px; padding: 14px 16px; color: var(--ink); text-decoration: none;
}
:root .bio .bio-a:hover { background: var(--stand); }
:root .bio .bio-a:hover .bio-t { text-decoration: underline; text-underline-offset: 3px; }
:root .bio .bio-a:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
:root .bio .bio-a svg { width: 24px; height: 24px; color: currentColor; }
:root .bio .bio-a .bio-chev { width: 16px; height: 16px; color: var(--muted); }
:root .bio .bio-t { display: block; font-family: var(--display); font-weight: 750; font-size: 18px; line-height: 1.2; }
:root .bio .bio-s { display: block; margin-top: 3px; font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
:root .bio .bio-a.bio-ci { background: var(--ci); color: var(--on-ci); }
:root .bio .bio-a.bio-ci .bio-s, :root .bio .bio-a.bio-ci .bio-chev { color: var(--on-ci); }
:root .bio .bio-a.bio-ci:hover { background: var(--ci-hover); }
:root .bio .bio-a.bio-ci:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
:root .bio .bio-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
:root .bio .bio-foot { margin: 22px 0 0; font-family: var(--display); font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; }
:root .bio .bio-foot a { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* ===== callit-predict.css ===== */
/* ==========================================================================
   /predict (stage P3): the page head's Called It parts, the page layout, the matchweek set out like a coupon
   (assets/predict.js), the projected table and the payouts section (assets/payouts.js). Unlayered and scoped,
   like callit.css. The leaderboard and leagues are in callit-board.css.
   ========================================================================== */

/* ---------- The page head: Called It's title at the programme cover's size, the prizes and the scoring ---------- */
:root .hero.ph h1.cit-title { margin-left: -.03em; font-weight: 900; font-stretch: 62%; font-size: 64px; line-height: .86; letter-spacing: -.01em; }
:root .hero.ph h1.cit-title em { font-style: normal; color: inherit; }
@media (min-width: 768px) { :root .hero.ph h1.cit-title { font-size: 96px; } }
@media (min-width: 1200px) { :root .hero.ph h1.cit-title { font-size: 120px; } }
:root .hero.ph .cit-head-x { margin: 22px 0 0; }
:root .hero.ph .cit-pz { display: flex; gap: 12px; max-width: 30em; margin: 0; }
:root .hero.ph .cit-pz-i {
  display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; margin: 0; padding: 10px 14px 12px; border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 650; font-size: 15px; line-height: 1.3; color: var(--ink-2);
}
:root .hero.ph .cit-pz-i b { font-weight: 900; font-stretch: 62%; font-size: 48px; line-height: .86; letter-spacing: -.01em; color: var(--ink); }
:root .hero.ph .cit-free { margin: 14px 0 0; font-family: var(--display); font-weight: 650; font-size: 16px; line-height: 1.4; color: var(--ink); }
:root .hero.ph .cit-free b { font-weight: 800; }
:root .hero.ph .cit-scoring {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30em; margin: 14px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
:root .hero.ph .cit-scoring li {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px 10px 0;
  font-family: var(--display); font-weight: 650; font-size: 15px; line-height: 1.25; color: var(--ink-2);
}
:root .hero.ph .cit-scoring li + li { padding-left: 12px; border-left: 1px solid var(--rule); }
:root .hero.ph .cit-scoring b { font-weight: 850; font-stretch: 75%; font-size: 22px; line-height: 1; color: var(--ink); }
:root .hero.ph .cit-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 20px 0 0; }
:root .hero.ph .cit-acts .cit-rules-a { font-weight: 650; font-size: 16px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- The page: the leaderboard first (the owner's order), then the coupon beside its projected table ---------- */
:root .cit-page > * { max-width: none; }
:root .cit-page > [data-payouts]:not([hidden]), :root .cit-page > [data-called-it] { margin: 0 0 48px; }
:root .cit-page .cit-sec { margin: 0 0 48px; }
:root .cit-page .sec-head .cit-label { margin: 0 0 4px; padding: 0; font-family: var(--display); font-weight: 650; font-size: 16px; line-height: 1.3; color: var(--ink-2); }
:root .cit-page .sec-head .dek { margin-top: 8px; }
:root .cit-page .cit-share { margin: 22px 0 0; }
:root .cit-page .faq { max-width: 860px; }
:root .cit-page .pr-empty { margin: 0; padding: 16px 0; font-family: var(--display); font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1200px) {
  :root .cit-page .cit-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; }
}
@media (min-width: 1200px) and (min-height: 860px) {
  :root .cit-page .cit-proj { position: sticky; top: 16px; }
}

/* ---------- The season tally: one ruled panel of four figures ---------- */
:root [data-predict] .pr-tally {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 18px; padding: 0;
  border: 1px solid var(--rule); background: var(--rule);
}
:root [data-predict] .pr-stat { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px 12px; border: 0; border-radius: 0; background: var(--panel); text-align: left; }
:root [data-predict] .pr-stat b { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 34px; line-height: .9; letter-spacing: 0; color: var(--ink); }
:root [data-predict] .pr-stat span { font-family: var(--display); font-weight: 650; font-size: 14px; line-height: 1.25; letter-spacing: 0; text-transform: none; overflow-wrap: normal; color: var(--ink-2); }
@media (max-width: 479px) { :root [data-predict] .pr-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The matchweek bar ---------- */
:root [data-predict] .pr-gwbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; margin: 0 0 12px; }
:root [data-predict] .pr-gwtx { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; text-align: center; }
:root [data-predict] .pr-gwlabel { font-family: var(--display); font-weight: 850; font-stretch: 75%; font-size: 26px; line-height: 1; color: var(--ink); }
:root [data-predict] .pr-gwdates { font-family: var(--display); font-weight: 650; font-size: 15px; line-height: 1.3; color: var(--ink-2); }
:root [data-predict] .pr-nav {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 2px solid var(--ink); border-radius: 4px;
  background: var(--paper); color: var(--ink); cursor: pointer;
}
:root [data-predict] .pr-nav svg { width: 18px; height: 18px; }
:root [data-predict] .pr-nav:hover { background: var(--stand); }

/* ---------- The coupon: one frame around the round, a plate for each day, a cell for each game ---------- */
:root [data-predict] .pr-frame { margin: 0; border: 2px solid var(--ink); background: var(--paper); container-type: inline-size; }
:root [data-predict] .pr-list { display: block; }
:root [data-predict] .pr-day {
  margin: 0; padding: 9px 12px; border: 0; background: var(--plate); color: var(--on-plate);
  font-family: var(--display); font-weight: 750; font-stretch: 85%; font-size: 16px; line-height: 1.2; letter-spacing: 0;
}
:root [data-predict] .pr-cells { display: grid; grid-template-columns: minmax(0, 1fr); }
:root [data-predict] .pr-card { margin: 0; padding: 10px 14px; border: 0; border-radius: 0; background: var(--paper); }
:root [data-predict] .pr-card + .pr-card { border-top: 1px solid var(--rule); }
@container (min-width: 640px) {
  :root [data-predict] .pr-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root [data-predict] .pr-card + .pr-card { border-top: 0; }
  :root [data-predict] .pr-card:nth-child(n+3) { border-top: 1px solid var(--rule); }
  :root [data-predict] .pr-card:nth-child(even) { border-left: 1px solid var(--rule); }
}
:root [data-predict] .pr-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 4px; padding: 0; }
:root [data-predict] .pr-ko { font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 24px; line-height: 1; color: var(--ink); }
:root [data-predict] .pr-meta { font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--muted); }
:root [data-predict] .pr-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 50px; padding: 3px 0; }
:root [data-predict] .pr-line + .pr-line { border-top: 1px solid var(--rule); }
:root [data-predict] .pr-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
:root [data-predict] .pr-team .crest { width: 24px; height: 24px; flex: none; }
:root [data-predict] .pr-nm {
  min-width: 0; overflow-wrap: anywhere; font-family: var(--display); font-weight: 650; font-stretch: 92%; font-size: 16px; line-height: 1.2; color: var(--ink);
}
:root [data-predict] .pr-nm.is-mine { font-weight: 800; }
:root [data-predict] .pr-step { display: inline-flex; align-items: center; gap: 4px; }
:root [data-predict] .pr-b {
  display: grid; place-items: center; width: 40px; height: 44px; margin: 0; padding: 0; border: 2px solid var(--ink); border-radius: 3px;
  background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; cursor: pointer;
}
:root [data-predict] .pr-b { -webkit-tap-highlight-color: transparent; }
:root [data-predict] .pr-b:hover, :root [data-predict] .pr-b:active { background: var(--stand); }
:root [data-predict] .pr-in {
  width: 52px; height: 46px; margin: 0; padding: 0; border: 2px solid var(--ink); border-radius: 3px; box-shadow: none;
  background: var(--paper); color: var(--ink); text-align: center; -webkit-appearance: none; appearance: none;
  font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 26px; line-height: 1;
}
:root [data-predict] .pr-in::placeholder { color: transparent; }
:root [data-predict] :is(.pr-b, .pr-in, .pr-nav):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
:root [data-predict] .pr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 4px 0 0; padding: 0; border: 0; }
:root [data-predict] .pr-tick { font-family: var(--display); font-weight: 650; font-size: 14px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root [data-predict] .pr-card.is-set .pr-tick { color: var(--ink); }
@container (max-width: 380px) {
  :root [data-predict] .pr-card { padding: 10px; }
  :root [data-predict] .pr-team { gap: 8px; }
  :root [data-predict] .pr-b { width: 34px; }
  :root [data-predict] .pr-in { width: 44px; }
}
/* Played and locked games: the score on a plate, your call and the points */
:root [data-predict] .pr-final {
  display: inline-grid; place-items: center; min-width: 36px; height: 40px; padding: 0 6px; border-radius: 3px;
  background: var(--plate); color: var(--on-plate); font-family: var(--display); font-weight: 850; font-stretch: 70%; font-size: 24px; line-height: 1;
}
:root [data-predict] .pr-final.pr-live { box-shadow: inset 0 -4px 0 var(--live); }
:root [data-predict] .pr-lock { display: inline-grid; place-items: center; min-width: 36px; height: 40px; font-size: 20px; color: var(--muted); }
:root [data-predict] .pr-you { font-family: var(--display); font-weight: 750; font-size: 14px; color: var(--ink); white-space: nowrap; }
:root [data-predict] .pr-you.pr-none { font-weight: 600; color: var(--muted); }
:root [data-predict] .pr-badge {
  display: inline-flex; align-items: center; padding: 3px 8px 2px; border-radius: 3px; background: none; color: var(--ink);
  font-family: var(--display); font-weight: 750; font-stretch: 85%; font-size: 14px; line-height: 1.25; letter-spacing: 0; text-transform: none;
}
:root [data-predict] .pr-badge.b5 { background: var(--ink); color: var(--paper); }
:root [data-predict] .pr-badge.b2 { border: 2px solid var(--ink); padding: 1px 6px 0; }
:root [data-predict] :is(.pr-badge.b0, .pr-badge.bx) { padding-inline: 0; color: var(--muted); }
:root [data-predict] .pr-badge.pr-inplay { border: 0; padding-inline: 0; color: var(--live); }
/* The rules line and the clear button, under the coupon and the projected table */
:root :is([data-predict], [data-projected]) .pr-rules { margin: 14px 0 0; max-width: 40em; font-family: var(--display); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--muted); }
:root [data-predict] .pr-rules b { font-weight: 750; color: var(--ink); }
:root [data-predict] .pr-clear {
  display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--ink);
  font-family: var(--display); font-weight: 650; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- The projected table (stage F5's .tc-tbl, with the position and club pinned on phones) ---------- */
:root [data-projected] .pt-wrap { margin: 0; border: 0; border-radius: 0; }
:root [data-projected] .pt .pt-pos { position: sticky; left: 0; z-index: 1; width: 32px; min-width: 32px; padding-left: 4px; color: var(--ink-2); font-weight: 600; }
:root [data-projected] .pt :is(tbody th, thead th.l) { position: sticky; left: 32px; z-index: 1; width: 100%; text-align: left; }
:root [data-projected] .pt tbody th { font-weight: 600; color: var(--ink); }
:root [data-projected] .pt .pt-club { display: inline-flex; align-items: center; gap: 8px; }
:root [data-projected] .pt .crest { width: 20px; height: 20px; }

/* ---------- Payouts (shown only once a prize has been paid) ---------- */
:root [data-payouts] .po-row { display: flex; gap: 12px; margin: 0; padding: 4px 0 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
:root [data-payouts] .po-card { flex: 0 0 auto; min-width: 168px; margin: 0; padding: 12px 14px; border: 2px solid var(--ink); background: var(--paper); scroll-snap-align: start; }
:root [data-payouts] .po-amt { font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: 40px; line-height: .9; color: var(--ink); }
:root [data-payouts] .po-who { margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
:root [data-payouts] .po-meta { margin: 2px 0 0; font-family: var(--display); font-size: 14px; color: var(--muted); }
:root [data-payouts] .po-foot { margin: 8px 0 0; font-family: var(--display); font-size: 14px; line-height: 1.45; color: var(--muted); }
:root [data-payouts] .po-foot b { color: var(--ink); }

@media (forced-colors: active) {
  :root [data-predict] .pr-badge.b5 { border: 2px solid; }
}