/* the election picker (Views/Shared/Snippets/_UsElectionPicker.cshtml; owner, 7 Nov 2026): every election, each in its own mode */
.uep { position: relative; display: inline-block; margin: 0 0 12px; font: 500 var(--fs-sm)/1.3 var(--font-ui); }
.uep__now { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--hair); border-radius: var(--radius-pill, 0); background: var(--b1, #fff); color: var(--ink); cursor: pointer; list-style: none; }
.uep__now::-webkit-details-marker { display: none; }
.uep__now:hover, .uep[open] .uep__now { border-color: var(--ink); }
.uep__lbl { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.uep__chev { color: var(--muted); }
.uep__mode { display: inline-block; padding: 2px 7px; border-radius: var(--radius-pill, 0); font: 650 var(--fs-2xs)/1.3 var(--font-ui); white-space: nowrap; }
.uep__mode--forecast { background: color-mix(in srgb, var(--ink) 8%, var(--b1, #fff)); color: var(--ink); }
.uep__mode--live { background: color-mix(in srgb, var(--rep, #C8312F) 14%, var(--b1, #fff)); color: var(--ink); }
.uep__mode--live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--rep, #C8312F); vertical-align: 1px; }
.uep__mode--results { background: color-mix(in srgb, var(--dem, #2E6DB4) 12%, var(--b1, #fff)); color: var(--ink); }
.uep__panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(440px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--hair); background: var(--b1, #fff); box-shadow: var(--pl-glow); }
.uep__help { margin: 0 0 8px; font: 400 var(--fs-xs)/1.45 var(--font-ui); color: var(--muted); }
.uep__list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.uep__list a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 6px; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.uep__list a:hover, .uep__list .is-on a { background: var(--b2, color-mix(in srgb, var(--ink) 4%, var(--b1, #fff))); }
.uep__list b { min-width: 7.5em; }
.uep__off { flex: 1 1 auto; font: 400 var(--fs-xs)/1.3 var(--font-ui); color: var(--muted); }

/* on the US front page: on the head's first line, right of "All countries / United States" (owner, 7 Nov 2026) */
.hub-head__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 22px; }
@media (max-width: 759px) { .hub-head__top { margin-bottom: 14px; } }
.hub-head__top .hub-head__crumbs { margin-bottom: 0; }
.hub-head__top .uep { margin: 0; }
.hub-head__top .uep__panel { left: auto; right: 0; }

/* the picker sits on the crumbs' line with no box of its own: the site's styling for <details> gave it a rule above and 10px of
   padding each side, so the line stood 53px tall and opened a gap under the results strip (owner, 8 Nov 2026: "this live count -
   creates ugly white space at the top the page") */
.uep { padding: 0; border: 0; background: none; box-shadow: none; }
.hub-head__top { margin-bottom: 14px; }
.ush2:not(.ush2--home) { padding-top: 16px; }

/* inside a coloured hero band (the 2028 page; owner, 9 Nov 2026: "the dropdown is broken here"): the band clipped the panel, every later
   child of the band sat on top of it, and the band's white text turned the help line white. Open, it now sits above the band's other
   blocks, is not clipped, and reads in ink. */
.page-head.hero-band > .uep { z-index: 20; }
.page-head.hero-band:has(> .uep[open]) { overflow: visible; }
.page-head.hero-band .uep__now { background: rgba(255,255,255,.96); border-color: transparent; }
.page-head.hero-band .uep__panel, .page-head.hero-band .uep__panel p, .page-head.hero-band .uep__panel a { color: var(--ink); }
.page-head.hero-band .uep__panel .uep__help, .page-head.hero-band .uep__panel .uep__off { color: var(--muted); }