/* WhatItMeans.org
   Readability first. Narrow measure, large type, generous spacing, one idea per
   block. Nothing here is decorative for its own sake. */

:root {
  --bg:#faf9f6;
  --paper:#ffffff;
  --ink:#1b1b19;
  --ink2:#55554e;
  --ink3:#706f67;
  --line:#e6e4dc;
  --line2:#d3d0c5;

  --brand:#1f5f8b;
  --brand-ink:#17496b;
  --brand-bg:#eaf2f8;
  --brand-on:#ffffff;

  --yes:#15803d; --yes-bg:#f1fdf5; --yes-line:#bbf0cd;
  --no:#92400e;  --no-bg:#fffbeb;  --no-line:#fde68a;
  --red:#b91c1c; --red-bg:#fef2f2;
  --left:#2563eb;  --left-bg:#eff6ff;
  --right:#dc2626; --right-bg:#fef2f2;

  --dem:#1d4ed8; --dem-bg:#eff6ff;
  --rep:#b91c1c; --rep-bg:#fef2f2;

  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shadow:0 1px 2px rgba(20,20,18,.05), 0 4px 14px rgba(20,20,18,.04);
  --measure:34rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14141a; --paper:#1c1c23; --ink:#eeeee9; --ink2:#aaaaa2; --ink3:#8c8c83;
    --line:#2d2d35; --line2:#3c3c46;
    --brand:#7fb6dd; --brand-ink:#a8cfe9; --brand-bg:#1a2b38; --brand-on:#10212c;
    --yes:#6ee7a0; --yes-bg:#132419; --yes-line:#1f4430;
    --no:#fbbf24;  --no-bg:#28210f;  --no-line:#4b3b14;
    --red:#f87171; --red-bg:#2a1718;
    --left:#93b4fc;  --left-bg:#19223a;
    --right:#f87171; --right-bg:#2a1718;
    --dem:#93b4fc; --dem-bg:#19223a;
    --rep:#f87171; --rep-bg:#2a1718;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg:#14141a; --paper:#1c1c23; --ink:#eeeee9; --ink2:#aaaaa2; --ink3:#8c8c83;
  --line:#2d2d35; --line2:#3c3c46;
  --brand:#7fb6dd; --brand-ink:#a8cfe9; --brand-bg:#1a2b38; --brand-on:#10212c;
  --yes:#6ee7a0; --yes-bg:#132419; --yes-line:#1f4430;
  --no:#fbbf24;  --no-bg:#28210f;  --no-line:#4b3b14;
  --red:#f87171; --red-bg:#2a1718;
  --left:#93b4fc;  --left-bg:#19223a;
  --right:#f87171; --right-bg:#2a1718;
  --dem:#93b4fc; --dem-bg:#19223a;
  --rep:#f87171; --rep-bg:#2a1718;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:18px/1.7 var(--sans);
}
img { max-width:100%; height:auto; }
a { color:var(--brand); text-decoration-thickness:1px; text-underline-offset:2px; }
h1,h2,h3,h4 { line-height:1.2; margin:0; }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:3px; }

.wrap { max-width:62rem; margin:0 auto; padding:0 1.25rem; }
.narrow { max-width:var(--measure); margin-left:auto; margin-right:auto; }

.skip {
  position:absolute; left:-9999px; top:0; background:var(--brand); color:var(--brand-on);
  padding:.7rem 1rem; z-index:100; border-radius:0 0 8px 0;
}
.skip:focus { left:0; }

/* ───────────────────────────────────────────────── header */
.site-head {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(1px)) { .site-head { background:var(--bg); } }
.head-in { display:flex; align-items:center; gap:1rem; height:4rem; }
.brand {
  display:flex; align-items:baseline; gap:.1rem; text-decoration:none;
  font:700 1.14rem/1 var(--sans); letter-spacing:-.025em; color:var(--ink);
  white-space:nowrap;
}
.brand .b1 { color:var(--ink); }
.brand .b2 { color:var(--brand); }
.brand .b3 { color:var(--ink3); font-weight:600; font-size:.82em; }

.site-nav { display:flex; gap:.2rem; margin-left:auto; align-items:center; }
.site-nav a, .site-nav button {
  font:600 .88rem/1 var(--sans); color:var(--ink2); text-decoration:none;
  padding:.55rem .7rem; border-radius:7px; background:none; border:0;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.site-nav a:hover, .site-nav button:hover { background:var(--brand-bg); color:var(--brand-ink); }
.site-nav a[aria-current="page"] { color:var(--brand-ink); background:var(--brand-bg); }
.nav-cta {
  background:var(--brand) !important; color:var(--brand-on) !important;
  padding:.55rem .95rem !important;
}
.nav-cta:hover { filter:brightness(1.08); }
.icon-btn { font-size:1rem; line-height:1; padding:.5rem .55rem !important; }

.burger { display:none; }
@media (max-width:760px) {
  .site-nav { position:fixed; inset:4rem 0 auto 0; flex-direction:column;
    align-items:stretch; background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem .75rem 1rem; gap:.15rem; display:none; box-shadow:var(--shadow); }
  .site-nav.open { display:flex; }
  .site-nav a, .site-nav button { padding:.8rem .8rem; font-size:1rem; text-align:left; }
  .burger { display:block; margin-left:auto; }
  .brand { font-size:1rem; }
  .brand .b3 { display:none; }
}

/* ───────────────────────────────────────────────── generic blocks */
.card {
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem; box-shadow:var(--shadow);
}
.stack > * + * { margin-top:1.1rem; }
.muted { color:var(--ink2); }
.small { font-size:.88rem; }
.tiny  { font-size:.8rem; }
.center { text-align:center; }

.btn {
  display:inline-block; font:600 .95rem/1 var(--sans); padding:.8rem 1.2rem;
  border-radius:9px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; text-align:center; font-family:inherit;
}
.btn-primary { background:var(--brand); color:var(--brand-on); }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:var(--paper); color:var(--ink); border-color:var(--line2); }
.btn-ghost:hover { border-color:var(--brand); color:var(--brand-ink); }
.btn-block { display:block; width:100%; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

.chip {
  display:inline-block; font:600 .74rem/1 var(--sans); padding:.32rem .6rem;
  border-radius:999px; background:var(--bg); border:1px solid var(--line2);
  color:var(--ink2); white-space:nowrap;
}
.chip-brand { background:var(--brand-bg); border-color:transparent; color:var(--brand-ink); }
.chip-row { display:flex; gap:.35rem; flex-wrap:wrap; }

.kicker {
  font:700 .74rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:.8rem;
}

/* ───────────────────────────────────────────────── hero / page head */
.hero { padding:3.2rem 0 2.2rem; }
.hero h1 {
  font:700 clamp(2rem, 6vw, 3.1rem)/1.08 var(--serif); letter-spacing:-.025em;
  margin-bottom:.9rem;
}
.hero .lede { font-size:1.2rem; color:var(--ink2); max-width:40rem; }
.hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }

.page-head { padding:2.4rem 0 1.4rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
.page-head h1 { font:700 clamp(1.7rem,4.5vw,2.5rem)/1.12 var(--serif); letter-spacing:-.02em; }
.page-head .lede { font-size:1.08rem; color:var(--ink2); margin-top:.7rem; max-width:42rem; }

.crumbs { font-size:.85rem; color:var(--ink3); margin-bottom:1rem; }
.crumbs a { color:var(--ink2); text-decoration:none; }
.crumbs a:hover { color:var(--brand); text-decoration:underline; }
.crumbs span { margin:0 .4rem; }

/* ───────────────────────────────────────────────── the reading flow */
/* Numbered steps are the spine of an issue page: each one answers one question. */
.step { margin:0 0 2.4rem; }
.step-head { display:flex; gap:.75rem; align-items:center; margin-bottom:.85rem; }
.step-n {
  flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--brand); color:var(--brand-on);
  font:700 .88rem/1.9rem var(--mono); text-align:center;
}
.step-head h2 { font:700 1.18rem/1.3 var(--sans); letter-spacing:-.01em; }
.step-body > * + * { margin-top:1rem; }

/* The single most important paragraph on the site. */
.plain {
  font:1.22rem/1.72 var(--serif); color:var(--ink);
}
.plain.lead::first-letter { }
.plain + .plain { margin-top:1rem; }

.callout {
  border-left:4px solid var(--brand); background:var(--brand-bg);
  padding:1.1rem 1.25rem; border-radius:0 11px 11px 0;
}
.callout h3 {
  font:700 .76rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-ink); margin-bottom:.55rem;
}
.callout p { margin:0; font-size:1rem; }
.callout.warn { border-left-color:var(--no); background:var(--no-bg); }
.callout.warn h3 { color:var(--no); }

/* yes / no */
.votes { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.vote { border:1px solid; border-radius:12px; padding:1.1rem 1.15rem; }
.vote .tag { display:block; font:800 .82rem/1 var(--sans); letter-spacing:.1em; margin-bottom:.55rem; }
.vote p { margin:0; font-size:1rem; }
.vote.yes { background:var(--yes-bg); border-color:var(--yes-line); }
.vote.yes .tag { color:var(--yes); }
.vote.no { background:var(--no-bg); border-color:var(--no-line); }
.vote.no .tag { color:var(--no); }

/* for / against */
.sides { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.side h3 {
  font:800 .8rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  padding-bottom:.45rem; border-bottom:2px solid; margin-bottom:.85rem;
}
.side.for h3 { color:var(--yes); border-color:var(--yes-line); }
.side.against h3 { color:var(--no); border-color:var(--no-line); }
.side ol { margin:0; padding-left:1.3rem; }
.side li { margin:.75rem 0; font-size:1rem; color:var(--ink2); }

/* ───────────────────────────────────────────────── lean meter */
.meter { margin:0; }
.meter-scale {
  position:relative; height:.65rem; border-radius:999px; margin:1.9rem 0 .5rem;
  background:linear-gradient(to right,
    var(--left) 0%, color-mix(in srgb, var(--left) 35%, var(--line)) 32%,
    var(--line) 50%,
    color-mix(in srgb, var(--right) 35%, var(--line)) 68%, var(--right) 100%);
}
.meter-mid { position:absolute; left:50%; top:-.35rem; bottom:-.35rem; width:1px;
  background:var(--ink3); opacity:.5; }
.meter-needle {
  position:absolute; top:50%; width:1.2rem; height:1.2rem; border-radius:50%;
  background:var(--paper); border:3px solid var(--ink);
  transform:translate(-50%,-50%); box-shadow:0 1px 5px rgba(0,0,0,.25);
}
.meter-flag {
  position:absolute; bottom:1.5rem; transform:translateX(-50%);
  font:700 .78rem/1 var(--sans); white-space:nowrap;
  background:var(--ink); color:var(--bg); padding:.35rem .6rem; border-radius:6px;
}
.meter-ends { display:flex; justify-content:space-between; font:600 .76rem/1 var(--sans); }
.meter-ends .l { color:var(--left); }
.meter-ends .r { color:var(--right); }
.meter-why { margin-top:1.1rem; font-size:.95rem; color:var(--ink2); }
.conf { display:inline-block; font:700 .7rem/1 var(--sans); letter-spacing:.06em;
  text-transform:uppercase; padding:.28rem .5rem; border-radius:5px;
  background:var(--bg); border:1px solid var(--line2); color:var(--ink2); }
.conf-low { background:var(--no-bg); border-color:var(--no-line); color:var(--no); }

/* compact meter for lists */
.minimeter { display:flex; align-items:center; gap:.5rem; }
.minimeter .track {
  position:relative; flex:1 1 4.5rem; height:.3rem; border-radius:999px;
  background:linear-gradient(to right, var(--left-bg), var(--line), var(--right-bg));
}
.minimeter .dot {
  position:absolute; top:50%; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--ink); transform:translate(-50%,-50%);
}
.minimeter .lbl { font:600 .74rem/1 var(--sans); color:var(--ink2); white-space:nowrap; }

/* ───────────────────────────────────────────────── people / who is this */
.people-group + .people-group { margin-top:1.4rem; }
.people-group h3 {
  font:800 .76rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:.7rem;
}
.person-row {
  display:flex; align-items:center; gap:.85rem; padding:.8rem 0;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.person-row:last-child { border-bottom:0; }
.avatar {
  flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--brand-bg); color:var(--brand-ink);
  font:700 .9rem/2.6rem var(--sans); text-align:center; overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar.org { border-radius:8px; }
.person-main { flex:1 1 11rem; min-width:0; }
.person-name { font-weight:700; font-size:1rem; }
.person-role { font-size:.86rem; color:var(--ink2); }
.who-btn {
  flex:0 0 auto; font:700 .78rem/1 var(--sans); padding:.5rem .75rem;
  border-radius:999px; background:var(--brand-bg); color:var(--brand-ink);
  border:1px solid transparent; text-decoration:none; white-space:nowrap;
}
.who-btn:hover { background:var(--brand); color:var(--brand-on); }
.party { display:inline-block; font:700 .7rem/1 var(--mono); border-radius:4px;
  padding:.2rem .36rem; margin-left:.35rem; vertical-align:1px; }
.party-D { background:var(--dem-bg); color:var(--dem); }
.party-R { background:var(--rep-bg); color:var(--rep); }

.bio-head { display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; }
.bio-photo { flex:0 0 auto; width:9rem; border-radius:12px; overflow:hidden;
  background:var(--brand-bg); }
.bio-photo img { display:block; width:100%; }
.bio-meta { flex:1 1 16rem; min-width:0; }
.bio-body { font:1.08rem/1.75 var(--serif); }
.bio-body p { margin:0 0 1rem; }
.bio-body h2,.bio-body h3 { font-family:var(--sans); font-size:1.05rem; margin:1.6rem 0 .6rem; }
.bio-body ul { padding-left:1.3rem; }
.ai-note {
  background:var(--no-bg); border:1px solid var(--no-line); border-radius:10px;
  padding:.9rem 1.05rem; font-size:.88rem; color:var(--ink2);
}
.ai-note strong { color:var(--no); }
.src-list { padding-left:1.2rem; font-size:.88rem; }
.src-list li { margin:.4rem 0; }

/* ───────────────────────────────────────────────── money */
.money { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.cmte { border-left:3px solid var(--line2); padding:.5rem 0 .5rem .75rem; margin-bottom:.7rem; }
.cmte.sup { border-left-color:var(--yes-line); }
.cmte.opp { border-left-color:var(--no-line); }
.cmte-top { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.cmte-name { font-weight:700; font-size:.95rem; }
.cmte-amt { font:700 .9rem/1.5 var(--mono); color:var(--ink2); white-space:nowrap; }
.cmte-donors { font-size:.82rem; color:var(--ink3); margin-top:.25rem; }
.slate-tag {
  font:700 .64rem/1 var(--sans); text-transform:uppercase; letter-spacing:.05em;
  background:var(--bg); border:1px solid var(--line2); color:var(--ink3);
  border-radius:4px; padding:.18rem .32rem; cursor:help; vertical-align:1px;
}

/* ───────────────────────────────────────────────── model comparison */
.verdict {
  font:800 .7rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  border-radius:5px; padding:.3rem .5rem; white-space:nowrap;
}
.vd-Agree { background:var(--yes-bg); color:var(--yes); border:1px solid var(--yes-line); }
.vd-Minor { background:var(--no-bg); color:var(--no); border:1px solid var(--no-line); }
.vd-Material { background:var(--red-bg); color:var(--red); border:1px solid transparent; }
.cmp { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.cmp-col { background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:1rem; }
.cmp-col h4 { font-size:.9rem; margin-bottom:.5rem; }
.cmp-col p { font-size:.95rem; color:var(--ink2); margin:0 0 .5rem; }
.mdl { font:700 .72rem/1 var(--mono); border-radius:4px; padding:.2rem .36rem; }
.mdl-c { background:var(--brand-bg); color:var(--brand-ink); }
.mdl-g { background:var(--no-bg); color:var(--no); }

details.fold { border:1px solid var(--line); border-radius:11px; background:var(--paper); }
details.fold + details.fold { margin-top:.7rem; }
details.fold > summary {
  cursor:pointer; padding:1rem 1.15rem; list-style:none;
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
  font:700 .98rem/1.3 var(--sans);
}
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::before {
  content:"\25B8"; color:var(--ink3); font-size:.85rem; transition:transform .15s;
}
details.fold[open] > summary::before { transform:rotate(90deg); }
details.fold .fold-body { padding:0 1.15rem 1.2rem; }
.sum-hint { font-weight:500; color:var(--ink3); font-size:.85rem; margin-left:auto; }

blockquote.official {
  margin:0; font:.95rem/1.65 var(--mono); color:var(--ink2);
  background:var(--bg); border-radius:9px; padding:1rem 1.1rem;
}

/* ───────────────────────────────────────────────── issue list / cards */
.issue-list { list-style:none; margin:0; padding:0; }
.issue-item { border-bottom:1px solid var(--line); }
.issue-item:last-child { border-bottom:0; }
.issue-link {
  display:flex; gap:1rem; align-items:flex-start; padding:1.1rem .25rem;
  text-decoration:none; color:inherit; border-radius:10px;
}
.issue-link:hover { background:var(--brand-bg); }
.issue-code {
  flex:0 0 auto; min-width:3.1rem; text-align:center;
  font:700 .92rem/1 var(--mono); background:var(--brand-bg); color:var(--brand-ink);
  border-radius:7px; padding:.55rem .45rem;
}
.issue-main { min-width:0; flex:1 1 auto; }
.issue-title { font-weight:700; font-size:1.02rem; margin-bottom:.2rem; }
.issue-one { font-size:.95rem; color:var(--ink2); }
.issue-side { flex:0 0 auto; display:flex; flex-direction:column; gap:.35rem;
  align-items:flex-end; min-width:8rem; }
.issue-stat { font-size:.78rem; color:var(--ink3); }

.proj-grid { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
.proj-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.proj-card:hover { border-color:var(--brand); }
.proj-card h2 { font:700 1.3rem/1.22 var(--serif); margin-bottom:.4rem; }
.proj-card .sub { color:var(--ink2); font-size:.95rem; margin-bottom:.9rem; }
.proj-card .blurb { font-size:.97rem; color:var(--ink2); flex:1 1 auto; }
.proj-card .foot { display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.1rem;
  padding-top:.9rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--ink3); }

/* progress / walk the ballot */
.walk { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.15rem; background:var(--brand-bg); border-radius:11px; }
.walk .pos { font:700 .85rem/1 var(--sans); color:var(--brand-ink); white-space:nowrap; }
.walk .bar { flex:1 1 6rem; height:.4rem; background:var(--paper); border-radius:999px;
  overflow:hidden; min-width:5rem; }
.walk .bar i { display:block; height:100%; background:var(--brand); }

.prevnext { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:2rem; }
.pn {
  display:block; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:11px;
  text-decoration:none; color:inherit; background:var(--paper);
}
.pn:hover { border-color:var(--brand); }
.pn .dir { font:700 .72rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:.35rem; }
.pn .t { font-weight:700; font-size:.95rem; }
.pn.next { text-align:right; }
.pn.spacer { visibility:hidden; }

/* ───────────────────────────────────────────────── ratings */
.rate { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.stars { display:flex; gap:.15rem; }
.star {
  background:none; border:0; cursor:pointer; padding:.15rem; line-height:1;
  font-size:1.6rem; color:var(--line2); font-family:inherit;
}
.star.on { color:#e8a21a; }
.star:disabled { cursor:not-allowed; }
.rate-sum { font-size:.88rem; color:var(--ink2); }
.rate-sum b { color:var(--ink); }

/* ───────────────────────────────────────────────── comments */
.cmt-form textarea {
  width:100%; min-height:6.5rem; padding:.85rem .95rem; font:1rem/1.6 var(--sans);
  border:1px solid var(--line2); border-radius:10px; background:var(--paper);
  color:var(--ink); resize:vertical;
}
.cmt-form .row { display:flex; justify-content:space-between; align-items:center;
  gap:.8rem; margin-top:.65rem; flex-wrap:wrap; }
.cmt-count { font-size:.8rem; color:var(--ink3); }

.cmt-list { list-style:none; margin:1.6rem 0 0; padding:0; }
.cmt { padding:1.1rem 0; border-top:1px solid var(--line); }
.cmt-head { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.45rem; }
.cmt-who { font-weight:700; font-size:.95rem; }
.cmt-when { font-size:.8rem; color:var(--ink3); }
.cmt-body { font-size:1rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.cmt-acts { margin-top:.5rem; display:flex; gap:.9rem; }
.cmt-acts button {
  background:none; border:0; padding:0; cursor:pointer; font:600 .82rem/1 var(--sans);
  color:var(--brand); font-family:inherit;
}
.cmt-replies { list-style:none; margin:.9rem 0 0 0; padding:0 0 0 1.1rem;
  border-left:2px solid var(--line); }
.cmt-replies .cmt { border-top:0; padding:.8rem 0 0; }
.badge-held {
  font:700 .68rem/1 var(--sans); text-transform:uppercase; letter-spacing:.05em;
  background:var(--no-bg); color:var(--no); border:1px solid var(--no-line);
  border-radius:4px; padding:.22rem .4rem;
}
.badge-mod {
  font:700 .68rem/1 var(--sans); text-transform:uppercase; letter-spacing:.05em;
  background:var(--brand-bg); color:var(--brand-ink); border-radius:4px; padding:.22rem .4rem;
}
.signin-nudge {
  background:var(--bg); border:1px dashed var(--line2); border-radius:11px;
  padding:1.2rem; text-align:center; font-size:.95rem; color:var(--ink2);
}

/* ──────────────────────────────── ask a question + share by email
   Both widgets shipped with markup but no base rules, so their labels and
   inputs fell back to inline flow: label text sat beside its own field, the
   textareas rendered at default cols, and the footer row had no layout. Only
   a responsive override existed, which had nothing to override. */

/* ──────────────────────────────── two ways in
   Most people arrive with a ballot in front of them and minutes rather than an
   evening, so the cheat sheet leads and the full read sits beside it as the
   equal alternative — not as a link buried under the list. */
.ways {
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  margin-bottom:3rem;
}
.way {
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:1.4rem; box-shadow:var(--shadow);
}
.way:hover { border-color:var(--brand); }
.way-lead { border-color:var(--brand); border-width:2px; background:var(--brand-bg); }
.way-tag {
  font:800 .7rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:.5rem;
}
.way-lead .way-tag { color:var(--brand-ink); }
.way h2 { font:700 1.35rem/1.2 var(--serif); margin-bottom:.5rem; }
.way p { margin:0 0 1rem; font-size:.93rem; color:var(--ink2); flex:1 1 auto; }
.way-go { font:700 .9rem/1 var(--sans); color:var(--brand); }
.way-lead .way-go { color:var(--brand-ink); }

/* The per-measure cheat sheet reads as a labelled thing, not a grey fold. */
.cs-fold { border-color:var(--brand); background:var(--brand-bg); }
.cs-fold > summary { padding:.9rem 1.1rem; }
.cs-badge {
  font:800 .68rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  background:var(--brand); color:var(--brand-on); border-radius:5px;
  padding:.32rem .5rem; white-space:nowrap;
}
.cs-sum-text { font:700 .98rem/1.3 var(--sans); color:var(--ink); }
.cs-fold > summary::before { color:var(--brand-ink); }

.foot-cheat { color:var(--brand); font-weight:600; }

/* ──────────────────────────────── topic index
   "Start from what you care about" — grouped by subject rather than by ballot
   order, so a subject split across several measures is visible. */
.topic-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.topic-card {
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.topic-card h3 {
  font:700 1rem/1.3 var(--sans); margin-bottom:.3rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.topic-count {
  font:600 .7rem/1 var(--sans); color:var(--brand-ink); background:var(--brand-bg);
  border-radius:999px; padding:.22rem .5rem; white-space:nowrap;
}
.topic-blurb { margin:0 0 .7rem; font-size:.84rem; color:var(--ink2); }
.topic-measures { list-style:none; margin:0; padding:0; }
.topic-measures li + li { border-top:1px solid var(--line); }
.topic-measures a {
  display:flex; gap:.6rem; align-items:baseline; padding:.5rem 0;
  text-decoration:none; color:inherit;
}
.topic-measures a:hover .topic-one { color:var(--brand); text-decoration:underline; }
.topic-code {
  flex:0 0 auto; min-width:2.7rem; text-align:center;
  font:700 .72rem/1 var(--mono); background:var(--bg); color:var(--ink2);
  border:1px solid var(--line2); border-radius:5px; padding:.28rem .3rem;
}
.topic-one { font-size:.85rem; color:var(--ink2); }

/* ──────────────────────────────── cheat sheet
   The short version, built to be printed and taken to the table with a ballot.
   Same content as the full explanation, just the top layer of it. */
.cs-head .cs-actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem; }
.cs-list { display:grid; gap:1.1rem; margin-bottom:2.5rem; }
.cs-item {
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:1.2rem; box-shadow:var(--shadow);
}
.cs-top { display:flex; gap:.85rem; align-items:flex-start; flex-wrap:wrap;
  padding-bottom:.85rem; border-bottom:1px solid var(--line); margin-bottom:.9rem; }
.cs-code {
  flex:0 0 auto; font:700 .95rem/1 var(--mono); background:var(--brand);
  color:var(--brand-on); border-radius:7px; padding:.5rem .5rem; min-width:2.9rem;
  text-align:center;
}
.cs-headtext { flex:1 1 14rem; min-width:0; }
.cs-headtext h2 { font:700 1.08rem/1.3 var(--serif); margin-bottom:.25rem; }
.cs-one { margin:0; font-size:.93rem; color:var(--ink2); }
.cs-tags { display:flex; gap:.35rem; flex-wrap:wrap; }

.cs-votes { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:.9rem; }
.cs-vote { border:1px solid; border-radius:9px; padding:.7rem .8rem; }
.cs-vote .tag { display:block; font:800 .72rem/1 var(--sans); letter-spacing:.1em; margin-bottom:.35rem; }
.cs-vote p { margin:0; font-size:.88rem; }
.cs-vote.yes { background:var(--yes-bg); border-color:var(--yes-line); }
.cs-vote.yes .tag { color:var(--yes); }
.cs-vote.no { background:var(--no-bg); border-color:var(--no-line); }
.cs-vote.no .tag { color:var(--no); }

.cs-args { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cs-arg h3 { font:800 .72rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.4rem; }
.cs-arg.for h3 { color:var(--yes); }
.cs-arg.against h3 { color:var(--no); }
.cs-arg p { margin:0; font-size:.88rem; color:var(--ink2); }

.cs-catch { margin:.9rem 0 0; font-size:.88rem; background:var(--no-bg);
  border:1px solid var(--no-line); border-radius:9px; padding:.7rem .85rem; }
.cs-foot { display:flex; gap:.4rem 1.2rem; flex-wrap:wrap; margin-top:.9rem;
  padding-top:.8rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink2); }
.cs-source { margin:0 0 2rem; }
.cs-fold { margin-bottom:2.2rem; }

/* ──────────────────────────────── time to read
   A reader deciding whether to start wants the cost up front. Quiet by
   default — it is orientation, not a headline. */
.readtime { white-space:nowrap; }
.chip-read { background:var(--bg); border-color:var(--line2); color:var(--ink2); }

/* The ask box sits straight after the question list. Nothing separated them —
   `details.fold + details.fold` only spaces the questions from each other, and
   the form is neither a details nor a sibling it matches — so the card butted
   right up against the last answer. */
.ask-form { margin-top:1.75rem; }

/* The footer row (character count on the left, buttons on the right) is the
   same pattern the comment form already uses. */
.ask-form .row, .share-panel .row {
  display:flex; justify-content:space-between; align-items:center;
  gap:.8rem; margin-top:.75rem; flex-wrap:wrap;
}
.ask-form .row > span:last-child,
.share-panel .row > span:last-child { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Shared field styling for both widgets. */
.ask-form textarea, .ask-form input,
.share-grid input, .share-grid textarea {
  width:100%; padding:.75rem .9rem; font:1rem/1.5 var(--sans);
  border:1px solid var(--line2); border-radius:10px;
  background:var(--paper); color:var(--ink);
}
.ask-form textarea, .share-grid textarea { min-height:5.5rem; resize:vertical; }

.ask-row { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.7rem; }

/* Share */
.share { margin:0; }
.share-btn { display:inline-flex; align-items:center; gap:.5rem; }
.share-btn svg { flex:0 0 auto; }
.share-panel { margin-top:.8rem; max-width:34rem; }
.share-panel[hidden] { display:none; }
.share-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.share-grid label {
  display:block; font:600 .85rem/1.4 var(--sans); color:var(--ink2);
}
.share-grid label > input, .share-grid label > textarea { margin-top:.3rem; }
.share-grid .span2 { grid-column:1 / -1; }

/* ───────────────────────────────────────────────── forms */
.form-row { margin-bottom:1.15rem; }
.form-row label { display:block; font:600 .9rem/1.4 var(--sans); margin-bottom:.4rem; }
.form-row .hint { font-size:.82rem; color:var(--ink3); margin-top:.3rem; }
.form-row input, .form-row textarea, .form-row select {
  width:100%; padding:.8rem .9rem; font:1rem/1.5 var(--sans);
  border:1px solid var(--line2); border-radius:10px;
  background:var(--paper); color:var(--ink);
}
.form-row textarea { min-height:8rem; resize:vertical; }
.form-err {
  background:var(--red-bg); color:var(--red); border:1px solid var(--red);
  border-radius:10px; padding:.85rem 1rem; font-size:.92rem; margin-bottom:1.3rem;
}
.form-ok {
  background:var(--yes-bg); color:var(--yes); border:1px solid var(--yes-line);
  border-radius:10px; padding:.85rem 1rem; font-size:.92rem; margin-bottom:1.3rem;
}
.check { display:flex; gap:.6rem; align-items:flex-start; }
.check input { width:auto; margin-top:.25rem; }
.auth-wrap { max-width:27rem; margin:3rem auto; }
.auth-wrap h1 { font:700 1.9rem/1.15 var(--serif); margin-bottom:.6rem; }
.auth-alt { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--ink2); }

/* ───────────────────────────────────────────────── footer */
.site-foot {
  margin-top:4rem; border-top:1px solid var(--line); background:var(--paper);
  padding:2.5rem 0 3.5rem; font-size:.9rem; color:var(--ink2);
}
.foot-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
.site-foot h2 { font:700 .8rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:.8rem; }
.site-foot ul { list-style:none; margin:0; padding:0; }
.site-foot li { margin:.45rem 0; }
.site-foot a { color:var(--ink2); text-decoration:none; }
.site-foot a:hover { color:var(--brand); text-decoration:underline; }
.foot-note { margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--ink3); }

/* ───────────────────────────────────────────────── toast */
#toast {
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(2rem);
  background:var(--ink); color:var(--bg); padding:.85rem 1.2rem; border-radius:10px;
  font:600 .92rem/1.3 var(--sans); box-shadow:var(--shadow); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:calc(100vw - 2rem); text-align:center;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ───────────────────────────────────────────────── responsive */
@media (max-width:760px) {
  body { font-size:17px; }
  .votes, .sides, .money, .cmp, .prevnext { grid-template-columns:1fr; }
  .card { padding:1.15rem; border-radius:12px; }
  .plain { font-size:1.14rem; }
  .issue-link { flex-wrap:wrap; }
  .issue-side { align-items:flex-start; min-width:0; flex-direction:row; gap:.9rem; }
  .hero { padding:2.2rem 0 1.6rem; }
  .bio-photo { width:7rem; }
  .ask-row, .share-grid { grid-template-columns:1fr; }
  .bio-photo.mono { font-size:2.6rem; }
}

@media print {
  .site-head, .site-foot, .cmt-form, .ask-form, .share, .rate, .prevnext, .walk, #toast,
  .no-print { display:none; }
  details.fold { border:0; } details.fold > summary { display:none; }
  details.fold .fold-body { padding:0; }
  body { background:#fff; font-size:11pt; }
  .card { box-shadow:none; border-color:#ccc; break-inside:avoid; }

  /* The cheat sheet is the one page people actually print. Keep each measure
     whole on a sheet and drop the tinted panels, which cost a lot of ink and
     read worse than a rule in black and white. */
  .cs-item { break-inside:avoid; box-shadow:none; border-color:#999; padding:.6rem 0;
    border-width:0 0 1px 0; border-radius:0; }
  .cs-list { gap:.5rem; }
  .cs-code { background:none; color:#000; border:1px solid #666; padding:.25rem .35rem; }
  .cs-vote, .cs-catch { background:none; border-color:#999; }
  .cs-head { padding-bottom:.5rem; }
  a[href]::after { content:""; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}