/* The Forecast's original navy, cream, teal, olive, and orange visual language.
   Layout and sizing stay in styles.css. */
:root {
  --background: #071019;
  --background-deep: #04090f;
  --surface: rgba(10, 17, 26, 0.9);
  --surface-strong: rgba(14, 23, 35, 0.96);
  --surface-soft: rgba(255, 255, 255, 0.05);
  --paper: #f7f3eb;
  --ink: #f5f7fb;
  --muted: #a1afbc;
  --muted-strong: #d6dde5;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #ff7a45;
  --teal: #6ed4da;
  --olive: #bad98f;
  --signal: #ff7676;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 14% 16%, rgba(110, 212, 218, 0.13), transparent 22rem),
    radial-gradient(circle at 84% 10%, rgba(255, 122, 69, 0.15), transparent 24rem),
    linear-gradient(180deg, #09121b 0%, var(--background) 46%, var(--background-deep) 100%);
  color: var(--ink);
  font-family: "Avenir Next", "IBM Plex Sans", "Trebuchet MS", "Segoe UI", sans-serif;
}

.overview h1, .weather-temp, .dialog-top h2 {
  font-family: "Canela", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.site-header {
  background: rgba(4, 9, 15, 0.93);
  border-bottom-color: var(--line);
}
.brand-mark span, .demo-dot { background: var(--accent); }
.demo-pill, .icon-button { border-color: var(--line-strong); }
.demo-pill { color: var(--muted-strong); }
.icon-button:hover { background: var(--surface-soft); }

.overview {
  background:
    radial-gradient(circle at 17% 5%, rgba(110, 212, 218, 0.15), transparent 26rem),
    radial-gradient(circle at 85% 12%, rgba(255, 122, 69, 0.17), transparent 28rem),
    linear-gradient(145deg, #0d1925, #071019 68%, #050b12);
  color: var(--ink);
}
.overview h1 em { color: var(--accent); }
.eyebrow, .control-label, .card-label { color: var(--muted); }
.eyebrow-divider, .label-rule { background: rgba(110, 212, 218, 0.42); }
.overview-copy { color: var(--muted-strong); }
.scenario-tabs { background: rgba(4, 9, 15, 0.58); border-color: var(--line); }
.scenario-tab { color: var(--muted); }
.scenario-tab:hover { background: var(--surface-soft); color: var(--ink); }
.scenario-tab[aria-pressed=true] {
  color: var(--teal);
  background: rgba(110, 212, 218, 0.12);
  box-shadow: inset 0 0 0 1px rgba(110, 212, 218, 0.23);
}
.shift-takeaway, .weather-panel, .prep-panel {
  background: var(--surface-strong);
  border-color: var(--line-strong);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
  border-radius: 1.5rem;
}
.shift-takeaway {
  background: linear-gradient(145deg, rgba(255, 122, 69, 0.12), rgba(255, 255, 255, 0.04) 45%, rgba(10, 18, 27, 0.96));
}
.takeaway-detail, .weather-summary, .weather-stats, .takeaway-bottom span:last-child { color: var(--muted-strong); }
.outlook-badge {
  color: var(--olive);
  background: rgba(186, 217, 143, 0.1);
  border-color: rgba(186, 217, 143, 0.2);
}
.weather-icon, .prep-list strong { color: var(--accent); }
.weather-stats strong, .prep-list label { color: var(--ink); }
.prep-progress { color: var(--teal); }
.prep-list input { border-color: var(--line-strong); background: #091521; }
.prep-list input:checked { border-color: var(--teal); background: var(--teal); }
.prep-list input:checked::after { color: var(--background); }
.prep-list label:has(input:checked) span { color: var(--muted); }
.prep-list label:has(input:checked) strong { color: var(--muted); }

.games-section {
  background:
    radial-gradient(circle at 15% 0%, rgba(110, 212, 218, 0.07), transparent 27rem),
    linear-gradient(180deg, #071019, #09131d);
}
.all-section {
  background:
    radial-gradient(circle at 90% 8%, rgba(255, 122, 69, 0.08), transparent 28rem),
    linear-gradient(180deg, #09131d, #050b12);
  border-top-color: var(--line);
}
.accent-label { color: var(--accent); }
.section-count, .section-subtitle, .timezone-label, .device-label { color: var(--muted); }
.timezone-label span, .footer-dot { color: var(--accent); }

.game-card {
  background: linear-gradient(155deg, rgba(19, 32, 45, 0.97), rgba(10, 18, 27, 0.97));
  border-color: var(--line);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  border-radius: 1.5rem;
}
.game-card:first-child {
  border-color: rgba(255, 122, 69, 0.32);
  box-shadow: 0 0 0 1px rgba(255, 122, 69, 0.08), 0 16px 38px rgba(0, 0, 0, 0.19);
}
.game-card-top, .event-status, .game-detail, .channel { color: var(--muted); }
.feature-badge {
  background: rgba(255, 122, 69, 0.11);
  color: #ffb08c;
}
.local-badge { background: rgba(110, 212, 218, 0.1); color: var(--teal); }
.event-status.live { color: #ffb08c; }
.event-status.live::before { background: var(--accent); }
.game-card-footer { border-top-color: var(--line); }
.tv-square { background: rgba(110, 212, 218, 0.1); color: var(--teal); }
.channel strong { color: var(--ink); }

.filter-button { background: var(--surface-soft); border-color: var(--line-strong); color: var(--muted-strong); }
.filter-button:hover { background: rgba(110, 212, 218, 0.11); color: var(--ink); }
.filter-button[aria-pressed=true] {
  background: rgba(110, 212, 218, 0.15);
  border-color: rgba(110, 212, 218, 0.38);
  color: var(--teal);
}
.league-groups { background: var(--surface); border-color: var(--line-strong); border-radius: 1.5rem; }
.league-group + .league-group, .game-row { border-color: var(--line); }
.league-heading { background: rgba(255, 255, 255, 0.035); color: var(--muted-strong); }
.league-heading small, .row-match small { color: var(--muted); }
.game-row:hover { background: var(--surface-soft); }
.row-time, .row-match, .row-network, .row-channel strong { color: var(--ink); }
.row-time.live { color: #ffb08c; }
.row-badge { background: rgba(110, 212, 218, 0.11); color: var(--teal); }
.row-channel { color: var(--muted); }

.notes-panel {
  background: linear-gradient(145deg, rgba(14, 23, 35, 0.96), rgba(8, 16, 25, 0.96));
  border-color: var(--line-strong);
  border-radius: 1.5rem;
}
.note-symbol { background: rgba(255, 122, 69, 0.12); color: var(--accent); }
.notes-heading p, .notes-status { color: var(--muted); }
.notes-panel textarea {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--line-strong);
  color: var(--ink);
}
.notes-panel textarea::placeholder { color: var(--muted); }
.site-footer { background: #04090f; color: var(--muted); border-top: 1px solid var(--line); }
.site-footer span:first-child { color: var(--paper); }

.settings-dialog {
  background: linear-gradient(180deg, rgba(14, 23, 35, 0.99), rgba(7, 12, 19, 0.99));
  border-color: var(--line-strong);
  color: var(--ink);
}
.settings-dialog::backdrop { background: rgba(4, 9, 15, 0.78); }
.dialog-top p:last-child, .settings-dialog label, .form-subheading span { color: var(--muted); }
.settings-dialog .icon-button { color: var(--muted-strong); border-color: var(--line); }
.settings-dialog input {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}
.settings-dialog .theme-setting legend { color: var(--muted-strong); }
.settings-dialog .theme-choice {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink);
}
.settings-dialog .theme-choice:has(input:checked) {
  border-color: rgba(110, 212, 218, 0.5);
  background: rgba(110, 212, 218, 0.13);
}
.settings-dialog .theme-choice small { color: var(--muted); }
.settings-dialog .theme-choice input { accent-color: var(--teal); }
.form-subheading { color: var(--teal); }
.settings-error { color: var(--signal); }
.primary-button { background: rgba(255, 122, 69, 0.14); border: 1px solid rgba(255, 122, 69, 0.25); color: var(--paper); }
.primary-button:hover { background: rgba(255, 122, 69, 0.25); }
.primary-button span { color: var(--accent); }
.text-button { color: var(--muted-strong); }

button:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: var(--teal); }
.week-section, .notes-section { background: var(--background); border-color: var(--line); }
.week-day, .week-detail { background: var(--surface-strong); border-color: var(--line); color: var(--ink); }
.week-day[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.week-day-today { background: #182b3a; }
.week-day-label, .week-day-foot, .week-detail-eyebrow { color: var(--accent); }
.week-day-count, .week-detail-header>span, .week-empty, .week-status { color: var(--muted); }
.week-day-divider { background: var(--line); }
.week-detail-header { border-color: var(--line); }