:root {
  --bg: #fbfaf8; --fg: #1d1c1a; --muted: #6a665f; --line: #dedad3; --card: #ffffff;
  /* Option colours carry no party or campaign meaning: no red/green/blue/orange. */
  --opt1: #5b4b8a; --opt2: #8a7638; --gap: #b0aaa0; --warn-bg: #fff3c4; --warn-fg: #4a3b00;
  --nodata: #dcd8d0; --ed-edge: #ffffff;
  /* Voting opportunity colours: no party hues, distinct from the option colours; validated
     with the dataviz palette checks (CVD and normal-vision separation, 3:1 contrast) in both modes. */
  --opp-advance: #139cb6; --opp-votingDay: #c26e89; --opp-vbm: #8e405b; --opp-mobile: #af8433;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161514; --fg: #ecebe8; --muted: #a39f97; --line: #3a3835; --card: #1f1e1c;
    --opt1: #a594d8; --opt2: #cdb46a; --gap: #6b665e; --warn-bg: #4a3b00; --warn-fg: #fff3c4;
    --nodata: #3a3733; --ed-edge: #121110;
  }
}
:root[data-theme="dark"] {
  --bg: #161514; --fg: #ecebe8; --muted: #a39f97; --line: #3a3835; --card: #1f1e1c;
  --opt1: #a594d8; --opt2: #cdb46a; --gap: #6b665e; --warn-bg: #4a3b00; --warn-fg: #fff3c4;
  --nodata: #3a3733; --ed-edge: #121110;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.5rem; margin: 1rem 0 .5rem; }
h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 1.75rem 0 .25rem; }
.note { color: var(--muted); font-size: .875rem; margin: .25rem 0 .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.banner { background: var(--fg); color: var(--bg); font-size: .8125rem; padding: 6px 16px; text-align: center; }
.banner a { color: inherit; }
footer a { color: inherit; }
.banner.synthetic { background: var(--warn-bg); color: var(--warn-fg); font-weight: 700; font-size: .9375rem; border-bottom: 2px solid var(--warn-fg); }

.asof { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; }
.asof div { min-width: 0; }
.asof dt { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.asof dd { margin: 0; font-variant-numeric: tabular-nums; }

.questions { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.questions li button {
  width: 100%; text-align: left; background: var(--card); color: inherit; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px;
}
.questions li button[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.questions li.featured { grid-column: 1 / -1; }
.q-num { font-weight: 700; }
.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.q-margin { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-arrow { font-size: .8em; }
.q-arrow.o1 { color: var(--opt1); } .q-arrow.o2 { color: var(--opt2); }
.q-topic { font-weight: 600; color: var(--muted); margin-left: .5em; }
.q-topic::before { content: '· '; }
.q-short { color: var(--muted); font-size: .875rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .q-short { -webkit-line-clamp: 3; line-clamp: 3; } }
.questions li { display: grid; gap: 2px; align-content: start; }
.q-full { font-size: .8125rem; padding: 0 12px; }
.q-full summary { color: var(--muted); cursor: pointer; padding: 2px 0; }
.q-full p { margin: 4px 0 8px; }
.q-counts { display: flex; justify-content: space-between; gap: 8px; font-size: .875rem; font-variant-numeric: tabular-nums; }
.bar { width: 100%; height: 10px; display: block; }
.bar .o1 { fill: var(--opt1); } .bar .o2 { fill: var(--opt2); } .bar .none { fill: var(--line); }

.detail { border-top: 1px solid var(--line); padding-top: 1rem; }
.qtext { max-width: 75ch; }
.options-legend { list-style: none; padding: 0; display: grid; gap: 6px; }
.options-legend li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: start; }
.swatch { width: 14px; height: 14px; border-radius: 3px; margin-top: 4px; }
.swatch.o1 { background: var(--opt1); } .swatch.o2 { background: var(--opt2); }

.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis { stroke: var(--line); }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .l1 { stroke: var(--opt1); fill: none; stroke-width: 2; }
.chart .l2 { stroke: var(--opt2); fill: none; stroke-width: 2; }
.chart .gap { stroke-dasharray: 4 4; }
.chart circle { cursor: pointer; stroke: var(--bg); stroke-width: 1.5; }
.chart circle.o1 { fill: var(--opt1); } .chart circle.o2 { fill: var(--opt2); }
.chart circle.dense { fill-opacity: 0; stroke: none; }
.chart circle.dense:hover, .chart circle.dense.selected, .chart circle.dense:focus-visible { fill-opacity: 1; }
.chart circle.dense.selected { stroke: var(--fg); }
.chart circle:focus-visible, .chart circle.selected { stroke: var(--fg); stroke-width: 3; outline: none; }
.chart .empty { fill: var(--muted); font-size: 13px; }

.topic-heading { font-size: 1.125rem; font-weight: 700; margin: 1.75rem 0 -1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.opp { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px 24px; align-items: center; margin: 8px 0 4px; }
.opp-pie svg { width: 150px; height: 150px; display: block; }
.opp-pie .slice { stroke: var(--bg); stroke-width: 2; }
.opp-pie .center { fill: var(--fg); font-size: 13px; text-anchor: middle; }
.opp-pie .center-sub { fill: var(--muted); font-size: 9px; text-anchor: middle; }
.opp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opp-bars li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 4em; gap: 2px 10px; align-items: center; font-size: .875rem; }
.opp-bars .name, .split .name { display: flex; align-items: center; gap: 6px; }
.swatch-sq { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.opp-bars svg { width: 100%; height: 12px; display: block; }
.opp-bars .track { fill: var(--line); }
.opp-bars .pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.opp-bars .opp-detail { grid-column: 2 / 4; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.opp-advance { fill: var(--opp-advance); background: var(--opp-advance); }
.opp-votingDay { fill: var(--opp-votingDay); background: var(--opp-votingDay); }
.opp-vbm { fill: var(--opp-vbm); background: var(--opp-vbm); }
.opp-mobile { fill: var(--opp-mobile); background: var(--opp-mobile); }
@media (max-width: 640px) {
  .opp { grid-template-columns: 1fr; justify-items: center; }
  .opp-bars { width: 100%; }
  .opp-bars li { grid-template-columns: 8.5em minmax(0, 1fr) 3.6em; }
}

.split { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.split li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 2px 10px; align-items: center; font-size: .875rem; }
.split svg { width: 100%; height: 14px; display: block; }
.split .o1 { fill: var(--opt1); } .split .o2 { fill: var(--opt2); } .split .none { fill: var(--line); }
.split .split-vals { grid-column: 2; display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.split .split-sub { grid-column: 2; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .split li { grid-template-columns: 1fr; } .split .split-vals, .split .split-sub { grid-column: 1; } }

.map-controls { display: flex; gap: 6px; margin: 4px 0; }
.map-controls button { font: inherit; font-size: .875rem; background: var(--card); color: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.map-controls button[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.map { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: start; }
.map-insets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.map-insets figure { margin: 0; border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: var(--card); }
.map-insets figure.wide { grid-column: span 3; }
.map-insets figure.small { grid-column: span 2; }
.map-insets figcaption { font-size: .75rem; color: var(--muted); }
.map svg { width: 100%; height: auto; display: block; }
.map .ed { stroke: var(--ed-edge); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; }
.map .ed.hover, .map .ed:focus-visible { stroke: var(--fg); stroke-width: 1.75; outline: none; }
.map .ed.selected { stroke: var(--fg); stroke-width: 2.5; }
.map .hatch { pointer-events: none; }
.map .hatch-lines, .map-legend .hatch-lines { stroke: var(--bg); opacity: .45; }
.map .inset-box { fill: none; stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .inset-label { fill: var(--fg); font-size: 900px; }
.nodata { fill: var(--nodata); }
.tie { fill: var(--muted); }
.o1-1, .o1-2, .o1-3, .o1-4 { fill: var(--opt1); }
.o2-1, .o2-2, .o2-3, .o2-4 { fill: var(--opt2); }
.o1-1, .o2-1 { fill-opacity: .3; } .o1-2, .o2-2 { fill-opacity: .5; } .o1-3, .o2-3 { fill-opacity: .72; } .o1-4, .o2-4 { fill-opacity: .95; }
.r-0 { fill: var(--nodata); }
.r-1, .r-2, .r-3, .r-4, .r-5 { fill: var(--fg); }
.r-1 { fill-opacity: .12; } .r-2 { fill-opacity: .3; } .r-3 { fill-opacity: .5; } .r-4 { fill-opacity: .7; } .r-5 { fill-opacity: .92; }
.map-legend { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; }
.map-legend li { display: flex; align-items: center; gap: 6px; }
.map-legend svg { width: 16px; height: 12px; }
@media (max-width: 640px) { .map { grid-template-columns: 1fr; } }

.evidence { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: .875rem; }
.evidence dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
.evidence dt { color: var(--muted); }
.evidence dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-weight: 600; color: var(--muted); }
td.state-none { color: var(--muted); }
.eds { width: auto; }
.eds th { vertical-align: bottom; white-space: normal; padding: 4px 6px; }
.eds th button.sort .sub { max-width: 7.5em; white-space: normal; }
.eds td { padding: 4px 6px; }
.eds td.num { white-space: nowrap; }
.eds th button.sort { all: unset; cursor: pointer; display: inline-block; line-height: 1.2; white-space: nowrap; }
.eds th.num button.sort { text-align: right; }
.eds th button.sort .sub { display: block; font-weight: 400; font-size: .75rem; }
.eds th button.sort:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.eds th[aria-sort="ascending"] button.sort::after { content: ' ▲'; font-size: .65rem; }
.eds th[aria-sort="descending"] button.sort::after { content: ' ▼'; font-size: .65rem; }
.table-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 6px 0; font-size: .875rem; }
.table-tools input, .table-tools select { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.table-tools input { width: 14em; max-width: 60vw; }
.state { font-size: .75rem; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.state.complete { border-color: var(--fg); }

button.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
button.linkish:hover, button.linkish[aria-pressed="true"] { text-decoration-color: currentColor; }
tr.selected td { background: var(--card); font-weight: 600; }
.ed-detail { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px; background: var(--card); }
.ed-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ed-detail-head h4 { margin: 0; font-size: 1rem; }
.ed-detail-head button { font: inherit; font-size: .875rem; background: none; color: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; cursor: pointer; }

.checks { padding-left: 1.2rem; font-size: .875rem; }
.checks .discrepancy { font-weight: 700; }
.privacy h2 { font-size: .875rem; margin: 1rem 0 .25rem; }
footer { color: var(--muted); font-size: .8125rem; margin: 2rem auto; }