/*
 * Elections Tool styles for the Webflow /elections page.
 *
 * Written only against the hooks in Backbone's docs/elections-tool-contract.md
 * (origin/main 521fd39) and the markup the Tool renders inside them; the Tool
 * ships no styles. Visual source: prototypes/election-directory,
 * prototypes/election-page (states A, B, C, E) and prototypes/person-page.
 * Colors, fonts, radii and spacing are the site's Webflow variables, so a
 * change to a variable in the Designer reaches the Tool too.
 * Breakpoints match Webflow's: 991px, 767px, 479px.
 */

/* ---------- Shell ---------------------------------------------------------- */

.bsc-elections {
  --bsc-rule: var(--color--ink);
  --bsc-soft: var(--color--soft-rule);
  --bsc-content: 1300px;
  /* The site header publishes the space it occupies (0px while hidden); every
     page-level sticky element sits below it and follows it as it hides. */
  --bsc-top: var(--header-offset, 0px);
  --bsc-top-inset: calc(var(--bsc-top) + var(--layout--sticky-inset, 18px));
  --bsc-top-ease: top 200ms cubic-bezier(.22, .9, .3, 1);
  /* Scroll targets must clear the header at its full height, which --header-offset
     cannot give: it is 0px while the header is hidden, and the header returns after a
     jump. --header-height is the header's to publish; until it does, its measured size. */
  --bsc-header-full: var(--header-height, 126px);
  width: min(1480px, calc(100% - 24px));
  margin: 0 auto;
  padding-bottom: 96px;
  color: var(--color--ink);
  font-family: var(--font--body);
  font-size: 16px;
  line-height: 1.45;
}
.bsc-elections *,
.bsc-elections *::before,
.bsc-elections *::after { box-sizing: border-box; }
.bsc-elections [hidden] { display: none !important; }
:where(.bsc-elections) :is(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; }
:where(.bsc-elections) :is(ul, ol) { padding: 0; list-style: none; }
:where(.bsc-elections) :is(h1, h2, h3, h4) { font-family: var(--font--display); font-weight: 750; }
:where(.bsc-elections) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:where(.bsc-elections) :is(button, input, select) { font: inherit; color: inherit; }
:where(.bsc-elections) button { cursor: pointer; }
.bsc-elections :focus-visible { outline: 3px solid var(--color--yellow); outline-offset: 3px; }
.bsc-elections__view:focus { outline: none; }

/* Webflow classes that share a Tool class name publish into the site stylesheet, and any
   property this file leaves unset leaks through (a .bsc-elections class once capped the
   Tool at 1240px). These reset every property such a class has set; later rules here still
   win. Never create Webflow classes named bsc-*: docs/webflow/elections-ids.md. */
.bsc-elections { max-width: none; padding-top: 0; padding-inline: 0; }
.bsc-race { padding-block: 0; }
.bsc-race__name { margin-bottom: 0; }
.bsc-race__candidates, .bsc-race__holders { margin-top: 0; }
.bsc-candidate { flex-wrap: nowrap; justify-content: normal; }
.bsc-candidate__main { flex: 0 1 auto; }
.bsc-candidate__name { color: inherit; overflow-wrap: normal; }
.bsc-candidate__badges, .bsc-officeholder { margin-top: 0; }
.bsc-officeholder__label { line-height: inherit; }
.bsc-officeholder__name { overflow-wrap: normal; }
.bsc-precandidacy__notice { margin-block: 0; }
.bsc-elections ::selection { color: var(--color--white); background: var(--color--blue-deep); }

.bsc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Content column shared by every view below its blue header. */
.bsc-directory__body,
.bsc-election > :not(.bsc-election__header),
.bsc-person,
.bsc-elections__view > .bsc-state {
  width: min(var(--bsc-content), calc(100% - 56px));
  margin-inline: auto;
}

/* Shared hero (Directory intro, Election header): the selected E-01 Hero, no-feature state
   (prototypes/hero-family). One blue canopy owns the header-and-hero field: it starts at
   the top of the page behind the site header and ends in the hero's rounded bottom.
   Metadata as outline pills above the title; summary under a full-width rule. */
.bsc-directory__intro,
.bsc-election__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 32px 44px 56px;
  border-radius: 0 0 46px 46px;
  background: var(--color--blue);
  color: var(--color--white);
}
.bsc-directory__intro h1,
.bsc-election__header h1 {
  max-width: 1200px;
  margin-top: 30px;
  font-size: clamp(76px, 10vw, 150px);
  font-stretch: 110%;
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 0.91;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.bsc-directory__eyebrow,
.bsc-election__meta > span {
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

/* The canopy behind the site header. The header is a separate Webflow component above
   the Tool, so while a hero is on the page its slot is painted with the same blue in the
   Tool's frame, and the header takes the white foreground E-01 gives it on a dark field.
   The header draws its shell, links, Join and Menu toggle in currentColor; Donate inverts.
   Class names come from webflow/site-header (S-01). */
html:has(.bsc-directory__intro, .bsc-election__header) .site-header-slot::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: min(1480px, calc(100% - 24px));
  transform: translateX(-50%);
  background: var(--color--blue);
  transition: background-color 200ms cubic-bezier(.22, .9, .3, 1);
}
/* An open menu dims the page beneath the header slot; the slot's blue dims with it. */
html:has(.bsc-directory__intro, .bsc-election__header):has(.nav-shell.menu-open) .site-header-slot::before {
  background: color-mix(in srgb, var(--color--blue) 46%, rgb(10 18 24));
}

/* Where scroll-driven animations are unavailable: white on blue until the header's own
   script says it is over content (it cannot see the Tool's hero, so that is as soon as
   the page has scrolled past the header's height). */
html:has(.bsc-directory__intro, .bsc-election__header) .site-header:not(.is-over-content) { color: var(--color--white); }
html:has(.bsc-directory__intro, .bsc-election__header) .site-header:not(.is-over-content) .nav-shell:not(.menu-open) .nav-action.is-donate {
  background-color: var(--color--white);
  color: var(--color--ink);
}
html:has(.bsc-directory__intro, .bsc-election__header) .site-header:not(.is-over-content)::before {
  left: calc(50vw - min(740px, 50vw - 12px) - var(--stuck-left, 0px));
  width: min(1480px, calc(100vw - 24px));
  background: var(--color--blue);
}

/* Where they are available, the hero itself decides: for exactly as long as any of the
   hero is below the header, the header stays white on a blue band in the canopy's frame,
   whatever the header script's classes say. Past the hero's bottom edge the animations
   stop applying and the header's own over-content look returns. An open or closing menu
   is never animated, so it keeps its white panel and its fade back to the canopy. */
@supports (animation-timeline: view()) {
  html { timeline-scope: --bsc-hero; }
  .bsc-directory__intro,
  .bsc-election__header { view-timeline: --bsc-hero block; view-timeline-inset: 118px 0px; }
  .site-header,
  .site-header .mobile-toggle,
  .site-header .nav-shell:not(.menu-open, .is-closing) {
    animation: bsc-canopy-fg linear;
    animation-timeline: --bsc-hero;
    animation-range: cover;
  }
  .site-header .nav-shell:not(.menu-open) .nav-action.is-donate {
    animation: bsc-canopy-donate linear;
    animation-timeline: --bsc-hero;
    animation-range: cover;
  }
  .site-header::before {
    animation: bsc-canopy-band linear;
    animation-timeline: --bsc-hero;
    animation-range: cover;
  }
}
@keyframes bsc-canopy-fg {
  from, to { background-color: transparent; color: var(--color--white); }
}
@keyframes bsc-canopy-donate {
  from, to { background-color: var(--color--white); color: var(--color--ink); }
}
@keyframes bsc-canopy-band {
  from, to {
    left: calc(50vw - min(740px, 50vw - 12px) - var(--stuck-left, 0px));
    width: min(1480px, calc(100vw - 24px));
    border-bottom-color: transparent;
    background: var(--color--blue);
  }
}

/* ---------- Pills: badges, Response statuses, lifecycle ------------------------ */

.bsc-badge,
.bsc-status,
.bsc-lifecycle {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color--ink);
  border-radius: var(--radius--pill);
  padding: 4px 10px;
  background: var(--color--white);
  color: var(--color--ink);
  font-family: var(--font--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: middle;
}
.bsc-badge--endorsed {
  border-color: var(--color--endorsed-green);
  background: var(--color--endorsed-green);
  color: var(--color--white);
}
.bsc-badge--endorsed::before {
  content: "";
  width: 12px; height: 7px;
  margin: -3px 1px 0 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.bsc-badge--revoked { border-style: dashed; text-decoration: line-through; text-decoration-thickness: 1px; }
.bsc-badge--incumbent {
  border-color: var(--color--neutral-border);
  background: var(--color--neutral-fill);
}
.bsc-badge--candidacy { border-style: dashed; background: transparent; }
.bsc-status.bsc-status--completed {
  border-color: var(--color--blue);
  background: var(--color--blue-pale);
  color: var(--color--blue-ink);
}
.bsc-status.bsc-status--could-not-reach { border-style: dashed; }
.bsc-status.bsc-status--refused { border-color: var(--color--neutral-border); background: var(--color--neutral-fill); }
.bsc-lifecycle--current { border-color: var(--color--endorsed-green); background: var(--color--endorsed-green); color: var(--color--white); }
.bsc-lifecycle--upcoming { background: var(--color--yellow); }
.bsc-lifecycle--past { border-color: var(--color--neutral-border); background: var(--color--paper); color: var(--color--muted); }

/* Stage tags (ADR 0006): a candidate's result on another ballot of the cycle. Squarer than
   status pills so the two read as different kinds of fact; the words carry the meaning. */
.bsc-stage-tag {
  min-height: 24px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color--neutral-border);
  border-radius: 6px;
  padding: 3px 7px;
  background: var(--color--white);
  color: var(--color--ink);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}
.bsc-stage-tag:is([data-stage-status="lost"], [data-stage-status="withdrawn"]) {
  background: var(--color--neutral-fill);
  color: var(--color--muted);
}
.bsc-badge__ballot { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; }
.bsc-badge__ballot::before { content: "·"; content: "·" / ""; }

/* ---------- Shared controls ------------------------------------------------------- */

.bsc-filters__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
}
.bsc-filters__search input[type="search"],
.bsc-ballot-finder__input {
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--color--ink);
  border-radius: var(--radius--control);
  padding: 9px 12px;
  background: var(--color--paper);
  color: var(--color--ink);
}

.bsc-dropdown { position: relative; min-width: 0; }
.bsc-dropdown__toggle {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1.5px solid var(--color--ink);
  border-radius: var(--radius--control);
  padding: 9px 12px;
  background: var(--color--paper);
  text-align: left;
  transition: border-radius 170ms cubic-bezier(.16, 1, .3, 1), background-color 140ms ease;
}
.bsc-dropdown__toggle::after {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 170ms cubic-bezier(.16, 1, .3, 1);
}
.bsc-dropdown.is-open .bsc-dropdown__toggle { border-radius: var(--radius--control) var(--radius--control) 0 0; background: var(--color--white); }
.bsc-dropdown.is-open .bsc-dropdown__toggle::after { transform: rotate(225deg) translate(-2px, -2px); }
.bsc-dropdown__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsc-dropdown__panel {
  position: absolute;
  z-index: 40;
  width: 100%;
  overflow: hidden;
  border: 1.5px solid var(--color--ink);
  border-top: 0;
  border-radius: 0 0 var(--radius--control) var(--radius--control);
  background: var(--color--white);
  box-shadow: 0 12px 22px rgb(15 24 29 / 0.13);
}
.bsc-dropdown__option {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-top: 1px solid var(--bsc-soft);
  padding: 8px 12px;
  background: var(--color--white);
  text-align: left;
  cursor: pointer;
}
.bsc-dropdown__option:hover,
.bsc-dropdown__option:focus-visible,
.bsc-dropdown__option[aria-selected="true"],
.bsc-dropdown__option:has(input:checked) { background: var(--color--blue-pale); outline-offset: -3px; }
.bsc-dropdown__option input { width: 16px; height: 16px; margin: 0; accent-color: var(--color--blue); }

/* ---------- Directory ----------------------------------------------------------- */

.bsc-directory__intro { margin-bottom: 86px; }
/* The summary's rule spans the hero; its text keeps a 42ch measure. */
.bsc-directory__summary-copy {
  align-self: stretch;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 18px max(0px, calc(100% - 42ch)) 0 0;
  border-top: 1.5px solid currentColor;
  font-size: 17px;
  line-height: 1.48;
}

.bsc-directory__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.75fr);
  align-items: stretch;
  gap: 24px;
  margin-bottom: 108px;
}

.bsc-cycle { min-width: 0; }
.bsc-cycle__date { display: flex; flex-direction: column; font-family: var(--font--display); }
.bsc-cycle__date strong { font-weight: 850; }
.bsc-cycle__body { min-width: 0; }
.bsc-cycle__name { overflow-wrap: anywhere; }
.bsc-cycle__ballots,
.bsc-cycle__jurisdiction { color: var(--color--muted); }
.bsc-cycle__link { font-weight: 800; }

.bsc-cycle--featured {
  display: grid;
  grid-template-columns: minmax(200px, 0.38fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 2px solid var(--color--ink);
  border-radius: 24px;
  background: var(--color--white);
}
.bsc-cycle--featured .bsc-cycle__date {
  grid-row: 1 / 3;
  justify-content: center;
  padding: 36px;
  border-right: 2px solid var(--color--ink);
  background: var(--color--blue-pale);
  font-size: 19px;
}
.bsc-cycle--featured .bsc-cycle__date strong { font-size: clamp(74px, 8vw, 116px); letter-spacing: -0.07em; line-height: 0.8; }
.bsc-cycle--featured .bsc-cycle__body { padding: 42px 42px 0; }
.bsc-cycle--featured .bsc-cycle__name {
  margin: 42px 0 18px;
  font-size: clamp(42px, 5vw, 68px);
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.bsc-cycle--featured .bsc-cycle__ballots { font-size: 16px; }
.bsc-cycle--featured .bsc-cycle__jurisdiction { margin-top: 4px; font-size: 13px; }
.bsc-cycle--featured .bsc-cycle__link {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 42px 42px;
  border-radius: var(--radius--control);
  padding: 13px 16px;
  background: var(--color--ink);
  color: var(--color--white);
  text-decoration: none;
}
.bsc-cycle--featured .bsc-cycle__link:hover { background: var(--color--blue-deep); }

.bsc-directory__upcoming {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--color--ink);
  border-radius: 20px;
  background: var(--color--white);
}
.bsc-directory__upcoming > h2 {
  padding: 25px 28px;
  border-bottom: 2px solid var(--color--ink);
  background: var(--color--blue-pale);
  font-size: 32px;
  letter-spacing: -0.035em;
  line-height: 0.96;
}
.bsc-cycle--upcoming {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--bsc-soft);
}
.bsc-cycle--upcoming:last-child { border-bottom: 0; }
.bsc-cycle--upcoming .bsc-cycle__date,
.bsc-cycle--row .bsc-cycle__date { color: var(--color--muted); font-size: 11px; font-family: var(--font--body); }
.bsc-cycle--upcoming .bsc-cycle__date strong,
.bsc-cycle--row .bsc-cycle__date strong { color: var(--color--ink); font-family: var(--font--display); font-size: 22px; line-height: 1.05; }
.bsc-cycle--upcoming .bsc-cycle__name { margin: 9px 0 3px; font-size: 19px; line-height: 1.05; }
.bsc-cycle--upcoming :is(.bsc-cycle__ballots, .bsc-cycle__jurisdiction) { font-size: 12px; }
.bsc-cycle--upcoming .bsc-cycle__link {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--bsc-soft);
  font-size: 20px;
  text-decoration: none;
}
/* The whole upcoming card is the link's target area. */
.bsc-cycle--upcoming .bsc-cycle__link::after { content: ""; position: absolute; inset: 0; }
.bsc-cycle--upcoming:hover { background: var(--color--paper); }

.bsc-directory__ledger-title {
  padding-bottom: 26px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--color--ink);
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.bsc-filters {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto;
  align-items: end;
  gap: 18px 24px;
  padding: 24px;
  border: 1.5px solid var(--color--ink);
  border-radius: 18px 18px 0 0;
  background: var(--color--white);
}
.bsc-filters__search { grid-column: 1; min-width: 0; }
.bsc-filters__toggle { display: none; }
.bsc-filters__secondary {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(150px, 0.62fr) minmax(340px, 1.4fr) minmax(190px, 0.8fr);
  align-items: end;
  gap: 12px;
  min-width: 0;
}
.bsc-filters__status { min-width: 0; }
.bsc-filters__pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.bsc-filters__pill {
  min-width: 0;
  min-height: 48px;
  border: 1.5px solid var(--color--ink);
  border-radius: var(--radius--pill);
  padding: 8px 10px;
  background: var(--color--white);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}
.bsc-filters__pill:hover { border-color: var(--color--blue); }
.bsc-filters__pill[aria-pressed="true"] { border-color: var(--color--blue); background: var(--color--blue-pale); color: var(--color--blue-deep); }
.bsc-filters__pill[aria-pressed="true"]::before { content: "✓ "; }
.bsc-filters__pill[data-status-filter="current"][aria-pressed="true"] { border-color: var(--color--endorsed-green); background: var(--color--endorsed-green); color: var(--color--white); }
.bsc-filters__pill[data-status-filter="upcoming"][aria-pressed="true"] { border-color: var(--color--ink); background: var(--color--yellow); color: var(--color--ink); }
.bsc-directory__summary {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-bottom: 12px;
}
.bsc-directory__count { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsc-filters__reset {
  min-height: 44px;
  border: 0;
  padding: 0 4px;
  background: transparent;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bsc-directory__results {
  overflow: clip;
  border: 1.5px solid var(--color--ink);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--color--white);
}
.bsc-directory__year {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  border-top: 2px solid var(--color--ink);
}
.bsc-directory__year:first-child { border-top: 1.5px solid var(--color--ink); }
.bsc-directory__year-title {
  grid-row: 1 / span 99;
  padding: 30px 24px;
  border-right: 2px solid var(--color--ink);
  background: var(--color--blue-pale);
  font-size: 42px;
  letter-spacing: -0.04em;
}
.bsc-cycle--row {
  grid-column: 2;
  position: relative;
  min-height: 108px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--bsc-soft);
}
.bsc-cycle--row:last-child { border-bottom: 0; }
.bsc-cycle--row .bsc-cycle__name { margin: 7px 0 2px; font-size: 23px; line-height: 1.05; }
.bsc-cycle--row :is(.bsc-cycle__ballots, .bsc-cycle__jurisdiction) { font-size: 12px; }
.bsc-cycle--row .bsc-cycle__link { justify-self: end; font-size: 12px; }
.bsc-cycle--row .bsc-cycle__link::after { content: ""; position: absolute; inset: 0; }
.bsc-cycle--row:hover { background: var(--color--paper); }
.bsc-cycle--row:hover .bsc-cycle__link { text-decoration-thickness: 2px; }

.bsc-directory__empty {
  padding: 70px clamp(24px, 6vw, 76px);
  font-family: var(--font--display);
  font-size: 28px;
  font-weight: 850;
}

/* ---------- Election view --------------------------------------------------------- */

/* Metadata pills sit above the title, as in E-01; font-size 0 drops the " · " separators
   between the spans. */
.bsc-election__meta {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 0;
}

/* "All elections" leads the metadata pills, drawn as a pill with a left arrow. */
.bsc-election__details { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bsc-election__details .bsc-election__meta { order: 0; }
.bsc-election__back {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 7px 10px;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.bsc-election__back:hover { background: rgb(255 255 255 / 0.12); }
.bsc-election__back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.bsc-election__back-arrow { position: relative; width: 12px; height: 10px; }
.bsc-election__back-arrow::before { content: ""; position: absolute; inset-inline: 0; top: 4px; border-top: 1.5px solid currentColor; }
.bsc-election__back-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 6px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Ballot timeline (ADR 0006): the cycle's ballots, read-only, below the title. The live
   ballot ("Next") is the only filled step; the ballot itself is chosen in the filter dock. */
.bsc-ballot-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; margin-top: 30px; }
.bsc-ballot-timeline__step {
  position: relative;
  min-height: 34px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid currentColor;
  border-radius: var(--radius--pill);
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.2;
}
.bsc-ballot-timeline__step + .bsc-ballot-timeline__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -23px;
  width: 16px;
  border-top: 1.5px solid currentColor;
}
.bsc-ballot-timeline__label { font-weight: 800; }
.bsc-ballot-timeline__state { font-weight: 700; }
.bsc-ballot-timeline__state { display: inline-flex; gap: 6px; }
.bsc-ballot-timeline__state::before { content: "·"; content: "·" / ""; }
.bsc-ballot-timeline__step[data-ballot-state="next"] {
  border-color: var(--color--white);
  background: var(--color--white);
  color: var(--color--blue-deep);
}
.bsc-ballot-timeline__step[data-ballot-state="next"]::before { border-top-color: var(--color--white); }

.bsc-election__narrative {
  margin-block: 72px 64px;
  font-size: 18px;
  line-height: 1.6;
}
.bsc-election__narrative > * { max-width: 62ch; }
.bsc-election__narrative > * + * { margin-top: 1em; }
.bsc-election__narrative :is(h2, h3) { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.035em; line-height: 0.96; }
.bsc-election__narrative blockquote {
  margin: 1.4em 0;
  padding: 26px 0 0;
  border-top: 2px solid;
  font-family: var(--font--display);
  font-size: 25px;
  font-weight: 750;
  line-height: 1.15;
}

.bsc-election__tool {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: clamp(38px, 5vw, 76px);
  margin-top: 40px;
  anchor-name: --bsc-tool;
}
.bsc-election__narrative + .bsc-election__tool { margin-top: 0; }
.bsc-election__tool > .bsc-ballot-finder { grid-column: 2; grid-row: 1; }
.bsc-election__tool > .bsc-race-nav { grid-column: 1; grid-row: 1 / 3; }
.bsc-election__tool > .bsc-election__ledger-column { grid-column: 2; grid-row: 2; min-width: 0; }

/* The finder, filters and ledger read as one bounded, rounded container. The finder is
   its docked header (prototype B): it sticks level with the Race navigator for the whole
   ledger while the filters scroll away beneath it. */
.bsc-ballot-finder {
  position: sticky;
  top: var(--bsc-top-inset);
  z-index: 10;
  min-width: 0;
  padding: 20px 22px 16px;
  border: 1.5px solid var(--color--ink);
  border-radius: 18px 18px 0 0;
  background: var(--color--white);
  transition: var(--bsc-top-ease);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
/* Paper behind the dock's rounded corners and across the gap above it, so the ledger
   scrolling underneath never shows around it. */
.bsc-ballot-finder::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -19.5px -1.5px auto;
  height: 36px;
  background:
    linear-gradient(var(--color--paper), var(--color--paper)) top / 100% 18px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 17.5px, var(--color--paper) 18px) left bottom / 18px 18px no-repeat,
    radial-gradient(circle at 0 100%, transparent 17.5px, var(--color--paper) 18px) right bottom / 18px 18px no-repeat;
}
/* The form's parts join the finder's grid, so the suggestion list can take the address
   field's own grid area as its containing block: it opens directly beneath the field,
   exactly as wide, over the filters and Races instead of pushing them down or growing the
   docked bar. */
.bsc-ballot-finder__form { display: contents; }
.bsc-ballot-finder > :where(:not(.bsc-ballot-finder__form)) { grid-column: 1 / -1; }
.bsc-ballot-finder__label { grid-column: 1 / -1; grid-row: 1; display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; }
.bsc-ballot-finder__input { grid-column: 1; grid-row: 2; min-width: 0; min-height: 48px; border-right: 0; border-radius: var(--radius--control) 0 0 var(--radius--control); }
.bsc-ballot-finder__input[aria-expanded="true"] { border-bottom-left-radius: 0; background-color: var(--color--white); }
/* The ring stays inside the joined field so it never runs over the button. */
.bsc-ballot-finder__input:focus-visible { outline-offset: -4px; }
.bsc-ballot-finder__submit {
  grid-column: 2;
  grid-row: 2;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1.5px solid var(--color--ink);
  border-radius: 0 var(--radius--control) var(--radius--control) 0;
  padding: 8px 15px;
  background: var(--color--blue);
  color: var(--color--white);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.bsc-ballot-finder__submit::after,
.bsc-my-ballot__return::after { content: "→"; content: "→" / ""; font-family: var(--font--body); font-size: 1.15em; font-weight: 700; }
.bsc-ballot-finder__submit:hover { background: var(--color--blue-deep); }
.bsc-ballot-finder__submit:disabled { cursor: progress; opacity: 0.6; }
.bsc-ballot-finder__suggestions {
  position: absolute;
  z-index: 20;
  /* Both lines explicit: an absolutely positioned item's missing end line is the padding edge. */
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  top: 100%;
  left: 0;
  right: -1.5px;
  max-height: min(60vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1.5px solid var(--color--ink);
  border-top: 1px solid var(--bsc-soft);
  border-radius: 0 0 var(--radius--control) var(--radius--control);
  background: var(--color--white);
  box-shadow: 0 14px 26px rgb(15 24 29 / 0.16);
}
/* Leaving the field closes the list, so it never stays over the Races. Choosing an option
   keeps focus in the finder, so it stays open until the choice lands. */
.bsc-ballot-finder:not(:focus-within) .bsc-ballot-finder__suggestions { display: none; }
.bsc-ballot-finder__suggestion {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--bsc-soft);
  cursor: pointer;
}
.bsc-ballot-finder__suggestion:first-child { border-top: 0; }
.bsc-ballot-finder__suggestion:hover,
.bsc-ballot-finder__suggestion[aria-selected="true"] { background: var(--color--blue-pale); }
.bsc-ballot-finder__suggestion[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--color--blue); font-weight: 700; }
.bsc-ballot-finder__error:empty { display: none; }
.bsc-ballot-finder__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  border: 1.5px solid var(--color--ink);
  border-radius: var(--radius--control);
  padding: 10px 12px;
  background: var(--color--paper);
  font-size: 14px;
  font-weight: 700;
}
.bsc-ballot-finder__retry,
.bsc-my-ballot__return {
  min-height: 44px;
  border: 1.5px solid var(--color--ink);
  border-radius: var(--radius--control);
  padding: 8px 14px;
  background: var(--color--white);
  font-size: 13px;
  font-weight: 800;
}
.bsc-ballot-finder__retry:disabled { cursor: not-allowed; opacity: 0.55; }
.bsc-ballot-finder__attribution { margin-top: 8px; color: var(--color--muted); font-size: 11px; }
/* The Mapbox credit is required. It sits just outside the tool, under its bottom edge,
   not in the docked finder: fixed, anchored to the tool's bottom, at the finder's text
   edge (left stays auto). Without anchor positioning it stays under the search field. */
@supports (anchor-name: --a) {
  .bsc-election__tool > .bsc-ballot-finder > .bsc-ballot-finder__attribution {
    position: fixed;
    position-anchor: --bsc-tool;
    top: anchor(bottom);
    margin-top: 10px;
  }
}
.bsc-ballot-finder[data-my-ballot-state="resolving"] .bsc-ballot-finder__input { background-color: var(--color--white); }
/* Prototype B's bar carries no visible label once the field has its placeholder; the label
   still names the field for assistive technology. My Ballot's Race count goes the same way
   (the navigator shows it), so both states are the same compact bar. */
.bsc-ballot-finder:has(.bsc-ballot-finder__input[placeholder]) .bsc-ballot-finder__label,
.bsc-my-ballot__heading {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Docked over the Races (the Tool marks it), the bar lifts off the list as in prototype B. */
.bsc-ballot-finder { transition: var(--bsc-top-ease), box-shadow 180ms ease; }
.bsc-ballot-finder[data-docked] { box-shadow: 0 8px 22px rgb(15 24 29 / 0.12); }

/* E — My ballot result: the docked finder becomes prototype E's address bar. The Race
   count takes the label's place and the address sits where it was typed, so the bar keeps
   the idle finder's height and the way back is where Find my ballot was. */
.bsc-my-ballot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
.bsc-my-ballot__heading {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: 6px;
  font-family: var(--font--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.45;
}
.bsc-my-ballot__heading:focus { outline: none; }
.bsc-my-ballot__heading:focus-visible { outline: 3px solid var(--color--yellow); }
.bsc-my-ballot__summary,
.bsc-my-ballot__context > span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bsc-my-ballot__context {
  grid-column: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color--ink);
  border-right: 0;
  border-radius: var(--radius--control) 0 0 var(--radius--control);
  padding: 9px 12px;
  background: var(--color--paper);
}
.bsc-my-ballot__address { min-width: 0; overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.bsc-my-ballot__return {
  grid-column: 2;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 0 var(--radius--control) var(--radius--control) 0;
  padding: 8px 15px;
  background: var(--color--blue);
  color: var(--color--white);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}
.bsc-my-ballot__return::after { content: "←"; content: "←" / ""; }
.bsc-my-ballot__return:hover { background: var(--color--blue-deep); }

.bsc-race-filters {
  display: grid;
  grid-template-columns: auto auto minmax(170px, 0.8fr) minmax(220px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 18px 22px 20px;
  border-inline: 1.5px solid var(--color--ink);
  border-bottom: 1.5px solid var(--color--ink);
  background: var(--color--white);
}
.bsc-race-filters__toggle {
  min-height: 48px;
  border: 1.5px solid var(--color--ink);
  border-radius: var(--radius--pill);
  padding: 8px 16px;
  background: var(--color--white);
  font-size: 12px;
  font-weight: 800;
}
.bsc-race-filters__toggle:hover { border-color: var(--color--blue); }
.bsc-race-filters__toggle[aria-pressed="true"]::before { content: "✓ "; }
.bsc-race-filters__toggle--endorsed[aria-pressed="true"] { background: var(--color--yellow); }
.bsc-race-filters__toggle--incumbents[aria-pressed="true"] { border-color: var(--color--neutral-border); background: var(--color--neutral-fill); }
.bsc-race-filters .bsc-dropdown { margin-left: 16px; }
.bsc-race-filters__ballot + .bsc-dropdown { margin-left: 0; }
/* My Ballot renders the dock with the Ballot dropdown alone: flush left, on one bounded row. */
.bsc-race-filters > .bsc-race-filters__ballot:only-child { grid-column: 1 / -1; margin-left: 0; }

@media (min-width: 768px) {
  .bsc-race-filters > .bsc-race-filters__ballot:only-child { max-width: 320px; }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .bsc-race-filters { grid-template-columns: auto auto minmax(0, 1fr); }
  .bsc-race-filters__ballot + .bsc-dropdown { grid-column: 1 / -1; }
}

/* No Ballot dropdown (one-ballot cycles, or a Tool without it): the previous three-column dock. */
@media (min-width: 1200px) {
  .bsc-race-filters:not(:has(> .bsc-race-filters__ballot)) { grid-template-columns: auto auto minmax(260px, 1fr); }
}

.bsc-race-ledger {
  min-width: 0;
  overflow: hidden;
  padding: 0 18px 12px;
  border: 1.5px solid var(--color--ink);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--color--white);
}
.bsc-race-ledger__empty {
  padding: 72px 24px;
  font-family: var(--font--display);
  font-size: 28px;
  font-weight: 850;
  text-align: center;
}

.bsc-race-group { border-top: 3px solid var(--color--ink); }
.bsc-race-ledger > .bsc-race-group:first-of-type,
.bsc-race-ledger > .bsc-sr-only + .bsc-race-group { border-top: 0; }
.bsc-race-group__title {
  padding: 30px 6px 26px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -0.035em;
  line-height: 0.95;
}
/* A Race scrolled to from the navigator or a link lands below the header, the bar above
   the dock (--bsc-bar) and the docked finder (--bsc-dock), not underneath them. */
.bsc-race {
  scroll-margin-top: calc(var(--bsc-header-full) + var(--bsc-bar, 18px) + var(--bsc-dock, 108px) + 16px);
  border-top: 1.5px solid var(--color--ink);
}
.bsc-race__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 24px 6px 16px;
}
.bsc-race__name { font-size: 30px; letter-spacing: -0.025em; line-height: 1; }
/* Each item carries its dot in the gap before it; the row clips its left edge, so a dot
   that would start a wrapped line is hidden instead of leading it. */
.bsc-race__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 17px;
  overflow: hidden;
  margin-top: 8px;
  color: var(--color--muted);
  font-size: 12px;
  font-weight: 750;
}
.bsc-race__meta > span { position: relative; }
.bsc-race__meta > span::before { content: "·"; content: "·" / ""; position: absolute; left: -11px; }
.bsc-race__compare,
.bsc-questionnaire__compare {
  min-height: 44px;
  flex: none;
  border: 1.5px solid var(--color--ink);
  border-radius: var(--radius--control);
  padding: 8px 13px;
  background: var(--color--ink);
  color: var(--color--white);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.bsc-race__compare:hover,
.bsc-questionnaire__compare:hover { background: var(--color--blue-deep); }

.bsc-race__candidates { border-top: 1px solid var(--bsc-soft); }
.bsc-candidate {
  position: relative;
  min-height: 84px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 22px;
  padding: 14px 6px;
  border-bottom: 1px solid var(--bsc-soft);
}
.bsc-candidate:last-child { border-bottom: 0; }
.bsc-candidate__main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
}
.bsc-candidate__heading {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.bsc-candidate__name { text-decoration: none; }
a.bsc-candidate__name:hover { text-decoration: underline; }
.bsc-candidate__party { grid-column: 1; color: var(--color--muted); font-size: 13px; font-weight: 650; }
.bsc-candidate__badges {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.bsc-candidate__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.bsc-candidate[data-status="withdrawn"],
.bsc-candidate[data-status="removed"] { background: var(--color--withdrawn-fill); color: #4a5256; }

/* Earlier-ballot fold (ADR 0006): everyone else who ran in this Race, closed by default.
   The summary counts them and any endorsements inside, so a past endorsement is never
   hidden without a mention. Same plus/minus as the navigator's Body toggles. */
.bsc-race__earlier { border-top: 1px solid var(--bsc-soft); }
.bsc-race__earlier-summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  color: var(--color--muted);
  font-size: 13px;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}
.bsc-race__earlier-summary::-webkit-details-marker { display: none; }
.bsc-race__earlier-summary:hover { background: var(--color--paper); }
.bsc-race__earlier-summary:focus-visible { outline: 2px solid var(--color--blue); outline-offset: -2px; }
.bsc-race__earlier-label { min-width: 0; }
.bsc-race__earlier-count {
  min-width: 28px;
  border-radius: var(--radius--pill);
  padding: 3px 7px;
  background: var(--color--paper);
  color: var(--color--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.bsc-race__earlier-endorsed { color: var(--color--ink); }
.bsc-race__earlier-endorsed::before { content: "· "; content: "· " / ""; color: var(--color--muted); }
.bsc-race__earlier-summary::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  margin-left: auto;
  color: var(--color--ink);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}
.bsc-race__earlier[open] > .bsc-race__earlier-summary::after {
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
}
.bsc-race__earlier .bsc-candidate__name { color: var(--color--muted); }
.bsc-race__earlier .bsc-race__candidates { border-top-color: var(--bsc-soft); }

.bsc-race__none { padding: 18px 6px; }
.bsc-race__none-copy { color: var(--color--muted); font-size: 14px; }
.bsc-race__holders { border-top: 1px solid var(--bsc-soft); }
.bsc-officeholder {
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--bsc-soft);
}
.bsc-officeholder:last-child { border-bottom: 0; }
.bsc-officeholder__label { color: var(--color--muted); font-size: 10px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.bsc-officeholder__name { font-family: var(--font--display); font-size: 20px; font-weight: 750; }

/* A — before candidacies are public */
.bsc-election__tool--precandidacy { grid-template-columns: minmax(0, 1fr); }
.bsc-election__tool--precandidacy > .bsc-ballot-finder { grid-column: 1; }
.bsc-precandidacy {
  padding: 0 22px 12px;
  border: 1.5px solid var(--color--ink);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--color--white);
}
.bsc-precandidacy__notice {
  max-width: 70ch;
  padding: 34px 6px 36px;
}
.bsc-precandidacy__notice h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.035em; line-height: 0.98; }
.bsc-precandidacy__notice p { margin-top: 14px; color: var(--color--muted); font-size: 16px; line-height: 1.6; }
.bsc-precandidacy .bsc-race-group { border-top: 3px solid var(--color--ink); }

/* Race navigator */
.bsc-race-nav { position: sticky; top: var(--bsc-top-inset); z-index: 5; min-width: 0; transition: var(--bsc-top-ease); }
.bsc-race-nav__toggle { display: none; }
.bsc-race-nav__body {
  max-height: calc(100vh - 36px - var(--bsc-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 18px;
  border: 1.5px solid var(--color--ink);
  border-radius: 16px;
  background: var(--color--white);
  scrollbar-width: thin;
}
.bsc-race-nav__bar { display: contents; }
.bsc-race-nav__top { display: none; }
/* The Lookup tool's navigation (prototype B): the Body wrappers drop out of layout so
   every heading is a direct sticky child of the one scroll panel. A wrapper would cap
   how far its heading can travel. The Tool sets each heading's top or bottom slot. */
.bsc-race-nav__group { display: contents; }
.bsc-race-nav__list { padding-bottom: 9px; }
.bsc-race-nav__group-title {
  padding: 16px 0 8px;
  font-family: var(--font--display);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
}
/* Each Body is a disclosure, as in prototype B: title, a pill with its Race count, and a
   plus that becomes a minus when open. */
.bsc-race-nav__group-toggle {
  position: sticky;
  z-index: 2;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--bsc-soft);
  padding: 8px 0;
  background: var(--color--white);
  color: var(--color--ink);
  font-family: var(--font--display);
  font-size: 15px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.bsc-race-nav__group-toggle:hover { background: var(--color--paper); }
.bsc-race-nav__group-toggle[aria-expanded="true"] { border-bottom-color: transparent; }
/* Headings after the open Body wait at the panel's bottom edge. Their rule moves to the
   top, so each is cut cleanly from the Races scrolling above it. */
.bsc-race-nav__group:has(> .bsc-race-nav__group-toggle[aria-expanded="true"]) ~ .bsc-race-nav__group > .bsc-race-nav__group-toggle {
  border-top: 1px solid var(--bsc-soft);
  border-bottom-color: transparent;
}
.bsc-race-nav__group-toggle .bsc-race-nav__group-title { min-width: 0; flex: 1; padding: 0; overflow-wrap: anywhere; }
.bsc-race-nav__group-count {
  min-width: 28px;
  flex: none;
  border-radius: var(--radius--pill);
  padding: 3px 7px;
  background: var(--color--paper);
  font-family: var(--font--body);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.bsc-race-nav__group-toggle::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}
.bsc-race-nav__group-toggle[aria-expanded="true"]::after {
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
}
.bsc-race-nav__group-toggle:focus-visible,
.bsc-race-nav__link:focus-visible { outline: 2px solid var(--color--blue); outline-offset: 3px; }
.bsc-race-nav__list[hidden] { display: none; }
/* Race name left, candidate count right, at prototype B's density so a long Body shows
   many Races between the pinned headings. Phones keep 44px rows (below). */
.bsc-race-nav__link {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
}
.bsc-race-nav__name { min-width: 0; overflow-wrap: anywhere; }
.bsc-race-nav__count { flex: none; font-size: 10px; font-weight: 500; white-space: nowrap; }
.bsc-race-nav__link:hover { background: var(--color--paper); }
.bsc-race-nav__link[aria-current="true"] { background: var(--color--blue); color: var(--color--white); }

/* ---------- Questionnaire comparison (dialog) ------------------------------------ */

.bsc-comparison {
  width: min(1400px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  overflow: hidden;
  border: 1.5px solid var(--color--ink);
  border-radius: 18px;
  padding: 0;
  background: var(--color--white);
  color: var(--color--ink);
  font-family: var(--font--body);
  box-shadow: 0 26px 80px rgb(16 18 19 / 0.38);
}
.bsc-comparison[open] { display: flex; flex-direction: column; }
.bsc-comparison::backdrop { background: rgb(16 18 19 / 0.7); backdrop-filter: blur(3px); }
:where(.bsc-comparison) :is(h2, p) { margin: 0; }
.bsc-comparison :focus-visible { outline: 3px solid var(--color--yellow); outline-offset: 3px; }
.bsc-comparison__header {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 30px;
  padding: 24px 28px;
  border-bottom: 2px solid var(--color--ink);
}
.bsc-comparison__eyebrow { color: var(--color--blue); font-size: 11px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.bsc-comparison__title {
  margin-top: 4px;
  font-family: var(--font--display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.bsc-comparison__close {
  min-height: 44px;
  min-width: 44px;
  border: 1.5px solid var(--color--ink);
  border-radius: 9px;
  padding: 8px 14px;
  background: var(--color--ink);
  color: var(--color--white);
  font: 800 14px/1 var(--font--body);
  cursor: pointer;
}
.bsc-comparison__close:hover { background: var(--color--blue-deep); }
.bsc-comparison__body { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.bsc-comparison__body > .bsc-state { margin: 28px; }
.bsc-comparison__subtitle { flex: none; padding: 12px 28px; border-bottom: 1px solid var(--bsc-soft); color: var(--color--muted); font-size: 13px; }
.bsc-comparison__scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.bsc-comparison__table {
  --bsc-comparison-prompt: clamp(220px, 24vw, 330px);
  width: 100%;
  min-width: calc(var(--bsc-comparison-prompt) + var(--bsc-comparison-columns, 2) * 220px);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.bsc-comparison__table col:first-child,
.bsc-comparison__table :is(thead td, .bsc-comparison__prompt) { width: var(--bsc-comparison-prompt); }
.bsc-comparison__candidates > * {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid var(--color--ink);
  background: var(--color--paper);
}
.bsc-comparison__candidates > td { left: 0; z-index: 3; }
.bsc-comparison__candidate {
  padding: 18px;
  border-left: 1px solid var(--bsc-soft);
  text-align: left;
  vertical-align: top;
}
.bsc-comparison__candidate > a {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font--display);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.05;
  text-decoration: none;
}
.bsc-comparison__candidate > a:hover { text-decoration: underline; }
.bsc-comparison__candidate--highlight { background: var(--color--blue-pale) !important; }
.bsc-comparison__question > * { border-bottom: 2px solid var(--color--ink); vertical-align: top; }
.bsc-comparison__question:last-child > * { border-bottom: 0; }
.bsc-comparison__prompt {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 24px;
  background: var(--color--white);
  font-family: var(--font--display);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.15;
  text-align: left;
}
.bsc-comparison__answer { padding: 24px 18px; border-left: 1px solid var(--bsc-soft); line-height: 1.58; }
.bsc-comparison__answer.bsc-comparison__status { color: var(--color--muted); font-weight: 800; }
.bsc-comparison__answer.bsc-comparison__status::before { content: "Response status: "; display: block; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.bsc-comparison__no-answer {
  display: inline-block;
  border: 1.5px dashed var(--color--ink);
  border-radius: var(--radius--pill);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 850;
}
/* Page scroll stays put behind the open dialog. */
html:has(.bsc-comparison[open]) { overflow: hidden; }

/* ---------- Person view -------------------------------------------------------------- */

.bsc-person { padding-top: 48px; }
.bsc-return {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 10px 2px 18px;
  border-bottom: 1.5px solid var(--color--ink);
  font-weight: 800;
}
.bsc-person__layout {
  display: grid;
  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(22px, 3vw, 44px);
}
.bsc-person__record { min-width: 0; }

.bsc-dossier {
  position: sticky;
  top: var(--bsc-top-inset);
  transition: var(--bsc-top-ease);
  max-height: calc(100vh - 36px - var(--bsc-top));
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1.5px solid var(--color--ink);
  border-radius: 22px;
  background: var(--color--white);
  scrollbar-width: thin;
}
.bsc-dossier > :not(.bsc-timeline-nav, .bsc-dossier__photo) { margin-inline: 28px; }
.bsc-dossier__name {
  margin-top: 28px;
  font-size: clamp(48px, 5.2vw, 72px);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-wrap: balance;
}
.bsc-dossier__role { margin-top: 14px; color: var(--color--blue); font-family: var(--font--display); font-size: 20px; font-weight: 750; line-height: 1.1; }
.bsc-dossier__bio { margin-block: 24px 28px; font-size: 14px; line-height: 1.62; }
.bsc-dossier__bio > * + * { margin-top: 1em; }

.bsc-dossier--has-photo { grid-template-columns: 132px minmax(0, 1fr); column-gap: 18px; }
.bsc-dossier--has-photo > * { grid-column: 1 / -1; }
.bsc-dossier__photo {
  grid-column: 1 !important;
  grid-row: 1 / span 2;
  width: 104px;
  aspect-ratio: 1;
  margin: 28px 0 0 28px;
  overflow: hidden;
  border: 1.5px solid var(--color--ink);
  border-radius: 12px;
  background: var(--color--blue-pale);
}
.bsc-dossier__photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bsc-dossier--has-photo .bsc-dossier__name { grid-column: 2; margin-left: 0; margin-right: 28px; font-size: clamp(36px, 3.6vw, 50px); }
.bsc-dossier--has-photo .bsc-dossier__role { grid-column: 2; margin-left: 0; }

/* Compact timeline navigation inside the dossier */
.bsc-timeline-nav { border-top: 1.5px solid var(--color--ink); }
.bsc-timeline-nav li { position: relative; border-bottom: 1px solid var(--bsc-soft); }
.bsc-timeline-nav li:last-child { border-bottom: 0; }
.bsc-timeline-nav li::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; bottom: -1px;
  left: 85px;
  width: 1px;
  background: var(--bsc-soft);
  pointer-events: none;
}
.bsc-timeline-nav li:first-child::after { top: 50%; }
.bsc-timeline-nav li:last-child::after { bottom: 50%; }
.bsc-timeline-nav li:only-child::after { display: none; }
.bsc-timeline-nav__entry {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 44px 12px minmax(0, 1fr);
  grid-template-areas: "date marker title";
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 10px 24px;
  background: transparent;
  text-align: left;
}
.bsc-timeline-nav__entry::before {
  content: "";
  grid-area: marker;
  position: relative;
  z-index: 2;
  width: 10px; height: 10px;
  justify-self: center;
  border: 1.5px solid var(--color--ink);
  border-radius: 50%;
  background: var(--color--white);
}
.bsc-timeline-nav__entry:hover { background: #f5f3ed; }
.bsc-timeline-nav__entry[aria-current="true"] { background: #eef6fb; }
.bsc-timeline-nav__entry[aria-current="true"]::before { border-color: var(--color--blue); background: var(--color--blue); }
.bsc-timeline-nav li[data-outcome="lost"] .bsc-timeline-nav__entry::before { border-color: var(--color--blue); border-style: dashed; }
.bsc-timeline-nav__date { grid-area: date; color: var(--color--blue); font-family: var(--font--display); font-size: 13px; font-weight: 850; line-height: 1.05; }
.bsc-timeline-nav__title { grid-area: title; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

/* Civic record timeline */
.bsc-timeline { display: block; }
.bsc-timeline__event {
  position: relative;
  display: grid;
  grid-template-columns: 44px 16px minmax(0, 1fr);
  grid-template-areas: "date marker card";
  align-items: start;
  gap: 8px;
  padding-bottom: 24px;
}
.bsc-timeline__event::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 34px; bottom: -34px;
  left: calc(44px + 8px + 8px - 0.75px);
  width: 1.5px;
  background: var(--color--ink);
}
.bsc-timeline__event:last-child::after { display: none; }
.bsc-timeline__event::before {
  content: "";
  grid-area: marker;
  position: sticky;
  z-index: 2;
  top: calc(var(--bsc-top-inset) + 9px);
  transition: var(--bsc-top-ease);
  width: 14px; height: 14px;
  justify-self: center;
  margin-top: 27px;
  border: 2px solid var(--color--ink);
  border-radius: 50%;
  background: var(--color--paper);
}
.bsc-timeline__event.is-active::before { border-color: var(--color--blue); background: var(--color--blue); }
.bsc-timeline__event[data-outcome="lost"]::before { border-color: var(--color--blue); border-style: dashed; }
.bsc-timeline__date {
  grid-area: date;
  position: sticky;
  top: var(--bsc-top-inset);
  transition: var(--bsc-top-ease);
  display: grid;
  justify-items: end;
  margin-top: 20px;
  color: var(--color--blue);
  font-family: var(--font--display);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.08;
  text-align: right;
}
.bsc-timeline__card { grid-area: card; min-width: 0; }

.bsc-campaign,
.bsc-office {
  scroll-margin-top: calc(var(--bsc-header-full) + 18px);
  overflow: hidden;
  border: 1.5px solid var(--color--ink);
  border-radius: 18px;
  background: var(--color--white);
}
.bsc-campaign:has(.bsc-questionnaire__details[open]) { overflow: visible; }
.bsc-campaign--past { background: #fbfaf7; }
.bsc-timeline__event[data-outcome="lost"] .bsc-campaign { border-style: dashed; }
.bsc-campaign__context,
.bsc-office__context {
  padding: 25px 30px 0;
  color: var(--color--blue);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bsc-campaign__cycle-link { text-transform: none; letter-spacing: 0; }
.bsc-campaign__race,
.bsc-office__title {
  padding: 8px 30px 0;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.bsc-campaign__party { padding: 8px 30px 0; color: var(--color--muted); font-size: 14px; font-weight: 650; }
.bsc-campaign__ballots { margin: 20px 30px 24px; border-top: 1px solid var(--bsc-soft); }
.bsc-campaign__ballot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bsc-soft);
}
.bsc-campaign__ballot-label { font-family: var(--font--display); font-size: 17px; font-weight: 800; }
.bsc-campaign__ballot-date { color: var(--color--muted); font-size: 13px; }
.bsc-campaign__ballot[data-outcome="lost"] .bsc-campaign__ballot-label::after { content: " — campaign ended"; color: var(--color--muted); font-family: var(--font--body); font-size: 12px; font-weight: 700; }

.bsc-office { background: var(--color--white); }
.bsc-office__context { padding-top: 25px; }
.bsc-office__context,
.bsc-office__title,
.bsc-office__body { background: var(--color--blue-pale); }
.bsc-office__body { padding: 8px 30px 25px; color: var(--color--blue-deep); font-weight: 700; }

.bsc-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 20px 30px 22px;
  border-top: 1.5px solid var(--color--ink);
}
.bsc-contacts__link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--color--ink);
  border-radius: 9px;
  padding: 8px 14px;
  background: var(--color--white);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.bsc-contacts__link:hover { background: var(--color--paper); }
.bsc-contacts__link--social { width: 48px; justify-content: center; padding: 0; }
.bsc-contacts__logo,
.bsc-contacts__link--social svg { width: 23px; height: 23px; flex: none; }

.bsc-questionnaire { border-top: 1.5px solid var(--color--ink); }
.bsc-questionnaire__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 18px 30px;
}
.bsc-questionnaire__title { font-family: var(--font--display); font-size: 20px; font-weight: 800; }
.bsc-questionnaire__published { color: var(--color--muted); font-size: 12px; }
.bsc-questionnaire__actions { margin-left: auto; }
.bsc-questionnaire__actions:empty { display: none; }
.bsc-questionnaire--unavailable { background: #faf9f5; }
.bsc-questionnaire__summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  border-top: 1px solid var(--bsc-soft);
  cursor: pointer;
  list-style: none;
}
.bsc-questionnaire__summary::-webkit-details-marker { display: none; }
.bsc-questionnaire__summary::after { content: "+"; font-size: 24px; font-weight: 400; line-height: 1; transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.bsc-questionnaire__details[open] > .bsc-questionnaire__summary::after { transform: rotate(45deg); }
.bsc-questionnaire__summary:hover { background: #f8f7f3; }
.bsc-questionnaire__disclosure { font-size: 13px; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }
.bsc-questionnaire__body { border-top: 1.5px solid var(--color--ink); }
.bsc-questionnaire__question { padding: 28px 30px; border-bottom: 1px solid var(--bsc-soft); }
.bsc-questionnaire__question:last-child { border-bottom: 0; }
.bsc-questionnaire__prompt { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.17; }
.bsc-questionnaire__answer { max-width: 72ch; margin-top: 18px; font-size: 15px; line-height: 1.65; }
.bsc-questionnaire__answer > * + * { margin-top: 1em; }
.bsc-questionnaire__no-answer {
  width: max-content;
  max-width: 100%;
  margin-top: 18px;
  border: 1.5px dashed var(--color--ink);
  border-radius: var(--radius--pill);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 850;
}

/* ---------- Degraded states ---------------------------------------------------------- */

.bsc-state {
  margin-top: 48px;
  padding: clamp(32px, 5vw, 56px);
  border: 2px solid var(--color--ink);
  border-radius: var(--radius--card);
  background: var(--color--white);
}
.bsc-state__title { max-width: 20ch; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1; }
.bsc-state__body { max-width: 58ch; margin-top: 14px; color: var(--color--muted); font-size: 16px; line-height: 1.6; }
.bsc-state__retry {
  min-height: 48px;
  margin-top: 24px;
  border: 0;
  border-radius: var(--radius--control);
  padding: 11px 16px;
  background: var(--color--ink);
  color: var(--color--white);
  font-weight: 800;
}
.bsc-state__retry:hover { background: var(--color--blue-deep); }
.bsc-state__link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 18px; font-weight: 800; }
.bsc-state--loading::after {
  content: "";
  display: block;
  max-width: 600px;
  height: 64px;
  margin-top: 28px;
  border-radius: 5px;
  background:
    linear-gradient(#dde1e2, #dde1e2) 0 0 / 100% 15px no-repeat,
    linear-gradient(#dde1e2, #dde1e2) 0 25px / 76% 15px no-repeat,
    linear-gradient(#dde1e2, #dde1e2) 0 50px / 45% 14px no-repeat;
  animation: bsc-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes bsc-pulse { to { opacity: 0.45; } }
.bsc-state--not-found { border-style: dashed; }
.bsc-directory__body > .bsc-state,
.bsc-election > .bsc-state { margin-top: 64px; }

/* ---------- Tablet: ≤991px ---------------------------------------------------------- */

@media (max-width: 991px) {
  .bsc-elections { --bsc-header-full: var(--header-height, 100px); }
  .bsc-election__tool { --bsc-bar: 82px; --bsc-dock: 104px; }
  .bsc-directory__intro,
  .bsc-election__header { padding-inline: 26px; view-timeline-inset: 92px 0px; }
  .bsc-directory__intro { margin-bottom: 46px; }
  .bsc-directory__body,
  .bsc-election > :not(.bsc-election__header),
  .bsc-person,
  .bsc-elections__view > .bsc-state { width: calc(100% - 24px); }

  .bsc-directory__stage { display: block; margin-bottom: 72px; }
  .bsc-directory__upcoming { margin-top: 24px; }
  .bsc-cycle--featured { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bsc-cycle--featured .bsc-cycle__date { grid-row: auto; min-height: 140px; padding: 28px; border-right: 0; border-bottom: 2px solid var(--color--ink); }
  .bsc-cycle--featured .bsc-cycle__date strong { font-size: 76px; }
  .bsc-cycle--featured .bsc-cycle__body { padding: 28px 28px 0; }
  .bsc-cycle--featured .bsc-cycle__name { margin-top: 26px; font-size: 42px; }
  .bsc-cycle--featured .bsc-cycle__link { margin: 26px 28px 28px; }

  .bsc-filters { grid-template-columns: 1fr; align-items: stretch; gap: 14px; padding: 16px; }
  .bsc-filters__toggle {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid var(--color--ink);
    border-radius: 14px;
    padding: 0 18px;
    background: var(--color--white);
    font-weight: 800;
    text-align: left;
  }
  .bsc-filters__toggle::after { content: "+"; font-size: 22px; font-weight: 400; }
  .bsc-filters__toggle[aria-expanded="true"] { border-radius: 14px 14px 0 0; }
  .bsc-filters__toggle[aria-expanded="true"]::after { content: "−"; }
  .bsc-filters__secondary { display: none; grid-row: auto; grid-template-columns: 1fr; gap: 18px; margin-top: -14px; padding: 18px 16px 16px; border: 1.5px solid var(--color--ink); border-top: 0; border-radius: 0 0 14px 14px; }
  .bsc-filters__secondary.is-open { display: grid; }
  .bsc-filters__pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsc-directory__summary { grid-column: 1; grid-row: auto; justify-content: space-between; padding-bottom: 0; }

  .bsc-directory__year { grid-template-columns: 1fr; }
  .bsc-directory__year-title { grid-row: auto; padding: 18px 20px; border-right: 0; border-bottom: 2px solid var(--color--ink); font-size: 34px; }
  .bsc-cycle--row { grid-column: 1; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 14px; padding: 18px 20px; }
  .bsc-cycle--row .bsc-cycle__link { grid-column: 1 / -1; justify-self: stretch; padding-top: 12px; border-top: 1px solid var(--bsc-soft); }

  .bsc-election__narrative { margin-block: 48px 40px; font-size: 16px; }
  .bsc-election__tool { display: flex; flex-direction: column; align-items: stretch; margin-top: 32px; }
  .bsc-election__tool > .bsc-race-nav { order: -1; }
  .bsc-race-nav {
    position: sticky;
    top: var(--bsc-top);
    z-index: 45;
    margin-bottom: 20px;
    padding-block: 8px;
    background: var(--color--paper);
  }
  .bsc-race-nav__toggle {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid var(--color--ink);
    border-radius: 16px;
    padding: 0 18px;
    background: var(--color--white);
    font-family: var(--font--display);
    font-weight: 850;
    text-align: left;
  }
  /* The same drawn plus and minus as the Body headings, so the bar and panel share one icon. */
  .bsc-race-nav__toggle::after {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background:
      linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  }
  .bsc-race-nav.is-open .bsc-race-nav__toggle { border-radius: 16px 16px 0 0; }
  .bsc-race-nav.is-open .bsc-race-nav__toggle::after { background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat; }
  .bsc-race-nav__body {
    display: none;
    position: absolute;
    top: calc(100% - 8px);
    left: 0; right: 0;
    z-index: 8;
    max-height: 65vh;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 28px rgb(15 24 29 / 0.2);
  }
  .bsc-race-nav.is-open .bsc-race-nav__body { display: block; }
  .bsc-race-nav__link { min-height: 44px; padding-inline: 10px; font-size: 13px; }
  .bsc-race-nav__count { font-size: 11px; }
  /* Once the navigator is docked, a square ink button beside it returns to the top of the
     Tool (prototype B). */
  .bsc-race-nav__bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bsc-race-nav[data-docked] .bsc-race-nav__bar { grid-template-columns: minmax(0, 1fr) 56px; }
  .bsc-race-nav[data-docked] .bsc-race-nav__top {
    position: relative;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--color--ink);
    border-radius: 14px;
    padding: 0;
    background: var(--color--ink);
    color: var(--color--white);
  }
  /* Drawn like the toggle's plus and minus: a 2px stem under a 2px chevron. */
  .bsc-race-nav__top::before,
  .bsc-race-nav__top::after { content: ""; position: absolute; left: 50%; }
  .bsc-race-nav__top::before { top: 19px; width: 2px; height: 18px; margin-left: -1px; background: currentColor; }
  .bsc-race-nav__top::after {
    top: 20px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
  }
  /* Open, the navigator is one unit: the toggle takes the full width so it and its panel
     share both edges, and the top button steps aside (the panel is the way around now). */
  .bsc-race-nav.is-open .bsc-race-nav__bar { grid-template-columns: minmax(0, 1fr); }
  .bsc-race-nav.is-open .bsc-race-nav__top { display: none; }
  .bsc-race-nav__top:hover { background: var(--color--blue-deep); }
  /* The navigator is the sticky bar here, and the finder docks a fixed gap beneath it
     (prototype B): the address, or My ballot's way back, stays in reach. */
  .bsc-ballot-finder { top: calc(var(--bsc-top) + 82px); }
  .bsc-election__tool:not(:has(> .bsc-race-nav)) > .bsc-ballot-finder { top: var(--bsc-top-inset); }

  .bsc-person__layout { display: block; }
  .bsc-dossier { position: static; max-height: none; margin-bottom: 40px; }
}

/* ---------- Mobile landscape: ≤767px ------------------------------------------------ */

@media (max-width: 767px) {
  .bsc-elections { width: 100%; }
  .bsc-directory__intro,
  .bsc-election__header { padding: 28px 26px 66px; border-radius: 0 0 30px 30px; }
  .bsc-directory__intro h1,
  .bsc-election__header h1 { margin-top: 28px; font-size: 58px; }
  html:has(.bsc-directory__intro, .bsc-election__header) .site-header-slot::before { width: 100%; }
  html:has(.bsc-directory__intro, .bsc-election__header) .site-header:not(.is-over-content)::before { left: calc(-1 * var(--stuck-left, 0px)); width: 100vw; }
  @keyframes bsc-canopy-band {
    from, to { left: calc(-1 * var(--stuck-left, 0px)); width: 100vw; border-bottom-color: transparent; background: var(--color--blue); }
  }
  .bsc-directory__summary-copy { margin-top: 38px; padding-right: 0; }
  .bsc-directory__body,
  .bsc-election > :not(.bsc-election__header),
  .bsc-person,
  .bsc-elections__view > .bsc-state { width: calc(100% - 32px); }

  .bsc-cycle--upcoming { grid-template-columns: 68px minmax(0, 1fr) 28px; padding: 18px 16px; }
  .bsc-ballot-timeline { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .bsc-ballot-timeline__step + .bsc-ballot-timeline__step::before {
    top: -15px;
    left: 24px;
    width: 0;
    height: 14px;
    border-top: 0;
    border-left: 1.5px solid currentColor;
  }
  .bsc-ballot-timeline__step[data-ballot-state="next"]::before { border-left-color: var(--color--white); }

  .bsc-ballot-finder { padding: 16px; }
  .bsc-ballot-finder__submit,
  .bsc-my-ballot__return { gap: 10px; padding-inline: 12px; }
  /* The field is too narrow here for an address on one line, so the list runs under the
     button too, and the joined control squares its lower corners while it is open. */
  .bsc-ballot-finder__suggestions { grid-column: 1 / 3; right: 0; }
  .bsc-ballot-finder:focus-within:has(.bsc-ballot-finder__input[aria-expanded="true"]) .bsc-ballot-finder__submit { border-bottom-right-radius: 0; }
  .bsc-my-ballot__return { font-size: clamp(12px, 3.4vw, 16px); }
  .bsc-race-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .bsc-race-filters .bsc-dropdown { grid-column: 1 / -1; margin-left: 0; }
  .bsc-race-ledger { padding-inline: 12px; }
  .bsc-precandidacy { padding-inline: 14px; }
  .bsc-race-group__title { padding-inline: 4px; font-size: 34px; }
  .bsc-race__header { flex-direction: column; align-items: stretch; padding-inline: 4px; }
  .bsc-race__compare { width: 100%; }
  .bsc-candidate { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding-inline: 4px; }
  .bsc-candidate__main { display: flex; flex-wrap: wrap; gap: 8px 10px; }
  .bsc-candidate__heading { flex: 1 1 100%; font-size: 20px; }
  .bsc-candidate__party { flex: 1 1 100%; }
  .bsc-candidate__badges { justify-content: flex-start; }
  .bsc-candidate__link { padding-top: 0; }

  .bsc-comparison { width: 100vw; max-width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .bsc-comparison__header { gap: 14px; padding: 16px; }
  .bsc-comparison__title { font-size: 30px; }
  .bsc-comparison__subtitle { padding-inline: 16px; }
  .bsc-comparison__table { --bsc-comparison-prompt: 150px; min-width: calc(150px + var(--bsc-comparison-columns, 2) * 230px); }
  .bsc-comparison__prompt { padding: 16px; font-size: 16px; }
  .bsc-comparison__candidate { padding: 14px; }
  .bsc-comparison__answer { padding: 16px 14px; }

  .bsc-person { padding-top: 24px; }
  .bsc-dossier > :not(.bsc-timeline-nav, .bsc-dossier__photo) { margin-inline: 20px; }
  .bsc-dossier--has-photo { grid-template-columns: 108px minmax(0, 1fr); column-gap: 14px; }
  .bsc-dossier__photo { width: 88px; margin: 20px 0 0 20px; }
  .bsc-dossier__name { margin-top: 20px; font-size: 54px; }
  .bsc-dossier--has-photo .bsc-dossier__name { font-size: 38px; }
  .bsc-timeline-nav__entry { padding-inline: 20px; }
  .bsc-timeline-nav li::after { left: 81px; }
  .bsc-timeline__event { grid-template-columns: 40px 14px minmax(0, 1fr); gap: 6px; padding-bottom: 18px; }
  .bsc-timeline__event::after { left: calc(40px + 6px + 7px - 0.75px); }
  .bsc-timeline__date { font-size: 12px; }
  .bsc-timeline__event::before { width: 12px; height: 12px; margin-top: 25px; }
  :is(.bsc-campaign, .bsc-office) > :is(.bsc-campaign__context, .bsc-office__context, .bsc-campaign__race, .bsc-office__title, .bsc-campaign__party, .bsc-office__body) { padding-inline: 20px; }
  .bsc-campaign__ballots { margin-inline: 20px; }
  .bsc-contacts { padding: 18px 20px 20px; }
  .bsc-questionnaire__header,
  .bsc-questionnaire__summary,
  .bsc-questionnaire__question { padding-inline: 20px; }
  .bsc-questionnaire__actions { width: 100%; margin-left: 0; }
  .bsc-questionnaire__compare { width: 100%; }
}

/* ---------- Mobile portrait: ≤479px ------------------------------------------------- */

@media (max-width: 479px) {
  .bsc-cycle--featured .bsc-cycle__name { font-size: 36px; }
  .bsc-filters__pills { grid-template-columns: 1fr 1fr; }
  .bsc-ballot-finder__input,
  .bsc-my-ballot__context { padding-inline: 10px; }
  .bsc-candidate { grid-template-columns: 1fr; }
  .bsc-candidate__link { justify-self: start; min-height: 32px; }
  .bsc-dossier__name { font-size: 46px; }
  .bsc-dossier--has-photo { grid-template-columns: 1fr; }
  .bsc-dossier--has-photo .bsc-dossier__name,
  .bsc-dossier--has-photo .bsc-dossier__role { grid-column: 1; margin-left: 20px; }
  .bsc-dossier__photo { grid-row: auto; }
}

/* ---------- Preferences ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bsc-elections *,
  .bsc-elections *::before,
  .bsc-elections *::after,
  .bsc-comparison * {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  .bsc-badge, .bsc-status, .bsc-lifecycle, .bsc-questionnaire__no-answer, .bsc-comparison__no-answer {
    forced-color-adjust: none;
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .bsc-badge--endorsed { background: Highlight; color: HighlightText; }
}

@media print {
  .bsc-race-nav, .bsc-ballot-finder, .bsc-race-filters, .bsc-filters, .bsc-race__compare,
  .bsc-questionnaire__compare, .bsc-candidate__link, .bsc-timeline-nav { display: none !important; }
  .bsc-directory__intro, .bsc-election__header { background: none; color: #000; }
  .bsc-election__tool { display: block; }
  .bsc-dossier { position: static; max-height: none; }
  .bsc-candidate, .bsc-race, .bsc-campaign { break-inside: avoid; }
  .bsc-badge, .bsc-status, .bsc-lifecycle { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
}

/* ---------- Questionnaire sections and sub-questions ------------------------------------ */

.bsc-questionnaire__section-title {
  padding: 16px 30px;
  border-bottom: 1px solid var(--color--ink);
  background: var(--color--blue-pale);
  font-family: var(--font--display);
  font-size: 19px;
  font-weight: 800;
}
.bsc-questionnaire__subquestions { margin-top: 24px; padding-left: 20px; }
.bsc-questionnaire__subquestion { padding-block: 16px; border-top: 1px solid var(--bsc-soft); }
.bsc-questionnaire__child-prompt { font-size: 16px; font-weight: 750; line-height: 1.4; }
.bsc-questionnaire__subquestion dd { margin: 10px 0 0; }
.bsc-questionnaire__child-answer {
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bsc-questionnaire__answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.bsc-comparison__section th {
  padding: 16px 24px;
  border-bottom: 2px solid var(--color--ink);
  background: var(--color--blue-pale);
  font-family: var(--font--display);
  font-size: 19px;
  text-align: left;
}
.bsc-comparison__subquestion .bsc-comparison__prompt {
  padding-left: 40px;
  font-family: var(--font--body);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
}
.bsc-comparison__subquestion > * { border-bottom-width: 1px; }
.bsc-comparison__answer { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .bsc-questionnaire__section-title { padding-inline: 20px; }
  .bsc-questionnaire__subquestions { padding-left: 12px; }
}

.bsc-questionnaire__prompt,
.bsc-questionnaire__child-prompt,
.bsc-questionnaire__section-title { overflow-wrap: anywhere; }