/* Theme tokens also drive the SVG chart, so switching never resets app state. */
:root {
  color-scheme: light;
  --muted: #5b6c7f;
  --surface: #ffffff;
  --control-line: #8091a8;
  --soft: #f3f6fd;
  --tint: #edf2ff;
  --baseline-bg: #eaf0fc;
  --row-warm: #fffbf6;
  --row-selected: #eaf1ff;
  --table-head: #f8fafd;
  --positive: #007365;
  --negative: #5b6c7f;
  --zero-ink: #194cb6;
  --zero-bg: #eaf0ff;
  --pay-ink: #006f62;
  --pay-bg: #e4f5ef;
  --warm-ink: #994100;
  --warm-bg: #fff0e2;
  --neutral-ink: #536273;
  --neutral-bg: #edf1f6;
  --chart-start: #edf3fb;
  --chart-end: #fff7ec;
  --chart-line: #dce4ed;
  --chart-label: #5f7083;
  --plot-label: #25384d;
  --plot-reference: #66778f;
  --plot-zero: #2456d9;
  --plot-pay: #078577;
  --plot-warm: #b86419;
  --plot-cool: #6f8096;
  --button-ink: #ffffff;
  --tooltip-bg: #14263d;
  --tooltip-ink: #ffffff;
  --sun-display: none;
  --moon-display: block;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6edf7;
  --muted: #afbed2;
  --blue: #91b4ff;
  --line: #34465e;
  --bg: #0b1422;
  --orange: #ffb779;
  --teal: #6dd8c5;
  --surface: #142237;
  --control-line: #70839c;
  --soft: #1c304c;
  --tint: #233755;
  --baseline-bg: #1c304c;
  --row-warm: #2b251f;
  --row-selected: #233b60;
  --table-head: #1a2b42;
  --positive: #6dd8c5;
  --negative: #afbed2;
  --zero-ink: #a8c5ff;
  --zero-bg: #203961;
  --pay-ink: #7ce5ce;
  --pay-bg: #123d37;
  --warm-ink: #ffbf8a;
  --warm-bg: #48301f;
  --neutral-ink: #c2cfdf;
  --neutral-bg: #2b3a4e;
  --chart-start: #172b43;
  --chart-end: #33291f;
  --chart-line: #41536a;
  --chart-label: #b8c8dc;
  --plot-label: #e6edf7;
  --plot-reference: #b8c8dc;
  --plot-zero: #91b4ff;
  --plot-pay: #62d6bd;
  --plot-warm: #ffb779;
  --plot-cool: #a2b2c8;
  --button-ink: #0b1422;
  --tooltip-bg: #e6edf7;
  --tooltip-ink: #14263d;
  --sun-display: block;
  --moon-display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --ink: #e6edf7;
  --muted: #afbed2;
  --blue: #91b4ff;
  --line: #34465e;
  --bg: #0b1422;
  --orange: #ffb779;
  --teal: #6dd8c5;
  --surface: #142237;
  --control-line: #70839c;
  --soft: #1c304c;
  --tint: #233755;
  --baseline-bg: #1c304c;
  --row-warm: #2b251f;
  --row-selected: #233b60;
  --table-head: #1a2b42;
  --positive: #6dd8c5;
  --negative: #afbed2;
  --zero-ink: #a8c5ff;
  --zero-bg: #203961;
  --pay-ink: #7ce5ce;
  --pay-bg: #123d37;
  --warm-ink: #ffbf8a;
  --warm-bg: #48301f;
  --neutral-ink: #c2cfdf;
  --neutral-bg: #2b3a4e;
  --chart-start: #172b43;
  --chart-end: #33291f;
  --chart-line: #41536a;
  --chart-label: #b8c8dc;
  --plot-label: #e6edf7;
  --plot-reference: #b8c8dc;
  --plot-zero: #91b4ff;
  --plot-pay: #62d6bd;
  --plot-warm: #ffb779;
  --plot-cool: #a2b2c8;
  --button-ink: #0b1422;
  --tooltip-bg: #e6edf7;
  --tooltip-ink: #14263d;
  --sun-display: block;
  --moon-display: none;
  }
}

header, .filters, .panel, details, .state-card, .disclaimer { background: var(--surface); }
.more-filters, .career-notes { background: transparent; }
.edition span { background: var(--tint); }
.brandmark { color: var(--surface); }
.stat { background: var(--surface); }
.stat:first-child { background: #14263d; color: #ffffff; border-color: var(--line); }
.stat:first-child span, .stat:first-child small { color: #becce0; }
.filters select, .filters input[type=search], .chart-picker select, .mobile-sort select,
.temperature-control button, .card-details {
  background: var(--surface);
  border-color: var(--control-line);
}
input::placeholder { color: var(--muted); opacity: 1; }
.temperature-control button[aria-pressed="true"], .results-link {
  background: var(--blue); color: var(--button-ink); border-color: var(--blue);
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 4px;
}
.statecode { background: var(--soft); border-color: var(--control-line); }
.badge.zero { color: var(--zero-ink); background: var(--zero-bg); }
.badge.pay { color: var(--pay-ink); background: var(--pay-bg); }
.badge.warm { color: var(--warm-ink); background: var(--warm-bg); }
.badge.neutral { color: var(--neutral-ink); background: var(--neutral-bg); }
thead { background: var(--table-head); }
th button { color: var(--muted); }
td { border-bottom-color: var(--line); }
tr.warmer, .state-card.warmer { background: var(--row-warm); }
tr.warmer td:first-child { box-shadow: inset 3px 0 0 var(--plot-warm); }
.state-card.warmer { border-left-color: var(--plot-warm); }
tr.selected, .state-card.selected { background: var(--row-selected); }
tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.chart-label { fill: var(--chart-label); }
.gridline { stroke: var(--chart-line); }
.plotpoint circle { stroke: var(--surface); }
.plotpoint:hover circle, .plotpoint:focus circle, .plotpoint.selected circle { stroke: var(--ink); }
.plotpoint text { fill: var(--plot-label); stroke: var(--surface); }
.swatch-zero { background: var(--plot-zero); }
.swatch-pay { background: var(--plot-pay); }
.swatch-warm { background: var(--plot-warm); }
.swatch-cool { background: var(--plot-cool); }
.tooltip { background: var(--tooltip-bg); color: var(--tooltip-ink); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions > a { min-height: 44px; display: flex; align-items: center; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 8px 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--control-line);
  border-radius: 8px; font-size: .875rem; font-weight: 600;
}
.theme-toggle:hover { background: var(--soft); }
.theme-toggle .i-sun { display: var(--sun-display); }
.theme-toggle .i-moon { display: var(--moon-display); }
.no-js .theme-toggle { display: none; }
@media (max-width: 760px) {
  .baseline { background: var(--baseline-bg); }
  .header-actions { gap: 12px; }
  .header-actions > a { max-width: 135px; font-size: .875rem; }
}
@media (max-width: 480px) {
  .header-actions { width: 100%; justify-content: space-between; }
  .header-actions > a { max-width: none; }
}