.vote-hero {
    background: var(--feature-bg);
    color: var(--feature-fg);
    padding: var(--sp-10) 0 var(--sp-8);
  }
  .vote-hero h1 { color: var(--feature-fg); }
  .vote-hero .meta { color: rgba(255,255,255,0.75); }

  /* ---------- Vote results card ---------- */
  .vote-results-card {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
  }
  .vote-results-top {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-6);
    align-items: center;
  }
  @media (max-width: 720px) { .vote-results-top { grid-template-columns: 1fr; } }

  .vote-chart-box {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
  }
  .vote-chart-box canvas {
    width: 100% !important;
    height: 100% !important;
  }
  .vote-chart-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
  }
  .vote-chart-center .result {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .vote-chart-center .tally {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 6px;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
  }
  .vote-chart-center .margin {
    font-size: var(--fs-xs);
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
    font-weight: 600;
  }
  .vote-chart-center .result.passed { color: var(--success); }
  .vote-chart-center .result.failed { color: var(--danger); }

  /* Stat strip alongside the donut */
  .vote-stats { display: flex; flex-direction: column; gap: var(--sp-3); }
  .vote-stat-row { display: flex; align-items: center; gap: var(--sp-3); }
  .vote-stat-label {
    flex: 0 0 110px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    font-weight: 700;
  }
  .vote-stat-bar {
    flex: 1;
    height: 22px;
    background: var(--ink-100);
    border-radius: var(--r-full);
    overflow: hidden;
    display: flex;
    position: relative;
  }
  .vote-stat-bar > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    color: var(--always-white);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    transition: width var(--t-slow) var(--ease);
  }
  .vote-stat-bar .seg-yea { background: #16A34A; }
  .vote-stat-bar .seg-nay { background: #DC2626; }
  .vote-stat-bar .seg-other { background: #9CA3AF; color: #fff; }
  .vote-stat-bar .seg-yea:only-child,
  .vote-stat-bar .seg-nay:only-child { border-radius: var(--r-full); }

  /* Margin bar (yes vs no with threshold line) */
  .vote-margin-bar {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px dashed var(--ink-200);
  }
  /* The track holds the threshold marker and its label, which sit above
     the bar, so it must not clip (it did, and the 'Majority threshold' label
     never showed). The segments clip inside .vote-margin-bar-fill instead;
     the top margin leaves the label room. */
  .vote-margin-bar-track {
    height: 36px;
    margin-top: 18px;
    background: var(--ink-100);
    border-radius: var(--r-full);
    position: relative;
  }
  .vote-margin-bar-fill {
    display: flex;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
  }
  .member-subgroup + .member-subgroup { margin-top: var(--sp-4); }
  .member-subgroup-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-600);
  }
  .vote-margin-bar-track .seg-yea {
    background: linear-gradient(90deg, #15803d, #16A34A);
    display: flex; align-items: center; padding-left: var(--sp-3);
    color: white; font-weight: 800; font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .vote-margin-bar-track .seg-nay {
    background: linear-gradient(90deg, #DC2626, #b91c1c);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: var(--sp-3);
    color: white; font-weight: 800; font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .vote-margin-threshold {
    position: absolute;
    top: -6px; bottom: -6px;
    width: 2px;
    background: var(--ink-900);
    z-index: 1;
  }
  .vote-margin-threshold::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px;
    width: 10px; height: 10px;
    background: var(--ink-900);
    border-radius: 50%;
  }
  .vote-margin-threshold-label {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--ink-900);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .vote-margin-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-500);
  }
  .vote-margin-caption strong { color: var(--ink-800); }

  /* Per-party breakdown table (kept but visually subordinate) */
  .vote-party-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px dashed var(--ink-200);
  }
  .vote-party-table th, .vote-party-table td {
    padding: 6px var(--sp-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
  }
  .vote-party-table th:first-child, .vote-party-table td:first-child { text-align: left; }
  .vote-party-table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    font-weight: 700;
  }
  .vote-party-table tbody tr:last-child {
    font-weight: 700;
    border-top: 1px solid var(--ink-200);
  }

  /* Member grid — each tile colored by their position */
  .member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin-top: var(--sp-3);
  }
  .member-chip {
    padding: 6px var(--sp-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--always-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform var(--t-fast) var(--ease);
  }
  .member-chip:hover { transform: translateY(-1px); text-decoration: none; color: var(--always-white); }
  /* White 12px text: each fill clears 4.5:1 (the vivid tokens measured
     3.3 green, 3.2 amber, 2.5 grey). Red --danger already passes (4.8). */
  .member-chip.yea { background: var(--success-strong); }
  .member-chip.nay { background: var(--danger); }
  .member-chip.present { background: var(--warning-strong); }
  .member-chip.not_voting { background: var(--neutral-strong); }
  .member-chip .party {
    background: rgba(255,255,255,0.18);
    border-radius: 3px;
    padding: 0 4px;
    font-size: var(--fs-xs);
    /* Margin so the party pill doesn't read as one word with the surname.
       The audit caught this as 'AderholtR' instead of 'Aderholt (R)'. */
    margin-left: 4px;
  }

  /* Read-more reveal for long vote questions/descriptions */
  details.readmore { margin: 0 0 var(--sp-2); }
  details.readmore summary {
    list-style: none;
    cursor: pointer;
    display: block;
  }
  details.readmore summary::-webkit-details-marker,
  details.readmore summary::marker { display: none; }
  details.readmore .readmore-clip { color: rgba(255,255,255,0.85); }
  details.readmore .readmore-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--civic-amber);
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-top: var(--sp-1);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  details.readmore .readmore-toggle i { transition: transform var(--t-fast) var(--ease); }
  details.readmore[open] .readmore-toggle i { transform: rotate(180deg); }
  details.readmore .readmore-toggle .hide { display: none; }
  details.readmore[open] .readmore-toggle .show { display: none; }
  details.readmore[open] .readmore-toggle .hide { display: inline; }
  details.readmore[open] > summary .readmore-clip { display: none; }
  details.readmore[open] > summary .readmore-toggle { margin-top: 0; }

  /* Member filter bar (filters all member-grids on the page in-place) */
  .member-filter {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
  }
  .member-filter input {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--ink-300);
    border-radius: var(--r-md);
    padding: 8px var(--sp-3);
    font-size: var(--fs-sm);
    background: var(--paper);
    color: var(--ink-900);
  }
  .member-filter input:focus {
    outline: none;
    border-color: var(--civic-blue);
    box-shadow: var(--shadow-glow-blue);
  }
  .member-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  /* Canonical filter-chip spec — matches .chip / .list-chip (4px 12px,
     weight 700). Keep these three in sync. */
  .mf-chip {
    border: 1px solid var(--ink-300);
    background: var(--paper);
    color: var(--ink-700);
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
  }
  .mf-chip:hover { background: var(--ink-100); }
  .mf-chip.active { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
  .mf-chip-d.active { background: var(--party-D-strong); border-color: var(--party-D-strong); color: #fff; }
  .mf-chip-r.active { background: var(--party-R-strong); border-color: var(--party-R-strong); color: #fff; }
  .mf-chip-i.active { background: var(--party-I-strong); border-color: var(--party-I-strong); color: #fff; }
  .member-filter-count {
    color: var(--ink-500);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
  }
  .member-chip.is-hidden { display: none !important; }
  .member-empty {
    color: var(--ink-500);
    font-size: var(--fs-sm);
    font-style: italic;
    padding: var(--sp-3);
    text-align: center;
  }

  /* Crossed-the-aisle groups — one per party with majority context */
  .maverick-group {
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
  }
  .maverick-group:last-child { margin-bottom: 0; }
  .maverick-group[data-party="D"] { border-left: 3px solid var(--party-D-strong); }
  .maverick-group[data-party="R"] { border-left: 3px solid var(--party-R-strong); }
  .maverick-group[data-party="I"] { border-left: 3px solid var(--party-I-strong); }
  .maverick-group-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--ink-200);
    font-size: var(--fs-sm);
  }
  .maverick-group-summary { color: var(--ink-700); }
  .maverick-group-summary strong { font-weight: 700; }
  .position-yea { color: var(--success); }
  .position-nay { color: var(--danger); }

  .maverick-list li {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--ink-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
  }
  .maverick-list li:last-child { border-bottom: 0; }

  /* Right-side cluster: the Yea/Nay chip + a "share how they voted" button
     that opens the per-member vote card (the shareable "who voted"). */
  .maverick-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
  }
  .member-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--r-md);
    border: 1px solid var(--ink-200);
    color: var(--ink-500);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    /* Now the icon-only trigger of a share popover (a <button>). */
    padding: 0;
    cursor: pointer;
  }
  /* The per-member share popovers open inside this card; .card clips its
     content (overflow: hidden), which cut the popover off at the card's
     bottom edge. Round the header itself instead. */
  .vote-mavericks-card { overflow: visible; }
  .vote-mavericks-card > .card-header { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .member-share:hover,
  .member-share:focus-visible {
    color: var(--civic-blue);
    border-color: var(--civic-blue);
    background: var(--ink-100);
  }

  /* ---- Vote hero typography (dark hero, light text) ----------------- */
  .vote-hero .vote-hero-eyebrow { color: rgba(255, 255, 255, 0.55); }
  .vote-hero .vote-hero-title { margin: var(--sp-1) 0; }
  .vote-hero .vote-hero-q,
  .vote-hero .vote-hero-q-clip {
    font-size: var(--fs-md);
    margin: 0;
  }
  .vote-hero .vote-hero-q-clip { margin: 0; }
  .vote-hero .vote-hero-q-full {
    font-size: var(--fs-md);
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-2);
  }
  .vote-hero .vote-hero-q-short {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-2);
  }
  .vote-hero .vote-hero-desc,
  .vote-hero .vote-hero-desc-clip,
  .vote-hero .vote-hero-desc-full {
    color: rgba(255, 255, 255, 0.7);
  }
  .vote-hero .vote-hero-desc-clip { margin: 0; }
  .vote-hero .vote-hero-desc-full { margin-top: var(--sp-2); }
  .vote-hero .vote-hero-pill-row {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
  }
  .vote-hero .btn-on-dark {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--always-white);
  }

  /* ---- Vote tally inner-bar labels + center marker ------------------ */
  .vote-bar-threshold-50 { left: 50%; }
  .vote-bar-label {
    font-size: 0.7rem;
    opacity: 0.85;
  }
  .vote-bar-label--left { margin-right: 6px; }
  .vote-bar-label--right { margin-left: 6px; }

  /* ---- Spacing utilities used by vote_detail ------------------------ */
  .vote-detail-section-intro {
    margin: 0 0 var(--sp-3);
  }
  .vote-detail-party-pill {
    margin-left: var(--sp-2);
  }
  .vote-detail-nay-pill {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger-strong);
  }

  /* Dark-mode tuning: --danger on its translucent wash dims to ~3:1
     against the dark card surface; lift to coral so it stays readable. */
  [data-theme="dark"] .vote-detail-nay-pill { color: #F87171; }

  /* P2-2: Clerk vote-description discrepancy note. Quiet, factual —
     amber info tint, not an error red, because the text above IS
     correct (it's the Clerk's verbatim record); the note just explains
     the number mismatch. */
  .vote-clerk-note {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--civic-amber-soft, rgba(212, 175, 55, 0.1));
    border-left: 3px solid var(--civic-amber);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-700);
    line-height: 1.5;
  }
  .vote-clerk-note i { color: var(--civic-amber); margin-right: 4px; }
  .vote-clerk-note a { color: var(--civic-blue); font-weight: 600; }