/* Extracted from state/_detail/index.html <style> block 2. Keep page-specific rules here until componentized. */
/* ---------- THEME (matches home + widgets) ---------- */
    :root {
      --solid-d:#0076BA; --likely-d:#00A2FF; --lean-d:#56C1FF;
      --toss-up:#929292; --lean-r:#FF968D; --likely-r:#FF644E; --solid-r:#EE220C;
      --flip-gold:#F6CE46;
      --projection-green:#64C466;

      --bg-page:#f3f4f6;
      --bg-card:#ffffff;
      --bg-card-subtle:#f5f5f7;
      --border-subtle:#d4d4d8;

      --text-main:#111827;
      --text-muted:#6b7280;
      --text-strong:#000;

      --radius-card:24px;
      --radius-pill:999px;

      --shadow-soft:0 18px 40px rgba(15,23,42,0.10);
      --shadow-subtle:0 1px 3px rgba(15,23,42,0.15);

      --gap-sm:0.5rem;
      --gap-md:1rem;
    }

    @media (prefers-color-scheme: dark){
      :root{
        --bg-page:#020617;
        --bg-card:#020617;
        --bg-card-subtle:#020617;
        --border-subtle:#1f2937;

        --text-main:#e5e7eb;
        --text-muted:#9ca3af;
        --text-strong:#f9fafb;

        --shadow-soft:0 18px 40px rgba(0,0,0,0.90);
        --shadow-subtle:0 1px 3px rgba(0,0,0,0.60);
      }
    }

    /* Safety: prevent accidental horizontal scrolling */
    html, body { overflow-x: hidden; }
    html { scroll-padding-top: calc(var(--header-offset, 0px) + 12px); }

    /* ---------- LAYOUT ---------- */
    body{
      margin:0;
      background:var(--bg-page);
      color:var(--text-main);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      padding-top: var(--header-offset, 0px); /* keep header from covering content */
    }

    .container{
      max-width:1150px;
      margin:auto;
      padding:1.2rem;
    }

    .page-head{
      margin: 0.25rem 0 1.2rem;
      display:flex;
      flex-direction:column;
      gap:0.35rem;
      align-items:center;
      text-align:center;
    }

    .cm-label{
      font-size:0.8rem;
      text-transform:uppercase;
      letter-spacing:0.12em;
      font-weight:600;
      color:var(--text-muted);
    }

    .cm-h1{
      font-size: clamp(1.8rem, 2.6vw, 2.6rem);
      font-weight:800;
      letter-spacing:-0.03em;
      color:var(--text-strong);
      margin:0;
    }

    .sub{
      font-size:0.95rem;
      color:var(--text-muted);
      margin:0.1rem 0 0;
      line-height:1.35;
    }

    /* ---------- STATE HERO (Outline + Title) ---------- */
    .state-hero{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:0.35rem;
    }

    .state-outline-wrap{
      width:min(460px, 82vw);
      height: clamp(120px, 18vw, 200px);
      aspect-ratio: 2.25 / 1;
      display:flex;
      align-items:center;
      justify-content:center;
      color: var(--text-strong);
      margin-top: 0.15rem;
      margin-bottom: 0.15rem;
    }

    .state-outline-wrap svg{
      display:block;
      width:100%;
      height:100%;
      overflow:visible;
    }

    .state-outline-path{
      fill:none;
      stroke: currentColor;
      stroke-width:2.25;
      stroke-linecap:round;
      stroke-linejoin:round;
      filter: drop-shadow(0 10px 22px rgba(15,23,42,0.16));
      opacity:0.95;
    }

    /* "Draw-in" animation */
    .state-outline-path.draw-in{
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 1.75s cubic-bezier(.2,.8,.2,1);
    }

    .state-prefix{
      font-size:0.82rem;
      text-transform:uppercase;
      letter-spacing:0.16em;
      font-weight:700;
      color:var(--text-muted);
      margin-top: 0.2rem;
    }

    .state-name{
      font-size: clamp(2.05rem, 4.1vw, 3.15rem);
      font-weight:900;
      letter-spacing:-0.03em;
      color:var(--text-strong);
      margin:0;
      line-height:1.05;
    }

    .state-subtitle{
      max-width: 58ch;
      margin-top: 0.1rem;
    }



    
    /* ---------- PAGE ACTIONS (Back + Toggle + Voting) ---------- */
    .page-actions{
      width:100%;
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:center;
      gap:0.55rem;
      margin-top:0.65rem;
    }
    .page-actions #backBtn{ justify-self:start; }
    .page-actions-center{
      justify-self:center;
      display:flex;
      justify-content:center;
    }
    .page-actions #votingBtn{ justify-self:end; margin-left:0; }

    /* On small screens put segmented pills on their own row */
    @media (max-width: 520px){
      .page-actions{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:0.55rem;
        flex-wrap:wrap;
      }
      .page-actions-center{
        flex:1 1 100%;
        display:flex;
        justify-content:center;
        order:3;
      }
      #votingBtn{ margin-left:0; }
    }

    .back-btn{
      appearance:none;
      border:1px solid var(--border-subtle);
      background:var(--bg-card);
      color:var(--text-strong);
      padding:0.45rem 0.85rem;
      border-radius:var(--radius-pill);
      font-size:0.85rem;
      font-weight:750;
      letter-spacing:-0.01em;
      box-shadow:var(--shadow-subtle);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:0.45rem;
      transition: transform 120ms ease;
    }

    .back-btn:hover{ transform: translateY(-1px); }
    .back-btn:active{ transform: translateY(0px); }
    .back-btn:focus-visible{
      outline: 3px solid rgba(0, 162, 255, 0.35);
      outline-offset: 3px;
    }

    /* ---------- SEGMENTED OFFICE TOGGLE ---------- */
    .segmented{
      box-sizing:border-box;
      display:inline-flex;
      padding:4px;
      border-radius: 999px;
      border:1px solid var(--border-subtle);
      background: rgba(148,163,184,0.12);
      box-shadow: var(--shadow-subtle);
      gap:4px;
      flex-wrap:nowrap;
      max-width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling: touch;
    }
    .seg-btn{
      border:0;
      background: transparent;
      color: var(--text-muted);
      font-weight: 900;
      font-size: 0.82rem;
      padding: 0.45rem 0.85rem;
      border-radius:999px;
      cursor:pointer;
      transition: 0.18s ease;
      letter-spacing: -0.01em;
      white-space:nowrap;
    }
    .seg-btn:hover{ color: var(--text-strong); }
    .seg-btn.active{
      color: var(--text-strong);
      background: rgba(255,255,255,0.70);
    }
    .seg-btn:disabled{
      opacity:0.55;
      cursor:not-allowed;
    }
    .seg-btn:focus-visible{
      outline: 3px solid rgba(0, 162, 255, 0.35);
      outline-offset: 3px;
    }
@media (prefers-color-scheme: dark){
      .seg-btn.active{ background: rgba(255,255,255,0.10); }
    }

    
    /* Mobile segmented layout: 3 pills on row 1, 2 pills on row 2 */
    @media (max-width: 520px){
      .segmented{
        width:100%;
        max-width: min(560px, calc(100vw - 24px));
        box-sizing:border-box;

        /* Two-row layout: first row = 3 pills, second row = 2 pills */
        display:grid;
        grid-template-columns: repeat(6, 1fr);
        gap:6px;

        /* Keep the active highlight clipped inside the outer pill */
        overflow:hidden;

        /* Give a little more inset so the active pill never touches the border */
        padding:6px;
      }

      .segmented .seg-btn{
        box-sizing:border-box;
        width: calc(100% - 18px);
        max-width:100%;
        justify-self:center;
        min-width:0;

        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;

        /* Slightly tighter so the highlight stays well inside the bar */
        padding: 0.26rem 0.50rem;
        font-size: 0.80rem;
        min-height: 32px;
        line-height: 1.1;

        /* Default: keep labels on one line (no ellipsis) */
        white-space:nowrap;
        overflow:hidden;
        text-overflow:clip;
      }

      /* Row 1: 3 across */
      .segmented .seg-btn[data-office="president"],
      .segmented .seg-btn[data-office="senate"],
      .segmented .seg-btn[data-office="house"]{
        grid-column: span 2;
      }

      /* Row 2: 2 across */
      .segmented .seg-btn[data-office="governor"],
      .segmented .seg-btn[data-office="legislature"]{
        grid-column: span 3;
      }

      /* Let “State Legislature” wrap to two lines instead of truncating */
      .segmented .seg-btn[data-office="legislature"]{
        white-space:normal;
        line-height:1.05;
      }
    }

@media (max-width: 360px){
      .segmented{ max-width: calc(100vw - 20px); }
      .segmented .seg-btn{
        font-size: 0.76rem;
        padding: 0.42rem 0.48rem;
      }
    }
/* Office view sections */
    .office-view{ display:none; }
    .office-view.active{ display:grid; }

    

@media (prefers-color-scheme: dark){
      .state-outline-path{
        filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
        opacity:0.9;
      }
    }

    /* ---------- STATE HERO (Outline + Title) ---------- */
    .state-hero{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:0.35rem;
    }

    .state-outline-wrap{
      width:min(460px, 82vw);
      height: clamp(120px, 18vw, 200px);
      aspect-ratio: 2.25 / 1;
      display:flex;
      align-items:center;
      justify-content:center;
      color: var(--text-muted);
      margin-top: 0.15rem;
      margin-bottom: 0.15rem;
    }

    .state-outline-wrap svg{
      display:block;
      width:100%;
      height:100%;
      overflow:visible;
    }

    .state-outline-path{
      fill:none;
      stroke: currentColor;
      stroke-width:2.25;
      stroke-linecap:round;
      stroke-linejoin:round;
      filter: drop-shadow(0 10px 22px rgba(15,23,42,0.16));
      opacity:0.95;
    }

    /* "Draw-in" animation */
    .state-outline-path.draw-in{
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 1.75s cubic-bezier(.2,.8,.2,1);
    }

    .state-prefix{
      font-size:0.82rem;
      text-transform:uppercase;
      letter-spacing:0.16em;
      font-weight:700;
      color:var(--text-muted);
      margin-top: 0.2rem;
    }

    .state-name{
      font-size: clamp(2.05rem, 4.1vw, 3.15rem);
      font-weight:900;
      letter-spacing:-0.03em;
      color:var(--text-strong);
      margin:0;
      line-height:1.05;
    }

    .state-subtitle{
      max-width: 58ch;
      margin-top: 0.1rem;
    }

    @media (prefers-color-scheme: dark){
      .state-outline-path{
        filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
        opacity:0.9;
      }
    }

    .state-grid{
      display:grid;
      gap:2rem;
      grid-template-columns: repeat(12, 1fr);
      margin-top: 1rem;
    }

    @media (max-width: 980px){
      .state-grid{
        grid-template-columns: 1fr;
        gap:1.2rem;
      }
    }

    
    /* ---------- OFFICE VIEWS (hide non-active sections) ---------- */
    .state-grid.office-view{ display:none; }
    .state-grid.office-view.active{ display:grid; }

/* ---------- CARDS (same as site) ---------- */
    .cm-card{
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      border-radius:var(--radius-card);
      padding:1.2rem 1.4rem;
      box-shadow:var(--shadow-soft);
    }

    .span6{ grid-column: span 6; }
    .span12{ grid-column: span 12; }
    @media (max-width: 980px){
      .span6, .span12{ grid-column: auto; }
      .cm-card{ padding: 1.05rem 1.05rem; }
    }

    .card-title-row{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:0.75rem;
      flex-wrap:wrap;
      margin-bottom:0.75rem;
    }

    .card-h2{
      margin:0;
      font-size:1.25rem;
      font-weight:800;
      letter-spacing:-0.02em;
      color:var(--text-strong);
    }

    .badge{
      font-size:0.8rem;
      color:var(--text-muted);
      font-weight:600;
    }

    /* ---------- RACE BLOCK ---------- */
    .race{
      background:var(--bg-card-subtle);
      border:1px solid var(--border-subtle);
      border-radius:18px;
      box-shadow:var(--shadow-subtle);
      padding:0.85rem 0.95rem;
      display:flex;
      flex-direction:column;
      gap:0.5rem;
    }

    .race-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:0.5rem;
      flex-wrap:wrap;
    }

    .race-name{
      font-weight:800;
      font-size:1rem;
      letter-spacing:-0.01em;
      color:var(--text-strong);
      display:flex;
      gap:0.4rem;
      align-items:center;
      flex-wrap:wrap;
    }

    /* Rating pill (matches your widgets) */
    .rating-pill{
      padding:0.2rem 0.6rem;
      border-radius:var(--radius-pill);
      font-size:0.75rem;
      font-weight:700;
      white-space:nowrap;
      border:1px solid transparent;
      box-shadow:var(--shadow-subtle);
      color:#fff;
    }


    .rating-row{
      display:flex;
      align-items:center;
      gap:0.35rem;
      flex-wrap:wrap;
    }
    .solid-D  { background: var(--solid-d); }
    .likely-D { background: var(--likely-d); }
    .lean-D   { background: var(--lean-d); }
    .solid-R  { background: var(--solid-r); }
    .likely-R { background: var(--likely-r); }
    .lean-R   { background: var(--lean-r); }
    .toss-up  { background: var(--toss-up); }


    .notup-D, .notup-R{
      position:relative;
      box-shadow: inset 0 0 0 2px var(--toss-up);
    }
    .notup-D{ background: var(--solid-d); }
    .notup-R{ background: var(--solid-r); }

    .rating-none{
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border-subtle);
    }

    /* Incumbent pill */
    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0.15rem 0.55rem;
      border-radius:var(--radius-pill);
      font-size:0.75rem;
      font-weight:700;
      white-space:nowrap;
      box-shadow:var(--shadow-subtle);
      color:#fff;
    }
    .inc-D-pill{ background:var(--solid-d); }
    .inc-R-pill{ background:var(--solid-r); }
    .inc-O-pill{ background:var(--toss-up); }

    /* Probability row (matches your widgets) */
    .prob-row{
      display:flex;
      align-items:center;
      gap:0.4rem;
      flex-wrap:wrap;
      margin:0.05rem 0 0.15rem;
    }
    .prob-label{
      font-size:0.75rem;
      font-weight:600;
    }
    .prob-label-d{ color:var(--solid-d); }
    .prob-label-r{ color:var(--solid-r); margin-left:auto; }
    .prob-label-t{ color:var(--toss-up); }


    .prob-bar-wrapper{
  flex:1 1 140px;
  display:flex;
  align-items:center;
}

.prob-bar-wrapper-3{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.28rem;
}
.prob-bar-wrapper-3 .prob-bar{ width:100%; }

.prob-i-under:empty{ display:none; }
.prob-bar{
  position:relative;
  width:100%;
  height:0.6rem;
  border-radius:var(--radius-pill);
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
}
.prob-bar-d,
.prob-bar-t,
.prob-bar-r{
  height:100%;
  display:block;
}
/* Default (2-part) win-prob bars: D on left, R on right */
.prob-bar-d{ background:var(--solid-d); float:left; }
.prob-bar-r{ background:var(--solid-r); float:right; }
/* If a tie segment is used in a normal prob-bar, keep it between by floating left */
.prob-bar-t{ background:var(--toss-up); float:left; }

/* Optional 3-way win-prob bars: Independent segment uses Toss-Up gray */
.prob-bar-i{ background:var(--toss-up); float:left; }

.prob-i-under{
  width:100%;
  text-align:center;
  font-size:0.78rem;
  color:var(--text-muted);
  margin-top:0.2rem;
}

/* Majority-odds bar (state legislature): use flex to prevent float wrapping when tie is present */
.prob-row-leg .prob-bar{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}
.prob-row-leg .prob-bar > span{
  float:none !important;
  flex:0 0 auto; /* widths come from inline % */
}/* State legislature majority odds: tie label under bar, centered */
.prob-row-leg .prob-bar-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.28rem;
}
.prob-row-leg .prob-bar{ width:100%; }
.prob-tie-under{
  font-size:0.75rem;
  font-weight:650;
  color:var(--toss-up);
  text-align:center;
  line-height:1.1;
  white-space:nowrap;
}
.prob-tie-under:empty{ display:none; }


    /* ---------- STATE LEGISLATURE (mini seat-count widget) ---------- */
    .leg-wrap{ margin-top:0.55rem; display:flex; flex-direction:column; gap:0.75rem; }

    /* ---- Model Drivers ---- */
    .model-drivers{
      margin-top:1.1rem;
      padding-top:1rem;
      border-top:1px solid var(--border-subtle);
    }
    .model-drivers-label{
      font-size:0.695rem;
      text-transform:uppercase;
      letter-spacing:0.13em;
      font-weight:700;
      color:var(--text-muted);
      margin-bottom:0.6rem;
    }
    .model-drivers-pills{
      display:flex;
      flex-wrap:wrap;
      gap:0.45rem;
      align-items:center;
    }
    .driver-pill{
      display:inline-flex;
      align-items:center;
      gap:0.3rem;
      padding:0.3rem 0.78rem;
      border-radius:999px;
      font-size:0.76rem;
      font-weight:600;
      letter-spacing:0.01em;
      white-space:nowrap;
      border:1.5px solid;
      line-height:1.4;
      transition:opacity 0.15s;
    }
    .driver-pill-history{
      background:rgba(161,98,7,0.08);
      border-color:rgba(161,98,7,0.30);
      color:#92650a;
    }
    .driver-pill-national{
      background:rgba(13,148,136,0.08);
      border-color:rgba(13,148,136,0.30);
      color:#0f766e;
    }
    .driver-pill-local{
      background:rgba(99,60,180,0.08);
      border-color:rgba(99,60,180,0.30);
      color:#5b3fb0;
    }
    @media (prefers-color-scheme:dark){
      .driver-pill-history{ background:rgba(251,191,36,0.12); border-color:rgba(251,191,36,0.35); color:#fcd34d; }
      .driver-pill-national{ background:rgba(45,212,191,0.10); border-color:rgba(45,212,191,0.30); color:#2dd4bf; }
      .driver-pill-local{ background:rgba(167,139,250,0.12); border-color:rgba(167,139,250,0.35); color:#a78bfa; }
    }
    .model-drivers-no-polling{
      margin-top:0.55rem;
      font-size:0.8rem;
      color:var(--text-muted);
      font-style:italic;
      line-height:1.4;
    }
    .leg-note{ margin-top:0.55rem; }
    .leg-chamber{
      border:1px solid var(--border-subtle);
      border-radius:18px;
      padding:0.75rem 0.85rem;
      background:var(--bg-card);
      box-shadow:var(--shadow-subtle);
    }
    @media (prefers-color-scheme: dark){
      .leg-chamber{ background:var(--bg-card); }
    }
    .leg-chamber-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:0.6rem;
      flex-wrap:wrap;
      margin-bottom:0.55rem;
    }
    .leg-chamber-title{
      font-weight:850;
      letter-spacing:-0.01em;
      color:var(--text-strong);
    }
    .leg-rating-row{
      display:flex;
      flex-wrap:wrap;
      gap:0.35rem;
      margin:-0.15rem 0 0.55rem;
    }
    .leg-total{
      font-size:0.8rem;
      color:var(--text-muted);
      white-space:nowrap;
    }
    
    .leg-seat-labels{
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:0.55rem;
      font-size:0.82rem;
      color:var(--text-muted);
      margin:0 0 0.35rem 0;
    }
    .leg-seat-label{ flex:1; min-width:110px; white-space:nowrap; }
    .leg-seat-label-d{ text-align:left; color:var(--solid-d); }
    .leg-seat-label-t{ text-align:center; }
    .leg-seat-label-r{ text-align:right; color:var(--solid-r); }

    .leg-seat-track{
      position:relative;
      width:100%;
      height:0.85rem;
      border-radius:var(--radius-pill);
      overflow:hidden;
      background:var(--bg-card);
      border:1px solid var(--border-subtle);
      margin-bottom:0.55rem;
    }
    
    .leg-seat-marker{
      position:absolute;
      top:0;
      bottom:0;
      transform:translateX(-50%);
      pointer-events:none;
    }
    .leg-seat-marker-label{
      font-size:0.75rem;
      font-weight:800;
      line-height:1;
      text-shadow:0 1px 2px rgba(255,255,255,.8);
    }
    .leg-seat-marker-line{
      width:3px;
      height:100%;
      background:var(--flip-gold);
      border-radius:0;
      margin-top:0;
    }
    @media (prefers-color-scheme: dark){
      .leg-seat-marker-label{ text-shadow:0 1px 2px rgba(0,0,0,.8); }
    }
.leg-seat-seg{ height:100%; float:left; display:block; }
    /* Not Up / No Election segments: round ends like senate-seats */
    .leg-seat-seg.seg-notup-d{ border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
    .leg-seat-seg.seg-notup-r{ border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }

    /* Not Up / No Election legend pills: match Senate widget outline */
    .leg-legend .pill.notup-D,
    .leg-legend .pill.notup-R{
      border: 2px solid var(--toss-up);
      box-shadow: var(--shadow-subtle);
    }
.leg-legend{ display:flex; flex-wrap:wrap; gap:0.35rem; justify-content:center; }
    .leg-pill{ font-size:0.72rem; padding:0.12rem 0.45rem; }
    .leg-divider{ height:1px; background:var(--border-subtle); margin:0.65rem 0; opacity:0.8; }


    .note{
      background:var(--bg-card-subtle);
      border:1px dashed var(--border-subtle);
      border-radius:18px;
      padding:0.85rem 0.95rem;
      color:var(--text-muted);
      line-height:1.4;
    }

    /* ---------- "INCUMBENT" ROW (Governor / Senator) ---------- */
    .person-slot{ margin-top: 0.65rem; margin-bottom: 0.75rem; }
    .person-row{
      display:flex;
      align-items:center;
      gap:0.75rem;
      padding-top:0.75rem;
      margin-top:0.55rem;
      border-top:1px solid var(--border-subtle);
    }
    .person-photo{
      width:64px;
      height:64px;
      border-radius:16px;
      object-fit:cover;
      object-position: var(--portrait-x, 50%) var(--portrait-y, 22%);
      border:1px solid var(--border-subtle);
      background:var(--bg-card);
      flex: 0 0 auto;
      display:block;
    }
    .person-photo.is-logo,
    .person-photo.portrait-logo{
      object-fit:contain;
      object-position:center;
      padding:7px;
      box-sizing:border-box;
      background:var(--bg-card);
    }
    .person-photo.portrait-landscape{ --portrait-y: 28%; }
    .person-photo.portrait-tall{ --portrait-y: 16%; }
    .person-photo.portrait-square{ --portrait-y: 22%; }
    

    /* ---------- CANDIDATES (two-up) ---------- */
    .cand-wrap{
      border:1px solid var(--border-subtle);
      border-radius:18px;
      padding:0.65rem 0.75rem;
      background:var(--bg-card);
    }
    .cand-tile .person-row{
      margin-top:0;
      padding-top:0;
      border-top:none;
    }
.person-meta{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:0.1rem;
    }
    .person-name{
      font-weight:850;
      letter-spacing:-0.01em;
      color:var(--text-strong);
      line-height:1.15;
      display:flex;
      align-items:center;
      gap:0.5rem;
      flex-wrap:wrap;
    }
    .person-sub{
      font-size:0.85rem;
      color:var(--text-muted);
      line-height:1.25;
    }
    .person-cred{
      font-size:0.75rem;
      color:var(--text-muted);
      margin-top:0.2rem;
      line-height:1.25;
    }
    .person-cred a{ color: inherit; }

    /* ---------- HOUSE DISTRICT CARDS (mobile-friendly; replaces tables) ---------- */
    .district-intro{
      font-size: 0.85rem;
      color: var(--text-muted);
      margin: 0 0 0.65rem;
    }

    .district-grid{
      display: grid;
      gap: 0.75rem;
      grid-template-columns: repeat(12, 1fr);
    }

    /* anchor so each district is clickable */
    .district-card{
      grid-column: span 6;
      background: var(--bg-card);
      border-radius: 18px;
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-subtle);
      padding: 0.75rem 0.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      min-width: 0;
      text-decoration: none;
      color: inherit;
      transition: transform 120ms ease;
    }
    .district-body{
      border-top:1px solid var(--border-subtle);
      padding-top:0.65rem;
      margin-top:0.25rem;
    }
    /* On colored (called) cards, use a lighter divider for contrast */
    .district-card.called-d .district-body,
    .district-card.called-r .district-body,
    .district-card.called-o .district-body{
      border-top-color: rgba(255,255,255,0.25);
    }
    .district-body .person-slot{ margin-top:0; margin-bottom:0; }
    .district-body .person-row{ border-top:0; padding-top:0; margin-top:0; }

    .district-card:hover{ transform: translateY(-1px); }

    .district-card:focus-visible{
      outline: 3px solid rgba(0, 162, 255, 0.35);
      outline-offset: 3px;
    }

    @media (max-width: 640px){
      .district-card{ grid-column: span 12; }
      .district-card{ padding: 0.65rem 0.75rem; }
      .prob-label-r{ margin-left: 0; }
      .race{ padding:0.75rem 0.8rem; }
    }

    .district-header{
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-wrap: wrap;
      min-width: 0;
    }

    .district-name{
      font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: -0.01em;
      color: var(--text-strong);
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .district-title-stack{
      display:flex;
      flex-direction:column;
      gap:0.12rem;
      min-width:0;
      flex:1 1 auto;
    }
    .district-incumbent{
      font-size: 0.82rem;
      font-weight: 650;
      line-height: 1.15;
      color: var(--text-muted);
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .district-incumbent-none{
      opacity: 0.95;
    }

    /* House district header layout (district name + rating on one line; incumbent + pill on next) */
    .district-header-house{ width:100%; justify-content:flex-start; align-items:flex-start; }
    .district-topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:0.5rem;
      flex-wrap:wrap;
      min-width:0;
    }
    .district-top-pills{
      display:flex;
      align-items:center;
      gap:0.35rem;
      flex-wrap:wrap;
      margin-left:auto;
    }
    .district-bottomline{
      display:flex;
      align-items:center;
      gap:0.35rem;
      flex-wrap:wrap;
      min-width:0;
    }
    .district-bottomline .district-incumbent{ display:inline; }

    .district-meta{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      flex-wrap: wrap;
      min-width: 0;
    }

    /* ---- Projected (not-up) cards: match live “projected win” look ---- */
.projected-list{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  margin-top:0.6rem;
}

.district-card.called-d{
  background: var(--solid-d);
  border-color: rgba(255,255,255,0.25);
}
.district-card.called-r{
  background: var(--solid-r);
  border-color: rgba(255,255,255,0.25);
}
.district-card.called-o{
  background: var(--toss-up);
  border-color: rgba(255,255,255,0.25);
}
.district-card.called-o .district-name{
  color:#fff;
}
/* Incumbent pills on called toss-up cards: invert to keep contrast */
.district-card.called-o .inc-O-pill{
  background:#ffffff;
  color: var(--toss-up);
  border: 1px solid #ffffff;
}
.district-card.called-d .district-name,
.district-card.called-r .district-name{
  color:#fff;
}

/* Incumbent pills on called cards: invert to keep contrast */
.district-card.called-d .inc-D-pill{
  background:#ffffff;
  color: var(--solid-d);
}
.district-card.called-r .inc-R-pill{
  background:#ffffff;
  color: var(--solid-r);
}

/* Header left/right helpers (for projected cards) */
.district-header{ justify-content: space-between; }
.district-header-left,
.district-header-right{
  display:flex;
  align-items:center;
  gap:0.35rem;
  flex-wrap:wrap;
  min-width:0;
}
.district-header-right{ margin-left:auto; }

/* “Not up” badge on colored cards */
.notup-badge{
  background: rgba(255,255,255,0.18);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.35);
  font-weight: 850;
}

/* Winner pill (called / projected races) */
.winner-pill{
  background:#ffffff;
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.65rem 0.18rem 0.4rem;
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  font-size:0.75rem;
  font-weight:800;
  box-shadow: var(--shadow-subtle);
}
.winner-pill-d .winner-text{ color: var(--solid-d); }
.winner-pill-r .winner-text{ color: var(--solid-r); }

.winner-pill-tossup .winner-text{ color: var(--toss-up); }
.winner-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius: 999px;
  border: 2px solid var(--projection-green);
  color: var(--projection-green);
  font-size:11px;
  line-height:1;
}

/* Sources list */
    .sources{
      margin:0;
      padding-left: 1.1rem;
      color: var(--text-muted);
      line-height: 1.45;
    }
    .sources a{ color: inherit; }
  
    /* ---- Odds history chart (inline) ---- */
    .chart-wrap{
  overflow: visible;
      position: relative;
      width: 100%;
      border-radius: 18px;
      border: 1px solid var(--border-subtle);
      background: var(--bg-card-subtle);
      box-shadow: var(--shadow-subtle);
      overflow:visible;
      margin-top: 0.75rem;
    }
    .chart-inner{ padding: 0.85rem 0.95rem 0.75rem; }
    .chart-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:0.65rem;
      flex-wrap:wrap;
      margin-bottom:0.65rem;
    }
    .chart-sub{
      margin:0;
      color:var(--text-muted);
      font-size:0.88rem;
      line-height:1.3;
    }
    .chart-controls{ display:flex; gap:0.4rem; flex-wrap:wrap; }
    .range-btn{
      appearance:none;
      border:1px solid var(--border-subtle);
      background:var(--bg-card);
      color:var(--text-strong);
      padding:0.32rem 0.6rem;
      border-radius:999px;
      font-size:0.78rem;
      font-weight:750;
      letter-spacing:-0.01em;
      box-shadow:var(--shadow-subtle);
      cursor:pointer;
      transition: transform 120ms ease, opacity 120ms ease;
    }
    .range-btn:hover{ transform: translateY(-1px); }
    .range-btn:active{ transform: translateY(0px); }
    .range-btn[aria-pressed="true"]{
      border-color: rgba(0, 162, 255, 0.45);
      outline: 3px solid rgba(0, 162, 255, 0.18);
      outline-offset: 2px;
    }
    .chart-canvas{ width:100%; height: 240px; display:block; }
    @media (max-width: 520px){
      .chart-canvas{ height: 210px; }
      .chart-inner{ padding: 0.8rem 0.85rem 0.7rem; }
    }
    .chart-legend{
      display:flex;
      gap:0.75rem;
      flex-wrap:wrap;
      align-items:center;
      margin-top:0.55rem;
    }
    .legend-item{
      display:flex;
      align-items:center;
      gap:0.45rem;
      font-size:0.82rem;
      color:var(--text-muted);
      font-weight:650;
    }
    .legend-swatch{
      width:14px;
      height:10px;
      border-radius:999px;
      box-shadow:var(--shadow-subtle);
    }
    .legend-d{ background: var(--solid-d); }
    .legend-r{ background: var(--solid-r); }
    .legend-i{ background: var(--toss-up); }

    .chart-tooltip{
      position:absolute;
      pointer-events:none;
      z-index:6;
      min-width: 200px;
      max-width: 260px;
      padding:0.55rem 0.65rem;
      border-radius:14px;
      border:1px solid var(--border-subtle);
      background: rgba(255,255,255,0.92);
      color: #111827;
      box-shadow: var(--shadow-soft);
      transform: translate(-50%, -115%);
      opacity:0;
      transition: opacity 120ms ease;
    }
    @media (prefers-color-scheme: dark){
      .chart-tooltip{
        background: rgba(2,6,23,0.86);
        color: #e5e7eb;
      }
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
      .chart-tooltip{
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
    }
    .tip-date{
      font-weight:850;
      font-size:0.86rem;
      letter-spacing:-0.01em;
      margin:0 0 0.25rem;
    }
    .tip-row{
      display:flex;
      justify-content:space-between;
      gap:0.75rem;
      font-size:0.84rem;
      font-weight:700;
      margin:0.12rem 0;
    }
    .tip-d{ color: var(--solid-d); }
    .tip-r{ color: var(--solid-r); }
    .tip-i{ color: var(--toss-up); }
    .chart-empty{
      padding:0.75rem 0.1rem 0.35rem;
      color:var(--text-muted);
      font-size:0.9rem;
      line-height:1.35;
    }

  
    /* Section titles inside a card (to match district pages) */
    .section-title{
      margin: 0.6rem 0 0.45rem;
      font-weight: 850;
      font-size: 0.98rem;
      letter-spacing: -0.01em;
      color: var(--text-strong);
    }
    .section-title.tight{ margin-top: 0.15rem; }
    
  /* “Flip” / pivotal pill (black text) */
.pill-flip{
  background: var(--flip-gold, #F5C542);
  color:#000;
}



/* ---------- PREMIUM STATE OUTLINE ANIMATION (draw effect, consistent across all states) ---------- */
/*
  Goals:
  - Keep the "draw" effect you liked.
  - Avoid the classic dashed-stroke problem where multi-part states (islands) "teleport" between subpaths.
  - Look premium: subtle glow + soft fill + tiny pop.
  Implementation notes:
  - JS splits the generated SVG path into subpaths and draws the largest landmass first.
  - Smaller islands draw as "finishing touches" (quick + overlapping) so it feels consistent everywhere.
*/

#stateOutlineSvg{ overflow: visible; }

#stateOutlineGroup{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
}

/* Fill comes in softly behind the stroke */
.state-outline-fill{
  fill: url(#cm-outline-fill);
  opacity: 0;
}

/* Glow + stroke paths (created dynamically per subpath) */
.state-outline-glow-path{
  fill: none;
  stroke: url(#cm-outline-stroke);
  stroke-width: 7.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#cm-outline-glow);
  opacity: 0;
}

.state-outline-stroke-path{
  fill: none;
  stroke: url(#cm-outline-stroke);
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* Subtle "premium pop" on each state change */
#stateOutlineSvg.outline-animate #stateOutlineGroup{
  animation: cmOutlinePop 820ms cubic-bezier(.2,.9,.2,1) both;
}
#stateOutlineSvg.outline-animate .state-outline-fill{
  animation: cmOutlineFill 900ms ease 520ms forwards;
}

@keyframes cmOutlinePop{
  from{ opacity: 0; transform: translateY(2px) scale(0.985); }
  55%{ opacity: 1; }
  to{ opacity: 1; transform: translateY(0px) scale(1); }
}
@keyframes cmOutlineFill{
  from{ opacity: 0; }
  to{ opacity: 0.14; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #stateOutlineSvg.outline-animate #stateOutlineGroup,
  #stateOutlineSvg.outline-animate .state-outline-fill{
    animation: none !important;
  }
  .state-outline-glow-path{ opacity: 0.20; }
  .state-outline-stroke-path{ opacity: 0.95; }
  .state-outline-fill{ opacity: 0.12; }
}


.district-card.called-d .person-sub, .district-card.called-r .person-sub, .district-card.called-o .person-sub{ color:#fff; }
.district-card.called-d .person-name, .district-card.called-r .person-name, .district-card.called-o .person-name{ color:#fff; }
.district-card.called-d .person-cred, .district-card.called-r .person-cred, .district-card.called-o .person-cred{ color:#fff; }


/* Legend override for No Election pills: match track border */
.leg-legend .notup-D, .leg-legend .notup-R{ box-shadow: var(--shadow-subtle); }