/* The election-night results page (scripts/_election_page.py,
   site/src/election.js). Map first on wide screens; on phones the race
   summary comes first, then the map, then the tables. */
.el-head { padding: 28px 0 8px; }
.el-head h1.title { margin: 0 0 6px; }
.el-test { display: inline-block; margin: 6px 0 0; padding: 3px 8px; border: 1px solid #c88a2a; border-radius: 4px; background: #fbf3e4; color: #6b4511; font-size: 13px; font-weight: 600; }
.el-test[hidden] { display: none; }
.el-caveat { display: block; margin-top: 4px; color: var(--mute); }
.el-status { margin: 0; font: 500 15px/1.4 var(--sans); color: var(--ink); }
.el-status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 6px; vertical-align: 1px; }
.el-status.is-live .dot { background: #2f7c88; }
.el-status.is-stale .dot { background: #c88a2a; }
.el-status .when { color: var(--mute); font-weight: 400; }
.el-report { margin: 4px 0 0; font: 400 14px/1.45 var(--sans); color: var(--mute); }
.el-report b { color: var(--ink); font-weight: 600; }

/* Control of the chambers: one seat strip per chamber. */
.el-control { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 28px; margin: 18px 0 8px; }
.ch { background: var(--surface); border: 1px solid var(--edge); border-radius: 8px; padding: 12px 14px 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ch:hover, .ch.is-on { border-color: var(--ink); }
/* Wide screens: the cards sit in .el-control's grid. Phones: one row of full
   cards that swipes sideways and snaps, the next card peeking in at the edge
   so the row reads as one to scroll. */
.ch-row { display: contents; }
@media (max-width: 640px) {
  .el-control { display: block; }
  .ch-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
  .ch-row::-webkit-scrollbar { display: none; }
  .ch-row > .ch { flex: 0 0 86%; scroll-snap-align: start; }
  .el-control .ch-key { margin-top: 8px; }
}
.ch-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 14px/1.3 var(--sans); }
/* The tally: Dem. and Rep. seats ahead, each in a box of its party's color. */
.ch-top .tally { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ch-top .tally .d, .ch-top .tally .r { min-width: 28px; padding: 3px 7px; border-radius: 4px; color: #fff; font-weight: 700; text-align: center; }
.ch-top .tally .d { background: #1f4fa8; } .ch-top .tally .r { background: #8f1d1d; }
.ch-strip { position: relative; display: flex; gap: 1px; height: 22px; margin: 22px 0 18px; }
.ch-strip .seat { flex: 1 1 0; min-width: 0; border-radius: 1px; background: #fff; }
.ch-strip .seat.is-open { box-shadow: inset 0 0 0 1px #d4d1c7; }
/* The three-fifths lines are labeled above the strip; the majority line
   below it, centered, between the two ends' "Safest" labels. */
.ch-line { position: absolute; top: -3px; bottom: -5px; width: 0; border-left: 1.5px solid var(--ink); pointer-events: none; }
/* Three-fifths: a dash of ink and white, drawn as a background, so it shows
   across both parties' seats and on every browser (a 1.5px dashed border
   came out as a dot on iPhones). */
.ch-line.super { top: -16px; bottom: -3px; width: 2px; margin-left: -1px; border-left: 0;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 4px, #fff 4px 7px); }
.ch-line span { position: absolute; white-space: nowrap; font: 500 11px/1 var(--sans); color: var(--mute); }
.ch-line.maj span { bottom: -12px; left: 0; transform: translateX(-50%); }
.ch-line.super span { top: -2px; left: 4px; }
.ch-line.flip span { left: auto; right: 4px; }
.ch-end { position: absolute; bottom: -17px; font: 500 11px/1 var(--sans); color: var(--mute); white-space: nowrap; pointer-events: none; }
.ch-end.d { left: 0; } .ch-end.r { right: 0; }
.el-tip.ch-tip { position: fixed; }
.ch-key { grid-column: 1 / -1; margin: -4px 0 0; font: 400 12.5px/1.6 var(--sans); color: var(--mute); }
.ch-key .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin: 0 1px 0 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ch-key .sw + .sw { margin-left: 0; }
.ch-note { margin: 4px 0 0; font: 400 12.5px/1.4 var(--sans); color: var(--mute); }

/* Picking a race. */
.el-pick { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 18px 0 12px; }
.el-race { display: flex; align-items: center; gap: 8px; font: 500 14px var(--sans); }
.el-race select, .el-search input { font: 400 15px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid #c9c6bc; border-radius: 6px; padding: 8px 10px; min-height: 40px; }
.el-race select { max-width: 340px; }
.el-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.el-search input { width: 100%; box-sizing: border-box; }
.el-search ul { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid #c9c6bc; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.08); max-height: 320px; overflow: auto; }
.el-search li { padding: 7px 12px; font: 400 14px/1.35 var(--sans); cursor: pointer; }
.el-search li small { display: block; color: var(--mute); font-size: 12.5px; }
.el-search li[aria-selected="true"], .el-search li:hover { background: #f0eee7; }
.el-locate { min-height: 40px; }
.el-found { flex: 1 0 100%; margin: -4px 0 0; font: 400 13.5px/1.4 var(--sans); color: var(--body); }
.el-found[hidden] { display: none; }

/* Map and panel. */
.el-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.el-mapcol { min-width: 0; }
.el-stage { position: relative; background: var(--bg); }
.el-stage > svg { display: block; width: 100%; height: auto; }
.el-stage .lyr path { stroke: #fff; stroke-width: .5; vector-effect: non-scaling-stroke; cursor: pointer; }
/* Colors ease in from white as the results load, and between races. */
.el-stage .lyr path { transition: fill .35s ease; }
@media (prefers-reduced-motion: reduce) { .el-stage .lyr path { transition: none; } }
.el-stage .lyr[data-layer="counties"] path { stroke: #9a978d; stroke-width: .6; }
.el-stage .lyr path.none { fill: #fff; }
.el-stage .lyr[data-layer]:not([data-layer="counties"]) path.none { stroke: #c9c6bc; }
.el-stage .lyr path:hover { stroke: var(--ink); stroke-width: 1.4; }
.el-stage .clines path { fill: none; stroke: #6b6a63; stroke-width: .35; stroke-opacity: .55; vector-effect: non-scaling-stroke; pointer-events: none; }
.el-stage.on-counties .clines { display: none; }
#el-hl { fill: none; stroke: var(--ink); stroke-width: 2.4; vector-effect: non-scaling-stroke; pointer-events: none; }
#el-pin circle:first-child { fill: #fff; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#el-pin circle:last-child { fill: var(--ink); }
.el-tip { position: absolute; z-index: 10; pointer-events: none; background: var(--surface); border: 1px solid #c9c6bc; border-radius: 6px; padding: 8px 10px; font: 400 13px/1.35 var(--sans); box-shadow: 0 4px 14px rgba(0,0,0,.1); max-width: 260px; }
.el-tip b { font-weight: 600; }
.el-tip .t-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.el-tip .t-meta { color: var(--mute); font-size: 12px; margin-top: 4px; }
.el-metros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.el-metros .lab { font: 600 12px var(--sans); color: var(--mute); margin-right: 4px; letter-spacing: .02em; }
.el-metros button { font: 500 13px/1 var(--sans); background: var(--surface); border: 1px solid #c9c6bc; border-radius: 999px; padding: 0 12px; min-height: 30px; cursor: pointer; color: var(--ink); }
.el-metros button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.el-metros button:hover, .el-metros button.is-on { border-color: var(--ink); }

.el-panel { background: var(--surface); border: 1px solid var(--edge); border-radius: 8px; padding: 16px 16px 12px; font: 400 14px/1.45 var(--sans); }
.el-panel h2 { margin: 0 0 2px; font: 600 20px/1.25 var(--serif); }
.el-panel .sub { margin: 0 0 10px; color: var(--mute); font-size: 13px; }
.el-panel .rep { margin: 0 0 12px; font-size: 13px; color: var(--mute); }
.el-panel .rep b { color: var(--ink); font-weight: 600; }
.cands { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cands td { padding: 7px 0; border-top: 1px solid var(--edge); vertical-align: top; }
.cands tr:first-child td { border-top: 0; }
.cands .nm { font-weight: 500; }
.cands .nm small { display: block; color: var(--mute); font-weight: 400; font-size: 12px; }
.cands .v { text-align: right; white-space: nowrap; padding-left: 10px; }
.cands .v small { display: block; color: var(--mute); font-size: 12px; }
.cands .bar { height: 6px; margin-top: 5px; background: #eeece5; border-radius: 3px; overflow: hidden; }
.cands .bar i { display: block; height: 100%; border-radius: 3px; }
.el-panel .lead { margin: 10px 0 0; font-weight: 500; }
.el-panel .flag { margin: 8px 0 0; padding: 6px 9px; border-radius: 6px; background: #f6efe1; font-size: 13px; }
.el-panel details { margin-top: 10px; font-size: 13px; }
.el-panel details + details { margin-top: 6px; }
.el-panel summary { cursor: pointer; font-weight: 500; }
.el-panel .types { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.el-panel .types th, .el-panel .types td { padding: 4px 0 4px 8px; text-align: right; border-top: 1px solid var(--edge); font-weight: 400; }
.el-panel .types th:first-child, .el-panel .types td:first-child { text-align: left; padding-left: 0; }
.el-panel .types thead th { color: var(--mute); font-size: 12px; border-top: 0; }
.el-panel .tip-sel { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--edge); }
.el-panel .tip-sel h3, .el-panel h3 { margin: 12px 0 6px; font: 600 14px var(--sans); }
.el-panel ol, .el-panel ul.list { margin: 0; padding: 0; list-style: none; }
.el-panel li.race { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--edge); cursor: pointer; }
.el-panel li.race:hover .nm { text-decoration: underline; }
.el-panel li.race.line .nm small { display: block; color: var(--mute); font-size: 12px; font-weight: 400; }
.el-panel li.race .m { white-space: nowrap; font-variant-numeric: tabular-nums; }
.el-panel .back { background: none; border: 0; padding: 0; margin: 0 0 8px; font: 500 13px var(--sans); color: var(--accent); cursor: pointer; }
.pd { color: #1f4fa8; } .pr { color: #8f1d1d; } .po { color: #6a55a3; } .py { color: #1b5562; } .pn { color: #6b4511; }

/* Closest races and tables. */
.el-close { margin: 28px 0 0; }
.el-close h2, .el-pinned h2, .el-tables h2, .el-notes h2, .el-list h2 { font: 600 22px/1.25 var(--serif); margin: 0 0 10px; }
.el-tables { margin: 32px 0 0; }
.el-tables .t-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.el-tables .t-dl { display: flex; gap: 8px; flex-wrap: wrap; }
.el-tables .scroll { overflow: auto; max-height: 620px; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface); }
.el-tables table { width: 100%; border-collapse: collapse; font: 400 13.5px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.el-tables th, .el-tables td { padding: 7px 10px; text-align: right; border-top: 1px solid var(--edge); white-space: nowrap; }
.el-tables th:first-child, .el-tables td:first-child, .el-tables .l { text-align: left; }
.el-tables thead th { border-top: 0; background: #faf9f6; font-weight: 600; position: sticky; top: 0; }
.el-tables thead th button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.el-tables thead th[aria-sort] button::after { content: " ▾"; color: var(--mute); }
.el-tables thead th[aria-sort="ascending"] button::after { content: " ▴"; }
.el-tables tbody tr { cursor: pointer; }
.el-tables tbody tr:hover, .el-tables tbody tr.is-on { background: #f3f1ea; }
.el-tables td small { color: var(--mute); }
.el-tables .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.el-notes { margin: 36px 0 40px; max-width: 760px; font: 400 15px/1.55 var(--sans); color: var(--body); }
.el-notes ul { padding-left: 18px; }
.el-notes li { margin: 6px 0; }
.el-src { color: var(--mute); font-size: 13.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Stacked, the panel follows the map, as it sits to its right on a wide screen. */
@media (max-width: 1000px) {
  .el-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .el-head { padding-top: 18px; }
  .el-race { width: 100%; } .el-race select { flex: 1 1 0; min-width: 0; width: 100%; max-width: none; text-overflow: ellipsis; }
  /* Search and Use my location share a row; Zoom to scrolls sideways. */
  .el-search { max-width: none; flex: 1 1 0; min-width: 0; }
  .el-locate { flex: none; padding-left: 12px; padding-right: 12px; }
  .el-metros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .el-metros::-webkit-scrollbar { display: none; }
  .el-metros > * { flex: none; }
  .el-tip { display: none; }
}
/* Phones: the page as it reads on a wide screen. The chamber strips, then the
   race and the map, then the race sections, the table and the notes. */
@media (max-width: 640px) {
  .el { display: flex; flex-direction: column; }
  .el-head { order: 0; } .el-control { order: 1; } .el-pick { order: 2; } .el-split { order: 3; } .el-mine { order: 4; }
  .el-pinned { order: 5; } .el-out { order: 6; } .el-close { order: 7; } .el-flips { order: 8; }
  .el-tables { order: 9; } .el-notes { order: 10; }
}

/* Phones: a Map / List switch under the race picker. List puts the panel
   first and cards in place of the map and the table. */
.el-mode, .el-list { display: none; }
@media (max-width: 640px) {
  .el-mode { order: 2; display: inline-flex; align-self: flex-start; margin: 0 0 12px; border: 1px solid #c9c6bc; border-radius: 6px; overflow: hidden; }
  .el-mode button { font: 500 14px var(--sans); padding: 0 22px; min-height: 38px; background: var(--surface); border: 0; color: var(--ink); cursor: pointer; }
  .el-mode button + button { border-left: 1px solid #c9c6bc; }
  .el-mode button[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .el.listmode .el-mapcol, .el.listmode .el-tables { display: none; }
  .el.listmode .el-list { display: block; }
}
.el-list .l-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 6px 0 10px; }
.el-list h2 { margin: 0; }
.el-sort { display: inline-flex; border: 1px solid #c9c6bc; border-radius: 6px; overflow: hidden; }
.el-sort button { font: 500 12.5px var(--sans); padding: 0 11px; min-height: 32px; background: var(--surface); border: 0; color: var(--ink); cursor: pointer; }
.el-sort button + button { border-left: 1px solid #c9c6bc; }
.el-sort button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.el-cards .rc-static { width: 100%; height: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--edge); border-radius: 8px; padding: 10px 12px;
  font: 400 13px/1.35 var(--sans); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }

/* Lead / Counted switch in the legend card. */

/* Pinned races: a row of cards above the map. */
#el-pinmarks path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.el-pinned:empty { display: none; }

/* The key: a strip under the map, never on it. Zoom buttons, the Lead /
   Counted switch, the bins, the other states, the early toggle; it wraps
   inline and scrolls sideways in full screen. */
.el-mapbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 0 6px; border-bottom: 1px solid var(--edge); }
.el-mapbar #el-zoomslot { flex: none; }
.el-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 400 12.5px/1.3 var(--sans); color: var(--body); min-width: 0; }
.el-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.el-legend .sw { display: inline-block; width: 18px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.el-legend .lg-view { display: inline-flex; border: 1px solid #c9c6bc; border-radius: 6px; overflow: hidden; flex: none; }
.el-legend .lg-view button { font: 500 12.5px var(--sans); padding: 6px 11px; min-height: 32px; background: var(--surface); border: 0; color: var(--ink); cursor: pointer; }
.el-legend .lg-view button + button { border-left: 1px solid #c9c6bc; }
.el-legend .lg-view button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.el-legend .lg-scale { display: inline-grid; grid-template-columns: auto repeat(var(--n, 4), 34px); grid-template-rows: auto auto auto; gap: 2px 2px; align-items: center; font-size: 11px; }
.el-legend .lg-scale .lab { padding-right: 6px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.el-legend .lg-scale .sw { width: 34px; height: 10px; }
.el-legend .lg-scale .tick { text-align: center; color: var(--mute); white-space: nowrap; }
.el-legend .lg-dash { display: inline-block; width: 18px; height: 12px; border: 1.5px dashed var(--ink); border-radius: 2px; box-sizing: border-box; }
.el-legend .lg-fine { color: var(--mute); }
.el-legend .lg-details { display: none; }
.el-metros { padding-top: 8px; }

/* Full screen: the map, its key and the race picker fill the screen; the
   panel opens when a place is picked (or Details), beside the map when the
   screen is wide and under it when it's tall, like the war maps' story. */
.el-split.mapfull { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); }
.el-split.mapfull .el-mapcol { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.el-split.mapfull .el-pick { margin: 0; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: var(--surface); border-bottom: 1px solid var(--edge); flex-wrap: nowrap; }
.el-split.mapfull .el-pick .el-locate { display: none; }
.el-split.mapfull .el-stage { flex: 1 1 0; min-height: 0; }
.el-split.mapfull .fullbar { display: contents; }
.el-split.mapfull .zclose { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); }
.el-split.mapfull .el-pick ~ .el-stage .zclose { top: 10px; }
.el-split.mapfull .el-mapbar { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: var(--surface); border-top: 1px solid var(--edge);
  border-bottom: 0; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
.el-split.mapfull .el-mapbar::-webkit-scrollbar { display: none; }
.el-split.mapfull .el-legend { flex-wrap: nowrap; }
.el-split.mapfull .el-legend .lg-details { display: inline-flex; }
.el-split.mapfull .el-metros { flex: none; background: var(--surface); padding: 0 10px max(8px, env(safe-area-inset-bottom)); overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.el-split.mapfull .el-panel { display: none; }
.el-split.mapfull .el-panel.story { display: block; position: relative; flex: 0 0 40%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  border: 0; border-top: 1px solid var(--edge); border-radius: 0; padding-top: 14px; }
.el-panel .pclose { display: none; float: right; margin: -4px -4px 6px 8px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #c9c6bc; background: var(--surface); cursor: pointer; font: 600 18px/1 var(--sans); color: var(--ink); }
.el-split.mapfull .el-panel .pclose { display: block; }
@media (orientation: landscape) {
  .el-split.mapfull { flex-direction: row; }
  .el-split.mapfull .el-panel.story { flex: 0 0 min(400px, 38%); border-top: 0; border-left: 1px solid var(--edge); }
}
.el-split.mapfull .el-panel { order: 0; }
.el-split.mapfull .zclose { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid #c9c6bc; box-shadow: 0 2px 8px rgba(29,29,26,.12); }
.el-split.mapfull .zclose svg { width: 14px; height: 14px; }
.el-split.mapfull .el-metros { padding-top: 6px; }

/* Race cards: Pinned races and Closest races share one card. */
.el-pinned { margin: 28px 0 0; }
.el-pinned:empty { display: none; }
.el-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.el-cards button { width: 100%; height: 100%; text-align: left; background: var(--surface); border: 1px solid var(--edge); border-radius: 8px; padding: 10px 12px;
  font: 400 13px/1.35 var(--sans); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.el-cards button:hover, .el-cards button.is-on { border-color: var(--ink); }
.el-cards b { font-weight: 600; font-size: 14px; }
.el-cards .rc-c { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.el-cards .rc-bar { display: flex; height: 6px; background: #eeece5; border-radius: 3px; overflow: hidden; }
.el-cards .rc-bar i { display: block; height: 100%; }
.el-cards .rc-bar i + i { margin-left: auto; }
.el-cards .m { font-variant-numeric: tabular-nums; }
.el-cards small { color: var(--mute); font-size: 12px; }
.el-cards .rc-note { color: var(--body); }

/* The key holds still: zoom buttons, then the switch, then the key in a box
   of fixed height that wraps on its own, so Lead and Counted swap swatches
   without moving the switch or anything under it. */
.el-mapbar { flex-wrap: nowrap; align-items: center; }
.el-legend { flex: 1 1 auto; flex-wrap: nowrap; align-items: center; }
.el-legend .lg-key { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px 16px; min-height: 76px; min-width: 0; }
@media (max-width: 760px) {
  .el-mapbar { flex-wrap: wrap; }
  .el-legend { flex-wrap: wrap; }
  .el-legend .lg-key { min-height: 96px; }
}
/* Full screen's bar scrolls sideways, so the key keeps its full width there:
   squeezed, its swatches ran out under the Details button. */
.el-split.mapfull .el-legend, .el-split.mapfull .el-legend .lg-key { flex: none; }
.el-split.mapfull .el-legend .lg-key { flex-wrap: nowrap; min-height: 0; }
/* Lead's scale has three rows (Dem., Rep., ticks) and Counted's two; both
   take the taller one's height so the bar never changes size between them. */
.el-legend .lg-scale { min-height: 52px; align-content: center; }
/* Votes by method: compact, and it scrolls sideways if it still can't fit. */
.el-panel .types-wrap { overflow-x: auto; margin-top: 6px; }
.el-panel .types { margin-top: 0; font-size: 12.5px; white-space: nowrap; }
.el-panel .types th, .el-panel .types td { padding: 4px 0 4px 10px; }
.el-panel .types thead th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.el-panel .types tr.tot td { font-weight: 600; }
/* The race picker: our own chevron, inset from the edge, instead of the
   browser's arrow. */
.el-race select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d1d1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.el-race select:hover { border-color: var(--ink); }
.el-race select:focus-visible, .el-search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Seat strips: no gaps once seats are only a few pixels wide; a compact key. */
.ch-strip.many { gap: 0; }
.ch-key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }

/* Race cards: small tags instead of repeated sentences. */
.el-cards .rc-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-block; font: 600 10.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--mute);
  border: 1px solid #c9c6bc; border-radius: 4px; padding: 3px 5px; }
.tag.flip { color: #fff; background: var(--ink); border-color: var(--ink); }
/* A flip in the color of the party that took the seat. */
.tag.flip.f-D { background: #1f4fa8; border-color: #1f4fa8; }
.tag.flip.f-R { background: #8f1d1d; border-color: #8f1d1d; }

/* Media calls: attributed, in the called candidate's party color. */
.call { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font: 600 12px/1.2 var(--sans); color: #fff; border-radius: 4px; padding: 4px 7px; margin: 2px 6px 2px 0; }
.call.c-D { background: #1f4fa8; } .call.c-R { background: #8f1d1d; } .call.c-Y { background: #1b5562; } .call.c-N { background: #6b4511; } .call.c-O { background: #4e7d5b; }
.call-list { display: block; margin: 2px 0 6px; font-size: 12px; color: var(--mute); }

/* Panel tools: follow and copy link. */
.ptools { display: flex; gap: 14px; margin: 2px 0 10px; }
.ptools .linkish { font: 500 13px var(--sans); background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.ptools .linkish[aria-pressed="true"] { color: var(--ink); }

/* How the lead moved. */
.hist { margin-top: 12px; font-size: 13px; }
.hist svg { margin-top: 8px; }
.hist svg { display: block; width: 100%; height: auto; overflow: visible; }
.hist .ax { font: 400 10px var(--sans); fill: var(--mute); }

/* Still to report. */
.el-out { margin: 28px 0 0; }
.el-out:empty { display: none; }
.el-out h2 { font: 600 22px/1.25 var(--serif); margin: 0 0 4px; }
.el-out > .sub { margin: 0 0 10px; color: var(--mute); font: 400 14px var(--sans); }
.el-outlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.el-outlist button { width: 100%; height: 100%; text-align: left; background: var(--surface); border: 1px solid var(--edge); border-radius: 8px; padding: 9px 12px;
  font: 400 13px/1.4 var(--sans); color: var(--body); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.el-outlist button:hover { border-color: var(--ink); }
.el-outlist b { font-weight: 600; color: var(--ink); font-size: 14px; }
.el-outlist small { color: var(--mute); font-size: 12px; }

/* Your races. */
.el-mine { margin: 28px 0 0; }
.el-mine:empty { display: none; }
.el-mine h2 { font: 600 22px/1.25 var(--serif); margin: 0 0 10px; }

/* By votes: circles over the county map. */
#el-bubbles circle { stroke: #fff; stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; fill-opacity: .92; }
#el-bubbles circle:hover { stroke: var(--ink); stroke-width: 1.4; }

/* Save map: at the end of the Zoom to row, clear of the key. */
.el-metros .el-save { margin-left: auto; flex: none; min-height: 32px; padding: 0 14px; font-size: 13px; border-radius: 999px; }
/* The star on a race card: its own button, pinned to the card's corner.
   Scoped past .el-cards button, which would stretch it over the card. */
.el-cards li.rc { position: relative; }
/* Only the title line makes room for the star; the names and bar run the
   card's full width. */
.el-cards li.rc .rc-t { padding-right: 30px; }
.el-cards .rc-star { position: absolute; top: 4px; right: 4px; z-index: 1; display: block; width: 34px; height: 34px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; font: 400 19px/34px var(--sans); text-align: center; color: #a8a59b; cursor: pointer; }
.el-cards .rc-star:hover { color: var(--ink); background: #f0eee7; border: 0; }
.el-cards .rc-star[aria-pressed="true"] { color: #c88a2a; }
.el-cards .rc-star:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Full screen's quick list of your races and the pinned ones. */
.el-quick { display: none; }
.el-split.mapfull .el-quick { display: flex; flex: 1 1 100%; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; }
.el-split.mapfull .el-quick:empty { display: none; }
.el-split.mapfull .el-quick::-webkit-scrollbar { display: none; }
.el-split.mapfull .el-pick { flex-wrap: wrap; }
.el-quick .qk { flex: none; white-space: nowrap; font: 500 13px/1 var(--sans); min-height: 32px; padding: 0 12px; border: 1px solid #c9c6bc; border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: pointer; }
.el-quick .qk:hover, .el-quick .qk.is-on { border-color: var(--ink); }
.el-quick .qk.is-on { background: #f0eee7; }
.el-quick .qm { color: var(--mute); font-variant-numeric: tabular-nums; }
/* The star column in a district table: the cards' star, one per race. */
.el-tables th.st, .el-tables td.st { width: 34px; padding: 0 0 0 6px; text-align: center; }
.el-tables .tstar { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; font: 400 17px/30px var(--sans); color: #a8a59b; cursor: pointer; padding: 0; }
.el-tables .tstar:hover { color: var(--ink); background: #f0eee7; }
.el-tables .tstar[aria-pressed="true"] { color: #c88a2a; }
.el-tables .tstar:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Seats that flipped (a finished election), by chamber. */
.el-flips { margin: 28px 0 0; }
.el-flips:empty { display: none; }
.el-flips > .sub { margin: 0 0 6px; color: var(--mute); font: 400 14px var(--sans); }
.el-flips h3 { margin: 16px 0 8px; font: 600 15px var(--sans); }
.el-flips h3 .n { color: var(--mute); font-weight: 500; }
/* Since <year>: the shift arrows and their key. */
#el-arrows { pointer-events: none; }
.el-legend .lg-arrow { width: 32px; height: 20px; flex: none; overflow: visible; }
.el-legend .lg-arrow.lg-sm { width: 28px; margin: 0 2px; vertical-align: -6px; }

/* The strip's count says what it counts: held going in, ahead in, or won. */
.ch-top .ch-what { display: block; margin-top: 1px; font: 500 11.5px/1.2 var(--sans); color: var(--mute); }

/* Still to report: a row per county, its name and who leads there so far,
   then what's counted and what's likely still out. */
.el-outlist { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 10px; }
.el-outlist button { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; }
.el-outlist .o-n { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.el-outlist .o-l { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.el-outlist .o-m { color: var(--body); font-size: 12.5px; line-height: 1.35; }

/* A new batch: the places whose count moved get a brief outline. */
@keyframes el-new { 0%, 60% { stroke: var(--ink); stroke-width: 2.2; } 100% { stroke-width: .6; } }
.el-stage .lyr path.is-new { animation: el-new 2.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .el-stage .lyr path.is-new { animation: none; } }
.el-newpill { position: fixed; z-index: 30; left: 50%; bottom: max(16px, calc(env(safe-area-inset-bottom) + 70px)); transform: translateX(-50%);
  font: 600 13.5px var(--sans); color: #fff; background: var(--ink); border: 0; border-radius: 999px; padding: 0 16px; min-height: 38px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; white-space: nowrap; }
.el-newpill[hidden] { display: none; }

/* The race's result under the picker, and Show all: phones only. */
.el-headline, .el-more { display: none; }
@media (max-width: 640px) {
  .el-headline { order: 2; display: block; margin: 0 0 12px; }
  .el-headline:empty, .el.listmode .el-headline { display: none; }
  .el-headline .el-cards { grid-template-columns: 1fr; }
  .el-more { display: inline-flex; margin-top: 10px; }
  /* Pinned races and Your races: a row that swipes, like the strips. */
  .el-cards.swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
  .el-cards.swipe::-webkit-scrollbar { display: none; }
  .el-cards.swipe > li { flex: 0 0 86%; scroll-snap-align: start; }
  /* Closest races and flips: the name, the lead and what's in, no bar. */
  .el-cards.compact .rc-c, .el-cards.compact .rc-bar { display: none; }
  .el-cards.compact button { padding: 8px 12px; gap: 2px; }
  .el-cards.compact { gap: 6px; }
  #el-close .trim > li:nth-child(n+5), #el-out .trim > li:nth-child(n+6) { display: none; }
}
.ch-key > span:not(.sw) { flex: 1 1 200px; }

/* After a batch: how far the margin moved, and toward whom ("Whatley +0.5"),
   small, with a soft yellow highlight under it, fading out. */
.rc-move { display: inline-block; margin-left: 8px; padding: 0 2px; font: 600 11.5px/1.3 var(--sans); color: var(--ink); white-space: nowrap;
  background: linear-gradient(transparent 52%, #f7e39a 52%); animation: el-move 12s ease-out forwards; }
@keyframes el-move { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-move { animation: none; } }