/* BallotInBrief styles. Tokens come from the Harrison Phelps design system
   (Claude Design handoff, _ds/tokens). Phone first; desktop layout at 1024px+. */

@font-face{font-family:"Unbounded";src:url("/fonts/Unbounded-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("/fonts/Onest-Variable.woff2") format("woff2-variations"),url("/fonts/Onest-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/SpaceMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/SpaceMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* BallotInBrief design system (design-system/tokens.json): two riso inks on paper. Paper theme. */
  --paper:#f7f3ea; --paper-raised:#fffdf7; --pink-tint:#fde3ec; --ink:#1b1f3b; --ink-muted:#4f5370; --line:#e2d9cc;
  --riso-pink:#ff8fbd; --pink-ink:#ff5fa2; --on-pink:#1b1f3b; --riso-blue:#2b49c9; --on-blue:#ffffff; --focus:#2b49c9;
  --highlight:#ffd84a; --alert:#a8231a; --halftone:#1b1f3b2e; --blue-tint:#e3e8ff;
  --shadow-hard:4px 4px 0 #1b1f3b; --shadow-press:1px 1px 0 #1b1f3b;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --border-bold:2px;
  --font-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --font-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,monospace;
  /* Position chips: green Yes and red No toned to the riso palette (Harrison, Oct 17); every chip keeps its word. */
  --yes-bg:#cdeedb; --yes-bd:var(--ink); --no-bg:#ffd3c7; --no-bd:var(--ink); --neutral-bg:#fff1b3; --neutral-bd:var(--ink);
  --endorse-bg:var(--blue-tint); --none-bg:transparent; --none-bd:transparent; --unchecked-bg:transparent; --unchecked-bd:var(--ink-muted);
  /* Older names used across this stylesheet, mapped to the design system. */
  --hp-navy:var(--ink); --hp-rust:var(--riso-blue); --hp-black:var(--ink); --hp-paper:var(--paper); --hp-steel:var(--ink-muted); --hp-lilac:var(--riso-pink); --hp-white:var(--paper-raised);
  --neutral-300:var(--line); --neutral-500:var(--ink-muted); --neutral-600:var(--ink-muted); --neutral-700:var(--ink-muted); --neutral-800:var(--ink); --neutral-900:var(--ink);
  --navy-a08:var(--pink-tint); --navy-a14:var(--line); --navy-a24:var(--ink);
  --rust-a10:var(--pink-tint); --rust-a40:var(--riso-blue);
  --link:var(--riso-blue);
  --shadow-float:var(--shadow-hard);
  --ease:cubic-bezier(.2,.6,.2,1);
  --hw:104px; --cw:96px; --region-w:100vw;
  color-scheme:light;
}
/* Night print: follows the device setting unless the person picked Paper with the switch. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15172b; --paper-raised:#1e2140; --pink-tint:#3b2142; --ink:#f7f3ea; --ink-muted:#b9bbd0; --line:#363a60;
    --riso-pink:#ff8fbd; --pink-ink:#ff7ab3; --on-pink:#1b1f3b; --riso-blue:#9db0ff; --on-blue:#15172b; --focus:#9db0ff;
    --alert:#ff9a8f; --halftone:#1b1f3b38; --blue-tint:#262d5c;
    --shadow-hard:4px 4px 0 #ff8fbd; --shadow-press:1px 1px 0 #ff8fbd;
    --yes-bg:#1f4a33; --no-bg:#5a2a24; --neutral-bg:#4a4020;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15172b; --paper-raised:#1e2140; --pink-tint:#3b2142; --ink:#f7f3ea; --ink-muted:#b9bbd0; --line:#363a60;
  --riso-pink:#ff8fbd; --pink-ink:#ff7ab3; --on-pink:#1b1f3b; --riso-blue:#9db0ff; --on-blue:#15172b; --focus:#9db0ff;
  --alert:#ff9a8f; --halftone:#1b1f3b38; --blue-tint:#262d5c;
  --shadow-hard:4px 4px 0 #ff8fbd; --shadow-press:1px 1px 0 #ff8fbd;
  --yes-bg:#1f4a33; --no-bg:#5a2a24; --neutral-bg:#4a4020;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper-raised);color:var(--hp-navy);font:400 16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{margin:0}
p{margin:0}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--rust-a40);text-underline-offset:3px}
a:hover{color:var(--hp-navy);text-decoration-color:var(--hp-lilac)}
:focus-visible{outline:2px solid var(--hp-rust);outline-offset:2px}
button{font:inherit;color:inherit}
.mono{font-family:var(--font-mono);letter-spacing:.1em}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:var(--hp-navy);color:var(--on-blue);padding:10px 14px;border-radius:4px}
.skip:focus{top:8px;color:var(--on-blue)}
[hidden]{display:none!important}
.desk-only{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Buttons (DS Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-family:var(--font-body);font-weight:600;letter-spacing:.01em;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color 120ms var(--ease),color 120ms var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn-sm{font-size:14px;padding:7px 16px}
.btn-md{font-size:16px;padding:10px 20px}
.btn-lg{font-size:19px;padding:13px 28px;min-height:52px}
.btn-block{width:100%}
.btn-primary{background:var(--hp-navy);color:var(--hp-paper)}
.btn-primary:hover{background:var(--neutral-800);color:var(--hp-paper)}
.btn-accent{background:var(--hp-rust);color:var(--on-blue)}
.btn-accent:hover{background:var(--riso-blue);color:var(--on-blue)}
.btn-secondary{background:transparent;color:var(--hp-navy);border-color:var(--hp-navy)}
.btn-secondary:hover{background:var(--navy-a08);color:var(--hp-navy)}
.btn-ghost{background:transparent;color:var(--hp-navy)}
.btn-ghost:hover{background:var(--navy-a08)}
.link-btn{min-height:44px;padding:0;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--link);text-decoration:underline;text-decoration-color:var(--rust-a40);text-underline-offset:3px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:var(--navy-a08);color:var(--hp-navy);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sheet-close svg{transform:rotate(45deg)}

/* ---------- Header, banner, footer ---------- */
.site-header{height:64px;flex:0 0 auto;border-bottom:1px solid var(--navy-a14);background:var(--paper-raised);position:relative;z-index:6}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;max-width:1200px;margin:0 auto}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--hp-navy);text-decoration:none;min-height:44px;display:flex;align-items:center}
.wordmark:hover{color:var(--hp-navy)}
.header-nav{display:flex;align-items:center;gap:2px}
.nav-link{font-size:16px;font-weight:600;color:var(--hp-navy);text-decoration:none;min-height:44px;display:flex;align-items:center}
.proto-banner{flex:0 0 auto;margin:0;padding:6px 16px;background:var(--pink-tint);border-bottom:1px solid var(--ink);text-align:center;font-size:12px;font-weight:700;color:var(--hp-navy)}
.site-footer{background:var(--hp-paper);border-top:1px solid var(--navy-a14)}
.footer-inner{padding:20px 16px;display:flex;flex-direction:column;gap:6px;max-width:1200px;margin:0 auto}
.indep{font-size:15px;line-height:1.4;font-weight:600;color:var(--hp-navy)}
.footer-nav{display:flex;flex-wrap:wrap;column-gap:20px}
.footer-nav a{min-height:44px;display:flex;align-items:center;font-size:15px}

/* ---------- Eyebrow (DS Eyebrow, size m, with lilac rule) ---------- */
.eyebrow{font-family:var(--font-mono);font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--hp-navy);line-height:1.4}
.eyebrow-rule{display:block;height:2px;width:56px;background:var(--hp-lilac);margin-top:12px}

/* ---------- Fields (DS Input) ---------- */
.field{display:block}
.field-label{display:block;font-size:11px;line-height:1.4;text-transform:uppercase;color:var(--neutral-600);margin-bottom:8px}
.field input,.field textarea{width:100%;font:400 16px/1.4 var(--font-body);color:var(--hp-navy);background:var(--paper-raised);padding:11px 14px;border:1px solid var(--navy-a14);border-radius:4px;outline:none;transition:border-color 120ms var(--ease)}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--hp-navy)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--hp-rust);outline-offset:2px}
.field-hint{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:var(--neutral-500)}
.proto-hint{color:var(--neutral-700)}

/* ---------- Home ---------- */
.page-home{min-height:100dvh;display:flex;flex-direction:column}
.home{position:relative;flex:1 1 auto;overflow:hidden;padding:40px 20px 32px}
.home-dot-big{position:absolute;width:300px;height:300px;border-radius:50%;background:var(--hp-paper);right:-150px;top:-60px}
.home-dot-small{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--hp-lilac);right:24px;top:14px}
.home-inner{position:relative;display:flex;flex-direction:column;gap:32px;max-width:560px}
.home-head{display:flex;flex-direction:column;gap:16px}
.home h1{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1.08;letter-spacing:-.02em;text-wrap:pretty}
.home-form{display:flex;flex-direction:column;gap:16px}

/* ---------- Ballot: phone app shell ---------- */
.page-ballot{min-height:100dvh;display:flex;flex-direction:column}
.ballot{position:relative;flex:1 1 auto;display:flex;flex-direction:column;padding-bottom:96px}
.ballot-top{flex:0 0 auto;padding:10px 16px 2px;display:flex;flex-direction:column;gap:3px}
.ballot-top h1{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.districts{font-size:13px;line-height:1.4;color:var(--neutral-700)}
.example-note{font-size:12.5px;line-height:1.4;color:var(--neutral-600)}
.example-note a{font-weight:600;white-space:nowrap;display:inline-block;padding:6px 0;margin:-6px 0}
.ballot-grid{flex:1 1 auto;display:flex}
.ballot-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.table-tools{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 16px 8px}
.table-tools .eyebrow-rule{margin-top:6px}
.view-toggle{display:flex;padding:3px;gap:2px;border:1px solid var(--navy-a24);border-radius:999px}
.view-toggle button{min-height:40px;padding:0 12px;border:0;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;background:transparent;color:var(--hp-navy)}
.view-toggle button[aria-pressed="true"]{background:var(--hp-navy);color:var(--on-blue)}
.sort-status{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 16px 4px;font-size:14px;line-height:1.35;color:var(--neutral-800)}
.sort-status .link-btn{font-size:14px;flex:0 0 auto}
.table-region{overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--hp-navy);overscroll-behavior-x:contain}
.table-region:focus-visible{outline-offset:-2px}
.compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--navy-a14)}
.site-footer.desk-footer{margin-bottom:0}

/* ---------- Ballot table ---------- */
.ballot-table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%}
.ballot-table.has-picks{width:auto}
.ballot-table .col-measure{width:var(--hw)}
.ballot-table .col-pos{width:var(--cw)}
.ballot-table .col-choice{width:var(--chw,128px)}
.ballot-table:not(.has-picks) .col-measure{width:auto}
.ballot-table.has-choice:not(.has-picks){width:100%}
.ballot-table th{font-weight:inherit;text-align:left}
.ballot-table thead th{position:sticky;top:0;z-index:3;background:var(--hp-paper);border-bottom:1px solid var(--navy-a24);box-shadow:0 4px 8px -6px rgba(27,31,59,.2);padding:0;vertical-align:bottom}
.ballot-table thead th.th-measure{left:0;z-index:4;border-right:1px solid var(--navy-a24)}
.sort-btn{width:100%;min-height:64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;padding:8px;border:0;background:transparent;cursor:pointer;color:var(--hp-navy);text-align:left}
.th-measure .sort-btn{padding-left:12px}
.sort-btn.is-active{background:var(--blue-tint)}
.sort-name{font-size:13px;line-height:1.25;font-weight:700}
.sort-name.mono{font-size:11px;text-transform:uppercase}
.sort-ind{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em}
.section-row th{padding:14px 0 6px;background:var(--paper-raised);border-bottom:1px solid var(--navy-a14)}
.section-label{position:sticky;left:12px;display:inline-block;font-size:11px;text-transform:uppercase;color:var(--neutral-700)}
.m-row th,.m-row td{border-bottom:1px solid var(--navy-a14);background:var(--paper-raised)}
.m-row.is-open th,.m-row.is-open td{background:var(--hp-paper)}
.measure-cell{position:sticky;left:0;z-index:1;padding:0}
.has-picks .measure-cell{border-right:1px solid var(--navy-a24)}
.m-toggle,.m-link{width:100%;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:10px 6px 10px 12px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--hp-navy);text-decoration:none}
.m-link{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.m-head{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-tag{font-size:13px;font-weight:700;letter-spacing:.04em}
.m-added{font-size:12px;line-height:1.2;color:var(--neutral-700)}
.m-title-sm{font-size:14px;line-height:1.35;font-weight:600;color:var(--hp-navy)}
.m-toggle svg{flex:0 0 auto}
.pos-td{padding:6px 4px;vertical-align:middle;border-bottom:1px solid var(--navy-a14)}
.pos{min-height:52px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;text-decoration:none;color:var(--hp-navy);text-align:center;border:1px solid transparent}
a.pos:hover{color:var(--hp-navy);filter:brightness(.97)}
.pos-v{font-size:15px;line-height:1.2;font-weight:700}
.pos-d{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--hp-steel)}
.pos-yes{background:var(--yes-bg);border-color:var(--yes-bd)}
.pos-no{background:var(--no-bg);border-color:var(--no-bd)}
.pos-neutral{background:var(--neutral-bg);border-color:var(--neutral-bd)}
.pos-none{background:var(--none-bg);border-color:var(--none-bd)}
.pos-unchecked{background:var(--unchecked-bg);border:1px dashed var(--unchecked-bd)}
.pos-empty{background:transparent;border:1px dashed var(--ink-muted)}
.expand-row td{padding:0;border-bottom:1px solid var(--navy-a14);background:var(--hp-paper)}
.expand-panel{position:sticky;left:0;width:var(--region-w);padding:2px 16px 18px;display:flex;flex-direction:column;gap:8px}
.expand-title{align-self:stretch;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:44px;padding:4px 0;text-decoration:none}
.expand-title span{font-size:17px;line-height:1.35;font-weight:700;color:var(--hp-navy);text-decoration:underline;text-decoration-color:var(--hp-lilac);text-decoration-thickness:2px;text-underline-offset:4px}
.expand-title svg{flex:0 0 auto;margin-top:2px;color:var(--hp-rust)}
.expand-sum{font-size:15px;line-height:1.5;color:var(--neutral-800)}
.expand-signers,.m-signers{font-size:14px;line-height:1.55;color:var(--neutral-700)}
.expand-signers strong,.m-signers strong{font-weight:600;color:var(--hp-navy)}
.expand-links{display:flex;flex-wrap:wrap;column-gap:20px}
.not-on-ballot{align-self:flex-start;font-size:11px;text-transform:uppercase;padding:4px 8px;border:1px solid var(--navy-a24);border-radius:4px;background:var(--paper-raised)}
.add-row th,.add-row td{background:var(--paper);border-bottom:1px solid var(--navy-a14)}
.add-btn{width:100%;min-height:64px;display:flex;align-items:center;gap:8px;padding:10px 8px 10px 12px;border:0;background:transparent;cursor:pointer;color:var(--neutral-700);text-align:left;font-size:14px;line-height:1.3;font-weight:600}
.add-circle{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1.5px dashed var(--ink-muted);display:flex;align-items:center;justify-content:center}

/* ---------- Picker (DS Checkbox inside categories) ---------- */
.cat-btn{width:100%;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--paper-raised);border:0;border-bottom:1px solid var(--navy-a14);text-align:left;cursor:pointer;color:var(--hp-navy)}
.cat-text{display:flex;flex-direction:column;gap:2px}
.cat-name{font-size:17px;line-height:1.3;font-weight:700}
.cat-count{font-size:14px;line-height:1.3;color:var(--neutral-700)}
.cat-icon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--navy-a08);display:flex;align-items:center;justify-content:center}
.cat-list{padding:0 16px 8px;background:var(--hp-paper);border-bottom:1px solid var(--navy-a14)}
.pick{position:relative;padding:12px 0;border-bottom:1px solid var(--navy-a14)}
.pick:last-child{border-bottom:0}
.pick-input{position:absolute;opacity:0;width:1px;height:1px}
.pick label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:44px}
.pick-box{flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:4px;border:1px solid var(--navy-a24);background:var(--paper-raised);display:flex;align-items:center;justify-content:center;transition:background-color 120ms var(--ease)}
.pick-input:checked + label .pick-box{background:var(--hp-navy);border-color:var(--hp-navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.6 9 10 3.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.pick-input:focus-visible + label .pick-box{outline:2px solid var(--hp-rust);outline-offset:2px}
.pick-text{display:flex;flex-direction:column}
.pick-name{font-size:16px;line-height:1.35;color:var(--hp-navy)}
.pick-desc{font-size:13px;line-height:1.4;color:var(--neutral-600);margin-top:2px}

/* ---------- Sheets (phone) / modals (desktop), using <dialog> ---------- */
dialog.sheet{position:fixed;inset:72px 0 0 0;margin:0;padding:0;border:0;width:100%;max-width:100%;height:auto;max-height:none;background:var(--paper-raised);color:var(--hp-navy);border-radius:16px 16px 0 0;box-shadow:var(--shadow-float);overflow:hidden}
dialog.sheet::backdrop{background:rgba(27,31,59,.6)}
.sheet-inner{height:100%;display:flex;flex-direction:column}
.sheet-grab{align-self:center;width:40px;height:4px;border-radius:999px;background:var(--neutral-300);margin:10px 0 4px;flex:0 0 auto}
.sheet-head{position:relative;flex:0 0 auto;padding:8px 16px 14px;border-bottom:1px solid var(--navy-a14);display:flex;flex-direction:column;gap:6px}
.sheet-head h2{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-.02em;padding-right:52px}
.sheet-head p{font-size:15px;line-height:1.5;color:var(--neutral-700)}
.sheet-head .sheet-close{position:absolute;top:2px;right:12px}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 20px;display:flex;flex-direction:column;gap:20px}
.sheet-body.flush{padding:0;gap:0}
.sheet-search{flex:0 0 auto;padding:14px 16px 0}
.sheet-foot{flex:0 0 auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--navy-a14);display:flex}
.sheet-foot .btn{flex:1}
.sheet-foot.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sheet-suggest{padding:20px 16px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.sheet-suggest p{font-size:15px;line-height:1.45;color:var(--neutral-700)}
.suggest-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.pill-group{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pill-group legend{font-size:12px;text-transform:uppercase;color:var(--neutral-700);padding:0;margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--hp-navy);background:var(--paper-raised);color:var(--hp-navy);cursor:pointer;font-size:15px;font-weight:600}
.pill input:checked + span{background:var(--hp-navy);color:var(--on-blue)}
.pill input:focus-visible + span{outline:2px solid var(--hp-rust);outline-offset:2px}
.form-error{color:var(--link);font-weight:600;font-size:15px}
.suggest-thanks{display:flex;flex-direction:column;flex:1 1 auto}
.suggest-thanks .sheet-body{padding:32px 16px;gap:10px}
.thanks-icon{width:44px;height:44px;border-radius:50%;background:var(--hp-paper);display:flex;align-items:center;justify-content:center}
.thanks-title{font-size:18px;line-height:1.4;font-weight:700}
.result-count{margin:10px 0 0;font-size:14px;color:var(--neutral-700)}
#sheet-add .sheet-body{padding-top:0;gap:0}
.results{list-style:none;margin:0;padding:0}
.result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--navy-a14)}
.result-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.result-tag{font-size:12px;font-weight:700;letter-spacing:.06em}
.result-title{font-size:15px;line-height:1.4;color:var(--neutral-900)}
.result-on{font-size:13px;line-height:1.3;color:var(--neutral-700);text-align:right;max-width:72px}
.no-results{padding:20px 0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.no-results p{font-size:15px;line-height:1.45;color:var(--neutral-800)}

/* ---------- Measure detail ---------- */
.page-detail main,.page-simple main{flex:1 1 auto}
.detail{max-width:760px;margin:0 auto}
.detail-back{padding:8px 16px 0}
.back-link{min-height:44px;display:inline-flex;align-items:center;gap:4px;margin-left:-6px;padding:0 6px;font-size:16px;font-weight:600;color:var(--hp-navy);text-decoration:none}
.detail-head{padding:8px 16px 20px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--navy-a14)}
.detail-tag{font-size:13px;font-weight:700}
.detail-head h1{font-family:var(--font-display);font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:pretty}
.detail-type{font-size:14px;color:var(--neutral-600)}
.not-on-ballot-note{margin-top:4px;padding:10px 12px;background:var(--hp-paper);border-radius:8px;font-size:14px;line-height:1.45;color:var(--neutral-800)}
.detail-body{padding:24px 16px 40px;display:flex;flex-direction:column;gap:28px}
.detail-body section{display:flex;flex-direction:column;gap:10px}
.eyebrow-row{display:flex;align-items:center;gap:8px}
.chip{font-size:11px;letter-spacing:.06em;background:var(--navy-a08);padding:2px 5px;border-radius:4px}
.label-quote{margin:0;padding-left:14px;border-left:2px solid var(--hp-lilac);font-size:16px;line-height:1.55;color:var(--neutral-800)}
.small-source,.g-source{align-self:flex-start;min-height:32px;display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600}
.plain{font-size:17px;line-height:1.6;color:var(--neutral-900)}
.ai-note{display:flex;gap:10px;align-items:flex-start;padding:12px;background:var(--hp-paper);border-radius:8px}
.ai-note p{font-size:14px;line-height:1.5;color:var(--neutral-700)}
.ai-note a{font-weight:600}
.ai-dot{flex:0 0 auto;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--hp-steel)}
.yes-no{gap:12px!important}
.vote-card{padding:16px;border:1px solid var(--navy-a14);border-radius:8px;display:flex;flex-direction:column;gap:6px}
.vote-card h2{font-size:13px;font-weight:700}
.vote-card p{font-size:16px;line-height:1.55;color:var(--neutral-900)}
.arg p{font-size:16px;line-height:1.55;color:var(--neutral-800)}
.arg strong{color:var(--hp-navy)}
.signers{margin:4px 0 0;padding-left:20px;font-size:15px;line-height:1.5;color:var(--neutral-800)}
.fine{font-size:14px;line-height:1.5;color:var(--neutral-700)}
.link-row-inline{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600}
.group-cat{padding-top:6px}
.group-cat h3{font-size:15px;font-weight:700;margin:0 0 4px}
.g-row{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--navy-a14);scroll-margin-top:16px}
.g-row:target{background:var(--highlight);box-shadow:0 0 0 8px var(--highlight)}
.g-text{display:flex;flex-direction:column;gap:4px}
.g-name{font-size:16px;line-height:1.35}
.g-quote{font-size:14px;line-height:1.45;color:var(--neutral-800);quotes:'"' '"' "'" "'"}
.g-meta{font-size:14px;line-height:1.4;color:var(--neutral-600)}
.g-pos{min-height:48px}
.g-pos .pos-v{font-size:14px}
.link-list{display:flex;flex-direction:column}
.link-list a{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;font-weight:600;border-bottom:1px solid var(--navy-a14);text-decoration:none}

/* ---------- Simple pages ---------- */
.page-detail,.page-simple{min-height:100dvh;display:flex;flex-direction:column}
.simple{max-width:720px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:14px}
.simple h1{font-family:var(--font-display);font-size:30px;line-height:1.1;letter-spacing:-.02em;margin-bottom:6px}
.simple h2{font-family:var(--font-display);font-size:20px;line-height:1.2;letter-spacing:-.02em;margin-top:14px}
.simple p,.simple li{font-size:16px;line-height:1.6;color:var(--neutral-800)}
.simple ul{margin:0;padding-left:22px}
.callout{padding:14px 16px;background:var(--pink-tint);border:1px solid var(--ink);border-radius:8px}
.page-form{gap:20px}

/* ---------- Desktop (mockup 8) ---------- */
@media (min-width:1024px){
  .desk-only{display:revert!important}
  .nav-link.desk-only{display:flex!important}
  .phone-only{display:none!important}
  .site-header{height:72px;background:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .header-inner{padding:0 40px}
  .wordmark{font-size:26px}
  .header-nav{gap:28px}
  .header-nav .register{font-size:16px;padding:10px 20px}
  .footer-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:28px 40px}
  .footer-nav{gap:24px}
  .home{padding:72px 40px}
  .home-inner{margin:0 auto 0 max(0px,calc((100vw - 1200px)/2))}
  .home h1{font-size:44px}

  .page-ballot{height:auto;overflow:visible;display:block}
  .ballot{display:block;max-width:1200px;margin:0 auto;padding:40px 40px 96px}
  .ballot-top{padding:0 0 36px;gap:6px}
  .ballot-top h1{font-size:40px;line-height:1.02}
  .districts{font-size:16px}
  .example-note{font-size:14px}
  .ballot-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}
  .compare-panel{display:flex!important;flex-direction:column;gap:16px;position:sticky;top:24px}
  .panel-card{border:1px solid var(--navy-a14);border-radius:8px;background:var(--paper-raised);display:flex;flex-direction:column;overflow:hidden}
  .panel-head{padding:20px 20px 14px;border-bottom:1px solid var(--navy-a14);display:flex;flex-direction:column;gap:6px}
  .panel-head h2{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.02em}
  .panel-head p{font-size:14px;line-height:1.5;color:var(--neutral-700)}
  .panel-count-row{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
  .panel-count{font-size:12px}
  .compare-panel .cat-btn{min-height:60px;padding:10px 20px}
  .compare-panel .cat-name{font-size:16px}
  .compare-panel .cat-icon{width:32px;height:32px}
  .compare-panel .cat-list{padding:0 20px 8px}
  .compare-panel .pick{padding:10px 0}
  .suggest-card{padding:20px;background:var(--hp-paper);gap:10px}
  .suggest-card-title{font-size:16px;font-weight:700}
  .suggest-card p{font-size:14px;line-height:1.5;color:var(--neutral-700)}
  .suggest-card .btn{align-self:flex-start}
  .ballot-main{display:flex;flex-direction:column;gap:12px}
  .table-tools{padding:0}
  .sort-status{padding:0;min-height:44px;font-size:15px}
  .ballot{padding-bottom:96px}
  .ballot-table.has-picks{width:100%}
  .ballot-table .col-measure{width:auto;min-width:260px}
  .ballot-table .col-pos{width:100px}
  .ballot-table thead th{position:static;box-shadow:none}
  .measure-cell{position:static}
  .measure-cell.desk{padding:16px;display:table-cell}
  .measure-cell.desk > *{display:block}
  .measure-cell.desk .m-tag{font-size:12px;letter-spacing:.1em;margin-bottom:4px}
  .m-chip{display:inline!important;font-weight:400;letter-spacing:.06em;padding:1px 6px;border:1px solid var(--navy-a24);border-radius:4px;margin-left:8px}
  .m-title{font-size:16px;line-height:1.35;font-weight:700;color:var(--hp-navy);text-decoration:none;margin-bottom:4px}
  .m-title:hover{text-decoration:underline;text-decoration-color:var(--hp-lilac)}
  .m-sum{font-size:14px;line-height:1.45;color:var(--neutral-700);margin-bottom:6px}
  .m-signers{font-size:13px}
  .measure-cell.desk .link-btn{display:inline-flex;min-height:32px;font-size:14px}
  .pos-td{padding:10px 5px}
  .pos{min-height:56px}
  .th-measure .sort-btn{padding:10px 16px}
  .sort-btn{padding:10px 8px}
  .sort-name{font-size:14px;line-height:1.3}
  .sort-name.mono{font-size:12px}
  .sort-ind{font-size:11px}
  .section-label{left:16px;padding-left:16px}
  .add-btn{padding:12px 16px;font-size:15px;gap:12px}
  .add-circle{width:36px;height:36px}

  dialog.sheet{inset:0;margin:auto;width:600px;height:fit-content;max-height:min(760px,calc(100vh - 80px));border-radius:16px}
  .sheet-inner{max-height:min(760px,calc(100vh - 80px))}
  .sheet-grab{display:none}
  .sheet-head{padding:24px 24px 16px}
  .sheet-head h2{font-size:26px}
  .sheet-head .sheet-close{top:20px;right:20px}
  .sheet-body{padding:16px 24px 20px}
  .sheet-search{padding:16px 24px 0}
  .sheet-foot{padding:16px 24px 20px;justify-content:flex-end}
  .sheet-foot .btn{flex:0 0 auto;width:auto}
  .sheet-foot.two{display:flex;justify-content:flex-end}
  .detail-back,.detail-head,.detail-body{padding-left:0;padding-right:0}
  .detail{padding:16px 40px 0}
  .detail-head h1{font-size:34px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Home lookup states ---------- */
.lookup-status{font-size:15px;color:var(--neutral-700);min-height:0}
.lookup-status:empty{display:none}
.confirm{padding:14px 16px;border:1px solid var(--navy-a24);border-radius:8px;background:var(--hp-paper);display:flex;flex-direction:column;gap:10px}
.confirm p{font-size:16px;line-height:1.45}
.confirm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.example-link{font-size:15px;text-align:center}

/* ---------- Candidate contests ---------- */
.pos-endorse{background:var(--endorse-bg);border-color:var(--ink)}
.pos-endorse .pos-v{font-size:13px;line-height:1.2;word-break:break-word}
.g-endorse-label{font-size:9px;letter-spacing:.1em;color:var(--neutral-700)}
.expand-cands{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.35;color:var(--neutral-800)}
.expand-cands span{font-size:13px;color:var(--neutral-700)}
.cands{list-style:none;margin:0;padding:0}
.cand{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--navy-a14)}
.cand-name{font-size:17px;font-weight:700}
.cand-party,.cand-desig{font-size:14px;color:var(--neutral-700)}
.table-scroll{overflow-x:auto}
.simple-table{border-collapse:collapse;width:100%;font-size:15px}
.simple-table caption{text-align:left;font-weight:700;padding-bottom:8px}
.simple-table th,.simple-table td{text-align:left;padding:8px;border-bottom:1px solid var(--navy-a14);vertical-align:top}

/* ---------- Persona-test fixes ---------- */
/* Narrow screens and 200% zoom: let the header wrap and long words break instead of clipping. */
.header-inner{flex-wrap:wrap;row-gap:4px}
h1,h2,.btn{overflow-wrap:anywhere}
.btn{white-space:normal;text-align:center}
@media (max-width:300px){
  .site-header{height:auto;min-height:64px;padding:6px 0}
  .home h1{font-size:26px}
  .ballot-top h1{font-size:19px}
  .header-nav{width:100%;justify-content:flex-end}
  .compare-bar{padding:8px}
  .compare-bar .btn-lg{font-size:16px;min-height:44px;padding:8px 12px}
}
.m-topic{font-size:12px;line-height:1.25;color:var(--neutral-700);font-weight:600}
.m-topic-inline{font-family:var(--font-body);font-size:13px;letter-spacing:0;font-weight:600;color:var(--neutral-700);margin-left:6px}
.detail-topic{font-family:var(--font-body);letter-spacing:0;font-weight:600;color:var(--neutral-700);margin-left:8px}
.jump-link{align-self:flex-start;font-size:15px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.jump-nav{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:0 16px 8px;scrollbar-width:none;align-items:center}
.jump-label{font-size:13px;color:var(--neutral-700);flex:0 0 auto}
.jump-btn{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--navy-a24);background:var(--paper-raised);color:var(--hp-navy);font-size:13px;font-weight:600;cursor:pointer}
.jump-btn:hover{background:var(--navy-a08)}
.label-details summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:4px;min-height:44px}
.label-details summary::-webkit-details-marker{display:none}
.label-details summary .eyebrow{display:inline}
/* The +/- sign is drawn in an aria-hidden span so screen readers do not read it. */
.toggle-glyph{color:var(--link);font-weight:700}
.toggle-glyph::after{content:"+"}
details[open] > summary .toggle-glyph::after{content:"-"}
.label-details summary .toggle-glyph{position:absolute;right:0;top:0}
.label-details summary{position:relative;padding-right:24px}
.details-hint{font-size:14px;color:var(--neutral-700)}
.label-details[open] .details-hint,.arg-full[open] .details-hint{display:none}
.arg-sec{border-top:1px solid var(--navy-a24);padding:12px 0}
.arg-full summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h glyph" "side side" "hint hint";gap:2px 8px;min-height:44px}
.arg-full summary::-webkit-details-marker{display:none}
.arg-full summary .arg-h{grid-area:h}
.arg-full summary .toggle-glyph{grid-area:glyph;font-size:20px;line-height:1}
.arg-side{grid-area:side;font-size:14px;font-weight:600;color:var(--neutral-700)}
.arg-full summary .details-hint{grid-area:hint}
.arg-h{font-size:17px;line-height:1.35;font-weight:700;color:var(--hp-navy);margin:0}
.arg-text{margin-top:10px;font-size:16px;line-height:1.55;color:var(--neutral-800)}
.arg-text p{margin:0 0 10px}
.arg-list{margin:0 0 10px;padding-left:20px}
.arg-list li{margin-bottom:6px}
.arg-signers{font-size:15px;color:var(--neutral-700)}
.pdf-tag{font-weight:400;color:var(--neutral-700)}
.label-details .label-quote{margin-top:10px}
.g-key{margin:6px 0 0;padding:12px;background:var(--hp-paper);border-radius:8px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45}
.g-key div{display:flex;gap:6px;flex-wrap:wrap}
.g-key dt{font-weight:700}
.g-key dd{margin:0;color:var(--neutral-700)}
.g-list{list-style:none;margin:0;padding:0}
.g-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name stance" "quote quote" "meta meta" "src src";column-gap:12px;row-gap:4px;align-items:start}
.g-row > .g-name{grid-area:name;font-size:16px;line-height:1.35;font-weight:600;margin:0}
.g-row > .g-stance{grid-area:stance;margin:0}
.g-row > .g-quote{grid-area:quote}
.g-row > p.g-meta{grid-area:meta}
.g-row > .g-source{grid-area:src}
.g-row > .g-src-note{grid-column:1 / -1}
.g-row .g-pos{min-height:40px;max-width:150px;padding:4px 10px}
.g-quote{font-size:14px;line-height:1.45;color:var(--neutral-800);margin:0}
.g-quote-label{font-weight:600;color:var(--neutral-700)}
p.g-meta{margin:0}
@media (min-width:1024px){.jump-nav{padding:0}}
html[lang="en"] .es-only{display:none}
.lang-link{padding:0 8px}
/* Header grows instead of overlapping when a longer label (Spanish) wraps. */
.site-header{height:auto;min-height:64px}
.header-inner{min-height:64px;padding-top:6px;padding-bottom:6px;column-gap:8px}
.header-nav{flex-wrap:wrap;justify-content:flex-end;row-gap:4px;margin-left:auto}
@media (max-width:420px){.wordmark{font-size:19px}.header-nav .register{font-size:13px;padding:6px 12px}.lang-link{font-size:14px;padding:0 4px}}
@media (min-width:1024px){.site-header{min-height:72px}.header-inner{min-height:72px}}

/* ---------- Ballot sections: colors, filter, collapse (Oct 16) ---------- */
/* Section colors only group contests. They never show a position (positions keep their own Yes/No colors and words). */
/* Two riso inks, alternating down the ballot. They only group contests; they never mark a position. */
.sec-state-offices,.sec-legislative,.sec-school,.sec-city,.sec-county-measures{--sec:var(--riso-blue);--sec-on:var(--on-blue)}
.sec-federal,.sec-judicial,.sec-county,.sec-state,.sec-city-measures{--sec:var(--riso-pink);--sec-on:var(--on-pink)}
.sec-added{--sec:var(--ink-muted);--sec-on:var(--paper-raised)}
.section-row th{padding:0;background:var(--sec,var(--paper-raised));border-bottom:0}
.section-row .section-label{position:static;color:var(--on-blue);font-size:12px;font-weight:700;letter-spacing:.08em}
.ballot-table .section-row th > .section-label{display:block;padding:12px}
.sec-btn{position:sticky;left:0;width:var(--region-w,100%);max-width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:0;background:transparent;color:var(--on-blue);cursor:pointer;text-align:left}
.sec-btn .sec-count{font-size:13px;opacity:.9;margin-left:auto}
.sec-btn svg{flex:0 0 auto}
.sec-btn:focus-visible{outline:3px solid var(--paper-raised);outline-offset:-4px}
.m-row .measure-cell{box-shadow:inset 5px 0 0 var(--sec,transparent)}
.m-row .measure-cell .m-toggle,.m-row .measure-cell .m-link{padding-left:16px}
.m-cands{font-size:13px;line-height:1.4;font-weight:400;color:var(--neutral-700)}
.m-cands strong{font-weight:600;color:var(--hp-navy)}
.filter-bar{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 16px 10px}
.filter-label{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--hp-navy);flex:0 0 auto}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.filter-btn{min-height:34px;padding:0 11px;border-radius:999px;border:2px solid var(--sec,var(--hp-navy));background:var(--paper-raised);color:var(--sec,var(--hp-navy));font-size:13px;font-weight:700;cursor:pointer}
.filter-btn[aria-pressed="true"]{background:var(--sec,var(--hp-navy));color:var(--on-blue)}
.filter-btn:focus-visible{outline:2px solid var(--hp-rust);outline-offset:2px}
.th-choice{background:var(--hp-paper)}
.th-choice .sort-btn{cursor:default;min-height:64px}
.choice-note{font-size:11px;line-height:1.25;color:var(--neutral-700)}
.choice-td{padding:6px 6px;vertical-align:middle;border-bottom:1px solid var(--navy-a14);background:var(--paper-raised)}
.choice{width:100%;min-height:44px;font:600 14px/1.2 var(--font-body);color:var(--hp-navy);background:var(--paper-raised);border:1.5px dashed var(--navy-a24);border-radius:6px;padding:4px 6px}
.choice-td.is-set .choice{border:2px solid var(--hp-navy);background:var(--hp-paper)}
.choice:focus-visible{outline:2px solid var(--hp-rust);outline-offset:2px}
.head-clone{position:fixed;top:0;z-index:7;overflow:hidden;box-shadow:0 4px 8px -6px rgba(27,31,59,.25)}
.head-clone-inner{overflow:hidden}
.head-clone thead th{position:static}
.print-card{margin:24px 16px 8px;padding:20px;border-radius:12px;background:var(--hp-paper);border:1px solid var(--navy-a14);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.print-title{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.print-card p{font-size:15px;line-height:1.5;color:var(--neutral-800)}
@media (min-width:1024px){
  .filter-bar{padding:0 0 4px;flex-direction:row;align-items:center;gap:10px}
  .print-card{margin:24px 0 0}
  .ballot-table .col-choice{width:150px}
}

/* ---------- My choices (printable) ---------- */
.my-choices{max-width:760px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:18px}
.mc-hero{position:relative;overflow:hidden;padding:28px 22px 24px;border-radius:16px;background:var(--hp-navy);color:var(--on-blue);display:flex;flex-direction:column;gap:6px}
.mc-dot{position:absolute;border-radius:50%}
.mc-dot-a{width:150px;height:150px;right:-70px;top:-80px;background:var(--hp-rust)}
.mc-dot-b{width:34px;height:34px;right:22px;bottom:20px;background:var(--hp-lilac)}
.mc-dot-c{width:12px;height:12px;right:68px;bottom:52px;background:var(--paper-raised)}
.mc-brand{position:relative;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;opacity:.9}
.mc-cheer{position:relative;font-family:var(--font-display);font-weight:700;font-size:38px;line-height:1.05;letter-spacing:-.02em;max-width:14ch}
.mc-h1{position:relative;font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em}
.mc-sub,.mc-districts,.mc-count{padding-right:56px}
.mc-only{display:flex;align-items:center;gap:8px;min-height:44px;font-size:15px}
.mc-only input{width:20px;height:20px}
.mc-print-foot{display:none}
.mc-sub,.mc-districts,.mc-count{position:relative;font-size:15px;line-height:1.45}
.mc-districts a{color:var(--on-blue)}
.mc-count{font-weight:700}
.mc-warn{padding:12px 14px;border:2px dashed var(--hp-rust);border-radius:8px;font-size:15px;line-height:1.5;background:var(--paper-raised)}
.mc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.mc-sheet{display:flex;flex-direction:column;gap:16px}
.mc-sec{border:2px solid var(--sec);border-radius:10px;overflow:hidden;break-inside:auto}
.mc-sec-h{background:var(--sec);color:var(--on-blue);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px}
.mc-contest{padding:12px 14px;border-top:1px solid var(--navy-a14);break-inside:avoid}
.mc-contest:first-of-type{border-top:0}
.mc-title{font-size:16px;line-height:1.35;font-weight:700;color:var(--hp-navy)}
.mc-tag{font-size:12px;letter-spacing:.06em;color:var(--sec)}
.mc-vote{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--neutral-700);margin:2px 0 6px}
.mc-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mc-opts li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.3}
.oval{flex:0 0 auto;width:26px;height:14px;border:2px solid var(--hp-navy);border-radius:50%}
.mc-opts li.is-picked{font-weight:700}
.mc-opts li.is-picked .oval{background:var(--hp-navy)}
.mc-skip{margin-top:6px;font-size:13px;font-style:italic;color:var(--neutral-700)}
.mc-foot{font-size:13px;color:var(--neutral-700);text-align:center}
@media (min-width:1024px){.my-choices{padding:48px 0 64px}.mc-cheer{font-size:52px}}
@media print{
  .site-header,.proto-banner,.site-footer,.mc-actions,.skip,.date-banner{display:none!important}
  .my-choices{padding:0;max-width:none}
  .mc-hero,.mc-sec-h,.mc-opts li.is-picked .oval{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mc-hero{padding:16px 18px}
  .mc-cheer{font-size:30px}
  .mc-dot{display:none}
  .mc-sheet{display:block;columns:2;column-gap:18px}
  .mc-sec{break-inside:auto;margin-bottom:12px;display:block}
  .mc-contest{break-inside:avoid}
  .mc-print-foot{display:block;position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:11px;font-weight:700;color:#000;background:var(--paper-raised);padding:4px 0;border-top:1px solid #000}
  body{margin-bottom:28px}
  .mc-warn{break-after:avoid}
}

/* ---------- Address autocomplete ---------- */
.addr-field .field-label{display:block}
.addr-wrap{position:relative}
.addr-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:8;margin:0;padding:4px 0;list-style:none;background:var(--paper-raised);border:1px solid var(--navy-a24);border-radius:8px;box-shadow:var(--shadow-float);max-height:320px;overflow-y:auto}
.addr-opt{min-height:44px;display:flex;align-items:center;padding:8px 14px;font-size:15px;line-height:1.3;color:var(--hp-navy);cursor:pointer}
.addr-opt:hover,.addr-opt[aria-selected="true"]{background:var(--hp-paper)}
.addr-opt[aria-selected="true"]{outline:2px solid var(--hp-rust);outline-offset:-2px}

.pos-rec{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}

/* Oct 16 persona fixes */
.table-key{font-size:14px;line-height:1.45;color:var(--neutral-800);padding:0 16px 8px}
.storage-warn{margin:0 16px 8px;padding:8px 12px;border-radius:6px;background:var(--pink-tint);font-size:14px;line-height:1.4;color:var(--hp-navy)}
.filter-btn{min-height:40px}
.choice-inline{display:flex;flex-direction:column;gap:2px;padding:0 6px 10px 16px}
.choice-inline-label{font-size:12px;font-weight:700;color:var(--riso-blue)}
.choice-inline .choice{min-height:44px}
.th-choice .sort-name{color:var(--riso-blue)}
.choice-td{border-right:1px solid var(--navy-a24)}
.choice{border-color:var(--ink-muted)}
.choice-td.is-set .choice,.choice-inline.is-set .choice{border:2px solid var(--hp-rust);background:var(--blue-tint)}
.head-clone th.th-measure{position:sticky;left:0;z-index:2;background:var(--hp-paper)}
.view-toggle,.table-tools{flex-wrap:wrap}
.btn-lg{overflow-wrap:normal;word-break:normal;hyphens:manual}
.compare-bar .btn{white-space:normal}
.page-ballot .site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.example-note{overflow-wrap:anywhere}
.districts{font-size:14px}
.example-note{font-size:14px}
.sort-name.mono{font-size:12px}
.choice-note{font-size:12px}
@media (min-width:1024px){
  .page-ballot .site-footer{padding-bottom:0}
  .table-key{padding:0}
  .storage-warn{margin:0}
  .ballot-table .measure-cell{position:sticky;left:0;z-index:1}
  .ballot-table thead th.th-measure{position:sticky;left:0;z-index:2}
  .ballot-table .col-measure{width:300px}
}
.addr-hint2{margin-top:8px;font-size:14px;line-height:1.4;color:var(--hp-navy);font-weight:600}
.addr-using{margin-top:6px;font-size:15px;line-height:1.4;color:var(--neutral-800);overflow-wrap:anywhere}
.es-topic{font-weight:700}
.filter-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--hp-navy);border-radius:999px;background:var(--paper-raised);color:var(--hp-navy);font-size:15px;font-weight:700;cursor:pointer}
.filter-toggle .filter-label{font-size:13px}
.filter-summary{font-family:var(--font-body);text-transform:none;letter-spacing:0}
.filter-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.filter-label-desk{display:none}
.filter-bar:not(.is-open) .filter-chips{display:none}
@media (min-width:1024px){
  .filter-toggle{display:none}
  .filter-label-desk{display:inline}
  .filter-bar .filter-chips{display:flex!important}
}
/* Keep the hidden screen-reader labels inside the table's scroll box (they were widening the page). */
.table-region{position:relative}
@media (max-width:300px){.example-note a{white-space:normal}}
.home-label{font-size:16px;line-height:1.4;font-weight:600;color:var(--hp-navy);text-transform:none;letter-spacing:0;margin-bottom:10px}
.sec-btn{flex-wrap:wrap}
.sec-btn .section-label{min-width:0;overflow-wrap:anywhere}
.table-region:has(> table:not(.has-picks)){overflow-x:clip}
.print-top{padding:0 16px 8px;font-size:15px;font-weight:700}
@media (min-width:1024px){.print-top{padding:0}}
@media print{.mc-cheer{font-size:22px}}
.filter-clear{min-height:40px;padding:0 12px;border:0;background:transparent;color:var(--link);font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer}
.filter-clear:disabled{color:var(--neutral-500);text-decoration:none;cursor:default}
.collapse-all{min-height:40px;padding:0 4px;border:0;background:transparent;color:var(--link);font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer;margin-left:auto}

/* Detail pages: alternating section bands so it is easy to see where one part ends (Oct 16). */
.detail-body{gap:0;padding:0 0 40px}
.detail-body > section{padding:24px 16px;border-top:1px solid var(--navy-a14)}
.detail-body > section:nth-of-type(even){background:var(--pink-tint)}
.detail-body > section:nth-of-type(even) .ai-note,.detail-body > section:nth-of-type(even) .not-on-ballot-note{background:var(--paper-raised)}
.g-defs{font-size:14px;line-height:1.5;color:var(--neutral-700)}
.g-defs a{font-weight:700}
details.group-cat{border:1px solid var(--navy-a24);border-radius:10px;background:var(--paper-raised);padding:0 14px;margin-top:10px}
details.group-cat > summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;gap:10px}
details.group-cat > summary::-webkit-details-marker{display:none}
details.group-cat > summary h3{margin:0;font-size:16px}
.group-cat-count{font-size:14px;color:var(--neutral-700);margin-left:auto}
details.group-cat > summary .toggle-glyph{font-size:20px;line-height:1;width:20px;text-align:center}
details.group-cat[open]{padding-bottom:8px}
details.group-cat > summary:focus-visible{outline:2px solid var(--hp-rust);outline-offset:2px;border-radius:6px}
.label-defs{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.label-defs dt{font-weight:700}
.label-defs dd{margin:0}
@media (min-width:1024px){
  .detail-body > section{padding:28px 24px;border-radius:12px;border-top:0;margin-top:8px}
}
details.group-cat > summary{flex-wrap:wrap;row-gap:2px}
details.group-cat > summary h3{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}

/* Headings and rows that only receive focus as a landing spot (after a link jump or an address lookup)
   are not buttons or links, so they get no focus ring. Screen readers still start reading there. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
/* A soft highlight shows which group a table link jumped to. */
.g-row:target{background:var(--highlight);box-shadow:-8px 0 0 var(--highlight),8px 0 0 var(--highlight);border-radius:4px}
.print-card [data-clear-choices]:disabled{color:var(--neutral-500);text-decoration:none;cursor:default}
.head-clone-sec{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;background:var(--sec,var(--hp-navy));color:var(--on-blue)}
.head-clone-sec[hidden]{display:none}
.head-clone-sec .section-label{color:var(--on-blue);font-size:12px;font-weight:700;letter-spacing:.08em}
.head-clone-sec .sec-count{font-size:13px;opacity:.9;margin-left:auto}
.head-clone-inner[hidden]{display:none}

/* Oct 17 */
.ballot-top .example-note{margin-top:8px}
.sort-status{min-height:0;padding-top:0;padding-bottom:6px}
.table-foot{padding:10px 16px 0;font-size:14px}
.table-foot [data-clear-choices]:disabled{color:var(--neutral-500);text-decoration:none;cursor:default}
.print-card{max-width:360px;margin-left:auto;margin-right:auto;align-items:center;text-align:center}
@media (min-width:1024px){.table-foot{padding:10px 0 0}.print-card{margin-left:0}}
.head-clone-inner{position:relative;z-index:2;background:var(--paper-raised)}
.head-clone-sec{position:relative;z-index:1}

/* Oct 17b: pinned section bar is an exact copy of the real one */
.head-clone-sec{padding:0;min-height:0;display:block}
.head-clone-sec .sec-clone{position:static;width:100%;max-width:none}
.head-clone-sec .section-label{position:static}
/* Bottom of the ballot: Clear on the right; full-width Done choosing bar */
.table-foot{text-align:right}
.print-card{max-width:none;margin:24px 16px 8px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;text-align:left}
.print-card .print-title{font-size:30px;line-height:1.1}
@media (min-width:1024px){.print-card{margin:24px 0 0}.print-card .print-title{font-size:36px}}
/* Smaller column header (Contest, My choice) */
.th-measure .sort-name.mono{font-size:11px}
.th-choice .sort-name{font-size:12px}
.th-measure .sort-btn,.th-choice .sort-btn{min-height:52px}
/* Less space between the Contests picker and the table */
.filter-bar{padding-bottom:4px}
.table-tools{padding-top:0;padding-bottom:4px}
.view-toggle button{min-height:36px}


/* =====================================================================
   Riso layer (design system, Oct 17): chunky ink outlines, hard shadows,
   two inks on paper. Aesthetic only; markup and behavior are unchanged.
   ===================================================================== */
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--font-body)}
a{color:var(--riso-blue);text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ink);text-decoration-color:var(--riso-pink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{background:var(--ink);color:var(--paper);border-radius:var(--radius-md)}
.skip:focus{color:var(--paper)}
.mono{letter-spacing:.06em}

/* Header and footer */
.site-header,.site-header{background:var(--paper);border-bottom:var(--border-bold) solid var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em;text-transform:lowercase;color:var(--ink);gap:8px}
.wordmark img{width:28px;height:28px;flex:0 0 auto}
.wordmark:hover{color:var(--ink)}
.lang-link{min-height:40px;padding:0 12px;border:var(--border-bold) solid var(--ink);border-radius:999px;background:var(--paper-raised);font:400 13px/1 var(--font-mono);color:var(--ink)}
.nav-link{color:var(--ink);font-weight:600}
.theme-toggle{width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:var(--border-bold) solid var(--ink);border-radius:999px;background:var(--paper-raised);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle[aria-pressed="true"] .icon-sun{display:block}
.theme-toggle[aria-pressed="true"] .icon-moon{display:none}
.header-nav{gap:8px}
.proto-banner{background:var(--highlight);color:var(--on-pink);border-bottom:var(--border-bold) solid var(--ink);font-family:var(--font-mono);letter-spacing:.06em}
.site-footer{background:var(--paper);border-top:var(--border-bold) solid var(--ink)}
.indep{color:var(--ink)}
.footer-nav a{color:var(--riso-blue)}

/* Buttons: 14px corners, ink outline, hard shadow that presses in */
.btn{border-radius:var(--radius-md);border:var(--border-bold) solid var(--ink);font-family:var(--font-body);font-weight:650;box-shadow:var(--shadow-hard);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:var(--shadow-press)}
.btn-primary,.btn-accent{background:var(--riso-blue);color:var(--on-blue)}
.btn-primary:hover,.btn-accent:hover{background:var(--riso-blue);color:var(--on-blue);filter:brightness(1.08)}
.btn.register{background:var(--pink-ink);color:var(--on-pink);box-shadow:none}
.btn.register:hover{background:var(--pink-ink);color:var(--on-pink)}
.btn-secondary{background:var(--paper-raised);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--pink-tint);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--riso-blue);border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:transparent;text-decoration:underline}
.btn-sm{min-height:40px}
.btn-lg{min-height:48px;font-size:17px;padding:0 24px}
.btn[disabled]{opacity:.5;box-shadow:none}
.link-btn,.filter-clear,.collapse-all{color:var(--riso-blue);text-decoration-color:currentColor;text-decoration-thickness:2px}
.icon-btn{background:var(--paper-raised);border:var(--border-bold) solid var(--ink);color:var(--ink)}

/* Eyebrows and labels: Space Mono, the voice of the record */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink)}
.eyebrow-rule{background:var(--riso-pink);height:3px}
.field-label{font-family:var(--font-mono);color:var(--ink-muted)}

/* Inputs */
.field input,.field textarea{min-height:48px;border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink);font-family:var(--font-body)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-muted)}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.form-error{color:var(--alert)}

/* Home: pink halftone hero band with the lookup card */
.page-home{background:var(--paper)}
.home{background-color:var(--riso-pink);background-image:radial-gradient(var(--halftone) 1.6px,transparent 1.7px);background-size:12px 12px;color:var(--on-pink);border-bottom:var(--border-bold) solid var(--ink);flex:0 0 auto;padding:40px 16px 40px}
.home-dot-big,.home-dot-small{display:none}
.home h1{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1.15;letter-spacing:-.02em;color:var(--on-pink);text-wrap:balance}
.home-form{background:var(--paper-raised);color:var(--ink);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard);padding:16px}
.home-label{color:var(--ink);font-weight:650}
.addr-list{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md);box-shadow:var(--shadow-hard);background:var(--paper-raised)}
.addr-opt{color:var(--ink)}
.addr-opt:hover,.addr-opt[aria-selected="true"]{background:var(--pink-tint)}
.addr-opt[aria-selected="true"]{outline:3px solid var(--focus);outline-offset:-3px}
.addr-hint2,.addr-using{color:var(--ink)}
.confirm{background:var(--paper);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg)}
@media (min-width:1024px){.home{padding:72px 40px}.home h1{font-size:44px;line-height:1.1}}

/* Ballot page */
.ballot-top h1{font-family:var(--font-display);font-size:22px;line-height:1.2}
.example-note{color:var(--ink-muted)}
.filter-toggle{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink)}
.filter-label{font-family:var(--font-mono);letter-spacing:.06em;color:var(--ink)}
.filter-btn{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink)}
.filter-btn[aria-pressed="true"]{background:var(--sec,var(--riso-blue));color:var(--sec-on,var(--on-blue))}
.filter-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.view-toggle{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md);padding:2px}
.view-toggle button{border-radius:10px;color:var(--ink)}
.view-toggle button[aria-pressed="true"]{background:var(--riso-blue);color:var(--on-blue)}
.storage-warn{background:var(--pink-tint);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md)}
.compare-bar{background:var(--paper);border-top:var(--border-bold) solid var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.page-ballot .table-region{margin:0 16px;border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg);background:var(--paper-raised);box-shadow:var(--shadow-hard)}
@media (min-width:1024px){.page-ballot .table-region{margin:0}}

/* Table */
.ballot-table thead th{background:var(--paper-raised);border-bottom:var(--border-bold) solid var(--ink);box-shadow:none}
.ballot-table thead th.th-measure{border-right:var(--border-bold) solid var(--ink)}
.sort-btn{color:var(--ink)}
.sort-name{font-family:var(--font-body);font-weight:650}
.sort-name.mono{font-family:var(--font-mono)}
.sort-ind{color:var(--ink-muted)}
.sort-btn.is-active{background:var(--blue-tint)}
.sort-btn.is-active .sort-ind{color:var(--ink)}
.th-choice{background:var(--paper-raised)}
.th-choice .sort-name{color:var(--riso-blue);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.m-row th,.m-row td{background:var(--paper-raised);border-bottom:1px solid var(--line)}
.m-row:nth-child(odd) > th,.m-row:nth-child(odd) > td{background:var(--paper)}
.m-row.is-open th,.m-row.is-open td{background:var(--pink-tint)}
.has-picks .measure-cell,.choice-td{border-right:var(--border-bold) solid var(--ink)}
.m-row .measure-cell{box-shadow:inset 6px 0 0 var(--sec,transparent)}
.m-toggle,.m-link,.m-title,.m-title-sm{color:var(--ink)}
.m-tag{font-family:var(--font-mono);letter-spacing:.04em}
.m-title-sm{font-weight:650}
.section-row th{background:var(--sec,var(--ink));border-top:var(--border-bold) solid var(--ink);border-bottom:var(--border-bold) solid var(--ink)}
.section-row .section-label,.sec-btn,.sec-btn .sec-count{color:var(--sec-on,var(--paper-raised))}
.section-row .section-label{font-family:var(--font-mono);letter-spacing:.06em}
.sec-btn:focus-visible{outline:3px solid var(--sec-on,var(--paper-raised));outline-offset:-5px}
.head-clone{box-shadow:0 4px 0 -2px var(--ink)}
.head-clone-inner{background:var(--paper-raised)}
.head-clone th.th-measure{background:var(--paper-raised)}
.head-clone-sec{background:var(--sec,var(--ink));color:var(--sec-on,var(--paper-raised));border-top:var(--border-bold) solid var(--ink);border-bottom:var(--border-bold) solid var(--ink)}
.add-row th,.add-row td{background:var(--paper)}
.add-circle{border:var(--border-bold) dashed var(--ink-muted)}
.add-btn{color:var(--ink-muted)}

/* Position chips: every one says its word; stated positions get an ink outline */
.pos{border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-body)}
.pos-v{font-weight:650}
.pos-d{font-family:var(--font-mono);color:var(--ink-muted);letter-spacing:.06em}
.pos-yes,.pos-no,.pos-neutral,.pos-endorse{border:var(--border-bold) solid var(--ink)}
.pos-yes{background:var(--yes-bg)}
.pos-no{background:var(--no-bg)}
.pos-neutral{background:var(--neutral-bg)}
.pos-endorse{background:var(--endorse-bg)}
.pos-none{background:transparent;border:var(--border-bold) solid transparent;color:var(--ink-muted)}
.pos-none .pos-v{font-weight:400}
.pos-unchecked{background:transparent;border:var(--border-bold) dashed var(--ink-muted);color:var(--ink-muted);font-style:italic}
.pos-empty{background:transparent;border:var(--border-bold) dashed var(--line)}
a.pos:hover{color:var(--ink);filter:none;box-shadow:2px 2px 0 var(--ink)}
.pos-rec{color:var(--ink-muted)}

/* My choice */
.choice{border:var(--border-bold) dashed var(--ink-muted);border-radius:var(--radius-sm);background:var(--paper-raised);color:var(--ink);font-family:var(--font-body)}
.choice-td.is-set .choice,.choice-inline.is-set .choice{border:var(--border-bold) solid var(--riso-blue);background:var(--blue-tint)}
.choice:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.choice-inline-label{color:var(--riso-blue);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}

/* Expand panel (phone) */
.expand-row td{background:var(--pink-tint)}
.expand-title span{color:var(--ink);text-decoration-color:var(--riso-pink);text-decoration-thickness:3px}
.expand-title svg{color:var(--riso-blue)}
.expand-sum{color:var(--ink)}
.not-on-ballot,.m-chip{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-sm);background:var(--paper-raised)}

/* Done choosing */
.print-card{background:var(--pink-tint);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard)}
.print-title{font-family:var(--font-display);color:var(--ink)}

/* Picker, side panel, sheets */
.panel-card{border:var(--border-bold) solid var(--ink)!important;border-radius:var(--radius-lg)!important;background:var(--paper-raised)!important;box-shadow:var(--shadow-hard)}
.panel-head{border-bottom:1px solid var(--line)}
.panel-head h2,.sheet-head h2{font-family:var(--font-display)}
.suggest-card{background:var(--pink-tint)!important}
.cat-btn{background:var(--paper-raised);color:var(--ink);border-bottom:1px solid var(--line)}
.cat-icon{background:var(--pink-tint);border:var(--border-bold) solid var(--ink)}
.cat-list{background:var(--paper)}
.pick-box{width:24px;height:24px;margin-top:0;border:var(--border-bold) solid var(--ink);border-radius:6px;background:var(--paper-raised)}
.pick-input:checked + label .pick-box{background-color:var(--riso-blue);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.6 9 10 3.2'/%3E%3C/svg%3E")}
.pick-input:focus-visible + label .pick-box{outline:3px solid var(--focus);outline-offset:3px}
.pick-name{color:var(--ink);font-weight:650}
.pick-desc{color:var(--ink-muted)}
dialog.sheet{background:var(--paper-raised);color:var(--ink);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-hard)}
dialog.sheet::backdrop{background:rgba(27,31,59,.6)}
.sheet-head,.sheet-foot{border-color:var(--line)}
.sheet-grab{background:var(--ink-muted)}
.pill span{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink)}
.pill input:checked + span{background:var(--riso-blue);color:var(--on-blue)}
.pill input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}
.results .result{border-bottom:1px solid var(--line)}
.result-title{color:var(--ink)}
@media (min-width:1024px){dialog.sheet{border-radius:var(--radius-lg)}}

/* Detail pages */
.back-link{color:var(--riso-blue)}
.detail-head{border-bottom:var(--border-bold) solid var(--ink)}
.detail-head h1,.simple h1,.simple h2{font-family:var(--font-display)}
.detail-tag{font-family:var(--font-mono)}
.detail-body > section{border-top:1px solid var(--line)}
.detail-body > section:nth-of-type(even){background:var(--pink-tint)}
.detail-body > section:nth-of-type(even) .ai-note,.detail-body > section:nth-of-type(even) .not-on-ballot-note{background:var(--paper-raised)}
.plain,.vote-card p,.arg p,.arg-text,.simple p,.simple li{color:var(--ink)}
.ai-note,.not-on-ballot-note{background:var(--pink-tint);border-radius:var(--radius-md)}
.ai-note p{color:var(--ink)}
.ai-dot{background:var(--riso-pink);border:var(--border-bold) solid var(--ink);width:12px;height:12px;margin-top:4px}
.vote-card{background:var(--paper-raised);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md)}
.vote-card h2{font-family:var(--font-mono);letter-spacing:.06em}
.label-quote{border-left:4px solid var(--riso-pink);color:var(--ink)}
.chip{background:var(--highlight);color:var(--on-pink);border:var(--border-bold) solid var(--ink)}
.arg-sec{border-top:1px solid var(--line)}
.arg-h{color:var(--ink)}
.toggle-glyph{color:var(--riso-blue)}
details.group-cat{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-md);background:var(--paper-raised)}
details.group-cat > summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.g-row{border-bottom:1px solid var(--line)}
.g-row:target{background:var(--highlight);box-shadow:-8px 0 0 var(--highlight),8px 0 0 var(--highlight)}
.g-row:target,.g-row:target *{color:var(--on-pink)}
.g-quote{color:var(--ink)}
.link-list a{border-bottom:1px solid var(--line);color:var(--riso-blue)}
.cand{border-bottom:1px solid var(--line)}
.simple-table th,.simple-table td{border-bottom:1px solid var(--line)}
.callout{background:var(--pink-tint);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg)}

/* My choices page: pink halftone hero like the home page */
.mc-hero{background-color:var(--riso-pink);background-image:radial-gradient(var(--halftone) 1.6px,transparent 1.7px);background-size:12px 12px;color:var(--on-pink);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard)}
.mc-dot{display:none}
.mc-brand{font-family:var(--font-display);text-transform:lowercase;opacity:1}
.mc-h1,.mc-cheer{font-family:var(--font-display)}
.mc-districts a{color:var(--on-pink)}
.mc-warn{background:var(--paper-raised);border:var(--border-bold) dashed var(--ink);border-radius:var(--radius-md)}
.mc-only input{accent-color:var(--riso-blue)}
.mc-sec{border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg);background:var(--paper-raised)}
.mc-sec-h{background:var(--sec);color:var(--sec-on);border-bottom:var(--border-bold) solid var(--ink);font-family:var(--font-mono);letter-spacing:.06em}
.mc-contest{border-top:1px solid var(--line)}
.mc-title{color:var(--ink)}
.mc-tag{color:var(--ink-muted);font-family:var(--font-mono)}
.oval{border:var(--border-bold) solid var(--ink)}
.mc-opts li.is-picked .oval{background:var(--ink)}

/* Printing always uses the Paper look, without shadows */
@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){--paper:#ffffff;--paper-raised:#ffffff;--pink-tint:#fde3ec;--ink:#1b1f3b;--ink-muted:#4f5370;--line:#e2d9cc;--riso-blue:#2b49c9;--on-blue:#ffffff;--shadow-hard:none;--shadow-press:none;color-scheme:light}
  .mc-hero,.mc-sec{box-shadow:none}
}

/* Night print: dark tick on the light blue checkbox */
:root[data-theme="dark"] .pick-input:checked + label .pick-box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%2315172b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.6 9 10 3.2'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pick-input:checked + label .pick-box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%2315172b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.6 9 10 3.2'/%3E%3C/svg%3E")}}
.home-label{font-family:var(--font-body);font-size:16px;font-weight:650;text-transform:none;letter-spacing:0;color:var(--ink)}
.page-home .home{flex:1 1 auto}
@media (max-width:300px){.wordmark{font-size:14px}.wordmark img{display:none}.header-inner{padding-left:12px;padding-right:12px}}

/* ===== Oct 18 ===== */
/* Measure pages: Prop number and topic lead; the official title is second */
.detail-h1{font-family:var(--font-display);font-size:30px;line-height:1.1;letter-spacing:-.02em}
.detail-h1 .d-tag{color:var(--ink)}
.detail-h1 .d-topic{color:var(--ink)}
.detail-official{font-family:var(--font-body);font-size:19px;line-height:1.35;font-weight:650;color:var(--ink-muted);text-wrap:pretty}
@media (min-width:1024px){.detail-h1{font-size:40px}.detail-official{font-size:22px}}
/* Footnote dot after the summary, linking to the note at the bottom */
.fn-dot{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:baseline;border-radius:50%;background:var(--riso-pink);border:var(--border-bold) solid var(--ink);text-decoration:none}
.fn-dot:hover{background:var(--pink-ink)}
.summary-note .ai-note{background:var(--paper-raised)}
/* Sorted column: the whole header cell takes the highlight, Contest included */
.ballot-table thead th:has(> .sort-btn.is-active){background:var(--blue-tint)}
.ballot-table thead th > .sort-btn.is-active{background:transparent}
/* Frozen header: same outline as the table box, so the left and top lines never disappear */
.head-clone{border:var(--border-bold) solid var(--ink);border-bottom:0;box-sizing:border-box;box-shadow:none;background:var(--paper-raised)}
.head-clone-inner{border-bottom:var(--border-bold) solid var(--ink)}
.head-clone-inner[hidden] + .head-clone-sec{border-top:0}
.head-clone-sec{border-top:0}
.head-clone{box-shadow:0 2px 0 0 var(--ink)}

/* Home: halftone dots that follow the pointer (canvas over the pink band) */
.page-home .home{position:relative;overflow:hidden}
.home-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.home.has-dots{background-image:none}
.home-inner{z-index:1}
/* Desktop "Compare views" panel: the heading and the suggestion card stay put; only the list of groups
   scrolls, inside the rounded box, when the panel is taller than the screen. */
@media (min-width:1024px){
  .compare-panel{max-height:calc(100dvh - 48px);display:flex!important;flex-direction:column;overflow:visible}
  .compare-panel .panel-card:first-child{flex:0 1 auto;min-height:0;overflow:clip;display:flex;flex-direction:column}
  .compare-panel .panel-head{flex:0 0 auto}
  .compare-panel .picker{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .compare-panel .suggest-card{flex:0 0 auto}
}
.filter-toggle{flex-wrap:wrap;max-width:100%;text-align:left;row-gap:0;padding-top:6px;padding-bottom:6px}
.filter-toggle .filter-label{overflow-wrap:anywhere}
.filter-toggle .filter-label{min-width:0;flex:0 1 auto;white-space:normal}

/* Frozen header: no background of its own (that left a white strip while a section bar was pushed out),
   and rounded top corners like the table box. */
.head-clone{background:transparent;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.head-clone-inner{border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0}
.head-clone-inner[hidden] + .head-clone-sec{border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0}

/* Desktop: the ballot table is its own frozen, rounded box like the Compare views panel. The rows scroll
   inside it; the column names stick to its top and each section bar sticks under them until the next
   section pushes it out (each section is its own tbody, so the browser does the pushing). */
@media (min-width:1024px){
  .page-ballot .table-region{--rest-top:24px;max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:auto;scrollbar-width:thin}
  .page-ballot .ballot-table thead th{position:sticky;top:0;z-index:3}
  .page-ballot .ballot-table thead th.th-measure{left:0;z-index:4}
  .page-ballot .ballot-table .section-row th{position:sticky;top:var(--thead-h,56px);z-index:2}
  .page-ballot .head-clone{display:none!important}
}

/* ===== Oct 18: BallotInBrief brand (design-system/HANDOFF.md) ===== */
/* Logo: the approved files only, never rebuilt in CSS. Night print swaps in the -night files. */
.site-logo{display:inline-flex;align-items:center;gap:12px;line-height:0;text-decoration:none;min-height:44px;flex:0 0 auto}
.site-logo .logo-icon{width:46px;height:46px;flex:none}
.site-logo .logo-mark{height:44px;width:auto}
.logo-night{display:none!important}
:root[data-theme="dark"] .logo-paper{display:none!important}
:root[data-theme="dark"] .logo-night{display:inline!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-paper{display:none!important}
  :root:not([data-theme="light"]) .logo-night{display:inline!important}
}
@media print{.logo-night{display:none!important}.logo-paper{display:inline!important}}
.site-header{min-height:62px}
.header-inner{min-height:62px;padding-top:10px;padding-bottom:8px}
@media (max-width:559px){.site-logo{gap:8px}.site-logo .logo-icon{width:34px;height:34px}.site-logo .logo-mark{height:34px}}
@media (max-width:340px){.site-logo .logo-icon{display:none}}
@media (min-width:1024px){.site-header{min-height:88px}.header-inner{min-height:88px;padding-top:12px;padding-bottom:10px}}

/* Footer: full lockup on the left; the who-runs-it line and links beside it on desktop, under it on phones */
.footer-logo{display:inline-flex;line-height:0;margin-bottom:12px;align-self:flex-start}
.footer-logo img{width:236px;max-width:100%;height:auto}
@media (min-width:1024px){
  .footer-inner{display:grid;grid-template-columns:auto 1fr;column-gap:32px;row-gap:6px;align-items:end;padding:40px}
  .footer-logo{grid-row:1 / span 2;margin-bottom:0}
  .footer-logo img{width:385px}
  /* Ballot page: the desktop panes need the page to stay short, so the footer keeps the 64px logo */
  .page-ballot .footer-inner{padding:28px 40px}
  .page-ballot .footer-logo img{width:236px}
  .footer-inner .indep,.footer-inner .footer-nav{justify-self:end;text-align:right}
}

/* Home: pink hero, then "What you'll see", then the footer */
.home-main{flex:1 1 auto;display:flex;flex-direction:column}
.page-home .home{flex:0 0 auto}
.hero-sample{display:none}
@media (min-width:1024px){
  .home-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;max-width:1200px;margin:0 auto}
  .home-grid .home-inner{margin:0;max-width:560px}
  .hero-sample{display:block;position:relative;height:420px;color:var(--ink)}
}
.sample-card{position:absolute;background:var(--paper-raised);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard);display:flex;flex-direction:column;gap:10px}
.sample-measure{left:8%;top:26px;width:88%;max-width:440px;padding:20px;transform:rotate(2deg)}
.sample-stances{left:0;top:250px;width:96%;max-width:470px;padding:16px 18px;transform:rotate(-2deg)}
.sample-label{font:400 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.sample-title{font:650 20px/26px var(--font-body)}
.sample-text{font:400 15px/22px var(--font-body)}
.sample-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sample-pair div{background:var(--pink-tint);border:var(--border-bold) solid var(--ink);border-radius:12px;padding:8px 10px;font:400 13px/18px var(--font-body)}
.sample-pair b{display:block;font:400 10px/14px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.sample-head{font:700 15px/20px var(--font-display)}
.sample-grid{display:grid;grid-template-columns:1fr .8fr .8fr 1.3fr;gap:8px;align-items:center;font-size:13px}
.sample-grid i{font:400 10px/14px var(--font-mono);font-style:normal;text-transform:uppercase;color:var(--ink-muted)}
.sample-row{font-weight:650}
.sample-grid .pos{min-height:0;padding:2px 8px;justify-self:start;border-radius:var(--radius-sm);white-space:nowrap}
.sample-grid .pos-v{font-size:13px;font-weight:650}
.sample-tag{position:absolute;right:8px;top:0;font:400 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--paper-raised);border:var(--border-bold) solid var(--ink);border-radius:999px;padding:4px 10px}

/* StepCards: a numbered list on phones, three cards from 768px */
.steps{display:flex;flex-direction:column;gap:20px;padding:40px 16px 48px;width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box}
.steps h2{margin:0;font:700 26px/31px var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.step{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;align-items:baseline}
.step-num{font:400 12px/16px var(--font-mono);letter-spacing:.06em;color:var(--ink-muted)}
.step-title{font:650 16px/24px var(--font-body);color:var(--ink)}
.step-text{grid-column:2;margin:0;color:var(--ink)}
@media (min-width:768px){
  .steps{padding:56px 40px 64px}
  .steps ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .step{display:flex;flex-direction:column;gap:10px;background:var(--paper-raised);border:var(--border-bold) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard);padding:20px}
  .step-title{font-size:20px;line-height:26px}
  .step-num::before{content:"Step "}
  :lang(es) .step-num::before{content:"Paso "}
}

/* Review fixes (Oct 18): long labels wrap inside their own box; the count and toggle stay on the right */
.sec-btn{flex-wrap:nowrap}
.sec-btn .section-label{flex:1 1 auto;min-width:0}
.sec-btn .sec-count{flex:0 0 auto;white-space:nowrap}
details.group-cat > summary{flex-wrap:nowrap}
details.group-cat > summary h3{flex:1 1 0;min-width:0}
details.group-cat > summary .group-cat-count,details.group-cat > summary .toggle-glyph{flex:0 0 auto;white-space:nowrap}
.ext-icon{flex:0 0 auto}
.link-list a{padding-top:10px;padding-bottom:10px}
.mc-sub,.mc-districts,.mc-count{padding-right:0}
.mc-brand{text-transform:none}
.step-title{text-wrap:balance}
:lang(es) .sample-stances{top:272px}
:lang(es) .hero-sample{height:440px}

/* My choices (Oct 18, Harrison): plain pink card with no dot texture or site name; Print and Edit side by side,
   "Show only my choices" under them */
.mc-hero{background-image:none}
.mc-actions{flex-direction:column;align-items:stretch;gap:12px}
.mc-buttons{display:flex;flex-wrap:wrap;gap:12px}
.mc-buttons .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:normal}
@media (min-width:768px){.mc-buttons .btn{flex:0 0 auto}}
@media (min-width:340px) and (max-width:419px){.mc-buttons .btn{white-space:nowrap;padding-left:12px;padding-right:12px;font-size:16px}:lang(es) .mc-buttons .btn{white-space:normal}}
/* Top bar shows the lockup only, no b stamp (Harrison, Oct 18); with the room freed, the phone logo grows to 40px */
@media (max-width:559px){.site-logo .logo-mark{height:40px}}
.head-clone-sec{cursor:pointer}