/* Shared by ScoreTrack, legal pages and the hosted slip workspace.
   Deep black canvas and cool charcoal cards follow Leonard's 14 Sep reference.
   These semantic tokens also cover older rules through literal light fallbacks. */
:root[data-theme='dark'] {
  color-scheme: dark;
  color: #f5f5f5;
  background: #050505;
  --canvas: #050505;
  --off-white: #050505;
  --surface: #0f1113;
  --ink: #f5f5f5;
  --ink-soft: #d4d4d4;
  --muted: #a3a3a3;
  --line: #232326;
  --card-outline: #383838;
  --blue: #0f1113;
  --blue-dark: #050505;
  --blue-deep: #0e0e0e;
  --blue-light: #232326;
  --dark: #050505;
  --purple: #d97757;
  --accent: #d97757;
  --skin-text-accent: #d97757;
  --accent-strong: #d97757;
  --accent-ink: #1c1c1e;
  --green: #73dba0;
  --red: #ff8178;
  --danger: #ff8178;
  --page-bg: var(--canvas);
  --card-bg: var(--surface);
  --border: var(--line);
  --text-secondary: var(--muted);
  --skin-canvas: #050505;
  --skin-surface: #0f1113;
  --skin-raised: #16191c;
  --skin-solid: #16191c;
  --skin-line: #383838;
  --skin-line-soft: #232326;
  --skin-text: #f5f5f5;
  --skin-secondary: #d4d4d4;
  --skin-muted: #a3a3a3;
  --skin-text-red: #ff8178;
  --skin-text-amber: #d97757;
  --skin-text-green: #73dba0;
  --skin-text-blue: #d4d4d4;
  --skin-text-purple: #d97757;
  --skin-tint-red: #382627;
  --skin-tint-amber: #383024;
  --skin-tint-green: #23372d;
  --skin-tint-blue: #16191c;
  --skin-tint-purple: #3a2a20;
  --skin-glass: #16191c99;
  --skin-edge: #74777e55;
  --skin-shadow: #00000030;
  --skin-shadow-strong: #00000055;
}

:root[data-theme='dark'] :is(html, body, #root, .site-shell) { color: var(--ink); background-color: var(--canvas); }
:root[data-theme='dark'] :is(input, textarea, select) { color-scheme: dark; }
:root[data-theme='dark'] ::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme='dark'] :is(.footer-nav, .main-header, .product-nav) { background: var(--canvas); }
:root[data-theme='dark'] .social-workspace iframe { background: var(--canvas); }
:root[data-theme='dark'] :is(.page-toolbar, .player-profile-page) { --toolbar-accent: #d97757; --club-accent: #d97757; }
:root[data-theme='dark'] :is(.odds-category-tabs, .live-sport-tabs, .club-sport-tabs, .favourite-club-tabs) button.active { background: var(--skin-raised); }
/* Small counters and bars need dark ink on their bright sport accents. */
:root[data-theme='dark'] :is(.odds-category-tabs, .live-category-tabs, .club-sport-tabs) button.active small,
:root[data-theme='dark'] :is(.odds-fixture-mode-tabs, .favourite-feed-tabs) button.active > b,
:root[data-theme='dark'] .social-unread,
:root[data-theme='dark'] :is(.club-league-action, .live-team-row) small,
:root[data-theme='dark'] .auth-submit,
:root[data-theme='dark'] .picks-hub-page .market-strip button.active { color: #151617; }

.account-theme-switch { width: calc(100% - 24px); min-height: 58px; margin: 10px 12px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.account-theme-switch > svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.account-theme-switch > span:first-of-type { flex: 1; font-weight: 500; }
.account-theme-switch small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 400; }
.theme-switch-track { width: 46px; height: 26px; padding: 3px; flex: 0 0 46px; border-radius: 20px; background: #74777e; }
.theme-switch-track > span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 140ms ease; }
.account-theme-switch[aria-checked='true'] .theme-switch-track { background: #d97757; }
.account-theme-switch[aria-checked='true'] .theme-switch-track > span { transform: translateX(20px); background: #151617; }
.account-theme-switch[aria-checked='true'] > svg { color: var(--accent, #d97757); }
.account-theme-switch:focus-visible { outline: 3px solid #d97757; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .theme-switch-track > span { transition: none; } }

/* Suppress native blue touch flashes across the app and hosted slip workspace.
   Keyboard focus-visible indicators remain available. */
html { -webkit-tap-highlight-color: transparent; }
:where(button, a, summary, [role='button'], [role='tab']):focus:not(:focus-visible) { outline: none; }

/* The approved fixture-mode controls retain their exact palette and effect;
   the new tones apply to the surrounding canvas and content cards. */
:root[data-theme='dark'] .odds-fixture-mode-tabs {
  --surface: #121416;
  --skin-surface: #121416;
  --skin-solid: #1a1c1f;
  --skin-raised: #1a1c1f;
  --skin-secondary: #d3d4d6;
  --ink-soft: #d3d4d6;
  --skin-text: #ececec;
  --skin-muted: #abadb0;
  --muted: #abadb0;
  --skin-line: #3f4146;
  --skin-line-soft: #2a2c30;
  --line: #2a2c30;
}

/* ---- Appearance skins (Leonard, 16 Sep 2026) ----------------------------------------------
   Grey and Colour are dark-mode skins: html keeps data-theme="dark" (every dark rule applies)
   and data-skin swaps the tokens. The body-level block outranks the deep-black override in
   linelessSurfaces.css (:root[data-theme='dark'] body) because it carries one more attribute.
   Grey = Claude Android 1.260914 palette, read from the decompiled theme classes:
   page #141413 · card #1f1e1d · raised #262624/#30302e · border #3d3d3a/#4d4c48 ·
   text #faf9f5/#c2c0b6/#9c9a92 · clay #d97757/#c96442 · blue #2c84db/#74abe2 ·
   green #65bb30 · red #fe8181 · purple #9b87f5. */
:root[data-theme='dark'][data-skin='grey'] {
  color: #faf9f5;
  background: #141413;
  --canvas: #141413;
  --off-white: #141413;
  --surface: #1f1e1d;
  --ink: #faf9f5;
  --ink-soft: #c2c0b6;
  --muted: #9c9a92;
  --line: #3d3d3a;
  --card-outline: #4d4c48;
  --blue: #262624;
  --blue-dark: #141413;
  --blue-deep: #1a1918;
  --blue-light: #3d3d3a;
  --dark: #141413;
  --purple: #d97757;
  --accent: #d97757;
  --skin-text-accent: #d97757;
  --accent-strong: #c96442;
  --accent-ink: #141413;
  --green: #65bb30;
  --red: #fe8181;
  --danger: #fe8181;
  --skin-canvas: #141413;
  --skin-surface: #1f1e1d;
  --skin-raised: #262624;
  --skin-solid: #30302e;
  --skin-line: #4d4c48;
  --skin-line-soft: #3d3d3a;
  --skin-text: #faf9f5;
  --skin-secondary: #c2c0b6;
  --skin-muted: #9c9a92;
  --skin-text-red: #fe8181;
  --skin-text-amber: #d97757;
  --skin-text-green: #65bb30;
  --skin-text-blue: #c2c0b6; /* neutral like plain Dark; Claude blue is reserved for links via --link */
  --link: #74abe2;
  --skin-text-purple: #9b87f5;
  --skin-tint-red: #682626;
  --skin-tint-amber: #3d2a22;
  --skin-tint-green: #004708;
  --skin-tint-blue: #1c3f62;
  --skin-tint-purple: #29253e;
  --skin-glass: #26262499;
  --skin-edge: #4d4c4855;
}
:root[data-theme='dark'][data-skin='grey'] body {
  --surface: #1f1e1d;
  --skin-surface: #1f1e1d;
  --skin-raised: #262624;
  --skin-solid: #30302e;
  --card-bg: #1f1e1d;
  --blue: #262624;
  --skin-tint-blue: #1c3f62;
  --skin-glass: #26262499;
  --line: #3d3d3a;
  --skin-line-soft: #3d3d3a;
  --border: #3d3d3a;
}
:root[data-theme='dark'][data-skin='grey'] body :is(.odds-event-card, .live-event-card, .odds-events-page .odds-lead-events details.odds-competition, .odds-events-page .odds-competition-continued) {
  --surface: #262624;
  --skin-surface: #262624;
  --skin-raised: #30302e;
  --skin-solid: #30302e;
  --card-bg: #262624;
  background: #262624;
  border-color: #3d3d3a;
}
:root[data-theme='dark'][data-skin='grey'] :is(.page-toolbar, .player-profile-page) { --toolbar-accent: #d97757; --club-accent: #d97757; }
/* membership card follows --surface/--line (contentSurfaces.css), no literal black in any skin */

/* Colour: deep navy canvas, cool blue-grey cards, vivid orange/blue/green/pink/violet accents. */
:root[data-theme='dark'][data-skin='rgb'] {
  color: #f5f7ff;
  background: #0b0e1a;
  --canvas: #0b0e1a;
  --off-white: #0b0e1a;
  --surface: #141a2e;
  --ink: #f5f7ff;
  --ink-soft: #c7cdf0;
  --muted: #8f98c4;
  --line: #2b3559;
  --card-outline: #3a4677;
  --blue: #1b2340;
  --blue-dark: #0b0e1a;
  --blue-deep: #070912;
  --blue-light: #2b3559;
  --dark: #0b0e1a;
  --purple: #d97757;
  --accent: #d97757;
  --skin-text-accent: #d97757;
  --accent-strong: #c96442;
  --accent-ink: #0b0e1a;
  --green: #2ee07a;
  --red: #ff5c7a;
  --danger: #ff5c7a;
  --skin-canvas: #0b0e1a;
  --skin-surface: #141a2e;
  --skin-raised: #1b2340;
  --skin-solid: #232c4d;
  --skin-line: #3a4677;
  --skin-line-soft: #2b3559;
  --skin-text: #f5f7ff;
  --skin-secondary: #c7cdf0;
  --skin-muted: #8f98c4;
  --skin-text-red: #ff5c7a;
  --skin-text-amber: #ffb020;
  --skin-text-green: #2ee07a;
  --skin-text-blue: #5b9dff;
  --skin-text-purple: #b06cff;
  --skin-tint-red: #3a1a2a;
  --skin-tint-amber: #3a2a10;
  --skin-tint-green: #10331f;
  --skin-tint-blue: #16264a;
  --skin-tint-purple: #2a1a48;
  --skin-glass: #1b234099;
  --skin-edge: #3a467766;
}
:root[data-theme='dark'][data-skin='rgb'] body {
  --surface: #141a2e;
  --skin-surface: #141a2e;
  --skin-raised: #1b2340;
  --skin-solid: #232c4d;
  --card-bg: #141a2e;
  --blue: #1b2340;
  --skin-tint-blue: #16264a;
  --skin-glass: #1b234099;
  --line: #2b3559;
  --skin-line-soft: #2b3559;
  --border: #2b3559;
}
:root[data-theme='dark'][data-skin='rgb'] body :is(.odds-event-card, .live-event-card, .odds-events-page .odds-lead-events details.odds-competition, .odds-events-page .odds-competition-continued) {
  --surface: #1b2340;
  --skin-surface: #1b2340;
  --skin-raised: #232c4d;
  --skin-solid: #232c4d;
  --card-bg: #1b2340;
  background: linear-gradient(135deg, #1b2340, #161d38 60%, #1a1f42);
  border-color: #3a4677;
}
:root[data-theme='dark'][data-skin='rgb'] :is(.page-toolbar, .player-profile-page) { --toolbar-accent: #d97757; --club-accent: #5b9dff; }
:root[data-theme='dark'][data-skin='rgb'] .match-centre-masthead { --match-glow-strength: 55%; }

/* Colourful sport identity: each sport tab lights up in its own hue when selected. */
:root[data-theme='dark'][data-skin='rgb'] .odds-category-tabs button.active { border-color: #d97757; }

/* Live/Upcoming/Results/Highlights strip and the companion's deep cards follow the skin
   (Leonard, 07:00: "sections like these" still showed near-black in Grey). */
:root[data-theme='dark'][data-skin='grey'] .odds-fixture-mode-tabs {
  --surface: #262624; --skin-surface: #262624; --skin-solid: #30302e; --skin-raised: #30302e;
  --skin-secondary: #c2c0b6; --ink-soft: #c2c0b6; --skin-text: #faf9f5; --skin-muted: #9c9a92; --muted: #9c9a92;
  --skin-line: #4d4c48; --skin-line-soft: #3d3d3a; --line: #3d3d3a;
}
:root[data-theme='dark'][data-skin='rgb'] .odds-fixture-mode-tabs {
  --surface: #1b2340; --skin-surface: #1b2340; --skin-solid: #232c4d; --skin-raised: #232c4d;
  --skin-secondary: #c7cdf0; --ink-soft: #c7cdf0; --skin-text: #f5f7ff; --skin-muted: #8f98c4; --muted: #8f98c4;
  --skin-line: #3a4677; --skin-line-soft: #2b3559; --line: #2b3559;
}
/* Active fixture-mode pill uses the clay highlight in every dark skin (was a grey ring on black). */
:root[data-theme='dark'] .odds-fixture-mode-tabs { --page-accent: var(--accent, #d97757); }
:root[data-theme='dark'] .odds-fixture-mode-tabs button.active { color: var(--accent, #d97757); }
:root[data-theme='dark'] .odds-fixture-mode-tabs button.active > b { color: #faf9f5; }