/* Politi-Know. One layout for phone, tablet, and computer: header with tools, one big address search, then
   "your address at a glance", your ballot, and the side-by-side matchup. Text is dark for easy reading. */
:root{
  --bg:#F3F5F4; --surface:#FFFFFF; --raise:#F8FAF9; --ink:#0B161D; --muted:#36444C; --faint:#56646B; --line:#D3DBD8; --soft:#E9EFEC;
  --accent:#0A6650; --accent-2:#0C7C61; --accent-soft:#E0F1EA; --accent-ink:#FFFFFF;
  --gold:#F2B705; --logo-gold:#C9A03A; --gold-ink:#1D1600; --warn-bg:#FFF3CF; --warn-fg:#4A3700;
  --people:#0A6650; --pac:#C2620A; --party:#7656C9; --self:#2F7FC1; --other:#7E8C86;
  --shadow:0 1px 2px rgba(15,28,36,.06), 0 6px 20px rgba(15,28,36,.06);
  --radius:16px;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1317; --surface:#121D22; --raise:#16232A; --ink:#F2F7F5; --muted:#C9D5D1; --faint:#A9B7B2; --line:#2C3E45; --soft:#1A2930;
    --accent:#47D3A5; --accent-2:#66E0B8; --accent-soft:#143A2F; --accent-ink:#04120D;
    --logo-gold:#E2BC5A; --warn-bg:#3A2F0F; --warn-fg:#F8E2A0;
    --people:#47D3A5; --pac:#F39A4A; --party:#B19BF2; --self:#71B6F0; --other:#8D9C96;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.55; font-weight:500; -webkit-font-smoothing:antialiased}
.gutter{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.wrap{max-width:1080px; margin:0 auto}
button,input{font:inherit; color:inherit}
a{color:var(--accent); text-underline-offset:2px}
b,strong{font-weight:800}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}

/* header */
.bar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.bar-in{display:flex; align-items:center; justify-content:space-between; gap:12px; height:58px}
.logo{display:inline-flex; align-items:center; white-space:nowrap; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.02em; line-height:1}
.logo .k{color:var(--accent)}
.logo svg{width:.74em; height:.74em; margin:0 .02em; transform:translateY(.04em)}
.globe .gl{stroke:var(--accent)} .globe .gr{stroke:var(--logo-gold)}
.nav{display:flex; align-items:center; gap:8px}
.nav a.navlink{font-weight:800; font-size:15px; color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:999px; border:1.5px solid transparent}
.nav a.navlink:hover, .nav a.navlink[aria-current="page"]{background:var(--soft)}

/* hero + search */
.hero{padding-block:40px 28px}
.eyebrow-hero{display:inline-flex; gap:8px; align-items:center; font-size:14px; font-weight:700; color:var(--muted); margin:0 0 12px}
.eyebrow-hero i{width:8px; height:8px; border-radius:50%; background:var(--gold)}
h1{font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.98; font-size:clamp(42px, 8.5vw, 84px); margin:0 0 16px; text-wrap:balance}
h1 em{font-style:normal; color:var(--accent)}
.lede{font-size:clamp(17px,2.2vw,20px); color:var(--muted); margin:0 0 24px; max-width:62ch}
.search-wrap{position:relative; max-width:720px}
.search{display:flex; align-items:center; gap:6px; background:var(--surface); border:2px solid var(--line); border-radius:999px; padding:6px; box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s}
.search:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), var(--shadow)}
.search input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:18px; font-weight:600; padding:11px 4px}
.search input::placeholder{color:var(--faint)}
.locate{flex:none; width:46px; height:46px; border-radius:50%; border:0; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; cursor:pointer}
.locate svg{width:22px; height:22px}
.locate:hover{background:var(--soft)}
.btn{flex:none; background:var(--accent); color:var(--accent-ink); border:0; font-weight:800; font-size:16px; padding:13px 22px; border-radius:999px; cursor:pointer; white-space:nowrap}
.btn:hover{background:var(--accent-2)}
.btn[disabled]{opacity:.6; cursor:wait}
.sugg{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30; list-style:none; margin:0; padding:6px; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; box-shadow:0 12px 40px rgba(15,28,36,.18)}
.sugg li{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:10px; cursor:pointer}
.sugg li[aria-selected="true"], .sugg li:hover{background:var(--accent-soft)}
.sugg li svg{flex:none; width:18px; height:18px; color:var(--muted)}
.sugg strong{display:block; font-size:15px}
.sugg span{display:block; font-size:14px; color:var(--muted)}
.sugg .note{display:block; padding:8px 12px 4px; font-size:12px; color:var(--muted); cursor:default}
.sugg .note:hover{background:none}
.privacy{font-size:14px; color:var(--muted); margin:12px 0 0 8px}
.props{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:32px; max-width:900px}
.prop{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:14px}
.prop b{display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent)}
.prop b svg{width:19px; height:19px}
.prop p{margin:0; font-size:15px; color:var(--muted)}
.prop strong{display:block; color:var(--ink); font-size:16px}

.status{margin:12px 0 4px; max-width:720px; padding:14px 18px; border-radius:12px; background:var(--surface); border:1.5px solid var(--line); font-weight:600}
.status.err{background:var(--warn-bg); color:var(--warn-fg); border-color:transparent}

/* results */
.results{padding-block:4px 24px}
.card{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.section-h{display:flex; align-items:baseline; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; margin:30px 0 14px}
.section-h h2{font-family:var(--display); font-weight:800; letter-spacing:-.025em; font-size:clamp(26px,4vw,36px); line-height:1.05; margin:0}
.section-h .sub{font-size:15px}
.summary{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); overflow:hidden}
.sum-info{padding:22px 24px; display:flex; flex-direction:column; gap:14px; min-width:0}
.sum-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.next-dl{margin:0; font-size:15px; padding:10px 12px; border-radius:10px; background:var(--warn-bg); color:var(--warn-fg)}
.label{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 4px}
.date-big{font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:28px; line-height:1.1; margin:0}
.countdown{flex:none; display:inline-block; font-size:14px; font-weight:800; background:var(--gold); color:var(--gold-ink); padding:5px 11px; border-radius:999px; white-space:nowrap}
.place-name{font-weight:800; font-size:19px; margin:0; overflow-wrap:anywhere}
.sub{color:var(--muted); margin:0; font-size:15px; overflow-wrap:anywhere}
.dirs{display:inline-flex; gap:6px; align-items:center; margin-top:8px; font-weight:800; font-size:15px; text-decoration:none}
.map{min-height:320px; min-width:0; background:var(--soft); position:relative; border-left:1.5px solid var(--line)}
.map-fallback{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:15px; padding:16px; text-align:center}
.legend-map{position:absolute; left:12px; bottom:12px; background:var(--surface); border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; font-size:13px; font-weight:700; display:flex; flex-direction:column; gap:4px; z-index:2; box-shadow:var(--shadow)}
.dot{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:-1px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.dot.you{background:var(--accent)} .dot.poll{background:var(--gold); border-radius:4px} .dot.early{background:var(--self)}
.notes{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.note-row{font-size:15px; padding:12px 16px; border-radius:12px; background:var(--accent-soft); color:var(--ink)}
.note-row a{font-weight:800}
.note-row.coverage{background:var(--warn-bg); color:var(--warn-fg)}

/* at a glance: representatives + dates, early voting, official links */
.glance{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px; margin-top:14px; align-items:start}
.extra{display:flex; flex-direction:column; gap:14px; min-width:0}
.panel{padding:20px 22px; min-width:0}
.panel h3{margin:0 0 2px; font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.01em}
.panel .intro{margin:0 0 14px; color:var(--muted); font-size:15px}
.src-line{margin-top:12px; font-size:13px}
.dlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.dlist > li{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1.5px solid var(--line)}
.dlist > li:first-child{border-top:0; padding-top:4px}
.dlist .ico{flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--soft); font-size:12px; font-weight:800; color:var(--accent); font-family:var(--display)}
.dlist > li > div{min-width:0; flex:1}
.dlist .seat{display:block; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.dlist .does{display:block; font-size:14px; color:var(--muted)}
.rps{display:flex; flex-direction:column; gap:12px; margin:8px 0 6px}
.rp{display:flex; gap:12px; align-items:flex-start}
.ravatar{position:relative; flex:none; width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--soft); display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--muted); font-family:var(--display); border:1.5px solid var(--line)}
.ravatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.rp-txt{min-width:0; flex:1; font-size:16px; line-height:1.4; padding-top:2px}
.rp-txt .pty{font-size:14px; color:var(--muted); font-weight:600}
.rp-btns{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.mini{display:inline-flex; align-items:center; font:800 13px var(--body); padding:7px 12px; border-radius:999px; border:1.5px solid var(--accent); color:var(--accent); background:transparent; text-decoration:none; cursor:pointer; white-space:nowrap}
.mini.solid{background:var(--accent); color:var(--accent-ink)}
.mini:hover{background:var(--accent-soft)} .mini.solid:hover{background:var(--accent-2)}
.rrec-body{margin-top:10px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--raise); font-size:15px; overflow-wrap:anywhere}
.rrec-body > .rec-sub:first-child{margin-top:0}
.olist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.olist > li{font-size:15px; overflow-wrap:anywhere; padding:12px 0; border-top:1.5px solid var(--line)}
.olist > li:first-child{border-top:0; padding-top:0}
.ol-top{display:flex; justify-content:space-between; gap:10px}
.olist .mi{flex:none; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums}
.hrs{display:block; margin-top:6px; font-size:14px; color:var(--ink); background:var(--soft); border-radius:8px; padding:6px 10px}
.links a{font-weight:800; text-decoration:none}
.links a:hover{text-decoration:underline}
.dates{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.dates li{display:flex; gap:12px; align-items:center}
.dates .dd{flex:none; width:48px; text-align:center; border-radius:10px; background:var(--soft); padding:4px 0; font-family:var(--display); font-weight:800; font-size:18px; line-height:1.1}
.dates .dd b{display:block; font-size:11px; font-family:var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.dates strong{display:block; font-size:15px}
.dates span{display:block; font-size:14px; color:var(--muted)}
.dates li.next .dd{background:var(--gold); color:var(--gold-ink)} .dates li.next .dd b{color:var(--gold-ink)}
.dates li.past{opacity:.55}

/* ballot list */
.tools{display:flex; flex-direction:column; gap:12px}
.filter{width:100%; padding:13px 16px; background:var(--surface); border:1.5px solid var(--line); border-radius:12px; font-size:16px; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; font-weight:800; font-size:14px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip .n{font-weight:600; opacity:.75; margin-left:6px}
.level-h{font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:26px 0 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.level-h::after{content:""; flex:1; height:1.5px; background:var(--line); min-width:20px}
.level-h small{font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); font-size:14px}
.races{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); gap:12px}
.race{display:flex; flex-direction:column; gap:0; text-align:left; width:100%; min-width:0; padding:0; cursor:pointer; overflow:hidden; transition:transform .15s, border-color .15s}
.race:hover{border-color:var(--accent); transform:translateY(-2px)}
.race-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:16px 18px 12px}
.race-office{font-weight:800; font-size:18px; margin:0; line-height:1.25}
.race-meta{font-size:14px; color:var(--muted); margin:2px 0 0}
.pill{flex:none; display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--ink); border:1px solid var(--line)}
.faces{display:flex; flex-direction:column; border-top:1.5px solid var(--line)}
.face{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; padding:9px 18px; border-bottom:1px solid var(--line)}
.avatar{position:relative; overflow:hidden; flex:none; width:36px; height:36px; border-radius:50%; background:var(--soft); display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--muted); font-family:var(--display); border:1px solid var(--line)}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%}
.face small{display:block; color:var(--muted); font-size:14px; font-weight:600}
.race-go{font-size:15px; font-weight:800; color:var(--accent); padding:12px 18px; background:var(--raise)}
.empty{padding:22px 18px; color:var(--muted); background:var(--surface); border:1.5px dashed var(--line); border-radius:14px}

/* side-by-side matchup */
.back{background:transparent; border:0; padding:10px 0; font-weight:800; cursor:pointer; color:var(--accent); font-size:16px}
.fight{overflow:hidden}
.fight-head{background:var(--ink); color:var(--bg); padding:20px 22px}
.fight-head .kick{font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 6px}
.fight-head h2{font-family:var(--display); font-weight:800; letter-spacing:-.025em; font-size:clamp(25px,5vw,38px); line-height:1.05; margin:0; text-wrap:balance}
.fight-head p{margin:8px 0 0; font-size:15px; opacity:.9}
.swipe{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--accent-soft); font-size:14px; font-weight:800; color:var(--ink); border-bottom:1.5px solid var(--line)}
.sw-btns{display:flex; gap:6px}
.sw{width:36px; height:36px; border-radius:50%; border:1.5px solid var(--accent); background:var(--surface); color:var(--accent); font-weight:800; cursor:pointer}
.cmp-wrap{overflow-x:auto; scroll-padding-inline:12px; overscroll-behavior-x:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; --cw:300px; --vw:900px}
.cmp{position:relative; display:grid; gap:10px; padding:12px; width:max-content; min-width:100%}
.cmp > .fighter, .cmp > .sv{scroll-snap-align:start}
.fighter{border:1.5px solid var(--line); border-radius:14px; background:var(--raise); padding:16px 10px 14px; text-align:center; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px}
.portrait{position:relative; width:min(100%,128px); aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:var(--soft); display:grid; place-items:center; border:1.5px solid var(--line)}
.portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%}
.portrait .ini{font-family:var(--display); font-weight:800; font-size:26px; color:var(--muted)}
.fname{font-family:var(--display); font-weight:800; letter-spacing:-.015em; font-size:clamp(17px,2.6vw,24px); line-height:1.1; margin:0; overflow-wrap:break-word; hyphens:auto; max-width:100%}
.mate{font-size:14px; color:var(--muted); margin:-2px 0 0}
.party{display:inline-block; max-width:100%; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1.5px solid var(--ink); line-height:1.3}
.credit{display:block; font-size:11px; font-weight:600; color:var(--muted); text-decoration:none; line-height:1.3; max-width:100%}
.credit:hover{text-decoration:underline}
.credit.ask{color:var(--accent); font-weight:700}
.cmp.two .vs{position:absolute; left:50%; top:86px; transform:translateX(-50%); width:46px; height:46px; border-radius:50%; background:var(--gold); color:var(--gold-ink); font-family:var(--display); font-weight:800; font-size:16px; display:grid; place-items:center; border:4px solid var(--surface); z-index:2}
.span{grid-column:1 / -1}
.span-in{position:sticky; left:12px; width:var(--vw); max-width:100%}
.group-h .span-in{background:var(--ink); color:var(--bg); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:9px 14px; border-radius:10px; margin-top:8px}
.stat-label .span-in{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:6px 2px 0}
.sv, .sv-all .span-in{border:1.5px solid var(--line); border-radius:12px; padding:12px; background:var(--surface); font-size:15px; line-height:1.45; min-width:0; overflow-wrap:break-word}
.who-tag{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:0 0 6px}
.na{color:var(--muted); font-size:14px; font-weight:600}
.bul{margin:0; padding:0; list-style:none}
.bul li{position:relative; padding-left:14px; margin:0 0 6px}
.bul li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.tag{display:inline-block; font-size:14px; font-weight:800; padding:3px 10px; border-radius:999px; background:var(--soft); border:1px solid var(--line)}
.tag.in{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.tag-sub{display:block; font-size:13px; color:var(--muted); margin-top:4px; font-weight:600}
.money{display:block; font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.01em; line-height:1.1; font-variant-numeric:tabular-nums}
.money + .na{display:block; margin-top:2px}
.more{margin:8px 0 0; font-size:14px; font-weight:800}
.more a{text-decoration:none}
.bar-mix{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--line); margin:2px 0 10px}
.bar-mix i{display:block; height:100%}
.bar-mix .p{background:var(--people)} .bar-mix .c{background:var(--pac)} .bar-mix .y{background:var(--party)} .bar-mix .s{background:var(--self)} .bar-mix .o{background:var(--other)}
.mix{list-style:none; margin:0 0 6px; padding:0; font-size:14px}
.mix > li{display:flex; align-items:flex-start; gap:8px; margin:0 0 8px}
.mix small{display:block; color:var(--muted); font-size:13px; font-weight:600; line-height:1.35}
.mix .k{flex:none; width:10px; height:10px; border-radius:3px; display:inline-block; margin-top:5px}
.mix .k.p{background:var(--people)} .mix .k.c{background:var(--pac)} .mix .k.y{background:var(--party)} .mix .k.s{background:var(--self)} .mix .k.o{background:var(--other)}
.parts{margin:4px 0 0; padding-left:16px; font-size:13px; color:var(--muted); font-weight:600}
.parts li{margin:3px 0}
.parts b{color:var(--ink)}
.mix.top li{display:block; font-size:14px; margin:0 0 4px}
.mix.top small{display:inline; margin-left:4px}
.mix-txt{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; line-height:1.5; font-weight:600}
.linkrow{display:flex; flex-wrap:wrap; gap:6px}
.linkrow a{font-size:14px; font-weight:800; text-decoration:none; padding:4px 10px; border-radius:999px; border:1.5px solid var(--line)}
.linkrow a:hover{border-color:var(--accent)}
.srclist{margin:0; padding-left:16px; font-size:14px}
.srclist li{margin:3px 0}
.rec-h{margin:0; font-size:15px} .rec-h b{font-family:var(--display); font-size:24px; margin-right:2px}
.rec-h small{display:block; font-size:13px; color:var(--muted); font-weight:600}
.rec-facts{margin:6px 0 0; font-size:14px}
.rec-sub{margin:12px 0 6px; font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.focus{display:flex; flex-wrap:wrap; gap:6px}
.focus span{font-size:13px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--ink)}
.focus small{font-weight:600; color:var(--muted); margin-left:2px}
.bills{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.bills a{font-size:14px; font-weight:700; text-decoration:none; color:var(--ink)}
.bills a:hover{text-decoration:underline}
.bst{display:block; font-size:13px; color:var(--muted); font-weight:600}
.rec-src{margin:10px 0 0; font-size:13px; color:var(--muted)}
.bills.votes li{display:flex; gap:10px; align-items:flex-start}
.vote{flex:none; min-width:46px; text-align:center; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 6px; border-radius:6px; margin-top:2px; border:1.5px solid var(--ink)}
.vote.yes{background:var(--ink); color:var(--bg)}
.vote.no{background:transparent; color:var(--ink)}
.vote.nv{border-style:dashed; border-color:var(--muted); color:var(--muted); text-transform:none; letter-spacing:0; font-weight:700}
.key .span-in{border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--raise)}
.key-h{margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.keylist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:6px 18px; font-size:14px}
.keylist li{display:flex; gap:8px; align-items:flex-start}
.keylist .k{flex:none; width:10px; height:10px; border-radius:3px; margin-top:5px}
.keylist .k.p{background:var(--people)} .keylist .k.c{background:var(--pac)} .keylist .k.y{background:var(--party)} .keylist .k.s{background:var(--self)} .keylist .k.o{background:var(--other)}
.swipe.phone-only{display:none}
.fnote{font-size:14px; color:var(--muted); margin:14px 2px 0; max-width:76ch}

/* report a problem: always the last thing before the footer */
.report{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:28px; padding:16px 18px; border-radius:14px; border:1.5px dashed var(--line); background:var(--surface)}
.report p{margin:0; font-size:15px}
.btn-ghost{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; padding:9px 16px; border-radius:999px; border:1.5px solid var(--accent); color:var(--accent); text-decoration:none; white-space:nowrap}
.btn-ghost:hover{background:var(--accent-soft)}

footer{margin-top:48px; padding-block:24px 48px; border-top:1.5px solid var(--line); font-size:14px; color:var(--muted)}
footer strong{color:var(--ink)}
footer ul{padding-left:18px; margin:8px 0}
footer .logo{font-size:18px; margin-bottom:8px}

.has-results .hero{padding-block:18px 8px}
.has-results h1{font-size:clamp(26px,4.5vw,36px); margin-bottom:12px}
.has-results .lede,.has-results .eyebrow-hero,.has-results .privacy{display:none}

/* tablet */
@media (max-width:900px){
  .glance{grid-template-columns:minmax(0,1fr)}
  .extra{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
}
/* phone */
@media (max-width:640px){
  body{font-size:16px}
  .summary{grid-template-columns:minmax(0,1fr)}
  .map{min-height:200px; border-left:0; border-top:1.5px solid var(--line)}
  .sum-info{padding:18px}
  .date-big{font-size:23px}
  .props{grid-template-columns:minmax(0,1fr); margin-top:22px}
  .hero{padding-block:26px 20px}
  .btn{padding:12px 16px; font-size:15px}
  .locate{width:42px; height:42px}
  .search input{font-size:17px}
  .panel{padding:18px}
  .race-top{padding:14px 14px 10px} .face{padding:9px 14px} .race-go{padding:11px 14px}
  .fight-head{padding:18px}
  .portrait{width:min(100%,92px)}
  .fighter{padding:12px 6px 10px}
  .fname{font-size:16px}
  .sv, .sv-all .span-in{padding:10px; font-size:14px}
  .money{font-size:21px}
  .cmp{gap:8px; padding:10px}
  .cmp-wrap{scroll-padding-inline:10px}
  .span-in{left:10px}
  .swipe.phone-only{display:flex}
  .cmp.two .vs{top:64px; width:38px; height:38px; font-size:14px}
  .party{font-size:11px; padding:3px 8px}
}
@media (prefers-reduced-motion:reduce){ .race{transition:none} .race:hover{transform:none} }
/* Politics 101 */
.learn-hero{padding-block:48px 12px}
.learn-hero h1{font-size:clamp(40px,7vw,72px)}
.toc{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px}
.toc a{font-size:14px; font-weight:600; text-decoration:none; padding:7px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink)}
.toc a:hover{border-color:var(--accent)}
.lsec{margin-top:44px; scroll-margin-top:80px}
.lsec > h2{font-family:var(--display); font-weight:800; letter-spacing:-.025em; font-size:clamp(28px,4vw,38px); line-height:1.05; margin:0 0 6px}
.lsec > p.intro{color:var(--muted); margin:0 0 16px; max-width:66ch}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px}
.tile{padding:20px; min-width:0}
.tile h3{margin:0 0 2px; font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.01em}
.tile .where{font-size:13px; font-weight:700; color:var(--accent); margin:0 0 10px}
.tile p{margin:0 0 8px; font-size:15px}
.tile ul{margin:0; padding-left:18px; font-size:14px; color:var(--muted)}
.tile ul li{margin:3px 0}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; min-width:620px; font-size:14px}
.tbl th,.tbl td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tbl td:first-child{font-weight:700}
.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.steps li{counter-increment:s; display:flex; gap:14px; align-items:flex-start; padding:16px 18px}
.steps li::before{content:counter(s); flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-family:var(--display); font-weight:800}
.steps strong{display:block; font-size:16px}
.steps span{display:block; color:var(--muted); font-size:14px}
.gloss-tools{margin-bottom:12px}
.gloss{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:10px}
.gterm{padding:14px 16px; scroll-margin-top:80px}
.gterm dt{font-weight:800; font-size:16px}
.gterm dd{margin:4px 0 0; font-size:14px; color:var(--muted)}
.gterm .ex{display:block; margin-top:6px; font-size:13px; color:var(--ink)}
.gterm:target{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold)}
.who{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:10px}
.who div{padding:14px 16px}
.who strong{display:block}
.who span{font-size:14px; color:var(--muted)}