:root{
  /* Nothing on this site is pure white. A sheet of #FFF against the warm
     cream the page is printed on reads as a hole punched in the paper,
     which is what made the race lists look unfinished. Every card and
     panel sits a shade above the paper instead of outside it. */
  --paper:#F7F5F1; --surface:#FDFBF8; --surface2:#F4F0E9;
  --ink:#171310; --ink2:#4A423D; --muted:#7C726B; --rule:#E3DCD3; --rule2:#EFE9E1;
  --accent:#C00000; --accent-soft:#FBEBEA; --accent-ink:#9C0000;
  --dem:#1F6FCC; --rep:#C8322E; --ind:#5F5280; --on-party:#FFFFFF;
  --for:#0089A0; --against:#B26A00;
  --m0:#EDF4F6; --m1:#C8E2E7; --m2:#9BCCD6; --m3:#66B1BF; --m4:#2F91A3; --m5:#0F6F81; --m6:#0A5262;
  --dead:#E7E2DA;
  --shadow:0 1px 2px rgba(23,19,16,.05),0 8px 24px -12px rgba(23,19,16,.12);
  --display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141210; --surface:#1C1917; --surface2:#221E1B;
  --dem:#4C93E8; --rep:#E06A62; --ind:#A79BC9; --on-party:#141210;
  --ink:#F3EEE8; --ink2:#C6BDB4; --muted:#948A81; --rule:#332D28; --rule2:#282320;
  --accent:#FF6B5E; --accent-soft:#2B1815; --accent-ink:#FF8A80; --for:#22A2B8; --against:#C4841A;
  --m0:#1D2224; --m1:#1E3A40; --m2:#235A64; --m3:#2A7C8B; --m4:#3C9DAE; --m5:#64BCCB; --m6:#9BD8E2;
  --dead:#262220;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --paper:#141210; --surface:#1C1917; --surface2:#221E1B;
  --dem:#4C93E8; --rep:#E06A62; --ind:#A79BC9; --on-party:#141210;
  --ink:#F3EEE8; --ink2:#C6BDB4; --muted:#948A81; --rule:#332D28; --rule2:#282320;
  --accent:#FF6B5E; --accent-soft:#2B1815; --accent-ink:#FF8A80; --for:#22A2B8; --against:#C4841A;
  --m0:#1D2224; --m1:#1E3A40; --m2:#235A64; --m3:#2A7C8B; --m4:#3C9DAE; --m5:#64BCCB; --m6:#9BD8E2;
  --dead:#262220;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.01em}
a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* min-width:0 matters: .wrap is a flex child inside a <section>, and a flex
   child defaults to min-width:auto, which lets a long heading size the whole
   page from its own max-content width instead of the phone's. */
/* padding-inline, not the padding shorthand, so an inline style that sets
   `padding: 22px 0 34px` on a .wrap cannot silently take the side gutter with
   it. That exact mistake put a line of type against the edge of the screen
   twice in one afternoon. */
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px;min-width:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}

header.mast{border-bottom:1px solid var(--rule);background:var(--surface);position:relative;z-index:50}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.mark .bar{width:4px;height:28px;background:var(--accent);border-radius:1px}
.mark h1{font-size:24px;line-height:1}
.mark .sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.mast-right{display:flex;align-items:center;gap:10px}
.btn{font-family:var(--body);font-size:13.5px;font-weight:500;background:var(--surface2);
  border:1px solid var(--rule);color:var(--ink2);padding:7px 13px;border-radius:99px;cursor:pointer;
  text-decoration:none;display:inline-block;line-height:1.3}
.btn:hover{border-color:var(--muted);color:var(--ink)}
.crumb{background:var(--surface2);border-bottom:1px solid var(--rule)}
.crumb-in{display:flex;align-items:center;gap:8px;padding:9px 0;font-family:var(--mono);font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.crumb-in a{color:var(--ink2);text-decoration:none}
.crumb-in a:hover{color:var(--accent)}
.crumb-in .sep{opacity:.5}

/* ---------- landing ---------- */
.hero{padding:44px 0 12px}
.hero h2{font-size:clamp(28px,4.4vw,42px);line-height:1.08;max-width:19ch}
.hero p.lede{font-size:17px;color:var(--ink2);max-width:62ch;margin:14px 0 0}
.herogrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start;padding:10px 0 42px}
.natmap{position:relative}
svg.usmap{width:100%;height:auto;display:block}
svg.usmap path{stroke:var(--surface);stroke-width:.75;transition:opacity .12s}
svg.usmap path.live{cursor:pointer}
svg.usmap path.live:hover{stroke:var(--ink);stroke-width:1.6}
svg.usmap path.sel{stroke:var(--accent);stroke-width:2}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11.5px;padding:7px 9px;border-radius:3px;line-height:1.5;white-space:nowrap;opacity:0;transition:opacity .1s;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.25)}

.racelist{display:flex;flex-direction:column;gap:12px}
.racecard{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:16px 18px;transition:border-color .12s,transform .12s}
.racecard:hover{border-color:var(--accent);transform:translateY(-1px)}
.racecard .rc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.racecard h3{font-size:17px}
.racecard .st{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.vs{display:flex;align-items:center;gap:9px;font-size:14.5px;margin-bottom:9px;flex-wrap:wrap}
.vs b{font-weight:600}
.vs .x{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.racecard .hook{font-size:13.5px;color:var(--ink2);margin:0}
.racecard .go{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:10px;letter-spacing:.06em;text-transform:uppercase}

.chip{font-family:var(--mono);font-size:11px;font-weight:600;border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--muted);flex:none}

.explain{border-top:1px solid var(--rule);padding:34px 0 46px}
.egrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:18px}
.egrid h4{font-family:var(--display);font-size:16px;margin-bottom:6px}
.egrid p{margin:0;font-size:13.5px;color:var(--ink2)}

/* ---------- state page ---------- */
.statehead{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;padding:34px 0 26px}
.statehead svg{width:100%;height:auto}
.statehead h2{font-size:32px}
.statehead p{margin:8px 0 0;color:var(--ink2);font-size:14.5px;max-width:60ch}

/* ---------- sticky compare ---------- */
.sticky{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:var(--shadow)}
.headgrid{display:grid;grid-template-columns:1fr 1fr}
.headcell{padding:14px 20px 13px;display:flex;align-items:center;gap:10px;min-width:0}
.headcell+.headcell{border-left:1px solid var(--rule)}
.headcell .nm{font-family:var(--display);font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.headcell .st{font-size:12px;color:var(--muted);margin-left:auto;text-align:right;line-height:1.3;max-width:48%}

section.led{border-bottom:1px solid var(--rule)}
.sechead{display:flex;align-items:baseline;gap:14px;padding:36px 0 6px;flex-wrap:wrap;min-width:0}
.sechead h2,.sechead .no{min-width:0;overflow-wrap:break-word}
.sechead .no{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.08em}
.sechead h2{font-size:25px}
.secsub{margin:0 0 20px;color:var(--ink2);font-size:14.5px;max-width:78ch;min-width:0;overflow-wrap:anywhere}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-bottom:36px}
.col{min-width:0;display:flex;flex-direction:column;gap:16px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:18px}
.card h3{font-size:16px;margin-bottom:2px}
.card .cap{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.col>.colname{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:15px;padding:0 0 6px;margin-bottom:8px;border-bottom:2px solid var(--ink);color:var(--ink)}

.receipt{background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:20px 20px 18px;position:relative;box-shadow:var(--shadow)}
.receipt::before{content:"";position:absolute;left:0;right:0;top:-1px;height:6px;background:repeating-linear-gradient(90deg,var(--paper) 0 4px,transparent 4px 10px)}
.receipt .rh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:7px;margin-bottom:11px;gap:10px}
.receipt .rh span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.line{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:13px;padding:4px 0}
.line .lbl{color:var(--ink2);white-space:nowrap}
.line .dots{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-3px)}
.line .val{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.line.total{border-top:1px solid var(--ink);margin-top:8px;padding-top:9px;font-size:15px}
.line.total .lbl{color:var(--ink);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px}
.stamp{margin-top:14px;display:inline-block;border:1.5px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:2px;transform:rotate(-1.4deg)}
.asof{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:12px;line-height:1.45}


.mapwrap{position:relative}
.scale{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.scale .sw{width:24px;height:9px;border-radius:1px;border:1px solid var(--rule)}
.scale .lab{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.statelist{margin-top:12px;border-top:1px solid var(--rule2)}
.strow{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid var(--rule2);font-size:13px}
.strow .ab{font-family:var(--mono);font-weight:600;width:28px;flex:none}
.strow .nm{color:var(--ink2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strow .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.strow .pc{font-family:var(--mono);font-size:12.5px;font-weight:600;width:52px;text-align:right;flex:none}

.meter{height:12px;border-radius:2px;overflow:hidden;display:flex;background:var(--rule2);margin:8px 0 6px}
.meter i{display:block;height:100%}
.meterkey{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted)}

.dv{margin-top:6px}
.dvrow{padding:9px 0;border-bottom:1px solid var(--rule2)}
.dvrow:last-child{border-bottom:0}
.dvtop{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:5px}
.dvname{font-size:13.5px;font-weight:600;min-width:0}
.dvamt{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dvtrack{position:relative;height:14px;background:var(--rule2);border-radius:2px}
.dvtrack i{position:absolute;top:0;height:100%;border-radius:2px;box-shadow:0 0 0 2px var(--surface)}
.dvmeta{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.legend{display:flex;gap:16px;margin:2px 0 10px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.legend i{width:14px;height:10px;border-radius:2px;display:block}

details.grp{border:1px solid var(--rule);border-radius:4px;background:var(--surface);margin-top:8px}
details.grp>summary{cursor:pointer;padding:11px 14px;font-size:13.5px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary::after{content:"+";font-family:var(--mono);color:var(--muted);font-size:15px}
details.grp[open]>summary::after{content:"\2212"}
details.grp .body{padding:0 14px 14px;font-size:13.5px;color:var(--ink2)}
details.grp .body p{margin:0 0 9px}

.ledger{background:var(--surface);border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.lrow{border-top:1px solid var(--rule)}
.lrow:first-child{border-top:0}
.ltopic{padding:16px 18px 12px;background:var(--surface2)}
.ltopic h3{font-size:18px}
.ltopic p{margin:4px 0 0;font-size:13.5px;color:var(--ink2);max-width:80ch}
.lcells{display:grid;grid-template-columns:1fr 1fr}
.lcell{padding:15px 18px;font-size:13.5px;color:var(--ink2);min-width:0}
.lcell+.lcell{border-left:1px solid var(--rule)}
.lname{display:none}
.grade{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:3px;display:inline-block;margin-bottom:8px;border:1px solid}
.g-voted{color:var(--for);border-color:var(--for)}
.g-acted{color:var(--for);border-color:var(--for)}
.g-stated{color:var(--ink2);border-color:var(--rule);background:var(--surface2)}
.g-partial{color:var(--against);border-color:var(--against)}
.g-none{color:var(--ink2);border-color:var(--muted);border-style:dashed}

.srcs{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
.srcs a{font-family:var(--mono);font-size:10.5px;text-decoration:none;color:var(--ink2);border:1px solid var(--rule);border-radius:3px;padding:3px 7px;background:var(--surface2);line-height:1.4}
.srcs a:hover{border-color:var(--accent);color:var(--accent)}
.srcs a::before{content:"\2197 ";color:var(--muted)}

.flag{border:1px solid var(--rule);border-left:3px solid var(--against);border-radius:4px;background:var(--surface);padding:15px 16px}
.flag.note{border-left-color:var(--muted)}
.flag h4{font-size:15.5px;font-family:var(--display);margin-bottom:6px}
.flag p{margin:0 0 9px;font-size:13.5px;color:var(--ink2)}
.flag .ctx{background:var(--surface2);border-radius:3px;padding:9px 11px;font-size:12.5px;color:var(--ink2);margin:0 0 9px}
.flag .ctx b{color:var(--ink)}
.sev{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--against);margin-bottom:6px;display:block}
.flag.note .sev{color:var(--muted)}
.clean{border:1px dashed var(--rule);border-radius:4px;padding:15px 16px;background:var(--surface2)}
.clean h4{font-family:var(--display);font-size:15px;margin-bottom:6px}
.clean p{margin:0;font-size:13.5px;color:var(--ink2)}
ul.tight{margin:0 0 10px;padding-left:18px;font-size:13px;color:var(--ink2)}
ul.tight li{margin:3px 0}

.callout{border-left:3px solid var(--accent);background:var(--surface);padding:16px 18px;border-radius:0 4px 4px 0;border-top:1px solid var(--rule);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.callout .k{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px}
.callout h3{font-size:17px;margin-bottom:8px}
.callout p{margin:0 0 10px;font-size:14px;color:var(--ink2);overflow-wrap:anywhere}

.method:not(.sect){padding:34px 0 46px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:16px}
.mgrid .card p{font-size:13.5px;color:var(--ink2);margin:0 0 8px}
footer{border-top:1px solid var(--rule);background:var(--surface);padding:24px 0 40px;font-size:13px;color:var(--muted)}
footer p{margin:0 0 8px;max-width:80ch}


/* ---------- short version ---------- */
.shortgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:8px 0 30px}
.shortcard{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:12px}
.sc-name{display:flex;align-items:center;gap:9px}
.sc-name b{font-family:var(--display);font-size:20px}
.sc-role{font-size:13.5px;color:var(--muted);margin-top:-6px}
.sc-rows{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--rule2);padding-top:12px}
.sc-rows>div{display:flex;gap:12px;align-items:baseline;font-size:13.5px}
.sc-rows .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:120px;flex:none}
.sc-rows .v{color:var(--ink);flex:1;min-width:0}
.sc-score{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rule2);padding-top:12px;margin-top:auto}
.sc-score .n{font-family:var(--display);font-size:38px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--against)}
.sc-score .u{font-size:12px;color:var(--muted);line-height:1.4}

/* ---------- the five questions, answered or not ---------- */
.qgrid{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.qrow{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:16px 18px}
.qr-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.qr-h h4{margin:0;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink)}
.qr-n{font-size:17px;font-weight:600;color:var(--accent);flex:none}
.qr-l{font-size:12px;color:var(--muted);text-align:right;margin-top:1px}
.qr-bar{height:6px;background:var(--rule2);border-radius:3px;overflow:hidden;margin:10px 0 12px}
.qr-bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.qr-mix{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:10px}
.qr-chip{font-size:11.5px;color:var(--ink2)}
.qr-chip b{font-size:12.5px;color:var(--ink);margin-right:3px}
.qr-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  border-top:1px solid var(--rule2);padding-top:11px}
.qr-wl{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);flex:none;margin-right:2px}
.qr-p{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.qr-st{font-family:var(--mono);font-size:10px;color:var(--muted)}
@media(max-width:860px){
  .qr-h{flex-direction:column;gap:2px}
  .qr-l{text-align:left}
}

/* ---------- governor, on a state page ---------- */
.govbox{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:18px 20px;margin-top:10px}
.gov-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gov-names{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.gov-meta{display:flex;align-items:center;gap:8px;flex:none}
.gov-rate{font-size:12px;font-weight:600;color:var(--accent)}
.gov-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);border-radius:99px;padding:2px 8px}
.gov-note{font-size:13px;color:var(--ink2);line-height:1.65;margin:12px 0 0;max-width:72ch;overflow-wrap:anywhere}
.gov-money{display:flex;flex-direction:column;gap:10px;margin-top:16px;
  border-top:1px solid var(--rule2);padding-top:14px}
.gm-row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,110px) minmax(0,1fr);
  gap:12px;align-items:baseline}
.gm-n{font-size:17px;font-weight:600;color:var(--ink);text-align:right}
.gm-l{font-size:12.5px;color:var(--ink2)}
.gm-note{font-size:12.5px;color:var(--ink2);line-height:1.65;
  border-left:2px solid var(--rule);padding-left:11px;margin-top:8px;overflow-wrap:anywhere}
/* the fold that holds it spans the whole row rather than being squeezed into
   the narrow first column, where its label wrapped onto two lines */
.gm-row > .expand{grid-column:1/-1;margin-top:6px}
.gov-through{font-size:12px;color:var(--muted);margin:12px 0 0}
.gov-through .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-right:5px}
.gov-blocked{margin-top:16px;border-top:1px solid var(--rule2);padding-top:14px}
.gov-blocked .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--against)}
.gov-blocked p{font-size:13px;color:var(--ink2);line-height:1.65;margin:6px 0 0;max-width:72ch;overflow-wrap:anywhere}
.gov-disc{margin-top:14px}
.gd{display:flex;flex-direction:column;gap:9px}
.gd-row{display:flex;gap:14px;align-items:baseline;font-size:13px;
  padding-bottom:9px;border-bottom:1px solid var(--rule2)}
.gd-row .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);width:210px;flex:none}
.gd-row .v{color:var(--ink2);flex:1;min-width:0;overflow-wrap:anywhere}
.gd-gaps{margin-top:4px}
.gd-gaps .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.gd-gaps ul{margin:7px 0 0;padding-left:18px}
.gd-gaps li{font-size:12.5px;color:var(--ink2);line-height:1.6;margin-bottom:5px;overflow-wrap:anywhere}
@media(max-width:860px){
  .gm-row{grid-template-columns:1fr;gap:4px}
  .gm-n{text-align:left}
  .gd-row{flex-direction:column;gap:2px;align-items:stretch}
  .gd-row .k{width:100%}
  .gd-row .v{width:100%}
}

/* ---------- front page: find your ballot ---------- */
.hero2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;
  align-items:center;padding:40px 0 30px}
.h2-l h2{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);line-height:1.1;
  letter-spacing:-.02em;margin:0 0 14px}
.h2-l .lede{font-size:16px;line-height:1.65;color:var(--ink2);margin:0 0 22px;max-width:52ch}
.picker{display:flex;flex-direction:column;gap:7px;max-width:380px}
.pk-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pk-s{font-family:var(--body);font-size:17px;padding:13px 14px;border:2px solid var(--ink);
  border-radius:5px;background:var(--surface);color:var(--ink);width:100%;cursor:pointer;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.pk-s:focus{outline:3px solid var(--accent);outline-offset:2px}
.pk-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:14px 0 0;max-width:50ch}
.maphint{font-size:12px;color:var(--muted);text-align:center;margin:6px 0 0}
@media(max-width:860px){
  .hero2{grid-template-columns:1fr;gap:24px;padding:24px 0 18px}
  .picker{max-width:none}
}

/* ---------- sections you can see the edges of ---------- */
/* A long page made of white cards on cream paper, with every heading the same
   size, reads as one undifferentiated field. There is nothing to tell a reader
   that one subject has ended and another has started, and nothing to tell them
   which heading outranks which.
   So: three visible levels, and a change of ground between sections. */

/* Level 1: the section. Numbered, ruled off, and every other one sits on a
   different colour so the break is visible before you read a word. */
.sect{padding:40px 0 38px;border-top:1px solid var(--rule)}
.sect.alt{background:var(--surface2)}
/* The number sits above the heading rather than beside it. Inline, it pushed
   the heading 31px to the right of the lede underneath it and of everything
   else in the section, so nothing in the block lined up with its own title. */
.sect-h{display:block;min-width:0}
.sect-n{display:block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.sect-h h2{font-family:var(--display);font-size:30px;line-height:1.12;letter-spacing:-.02em;
  min-width:0;overflow-wrap:anywhere}
.sect-lede{font-size:15.5px;line-height:1.6;color:var(--ink2);margin:9px 0 0;max-width:74ch;
  overflow-wrap:anywhere}

/* Level 2: a named group of cards inside a section. */
.sub{margin-top:28px;min-width:0}
.sub:first-of-type{margin-top:22px}
.sub-h{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:18px;
  margin:0 0 3px;padding-bottom:7px;border-bottom:2px solid var(--ink);flex-wrap:wrap;min-width:0}
.sub-h .sh-c{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;
  color:var(--muted);margin-left:auto;text-transform:none;flex:none}
.sub-n{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:9px 0 0;max-width:76ch}
.sub-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:14px;align-items:start;margin-top:13px}
.sub-g.one{grid-template-columns:minmax(0,1fr)}

/* Level 3: the card. Its kicker is a short label, not a sentence set in 10px
   uppercase mono, which is the hardest possible way to read a sentence. */
.hcard .hk{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.hcard h4{font-family:var(--display);font-size:17px;line-height:1.3;margin:0 0 3px}

/* The disclosure rows inside a card were uppercase mono sentences that wrapped
   onto two lines. Sentence case, with the figure held to the right where the
   eye can run down the column. */
.expand > summary{font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--ink);display:flex;align-items:baseline;gap:10px;padding:3px 0}
.expand > summary .sv{margin-left:auto;font-family:var(--mono);font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--ink2);flex:none}
.expand > summary:before{content:'+';color:var(--accent);font-family:var(--mono);
  font-size:13px;width:11px;flex:none}
.expand[open] > summary:before{content:'\2212'}
.expand > summary:hover{color:var(--accent)}

/* the headline figures, grouped by what kind of money they are */
.statset{margin-top:14px}
.statset + .statset{margin-top:12px}
.ss-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.statset .whonums{margin-bottom:0}

/* a strip of jump links, for pages that run several screens */
.jump{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:16px;min-width:0}
.jump .jl{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);flex:none;margin-right:2px}
.jump a{font-size:13px;text-decoration:none;color:var(--ink2);background:var(--surface);
  border:1px solid var(--rule);border-radius:99px;padding:5px 12px;white-space:nowrap}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
.sect.alt .jump a{background:var(--paper)}

@media(max-width:720px){
  .sect{padding:30px 0 28px}
  .sect-h h2{font-size:24px}
  .sub{margin-top:22px}
}

/* ---------- a ranked list with names in it ---------- */
/* The front page used to explain what an independent expenditure is. A
   category does not buy anybody. This is the component that names them. */
.rank{margin:0;padding:0;list-style:none;min-width:0}
.rank li{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,130px);
  gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--rule2);align-items:baseline}
.rank li:last-child{border-bottom:0}
.rank .rk{font-family:var(--mono);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;grid-row:1/3}
.rank .rn{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.2;
  min-width:0;overflow-wrap:anywhere}
.rank .rn a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.rank .rn a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.rank .rv{font-family:var(--mono);font-size:19px;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.rank .rw{grid-column:2/-1;font-size:13.5px;color:var(--ink2);line-height:1.55;
  margin-top:-2px;overflow-wrap:anywhere}
.rank .rw b{color:var(--ink);font-weight:600}
.rank .rbar{grid-column:2/-1;height:5px;background:var(--rule2);border-radius:99px;
  overflow:hidden;margin-top:8px;max-width:520px}
.rank .rbar i{display:block;height:100%;border-radius:99px;background:var(--for);min-width:3px}
.rank li.o .rbar i{background:var(--against)}
.rank li.o .rv{color:var(--against)}
.rank .rtag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:99px;
  padding:2px 8px;margin-left:8px;vertical-align:2px;white-space:nowrap}

/* two ranked lists side by side where they are two halves of one idea */
.rank2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:14px 34px;align-items:start;margin-top:14px}
.rank2 > div{min-width:0}
.rank-h{font-family:var(--display);font-size:17px;margin:0 0 2px;padding-bottom:7px;
  border-bottom:2px solid var(--ink)}
.rank-n{font-size:13px;color:var(--ink2);line-height:1.55;margin:9px 0 0;max-width:62ch}

/* the one number a section leads with, beside its list */
.leadrow{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:34px;align-items:start;margin-top:16px}
@media(max-width:900px){.leadrow{grid-template-columns:minmax(0,1fr);gap:16px}}
@media(max-width:560px){
  .rank li{grid-template-columns:22px minmax(0,1fr);gap:2px 10px}
  .rank .rv{grid-column:2;text-align:left;font-size:17px;margin-top:2px}
  .rank .rw,.rank .rbar{grid-column:2}
}

/* ---------- the short version ---------- */
/* Sentences before cards. The cards show the working; this says what the
   working adds up to, and every line in it is a figure from the cards. */
.shortv{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--accent);
  border-radius:0 7px 7px 0;padding:20px 24px;margin:16px 0 4px;min-width:0}
.sv-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:12px}
.shortv ul{margin:0;padding:0;list-style:none}
.shortv li{font-size:15.5px;line-height:1.6;color:var(--ink2);padding:7px 0 7px 20px;
  position:relative;max-width:82ch;overflow-wrap:anywhere}
.shortv li:before{content:'';position:absolute;left:0;top:15px;width:7px;height:7px;
  border-radius:99px;background:var(--rule)}
.shortv li b{color:var(--ink);font-weight:600}
@media(max-width:620px){.shortv{padding:16px 17px}.shortv li{font-size:14.5px}}

/* ---------- telling one section from the next ---------- */
/* The bands were a two percent shift in a warm cream, which is to say they
   were not there. Four things do the separating now, and they reinforce each
   other rather than each doing a little:
     1. the ground actually changes, by a step you can see
     2. a thick rule in the brand colour sits on top of every section
     3. the number is large enough to be a landmark rather than a footnote
     4. a bar follows you down the page saying which section you are in
   Colour is deliberately not the carrier. Teal and amber already mean
   something exact on every chart on this site, and a set of section colours
   would be read as data by anyone who had learned that. */

:root{
  --ground-1:#F7F5F1;   /* the paper */
  --ground-2:#EDE7DC;   /* a real step down, not a hint of one */
  --ground-3:#1C1917;   /* the one dark band */
  --on-dark:#F3EEE8;
  --on-dark-2:#B9AFA4;
  --rule-dark:#3A332E;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground-1:#141210; --ground-2:#201C19; --ground-3:#000000;
  --on-dark:#F3EEE8; --on-dark-2:#9E948A; --rule-dark:#2A2522;
}}
:root[data-theme="dark"]{
  --ground-1:#141210; --ground-2:#201C19; --ground-3:#000000;
  --on-dark:#F3EEE8; --on-dark-2:#9E948A; --rule-dark:#2A2522;
}

.sect{padding:46px 0 44px;border-top:4px solid var(--accent);background:var(--ground-1);
  scroll-margin-top:56px}  /* so a jump does not land under the bar that follows you */
.sect.alt{background:var(--ground-2);border-top-color:var(--ink)}
.sect.dark{background:var(--ground-3);color:var(--on-dark);border-top-color:var(--accent)}
.sect.dark h2,.sect.dark h3,.sect.dark h4,.sect.dark .rn,.sect.dark .rv,.sect.dark .hs-v{color:var(--on-dark)}
.sect.dark .sect-lede,.sect.dark .rw,.sect.dark .rank-n,.sect.dark .hs-l,.sect.dark .hs-s,
.sect.dark .sub-n,.sect.dark .srcline{color:var(--on-dark-2)}
.sect.dark .rank li,.sect.dark .sub-h{border-color:var(--rule-dark)}
.sect.dark .sub-h{border-bottom-color:var(--on-dark)}
.sect.dark .rank .rbar{background:var(--rule-dark)}
.sect.dark .rtag{border-color:var(--rule-dark);color:var(--on-dark-2)}
.sect.dark .rank .rw b{color:var(--on-dark)}
.sect.dark a{color:#FF8A7E}
/* The first band used to lose its rule, on the theory that whatever sat above
   it was already a divider. On a race page what sits above it is a sticky bar
   with its own hairline, so the two ran into each other. Every band keeps the
   rule, and the one case where it is genuinely the first thing on the page is
   handled by the hero's own bottom margin. */
.sect:first-of-type{border-top-width:4px}

/* "On their own: ..." sat with no air under it and the sticky bar began on the
   next pixel, so the two candidate plates in that bar looked like part of the
   sentence. */
.raceline{padding-top:16px;padding-bottom:0}
.raceline .srcline{margin:0 0 18px}

/* The number is a landmark, not a hanging indent. Set beside the heading it
   pushed the heading 50px to the right of its own lede, so the two lines of
   the same block started in two different places. It sits above instead, and
   heading, lede and everything under them share one left edge. */
.sect-h{min-width:0}
.sect-n{display:block;font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;
  letter-spacing:.02em;color:var(--accent);margin:0 0 6px;opacity:.9}
.sect.alt .sect-n{color:var(--accent)}
.sect-h h2{font-family:var(--display);font-size:clamp(26px,3.2vw,36px);line-height:1.08;
  letter-spacing:-.025em;min-width:0;overflow-wrap:anywhere;margin-top:-2px}
.sect-lede{font-size:16px;line-height:1.62;color:var(--ink2);margin:12px 0 0;max-width:72ch;
  overflow-wrap:anywhere}

/* ---------- the bar that follows you down the page ---------- */
.spy{position:sticky;top:0;z-index:48;background:var(--surface);
  border-bottom:1px solid var(--rule);box-shadow:0 1px 0 rgba(0,0,0,.03)}
.spy-in{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;min-width:0}
.spy-in::-webkit-scrollbar{height:0}
.spy a{flex:none;display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:13.5px;
  color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;
  transition:color .12s,border-color .12s}
.spy a .sn{font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.7}
.spy a:hover{color:var(--ink)}
.spy a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.spy a.on .sn{color:var(--accent);opacity:1}
@media(max-width:620px){.spy a{padding:10px 12px;font-size:12.5px}.spy a .sn{display:none}}

/* ---------- telling one subsection from the next ---------- */
/* A section on a candidate page runs five subjects deep, so the same job has
   to be done one level down: a numbered label, a rule that is clearly a break
   rather than an underline, and air above it. */
.sub{border-top:1px solid var(--rule);padding-top:26px;margin-top:34px}
.sub:first-of-type{border-top:0;padding-top:0;margin-top:22px}
.sub-h{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule2);
  padding-bottom:8px;margin-bottom:0}
.sub-k{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--accent);flex:none}
.sub-t{min-width:0;overflow-wrap:anywhere}
.sect.dark .sub{border-top-color:var(--rule-dark)}
.sect.dark .sub-k{color:#FF8A7E}
.sect.dark .hcard{background:#241F1C;border-color:var(--rule-dark)}
.sect.dark .hcard h4{color:var(--on-dark)}
.sect.dark .callout{background:#241F1C;border-color:var(--rule-dark)}

/* Every component on the site assumes a pale ground somewhere in its own
   rules, so each one that lands on the black band has to be told again. The
   stat tiles were the loudest thing on the band and they were invisible:
   near-black type on near-black card, inherited from the light theme. */
.sect.dark .whonums{background:var(--rule-dark);border-color:var(--rule-dark)}
.sect.dark .whonums .wn{background:#241F1C}
.sect.dark .whonums .wn .v{color:var(--on-dark)}
.sect.dark .whonums .wn .k{color:var(--on-dark-2)}
.sect.dark .whonums .wn.o .v{color:#FF8A7E}
.sect.dark .rank .rk{color:var(--on-dark-2)}
.sect.dark .rank .rn a{color:var(--on-dark);border-bottom-color:var(--rule-dark)}
.sect.dark .rank .rn a:hover{color:#FF8A7E;border-bottom-color:#FF8A7E}
.sect.dark .rank li{border-bottom-color:var(--rule-dark)}
.sect.dark .rank .rbar{background:var(--rule-dark)}
.sect.dark .sh-c{color:var(--on-dark-2)}

@media(max-width:720px){
  .sect{padding:32px 0 30px}
  .sect-h{gap:12px}
  .sect-n{font-size:22px}
}

/* ---------- charts ---------- */
/* Thin marks, hairline rules, and the data as the only loud thing on the
   page. Values sit in the ink tokens rather than in the series colour, because
   teal and amber are legible as a filled bar and not as 13px type. */
.chart{margin:0 0 var(--s3);min-width:0}
.ch-t{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
.ch-n{font-size:13.5px;color:var(--ink2);line-height:1.6;margin:0 0 14px;max-width:72ch}
.ch-legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.ch-k{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);min-width:0}
.ch-k i{width:13px;height:10px;border-radius:2px;flex:none}

.ch-plot{position:relative;min-width:0}
.ch-row{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr) minmax(0,84px);
  gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule2)}
.ch-row:last-child{border-bottom:0}
.ch-l{font-size:13.5px;color:var(--ink2);line-height:1.35;min-width:0;overflow-wrap:anywhere}
.ch-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ch-v{font-size:14px;font-weight:600;text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* The track is the scale. Every row in a chart shares it, so the bars can be
   read straight down the column. */
.ch-track{position:relative;background:var(--track);border-radius:3px;min-width:0}
.ch-bar{display:flex;height:22px;border-radius:0 4px 4px 0;overflow:hidden;min-width:3px}
.ch-row.lead .ch-bar{height:30px}
.ch-seg{display:block;height:100%;min-width:2px}
/* 2px of the surface colour separating touching segments, rather than a
   stroke drawn around them, which would add ink that is not data. */
.ch-seg + .ch-seg{box-shadow:-2px 0 0 var(--paper)}
.ch-seg:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ch-bar .ch-seg.end{border-radius:0 4px 4px 0}
.ch-inline{position:absolute;left:0;top:100%;margin-top:4px;font-size:11.5px;color:var(--muted)}
.ch-tip{z-index:6}
.ch-table{margin-top:14px}
.ch-table .tscroll{margin-top:10px}

/* ---------- the number a section leads with ---------- */
.hero-stat{padding:4px 0 16px;min-width:0}
/* Proportional figures, not tabular: at this size equal-width digits make a
   number look loose. Sans, not the display serif, so it reads as a figure
   rather than as decoration. */
.hs-v{font-family:var(--body);font-weight:700;font-size:clamp(40px,6vw,64px);line-height:1;
  letter-spacing:-.035em;color:var(--ink)}
.hs-l{font-size:16.5px;color:var(--ink);margin-top:10px;max-width:46ch;line-height:1.5}
.hs-s{font-size:13.5px;color:var(--ink2);margin-top:9px;max-width:66ch;line-height:1.6}

.moneysplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:34px;align-items:start}
@media(max-width:860px){
  .moneysplit{grid-template-columns:minmax(0,1fr);gap:18px}
  .ch-row{grid-template-columns:minmax(0,1fr) minmax(0,76px);gap:6px 10px}
  .ch-l{grid-column:1/-1}
  .ch-track{grid-column:1}
  .ch-v{grid-column:2}
  .ch-inline{position:static;display:block;margin-top:5px}
}

/* ---------- one vertical scale ---------- */
/* The spacing between blocks was being decided a block at a time, which is how
   a page ends up with gaps of 6, 12, 13, 14 and 20 pixels doing the same job.
   These four values are the whole scale, and every block that sits directly on
   the page rather than inside a card is separated by one of them. */
:root{--s1:8px;--s2:14px;--s3:22px;--s4:34px}
/* margin-bottom only, never the shorthand: .wrap centres itself with
   margin:0 auto, and `margin:0 0 34px` here quietly reset that to 0 and shoved
   every section on these pages against the left edge of the screen. */
.wsec{margin-bottom:var(--s4)}
.wsec > .sechead{padding-top:0}
.wsec:last-child{margin-bottom:calc(var(--s4) + 10px)}
.wsec .hgrid,.wsec .whonums,.wsec .tscroll,.wsec .cmphead,.wsec .ldg{margin-top:var(--s2)}
.wsec .secsub + .hgrid,.wsec .secsub + .cmphead{margin-top:var(--s1)}
@media(max-width:720px){:root{--s4:26px;--s3:18px}}

/* ---------- the key under the national map ---------- */
/* The map was shaded from the first version and never said what the shading
   meant, which makes it a decoration rather than information. */
.mapkey{margin:12px 0 0;border-top:1px solid var(--rule2);padding-top:10px}
.mk-h{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.mk-row{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:12.5px;min-width:0}
.mk-row i{width:16px;height:11px;border-radius:2px;flex:none;border:1px solid var(--rule)}
.mk-l{color:var(--ink2);flex:1;min-width:0;overflow-wrap:anywhere}
.mk-n{color:var(--muted);font-size:11.5px;flex:none}

/* ---------- front page: who took none ---------- */
.cleangrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:0}
.cleancard{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:0 5px 5px 0;padding:17px 18px;min-width:0}
.cc-n{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1}
.cc-of{font-family:var(--body);font-size:14px;color:var(--muted);font-weight:400;margin-left:7px}
.cc-t{font-size:14px;color:var(--ink);margin-top:7px;font-weight:600;line-height:1.4}
.cc-d{font-size:12.5px;color:var(--ink2);margin-top:8px;line-height:1.6}

/* ---------- front page: what is on the ballot ---------- */
.ballotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:12px 0 0}
.bcard{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:18px;min-width:0}
.bc-n{font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--accent);line-height:1}
.bc-t{font-size:15px;font-weight:600;color:var(--ink);margin-top:5px}
.bc-d{font-size:12.5px;color:var(--ink2);margin-top:9px;line-height:1.6}

/* ---------- the house block on the home page ---------- */
.housebox{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;
  background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:22px 24px;margin:26px 0 8px}
.housebox h3{font-family:var(--display);font-size:21px;margin:0 0 8px}
.housebox p{font-size:13.5px;color:var(--ink2);line-height:1.65;margin:0 0 9px;max-width:60ch}
.hb-care{font-size:12.5px;color:var(--muted);border-left:2px solid var(--rule);padding-left:11px}
.hb-r{display:flex;flex-direction:column;gap:12px;justify-content:center}
.hb-s{display:flex;flex-direction:column;gap:2px}
.hb-s b{font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hb-s.out b{color:var(--against)}
.hb-s span{font-size:12px;color:var(--muted);line-height:1.45}
@media(max-width:860px){.housebox{grid-template-columns:1fr;gap:18px;padding:18px}}

/* ---------- house districts on a state page ---------- */
/* The rows these rules used to style are gone: a four column grid sized for
   the ten candidates Louisiana's 6th puts on one ballot, which left a hand
   span of nothing in every district that has two. The replacement is in the
   U.S. House section stylesheet further down. */
.officenote{font-size:13px;color:var(--ink2);line-height:1.6;margin:10px 0 14px;max-width:70ch}

/* ---------- issue navigator ---------- */
.navchips{display:flex;gap:7px;align-items:center;padding:11px 0 13px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),transparent 100%)}
.navchips::-webkit-scrollbar{height:0}
.navchips:after{content:'';flex:none;width:26px}
@media(min-width:861px){
  .navchips{flex-wrap:wrap;overflow:visible;row-gap:6px;-webkit-mask-image:none;mask-image:none}
  .navchips:after{display:none}
}
.navlabel{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none;padding-right:4px}
.navchip{font-size:12.5px;white-space:nowrap;text-decoration:none;color:var(--ink2);background:var(--surface2);border:1px solid var(--rule);border-radius:99px;padding:5px 11px;flex:none}
.navchip:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- issue card ---------- */
.issue{background:var(--surface);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.ihead{padding:18px 20px 14px}
.itag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ihead h3{font-size:22px}
.iq{margin:6px 0 0;font-size:15px;color:var(--ink2);max-width:80ch}
.istakes{background:var(--surface2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 20px}
.istakes .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.istakes p{margin:0;font-size:13.5px;color:var(--ink2);max-width:none}
@media(min-width:861px){.istakes p{columns:2;column-gap:40px;column-rule:1px solid var(--rule2)}}
.icells{display:grid;grid-template-columns:1fr 1fr}
.icell{padding:16px 20px;min-width:0;border-top:1px solid var(--rule)}
.icell+.icell{border-left:1px solid var(--rule)}
.iwho{display:none}
.ibottom{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 9px;line-height:1.4}
.idetail{font-size:13.5px;color:var(--ink2)}

/* A figure nobody has read back against the record yet, said so on the row
   rather than left to look like the checked ones beside it. */
.unchecked{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;color:var(--against);border:1px solid var(--against);
  border-radius:99px;padding:2px 7px;margin-left:8px;white-space:nowrap;vertical-align:middle}
.rootsrc{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}

/* ---------- roots + voting ---------- */
@media(min-width:861px){@supports(grid-template-rows:subgrid){
  #roots .pair{grid-template-rows:auto auto auto}
  #roots .col{display:grid;grid-template-rows:subgrid;grid-row:1/span 3;align-content:start}
}}
.rootrow{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule2);font-size:13.5px}
.rootrow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:120px;flex:none}
.rootrow .v{color:var(--ink2);flex:1;min-width:0}
.votebox{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--for);border-radius:0 6px 6px 0;padding:20px}
.vday{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vday .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vday .d{font-family:var(--display);font-size:22px;font-weight:700}
.vrows{display:flex;flex-direction:column;gap:9px}
.vrow{display:flex;gap:14px;align-items:baseline;font-size:13.5px;padding-bottom:9px;border-bottom:1px solid var(--rule2)}
.vrow:last-child{border-bottom:0;padding-bottom:0}
.vrow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:160px;flex:none}
.vrow .v{color:var(--ink2);flex:1;min-width:0;overflow-wrap:anywhere}
.inlink{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.inlink:hover{border-bottom-color:var(--accent)}



/* ---------- flags ---------- */
.flagcount{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-radius:6px;
  background:var(--surface2);border:1px solid var(--rule);margin-bottom:12px}
.flagcount.has{border-left:4px solid var(--accent)}
.flagcount.clear{border-left:4px solid var(--for)}
.fc-n{font-family:var(--mono);font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em}
.flagcount.has .fc-n{color:var(--accent)}
.flagcount.clear .fc-n{color:var(--for)}
.fc-l{font-size:13.5px;color:var(--ink2)}
.flagcard{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--accent);
  border-radius:0 6px 6px 0;padding:13px 16px;margin-bottom:10px}
.fg-t{font-family:var(--display);font-weight:700;font-size:15.5px;margin-bottom:5px}
.fg-f{font-size:14px;line-height:1.55;color:var(--ink)}
.fg-r{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--rule2)}
.fg-r .k,.rr-r .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;margin-right:6px}
.rulerow{padding:11px 0;border-bottom:1px solid var(--rule2)}
.rulerow:last-child{border-bottom:0}
.rr-t{font-weight:600;font-size:13.5px}
.rr-w{font-size:13px;color:var(--ink2);line-height:1.55;margin-top:3px;max-width:88ch}
.rr-r{font-size:12px;color:var(--muted);margin-top:5px}

/* ---------- ratio, split and share charts ---------- */
.ratiogrid,.splitgrid,.sharegrid{margin:10px 0 4px}
.ratiorow{display:grid;grid-template-columns:minmax(120px,190px) 1fr 76px;gap:14px;
  align-items:center;padding:9px 0;border-bottom:1px solid var(--rule2)}
.ratiorow:last-child{border-bottom:0}
.rg-bar,.sp-bar,.sr-bar{height:14px;background:var(--rule2);border-radius:99px;overflow:hidden;display:block}
.rg-bar i{display:block;height:100%;border-radius:99px;min-width:3px}
.rg-st{font-size:10px;color:var(--muted);margin-left:6px}
.rg-pc{font-family:var(--body);font-size:11px;color:var(--muted);font-weight:400}
.rg-v{font-size:19px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.splitrow{padding:10px 0;border-bottom:1px solid var(--rule2)}
.splitrow:last-child{border-bottom:0}
.sp-who{margin-bottom:7px}
.sp-bar{display:flex;height:16px}
.sp-bar i{display:block;height:100%}
.sp-bar .in{background:var(--m5)}
.sp-bar .out{background:var(--rule)}
.sp-l{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:5px}
.sharerow{padding:12px 0;border-bottom:1px solid var(--rule2)}
.sharerow:last-child{border-bottom:0}
.sr-k{font-weight:600;font-size:14px;margin-bottom:7px}
.sr-one{display:grid;grid-template-columns:minmax(110px,180px) 1fr 66px;gap:12px;
  align-items:center;margin-bottom:6px}
.sr-bar i{display:block;height:100%;border-radius:99px;min-width:2px}
.sr-v{font-size:13.5px;text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums}

/* ---------- issue matrix ---------- */
.matrix{border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:var(--surface);
  margin-bottom:26px}
.mx-head,.mx-row{display:grid;grid-template-columns:1fr 200px 200px;align-items:center;gap:14px;
  padding:11px 16px}
.mx-head{background:var(--surface2);border-bottom:1px solid var(--rule)}
.mx-head span{display:flex;justify-content:flex-start}
.mx-row{border-bottom:1px solid var(--rule2);text-decoration:none;color:inherit}
.mx-row:last-child{border-bottom:0}
.mx-row:hover{background:var(--surface2)}
.mx-q{font-weight:600;font-size:14px;color:var(--ink)}
.mx-c .grade{margin-bottom:0}

/* ---------- national index ---------- */
.natstats{display:flex;flex-direction:column;gap:14px}
.bigstat{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--for);
  border-radius:0 6px 6px 0;padding:16px 18px}
.bigstat.out{border-left-color:var(--against)}
.bs-n{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1}
.bigstat.out .bs-n{color:var(--against)}
.bs-l{font-size:13.5px;color:var(--ink2);margin-top:6px;line-height:1.5}
.findlink{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;padding:4px 0}
.findlink:hover{text-decoration:underline}
.seatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;
  padding:14px 0 0}
.seatcard{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:14px 16px;
  text-decoration:none;color:inherit;display:block}
.seatcard.done{border-left:4px solid var(--m5)}
a.seatcard:hover{border-color:var(--accent)}
.sg-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.sg-st{font-family:var(--display);font-weight:700;font-size:17px}
.sg-rate{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:right}
.sg-names{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.sg-names .vs{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.sg-money{display:flex;gap:14px;margin-top:10px;font-family:var(--mono);font-size:11.5px;
  color:var(--muted)}
.sg-money .o{color:var(--against)}
.sg-go{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-top:9px}
.sg-pending{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:9px}
.racerow.nolink{cursor:default}
.racerow.nolink:hover{background:none}
.rr-pending{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);flex:none}

/* ---------- national findings ---------- */
.totgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:4px 0 10px}
.tot{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:18px;min-width:0}
.tot.out .t-n{color:var(--against)}
.t-n{font-size:clamp(18px,1.9vw,27px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
  white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.t-l{font-size:13px;color:var(--ink2);margin-top:7px;line-height:1.5}
.netlist{margin:6px 0 18px}
.netrow{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:16px 18px;
  margin-bottom:14px}
.nr-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.nr-h h4{font-family:var(--display);font-size:19px}
.nr-h span{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nr-bar{height:11px;background:var(--rule2);border-radius:99px;overflow:hidden;margin:10px 0 8px}
.nr-bar i{display:block;height:100%;background:var(--m4);border-radius:99px;min-width:3px}
.nr-split{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--muted);
  flex-wrap:wrap;margin-bottom:8px}
.nr-top{border-top:1px solid var(--rule2);padding-top:4px}
.sr-sub{font-size:12px;color:var(--muted);margin:-3px 0 7px;line-height:1.5}


/* ---------- party identity ---------- */
.plate{display:inline-flex;align-items:stretch;border-radius:5px;overflow:hidden;
  font-family:var(--display);font-weight:700;line-height:1;max-width:100%}
.plate .ps{display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.04em;
  padding:0 7px;background:rgba(0,0,0,.22);color:var(--on-party)}
.plate .nm{padding:6px 11px;font-size:15px;color:var(--on-party);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate.big .nm{font-size:19px;padding:8px 14px}
.plate.big .ps{font-size:12.5px;padding:0 9px}
/* Anything that is not one of the two major parties gets the independent colour
   by default. An unlisted party code must never fall through to no background,
   because the name on the plate is white and would vanish. */
.plate{background:var(--ind)}
.p-D.plate,.plate.p-D{background:var(--dem)}
.p-R.plate,.plate.p-R{background:var(--rep)}
.b-D i{background:var(--dem)}
.b-R i{background:var(--rep)}
.b-I i{background:var(--ind)}
.b-for i{background:var(--for)}
.b-against i{background:var(--against)}

/* ---------- state page ---------- */
.officeblock{margin-bottom:30px}
.officehead{font-family:var(--display);font-size:22px;padding-bottom:8px;
  border-bottom:2px solid var(--ink);margin-bottom:4px}
.racerow{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.racerow:hover{background:var(--surface2)}
.rr-names{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.rr-names .vs{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.rr-go{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);flex:none}

/* ---------- who is in this race ---------- */
.whogrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.whocard{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:16px 18px}
.whocard.p-D{border-top:4px solid var(--dem)}
.whocard.p-R{border-top:4px solid var(--rep)}
.whocard.p-I{border-top:4px solid var(--ind)}
.wc-rows{margin-top:12px}
.wc-rows>div{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule2);font-size:13.5px}
.wc-rows>div:last-child{border-bottom:0}
.wc-rows .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);width:110px;flex:none}
.wc-rows .v{color:var(--ink2);flex:1;min-width:0}

/* ---------- section and subsection rhythm ---------- */
.led.big .sechead h2{font-size:32px}
.secsub.lede{font-size:15.5px;max-width:82ch}
.subblock{padding-top:26px}
.subhead{font-family:var(--display);font-size:22px;margin:0 0 6px;display:flex;
  align-items:baseline;gap:10px}
.subhead .sn{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);flex:none}
.minihead{font-family:var(--display);font-size:18px;margin:28px 0 4px}
.pairhead{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:16px 0 10px}

/* ---------- two kinds of money ---------- */
.twokind{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0 6px}
.tk{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--for);
  border-radius:0 6px 6px 0;padding:15px 18px}
.tk.out{border-left-color:var(--against)}
.tk-h{font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:6px}
.tk p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.bigrow{padding:12px 0;border-bottom:1px solid var(--rule2)}
.bigrow:last-child{border-bottom:0}
.br-k{font-size:13px;color:var(--ink2)}
.br-v{font-size:27px;font-weight:600;letter-spacing:-.02em;margin-top:3px;
  font-variant-numeric:tabular-nums}
.br-v.against{color:var(--against)}
.br-bar{height:9px;background:var(--rule2);border-radius:99px;overflow:hidden;margin-top:7px}
.br-bar i{display:block;height:100%;border-radius:99px;min-width:2px}
.br-n{font-size:11.5px;color:var(--muted);margin-top:5px;font-family:var(--mono)}
.callout.quiet{border-left-color:var(--rule)}

/* ---------- ledger: the side-by-side comparison row ---------- */
.ldg{border-top:1px solid var(--rule);margin-bottom:26px}
.ldgrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,240px) minmax(0,1fr);align-items:start;
  gap:18px;padding:13px 0;border-bottom:1px solid var(--rule2)}
.ldgrow.strong{background:var(--surface);border-bottom-color:var(--rule)}
.ldgrow.strong .ldgv .n{font-size:26px}
.ldgv{display:flex;flex-direction:column;min-width:0}
.ldgv.l{align-items:flex-end;text-align:right}
.ldgv.r{align-items:flex-start;text-align:left}
.ldgv .n{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--ink);line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;max-width:100%;overflow-wrap:anywhere}
.ldgv .s{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45;max-width:38ch}
.ldgk{text-align:center;font-size:13px;color:var(--ink2);line-height:1.4;padding-top:3px}
.minibar{display:block;height:5px;width:100%;max-width:190px;background:var(--rule2);
  border-radius:99px;margin-top:6px;overflow:hidden}
.ldgv.l .minibar{transform:scaleX(-1)}
.minibar i{display:block;height:100%;background:var(--muted);border-radius:99px}
.qmark{display:block;margin:4px auto 0;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.qmark:hover{color:var(--accent)}
.qtext[hidden]{display:none}
.qtext{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:6px;text-align:left}

/* ---------- money ---------- */
.subhead{font-family:var(--display);font-size:21px;margin:30px 0 4px}
.barpair{padding-bottom:20px}
.stack{display:flex;height:18px;border-radius:3px;overflow:hidden;background:var(--rule2);margin-top:8px}
.stack i{display:block;height:100%}
.stacktot{font-size:13px;color:var(--muted);margin-top:6px}
.seg-people{background:var(--m5)}.seg-pacs{background:var(--against)}
.seg-trans{background:var(--m3)}.seg-party{background:var(--m2)}
.seg-self{background:var(--m1)}.seg-other{background:var(--rule)}
.dot{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none;margin-right:7px}
.moneycard .bigmoney{font-size:32px;font-weight:600;letter-spacing:-.02em}
.bigmoney{font-family:var(--mono)}
.mrows{margin-top:12px}
.mrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule2);font-size:13.5px}
.mrow:last-child{border-bottom:0}
.mrow .k{flex:1;min-width:0;color:var(--ink2)}
.mrow .pc{color:var(--muted);font-size:12.5px;flex:none}
.mrow .amt{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.mrow .amt.against{color:var(--against)}

/* ---------- PAC money, by kind of group ---------- */
.cats{margin-bottom:8px}
.cat{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  padding:16px 18px;margin-bottom:14px}
.cathead h4{font-family:var(--display);font-size:19px;margin:0}
.cathead p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.5;max-width:78ch}
.catbars{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}
.catside{min-width:0}
.cs-who{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);margin-bottom:5px}
.cs-amt{font-size:23px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.cs-bar{height:9px;background:var(--rule2);border-radius:99px;overflow:hidden;margin-top:7px}
.cs-bar i{display:block;height:100%;border-radius:99px;min-width:2px}
.cs-n{font-size:11.5px;color:var(--muted);margin-top:5px;font-family:var(--mono)}
.catnames{margin-top:12px}
.namepair{padding-bottom:0;gap:20px}
.pacrow{display:flex;align-items:baseline;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--rule2);font-size:13.5px}
.pacrow:last-child{border-bottom:0}
.pacrow .pn{flex:1;min-width:0}
.pacrow .pn a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.pacrow .pn a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.pacrow .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.pacrow .pa{flex:none;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- what they own / their record ---------- */
.leadline p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.holdrow{padding:12px 0;border-bottom:1px solid var(--rule2)}
.holdrow:last-of-type{border-bottom:0}
.hn{font-weight:600;font-size:14.5px}
.hw{font-size:13px;color:var(--muted);margin-top:2px}
.hr{font-size:13px;color:var(--ink2);margin-top:5px}
.hr .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.hnote{font-size:12.5px;color:var(--ink2);background:var(--surface2);border-left:2px solid var(--rule);
  padding:8px 11px;margin:8px 0 0;line-height:1.5}
.empty{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.gapcard{border-left:3px solid var(--against)}
.recrow{padding:14px 0;border-bottom:1px solid var(--rule2)}
.recrow:last-of-type{border-bottom:0}
.rdate{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px}
.recrow.alg .rdate{color:var(--muted)}
.rwhat{font-size:14px;line-height:1.55;color:var(--ink)}
.rstat{font-size:12.5px;color:var(--ink2);margin-top:7px;line-height:1.5;
  background:var(--surface2);padding:8px 11px;border-radius:3px}
.rstat .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.gloss{padding:9px 0;border-bottom:1px solid var(--rule2)}
.gloss:last-child{border-bottom:0}
.gloss b{font-size:13.5px}
.gloss p{margin:3px 0 0;font-size:13px;color:var(--ink2);line-height:1.55;max-width:88ch}
.chk{font-size:13px;color:var(--ink2);padding:6px 0 6px 18px;position:relative}
.chk:before{content:'\2713';position:absolute;left:0;color:var(--for);font-size:12px}
.chk.gap:before{content:'\2717';color:var(--against)}
.limlist{margin:8px 0 0;padding-left:18px}
.limlist li{font-size:13px;color:var(--ink2);line-height:1.55;margin-bottom:7px;overflow-wrap:anywhere}

/* ---------- disclosure ---------- */
.expand{margin-top:10px;border-top:1px solid var(--rule2);padding-top:9px}
.expand>summary{cursor:pointer;list-style:none}
.expand>summary::-webkit-details-marker{display:none}

/* ---------- the candidate finder ---------- */
.findbar{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:16px 18px;margin:14px 0 18px}
.fb-top{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.fb-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.fb-f label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fb-f input,.fb-f select{font:inherit;font-size:15px;color:var(--ink);background:var(--surface2);
  border:1px solid var(--rule);border-radius:4px;padding:9px 11px;min-width:0;max-width:100%}
.fb-f.grow{flex:1 1 240px}
.fb-f.grow input{width:100%}
.fb-f input:focus,.fb-f select:focus{outline:2px solid var(--accent);outline-offset:1px}
.fb-count{font-size:13px;color:var(--muted);margin-top:11px;font-family:var(--mono)}
.fb-clear{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:0}

.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:9px 10px;
  border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--surface2);position:sticky;top:0;z-index:2}
.ptable th.sortable{cursor:pointer;user-select:none}
.ptable th.sortable:hover{color:var(--accent)}
.ptable th.on{color:var(--ink)}
.ptable th.on:after{content:' \25BE';color:var(--accent)}
.ptable th.on.up:after{content:' \25B4'}
.ptable td{padding:10px;border-bottom:1px solid var(--rule2);vertical-align:top}
.ptable tbody tr:hover{background:var(--surface2)}
.ptable .n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ptable th.n{text-align:right}
.ptable .who a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule)}
.ptable .who a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.ptable .who .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;font-weight:400}
/* The party badge appears in the table, in the compare tray and on a compare
   card. Scoping it to the table left it unstyled everywhere else, which meant
   a white letter on no background at all. Anything that is not one of the two
   major parties keeps the independent colour by default, for the same reason:
   an unlisted party code must never fall through to no background. */
.pbadge{display:inline-block;width:17px;height:17px;line-height:17px;text-align:center;
  border-radius:3px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--on-party);
  background:var(--ind);margin-right:7px;flex:none;vertical-align:baseline}
.pbadge.p-D{background:var(--dem)}.pbadge.p-R{background:var(--rep)}
.tscroll{overflow-x:auto;border:1px solid var(--rule);border-radius:6px;background:var(--surface);
  -webkit-overflow-scrolling:touch}
.fdmark{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.fdmark.yes{color:var(--for)}
.pickbtn{font:inherit;font-size:12px;background:var(--surface2);border:1px solid var(--rule);
  color:var(--ink2);border-radius:3px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.pickbtn:hover{border-color:var(--accent);color:var(--accent)}
.pickbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.morebtn{display:block;margin:16px auto 0;font:inherit;font-size:14px;background:var(--surface);
  border:1px solid var(--rule);color:var(--ink2);border-radius:4px;padding:10px 20px;cursor:pointer}
.morebtn:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- the compare tray ---------- */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);
  border-top:1px solid var(--rule);box-shadow:0 -6px 22px rgba(0,0,0,.12)}
.tray-in{display:flex;align-items:center;gap:12px;padding:11px 0;flex-wrap:wrap;min-width:0}
.tray-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none}
.tray-slots{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 200px;min-width:0}
.slot{display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--rule);
  border-radius:99px;padding:4px 6px 4px 10px;font-size:13px;max-width:100%;min-width:0}
.slot .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.slot .x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.slot .x:hover{color:var(--accent)}
.slot.ghost{color:var(--muted);border-style:dashed}
.tray .go{font:inherit;font-size:13.5px;font-weight:600;background:var(--ink);color:var(--paper);
  border:0;border-radius:4px;padding:9px 16px;cursor:pointer;flex:none}
.tray .go[disabled]{opacity:.4;cursor:default}

/* ---------- one candidate ---------- */
.whohead{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  padding:20px 22px;margin:14px 0 6px;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;min-width:0}
.whohead .wh-l{flex:1 1 320px;min-width:0}
.whohead h2{font-size:30px;line-height:1.1;overflow-wrap:anywhere}
.whohead .wh-sub{font-size:14.5px;color:var(--ink2);margin:7px 0 0}
.whohead .wh-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
/* Said plainly and in the warning colour, because it changes what the whole
   page means. The write-in version is the same shape in a cooler colour,
   since being a certified write-in is a fact about the ballot rather than a
   warning about the page. */
.offballot{margin:12px 0 0;padding:11px 14px;border-radius:8px;font-size:14px;
  line-height:1.5;background:color-mix(in srgb,var(--against) 9%,var(--surface));
  border:1px solid var(--against);color:var(--ink)}
.offballot.wi{background:var(--surface2);border-color:var(--rule);color:var(--ink2)}
.offballot b{color:var(--against)}
.offballot.wi b{color:var(--ink)}
.wtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--surface2);border:1px solid var(--rule);color:var(--ink2);border-radius:99px;padding:4px 10px}
.wtag.hot{border-color:var(--accent);color:var(--accent)}
.whohead .wh-r{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.whonums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-bottom:8px}
.whonums .wn{background:var(--surface);padding:15px 16px;min-width:0}
.whonums .wn .v{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.whonums .wn .k{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.whonums .wn.o .v{color:var(--against)}

/* These cards are independent of each other and wildly different lengths: a
   list of 27 disclosed assets next to a card with two lines in it. In a grid
   the short one was either stretched to match the tall one, which padded it
   out with half a screen of white, or left a ragged hole beneath it, because
   a grid row is as tall as its tallest cell either way. Columns pack them
   instead, so each card is its own height and the next one starts right
   underneath. */
.hgrid{columns:3 300px;column-gap:14px}
.hgrid > *{break-inside:avoid;margin:0 0 14px;width:100%;display:inline-block;vertical-align:top}
@media(max-width:980px){.hgrid{columns:2 300px}}
@media(max-width:680px){.hgrid{columns:1}}
.hcard{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:16px 18px;min-width:0}
.hcard h4{font-family:var(--display);font-size:17px;margin:0 0 3px}
.hcard .hk{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.band{font-family:var(--mono);font-size:12.5px;font-weight:500;background:var(--m0);color:var(--ink);
  border-radius:3px;padding:2px 7px;display:inline-block;overflow-wrap:anywhere;max-width:100%}
.band.none{background:var(--surface2);color:var(--muted)}
.hitem{padding:11px 0;border-bottom:1px solid var(--rule2);min-width:0}
.hitem:last-child{border-bottom:0}
.hitem .in{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.hitem .iw{font-size:12.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.hitem .ib{margin-top:6px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.hitem .ii{font-size:12px;color:var(--ink2)}
.kindrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.kpill{font-size:12.5px;background:var(--surface2);border:1px solid var(--rule);border-radius:99px;
  padding:4px 11px;color:var(--ink2);font-family:var(--mono)}
.kpill b{color:var(--ink);font-weight:600}
.srcline{font-size:12.5px;color:var(--muted);margin-top:12px;overflow-wrap:anywhere}
.srcline a{color:var(--accent)}
.fdnote{font-size:13px;color:var(--ink2);line-height:1.55;background:var(--surface2);
  border-left:2px solid var(--rule);padding:10px 13px;margin:0 0 12px;overflow-wrap:anywhere}
.geo{margin-top:6px}
.georow{display:grid;grid-template-columns:minmax(0,48px) minmax(0,1fr) minmax(0,88px) minmax(0,66px);
  gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule2);font-size:13px}
.georow:last-child{border-bottom:0}
.georow .gb{height:7px;background:var(--rule2);border-radius:99px;overflow:hidden}
.georow .gb i{display:block;height:100%;background:var(--m4);border-radius:99px;min-width:2px}
.georow .gv,.georow .gp{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.georow .gp{color:var(--muted);font-size:12px}
.georow .gs{font-family:var(--mono);font-weight:600}
.georow.home .gs{color:var(--accent)}

/* ---------- two candidates, side by side ---------- */
.cmphead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:14px 0 4px}
.cmpc{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:16px 18px;min-width:0}
.cmpc h3{font-size:21px;line-height:1.15;overflow-wrap:anywhere}
.cmpc .cs{font-size:13.5px;color:var(--ink2);margin-top:5px}
.cmpc .cswap{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.cmpwarn{border-left:3px solid var(--against);background:var(--surface);border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0 4px 4px 0;
  padding:14px 17px;margin:14px 0}
.cmpwarn .k{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--against);display:block;margin-bottom:6px}
.cmpwarn p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.55;overflow-wrap:anywhere}
.cmplist{margin:8px 0 0;padding:0;list-style:none}
.cmplist li{font-size:13.5px;color:var(--ink2);padding:6px 0;border-bottom:1px solid var(--rule2);overflow-wrap:anywhere}
.cmplist li:last-child{border-bottom:0}
.loading{padding:60px 0;text-align:center;color:var(--muted);font-family:var(--mono);font-size:13px}
.failbox{margin:20px 0}

@media (max-width:720px){
  .cmphead{grid-template-columns:minmax(0,1fr)}
  .whohead h2{font-size:25px}
  .georow{grid-template-columns:minmax(0,40px) minmax(0,1fr) minmax(0,76px)}
  .georow .gp{display:none}
  .ptable th:nth-child(4),.ptable td:nth-child(4),
  .ptable th:nth-child(5),.ptable td:nth-child(5){display:none}
  .tray-in{padding:9px 0}
}

/* ---------- the way back ---------- */
/* A breadcrumb trail in 11px mono is a label, not a control. The first thing
   in the strip is now a real button that names where it goes, because the
   question a reader has after opening a candidate's page is "how do I get
   back to my ballot", and the answer should not be the browser chrome. */
.crumb-in{gap:10px}
.backbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);
  font-size:13.5px;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:99px;padding:6px 14px 6px 11px;
  text-decoration:none;flex:none;max-width:100%;min-width:0}
.backbtn:hover{border-color:var(--accent);color:var(--accent)}
.backbtn .ar{font-size:15px;line-height:1;margin-top:-1px}
.backbtn .bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.trail a{color:var(--ink2);text-decoration:none}
.trail a:hover{color:var(--accent)}
.trail .sep{opacity:.5}
@media(max-width:620px){.trail{display:none}}

/* ---------- back to top ---------- */
/* Appears only once there is something to go back up to. --dock is set by the
   compare tray when it is open, so the button rides above it instead of
   sitting on top of it. */
.totop{position:fixed;right:18px;bottom:calc(18px + var(--dock, 0px));z-index:44;
  display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:600;
  background:var(--surface);color:var(--ink2);border:1px solid var(--rule);
  border-radius:99px;padding:9px 15px 9px 12px;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .15s,transform .15s,bottom .15s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--accent);color:var(--accent)}
.totop .ar{font-size:14px;line-height:1}
@media(max-width:620px){.totop{right:12px;padding:9px 13px}.totop .tl{display:none}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}

/* ---------- score ---------- */
.scoregrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px}
.scoregrid .scorecard{text-align:center;display:block}
.scoregrid .scorecard .big,.scoregrid .scorecard .outof{display:block;text-align:center;width:100%}
.scoregrid .big{font-size:60px;font-weight:600;line-height:1;letter-spacing:-.03em}
.scoregrid .outof{font-size:12px;color:var(--muted);margin-top:6px}
.scoregrid .who{justify-content:center}
.scorewrap{padding-bottom:40px}
.scoretop{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px}
.scorecard{background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:20px}
.scorecard .who{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.scorecard .who b{font-family:var(--display);font-size:17px}
.scorenum{display:flex;align-items:baseline;gap:8px}
.scorenum .n{font-family:var(--display);font-size:56px;font-weight:700;line-height:.95;font-variant-numeric:tabular-nums}
.scorenum .o{font-family:var(--mono);font-size:12px;color:var(--muted)}
.track{position:relative;height:10px;background:var(--rule2);border-radius:5px;margin:14px 0 6px;overflow:hidden}
.track i{position:absolute;left:0;top:0;height:100%;background:var(--against);border-radius:5px}
.trackkey{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.scoreread{font-size:13.5px;color:var(--ink2);margin:12px 0 0}
.comps{background:var(--surface);border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.comprow{display:grid;grid-template-columns:minmax(190px,1.1fr) 1fr 1fr;border-top:1px solid var(--rule)}
.comprow:first-child{border-top:0}
.comphead{grid-column:1/-1;background:var(--surface2);padding:10px 16px;display:grid;grid-template-columns:minmax(190px,1.1fr) 1fr 1fr;gap:0;align-items:baseline}
.comphead span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.complabel{padding:13px 16px;min-width:0}
.complabel b{font-size:13.5px;font-weight:600;display:block}
.complabel span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.compcell{padding:13px 16px;border-left:1px solid var(--rule);min-width:0}
.compbar{position:relative;height:9px;background:var(--rule2);border-radius:4px;margin-bottom:6px}
.compbar i{position:absolute;left:0;top:0;height:100%;background:var(--against);border-radius:4px;min-width:2px}
.compcell .pts{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.compcell .det{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.comptotal{background:var(--surface2);font-weight:700}
.comptotal .complabel b{font-family:var(--display);font-size:15px}
.comptotal .compcell .pts{font-size:15px}

@media(max-width:900px){
  .herogrid{grid-template-columns:1fr;gap:26px}
  .statehead{grid-template-columns:120px 1fr;gap:18px}
}
@media(max-width:860px){
  .shortgrid{grid-template-columns:1fr;gap:14px}
  /* On a phone a centre-labelled row has nowhere to go, so the label moves on
     top and the two values sit under it, each still named. */
  .ldgrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 0}
  .ldgk{grid-column:1/-1;order:-1;text-align:left;font-weight:600;color:var(--ink);padding-top:0}
  .qmark{margin-left:0}
  .ldgv.l,.ldgv.r{align-items:flex-start;text-align:left}
  .ldgv.l .minibar{transform:none}
  .ldgv:before{content:attr(data-who);font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .ldgv .n{font-size:17px}
  .ldgrow.strong .ldgv .n{font-size:21px}
  .ldgv .s{max-width:none}
  .barpair{grid-template-columns:1fr;gap:16px}
  .whogrid,.twokind,.pairhead{grid-template-columns:1fr;gap:14px}
  .seatgrid{grid-template-columns:1fr}
  .totgrid{grid-template-columns:1fr}
  .ratiorow{grid-template-columns:1fr 64px;gap:8px 12px}
  .ratiorow .rg-who{grid-column:1/-1}
  .sr-one{grid-template-columns:1fr 58px;gap:6px 10px}
  .sr-one .sr-w{grid-column:1/-1}
  .mx-head{display:none}
  .mx-row{grid-template-columns:1fr;gap:8px}
  .mx-c{display:flex;align-items:center;gap:9px}
  .mx-c:before{content:attr(data-who);font-family:var(--mono);font-size:10px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .pairhead{display:none}
  .led.big .sechead h2{font-size:25px}
  .racerow{flex-direction:column;align-items:flex-start;gap:10px}
  .plate.big .nm{font-size:16px}
  .catbars{grid-template-columns:1fr;gap:16px}
    .namepair{grid-template-columns:1fr}
  .scoregrid{grid-template-columns:1fr;gap:14px}
  .scoregrid .big{font-size:48px}
  .icells{grid-template-columns:1fr}
  .icell+.icell{border-left:0}
  .iwho{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:8px}
  .ihead h3{font-size:19px}
  .sc-rows .k,.rootrow .k,.vrow .k{width:100%;display:block;margin-bottom:2px}
  .sc-rows>div,.rootrow,.vrow{flex-direction:column;gap:0;align-items:stretch}
  /* a column flex container still carrying align-items:baseline sizes its
     children to max-content, which is how a long sentence pushed the page
     wider than the phone it was being read on */
  .sc-rows>div .v,.rootrow .v,.vrow .v{width:100%;min-width:0;overflow-wrap:anywhere}
  .scoretop{grid-template-columns:1fr}
  .comprow,.comphead{grid-template-columns:1fr 1fr}
  .complabel{grid-column:1/-1;padding-bottom:0}
  .compcell{border-left:0;border-top:1px solid var(--rule2)}
  .compcell:nth-child(3){border-left:1px solid var(--rule2)}
  .comphead span:first-child{grid-column:1/-1;margin-bottom:4px}
  .pair{grid-template-columns:1fr;gap:0}
  .col{padding-bottom:24px}
  /* Whose column is this. A name bar in the candidate's party colour opens
     each one, and every card under it carries a thick stripe of the same colour
     down its left edge, so the answer is still on the screen in the middle of a
     long scroll and not only at the top of it. */
  .col[data-who]:not(.named)::before{content:attr(data-who) " (" attr(data-ps) ")";display:block;
    font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25;
    padding:9px 12px;margin:0 0 12px;border-radius:5px;color:var(--on-party);
    background:var(--ind);overflow-wrap:anywhere}
  .col[data-who].pc-D:not(.named)::before{background:var(--dem)}
  .col[data-who].pc-R:not(.named)::before{background:var(--rep)}
  .col[data-who]{border-left:5px solid var(--ind);padding-left:12px}
  .col.pc-D{border-left-color:var(--dem)}
  .col.pc-R{border-left-color:var(--rep)}
  .col.named{padding-left:12px}
  .pair{row-gap:26px}
  .col>.colname{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:17px;padding:6px 0 2px;border-bottom:2px solid var(--ink);margin-bottom:4px}
  .lcells{grid-template-columns:1fr}
  .lcell+.lcell{border-left:0;border-top:1px solid var(--rule)}
  .lname{display:block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:7px}
  .headcell{padding:9px 12px;flex-direction:column;align-items:flex-start;gap:2px}
  .headcell .nm{font-size:14px;white-space:normal}
  .headcell .st{display:none}
  .mark h1{font-size:20px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- the U.S. House section of a state page ---------- */
/* Two things were wrong here and the first one explains most of the second.
   This stylesheet was written and then never reached the page, so the cards
   for the competitive districts had no card: no background, no border, no
   spacing, no columns. Eight of them ran together down the page as one
   undifferentiated block of text with the written note for each race folded
   into the one above it. The map's own chrome was unstyled for the same
   reason.

   The second thing is the district rows. They were a four column grid, sized
   for the ten candidates Louisiana's 6th puts on one ballot, which left a hand
   span of nothing between two names and the money in every other district in
   the country. The money, the link and a repeated "certified" stacked up in
   the right hand column with nothing to tell them apart. A reader cannot scan
   that.

   So a district is a block, not a table row: the number anchors it, the
   candidates sit on one line under it as light chips rather than slabs of
   party colour, and one line of plain figures runs underneath with a single
   button at the end of it. */

/* ---- a candidate, in a list ---- */
/* The filled plates are right for two names on a race page and wrong for ten
   in a row, where they read as a wall of colour with no way in. Here the party
   is a letter in the party's colour on a quiet chip, the name is ordinary text
   at ordinary weight, and the whole thing is a link to that candidate, which
   the old row never was. */
.cand{display:inline-flex;align-items:stretch;border:1px solid var(--rule);
  border-radius:6px;overflow:hidden;background:var(--surface);text-decoration:none;
  max-width:100%;min-width:0;transition:border-color .12s,background .12s}
.cand .c-ps{display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;
  padding:0 7px;background:var(--ind);color:var(--on-party)}
.cand.c-D .c-ps{background:var(--dem)}
.cand.c-R .c-ps{background:var(--rep)}
.cand .c-nm{padding:6px 10px;font-size:14px;line-height:1.3;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cand .c-inc{font-family:var(--mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);align-self:center;
  padding-right:9px;margin-left:-3px;flex:none}
.cand:hover{border-color:var(--accent);background:var(--surface2)}
.cand:hover .c-nm{color:var(--accent)}
.cand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- the button she asked for ---- */
.btn-cmp{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--display);font-size:13px;font-weight:600;line-height:1;
  padding:9px 15px;border-radius:7px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;text-decoration:none;white-space:nowrap;
  transition:background .12s,box-shadow .12s}
.btn-cmp .ar{font-family:var(--mono);font-size:13px}
.btn-cmp:hover{background:var(--accent-ink,#C1362C);box-shadow:var(--shadow)}
.btn-cmp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the quieter one, for a district with a single candidate and nothing to
   compare them against */
.btn-cmp.ghost{background:transparent;color:var(--accent)}
.btn-cmp.ghost:hover{background:var(--accent-soft)}

/* ---- one district ---- */
/* Two lines, not four. The number is a column of its own on the left so the
   names line up all the way down the list, the candidates run along the first
   line, and the figures and the way in share the second. The old row gave the
   number, the names, the money and the link a quarter of the width each and
   left most of it empty. */
.dlist{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow);overflow:hidden}
.drow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;
  align-items:start;padding:13px 20px}
.drow + .drow{border-top:1px solid var(--rule)}
.drow:hover{background:var(--surface2)}
.drow:target,.drow.lit{background:var(--accent-soft)}
.drow.lit .drow-id{color:var(--accent)}

.drow-id{grid-column:1;grid-row:1;min-width:62px;padding-top:7px;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--ink)}
.drow-cands{grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;min-width:0}
.drow-cands .vs{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);flex:none}
.dtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);border-radius:99px;padding:2px 8px;
  white-space:nowrap;align-self:center}
.dtag.hot{color:var(--against);border-color:var(--against)}
.dtag.open{color:var(--ink2)}

/* The figures and the way in on one line, with the button at the end of it
   rather than stacked in a column of small red capitals nobody read as
   something to press. */
.drow-foot{grid-column:2;grid-row:2;display:flex;align-items:center;
  gap:6px 16px;flex-wrap:wrap;margin-top:7px}
/* The button belongs to the whole district, not to the line of figures, so it
   sits in a column of its own and centres against both lines. */
.drow > .btn-cmp{grid-column:3;grid-row:1/span 2;align-self:center}
.dm{font-family:var(--mono);font-size:11.5px;color:var(--ink2);white-space:nowrap}
.dm.o{color:var(--against)}
.dm.none{color:var(--muted)}

/* the lines that hang off a district: certified write-ins, the people who are
   not on the ballot with the reason, and the written note on the race */
.wirow,.offrow{grid-column:2/-1;margin:9px 0 0;font-size:12.5px;line-height:1.55;
  color:var(--muted);border-left:2px solid var(--rule);padding-left:12px}
.offrow{border-left-color:var(--against)}
.wilab{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2);border:1px solid var(--rule);
  border-radius:99px;padding:1px 7px;margin-right:6px;white-space:nowrap}

@media(max-width:620px){
  .drow{grid-template-columns:minmax(0,1fr);padding:14px 15px}
  /* One column, so every child has to give up the row it was pinned to.
     Leaving the names on row 1 and the figures on row 2 pushed the district
     number down into the first free cell, which put it under the money. */
  .drow > *{grid-column:1;grid-row:auto}
  .drow-id{min-width:0;padding-top:0;margin-bottom:8px}
  /* The button's own rule is more specific than the one above it, so it has
     to give up its column and row by name or it keeps building a three column
     grid out of a one column template and squeezes the names into a sliver. */
  .drow > .btn-cmp{grid-column:1;grid-row:auto;width:100%;
    justify-content:center;margin-top:11px}
  /* A name is not something to truncate. At this width "David Taylor" was
     coming out as "David Ta..." to protect a column that no longer exists. */
  .cand{max-width:100%}
  .cand .c-nm{font-size:13.5px;white-space:normal;overflow:visible;
    text-overflow:clip;overflow-wrap:anywhere}
}

/* ---------- the districts in play ---------- */
/* A state with fifty-two districts is not navigable as one list of fifty-two
   identical rows, so the handful actually in play get a card each and
   everything else stays in the list underneath, findable by number. Cards of
   wildly different lengths, because one carries three sentences of written
   note and the next carries none: a grid row is as tall as its tallest cell,
   so columns pack them instead and each card is its own height. */
.dcards{columns:3 340px;column-gap:16px;margin-top:4px}
.dcards > .dcard{break-inside:avoid;margin:0 0 16px;width:100%;
  display:inline-block;vertical-align:top}
@media(max-width:1100px){.dcards{columns:2 340px}}
@media(max-width:760px){.dcards{columns:1}}

.dcard{background:var(--surface);border:1px solid var(--rule);
  border-top:3px solid var(--accent);border-radius:10px;padding:16px 18px;
  box-shadow:var(--shadow);min-width:0}
.dcard-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dcard-n{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--accent)}
.dcard-r{font-size:12.5px;font-weight:600;color:var(--ink2)}
.dcard .drow-cands{margin-top:11px}
.dcard-m{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  color:var(--ink2);border-top:1px solid var(--rule2);margin-top:12px;padding-top:11px}
.dcard-m .o{color:var(--against)}
.dcard-m .none{color:var(--muted)}
.dcard-w{font-size:13px;color:var(--ink2);line-height:1.6;margin:11px 0 0}
.dcard .btn-cmp{margin-top:13px}
.dcard .wirow,.dcard .offrow{margin-top:11px}

/* ---------- the district map ---------- */
.cdmap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;
  align-items:start;margin-top:4px}
.cdm-fig{position:relative;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;padding:10px;box-shadow:var(--shadow);min-width:0}
.cdm-svg{display:block;width:100%;height:auto}
.cdm-p{stroke:var(--surface);stroke-width:1.4;cursor:pointer;transition:fill-opacity .12s}
.cdm-p:hover,.cdm-p.on{fill-opacity:.65;stroke:var(--ink);stroke-width:2}
.cdm-p:focus{outline:none;stroke:var(--accent);stroke-width:2.5}
.cdm-t{font-family:var(--mono);font-size:14px;font-weight:600;fill:var(--ink);
  text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--surface);
  stroke-width:3px;stroke-linejoin:round}
.cdm-dot{fill:var(--ink);stroke:var(--surface);stroke-width:1.5;pointer-events:none}
.cdm-tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);
  color:var(--paper);font-size:12.5px;line-height:1.45;padding:7px 10px;border-radius:6px;
  max-width:260px;box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
.cdm-co{color:var(--on-dark-2,#B9AFA4);font-size:11.5px}
.cdm-side{min-width:0}
.cdm-h{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:0 0 10px}
.cdm-chips{display:flex;flex-wrap:wrap;gap:6px}
.cdm-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;padding:5px 9px;
  border:1px solid var(--rule);border-radius:99px;background:var(--surface);
  color:var(--ink2);cursor:pointer;font-weight:500}
.cdm-chip:hover{border-color:var(--accent);color:var(--accent)}
.cdm-n{font-size:12.5px;color:var(--ink2);line-height:1.55;margin:12px 0 0}
.cdm-src{font-size:11.5px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.cdm-note{font-size:12.5px;line-height:1.6;color:var(--ink2);margin:12px 0 0;
  border-left:3px solid var(--accent);padding-left:11px}
@media(max-width:820px){.cdmap{grid-template-columns:minmax(0,1fr);gap:16px}}
/* A candidate files under their legal name, which is often not the name they
   campaign under. Where the name here was checked against a directory or a
   state's certified ballot list, the page says so; where it is the filing name
   standing on its own, it says that too. */
.namesrc{display:inline-block;vertical-align:middle;margin-left:10px;font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--muted);border:1px solid var(--rule);border-radius:99px;padding:3px 8px;
  cursor:help;white-space:nowrap}