/* ====================================================================
   MLB Daily Dashboard — styles.css
   Vanilla CSS, no framework. Responsive grid: 3-col desktop / 1-col mobile.
   Honors prefers-color-scheme. Per-team color custom properties exposed.
   ==================================================================== */

:root {
  color-scheme: light;
  /* Layout tokens */
  --max-width: 1320px;
  --gap: 1.1rem;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --border-thin: 1px solid var(--border-color);

  /* Type tokens — Inter for a modern, numeric-forward stat-site voice */
  --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono-stack: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Elevation — soft, layered shadows on white cards */
  --shadow-sm: 0 1px 2px rgba(16, 23, 38, 0.06), 0 1px 1px rgba(16, 23, 38, 0.04);
  --shadow-md: 0 4px 16px rgba(16, 23, 38, 0.08), 0 1px 3px rgba(16, 23, 38, 0.05);
  --shadow-card: var(--shadow-sm);

  /* Light theme — white cards on cool paper, a single confident blue accent */
  --bg: #eceff4;
  --bg-elevated: #ffffff;
  --bg-sunken: #f4f6f9;
  --fg: #0f1521;
  --fg-muted: #5a6473;
  --border-color: #e4e7ec;
  --border-strong: #ccd2da;
  --accent: #1f6feb;
  --accent-strong: #1559c9;
  --accent-soft: #eaf1fd;
  --watch-gold: #b8810a;
  --watch-gold-bg: #fbf2da;
  --rd-pos: #138a47;
  --rd-neg: #d23535;
  --live: #e0392b;
  --error-bg: #fdecea;
  --error-fg: #8b1a14;
  --empty-fg: #8a93a0;
  --row-hover: #f1f4f9;

  /* League colors */
  --league-AL: #d50032;
  --league-NL: #002d72;

  /* Per-team primary colors (30 teams). Naming: --team-{ABBR} uppercase.
     rev-2: ARI / DET / NYY refreshed to match CDN logo extraction. */
  --team-LAA: #BA0021;
  --team-ARI: #AA182C;
  --team-BAL: #DF4601;
  --team-BOS: #BD3039;
  --team-CHC: #0E3386;
  --team-CIN: #C6011F;
  --team-CLE: #00385D;
  --team-COL: #333366;
  --team-DET: #0C2C56;
  --team-HOU: #002D62;
  --team-KC:  #004687;
  --team-LAD: #005A9C;
  --team-WSH: #AB0003;
  --team-NYM: #002D72;
  --team-ATH: #003831;
  --team-PIT: #FDB827;
  --team-SD:  #2F241D;
  --team-SEA: #0C2C56;
  --team-SF:  #FD5A1E;
  --team-STL: #C41E3A;
  --team-TB:  #092C5C;
  --team-TEX: #003278;
  --team-TOR: #134A8E;
  --team-MIN: #002B5C;
  --team-PHI: #E81828;
  --team-ATL: #CE1141;
  --team-CWS: #27251F;
  --team-MIA: #00A3E0;
  --team-NYY: #132448;
  --team-MIL: #12284B;
}

/* Dark is the default register (audit P1). Applied explicitly via the
   [data-theme] attribute so a user toggle — not the OS — governs the theme.
   The base :root above is the light theme; this block is the dark override. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0d13;
  --bg-elevated: #141922;
  --bg-sunken: #0f141c;
  --fg: #e8ecf3;
  --fg-muted: #97a1b0;
  --border-color: #232a36;
  --border-strong: #36404f;
  --accent: #4d9bff;
  --accent-strong: #79b4ff;
  --accent-soft: #15233b;
  --watch-gold: #e8b84b;
  --watch-gold-bg: #211c10;
  --rd-pos: #4ec77d;
  --rd-neg: #f06d6d;
  --live: #ff4d40;
  --error-bg: #3a1a17;
  --error-fg: #ffb4ad;
  --empty-fg: #6f7785;
  --row-hover: #1b212c;
  /* Dark relies on borders, not shadow — keep elevation subtle */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-stack);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1; /* Inter: open digits + alt letterforms */
}
/* Tabular figures everywhere a number can change width keeps columns steady */
.numeric, .division-table td, .division-table th,
[class*="-num"], [class*="-record"], [class*="-time"], [class*="-rundiff"] {
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----------- Header / masthead ----------- */
.site-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  border-top: 3px solid var(--accent);
  padding: 1.6rem 1.5rem 1.4rem;
}
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}
.theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--row-hover, var(--bg-elevated)); border-color: var(--border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-title {
  margin: 0 0 0.3rem;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.site-title::before {
  content: "";
  width: 7px;
  height: 1.5rem;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  flex: none;
}
.site-subtitle {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.92rem;
}
.last-updated-wrap {
  margin-left: 0.75rem;
  font-family: var(--mono-stack);
  font-size: 0.85rem;
  color: var(--fg-muted);
}

/* ----------- API "showing cached data" notice (RISK-001) ----------- */
.stale-note {
  max-width: var(--max-width);
  margin: 0.6rem auto 0;
  padding: 0.5rem 0.9rem;
  background: var(--watch-gold-bg);
  color: var(--watch-gold);
  border: 1px solid var(--watch-gold);
  border-radius: var(--radius);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stale-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--watch-gold);
  flex: none;
  animation: stale-pulse 1.4s ease-in-out infinite;
}
@keyframes stale-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .stale-dot { animation: none; } }

/* ----------- Error banner ----------- */
.error-banner {
  max-width: var(--max-width);
  margin: 1rem auto 0;
  padding: 0.85rem 1.1rem;
  background: var(--error-bg);
  color: var(--error-fg);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.error-banner[hidden] { display: none !important; }
.error-banner-text { font-weight: 500; }
.error-banner-retry {
  appearance: none;
  border: 1px solid var(--error-fg);
  background: transparent;
  color: var(--error-fg);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.error-banner-retry:hover { background: rgba(0,0,0,0.05); }

/* ----------- Dashboard grid ----------- */
.dashboard-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2rem;
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
  #rankings-panel { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  #rankings-panel { grid-column: auto; }
}

/* ----------- Panel / card ----------- */
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.3rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.panel-heading {
  position: relative;
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-color);
}
.panel-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 34px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.panel-body { flex: 1 1 auto; }
.panel-loading {
  color: var(--fg-muted);
  font-style: italic;
  margin: 1rem 0;
}
.panel-empty-state {
  color: var(--empty-fg);
  text-align: center;
  padding: 2rem 1rem;
  font-style: italic;
}

/* ----------- Standings (rankings) ----------- */
.division-block { margin-bottom: 1.1rem; }
.division-block:last-child { margin-bottom: 0; }
.division-title {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.division-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.division-table th,
.division-table td {
  text-align: right;
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.division-table tbody tr:last-child td { border-bottom: none; }
.division-table th:first-child,
.division-table td:first-child { text-align: left; }
.division-table th {
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border-strong);
  padding-top: 0.2rem;
  padding-bottom: 0.45rem;
}
.division-table tbody tr { transition: background 0.1s; }
.division-table tbody tr:hover { background: var(--row-hover); }
.team-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
/* Favorites (My Team) */
.fav-star {
  appearance: none;
  border: none;
  background: none;
  padding: 0 0.1rem 0 0;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  font-size: 0.85rem;
  color: var(--fg-muted);
  opacity: 0.55;
  transition: color 0.12s, opacity 0.12s;
}
.fav-star:hover { opacity: 1; color: var(--watch-gold); }
.fav-star.on { color: var(--watch-gold); opacity: 1; }
.fav-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
[data-fav-team].is-fav {
  background: var(--watch-gold-bg);
  border-radius: 5px;
  box-shadow: inset 2px 0 0 var(--watch-gold);
  padding-left: 4px;
}
[data-fav-team].is-fav .team-abbr,
[data-fav-team].is-fav .score-abbr,
[data-fav-team].is-fav .team-abbr { font-weight: 800; }
.team-swatch {
  display: inline-block;
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: currentColor;
  flex: 0 0 auto;
}
.team-abbr {
  font-family: var(--mono-stack);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
/* Day-over-day rank movement chip (GAP-002) */
.rank-move {
  font-family: var(--mono-stack);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-left: 0.1rem;
}
.rank-move.up { color: var(--rd-pos); }
.rank-move.down { color: var(--rd-neg); }
/* Division magic number (late-season clinch tracker) */
.magic-chip {
  font-family: var(--mono-stack);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--watch-gold);
  border: 1px solid var(--watch-gold);
  border-radius: 4px;
  padding: 0 3px;
  margin-left: 0.15rem;
  white-space: nowrap;
}
.magic-chip.clinched { color: var(--rd-pos); border-color: var(--rd-pos); }
/* Multi-day run-diff trajectory sparkline in the standings */
.history-spark {
  width: 34px;
  height: 14px;
  margin-left: 0.2rem;
  opacity: 0.85;
  flex: none;
}
.numeric { font-variant-numeric: tabular-nums; font-family: var(--mono-stack); font-size: 0.86rem; }

.wildcard-block {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 2px dashed var(--border-color);
}
.wildcard-block .division-title { color: var(--accent); }

/* ----------- Trends ----------- */
.trend-row {
  display: grid;
  grid-template-columns: 30px 44px 1fr 60px 50px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.2rem;
  border-bottom: 1px solid var(--border-color);
}
.trend-row:last-child { border-bottom: none; }
.trend-row:hover { background: var(--row-hover); }
.trend-abbr {
  font-family: var(--mono-stack);
  font-weight: 600;
  font-size: 0.85rem;
}
.trend-record { font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: 0.85rem; }
.trend-rundiff {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  font-size: 0.88rem;
}
.trend-rundiff.positive { color: var(--rd-pos); }
.trend-rundiff.negative { color: var(--rd-neg); }
.trend-streak {
  font-family: var(--mono-stack);
  font-size: 0.78rem;
  text-align: right;
  color: var(--fg-muted);
}
.trend-streak.streak-W { color: var(--rd-pos); font-weight: 600; }
.trend-streak.streak-L { color: var(--rd-neg); font-weight: 600; }

.sparkline {
  width: 100%;
  height: 24px;
  display: block;
}
.sparkline-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparkline-baseline {
  stroke: var(--border-color);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* ----------- Upcoming ----------- */
.upcoming-day-group { margin-bottom: 1rem; }
.upcoming-day-group:last-child { margin-bottom: 0; }
.upcoming-day-title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.upcoming-game {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.3rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
}
.upcoming-game:last-child { border-bottom: none; }
.upcoming-matchup {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.upcoming-at { color: var(--fg-muted); font-size: 0.78rem; }
.upcoming-time {
  font-family: var(--mono-stack);
  font-size: 0.78rem;
  color: var(--fg-muted);
  text-align: right;
  white-space: nowrap;
}
.upcoming-status {
  font-family: var(--mono-stack);
  font-size: 0.72rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----------- Watchability "top game" highlight (OPP-001) ----------- */
.upcoming-game--top {
  border-left: 3px solid var(--watch-gold);
  padding-left: 0.5rem;
  background: var(--watch-gold-bg);
  border-radius: 0 6px 6px 0;
}
.upcoming-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.watch-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--watch-gold);
  white-space: nowrap;
}
.upcoming-reason {
  grid-column: 1 / -1;
  font-size: 0.74rem;
  color: var(--fg-muted);
  padding-top: 0.05rem;
}
/* Probable starters */
.upcoming-probables {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--fg-muted);
  font-family: var(--mono-stack);
  padding-top: 0.05rem;
}
.prob-tag {
  display: inline-block;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 0.25rem;
}
.featured-probables {
  font-size: 0.76rem;
  color: var(--fg-muted);
  font-family: var(--mono-stack);
  margin-top: 0.45rem;
}

/* ----------- Featured matchup hero (audit P6) ----------- */
.featured-matchup {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem 0.75rem;
  background: var(--watch-gold-bg);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--watch-gold);
  border-radius: 8px;
}
.featured-label {
  font-family: var(--mono-stack);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--watch-gold);
  margin-bottom: 0.5rem;
}
.featured-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.featured-team {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.featured-matchup .logo-img.featured-logo { width: 40px; height: 40px; }
.featured-abbr { font-weight: 700; font-size: 1.05rem; }
.featured-record {
  font-family: var(--mono-stack);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--fg-muted);
}
.featured-at { color: var(--fg-muted); font-size: 0.85rem; }
.featured-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}
.featured-reason { font-size: 0.82rem; color: var(--fg); min-width: 0; }
.featured-time {
  font-family: var(--mono-stack);
  font-size: 0.78rem;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* ----------- Daily briefing — broadcast wire (OPP-002 / audit P2) ----------- */
.briefing {
  max-width: var(--max-width);
  margin: 0 auto 0.25rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.briefing-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.briefing-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
}
.briefing-dateline {
  font-family: var(--mono-stack);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  opacity: 0.85;
}
.briefing-body { display: block; }

/* Lead story — enlarged, with a team-color rule on the left. */
.briefing-lead {
  border-left: 3px solid var(--watch-gold);
  padding: 0.1rem 0 0.15rem 0.7rem;
  margin-bottom: 0.7rem;
}
.briefing-lead-eyebrow {
  display: block;
  font-family: var(--mono-stack);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--watch-gold);
  margin-bottom: 0.15rem;
}
.briefing-lead-head {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.28;
  font-weight: 600;
  color: var(--fg);
}

/* Rundown — the remaining stories, each with a team-color chip. */
.briefing-rundown {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.briefing-rundown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--fg);
}
.briefing-chip {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.briefing-rundown-text { min-width: 0; }

/* ----------- Trend pulse — hottest/coldest on first contact (audit P3) ----------- */
.trend-pulse {
  max-width: var(--max-width);
  margin: 0 auto 0.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
@media (max-width: 560px) { .trend-pulse { grid-template-columns: 1fr; } }
.pulse-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "label label label" "team spark rd";
  align-items: center;
  gap: 0.2rem 0.7rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.pulse-card.pulse-rising  { border-left: 3px solid var(--rd-pos); }
.pulse-card.pulse-cooling { border-left: 3px solid var(--rd-neg); }
.pulse-label {
  grid-area: label;
  font-family: var(--mono-stack);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.15rem;
}
.pulse-team { grid-area: team; display: flex; align-items: center; gap: 0.4rem; }
.pulse-card .logo-img.pulse-logo { width: 22px; height: 22px; }
.pulse-abbr { font-weight: 700; font-size: 0.92rem; }
.pulse-record {
  font-family: var(--mono-stack);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--fg-muted);
}
.pulse-spark { grid-area: spark; width: 100%; height: 26px; }
.pulse-rundiff {
  grid-area: rd;
  font-family: var(--mono-stack);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
}
.pulse-rundiff.positive { color: var(--rd-pos); }
.pulse-rundiff.negative { color: var(--rd-neg); }

/* ----------- Run-differential spine in the Daily standings (audit P4) ----------- */
.numeric { font-variant-numeric: tabular-nums; }
.division-table td.numeric,
.division-table th { font-family: var(--mono-stack); }
.division-table th { font-weight: 600; }
.diff-cell { width: 1%; white-space: nowrap; }
.rd {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.rd-bar { height: 8px; border-radius: 2px; flex: none; }
.rd-bar.positive { background: var(--rd-pos); }
.rd-bar.negative { background: var(--rd-neg); }
.rd-num {
  font-family: var(--mono-stack);
  font-variant-numeric: tabular-nums;
  min-width: 2.4em;
  text-align: right;
}
.rd-num.positive { color: var(--rd-pos); font-weight: 600; }
.rd-num.negative { color: var(--rd-neg); font-weight: 600; }

/* ----------- Live scoreboard ----------- */
.scoreboard {
  max-width: var(--max-width);
  margin: 0 auto 0.25rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.scoreboard-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.scoreboard-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
}
.scoreboard-status {
  font-family: var(--mono-stack);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.scoreboard-status.has-live { color: var(--live, #e0392b); font-weight: 700; }
.scoreboard-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}
.score-game {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.score-game:hover { border-color: var(--border-strong); }
.score-game.score-live { border-left: 3px solid var(--live, #e0392b); }
.score-game.score-final { opacity: 0.82; }
.score-teams { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.score-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.score-team-id { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.score-game .logo-img.score-logo { width: 20px; height: 20px; }
.score-abbr { font-size: 0.86rem; font-weight: 600; }
.score-line.is-leader .score-abbr { font-weight: 800; }
.score-num {
  font-family: var(--mono-stack);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  min-width: 1.3em;
  text-align: right;
  color: var(--fg-muted);
}
.score-line.is-leader .score-num { color: var(--fg); font-weight: 700; }
.score-status-cell {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.score-state-text {
  font-family: var(--mono-stack);
  font-size: 0.72rem;
  color: var(--fg-muted);
  text-align: right;
}
.score-state-text.live { color: var(--live, #e0392b); font-weight: 700; }
.score-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live, #e0392b);
  flex: none;
  animation: score-pulse 1.4s ease-in-out infinite;
}
@keyframes score-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .score-live-dot { animation: none; }
}

/* ----------- Footer ----------- */
.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  color: var(--fg-muted);
  font-size: 0.82rem;
  text-align: center;
}
.app-version-strip {
  margin-top: 0.4rem;
}
.app-version {
  font-family: var(--mono-stack);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  opacity: 0.75;
}

/* ====================================================================
   Tabs (Daily / Trends)
   ==================================================================== */
.tabs {
  max-width: var(--max-width);
  margin: 1.1rem auto 0;
  padding: 0 1.5rem;
  display: flex;
  gap: 0.3rem;
  width: fit-content;
}
.tabs-inner,
.tabs {
  align-items: center;
}
.tab-button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tab-button:hover { color: var(--fg); background: var(--row-hover); }
.tab-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-button.is-active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(31, 111, 235, 0.28);
}
.tab-button.is-active:hover { background: var(--accent-strong); }
.tab-panel[hidden] { display: none !important; }

/* ====================================================================
   Trends tab — themed surface. Dark is the default register; in light
   mode the whole tab follows the Daily light palette so the two views
   are one product, not two. All class names are namespaced with
   .trends- to avoid collisions with the existing daily styles.
   ==================================================================== */
.trends-surface {
  /* Dark register (default). Overridden under [data-theme="light"] below.
     Mirrors the global dark tokens so Trends and Daily are one system. */
  --trends-bg: #0a0d13;
  --trends-panel: #141922;
  --trends-panel-2: #1b212c;
  --trends-line: #232a36;
  --trends-text: #e8ecf3;
  --trends-text-2: #97a1b0;
  --trends-text-3: #697585;
  --trends-accent: #4d9bff;
  --trends-good: #4ec77d;
  --trends-bad: #f06d6d;
  --trends-warn: #e8b84b;
  --trends-al: #d24a4a;
  --trends-nl: #4d9bff;
  background: var(--trends-bg);
  color: var(--trends-text);
  font-size: 14px;
  line-height: 1.4;
}

/* Light register — Trends follows the Daily light theme (audit Finding 02:
   one register across both tabs). Mirrors the base :root light tokens. */
:root[data-theme="light"] .trends-surface {
  --trends-bg: #eceff4;
  --trends-panel: #ffffff;
  --trends-panel-2: #f4f6f9;
  --trends-line: #e4e7ec;
  --trends-text: #0f1521;
  --trends-text-2: #5a6473;
  --trends-text-3: #8a93a0;
  --trends-accent: #1f6feb;
  --trends-good: #138a47;
  --trends-bad: #d23535;
  --trends-warn: #b8810a;
  --trends-al: #d50032;
  --trends-nl: #1f6feb;
}

.trends-filterbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 28px;
  background: var(--trends-bg);
  border-top: 1px solid var(--trends-line);
  border-bottom: 1px solid var(--trends-line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.trends-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--trends-panel);
  color: var(--trends-text-2);
  border: 1px solid var(--trends-line);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  user-select: none;
  transition: .15s;
}
.trends-chip:hover { background: var(--trends-panel-2); color: var(--trends-text); }
.trends-chip.on   { background: var(--trends-accent); color: #fff; border-color: var(--trends-accent); }
.trends-chip.al.on { background: var(--trends-al); border-color: var(--trends-al); }
.trends-chip.nl.on { background: var(--trends-nl); border-color: var(--trends-nl); }
.trends-chip-label {
  font-size: 11px;
  color: var(--trends-text-3);
  align-self: center;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.trends-main { padding: 18px 28px 60px; }
.trends-loading {
  color: var(--trends-text-2);
  font-style: italic;
  margin: 1.5rem 0;
}
.trends-loading-error { color: #f37070; font-style: normal; }

.trends-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.trends-kpi {
  background: var(--trends-panel);
  border: 1px solid var(--trends-line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.trends-kpi .label {
  font-size: 10.5px;
  color: var(--trends-text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  margin-bottom: 8px;
}
.trends-kpi .val {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.trends-kpi .meta {
  font-size: 12px;
  color: var(--trends-text-2);
  margin-top: 4px;
}

.trends-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.trends-card {
  background: var(--trends-panel);
  border: 1px solid var(--trends-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.trends-card h2 {
  position: relative;
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trends-text);
  border-bottom: none;
  padding-bottom: 0;
}
.trends-card .desc {
  color: var(--trends-text-3);
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.35;
}
.trends-card .trends-explainer {
  margin: -4px 0 12px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--trends-text-2);
  background: var(--trends-panel-2);
  border-left: 2px solid var(--trends-accent);
  border-radius: 0 6px 6px 0;
}
.trends-card .trends-body { flex: 1; min-height: 0; position: relative; }

/* Chart cards: Chart.js (responsive + maintainAspectRatio:false) needs a
   container with a DEFINITE height. A flex body whose height is indeterminate
   gives it no stable target, so the canvas can collapse or grow without bound
   (the infinite-growth feedback loop). Pin the height for the chart bodies and
   let the canvas fill it absolutely. Table/heatmap bodies are untouched.
   Targeted by an explicit class (.trends-body--chart) so this works in every
   browser; the :has() rule is a redundant fallback. */
.trends-card .trends-body--chart,
.trends-card .trends-body:has(> canvas) {
  flex: none !important;
  height: 280px !important;
  max-height: 280px !important; /* hard cap: can never grow past this */
  overflow: hidden;
}
.trends-card .trends-body--chart > canvas,
.trends-card .trends-body:has(> canvas) > canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: 280px !important;
  display: block;
}
.trends-card.span-12 { grid-column: span 12; }
.trends-card.span-8  { grid-column: span 8; }
.trends-card.span-6  { grid-column: span 6; }
.trends-card.span-4  { grid-column: span 4; }
@media (max-width: 1100px) {
  .trends-card.span-8,
  .trends-card.span-6,
  .trends-card.span-4 { grid-column: span 12; }
}

table.trends-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.trends-standings thead th {
  text-align: left;
  padding: 6px 8px;
  color: var(--trends-text-3);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--trends-line);
  cursor: pointer;
  user-select: none;
}
table.trends-standings thead th.numeric { text-align: right; }
table.trends-standings thead th:hover { color: var(--trends-text); }
table.trends-standings thead th.sorted { color: var(--trends-accent); }
table.trends-standings thead th.sorted::after { content: " ▾"; font-size: 9px; }
table.trends-standings thead th.sorted.asc::after { content: " ▴"; font-size: 9px; }
table.trends-standings tbody tr { border-bottom: 1px solid #18223a; }
table.trends-standings tbody tr:hover { background: var(--trends-panel-2); }
table.trends-standings td { padding: 6px 8px; }
table.trends-standings td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
table.trends-standings .pos { color: var(--trends-good); font-weight: 700; }
table.trends-standings .neg { color: var(--trends-bad); font-weight: 700; }
/* Run-diff diverging bar in the Diff column (audit P4) */
.trends-rd { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.trends-rd-bar { height: 8px; border-radius: 2px; flex: none; }
.trends-rd-bar.pos { background: var(--trends-good); }
.trends-rd-bar.neg { background: var(--trends-bad); }
table.trends-standings .streak-w { color: var(--trends-good); font-weight: 700; }
table.trends-standings .streak-l { color: var(--trends-bad); font-weight: 700; }

.trends-team-cell { display: flex; align-items: center; gap: 8px; }
.trends-swatch { width: 8px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.trends-abbr { font-weight: 700; width: 36px; color: var(--trends-text); font-size: 12px; }
.trends-name { color: var(--trends-text-2); font-size: 11.5px; }

.trends-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trends-lb-row {
  display: grid;
  grid-template-columns: 28px 44px 1fr 88px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.trends-lb-row:hover { background: var(--trends-panel-2); }
.trends-lb-bar {
  height: 16px;
  background: var(--trends-line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.trends-lb-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.trends-lb-rank { color: var(--trends-text-3); font-size: 11px; text-align: right; }
.trends-lb-abbr { font-weight: 700; font-size: 12px; }
.trends-lb-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--trends-text); }

.trends-heatmap { overflow-x: auto; }
.trends-heatmap-table { border-collapse: collapse; font-size: 11px; }
.trends-heatmap-table th {
  font-weight: 600;
  color: var(--trends-text-3);
  padding: 4px 6px;
  text-align: center;
  font-size: 10px;
}
.trends-heatmap-table th.team { text-align: left; padding-left: 8px; }
.trends-heatmap-table td { padding: 0; }
.trends-heatmap-cell {
  width: 30px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin: 1px;
  border-radius: 3px;
}
.trends-heatmap-cell.W { background: var(--trends-good); }
.trends-heatmap-cell.L { background: var(--trends-bad); }
.trends-heatmap-cell.off { background: #1f2a44; color: var(--trends-text-3); }
.trends-heatmap-table td.team { padding: 2px 8px 2px 4px; }
.trends-heatmap-team-cell { display: flex; align-items: center; gap: 6px; }
.trends-heatmap-team-cell .trends-swatch { width: 4px; height: 14px; border-radius: 2px; }
.trends-heatmap-team-cell .trends-abbr { font-weight: 700; font-size: 11px; }

/* Chart.js canvases */
.trends-surface canvas { max-width: 100%; }

/* ====================================================================
   Mobile Trends responsive pass (audit-2026-05-31 Finding 03)
   The standings table carried 12 columns and clipped narrow viewports.
   On mobile it collapses to a glance set (Team / W / L / GB / Last 10)
   with a tap-to-expand toggle; the heatmap gains a scroll affordance.
   ==================================================================== */
.cols-toggle {
  display: none; /* desktop: full table already fits */
  margin: 2px 0 10px;
  padding: 5px 12px;
  background: var(--trends-panel-2);
  color: var(--trends-text);
  border: 1px solid var(--trends-line);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cols-toggle:hover { border-color: var(--trends-accent); color: var(--trends-accent); }
.scroll-hint {
  display: none; /* desktop: full heatmap fits */
  color: var(--trends-text-3);
  font-size: 11px;
  font-style: italic;
  margin: 0 0 6px;
}

@media (max-width: 640px) {
  .cols-toggle { display: inline-block; }
  .scroll-hint { display: block; }

  /* Collapse standings to the four-plus-team glance columns until expanded. */
  table.trends-standings:not(.cols-all) th:not([data-key="team"]):not([data-key="w"]):not([data-key="l"]):not([data-key="gb"]):not([data-key="last10"]),
  table.trends-standings:not(.cols-all) td:not([data-key="team"]):not([data-key="w"]):not([data-key="l"]):not([data-key="gb"]):not([data-key="last10"]) {
    display: none;
  }
  /* Drop the long club name; keep the abbreviation so the row stays scannable. */
  table.trends-standings .trends-name { display: none; }
  /* When expanded, the full table scrolls inside its card instead of clipping. */
  .trends-body--standings { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.trends-standings.cols-all { min-width: 560px; }

  /* Last-10 leaderboard: tighten the fixed columns so the bar never overflows. */
  .trends-lb-row { grid-template-columns: 24px 38px 1fr 76px; gap: 6px; }
}

/* ====================================================================
   Team logos (rev-2) — sourced from https://www.mlbstatic.com/team-logos/
   ==================================================================== */
.logo-img {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  background: transparent;
}

/* Daily tab — standings row + sparkline row + upcoming chip */
.team-cell .logo-img.team-logo-sm {
  width: 24px; height: 24px; margin-right: 2px;
}
.trend-row .logo-img.team-logo-xs {
  width: 20px; height: 20px;
}
.team-cell .logo-img.team-logo-xs {
  width: 18px; height: 18px; margin-right: 2px;
}

/* Trends KPI cards — primary logo with abbr caption */
.trends-kpi-logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
}
.logo-img.trends-kpi-logo {
  width: 32px; height: 32px;
}
.trends-kpi-abbr {
  font-size: 11px;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--trends-text-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Trends standings cell */
.trends-team-cell .logo-img.trends-team-logo {
  width: 24px; height: 24px; flex-shrink: 0;
}

/* Trends leaderboard — restructured into a logo+abbr team div */
.trends-lb-row { grid-template-columns: 28px 84px 1fr 88px; }
.trends-lb-team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.logo-img.trends-lb-logo {
  width: 20px; height: 20px; flex-shrink: 0;
}

/* Home/Road custom logo strip beneath the chart */
.trends-homeroad-logos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  margin-top: 4px;
  padding: 0 6px;
}
.trends-homeroad-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-img.trends-homeroad-logo {
  width: 18px; height: 18px;
}

/* Heatmap row team cell */
.trends-heatmap-team-cell .logo-img.trends-heatmap-logo {
  width: 18px; height: 18px; flex-shrink: 0;
}