:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --hairline: rgba(0, 0, 0, 0.08);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.2);
  --glass: rgba(255, 255, 255, 0.8);
  --link: #0066cc;
  --live: #34c759;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.07);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12);
  /* Map colours. JS reads these, so they must stay hex where marked. */
  --map-bg: #ffffff;
  --map-neutral: #ebe8e3; /* hex */
  --map-empty: #e8e8ed;
  --map-line: #ffffff;
  --silence: #ff9f0a;
  --map-dot-empty: #c7c7cc;
  --map-gap: 2.4; /* px between districts */
  --map-hair: 0.8; /* px between precincts */
  --map-lift: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.07));
  --turnout: #0f766e; /* hex */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --ink: #f5f5f7;
    --muted: #98989d;
    --hairline: rgba(255, 255, 255, 0.1);
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.36);
    --glass: rgba(36, 36, 38, 0.8);
    --link: #2997ff;
    --live: #30d158;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.45);
    --map-bg: #1c1c1e;
    --map-neutral: #5b5b60;
    --map-empty: #2c2c2e;
    --map-line: #1c1c1e;
    --silence: #ffb340;
    --map-dot-empty: #636366;
    --map-gap: 1.6;
    --map-hair: 0.5;
    --map-lift: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
    --turnout: #2fb3a3;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--link) 45%, transparent);
  outline-offset: 2px;
}

.app {
  display: flex;
  gap: 16px;
  height: 100%;
  height: 100dvh;
  padding: 16px;
}

/* The map, with the race to 50% under it. */
.main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
}

.main > .stage { flex: 1 1 auto; height: auto; min-height: 0; }

.main > .race { flex: none; }

/* ---------- Ticker (finished count) ---------- */

.ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: stretch;
  height: 36px;
  background: #1d1d1f;
  color: #fff;
  overflow: hidden;
}

.ticker[hidden] { display: none; }

.ticker-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0;
  padding: 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
}

.ticker-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff453a;
}

.ticker-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ticker-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 18px), transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-run linear infinite;
  animation-duration: var(--ticker-time, 28s);
}

.ticker-track span {
  flex: none;
  padding-right: 3rem;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

@keyframes ticker-run {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--shift, 50%) * -1)); }
}

html.has-ticker,
html.has-ticker body {
  height: 100dvh;
  overflow: hidden;
}

html.has-ticker body { padding-top: 36px; }

html.has-ticker .app { height: 100%; }

/* ---------- Panel ---------- */

.panel {
  position: relative;
  z-index: 1;
  flex: 0 0 min(360px, calc(100% - 320px));
  width: min(360px, calc(100% - 320px));
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 22px 12px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: flex-basis 0.5s cubic-bezier(0.32, 0.72, 0, 1), width 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.panel.is-place {
  flex-basis: min(max(360px, calc(220px + var(--place-cols, 1) * 128px)), calc(100% - 280px));
  width: min(max(360px, calc(220px + var(--place-cols, 1) * 128px)), calc(100% - 280px));
}

.sheet-handle { display: none; }

.mast {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 18px;
}

.kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

h1 {
  margin: 2px 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fill-strong);
}

.status.is-flowing { width: 100%; color: var(--ink); }

html.has-ticker .status { color: var(--ink); }

html.has-ticker .status::before { background: var(--live); }

.status.is-flowing::before {
  background: var(--live);
  animation: status-live 2s ease-out infinite;
}

#status-meta {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.status-meter {
  flex: 1 0 100%;
  height: 4px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
}

.status-meter::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--share, 0) * 1%);
  border-radius: inherit;
  background: var(--live);
  transition: width 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes status-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 50%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.sample {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff4d6;
  color: #7a5200;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

#city-view,
#place-view {
  flex: 1 1 auto;
  min-height: 0;
  /* A little room inside the scroll area, so focus rings on buttons are not cut off. */
  margin: 0 -5px;
  padding: 0 5px 5px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#city-view::-webkit-scrollbar,
#place-view::-webkit-scrollbar { display: none; }

#city-view[hidden],
#place-view[hidden] { display: none; }

/* ---------- Winner decided before the full count ---------- */

.decided {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--c) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  animation: decided-in 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.decided[hidden] { display: none; }

.decided-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}

.decided-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.decided-copy small {
  color: var(--c);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.decided-copy strong {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.decided-copy span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

@keyframes decided-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---------- Countdown to election day ---------- */

.countdown {
  margin: 0 0 18px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--fill);
}

.countdown[hidden] { display: none; }

.countdown p { margin: 0; }

.countdown-title {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.countdown-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 10px;
}

.countdown-tiles.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.countdown-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 6px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.countdown-tile b {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.countdown-tile small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.countdown-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.countdown-note span { min-width: 0; }

.countdown-note b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.countdown-note i {
  align-self: flex-start;
  margin-top: 0.3em;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--silence);
}

.countdown-note.is-silence { color: var(--ink); font-weight: 500; }

.countdown-note.is-silence i { animation: silence-pulse 2s ease-out infinite; }

@keyframes silence-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--silence) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Head to head ---------- */

.duel { margin: 0 0 20px; }

.duel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.duel-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.duel-side.is-right { align-items: flex-end; text-align: right; }

.duel-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.duel-name::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}

.duel-side.is-right .duel-name { flex-direction: row-reverse; }

.duel-pct {
  margin-top: 2px;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.duel-votes {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.duel-lead {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.duel-lead b { font-weight: 700; }

.split {
  position: relative;
  display: flex;
  height: 6px;
  margin-top: 10px;
  border-radius: 99px;
  background: var(--fill);
}

.split span {
  display: block;
  height: 100%;
  min-width: 0;
}

.split span:first-child { border-radius: 99px 0 0 99px; transition: width 0.7s cubic-bezier(0.32, 0.72, 0, 1); }

.split span:nth-child(2) { flex: 1; border-radius: 0 99px 99px 0; }

.split i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
  opacity: 0.55;
}

.split.is-large { height: 12px; margin-top: 14px; }

.split.is-empty span { background: var(--fill) !important; }

/* ---------- Totals ---------- */

.totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.totals div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.totals span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.totals strong {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.totals strong b { font-weight: inherit; }

.totals strong em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.8em;
  font-weight: 500;
}

/* The status line in the header already shows progress; this row stays for screen readers only. */
.count-line {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.progress-track {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--ink);
  transition: width 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Search ---------- */

.search { display: block; }

.search span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.search input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.search input::placeholder { color: var(--muted); }

/* The ring is drawn inside the field, so the scrolling panel never clips it. */
.search input:focus,
.search input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--link) 70%, transparent);
  background: var(--surface);
}

.hits {
  list-style: none;
  margin: 8px 0 0;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.hits button {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.hits button:hover,
.hits button:focus-visible { background: var(--fill); outline: 0; }

.hits strong { font-weight: 600; }

.hits small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.8rem;
}

.rule, .sources {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.sources { margin-top: 4px; }

/* ---------- Colophon ---------- */

.colophon {
  flex: none;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.colophon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin: 0 auto;
  padding: 4px 6px;
  border-radius: 12px;
  text-decoration: none;
}

.colophon-link:hover { background: var(--fill); }

.colophon-link:focus-visible { outline-offset: 0; }

.colophon-logo {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
}

@media (prefers-color-scheme: dark) {
  .colophon-logo { filter: invert(1); }
}

/* ---------- Station and district sheets ---------- */

.place-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Stay inside the scroll area (5px of room each side), or the panel
     clips the round close button. The back chevron still lines up with
     the text below. */
  margin: 0 0 10px -5px;
}

.place-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--link);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.place-back:hover { background: var(--fill); }

.popup-place {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  margin: 0 0 18px;
}

.popup-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

#place-view h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

#place-view .place {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

#place-view .totals { margin-bottom: 18px; }

.popup-blocks {
  min-width: 0;
  overflow-x: auto;
}

.result-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.result-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.result-table th,
.result-table td {
  padding: 8px 12px;
  font-size: 0.95rem;
  text-align: right;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.result-table thead th {
  padding: 0 12px 10px;
  text-align: center;
  vertical-align: bottom;
  border-bottom: 0;
}

.result-table .is-break th,
.result-table .is-break td { padding-bottom: 12px; }

.result-table .is-empty { color: var(--muted); font-weight: 400; }

.result-table tbody th,
.result-table .result-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 9rem;
  background: var(--surface);
  text-align: left;
  font-weight: 600;
}

.result-table .is-stat th,
.result-table .is-stat td {
  padding-top: 5px;
  padding-bottom: 5px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.result-table .is-candidate {
  padding-left: 12px;
  box-shadow: inset 3px 0 0 var(--c);
}

.result-table .is-total { background: color-mix(in srgb, var(--fill) 45%, transparent); }

.result-table .who {
  display: flex;
  align-items: center;
  gap: 6px;
}

.result-table .nums {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.result-table .nums em {
  min-width: 3.4em;
  color: var(--muted);
  font-style: normal;
}

.result-table .meter {
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
}

.result-table .meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.result-table .is-ahead .nums strong { font-weight: 700; }

.nr-label {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.nr {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.nr-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

/* ---------- Map stage ---------- */

.stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  background: var(--map-bg);
  box-shadow: var(--shadow);
}

#map {
  position: absolute;
  inset: 0;
  background: var(--map-bg);
}

.leaflet-container {
  font-family: var(--font);
  background: var(--map-bg);
}

.leaflet-gl-layer {
  z-index: 1;
  transition: opacity 0.35s ease;
}

.leaflet-overlay-pane { transition: opacity 0.35s ease; }

/* The selected precinct or district gets a halo in the page colour. */
.leaflet-overlay-pane path.is-selected {
  filter: drop-shadow(0 0 1.5px var(--map-bg)) drop-shadow(0 0 1px var(--map-bg));
}

/* The city rests on the page with a soft shadow instead of a dark outline. */
.leaflet-overlay-pane svg { filter: var(--map-lift); }

@media (prefers-color-scheme: dark) {
  .leaflet-gl-layer { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9); }
}

.leaflet-overlay-pane svg path {
  transition: fill 0.25s ease, stroke 0.15s ease, stroke-width 0.15s ease, fill-opacity 0.25s ease;
  cursor: pointer;
}

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.map-tools {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100% - 32px);
  pointer-events: none;
}

.map-tools > * { pointer-events: auto; }

.map-switch {
  display: flex;
  padding: 3px;
  border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-float);
}

.map-switch button {
  min-height: 32px;
  padding: 6px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.map-switch button:hover { color: var(--ink); }

.map-switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

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

.district-menu {
  width: min(280px, 72vw);
  max-height: min(360px, 46vh);
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-float);
  scrollbar-width: none;
}

.district-menu::-webkit-scrollbar { display: none; }

@media (min-width: 861px) and (max-width: 1200px) {
  .district-menu { width: 220px; }

  .district-menu button span { width: 2rem; }
}

.district-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.district-menu button:hover { background: var(--fill); }

.district-menu button[aria-pressed="true"] { background: var(--fill-strong); }

.district-menu button span {
  width: 2.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.district-menu button strong {
  flex: 1;
  font-weight: 500;
}

.district-menu button i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* ---------- Race to 50% ---------- */

.race {
  padding: 14px 22px 12px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.race-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
}

.race-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.race-side.is-right { align-items: flex-end; text-align: right; }

.race-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.race-name::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}

.race-side.is-right .race-name { flex-direction: row-reverse; }

.race-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.race-side.is-right .race-figure { flex-direction: row-reverse; }

.race-figure strong {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.race-figure span {
  color: var(--muted);
  font-size: 0.78rem;
}

.race-side.is-winner .race-figure strong { color: var(--c); }

.race-middle {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  white-space: nowrap;
}

.race-middle b { color: var(--ink); font-weight: 700; }

.race-bars {
  position: relative;
  margin: 10px 0 8px;
}

.race-track {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  /* Hatched grey: the part of the vote that is not counted yet. */
  background:
    repeating-linear-gradient(135deg, var(--fill) 0 5px, transparent 5px 10px),
    color-mix(in srgb, var(--fill) 45%, transparent);
}

/* Widths are animated from JS together with the numbers (animateRace). */
.race-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--c);
}

.race-bar.is-left { left: 0; border-radius: 7px 0 0 7px; }

.race-bar.is-right { right: 0; border-radius: 0 7px 7px 0; }

/* One finish line for both bars, so the 50% mark is a single axis. */
.race-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 1.5px;
  margin-left: -0.75px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  pointer-events: none;
}

.race.is-crossed .race-line {
  background: var(--win);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--win) 22%, transparent);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* First round, thinner and quieter, under the same 50% axis. */
.race-past { margin: 2px 0 14px; }

.race-past-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 6px 0 0;
}

.race-past-tag {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.race-past-num {
  color: var(--c);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.race-track.is-past {
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--fill);
}

.race-track.is-past .race-bar { opacity: 0.5; }

.race-track.is-past .race-bar.is-left { border-radius: 3px 0 0 3px; }

.race-track.is-past .race-bar.is-right { border-radius: 0 3px 3px 0; }

.race-foot {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Legend ---------- */

.map-legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 600;
  width: 272px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-float);
  font-size: 0.75rem;
}

.legend-heads,
.legend-scale {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.legend-heads span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
}

.legend-heads span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.legend-heads span:last-child { flex-direction: row-reverse; }

.legend-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.legend-ramp {
  display: flex;
  gap: 2px;
  margin: 8px 0 5px;
}

.legend-ramp i {
  flex: 1;
  height: 10px;
}

.legend-ramp i:first-child { border-radius: 5px 0 0 5px; }

.legend-ramp i:last-child { border-radius: 0 5px 5px 0; }

.legend-ramp.is-split i:nth-child(6) { margin-left: 3px; }

.legend-scale {
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.legend-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
}

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

.legend-note i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend-note i.is-dot {
  width: 8px;
  height: 8px;
  margin: 0 1px;
  border-radius: 50%;
  background: var(--muted);
}

/* ---------- Hover card ---------- */

.hover-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 650;
  width: 240px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-float);
  pointer-events: none;
  will-change: transform;
}

.hover-card[hidden] { display: none; }

.hover-card.is-pinned { pointer-events: auto; }

.hover-card p { margin: 0; }

.card-kicker {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.card-place {
  margin-top: 2px !important;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
}

.card-address {
  color: var(--muted);
  font-size: 0.8rem;
}

.card-wait {
  margin-top: 10px !important;
  color: var(--muted);
  font-size: 0.85rem;
}

.card-duel {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.card-duel span {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.card-duel span:last-child { align-items: flex-end; }

.card-duel b {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.hover-card .split { margin-top: 6px; }

.card-meta {
  margin-top: 8px !important;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.card-open {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- PKW progress card (top right of the map) ---------- */

.pkw-chip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 240px;
  max-width: calc(100% - 32px);
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  pointer-events: none;
}

.pkw-mark {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--muted);
}

.pkw-chip[data-state="awaiting"] .pkw-mark,
.pkw-chip[data-state="sample"] .pkw-mark { animation: pkw-wait 2s ease-out infinite; }

.pkw-chip[data-state="partial"] .pkw-mark {
  background: var(--live);
  animation: pkw-live 2s ease-out infinite;
}

.pkw-chip[data-state="full"] .pkw-mark { background: var(--ink); }

.pkw-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.pkw-copy strong {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

#pkw-detail {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

#pkw-detail b {
  color: var(--ink);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pkw-track {
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
}

.pkw-track span {
  display: block;
  height: 100%;
  width: calc(var(--share, 0) * 1%);
  border-radius: inherit;
  background: var(--live);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.pkw-chip[data-state="full"] .pkw-track span { background: var(--ink); }

.pkw-chip[data-state="awaiting"] .pkw-track span,
.pkw-chip[data-state="sample"] .pkw-track span {
  width: 28%;
  background: var(--fill-strong);
  animation: pkw-glide 2.2s ease-in-out infinite;
}

@keyframes pkw-wait {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--muted) 45%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pkw-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 50%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pkw-glide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(380%); }
}

/* ---------- Winner card ---------- */

/* The race under the map now names the winner, so this card stays hidden;
   renderRunoff still drives the ticker and the confetti. */
.runoff { display: none !important; }

.runoff {
  position: absolute;
  z-index: 500;
  top: 16px;
  right: 16px;
  width: min(400px, calc(100% - 340px));
  min-width: 300px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  animation: runoff-in 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.runoff[hidden] { display: none; }

.runoff-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.runoff h2 {
  margin: 2px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.runoff-when {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.runoff-places {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.runoff-place {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
}

.runoff-mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.runoff-copy { min-width: 0; }

.runoff-copy strong {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runoff-copy span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.runoff-bar {
  grid-column: 2;
  height: 4px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
}

.runoff-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

@keyframes runoff-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Leaflet controls ---------- */

.leaflet-bar {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--shadow-float) !important;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  display: grid !important;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  border-bottom: 1px solid var(--hairline) !important;
  background: var(--glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--ink) !important;
  font: 400 20px/36px var(--font) !important;
}

.leaflet-bar a:last-child { border-bottom: 0 !important; }

.leaflet-bar a:hover { background: var(--surface) !important; }

.leaflet-bottom.leaflet-right .leaflet-control { margin-right: 16px; }

.leaflet-bottom .leaflet-control-zoom { margin-bottom: 8px; }

.reset-control { margin-bottom: 36px !important; }

.leaflet-control-attribution {
  margin: 0 !important;
  padding: 2px 8px !important;
  border-radius: 8px 0 0 0;
  background: var(--glass) !important;
  color: var(--muted) !important;
  font-size: 10px;
}

.leaflet-control-attribution a { color: var(--muted) !important; }

.leaflet-bottom.leaflet-right .leaflet-control-attribution { margin-right: 0 !important; }

/* ---------- Confetti ---------- */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 800;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -16px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -8px, 0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 108vh, 0) rotate(var(--spin)); }
}

@media (prefers-reduced-motion: reduce) {
  .runoff,
  .ticker-track,
  .status.is-flowing::before,
  .pkw-chip .pkw-mark,
  .pkw-chip .pkw-track span { animation: none; transition: none; }
  .confetti-piece { display: none; }
  .decided { animation: none; }
  .countdown-note.is-silence i { animation: none; }
  .panel,
  .split span,
  .progress-track span,
  .status-meter::before,
  .leaflet-gl-layer,
  .leaflet-overlay-pane,
  .leaflet-overlay-pane svg path,
  .race-bar { transition: none; }
}

/* ---------- Compact layouts: phone upright and phone on its side ----------
   JS sets html.is-compact for both. The race then moves into the panel
   (placeRace) and becomes the headline there, so the map keeps its room. */

html.is-compact .panel > .race {
  flex: none;
  margin: 0 0 14px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html.is-compact .panel.is-place > .race,
html.is-compact .panel.is-district > .race { display: none; }

html.is-compact .race-figure span,
html.is-compact .race-foot { display: none; }

html.is-compact .race-head { gap: 8px; }

html.is-compact .race-name { font-size: 0.78rem; }

html.is-compact .race-figure strong { font-size: 1.45rem; }

html.is-compact .race-middle { margin-bottom: 3px; font-size: 0.72rem; }

html.is-compact .race-bars { margin: 8px 0 0; }

html.is-compact .race-track.is-main { height: 10px; }

html.is-compact .race-track.is-past { margin-top: 6px; }

html.is-compact .race-past { margin: 6px 0 0; }

html.is-compact .race-past-labels { margin-top: 4px; }

html.is-compact .race-past-tag,
html.is-compact .race-past-num { font-size: 0.68rem; }

/* The race already shows both shares, so the duel would only repeat it. */
html.is-compact #duel { display: none; }

/* One line of header: title on the left, status on the right. */
html.is-compact .mast {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 12px;
}

html.is-compact .kicker,
html.is-compact .mast .status-meter { display: none; }

html.is-compact h1 { margin: 0; font-size: 1.15rem; }

html.is-compact .status { width: auto; margin: 0; font-size: 0.78rem; }

html.is-compact #status-meta { margin-left: 0; }

html.is-compact .sample { flex-basis: 100%; }

html.is-compact .decided { flex-basis: 100%; margin-top: 4px; padding: 10px 12px; }

html.is-compact .decided-copy strong { font-size: 1.05rem; }

html.is-compact .countdown { margin-bottom: 14px; padding: 10px 10px 9px; }

html.is-compact .countdown-tiles { margin: 6px 0 8px; gap: 5px; }

html.is-compact .countdown-tile { padding: 6px 2px 5px; border-radius: 10px; }

html.is-compact .countdown-tile b { font-size: 1.4rem; }

html.is-compact .countdown-tile small { font-size: 0.66rem; }

html.is-compact .totals { padding-top: 12px; margin-bottom: 12px; }

html.is-compact .pkw-chip { display: none; }

/* The legend becomes one slim strip: name, ramp, name. */
html.is-compact .map-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 7px 12px;
  border-radius: 12px;
}

html.is-compact .legend-heads { display: contents; }

html.is-compact .legend-heads span { order: 1; font-size: 0.72rem; white-space: nowrap; }

html.is-compact .legend-heads span:last-child { order: 3; }

html.is-compact .legend-title { order: 1; font-size: 0.72rem; white-space: nowrap; }

html.is-compact .legend-ramp { order: 2; flex: 1; margin: 0; }

html.is-compact .legend-ramp i { height: 8px; }

html.is-compact .legend-scale,
html.is-compact .legend-notes { display: none; }

/* ---------- Phone upright: map on top, bottom sheet below ---------- */

@media (max-width: 860px) and (orientation: portrait) {
  .ticker {
    height: calc(34px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  html.has-ticker body { padding-top: calc(34px + env(safe-area-inset-top)); }

  .app {
    position: fixed;
    inset: 0;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: 100dvh;
    padding: 0;
  }

  .main {
    order: -1;
    gap: 0;
  }

  .stage {
    order: -1;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .panel,
  .panel.is-place {
    flex: 0 0 auto;
    width: 100%;
    /* Half: as tall as the content, so the map keeps whatever is left. */
    height: auto;
    max-height: 64dvh;
    margin-top: -20px;
    padding: 0 max(18px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -1px 0 var(--hairline), 0 -8px 28px rgba(0, 0, 0, 0.1);
    transition: height 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* One scroll for the sheet. The inner views were clipping the rest
     and swallowing the finger, so a swipe locked in place. */
  .panel[data-detent="half"],
  .panel[data-detent="full"] {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .panel[data-detent="half"]::-webkit-scrollbar,
  .panel[data-detent="full"]::-webkit-scrollbar { display: none; }

  .panel[data-detent="half"] #city-view,
  .panel[data-detent="half"] #place-view,
  .panel[data-detent="full"] #city-view,
  .panel[data-detent="full"] #place-view {
    flex: 0 0 auto;
    overflow: visible;
    overscroll-behavior: auto;
  }

  /* Peek: handle, one-line header and the race — the result at a glance. */
  .panel[data-detent="peek"] {
    height: calc(188px + env(safe-area-inset-bottom));
    max-height: none;
  }

  .panel[data-detent="full"] {
    height: calc(100% - 64px - env(safe-area-inset-top));
    max-height: none;
  }

  .panel.is-dragging { transition: none; }

  .sheet-handle {
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    flex: none;
    width: calc(100% + 40px);
    height: 26px;
    margin: 0 -20px 2px;
    padding: 0;
    border: 0;
    background: var(--surface);
    cursor: grab;
    touch-action: none;
  }

  .sheet-handle span {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--fill-strong);
  }

  .panel.is-place .mast,
  .panel.is-district .mast { display: none; }

  .panel[data-detent="peek"] .colophon { display: none; }

  .place-toolbar { margin: 0 0 6px -5px; }

  .duel { margin-bottom: 16px; }

  .duel-pct { font-size: 1.85rem; }

  /* Top of the map: the view switch across the width, the reset button
     beside it on the right, both clear of the notch. */
  .map-tools {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 60px;
    max-width: none;
    align-items: stretch;
  }

  .map-switch button {
    flex: 1;
    min-height: 34px;
    padding: 6px 8px;
  }

  .district-menu { width: 100%; max-height: 40dvh; }

  .map-legend {
    left: 10px;
    right: 10px;
    bottom: 30px;
  }

  .leaflet-bottom.leaflet-right {
    top: max(10px, env(safe-area-inset-top));
    bottom: auto;
  }

  .leaflet-bottom.leaflet-right .leaflet-control { margin: 0 10px 0 0 !important; }

  .reset-control a,
  .reset-control a:hover {
    width: 40px !important;
    height: 40px !important;
  }

  .leaflet-control-attribution { display: none; }

  .hover-card { width: 220px; }

  .hover-card.is-pinned {
    top: calc(max(10px, env(safe-area-inset-top)) + 52px);
    left: 10px;
    right: 10px;
    width: auto;
    transform: none !important;
  }

  .result-table tbody th,
  .result-table .result-corner { min-width: 7.2rem; }

  .result-table th,
  .result-table td {
    padding: 8px;
    font-size: 0.92rem;
  }

  .result-table .nums {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .result-table .nums em { min-width: 0; font-size: 0.75rem; }

  .leaflet-bottom .leaflet-control-zoom { display: none; }

  .runoff {
    top: calc(max(10px, env(safe-area-inset-top)) + 50px);
    left: 10px;
    right: 10px;
    width: auto;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .runoff-kicker,
  .runoff-when,
  .runoff-bar { display: none; }

  .runoff h2 { font-size: 1rem; }

  .runoff-places { display: none; }

  .runoff-copy strong { font-size: 0.8rem; }

  .runoff-copy span { font-size: 0.72rem; }
}

/* ---------- Phone on its side: panel left, map right, like the desktop ---------- */

@media (orientation: landscape) and (max-height: 560px) {
  .app {
    gap: 8px;
    padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  }

  .panel,
  .panel.is-place {
    flex-basis: min(320px, 44vw);
    width: min(320px, 44vw);
    padding: 12px 14px 6px;
    border-radius: 16px;
  }

  .panel.is-place {
    flex-basis: min(max(320px, calc(160px + var(--place-cols, 1) * 110px)), 52vw);
    width: min(max(320px, calc(160px + var(--place-cols, 1) * 110px)), 52vw);
  }

  .panel.is-place .mast,
  .panel.is-district .mast { display: none; }

  .colophon { margin-top: 6px; padding-top: 4px; }

  .colophon-logo { width: 112px; }

  .place-toolbar { margin: 0 0 4px -5px; }

  .popup-place { margin-bottom: 10px; }

  /* The narrow side panel keeps the first-round caption on one line;
     the grey middle of the bar already shows the other candidates. */
  .race-past-others { display: none; }

  .race-past-tag { white-space: nowrap; }

  #place-view h3 { font-size: 1.15rem; }

  .stage { border-radius: 16px; }

  .map-tools { top: 8px; left: 8px; }

  .map-switch button { min-height: 30px; padding: 4px 10px; font-size: 0.8rem; }

  .district-menu { max-height: calc(100dvh - 80px); }

  .map-legend {
    left: 8px;
    right: 60px;
    bottom: 8px;
  }

  .leaflet-bottom.leaflet-right .leaflet-control { margin-right: 8px; }

  .leaflet-bottom .leaflet-control-zoom { margin-bottom: 6px; }

  .reset-control { margin-bottom: 8px !important; }

  .leaflet-bar a,
  .leaflet-bar a:hover {
    width: 34px !important;
    height: 34px !important;
  }

  .leaflet-control-attribution { display: none; }

  .result-table th,
  .result-table td { padding: 6px 8px; font-size: 0.88rem; }

  .result-table .nums {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .result-table .nums em { min-width: 0; font-size: 0.72rem; }
}