/* ============================================================
   SCORR - THEME.CSS
   Global CSS variable system - dark mode (default) + light mode
   Imported by every page on the site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── DARK MODE (default) ─────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #0d0d0d;
  --bg-surface:    #1a1a1a;
  --bg-elevated:   #222222;

  /* Borders */
  --border:        #333333;
  --border-strong: #444444;

  /* Text */
  --text:          #e8e8e8;
  --text-sub:      #999999;
  --text-muted:    #666666;

  /* Brand */
  --gold:          #C9A84C;
  --gold-dim:      rgba(201, 168, 76, 0.12);
  --gold-border:   rgba(201, 168, 76, 0.2);
  --on-gold:       #0d0d0d;   /* text colour placed on top of a gold background */
  /* Session C2 (27 July 2026, Andy): the standard Scorr FAVOURITE gold.
     Identical to --gold's default, but a SEPARATE token because
     competition.html overrides --gold at runtime with each comp's brand
     primaryColor - which was tinting the favourite star per-comp. Favourite
     marks (comp-page star, vidiprinter fav-comp star) use --fav-gold so they
     stay standard gold everywhere; brand accents keep using --gold. */
  --fav-gold:      #C9A84C;

  /* Status colours (same both modes, kept here for consistency) */
  --success:       #2ECC71;
  --danger:        #E74C3C;
  --live:          #2ECC71;
  --live-bg:       rgba(46, 204, 113, 0.12);

  /* Shadow */
  --shadow:        0 8px 28px rgba(0, 0, 0, 0.5);
  --page-shadow:   0 0 60px rgba(0, 0, 0, 0.8);
  --card-shadow:   none;
}
/* ── LIGHT MODE (toggled via body.light) ─────────────────────── */
body.light {
  --bg:            #f2f0ec;
  --bg-surface:    #ffffff;
  --bg-elevated:   #e9e6df;

  --border:        #ddd8ce;
  --border-strong: #c7c1b4;

  --text:          #111111;
  --text-sub:      #4d4d4d;
  --text-muted:    #808080;

  --gold:          #A6791E;
  --gold-dim:      rgba(166, 121, 30, 0.10);
  --gold-border:   rgba(166, 121, 30, 0.4);
  --on-gold:       #0d0d0d;
  --fav-gold:      #A6791E;   /* C2: standard favourite gold, light mode */

  --success:       #1e8449;
  --danger:        #c0392b;
  --live:          #1e8449;
  --live-bg:       rgba(30, 132, 73, 0.10);

  --shadow:        0 8px 28px rgba(0, 0, 0, 0.08);
  --page-shadow:   0 0 40px rgba(0, 0, 0, 0.06);
  --card-shadow:   0 1px 3px rgba(0, 0, 0, 0.08);
}
/* ── TYPOGRAPHY SCALE ─────────────────────────────────────────── */
:root {
  --font-display: 'Barlow Condensed', sans-serif;  /* headings, nav, labels */
  --font-body:    'Barlow', sans-serif;             /* paragraphs, body copy */

  --h1-size:  clamp(28px, 5vw, 44px);
  --h2-size:  clamp(20px, 3vw, 28px);
  --h3-size:  18px;
  --body-size: 15px;
  --small-size: 13px;

  --tracking-tight: 1px;
  --tracking-wide:  2px;
}

/* ── LAYOUT VARIABLES ─────────────────────────────────────────── */
:root {
  --max-width:  900px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  --radius:     8px;
  --radius-sm:  4px;
}

/* ── BASE STYLES ──────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.5;
  transition: background 0.3s, color 0.3s;
}

h1, h2, h3, .heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--gold);
}

h1 { font-size: var(--h1-size); font-weight: 800; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--h2-size); font-weight: 700; letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--h3-size); font-weight: 600; letter-spacing: var(--tracking-tight); }

.sub-label {
  font-family: var(--font-display);
  font-size: var(--small-size);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-sub);
  margin-top: var(--space-sm);
}
a { color: var(--gold); text-decoration: none; }

.page {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 90px var(--space-md);
  background: var(--bg);
  box-shadow: var(--page-shadow);
  transition: background 0.3s, box-shadow 0.3s;
  min-height: 100vh;
}

@media (max-width: 480px) {
  .page {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}
/* ── SCHEDULE / FIXTURE ROWS ──────────────────────────────────── */
.schedule-day-header {
  font-family: var(--font-display);
  font-size: var(--small-size);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  box-shadow: var(--card-shadow);
}

.schedule-teams {
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--text);
}

.schedule-score {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.match-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--gold);
  white-space: nowrap;
}

.match-status {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── STANDINGS TABLE TIER BACKGROUNDS ─────────────────────────── */
/* These four tiers are generic and reused across every competition.
   Which POSITIONS map to which tier is NOT decided here - that logic
   lives in each competition's config/render code (e.g. EPL: top 4 =
   ucl, 5th = europa; Champions League itself: top 8 = ucl,
   9th-24th = a playoff tier). Never hardcode a league's position
   thresholds into this CSS file. */
:root {
  --tier-ucl:            #3498DB;  /* Champions League - solid accent */
  --tier-europa:         #F1C40F;  /* Europa League - solid accent */
  --tier-conference:     #27AE60;  /* Conference League - solid accent */
  --tier-relegation:     #C0392B;  /* Relegation zone - solid accent */
  /* Session E (28 July 2026): extra solid accents for the data-driven
     standings tints (parsed from the api-sports description field) and
     the generated legend swatches. */
  --tier-promotion:      #2ECC71;  /* Promotion (auto) - solid accent */
  --tier-promotion-po:   #3498DB;  /* Promotion play-offs - solid accent */
  --tier-relegation-po:  #E67E22;  /* Relegation play-offs - solid accent */
  --tier-playoff:        #9B59B6;  /* Generic play-off - solid accent */

  --tier-ucl-bg:         rgba(52, 152, 219, 0.11);
  --tier-europa-bg:      rgba(241, 196, 15, 0.11);
  --tier-conference-bg:  rgba(39, 174, 96, 0.11);
  --tier-relegation-bg:  rgba(192, 57, 43, 0.12);

  /* Session E: qualifying-round variants = the SAME hue at a lighter
     fill, so they read as a related-but-distinct shade of the parent
     European tint (the legend carries the "(qualifying)" wording).
     All tints are low-alpha overlays on the row background, so text/
     background contrast is effectively that of the untinted row, which
     already meets AA - contrast-checked both modes. */
  --tier-ucl-q-bg:       rgba(52, 152, 219, 0.055);
  --tier-uel-q-bg:       rgba(241, 196, 15, 0.06);
  --tier-uecl-q-bg:      rgba(39, 174, 96, 0.055);
  --tier-promotion-bg:      rgba(46, 204, 113, 0.12);
  --tier-promotion-po-bg:   rgba(52, 152, 219, 0.10);
  --tier-relegation-po-bg:  rgba(230, 126, 34, 0.12);
  --tier-playoff-bg:        rgba(155, 89, 182, 0.11);
}

body.light {
  --tier-ucl-bg:         rgba(52, 152, 219, 0.09);
  --tier-europa-bg:      rgba(241, 196, 15, 0.10);
  --tier-conference-bg:  rgba(39, 174, 96, 0.09);
  --tier-relegation-bg:  rgba(192, 57, 43, 0.09);

  --tier-ucl-q-bg:       rgba(52, 152, 219, 0.05);
  --tier-uel-q-bg:       rgba(241, 196, 15, 0.07);
  --tier-uecl-q-bg:      rgba(39, 174, 96, 0.05);
  --tier-promotion-bg:      rgba(39, 174, 96, 0.10);
  --tier-promotion-po-bg:   rgba(52, 152, 219, 0.08);
  --tier-relegation-po-bg:  rgba(230, 126, 34, 0.10);
  --tier-playoff-bg:        rgba(155, 89, 182, 0.09);
}

.tier-row--ucl        { background: var(--tier-ucl-bg); }
.tier-row--europa     { background: var(--tier-europa-bg); }
.tier-row--conference { background: var(--tier-conference-bg); }
.tier-row--relegation { background: var(--tier-relegation-bg); }
/* Session E: data-driven standings tint classes (see classifyStandingDescription). */
.tier-row--ucl-q         { background: var(--tier-ucl-q-bg); }
.tier-row--uel-q         { background: var(--tier-uel-q-bg); }
.tier-row--uecl-q        { background: var(--tier-uecl-q-bg); }
.tier-row--promotion     { background: var(--tier-promotion-bg); }
.tier-row--promotion-po  { background: var(--tier-promotion-po-bg); }
.tier-row--relegation-po { background: var(--tier-relegation-po-bg); }
.tier-row--playoff       { background: var(--tier-playoff-bg); }

/* ── Standings legend (Session E) ─────────────────────────────────
   Generated from the classes actually present in each competition's
   table (classifyStandingDescription), never hardcoded per comp. */
.standings-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 10px 0 2px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--text-sub);
}
.standings-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.standings-legend-swatch {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  flex-shrink: 0;
  display: inline-block;
}
.standings-legend-swatch--none { background: transparent; }
.standings-legend-label { white-space: nowrap; }
.standings-legend-note {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}
/* Swatches use the SOLID accent (the row tint itself is too faint at
   14px). Qualifying variants share the parent hue at reduced opacity,
   mirroring the lighter row fill. */
.standings-legend-swatch.tier-row--ucl,
.standings-legend-swatch.tier-row--ucl-q         { background: var(--tier-ucl); }
.standings-legend-swatch.tier-row--europa,
.standings-legend-swatch.tier-row--uel-q         { background: var(--tier-europa); }
.standings-legend-swatch.tier-row--conference,
.standings-legend-swatch.tier-row--uecl-q        { background: var(--tier-conference); }
.standings-legend-swatch.tier-row--promotion     { background: var(--tier-promotion); }
.standings-legend-swatch.tier-row--promotion-po  { background: var(--tier-promotion-po); }
.standings-legend-swatch.tier-row--relegation    { background: var(--tier-relegation); }
.standings-legend-swatch.tier-row--relegation-po { background: var(--tier-relegation-po); }
.standings-legend-swatch.tier-row--playoff       { background: var(--tier-playoff); }
.standings-legend-swatch.tier-row--ucl-q,
.standings-legend-swatch.tier-row--uel-q,
.standings-legend-swatch.tier-row--uecl-q        { opacity: 0.5; }

/* ── LIVE STATUS ──────────────────────────────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--live);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: live-pulse 1.5s ease-in-out infinite;
}

.live-score {
  color: var(--live);
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ── MODE TOGGLE BUTTON (nav) ─────────────────────────────────── */
.mode-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.mode-toggle:hover {
  border-color: var(--gold-border);
}

.mode-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

/* Show the sun icon in dark mode (invites switching to light),
   show the moon icon in light mode (invites switching to dark) */
.mode-toggle .icon-moon { display: none; }
body.light .mode-toggle .icon-sun  { display: none; }
body.light .mode-toggle .icon-moon { display: block; }

/* ── SESSION 9: TOGGLE CONTROLS (switch style) ───────────────── */
.controls-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.switch {
  display: grid;
  grid-template-columns: 90px 55px auto 55px;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
}
.switch-label-left {
  text-align: right;
}
.switch-label-right {
  text-align: left;
}
.switch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.switch-caption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 2px;
}
.switch-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.switch-label.active { color: var(--text); }
.switch-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.switch-track.on { background: var(--gold); border-color: var(--gold); }
.switch-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.switch-track.on .switch-thumb {
  transform: translateX(16px);
  background: var(--on-gold);
}

/* Hide scores: blank out the score and status, keep kickoff time.
   The score itself stays visibility:hidden (keeps its layout space),
   and a "VS" label is overlaid in the same spot via ::after. */
body.hide-scores .match-score,
body.hide-scores .status-badge {
  visibility: hidden;
}

body.hide-scores .match-score-wrap {
  position: relative;
}

body.hide-scores .match-score-wrap::after {
  content: "v";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  visibility: visible;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-sub);
}

/* Session 18g fix: the two-column stacked card (Session 18c redesign,
   competition.html's .match-stack / .stack-score / .match-stack-status)
   uses a completely different DOM structure from the single-column
   .match-main layout above - the original hide-scores rules only ever
   targeted .match-score / .status-badge / .match-score-wrap, none of
   which exist inside .match-stack, so hide-scores silently did nothing
   in two-column mode. These mirror the same behaviour for the stacked
   card's own classes. Note .match-stack-status is reused for BOTH the
   kickoff time (NS fixtures) and the live/finished status badge -
   only the status/badge case should hide, so this is scoped to
   .is-live or a finished match, not a plain kickoff-time row.
   Single-column is untouched by any of this. */
body.hide-scores .stack-score {
  visibility: hidden;
}

body.hide-scores .match-row.is-live .match-stack-status,
body.hide-scores .match-row[data-status="FT"] .match-stack-status,
body.hide-scores .match-row[data-status="AET"] .match-stack-status,
body.hide-scores .match-row[data-status="PEN"] .match-stack-status {
  visibility: hidden;
}

/* Hide completed: remove finished match rows entirely */
body.hide-completed .match-row[data-status="FT"],
body.hide-completed .match-row[data-status="AET"],
body.hide-completed .match-row[data-status="PEN"] {
  display: none;
}

/* Layout toggle: desktop-only switch, desktop-only two-column grid */
#layout-toggle { display: none; }
@media (min-width: 768px) {
  #layout-toggle { display: grid; }

  body.layout-double #schedule {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    /* Bug fix (World Cup follow-up session, 12 July 2026): default grid
       align-items is stretch, which forces every card sharing a grid
       row to match the height of the tallest one. That meant expanding
       one match's event panel visually "grew" its unrelated row-
       sibling too, even though the sibling had no new content - just
       empty stretched space filling the gap. align-items: start lets
       each card size to its own content independently, so only the
       card that's actually expanded grows. */
    align-items: start;
  }
  body.layout-double #schedule .day-header {
    grid-column: 1 / -1;
  }
  body.layout-double #schedule .match-row {
    margin-top: 0;
  }
  /* When a team filter is active, the shared date header forces a new
     grid row every time - with only ~1 match per date left visible,
     that leaves one column full and the other empty. Hide the shared
     headers in this case and let matches flow freely into both
     columns; each card shows its own date inline instead (see
     .row-date-label in competition.html). Unfiltered view is untouched. */
 body.layout-double.team-filtered #schedule .day-header {
    display: none;
  }
}

/* Session 15 fix: mobile gets the same treatment as desktop's
   two-column team-filtered view - hide the shared date header and
   rely on each row's own inline date label, so a filtered team's
   fixtures don't show the date twice. */
@media (max-width: 767px) {
  body.team-filtered #schedule .day-header {
    display: none;
  }
}

/* ── SESSION 9: TODAY'S MATCHES FLOATING BUTTON ──────────────── */
.jump-btn {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--gold);
  color: var(--on-gold);
  border: none;
  border-radius: 20px;
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 1000;
  transition: opacity 0.2s;
}
.jump-btn:hover { opacity: 0.85; }

/* ── 30 July 2026 (Andy): clickable header wordmark ──────────────
   The big header wordmark (.hero-wordmark on the dashboard/competitions,
   .about-wordmark on About) is made a link to "/" in core.js
   (initClickableWordmark). Pointer + a visible keyboard focus ring; the
   binding no-ops on pages without a header wordmark. */
.hero-wordmark.wordmark-link,
.about-wordmark.wordmark-link { cursor: pointer; }
.hero-wordmark.wordmark-link:focus-visible,
.about-wordmark.wordmark-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── 30 July 2026 (Andy): floating back-to-top button ────────────
   Round, gold, bottom-RIGHT. The Session 9 .jump-btn today pill is
   bottom-CENTRE, so the two share a baseline (var(--space-lg)) without
   occupying the same corner - a text pill vs an icon circle reads as two
   different affordances. z-index 400 sits BELOW the menu (500) and popup
   (900) layers so this button can never cover them (unlike .jump-btn at
   z 1000 - flagged as a follow-up, not fixed here). Hidden AND unfocusable
   via visibility:hidden until core.js adds .visible past ~2 screens. */
.back-to-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--on-gold);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { opacity: 0.85; }
.back-to-top svg { display: block; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}
@media print {
  .back-to-top { display: none !important; }
}

/* ── SESSION 10: SITE NAV (page-to-page navigation) ─────────────── */
.site-nav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-sm) 0;
  position: sticky;
  top: 0;
  z-index: 110;
}
.site-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: 0 var(--space-md);
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.site-nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-sub);
  transition: color 0.2s;
}
.site-nav-link:hover,
.site-nav-link.active {
  color: var(--gold);
}
.site-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--gold);
}
.site-wordmark:hover {
  opacity: 0.85;
}
/* Hamburger button - hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gold);
  border-radius: 1px;
}

/* Mobile: swap link row for hamburger */
@media (max-width: 600px) {
  .site-nav { display: none; }
}

/* ── SESSION 10 FIX: mobile hamburger lives in the page header itself ── */
.mobile-nav-wrap {
  display: none;
  position: relative;
}
.mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 26 July 2026 (Andy): the bar icon stays 22x16, but padding turns the whole
     button into a ~38x32 tap target (easier to hit) and insets the bars a few
     px off the far-right edge; a small negative right margin keeps the button's
     right edge where it was so the header layout is unchanged. */
  width: 22px;
  height: 16px;
  box-sizing: content-box;
  padding: 8px;
  margin-right: 4px;   /* nudge the icon a few px in from the far-right edge */
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 9px;
  transition: box-shadow .18s ease, background-color .18s ease;
}
.mobile-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gold);
  border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}
/* 26 July 2026 (Andy): open-state flourish - a gold ring + faint gold wash
   appears, and the bars morph into an X, so it's obvious the menu is open.
   Driven purely off aria-expanded, which wireToggle() already sets. */
.mobile-nav-toggle[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--gold);
  background-color: var(--gold-dim, rgba(201,168,76,0.14));
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  flex-direction: column;
  gap: var(--space-md);
  z-index: 500;
  box-shadow: var(--shadow);
}
.mobile-nav-dropdown.open { display: flex; }

@media (max-width: 600px) {
  .mobile-nav-wrap { display: block; }
}

/* ── SESSION 18d: NAV COMPETITIONS DROPDOWN (desktop hover) ──────
   Sits inside .site-nav-links, wrapping the existing "Competitions"
   link. The link keeps navigating to index-dev.html as before -
   this menu is a hover-only enhancement layered on top, populated
   by window.ScorrCompetitions.renderNavDropdown() (js/competitions.js).
   Mobile equivalent (tap-driven, inside .mobile-nav-dropdown) is a
   later step - this block is desktop-only via the :hover trigger,
   but is not itself media-query-gated since .site-nav already
   disappears below 600px. */
.nav-comp-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-comp-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  max-width: 300px;
  max-height: 440px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-sm) calc(var(--space-sm) + 4px) var(--space-sm) var(--space-sm);
  z-index: 500;
  /* Firefox thin scrollbar matching theme instead of default chrome */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.nav-comp-menu::-webkit-scrollbar {
  width: 6px;
}
.nav-comp-menu::-webkit-scrollbar-track {
  background: transparent;
}
.nav-comp-menu::-webkit-scrollbar-thumb {
  background: var(--gold-border);
  border-radius: 3px;
}
.nav-comp-dropdown:hover .nav-comp-menu,
.nav-comp-dropdown:focus-within .nav-comp-menu {
  display: block;
}
.nav-comp-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 8px 4px;
}
.nav-comp-link {
  display: block;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.nav-comp-link:hover {
  background: var(--gold-dim);
  color: var(--gold);
}
.nav-comp-country-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: var(--small-size);
  font-weight: 400;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-comp-country-toggle:hover {
  background: var(--gold-dim);
  color: var(--gold);
}
.nav-comp-country-toggle .nav-chevron {
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-comp-country-toggle[aria-expanded="true"] .nav-chevron {
  transform: rotate(90deg);
}
.nav-comp-country-list {
  display: none;
  padding-left: 12px;
}
.nav-comp-country-list.open {
  display: block;
}
.nav-comp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-sm) 0;
}
.nav-comp-empty {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--text-sub);
  padding: 6px 8px;
}

/* ── SESSION 18d (mobile step): tap-to-expand Competitions inside
   .mobile-nav-dropdown. Reuses .nav-comp-section-label / .nav-comp-link /
   .nav-comp-country-toggle / .nav-comp-country-list / .nav-comp-divider /
   .nav-comp-empty from the desktop dropdown above - only the outer
   container differs, since mobile needs an inline expanding block
   rather than an absolutely positioned floating menu. ─────────── */
.nav-mobile-comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.nav-mobile-comp-row .nav-mobile-comp-link {
  flex: 1;
}
.nav-mobile-comp-chevron-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--gold);
  transition: border-color 0.2s, background 0.2s;
}
.nav-mobile-comp-chevron-btn:hover,
.nav-mobile-comp-chevron-btn:active {
  border-color: var(--gold-border);
  background: var(--gold-dim);
}
.nav-mobile-comp-chevron-btn .nav-chevron {
  transition: transform 0.2s ease;
}
.nav-mobile-comp-chevron-btn[aria-expanded="true"] .nav-chevron {
  transform: rotate(90deg);
}
.nav-mobile-comp-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.nav-mobile-comp-menu::-webkit-scrollbar {
  width: 6px;
}
.nav-mobile-comp-menu::-webkit-scrollbar-track {
  background: transparent;
}
.nav-mobile-comp-menu::-webkit-scrollbar-thumb {
  background: var(--gold-border);
  border-radius: 3px;
}
.nav-mobile-comp-menu.open {
  display: flex;
}

/* ── SESSION 10: TEAM / VENUE FILTERS ────────────────────────────── */
.filter-bar {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.filter-clear-btn {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  font-size: var(--small-size);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-clear-btn:hover {
  background: var(--gold);
  color: var(--on-gold);
}
.filter-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--small-size);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.filter-select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.match-row.filtered-out {
  display: none;
}
/* ── SESSION 11: HIGHLIGHT MODE ──────────────────────────────── */
:root {
  --highlight-1:     #9B59B6;  /* purple */
  --highlight-2:     #E67E22;  /* orange */
  --highlight-3:     #3498DB;  /* blue */
  --highlight-4:     #E84393;  /* pink */

  --highlight-1-bg:  rgba(155, 89, 182, 0.14);
  --highlight-2-bg:  rgba(230, 126, 34, 0.14);
  --highlight-3-bg:  rgba(52, 152, 219, 0.14);
  --highlight-4-bg:  rgba(232, 67, 147, 0.14);
}

body.light {
  --highlight-1:     #8E44AD;
  --highlight-2:     #CA6F1E;
  --highlight-3:     #2E86C1;
  --highlight-4:     #C2185B;

  --highlight-1-bg:  rgba(142, 68, 173, 0.10);
  --highlight-2-bg:  rgba(202, 111, 30, 0.10);
  --highlight-3-bg:  rgba(46, 134, 193, 0.10);
  --highlight-4-bg:  rgba(194, 24, 91, 0.10);
}

/* Right-side border + tint, deliberately not left border, so it never
   competes visually with .is-live's left border or the pulsing score */
.match-row.highlight-1 { background: var(--highlight-1-bg); border-right: 4px solid var(--highlight-1); }
.match-row.highlight-2 { background: var(--highlight-2-bg); border-right: 4px solid var(--highlight-2); }
.match-row.highlight-3 { background: var(--highlight-3-bg); border-right: 4px solid var(--highlight-3); }
.match-row.highlight-4 { background: var(--highlight-4-bg); border-right: 4px solid var(--highlight-4); }

/* Highlight controls row (dropdown + button + pills) */
.highlight-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: var(--small-size);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--text);
}
.highlight-pill-1 { background: var(--highlight-1-bg); border: 1px solid var(--highlight-1); }
.highlight-pill-2 { background: var(--highlight-2-bg); border: 1px solid var(--highlight-2); }
.highlight-pill-3 { background: var(--highlight-3-bg); border: 1px solid var(--highlight-3); }
.highlight-pill-4 { background: var(--highlight-4-bg); border: 1px solid var(--highlight-4); }
.highlight-pill-remove {
  cursor: pointer;
  font-weight: 800;
  color: var(--text-muted);
}
.highlight-pill-remove:hover { color: var(--danger); }
.highlight-msg {
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--text-muted);
}
/* ── SESSION 13: FLOATING CONTROLS PANEL (mobile only) ───────── */
.controls-panel-toggle {
  display: none;
}

@media (max-width: 767px) {
  .controls-float {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-md);
    right: var(--space-md);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .controls-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--small-size);
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--shadow);
  }

.controls-panel {
    display: none;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 65vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-sm);
    box-shadow: var(--shadow);
  }

  .controls-panel.open {
    display: flex;
  }
}
/* ── SESSION 13: TAB BAR ──────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
   top: calc(var(--nav-h, 0px) + var(--header-h, 0px));
  z-index: 90;
}
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-sm) 2px;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-sub);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.tab:hover:not(.disabled) {
  color: var(--text);
}

.tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.tab.disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.5;
}

/* ── Session 25 (18 July 2026): nav team-search styles ──────────────
   Moved here from four identical per-page copies (index-dev,
   competition, team, competitions) when the search input surfaced
   UNSTYLED on about-dev/privacy - the nav component injects the
   markup on every page, so its styles belong in the shared sheet,
   not in per-page <style> blocks. Do not re-add page copies. */
.nav-team-search-wrap {
  position: relative;
}
.nav-team-search-input {
  width: 150px;
  box-sizing: border-box;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
}
.nav-team-search-wrap-mobile .nav-team-search-input {
  width: 100%;
  /* iOS zoom-on-focus fix - any font-size under 16px triggers it. */
  font-size: 16px;
}
.nav-team-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}
.nav-team-search-results.open {
  display: block;
}
.nav-team-search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  cursor: pointer;
}
.nav-team-search-result:hover {
  background: var(--gold-dim);
}
.nav-team-search-empty {
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: var(--small-size);
}

/* ── Session 25 (18 July 2026): UEFA crest legibility - the uefa-crest chip.
   UCL/UEL/UECL artwork is dark navy on transparent and all but vanishes
   on the dark surface (Andy's screenshots, 16 July). Fix: a soft
   OFF-WHITE chip behind those three crests, DARK MODE ONLY - light mode
   renders them fine. Andy's choice 18 July: UEFA-only (not all crests),
   off-white not match-card grey - the grey is barely lighter than the
   page background, so navy-on-grey would still vanish; the chip must be
   light to do its job, and 242/242/242 avoids pure-white glare.
   HOW without config flags (the Section 12.11 drift trap the S25 spec
   warned about): each competition's crest is a unique api-sports asset -
   UCL=leagues/2.png, UEL=leagues/3.png, UECL=leagues/848.png - so the
   CSS targets the image URL itself. No manifest fields, no per-comp
   knowledge outside this block. Covers every place comp crests render
   today: dashboard group titles, competitions-page cards, team-page
   comp badges. If a fourth dark crest ever appears, add its asset URL
   here - one line, still no flags. (18 July evening: + .dash-card-comp-crest,
   the per-card comp line added to dashboard match cards.) (10 Aug 2026,
   Part B: + .comp-header-crest, the new crest beside the competition-page
   h1 - without this the UCL/UEL/UECL header crest would vanish in dark
   mode, exactly as this block warns.) */
body:not(.light) .comp-header-crest[src$="leagues/2.png"],
body:not(.light) .comp-header-crest[src$="leagues/3.png"],
body:not(.light) .comp-header-crest[src$="leagues/848.png"],
body:not(.light) .dash-group-crest[src$="leagues/2.png"],
body:not(.light) .dash-group-crest[src$="leagues/3.png"],
body:not(.light) .dash-group-crest[src$="leagues/848.png"],
body:not(.light) .comp-card-crest[src$="leagues/2.png"],
body:not(.light) .comp-card-crest[src$="leagues/3.png"],
body:not(.light) .comp-card-crest[src$="leagues/848.png"],
body:not(.light) .team-match-comp-crest[src$="leagues/2.png"],
body:not(.light) .team-match-comp-crest[src$="leagues/3.png"],
body:not(.light) .team-match-comp-crest[src$="leagues/848.png"],
body:not(.light) .dash-card-comp-crest[src$="leagues/2.png"],
body:not(.light) .dash-card-comp-crest[src$="leagues/3.png"],
body:not(.light) .dash-card-comp-crest[src$="leagues/848.png"] {
  background: rgba(242, 242, 242, 0.92);
  border-radius: 4px;
  padding: 2px;
  box-sizing: content-box;
}

/* ── Session D (27 July 2026): goal-alert opt-in + add-to-home-screen ──
   Notifications control (js/push.js), mounted in the dashboard My Teams
   area and on team pages. Reuses .filter-clear-btn as the button base;
   the "on" state fills gold (aria-pressed=true) so the toggle reads at a
   glance. All colours ride existing tokens (works in light + dark). */
.scorr-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  align-items: flex-start;
}
.team-alerts-slot .scorr-alerts { margin: 4px 0 20px; }
.scorr-alerts-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;         /* sentence case reads friendlier than the SHOUTY filter buttons */
  letter-spacing: 0;
}
.scorr-alerts-btn .scorr-alerts-bell { flex: 0 0 auto; }
.scorr-alerts-btn[aria-pressed="true"] {
  background: var(--gold);
  color: var(--on-gold);
}
.scorr-alerts-btn[aria-pressed="true"]:hover {
  background: transparent;
  color: var(--gold);
}
.scorr-alerts-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.scorr-alerts-btn:disabled:hover {
  background: transparent;
  color: var(--gold);
}
.scorr-alerts-note {
  margin: 0;
  font-size: var(--small-size);
  color: var(--text-sub);
  line-height: 1.5;
  max-width: 520px;
}
.scorr-alerts[data-state="denied"] .scorr-alerts-note { color: var(--text-muted); }

/* Add-to-Home-Screen bar - unobtrusive, dismissible, per device. Styled
   like the What's New strip so it reads as an announcement, not a modal. */
.scorr-a2hs-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 20px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  color: var(--text-sub);
  font-size: var(--small-size);
  line-height: 1.5;
}
.scorr-a2hs-bar .scorr-a2hs-text { flex: 1 1 240px; min-width: 0; }
.scorr-a2hs-bar .scorr-a2hs-text strong { color: var(--text); }
.scorr-a2hs-bar .scorr-a2hs-install {
  flex: 0 0 auto;
  text-transform: none;
  letter-spacing: 0;
}
.scorr-a2hs-bar .scorr-a2hs-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.scorr-a2hs-bar .scorr-a2hs-close:hover { color: var(--gold); }

/* 12 Aug 2026 (Andy): responsive team names on match cards. ScorrCore.teamNameResponsive()
   emits <span class="tn-name" data-short="Wigan"><span class="tn-full">Wigan Athletic</span></span>.
   Desktop shows the full name; on phones the full text is hidden and the short feed name is
   printed via ::after, so the element's textContent stays the full name (data-team, team-link
   and name-based tests untouched). Teams with no short/full split carry no .tn-name and are inert. */
@media (max-width: 480px) {
  .tn-name[data-short] .tn-full { display: none; }
  .tn-name[data-short]::after { content: attr(data-short); }
}