:root {
  --navy: #0b1f3a;
  --navy-light: #14315c;
  --red: #b3202f;
  --red-light: #d9414f;
  --blue: #2a5db0;
  --blue-light: #4a7cd0;
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1a1f2b;
  --muted: #6b7280;
  --border: #e2e5ea;
  --good: #1c8a4b;
  --radius: 12px;
}

* {
  box-sizing: border-box;
  /* Kill the default mobile-browser tap-highlight flash -- every
     interactive element here already has its own click feedback (map
     states transition their fill, buttons have :hover/:active states),
     so the overlay is redundant and looks like a stray blue flash. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* Backstop against any element overflowing its container -- the page
     itself should never scroll sideways. */
  overflow-x: hidden;
}

.topbar {
  background: var(--navy);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.topbar h1 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.topbar-back {
  color: inherit;
  text-decoration: none;
}

.topbar-back:hover {
  text-decoration: underline;
}

.menu-link {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.menu-link:hover {
  text-decoration: underline;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 8px;
  min-width: 0;
}

.score-pill {
  background: rgba(255,255,255,0.12);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.menu-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-btn:hover {
  background: rgba(255,255,255,0.22);
}

/* A collapsible band under the header (same visual language as .dev-bar
   below it), rather than a floating dropdown -- toggled by #menuBtn,
   houses whatever used to compete for space in the topbar itself (sign-in,
   the past-day archive picker). The [hidden] override is needed for the
   same reason noted on the mobile media query at the end of this file:
   an equal-specificity author rule placed after `[hidden]` in source order
   would otherwise win the cascade and defeat the attribute. */
.menu-panel {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  row-gap: 12px;
}

.menu-panel[hidden] {
  display: none;
}

.auth-area {
  display: flex;
  align-items: center;
  min-width: 0;
}

.auth-form {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.auth-form input[type="email"] {
  width: 200px;
  max-width: 50vw;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
}

.auth-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.auth-btn:hover {
  background: var(--navy-light);
}

.auth-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-status {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.auth-signed-in {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.auth-signed-in .email {
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-bar {
  background: #fff3cd;
  border-bottom: 1px solid #f0d999;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #6b5900;
}

.dev-bar label {
  font-weight: 600;
}

.dev-bar select {
  font-size: 0.82rem;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid #d9c26a;
  background: #fff;
  color: var(--text);
}

.archive-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.archive-bar label {
  font-weight: 600;
}

.archive-bar input[type="date"] {
  font-size: 0.82rem;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}

.archive-bar #archiveStatus {
  font-size: 0.78rem;
  color: var(--muted);
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.practice-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.practice-category-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font: inherit;
}

.practice-category-btn:hover {
  background: var(--bg);
  border-color: var(--muted);
}

.practice-category-btn .badge {
  flex-shrink: 0;
}

.practice-category-desc {
  color: var(--muted);
  font-size: 0.85rem;
}

.archive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.archive-row:hover {
  background: var(--bg);
}

.archive-row-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.archive-row-date {
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
}

.archive-row-year {
  color: var(--text);
  font-weight: 600;
}

.archive-row-arrow {
  color: var(--muted);
}

.archive-row-score {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.archive-more-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.dev-preview-banner {
  background: #fff3cd;
  border: 1px solid #f0d999;
  color: #6b5900;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
}

.dev-preview-banner a {
  color: inherit;
  text-decoration: underline;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 5px 18px 60px;
}

.site-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 18px 28px;
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 0.82rem;
}

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

.site-footer a:hover {
  text-decoration: underline;
}

.legal-card h3 {
  color: var(--navy);
  margin-bottom: 4px;
}

.legal-card p {
  color: var(--muted);
  line-height: 1.6;
  margin-top: 0;
}

.legal-card code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

.intro {
  color: var(--muted);
  line-height: 1.5;
}

/* Round screen */
.round-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}

.round-card h2 {
  margin-top: 0;
  color: var(--navy);
}

.detailed-results {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.detailed-results-heading {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.guess-block {
  margin-bottom: 26px;
}

.guess-block:last-child { margin-bottom: 0; }

.guess-block h3 {
  margin-bottom: 4px;
  font-size: 1rem;
}

.guess-block .desc {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.race-info {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.race-info .desc {
  margin-bottom: 0;
}

.race-info-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.race-info .candidate-row {
  margin: 0;
  gap: 12px;
}

.candidate.small img,
.candidate.small .candidate-noimg {
  width: 44px;
  height: 44px;
}

.candidate-noimg {
  border-radius: 50%;
  background: #c7cbd4;
  border: 3px solid var(--border);
}

.candidate.small.r .candidate-noimg { border-color: var(--red); }
.candidate.small.d .candidate-noimg { border-color: var(--blue); }

.candidate.small span {
  font-size: 0.72rem;
}

.race-result-stat {
  font-weight: 400 !important;
  color: var(--muted) !important;
  font-size: 0.68rem !important;
}

.third-party-note {
  font-style: italic;
  color: #8a6d1f;
  background: #fff8e6;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: -4px;
}

.candidate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  row-gap: 14px;
  margin: 10px 0 14px;
}

.candidate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.candidate:hover {
  background: #f1f3f6;
}

.candidate img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
  border: 3px solid var(--border);
}

.candidate.r img { border-color: var(--red); }
.candidate.d img { border-color: var(--blue); }
.candidate.other img { border-color: var(--other-color, #6b4fbb); }

.candidate.active.r { box-shadow: 0 0 0 2px var(--red); }
.candidate.active.d { box-shadow: 0 0 0 2px var(--blue); }
.candidate.active.other { box-shadow: 0 0 0 2px var(--other-color, #6b4fbb); }

.candidate span {
  font-size: 0.8rem;
  font-weight: 700;
}

.candidate.r span { color: var(--red); }
.candidate.d span { color: var(--blue); }
.candidate.other span { color: var(--other-color, #6b4fbb); }

.candidate-vs {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Ballot measures: a plain YES/NO choice instead of a candidate photo,
   dropped into the same .candidate/.candidate.other shell (padding, hover,
   active ring) so it only needs its own circle in place of <img>. */
.ballot-choice-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--other-color, #6b4fbb);
}

.map-tally {
  margin: 14px 0 10px;
}

.map-tally-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

.map-tally-r {
  background: var(--red);
  width: 0%;
  transition: width 0.15s ease;
}

.map-tally-other {
  background: #6b4fbb;
  width: 0%;
}

.map-tally-d {
  background: var(--blue);
  width: 0%;
  margin-left: auto;
  transition: width 0.15s ease;
}

.map-tally-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 6px;
}

.map-tally-labels .r { color: var(--red); }
.map-tally-labels .d { color: var(--blue); }
.map-tally-labels .remaining {
  color: var(--muted);
  font-weight: 600;
}
.map-tally-labels .tally-other-label {
  font-weight: 700;
}

.map-container {
  max-width: 560px;
  margin: 6px auto 4px;
  position: relative;
  touch-action: none;
}

.map-container.dragging {
  cursor: grabbing;
}

.map-zoom-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.map-zoom-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.map-zoom-btn:hover {
  background: #f1f3f6;
}

.map-zoom-btn.map-zoom-dc {
  width: auto;
  height: 28px;
  padding: 0 8px;
  font-size: 0.62rem;
  font-weight: 700;
}

.map-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0, 0);
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 5;
}

.map-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.map-loading {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 40px 0;
}

.btn.map-reset {
  display: block;
  margin: 4px 0 18px;
  padding: 4px 12px;
  font-size: 0.72rem;
}

.answer-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px auto 18px;
}

.answer-editor .btn {
  padding: 6px 16px;
  font-size: 0.82rem;
}

.answer-editor [id^="editAnswerBtn-"],
.answer-editor [id^="saveAnswerBtn-"],
.answer-editor [id^="cancelAnswerBtn-"] {
  border-color: #d9c26a;
  color: #6b5900;
}

.answer-editor [id^="answerEditStatus-"] {
  color: #6b5900;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 4px 0 2px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #9aa3b0;
  border: 2px solid;
}

.map-legend-swatch.wrong {
  border-color: #e0a100;
  opacity: 0.35;
}

.map-legend-swatch.split {
  background: repeating-linear-gradient(45deg, #d5ddf4, #d5ddf4 2px, var(--blue) 2px, var(--blue) 3px);
  border-color: var(--border);
}

.map-accuracy {
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  margin-top: 8px;
}

.btn:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}


.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-track-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.slider-track-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-other-block {
  flex-shrink: 0;
  height: 10px;
  min-width: 20px;
  border-radius: 999px;
  background: repeating-linear-gradient(45deg, var(--muted), var(--muted) 4px, #9199a6 4px, #9199a6 8px);
  border: 1px solid #4b5563;
  cursor: default;
}

input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(90deg, var(--red-light), var(--blue-light));
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
  cursor: pointer;
}

.slider-readout {
  min-width: 150px;
  text-align: right;
  font-weight: 600;
  font-size: 0.9rem;
}

.slider-readout .r { color: var(--red); }
.slider-readout .d { color: var(--blue); }

.slider-labels-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}

.scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted);
}

.scale-label-other {
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: default;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--navy);
  color: #fff;
}

/* `.btn`'s own `display` is an author-stylesheet rule, so at equal
   specificity it beats the `[hidden]` attribute's user-agent default
   regardless of source order -- author styles always win over UA styles.
   Every `.btn` this app toggles via the `hidden` property (answer-key
   editor Save/Cancel, the archive page's "Show more days") needs this
   explicit override or it stays visibly rendered while "hidden". */
.btn[hidden] {
  display: none;
}

.btn:hover { background: var(--navy-light); }

.btn.secondary {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}

.btn.secondary:hover { background: #eef1f6; }

.actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hint-penalty-total {
  font-size: 0.82rem;
  font-weight: 700;
  color: #b3202f;
}

.hints-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hint-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.hint-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  font-size: 0.82rem;
}

.hint-btn:disabled {
  opacity: 0.6;
  cursor: default;
  border-color: var(--border);
  color: var(--muted);
}

.hint-text {
  flex: 1;
  background: #f4f1fb;
  border-left: 3px solid #6b4fbb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
}

/* Results */
.result-block {
  border-top: 1px dashed var(--border);
  margin-top: 20px;
  padding-top: 18px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.result-row:last-child { border-bottom: none; }

.result-row .label { color: var(--muted); font-size: 0.85rem; }
.result-row .value { font-weight: 700; }
.result-row .points { font-size: 0.85rem; color: var(--good); font-weight: 600; margin-left: 8px; }
.result-row .value .desc { font-weight: 400; color: var(--muted); font-size: 0.85rem; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.badge.R { background: var(--red); }
.badge.D { background: var(--blue); }

.badge.category-presidential { background: var(--navy); }
.badge.category-midterm { background: #5b6b82; }
.badge.category-primary { background: #6b4fbb; }
.badge.category-governor { background: #0c8599; }
.badge.category-ballot { background: #b3760f; }

.history-row .label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-date {
  color: var(--muted);
  font-size: 0.82rem;
}

.history-year {
  color: var(--text);
  font-weight: 600;
}

.round-total {
  margin-top: 16px;
  text-align: right;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
}

.next-puzzle-countdown {
  color: var(--muted);
  font-size: 0.95rem;
}

.countdown-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--navy);
}

.next-puzzle-countdown-inline {
  white-space: nowrap;
}

.share-row {
  margin-top: 10px;
  text-align: right;
}

.share-btn {
  padding: 7px 16px;
  font-size: 0.85rem;
}

.share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.share-overlay.open {
  opacity: 1;
}

.share-card {
  background: var(--card);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  padding: 22px 26px 26px;
  width: min(420px, 92vw);
  margin-top: 0;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  position: relative;
}

.share-overlay.open .share-card {
  transform: translateY(0);
}

.share-card h3 {
  margin: 0 0 14px;
  color: var(--navy);
}

.share-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.share-close:hover {
  color: var(--navy);
}

.share-text {
  background: #f4f6f9;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 14px;
}

.share-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-copied {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f8a72;
}

.factoid {
  margin-top: 18px;
  background: #eef3fb;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}

.factoid-label {
  font-weight: 800;
  color: var(--navy);
  margin-right: 4px;
}

/* Kept at the end of the file on purpose: a media-query rule needs to come
   AFTER the base rule it overrides to win the cascade at equal specificity
   -- every selector touched here (.topbar, .score-pill, etc.) is defined
   earlier in this file, so this block must stay last or its overrides go
   silently unused regardless of viewport width. */
@media (max-width: 480px) {
  .topbar {
    padding: 10px 14px;
    gap: 6px;
    row-gap: 6px;
  }
  .topbar h1 {
    font-size: 1rem;
  }
  .pills {
    gap: 5px;
    row-gap: 5px;
  }
  .score-pill {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  .menu-panel {
    padding: 12px 14px;
    gap: 12px;
  }
  .auth-form input[type="email"] {
    width: 140px;
    max-width: 55vw;
  }

  /* House/Senate seat sliders: the readout ("R 218 - D 216") used to sit
     beside the track with a 150px min-width, leaving so little room for
     the track that its Republicans/Democrats end-labels (or, in some
     historical years, longer party names like "National Republicans")
     would visually run into each other. Stack the readout below instead,
     so the track always gets the row's full width to lay its labels out
     in, regardless of how long those party names are. */
  .slider-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .slider-readout {
    min-width: 0;
    text-align: left;
  }
  .scale-labels {
    font-size: 0.68rem;
  }
}