.leg-hero {
    position: relative;
    background: #0B1220;  /* default dark — fallback for unknown party */
    color: #FFFFFF;
    padding: var(--sp-12) 0 var(--sp-10);
    overflow: hidden;
  }
  /* Solid party-themed backgrounds with a diagonal gradient for depth */
  .leg-hero[data-party="D"] {
    background: linear-gradient(135deg, var(--party-D-strong) 0%, #1e3a8a 60%, #172554 100%);
  }
  .leg-hero[data-party="R"] {
    background: linear-gradient(135deg, var(--party-R-strong) 0%, #991b1b 60%, #7f1d1d 100%);
  }
  .leg-hero[data-party="I"] {
    background: linear-gradient(135deg, var(--party-I-strong) 0%, #5b21b6 60%, #4c1d95 100%);
  }
  /* Subtle radial accent on top so it's not a flat slab */
  .leg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.12), transparent 55%);
    pointer-events: none;
  }
  .leg-hero-inner { position: relative; z-index: 1; }
  .leg-hero img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.3);
    box-shadow: var(--shadow-lg);
  }
  .leg-hero .placeholder {
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
  }
  .leg-hero h1, .leg-hero .text-meta { color: #FFFFFF !important; }
  .leg-hero .meta { color: rgba(255,255,255,0.85); }
  /* The party badge in the hero — solid-color backgrounds mean a colored pill
     would vanish. Use a high-contrast white/translucent pill instead so the
     label still reads cleanly on top of the party-colored background. */
  .leg-hero .party-badge {
    background: rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,0.4);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
  }
  /* Stat tiles riding on the colored hero — translucent so the party color shows through */
  .leg-hero .stat-tile {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: var(--always-white) !important;
    backdrop-filter: blur(4px);
  }
  /* 0.9, not 0.75: 12px captions on the red hero tiles measured 4.2:1;
     at 0.9 they are about 5.4:1 (blue and purple heroes are darker). */
  .leg-hero .stat-tile .stat-label,
  .leg-hero .stat-tile .stat-meta { color: rgba(255,255,255,0.9) !important; }
  .leg-hero .stat-tile .stat-value { color: var(--always-white) !important; }
  /* Hero action buttons — make them readable on solid color backgrounds */
  .leg-hero .btn { color: #FFFFFF; }
  .leg-hero .btn-warning {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #FFFFFF;
  }
  .leg-hero .btn-warning:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.55);
    color: #FFFFFF;
  }

/* ---------- Leadership pills (Speaker, Majority Leader, etc.) ---------- */
.leadership-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
.leadership-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: linear-gradient(135deg, #F59E0B 0%, #DC2626 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.leadership-pill i { font-size: 0.9em; }

/* ---- Legislator hero layout + dark-mode text -------------------------- */
.legislator-hero-main { min-width: 240px; }
.legislator-hero-eyebrow { color: rgba(255, 255, 255, 0.55); }
.legislator-hero-title { margin: var(--sp-1) 0; }
.legislator-hero-meta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}
.legislator-hero-state { font-size: var(--fs-md); }
/* 'Official website' on the party gradient: gold measured 3.1-4.2:1 and the
   dark theme's link blue 3.7-4.7:1 there. White with an underline clears
   5.2:1 on the lightest point of every party gradient, in both themes, and
   matches the hero buttons. The memorial hero is a light surface, so it
   keeps the ordinary link colour. */
.leg-hero:not(.leg-hero--memorial) a.leg-hero-website,
[data-theme="dark"] .leg-hero:not(.leg-hero--memorial) a.leg-hero-website {
  color: var(--always-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.leg-hero:not(.leg-hero--memorial) a.leg-hero-website:hover,
[data-theme="dark"] .leg-hero:not(.leg-hero--memorial) a.leg-hero-website:hover {
  color: var(--always-white);
  text-decoration-thickness: 2px;
}
/* Phone vote rows: question, bill and result stacked under the date. */
.leg-vote-stack {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.4;
}
.leg-vote-stack .pill { margin-top: 4px; }
.leg-vote-stack code { white-space: nowrap; }

/* ---- Stats grid spacing ---------------------------------------------- */
.legislator-stats-grid { margin-top: var(--sp-8); }
.legislator-stat-value-lg {
  font-size: var(--fs-lg);
  margin-top: var(--sp-3);
}

/* ---- Section banded background (used for highlighted strip) ----------- */
.section--banded {
  background: var(--ink-50);
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}

/* ---- Office card line spacing ---------------------------------------- */
.office-line { margin: 0 0 var(--sp-1); }
.office-line:last-child { margin-bottom: 0; }
.office-line--last { margin: 0; }

/* ---- Voting nay pill ------------------------------------------------- */
.legislator-vote-nay-pill {
  background: rgba(220, 38, 38, 0.12);
  color: var(--danger-strong);
}

/* ---- General footnote text ------------------------------------------- */
.legislator-meta-footnote {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
}

/* Dark-mode tuning: --danger (#DC2626) on its translucent wash is too
   dim against the dark card surface; lift the foreground to coral. */
[data-theme="dark"] .legislator-vote-nay-pill { color: #F87171; }

/* ---- In Memoriam treatment for deceased members ---------------------- */
/* The .leg-hero--memorial modifier class was already on the section but
   its actual styling was inlined as a fallback. Promoted here so dark
   mode + future tweaks live in one place. */
.leg-hero--memorial {
  background: var(--ink-50);
  border-top: 3px solid var(--ink-400);
}
[data-theme="dark"] .leg-hero--memorial {
  background: var(--ink-100);
  border-top-color: var(--ink-500);
}
.leg-hero--memorial img {
  filter: grayscale(0.45);
}
.legislator-hero-eyebrow--memorial {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.leg-memorial-years {
  font-style: italic;
  margin-top: 4px;
  color: var(--ink-600);
}
.leg-memorial-note {
  margin-top: var(--sp-3);
  font-style: italic;
}

/* ---- Demographic-flags chip row (under the hero, above the meta) ---- */
.demographic-flags {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.demographic-flags .demo-pill {
  text-decoration: none;
  font-size: var(--fs-xs);
}

/* ---- Final-actions card row (deceased profiles) -------------------- */
.final-action-tile  { height: 100%; }
.final-action-stamp { margin-top: 4px; }
.final-action-body  { margin-top: 6px; }
.final-action-pos-pill { text-transform: capitalize; }

/* ---- Committee assignments flex list ------------------------------- */
.committee-flex-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* LD-203 lobbyist political-contribution section */
.lc-subhead {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-2);
}
.lc-filers li { padding: 6px 0; border-bottom: 1px solid var(--ink-100); }
.lc-note { margin-top: var(--sp-3); max-width: 72ch; }
.lc-more { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- 'On this page' jump row (2026-09 UX review) -------------------
   Sticks under the site header. --leg-nav-top is the header's measured
   height, set by legislator_detail_ui.js; the fallbacks are the header's
   height at each breakpoint (64px + 1px border from 992px up, the brand
   row plus the wrapped search row below). The row is always one line and
   scrolls sideways inside itself if it ever outgrows a narrow screen. */
:root { --leg-nav-top: calc(var(--nav-h) + 1px); }
@media (max-width: 991.98px) {
  :root { --leg-nav-top: 108px; }
}
.leg-section-nav {
  position: sticky;
  top: var(--leg-nav-top);
  z-index: 90;              /* under the navbar (100) and its drawer */
  background: var(--paper);
  border-bottom: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
}
.leg-section-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
}
.leg-section-nav-label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.leg-section-nav-list {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: var(--sp-1) 2px;   /* room for the focus ring inside the scroller */
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.leg-section-nav-list::-webkit-scrollbar { display: none; }
.leg-section-nav-list li { flex: 0 0 auto; }
.leg-section-nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}
.leg-section-nav-list a:hover { background: var(--ink-100); color: var(--ink-900); }
.leg-section-nav-list a:focus-visible { outline-offset: -2px; }
.leg-section-nav-list a[aria-current="true"] {
  background: var(--ink-100);
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--civic-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
@media (max-width: 575.98px) {
  /* Five links fit at 390px only without the label; the nav's
     aria-label still names the row for screen readers. */
  .leg-section-nav-label { display: none; }
  .leg-section-nav-list { margin: 0 calc(-1 * var(--sp-2)); }
  .leg-section-nav-list a { padding: 0 var(--sp-2); }
}
@media (max-width: 389.98px) {
  /* 360px phones: 6px sides fit all five links (328px in a 344px row). */
  .leg-section-nav-list a { padding: 0 6px; }
}
/* Narrower still (320px) the row scrolls sideways with its scrollbar
   hidden; legislator_detail_ui.js marks which edge has more links past
   it and that edge fades out, so a clipped 'Contact' reads as more to
   scroll to rather than cut off. */
.leg-section-nav-list.is-clipped-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.leg-section-nav-list.is-clipped-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}
.leg-section-nav-list.is-clipped-start.is-clipped-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* A jumped-to section lands below the header and the jump row (48px). */
.leg-jump-target { scroll-margin-top: calc(var(--leg-nav-top) + 48px + var(--sp-4)); }

/* Votes and bill lists open at ten rows; the button shows the rest.
   Same pattern as the bill page's timeline expander. */
.leg-collapsible:not(.is-expanded) .leg-row-extra { display: none; }
.leg-show-all {
  display: block;
  width: 100%;
  border-top: 1px solid var(--ink-100);
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  /* The ghost-button teal is 3.7:1 on white; the hover teal and the dark
     theme's link blue clear 4.5:1. */
  color: var(--civic-blue-hover);
}
[data-theme="dark"] .leg-show-all { color: var(--link-dark); }
.leg-show-all:hover,
[data-theme="dark"] .leg-show-all:hover { background: var(--ink-100); color: var(--ink-900); }
.leg-collapsible--flat .leg-show-all { border-radius: 0; border-bottom: 1px solid var(--ink-100); }
.leg-show-all .fa { transition: transform var(--t-fast); }
/* The icon subset has no chevron-up; turn the down chevron over. */
.leg-show-all[aria-expanded="true"] .fa { transform: rotate(180deg); }
.leg-bill-cards { display: flex; flex-direction: column; gap: var(--sp-6); }