/* us-midterms.css - /us-midterms-2026 section (prefix us-).
   Built on css/pc-tokens.css + css/pc-components.css; no raw hexes. */

body.us-mid {
    --us-dem: var(--pc-party-dem);
    --us-rep: var(--pc-party-rep);
    --us-ind: var(--pc-party-usind);
    --us-safe-d: var(--us-dem);
    --us-likely-d: color-mix(in srgb, var(--us-dem) 62%, var(--pc-surface));
    --us-lean-d: color-mix(in srgb, var(--us-dem) 32%, var(--pc-surface));
    --us-safe-r: var(--us-rep);
    --us-likely-r: color-mix(in srgb, var(--us-rep) 62%, var(--pc-surface));
    --us-lean-r: color-mix(in srgb, var(--us-rep) 32%, var(--pc-surface));
    --us-safe-i: var(--us-ind);
    --us-likely-i: color-mix(in srgb, var(--us-ind) 62%, var(--pc-surface));
    --us-lean-i: color-mix(in srgb, var(--us-ind) 32%, var(--pc-surface));
    --us-tossup: color-mix(in srgb, var(--pc-text-meta) 70%, var(--pc-surface));
    --us-noelection: var(--pc-border-light);
    background: var(--pc-bg);
}
/* Dark ground: the UK pages' dark surface (gb-polls, /us/), so linked pages match */
body.us-mid.dark-mode, body.us-mid.dark-mode .us-byo-dock { background: var(--pc-surface); }

.us-masthead { margin-bottom: 24px; max-width: 720px; }
.us-crumb { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-meta); margin: 0 0 8px; }
.us-crumb a { color: var(--pc-text-meta); }

/* Test-coverage banner */
.us-test-note {
    font-family: var(--pc-sans); font-size: 13px; line-height: 1.5;
    color: var(--pc-text-secondary); background: var(--pc-tint);
    padding: 10px 14px; margin: 0 0 24px;
}

/* Lean fills (map, chips, seatbar) */
.us-l-safe-d { --us-fill: var(--us-safe-d); }
.us-l-likely-d { --us-fill: var(--us-likely-d); }
.us-l-lean-d { --us-fill: var(--us-lean-d); }
.us-l-tossup { --us-fill: var(--us-tossup); }
.us-l-lean-r { --us-fill: var(--us-lean-r); }
.us-l-likely-r { --us-fill: var(--us-likely-r); }
.us-l-safe-r { --us-fill: var(--us-safe-r); }
.us-l-safe-i { --us-fill: var(--us-safe-i); }
.us-l-likely-i { --us-fill: var(--us-likely-i); }
.us-l-lean-i { --us-fill: var(--us-lean-i); }
.us-l-none { --us-fill: var(--us-noelection); }
.us-l-held-d { --us-fill: var(--us-dem); }
.us-l-held-r { --us-fill: var(--us-rep); }
.us-l-vacant { --us-fill: var(--pc-border); }

/* Seat tally bar: reuse pc-seatbar, fills from lean classes */
.us-seatbar .pc-seat-seg { background: var(--us-fill); color: var(--pc-text); }
.us-seatbar .pc-seat-seg.us-l-safe-d, .us-seatbar .pc-seat-seg.us-l-safe-r,
.us-seatbar .pc-seat-seg.us-l-held-d, .us-seatbar .pc-seat-seg.us-l-held-r,
.us-seatbar .pc-seat-seg.us-l-safe-i { color: var(--pc-on-party-dark); }
.us-seatbar .pc-seat-seg.us-l-held-d, .us-seatbar .pc-seat-seg.us-l-held-r {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--pc-surface) 18%, transparent) 6px 8px);
}
.us-seat-legend .pc-swatch { background: var(--us-fill); }
.us-seatbar .pc-seat-seg { min-width: 0; overflow: hidden; }

/* Map */
.us-map-wrap { position: relative; margin: 8px 0 4px; }
.us-map { width: 100%; height: auto; display: block; }
.us-map path.us-state { fill: var(--us-fill); stroke: var(--pc-surface); stroke-width: 0.8; }
.us-map path.us-state.is-link { cursor: pointer; }
.us-map path.us-state.is-link:hover, .us-map path.us-state.is-focus { stroke: var(--pc-text); stroke-width: 1.6; }
.us-map .us-map-label { font-family: var(--pc-sans); font-size: 11px; font-weight: 700; fill: var(--pc-text); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.us-map .us-map-label.on-dark { fill: var(--pc-on-party-dark); }
.us-map-tip {
    position: absolute; pointer-events: none; z-index: 5; min-width: 180px; max-width: 260px;
    background: var(--pc-tooltip-bg); color: var(--pc-tooltip-text);
    font-family: var(--pc-sans); font-size: 12px; line-height: 1.45; padding: 8px 10px;
}
.us-map-tip b { font-size: 13px; }
.us-map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-secondary); margin: 8px 0 0; }
.us-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.us-map-legend i { width: 12px; height: 12px; background: var(--us-fill); display: inline-block; border: 1px solid var(--pc-border); }

/* Small-state chips (map is hard to tap in the north-east) */
.us-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.us-chip {
    font-family: var(--pc-sans); font-size: 12px; font-weight: 600; line-height: 1;
    padding: 6px 8px; border: 1px solid var(--pc-border); background: var(--pc-surface);
    color: var(--pc-text); text-decoration: none; display: inline-flex; gap: 6px; align-items: center;
}
.us-chip i { width: 10px; height: 10px; background: var(--us-fill); display: inline-block; }

/* Race table */
.us-race-table td, .us-race-table th { white-space: nowrap; }
.us-race-table td.us-cands { white-space: normal; min-width: 180px; }
.us-race-table a { color: var(--pc-text); }
.us-lean-chip {
    display: inline-block; font-family: var(--pc-sans); font-size: 12px; font-weight: 700;
    padding: 3px 7px; background: var(--us-fill); color: var(--pc-text); white-space: nowrap;
}
.us-lean-chip.us-l-safe-d, .us-lean-chip.us-l-safe-r, .us-lean-chip.us-l-safe-i { color: var(--pc-on-party-dark); }
.us-basis { font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-meta); display: block; margin-top: 2px; }
.us-party-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--party-color); margin-right: 5px; vertical-align: 1px; }

/* Race page hero */
.us-race-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; margin: 0 0 16px; }
.us-race-hero > div { padding: 0; }
.us-race-hero > div[style] .us-hero-name::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--party-color); margin-right: 6px; vertical-align: 1px; }
.us-hero-name { font-family: var(--pc-sans); font-size: 13px; font-weight: 600; color: var(--pc-text-secondary); margin: 0 0 4px; }
.us-hero-num { font-family: var(--pc-serif); font-size: 34px; font-weight: 700; color: var(--pc-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.us-hero-sub { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-meta); margin-top: 4px; }

.us-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text-body); margin: 0 0 8px; }
.us-facts dt { font-size: 12px; color: var(--pc-text-meta); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.us-facts dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }

/* Poll table */
.us-poll-table td.us-excl { color: var(--pc-text-meta); }
.us-poll-table tr.is-excluded td { color: var(--pc-text-meta); }
.us-poll-table .us-src { font-size: 12px; }
.us-poll-table .us-src a { color: var(--pc-text-secondary); }
.us-tag { font-family: var(--pc-sans); font-size: 11px; font-weight: 600; color: var(--pc-text-secondary); border: 1px solid var(--pc-border); padding: 1px 4px; margin-left: 4px; white-space: nowrap; }

.us-chart { height: 360px; }
@media (max-width: 768px) { .us-chart { height: 300px; } }

.us-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .us-grid-2 { grid-template-columns: 1fr; } }

.us-method p, .us-method li { font-family: var(--pc-serif); font-size: 17px; line-height: 1.7; color: var(--pc-text-body); max-width: 680px; }
.us-method h2 { font-family: var(--pc-serif); }
.us-sources { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-meta); line-height: 1.6; }
.us-sources a { color: var(--pc-text-meta); }
.us-ev-statements tr.us-ev-fig td { border-bottom: 0; padding-bottom: 2px; }
.us-ev-statements tr.us-ev-quote td { text-align: left; font-size: 13px; color: var(--pc-text-secondary); padding-top: 0; }
.us-ev-statements tr.us-ev-year td { text-align: left; }

/* Build your own */
.us-byo-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.us-byo-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.us-byo-palette button { font-family: var(--pc-sans); font-size: 12px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--pc-border); background: var(--pc-surface); color: var(--pc-text); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.us-byo-palette button i { width: 12px; height: 12px; background: var(--us-fill); display: inline-block; }
.us-byo-palette button.is-active { outline: 2px solid var(--pc-text); outline-offset: -2px; }
.us-byo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 12px 0 0; }
.us-byo-list button { font-family: var(--pc-sans); font-size: 13px; text-align: left; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--pc-border-light); background: none; color: var(--pc-text); cursor: pointer; }
.us-byo-list button::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--us-fill); }
.us-byo-list button small { display: block; color: var(--pc-text-meta); font-size: 11px; margin-top: 2px; }
.us-share-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.us-share-row input { flex: 1 1 240px; min-width: 0; }

@media (max-width: 600px) {
    .us-hero-num { font-size: 28px; }
    .us-method p, .us-method li { font-size: 16px; }
}
.us-race-table td:last-child { white-space: normal; min-width: 150px; }
#us-byo-map path.us-state:not([data-race]) { pointer-events: none; }

/* Contrast: the shared meta grey (--pc-text-meta) is under 4.5:1 on the page
   ground. In this section small meta text uses the secondary ramp instead. */
body.us-mid .pc-section-label, body.us-mid .pc-kicker, body.us-mid .pc-footnote,
body.us-mid .pc-help, body.us-mid .pc-table th, body.us-mid .pc-seatbar-note,
body.us-mid .us-crumb, body.us-mid .us-crumb a, body.us-mid .us-sources, body.us-mid .us-sources a,
body.us-mid .us-facts dt, body.us-mid .us-byo-list button small, body.us-mid .us-basis,
body.us-mid .us-hero-sub, body.us-mid .us-poll-table tr.is-excluded td { color: var(--pc-text-secondary); }
body.us-mid .us-poll-table tr.is-excluded td { font-style: italic; }

/* ---- Review pass: toss-up hatch, watch cards, polling-error slider, BYO dock ---- */
.us-map path.us-l-tossup, .us-seatbar .pc-seat-seg.us-l-tossup, .us-lean-chip.us-l-tossup,
.us-chip i.us-l-tossup, .us-map-legend i.us-l-tossup, .us-seat-legend .pc-swatch.us-l-tossup,
.us-watch-card.us-l-tossup::before {
    --us-fill: var(--pc-border);
    background-image: repeating-linear-gradient(135deg, var(--pc-text-meta) 0 2px, transparent 2px 6px);
}
.us-map path.us-l-tossup { fill: var(--pc-border); }
.us-byo-list button.us-l-tossup { background-image: none; }
.us-byo-list button.us-l-tossup::before { background-image: repeating-linear-gradient(135deg, var(--pc-text-meta) 0 2px, transparent 2px 6px); }

.us-takes { font-family: var(--pc-serif); font-size: 17px; line-height: 1.6; color: var(--pc-text-body); max-width: 720px; margin: 16px 0 24px; }

.us-watch { margin: 0 0 20px; }
.us-watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 24px; }
.us-watch-card { position: relative; display: block; padding: 8px 0 8px 16px; border-top: 1px solid var(--pc-border-light); text-decoration: none; color: var(--pc-text); }
.us-watch-card::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 10px; background: var(--us-fill); }
.us-watch-state { display: block; font-family: var(--pc-sans); font-size: 13px; font-weight: 700; }
.us-watch-margin { display: block; font-family: var(--pc-serif); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0; }
.us-watch-sub { display: block; font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-secondary); }

.us-shift { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--pc-border-light); }
.us-shift-row { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.us-shift-row input { flex: 1; }
.us-shift-end { font-family: var(--pc-sans); font-size: 12px; font-weight: 600; color: var(--pc-text-secondary); white-space: nowrap; }
.us-shift-out { font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text); margin: 10px 0 0; font-variant-numeric: tabular-nums; }

.us-vs { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* BYO: sticky summary dock + brush palette + map/list stage */
.us-byo-dock { position: sticky; top: var(--us-dock-top, 0px); z-index: 20; background: var(--pc-bg); padding: 10px 0 12px; border-bottom: 1px solid var(--pc-border); margin: 0 0 12px; }
.us-byo-verdict { font-family: var(--pc-serif); font-size: 20px; font-weight: 700; color: var(--pc-text); }
.us-byo-verdict-sub { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
/* room for the "51" label above the bar; the majority mark shows as ticks above and below the bar so it never crosses a segment's count */
.us-byo-dock .pc-seatbar-track { margin-top: 20px; }
.us-byo-dock .pc-seat-majority { background: linear-gradient(var(--pc-text) 6px, transparent 6px, transparent calc(100% - 6px), var(--pc-text) calc(100% - 6px)); }
.us-byo-palette { margin-top: 8px; }
.us-byo-palette button { min-height: 44px; }
.us-byo-palette button b { font-variant-numeric: tabular-nums; }
.us-byo-tools { margin: 8px 0 12px; }
.us-byo-stage[data-view="list"] .us-map-wrap { display: none; }
.us-byo-stage[data-view="map"] .us-byo-list { display: none; }
.us-byo-list button { min-height: 48px; }
@media (min-width: 769px) {
    .us-byo-view { display: none; }
    .us-byo-stage .us-map-wrap, .us-byo-stage .us-byo-list { display: block !important; }
    .us-byo-stage .us-byo-list { display: grid !important; }
}
@media (max-width: 600px) {
    .us-watch-grid { grid-template-columns: repeat(2, 1fr); }
    .us-byo-verdict { font-size: 18px; }
}
/* 30-day change chips: the shared green/grey are under 4.5:1 at 11px on
   this ground, so in this section the number takes the body ink and the
   direction is carried by a glyph. */
body.us-mid .us-hero-sub .pc-hero-chg { color: var(--pc-text-body); font-size: 12px; }
body.us-mid .us-hero-sub .pc-hero-chg-label { color: var(--pc-text-secondary); font-size: 10px; }
body.us-mid .us-hero-sub .pc-hero-chg.is-pos::before { content: "\25B2 "; color: var(--pc-positive); font-size: 9px; }
body.us-mid .us-hero-sub .pc-hero-chg.is-neg::before { content: "\25BC "; color: var(--pc-negative); font-size: 9px; }
body.us-mid .us-watch-card, body.us-mid .us-watch-card span, body.us-mid .us-chip { text-decoration: none; }
body.us-mid .pc-mode-btn:not(.is-active) { color: var(--pc-text-secondary); }
/* Chips keep a plain grey for toss-up so the label stays legible; the hatch is for map and bars only */
.us-lean-chip.us-l-tossup { background-image: none; background: var(--pc-border); color: var(--pc-text); }

.us-daychart { width: 100%; height: auto; display: block; margin: 8px 0 4px; }

/* Polling-error slider: blue towards Democrats, red towards Republicans */
.us-shift-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; outline: none;
    background: linear-gradient(90deg, var(--us-dem) 0%, color-mix(in srgb, var(--us-dem) 35%, var(--pc-surface)) 42%, var(--pc-border) 50%, color-mix(in srgb, var(--us-rep) 35%, var(--pc-surface)) 58%, var(--us-rep) 100%); }
.us-shift-row input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: transparent; }
.us-shift-row input[type="range"]::-moz-range-track { height: 10px; border-radius: 5px; background: transparent; }
.us-shift-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -6px; border-radius: 50%; background: var(--pc-surface); border: 2px solid var(--pc-text); box-shadow: 0 1px 3px color-mix(in srgb, var(--pc-text) 30%, transparent); cursor: pointer; }
.us-shift-row input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--pc-surface); border: 2px solid var(--pc-text); cursor: pointer; }
.us-shift-row input[type="range"]:focus-visible { outline: 2px solid var(--pc-text); outline-offset: 3px; }

/* Approval strip */
.us-seatbar .pc-seat-seg.us-ap-yes { background: var(--pc-positive); color: var(--pc-text); }
.us-seatbar .pc-seat-seg.us-ap-no { background: var(--pc-negative); color: var(--pc-on-party-dark); }

/* poll closing times: on phones the results link moves under the state name */
.us-close-mob { display: none; }
@media (max-width: 600px) {
    .us-close-table th:nth-child(6), .us-close-table td:nth-child(6) { display: none; }
    .us-close-mob { display: block; font-size: 12px; }
}
.us-odds { margin: 20px 0 0; }

/* link rows wrap on phones instead of running off the edge */
body.us-mid .pc-cta-row { flex-wrap: wrap; row-gap: 2px; }
body.us-mid .pc-cta-link { white-space: nowrap; }

/* Election night: polls-close line, results strip, result blocks (tokens only) */
.us-polls-close { font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text-body); margin: 0 0 16px; }
.us-polls-close a { color: var(--pc-text); }
.us-results-strip { margin: 0 0 24px; }
.us-results-strip .pc-seatbar-wrap { margin-bottom: 20px; }
.us-watch-card .us-watch-state { color: var(--pc-text); text-decoration: none; }
.us-watch-card a.us-watch-state:hover { text-decoration: underline; }
.us-watch-res { display: block; font-family: var(--pc-sans); font-size: 14px; font-weight: 600; color: var(--pc-text); margin: 4px 0 2px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.us-watch-res a { color: var(--pc-text); }
.us-watch-src { display: block; font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-secondary); margin: 0 0 4px; line-height: 1.35; }
.us-result .us-res-table td, .us-result .us-res-table th { white-space: nowrap; }
.us-result .us-res-table td:first-child { white-space: normal; }
.us-compare { font-family: var(--pc-sans); font-size: 15px; font-weight: 600; color: var(--pc-text); margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.us-res-rows td.us-res-cell { white-space: normal; min-width: 200px; }
.us-res-rows td.us-res-cell .us-basis a { color: var(--pc-text-secondary); }
@media (max-width: 600px) {
    .us-res-rows th:nth-child(2), .us-res-rows td:nth-child(2),
    .us-res-rows th:nth-child(5), .us-res-rows td:nth-child(5) { display: none; }
    .us-res-rows td, .us-res-rows th { white-space: normal; }
    .us-res-rows td.us-res-cell { min-width: 150px; }
}

/* Seat bars sit on the page, not in a box */
body.us-mid .pc-seatbar-wrap { border: 0; padding: 0; }

/* Latest polls list (hub): reuses .us-party-dot and .us-lean-chip */
.us-lp-nw { white-space: nowrap; }
.us-lp-cand { display: inline-block; white-space: nowrap; margin-right: 10px; }
.us-poll-table tr.is-excluded .us-lean-chip { opacity: 0.5; }
.us-more-row { flex-wrap: wrap; gap: 4px 18px; }
.us-more-state .pc-help.us-more-help { margin: 14px 0 0; }

/* Early voting: 2026 vs 2024 bars for states that publish statewide statements only */
.us-ev-bars { margin: 8px 0 20px; display: grid; gap: 10px; }
.us-ev-bar-row { display: grid; grid-template-columns: 44px 1fr minmax(150px, auto); gap: 12px; align-items: center; font-family: var(--pc-sans); }
.us-ev-bar-lab { font-size: 13px; font-weight: 700; color: var(--pc-text-secondary); }
.us-ev-bar-track { display: block; height: 22px; }
.us-ev-bar { display: block; height: 100%; }
.us-ev-bar.is-2026 { background: var(--pc-text); }
.us-ev-bar.is-2024 { background: var(--pc-border); }
.us-ev-bar-val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pc-text); }
.us-ev-bar-val small { font-size: 12px; font-weight: 400; color: var(--pc-text-secondary); }
@media (max-width: 600px) { .us-ev-bar-row { grid-template-columns: 38px 1fr; } .us-ev-bar-val { grid-column: 2; } }

/* Results map (hub, results mode): AP calls in party colour, counting hatched, leads never shown */
.us-x-call-d { --us-fill: var(--us-dem); }
.us-x-call-r { --us-fill: var(--us-rep); }
.us-x-call-i { --us-fill: var(--us-ind); }
.us-x-wait { --us-fill: var(--pc-border); }
.us-x-counting { --us-fill: var(--pc-border); }
.us-map-legend i.us-x-counting, .us-chip i.us-x-counting { background-image: repeating-linear-gradient(135deg, var(--pc-text-meta) 0 2px, transparent 2px 6px); }
.us-map .us-hatch rect { fill: var(--pc-border); }
.us-map .us-hatch line { stroke: var(--pc-text-meta); stroke-width: 2.5; }
.us-count-label { margin-top: 16px; }
.gbp-chart-container.us-count-chart { height: 240px; }

/* ---- Results mode only (body.us-res-on): live banner, big toplines, result hero ---- */
.us-live { background: var(--pc-text); color: var(--pc-on-ink); font-family: var(--pc-sans); }
.us-live-in { max-width: 960px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 14px; line-height: 1.35; }
.us-live-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.us-live-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--pc-negative); flex: none; }
.us-live.is-live .us-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pc-negative); animation: us-live-pulse 1.6s ease-out infinite; }
@keyframes us-live-pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .us-live.is-live .us-live-dot::after { animation: none; display: none; } }
.us-live-title { font-family: var(--pc-serif); font-size: 20px; font-weight: 700; }
.us-live-when { font-weight: 600; font-variant-numeric: tabular-nums; }
.us-live-every { opacity: 0.8; }
body.dark-mode .us-live { background: var(--pc-bg); color: var(--pc-text); border-bottom: 2px solid var(--pc-text); }

.us-top { margin: 0 0 8px; }
.us-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.us-top-block { min-width: 0; border-top: 3px solid var(--pc-text); padding-top: 10px; }
.us-top-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.us-top-office { font-family: var(--pc-serif); font-size: 22px; font-weight: 700; color: var(--pc-text); margin: 0; }
.us-top-need { font-family: var(--pc-sans); font-size: 13px; font-weight: 700; color: var(--pc-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.us-top-nums { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; }
.us-top-n { display: flex; flex-direction: column; min-width: 0; }
.us-top-n:last-child { align-items: flex-end; text-align: right; }
.us-top-big { font-family: var(--pc-serif); font-size: 96px; font-weight: 700; line-height: 1; color: var(--pc-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.us-top-who { font-family: var(--pc-sans); font-size: 14px; font-weight: 700; color: var(--pc-text); margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
.us-top-who::before { content: ""; width: 12px; height: 12px; background: var(--party-color); display: inline-block; }
.us-top-track { margin-top: 26px; }
.us-top-track .pc-seatbar { height: 32px; }
.us-top-track .pc-seat-seg { font-size: 13px; font-weight: 700; }
.us-top-sub { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin: 8px 0 0; }
.us-top-sub b { color: var(--pc-text); }
.us-top-line { font-family: var(--pc-sans); font-size: 13px; font-weight: 600; color: var(--pc-text-body); margin: 16px 0 0; }
.us-seatbar .pc-seat-seg.us-x-counting, .us-seat-legend .pc-swatch.us-x-counting { background-image: repeating-linear-gradient(135deg, var(--pc-text-meta) 0 2px, transparent 2px 6px); }

.us-keys { margin: 32px 0 0; padding-top: 10px; border-top: 3px solid var(--pc-text); }
.us-key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 48px; margin-top: 12px; }
.us-key { padding: 20px 0 24px; border-bottom: 1px solid var(--pc-border); min-width: 0; }
.us-key-state { display: block; font-family: var(--pc-sans); font-size: 15px; font-weight: 800; color: var(--pc-text); text-decoration: none; margin: 0 0 10px; }
body.us-mid .us-key-state { text-decoration: none; }
.us-key-state:hover { text-decoration: underline; }
.us-key-c { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 8px; margin: 2px 0 10px; }
.us-key-name { font-family: var(--pc-sans); font-size: 14px; font-weight: 600; color: var(--pc-text-secondary); }
.us-key-pct { font-family: var(--pc-serif); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--pc-text-secondary); font-variant-numeric: tabular-nums; }
.us-key-c.is-lead .us-key-name, .us-key-c.is-lead .us-key-pct { color: var(--pc-text); }
.us-key-c.is-lead .us-key-pct { font-size: 34px; }
.us-key-bar { flex: 1 0 100%; height: 6px; background: var(--pc-border-light); display: block; }
.us-key-bar i { display: block; height: 100%; background: var(--party-color); }
.us-key-counted { font-family: var(--pc-sans); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--pc-text-secondary); font-variant-numeric: tabular-nums; margin: 8px 0 10px; }
.us-key .us-ap-tag { margin-top: 0; }
.us-key-wait { font-family: var(--pc-sans); font-size: 16px; font-weight: 600; color: var(--pc-text); margin: 4px 0; }
.us-key-wait a { color: var(--pc-text); }
.us-key-sub { display: block; font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin-top: 10px; }
.us-key-more { font-family: var(--pc-sans); font-size: 14px; font-weight: 600; margin: 12px 0 0; }
.us-key-more a { color: var(--pc-text); }
.us-ap-tag { display: inline-block; font-family: var(--pc-sans); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--pc-on-ink); background: var(--pc-text); padding: 4px 8px; margin: 6px 0 0; text-decoration: none; }
body.us-mid .us-ap-tag { text-decoration: none; color: var(--pc-on-ink); }
.us-ap-tag:hover { text-decoration: underline; }

.us-masthead-links { margin-top: 24px; }
.us-pre { margin: 32px 0 0; border-top: 3px solid var(--pc-text); }
.us-pre-sum { font-family: var(--pc-serif); font-size: 22px; font-weight: 700; color: var(--pc-text); cursor: pointer; list-style: none; padding: 12px 0; }
.us-pre-sum::-webkit-details-marker { display: none; }
.us-pre-sum::before { content: "+"; display: inline-block; width: 22px; font-family: var(--pc-sans); color: var(--pc-text-secondary); }
.us-pre[open] > .us-pre-sum::before { content: "\2212"; }

/* race page: the count is the hero */
.us-res-h { font-family: var(--pc-serif); font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--pc-text); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.us-ap-call { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin: 0 0 12px; }
.us-ap-call .us-ap-tag { font-size: 15px; padding: 6px 10px; margin: 0 2px 0 0; }
.us-ap-cr { display: block; margin-top: 6px; font-size: 12px; }
.us-rc-list { display: grid; gap: 18px; margin: 16px 0 12px; max-width: 760px; }
.us-rc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.us-rc-name { font-family: var(--pc-sans); font-size: 18px; font-weight: 700; color: var(--pc-text); min-width: 0; }
.us-rc-party { font-size: 13px; font-weight: 700; color: var(--pc-text-secondary); }
.us-rc-pct { font-family: var(--pc-serif); font-size: 56px; font-weight: 700; line-height: 1; color: var(--pc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.us-rc:not(.is-lead) .us-rc-pct { color: var(--pc-text-body); }
.us-rc-bar { height: 14px; background: var(--pc-border-light); margin-top: 6px; }
.us-rc-bar span { display: block; height: 100%; background: var(--party-color); }
.us-rc-votes { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.us-rc.is-minor .us-rc-name { font-size: 14px; }
.us-rc.is-minor .us-rc-pct { font-size: 24px; }
.us-rc.is-minor .us-rc-bar { height: 6px; }
.us-res-src { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-secondary); line-height: 1.5; margin: 8px 0 0; }
.us-res-src a { color: var(--pc-text-secondary); }
.us-res-wait { font-family: var(--pc-sans); font-size: 20px; font-weight: 600; color: var(--pc-text); line-height: 1.4; }
.us-res-wait a { color: var(--pc-text); }
body.us-res-on .us-race-hero .us-hero-num { font-size: 24px; }

@media (max-width: 768px) {
    .us-top-grid { grid-template-columns: 1fr; }
    .us-top-big { font-size: 72px; }
}
@media (max-width: 600px) {
    .us-live-in { padding: 10px 16px; gap: 2px 12px; font-size: 13px; }
    .us-live-title { font-size: 18px; }
    .us-top-big { font-size: 64px; }
    .us-key-grid { grid-template-columns: 1fr 1fr; gap: 0 16px; }
    .us-key-pct { font-size: 22px; }
    .us-key-c.is-lead .us-key-pct { font-size: 28px; }
    .us-key-counted { font-size: 13px; }
    .us-res-h { font-size: 28px; }
    .us-rc-name { font-size: 16px; }
    .us-rc-pct { font-size: 44px; }
}
/* majority mark as ticks above and below the bar, so it never crosses a segment's count (as the BYO dock) */
.us-top-track .pc-seat-majority { background: linear-gradient(var(--pc-text) 7px, transparent 7px, transparent calc(100% - 7px), var(--pc-text) calc(100% - 7px)); }
/* results page: room between the topline and the count-based section below */
.us-top + .pc-section { margin-top: 32px; }
body.us-res-on .pc-section-title + .pc-seatbar-track { margin-top: 24px; }
.us-gain { display: block; font-family: var(--pc-sans); font-size: 13px; font-weight: 700; color: var(--pc-text); margin: 8px 0 0; }