/* =========================================================
   TOTAL BOUND
   Dark by default, light on request. Every colour is a token
   defined once at :root and re-pointed under the light theme,
   so nothing is hard-coded further down.
   ========================================================= */

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest */
  --bg:            #0A100D;
  --surface:       #101815;
  --surface-2:     #16211C;
  --surface-3:     #1D2B24;
  --hairline:      #23332B;
  --hairline-soft: #1A2620;

  /* Text */
  --text:        #F2F5F2;
  --text-strong: #FFFFFF;
  --text-muted:  #90A398;
  --text-faint:  #63756B;

  /* Brand */
  --turf:      #3DD68C;
  --turf-deep: #1B8F5A;
  --gold:      #F2B441;
  --live:      #FF4D4D;

  /* Feedback */
  --win:  #3DD68C;
  --lose: #FF6B6B;
  --draw: #8A9A91;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .45);

  /* Geometry */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --wrap:      1280px;
  --masthead-h: 62px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #F6F8F6;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-3:     #EEF2EF;
  --hairline:      #DDE5DF;
  --hairline-soft: #E9EFEA;

  --text:        #121A16;
  --text-strong: #000000;
  --text-muted:  #5B6B62;
  --text-faint:  #8B9C92;

  --turf:      #12905A;
  --turf-deep: #0B6B42;
  --gold:      #B87A08;
  --live:      #D92020;

  --win:  #12905A;
  --lose: #C93838;
  --draw: #6B7A72;

  --shadow-sm: 0 1px 2px rgba(16, 30, 22, .06);
  --shadow-md: 0 4px 16px rgba(16, 30, 22, .08);
  --shadow-lg: 0 16px 48px rgba(16, 30, 22, .12);
}

/* When the visitor hasn't chosen, follow the operating system. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg:            #F6F8F6;
    --surface:       #FFFFFF;
    --surface-2:     #FFFFFF;
    --surface-3:     #EEF2EF;
    --hairline:      #DDE5DF;
    --hairline-soft: #E9EFEA;

    --text:        #121A16;
    --text-strong: #000000;
    --text-muted:  #5B6B62;
    --text-faint:  #8B9C92;

    --turf:      #12905A;
    --turf-deep: #0B6B42;
    --gold:      #B87A08;
    --live:      #D92020;

    --win:  #12905A;
    --lose: #C93838;
    --draw: #6B7A72;

    --shadow-sm: 0 1px 2px rgba(16, 30, 22, .06);
    --shadow-md: 0 4px 16px rgba(16, 30, 22, .08);
    --shadow-lg: 0 16px 48px rgba(16, 30, 22, .12);
  }
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--masthead-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Padding belongs with the rest of the reset. Leaving the browser's
   default 1px 6px on meant a fixed-size button had 12px less room
   inside than it looked: the 30px follow button was left with a 16px
   content box for an 18px star, which could not centre in it and sat
   against the right edge. Every button here sets its own spacing. */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

::selection { background: var(--turf); color: #06120C; }

:focus-visible {
  outline: 2px solid var(--turf);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--turf); color: #06120C; padding: 10px 16px;
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { left: 8px; }

.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.page { padding: 24px 0 72px; min-height: 60vh; }

/* =========================================================
   MASTHEAD
   ========================================================= */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.masthead-inner {
  position: relative;   /* the competitions menu spans this row */
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--masthead-h);
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.site-logo { width: 40px; height: 40px; color: var(--turf); }

/**
 * The wordmark is a two-line lockup: TOTALBOUND with FOOTBALL beneath.
 * The sub-line's letter-spacing is tuned so it renders the same width as
 * the name above it, which is what makes the two lines sit as one mark.
 * Change the font-size and the tracking has to be retuned to match.
 */
.brand-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1;
}
.brand-line { display: block; }
.brand-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .185em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
  padding-left: 2px;
}
.brand-total { color: var(--text-strong); }
.brand-bound { color: var(--turf); }

.primary-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; flex: 1; }

.nav-link {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-link .icon { width: 16px; height: 16px; }
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.is-active { color: var(--text-strong); background: var(--surface-3); }

.nav-dropdown { position: static; }   /* panel anchors to .masthead-inner */
.nav-dropdown .chevron { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav-dropdown button[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/**
 * The competitions menu spans the masthead rather than hanging off its
 * button. Anchored to the button, 27 competitions either ran off the
 * bottom of the screen with no scroll — which hid everything past the
 * fifteenth — or off the right-hand edge once widened into columns.
 * Spanning the header gives four columns room for full names at any
 * desktop width.
 */
.dropdown-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 110;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 20px;
  align-items: start;

  /* On a short window it scrolls rather than running off the bottom. */
  max-height: calc(100vh - var(--masthead-h) - 24px);
  overflow-y: auto;
}

.dropdown-group { min-width: 0; }
.dropdown-heading {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 6px 10px 5px;
  margin: 0 0 2px;
  border-bottom: 1px solid var(--hairline-soft);
}
.dropdown-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 14px;
}
.dropdown-item:hover { background: var(--surface-3); }
.dropdown-country { margin-left: auto; color: var(--text-faint); font-size: 12px; }

.masthead-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0 14px;
  height: 36px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.search-box:focus-within { border-color: var(--turf); background: var(--surface); }
.search-box .icon { width: 15px; height: 15px; color: var(--text-faint); }
.search-box input {
  border: 0; background: none; color: var(--text);
  font-size: 13.5px; width: 150px; outline: none;
}
.search-box input::placeholder { color: var(--text-faint); }

/* Timezone picker. The native select does the work — it is the one
   control that behaves properly on a phone — but sits invisibly over a
   styled pill showing the current offset. */
.tz-picker {
  position: relative;
  display: flex; align-items: center;
  height: 36px;
}
.tz-label {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.tz-label .icon { width: 15px; height: 15px; }
.tz-picker:hover .tz-label { color: var(--text); border-color: var(--turf); }
.tz-select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  border: 0; appearance: none;
  font: inherit;
}
.tz-picker:focus-within .tz-label {
  border-color: var(--turf);
  color: var(--text);
}
.tz-go { margin-left: 6px; padding: 4px 10px; font-size: 12.5px; border: 1px solid var(--hairline); border-radius: 6px; }

/* "(TV)" / "(Streaming)" beside a broadcaster, in the facts bar.
   The facts bar makes every span an inline-flex item with a 6px gap,
   which would space out each channel name, its label and the comma
   between them. The list is one item; inside it, ordinary text. */
.scoreboard-facts .watch-list,
.scoreboard-facts .watch-kind { display: inline; }
.watch-kind { color: var(--text-faint); font-size: 11.5px; }
.watch-kind::before { content: ' ('; }
.watch-kind::after  { content: ')'; }

/* The zone the times are in, shown beside the kick-off on a match page. */
.tz-note {
  margin-left: 6px;
  color: var(--text-faint);
  font-size: 11.5px;
}

.icon-button {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-button:hover { background: var(--surface-2); color: var(--text); }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}

.menu-toggle { display: none; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* =========================================================
   LIVE TICKER
   ========================================================= */

.ticker {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: var(--masthead-h);
  z-index: 90;
}
.ticker-inner {
  display: flex; align-items: center; gap: 8px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 12px;
  height: 52px;
}

.ticker-label {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
  border-right: 1px solid var(--hairline);
  height: 24px;
  flex-shrink: 0;
}
.ticker-label .icon { width: 14px; height: 14px; }
.ticker-live-count { color: var(--live); }

.ticker-rail {
  display: flex; gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  padding: 4px 0;
}
.ticker-rail::-webkit-scrollbar { display: none; }

.ticker-chip {
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
  padding: 6px 11px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  font-size: 12.5px;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.ticker-chip:hover { border-color: var(--league-color, var(--turf)); transform: translateY(-1px); }
.ticker-chip.is-live { border-color: color-mix(in srgb, var(--live) 45%, transparent); }

/* Each club's crest sits on the outside of its abbreviation, so a chip
   reads crest, club, score, club, crest, then the time. The pairs are
   tighter than the gap around the score, so each crest belongs visibly
   to the club beside it rather than floating between the two. */
.chip-league {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--league-color, var(--text-faint));
  text-transform: uppercase;
  flex-shrink: 0;
}
.chip-teams { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.chip-team { color: var(--text-muted); font-size: 12px; letter-spacing: .02em; }
.chip-crest { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.chip-crest.crest-fallback { width: 18px; height: 18px; font-size: 8px; }
.chip-score { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-strong); letter-spacing: .5px; margin: 0 3px; }
.chip-score .sep { color: var(--text-faint); margin: 0 1px; font-weight: 500; }
.chip-status { font-size: 10.5px; font-weight: 700; color: var(--text-faint); min-width: 26px; text-align: right; }
.ticker-chip.is-live .chip-status { color: var(--live); }

.ticker-arrow {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.ticker-arrow:hover { color: var(--text); border-color: var(--turf); }
.ticker-arrow .icon { width: 14px; height: 14px; }

.ticker-all {
  flex-shrink: 0; font-size: 12px; font-weight: 600;
  color: var(--turf); padding-left: 8px;
  border-left: 1px solid var(--hairline);
  height: 24px; display: flex; align-items: center;
}

/* The pulsing dot that marks anything in progress. */
.live-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  flex-shrink: 0;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  50%      { opacity: .65; box-shadow: 0 0 0 4px transparent; }
}

.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--live) 14%, transparent);
  color: var(--live);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* =========================================================
   PANELS AND SECTION HEADINGS
   ========================================================= */

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 20px;
}
.panel:last-child { margin-bottom: 0; }

.sticky-panel { position: sticky; top: calc(var(--masthead-h) + 68px); }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline-soft);
}
.section-head h2 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-strong);
}
.section-head h2 .icon { width: 17px; height: 17px; color: var(--turf); }

.section-link {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  transition: color .15s var(--ease);
}
.section-link:hover { color: var(--turf); }
.section-link .icon { width: 14px; height: 14px; }

.section-count {
  font-size: 12px; font-weight: 600; color: var(--text-faint);
  background: var(--surface-3); padding: 2px 8px; border-radius: 999px;
}

.league-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--league-color, var(--turf));
  flex-shrink: 0;
}

/* ---- Competition badges ----
   Two artworks are written out for leagues whose badge is drawn in dark
   ink, and the theme picks one. The site is dark by default, so the dark
   cut is the one on show at :root; :only-child covers every league that
   ships a single artwork, which would otherwise be hidden along with it. */
.league-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--badge-size, 20px); height: var(--badge-size, 20px);
  flex-shrink: 0;
}
.league-badge img { width: 100%; height: 100%; object-fit: contain; }
.league-badge .badge-light { display: none; }
.league-badge .badge-dark  { display: block; }
.league-badge img:only-child { display: block; }

:root[data-theme="light"] .league-badge .badge-light { display: block; }
:root[data-theme="light"] .league-badge .badge-dark  { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .league-badge .badge-light { display: block; }
  :root:not([data-theme="dark"]) .league-badge .badge-dark  { display: none; }
}

.panel-footer-link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 13px; font-weight: 600; color: var(--turf);
}
.panel-footer-link .icon { width: 15px; height: 15px; }

.panel-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; }
.panel-note code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

/* =========================================================
   PAGE HEADERS
   ========================================================= */

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 700; letter-spacing: .01em; text-transform: uppercase;
  color: var(--text-strong);
}
.page-sub {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; color: var(--text-muted); font-size: 14px;
}

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted);
  padding: 14px 0 10px;
}
.breadcrumb .icon { width: 13px; height: 13px; opacity: .5; }
.breadcrumb a:hover { color: var(--turf); }
.breadcrumb-comp { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   STORIES
   ========================================================= */

.lead-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  margin-bottom: 26px;
}
.lead-secondary { display: grid; grid-template-rows: repeat(2, 1fr); gap: 14px; }

.story { display: block; position: relative; transition: transform .2s var(--ease); }

/* --- Hero --- */
.story-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}
.story-hero .story-image {
  position: absolute; inset: 0;
  display: block;
}
.story-hero .story-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.story-hero:hover .story-image img { transform: scale(1.035); }
.story-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 12, 9, .96) 8%, rgba(6, 12, 9, .72) 42%, rgba(6, 12, 9, .12) 78%);
}
.story-hero.no-image { background: linear-gradient(140deg, var(--surface-3), var(--surface)); }
.story-hero.no-image::after { display: none; }
.story-hero .story-body { position: relative; z-index: 2; padding: 26px; width: 100%; }
.story-hero .story-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 38px);
  font-weight: 700; letter-spacing: .005em;
  color: #FFF;
  margin-bottom: 8px;
}
.story-hero.no-image .story-title { color: var(--text-strong); }
.story-hero .story-standfirst { color: rgba(255, 255, 255, .78); font-size: 14.5px; margin-bottom: 10px; }
.story-hero.no-image .story-standfirst { color: var(--text-muted); }
.story-hero .story-meta { color: rgba(255, 255, 255, .72); }
.story-hero.no-image .story-meta { color: var(--text-muted); }

/* --- Card --- */
.story-card {
  display: flex; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.story-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.story-card .story-image {
  width: 116px; flex-shrink: 0;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-3);
  aspect-ratio: 4 / 3;
}
.story-card .story-image img { width: 100%; height: 100%; object-fit: cover; }
.story-card .story-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.story-card .story-title { font-size: 15px; font-weight: 600; line-height: 1.32; }
.story-card .story-standfirst {
  font-size: 13px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-card .story-meta { margin-top: auto; }

/* The homepage news grid */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

/* --- Dense list row --- */
.story-list { display: flex; flex-direction: column; }
.story-list-item, .story-list > .story-list {
  /* placeholder to keep specificity predictable */
}
.story-list .story {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.story-list .story:last-child { border-bottom: 0; padding-bottom: 0; }
.story-list .story:first-child { padding-top: 0; }
.story-list .story-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.story-list .story-title {
  font-size: 15px; font-weight: 600; line-height: 1.34;
  transition: color .15s var(--ease);
}
.story-list .story:hover .story-title { color: var(--turf); }

/* --- Sidebar rail --- */
.rail-list { display: flex; flex-direction: column; }
.rail-list .story { padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); }
.rail-list .story:last-child { border-bottom: 0; padding-bottom: 0; }
.rail-list .story:first-child { padding-top: 0; }
.story-rail .story-title { font-size: 13.5px; font-weight: 600; line-height: 1.38; margin-bottom: 5px; }
.story-rail:hover .story-title { color: var(--turf); }

.story-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }

.league-tag {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--league) 16%, transparent);
  color: var(--league);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--league) 30%, transparent);
}
.story-hero .league-tag { background: color-mix(in srgb, var(--league) 82%, #000); color: #FFF; border-color: transparent; }

.transfer-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.transfer-tag .icon { width: 11px; height: 11px; }

.story-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-faint);
}
.source-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.source-name { font-weight: 600; color: var(--text-muted); }
.dot-sep { opacity: .5; }

/* =========================================================
   HOME LAYOUT
   ========================================================= */

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 22px; align-items: start; }
.home-main { min-width: 0; }
.home-rail { min-width: 0; }

.following-strip { margin-bottom: 20px; }
.following-rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.following-rail::-webkit-scrollbar { display: none; }
.following-card {
  flex-shrink: 0; min-width: 168px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 10px 12px;
}
.following-card .following-team { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.following-card .following-detail { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.text-button { padding: 2px 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.text-button:hover { color: var(--live); }

/* =========================================================
   MATCH CARDS
   ========================================================= */

.match-list { display: flex; flex-direction: column; }
.match-group { margin-bottom: 14px; }
.match-group:last-child { margin-bottom: 0; }
.match-group-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0 6px;
}
.match-group-head a:hover { color: var(--turf); }

.match-day-head {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 4px;
}
.match-day-head:first-child { padding-top: 0; }

.match-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
  position: relative;
}
.match-card:hover { background: var(--surface-2); border-color: var(--hairline); }
.match-card.full { grid-template-columns: 56px minmax(0, 1fr) auto 44px; }
.match-card.is-live { background: color-mix(in srgb, var(--live) 5%, transparent); }
.match-card.is-live:hover { background: color-mix(in srgb, var(--live) 9%, transparent); }

.match-status {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-faint);
  letter-spacing: .02em;
}
.match-status.is-live { color: var(--live); }

.match-teams { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.team-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-row.is-dimmed { opacity: .58; }
.team-row.is-winner .team-name { font-weight: 700; }
.team-name {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.crest { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.crest-fallback {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-muted);
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
}

.match-score {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  color: var(--text-strong);
  line-height: 1.25;
  min-width: 26px;
}
.match-score .sep { color: var(--text-faint); font-size: 14px; font-weight: 500; }
.match-card.compact .match-score { flex-direction: row; gap: 4px; }
.match-card.compact .match-score .sep { margin: 0 1px; }

.match-league {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--league-color, var(--text-faint));
  text-align: right;
}

/* A score that changes while you're watching gets a brief highlight. */
@keyframes score-flash {
  0%   { background: color-mix(in srgb, var(--turf) 42%, transparent); }
  100% { background: transparent; }
}
.score-changed { animation: score-flash 1.6s var(--ease); border-radius: 6px; }

/* =========================================================
   FIXTURE RAIL
   ========================================================= */

/* Swipeable on a phone, where a grid of 196px cards would be one per
   row and run for pages. */
.fixture-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.fixture-card {
  flex-shrink: 0; width: 196px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--league-color, var(--turf));
  border-radius: var(--radius);
  padding: 12px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.fixture-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fixture-league {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--league-color, var(--text-faint));
}
.fixture-teams { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; }
.fixture-team { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.fixture-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fixture-team .crest { width: 20px; height: 20px; }
.fixture-when { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }

/* =========================================================
   SCORES PAGE
   ========================================================= */

.scores-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }

/**
 * The whole rail travels, not the panel inside it.
 *
 * .sticky-panel on its own never did anything here: a sticky element
 * can only move within its containing block, and the rail is barely
 * taller than the panel it holds, so "Jump to" scrolled away within a
 * few hundred pixels of a page that runs to eight thousand. A jump nav
 * that leaves the screen is no use to the person jumping.
 *
 * Sticking the rail keeps it alongside the scores the whole way down.
 * The height cap matters on a busy day: without it a rail taller than
 * the window would pin with its last competitions permanently below the
 * fold and no way to reach them.
 */
.scores-rail {
  position: sticky;
  top: calc(var(--masthead-h) + 68px);
  max-height: calc(100vh - var(--masthead-h) - 88px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.scores-rail .sticky-panel { position: static; }

.date-jump input[type="date"] {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 12px; font: inherit; font-size: 13.5px;
}

.date-strip { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.date-strip-rail { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; padding: 2px; }
.date-strip-rail::-webkit-scrollbar { display: none; }

.date-pill {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 1; min-width: 62px;
  padding: 8px 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.date-pill:hover { border-color: var(--turf); }
.date-pill.is-selected { background: var(--turf); border-color: var(--turf); color: #06120C; }
.date-pill.is-today:not(.is-selected) { border-color: color-mix(in srgb, var(--turf) 50%, transparent); }
.date-dow { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }
.date-num { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1; }
.date-mon { font-size: 10px; font-weight: 600; opacity: .72; }

.date-arrow {
  display: grid; place-items: center;
  width: 38px; height: 46px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); color: var(--text-muted);
  flex-shrink: 0;
}
.date-arrow:hover { color: var(--text); border-color: var(--turf); }

.jump-list { display: flex; flex-direction: column; }
.jump-list a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 6px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--text-muted);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.jump-list a:hover { background: var(--surface-3); color: var(--text); }
.jump-count { margin-left: auto; font-size: 11.5px; color: var(--text-faint); font-weight: 600; }

.refresh-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
}

/* =========================================================
   TABS AND CHIPS
   ========================================================= */

.tab-strip {
  display: flex; gap: 4px; overflow-x: auto;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 20px;
  scrollbar-width: none;
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text-strong); border-bottom-color: var(--league-color, var(--turf)); }

.filter-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar .filter-chips { margin-bottom: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
.filter-bar .filter-chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-muted);
  transition: all .15s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--chip-color, var(--turf)); }
.chip.is-active {
  background: var(--chip-color, var(--turf));
  border-color: var(--chip-color, var(--turf));
  color: #06120C;
}
:root[data-theme="light"] .chip.is-active { color: #FFF; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .chip.is-active { color: #FFF; }
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-color, var(--turf)); }

/* An active chip is filled with the league's own colour, which is the
   one background a league badge cannot be read on. Give it a white disc
   to sit on, and pin it to the artwork drawn for light backgrounds —
   the theme is irrelevant once the badge has its own ground. */
.chip.is-active .league-badge {
  background: #FFF; border-radius: 50%;
  box-shadow: 0 0 0 2px #FFF;
}
.chip.is-active .league-badge .badge-light { display: block; }
.chip.is-active .league-badge .badge-dark  { display: none; }
.chip.is-active .chip-dot { background: currentColor; }

/* =========================================================
   LEAGUE TABLES
   ========================================================= */

.tables-layout, .competition-layout, .status-layout, .transfers-layout, .match-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start;
}
.tables-main, .competition-main, .status-main, .transfers-main, .match-main { min-width: 0; }

.table-scroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }

.league-table { font-size: 13.5px; min-width: 560px; }
.league-table.compact { min-width: 0; }

.league-table thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  padding: 0 6px 9px;
  border-bottom: 1px solid var(--hairline);
}
.league-table thead th.col-team { text-align: left; }
.league-table thead th.col-pos { text-align: center; width: 34px; }
.league-table thead th.col-form { text-align: right; }

.league-table tbody td {
  padding: 9px 6px;
  text-align: center;
  border-bottom: 1px solid var(--hairline-soft);
}
.league-table tbody tr:last-child td { border-bottom: 0; }
.league-table tbody tr:hover td { background: var(--surface-2); }

.col-pos { position: relative; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.col-team { text-align: left !important; }
.col-team { display: flex; align-items: center; gap: 9px; }
.league-table .crest, .league-table .crest-fallback { width: 20px; height: 20px; }
.table-team-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-team-tla { display: none; font-weight: 700; }
.col-pts { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.col-gd, .league-table tbody td { font-variant-numeric: tabular-nums; }
.col-form { text-align: right !important; white-space: nowrap; }

/* Qualification zones: a coloured spine on the position column. */
.league-table tbody tr.zone-champions .col-pos::before,
.league-table tbody tr.zone-europa .col-pos::before,
.league-table tbody tr.zone-conference .col-pos::before,
.league-table tbody tr.zone-promotion .col-pos::before,
.league-table tbody tr.zone-playoff .col-pos::before,
.league-table tbody tr.zone-eliminated .col-pos::before,
.league-table tbody tr.zone-relegation .col-pos::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px;
}
.zone-champions  .col-pos::before, .key-swatch.zone-champions  { background: #2563EB; }
.zone-europa     .col-pos::before, .key-swatch.zone-europa     { background: #EA580C; }
.zone-conference .col-pos::before, .key-swatch.zone-conference { background: #0D9488; }
.zone-promotion  .col-pos::before, .key-swatch.zone-promotion  { background: var(--turf); }
.zone-playoff    .col-pos::before, .key-swatch.zone-playoff    { background: #A855F7; }
.zone-relegation .col-pos::before, .key-swatch.zone-relegation { background: var(--live); }
.zone-eliminated .col-pos::before, .key-swatch.zone-eliminated { background: var(--text-faint); }

.table-group {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 8px;
}

.table-key, .legend-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.legend-list { flex-direction: column; gap: 9px; }
.key-item, .legend-list li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.key-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-note { font-size: 12px; color: var(--text-faint); line-height: 1.6; margin-top: 12px; }

.form-pill {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-left: 3px;
  border-radius: 4px;
  font-size: 9.5px; font-weight: 700; color: #FFF;
}
.form-w { background: var(--win); color: #06120C; }
.form-d { background: var(--draw); }
.form-l { background: var(--lose); }
.form-empty { color: var(--text-faint); }
:root[data-theme="light"] .form-w { color: #FFF; }

/* =========================================================
   TOP SCORERS
   ========================================================= */

.scorer-list { display: flex; flex-direction: column; }
.scorer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.scorer-row:last-child { border-bottom: 0; padding-bottom: 0; }
.scorer-row:first-child { padding-top: 0; }
.scorer-rank {
  width: 20px; font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-faint); text-align: center; flex-shrink: 0;
}
.scorer-row:first-child .scorer-rank { color: var(--gold); }
.scorer-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.scorer-name strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scorer-team { font-size: 11.5px; color: var(--text-faint); }
.scorer-goals {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--text-strong); min-width: 24px; text-align: right;
}

/* =========================================================
   COMPETITION HUB
   ========================================================= */

.competition-hero {
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 900px 320px at 12% -20%, color-mix(in srgb, var(--league-color) 22%, transparent), transparent 70%),
    var(--surface);
  margin-bottom: 24px;
}
.competition-title { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; }
.competition-badge {
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: var(--radius);
  background: var(--league-color); color: #FFF;
  font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: .04em;
  flex-shrink: 0;
}
/* With a real badge in it the tile stops being the league's colour block:
   a crest printed on its own colour is the one place it disappears. The
   colour stays as a wash behind it and on the hero gradient above. */
.competition-badge.has-logo {
  background: color-mix(in srgb, var(--league-color) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--league-color) 30%, var(--hairline));
}
.competition-title h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--text-strong);
}
.competition-meta { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }

/* =========================================================
   MATCH CENTRE
   ========================================================= */

.match-hero {
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 900px 340px at 50% -30%, color-mix(in srgb, var(--league-color) 20%, transparent), transparent 70%),
    var(--surface);
  margin-bottom: 24px;
}
.match-hero.is-live {
  background:
    radial-gradient(ellipse 900px 340px at 50% -30%, color-mix(in srgb, var(--live) 16%, transparent), transparent 70%),
    var(--surface);
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px 0 22px;
}
.scoreboard-team { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.scoreboard-crest { width: 72px; height: 72px; object-fit: contain; }
span.scoreboard-crest {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-3); color: var(--text-muted);
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
}
.scoreboard-name {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 25px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  text-align: center; color: var(--text-strong);
}

.follow-button {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--text-faint);
  border: 1px solid var(--hairline);
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.follow-button:hover { color: var(--gold); border-color: var(--gold); }
.follow-button.is-following { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.follow-button.is-following .icon { fill: var(--gold); }

.scoreboard-centre { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.scoreboard-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-3);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
}
.scoreboard-status.is-live { background: color-mix(in srgb, var(--live) 15%, transparent); color: var(--live); }
.scoreboard-score {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 66px); font-weight: 700;
  color: var(--text-strong); line-height: 1;
}
.scoreboard-score .sep { color: var(--text-faint); font-size: .6em; }
.kickoff-time { font-size: .72em; color: var(--text-muted); }
.scoreboard-sub { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }

.scoreboard-facts {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12.5px; color: var(--text-muted);
}
.scoreboard-facts span { display: inline-flex; align-items: center; gap: 6px; }
.scoreboard-facts .icon { width: 15px; height: 15px; color: var(--text-faint); }

/* --- Timeline --- */
.timeline { display: flex; flex-direction: column; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--hairline);
}
.timeline-event { display: flex; align-items: center; gap: 12px; padding: 7px 0; position: relative; }
/**
 * Both sides hug the centre line. The home half reads outward from the
 * divider and the away half reads back towards it, which is what makes
 * the two columns mirror each other — flex-start on the home side left
 * its entries stranded at the panel edge, a screen's width from the
 * away ones they are meant to sit opposite.
 *
 * The 30px gutter is fixed rather than a percentage because it has to
 * clear the minute marker sitting on the line, and the widest of those
 * ("90+4'") is a fixed width — as a percentage it collided with the
 * text on a narrow panel.
 */
.timeline-event.is-home { justify-content: flex-end; padding-right: calc(50% + 30px); }
.timeline-event.is-away { justify-content: flex-end; padding-left: calc(50% + 30px); flex-direction: row-reverse; }

/**
 * Centred vertically within its own row, not just horizontally. Without
 * the top/translateY the minute sat at the row's static position while
 * the event text was centred, so the two drifted apart and the timeline
 * read as a column of numbers with blank rows between the entries.
 */
.event-minute {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--text-faint);
  background: var(--surface); padding: 1px 5px; z-index: 1;
}
.event-body { display: flex; align-items: center; gap: 8px; }
.timeline-event.is-away .event-body { flex-direction: row-reverse; }
.event-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0; }
.event-goal .event-icon { background: color-mix(in srgb, var(--turf) 22%, transparent); color: var(--turf); }
.event-yellow-card .event-icon { color: #EAB308; }
.event-red-card .event-icon { color: var(--live); }
.event-substitution .event-icon { color: var(--text-faint); }
.event-text { display: flex; flex-direction: column; font-size: 13px; }
.timeline-event.is-away .event-text { align-items: flex-end; }
.event-detail { font-size: 11.5px; color: var(--text-faint); }

/* --- Stats --- */
.stat-list { display: flex; flex-direction: column; gap: 13px; }
/* 56px, not 42px: the value columns were sized for bare counts, and
   possession now carries a percent sign. "64.4%" fits 42px in Barlow
   Condensed but needs 53px in the fallback stack, so the column has to
   hold the wider one or the sign is clipped wherever the webfont fails. */
.stat-row { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 12px; }
.stat-value { font-family: var(--font-display); font-size: 16px; font-weight: 700; text-align: center; }
.stat-middle { display: flex; flex-direction: column; gap: 5px; }
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.stat-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.stat-fill { height: 100%; transition: width .4s var(--ease); }
.stat-fill.home { background: var(--turf); }
.stat-fill.away { background: var(--text-faint); }

/* --- Lineups --- */
.lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lineup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lineup-head strong { font-size: 14px; }
.lineup-formation {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--turf); letter-spacing: .06em;
}
.lineup-list { display: flex; flex-direction: column; }
.lineup-list li { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 13px; }
.lineup-list li:last-child { border-bottom: 0; }
.shirt {
  display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 4px;
  background: var(--surface-3); color: var(--text-muted);
  font-size: 10.5px; font-weight: 700; flex-shrink: 0;
  /* A shirt number sits in a fixed square, so it has to be centred both
     ways. line-height:1 is the vertical half: inherited line spacing
     makes the line box taller than the digits, leaving them low in the
     square. tabular-nums keeps 1 and 11 the same width. */
  line-height: 1; font-variant-numeric: tabular-nums;
}
.player-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-pos { font-size: 10.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .04em; }
.bench { margin-top: 10px; }
.bench summary { font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 6px 0; }
.bench summary:hover { color: var(--turf); }
.lineup-coach { font-size: 12px; color: var(--text-faint); margin-top: 10px; }

/* =========================================================
   UTILITY BLOCKS
   ========================================================= */

.empty-state {
  padding: 26px 20px;
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
}
.empty-hint { font-size: 12.5px; color: var(--text-faint); margin-top: 7px; }

.notice {
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13.5px; margin-bottom: 20px;
  border: 1px solid;
}
.notice-warn {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  color: var(--text);
}
.notice a { color: var(--turf); font-weight: 600; }

.button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--hairline);
  font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.button:hover { border-color: var(--turf); }
.button-primary { background: var(--turf); border-color: var(--turf); color: #06120C; }
.button-primary:hover { filter: brightness(1.08); }
.button .icon { width: 15px; height: 15px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.pagination-status { font-size: 13px; color: var(--text-muted); }

.search-page-form {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 8px 8px 8px 16px;
  margin-bottom: 22px;
}
.search-page-form .icon { color: var(--text-faint); }
.search-page-form input {
  flex: 1; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 15px; outline: none; min-width: 0;
}

.suggestion-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.suggestion {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline);
  font-size: 13.5px; color: var(--text-muted);
}
.suggestion:hover { border-color: var(--turf); color: var(--text); }
.suggestion .icon { width: 14px; height: 14px; }

.error-page { text-align: center; padding: 72px 20px; }
.error-code {
  font-family: var(--font-display); font-size: 96px; font-weight: 700;
  color: var(--turf); line-height: 1; display: block;
}
.error-page h1 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; margin: 12px 0 8px; }
.error-page p { color: var(--text-muted); margin-bottom: 22px; }
.error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Status page */
.status-table { font-size: 13px; min-width: 520px; }
.status-table th {
  text-align: left; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
  padding: 0 10px 9px 0; border-bottom: 1px solid var(--hairline);
}
.status-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hairline-soft); }
.status-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.status-pill.is-ok { background: color-mix(in srgb, var(--turf) 16%, transparent); color: var(--turf); }
.status-pill.is-bad { background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--live); }
/* Neither working nor broken: a resource this API plan does not include. */
.status-pill.is-note { background: color-mix(in srgb, var(--text-muted) 16%, transparent); color: var(--text-muted); }

.definition-list { display: flex; flex-direction: column; gap: 2px; }
.definition-list dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-top: 10px; }
.definition-list dt:first-child { margin-top: 0; }
.definition-list dd { margin: 0; font-size: 13.5px; }

.log-block {
  background: var(--bg); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text-muted);
  overflow-x: auto; margin: 0; line-height: 1.7;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding: 44px 0 28px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
.footer-logo { width: 40px; height: 40px; color: var(--turf); margin-bottom: 12px; }
.footer-blurb { font-size: 13px; color: var(--text-muted); line-height: 1.65; max-width: 40ch; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 3px;
}
.footer-col a { font-size: 13.5px; color: var(--text-muted); }
.footer-comp { display: inline-flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: var(--turf); }
.footer-meta { font-size: 12px; color: var(--text-faint); }
.footer-meta a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

.footer-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--hairline-soft);
  font-size: 12px; color: var(--text-faint);
}
.footer-legal a { color: var(--text-muted); }
.footer-legal a:hover { color: var(--turf); }

/* =========================================================
   MOBILE TAB BAR
   ========================================================= */

.mobile-tabs {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tabs a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px;
  font-size: 10px; font-weight: 600;
  color: var(--text-faint);
}
.mobile-tabs a.is-active { color: var(--turf); }
.mobile-tabs .icon { width: 20px; height: 20px; }

/* =========================================================
   ABOUT AND PRIVACY
   Long-form pages. Everything else on the site is dense and
   scannable; these two are meant to be read, so the measure is
   narrower and the line height taller.
   ========================================================= */
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.about-rail { position: sticky; top: calc(var(--masthead-h) + 16px); }

.prose { line-height: 1.65; color: var(--text-muted); font-size: 14.5px; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase; color: var(--text-strong);
  margin: 0 0 10px;
}
.prose p { margin: 0 0 12px; max-width: 66ch; }
.prose p:last-child, .prose ul:last-child, .prose table:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 12px; padding-left: 20px; max-width: 66ch; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: var(--surface-2);
  border-radius: 4px; padding: 1px 5px; color: var(--text);
}

/* The news outlets, as chips rather than a bulleted column. */
.source-grid { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; max-width: none; }
.source-grid li {
  margin: 0; padding: 4px 10px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 999px; font-size: 12.5px; color: var(--text);
}

.privacy-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 13.5px; }
.privacy-table th {
  text-align: left; padding: 6px 10px 6px 0;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--hairline);
}
.privacy-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
.privacy-table tr:last-child td { border-bottom: 0; }
/* Keep a key like tb_tz on one line, but let the cell around it wrap.
   Applying nowrap to the whole cell held the GDPR table's first column —
   "IP address, time of request, page requested, user-agent…" — on a
   single unbreakable line, which forced the table to 709px and pushed it
   off the side of a phone. */
.privacy-table td:first-child code { white-space: nowrap; }

.about-tier { margin-bottom: 12px; }
.about-tier:last-child { margin-bottom: 0; }
.about-tier h3 {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 3px;
}
.about-tier p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.about-links, .privacy-glance { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.about-links a { color: var(--text); font-size: 13.5px; }
.about-links a:hover { color: var(--turf); }
.privacy-glance li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.glance-no, .glance-yes {
  display: grid; place-items: center;
  min-width: 24px; height: 22px; padding: 0 6px;
  border-radius: 6px; font-size: 11px; font-weight: 700;
  font-family: var(--font-display); letter-spacing: .03em;
}
.glance-no { background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--live); }
.glance-yes { background: color-mix(in srgb, var(--turf) 18%, transparent); color: var(--turf); }

/* On a wide screen the fixtures wrap into a grid instead of scrolling
   sideways. Two reasons: more of them are visible at once without any
   swiping, and it lengthens the left column, which had been ending well
   short of the right one — the rail ran 474px past it.

   The rail's last panel then stretches to take up whatever difference
   remains, so the two columns finish level whatever the day's content
   happens to be, rather than only on the day this was measured. */
@media (min-width: 1025px) {
  .fixture-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
  }
  .fixture-card { width: auto; }

  .home-grid { align-items: stretch; }
  .home-rail { display: flex; flex-direction: column; }
  .home-rail > section:last-child { flex: 1; }
}

/* Club and competition hits on the search page, above the stories. */
.entity-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.entity-hit {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.entity-hit:hover { border-color: var(--turf); background: var(--surface); }
.entity-hit .crest { width: 22px; height: 22px; flex-shrink: 0; }
.entity-name { font-weight: 600; color: var(--text-strong); font-size: 13.5px; }
.entity-meta { margin-left: auto; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* =========================================================
   FORMATION PITCHES
   The starting eleven laid out on grass, above the list.
   Each side gets its own half, attacking upwards, so the two
   read side by side the way the lists below them already do.
   ========================================================= */
.pitches { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.pitch-head {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-strong);
}

.pitch {
  position: relative;
  display: flex; flex-direction: column-reverse;   /* keeper at the bottom */
  justify-content: space-between;
  gap: 2px;
  aspect-ratio: 3 / 4;
  /* Room at the top for the furthest forward's name, and enough at the
     bottom that the keeper sits on the six-yard line rather than above
     an empty box. */
  padding: 16px 6px 10px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--turf) 16%, transparent) 0 12.5%,
      color-mix(in srgb, var(--turf) 11%, transparent) 12.5% 25%
    ),
    color-mix(in srgb, var(--turf) 13%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--turf) 28%, transparent);
}

/* Markings, drawn from the keeper's end since that is the half shown.
   The wrapper has to come out of flow: as a plain div it counted as a
   flex item, and space-between handed it the bottom slot, which lifted
   the goalkeeper off his line and left a band of empty grass. */
.pitch-markings { position: absolute; inset: 0; }
.pitch-markings > span {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--turf) 34%, transparent);
  pointer-events: none;
}
.pitch-box    { left: 24%; right: 24%; bottom: -1px; height: 13%; border-bottom: 0; }
.pitch-six    { left: 38%; right: 38%; bottom: -1px; height: 5%;  border-bottom: 0; }
.pitch-arc    { left: 40%; right: 40%; bottom: 13%; height: 5%; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom: 0; }
.pitch-half   { left: 0; right: 0; top: 0; height: 0; }
.pitch-centre { left: 32%; right: 32%; top: -8%; height: 16%; border-radius: 50%; }

.pitch-row { display: flex; justify-content: space-evenly; align-items: center; gap: 2px; position: relative; z-index: 1; }

.pitch-player {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; flex: 0 1 auto; text-align: center;
}
.pitch-shirt {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--turf) 55%, transparent);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--text-strong); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pitch-name {
  max-width: 66px;
  font-size: 10px; line-height: 1.2; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One side announced and the other not yet. Same footprint as a pitch
   so the pair stays level, without pretending to be one. */
.pitch.is-pending {
  display: grid; place-items: center; padding: 18px;
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--hairline);
}
.pitch.is-pending p { margin: 0; max-width: 24ch; text-align: center; font-size: 12.5px; color: var(--text-faint); }

/* Substituted off — still where they played, but faded. */
.pitch-player.is-off { opacity: .55; }
.pitch-player.is-off .pitch-shirt { border-style: dashed; }

/* =========================================================
   COMMENTARY, FORM AND HEAD TO HEAD
   All three come from the match summary the site already
   fetched and was discarding.
   ========================================================= */
.commentary { list-style: none; margin: 0; padding: 0; }
.commentary-line {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
}
.commentary-line:last-child { border-bottom: 0; }
.commentary-clock {
  flex: 0 0 42px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.commentary-text { flex: 1; }
/* The three kinds worth picking out of a wall of text. */
.commentary-line.is-goal { color: var(--text-strong); font-weight: 600; }
.commentary-line.is-goal .commentary-clock { color: var(--turf); }
.commentary-line.is-yellow-card .commentary-clock { color: #EAB308; }
.commentary-line.is-red-card .commentary-clock { color: var(--live); }
.commentary-more { margin-top: 10px; }
.commentary-more summary {
  cursor: pointer; padding: 8px 0;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.commentary-more summary:hover { color: var(--turf); }

.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-side-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text-strong);
}
.form-games { list-style: none; margin: 0; padding: 0; }
.form-games li {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px;
  align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 13px; color: var(--text-muted);
}
.form-games li:last-child { border-bottom: 0; }
.form-result {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 5px; font-size: 11px; font-weight: 700;
}
.form-opponent { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-score { font-variant-numeric: tabular-nums; }
.form-comp { font-size: 11px; color: var(--text-faint); }

.h2h-summary {
  margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--text-strong);
}
.h2h-list { list-style: none; margin: 0; padding: 0; }
.h2h-list li {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: 13px; color: var(--text-muted);
}
.h2h-list li:last-child { border-bottom: 0; }
.h2h-date { font-size: 12px; color: var(--text-faint); }
.h2h-teams { color: var(--text); }
.h2h-teams strong { color: var(--text-strong); font-variant-numeric: tabular-nums; padding: 0 4px; }
.h2h-comp { font-size: 11px; color: var(--text-faint); text-align: right; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .tables-layout, .competition-layout, .status-layout, .transfers-layout, .match-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .search-box input { width: 116px; }
}

@media (max-width: 1024px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-rail { position: static; }

  .primary-nav { display: none; }
  .menu-toggle { display: grid; }

  /* The nav becomes a sheet under the masthead on tablet and below. */
  .primary-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--masthead-h); left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding: 10px 16px 16px;
    gap: 2px;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--masthead-h));
    overflow-y: auto;
  }
  .primary-nav.is-open .nav-link { padding: 12px 14px; font-size: 15px; }
  .primary-nav.is-open .nav-dropdown { width: 100%; }
  .primary-nav.is-open .nav-dropdown button { width: 100%; justify-content: flex-start; }
  /* One column inside the mobile sheet. The desktop menu's four columns
     squeeze to nothing at phone width — the competition names collapsed
     to zero and only the country labels were readable. The sheet itself
     already scrolls, so a long single column is fine here. */
  .primary-nav.is-open .dropdown-panel {
    position: static;
    box-shadow: none;
    margin-top: 4px;
    grid-template-columns: 1fr;
    gap: 2px;
    max-height: none;
    overflow: visible;
    padding: 8px;
  }
  .primary-nav.is-open .dropdown-heading { margin-top: 10px; }
  .primary-nav.is-open .dropdown-group:first-child .dropdown-heading { margin-top: 0; }

  .home-grid, .tables-layout, .competition-layout, .status-layout,
  .transfers-layout, .match-layout, .scores-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .sticky-panel { position: static; }
  .scores-rail { display: none; }
  .lead-grid { grid-template-columns: 1fr; }
  .story-hero { min-height: 300px; }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; padding-bottom: 62px; }
  .wrap { padding: 0 14px; }
  .page { padding: 18px 0 40px; }
  .panel { padding: 14px; border-radius: var(--radius); }

  .search-box { display: none; }
  .mobile-tabs { display: flex; }
  .tz-current { display: none; }
  .tz-label { padding: 0 9px; }

  .ticker-arrow, .ticker-all { display: none; }
  .ticker-inner { padding: 0 14px; height: 48px; }

  .lineups { grid-template-columns: 1fr; }
  /* Two half-pitches side by side get too tight to read a name on a
     phone, so they stack — still one per team, still in formation. */
  .pitches { grid-template-columns: 1fr; gap: 18px; }
  .pitch { aspect-ratio: 4 / 5; }
  .pitch-name { max-width: 84px; font-size: 10.5px; }
  .form-columns { grid-template-columns: 1fr; }
  .h2h-list li { grid-template-columns: 70px 1fr; }
  .h2h-comp { display: none; }
  .form-games li { grid-template-columns: 20px 1fr auto; }
  .form-comp { display: none; }

  .scoreboard { gap: 10px; grid-template-columns: 1fr auto 1fr; }
  .scoreboard-crest { width: 52px; height: 52px; }
  .scoreboard-centre { min-width: 96px; }

  .story-card { flex-direction: row; }
  .story-card .story-image { width: 96px; }
  .story-grid { grid-template-columns: 1fr; }

  .match-card { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 9px 6px; }
  .match-card.full { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .match-league { display: none; }

  .table-scroll { margin: 0 -14px; padding: 0 14px; }
  .league-table { min-width: 0; font-size: 13px; }
  /* Swap full club names for three-letter codes so the table fits. */
  .league-table:not(.compact) .table-team-name { display: none; }
  .league-table:not(.compact) .table-team-tla { display: inline; }
  .league-table .col-form { display: none; }
  .league-table thead th.col-form { display: none; }
  /* 4px rather than 6px across ten columns buys back about 40px, which
     is what a table of two-digit numbers needs to fit a phone. The
     Premier League fits either way; MLS in September, with 24 games
     played and a +29 goal difference, did not. */
  .league-table thead th,
  .league-table tbody td { padding-left: 4px; padding-right: 4px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }

  /**
   * The timeline stays two-sided on a phone, as it is on a wide screen:
   * home to the left of the line, away to the right. It used to collapse
   * into one column with the minutes down the edge, which read as a
   * single list and lost the one thing the layout is for — seeing at a
   * glance which side something happened to.
   *
   * Everything is tightened to pay for it. The gutter drops from 30px to
   * 24px either side, which is still enough to clear a "90+4'" marker,
   * and the text, icons and marker all come down a size. Names wrap onto
   * a second line on the narrowest phones rather than being cut off.
   */
  .timeline-event.is-home { padding-right: calc(50% + 24px); }
  .timeline-event.is-away { padding-left: calc(50% + 24px); }
  .timeline-event { gap: 8px; }
  .event-body { gap: 6px; }
  .event-icon { width: 18px; height: 18px; }
  .event-icon .icon { width: 11px; height: 11px; }
  .event-text { font-size: 12px; }
  .event-detail { font-size: 10.5px; }
  .event-minute { font-size: 11.5px; padding: 1px 4px; }
}

/* Narrower than an iPhone 12 — the SE, and small Androids.
   Measured across the widest tables: everything fits at 375px, but slips
   by 9px at 360, 25px at 344 and 49px at 320, which puts the points
   column half off the edge. Goals for and against are the two to give
   up — goal difference is derived from them, and is the one that
   decides anything. */
@media (max-width: 374px) {
  .league-table:not(.compact) .col-gf,
  .league-table:not(.compact) .col-ga { display: none; }
}

@media (max-width: 420px) {
  /* Scale the whole lockup together on a small phone. The sub-line's
     tracking is retuned so it still matches the width of the name. */
  .brand-text { font-size: 21px; }
  .brand-sub { font-size: 11.5px; letter-spacing: .19em; margin-top: 2px; }
  .site-logo { width: 34px; height: 34px; }

  .date-pill { min-width: 54px; }
  .page-title { font-size: 27px; }
}

/* Print: the tables are the only thing worth putting on paper. */
@media print {
  .masthead, .ticker, .mobile-tabs, .site-footer, .filter-bar, .date-strip { display: none; }
  body { background: #FFF; color: #000; }
  .panel { border: 1px solid #CCC; break-inside: avoid; }
}

/* The 503 page uses an icon where the 404 page uses a big number. */
.error-code .error-icon { width: 64px; height: 64px; stroke-width: 1.4; }

/* Ticker label has a live and an idle state; app.js toggles [hidden]. */
.ticker-label-live, .ticker-label-idle { display: inline-flex; align-items: center; gap: 6px; }
[hidden] { display: none !important; }

/* =========================================================
   CUP BRACKET
   Rounds stack chronologically; completed ones collapse so
   a 76-tie competition doesn't bury the round being played.
   ========================================================= */

.bracket { display: flex; flex-direction: column; gap: 8px; }

.bracket-round {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
.bracket-round > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  transition: background .15s var(--ease);
}
.bracket-round > summary::-webkit-details-marker { display: none; }
.bracket-round > summary:hover { background: var(--surface-3); }
.bracket-round[open] > summary { border-bottom: 1px solid var(--hairline); }

.bracket-round .round-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-strong);
}
.bracket-round .round-meta { font-size: 12px; color: var(--text-faint); }
.bracket-round .round-state {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  color: var(--gold);
}
.bracket-round .round-state.is-done {
  background: color-mix(in srgb, var(--turf) 14%, transparent);
  color: var(--turf);
}

/* A chevron that turns as the round opens. */
.bracket-round > summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  margin-left: 4px;
  transition: transform .2s var(--ease);
  flex-shrink: 0;
}
.bracket-round[open] > summary::after { transform: rotate(-135deg); }

.bracket-round .match-list { padding: 6px 8px 10px; }

/* "Rochdale win 2-1 on penalties" */
.tie-note {
  font-size: 11.5px; color: var(--text-muted);
  padding: 0 12px 8px 68px;
  margin-top: -6px;
}

@media (max-width: 720px) {
  .bracket-round > summary { flex-wrap: wrap; gap: 6px 10px; padding: 11px 12px; }
  .bracket-round .round-state { margin-left: 0; }
  .tie-note { padding-left: 12px; }
}

/* =========================================================
   TEAM PAGE
   ========================================================= */

.team-hero {
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 900px 340px at 12% -30%, color-mix(in srgb, var(--league-color) 20%, transparent), transparent 70%),
    var(--surface);
  margin-bottom: 24px;
}

.team-identity { display: flex; align-items: center; gap: 20px; padding-bottom: 18px; }
.team-crest-lg { width: 88px; height: 88px; object-fit: contain; flex-shrink: 0; }
.team-identity-text { min-width: 0; }
.team-identity h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--text-strong);
}
.team-facts {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 6px; font-size: 13.5px; color: var(--text-muted);
}
.team-facts span { display: inline-flex; align-items: center; gap: 6px; }
.team-facts .icon { width: 15px; height: 15px; color: var(--text-faint); }

/**
 * The wide variant carries a label beside the star, so it has to lay
 * out in a row. It inherits display:grid from .follow-button, which is
 * right for the icon-only version used on match pages but made a
 * single-column grid here: the star and the word stacked, and "Follow"
 * sat eight pixels below the bottom of its own pill.
 */
.follow-lg {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: 38px; gap: 7px;
  padding: 0 16px; border-radius: 999px;
  margin-left: auto; flex-shrink: 0;
  font-size: 13.5px; font-weight: 600;
  line-height: 1;
}

.team-formline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 18px;
  border-top: 1px solid var(--hairline-soft);
}
.formline-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
}
.form-guide { display: inline-flex; gap: 4px; }
.team-comps { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.comp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.comp-chip:hover { border-color: var(--chip-color); color: var(--text); }

/* Variant 2's season-at-a-glance strip */
.team-statstrip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--hairline);
  border-top: 1px solid var(--hairline);
  margin-bottom: -1px;
}
.stat-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px; background: var(--surface);
}
.stat-figure {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--text-strong); line-height: 1;
}
.stat-caption {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); text-align: center;
}

.team-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.team-layout.is-wide { grid-template-columns: minmax(0, 1fr) 300px; }
.team-main { min-width: 0; }

/* --- Next match --- */
.next-match { border-top: 3px solid var(--league-color); }
.next-match-card {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 14px 8px; border-radius: var(--radius);
  transition: background .15s var(--ease);
}
.next-match-card:hover { background: var(--surface-2); }
.nm-side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.nm-side img { width: 44px; height: 44px; object-fit: contain; }
.nm-side span { font-size: 14px; font-weight: 600; }
.nm-middle { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.nm-time { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text-strong); line-height: 1; }
.nm-date { font-size: 12px; color: var(--text-muted); }

/* --- Squad --- */
.squad-note { margin: 0 0 4px; }
.squad-group {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 14px 0 4px; padding-bottom: 5px;
  border-bottom: 1px solid var(--hairline-soft);
}
.squad-group span { color: var(--text-faint); opacity: .7; }
.squad-list { display: flex; flex-direction: column; }
.squad-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13.5px;
}
.squad-shirt {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--surface-3); color: var(--text-muted);
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.squad-name { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squad-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }
.squad-age::before { content: '· '; }

/* Variant 2 spreads the squad across the wider main column. */
.squad-list.wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 22px; }

/* --- League position --- */
.position-block { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.position-figure {
  font-family: var(--font-display); font-size: 42px; font-weight: 700;
  color: var(--text-strong); line-height: 1;
}
.position-figure span { font-size: .5em; }
.position-of { font-size: 13px; color: var(--text-muted); }
.zone-pill {
  margin-left: auto;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #FFF;
}
.zone-pill.zone-champions  { background: #2563EB; }
.zone-pill.zone-europa     { background: #EA580C; }
.zone-pill.zone-conference { background: #0D9488; }
.zone-pill.zone-playoff    { background: #A855F7; }
.zone-pill.zone-promotion  { background: var(--turf); color: #06120C; }
.zone-pill.zone-relegation { background: var(--live); }
.zone-pill.zone-eliminated { background: var(--text-faint); }

.compact-dl dt { margin-top: 8px; }
.external-link { display: inline-flex; align-items: center; gap: 4px; color: var(--turf); }
.external-link .icon { width: 13px; height: 13px; }

@media (max-width: 1024px) {
  .team-layout, .team-layout.is-wide { grid-template-columns: minmax(0, 1fr); }
  .team-statstrip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .team-identity { gap: 14px; }
  .team-crest-lg { width: 62px; height: 62px; }
  .follow-lg { width: 38px; padding: 0; }
  .follow-lg span { display: none; }
  .team-statstrip { grid-template-columns: repeat(2, 1fr); }
  .team-comps { margin-left: 0; width: 100%; }
  .squad-list.wide { grid-template-columns: 1fr; }
}

/* Competition chips sit on their own row above the stat strip. */
.team-comps-row { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 0 16px; }
.stat-form { display: flex; align-items: center; }
.dd-note { color: var(--text-faint); font-size: 12px; margin-left: 4px; }

/* Club links. Underline on hover only, so tables don't look like a
   wall of links, but they still announce themselves as clickable. */
.team-link { transition: color .15s var(--ease); }
.team-link:hover { color: var(--turf); text-decoration: underline; text-underline-offset: 2px; }
a.scoreboard-name:hover { color: var(--turf); }

/* Substitution markers in the lineup. */
.sub-mark { font-size: 9px; line-height: 1; flex-shrink: 0; }
.sub-in { color: var(--turf); }
.sub-out { color: var(--live); }
.bench-heading {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 12px 0 2px;
}
.event-minute { white-space: nowrap; }


/* =========================================================
   PLAYER PAGES
   One page per player in every squad the site lists. Most
   have a photograph and a record; plenty have neither, and
   the layout has to look deliberate either way.
   ========================================================= */

.player-hero {
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 900px 320px at 12% -20%, color-mix(in srgb, var(--league-color, var(--turf)) 20%, transparent), transparent 70%),
    var(--surface);
  padding: 16px 0 22px;
  margin-bottom: 22px;
}
.crumbs { font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--turf); }

.player-identity { display: flex; align-items: flex-start; gap: 18px; }
.player-identity-text { min-width: 0; }
.player-identity h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; color: var(--text-strong);
  line-height: 1.05;
}

/* The photograph, and the credit Commons asks for in return. Kept
   deliberately quiet: it is a legal obligation, not a caption. */
.player-photo { margin: 0; width: 132px; flex-shrink: 0; }
.player-photo img {
  width: 132px; height: 132px; object-fit: cover; object-position: 50% 18%;
  border-radius: 12px; border: 1px solid var(--hairline);
  background: var(--surface-3); display: block;
}
.player-photo figcaption {
  margin-top: 5px;
  font-size: 8.5px; line-height: 1.3; color: var(--text-faint); opacity: .85;
}
.player-photo figcaption a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.player-photo figcaption a:hover { color: var(--turf); }

.player-avatar {
  display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--league-color, var(--turf)); color: #FFF;
  font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: .02em;
  line-height: 1; flex-shrink: 0;
}

.player-facts {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; font-size: 13px; color: var(--text-muted);
}
.player-facts span { display: inline-flex; align-items: center; gap: 6px; }
/* The shirt number is a fixed square, so the digits sit dead centre in
   it — both ways. Written to beat `.player-facts span`, which lays its
   items out from the left and would leave the number hugging one edge. */
.player-facts .player-shirt {
  display: inline-grid; place-items: center; justify-content: center;
  width: 24px; min-width: 24px; height: 24px; padding: 0; gap: 0;
  border-radius: 6px; background: var(--surface-3); color: var(--text-strong);
  font-size: 12px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.player-flag { border-radius: 3px; object-fit: cover; }
.player-club { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; }
.player-club:hover { color: var(--turf); }
.player-league {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--league-color, var(--text-faint));
}

.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.player-main, .player-rail { display: flex; flex-direction: column; gap: 18px; }

.player-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.player-tiles .tile {
  background: var(--surface-2); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius); padding: 12px 6px; text-align: center;
}
.player-tiles .tile strong {
  display: block; font-family: var(--font-display); font-size: 25px;
  color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.player-tiles .tile span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
}

.player-log .num, .player-seasons .num { text-align: right; font-variant-numeric: tabular-nums; }
.player-log-match { white-space: nowrap; }
.player-log-match .venue { display: inline-block; width: 16px; color: var(--text-faint); font-size: 11.5px; }
.player-log-match .crest { vertical-align: -5px; margin: 0 6px 0 2px; }
.player-log-result { white-space: nowrap; font-variant-numeric: tabular-nums; }
.player-log tr.is-highlight td { background: color-mix(in srgb, var(--turf) 9%, transparent); }
.player-seasons tr.is-current td { background: color-mix(in srgb, var(--league-color, var(--turf)) 11%, transparent); }

.player-news { display: flex; flex-direction: column; gap: 11px; }
.player-news a { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; }
.player-news a:hover { color: var(--turf); }
.player-news-source { display: block; margin-top: 2px; font-size: 11px; color: var(--text-faint); }

@media (max-width: 1024px) {
  .player-layout { grid-template-columns: minmax(0, 1fr); }
  .player-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .player-identity { gap: 14px; }
  .player-photo, .player-photo img { width: 92px; }
  .player-photo img { height: 92px; }
  .player-avatar { width: 72px; height: 72px; font-size: 24px; }
  .player-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .player-facts { gap: 10px; font-size: 12.5px; }
}