/* Thinking Voter, desktop first (Figma file omAhPVNlqBqnltlXoHehTv: Home 79:1592, Split ZIP 1:2,
   Who's on your ballot 7:156, Race page 78:833). Values are the design's own; frames are 1728px wide. */

@font-face { font-family: "Libre Baskerville"; src: url("fonts/LibreBaskerville-Variable.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
/* Helvetica Neue is used where the reader has it installed; it is never served. TeX Gyre Heros is a free
   (GUST licence) Helvetica lookalike for everyone else. */
@font-face { font-family: "TV Heros"; src: url("fonts/TeXGyreHeros-Regular.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TV Heros"; src: url("fonts/TeXGyreHeros-Bold.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  --bg: #f4f3f1; --ink: #000; --muted: #5e5550; --navy: #002472; --link: #0034a4; --line: #e8dfd9; --card: #fff; --tan: #d9d5ce;
  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, "TV Heros", Arial, sans-serif;
  --page: 1525px; --gutter: 102px;
  --hatch: "////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////";
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: normal;
  min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; }
img { display: block; }
a { color: var(--link); }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.staging-banner { background: #fff3cd; color: #3d2e00; padding: 8px var(--gutter); font-size: 14px; }
.staging-banner label { margin-left: 12px; }
body[data-hide-upload] [data-origin=upload], body[data-hide-captured] [data-origin=captured] { display: none; }

/* Header: logo at 58px from the top; home/split-ZIP frames put it 56px from the left, the others 102px. */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 58px var(--gutter) 0;
  max-width: calc(var(--page) + 2 * var(--gutter)); width: 100%; margin: 0 auto; }
.top--wide { max-width: none; padding-left: 56px; padding-right: 55px; }
.logo { justify-self: start; }
.logo img { width: 258px; height: 30px; }
/* "Pocket Ballot", centered between the logo and the menu icon (not drawn in Figma; styled like the header's
   "Back to all races" link). */
.top .pocket-open { justify-self: center; margin-top: 4px; background: none; border: 0; padding: 0; font: inherit; font-size: 18px;
  font-weight: 500; color: var(--ink); cursor: pointer; }
.top .pocket-open:hover { text-decoration: underline; }
.menu { position: relative; padding-top: 6px; justify-self: end; }
.menu-btn { background: none; border: 0; padding: 0; cursor: pointer; }

/* Type */
.display { font-family: var(--serif); font-weight: 400; font-size: 64px; letter-spacing: -3.2px; color: var(--ink);
  text-align: center; }
.display--left { text-align: left; }
.sub-display { font-family: var(--serif); font-weight: 400; font-size: 35px; letter-spacing: -1.75px; text-align: center; margin-top: 40px; }
.lede { font-size: 22px; color: var(--muted); text-align: center; }
.lede strong { font-weight: 500; color: var(--ink); }
.lede--left { text-align: left; margin-top: 24px; }
.fine { font-size: 12px; color: var(--muted); text-align: center; }
.fine--left { text-align: left; font-size: 14px; }
.link { color: var(--link); }
.muted-link { color: var(--muted); }
.form-error { color: #8a1c1c; font-size: 16px; text-align: center; margin-top: 12px; }

/* Home */
.hero { display: flex; flex-direction: column; align-items: center; padding: 283px 24px 160px; }
.hero .lede { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.manatee { width: 60px; height: 60px; margin: -17px 0; }
.l2 { display: contents; }                            /* desktop and tablet: the wrapper is not a box, the lede's flex row is unchanged */
.pill-form { display: flex; align-items: center; gap: 10px; width: 320px; height: 70px; background: var(--card);
  border: 1px solid var(--line); border-radius: 100px; padding: 0 7px 0 20px; margin-top: 45px; }
.pill-form input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.pill-form input::placeholder { color: var(--muted); opacity: 1; }
.pill-form:focus-within { border-color: var(--ink); }
.go { flex: 0 0 55px; width: 55px; height: 55px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.hero .fine { margin-top: 15px; }

/* Split ZIP (Figma 1:2) */
.where { display: flex; flex-direction: column; align-items: center; padding: 86px 24px 120px; }
.place { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; text-align: right; }
.place--center { align-items: center; text-align: center; }
.place-name { font-family: var(--serif); font-size: 25px; letter-spacing: -1.25px; color: var(--ink); }
.place-zip { font-size: 16px; color: var(--muted); }
.place-zip strong { color: var(--ink); font-weight: 500; }
.where .display { margin-top: 50px; max-width: 1068px; }
.where .lede { margin-top: 24px; max-width: 895px; }
.pill-form--wide { width: 525px; border: 2px solid var(--ink); margin-top: 55px; }
.pill-form--wide input { font-size: 18px; }
.or { display: flex; align-items: center; gap: 20px; margin: 55px 0 41px; font-size: 14px; color: var(--ink); }
.outline-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 70px; padding: 0 21px 0 22px;
  background: var(--card); border: 1px solid var(--ink); border-radius: 78px; font: inherit; font-size: 18px; font-weight: 500;
  color: var(--ink); cursor: pointer; min-width: 246px; }
.outline-btn--sm { height: 49px; min-width: 0; font-size: 16px; margin-top: 16px; }
.where > .fine { margin-top: 29px; }
#pick-step { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#pick-options { display: flex; flex-direction: column; gap: 10px; min-width: 525px; }
.pick-opt { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 25px;
  padding: 18px 24px; font-size: 18px; cursor: pointer; }
.pick-opt:has(input:checked) { border-color: var(--ink); }
.pick-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 25px; padding: 14px 24px; font-size: 18px; }
.pick-row select { font: inherit; font-size: 18px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }

/* Header band: white on race and candidate pages (Figma 85:1769: 0-340px). */
.head-band--white { background: var(--card); }
.page-pad { max-width: calc(var(--page) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter);
  padding-right: var(--gutter); width: 100%; }

/* Ballot header (Figma 74:602): title left; county above the ZIP, right. */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 40px;
  max-width: calc(var(--page) + 2 * var(--gutter)); margin: 69px auto 0; padding: 0 var(--gutter) 0 94px; width: 100%; }
.page-head .display--left { max-width: 1080px; }
.place-name--lg { font-size: 35px; letter-spacing: -1.75px; }
.dash-rule { height: 1px; border: 0; margin: 49px 0 0; background: url("img/rule-h.svg") repeat-x left center; }
.pill { display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: var(--bg);
  font-weight: 500; font-size: 14px; height: 35px; padding: 0 21px 0 22px; border-radius: 78px; white-space: nowrap; }
.pill--lg { font-size: 18px; height: 45px; min-width: 115px; padding: 0 27px 0 28px; border-radius: 100px; }
.confirm-line { margin-top: 30px; font-size: 16px; }

/* Race header (Figma 85:1767): back link, then title + level pill + special-election tag; county + ZIP right. */
.race-head { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 73px var(--gutter) 40px; width: 100%; }
.back-link { display: inline-flex; align-items: center; gap: 13px; font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; }
.back-link img { transform: rotate(180deg); }
.back-link:hover { text-decoration: underline; }
.race-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 45px; }
.race-title-row { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; min-width: 0; }
.race-kicker { font-family: var(--serif); font-size: 35px; letter-spacing: -1.75px; }
.race-note-line { margin-top: 16px; font-size: 18px; color: var(--muted); }
.info-link { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: inherit;
  font-size: 16px; font-weight: 500; color: var(--muted); text-decoration: underline; cursor: pointer; }
.info-link--ballot { font-size: 18px; font-weight: 400; }

/* Popups (Figma 90:2232, 90:2233, 87:2132): open over their own trigger, dashed border, soft shadow. */
.pop-wrap { position: relative; display: inline-block; }
.popup { position: absolute; z-index: 30; top: -17px; left: -15px; width: 347px; display: flex; flex-direction: column; gap: 22px;
  padding: 17px 16px 22px 15px; background: var(--card); border: 1px dashed var(--ink); border-radius: 20px;
  filter: drop-shadow(-10px 10px 3.1px rgba(0, 0, 0, .15)); text-align: left; text-decoration: none; }
.popup-head { display: flex; align-items: center; gap: 10px; }
.popup-title { flex: 1 1 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.popup-close { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.popup-body { width: 261px; margin-left: 25px; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 17px; }
.popup-em { font-weight: 500; color: var(--ink); }
.popup--sources { top: -15px; width: 273px; padding: 15px; gap: 15px; border-color: var(--link); }
.popup-title--src { flex: none; font-size: 14px; font-weight: 500; color: var(--link); }
.src-list { display: flex; flex-direction: column; gap: 8px; }
.src-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.src-item img { flex: 0 0 19px; }
.src-fav { border-radius: 50%; background: #fff; object-fit: contain; }
.src-item a, .src-text { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--link); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: none; }
.src-text { color: var(--muted); }
.src-item a:hover { text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--link); cursor: pointer; }

/* Who's on your ballot (Figma 7:156) */
.ballot { max-width: var(--page); width: calc(100% - 2 * var(--gutter)); margin: 50px auto 120px; display: flex; flex-direction: column; gap: 75px; }
.ballot-section { display: flex; flex-direction: column; gap: 50px; align-items: flex-start; }
.ballot-races { display: flex; flex-direction: column; gap: 50px; width: 100%; }
.race-row { position: relative; display: grid; grid-template-columns: 1fr 55px; grid-template-rows: auto 115px; column-gap: 19px;
  row-gap: 35px; align-items: center; padding-bottom: 25px; color: inherit; width: 100%; }
.race-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 25px; }
.race-link { color: inherit; text-decoration: none; }
.race-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }          /* the whole row is the link */
.race-row .pop-wrap, .race-row .badge { position: relative; z-index: 2; }
.race-name { font-family: var(--serif); font-size: 35px; letter-spacing: -1.75px; color: var(--muted); }
.race-note { font-size: 18px; color: var(--muted); }
.race-photos { display: flex; gap: 20px; align-items: center; }
.thumb { flex: 0 1 129px; min-width: 0; width: 129px; aspect-ratio: 129 / 165; border-radius: 15px; overflow: hidden; background: var(--tan); display: block; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.race-more { flex: none; font-size: 18px; line-height: 25px; color: #000; white-space: nowrap; }
.race-row:hover .race-name, .race-row:focus-within .race-name { color: #000; }

/* Race page (Figma 78:833, 85:1771): one 400px column per candidate, 98px apart; issue rows span every column. */
.reveal-bar { display: flex; align-items: center; gap: 24px; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 48px auto 0;
  padding: 0 var(--gutter) 0 104px; width: 100%; }
.reveal { display: inline-flex; align-items: center; gap: 10px; height: 49px; padding: 0 21px 0 22px; background: var(--card);
  border: 1px solid var(--ink); border-radius: 78px; font: inherit; font-size: 18px; color: var(--ink); cursor: pointer; }
.reveal .eye-open { display: none; }
.reveal[aria-pressed=true] { background: var(--ink); color: var(--bg); }
.reveal[aria-pressed=true] .eye-open { display: block; }
.reveal[aria-pressed=true] .eye-closed { display: none; }

.race-scroll { overflow-x: auto; margin-top: 63px; padding: 0 var(--gutter) 0; max-width: calc(var(--page) + 2 * var(--gutter));
  margin-left: auto; margin-right: auto; width: 100%; }
.race-grid { display: grid; column-gap: 98px; grid-auto-flow: row; position: relative; width: max-content; padding-bottom: 60px; }
.cols-1 { grid-template-columns: repeat(1, 400px); } .cols-2 { grid-template-columns: repeat(2, 400px); }
.cols-3 { grid-template-columns: repeat(3, 400px); } .cols-4 { grid-template-columns: repeat(4, 400px); }
.cols-5 { grid-template-columns: repeat(5, 400px); } .cols-6 { grid-template-columns: repeat(6, 400px); }
.cols-7 { grid-template-columns: repeat(7, 400px); } .cols-8 { grid-template-columns: repeat(8, 400px); }
.cols-9 { grid-template-columns: repeat(9, 400px); } .cols-10 { grid-template-columns: repeat(10, 400px); }
.cols-11 { grid-template-columns: repeat(11, 400px); } .cols-12 { grid-template-columns: repeat(12, 400px); }
.cols-13 { grid-template-columns: repeat(13, 400px); } .cols-14 { grid-template-columns: repeat(14, 400px); }
.cols-15 { grid-template-columns: repeat(15, 400px); } .cols-16 { grid-template-columns: repeat(16, 400px); }
/* Dashed column rules sit mid-gap (49px past each 400px column, every 498px), the full height of the grid:
   a 1px line repeated every column, cut into 3px dashes (the design's 3 3 dash, 50% #5e5550). */
.race-grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to right, transparent 449px, rgba(94, 85, 80, .5) 449px 450px, transparent 450px) 0 0 / 498px 100% repeat-x;
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px);
  mask: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px); }

.cand { grid-row: 1; display: flex; flex-direction: column; gap: 50px; width: 400px; }
.cand-head { display: flex; gap: 27px; align-items: center; min-height: 225px; }
.photo { flex: 0 0 176px; width: 176px; height: 225px; border-radius: 999px; overflow: hidden; background: var(--card); display: block; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.cand-id { display: flex; flex-direction: column; gap: 27px; align-items: flex-start; min-width: 0; }
.party-slot { width: 197px; font-size: 18px; font-weight: 500; color: var(--muted); }
.cand-name { font-family: var(--serif); font-weight: 400; font-size: 35px; line-height: 36px; color: var(--ink); }
.cand-name a { color: inherit; text-decoration: none; }
.cand-name a:hover { text-decoration: underline; }
.cand-actions > .d-only { display: contents; }          /* the candidate page wraps the desktop pick button for the phone's swap; the wrapper takes no box */
.cand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-height: 35px; padding: 6px 15px; background: var(--card);
  border-radius: 78px; font-size: 16px; font-weight: 500; color: var(--muted); text-align: center; }
.badge--sm { min-height: 24px; padding: 2px 10px; font-size: 13px; vertical-align: middle; }
/* Pocket Ballot "+" (Figma 89:2161 / 90:2231): outline; filled when picked. On hover the filled icon shows with
   "Add to my ballot" (or "On my ballot") beside it, laid over the row so nothing around it moves. */
.pocket-pick { position: relative; display: inline-flex; align-items: center; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); }
.pocket-pick .pick-on { display: none; }
.pocket-pick .pick-label { display: none; position: absolute; left: 45px; top: 50%; transform: translateY(-50%); z-index: 3;
  white-space: nowrap; background: var(--bg); padding: 6px 10px 6px 0; }
.pocket-pick:hover .pick-on, .pocket-pick:focus-visible .pick-on, .pocket-pick[aria-pressed=true] .pick-on { display: block; }
.pocket-pick:hover .pick-off, .pocket-pick:focus-visible .pick-off, .pocket-pick[aria-pressed=true] .pick-off { display: none; }
.pocket-pick:hover .pick-label, .pocket-pick:focus-visible .pick-label { display: block; }
/* Locked "+" (race not on the voter's ballot): grayed out; the note shows on hover, keyboard focus, or tap. */
.pick-wrap { position: relative; display: inline-flex; }
.pocket-pick.is-locked { opacity: .35; cursor: not-allowed; }
.pocket-pick.is-locked .pick-on, .pocket-pick.is-locked:hover .pick-on { display: none; }
.pocket-pick.is-locked .pick-off, .pocket-pick.is-locked:hover .pick-off { display: block; }
.pocket-pick.is-locked .pick-label { display: none !important; }
.pick-note { display: none; position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 10px; }
.pick-note a { color: #fff; text-decoration: underline; margin-left: 6px; }
.pick-wrap:hover .is-locked + .pick-note, .pick-wrap:focus-within .is-locked + .pick-note, .pick-note.is-open { display: block; }
.return-note { margin-top: 24px; font-size: 18px; }
dialog.pocket-confirm { border: 0; border-radius: 20px; padding: 28px 32px; max-width: 420px; background: #fbfaf7; color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25); }
dialog.pocket-confirm::backdrop { background: rgba(94, 85, 80, .5); }
dialog.pocket-confirm p { font-size: 18px; line-height: 1.4; }
.pocket-confirm-actions { display: flex; gap: 12px; margin-top: 22px; }
.pocket-confirm-actions .pocket-btn { flex: 1 1 0; }
.cand-body { display: flex; flex-direction: column; gap: 35px; }
.bio { font-size: 16px; line-height: 22px; color: var(--muted); }
.bio--placeholder { font-style: italic; }
.cand-links { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.site-link { font-size: 18px; color: var(--muted); text-decoration: underline; }
.social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.social a { display: inline-flex; line-height: 0; }
.social .social-text { line-height: normal; font-size: 14px; color: var(--muted); }
.photo-col { flex: 0 0 176px; }
.cand--page .cand-body { margin-top: 20px; }
.issues-label { grid-row: 2; font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -1.25px; color: var(--ink);
  margin: 61px 0 37px; }
.issue-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 98px; row-gap: 21px;
  padding: 30px 62px 25px 22px; margin: 0 -62px 22px 0; border-radius: 7px; }
.issue-row:nth-of-type(odd) { background: var(--card); }
.issue-title { grid-column: 1 / -1; grid-row: 1; font-size: 20px; font-weight: 500; color: var(--ink); max-width: 377px; }
.cell { grid-row: 2; display: flex; flex-direction: column; gap: 25px; max-width: 377px; }
.quote { font-size: 14px; color: var(--muted); white-space: pre-line; }
.read-full { color: var(--link); white-space: nowrap; }
.cell-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; color: var(--muted); }
.cell-meta a { color: var(--link); text-decoration: none; }
.cell-meta a:hover { text-decoration: underline; }
.cell-meta--left { justify-content: flex-start; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.race-notes { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto 100px; padding: 0 var(--gutter); width: 100%;
  display: flex; flex-direction: column; gap: 12px; }
.corrections { font-size: 16px; }

@media print {
  .staging-banner, .top, .foot, .nv, .nv-scrim, .dash-rule { display: none !important; }
  body { background: #fff; }
  .page-head { margin-top: 0; padding-left: 0; }
  .page-pad { padding: 0; }
}

/* Candidate page */
.cand--page { margin: 63px auto 0; max-width: calc(var(--page) + 2 * var(--gutter)); padding: 0 var(--gutter); width: 100%; }
.cand--page .bio { max-width: 640px; }
.cand--page .cand-name { font-size: 50px; line-height: 52px; }
.cand-section { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 70px auto 0; padding: 0 var(--gutter); width: 100%; }
.cand-section:last-child { margin-bottom: 100px; }
.section-title { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -1.25px; color: var(--muted); margin-bottom: 30px; }
.issue-block { background: var(--card); border-radius: 7px; padding: 30px 22px 25px; margin-bottom: 22px; max-width: 900px; }
.issue-block .issue-title { margin-bottom: 21px; max-width: none; }
.claim { padding: 14px 0; border-top: 1px solid var(--line); }
.claim:first-of-type { border-top: 0; padding-top: 0; }
.quote--full { margin: 0; font-size: 16px; line-height: 22px; color: var(--ink); }
.checked { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--muted); }
.checked li { margin: 4px 0; word-break: break-all; }

/* All races */
.index { max-width: var(--page); width: calc(100% - 2 * var(--gutter)); margin: 40px auto 100px; }
.index h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -1.25px; margin: 40px 0 12px; }
.index-list { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 40px; }
.index-list li { padding: 4px 0; font-size: 16px; break-inside: avoid; }
.search { width: 525px; height: 56px; border: 1px solid var(--line); border-radius: 100px; padding: 0 22px; font: inherit; font-size: 16px;
  margin-top: 20px; background: var(--card); }


/* The Yes / No buttons of the "different ZIP" question (dialog.pocket-confirm). */
.pocket-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 26px;
  border: 1.5px solid var(--ink); background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pocket-btn--dark { background: var(--ink); color: #fff; }
/* ---------- Pocket Ballot drawer, desktop and tablet (Figma 95:2234 desktop, 354:11355 tablet). A right-side drawer over the dimmed
   page: the dialog (608px) and, on its right edge, the Save / Share / Print panel (97px), 705px in all at every width from 768px up.
   Tablet is the 768px to 1439px band (the same band the page scaling below uses); its panel labels are 12px regular with 40px
   between the buttons, desktop (1440px and up) has 14px medium and 50px. Phones keep the bottom sheet (.bs--p). ---------- */
.pd-scrim, .pd { display: none; }
html.pd-open, html.pd-open body { overflow: hidden; }
@media (min-width: 768px) {
  .pd-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100; background: rgba(114, 110, 107, .9); opacity: 0;
    transition: opacity .25s ease; }
  .pd-scrim.is-open { opacity: 1; }
  .pd:not([hidden]) { --light-blue: #d3e1ff; display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
    width: min(705px, 100vw); background: var(--bg); color: var(--ink);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25); outline: 0; transform: translateX(100%); transition: transform .25s ease; }
  .pd.is-open { transform: none; }
  .pd-main { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  .pd-head { flex: none; position: relative; height: 194px; padding: 30px 25px 0; background: var(--card); }
  .pd-logo img { width: 210px; height: 24px; }
  .pd-close { position: absolute; top: 25px; left: 50%; margin-left: -17.5px; width: 35px; height: 35px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
  .pd-close img { display: block; width: 35px; height: 35px; }
  .pd-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 37px; }
  .pd-title { font-family: var(--serif); font-weight: 400; font-size: 35px; line-height: 35px; letter-spacing: -1.75px; color: #000; white-space: nowrap; }
  .pd-where { font-size: 18px; line-height: 25px; color: #000; text-align: right; white-space: nowrap; }
  .pd-chips { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-top: 19px; }
  .pd-chip { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 5px; border-radius: 5px; background: var(--bg);
    font-size: 12px; line-height: 16px; color: #000; white-space: nowrap; }
  .pd-chip:not(.pd-chip--note) { width: 198px; }
  .pd-chip strong { font-weight: 700; margin-right: .25em; }
  .pd-chip--note { padding: 0 10px; background: var(--light-blue); color: var(--navy); }
  .pd-chip--note strong { margin-right: 0; }
  .pd-races { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 25px 25px; }
  .pd-sec { padding-bottom: 10px; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--link); }
  .pd-rule { margin: 20px 0; overflow: hidden; white-space: nowrap; font-size: 12px; letter-spacing: 2.4px; color: var(--muted); user-select: none; }
  .pd-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 5px; }
  .pd-photo { flex: none; width: 57px; height: 68px; border-radius: 5px; background: var(--tan); overflow: hidden; }
  .pd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pd-row--open .pd-photo { background: none; border: 1.5px dashed var(--muted); }
  .pd-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
  .pd-race { font-size: 12px; line-height: 16px; color: var(--muted); }
  .pd-name { font-size: 18px; line-height: 25px; color: #000; }
  .pd-name strong { font-weight: 700; }
  .pd-row--open .pd-name { font-size: 17px; line-height: normal; color: var(--muted); }
  /* "Change" / "Compare" show on hover (and for keyboard focus; always where there is no hover); the row turns into a white card. */
  .pd-link { flex: none; font-size: 14px; font-weight: 500; line-height: normal; color: var(--link); text-decoration: none; white-space: nowrap;
    opacity: 0; transition: opacity .15s ease; }
  .pd-row:hover, .pd-row:focus-within { padding-right: 18px; border-radius: 10px; background: var(--card); }
  .pd-row:hover .pd-link, .pd-row:focus-within .pd-link { opacity: 1; }
  .pd-empty { padding: 24px 0; font-size: 15px; color: var(--muted); }
  .pd-toast { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 8px 12px; border-radius: 5px;
    background: var(--light-blue); font-size: 12px; font-weight: 700; line-height: 16px; color: var(--navy); white-space: nowrap; }
  .pd-side { position: relative; flex: none; width: 97px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 50px;
    padding: 25px 0; background: var(--card); border-left: 1px solid var(--tan); }
  .pd-act { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .pd-circle { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 100px;
    cursor: pointer; }
  .pd-circle img { display: block; width: 30px; height: 30px; }
  .pd-circle--main { background: var(--link); }
  .pd-circle--soft { background: var(--light-blue); }
  .pd-circle--line { border: 2px solid var(--link); background: none; }
  .pd-act-l { font-size: 14px; font-weight: 500; line-height: normal; text-align: center; color: var(--link); cursor: pointer; }
  .pd-close:focus-visible, .pd-circle:focus-visible, .pd-link:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .pd-side { gap: 40px; }
  .pd-act-l { font-size: 12px; font-weight: 400; line-height: 16px; }
}
@media (hover: none) { .pd-link { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pd-scrim { transition-duration: .15s !important; }
  .pd { transform: none !important; opacity: 0; transition: opacity .15s ease !important; }
  .pd.is-open { opacity: 1; }
}
@media print {
  html.printing-pocket body > *:not(#pocket) { display: none !important; }
  html.printing-pocket, html.printing-pocket body { display: block; height: auto; overflow: visible; background: #fff; }
  html.printing-pocket .pd { display: block !important; position: static; width: 100%; transform: none; opacity: 1; box-shadow: none; background: #fff; }
  html.printing-pocket .pd-main { display: block; }
  html.printing-pocket .pd-side, html.printing-pocket .pd-toast, html.printing-pocket .pd-close, html.printing-pocket .pd-link { display: none !important; }
  html.printing-pocket .pd-races { overflow: visible; }
  html.printing-pocket .pd-chip, html.printing-pocket .pd-photo, html.printing-pocket .pd-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Common Ground banner (phone only, shown by the mobile layer below). */
.cg-banner { display: none; }

/* ---------- site-v1 round 4 (owner, 2026-10-03) ---------- */
/* Pieces that exist only on mobile are hidden here; the mobile layer below turns them on. */
.m-only, .mtop, .cpanel, .cpin, .cpocket, .m-chev, .row-open, .row-none, .m-cue, .sheet, .sheet-scrim,
.m-zipline, .m-submit, .m-locate-note, .mhead, .mb, .bs, .bs-scrim, .eye-open-m, .m-eyebrow { display: none; }
.street-label, .pair-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reveal .eye-sm, .reveal .lab-m { display: none; }
.pin-sentinel { height: 1px; margin-bottom: -1px; }
/* The phone's pair pages (race.html): on the desktop the wrappers are not boxes, so the cells stay the issue grid's own items. */
.cells, .cpair-cells { display: contents; }

/* Ballot header: a white band holding the title and county (Figma 7:156: 0-294px, title row at 157px). */
.page-head--band { padding-bottom: 58px; }

/* Desktop: the candidates pinned above the issue rows once their columns have scrolled away (owner-approved
   compact row, 2026-10-03; colours from the mobile sticky panel, Figma 104:3421). A zero-height sticky holder,
   so nothing below moves when it shows; the row lines up with .race-scroll's columns and follows its scroll. */
.dpin { position: sticky; top: 0; height: 0; z-index: 25; }
.dpin-bar { position: absolute; top: 0; left: 0; right: 0; background: #f4f2ee; border-bottom: 1px solid #dcd8d0;
  opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.dpin.is-pinned .dpin-bar { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
.dpin-box { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); overflow: hidden; }
.dpin-inner { display: grid; column-gap: 98px; padding: 12px 0; will-change: transform; }
.dpin-cand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dpin-photo { flex: 0 0 44px; width: 44px; height: 56px; border-radius: 999px; overflow: hidden; background: var(--card); display: flex;
  align-items: center; justify-content: center; font-family: var(--serif); font-size: 14px; color: var(--muted); }
.dpin-photo img { width: 100%; height: 100%; object-fit: cover; }
.dpin-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dpin-party { width: auto; font-size: 13px; }
.dpin-name { font-family: var(--serif); font-size: 20px; letter-spacing: -.5px; color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* ---------- Mobile (Figma 390px frames: race 104:3073 / 125:4377 / 125:4136, sticky 104:3646, sheet 98:2805 /
   98:2876, home 129:5325, split ZIP 129:5122). Screens without a mobile frame (ballot, candidate, all races,
   My ballot, Pocket Ballot dialog, footer) are only kept from breaking at 390px until they're designed. ---------- */
@media (max-width: 767px) {
  /* THE PHONE SIZE UNIT (owner, 2026-10-12). The Figma phone frames are 390px wide, so every pixel size in the phone CSS below is its frame number x --u, where
     --u = the screen width / 390, held at its 440px value (a 440px phone, the iPhone Pro Max, gets 1.128 and a wider one keeps it, the layout flexing). On a 390px phone every
     size is exactly the frame's. --u is 1px (the plain pixel; it must be a length, so that calc(N * var(--u)) is one) except on the pages that have an approved frame (Home, Split ZIP, Ballot, Race) and, inside them, not on the
     sheets and dialogs with no frame yet (Pocket Ballot, the menu, the Unbiased View explainer, the position sheet, the confirm dialog), which stay as they were. The Candidate
     Details sheet and the Common Ground sheet scale with the page. site.js reads the same unit through uScale(). */
  :root { --sheet-top: 80px; --u: 1px; --k: 1; }     /* every full-height bottom drawer opens this far below the top (Figma: 80px of 844) */
  body { --gutter: calc(20 * var(--u)); --btn-stroke: calc(2.5 * var(--u)); --nav-h: calc(max(calc(15 * var(--u)), env(safe-area-inset-top, 0px)) + calc(75 * var(--u))); }     /* the phone nav (Figma 141:6298): 15px (or the status bar) + 35 + 25 + 15 */
  body[data-page=home], body[data-page=where], body[data-page=ballot], body[data-page=race], body[data-page=privacy], body[data-page=correction], body[data-page=cand] { --u: calc(min(100vw, 440px) / 390); --k: tan(atan2(min(100vw, 440px), 390px)); }
  .pocket-confirm { --u: 1px; --k: 1; }
  .bs--p, .bs--n, .bs--u, .sheet, .pt { --u: calc(min(100vw, 440px) / 390); --k: tan(atan2(min(100vw, 440px), 390px)); }      /* the menu, saved picks, Unbiased View and position sheets scale on every page (their own width is the screen's) */
  .d-only { display: none !important; }
  .m-only { display: revert; }

  /* The strips behind the iPhone's system areas, and the area you see when the page is pulled past its top or bottom: ONE rule on every page (owner, 2026-10-12).
     --top-c is the colour the nav carries on that page at rest: the nav has no fill, so it is what sits behind it: white on the pages with a white header band
     (Race, Candidate, Privacy, Request a correction), the page colour on the others. While the nav is stuck (html.nv-stuck) the strip is white as well.
     --bottom-c is the colour at the bottom of the page: the page colour (the footer has no fill), the panel's bottom purple on Home.
     Top: a fixed strip as tall as the safe-area inset (the Dynamic Island and status bar), over the page and under the pinned cards and every scrim, reaching
     120px above the window so a pull-down at the top shows it too. Bottom: a fixed strip behind the page reaching 120px below the window, so it sits under
     Safari's bottom bar whether the bar is out or collapsed and shows on a pull-up. The same two colours fill the html canvas as well, for a browser that paints the
     canvas rather than the strips: a 20000px tile that is the bottom colour except its last 400px, so the tile above the page ends in the top colour and everything
     below the page is the bottom colour (a page longer than 19600px would need a taller tile). Fixed, so nothing moves while the bar changes. */
  :root { --top-c: var(--bg); --bottom-c: var(--bg); }
  :root:has(body[data-page=home]) { --bottom-c: #600554; }
  :root:has(body[data-page=race]), :root:has(body[data-page=privacy]), :root:has(body[data-page=correction]) { --top-c: #fff; }
  html { background-color: var(--bottom-c); background-image: linear-gradient(var(--bottom-c) calc(100% - 400px), var(--top-c) calc(100% - 400px)); background-repeat: repeat-y; background-size: 100% 20000px; }
  html::before { content: ""; position: fixed; z-index: 19; top: -120px; left: 0; right: 0; height: calc(120px + env(safe-area-inset-top, 0px)); background: var(--top-c); pointer-events: none; }
  html.nv-stuck::before { background: #fff; }
  html::after { content: ""; position: fixed; z-index: -1; left: 0; right: 0; bottom: -120px; height: calc(120px + env(safe-area-inset-bottom, 0px)); background: var(--bottom-c); pointer-events: none; }

  /* Top bar: padded below the status bar / Dynamic Island (viewport-fit=cover). */
  .top { display: none; }
  .mtop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: none;
    padding: max(calc(20 * var(--u)), env(safe-area-inset-top)) calc(21.5 * var(--u)) 0; }
  .mtop-back { justify-self: start; line-height: 0; }
  .mtop-back img { transform: rotate(180deg); }                 /* Figma 129:5122: the arrow in its 2.5px circle, turned */
  .mtop-flag { justify-self: center; line-height: 0; }
  .mtop-menu { justify-self: end; padding-top: 0; line-height: 0; }
  /* Every page but Home (Figma 141:6298): 390 x 90 (15 above, the 35px row, the 25px "THINKINGVOTER.COM" row, 15 below), 21.5px each side so the row is 347px wide.
     Sticky to the top. At rest it has no fill; html.nv-stuck (site.js, once the page has scrolled) makes it white and fades the label out;
     the height never changes, so nothing jumps. z-index 30: over the pinned candidate panel (20) and the top strip (19), under every scrim and sheet (50 and up). */
  body:not([data-page=home]) .mtop { position: sticky; top: 0; z-index: 30; box-sizing: border-box; height: var(--nav-h); grid-template-rows: calc(35 * var(--u)) calc(25 * var(--u)); align-content: start;
    padding: max(calc(15 * var(--u)), env(safe-area-inset-top, 0px)) calc(21.5 * var(--u)) calc(15 * var(--u)); background: none; clip-path: inset(0 0 0 0); transition: background-color .2s ease, clip-path .2s ease; }
  /* No fill at rest: the head band (white on Race, Candidate, Privacy, Request a correction) is pulled up behind the bar, so the bar shows whatever the page has there. */
  body:not([data-page=home]) .head-band { margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); }
  body:not([data-page=home]) .mtop-title { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; height: calc(25 * var(--u)); line-height: calc(8 * var(--u)); transition: opacity .2s ease; }
  /* Stuck: white and 15px shorter, cut from the bottom edge only (the arrow, flag and menu keep their places). clip-path, not height, so the page under the bar does not shift
     and the cut part takes no touches; the pinned candidate panel and --pin-h move up the same 15px. */
  html.nv-stuck body:not([data-page=home]) .mtop { background: #fff; clip-path: inset(0 0 calc(15 * var(--u)) 0); }
  html.nv-stuck body:not([data-page=home]) .mtop-title { opacity: 0; }
  /* Race page, panel pinned (owner, 2026-10-15; Figma 104:3646 / 472:21394): no nav above the panel. The nav is sticky only while the panel is not pinned; it keeps its place in the flow
     (it is at the top of the page), so nothing shifts, and it scrolls away. */
  html.cpin-on body[data-page=race] .mtop { position: relative; }
  /* "THINKINGVOTER.COM" and the slash line over "Position on major issues" (.m-eyebrow, left aligned; Figma 388:4296, 388:6439):
     11px medium caps, .55px spacing, then 12px slashes at 2.4px spacing, 10px apart. (The nav no longer carries a slash line: owner, 2026-10-12.) */
  .m-eyebrow { display: block; }
  .m-kicker { margin: 0; font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: calc(11 * var(--u)); line-height: calc(8 * var(--u)); letter-spacing: calc(.55 * var(--u));
    text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--muted); }
  .m-eyebrow .m-kicker { text-align: left; }
  .m-hatch { display: flex; justify-content: center; margin: calc(8.5 * var(--u)) 0 calc(-1.5 * var(--u)); height: calc(12 * var(--u)); overflow: hidden; font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u));
    letter-spacing: calc(2.4 * var(--u)); white-space: nowrap; color: var(--muted); }
  .m-eyebrow .m-hatch { justify-content: flex-start; }
  .m-hatch::before { content: "/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////"; flex: none; }
  .popup { width: min(calc(347 * var(--u)), calc(100vw - calc(40 * var(--u)))); }

  .display { font-size: calc(32 * var(--u)); letter-spacing: calc(-.6 * var(--u)); line-height: 1.15; }
  .lede { font-size: calc(16 * var(--u)); }

  /* Home (129:5325) */
  .hero { padding: calc(79 * var(--u)) calc(24 * var(--u)) calc(80 * var(--u)); }
  .hero { padding-top: calc(94 * var(--u)); }
  .hero .display { font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); line-height: calc(43 * var(--u)); max-width: calc(341 * var(--u)); margin-top: calc(19 * var(--u)); }
  .hero .lede { display: block; margin-top: calc(26 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); color: var(--ink); }
  .hero .lede .l2 { display: block; margin-top: 0; font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 500; }
  .hero .lede strong { font-weight: inherit; color: inherit; }
  .hero .lede.return-note { margin-top: calc(22 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); color: var(--muted); }
  .hero .pill-form { width: calc(296 * var(--u)); height: calc(71 * var(--u)); margin-top: calc(26 * var(--u)); padding: 0 calc(5 * var(--u)) 0 calc(16 * var(--u)); background: var(--card);
    border: 1.5px solid var(--ink); border-radius: calc(15 * var(--u)); }
  .hero .pill-form input { font-size: max(16px, calc(16 * var(--u))); line-height: calc(18 * var(--u)); }   /* 16px: iPhones zoom the page on focus below it (owner, over Figma's 14px) */
  .hero .go { flex: 0 0 calc(50 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(10 * var(--u)); }
  .hero .go img { display: block; }
  .hero .fine { margin-top: calc(13 * var(--u)); }

  /* Split ZIP (129:5122) */
  .where { align-items: stretch; padding: calc(55 * var(--u)) calc(24 * var(--u)) max(calc(24 * var(--u)), env(safe-area-inset-bottom)); max-width: calc(390 * var(--u)); margin: 0 auto;
    min-height: calc(100dvh - calc(106 * var(--u))); }
  .where > .place { display: none !important; }
  .m-zipline:not([hidden]) { display: block; text-align: center; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 400; }
  /* 320px wide (never wider than the column + 8px): "covers two districts." (311px) fits, "Your ZIP code covers" (~337px) does not,
     so the title breaks after "code" at every phone width, with no markup in the text. */
  .where .display { align-self: center; width: calc(320 * var(--u)); max-width: calc(100% + calc(8 * var(--u))); margin: calc(20 * var(--u)) 0 0; font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); line-height: calc(43 * var(--u)); }
  .where .lede { margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); color: var(--ink); }
  .pill-form--wide { width: 100%; height: auto; flex-direction: column; align-items: stretch; gap: calc(20 * var(--u)); padding: 0; margin-top: calc(28 * var(--u));
    background: none; border: 0; border-radius: 0; }
  .street-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u));
    margin-bottom: calc(-11 * var(--u)); }
  .pill-form--wide input { flex: none; height: calc(60 * var(--u)); padding: 0 calc(16 * var(--u)); background: var(--card); border: 1.5px solid var(--ink);
    border-radius: calc(15 * var(--u)); font-size: max(16px, calc(16 * var(--u))); line-height: calc(18 * var(--u)); }
  .pill-form--wide .go { display: none; }
  .m-submit { display: flex; align-items: center; justify-content: center; height: calc(60 * var(--u)); padding: 0 calc(25 * var(--u)); border: 0; border-radius: calc(100 * var(--u));
    background: var(--link); color: #fff; font: inherit; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500; cursor: pointer; }
  .or { margin: calc(28 * var(--u)) 0 calc(12 * var(--u)); gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); text-transform: lowercase; }
  .or img { display: none; }
  .or::before, .or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--tan); }
  #locate { width: 100%; min-width: 0; height: calc(60 * var(--u)); gap: calc(10 * var(--u)); padding: 0 calc(25 * var(--u)); border-width: var(--btn-stroke); border-radius: calc(100 * var(--u)); background: none;
    font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
  #locate img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .m-locate-note { display: block; margin-top: calc(16 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--muted); text-align: center; }
  #pick-options { min-width: 0; width: 100%; }
  .pick-opt, .pick-row { font-size: calc(15 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
  .form-error { font-size: calc(14 * var(--u)); }

  /* Ballot page (Figma 141:5545): white header, then Federal / State groups on the gray page. */
  .page-head, .ballot { display: none; }
  .confirm-line { display: none; }                  /* not in the design; kept on desktop */
  /* Mobile batch 3 (owner, 2026-10-09). Figma 141:5545: the heights below are Figma's cap-trimmed text boxes, so the line-heights are set to the
     cap height (the glyphs overflow the box a little, which is how the design measures them). */
  .mhead { display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u)); padding: calc(25 * var(--u)) calc(20 * var(--u)); text-align: center; }      /* no fill (owner, 2026-10-12): the title sits on the page colour */
  body[data-page=ballot] .head-band--white { background: none; }
  .mhead .m-hatch { width: 100%; justify-content: flex-start; margin: calc(-1.5 * var(--u)) 0; }                  /* the 9px slash line, 20px under the place line, across the 350px lane */
  .mhead-title { margin: calc(-6.5 * var(--u)) 0; font-family: var(--serif); font-weight: 500; font-size: calc(35 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); color: var(--ink); }     /* 35px (owner, 2026-10-12): a 40px line box so a wrapped title (360 and 375 wide) does not overlap, the -6.5px margins keep the 27px cap box the block was measured on */
  .mhead-line { display: flex; justify-content: center; gap: calc(3.9 * var(--u)); width: 100%; font-size: calc(14 * var(--u)); line-height: calc(10 * var(--u)); }
  .mhead-place { min-width: 0; color: var(--ink); }
  body[data-page=ballot] .mtop-flag { grid-column: 2; grid-row: 1; }          /* no back arrow on the Ballot (owner, 2026-10-14): the flag stays centred, the menu at the right */
  body[data-page=ballot] .mtop-menu { grid-column: 3; grid-row: 1; }
  .mhead-update { color: #600554; text-decoration: underline; text-decoration-skip-ink: auto; text-underline-position: from-font; }     /* "change" (owner, 2026-10-14; Figma 141:5545): 14px Roman, american purple, underlined, after the place line; goes to the ZIP entry on Home */
  .mb { display: block; margin-top: calc(-3 * var(--u)); }      /* Figma: the Federal frame starts 3px up into the header frame */
  .mb-section { display: flex; flex-direction: column; align-items: flex-start; gap: calc(22 * var(--u)); padding: calc(25 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); }
  .mb-section + .mb-section { margin-top: calc(-26.7 * var(--u)); }  /* Figma places the State group 26.7px up into the Federal frame: 18.3px between the last divider and the pill */
  .mb-pill { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: calc(35 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u));
    background: #600554; color: #eadee8; font-size: calc(15 * var(--u)); font-weight: 500; line-height: calc(11 * var(--u)); white-space: nowrap; }      /* American purple, light purple (Figma 141:7024), then +5px each way and text +3px (owner, 2026-10-12): site.js sets the width to the old 12px badge's + 5px */
  .mb-races { display: flex; flex-direction: column; gap: calc(30 * var(--u)); width: 100%; }
  .mb-race { position: relative; display: flex; flex-direction: column; gap: calc(20 * var(--u)); width: 100%; min-height: calc(44 * var(--u)); padding-bottom: calc(15 * var(--u)); border-bottom: 1px solid var(--tan); }
  .mb-section--state .mb-race { padding-bottom: calc(10 * var(--u)); }                 /* Figma: 15px under the Federal rows, 10px under the State rows */
  .mb-section:last-child .mb-race:last-child { border-bottom: 0; }      /* no divider under the last race on the page */
  .mb-title { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); }
  /* Race names (Figma 141:5545): Helvetica Neue LT Std Medium 22px, no tracking, one size for every name. 22px where "Governor & Lieutenant Governor" (the longest) fits the lane on one line
     (it does at 390); on a narrower phone the size is scaled down just enough for it to. --mb-nm is that size: this estimate until fitNames() in site.js measures it with the real font.
     The 24px leading (1.0909 x) sits in a cap-height box (text-box-trim); a browser without it gets margins that cut the same box. */
  .mb { --mb-nm: min(calc(22 * var(--u)), calc((100vw - calc(40 * var(--u))) * .0689)); }
  .mb-link { display: block; margin: calc(var(--mb-nm) * -.2) 0 calc(var(--mb-nm) * -.177); font-size: var(--mb-nm); line-height: calc(var(--mb-nm) * 1.0909); color: var(--ink); text-decoration: none; }
  @supports (text-box: trim-both cap alphabetic) { .mb-link { margin: 0; text-box: trim-both cap alphabetic; } }
  .mb-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }       /* the whole race block (title, photos, arrow) is the link */
  .mb-link:focus-visible { outline: none; }
  .mb-link:focus-visible::after { outline: 2px solid var(--link); outline-offset: 4px; border-radius: calc(8 * var(--u)); }
  .mb-name { font-family: var(--sans); font-weight: 500; font-size: var(--mb-nm); letter-spacing: 0; color: var(--ink); }
  .mb-sub { margin: 0; font-size: calc(14 * var(--u)); line-height: calc(10 * var(--u)); color: var(--muted); }
  .mb-special { position: relative; z-index: 2; display: flex; margin-top: calc(-5 * var(--u)); }             /* 15px under the title when there is an icon line, 20px under it for "Florida House" */
  .mb-special-btn { display: inline-flex; align-items: center; gap: calc(5.378 * var(--u)); padding: 0; background: none; border: 0; font: inherit;
    font-size: calc(14 * var(--u)); line-height: calc(13 * var(--u)); color: var(--muted); cursor: pointer; }
  .mb-row { display: flex; align-items: center; gap: calc(20 * var(--u)); }
  .mb-photos { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); }
  .mb-thumbs { display: flex; align-items: center; gap: calc(5 * var(--u)); }
  .mb-ph { flex: 0 0 var(--mb-tile, calc(48.405 * var(--u))); width: var(--mb-tile, calc(48.405 * var(--u))); height: calc(var(--mb-tile, calc(48.405 * var(--u))) * 1.27776); border-radius: calc(20 * var(--u)); background: var(--tan); overflow: hidden; display: block; }
  .mb-ph img { width: 100%; height: 100%; object-fit: cover; }
  .mb-count { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--muted); white-space: nowrap; }
  .mb-go { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }                     /* the 24px circle arrow (Figma 152:7114), mb-go-24.svg */

  /* Race and candidate headers (Figma 125:4564 / 141:6583): the level is plain blue text, title, county line, toggle.
     The white area ends below the toggle. */
  .race-head { padding: calc(25 * var(--u)) calc(20 * var(--u)) 0; }
  .race-head--race { padding-top: calc(20 * var(--u)); }
  .back-link, .race-head .place { display: none !important; }
  .race-head-row { display: block; margin-top: 0; }
  .race-title-row { flex-direction: column; align-items: center; gap: calc(15 * var(--u)); text-align: center; }
  .race-title-row .pill { order: -1; height: calc(30 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: calc(100 * var(--u)); font-size: calc(12 * var(--u)); }
  .race-title-row .pill--tag { padding: calc(5 * var(--u)) calc(12 * var(--u)); background: none; color: var(--link); font-size: calc(16 * var(--u)); font-weight: 700; line-height: normal; }
  .race-title-row .display { font-size: calc(35 * var(--u)); letter-spacing: calc(-2 * var(--u)); line-height: 1.15; text-align: center; }
  .race-title-row:has(.race-county) { gap: calc(5 * var(--u)); }
  .race-county { font-size: calc(12 * var(--u)); line-height: normal; color: var(--ink); text-align: center; }
  .race-county + .pill + .pop-wrap, .race-title-row:has(.race-county) .pop-wrap { margin-top: calc(10 * var(--u)); }
  .race-kicker { font-size: calc(25 * var(--u)); letter-spacing: calc(-1 * var(--u)); }
  .race-note-line { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--u)); text-align: center; }
  /* Race header (Figma 378:16548 ON / 104:3073 OFF), centred on the white band: 15px under the nav's own bottom padding, the level label ("Federal race", 14px Medium, American
     purple; on a district race the district line follows it, 12px) and 15px under it the title (35px serif Medium, -1.75px), both centred. "Special Election" is hidden here only
     (display: none, the markup stays; tablet and desktop show it). The pill is the tablet and desktop tag; the phone's own label is .m-level. */
  .race-head--race { padding: calc(15 * var(--u)) calc(20 * var(--u)) 0; }
  .race-head--race .race-title-row { align-items: center; gap: calc(15 * var(--u)); text-align: center; }
  .race-head--race .race-title-row .pill--tag, .race-head--race .race-title-row .pop-wrap--special { display: none; }
  .m-tagrow { order: -1; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); }
  .m-level { font-size: calc(14 * var(--u)); font-weight: 500; line-height: normal; color: #600554; text-box: trim-both cap alphabetic; }
  .m-dist { font-size: calc(12 * var(--u)); line-height: normal; color: var(--ink); text-align: right; white-space: nowrap; text-box: trim-both cap alphabetic; }
  .race-head--race .race-title-row .display { margin: 0; font-weight: 500; font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); line-height: normal; text-align: center;
    text-box: trim-both cap alphabetic; }
  .race-head--race .race-note-line { text-align: center; }
  /* The Unbiased view bar (Figma 388:4274): full width, light tan, "Unbiased View ON" and the 51 x 31 switch, 15px apart, 10px above and
     below; it scrolls away with the page. The whole bar is the button (the same [data-uv] switch as tablet and desktop). */
  .m-uv { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); width: 100%; padding: calc(10 * var(--u)) calc(20 * var(--u)); border: 0; background: var(--light-tan);
    font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* The switch (Figma 327:4111, used at 378:16563, 454:16343, 472:21573): "Unbiased View", the 57.58 x 35 black track with its white thumb,
     then ON / OFF in bold. The same three pieces on the race page bar, the details sheet and the Common Ground sheet. */
  .m-uv-name, .m-uv-label { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); text-box: trim-both cap alphabetic; }
  .m-uv-label { font-weight: 700; }
  .m-uv-sw { position: relative; flex: none; width: calc(57.581 * var(--u)); height: calc(35 * var(--u)); border-radius: calc(112.903 * var(--u)); background: var(--ink); transition: background .15s ease; }
  .m-uv[aria-checked=false] .m-uv-sw { background: var(--tan); }
  .m-uv-thumb { position: absolute; top: calc(2.26 * var(--u)); left: calc(24.84 * var(--u)); width: calc(30.484 * var(--u)); height: calc(30.484 * var(--u)); border-radius: calc(112.903 * var(--u)); background: #fff;
    box-shadow: 0 1.129px 1.129px rgba(0, 0, 0, .08), 0 3.387px 6.774px rgba(0, 0, 0, .12); transition: left .15s ease; }
  .m-uv[aria-checked=false] .m-uv-thumb { left: calc(2.26 * var(--u)); }
  .m-uv:focus-visible { outline: 2px solid var(--link); outline-offset: -4px; }
  /* The race page's control (Figma 522:27285): a centred light-purple pill, 20px under the title, "Unbiased View" 14px in American purple, the toggle (American purple track while on,
     #d3b4d0 while off, a .5px light border, the white thumb 1.76px in), ON / OFF bold in American purple; then the hashed line (12px, 2.4px spacing, American purple at 50%) 20px below. */
  .m-uv--race { width: max-content; max-width: calc(100% - calc(40 * var(--u))); margin: calc(20 * var(--u)) auto 0; padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: calc(25 * var(--u)); background: #eadee8; }
  .m-uv--race .m-uv-name { color: #600554; }
  .m-uv--race .m-uv-label, .m-uv--p .m-uv-label { color: #600554; }
  .m-uv--race .m-uv-sw, .m-uv--p .m-uv-sw { box-sizing: border-box; border: .5px solid rgba(217, 206, 216, .5); background: #600554; }
  .m-uv--race[aria-checked=false] .m-uv-sw, .m-uv--p[aria-checked=false] .m-uv-sw { background: #d3b4d0; }
  .m-uv--race .m-uv-thumb, .m-uv--p .m-uv-thumb { top: calc(1.76 * var(--u)); left: calc(24.34 * var(--u)); }
  .m-uv--race[aria-checked=false] .m-uv-thumb, .m-uv--p[aria-checked=false] .m-uv-thumb { left: calc(1.76 * var(--u)); }
  .m-hatch--uv { margin: calc(18.5 * var(--u)) 0 calc(-1.5 * var(--u)); color: #600554; opacity: .5; }
  body[data-page=race] .reveal-bar { display: none; }               /* the dashed chip is replaced by the bar above (its button stays in the page: it carries the party file's address) */
  .reveal-bar { justify-content: center; max-width: none; margin: 0; padding: calc(15 * var(--u)) calc(20 * var(--u)); background: var(--card); }
  body[data-page=race] .reveal-bar { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(15 * var(--u)); }
  .reveal-bar .pop-wrap { display: none; }                      /* not in the mobile design */
  .reveal { height: calc(40 * var(--u)); gap: calc(6 * var(--u)); padding: 0 calc(16 * var(--u)); border-width: 1.5px; border-radius: calc(20 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; }
  .reveal .eye-closed, .reveal .lab-d { display: none; }
  .reveal .eye-sm, .reveal .lab-m { display: block; }
  .reveal[aria-pressed=true] .eye-sm { display: none; }
  /* Race page toggle: dashed while parties are hidden (opens the Unbiased look sheet); the revealed state is the
     Figma one (125:4571): solid 1.5px border, white, open eye. */
  body[data-page=race] .reveal { border: 2px dashed var(--ink); }
  body[data-page=race] .reveal[aria-pressed=true] { border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); }
  body[data-page=race] .reveal[aria-pressed=true] .eye-open { display: none; }
  body[data-page=race] .reveal[aria-pressed=true] .eye-open-m { display: block; }
  .page-pad { padding-left: calc(20 * var(--u)); padding-right: calc(20 * var(--u)); }

  /* Candidate cards in pairs (Figma 378:16548 Unbiased View ON, 104:3073 OFF; one white card since 2026-10-12; swiped a pair at a time since 2026-10-08):
     one white panel with 35px bottom corners holds both candidates, 155px columns 10px apart, 20px above and below: (OFF only: the party word in spaced capitals, 20px high),
     the arched photo (174px tall, 50px corners), the two name lines, 15px, the Save pick / My pick button. Under them the segmented bar (one segment per pair, the pair on screen
     purple) and "N candidates". Each pair is a page (.ppage); the current one is in the flow, the others sit beside it, offset by the page script (the same offsets move the issue
     rows' pages). The pinned panel is .cpin below. */
  :root { --safe-top: max(calc(20 * var(--u)), env(safe-area-inset-top)); }
  .race-wrap { position: relative; }
  .cpanel { display: block; position: relative; overflow: hidden; touch-action: pan-y; margin-bottom: 0; padding-bottom: calc(20 * var(--u)); border-radius: 0 0 calc(35 * var(--u)) calc(35 * var(--u)); background: #fff; }
  html.sheet-open .cpanel, html.sheet-open .cpin { visibility: hidden; }
  .cpairs { position: relative; }
  .ppage { position: absolute; top: 0; left: 100%; width: 100%; box-sizing: border-box; }
  .ppage.is-cur { position: relative; left: 0; }
  .is-settling .ppage { transition: left .26s ease; }
  .is-swiping { user-select: none; -webkit-user-select: none; }
  .cpair { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: calc(10 * var(--u)); padding: 0 max(calc(15 * var(--u)), env(safe-area-inset-right)) 0 max(calc(15 * var(--u)), env(safe-area-inset-left)); }
  .cslot { flex: 0 1 calc(155 * var(--u)); min-width: 0; display: flex; padding: calc(20 * var(--u)) 0; }
  .ccard { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(15 * var(--u)); padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cpage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); text-align: center; }
  .cpage[role=button]:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: calc(12 * var(--u)); }
  .cp-photo-wrap { display: block; width: 100%; }
  .cp-photo { position: relative; display: block; width: 100%; height: calc(174 * var(--u)); overflow: hidden; border-radius: calc(50 * var(--u)); background: var(--tan);
    font-family: var(--serif); font-size: calc(22 * var(--u)); color: var(--muted); }
  .cp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cp-photo.m-ph--none { display: flex; align-items: center; justify-content: center; }
  .cp-pbox { display: none; }
  body.party-on .cp-pbox { display: flex; align-items: center; justify-content: center; width: calc(113 * var(--u)); max-width: 100%; height: calc(20 * var(--u)); margin-bottom: calc(-5 * var(--u)); }      /* 5px above the photo (10px gap less 5) */
  .cp-pv { display: block; margin: 0; }
  .cp-pv .cp-party { width: auto; font-family: "IBM Plex Sans Devanagari", var(--sans); font-size: calc(10 * var(--u)); font-weight: 500; line-height: normal; letter-spacing: calc(.5 * var(--u));
    text-transform: uppercase; white-space: nowrap; color: #600554; text-box: trim-both cap alphabetic; }
  .cp-name { display: flex; flex-direction: column; align-items: center; gap: calc(7.143 * var(--u)); padding: 0; font-size: calc(18 * var(--u)); line-height: normal; letter-spacing: calc(-.54 * var(--u)); color: var(--ink);
    overflow-wrap: anywhere; }
  .cp-name .nm-f { font-weight: 300; text-box: trim-both cap alphabetic; }
  .cp-name .nm-l { font-weight: 500; line-height: calc(25 * var(--u)); text-box: trim-both cap alphabetic; }
  .cp-badge { margin-top: 0; font-size: calc(12 * var(--u)); font-weight: 500; color: var(--muted); }
  .cpager { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); margin-top: 0; padding-top: calc(10 * var(--u)); }     /* 10px under the columns' own 20px */
  .cbar { display: flex; gap: calc(6 * var(--u)); }
  .cseg { flex: none; width: calc(25 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(100 * var(--u)); background: #eadee8; }
  .cseg.is-on { background: #600554; }
  .ccount { font-size: calc(10 * var(--u)); font-weight: 500; line-height: calc(16 * var(--u)); color: #42303e; text-box: trim-both cap alphabetic; }
  /* Two candidates (Figma 378:16548): no bar; the note sits 20px under the Save pick buttons (the columns' own 20px), in American purple, with 10px (not 20) of white under it and 50px (not 30)
     from the white panel to the next block. */
  .cpager.cpager--note { padding: 0; margin-bottom: calc(-10 * var(--u)); }
  .cpanel:has(.cpager--note) { margin-bottom: calc(20 * var(--u)); }
  .cnote { margin: 0; font-size: calc(10 * var(--u)); font-weight: 500; line-height: calc(16 * var(--u)); color: #600554; text-align: center; text-box: trim-both cap alphabetic; }

  /* The pinned candidate panel (Figma 104:3646 / 472:21394): white with a soft drop shadow (0 4px 9px, 25%), 30px bottom corners, fixed at the very top (20px of padding, plus the status bar's safe area, whose strip is
     white on the race page): while it is pinned the page script sets html.cpin-on and the race page's nav stops being sticky, so it scrolls away (every other page keeps its sticky nav). The pair on screen as
     100px circles with the party line (only while Unbiased View is off), the name lines, the swipe hand and "N/M" between the photos, and the page's own
     Unbiased View switch under a tan rule. It slides in once the cards have scrolled out of view. */
  .cpin { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); overflow: hidden;
    padding: calc(20 * var(--u) + env(safe-area-inset-top, 0px)) 0 0; border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); background: #fff; box-shadow: 0 4px 8.95px rgba(0, 0, 0, .25); touch-action: pan-y;
    visibility: hidden; transform: translateY(-105%); transition: transform .2s ease, visibility 0s linear .2s; }
  .cpin.is-pinned { visibility: visible; transform: none; transition: transform .2s ease; }
  .cpin-top { position: relative; width: min(calc(359 * var(--u)), calc(100% - calc(31 * var(--u)))); }
  .cpin-pages { position: relative; z-index: 1; overflow: hidden; }       /* above the swipe hand and counter (.cpin-mid, z-index 0), so they never cover a face */
  .cpin-pair { display: flex; gap: calc(25 * var(--u)); justify-content: center; }
  .cpin-slot { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); padding: calc(5 * var(--u)); }
  .cpin-pair--1 .cpin-slot { flex: 0 1 calc((100% - calc(25 * var(--u))) / 2); }
  .cpin-photo { position: relative; display: block; flex: none; width: calc(100 * var(--u)); height: calc(100 * var(--u)); overflow: hidden; border-radius: calc(100 * var(--u)); background: var(--tan);
    font-family: var(--serif); font-size: calc(22 * var(--u)); color: var(--muted); }
  .cpin-photo img { width: 100%; height: 100%; object-fit: cover; }
  .cpin-photo.m-ph--none { display: flex; align-items: center; justify-content: center; }
  .cpin-party { width: auto; margin: 0; font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: calc(10 * var(--u)); line-height: normal; letter-spacing: calc(.5 * var(--u));
    text-transform: uppercase; white-space: nowrap; color: #600554; text-box: trim-both cap alphabetic; }
  .cpin-name { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6.371 * var(--u)); width: 100%; margin: 0; font-size: calc(14.27 * var(--u)); text-align: center;
    color: var(--ink); overflow-wrap: anywhere; }
  .cpin-name .nm-f { font-weight: 400; line-height: calc(19.622 * var(--u)); text-box: trim-both cap alphabetic; }
  .cpin-name .nm-l { font-weight: 500; line-height: calc(17.838 * var(--u)); text-box: trim-both cap alphabetic; }
  .cpin-mid { position: absolute; z-index: 0; top: calc(46 * var(--u)); left: 50%; display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--u)); transform: translateX(-50%); pointer-events: none; }
  .cpin-hand { display: block; width: calc(31 * var(--u)); height: calc(29 * var(--u)); }
  .cpin-count { margin: 0; font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: calc(11 * var(--u)); line-height: normal; letter-spacing: calc(.55 * var(--u));
    text-transform: uppercase; white-space: nowrap; color: rgba(66, 48, 62, .5); text-box: trim-both cap alphabetic; }
  .m-uv--p { width: 100%; padding: calc(10 * var(--u)) calc(20 * var(--u)); border-top: 1px solid #eadee8; border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); background: none; }
  .m-uv--p .m-uv-name { color: var(--ink); }

  /* Save pick / My pick (Figma 378:16548 / 104:3073, Icon/Add 520:26831 and 320:4151): 120 x 40, 20px corners. Save pick: a 2px American purple outline, the 13px plus and "Save pick"
     (13px Medium), 6px apart. My pick (once picked): light purple fill, no outline, the 14px check and "My pick". Everywhere the button is on a phone: the race cards and the
     Candidate Details sheet. */
  .m-pick-wrap { flex: none; display: flex; justify-content: center; }
  .m-pick { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); width: calc(120 * var(--u)); height: calc(40 * var(--u)); min-height: 0; padding: 0 calc(5 * var(--u));
    border: 2px solid #600554; border-radius: calc(20 * var(--u)); background: none; font-family: var(--sans); font-size: calc(13 * var(--u)); font-weight: 500; line-height: normal; color: #600554; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-save, .m-pick-on { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); }
  .m-pick-on { display: none; }
  .m-pick img { flex: none; display: block; }
  .m-pick > span > span { text-box: trim-both cap alphabetic; }
  .m-pick[aria-pressed=true] { padding: 0 calc(15 * var(--u)); border: 0; background: #eadee8; }
  .m-pick[aria-pressed=true] .m-save { display: none; }
  .m-pick[aria-pressed=true] .m-pick-on { display: inline-flex; }
  /* The candidate card (owner, 2026-10-12): every size in the white card is its Figma number x --u (the phone size unit, set at the top of this block): the 155px
     columns, 10px gap, 174px photos, 50px corners, 18px names, 120 x 40 buttons, the segmented bar and its count. On a 390px phone they are exactly the frame's; a wider phone (430, 440) grows
     them with the screen instead of leaving them at 390's size with wider gaps at the sides, a narrower one (360) shrinks them. The sheet's Save pick button, outside the card, keeps its size. */
  .cpanel { padding-bottom: calc(20 * var(--u)); border-radius: 0 0 calc(35 * var(--u)) calc(35 * var(--u)); }
  .cpair { gap: calc(10 * var(--u)); }
  .cslot { flex: 0 0 calc(155 * var(--u)); padding: calc(20 * var(--u)) 0; }
  .ccard { gap: calc(15 * var(--u)); }
  .cpage { gap: calc(10 * var(--u)); }
  .cp-photo { height: calc(174 * var(--u)); border-radius: calc(50 * var(--u)); font-size: calc(22 * var(--u)); }
  body.party-on .cp-pbox { width: calc(113 * var(--u)); height: calc(20 * var(--u)); margin-bottom: calc(-5 * var(--u)); }
  .cp-pv .cp-party { font-size: calc(10 * var(--u)); letter-spacing: calc(.5 * var(--u)); }
  .cp-name { gap: calc(7.143 * var(--u)); font-size: calc(18 * var(--u)); letter-spacing: calc(-.54 * var(--u)); }
  .cp-name .nm-l { line-height: calc(25 * var(--u)); }
  .cp-badge { font-size: calc(12 * var(--u)); }
  .cpanel .m-pick { width: calc(120 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(5 * var(--u)); border-width: calc(2 * var(--u)); border-radius: calc(20 * var(--u));
    gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }
  .cpanel .m-save, .cpanel .m-pick-on { gap: calc(6 * var(--u)); }
  .cpanel .m-save img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .cpanel .m-pick-on img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .cpanel .m-pick[aria-pressed=true] { padding: 0 calc(15 * var(--u)); border-width: 0; }
  .cpager { gap: calc(10 * var(--u)); padding-top: calc(10 * var(--u)); }
  .cbar { gap: calc(6 * var(--u)); }
  .cseg { width: calc(25 * var(--u)); height: calc(5 * var(--u)); }
  .ccount { font-size: calc(10 * var(--u)); line-height: calc(16 * var(--u)); }
  .m-pick-wrap .pick-note { left: 50%; transform: translateX(-50%); white-space: normal; width: max-content; max-width: calc(160 * var(--u)); }

  /* Issue rows (Figma 388:4300...): the issue title (18px Medium) with the chevron at the right, then the pair's first-sentence excerpts
     side by side, 25px either side of a 1px tan divider, 14px / 18px dark brown, the blue 12px "+N more" under an excerpt; rows 25px
     / 20px padded, the page colour and white alternating; a row where neither has a public position collapses to one line and isn't
     tappable; any other row opens the issue sheet. With more than two candidates the rows show the pair on screen (the cells swipe
     with the cards), so a row always has two columns, or one for a lone last candidate. */
  .dpin { display: none; }
  .race-scroll { overflow: visible; max-width: none; margin-top: 0; padding: 0; }
  .race-grid { display: block; width: auto; padding-bottom: 0; }
  .race-grid::before, .race-grid > .cand, .issues-label { display: none; }
  .issues-label:first-of-type { display: block; margin: 0; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); border-bottom: 1px solid var(--tan); font-size: calc(25 * var(--u)); font-weight: 500;
    line-height: normal; letter-spacing: calc(-1.25 * var(--u)); text-align: left; white-space: nowrap; text-box: trim-both cap alphabetic; }
  .race-grid > .m-eyebrow { padding: calc(30 * var(--u)) calc(20 * var(--u)) 0; }
  .race-grid > .m-eyebrow + .issues-label:first-of-type { padding-top: calc(25 * var(--u)); }    /* the eyebrow block is 27px, 25px to the heading (Figma 554:27851) */
  /* Race page (Figma 554:27851): label, hashed line and heading centred; the label in American purple, the line American purple at 50%, a #d3b4d0 rule under the block. */
  .race-grid > .m-eyebrow .m-kicker { text-align: center; color: #600554; }
  .race-grid > .m-eyebrow .m-hatch { justify-content: center; color: #600554; opacity: .5; }
  body[data-page=race] .issues-label:first-of-type { text-align: center; border-bottom-color: #d3b4d0; }
  .issue-row { --row-pt: calc(25 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(50 * var(--u)); row-gap: calc(15 * var(--u)); position: relative;
    margin: 0; padding: var(--row-pt) calc(20 * var(--u)); border-radius: 0; scroll-margin-top: var(--pin-h, calc(235 * var(--u))); touch-action: pan-y; }
  .issue-row:nth-of-type(odd) { background: none; }
  .issue-row:nth-of-type(even) { background: var(--card); }
  .issue-title { grid-column: 1 / -1; grid-row: 1; max-width: none; padding-right: calc(28 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(18 * var(--u)); }
  .m-chev { display: block; position: absolute; top: var(--row-pt); right: calc(20 * var(--u)); }
  .row-open { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .row-open:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
  .cell { display: none; grid-row: 2; align-self: stretch; justify-content: center; gap: calc(12 * var(--u)); max-width: none; min-width: 0; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--muted); }
  /* A row's cells are pages like the cards': one per pair, edge to edge, each laid out as the two-column row was. The divider runs a
     little past the text, as drawn (the frames' lines are 22 to 29px taller than the text beside them). */
  .cells { display: block; position: relative; grid-column: 1 / -1; grid-row: 2; margin: 0 calc(-20 * var(--u)); overflow: hidden; }
  .cpair-cells { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(50 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); }
  .cpair-cells > .cell { grid-row: 1; }
  .cpair-cells--1 .cell.is-l { grid-column: 1 / -1; }
  .cell.is-l { display: flex; grid-column: 1; }
  .cell.is-r { display: flex; grid-column: 2; }
  .cpair-cells:not(.cpair-cells--1)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--tan); }
  .cols-1 .cell.is-l { grid-column: 1 / -1; }
  .cell .cell-meta, .cell .read-full { display: none; }
  .cell .quote, .cell .rec-text { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--muted); text-box: trim-both cap alphabetic; }
  .cell--quoted .quote--qo::before { content: "“"; }      /* only where the stored quote lacks its own mark */
  .cell--quoted .quote--qc::after { content: "”"; }
  .m-cue { display: block; font-size: calc(13 * var(--u)); color: var(--link); text-decoration: underline; }
  .cell .m-more { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); text-decoration: none; text-box: trim-both cap alphabetic; }
  .issue-row.is-collapsed { row-gap: calc(15 * var(--u)); }
  .issue-row.is-collapsed .cells, .issue-row.is-collapsed .m-chev, .issue-row.is-collapsed .row-open { display: none; }
  .issue-row.is-collapsed .row-none { display: block; grid-column: 1 / -1; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--muted); text-box: trim-both cap alphabetic; }
  .race-notes { margin-bottom: calc(40 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)) 0; }

  /* Issue sheet (98:2805, 98:2876) */
  .sheet-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(20, 20, 20, .45); opacity: 0;
    transition: opacity .25s ease; }
  .sheet-scrim.is-open { opacity: 1; }
  .sheet:not([hidden]) { display: flex; }
  .sheet { flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; height: calc(100vh - var(--sheet-top)); height: calc(100dvh - var(--sheet-top)); padding-top: calc(8 * var(--u));
    overflow: hidden; border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0; background: var(--bg); box-shadow: 0 -8px 32px rgba(0, 0, 0, .2); outline: none;
    transform: translateY(100%); transition: transform .25s ease; }
  .sheet.is-open { transform: none; }
  .sheet.is-dragging { transition: none; }
  .sheet-head { flex: none; touch-action: none; }
  .sheet-grab { display: flex; justify-content: center; padding-bottom: calc(25 * var(--u)); }
  .sheet-grab span { width: calc(36 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--tan); }
  /* Issue nav (Figma 388:7014): plain arrows either side of "Issue N of 27  -  Swipe to see next", the hatch line, then the title. */
  .sheet-nav { display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u)); padding: 0 calc(20 * var(--u)) calc(20 * var(--u)); border-bottom: 1px solid var(--tan); }
  .sheet-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .sheet-arrow { flex: none; display: flex; width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
  .sheet-arrow:disabled { opacity: .35; cursor: default; }
  .sheet-count { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); text-align: center; white-space: pre; color: var(--muted); }
  .sheet-count-n { font-weight: 500; color: var(--ink); }
  .sheet-nav .m-hatch { margin: 0; width: 100%; justify-content: flex-start; height: calc(12 * var(--u)); }
  .sheet-title { width: 100%; font-family: var(--serif); font-size: calc(25 * var(--u)); font-weight: 500; line-height: normal; letter-spacing: calc(-1.25 * var(--u)); text-align: center; }
  .sheet-track { flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior: contain; scrollbar-width: none; }
  .sheet-track::-webkit-scrollbar { display: none; }
  .sheet-track.lock-x { overflow-x: hidden; }
  /* y only: contain on x too would stop a sideways swipe from reaching the track. */
  .sp { flex: 0 0 100%; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always;
    padding-bottom: max(calc(24 * var(--u)), env(safe-area-inset-bottom)); }
  .sp.lock-y { overflow-y: hidden; }
  .sc { display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(20 * var(--u)); border-bottom: 1px solid var(--bg); }
  .sc:first-child { padding-top: calc(25 * var(--u)); }
  .sc-head { display: flex; align-items: center; gap: calc(15 * var(--u)); }
  .sc-photo { flex: none; display: flex; align-items: center; justify-content: center; width: calc(53 * var(--u)); height: calc(65 * var(--u)); overflow: hidden;
    border-radius: calc(10 * var(--u)); background: var(--tan); font-family: var(--serif); font-size: calc(14 * var(--u)); color: var(--muted); }
  .sc-photo img { width: 100%; height: 100%; object-fit: cover; }
  .sc-id { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
  .sc-party { font-size: calc(12 * var(--u)); font-weight: 500; color: var(--muted); }
  .sc-name { display: flex; flex-direction: column; gap: calc(7.143 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ink); text-align: left; overflow-wrap: anywhere; }
  .sc-name .nm-l { font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500; }
  .sq, .snp { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); }
  .sq { background: var(--card); }
  .sq-text { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
  .sq-meta { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--muted); }
  .sq-src { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--link); text-decoration: none; }
  .snp { background: var(--light-tan); }
  .snp-h { font-size: calc(14 * var(--u)); font-weight: 500; line-height: normal; color: var(--ink); }
  /* The Official record block of the details card (Figma 155:7253) inside the card, over the shared .sc record styling. */
  .sc .sq-rec .recs { gap: calc(14 * var(--u)); }
  .sc .sq-rec .rec-label { font-size: calc(11 * var(--u)); letter-spacing: calc(.66 * var(--u)); }
  .sc .sq-rec .rec { gap: calc(12 * var(--u)); padding-left: calc(12 * var(--u)); }
  .sc .sq-rec .rec-text { line-height: calc(18 * var(--u)); }
  .sc .sq-rec .rec-text a { text-decoration: none; }
  .sc .sq-rec .rec-verb { font-weight: 400; }
  .sn { font-size: calc(15 * var(--u)); color: var(--ink); }
  .sn a { color: var(--link); }

  /* Bottom sheets: Candidate Details (Figma 155:7253) and Unbiased look (Figma 163:7512). Grey, white cards; only the Party Reveal pop-up is white (owner, 2026-10-11). Dimmed page behind; the page is
     not locked with position: fixed, so the pinned cards stay visible under the dim (the scrim takes the touches). */
  html.bs-open { overflow: hidden; }
  .bs-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(20, 20, 20, .45); opacity: 0;
    touch-action: none; transition: opacity .25s ease; }
  .bs-scrim.is-open { opacity: 1; }
  .bs:not([hidden]) { display: flex; }
  .bs { flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; padding-top: calc(8 * var(--u)); overflow: hidden;
    border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0; background: var(--bg); box-shadow: 0 -8px 32px rgba(0, 0, 0, .2); outline: none;
    transform: translateY(100%); transition: transform .25s ease; }
  .bs.is-open { transform: none; }
  .bs.is-dragging { transition: none; }
  .bs-head { flex: none; touch-action: none; }
  .bs-grab { display: flex; justify-content: center; padding-bottom: calc(25 * var(--u)); }
  .bs-grab span { width: calc(36 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--tan); }

  .bs--d { height: calc(100vh - var(--sheet-top)); height: calc(100dvh - var(--sheet-top)); padding-left: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); }
  .bs--d .bs-grab { padding-bottom: calc(25 * var(--u)); }
  /* Header block (Figma 160:7499): "Running for", the race title in serif, then the Unbiased view switch (the shared [data-uv] bar). */
  .dd-run { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); padding: calc(10 * var(--u)); border-bottom: 1px solid var(--tan); }
  .dd-run-t { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0; }
  .dd-run-k { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--ink); white-space: nowrap; }
  .dd-race { font-family: var(--serif); font-size: calc(25 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: calc(-1.25 * var(--u)); color: var(--ink); }
  .m-uv--d { width: auto; justify-content: flex-start; padding: 0; background: none; }
  .dd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(calc(20 * var(--u)), env(safe-area-inset-bottom)); }
  .dd-cand { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--bg); }
  .dd-photo-col { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
  .dd-photo { display: flex; align-items: center; justify-content: center; width: calc(143.163 * var(--u)); height: calc(171 * var(--u)); overflow: hidden;
    border-radius: calc(50 * var(--u)); background: var(--tan); font-family: var(--serif); font-size: calc(30.096 * var(--u)); color: var(--muted); }
  .dd-photo img { width: 100%; height: 100%; object-fit: cover; }
  .dd-id { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); }
  .dd-party { width: auto; font-size: calc(16 * var(--u)); font-weight: 500; line-height: normal; color: var(--ink); margin-bottom: calc(-4 * var(--u)); }
  .dd-name { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin: 0; font-family: var(--sans); font-weight: 400; font-size: calc(22 * var(--u)); line-height: normal;
    color: var(--ink); overflow-wrap: anywhere; }
  .dd-name .nm-l { font-size: calc(30 * var(--u)); font-weight: 500; letter-spacing: calc(-.9 * var(--u)); }
  .nm-f:empty, .nm-l:empty { display: none; }
  .dd-badge { font-size: calc(12 * var(--u)); font-weight: 500; line-height: normal; color: var(--muted); }
  .dd-body { display: flex; flex-direction: column; gap: calc(50 * var(--u)); padding: 0 calc(20 * var(--u)); }
  .dd-top { display: flex; flex-direction: column; gap: calc(25 * var(--u)); }
  .dd-top .bio-hint, .dd-connect-t { display: none; }      /* Figma 155:7253 has neither the "Party is hidden" line nor "Connect with" */
  .dd-top:empty { display: none; }
  .dd-bio { font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }   /* Figma 185:7697: 14/22 */
  .dd-site { display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(50 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--card);
    font-size: calc(15 * var(--u)); font-weight: 500; line-height: normal; color: var(--link); text-decoration: none; }
  .dd-site span { flex: 1 1 0; }
  .dd-site img { flex: none; }
  .dd-connect { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
  .dd-connect-t { font-size: calc(14 * var(--u)); line-height: normal; color: var(--muted); }
  .dd-social { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--u)); }
  .dd-social a { display: inline-flex; line-height: 0; }
  .dd-issues { display: flex; flex-direction: column; gap: calc(25 * var(--u)); }
  .dd-issues-top { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
  .dd-issues-h { font-family: var(--serif); font-weight: 500; font-size: calc(25 * var(--u)); line-height: normal; letter-spacing: calc(-1.25 * var(--u)); color: var(--ink); }
  .dd-cards { display: flex; flex-direction: column; gap: calc(25 * var(--u)); }
  .dd-issue { display: flex; flex-direction: column; padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--card); }
  .dd-issue-t { margin: 0 0 calc(5 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 700; line-height: normal; color: var(--ink); }
  .dd-q { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(15 * var(--u)) 0; }
  .dd-q + .dd-q { border-top: 1px solid var(--tan); }
  .dd-q-text { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
  .dd-q-meta { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--muted); }
  .dd-q-src { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--link); text-decoration: none; }
  .dd-none { font-size: calc(14 * var(--u)); color: var(--muted); }
  .bs--d .m-pick-wrap { justify-content: flex-start; }

  /* Common Ground (Figma 378:16548 banner, 472:21766 colours, 472:22371 sheet). Banner: 20px sides, the dark gradient card (40px radius, 25px top / 15px bottom, 15px sides): flag,
     serif title, hatch line, caption, the white 60px pill. 30px of page colour between the white candidate card and the banner, and 30px between the banner and the
     "Thinking for yourself matters" label (the 30px top padding of that label block is the second one, so the banner has no padding below). */
  .cg-banner { display: block; padding: calc(30 * var(--u)) calc(20 * var(--u)) 0; }
  .cg-banner-card { display: flex; flex-direction: column; align-items: center; gap: calc(30 * var(--u)); padding: calc(25 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u)); border-radius: calc(40 * var(--u)); overflow: hidden;
    background: linear-gradient(126.53deg, #251e23 3.1227%, #600554 100.51%); }
  .cg-banner-top { display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u)); width: 100%; overflow: hidden; }
  .cg-banner-flag { display: block; width: calc(36 * var(--u)); height: calc(25 * var(--u)); }
  .cg-banner-t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(35 * var(--u)); line-height: normal; letter-spacing: calc(-1.75 * var(--u)); white-space: nowrap;
    color: var(--light-tan); text-box: trim-both cap alphabetic; }
  .cg-banner-hatch { display: flex; justify-content: center; margin: 0; height: calc(12 * var(--u)); overflow: hidden; font-size: calc(12 * var(--u)); line-height: calc(12 * var(--u)); letter-spacing: calc(2.4 * var(--u));
    white-space: nowrap; color: var(--light-tan); opacity: .5; }
  .cg-banner-hatch::before { content: "/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////"; flex: none; }
  .cg-banner-text { margin: 0; width: 100%; font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: calc(11 * var(--u)); line-height: normal; letter-spacing: calc(.55 * var(--u));
    text-align: center; text-transform: uppercase; color: var(--light-tan); text-box: trim-both cap alphabetic; }
  .cg-banner-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(60 * var(--u)); padding: 0 calc(25 * var(--u)); border: 0; border-radius: calc(100 * var(--u));
    background: #fff; font: inherit; font-size: calc(16 * var(--u)); font-weight: 500; line-height: calc(20 * var(--u)); color: #600554; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cg-banner-btn:focus-visible { outline: 2px solid var(--light-tan); outline-offset: 3px; }

  /* The Common Ground sheet is DARK (owner, 2026-10-12; Figma 486:22834 Unbiased View ON, 576:34081 OFF; layout from the light 472:22371). Palette: sheet #251e23, grabber and pill #42303e, cards #42303e,
     title, subtitle, hatch line, issue title, pager and names #eadee8, the position #f4f1f4, the pill's words #ece9e5, the badge #eadee8 with #600554 text, party words, the list's line, the
     info icon and the button #d3b4d0. The expanded state has no frame: it keeps this palette (see .cg-quotes below). */
  .bs--c { height: calc(100vh - var(--sheet-top)); height: calc(100dvh - var(--sheet-top)); padding-left: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); background: #251e23; }
  .bs--c .bs-grab span { background: #42303e; }
  .cg-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(calc(20 * var(--u)), env(safe-area-inset-bottom)); }
  .cg-top { display: flex; flex-direction: column; align-items: center; gap: calc(25 * var(--u)); padding: calc(10 * var(--u)); }
  .cg-title { margin: 0; width: 100%; min-height: calc(33 * var(--u)); font-family: var(--serif); font-weight: 500; font-size: calc(35 * var(--u)); line-height: normal; letter-spacing: calc(-1.75 * var(--u)); text-align: center;
    color: #eadee8; text-box: trim-both cap alphabetic; }
  .cg-sub { margin: calc(-6 * var(--u)) 0 0; width: 100%; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); text-align: center; color: #eadee8; text-box: trim-both cap alphabetic; }
  /* The Unbiased View pill (Figma 472:21573): the shared [data-uv] switch on light tan. */
  .m-uv--cg { width: auto; padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: calc(25 * var(--u)); }
  /* dark: the pill #42303e, its words #ece9e5 in Roman (the ON / OFF is not bold), the switch American purple while on, #d3b4d0 off (the same switch as the race page's) */
  .bs--c .m-uv.m-uv--cg, .bs--c .m-uv.m-uv--cg[aria-checked=false] { background: #42303e; }
  .bs--c .m-uv--cg .m-uv-name, .bs--c .m-uv--cg .m-uv-label { color: #ece9e5; font-weight: 400; }
  .bs--c .m-uv--cg .m-uv-sw { box-sizing: border-box; border: .5px solid rgba(217, 206, 216, .5); background: #600554; }
  .bs--c .m-uv--cg[aria-checked=false] .m-uv-sw { background: #d3b4d0; }
  .bs--c .m-uv--cg .m-uv-thumb { top: calc(1.76 * var(--u)); left: calc(24.34 * var(--u)); }
  .bs--c .m-uv--cg[aria-checked=false] .m-uv-thumb { left: calc(1.76 * var(--u)); }
  .cg-nav { display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u)); width: min(calc(350 * var(--u)), calc(100% - calc(20 * var(--u)))); margin: 0 auto; padding: calc(15 * var(--u)) 0 calc(26 * var(--u)); }       /* 25px under the pill (10 + 15), 26px under the pager, as the frame has them */
  .cg-nav .m-hatch { margin: calc(-1.5 * var(--u)) 0; width: 100%; justify-content: flex-start; color: #eadee8; }
  .cg-issue-t { margin: 0; width: 100%; font-family: var(--serif); font-weight: 500; font-size: calc(25 * var(--u)); line-height: normal; letter-spacing: calc(-1.25 * var(--u)); text-align: center; color: #eadee8; text-box: trim-both cap alphabetic; }
  .cg-pager { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .cg-arrow { flex: none; display: flex; width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
  .cg-arrow:disabled { opacity: .35; cursor: default; }
  .cg-count { margin: 0; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); text-align: center; white-space: pre; color: #eadee8; }
  .cg-count-n { font-weight: 500; color: #eadee8; }
  .cg-cards { display: flex; flex-direction: column; gap: calc(25 * var(--u)); width: min(calc(346 * var(--u)), calc(100% - calc(20 * var(--u)))); margin: 0 auto; }
  .cg-cards > .dd-none { text-align: center; color: #eadee8; }
  .cg-card { display: flex; flex-direction: column; gap: calc(25 * var(--u)); padding: calc(18 * var(--u)); border-radius: calc(14 * var(--u)); background: #42303e; }
  .cg-card-top { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
  .cg-card-head { display: flex; flex-direction: column; gap: calc(15 * var(--u)); }
  .cg-pos { margin: 0; font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(22 * var(--u)); color: #f4f1f4; text-box: trim-both cap alphabetic; }
  .cg-agree { align-self: flex-start; margin: 0; padding: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: #eadee8; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #600554; white-space: nowrap;
    text-box: trim-both cap alphabetic; }
  .cg-list { position: relative; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: 0 calc(15 * var(--u)); border-left: 3px solid #d3b4d0; }
  .cg-row { position: relative; display: flex; align-items: center; gap: calc(4 * var(--u)); }
  .cg-photo { flex: none; display: flex; align-items: center; justify-content: center; width: calc(35 * var(--u)); height: calc(35 * var(--u)); overflow: hidden; border-radius: 50%; background: #eadee8;
    font-size: calc(12 * var(--u)); color: #42303e; }
  .cg-photo img { width: 100%; height: 100%; object-fit: cover; }
  .cg-who { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(7 * var(--u)); }
  .cg-name { margin: 0; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: #eadee8; overflow-wrap: anywhere; text-box: trim-both cap alphabetic; }
  .cg-party { margin: 0; font-family: "IBM Plex Sans Devanagari", var(--sans); font-size: calc(10 * var(--u)); font-weight: 500; line-height: normal; text-transform: uppercase; color: #d3b4d0; text-box: trim-both cap alphabetic; }
  .cg-info { flex: none; display: flex; width: calc(14 * var(--u)); height: calc(14 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
  .cg-info::after { content: ""; position: absolute; right: calc(-8 * var(--u)); top: 50%; width: calc(44 * var(--u)); height: calc(44 * var(--u)); transform: translateY(-50%); }   /* a 44px tap target around the 14px icon */
  .cg-info { position: static; }
  .cg-note { position: absolute; z-index: 2; right: 0; top: calc(100% + calc(4 * var(--u))); max-width: calc(230 * var(--u)); margin: 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--ink); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
  .cg-quotes { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
  .cg-qc + .cg-qc { margin-top: calc(10 * var(--u)); padding-top: calc(15 * var(--u)); border-top: 1px solid rgba(234, 222, 232, .3); }
  .cg-qn { margin: 0; font-size: calc(14 * var(--u)); font-weight: 700; line-height: calc(18 * var(--u)); color: #f4f1f4; }
  /* The quotes opened in place (no frame; derived from the dark ones): the same card #42303e, the candidate's name #f4f1f4 (the colour of the position), the quote #eadee8, its source line and any link
     #d3b4d0, the rule between candidates #eadee8 at 30%, and the same outlined button. Scoped to the card, so the Details sheet's quotes keep theirs. */
  .cg-quotes .dd-q + .dd-q { border-top-color: rgba(234, 222, 232, .3); }
  .cg-quotes .dd-q-text { color: #eadee8; }
  .cg-quotes .dd-q-meta, .cg-quotes .dd-q-src, .cg-quotes a { color: #d3b4d0; }
  .cg-read { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(60 * var(--u)); padding: 0 calc(25 * var(--u)); border: var(--btn-stroke) solid #d3b4d0; border-radius: calc(100 * var(--u)); background: none;
    font: inherit; font-size: calc(16 * var(--u)); font-weight: 500; line-height: calc(20 * var(--u)); color: #d3b4d0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cg-read:focus-visible { outline: 2px solid #eadee8; outline-offset: 3px; }

  .bs--u { background: #fff; min-height: calc(327 * var(--u)); padding-bottom: max(calc(24 * var(--u)), env(safe-area-inset-bottom)); }
  .bs--u .bs-grab { padding-bottom: calc(35 * var(--u)); }
  .us-body { display: flex; flex-direction: column; gap: calc(35 * var(--u)); width: min(calc(316 * var(--u)), calc(100% - calc(40 * var(--u)))); margin: 0 auto; }
  .us-copy { display: flex; flex-direction: column; }
  .us-title { margin: calc(-5 * var(--u)) 0 calc(15 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(25 * var(--u)); color: var(--ink); }   /* Figma: 18/25 medium, 20px to the text (its cap-trimmed box is 15px) */
  .us-text { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--muted); }
  .us-em { text-box: trim-end cap alphabetic; margin-top: calc(18 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 400; line-height: calc(18 * var(--u)); color: var(--ink); }          /* Figma 163:7553: roman, black, after one blank line */
  .us-actions { display: flex; gap: calc(20 * var(--u)); height: calc(60 * var(--u)); margin-top: calc(-4 * var(--u)); }          /* the frame has the buttons 753 down, 35 under the text box (the last line is 4 shorter than the baseline-trim here) */
  .us-cancel, .us-reveal { height: 100%; border: 0; border-radius: calc(100 * var(--u)); font: inherit; font-size: calc(16 * var(--u)); line-height: normal; cursor: pointer; }
  .us-cancel { flex: 0 0 calc(102 * var(--u)); padding: 0 calc(15 * var(--u)); background: #dfe8fa; color: var(--link); font-weight: 500; }
  .us-reveal { flex: 1 1 0; background: var(--link); color: #fff; font-weight: 500; }

  /* Pocket Ballot bottom sheet (Figma 234:1155): gray sheet, header and action bar fixed, the list scrolls between them. */
  .bs--p { height: calc(100vh - var(--sheet-top)); height: calc(100dvh - var(--sheet-top)); background: #f4f1f4; }      /* the frame's colours (owner, 2026-10-15): sheet #f4f1f4, grabber #d3b4d0, tiles and banner #eadee8, purple #600554, ink #251e23 */
  .bs--p .bs-grab { padding-bottom: calc(20 * var(--u)); }
  .bs--p .bs-grab span { background: #d3b4d0; }
  .pk-head { flex: none; display: flex; flex-direction: column; gap: calc(25 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); }
  .pk-logo { width: calc(184 * var(--u)); height: calc(21 * var(--u)); }
  .pk-titles { display: flex; flex-direction: column; gap: calc(15 * var(--u)); }
  .pk-title { font-family: var(--serif); font-weight: 400; font-size: calc(35 * var(--u)); line-height: normal; letter-spacing: calc(-1.75 * var(--u)); color: #251e23; white-space: nowrap;
    text-box: trim-both cap alphabetic; }
  .pk-where { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: #251e23; text-box: trim-both cap alphabetic; }
  .pk-voting { display: flex; flex-direction: column; gap: calc(10 * var(--u)); height: calc(93 * var(--u)); margin: calc(9 * var(--u)) 0 calc(12 * var(--u)); }      /* scrolls with the list: 25px under the title (16 + 9), 32px above the first section (12 + 4 + 16) */
  .pk-tiles { flex: 1 1 0; min-height: 0; display: flex; gap: calc(10 * var(--u)); }
  .pk-tile { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 calc(5 * var(--u)); border-radius: calc(10 * var(--u)); background: #eadee8;
    font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #251e23; white-space: nowrap; }
  .pk-tile--day { flex: none; width: calc(142 * var(--u)); padding: 0; }
  .pk-tile strong { font-weight: 700; color: #600554; }
  .pk-tile span { display: block; text-box: trim-both cap alphabetic; }
  .pk-banner { flex: none; display: flex; align-items: center; justify-content: center; padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: #eadee8;
    font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #600554; text-align: center; }
  .pk-banner strong { font-weight: 700; text-box: trim-both cap alphabetic; }
  .pk-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .pk-content { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: 0 calc(20 * var(--u)) calc(32 * var(--u) + env(safe-area-inset-bottom, 0px)); }      /* 32px under the last card (no bar now), clear of the home indicator */
  #pk-races { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }      /* the 4px between the Figma sections (the content column's gap) */
  .pk-sec { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding-top: calc(16 * var(--u)); }
  .pk-sec-h { padding-bottom: calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; line-height: calc(22 * var(--u)); color: #600554; text-box: trim-both cap alphabetic; }
  .pk-card { display: flex; flex-direction: column; padding: 0 calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--card); overflow: hidden; }
  .pk-row { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid #ece9e5; }
  .pk-row:last-child { border-bottom: 0; }
  .pk-photo { flex: none; width: calc(40 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); background: #d3b4d0; overflow: hidden; }
  .pk-photo img { width: 100%; height: 100%; object-fit: cover; }
  .pk-row--open .pk-photo { background: none; border: 1.5px dashed #42303e; }
  .pk-text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); color: #251e23; }
  .pk-race { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #42303e; text-box: trim-both cap alphabetic; }
  .pk-name { font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); text-box: trim-both cap alphabetic; }     /* Figma 388:6208: first name regular, last name bold, one line of text */
  .pk-name--cand .pk-last { font-weight: 700; }
  .pk-link { flex: none; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #600554; text-decoration: none; white-space: nowrap; text-box: trim-both cap alphabetic; }
  .pk-empty { padding: calc(24 * var(--u)) 0; font-size: calc(15 * var(--u)); color: var(--muted); }
  /* The round share icon (Figma 234:1155): 60px, American purple, next to the wordmark at the top right; the old bar with Save to phone and Share is gone. */
  .pk-top { display: flex; align-items: center; gap: calc(25 * var(--u)); }
  .pk-top .pk-logo { flex: 1 1 0; min-width: 0; width: auto; max-width: calc(184 * var(--u)); }
  .pk-share { flex: none; display: flex; align-items: center; justify-content: center; width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin-left: auto; padding: 0; border: 0; border-radius: calc(100 * var(--u)); background: #600554; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pk-share img { display: block; width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .pk-share:focus-visible, .pk-link:focus-visible { outline: 2px solid #600554; outline-offset: 3px; }

  /* Candidate page, All races, My ballot, Pocket Ballot dialog, footer: no mobile frames yet, kept from breaking */
  .cand--page { margin-top: calc(24 * var(--u)); padding: 0 calc(20 * var(--u)); }
  .cand--page .cand-head { flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }
  .cand--page .cand-name { font-size: calc(32 * var(--u)); line-height: calc(36 * var(--u)); }
  .cand--page .bio { max-width: none; }
  .cand-section { margin-top: calc(40 * var(--u)); padding: 0 calc(20 * var(--u)); }
  .section-title { font-size: calc(22 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .issue-block { padding: calc(20 * var(--u)) calc(16 * var(--u)); }
  .index { width: calc(100% - calc(40 * var(--u))); margin: calc(24 * var(--u)) auto calc(60 * var(--u)); }
  .index-list { columns: 1; }
  .search { width: 100%; }
  dialog.pocket-confirm { max-width: calc(100vw - calc(32 * var(--u))); padding: calc(22 * var(--u)) calc(20 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .dpin-bar, .m-pick-wrap, .m-uv-sw, .m-uv-thumb { transition-duration: .01s !important; }
  .sheet, .bs { transform: none !important; opacity: 0; transition: opacity .15s ease !important; }
  .sheet.is-open, .bs.is-open { opacity: 1; }
}

/* ---------- Bio redaction (owner 2026-10-05; Figma 185:7826 bar states, 185:7697 / 185:7764 mobile) ----------
   Every party word in a bio is a solid black bar, 88 x 18, 2px radius, the same width whatever the word, so its length
   never hints at the party. It is a real button. */
.redact { display: inline-block; box-sizing: border-box; width: 88px; height: 18px; margin: 0 1px; padding: 0; border: 0; border-radius: 2px;
  background: #000; vertical-align: -3px; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.redact:hover, .redact:active { background: #2b2b2b; }
.redact:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
.redact-word { font-weight: 500; color: #000; }
.bio + .bio { margin-top: 10px; }
.bio-hint { margin-top: 2px; font-size: 12px; line-height: normal; color: var(--muted); }

/* "What is unbiased view?" desktop dialog (Figma 184:7674): 520px, 20px radius, 36 x 32 padding, over the page at 90% warm gray. */
dialog.unbiased { width: 520px; max-width: calc(100vw - 32px); padding: 32px 36px; border: 0; border-radius: 20px; background: var(--bg);
  color: var(--ink); box-shadow: 0 16px 48px rgba(0, 0, 0, .28); }
dialog.unbiased::backdrop { background: rgba(114, 110, 107, .9); }
.ud-title { font-size: 20px; font-weight: 700; line-height: normal; color: #000; }
.ud-text { margin-top: 14px; font-size: 15px; line-height: 24px; color: var(--muted); }
.ud-em { margin-top: 14px; font-size: 15px; font-weight: 700; line-height: 24px; color: #000; }
.ud-actions { display: flex; align-items: center; gap: 45px; margin-top: 25px; }
.ud-cancel, .ud-reveal { flex: none; height: 60px; padding: 0 25px; border: 0; border-radius: 100px; font: inherit; font-size: 16px; font-weight: 500; line-height: 22px; cursor: pointer; }
.ud-cancel { background: #e4e2de; color: #8a8580; }
.ud-reveal { background: var(--link); color: #fff; }
.ud-cancel:focus-visible, .ud-reveal:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 767px) { dialog.unbiased { display: none; } }

/* ---------- Official records in issue cells (owner 2026-10-06; Figma 78:833, 125:4136, 155:7253) ---------- */
/* Record row ("Cell item - Official record"): a 2px tan rule, the verb in Medium, the official title linked, and under it
   date, result and source line. Helvetica Neue (the design's Inter is a stand-in). */
.pos { display: flex; flex-direction: column; gap: 21px; }
.tag-official { display: block; width: fit-content; align-self: flex-start; padding: 3px 8px; border-radius: 100px;
  background: var(--tan); font-size: 11px; font-weight: 500; line-height: normal; color: var(--ink); white-space: nowrap; }
.recs { display: flex; flex-direction: column; gap: 14px; }
.rec-label { font-size: 11px; font-weight: 500; line-height: normal; letter-spacing: .66px; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.rec { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 12px; border-left: 2px solid var(--tan);
  overflow-wrap: break-word; }
.rec-text { font-size: 14px; line-height: normal; color: var(--ink); }
.rec-verb { font-weight: 500; }
.rec-text a { color: var(--link); text-decoration: none; }
.rec-text a:hover { text-decoration: underline; }
.rec-meta { font-size: 12px; line-height: normal; color: var(--muted); }
.cell-meta .more-link { margin-left: auto; }
.claim .tag-official { margin-bottom: 14px; }
.issue-block .claim + .recs { margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.show-all { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; margin-top: 20px; padding: 12px 20px;
  border: 1px solid var(--ink); border-radius: 100px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px;
  line-height: normal; cursor: pointer; }
.show-all:disabled { opacity: .6; cursor: default; }
.show-all:focus-visible, .dd-show-all:focus-visible, .m-more:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

@media (max-width: 767px) {
  /* Race cells on the phone: two items at most, only the verb and the linked title (no date, result or source line);
     "+N more" is a button that opens the candidate details sheet (it sits above the row's own tap area). */
  .cell .pos { gap: calc(8 * var(--u)); }
  .cell .tag-official { font-size: calc(10 * var(--u)); }
  .cell .recs, .sc .recs { gap: calc(10 * var(--u)); }
  .cell .rec-label, .sc .rec-label { font-size: calc(10 * var(--u)); letter-spacing: calc(.6 * var(--u)); }
  .cell .rec, .sc .rec { padding-left: calc(8 * var(--u)); }
  .cell .rec-meta, .sc .rec-meta { display: none; }
  .cell .rec-text a, .sc .rec-text a { text-decoration: underline; text-decoration-skip-ink: none; text-underline-position: from-font;
    position: relative; z-index: 2; }
  .cell .m-hide { display: none; }
  .m-more { position: relative; z-index: 2; align-self: flex-start; padding: 0; border: 0; background: none; font: inherit;
    font-size: calc(13 * var(--u)); text-align: left; text-underline-position: from-font; color: var(--link); text-decoration: underline; cursor: pointer; }
  /* Candidate details card (Figma 155:7253): the records section under the positions, then "Show all N". */
  .dd-q .tag-official { font-size: calc(10 * var(--u)); }
  .dd-recs { padding: calc(15 * var(--u)) 0; border-top: 1px solid var(--tan); }
  .dd-issue-t + .dd-recs { border-top: 0; padding-top: calc(10 * var(--u)); }
  .dd-recs .rec { gap: calc(12 * var(--u)); }
  .dd-recs .rec-text { line-height: calc(18 * var(--u)); }
  .dd-recs .rec-verb { font-weight: 400; }
  .dd-recs .rec-meta { line-height: calc(16 * var(--u)); }
  .dd-show-all { display: flex; align-items: flex-start; justify-content: center; width: 100%; margin: calc(11 * var(--u)) 0 calc(4 * var(--u)); padding: calc(10.5 * var(--u)) calc(20 * var(--u));
    border: var(--btn-stroke) solid var(--ink); border-radius: calc(100 * var(--u)); background: #fff; color: var(--ink); font: inherit; font-size: calc(14 * var(--u));
    line-height: calc(18 * var(--u)); cursor: pointer; }
  .dd-show-all:disabled { opacity: .6; cursor: default; }
  .sq .tag-official { margin-bottom: calc(8 * var(--u)); }
  .show-all { max-width: none; padding: calc(10.5 * var(--u)) calc(20 * var(--u)); border-width: var(--btn-stroke); }       /* the stroke grows inward; the padding gives the 3px back */
  .pocket-btn { border-width: var(--btn-stroke); }
}

/* ---------- Request a correction (owner 2026-10-07). Figma: phone page 298:2816 (+ suggestions 263:1289, thank-you 263:1438),
   desktop drawer 263:1539 (+ suggestions 298:2634, thank-you 298:2651). Colours are the site's tokens: --link is Figma's
   America Blue (#0034a4), --tan, --muted (dark brown), --bg; errors use the site's error red (.form-error). ---------- */
.cf { color: var(--ink); font-family: var(--sans); }
.cf-title { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -1.25px; line-height: normal; }
.cf-lede { font-size: 14px; line-height: 18px; color: var(--muted); }
.cf-form { display: flex; flex-direction: column; gap: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-row { display: flex; flex-direction: column; gap: 20px; }
.cf-label { padding: 0; font-size: 14px; line-height: 18px; font-weight: 700; }
fieldset.cf-field .cf-label { margin-bottom: 8px; }
.cf-input { display: block; width: 100%; height: 60px; padding: 0 16px; border: 1.5px solid var(--tan); border-radius: 15px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; line-height: 18px; outline: 0;
  -webkit-appearance: none; appearance: none; }
.cf-input::placeholder { color: var(--muted); opacity: 1; }
.cf-input:focus { border-color: var(--link); box-shadow: 0 0 0 .5px var(--link); }
.cf-input[aria-invalid="true"] { border-color: #8a1c1c; box-shadow: 0 0 0 .5px #8a1c1c; }
.cf-textarea { height: 120px; min-height: 120px; padding: 15px 16px; resize: vertical; }
.cf-select { position: relative; }
.cf-select select { padding-right: 44px; cursor: pointer; }
.cf-select select.is-empty { color: var(--muted); }
.cf-select select option { color: var(--ink); }
.cf-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.cf-hint { font-size: 12px; line-height: 16px; color: var(--muted); }
.cf-err { font-size: 14px; line-height: 18px; color: #8a1c1c; }
.cf-combo { position: relative; }
.cf-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 0; list-style: none;
  background: var(--card); border: 1px solid var(--tan); border-radius: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); overflow: hidden; }
.cf-opt { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px; cursor: pointer; }
.cf-opt[aria-selected="true"] { background: var(--bg); }
.cf-opt-name { font-size: 14px; line-height: 18px; font-weight: 700; }
.cf-opt-race { font-size: 12px; line-height: 16px; color: var(--muted); }
/* "I am": two pills (Figma 298:2969). The radios are real; the pill is drawn on the label. */
.cf-seg { display: flex; gap: 10px; }
.cf-seg-opt { position: relative; flex: 1 1 0; min-width: 0; }
.cf-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-seg-opt span { display: flex; align-items: center; justify-content: center; height: 60px; border: 2px solid #000; border-radius: 100px;
  color: #000; font-size: 16px; line-height: 22px; font-weight: 500; text-align: center; }
.cf-seg-opt input:checked + span { background: #000; color: #fff; }
.cf-seg-opt input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.cf-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; flex-direction: column; gap: 20px; }
.cf-fail { font-size: 14px; line-height: 18px; color: #8a1c1c; text-align: center; }
.cf-submit, .cf-close { display: flex; align-items: center; justify-content: center; height: 60px; border: 0; border-radius: 100px;
  background: var(--link); color: #fff; font: inherit; font-size: 16px; line-height: 22px; font-weight: 500; cursor: pointer; }
.cf-submit { width: 100%; }
.cf-submit:disabled { opacity: .6; cursor: progress; }
.cf-submit:focus-visible, .cf-close:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.cf-note { font-size: 13px; line-height: normal; color: var(--muted); text-align: center; }
.cf-sent-in { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.cf-check { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 100px; background: #000; }
.cf-sent-title { font-family: var(--serif); font-weight: 400; font-size: 35px; letter-spacing: -1.75px; line-height: normal; outline: 0; }
.cf-sent-text { font-size: 14px; line-height: 18px; text-align: center; max-width: 304px; }
.cf-close { width: 194px; }

@media (max-width: 767px) { .cf-input { font-size: max(16px, calc(16 * var(--u))); } }       /* name, email, candidate, source, "what's wrong", issue list: no focus zoom on iPhones (owner, 2026-10-09) */

/* The phone page: white title block, form on the page colour; the thank-you state centres in what is left of the screen.
   Figma draws no footer on these frames. */
body[data-page="correction"] main { display: flex; flex-direction: column; }
.cf--page { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 600px; margin: 0 auto; }
.cf--page .cf-main { display: flex; flex-direction: column; }
.cf--page .cf-head { display: flex; flex-direction: column; gap: 25px; padding: 30px 20px; background: var(--card); }
.cf--page .cf-form { padding: 24px 20px 40px; }
.cf--page .cf-sent { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px; padding: 40px 20px; }

/* The desktop drawer: slides in from the right over a dimmed page, same .25s ease as the site's sheets. A phone never shows it. */
.cf-scrim, .cf-drawer { display: none; }
html.cf-open, html.cf-open body { overflow: hidden; }
@media (min-width: 768px) {
  .cf-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100; background: rgba(94, 85, 80, .9); opacity: 0;
    transition: opacity .25s ease; }
  .cf-scrim.is-open { opacity: 1; }
  .cf-drawer:not([hidden]) { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
    width: min(790px, 100vw); background: var(--card); overflow-y: auto; overscroll-behavior: contain; outline: 0;
    transform: translateX(100%); transition: transform .25s ease; }
  .cf-drawer.is-open { transform: none; }
  .cf--drawer { width: 100%; margin: auto; padding: 40px; }
  .cf--drawer .cf-main { display: flex; flex-direction: column; gap: 50px; }
  .cf--drawer .cf-head { display: flex; flex-direction: column; gap: 25px; }
  .cf--drawer .cf-title { font-size: 35px; letter-spacing: -1.75px; }
  .cf--drawer .cf-lede { font-size: 16px; line-height: 22px; max-width: 591px; }
  .cf--drawer .cf-form { gap: 24px; }
  .cf--drawer .cf-row { flex-direction: row; gap: 16px; }
  .cf--drawer .cf-row > .cf-field { flex: 1 1 0; }
  .cf--drawer .cf-input { height: 52px; font-size: 16px; line-height: 22px; }
  .cf--drawer .cf-textarea { height: 120px; min-height: 120px; }
  .cf--drawer .cf-actions { gap: 10px; align-items: center; margin-top: 66px; }
  .cf--drawer .cf-submit { width: 600px; max-width: 100%; }
  .cf--drawer .cf-note { font-size: 12px; line-height: 16px; }
  .cf--drawer .cf-opt { padding: 20px 16px; }
  .cf--drawer .cf-opt-name { font-size: 16px; line-height: normal; font-weight: 500; }
  .cf--drawer .cf-opt-race { font-size: 13px; line-height: normal; }
  .cf--drawer .cf-sent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px; }
  .cf--drawer .cf-sent[hidden] { display: none; }
  .cf--drawer .cf-sent-in { width: 500px; max-width: 100%; }
  .cf--drawer .cf-check { background: var(--link); }
  .cf--drawer .cf-sent-text { font-size: 16px; line-height: 22px; max-width: none; }
  .cf--drawer .cf-close { width: 138px; background: var(--tan); color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-scrim { transition-duration: .15s !important; }
  .cf-drawer { transform: none !important; opacity: 0; transition: opacity .15s ease !important; }
  .cf-drawer.is-open { opacity: 1; }
}

/* ---------- Desktop race page (owner 2026-10-07). Figma: Race 325:6865, sticky candidate bar 325:7301, dialog 184:7674; the
   frames are 1500px wide, content 70px in from each side. Everything is inside min-width: 768px, so the phone layer above is
   untouched. The IBM Plex Sans Devanagari Medium (OFL, Latin subset) is the design's font for the small caps labels and tags. ---------- */
@font-face { font-family: "IBM Plex Sans Devanagari"; src: url("fonts/IBMPlexSansDevanagari-Medium-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
:root { --light-tan: #ece9e5; }
.dk-only, .ico-d, .race-arrows { display: none; }
@media (min-width: 768px) {
  .dk-only { display: block; }
  .ico-m { display: none; }
  .ico-d { display: block; }

  /* Header (Figma 298:2307): logo, "My Pocket Ballot", menu; a light-tan line under it. It scrolls away with the page. */
  /* Race header (Figma 333:9628): 20px above, 15px below, the logo 222.9 x 25.9, a light-tan line under it. */
  body[data-page=race] .head-band--white, body[data-page=ballot] .head-band--white { background: linear-gradient(var(--light-tan), var(--light-tan)) 0 61px / 100% 1px no-repeat, var(--card); }
  body[data-page=race] .top, body[data-page=ballot] .top { max-width: 1500px; height: 61px; padding: 20px 70px 15px; align-items: center; }
  body[data-page=race] .logo img, body[data-page=ballot] .logo img { width: 222.912px; height: 25.92px; }
  body[data-page=race] .menu, body[data-page=ballot] .menu { padding-top: 0; display: flex; }
  body[data-page=race] .top .pocket-open, body[data-page=ballot] .top .pocket-open { margin-top: 0; font-size: 16px; font-weight: 400; line-height: 22px; }

  /* Title row: title, Federal tag, Special Election under them; district and ZIP on the right. */
  body[data-page=race] .race-head { max-width: 1500px; padding: 31px 70px 0; }
  body[data-page=race] .race-head .back-link { display: none; }
  body[data-page=race] .race-head-row { margin-top: 0; gap: 40px; align-items: stretch; }
  /* The Federal / State tag sits above the title, left. The title's line box is 1.1 so a two-line title (Governor and
     Lieutenant Governor) doesn't overlap; the negative margins give back the half-leading, so a one-line title still takes
     the 50px (cap height) the design gives it. */
  body[data-page=race] .race-title-row { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 25px; }
  body[data-page=race] .race-title-row .pill--tag { order: -1; height: auto; padding: 8.333px; border-radius: 5px; background: #d3e1ff; color: var(--link);
    font-size: 11.67px; font-weight: 500; line-height: 8px; }
  body[data-page=race] .race-title-row .display { font-size: 65px; line-height: 1.1; letter-spacing: -3.25px; margin: -8.5px 0 -13px; }
  body[data-page=race] .race-title-row .info-link { gap: 10px; font-size: 14px; font-weight: 500; line-height: 15px; color: var(--link); text-decoration: none; }
  body[data-page=race] .race-head .place { width: 391px; gap: 25px; justify-content: center; align-items: flex-end; flex: none; }
  body[data-page=race] .race-head .place-name { font-size: 25px; line-height: 18px; letter-spacing: -1.25px; }
  body[data-page=race] .race-head .place-zip { font-size: 16px; line-height: 22px; color: #000; }
  body[data-page=race] .race-head .place-zip strong { font-weight: 400; color: #000; }
  body[data-page=race] .race-head .muted-link { font-size: 14px; font-weight: 500; color: var(--link); text-decoration: none; }
  body[data-page=race] .race-note-line { margin-top: 16px; font-size: 14px; }

  /* "Thinking for yourself matters" label and the slash rule, then the "Meet the candidates" row with the Unbiased view switch. */
  .dk-intro { max-width: 1500px; margin: 50px auto 0; padding: 0 70px 30px; }
  body[data-page=race] .dk-intro { margin-top: 45px; padding-bottom: 25px; }
  .dk-kicker { font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: 11px; line-height: 8px; letter-spacing: .55px;
    text-transform: uppercase; color: var(--muted); }
  .dk-rule { margin: 8.5px 0 -1.5px; height: 12px; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 12px; letter-spacing: 2.4px; color: var(--muted); }
  .dk-rule::before { content: "////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////"; }
  .dk-meet { display: flex; align-items: center; gap: 35px; margin-top: 30px; }
  body[data-page=race] .dk-meet { margin-top: 25px; }
  .dk-meet-t { flex: 1 1 0; min-width: 0; font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 25px; letter-spacing: -1.25px; text-align: center; color: #000; }
  .dk-back { display: flex; align-items: center; gap: 13px; flex: none; width: 190px; font-size: 18px; font-weight: 500; line-height: normal; color: #000; text-decoration: none; }
  .dk-back:hover span { text-decoration: underline; }
  .dk-back:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
  .uv { display: flex; align-items: center; gap: 11px; flex: none; }
  .uv-label { font-size: 16px; line-height: 22px; color: var(--muted); white-space: nowrap; }
  .uv-toggle { position: relative; flex: none; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 100px; background: var(--ink); cursor: pointer;
    transition: background .15s ease; }
  .uv-toggle[aria-checked=false] { background: var(--tan); }
  .uv-thumb { position: absolute; top: 2px; left: 22px; width: 27px; height: 27px; border-radius: 100px; background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 3px 6px rgba(0, 0, 0, .12); transition: left .15s ease; }
  .uv-toggle[aria-checked=false] .uv-thumb { left: 2px; }
  .uv-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
  body[data-page=race] .reveal-bar { display: none; }

  /* Candidate cards (Figma 325:6998): 420px columns 50px apart, 400px at 1440. */
  /* Sideways scroll (Figma 325:6865): 420px columns 25px apart, the first 70px in from the left; the scroller runs to the
     window's right edge so a fourth card peeks in. The cards, the pinned bar (it follows the scroll) and the issue columns
     are one grid, so each candidate stays in its column. The scrollbar is hidden: the arrows, a trackpad or a swipe move it. */
  body[data-page=race] .race-scroll { container-type: inline-size; max-width: none; margin: 40px 0 0; padding: 0; overflow-x: auto;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  body[data-page=race] .race-scroll::-webkit-scrollbar { display: none; }
  body[data-page=race] .race-grid { column-gap: 25px; padding-bottom: 30px; margin-left: max(70px, calc((100% - 1360px) / 2)); }
  body[data-page=race] .race-scroll.is-scroll .race-grid { padding-right: 70px; }
  body[data-page=race] .race-grid::before { display: none; }
  body[data-page=race] .race-grid, body[data-page=race] .dpin-inner { --colw: 420px; }
  body[data-page=race] .cols-1 { grid-template-columns: repeat(1, var(--colw)); }
  body[data-page=race] .cols-2 { grid-template-columns: repeat(2, var(--colw)); }
  body[data-page=race] .cols-3 { grid-template-columns: repeat(3, var(--colw)); }
  body[data-page=race] .cols-4 { grid-template-columns: repeat(4, var(--colw)); }
  body[data-page=race] .cols-5 { grid-template-columns: repeat(5, var(--colw)); }
  body[data-page=race] .cols-6 { grid-template-columns: repeat(6, var(--colw)); }
  body[data-page=race] .cols-7 { grid-template-columns: repeat(7, var(--colw)); }
  body[data-page=race] .cols-8 { grid-template-columns: repeat(8, var(--colw)); }
  body[data-page=race] .cols-9 { grid-template-columns: repeat(9, var(--colw)); }
  body[data-page=race] .cols-10 { grid-template-columns: repeat(10, var(--colw)); }
  body[data-page=race] .cols-11 { grid-template-columns: repeat(11, var(--colw)); }
  body[data-page=race] .cols-12 { grid-template-columns: repeat(12, var(--colw)); }
  body[data-page=race] .cols-13 { grid-template-columns: repeat(13, var(--colw)); }
  body[data-page=race] .cols-14 { grid-template-columns: repeat(14, var(--colw)); }
  body[data-page=race] .cols-15 { grid-template-columns: repeat(15, var(--colw)); }
  body[data-page=race] .cols-16 { grid-template-columns: repeat(16, var(--colw)); }
  /* A card is tan; it is white only while the mouse is over it (never because a button inside it kept focus). The name's
     link is stretched over the whole card, so the card opens the candidate page; the buttons, the party tag, "Read more"
     and the campaign links sit above it and keep their own actions. */
  body[data-page=race] .cand { position: relative; width: var(--colw); gap: 0; padding: 25px; border-radius: 5px; background: var(--light-tan); transition: background .15s ease; }
  @media (hover: hover) { body[data-page=race] .cand:hover { background: var(--card); } }
  body[data-page=race] .cand-name a::after { content: ""; position: absolute; inset: 0; border-radius: 5px; }
  body[data-page=race] .cand-name a:hover { text-decoration: none; }
  /* Click and drag on the cards scrolls the columns sideways (only while there is something to scroll to). */
  body[data-page=race] .race-scroll.is-scroll .cand, body[data-page=race] .race-scroll.is-scroll .cand .cand-name a { cursor: grab; }
  body[data-page=race] .race-scroll.is-scroll .cand .pocket-pick, body[data-page=race] .race-scroll.is-scroll .cand .ptag-unb,
  body[data-page=race] .race-scroll.is-scroll .cand .read-more, body[data-page=race] .race-scroll.is-scroll .cand .cand-links a,
  body[data-page=race] .race-scroll.is-scroll .cand .redact { cursor: pointer; }
  body[data-page=race] .race-scroll.is-dragging, body[data-page=race] .race-scroll.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
  body[data-page=race] .cand img { -webkit-user-drag: none; }
  body[data-page=race] .cand:has(.cand-name a:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; }
  body[data-page=race] .cand .pick-wrap, body[data-page=race] .cand .ptag-unb, body[data-page=race] .cand .read-more,
  body[data-page=race] .cand .cand-links a, body[data-page=race] .cand .redact { position: relative; z-index: 1; }
  body[data-page=race] .cand .read-more { align-self: flex-start; font-size: 12px; line-height: 16px; color: var(--link); text-decoration: none; }
  body[data-page=race] .cand .read-more:hover { text-decoration: underline; }
  body[data-page=race] .cand-head { gap: 27px; min-height: 0; align-items: center; }
  /* The photo never gives way to a long name (owner, 2026-10-08): its column keeps its width, the name wraps in what is left. */
  body[data-page=race] .photo-col { flex: 0 0 181px; min-width: 0; }
  body[data-page=race] .cand .photo { display: block; flex: none; width: 100%; height: auto; aspect-ratio: 352 / 450; border-radius: 5px; }
  body[data-page=race] .cand-id { flex: 1 1 0; min-width: 0; gap: 25px; align-items: flex-start; }
  body[data-page=race] .cand-name, body[data-page=race] .dpin-name, body[data-page=race] .cand-name a { display: flex; flex-direction: column; gap: 10px; font-family: var(--sans); line-height: normal; white-space: nowrap; color: #000; }
  body[data-page=race] .cand-name, body[data-page=race] .cand-name a { white-space: normal; overflow-wrap: anywhere; }
  body[data-page=race] .cand-name .cn-first { font-size: 30px; font-weight: 300; line-height: 22px; letter-spacing: -.9px; }
  body[data-page=race] .cand-name .cn-last { font-size: 35px; font-weight: 500; line-height: 25px; letter-spacing: -1.05px; }
  body[data-page=race] .cand-body { flex: 1 0 auto; gap: 15px; margin-top: 25px; padding-bottom: 25px; border-bottom: 1px dashed var(--tan); }
  /* The bio box (owner, 2026-10-08): a fixed maximum height of --bio-lines lines; the page script cuts what overflows with "…" and
     "read more" and gives every card of the race the height of the tallest (--bio-h), so the links under it line up. */
  body[data-page=race] { --bio-lines: 10; --bio-lh: 18px; }
  body[data-page=race] .bio-box { display: flex; flex-direction: column; gap: 15px; height: var(--bio-h, auto); max-height: calc(var(--bio-lines) * var(--bio-lh)); overflow: hidden; }
  body[data-page=race] .cand .bio { font-size: 14px; line-height: var(--bio-lh); color: var(--muted); }
  body[data-page=race] .site-link--none { visibility: hidden; text-decoration: none; }
  body[data-page=race] .cand-links { gap: 12px; }
  body[data-page=race] .cand .site-link { font-size: 14px; }
  body[data-page=race] .cand-foot { display: flex; align-items: center; justify-content: space-between; height: 30px; margin-top: 15px; }
  body[data-page=race] .cand-party { display: flex; align-items: center; gap: 7px; height: 100%; }
  body[data-page=race] .cand-party-l { font-size: 14px; line-height: 18px; color: var(--muted); }
  body[data-page=race] .cand-foot .badge { min-height: 0; height: 30px; padding: 0 20px; border-radius: 100px; background: var(--bg); font-size: 14px; font-weight: 500;
    line-height: normal; color: var(--muted); }
  /* The tag: black "Unbiased view" while parties are hidden, the party (filled in by the script) once revealed. */
  body[data-page=race] .ptag { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 25px; margin: 0; padding: 5px 15px; background: var(--ink);
    color: #fff; font-family: "IBM Plex Sans Devanagari", var(--sans); font-size: 11px; font-weight: 500; line-height: normal; letter-spacing: .55px; text-transform: uppercase; white-space: nowrap; }
  body[data-page=race] .ptag-unb { border: 0; cursor: pointer; }
  body[data-page=race] .ptag-unb:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
  body[data-page=race] .ptag-unb:has(+ .party-slot:not([hidden])) { display: none; }
  /* Party revealed (Figma 333:8749): plain text after "Party:", Medium 16/22 black, not the black tag. */
  body[data-page=race] .party-slot.ptag { display: block; width: auto; height: auto; padding: 0; background: none; color: #000; font-family: var(--sans);
    font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap; }

  /* Pocket Ballot button: the 40px "+", then the black "In Pocket Ballot" pill. */
  body[data-page=race] .pocket-pick .pick-off, body[data-page=race] .pocket-pick:hover .pick-off, body[data-page=race] .pocket-pick:focus-visible .pick-off { display: block; }
  body[data-page=race] .pocket-pick[aria-pressed=true] .pick-off, body[data-page=race] .pocket-pick[aria-pressed=true]:hover .pick-off { display: none; }
  .pick-in { display: none; align-items: center; justify-content: center; gap: 6px; width: 145px; height: 40px; border-radius: 20px; background: var(--ink); color: #fff;
    font-size: 13px; font-weight: 500; white-space: nowrap; }
  .pocket-pick[aria-pressed=true] .pick-in { display: flex; }
  .pocket-pick:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 20px; }

  /* "Position on major issues" (Figma 325:6902): label, serif heading, then one section per topic (no arrow beside the heading). */
  /* The arrows under the cards (Figma 325:6865: 38px under the cards, 20 x 12.2, at the left and right ends of the 1360px
     content); they stay put while the grid scrolls, and show only when a card is out of view. */
  body[data-page=race] .race-arrows { display: flex; justify-content: space-between; align-items: center; grid-column: 1 / -1; grid-row: 2; margin-top: 38px; height: 12.222px;
    position: sticky; left: max(70px, calc((100cqw - 1360px) / 2)); width: min(1360px, calc(100cqw - 140px)); }
  /* "N candidates. Listed as they appear on the ballot." (or, with two, "Candidates listed as ..."): one line centred between the arrows, in the same row and with the same offsets, so it
     stays in view while the cards scroll sideways. Phone has its own (.ccount / .cnote); .dk-only keeps it off the phone. */
  body[data-page=race] .race-listed { grid-column: 1 / -1; grid-row: 2; justify-self: start; box-sizing: border-box; display: flex; align-items: center; justify-content: center; margin-top: 38px; height: 12.222px; padding: 0 60px;
    position: sticky; left: max(70px, calc((100cqw - 1360px) / 2)); width: min(1360px, calc(100cqw - 140px)); font-size: 14px; font-weight: 500; line-height: 18px; color: #42303e; text-align: center; pointer-events: none; }
  body[data-page=race] .race-scroll:not(.is-scroll) .race-arrows { visibility: hidden; }
  .race-arrow { background: none; border: 0; padding: 10px 12px; margin: -10px -12px; line-height: 0; cursor: pointer; }
  .race-arrow .a-off, .race-arrow:disabled .a-on { display: none; }
  .race-arrow:disabled .a-off { display: block; }
  .race-arrow:disabled { cursor: default; }
  .race-next img { transform: scaleX(-1); }
  .race-arrow:focus-visible { outline: 2px solid var(--link); outline-offset: -4px; border-radius: 4px; }
  .dk-sect { grid-column: 1 / -1; grid-row: 3; margin-top: 83px; }
  body[data-page=race] .dk-sect .dk-kicker, body[data-page=race] .issues-label:first-of-type, body[data-page=race] .issue-title > span {
    position: sticky; left: max(70px, calc((100cqw - 1360px) / 2)); width: fit-content; }
  body[data-page=race] .issue-title > span { display: block; }
  body[data-page=race] .issues-label { display: none; }
  body[data-page=race] .issues-label:first-of-type { display: block; grid-column: 1 / -1; grid-row: 4; justify-self: start; margin: 30px 0 46px; font-size: 35px; line-height: 25px; letter-spacing: -1.75px; }
  body[data-page=race] .issue-row, body[data-page=race] .issue-row:nth-of-type(odd) { column-gap: 25px; row-gap: 11px; padding: 0 0 25px; margin: 0; border-radius: 0; background: none; }
  body[data-page=race] .issue-title { padding: 25px 70px 10px 0; border-top: 1px solid var(--tan); font-size: 20px; line-height: normal; max-width: none; }
  body[data-page=race] .cell { max-width: none; gap: 25px; padding: 15px 25px 25px; }
  body[data-page=race] .cell .quote { font-size: 14px; line-height: 18px; color: var(--muted); }
  body[data-page=race] .cell .pos { gap: 25px; }
  body[data-page=race] .cell .recs { gap: 14px; }
  body[data-page=race] .cell .rec-label { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0; text-transform: none; color: #000; }
  body[data-page=race] .cell .rec { gap: 8px; padding-left: 12px; border-left: 2px solid var(--tan); }
  body[data-page=race] .cell .rec-text { font-size: 14px; line-height: 18px; color: #000; }
  body[data-page=race] .cell .rec-verb { font-weight: 400; }
  body[data-page=race] .cell .rec-meta { font-size: 12px; line-height: 16px; color: var(--muted); }
  body[data-page=race] .cell-meta { font-size: 12px; line-height: 16px; }
  body[data-page=race] .cell-meta .link-btn, body[data-page=race] .cell-meta .more-link { font-size: 12px; line-height: 16px; color: var(--link); }

  /* Sticky candidate bar (Figma 325:7301): light-tan bar, then the white topic row under it. */
  .dpin-bar { background: var(--light-tan); border-bottom: 0; }
  .dpin-box { max-width: none; margin: 0; padding: 0 0 0 max(70px, calc((100% - 1360px) / 2)); }
  .dpin-cands { padding: 25px 0; }
  .dpin-inner { column-gap: 25px; padding: 0; }
  .dpin-cand { align-items: center; gap: 15.694px; width: var(--colw); padding: 11.5px 14.531px; }
  .dpin-photo { flex: 0 0 105.206px; width: 105.206px; height: 134px; border-radius: 100px; }
  .dpin-id { flex: 1 1 0; justify-content: center; align-items: flex-start; gap: 14.531px; }
  .dpin-name { gap: 6.88px; overflow: visible; text-overflow: clip; }
  .dpin-name .cn-first { font-size: 20.64px; font-weight: 300; line-height: 15px; letter-spacing: -.6192px; }
  .dpin-name .cn-last { font-size: 24.08px; font-weight: 500; line-height: 17px; letter-spacing: -.7224px; }
  .dpin-tag { display: flex; align-items: center; height: 17.438px; }
  body[data-page=race] .dpin-tag .ptag-unb { height: 100%; padding: 2.906px 10px; font-size: 10px; letter-spacing: .5px; }
  body[data-page=race] .dpin-tag .party-slot.ptag { font-size: 14px; line-height: 17px; }
  .dpin-topic { background: var(--card); }
  .dpin-topic .dpin-box { padding-top: 25px; padding-bottom: 25px; }
  .dpin-topic-t { font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 25px; letter-spacing: -1.25px; color: #000; }
}
@media (max-width: 767px) { .dpin-topic { display: none; } }

/* ---------- Desktop and tablet "Who's on your ballot" (owner 2026-10-08). Figma desktop 7:156 (1500px) and tablet 358:13080
   (1162px); content 70px in from each side. Values below are the desktop frame; the tablet frame's are in the scaling block
   at the end of this section's media queries. All inside min-width: 768px; the phone ballot (.mhead, #mballot) is untouched. ---------- */
@media (min-width: 768px) {
  /* Title row: title left; district number and ZIP right. Header bar is the race page's (rules above). */
  body[data-page=ballot] .page-head { max-width: 1500px; margin: 0 auto; padding: 63.42px 70px 0; gap: 40px; align-items: flex-start; justify-content: space-between; }
  body[data-page=ballot] .page-head--band { padding-bottom: 0; }
  body[data-page=ballot] .page-head .display { flex: 1 1 0; min-width: 0; max-width: none; font-size: 65px; line-height: 55px; letter-spacing: -3.25px; margin-top: -2px; }
  body[data-page=ballot] .page-head .place { width: 391px; flex: none; gap: 25px; height: 55px; justify-content: flex-start; align-items: flex-end; }
  body[data-page=ballot] .page-head .place-name { font-size: 25px; line-height: 18px; letter-spacing: -1.25px; }
  body[data-page=ballot] .page-head .place-zip { font-size: 16px; line-height: 22px; color: #000; margin-top: -4px; }
  body[data-page=ballot] .page-head .place-zip strong { font-weight: 400; color: #000; }
  body[data-page=ballot] .page-head .muted-link { font-size: 14px; font-weight: 400; color: #600554; text-decoration: underline; text-underline-position: from-font; }     /* "change", as on the phone */

  /* Divider, and (desktop only) the real race count. */
  body[data-page=ballot] .bl-intro { margin-top: 50px; padding-bottom: 38.6px; }
  body[data-page=ballot] .bl-intro .dk-rule { margin-top: 8.5px; }
  .bl-count { margin-top: 30px; font-family: var(--serif); font-size: 25px; line-height: 19px; letter-spacing: -1.25px; color: #000; }

  /* "Confirm your districts" is not in the Figma; it stays hidden (SHOW_SOE_CONFIRM in site.js). */
  body[data-page=ballot] .confirm-line { max-width: 1500px; padding-left: 70px; padding-right: 70px; margin-top: 30px; }
  body[data-page=ballot] .ballot { max-width: 1360px; width: calc(100% - 140px); margin: 50px auto 134px; gap: 65px; }

  /* Sections: tag, then the races. The State section starts with the slash divider. */
  body[data-page=ballot] .ballot-section { gap: 30px; }
  body[data-page=ballot] .ballot-section + .ballot-section::before { content: "////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////";
    display: block; align-self: stretch; height: 12px; margin-bottom: -3px; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 12px; letter-spacing: 2.4px; color: var(--muted); }
  body[data-page=ballot] .pill--lg { height: 37px; min-width: 0; padding: 10px 15px; border-radius: 5px; font-size: 14px; line-height: normal; font-weight: 500; color: #dfe8fa; }
  body[data-page=ballot] .ballot-races { gap: 10px; }

  /* Race row: no arrow. Title (with the Special Election tag or "Florida House"), then the photo strip. The whole row is the
     link (.race-link::after). Hover, and keyboard focus, turn the row into a white rounded card. */
  body[data-page=ballot] .race-row { display: flex; flex-direction: column; align-items: stretch; gap: 35px; padding: 25px 40px 25px 25px; border-radius: 15px; }
  body[data-page=ballot] .race-link:focus-visible { outline: none; }
  body[data-page=ballot] .race-row:has(:focus-visible) { background: var(--card); }
  @media (hover: hover) { body[data-page=ballot] .race-row:hover { background: var(--card); } }
  body[data-page=ballot] .race-title { gap: 25px; height: 19px; }
  body[data-page=ballot] .race-name { font-size: 25px; line-height: 19px; letter-spacing: -1.25px; color: #000; }
  body[data-page=ballot] .race-note { font-size: 18px; line-height: 13px; color: var(--muted); }
  body[data-page=ballot] .info-link--ballot { gap: 10px; font-size: 14px; font-weight: 500; line-height: 15px; color: var(--link); text-decoration: none; }
  body[data-page=ballot] .race-photos { gap: 20px; width: 100%; }
  body[data-page=ballot] .race-photos .thumb { flex: 0 1 129px; width: 129px; height: auto; aspect-ratio: 129 / 165; border-radius: 15px; }
}

/* The race count is desktop only: the tablet frame (358:13080) has no such line. Desktop starts at 1440px, the width the
   scaling below ends at. */
@media (min-width: 768px) and (max-width: 1439px) {
  body[data-page=ballot] .bl-count { display: none; }
}

/* ---------- Desktop scaling (owner 2026-10-08). Figma narrow reference: Race 338:9916 at 1162px; wide: 325:6865 / 333:8749 at
   1500px. --d runs 0 -> 278px as the window goes 1162px -> 1440px; every size below is "narrow value + --d * slope", so it
   is exactly the 1162px frame at 1162px and under (down to 768px the layout holds, the candidate area scrolls sideways) and
   exactly the wide value from 1440px up. Only min-width: 768px; the phone layer is untouched. ---------- */
@media (min-width: 768px) and (max-width: 1439px) {
  body { --d: clamp(0px, calc(100vw - 1162px), 278px); }
  /* Title, tag, district block (Figma 338:9921: title 50/60 on two lines, tag 15px above it). */
  body[data-page=race] .race-head { padding-top: calc(26px + var(--d) * 0.017985612); }
  body[data-page=race] .race-title-row { gap: calc(15px + var(--d) * 0.035971223); max-width: calc(542px + var(--d) * 5.244604317); }
  body[data-page=race] .race-title-row .display { font-size: calc(50px + var(--d) * 0.053956835); line-height: calc(60px + var(--d) * 0.041366906); letter-spacing: -.05em; margin: calc(-9.05px + var(--d) * 0.001978417) 0 calc(-12.5px + var(--d) * -0.001798561); }
  body[data-page=race] .race-head .place { width: calc(173px + var(--d) * 0.784172662); }
  body[data-page=race] .dk-intro { margin-top: calc(35px + var(--d) * 0.035971223); padding-bottom: calc(15px + var(--d) * 0.035971223); }
  body[data-page=race] .dk-meet { margin-top: calc(15px + var(--d) * 0.035971223); gap: calc(30px + var(--d) * 0.017985612); }
  /* Cards: 321px columns 20px apart at 1162 (Figma 340:10716), 420 / 25 wide. */
  body[data-page=race] .race-scroll { margin-top: calc(20px + var(--d) * 0.071942446); }
  body[data-page=race] .race-grid, body[data-page=race] .dpin-inner { --colw: calc(321px + var(--d) * 0.356115108); --gap: calc(20px + var(--d) * 0.017985612); }
  body[data-page=race] .race-grid { column-gap: var(--gap); }
  body[data-page=race] .dpin-inner { column-gap: var(--gap); }
  body[data-page=race] .issue-row, body[data-page=race] .issue-row:nth-of-type(odd) { column-gap: var(--gap); }
  body[data-page=race] .cand { padding: calc(20px + var(--d) * 0.017985612); }
  body[data-page=race] .cand-head { gap: calc(13px + var(--d) * 0.050359712); }
  body[data-page=race] .photo-col { flex-basis: calc(140px + var(--d) * 0.147482014); }
  body[data-page=race] .cand .photo { height: calc(172px + var(--d) * 0.213633094); aspect-ratio: auto; }
  body[data-page=race] .cand-name, body[data-page=race] .cand-name a { gap: calc(8.312px + var(--d) * 0.006071942); }
  body[data-page=race] .cand-name .cn-first { font-size: calc(24.935px + var(--d) * 0.018219424); line-height: .7333em; letter-spacing: -.03em; }
  body[data-page=race] .cand-name .cn-last { font-size: calc(24.935px + var(--d) * 0.036205036); line-height: .7143em; letter-spacing: -.03em; }
  body[data-page=race] .cand-body { margin-top: calc(20px + var(--d) * 0.017985612); padding-bottom: calc(20px + var(--d) * 0.017985612); }
  body[data-page=race] { --bio-lh: calc(16px + var(--d) * 0.007194245); }
  body[data-page=race] .cand .bio { font-size: calc(12px + var(--d) * 0.007194245); }
  body[data-page=race] .cand-party-l { font-size: calc(12px + var(--d) * 0.007194245); }
  body[data-page=race] .cand .ptag-unb { padding-left: calc(7px + var(--d) * 0.028776978); padding-right: calc(7px + var(--d) * 0.028776978); }
  body[data-page=race] .cand .pick-off { width: calc(35.068px + var(--d) * 0.017741007); height: calc(35.068px + var(--d) * 0.017741007); }
  body[data-page=race] .cand .pick-in { width: calc(127.2px + var(--d) * 0.064028777); height: calc(35.068px + var(--d) * 0.017741007); border-radius: 20px; font-size: calc(11.4px + var(--d) * 0.005755396); }
  /* Issue columns follow the cards (same column width, same side padding). */
  body[data-page=race] .cell { padding-left: calc(20px + var(--d) * 0.017985612); padding-right: calc(20px + var(--d) * 0.017985612); }
  body[data-page=race] .cell .quote, body[data-page=race] .cell .rec-text { font-size: calc(12px + var(--d) * 0.007194245); line-height: calc(16px + var(--d) * 0.007194245); }
  body[data-page=race] .cell .rec-label { font-size: calc(12px + var(--d) * 0.007194245); line-height: calc(16px + var(--d) * 0.007194245); }
  /* Arrows under the cards (Figma 341:11133: 24 x 14.7 at 1162). */
  body[data-page=race] .race-arrows, body[data-page=race] .race-listed { margin-top: calc(19px + var(--d) * 0.068345324); height: calc(14.667px + var(--d) * -0.008794964); }
  body[data-page=race] .race-arrow img { width: calc(24px + var(--d) * -0.014388489); height: calc(14.667px + var(--d) * -0.008794964); }
  /* The pinned bar keeps the cards' columns. */
  body[data-page=race] .dpin-cand { padding-left: calc(12px + var(--d) * 0.009104317); padding-right: calc(12px + var(--d) * 0.009104317); }
}
/* "read more" is lowercase and inline after the "…" at every width. How many lines the bio box holds: 10 from 1301px up (about
   the 500 characters it used to show), 6 at 1300px and below (about 250), at the scaled line height of each width. The Party row
   stacks at 1300px and below. */
@media (min-width: 768px) {
  body[data-page=race] .cand .read-more { display: inline; font: inherit; color: var(--link); }
}
@media (min-width: 768px) and (max-width: 1300px) {
  body[data-page=race] { --bio-lines: 6; }
  body[data-page=race] .dk-intro .dk-kicker { display: none; }
  body[data-page=race] .dk-intro .dk-rule { margin-top: 0; }
  body[data-page=race] .cand-foot { height: auto; align-items: flex-end; }
  body[data-page=race] .cand-party { flex-direction: column; align-items: flex-start; gap: 7px; height: auto; }
  body[data-page=race] .cand-party-l { line-height: 16px; color: #000; }
  body[data-page=race] .cand-foot .badge { align-self: stretch; height: auto; padding: 10px 20px; border-radius: 5px; }
}

/* A long name wraps instead of running out of its (narrower) pinned-bar column; the cards wrap at every width (above). */
@media (min-width: 768px) and (max-width: 1439px) {
  body[data-page=race] .dpin-name { white-space: normal; overflow-wrap: anywhere; }
  body[data-page=race] .dpin-id { min-width: 0; }
}

/* Ballot page, same scaling: the tablet frame 358:13080 at 1162px and under, the desktop frame 7:156 from 1440px up
   (value = tablet + --d * slope). Below 1162px the photos shrink to keep the strip on one line. */
@media (min-width: 768px) and (max-width: 1439px) {
  body[data-page=ballot] .page-head { padding-top: calc(30.92px + var(--d) * 0.116906475); }
  body[data-page=ballot] .page-head .display { font-size: calc(50px + var(--d) * 0.053956835); line-height: 55px; letter-spacing: -.05em; }
  body[data-page=ballot] .page-head .place { width: calc(173px + var(--d) * 0.784172662); }
  body[data-page=ballot] .bl-intro { margin-top: calc(25px + var(--d) * 0.089928058); padding-bottom: 15px; }
  body[data-page=ballot] .ballot { margin: calc(37.08px + var(--d) * 0.046474820) auto calc(93px + var(--d) * 0.147482014); gap: calc(40px + var(--d) * 0.089928058); }
  body[data-page=ballot] .ballot-section { gap: calc(40px - var(--d) * 0.035971223); }
  body[data-page=ballot] .ballot-section--state { gap: calc(35px - var(--d) * 0.017985612); }
  body[data-page=ballot] .race-photos .thumb { flex-basis: calc(117px + var(--d) * 0.043165468); width: calc(117px + var(--d) * 0.043165468); aspect-ratio: 117 / 150; }
}
/* Narrow windows: "All races" gives the middle title room. */
@media (min-width: 768px) and (max-width: 1000px) {
  .dk-back { width: auto; }
}

/* ---------- Privacy Policy (Figma file omAhPVNlqBqnltlXoHehTv: desktop 383:16765 at 1500, tablet 388:2356 at 1162, mobile 388:4084 at 390).
   Text boxes are trimmed to the cap height and baseline, as the frames are (text-box: browsers without it only add a few px of
   line space). Static page: no script of its own, nothing stored. ---------- */
body[data-page=privacy] { --light-tan: #ece9e5; }
body[data-page=privacy] :is(.pp-h1, .pp-h-md, .pp-h-sm, .pp-label, .pp-body, .pp-updated, .pp-tag-l, .pp-tag-r, .pp-slashes span,
  .pp-list li span, .pp-banner p, .pp-change, .pp-name, .pp-email) { text-box: trim-both cap alphabetic; }

/* header (frames 298:2307: row 25.92px high, 20px above, 15px below, light-tan line) */
@media (min-width: 768px) {
  body[data-page=privacy] .top { max-width: none; padding: 20px 70px 15px; align-items: center; border-bottom: 1px solid var(--light-tan); }
  body[data-page=privacy] .logo img { width: 222.912px; height: 25.92px; }
  body[data-page=privacy] .top .pocket-open { margin-top: 0; font-size: 16px; font-weight: 400; line-height: 22px; }
  body[data-page=privacy] .menu { padding-top: 0; }
}

.pp-title { display: flex; flex-direction: column; gap: 45px; padding: 45px 70px 25px; }
.pp-h1 { font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 60px; letter-spacing: -2.5px; color: var(--ink); }
.pp-tag { display: flex; flex-direction: column; gap: 10px; min-height: 27px; overflow: clip; }
.pp-tag-row { display: flex; align-items: flex-start; gap: 10px; }
.pp-tag-l, .pp-tag-r { font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: 11px; line-height: normal;
  letter-spacing: .55px; text-transform: uppercase; }
.pp-tag-l { flex: 1 1 0; min-width: 0; color: var(--muted); }
.pp-tag-r { flex: none; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pp-slashes { font-family: var(--sans); font-size: 12px; line-height: normal; letter-spacing: 2.4px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.pp-slashes span { display: block; }
.pp-t-tab, .pp-t-mob { display: none; }

.pp-intro { background: var(--light-tan); }
.pp-intro-in { display: flex; justify-content: center; gap: 100px; padding: 50px 70px; }
.pp-intro-l { flex: 0 0 539px; display: flex; flex-direction: column; gap: 35px; }
.pp-intro-r { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.pp-updated { font-size: 14px; line-height: 18px; color: var(--muted); }
.pp-lead { font-size: 18px; line-height: 25px; color: var(--ink); }
.pp-lead p + p { margin-top: 25px; }
.pp-lead p:first-child { text-box: trim-start cap alphabetic; }
.pp-lead p:last-child { text-box: trim-end cap alphabetic; }
.pp-h-md { font-family: var(--serif); font-weight: 400; font-size: 35px; line-height: normal; letter-spacing: -1.75px; color: var(--ink); }
.pp-h-sm { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: normal; letter-spacing: -1.25px; color: var(--ink); }

.pp-list { list-style: none; margin: 0; padding: 0; }
.pp-list li { display: flex; align-items: center; gap: 11px; padding: 5px 0; border-bottom: 1px solid var(--tan); font-size: 16px; line-height: 22px; color: var(--ink); }
.pp-list li img { flex: none; }
.pp-list li span { flex: 1 1 0; min-width: 0; }
.pp-list--sm li { font-size: 14px; line-height: 18px; }
.pp-list--sm li:first-child { min-height: 53px; }
@media (min-width: 1100px) {
  .pp-list li span, .pp-banner p { white-space: nowrap; }
  .pp-list--sm li:first-child span { white-space: normal; }
}

.pp-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 70px; background: #000; }
.pp-banner img { flex: none; }
.pp-banner p { font-size: 18px; line-height: 25px; color: var(--light-tan); }

.pp-main { width: calc(100% - 135px); max-width: 1288px; margin-left: 65px; padding: 70px 0 109px; display: flex; flex-direction: column; gap: 65px; }
.pp-zip { width: min(1029px, 100%); }
.pp-body { font-size: 14px; line-height: 18px; color: var(--ink); }
.pp-zip-lead { max-width: 910px; margin-top: 30px; }
.pp-label { margin-top: 25px; font-family: "Helvetica Neue", Helvetica, "TV Heros", Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: normal; color: var(--ink); }
.pp-zip .pp-list--sm { margin-top: 10px; }
.pp-clears { margin-top: 25px; }
.pp-rest { display: flex; flex-direction: column; gap: 65px; }
.pp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; }
.pp-card { display: flex; flex-direction: column; gap: 30px; min-height: 361px; padding: 25px; background: var(--card); border-radius: 15px; }
.pp-sign { display: flex; flex-direction: column; gap: 50px; width: min(910px, 100%); }
.pp-change { font-size: 16px; line-height: 22px; color: var(--ink); }
.pp-who { display: flex; flex-direction: column; gap: 20px; }
.pp-name { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: normal; letter-spacing: -1.25px; color: var(--ink); }
.pp-email { font-size: 14px; line-height: 18px; color: var(--ink); }

@media (min-width: 768px) and (max-width: 1439px) {
  .pp-t-desk { display: none; }
  .pp-t-tab { display: block; }
  .pp-title { gap: 30px; padding: 30px 70px 15px; }
  .pp-h1 { font-size: 35px; line-height: normal; letter-spacing: -1.75px; }
  .pp-intro-l { flex-basis: 314px; }
  .pp-main { padding: 60px 0 75px; }
  .pp-rest { gap: 25px; }
  .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(248px, auto) minmax(201px, auto); }
  .pp-card { min-height: 0; }
}
/* narrow tablets (the frame is 1162 wide): the two intro columns stack, as on the phone */
@media (min-width: 768px) and (max-width: 999px) {
  .pp-intro-in { flex-direction: column; gap: 50px; }
  .pp-intro-l { flex: none; width: 314px; max-width: 100%; }
}

@media (max-width: 767px) {
  .pp-t-desk { display: none; }
  .pp-t-mob { display: block; }
  .pp-title { gap: calc(25 * var(--u)); padding: calc(10 * var(--u)) 0 calc(25 * var(--u)); }       /* Figma 388:4084: the title sits 25 under the 75px nav and 25 above the page; the nav here is 90 tall (its last 15px is the stuck bar's tail), so 10 on top */
  .pp-tag { display: none; }
  .cf--page .cf-title { font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); }          /* Request a correction page title, 35px (owner, 2026-10-12) */                      /* the label and slash line under the old bar: the nav carries the label now, and no slash line (owner, 2026-10-12) */
  .pp-h1 { padding: 0 calc(20 * var(--u)); font-size: calc(35 * var(--u)); font-weight: 500; line-height: normal; letter-spacing: calc(-1.75 * var(--u)); }
  .pp-h-md, .pp-h-sm, .pp-name { font-weight: 500; }                                   /* the frame's Libre Baskerville Medium */
  .pp-intro { background: var(--bg); }                                                 /* the frame's intro is the page colour, not the grey band */
  .pp-list li { border-bottom-color: #d3b4d0; }                                        /* tan / alternate */
  .pp-intro-in { flex-direction: column; gap: calc(50 * var(--u)); padding: calc(35 * var(--u)) calc(25 * var(--u)) calc(50 * var(--u)); }
  .pp-intro-l { flex: none; width: calc(314 * var(--u)); max-width: 100%; }
  .pp-lead { font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
  .pp-lead p + p { margin-top: calc(22 * var(--u)); }
  .pp-h-md { font-size: calc(25 * var(--u)); letter-spacing: calc(-1.25 * var(--u)); }
  .pp-list li { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
  .pp-intro-r .pp-list li:nth-child(3) { min-height: calc(55 * var(--u)); }
  .pp-banner { justify-content: flex-start; padding: calc(20 * var(--u)) calc(25 * var(--u)); }
  .pp-banner p { flex: 1 1 0; min-width: 0; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
  .pp-main { width: auto; max-width: none; margin-left: 0; padding: calc(35 * var(--u)) calc(25 * var(--u)) calc(50 * var(--u)); gap: calc(35 * var(--u)); }
  .pp-label { margin-top: calc(25 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(22 * var(--u)); }
  .pp-zip .pp-list--sm { margin-top: calc(33 * var(--u)); }
  .pp-list--sm li { padding: calc(15 * var(--u)) 0; }
  .pp-list--sm li:first-child { min-height: 0; }
  .pp-rest { gap: calc(25 * var(--u)); }
  .pp-cards { grid-template-columns: minmax(0, 1fr); }
  .pp-card { gap: calc(20 * var(--u)); min-height: 0; }
}

/* ---------- Menu and footer (Figma file omAhPVNlqBqnltlXoHehTv: menu desktop 432:11496, tablet 432:11497, phone 413:7755, drawer over the page
   402:7185 / 404:7556; footer desktop 425:9897, tablet 425:9898, phone 425:9899). Same items, order and destinations on every device (nav.html);
   only the layout changes. Breakpoints as everywhere else: phone up to 767px, tablet 768px to 1439px, desktop from 1440px. Text is trimmed to
   cap height as in the frames (text-box). The menu is ONE element: a side drawer from 768px up (sideDrawer in site.js, like the Pocket Ballot
   drawer), the bottom sheet on a phone (.bs, bottomSheet in site.js). ---------- */
.nv-title, .nv-kicker, .nv-hatch, .nv-link, .nv-s, .nv-made-k, .nv-made-v, .ft-kicker, .ft-hatch, .ft-link, .ft-s { text-box: trim-both cap alphabetic; }
.nv-link, .ft-link { display: block; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-family: var(--sans); font-size: 25px;
  line-height: normal; font-weight: 400; color: var(--ink); text-align: inherit; text-decoration: none; white-space: nowrap; }
.nv-link:is(a, button), .ft-link:is(a, button) { cursor: pointer; }
.nv-s, .ft-s { display: block; font-size: 14px; line-height: 18px; color: var(--muted); text-decoration: none; white-space: nowrap; }
:is(.nv-link, .ft-link):is(a, button):hover, .nv-s:hover, .ft-s:hover { text-decoration: underline; }
.nv-dead { cursor: default; }          /* Resources: plain text, nothing to click */
.nv-made { display: flex; flex-direction: column; align-items: flex-start; gap: 11.161px; color: var(--muted); }
.nv-made-t { display: flex; flex-direction: column; align-items: inherit; gap: 11.161px; }
.nv-manatee { display: flex; align-items: center; width: 60px; height: 60px; flex: none; }
.nv-manatee img { width: 55.804px; height: 55.804px; object-fit: cover; }
.nv-made-k { font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: 10px; line-height: normal; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.nv-made-v { font-weight: 500; font-size: 18px; line-height: 25px; white-space: nowrap; }
.nv-hatch, .ft-hatch { display: block; overflow: hidden; font-family: var(--sans); font-size: 12px; line-height: normal; letter-spacing: 2.4px; white-space: nowrap; }
.nv-hatch::before, .ft-hatch::before { content: var(--hatch); }
.nv-kicker, .ft-kicker { font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: 11px; line-height: normal; letter-spacing: .55px; text-transform: uppercase; white-space: nowrap; }

/* the menu */
.nv-scrim, .nv { display: none; }
html.nv-open, html.nv-open body { overflow: hidden; }
.nv-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.nv-in { flex: 1 0 auto; display: flex; flex-direction: column; gap: 40px; padding: 40px; }
.nv-top { display: flex; flex-direction: column; gap: 30px; margin-bottom: 10px; }
.nv-hd { display: flex; flex-direction: column; gap: 30px; }
.nv-flag, .nv-flag img { display: block; }
.nv-title { font-family: var(--serif); font-weight: 400; font-size: 35px; line-height: normal; letter-spacing: -1.75px; color: #000; white-space: nowrap; }
.nv-tag { display: flex; flex-direction: column; gap: 10px; color: #000; }
.nv-big { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.nv-small { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 1440px) { .nv-made { padding: 16.741px 0; } }
@media (min-width: 768px) {
  .nv-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100; background: rgba(114, 110, 107, .9); opacity: 0; transition: opacity .25s ease; }
  .nv-scrim.is-open { opacity: 1; }
  .nv:not([hidden]) { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: min(354px, 100vw);
    background: var(--card); box-shadow: 0 24px 64px rgba(0, 0, 0, .25); outline: 0; transform: translateX(100%); transition: transform .25s ease; }
  .nv.is-open { transform: none; }
  .nv .bs-head { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nv-scrim { transition-duration: .15s !important; } }
.nv-made-m { display: none; }          /* the phone-only piece of the "Made with patriotism in" component */
@media (max-width: 767px) {
  .bs--n { height: calc(100vh - var(--sheet-top)); height: calc(100dvh - var(--sheet-top)); padding-bottom: calc(30 * var(--u)); }
  /* Menu (Figma 413:7755): 55px between the blocks, 65 from the title block to the links; the sheet does not scroll where it fits (844 tall:
     it does; a 667px phone has less room than the design, so there the sheet scrolls rather than cut the bottom links off). */
  .nv-in { align-items: center; gap: calc(55 * var(--u)); padding: 0; text-align: center; }
  .nv-top { width: 100%; align-items: center; margin-bottom: calc(10 * var(--u)); }
  .nv-hd { align-items: center; gap: calc(20 * var(--u)); }
  .nv-tag { width: 100%; align-items: center; }
  .nv-hatch { width: 100%; }
  .nv-big { flex: none; align-items: center; }
  .nv-made { order: 3; align-items: center; padding: calc(16.741 * var(--u)) 0; }
  .nv-made-k { font-size: calc(11 * var(--u)); letter-spacing: calc(.55 * var(--u)); }
  .nv-small { order: 4; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: calc(25 * var(--u)); padding: 0 calc(10 * var(--u)); }
  .nv-small > :nth-child(2) { order: 1; }          /* Request a correction, Contact, Privacy policy (the markup keeps Privacy policy first) */
  .nv-made--m > .nv-manatee, .nv-made--m > .nv-made-t { display: none; }
  .nv-made--m > .nv-made-m { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); }
  .nv-made-m .nv-made-k { font-weight: 400; }
  .nv-made-row { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); width: calc(207 * var(--u)); }
  .nv-made-row .nv-manatee { justify-content: center; margin-left: calc(-2 * var(--u)); }     /* Figma: "Orlando", 8px, the 60px box, 10px, "Florida" */
  .nv-made-row .nv-manatee img { width: calc(65 * var(--u)); height: calc(65 * var(--u)); flex: none; }
  .nv-made-row .nv-made-v { font-weight: 500; line-height: calc(22 * var(--u)); }
  body[data-page=where] .foot { display: none; }         /* no footer on the Split ZIP page on a phone (tablet and desktop keep it) */
}

/* the footer: not on Home, never inside the menu or a bottom sheet; always at least 300px (desktop) / 200px (tablet) / 100px (phone)
   below whatever is above it, and at the bottom of the window on a short page (body is a column, main grows) */
.foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 300px; }
.ft-top { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.ft-logo { width: 480px; height: 55.814px; }
.ft-logo-m { display: none; }
.ft-tag { display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 27px; color: var(--muted); }
.ft-kicker { text-align: center; }
.ft-big { display: flex; align-items: center; justify-content: center; gap: 65px; width: 100%; padding: 80px 0; }
.ft-band { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 107px; padding: 14px 37px 14px 51px; background: var(--light-tan); }
.ft-rest { display: flex; align-items: flex-start; gap: 30px; }
.ft-s { font-size: 16px; line-height: 22px; }
.ft-made { flex-direction: row; align-items: center; }
.ft-made .nv-made-t { align-items: flex-start; }
@media (min-width: 768px) and (max-width: 1439px) {
  .foot { margin-top: 200px; }
  .ft-big { padding: 75px 0; }
  .ft-link { font-size: 22px; }
  .ft-s { font-size: 14px; line-height: 18px; }
}
@media (max-width: 767px) {
  .foot { margin-top: calc(100 * var(--u)); }
  .ft-top { gap: calc(30 * var(--u)); }
  .ft-logo { display: none; }
  .ft-logo-m { display: flex; align-items: flex-start; gap: calc(7.372 * var(--u)); }      /* Figma 425:9573: the flag and the wordmark, 283.8px wide */
  .ft-big .nv-dead { display: none; }                                      /* no "Resources" in the phone footer for now (owner, 2026-10-12) */
  .ft-made .nv-made-k { font-weight: 400; }                                /* Figma 425:9590: Regular 11px over the Medium 18px line */
  body[data-page=ballot] .foot { margin-top: calc(41.5 * var(--u)); }                       /* Figma 141:5545: 41.4px under the State group */
  .ft-big { flex-direction: column; gap: calc(30 * var(--u)); padding: calc(30 * var(--u)) 0 0; }
  .ft-link { font-size: calc(22 * var(--u)); text-align: center; }
  .ft-band { display: grid; grid-template-columns: auto auto auto; justify-content: center; justify-items: center; align-items: start; gap: calc(32 * var(--u)) calc(25 * var(--u));
    height: auto; margin-top: calc(18 * var(--u)); padding: 0 0 calc(30 * var(--u)); background: none; }
  .ft-made { grid-column: 1 / -1; flex-direction: column; align-items: center; padding: calc(16.741 * var(--u)) 0; }
  .ft-made .nv-made-t { align-items: center; }
  .ft-rest { display: contents; }
  .ft-s { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); text-align: center; }
  .ft-made { grid-row: 1; }
  .ft-req { grid-column: 1; grid-row: 2; }
  .ft-rest .ft-s:nth-child(1) { grid-column: 2; grid-row: 2; }
  .ft-rest .ft-s:nth-child(2) { grid-column: 3; grid-row: 2; }
}

/* ---------- Phone palette (owner, 2026-10-11; Figma frames 129:5325, 447:14151, 413:7755, 129:5122, 378:16548, 104:3073, 104:3646, 163:7512, 155:7253, 472:22371) ----------
   The whole palette is phone only. Delete this block to go back to the old colours: tablet and desktop never read it. Black is #251e23,
   the old dark brown is #42303e, tan is #d9ced8, the page is #f4f1f4, and the Figma frames use the purple #600554 where the site used the link blue
   (links, "Find my ballot", "Reveal party"); the light purples are #eadee8 and #ebe5ec. White, the light tan #ece9e5, the red and the navy stay. */
@media (max-width: 767px) {
  :root { --bg: #f4f1f4; --ink: #251e23; --muted: #42303e; --tan: #d9ced8; --link: #600554; }
  /* the Unbiased View bar and pill (378:16548 / 104:3073), the Party Reveal Cancel button (163:7512) */
  .m-uv:not(.m-uv--d, .m-uv--p) { background: #eadee8; }
  .m-uv:not(.m-uv--d, .m-uv--p)[aria-checked=false] { background: #ebe5ec; }
  .us-cancel { background: #eadee8; }
  /* black that sits in rules the phone shares with tablet and desktop */
  .nv-title, .nv-tag { color: var(--ink); }
  .cf-seg-opt span { border-color: var(--ink); color: var(--ink); }
  .cf-seg-opt input:checked + span { background: var(--ink); color: #fff; }
  .cf-check, .pp-banner { background: var(--ink); }
}

/* ---------- Phone Home and Split ZIP (owner, 2026-10-11; Figma 502:26060 Home, 129:5122 Split ZIP) ----------
   Phone only: tablet and desktop never read the media block, and the three global rules below only hide phone pieces or leave the markup's
   box out of the layout. Colours are the frames' own: page #f4f1f4, black #251e23, dark purple #42303e, American purple #600554, light purple #eadee8,
   tan #d9ced8, white. Delete this block (and the "m-only" pieces in home.html / where.html) to go back. */
.bar-top, .bar-bottom { display: none; }                        /* phone Home only: the solid fixed element Safari 26 samples for the colour under its bottom bar */
.hero-panel { display: contents; }                    /* the phone's dark panel; on tablet and desktop its children sit in the hero as before */
.m-county { display: none; }
@media (max-width: 767px) {
  /* nav: no background, no slash line */
  body[data-page=home] .mtop-flag { justify-self: start; }
  .mtop-title { margin: 0; justify-self: center; font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: calc(11 * var(--u)); line-height: calc(8 * var(--u));
    letter-spacing: calc(.55 * var(--u)); text-transform: uppercase; white-space: nowrap; color: #42303e; }

  /* Home: nav 45px, the portrait 75px below it, headline, line, then the dark panel pinned to the bottom (372px) */
  /* No scroll: the page is exactly the dynamic viewport tall (100vh was the large viewport, taller than what Safari shows with its bars, and the content was 826px tall
     whatever the screen). main is a size container that fills what the nav leaves, so the hero scales to it (below) and the panel sits on the bottom edge. */
  html:has(body[data-page=home]) { overflow: hidden; overscroll-behavior: none; }
  body[data-page=home] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  body[data-page=home] .head-band { flex: none; }
  body[data-page=home] main { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; container-type: size; }
  /* Safari 26 ignores theme-color, gradients and pseudo-elements: it fills the area behind its bottom bar with the background-color of a real position:fixed element
     within 3px of the bottom edge (80%+ wide, 3px+ tall), else the html/body colour. This is that element, in the panel's bottom purple; it sits under the panel. */
  .bar-bottom { display: block; position: fixed; z-index: 0; left: 0; bottom: calc(-8px - var(--kb-over, 0px)); width: 100%; min-height: calc(12px + var(--kb-gap, 0px) + var(--kb-over, 0px)); background-color: var(--bottom-c); pointer-events: none; }
  /* Each edge has its own real fixed element, because Safari 26 samples those (80%+ wide, 3px+ tall, at the edge) and falls back to the body / html colour only when there is none:
     the TOP one is the page colour #f4f1f4 (behind the status bar and Dynamic Island, and the pull-down area), the BOTTOM one the panel purple #600554 (behind Safari's bottom bar, the keyboard
     and its AutoFill bar). The body and html stay the light page colour, so neither edge depends on the other: the earlier purple body (to fill the keyboard gap) turned the top purple too.
     Keyboard open (iPhone): the layout viewport keeps its size while the visual one shrinks and may pan, so site.js sets --kb-gap (layout bottom minus visual bottom) and --kb-top (visual top):
     the bottom bar grows up to the visual bottom edge, the top bar moves down to the visual top edge. Both are 0 when the keyboard is closed. */
  .bar-top { display: block; position: fixed; z-index: 19; left: 0; top: calc(-120px + var(--kb-top, 0px)); width: 100%; height: calc(120px + max(env(safe-area-inset-top, 0px), 12px));
    background-color: #f4f1f4; pointer-events: none; }
  html:has(body[data-page=home]) { background-color: #f4f1f4; background-image: none; }
  /* The portrait + headline + line block is centred between the nav and the panel: auto margin above the portrait and below the line share the free
     space equally; the 24px padding above and 24px panel margin below are the equal minimum when a short phone leaves no free space (owner, 2026-10-12). */
  body[data-page=home] .hero { flex: 1 0 auto; align-items: center; padding: calc(24 * var(--u)) 0 0; }
  body[data-page=home] .m-portrait { margin-top: auto; }
  .m-portrait { display: block; flex: none; width: calc(112 * var(--u)); height: calc(112 * var(--u)); overflow: hidden; border-radius: 50%; }
  .m-portrait img { width: calc(120 * var(--u)); height: calc(120 * var(--u)); margin: calc(-4 * var(--u)); max-width: none; }
  /* 310px wide: "for yourself" (~290px) fits, "Thinking for" (~335px) does not, so the headline breaks Thinking / for yourself / matters. at every phone width with no markup in the text */
  body[data-page=home] .hero .display { width: calc(310 * var(--u)); max-width: calc(100% - calc(40 * var(--u))); margin: calc(18 * var(--u)) 0 0; font-size: calc(55 * var(--u)); line-height: calc(50 * var(--u)); letter-spacing: calc(-2.75 * var(--u));
    color: #42303e; text-align: center; }
  .hero .lede.lede--d { display: none; }
  .m-sub { margin: calc(19 * var(--u)) 0 auto; font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: calc(11 * var(--u)); line-height: calc(8 * var(--u)); letter-spacing: calc(.55 * var(--u));
    text-transform: uppercase; text-align: center; color: #42303e; }
  /* Shrink to fit: the portrait + headline + line block is 307px at full size (112 + 18 + 150 + 19 + 8). --fit is the room main has for it once the panel (372px)
     and the 24px minimum gap above and below are taken out. A piece is its full size while --fit >= 307px, then shrinks in step (each is full size x --fit / 307). */
  @supports (height: 1cqh) {
    body[data-page=home] .hero { --fit: calc(100cqh - calc(420 * var(--u))); }
    body[data-page=home] .m-portrait { width: clamp(0px, calc(var(--fit) * .3648), calc(112 * var(--u))); height: clamp(0px, calc(var(--fit) * .3648), calc(112 * var(--u))); }
    body[data-page=home] .m-portrait img { width: 107.1429%; height: 107.1429%; margin: -3.5714%; }
    body[data-page=home] .hero .display { width: clamp(calc(60 * var(--u)), calc(var(--fit) * 1.0098), calc(310 * var(--u))); font-size: clamp(calc(7 * var(--u)), calc(var(--fit) * .17915), calc(55 * var(--u)));
      line-height: clamp(calc(6 * var(--u)), calc(var(--fit) * .16287), calc(50 * var(--u))); letter-spacing: -.05em; margin-top: clamp(0px, calc(var(--fit) * .0586), calc(18 * var(--u))); }
    body[data-page=home] .m-sub { margin-top: clamp(0px, calc(var(--fit) * .0619), calc(19 * var(--u))); font-size: clamp(calc(5 * var(--u)), calc(var(--fit) * .0358), calc(11 * var(--u)));
      line-height: clamp(0px, calc(var(--fit) * .0261), calc(8 * var(--u))); }
  }
  .hero-panel { display: flex; flex-direction: column; align-items: center; align-self: stretch; box-sizing: border-box; min-height: calc(372 * var(--u)); margin-top: calc(24 * var(--u));
    padding: calc(30 * var(--u)) calc(20 * var(--u)) max(calc(20 * var(--u)), env(safe-area-inset-bottom)); border-radius: calc(35 * var(--u)) calc(35 * var(--u)) 0 0;
    background: linear-gradient(180deg, #251e23 0%, #42303e 49.519%, #600554 100%); }
  body[data-page=home] .hero-panel { position: relative; top: calc(20 * var(--u)); }          /* 20px down from where it sat (owner, 2026-10-12): top moves it without touching the layout, so the headline block stays put and the page height stays the viewport; the bottom 20px sit past the screen edge and body clips them */
  /* The tag at the top of the panel (Figma 538:27776): 300 x 34, 10px corners, dark purple fill, 12px / 16px light text; 21px to the text below. 5px of margin puts it 35px under the panel top as in the frame. */
  .m-guide { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: calc(300 * var(--u)); max-width: 100%; height: calc(34 * var(--u)); margin: calc(5 * var(--u)) 0 calc(21 * var(--u)); padding: calc(10 * var(--u));
    border-radius: calc(10 * var(--u)); background: #42303e; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); white-space: nowrap; color: #f4f1f4; }
  .m-tag { margin: 0; font-weight: 500; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); text-align: center; white-space: nowrap; color: #eadee8; }
  .hero-panel .pill-form { box-sizing: border-box; width: 100%; max-width: calc(350 * var(--u)); height: calc(80 * var(--u)); margin: calc(20 * var(--u)) 0 0; padding: calc(4.93 * var(--u)) calc(4.93 * var(--u)) calc(4.93 * var(--u)) calc(24.648 * var(--u));
    border: 0; border-radius: calc(98.592 * var(--u)); background: #f4f1f4; }
  .hero-panel .pill-form input { font-size: max(16px, calc(16 * var(--u))); line-height: calc(22 * var(--u)); color: #600554; }         /* 16px, not Figma's 15.775px: iPhones zoom on focus below 16 */
  .hero-panel .pill-form input::placeholder { color: #600554; opacity: 1; }
  .hero .go { display: flex; align-items: center; justify-content: center; flex: 0 0 calc(70 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u)); border-radius: 50%; background: #600554; }
  .hero .go img { width: calc(29.5775 * var(--u)); height: calc(29.5775 * var(--u)); }
  .hero-panel .form-error, .hero-panel .return-note { max-width: calc(350 * var(--u)); margin: calc(15 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: #eadee8; }
  .hero .fine { display: none; }
  .m-avail { display: block; width: calc(350 * var(--u)); max-width: 100%; margin: calc(30 * var(--u)) 0 0; }
  .m-avail .m-hatch { width: 100%; margin: 0; color: rgba(234, 222, 232, .3); }
  .m-avail-t { display: block; margin-top: calc(20 * var(--u)); font-family: "IBM Plex Sans Devanagari", var(--sans); font-weight: 500; font-size: calc(10 * var(--u)); line-height: calc(7 * var(--u));
    letter-spacing: calc(.5 * var(--u)); text-transform: uppercase; text-align: center; color: #d9ced8; }

  /* Split ZIP: nav 55px, the county name and ZIP, title, copy, street field, buttons */
  body[data-page=where] .where { padding: calc(67 * var(--u)) calc(23.5 * var(--u)) max(calc(24 * var(--u)), env(safe-area-inset-bottom)); }
  .m-zipline:not([hidden]) { display: flex; flex-direction: column; align-items: center; color: #251e23; }
  .m-zipline > span { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 400; }
  .m-zipline > .m-county { display: block; font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 500; text-align: center; }
  .m-zipline > .m-county:empty { display: none; }
  body[data-page=where] .where .display { width: calc(343 * var(--u)); max-width: calc(100% + calc(8 * var(--u))); margin: calc(23.5 * var(--u)) 0 0; font-weight: 500; line-height: calc(43 * var(--u)); color: #251e23; }
  body[data-page=where] .where .lede { margin-top: calc(15.5 * var(--u)); color: #251e23; }
  body[data-page=where] .pill-form--wide { margin-top: calc(30.7 * var(--u)); }
  .street-label { margin-bottom: calc(-12 * var(--u)); font-weight: 700; color: #600554; }
  .pill-form--wide input { background: #fff; border: 2px solid #600554; color: #600554; line-height: calc(22 * var(--u)); }
  .pill-form--wide input::placeholder { color: #600554; opacity: 1; }
  .m-submit { background: #600554; line-height: calc(20 * var(--u)); }
  body[data-page=where] .or { margin: calc(28 * var(--u)) 0 calc(26 * var(--u)); color: #251e23; }
  body[data-page=where] .or::before, body[data-page=where] .or::after { background: #d9ced8; }
  body[data-page=where] #locate { border: 0; background: #eadee8; color: #600554; line-height: calc(20 * var(--u)); }
  body[data-page=where] .m-locate-note { margin-top: calc(11.3 * var(--u)); color: #42303e; }
}

/* Sizes that only a base (all-widths) rule or an HTML width / height attribute gave, on the phone size unit too (--u, set in the first phone block above). Found by comparing every
   element of the framed pages at 390 and 440px wide: images the stylesheet never sized, the footer's gaps and its kicker, the race page's notes, the Ballot's special-election popup. */
@media (max-width: 767px) {
  .mtop-back img { width: calc(35 * var(--u)); height: calc(35 * var(--u)); }
  .mtop-flag img { width: calc(36.7241 * var(--u)); height: calc(25 * var(--u)); }
  .mtop-menu img { width: calc(34 * var(--u)); height: calc(18 * var(--u)); }
  .m-chev { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .mb-special-btn img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .m-save img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .m-pick-on img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .dd-q-src img { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
  .dd-site img { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .dd-social img { zoom: var(--k); }                                  /* seven icons of seven sizes: their own sizes x the same ratio */
  .cg-arrow img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .ft-logo-m img:first-child { width: calc(42.6993 * var(--u)); height: calc(29.0676 * var(--u)); }
  .ft-logo-m img + img { width: calc(233.754 * var(--u)); height: calc(32.0372 * var(--u)); }
  .nv-manatee img { width: calc(55.804 * var(--u)); height: calc(55.804 * var(--u)); }
  .nv-made-row .nv-manatee img { width: calc(65 * var(--u)); height: calc(65 * var(--u)); }
  .foot { gap: calc(12 * var(--u)); }
  .ft-tag { gap: calc(10 * var(--u)); }
  .ft-kicker { font-size: calc(11 * var(--u)); letter-spacing: calc(.55 * var(--u)); }
  .ft-made, .nv-made-t { gap: calc(11.161 * var(--u)); }
  .fine--left { font-size: calc(14 * var(--u)); }
  .race-notes { gap: calc(12 * var(--u)); }
  .lede--left { margin-top: calc(24 * var(--u)); }
  .hero-panel .pill-form { gap: calc(10 * var(--u)); }
  .popup { gap: calc(22 * var(--u)); padding: calc(17 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)) calc(15 * var(--u)); top: calc(-17 * var(--u)); left: calc(-15 * var(--u)); border-radius: calc(20 * var(--u)); }
  .popup-head { gap: calc(10 * var(--u)); }
  .popup-head > img { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .popup-close img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .popup-title { font-size: calc(16 * var(--u)); }
  .popup-body { width: calc(261 * var(--u)); margin-left: calc(25 * var(--u)); font-size: calc(14 * var(--u)); gap: calc(17 * var(--u)); }
}

/* Request a correction, phone page (owner, 2026-10-14; Figma 298:2816 form, 263:1289 suggestions, 263:1438 thank-you): every size is the frame's number x --u (390 exact, x1.128 at 440). Borders stay 1.5px / 2px.
   Fields keep 16px type (iPhones zoom the page below it) where the frame has 14px. The nav is 90 tall here (its last 15px is the stuck bar's tail), so the title block starts 15px higher in its own padding. */
@media (max-width: 767px) {
  .cf--page .cf-head { gap: calc(25 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(25 * var(--u)); }
  .cf--page .cf-title { font-weight: 500; line-height: normal; text-box: trim-both cap alphabetic; }
  .cf--page .cf-lede { line-height: calc(18 * var(--u)); text-box: trim-both cap alphabetic; }
  .cf--page .cf-form { gap: calc(20 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)); }
  .cf--page .cf-row { gap: calc(20 * var(--u)); }
  .cf--page .cf-field { gap: calc(12 * var(--u)); }
  .cf--page fieldset.cf-field .cf-label { margin-bottom: calc(12 * var(--u)); }       /* a legend is not a flex item, so the 12px gap is its margin */
  .cf--page .cf-label { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 400; text-box: trim-both cap alphabetic; }
  .cf--page .cf-input { height: calc(60 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(15 * var(--u)); border-color: #d3b4d0; line-height: calc(18 * var(--u)); }
  .cf--page .cf-input:focus { border: 2px solid #600554; padding: 0 calc(15.5 * var(--u)); box-shadow: none; }
  .cf--page .cf-input[aria-invalid="true"] { border-color: #8a1c1c; }
  .cf--page .cf-textarea { height: calc(120 * var(--u)); min-height: calc(120 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)); }
  .cf--page .cf-textarea:focus { padding: calc(14.5 * var(--u)) calc(15.5 * var(--u)); }
  .cf--page .cf-select select { padding-right: calc(44 * var(--u)); }
  .cf--page .cf-chev { right: calc(17.5 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .cf--page .cf-hint { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); text-box: trim-both cap alphabetic; }
  .cf--page .cf-seg { gap: calc(10 * var(--u)); }
  .cf--page .cf-seg-opt { flex: 0 0 auto; }
  .cf--page .cf-seg-opt span { height: calc(60 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(100 * var(--u)); font-size: calc(14 * var(--u)); line-height: normal; border-color: #251e23; color: #251e23; text-box: trim-both cap alphabetic; }
  .cf--page .cf-seg-opt input:checked + span { border-width: 0; background: #251e23; color: #fff; }       /* the frame's black chip has no stroke, the other has 2px */
  .cf--page .cf-actions { gap: calc(20 * var(--u)); }
  .cf--page .cf-submit { height: calc(60 * var(--u)); padding: 0 calc(25 * var(--u)); border-radius: calc(100 * var(--u)); background: #600554; font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); text-box: trim-both cap alphabetic; }
  .cf--page .cf-note { font-size: calc(13 * var(--u)); text-box: trim-both cap alphabetic; }
  .cf--page .cf-list { left: calc(-2 * var(--u)); right: calc(-3 * var(--u)); top: calc(100% - 4 * var(--u)); border-color: #d3b4d0; border-radius: calc(15 * var(--u)); }
  .cf--page .cf-opt { gap: calc(12 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)); }
  .cf--page .cf-opt[aria-selected="true"] { background: #f4f1f4; }
  .cf--page .cf-opt-name { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 400; text-box: trim-both cap alphabetic; }
  .cf--page .cf-opt-race { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); text-box: trim-both cap alphabetic; }
  .cf--page .cf-sent { gap: calc(50 * var(--u)); padding: calc(40 * var(--u)) calc(20 * var(--u)); }
  .cf--page .cf-sent-in { gap: calc(25 * var(--u)); }
  .cf--page .cf-check { width: calc(72 * var(--u)); height: calc(72 * var(--u)); background: #251e23; }
  .cf--page .cf-check img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .cf--page .cf-sent-title { font-weight: 500; font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); text-box: trim-both cap alphabetic; }
  .cf--page .cf-sent-text { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); max-width: calc(304 * var(--u)); text-box: trim-both cap alphabetic; }
  .cf--page .cf-close { width: calc(194 * var(--u)); height: calc(60 * var(--u)); padding: 0 calc(25 * var(--u)); border-radius: calc(100 * var(--u)); background: #ece9e5; color: #600554; font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); text-box: trim-both cap alphabetic; }
}

/* Menu bottom sheet, phone (owner, 2026-10-14; Figma 413:7755): purple links, the small links stacked under them, the "Made with patriotism in" card last; every size is the frame's
   number x --u. The same elements are the side drawer from 768px up, which these rules do not touch. */
@media (max-width: 767px) {
  .bs--n .nv-in { align-items: center; gap: calc(55 * var(--u)); padding: 0 calc(30 * var(--u)); text-align: center; }
  .bs--n .nv-top { width: 100%; align-items: center; gap: calc(30 * var(--u)); margin-bottom: calc(-3 * var(--u)); }          /* 50 between the heading group and the links */
  .bs--n .nv-hd { align-items: center; gap: calc(20 * var(--u)); }
  .bs--n .nv-flag img { width: calc(36 * var(--u)); height: calc(25 * var(--u)); }
  .bs--n .nv-title { font-weight: 500; font-size: calc(35 * var(--u)); letter-spacing: calc(-1.75 * var(--u)); color: var(--ink); }
  .bs--n .nv-tag { align-items: center; gap: calc(10 * var(--u)); width: 100%; }
  .bs--n .nv-kicker { font-size: calc(11 * var(--u)); letter-spacing: calc(.55 * var(--u)); }
  .bs--n .nv-hatch { font-size: calc(12 * var(--u)); letter-spacing: calc(2.4 * var(--u)); opacity: .5; }
  .bs--n .nv-big { gap: calc(40 * var(--u)); }
  .bs--n .nv-link { font-size: calc(25 * var(--u)); color: #600554; }
  .bs--n .nv-small { order: 3; flex-direction: column; align-items: center; gap: calc(15 * var(--u)); padding: 0; }
  .bs--n .nv-s { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: #600554; }
  .bs--n .nv-made { order: 4; align-self: stretch; box-sizing: border-box; width: 100%; padding: calc(25 * var(--u)) 0 calc(20 * var(--u)); border-radius: calc(25 * var(--u)); background: #ede4eb; }
  .bs--n .nv-made-m { gap: calc(10 * var(--u)); }
  .bs--n .nv-made-k { font-size: calc(11 * var(--u)); letter-spacing: calc(.55 * var(--u)); }
  .bs--n .nv-made-v { font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
  .bs--n .nv-made-row { gap: calc(10 * var(--u)); width: calc(207 * var(--u)); }
  .bs--n .nv-manatee { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
}

/* Position (Issues View) sheet, phone (owner, 2026-10-14; Figma 98:2805): text boxes cap-trimmed as the frame draws them, the divider and grabber in tan / alternate, round photos. Sizes are the frame's number x --u. */
@media (max-width: 767px) {
  .sheet-grab span { background: #d3b4d0; }
  .sheet-nav { border-bottom-color: #d3b4d0; }
  .sheet-nav .m-hatch { margin: calc(-1.5 * var(--u)) 0; }
  .sheet-count, .sheet-title, .sc-name > *, .sq-text, .sq-meta { text-box: trim-both cap alphabetic; }
  .sc-photo { border-radius: calc(50 * var(--u)); }
  .sc-name .nm-l { line-height: calc(20 * var(--u)); }
}

/* Candidate page, phone (owner, 2026-10-14; Figma 155:7253): the page reads like the Candidate Details sheet without its chrome: "Running for" head with the Unbiased View switch, the arched photo beside
   the name, the bio, the campaign-site card and the social row, then the position cards. Every size is the frame's number x --u. The server markup is the same one tablet and desktop use. */
@media (max-width: 767px) {
  body[data-page=cand] .head-band, body[data-page=cand] .head-band--white { background: none; }
  body[data-page=cand] .reveal-bar { display: none; }
  .cp-run { margin: calc(15 * var(--u)) calc(10 * var(--u)) 0; border-bottom-color: #d3b4d0; }
  body[data-page=cand] .cand--page { display: flex; flex-direction: column; gap: calc(25 * var(--u)); margin: 0; padding: 0 calc(20 * var(--u)); }
  body[data-page=cand] .cand-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(10 * var(--u)); align-items: center; min-height: 0; padding: calc(20 * var(--u)) 0 0; }
  body[data-page=cand] .photo-col { justify-self: center; }
  body[data-page=cand] .photo { display: flex; align-items: center; justify-content: center; width: calc(143.163 * var(--u)); height: calc(171 * var(--u)); aspect-ratio: auto; overflow: hidden; border-radius: calc(50 * var(--u)); background: #d3b4d0; }
  body[data-page=cand] .photo img { width: 100%; height: 100%; object-fit: cover; }
  body[data-page=cand] .cand-id { gap: calc(10 * var(--u)); min-width: 0; align-items: flex-start; }
  body[data-page=cand] .party-slot { width: auto; margin: 0 0 calc(-4 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; line-height: normal; color: var(--ink); }
  body[data-page=cand] .cand-name { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin: 0; font-family: var(--sans); font-weight: 400; font-size: calc(22 * var(--u)); line-height: normal; letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
  body[data-page=cand] .cand-name .nm-l { font-size: calc(30 * var(--u)); font-weight: 500; letter-spacing: calc(-.9 * var(--u)); }
  body[data-page=cand] .nm-f:empty, body[data-page=cand] .nm-l:empty { display: none; }
  body[data-page=cand] .cand-actions { display: contents; }
  body[data-page=cand] .cand-actions .badge { order: 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: calc(12 * var(--u)); font-weight: 500; line-height: normal; color: var(--muted); }
  body[data-page=cand] .cand-actions .m-only { order: 2; }
  body[data-page=cand] .cand-body { gap: calc(25 * var(--u)); margin: 0; }
  body[data-page=cand] .bio { max-width: none; margin: 0; font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
  body[data-page=cand] .cand-links { gap: calc(25 * var(--u)); }
  body[data-page=cand] .site-link { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); box-sizing: border-box; width: 100%; height: calc(60 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(15 * var(--u)); background: var(--card); font-size: calc(15 * var(--u)); font-weight: 500; line-height: normal; color: #600554; text-decoration: none; }
  body[data-page=cand] .sl-ext { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  body[data-page=cand] .cand-links .social { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); margin: 0; }
  body[data-page=cand] .cand-section { margin: calc(25 * var(--u)) 0 0; padding: 0 calc(20 * var(--u)); }
  body[data-page=cand] .cand-section:first-of-type { margin-top: calc(25 * var(--u)); }
  body[data-page=cand] .cp-issues-top { display: flex; flex-direction: column; gap: calc(20 * var(--u)); margin-bottom: calc(25 * var(--u)); }
  body[data-page=cand] .section-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: calc(25 * var(--u)); line-height: normal; letter-spacing: calc(-1.25 * var(--u)); color: var(--ink); }
  body[data-page=cand] .issue-block { margin: 0 0 calc(25 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--card); }
  body[data-page=cand] .issue-title { margin: 0 0 calc(5 * var(--u)); font-family: var(--sans); font-size: calc(16 * var(--u)); font-weight: 700; line-height: normal; color: var(--ink); }
  body[data-page=cand] .claim { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); margin: 0; padding: calc(15 * var(--u)) 0; }
  body[data-page=cand] .claim + .claim { border-top: 1px solid #d3b4d0; }
  body[data-page=cand] .quote--full { margin: 0; font-family: var(--sans); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ink); }
  body[data-page=cand] .cell-meta--left { margin: 0; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--muted); }
  body[data-page=cand] .recs { display: flex; flex-direction: column; gap: calc(14 * var(--u)); margin: 0; padding: calc(15 * var(--u)) 0; border-top: 1px solid #d3b4d0; }
  body[data-page=cand] .m-uv--d .m-uv-sw { box-sizing: border-box; border: .5px solid rgba(217, 206, 216, .5); background: #600554; }          /* the frame's switch is american purple (as on the race page) */
  body[data-page=cand] .m-uv--d[aria-checked=false] .m-uv-sw { background: #d3b4d0; }
  body[data-page=cand] .m-uv--d .m-uv-thumb { top: calc(1.76 * var(--u)); left: calc(24.34 * var(--u)); }
  body[data-page=cand] .m-uv--d[aria-checked=false] .m-uv-thumb { left: calc(1.76 * var(--u)); }
  body[data-page=cand] .cell-meta--left .pop-wrap { flex-basis: 100%; }                 /* the sources link on its own line, as the frame's "Source" */
  body[data-page=cand] .cell-meta--left .link-btn { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #600554; }
  body[data-page=cand] .rec-label { margin: 0; font-size: calc(11 * var(--u)); font-weight: 500; letter-spacing: calc(.66 * var(--u)); text-transform: uppercase; color: var(--muted); }
  body[data-page=cand] .show-all { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: calc(40 * var(--u)); margin: 0; padding: 0 calc(15 * var(--u)); border: 2px solid #600554; border-radius: calc(100 * var(--u)); background: none; font: inherit; font-size: calc(14 * var(--u)); font-weight: 500; color: #600554; cursor: pointer; }
}

/* ---------- Save-pick notification (owner, 2026-10-14; Figma 592:35072, 348 x 76 at 390). One card on every device; on a phone every size is the frame's number x --u (1px elsewhere).
   Fixed at the bottom of the screen, centred, over the safe-area inset (above Safari's bottom bar), over every sheet, scrim and drawer (those stop at z-index 101).
   It slides up, stays 5 seconds (site.js), and slides out. The photo is round, the name bold American purple, "View" a tan pill. ---------- */
.pt { --pu: var(--u, 1px); position: fixed; z-index: 200; left: 50%; bottom: calc(20 * var(--pu) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; width: calc(348 * var(--pu)); max-width: calc(100vw - 20px);
  display: flex; align-items: center; gap: calc(11 * var(--pu)); padding: calc(10 * var(--pu)) calc(15 * var(--pu)) calc(10 * var(--pu)) calc(10 * var(--pu));
  border: calc(2 * var(--pu)) solid #fff; border-radius: calc(100 * var(--pu)); background: rgba(244, 241, 244, .95); box-shadow: 0 0 calc(20 * var(--pu)) rgba(96, 5, 84, .35);
  transform: translate(-50%, calc(100% + 80px + env(safe-area-inset-bottom, 0px))); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.pt[hidden] { display: none; }
.pt-root .sr-only { position: fixed; }      /* not in the page flow: an absolute one at the bottom of the body made the Home page 1px taller than the screen */
.pt.is-on { transform: translate(-50%, 0); opacity: 1; }
.pt-photo { flex: none; width: calc(55 * var(--pu)); height: calc(56 * var(--pu)); overflow: hidden; border-radius: calc(100 * var(--pu)); background: #d9ced8; }
.pt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(7 * var(--pu)); font-size: calc(14 * var(--pu)); line-height: calc(18 * var(--pu)); color: #251e23; }
.pt-name, .pt-msg { display: block; text-box: trim-both cap alphabetic; }
.pt-name { font-weight: 700; color: #600554; }
.pt-view { flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: calc(66 * var(--pu)); height: calc(33 * var(--pu)); margin: 0; padding: calc(11 * var(--pu)) calc(23 * var(--pu)) calc(12 * var(--pu));
  border: 0; border-radius: calc(100 * var(--pu)); background: #d9ced8; font: inherit; font-size: calc(14 * var(--pu)); font-weight: 500; line-height: normal; color: #600554; text-box: trim-both cap alphabetic; cursor: pointer; }
.pt-view:focus-visible { outline: 2px solid #600554; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pt { transition: none; } }
@media print { .pt-root { display: none; } }

/* ---------- Neutral summaries in issue cells (owner 2026-10-15; normalize/summaries.py) ----------
   A race whose every candidate has a summary shows one paragraph per cell, in the quote's own text style (.quote), the source tag in
   the small text style under it, and a purple "View full positions" link. Same wording and purple for every candidate, every device. */
.sum-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sum-tag { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.sum-link { font-size: 12px; line-height: 16px; color: #600554; text-decoration: none; }
.sum-link:hover { text-decoration: underline; }
.sum-link:focus-visible { outline: 2px solid #600554; outline-offset: 2px; }
@media (max-width: 767px) {
  .sum-foot { gap: calc(6 * var(--u)); }
  .cell .sum-tag, .cell .sum-link { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); text-box: trim-both cap alphabetic; }
}
/* A party word in a summary is the bios' black bar (.redact, same colour, same button, same reveal); in a cell it is sized in em so it keeps
   one width at every font size (phone: the cell font follows the size unit) and never makes the line taller. */
.sum-pos .redact { width: 5.5em; height: 1.1em; vertical-align: -.2em; }