/* ─── Reset & Base ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Theme variables ──────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #21262d;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --accent: #e8c84b; /* Jersey gold */
  --winner: #3fb950;
  --declared: #238636;
  --declared-tint: rgba(35, 134, 54, 0.18);
  --neutral-declared-tint: rgba(108, 117, 125, 0.26);
  --senator-pending: rgba(100, 130, 200, 0.15);
  --shadow: rgba(0, 0, 0, 0.5);
  --radius: 8px;
  --font: "Segoe UI", system-ui, sans-serif;
  --blue: #3b82f6;
}

[data-theme="light"] {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface2: #f0f2f5;
  --border: #d0d7de;
  --text: #1f2328;
  --text-muted: #656d76;
  --accent: #8a6700;
  --winner: #1a7f37;
  --declared: #1a7f37;
  --declared-tint: rgba(26, 127, 55, 0.12);
  --neutral-declared-tint: rgba(108, 117, 125, 0.18);
  --senator-pending: rgba(80, 100, 180, 0.12);
  --shadow: rgba(0, 0, 0, 0.12);
  --radius: 8px;
  --font: "Segoe UI", system-ui, sans-serif;
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  min-height: 100vh;
}

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

/* ─── Skip link ────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: #000;
  padding: 0.4rem 0.8rem;
  font-weight: 700;
  font-size: 0.875rem;
  z-index: 500;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  top: 0;
}

/* ─── Focus styles ─────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Header ───────────────────────────────────────────────────────────────── */

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

#declared-count {
  font-weight: 600;
  color: var(--text);
}

#clock {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--accent);
}

.icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  transition: background 0.15s;
}

.icon-btn:hover {
  background: var(--surface2);
}

/* ─── Seats bar ────────────────────────────────────────────────────────────── */

.seats-section {
  padding: 0.6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

#seats-bar {
  display: flex;
  height: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface2);
  margin-bottom: 0.35rem;
}

.seats-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  transition: width 0.4s ease;
  min-width: 0;
  overflow: hidden;
}

.seats-segment span {
  pointer-events: none;
}

.seats-remaining {
  background: var(--surface2);
}

#seats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Main layout ──────────────────────────────────────────────────────────── */

main {
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ─── Map section ──────────────────────────────────────────────────────────── */

.map-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: visible;
  position: relative;
}

/* Layer tabs */
.map-layer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  padding: 0 0.75rem;
  gap: 0.25rem;
}

.layer-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}

.layer-btn:hover {
  color: var(--text);
}

.layer-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Map viewport */
.map-viewport {
  position: relative;
  background: var(--bg);
  overflow: visible;
}

.senator-seats-strip[hidden] {
  display: none !important;
}

.map-layer {
  display: none;
  width: 100%;
}

.map-layer.active {
  display: block;
}

/* SVG fills injected into wrappers */
.map-layer svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: min(46vh, calc(100vh - 19rem));
  max-height: min(46vh, calc(100dvh - 19rem));
}

.map-layer .sea {
  fill: var(--bg);
}

/* Shared map geometry */
.island-base-piece {
  fill: var(--surface2);
  stroke: none;
  pointer-events: none;
}

.parish,
.constituency {
  fill: var(--surface2);
  cursor: pointer;
  transition: fill 0.25s ease;
  stroke: var(--border);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-miterlimit: 4;
}

.parish:hover {
  filter: brightness(1.3);
}

.parish[data-declared="true"] {
  fill: var(--declared-tint);
}

/* Senator-layer parish tints */
.parish[data-senator-state="pending"] {
  fill: var(--senator-pending);
}
.parish[data-senator-state="declared"] {
  fill: var(--neutral-declared-tint);
}

.constituency:hover {
  filter: brightness(1.3);
}

.constituency[data-declared="true"] {
  fill: var(--declared-tint);
}

/* Deputy seat blob circles */
.seat-blob {
  fill: #4a545e;
  stroke: var(--text);
  stroke-width: 4;
  cursor: pointer;
  transition: fill 0.25s ease;
}

.seat-blob:hover {
  opacity: 0.8;
}

/* Senator seats strip */
.senator-seats-strip {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 38%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(22, 27, 34, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px var(--shadow);
  z-index: 20;
  max-width: calc(100% - 2rem);
}

.senator-seat-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.senator-seat-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: background 0.3s;
}

.senator-seat-circle.filled {
  color: #fff;
  border-color: transparent;
}

/* ─── Map popover ──────────────────────────────────────────────────────────── */

.map-popover,
.candidate-detail-popover {
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  width: 300px;
  max-height: 440px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 32px var(--shadow);
}

.candidate-detail-popover {
  width: min(360px, calc(100vw - 24px));
  z-index: 260;
}

.map-popover:not([hidden]),
.candidate-detail-popover:not([hidden]) {
  display: block;
}

.map-popover h3,
.candidate-detail-popover h3 {
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.popover-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  border-radius: 4px;
}

.popover-close:hover {
  background: var(--surface2);
}

.popover-section {
  margin-bottom: 0.75rem;
}

.popover-section strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.popover-section ul {
  list-style: none;
  font-size: 0.85rem;
}

.popover-section li {
  padding: 0.15rem 0;
}

/* ─── Race panels grid ─────────────────────────────────────────────────────── */

.race-panels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .race-panels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1300px) {
  .race-panels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Race panel cards ─────────────────────────────────────────────────────── */

.race-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1rem;
  overflow-y: auto;
  max-height: 70vh;
}

.panel-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.panel-heading[data-layer] {
  cursor: pointer;
}

.panel-heading[data-layer]:hover {
  color: var(--text);
}

.race-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
}

.race-block-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ─── Deputy constituency blocks ───────────────────────────────────────────── */

.constituency-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.65rem;
  overflow: hidden;
}

.race-block-list .constituency-block {
  margin-bottom: 0;
}

.constituency-block.declared {
  border-color: var(--declared);
}

.constituency-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface2);
  font-size: 0.85rem;
}

.con-name {
  font-weight: 600;
  flex: 1;
}

.con-seats {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.constituency-header .header-meta .contest-meta-chip {
  padding: 0.12rem 0.42rem;
  font-size: 0.68rem;
}

.constituency-block > .contest-meta,
.constituency-block > .candidate-list,
.constituency-block > .no-data,
.constituency-block > .race-alert {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.constituency-block > .contest-meta {
  margin-top: 0.6rem;
}

.constituency-block > .candidate-list,
.constituency-block > .no-data,
.constituency-block > .race-alert {
  margin-bottom: 0.7rem;
}

/* ─── Senator panel ────────────────────────────────────────────────────────── */

.parish-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.parish-pip {
  appearance: none;
  border: none;
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  background: var(--surface2);
  border-radius: 4px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.parish-pip.done {
  background: var(--neutral-declared-tint);
  color: var(--text);
}

.parish-progress-label {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ─── Leading block (live top-9 senators) ─────────────────────────────────── */

.leading-block {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}

.leading-block-title {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.leading-block .candidate-list {
  border: none;
  border-radius: 0;
  margin: 0;
}

.senator-breakdown {
  margin-top: 1rem;
}

.senator-breakdown summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.senator-breakdown .race-block-list {
  margin-top: 0.85rem;
}

.contest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.contest-meta.compact {
  margin-top: 0.45rem;
}

.contest-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 0.16rem 0.5rem;
}

/* ─── Vote bar ─────────────────────────────────────────────────────────────── */

.vote-bar {
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}

.vote-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ─── Candidate list ───────────────────────────────────────────────────────── */

.candidate-list {
  list-style: none;
}

.candidate-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem 0.6rem;
  padding: 0.38rem 0.6rem;
  font-size: 0.83rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  border-radius: 6px;
}

.candidate-list li:last-child {
  border-bottom: none;
}

.candidate-list li.winner {
  background: rgba(63, 185, 80, 0.16);
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--winner);
}

.candidate-list li.nota-blocking {
  color: var(--text-muted);
  font-style: italic;
}

.candidate-list li.declared-loser {
  color: var(--text-muted);
  font-style: italic;
}

.candidate-list li.declared-loser .party-tag,
.candidate-list li.declared-loser .incumbent-badge,
.candidate-list li.declared-loser .cand-role-chip {
  font-style: normal;
}

.candidate-list li.nota-row {
  border-top: 1px dashed var(--border);
}

.candidate-list li.vacancy-row {
  background: rgba(232, 200, 75, 0.06);
}

.cand-name {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.24rem;
}

.cand-name-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cand-name-trigger:hover {
  opacity: 0.96;
}

.cand-name-trigger:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.cand-votes {
  font-variant-numeric: tabular-nums;
  min-width: 55px;
  text-align: right;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.candidate-list li.winner .cand-votes {
  color: var(--text);
  font-weight: 700;
}

.candidate-list li.declared-loser .cand-votes {
  color: var(--text-muted);
}

.candidate-list .vote-bar {
  flex-basis: 100%;
  margin-top: 0;
}

/* ─── Badges ───────────────────────────────────────────────────────────────── */

.declared-badge {
  display: inline-block;
  background: var(--declared);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
}

.elected-badge {
  display: inline-block;
  background: var(--winner);
  color: #0d1117;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.nota-badge {
  display: inline-block;
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
}

/* Incumbent badges */
.incumbent-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.1rem;
  vertical-align: middle;
}

.incumbent-badge.same {
  background: var(--accent);
  color: #000;
}

.incumbent-badge.new-role {
  background: var(--blue);
  color: #fff;
}

.cand-role-chip {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.1rem 0.34rem;
  border-radius: 999px;
  border: 1px solid rgba(99, 179, 237, 0.24);
  background: rgba(99, 179, 237, 0.1);
  color: #b8dcff;
}

.candidate-detail-lines {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.candidate-detail-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.candidate-detail-chip.party {
  color: #fff;
}

.candidate-detail-chip.incumbent {
  background: rgba(232, 200, 75, 0.22);
  color: var(--accent);
  border: 1px solid rgba(232, 200, 75, 0.38);
}

.candidate-detail-line {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.candidate-detail-line .label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.candidate-detail-line .value {
  font-size: 0.82rem;
  color: var(--text);
}

.candidate-detail-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 200, 75, 0.36);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.66rem;
  font-weight: 700;
}

.candidate-detail-link:hover,
.candidate-detail-link:focus-visible {
  background: rgba(232, 200, 75, 0.18);
  border-color: rgba(232, 200, 75, 0.6);
  outline: none;
}

.declared-banner {
  background: var(--declared);
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 0.35rem;
  border-radius: 4px;
  margin-bottom: 0.65rem;
  font-size: 0.85rem;
}

.race-alert {
  margin-top: 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(232, 200, 75, 0.35);
  border-radius: 6px;
  color: var(--accent);
  background: rgba(232, 200, 75, 0.08);
  font-size: 0.8rem;
}

.popover-meta {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.timeline-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.timeline-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--radius);
}

.timeline-section-summary::-webkit-details-marker {
  display: none;
}

.timeline-section-summary:hover {
  background: rgba(232, 200, 75, 0.06);
  border-radius: var(--radius);
}

.timeline-section[open] .timeline-section-summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}

.timeline-section-summary .panel-heading {
  margin: 0;
}

.timeline-section-toggle {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform 0.18s;
}

.timeline-section[open] .timeline-section-toggle {
  transform: rotate(180deg);
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem 1rem;
}

.timeline-entry {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.timeline-entry button.timeline-entry-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  border-radius: 8px;
}

.timeline-entry button.timeline-entry-header:hover {
  background: rgba(232, 200, 75, 0.08);
  border-radius: 8px;
}

.timeline-entry-body {
  padding: 0.5rem 0.8rem 0.65rem;
}

.timeline-vote-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.timeline-vote-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.timeline-vote-list li.winner {
  color: var(--text);
  font-weight: 600;
}

.tlv-name {
  flex: 1;
  min-width: 80px;
}

.tlv-votes {
  font-variant-numeric: tabular-nums;
  min-width: 45px;
  text-align: right;
  font-size: 0.75rem;
}

.tlv-bar {
  flex-basis: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
}

.tlv-bar > div {
  height: 100%;
  border-radius: 2px;
}

.timeline-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--accent);
  min-width: 3.1rem;
}

.timeline-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.timeline-title {
  font-size: 0.86rem;
  font-weight: 600;
}

.timeline-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.timeline-toggle-btn {
  margin-top: 0.35rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.38rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  align-self: flex-start;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.timeline-toggle-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.focus-flash {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 18px rgba(232, 200, 75, 0.22);
}

/* ─── Party tag ────────────────────────────────────────────────────────────── */

.party-tag {
  display: inline-block;
  color: #fff;
  font-size: 0.62rem;
  padding: 0.08rem 0.32rem;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 600;
}

/* ─── No-data placeholder ──────────────────────────────────────────────────── */

.no-data {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.5rem 0;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  main {
    padding: 0.75rem;
    gap: 1rem;
  }
  .map-layer svg {
    max-height: 45vh;
  }
  header h1 {
    font-size: 1.05rem;
  }
  .race-panel {
    max-height: none;
  }
  .senator-seats-strip {
    bottom: 0.6rem;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
  }

  .candidate-detail-popover {
    width: calc(100vw - 16px);
  }

  .candidate-detail-line .value {
    font-size: 0.78rem;
  }
}

/* ─── Countdown banner ─────────────────────────────────────────────────────── */

.countdown-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.countdown-banner[hidden] {
  display: none;
}

#countdown-text {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
}

.countdown-demo-link {
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ─── Site footer ──────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ─── Demo banner ──────────────────────────────────────────────────────────── */

.demo-banner {
  background: #7d4a00;
  color: #ffd580;
  font-weight: 700;
  font-size: 0.9375rem;
  text-align: center;
  padding: 0.5rem 1rem;
  letter-spacing: 0.03em;
  width: 100%;
  order: -1;
}

[data-theme="light"] .demo-banner {
  background: #ffe066;
  color: #5a3800;
}