/* Voteparty: travel-poster mid-century. Flat colour, layered hills, condensed caps. */
:root{
  --sky:#F0DDB8; --cream:#FAF1DC; --sun:#E8A23B; --clay:#C9663A; --brown:#8E4A35; --pine:#2F5A55; --ink:#1F3B3A;
  --mute:#5E6B66; --line:#D9C9A3;
  --head:"Oswald","Arial Narrow",Impact,sans-serif; --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.55 var(--body);overflow-x:hidden}
a{color:var(--brown)}
h1,h2,h3,h4{font-family:var(--head);text-transform:uppercase;margin:0;line-height:1;letter-spacing:.015em}
.w{max-width:1000px;margin:0 auto;padding:0 24px}
.sr{position:absolute;left:-9999px}
.tiny{font-size:.85rem;color:var(--mute)}

/* poster header (landing = tall, inner pages = short) */
.poster{position:relative;background:var(--sky);overflow:hidden}
.poster::before{content:"";position:absolute;right:5%;top:12%;width:clamp(80px,12vw,150px);aspect-ratio:1/1;border-radius:50%;background:#E8A23B}
.poster.short::before{right:12%;top:18px;width:clamp(56px,11vw,110px)}
.poster svg.land{position:absolute;left:0;bottom:0;width:100%;height:80%}
.poster .in{position:relative;max-width:1000px;margin:0 auto;padding:20px 24px 0}
.nav{display:flex;justify-content:space-between;align-items:center;font:600 .78rem var(--head);letter-spacing:.22em;text-transform:uppercase}
.nav a{color:var(--ink);text-decoration:none}
.logo{display:flex;align-items:center;gap:10px;font:700 1.35rem var(--head);letter-spacing:.12em}
.logo img{width:30px;height:30px}
.nav .r{display:flex;gap:22px;align-items:center}
.nav .r a:hover{text-decoration:underline;text-underline-offset:5px}
.head{text-align:center;padding:62px 0 270px}
.head h1{font-weight:700;font-size:clamp(2.9rem,9.6vw,7.2rem);line-height:.92}
.head .sub{font:500 1rem var(--head);letter-spacing:.3em;text-transform:uppercase;margin-top:16px}
.poster.short .head{padding:40px 0 100px}
.poster.short .head h1{font-size:clamp(2.2rem,6vw,3.8rem)}
.poster.short .land{height:90%}

/* address bar */
.bar{background:var(--ink);color:var(--cream);padding:30px 24px 38px}
.bar .in{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:34px;align-items:center}
.bar h2{font-weight:600;font-size:1.5rem;letter-spacing:.07em;margin-bottom:8px}
.bar p{margin:0;opacity:.92}
form.addr{display:flex;background:var(--cream);padding:5px}
form.addr input{flex:1;min-width:0;border:0;background:none;font:500 1.1rem var(--body);padding:12px 14px;outline:0;color:var(--ink)}
form.addr input:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
.bar .tiny{color:var(--cream);opacity:.8;display:block;margin-top:8px}
.msg{min-height:1.4em;margin-top:8px;font-weight:600}
.msg.err{color:var(--sun)}

/* buttons */
.btn{font:600 .95rem var(--head);letter-spacing:.14em;text-transform:uppercase;border:3px solid var(--ink);background:var(--sun);color:var(--ink);padding:12px 22px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.1}
.btn:hover{background:var(--clay);color:var(--cream);border-color:var(--ink)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.btn.mint{background:var(--pine);color:var(--cream)}
.btn.pink{background:var(--clay);color:var(--cream)}
.btn.on{background:var(--ink);color:var(--cream)}
.btn.sm{padding:8px 14px;font-size:.8rem}
form.addr .btn{border:0;padding:0 26px}

/* landing sections */
.promises{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-bottom:3px solid var(--ink)}
.promise{padding:28px 26px 30px;border-right:3px solid var(--ink)}
.promise:last-child{border-right:0}
.promise .n{font:700 2.8rem var(--head);color:var(--clay);line-height:1}
.promise h3{font-size:1.35rem;margin:8px 0 6px}
.promise p{margin:0;color:var(--mute)}
.sec-title{font-weight:700;font-size:clamp(2rem,5vw,3rem);margin:56px 0 18px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-bottom:30px}
.how .n{font:700 3.4rem var(--head);color:var(--sun);line-height:1;-webkit-text-stroke:2px var(--ink)}
.how b{font:600 1.15rem var(--head);letter-spacing:.06em;text-transform:uppercase;display:block;margin:6px 0 4px}
footer{background:var(--ink);color:var(--cream);margin-top:60px;padding:26px 24px 44px;font-size:.88rem}
footer .in{max-width:1000px;margin:0 auto}
footer a{color:var(--sun)}
@media(max-width:760px){
  .bar .in,.how,.promises{grid-template-columns:minmax(0,1fr)}
  .promise{border-right:0;border-bottom:3px solid var(--ink)}.promise:last-child{border-bottom:0}
  .head{padding-bottom:210px}.poster.short .head{padding-bottom:70px}
  .poster:not(.short) svg.land{height:66%}
}

/* prose */
.prose{max-width:720px}
.prose h2{font-size:1.9rem;margin:38px 0 10px}
.prose li{margin:6px 0}

/* ballot header */
.bh{border-bottom:3px solid var(--ink);padding:26px 0 18px}
.bh h1{font-size:clamp(1.8rem,5vw,2.6rem)}
.bh .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:2px solid var(--ink);padding:2px 12px;font:600 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase}
.chip a{color:var(--brown)}
.prog{height:14px;border:3px solid var(--ink);background:var(--cream);margin:16px 0 6px}
.prog>i{display:block;height:100%;width:0;background:var(--clay);transition:width .3s}
.tabs{display:flex;gap:10px;margin:18px 0}.tabs .btn{flex:1;text-align:center}

/* tiles */
.sect{font:600 .82rem var(--head);letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin:28px 0 10px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0;border-top:3px solid var(--ink)}
.tile{text-align:left;font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:14px 4px;cursor:pointer;display:flex;gap:12px;align-items:center}
.tile:hover{background:var(--sky)}
.tile .dot{flex:none;width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.tile.done .dot{background:var(--sun)}
.tile b{display:block;line-height:1.2;font-weight:600}
.tile small{color:var(--mute)}

/* race view */
.cv-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:22px 0 16px;flex-wrap:wrap}
.cv h2{font-weight:700;font-size:clamp(2.2rem,6vw,3.6rem)}
.note{background:var(--sky);border-left:6px solid var(--sun);padding:10px 14px;margin:14px 0;font-size:.95rem}
.cards{margin-top:16px}
.cand{border-top:3px solid var(--ink);padding:24px 0}
.cand.sel{background:linear-gradient(90deg,var(--sky),transparent 70%)}
.cand.writein{border-top-style:dashed;background-image:repeating-linear-gradient(135deg,transparent 0 12px,rgba(31,59,58,.04) 12px 24px)}
.cand.writein.sel{background-image:linear-gradient(90deg,var(--sky),transparent 70%)}
.badge.writein{border-style:dashed;font-style:italic;background:transparent}
.cand-top{display:flex;gap:16px;align-items:center}
.av{flex:none;width:64px;height:64px;border-radius:50% 50% 0 0;display:grid;place-items:end center;padding-bottom:6px;font:700 1.25rem var(--head);color:var(--cream);letter-spacing:.04em}
.cand h3{font-weight:600;font-size:1.9rem;letter-spacing:.03em}
.badge{display:inline-block;font:600 .68rem var(--head);letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--ink);padding:1px 8px;margin-left:8px;vertical-align:middle}
.badge.thin{background:var(--sun)}
.sig{font-weight:600;color:var(--brown);margin:12px 0 4px;font-size:1.08rem}
.bio{color:var(--mute);margin:6px 0}
.claims{padding-left:20px;margin:10px 0}
.claims li{margin:7px 0}
sup a{font:600 .72rem var(--head);color:var(--clay);text-decoration:none;padding:0 2px}
details.src{margin-top:10px;font-size:.9rem}
details.src summary{cursor:pointer;font:600 .8rem var(--head);letter-spacing:.14em;text-transform:uppercase}
details.src ol{margin:8px 0;padding-left:22px}
details.src li{margin:4px 0;word-break:break-word}
.pickrow{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.yn .btn{font-size:1.6rem;padding:18px}
.yn .btn.on{outline:4px solid var(--sun);outline-offset:2px}
.args{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:16px 0}
.args>div{border-top:3px solid var(--ink);padding-top:10px}
.args h4{font-size:1.15rem;margin-bottom:6px}
.quote{border-left:6px solid var(--pine);padding:4px 14px;margin:14px 0;background:var(--sky);font-size:.95rem}
.stepnav{display:flex;justify-content:space-between;gap:10px;margin:26px 0}
@media(max-width:620px){.args,.yn{grid-template-columns:1fr}}

/* cheat sheet */
.sheet{border-top:3px solid var(--ink);margin-top:6px}
.srow{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.18rem}
.srow .o{color:var(--mute)}
.srow .v{font:600 1.2rem var(--head);letter-spacing:.04em;text-transform:uppercase;text-align:right}
.srow .v.none{color:var(--clay)}
.logi{margin:20px 0;padding:0;list-style:none}.logi li{margin:8px 0}

@media print{
  body{background:#fff;color:#000}
  .poster,.bar,.tabs,.noprint,footer{display:none!important}
  .bh{border-color:#000}.srow{font-size:1rem}
}

/* dossiers */
details.dossier{margin:16px 0 6px;border-top:1px solid var(--line);padding-top:10px}
details.dossier>summary{cursor:pointer;font:600 .86rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:6px 0}
.snap{font-size:1.05rem;margin:8px 0 4px}
.dsec{margin:18px 0}
.dsec h4{font-size:1rem;letter-spacing:.14em;color:var(--clay);border-bottom:2px solid var(--ink);padding-bottom:4px;margin-bottom:8px}
.dlist{margin:6px 0;padding-left:20px}.dlist li{margin:6px 0}
.controv{border-left:6px solid var(--ink);padding:6px 0 6px 14px;margin:12px 0;background:linear-gradient(90deg,var(--sky),transparent 60%)}
.controv .ctop{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.controv p{margin:4px 0}.resp{color:var(--mute)}
.none{background:var(--sky);padding:10px 14px;margin:6px 0;font-size:.95rem}
.status{font:600 .7rem var(--head);letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--ink);padding:1px 8px;background:var(--cream)}
.status.s-convicted,.status.s-found-liable,.status.s-official-finding,.status.s-pleaded{background:var(--clay);color:var(--cream)}
.status.s-charged,.status.s-sued{background:var(--sun)}
.status.s-dismissed,.status.s-acquitted{background:var(--pine);color:var(--cream)}
.status.f-supported{background:var(--pine);color:var(--cream)}.status.f-misleading,.status.f-unsupported{background:var(--clay);color:var(--cream)}.status.f-mixed{background:var(--sun)}

/* coverage map */
.mapsec{padding:10px 0 20px}
.sect-fold{margin:14px 0}.sect-fold>summary{cursor:pointer;list-style:revert}
.maplist a{color:var(--pine);font-weight:700}
.lead2{margin:-6px 0 16px;color:var(--mute);max-width:36em}
.mapcard{position:relative;background:var(--sky);border:3px solid var(--ink);padding:14px 14px 12px}
.mapstats{font:500 1rem var(--head);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.mapstats b{font-size:1.5rem;color:var(--clay)}
.mapbox svg{display:block;width:100%;height:auto;background:var(--cream);border:2px solid var(--ink)}
.mapbox .c{fill:#E3D2A8;stroke:#F4E9CB;stroke-width:.5;vector-effect:non-scaling-stroke}
.mapbox .c.st-live{fill:#9DB59A}.mapbox .c.st-building{fill:#EFD9A0}
.mapbox .c.building{fill:var(--sun);stroke:var(--ink)}
.mapbox .c.live{fill:var(--pine);stroke:var(--ink)}
.mapbox .c:hover{fill:#D3BC87}.mapbox .c.live:hover{fill:#24463F}.mapbox .c.st-live:hover{fill:#86A383}.mapbox .c.st-building:hover{fill:#E3C97F}
.mapbox .outline path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none;stroke-linejoin:round}
.mapbox svg.zoomed .c{stroke:#D9C79B}
.mapbox svg.zoomed .c.live,.mapbox svg.zoomed .c.building{stroke:var(--ink)}
.mapbox .pin{pointer-events:none}
.mapbox .pin .dot{fill:var(--cream);stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mapbox .pin.building .dot{fill:var(--sun)}
.mapbox .pin .halo{fill:var(--sun);opacity:.55;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
.mapbox .pin.live .halo{fill:var(--pine)}
@keyframes ping{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.mapbox .pin .halo{animation:none;opacity:.35}}
.maptip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:var(--cream);padding:6px 10px;font-size:.85rem;line-height:1.35;max-width:190px}
.mapback{position:absolute;right:22px;top:58px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font:600 .75rem var(--head);letter-spacing:.1em;text-transform:uppercase}
.sw{display:inline-block;width:14px;height:14px;border:2px solid var(--ink);margin-right:6px;vertical-align:-2px}
.sw.live{background:var(--pine)}.sw.building{background:var(--sun)}.sw.st{background:#9DB59A}.sw.stb{background:#EFD9A0}.sw.nope{background:#E3D2A8}
.maplist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:4px;font-size:.95rem}
[hidden]{display:none!important}

.mapbox .pinin{transform:scale(var(--k,1))}
.mapbox svg.zoomed .pin{opacity:0}                 /* zoomed in, the county shape itself is big enough to read */
.mapback{background:var(--cream)}
@media (min-width:761px){.poster:not(.short) svg.land{height:70%}}

/* early voting card */
.early{border:3px solid var(--ink);background:var(--sky);padding:14px 16px;margin:14px 0}
.early h2{font-size:1.35rem;margin-bottom:6px}
.early p{margin:6px 0}
.earlystat{font:600 1.35rem var(--head);letter-spacing:.03em;text-transform:uppercase;color:var(--brown)}
.earlystat.open{color:var(--pine)}
.early details{margin:8px 0}.early summary{cursor:pointer;font:600 .8rem var(--head);letter-spacing:.14em;text-transform:uppercase}
.sched{border-collapse:collapse;margin:8px 0;font-size:.95rem;width:100%}.sched td{padding:4px 12px 4px 0;border-bottom:1px solid var(--line);vertical-align:top}
.early-notes{margin:8px 0;padding-left:20px}.early-notes li{margin:4px 0}

/* the Ohio map as a tool: map on the left; summary, county picker and key on the right */
.mapgrid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:28px;align-items:center}
.mapgrid .mapbox svg{background:transparent;border:0;filter:drop-shadow(0 5px 0 rgba(31,59,58,.16))}
.mapside .mapstats{margin:0 0 14px;line-height:1.5}
.mapside .mapl{display:block;font:600 .8rem var(--head);letter-spacing:.14em;text-transform:uppercase;margin:6px 0 4px}
.mapside select{width:100%;font:1rem var(--body);padding:10px 12px;border:3px solid var(--ink);background:#fff;color:var(--ink);margin-bottom:10px}
.mapside .legend{flex-direction:column;gap:8px;margin-top:14px}
@media (max-width:760px){.mapgrid{grid-template-columns:1fr}.mapgrid .mapbox{max-width:380px;margin:0 auto}}

/* ---------- party pooper: party labels next to names (the site keeps its normal look) ---------- */
.ptag{display:inline-block;margin-left:10px;padding:1px 9px;border:2px solid var(--mute);color:var(--mute);background:transparent;font:600 .72rem var(--head);letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.ptrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 4px}
.stance{margin:0;font:600 1rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--brown)}
.pp{display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:transparent;border:3px solid var(--ink);color:var(--ink);padding:6px 12px;font:600 .8rem var(--head);letter-spacing:.14em;text-transform:uppercase}
.pp .knob{width:34px;height:18px;border:2px solid var(--ink);border-radius:999px;position:relative;background:var(--cream)}
.pp .knob::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform .15s}
.pp[aria-checked="true"] .knob::after{transform:translateX(16px)}
.ppnote{margin:2px 0 8px;font-size:.85rem;color:var(--mute)}

@media print{#pooperbar{display:none!important}html[data-pooper] body{background:#fff}html[data-pooper] .cand,html[data-pooper] .tile,html[data-pooper] .sheet,html[data-pooper] .bh{transform:none;background:#fff;border:1px solid #000}}


/* folding: sections on the overview, and people inside a race */
.foldbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.sect-fold>summary.sect{margin:0;padding:10px 0;cursor:pointer}
.cand-toggle{margin-left:auto;align-self:flex-start;cursor:pointer;background:transparent;border:2px solid var(--ink);color:var(--ink);font:600 .75rem var(--head);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}
.cand.folded .cand-body{display:none}
.cand.folded{padding-bottom:14px}
.cand.folded .sig{margin-bottom:6px}
@media print{.cand.folded .cand-body{display:block!important}.cand-toggle{display:none}}

/* TL;DR boxes and the yes/no summary on ballot measures */
.tldr{margin:10px 0;padding:10px 14px;border-left:6px solid var(--clay);background:var(--sky);font-size:1.02rem;line-height:1.45}
.tldr b{font:700 .8rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-right:6px}
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.yesno>div{border:3px solid var(--ink);padding:10px 14px;background:var(--cream)}
.yesno h4{margin:0 0 4px}
.yesno .yn-y{border-color:var(--pine)}.yesno .yn-n{border-color:var(--clay)}
@media (max-width:640px){.yesno{grid-template-columns:1fr}}

/* moving through the ballot: a NEXT button at the top, the bottom, and floating on the right edge */
.cv-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cv-head .tiny{margin-left:auto}
.nexttop{background:var(--sun);border-color:var(--ink);color:var(--ink)}
.stepnav .nextbig{font-size:1.15rem;padding:14px 28px;background:var(--sun);border:3px solid var(--ink);color:var(--ink)}
.nextfab{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:40;background:var(--sun);color:var(--ink);border:3px solid var(--ink);padding:18px 14px;font:700 1.05rem var(--head);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--ink);writing-mode:vertical-rl;text-orientation:mixed}
.nextfab:hover{background:#f3b955}
@media (max-width:640px){.nextfab{top:auto;bottom:16px;transform:none;writing-mode:horizontal-tb;padding:12px 18px}}
.backfab{position:fixed;left:14px;top:50%;transform:translateY(-50%) rotate(180deg);z-index:40;background:var(--cream);color:var(--ink);border:3px solid var(--ink);padding:18px 14px;font:700 1.05rem var(--head);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:-4px -4px 0 var(--ink);writing-mode:vertical-rl;text-orientation:mixed}
.backfab:hover{background:var(--sun)}
@media (max-width:640px){.backfab{top:auto;bottom:16px;transform:none;writing-mode:horizontal-tb;padding:12px 18px;box-shadow:4px 4px 0 var(--ink)}}
@media print{.nextfab,.backfab{display:none}}


.takeit{border:3px solid var(--ink);padding:12px 16px;margin:16px 0;background:var(--sky)}
.takeit h3{margin:0 0 8px}
.takeit .pickrow{display:flex;gap:10px;flex-wrap:wrap}

/* report form */
.rform{display:grid;gap:6px;max-width:640px;margin:10px 0 18px}
.rform label{font:600 .95rem var(--head);letter-spacing:.06em;text-transform:uppercase;margin-top:10px}
.rform input,.rform select,.rform textarea{font:1rem var(--body);padding:10px 12px;border:3px solid var(--ink);background:#fff;color:var(--ink);width:100%}
.rform .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.rform .btn{justify-self:start;margin-top:10px}
.msg.ok{color:var(--pine);font-weight:700}
.reportlink{font-size:.8rem}
.rform .msg.err{color:var(--brown)}
.rform .msg a{color:var(--brown)}

/* the address box on a browse page */
.addrbox{border:3px solid var(--ink);background:#fff;padding:14px 18px;margin:0 0 16px}
.addrbox h3{margin:0 0 6px}
.addrbox .addr{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.addrbox .addr input{flex:1 1 260px;font:1rem var(--body);padding:10px 12px;border:3px solid var(--ink)}
.addrbox .msg.err{color:var(--brown)}

.note.prov{border:2px dashed var(--clay);background:#fff3e0;color:var(--ink)}

.srow .chg{flex:none;align-self:center;margin-left:4px}

/* Party pooper ON: the same site, plus a party tag on each candidate and a thin stripe of that color on the card.
   Red, blue and plum mean a party and nothing else. The banner is small and friendly, with one burst of confetti when it is switched on. */
html[data-pooper="labels"]{--p-r:#B23A30;--p-d:#2E5A8E;--p-o:#6B4A8A}
html[data-pooper="labels"] .ptag{border:0;border-radius:999px;color:#fff;background:var(--mute);padding:2px 10px;font-size:.68rem;letter-spacing:.08em}
html[data-pooper="labels"] .ptag.p-r{background:var(--p-r)}html[data-pooper="labels"] .ptag.p-d{background:var(--p-d)}html[data-pooper="labels"] .ptag.p-o{background:var(--p-o)}
html[data-pooper="labels"] .cand.p-r,html[data-pooper="labels"] .cand.p-d,html[data-pooper="labels"] .cand.p-o{border-left:5px solid;padding-left:14px}html[data-pooper="labels"] .cand.p-r{border-left-color:var(--p-r)}html[data-pooper="labels"] .cand.p-d{border-left-color:var(--p-d)}html[data-pooper="labels"] .cand.p-o{border-left-color:var(--p-o)}
html[data-pooper="labels"] .pp[aria-checked="true"]{background:var(--sun)}
#pooperbar{display:none}
html[data-pooper="labels"] #pooperbar{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--ink);color:var(--cream);padding:7px 16px;font:600 .85rem var(--body);overflow:hidden}
html[data-pooper="labels"] #pooperbar b{font-family:var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
html[data-pooper="labels"] #pooperbar button{background:transparent;color:var(--cream);border:2px solid var(--cream);padding:3px 10px;font:600 .75rem var(--head);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
html[data-pooper="labels"] #pooperbar button:hover{background:var(--cream);color:var(--ink)}
#pooperbar .confetti{position:absolute;inset:0;pointer-events:none}
#pooperbar .confetti i{position:absolute;top:-8px;width:6px;height:10px;border-radius:1px;opacity:0;animation:ppfall 1.6s ease-out forwards}
@keyframes ppfall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(46px) rotate(240deg)}}
@media (prefers-reduced-motion:reduce){#pooperbar .confetti{display:none}}
@media (max-width:640px){html[data-pooper="labels"] #pooperbar{flex-wrap:nowrap;padding:6px 12px}#pooperbar .more{display:none}}
@media print{html[data-pooper="labels"] .cand{border-left:0;padding-left:0}html[data-pooper="labels"] .ptag{color:#000;background:none;border:1px solid #000}}