/* Theme controls share the existing header row on both desktop and mobile. */
:root {color-scheme: light}
.header-actions {display: flex; align-items: center; justify-self: end; gap: 8px}
.theme-toggle {display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--active-edge); border-radius: 8px; background: var(--surface); color: var(--active-color); font-size: .875rem; font-weight: 600; line-height: 1.4; white-space: nowrap}
.theme-toggle:hover {background: var(--active-tint)}
.theme-toggle svg {width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round}
.theme-toggle .theme-sun {display: none}
html[data-theme="dark"] .theme-toggle .theme-sun {display: block}
html[data-theme="dark"] .theme-toggle .theme-moon {display: none}
@media (max-width: 800px) {
  .header-actions {grid-column: 2; grid-row: 1}
  .theme-toggle {width: 44px; padding: 0}
  .theme-label {display: none}
}

/* Charcoal surfaces and brighter section colours keep small numbers readable. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf2f6; --paper: #12191f; --white: #1b252e;
  --surface: #1b252e; --surface-muted: #17212a;
  --surface-control: #202d38; --surface-hover: #293844;
  --line: #3c4c59; --muted: #b1bdc8; --shell-accent: #d0dae3;
  --pos: #87d4aa; --neg: #f0a2ac;
  --card-shadow: 0 3px 12px #00000018, 0 12px 30px #00000012;
}
html[data-theme="dark"] body {--active-color: #87d4aa; --active-tint: #203c32; --active-edge: #416b58}
html[data-theme="dark"] body:has(#premier:not([hidden])) {--active-color: #6ea6e8; --active-fill: #3569a3; --active-fill-ink: #fff; --active-tint: #243b53; --active-edge: #46698e}
html[data-theme="dark"] body:has(#predictor:not([hidden])) {--active-color: #f0a8ba; --active-tint: #442d37; --active-edge: #825464}
html[data-theme="dark"] .page {--section-color: #d0dae3; --section-tint: #2a3743; --section-edge: #4c5d6c; --section-wash: #202c37}
html[data-theme="dark"] #global {--section-color: #87d4aa; --section-tint: #203c32; --section-edge: #416b58; --section-wash: #1c3028}
html[data-theme="dark"] #premier {--section-color: #6ea6e8; --section-fill: #3569a3; --section-fill-ink: #fff; --section-tint: #243b53; --section-edge: #46698e; --section-wash: #203144}
html[data-theme="dark"] #premier .intro {--section-color: #6ea6e8}
html[data-theme="dark"] #predictor {--section-color: #f0a8ba; --section-tint: #442d37; --section-edge: #825464; --section-wash: #332730}
html[data-theme="dark"] :is(.brand-logo, .footer-logo) path:first-child {fill: var(--ink)}
html[data-theme="dark"] .ninety-inline::before {background-color: var(--ink)}
/* Tottenham's monochrome navy crest needs a white treatment on dark surfaces. */
html[data-theme="dark"] .club-badge[src$="/367.png"] {filter: brightness(0) invert(1)}
html[data-theme="dark"] .main-tabs a.active {background: var(--active-fill, var(--active-color)); color: var(--active-fill-ink, #111b23); box-shadow: none}
html[data-theme="dark"] :is(.lead, .view-intro p, .score-guide p, .page .footnote, .rating-scale-note, .result-card .result-note) {color: var(--muted)}
html[data-theme="dark"] :is(.fixture-meta>span:last-child, .outcome-result, .swap) {color: var(--muted)}
html[data-theme="dark"] th {color: var(--ink)}
html[data-theme="dark"] th small {color: #c3d2e0}
html[data-theme="dark"] :is(.feature-strip, .league-navigation, #league-view-tabs) {background: var(--section-tint); border-color: var(--section-edge); box-shadow: var(--card-shadow)}
html[data-theme="dark"] :is(.feature-dark .eyebrow, .feature-dark strong>span, .league-row .value, .prediction-teams .goals) {color: var(--section-color)}
html[data-theme="dark"] #league-tabs a,
html[data-theme="dark"] #league-view-tabs button {background: var(--surface-control); border-color: var(--section-edge); color: var(--ink); box-shadow: none}
html[data-theme="dark"] #league-tabs a:hover,
html[data-theme="dark"] #league-view-tabs button:hover:not(.active) {background: var(--surface-hover); border-color: var(--section-color); color: var(--section-color)}
html[data-theme="dark"] #league-tabs a.active,
html[data-theme="dark"] #league-view-tabs button.active {background: var(--section-fill, var(--section-color)); border-color: var(--section-fill, var(--section-color)); color: var(--section-fill-ink, #111b23)}
html[data-theme="dark"] .league-navigation::before {background: linear-gradient(to right, var(--section-tint) 30%, transparent)}
html[data-theme="dark"] .league-navigation::after {background: linear-gradient(to left, var(--section-tint) 30%, transparent)}
html[data-theme="dark"] :is(#league-tabs a, #league-view-tabs button):focus-visible {outline-color: var(--section-color)}

/* Table colours also cover the sticky club cells and sorted headers. */
html[data-theme="dark"] #global-table {
  --table-stripe: #1b2d27; --table-primary: #213c30; --table-primary-even: #254335;
  --table-hover: #2c4236; --table-primary-hover: #365640;
  --table-primary-heading: #2b4b3a; --table-sorted-heading: #33553f;
  --table-attack-heading: #243d30; --table-defence-heading: #21362c;
}
html[data-theme="dark"] #pl-table {
  --table-stripe: #1d2d3c; --table-primary: #20364e; --table-primary-even: #22384f;
  --table-hover: #24394e; --table-primary-hover: #243b53;
  --table-primary-heading: #243b53; --table-sorted-heading: #233a52;
  --table-attack-heading: #273f57; --table-defence-heading: #23374b;
}
html[data-theme="dark"] :is(th, td, .fixture-meta, .fixture-result, .stat-row, .gd-pill) {border-color: var(--line)}
html[data-theme="dark"] :is(.league-row .track, .index-meter, .prob-mini i) {background: #34444f}
html[data-theme="dark"] .league-row .track i {background: #70b890}
html[data-theme="dark"] #global-table .strength-rating-meter {--meter-fill: #70b890; --meter-dot: #a3ddba}
html[data-theme="dark"] #pl-table :is(.strength-rating-meter, .season-score-meter) {--meter-fill: #5685bc; --meter-dot: #b4d4fb}
html[data-theme="dark"] #pl-table .metric-attack :is(.strength-rating-meter, .season-score-meter) {--meter-fill: #6998c6; --meter-dot: #a2c4e8}
html[data-theme="dark"] #pl-table .metric-defence :is(.strength-rating-meter, .season-score-meter) {--meter-fill: #88a4bd; --meter-dot: #b3c8da}
html[data-theme="dark"] :is(#global-table, #pl-table) :is(.strength-rating-track, .season-score-track) {background: #3a4b5b}
html[data-theme="dark"] :is(#global-table, #pl-table) :is(.strength-rating-track, .season-score-track) b {background: #93a5b3}
html[data-theme="dark"] .seg-bar {background: repeating-linear-gradient(90deg, #3a4b5b 0 9px, transparent 9px 12px)}
html[data-theme="dark"] #pl-table .goal-track {background: #3a4b5b}
html[data-theme="dark"] #pl-table .goal-track i {background: #779ec7}
html[data-theme="dark"] #pl-table .goal-defence .goal-track i {background: #9eb4c8}
html[data-theme="dark"] .projection-meter i {background: #5685bc}
html[data-theme="dark"] .pill {background: var(--section-tint); color: var(--section-color)}

/* Match results and prediction panels retain a clear visual hierarchy. */
html[data-theme="dark"] .round-control {background: var(--surface-control)}
html[data-theme="dark"] .score {background: var(--section-wash); border-color: var(--section-edge); color: var(--section-color)}
html[data-theme="dark"] .score small {color: var(--muted)}
html[data-theme="dark"] .fixture-card .score-final {background: var(--section-fill, var(--section-color)); color: var(--section-fill-ink, #111b23)}
html[data-theme="dark"] .fixture-card .score-final small {color: var(--section-fill-ink, #111b23)}
html[data-theme="dark"] :is(.fixture-card, .result-card) .prob-track i:nth-child(2) {background: #637482}
html[data-theme="dark"] .fixture-card .prob-track i:first-child {background: #689fd7}
html[data-theme="dark"] .fixture-card .prob-track i:last-child {background: #9fc2e8}
html[data-theme="dark"] .result-card .prob-track i:first-child {background: #c3778d}
html[data-theme="dark"] .result-card .prob-track i:last-child {background: #e4afbd}
html[data-theme="dark"] .match-inputs fieldset input {accent-color: var(--section-color)}
html[data-theme="dark"] .primary {background: #f0a8ba; color: #24191f}
html[data-theme="dark"] .primary:hover {background: #f4c0cd}
html[data-theme="dark"] dialog {border-color: var(--line); box-shadow: 0 24px 72px #00000070}
html[data-theme="dark"] dialog::backdrop {background: #050a10bd}
html[data-theme="dark"] .skip {background: var(--surface); color: var(--ink)}
html[data-theme="dark"] #toast {background: #e2ebf2; color: #17212a}
html[data-theme="dark"] input::placeholder {color: #9aaab8; opacity: 1}
html[data-theme="dark"] ::selection {background: #507299; color: #fff}
@media (forced-colors: active) {
  .theme-toggle {border-color: ButtonText}
  html[data-theme="dark"] .main-tabs a.active,
  html[data-theme="dark"] #league-tabs a.active,
  html[data-theme="dark"] #league-view-tabs button.active {border: 2px solid Highlight}
}