/* The results kit (owner, 4 Nov 2026: the design sweep and the map brief, global/DESIGN_SWEEP_2026-11-04.md and
   global/DESIGN_BRIEF_MAPS_2026-11-04.md). One way to show a result everywhere:
   - party fills in two steps plus solid: a card tint (--rk-card, about 8%), leading (--rk-lead, about 20%), won (solid, white text, tick);
   - hatching (45 degrees, 2px stripes) for a seat that changed hands, the same everywhere;
   - the balance-of-power bar (.bop), the hover/tap card (.hc), swing cards (.swc), swing dials (.swm), the ratings strip (.hexs),
     state-shape call cards (.scard) and the explorable map (.xmap).
   Square corners throughout (owner: rectangles across the site). Sizes from the type tokens in base.css. */

:root {
    --rk-d: #2E6DB4; --rk-r: #C8312F; --rk-i: #7D5BA6; --rk-o: #8a8f98; --rk-none: #cfd6df;
    --rk-stage: #121417; --rk-stage-2: #1c1f24; --rk-stage-line: #34383f; --rk-stage-ink: #eceef1; --rk-stage-muted: #a3a8b0;   /* neutral charcoal, as the forecast maps (owner, 9 Nov 2026: the navy was "an awful looking blue background") */
}
.rk-d { --pc: var(--rk-d); } .rk-r { --pc: var(--rk-r); } .rk-i { --pc: var(--rk-i); } .rk-o { --pc: var(--rk-o); }
.rk-card { background: color-mix(in srgb, var(--pc) 8%, var(--surface, #fff)); }
.rk-lead { background: color-mix(in srgb, var(--pc) 20%, var(--surface, #fff)); }
.rk-won { background: var(--pc); color: #fff; }
.rk-won::after { content: " \2713"; font-weight: 700; }
.rk-flip { background: repeating-linear-gradient(45deg, var(--pc) 0 2px, color-mix(in srgb, var(--pc) 35%, var(--surface, #fff)) 2px 5px); }
.rk-upd { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.rk-upd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d93a3a; flex: none; }

/* ---------- balance of power ---------- */
.bop { --bop-h: 36px; margin: 6px 0 14px; font-family: var(--font-ui); }
.bop__head, .bop__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bop__head { margin-bottom: 6px; font: 700 var(--fs-sm)/1.2 var(--font-ui); }
.bop__n--d { color: var(--rk-d); } .bop__n--r { color: var(--rk-r); }
.bop__need { font: 600 var(--fs-xs)/1.2 var(--font-ui); color: var(--muted); }
.bop__bar { position: relative; display: flex; height: var(--bop-h); background: var(--rk-none); overflow: visible; }
.bop__s { display: block; height: 100%; flex: none; }
.bop__s.is-hold-d { background: color-mix(in srgb, var(--rk-d) 45%, var(--surface, #fff)); }
.bop__s.is-won-d { background: var(--rk-d); }
.bop__s.is-lead-d { background: color-mix(in srgb, var(--rk-d) 22%, var(--surface, #fff)); }
.bop__s.is-open { background: var(--rk-none); flex: 1 1 auto; }
.bop__s.is-lead-r { background: color-mix(in srgb, var(--rk-r) 22%, var(--surface, #fff)); }
.bop__s.is-won-r { background: var(--rk-r); }
.bop__s.is-hold-r { background: color-mix(in srgb, var(--rk-r) 45%, var(--surface, #fff)); }
.bop__c { position: absolute; top: 50%; transform: translateY(-50%); font: 700 var(--fs-xl)/1 var(--font-num, var(--font-ui)); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.bop__c--d { left: 10px; } .bop__c--r { right: 10px; }
.bop__tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); }
.bop__foot { margin-top: 6px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.bop__foot span:nth-child(2) { font-weight: 700; color: var(--ink); }
.bop__note { margin-top: 2px; font: 400 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
.bop--dark { --surface: var(--rk-stage-2); --ink: var(--rk-stage-ink); --muted: var(--rk-stage-muted); --rk-none: #3b3f46; }
.bop--dark .bop__tick { background: #fff; }

/* ---------- the hover/tap card ---------- */
.hc { width: 300px; max-width: 100%; background: #fff; color: #121417; border-top: 3px solid #121417; box-shadow: 0 6px 24px rgba(0,0,0,.28); padding: 10px 12px 10px; font: 400 var(--fs-sm)/1.3 var(--font-ui); }
.hc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hc__head b { font: 700 var(--fs-md)/1.2 var(--font-ui); }
.hc__chip { flex: none; padding: 2px 6px; font: 700 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: .04em; color: #fff; background: var(--rk-o); }
.hc__chip--D { background: var(--rk-d); } .hc__chip--R { background: var(--rk-r); } .hc__chip--I { background: var(--rk-i); }
.hc__sub { margin-top: 2px; font: 400 var(--fs-xs)/1.3 var(--font-ui); color: #5b6370; }
.hc__t { width: 100%; margin: 8px 0 4px; border-collapse: collapse; font: 500 var(--fs-sm)/1.2 var(--font-ui); }
.hc__t td { padding: 0; height: 28px; border-bottom: 1px solid #e6e8ec; vertical-align: middle; }
.hc__t .num { text-align: right; padding-left: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc__n { position: relative; border-left: 3px solid var(--pc); }
.hc__n i { position: absolute; left: 0; top: 4px; bottom: 4px; background: color-mix(in srgb, var(--pc) 16%, #fff); }
.hc__n span { position: relative; display: block; padding-left: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.hc__p { width: 18px; padding-left: 6px !important; font: 600 var(--fs-2xs)/1 var(--font-ui); color: #5b6370; }
.hc__v { color: #5b6370; font-weight: 400; }
.hc__t tr.is-win td { background: var(--pc); color: #fff; font-weight: 700; }
.hc__t tr.is-win .hc__n i { display: none; }
.hc__t tr.is-win .hc__p, .hc__t tr.is-win .hc__v { color: #fff; }
.hc__tick { font-weight: 800; }
.hc__in { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 var(--fs-xs)/1.2 var(--font-ui); color: #5b6370; }
.hc__in i { flex: 1; height: 4px; background: #e6e8ec; }
.hc__in b { display: block; height: 100%; background: #121417; }
.hc__foot { margin-top: 6px; font: 400 var(--fs-2xs)/1.4 var(--font-ui); color: #5b6370; }
.hc__foot a { color: inherit; font-weight: 600; }

/* ---------- the explorable map ---------- */
.xmap { position: relative; display: grid; grid-template-columns: 100%; width: 100vw; margin: 18px 0 24px calc(50% - 50vw); background: var(--rk-stage); color: var(--rk-stage-ink); font-family: var(--font-ui); }
.xmap__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px max(16px, calc(50vw - 640px)); border-bottom: 1px solid var(--rk-stage-line); }
.xmap__tabs, .xmap__modes { display: flex; gap: 0; }
.xmap__tabs button, .xmap__modes button { min-height: 36px; padding: 0 14px; border: 1px solid var(--rk-stage-line); margin-left: -1px; background: none; color: var(--rk-stage-muted); font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
.xmap__tabs button[aria-pressed=true] { background: #fff; color: #121417; border-color: #fff; }
.xmap__modes { margin-left: auto; }
.xmap__modes button { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; }
.xmap__modes button[aria-pressed=true] { color: #fff; border-color: #fff; position: relative; z-index: 1; }
.xmap__modes svg { width: 22px; height: 14px; display: block; }
.xmap__crumb { font: 700 var(--fs-md)/1.2 var(--font-ui); color: #fff; }
.xmap__stage { position: relative; height: min(78vh, 860px); min-height: 520px; overflow: hidden; background: radial-gradient(ellipse at 40% 45%, #23272d 0%, var(--rk-stage) 70%); touch-action: none; }
.xmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.xmap .st { stroke: none; cursor: pointer; transition: opacity .6s ease, fill .4s ease; outline: none; }
.xmap .st:focus-visible { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.xmap .st-line { fill: none; stroke: var(--rk-stage); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.xmap svg.is-focus .st:not(.on) { opacity: .32; }
.xmap svg.is-focus .xm-outline .st-line { stroke: #0a1020; }
.xmap .xm-outline { pointer-events: none; }
.xmap .ct, .xmap .ds { stroke: rgba(255,255,255,.55); stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; }
.xmap .ds { stroke: rgba(18,20,23,.9); }
.xmap svg.is-focus .ds:not(.off) { stroke: rgba(255,255,255,.6); }
.xmap .xm-detail { opacity: 1; }

@keyframes xm-in { from { opacity: 0; } to { opacity: 1; } }
.xmap .hv, .xmap .hl { stroke: #fff; stroke-width: 2; }
.xmap .sel { stroke: #fff; stroke-width: 2.6; }
.xmap .xm-labels { pointer-events: none; }
.xmap .xm-lab { fill: #fff; stroke: var(--rk-stage); paint-order: stroke; font-family: var(--font-ui); font-weight: 600; text-anchor: start; dominant-baseline: middle; transform-box: fill-box; }
.xmap .xm-lab { translate: .9em 0; }
.xmap .xm-dot { fill: #fff; }
.xmap .xm-arrows { pointer-events: none; }
.xmap__titlebar { grid-row: 1; grid-column: 1; }
.xmap__bar { grid-row: 2; grid-column: 1; }
.xmap__stage { grid-row: 3; grid-column: 1; }
.xmap__note { grid-row: 5; grid-column: 1; }
/* the panel shares the stage's grid cell, floating over its right side; on a phone it drops below the map as a sheet */
.xmap__panel { grid-row: 3; grid-column: 1; position: relative; z-index: 3; justify-self: end; align-self: start; margin: 16px max(16px, calc(50vw - 640px)) 16px 0; max-height: min(calc(max(520px, min(78vh, 860px)) - 32px), calc(100vh - 48px)); box-sizing: border-box; width: min(380px, 34%); overflow: auto; background: var(--rk-stage-2); border: 1px solid var(--rk-stage-line); padding: 14px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35); overscroll-behavior: contain; }
.xmap__panel .hc { width: auto; margin: 0 0 12px; box-shadow: none; }
.xm-kick { margin: 0 0 4px; font: 600 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--rk-stage-muted); }
.xm-h { margin: 16px 0 8px; font: 700 var(--fs-sm)/1.3 var(--font-ui); color: #fff; }
.xm-p, .xm-hint { font: 400 var(--fs-sm)/1.4 var(--font-ui); color: var(--rk-stage-muted); margin: 8px 0; }
.xm-hint { font-size: var(--fs-xs); }
.xm-list { list-style: none; margin: 0; padding: 0; }
.xm-list button { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; width: 100%; min-height: 34px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--rk-stage-line); background: none; color: var(--rk-stage-ink); font: 500 var(--fs-sm)/1.2 var(--font-ui); text-align: left; cursor: pointer; }
.xm-list button:hover span { text-decoration: underline; }
.xm-list i { width: 10px; height: 10px; }
.xm-list em { font-style: normal; font-size: var(--fs-xs); color: var(--rk-stage-muted); text-align: right; }
.xm-dt { width: 100%; border-collapse: collapse; font: 400 var(--fs-xs)/1.2 var(--font-ui); color: var(--rk-stage-ink); }
.xm-dt th { text-align: left; font-weight: 600; color: var(--rk-stage-muted); padding: 4px 4px 6px 0; border-bottom: 1px solid var(--rk-stage-line); }
.xm-dt td { padding: 0 4px 0 0; height: 30px; border-bottom: 1px solid var(--rk-stage-line); white-space: nowrap; }
.xm-dt .num { text-align: right; font-variant-numeric: tabular-nums; }
.xm-dt tr[data-row] { cursor: pointer; }
.xm-dt tr[data-row]:hover td, .xm-dt tr.sel td { background: rgba(255,255,255,.07); }
.xm-mini { display: inline-block; width: 28px; height: 4px; margin-right: 6px; background: var(--rk-stage-line); vertical-align: middle; }
.xm-mini b { display: block; height: 100%; background: #fff; }
.xm-dot2 { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.xmap__ctl { position: absolute; left: max(16px, calc(50vw - 640px)); top: 16px; display: flex; gap: 0; z-index: 2; }
.xmap__ctl button { min-height: 34px; padding: 0 12px; margin-right: -1px; border: 1px solid var(--rk-stage-line); background: var(--rk-stage-2); color: #fff; font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
.xmap:not(.is-focus) [data-xm-back], .xmap:not(.is-focus) [data-xm-reset] { display: none; }
.xmap__out { position: absolute; right: calc(max(16px, calc(50vw - 640px)) + min(380px, 34%) + 12px); bottom: 16px; width: 40px; height: 40px; border: 1px solid var(--rk-stage-line); background: var(--rk-stage-2); color: #fff; font: 400 var(--fs-xl)/1 var(--font-ui); cursor: pointer; z-index: 2; border-radius: 0; }
.xmap:not(.is-focus) .xmap__out { display: none; }
.xmap__legend { position: absolute; left: max(16px, calc(50vw - 640px)); bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; max-width: min(560px, 56%); padding: 8px 10px; background: rgba(18,20,23,.85); font: 500 var(--fs-xs)/1.2 var(--font-ui); color: var(--rk-stage-ink); z-index: 2; }
.xm-sw { display: inline-flex; align-items: center; gap: 5px; }
.xm-sw i { width: 14px; height: 10px; display: inline-block; }
.xm-k { color: var(--rk-stage-muted); }
.xm-grad { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 2px 30px; }
.xm-grad i { grid-column: 1 / -1; height: 8px; width: 220px; background: linear-gradient(to left, #c93135 0% 25%, #8955c3 50%, #1375b7 75% 100%); }
.xm-grad--i i { background: linear-gradient(to left, #c93135 0% 25%, #bf5b22 50%, #cea44b 75% 100%) !important; }
.xm-grad span:nth-child(3) { text-align: center; } .xm-grad span:last-child { text-align: right; }
.xmap__tip { position: absolute; z-index: 5; pointer-events: none; }
.xmap__note { padding: 8px max(16px, calc(50vw - 640px)) 12px; font: 400 var(--fs-xs)/1.4 var(--font-ui); color: var(--rk-stage-muted); border-top: 1px solid var(--rk-stage-line); }
.xmap noscript p { padding: 16px; }
@media (max-width: 759px) {
    .xmap__bar { padding: 10px 16px; gap: 8px; }
    .xmap__tabs { width: 100%; } .xmap__tabs button { flex: 1; }
    .xmap__modes { margin-left: 0; width: 100%; overflow-x: auto; } .xmap__modes button { flex: 1 0 auto; padding: 0 8px; font-size: var(--fs-xs); }
    .xmap__stage { height: 56vh; min-height: 340px; }
    .xmap__panel { grid-row: 4; justify-self: stretch; margin: 0; width: auto; max-height: none; border: 0; border-top: 3px solid #fff; box-shadow: none; padding: 14px 16px 18px; }
    .xmap__panel::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 10px; background: var(--rk-stage-line); }
    .xmap__out { right: 12px; bottom: 12px; }
    .xmap__legend { left: 8px; bottom: 8px; max-width: calc(100% - 70px); font-size: var(--fs-2xs); padding: 6px 8px; }
    .xmap__ctl { left: 8px; top: 8px; }
    .xm-grad i { width: 150px; }
    .hc { width: 260px; }
}

/* ---------- swing cards (CNN): 2024 to now on a fixed axis ---------- */
.swc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0 24px; }
.swc { padding: 10px 0 12px; border-top: 2px solid var(--ink); }
.swc__head { display: flex; justify-content: space-between; gap: 8px; font: 700 var(--fs-sm)/1.2 var(--font-ui); }
.swc__head a { color: var(--ink); text-decoration: none; } .swc__head a:hover { text-decoration: underline; }
.swc__head em { font-style: normal; font-weight: 700; color: var(--pc); white-space: nowrap; }
.swc__ax { position: relative; height: 34px; margin: 10px 0 4px; }
.swc__ax::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--hair); }
.swc__ax::after { content: ""; position: absolute; left: 50%; top: 8px; height: 17px; width: 1px; background: var(--muted); }
.swc__then { position: absolute; top: 9px; width: 2px; height: 15px; margin-left: -1px; background: var(--muted); }
.swc__now { position: absolute; top: 10px; width: 12px; height: 12px; margin-left: -6px; background: var(--pc); }
.swc__arrow { position: absolute; top: 15px; height: 3px; background: var(--pc); }
.swc__arrow::after { content: ""; position: absolute; top: -4px; border: 5px solid transparent; }
.swc__arrow.to-l::after { left: -8px; border-right-color: var(--pc); border-left: 0; }
.swc__arrow.to-r::after { right: -8px; border-left-color: var(--pc); border-right: 0; }
.swc__ends, .swc__foot { display: flex; justify-content: space-between; font: 500 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
.swc__foot { margin-top: 2px; font-size: var(--fs-xs); }
.swc__foot b { color: var(--ink); }

/* ---------- swing dials by kind of place (Washington Post) ---------- */
.swm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px 24px; }
.swm { text-align: center; padding-top: 10px; border-top: 2px solid var(--ink); }
.swm h4 { margin: 0 0 2px; font: 700 var(--fs-sm)/1.2 var(--font-ui); text-align: left; }
.swm p { margin: 0; font: 400 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); text-align: left; }
.swm svg { display: block; width: 100%; max-width: 220px; margin: 8px auto 0; overflow: visible; }
.swm__v { font: 700 var(--fs-xl)/1 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; }
.swm__n { margin-top: 2px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); text-align: center !important; }

/* ---------- ratings against results (Guardian hexes) ---------- */
.hexs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 6px; margin: 10px 0 6px; }
.hexs__col { display: flex; flex-direction: column; align-items: center; }
.hexs__col h4 { margin: 0 0 8px; padding-bottom: 6px; width: 100%; border-bottom: 2px solid var(--pc, var(--ink)); font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-align: center; color: var(--ink); letter-spacing: .02em; }
.hexs__cells { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.hexs__c { position: relative; display: grid; place-items: center; width: 34px; height: 38px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--pc); color: #fff; font: 700 var(--fs-2xs)/1 var(--font-ui); text-decoration: none; }
.hexs__c.is-lead { background: color-mix(in srgb, var(--pc) 22%, var(--surface, #fff)); color: var(--ink); }
.hexs__c.is-flip { background: repeating-linear-gradient(45deg, var(--pc) 0 3px, color-mix(in srgb, var(--pc) 40%, var(--surface, #fff)) 3px 6px); color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.hexs__c.is-none { background: var(--rk-none); color: var(--ink); }
.hexs__key { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.hexs__key i { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
@media (max-width: 759px) { .hexs { grid-template-columns: repeat(7, minmax(42px, 1fr)); overflow-x: auto; } .hexs__c { width: 26px; height: 30px; font-size: var(--fs-2xs); } }

/* ---------- state-shape call cards (ABC) ---------- */
.scard-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px 16px; }
.scard { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; min-height: 60px; padding: 8px 10px; background: color-mix(in srgb, var(--pc) 8%, var(--surface, #fff)); border-left: 3px solid var(--pc); color: var(--ink); text-decoration: none; }
.scard:hover .scard__name { text-decoration: underline; }
.scard svg { width: 44px; height: 44px; display: block; }
.scard svg path { fill: var(--pc); }
.scard__place { font: 500 var(--fs-sm)/1.2 var(--font-ui); }
.scard__place small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.scard__who { margin-top: 3px; font: 400 var(--fs-xs)/1.2 var(--font-ui); color: var(--muted); }
.scard__name { font: 700 var(--fs-sm)/1.2 var(--font-ui); color: var(--ink); }
.scard__tag { align-self: start; padding: 2px 6px; background: var(--pc); color: #fff; font: 700 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: .04em; white-space: nowrap; }
.scard__tag.is-flip { background: repeating-linear-gradient(45deg, var(--pc) 0 2px, color-mix(in srgb, var(--pc) 55%, #fff) 2px 4px); text-shadow: 0 0 2px rgba(0,0,0,.6); }
.scard__time { display: block; margin-top: 4px; font: 400 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); text-align: right; }

/* ---------- the chambers above the map ---------- */
.rk-chambers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.rk-h { margin: 18px 0 6px; font: 700 var(--fs-md)/1.2 var(--font-ui); }
.rk-h .small { font-weight: 400; margin-left: 6px; }
@media (max-width: 899px) { .rk-chambers { grid-template-columns: 1fr; } }

/* ---------- every map's hover card looks the same (NYT card: white, a black rule on top, no rounding) ---------- */
html .map-tooltip, html .geomap-tip, html .wtip, html .ep-tip { background: #fff; color: #121417; border: 0; border-top: 3px solid #121417; border-radius: 0; box-shadow: 0 6px 24px rgba(0,0,0,.22); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 9px 12px; font: 400 var(--fs-sm)/1.35 var(--font-ui); }
html .map-tooltip strong, html .geomap-tip strong, html .wtip strong, html .ep-tip-t { font: 700 var(--fs-md)/1.25 var(--font-ui); color: #121417; }
html .geomap-tip .muted, html .map-tooltip .muted { color: #5b6370; }

/* ---------- the country maps full screen (geomap.js): dark stage, the map filling it, the key and detail floating right ---------- */
html.geomap-cine-open { overflow: hidden; }
.geomap--cine { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; padding: 12px 16px 10px; background: radial-gradient(ellipse at 40% 45%, #23272d 0%, var(--rk-stage) 70%); color: var(--rk-stage-ink); --surface: var(--rk-stage); --surface-2: #3b3f46; --ink: var(--rk-stage-ink); --ink-2: var(--rk-stage-ink); --muted: var(--rk-stage-muted); --line: var(--rk-stage-line); }
.geomap--cine .geomap-controls { flex: none; }
:is(.geomap--stage, .geomap--cine) .geomap-controls select, :is(.geomap--stage, .geomap--cine) .geomap-controls .seg button { background: var(--rk-stage-2); color: #fff; border-color: var(--rk-stage-line); }
.geomap--cine .geomap-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(360px, 32%); gap: 0 16px; align-items: stretch; }
.geomap--cine .geomap-wrap { min-height: 0; height: 100%; }
.geomap--cine .geomap-wrap svg.geomap { width: 100%; height: 100%; max-height: none; min-height: 0; }
:is(.geomap--stage, .geomap--cine) .geomap-side { position: static; order: 0; display: grid; align-content: start; gap: 16px; overflow: auto; padding: 14px 16px; background: var(--rk-stage-2); border: 1px solid var(--rk-stage-line); }
:is(.geomap--stage, .geomap--cine) .geomap-detail { display: block; }
:is(.geomap--stage, .geomap--cine) .geomap .seat { stroke: var(--rk-stage); transition: fill .3s ease, opacity .6s ease; }
:is(.geomap--stage, .geomap--cine) .geomap .seat.hot, :is(.geomap--stage, .geomap--cine) .geomap .seat.on { stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
:is(.geomap--stage, .geomap--cine) .geomap .outline { stroke: #fff; stroke-opacity: .5; }
:is(.geomap--stage, .geomap--cine) svg.is-focus .seat:not(.on) { opacity: .3; }
:is(.geomap--stage, .geomap--cine) .geomap-credit { flex: none; margin: 6px 0 0; color: var(--rk-stage-muted); }
:is(.geomap--stage, .geomap--cine) .geomap-tip { display: block; }
.geomap-cine-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--line, #ccc); background: var(--surface, #fff); color: var(--ink); font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
.geomap-cine-btn::before { content: "\2922  "; }
.geomap--cine .geomap-cine-btn { margin-left: auto; background: #fff; color: #121417; border-color: #fff; }
.geomap--cine .geomap-cine-btn::before { content: "\2715  "; }
@media (max-width: 760px) {
    .geomap--cine { padding: 8px; }
    .geomap--cine .geomap-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .geomap--cine .geomap-side { order: 1; max-height: 34vh; }
}
:is(.geomap--stage, .geomap--cine) { --fig-bg: transparent; }
:is(.geomap--stage, .geomap--cine) .geomap-wrap { background: transparent; }
:is(.geomap--stage, .geomap--cine) .geomap-detail { background: #fff; color: #121417; border-top: 3px solid #121417; padding: 10px 12px; --ink: #121417; --muted: #5b6370; }
:is(.geomap--stage, .geomap--cine) .geomap-detail__hint { color: #5b6370; }
:is(.geomap--stage, .geomap--cine) .geomap-zoom button { background: var(--rk-stage-2); color: #fff; border-color: var(--rk-stage-line); border-radius: 0; }
:is(.geomap--stage, .geomap--cine) .geomap .land { fill: #26314a; stroke: var(--rk-stage); }
:is(.geomap--stage, .geomap--cine) .geomap .frame { stroke: var(--rk-stage-line); }

/* the map's own tables keep the dark panel's colours over the site's table styles */
.xmap .xm-dt tr td, .xmap .xm-dt tr th { background: transparent; color: var(--rk-stage-ink); }
.xmap .xm-dt tr th { color: var(--rk-stage-muted); }
.xmap .xm-dt tr[data-row]:hover td, .xmap .xm-dt tr.sel td { background: rgba(255,255,255,.08); }
.xmap .hc__t tr td { background: transparent; color: #121417; }
.xmap .hc__t tr.is-win td { background: var(--pc); color: #fff; }
/* full width without a sideways scroll: 100vw counts the scroll bar */
body:has(.xmap) { overflow-x: clip; }
.rk-more { margin: 10px 0 0; }
.rk-more > summary { cursor: pointer; font: 600 var(--fs-sm)/1.3 var(--font-ui); padding: 8px 0; }
.rk-more .scard-list { margin-top: 6px; }

/* ---------- every country map on the stage (geomap.js; owner, 4 Nov 2026: "applied to all the other map areas ... forecasts, everything") ---------- */
.geomap--stage { position: relative; margin: 12px 0 20px; padding: 12px 14px 10px; background: radial-gradient(ellipse at 40% 45%, #23272d 0%, var(--rk-stage) 70%); color: var(--rk-stage-ink); --surface: var(--rk-stage); --surface-2: #3b3f46; --ink: var(--rk-stage-ink); --ink-2: var(--rk-stage-ink); --muted: var(--rk-stage-muted); --line: var(--rk-stage-line); --hair: var(--rk-stage-line); --b1: var(--rk-stage-2); }
.geomap--bleed { width: 100vw; margin-left: calc(50% - 50vw); padding: 14px max(16px, calc(50vw - 640px)) 12px; }
body:has(.geomap--bleed) { overflow-x: clip; }
.geomap--stage .geomap-controls { margin-bottom: 10px; }
.geomap--stage .geomap-legend, .geomap--stage .geomap-leg__n, .geomap--stage .geomap-legend .geomap-leg b { color: var(--rk-stage-ink); }
.geomap--stage .geomap-side { padding: 14px 16px; background: var(--rk-stage-2); border: 1px solid var(--rk-stage-line); }
.geomap--stage svg.is-focus .seat:not(.on) { opacity: .3; }
.geomap--stage .geomap .seat.sel, .geomap--cine .geomap .seat.sel { stroke: #fff; stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.geomap--stage .geomap .seat { transition: fill .3s ease, opacity .6s ease; }
.geomap-back { position: absolute; left: 8px; top: 8px; z-index: 3; min-height: 32px; padding: 0 12px; border: 1px solid var(--rk-stage-line); background: var(--rk-stage-2); color: #fff; font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
.geomap-back { display: none; }
.is-focus .geomap-back { display: block; }
.geomap--cine { margin: 0; width: auto; }
.geomap--stage .geomap-credit { color: var(--rk-stage-muted); }
@media (min-width: 1100px) {
    .geomap--stage .geomap-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 18px; }
    .geomap--bleed .geomap-wrap svg.geomap { max-height: min(78vh, 860px); min-height: 520px; }
}
.card:has(> .geomap--bleed), .card:has(> .geomap-host > .geomap--bleed) { border: 0; background: none; box-shadow: none; overflow: visible; }

/* ---------- the seat maps (map.js: the UK explorer, every country's predict and what-if tools, rejoin, accuracy) on the stage ---------- */
.map-stage { background: radial-gradient(ellipse at 40% 45%, #23272d 0%, var(--rk-stage) 70%) !important; color: var(--rk-stage-ink); border-color: var(--rk-stage-line) !important; box-shadow: none !important; --surface: var(--rk-stage); --surface-2: #2b2f36; --ink: var(--rk-stage-ink); --ink-2: var(--rk-stage-ink); --muted: var(--rk-stage-muted); --line: var(--rk-stage-line); --hair: var(--rk-stage-line); --b1: var(--rk-stage-2); --map-stroke: var(--rk-stage); --map-empty: #3b3f46; --fig-bg: transparent; }
.map-stage .map-host { background: transparent; }
.map-stage .map-host .region-borders { stroke: rgba(255,255,255,.55); }
.map-stage select, .map-stage input, .map-stage .map-toolbar button, .map-stage .seg button { background: var(--rk-stage-2); color: #fff; border-color: var(--rk-stage-line); }
.map-stage .map-toolbar button[aria-pressed=true], .map-stage .seg button[aria-pressed=true] { background: #fff; color: #121417; border-color: #fff; }
.map-stage .map-legend, .map-stage .map-legend * { color: var(--rk-stage-ink); }
.map-stage .map-host .seat { transition: fill .3s ease, opacity .6s ease; }
.map-stage.is-focus .map-host .seat:not(.on) { opacity: .3; }
.map-stage .map-host .seat.selected { stroke: #fff; stroke-width: 2.4; }
.map-stage .map-host .seat:hover { stroke: #fff; }
.map-stage .map-credit { color: var(--rk-stage-muted); }
.map-stage .map-zoom button { background: var(--rk-stage-2); color: #fff; border-color: var(--rk-stage-line); border-radius: 0; }
.map-back { position: absolute; left: 8px; top: 8px; z-index: 3; display: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--rk-stage-line); background: var(--rk-stage-2); color: #fff; font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
.map-stage.is-focus .map-back { display: block; }
.map-detail { display: none; }
.map-stage--full { position: fixed !important; inset: 0; z-index: 1000; margin: 0 !important; max-width: none !important; width: auto !important; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; }
.map-stage--full .map-host { flex: 1; aspect-ratio: auto !important; max-height: none !important; min-height: 0; }
.map-stage--full .map-detail:not(:empty) { display: block; position: absolute; right: 64px; top: 12px; z-index: 4; width: min(320px, 40%); max-height: calc(100% - 24px); overflow: auto; background: #fff; color: #121417; border-top: 3px solid #121417; padding: 10px 12px; font: 400 var(--fs-sm)/1.35 var(--font-ui); --ink: #121417; --muted: #5b6370; }
.map-stage--full .map-detail .t-name { font: 700 var(--fs-md)/1.25 var(--font-ui); margin-bottom: 4px; }
.map-detail__go { display: inline-block; margin-top: 8px; font-weight: 700; color: #121417; }
@media (max-width: 760px) { .map-stage--full .map-detail:not(:empty) { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 40%; } }

/* ---------- any plain SVG map on the stage (stage.js: the county maps on race pages, /us/counties) ---------- */
.stage { background: radial-gradient(ellipse at 40% 45%, #23272d 0%, var(--rk-stage) 70%); color: var(--rk-stage-ink); --surface: var(--rk-stage); --ink: var(--rk-stage-ink); --muted: var(--rk-stage-muted); --line: var(--rk-stage-line); --fig-bg: transparent; padding: 8px; }
.stage svg path, .stage svg circle { transition: opacity .6s ease; }
.stage svg path { stroke: rgba(18,20,23,.85); }
.stage.stage--focus svg :is(path, circle):not(.stage-on) { opacity: .3; }
.stage svg .stage-sel { stroke: #fff; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.stage svg :is(path, circle):hover { stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.stage-ctl { position: absolute; left: 8px; top: 8px; z-index: 3; display: flex; }
.stage-ctl button { min-height: 30px; padding: 0 10px; margin-right: -1px; border: 1px solid var(--rk-stage-line); background: var(--rk-stage-2); color: #fff; font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
.stage:not(.stage--focus):not(.stage--zoomed) .stage-back { display: none; }
.stage-ctl .stage-zoom { min-width: 30px; padding: 0; font-size: var(--fs-md, 17px); line-height: 1; }
.stage--full { position: fixed !important; inset: 0; z-index: 1000; margin: 0 !important; padding: 48px 16px 16px; display: flex; flex-direction: column; }
.stage--full > svg { flex: 1; width: 100%; height: 100%; min-height: 0; max-height: none; }
.stage .pl-county__legend, .stage .pl-county__legend span { color: var(--rk-stage-ink); }

/* ---------- the paper stage: the forecast art map (after the New York Times' precinct maps) ---------- */
.xmap--paper { background: #f8f7f3; color: #1b1d21; --rk-stage-ink: #1b1d21; --rk-stage-muted: #5b6370; --rk-stage-line: #dcdad4; --rk-stage-2: #ffffff; border-top: 1px solid #e3e1db; border-bottom: 1px solid #e3e1db; }
.xmap--paper .xmap__stage { background: #f8f7f3; }
.xmap--paper .xmap__crumb { color: #1b1d21; }
.xmap--paper .xmap__tabs button, .xmap--paper .xmap__modes button { color: #5b6370; border-color: #d6d3cc; background: #fff; }
.xmap--paper .xmap__tabs button[aria-pressed=true] { background: #1b1d21; color: #fff; border-color: #1b1d21; }
.xmap--paper .xmap__modes button[aria-pressed=true] { color: #1b1d21; border-color: #1b1d21; }
.xmap--paper .st-line { stroke: #ffffff; stroke-width: 1.3; }
.xmap--paper svg.is-focus .xm-outline .st-line { stroke: #ffffff; }
.xmap--paper .ct { stroke: rgba(255,255,255,.75); stroke-width: .5; }
.xmap--paper .ds { stroke: rgba(255,255,255,.9); }

.xmap--paper .hv, .xmap--paper .hl, .xmap--paper .sel { stroke: #1b1d21; }
.xmap--paper .xm-lab { fill: #1b1d21; stroke: rgba(255,255,255,.9); font-weight: 500; }
.xmap--paper .xm-dot { fill: #fff; stroke: #1b1d21; stroke-width: .35; }
.xmap--paper .xmap__panel { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.xmap--paper .xm-h, .xmap--paper .xm-list button { color: #1b1d21; }
.xmap--paper .xmap__ctl button, .xmap--paper .xmap__out { background: #fff; color: #1b1d21; border-color: #d6d3cc; }
.xmap--paper .xmap__legend { background: rgba(248,247,243,.92); color: #1b1d21; }

.xmap--paper .xm-mini { background: #e6e4de; } .xmap--paper .xm-mini b { background: #1b1d21; }
.xmap--paper .xmap__note { color: #5b6370; border-top-color: #e3e1db; }
.xmap--paper .xmap__panel .xm-dt tr td { color: #1b1d21; }
.xmap--paper .xmap__panel .hc { border: 1px solid #e3e1db; border-top: 3px solid #1b1d21; }
.xm-sum { margin: 0 0 12px; font: 600 var(--fs-md)/1.35 var(--font-ui); }

/* the art maps on paper (race pages' county maps; stage.js with data-stage-theme="paper") */
.stage--paper { background: #f8f7f3; color: #1b1d21; --surface: #f8f7f3; --ink: #1b1d21; --muted: #5b6370; --line: #dcdad4; }
.stage--paper svg path { stroke: rgba(255,255,255,.8); stroke-width: .5; }
.stage--paper.stage--focus svg :is(path, circle):not(.stage-on) { opacity: .35; }
.stage--paper svg .stage-sel, .stage--paper svg :is(path, circle):hover { stroke: #1b1d21; }
.stage--paper .stage-ctl button { background: #fff; color: #1b1d21; border-color: #d6d3cc; }
.stage--paper .pl-county__legend, .stage--paper .pl-county__legend span { color: #1b1d21; }
.pl-county__legend--art { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 120px; }
.pl-county__legend--art .xm-grad-bar { grid-column: 1 / -1; display: block; width: 200px; height: 8px; background: linear-gradient(to left, #c93135 0% 25%, #8955c3 50%, #1375b7 75% 100%); }
.pl-county__legend--art .xm-grad-bar.is-i { background: linear-gradient(to left, #c93135 0% 25%, #bf5b22 50%, #cea44b 75% 100%); }
.pl-county__legend--art span { width: auto !important; height: auto !important; background: none !important; border: 0 !important; font-size: var(--fs-xs); }
.pl-county__legend--art small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); }

/* ---------- the country maps' art view on paper (geomap.js: the real map, seats faded by size, places named) ---------- */
.geomap--stage.geomap--paper { background: #f8f7f3; color: #1b1d21; --surface: #f8f7f3; --surface-2: #e6e4de; --ink: #1b1d21; --ink-2: #3a3f47; --muted: #5b6370; --line: #dcdad4; --hair: #dcdad4; --b1: #ffffff; border-top: 1px solid #e3e1db; border-bottom: 1px solid #e3e1db; }
.geomap--paper .geomap .seat { stroke: rgba(255,255,255,.85); stroke-width: .5; vector-effect: non-scaling-stroke; }
.geomap--paper .geomap .outline { stroke: #ffffff; stroke-opacity: 1; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.geomap--paper .geomap .seat.hot, .geomap--paper .geomap .seat.on, .geomap--paper .geomap .seat.sel { stroke: #1b1d21; }
.geomap--paper svg.is-focus .seat:not(.on) { opacity: .35; }
.geomap--paper .geomap-side { background: #ffffff; border-color: #e3e1db; }
.geomap--paper .geomap-legend, .geomap--paper .geomap-leg__n, .geomap--paper .geomap-legend .geomap-leg b { color: #1b1d21; }
.geomap--paper .geomap-controls select, .geomap--paper .geomap-controls .seg button, .geomap--paper .geomap-cine-btn, .geomap--paper .geomap-zoom button, .geomap--paper .geomap-back { background: #fff; color: #1b1d21; border-color: #d6d3cc; }
.geomap--paper .geomap-controls .seg button[aria-pressed=true] { background: #1b1d21; color: #fff; border-color: #1b1d21; }
.geomap--paper .geomap-credit { color: #5b6370; }
.geomap--paper .geomap .land { fill: #ecebe6; stroke: #fff; }
.geomap--paper .geomap .frame { stroke: #d6d3cc; }
.geomap--paper .geomap .frame-label { fill: #5b6370; }
.geomap .art-labels { pointer-events: none; }
.geomap .art-lab { fill: #1b1d21; stroke: rgba(255,255,255,.92); paint-order: stroke; font-family: var(--font-ui); font-weight: 500; dominant-baseline: middle; }
.geomap .art-dot { fill: #fff; stroke: #1b1d21; stroke-width: .6; vector-effect: non-scaling-stroke; }
.geomap-art-seg[hidden] { display: none !important; }

/* the seat maps' real map as an art map on paper (map.js) */
.map-stage.map-stage--paper { background: #f8f7f3 !important; color: #1b1d21; --surface: #f8f7f3; --surface-2: #e6e4de; --ink: #1b1d21; --ink-2: #3a3f47; --muted: #5b6370; --line: #dcdad4; --hair: #dcdad4; --b1: #ffffff; --map-stroke: rgba(255,255,255,.85); --map-empty: #e6e4de; border-color: #e3e1db !important; }
.map-stage--paper select, .map-stage--paper input, .map-stage--paper .map-toolbar button, .map-stage--paper .seg button, .map-stage--paper .map-zoom button, .map-stage--paper .map-back { background: #fff; color: #1b1d21; border-color: #d6d3cc; }
.map-stage--paper .map-toolbar button[aria-pressed=true], .map-stage--paper .seg button[aria-pressed=true] { background: #1b1d21; color: #fff; border-color: #1b1d21; }
.map-stage--paper .map-legend, .map-stage--paper .map-legend * { color: #1b1d21; }
.map-stage--paper .map-host .seat.selected, .map-stage--paper .map-host .seat:hover { stroke: #1b1d21; }
.map-stage--paper.is-focus .map-host .seat:not(.on) { opacity: .35; }
.map-stage--paper .map-host .region-borders { stroke: #fff; }
.map-host .art-labels { pointer-events: none; }
.map-host .art-lab { fill: #1b1d21; stroke: rgba(255,255,255,.92); paint-order: stroke; font-family: var(--font-ui); font-weight: 500; dominant-baseline: middle; }
.map-host .art-dot { fill: #fff; stroke: #1b1d21; stroke-width: .6; vector-effect: non-scaling-stroke; }

/* performance (owner, 4 Nov 2026: "the page becomes unresponsive"): no outlines while the map flies, hover and pick drawn as one
   outline on top instead of restyling or moving one of thousands of shapes */
.xmap svg.is-flying :is(.ct, .ds) { stroke: none; }
.xmap .xm-hv, .xmap .xm-sel { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.xmap .xm-sel { stroke-width: 2.6; }
.xmap--paper .xm-hv, .xmap--paper .xm-sel { stroke: #1b1d21; }
.geomap .frame { vector-effect: non-scaling-stroke; }

/* ---------- the US hub's head after the midterms: 2028 first, then the 2026 national vote ---------- */
.us28 { padding: 20px 0 18px; background: var(--surface, #fff); border-bottom: 1px solid var(--hair); }
.us28__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: start; }
.us28 .kicker { margin: 0 0 4px; }
.us28__h { margin: 0 0 12px; font: 800 var(--fs-2xl)/1.1 var(--font-display, var(--font-ui)); letter-spacing: -.02em; }
.us28__h a { color: var(--ink); text-decoration: none; }
.us28__h a:hover { text-decoration: underline; }
.us28__note { margin: 0; font: 400 var(--fs-md)/1.45 var(--font-ui); color: var(--ink-2); }
.us28__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.us28__figs > div { border-top: 2px solid var(--pc, var(--ink)); padding-top: 6px; }
.us28__figs b { display: block; font: 800 var(--fs-xl)/1 var(--font-num, var(--font-ui)); color: var(--pc, var(--ink)); font-variant-numeric: tabular-nums; }
.us28__figs span { display: block; margin-top: 3px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.us28__foot { margin: 10px 0 0; line-height: 1.45; }
.us28__vote { padding-left: 24px; border-left: 1px solid var(--hair); }
.us28__c + .us28__c { margin-top: 10px; }
.us28__ct { display: flex; align-items: baseline; gap: 10px; font: 500 var(--fs-sm)/1.2 var(--font-ui); }
.us28__ct b { font-weight: 700; min-width: 56px; }
.us28__ct > span { flex: 1; font-variant-numeric: tabular-nums; }
.us28__ct em { font-style: normal; font: 800 var(--fs-lg)/1 var(--font-num, var(--font-ui)); }
.us28__bar { display: flex; height: 10px; margin: 6px 0 0; background: #e6e4de; }
.us28__bar i { display: block; height: 100%; }
@media (max-width: 900px) {
    .us28__grid { grid-template-columns: 1fr; gap: 18px; }
    .us28__vote { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
    .us28__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}

/* what the map is, above it (CNN: "Election 2026: Results map") */
.xmap__titlebar { padding: 18px max(16px, calc(50vw - 640px)) 4px; }
.xmap__kick { margin: 0 0 4px; font: 700 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--rk-stage-muted); }
.xmap__title { margin: 0; font: 800 var(--fs-2xl)/1.1 var(--font-display, var(--font-ui)); letter-spacing: -.02em; color: var(--rk-stage-ink); }
.xmap--paper .xmap__titlebar { background: #f8f7f3; }
.xmap .xmap__bar { border-top: 0; }
.xm-more { margin: 8px 0 0; padding: 6px 10px; min-height: 30px; border: 1px solid var(--rk-stage-line); background: none; color: var(--rk-stage-ink); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
@media (max-width: 759px) { .xmap__titlebar { padding: 14px 16px 2px; } .xmap__title { font-size: var(--fs-xl); } }

/* ---------- the country maps, CNN's layout (owner, 4 Nov 2026): on paper, hex included; no box round the map; the map the
   full width of the window with the key and detail floating over its right side; full screen really full screen ---------- */
.geomap--stage, .geomap--stage.geomap--paper { background: #f8f7f3; color: #1b1d21; --surface: #f8f7f3; --surface-2: #e6e4de; --ink: #1b1d21; --ink-2: #3a3f47; --muted: #5b6370; --line: #dcdad4; --hair: #dcdad4; --b1: #ffffff; --fig-bg: transparent; }
.geomap--stage .geomap-wrap, .geomap--stage .geomap-wrap:has(> svg.geomap), .geomap--stage svg.geomap { border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; border-radius: 0; }
.geomap--stage .geomap .seat { stroke: rgba(255,255,255,.9); }
.geomap--stage .geomap.is-hex .outline { stroke: #f8f7f3; }
.geomap--stage svg.is-focus .seat:not(.on) { opacity: .35; }
.geomap--bleed { padding: 14px 0 10px; }
.geomap--bleed .geomap-controls, .geomap--bleed .geomap-credit { padding-left: max(16px, calc(50vw - 640px)); padding-right: max(16px, calc(50vw - 640px)); }
@media (min-width: 1100px) {
    .geomap--bleed .geomap-body { display: block; position: relative; }
    .geomap--bleed .geomap-wrap { width: 100%; }
    .geomap--bleed .geomap-wrap svg.geomap { width: 100%; height: min(80vh, 860px); min-height: 520px; max-height: none; }
    .geomap--bleed .geomap-side { position: absolute; top: 12px; right: max(16px, calc(50vw - 640px)); width: 360px; max-height: calc(100% - 24px); overflow: auto; z-index: 3; background: #fff; border: 1px solid #e3e1db; box-shadow: 0 6px 24px rgba(0,0,0,.08); padding: 14px 16px; }
    .geomap--bleed .geomap-zoom { right: calc(max(16px, calc(50vw - 640px)) + 360px + 16px); }
    .geomap--bleed .geomap-back { left: max(16px, calc(50vw - 640px)); }
}
/* full screen: fixed over the page, whatever the stage rules above say */
.geomap--cine, .geomap--cine.geomap--bleed { position: fixed !important; inset: 0 !important; width: auto !important; margin: 0 !important; z-index: 1000; overflow: auto; display: flex; flex-direction: column; padding: 10px 0; }
.geomap--cine .geomap-body { flex: 1; min-height: 0; position: relative; display: block !important; }
.geomap--cine .geomap-wrap { height: 100%; }
.geomap--cine .geomap-wrap svg.geomap { width: 100%; height: 100% !important; min-height: 0; max-height: none; }
.geomap--cine .geomap-side { position: absolute !important; top: 12px; right: 16px; width: min(360px, 40vw); max-height: calc(100% - 24px); overflow: auto; z-index: 3; background: #fff; border: 1px solid #e3e1db; padding: 14px 16px; }
@media (max-width: 760px) {
    .geomap--cine .geomap-side { position: static !important; width: auto; max-height: 34vh; }
    .geomap--cine .geomap-body { display: flex !important; flex-direction: column; }
}

/* the US hub after the midterms (Views/Usa/_UsHead, _UsHowWeDid, _Us2028Map): 2028 first, the 2026 result as the record */
.ush2 { padding-bottom: 28px; }
.ush2__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: start; margin-top: 10px; }
.ush2__kick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ush2__h { margin: 10px 0 12px; font: 800 var(--fs-display)/1.04 var(--font-display, var(--font-ui)); letter-spacing: -.025em; }
.ush2__h a { color: var(--ink); text-decoration: none; }
.ush2__h a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ush2__deck { margin: 0 0 18px; font: 400 var(--fs-standfirst)/1.45 var(--font-ui); color: var(--ink-2); max-width: 680px; }
.ush2__270 { margin: 0 0 18px; }
.ush2__270h { display: flex; justify-content: space-between; align-items: baseline; font: 600 var(--fs-sm)/1.2 var(--font-ui); }
.ush2__270h b { font: 800 var(--fs-2xl)/1 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; vertical-align: -2px; }
.ush2__270m { font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ush2__270b { position: relative; display: flex; height: 22px; margin-top: 8px; background: #e6e4de; }
.ush2__270b i { display: block; height: 100%; transform-origin: left; animation: ush2grow .9s cubic-bezier(.25, .1, .25, 1) both; }
.ush2__270b i + i { transform-origin: right; }
.ush2__270b em { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); }
.ush2__270r { position: relative; height: 10px; margin-top: 4px; }
.ush2__270r span { position: absolute; top: 4px; height: 2px; background: #2f6fbf; }
.ush2__270r span::before, .ush2__270r span::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px; background: #2f6fbf; }
.ush2__270r span::before { left: 0; } .ush2__270r span::after { right: 0; }
.ush2__270n { margin: 2px 0 0; font: 400 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
@keyframes ush2grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ush2__270b i { animation: none; } }
.ush2__tiles { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.ush2__tile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f6f5f1; border-top: 2px solid var(--pc, var(--ink)); }
.ush2__tile svg { width: 40px; height: 40px; flex: none; }
.ush2__tile b { display: block; font: 800 var(--fs-xl)/1 var(--font-num, var(--font-ui)); color: var(--pc, var(--ink)); font-variant-numeric: tabular-nums; }
.ush2__tile span { display: block; margin-top: 3px; font: 500 var(--fs-xs)/1.25 var(--font-ui); color: var(--muted); }
.ush2__tile--line { flex-direction: column; align-items: stretch; gap: 4px; }
.ush2__tile--line svg { width: 100%; height: 44px; }
.ush2__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; font: 700 var(--fs-sm)/1.3 var(--font-ui); }
.ush2__links a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.ush2__res { padding: 16px 18px 18px; background: #f6f5f1; border-top: 4px solid var(--ink); }
.ush2__rh { margin: 6px 0 10px; font: 800 var(--fs-xl)/1.15 var(--font-display, var(--font-ui)); letter-spacing: -.01em; }
.ush2__rh a { color: var(--ink); text-decoration: none; }
.ush2__bops .bop { --bop-h: 28px; margin: 4px 0 10px; }
.ush2__bops .bop__c { font-size: var(--fs-lg); }
.ush2__vs { margin: 6px 0 12px; font: 500 var(--fs-sm)/1.3 var(--font-ui); }
.ush2__vr { display: grid; grid-template-columns: minmax(0, 1fr) 64px 92px; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #e3e1db; }
.ush2__vr > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ush2__vr--h { font: 600 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding-top: 0; }
.ush2__vr b { font-weight: 800; }
.ush2__vr small { display: block; color: var(--muted); font-size: var(--fs-2xs); }
.ush2__fk { margin: 12px 0 6px; font: 700 var(--fs-xs)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ush2__flips { grid-template-columns: 1fr; gap: 6px; }
.ush2__flips .scard { min-height: 50px; padding: 6px 10px; }
.ush2__flips .scard svg { width: 34px; height: 34px; }
@media (max-width: 1000px) {
    .ush2__grid { grid-template-columns: 1fr; gap: 24px; }
    .ush2__h { font-size: var(--fs-h1-m); }
    .ush2__tiles { grid-template-columns: 1fr 1fr; }
    .ush2__tile--line { grid-column: 1 / -1; }
}

.us28map { padding: 28px 0 16px; }
.us28map__deck { margin: 0 0 6px; font: 400 var(--fs-md)/1.45 var(--font-ui); color: var(--ink-2); max-width: 760px; }
.ushow { padding: 28px 0 36px; }
.ushow__h { margin: 4px 0 14px; font: 800 var(--fs-2xl)/1.1 var(--font-display, var(--font-ui)); letter-spacing: -.02em; }
.ushow__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.ushow__tile { display: flex; align-items: center; gap: 12px; padding: 14px; background: #f6f5f1; }
.ushow__tile svg { width: 44px; height: 44px; flex: none; }
.ushow__tile b { display: block; font: 800 var(--fs-xl)/1.05 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; }
.ushow__tile span { display: block; margin-top: 3px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.ushow__axis { margin: 0 0 26px; max-width: 900px; }
.ushow__ak { margin: 0 0 8px; font: 700 var(--fs-xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ushow__line { position: relative; height: 70px; margin: 0 40px 8px; border-bottom: 2px solid #d9d6ce; }
.ushow__zero { position: absolute; bottom: -18px; transform: translateX(-50%); font: 500 var(--fs-2xs)/1 var(--font-ui); color: var(--muted); }
.ushow__zero::before { content: ""; position: absolute; left: 50%; bottom: 16px; height: 60px; border-left: 1px dashed #bdb9af; }
.ushow__pt { position: absolute; bottom: -7px; transform: translateX(-50%); }
.ushow__pt i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #8a8f98; border: 2px solid #fff; box-shadow: 0 0 0 1px #8a8f98; }
.ushow__pt em { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 var(--fs-2xs)/1.2 var(--font-ui); font-style: normal; color: var(--muted); text-align: center; }
.ushow__pt em b { display: block; font: 800 var(--fs-md)/1.1 var(--font-num, var(--font-ui)); color: var(--ink); }
.ushow__pt.is-ours i { background: #1b1d21; box-shadow: 0 0 0 1px #1b1d21; }
.ushow__pt.is-res i { width: 16px; height: 16px; background: #2f6fbf; box-shadow: 0 0 0 1px #2f6fbf; }
.ushow__pt.is-res em b { color: #2f6fbf; }
.ushow__pt.is-polls em { bottom: 40px; }
.ushow__sub { margin: 8px 0 10px; font: 700 var(--fs-lg)/1.2 var(--font-ui); }
.ushow__sub .small { font-weight: 400; margin-left: 6px; }
.scard--call .scard__who b { color: var(--ink); }
.scard--call.is-miss { border-left-width: 5px; }
@media (max-width: 1000px) { .ushow__tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ushow__tiles { grid-template-columns: 1fr; } .ushow__line { margin: 0 24px 8px; } }
.ush2__ballot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--hair); }
.ush2__four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ush2__race { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "i n c" "b b b" "m m m"; gap: 6px 10px; align-items: center; padding: 12px 14px; background: color-mix(in srgb, var(--pc) 7%, #fff); border-top: 3px solid var(--pc); color: var(--ink); text-decoration: none; }
.ush2__race:hover .ush2__rm { text-decoration: underline; }
.ush2__race svg { grid-area: i; width: 36px; height: 36px; }
.ush2__race svg path { fill: none; stroke: var(--pc); stroke-width: 2; stroke-linejoin: round; }
.ush2__rn { grid-area: n; }
.ush2__rn b { display: block; font: 800 var(--fs-md)/1.1 var(--font-ui); }
.ush2__rn small, .ush2__rc small { display: block; font: 500 var(--fs-2xs)/1.25 var(--font-ui); color: var(--muted); }
.ush2__rc { grid-area: c; text-align: right; }
.ush2__rc b { display: block; font: 800 var(--fs-xl)/1 var(--font-num, var(--font-ui)); color: var(--pc); font-variant-numeric: tabular-nums; }
.ush2__rbar { grid-area: b; position: relative; height: 6px; background: color-mix(in srgb, #c8323b 70%, #fff); }
.ush2__rbar i { display: block; height: 100%; background: #2f6fbf; }
.ush2__rbar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink); }
.ush2__rm { grid-area: m; font: 600 var(--fs-xs)/1.2 var(--font-ui); }
.ush2__also { margin: 8px 0 0; }
@media (max-width: 480px) { .ush2__four { grid-template-columns: 1fr; } }
.us-fbase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 6px; }
.us-fbase > div { padding: 12px 14px; background: #f6f5f1; border-top: 3px solid #2f6fbf; }
.us-fbase b { display: block; font: 800 var(--fs-2xl)/1 var(--font-num, var(--font-ui)); color: #2f6fbf; font-variant-numeric: tabular-nums; }
.us-fbase span { display: block; margin-top: 4px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
@media (max-width: 700px) { .us-fbase { grid-template-columns: 1fr; } }

/* the home page's country cards with colour (owner, 4 Nov 2026: "less bland and boring"; ABC's tinted cards): the leading party's
   colour along the top and faded behind, the chance as a ring, a thicker seat bar */
.country-card--tint { padding: 16px 14px 12px; border-top: 4px solid var(--pc); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 10%, #fff) 0%, color-mix(in srgb, var(--pc) 3%, #fff) 100%); transition: transform .18s ease, box-shadow .18s ease; }
.country-card--tint:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.country-card--tint .flag-badge { top: -14px; right: 10px; }
.country-card--tint .country-card__prob { align-items: center; gap: 10px; }
.country-card__ring { width: 40px; height: 40px; flex: none; }
.country-card--tint .country-card__prob b { color: var(--pc); font-weight: 800; }
.country-card--tint .seat-bar--sm { height: 12px; }

@media (prefers-reduced-motion: reduce) { .country-card--tint { transition: none; } .country-card--tint:hover { transform: none; } }

/* the 2026 forecast pages after polling day (Views/Usa/_Archive2026) */
.us-archive { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; margin: 0 0 18px; padding: 12px 16px; background: #fbf6e8; border-left: 4px solid #b8860b; font: 400 var(--fs-sm)/1.45 var(--font-ui); color: var(--ink); }
.us-archive__tag { grid-row: span 2; padding: 3px 8px; background: #b8860b; color: #fff; font: 700 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.us-archive p { margin: 0; }
.us-archive__go { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 700; }
.us-archive__go a { color: var(--ink); }
/* 2028 race cards (ResultsKit.FutureCard) */
.scard--fut { grid-template-columns: 44px 1fr auto; }
.scard__bar { display: block; position: relative; height: 5px; margin-top: 6px; background: color-mix(in srgb, #c8323b 65%, #fff); }
.scard__bar i { display: block; height: 100%; background: #2f6fbf; }
.scard__bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--ink); }
.scard__ch { text-align: right; }
.scard__ch b { display: block; font: 800 var(--fs-lg)/1 var(--font-num, var(--font-ui)); color: var(--pc); margin-bottom: 4px; }
.us-futcards { margin: 6px 0 8px; }

/* the 2028 projection under past polling misses (Views/Usa/_Us2028Miss) */
.us28miss { padding: 26px 0 30px; }
.us28miss__t { margin: 8px 0 10px; font: 500 var(--fs-sm)/1.25 var(--font-ui); }
.us28miss__r { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, .8fr); gap: 12px; align-items: center; padding: 9px 10px; border-bottom: 1px solid #e3e1db; }
.us28miss__r--h { font: 600 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding-top: 0; }
.us28miss__r.is-ours { background: #f6f5f1; border-top: 3px solid var(--ink); }
.us28miss__r > span { position: relative; min-width: 0; }
.us28miss__r > span b { font-weight: 800; font-variant-numeric: tabular-nums; }
.us28miss__r > span small { display: block; color: var(--muted); font-size: var(--fs-2xs); }
.us28miss__r [role=rowheader] small { margin-top: 2px; }
.us28miss__bar { display: block; position: relative; height: 6px; margin-bottom: 5px; background: #e6e4de; }
.us28miss__bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--c); }
.us28miss__bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--ink); }
@media (max-width: 760px) {
    .us28miss__r { grid-template-columns: 1fr 1fr; }
    .us28miss__r [role=rowheader] { grid-column: 1 / -1; }
    .us28miss__r--h { display: none; }
    .us28miss__r > span[role=cell]::before { display: block; font: 600 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
    .us28miss__r > span[role=cell]:nth-child(2)::before { content: "President"; }
    .us28miss__r > span[role=cell]:nth-child(3)::before { content: "Senate"; }
    .us28miss__r > span[role=cell]:nth-child(4)::before { content: "House"; }
    .us28miss__r > span[role=cell]:nth-child(5)::before { content: "Governors"; }
}

/* /us/2028/ballot (Views/Usa/Ballot2028) */
.us-ballot { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 12px; margin: 8px 0 26px; }
.us-ballot__c { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--c) 6%, #fff); border-top: 3px solid var(--c); color: var(--ink); text-decoration: none; }
a.us-ballot__c:hover b { text-decoration: underline; }
.us-ballot__c svg { width: 36px; height: 36px; }
.us-ballot__c svg path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.us-ballot__c b { font: 800 var(--fs-md)/1.2 var(--font-ui); }
.us-ballot__c p { margin: 4px 0 6px; font: 400 var(--fs-sm)/1.4 var(--font-ui); color: var(--ink-2); }
.us-ballot__m { font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.us-ballot__m em { font-style: normal; font-weight: 700; color: var(--c); }
.us-ballot__m strong { color: var(--ink); }
.us-ballot__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 14px; font: 600 var(--fs-xs)/1.3 var(--font-ui); }
.us-ballot__key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--c); vertical-align: -1px; }

/* the US head after the midterms is its own layout: the themes' hub-head grid (Swiss: 12 columns, content from column 4) must not
   apply (owner, 4 Nov 2026: a big empty column left of the head on /us and the home page) */
.ush2.hub-head > .wrap { display: block !important; }
.ush2.hub-head > .wrap > * { grid-column: auto !important; grid-row: auto !important; }
/* the dot plot's three labels at three heights, so close values never overlap (owner's phone, 4 Nov 2026) */
.ushow__line { height: 104px; margin-bottom: 28px; }
.ushow__zero::before { height: 94px; }
.ushow__pt.is-ours em { bottom: 18px; }
.ushow__pt.is-res em { bottom: 48px; }
.ushow__pt.is-polls em { bottom: 78px; }

/* election night as it happened (Views/Usa/_UsNightTimeline): the live blog as a timeline on /us */
.usnight { padding: 26px 0 30px; }
.usnight__t { list-style: none; margin: 12px 0 14px; padding: 0; position: relative; max-width: 940px; }
.usnight__t::before { content: ""; position: absolute; left: 88px; top: 6px; bottom: 6px; width: 2px; background: #e3e1db; }
.usnight__p { display: grid; grid-template-columns: 76px 1fr; gap: 0 28px; padding: 8px 0; position: relative; }
.usnight__p::before { content: ""; position: absolute; left: 83px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #8a8f98; }
.usnight__p time { text-align: right; font: 700 var(--fs-sm)/1.3 var(--font-num, var(--font-ui)); color: var(--ink); font-variant-numeric: tabular-nums; padding-top: 2px; }
.usnight__p time small { font-weight: 500; color: var(--muted); font-size: var(--fs-2xs); }
.usnight__p a { color: var(--ink); text-decoration: none; }
.usnight__p a:hover b { text-decoration: underline; }
.usnight__p b { font: 700 var(--fs-md)/1.3 var(--font-ui); }
.usnight__p p { margin: 3px 0 0; font: 400 var(--fs-sm)/1.45 var(--font-ui); color: var(--ink-2); }
.usnight__p.is-call { background: #eef4fb; margin: 4px 0; padding: 12px 0; }
.usnight__p.is-call::before { background: #2f6fbf; border-color: #2f6fbf; width: 16px; height: 16px; left: 81px; }
.usnight__tag { display: inline-block; margin-right: 8px; padding: 2px 7px; background: #2f6fbf; color: #fff; font: 700 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
@media (max-width: 560px) {
    .usnight__t::before { left: 6px; }
    .usnight__p { grid-template-columns: 1fr; padding-left: 26px; }
    .usnight__p::before, .usnight__p.is-call::before { left: 1px; }
    .usnight__p time { text-align: left; }
}
.usnight__more { margin: 4px 0 12px; max-width: 940px; }
.usnight__more > summary { cursor: pointer; font: 700 var(--fs-sm)/1.3 var(--font-ui); padding: 8px 0; }

/* the home page's 2028 head (Views/Usa/_UsHead with UsHeadHome; owner, 4 Nov 2026: "the us can still be the headline section but just
   for the 2028 election"): the headline, bar and tiles on the left, the four races of 2028 on the right */
.ush2--home { padding-bottom: 22px; }
.ush2--home .ush2__grid { display: block; }
@media (min-width: 1000px) {
    .ush2--home .ush2__main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4.4fr) minmax(0, 3fr); column-gap: 28px; align-items: start; }
    .ush2--home .ush2__main > * { grid-column: 1 !important; grid-row: auto !important; }
    .ush2--home .ush2__main > .w28map { grid-column: 2 !important; grid-row: 1 / span 12 !important; }
    .ush2--home .ush2__main > .ush2__ballot { grid-column: 3 !important; grid-row: 1 / span 12 !important; margin-top: 0; padding-top: 0; border-top: 0; }
    .ush2--home .ush2__four { grid-template-columns: 1fr; gap: 8px; }
    .ush2--home .ush2__h { font-size: var(--fs-2xl); }
    .ush2--home .ush2__tiles { grid-template-columns: auto auto; }
    .ush2--home .ush2__tile--line { grid-column: 1 / -1; }
    .ush2--home .ush2__race { padding: 10px 12px; }
}
/* the home page's 2028 head on phones: shorter (no trend tile or range note), the four races as a 2 x 2 grid of figures */
@media (max-width: 760px) {
    .ush2--home .ush2__270n, .ush2--home .ush2__tile--line, .ush2--home .ush2__also { display: none; }
    .ush2--home .ush2__deck { font-size: var(--fs-md); margin-bottom: 12px; }
    .ush2--home .ush2__four { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .ush2--home .ush2__race { grid-template-columns: 1fr; grid-template-areas: "n" "c" "b"; padding: 10px; gap: 4px; }
    .ush2--home .ush2__race svg, .ush2--home .ush2__rm, .ush2--home .ush2__rn small { display: none; }
    .ush2--home .ush2__rc { text-align: left; }
    .ush2--home .ush2__links { gap: 4px 14px; }
}
@media (max-width: 760px) { .ush2--home .ush2__race:not(:has(.ush2__rbar)) .ush2__rm { display: block; font-weight: 700; } }
/* the 2028 map on the home page, in the page width (Views/Usa/_Us2028Map with MapCompact) */
.us28map--compact { padding-top: 6px; }
.us28map--compact .geomap-wrap svg.geomap { max-height: min(62vh, 620px); }

/* the 2028 map widget (Views/Usa/_Us2028MapWidget): real states, our chance, the polling-miss buttons */
.w28map { padding: 12px 14px 12px; background: #f6f5f1; border-top: 3px solid var(--ink); }
.w28map__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.w28map__head .kicker { margin: 0; }
.w28map__ev { margin: 0; display: flex; align-items: baseline; gap: 6px; font: 500 var(--fs-xs)/1 var(--font-ui); color: var(--muted); }
.w28map__ev b { font: 800 var(--fs-xl)/1 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; }
.w28map__lk { margin: 10px 0 0; font: 600 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
/* the year chips are the turnout widget's (.ttw-years, .ttw-chip in lab.css); the same rules here so the widget looks right wherever lab.css is not loaded */
.w28map .ttw-years { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.w28map .ttw-chip { padding: 5px 7px; border: 1px solid var(--hair); border-radius: var(--radius-pill, 0); background: var(--b1, #fff); color: var(--ink); font: 650 var(--fs-xs)/1 var(--font-ui); cursor: pointer; min-height: 0; }
.w28map .ttw-chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface, #fff); }
.w28map__svg { display: block; width: 100%; height: auto; }
.w28map__svg path { transition: fill .35s ease; }
.w28map__svg path:hover { stroke: var(--ink); stroke-width: 1.5; }
.w28map__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font: 500 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
.w28map__foot b { color: var(--ink); font-size: var(--fs-sm); }
.w28map__key { display: inline-flex; align-items: center; gap: 4px; }
.w28map__key i { display: inline-block; width: 10px; height: 10px; margin-left: 4px; }
.w28map__note { margin: 6px 0 4px; }
.w28map__go { font: 700 var(--fs-xs)/1.3 var(--font-ui); color: var(--ink); }
@media (max-width: 999px) { .w28map { margin: 16px 0; } }
@media (prefers-reduced-motion: reduce) { .w28map__svg path { transition: none; } }
/* the home head's kicker in its narrower column: each part stays on one line and wraps as a whole */
.ush2--home .ush2__kick { flex-wrap: wrap; row-gap: 2px; }
.ush2--home .ush2__kick > * { white-space: nowrap; }
/* the country cards' chance: the label under the figure, beside the ring, so it never spills out of a narrow card (owner, 4 Nov 2026) */
.country-card--tint .country-card__prob { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.country-card--tint .country-card__ring { grid-row: 1 / span 2; }
.country-card--tint .country-card__prob > b { grid-column: 2; grid-row: 1; line-height: 1; }
.country-card--tint .country-card__prob > span { grid-column: 2; grid-row: 2; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.country-card--tint .country-card__prob:not(:has(.country-card__ring)) > b, .country-card--tint .country-card__prob:not(:has(.country-card__ring)) > span { grid-column: 1 / -1; }

/* the latest polls band on the fronts: each poll its own card, with room between them (owner, 4 Nov 2026: "These 9 cards all look too
   close make them look more separated") */
@media (min-width: 761px) {
    .area-latest-polls .pl-list.pl-cards--band { gap: 28px 28px; }
    .area-latest-polls .pl-cards--band .pl-item { padding: 14px 16px 10px; background: #f7f6f2; border-top-width: 3px; box-shadow: 0 1px 0 #e6e3dc; transition: box-shadow .18s ease, transform .18s ease; }
    .area-latest-polls .pl-cards--band .pl-item:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); transform: translateY(-2px); }
    .area-latest-polls .pl-cards--band .pl-chips { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .area-latest-polls .pl-cards--band .pl-item { transition: none; } .area-latest-polls .pl-cards--band .pl-item:hover { transform: none; } }
/* the head's kicker as one line of text after the flag */
.ush2__kick { display: flex !important; align-items: center; gap: 10px; grid-template-columns: none !important; }
.ush2__kick .ush2__kt { display: block; white-space: normal; }
.ush2__kick .ush2__kt a { color: inherit; }
.ush2--home .ush2__kick > * { white-space: normal; }
/* the home page: a rule between the US 2028 head and the next country's story (owner, 4 Nov 2026) */
.home-usfront { border-bottom: 4px solid var(--ink); margin-bottom: 8px; }
/* lead figures whose value is words ("Le Pen v Mélenchon"): smaller and wrapping, so they stay in their box */
.lead-figures .big-number { overflow-wrap: anywhere; min-width: 0; }
.lead-figures__item { min-width: 0; }
.lead-figures .big-number.is-words { font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -.01em; }
/* the 2028 chance over time in the head (dates, a 50% line, a hover readout) */
.ush2__trend { position: relative; width: 100%; }
.ush2__trend-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; font: 500 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); }
.ush2__trend-h b { font: 700 var(--fs-xs)/1.2 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.ush2__tile--line .ush2__trend svg { display: block; width: 100%; height: 64px; cursor: crosshair; touch-action: pan-y; }
.ush2__trend-dot { position: absolute; width: 9px; height: 9px; margin: 15px 0 0 -4.5px; border-radius: 50%; background: #2e6db4; border: 2px solid #fff; box-shadow: 0 0 0 1px #2e6db4; transform: translateY(-50%); pointer-events: none; }
.ush2__trend-ax { display: flex; justify-content: space-between; margin: 3px 0 0; font: 500 var(--fs-2xs)/1 var(--font-ui); color: var(--muted); }
.ush2__trend-50 { position: absolute; right: 0; top: calc(18px + 45% * .8 * 64 / 80); font: 600 var(--fs-2xs)/1 var(--font-ui); color: #9aa0a8; transform: translateY(-50%); }
/* the home head's three sections start level: the same 3px rule on top of each, the first line at the same height (owner, 4 Nov 2026:
   "the tops of these three sections need to line up") */
@media (min-width: 1000px) {
    .ush2--home .ush2__main { align-items: start; }
    .ush2--home .ush2__kick { margin: 0 0 6px !important; padding-top: 12px; border-top: 3px solid var(--ink); min-height: 40px; box-sizing: border-box; }
    .ush2--home .ush2__kick .flag-badge { position: static; flex: none; }
    .ush2--home .w28map { margin-top: 0; padding-top: 12px; border-top: 3px solid var(--ink); }
    .ush2--home .w28map__head { min-height: 22px; }
    .ush2--home .ush2__main > .ush2__ballot { padding-top: 12px !important; border-top: 3px solid var(--ink) !important; }
    .ush2--home .ush2__ballot .ush2__fk { margin: 0 0 10px; min-height: 22px; }
    .ush2--home .ush2__h { margin-top: 8px; }
}

/* the US 2028 lead story on the home page (Views/Hub/Index, usFront): the map widget and four figures in the media column */
.lead-story--us28 .lead-story__270 { margin: 14px 0 18px; }
.lead-story__figure--w28 { margin: 0; }
.lead-story__figure--w28 > .w28map { padding: 0; background: none; border-top: 0; margin: 0; }
/* everything on the 2028 ballot, under the home map (Views/Usa/_Us2028Ballot.cshtml): a card per contest, replayed by the map's year buttons */
.w28bal { margin-top: 18px; border-top: 3px solid var(--ink); padding-top: 10px; }
.w28bal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.w28bal__h { margin: 0; font: 800 var(--fs-md)/1.2 var(--font-ui); }
.w28bal__lens { font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.w28bal.is-miss .w28bal__lens { color: #9a6a1c; }
.w28bal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.w28bal__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.w28bal__name { font: 800 var(--fs-sm)/1.2 var(--font-ui); color: var(--ink); }
.w28bal__big { display: inline-flex; align-items: baseline; gap: 5px; }
.w28bal__big b { font: 800 var(--fs-xl)/1 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.w28bal__big small { font: 500 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); max-width: 72px; }
.w28bal__bar { grid-column: 1 / -1; position: relative; display: flex; height: 10px; margin: 6px 0 4px; }
.w28bal__bar i { display: block; height: 100%; flex: 1 1 auto; }
.w28bal__bar i:first-child { flex: none; transition: width .4s ease; }
.w28bal__bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); font-size: 0; }
.w28bal__t { grid-column: 1 / -1; margin: 2px 0 0; font: 500 var(--fs-xs)/1.4 var(--font-ui); color: var(--ink-2, var(--ink)); }
.w28bal__f { margin: 8px 0 0; font: 700 var(--fs-xs)/1.3 var(--font-ui); }
.w28bal__f a { color: var(--ink); }
@media (max-width: 760px) { .w28bal__list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .w28bal__bar i:first-child, .w28bal__big b { transition: none; } }
.lead-story--us28 { padding-bottom: 28px; margin-bottom: 28px; border-bottom: var(--rule-w, 2px) solid var(--rule, var(--ink)); }

/* the 2028 widget's state hover card (owner, 4 Nov 2026: "much better hover info on each state"), after the results map's */
.w28map { position: relative; }
.w28map__svg path.is-hot { stroke: var(--ink); stroke-width: 2; }
.w28tip { position: absolute; z-index: 20; width: 272px; max-width: calc(100% - 8px); padding: 10px 12px 8px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 6px 22px rgba(0,0,0,.18); pointer-events: none; font: 500 var(--fs-xs)/1.35 var(--font-ui); color: var(--ink); }
.w28tip__h { display: flex; align-items: baseline; gap: 6px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); }
.w28tip__h b { font: 800 var(--fs-md)/1.15 var(--font-ui); }
.w28tip__ev { color: var(--muted); font-size: var(--fs-2xs); flex: 1; }
.w28tip__h em { font: 800 var(--fs-2xs)/1 var(--font-ui); font-style: normal; color: #fff; padding: 4px 6px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.w28tip__lens { margin: 0 0 6px; font-weight: 700; color: #9a6a1c; }
.w28tip__lens span { font-weight: 500; color: var(--muted); }
.w28tip__row { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: 8px; padding: 2px 0; }
.w28tip__row i { display: block; height: 8px; background: #eceae4; }
.w28tip__row s { display: block; height: 100%; text-decoration: none; }
.w28tip__row b { text-align: right; font: 800 var(--fs-sm)/1 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; }
.w28tip__row.is-d b { color: #1f5aa6; } .w28tip__row.is-r b { color: #b7302b; }
.w28tip__dl { margin: 8px 0 0; }
.w28tip__dl div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid #eeece6; }
.w28tip__dl dt { color: var(--muted); } .w28tip__dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.w28tip small { font-weight: 500; color: var(--muted); font-size: var(--fs-2xs); }
.w28tip__ak { margin: 8px 0 2px; font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.w28tip__also { list-style: none; margin: 0; padding: 0; }
.w28tip__also li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px solid #eeece6; }
.w28tip__also li i { width: 8px; height: 8px; } .w28tip__also li b { font-variant-numeric: tabular-nums; }
.w28tip__f { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-2xs); }

/* the "Only on Polling Forecast" cards, fuller (owner, 5 Nov 2026: "The 70% figure pushes the text out of whack. The whole section
   looks a bit bland especially the french one with all the white space and little info") */
.feat-big { flex-direction: column; align-items: flex-start; gap: 4px; }
.feat-big small { flex: none; }
.feat-miss--few .feat-miss__col { grid-template-rows: 52px 52px auto auto; }
.feat-miss--few .feat-miss__col::before { top: 52px; }
.feat-miss--few .feat-miss__bar { max-width: 40px; }
.feat-miss--few .feat-miss__v { font-size: var(--fs-sm); }
.feat-miss__sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.feat-miss__sum > span:not(.feat-miss__key) { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--b2, #f3f2ee); }
.feat-miss__sum b { font: 800 var(--fs-lg)/1 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; color: var(--ink); }
.feat-miss__sum small { font: 500 var(--fs-2xs)/1.25 var(--font-ui); color: var(--muted); }
.feat-miss__key { flex: 1 0 100%; display: flex; align-items: center; gap: 5px; font: 500 var(--fs-2xs)/1 var(--font-ui); color: var(--muted); }
.feat-miss__key i { display: inline-block; width: 10px; height: 10px; margin-left: 6px; background: var(--over); }
.feat-miss__key i:first-child { margin-left: 0; }
.feat-miss__key i.is-under { background: var(--under); }
div.feat .feat__head .hed { color: inherit; text-decoration: none; }
div.feat .feat__head .hed:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.feat__go:hover { text-decoration: underline; }
.p28c { display: flex; flex-direction: column; gap: 8px; }
.p28c__who { margin: 0; font: 600 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.p28c__big { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.p28c__big .big-number { font-size: calc(var(--fs-num, 44px) * .82); line-height: 1; }
.p28c__big span { font: 500 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); }
.p28c__evh { display: flex; justify-content: space-between; gap: 8px; font: 600 var(--fs-xs)/1.2 var(--font-ui); }
.p28c__evh b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.p28c__bar { position: relative; display: flex; height: 10px; margin-top: 4px; }
.p28c__bar i { display: block; height: 100%; flex: 1 1 auto; }
.p28c__bar i:first-child { flex: none; }
.p28c__bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.p28c__note { margin: 4px 0 0; font: 500 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
.p28c__ak { margin: 2px 0 0; font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.p28c__pop { list-style: none; margin: 0; padding: 0; }
.p28c__pop li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--hair); font: 600 var(--fs-xs)/1.25 var(--font-ui); }
.p28c__pop a { color: var(--ink); }
.p28c__pop span { color: var(--muted); font-weight: 500; white-space: nowrap; }
/* seven polling-miss years on one row (owner, 5 Nov 2026: "whatever will fit without dropping to two rows"); a narrow screen scrolls the row */
.w28map .w28map__lens { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.w28map .w28map__lens::-webkit-scrollbar { display: none; }
.w28map .w28map__lens .ttw-chip { flex: none; }
/* the live maps' full hover card (wwwroot/js/widgets/map.js; owner, 5 Nov 2026: "a better hover state like the one on the us home page") */
html .wtip.wcard { width: 270px; max-width: calc(100% - 8px); padding: 10px 12px 8px; font: 500 var(--fs-xs)/1.35 var(--font-ui); }
.wcard__h b { display: block; margin: 0 0 6px; font: 800 var(--fs-md)/1.2 var(--font-ui); color: #121417; }
.wcard__win { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; color: #fff; font: 800 var(--fs-sm)/1.1 var(--font-ui); }
.wcard__win em { font-style: normal; font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; }
.wcard__k { margin: 6px 0 2px; font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: #5b6370; }
.wcard__rows { list-style: none; margin: 0; padding: 0; }
.wcard__rows li { display: grid; grid-template-columns: 4px minmax(0, 1fr) 70px 44px; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px solid #eeece6; }
.wcard__rows li i { width: 4px; height: 14px; }
.wcard__rows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #121417; }
.wcard__rows li em { display: block; height: 6px; background: #eceae4; }
.wcard__rows li s { display: block; height: 100%; text-decoration: none; }
.wcard__rows li b { display: inline; margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: #121417; }
.wcard__l { margin: 4px 0 0; color: #3b4048; }
.wcard__miss { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid #e2e0da; color: #5b6370; font-size: var(--fs-2xs); }
.wcard__miss.is-moves { color: #9a6a1c; font-weight: 600; }
html .wtip.wcard small.wcard__go { display: block; margin-top: 6px; font: 700 var(--fs-2xs)/1.2 var(--font-ui); color: #121417; }
/* the ballot inside the map's panel: one widget, one set of year buttons */
.lead-story__figure--w28 > .w28bal { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.lead-story__figure--w28 > .w28map .w28map__go { display: none; }
.lead-story__figure--w28 .w28bal__row { border-bottom-color: rgba(0,0,0,.1); }
.w28bal__f { display: flex; flex-wrap: wrap; gap: 6px 20px; }
/* the newest articles as text, high on the front page (Snippets/_DeskStrip; owner, 5 Nov 2026) */
.desk-strip { padding: 22px 0 8px; }
.desk-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 3px solid var(--ink); }
.desk-strip__h { margin: 0; font: 800 var(--fs-lg)/1.2 var(--font-head, var(--font-ui)); letter-spacing: var(--head-tracking, 0); }
.desk-strip__more { font: 700 var(--fs-xs)/1.2 var(--font-ui); color: var(--ink); }
.desk-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.desk-strip__item { border-bottom: 1px solid var(--hair); }
.desk-strip__item + .desk-strip__item { border-left: 1px solid var(--hair); }
.desk-strip__item:nth-child(4n + 1) { border-left: 0; }
.desk-strip__item a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 18px 16px; color: var(--ink); text-decoration: none; }
.desk-strip__item:nth-child(4n + 1) a { padding-left: 0; }
.desk-strip__item a:hover .desk-strip__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.desk-strip__k { display: flex; align-items: center; gap: 2px; font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--tint-ink, var(--muted)); }
.desk-strip__k .flag-badge--inline { width: 18px; height: 12px; margin-right: 6px; vertical-align: 0; }
.desk-strip__d { margin-left: auto; color: var(--muted); font-weight: 600; }
.desk-strip__t { font: 700 var(--fs-md)/1.25 var(--font-head, var(--font-ui)); letter-spacing: var(--head-tracking, 0); }
.desk-strip__s { font: 400 var(--fs-xs)/1.45 var(--font-ui); color: var(--ink-2, var(--muted)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1099px) {
    .desk-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .desk-strip__item:nth-child(4n + 1) { border-left: 1px solid var(--hair); }
    .desk-strip__item:nth-child(2n + 1) { border-left: 0; }
    .desk-strip__item:nth-child(4n + 1) a { padding-left: 18px; }
    .desk-strip__item:nth-child(2n + 1) a { padding-left: 0; }
}
@media (max-width: 599px) {
    .desk-strip__list { grid-template-columns: minmax(0, 1fr); }
    .desk-strip__item, .desk-strip__item:nth-child(4n + 1) { border-left: 0 !important; }
    .desk-strip__item a, .desk-strip__item:nth-child(4n + 1) a { padding: 12px 0 14px; }
}
/* "How the forecast moved" on the home page: fitted scale, a reading under the pointer (Snippets/_Modules) */
.mod-moved .chart-module__sub { margin-bottom: 4px; }
.mod-trend { margin: 6px 0 2px; }
.mod-trend__out { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; font: 600 var(--fs-xs)/1.2 var(--font-ui); color: var(--muted); }
.mod-trend__out b { font: 800 var(--fs-lg)/1 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; }
.mod-trend__plot { position: relative; height: 96px; margin-right: 30px; cursor: crosshair; touch-action: pan-y; }
.mod-trend__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mod-trend__dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.mod-trend__y { position: absolute; right: -30px; font: 500 var(--fs-2xs)/1 var(--font-ui); color: var(--muted); transform: translateY(-50%); }
.mod-trend__y.is-hi { top: 5.5%; } .mod-trend__y.is-lo { top: 94%; }
.mod-moved .mod-trend .mod-axis { margin-right: 30px; }
/* "How the vote works": votes against seats in our projection (Snippets/_Modules; owner, 5 Nov 2026: "this graphic says nothing") */
.mod-vs { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 6px; color: var(--ink); text-decoration: none; }
.mod-vs__key { display: flex; gap: 14px; font: 600 var(--fs-2xs)/1 var(--font-ui); color: var(--muted); }
.mod-vs__key i { display: inline-block; width: 14px; height: 6px; margin-right: 5px; vertical-align: 1px; background: var(--ink); }
.mod-vs__key i.is-vote { opacity: .35; }
.mod-vs__row { display: grid; grid-template-columns: minmax(0, 72px) minmax(0, 1fr) auto; gap: 8px; align-items: center; font: 600 var(--fs-xs)/1.2 var(--font-ui); }
.mod-vs__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-vs__bars { display: flex; flex-direction: column; gap: 2px; }
.mod-vs__bars i { display: block; height: 6px; min-width: 2px; }
.mod-vs__bars i.is-vote { opacity: .35; }
.mod-vs__v { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mod-vs__v b { font-weight: 600; color: var(--muted); font-size: var(--fs-2xs); }
.mod-vs__v em { min-width: 30px; text-align: right; font: 800 var(--fs-xs)/1 var(--font-ui); font-style: normal; color: var(--muted); }
.mod-vs__v em.is-up { color: #2f7d4e; } .mod-vs__v em.is-dn { color: #b5541c; }
.mod-vs:hover .mod-vs__n { text-decoration: underline; }
.mod-vs__take { font-size: var(--fs-xs); }
/* "Did you know?": the figures in one column, the text lined up beside them (owner, 5 Nov 2026: "does not line up with the text") */
.mod-fact { grid-template-columns: 84px minmax(0, 1fr); align-items: start; text-decoration: none; }
.mod-fact .big-number { text-decoration: none; padding-top: 2px; }
.mod-fact__t { text-decoration: none; }
/* the latest polls as one compact list in the lead's column (Views/Hub/Index.cshtml) */
.mod-lp { list-style: none; margin: 8px 0 6px; padding: 0; }
.mod-lp li a { display: grid; grid-template-columns: minmax(0, 1fr) 80px; grid-template-areas: "c bar" "t t"; gap: 3px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.mod-lp li:first-child a { border-top: 0; }
.mod-lp li a:hover b { text-decoration: underline; }
.mod-lp__c { grid-area: c; display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 700 var(--fs-xs)/1.2 var(--font-ui); }
.mod-lp__c .flag-badge--inline { width: 18px; height: 12px; margin: 0; align-self: center; }
.mod-lp__c small { font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-lp__bar { grid-area: bar; display: flex; height: 8px; gap: 1px; }
.mod-lp__bar i { display: block; height: 100%; }
.mod-lp__t { grid-area: t; font: 500 var(--fs-2xs)/1.3 var(--font-ui); color: var(--ink-2, var(--muted)); font-variant-numeric: tabular-nums; }
/* "Only on Polling Forecast": the link cards with a live figure on each row (Snippets/_OnlyHome) */
.feat-xl { list-style: none; margin: 4px 0 0; padding: 0; }
.feat-xl li a { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.feat-xl li a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.feat-xl__h { display: flex; align-items: center; gap: 8px; font: 700 var(--fs-sm)/1.25 var(--font-ui); }
.feat-xl__h .flag-badge--inline { width: 20px; height: 13px; margin: 0; flex: none; }
.feat-xl__h b::after { content: " →"; font-weight: 600; }
.feat-xl__v { display: flex; align-items: baseline; gap: 8px; padding-left: 28px; }
.feat-xl__v em { font: 800 var(--fs-lg)/1 var(--font-num, var(--font-ui)); font-style: normal; font-variant-numeric: tabular-nums; color: var(--tint-ink, var(--ink)); white-space: nowrap; }
.feat-xl__v small { font: 500 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
.feat-xl__v--poll { flex-direction: column; align-items: stretch; gap: 4px; }
.feat-xl__bar { display: flex; gap: 1px; height: 7px; max-width: 220px; }
.feat-xl__bar i { display: block; height: 100%; }
/* the 2028 map (Views/Usa/_Us2028XMap): the polling-miss years and the national-vote slider under the tabs */
.xmap__what { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.xmap__lens { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.xmap__lk { margin-right: 10px; font: 600 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--rk-stage-muted); }
.xmap__lens button { min-height: 32px; padding: 0 10px; margin-left: -1px; border: 1px solid #d6d3cc; background: #fff; color: #1b1d21; font: 650 var(--fs-xs)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
.xmap__lens button[aria-pressed=true] { background: #1b1d21; border-color: #1b1d21; color: #fff; position: relative; z-index: 1; }
.xmap__vote { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; }
.xmap__vote input[type=range] { flex: 1 1 160px; min-width: 120px; accent-color: #1b1d21; background: linear-gradient(90deg, #c93135, #b7b9be 50%, #1375b7); height: 6px; -webkit-appearance: none; appearance: none; border-radius: 0; }
.xmap__vote input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; background: #1b1d21; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: grab; }
.xmap__vote input[type=range]::-moz-range-thumb { width: 14px; height: 20px; background: #1b1d21; border: 2px solid #fff; border-radius: 0; cursor: grab; }
.xmap__vout { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--rk-stage-muted); font-variant-numeric: tabular-nums; }
.xmap__vout b { font-weight: 800; } .xmap__vout .is-d { color: #1375b7; } .xmap__vout .is-r { color: #c93135; }
.xmap__vout span { min-width: 44px; text-align: center; font-weight: 800; color: var(--rk-stage-ink); }
.bop--proj .bop__s.is-won-d { background: #1375b7; } .bop--proj .bop__s.is-won-r { background: #c93135; }
@media (max-width: 760px) { .xmap__vote { flex-basis: 100%; } .xmap__lens { overflow-x: auto; flex-wrap: nowrap; } .xmap__lens button { flex: none; } }
/* the US hub's head, right column: the road to 2028 (Views/Usa/_UsHead) */
.road { list-style: none; margin: 8px 0 4px; padding: 0; position: relative; }
.road::before { content: ""; position: absolute; left: 63px; top: 12px; bottom: 12px; width: 2px; background: #d8d5cd; }
.road__i a { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 0 26px; align-items: start; padding: 9px 0; color: var(--ink); text-decoration: none; position: relative; }
.road__i a::before { content: ""; position: absolute; left: 58px; top: 13px; width: 10px; height: 10px; background: #fff; border: 2px solid var(--ink); }
.road__i:last-child a::before { background: var(--tint-ink, #c8312f); border-color: var(--tint-ink, #c8312f); }
.road__i.is-past a { opacity: .55; }
.road__i a:hover .road__t b { text-decoration: underline; text-underline-offset: 3px; }
.road__d { display: flex; flex-direction: column; font: 800 var(--fs-xs)/1.15 var(--font-ui); text-align: right; }
.road__d small { font-weight: 500; color: var(--muted); font-size: var(--fs-2xs); }
.road__t { display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.road__t b { font: 700 var(--fs-sm)/1.25 var(--font-ui); }
.road__t small { font: 400 var(--fs-2xs)/1.35 var(--font-ui); color: var(--muted); }
.road__n { font: 700 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.road-tips { list-style: none; margin: 4px 0 8px; padding: 0; }
.road-tips li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 56px; grid-template-areas: "n bar v" "p p p"; gap: 0 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--hair); font: 600 var(--fs-xs)/1.2 var(--font-ui); }
.road-tips__n { grid-area: n; } .road-tips__n small { color: var(--muted); font-weight: 500; }
.road-tips__bar { grid-area: bar; height: 6px; background: #c93135; display: block; }
.road-tips__bar i { display: block; height: 100%; background: #1375b7; }
.road-tips li > b { grid-area: v; text-align: right; font-variant-numeric: tabular-nums; }
.road-tips__p { grid-area: p; font: 500 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
/* the midterms as one line on the 2028 hub */
.us26line { padding: 14px 0; }
.us26line .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding-top: 14px; padding-bottom: 14px; }
.us26line p { margin: 0; font: 400 var(--fs-sm)/1.4 var(--font-ui); }
.us26line__tag { display: inline-block; margin-right: 10px; padding: 3px 7px; background: var(--ink); color: #fff; font: 700 var(--fs-2xs)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; vertical-align: 1px; }
.us26line b { margin-right: 4px; }
.us26line__go { display: flex; gap: 18px; font-weight: 700 !important; }
.us26line__go a { color: var(--ink); }
.us28miss__t:not(.is-all) .us28miss__r.is-mid { display: none; }
.us28miss__more { margin: 10px 0 4px; padding: 7px 12px; border: 1px solid var(--ink); background: #fff; color: var(--ink); font: 700 var(--fs-xs)/1 var(--font-ui); cursor: pointer; border-radius: 0; }
/* the US head's pairing picker (Views/Usa/_UsHead; owner, 5 Nov 2026: "our forecast should change by selecting a different dem and rep candidate") */
.ush2__pick { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px; margin: 6px 0 12px; padding: 10px 12px; background: #f3f2ee; border-left: 4px solid var(--ink); }
.ush2__pk { font: 700 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 4px; }
.ush2__ps { flex: 1 1 0; min-width: 0; } .ush2__ps select { width: 100%; min-height: 36px; padding: 0 30px 0 10px; border: 2px solid; background: #fff; font: 700 var(--fs-sm)/1 var(--font-ui); border-radius: 0; cursor: pointer; }
.ush2__ps--d select { border-color: #1375b7; color: #1375b7; } .ush2__ps--r select { border-color: #c93135; color: #c93135; }
.ush2__pv { font: 800 var(--fs-sm)/1 var(--font-ui); color: var(--muted); }
.ush2__pclear { font: 700 var(--fs-xs)/1.2 var(--font-ui); color: var(--ink); margin-left: auto; }
.ush2__pick:has(.ush2__pnote), .ush2__pick:has(.ush2__pclear) { flex-wrap: wrap; } .ush2__pnote { flex-basis: 100%; font: 500 var(--fs-2xs)/1.35 var(--font-ui); color: var(--muted); }
@media (max-width: 600px) { .ush2__pick { flex-wrap: wrap; } .ush2__pk { flex-basis: 100%; } .ush2__ps { flex: 1 1 40%; } .ush2__ps select { width: 100%; max-width: none; } .ush2__pclear { margin-left: 0; } }
/* the picker on three lines: the label, the two candidates side by side, then the way back (5 Nov 2026: the names were cut short) */
.ush2__pick { flex-wrap: wrap; }
.ush2__pick .ush2__pk { flex-basis: 100%; }
.ush2__pick .ush2__pclear { flex-basis: 100%; margin-left: 0; }
.xmap__views { margin-left: auto; } .xmap__views + .xmap__modes { margin-left: 0; }
.xmap__views[hidden] { display: none !important; }
.xmap--paper.xmap--states .st-line, .xmap--paper.xmap--states .xm-states .st { stroke: #fff; stroke-width: 1.2; }
/* state outlines as icons in lists (the map panel, the road to 2028) */
.xm-ico { width: 22px; height: 22px; flex: none; display: block; }
.xm-list button:has(.xm-ico) { grid-template-columns: 22px 1fr auto; }
.st-ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -5px; margin-right: 7px; }
.road-tips__n { display: inline-flex; align-items: center; gap: 0 4px; } .road-tips__n .st-ico { margin-right: 4px; }

/* ===== the 2028 map, round two (owner, 6 Nov 2026) ===== */
/* the hover card: the party logo beside the name, not under it */
.hc__n .pl-logo, .hc__n .party-logo { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); margin: 0 !important; max-height: 16px; width: auto; z-index: 1; }
.hc__n:has(.pl-logo) span, .hc__n:has(.party-logo) span { padding-left: 32px; }
/* the vote totals table: the last election and 2028 */
.hc__vt { width: 100%; margin: 6px 0 2px; border-collapse: collapse; font: 500 var(--fs-xs)/1.2 var(--font-ui); color: #121417; }
.hc__vt th { padding: 4px 0; font-weight: 600; font-size: var(--fs-2xs); color: #5b6370; text-align: left; border-bottom: 1px solid #e6e8ec; }
.hc__vt td { padding: 4px 0; border-bottom: 1px solid #f0f1f3; }
.hc__vt td:first-child { border-left: 3px solid var(--pc, transparent); padding-left: 6px; }
.hc__vt .num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 10px; }
.hc__vt tr.is-tot td { font-weight: 700; border-bottom: 0; }

/* the header, in the site's own style: a rule, the red kicker, the head font */
.xmap--future .xmap__titlebar { padding-top: 14px; }
.xmap--future .xmap__titlebar::before { content: ""; display: block; height: 3px; background: var(--ink); margin-bottom: 10px; }
.xmap--future .xmap__kick { color: var(--tint-ink, #c8102e); font: var(--kicker-weight, 700) var(--fs-xs)/1.3 var(--kicker-font, var(--font-ui)); letter-spacing: var(--kicker-tracking, .04em); text-transform: var(--kicker-case, uppercase); }
.xmap--future .xmap__title { font-family: var(--font-head, var(--font-ui)); font-weight: var(--head-weight, 800); letter-spacing: var(--head-tracking, -.01em); font-size: var(--fs-h2); line-height: 1.1; }
.xmap--future .xmap__bar { padding-top: 8px; padding-bottom: 10px; gap: 8px 14px; background: #f8f7f3; }
.xmap--future .xmap__crumb { font: 800 var(--fs-sm)/1 var(--font-ui); margin-right: 4px; }
.xmap--future .xmap__tabs button, .xmap--future .xmap__modes button, .xmap--future .xmap__lens button { min-height: 30px; font-size: var(--fs-xs); padding: 0 11px; }
.xmap--future .xmap__tabs button[aria-pressed=true] { box-shadow: inset 0 -3px 0 var(--tint-ink, #c8102e); }
.xmap--future .xmap__what { padding-top: 8px; border-top: 1px solid #e3e1db; }
.xmap--future .xmap__optbtn { display: none; }
/* the map starts near the top, and the stage is no taller than the map needs */
.xmap--future .xmap__stage { height: min(78vh, calc((100vw - 460px) / 1.6 + 40px)); min-height: 420px; }
/* the panel: see-through, so the north-east shows through it */
.xmap--future .xmap__panel { background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 8px 28px rgba(18, 20, 23, .22), 0 2px 6px rgba(18, 20, 23, .12); }
/* zoom buttons, always there */
.xmap__zoom { position: absolute; left: max(16px, calc(50vw - 640px)); bottom: 70px; z-index: 2; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.xmap__zoom button { width: 36px; height: 36px; margin-top: -1px; border: 1px solid #d6d3cc; background: #fff; color: #1b1d21; font: 600 var(--fs-lg)/1 var(--font-ui); cursor: pointer; border-radius: 0; display: grid; place-items: center; }
.xmap__zoom button:hover { background: #f1efe9; }
.xmap__zoom svg { width: 16px; height: 16px; }
.xmap.is-zoomed .xmap__svg { cursor: grab; }
/* the closest races, after ABC's key projections: the state on the left, a rule, what we expect, tinted by the favourite */
.xm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xm-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch; width: 100%; padding: 0; border: 0; background: #eef3fa; color: #1b1d21; text-align: left; cursor: pointer; font: inherit; }
.xm-card--r { background: #fbecec; } .xm-card--o { background: #f1f1f3; }
.xm-card:hover { outline: 2px solid currentColor; outline-offset: -2px; }
.xm-card__st { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 8px; border-right: 1px solid rgba(0,0,0,.12); }
.xm-card__st .xm-ico { width: 30px; height: 30px; }
.xm-card__st span { display: flex; flex-direction: column; line-height: 1.15; }
.xm-card__st b { font: 700 var(--fs-sm)/1.15 var(--font-ui); }
.xm-card__st small { font: 500 var(--fs-2xs)/1.2 var(--font-ui); color: #5b6370; }
.xm-card__body { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 10px; min-width: 0; }
.xm-card__k { display: flex; justify-content: space-between; gap: 6px; font: 500 var(--fs-2xs)/1.2 var(--font-ui); color: #5b6370; }
.xm-card__k em { font-style: normal; font-weight: 700; color: #1b1d21; font-variant-numeric: tabular-nums; }
.xm-card__body > b { font: 700 var(--fs-sm)/1.2 var(--font-ui); }
.xm-card__body > b i { font-style: normal; color: #1375b7; }
.xm-card--r .xm-card__body > b i { color: #c93135; }
.xm-grad--f i { width: 240px; }

/* phones: an app, not a page. The map no longer traps the page's scroll until you zoom in; the options fold away; the panel is a sheet */
@media (max-width: 759px) {
    .xmap--future .xmap__title { font-size: var(--fs-lg); }
    .xmap--future .xmap__bar { position: sticky; top: 0; z-index: 6; padding: 8px 12px; gap: 6px; }
    .xmap--future .xmap__crumb { display: none; }
    .xmap--future .xmap__tabs, .xmap--future .xmap__views, .xmap--future .xmap__modes { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
    .xmap--future .xmap__views, .xmap--future .xmap__modes { width: auto; flex: 1 1 auto; }
    .xmap--future .xmap__tabs button { flex: 1 0 auto; min-height: 36px; }
    .xmap--future .xmap__optbtn { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid #d6d3cc; background: #fff; color: #1b1d21; font: 700 var(--fs-xs)/1 var(--font-ui); border-radius: 0; cursor: pointer; }
    .xmap--future .xmap__what { display: none; }
    .xmap--future.opts-open .xmap__what { display: flex; }
    .xmap--future.opts-open .xmap__optbtn span { transform: rotate(180deg); }
    .xmap--future .xmap__stage { height: 62vh; min-height: 320px; touch-action: pan-y; }
    .xmap--future.is-focus .xmap__stage, .xmap--future.is-zoomed .xmap__stage { touch-action: none; }
    .xmap--future .xmap__panel { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
    .xmap__zoom { left: auto; right: 10px; top: 10px; bottom: auto; }
    .xmap__zoom button { width: 40px; height: 40px; }
    .xm-card { grid-template-columns: 84px minmax(0, 1fr); }
}

/* the US hub's head, the site's tighter scale (owner, 6 Nov 2026: "follow the site wide style for all pages") */
.ush2:not(.ush2--home) .ush2__h { font-size: var(--fs-2xl); margin: 6px 0 8px; line-height: 1.08; }
.ush2:not(.ush2--home) .ush2__deck { font-size: var(--fs-md); line-height: 1.5; margin-bottom: 12px; }
.ush2:not(.ush2--home) .ush2__270h b { font-size: var(--fs-xl); }
.ush2:not(.ush2--home) .ush2__tiles { gap: 8px; margin-bottom: 12px; }
.ush2:not(.ush2--home) .ush2__tile { padding: 8px 12px; }
.ush2:not(.ush2--home) .ush2__tile b { font-size: var(--fs-lg); }
.ush2:not(.ush2--home) .ush2__tile:not(.ush2__tile--line) svg { width: 32px; height: 32px; }
.ush2:not(.ush2--home) .ush2__grid { gap: 0 36px; }
.ush2:not(.ush2--home) .ush2__res { padding: 12px 14px 14px; }
.ush2:not(.ush2--home) .ush2__rh { font-size: var(--fs-lg); }
.ush2:not(.ush2--home) .road__i a { padding: 6px 0; }
.ush2:not(.ush2--home) .road__t b { font-size: var(--fs-xs); }
.ush2:not(.ush2--home) .ush2__ballot { margin-top: 14px; }
.ush2 { padding-bottom: 18px; }
@media (max-width: 759px) { .ush2:not(.ush2--home) .ush2__h { font-size: var(--fs-xl); } }
.xm-card { grid-template-columns: 108px minmax(0, 1fr); }
.xm-card__st .xm-ico { width: 26px; height: 26px; }
.xm-card__st b, .xm-card__st small { white-space: nowrap; }
@media (max-width: 759px) {
    .xmap--future .xmap__bar { position: static; }
    .xmap--future .xmap__views, .xmap--future .xmap__modes { width: calc(50% - 3px); flex: 0 0 calc(50% - 3px); }
    .xmap--future .xmap__views button, .xmap--future .xmap__modes button { flex: 1 1 0; min-height: 32px; padding: 0 4px; font-size: var(--fs-2xs); justify-content: center; }
    .xmap--future .xmap__optbtn { min-height: 32px; }
    .xmap--future .xmap__stage { height: calc(100vw / 1.45 + 44px); min-height: 0; }
    .xmap__zoom { top: auto; bottom: 40px; right: 8px; flex-direction: row; }
    .xmap__zoom button { width: 34px; height: 34px; margin: 0 0 0 -1px; }
}
@media (max-width: 759px) { .xmap__zoom { top: 8px; bottom: auto; right: 8px; } .xmap__zoom button { font-size: var(--fs-md); line-height: 1; } }

/* ---- the /us head, compact (owner, 6 Nov 2026: "takes too much space ... compact it without removing any info") ---- */
/* the candidate picker: two styled lists in tiers, each name with its photo; a list opens over the page */
.ush2__pick { gap: 6px 8px; padding: 8px 10px; margin: 4px 0 10px; }
.ush2__pick .ush2__pk { flex-basis: auto; margin-right: 2px; }
.cpick { position: relative; flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.cpick > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--cp, var(--ink)); border-radius: var(--radius); cursor: pointer; min-width: 0; }
.cpick > summary::-webkit-details-marker { display: none; }
.cpick > summary:hover, .cpick[open] > summary { border-color: var(--cp); box-shadow: 0 1px 0 var(--cp); }
.cpick--d { --cp: #1375b7; } .cpick--r { --cp: #c93135; }
.cpick__face { flex: none; display: inline-flex; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #ece9e2; }
.cpick__face > *, .cpick__face img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; margin: 0 !important; }
.cpick__n { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cpick__n b { font: 700 var(--fs-sm)/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpick__n small { font: 500 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpick__caret { margin-left: auto; color: var(--cp); font-size: var(--fs-xs); transition: transform .15s; }
.cpick[open] .cpick__caret { transform: rotate(180deg); }
.cpick__list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: max(100%, 290px); max-height: min(60vh, 440px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cp); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(20, 20, 30, .18); padding: 4px 0 6px; }
.cpick--r .cpick__list { left: auto; right: 0; }
.cpick__t { margin: 8px 12px 2px; padding-top: 6px; border-top: 1px solid var(--line); font: 800 var(--fs-2xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cpick__t:first-of-type { border-top: 0; }
.cpick__o { display: flex; align-items: center; gap: 9px; padding: 5px 12px; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.cpick__o:hover, .cpick__o:focus-visible { background: #f6f5f1; border-left-color: var(--cp); outline: none; }
.cpick__o.is-on { background: #f6f5f1; border-left-color: var(--cp); }
.cpick__o.is-on b::after { content: " ✓"; color: var(--cp); }
.cpick__o .cpick__face { width: 26px; height: 26px; }
.ush2__pick .ush2__pclear { flex-basis: auto; margin-left: auto; font-size: var(--fs-2xs); }

/* the small map over the road: the states as we project them; a click goes to the big map */
.road-map { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 10px; margin: 6px 0 4px; color: var(--ink); text-decoration: none; }
.road-map svg { display: block; width: 100%; height: auto; max-height: 150px; transition: opacity .15s; }
.road-map:hover svg { opacity: .85; }
.road-map__k { display: flex; flex-direction: column; font: 600 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); text-align: right; }
.road-map__k b { font: 800 var(--fs-lg)/1 var(--font-ui); }
.road-map__k em { font-style: normal; font-weight: 700; color: var(--ink); margin-top: 6px; white-space: nowrap; }
.road-map:hover .road-map__k em { text-decoration: underline; text-underline-offset: 3px; }
#us28map { scroll-margin-top: 12px; }
@media (max-width: 899px) { #us28map { scroll-margin-top: 68px; } }

/* tighter everything else */
.ush2:not(.ush2--home) .ush2__grid { margin-top: 6px; }
.ush2:not(.ush2--home) .ush2__res { padding: 10px 12px 12px; }
.ush2:not(.ush2--home) .road { margin: 4px 0 2px; }
.ush2:not(.ush2--home) .road__i a { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 22px; padding: 4px 0; }
.ush2:not(.ush2--home) .road__i a::before { left: 50px; top: 8px; width: 8px; height: 8px; }
.ush2:not(.ush2--home) .road__t { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.ush2:not(.ush2--home) .road-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ush2:not(.ush2--home) .road-tips li { grid-template-columns: minmax(0, 1fr) 40px 38px; padding: 3px 0; }
.ush2:not(.ush2--home) .ush2__four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ush2:not(.ush2--home) .ush2__race { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "i n" "c c" "b b" "m m"; gap: 4px 8px; align-items: start; padding: 8px 10px; }
.ush2:not(.ush2--home) .ush2__race svg { width: 24px; height: 24px; }
.ush2:not(.ush2--home) .ush2__rn b { font-size: var(--fs-sm); }
.ush2:not(.ush2--home) .ush2__rc { text-align: left; display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.ush2:not(.ush2--home) .ush2__rc b { font-size: var(--fs-lg); }
.ush2:not(.ush2--home) .ush2__rm { font-size: var(--fs-2xs); align-self: end; }
.cpick > summary::before, .cpick > summary::after { content: none !important; display: none !important; }
@media (max-width: 1100px) { .ush2:not(.ush2--home) .ush2__four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .ush2__pick .ush2__pk { flex-basis: 100%; }
    .ush2__pick .ush2__pv { display: none; }
    .cpick { flex-basis: calc(50% - 4px); }
    .cpick__n small { display: none; }
    .cpick > summary { gap: 6px; padding: 4px 6px 4px 4px; }
    .cpick__face { width: 26px; height: 26px; }
    .cpick__n b { font-size: var(--fs-xs); }
    .ush2__pick { padding: 6px 8px; gap: 4px 8px; }
    .cpick__list { position: fixed; left: 8px !important; right: 8px !important; top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); width: auto; max-height: 64vh; }
    .ush2:not(.ush2--home) .road-tips { grid-template-columns: 1fr; }
    .road-map svg { max-height: 120px; }
}

/* ---- the 2028 map's header and bar, in the site's own look (owner, 6 Nov 2026: "redesigned to fit in with the rest of the
   site - complete with the buttons that we borrowed the hover state from google"). The kicker takes the theme's colour (the
   map's script now gives it the site's .kicker class); every group of buttons carries a small label above it; the election is
   a row of underlined tabs like the site's section tabs; the other choices are square segmented buttons, filled in ink when
   on; js/glow.js gives all of them the circling ring on hover. */
.hc__vt td:first-child { position: relative; }
.hc__vt td:first-child:has(.pl-logo), .hc__vt td:first-child:has(.party-logo) { padding-left: 30px; }
.hc__vt td:first-child .pl-logo, .hc__vt td:first-child .party-logo { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); margin: 0 !important; max-height: 16px; width: auto; }

.xmap--future .xmap__kick { color: var(--d-red, var(--tint-ink)); }
.xmap--future .xmap__titlebar { padding-bottom: 2px; }
.xmap--future .xmap__bar { align-items: flex-end; gap: 10px 20px; padding-top: 10px; padding-bottom: 12px; background: #f8f7f3; border-bottom: 0; }
.xmap--future .xmap__bar > [role=group] { position: relative; }
.xmap--future .xmap__bar > [role=group]::before { content: attr(aria-label); position: absolute; left: 0; bottom: calc(100% + 4px); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.xmap--future .xmap__bar { padding-top: 26px; }
.xmap--future .xmap__crumb { align-self: center; padding-right: 16px; margin-right: 0; border-right: 1px solid var(--hair, #d6d3cc); font: 800 var(--fs-md)/1.1 var(--font-ui); }

/* the election: underlined tabs */
.xmap--future .xmap__tabs { gap: 2px; border-bottom: 1px solid var(--hair, #d6d3cc); }
.xmap--future .xmap__tabs button, .xmap--paper.xmap--future .xmap__tabs button { min-height: 34px; padding: 0 14px; margin: 0; border: 0; background: none; color: var(--muted); font: 700 var(--fs-sm)/1 var(--font-ui); box-shadow: none; cursor: pointer; transition: color .15s; }
.xmap--future .xmap__tabs button:hover { color: var(--ink); }
.xmap--future .xmap__tabs button[aria-pressed=true], .xmap--paper.xmap--future .xmap__tabs button[aria-pressed=true] { background: none; color: var(--ink); border: 0; box-shadow: inset 0 -3px 0 var(--d-red, var(--tint-ink)); }

/* the other choices: square segmented buttons, ink when on */
.xmap--future .xmap__modes, .xmap--future .xmap__lens { gap: 0; }
.xmap--future .xmap__modes button, .xmap--future .xmap__lens button, .xmap--paper.xmap--future .xmap__modes button { min-height: 32px; padding: 0 12px; margin: 0 0 0 -1px; border: 1px solid var(--hair, #d6d3cc); border-radius: 0; background: #fff; color: var(--ink-2, #3b4150); font: 650 var(--fs-xs)/1 var(--font-ui); box-shadow: none; cursor: pointer; transition: color .15s, background .15s; }
.xmap--future .xmap__modes button:first-child, .xmap--future .xmap__lens .xmap__lk + button { margin-left: 0; }
.xmap--future .xmap__modes button:hover, .xmap--future .xmap__lens button:hover { color: var(--ink); background: #fbfaf7; }
.xmap--future .xmap__modes button[aria-pressed=true], .xmap--future .xmap__lens button[aria-pressed=true], .xmap--paper.xmap--future .xmap__modes button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; z-index: 1; }

/* the second row: polling misses and the national vote, on a white strip */
.xmap--future .xmap__what { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--hair, #e3e1db); border-bottom: 1px solid var(--hair, #e3e1db); background: #fff; }
.xmap--future .xmap__lk { color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.xmap--future .xmap__zoom button { position: relative; }

@media (max-width: 759px) {
    .xmap--future .xmap__bar { padding-top: 10px; align-items: stretch; }
    .xmap--future .xmap__bar > [role=group]::before { display: none; }
    .xmap--future .xmap__tabs button { flex: 1 0 auto; min-height: 38px; }
}

/* ---- the 2028 map on the home page's dark band (owner, 6 Nov 2026: "more cinematic"). The section takes the site's dark-band
   tokens (the same set .section-band--dark uses), so the kicker, labels and buttons follow the theme; the map keeps the paper
   palette for the states, with borders in the band's colour. The hover card stays white, like a card laid on the dark. */
.xmap--cinema {
    color-scheme: dark;
    --ink: var(--dk-ink, #fff); --ink-2: var(--dk-ink-2, #d4d4d4); --muted: var(--dk-muted, #a6a6a6); --hair: var(--dk-hair, #383838);
    --cin: var(--b3, #0a0a0a); --cin-2: color-mix(in oklab, var(--cin) 88%, #fff); --cin-3: color-mix(in oklab, var(--cin) 78%, #fff);
    --rk-stage: var(--cin); --rk-stage-2: var(--cin-2); --rk-stage-ink: var(--ink); --rk-stage-muted: var(--muted); --rk-stage-line: var(--hair);
    background: var(--cin); color: var(--ink); border-color: var(--cin);
}
.xmap--cinema .xmap__titlebar, .xmap--cinema .xmap__bar, .xmap--cinema .xmap__stage { background: var(--cin); }
.xmap--cinema .xmap__stage { background: radial-gradient(ellipse at 45% 45%, var(--cin-2) 0%, var(--cin) 72%); }
.xmap--cinema .xmap__titlebar::before { background: var(--ink); }
.xmap--cinema .xmap__kick { color: var(--dk-bad, #ff5a5f); }
.xmap--cinema .xmap__title, .xmap--cinema .xmap__crumb { color: var(--ink); }
.xmap--cinema .xmap__what { background: var(--cin-2); border-color: var(--hair); }
.xmap--cinema .xmap__tabs { border-bottom-color: var(--hair); }
.xmap--cinema .xmap__tabs button, .xmap--paper.xmap--cinema .xmap__tabs button { color: var(--muted); background: none; }
.xmap--cinema .xmap__tabs button:hover { color: var(--ink); }
.xmap--cinema .xmap__tabs button[aria-pressed=true], .xmap--paper.xmap--cinema .xmap__tabs button[aria-pressed=true] { color: var(--ink); background: none; box-shadow: inset 0 -3px 0 var(--dk-bad, #ff5a5f); }
.xmap--cinema .xmap__modes button, .xmap--cinema .xmap__lens button, .xmap--paper.xmap--cinema .xmap__modes button { background: var(--cin-2); border-color: var(--hair); color: var(--ink-2); }
.xmap--cinema .xmap__modes button:hover, .xmap--cinema .xmap__lens button:hover { background: var(--cin-3); color: var(--ink); }
.xmap--cinema .xmap__modes button[aria-pressed=true], .xmap--cinema .xmap__lens button[aria-pressed=true], .xmap--paper.xmap--cinema .xmap__modes button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--cin); }
.xmap--cinema .xmap__vout { color: var(--ink); }

/* the map itself: borders in the band's colour */
.xmap--cinema .st-line, .xmap--paper.xmap--cinema.xmap--states .st-line, .xmap--paper.xmap--cinema.xmap--states .xm-states .st { stroke: var(--cin); }
.xmap--cinema svg.is-focus .xm-outline .st-line { stroke: var(--ink); }
.xmap--cinema .ct { stroke: rgba(0, 0, 0, .35); }
.xmap--cinema .ds { stroke: rgba(0, 0, 0, .55); }
.xmap--cinema .hv, .xmap--cinema .hl, .xmap--cinema .sel, .xmap--cinema .xm-hv, .xmap--cinema .xm-sel { stroke: #fff; }
.xmap--cinema .xm-lab { fill: #fff; stroke: rgba(0, 0, 0, .75); }

/* the panel: the band, a quarter see-through, with the ABC-style cards in dark tints */
.xmap--cinema .xmap__panel { background: color-mix(in srgb, var(--cin) 84%, transparent); color: var(--ink); box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 0 1px var(--hair); }
.xmap--cinema .xm-h, .xmap--cinema .xm-list button, .xmap--cinema .xmap__panel .xm-dt tr td { color: var(--ink); }
.xmap--cinema .xm-kick, .xmap--cinema .xm-p, .xmap--cinema .xm-hint { color: var(--muted); }
.xmap--cinema .xm-card { background: color-mix(in srgb, #1375b7 22%, var(--cin)); color: var(--ink); }
.xmap--cinema .xm-card--r { background: color-mix(in srgb, #c93135 24%, var(--cin)); }
.xmap--cinema .xm-card--o { background: var(--cin-2); }
.xmap--cinema .xm-card__st { border-right-color: rgba(255, 255, 255, .12); }
.xmap--cinema .xm-card__st small, .xmap--cinema .xm-card__k { color: var(--muted); }
.xmap--cinema .xm-card__k em { color: var(--ink); }
.xmap--cinema .xm-card__body > b i { color: #5ea8e6; }
.xmap--cinema .xm-card--r .xm-card__body > b i { color: #ff7a7d; }
.xmap--cinema .xm-mini { background: var(--hair); } .xmap--cinema .xm-mini b { background: var(--ink); }

/* the controls laid on the map */
.xmap--cinema .xmap__zoom { box-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.xmap--cinema .xmap__zoom button, .xmap--cinema .xmap__ctl button, .xmap--cinema .xmap__out { background: var(--cin-2); color: var(--ink); border-color: var(--hair); }
.xmap--cinema .xmap__zoom button:hover, .xmap--cinema .xmap__ctl button:hover { background: var(--cin-3); }
.xmap--cinema .xmap__legend { background: color-mix(in srgb, var(--cin) 82%, transparent); color: var(--ink); }
.xmap--cinema .xmap__note { color: var(--muted); border-top-color: var(--hair); background: var(--cin); }
.xmap--cinema .xmap__note a { color: var(--ink); }
@media (max-width: 759px) {
    .xmap--cinema .xmap__optbtn { background: var(--cin-2); border-color: var(--hair); color: var(--ink); }
    .xmap--cinema .xmap__panel { background: var(--cin-2); box-shadow: none; }
}

/* the small map fills the road's width, its electoral votes and the link in one line under it (owner, 6 Nov 2026: "poor
   alignment and big space gaps around the map") */
.road-map { display: block; margin: 4px 0 6px; }
.road-map svg { width: 100%; height: auto; max-height: 230px; margin: 0 auto; }
.road-map__k { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); text-align: left; }
.road-map__k b { font-size: var(--fs-md); }
.road-map__k em { margin: 0 0 0 auto; }
.ush2:not(.ush2--home) .ush2__road > .kicker { margin-bottom: 0; }

/* the states' labels, as CNN's (owner, 6 Nov 2026) */
.xm-stlabs { pointer-events: none; }
.xm-stl { fill: #fff; stroke: rgba(0, 0, 0, .35); paint-order: stroke; font-family: var(--font-ui); font-weight: 700; text-anchor: middle; dominant-baseline: central; letter-spacing: .02em; }
.xm-stl.is-dark { fill: #1b1d21; stroke: rgba(255, 255, 255, .45); }
.xm-stl--b { stroke: none; }
.xm-stl-lead { stroke: rgba(255, 255, 255, .35); }
.xm-stb { stroke: var(--cin, #0a0a0a); pointer-events: auto; cursor: pointer; }
.xm-stb:hover, .xm-stb:focus-visible { stroke: #fff; outline: none; }
.xmap.is-focus .xm-stlabs, .xmap__svg.is-focus .xm-stlabs { display: none; }

/* the CNN fade: the band lit faintly from behind the map, darker at the edges */
.xmap--cinema .xmap__stage { background:
    radial-gradient(ellipse 62% 70% at 42% 48%, color-mix(in oklab, var(--cin) 80%, #2b3b6e) 0%, transparent 72%),
    linear-gradient(180deg, var(--cin) 0%, color-mix(in oklab, var(--cin) 90%, #1f2a52) 50%, var(--cin) 100%); }
.xmap--cinema .xmap__titlebar, .xmap--cinema .xmap__bar { background: var(--cin); }

/* the hover card's borders thin, as CNN's (owner, 6 Nov 2026: "the borders on the popup are too thick") */
.hc { border: 1px solid rgba(0, 0, 0, .12); border-top: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.hc__n { border-left-width: 2px; }
.hc__vt td:first-child { border-left-width: 2px; }
.xmap--paper .xmap__panel .hc { border: 1px solid #e3e1db; }

/* the zoom buttons in a row at the foot of the map, left of the panel, clear of Alaska and the legend (owner, 6 Nov 2026) */
@media (min-width: 760px) {
    .xmap--future .xmap__zoom { flex-direction: row; left: auto; bottom: 16px; right: calc(max(16px, calc(50vw - 640px)) + min(380px, 34%) + 28px); }
    .xmap--future .xmap__zoom button { margin: 0 0 0 -1px; width: 32px; height: 32px; }
}
.xmap--cinema .xmap__zoom button { background: var(--cin-3); border-color: color-mix(in oklab, var(--hair) 60%, #fff); }

/* the hover card on the dark band: dark too, with the same thin edge (owner, 6 Nov 2026: "the popup style on this dark theme
   also will need to be dark") */
.xmap--cinema .hc { background: var(--cin-2); color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.xmap--cinema .hc__sub, .xmap--cinema .hc__p, .xmap--cinema .hc__v, .xmap--cinema .hc__in, .xmap--cinema .hc__foot { color: var(--muted); }
.xmap--cinema .hc__foot a { color: var(--ink); }
.xmap--cinema .hc__t td { border-bottom-color: var(--hair); }
.xmap--cinema .hc__n i { background: color-mix(in srgb, var(--pc) 34%, var(--cin-2)); }
.xmap--cinema .hc__in i { background: var(--hair); } .xmap--cinema .hc__in b { background: var(--ink); }
.xmap--cinema .hc__vt { color: var(--ink); }
.xmap--cinema .hc__vt th { color: var(--muted); border-bottom-color: var(--hair); }
.xmap--cinema .hc__vt td { border-bottom-color: color-mix(in oklab, var(--hair) 70%, transparent); }
.xmap--cinema .hc__t tr.is-win .hc__p, .xmap--cinema .hc__t tr.is-win .hc__v { color: #fff; }
.xmap--cinema.xmap--paper .xmap__panel .hc { border: 1px solid var(--hair); }
.xmap--cinema .hc__t td, .xmap--cinema .hc__t td span, .xmap--cinema .hc__head b { color: var(--ink); }
.xmap--cinema .hc__t tr.is-win td { color: #fff; }
.xmap.xmap--cinema .hc__t tr td { color: var(--ink); }
.xmap.xmap--cinema .hc__t tr td.hc__p, .xmap.xmap--cinema .hc__t tr td .hc__v { color: var(--muted); }
.xmap.xmap--cinema .hc__t tr.is-win td { color: #fff; }

/* a stronger CNN fade (owner, 6 Nov 2026: "barely noticeable"; not blue): the whole band lit from behind the map in a lighter shade of its own colour, falling
   away to the band's own black at the edges; the bars and stage are see-through so it runs as one picture */
.xmap--cinema {
    background:
        radial-gradient(ellipse 60% 70% at 40% 60%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 42%, transparent 75%),
        linear-gradient(180deg, var(--cin) 0%, color-mix(in oklab, var(--cin) 86%, #fff) 55%, var(--cin) 100%);
}
.xmap--cinema .xmap__titlebar, .xmap--cinema .xmap__bar, .xmap--cinema .xmap__stage, .xmap--cinema .xmap__note { background: transparent; }
.xmap--cinema .xmap__what { background: rgba(255, 255, 255, .04); }
.xmap--future .xmap__out { display: none !important; }
/* the panel's county table: each row's text centred in its row (owner, 6 Nov 2026) */
.xmap .xm-dt td, .xmap .xm-dt th { vertical-align: middle; }
.xmap .xm-dt tbody td { height: 30px; padding-top: 0; padding-bottom: 0; line-height: 1.2; }
.xmap.xmap--cinema .xmap__panel { border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 34px rgba(0, 0, 0, .55); }

/* state borders as CNN draws them (owner, 6 Nov 2026): hairlines on the whole country, firmer once zoomed in, and the chosen
   state traced in a bold white line with a dark edge */
.xmap--future .st-line, .xmap--paper.xmap--future.xmap--states .st-line { stroke-width: .6; }
.xmap--paper.xmap--future.xmap--states .xm-states .st { stroke-width: .6; vector-effect: non-scaling-stroke; }
.xmap--future.is-zoomed .st-line, .xmap--future .xmap__svg.is-focus .st-line { stroke-width: 1.2; }
.xmap--future .xmap__svg.is-focus .xm-outline .st-line.on { stroke: #fff; stroke-width: 3; paint-order: stroke; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)); }
/* the borders in a soft light line, not the band's black (owner, 6 Nov 2026: "heavy black ... less jarring") */
.xmap--cinema .st-line, .xmap--paper.xmap--cinema.xmap--states .st-line, .xmap--paper.xmap--cinema.xmap--states .xm-states .st { stroke: rgba(255, 255, 255, .42); }
.xmap--cinema.is-zoomed .st-line, .xmap--cinema .xmap__svg.is-focus .xm-outline .st-line:not(.on) { stroke: rgba(255, 255, 255, .5); }
.xmap--cinema .xm-stb { stroke: rgba(255, 255, 255, .5); }
/* the vote table fits the card: fixed columns, headings may wrap, figures never spill (owner, 6 Nov 2026) */
.hc { box-sizing: border-box; overflow: hidden; }
.hc__vt { table-layout: fixed; width: 100%; max-width: 100%; }
.hc__vt th:first-child, .hc__vt td:first-child { width: 36%; }
.hc__vt th { white-space: normal; line-height: 1.15; vertical-align: bottom; }
.hc__vt .num { padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc__vt td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc__vt th.num { white-space: normal; overflow: visible; text-overflow: clip; }
/* the party lines in the card the same weight: a gap between the line and the shaded name, so the red shade does not read as a
   thicker red line (owner, 6 Nov 2026) */
.hc__n i { left: 3px !important; }
.hc__n span { padding-left: 10px; }
.hc__n:has(.pl-logo) span, .hc__n:has(.party-logo) span { padding-left: 34px; }
.hc__n .pl-logo, .hc__n .party-logo { left: 9px; }
/* the panel on a whole pixel: half a pixel blurred its 2px party lines over three pixels, and the red one read thicker than the
   blue (owner, 6 Nov 2026) */
.xmap--future .xmap__panel { margin-right: round(max(16px, calc(50vw - 640px)), 1px); }
.hc__t { border-spacing: 0; }
.xmap.xmap--future { margin-left: round(down, calc(50% - 50vw), 1px); }
/* the shaded name kept well clear of the party line, and the red shade toned to match the blue's weight, so neither line reads
   wider (owner, 6 Nov 2026: "i still see this") */
.hc__n i { left: 6px !important; }
.hc__n span { padding-left: 13px; }
.hc__n:has(.pl-logo) span, .hc__n:has(.party-logo) span { padding-left: 37px; }
.hc__n .pl-logo, .hc__n .party-logo { left: 12px; }
.xmap--cinema .hc__n i { background: color-mix(in srgb, var(--pc) 30%, var(--cin-2)); }
.xmap--cinema .hc__t tr[style*="c93135" i] .hc__n i { background: color-mix(in srgb, var(--pc) 22%, var(--cin-2)); }
/* the two party lines measure the same (2px, same position) but on the dark card the deep blue reads thinner than the red: a
   brighter blue and a slightly deeper red on the dark theme give them the same visual weight (owner, 6 Nov 2026) */
.xmap--cinema tr[style*="1375b7" i] > .hc__n, .xmap--cinema tr[style*="1375b7" i] > td:first-child { border-left-color: #3d9ae6; }
.xmap--cinema tr[style*="c93135" i] > .hc__n, .xmap--cinema tr[style*="c93135" i] > td:first-child { border-left-color: #b8282c; }
/* the party line as a bar the height of the shaded name, as CNN draws it, not a cell border running the full row: the two bars
   no longer touch end to end (owner, 6 Nov 2026) */
.hc__n { border-left: 0 !important; }
.hc__n::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--pc); }
.xmap--cinema tr[style*="1375b7" i] > .hc__n::before { background: #3d9ae6; }
.xmap--cinema tr[style*="c93135" i] > .hc__n::before { background: #c93135; }
.hc__vt tbody td:first-child { border-left: 0 !important; }
.hc__vt tbody tr[style] td:first-child::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--pc); }
.xmap--cinema .hc__vt tr[style*="1375b7" i] td:first-child::before { background: #3d9ae6; }
@media (hover: hover) and (pointer: fine) { .xmap--future .xmap__svg { cursor: grab; } .xmap--future .xmap__svg:active { cursor: grabbing; } }
/* the polling-miss strip as a closed box with room inside it (owner, 6 Nov 2026: "fix the padding ... the left and right border
   is missing") */
.xmap--future .xmap__what { box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--hair); gap: 8px 20px; }
.xmap--cinema .xmap__what { border-color: rgba(255, 255, 255, .14); }
.xmap--future .xmap__lens .xmap__lk, .xmap--future .xmap__vote .xmap__lk { margin-right: 12px; }
/* the national-vote handle: a thin edge (owner, 6 Nov 2026) */
.xmap--future .xmap__vote input[type=range]::-webkit-slider-thumb { width: 12px; height: 20px; border: 1px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.xmap--future .xmap__vote input[type=range]::-moz-range-thumb { width: 10px; height: 18px; border: 1px solid #fff; }
/* the bar's labels sit inline before their buttons, as "If the polls miss like" does on the row below; the election tabs need
   none (owner, 6 Nov 2026: "the election label seems orphaned") */
.xmap--future .xmap__bar { padding-top: 10px; align-items: center; }
.xmap--future .xmap__bar > [role=group]::before { position: static; align-self: center; margin-right: 10px; bottom: auto; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; }
.xmap--future .xmap__bar > .xmap__tabs::before { content: none; display: none; }
.xmap--future .xmap__bar > .xmap__views::before { content: "Show"; }
.xmap--future .xmap__bar > .xmap__modes:not(.xmap__views)::before { content: "Color by"; }
.xmap--future .xmap__tabs { align-self: stretch; align-items: stretch; }
.xmap--future .xmap__crumb { align-self: center; }
/* plainer names for the two choices (owner, 6 Nov 2026: "it isn't obvious what changing whole state vs ... does") */
.xmap--future .xmap__bar > .xmap__views::before { content: "Shade"; }
.xmap--future .xmap__bar > .xmap__modes:not(.xmap__views)::before { content: "Show"; }
/* the hover card's edge in the colour of whoever is ahead (owner, 6 Nov 2026) */
.hc.hc--D, .hc.hc--R, .hc.hc--I { border-left: 3px solid var(--hc-p); }
.hc--D { --hc-p: #1375b7; } .hc--R { --hc-p: #c93135; } .hc--I { --hc-p: #cea44b; }
.xmap--cinema .hc--D { --hc-p: #3d9ae6; }
/* the state borders as an etched divider, like NFLDraftBuzz's: a dark pixel with a lighter pixel straight under it, touching, so
   each border reads as a fine groove (owner, 6 Nov 2026). Only on the whole country: zoomed in, the borders are plain lines and
   the chosen state keeps its white outline */
.xmap--cinema .xm-outline .st-line { stroke: rgba(0, 0, 0, .7); stroke-width: 1; }
.xmap--cinema .xm-outline { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .22)); }
.xmap--cinema.is-zoomed .xm-outline .st-line, .xmap--cinema .xmap__svg.is-focus .xm-outline .st-line:not(.on) { stroke: rgba(0, 0, 0, .7); stroke-width: 1; }
.xmap--cinema .xmap__svg.is-focus .xm-outline .st-line.on { filter: none; }
.xmap--paper.xmap--cinema.xmap--states .xm-states .st { stroke: none; }
/* the groove stronger, so it reads at a glance: a firmer dark pixel and a brighter one under it */
.xmap--cinema .xm-outline .st-line:not(.on), .xmap--cinema.is-zoomed .xm-outline .st-line:not(.on) { stroke: rgba(0, 0, 0, .85); stroke-width: 1; }
.xmap--cinema .xm-outline { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .42)); }
/* the groove exactly as NFLDraftBuzz's divider: 50% black, then 50% white straight under it */
.xmap--cinema .xm-outline .st-line:not(.on), .xmap--cinema.is-zoomed .xm-outline .st-line:not(.on) { stroke: rgba(0, 0, 0, .5); stroke-width: 1; }
.xmap--cinema .xm-outline { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
.xmap--cinema .xm-outline .st-line:not(.on), .xmap--cinema.is-zoomed .xm-outline .st-line:not(.on) { stroke: rgba(0, 0, 0, .25); }
.xmap--cinema .xm-outline { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .75)); }
.xmap--cinema .xm-outline { filter: none; }
/* the state borders in the band's own colour, so each border reads as a gap showing the background (owner, 6 Nov 2026: "just
   make the border between the states show the background") */
.xmap--cinema .xm-outline { filter: none; }
.xmap--cinema .xm-outline .st-line:not(.on), .xmap--cinema.is-zoomed .xm-outline .st-line:not(.on) { stroke: color-mix(in oklab, var(--cin) 86%, #fff); stroke-width: 1; }
.xmap--cinema .xmap__svg.is-focus .xm-outline .st-line:not(.on) { stroke-width: 1.5; }
/* the drawn border lines hidden on the dark band: the gaps cut by the mask are the borders now; the chosen state keeps its line */
.xmap--cinema .xm-outline .st-line:not(.on), .xmap--cinema.is-zoomed .xm-outline .st-line:not(.on), .xmap--cinema .xmap__svg.is-focus .xm-outline .st-line:not(.on) { stroke: none; }

/* the map runs up under the title and the bar, which lie over it a little see-through, like the info box (owner, 6 Nov 2026) */
@media (min-width: 760px) {
    .xmap--cinema .xmap__stage { grid-row: 1 / 4; height: calc(min(78vh, calc((100vw - 460px) / 1.6 + 40px)) + 150px); min-height: 570px; }
    .xmap--cinema .xmap__titlebar, .xmap--cinema .xmap__bar { position: relative; z-index: 4; background: color-mix(in srgb, var(--cin) 58%, transparent); }
    .xmap--cinema .xmap__bar { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); }
    .xmap--cinema .xmap__panel { z-index: 3; }
    .xmap--cinema { grid-template-rows: auto auto 1fr; }
}
/* Back and Whole country sit just under the header that now lies over the map */
@media (min-width: 760px) { .xmap--cinema .xmap__ctl { top: calc(var(--xm-head, 0px) + 12px); z-index: 5; } }

/* the chosen state's outline from its own counties or districts (drawn in xmap.js drawFocus) */
.xm-focus { pointer-events: none; }
.xm-halo-edge path { fill: rgba(0, 0, 0, .55); stroke: rgba(0, 0, 0, .55); stroke-width: 6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.xm-halo path { fill: #fff; stroke: #fff; stroke-width: 3.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.xmap__svg.has-halo .xm-outline .st-line.on { display: none; }
.xm-halo path { stroke-width: 6px; } .xm-halo-edge path { stroke-width: 9px; }
.hc__chip { text-transform: none; letter-spacing: .01em; white-space: nowrap; }
/* the turnout sliders: a plain track for how many vote; the party colours for which side turns out more */
.xmap__turn input[type=range] { background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .55)) !important; }
.xmap--future .xmap__what { row-gap: 10px; }
.xmap__turn .xmap__vout b { color: var(--ink); }
/* in flight the view is redrawn every frame (xmap.js fly): the county shapes, labels and arrows step aside so it stays smooth and
   sharp, and come back on landing; the states (or the House districts) carry the picture meanwhile */
.xmap__svg.is-flying .xm-detail .ct, .xmap__svg.is-flying .xm-focus .ct, .xmap__svg.is-flying .xm-labels, .xmap__svg.is-flying .xm-arrows, .xmap__svg.is-flying .xm-stlabs { display: none; }
/* the sliders' readouts keep a fixed width, so the track never changes length under the reader's hand as the text grows (owner,
   6 Nov 2026: "the slider is jumpy and not smooth") */
.xmap--future .xmap__vote .xmap__vout { flex: none; justify-content: flex-start; font-variant-numeric: tabular-nums; }
.xmap--future .xmap__vote:not(.xmap__turn):not(.xmap__skew) .xmap__vout { width: 15em; }
.xmap--future .xmap__turn .xmap__vout { width: 17em; }
.xmap--future .xmap__skew .xmap__vout { width: 13em; }
.xmap--future .xmap__vote input[type=range] { flex: 1 1 auto; }
.xmap--future .xmap__vote input[type=range]:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 2px; }
.xmap--future .xmap__vote input[type=range]:focus:not(:focus-visible) { outline: none; }
/* the readout's parts never overlap: each keeps its own width */
.xmap--future .xmap__vout span { min-width: 0; text-align: left; flex: none; white-space: nowrap; }
.xmap--future .xmap__vout { gap: 10px; overflow: hidden; }
/* no red ring on a slider while it is moved */
.xmap--future .xmap__vote input[type=range], .xmap--future .xmap__vote input[type=range]:focus, .xmap--future .xmap__vote input[type=range]:active { outline: none !important; box-shadow: none !important; border: 0 !important; }
.xmap--future .xmap__vote input[type=range]:focus-visible { outline: 1px solid rgba(255, 255, 255, .5) !important; outline-offset: 3px; }
.xmap--future .xmap__turn .xmap__vout { width: 20em; }
.xmap--future .xmap__lk { white-space: nowrap; }
/* the answer the two settings make: the national vote, beside turnout */
.xmap__result { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; padding-left: 14px; border-left: 1px solid var(--hair); white-space: nowrap; }
.xmap__result span { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.xmap__result b { font: 800 var(--fs-lg)/1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.xmap__result b.is-d { color: #5ea8e6; } .xmap__result b.is-r { color: #ff6a6d; }
.xmap--future .xmap__vote:not(.xmap__turn):not(.xmap__skew) .xmap__vout { width: 17em; }
.xmap--future .xmap__turn { flex-basis: 100%; }
.xmap--future .xmap__turn input[type=range] { max-width: 520px; }
/* turnout as at past elections: small segmented buttons after the readout */
.xmap__tpre { display: inline-flex; flex-wrap: wrap; gap: 0; }
.xmap__tpre button { min-height: 28px; padding: 0 9px; margin-left: -1px; border: 1px solid var(--hair); background: var(--cin-2, #1b1b1b); color: var(--ink-2); font: 650 var(--fs-2xs)/1 var(--font-ui); cursor: pointer; white-space: nowrap; }
.xmap__tpre button small { font-weight: 500; color: var(--muted); margin-left: 3px; font-size: var(--fs-2xs); }
.xmap__tpre button:hover { color: var(--ink); background: var(--cin-3, #262626); }
.xmap__tpre button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--cin, #0a0a0a); position: relative; z-index: 1; }
.xmap__tpre button[aria-pressed=true] small { color: var(--cin, #0a0a0a); }
.xmap--future .xmap__turn { flex-wrap: wrap; row-gap: 8px; }
.xmap--future .xmap__turn .xmap__vout { width: 12em; }
.xmap--future .xmap__turn .xmap__vout { width: 14em; }

/* turnout as one control (owner, 6 Nov 2026: "the historical options are just dumped at the bottom"): label, then the past
   elections as a segmented choice, then the slider for any other figure, then the readout and the national vote */
.xmap--future .xmap__turn { flex-wrap: nowrap; align-items: center; gap: 12px; }
.xmap--future .xmap__turn .xmap__lk { order: 0; }
.xmap--future .xmap__turn .xmap__tpre { order: 1; flex: none; flex-wrap: nowrap; }
.xmap--future .xmap__turn input[type=range] { order: 2; flex: 1 1 140px; min-width: 120px; max-width: none; }
.xmap--future .xmap__turn .xmap__vout { order: 3; width: 13em; }
.xmap--future .xmap__turn .xmap__result { order: 4; }
.xmap__tpre button { min-height: 30px; display: inline-flex; align-items: center; }
@media (max-width: 1180px) {
    .xmap--future .xmap__turn { flex-wrap: wrap; }
    .xmap--future .xmap__turn .xmap__tpre { order: 1; flex-basis: auto; }
    .xmap--future .xmap__turn input[type=range] { order: 2; flex-basis: 100%; }
}

/* 2028 forecast or 2026 count (owner, 6 Nov 2026): the count has no president, and none of the forecast's settings */
.xmap.is-2026 .xmap__what, .xmap.is-2026 .xmap__optbtn { display: none !important; }
.xmap--future .xmap__bar > .xmap__years::before { content: none; display: none; }
.xmap--future .xmap__years { margin-right: 4px; }
.hc__proj { margin-top: 8px; }
.hc__proj b { color: var(--ink, #121417); }


/* the map's controls in two even rows (owner, 6 Nov 2026: "super user unfriendly ... buttons of different sizes"):
   office tabs, then how to shade and colour on the right; below, the election, a single row of same-size buttons with the
   forecast and this year's count first and every past year that had the chosen office after them, scrolling sideways */
.xmap--future .xmap__bar { row-gap: 10px; }
.xmap--future .xmap__bar > .xmap__crumb { order: 0; }
.xmap--future .xmap__bar > .xmap__tabs { order: 1; }
.xmap--future .xmap__bar > .xmap__views { order: 2; margin-left: auto; }
.xmap--future .xmap__bar > .xmap__modes:not(.xmap__views) { order: 3; }
.xmap--future .xmap__bar > .xmap__optbtn { order: 4; }
.xmap--future .xmap__bar > .xmap__when { order: 5; flex: 1 0 100%; display: flex; align-items: center; gap: 4px; min-width: 0; }
.xmap--future .xmap__bar > .xmap__what { order: 6; }
.xmap--future .xmap__bar > .xmap__when::before { content: "Election"; position: static; margin-right: 10px; }
.xmap__when-k { margin: 0 6px 0 12px; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.xmap__when-past { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth; padding: 2px 0 4px; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.xmap--cinema .xmap__bar .xmap__tabs button, .xmap--cinema .xmap__bar .xmap__modes button, .xmap--cinema .xmap__when button, .xmap--cinema .xmap__when-past a {
    box-sizing: border-box; height: 32px; min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    font: 600 var(--fs-xs)/1 var(--font-ui); white-space: nowrap; }
.xmap--cinema .xmap__when button, .xmap--cinema .xmap__when-past a { flex: 0 0 auto; margin: 0; background: var(--cin-2); border: 1px solid var(--hair); color: var(--ink-2); border-radius: var(--radius-chip); }
.xmap--cinema .xmap__when button:hover, .xmap--cinema .xmap__when-past a:hover { background: var(--cin-3); color: var(--ink); }
.xmap--cinema .xmap__when button[aria-pressed=true], .xmap--cinema .xmap__when-past a[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--cin); }
.xmap--cinema .xmap__when-past button, .xmap--cinema .xmap__when-past a { min-width: 58px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.xmap--cinema .xmap__when > button[data-xm-year] { min-width: 112px; }
@media (max-width: 760px) {
    .xmap--future .xmap__bar > .xmap__views { margin-left: 0; }
    .xmap--future .xmap__bar > .xmap__when::before, .xmap__when-k { display: none; }
    .xmap--cinema .xmap__when > button[data-xm-year] { min-width: 0; }
}
/* a past year: the forecast's own controls step aside */
.xmap.is-past .xmap__what, .xmap.is-past .xmap__optbtn, .xmap.is-past .xmap__turn { display: none !important; }
/* counties as they were, or today's: only for a year before 1990 shown by county */
.xmap__bounds { display: none !important; }
.xmap.is-histable .xmap__bounds { display: flex !important; }
.xmap--future .xmap__bar > .xmap__bounds { order: 3; }
.xmap--future .xmap__bar > .xmap__modes.xmap__bounds:not(.xmap__views)::before { content: "Counties"; }
/* the year row: the newest six, then "All years" opens every year as a grid below (owner, 6 Nov 2026: the long scrolling strip) */
.xmap--cinema .xmap__allyears { flex: 0 0 auto; box-sizing: border-box; height: 32px; padding: 0 12px; margin-left: 4px; border: 1px dashed var(--hair); background: none; color: var(--ink-2); font: 600 var(--fs-xs)/1 var(--font-ui); border-radius: var(--radius-chip); cursor: pointer; white-space: nowrap; }
.xmap--cinema .xmap__allyears:hover { color: var(--ink); border-style: solid; }
.xmap__when-past { mask-image: none; overflow: visible; flex: 0 1 auto; }
.xmap.xm-allyears .xmap__when { flex-wrap: wrap; }
.xmap.xm-allyears .xmap__when-past { order: 9; flex: 1 0 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; padding: 8px 0 2px; }
.xmap--cinema .xmap__when-past a { flex: 0 0 auto; text-decoration: none; }
/* the 2026 count's totals (xmap.js totalsCard; owner, 7 Nov 2026): each figure with its share beneath it */
.xm-tot .hc__vt td.num { line-height: 1.15; }
/* the party name in the middle of its two-line row, level with its logo (which sits at the cell's middle; owner, 7 Nov 2026) */
.xm-tot .hc__vt td { vertical-align: middle; }
.xm-sh { display: block; font: 500 var(--fs-2xs)/1.2 var(--font-ui); opacity: .75; }
/* what a card's candidate rows show (xmap.js card cap; owner, 7 Nov 2026: "it is not obvious what these numbers refer to") */
.hc__cap { margin: 8px 0 0; font: 600 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: #5b6370; }
.xmap--cinema .hc__cap { color: var(--muted); }

/* the States/Counties switch hidden where it changes nothing (owner, 7 Nov 2026): the shading buttons take its place on the right */
.xmap--future .xmap__bar > .xmap__views[hidden] ~ .xmap__modes:not(.xmap__views):not(.xmap__bounds) { margin-left: auto; }

/* the hub's compact map (owner, 7 Nov 2026: the full explorer moved to /us/election-map): the four races and a card for each state; the years,
   the views, the shading and the national-vote settings are on the full map, one link away */
.xmap--compact .xmap__bar > .xmap__modes, .xmap--compact .xmap__bar > .xmap__when, .xmap--compact .xmap__bar > .xmap__what, .xmap--compact .xmap__bar > .xmap__optbtn { display: none !important; }
.xmap__full { order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; padding: 0 14px; font: 700 var(--fs-xs)/1 var(--font-ui); color: var(--ink, #121417); background: var(--cin-2, #fff); border: 1px solid var(--hair, #d6d3cc); border-radius: var(--radius-chip); text-decoration: none; white-space: nowrap; }
.xmap__full:hover { background: var(--cin-3, #f0efeb); color: var(--ink, #121417); text-decoration: none; }
@media (min-width: 760px) {
    .xmap--cinema.xmap--compact .xmap__stage { height: clamp(520px, 64vh, 680px); min-height: 0; }
}
@media (max-width: 759px) {
    .xmap__full { margin-left: 0; width: 100%; justify-content: center; }
}

/* the election map as its own page (/us/election-map; owner, 7 Nov 2026: "think what the cnn looks like"): flush under the site header,
   filling the screen, the title on the left and the key races as cards beside it */
.xmap--page { margin-top: calc(-28px * var(--density, 1)); margin-bottom: 0; }
.xmap--page .xmap__titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; }
.xmap--page .xmap__titlebar::before { flex: 0 0 100%; margin-bottom: 0; }
.xmap--page .xmap__head { flex: 1 1 auto; }
.xmap--page .xmap__title { font-size: var(--fs-lg); }
.xmap__keys { flex: 1 0 100%; min-width: 0; padding-bottom: 4px; }
.xmap__keys[hidden] { display: none; }
.xk-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.xmap__keys-k { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.xk-wrap { display: flex; align-items: stretch; gap: 6px; }
.xk-wrap > .xmap__keys-row { flex: 1 1 auto; min-width: 0; }
.xk-wrap.is-fit > .xk-nav { display: none; }
.xk-nav { flex: none; width: 26px; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--cin-2, #fff); color: var(--ink, #121417); border: 1px solid var(--hair, #d6d3cc); border-radius: var(--radius-chip); cursor: pointer; }
.xk-nav:hover:not(:disabled) { background: var(--cin-3, #f0efeb); }
.xk-nav:disabled { opacity: .35; cursor: default; }
.xk-nav svg { width: 12px; height: 12px; }
.xmap__keys-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x proximity; }
.xmap__keys-row::-webkit-scrollbar { display: none; }
.xk { flex: 0 0 176px; scroll-snap-align: start; display: block; box-sizing: border-box; padding: 6px 8px 7px; background: var(--cin-2, #fff); border: 1px solid var(--hair, #d6d3cc); border-left: 3px solid var(--pc); border-radius: var(--radius-chip); color: var(--ink, #121417); font: 600 var(--fs-2xs)/1 var(--font-ui); text-align: left; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.xk:hover { background: var(--cin-3, #f0efeb); transform: translateY(-1px); }
.xk:focus-visible { outline: 2px solid var(--ink, #121417); outline-offset: 1px; }
.xk__top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.xk__top .xm-ico { width: 16px; height: 16px; }
.xk__top b { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xk__chip { flex: none; padding: 2px 5px; background: var(--pc); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: var(--radius-chip); }
.xk__split { display: flex; height: 20px; gap: 2px; }
.xk__s { display: flex; align-items: center; gap: 4px; min-width: 52px; padding: 0 5px; box-sizing: border-box; background: var(--pc); color: #fff; overflow: hidden; }
.xk__s--r { justify-content: flex-end; }
.xk__s b { font-weight: 700; font-variant-numeric: tabular-nums; }
.xk__logo { width: 14px; height: 14px; flex: none; display: block; }
.xk__s:not(.xk__s--r) { padding-left: 3px; } .xk__s--r { padding-right: 3px; }
.xk__pl { flex: none; width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #fff; border-radius: 50%; color: #fff; font-style: normal; font-weight: 800; font-size: var(--fs-2xs); line-height: 1; }
.xk__w { font-style: normal; font-weight: 800; }
.xk__line { display: block; height: 2px; margin-top: 5px; background: var(--hair, #d6d3cc); }
.xk__line i { display: block; height: 100%; background: var(--ink, #121417); }
@media (min-width: 760px) {
    .xmap--cinema.xmap--page .xmap__stage { height: max(calc(100dvh - var(--xm-site-head, 64px)), calc(var(--xm-over, 300px) + 540px)); min-height: 0; }
    /* the polling misses, national mood and turnout fold behind one button, as on a phone, so the map keeps the screen */
    .xmap--page .xmap__bar > .xmap__optbtn { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; padding: 0 12px; background: var(--cin-2, #fff); border: 1px solid var(--hair, #d6d3cc); border-radius: var(--radius-chip); color: var(--ink, #121417); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; }
    .xmap--page .xmap__bar > .xmap__optbtn[aria-expanded=true] { background: var(--ink, #121417); border-color: var(--ink, #121417); color: var(--cin, #fff); }
    .xmap--page:not(.opts-open) .xmap__bar > .xmap__what { display: none; }
}
@media (max-width: 759px) {
    .xmap--page { margin-top: calc(-28px * var(--density, 1)); }
}
/* the forecast card's four-column table (share, last count, expected votes): a narrower name and share so the vote counts fit */
.hc__vt--4 th:first-child, .hc__vt--4 td:first-child { width: 30%; }
.hc__vt--4 th:nth-child(2) { width: 15%; }
/* the polling-miss, national mood and turnout sliders on the same solid ground as the race cards (owner, 7 Nov 2026), not see-through
   over the map */
.xmap--cinema .xmap__bar > .xmap__what { background: var(--cin-2); border-color: var(--hair); }
/* the cards fade out at an edge with more beyond it (owner, 7 Nov 2026: "like the cnn one") */
.xmap__keys-row { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.xmap__keys-row.fade-l { --fl: 120px; } .xmap__keys-row.fade-r { --fr: 120px; }
/* the zoom buttons: the site's button padding left no room inside 32px, pushing + and - off centre and squashing the third button's
   icon (owner, 7 Nov 2026); the third ("whole country") repeats the Whole country button above, so on a wide screen it goes */
.xmap .xmap__zoom button { box-sizing: border-box; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.xmap .xmap__zoom svg { flex: none; width: 14px; height: 14px; }
@media (min-width: 760px) { .xmap .xmap__zoom [data-xm-zoom="home"] { display: none; } }
@media (min-width: 760px) { .xmap--future .xmap__zoom button { height: 32px; } }
/* no rule across the top of the dark map (owner, 7 Nov 2026) */
.xmap--cinema .xmap__titlebar::before { display: none; }

/* the map's own page: the projection written out under the map (Views/UsaPast/Map.cshtml; SEO, owner, 7 Nov 2026) */
.xmap--page .xmap__sub { margin: 4px 0 0; font: 500 var(--fs-sm)/1.3 var(--font-ui); color: var(--muted); }
.umap { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.umap__kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.umap__kinds a, .umap__kinds b { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-chip); font: 600 var(--fs-sm)/1 var(--font-ui); text-decoration: none; color: var(--ink); }
.umap__kinds b { background: var(--ink); border-color: var(--ink); color: #fff; }
.umap__kinds a:hover { background: var(--hover); }
.umap__lead .lead { max-width: 820px; }
.umap__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.umap__close ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.umap__fav { font-weight: 700; } .umap__fav--D { color: #2E6DB4; } .umap__fav--R { color: #C8312F; }
.umap__fig { margin: 0; } .umap__fig img { display: block; width: 100%; height: auto; }
.umap__t th[scope=row] { white-space: nowrap; }
.umap__faq dt { font-weight: 700; margin-top: 12px; } .umap__faq dd { margin: 4px 0 0; }
@media (max-width: 759px) { .umap__two { grid-template-columns: 1fr; } }

/* the sandbox (owner, 7 Nov 2026): its switch in the bar and its box at the top of the panel */
.xmap--future .xmap__bar > .xmap__sbx { order: 4; display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; padding: 0 12px; background: var(--cin-2, #fff); border: 1px solid var(--hair, #d6d3cc); border-radius: var(--radius-chip); color: var(--ink, #121417); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; }
.xmap--future .xmap__bar > .xmap__sbx[aria-pressed=true] { background: #f2c94c; border-color: #f2c94c; color: #121417; }
.xm-sbx { margin: 0 0 12px; padding: 10px 12px; background: var(--cin-2, #fff); border: 1px solid #f2c94c; border-left: 3px solid #f2c94c; border-radius: var(--radius-chip); }
.xm-sbx__k { margin: 0 0 6px; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #f2c94c; }
.xm-sbx__t { margin: 0 0 8px; font: 500 var(--fs-sm)/1.3 var(--font-ui); color: var(--ink); }
.xm-sbx__ch { padding: 1px 6px; background: #f2c94c; color: #121417; font: 700 var(--fs-2xs)/1.4 var(--font-ui); border-radius: var(--radius-chip); }
.xm-sbx__f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.xm-sbx__f label { display: flex; flex-direction: column; gap: 3px; font: 600 var(--fs-2xs)/1.2 var(--font-ui); color: var(--muted); }
.xm-sbx__f label:only-child { grid-column: 1 / -1; }
.xm-sbx__f input { box-sizing: border-box; width: 100%; height: 30px; padding: 0 6px; background: var(--cin, #fff); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--radius-chip); font: 600 var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.xm-sbx__b { display: flex; gap: 6px; margin-top: 8px; }
.xm-sbx__b button, .xm-sbx__all { height: 28px; padding: 0 12px; background: #f2c94c; color: #121417; border: 0; border-radius: var(--radius-chip); font: 700 var(--fs-xs)/1 var(--font-ui); cursor: pointer; }
.xm-sbx__b button + button, .xm-sbx__all { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.xm-sbx__n { margin: 8px 0 0; font: 400 var(--fs-xs)/1.4 var(--font-ui); color: var(--muted); }

/* ---------- the forecast map for every other country (wwwroot/js/wmap.js; owner, 7 Nov 2026: "the style should be replicated") ----------
   The US map's classes carry the stage, panel, cards and key strip; these are what a many-party map adds */
.xmap--world .wm-areas { stroke: var(--cin); stroke-linejoin: round; }
.xmap--world .wm-a { cursor: pointer; outline: none; }
.xmap--world .wm-a:focus-visible { stroke: #fff; }
.xmap--world .wm-ol { stroke: var(--cin); stroke-linejoin: round; }
.xmap--world .wm-fr { stroke: var(--hair); stroke-dasharray: 3 3; }
.xmap--world .xm-lab { text-anchor: middle; translate: none; font-weight: 600; }
.xmap--world .xmap__svg.is-flying .xm-labels { display: none; }
.wm-bar { margin: 6px 0 10px; font: 500 var(--fs-2xs)/1.3 var(--font-ui); color: var(--muted); }
.wm-bar__head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wm-bar__bar { position: relative; display: flex; height: 22px; background: var(--cin-3, #333); }
.wm-bar--sm .wm-bar__bar { height: 14px; }
.wm-bar__bar i { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; box-shadow: inset -1px 0 0 var(--cin); }
.wm-bar__bar i b { font: 700 var(--fs-2xs)/1 var(--font-ui); color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .55); }
.wm-bar--sm .wm-bar__bar i b { font-size: 10px; }
.wm-bar__tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.wm-bar__keys { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; color: var(--ink-2); }
.wm-bar__keys span { display: inline-flex; align-items: center; gap: 4px; }
.wm-bar__keys i { width: 8px; height: 8px; }
.xmap--world .hc__vt th, .xmap--world .hc__vt td { white-space: nowrap; }
.xmap--world .hc__vt td:first-child { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.xmap--world .hc__vt tr.is-lead td { font-weight: 700; }
.xmap--world .wm-nat { margin-bottom: 10px; }
.wm-ch { font-size: var(--fs-2xs); font-weight: 600; }
.wm-ch.is-up { color: #3aa76d; } .wm-ch.is-dn { color: #d9534f; }
.wm-gain { margin-left: 4px; font-size: var(--fs-2xs); color: var(--muted); }
.xmap--world .hc--w { border-left: 3px solid var(--pc, #888); }
.xmap--world .hc__chip { color: #fff; }
.wm-ini { flex: none; font: 800 9px/1 var(--font-ui); font-style: normal; letter-spacing: .02em; color: #fff; text-transform: uppercase; opacity: .92; }
.xmap--world .xm-sw--ramp i { width: 28px; }
.xmap--world .wm-card .xm-ico { width: 30px; height: 30px; flex: none; }
.xmap--world .wm-card .xm-card__st small { display: block; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xmap--world .wm-card__n { font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.xmap--world .wm-card__n em { font-weight: 600; }
@media (max-width: 759px) {
    .xmap--world .xmap__modes { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .xmap--world .xmap__modes button { flex: none; }
}
/* members, census figures and past years (owner, 8 Nov 2026: "Do them all") */
.wm-mem { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font: 500 var(--fs-xs)/1.3 var(--font-ui); }
.wm-mem img { width: 36px; height: 36px; object-fit: cover; flex: none; background: var(--cin-3, #333); }
.wm-mem small { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.wm-mem b { font-weight: 700; }
.wm-facts b { color: var(--ink); }
.xmap--world .wm-prof { margin-top: 8px; }
.xmap--world .wm-prof td:first-child { white-space: normal; max-width: 190px; border-left: 0; padding-left: 0; }
.xmap__stat { display: inline-flex; align-items: center; gap: 6px; }
.xmap__stat select { height: 32px; max-width: 220px; padding: 0 8px; background: var(--cin-2); color: var(--ink); border: 1px solid var(--hair); border-radius: 0; font: 600 var(--fs-xs)/1 var(--font-ui); }
.xmap--world .xmap__stat .xmap__lk { font-size: var(--fs-2xs); color: var(--muted); }
.xmap--world.is-past .xmap__optbtn, .xmap--world.is-past .xmap__what, .xmap--world.is-past [data-mode=risk] { display: none; }
.xmap--world .xmap__when button { min-width: 0; }
/* hex view, the reader's vote, coalitions, one party's map and path, search, logos (owner, 8 Nov 2026: "Do all that will help") */
.wm-vote { display: grid; gap: 8px; width: 100%; }
.wm-vote__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.wm-vote__row { display: grid; grid-template-columns: minmax(70px, 1fr) 2fr 38px; align-items: center; gap: 8px; padding-left: 8px; border-left: 3px solid var(--pc, #888); font: 600 var(--fs-xs)/1.2 var(--font-ui); color: var(--ink); }
.wm-vote__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-vote__row input { width: 100%; accent-color: var(--pc, #888); }
.wm-vote__row output { text-align: right; font-variant-numeric: tabular-nums; }
.wm-vote .xm-more { justify-self: start; }
.xmap--world.is-busy .xmap__svg { opacity: .7; transition: opacity .2s; }
.wm-yours { color: #f2c94c !important; }
.wm-co { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wm-co input { margin: 0; accent-color: var(--ink); }
.wm-coal { margin: -2px 0 10px; font: 600 var(--fs-xs)/1.3 var(--font-ui); color: var(--ink-2); }
.wm-coal .wm-bar__bar { height: 12px; margin-bottom: 4px; }
.wm-coal.is-maj b { color: #3aa76d; }
.wm-logo { width: 16px; height: 16px; object-fit: contain; flex: none; }
.wm-logo--k { width: 14px; height: 14px; background: #fff; padding: 1px; box-sizing: border-box; }
.xmap--world .wm-path__line td { border-bottom: 2px solid var(--ink) !important; }
.xmap__find input { height: 32px; width: 170px; padding: 0 8px; background: var(--cin-2); color: var(--ink); border: 1px solid var(--hair); border-radius: 0; font: 500 var(--fs-xs)/1 var(--font-ui); }
/* the closest seats written out under the full-width map: in the page's own column, as the guide above it (owner, 9 Nov 2026: "broken out of the main page margin") */
.wm-seo { width: min(1280px, calc(100% - 32px)); margin: 24px auto; box-sizing: border-box; padding-left: 0; padding-right: 0; }
.xmap--world .xmap__what { flex-direction: column; align-items: stretch; gap: 12px; }
.wm-pick { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.xmap--world .wm-nat td:first-child { max-width: 150px; }
/* the world map's bar laid out as the US one (owner, 8 Nov 2026: "look at the us one for something to copy style wise"): row one
   is the place, the view, the colouring and the options; row two the election and the seat search */
.xmap--world .xmap__head .page-intro { display: none; }
.xmap--world .xmap__bar > .xmap__when { flex: 1 1 auto; }
.xmap--world .xmap__bar > .xmap__when::before { content: attr(aria-label); }
.xmap--world .xmap__bar > .xmap__find { order: 6; margin-left: auto; }
.xmap--world .xmap__bar > .xmap__optbtn { order: 4; }
.xmap--world .xmap__find .xmap__lk { display: none; }
.xmap--world .xmap__find input { width: 190px; }
.xmap--world .xmap__bar > .xmap__what { order: 7; }
.xmap--world .xmap__bar > .xmap__when::before { content: none; }
.xmap--world .wm-rlab { font-weight: 700; letter-spacing: .04em; }
.xmap--world .xm-sum b { font-size: var(--fs-lg); }
.wm-sum__need { display: block; margin-top: 2px; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }
.xmap--world .xmap__panel .hc__vt td:first-child, .xmap--world .xmap__tip .hc__vt td:first-child { max-width: 220px; }
.xmap--world .xmap__panel .wm-nat td:first-child { max-width: 160px; }
.xmap--world .hc__vt { table-layout: auto; }
.xmap--world .hc__vt th.num, .xmap--world .hc__vt td.num { width: 1%; }
.xmap--world .wm-nat--votes th:nth-child(2), .xmap--world .wm-nat--votes td:nth-child(2) { display: none; }
/* phones: the view and the colouring share a row, and the seat search sits beside the elections (owner, 8 Nov 2026: check the screens) */
@media (max-width: 759px) {
    .xmap--world .xmap__bar > .xmap__views { flex: 0 0 auto; }
    .xmap--world .xmap__bar > .xmap__modes:not(.xmap__views) { flex: 1 1 0; min-width: 0; }
    .xmap--world .xmap__bar > .xmap__when { flex: 1 1 auto; width: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .xmap--world .xmap__bar > .xmap__find { order: 5; flex: 0 0 auto; margin-left: 0; }
    .xmap--world .xmap__find input { width: 120px; height: 36px; }
}
.wm-mems { margin: 8px 0 2px; font: 500 var(--fs-2xs)/1.4 var(--font-ui); color: var(--ink-2); }
.wm-mems small { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-2xs); }
.wm-mems p { margin: 0 0 4px; padding-left: 7px; border-left: 3px solid var(--pc, #888); }
.wm-mems b { color: var(--ink); }

/* the US head's race to 270, its tiles and links packed tighter (owner, 8 Nov 2026: "this section needs compacting and white space
   reducing"): a thinner bar, the whisker and its note close under it, the tiles' padding trimmed (the chance line keeps its height: its dot is placed for it) */
.ush2__270 { margin-bottom: 10px; }
.ush2__270b { height: 14px; margin-top: 6px; }
.ush2__270b em { top: -4px; bottom: -4px; }
.ush2__270r { height: 8px; margin-top: 2px; }
.ush2__270r span { top: 3px; }
.ush2__270r span::before, .ush2__270r span::after { top: -3px; height: 8px; }
.ush2__270n { margin-top: 0; }
.ush2__tiles, .ush2:not(.ush2--home) .ush2__tiles { gap: 8px; margin-bottom: 8px; align-items: stretch; }
.ush2__tile, .ush2:not(.ush2--home) .ush2__tile { padding: 6px 12px; }
.ush2__tile:not(.ush2__tile--line) svg { width: 30px; height: 30px; }
.ush2__tile--line { gap: 2px; }
.ush2__links { margin-top: 6px; }
/* Italy's lists under their coalitions on the forecast map's panel (js/wmap.js nationCard) */
.xmap--world .wm-nat tr.wm-sub td:first-child { padding-left: 22px; font-size: var(--fs-xs); color: var(--muted); }
.xmap--world .wm-nat tr.wm-sub td { font-size: var(--fs-xs); }
.xmap--world .wm-nat .wm-sp { color: var(--muted); font-weight: 500; }
/* the country fronts' map band (Views/World/_XMap.cshtml with XmCompact, from Snippets/_CountryHub): as /us's 2028 band, the map, the
   panel and a link to the full map; the search and the key-race strip stay on the full map */
.xmap--world.xmap--compact .xmap__bar > .xmap__find, .xmap--world.xmap--compact .xmap__keys, .xmap--world.xmap--compact .xmap__bar > .xmap__views { display: none !important; }
/* the chance line on the US head shorter (owner, 8 Nov 2026: "compacting and white space reducing"): its title and dates sit outside the
   chart's box, so the box is the chart alone and the dot, placed as a share of the box's height, stays on the line */
.ush2 .ush2__tile.ush2__tile--line, .ush2:not(.ush2--home) .ush2__tile.ush2__tile--line { padding-top: 24px; padding-bottom: 20px; }
.ush2__tile--line .ush2__trend { position: relative; }
.ush2__tile--line .ush2__trend-h { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 4px; }
.ush2__tile--line .ush2__trend-ax { position: absolute; left: 0; right: 0; top: 100%; margin: 3px 0 0; }
.ush2__tile--line .ush2__trend svg { height: 40px; }
.ush2__tile--line .ush2__trend-dot { margin-top: 0; }
.ush2__tile--line .ush2__trend-50 { top: calc(45% - 3px); }
/* the forecast map's party table always fits its panel: fixed columns for the figures, the party's name taking the rest and cut with an
   ellipsis when long ("Left (NFP and other left)"), rather than widening the table past the panel (owner, 8 Nov 2026: "check there are
   no horizontal scrollbars") */
.xmap--world .xmap__panel { overflow-x: hidden; }
.xmap--world .xmap__panel table.wm-nat { table-layout: fixed; width: 100%; }
.xmap--world .xmap__panel .wm-nat th.num { width: 3.3em; }
.xmap--world .xmap__panel .wm-nat th.num:nth-child(3) { width: 5em; }
.xmap--world .xmap__panel .wm-nat td:first-child { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xmap--world .xmap__panel .wm-nat td.num, .xmap--world .xmap__panel .wm-nat th.num { white-space: nowrap; padding-left: 4px; padding-right: 0; }
/* "if the polls miss like 2019" in the bar, styled as the years beside it, on a row of its own under them (Views/World/_XMap.cshtml) */
.xmap--world .xmap__bar > .xmap__misses { order: 5; flex: 1 0 100%; }
.xmap--world .xmap__bar > .xmap__misses .xmap__when-k { margin-left: 0; }
.xmap--world.xmap--compact .xmap__bar > .xmap__misses { display: none !important; }
/* the sandbox's sliders (js/xmap.js sbxBox): one row a figure, the slider and its number side by side */
.xmap .xm-sbx__f { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.xmap .xm-sbx__s { display: grid; gap: 3px; }
.xmap .xm-sbx__c { display: flex; align-items: center; gap: 8px; }
.xmap .xm-sbx__f .xm-sbx__c input[type=range] { flex: 1 1 auto; height: 22px; padding: 0; border: 0; background: none; accent-color: var(--ink); }
.xmap .xm-sbx__f .is-d input[type=range] { accent-color: #2e6db4; }
.xmap .xm-sbx__f .is-r input[type=range] { accent-color: #c8312f; }
.xmap .xm-sbx__f .xm-sbx__c input[type=number] { flex: 0 0 7.5em; width: 7.5em; text-align: right; font-variant-numeric: tabular-nums; }
/* the national totals pinned at the top of the US map's panel when a state is open (js/xmap.js natPin) */
.xmap .xm-natpin { position: sticky; top: -1px; z-index: 2; margin: -4px -4px 12px; padding: 8px 4px 10px; background: var(--cin-2, #15171b); border-bottom: 1px solid rgba(255,255,255,.12); }
.xmap--paper:not(.xmap--cinema) .xm-natpin { background: #fff; border-bottom-color: #e2e0da; }
.xmap .xm-natpin .bop { margin: 0; }
.xmap .xm-natpin .bop__note { display: none; }
.xmap .xm-natpin__v { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font: 600 var(--fs-xs)/1.2 var(--font-ui); }
.xmap .xm-natpin__v span { color: var(--muted); }
.xmap .xm-natpin__v .is-d { color: #6aa5e8; }
.xmap .xm-natpin__v .is-r { color: #ef6b62; }
.xmap .xm-natpin__v em { margin-left: auto; font-style: normal; }

/* the sandbox in the map's own style (owner, 8 Nov 2026: "sandbox design doesnt fit with the site design - make it match"): a section of
   the panel under a hairline, its label in the panel's small capitals, each figure as its name and number on one line with a slim
   slider in the party's colour under them; the switch and the undo buttons as the map's other buttons */
.xmap .xm-sbx { margin: 0 0 14px; padding: 2px 0 12px; background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; }
.xmap .xm-sbx__k { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--rk-stage-muted, var(--muted)); }
.xmap .xm-sbx__ch { padding: 1px 6px; background: none; border: 1px solid var(--hair); color: var(--ink); font: 600 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: .04em; border-radius: var(--radius-chip, 0); }
.xmap .xm-sbx__f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.xmap .xm-sbx__s { display: grid; gap: 4px; }
.xmap .xm-sbx__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-direction: row; font: 600 var(--fs-xs)/1.2 var(--font-ui); color: var(--ink-2, var(--ink)); }
.xmap .xm-sbx__s.is-d .xm-sbx__l::before, .xmap .xm-sbx__s.is-r .xm-sbx__l::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: #2e6db4; vertical-align: 0; }
.xmap .xm-sbx__s.is-r .xm-sbx__l::before { background: #c8312f; }
.xmap .xm-sbx__f .xm-sbx__row input[type=number] { flex: 0 0 auto; width: 7.5em; height: auto; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
    color: var(--ink); font: 700 var(--fs-sm)/1.2 var(--font-num, var(--font-ui)); font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield; }
.xmap .xm-sbx__f .xm-sbx__row input[type=number]::-webkit-inner-spin-button, .xmap .xm-sbx__f .xm-sbx__row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.xmap .xm-sbx__f .xm-sbx__row input[type=number]:focus { outline: none; border-bottom-color: var(--ink); }
.xmap .xm-sbx__f input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; --c: var(--ink); }
.xmap .xm-sbx__s.is-d input[type=range] { --c: #2e6db4; }
.xmap .xm-sbx__s.is-r input[type=range] { --c: #c8312f; }
.xmap .xm-sbx__f input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--hair); border-radius: 0; }
.xmap .xm-sbx__f input[type=range]::-moz-range-track { height: 3px; background: var(--hair); border-radius: 0; }
.xmap .xm-sbx__f input[type=range]::-moz-range-progress { height: 3px; background: var(--c); }
.xmap .xm-sbx__f input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; background: var(--c); border: 2px solid var(--cin-2, #fff); border-radius: 50%; box-shadow: 0 0 0 1px var(--c); }
.xmap .xm-sbx__f input[type=range]::-moz-range-thumb { width: 10px; height: 10px; background: var(--c); border: 2px solid var(--cin-2, #fff); border-radius: 50%; box-shadow: 0 0 0 1px var(--c); }
.xmap .xm-sbx__f input[type=range]:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.xmap .xm-sbx__b:empty { display: none; }
.xmap .xm-sbx__b { margin-top: 10px; }
.xmap .xm-sbx__b button, .xmap .xm-sbx__all { height: 28px; padding: 0 10px; background: var(--cin-2, #fff); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--radius-chip, 0); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; }
.xmap .xm-sbx__b button:hover, .xmap .xm-sbx__all:hover { border-color: var(--ink); }
.xmap .xm-sbx__n { margin: 10px 0 0; }
.xmap--future .xmap__bar > .xmap__sbx[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--cin, #121417); }
/* the sandbox's figures one line each, the name, the slider and the number side by side (owner, 8 Nov 2026: "sandbox is way overpadded
   - still doesnt fit"); the site's touch-size floor on inputs (44 px) is lifted here, the line itself is the target */
.xmap .xm-sbx { padding: 0 0 10px; margin-bottom: 12px; }
.xmap .xm-sbx__k { margin-bottom: 6px; }
.xmap .xm-sbx__f { gap: 2px; }
.xmap .xm-sbx__s { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 5.6em; align-items: center; column-gap: 8px; min-height: 26px; }
.xmap .xm-sbx__s > .xm-sbx__row { display: contents; }
.xmap .xm-sbx__s .xm-sbx__l { grid-column: 1; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 var(--fs-xs)/1.2 var(--font-ui); color: var(--ink-2, var(--ink)); }
.xmap .xm-sbx__s > input[type=range] { grid-column: 2; grid-row: 1; height: 16px; min-height: 0; }
.xmap .xm-sbx__f .xm-sbx__s input[type=number] { grid-column: 3; grid-row: 1; width: 100%; height: 22px; min-height: 0; padding: 0 0 1px; line-height: 1; font-size: var(--fs-xs); }
.xmap .xm-sbx__s.is-wide { grid-template-columns: minmax(0, 1fr) 4.2em; }
.xmap .xm-sbx__s.is-wide .xm-sbx__l { grid-column: 1 / -1; }
.xmap .xm-sbx__s.is-wide > input[type=range] { grid-column: 1; grid-row: 2; }
.xmap .xm-sbx__s.is-wide input[type=number] { grid-column: 2; grid-row: 2; }
.xmap .xm-sbx__n { margin: 6px 0 0; font-size: var(--fs-2xs); }
.xmap .xm-sbx__b { margin-top: 6px; }

/* the polling-miss rows: "Our forecast" stands first, apart, then "If the polls miss like" and the years (owner, 8 Nov 2026) */
.xmap__misses > [data-lens-btn="ours"], .xmap__lens > [data-lens-btn="ours"] { margin-right: 10px; }
.xmap__misses > [data-lens-btn="ours"] + .xmap__when-k { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--hair); }
.xmap--future .xmap__lens > [data-lens-btn="ours"] + .xmap__lk { margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--hair); }
.xmap--future .xmap__lens > [data-lens-btn="ours"] { margin-left: 0; }

/* the map pages' opening lines under the heading: what the page is and what it does, for readers and search engines (8 Nov 2026) */
.xmap__lede { margin: 8px 0 2px; max-width: 900px; font: 400 var(--fs-sm)/1.5 var(--font-ui); color: var(--rk-stage-muted, var(--muted)); }
@media (max-width: 759px) { .xmap__lede { font-size: var(--fs-xs); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 759px) { .xmap__lede { cursor: pointer; } .xmap__lede.m-open { display: block; -webkit-line-clamp: unset; overflow: visible; } }

/* the closest-seats table under the world maps: no heavy rules over it (owner, 8 Nov 2026: "get rid of these two thick black lines");
   the Swiss card and its heading each drew a 6 px rule, one above the other */
.card.wm-seo { border-top: 0 !important; box-shadow: none; }
.card.wm-seo > h2 { border-top: 0 !important; padding-top: 0; }
.card.wm-seo > h2::before { display: none !important; }

/* "How to use this map" (js/mapguide.js; owner, 8 Nov 2026): the button by the heading, the steps written out under the map, and the
   walk-through that lights up each control in turn */
/* the guide's button: one of the map's own buttons (square, 32px, hairline), top right of the heading, level with the title; on a
   phone under the lede (owner, 8 Nov 2026: "randomly stuck at the end of the text. It needs to fit with the site") */
.xmap__head:has(> .xm-guide-btn) { position: relative; }
.xm-guide-btn { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 32px; min-height: 0; padding: 0 12px 0 10px; margin: 0;
    border: 1px solid var(--rk-stage-line, rgba(127, 127, 127, .35)); border-radius: 0; background: var(--cin-2, transparent); color: var(--rk-stage-ink, var(--ink));
    font: 600 12px/1 var(--font-ui); cursor: pointer; white-space: nowrap; }
.xm-guide-btn::before { content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; font: 800 10px/1 var(--font-ui); }
.xm-guide-btn:hover { border-color: currentColor; }
.xmap__head > .xm-guide-btn { position: absolute; top: 14px; right: 0; }
@media (max-width: 759px) { .xmap__head > .xm-guide-btn { position: static; margin: 8px 0 2px; } }
.xmap__bar > .xm-guide-btn { margin-left: auto; }
.xm-guide-btn.is-new { animation: xm-guide-pulse 1.6s ease-out 1.2s 2; }
@keyframes xm-guide-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 196, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .xm-guide-btn.is-new { animation: none; } }
/* the steps written out under the map: the width of the page's content wherever the section sits (the old 50vw padding squeezed it
   into a narrow column when it sat inside a container; owner, 9 Nov 2026) */
.xm-howto { width: min(1280px, calc(100% - 32px)); margin: 8px auto 24px; padding: 0; box-sizing: border-box; }
.xm-howto h2 { margin: 0 0 10px; font: 800 var(--fs-lg)/1.2 var(--font-head, var(--font-ui)); }
.xm-howto__list { margin: 0; padding: 0; list-style: none; counter-reset: xmh; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 28px; }
.xm-howto__list li { counter-increment: xmh; position: relative; padding-left: 30px; font: 400 var(--fs-sm)/1.45 var(--font-ui); color: var(--ink-2, var(--ink)); }
.xm-howto__list li::before { content: counter(xmh); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--ink); color: var(--b1, #fff); font: 700 11px/1 var(--font-ui); }
.xm-tour { position: fixed; inset: 0; z-index: 2000; }
.xm-tour[hidden] { display: none; }
.xm-tour__spot { position: fixed; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(8, 10, 14, .62), 0 0 0 2px #ffc400; pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.xm-tour__card { position: fixed; box-sizing: border-box; padding: 14px 16px 12px; background: #fff; color: #1b1d21; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); border-top: 3px solid #ffc400; transition: top .25s ease, left .25s ease; }
.xm-tour__n { margin: 0 0 4px; font: 700 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #5b6370; }
.xm-tour__t { margin: 0 0 12px; font: 500 var(--fs-sm)/1.45 var(--font-ui); }
.xm-tour__acts { display: flex; align-items: center; gap: 8px; }
.xm-tour__x { margin-right: auto; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; background: none; color: #5b6370; font-size: 22px; line-height: 1; cursor: pointer; }
.xm-tour__b { min-height: 34px; padding: 0 14px; border: 1px solid #d6d3cc; background: #fff; color: #1b1d21; font: 700 var(--fs-xs)/1 var(--font-ui); cursor: pointer; }
.xm-tour__b--go { background: #1b1d21; border-color: #1b1d21; color: #fff; }
@media (prefers-reduced-motion: reduce) { .xm-tour__spot, .xm-tour__card { transition: none; } }

/* "if only women voted" and the other groups on the UK map (Views/World/_XMap.cshtml; owner, 9 Nov 2026) */
.xmap--world .xmap__bar > .xmap__groups { order: 5; flex: 1 0 100%; flex-wrap: wrap; }
.xmap--future .xmap__bar > .xmap__groups::before { content: none; }
.xmap__groups-k { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; margin: 0 4px; }
.xmap__groups-k:first-child { margin-left: 0; }
.xmap__groups-more { margin-left: 8px; font: 600 var(--fs-2xs)/1 var(--font-ui); color: var(--muted); white-space: nowrap; }
.xmap__groups-more:hover { color: var(--ink); }
/* the US 2028 map's group row sits in the bar like the year row (Views/Usa/_Us2028XMap.cshtml) */
.xmap--future .xmap__bar > .xmap__groups { order: 5; flex: 1 0 100%; flex-wrap: wrap; display: flex; align-items: center; gap: 4px; }
.xmap--compact .xmap__bar > .xmap__groups { display: none; }
.xmap__groups > [data-lens-btn="ours"] + .xmap__groups-k { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--hair); }

/* the map's controls grouped by question (Views/World/_XMap.cshtml, simple; the UK first, owner 9 Nov 2026): three questions on one
   row (Election, What if, Colour by), the choices for the answer on a second row, and a line saying what the map shows */
.xmap__bar > .xs { order: 5; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-top: 6px; }
.xs > .xs__sub, .xs > .xs__now { flex: 1 0 100%; }
/* the councils (May 2027) have no past results, polling misses or vote of their own on this map */
.xs.is-councils .xs__era, .xs.is-councils .xs__what { display: none; }
.xs__q { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; margin: 0; }
.xs__k { margin-right: 6px; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.xs__k2 { margin: 0 4px; font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--muted); white-space: nowrap; }
.xs__q > button, .xs__sub > button { box-sizing: border-box; height: 32px; min-height: 32px; padding: 0 12px; font: 600 var(--fs-xs)/1 var(--font-ui); white-space: nowrap; background: var(--cin-2); border: 1px solid var(--hair); color: var(--ink-2); border-radius: var(--radius-chip, 0); cursor: pointer; }
.xs__q > button:hover, .xs__sub > button:hover { background: var(--cin-3); color: var(--ink); }
.xs__q > button[aria-pressed=true], .xs__sub > button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--cin); }
.xs__colour { margin-left: auto; }
.xs__colour select { height: 32px; max-width: 280px; padding: 0 28px 0 10px; font: 600 var(--fs-xs)/1 var(--font-ui); background-color: var(--cin-2); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--radius-chip, 0); }
.xs.is-past .xs__what { opacity: .5; }
.xs__sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 10px; background: color-mix(in oklab, var(--cin-2) 70%, transparent); border-left: 3px solid var(--d-red, #e8364f); }
.xs__sub[hidden] { display: none; }
.xs__sub.wm-vote { display: block; }
.xs__sub.wm-vote[hidden] { display: none; }
.xs__now { grid-column: 1 / -1; margin: 0; font: 500 var(--fs-xs)/1.3 var(--font-ui); color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xs__now-k { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--d-red, #e8364f); }
.xs__now [data-xs-now] { color: var(--ink); font-weight: 650; }
.xs__reset { height: 26px; min-height: 0; padding: 0 10px; font: 600 var(--fs-2xs)/1 var(--font-ui); background: none; border: 1px solid var(--hair); color: var(--ink-2); cursor: pointer; border-radius: var(--radius-chip, 0); }
.xs__reset:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 1099px) { .xs__colour { margin-left: 0; } }
@media (max-width: 759px) { .xmap .xk-hide, .xmap .xk-show { display: none !important; } .xs > .xs__q { flex: 1 0 100%; } .xs__colour select { max-width: 100%; width: 100%; } }
.xs__k2--gap { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--hair); }
.wm-vote__oth { margin: 6px 0 0; font: 600 var(--fs-xs)/1.2 var(--font-ui); color: var(--muted); } .wm-vote__oth b { color: var(--ink); margin-left: 4px; }

/* the closest-seats strip (owner, 9 Nov 2026: "give us an option to hide the closest constituencies section to save space and move
   the stuff below up" ... "eliminate the space here ... not wasting valuable screen space"): on a wide screen its label sits beside
   the cards rather than on a line of its own, and Hide puts the strip away (the map moves up; "Show" beside the title brings it back) */
.xk-hide, .xk-show { display: none; }
@media (min-width: 760px) {
    .xmap--page .xmap__titlebar { row-gap: 6px; }
    .xmap--page .xmap__keys:not([hidden]) { display: flex; align-items: stretch; gap: 8px; padding-bottom: 2px; }
    .xmap--page .xmap__keys > .xk-head { flex: 0 0 78px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; margin: 0; }
    .xmap--page .xmap__keys > .xk-head .xmap__keys-k { line-height: 1.25; }
    .xmap--page .xmap__keys > .xk-wrap { flex: 1 1 auto; min-width: 0; }
    .xmap--page .xk-hide, .xmap--page .xk-show { display: inline-flex; align-items: center; gap: 4px; height: 22px; min-height: 0; padding: 0 8px; background: none; border: 1px solid var(--hair, #d6d3cc); color: var(--ink-2, #3a3f47); font: 600 var(--fs-2xs)/1 var(--font-ui); border-radius: var(--radius-chip, 0); cursor: pointer; white-space: nowrap; }
    .xmap--page .xk-hide:hover, .xmap--page .xk-show:hover { color: var(--ink, #121417); border-color: var(--ink, #121417); }
    .xmap--page .xk-hide::after { content: "\2715"; font-size: 9px; }
    .xmap--page .xk-show { margin-left: 10px; vertical-align: 1px; }
    .xmap--page .xk-show::before { content: "+"; font-weight: 800; }
    .xmap--page:not(.keys-off) .xk-show { display: none; }
    .xmap--page.keys-off .xmap__keys { display: none !important; }
}
/* (data-phone=app is set on every screen size: the phone rules go by width) */

/* the space above the map (owner, 9 Nov 2026, screenshot: "could we try and eliminate the space here ... the map gets pushed down so
   need to be aware of not wasting valuable screen space"): on a wide screen the title, its line and the lede share fewer lines, and the
   UK's controls take two rows instead of five: [place · Show · Election ... search · Shade] then [What if ... Colour by], the line
   saying what is on the map under them */
@media (min-width: 760px) {
    .xmap--page .xmap__head > .xmap__title { display: inline; }
    .xmap--page .xmap__head > .xmap__sub { display: inline; margin: 0 0 0 10px; padding-left: 10px; border-left: 1px solid var(--hair, #d6d3cc); }
    .xmap--page .xmap__head > .xmap__lede { max-width: none; margin-top: 4px; }
    .xmap--page .xmap__titlebar { padding-bottom: 0; }
}
@media (min-width: 1100px) {
    .xmap--page .xmap__bar:has(> .xs) { row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
    .xmap--page .xmap__bar > .xs { display: contents; }
    .xmap--page .xmap__bar > .xs::before { content: ""; order: 9; flex: 0 0 100%; height: 0; }
    .xmap--page .xmap__bar:has(> .xs) > .xmap__crumb { order: 1; }
    .xmap--page .xs > .xs__body { order: 2; }
    .xmap--page .xs > .xs__era { order: 3; }
    .xmap--page .xmap__bar:has(> .xs) > .xmap__find { order: 4; margin-left: auto; }
    .xmap--page .xmap__bar:has(> .xs) > .xmap__find input { height: 32px; box-sizing: border-box; }
    .xmap--page .xmap__bar:has(> .xs) > .xmap__views { order: 5; margin-left: 0; }
    .xmap--page .xs > .xs__what { order: 10; }
    .xmap--page .xs > .xs__colour { order: 11; margin-left: auto; }
    .xmap--page .xs > .xs__sub { order: 20; }
    .xmap--page .xs > .xs__now { order: 21; }
}
/* the Map/Hex label in the page's language */
.xmap--world[data-lang=de] .xmap__bar > .xmap__views::before { content: "Ansicht"; }
.xmap--world[data-lang=fr] .xmap__bar > .xmap__views::before { content: "Vue"; }
.xmap--world[data-lang=it] .xmap__bar > .xmap__views::before { content: "Vista"; }
.xmap--world[data-lang=es] .xmap__bar > .xmap__views::before { content: "Vista"; }
.xmap--world[data-lang=pl] .xmap__bar > .xmap__views::before { content: "Widok"; }
.xmap--world[data-lang=nl] .xmap__bar > .xmap__views::before { content: "Weergave"; }

/* the country fronts' map band (owner, 9 Nov 2026, Spain: "move this section up to remove the black space above the explore the full map"):
   on a wide screen the link to the full map sits at the top right, level with the heading, and the panel starts right under it */
@media (min-width: 760px) {
    .xmap--compact { position: relative; }
    .xmap--compact .xmap__bar > .xmap__full { position: absolute; top: 18px; right: max(16px, calc(50vw - 640px)); z-index: 6; }
    .xmap--compact .xmap__panel { grid-row: 1 / 4; margin-top: 62px; z-index: 5; }
}
.xs__fold { margin-left: 8px; }
.xs__page { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* the map's own page starts right under the site header (owner, 9 Nov 2026, Italy: "the ticker has the black section over it ... the black
   section is over the header choices"): the page's top padding is taken away instead of the map being pulled up a fixed 28px, which rode
   over the ticker and the phone tabs wherever the padding was less than that */
.site-main--page:has(> .xmap--page) { padding-top: 0 !important; }
.xmap--page { margin-top: 0 !important; }

/* the smaller map's link to the full map, in the title's row at the content's right edge (js/xmap.js moves it there) */
@media (min-width: 760px) {
    .xmap--compact .xmap__titlebar.has-full { position: relative; }
    .xmap--compact .xmap__titlebar > .xmap__full { position: absolute !important; top: auto !important; bottom: 6px; right: max(16px, calc(50vw - 640px)) !important; z-index: 6; margin: 0; }
    .xmap--compact .xmap__titlebar.has-full .xmap__title { padding-right: 200px; }
}

/* the census maps listed under a country's map (Views/World/_XMap.cshtml) */
.wm-census .cz-links { list-style: none; margin: 10px 0 0; padding: 0; columns: 4 220px; column-gap: 24px; }
.wm-census .cz-links li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--hair, #e3e1db); font-size: var(--fs-sm); }

/* the title's line and the lede over a dark map (owner, 9 Nov 2026, US election map: "this sub heading text should be white - it is too
   grey in this instance with the background as it is"): the dark stage's ink, a little softer for the lede; the paper map keeps its grey */
.xmap--page:not(.xmap--paper) .xmap__head > .xmap__sub { color: var(--rk-stage-ink, #eceef1); }
.xmap--page:not(.xmap--paper) .xmap__head > .xmap__lede { color: color-mix(in srgb, var(--rk-stage-ink, #eceef1) 90%, transparent); }