:root {
  color-scheme: light dark;
  --bg: #0e1420;
  --fg: #eef1f6;
  --muted: #9aa5b8;
  --accent: #4f8cff;
  --max-width: 720px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfbfd;
    --fg: #14181f;
    --muted: #5a6274;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.site-header, main, .site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

.site-header h1 {
  margin-bottom: 0.25rem;
  font-size: 1.75rem;
}

.tagline {
  color: var(--muted);
  margin-top: 0;
}

.status {
  border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}

.status h2 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.site-footer {
  color: var(--muted);
  font-size: 0.85rem;
}

a { color: var(--accent); }

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

.week-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.week-list li {
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}

.week-list a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.25rem;
  text-decoration: none;
  color: var(--fg);
}
.week-list a:hover { color: var(--accent); }

.week-list .week-meta { color: var(--muted); font-size: 0.85rem; }

.empty-state {
  color: var(--muted);
  padding: 1rem 0.25rem;
  font-style: italic;
}

.rankings-confidence-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.rating-uncertainty {
  color: var(--muted);
  font-size: 0.8rem;
}

.demo-banner {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.game-card {
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.9rem;
}

.game-teams {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.game-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.game-row strong { color: var(--fg); font-weight: 600; }

.pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.pill-green { background: #1f7a3f; color: #eafff1; }
.pill-red { background: #8a2f2f; color: #ffeeee; }
.pill-pending { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--muted); }
.pill-final-spread { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--fg); }
.pill-err-good { background: #1f7a3f; color: #eafff1; }
.pill-err-mid { background: #a6791f; color: #fff6e6; }
.pill-err-bad { background: #8a2f2f; color: #ffeeee; }

/* ATS pills (N3c). Deliberately NOT the same green/red as the SU pill: SU and ATS are
   different questions and can disagree on the same game (a pick can win straight up
   and still land on the wrong side of the line). Outlined rather than filled, so the
   two never read as one verdict repeated twice. */
.pill-ats-win { background: transparent; border: 1px solid #1f7a3f; color: #2f9e55; }
.pill-ats-loss { background: transparent; border: 1px solid #8a2f2f; color: #c25b5b; }
/* push / no-edge: real published states, neither a win nor a loss, so neither colour. */
.pill-ats-neutral {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  color: var(--muted);
}
.pill-line {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--muted);
}

.correction-note {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 0.85rem;
}

.correction-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--accent);
}

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.raw-link {
  font-size: 0.85rem;
  color: var(--muted);
}

.loading, .error-state {
  color: var(--muted);
  padding: 1rem 0.25rem;
}
.error-state { color: #c0392b; }

.season-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.92rem;
}
.season-table th, .season-table td {
  text-align: left;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.season-table th { color: var(--muted); font-weight: 600; }
.season-table td { color: var(--fg); }

.rankings-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.rankings-tab {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.rankings-tab:hover { color: var(--fg); }
.rankings-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Footer legal block (COMMERCIALIZATION_GATE.md Gate F, added 2026-08-29).
   Disclaimer text was reworked from Gary's own wording at his request on
   2026-08-29 ("concise and covers my butt"); the nflverse line is a LICENSE
   REQUIREMENT, not decoration -- do not remove either. Deliberately
   readable rather than fine-print-grey: a disclaimer nobody can read is not
   a disclaimer. */
.site-footer .disclaimer {
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.site-footer .attribution {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

/* Season / week records (2026-10-02). SU and ATS are shown as separate rows, never
   combined into one headline number -- they answer different questions. */
.record-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.record-row:last-child { border-bottom: none; }
.record-label { min-width: 11rem; color: var(--muted); }
.record-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.record-note { color: var(--muted); font-size: 0.85rem; }
.record-caveat { color: var(--muted); font-size: 0.85rem; margin-top: 0.75rem; }
.week-record {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  color: var(--muted);
  margin: 0.25rem 0 0.75rem;
}

/* Week-level correction note sits BELOW the games (2026-10-02), so give it a little
   air above and read it as a footnote rather than a banner. */
.correction-note-week { margin-top: 1.25rem; }

/* Rankings week picker (2026-10-02) */
.rankings-weeks { flex-wrap: wrap; align-items: center; }
.rankings-weeks-label { color: var(--muted); font-size: 0.85rem; margin-right: 0.25rem; }
.rankings-weeks .rankings-tab { min-width: 2.25rem; padding: 0.3rem 0.6rem; }

/* Never-published games (2026-10-06). These carry a full tile like every other
   game, so they need a visible marker that they are NOT part of the pre-kickoff
   published record -- otherwise the tile itself implies a claim the data does not
   make. Deliberately understated: a dashed edge and a muted footnote, not a
   warning colour. The games are real and the predictions were real; only the
   publication is missing, and the footnote says where to read why. */
.game-card-unpublished {
  border-style: dashed;
  opacity: 0.92;
}
.game-row-footnote {
  margin-top: 0.15rem;
}
.unpublished-star {
  font-size: 0.85em;
  opacity: 0.75;
  font-style: italic;
}