/* ── Reset & Base ──────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 108px; }
    body {
      background-color: #0a0f1e;
      font-family: 'Barlow', sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* ── Focus ring for keyboard accessibility ─────────────── */
    :focus-visible { outline: 2px solid rgba(192,21,42,0.7); outline-offset: 2px; border-radius: 4px; }
    /* ── Selection color ───────────────────────────────────── */
    ::selection { background: rgba(192,21,42,0.35); color: #fff; }
    ::-moz-selection { background: rgba(192,21,42,0.35); color: #fff; }
    /* ── Smooth image rendering ────────────────────────────── */
    img { image-rendering: -webkit-optimize-contrast; color: transparent; }
    img[src=""], img:not([src]) { display: none !important; }
    img[src=""] + .pm-card-photo-placeholder { display: flex !important; }

    /* ── Stars background ──────────────────────────────── */
    .stars-bg {
      background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 45%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 20% 35%, rgba(255,255,255,0.18) 0%, transparent 100%),
        radial-gradient(2px 2px at 80% 40%, rgba(255,255,255,0.18) 0%, transparent 100%);
    }

    /* ── Scanline overlay ──────────────────────────────── */
    .scanline {
      background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 4px
      );
    }

    /* ── Nav blur ──────────────────────────────────────── */
    .nav-blur {
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
    }

    /* ── Typography fluid sizes ────────────────────────── */
    .hero-title   { font-size: clamp(3rem, 18vw, 9rem); }
    .section-title{ font-size: clamp(2rem,  10vw, 3.5rem); }

    /* ── Gradient animated text ────────────────────────── */
    .gradient-text {
      background: linear-gradient(90deg, #fff 0%, #f5c842 30%, #c0152a 60%, #fff 100%);
      background-size: 300% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 4s linear infinite;
    }

    /* ── Card holographic effect ───────────────────────── */
    .card-holo {
      position: relative;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.35s ease;
    }
    .card-holo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        transparent 20%, rgba(255,255,255,0.05) 40%,
        rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 60%,
        transparent 80%
      );
      background-size: 200% 200%;
      opacity: 0;
      transition: opacity 0.35s;
      z-index: 2;
      pointer-events: none;
      border-radius: inherit;
    }
    @media (hover: hover) {
      .card-holo:hover::before { opacity: 1; animation: shimmer 1.5s linear infinite; }
      .card-holo:hover {
        transform: translateY(-7px) scale(1.012);
        box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 32px rgba(192,21,42,0.16);
      }
      .rarity-gold:hover  { box-shadow: 0 0 0 2px #f5c842, 0 20px 55px rgba(0,0,0,0.5), 0 0 40px rgba(245,200,66,0.2); }
      .rarity-silver:hover{ box-shadow: 0 0 0 2px #9fb4d4, 0 20px 55px rgba(0,0,0,0.5), 0 0 30px rgba(159,180,212,0.15); }
      .rarity-red:hover   { box-shadow: 0 0 0 2px #c0152a, 0 20px 55px rgba(0,0,0,0.5), 0 0 40px rgba(192,21,42,0.25); }
    }
    .card-holo:active { transform: scale(0.975); transition: transform 0.12s ease; }

    /* ── Rarity glow borders ───────────────────────────── */
    .rarity-gold   { box-shadow: 0 0 0 2px #f5c842,  0 0 22px rgba(245,200,66,0.22); }
    .rarity-silver { box-shadow: 0 0 0 2px #9fb4d4,  0 0 16px rgba(159,180,212,0.13); }
    .rarity-red    { box-shadow: 0 0 0 2px #c0152a,  0 0 22px rgba(192,21,42,0.22); }
    .rarity-blue   { box-shadow: 0 0 0 2px #1e3560,  0 0 16px rgba(30,53,96,0.22); }

    /* ── Progress bar ──────────────────────────────────── */
    .progress-fill { transition: width 1.4s cubic-bezier(0.4,0,0.2,1); }

    /* ── Scroll-triggered fade in ──────────────────────── */
    .animate-on-scroll {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
    /* JS adds visible class - but we default to visible so nothing hides */

    /* ── Button glow (hover-device only) ───────────────── */
    .btn-glow { transition: all 0.22s ease; }
    @media (hover: hover) {
      .btn-glow:hover {
        box-shadow: 0 0 20px rgba(192,21,42,0.6), 0 0 40px rgba(192,21,42,0.16);
        transform: translateY(-1px);
      }
    }
    .btn-glow:active { transform: scale(0.96); }

    /* ── Touch tap targets: only on interactive elements ─ */
    button { min-height: 44px; cursor: pointer; }
    /* Anchors: only when they look like buttons */
    a.btn-tap { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* ── Badge pulse ───────────────────────────────────── */
    .badge-live { animation: pulse2 2s ease-in-out infinite; }

    /* ── Score colors ──────────────────────────────────── */
    .score-high { color: #4ade80; }
    .score-mid  { color: #f5c842; }
    .score-low  { color: #f87171; }
    .score-na   { color: #9fb4d4; }
    .bar-high { background: linear-gradient(90deg, #16a34a, #4ade80); }
    .bar-mid  { background: linear-gradient(90deg, #b45309, #f5c842); }
    .bar-low  { background: linear-gradient(90deg, #991b1b, #f87171); }
    .bar-na   { background: linear-gradient(90deg, #334155, #64748b); }

    /* ── Directory cards ───────────────────────────────── */
    .dir-card { cursor: pointer; }
    @media (hover: hover) { .dir-card:hover .dir-card-name { color: #f0213c; } }
    .dir-card .dir-score-bar { transition: width 0.9s cubic-bezier(0.4,0,0.2,1); }
    .tier-gold   { background: rgba(245,200,66,0.14); color: #f5c842; border: 1px solid rgba(245,200,66,0.28); }
    .tier-silver { background: rgba(159,180,212,0.11); color: #9fb4d4; border: 1px solid rgba(159,180,212,0.23); }
    .tier-red    { background: rgba(192,21,42,0.14);  color: #f87171; border: 1px solid rgba(192,21,42,0.28); }
    .tier-gray   { background: rgba(100,116,139,0.14); color: #94a3b8; border: 1px solid rgba(100,116,139,0.23); }

    /* ── Selects custom arrow ──────────────────────────── */
    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237596c0' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.6rem center;
      background-size: 1rem;
      padding-right: 2rem !important;
    }

    /* ── Filter chip ───────────────────────────────────── */
    .filter-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      background: rgba(192,21,42,0.14); border: 1px solid rgba(192,21,42,0.28);
      color: #f0213c;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.18rem 0.48rem; border-radius: 999px; cursor: pointer;
      transition: background 0.15s;
    }
    .filter-chip:hover { background: rgba(192,21,42,0.25); }

    /* ── Browse toolbar: search & filters (non-sticky) ──────── */
    .browse-toolbar {
      position: relative;
      z-index: 100 !important;
      background: #0d1526 !important; /* solid background */
      border: 2px solid rgba(255,255,255,0.12);
      border-radius: 1.25rem;
      padding: 1rem 1.25rem;
      margin-bottom: 1rem;
      box-shadow: 0 12px 40px rgba(0,0,0,0.55);
      transition: box-shadow 0.3s;
    }
    .browse-toolbar select {
      background-color: #0d1526 !important;
      color: #ffffff !important;
      border-color: rgba(255,255,255,0.2) !important;
      position: relative !important;
      z-index: 101 !important;
    }
    .browse-toolbar select option {
      background-color: #0d1526 !important;
      color: #ffffff !important;
    }
    /* ── All Politicians: search & filter inputs — dark-theme fix ──
       The `navy-950` Tailwind shade is undefined in the config, so the
       search field fell back to a white background with white (invisible)
       text. Force a solid dark background, readable text, visible
       placeholder, and a patriotic focus ring across all of these
       controls regardless of utility-class resolution. */
    #myteam-browse-search,
    #myteam-browse-office,
    #myteam-browse-party,
    #myteam-browse-status,
    #myteam-browse-state,
    #myteam-browse-score,
    #myteam-browse-sort {
      background-color: #0d1526 !important;
      color: #ffffff !important;
      border: 1px solid rgba(255,255,255,0.14) !important;
    }
    #myteam-browse-search::placeholder { color: #7596c0 !important; opacity: 1; }
    #myteam-browse-office option,
    #myteam-browse-party option,
    #myteam-browse-status option,
    #myteam-browse-state option,
    #myteam-browse-score option,
    #myteam-browse-sort option {
      background-color: #0d1526 !important;
      color: #ffffff !important;
    }
    #myteam-browse-search:focus,
    #myteam-browse-office:focus,
    #myteam-browse-party:focus,
    #myteam-browse-status:focus,
    #myteam-browse-state:focus,
    #myteam-browse-score:focus,
    #myteam-browse-sort:focus {
      outline: none !important;
      border-color: rgba(245,158,11,0.6) !important;
      box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important;
    }
    /* New filter selects get the same "active" highlight as the others when set */
    #myteam-browse-party.has-value,
    #myteam-browse-status.has-value,
    #myteam-browse-office.has-value,
    #myteam-browse-state.has-value,
    #myteam-browse-score.has-value {
      border-color: rgba(245,158,11,0.5) !important;
      background-color: rgba(245,200,66,0.07) !important;
    }
    .browse-toolbar.is-stuck {
      box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
      border-color: rgba(245,158,11,0.2);
    }

    /* ── Admin Politician Manager: editor form — dark-theme contrast fix ──
       The editor form on the right is injected dynamically and relies on the
       undefined `navy-950` shade plus utility classes that don't reliably
       resolve for the controls, leaving dark default text on the dark panel
       (only readable when highlighted). Force a solid dark field background,
       white text, a visible placeholder, readable option rows, and a brighter
       label color so every field is legible. Matches the patriotic focus ring
       used elsewhere; layout and behavior are untouched. */
    #pm-editor input,
    #pm-editor textarea,
    #pm-editor select {
      background-color: #0a0f1e !important;
      color: #ffffff !important;
      border-color: rgba(255,255,255,0.14) !important;
    }
    #pm-editor input::placeholder,
    #pm-editor textarea::placeholder {
      color: #7596c0 !important;
      opacity: 1;
    }
    #pm-editor select option {
      background-color: #0d1526 !important;
      color: #ffffff !important;
    }
    #pm-editor label {
      color: #cdd9ec !important;
    }
    #pm-editor input:focus,
    #pm-editor textarea:focus,
    #pm-editor select:focus {
      outline: none !important;
      border-color: rgba(240,33,60,0.7) !important;
      box-shadow: 0 0 0 3px rgba(192,21,42,0.15) !important;
    }

    /* ── Admin Politician Manager: toolbar + Quick Add panel — contrast fix ──
       The toolbar search/filters and the Quick Add / Paste JSON textarea use the
       same undefined `navy-950` shade (and `text-steel-200`, also undefined), so
       fields fell back to dark/transparent backgrounds with hard-to-read text —
       worst of all the large JSON textarea. Force a solid dark field, white text,
       a visible placeholder, readable option rows, and the patriotic focus ring,
       matching the editor-form fix above. Layout and behavior are untouched. */
    #pm-search,
    #pm-filter-status,
    #pm-filter-state,
    #pm-filter-office,
    #pm-filter-party,
    #pm-filter-sort,
    #pm-quick-input {
      background-color: #0a0f1e !important;
      color: #ffffff !important;
      border-color: rgba(255,255,255,0.14) !important;
    }
    #pm-search::placeholder,
    #pm-quick-input::placeholder {
      color: #7596c0 !important;
      opacity: 1;
    }
    #pm-filter-status option,
    #pm-filter-state option,
    #pm-filter-office option,
    #pm-filter-party option,
    #pm-filter-sort option {
      background-color: #0d1526 !important;
      color: #ffffff !important;
    }
    #pm-search:focus,
    #pm-filter-status:focus,
    #pm-filter-state:focus,
    #pm-filter-office:focus,
    #pm-filter-party:focus,
    #pm-filter-sort:focus,
    #pm-quick-input:focus {
      outline: none !important;
      border-color: rgba(240,33,60,0.7) !important;
      box-shadow: 0 0 0 3px rgba(192,21,42,0.15) !important;
    }

    /* ── Sticky Filter Collapsing/Minimizing ─────────────────────────── */
    .browse-toolbar.is-stuck:not(.is-expanded) {
      padding: 0.5rem 1rem !important;
      border-radius: 0.75rem !important;
      margin-bottom: 0.5rem !important;
      background: rgba(13, 21, 38, 0.96) !important;
      border-color: rgba(59, 130, 246, 0.35) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    }
    
    .browse-toolbar.is-stuck:not(.is-expanded) #browse-toolbar-expanded-content {
      display: none !important;
    }
    
    .browse-toolbar.is-stuck:not(.is-expanded) #browse-toolbar-collapsed-content {
      display: flex !important;
    }
    
    .browse-toolbar.is-stuck.is-expanded {
      background: rgba(13, 21, 38, 0.98) !important;
      max-height: 90vh;
      overflow-y: auto;
      border-color: rgba(245, 200, 66, 0.5) !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(245, 200, 66, 0.15) !important;
    }

    .browse-toolbar.is-stuck.is-expanded #browse-toolbar-expanded-content {
      display: block !important;
      margin-top: 0.75rem;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 0.75rem;
    }

    .browse-toolbar.is-stuck.is-expanded #browse-toolbar-collapsed-content {
      display: flex !important;
    }

    /* Toggle button text based on expansion state */
    .browse-toolbar.is-stuck.is-expanded #expand-btn-text::before {
      content: "Hide Filters";
    }
    .browse-toolbar.is-stuck:not(.is-expanded) #expand-btn-text::before {
      content: "Expand Filters";
    }
    .browse-toolbar:not(.is-stuck) #expand-btn-text::before {
      content: "Expand Filters";
    }

    .browse-toolbar.is-stuck.is-expanded #expand-btn-icon::before {
      content: "❌";
    }
    .browse-toolbar.is-stuck:not(.is-expanded) #expand-btn-icon::before {
      content: "⚙️";
    }
    .browse-toolbar:not(.is-stuck) #expand-btn-icon::before {
      content: "⚙️";
    }
    .browse-search-wrap {
      position: relative;
      margin-bottom: 0.75rem;
    }
    .browse-search-wrap svg {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1.25rem;
      height: 1.25rem;
      color: #7596c0;
      pointer-events: none;
    }
    .browse-search-input {
      width: 100%;
      background: rgba(10,15,30,0.85);
      border: 2px solid rgba(255,255,255,0.12);
      border-radius: 1rem;
      padding: 0.9rem 3rem 0.9rem 3rem;
      color: #fff;
      font-family: 'Barlow', sans-serif;
      font-size: 1rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .browse-search-input::placeholder { color: #4e72a0; }
    .browse-search-input:focus {
      outline: none;
      border-color: rgba(245,158,11,0.6);
      box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
    }
    .browse-search-clear {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 2rem;
      height: 2rem;
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: none;
      color: #9fb4d4;
      font-size: 1.1rem;
      cursor: pointer;
      transition: background 0.15s;
    }
    .browse-search-clear:hover { background: rgba(255,255,255,0.15); color: #fff; }
    .browse-search-clear.visible { display: flex; }

    .browse-filters-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }
    @media (max-width: 640px) {
      .browse-filters-row {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .browse-filter-select {
      width: 100%;
      background: rgba(10,15,30,0.85);
      border: 1.5px solid rgba(255,255,255,0.1);
      border-radius: 0.75rem;
      padding: 0.75rem 2.2rem 0.75rem 0.85rem;
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      appearance: none;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s;
      min-height: 48px;
    }
    .browse-filter-select:focus {
      outline: none;
      border-color: rgba(245,158,11,0.5);
      box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
    }
    .browse-filter-select.has-value {
      border-color: rgba(245,158,11,0.4);
      background: rgba(245,158,11,0.06);
    }

    .browse-filter-select-lg {
      font-size: 0.95rem;
      padding: 0.85rem 2.4rem 0.85rem 1rem;
      min-height: 52px;
      border-radius: 0.85rem;
    }

    .browse-scope-toggle {
      display: flex;
      gap: 0;
      border-radius: 1rem;
      overflow: hidden;
      border: 2.5px solid rgba(59,130,246,0.18);
      background: rgba(8,12,30,0.95);
      grid-column: 1 / -1;
      box-shadow: 0 3px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(59,130,246,0.06);
    }
    /* ── Promise Tracker filter toolbar: clean, non-overlapping row ──── */
    .browse-toolbar-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
    }
    .browse-toolbar-inner > .flex-1 {
      flex: 1 1 240px;
      min-width: 0;
    }
    /* Scope toggle buttons (All Databases / Relevant To Me) under the filters */
    .scope-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.5rem 0.95rem;
      min-height: 38px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #7596c0;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.65rem;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .scope-btn:hover {
      color: #9fb4d4;
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.14);
    }
    .scope-btn.active {
      color: #f5c842;
      background: linear-gradient(135deg, rgba(59,130,246,0.22) 0%, rgba(245,200,66,0.14) 100%);
      border-color: rgba(245,200,66,0.4);
      box-shadow: inset 0 0 18px rgba(245,200,66,0.1);
    }

    /* ── National-first state scope row (tabs above the filter toolbar) ──── */
    .browse-state-scope {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      margin-bottom: 0.85rem;
      padding-bottom: 0.85rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .browse-state-scope-label {
      flex: none;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #7596c0;
      white-space: nowrap;
    }
    .browse-state-tabs {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      overflow-x: auto;
      flex: 1 1 auto;
      min-width: 0;
      padding-bottom: 0.2rem;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }
    /* Plain-language scope note under the state tabs. Neutral, quiet, full-width;
       makes "you are viewing All States / just California" unmistakable. */
    .browse-scope-note {
      margin-top: 0.55rem;
      font-family: 'Barlow', 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      line-height: 1.4;
      color: #93a7c7;
      padding: 0.4rem 0.65rem;
      border-left: 3px solid rgba(96, 165, 250, 0.5);
      background: rgba(96, 165, 250, 0.06);
      border-radius: 0.35rem;
    }
    .browse-scope-note b { color: #dce7f7; font-weight: 700; }
    @media (max-width: 640px) { .browse-scope-note { font-size: 0.74rem; } }
    .browse-state-tabs::-webkit-scrollbar { height: 5px; }
    .browse-state-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; }
    .state-tab {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      flex: none;
      padding: 0.42rem 0.8rem;
      min-height: 36px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.76rem;
      letter-spacing: 0.05em;
      color: #9fb4d4;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    }
    .state-tab:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
    .state-tab:active { transform: scale(0.96); }
    .state-tab.is-on {
      color: #0d1526;
      background: linear-gradient(135deg, #f5c842 0%, #fbbf24 100%);
      border-color: rgba(245,200,66,0.75);
      box-shadow: 0 4px 14px rgba(245,200,66,0.22);
    }
    .state-tab-n {
      font-size: 0.62rem;
      font-weight: 800;
      line-height: 1;
      padding: 0.15rem 0.4rem;
      border-radius: 999px;
      background: rgba(0,0,0,0.18);
      color: inherit;
      opacity: 0.85;
    }
    .state-tab:not(.is-on) .state-tab-n { background: rgba(255,255,255,0.08); }
    @media (max-width: 640px) {
      .browse-state-scope {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
      }
      .browse-state-scope-label { font-size: 0.68rem; }
    }

    /* ── Change Location Modal ───────────────────────────────────────── */
    .loc-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(4,8,18,0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 5rem 1rem 2rem;
      overflow-y: auto;
      animation: loc-modal-fade 0.2s ease;
    }
    @keyframes loc-modal-fade { from { opacity: 0; } to { opacity: 1; } }
    .loc-modal-box {
      position: relative;
      width: 100%;
      max-width: 30rem;
      background: linear-gradient(135deg, rgba(13,21,38,0.99) 0%, rgba(17,29,54,0.98) 100%);
      border: 2px solid rgba(245,200,66,0.25);
      border-radius: 1.25rem;
      padding: 1.6rem 1.5rem 1.4rem;
      box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 40px rgba(192,21,42,0.12);
      animation: loc-modal-rise 0.25s ease;
    }
    @keyframes loc-modal-rise { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
    .loc-modal-box::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      border-radius: 1.25rem 1.25rem 0 0;
      background: linear-gradient(90deg,#c0152a 0%,#c0152a 33%,#e9eef7 33%,#e9eef7 66%,#1e3a8a 66%,#1e3a8a 100%);
      opacity: 0.85;
    }
    .loc-modal-close {
      position: absolute;
      top: 0.85rem;
      right: 0.95rem;
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      line-height: 1;
      color: #7596c0;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.6rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .loc-modal-close:hover { color: #fff; background: rgba(192,21,42,0.25); border-color: rgba(192,21,42,0.5); }
    .loc-modal-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; padding-right: 2rem; }
    .loc-modal-icon {
      font-size: 1.6rem; width: 3rem; height: 3rem; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 0.9rem;
      background: linear-gradient(135deg,#c0152a 0%,#1a3a6b 100%);
      border: 2px solid rgba(255,255,255,0.18);
      box-shadow: 0 0 22px rgba(192,21,42,0.35);
    }
    .loc-modal-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.55rem; line-height: 1; letter-spacing: 0.04em; color: #fff;
    }
    .loc-modal-sub {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem; letter-spacing: 0.02em; color: #7596c0; margin-top: 0.25rem; line-height: 1.3;
    }
    .loc-modal-fields { display: flex; flex-direction: column; gap: 1rem; }
    .loc-modal-fields select,
    .loc-modal-fields input { width: 100%; }
    .loc-modal-foot { margin-top: 1.4rem; display: flex; justify-content: flex-end; }
    .loc-modal-done {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #fff;
      background: linear-gradient(135deg,#2563eb,#1d4ed8);
      border: 1px solid rgba(96,165,250,0.5);
      border-radius: 0.75rem;
      padding: 0.7rem 1.6rem;
      min-height: 44px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .loc-modal-done:hover { background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 6px 20px rgba(59,130,246,0.3); }
    @media (max-width: 480px) {
      .loc-modal-overlay { padding-top: 3rem; }
      .loc-modal-box { padding: 1.3rem 1.15rem 1.2rem; }
    }

    .browse-scope-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      padding: 1.05rem 1.5rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #7596c0;
      background: transparent;
      border: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: all 0.25s ease;
      min-height: 58px;
      position: relative;
    }
    .browse-scope-btn:hover {
      background: rgba(255,255,255,0.05);
      color: #9fb4d4;
    }
    .browse-scope-btn:active {
      transform: scale(0.98);
    }
    .browse-scope-btn.active {
      background: linear-gradient(135deg, rgba(59,130,246,0.22) 0%, rgba(245,200,66,0.14) 100%);
      color: #f5c842;
      box-shadow: inset 0 0 28px rgba(245,200,66,0.12);
      text-shadow: 0 0 14px rgba(245,200,66,0.35);
    }
    .browse-scope-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 12%;
      right: 12%;
      height: 3px;
      background: linear-gradient(90deg, transparent, #f5c842, transparent);
      border-radius: 999px;
    }
    .browse-scope-icon {
      font-size: 1.3rem;
    }

    .browse-active-filters {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      min-height: 0;
      transition: min-height 0.2s;
    }
    .browse-active-filters:empty { display: none; }
    .browse-active-filters:not(:empty) { margin-top: 0.5rem; }

    .browse-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(245,158,11,0.12);
      border: 1px solid rgba(245,158,11,0.35);
      color: #fbbf24;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.35rem 0.55rem 0.35rem 0.7rem;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
      min-height: 36px;
      user-select: none;
      -webkit-user-select: none;
    }
    .browse-chip:hover { background: rgba(245,158,11,0.22); }
    .browse-chip:active { transform: scale(0.95); }
    .browse-chip .chip-x {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      font-size: 0.7rem;
      color: #fbbf24;
      line-height: 1;
      flex-shrink: 0;
    }
    .browse-chip:hover .chip-x { background: rgba(255,255,255,0.2); }

    .browse-clear-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      background: rgba(248,113,113,0.08);
      border: 1px solid rgba(248,113,113,0.25);
      color: #f87171;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.35rem 0.75rem;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      min-height: 36px;
    }
    .browse-clear-btn:hover { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.45); }

    /* ── Search autocomplete dropdown ──────────────────────────── */
    .browse-suggest {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 60;
      background: #0c1730;
      border: 1px solid rgba(245,158,11,0.28);
      border-radius: 0.85rem;
      box-shadow: 0 18px 44px rgba(0,0,0,0.55);
      padding: 0.3rem;
      max-height: 340px;
      overflow-y: auto;
    }
    .browse-suggest.open { display: block; }
    .bss-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      border-radius: 0.6rem;
      padding: 0.5rem 0.6rem;
      cursor: pointer;
      transition: background 0.12s;
    }
    .bss-item:hover, .bss-item.active { background: rgba(245,158,11,0.14); }
    .bss-ico { flex: 0 0 1.4rem; font-size: 1.05rem; text-align: center; }
    .bss-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
    .bss-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.92rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bss-label b { color: #fbbf24; font-weight: 800; }
    .bss-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; color: #7596c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bss-kind { flex: 0 0 auto; font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.2); border-radius: 999px; padding: 0.1rem 0.45rem; }
    .bss-head { font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5d7ba6; padding: 0.45rem 0.6rem 0.2rem; }

    /* ── Quick filter chips ────────────────────────────────────── */
    .browse-quickchips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.7rem;
    }
    .browse-quickchips:empty { display: none; }
    .quick-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(30,53,96,0.5);
      border: 1px solid rgba(117,150,192,0.32);
      color: #cbd9ee;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.74rem;
      letter-spacing: 0.04em;
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      min-height: 34px;
      user-select: none;
      -webkit-user-select: none;
    }
    .quick-chip:hover { background: rgba(30,53,96,0.85); border-color: rgba(117,150,192,0.55); color: #fff; }
    .quick-chip:active { transform: scale(0.96); }
    .quick-chip.qc-match { border-color: rgba(94,234,212,0.4); color: #5eead4; }
    .quick-chip.qc-match:hover { background: rgba(13,148,136,0.22); }
    .quick-chip.qc-loc { border-color: rgba(125,211,252,0.4); color: #7dd3fc; }
    .quick-chip.qc-loc:hover { background: rgba(56,189,248,0.18); }
    .quick-chip.qc-acct { border-color: rgba(167,139,250,0.45); color: #c4b5fd; }
    .quick-chip.qc-acct:hover { background: rgba(124,58,237,0.2); }
    .quick-chip.qc-acct.is-on { background: rgba(124,58,237,0.22); border-color: rgba(167,139,250,0.6); color: #d8b4fe; }
    .quick-chip.is-on { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.5); color: #fbbf24; }

    .browse-bottom-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .browse-grid-virtual {
      contain: layout style;
    }

    /* ── Accordion / Expandable Group Sections ─────────── */
    .browse-type-group {
      margin-bottom: 1.15rem;
      border: 1.5px solid rgba(255,255,255,0.1);
      border-radius: 1.15rem;
      overflow: hidden;
      background: rgba(13,21,38,0.7);
      box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.03);
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .browse-type-group.expanded {
      border-color: rgba(59,130,246,0.22);
      box-shadow: 0 6px 28px rgba(0,0,0,0.3), 0 0 14px rgba(59,130,246,0.07);
    }
    .browse-type-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.15rem 1.4rem;
      background: linear-gradient(135deg, rgba(30,53,96,0.5) 0%, rgba(17,29,54,0.88) 50%, rgba(13,21,38,0.92) 100%);
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.25s, box-shadow 0.25s;
      border: none;
      width: 100%;
      text-align: left;
      min-height: 68px;
      gap: 0.8rem;
    }
    .browse-type-header:hover {
      background: linear-gradient(135deg, rgba(30,53,96,0.65) 0%, rgba(17,29,54,0.95) 50%, rgba(13,21,38,0.95) 100%);
    }
    .browse-type-header:active {
      background: linear-gradient(135deg, rgba(30,53,96,0.75) 0%, rgba(13,21,38,0.98) 100%);
    }
    .browse-type-title {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      flex: 1;
      min-width: 0;
    }
    .browse-type-icon {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .browse-type-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.5rem;
      letter-spacing: 0.1em;
      color: #fff;
      line-height: 1.1;
      text-shadow: 0 1px 8px rgba(0,0,0,0.3);
    }
    .browse-type-count {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #9fb4d4;
      background: rgba(59,130,246,0.1);
      border: 1px solid rgba(59,130,246,0.2);
      border-radius: 999px;
      padding: 0.2rem 0.65rem;
      margin-left: 0.4rem;
    }
    .browse-type-chevron-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      flex-shrink: 0;
      transition: background 0.25s, border-color 0.25s, transform 0.15s;
    }
    .browse-type-header:hover .browse-type-chevron-wrap {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.15);
    }
    .browse-type-header:active .browse-type-chevron-wrap {
      transform: scale(0.92);
    }
    .browse-type-chevron {
      width: 1.25rem;
      height: 1.25rem;
      color: #9fb4d4;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }
    .browse-type-group.expanded .browse-type-chevron {
      transform: rotate(180deg);
    }
    .browse-type-group.expanded .browse-type-chevron-wrap {
      background: rgba(59,130,246,0.12);
      border-color: rgba(59,130,246,0.25);
    }
    .browse-type-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .browse-type-group.expanded .browse-type-body {
      max-height: 50000px;
      transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .browse-type-inner {
      padding: 0.7rem 0.9rem 0.9rem;
    }

    /* Sub-group (by state/location) */
    .browse-sub-group {
      margin-bottom: 0.65rem;
    }
    .browse-sub-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 1.05rem;
      background: linear-gradient(135deg, rgba(30,53,96,0.25) 0%, rgba(17,29,54,0.45) 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 0.8rem;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.2s, border-color 0.2s;
      width: 100%;
      text-align: left;
      min-height: 52px;
      gap: 0.55rem;
    }
    .browse-sub-header:hover {
      background: linear-gradient(135deg, rgba(30,53,96,0.38) 0%, rgba(17,29,54,0.55) 100%);
      border-color: rgba(255,255,255,0.1);
    }
    .browse-sub-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: 1;
      min-width: 0;
    }
    .browse-sub-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.98rem;
      letter-spacing: 0.05em;
      color: #b4c8e4;
      text-transform: uppercase;
    }
    .browse-sub-count {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      color: #7596c0;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 999px;
      padding: 0.15rem 0.5rem;
    }
    .browse-sub-chevron-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.85rem;
      height: 1.85rem;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
      transition: background 0.2s, transform 0.15s;
    }
    .browse-sub-header:hover .browse-sub-chevron-wrap {
      background: rgba(255,255,255,0.07);
    }
    .browse-sub-header:active .browse-sub-chevron-wrap {
      transform: scale(0.9);
    }
    .browse-sub-chevron {
      width: 0.9rem;
      height: 0.9rem;
      color: #7596c0;
      transition: transform 0.25s ease;
      flex-shrink: 0;
    }
    .browse-sub-group.expanded .browse-sub-chevron {
      transform: rotate(180deg);
    }
    .browse-sub-group.expanded .browse-sub-chevron-wrap {
      background: rgba(59,130,246,0.1);
    }
    .browse-sub-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .browse-sub-group.expanded > .browse-sub-body {
      max-height: 50000px;
      transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .browse-sub-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 0.65rem;
      padding: 0.65rem 0.35rem;
    }
    @media (min-width: 640px) {
      .browse-sub-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .browse-sub-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    /* Single location in a type — skip sub-accordion, show flat grid */
    .browse-type-flat-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 0.6rem;
      padding: 0.35rem;
    }
    @media (min-width: 640px) {
      .browse-type-flat-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .browse-type-flat-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 480px) {
      .browse-type-group {
        margin-bottom: 0.85rem;
        border-radius: 1rem;
      }
      .browse-type-header {
        padding: 1.1rem 1.15rem;
        min-height: 68px;
        gap: 0.65rem;
      }
      .browse-type-name {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: 0.08em;
      }
      .browse-type-icon {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.2rem;
        border-radius: 0.65rem;
      }
      .browse-type-count {
        font-size: 0.7rem;
        padding: 0.15rem 0.55rem;
      }
      .browse-type-chevron-wrap {
        width: 2.5rem;
        height: 2.5rem;
      }
      .browse-type-inner {
        padding: 0.5rem 0.65rem 0.7rem;
      }
      .browse-sub-group {
        margin-bottom: 0.5rem;
      }
      .browse-sub-header {
        padding: 0.85rem 1rem;
        min-height: 54px;
        border-radius: 0.65rem;
      }
      .browse-sub-name {
        font-size: 0.92rem;
        font-weight: 700;
      }
      .browse-sub-chevron-wrap {
        width: 2rem;
        height: 2rem;
      }
      .browse-sub-grid {
        gap: 0.5rem;
        padding: 0.5rem 0.15rem;
      }
      .browse-type-flat-grid {
        gap: 0.5rem;
        padding: 0.25rem 0.1rem;
      }
    }

    @media (max-width: 480px) {
      .browse-toolbar {
        padding: 0.75rem 0.85rem;
        border-radius: 1rem;
        top: 64px;
      }
      .browse-search-input {
        font-size: 0.95rem;
        padding: 0.8rem 2.8rem 0.8rem 2.8rem;
      }
      .browse-filter-select {
        font-size: 0.8rem;
        padding: 0.65rem 2rem 0.65rem 0.7rem;
        min-height: 44px;
      }
      .browse-filter-select-lg {
        font-size: 0.85rem;
        padding: 0.75rem 2.2rem 0.75rem 0.85rem;
        min-height: 48px;
      }
      .browse-scope-toggle {
        border-radius: 0.85rem;
        border-width: 2.5px;
        border-color: rgba(59,130,246,0.2);
        background: rgba(8,12,30,0.95);
        box-shadow: 0 2px 16px rgba(0,0,0,0.3);
      }
      .browse-scope-btn {
        font-size: 0.95rem;
        padding: 1rem 0.85rem;
        min-height: 56px;
        letter-spacing: 0.08em;
      }
      .browse-scope-btn.active {
        background: linear-gradient(135deg, rgba(59,130,246,0.25) 0%, rgba(245,200,66,0.15) 100%);
      }
      .browse-scope-icon {
        font-size: 1.35rem;
      }
      .browse-chip {
        font-size: 0.7rem;
        padding: 0.3rem 0.45rem 0.3rem 0.6rem;
        min-height: 32px;
      }
    }

    /* ── Like button ───────────────────────────────────────── */
    .like-btn { user-select: none; -webkit-user-select: none; }
    .like-btn.liked { background: rgba(74,222,128,0.15) !important; border-color: rgba(74,222,128,0.5) !important; color: #4ade80 !important; }
    .like-btn.liked svg { fill: rgba(74,222,128,0.4); }
    .your-vote-badge {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.1rem 0.35rem;
      border-radius: 999px;
      margin-left: 0.15rem;
      white-space: nowrap;
      pointer-events: none;
    }
    .like-btn .your-vote-badge { background: rgba(74,222,128,0.2); color: #4ade80; }
    .dislike-btn .your-vote-badge { background: rgba(248,113,113,0.2); color: #f87171; }
    @keyframes likePop { 0%{transform:scale(1)} 40%{transform:scale(1.3)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} }
    @keyframes navSignInGlow { 0%,100%{box-shadow:0 6px 36px rgba(192,21,42,0.7),0 0 0 3px rgba(255,255,255,0.22),inset 0 1px 0 rgba(255,255,255,0.18)} 50%{box-shadow:0 8px 50px rgba(192,21,42,0.9),0 0 28px rgba(192,21,42,0.5),0 0 0 3px rgba(255,255,255,0.3),inset 0 1px 0 rgba(255,255,255,0.18)} }
    @keyframes navSignInPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
    @keyframes navSignInAttention { 0%,90%,100%{transform:scale(1)} 93%{transform:scale(1.06)} 96%{transform:scale(0.98)} }
    .like-btn.pop { animation: likePop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
    .dislike-btn { user-select: none; -webkit-user-select: none; }
    .dislike-btn.disliked { background: rgba(248,113,113,0.15) !important; border-color: rgba(248,113,113,0.5) !important; color: #f87171 !important; }

    /* ── Modal animation ───────────────────────────────── */
    #modal-panel {
      transition: transform 0.32s cubic-bezier(0.34,1.12,0.64,1), opacity 0.24s ease;
    }
    #modal-overlay[style*="display:flex"] #modal-panel { animation: modalSlideIn 0.28s cubic-bezier(0.34,1.1,0.64,1) both; }
    @keyframes modalSlideIn { from { transform: translateY(22px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }

    /* ── Modal scrollbar ───────────────────────────────── */
    #modal-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    #modal-body::-webkit-scrollbar { width: 3px; }
    #modal-body::-webkit-scrollbar-track { background: transparent; }
    #modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

    /* ── Promise table (modal) ─────────────────────────── */
    .promise-row { border-bottom: 1px solid rgba(255,255,255,0.048); transition: background 0.14s; }
    .promise-row:last-child { border-bottom: none; }
    @media (hover: hover) { .promise-row:hover { background: rgba(255,255,255,0.027); } }

    /* ── Modal section dividers ────────────────────────── */
    /* One shared vertical-rhythm token drives every top-level block in the
       modal (named sections AND the standalone metric/alignment cards), so the
       whole profile breathes on a single consistent grid instead of three
       competing margin values. */
    #modal-content { --modal-gap: 2.1rem; }
    .modal-section {
      /* Tapered hairline divider — fades left-to-right so each section reads as
         a distinct, letterhead-style block without the flat, boxy look of a
         full-width rule. The shared gap keeps every section on the same rhythm. */
      border-top: 1px solid transparent;
      border-image: linear-gradient(90deg, rgba(255,255,255,0.17), rgba(255,255,255,0.05) 55%, rgba(255,255,255,0)) 1;
      margin-top: var(--modal-gap); padding-top: calc(var(--modal-gap) - 0.15rem);
      scroll-margin-top: 0.75rem;
    }
    /* Standalone cards that sit between named sections (e.g. the personalized
       "Your Match" card) get the same gap above so they never read as cramped
       against the section before them. */
    .modal-block { margin-top: var(--modal-gap); }
    .modal-section-title {
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.12em; font-size: 1.2rem;
      color: #dbe6f6; margin-bottom: 0.95rem;
      text-transform: uppercase;
      display: flex; align-items: center; gap: 0.55rem;
    }
    /* Leading accent rule gives every section a consistent, ledger-like
       anchor on the left — strengthens the scan hierarchy without clutter. */
    .modal-section-title::before {
      content: ""; flex-shrink: 0;
      width: 3px; height: 1.05em; border-radius: 2px;
      background: currentColor; opacity: 0.9;
    }
    /* Short descriptive line under a section title — sets context so each
       profile section reads as a self-contained, professional block. Pulled
       snug to the title, then a clear gap before the section's content. */
    .modal-section-sub {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem;
      color: #8ba6cc; line-height: 1.5; margin: -0.45rem 0 0.95rem;
      letter-spacing: 0.01em;
    }

    /* ── Thin / early-stage profile notice ──────────────────────────────
       Shown when a politician has no scorable record yet (a fresh challenger
       or someone early in their term). Frames the sparse data as intentional
       and honest rather than letting the profile read as broken or empty. */
    .profile-thin-notice {
      display: flex; align-items: flex-start; gap: 0.9rem;
      background: linear-gradient(135deg, rgba(30,53,96,0.5), rgba(10,15,30,0.35));
      border: 1px solid rgba(159,180,212,0.22);
      border-left: 3px solid #c0152a;
      border-radius: 0.85rem;
      padding: 1rem 1.1rem; margin-bottom: 1.25rem;
    }
    .profile-thin-notice .ptn-icon {
      font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 0.05rem;
    }
    .profile-thin-notice .ptn-body { flex: 1; min-width: 0; }
    .profile-thin-notice .ptn-title {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
      font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em;
      font-size: 1.18rem; color: #e6eefb; line-height: 1.05; margin-bottom: 0.35rem;
    }
    .profile-thin-notice .ptn-pill {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #9fb4d4; background: rgba(159,180,212,0.12);
      border: 1px solid rgba(159,180,212,0.32); border-radius: 999px;
      padding: 0.14rem 0.5rem; line-height: 1;
    }
    .profile-thin-notice .ptn-text {
      font-family: 'Barlow', sans-serif; font-size: 0.82rem; color: #9fb4d4;
      line-height: 1.6; margin: 0;
    }
    .profile-thin-notice .ptn-hint {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem;
      letter-spacing: 0.07em; text-transform: uppercase; color: #7596c0;
      margin-top: 0.55rem; display: flex; align-items: center; gap: 0.35rem;
    }
    /* "What you can do now" guidance — turns a low-data profile from a dead end
       into a clear next step (compare on values, or save and check back). */
    .profile-thin-notice .ptn-next {
      margin-top: 0.75rem; padding-top: 0.7rem;
      border-top: 1px solid rgba(159,180,212,0.16);
    }
    .profile-thin-notice .ptn-next-label {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #f5c842; margin-bottom: 0.5rem;
    }
    .profile-thin-notice .ptn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .profile-thin-notice .ptn-act-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
      border-radius: 0.65rem; padding: 0.5rem 0.85rem; cursor: pointer;
      border: 1px solid transparent; color: #fff;
      transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .profile-thin-notice .ptn-act-btn:hover { transform: translateY(-1px); }
    .profile-thin-notice .ptn-act-align {
      background: linear-gradient(135deg, rgba(124,58,237,0.9), rgba(109,40,217,0.9));
      border-color: rgba(167,139,250,0.5);
      box-shadow: 0 4px 14px rgba(139,92,246,0.28);
    }
    .profile-thin-notice .ptn-act-team {
      background: linear-gradient(135deg, rgba(192,21,42,0.9), rgba(124,15,30,0.92));
      border-color: rgba(245,158,11,0.45);
      box-shadow: 0 4px 14px rgba(192,21,42,0.28);
    }
    .profile-thin-notice .ptn-act-team.is-on {
      background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(16,80,40,0.42));
      border-color: rgba(74,222,128,0.5); color: #4ade80; box-shadow: none;
    }
    .profile-thin-notice .ptn-act-btn.just-added {
      background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(16,80,40,0.5));
      border-color: rgba(74,222,128,0.6); color: #4ade80;
    }

    /* ── Candidate Snapshot ───────────────────────────────────────────
       A structured overview shown at the top of thin / early-record
       profiles. Instead of a stack of empty placeholders, it leads with
       what IS known — stated positions, the issues a candidate can be
       compared on, the latest Spotlight item — and is transparent about
       what is still being gathered. Supersedes the bare thin notice and
       ties together the Alignment Tool, the Spotlight and the bio. */
    .cand-snapshot {
      background: linear-gradient(135deg, rgba(30,53,96,0.55), rgba(10,15,30,0.42));
      border: 1px solid rgba(159,180,212,0.22);
      border-left: 3px solid #c0152a;
      border-radius: 0.95rem;
      padding: 1.05rem 1.15rem 1.1rem;
      margin-bottom: 1.4rem;
    }
    .cand-snapshot .cs-head { display: flex; align-items: flex-start; gap: 0.85rem; }
    .cand-snapshot .cs-head-ico { font-size: 1.7rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem; }
    .cand-snapshot .cs-head-main { flex: 1; min-width: 0; }
    .cand-snapshot .cs-title {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
      font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em;
      font-size: 1.35rem; color: #e6eefb; line-height: 1.05; margin-bottom: 0.4rem;
    }
    .cand-snapshot .cs-pill {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #f5c842; background: rgba(245,200,66,0.12);
      border: 1px solid rgba(245,200,66,0.34); border-radius: 999px;
      padding: 0.16rem 0.55rem; line-height: 1;
    }
    .cand-snapshot .cs-lede {
      font-family: 'Barlow', sans-serif; font-size: 0.82rem; color: #9fb4d4;
      line-height: 1.6; margin: 0;
    }
    .cand-snapshot .cs-lede strong { color: #cbd9ec; }

    /* Cohesion index — frames the Snapshot's three reads (stated Positions, the
       visitor's Alignment match, and the Spotlight) as one connected system and
       lets the visitor jump straight to any of them. This is what makes a thin
       profile read as a single, intentional dossier rather than three separate,
       half-filled sections that happen to share a card. */
    .cand-snapshot .cs-map { margin-top: 0.95rem; }
    .cand-snapshot .cs-map-intro {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase;
      color: #7596c0; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.35rem;
    }
    .cand-snapshot .cs-map-row {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.45rem;
    }
    .cand-snapshot .cs-map-chip {
      display: flex; align-items: center; gap: 0.5rem; text-align: left; min-width: 0;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.6rem; padding: 0.5rem 0.6rem; cursor: pointer; color: inherit;
      transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
    }
    @media (hover: hover) { .cand-snapshot .cs-map-chip:hover { border-color: rgba(167,139,250,0.5); transform: translateY(-1px); background: rgba(30,53,96,0.5); } }
    .cand-snapshot .cs-map-ico { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
    .cand-snapshot .cs-map-txt { display: flex; flex-direction: column; min-width: 0; }
    .cand-snapshot .cs-map-k {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0;
    }
    .cand-snapshot .cs-map-v {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.82rem; color: #e6eefb; line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cand-snapshot .cs-map-v.cs-map-v-match { color: #a78bfa; }

    /* At-a-glance facts */
    .cand-snapshot .cs-facts {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
      gap: 0.5rem; margin-top: 0.95rem;
    }
    .cand-snapshot .cs-fact {
      background: rgba(10,15,30,0.5); border: 1px solid rgba(159,180,212,0.16);
      border-radius: 0.6rem; padding: 0.55rem 0.65rem; min-width: 0;
    }
    .cand-snapshot .cs-fact-k {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #7596c0; margin-bottom: 0.2rem;
    }
    .cand-snapshot .cs-fact-v {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.86rem; color: #e6eefb; line-height: 1.25;
    }
    .cand-snapshot .cs-fact-v.cs-accent { color: #a78bfa; }
    /* Muted fact value — an honest status word ("Monitoring", "Building") in
       place of a bare, low-value "0" count. */
    .cand-snapshot .cs-fact-v.cs-muted { color: #8ba6c9; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; }

    /* Generic divided block (e.g. "What they stand for") */
    .cand-snapshot .cs-block {
      margin-top: 1rem; padding-top: 0.9rem;
      border-top: 1px solid rgba(159,180,212,0.14);
    }
    .cand-snapshot .cs-block-h {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #dbe6f6; margin-bottom: 0.55rem; display: flex; align-items: center; gap: 0.4rem;
    }

    /* Stated-position list */
    .cand-snapshot .cs-stance { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.42rem 0; }
    .cand-snapshot .cs-stance + .cs-stance { border-top: 1px dashed rgba(159,180,212,0.12); }
    .cand-snapshot .cs-stance-ico { font-size: 0.95rem; line-height: 1.4; flex-shrink: 0; }
    .cand-snapshot .cs-stance-body { flex: 1; min-width: 0; }
    .cand-snapshot .cs-stance-topic {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem;
      color: #fff; letter-spacing: 0.01em;
    }
    .cand-snapshot .cs-stance-badge {
      display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase;
      border-radius: 999px; padding: 0.1rem 0.42rem; margin-left: 0.4rem; white-space: nowrap;
      vertical-align: middle;
    }
    .cand-snapshot .cs-stance-text { font-size: 0.74rem; color: #9fb4d4; line-height: 1.5; margin: 0.18rem 0 0; }
    .cand-snapshot .cs-b-support  { background: rgba(74,222,128,0.14);  color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
    .cand-snapshot .cs-b-oppose   { background: rgba(248,113,113,0.14); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
    .cand-snapshot .cs-b-mixed    { background: rgba(96,165,250,0.14);  color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
    .cand-snapshot .cs-b-priority { background: rgba(167,139,250,0.14); color: #a78bfa; border: 1px solid rgba(167,139,250,0.3); }

    /* Campaign-priority pills (fallback when no documented stances) */
    .cand-snapshot .cs-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .cand-snapshot .cs-pill-issue {
      display: inline-flex; align-items: center; gap: 0.3rem;
      background: rgba(30,53,96,0.5); border: 1px solid rgba(159,180,212,0.2);
      border-radius: 0.5rem; padding: 0.32rem 0.62rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.72rem; color: #b9cae3;
    }

    /* Alignment Tool linkage card */
    .cand-snapshot .cs-align {
      margin-top: 1rem; padding: 0.75rem 0.85rem;
      background: linear-gradient(135deg, rgba(139,92,246,0.13), rgba(10,15,30,0.25));
      border: 1px solid rgba(139,92,246,0.32); border-radius: 0.7rem;
    }
    .cand-snapshot .cs-align-top {
      display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
      margin-bottom: 0.4rem;
    }
    .cand-snapshot .cs-align-h {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #d8b4fe;
    }
    .cand-snapshot .cs-align-match {
      margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
      border-radius: 999px; padding: 0.1rem 0.5rem;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(159,180,212,0.22);
    }
    .cand-snapshot .cs-align-text { font-size: 0.76rem; color: #b9a8e6; line-height: 1.5; margin: 0; }
    .cand-snapshot .cs-align-text strong { color: #d8b4fe; }
    .cand-snapshot .cs-align-foot { font-size: 0.72rem; color: #9a8cc9; line-height: 1.5; margin: 0.6rem 0 0; }
    /* "What data powers this match" line — the honest read on whether the
       comparison rests on a documented record or an early read from stated
       priorities. Pulled from the same alignment engine the score uses, so the
       Snapshot says out loud what's behind the number. */
    .cand-snapshot .cs-align-basis {
      display: flex; align-items: flex-start; gap: 0.4rem;
      margin: 0.55rem 0 0; padding: 0.45rem 0.55rem;
      background: rgba(10,15,30,0.4); border: 1px dashed rgba(159,180,212,0.24);
      border-radius: 0.55rem;
      font-size: 0.72rem; color: #9fb4d4; line-height: 1.5;
    }
    .cand-snapshot .cs-align-basis strong { color: #c4b5fd; }
    .cand-snapshot .cs-align-basis-ico { flex: none; font-size: 0.8rem; line-height: 1.3; }
    /* In-context path from the Snapshot straight to the issue-by-issue match —
       one tap to the same Alignment breakdown, no scrolling or hunting. */
    .cand-snapshot .cs-align-cta {
      display: inline-flex; align-items: center; gap: 0.4rem;
      margin-top: 0.65rem; width: 100%; justify-content: center;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #ede9fe; cursor: pointer;
      background: linear-gradient(135deg, rgba(139,92,246,0.32), rgba(99,102,241,0.28));
      border: 1px solid rgba(167,139,250,0.5); border-radius: 0.6rem;
      padding: 0.55rem 0.7rem; line-height: 1;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    @media (hover: hover) { .cand-snapshot .cs-align-cta:hover { transform: translateY(-1px); border-color: rgba(167,139,250,0.85); background: linear-gradient(135deg, rgba(139,92,246,0.45), rgba(99,102,241,0.4)); } }
    /* Light "how to use this for a thin candidate" guidance — shown before the
       visitor has set any picks, so a new/thin profile teaches the tool's value. */
    .cand-snapshot .cs-align-guide {
      font-size: 0.71rem; color: #9a8cc9; line-height: 1.5; margin: 0.55rem 0 0;
    }
    .cand-snapshot .cs-align-guide strong { color: #c4b5fd; }

    /* Issue-position list inside the Alignment linkage card — the scannable,
       at-a-glance read on which issues the candidate has taken a stance on,
       pulled from the same data the Alignment Tool compares against. */
    .cand-snapshot .cs-pos-legend {
      display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem;
      margin: 0.1rem 0 0.6rem;
      font-size: 0.64rem; color: #9a8cc9; line-height: 1.4;
    }
    .cand-snapshot .cs-pos-legend > span { display: inline-flex; align-items: center; gap: 0.3rem; }
    .cand-snapshot .cs-pos-list { display: grid; gap: 0; }
    .cand-snapshot .cs-pos { padding: 0.55rem 0; }
    .cand-snapshot .cs-pos + .cs-pos { border-top: 1px dashed rgba(159,180,212,0.16); }
    .cand-snapshot .cs-pos-line {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem;
    }
    /* The position's one-line stance, shown right under its topic so a visitor
       reads WHAT the candidate said, not just that they took a position. */
    .cand-snapshot .cs-pos-text { font-size: 0.74rem; color: #9fb4d4; line-height: 1.5; margin: 0.32rem 0 0; }
    .cand-snapshot .cs-pos-ico { font-size: 0.95rem; line-height: 1; flex-shrink: 0; }
    .cand-snapshot .cs-pos-topic {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.82rem;
      color: #f0eaff; letter-spacing: 0.01em; flex: 1 1 8rem; min-width: 0;
    }
    .cand-snapshot .cs-pos-badge {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase;
      border-radius: 999px; padding: 0.12rem 0.42rem; white-space: nowrap; flex-shrink: 0;
    }
    /* Source-type tag — the visible difference between a position backed by an
       actual vote/bill ("Recorded") and one taken from public statements ("Stated"). */
    .cand-snapshot .cs-src {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase;
      border-radius: 999px; padding: 0.12rem 0.42rem; white-space: nowrap; flex-shrink: 0;
    }
    .cand-snapshot .cs-src-rec {
      color: #7dd3a0; background: rgba(74,222,128,0.12);
      border: 1px solid rgba(74,222,128,0.34);
    }
    .cand-snapshot .cs-src-stated {
      color: #9fb4d4; background: rgba(159,180,212,0.08);
      border: 1px dashed rgba(159,180,212,0.4);
    }
    /* Per-issue "your match" verdict, shown only when the visitor has saved
       Alignment Tool picks that overlap this candidate's positions. */
    .cand-snapshot .cs-vd {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase;
      border-radius: 999px; padding: 0.12rem 0.42rem; white-space: nowrap; flex-shrink: 0;
    }
    .cand-snapshot .cs-vd-match    { color: #4ade80; background: rgba(74,222,128,0.14);  border: 1px solid rgba(74,222,128,0.34); }
    .cand-snapshot .cs-vd-partial  { color: #60a5fa; background: rgba(96,165,250,0.14);  border: 1px solid rgba(96,165,250,0.34); }
    .cand-snapshot .cs-vd-mismatch { color: #f87171; background: rgba(248,113,113,0.14); border: 1px solid rgba(248,113,113,0.34); }
    .cand-snapshot .cs-pos-more { font-size: 0.72rem; color: #9a8cc9; line-height: 1.5; margin: 0.5rem 0 0; }

    /* Centerpiece intro line — frames the positions list as the main read on a
       thin candidate, not a secondary detail. */
    .cand-snapshot .cs-pos-intro { font-size: 0.75rem; color: #cbd9ec; line-height: 1.55; margin: 0 0 0.6rem; }
    .cand-snapshot .cs-pos-intro strong { color: #f5c842; }
    /* At-a-glance distribution chips — the scan layer above the positions list.
       Reuses the position direction (cs-b-*) and basis (cs-src-*) color tokens so
       the summary and the rows below read in the same visual vocabulary. */
    .cand-snapshot .cs-dist { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.65rem; }
    .cand-snapshot .cs-dist-chip {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase;
      border-radius: 999px; padding: 0.18rem 0.5rem; line-height: 1; white-space: nowrap;
      display: inline-flex; align-items: center; gap: 0.2rem;
    }
    .cand-snapshot .cs-dist-chip.cs-dist-you {
      color: #d8b4fe; background: rgba(167,139,250,0.16);
      border: 1px solid rgba(167,139,250,0.42);
    }

    /* Issue-positions centerpiece — the heart of a thin profile. A gold-accented
       card so a candidate's documented positions read as the valuable, central
       part of getting to know them, even when the rest of the record is sparse. */
    .cand-snapshot .cs-positions {
      margin-top: 1rem; padding: 0.85rem 0.9rem 0.9rem;
      border-top: none;
      background: linear-gradient(135deg, rgba(30,53,96,0.42), rgba(10,15,30,0.28));
      border: 1px solid rgba(159,180,212,0.2);
      border-left: 3px solid #f5c842;
      border-radius: 0.7rem;
    }
    .cand-snapshot .cs-positions .cs-block-h { margin-bottom: 0.5rem; }
    /* Count pill in a block header — "5 positions" at a glance */
    .cand-snapshot .cs-count-pill {
      margin-left: auto;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: #f5c842; background: rgba(245,200,66,0.12);
      border: 1px solid rgba(245,200,66,0.3); border-radius: 999px;
      padding: 0.1rem 0.45rem; line-height: 1; white-space: nowrap;
    }

    /* Spotlight linkage */
    .cand-snapshot .cs-spot { margin-top: 1rem; }
    .cand-snapshot .cs-spot-card {
      width: 100%; text-align: left; display: flex; align-items: center; gap: 0.65rem;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.7rem; padding: 0.6rem 0.7rem; color: inherit;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }
    .cand-snapshot button.cs-spot-card { cursor: pointer; }
    @media (hover: hover) { .cand-snapshot button.cs-spot-card:hover { border-color: rgba(245,200,66,0.42); transform: translateY(-1px); } }
    .cand-snapshot .cs-spot-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
    .cand-snapshot .cs-spot-badge {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: #f5c842;
    }
    .cand-snapshot .cs-spot-text { font-size: 0.76rem; color: #cbd9ec; line-height: 1.45; }
    .cand-snapshot .cs-spot-cta { margin-left: auto; flex-shrink: 0; font-size: 1.05rem; color: #7596c0; }
    .cand-snapshot .cs-spot-note { font-size: 0.72rem; color: #7596c0; line-height: 1.5; margin: 0.45rem 0 0; }

    /* Issue-tie chip — the connective tissue that ties a Spotlight item back to a
       specific issue position shown in the Snapshot (and tracked by the Alignment
       Tool). Gold-to-purple bridge: gold border reads as Spotlight, purple text
       reads as an Alignment issue, so the link between the two sections is visible
       at a glance. Used in the Snapshot spotlight card and the full Spotlight modal. */
    .pdx-issue-tie {
      display: inline-flex; align-items: center; gap: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #c4b5fd; background: rgba(167,139,250,0.12);
      border: 1px solid rgba(167,139,250,0.32); border-radius: 999px;
      padding: 0.12rem 0.5rem; line-height: 1.3; white-space: nowrap;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    .cand-snapshot .cs-spot-tie-row { margin-top: 0.5rem; }

    /* "We're actively gathering" transparency block */
    .cand-snapshot .cs-gather {
      margin-top: 1rem; padding: 0.75rem 0.85rem;
      background: rgba(10,15,30,0.42); border: 1px solid rgba(245,200,66,0.16);
      border-radius: 0.7rem;
    }
    .cand-snapshot .cs-gather-h {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #f5c842; margin-bottom: 0.45rem; display: flex; align-items: center; gap: 0.35rem;
    }
    .cand-snapshot .cs-gather-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.32rem; }
    .cand-snapshot .cs-gather-list li {
      font-size: 0.74rem; color: #9fb4d4; line-height: 1.45;
      display: flex; align-items: flex-start; gap: 0.45rem;
    }
    .cand-snapshot .cs-gather-list li::before { content: '○'; color: #f5c842; flex-shrink: 0; opacity: 0.8; }

    /* Snapshot actions (mirror the thin-notice CTA buttons) */
    .cand-snapshot .cs-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
    .cand-snapshot .cs-act-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
      border-radius: 0.65rem; padding: 0.5rem 0.85rem; cursor: pointer;
      border: 1px solid transparent; color: #fff;
      transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .cand-snapshot .cs-act-btn:hover { transform: translateY(-1px); }
    .cand-snapshot .cs-act-align {
      background: linear-gradient(135deg, rgba(124,58,237,0.9), rgba(109,40,217,0.9));
      border-color: rgba(167,139,250,0.5); box-shadow: 0 4px 14px rgba(139,92,246,0.28);
    }
    .cand-snapshot .cs-act-team {
      background: linear-gradient(135deg, rgba(192,21,42,0.9), rgba(124,15,30,0.92));
      border-color: rgba(245,158,11,0.45); box-shadow: 0 4px 14px rgba(192,21,42,0.28);
    }
    .cand-snapshot .cs-act-team.is-on {
      background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(16,80,40,0.42));
      border-color: rgba(74,222,128,0.5); color: #4ade80; box-shadow: none;
    }
    .cand-snapshot .cs-act-btn.just-added {
      background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(16,80,40,0.5));
      border-color: rgba(74,222,128,0.6); color: #4ade80;
    }
    .cand-snapshot .cs-foot-hint {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem;
      letter-spacing: 0.07em; text-transform: uppercase; color: #7596c0;
      margin-top: 0.9rem; display: flex; align-items: center; gap: 0.35rem;
    }

    /* ── Profile section empty state — a clean, intentional placeholder for
       sections (e.g. the Promise Tracker) that have no entries yet. */
    .pdx-empty-state {
      text-align: center; padding: 1.5rem 1rem 1.35rem;
    }
    .pdx-empty-state .pdx-empty-ico { font-size: 1.7rem; opacity: 0.5; margin-bottom: 0.4rem; }
    .pdx-empty-state .pdx-empty-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #9fb4d4; margin-bottom: 0.3rem;
    }
    .pdx-empty-state .pdx-empty-sub {
      font-size: 0.72rem; color: #4e72a0; line-height: 1.55;
      max-width: 26rem; margin: 0 auto;
    }

    /* ── Verdict badges ────────────────────────────────── */
    .vbadge {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap;
    }
    .vbadge-kept    { background: rgba(74,222,128,0.14); color: #4ade80; border: 1px solid rgba(74,222,128,0.28); }
    .vbadge-broken  { background: rgba(248,113,113,0.14); color: #f87171; border: 1px solid rgba(248,113,113,0.28); }
    .vbadge-pending { background: rgba(245,200,66,0.14); color: #f5c842; border: 1px solid rgba(245,200,66,0.28); }
    .vbadge-partial { background: rgba(96,165,250,0.14); color: #60a5fa; border: 1px solid rgba(96,165,250,0.28); }

    /* ── Key issue pills ───────────────────────────────── */
    .issue-pill {
      display: inline-flex; align-items: center; gap: 0.3rem;
      background: rgba(30,53,96,0.45); border: 1px solid rgba(159,180,212,0.2);
      border-radius: 0.5rem; padding: 0.36rem 0.72rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.74rem; letter-spacing: 0.05em; color: #b9cae3;
      transition: border-color 0.15s, background 0.15s;
    }
    @media (hover: hover) { .issue-pill:hover { border-color: rgba(159,180,212,0.42); background: rgba(30,53,96,0.66); } }

    /* ── Detailed profile: hero / letterhead header ────── */
    .profile-hero {
      display: flex; align-items: flex-start; gap: 1.15rem;
      margin-bottom: 1.4rem;
    }
    .profile-hero-photo {
      width: 132px; height: 158px; flex-shrink: 0;
      border-radius: 0.9rem; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 14px 36px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
      background: linear-gradient(150deg, rgba(30,53,96,0.7), rgba(10,15,30,0.85));
    }
    .profile-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .profile-hero-photo .ph-fallback {
      display: flex; align-items: center; justify-content: center;
      width: 100%; height: 100%; font-size: 3.4rem;
    }
    .profile-hero-id { flex: 1; min-width: 0; padding-top: 0.1rem; }
    .profile-eyebrow {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: #7596c0; margin-bottom: 0.38rem;
    }
    .profile-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.75rem, 6.5vw, 2.55rem); letter-spacing: 0.04em;
      color: #fff; line-height: 0.98; margin: 0 0 0.45rem;
    }
    .profile-office {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.92rem; letter-spacing: 0.03em; color: #b9cae3;
      line-height: 1.3; margin-bottom: 0.6rem;
    }
    .profile-office .po-sep { color: #41597d; margin: 0 0.42rem; }
    .profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
    .profile-party {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #6f88ac; display: inline-flex; align-items: center; gap: 0.34rem;
    }
    .profile-party::before {
      content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%;
      background: currentColor; opacity: 0.8;
    }
    .profile-status-monitoring {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
      border-radius: 999px; padding: 0.16rem 0.5rem;
      background: rgba(159,180,212,0.12); border: 1px solid rgba(159,180,212,0.35); color: #9fb4d4;
    }
    .profile-hero-score { flex-shrink: 0; }
    /* Ring + its denominator caption, stacked so the sample size behind the
       headline percentage sits directly under it ("100%" → "(1 of 1 resolved)"). */
    .profile-score-stack {
      display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
    }
    .profile-score-denom {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #7596c0; line-height: 1.1; text-align: center; white-space: nowrap;
    }
    /* Outstanding promises alongside a real percentage — dimmer than the
       denominator, because it is context, not the basis of the score. */
    .profile-score-pending {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.54rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #b08d2e; line-height: 1.1; text-align: center; white-space: nowrap;
    }
    /* Tracked-but-unresolved tile: real promises are on file, so the slot wears
       the pending gold rather than the grey of an empty record — but it shows an
       hourglass, never a number, because there is still no percentage. */
    .profile-score-tracking {
      background: rgba(245,200,66,0.1);
      border: 1px solid rgba(245,200,66,0.34);
    }
    /* Its caption wraps rather than forcing the hero column wide. */
    .profile-score-track-note {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.54rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #9fb4d4; line-height: 1.2; text-align: center;
      max-width: 92px;
    }
    @media (max-width: 480px) {
      .profile-hero { gap: 0.9rem; }
      .profile-hero-photo { width: 96px; height: 118px; border-radius: 0.7rem; }
      .profile-hero-score { display: none; }
    }

    /* ── Profile quick-jump navigation ─────────────────────────────
       A glanceable "map" of the profile: a sticky, horizontally
       scrollable rail of summary pills that sits directly under the
       hero and jumps to each major section. Each pill pairs a section
       label with a live figure (score %, kept/broken, match %, …) so
       the whole page can be read at a glance. Full-bleed via negative
       margins so, when stuck, it spans the modal body edge to edge. */
    .pdx-pnav {
      position: sticky; top: 0; z-index: 30;
      margin: -0.2rem -1.25rem 1.4rem;
      padding: 0.55rem 1.25rem;
      background: linear-gradient(180deg, rgba(13,20,38,0.97) 0%, rgba(13,20,38,0.86) 100%);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,0.05);
      border-bottom: 1px solid rgba(255,255,255,0.09);
      box-shadow: 0 10px 22px -14px rgba(0,0,0,0.75);
    }
    @media (min-width: 640px) {
      .pdx-pnav { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
    }
    .pdx-pnav-track {
      display: flex; gap: 0.5rem;
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: none; -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding-bottom: 2px;
    }
    .pdx-pnav-track::-webkit-scrollbar { display: none; }
    .pdx-pnav-pill {
      flex: 0 0 auto; scroll-snap-align: start;
      display: inline-flex; align-items: center; gap: 0.5rem;
      min-height: 44px; padding: 0.4rem 0.8rem;
      border-radius: 0.7rem; cursor: pointer;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(148,163,184,0.22);
      color: #cbd9ec; text-align: left; white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    }
    .pdx-pnav-pill:hover { background: rgba(255,255,255,0.09); border-color: rgba(148,163,184,0.45); transform: translateY(-1px); }
    .pdx-pnav-pill:active { transform: translateY(0); }
    .pdx-pnav-pill.is-active {
      background: linear-gradient(135deg, rgba(192,21,42,0.22), rgba(124,58,237,0.18));
      border-color: rgba(192,21,42,0.5);
      box-shadow: 0 0 0 1px rgba(192,21,42,0.22), 0 8px 18px -10px rgba(192,21,42,0.55);
    }
    .pdx-pnav-ico { font-size: 1rem; line-height: 1; flex-shrink: 0; }
    .pdx-pnav-txt { display: flex; flex-direction: column; line-height: 1.02; min-width: 0; }
    .pdx-pnav-label {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.11em; text-transform: uppercase;
      color: #8fa6c8;
    }
    .pdx-pnav-pill.is-active .pdx-pnav-label { color: #e9d8a6; }
    /* "Full Report" action pill — opens the Full Stance Record overlay rather than
       scrolling to a section. An Evidence-blue accent + a trailing ↗ marks it as a
       jump into the deeper view, distinct from the section-scroll pills. */
    .pdx-pnav-pill.pdx-pnav-action {
      background: linear-gradient(135deg, rgba(56,132,255,0.16), rgba(124,58,237,0.12));
      border-color: rgba(96,165,250,0.45);
    }
    .pdx-pnav-pill.pdx-pnav-action:hover {
      background: linear-gradient(135deg, rgba(56,132,255,0.24), rgba(124,58,237,0.18));
      border-color: rgba(96,165,250,0.7);
    }
    .pdx-pnav-pill.pdx-pnav-action .pdx-pnav-label { color: #7fb4ff; }
    .pdx-pnav-pill.pdx-pnav-action .pdx-pnav-label::after { content: " \2197"; opacity: 0.85; }
    .pdx-pnav-val {
      font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem;
      letter-spacing: 0.02em;
    }
    /* Zero-height in-flow markers the pills scroll to. scroll-margin keeps a
       section clear of the sticky rail even on native anchor jumps. */
    .pdx-nav-anchor { display: block; height: 0; scroll-margin-top: 4.25rem; }

    /* Activity footer — a compact "last touched / how much is tracked" strip. */
    .pdx-activity-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .pdx-activity-chip {
      display: inline-flex; flex-direction: column; gap: 0.1rem;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.07);
      border-radius: 0.7rem; padding: 0.5rem 0.8rem; min-width: 5rem;
    }
    .pdx-activity-chip .lbl {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase; color: #7596c0;
    }
    .pdx-activity-chip .val { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.02em; color: #cbd9ec; }
    @media (prefers-reduced-motion: reduce) {
      .pdx-pnav-pill { transition: none; }
    }

    /* ── Detailed profile: signature quote ─────────────── */
    .profile-quote {
      position: relative;
      background: linear-gradient(135deg, rgba(30,53,96,0.42), rgba(10,15,30,0.25));
      border: 1px solid rgba(255,255,255,0.06);
      border-left: 3px solid #c0152a;
      border-radius: 0 0.7rem 0.7rem 0;
      padding: 0.95rem 1.15rem 0.95rem 2.5rem;
      margin: 0;
    }
    .profile-quote::before {
      content: "\201C";
      position: absolute; left: 0.65rem; top: 0.2rem;
      font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem;
      color: rgba(192,21,42,0.55); line-height: 1;
    }
    .profile-quote p {
      font-family: 'Barlow', sans-serif; font-style: italic;
      font-size: 0.9rem; color: #cbd9ec; line-height: 1.55; margin: 0;
    }
    /* Short source note under a signature quote — keeps the attribution quiet
       but present, so a pull-quote reads as sourced rather than free-floating. */
    .profile-quote-cite {
      display: block; margin-top: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-style: normal;
      font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #8aa0c2;
    }
    .profile-quote-cite::before { content: "— "; color: #c0152a; }

    /* ── Deep profile: Key Issue Stances & People's Mandate ── */
    .stance-card {
      background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.06);
      border-left-width: 3px; border-left-color: rgba(159,180,212,0.25);
      border-radius: 0.75rem; padding: 0.72rem 0.85rem; margin-bottom: 0.5rem;
    }
    .stance-card:last-child { margin-bottom: 0; }
    @media (hover: hover) { .stance-card:hover { border-color: rgba(159,180,212,0.18); } }
    /* Left-edge accent stripe so each card's stance reads at a glance */
    .stance-card.sc-support  { border-left-color: rgba(74,222,128,0.6); }
    .stance-card.sc-oppose   { border-left-color: rgba(248,113,113,0.6); }
    .stance-card.sc-mixed    { border-left-color: rgba(245,200,66,0.6); }
    .stance-card.sc-tracking { border-left-color: rgba(159,180,212,0.4); }
    /* "Additional activity — inferred from evidence" — issues a politician has
       Locker evidence on but NO documented ISSUE_STANCE_DATA position. Set apart
       from the documented cards above by a dashed top divider and a muted header,
       yet each card reuses the SAME stance colours (green/red/amber) and the "~"
       inferred marker the Evidence Locker uses, so the read is transparent without
       ever blurring into the curated list. */
    .stance-inferred-wrap {
      margin-top: 1rem; padding-top: 0.85rem;
      border-top: 1px dashed rgba(159,180,212,0.22);
    }
    .stance-cat-head.stance-inferred-head { color: #8aa0c4; border-bottom-color: rgba(159,180,212,0.16); }
    .stance-inferred-note { font-size: 0.72rem; color: #8ba6c9; line-height: 1.55; margin: 0 0 0.7rem; }
    .stance-card.stance-inferred { border-style: dashed; background: rgba(10,15,30,0.32); }
    .stance-inf-mark { font-weight: 800; color: #f5c842; opacity: 0.95; }
    /* Clickable stance card — drills into the Evidence Locker, filtered to this
       politician + issue. Mirrors the Locker's own stance rows: a clear hover
       lift, a gold focus ring for keyboard users, and a one-tap "see the
       evidence" cue, so the position and its receipts feel like one surface. */
    .stance-card.is-evclick { cursor: pointer; }
    @media (hover: hover) {
      .stance-card.is-evclick:hover { border-color: rgba(245,200,66,0.4); background: rgba(245,200,66,0.05); }
      .stance-card.is-evclick:hover .stance-ev-cue { color: #f5c842; }
      .stance-card.is-evclick:hover .stance-ev-cue-go { color: #f5c842; }
    }
    .stance-card.is-evclick:focus-visible { outline: 2px solid rgba(245,200,66,0.7); outline-offset: 2px; }
    .stance-ev-cue {
      display: flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem;
      padding-top: 0.5rem; border-top: 1px dashed rgba(159,180,212,0.16);
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.04em; color: #7596c0;
      transition: color 0.15s ease;
    }
    .stance-ev-cue strong { color: #cbd9ec; font-weight: 800; }
    .stance-ev-cue-ico { font-size: 0.8rem; line-height: 1; }
    .stance-ev-cue-go { margin-left: auto; color: #5f7da6; transition: color 0.15s ease; }
    /* "Connect the dots" row — links a stated position out to its topic ranking,
       its sourced Issue Spotlight, and any citizen-backed reform on the same
       issue, so a stance card is a hub into the rest of PolitiDex, not a dead
       end. The People's Mandate chip (.pdx-mandate-chip) sits in this row too and
       keeps its own gold styling. */
    .pdx-stance-connect {
      display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem;
      padding-top: 0.5rem; border-top: 1px dashed rgba(159,180,212,0.16);
    }
    .pdx-connect-chip {
      display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%;
      cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.04em; border-radius: 999px;
      padding: 0.14rem 0.5rem; line-height: 1.25; text-decoration: none;
      transition: background 0.15s, border-color 0.15s, transform 0.1s; vertical-align: middle;
    }
    .pdx-connect-chip:active { transform: scale(0.97); }
    .pdx-connect-chip-ico { font-size: 0.7rem; flex-shrink: 0; }
    .pdx-connect-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 13rem; }
    .pdx-connect-chip.is-topic { color: #7fb4ff; background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.4); }
    .pdx-connect-chip.is-topic:hover { background: rgba(96,165,250,0.2); border-color: rgba(96,165,250,0.65); }
    .pdx-connect-chip.is-topic:focus-visible { outline: 2px solid rgba(96,165,250,0.8); outline-offset: 1px; }
    .pdx-connect-chip.is-spotlight { color: #5fe3c7; background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.38); }
    .pdx-connect-chip.is-spotlight:hover { background: rgba(45,212,191,0.18); border-color: rgba(45,212,191,0.62); }
    .pdx-connect-chip.is-spotlight:focus-visible { outline: 2px solid rgba(45,212,191,0.8); outline-offset: 1px; }
    /* "Limited Record" context banner — set on a thin-promise officeholder who
       still has documented positions, so users get honest expectations while the
       sourced issue positions remain the lead. */
    .stance-limited-note {
      background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.28);
      border-radius: 0.7rem; padding: 0.7rem 0.8rem; margin: 0 0 0.85rem;
    }
    .stance-limited-note .lr-head { display: flex; align-items: flex-start; gap: 0.55rem; }
    .stance-limited-note .stance-limited-pill {
      flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: #cbd5e1; background: rgba(148,163,184,0.16);
      border: 1px solid rgba(148,163,184,0.4); border-radius: 999px; padding: 0.12rem 0.5rem;
      white-space: nowrap; margin-top: 0.05rem;
    }
    .stance-limited-note .stance-limited-text { font-size: 0.72rem; color: #9fb4d4; line-height: 1.55; }
    /* "On record now / Still being built" — the connective read that makes a thin
       officeholder profile feel like one intentional system rather than a sparse
       scoreboard, naming the lenses that DO work (positions, alignment, spotlight). */
    .stance-limited-note .lr-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem;
      margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed rgba(159,180,212,0.16);
    }
    .stance-limited-note .lr-row-label {
      flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0;
    }
    .stance-limited-note .lr-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .stance-limited-note .lr-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.02em;
      color: #cbd9ec; background: rgba(30,53,96,0.5); border: 1px solid rgba(159,180,212,0.25);
      border-radius: 999px; padding: 0.18rem 0.55rem; white-space: nowrap;
    }
    .stance-limited-note .lr-chip-ico { font-size: 0.78rem; line-height: 1; }
    .stance-limited-note .lr-chip-align { color: #c4b5fd; border-color: rgba(167,139,250,0.4); background: rgba(139,92,246,0.12); }
    .stance-limited-note .lr-chip-spot { color: #f5c842; border-color: rgba(245,200,66,0.35); background: rgba(245,200,66,0.1); }
    .stance-limited-note .lr-building-text { font-size: 0.7rem; color: #8ba6c9; line-height: 1.5; flex: 1 1 12rem; min-width: 0; }
    /* Grouped category sections within Key Issue Stances */
    .stance-cat { margin-bottom: 0.95rem; }
    .stance-cat:last-child { margin-bottom: 0; }
    .stance-cat-head {
      display: flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0;
      margin: 0 0 0.5rem; padding-bottom: 0.32rem; border-bottom: 1px solid rgba(159,180,212,0.12);
    }
    .stance-cat-head .stance-cat-ico { font-size: 0.85rem; }
    .stance-cat-head .stance-cat-n {
      margin-left: auto; font-size: 0.55rem; color: #4e72a0;
      background: rgba(159,180,212,0.1); border-radius: 999px; padding: 0.05rem 0.4rem;
    }
    /* Stance distribution summary chips */
    .stance-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.85rem; }
    .stance-sum-chip {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.04em; padding: 0.14rem 0.55rem;
      border-radius: 999px; border: 1px solid;
    }
    .stance-sum-chip.stance-you-sum { background: rgba(139,92,246,0.14); color: #c4b5fd; border-color: rgba(139,92,246,0.32); }
    .stance-badge {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.16rem 0.45rem; border-radius: 999px; white-space: nowrap;
    }
    .stance-support  { background: rgba(74,222,128,0.14); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
    .stance-oppose   { background: rgba(248,113,113,0.14); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
    .stance-mixed    { background: rgba(245,200,66,0.14); color: #fcd34d; border: 1px solid rgba(245,200,66,0.32); }
    .stance-tracking { background: rgba(159,180,212,0.12); color: #9fb4d4; border: 1px solid rgba(159,180,212,0.25); }
    /* Inline "your view" pill shown on a stance card when the visitor has the
       matching Alignment Tool position selected — ties the card to their choices. */
    .stance-you {
      display: inline-flex; align-items: center; gap: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid; margin-top: 0.5rem;
    }
    .stance-you.cmp-match    { background: rgba(74,222,128,0.12);  color: #4ade80; border-color: rgba(74,222,128,0.3); }
    .stance-you.cmp-partial  { background: rgba(245,200,66,0.12);  color: #f5c842; border-color: rgba(245,200,66,0.3); }
    .stance-you.cmp-mismatch { background: rgba(248,113,113,0.12); color: #f87171; border-color: rgba(248,113,113,0.3); }

    /* ── Stance at a Glance ────────────────────────────────────────────────
       A compact, collapsible index of every documented position, built from the
       SAME ISSUE_STANCE_DATA the detailed cards use. Each row pairs the stance
       with a single evidence dot — green when the record backs it, red when it
       cuts against, blue when mixed — and opens a small evidence popover on tap.
       Collapsed by default so it orients without dominating the profile. */
    .sag-lead {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem;
      color: #8ba6cc; line-height: 1.5; margin: 0 0 0.55rem; letter-spacing: 0.01em;
    }
    .sag-limited {
      display: flex; align-items: flex-start; gap: 0.5rem;
      background: rgba(30,53,96,0.4); border: 1px dashed rgba(159,180,212,0.28);
      border-radius: 0.65rem; padding: 0.55rem 0.7rem; margin-bottom: 0.6rem;
    }
    .sag-limited-ico { font-size: 0.95rem; line-height: 1.3; flex-shrink: 0; }
    .sag-limited-text { font-size: 0.7rem; color: #9fb4d4; line-height: 1.55; }
    .sag-list { display: flex; flex-direction: column; gap: 0.4rem; }
    .sag-row {
      display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
      background: rgba(13,21,38,0.55); border: 1px solid rgba(159,180,212,0.14);
      border-left: 3px solid rgba(159,180,212,0.35);
      border-radius: 0.6rem; padding: 0.58rem 0.7rem; cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      font-family: inherit;
    }
    .sag-row:hover { background: rgba(30,53,96,0.55); border-color: rgba(159,180,212,0.32); }
    .sag-row:active { transform: scale(0.995); }
    .sag-row.sag-support  { border-left-color: rgba(74,222,128,0.6); }
    .sag-row.sag-oppose   { border-left-color: rgba(248,113,113,0.6); }
    .sag-row.sag-mixed    { border-left-color: rgba(245,200,66,0.6); }
    .sag-row.sag-tracking { border-left-color: rgba(159,180,212,0.4); }
    .sag-ico { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
    .sag-main { flex: 1; min-width: 0; }
    .sag-topic {
      display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.85rem; color: #fff; letter-spacing: 0.01em; line-height: 1.25;
    }
    .sag-text {
      display: block; font-size: 0.7rem; color: #9fb4d4; line-height: 1.4; margin-top: 0.12rem;
      overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
      -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    }
    .sag-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.28rem; flex-shrink: 0; }
    .sag-badge {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.13rem 0.42rem; border-radius: 999px; white-space: nowrap;
    }
    .sag-badge.sag-support  { background: rgba(74,222,128,0.14); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
    .sag-badge.sag-oppose   { background: rgba(248,113,113,0.14); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
    .sag-badge.sag-mixed    { background: rgba(245,200,66,0.14); color: #fcd34d; border: 1px solid rgba(245,200,66,0.32); }
    .sag-badge.sag-tracking { background: rgba(159,180,212,0.12); color: #9fb4d4; border: 1px solid rgba(159,180,212,0.25); }
    /* Evidence dot + label — the at-a-glance "do we have receipts?" signal. */
    .sag-ev {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
    }
    .sag-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
    .sag-ev.ev-backs    { color: #4ade80; } .sag-ev.ev-backs .sag-dot    { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); }
    .sag-ev.ev-cuts     { color: #f87171; } .sag-ev.ev-cuts .sag-dot     { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.6); }
    .sag-ev.ev-mixed    { color: #60a5fa; } .sag-ev.ev-mixed .sag-dot    { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.6); }
    .sag-ev.ev-progress { color: #f5c842; } .sag-ev.ev-progress .sag-dot { background: #f5c842; box-shadow: 0 0 6px rgba(245,200,66,0.5); }
    .sag-ev.ev-none     { color: #5f7da6; } .sag-ev.ev-none .sag-dot     { background: transparent; border: 1.5px solid #5f7da6; }
    .sag-ev-media { font-size: 0.62rem; color: #f5c842; font-weight: 700; margin-right: 0.12rem; filter: drop-shadow(0 0 3px rgba(245,200,66,0.45)); }
    .sag-chev { color: #4e72a0; font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
    .sag-row:hover .sag-chev { color: #9fb4d4; }
    .sag-foot {
      font-size: 0.66rem; color: #5f7da6; line-height: 1.5; margin: 0.7rem 0 0;
      font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.01em;
    }
    @media (max-width: 480px) {
      .sag-meta { flex-direction: row; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }
      .sag-text { -webkit-line-clamp: 2; }
    }

    /* ── Say vs. Do — per-stance verdict pill + expandable evidence/record ──────
       The verdict pill sits beside the stance "Say" badge and states, in one word,
       whether the official's own record backs the position, cuts against it, or is
       mixed. It reads the same signal as the old evidence dot but as an explicit
       verdict, and is upgraded in place to the roll-call-based verdict when the
       voting-record database has recorded votes for the issue (see _sagHydrateRecord). */
    .sag-verdict {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.54rem; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.13rem 0.42rem; border-radius: 999px; white-space: nowrap;
    }
    .sag-verdict.sag-v-consistent  { background: rgba(74,222,128,0.16); color: #6ee7a0; border: 1px solid rgba(74,222,128,0.34); }
    .sag-verdict.sag-v-contradicts { background: rgba(248,113,113,0.18); color: #fca5a5; border: 1px solid rgba(248,113,113,0.36); }
    .sag-verdict.sag-v-mixed       { background: rgba(96,165,250,0.16); color: #93c5fd; border: 1px solid rgba(96,165,250,0.34); }
    .sag-verdict.sag-v-progress    { background: rgba(245,200,66,0.14); color: #f5c842; border: 1px solid rgba(245,200,66,0.3); }
    .sag-item { display: flex; flex-direction: column; }
    .sag-row .sag-chev { transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }
    .sag-row.is-open .sag-chev { transform: rotate(90deg); color: #9fb4d4; }
    /* Inline detail: collapses with a max-height transition (same idea as .dd-body). */
    .sag-detail { max-height: 0; overflow: hidden; transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1); }
    .sag-detail.is-open { max-height: 1200px; }
    .sag-detail-inner {
      margin: 0.35rem 0 0.1rem; padding: 0.6rem 0.7rem;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(159,180,212,0.14);
      border-radius: 0.55rem; display: flex; flex-direction: column; gap: 0.5rem;
    }
    .sag-verdict-line { font-size: 0.72rem; color: #cdd9ec; line-height: 1.5; }
    .sag-verdict-line strong { font-weight: 700; }
    .sag-verdict-line.sag-v-consistent strong  { color: #6ee7a0; }
    .sag-verdict-line.sag-v-contradicts strong { color: #fca5a5; }
    .sag-verdict-line.sag-v-mixed strong       { color: #93c5fd; }
    .sag-verdict-line.sag-v-progress strong    { color: #f5c842; }
    .sag-verdict-line.sag-v-none strong        { color: #9fb4d4; }
    .sag-detail-ev { font-size: 0.7rem; color: #9fb4d4; line-height: 1.5; }
    .sag-detail-ev .sag-src { color: #7596c0; }
    .sag-detail-ev .sag-src a { color: #8fb0dc; text-decoration: none; }
    .sag-detail-ev .sag-src a:hover { text-decoration: underline; }
    .sag-tally { display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
    .sag-tally span { display: inline-flex; align-items: center; gap: 0.22rem; color: #9fb4d4; }
    .sag-tally .t-kept { color: #6ee7a0; } .sag-tally .t-broken { color: #fca5a5; } .sag-tally .t-pending { color: #f5c842; }
    .sag-votes { display: flex; flex-direction: column; gap: 0.3rem; }
    .sag-votes-head { font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7596c0; }
    .sag-vote { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.68rem; color: #cdd9ec; line-height: 1.4; }
    .sag-vote-pos { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.08rem 0.34rem; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
    .sag-vote-pos.v-yea { background: rgba(74,222,128,0.14); color: #6ee7a0; } .sag-vote-pos.v-nay { background: rgba(248,113,113,0.16); color: #fca5a5; } .sag-vote-pos.v-other { background: rgba(159,180,212,0.12); color: #9fb4d4; }
    .sag-votes-empty, .sag-votes-loading { font-size: 0.68rem; color: #5f7da6; line-height: 1.5; }
    .sag-detail-cta {
      align-self: flex-start; margin-top: 0.05rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.64rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #8fb0dc;
      background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.28);
      border-radius: 999px; padding: 0.28rem 0.7rem; cursor: pointer; transition: background 0.15s;
    }
    .sag-detail-cta:hover { background: rgba(96,165,250,0.2); color: #cfe0f7; }

    /* ── Camera-eye · video-evidence indicator ─────────────────────────────
       A small video-camera icon with an eye in the lens, shown next to a
       Promise, Spotlight item or Issue Position whenever a verified
       floor/committee video is attached. Gold with a soft glow to fit the dark
       patriotic theme; subtle at rest, brightens and lifts on hover. It reads
       as a plain "tap to watch" action and is a one-tap link straight to the
       recorded video (with timestamp). */
    .pdx-eye {
      display: inline-flex; align-items: center; justify-content: center;
      width: 1.15rem; height: 1.15rem; flex-shrink: 0; vertical-align: middle;
      color: #f5c842; cursor: pointer; text-decoration: none;
      filter: drop-shadow(0 0 4px rgba(245,200,66,0.6));
      transition: color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
    }
    .pdx-eye:hover, .pdx-eye:focus-visible {
      color: #ffe08a; outline: none; transform: scale(1.16);
      filter: drop-shadow(0 0 7px rgba(245,200,66,0.95));
    }
    .pdx-eye svg { width: 100%; height: 100%; display: block; }
    .pdx-eye-sr {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    .sag-eye { width: 0.95rem; height: 0.95rem; margin-left: 0.32rem; }

    /* Bold gold "Watch Video" pill — the unmissable form of the eye used inside
       rows that are themselves buttons (Stance at a Glance, Home Team). Solid
       gold so video evidence reads as the strongest call to action on the row. */
    .pdx-watch-pill {
      display: inline-flex; align-items: center; gap: 0.3rem;
      padding: 0.28rem 0.55rem; border-radius: 999px;
      background: linear-gradient(135deg, #ffe486, #e6b800);
      color: #1a1206; border: 1px solid rgba(245,200,66,0.75);
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer; white-space: nowrap; line-height: 1;
      box-shadow: 0 2px 10px rgba(245,158,11,0.32);
      transition: box-shadow 0.15s ease, transform 0.12s ease;
    }
    .pdx-watch-pill:hover, .pdx-watch-pill:focus-visible {
      outline: none; transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(245,158,11,0.55);
    }
    .pdx-watch-pill-eye {
      width: 0.9rem; height: 0.9rem; color: #1a1206; filter: none; flex-shrink: 0;
    }
    .pdx-watch-pill:hover .pdx-watch-pill-eye { transform: none; }
    .pdx-watch-pill-ts { font-size: 0.56rem; font-weight: 700; opacity: 0.82; letter-spacing: 0.02em; }

    /* ── Evidence surfacing · card row + modal banner ──────────────────────
       The shared gold All-Seeing Eye + direct "Watch" jump to the strongest clip
       + one-tap "See Evidence" (into the pre-filtered Evidence Locker), reused on
       every politician card and modal so video proof and the on-record file are
       obvious at a glance and reachable in one or two taps from anywhere a voter
       is browsing. Buttons are sized for thumbs; everything stays silent when
       there's nothing on record so the cue never reads as empty. */
    .pdx-evrow {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
      margin-top: 0.6rem;
    }
    .pdx-evrow-watch, .pdx-evrow-see {
      display: inline-flex; align-items: center; gap: 0.34rem;
      min-height: 38px; padding: 0.4rem 0.7rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
      border-radius: 0.55rem; cursor: pointer; white-space: nowrap;
      text-decoration: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.12s ease;
    }
    .pdx-evrow-watch {
      color: #1a1206; background: linear-gradient(135deg, #ffe486, #e6b800);
      border: 1px solid rgba(245,200,66,0.8); box-shadow: 0 2px 12px rgba(245,158,11,0.3);
    }
    .pdx-evrow-watch:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(245,158,11,0.55); }
    .pdx-evrow-watch .pdx-eye { color: #1a1206; filter: none; }
    .pdx-evrow-eye { width: 1.15rem; height: 1.15rem; }
    .pdx-evrow-ts { color: #4a3a12; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
    .pdx-evrow-see {
      color: #f6d873; background: rgba(245,200,66,0.1);
      border: 1px solid rgba(245,200,66,0.45);
    }
    .pdx-evrow-see.is-solo { background: rgba(245,200,66,0.14); border-color: rgba(245,200,66,0.5); color: #ffe486; }
    .pdx-evrow-see:hover { border-color: rgba(245,200,66,0.7); box-shadow: 0 0 10px rgba(245,200,66,0.18); }
    .pdx-evrow-see-eye { width: 0.95rem; height: 0.95rem; }
    .pdx-evrow-see-n {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem;
      background: rgba(245,200,66,0.22); border-radius: 999px;
      font-size: 0.66rem; color: #ffe486;
    }

    /* Modal evidence banner — weightier; leads the medium + full profile. */
    .pdx-evb {
      display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
      background: linear-gradient(135deg, rgba(245,200,66,0.12) 0%, rgba(19,33,63,0.55) 60%);
      border: 1px solid rgba(245,200,66,0.34); border-radius: 0.85rem;
      padding: 0.8rem 0.95rem; margin-bottom: 1.1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px rgba(245,200,66,0.08);
    }
    .pdx-evb-icon {
      width: 42px; height: 42px; flex-shrink: 0; border-radius: 0.6rem;
      background: rgba(245,200,66,0.16); border: 1px solid rgba(245,200,66,0.34);
      display: flex; align-items: center; justify-content: center;
    }
    .pdx-evb-icon-eye { width: 1.5rem; height: 1.5rem; }
    .pdx-evb-main { flex: 1; min-width: 150px; }
    .pdx-evb-kicker {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #f5c842;
    }
    .pdx-evb-headline {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem;
      letter-spacing: 0.02em; color: #fff; line-height: 1.15;
    }
    .pdx-evb-counts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
    .pdx-evb-chip {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #9fb4d4; background: rgba(159,180,212,0.1);
      border: 1px solid rgba(159,180,212,0.22); padding: 0.12rem 0.45rem; border-radius: 999px;
    }
    .pdx-evb-chip.is-video { color: #ffe486; background: rgba(245,200,66,0.16); border-color: rgba(245,200,66,0.42); }
    .pdx-evb-chip-eye { width: 0.9rem; height: 0.9rem; }
    .pdx-evb-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; flex-shrink: 0; }
    .pdx-evb-watch, .pdx-evb-see {
      display: inline-flex; align-items: center; gap: 0.34rem;
      min-height: 38px; padding: 0.4rem 0.8rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase;
      border-radius: 0.6rem; cursor: pointer; white-space: nowrap; text-decoration: none;
      transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .pdx-evb-watch { color: #0a0f1e; background: #f5c842; border: 1px solid #f5c842; }
    .pdx-evb-watch:hover { box-shadow: 0 0 16px rgba(245,200,66,0.4); }
    .pdx-evb-watch-ico { font-size: 0.8rem; }
    .pdx-evb-ts { font-size: 0.66rem; opacity: 0.85; text-transform: none; letter-spacing: 0.02em; }
    /* Evidence-blue = "jump into the curated evidence file" (pairs with the blue
       depth pills). Gold stays the eye/video language above. */
    .pdx-evb-see { color: #bfdbfe; background: rgba(96,165,250,0.13); border: 1px solid rgba(96,165,250,0.42); }
    .pdx-evb-see:hover { border-color: rgba(96,165,250,0.7); box-shadow: 0 0 12px rgba(96,165,250,0.22); }
    .pdx-evb-see.is-primary { color: #06121f; background: #60a5fa; border-color: #60a5fa; }
    .pdx-evb-see.is-primary:hover { box-shadow: 0 0 16px rgba(96,165,250,0.4); }
    /* Clickable evidence count — the headline itself opens the filtered Locker. */
    .pdx-evb-headline-btn {
      display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
      background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left;
    }
    .pdx-evb-headline-btn:hover .pdx-evb-headline {
      text-decoration: underline; text-decoration-color: rgba(96,165,250,0.75); text-underline-offset: 3px;
    }
    .pdx-evb-headline-cue {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: #93b4e6;
      background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.4);
      border-radius: 999px; padding: 0.06rem 0.4rem; line-height: 1.25; white-space: nowrap;
    }
    /* Featured-video context line — which issue the strongest clip ties to. */
    .pdx-evb-vctx {
      display: inline-flex; align-items: center; gap: 0.32rem; margin-top: 0.45rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.66rem; letter-spacing: 0.04em; color: #cbb877;
    }
    .pdx-evb-vctx-ico { color: #f5c842; font-size: 0.7rem; }
    .pdx-evb-vctx-ts { color: #9fb4d4; font-weight: 700; }
    /* Low-key full-width "browse all evidence" link along the bottom edge. */
    .pdx-evb-browse {
      flex-basis: 100%; width: 100%; margin-top: 0.7rem;
      display: inline-flex; align-items: center; gap: 0.32rem;
      background: none; border: none; border-top: 1px solid rgba(96,165,250,0.18);
      padding: 0.55rem 0.1rem 0.05rem; cursor: pointer; text-align: left;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.04em; color: #93b4e6;
      transition: color 0.15s ease;
    }
    .pdx-evb-browse:hover { color: #bfdbfe; }
    @media (max-width: 520px) {
      .pdx-evb-actions { width: 100%; }
      .pdx-evb-watch, .pdx-evb-see { flex: 1; justify-content: center; }
    }

    /* ── View Full Stance Record — prominent CTA + overlay ──────────────────
       Evidence-blue = "go deeper into the curated evidence." The CTA is loud
       enough to be impossible to miss but stays muted-fill conservative; the
       overlay is the complete per-issue record (every issue, evidence depth,
       honest "No record yet"). */
    .pdx-fsr-wrap { margin-bottom: 1.25rem; }
    .pdx-fsr-btn {
      width: 100%; display: flex; align-items: center; gap: 1rem; cursor: pointer;
      text-align: left; border-radius: 0.9rem; padding: 1.05rem 1.15rem;
      background: linear-gradient(135deg, rgba(96,165,250,0.3) 0%, rgba(19,33,63,0.62) 70%);
      border: 1.5px solid rgba(96,165,250,0.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 26px rgba(96,165,250,0.22);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    .pdx-fsr-btn:hover { border-color: rgba(96,165,250,0.95); box-shadow: 0 0 30px rgba(96,165,250,0.34); transform: translateY(-1px); }
    .pdx-fsr-btn:active { transform: translateY(0); }
    .pdx-fsr-ico {
      width: 50px; height: 50px; flex-shrink: 0; border-radius: 0.65rem; font-size: 1.55rem;
      background: rgba(96,165,250,0.24); border: 1px solid rgba(96,165,250,0.55);
      display: flex; align-items: center; justify-content: center;
    }
    .pdx-fsr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.14rem; }
    .pdx-fsr-kicker {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: #a6c5f2;
    }
    .pdx-fsr-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.55rem; letter-spacing: 0.03em; color: #fff; line-height: 1.08; }
    .pdx-fsr-stat {
      display: inline-flex; align-items: center; gap: 0.28rem; align-self: flex-start; margin-top: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: #dbe9ff;
      background: rgba(96,165,250,0.2); border: 1px solid rgba(96,165,250,0.55);
      border-radius: 999px; padding: 0.16rem 0.6rem; line-height: 1.3;
    }
    .pdx-fsr-stat .pdx-fsr-dot { color: #7fa0cc; }
    .pdx-fsr-go {
      flex-shrink: 0; white-space: nowrap; font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #06121f; background: #60a5fa; border-radius: 0.65rem; padding: 0.58rem 1.05rem;
      box-shadow: 0 4px 14px rgba(96,165,250,0.32);
    }
    /* Secondary, quieter in-context jump to the full record (Key Issue Stances header). */
    .pdx-fsr-mini {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem;
      letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
      color: #bfdbfe; background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.4);
      border-radius: 999px; padding: 0.16rem 0.6rem; line-height: 1.3;
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .pdx-fsr-mini:hover { color: #eaf2ff; border-color: rgba(96,165,250,0.78); background: rgba(96,165,250,0.22); }
    /* Optional low-key teaser below the last visible stance. */
    .pdx-fsr-teaser {
      display: block; width: 100%; text-align: left; cursor: pointer; margin-top: 0.65rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; letter-spacing: 0.02em;
      color: #7596c0; background: none; border: none; padding: 0.1rem 0;
      transition: color 0.15s ease;
    }
    .pdx-fsr-teaser:hover { color: #bfdbfe; }
    .pdx-fsr-teaser b { color: #9fb4d4; font-weight: 700; }
    .pdx-fsr-teaser .pdx-fsr-teaser-go { color: #60a5fa; font-weight: 700; }
    @media (max-width: 480px) {
      .pdx-fsr-go { padding: 0.5rem 0.75rem; font-size: 0.72rem; }
      .pdx-fsr-title { font-size: 1.32rem; }
      .pdx-fsr-ico { width: 44px; height: 44px; font-size: 1.4rem; }
    }

    .pdx-record-overlay {
      position: fixed; inset: 0; z-index: 72;
      background: rgba(0,0,0,0.74); backdrop-filter: blur(6px);
      display: flex; align-items: flex-start; justify-content: center;
      padding: 1.5rem 1rem; overflow-y: auto; animation: pdxShareFade 0.18s ease;
    }
    .fsrec {
      width: 100%; max-width: 640px; margin: auto;
      background: linear-gradient(160deg,#13213f,#0a0f1e);
      border: 1px solid rgba(96,165,250,0.28); border-radius: 1rem;
      padding: 1.15rem 1.2rem 1.3rem; box-shadow: 0 24px 60px rgba(0,0,0,0.7);
      animation: pdxShareRise 0.22s cubic-bezier(0.34,1.1,0.64,1);
    }
    .fsrec-head { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.85rem; }
    .fsrec-headwrap { flex: 1; min-width: 0; }
    .fsrec-eyebrow {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.58rem;
      letter-spacing: 0.12em; text-transform: uppercase; color: #93b4e6;
    }
    .fsrec-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.03em; color: #fff; line-height: 1.12; }
    .fsrec-office { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; color: #7596c0; letter-spacing: 0.03em; margin-top: 0.1rem; }
    .fsrec-x { background: none; border: none; color: #7596c0; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0.25rem; flex-shrink: 0; }
    .fsrec-x:hover { color: #fff; }
    /* Prominent Evidence-blue header action — the one obvious jump into the full
       evidence file, filtered to this politician. */
    .fsrec-head-locker {
      display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem;
      cursor: pointer; border-radius: 999px; padding: 0.3rem 0.75rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #06121f;
      background: #60a5fa; border: 1px solid #60a5fa;
      transition: box-shadow 0.15s ease, background 0.15s ease;
    }
    .fsrec-head-locker:hover { background: #7db4fb; box-shadow: 0 0 16px rgba(96,165,250,0.4); }
    .fsrec-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; }
    .fsrec-sum-chip {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #9fb4d4;
      background: rgba(159,180,212,0.1); border: 1px solid rgba(159,180,212,0.24);
      border-radius: 999px; padding: 0.16rem 0.55rem;
    }
    .fsrec-sum-chip b { color: #fff; }
    .fsrec-sum-chip.is-ev { color: #bfdbfe; background: rgba(96,165,250,0.13); border-color: rgba(96,165,250,0.4); }
    .fsrec-sum-chip.is-ev b { color: #dbe9ff; }
    .fsrec-sum-chip.is-thin { color: #8aa0c0; }
    /* Community-discussion count — gold accent (the site's community language) and
       tappable into the comment thread. Pushed to the right end of the stat row. */
    button.fsrec-sum-chip { cursor: pointer; line-height: 1.3; }
    .fsrec-sum-chip.is-community {
      margin-left: auto; color: #f5d58a; background: rgba(245,200,66,0.12); border-color: rgba(245,200,66,0.38);
    }
    .fsrec-sum-chip.is-community b { color: #ffe486; }
    button.fsrec-sum-chip.is-community:hover { border-color: rgba(245,200,66,0.65); color: #ffe486; }
    .fsrec-sum-community { margin-left: auto; }
    .fsrec-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.7rem; margin-bottom: 0.6rem; }
    .fsrec-sortset { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
    .fsrec-filterset { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-left: auto; }
    .fsrec-ctrl-lbl {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: #6b89b5; margin-right: 0.1rem;
    }
    .fsrec-sortbtn, .fsrec-filterbtn {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.64rem;
      letter-spacing: 0.04em; cursor: pointer; border-radius: 999px; padding: 0.22rem 0.6rem;
      color: #9fb4d4; background: rgba(159,180,212,0.08); border: 1px solid rgba(159,180,212,0.22);
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .fsrec-sortbtn:hover, .fsrec-filterbtn:hover { color: #cfe0f6; border-color: rgba(159,180,212,0.4); }
    .fsrec-sortbtn.is-on { color: #06121f; background: #60a5fa; border-color: #60a5fa; }
    .fsrec-filterbtn.is-on { color: #bfdbfe; background: rgba(96,165,250,0.13); border-color: rgba(96,165,250,0.42); }
    /* Segmented Show filter — one grouped pill so All / With evidence / Gaps only
       read as a single scannable control rather than loose buttons. */
    .fsrec-seg {
      display: inline-flex; align-items: center; border-radius: 999px; overflow: hidden;
      border: 1px solid rgba(159,180,212,0.24); background: rgba(159,180,212,0.06);
    }
    .fsrec-segbtn {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.04em; cursor: pointer; padding: 0.22rem 0.62rem; color: #9fb4d4;
      background: none; border: none; border-left: 1px solid rgba(159,180,212,0.18);
      transition: color 0.15s ease, background 0.15s ease;
    }
    .fsrec-segbtn:first-child { border-left: none; }
    .fsrec-segbtn:hover { color: #cfe0f6; }
    .fsrec-segbtn.is-on { color: #06121f; background: #60a5fa; }
    .fsrec-segbtn.is-on.is-gaps { color: #06121f; background: #f5d58a; }
    .fsrec-result-note { font-size: 0.68rem; color: #6b89b5; margin: 0 0 0.7rem; letter-spacing: 0.02em; }
    .fsrec-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .fsrec-row {
      display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; text-align: left;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 0.7rem; padding: 0.7rem 0.8rem;
    }
    .fsrec-row.is-click { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
    .fsrec-row.is-click:hover { border-color: rgba(96,165,250,0.45); background: rgba(96,165,250,0.06); }
    .fsrec-row-ico { font-size: 1.05rem; line-height: 1.3; flex-shrink: 0; }
    .fsrec-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
    .fsrec-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
    .fsrec-row-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; color: #e6eefb; }
    .fsrec-row-text { font-size: 0.76rem; color: #9fb4d4; line-height: 1.5; }
    .fsrec-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
    .fsrec-row-go { flex-shrink: 0; color: #6b89b5; font-size: 0.85rem; align-self: center; }
    .fsrec-row.is-click:hover .fsrec-row-go { color: #93b4e6; }
    .fsrec-badge {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem;
      letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.1rem 0.45rem; line-height: 1.3;
    }
    .fsrec-badge.fsrec-support  { color: #a7f3d0; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.34); }
    .fsrec-badge.fsrec-oppose   { color: #fca5a5; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.34); }
    .fsrec-badge.fsrec-mixed    { color: #93c5fd; background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.34); }
    .fsrec-badge.fsrec-tracking { color: #cbd5e1; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.32); }
    .fsrec-chip {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.58rem;
      letter-spacing: 0.04em; text-transform: uppercase; color: #9fb4d4;
      background: rgba(159,180,212,0.1); border: 1px solid rgba(159,180,212,0.22);
      border-radius: 999px; padding: 0.1rem 0.45rem;
    }
    .fsrec-chip.is-video { color: #ffe486; background: rgba(245,200,66,0.14); border-color: rgba(245,200,66,0.4); }
    .fsrec-norec {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.58rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #6b7f9e;
      background: rgba(107,127,158,0.1); border: 1px dashed rgba(107,127,158,0.4);
      border-radius: 999px; padding: 0.1rem 0.5rem;
    }
    /* Quiet "Suggest a receipt" cue — Evidence-blue, deliberately smaller and more
       muted than the row's primary links, so a visible gap reads as a gentle
       on-ramp into the Community Exchange rather than a loud call to action.
       Shared across the Full Stance Record, thin profiles and the Evidence
       Locker's single-politician view. */
    .fsrec-suggest {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.55rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #7fa8db;
      background: rgba(96,165,250,0.07); border: 1px solid rgba(96,165,250,0.26);
      border-radius: 999px; padding: 0.1rem 0.5rem; line-height: 1.3; cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.2rem;
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .fsrec-suggest:hover, .fsrec-suggest:focus-visible {
      color: #bfdbfe; border-color: rgba(96,165,250,0.55); background: rgba(96,165,250,0.15); outline: none;
    }
    /* Variant of the "no record" tag for rows that DO carry evidence but no
       summarised position yet — solid (not dashed) so it reads as informational. */
    .fsrec-norec.is-soft { border-style: solid; color: #7e93b4; }
    /* Larger sibling cue used in the thin-profile empty state and the Evidence
       Locker low-receipt issue groups. Same Evidence-blue, still quiet. */
    .pdx-suggest-cue {
      display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem;
      letter-spacing: 0.03em; color: #8fb3e6; background: rgba(96,165,250,0.08);
      border: 1px solid rgba(96,165,250,0.28); border-radius: 999px; padding: 0.3rem 0.72rem;
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .pdx-suggest-cue:hover, .pdx-suggest-cue:focus-visible {
      color: #cfe2ff; border-color: rgba(96,165,250,0.55); background: rgba(96,165,250,0.16); outline: none;
    }
    .el-suggest-more { margin: 0.6rem 0 0.2rem; }
    .fsrec-hidden-note { font-size: 0.7rem; color: #6b89b5; text-align: center; margin: 0.6rem 0 0; }
    .fsrec-locker {
      width: 100%; margin-top: 0.85rem; cursor: pointer; border-radius: 0.7rem; padding: 0.65rem 0.9rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #bfdbfe;
      background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.42);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .fsrec-locker:hover { border-color: rgba(96,165,250,0.7); box-shadow: 0 0 14px rgba(96,165,250,0.2); }
    .fsrec-foot { font-size: 0.68rem; color: #6b89b5; line-height: 1.55; margin: 0.85rem 0 0; }
    .fsrec-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; padding: 1.5rem 1rem; }
    .fsrec-empty span { font-size: 1.7rem; }
    .fsrec-empty p { font-size: 0.82rem; color: #9fb4d4; line-height: 1.6; margin: 0; }

    /* ── In-app video player ───────────────────────────────────────────────
       Floor and committee citations used to open the heavy le.utah.gov desktop
       archive page in a new tab, whose video.js player is not set up for inline
       mobile playback (no playsinline) and whose seek-to-marker relies on its
       own scripts — so on phones the clip often never started. Instead we now
       play the underlying HLS recording directly in this dark/gold overlay,
       seeked to the exact moment, with the official archive always one tap away
       as a fallback. */
    .pdx-vid-modal {
      position: fixed; inset: 0; z-index: 100000;
      display: flex; align-items: center; justify-content: center;
      padding: clamp(0px, 2vw, 24px);
    }
    .pdx-vid-modal[hidden] { display: none; }
    .pdx-vid-backdrop {
      position: absolute; inset: 0;
      background: rgba(4,8,18,0.86); backdrop-filter: blur(4px);
    }
    .pdx-vid-box {
      position: relative; z-index: 1; width: 100%; max-width: 940px;
      max-height: 96vh; display: flex; flex-direction: column;
      background: linear-gradient(160deg, #101b34 0%, #0a0f1e 70%);
      border: 1px solid rgba(245,200,66,0.42); border-radius: 0.9rem;
      box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 32px rgba(245,200,66,0.12);
      overflow: hidden;
    }
    .pdx-vid-head {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.7rem 0.95rem; border-bottom: 1px solid rgba(245,200,66,0.22);
    }
    .pdx-vid-head .pdx-eye { width: 1.35rem; height: 1.35rem; }
    .pdx-vid-htext { flex: 1; min-width: 0; }
    .pdx-vid-kicker {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #f5c842;
    }
    .pdx-vid-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: #fff;
      letter-spacing: 0.02em; line-height: 1.15;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pdx-vid-ts { color: #f6d873; font-weight: 700; font-size: 0.78rem; }
    .pdx-vid-close {
      flex-shrink: 0; width: 38px; height: 38px; border-radius: 0.55rem;
      background: rgba(245,200,66,0.1); border: 1px solid rgba(245,200,66,0.4);
      color: #f5c842; font-size: 1.5rem; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .pdx-vid-close:hover { background: rgba(245,200,66,0.2); box-shadow: 0 0 12px rgba(245,200,66,0.3); }
    .pdx-vid-stage {
      position: relative; background: #000;
      aspect-ratio: 16 / 9; width: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .pdx-vid-el { width: 100%; height: 100%; display: block; background: #000; }
    .pdx-vid-state {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.85rem;
      text-align: center; padding: 1.2rem; color: #cdd8ee;
    }
    .pdx-vid-state[hidden] { display: none; }
    .pdx-vid-spinner {
      width: 38px; height: 38px; border-radius: 50%;
      border: 3px solid rgba(245,200,66,0.25); border-top-color: #f5c842;
      animation: pdxVidSpin 0.8s linear infinite;
    }
    @keyframes pdxVidSpin { to { transform: rotate(360deg); } }
    .pdx-vid-state-msg { font-size: 0.9rem; max-width: 28rem; }
    .pdx-vid-open-official {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.6rem 1.1rem; border-radius: 0.6rem;
      background: #f5c842; color: #0a0f1e; border: 1px solid #f5c842;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase;
      text-decoration: none; cursor: pointer;
      transition: box-shadow 0.15s ease;
    }
    .pdx-vid-open-official:hover { box-shadow: 0 0 18px rgba(245,200,66,0.45); }
    .pdx-vid-foot {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 0.95rem;
      font-size: 0.74rem; color: #8fa3c4;
    }
    .pdx-vid-foot a { color: #f6d873; text-decoration: none; font-weight: 600; }
    .pdx-vid-foot a:hover { text-decoration: underline; }
    body.pdx-vid-open { overflow: hidden; }

    /* ── Stance evidence popover ───────────────────────────────────────────
       Opens above the profile modal when a glance row is tapped, showing every
       promise and on-record item tied to that one issue. */
    .sag-pop-overlay {
      position: fixed; inset: 0; z-index: 70;
      background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem; animation: pdxShareFade 0.18s ease;
    }
    .sag-pop {
      width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto;
      background: linear-gradient(160deg,#13213f,#0a0f1e);
      border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem;
      padding: 1.15rem 1.2rem 1.25rem; box-shadow: 0 24px 60px rgba(0,0,0,0.7);
      animation: pdxShareRise 0.22s cubic-bezier(0.34,1.1,0.64,1);
    }
    .sag-pop-head { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.2rem; }
    .sag-pop-ico { font-size: 1.35rem; line-height: 1.1; flex-shrink: 0; }
    .sag-pop-titlewrap { flex: 1; min-width: 0; }
    .sag-pop-eyebrow {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.55rem;
      letter-spacing: 0.12em; text-transform: uppercase; color: #7596c0;
    }
    .sag-pop-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: 0.03em; color: #fff; line-height: 1.1; }
    .sag-pop-x { background: none; border: none; color: #7596c0; font-size: 1.05rem; cursor: pointer; line-height: 1; padding: 0.25rem; flex-shrink: 0; }
    .sag-pop-x:hover { color: #fff; }
    .sag-pop-stance {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
      margin: 0.65rem 0 0.5rem;
    }
    .sag-pop-text { font-size: 0.82rem; color: #cbd9ec; line-height: 1.6; margin: 0 0 0.5rem; }
    .sag-pop-detail { font-size: 0.74rem; color: #8ba6cc; line-height: 1.55; margin: 0 0 0.5rem; }
    .sag-pop-record {
      font-size: 0.7rem; color: #7596c0; line-height: 1.5; margin: 0 0 0.7rem;
      padding: 0.5rem 0.6rem; background: rgba(10,15,30,0.6); border-radius: 0.55rem;
      border: 1px solid rgba(159,180,212,0.14);
    }
    .sag-pop-record .sag-pop-rlabel {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.55rem;
      letter-spacing: 0.08em; text-transform: uppercase; color: #4e72a0; margin-right: 0.3rem;
    }
    .sag-pop-grouph {
      display: flex; align-items: center; gap: 0.4rem; margin: 0.85rem 0 0.45rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0;
    }
    .sag-pop-grouph .sag-pop-groupn {
      font-size: 0.52rem; color: #4e72a0; background: rgba(159,180,212,0.1);
      border-radius: 999px; padding: 0.05rem 0.4rem;
    }
    .sag-pop-prom { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.42rem 0; }
    .sag-pop-prom + .sag-pop-prom { border-top: 1px dashed rgba(159,180,212,0.12); }
    .sag-pop-prom-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; margin-top: 0.28rem; }
    .sag-pop-prom-dot.kept { background: #4ade80; } .sag-pop-prom-dot.broken { background: #f87171; }
    .sag-pop-prom-dot.pending { background: #f5c842; } .sag-pop-prom-dot.compromise { background: #60a5fa; }
    .sag-pop-prom-body { flex: 1; min-width: 0; font-size: 0.76rem; color: #cbd9ec; line-height: 1.45; }
    .sag-pop-prom-verdict {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.54rem;
      letter-spacing: 0.06em; text-transform: uppercase; margin-left: 0.35rem;
    }
    .sag-pop-prom-verdict.kept { color: #4ade80; } .sag-pop-prom-verdict.broken { color: #f87171; }
    .sag-pop-prom-verdict.pending { color: #f5c842; } .sag-pop-prom-verdict.compromise { color: #60a5fa; }
    .sag-pop-spot { padding: 0.5rem 0; }
    .sag-pop-spot + .sag-pop-spot { border-top: 1px dashed rgba(159,180,212,0.12); }
    .sag-pop-spot-head { display: flex; align-items: flex-start; gap: 0.4rem; }
    .sag-pop-spot-impact { font-size: 0.8rem; line-height: 1.3; flex-shrink: 0; }
    .sag-pop-spot-impact.positive { color: #4ade80; } .sag-pop-spot-impact.negative { color: #f87171; }
    .sag-pop-spot-impact.neutral { color: #9fb4d4; }
    .sag-pop-spot-headline { font-size: 0.76rem; color: #cbd9ec; line-height: 1.45; }
    .sag-pop-spot-date { color: #5f7da6; font-weight: 400; }
    .sag-pop-spot-links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; padding-left: 1.2rem; }
    .sag-pop-link {
      display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem;
      letter-spacing: 0.05em; text-transform: uppercase;
      padding: 0.13rem 0.5rem; border-radius: 999px; white-space: nowrap;
      color: #93c5fd; background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.32);
    }
    .sag-pop-link:hover { background: rgba(96,165,250,0.22); }
    .sag-pop-link.is-video { color: #f5c842; background: rgba(245,200,66,0.12); border-color: rgba(245,200,66,0.35); }
    .sag-pop-empty {
      display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.4rem;
      font-size: 0.74rem; color: #8ba6cc; line-height: 1.55;
      background: rgba(10,15,30,0.55); border: 1px dashed rgba(159,180,212,0.2);
      border-radius: 0.6rem; padding: 0.6rem 0.7rem;
    }
    .sag-pop-foot { font-size: 0.64rem; color: #5f7da6; line-height: 1.5; margin: 0.85rem 0 0; font-family: 'Barlow Condensed', sans-serif; }
    .sag-pop-jump {
      display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.7rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #f5c842;
      background: rgba(245,200,66,0.1); border: 1px solid rgba(245,200,66,0.35);
      border-radius: 0.6rem; padding: 0.45rem 0.7rem;
    }
    .sag-pop-jump:hover { background: rgba(245,200,66,0.18); }
    .sag-pop-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .sag-pop-actions .sag-pop-jump { margin-top: 0.7rem; }
    .sag-pop-jump.is-locker {
      color: #9fc6f0; background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.38);
    }
    .sag-pop-jump.is-locker:hover { background: rgba(96,165,250,0.2); }
    /* The People's Mandate jump — a solid gold CTA so the stance → reform leg of
       the thread reads as the headline next step, not just another link. */
    .sag-pop-jump.is-mandate {
      color: #0a0f1e; background: linear-gradient(135deg,#f5c842,#e0a82e);
      border-color: rgba(245,200,66,0.6); box-shadow: 0 2px 10px rgba(245,200,66,0.22);
    }
    .sag-pop-jump.is-mandate:hover { filter: brightness(1.08); background: linear-gradient(135deg,#f5c842,#e0a82e); }

    /* ── Connected Evidence panel ──────────────────────────────────────────
       The visible payoff of the shared issue-key vocabulary: for each issue,
       the official's own stance shown beside the promises and recorded
       statements/actions tagged to that SAME issue, so a reader can see at a
       glance whether the record backs, complicates, or cuts against the stance.
       Built only from the politician's own documented positions, promises and
       Spotlight items — never their party's. */
    .evd-summary {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem;
    }
    .evd-sum-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.03em;
      color: #cbd9ec; background: rgba(30,53,96,0.5); border: 1px solid rgba(159,180,212,0.22);
      border-radius: 999px; padding: 0.18rem 0.6rem; white-space: nowrap;
    }
    .evd-sum-chip .evd-sum-ico { font-size: 0.8rem; line-height: 1; }

    .evd-card {
      background: rgba(10,15,30,0.55); border: 1px solid rgba(255,255,255,0.07);
      border-left-width: 3px; border-left-color: rgba(159,180,212,0.3);
      border-radius: 0.8rem; padding: 0.85rem 0.9rem; margin-bottom: 0.7rem;
    }
    .evd-card:last-child { margin-bottom: 0; }
    .evd-card.evd-backs { border-left-color: rgba(74,222,128,0.65); }
    .evd-card.evd-cuts  { border-left-color: rgba(248,113,113,0.65); }
    .evd-card.evd-mixed { border-left-color: rgba(96,165,250,0.65); }
    .evd-card.evd-progress { border-left-color: rgba(245,200,66,0.6); }
    .evd-card.evd-gap   { border-left-color: rgba(167,139,250,0.6); }
    .evd-card.evd-thin  { border-left-color: rgba(159,180,212,0.35); }

    .evd-head {
      display: flex; align-items: center; gap: 0.45rem;
      flex-wrap: wrap; margin-bottom: 0.6rem;
    }
    .evd-head-ico { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
    .evd-head-label {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.92rem; color: #fff; letter-spacing: 0.01em; min-width: 0;
    }
    .evd-read {
      margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.16rem 0.5rem; border-radius: 999px; border: 1px solid; white-space: nowrap;
    }
    .evd-read.evd-backs { background: rgba(74,222,128,0.14); color: #4ade80; border-color: rgba(74,222,128,0.32); }
    .evd-read.evd-cuts  { background: rgba(248,113,113,0.14); color: #f87171; border-color: rgba(248,113,113,0.32); }
    .evd-read.evd-mixed { background: rgba(96,165,250,0.14); color: #60a5fa; border-color: rgba(96,165,250,0.32); }
    .evd-read.evd-progress { background: rgba(245,200,66,0.14); color: #f5c842; border-color: rgba(245,200,66,0.32); }
    .evd-read.evd-gap   { background: rgba(139,92,246,0.16); color: #c4b5fd; border-color: rgba(167,139,250,0.36); }
    .evd-read.evd-thin  { background: rgba(159,180,212,0.12); color: #9fb4d4; border-color: rgba(159,180,212,0.26); }

    /* Per-issue deep link into the Evidence Locker, pre-filtered to this
       official + issue. Sits under the lanes; only shown when on-record items
       exist (the Locker holds recorded evidence, not the promise ledger). */
    .evd-locker-link {
      display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.58rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #9fc6f0;
      background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.32);
      border-radius: 999px; padding: 0.2rem 0.6rem;
    }
    .evd-locker-link:hover { background: rgba(96,165,250,0.2); color: #cfe3fb; }

    /* Three evidence lanes: stance · promises · recorded — side by side where
       there's room, stacking on narrow screens for a clean mobile read. */
    .evd-lanes {
      display: grid; gap: 0.6rem;
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    }
    .evd-lane {
      background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
      border-radius: 0.6rem; padding: 0.6rem 0.65rem; min-width: 0;
    }
    .evd-lane-h {
      display: flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase; color: #7596c0;
      margin-bottom: 0.5rem; padding-bottom: 0.32rem; border-bottom: 1px solid rgba(159,180,212,0.1);
    }
    .evd-lane-h .evd-lane-n {
      margin-left: auto; font-size: 0.52rem; color: #4e72a0;
      background: rgba(159,180,212,0.1); border-radius: 999px; padding: 0.04rem 0.38rem;
    }
    .evd-stance-badge {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.12rem 0.42rem; border-radius: 999px; white-space: nowrap; margin-bottom: 0.4rem;
    }
    .evd-stance-text { font-size: 0.74rem; color: #9fb4d4; line-height: 1.55; margin: 0; }
    .evd-empty-line { font-size: 0.72rem; color: #6f86a8; line-height: 1.5; font-style: italic; }

    /* Promise rows — verdict-keyed dot + title */
    .evd-prom {
      display: flex; align-items: flex-start; gap: 0.4rem;
      font-size: 0.74rem; color: #b9cae0; line-height: 1.45; padding: 0.22rem 0;
    }
    .evd-prom + .evd-prom { border-top: 1px solid rgba(159,180,212,0.08); }
    .evd-prom-dot {
      flex-shrink: 0; margin-top: 0.18rem; width: 0.62rem; height: 0.62rem; border-radius: 999px;
    }
    .evd-prom-dot.kept    { background: #4ade80; box-shadow: 0 0 5px rgba(74,222,128,0.5); }
    .evd-prom-dot.broken  { background: #f87171; box-shadow: 0 0 5px rgba(248,113,113,0.5); }
    .evd-prom-dot.pending { background: #f5c842; box-shadow: 0 0 5px rgba(245,200,66,0.45); }
    .evd-prom-verdict {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.52rem;
      letter-spacing: 0.06em; text-transform: uppercase; margin-left: 0.15rem;
    }
    .evd-prom-verdict.kept { color: #4ade80; } .evd-prom-verdict.broken { color: #f87171; } .evd-prom-verdict.pending { color: #f5c842; }

    /* Recorded items — headline + media/source links */
    .evd-spot { padding: 0.3rem 0; }
    .evd-spot + .evd-spot { border-top: 1px solid rgba(159,180,212,0.08); }
    .evd-spot-head { display: flex; align-items: flex-start; gap: 0.35rem; }
    .evd-spot-impact {
      flex-shrink: 0; margin-top: 0.12rem; font-size: 0.7rem; line-height: 1; width: 0.85rem; text-align: center;
    }
    .evd-spot-impact.positive { color: #4ade80; } .evd-spot-impact.negative { color: #f87171; } .evd-spot-impact.neutral { color: #7596c0; }
    .evd-spot-headline { font-size: 0.74rem; color: #cbd9ec; line-height: 1.45; }
    .evd-spot-links { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0 1.2rem; }
    .evd-media-link, .evd-src-link {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.02em; line-height: 1;
      padding: 0.22rem 0.5rem; border-radius: 999px; white-space: nowrap;
      text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .evd-media-link {
      color: #93c5fd; background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.32);
    }
    .evd-media-link.is-x { color: #e2e8f0; background: rgba(148,163,184,0.16); border-color: rgba(148,163,184,0.34); }
    .evd-src-link {
      color: #8ba6c9; background: rgba(30,53,96,0.6); border: 1px solid rgba(159,180,212,0.22);
    }
    @media (hover: hover) {
      .evd-media-link:hover { background: rgba(59,130,246,0.24); color: #bfdbfe; }
      .evd-src-link:hover   { background: rgba(30,53,96,0.95); color: #cbd9ec; }
    }
    .evd-foot-note {
      font-size: 0.7rem; color: #6f86a8; line-height: 1.5; margin: 0.7rem 0 0;
      padding-top: 0.6rem; border-top: 1px dashed rgba(159,180,212,0.14);
    }
    .evd-more-btn {
      display: block; width: 100%; margin-top: 0.6rem; padding: 0.5rem;
      background: rgba(30,53,96,0.4); border: 1px dashed rgba(159,180,212,0.25);
      border-radius: 0.6rem; color: #9fb4d4; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) { .evd-more-btn:hover { background: rgba(30,53,96,0.7); color: #cbd9ec; } }

    /* ── Lightweight like / dislike controls (issue positions & promises) ──
       A quiet, non-game-like sentiment row: two pill buttons with a live count.
       Neutral by default, with a soft patriotic blue glow on the active vote.
       Sized for comfortable thumb taps on mobile (min 30px tap target). */
    .pdx-vote {
      display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem;
      flex-wrap: wrap;
    }
    .pdx-vote-label {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #4e72a0; margin-right: 0.1rem;
    }
    .pdx-vote-btn {
      display: inline-flex; align-items: center; gap: 0.3rem;
      min-height: 30px; padding: 0.22rem 0.6rem;
      background: rgba(255,255,255,0.035); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 999px; cursor: pointer; color: #9fb4d4;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) {
      .pdx-vote-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(159,180,212,0.32); }
    }
    .pdx-vote-btn:active { transform: scale(0.93); }
    .pdx-vote-ico { font-size: 0.85rem; line-height: 1; }
    .pdx-vote-n { font-variant-numeric: tabular-nums; min-width: 0.6rem; text-align: left; }
    .pdx-vote-btn.pdx-like.is-active {
      background: rgba(96,165,250,0.16); border-color: rgba(96,165,250,0.5);
      color: #93c5fd; box-shadow: 0 0 10px rgba(96,165,250,0.18);
    }
    .pdx-vote-btn.pdx-dislike.is-active {
      background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.45);
      color: #fca5a5; box-shadow: 0 0 10px rgba(248,113,113,0.15);
    }

    /* ── Spotlight engagement: votes + collapsible comments (test) ──────────
       A single quiet row under each Spotlight card. Likes/dislikes sit inline
       with a compact "Comment" toggle; the thread stays hidden behind that
       toggle so the section reads as an integrity ledger, not a social feed.
       Everything is sized for comfortable thumb taps on mobile. */
    .pdx-engage { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid rgba(255,255,255,0.06); }
    .pdx-engage .pdx-vote { margin-top: 0; }
    .pdx-engage-bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
    .pdx-cmt-toggle {
      display: inline-flex; align-items: center; gap: 0.32rem;
      min-height: 30px; padding: 0.22rem 0.6rem;
      background: rgba(255,255,255,0.035); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 999px; cursor: pointer; color: #9fb4d4;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) {
      .pdx-cmt-toggle:hover { background: rgba(255,255,255,0.07); border-color: rgba(159,180,212,0.32); color: #c7d4e8; }
    }
    .pdx-cmt-toggle:active { transform: scale(0.93); }
    .pdx-cmt-toggle.has-cmt { color: #9fc6e8; border-color: rgba(96,165,250,0.32); background: rgba(96,165,250,0.08); }
    .pdx-cmt-open .pdx-cmt-toggle { color: #93c5fd; border-color: rgba(96,165,250,0.5); background: rgba(96,165,250,0.14); }
    .pdx-cmt-ico { font-size: 0.82rem; line-height: 1; }
    .pdx-cmt-tlabel { letter-spacing: 0.04em; }
    .pdx-cmt-n { font-variant-numeric: tabular-nums; min-width: 0.6rem; text-align: left; opacity: 0.9; }

    .pdx-cmt-panel { margin-top: 0.6rem; }
    .pdx-cmt-count {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #4e72a0; margin-bottom: 0.45rem;
    }
    .pdx-cmt-empty {
      font-size: 0.66rem; color: #6b86ad; line-height: 1.5;
      padding: 0.2rem 0 0.55rem; font-style: italic;
    }
    .pdx-cmt-row { display: flex; gap: 0.5rem; margin-bottom: 0.55rem; }
    .pdx-cmt-avatar {
      flex-shrink: 0; width: 1.55rem; height: 1.55rem; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; color: #fff; letter-spacing: 0;
    }
    .pdx-cmt-bubble {
      flex: 1; min-width: 0;
      background: rgba(10,15,30,0.55); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 0.6rem; padding: 0.4rem 0.6rem;
    }
    .pdx-cmt-meta { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.12rem; }
    .pdx-cmt-author {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.7rem; color: #c7d4e8; letter-spacing: 0.01em;
    }
    .pdx-cmt-time {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem;
      font-weight: 600; color: #4e72a0; letter-spacing: 0.03em;
    }
    .pdx-cmt-content { font-size: 0.7rem; color: #c7d4e8; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }

    .pdx-cmt-form { margin-top: 0.2rem; }
    .pdx-cmt-name, .pdx-cmt-text {
      width: 100%; box-sizing: border-box;
      background: rgba(10,15,30,0.6); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.5rem; color: #e3ecf7; font-size: 0.72rem;
      font-family: inherit; padding: 0.4rem 0.55rem; line-height: 1.45;
      transition: border-color 0.15s, background 0.15s;
    }
    .pdx-cmt-name { margin-bottom: 0.4rem; }
    .pdx-cmt-name::placeholder, .pdx-cmt-text::placeholder { color: #4e72a0; }
    .pdx-cmt-name:focus, .pdx-cmt-text:focus { outline: none; border-color: rgba(96,165,250,0.5); background: rgba(10,15,30,0.8); }
    .pdx-cmt-text { resize: vertical; min-height: 2.1rem; }
    .pdx-cmt-inputrow { display: flex; gap: 0.4rem; align-items: stretch; }
    .pdx-cmt-inputrow .pdx-cmt-text { flex: 1; }
    .pdx-cmt-post {
      flex-shrink: 0; align-self: stretch;
      min-height: 34px; padding: 0 0.85rem;
      background: rgba(96,165,250,0.16); border: 1px solid rgba(96,165,250,0.4);
      border-radius: 0.5rem; cursor: pointer; color: #bcd6f5;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) {
      .pdx-cmt-post:hover { background: rgba(96,165,250,0.26); border-color: rgba(96,165,250,0.6); color: #dbeafe; }
    }
    .pdx-cmt-post:active { transform: scale(0.95); }
    .pdx-cmt-hint {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.55rem;
      font-weight: 600; letter-spacing: 0.03em; color: #4e72a0;
      margin-top: 0.4rem; line-height: 1.4;
    }
    @media (max-width: 480px) {
      .pdx-cmt-inputrow { flex-direction: column; }
      .pdx-cmt-post { align-self: flex-end; min-width: 5rem; }
    }

    /* ── Shared item threads: source link, evidence toggle, per-comment
       up/down votes, reply / flag / moderator actions. Layered on top of the
       base .pdx-cmt-* styles above; the thread is now the SAME conversation for
       every visitor (server-backed), not a device-local note. ───────────── */
    .pdx-cmt-source-field { margin-top: 0.4rem; }
    .pdx-cmt-source {
      width: 100%; box-sizing: border-box;
      background: rgba(10,15,30,0.6); border: 1px solid rgba(245,200,66,0.3);
      border-radius: 0.5rem; color: #e3ecf7; font-size: 0.7rem;
      font-family: inherit; padding: 0.38rem 0.55rem; line-height: 1.4;
    }
    .pdx-cmt-source::placeholder { color: #8a7a3f; }
    .pdx-cmt-source:focus { outline: none; border-color: rgba(245,200,66,0.6); background: rgba(10,15,30,0.85); }
    .pdx-cmt-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.45rem; flex-wrap: wrap; }
    .pdx-cmt-evtoggle {
      display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.6rem; letter-spacing: 0.02em; color: #9fb4d4; line-height: 1.2;
    }
    .pdx-cmt-evtoggle input { accent-color: #f5c842; margin: 0; }
    .pdx-cmt-actions .pdx-cmt-post { align-self: auto; min-height: 30px; }
    /* Rendered citation chip under a posted comment. */
    .pdx-cmt-src-link {
      display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.28rem;
      max-width: 100%; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.02em; color: #f5c842;
      background: rgba(245,200,66,0.1); border: 1px solid rgba(245,200,66,0.28);
      border-radius: 999px; padding: 0.1rem 0.5rem; text-decoration: none;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    @media (hover: hover) { .pdx-cmt-src-link:hover { background: rgba(245,200,66,0.2); } }
    /* Per-comment footer row: up/down + reply + flag (+ moderator remove). */
    .pdx-cmt-foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; }
    .pdx-cmt-vbtn {
      display: inline-flex; align-items: center; gap: 0.22rem; cursor: pointer;
      min-height: 26px; padding: 0.1rem 0.42rem;
      background: rgba(255,255,255,0.03); border: 1px solid rgba(159,180,212,0.16);
      border-radius: 999px; color: #9fb4d4;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.64rem; letter-spacing: 0.02em; line-height: 1;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    .pdx-cmt-vbtn:active { transform: scale(0.92); }
    .pdx-cmt-vbtn.is-active.pdx-up { color: #4ade80; border-color: rgba(74,222,128,0.45); background: rgba(74,222,128,0.12); }
    .pdx-cmt-vbtn.is-active.pdx-down { color: #f87171; border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.12); }
    .pdx-cmt-act {
      background: none; border: none; padding: 0; cursor: pointer; color: #6b86ad;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
    }
    @media (hover: hover) { .pdx-cmt-act:hover { color: #c7d4e8; } }
    .pdx-cmt-act.pdx-cmt-mod { color: #f8a3a3; }
    .pdx-cmt-removed { opacity: 0.6; }
    .pdx-cmt-removed .pdx-cmt-content { font-style: italic; color: #8aa3c4; }
    .pdx-cmt-children { margin-left: 1.35rem; margin-top: 0.5rem; border-left: 2px solid rgba(159,180,212,0.12); padding-left: 0.6rem; }
    .pdx-cmt-replyform { margin: 0.4rem 0 0.6rem; }
    .pdx-cmt-note {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem;
      font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; margin-top: 0.35rem;
    }
    .pdx-cmt-note.is-error { color: #f8a3a3; }
    .pdx-cmt-note a { color: inherit; text-decoration: underline; cursor: pointer; }
    .pdx-cmt-signin {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.03em; color: #93c5fd;
      background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
    }

    /* ── Deep profile: "You vs. Politician" per-issue comparison ──────── */
    .cmp-summary {
      display: flex; align-items: center; gap: 0.85rem;
      background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(30,53,96,0.35));
      border: 1px solid rgba(139,92,246,0.25); border-radius: 0.9rem;
      padding: 0.85rem 1rem; margin-bottom: 0.85rem;
    }
    .cmp-summary-score {
      flex-shrink: 0; width: 60px; height: 60px; border-radius: 0.75rem;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: rgba(10,15,30,0.55); border: 1px solid rgba(255,255,255,0.07);
    }
    .cmp-summary-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: 1; }
    .cmp-summary-lab { font-family: 'Barlow Condensed', sans-serif; font-size: 0.46rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0; margin-top: 0.1rem; }
    .cmp-summary-body { flex: 1; min-width: 0; }
    .cmp-summary-head { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.05em; color: #fff; line-height: 1.15; }
    .cmp-counts { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
    .cmp-count {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.03em; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid;
    }
    .cmp-count.cmp-match    { background: rgba(74,222,128,0.12);  color: #4ade80; border-color: rgba(74,222,128,0.3); }
    .cmp-count.cmp-partial  { background: rgba(245,200,66,0.12);  color: #f5c842; border-color: rgba(245,200,66,0.3); }
    .cmp-count.cmp-mismatch { background: rgba(248,113,113,0.12); color: #f87171; border-color: rgba(248,113,113,0.3); }
    .cmp-issue {
      background: rgba(10,15,30,0.45); border: 1px solid rgba(255,255,255,0.07);
      border-left-width: 3px; border-radius: 0.7rem; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
    }
    .cmp-issue:last-of-type { margin-bottom: 0; }
    .cmp-issue.cmp-match    { border-left-color: #4ade80; }
    .cmp-issue.cmp-partial  { border-left-color: #f5c842; }
    .cmp-issue.cmp-mismatch { border-left-color: #f87171; }
    .cmp-issue-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
    .cmp-issue-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.83rem; color: #fff; letter-spacing: 0.01em; min-width: 0; }
    .cmp-verdict {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem;
      letter-spacing: 0.08em; text-transform: uppercase; padding: 0.14rem 0.5rem;
      border-radius: 999px; border: 1px solid; white-space: nowrap;
    }
    .cmp-verdict.cmp-match    { background: rgba(74,222,128,0.14);  color: #4ade80; border-color: rgba(74,222,128,0.35); }
    .cmp-verdict.cmp-partial  { background: rgba(245,200,66,0.14);  color: #f5c842; border-color: rgba(245,200,66,0.35); }
    .cmp-verdict.cmp-mismatch { background: rgba(248,113,113,0.14); color: #f87171; border-color: rgba(248,113,113,0.35); }
    .cmp-issue-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .cmp-col { background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 0.55rem; padding: 0.42rem 0.55rem; min-width: 0; }
    .cmp-col-h { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7596c0; margin-bottom: 0.18rem; }
    .cmp-col-v { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem; color: #cbd9ec; line-height: 1.25; }
    .cmp-col-you .cmp-col-v { color: #c4b5fd; }
    /* ── Scannable "You ↔ Them" per-issue row (clearer redesign) ──────── */
    .cmp-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0.4rem; }
    .cmp-side {
      display: flex; flex-direction: column; gap: 0.32rem; min-width: 0;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 0.6rem; padding: 0.5rem 0.55rem;
    }
    .cmp-side-you { background: rgba(139,92,246,0.07); border-color: rgba(139,92,246,0.22); }
    .cmp-side-h {
      display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cmp-side-you .cmp-side-h { color: #a78bfa; }
    .cmp-chip {
      display: inline-flex; align-items: center; gap: 0.28rem; align-self: flex-start;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem;
      letter-spacing: 0.02em; padding: 0.2rem 0.5rem; border-radius: 0.5rem;
      border: 1px solid; white-space: nowrap; line-height: 1.1;
    }
    .cmp-chip.lvl-strong   { background: rgba(124,58,237,0.18); color: #c4b5fd; border-color: rgba(124,58,237,0.45); }
    .cmp-chip.lvl-moderate { background: rgba(139,92,246,0.12); color: #b9a4f5; border-color: rgba(139,92,246,0.3); }
    .cmp-chip.lvl-neutral  { background: rgba(148,163,184,0.14); color: #cbd5e1; border-color: rgba(148,163,184,0.4); }
    .cmp-chip.lvl-oppose   { background: rgba(248,113,113,0.12); color: #f8a3a3; border-color: rgba(248,113,113,0.3); }
    .cmp-chip.lvl-opposed  { background: rgba(248,113,113,0.14); color: #f89b9b; border-color: rgba(248,113,113,0.35); }
    .cmp-chip.pol-support  { background: rgba(74,222,128,0.14);  color: #4ade80; border-color: rgba(74,222,128,0.35); }
    .cmp-chip.pol-oppose   { background: rgba(248,113,113,0.14); color: #f87171; border-color: rgba(248,113,113,0.35); }
    .cmp-chip.pol-mixed    { background: rgba(96,165,250,0.14);  color: #60a5fa; border-color: rgba(96,165,250,0.35); }
    .cmp-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; color: #8aa3c4; line-height: 1.2; }
    /* Center connector that states the verdict at a glance: = / ≈ / ≠ */
    .cmp-vs-link {
      align-self: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 999px; font-size: 0.95rem; font-weight: 800;
      font-family: 'Bebas Neue', sans-serif; border: 1px solid;
    }
    .cmp-vs-link.cmp-match    { background: rgba(74,222,128,0.16);  color: #4ade80; border-color: rgba(74,222,128,0.45); }
    .cmp-vs-link.cmp-partial  { background: rgba(245,200,66,0.16);  color: #f5c842; border-color: rgba(245,200,66,0.45); }
    .cmp-vs-link.cmp-mismatch { background: rgba(248,113,113,0.16); color: #f87171; border-color: rgba(248,113,113,0.45); }
    .cmp-issue-note {
      font-size: 0.7rem; color: #8aa3c4; line-height: 1.5; margin: 0.5rem 0 0;
      padding-top: 0.45rem; border-top: 1px dashed rgba(159,180,212,0.14);
    }
    .cmp-issue-note b { color: #cbd9ec; font-weight: 700; }
    @media (max-width: 420px) {
      .cmp-vs { grid-template-columns: 1fr; }
      .cmp-vs-link { width: 100%; height: 20px; border-radius: 0.5rem; font-size: 0.8rem; }
    }
    .cmp-researching { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
    .cmp-research-pill { font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; color: #9fb4d4; background: rgba(159,180,212,0.1); border: 1px solid rgba(159,180,212,0.2); border-radius: 999px; padding: 0.12rem 0.5rem; }
    .cmp-empty { background: rgba(139,92,246,0.06); border: 1px dashed rgba(139,92,246,0.32); border-radius: 0.85rem; padding: 0.95rem 1rem; }
    .cmp-empty-cta {
      display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em;
      color: #c4b5fd; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.35);
      border-radius: 999px; padding: 0.3rem 0.7rem;
    }
    @media (hover: hover) { .cmp-empty-cta:hover { background: rgba(139,92,246,0.24); } }
    /* Honest "limited data" note inside How You Compare — shown when the visitor
       has picks but none line up with a documented position yet (new / 2026
       candidates). Green-leaning so it reads as "growing", not "broken". */
    .cmp-limited {
      display: flex; align-items: flex-start; gap: 0.5rem;
      margin-top: 0.65rem; padding: 0.7rem 0.8rem;
      background: rgba(74,222,128,0.06); border: 1px solid rgba(74,222,128,0.24);
      border-radius: 0.7rem;
    }
    .cmp-limited-ico { flex: none; font-size: 1rem; line-height: 1.3; }
    .cmp-limited-text { font-size: 0.74rem; color: #b6c6dc; line-height: 1.5; margin: 0; }
    .cmp-limited-text strong { color: #d8b4fe; }
    .cmp-limited-text em { color: #cbd9ec; font-style: italic; }
    /* At-a-glance segmented alignment meter — proportion of match / partial /
       mismatch across the visitor's shared issues. Reads instantly before any
       row is examined. */
    .cmp-meter {
      display: flex; height: 9px; border-radius: 999px; overflow: hidden;
      background: rgba(10,15,30,0.7); border: 1px solid rgba(255,255,255,0.06);
      margin-top: 0.6rem;
    }
    .cmp-meter-seg { height: 100%; transition: width 1.1s cubic-bezier(0.4,0,0.2,1); }
    .cmp-meter-seg.cmp-match    { background: #4ade80; }
    .cmp-meter-seg.cmp-partial  { background: #f5c842; }
    .cmp-meter-seg.cmp-mismatch { background: #f87171; }
    /* Legend that names what each color means — the explicit color + label key. */
    .cmp-legend { display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; margin: 0.7rem 0 0.9rem; }
    .cmp-legend-item {
      display: inline-flex; align-items: center; gap: 0.32rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.6rem; letter-spacing: 0.04em; color: #8aa3c4;
    }
    .cmp-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.12); }
    .cmp-legend-dot.cmp-match    { background: #4ade80; }
    .cmp-legend-dot.cmp-partial  { background: #f5c842; }
    .cmp-legend-dot.cmp-mismatch { background: #f87171; }
    .cmp-legend-item b { color: #cbd9ec; font-weight: 700; }
    .mandate-row { margin-bottom: 0.75rem; }
    .mandate-row:last-child { margin-bottom: 0; }
    .mandate-track { height: 7px; background: rgba(10,15,30,0.85); border-radius: 999px; overflow: hidden; }
    .mandate-fill  { height: 100%; border-radius: 999px; transition: width 1.1s cubic-bezier(0.4,0,0.2,1); }
    .src-note {
      font-size: 0.6rem; color: #4e72a0; line-height: 1.5; text-align: center;
      margin: 0.55rem 0 0; letter-spacing: 0.02em;
    }

    /* ── Score ring helper ─────────────────────────────── */
    .score-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
    .score-ring svg { transform: rotate(-90deg); }

    /* ── Mobile-specific tweaks ────────────────────────── */
    @media (max-width: 480px) {
      /* Tagline box: shrink font on tiny screens */
      .tagline-box p { font-size: 1.05rem !important; }
      /* Hero body text */
      .hero-body { font-size: 0.9rem !important; }
      /* Stats mini cells in cards */
      .stat-cell-num { font-size: 1.1rem !important; }
      /* Section vertical padding reduced */
      .section-py { padding-top: 3rem !important; padding-bottom: 3rem !important; }
      /* Submit form internal padding */
      .submit-inner { padding: 1.25rem !important; }
      /* Modal safe area for notched phones */
      #modal-panel { padding-bottom: env(safe-area-inset-bottom, 0px); }
      /* Directory filter grid: 1 col on very small */
      .dir-filter-grid { grid-template-columns: 1fr 1fr !important; }
    }

    @media (max-width: 380px) {
      .tagline-box { padding-left: 1rem !important; padding-right: 1rem !important; }
      .tagline-box p { font-size: 0.95rem !important; }
      .dir-filter-grid { grid-template-columns: 1fr !important; }
    }

    /* ── Enhanced Mobile Responsiveness ────────────────── */
    @media (max-width: 768px) {
      /* Nav touch targets */
      #mobileMenu a { min-height: 48px; display: flex; align-items: center; }

      /* Hero CTAs: full width on mobile */
      #hero .btn-tap { width: 100%; justify-content: center; padding: 0.9rem 1.5rem; font-size: 0.85rem; }

      /* Hero title scaling */
      .hero-title { font-size: clamp(2.5rem, 14vw, 5rem) !important; }

      /* Sections: tighter padding */
      section { scroll-margin-top: 100px; }

      /* Power Map location header: responsive */
      #voter-hub .pm-location-bar [style*="font-size:4.25rem"] { font-size: 2.2rem !important; line-height: 1.1 !important; }
      #voter-hub .pm-location-bar [style*="width:5.5rem"] { width: 3.5rem !important; height: 3.5rem !important; font-size: 1.8rem !important; }
      #voter-hub .pm-location-bar [style*="font-size:1.15rem"] { font-size: 0.85rem !important; }

      /* Quick-jump pills: scroll horizontally */
      #pm-quickjump-nav { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem !important; }
      #pm-quickjump-nav::-webkit-scrollbar { display: none; }
      #pm-quickjump-nav a { flex-shrink: 0; padding: 0.5rem 0.9rem !important; font-size: 0.75rem !important; }

      /* Location selects: stack vertically */
      .pm-loc-select { width: 100% !important; min-width: 0 !important; font-size: 0.8rem !important; padding: 0.6rem 2rem 0.6rem 0.75rem !important; }

      /* Power Map cards: tighter on mobile */
      .pm-card { padding: 0.75rem !important; }
      .pm-card-photo { width: 40px !important; height: 40px !important; }
      .pm-card-name { font-size: 0.95rem !important; }

      /* Team Builder: responsive slot grid */
      .myteam-slots-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }

      /* Team Builder filters: full width */
      #myteam-browse-panel .grid { grid-template-columns: 1fr 1fr !important; }

      /* Ballot candidate grids */
      .ballot-cand-grid { grid-template-columns: 1fr !important; }

      /* Modal: full-screen on mobile */
      #modal-panel { max-width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; margin: 0 !important; height: 100% !important; }

      /* Compare overlay: better mobile spacing */
      #cmp-header { padding: 0.75rem !important; }

      /* Auth modal: full width */
      #auth-overlay > div { max-width: 100% !important; margin: 0.5rem !important; border-radius: 1rem !important; }

      /* Submit section: tighter padding */
      #submit .p-8 { padding: 1.25rem !important; }
      #submit .md\:p-12 { padding: 1.25rem !important; }

      /* Agenda cards */
      .agenda-card { padding: 1rem !important; }

      /* Wealth leaderboard table */
      #wealth-leaderboard .grid { gap: 0.5rem !important; }

      /* Follow the money cards */
      #follow-the-money .grid { gap: 0.75rem !important; }

      /* Forms: better touch targets for all inputs */
      input[type="text"], input[type="url"], input[type="email"], input[type="password"], textarea, select {
        font-size: 16px !important;
        min-height: 48px;
      }

      /* Reform Hub filter bar */
      .rh-filter-bar { padding: 0.75rem !important; }
      .rh-filters-row { gap: 0.5rem !important; }
      .rh-filter-wrap { width: 100% !important; }

      /* Trending reforms carousel */
      .tr-slide { padding: 1rem !important; }

      /* Toolkit row */
      .veh-tool-card { padding: 0.75rem !important; }
      .veh-label { font-size: 0.85rem !important; }

      /* Toasts: better mobile positioning */
      .account-save-toast, .signin-prompt-toast, .claim-success-toast, .claim-signin-toast {
        left: 1rem !important; right: 1rem !important; transform: translateY(120%) !important; width: auto !important;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
      }
      .account-save-toast.visible, .signin-prompt-toast.visible, .claim-success-toast.visible, .claim-signin-toast.visible {
        transform: translateY(0) !important;
      }
    }

    @media (max-width: 480px) {
      /* Team slots: single column on small phones */
      .myteam-slots-grid { grid-template-columns: 1fr !important; max-width: 400px !important; margin-left: auto !important; margin-right: auto !important; }

      /* My Team section header */
      #my-politicians .font-display { letter-spacing: 0.05em !important; }

      /* Prominent team grid */
      .myteam-prominent { grid-template-columns: 1fr 1fr !important; }
      .myteam-summary-grid { grid-template-columns: repeat(3, 1fr) !important; }

      /* Location header: even smaller */
      #voter-hub .pm-location-bar [style*="font-size:4.25rem"] { font-size: 1.6rem !important; }
      #voter-hub .pm-location-bar [style*="width:5.5rem"] { width: 2.8rem !important; height: 2.8rem !important; font-size: 1.4rem !important; }
      #voter-hub .pm-location-bar [style*="font-size:1.5rem"] { font-size: 1rem !important; }
      #voter-hub .pm-location-bar [style*="gap:1.5rem"] { gap: 0.75rem !important; }
      #voter-hub .pm-location-bar [style*="padding:1.5rem"] { padding: 1rem !important; }

      /* Floating compare button */
      #compare-float-btn { font-size: 0.7rem !important; padding: 0.6rem 1rem !important; }
    }

    @media (max-width: 360px) {
      .hero-title { font-size: 2.2rem !important; }
      .tagline-box p { font-size: 0.85rem !important; }
      .browse-filters-row { grid-template-columns: 1fr !important; }
      .myteam-summary-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }

    /* ── Marquee ───────────────────────────────────────── */
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .animate-marquee { display: inline-flex; }
  

    /* Print styles */
    @media print {
      nav, #modal-overlay, #comment-overlay, .animate-float, .badge-live, .stars-bg, .scanline { display: none !important; }
      body { background: white !important; color: black !important; }
      .card-holo { box-shadow: none !important; border: 1px solid #ddd !important; background: #f9f9f9 !important; }
    }

    /* ── Campaign Finance / Follow the Money ──────── */
    .ftm-sector-bar {
      height: 20px; border-radius: 4px; transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
      position: relative; overflow: hidden;
    }
    .ftm-sector-bar::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
      background-size: 200% 100%; animation: shimmer 3s linear infinite;
    }
    .ftm-donor-row { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.14s; }
    .ftm-donor-row:last-child { border-bottom: none; }
    @media (hover: hover) { .ftm-donor-row:hover { background: rgba(255,255,255,0.025); } }
    .ftm-pie-segment { transition: opacity 0.2s; }
    .ftm-pie-segment:hover { opacity: 0.8; }

    /* ── Key Voting Record ──────────────────────────── */
    .vr-row {
      padding: 0.75rem 0.875rem;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.14s;
    }
    .vr-row:last-child { border-bottom: none; }
    @media (hover: hover) { .vr-row:hover { background: rgba(255,255,255,0.025); } }
    .vr-vote-pill {
      display: inline-flex; align-items: center; gap: 0.2rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap;
    }
    .vr-vote-yea { background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.35); color: #60a5fa; }
    .vr-vote-nay { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.35); color: #f87171; }
    .vr-vote-notvoting { background: rgba(148,163,184,0.15); border: 1px solid rgba(148,163,184,0.3); color: #94a3b8; }
    .vr-vote-signed { background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.35); color: #60a5fa; }
    .vr-vote-vetoed { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.35); color: #f87171; }
    .vr-vote-execorder { background: rgba(168,139,250,0.15); border: 1px solid rgba(168,139,250,0.35); color: #a78bfa; }
    .vr-align-pill {
      display: inline-flex; align-items: center; gap: 0.2rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.15rem 0.45rem; border-radius: 999px; white-space: nowrap;
    }
    .vr-align-kept { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; }
    .vr-align-broken { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.35); color: #f87171; }
    .vr-align-partial { background: rgba(250,204,21,0.15); border: 1px solid rgba(250,204,21,0.35); color: #facc15; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
      html { scroll-behavior: auto !important; }
    }

    /* ── Nav balance: compact on medium desktop ────────── */
    @media (min-width: 768px) and (max-width: 1100px) {
      nav .hidden.md\:flex.items-center.gap-3 { gap: 0.35rem; font-size: 0.6rem; }
      nav .hidden.md\:flex.items-center.gap-3 a { padding-left: 0.35rem; padding-right: 0.35rem; }
    }

    /* ── Deep Dive collapsible ─────────────────────────── */
    .dd-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
    }
    .dd-body.dd-open { max-height: 2400px; }
    .dd-toggle-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      background: rgba(30,53,96,0.5); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.75rem; padding: 0.65rem 0.875rem; cursor: pointer;
      transition: background 0.18s, border-color 0.18s;
    }
    .dd-toggle-btn:hover { background: rgba(30,53,96,0.75); border-color: rgba(159,180,212,0.32); }
    .dd-toggle-btn.dd-active { border-radius: 0.75rem 0.75rem 0 0; border-color: rgba(159,180,212,0.3); background: rgba(30,53,96,0.7); }
    .dd-chevron { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; }
    .dd-toggle-btn.dd-active .dd-chevron { transform: rotate(180deg); }
    .dd-inner {
      border: 1px solid rgba(159,180,212,0.18); border-top: none;
      border-radius: 0 0 0.75rem 0.75rem; overflow: hidden;
      background: rgba(10,15,30,0.55);
    }
    .dd-source-chip {
      display: inline-flex; align-items: center; gap: 0.25rem;
      background: rgba(30,53,96,0.7); border: 1px solid rgba(159,180,212,0.2);
      border-radius: 999px; padding: 0.15rem 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem;
      letter-spacing: 0.08em; text-transform: uppercase; color: #7596c0;
      text-decoration: none; transition: all 0.15s; white-space: nowrap;
    }
    .dd-source-chip:hover { background: rgba(30,53,96,1); color: #9fb4d4; border-color: rgba(159,180,212,0.4); }
    .dd-promise-row {
      padding: 0.7rem 0.875rem; border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.12s;
    }
    .dd-promise-row:last-child { border-bottom: none; }
    @media (hover: hover) { .dd-promise-row:hover { background: rgba(255,255,255,0.02); } }

    /* ── In the Spotlight accordion ────────────────────── */
    .spotlight-item {
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .spotlight-item:last-child { border-bottom: none; }
    .spotlight-toggle {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      background: transparent; border: none; padding: 0.7rem 0.875rem; cursor: pointer;
      transition: background 0.15s;
    }
    .spotlight-toggle:hover { background: rgba(255,255,255,0.03); }
    .spotlight-toggle.sl-active { background: rgba(255,255,255,0.02); }
    .spotlight-detail {
      max-height: 0; overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .spotlight-detail.sl-open { max-height: 800px; }
    .spotlight-toggle .sl-chevron {
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0;
    }
    .spotlight-toggle.sl-active .sl-chevron { transform: rotate(180deg); }

    /* ── Full-profile Spotlight (Accountability analysis overlay) ───────────── */
    /* Category / impact filter chips for the complete integrity highlight list. */
    .sl-chip {
      cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #9fb4d4; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 0.24rem 0.62rem; border-radius: 999px;
      transition: color 0.15s, background 0.15s, border-color 0.15s;
    }
    .sl-chip:hover { color: #c4b5fd; border-color: rgba(167,139,250,0.5); }
    .sl-chip.sl-chip-on {
      color: #c4b5fd; background: rgba(139,92,246,0.18);
      border-color: rgba(139,92,246,0.55);
    }
    /* ── Spotlight "pattern at a glance" summary bar ──────────────────────────
       A factual tally (strengths vs concerns + categories) shown at the top of
       the Accountability Spotlight so a voter reads the integrity pattern in one
       glance, before any individual highlight. Shared by the medium modal, the
       full profile section and the deep analysis overlay. */
    .sl-pattern-bar {
      display: flex; flex-direction: column; gap: 0.4rem;
      background: rgba(10,15,30,0.45); border: 1px solid rgba(167,139,250,0.22);
      border-radius: 0.7rem; padding: 0.6rem 0.75rem; margin: 0 0 0.8rem;
    }
    .sl-pattern-lead {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.74rem; letter-spacing: 0.01em; color: #cdd9ec; line-height: 1.35;
    }
    .sl-pattern-tally { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .sl-tally {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.16rem 0.55rem; border-radius: 999px; border: 1px solid;
    }
    .sl-tally-pos { color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.4); }
    .sl-tally-neg { color: #f87171; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.4); }
    .sl-tally-neu { color: #9fb4d4; background: rgba(120,140,170,0.1); border-color: rgba(120,140,170,0.4); }
    .sl-pattern-cats { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-top: 0.05rem; }
    .sl-cat-chip {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #c4b5fd; background: rgba(139,92,246,0.12);
      border: 1px solid rgba(139,92,246,0.34); padding: 0.12rem 0.46rem; border-radius: 999px;
    }

    /* Keep the full Spotlight section breathable and never cramped on phones. */
    @media (max-width: 640px) {
      .sl-full-wrap { padding: 0.9rem 0.8rem !important; }
      .sl-full-card { padding: 0.75rem 0.8rem !important; }
      .sl-chip { font-size: 0.56rem; padding: 0.22rem 0.55rem; }
      .sl-pattern-bar { padding: 0.55rem 0.65rem; }
      .sl-pattern-lead { font-size: 0.72rem; }
      .sl-tally { font-size: 0.6rem; padding: 0.18rem 0.5rem; }
    }

    /* ── Top Spotlight & Current Events subsections ─── */
    .spotlight-top-item {
      border-bottom: 1px solid rgba(245,200,66,0.08);
      background: rgba(245,200,66,0.025);
    }
    .spotlight-top-item:last-child { border-bottom: none; }
    .spotlight-top-item .spotlight-toggle:hover { background: rgba(245,200,66,0.04); }
    .spotlight-current-wrap {
      max-height: 0; overflow: hidden;
      transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
    }
    .spotlight-current-wrap.sl-section-open { max-height: 3000px; }
    .spotlight-show-more {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
      background: rgba(10,15,30,0.4); border: none; border-top: 1px solid rgba(255,255,255,0.04);
      padding: 0.55rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.72rem; color: #60a5fa; letter-spacing: 0.05em;
      transition: background 0.15s, color 0.15s;
    }
    .spotlight-show-more:hover { background: rgba(96,165,250,0.06); color: #93c5fd; }
    .spotlight-show-more .sl-chevron-more {
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .spotlight-show-more.sl-expanded .sl-chevron-more { transform: rotate(180deg); }

    /* ── Spotlight ↔ Accountability cross-highlight ───────
       Shared flash applied when the user taps a Spotlight driver to find it in
       the Accountability breakdown (or vice versa). A brief purple/gold pulse
       traces the cause-and-effect link between the two sections without moving
       layout. Used by window._slFlash() on both spotlight cards and the
       Accountability card's contribution rows. */
    @keyframes slFlashPulse {
      0%   { box-shadow: 0 0 0 0 rgba(167,139,250,0.0); border-color: rgba(167,139,250,0.0); }
      18%  { box-shadow: 0 0 22px 3px rgba(167,139,250,0.55); border-color: rgba(167,139,250,0.9); }
      100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.0); }
    }
    .sl-flash { animation: slFlashPulse 1.5s cubic-bezier(0.4,0,0.2,1); }


    /* ── Comparison Mode ─────────────────────────────────── */
    #compare-float-btn {
      position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
      z-index: 48; display: none; align-items: center; gap: 0.65rem;
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      border: 1px solid rgba(96,165,250,0.5);
      border-radius: 999px; padding: 0.75rem 1.5rem;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 24px rgba(59,130,246,0.3);
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: white; cursor: pointer; white-space: nowrap;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    #compare-float-btn:hover {
      transform: translateX(-50%) translateY(-3px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 36px rgba(59,130,246,0.45);
    }
    #compare-float-btn.cmp-float-visible { display: flex; }

    #compare-overlay {
      position: fixed; inset: 0; z-index: 52;
      background: rgba(5,8,20,0.96); backdrop-filter: blur(18px);
      display: none; flex-direction: column;
      opacity: 0; transition: opacity 0.28s ease;
      overscroll-behavior: contain;
    }
    #compare-overlay.cmp-open { opacity: 1; }

    #cmp-header {
      flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.5rem; border-bottom: 1px solid rgba(59,130,246,0.2);
      background: linear-gradient(180deg, rgba(10,15,30,0.98) 0%, rgba(13,21,38,0.97) 100%);
      gap: 1rem;
    }
    #cmp-scroll-area {
      flex: 1; overflow: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 1.5rem;
    }
    #cmp-scroll-area::-webkit-scrollbar { height: 5px; width: 5px; }
    #cmp-scroll-area::-webkit-scrollbar-track { background: rgba(10,15,30,0.5); }
    #cmp-scroll-area::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.25); border-radius: 3px; }
    #cmp-scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.4); }

    /* ── Comparison table ──────────────────────────── */
    #cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 500px; }
    #cmp-table th, #cmp-table td {
      padding: 0.65rem 1rem; text-align: left;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      vertical-align: middle;
    }
    #cmp-table thead th {
      position: sticky; top: 0; z-index: 2;
      background: rgba(10,15,30,0.98); border-bottom: 2px solid rgba(59,130,246,0.3);
      padding-top: 0.75rem; padding-bottom: 1rem;
    }
    #cmp-table .cmp-row-label {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #7596c0; white-space: nowrap; min-width: 140px;
      border-right: 1px solid rgba(59,130,246,0.1);
      background: rgba(10,15,30,0.3);
    }
    #cmp-table tbody tr { transition: background 0.15s ease; }
    #cmp-table tbody tr:hover { background: rgba(59,130,246,0.04); }
    #cmp-table tbody tr:last-child td { border-bottom: none; }
    #cmp-table td:not(.cmp-row-label) {
      border-left: 1px solid rgba(255,255,255,0.02);
    }
    .cmp-section-divider td {
      background: linear-gradient(90deg, rgba(30,53,96,0.3), rgba(30,53,96,0.15));
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: #60a5fa; padding: 0.5rem 1rem;
      border-top: 1px solid rgba(59,130,246,0.2);
      border-bottom: 1px solid rgba(59,130,246,0.1);
    }
    .cmp-score-val {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem;
      line-height: 1; display: inline-block;
    }
    /* Denominator under a comparison percentage — "(3 of 4 resolved)" — so the
       side-by-side shows how much record each number is built on. */
    .cmp-score-denom {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #7596c0; line-height: 1.15; margin-top: 0.15rem; white-space: nowrap;
    }
    /* Secondary note under a comparison score — outstanding promises next to a
       real percentage, or the tracking state where there is no percentage yet. */
    .cmp-score-note {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #b08d2e; line-height: 1.2; margin-top: 0.12rem;
    }
    .cmp-score-note-tracking { color: #f5c842; }
    .cmp-stat-pill {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px;
    }
    .cmp-tag {
      display: inline-block;
      background: rgba(30,53,96,0.6); border: 1px solid rgba(96,165,250,0.2);
      border-radius: 0.375rem; padding: 0.15rem 0.45rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem;
      letter-spacing: 0.07em; text-transform: uppercase; color: #93c5fd;
      white-space: nowrap;
    }
    .cmp-bar-wrap {
      display: flex; align-items: center; gap: 0.5rem;
    }
    .cmp-bar-track {
      flex: 1; height: 6px; background: rgba(10,15,30,0.8);
      border-radius: 999px; overflow: hidden; min-width: 60px;
    }
    .cmp-bar-fill { height: 100%; border-radius: 999px; transition: width 0.9s ease; }
    .cmp-btn-profile {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
      background: linear-gradient(135deg, rgba(192,21,42,0.9), rgba(192,21,42,0.75)); color: white; border: none;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;
      transition: all 0.2s; white-space: nowrap;
      box-shadow: 0 2px 8px rgba(192,21,42,0.2);
    }
    .cmp-btn-profile:hover { background: linear-gradient(135deg, #d91a31, #c0152a); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(192,21,42,0.3); }
    .cmp-check-yes { color: #4ade80; font-weight: 700; }
    .cmp-check-no  { color: #f87171; font-weight: 700; }
    .cmp-na        { color: #4e72a0; }

    .cmp-col-header {
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center;
    }
    .cmp-col-avatar {
      width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
      border: 2px solid rgba(59,130,246,0.35); background: rgba(30,53,96,0.5);
      box-shadow: 0 4px 16px rgba(0,0,0,0.4); flex-shrink: 0;
    }
    .cmp-col-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .cmp-col-name {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.08em;
      color: white; line-height: 1.15;
    }
    .cmp-col-office {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem;
      letter-spacing: 0.08em; text-transform: uppercase; color: #7596c0;
    }
    .cmp-col-score-ring {
      display: flex; align-items: center; justify-content: center;
      width: 52px; height: 52px; border-radius: 50%;
      border: 3px solid; position: relative;
    }
    .cmp-col-score-ring .cmp-score-val { font-size: 1.15rem; }

    /* ── Scroll-condensed column headers ────────────────────────────────────
       When #cmp-scroll-area gains .cmp-scrolled (set by _cmpAttachScrollCondense
       once the table is scrolled), the sticky headers collapse to just a small
       avatar + the name so the comparison rows stay usable — most valuable on
       phones where the full profile block would otherwise fill the viewport.
       Everything transitions so the collapse reads as a smooth shrink, and the
       whole effect is presentation-only (no data or layout is removed). */
    .cmp-col-avatar, .cmp-col-name, #cmp-table thead th { transition: all 0.2s ease; }
    #cmp-scroll-area.cmp-scrolled #cmp-table thead th { padding-top: 0.3rem; padding-bottom: 0.4rem; }
    #cmp-scroll-area.cmp-scrolled .cmp-col-header { gap: 0.28rem; }
    #cmp-scroll-area.cmp-scrolled .cmp-col-avatar { width: 30px; height: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
    #cmp-scroll-area.cmp-scrolled .cmp-col-name { font-size: 0.8rem; letter-spacing: 0.05em; }
    /* Hide everything except the avatar + name (office line, status badge, score
       ring, promise bar and alignment badge) while condensed. */
    #cmp-scroll-area.cmp-scrolled .cmp-col-header > *:not(.cmp-col-avatar):not(.cmp-col-name) { display: none; }

    .cmp-remove-col-btn {
      background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);
      color: #f87171; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.3rem 0.6rem; border-radius: 0.4rem; cursor: pointer;
      transition: all 0.15s; white-space: nowrap;
    }
    .cmp-remove-col-btn:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); }
    .cmp-stance-cell {
      font-size: 0.75rem; line-height: 1.45; color: #9fb4d4;
      padding: 0.15rem 0;
    }

    /* ── Issue-by-issue comparison (documented ISSUE_STANCE_DATA positions) ──
       Built from the same sourced issue positions the profile cards and the
       Alignment Tool use, so even a brand-new candidate with no promise record
       still compares on where they actually stand. Each cell shows a direction
       (Supports / Opposes / Mixed) plus the one-line documented position; the
       row label flags whether the picks who DO have a stance agree or differ. */
    .cmp-issue-intro td {
      font-family: 'Barlow', sans-serif; font-size: 0.7rem; line-height: 1.5;
      color: #8aa3c4; background: rgba(13,21,38,0.5);
      padding: 0.55rem 1rem; border-bottom: 1px solid rgba(59,130,246,0.1);
    }
    .cmp-issue-intro strong { color: #cbd9ec; font-weight: 700; }
    .cmp-issue-intro .cmp-issue-agree-ico { color: #6ee7a0; }
    .cmp-issue-intro .cmp-issue-differ-ico { color: #fca5a5; }
    /* Issue row label: readable, wrapping, with the agree/differ verdict under it */
    #cmp-table td.cmp-issue-label {
      white-space: normal; text-transform: none; letter-spacing: 0;
      font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 0.74rem;
      color: #cbd9ec; line-height: 1.3; vertical-align: top; padding-top: 0.7rem;
    }
    .cmp-issue-agree-badge {
      display: inline-flex; align-items: center; gap: 0.22rem; margin-top: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase;
      padding: 0.14rem 0.5rem; border-radius: 999px; white-space: nowrap;
    }
    .cmp-issue-agree-badge.is-agree   { color:#6ee7a0; background:rgba(74,222,128,0.12);  border:1px solid rgba(74,222,128,0.32); }
    .cmp-issue-agree-badge.is-differ  { color:#fca5a5; background:rgba(248,113,113,0.12); border:1px solid rgba(248,113,113,0.32); }
    .cmp-issue-agree-badge.is-partial { color:#fcd34d; background:rgba(245,200,66,0.12);  border:1px solid rgba(245,200,66,0.3); }
    .cmp-issue-agree-badge.is-solo    { color:#7596c0; background:rgba(96,165,250,0.1);   border:1px solid rgba(96,165,250,0.25); }
    /* A row where the documented picks line up gets a subtle green wash */
    #cmp-table tr.cmp-issue-agree-row td { background: rgba(74,222,128,0.045); }
    #cmp-table tr.cmp-issue-differ-row td { background: rgba(248,113,113,0.045); }
    .cmp-issue-cell {
      display: inline-flex; flex-direction: column; align-items: center; gap: 0.32rem;
      max-width: 230px; text-align: center;
    }
    /* Clickable variant — the cell is a button that drills into the Evidence
       Locker, filtered to this person + issue. Reset the native button chrome so
       it reads exactly like the static cell, then add a hover lift + a reveal of
       the "Evidence ↗" cue so the affordance is discoverable without shouting. */
    button.cmp-issue-celllink {
      background: none; border: 0; margin: 0; padding: 0.1rem 0.2rem; width: 100%;
      cursor: pointer; border-radius: 0.5rem; min-height: unset;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .cmp-issue-ev {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #5f7da6; opacity: 0.85; transition: color 0.15s ease, opacity 0.15s ease;
    }
    .cmp-issue-ev strong { color: #cbd9ec; font-weight: 800; }
    @media (hover: hover) {
      button.cmp-issue-celllink:hover { background: rgba(245,200,66,0.07); box-shadow: inset 0 0 0 1px rgba(245,200,66,0.28); }
      button.cmp-issue-celllink:hover .cmp-issue-ev { color: #f5c842; opacity: 1; }
    }
    button.cmp-issue-celllink:focus-visible { outline: 2px solid rgba(245,200,66,0.7); outline-offset: 2px; }
    /* Now just a neutral container: the canonical window.PDXStance pill it wraps
       carries all the colour/label, so the old tinted-pill chrome is gone. */
    .cmp-issue-dir {
      display: inline-flex; align-items: center; justify-content: center;
    }
    .cmp-issue-text {
      font-family: 'Barlow', sans-serif; font-size: 0.68rem; line-height: 1.42;
      color: #9fb4d4; max-width: 220px;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Four-state stance legend — decodes the canonical PDXStance pills in the
       "Where They Stand" grid. Colour dots + labels only, kept calm and quiet. */
    .cmp-stance-legend {
      display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
      align-items: center; padding: 0.15rem 0 0.1rem;
    }
    .cmp-stance-lg {
      display: inline-flex; align-items: center; gap: 0.34rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: #9fb4d4;
    }
    .cmp-stance-lg i {
      width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0;
    }
    .cmp-issue-none {
      display: inline-flex; flex-direction: column; align-items: center; gap: 0.12rem;
      color: #4e72a0; font-size: 1rem; line-height: 1;
    }
    .cmp-issue-none span {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.56rem; letter-spacing: 0.07em;
      text-transform: uppercase; color: #3f5d85;
    }
    /* Empty cell — leads with the canonical grey "No Clear Position" pill, then a
       small quiet note, so the honest gap reads in the same language as every
       documented cell instead of a bare dash. */
    .cmp-issue-emptycell { gap: 0.28rem; }
    .cmp-issue-none-note {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.56rem; letter-spacing: 0.07em;
      text-transform: uppercase; color: #3f5d85;
    }
    .cmp-issue-more td {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; letter-spacing: 0.06em;
      text-transform: uppercase; color: #6d8ab0; text-align: center;
      background: rgba(13,21,38,0.4); padding: 0.5rem 1rem;
    }
    /* ── "Your issue" emphasis: rows the visitor flagged in the Alignment Tool ──
       Connects Compare to the Alignment Tool — a row is marked when its issue is
       one the visitor chose to weigh. Gold accent (matching the 🎯 alignment cue
       used elsewhere); it signals a topic of interest, not agreement. */
    .cmp-issue-mine-badge {
      display: inline-flex; align-items: center; gap: 0.22rem; margin-top: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase;
      padding: 0.14rem 0.5rem; border-radius: 999px; white-space: nowrap;
      color: #fcd34d; background: rgba(245,200,66,0.14); border: 1px solid rgba(245,200,66,0.4);
    }
    #cmp-table tr.cmp-issue-mine-row td { box-shadow: inset 3px 0 0 rgba(245,200,66,0.55); }
    #cmp-table tr.cmp-issue-mine-row td.cmp-issue-label { color: #fde8a8; }
    .cmp-issue-intro .cmp-issue-mine-ico { color: #fcd34d; }
    .cmp-insight-mine { color: #fcd34d; font-weight: 700; }

    /* "See everyone's evidence ↗" — the per-issue jump into the Evidence Locker
       filtered to the whole issue (every politician on record). Sits under the
       agreement badge in the issue label cell. Quiet by default so it never
       competes with the stance cells, brightening to the gold evidence accent on
       hover/focus — matching the per-cell "Evidence ↗" cue language. */
    .cmp-issue-allev {
      display: inline-flex; align-items: center; gap: 0.28rem; margin-top: 0.45rem;
      cursor: pointer; background: rgba(245,200,66,0.08);
      border: 1px solid rgba(245,200,66,0.28); border-radius: 999px;
      padding: 0.18rem 0.55rem; line-height: 1.15;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #d8b75a; white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    @media (hover: hover) {
      .cmp-issue-allev:hover { background: rgba(245,200,66,0.2); border-color: rgba(245,200,66,0.55); color: #f5c842; }
    }
    .cmp-issue-allev:focus-visible { outline: 2px solid rgba(245,200,66,0.75); outline-offset: 2px; color: #f5c842; }

    /* ── Issue-section meter + filter toolbar ────────────────────────────────
       Sits at the top of "Where They Stand". The meter turns the agree/differ/
       mixed counts into one glanceable bar so a voter sees the shape of the
       overlap before reading rows; the chips let them jump straight to the
       contrasts, the common ground, or the issues they personally flagged. */
    .cmp-issue-meter-wrap { padding: 0.7rem 1rem 0.2rem; background: rgba(13,21,38,0.5); }
    .cmp-issue-meter {
      display: flex; width: 100%; height: 9px; border-radius: 999px; overflow: hidden;
      background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.18);
    }
    .cmp-issue-meter .seg { height: 100%; transition: width 0.6s ease; }
    .cmp-issue-meter .seg-differ  { background: linear-gradient(90deg,#b91c1c,#f87171); }
    .cmp-issue-meter .seg-partial { background: linear-gradient(90deg,#b45309,#f5c842); }
    .cmp-issue-meter .seg-agree   { background: linear-gradient(90deg,#15803d,#4ade80); }
    .cmp-issue-meter-legend {
      display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #8aa3c4;
    }
    .cmp-issue-meter-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
    .cmp-issue-meter-legend i { width: 0.6rem; height: 0.6rem; border-radius: 2px; font-style: normal; flex-shrink: 0; }
    .cmp-issue-meter-legend i.k-differ  { background: #f87171; }
    .cmp-issue-meter-legend i.k-partial { background: #f5c842; }
    .cmp-issue-meter-legend i.k-agree   { background: #4ade80; }
    .cmp-issue-meter-legend i.k-solo    { background: #60a5fa; }
    .cmp-issue-meter-legend b { color: #cbd9ec; font-weight: 700; }

    .cmp-issue-toolbar td { padding: 0.55rem 1rem; background: rgba(13,21,38,0.5); border-bottom: 1px solid rgba(59,130,246,0.1); }
    .cmp-issue-fbtns { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
    .cmp-issue-fbtns .cmp-fb-label {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: #6d8ab0; margin-right: 0.2rem;
    }
    .cmp-issue-fbtn {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.04em; color: #9fb4d4; cursor: pointer;
      background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.25);
      padding: 0.26rem 0.7rem; border-radius: 999px; transition: all 0.15s; min-height: unset;
      white-space: nowrap;
    }
    .cmp-issue-fbtn:hover { background: rgba(96,165,250,0.18); color: #dbe6f7; }
    .cmp-issue-fbtn .cmp-fb-n { opacity: 0.7; font-weight: 600; }
    .cmp-issue-fbtn.active { color: #0b1020; background: linear-gradient(135deg,#bfdbfe,#60a5fa); border-color: rgba(96,165,250,0.8); }
    .cmp-issue-fbtn.fb-differ { border-color: rgba(248,113,113,0.4); color: #fca5a5; background: rgba(248,113,113,0.08); }
    .cmp-issue-fbtn.fb-differ:hover { background: rgba(248,113,113,0.16); }
    .cmp-issue-fbtn.fb-differ.active { color: #2a0a0a; background: linear-gradient(135deg,#fecaca,#f87171); border-color: rgba(248,113,113,0.8); }
    .cmp-issue-fbtn.fb-agree { border-color: rgba(74,222,128,0.4); color: #6ee7a0; background: rgba(74,222,128,0.08); }
    .cmp-issue-fbtn.fb-agree:hover { background: rgba(74,222,128,0.16); }
    .cmp-issue-fbtn.fb-agree.active { color: #052012; background: linear-gradient(135deg,#bbf7d0,#4ade80); border-color: rgba(74,222,128,0.8); }
    .cmp-issue-fbtn.fb-mine { border-color: rgba(245,200,66,0.45); color: #fcd34d; background: rgba(245,200,66,0.1); }
    .cmp-issue-fbtn.fb-mine:hover { background: rgba(245,200,66,0.2); }
    .cmp-issue-fbtn.fb-mine.active { color: #2a2105; background: linear-gradient(135deg,#fde68a,#f5c842); border-color: rgba(245,200,66,0.85); }
    /* Empty-state row shown when a filter matches nothing in the current lineup */
    .cmp-issue-empty td {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; letter-spacing: 0.03em;
      color: #7596c0; text-align: center; padding: 0.9rem 1rem; background: rgba(13,21,38,0.35);
    }
    /* Hidden by filter or by the show-all cap */
    #cmp-table tr.cmp-issue-hidden { display: none; }
    /* Gold flash when the Priorities dashboard opens Compare focused on one topic */
    #cmp-table tr.cmp-issue-flash > td { animation: cmpIssueFlash 2.6s ease-out 1; }
    @keyframes cmpIssueFlash {
      0%   { background: rgba(245,200,66,0.34); box-shadow: inset 0 0 0 9999px rgba(245,200,66,0.12); }
      18%  { background: rgba(245,200,66,0.34); box-shadow: inset 0 0 0 9999px rgba(245,200,66,0.12); }
      100% { background: transparent; box-shadow: inset 0 0 0 9999px rgba(245,200,66,0); }
    }
    /* Inline expand / collapse control replacing the old "open a profile" dead-end */
    .cmp-issue-showall td {
      text-align: center; padding: 0.55rem 1rem; background: rgba(13,21,38,0.4);
      border-top: 1px solid rgba(59,130,246,0.1);
    }
    .cmp-issue-showall-btn {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase; color: #93c5fd; cursor: pointer;
      background: rgba(59,130,246,0.12); border: 1px solid rgba(96,165,250,0.4);
      padding: 0.34rem 1.1rem; border-radius: 999px; transition: all 0.15s; min-height: unset;
    }
    .cmp-issue-showall-btn:hover { background: rgba(59,130,246,0.24); color: #dbe6f7; transform: translateY(-1px); }

    /* ── "How to read this" guidance bar (top of compare scroll area) ── */
    .cmp-guide {
      position: relative;
      background: linear-gradient(135deg, rgba(30,53,96,0.45) 0%, rgba(13,21,38,0.6) 100%);
      border: 1px solid rgba(96,165,250,0.28); border-radius: 0.75rem;
      padding: 0.85rem 2.4rem 0.85rem 1rem; margin-bottom: 1.1rem;
    }
    .cmp-guide-head {
      display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #93c5fd;
    }
    .cmp-guide-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.55rem 1rem;
    }
    .cmp-guide-item {
      display: flex; align-items: flex-start; gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; line-height: 1.4; color: #c5d4ea;
    }
    .cmp-guide-item .cmp-guide-ico { flex-shrink: 0; font-size: 0.95rem; line-height: 1.3; }
    .cmp-guide-item strong { color: #fff; font-weight: 700; }
    .cmp-guide-tip {
      margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid rgba(96,165,250,0.14);
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.76rem; line-height: 1.45; color: #9fb4d4;
    }
    .cmp-guide-tip strong { color: #6ee7a0; }
    .cmp-guide-dismiss {
      position: absolute; top: 0.55rem; right: 0.6rem;
      width: 1.6rem; height: 1.6rem; border-radius: 0.4rem;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      color: #7596c0; cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem; transition: all 0.15s; min-height: unset;
    }
    .cmp-guide-dismiss:hover { background: rgba(255,255,255,0.12); color: #fff; }

    /* ── Coaching banner: shown in the compare overlay when only one politician
         is selected. Nudges toward a real side-by-side and offers a one-tap way
         to pull in the rest of that race so a voter compares before deciding. ── */
    .cmp-coach {
      background: linear-gradient(135deg, rgba(37,99,235,0.2) 0%, rgba(13,21,38,0.6) 100%);
      border: 1px solid rgba(96,165,250,0.42); border-radius: 0.85rem;
      padding: 1rem 1.15rem; margin-bottom: 1.1rem;
    }
    .cmp-coach-head {
      display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem;
      font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.05em; color: #fff;
    }
    .cmp-coach-head .cmp-coach-ico { font-size: 1.2rem; }
    .cmp-coach-body {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.85rem; line-height: 1.45; color: #c5d4ea;
    }
    .cmp-coach-body strong { color: #fff; font-weight: 700; }
    .cmp-coach-body em { color: #93c5fd; font-style: normal; }
    .cmp-coach-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.85rem; }
    .cmp-coach-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.6rem 1.1rem; border-radius: 0.55rem; cursor: pointer; transition: all 0.18s;
      white-space: nowrap; min-height: unset;
    }
    .cmp-coach-btn-primary {
      background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; border: 1px solid rgba(96,165,250,0.45);
      box-shadow: 0 3px 14px rgba(37,99,235,0.25);
    }
    .cmp-coach-btn-primary:hover { background: linear-gradient(135deg, #2563eb, #3b82f6); transform: translateY(-1px); }
    .cmp-coach-btn-ghost { background: rgba(255,255,255,0.06); color: #cdd9ec; border: 1px solid rgba(255,255,255,0.14); }
    .cmp-coach-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .cmp-footer-samerace {
      display: inline-block; margin-top: 0.2rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; color: #6ee7a0;
    }

    /* ── Compare Hub flow guide (Discover → Compare → Decide) ── */
    .chub-flow {
      background: linear-gradient(135deg, rgba(13,28,58,0.7) 0%, rgba(10,15,30,0.6) 100%);
      border: 1px solid rgba(96,165,250,0.25); border-radius: 1rem;
      padding: 1rem 1.15rem; margin-bottom: 1.5rem;
    }
    .chub-flow-head {
      display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem;
      font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: 0.06em; color: #fff;
    }
    .chub-flow-head .chub-flow-kicker {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.14em; text-transform: uppercase; color: #60a5fa;
      background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.3);
      border-radius: 999px; padding: 0.12rem 0.55rem;
    }
    .chub-flow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0.5rem; }
    .chub-flow-step {
      display: flex; flex-direction: column; gap: 0.3rem;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.07);
      border-radius: 0.7rem; padding: 0.7rem 0.85rem;
    }
    .chub-flow-step-num {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.64rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: #93c5fd;
    }
    .chub-flow-step-num .chub-flow-dot {
      width: 1.3rem; height: 1.3rem; border-radius: 50%;
      background: linear-gradient(135deg, rgba(37,99,235,0.5), rgba(37,99,235,0.25));
      border: 1px solid rgba(96,165,250,0.5); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.72rem; flex-shrink: 0;
    }
    .chub-flow-step-title { font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: #fff; }
    .chub-flow-step-desc { font-family: 'Barlow Condensed', sans-serif; font-size: 0.76rem; line-height: 1.4; color: #9fb4d4; }
    .chub-flow-arrow { display: flex; align-items: center; justify-content: center; color: #4e72a0; font-size: 1.1rem; }
    .chub-flow-foot {
      display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; justify-content: space-between;
      margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid rgba(96,165,250,0.14);
    }
    .chub-flow-foot-note {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; line-height: 1.4; color: #9fb4d4; min-width: 0; flex: 1;
    }
    .chub-flow-foot-note strong { color: #cdd9ec; font-weight: 700; }
    @media (max-width: 720px) {
      .chub-flow-steps { grid-template-columns: 1fr; }
      .chub-flow-arrow { transform: rotate(90deg); padding: 0.1rem 0; }
    }

    /* ── "Add to Team" action inside the compare table ── */
    .cmp-btn-team {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.32), rgba(245,158,11,0.18)); color: #fbbf24;
      border: 1px solid rgba(245,158,11,0.5);
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;
      transition: all 0.2s; white-space: nowrap;
    }
    .cmp-btn-team:hover { background: linear-gradient(135deg, rgba(245,158,11,0.45), rgba(245,158,11,0.28)); border-color: rgba(245,158,11,0.75); transform: translateY(-1px); }
    .cmp-btn-team.on-team {
      background: linear-gradient(135deg, rgba(74,222,128,0.22), rgba(74,222,128,0.1));
      border-color: rgba(74,222,128,0.5); color: #4ade80;
    }
    .cmp-btn-team.on-team:hover { background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(239,68,68,0.1)); border-color: rgba(239,68,68,0.5); color: #f87171; }

    /* ── Next-steps footer (sticky bottom of compare overlay) ── */
    #cmp-footer {
      flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; flex-wrap: wrap;
      padding: 0.85rem 1.5rem; border-top: 1px solid rgba(59,130,246,0.2);
      background: linear-gradient(180deg, rgba(13,21,38,0.97) 0%, rgba(10,15,30,0.98) 100%);
    }
    #cmp-footer:empty { display: none; }
    .cmp-footer-msg {
      display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex: 1;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.85rem; line-height: 1.35; color: #c5d4ea;
    }
    .cmp-footer-msg .cmp-footer-ico { font-size: 1.15rem; flex-shrink: 0; }
    .cmp-footer-msg strong { color: #fff; font-weight: 700; }
    .cmp-footer-actions { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; flex-wrap: wrap; }
    .cmp-footer-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.55rem 1.1rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.18s;
      white-space: nowrap; min-height: unset;
    }
    .cmp-footer-btn-primary {
      background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; border: 1px solid rgba(96,165,250,0.4);
      box-shadow: 0 3px 14px rgba(37,99,235,0.25);
    }
    .cmp-footer-btn-primary:hover { background: linear-gradient(135deg, #2563eb, #3b82f6); transform: translateY(-1px); }
    .cmp-footer-btn-ghost {
      background: rgba(255,255,255,0.05); color: #9fb4d4; border: 1px solid rgba(255,255,255,0.12);
    }
    .cmp-footer-btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
    @media (max-width: 640px) {
      #cmp-footer { padding: 0.7rem 1rem; gap: 0.6rem; }
      .cmp-footer-msg { font-size: 0.78rem; flex-basis: 100%; }
      .cmp-footer-actions { flex-basis: 100%; }
      .cmp-footer-btn { flex: 1; justify-content: center; }
    }

    /* ── At-a-glance insights (common ground / differences) ── */
    #cmp-insights {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.75rem; margin-bottom: 1.25rem;
    }
    #cmp-insights:empty { display: none; }
    .cmp-insight-card {
      background: linear-gradient(180deg, rgba(13,21,38,0.92), rgba(10,15,30,0.92));
      border: 1px solid rgba(59,130,246,0.18); border-radius: 0.65rem;
      padding: 0.8rem 0.9rem;
    }
    .cmp-insight-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #60a5fa; margin-bottom: 0.55rem; display: flex; align-items: center; gap: 0.35rem;
    }
    .cmp-insight-body { font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; color: #cdd9ec; line-height: 1.4; }
    .cmp-insight-lead {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: 0.04em;
      color: #fff; display: block; margin-bottom: 0.15rem;
    }
    .cmp-insight-sub { font-size: 0.72rem; color: #7596c0; }
    .cmp-common-tag {
      display: inline-block; margin: 0.15rem 0.2rem 0 0;
      background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.3);
      border-radius: 0.375rem; padding: 0.12rem 0.45rem;
      font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: #6ee7a0;
      white-space: nowrap;
    }

    /* ── "Bottom Line" verdict: a single synthesized read that combines Promise
         Score, Follow-Through (accountability) and personal Alignment into one
         plain-language recommendation, then points at the next step. ── */
    #cmp-verdict { margin-bottom: 1.1rem; }
    #cmp-verdict:empty { display: none; }
    .cmp-verdict-card {
      position: relative;
      background: linear-gradient(135deg, rgba(245,158,11,0.13) 0%, rgba(37,99,235,0.13) 100%);
      border: 1px solid rgba(245,200,66,0.4); border-radius: 0.85rem;
      padding: 1rem 1.15rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    }
    .cmp-verdict-card.cmp-verdict-neutral {
      background: linear-gradient(135deg, rgba(37,99,235,0.16) 0%, rgba(13,21,38,0.6) 100%);
      border-color: rgba(96,165,250,0.4);
    }
    .cmp-verdict-main { display: flex; align-items: flex-start; gap: 0.8rem; min-width: 0; flex: 1; }
    .cmp-verdict-ico { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
    .cmp-verdict-kicker {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.14em; text-transform: uppercase; color: #fbbf24; margin-bottom: 0.25rem;
    }
    .cmp-verdict-neutral .cmp-verdict-kicker { color: #60a5fa; }
    .cmp-verdict-lead {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em;
      color: #fff; line-height: 1.12;
    }
    .cmp-verdict-lead strong { color: #fde68a; font-weight: 400; }
    .cmp-verdict-neutral .cmp-verdict-lead strong { color: #bfdbfe; }
    .cmp-verdict-body {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; line-height: 1.45;
      color: #cdd9ec; margin-top: 0.35rem;
    }
    .cmp-verdict-body strong { color: #fff; font-weight: 700; }
    .cmp-verdict-actions { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; flex-wrap: wrap; }
    @media (max-width: 640px) {
      .cmp-verdict-actions { flex-basis: 100%; }
      .cmp-verdict-actions .cmp-btn-team, .cmp-verdict-actions .cmp-footer-btn { flex: 1; justify-content: center; }
    }

    /* Status badge (Officeholder vs Candidate) */
    .cmp-status-badge {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap;
    }
    .cmp-status-office { background: rgba(96,165,250,0.14); border: 1px solid rgba(96,165,250,0.35); color: #93c5fd; }
    .cmp-status-cand   { background: rgba(245,200,66,0.14); border: 1px solid rgba(245,200,66,0.4); color: #f5c842; }

    /* Leader highlight — marks the strongest value in a numeric row */
    #cmp-table td.cmp-leader-cell {
      background: rgba(74,222,128,0.07);
      box-shadow: inset 0 0 0 1px rgba(74,222,128,0.28);
    }
    .cmp-leader-badge {
      display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #4ade80;
    }
    /* Neutral variant — marks the largest value in a row that is a fact, not a
       virtue (e.g. biggest war chest), so it doesn't read as an endorsement. */
    .cmp-leader-badge.cmp-leader-neutral { color: #cbd5e1; }

    /* ── Money & Funding rows ─────────────────────────────────────────────── */
    .cmp-fund-raised { color: #4ade80; font-size: 1.15rem; }
    .cmp-fund-none {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem;
      letter-spacing: 0.05em; color: #4e72a0; font-style: italic;
    }
    .cmp-fund-top {
      display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
      line-height: 1.25;
    }
    .cmp-fund-top-name { font-size: 0.72rem; color: #dbe6f5; font-weight: 600; }
    .cmp-fund-top-amt {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.05em; color: #7596c0;
    }
    .cmp-fund-base {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.03em;
      padding: 0.28rem 0.6rem; border-radius: 999px; white-space: nowrap;
    }
    .cmp-fund-base.is-grass   { background: rgba(74,222,128,0.12);  border: 1px solid rgba(74,222,128,0.3);  color: #6ee7a0; }
    .cmp-fund-base.is-mixed   { background: rgba(245,200,66,0.12);  border: 1px solid rgba(245,200,66,0.3);  color: #f5c842; }
    .cmp-fund-base.is-big     { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3); color: #f87171; }
    .cmp-fund-base.is-unknown { background: rgba(159,180,212,0.1);  border: 1px solid rgba(159,180,212,0.25); color: #9fb4d4; }
    .cmp-fund-src {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #93c5fd; text-decoration: none; transition: color 0.15s;
    }
    .cmp-fund-src:hover { color: #bfdbfe; text-decoration: underline; }

    /* ── Funding chip — compact, at-a-glance "who funds them" indicator ──────
       A single reusable pill used on Home Team ballot cards (and reusable on
       other surfaces later). Mirrors the Compare page's 🌱/⚖️/🏦 colour system:
       green = grassroots, amber = mixed, red = big-money, steel = unknown. */
    .pdx-fchip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      border-radius: 0.5rem; padding: 0.16rem 0.5rem;
      font-size: 0.62rem; letter-spacing: 0.03em; line-height: 1.25; white-space: nowrap;
    }
    .pdx-fchip .pdx-fchip-ico { font-size: 0.78rem; line-height: 1; }
    .pdx-fchip b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.02em; }
    .pdx-fchip .pdx-fchip-word { font-size: 0.5rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.85; }
    .pdx-fchip.is-grass   { color: #6ee7a0; background: rgba(74,222,128,0.1);  border: 1px solid rgba(74,222,128,0.3); }
    .pdx-fchip.is-mixed   { color: #f5c842; background: rgba(245,200,66,0.1);  border: 1px solid rgba(245,200,66,0.3); }
    .pdx-fchip.is-big     { color: #f87171; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); }
    .pdx-fchip.is-unknown { color: #9fb4d4; background: rgba(159,180,212,0.08); border: 1px solid rgba(159,180,212,0.24); }
    .pdx-fchip.is-none    { color: #7d92b5; background: rgba(148,163,184,0.06); border: 1px dashed rgba(148,163,184,0.28); }
    .pdx-fchip.is-none b, .pdx-fchip.is-none .pdx-fchip-word {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; letter-spacing: 0.03em; text-transform: none; opacity: 1;
    }

    /* ── Profile "Money & Funding" section — the full, scannable read on a
       politician profile. Same lookup + language as Compare, laid out for a
       single profile: two stat tiles (raised · top funder), the funding-base
       character chip, an optional "why it matters" note, and one-tap paths to
       the primary filings and into a side-by-side Compare. */
    .pdx-fund .pdx-fund-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.7rem; }
    .pdx-fund-stat { background: rgba(10,15,30,0.55); border: 1px solid rgba(159,180,212,0.16); border-radius: 0.7rem; padding: 0.7rem 0.8rem; min-width: 0; }
    .pdx-fund-stat-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0; margin-bottom: 0.25rem; }
    .pdx-fund-raised { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; line-height: 1; color: #4ade80; }
    .pdx-fund-top-name { font-size: 0.84rem; font-weight: 700; color: #dbe6f5; line-height: 1.2; word-break: break-word; }
    .pdx-fund-top-amt { font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; letter-spacing: 0.04em; color: #7596c0; margin-top: 0.15rem; text-transform: capitalize; }
    .pdx-fund-dim { color: #7d92b5; font-weight: 600; font-style: italic; }
    .pdx-fund-scale { display: inline-block; margin-top: 0.4rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; }
    .pdx-fund-scale.is-high { color: #e2e8f0; background: rgba(148,163,184,0.16); border: 1px solid rgba(203,213,225,0.3); }
    .pdx-fund-scale.is-low  { color: #cbd5e1; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.28); }
    .pdx-fund-baserow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
    .pdx-fund-base { display: inline-flex; align-items: center; gap: 0.3rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; padding: 0.32rem 0.7rem; border-radius: 999px; white-space: nowrap; }
    .pdx-fund-base.is-grass   { background: rgba(74,222,128,0.12);  border: 1px solid rgba(74,222,128,0.35); color: #6ee7a0; }
    .pdx-fund-base.is-mixed   { background: rgba(245,200,66,0.12);  border: 1px solid rgba(245,200,66,0.35); color: #f5c842; }
    .pdx-fund-base.is-big     { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.35); color: #f87171; }
    .pdx-fund-base.is-unknown { background: rgba(159,180,212,0.1);  border: 1px solid rgba(159,180,212,0.25); color: #9fb4d4; }
    .pdx-fund-base-note { font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; color: #9fb4d4; line-height: 1.35; }
    .pdx-fund-why { font-size: 0.76rem; color: #b9cae3; line-height: 1.6; margin: 0 0 0.7rem; padding: 0.55rem 0.7rem; background: rgba(139,92,246,0.06); border-left: 2px solid rgba(139,92,246,0.4); border-radius: 0.4rem; }
    .pdx-fund-why strong { color: #c4b5fd; }
    .pdx-fund-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
    .pdx-fund-src, .pdx-fund-cmp {
      display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem;
      letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
      padding: 0.4rem 0.7rem; border-radius: 0.5rem; transition: all 0.15s;
    }
    .pdx-fund-src { color: #93c5fd; background: rgba(59,130,246,0.08); border: 1px solid rgba(96,165,250,0.28); }
    .pdx-fund-src:hover { color: #bfdbfe; border-color: rgba(96,165,250,0.55); background: rgba(59,130,246,0.16); }
    .pdx-fund-cmp { color: #c4b5fd; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.32); }
    .pdx-fund-cmp:hover { color: #ddd6fe; border-color: rgba(139,92,246,0.6); background: rgba(139,92,246,0.2); }
    .pdx-fund-none { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 0.9rem; background: rgba(10,15,30,0.5); border: 1px dashed rgba(159,180,212,0.25); border-radius: 0.7rem; margin-bottom: 0.7rem; }
    .pdx-fund-none-ico { font-size: 1.5rem; line-height: 1; opacity: 0.8; }
    .pdx-fund-none-t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; color: #c8d6ec; }
    .pdx-fund-none-s { font-size: 0.74rem; color: #9fb4d4; line-height: 1.5; margin-top: 0.15rem; }

    /* ── Header selection chips — the top-of-modal add/remove control ──────── */
    .cmp-sel-pill {
      display: inline-flex; align-items: center; gap: 0.35rem;
      background: rgba(30,53,96,0.55); border: 1px solid rgba(96,165,250,0.28);
      border-radius: 999px; padding: 0.28rem 0.5rem 0.28rem 0.55rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.7rem; letter-spacing: 0.02em; color: #dbe6f5;
      cursor: pointer; transition: all 0.15s; min-height: unset; line-height: 1;
    }
    .cmp-sel-pill:hover { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.45); color: #fecaca; }
    .cmp-sel-pill-ico { font-size: 0.85rem; }
    .cmp-sel-pill-name { white-space: nowrap; }
    .cmp-sel-pill-x { font-size: 0.6rem; opacity: 0.6; margin-left: 0.05rem; }
    .cmp-sel-pill:hover .cmp-sel-pill-x { opacity: 1; }
    .cmp-sel-pill-add {
      background: rgba(59,130,246,0.12); border-style: dashed; color: #93c5fd;
    }
    .cmp-sel-pill-add:hover { background: rgba(59,130,246,0.24); border-color: rgba(96,165,250,0.6); color: #bfdbfe; }
    .cmp-sel-pill-add .cmp-sel-pill-ico { font-weight: 700; }

    /* Mobile: allow horizontal scroll on table */
    @media (max-width: 640px) {
      #cmp-scroll-area { padding: 0.875rem; }
      #cmp-header { padding: 0.875rem; }
      #cmp-table .cmp-row-label { min-width: 100px; font-size: 0.6rem; }
      #cmp-table th, #cmp-table td { padding: 0.5rem 0.65rem; }
      .cmp-col-avatar { width: 44px; height: 44px; }
      .cmp-col-name { font-size: 0.95rem; }
      .cmp-col-score-ring { width: 42px; height: 42px; }
      .cmp-col-score-ring .cmp-score-val { font-size: 1rem; }
      /* Phone: keep the score cells tight. The tracking note earns its space —
         it is the only thing distinguishing "tracked, none resolved" from an
         empty record — but the "+N pending" aside next to a real percentage is
         context the Pending / In Progress row already carries, so it steps out. */
      .cmp-score-note:not(.cmp-score-note-tracking) { display: none; }
    }

    /* Card highlight when checked */
    .card-holo:has(.compare-cb:checked),
    .card-holo.cmp-highlight {
      box-shadow: 0 0 0 2px #3b82f6, 0 0 20px rgba(59,130,246,0.25) !important;
    }

    /* Browse Profiles compare button */
    .bp-compare-btn {
      background: rgba(30,64,175,0.45);
      border: 1px solid rgba(96,165,250,0.35);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.64rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.38rem 0.65rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      min-height: unset;
    }
    .bp-compare-btn:hover { background: rgba(30,64,175,0.7); border-color: rgba(96,165,250,0.6); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,130,246,0.2); }
    .bp-compare-btn.added {
      background: rgba(37,99,235,0.6);
      border-color: rgba(96,165,250,0.7);
      color: white;
      box-shadow: 0 0 8px rgba(59,130,246,0.25);
    }


    /* ── Reform Hub Filter Bar ────────────────────────────────── */
    .rh-filter-bar {
      background: rgba(10,15,30,0.7); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1rem; padding: 1rem 1.125rem 0.875rem; margin-bottom: 1.5rem;
      display: flex; flex-direction: column; gap: 0.75rem;
    }
    .rh-search-wrap {
      position: relative; display: flex; align-items: center;
    }
    .rh-search-icon {
      position: absolute; left: 0.75rem; width: 0.9rem; height: 0.9rem;
      color: #7596c0; pointer-events: none; flex-shrink: 0;
    }
    .rh-search-input {
      width: 100%; padding: 0.6rem 2.25rem 0.6rem 2.25rem;
      background: rgba(30,53,96,0.5); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.625rem; color: white;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.85rem;
      letter-spacing: 0.04em; outline: none; transition: border-color 0.15s;
    }
    .rh-search-input::placeholder { color: #4e72a0; }
    .rh-search-input:focus { border-color: rgba(192,21,42,0.5); }
    #rh-search-clear {
      position: absolute; right: 0.75rem; background: none; border: none;
      color: #7596c0; cursor: pointer; padding: 0.2rem; line-height: 1;
      transition: color 0.15s;
    }
    #rh-search-clear:hover { color: #f87171; }
    .rh-filters-row {
      display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    }
    .rh-filter-wrap {
      display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 120px; min-width: 100px;
    }
    .rh-filter-label {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.52rem;
      font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: #4e72a0; padding-left: 0.1rem;
    }
    .rh-select {
      background: rgba(30,53,96,0.5); border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.5rem; color: #9fb4d4;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem;
      letter-spacing: 0.05em; padding: 0.45rem 0.6rem; outline: none;
      transition: border-color 0.15s; cursor: pointer; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%237596c0' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 0.5rem center;
      background-size: 0.75rem; padding-right: 1.75rem;
    }
    .rh-select:focus { border-color: rgba(192,21,42,0.45); }
    .rh-select option { background: #0d1526; color: #9fb4d4; }
    .rh-reset-btn {
      background: rgba(192,21,42,0.12); border: 1px solid rgba(192,21,42,0.28);
      color: #f87171; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.55rem 0.875rem; border-radius: 0.5rem; cursor: pointer;
      transition: all 0.15s; white-space: nowrap; align-self: flex-end;
      min-height: unset;
    }
    .rh-reset-btn:hover { background: rgba(192,21,42,0.22); border-color: rgba(248,113,113,0.45); }
    .rh-active-row {
      display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
      padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.06);
    }
    .rh-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      background: rgba(192,21,42,0.15); border: 1px solid rgba(192,21,42,0.3);
      border-radius: 999px; padding: 0.15rem 0.5rem 0.15rem 0.6rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem;
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #f87171;
      cursor: pointer; transition: all 0.15s;
    }
    .rh-chip:hover { background: rgba(192,21,42,0.25); }
    .rh-chip svg { width: 0.6rem; height: 0.6rem; opacity: 0.7; }
    /* Card hidden state */
    .agenda-card.rh-hidden { display: none !important; }

    /* ═══════ PEOPLE'S MANDATE — ULTRA BOLD SECTION STYLES ═══════ */
    @keyframes mandate-shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    @keyframes mandate-pulse-glow {
      0%, 100% { box-shadow: 0 0 30px rgba(245,200,66,0.2), 0 0 80px rgba(192,21,42,0.12); }
      50% { box-shadow: 0 0 50px rgba(245,200,66,0.35), 0 0 100px rgba(192,21,42,0.2); }
    }
    @keyframes mandate-border-flow {
      0% { border-color: rgba(245,200,66,0.5); }
      25% { border-color: rgba(192,21,42,0.6); }
      50% { border-color: rgba(59,130,246,0.6); }
      75% { border-color: rgba(245,200,66,0.6); }
      100% { border-color: rgba(245,200,66,0.5); }
    }
    @keyframes mandate-sparkle {
      0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
      50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
    }
    @keyframes mandate-star-float {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
      33% { transform: translateY(-8px) rotate(120deg); opacity: 1; }
      66% { transform: translateY(4px) rotate(240deg); opacity: 0.7; }
    }
    @keyframes mandate-btn-glow {
      0%, 100% { box-shadow: 0 6px 35px rgba(192,21,42,0.55), 0 0 65px rgba(245,200,66,0.18), 0 0 120px rgba(192,21,42,0.12); }
      50% { box-shadow: 0 8px 45px rgba(192,21,42,0.75), 0 0 85px rgba(245,200,66,0.28), 0 0 150px rgba(192,21,42,0.18); }
    }
    @keyframes mandate-gradient-sweep {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes mandate-title-glow {
      0%, 100% { filter: drop-shadow(0 2px 14px rgba(245,200,66,0.4)) drop-shadow(0 0 28px rgba(192,21,42,0.22)); }
      50% { filter: drop-shadow(0 2px 22px rgba(245,200,66,0.7)) drop-shadow(0 0 55px rgba(192,21,42,0.42)) drop-shadow(0 0 70px rgba(59,130,246,0.22)); }
    }
    @keyframes mandate-subtitle-pulse {
      0%, 100% { text-shadow: 0 0 30px rgba(245,200,66,0.5), 0 0 60px rgba(245,200,66,0.18); transform: scale(1); }
      50% { text-shadow: 0 0 48px rgba(245,200,66,0.9), 0 0 95px rgba(255,215,90,0.5), 0 0 130px rgba(192,21,42,0.22); transform: scale(1.035); }
    }
    #agenda.mandate-section {
      background: linear-gradient(175deg, rgba(8,10,35,0.98) 0%, rgba(25,12,40,0.95) 20%, rgba(12,18,55,0.97) 45%, rgba(30,10,30,0.95) 70%, rgba(8,12,40,0.98) 100%);
      border-top: 3px solid;
      border-bottom: 3px solid;
      border-image: linear-gradient(90deg, transparent 2%, #f5c842 15%, #c0152a 35%, #3b82f6 55%, #f5c842 75%, #c0152a 90%, transparent 98%) 1;
      position: relative;
      overflow: hidden;
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    #agenda.mandate-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 90% 60% at 50% -5%, rgba(245,200,66,0.1) 0%, transparent 65%),
                  radial-gradient(ellipse 70% 50% at 15% 85%, rgba(59,130,246,0.08) 0%, transparent 55%),
                  radial-gradient(ellipse 70% 50% at 85% 85%, rgba(192,21,42,0.08) 0%, transparent 55%),
                  radial-gradient(circle at 50% 50%, rgba(245,200,66,0.03) 0%, transparent 40%);
      pointer-events: none;
    }
    #agenda.mandate-section::after {
      content: '✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★ ✦';
      position: absolute;
      top: 12px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0.6rem;
      letter-spacing: 2rem;
      color: rgba(245,200,66,0.2);
      pointer-events: none;
      animation: mandate-sparkle 4s ease-in-out infinite;
    }
    .mandate-header-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: linear-gradient(135deg, rgba(245,200,66,0.2), rgba(192,21,42,0.15), rgba(59,130,246,0.1));
      border: 2px solid rgba(245,200,66,0.45);
      border-radius: 999px;
      padding: 0.5rem 1.5rem;
      margin-bottom: 1.5rem;
      animation: mandate-border-flow 4s ease infinite;
      box-shadow: 0 2px 20px rgba(245,200,66,0.1);
    }
    .mandate-star-accents {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .mandate-star-accents span {
      position: absolute;
      color: rgba(245,200,66,0.15);
      animation: mandate-star-float 6s ease-in-out infinite;
    }
    .mandate-title {
      background: linear-gradient(135deg, #ffffff 0%, #ffd75a 18%, #ffffff 33%, #ff5e5e 50%, #4f9dff 65%, #ffd75a 80%, #ffffff 100%);
      background-size: 300% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: mandate-shimmer 5s linear infinite, mandate-title-glow 3.2s ease-in-out infinite;
      line-height: 1.1;
    }
    .mandate-subtitle {
      color: #ffd75a;
      text-shadow: 0 0 35px rgba(245,200,66,0.45), 0 0 65px rgba(245,200,66,0.18);
      font-size: 1.85rem;
      animation: mandate-subtitle-pulse 3s ease-in-out infinite;
    }
    .mandate-tagline {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(147,197,253,0.8);
      margin-top: 0.5rem;
    }
    .mandate-tagline .star-sep {
      color: rgba(245,200,66,0.5);
      font-size: 0.6rem;
    }
    .mandate-desc {
      color: #d4e0f0;
      max-width: 48rem;
      margin: 0 auto;
      font-size: 1.15rem;
      line-height: 1.95;
    }
    .mandate-desc strong {
      color: #f5c842;
      font-weight: 700;
      text-shadow: 0 0 12px rgba(245,200,66,0.2);
    }
    .mandate-desc .desc-highlight {
      color: #f87171;
      font-weight: 600;
    }
    .mandate-desc .desc-blue {
      color: #93c5fd;
      font-weight: 600;
    }
    .mandate-submit-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.85rem;
      background: linear-gradient(135deg, #b5102a, #e8243b 40%, #c0152a 70%, #d41832);
      background-size: 250% auto;
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 1.25rem 3.25rem;
      border-radius: 1rem;
      border: 2.5px solid rgba(245,200,66,0.6);
      animation: mandate-btn-glow 3s ease-in-out infinite;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
      position: relative;
      overflow: hidden;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .mandate-submit-btn::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(135deg, transparent 30%, rgba(245,200,66,0.2) 50%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s;
      transform: rotate(25deg);
    }
    .mandate-submit-btn::after {
      content: '✦';
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.7rem;
      color: rgba(245,200,66,0.6);
      animation: mandate-sparkle 2s ease-in-out infinite;
    }
    @media (hover: hover) {
      .mandate-submit-btn:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 12px 48px rgba(192,21,42,0.6), 0 0 80px rgba(245,200,66,0.3), 0 0 160px rgba(192,21,42,0.15);
        border-color: rgba(245,200,66,0.9);
        background-position: right center;
      }
      .mandate-submit-btn:hover::before {
        opacity: 1;
      }
    }
    .mandate-submit-btn:active {
      transform: scale(0.97);
    }
    .mandate-submit-btn .btn-icon {
      width: 2.25rem;
      height: 2.25rem;
      background: linear-gradient(135deg, rgba(245,200,66,0.4), rgba(255,255,255,0.18));
      border: 1.5px solid rgba(245,200,66,0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 12px rgba(245,200,66,0.25);
    }
    .mandate-stat-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1.75rem;
      padding: 1.5rem 2.5rem;
      background: linear-gradient(135deg, rgba(245,200,66,0.08), rgba(59,130,246,0.06), rgba(192,21,42,0.08));
      border: 1px solid rgba(245,200,66,0.2);
      border-radius: 1.25rem;
      margin-bottom: 2.5rem;
      box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .mandate-stat {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.3rem 0;
    }
    .mandate-stat-num {
      font-family: 'Teko', sans-serif;
      font-size: 2.25rem;
      line-height: 1;
      font-weight: 700;
    }
    .mandate-stat-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #8899b4;
    }
    .mandate-stat-divider {
      width: 1px;
      height: 2.5rem;
      background: linear-gradient(180deg, transparent, rgba(245,200,66,0.4), transparent);
    }

    /* ═══════ THE PEOPLE'S PROPOSALS — live participation layer ═══════ */
    .pp-section {
      margin-top: 3.5rem;
      padding-top: 2.75rem;
      border-top: 1px solid rgba(245,200,66,0.18);
      position: relative;
    }
    .pp-section::before {
      /* A subtle gold seam so the community board reads as its own chapter. */
      content: '';
      position: absolute;
      top: -1px; left: 50%;
      transform: translateX(-50%);
      width: 160px; height: 3px;
      background: linear-gradient(90deg, transparent, #f5c842, transparent);
      box-shadow: 0 0 14px rgba(245,200,66,0.5);
    }
    .pp-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.35rem 1rem;
      border: 1px solid rgba(74,222,128,0.3);
      border-radius: 999px;
      background: rgba(74,222,128,0.07);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 700;
      color: #4ade80;
      margin-bottom: 0.9rem;
    }
    .pp-title {
      font-size: clamp(2rem, 6vw, 3.5rem);
      line-height: 1.02;
      color: #fff;
      margin-bottom: 0.6rem;
      text-shadow: 0 2px 24px rgba(245,200,66,0.18);
    }
    .pp-subtitle {
      max-width: 40rem;
      margin: 0 auto;
      color: #9fb4d4;
      font-size: 0.95rem;
      line-height: 1.6;
    }
    .pp-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin: 1.75rem 0 1.5rem;
      padding: 0.85rem 1.1rem;
      background: linear-gradient(135deg, rgba(245,200,66,0.06), rgba(59,130,246,0.05));
      border: 1px solid rgba(245,200,66,0.16);
      border-radius: 1rem;
    }
    .pp-livestat {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 0.03em;
      color: #c7d3e6;
    }
    .pp-stat-num { color: #f5c842; font-weight: 700; }
    .pp-dot { color: rgba(245,200,66,0.5); margin: 0 0.15rem; }
    .pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
    .pp-sort {
      display: inline-flex;
      padding: 0.2rem;
      background: rgba(10,15,30,0.6);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.7rem;
    }
    .pp-sort-btn {
      appearance: none;
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      color: #8899b4;
      padding: 0.4rem 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.2s ease;
    }
    .pp-sort-btn.is-active {
      background: rgba(245,200,66,0.15);
      color: #f5c842;
      box-shadow: inset 0 0 0 1px rgba(245,200,66,0.3);
    }
    .pp-sort-btn:not(.is-active):hover { color: #c7d3e6; }
    .pp-propose-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 700;
      color: #fff;
      padding: 0.55rem 1.1rem;
      border-radius: 0.7rem;
      background: linear-gradient(135deg, #c0152a, #e0243b);
      border: 1px solid rgba(245,200,66,0.35);
      box-shadow: 0 4px 16px rgba(192,21,42,0.35);
      transition: transform 0.15s ease, box-shadow 0.2s ease;
    }
    .pp-propose-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(192,21,42,0.45); }
    .pp-propose-btn:active { transform: scale(0.97); }
    .pp-propose-btn--lg { font-size: 0.82rem; padding: 0.8rem 1.6rem; }
    .pp-state {
      text-align: center;
      padding: 3rem 1rem;
    }
    .pp-spinner {
      width: 2.25rem; height: 2.25rem;
      margin: 0 auto;
      border: 3px solid rgba(245,200,66,0.2);
      border-top-color: #f5c842;
      border-radius: 50%;
      animation: pp-spin 0.8s linear infinite;
    }
    @keyframes pp-spin { to { transform: rotate(360deg); } }
    .pp-retry-btn {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.72rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: #f5c842; cursor: pointer;
      padding: 0.5rem 1.25rem;
      border: 1px solid rgba(245,200,66,0.4);
      border-radius: 0.6rem;
      background: rgba(245,200,66,0.08);
      transition: background 0.2s ease;
    }
    .pp-retry-btn:hover { background: rgba(245,200,66,0.16); }
    .pp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.25rem;
    }
    /* One community proposal card. Mirrors the curated card aesthetic but with a
       green (community) accent so the two sources are visually distinguishable. */
    .pp-card {
      display: flex;
      flex-direction: column;
      background: linear-gradient(150deg, rgba(18,28,58,0.97), rgba(12,18,42,0.99));
      border: 1px solid rgba(74,222,128,0.18);
      border-radius: 1.25rem;
      overflow: hidden;
      position: relative;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s;
      animation: pp-card-in 0.4s ease both;
    }
    @keyframes pp-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .pp-card::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #4ade80, rgba(255,255,255,0.12), #4ade80);
      opacity: 0.8;
    }
    @media (hover: hover) {
      .pp-card:hover {
        transform: translateY(-5px);
        border-color: rgba(74,222,128,0.45);
        box-shadow: 0 16px 44px rgba(0,0,0,0.45), 0 0 28px rgba(74,222,128,0.12);
      }
    }
    .pp-card-body { padding: 1.1rem 1.15rem 0.5rem; flex: 1; }
    .pp-card-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
    .pp-tag {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
      color: #4ade80;
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      background: rgba(74,222,128,0.12);
      border: 1px solid rgba(74,222,128,0.28);
    }
    .pp-badge-new {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
      color: #f5c842;
      padding: 0.12rem 0.45rem; border-radius: 999px;
      background: rgba(245,200,66,0.14); border: 1px solid rgba(245,200,66,0.3);
    }
    .pp-community-chip {
      margin-left: auto;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #8899b4;
    }
    /* ── Linked politicians (proposal → profile) ──────────────────────────────
       A compact row of clickable chips on a proposal card, plus the matching
       chips inside the submit modal's picker. Gold accent so a "who this affects"
       link reads distinctly from the green category/support system. */
    .pp-linked {
      display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
      margin: 0.1rem 0 0.7rem;
    }
    .pp-linked-lead {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #7a8aa8; margin-right: 0.05rem;
    }
    .pp-link-chip {
      display: inline-flex; align-items: center; gap: 0.28rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.62rem; letter-spacing: 0.06em; font-weight: 700;
      color: #f5c842;
      padding: 0.16rem 0.55rem; border-radius: 999px;
      background: rgba(245,200,66,0.1); border: 1px solid rgba(245,200,66,0.3);
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    @media (hover: hover) {
      .pp-link-chip:hover { background: rgba(245,200,66,0.2); border-color: rgba(245,200,66,0.6); transform: translateY(-1px); }
    }
    .pp-link-chip .pp-link-x {
      font-size: 0.72rem; line-height: 1; color: #c7b061; margin-left: 0.1rem;
    }
    @media (hover: hover) {
      .pp-link-chip.is-removable:hover .pp-link-x { color: #fff; }
    }
    /* Submit-modal politician picker */
    .pp-picker-wrap { position: relative; }
    .pp-picker-results {
      position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
      max-height: 220px; overflow-y: auto;
      background: #0d1424; border: 1px solid rgba(255,255,255,0.12);
      border-radius: 0.85rem; box-shadow: 0 18px 40px rgba(0,0,0,0.55);
      padding: 0.3rem;
    }
    .pp-picker-opt {
      display: flex; align-items: center; gap: 0.6rem; width: 100%;
      text-align: left; cursor: pointer;
      padding: 0.5rem 0.6rem; border-radius: 0.6rem;
      background: transparent; border: none; color: #dce6f5;
      transition: background 0.12s ease;
    }
    .pp-picker-opt:hover, .pp-picker-opt.is-active { background: rgba(245,200,66,0.12); }
    .pp-picker-opt .pp-opt-name { font-family: 'Barlow', sans-serif; font-size: 0.85rem; color: #fff; line-height: 1.15; }
    .pp-picker-opt .pp-opt-office { font-family: 'Barlow Condensed', sans-serif; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7596c0; }
    .pp-picker-empty { padding: 0.7rem 0.75rem; font-size: 0.78rem; color: #7a8aa8; font-family: 'Barlow', sans-serif; }
    .pp-picker-selected { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
    /* Chips inside the picker animate in on select so multi-select feels tactile.
       Scoped to the picker (not cards) so the card list never re-pops on refresh. */
    @keyframes ppChipIn { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
    .pp-picker-selected .pp-link-chip { animation: ppChipIn 0.16s ease; }
    /* Overflow marker when a card links more politicians than we show inline. */
    .pp-link-more {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem; letter-spacing: 0.06em; font-weight: 700;
      color: #9db0cc; padding: 0.16rem 0.5rem; border-radius: 999px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    }
    /* ── Team-aware Mandate (Phase 3) ─────────────────────────────────────────
       A proposal that touches someone the visitor actually follows — one of
       their representatives or a politician they've starred — earns a gold cue
       layered over the green community accent, so "this concerns your team"
       reads at a glance without hiding that it's still a community proposal. */
    .pp-card.is-team {
      border-color: rgba(245,200,66,0.55);
      box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,200,66,0.18) inset;
    }
    .pp-card.is-team::after {
      background: linear-gradient(90deg, #f5c842, rgba(255,255,255,0.14), #f5c842);
      opacity: 0.9;
    }
    @media (hover: hover) {
      .pp-card.is-team:hover {
        border-color: rgba(245,200,66,0.75);
        box-shadow: 0 16px 44px rgba(0,0,0,0.45), 0 0 28px rgba(245,200,66,0.16);
      }
    }
    /* The "on your team" pill in a card's top row. */
    .pp-team-badge {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
      color: #f5c842;
      padding: 0.12rem 0.5rem; border-radius: 999px;
      background: rgba(245,200,66,0.16); border: 1px solid rgba(245,200,66,0.4);
    }
    .pp-team-badge.is-rep {
      color: #ffe08a;
      background: rgba(245,200,66,0.22); border-color: rgba(245,200,66,0.6);
    }
    /* A linked chip that resolves to someone on the visitor's team is emphasized
       over the neutral chips beside it. */
    .pp-link-chip.is-team {
      color: #ffe08a;
      background: rgba(245,200,66,0.22); border-color: rgba(245,200,66,0.62);
    }
    /* The "Involves my team" filter toggle, sitting beside the sort controls.
       Hidden entirely until the visitor actually has a team to filter against. */
    .pp-team-btn {
      display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
      color: #c7d3e6;
      padding: 0.4rem 0.85rem; border-radius: 999px;
      background: rgba(245,200,66,0.08); border: 1px solid rgba(245,200,66,0.3);
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    @media (hover: hover) {
      .pp-team-btn:hover { background: rgba(245,200,66,0.16); border-color: rgba(245,200,66,0.5); color: #fff; }
    }
    .pp-team-btn.is-active {
      color: #10151f;
      background: linear-gradient(135deg, #f5c842, #e0a82e);
      border-color: rgba(245,200,66,0.9);
    }
    /* Friendly in-grid message when the team filter is on but nothing matches. */
    .pp-team-empty {
      grid-column: 1 / -1;
      text-align: center; padding: 2.25rem 1rem;
      color: #9fb4d4; font-family: 'Barlow', sans-serif;
    }
    .pp-team-empty .pp-team-empty-cta {
      background: none; border: none; cursor: pointer; padding: 0;
      color: #f5c842; font-weight: 700; text-decoration: underline;
    }
    /* Roomier tap targets + type on phones so the linking UI stays thumb-friendly. */
    @media (max-width: 640px) {
      .pp-link-chip { padding: 0.3rem 0.62rem; font-size: 0.68rem; }
      .pp-link-chip .pp-link-x { font-size: 0.82rem; }
      .pp-picker-opt { padding: 0.7rem 0.65rem; }
      .pp-picker-results { max-height: 46vh; }
    }
    /* Related Proposals rows inside a politician profile modal */
    .pdx-related-block { margin: 1.25rem 0; padding: 1rem 1.05rem; border-radius: 0.9rem;
      background: linear-gradient(135deg, rgba(245,200,66,0.07) 0%, rgba(10,15,30,0.4) 100%);
      border: 1px solid rgba(245,200,66,0.25); }
    .pdx-related-item {
      display: flex; align-items: center; gap: 0.75rem; width: 100%; cursor: pointer;
      padding: 0.6rem 0.7rem; border-radius: 0.7rem; text-align: left;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.07);
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    @media (hover: hover) {
      .pdx-related-item:hover { background: rgba(245,200,66,0.1); border-color: rgba(245,200,66,0.45); transform: translateY(-1px); }
    }
    .pdx-related-item:active { transform: scale(0.99); }
    .pp-card-title {
      font-family: 'Teko', sans-serif;
      font-size: 1.35rem; line-height: 1.1; letter-spacing: 0.02em;
      color: #fff; margin-bottom: 0.4rem;
    }
    .pp-card-desc {
      font-size: 0.82rem; line-height: 1.55; color: #9fb4d4;
      margin-bottom: 0.6rem;
    }
    .pp-card-meta {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.68rem; letter-spacing: 0.05em; color: #7a8aa8;
    }
    .pp-card-foot {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.75rem 1.15rem 1rem;
    }
    .pp-support-btn {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
      cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
      color: #4ade80;
      padding: 0.55rem 0.75rem;
      border-radius: 0.7rem;
      background: rgba(74,222,128,0.07);
      border: 1.5px solid rgba(74,222,128,0.28);
      transition: all 0.18s ease;
    }
    @media (hover: hover) {
      .pp-support-btn:hover { background: rgba(74,222,128,0.15); box-shadow: 0 4px 16px rgba(74,222,128,0.2); }
    }
    .pp-support-btn:active { transform: scale(0.96); }
    .pp-support-btn.is-supported {
      background: rgba(74,222,128,0.2);
      border-color: rgba(74,222,128,0.7);
      color: #86efac;
    }
    .pp-support-btn .pp-heart { transition: transform 0.2s ease; }
    .pp-support-btn.is-supported .pp-heart { transform: scale(1.15); }
    .pp-support-count {
      font-family: 'Teko', sans-serif;
      font-size: 1.05rem; font-weight: 700; min-width: 1.5ch; text-align: center;
      color: #f5c842;
    }
    @media (max-width: 640px) {
      .pp-controls { flex-direction: column; align-items: stretch; }
      .pp-actions { justify-content: space-between; }
      .pp-grid { grid-template-columns: 1fr; }
    }
    /* ═══════ END THE PEOPLE'S PROPOSALS ═══════ */


    /* Mandate card overrides — ultra-bold version */
    #agenda.mandate-section .agenda-card {
      background: linear-gradient(150deg, rgba(18,28,58,0.97), rgba(12,18,42,0.99)) !important;
      border: 1px solid rgba(245,200,66,0.15) !important;
      border-radius: 1.25rem !important;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      transition: all 0.35s cubic-bezier(0.4,0,0.2,1) !important;
    }
    #agenda.mandate-section .agenda-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--card-accent, #f5c842), rgba(255,255,255,0.1), var(--card-accent, #f5c842));
      opacity: 0.85;
      pointer-events: none;
    }
    @media (hover: hover) {
      #agenda.mandate-section .agenda-card:hover {
        transform: translateY(-6px) scale(1.01) !important;
        border-color: var(--card-accent, rgba(245,200,66,0.35)) !important;
        box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 30px var(--card-glow, rgba(245,200,66,0.12)) !important;
      }
    }
    #agenda.mandate-section .agenda-card .text-2xl.flex-shrink-0 {
      font-size: 1.85rem;
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.85rem;
      background: var(--card-icon-bg, rgba(245,200,66,0.12));
      border: 1.5px solid var(--card-icon-border, rgba(245,200,66,0.25));
      box-shadow: 0 4px 16px var(--card-glow, rgba(245,200,66,0.1)), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    #agenda.mandate-section .issue-pill {
      background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(139,92,246,0.08)) !important;
      border: 1px solid rgba(59,130,246,0.25) !important;
      color: #93c5fd !important;
      font-weight: 600 !important;
    }
    #agenda.mandate-section .agenda-vote-up {
      background: rgba(74,222,128,0.06);
      border-width: 1.5px !important;
    }
    #agenda.mandate-section .agenda-vote-down {
      background: rgba(248,113,113,0.06);
      border-width: 1.5px !important;
    }
    @media (hover: hover) {
      #agenda.mandate-section .agenda-vote-up:hover {
        background: rgba(74,222,128,0.15);
        box-shadow: 0 4px 16px rgba(74,222,128,0.2);
      }
      #agenda.mandate-section .agenda-vote-down:hover {
        background: rgba(248,113,113,0.15);
        box-shadow: 0 4px 16px rgba(248,113,113,0.2);
      }
    }
    #agenda.mandate-section #agenda-grid {
      gap: 1.5rem !important;
    }

    /* CTA card override — ultra bold */
    #agenda.mandate-section .rh-cta-card {
      background: linear-gradient(150deg, rgba(192,21,42,0.15), rgba(245,200,66,0.04), rgba(20,25,50,0.95)) !important;
      border: 2px dashed rgba(245,200,66,0.35) !important;
      border-radius: 1.25rem !important;
      animation: mandate-pulse-glow 3s ease infinite;
    }
    @media (hover: hover) {
      #agenda.mandate-section .rh-cta-card:hover {
        border-color: rgba(245,200,66,0.6) !important;
        background: linear-gradient(150deg, rgba(192,21,42,0.22), rgba(245,200,66,0.06), rgba(20,25,50,0.9)) !important;
        transform: translateY(-4px) !important;
      }
    }
    #agenda.mandate-section .rh-cta-card .w-14 {
      width: 4.5rem !important;
      height: 4.5rem !important;
      border-radius: 1.25rem !important;
      background: linear-gradient(135deg, rgba(245,200,66,0.2), rgba(192,21,42,0.15)) !important;
      border: 1.5px solid rgba(245,200,66,0.4) !important;
      font-size: 2.25rem !important;
      box-shadow: 0 4px 24px rgba(245,200,66,0.15) !important;
    }

    .mandate-bottom-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
      padding: 1.5rem 0 0;
      border-top: 2px solid;
      border-image: linear-gradient(90deg, transparent, rgba(245,200,66,0.2), rgba(192,21,42,0.2), transparent) 1;
    }
    .mandate-bottom-cta {
      background: linear-gradient(135deg, rgba(192,21,42,0.2), rgba(245,200,66,0.1));
      border: 2px solid rgba(245,200,66,0.4);
      color: #f5c842;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.75rem 1.75rem;
      border-radius: 0.85rem;
      transition: all 0.3s;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(245,200,66,0.08);
    }
    @media (hover: hover) {
      .mandate-bottom-cta:hover {
        background: linear-gradient(135deg, rgba(192,21,42,0.35), rgba(245,200,66,0.2));
        border-color: rgba(245,200,66,0.7);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(245,200,66,0.2);
      }
    }
    @media (max-width: 640px) {
      .mandate-stat-bar { gap: 0.75rem; padding: 1rem 0.85rem; border-radius: 1rem; }
      .mandate-stat-num { font-size: 1.65rem; }
      .mandate-stat-label { font-size: 0.62rem; }
      .mandate-stat-divider { display: none; }
      .mandate-stat { gap: 0.5rem; }
      .mandate-submit-btn {
        padding: 1.15rem 2.25rem;
        font-size: 1rem;
        border-radius: 0.85rem;
        width: 100%;
        max-width: 380px;
        justify-content: center;
      }
      .mandate-submit-btn .btn-icon {
        width: 2.25rem;
        height: 2.25rem;
      }
      #agenda.mandate-section .agenda-card .text-2xl.flex-shrink-0 { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
      .mandate-desc { font-size: 0.98rem; line-height: 1.8; padding: 0 0.25rem; }
      .mandate-subtitle { font-size: 1.5rem; }
      .mandate-title { padding: 0 0.25rem !important; }
      .mandate-tagline { font-size: 0.68rem; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
      .mandate-header-badge { padding: 0.45rem 1.15rem; gap: 0.5rem; }
      .mandate-header-badge .font-condensed { font-size: 0.68rem; }
      #agenda.mandate-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
      #agenda.mandate-section::after { letter-spacing: 1rem; font-size: 0.5rem; top: 8px; }
      .mandate-star-accents span { font-size: 0.5rem !important; }
      .mandate-bottom-bar { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 1.25rem; }
      .mandate-bottom-cta { text-align: center; padding: 0.85rem 1.5rem; font-size: 0.78rem; }
      #agenda.mandate-section #agenda-grid { gap: 1rem !important; }
    }
    @media (max-width: 400px) {
      .mandate-title { font-size: 2.5rem !important; }
      .mandate-subtitle { font-size: 1.25rem; }
      .mandate-desc { font-size: 0.92rem; }
      .mandate-submit-btn { padding: 1rem 1.5rem; font-size: 0.92rem; }
    }
    /* ═══════ MANDATE QUICK-JUMP NAV ═══════
       Sticky, horizontally-scrollable pill bar that maps the People's Mandate
       section. Sticks just below the global fixed navbar while the section is
       on screen. Pills, active-state and count badge all echo the section's
       gold-on-dark language. */
    .mandate-jump {
      position: sticky;
      top: 62px;                 /* clears the global fixed navbar */
      z-index: 30;
      display: flex;
      gap: 0.5rem;
      max-width: 72rem;
      margin: 0 auto 2.25rem;
      padding: 0.5rem;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;              /* Firefox */
      -webkit-overflow-scrolling: touch;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(13,21,38,0.92), rgba(10,15,30,0.92));
      border: 1px solid rgba(245,200,66,0.22);
      box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    .mandate-jump::-webkit-scrollbar { display: none; }   /* Chrome/Safari/Edge */
    .mandate-jump-pill {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-height: 44px;          /* ≥44px touch target */
      padding: 0.4rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      color: #cbd5e1;
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    }
    .mandate-jump-pill[hidden] { display: none; }
    .mandate-jump-pill .mj-ico { font-size: 0.95rem; line-height: 1; }
    .mandate-jump-pill .mj-count {
      min-width: 1.1rem;
      padding: 0 0.35rem;
      border-radius: 999px;
      background: rgba(245,200,66,0.16);
      border: 1px solid rgba(245,200,66,0.3);
      color: #f5c842;
      font-size: 0.6rem;
      line-height: 1.05rem;
      text-align: center;
    }
    .mandate-jump-pill:hover {
      color: #fff;
      background: rgba(245,200,66,0.1);
      border-color: rgba(245,200,66,0.35);
      transform: translateY(-1px);
    }
    .mandate-jump-pill:focus-visible {
      outline: 2px solid #f5c842;
      outline-offset: 2px;
    }
    .mandate-jump-pill.is-active {
      color: #0a0f1e;
      background: linear-gradient(135deg, #fad96a, #e6b800);
      border-color: rgba(245,200,66,0.9);
      box-shadow: 0 0 16px rgba(245,200,66,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .mandate-jump-pill.is-active .mj-count {
      background: rgba(10,15,30,0.18);
      border-color: rgba(10,15,30,0.25);
      color: #0a0f1e;
    }
    /* Stopping point below the global nav + sticky jump bar for each target. */
    #mandate-overview, #mandate-stats, #rh-filter-bar, #agenda-grid, #mandate-submit {
      scroll-margin-top: 120px;
    }
    @media (prefers-reduced-motion: reduce) {
      .mandate-jump-pill { transition: none; }
      .mandate-jump-pill:hover { transform: none; }
    }
    @media (max-width: 640px) {
      .mandate-jump { top: 58px; border-radius: 1rem; margin-bottom: 1.5rem; }
      .mandate-jump-pill { font-size: 0.66rem; padding: 0.4rem 0.8rem; }
    }
    /* ═══════ END PEOPLE'S MANDATE STYLES ═══════ */

    /* Active filter highlight on selects */
    .rh-select.rh-active { border-color: rgba(192,21,42,0.5); color: white; }
    @media (max-width: 640px) {
      .rh-filter-wrap { flex: 1 1 calc(50% - 0.25rem); }
      .rh-reset-btn { flex: 0 0 auto; align-self: flex-end; }
    }


    /* ── Pokédex-style Profile Directory ────────────────────── */
    .dir-card-photo {
      width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
      flex-shrink: 0; border: 2px solid rgba(255,255,255,0.1);
      background: rgba(30,53,96,0.4); transition: border-color 0.2s;
    }
    .dir-card:hover .dir-card-photo { border-color: rgba(192,21,42,0.5); }
    .dir-card-photo img { width:100%; height:100%; object-fit:cover; object-position:top center; }
    .modal-headshot {
      width: 150px; height: 150px; border-radius: 1rem; overflow: hidden;
      flex-shrink: 0; border: 3px solid rgba(255,255,255,0.15);
      box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.07), 0 0 20px rgba(192,21,42,0.1);
    }
    .modal-headshot img { width:100%; height:100%; object-fit:cover; object-position:top center; }
    /* Score legend pills */
    .score-legend-dot {
      display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%;
    }
    /* Photo shimmer loading */
    @keyframes imgShimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .img-loading {
      background: linear-gradient(90deg, rgba(30,53,96,0.4) 25%, rgba(59,100,160,0.2) 50%, rgba(30,53,96,0.4) 75%);
      background-size: 200% 100%;
      animation: imgShimmer 1.5s infinite;
    }


    /* ── Voter Empowerment Hub ─────────────────────────────── */
    .veh-tool-card {
      background: rgba(10,15,30,0.7);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1rem;
      padding: 1.25rem;
      transition: border-color 0.2s, background 0.2s, transform 0.18s;
      cursor: pointer;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .veh-tool-card:hover {
      border-color: rgba(192,21,42,0.4);
      background: rgba(192,21,42,0.06);
      transform: translateY(-2px);
    }
    .veh-tool-card .veh-icon {
      font-size: 1.75rem;
      line-height: 1;
    }
    .veh-tool-card .veh-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1rem;
      letter-spacing: 0.07em;
      color: white;
    }
    .veh-tool-card .veh-desc {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      color: #7596c0;
      line-height: 1.45;
    }
    .veh-featured-card {
      background: rgba(10,15,30,0.7);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.875rem;
      padding: 1rem;
      display: flex;
      align-items: center;
      gap: 0.875rem;
      transition: border-color 0.2s, background 0.2s;
    }
    .veh-featured-card:hover {
      border-color: rgba(245,200,66,0.35);
      background: rgba(245,200,66,0.04);
    }
    .veh-score-badge {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      line-height: 1;
      flex-shrink: 0;
      width: 3.5rem;
      text-align: center;
    }
    .veh-example-card {
      background: rgba(10,15,30,0.6);
      border-left: 3px solid rgba(192,21,42,0.6);
      border-radius: 0 0.625rem 0.625rem 0;
      padding: 1rem 1.125rem;
    }


    /* ── Power Map Tree ─────────────────────────────────────── */

    /* ── Quick Find + Issue Filters ─────────────────────── */
    .pm-search-filters { margin-bottom: 1rem; }
    .pm-search-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(10,15,30,0.7);
      border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.75rem;
      padding: 0.6rem 1rem;
      margin-bottom: 0.75rem;
      transition: border-color 0.2s;
    }
    .pm-search-bar:focus-within {
      border-color: rgba(192,21,42,0.5);
    }
    .pm-search-bar svg { flex-shrink: 0; color: #7596c0; }
    .pm-search-bar input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
    }
    .pm-search-bar input::placeholder { color: #4a6384; }
    .pm-filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      align-items: center;
    }
    .pm-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      background: rgba(30,53,96,0.6);
      border: 1px solid rgba(159,180,212,0.18);
      border-radius: 0.45rem;
      padding: 0.3rem 0.65rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #9fb4d4;
      cursor: pointer;
      transition: all 0.18s ease;
      user-select: none;
    }
    .pm-filter-chip:hover {
      border-color: rgba(192,21,42,0.5);
      background: rgba(192,21,42,0.1);
      color: #e8384f;
      box-shadow: 0 0 8px rgba(192,21,42,0.2), 0 0 3px rgba(59,130,246,0.15);
      transform: translateY(-1px);
    }
    .pm-filter-chip.active {
      background: rgba(192,21,42,0.2);
      border-color: rgba(192,21,42,0.5);
      color: #fff;
      box-shadow: 0 0 10px rgba(192,21,42,0.18);
    }
    .pm-clear-filters-btn {
      display: none;
      align-items: center;
      gap: 0.3rem;
      background: none;
      border: 1px solid rgba(248,113,113,0.25);
      border-radius: 0.45rem;
      padding: 0.3rem 0.65rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #f87171;
      cursor: pointer;
      transition: all 0.18s;
    }
    .pm-clear-filters-btn:hover {
      background: rgba(248,113,113,0.1);
      border-color: rgba(248,113,113,0.4);
    }
    .pm-no-results {
      display: none;
      text-align: center;
      padding: 2rem 1rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.05em;
      color: #7596c0;
    }

    .pm-national-badge {
      display: none;
      align-items: center;
      gap: 0.35rem;
      padding: 0.22rem 0.55rem;
      border-radius: 0.5rem 0.5rem 0 0;
      background: linear-gradient(135deg, rgba(30,58,138,0.2), rgba(127,29,29,0.12));
      border-bottom: 1px solid rgba(96,165,250,0.08);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.5rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(147,197,253,0.5);
      line-height: 1;
      opacity: 0.85;
    }
    .pm-national-badge .pm-nb-icon {
      font-size: 0.7rem;
      line-height: 1;
      opacity: 0.8;
    }
    .pm-national-badge .pm-nb-dot {
      width: 3px; height: 3px;
      border-radius: 50%;
      background: rgba(248,113,113,0.45);
      flex-shrink: 0;
    }
    .pm-national-badge .pm-nb-sub {
      color: rgba(248,113,113,0.6);
      font-weight: 600;
      letter-spacing: 0.06em;
    }

    .pm-local-badge {
      display: none;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.75rem;
      border-radius: 0.5rem 0.5rem 0 0;
      background: linear-gradient(135deg, rgba(16,185,80,0.25), rgba(6,78,59,0.45));
      border-bottom: 1px solid rgba(74,222,128,0.45);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4ade80;
      line-height: 1;
      box-shadow: 0 0 18px rgba(74,222,128,0.25), inset 0 0 14px rgba(52,211,153,0.1);
      animation: pm-local-glow 2s ease-in-out infinite alternate;
    }
    @keyframes pm-local-glow {
      0%   { box-shadow: 0 0 12px rgba(74,222,128,0.18), inset 0 0 10px rgba(52,211,153,0.06); }
      100% { box-shadow: 0 0 24px rgba(74,222,128,0.35), inset 0 0 18px rgba(52,211,153,0.12); }
    }
    .pm-local-badge .pm-lb-star {
      font-size: 0.65rem;
      line-height: 1;
    }
    .pm-local-badge .pm-lb-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(52,211,153,0.8);
      flex-shrink: 0;
    }
    .pm-local-badge .pm-lb-sub {
      color: rgba(167,243,208,0.9);
      font-weight: 600;
      letter-spacing: 0.06em;
    }

    /* ── Why This Matters line ─────────────── */
    .pm-card-why {
      display: flex;
      align-items: flex-start;
      gap: 0.4rem;
      padding: 0.4rem 0.6rem;
      margin: 0 0.5rem;
      background: linear-gradient(90deg, rgba(251,191,36,0.07), transparent);
      border-left: 2px solid rgba(251,191,36,0.4);
      border-radius: 0 0.35rem 0.35rem 0;
      font-family: 'Barlow', sans-serif;
      font-size: 0.72rem;
      line-height: 1.45;
      color: #cbd5e1;
    }
    .pm-card-why strong {
      color: #fbbf24;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 0.05rem;
    }

    /* ── Info tooltip (ⓘ) ──────────────────── */
    .pm-info-tip {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: help;
      margin-left: 0.2rem;
    }
    .pm-info-tip .pm-info-icon {
      font-size: 0.7rem;
      opacity: 0.55;
      transition: opacity 0.2s, transform 0.2s;
      line-height: 1;
    }
    .pm-info-tip:hover .pm-info-icon { opacity: 1; transform: scale(1.15); }
    .pm-info-tip .pm-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      width: 220px;
      padding: 0.55rem 0.7rem;
      background: rgba(15,23,42,0.97);
      border: 1px solid rgba(148,163,184,0.25);
      border-top: 2px solid rgba(192,21,42,0.5);
      border-radius: 0.5rem;
      font-family: 'Barlow', sans-serif;
      font-size: 0.68rem;
      font-weight: 400;
      line-height: 1.5;
      color: #cbd5e1;
      text-transform: none;
      letter-spacing: normal;
      z-index: 50;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      pointer-events: none;
    }
    .pm-info-tip:hover .pm-tooltip { display: block; }

    /* ── How-to help box ───────────────────── */
    .pm-help-box {
      background: linear-gradient(135deg, rgba(30,58,138,0.15), rgba(15,23,42,0.6));
      border: 1px solid rgba(96,165,250,0.2);
      border-radius: 0.75rem;
      padding: 0.9rem 1.1rem;
      margin-bottom: 1.5rem;
    }
    .pm-help-box-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #60a5fa;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .pm-help-box ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .pm-help-box li {
      font-family: 'Barlow', sans-serif;
      font-size: 0.75rem;
      line-height: 1.5;
      color: #94a3b8;
      padding-left: 1rem;
      position: relative;
    }
    .pm-help-box li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #60a5fa;
      font-weight: 700;
    }
    .pm-help-box li strong { color: #e2e8f0; }

    .pm-tree { position: relative; }
    .pm-tier {
      border-radius: 1rem;
      overflow: hidden;
      margin-bottom: 0;
      position: relative;
    }
    .pm-tier + .pm-tier { margin-top: 0; }
    .pm-tier-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      cursor: pointer;
      user-select: none;
      transition: background 0.18s;
      position: relative;
      z-index: 2;
    }
    .pm-tier-header:hover { filter: brightness(1.08); }
    .pm-tier-title {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.15rem;
      letter-spacing: 0.08em;
      color: white;
    }
    .pm-tier-badge {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
    }
    .pm-chevron {
      transition: transform 0.3s cubic-bezier(.4,0,.2,1);
      flex-shrink: 0;
    }
    .pm-tier.open .pm-chevron { transform: rotate(180deg); }
    .pm-tier-body {
      display: none;
      padding: 1rem 0.75rem 1.25rem;
      gap: 0;
    }
    .pm-tier.open .pm-tier-body { display: block; }

    /* ── Tree connecting lines ─────────────────────────── */
    .pm-tree-trunk {
      position: relative;
      padding-left: 2rem;
    }
    .pm-tree-trunk::before {
      content: '';
      position: absolute;
      left: 0.9rem;
      top: 0;
      bottom: 1.5rem;
      width: 2px;
      background: linear-gradient(180deg, var(--tier-color, rgba(255,255,255,0.12)), transparent);
      border-radius: 2px;
    }
    .pm-tree-branch {
      position: relative;
      margin-bottom: 0.75rem;
    }
    .pm-tree-branch:last-child { margin-bottom: 0; }
    .pm-tree-branch::before {
      content: '';
      position: absolute;
      left: -1.1rem;
      top: 1.6rem;
      width: 1.1rem;
      height: 2px;
      background: var(--tier-color, rgba(255,255,255,0.12));
    }
    .pm-tree-branch::after {
      content: '';
      position: absolute;
      left: -1.15rem;
      top: 1.25rem;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--tier-color, rgba(255,255,255,0.2));
      border: 2px solid rgba(10,15,30,0.9);
      z-index: 1;
    }

    /* ── Sub-branch groups (President->Senators->Reps) ── */
    .pm-sub-group {
      margin-bottom: 0.75rem;
    }
    .pm-sub-group:last-child { margin-bottom: 0; }
    .pm-sub-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--tier-color, #7596c0);
      margin-bottom: 0.5rem;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      opacity: 0.8;
      cursor: pointer;
      user-select: none;
      transition: opacity 0.18s;
    }
    .pm-sub-label:hover { opacity: 1; }
    .pm-sub-label::before {
      content: '';
      width: 16px;
      height: 1px;
      background: var(--tier-color, rgba(255,255,255,0.15));
      flex-shrink: 0;
    }
    .pm-sub-label::after {
      content: '▼';
      margin-left: auto;
      font-size: 0.55rem;
      transition: transform 0.3s cubic-bezier(.4,0,.2,1);
      flex-shrink: 0;
      opacity: 0.6;
    }
    .pm-sub-group.collapsed .pm-sub-label::after {
      transform: rotate(-90deg);
    }
    .pm-sub-group .pm-tree-branch {
      max-height: 2000px;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
      opacity: 1;
    }
    .pm-sub-group.collapsed .pm-tree-branch {
      max-height: 0;
      opacity: 0;
    }
    .pm-sub-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 0.65rem;
    }
    @media (max-width: 640px) {
      .pm-sub-cards { grid-template-columns: 1fr; }
      .pm-tree-trunk { padding-left: 1.4rem; }
      .pm-tree-trunk::before { left: 0.5rem; }
      .pm-tree-branch::before { left: -0.9rem; width: 0.9rem; }
      .pm-tree-branch::after { left: -0.95rem; }
    }

    /* ── Individual politician card (tree node) ────── */
    .pm-card {
      background: linear-gradient(160deg, rgba(9,14,32,0.82), rgba(5,8,22,0.86));
      border-radius: 1.1rem;
      padding: 0;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s cubic-bezier(.34,1.4,.64,1), box-shadow 0.2s, border-color 0.2s;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(6px);
      box-shadow: 0 8px 26px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 14px var(--tier-glow, rgba(192,21,42,0.05));
    }
    .pm-card:hover {
      transform: translateY(-4px) scale(1.008);
      box-shadow: 0 16px 44px rgba(0,0,0,0.46), 0 0 26px var(--tier-glow, rgba(192,21,42,0.14)), 0 0 8px rgba(59,130,246,0.1), 0 1px 0 rgba(255,255,255,0.05) inset;
      border-color: rgba(192,21,42,0.35) !important;
    }
    .pm-card-inner {
      padding: 1.4rem 1.4rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .pm-card-top {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
    }
    .pm-card-photo {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid var(--tier-color, rgba(255,255,255,0.15));
      background: rgba(30,53,96,0.5);
      position: relative;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.02);
      margin-top: 0.1rem;
    }
    .pm-card-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }
    .pm-card-photo-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      background: linear-gradient(135deg, rgba(30,53,96,0.7), rgba(10,15,30,0.8));
    }
    .pm-card-info { flex: 1; min-width: 0; padding-top: 0.1rem; }
    .pm-card-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.3rem;
      letter-spacing: 0.055em;
      color: white;
      line-height: 1.12;
    }
    .pm-card-office {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.68rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #7596c0;
      margin-top: 0.3rem;
    }
    .pm-card-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.45rem;
    }
    .pm-card-stats {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.1rem;
    }
    .pm-card-score-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(8,13,30,0.7);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 0.85rem;
      padding: 0.45rem 0.75rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.28);
      min-width: 66px;
    }
    .pm-card-score {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.95rem;
      line-height: 1;
      flex-shrink: 0;
    }
    .pm-card-score-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #7596c0;
      text-align: center;
      margin-top: 0.18rem;
    }
    /* Clean "no promise record yet" state — keeps the score pill present (never
       blank) so every Promise Tracker card reads as complete and consistent. */
    .pm-card-score.pm-card-score-na {
      color: #5f7798;
      font-size: 1.5rem;
    }
    .pm-card-score-norec {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.46rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #647a9c;
      text-align: center;
      margin-top: 0.1rem;
      line-height: 1.05;
    }
    .pm-card-impact {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.03em;
      color: #9fb4d4;
      line-height: 1.55;
      border-top: 1px solid rgba(255,255,255,0.07);
      padding-top: 0.7rem;
      margin-top: 0.1rem;
    }
    .pm-card-actions {
      display: flex;
      align-items: stretch;
      gap: 0.6rem;
      margin-top: 0.3rem;
      padding-top: 0.85rem;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .pm-btn-profile {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(192,21,42,0.85), rgba(160,15,30,0.9));
      border: none;
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.64rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.6rem 0.9rem;
      min-height: 40px;
      border-radius: 0.6rem;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(192,21,42,0.18);
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .pm-btn-profile:hover { background: linear-gradient(135deg, #d91a31, #c0152a); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(192,21,42,0.3); }
    .pm-btn-compare {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(30,64,175,0.45);
      border: 1px solid rgba(96,165,250,0.35);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.64rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.6rem 1rem;
      min-height: 40px;
      border-radius: 0.6rem;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .pm-btn-compare:hover { background: rgba(30,64,175,0.7); border-color: rgba(96,165,250,0.6); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,130,246,0.2); }
    .pm-btn-compare.added {
      background: rgba(37,99,235,0.6);
      border-color: rgba(96,165,250,0.7);
      color: white;
      box-shadow: 0 0 8px rgba(59,130,246,0.25);
    }
    /* ── Share: compact-card button, modal button, and share sheet ──────── */
    .pm-btn-share {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15,23,42,0.55);
      border: 1px solid rgba(159,180,212,0.28);
      color: #cbd5e1;
      padding: 0.6rem 0.75rem;
      min-height: 40px;
      border-radius: 0.6rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .pm-btn-share:hover { background: rgba(30,41,59,0.85); border-color: rgba(159,180,212,0.55); color: #fff; transform: translateY(-1px); }
    .pm-btn-share svg { width: 1rem; height: 1rem; }
    .pdx-modal-share-btn {
      flex-shrink: 0;
      width: 40px; height: 40px;
      border-radius: 0.75rem;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      color: #cbd5e1;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .pdx-modal-share-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .pdx-share-overlay {
      position: fixed; inset: 0; z-index: 60;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      animation: pdxShareFade 0.18s ease;
    }
    @keyframes pdxShareFade { from { opacity: 0; } to { opacity: 1; } }
    .pdx-share-sheet {
      width: 100%; max-width: 380px;
      background: linear-gradient(160deg,#13213f,#0a0f1e);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1rem;
      padding: 1.25rem;
      box-shadow: 0 24px 60px rgba(0,0,0,0.7);
      animation: pdxShareRise 0.22s cubic-bezier(0.34,1.1,0.64,1);
    }
    @keyframes pdxShareRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .pdx-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
    .pdx-share-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.04em; color: #fff; }
    .pdx-share-x { background: none; border: none; color: #7596c0; font-size: 1.05rem; cursor: pointer; line-height: 1; padding: 0.25rem; }
    .pdx-share-x:hover { color: #fff; }
    .pdx-share-name { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: #9fb4d4; margin-bottom: 1rem; }
    .pdx-share-linkrow { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
    .pdx-share-link {
      flex: 1; min-width: 0;
      background: rgba(10,15,30,0.8);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 0.55rem;
      color: #cbd5e1;
      font-size: 0.78rem;
      padding: 0.6rem 0.7rem;
    }
    .pdx-share-copy {
      flex-shrink: 0;
      background: linear-gradient(135deg,rgba(192,21,42,0.9),rgba(160,15,30,0.95));
      border: none; color: #fff;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0 1.1rem; border-radius: 0.55rem; cursor: pointer;
      transition: background 0.15s;
    }
    .pdx-share-copy:hover { background: linear-gradient(135deg,#d91a31,#c0152a); }
    .pdx-share-copy.copied { background: linear-gradient(135deg,#16a34a,#15803d); }
    .pdx-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .pdx-share-opt {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      color: #e2e8f0;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.7rem; border-radius: 0.6rem; cursor: pointer;
      transition: all 0.18s ease;
    }
    .pdx-share-opt:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
    .pdx-share-opt svg { width: 1rem; height: 1rem; }
    .pdx-share-native { grid-column: 1 / -1; }
    /* Impact dot indicator */
    .pm-impact-dot {
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      margin-right: 0.3rem;
      flex-shrink: 0;
    }

    /* ── Tree tier connector between tiers ──────────── */
    .pm-tier-connector {
      display: flex;
      justify-content: center;
      padding: 0;
      position: relative;
      z-index: 1;
    }
    .pm-tier-connector::before {
      content: '';
      width: 2px;
      height: 1.5rem;
      background: linear-gradient(180deg, var(--from-color, rgba(239,68,68,0.3)), var(--to-color, rgba(245,200,66,0.3)));
    }
    .pm-tier-connector-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(10,15,30,0.95);
      border: 2px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6rem;
    }

    /* ── Location selector (prominent) ─────────────── */
    /* Soft pulsing halo under the location map pin — a calm "you are here" cue.
       Animates only opacity/scale (compositor-friendly) and respects reduced motion. */
    @keyframes vhPinPulse {
      0%   { transform: scale(0.7); opacity: 0.55; }
      70%  { transform: scale(1.9); opacity: 0; }
      100% { transform: scale(1.9); opacity: 0; }
    }
    .vh-pin-halo {
      transform-box: fill-box;
      transform-origin: center;
      animation: vhPinPulse 2.4s ease-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .vh-pin-halo { animation: none; opacity: 0.35; }
    }
    .pm-location-bar {
      background: linear-gradient(135deg, rgba(10,20,50,0.9), rgba(5,10,30,0.95));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1rem;
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      position: relative;
      overflow: hidden;
    }
    .pm-location-bar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(192,21,42,0.04), rgba(245,200,66,0.03), transparent);
      pointer-events: none;
    }
    .pm-loc-select {
      background: rgba(10,15,30,0.7);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 0.6rem;
      padding: 0.5rem 0.75rem;
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237596c0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.5rem center;
      background-size: 1rem;
      padding-right: 2rem;
    }
    .pm-loc-select:focus {
      border-color: rgba(192,21,42,0.5);
      box-shadow: 0 0 0 3px rgba(192,21,42,0.15);
      outline: none;
    }

    /* Compare tray at bottom of power map */
    .pm-compare-tray {
      background: linear-gradient(135deg, rgba(30,64,175,0.15), rgba(30,64,175,0.08));
      border: 1px solid rgba(96,165,250,0.3);
      border-radius: 1rem;
      padding: 1rem 1.125rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.875rem;
      flex-wrap: wrap;
      margin-top: 1.25rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 12px rgba(59,130,246,0.08);
    }
    .pm-compare-tray-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      flex: 1;
      min-width: 0;
    }
    .pm-compare-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(30,64,175,0.35);
      border: 1px solid rgba(96,165,250,0.4);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      padding: 0.25rem 0.55rem;
      border-radius: 999px;
    }
    .pm-compare-pill button {
      background: none;
      border: none;
      color: #93c5fd;
      cursor: pointer;
      padding: 0;
      font-size: 0.65rem;
      line-height: 1;
      opacity: 0.7;
      transition: opacity 0.15s;
    }
    .pm-compare-pill button:hover { opacity: 1; }

    /* ── Compare Hub Section ─────────────────────────────── */
    .chub-card {
      background: linear-gradient(150deg, rgba(19,32,58,0.96), rgba(11,18,34,0.97));
      border: 1px solid rgba(148,163,184,0.16);
      border-radius: 0.9rem;
      padding: 1rem 1.05rem;
      transition: all 0.25s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 6px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .chub-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 40%, rgba(59,130,246,0.04) 60%, transparent 80%);
      opacity: 0;
      transition: opacity 0.25s;
      pointer-events: none;
    }
    @media (hover: hover) {
      .chub-card:hover { border-color: rgba(96,165,250,0.35); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
      .chub-card:hover::before { opacity: 1; }
    }
    .chub-card.chub-selected { border-color: rgba(96,165,250,0.6); box-shadow: 0 0 0 2px rgba(59,130,246,0.25), 0 8px 32px rgba(0,0,0,0.4), 0 0 16px rgba(59,130,246,0.1); }
    .chub-card.chub-selected::after {
      content: '✓';
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 1.4rem;
      height: 1.4rem;
      background: #2563eb;
      color: white;
      font-size: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      z-index: 3;
    }
    /* ── Browse tree: incumbent vs candidate visual hierarchy ───────────────
       Current officeholders (incumbents) are the premium, high-weight cards;
       candidates / challengers are deliberately lighter and simpler so the
       sitting officeholder always reads as the more important card in the race. */
    .chub-card.is-incumbent {
      background: linear-gradient(135deg, rgba(20,36,64,0.97), rgba(12,22,42,0.97));
      border: 1.5px solid rgba(34,197,94,0.5);
      box-shadow: 0 0 0 1px rgba(34,197,94,0.16), 0 10px 34px rgba(0,0,0,0.45), 0 0 22px rgba(34,197,94,0.13);
    }
    @media (hover: hover) {
      .chub-card.is-incumbent:hover {
        border-color: rgba(74,222,128,0.7);
        transform: translateY(-3px);
        box-shadow: 0 0 0 1px rgba(34,197,94,0.28), 0 14px 44px rgba(0,0,0,0.5), 0 0 26px rgba(34,197,94,0.2);
      }
    }
    .chub-incumbent-ribbon-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.7rem;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid rgba(34,197,94,0.18);
    }
    .chub-incumbent-ribbon {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: linear-gradient(135deg, rgba(34,197,94,0.3), rgba(22,163,74,0.16));
      border: 1.5px solid rgba(34,197,94,0.7);
      color: #4ade80;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 0.64rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      padding: 0.24rem 0.62rem;
      border-radius: 999px;
      box-shadow: 0 0 12px rgba(34,197,94,0.3);
    }
    .chub-incumbent-ribbon::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 8px rgba(74,222,128,0.9);
      flex-shrink: 0;
    }
    /* 2026 candidates / challengers — given their own clear BLUE identity so they
       read as intentional, on-the-ballot choices rather than half-built cards. A
       solid blue frame, a subtle navy-blue lift and a soft glow give them real
       visual weight, while a bright blue rail across the top edge mirrors the
       incumbent's gold→green hero rail — same structure, a different (cooler)
       colour — so a candidate is instantly distinguishable from a sitting
       officeholder yet visually consistent with the rest of the cards. */
    .chub-card.is-candidate {
      background: linear-gradient(150deg, rgba(23,40,72,0.95), rgba(11,18,34,0.97));
      border: 1.5px solid rgba(96,165,250,0.45);
      border-radius: 0.9rem;
      padding-top: 1.4rem;
      box-shadow: 0 0 0 1px rgba(96,165,250,0.12), 0 10px 30px rgba(0,0,0,0.42), 0 0 20px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .chub-card.is-candidate::before {
      content: '';
      position: absolute;
      inset: auto;
      top: 0; left: 0; right: 0; bottom: auto;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 55%, #93c5fd 100%);
      opacity: 1;
      z-index: 2;
      pointer-events: none;
    }
    @media (hover: hover) {
      .chub-card.is-candidate:hover {
        border-color: rgba(96,165,250,0.7);
        transform: translateY(-3px);
        box-shadow: 0 0 0 1px rgba(96,165,250,0.22), 0 14px 40px rgba(0,0,0,0.5), 0 0 26px rgba(59,130,246,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
      }
      .chub-card.is-candidate:hover::before { opacity: 1; }
    }
    /* ── "Already on your team" — glanceable whole-card treatment ────────────
       So a voter scanning a long grid (district tree, All Politicians, Relevant
       to Me, Favorites) can instantly see which picks are already theirs without
       reading each button. A bright-mint left rail + green glow reads as "mine"
       at a glance. Layered on top of the incumbent / candidate base styles and
       deliberately placed AFTER them in source order so it wins the cascade; it
       never collides with the compare ✓ medallion, which owns the top-right
       corner. Kept in the dark patriotic palette (the same mint green used by the
       team buttons and the My Voting Team slots). */
    .chub-card.pdx-on-team {
      border-color: rgba(74,222,128,0.55);
      box-shadow: inset 4px 0 0 0 #4ade80, 0 0 0 1px rgba(74,222,128,0.30), 0 10px 32px rgba(0,0,0,0.42), 0 0 22px rgba(74,222,128,0.14);
    }
    @media (hover: hover) {
      .chub-card.pdx-on-team:hover {
        border-color: rgba(74,222,128,0.78);
        transform: translateY(-3px);
        box-shadow: inset 4px 0 0 0 #4ade80, 0 0 0 1px rgba(74,222,128,0.42), 0 14px 44px rgba(0,0,0,0.5), 0 0 30px rgba(74,222,128,0.24);
      }
    }
    .chub-candidate-norecord {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.6rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #7891b3;
      background: rgba(148,163,184,0.08);
      border: 1px solid rgba(148,163,184,0.18);
      padding: 0.12rem 0.45rem;
      border-radius: 999px;
    }
    /* Candidate label row — the lighter counterpart to the incumbent ribbon. Every
       candidate card carries one of these so users instantly read "running for",
       not "currently holding", the seat. Deliberately flatter than the gold/green
       incumbent ribbon to keep the hierarchy obvious. */
    .chub-candidate-tag-row {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      margin-bottom: 0.6rem;
    }
    .chub-candidate-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(59,130,246,0.13);
      border: 1px solid rgba(96,165,250,0.4);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.6rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      padding: 0.2rem 0.58rem;
      border-radius: 999px;
    }
    .chub-candidate-tag--former {
      background: rgba(148,163,184,0.1);
      border-color: rgba(148,163,184,0.35);
      color: #cbd5e1;
    }
    /* ── Unified "full field for this seat" header + role legend ──────────────
       Used everywhere a district seat shows the current officeholder(s) AND the
       people running for that same seat in one place (the Relevant-to-Me district
       tree and the All Politicians district accordions). Instead of stacking a
       separate "Currently in Office" list above a separate "2026 Candidates"
       list, the field renders as a single grid — and this header frames it and
       carries a tiny colour legend so it's instantly clear, at a glance, who
       holds the seat today (green) versus who is challenging for it (blue). */
    .pdx-field-head {
      position: relative;
      margin: 0.1rem 0 0.95rem;
      padding: 0.7rem 0.9rem 0.72rem 1.05rem;
      border-radius: 0.8rem;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(20,36,64,0.6) 0%, rgba(11,18,34,0.4) 100%);
      border: 1px solid rgba(255,255,255,0.09);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    /* A vertical accent bar reads green→blue: the seat below holds an incumbent
       (green) AND challengers (blue), so the banner itself previews the two
       roles a voter is about to compare. The open-seat variant goes all blue. */
    .pdx-field-head::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: linear-gradient(180deg, #4ade80 0%, #4ade80 46%, #60a5fa 54%, #60a5fa 100%);
    }
    .pdx-field-head--open::before {
      background: linear-gradient(180deg, #60a5fa 0%, #93c5fd 100%);
    }
    .pdx-field-head--compact {
      padding: 0.55rem 0.8rem 0.58rem 0.92rem;
      margin: 0.05rem 0 0.7rem;
      border-radius: 0.7rem;
    }
    .pdx-field-head-title {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 0.92rem;
      letter-spacing: 0.04em;
      color: #f1f6ff;
      line-height: 1.15;
    }
    .pdx-field-head-title .pdx-field-head-ico { font-size: 0.95rem; line-height: 1; }
    .pdx-field-head-sub {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.01em;
      color: #9fb4d4;
      line-height: 1.4;
      margin: 0.22rem 0 0;
    }
    .pdx-field-head-sub b { font-weight: 800; }
    .pdx-field-legend {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.4rem 0.7rem;
      margin: 0.5rem 0 0;
    }
    .pdx-field-key {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #cbd9ec;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 0.18rem 0.55rem 0.18rem 0.45rem;
      border-radius: 999px;
      white-space: nowrap;
    }
    .pdx-field-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .pdx-field-key-office { color: #86efac; border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.1); }
    .pdx-field-key-office .pdx-field-dot { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.85); }
    .pdx-field-key-cand { color: #bfdbfe; border-color: rgba(96,165,250,0.4); background: rgba(59,130,246,0.1); }
    .pdx-field-key-cand .pdx-field-dot { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,0.85); }
    .pdx-field-key-former { color: #cbd5e1; border-color: rgba(148,163,184,0.35); background: rgba(148,163,184,0.08); }
    .pdx-field-key-former .pdx-field-dot { background: #94a3b8; }
    /* Light divider that introduces the de-emphasised "previously held this seat"
       trailing group, so former office-holders sit clearly apart from the live
       race without being hidden. */
    .pdx-field-former-divider {
      display: flex; align-items: center; gap: 0.55rem;
      margin: 0.35rem 0 0.7rem;
    }
    .pdx-field-former-divider .pdx-field-former-pill {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase;
      color: #94a3b8; background: rgba(148,163,184,0.12);
      border: 1px solid rgba(148,163,184,0.4); padding: 0.16rem 0.6rem;
      border-radius: 999px; white-space: nowrap;
    }
    .pdx-field-former-divider .pdx-field-former-rule {
      flex: 1; height: 1px; background: linear-gradient(90deg, rgba(148,163,184,0.3), transparent);
    }
    /* ── In-field role dividers ───────────────────────────────────────────────
       Inside one unified seat section, a labeled rail separates the people who
       HOLD the seat now (green) from those RUNNING for it (blue). It keeps the
       whole field in a single section while making the "who's who" split obvious
       without forcing the voter to read each card's badge. Mirrors the former
       divider's shape so the three role rails (current / challenger / former)
       read as one consistent family. */
    .pdx-field-role-divider {
      display: flex; align-items: center; gap: 0.55rem;
      margin: 0.1rem 0 0.7rem;
    }
    .pdx-field-role-divider .pdx-field-role-pill {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
      padding: 0.18rem 0.62rem; border-radius: 999px; white-space: nowrap;
      line-height: 1.2;
    }
    .pdx-field-role-divider .pdx-field-role-pill .pdx-field-role-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .pdx-field-role-divider .pdx-field-role-pill .pdx-field-role-n { opacity: 0.72; font-weight: 700; }
    .pdx-field-role-divider .pdx-field-role-rule { flex: 1; height: 1px; }
    /* Current officeholder rail — green, matching the incumbent hero card. */
    .pdx-field-role-divider.is-office .pdx-field-role-pill {
      color: #86efac; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.5);
    }
    .pdx-field-role-divider.is-office .pdx-field-role-pill .pdx-field-role-dot {
      background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.85);
    }
    .pdx-field-role-divider.is-office .pdx-field-role-rule {
      background: linear-gradient(90deg, rgba(34,197,94,0.4), transparent);
    }
    /* Challenger rail — blue, matching the candidate card's cool identity. */
    .pdx-field-role-divider.is-cand .pdx-field-role-pill {
      color: #bfdbfe; background: rgba(59,130,246,0.12); border: 1px solid rgba(96,165,250,0.5);
    }
    .pdx-field-role-divider.is-cand .pdx-field-role-pill .pdx-field-role-dot {
      background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,0.85);
    }
    .pdx-field-role-divider.is-cand .pdx-field-role-rule {
      background: linear-gradient(90deg, rgba(96,165,250,0.4), transparent);
    }
    /* ── Shared compact-card primitives ─────────────────────────────────
       One consistent visual language for the party tag, the kept/broken/
       pending follow-through pills and the office line — reused by every
       politician listing card so the whole site reads as one design. */
    .pdx-party-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.56rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.1rem 0.5rem;
      border-radius: 999px;
      white-space: nowrap;
      line-height: 1.25;
      vertical-align: middle;
    }
    .pdx-party-chip::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 6px currentColor;
      flex-shrink: 0;
    }
    .pdx-party-r { color: #fca5a5; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); }
    .pdx-party-d { color: #93c5fd; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); }
    .pdx-party-i { color: #c4b5fd; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3); }
    .pdx-party-f { color: #67e8f9; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.3); }
    .pdx-statpills {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem;
    }
    .pdx-statpill {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.62rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0.13rem 0.5rem;
      border-radius: 999px;
      line-height: 1.25;
      white-space: nowrap;
    }
    .pdx-statpill-kept { color: #4ade80; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); }
    .pdx-statpill-broken { color: #f87171; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); }
    .pdx-statpill-pending { color: #fbbf24; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); }
    /* Partial / compromised follow-through — same blue the verdict badge and the
       Deep Dive breakdown already use for this bucket. */
    .pdx-statpill-partial { color: #93c5fd; background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.32); }
    .pdx-statpill-none { color: #8aa3c4; background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.22); font-weight: 600; }

    /* ── Clickable follow-through badges (profile hero) ──────────────────
       The kept / broken / pending counts double as filters: tap one to jump
       to the Promise Tracker filtered to that status. */
    .vbadge-click { cursor: pointer; user-select: none; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; }
    @media (hover: hover) { .vbadge-click:hover { transform: translateY(-1px); filter: brightness(1.12); } }
    .vbadge-click:active { transform: translateY(0); }
    .vbadge-click:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 2px; }
    .vbadge-active { box-shadow: 0 0 0 2px currentColor inset, 0 0 12px -2px currentColor; filter: brightness(1.18); }

    /* ── Promise Tracker filter tabs (profile modal) ─────────────────────
       All / Kept / Broken / Pending tabs that narrow the grouped list. */
    .pdx-pfilter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.1rem 0 0.7rem; }
    .pdx-pfilter-btn {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #9fb4d4; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
      padding: 0.32rem 0.7rem; line-height: 1; cursor: pointer; white-space: nowrap;
      transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
    }
    @media (hover: hover) { .pdx-pfilter-btn:hover { background: rgba(255,255,255,0.08); color: #fff; } }
    .pdx-pfilter-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 2px; }
    .pdx-pfilter-btn.active {
      color: #fff;
      background: linear-gradient(135deg, rgba(192,21,42,0.32), rgba(124,58,237,0.32));
      border-color: rgba(255,255,255,0.4);
      box-shadow: 0 2px 10px rgba(192,21,42,0.22);
    }
    .pdx-pfilter-n { font-size: 0.6rem; opacity: 0.85; background: rgba(0,0,0,0.28); border-radius: 999px; padding: 0.04rem 0.36rem; }
    /* Pin the filter tabs to the top of the modal scroll so the counts and the
       "All" reset stay reachable no matter how far down the promise list is
       scrolled — the summary/controls are always one tap away. */
    #pdx-promise-filter {
      position: sticky; top: -1px; z-index: 6;
      margin: 0.1rem 0 0; padding: 0.55rem 0 0.6rem;
      background: rgba(10,15,30,0.92);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    /* Active-filter status + inline reset, shown only while a single status is
       selected so it's always obvious what's being viewed and how to clear it. */
    .pdx-pfilter-status {
      display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: #9fb4d4;
      margin: 0.1rem 0 0.55rem;
    }
    .pdx-pfilter-status b { color: #fff; font-weight: 700; }
    .pdx-pfilter-reset {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #fff; background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
      padding: 0.22rem 0.6rem; cursor: pointer; white-space: nowrap;
      transition: background 0.14s ease, border-color 0.14s ease;
    }
    @media (hover: hover) { .pdx-pfilter-reset:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); } }
    .pdx-pfilter-reset:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 2px; }

    /* ─────────────────────────────────────────────────────────────────────────
       UNIFIED COMPACT POLITICIAN CARD (.pdx-snap)
       One clean, professional snapshot layout shared by every listing on the
       site — All Politicians, Relevant to Me, Search, Compare, Favorites, My
       Politicians and Watching. Rendered INSIDE the existing .chub-card shell so
       all card behaviours (hover, compare-select, alignment, accountability)
       keep working, while the internal hierarchy is now identical everywhere.
       ───────────────────────────────────────────────────────────────────────── */
    .pdx-snap-head { display: flex; align-items: flex-start; gap: 0.8rem; }
    .pdx-photo {
      position: relative;
      width: 58px; height: 58px;
      flex-shrink: 0;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid rgba(148,163,184,0.3);
      background: linear-gradient(135deg, rgba(30,53,96,0.7), rgba(10,15,30,0.88));
      box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .pdx-photo.pdx-photo--office { border-color: rgba(34,197,94,0.6); box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(34,197,94,0.1); }
    .pdx-photo.pdx-photo--candidate { border-color: rgba(96,165,250,0.5); box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(96,165,250,0.1); }
    .pdx-photo.pdx-photo--former { border-color: rgba(148,163,184,0.32); box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(148,163,184,0.07); }
    .pdx-photo .pdx-sil {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      color: #5b7196;
    }
    .pdx-photo .pdx-sil svg { width: 56%; height: 56%; opacity: 0.85; }
    .pdx-photo-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
      z-index: 1;
    }
    .pdx-snap-id { flex: 1; min-width: 0; }
    .pdx-snap-nameline { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
    .pdx-snap-name {
      font-size: 1.18rem;
      letter-spacing: 0.025em;
      color: #ffffff;
      line-height: 1.1;
      cursor: pointer;
    }
    .pdx-snap-office {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      color: #9fb4d4;
      letter-spacing: 0.012em;
      line-height: 1.32;
      margin-top: 0.16rem;
    }
    /* Office tenure pill — "In office since 2019 (6 years)" / "Served 2015 – 2023
       (8 years)". Sits on the office line so a voter sees how long someone has
       actually held the seat. Green for sitting officeholders, muted steel for
       former ones, matching the In Office / Former Office status palette. */
    .pdx-tenure {
      display: inline-flex; align-items: center; gap: 0.32rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.045em; line-height: 1.2;
      padding: 0.14rem 0.55rem; border-radius: 999px; white-space: nowrap;
      vertical-align: middle;
    }
    .pdx-tenure .pdx-tenure-ico { font-size: 0.82em; line-height: 1; }
    .pdx-tenure--current { background: rgba(34,197,94,0.13); border: 1px solid rgba(34,197,94,0.42); color: #86efac; }
    .pdx-tenure--former { background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.4); color: #cbd5e1; }
    .pdx-snap-tenure { margin-top: 0.34rem; }
    /* In the profile modal hero the tenure line gets a touch more presence. */
    .profile-tenure { margin-top: 0.5rem; }
    .profile-tenure .pdx-tenure { font-size: 0.7rem; padding: 0.2rem 0.7rem; }
    .pdx-snap-badges { display: flex; align-items: center; gap: 0.34rem; flex-wrap: wrap; margin-top: 0.42rem; }
    .pdx-snap-score {
      flex-shrink: 0;
      text-align: center;
      min-width: 62px;
      align-self: flex-start;
      background: linear-gradient(160deg, rgba(18,28,50,0.7), rgba(8,13,27,0.72));
      border: 1px solid rgba(148,163,184,0.28);
      border-radius: 0.7rem;
      padding: 0.34rem 0.52rem 0.4rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.25);
    }
    .pdx-snap-score-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.78rem;
      line-height: 1;
      font-weight: 900;
    }
    .pdx-snap-score-lbl {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #7596c0;
      margin-top: 0.18rem;
    }
    /* Sample size under the card percentage — "1/1 resolved" — so a small record
       reads as a small record at browse speed. */
    .pdx-snap-score-denom {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.46rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #647a9c;
      margin-top: 0.08rem;
      line-height: 1.05;
      white-space: nowrap;
    }
    /* Empty Promise pill — same footprint as the scored pill so the badge keeps a
       consistent home on every card even when no record has been compiled yet. */
    .pdx-snap-score-empty {
      border-color: rgba(148,163,184,0.22) !important;
      background: linear-gradient(160deg, rgba(16,24,44,0.6), rgba(8,13,27,0.62));
    }
    .pdx-snap-score-num-empty {
      color: #5f7798;
      font-size: 1.5rem;
    }
    .pdx-snap-score-na {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.46rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #647a9c;
      margin-top: 0.1rem;
      line-height: 1.05;
    }
    /* Candidate variant of the empty score rail — a 2026 candidate has no governing
       record to score yet, so instead of the generic grey "—" (which reads as a
       missing officeholder score) the rail wears the blue 2026 identity and a clear,
       forward-looking line: the record begins once they're in office. */
    .pdx-snap-score-cand {
      border-color: rgba(96,165,250,0.32) !important;
      background: linear-gradient(160deg, rgba(23,40,72,0.7), rgba(8,13,27,0.66));
    }
    .pdx-snap-score-cand .pdx-snap-score-num-cand { color: #93c5fd; font-size: 1.42rem; line-height: 1.15; }
    .pdx-snap-score-cand .pdx-snap-score-lbl-cand { color: #93c5fd; }
    .pdx-snap-score-cand .pdx-snap-score-na-cand { color: #7aa0d4; }
    .pdx-snap-score-cand.pdx-snap-score-click:hover { border-color: rgba(96,165,250,0.62) !important; }
    /* Tracking variant of the score rail — promises ARE on file but none has
       resolved, so the rail wears the pending gold and names the count instead of
       reading "No record yet" like a politician with nothing on file. The slot
       shows an hourglass, never a figure, so it can't be mistaken for a score. */
    .pdx-snap-score-tracking {
      border-color: rgba(245,200,66,0.34) !important;
      background: linear-gradient(160deg, rgba(44,36,14,0.62), rgba(10,13,27,0.66));
    }
    .pdx-snap-score-tracking .pdx-snap-score-num-tracking { color: #f5c842; font-size: 1.42rem; line-height: 1.15; }
    .pdx-snap-score-tracking .pdx-snap-score-lbl-tracking { color: #f5c842; }
    .pdx-snap-score-tracking .pdx-snap-score-na-tracking { color: #b08d2e; }
    .pdx-snap-score-tracking.pdx-snap-score-click:hover { border-color: rgba(245,200,66,0.62) !important; }
    .pdx-snap-metrics { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.72rem; }
    .pdx-snap-issues { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-top: 0.6rem; }
    .pdx-snap-issue {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.57rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #8aa3c4;
      background: rgba(15,28,52,0.7);
      border: 1px solid rgba(148,163,184,0.14);
      border-radius: 999px;
      padding: 0.14rem 0.52rem;
    }
    .pdx-snap-issue:first-child { color: #cbd9ec; border-color: rgba(148,163,184,0.28); }

    /* ── At-a-glance issue positions on cards ─────────────────────────────────
       Surfaces a politician's REAL documented stances (from ISSUE_STANCE_DATA)
       right on the browse card so a voter can read where someone stands on key
       issues without opening the profile modal. Direction is color-coded —
       green ✓ supports · red ✗ opposes · amber ~ mixed — and the small eyebrow
       count makes thin / Limited-Record profiles read as intentional and
       substantive rather than empty. */
    .pdx-snap-stances { margin-top: 0.6rem; }
    .pdx-stance-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: #7596c0;
      display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin-bottom: 0.34rem;
    }
    .pdx-stance-eyebrow b { color: #9fb4d4; font-weight: 700; }
    .pdx-stance-eyebrow-ico { opacity: 0.85; font-style: normal; }
    /* Factual support / oppose / mixed tally pushed to the trailing edge of the
       eyebrow — a one-glance read of which way a record leans, color-matched to
       the chips below it. */
    .pdx-stance-sum { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
    .pdx-stance-sum-i {
      display: inline-flex; align-items: center; gap: 0.16rem;
      font-weight: 800; letter-spacing: 0.02em;
    }
    .pdx-stance-sum-i.is-support { color: #86efac; }
    .pdx-stance-sum-i.is-oppose  { color: #fca5a5; }
    .pdx-stance-sum-i.is-mixed   { color: #fcd34d; }
    /* When the campaign-priorities fallback reuses the stance wrapper, the inner
       tag row sits directly under the eyebrow without its own top margin. */
    .pdx-snap-issues-wrap .pdx-snap-issues { margin-top: 0; }
    .pdx-stance-chips { display: flex; flex-wrap: wrap; gap: 0.32rem; align-items: center; }
    .pdx-stance-chip {
      display: inline-flex; align-items: center; gap: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em;
      padding: 0.16rem 0.52rem; border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(15,28,52,0.7); color: #b8c8de;
      max-width: 100%; white-space: nowrap;
    }
    .pdx-stance-chip .pdx-stance-ico { font-weight: 800; font-size: 0.62rem; line-height: 1; }
    .pdx-stance-chip.is-support { color: #86efac; border-color: rgba(52,211,153,0.32); background: rgba(52,211,153,0.08); }
    .pdx-stance-chip.is-support .pdx-stance-ico { color: #34d399; }
    .pdx-stance-chip.is-oppose  { color: #fca5a5; border-color: rgba(248,113,113,0.32); background: rgba(248,113,113,0.08); }
    .pdx-stance-chip.is-oppose .pdx-stance-ico { color: #f87171; }
    .pdx-stance-chip.is-mixed   { color: #fcd34d; border-color: rgba(245,200,66,0.3);  background: rgba(245,200,66,0.08); }
    .pdx-stance-chip.is-mixed .pdx-stance-ico { color: #f5c842; }
    .pdx-stance-more {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.56rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase; color: #7596c0; padding: 0.12rem 0.3rem;
    }
    /* ── Signature stance line ──────────────────────────────────────────────────
       One readable, sourced sentence of the lead position — what the politician
       actually stands for, in plain language, no hover required. Sits between the
       eyebrow tally and the topic chips: a quotable headline above the scannable
       index. Direction-colored marker keeps it consistent with the chips, and the
       2-line clamp keeps even a long position from crowding the card. */
    .pdx-stance-lead {
      display: flex; align-items: flex-start; gap: 0.4rem;
      margin: 0.05rem 0 0.46rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem; line-height: 1.4; color: #c3d2e6;
    }
    .pdx-stance-lead-ico { flex-shrink: 0; font-weight: 800; font-size: 0.72rem; line-height: 1.46; }
    .pdx-stance-lead.is-support .pdx-stance-lead-ico { color: #34d399; }
    .pdx-stance-lead.is-oppose  .pdx-stance-lead-ico { color: #f87171; }
    .pdx-stance-lead.is-mixed   .pdx-stance-lead-ico { color: #f5c842; }
    .pdx-stance-lead-txt {
      min-width: 0;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* When the lead position is one of the visitor's own Alignment Tool issues,
       give the line a soft left rail so it reads as "this is about what you care
       about" — tying the headline back to the Alignment Tool like the chips do. */
    .pdx-stance-lead--mine {
      padding-left: 0.5rem;
      border-left: 2px solid rgba(124,156,210,0.5);
    }
    /* ── Alignment-aware chips ─────────────────────────────────────────────────
       A chip that lands on one of the visitor's OWN saved Alignment Tool issues
       gets a soft verdict-colored ring plus a trailing "you" marker, so a voter
       instantly sees how this official lines up with the positions they care about
       — the same agree / partly / differ read used in the profile's How You
       Compare, surfaced right on the browse card. */
    .pdx-stance-chip--mine { position: relative; }
    .pdx-stance-chip--mine.mine-match  { box-shadow: 0 0 0 1px rgba(74,222,128,0.55), 0 0 10px rgba(74,222,128,0.22); }
    .pdx-stance-chip--mine.mine-partial{ box-shadow: 0 0 0 1px rgba(245,200,66,0.55), 0 0 10px rgba(245,200,66,0.2); }
    .pdx-stance-chip--mine.mine-differ { box-shadow: 0 0 0 1px rgba(248,113,113,0.55), 0 0 10px rgba(248,113,113,0.2); }
    .pdx-stance-you {
      display: inline-flex; align-items: center; gap: 0.16rem;
      margin-left: 0.1rem; padding: 0.02rem 0.3rem 0.02rem 0.26rem; border-radius: 999px;
      font-weight: 800; font-size: 0.56rem; line-height: 1.4;
    }
    .pdx-stance-you-lbl { font-weight: 700; font-size: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.92; }
    .mine-match  .pdx-stance-you { background: rgba(74,222,128,0.18);  color: #6ee7a8; }
    .mine-partial .pdx-stance-you { background: rgba(245,200,66,0.18);  color: #fcd34d; }
    .mine-differ .pdx-stance-you { background: rgba(248,113,113,0.18); color: #fca5a5; }
    /* Camera-eye sized to ride inside a stance chip, plus the People's Mandate
       tie that hangs under the signature stance line — both only appear when a
       caller opts into evidence threading (the medium-card modal), so the browse
       cards that reuse this component are unaffected. */
    .pdx-stance-eye { width: 0.85rem; height: 0.85rem; margin-left: 0.18rem; }
    .pdx-stance-lead-mandate { margin: -0.2rem 0 0.5rem; display: flex; }
    /* ── Seat issue board ───────────────────────────────────────────────────────
       The at-a-glance, aligned issue comparison for one unified district seat:
       key issues down the side, everyone in the race across the top, each cell a
       color-coded ✓/✗/~/— read. A voter scans straight across a row to compare
       the whole field on the same issue without opening a profile. Dark patriotic
       palette, contained as one tidy module above the detailed cards. */
    .pdx-seat-board {
      margin: 0 0 0.95rem; border: 1px solid rgba(148,163,184,0.16);
      border-radius: 0.85rem; overflow: hidden;
      background: linear-gradient(180deg, rgba(15,28,52,0.66), rgba(10,15,30,0.5));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 14px rgba(0,0,0,0.18);
    }
    .pdx-seat-board-head {
      display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
      padding: 0.55rem 0.8rem 0.5rem; border-bottom: 1px solid rgba(148,163,184,0.12);
      background: linear-gradient(90deg, rgba(245,200,66,0.07), rgba(192,21,42,0.05));
    }
    .pdx-seat-board-ico { font-size: 0.92rem; line-height: 1; }
    .pdx-seat-board-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: #fbbf24; font-size: 0.76rem;
    }
    .pdx-seat-board-sub {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; letter-spacing: 0.04em;
      color: #7596c0; margin-left: auto; text-align: right;
    }
    .pdx-seat-board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pdx-sib-grid { border-collapse: collapse; width: 100%; }
    .pdx-sib-grid th, .pdx-sib-grid td { border: 0; }
    /* The issue label column stays pinned while the people columns scroll, so the
       row a voter is reading never loses its label on a narrow screen. */
    .pdx-sib-corner, .pdx-sib-issue {
      position: sticky; left: 0; z-index: 2; text-align: left;
      background: rgba(11,20,38,0.97);
    }
    .pdx-sib-corner {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.56rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: #5f7aa0;
      padding: 0.5rem 0.7rem; min-width: 122px;
    }
    .pdx-sib-person {
      vertical-align: bottom; padding: 0.45rem 0.4rem 0.5rem; min-width: 62px;
      text-align: center; cursor: pointer; transition: background 0.15s ease;
    }
    .pdx-sib-person:hover { background: rgba(255,255,255,0.045); }
    .pdx-sib-av {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
      border: 2px solid rgba(148,163,184,0.5); background: rgba(30,53,96,0.55); margin: 0 auto 0.22rem;
    }
    .pdx-sib-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .pdx-sib-av-ph { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.82rem; }
    .pdx-sib-name {
      display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.02em; max-width: 72px; margin: 0 auto;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pdx-sib-role { display: block; font-size: 0.5rem; opacity: 0.5; line-height: 1.1; }
    .pdx-sib-row th, .pdx-sib-row td { border-top: 1px solid rgba(148,163,184,0.08); }
    .pdx-sib-issue { padding: 0.4rem 0.7rem; max-width: 156px; }
    .pdx-sib-issue-ico { margin-right: 0.3rem; font-size: 0.72rem; }
    .pdx-sib-issue-lbl {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.7rem;
      letter-spacing: 0.01em; color: #c3d2e6;
    }
    .pdx-sib-flag {
      display: inline-block; margin-left: 0.36rem; vertical-align: middle;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.5rem;
      letter-spacing: 0.05em; text-transform: uppercase; padding: 0.05rem 0.34rem; border-radius: 999px;
      color: #fcd34d; background: rgba(245,200,66,0.12); border: 1px solid rgba(245,200,66,0.28);
    }
    .pdx-sib-flag.is-mine { color: #d8b4fe; background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.34); }
    .pdx-sib-cell { text-align: center; padding: 0.3rem 0.4rem; min-width: 62px; }
    .pdx-sib-ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 6px; font-weight: 800; font-size: 0.78rem; line-height: 1;
    }
    .pdx-sib-cell.is-support .pdx-sib-ico { color: #34d399; background: rgba(52,211,153,0.12); box-shadow: inset 0 0 0 1px rgba(52,211,153,0.32); }
    .pdx-sib-cell.is-oppose  .pdx-sib-ico { color: #f87171; background: rgba(248,113,113,0.12); box-shadow: inset 0 0 0 1px rgba(248,113,113,0.32); }
    .pdx-sib-cell.is-mixed   .pdx-sib-ico { color: #f5c842; background: rgba(245,200,66,0.12); box-shadow: inset 0 0 0 1px rgba(245,200,66,0.32); }
    .pdx-sib-cell.is-none { color: #46587a; font-weight: 700; }
    .pdx-sib-row.is-contested th.pdx-sib-issue { box-shadow: inset 3px 0 0 rgba(245,200,66,0.6); }
    .pdx-sib-row.is-mine th.pdx-sib-issue { box-shadow: inset 3px 0 0 rgba(139,92,246,0.72); }
    .pdx-seat-board-legend {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.28rem 0.7rem;
      padding: 0.45rem 0.8rem 0.55rem; border-top: 1px solid rgba(148,163,184,0.1);
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; letter-spacing: 0.03em;
    }
    .pdx-sib-lg { color: #8aa0c0; }
    .pdx-sib-lg.is-support { color: #86efac; }
    .pdx-sib-lg.is-oppose { color: #fca5a5; }
    .pdx-sib-lg.is-mixed { color: #fcd34d; }
    .pdx-sib-lg.is-none { color: #5f7aa0; }
    .pdx-sib-lg-more { margin-left: auto; color: #7596c0; font-style: italic; }
    @media (max-width: 640px) {
      .pdx-sib-corner { min-width: 104px; }
      .pdx-sib-issue { max-width: 124px; }
      .pdx-sib-issue-lbl { font-size: 0.64rem; }
      .pdx-sib-person, .pdx-sib-cell { min-width: 50px; }
      .pdx-seat-board-sub { font-size: 0.56rem; }
    }

    /* ── District-level "Your Match in this race" panel (_pdxSeatAlignBoard) ────
       A personalized, race-scoped alignment surface shown inside the unified
       district view: a quick-selector chip row when no issues are chosen, and a
       ranked best-fit leaderboard once they are. Dark navy card, gold/teal accents
       to match the rest of the alignment UI. */
    .pdx-amatch {
      margin: 0 0 0.9rem; border: 1px solid rgba(45,212,191,0.22);
      border-radius: 0.9rem; overflow: hidden;
      background: linear-gradient(180deg, rgba(13,28,40,0.72), rgba(10,15,30,0.55));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 3px 16px rgba(0,0,0,0.22);
    }
    .pdx-amatch.is-setup { border-color: rgba(94,234,212,0.28); }
    .pdx-amatch-head {
      display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
      padding: 0.55rem 0.85rem 0.5rem; border-bottom: 1px solid rgba(94,234,212,0.14);
      background: linear-gradient(90deg, rgba(45,212,191,0.09), rgba(192,21,42,0.04));
    }
    .pdx-amatch-ico { font-size: 0.95rem; line-height: 1; }
    .pdx-amatch-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 0.06em;
      text-transform: uppercase; color: #5eead4; font-size: 0.8rem;
    }
    .pdx-amatch-sub {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; letter-spacing: 0.03em;
      color: #8aa6c8; margin-left: auto; text-align: right;
    }
    .pdx-amatch-sub b { color: #cdeaff; font-weight: 800; }

    /* Quick-selector chip row */
    .pdx-amatch-picks {
      display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.6rem 0.8rem 0.7rem;
    }
    .pdx-amatch-picks.tune {
      border-top: 1px dashed rgba(148,163,184,0.16); align-items: center;
      padding-top: 0.55rem; margin-top: 0.1rem;
    }
    .pdx-amatch-tune-lbl {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase; color: #6f8bb0; margin-right: 0.15rem;
    }
    .pdx-align-pick {
      display: inline-flex; align-items: center; gap: 0.26rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.01em; line-height: 1.2; padding: 0.26rem 0.6rem; border-radius: 999px;
      color: #c3d2e6; background: rgba(15,28,52,0.6); border: 1px solid rgba(148,163,184,0.24);
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    }
    .pdx-align-pick:hover { background: rgba(45,212,191,0.1); border-color: rgba(94,234,212,0.5); color: #eafff9; }
    .pdx-align-pick:active { transform: scale(0.96); }
    .pdx-align-pick-x { font-weight: 800; opacity: 0.7; font-size: 0.82em; }
    .pdx-align-pick.active {
      color: #062b25; background: linear-gradient(135deg, #5eead4, #2dd4bf);
      border-color: rgba(94,234,212,0.9); box-shadow: 0 0 10px rgba(45,212,191,0.4);
    }
    .pdx-align-pick.active .pdx-align-pick-x { opacity: 1; }
    .pdx-align-pick.more { color: #c4b5fd; border-color: rgba(167,139,250,0.34); background: rgba(139,92,246,0.08); }
    .pdx-align-pick.more:hover { background: rgba(139,92,246,0.16); border-color: rgba(167,139,250,0.6); color: #ede9fe; }

    /* Ranked leaderboard */
    .pdx-amatch-board { padding: 0.5rem 0.7rem 0.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
    .pdx-amatch-row {
      display: flex; align-items: center; gap: 0.6rem; width: 100%; cursor: pointer; text-align: left;
      padding: 0.42rem 0.55rem; border-radius: 0.7rem;
      background: rgba(255,255,255,0.025); border: 1px solid rgba(148,163,184,0.12);
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }
    .pdx-amatch-row:hover { background: rgba(255,255,255,0.06); border-color: var(--mc, rgba(148,163,184,0.4)); }
    .pdx-amatch-row:active { transform: scale(0.995); }
    .pdx-amatch-row.is-best {
      background: linear-gradient(90deg, rgba(74,222,128,0.12), rgba(255,255,255,0.03));
      border-color: rgba(74,222,128,0.5); box-shadow: 0 0 14px rgba(74,222,128,0.16), inset 0 0 0 1px rgba(74,222,128,0.12);
    }
    .pdx-amatch-rank {
      flex-shrink: 0; width: 1.5rem; text-align: center; font-family: 'Bebas Neue', sans-serif;
      font-size: 1.05rem; font-weight: 700; color: #7e96b8; line-height: 1;
    }
    .pdx-amatch-row.is-best .pdx-amatch-rank { font-size: 1.15rem; }
    .pdx-amatch-av {
      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
      border: 2px solid rgba(148,163,184,0.5); background: rgba(30,53,96,0.55);
    }
    .pdx-amatch-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .pdx-amatch-av-ph { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.85rem; }
    .pdx-amatch-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
    .pdx-amatch-name {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.92rem;
      letter-spacing: 0.01em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pdx-amatch-meta { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
    .pdx-amatch-best {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.52rem;
      letter-spacing: 0.08em; text-transform: uppercase; color: #86efac;
      background: rgba(74,222,128,0.16); border: 1px solid rgba(74,222,128,0.45);
      border-radius: 999px; padding: 0.08rem 0.42rem;
    }
    .pdx-amatch-score { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; }
    .pdx-amatch-bar {
      display: inline-block; width: 4.5rem; height: 0.42rem; border-radius: 999px;
      background: rgba(148,163,184,0.18); overflow: hidden;
    }
    .pdx-amatch-bar > span { display: block; height: 100%; border-radius: 999px; }
    .pdx-amatch-pct {
      font-family: 'Bebas Neue', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1;
      min-width: 2.6rem; text-align: right; text-shadow: 0 0 10px currentColor;
    }
    .pdx-amatch-unscored {
      padding: 0.1rem 0.85rem 0.2rem; font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.66rem; letter-spacing: 0.02em; color: #7e96b8;
    }
    .pdx-amatch-unscored-lbl { color: #9fb4d4; font-weight: 700; }
    .pdx-amatch-add {
      display: block; width: calc(100% - 1.6rem); margin: 0.55rem 0.8rem 0.15rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.82rem;
      letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 0.7rem; border-radius: 0.65rem;
      color: #062b25; background: linear-gradient(135deg, #fde68a, #f5c842);
      border: 1px solid rgba(245,200,66,0.7); box-shadow: 0 3px 14px rgba(245,200,66,0.28);
      transition: transform 0.1s ease, box-shadow 0.15s ease;
    }
    .pdx-amatch-add:hover { box-shadow: 0 4px 18px rgba(245,200,66,0.42); }
    .pdx-amatch-add:active { transform: scale(0.985); }
    .pdx-amatch-onteam {
      margin: 0.5rem 0.85rem 0.15rem; font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.74rem; letter-spacing: 0.03em; color: #86efac;
    }
    @media (max-width: 640px) {
      .pdx-amatch-title { font-size: 0.74rem; }
      .pdx-amatch-sub { font-size: 0.58rem; }
      .pdx-amatch-name { font-size: 0.84rem; }
      .pdx-amatch-bar { width: 3.2rem; }
      .pdx-amatch-pct { font-size: 1.05rem; min-width: 2.2rem; }
      .pdx-align-pick { font-size: 0.66rem; padding: 0.24rem 0.5rem; }
    }
    /* Eyebrow read: "🎯 N of your issues", color-cued to how the official's
       documented positions lean against the visitor's picks. */
    .pdx-stance-mine-eb {
      display: inline-flex; align-items: center; gap: 0.22rem;
      font-weight: 700; letter-spacing: 0.04em;
      padding: 0.04rem 0.4rem; border-radius: 999px;
      border: 1px solid rgba(124,156,210,0.3); background: rgba(124,156,210,0.1);
    }
    .pdx-stance-mine-eb b { font-weight: 800; }
    .pdx-stance-mine-eb.is-agree   { color: #86efac; border-color: rgba(74,222,128,0.4);  background: rgba(74,222,128,0.1); }
    .pdx-stance-mine-eb.is-agree b { color: #bbf7d0; }
    .pdx-stance-mine-eb.is-partial { color: #fcd34d; border-color: rgba(245,200,66,0.4);  background: rgba(245,200,66,0.1); }
    .pdx-stance-mine-eb.is-differ  { color: #fca5a5; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); }

    .pdx-snap-highlight {
      display: flex; align-items: flex-start; gap: 0.4rem;
      margin-top: 0.6rem;
      padding: 0.5rem 0.65rem;
      background: rgba(245,200,66,0.06);
      border: 1px solid rgba(245,200,66,0.18);
      border-radius: 0.55rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.74rem;
      line-height: 1.4;
      color: #d9c89a;
    }
    .pdx-snap-highlight .pdx-snap-highlight-ico { flex-shrink: 0; color: #f5c842; }
    /* Candidate variant — blue tint + ballot icon, matching the 2026-candidate
       identity used by the badge, photo ring and card frame. */
    .pdx-snap-highlight--candidate {
      background: rgba(59,130,246,0.08);
      border-color: rgba(96,165,250,0.28);
      color: #b9cef0;
    }
    .pdx-snap-highlight--candidate .pdx-snap-highlight-ico { color: #60a5fa; }
    /* Quote variant — a real signature quote surfaced on the card. Italic body
       and a red opening quote mark echo the modal's .profile-quote so the voice
       reads consistently across browse surfaces and the full profile. */
    .pdx-snap-highlight--quote {
      background: rgba(192,21,42,0.06);
      border-color: rgba(192,21,42,0.22);
      color: #cdd9ec;
      font-style: italic;
      /* Read as a real voice, not a condensed tag: the body drops the condensed
         face for plain Barlow with roomier leading, echoing the modal's
         .profile-quote so a card pull-quote and the full profile quote share one
         typographic voice. */
      font-family: 'Barlow', sans-serif;
      line-height: 1.5;
    }
    .pdx-snap-highlight--quote .pdx-snap-highlight-ico {
      color: rgba(192,21,42,0.75);
      font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; line-height: 0.8;
      font-style: normal;
    }
    /* Body wrapper lets a sourced quote stack the attribution under the words. */
    .pdx-snap-highlight--quote .pdx-snap-highlight-body { display: block; min-width: 0; }
    /* Card-level quote attribution — mirrors the modal's .profile-quote-cite so
       the same voice/source pairing reads consistently across browse and profile.
       Only rendered when a documented source exists. */
    .pdx-snap-highlight--quote .pdx-snap-quote-cite {
      display: block;
      margin-top: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-style: normal;
      font-size: 0.64rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #8aa0c2;
    }
    .pdx-snap-highlight--quote .pdx-snap-quote-cite::before { content: "— "; color: rgba(192,21,42,0.85); }
    .pdx-snap-extra { margin-top: 0.65rem; }

    /* ── "Two ways to judge them" dual-signal scorecard (Relevant to Me) ──
       Pairs the formal in-office record (Promise %) with the character/consistency
       read (Accountability) as two equal-weight cells, so neither is buried and a
       voter can scan both at a glance before opening a profile. */
    .rel-dual {
      margin-top: 0.7rem;
      background: linear-gradient(160deg, rgba(15,24,46,0.55), rgba(8,13,27,0.4));
      border: 1px solid rgba(148,163,184,0.16);
      border-radius: 0.8rem;
      padding: 0.55rem 0.6rem 0.62rem;
    }
    .rel-dual-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.5rem; margin-bottom: 0.5rem; padding: 0 0.12rem;
    }
    .rel-dual-head-txt {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase;
      color: #8aa3c4;
    }
    .rel-dual-info {
      flex-shrink: 0; background: rgba(148,163,184,0.1);
      border: 1px solid rgba(148,163,184,0.22); border-radius: 999px;
      color: #b6c5db; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.58rem; letter-spacing: 0.04em;
      padding: 0.16rem 0.5rem; line-height: 1.2;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
    }
    .rel-dual-info:hover { background: rgba(245,200,66,0.14); color: #f5c842; border-color: rgba(245,200,66,0.45); }
    .rel-dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
    .rel-dual-cell {
      text-align: left; cursor: pointer; min-width: 0;
      background: linear-gradient(160deg, rgba(18,28,50,0.7), rgba(8,13,27,0.6));
      border: 1px solid rgba(148,163,184,0.18); border-radius: 0.7rem;
      padding: 0.5rem 0.55rem 0.55rem;
      transition: transform .16s ease, border-color .16s ease, box-shadow .18s ease;
    }
    .rel-dual-cell:hover { transform: translateY(-1px); }
    .rel-dual-promise:hover { border-color: rgba(245,200,66,0.5); box-shadow: 0 6px 18px rgba(245,200,66,0.1); }
    .rel-dual-acct { background: linear-gradient(160deg, rgba(34,24,58,0.6), rgba(8,13,27,0.6)); border-color: rgba(167,139,250,0.28); }
    .rel-dual-acct:hover { border-color: rgba(167,139,250,0.6); box-shadow: 0 6px 18px rgba(124,58,237,0.16); }
    .rel-dual-eyebrow {
      display: flex; align-items: center; gap: 0.25rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.07em; text-transform: uppercase;
      color: #9fb4d4; line-height: 1.15; margin-bottom: 0.28rem;
    }
    .rel-dual-ico { font-size: 0.78rem; line-height: 1; }
    .rel-dual-num {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.95rem; font-weight: 900;
      line-height: 0.95;
    }
    .rel-dual-num-na { color: #5f7798; font-size: 1.5rem; }
    .rel-dual-pct { font-size: 0.95rem; vertical-align: top; }
    .rel-dual-rate {
      display: flex; align-items: center; gap: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.03em; line-height: 1.2;
      margin-top: 0.18rem;
    }
    .rel-dual-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
    .rel-dual-meaning {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.55rem; letter-spacing: 0.02em; color: #7596c0;
      line-height: 1.25; margin-top: 0.32rem;
      padding-top: 0.3rem; border-top: 1px solid rgba(148,163,184,0.1);
    }
    @media (max-width: 380px) {
      .rel-dual-num { font-size: 1.7rem; }
      .rel-dual-meaning { font-size: 0.52rem; }
    }
    .pdx-snap-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap; }
    .pdx-snap-actions > * { flex: 0 0 auto; }
    .pdx-snap-divider { height: 1px; background: rgba(148,163,184,0.12); margin: 0.8rem 0 0; }

    /* ── Clickable Promise % pill ─────────────────────────────────────────────
       The score pill doubles as a "how is this calculated?" affordance — tapping
       it opens the Promise-score explainer popover. */
    .pdx-snap-score-click { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
    .pdx-snap-score-click:hover { transform: translateY(-1px); border-color: rgba(245,200,66,0.55) !important; }
    .pdx-snap-score-click:focus-visible { outline: 2px solid rgba(245,200,66,0.65); outline-offset: 2px; }
    .pdx-score-info {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.44rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
      color: #6f86a8; margin-top: 0.16rem;
      display: flex; align-items: center; justify-content: center; gap: 0.12rem;
      transition: color .18s ease;
    }
    .pdx-snap-score-click:hover .pdx-score-info,
    .pdx-snap-score-click:focus-visible .pdx-score-info { color: #f5c842; }

    /* ── Comment-count chip on listing cards (social proof) ───────────────── */
    .pdx-snap-comments {
      display: inline-flex; align-items: center; gap: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #9fb4d4; background: rgba(96,165,250,0.1);
      border: 1px solid rgba(96,165,250,0.28); border-radius: 999px;
      padding: 0.16rem 0.55rem; cursor: pointer; line-height: 1;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .pdx-snap-comments:hover { color: #cfe4ff; border-color: rgba(96,165,250,0.55); background: rgba(96,165,250,0.18); }
    .pdx-snap-comments .comment-count { font-family: 'Bebas Neue', sans-serif; font-size: 0.92rem; letter-spacing: 0.02em; }

    /* ── Vote-count chip on listing cards (live like / dislike social proof) ── */
    .pdx-snap-votes {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #9fb4d4; background: rgba(148,163,184,0.08);
      border: 1px solid rgba(148,163,184,0.26); border-radius: 999px;
      padding: 0.16rem 0.55rem; cursor: pointer; line-height: 1;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .pdx-snap-votes:hover { border-color: rgba(148,163,184,0.5); background: rgba(148,163,184,0.14); }
    .pdx-snap-votes .vote-up { color: #4ade80; display: inline-flex; align-items: center; gap: 0.18rem; }
    .pdx-snap-votes .vote-dn { color: #f87171; display: inline-flex; align-items: center; gap: 0.18rem; }
    .pdx-snap-votes .vote-up-count, .pdx-snap-votes .vote-dn-count { font-family: 'Bebas Neue', sans-serif; font-size: 0.92rem; letter-spacing: 0.02em; }

    /* ── Promise % explainer popover ──────────────────────────────────────── */
    .pdx-pinfo-overlay {
      position: fixed; inset: 0; z-index: 11000;
      display: none; align-items: center; justify-content: center;
      background: rgba(5,9,18,0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      padding: 1.25rem; opacity: 0; transition: opacity .2s ease;
    }
    .pdx-pinfo-overlay.open { display: flex; opacity: 1; }
    .pdx-pinfo-card {
      width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
      background: linear-gradient(160deg, rgba(18,28,50,0.98), rgba(8,13,27,0.99));
      border: 1px solid rgba(245,200,66,0.34); border-radius: 1rem;
      box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
      padding: 1.35rem 1.4rem 1.5rem;
      transform: translateY(10px) scale(0.985); transition: transform .2s ease;
    }
    .pdx-pinfo-overlay.open .pdx-pinfo-card { transform: none; }
    .pdx-pinfo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
    .pdx-pinfo-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; letter-spacing: 0.04em;
      color: #fff; line-height: 1.05;
    }
    .pdx-pinfo-title span { color: #f5c842; }
    .pdx-pinfo-close {
      flex-shrink: 0; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.25);
      color: #cbd9ec; width: 30px; height: 30px; border-radius: 0.55rem; cursor: pointer;
      font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
      transition: background .18s ease, color .18s ease;
    }
    .pdx-pinfo-close:hover { background: rgba(192,21,42,0.2); color: #fff; }
    .pdx-pinfo-formula {
      background: rgba(10,15,30,0.6); border: 1px solid rgba(245,200,66,0.2);
      border-radius: 0.7rem; padding: 0.75rem 0.85rem; margin-bottom: 0.85rem;
    }
    .pdx-pinfo-formula-eq {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.03em;
      color: #fff; margin-bottom: 0.3rem;
    }
    .pdx-pinfo-formula-eq .k { color: #4ade80; }
    .pdx-pinfo-formula-eq .b { color: #f87171; }
    .pdx-pinfo-calc {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; color: #cbd9ec;
      background: rgba(0,0,0,0.28); border-radius: 0.45rem; padding: 0.4rem 0.6rem; margin-top: 0.5rem;
    }
    .pdx-pinfo-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.7rem; }
    .pdx-pinfo-row-ico { flex-shrink: 0; font-size: 0.95rem; line-height: 1.4; }
    .pdx-pinfo-row p { font-size: 0.78rem; color: #9fb4d4; line-height: 1.55; margin: 0; }
    .pdx-pinfo-row p strong { color: #cbd9ec; }
    .pdx-pinfo-note {
      font-size: 0.72rem; color: #8aa3c4; line-height: 1.5; margin: 0.5rem 0 0;
      padding-top: 0.75rem; border-top: 1px solid rgba(148,163,184,0.14);
    }
    /* Side-by-side Promise % vs Accountability columns in the "difference" explainer */
    .pdx-pinfo-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.95rem; }
    .pdx-pinfo-cmp-col {
      background: rgba(10,15,30,0.55); border: 1px solid rgba(148,163,184,0.2);
      border-radius: 0.7rem; padding: 0.65rem 0.7rem;
    }
    .pdx-pinfo-cmp-h {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2;
    }
    .pdx-pinfo-cmp-sub {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: 0.05em;
      text-transform: uppercase; color: #7596c0; margin: 0.12rem 0 0.4rem;
    }
    .pdx-pinfo-cmp-col p { font-size: 0.7rem; color: #9fb4d4; line-height: 1.5; margin: 0; }
    .pdx-pinfo-cmp-col p strong { color: #cbd9ec; }
    .pdx-pinfo-cmp-col p em { color: #cbd9ec; font-style: italic; }
    @media (max-width: 420px) { .pdx-pinfo-cmp { grid-template-columns: 1fr; } }

    /* Compact icon button used for heart / star controls in the name row */
    .pdx-snap-ctrl {
      background: none; border: none; cursor: pointer;
      font-size: 1rem; line-height: 1;
      padding: 0 0.1rem;
      transition: transform 0.18s ease;
    }
    .pdx-snap-ctrl:hover { transform: scale(1.18); }
    @media (max-width: 640px) {
      .pdx-snap-name { font-size: 1.24rem; }
      .pdx-snap-office { font-size: 0.84rem; }
      /* Keep the unified seat banner + role rails tight and never let a long role
         label overflow on a narrow phone — the label wraps, the rule re-flows. */
      .pdx-field-head { padding: 0.6rem 0.75rem 0.62rem 0.9rem; }
      .pdx-field-head--compact { padding: 0.5rem 0.7rem 0.52rem 0.82rem; }
      .pdx-field-role-divider { flex-wrap: wrap; gap: 0.4rem; }
      .pdx-field-role-divider .pdx-field-role-pill { white-space: normal; }
      .pdx-field-role-divider .pdx-field-role-rule { min-width: 2rem; }
    }

    .chub-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(30,64,175,0.35);
      border: 1px solid rgba(96,165,250,0.35);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.45rem 0.85rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .chub-add-btn:hover { background: rgba(30,64,175,0.55); border-color: rgba(96,165,250,0.6); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,130,246,0.2); }
    .chub-add-btn.chub-added { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.45); color: #4ade80; box-shadow: 0 0 8px rgba(34,197,94,0.15); }
    .chub-launch-bar {
      position: sticky;
      bottom: 0;
      z-index: 10;
      background: linear-gradient(180deg, transparent 0%, rgba(10,15,30,0.97) 25%, rgba(10,15,30,0.99) 100%);
      padding: 1.5rem 0 0.75rem;
      text-align: center;
    }
    .chub-launch-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      border: 1px solid rgba(96,165,250,0.5);
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.9rem 2.5rem;
      border-radius: 1rem;
      cursor: pointer;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 24px rgba(59,130,246,0.25);
      transition: all 0.25s;
    }
    .chub-launch-btn:hover:not(:disabled) { background: linear-gradient(135deg, #2563eb, #3b82f6); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 36px rgba(59,130,246,0.4); }
    .chub-launch-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
    .chub-score { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1; }
    .chub-your-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.3);
      color: #4ade80;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
    }
    /* Current-officeholder badge — an explicit "holds this seat now" marker on
       incumbent cards in the Voter Hub's Relevant-to-Me ballot, so the sitting
       officeholder reads instantly instead of relying on the green card color
       alone. Amber to match the "Current officeholder" hero treatment and to sit
       distinct from the green "📍 Local" / "✓ On Team" membership badges. */
    .chub-office-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      background: rgba(251,191,36,0.12);
      border: 1px solid rgba(251,191,36,0.4);
      color: #fcd34d;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
    }
       Emerald + house glyph so "this is part of my real ballot" reads instantly
       and distinctly from the lighter "📍 Local" / "✓ On Team" badges. */
    .chub-home-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      background: linear-gradient(135deg, rgba(22,163,74,0.22), rgba(74,222,128,0.1));
      border: 1px solid rgba(74,222,128,0.55);
      color: #bbf7d0;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      box-shadow: 0 0 10px rgba(74,222,128,0.18);
    }
    /* The "which team am I looking at" line under the Relevant to Me header —
       Home Base (emerald) vs Research view (blue) vs a set-location prompt. Keeps
       the section honest about whether the list is the voter's real ballot or a
       temporary research view. */
    .rel-home-mode-tag {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      flex-wrap: wrap;
      margin-top: 0.6rem;
      padding: 0.55rem 0.8rem;
      border-radius: 0.8rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      line-height: 1.35;
      letter-spacing: 0.01em;
    }
    .rel-home-mode-tag.is-home { background: linear-gradient(135deg, rgba(6,78,59,0.4), rgba(74,222,128,0.06)); border: 1px solid rgba(74,222,128,0.5); color: #d1fae5; }
    .rel-home-mode-tag.is-research { background: linear-gradient(135deg, rgba(30,58,138,0.32), rgba(96,165,250,0.05)); border: 1px solid rgba(96,165,250,0.45); color: #dbeafe; }
    .rel-home-mode-tag.is-setup { background: linear-gradient(135deg, rgba(120,53,15,0.3), rgba(245,158,11,0.06)); border: 1px solid rgba(245,158,11,0.45); color: #fde68a; }
    .rel-home-mode-tag__ico { font-size: 1.05rem; flex-shrink: 0; }
    .rel-home-mode-tag__txt { flex: 1; min-width: 180px; }
    .rel-home-mode-tag__btn {
      white-space: nowrap;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-size: 0.68rem;
      border-radius: 0.55rem;
      padding: 0.4rem 0.75rem;
      cursor: pointer;
      background: rgba(255,255,255,0.06);
      border: 1px solid currentColor;
      color: inherit;
      transition: transform 0.15s ease, background 0.2s ease;
    }
    .rel-home-mode-tag__btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); }

    /* ── My Politicians Collection ─────────────────────── */
    .mypol-star {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.15rem;
      line-height: 1;
      transition: transform 0.2s, filter 0.2s;
      padding: 0.15rem;
      filter: grayscale(1) opacity(0.35);
    }
    .mypol-star:hover { transform: scale(1.3); filter: grayscale(0) opacity(0.85); }
    .mypol-star.mypol-saved { filter: grayscale(0) opacity(1); color: #fbbf24; }
    .mypol-star.mypol-saved:hover { filter: grayscale(0) opacity(1); transform: scale(1.15); }
    .mypol-count-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(245,158,11,0.18);
      border: 1px solid rgba(245,158,11,0.35);
      color: #fbbf24;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.65rem;
      min-width: 1.4rem;
      height: 1.4rem;
      padding: 0 0.35rem;
      border-radius: 999px;
      letter-spacing: 0.04em;
      vertical-align: middle;
      margin-left: 0.3rem;
    }
    .mypol-remove-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.25);
      color: #f87171;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.6rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      padding: 0.3rem 0.6rem;
      border-radius: 0.4rem;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .mypol-remove-btn:hover { background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.5); }

    /* Primary rep highlight card */
    .mypol-primary-card {
      border-color: rgba(245,158,11,0.4) !important;
      background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(15,23,42,0.95) 50%) !important;
      box-shadow: 0 0 20px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.12);
    }
    .mypol-primary-card:hover {
      border-color: rgba(245,158,11,0.55) !important;
      box-shadow: 0 0 30px rgba(245,158,11,0.12), inset 0 1px 0 rgba(245,158,11,0.18);
    }
    .mypol-house-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(217,119,6,0.15) 100%);
      border: 1px solid rgba(245,158,11,0.45);
      color: #fbbf24;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.55rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.25rem 0.6rem;
      border-radius: 0.4rem;
      white-space: nowrap;
      animation: badgePulse 3s ease-in-out infinite;
    }
    .mypol-rep-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      background: rgba(59,130,246,0.12);
      border: 1px solid rgba(59,130,246,0.3);
      color: #60a5fa;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.55rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.2rem 0.5rem;
      border-radius: 0.35rem;
      white-space: nowrap;
    }
    @keyframes badgePulse {
      0%, 100% { box-shadow: 0 0 4px rgba(245,158,11,0.15); }
      50% { box-shadow: 0 0 12px rgba(245,158,11,0.3); }
    }

    /* ── Team Builder: large team member cards ─────────────── */
    .myteam-card {
      background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(17,29,54,0.95) 40%, rgba(13,21,38,0.95) 100%);
      border: 2px solid rgba(245,158,11,0.3);
      border-radius: 1.25rem;
      padding: 1.25rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .myteam-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 30%, rgba(245,158,11,0.04) 55%, transparent 80%);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    @media (hover: hover) {
      .myteam-card:hover { border-color: rgba(245,158,11,0.55); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 24px rgba(245,158,11,0.12); }
      .myteam-card:hover::before { opacity: 1; }
    }
    .myteam-card .myteam-photo {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 3px solid rgba(245,158,11,0.4);
      background: rgba(30,53,96,0.5);
      box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 12px rgba(245,158,11,0.12);
    }
    .myteam-card .myteam-photo img {
      width: 100%; height: 100%; object-fit: cover; object-position: top center;
    }
    .myteam-remove-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      background: rgba(239,68,68,0.1);
      border: 1px solid rgba(239,68,68,0.25);
      color: #f87171;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.4rem 0.75rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .myteam-remove-btn:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.45); }
    .myteam-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.35) 0%, rgba(245,158,11,0.18) 100%);
      border: 2px solid rgba(245,158,11,0.65);
      color: #fbbf24;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      padding: 0.6rem 1.25rem;
      border-radius: 0.65rem;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.34,1.4,0.64,1);
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(245,158,11,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
      position: relative;
      overflow: hidden;
    }
    .myteam-add-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%);
      opacity: 0;
      transition: opacity 0.25s;
    }
    .myteam-add-btn:hover { background: linear-gradient(135deg, rgba(245,158,11,0.45) 0%, rgba(245,158,11,0.28) 100%); border-color: rgba(245,158,11,0.85); transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 28px rgba(245,158,11,0.28), 0 0 20px rgba(245,158,11,0.1), inset 0 1px 0 rgba(255,255,255,0.1); }
    .myteam-add-btn:hover::before { opacity: 1; }
    .myteam-add-btn:active { transform: translateY(0) scale(0.97); }
    .myteam-add-btn.on-team { background: linear-gradient(135deg, rgba(74,222,128,0.22) 0%, rgba(74,222,128,0.1) 100%); border-color: rgba(74,222,128,0.5); color: #4ade80; box-shadow: 0 3px 14px rgba(74,222,128,0.12); }
    .myteam-add-btn.on-team:hover { background: linear-gradient(135deg, rgba(239,68,68,0.22) 0%, rgba(239,68,68,0.1) 100%); border-color: rgba(239,68,68,0.5); color: #f87171; box-shadow: 0 3px 14px rgba(239,68,68,0.12); }
    @media (max-width: 640px) {
      .myteam-card .myteam-photo { width: 56px; height: 56px; }
      .myteam-card { padding: 1rem; }
      #myteam-cards-grid { grid-template-columns: 1fr !important; }
      #myteam-stats { grid-template-columns: repeat(2, 1fr) !important; }
      .myteam-slot { padding: 1.25rem 0.85rem 1rem; }
      .myteam-slot-photo { width: 76px; height: 76px; }
      .myteam-slot .chub-score { font-size: 1.7rem !important; }
      .myteam-add-btn { font-size: 0.75rem; padding: 0.5rem 1rem; }
    }

    /* ── MY TEAM: primary-destination treatment ──────────────────────────────
       The builder is the page's main destination, so its panel gets a soft,
       slowly-breathing amber aura that the flat-bordered supporting sections
       (Key Races / Relevant to Me) deliberately lack. This is the ambient cue
       that says "this is the section to focus on" without adding more content.
       The aura bleeds only a few px past the panel so it never causes
       horizontal scroll inside the page's padded container. */
    .myteam-primary-hub { position: relative; z-index: 1; }
    .myteam-primary-hub::before {
      content: ''; position: absolute; inset: -14px; z-index: -1;
      border-radius: 1.85rem; pointer-events: none;
      background: radial-gradient(115% 90% at 50% 0%, rgba(245,158,11,0.26) 0%, rgba(245,158,11,0.08) 38%, rgba(245,158,11,0) 68%);
      animation: myteam-hub-aura 5s ease-in-out infinite;
    }
    @keyframes myteam-hub-aura { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
    /* Gentle "alive" pulse on the builder's star so the destination reads as the
       active focus, not just another header icon. */
    .myteam-hub-star { animation: myteam-hub-star 4s ease-in-out infinite; }
    @keyframes myteam-hub-star {
      0%, 100% { box-shadow: 0 0 32px rgba(245,158,11,0.35); }
      50% { box-shadow: 0 0 46px rgba(245,158,11,0.6); }
    }
    @media (max-width: 480px) { .myteam-primary-hub::before { inset: -6px; } }
    @media (prefers-reduced-motion: reduce) {
      .myteam-primary-hub::before, .myteam-hub-star { animation: none; }
    }
    /* Compact ①→②→★ journey breadcrumb in the builder header — reinforces that
       this is the final destination the other two sections feed into. Wraps
       cleanly on phones. */
    .myteam-journey {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem;
      margin-top: 0.7rem; font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.3;
    }
    .myteam-journey__step { color: #8aa0c2; white-space: nowrap; }
    .myteam-journey__arrow { color: #6b7f9e; opacity: 0.7; }
    .myteam-journey__step.is-here {
      display: inline-flex; align-items: center; gap: 0.4rem;
      color: #1a1206; font-weight: 800; text-transform: uppercase;
      background: linear-gradient(135deg, #ffe486, #e7b53e);
      border-radius: 999px; padding: 0.18rem 0.7rem;
      box-shadow: 0 3px 12px rgba(245,200,66,0.28);
    }
    .myteam-journey__step.is-here em {
      font-style: normal; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.06em; color: #5b4310; opacity: 0.85;
    }

    /* ── MY TEAM: 6-Slot Ballot Position Grid ──────────── */
    .myteam-slots-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      align-items: stretch;
      margin-bottom: 1rem;
    }
    /* Compact focus label above the 6-slot grid — frames the slots as THE action
       of the primary builder. Carries real weight (solid amber accent + filled
       background) so the six ballot seats read as the page's focal point. */
    .myteam-slots-focus-label {
      display: flex; align-items: center; gap: 0.7rem;
      margin: 0.5rem 0 1rem; padding: 0.7rem 1rem;
      border-radius: 0.85rem; border: 1px solid rgba(245,200,66,0.45);
      border-left: 4px solid #f5c842;
      background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(245,158,11,0.05));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .myteam-slots-focus-ico { font-size: 1.25rem; line-height: 1; flex: none; }
    .myteam-slots-focus-text {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem;
      letter-spacing: 0.02em; color: #f6e1b3; line-height: 1.35;
    }
    .myteam-slots-focus-text strong { color: #ffe9c2; font-weight: 700; }
    /* Labeled divider between the primary My Voting Team builder and the supporting
       Key Races / Relevant to Me sections that feed it. */
    .myteam-feeder-divider {
      display: flex; align-items: center; gap: 0.8rem;
      margin: 1rem 0 1.7rem;
    }
    .myteam-feeder-divider__line {
      flex: 1; height: 1px;
      background: linear-gradient(90deg, rgba(245,200,66,0) 0%, rgba(245,200,66,0.35) 50%, rgba(245,200,66,0) 100%);
    }
    .myteam-feeder-divider__label {
      flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #cbb574; white-space: nowrap;
    }
    @media (max-width: 480px) {
      .myteam-feeder-divider__label { font-size: 0.64rem; letter-spacing: 0.06em; white-space: normal; text-align: center; }
    }
    @media (max-width: 1023px) {
      .myteam-slots-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 639px) {
      .myteam-slots-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    }
    /* ── MY TEAM: grouped builder (Federal · Statewide · Your Districts · Local) ──
       The single authoritative builder organizes its seats into the levels of
       government a voter actually reasons about. When grouped, the outer container
       stops being a grid; each level becomes a distinct BAND — an accent-edged
       panel with a two-line header — so the whole screen scans top-to-bottom as
       the structure of the ballot rather than a flat wall of cards. */
    .myteam-slots-grid.is-grouped { display: block; }
    .myteam-group {
      position: relative;
      margin: 0 0 1.85rem;
      padding: 1.05rem 1.15rem 1.25rem;
      border-radius: 1.15rem;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--grp-accent, #94a3b8) 5%, transparent) 0%, rgba(255,255,255,0) 42%),
        rgba(9,14,27,0.34);
      border: 1px solid rgba(255,255,255,0.07);
      border-left: 3px solid color-mix(in srgb, var(--grp-accent, #94a3b8) 60%, transparent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .myteam-group:last-child { margin-bottom: 0.5rem; }
    /* A completed level quietly reads as "done"; an untouched one sits back. */
    .myteam-group.is-complete { border-left-color: color-mix(in srgb, var(--grp-accent, #94a3b8) 85%, transparent); }
    .myteam-group.is-empty { background: rgba(9,14,27,0.24); }
    .myteam-group-head { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid color-mix(in srgb, var(--grp-accent, #94a3b8) 16%, rgba(255,255,255,0.06)); flex-wrap: wrap; }
    .myteam-group-ico {
      font-size: 1.05rem; line-height: 1; flex: none;
      width: 2.1rem; height: 2.1rem; border-radius: 0.7rem;
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--grp-accent, #94a3b8) 14%, rgba(255,255,255,0.03));
      border: 1px solid color-mix(in srgb, var(--grp-accent, #94a3b8) 30%, transparent);
    }
    .myteam-group-heading { display: flex; flex-direction: column; gap: 0.06rem; min-width: 0; }
    .myteam-group-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--grp-accent, #94a3b8) 62%, #9fb4d4); line-height: 1.2; }
    .myteam-group-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.02rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--grp-accent, #94a3b8) 30%, #f1f6fd); line-height: 1.05; }
    .myteam-group-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 0.03em; color: #8aa0c2; }
    .myteam-group-count { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.65rem; border-radius: 999px; color: #9fb4d4; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
    .myteam-group-count.is-full { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); }
    .myteam-group-count.is-partial { color: #fbbf24; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.32); }
    .myteam-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; align-items: stretch; }
    @media (max-width: 1023px) { .myteam-group-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 639px) {
      .myteam-group { padding: 0.85rem 0.9rem 1rem; margin-bottom: 1.4rem; }
      .myteam-group-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
      .myteam-group-sub { flex-basis: 100%; order: 3; margin-top: -0.2rem; }
    }
    /* ── MY TEAM: sidebar + stage "cockpit" (Federal · Statewide · State
       Legislative · Local) ─────────────────────────────────────────────────
       Replaces the old stacked vertical bands with a calm left-hand level nav
       and a single main stage that shows only the selected level's seats. The
       nav reads top-to-bottom as the structure of the ballot; the stage keeps
       the polished seat cards unchanged. */
    .myteam-slots-grid.is-cockpit { display: block; }
    .myteam-cockpit {
      display: grid;
      grid-template-columns: 244px minmax(0, 1fr);
      gap: 1.35rem;
      align-items: start;
    }
    .myteam-cockpit-nav {
      display: flex; flex-direction: column; gap: 0.5rem;
      position: sticky; top: 84px;
      padding: 0.55rem;
      border-radius: 1.1rem;
      background: rgba(9,14,27,0.5);
      border: 1px solid rgba(255,255,255,0.07);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .myteam-cockpit-navitem {
      display: flex; align-items: center; gap: 0.6rem;
      width: 100%; text-align: left; cursor: pointer;
      padding: 0.65rem 0.7rem;
      border-radius: 0.8rem;
      background: transparent;
      border: 1px solid transparent;
      border-left: 3px solid transparent;
      transition: background 0.2s, border-color 0.2s, transform 0.15s;
    }
    .myteam-cockpit-navitem:hover {
      background: color-mix(in srgb, var(--nav-accent, #94a3b8) 8%, rgba(255,255,255,0.02));
      border-color: color-mix(in srgb, var(--nav-accent, #94a3b8) 22%, rgba(255,255,255,0.05));
    }
    .myteam-cockpit-navitem.is-active {
      background: color-mix(in srgb, var(--nav-accent, #94a3b8) 15%, rgba(13,21,38,0.6));
      border-color: color-mix(in srgb, var(--nav-accent, #94a3b8) 34%, transparent);
      border-left-color: var(--nav-accent, #94a3b8);
      box-shadow: 0 6px 20px rgba(0,0,0,0.28);
    }
    .myteam-cockpit-navico {
      font-size: 1.05rem; line-height: 1; flex: none;
      width: 2.05rem; height: 2.05rem; border-radius: 0.65rem;
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--nav-accent, #94a3b8) 15%, rgba(255,255,255,0.03));
      border: 1px solid color-mix(in srgb, var(--nav-accent, #94a3b8) 30%, transparent);
    }
    .myteam-cockpit-navtxt { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1; }
    .myteam-cockpit-navlabel {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.88rem; letter-spacing: 0.03em; color: #eaf1fb; line-height: 1.1;
    }
    .myteam-cockpit-navitem.is-active .myteam-cockpit-navlabel { color: #fff; }
    .myteam-cockpit-navsub {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem;
      letter-spacing: 0.02em; color: #8aa0c2; line-height: 1.15;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .myteam-cockpit-navcount {
      flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
      padding: 0.15rem 0.5rem; border-radius: 999px;
      color: #9fb4d4; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    }
    .myteam-cockpit-navcount.is-full { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); }
    .myteam-cockpit-navcount.is-partial { color: #fbbf24; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.32); }
    .myteam-cockpit-stage { min-width: 0; }
    .myteam-cockpit-panel { animation: mtCockpitIn 0.28s ease; }
    .myteam-cockpit-panel[hidden] { display: none; }
    @keyframes mtCockpitIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .myteam-cockpit-panelhead {
      display: flex; align-items: center; gap: 0.6rem;
      margin: 0 0 1.1rem; padding-bottom: 0.7rem;
      border-bottom: 1px solid color-mix(in srgb, var(--panel-accent, #94a3b8) 18%, rgba(255,255,255,0.06));
      flex-wrap: wrap;
    }
    .myteam-cockpit-panelico { font-size: 1.15rem; line-height: 1; flex: none; }
    .myteam-cockpit-paneltitle {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 1.12rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: color-mix(in srgb, var(--panel-accent, #94a3b8) 28%, #f1f6fd); line-height: 1.05;
    }
    .myteam-cockpit-panelcount {
      margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.2rem 0.65rem; border-radius: 999px;
      color: #9fb4d4; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    }
    .myteam-cockpit-panelcount.is-full { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); }
    .myteam-cockpit-panelcount.is-partial { color: #fbbf24; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.32); }
    .myteam-cockpit-seats {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
      gap: 1.1rem; align-items: stretch;
    }
    /* Local level — real seats grouped under calm sub-headings. */
    .myteam-local-sub { margin-bottom: 1.5rem; }
    .myteam-local-sub:last-child { margin-bottom: 0; }
    .myteam-local-subhead {
      display: flex; align-items: center; gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: #cbb7e8; margin: 0 0 0.8rem;
    }
    .myteam-local-subcount {
      font-size: 0.62rem; color: #c084fc; background: rgba(192,132,252,0.12);
      border: 1px solid rgba(192,132,252,0.3); border-radius: 999px; padding: 0.05rem 0.45rem;
    }
    .myteam-local-seat {
      display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
      padding: 0.85rem 0.9rem 0.9rem; border-radius: 1.1rem;
      background: linear-gradient(180deg, color-mix(in srgb, var(--seat-color, #c084fc) 8%, rgba(13,21,38,0.55)) 0%, rgba(10,15,30,0.4) 100%);
      border: 1px solid color-mix(in srgb, var(--seat-color, #c084fc) 24%, rgba(255,255,255,0.05));
      box-shadow: 0 8px 24px rgba(0,0,0,0.26);
    }
    .myteam-local-seat-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
    .myteam-local-seat-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.98rem; letter-spacing: 0.02em; color: #f4eefb; line-height: 1.15;
    }
    .myteam-local-seat-ballot {
      margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #a5b4fc; background: rgba(129,140,248,0.12); border: 1px solid rgba(129,140,248,0.3);
      border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap;
    }
    .myteam-local-seat-chamber {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--seat-color, #c084fc) 55%, #9fb4d4);
    }
    .myteam-local-holders { display: flex; flex-direction: column; gap: 0.4rem; }
    .myteam-local-holder {
      display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; cursor: pointer;
      padding: 0.4rem 0.45rem; border-radius: 0.7rem;
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
      transition: background 0.2s, border-color 0.2s;
    }
    .myteam-local-holder:hover { background: rgba(255,255,255,0.05); border-color: color-mix(in srgb, var(--seat-color, #c084fc) 30%, transparent); }
    .myteam-local-holder.is-pick { border-color: rgba(245,200,66,0.5); background: rgba(245,158,11,0.08); }
    .myteam-local-holder-photo {
      flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
      display: flex; align-items: center; justify-content: center; font-size: 1rem;
      background: rgba(255,255,255,0.05); border: 1px solid color-mix(in srgb, var(--seat-color, #c084fc) 45%, transparent); color: #cbd5e1;
    }
    .myteam-local-holder-photo img { width: 100%; height: 100%; object-fit: cover; }
    .myteam-local-holder-info { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
    .myteam-local-holder-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.86rem; color: #eaf1fb; line-height: 1.1; }
    .myteam-local-holder-office { font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; color: #8aa0c2; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .myteam-local-pickbadge { font-size: 0.58rem; color: #fcd34d; letter-spacing: 0.04em; }
    .myteam-local-pending, .myteam-local-note {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; line-height: 1.4; color: #94a9c9;
    }
    .myteam-local-note { color: #7f96b8; }
    .myteam-local-seat-actions { margin-top: 0.1rem; }
    .myteam-local-seat-btn {
      width: 100%; cursor: pointer; font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: color-mix(in srgb, var(--seat-color, #c084fc) 62%, #cbd5e1);
      padding: 0.5rem 0.7rem; border-radius: 0.7rem;
      background: color-mix(in srgb, var(--seat-color, #c084fc) 10%, rgba(255,255,255,0.02));
      border: 1px solid color-mix(in srgb, var(--seat-color, #c084fc) 28%, rgba(255,255,255,0.08));
      transition: background 0.2s, border-color 0.2s;
    }
    .myteam-local-seat-btn:hover { background: color-mix(in srgb, var(--seat-color, #c084fc) 18%, rgba(255,255,255,0.03)); }
    /* A local seat holding the committed pick gets the same gold accent the other
       levels use for a filled seat, so a chosen local office reads as "done". */
    .myteam-local-seat.is-pick {
      border-color: rgba(245,200,66,0.42);
      box-shadow: 0 8px 24px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(245,200,66,0.22);
    }
    .myteam-local-seat-tag {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: color-mix(in srgb, var(--seat-color, #c084fc) 60%, #9fb4d4);
    }
    .myteam-local-seat-tag.is-pick { color: #fcd34d; }
    /* Profile / Compare / Swap sit side-by-side, matching the slot card action row. */
    .myteam-local-seat-actions--row { display: flex; gap: 0.35rem; }
    .myteam-local-seat-actions--row .myteam-local-seat-btn {
      flex: 1 1 0; min-width: 0; padding: 0.45rem 0.3rem; font-size: 0.63rem;
      letter-spacing: 0.02em; text-align: center; white-space: nowrap;
    }
    .myteam-local-seat-btn.is-comparing {
      color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.4);
    }
    .myteam-local-empty { grid-column: 1 / -1; text-align: center; padding: 2rem 1rem; }
    .myteam-local-empty-ico { font-size: 2.6rem; margin-bottom: 0.6rem; filter: drop-shadow(0 0 18px rgba(192,132,252,0.3)); }
    .myteam-local-empty-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.03em; color: #e9e2f6; margin-bottom: 0.4rem; }
    .myteam-local-empty-txt { font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; color: #94a9c9; max-width: 30rem; margin: 0 auto 0.9rem; line-height: 1.45; }
    .myteam-local-empty-btn {
      cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: #fcd34d;
      padding: 0.55rem 1.1rem; border-radius: 0.75rem;
      background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.45);
    }
    /* Cockpit responsive — the sidebar folds into a horizontal, scrollable strip
       above the stage on tablets and phones so it stays calm and thumb-reachable. */
    @media (max-width: 880px) {
      .myteam-cockpit { grid-template-columns: 1fr; gap: 0.9rem; }
      .myteam-cockpit-nav {
        position: static; flex-direction: row; gap: 0.5rem;
        overflow-x: auto; padding: 0.45rem; -webkit-overflow-scrolling: touch;
      }
      .myteam-cockpit-navitem { flex: 0 0 auto; min-width: 172px; }
      .myteam-cockpit-navsub { display: none; }
    }
    @media (max-width: 480px) {
      .myteam-cockpit-navitem { min-width: 150px; }
      .myteam-cockpit-seats { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    }
    .myteam-slot-scope { font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9fb4d4; margin: 0.15rem 0 0.1rem; }
    /* ── Seat cards (Option B, Phase 1) — a seat = who holds it now + your pick +
       anyone else you're tracking for it. .pdxseat is the grid item that wraps the
       existing pick / empty card so nothing about the polished per-pick visuals
       changes; it just adds the seat context above (holder) and below (others). */
    /* Phase 2 refinement — each seat is now a self-contained CARD (subtle
       seat-colored frame + tint + shadow) so seats read as distinct units. The
       frame carries three clearly ranked bands: a "Now representing you" header,
       the committed pick as the dominant body, and a quiet "Also tracking" footer.
       All framing is scoped to .pdxseat, so the plain-card fallback (PDX_SEAT_CARDS
       off) renders exactly as before. */
    .pdxseat {
      display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;
      position: relative; padding: 0.55rem 0.6rem 0.7rem;
      border-radius: 1.5rem;
      transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    }
    .pdxseat.is-filled {
      background: linear-gradient(180deg, color-mix(in srgb, var(--seat-color) 9%, rgba(13,21,38,0.6)) 0%, rgba(10,15,30,0.42) 100%);
      border: 1px solid color-mix(in srgb, var(--seat-color) 26%, rgba(255,255,255,0.05));
      box-shadow: 0 10px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .pdxseat.is-open {
      background: linear-gradient(180deg, color-mix(in srgb, var(--seat-color) 5%, rgba(13,21,38,0.42)) 0%, rgba(10,15,30,0.28) 100%);
      border: 1px solid color-mix(in srgb, var(--seat-color) 16%, rgba(255,255,255,0.04));
      box-shadow: 0 7px 22px rgba(0,0,0,0.24);
    }
    .pdxseat.is-filled:hover { border-color: color-mix(in srgb, var(--seat-color) 44%, transparent); box-shadow: 0 16px 44px rgba(0,0,0,0.44), 0 0 26px color-mix(in srgb, var(--seat-color) 13%, transparent), inset 0 1px 0 rgba(255,255,255,0.05); }
    .pdxseat.is-open:hover { border-color: color-mix(in srgb, var(--seat-color) 34%, transparent); }
    /* Committed pick = the dominant body. Inside the frame it keeps its polished
       treatment but nests cleanly (harmonized radius) so the frame — not a second
       competing box — is the seat boundary. */
    .pdxseat > .myteam-slot, .pdxseat > .myteam-slot-empty { flex: 1 1 auto; margin: 0; }
    .pdxseat > .myteam-slot { border-radius: 1.05rem; }
    .pdxseat > .myteam-slot-empty { border-radius: 1.05rem; min-height: 188px; }
    /* Open seat: the empty body drops its own fill so it reads as one surface with
       the seat frame — a clear, inviting drop-zone that matches filled seats. */
    .pdxseat.is-open > .myteam-slot-empty {
      background: transparent; border-style: dashed;
      border-color: color-mix(in srgb, var(--seat-color) 28%, rgba(255,255,255,0.07));
    }
    /* ── Seat header: "📍 Now representing you" — the top band. A brighter label, a
       real divider, and a View affordance make it clearly the most prominent
       context and clearly separated from the committed pick below. */
    .pdxseat-holder {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.3rem 0.45rem 0.55rem; margin: 0 0.1rem;
      border-bottom: 1px solid color-mix(in srgb, var(--seat-color) 26%, rgba(255,255,255,0.06));
      border-radius: 0.5rem 0.5rem 0 0;
      cursor: pointer; transition: background 0.2s;
    }
    .pdxseat-holder:hover { background: color-mix(in srgb, var(--seat-color) 9%, transparent); }
    .pdxseat-holder-photo { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(255,255,255,0.06); border: 1.5px solid color-mix(in srgb, var(--seat-color) 48%, transparent); color: #cbd5e1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--seat-color) 10%, transparent); }
    .pdxseat-holder-photo img { width: 100%; height: 100%; object-fit: cover; }
    .pdxseat-holder-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.2; flex: 1 1 auto; }
    .pdxseat-holder-lbl { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: color-mix(in srgb, var(--seat-color) 70%, #e8eefb); }
    .pdxseat-holder-name { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.9rem; color: #f1f6fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pdxseat-holder-go { flex: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--seat-color) 62%, #9fb4d4); opacity: 0.82; transition: transform 0.2s, opacity 0.2s; }
    .pdxseat-holder:hover .pdxseat-holder-go { opacity: 1; transform: translateX(2px); }
    /* ── "★ Your pick for this seat" — the middle band that names the committed
       choice, sitting between the incumbent header and the "Also tracking" footer.
       A quiet gold eyebrow (not a heavy box) so the pick CARD stays the dominant
       element while the label makes the three-band hierarchy explicit. */
    .pdxseat-picklabel {
      display: flex; align-items: center; gap: 0.35rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase;
      color: #fcd34d; margin: 0.15rem 0.2rem 0.05rem;
    }
    /* ── Seat footer: "👀 Also tracking for this seat" — a quiet, secondary band. A
       top divider sets it apart from the pick while cleaner chips keep it scannable. */
    .pdxseat-others { padding: 0.5rem 0.25rem 0.1rem; margin: 0 0.15rem; border-top: 1px solid rgba(255,255,255,0.08); }
    .pdxseat-others-lbl { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #93a9cb; margin-bottom: 0.4rem; }
    .pdxseat-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
    .pdxseat-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.62rem 0.22rem 0.28rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s; max-width: 100%; min-height: 30px; }
    .pdxseat-chip:hover { border-color: color-mix(in srgb, var(--seat-color) 55%, transparent); background: rgba(255,255,255,0.09); transform: translateY(-1px); }
    .pdxseat-chip-photo { width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #cbd5e1; }
    .pdxseat-chip-photo img { width: 100%; height: 100%; object-fit: cover; }
    .pdxseat-chip-name { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 0.74rem; color: #dbe6f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8rem; }
    .pdxseat-chip-more { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; color: #9fb4d4; padding: 0 0.35rem; }
    /* Compact "you're underway" next-step strip (shown once 2+ seats are filled) */
    .myteam-guide.is-compact { padding-bottom: 0.9rem; }
    .myteam-guide-compact-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.4rem; }
    .myteam-guide-compact-next { font-family: 'Barlow', sans-serif; font-size: 0.82rem; line-height: 1.4; color: #cbd5e1; }
    .myteam-guide-compact-next strong { color: #fff; font-weight: 700; }
    @media (max-width: 560px) { .myteam-guide-compact-row .myteam-guide-go { width: 100%; margin-left: 0; } }
    /* "Manage full team" round-trip link on supporting discovery sections */
    .pdx-back-to-team { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fbbf24; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.32); border-radius: 999px; padding: 0.4rem 0.85rem; min-height: 36px; transition: background 0.2s, border-color 0.2s, color 0.2s; text-decoration: none; }
    .pdx-back-to-team:hover { color: #fff; background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.55); }
    /* Prominent, consistent variant of the "↑ Manage full team in My Voting Team"
       link used in the Key Races and Relevant to Me section headers. A filled amber
       pill so the path UP to the one builder is the most eye-catching CTA in each
       supporting section — reinforcing My Voting Team as the page's main destination. */
    .pdx-back-to-team--strong {
      font-size: 0.8rem; padding: 0.62rem 1.2rem; min-height: 44px; color: #1a1206;
      background: linear-gradient(135deg, #ffe486, #e7b53e); border: 1px solid rgba(245,200,66,0.6);
      box-shadow: 0 5px 18px rgba(245,200,66,0.28);
    }
    .pdx-back-to-team--strong:hover { color: #1a1206; background: linear-gradient(135deg, #ffeca0, #efc257); border-color: rgba(245,200,66,0.9); transform: translateY(-1px); }
    /* Light "set expectations" guidance banner at the top of Relevant to Me —
       tells voters this is the research surface and the team is built above. */
    .rel-research-guide {
      display: flex; align-items: flex-start; gap: 0.5rem;
      margin: 0 0 0.95rem; padding: 0.55rem 0.85rem;
      border-radius: 0.7rem; border-left: 3px solid rgba(245,200,66,0.55);
      background: rgba(245,158,11,0.07);
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem;
      letter-spacing: 0.01em; color: #d6e3f5; line-height: 1.4;
    }
    .rel-research-guide strong { color: #fff; font-weight: 700; }
    .rel-research-guide__team { color: #fcd34d !important; }
    /* ── "Done researching?" closing bridge — the end-of-section hand-off from
       Relevant to Me (research) back up to My Voting Team (the one builder). Amber
       to match the team theme and read as the primary next move once browsing is
       done; deliberately heavier than the inline pill links above it. */
    .rel-done-cta {
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
      margin-top: 1.75rem; padding: 1.15rem 1.35rem; border-radius: 1.25rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(245,200,66,0.07) 55%, rgba(10,15,30,0.5) 100%);
      border: 2px solid rgba(245,158,11,0.4);
      box-shadow: 0 10px 36px rgba(0,0,0,0.3), 0 0 26px rgba(245,158,11,0.08);
    }
    .rel-done-cta__icon {
      flex: 0 0 auto; width: 48px; height: 48px; border-radius: 0.9rem;
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(245,158,11,0.12));
      border: 1px solid rgba(245,158,11,0.45);
    }
    .rel-done-cta__body { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
    .rel-done-cta__eyebrow {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fcd34d; line-height: 1;
    }
    .rel-done-cta__title {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.02em;
      color: #fff; line-height: 1.05;
    }
    .rel-done-cta__sub { font-family: 'Barlow', sans-serif; font-size: 0.78rem; color: #e7d3a8; line-height: 1.4; }
    .rel-done-cta__btn {
      flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.92rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #1a1206;
      background: linear-gradient(135deg, #ffe486, #e0a82e); border: none;
      border-radius: 0.85rem; padding: 0.85rem 1.5rem; min-height: 50px;
      box-shadow: 0 6px 22px rgba(245,200,66,0.4);
      transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .rel-done-cta__btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 30px rgba(245,200,66,0.55); }
    .rel-done-cta__btn:active { transform: scale(0.99); }
    @media (max-width: 640px) {
      .rel-done-cta { padding: 1rem 1.1rem; }
      .rel-done-cta__btn { width: 100%; justify-content: center; }
      .rel-done-cta__title { font-size: 1.35rem; }
    }
    @keyframes myteam-card-in { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: none; } }
    @keyframes myteam-add-success { 0%{transform:scale(1)} 25%{transform:scale(1.08)} 50%{transform:scale(0.96)} 75%{transform:scale(1.03)} 100%{transform:scale(1)} }
    @keyframes myteam-add-ripple { 0%{box-shadow:0 0 0 0 rgba(74,222,128,0.5)} 100%{box-shadow:0 0 0 18px rgba(74,222,128,0)} }
    @keyframes myteam-checkmark { 0%{transform:scale(0) rotate(-45deg);opacity:0} 50%{transform:scale(1.3) rotate(0deg);opacity:1} 100%{transform:scale(1) rotate(0deg);opacity:1} }
    .myteam-add-btn.just-added { animation: myteam-add-success 0.5s cubic-bezier(0.34,1.56,0.64,1), myteam-add-ripple 0.6s ease-out; }
    /* ── Strong-match invitation ───────────────────────────────────────────
       When the visitor has set their Alignment Signature and the politician in
       front of them is a strong personal match, the "Add to My Team" button
       gently breathes a green halo — turning a quiet decision point into an
       obvious, inviting next step ("they fit you — add them"). Resting state
       only; the glow never fights the hover/added states above. */
    @keyframes myteam-match-pulse {
      0%, 100% { box-shadow: 0 4px 16px rgba(74,222,128,0.20), 0 0 0 0 rgba(74,222,128,0.0), inset 0 1px 0 rgba(255,255,255,0.08); }
      50%      { box-shadow: 0 6px 22px rgba(74,222,128,0.30), 0 0 18px 2px rgba(74,222,128,0.22), inset 0 1px 0 rgba(255,255,255,0.10); }
    }
    .myteam-add-btn.match-strong:not(.on-team):not(:hover) {
      background: linear-gradient(135deg, rgba(74,222,128,0.30) 0%, rgba(245,158,11,0.16) 100%);
      border-color: rgba(74,222,128,0.7);
      color: #86efac;
      animation: myteam-match-pulse 2.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .myteam-add-btn.match-strong:not(.on-team):not(:hover) { animation: none; }
    }
    /* ── Persistent "Your Team" progress bar at the top of Relevant to Me ──────
       A live, location-aware read on how the team is coming along, pinned right
       where the voter is doing their research. It mirrors the My Voting Team
       count, names the next open seat, and offers a one-tap jump UP to the
       builder — so researching here always feels like it's feeding the one
       team above, and progress is visible without scrolling back up. Populated
       by window._relSyncTeamProgress() on every team change. */
    .rel-team-progress {
      display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
      margin: 0 0 0.95rem; padding: 0.7rem 0.9rem; border-radius: 1rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.14) 0%, rgba(245,200,66,0.05) 55%, rgba(10,15,30,0.45) 100%);
      border: 1px solid rgba(245,158,11,0.4);
      box-shadow: 0 4px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .rel-team-progress__ring {
      flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 0.02em; color: #1a1206;
      background: conic-gradient(#f5c842 calc(var(--rel-pct, 0) * 1%), rgba(245,200,66,0.16) 0);
      position: relative;
    }
    .rel-team-progress__ring::after {
      content: ''; position: absolute; inset: 4px; border-radius: 50%;
      background: linear-gradient(135deg, rgba(26,18,6,0.92), rgba(13,21,38,0.95));
    }
    .rel-team-progress__ring span { position: relative; z-index: 1; color: #ffe486; font-weight: 700; }
    .rel-team-progress__body { flex: 1 1 13rem; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
    .rel-team-progress__title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.62rem;
      letter-spacing: 0.16em; text-transform: uppercase; color: #fcd34d; line-height: 1;
    }
    .rel-team-progress__next {
      font-family: 'Barlow', sans-serif; font-size: 0.84rem; line-height: 1.35; color: #e7d3a8;
    }
    .rel-team-progress__next strong { color: #fff; font-weight: 700; }
    .rel-team-progress__btn {
      flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.74rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #1a1206;
      background: linear-gradient(135deg, #ffe486, #e0a82e); border: none;
      border-radius: 0.75rem; padding: 0.55rem 1rem; min-height: 42px;
      box-shadow: 0 5px 18px rgba(245,200,66,0.32);
      transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .rel-team-progress__btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 9px 26px rgba(245,200,66,0.5); }
    .rel-team-progress__btn:active { transform: scale(0.99); }
    .rel-team-progress.is-complete { border-color: rgba(74,222,128,0.5); background: linear-gradient(135deg, rgba(74,222,128,0.16) 0%, rgba(34,197,94,0.05) 55%, rgba(10,15,30,0.45) 100%); }
    .rel-team-progress.is-complete .rel-team-progress__ring { background: conic-gradient(#4ade80 100%, #4ade80 0); }
    .rel-team-progress.is-complete .rel-team-progress__ring span { color: #bbf7d0; }
    .rel-team-progress.is-complete .rel-team-progress__title { color: #86efac; }
    @media (max-width: 560px) {
      .rel-team-progress__btn { width: 100%; justify-content: center; }
    }
    /* When a pick is added from Relevant to Me, the My Voting Team panel is
       usually scrolled off-screen above — so this persistent bar briefly bumps
       and glows to confirm, right where the voter is acting, that the pick just
       landed in the team up top. Re-triggered by _relSyncTeamProgress() only on a
       brand-new add (guarded so it never fires on unrelated repaints). */
    @keyframes rel-team-progress-bump {
      0%   { transform: scale(1); box-shadow: 0 4px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04); }
      28%  { transform: scale(1.015); box-shadow: 0 0 0 2px rgba(245,200,66,0.85), 0 0 28px 4px rgba(245,200,66,0.55), inset 0 1px 0 rgba(255,255,255,0.04); }
      100% { transform: scale(1); box-shadow: 0 4px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04); }
    }
    @keyframes rel-team-progress-ring-pop {
      0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); }
    }
    .rel-team-progress.rel-team-progress--bump { animation: rel-team-progress-bump 1.5s ease-out 1; }
    .rel-team-progress.rel-team-progress--bump .rel-team-progress__ring { animation: rel-team-progress-ring-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) 1; }
    @media (prefers-reduced-motion: reduce) {
      .rel-team-progress.rel-team-progress--bump,
      .rel-team-progress.rel-team-progress--bump .rel-team-progress__ring { animation: none; }
    }
    /* ── Just-filled slot celebration ─────────────────────────────────────────
       When a voter adds a pick from Relevant to Me and jumps back up, the slot
       they just filled briefly pulses an amber halo so the hand-off lands on a
       visible, satisfying result instead of a silently-changed grid. The class
       is set by _renderSlotCard for window._pdxJustFilledPid and cleared shortly
       after the animation. */
    @keyframes myteam-slot-just-filled {
      0%   { box-shadow: 0 0 0 0 rgba(245,200,66,0.0), 0 10px 34px rgba(0,0,0,0.42); }
      18%  { box-shadow: 0 0 0 3px rgba(245,200,66,0.85), 0 0 34px 4px rgba(245,200,66,0.55), 0 10px 34px rgba(0,0,0,0.42); }
      100% { box-shadow: 0 0 0 0 rgba(245,200,66,0.0), 0 10px 34px rgba(0,0,0,0.42); }
    }
    .myteam-slot.myteam-slot--just-filled {
      animation: myteam-card-in 0.45s ease both, myteam-slot-just-filled 1.9s ease-out 0.1s 1;
      border-color: color-mix(in srgb, var(--slot-color) 75%, #fff 8%);
    }
    @media (prefers-reduced-motion: reduce) {
      .myteam-slot.myteam-slot--just-filled { animation: myteam-card-in 0.45s ease both; }
    }
    /* Each filled slot is tinted with its own office color (--slot-color), so the
       six ballot positions read as visually distinct at a glance. Falls back to
       amber for any card that doesn't set the variable. */
    .myteam-slot {
      --slot-color: #f59e0b;
      background:
        linear-gradient(160deg, color-mix(in srgb, var(--slot-color) 11%, transparent) 0%, rgba(10,15,30,0.97) 46%, rgba(13,21,38,0.97) 100%);
      border: 1.5px solid color-mix(in srgb, var(--slot-color) 40%, transparent);
      border-radius: 1.25rem;
      padding: 1.35rem 1rem 1.15rem;
      text-align: center;
      transition: transform 0.35s cubic-bezier(0.34,1.4,0.64,1), border-color 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
      animation: myteam-card-in 0.45s ease both;
      box-shadow: 0 10px 34px rgba(0,0,0,0.42), 0 0 22px color-mix(in srgb, var(--slot-color) 12%, transparent), inset 0 1px 0 rgba(255,255,255,0.05);
      cursor: pointer;
    }
    .myteam-slot::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, transparent 20%, color-mix(in srgb, var(--slot-color) 14%, transparent) 50%, transparent 80%);
      background-size: 200% 200%;
      opacity: 0; transition: opacity 0.35s; pointer-events: none;
    }
    .myteam-slot::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, transparent, var(--slot-color), transparent);
      opacity: 0.75;
    }
    .myteam-slot:hover {
      border-color: color-mix(in srgb, var(--slot-color) 66%, transparent);
      box-shadow: 0 18px 52px rgba(0,0,0,0.55), 0 0 42px color-mix(in srgb, var(--slot-color) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.07);
      transform: translateY(-5px) scale(1.015);
    }
    .myteam-slot:hover::before { opacity: 1; animation: shimmer 2s linear infinite; }
    .myteam-slot-empty {
      --slot-color: #f59e0b;
      background: linear-gradient(160deg, color-mix(in srgb, var(--slot-color) 5%, transparent) 0%, rgba(10,15,30,0.55) 100%);
      border: 2px dashed color-mix(in srgb, var(--slot-color) 28%, rgba(255,255,255,0.08));
      border-radius: 1.25rem;
      padding: 1.35rem 1rem;
      text-align: center;
      cursor: pointer;
      transition: transform 0.35s cubic-bezier(0.34,1.4,0.64,1), border-color 0.3s, background 0.3s, box-shadow 0.3s;
      min-height: 220px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative;
      gap: 0.2rem;
    }
    .myteam-slot-empty::after {
      content: '';
      position: absolute;
      inset: 6px;
      border: 1px dashed color-mix(in srgb, var(--slot-color) 10%, transparent);
      border-radius: 1rem;
      pointer-events: none;
      transition: border-color 0.3s;
    }
    .myteam-slot-empty:hover {
      border-color: color-mix(in srgb, var(--slot-color) 60%, transparent);
      background: linear-gradient(160deg, color-mix(in srgb, var(--slot-color) 9%, transparent) 0%, rgba(10,15,30,0.72) 100%);
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 0 28px color-mix(in srgb, var(--slot-color) 12%, transparent);
    }
    .myteam-slot-empty:hover::after {
      border-color: color-mix(in srgb, var(--slot-color) 22%, transparent);
    }
    .myteam-slot-empty:hover .myteam-empty-ring {
      transform: scale(1.06);
      border-color: color-mix(in srgb, var(--slot-color) 60%, transparent);
      box-shadow: 0 0 22px color-mix(in srgb, var(--slot-color) 18%, transparent);
    }
    .myteam-slot-empty:hover .myteam-empty-cta {
      background: linear-gradient(135deg, color-mix(in srgb, var(--slot-color) 34%, transparent), color-mix(in srgb, var(--slot-color) 14%, transparent)) !important;
      box-shadow: 0 6px 20px color-mix(in srgb, var(--slot-color) 22%, transparent) !important;
      transform: translateY(-1px);
    }
    .myteam-empty-tag {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.94rem; font-weight: 800;
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 0.25rem;
    }
    /* One-line "what this office does" descriptor on empty slots — turns a bare
       label into something a first-time visitor can actually understand. */
    .myteam-empty-desc {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.74rem; line-height: 1.4;
      color: #93a9cb; letter-spacing: 0.015em;
      max-width: 14rem; margin: 0 auto 0.95rem;
    }
    /* Connection line that names the section a voter fills this seat from, so an
       empty slot in the primary builder visibly points down to the research list
       (Relevant to Me) instead of leaving them to find it. */
    .myteam-empty-find {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.68rem; line-height: 1.3; letter-spacing: 0.04em;
      color: #cbb574; margin: -0.55rem auto 0.7rem;
    }
    .myteam-empty-find strong { color: #fde68a; font-weight: 800; }
    .myteam-empty-cta {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: linear-gradient(135deg, color-mix(in srgb, var(--slot-color) 22%, transparent), color-mix(in srgb, var(--slot-color) 8%, transparent));
      border: 1.5px solid color-mix(in srgb, var(--slot-color) 50%, transparent);
      color: var(--slot-color);
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.45rem 1.05rem; border-radius: 999px; cursor: pointer;
      transition: all 0.25s; box-shadow: 0 3px 12px color-mix(in srgb, var(--slot-color) 12%, transparent);
    }

    /* Empty-seat "who holds it now" preview — turns a blank Open Seat into a
       real, actionable card showing the current officeholder (with canonical
       status badge) and a one-tap starter action. */
    .myteam-slot-empty.has-holder { justify-content: flex-start; }
    .myteam-holder-tag {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
      margin: 0.55rem 0 0.35rem;
    }
    .myteam-holder {
      display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
      width: 100%; max-width: 230px; margin: 0 auto 0.5rem; text-align: left;
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 0.7rem; padding: 0.45rem 0.55rem; transition: border-color 0.15s ease, background 0.15s ease;
    }
    .myteam-holder:hover { border-color: color-mix(in srgb, var(--slot-color) 55%, transparent); background: rgba(255,255,255,0.06); }
    .myteam-holder-photo {
      width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid color-mix(in srgb, var(--slot-color) 50%, transparent); background: rgba(30,53,96,0.5);
    }
    .myteam-holder-photo img { width: 100%; height: 100%; object-fit: cover; }
    .myteam-holder-ico { font-size: 1.3rem; }
    .myteam-holder-info { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
    .myteam-holder-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.02rem; letter-spacing: 0.02em; color: #fff; line-height: 1.04; }
    .myteam-holder-run {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.03em;
      color: #9fb4d4; margin: -0.15rem auto 0.55rem;
    }
    .myteam-holder-start { margin: 0 auto 0.5rem; }
    .myteam-slot-empty.has-holder .myteam-empty-find {
      margin: 0 auto; color: #93c5fd; cursor: pointer;
    }
    .myteam-slot-empty.has-holder .myteam-empty-find:hover { color: #dbeafe; }

    .myteam-slot-photo {
      width: 76px; height: 76px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 0.5rem;
      border: 3px solid rgba(74,222,128,0.4);
      background: rgba(30,53,96,0.5);
      box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 16px rgba(74,222,128,0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .myteam-slot:hover .myteam-slot-photo {
      transform: scale(1.05);
      box-shadow: 0 10px 36px rgba(0,0,0,0.5), 0 0 32px rgba(74,222,128,0.18);
    }
    .myteam-slot-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
    }
    .myteam-slot-position {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.09em; text-transform: uppercase;
      padding: 0.25rem 0.75rem; border-radius: 999px;
      display: inline-block; margin-bottom: 0.6rem;
    }
    /* Government-tier eyebrow (Federal / State / Local) — gives the six slots a
       clear at-a-glance grouping above the specific office pill, since several
       offices otherwise share the same icon. Tinted with the slot's own color. */
    .myteam-slot-tier {
      display: inline-flex; align-items: center; gap: 0.32rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.5rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      opacity: 0.92; margin-bottom: 0.4rem;
    }
    .myteam-slot-tier::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0;
    }
    @media (max-width: 639px) {
      .myteam-slot-tier { font-size: 0.48rem; letter-spacing: 0.16em; margin-bottom: 0.3rem; }
    }
    .myteam-slot .chub-score {
      font-size: 2rem !important;
      text-shadow: 0 0 18px currentColor;
      font-weight: 700;
    }
    .myteam-slot-info-row {
      display: flex; align-items: center; justify-content: center;
      gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap;
    }
    .myteam-slot-score-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.54rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-top: 0.15rem; opacity: 0.9;
    }
    .myteam-slot-kept-broken {
      display: flex; gap: 0.45rem; align-items: center; justify-content: center;
    }
    .myteam-slot-kept-broken span {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.15rem 0.45rem; border-radius: 999px;
    }
    .myteam-slot-actions {
      display: flex; gap: 0.5rem; justify-content: center;
      margin-top: 0.75rem; flex-wrap: wrap;
    }
    .myteam-slot-actions button {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.65rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.45rem 0.85rem; border-radius: 0.6rem;
      cursor: pointer; transition: all 0.22s; border: 1px solid transparent;
      background: none;
    }
    .myteam-slot-compare-btn { color: #93c5fd; border-color: rgba(59,130,246,0.35); background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08)); box-shadow: 0 1px 6px rgba(59,130,246,0.1); }
    .myteam-slot-compare-btn:hover { background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(59,130,246,0.18)); border-color: rgba(59,130,246,0.6); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(59,130,246,0.2); }
    .myteam-slot-compare-btn.chub-added { background: rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.55); color: #bfdbfe; }
    .myteam-slot-jump-btn { color: #fad96a; border-color: rgba(245, 200, 66, 0.35); background: linear-gradient(135deg, rgba(245, 200, 66, 0.15), rgba(245, 200, 66, 0.08)); box-shadow: 0 1px 6px rgba(245, 200, 66, 0.1); }
    .myteam-slot-jump-btn:hover { background: linear-gradient(135deg, rgba(245, 200, 66, 0.3), rgba(245, 200, 66, 0.18)); border-color: rgba(245, 200, 66, 0.6); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(245, 200, 66, 0.2); }
    .myteam-slot-profile-btn { color: #e2e8f0; border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); }
    .myteam-slot-profile-btn:hover { color: #fff; border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); transform: translateY(-2px); box-shadow: 0 3px 12px rgba(255,255,255,0.05); }
    .myteam-slot-clear-btn { color: #f87171; opacity: 0.5; font-size: 0.95rem; line-height: 1; padding: 0; position: absolute; top: 0.6rem; right: 0.6rem; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(248,113,113,0.35); z-index: 3; transition: all 0.2s; cursor: pointer; }
    .myteam-slot:hover .myteam-slot-clear-btn { opacity: 0.85; }
    .myteam-slot .myteam-slot-clear-btn:hover { opacity: 1; background: rgba(239,68,68,0.4); border-color: rgba(248,113,113,0.7); transform: scale(1.12); box-shadow: 0 0 14px rgba(239,68,68,0.4); }
    /* On touch devices there is no hover, so keep the remove control clearly visible. */
    @media (hover: none) { .myteam-slot-clear-btn { opacity: 0.8; } }
    /* Smooth, satisfying card-removal animation — the slot collapses and fades
       before the grid re-renders with the slot freed up. */
    @keyframes myteam-slot-out { 0% { opacity: 1; transform: none; } 55% { opacity: 0.15; transform: translateY(-6px) scale(0.85); } 100% { opacity: 0; transform: scale(0.6); } }
    .myteam-slot.myteam-slot-removing { animation: myteam-slot-out 0.32s cubic-bezier(0.4,0,0.2,1) forwards; pointer-events: none; }
    /* Live team summary / empty-state line above the slot grid. */
    .myteam-summary-line { display: flex; align-items: center; gap: 0.55rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.94rem; letter-spacing: 0.015em; color: rgba(251,191,36,0.85); margin-bottom: 1.1rem; padding: 0.65rem 1rem; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.18); border-left: 3px solid rgba(245,158,11,0.6); border-radius: 0.7rem; transition: color 0.3s, background 0.3s, border-color 0.3s; }
    .myteam-summary-line .myteam-summary-strong { color: #fde68a; font-weight: 700; }
    .myteam-summary-line.is-empty { color: #9fb4d4; border-left-color: rgba(159,180,212,0.55); background: rgba(159,180,212,0.05); border-color: rgba(159,180,212,0.15); }
    .myteam-summary-line.is-empty .myteam-summary-strong { color: #cbd5e1; }
    .myteam-summary-line.is-complete { color: #4ade80; border-left-color: rgba(74,222,128,0.7); background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.22); }
    .myteam-summary-line.is-complete .myteam-summary-strong { color: #86efac; }

    /* ── "Saved on this device" persistence reassurance ──────────────── */
    .myteam-save-status { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 999px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25); color: #86efac; }
    .myteam-save-status .mss-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.8); flex-shrink: 0; }
    .myteam-save-status .mss-sub { color: #7f93b3; font-weight: 400; }
    .myteam-save-status.is-synced { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.28); color: #bfdbfe; }
    .myteam-save-status.is-synced .mss-dot { background: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,0.8); }

    /* ── "What to do next" guided checklist ──────────────────────────── */
    .myteam-guide { margin: 0 0 1.25rem; padding: 1rem 1.1rem 1.05rem; border-radius: 0.95rem; background: linear-gradient(135deg, rgba(245,158,11,0.07) 0%, rgba(10,15,30,0.45) 55%, rgba(26,58,107,0.12) 100%); border: 1px solid rgba(245,158,11,0.22); border-left: 3px solid rgba(245,158,11,0.65); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .myteam-guide.is-complete { background: linear-gradient(135deg, rgba(74,222,128,0.08) 0%, rgba(10,15,30,0.4) 60%, rgba(26,58,107,0.1) 100%); border-color: rgba(74,222,128,0.28); border-left-color: rgba(74,222,128,0.7); }
    .myteam-guide-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
    .myteam-guide-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fbbf24; display: inline-flex; align-items: center; gap: 0.4rem; }
    .myteam-guide.is-complete .myteam-guide-title { color: #86efac; }
    .myteam-guide-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; color: #9fb4d4; }
    .myteam-guide-sub { font-family: 'Barlow', sans-serif; font-size: 0.8rem; line-height: 1.45; color: #cbd5e1; margin: 0.15rem 0 0.85rem; }
    .myteam-guide-sub strong { color: #fff; font-weight: 700; }
    .myteam-guide-steps { display: flex; flex-direction: column; gap: 0.4rem; }
    .myteam-guide-step { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 0.65rem; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); transition: background 0.2s, border-color 0.2s; }
    .myteam-guide-step.is-active { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.4); box-shadow: 0 0 18px rgba(245,158,11,0.08); }
    .myteam-guide-step.is-done { opacity: 0.72; }
    .myteam-guide-step.is-todo { opacity: 0.55; }
    .myteam-guide-marker { flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; border: 1.5px solid rgba(255,255,255,0.18); color: #9fb4d4; background: rgba(255,255,255,0.03); }
    .myteam-guide-step.is-done .myteam-guide-marker { background: rgba(74,222,128,0.16); border-color: rgba(74,222,128,0.5); color: #4ade80; }
    .myteam-guide-step.is-active .myteam-guide-marker { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.65); color: #fbbf24; box-shadow: 0 0 10px rgba(245,158,11,0.35); }
    .myteam-guide-txt { min-width: 0; flex: 1; }
    .myteam-guide-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; color: #e6eefb; line-height: 1.15; }
    .myteam-guide-step.is-done .myteam-guide-label { color: #a7d8b6; text-decoration: line-through; text-decoration-color: rgba(74,222,128,0.4); }
    .myteam-guide-desc { font-family: 'Barlow', sans-serif; font-size: 0.74rem; line-height: 1.35; color: #8aa0c2; margin-top: 0.08rem; }
    .myteam-guide-go { flex: none; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #0a0f1e; background: linear-gradient(135deg, #fad96a, #e6b800); border: none; border-radius: 0.55rem; padding: 0.5rem 0.85rem; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 3px 12px rgba(245,200,66,0.25); }
    .myteam-guide-go:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(245,200,66,0.4); }
    .myteam-guide.is-complete .myteam-guide-go { background: linear-gradient(135deg, #6ee7a8, #34d399); box-shadow: 0 3px 12px rgba(52,211,153,0.25); }
    .myteam-guide.is-complete .myteam-guide-go:hover { box-shadow: 0 6px 16px rgba(52,211,153,0.4); }
    /* Collapsible "While building your team" checklist — quiet by default so it no
       longer reads as a heavy onboarding block. The head doubles as the toggle. */
    .myteam-guide-collapsible { padding-top: 0; padding-bottom: 0; }
    .myteam-guide-collapsible[open] { padding-bottom: 1.05rem; }
    .myteam-guide-summary { list-style: none; cursor: pointer; user-select: none; padding: 0.85rem 0 0.2rem; margin-bottom: 0; }
    .myteam-guide-collapsible:not([open]) .myteam-guide-summary { padding-bottom: 0.85rem; }
    .myteam-guide-summary::-webkit-details-marker { display: none; }
    .myteam-guide-summary .myteam-guide-title { flex: 1; min-width: 0; }
    .myteam-guide-chev { font-family: 'Barlow Condensed', sans-serif; font-size: 0.85rem; color: #9fb4d4; transition: transform 0.2s ease; margin-left: 0.1rem; }
    .myteam-guide-collapsible[open] .myteam-guide-chev { transform: rotate(180deg); }
    @media (max-width: 560px) {
      .myteam-guide-step { flex-wrap: wrap; }
      .myteam-guide-go { width: 100%; margin-top: 0.4rem; margin-left: 2.25rem; }
    }
    /* ── De-emphasized guidance + values-matching aside ──────────────────
       A compact, collapsible container that holds the lightbulb how-to and the
       Personalized Alignment (values matching) tool below the hero grid, so they
       stop competing with the actual ballot slots for vertical space. Reads as a
       single quiet "tips" row until tapped open. */
    .myteam-aside { margin: 0.6rem 0 1rem; border: 1px solid rgba(139,92,246,0.22); border-radius: 0.8rem; background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(10,15,30,0.4)); overflow: hidden; }
    .myteam-aside-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; color: #cbbdf0; user-select: none; }
    .myteam-aside-summary::-webkit-details-marker { display: none; }
    .myteam-aside-summary:hover { color: #e9d5ff; }
    .myteam-aside-ico { font-size: 1rem; line-height: 1; flex: none; }
    .myteam-aside-label { flex: 1; min-width: 0; }
    .myteam-aside-chev { flex: none; font-size: 0.85rem; color: #9fb4d4; transition: transform 0.2s ease; }
    .myteam-aside[open] .myteam-aside-chev { transform: rotate(180deg); }
    .myteam-aside-body { padding: 0.2rem 0.85rem 0.85rem; }
    .myteam-aside-body > * { margin-bottom: 0 !important; }
    .myteam-aside-body > * + * { margin-top: 0.7rem; }

    /* ── Per-office picks summary — compact scannable roster ─────────── */
    .myteam-office-summary { margin-bottom: 1.25rem; padding: 1rem 1.1rem; background: linear-gradient(135deg, rgba(245,158,11,0.05), rgba(10,15,30,0.4)); border: 1px solid rgba(245,158,11,0.18); border-radius: 0.9rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
    .myteam-office-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
    .myteam-office-summary-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fbbf24; }
    .myteam-office-summary-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; color: #9fb4d4; }
    .myteam-office-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .myteam-office-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.6rem 0.4rem 0.7rem; border-radius: 0.6rem; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); font-family: 'Barlow Condensed', sans-serif; max-width: 100%; }
    .myteam-office-chip .moc-ico { font-size: 0.95rem; line-height: 1; flex-shrink: 0; }
    .myteam-office-chip .moc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
    .myteam-office-chip .moc-office { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7f93b3; }
    .myteam-office-chip .moc-name { font-size: 0.86rem; font-weight: 600; color: #e7eefb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
    .myteam-office-chip.is-filled { border-color: rgba(74,222,128,0.35); background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(74,222,128,0.04)); }
    .myteam-office-chip.is-filled .moc-name { color: #d6f5e1; }
    .myteam-office-chip.is-open { cursor: pointer; border-style: dashed; border-color: rgba(245,158,11,0.3); transition: border-color 0.2s, background 0.2s, transform 0.15s; }
    .myteam-office-chip.is-open:hover { border-color: rgba(245,158,11,0.6); background: rgba(245,158,11,0.08); transform: translateY(-1px); }
    .myteam-office-chip.is-open .moc-name { color: #f0b860; font-weight: 700; font-size: 0.78rem; }
    .myteam-office-chip .moc-remove { flex-shrink: 0; margin-left: 0.15rem; width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.4rem; border: none; background: rgba(239,68,68,0.12); color: #f87171; font-size: 0.8rem; line-height: 1; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s; }
    .myteam-office-chip .moc-remove:hover { background: rgba(239,68,68,0.28); color: #fff; transform: scale(1.1); }
    @media (max-width: 640px) {
      .myteam-office-chips { gap: 0.4rem; }
      .myteam-office-chip { padding: 0.35rem 0.5rem; }
      .myteam-office-chip .moc-name { max-width: 8rem; }
    }
    /* Ballot completion progress — header bar + per-slot pips. */
    .myteam-progress { margin: 0 0 1.5rem; }
    .myteam-progress-track {
      height: 9px; border-radius: 999px; overflow: hidden;
      background: rgba(255,255,255,0.05);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.03);
    }
    .myteam-progress-fill {
      height: 100%; width: 0%; border-radius: 999px;
      background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 55%, #4ade80 100%);
      background-size: 200% 100%;
      box-shadow: 0 0 16px rgba(245,158,11,0.45);
      transition: width 0.7s cubic-bezier(0.34,1.25,0.64,1);
    }
    .myteam-progress-meta {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.75rem 1rem; margin-top: 0.75rem; flex-wrap: wrap;
    }
    .myteam-progress-pips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
    .myteam-progress-pip {
      display: inline-flex; align-items: center; gap: 0.32rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      padding: 0.24rem 0.6rem; border-radius: 999px; border: 1px solid transparent;
      white-space: nowrap; transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.25s;
    }
    .myteam-progress-pip:hover { transform: translateY(-1px); }
    .myteam-progress-pip .pip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .myteam-progress-label {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase; color: rgba(251,191,36,0.92);
      white-space: nowrap;
    }
    @media (max-width: 639px) {
      .myteam-progress-pip { font-size: 0.56rem; padding: 0.2rem 0.5rem; }
      .myteam-progress-meta { gap: 0.6rem; }
    }
    /* ── Compact "picks set" meter pill ──────────────────────────────────────
       A glanceable status chip that sits right under the section title: a row of
       dots (one per ballot seat, filled as picks are set) plus a "X of N picks
       set" readout. Reuses the same live pick count as the bar above, giving the
       voter a clear, at-a-glance goal without adding a heavy new block. */
    .myteam-picks-meter {
      display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
      margin-top: 0.85rem; padding: 0.4rem 0.85rem;
      background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.28);
      border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
      transition: background 0.3s, border-color 0.3s;
    }
    .myteam-picks-meter.is-complete {
      background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.4);
    }
    .myteam-picks-dots { display: inline-flex; align-items: center; gap: 0.3rem; }
    .myteam-picks-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.12);
      transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
    }
    .myteam-picks-dot.is-on {
      background: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 7px rgba(245,158,11,0.7);
    }
    .myteam-picks-meter.is-complete .myteam-picks-dot.is-on {
      background: #4ade80; border-color: #4ade80; box-shadow: 0 0 7px rgba(74,222,128,0.7);
    }
    .myteam-picks-text {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase; color: rgba(251,191,36,0.95);
      white-space: nowrap;
    }
    .myteam-picks-meter.is-complete .myteam-picks-text { color: #86efac; }
    /* ── "Your Districts" coverage map ───────────────────────────────────────
       A location-aware panel in the My Team builder that shows how much of the
       voter's own ballot their team covers. Blue/navy ballot theme (distinct
       from the amber team chrome around it); green = a seat that's covered,
       amber = a seat still open — the same coverage language used elsewhere in
       the app. Rendered by _renderTeamDistrictCoverage(). */
    .myteam-dcov {
      margin: 0 0 1.5rem; padding: 1.1rem 1.15rem 1.15rem;
      border-radius: 1rem;
      background: linear-gradient(135deg, rgba(30,58,138,0.22) 0%, rgba(10,15,30,0.5) 60%, rgba(30,41,59,0.4) 100%);
      border: 1px solid rgba(96,165,250,0.32);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .myteam-dcov.is-complete {
      border-color: rgba(74,222,128,0.5);
      background: linear-gradient(135deg, rgba(22,101,52,0.28) 0%, rgba(10,15,30,0.45) 60%, rgba(30,41,59,0.4) 100%);
    }
    .myteam-dcov-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
    .myteam-dcov-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; font-size: 1.18rem; color: #fff; line-height: 1; }
    .myteam-dcov-frac {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #93c5fd;
    }
    .myteam-dcov.is-complete .myteam-dcov-frac { color: #86efac; }
    /* District-focused sub-stat ("X of 3 voting districts") — amber while a
       district is still open, green once all the voter's districts are filled. */
    .myteam-dcov-distfrac { color: #fcd9a0; }
    .myteam-dcov-distfrac.is-done { color: #86efac; }
    .myteam-dcov-bar { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.07); margin-bottom: 0.85rem; }
    .myteam-dcov-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, #2563eb, #4ade80);
      box-shadow: 0 0 14px rgba(74,222,128,0.35);
      transition: width 0.7s cubic-bezier(0.34,1.25,0.64,1);
    }
    .myteam-dcov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
    /* Grouped coverage: "Your voting districts" vs "Statewide & local". */
    .myteam-dcov-group { margin-bottom: 0.85rem; }
    .myteam-dcov-group:last-of-type { margin-bottom: 0.5rem; }
    .myteam-dcov-grouphead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
    .myteam-dcov-grouptitle {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: #dbe7fb; line-height: 1;
    }
    .myteam-dcov-groupfrac {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #fcd9a0; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3);
      border-radius: 999px; padding: 0.1rem 0.55rem; line-height: 1.25;
    }
    .myteam-dcov-groupfrac.is-done { color: #86efac; background: rgba(34,197,94,0.13); border-color: rgba(34,197,94,0.4); }
    .myteam-dcov-msg-more { color: #9fb4d4; }
    .myteam-dcov-seat {
      display: flex; align-items: center; gap: 0.6rem; text-align: left; width: 100%;
      padding: 0.6rem 0.7rem; min-height: 56px; border-radius: 0.7rem; cursor: pointer;
      background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.09);
      transition: transform 0.15s, border-color 0.15s, background 0.15s;
    }
    .myteam-dcov-seat:hover { transform: translateY(-2px); }
    .myteam-dcov-seat.is-covered { background: rgba(34,197,94,0.09); border-color: rgba(34,197,94,0.4); }
    .myteam-dcov-seat.is-covered:hover { border-color: rgba(34,197,94,0.7); }
    .myteam-dcov-seat.is-open { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.32); }
    .myteam-dcov-seat.is-open:hover { border-color: rgba(245,158,11,0.65); }
    .myteam-dcov-ico { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
    .myteam-dcov-seat-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.08rem; }
    .myteam-dcov-office { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.84rem; letter-spacing: 0.02em; color: #fff; line-height: 1.1; }
    .myteam-dcov-scope { font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: 0.04em; color: #9fb4d4; line-height: 1.15; }
    .myteam-dcov-status {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem;
      letter-spacing: 0.02em; line-height: 1.2; margin-top: 0.04rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }
    .myteam-dcov-seat.is-covered .myteam-dcov-status { color: #86efac; }
    .myteam-dcov-seat.is-open .myteam-dcov-status { color: #fcd9a0; }
    .myteam-dcov-msg { font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; letter-spacing: 0.01em; color: #cfe0f5; line-height: 1.45; margin: 0.25rem 0 0; }
    .myteam-dcov-msg strong { color: #fff; }
    .myteam-dcov-msg .dcov-open { color: #fcd9a0; font-weight: 700; }
    .myteam-dcov-cta {
      display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; min-height: 42px;
      padding: 0.5rem 1.05rem; border-radius: 0.7rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(245,158,11,0.15));
      border: 1px solid rgba(245,158,11,0.55); color: #ffe9c2; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.8rem;
      letter-spacing: 0.06em; text-transform: uppercase; transition: transform 0.12s, border-color 0.15s;
    }
    .myteam-dcov-cta:hover { transform: translateY(-1px); border-color: rgba(251,191,36,0.9); }
    /* Action row holding the primary "Add" CTA plus the optional "Compare the field
       first" button — the compare-before-you-commit path, styled blue to match the
       comparison tool and to read as the considered, secondary choice. */
    .myteam-dcov-cta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
    .myteam-dcov-cta-row .myteam-dcov-cta { margin-top: 0; }
    .myteam-dcov-cta.is-compare {
      background: linear-gradient(135deg, rgba(59,130,246,0.26), rgba(59,130,246,0.12));
      border-color: rgba(96,165,250,0.55); color: #d6e6ff;
    }
    .myteam-dcov-cta.is-compare:hover { border-color: rgba(147,197,253,0.9); }
    .myteam-dcov-locnudge {
      display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
      margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid rgba(96,165,250,0.18);
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; color: #9fb4d4;
    }
    .myteam-dcov-locnudge button {
      background: none; border: none; padding: 0; cursor: pointer; font: inherit;
      color: #93c5fd; text-decoration: underline; font-weight: 700;
    }
    /* Dashboard "cockpit" header — coverage ring beside the title + bar so the
       module reads as a workspace control panel, not another list. */
    .myteam-dcov-top { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 0.95rem; }
    .myteam-dcov-headtext { flex: 1; min-width: 0; }
    .myteam-dcov-headtext .myteam-dcov-head { margin-bottom: 0.6rem; }
    .myteam-dcov-headtext .myteam-dcov-bar { margin-bottom: 0; }
    .myteam-dcov-ring {
      --pct: 0; width: 66px; height: 66px; flex-shrink: 0; border-radius: 50%;
      background: conic-gradient(#4ade80 calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
      display: grid; place-items: center; position: relative;
      box-shadow: 0 0 18px rgba(74,222,128,0.18);
      transition: background 0.7s cubic-bezier(0.34,1.25,0.64,1);
    }
    .myteam-dcov-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #0b1322; }
    .myteam-dcov-ring.is-complete { box-shadow: 0 0 24px rgba(74,222,128,0.4); }
    .myteam-dcov-ring-num {
      position: relative; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em;
      font-size: 1.32rem; line-height: 1; color: #fff;
    }
    .myteam-dcov-ring-num small { font-size: 0.7rem; color: #9fb4d4; }
    .myteam-dcov.is-complete .myteam-dcov-ring-num { color: #bbf7d0; }
    /* Per-seat status badge — the at-a-glance "is this seat covered or missing"
       read. Covered = green, an open voting district = amber "Missing" (the gap
       that matters most), an open statewide/local seat = quiet "Open". */
    .myteam-dcov-badge {
      flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.56rem; letter-spacing: 0.07em; text-transform: uppercase;
      padding: 0.16rem 0.45rem; border-radius: 999px; line-height: 1.2; white-space: nowrap;
      border: 1px solid transparent;
    }
    .myteam-dcov-badge.is-covered { color: #86efac; background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.4); }
    .myteam-dcov-badge.is-missing { color: #fca5a5; background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4); }
    .myteam-dcov-badge.is-open { color: #fcd9a0; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.32); }
    /* An open seat that's one of the voter's OWN voting districts gets a touch more
       weight than a statewide gap — it's the thing this view is built to surface. */
    .myteam-dcov-seat.is-missing { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.3); border-style: dashed; }
    .myteam-dcov-seat.is-missing:hover { border-color: rgba(248,113,113,0.7); border-style: solid; }
    .myteam-dcov-seat.is-missing .myteam-dcov-status { color: #fca5a5; }
    .myteam-dcov-pick { font-weight: 700; color: #86efac; }
    .myteam-dcov-go { font-weight: 700; color: inherit; }
    /* A whole ballot tier covered — quiet green wash + a celebratory frac label. */
    .myteam-dcov-group.is-done .myteam-dcov-grouptitle { color: #bbf7d0; }
    /* Standout milestone banner: all of the voter's voting districts are filled. */
    .myteam-dcov-milestone {
      display: block;
      margin: 0 0 0.95rem; padding: 0.7rem 0.85rem; border-radius: 0.7rem;
      background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(34,197,94,0.05));
      border: 1px solid rgba(74,222,128,0.42);
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.86rem; line-height: 1.4; color: #d8f3df;
      box-shadow: 0 0 22px rgba(74,222,128,0.1);
    }
    .myteam-dcov-milestone strong { color: #fff; }
    /* ── "Your Voting Districts" spotlight band ────────────────────────────────
       The voter's own district seats (U.S. House, State Senate, State House) are
       the seats only their address elects — the motivating heart of this view. We
       pull them out of the abstract Federal/State/Local groups into a single,
       visually distinct band at the top so "which of MY districts have I covered"
       is the first thing the eye lands on. Amber+blue patriotic framing, flips
       green once every one of the voter's districts is filled. */
    .myteam-dcov-group.is-districts {
      padding: 0.75rem 0.8rem 0.85rem; border-radius: 0.85rem; margin-bottom: 1rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.11), rgba(96,165,250,0.06));
      border: 1px solid rgba(245,200,66,0.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .myteam-dcov-group.is-districts .myteam-dcov-grouptitle { color: #fde9b8; }
    .myteam-dcov-group.is-districts.is-done {
      border-color: rgba(74,222,128,0.45);
      background: linear-gradient(135deg, rgba(34,197,94,0.13), rgba(34,197,94,0.04));
    }
    .myteam-dcov-group.is-districts.is-done .myteam-dcov-grouptitle { color: #bbf7d0; }
    .myteam-dcov-districts-note {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.73rem; letter-spacing: 0.02em;
      color: #c9d7ec; line-height: 1.35; margin: -0.05rem 0 0.55rem;
    }
    .myteam-dcov-districts-note strong { color: #fde9b8; font-weight: 700; }
    /* ── "Finish your districts" focused action list ───────────────────────────
       Inside the spotlight band, each of the voter's own districts that's still
       missing a pick gets a row naming the seat, its real district number and how
       many candidates are running, plus two one-tap moves: ➕ Add (jump into that
       race) and ⚖️ Compare N (weigh the field first). Turns "you're missing a
       district" into a concrete, do-it-now checklist. */
    .myteam-dcov-moves {
      margin-top: 0.65rem; padding-top: 0.6rem;
      border-top: 1px dashed rgba(245,200,66,0.28);
      display: flex; flex-direction: column; gap: 0.4rem;
    }
    .myteam-dcov-moves-head {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #fde9b8; margin-bottom: 0.05rem;
    }
    .myteam-dcov-move {
      display: flex; align-items: center; gap: 0.55rem;
      padding: 0.42rem 0.55rem; border-radius: 0.65rem;
      background: rgba(10,15,30,0.4); border: 1px solid rgba(245,200,66,0.22);
    }
    .myteam-dcov-move .myteam-dcov-ico { font-size: 1.1rem; }
    .dcov-move-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
    .dcov-move-office { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.84rem; color: #fff; line-height: 1.1; }
    .dcov-move-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; letter-spacing: 0.02em; color: #c9d7ec; line-height: 1.2; }
    .dcov-move-actions { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
    .myteam-dcov-cta.dcov-move-btn { margin-top: 0; min-height: 34px; padding: 0.32rem 0.7rem; font-size: 0.68rem; }
    @media (max-width: 479px) {
      .myteam-dcov-move { flex-wrap: wrap; }
      .dcov-move-actions { width: 100%; justify-content: flex-start; margin-top: 0.2rem; }
    }
    @media (max-width: 639px) {
      .myteam-dcov-grid { grid-template-columns: 1fr 1fr; }
      .myteam-dcov-office { font-size: 0.78rem; }
      .myteam-dcov-ring { width: 56px; height: 56px; }
      .myteam-dcov-ring-num { font-size: 1.1rem; }
      .myteam-dcov-top { gap: 0.7rem; }
    }
    @media (max-width: 380px) {
      .myteam-dcov-grid { grid-template-columns: 1fr; }
    }
    .myteam-compare-all-bar {
      background: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, rgba(139,92,246,0.08) 100%);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: 0.85rem;
      padding: 0.85rem 1.25rem;
      display: flex; align-items: center; justify-content: center;
      gap: 0.85rem; flex-wrap: wrap; margin-top: 0.75rem;
    }
    .myteam-alignment-bar {
      background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(168,85,247,0.05) 100%);
      border: 1px solid rgba(139,92,246,0.3);
      border-radius: 1rem;
      padding: 1rem 1.15rem;
      margin-top: 0.75rem;
      display: flex; flex-direction: column; align-items: stretch; gap: 0.8rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 26px rgba(139,92,246,0.06);
    }
    /* ── Team Alignment Overview — the at-a-glance read on how aligned the whole
       6-person team is, plus the issues driving the match up or down. ── */
    .myteam-ao-top { display: flex; align-items: center; gap: 1rem; }
    .myteam-ao-score { font-family: 'Bebas Neue', sans-serif; font-weight: 900; font-size: 3.1rem; line-height: 0.85; flex-shrink: 0; }
    .myteam-ao-score span { font-size: 1.4rem; }
    .myteam-ao-head { flex: 1; min-width: 0; }
    .myteam-ao-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #c4b5fd; }
    .myteam-ao-sentence { font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; color: #e9d5ff; line-height: 1.3; margin-top: 0.1rem; }
    .myteam-ao-sub { color: #9fb4d4; font-size: 0.78rem; }
    .myteam-ao-track { height: 7px; border-radius: 999px; background: rgba(10,15,30,0.7); overflow: hidden; margin-top: 0.5rem; }
    .myteam-ao-track > span { display: block; height: 100%; border-radius: 999px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }
    .myteam-ao-members { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .myteam-ao-chip { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; background: rgba(10,15,30,0.55); border: 1px solid rgba(139,92,246,0.3); border-radius: 999px; padding: 0.25rem 0.6rem; transition: transform 0.12s ease, background 0.2s ease; }
    .myteam-ao-chip:hover { transform: translateY(-1px); background: rgba(139,92,246,0.12); }
    .myteam-ao-chip-name { font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; color: #cbd9ec; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .myteam-ao-chip-pct { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; line-height: 1; }
    .myteam-ao-issues { display: flex; flex-direction: column; gap: 0.45rem; border-top: 1px solid rgba(139,92,246,0.16); padding-top: 0.7rem; }
    .myteam-ao-drow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
    .myteam-ao-drow-lab { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; margin-right: 0.15rem; }
    .myteam-ao-issue { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(10,15,30,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.55rem; padding: 0.18rem 0.5rem; }
    .myteam-ao-issue-lab { font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; color: #d7e2f2; }
    .myteam-ao-issue-pct { font-family: 'Bebas Neue', sans-serif; font-size: 0.92rem; line-height: 1; }
    /* "See everyone's evidence ↗" jump baked into each Team Alignment issue chip —
       turns the static aggregate chip into a tap into the Evidence Locker
       (issue-filtered, saved team highlighted). Quiet by default so it never shouts
       over the score; warms to the shared gold evidence accent on hover/focus,
       matching the Compare "See everyone's evidence" cue. */
    button.myteam-ao-issue-ev { cursor: pointer; font: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; }
    .myteam-ao-issue-ev-cue { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.04em; color: #d8b75a; opacity: 0.85; white-space: nowrap; }
    @media (hover: hover) {
      button.myteam-ao-issue-ev:hover { background: rgba(245,200,66,0.12); border-color: rgba(245,200,66,0.6) !important; transform: translateY(-1px); }
      button.myteam-ao-issue-ev:hover .myteam-ao-issue-ev-cue { color: #f5c842; opacity: 1; }
    }
    button.myteam-ao-issue-ev:focus-visible { outline: 2px solid rgba(245,200,66,0.75); outline-offset: 2px; border-color: rgba(245,200,66,0.6) !important; }
    .myteam-ao-foot { font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; color: #8ea2c0; letter-spacing: 0.03em; }
    .myteam-ao-foot button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: #c4b5fd; text-decoration: underline; text-underline-offset: 2px; }
    .myteam-ao-foot button:hover { color: #e9d5ff; }
    @media (max-width: 480px) {
      .myteam-ao-score { font-size: 2.5rem; }
      .myteam-ao-sentence { font-size: 0.86rem; }
    }

    /* ── "My Team's Evidence" — a dashboard-level launch pad that takes a voter
       from "here's my team" straight to "here's what the record shows." Uses the
       shared Evidence-blue + gold Locker accents (not the purple alignment
       palette) so it reads unmistakably as the evidence surface. Both entry
       points — the team-wide Browse summary and the per-issue chips — are
       honesty-gated in JS and only painted when there is real evidence behind
       them, reusing the same deep-link + "📂 ↗" cue the rest of the site uses. ── */
    .myteam-evidence-bar {
      background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(245,200,66,0.05) 100%);
      border: 1px solid rgba(59,130,246,0.28);
      border-radius: 1rem;
      padding: 1rem 1.15rem;
      margin-top: 0.75rem;
      display: flex; flex-direction: column; gap: 0.8rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 26px rgba(59,130,246,0.06);
    }
    .myteam-ev-head { display: flex; align-items: flex-start; gap: 0.6rem; }
    .myteam-ev-ico { font-size: 1.4rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(245,200,66,0.35)); }
    .myteam-ev-head-tx { min-width: 0; }
    .myteam-ev-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #f5c842; }
    .myteam-ev-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; color: #bcd0ec; line-height: 1.3; margin-top: 0.1rem; }
    .myteam-ev-summary {
      display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; flex-wrap: wrap;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(59,130,246,0.22);
      border-radius: 0.7rem; padding: 0.6rem 0.85rem;
    }
    .myteam-ev-summary-tx { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
    .myteam-ev-summary-n { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; line-height: 0.9; color: #93c5fd; flex-shrink: 0; }
    .myteam-ev-summary-lab { font-family: 'Barlow Condensed', sans-serif; font-size: 0.86rem; color: #d7e2f2; line-height: 1.2; }
    .myteam-ev-browse {
      display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; cursor: pointer; font: inherit;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #0a0f1e; background: linear-gradient(135deg, #fad96a, #e6b800);
      border: 1px solid rgba(245,200,66,0.9); border-radius: 0.6rem; padding: 0.5rem 0.95rem;
      box-shadow: 0 4px 16px rgba(245,200,66,0.2); transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }
    @media (hover: hover) {
      .myteam-ev-browse:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 20px rgba(245,200,66,0.32); }
    }
    .myteam-ev-browse:focus-visible { outline: 2px solid rgba(245,200,66,0.8); outline-offset: 2px; }
    .myteam-ev-issues { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; border-top: 1px solid rgba(59,130,246,0.16); padding-top: 0.7rem; }
    .myteam-ev-issues-lab { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: #9fb4d4; margin-right: 0.15rem; }
    .myteam-ev-chip {
      display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font: inherit;
      background: rgba(10,15,30,0.5); border: 1px solid rgba(59,130,246,0.3); border-radius: 0.55rem; padding: 0.22rem 0.55rem;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    }
    .myteam-ev-chip-lab { font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; color: #d7e2f2; }
    .myteam-ev-chip-cue { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.04em; color: #d8b75a; opacity: 0.85; white-space: nowrap; }
    @media (hover: hover) {
      .myteam-ev-chip:hover { background: rgba(245,200,66,0.12); border-color: rgba(245,200,66,0.6); transform: translateY(-1px); }
      .myteam-ev-chip:hover .myteam-ev-chip-cue { color: #f5c842; opacity: 1; }
    }
    .myteam-ev-chip:focus-visible { outline: 2px solid rgba(245,200,66,0.75); outline-offset: 2px; border-color: rgba(245,200,66,0.6); }
    @media (max-width: 480px) {
      .myteam-ev-browse { width: 100%; justify-content: center; }
    }

    .myteam-overflow-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 0.75rem;
      margin-top: 0.85rem;
    }

    /* ── Build Your Team quick-action buttons ────────────── */
    .byt-quick-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.625rem 0.75rem;
      border-radius: 0.75rem;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      will-change: transform;
    }
    .byt-quick-btn .byt-quick-icon {
      font-size: 1.25rem;
      line-height: 1;
      margin-bottom: 0.25rem;
      transition: transform 0.18s ease;
    }
    .byt-quick-btn:hover { transform: translateY(-3px); }
    .byt-quick-btn:hover .byt-quick-icon { transform: scale(1.12); }
    .byt-quick-btn:active { transform: translateY(-1px) scale(0.98); }
    .byt-quick-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.55); outline-offset: 2px; }
    .byt-quick-btn--amber {
      background: rgba(245,158,11,0.06);
      border: 1px solid rgba(245,158,11,0.2);
    }
    .byt-quick-btn--amber:hover {
      background: rgba(245,158,11,0.16);
      border-color: rgba(245,158,11,0.5);
      box-shadow: 0 6px 20px rgba(245,158,11,0.18);
    }
    .byt-quick-btn--blue {
      background: rgba(59,130,246,0.06);
      border: 1px solid rgba(59,130,246,0.2);
    }
    .byt-quick-btn--blue:hover {
      background: rgba(59,130,246,0.16);
      border-color: rgba(59,130,246,0.5);
      box-shadow: 0 6px 20px rgba(59,130,246,0.18);
    }
    .byt-quick-btn--purple {
      background: rgba(139,92,246,0.06);
      border: 1px solid rgba(139,92,246,0.2);
    }
    .byt-quick-btn--purple:hover {
      background: rgba(139,92,246,0.16);
      border-color: rgba(139,92,246,0.5);
      box-shadow: 0 6px 20px rgba(139,92,246,0.18);
    }
    @media (prefers-reduced-motion: reduce) {
      .byt-quick-btn, .byt-quick-btn .byt-quick-icon { transition: none; }
      .byt-quick-btn:hover, .byt-quick-btn:active { transform: none; }
    }

    /* ── My Potential Politicians ────────────────────────── */
    .potential-header-glow {
      background: linear-gradient(135deg, rgba(251,146,60,0.18) 0%, rgba(245,158,11,0.08) 50%, rgba(234,88,12,0.12) 100%);
      border: 1px solid rgba(251,146,60,0.35);
      border-radius: 1rem;
      padding: 1.25rem 1.5rem;
      position: relative;
      overflow: hidden;
    }
    .potential-header-glow::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 1rem;
      padding: 1px;
      background: linear-gradient(135deg, rgba(251,146,60,0.5), rgba(245,158,11,0.2), rgba(234,88,12,0.4));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      animation: potentialGlow 4s ease-in-out infinite;
    }
    @keyframes potentialGlow {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    .potential-star-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      transition: transform 0.2s, filter 0.2s;
      padding: 0.15rem;
      filter: grayscale(1) opacity(0.35);
      color: #fb923c;
    }
    .potential-star-btn:hover { transform: scale(1.3); filter: grayscale(0) opacity(0.85); }
    .potential-star-btn.potential-saved { filter: grayscale(0) opacity(1); color: #fb923c; text-shadow: 0 0 8px rgba(251,146,60,0.5); }
    .potential-star-btn.potential-saved:hover { filter: grayscale(0) opacity(1); transform: scale(1.15); }
    .potential-card {
      border-color: rgba(251,146,60,0.3) !important;
      background: linear-gradient(135deg, rgba(251,146,60,0.05) 0%, rgba(15,23,42,0.95) 50%) !important;
    }
    .potential-card:hover {
      border-color: rgba(251,146,60,0.5) !important;
      box-shadow: 0 0 20px rgba(251,146,60,0.08);
    }
    .potential-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      background: rgba(251,146,60,0.14);
      border: 1px solid rgba(251,146,60,0.35);
      color: #fb923c;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.55rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.12rem 0.4rem;
      border-radius: 999px;
    }
    .mypol-primary-divider {
      border: none;
      border-top: 1px dashed rgba(255,255,255,0.08);
      margin: 0.75rem 0 0.5rem;
    }
    .mypol-section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 20%, rgba(100,160,255,0.15) 50%, rgba(255,255,255,0.1) 80%, transparent 100%);
      margin: 1.5rem 0 1rem;
    }
    .district-pill {
      background: rgba(30,53,96,0.5);
      border: 1px solid rgba(255,255,255,0.1);
      color: #9fb4d4;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      padding: 0.35rem 0.85rem;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.2s;
      text-transform: uppercase;
    }
    .district-pill:hover {
      border-color: rgba(245,158,11,0.4);
      color: #f5c842;
      background: rgba(245,158,11,0.08);
    }
    .district-pill.active {
      background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.08));
      border-color: rgba(245,158,11,0.5);
      color: #f5c842;
      box-shadow: 0 0 10px rgba(245,158,11,0.15);
    }

    /* ── 2026 Ballot Breakdown ─────────────────────────── */
    .ballot-section {
      background: linear-gradient(135deg, rgba(192,21,42,0.06) 0%, rgba(10,15,30,0.98) 40%, rgba(30,53,96,0.15) 100%);
      border: 1px solid rgba(192,21,42,0.25);
      border-radius: 1rem;
      padding: 1.25rem;
      margin-bottom: 1rem;
    }
    .ballot-race {
      background: rgba(10,15,30,0.6);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 0.75rem;
      padding: 0.85rem;
      transition: border-color 0.25s, box-shadow 0.25s;
    }
    .ballot-race:hover {
      border-color: rgba(192,21,42,0.3);
    }
    .ballot-race.ballot-filled {
      border-color: rgba(74,222,128,0.3);
      box-shadow: 0 0 12px rgba(74,222,128,0.06);
    }
    .ballot-select {
      width: 100%;
      background: rgba(30,53,96,0.5);
      border: 1px solid rgba(255,255,255,0.12);
      color: #e2e8f0;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 0.5rem 0.75rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: border-color 0.2s;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb4d4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.6rem center;
      padding-right: 2rem;
    }
    .ballot-select:focus {
      outline: none;
      border-color: rgba(192,21,42,0.5);
      box-shadow: 0 0 0 2px rgba(192,21,42,0.15);
    }
    .ballot-select option {
      background: #0d1526;
      color: #e2e8f0;
    }
    .myteam-card {
      background: linear-gradient(135deg, rgba(74,222,128,0.06) 0%, rgba(10,15,30,0.9) 100%);
      border: 1px solid rgba(74,222,128,0.2);
      border-radius: 0.75rem;
      padding: 0.6rem 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      transition: all 0.25s;
    }
    .myteam-card:hover {
      border-color: rgba(74,222,128,0.4);
      box-shadow: 0 0 16px rgba(74,222,128,0.08);
    }
    .myteam-empty {
      background: rgba(30,53,96,0.2);
      border: 1px dashed rgba(255,255,255,0.1);
      border-radius: 0.75rem;
      padding: 0.6rem 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      color: #4e72a0;
    }
    .myteam-photo {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid rgba(74,222,128,0.3);
      background: rgba(30,53,96,0.5);
    }
    .myteam-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }
    .ballot-clear-btn {
      background: none;
      border: none;
      color: #f87171;
      font-size: 0.85rem;
      cursor: pointer;
      padding: 0.2rem;
      line-height: 1;
      opacity: 0.6;
      transition: opacity 0.2s, transform 0.2s;
    }
    .ballot-clear-btn:hover {
      opacity: 1;
      transform: scale(1.15);
    }
    .ballot-progress-bar {
      height: 4px;
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      overflow: hidden;
    }
    .ballot-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #c0152a, #4ade80);
      border-radius: 999px;
      transition: width 0.4s ease;
    }

    /* ── 2026 Ballot Breakdown — Enhanced ──────────────── */
    .ballot-section-enhanced {
      background: linear-gradient(135deg, rgba(192,21,42,0.08) 0%, rgba(10,15,30,0.98) 35%, rgba(26,58,107,0.12) 100%);
      border: 2px solid rgba(192,21,42,0.3);
      border-radius: 1.25rem;
      padding: 1.75rem;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      position: relative;
      overflow: hidden;
    }
    .ballot-section-enhanced::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, #c0152a 0%, #ffffff 50%, #3b82f6 100%);
      opacity: 0.7;
    }
    .ballot-edu-text {
      font-family: 'Barlow', sans-serif;
      font-size: 0.85rem;
      color: #94a3b8;
      line-height: 1.6;
      margin-bottom: 0.75rem;
    }
    .myteam-prominent {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0.75rem;
      margin-bottom: 0.25rem;
    }
    @media (max-width: 1023px) {
      .myteam-prominent { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 639px) {
      .myteam-prominent { grid-template-columns: repeat(2, 1fr); }
    }
    .myteam-prom-card {
      background: linear-gradient(135deg, rgba(74,222,128,0.08) 0%, rgba(10,15,30,0.95) 100%);
      border: 1px solid rgba(74,222,128,0.25);
      border-radius: 1rem;
      padding: 0.85rem 0.6rem;
      text-align: center;
      transition: all 0.3s;
      animation: myteam-card-in 0.35s ease both;
    }
    @keyframes myteam-card-in {
      from { opacity: 0; transform: translateY(8px) scale(0.95); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .myteam-prom-card:hover {
      border-color: rgba(74,222,128,0.45);
      box-shadow: 0 0 20px rgba(74,222,128,0.1);
      transform: translateY(-2px);
    }
    .myteam-prom-photo {
      width: 52px; height: 52px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid rgba(74,222,128,0.4);
      margin: 0 auto 0.4rem;
      background: rgba(30,53,96,0.5);
    }
    .myteam-prom-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
    }
    .myteam-prom-empty {
      background: rgba(30,53,96,0.15);
      border: 2px dashed rgba(255,255,255,0.07);
      border-radius: 1rem;
      padding: 0.85rem 0.6rem;
      text-align: center;
      color: #4e72a0;
    }
    /* ── MY 2026 VOTING TEAM — Summary Box ───────────────── */
    .myteam-summary-box {
      background: linear-gradient(135deg, rgba(192,21,42,0.14) 0%, rgba(10,15,30,0.97) 35%, rgba(26,58,107,0.16) 100%);
      border: 2px solid rgba(192,21,42,0.4);
      border-radius: 1.25rem;
      padding: 1.5rem 1.5rem 1.25rem;
      margin-bottom: 1.25rem;
      position: relative;
      overflow: hidden;
      transition: border-color 0.4s, box-shadow 0.4s;
    }
    .myteam-summary-box.has-picks {
      border-color: rgba(74,222,128,0.35);
      box-shadow: 0 0 30px rgba(74,222,128,0.06), 0 8px 32px rgba(0,0,0,0.3);
    }
    .myteam-summary-box.team-complete {
      border-color: rgba(74,222,128,0.5);
      box-shadow: 0 0 40px rgba(74,222,128,0.12), 0 0 80px rgba(74,222,128,0.04), 0 8px 32px rgba(0,0,0,0.3);
    }
    .myteam-summary-box::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #c0152a 0%, #fbbf24 33%, #ffffff 50%, #4ade80 67%, #3b82f6 100%);
      opacity: 0.85;
    }
    .myteam-summary-box::after {
      content: '';
      position: absolute; top: 0; right: 0; width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(192,21,42,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    @keyframes myteam-pulse {
      0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.3); }
      70% { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
      100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
    }
    .myteam-summary-box.just-picked {
      animation: myteam-pulse 0.6s ease-out;
    }
    .myteam-saved-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #4ade80;
      background: rgba(74,222,128,0.08);
      border: 1px solid rgba(74,222,128,0.2);
      border-radius: 0.4rem;
      padding: 0.2rem 0.55rem;
      opacity: 0;
      transition: opacity 0.35s;
    }
    .myteam-saved-badge.visible { opacity: 1; }
    .myteam-summary-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .myteam-summary-title-group {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .myteam-summary-icon {
      width: 2.75rem; height: 2.75rem;
      border-radius: 0.75rem;
      background: linear-gradient(135deg, #c0152a, #1a3a6b);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      box-shadow: 0 0 18px rgba(192,21,42,0.35);
      border: 2px solid rgba(255,255,255,0.15);
      flex-shrink: 0;
    }
    .myteam-summary-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .myteam-share-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.08));
      border: 1px solid rgba(96,165,250,0.4);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.45rem 0.85rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.25s;
    }
    .myteam-share-btn:hover {
      background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(59,130,246,0.15));
      border-color: rgba(96,165,250,0.6);
      box-shadow: 0 0 16px rgba(59,130,246,0.15);
      transform: translateY(-1px);
    }
    .myteam-share-btn.copied {
      background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(74,222,128,0.08));
      border-color: rgba(74,222,128,0.5);
      color: #4ade80;
    }
    /* Primary "Share Link" sits in patriotic gold; the text-copy fallback stays blue. */
    .myteam-share-btn-primary {
      background: linear-gradient(135deg, rgba(245,200,66,0.22), rgba(192,21,42,0.18));
      border-color: rgba(245,200,66,0.55);
      color: #fad96a;
    }
    .myteam-share-btn-primary:hover {
      background: linear-gradient(135deg, rgba(245,200,66,0.34), rgba(192,21,42,0.26));
      border-color: rgba(245,200,66,0.8);
      box-shadow: 0 0 16px rgba(245,200,66,0.18);
    }

    /* ── Saved Teams panel ─────────────────────────────────── */
    .myteam-saved-panel {
      background: linear-gradient(135deg, rgba(26,58,107,0.22) 0%, rgba(10,15,30,0.96) 55%, rgba(245,200,66,0.06) 100%);
      border: 1.5px solid rgba(96,165,250,0.28);
      border-radius: 1.1rem;
      padding: 1.25rem 1.25rem 1.35rem;
      position: relative;
      overflow: hidden;
    }
    .myteam-saved-panel::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, #1a3a6b, #3b82f6 40%, #fbbf24 75%, #c0152a);
      opacity: 0.7;
    }
    .myteam-saved-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
    .myteam-saved-head-title { display: flex; align-items: center; gap: 0.7rem; }
    .myteam-saved-head-ico {
      width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
      background: linear-gradient(135deg, #1a3a6b, #0a0f1e);
      border: 1.5px solid rgba(96,165,250,0.35); box-shadow: 0 0 14px rgba(59,130,246,0.2);
    }
    .myteam-saved-count-badge {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; color: #93c5fd;
      background: rgba(59,130,246,0.12); border: 1px solid rgba(96,165,250,0.3);
      border-radius: 0.4rem; padding: 0.2rem 0.5rem; white-space: nowrap;
    }
    .myteam-saved-form { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .myteam-name-input {
      flex: 1; min-width: 200px;
      background: rgba(10,15,30,0.7); border: 1.5px solid rgba(255,255,255,0.1);
      border-radius: 0.6rem; padding: 0.6rem 0.85rem;
      color: #e7eefc; font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; letter-spacing: 0.01em;
      transition: border-color 0.25s, box-shadow 0.25s;
    }
    .myteam-name-input::placeholder { color: #5d779c; }
    .myteam-name-input:focus { outline: none; border-color: rgba(245,200,66,0.55); box-shadow: 0 0 0 3px rgba(245,200,66,0.1); }
    .myteam-save-btn {
      flex-shrink: 0; cursor: pointer;
      background: linear-gradient(135deg, #fad96a, #e6b800); color: #0a0f1e;
      border: 1.5px solid rgba(245,200,66,0.9);
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.6rem 1.1rem; border-radius: 0.6rem;
      box-shadow: 0 0 16px rgba(245,200,66,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .myteam-save-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(245,200,66,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
    .myteam-saved-list { display: flex; flex-direction: column; gap: 0.55rem; }
    .myteam-saved-empty {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.85rem; color: #7596c0;
      line-height: 1.5; text-align: center; padding: 1rem 0.5rem;
      border: 1px dashed rgba(255,255,255,0.08); border-radius: 0.7rem; background: rgba(255,255,255,0.015);
    }
    .myteam-saved-empty strong { color: #fad96a; }
    .myteam-saved-card {
      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
      background: rgba(10,15,30,0.55); border: 1px solid rgba(255,255,255,0.07);
      border-radius: 0.75rem; padding: 0.65rem 0.8rem;
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
    }
    .myteam-saved-card:hover { border-color: rgba(96,165,250,0.35); background: rgba(26,58,107,0.25); transform: translateX(2px); }
    .myteam-saved-card-main { display: flex; align-items: center; gap: 0.7rem; min-width: 0; flex: 1; }
    .myteam-saved-avatars { display: flex; flex-shrink: 0; }
    .myteam-saved-ava {
      width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover;
      border: 2px solid #0a0f1e; margin-left: -0.5rem; background: #1a3a6b;
      display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
    }
    .myteam-saved-ava:first-child { margin-left: 0; }
    .myteam-saved-ava-ph { color: #9fb4d4; }
    .myteam-saved-meta { min-width: 0; }
    .myteam-saved-name {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: #fff; font-size: 0.95rem;
      letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem;
    }
    .myteam-saved-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem; color: #7596c0; letter-spacing: 0.04em; text-transform: uppercase; }
    .myteam-saved-actions { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; }
    .myteam-saved-btn {
      cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
      font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.38rem 0.6rem; border-radius: 0.45rem;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #aebfd8;
      transition: all 0.2s;
    }
    .myteam-saved-btn:hover { transform: translateY(-1px); }
    .myteam-saved-btn.st-load { background: rgba(74,222,128,0.14); border-color: rgba(74,222,128,0.4); color: #86efac; }
    .myteam-saved-btn.st-load:hover { background: rgba(74,222,128,0.24); }
    .myteam-saved-btn.st-share { background: rgba(59,130,246,0.14); border-color: rgba(96,165,250,0.4); color: #93c5fd; }
    .myteam-saved-btn.st-share:hover { background: rgba(59,130,246,0.24); }
    .myteam-saved-btn.st-del:hover { background: rgba(192,21,42,0.2); border-color: rgba(192,21,42,0.5); color: #fca5a5; }

    /* ── Active / currently-loaded saved team ───────────────────────────────
       Marks which saved slate is the one the visitor is editing right now, so
       managing several teams feels like switching between real workspaces. */
    .myteam-saved-card.is-active {
      border-color: rgba(245,200,66,0.6);
      background: linear-gradient(135deg, rgba(245,200,66,0.1) 0%, rgba(26,58,107,0.3) 100%);
      box-shadow: 0 0 0 1px rgba(245,200,66,0.25) inset, 0 0 18px rgba(245,200,66,0.12);
    }
    .myteam-saved-card.is-active:hover { border-color: rgba(245,200,66,0.75); transform: none; }
    .myteam-active-pill {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.56rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; color: #0a0f1e;
      background: linear-gradient(135deg, #fad96a, #e6b800); border-radius: 0.35rem;
      padding: 0.1rem 0.42rem; margin-left: 0.45rem; vertical-align: middle; white-space: nowrap;
    }
    .myteam-saved-btn.st-load.is-loaded { background: rgba(245,200,66,0.16); border-color: rgba(245,200,66,0.5); color: #fde68a; cursor: default; }
    .myteam-saved-btn.st-load.is-loaded:hover { transform: none; }
    /* Editing bar — appears above the save form when a saved team is loaded,
       offering an in-place Update so edits don't silently spawn duplicates. */
    .myteam-editing-bar {
      display: none; align-items: center; gap: 0.6rem; flex-wrap: wrap;
      margin-bottom: 0.9rem; padding: 0.55rem 0.8rem; border-radius: 0.6rem;
      background: rgba(245,200,66,0.08); border: 1px solid rgba(245,200,66,0.32);
    }
    .myteam-editing-bar.visible { display: flex; }
    .myteam-editing-text { font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; color: #fde68a; letter-spacing: 0.01em; line-height: 1.4; flex: 1; min-width: 170px; }
    .myteam-editing-text strong { color: #fff; }
    .myteam-update-btn {
      cursor: pointer; flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.45rem 0.85rem; border-radius: 0.5rem;
      background: rgba(74,222,128,0.16); border: 1px solid rgba(74,222,128,0.45); color: #86efac;
      transition: all 0.2s;
    }
    .myteam-update-btn:hover { background: rgba(74,222,128,0.26); transform: translateY(-1px); }
    .myteam-editing-clear {
      cursor: pointer; flex-shrink: 0; background: none; border: none; color: #9fb4d4;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; text-transform: uppercase;
      letter-spacing: 0.05em; text-decoration: underline; padding: 0;
    }
    .myteam-editing-clear:hover { color: #cbd9ef; }

    /* ── Shared-team import banner (shown only when a ?team= link is opened) ── */
    .myteam-import-banner {
      display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
      background: linear-gradient(135deg, rgba(245,200,66,0.16), rgba(10,15,30,0.96) 60%, rgba(59,130,246,0.16));
      border: 1.5px solid rgba(245,200,66,0.5);
      border-radius: 1rem; padding: 1rem 1.15rem; margin-bottom: 1.25rem;
      box-shadow: 0 0 28px rgba(245,200,66,0.1);
      animation: myteam-import-in 0.5s cubic-bezier(0.34,1.4,0.64,1);
    }
    @keyframes myteam-import-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
    .myteam-import-ico {
      width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
      background: linear-gradient(135deg, #fad96a, #c0152a); border: 2px solid rgba(255,255,255,0.2);
      box-shadow: 0 0 16px rgba(245,200,66,0.35);
    }
    .myteam-import-body { flex: 1; min-width: 180px; }
    .myteam-import-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: #fad96a; font-size: 1rem; letter-spacing: 0.02em; }
    .myteam-import-sub { font-family: 'Barlow Condensed', sans-serif; color: #bcd0ee; font-size: 0.82rem; margin-top: 2px; }
    .myteam-import-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .myteam-import-load, .myteam-import-merge {
      cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.5rem 0.9rem; border-radius: 0.55rem; transition: all 0.2s;
    }
    .myteam-import-load { background: linear-gradient(135deg, #fad96a, #e6b800); color: #0a0f1e; border: 1.5px solid rgba(245,200,66,0.9); box-shadow: 0 0 14px rgba(245,200,66,0.3); }
    .myteam-import-load:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(245,200,66,0.45); }
    .myteam-import-merge { background: rgba(59,130,246,0.16); border: 1.5px solid rgba(96,165,250,0.45); color: #93c5fd; }
    .myteam-import-merge:hover { background: rgba(59,130,246,0.28); transform: translateY(-1px); }
    .myteam-import-dismiss {
      cursor: pointer; background: none; border: 1px solid rgba(255,255,255,0.12); color: #7596c0;
      width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; font-size: 0.8rem; transition: all 0.2s;
    }
    .myteam-import-dismiss:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
    .myteam-summary-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0.65rem;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 1023px) {
      .myteam-summary-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 639px) {
      .myteam-summary-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .myteam-sum-card {
      background: linear-gradient(135deg, rgba(74,222,128,0.06) 0%, rgba(10,15,30,0.95) 100%);
      border: 1px solid rgba(74,222,128,0.2);
      border-radius: 0.85rem;
      padding: 0.85rem 0.5rem 0.65rem;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.34,1.4,0.64,1);
      animation: myteam-card-in 0.35s ease both;
      cursor: pointer;
    }
    .myteam-sum-card:hover {
      border-color: rgba(74,222,128,0.5);
      box-shadow: 0 0 22px rgba(74,222,128,0.12);
      transform: translateY(-3px) scale(1.02);
    }
    .myteam-sum-photo {
      width: 64px; height: 64px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid rgba(74,222,128,0.4);
      margin: 0 auto 0.4rem;
      background: rgba(30,53,96,0.5);
      box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 12px rgba(74,222,128,0.08);
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .myteam-sum-card:hover .myteam-sum-photo {
      border-color: rgba(74,222,128,0.6);
      box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 20px rgba(74,222,128,0.15);
    }
    .myteam-sum-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
    }
    .myteam-sum-empty {
      background: rgba(30,53,96,0.12);
      border: 2px dashed rgba(255,255,255,0.06);
      border-radius: 0.85rem;
      padding: 0.75rem 0.5rem;
      text-align: center;
      color: #3d5a80;
      cursor: pointer;
      transition: all 0.25s;
    }
    .myteam-sum-empty:hover {
      border-color: rgba(192,21,42,0.3);
      background: rgba(30,53,96,0.2);
    }
    .myteam-summary-stats {
      margin-top: 0.85rem;
      padding-top: 0.75rem;
      border-top: 1px solid rgba(255,255,255,0.06);
      position: relative;
      z-index: 1;
    }
    .myteam-stats-row {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }
    .myteam-stat {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .myteam-stat-value {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1;
    }
    .myteam-stat-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.65rem;
      color: #7894b8;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1.2;
    }
    .myteam-progress-wrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .myteam-progress-track {
      flex: 1;
      height: 6px;
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      overflow: hidden;
    }
    .myteam-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #c0152a, #f5c842, #4ade80);
      border-radius: 999px;
      transition: width 0.5s cubic-bezier(0.34,1.4,0.64,1);
    }
    .myteam-progress-pct {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      color: #9fb4d4;
      letter-spacing: 0.05em;
      min-width: 2rem;
      text-align: right;
    }
    .myteam-complete-banner {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      justify-content: center;
      margin-top: 0.5rem;
      padding: 0.45rem 0.75rem;
      background: linear-gradient(135deg, rgba(74,222,128,0.1), rgba(74,222,128,0.03));
      border: 1px solid rgba(74,222,128,0.25);
      border-radius: 0.65rem;
      animation: myteam-complete-glow 2s ease-in-out infinite alternate;
    }
    @keyframes myteam-complete-glow {
      from { box-shadow: 0 0 8px rgba(74,222,128,0.1); }
      to { box-shadow: 0 0 20px rgba(74,222,128,0.2); }
    }
    .myteam-share-toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(120%);
      background: linear-gradient(135deg, rgba(74,222,128,0.95), rgba(52,211,153,0.95));
      color: #0a0f1e;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 0.65rem 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(74,222,128,0.3);
      z-index: 10000;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s;
      opacity: 0;
      pointer-events: none;
    }
    .myteam-share-toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* ── Premium "Added to your team" toast (dark patriotic theme) ── */
    .team-add-toast {
      position: fixed;
      top: 1.5rem;
      right: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.65rem;
      min-width: 280px;
      max-width: 370px;
      padding: 0.85rem 1.1rem 0.85rem 0.95rem;
      background: linear-gradient(135deg, rgba(16,28,54,0.97) 0%, rgba(10,17,35,0.98) 100%);
      border: 1px solid rgba(245,158,11,0.45);
      border-radius: 1rem;
      box-shadow: 0 18px 50px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 28px rgba(245,158,11,0.14);
      z-index: 10050;
      opacity: 0;
      transform: translateX(130%) scale(0.96);
      transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
      pointer-events: none;
      overflow: hidden;
    }
    .team-add-toast::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: linear-gradient(180deg, #4ade80, #22c55e);
      box-shadow: 0 0 12px rgba(74,222,128,0.5);
    }
    .team-add-toast.removing::before { background: linear-gradient(180deg,#f87171,#ef4444); box-shadow: 0 0 12px rgba(248,113,113,0.5); }
    .team-add-toast.complete { border-color: rgba(74,222,128,0.6); box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 32px rgba(74,222,128,0.26); }
    .team-add-toast.complete::before { background: linear-gradient(180deg,#fbbf24,#f59e0b); box-shadow: 0 0 14px rgba(245,158,11,0.6); }
    .team-add-toast.visible { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
    .team-add-toast-avatar {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      overflow: hidden; display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; color: #9fb4d4;
      background: rgba(30,53,96,0.5);
      border: 2px solid rgba(245,158,11,0.45);
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }
    .team-add-toast-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .team-add-toast-body { flex: 1; min-width: 0; }
    .team-add-toast-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.96rem; letter-spacing: 0.04em; color: #fff; line-height: 1.15;
    }
    .team-add-toast-sub {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem;
      letter-spacing: 0.02em; color: #9fb4d4; margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .team-add-toast-check {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.95rem; font-weight: 700; color: #0a0f1e;
      background: linear-gradient(135deg, #4ade80, #22c55e);
      box-shadow: 0 0 16px rgba(74,222,128,0.45);
    }
    .team-add-toast.visible .team-add-toast-check { animation: team-toast-check-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
    .team-add-toast.removing .team-add-toast-check { background: linear-gradient(135deg,#f87171,#ef4444); color: #fff; box-shadow: 0 0 16px rgba(248,113,113,0.45); }
    .team-add-toast.complete .team-add-toast-check { background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow: 0 0 18px rgba(245,158,11,0.5); }
    @keyframes team-toast-check-pop { 0%{transform:scale(0) rotate(-30deg);} 60%{transform:scale(1.25) rotate(0);} 100%{transform:scale(1);} }

    /* Top row of the toast — avatar · message · check. Wrapped so the toast can
       grow a guidance footer beneath it without disturbing this layout. */
    .team-add-toast-main { display: flex; align-items: center; gap: 0.85rem; }
    /* Contextual "what next" guidance footer — appears under an add confirmation
       with one-tap actions (fill the next seat, compare, jump to the workspace).
       Hidden automatically when no actions are supplied (e.g. on remove). */
    .team-add-toast-actions {
      display: flex; align-items: stretch; gap: 0.45rem; flex-wrap: wrap;
      padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.09);
    }
    .team-add-toast-actions:empty { display: none; padding-top: 0; border-top: none; }
    .tat-action {
      flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
      padding: 0.5rem 0.7rem; border-radius: 0.6rem; cursor: pointer; line-height: 1;
      white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
    }
    .tat-action-primary {
      color: #0a0f1e; border: none;
      background: linear-gradient(135deg, #fad96a, #e6b800);
      box-shadow: 0 3px 12px rgba(245,200,66,0.28);
    }
    .tat-action-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(245,200,66,0.45); }
    .tat-action-secondary {
      flex: 0 1 auto; color: #cbd5e1; background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.14);
    }
    .tat-action-secondary:hover { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
    .team-add-toast.complete .tat-action-primary { background: linear-gradient(135deg, #6ee7a8, #34d399); box-shadow: 0 3px 12px rgba(52,211,153,0.28); }
    .team-add-toast.complete .tat-action-primary:hover { box-shadow: 0 6px 16px rgba(52,211,153,0.45); }

    /* Counter "pop" when the team count changes */
    @keyframes myteam-count-pop {
      0% { transform: scale(1); }
      35% { transform: scale(1.28); }
      100% { transform: scale(1); }
    }
    .myteam-count-pop { animation: myteam-count-pop 0.6s cubic-bezier(0.34,1.56,0.64,1); display: inline-block; }

    /* Key Races "Add to My Team" button pop on click */
    @keyframes kr-btn-pop {
      0% { transform: scale(1); }
      30% { transform: scale(1.12); }
      55% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }
    .kr-btn-pop {
      animation: kr-btn-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
      background: linear-gradient(135deg, rgba(74,222,128,0.30), rgba(74,222,128,0.14)) !important;
      border-color: rgba(74,222,128,0.7) !important;
      color: #4ade80 !important;
    }
    .kr-btn-check { display: inline-block; animation: team-toast-check-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }

    /* ── "Seat claimed" celebration burst ──────────────────────────────────────
       A brief, tasteful particle pop that fires from the exact button a voter
       taps to add someone to My Voting Team. It makes the single most important
       action on the page — filling one of their ballot seats — land with a real,
       satisfying flourish instead of a silent state change. Colors stay on-brand
       (patriotic red/white/blue + the team's amber gold). Purely decorative:
       pointer-events:none so it never blocks the UI, self-removed after ~1s, and
       fully suppressed under prefers-reduced-motion. */
    .pdx-celebrate-layer { position: fixed; z-index: 10060; pointer-events: none; width: 0; height: 0; }
    .pdx-celebrate-bit {
      position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 2px;
      transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity;
      box-shadow: 0 0 6px rgba(0,0,0,0.25);
      animation: pdxCelebBit 0.9s cubic-bezier(0.22,0.61,0.36,1) forwards;
    }
    .pdx-celebrate-bit.is-star {
      width: auto; height: auto; font-size: 0.82rem; line-height: 1; border-radius: 0;
      background: transparent !important; box-shadow: none; color: #fad96a;
      text-shadow: 0 0 9px rgba(245,200,66,0.8);
    }
    @keyframes pdxCelebBit {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
      18%  { opacity: 1; }
      100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
    }
    /* The freshly-filled count "ticks up" on the floating dock so progress
       registers even when the voter is browsing far below the team panel. */
    @keyframes pdxDockBump { 0% { transform: scale(1); } 42% { transform: scale(1.16); } 100% { transform: scale(1); } }
    .team-dock-ring.dock-bump { animation: pdxDockBump 0.55s cubic-bezier(0.34,1.56,0.64,1); }
    @media (prefers-reduced-motion: reduce) {
      .pdx-celebrate-layer { display: none; }
      .team-dock-ring.dock-bump { animation: none; }
    }

    /* Quick-research action buttons on each 2026 candidate (Compare / Align / Profile) */
    .kr-action-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
    .kr-action-btn {
      flex: 1 1 0; min-width: 0; min-height: 38px;
      display: inline-flex; align-items: center; justify-content: center; gap: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
      border-radius: 0.6rem; cursor: pointer; white-space: nowrap;
      padding: 0.35rem 0.4rem; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    }
    .kr-action-btn:hover { transform: translateY(-1px); }
    .kr-action-btn:active { transform: scale(0.96); }
    .kr-action-btn .kr-action-ico { font-size: 0.82rem; line-height: 1; }
    .kr-action-compare { color: #93c5fd; background: rgba(59,130,246,0.12); border: 1px solid rgba(96,165,250,0.4); }
    .kr-action-compare.added { color: #4ade80; background: rgba(74,222,128,0.14); border-color: rgba(74,222,128,0.55); }
    /* Dynamic "Spotlight" button — gold, signals a live/timely highlight.
       The small pulsing dot tells the visitor this opens something current. */
    .kr-action-spotlight { color: #f5c842; background: rgba(245,200,66,0.12); border: 1px solid rgba(245,200,66,0.45); }
    .kr-action-spotlight:hover { background: rgba(245,200,66,0.18); border-color: rgba(245,200,66,0.6); }
    .kr-spot-live { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #f5c842; box-shadow: 0 0 0 0 rgba(245,200,66,0.6); animation: krSpotPulse 2.1s ease-out infinite; }
    @keyframes krSpotPulse {
      0% { box-shadow: 0 0 0 0 rgba(245,200,66,0.55); }
      70% { box-shadow: 0 0 0 6px rgba(245,200,66,0); }
      100% { box-shadow: 0 0 0 0 rgba(245,200,66,0); }
    }
    @media (prefers-reduced-motion: reduce) { .kr-spot-live { animation: none; } }
    .kr-action-profile { color: #cbd9ee; background: rgba(159,180,212,0.10); border: 1px solid rgba(159,180,212,0.32); }
    /* Comment-count button — compact (doesn't claim equal width) and tinted blue. */
    .kr-action-comment { flex: 0 0 auto; color: #9fb4d4; background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.32); padding: 0.35rem 0.6rem; }
    .kr-action-comment:hover { color: #cfe4ff; border-color: rgba(96,165,250,0.55); background: rgba(96,165,250,0.18); }
    .kr-action-comment .comment-count { font-family: 'Bebas Neue', sans-serif; font-size: 0.92rem; letter-spacing: 0.02em; }
    @media (max-width: 380px) {
      .kr-action-btn { font-size: 0.62rem; letter-spacing: 0.03em; }
    }

    /* ── Per-race "Compare these candidates" CTA ─────────────────────────────
       The bridge between browsing a race and choosing a pick: one tap loads
       every candidate in THIS seat into the side-by-side compare tool, so a
       voter weighs the people running against each other before adding anyone
       to their team. Blue to read as a research/decision step, sitting just
       above the gold "Add to My Team" commitment so the flow reads top-to-
       bottom: see who's running → compare them → pick one. */
    .kr-race-compare {
      width: 100%; display: flex; align-items: center; gap: 0.7rem;
      text-align: left; cursor: pointer; min-height: 48px;
      padding: 0.7rem 0.95rem; border-radius: 0.85rem;
      background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(37,99,235,0.07));
      border: 1.5px solid rgba(96,165,250,0.45);
      transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .kr-race-compare:hover {
      transform: translateY(-1px);
      background: linear-gradient(135deg, rgba(59,130,246,0.26), rgba(37,99,235,0.12));
      border-color: rgba(96,165,250,0.7);
      box-shadow: 0 6px 20px rgba(59,130,246,0.18);
    }
    .kr-race-compare:active { transform: scale(0.99); }
    .kr-race-compare-ico {
      flex: 0 0 auto; width: 36px; height: 36px; border-radius: 0.6rem;
      display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
      background: rgba(96,165,250,0.16); border: 1px solid rgba(96,165,250,0.4);
    }
    .kr-race-compare-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
    .kr-race-compare-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase;
      color: #bfdbfe; line-height: 1.1;
    }
    .kr-race-compare-sub { font-family: 'Barlow', sans-serif; font-size: 0.68rem; color: #9fb4d4; line-height: 1.3; }
    .kr-race-compare-go { flex: 0 0 auto; color: #93c5fd; font-size: 1.2rem; line-height: 1; }
    @media (max-width: 380px) { .kr-race-compare-sub { font-size: 0.64rem; } .kr-race-compare-title { font-size: 0.78rem; } }

    /* ── "See full list for this district" — the bridge from a Key Races card
       down to the same seat's full field in Relevant to Me. Emerald so it reads
       as a distinct "go deeper / browse everyone" step, clearly separate from the
       blue "compare these candidates" overlay action above it. */
    .kr-fulllist-btn {
      width: 100%; display: flex; align-items: center; gap: 0.65rem;
      text-align: left; cursor: pointer; min-height: 46px;
      padding: 0.55rem 0.8rem; border-radius: 0.8rem;
      background: linear-gradient(135deg, rgba(16,185,129,0.24), rgba(5,150,105,0.1));
      border: 1.5px solid rgba(52,211,153,0.6);
      box-shadow: 0 3px 14px rgba(16,185,129,0.13);
      transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .kr-fulllist-btn:hover {
      transform: translateY(-1px);
      background: linear-gradient(135deg, rgba(16,185,129,0.34), rgba(5,150,105,0.16));
      border-color: rgba(52,211,153,0.9);
      box-shadow: 0 8px 24px rgba(16,185,129,0.22);
    }
    .kr-fulllist-btn:active { transform: scale(0.99); }
    .kr-fulllist-ico {
      flex: 0 0 auto; width: 32px; height: 32px; border-radius: 0.55rem;
      display: flex; align-items: center; justify-content: center; font-size: 1rem;
      background: rgba(52,211,153,0.2); border: 1px solid rgba(52,211,153,0.5);
    }
    .kr-fulllist-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.08rem; }
    .kr-fulllist-eyebrow {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: #6ee7b7; line-height: 1;
    }
    .kr-fulllist-title {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase;
      color: #d1fae5; line-height: 1.1;
    }
    .kr-fulllist-go { flex: 0 0 auto; color: #6ee7b7; font-size: 1.25rem; line-height: 1; }
    @media (max-width: 380px) { .kr-fulllist-title { font-size: 0.84rem; } }

    /* ── Key Races → Relevant to Me funnel — the section-level handoff. After the
       quick overview of every race, this single prominent bridge sends the voter
       down into the detailed, filtered Relevant to Me list to research the whole
       field. Emerald so it reads as the same "go deeper / see everyone" step as
       the per-race "See everyone running" buttons, just at the section scale —
       the clear closing "where to go next" for the overview. */
    .kr-funnel {
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
      margin-top: 1.5rem; padding: 1.15rem 1.35rem; border-radius: 1.25rem;
      background: linear-gradient(135deg, rgba(16,185,129,0.2) 0%, rgba(5,150,105,0.08) 55%, rgba(10,15,30,0.5) 100%);
      border: 2px solid rgba(52,211,153,0.45);
      box-shadow: 0 10px 36px rgba(0,0,0,0.3), 0 0 26px rgba(16,185,129,0.1);
    }
    .kr-funnel__icon {
      flex: 0 0 auto; width: 48px; height: 48px; border-radius: 0.9rem;
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
      background: linear-gradient(135deg, rgba(16,185,129,0.32), rgba(16,185,129,0.12));
      border: 1px solid rgba(52,211,153,0.5);
    }
    .kr-funnel__body { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
    .kr-funnel__eyebrow {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #6ee7b7; line-height: 1;
    }
    .kr-funnel__title {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.02em;
      color: #fff; line-height: 1.05;
    }
    .kr-funnel__sub { font-family: 'Barlow', sans-serif; font-size: 0.78rem; color: #c6e8d8; line-height: 1.4; }
    .kr-funnel__btn {
      flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.92rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #04231a;
      background: linear-gradient(135deg, #6ee7b7, #10b981); border: none;
      border-radius: 0.85rem; padding: 0.85rem 1.5rem; min-height: 50px;
      box-shadow: 0 6px 22px rgba(16,185,129,0.4);
      transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .kr-funnel__btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 30px rgba(16,185,129,0.55); }
    .kr-funnel__btn:active { transform: scale(0.99); }
    @media (max-width: 640px) {
      .kr-funnel { padding: 1rem 1.1rem; }
      .kr-funnel__btn { width: 100%; justify-content: center; }
      .kr-funnel__title { font-size: 1.35rem; }
    }

    /* ── COMPACT KEY-RACES OVERVIEW CARD ───────────────────────────────────────
       Key Races is the lightweight "who represents me" scan that funnels down into
       Relevant to Me, so each race renders as a slim card: a one-line header
       (office + district + a small on-ballot pill), one compact officeholder row,
       three core actions, and a single prominent bridge to the full field below.
       The heavy hero / score / teaser treatment was retired here to cut vertical
       weight — that depth now lives in Relevant to Me and the profile. */
    .kr-race-card { border-radius: 1rem; overflow: hidden; border: 1px solid rgba(96,165,250,0.22); background: rgba(10,15,30,0.55); box-shadow: 0 5px 18px rgba(0,0,0,0.24); }
    /* Coverage panel + group dividers span the full overview grid so the race
       cards beneath them can sit two-up. */
    .kr-span-all { grid-column: 1 / -1; }
    .kr-race-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .kr-race-chamber { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.16rem 0.55rem; border-radius: 999px; white-space: nowrap; }
    .kr-race-district { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: 0.02em; color: #fff; line-height: 1; }
    .kr-head-ballot { margin-left: auto; display: inline-flex; align-items: center; gap: 0.28rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap; }
    .kr-head-ballot.is-now { color: #6ee7b7; background: rgba(16,185,129,0.14); border: 1px solid rgba(52,211,153,0.45); }
    .kr-head-ballot.is-open { color: #fcd34d; background: rgba(245,200,66,0.14); border: 1px solid rgba(245,200,66,0.45); }
    .kr-head-ballot.is-future { color: #9fb4d4; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.3); }
    .kr-race-body { padding: 0.7rem 0.85rem 0.8rem; }

    /* Compact officeholder row — identity + tenure + the three core actions. */
    .kr-holder { position: relative; border-radius: 0.85rem; padding: 0.6rem 0.7rem 0.65rem; background: linear-gradient(150deg, rgba(245,200,66,0.13), rgba(10,15,30,0.32)); border: 1px solid rgba(245,200,66,0.4); }
    .kr-holder + .kr-holder { margin-top: 0.5rem; }
    .kr-holder.is-pick { border-color: rgba(74,222,128,0.5); background: linear-gradient(150deg, rgba(74,222,128,0.13), rgba(10,15,30,0.32)); }
    .kr-holder.is-open { border-color: rgba(148,163,184,0.34); background: rgba(30,41,59,0.4); }
    .kr-holder-top { display: flex; align-items: center; gap: 0.65rem; }
    .kr-holder-openavatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(148,163,184,0.5); background: rgba(30,53,96,0.25); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
    .kr-holder-meta { flex: 1; min-width: 0; }
    .kr-holder-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: 0.02em; line-height: 1.05; color: #fff; background: none; border: none; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; transition: color 0.15s ease; }
    .kr-holder-name:hover { color: #fff3d6; }
    .kr-holder-badges { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.12rem; }
    .kr-holder-inoffice { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1a1206; background: linear-gradient(135deg, #ffe884, #e0a82e); padding: 0.1rem 0.5rem; border-radius: 999px; }
    .kr-holder-office { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; color: #fcd34d; line-height: 1.2; margin-top: 0.16rem; font-weight: 600; }
    .kr-holder-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.32rem; margin-top: 0.45rem; }
    .kr-holder-status { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.6rem; letter-spacing: 0.02em; color: #cdd9ec; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.3); padding: 0.14rem 0.5rem; border-radius: 999px; }
    .kr-holder-status.is-future { color: #9fb4d4; }
    .kr-open-mini { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; color: #cdd9ec; line-height: 1.3; margin-top: 0.2rem; }

    /* Compact action row — Add / Profile, equal weight, thumb-sized. Compare was
       removed from the card so the prominent "See full field" bridge below is the
       unambiguous deeper-research path; head-to-head compare lives in the full
       field, the medium modal and the profile. */
    .kr-mini-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
    .kr-mini-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.28rem; min-height: 40px; padding: 0 0.5rem; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: #bcd3f5; background: rgba(59,130,246,0.1); border: 1px solid rgba(96,165,250,0.32); border-radius: 0.6rem; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
    .kr-mini-btn:hover { background: rgba(59,130,246,0.18); border-color: rgba(96,165,250,0.55); }
    .kr-mini-btn:active { transform: scale(0.97); }
    .kr-mini-btn.added { color: #6ee7b7; background: rgba(16,185,129,0.14); border-color: rgba(52,211,153,0.5); }
    .kr-mini-ico, .kr-mini-btn .kr-action-ico { font-size: 0.85rem; line-height: 1; }
    .kr-mini-add { color: #fbbf24; background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.08)); border-color: rgba(245,158,11,0.5); }
    .kr-mini-add:hover { background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(245,158,11,0.12)); border-color: rgba(245,158,11,0.7); }
    .kr-mini-add.is-on { color: #4ade80; background: linear-gradient(135deg, rgba(74,222,128,0.22), rgba(74,222,128,0.1)); border-color: rgba(74,222,128,0.55); }

    /* ── Current officeholder (incumbent) — the elevated "hero" of each race card.
       Deliberately given stronger visual weight than the 2026 challenger rows
       below, so it's instantly clear who holds the seat today vs. who's running. */
    .kr-incumbent-label { display: flex; align-items: center; gap: 0.42rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fcd34d; margin-bottom: 0.45rem; }
    .kr-incumbent-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 9px rgba(251,191,36,0.9); flex-shrink: 0; }
    /* The current officeholder is the elevated "hero" of every race card — it gets
       a gold accent bar, stronger glow and more padding than the secondary
       challenger rows below, so who holds the seat today reads instantly. */
    .kr-incumbent-panel {
      position: relative; border-radius: 1.15rem; padding: 1.2rem 1.2rem 1.25rem; overflow: hidden;
      background: linear-gradient(150deg, rgba(245,200,66,0.26), rgba(245,158,11,0.07) 52%, rgba(10,15,30,0.4));
      border: 2px solid rgba(245,200,66,0.62);
      box-shadow: 0 16px 44px rgba(245,158,11,0.24), 0 0 0 1px rgba(245,200,66,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    /* A faint radial gold glow in the upper-left gives the hero a premium "lit"
       feel without competing with the content. */
    .kr-incumbent-panel::after {
      content: ''; position: absolute; top: -40%; left: -10%; width: 60%; height: 120%;
      background: radial-gradient(closest-side, rgba(245,200,66,0.16), transparent 70%);
      pointer-events: none; opacity: 0.9;
    }
    .kr-incumbent-panel > * { position: relative; z-index: 1; }
    .kr-incumbent-panel::before {
      content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; z-index: 2;
      background: linear-gradient(90deg, #ffe486, #ffd75e 45%, #e0a82e); opacity: 1;
      box-shadow: 0 1px 10px rgba(245,200,66,0.5);
    }
    .kr-incumbent-panel + .kr-incumbent-panel { margin-top: 0.8rem; }
    /* When the visitor has added the officeholder to their team, ring the hero green. */
    .kr-incumbent-panel.is-pick { border-color: rgba(74,222,128,0.6); box-shadow: 0 16px 44px rgba(74,222,128,0.2), 0 0 0 1px rgba(74,222,128,0.22), inset 0 1px 0 rgba(255,255,255,0.1); }
    .kr-incumbent-panel.is-pick::before { background: linear-gradient(90deg, #4ade80, #22c55e); }
    .kr-incumbent-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.85rem; letter-spacing: 0.02em; line-height: 1.0; color: #fff; background: none; border: none; padding: 0; cursor: pointer; text-align: left; text-shadow: 0 1px 12px rgba(0,0,0,0.4); transition: color 0.15s ease; }
    .kr-incumbent-name:hover { color: #fff3d6; }
    .kr-incumbent-badge {
      display: inline-flex; align-items: center; gap: 0.32rem; white-space: nowrap;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
      color: #1a1206; background: linear-gradient(135deg, #ffe884, #e0a82e);
      padding: 0.3rem 0.9rem; border-radius: 999px; box-shadow: 0 3px 16px rgba(245,200,66,0.6), 0 0 0 1.5px rgba(245,200,66,0.5);
      animation: krIncBadgePulse 2.6s ease-in-out infinite;
    }
    .kr-incumbent-badge .kr-incumbent-badge-ico { font-size: 0.9rem; line-height: 1; }
    @keyframes krIncBadgePulse {
      0%, 100% { box-shadow: 0 2px 13px rgba(245,200,66,0.5), 0 0 0 1.5px rgba(245,200,66,0.4); }
      50% { box-shadow: 0 4px 24px rgba(245,200,66,0.9), 0 0 0 1.5px rgba(245,200,66,0.6); }
    }
    @media (prefers-reduced-motion: reduce) { .kr-incumbent-badge { animation: none; } }
    /* Open-seat hero — the "no incumbent" counterpart to the gold officeholder
       panel. A cool steel-blue card carrying a clear gold OPEN SEAT badge, so a
       race with no sitting officeholder still reads as a complete, intentional
       card rather than a blank where the incumbent would be. */
    .kr-open-panel { background: linear-gradient(150deg, rgba(96,165,250,0.14), rgba(10,15,30,0.42)); box-shadow: none; }
    .kr-open-panel::before { background: linear-gradient(90deg, #fde68a, #f59e0b); box-shadow: 0 1px 10px rgba(245,158,11,0.45); }
    .kr-open-panel::after { background: radial-gradient(closest-side, rgba(96,165,250,0.14), transparent 70%); }
    .kr-open-avatar { width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: #fcd34d; background: rgba(245,200,66,0.08); border: 3px dashed rgba(245,200,66,0.6); }
    .kr-open-badge {
      display: inline-flex; align-items: center; gap: 0.34rem; white-space: nowrap;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: #2a1903; background: linear-gradient(135deg, #fde68a, #f59e0b);
      padding: 0.26rem 0.8rem; border-radius: 999px; box-shadow: 0 3px 14px rgba(245,158,11,0.45), 0 0 0 1.5px rgba(245,158,11,0.4);
    }
    /* Structured meta row under the name: a tenure pill ("In office since YYYY")
       and a status pill (re-election / retiring / term info), grouped so the
       officeholder card carries real, scannable information weight. */
    .kr-inc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.6rem; }
    .kr-inc-tenure { display: inline-flex; align-items: center; gap: 0.32rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.04em; color: #ffe6a3; background: rgba(245,200,66,0.16); border: 1px solid rgba(245,200,66,0.5); padding: 0.18rem 0.62rem; border-radius: 999px; }
    .kr-inc-status { display: inline-flex; align-items: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.03em; color: #f3e0b0; background: rgba(245,200,66,0.1); border: 1px solid rgba(245,200,66,0.34); padding: 0.18rem 0.62rem; border-radius: 999px; }
    .kr-inc-summary { font-family: 'Barlow Condensed', sans-serif; font-size: 0.84rem; line-height: 1.5; color: #f0e3c4; margin-top: 0.65rem; }
    .kr-inc-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 0.34rem; margin-top: 0.7rem; }
    .kr-inc-focus-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c8a657; }
    .kr-inc-chip { font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: 0.03em; color: #fcd34d; background: rgba(245,200,66,0.1); border: 1px solid rgba(245,200,66,0.3); padding: 0.1rem 0.52rem; border-radius: 999px; }
    /* The challenger heading is intentionally lighter/cooler than the gold
       incumbent label so the people running read as the secondary tier. */
    .kr-cand-label { display: flex; align-items: center; gap: 0.4rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7596c0; margin: 1rem 0 0.55rem; }
    /* Clean "no challengers filed yet" state shown when the only people in a race
       are the sitting officeholder(s). */
    .kr-cand-empty { display: flex; align-items: flex-start; gap: 0.55rem; border-radius: 0.9rem; padding: 0.75rem 0.9rem; background: rgba(10,15,30,0.45); border: 1px dashed rgba(117,150,192,0.3); font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; line-height: 1.45; color: #9fb4d4; }
    .kr-cand-empty .kr-cand-empty-ico { font-size: 0.95rem; line-height: 1.3; flex-shrink: 0; }
    /* ── "+N more candidates" teaser-expand link ────────────────────────────
       Key Races is the lightweight overview, so each race shows only its top
       one or two candidates as a teaser. When more are running, this link makes
       the rest one tap away — it drops the voter into the same seat's full field
       in Relevant to Me (the research section), reinforcing the overview →
       research flow. Emerald to match the "See full list" bridge it echoes. */
    .kr-cand-more {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
      margin-top: 0.55rem; cursor: pointer; min-height: 40px;
      padding: 0.5rem 0.85rem; border-radius: 0.75rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase;
      color: #6ee7b7; background: rgba(16,185,129,0.08);
      border: 1px dashed rgba(52,211,153,0.45);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .kr-cand-more:hover { background: rgba(16,185,129,0.16); border-color: rgba(52,211,153,0.75); color: #a7f3d0; }
    .kr-cand-more .kr-cand-more-arrow { font-size: 0.9rem; line-height: 1; }
    /* ── Field-experience comparison rail ───────────────────────────────────
       A scannable "time in office across the whole field" strip that sits
       between the officeholder hero and the challengers, so a voter can weigh
       an incumbent's years in power against every challenger's experience (or
       lack of it) at a single glance. Rows are sorted longest-serving first;
       each carries a horizontal meter scaled to the most-tenured person in the
       race, so a 12-year incumbent visibly towers over a first-time challenger
       whose meter is empty. Tapping a row opens that person's full profile. */
    .kr-xp { margin: 0.2rem 0 0.9rem; border-radius: 0.95rem; padding: 0.85rem 0.95rem 0.9rem; background: linear-gradient(160deg, rgba(245,200,66,0.07), rgba(10,15,30,0.4)); border: 1px solid rgba(245,200,66,0.22); box-shadow: inset 0 1px 0 rgba(245,200,66,0.08); }
    .kr-xp-title { display: inline-flex; align-items: center; gap: 0.36rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: #f5c842; }
    .kr-xp-title .kr-xp-ico { font-size: 0.82em; }
    .kr-xp-sum { font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; line-height: 1.4; color: #cdd8ec; margin: 0.3rem 0 0.75rem; }
    .kr-xp-sum strong { color: #ffe6a3; font-weight: 700; }
    .kr-xp-rows { display: flex; flex-direction: column; gap: 0.42rem; }
    .kr-xp-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 0.62rem; width: 100%; text-align: left; background: none; border: none; padding: 0.16rem 0.12rem; cursor: pointer; border-radius: 0.55rem; transition: background 0.18s ease; }
    .kr-xp-row:hover { background: rgba(255,255,255,0.045); }
    .kr-xp-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; background: rgba(30,53,96,0.3); border: 1.5px solid rgba(159,180,212,0.3); color: #9fb4d4; }
    .kr-xp-av img { width: 100%; height: 100%; object-fit: cover; }
    .kr-xp-row.is-inc .kr-xp-av { border-color: rgba(245,200,66,0.7); box-shadow: 0 0 0 1px rgba(245,200,66,0.18); }
    .kr-xp-mid { min-width: 0; }
    .kr-xp-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem; color: #fff; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kr-xp-row.is-inc .kr-xp-name { color: #ffe6a3; }
    .kr-xp-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.58rem; letter-spacing: 0.02em; color: #8aa0c0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.04rem; }
    .kr-xp-meter { margin-top: 0.3rem; height: 6px; border-radius: 999px; background: rgba(10,15,30,0.75); overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
    .kr-xp-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.22,1,0.36,1); }
    .kr-xp-row.is-inc .kr-xp-fill { background: linear-gradient(90deg, #fde68a, #f59e0b); box-shadow: 0 0 8px rgba(245,158,11,0.4); }
    .kr-xp-row.is-other .kr-xp-fill { background: linear-gradient(90deg, #7dd3fc, #38bdf8); }
    .kr-xp-row.is-former .kr-xp-fill { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
    .kr-xp-row.is-new .kr-xp-meter { background: repeating-linear-gradient(90deg, rgba(167,139,250,0.16) 0 6px, transparent 6px 12px); border-color: rgba(167,139,250,0.3); }
    .kr-xp-val { text-align: right; line-height: 1; white-space: nowrap; }
    .kr-xp-val-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.02em; color: #ffe6a3; }
    .kr-xp-row.is-other .kr-xp-val-num { color: #bae6fd; }
    .kr-xp-row.is-former .kr-xp-val-num { color: #cbd5e1; }
    .kr-xp-val-unit { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.48rem; letter-spacing: 0.09em; text-transform: uppercase; color: #8aa0c0; margin-top: 0.05rem; }
    .kr-xp-newchip { display: inline-flex; align-items: center; gap: 0.24rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.56rem; letter-spacing: 0.07em; text-transform: uppercase; color: #c4b5fd; background: rgba(139,92,246,0.16); border: 1px solid rgba(167,139,250,0.45); padding: 0.16rem 0.5rem; border-radius: 999px; }
    /* The explicit "first-time candidate" experience pill shown on a challenger
       card when they hold no prior office — so the absence of tenure reads as
       real, comparable context rather than an empty slot. */
    .kr-cand-newexp { display: inline-flex; align-items: center; gap: 0.32rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.03em; color: #c4b5fd; background: rgba(139,92,246,0.13); border: 1px solid rgba(167,139,250,0.4); padding: 0.18rem 0.62rem; border-radius: 999px; }
    .kr-cand-newexp .kr-cand-newexp-ico { font-size: 0.82em; line-height: 1; }
    @media (max-width: 480px) { .kr-xp-val-num { font-size: 1.1rem; } .kr-xp-sub { font-size: 0.55rem; } }
    /* ── "Up for Election" ballot-status banner ─────────────────────────────
       A full-width strip directly under each race header that makes the single
       most important fact — can I actually vote in this race in 2026? —
       impossible to miss. Three states:
         is-now    = on the 2026 ballot (bright green, glowing accent + pulse)
         is-open   = open seat filled in 2026 (gold, glowing accent + pulse)
         is-future = a sitting seat NOT up in 2026 (quiet steel, no glow)
       Each banner carries a colored left accent bar, a filled icon badge, a bold
       title, a plain-language sub-line, and a right-aligned action flag, so the
       timing reads instantly without ever feeling loud. */
    .kr-ballot-banner { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1.2rem; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .kr-ballot-banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
    .kr-ballot-banner .kr-bb-badge { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-size: 1.02rem; line-height: 1; flex-shrink: 0; }
    .kr-ballot-banner .kr-bb-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
    .kr-ballot-banner .kr-bb-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.94rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; }
    .kr-ballot-banner .kr-bb-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.015em; line-height: 1.25; }
    .kr-ballot-banner .kr-bb-flag { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.66rem; border-radius: 999px; white-space: nowrap; line-height: 1; }
    /* On the 2026 ballot — the state that must be impossible to miss. */
    .kr-ballot-banner.is-now { background: linear-gradient(100deg, rgba(34,197,94,0.20), rgba(34,197,94,0.05) 58%, transparent); }
    .kr-ballot-banner.is-now::before { background: linear-gradient(#86efac,#22c55e); box-shadow: 0 0 14px rgba(34,197,94,0.75); }
    .kr-ballot-banner.is-now .kr-bb-badge { background: linear-gradient(135deg,#86efac,#22c55e); color: #06280f; box-shadow: 0 4px 14px rgba(34,197,94,0.45); }
    .kr-ballot-banner.is-now .kr-bb-title { color: #9af0b8; text-shadow: 0 0 16px rgba(34,197,94,0.4); }
    .kr-ballot-banner.is-now .kr-bb-sub { color: #7fd6a0; }
    .kr-ballot-banner.is-now .kr-bb-flag { color: #06280f; background: linear-gradient(135deg,#86efac,#22c55e); box-shadow: 0 4px 14px rgba(34,197,94,0.4); animation: krBallotPulse 2.8s ease-in-out infinite; }
    /* Open seat filled in 2026 — equally on the ballot, gold accent. */
    .kr-ballot-banner.is-open { background: linear-gradient(100deg, rgba(245,158,11,0.20), rgba(245,158,11,0.05) 58%, transparent); }
    .kr-ballot-banner.is-open::before { background: linear-gradient(#fde68a,#f59e0b); box-shadow: 0 0 14px rgba(245,158,11,0.75); }
    .kr-ballot-banner.is-open .kr-bb-badge { background: linear-gradient(135deg,#fde68a,#f59e0b); color: #2a1903; box-shadow: 0 4px 14px rgba(245,158,11,0.45); }
    .kr-ballot-banner.is-open .kr-bb-title { color: #fcd34d; text-shadow: 0 0 16px rgba(245,158,11,0.4); }
    .kr-ballot-banner.is-open .kr-bb-sub { color: #e3b765; }
    .kr-ballot-banner.is-open .kr-bb-flag { color: #2a1903; background: linear-gradient(135deg,#fde68a,#f59e0b); box-shadow: 0 4px 14px rgba(245,158,11,0.4); animation: krBallotPulse 2.8s ease-in-out infinite; }
    /* A sitting seat NOT up in 2026 — deliberately quiet so it never competes
       with the live-ballot banners, but still clearly legible. */
    .kr-ballot-banner.is-future { background: linear-gradient(100deg, rgba(99,130,180,0.14), transparent 60%); }
    .kr-ballot-banner.is-future::before { background: rgba(129,160,210,0.6); }
    .kr-ballot-banner.is-future .kr-bb-badge { background: rgba(99,130,180,0.22); color: #cfdbef; border: 1px solid rgba(129,160,210,0.45); }
    .kr-ballot-banner.is-future .kr-bb-title { color: #c2d2ea; }
    .kr-ballot-banner.is-future .kr-bb-sub { color: #8ba3c7; }
    .kr-ballot-banner.is-future .kr-bb-flag { color: #cfdbef; background: rgba(99,130,180,0.22); border: 1px solid rgba(129,160,210,0.4); }
    @keyframes krBallotPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }
    @media (prefers-reduced-motion: reduce) { .kr-ballot-banner .kr-bb-flag { animation: none !important; } }
    @media (max-width: 480px) { .kr-ballot-banner .kr-bb-flag { display: none; } }
    /* Emphasis variant of the incumbent status pill used when a seat is NOT on the
       2026 ballot, so "next election" years read as a clear, scannable timing flag
       rather than borrowing the gold of an active re-election pill. Bumped up so the
       per-seat timing on multi-seat races (e.g. the two U.S. Senate seats) is easy
       to read at a glance and the seats never blur together. */
    .kr-inc-status.is-future { color: #e3ecf9; background: rgba(99,130,180,0.22); border: 1px solid rgba(129,160,210,0.6); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.3rem 0.72rem; box-shadow: 0 0 0 1px rgba(129,160,210,0.16); }

    /* Challenger rows — deliberately the secondary tier beneath the gold incumbent
       hero: cooler, flatter and lighter, with a thin blue left rail and slightly
       smaller scores, so the people running to replace the officeholder never
       compete with them for attention. */
    .kr-challenger-card {
      position: relative; padding: 0.75rem 0.9rem 0.8rem 1rem; border-radius: 0.85rem;
      background: rgba(10,15,30,0.42); border: 1px solid rgba(255,255,255,0.06);
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .kr-challenger-card:hover { border-color: rgba(96,165,250,0.3); background: rgba(12,18,34,0.55); }
    .kr-challenger-card::before {
      content: ''; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px;
      border-radius: 999px; background: rgba(96,165,250,0.45);
    }
    .kr-challenger-card.is-pick { background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.35); }
    .kr-challenger-card.is-pick::before { background: linear-gradient(180deg, #4ade80, #22c55e); }
    /* Scores stay legible and comparable across challengers, but a notch smaller
       than the incumbent's so the hierarchy reads at a glance. */
    .kr-challenger-card .kr-score-promise .kr-score-num,
    .kr-challenger-card .kr-score-acct .kr-score-num { font-size: 1.55rem; }
    .kr-challenger-card .kr-score-align .kr-score-num { font-size: 1.4rem; }
    /* Clean "no voting record yet" notice on a brand-new 2026 candidate card —
       a single tidy steel-blue strip that replaces the two empty Promise / Truth
       Score cells, so a challenger with no record reads as intentional and complete
       rather than like a broken card full of "NO RECORD YET" placeholders. */
    .kr-norecord {
      display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 0.6rem;
      border-radius: 0.7rem; padding: 0.6rem 0.7rem;
      background: linear-gradient(135deg, rgba(96,165,250,0.10), rgba(10,15,30,0.35));
      border: 1px dashed rgba(96,165,250,0.42);
    }
    .kr-norecord .kr-norecord-ico { font-size: 1rem; line-height: 1.2; flex-shrink: 0; }
    .kr-norecord .kr-norecord-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
    .kr-norecord .kr-norecord-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.03em; color: #bcd2f0; line-height: 1.2; }
    .kr-norecord .kr-norecord-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 0.64rem; letter-spacing: 0.01em; color: #88a0c4; line-height: 1.35; }

    /* ── District / ballot coverage guidance (Key Races) ─────────────────────
       Helps a voter see at a glance which of the seats on their ballot already
       have someone on their team and which districts still need a pick, and
       makes jumping to an uncovered race one tap. Same dark-navy / gold / green
       patriotic palette as the rest of Key Races. */
    .kr-coverage-panel {
      border-radius: 1.1rem; padding: 1rem 1.15rem; margin: 0.1rem 0 0.35rem;
      background: linear-gradient(135deg, rgba(30,58,138,0.24), rgba(10,15,30,0.5));
      border: 1px solid rgba(96,165,250,0.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .kr-coverage-panel.is-complete {
      background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(10,15,30,0.5));
      border-color: rgba(74,222,128,0.45);
    }
    .kr-cov-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
    .kr-cov-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; font-size: 1.18rem; color: #fff; line-height: 1; }
    .kr-cov-count { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb4d4; white-space: nowrap; }
    .kr-cov-count strong { color: #fcd34d; font-size: 0.98rem; }
    .kr-coverage-panel.is-complete .kr-cov-count strong { color: #86efac; }
    .kr-cov-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.84rem; line-height: 1.4; color: #cbd9ee; margin: 0.4rem 0 0; }
    .kr-cov-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 0.7rem 0 0.2rem; }
    .kr-cov-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fde68a, #f59e0b); transition: width 0.55s cubic-bezier(0.34,1.2,0.64,1); }
    .kr-coverage-panel.is-complete .kr-cov-bar > span { background: linear-gradient(90deg, #86efac, #22c55e); }
    .kr-cov-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
    .kr-cov-chip {
      display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.02em;
      padding: 0.34rem 0.64rem; border-radius: 999px; line-height: 1; min-height: 32px;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .kr-cov-chip:hover { transform: translateY(-1px); }
    .kr-cov-chip.is-covered { color: #9af0b8; background: rgba(34,197,94,0.12); border: 1px solid rgba(74,222,128,0.42); }
    .kr-cov-chip.is-covered:hover { border-color: rgba(74,222,128,0.72); }
    .kr-cov-chip.is-open-gap { color: #fcd34d; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.5); animation: krCovNudge 2.6s ease-in-out infinite; }
    .kr-cov-chip.is-open-gap:hover { border-color: rgba(245,158,11,0.85); background: rgba(245,158,11,0.2); }
    .kr-cov-chip .kr-cov-chip-ico { font-size: 0.8rem; line-height: 1; }
    @keyframes krCovNudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 50% { box-shadow: 0 0 0 3px rgba(245,158,11,0.14); } }
    .kr-cov-cta {
      display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: #06280f; background: linear-gradient(135deg, #86efac, #22c55e); border: none;
      padding: 0.6rem 1rem; border-radius: 0.7rem; box-shadow: 0 4px 16px rgba(34,197,94,0.3);
    }
    .kr-cov-cta:hover { filter: brightness(1.07); }

    /* Per-race coverage ribbon shown inside each race card, directly under the
       ballot banner: a clear, scannable "covered" / "needs a pick" status. */
    .kr-cover-strip {
      display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem;
      border-bottom: 1px solid rgba(255,255,255,0.06); font-family: 'Barlow Condensed', sans-serif;
    }
    .kr-cover-strip .kr-cover-ico { font-size: 0.92rem; line-height: 1; flex-shrink: 0; }
    .kr-cover-strip .kr-cover-text { font-size: 0.74rem; line-height: 1.25; font-weight: 600; min-width: 0; }
    .kr-cover-strip.is-covered { background: linear-gradient(100deg, rgba(34,197,94,0.12), transparent 70%); }
    .kr-cover-strip.is-covered .kr-cover-text { color: #9af0b8; }
    .kr-cover-strip.is-covered .kr-cover-text strong { color: #d7f7e3; }
    .kr-cover-strip.is-gap { background: linear-gradient(100deg, rgba(245,158,11,0.13), transparent 72%); }
    .kr-cover-strip.is-gap .kr-cover-text { color: #fcd34d; }

    /* Highlight a race card when the voter jumps to it from a coverage chip. */
    .kr-race-flash { animation: krRaceFlash 1.5s ease-out; }
    @keyframes krRaceFlash {
      0% { box-shadow: 0 0 0 0 rgba(245,200,66,0); }
      25% { box-shadow: 0 0 0 3px rgba(245,200,66,0.5), 0 0 32px rgba(245,200,66,0.32); }
      100% { box-shadow: 0 0 0 0 rgba(245,200,66,0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .kr-cov-chip.is-open-gap { animation: none; }
      .kr-race-flash { animation: none; }
    }

    /* Two-score strip on each 2026 candidate card:
       Accountability of Truth (purple, prominent) + Personalized Alignment (teal, secondary). */
    .kr-score-strip { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
    .kr-score {
      flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.5rem;
      border-radius: 0.7rem; padding: 0.5rem 0.6rem; cursor: pointer; text-align: left;
      transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .kr-score:hover { transform: translateY(-1px); }
    .kr-score:active { transform: scale(0.985); }
    .kr-score .kr-score-ico { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
    .kr-score .kr-score-num { font-family: 'Bebas Neue', sans-serif; font-weight: 900; line-height: 1; }
    .kr-score .kr-score-meta { display: flex; flex-direction: column; min-width: 0; }
    .kr-score .kr-score-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.15; font-size: 0.62rem; }
    .kr-score .kr-score-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.5rem; letter-spacing: 0.05em; color: #8ea2c0; text-transform: uppercase; line-height: 1.1; }
    .kr-score .kr-score-rating { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.5rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.04rem 0.34rem; border-radius: 999px; white-space: nowrap; align-self: flex-start; margin-top: 0.12rem; }
    /* Accountability of Truth — purple, the prominent objective rating */
    .kr-score-acct { background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(139,92,246,0.06)); border: 1px solid rgba(167,139,250,0.55); box-shadow: 0 4px 16px rgba(124,58,237,0.14), inset 0 1px 0 rgba(255,255,255,0.04); }
    .kr-score-acct .kr-score-num { color: #c4b5fd; font-size: 1.95rem; text-shadow: 0 0 12px rgba(167,139,250,0.45); }
    .kr-score-acct .kr-score-label { color: #c4b5fd; }
    /* Personalized Alignment — teal/cyan, clearly the "your match" secondary score */
    .kr-score-align { background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(45,212,191,0.05)); border: 1px solid rgba(45,212,191,0.5); box-shadow: 0 4px 16px rgba(20,184,166,0.12), inset 0 1px 0 rgba(255,255,255,0.04); }
    .kr-score-align .kr-score-num { color: #5eead4; font-size: 1.7rem; text-shadow: 0 0 12px rgba(45,212,191,0.4); }
    .kr-score-align .kr-score-label { color: #5eead4; }
    /* Promise % — gold/amber, the prominent campaign-promise track record */
    .kr-score-promise { background: linear-gradient(135deg, rgba(245,158,11,0.20), rgba(245,158,11,0.05)); border: 1px solid rgba(245,158,11,0.5); box-shadow: 0 4px 16px rgba(245,158,11,0.12), inset 0 1px 0 rgba(255,255,255,0.04); }
    .kr-score-promise .kr-score-num { font-size: 1.95rem; }
    .kr-score-promise .kr-score-label { color: #fbbf24; }
    /* Prompt cell shown in the alignment slot when no issues are chosen yet */
    .kr-score-setalign { background: rgba(20,184,166,0.07); border: 1px dashed rgba(45,212,191,0.42); justify-content: flex-start; }
    .kr-score-setalign .kr-score-label { color: #7ee7d8; }
    /* Second strip row carries the single full-width alignment cell */
    .kr-score-strip + .kr-score-strip { margin-top: 0.4rem; }
    @media (max-width: 380px) {
      .kr-score { padding: 0.45rem 0.5rem; gap: 0.4rem; }
      .kr-score-promise .kr-score-num { font-size: 1.7rem; }
      .kr-score-acct .kr-score-num { font-size: 1.7rem; }
      .kr-score-align .kr-score-num { font-size: 1.5rem; }
    }

    /* ── Inline personalized alignment on each Key Races candidate card ──
       Prominent, scannable "<n>% Aligned with your issues" bar (teal "your match"
       theme, distinct from the gold Promise % and purple Truth Score), expanding
       an issue-by-issue breakdown in place — no modal, no leaving the section. */
    .kr-align-inline-wrap { margin-top: 0.4rem; }
    .kr-align-inline {
      width: 100%; display: flex; align-items: center; gap: 0.65rem;
      padding: 0.55rem 0.7rem; border-radius: 0.75rem; cursor: pointer; text-align: left;
      background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(45,212,191,0.04));
      border: 1px solid rgba(45,212,191,0.45);
      transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .kr-align-inline:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(45,212,191,0.06)); }
    .kr-align-inline:active { transform: scale(0.99); }
    .kr-align-inline-num { font-family: 'Bebas Neue', sans-serif; font-weight: 900; font-size: 1.85rem; line-height: 0.9; flex-shrink: 0; }
    .kr-align-inline-ico { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
    .kr-align-inline-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .kr-align-inline-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; font-size: 0.74rem; }
    .kr-align-inline-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.56rem; letter-spacing: 0.05em; color: #8ea2c0; text-transform: uppercase; line-height: 1.15; margin-top: 0.05rem; }
    .kr-align-inline-chev { flex-shrink: 0; color: #5eead4; font-size: 0.82rem; line-height: 1; width: 1.55rem; height: 1.55rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.32); transition: transform 0.25s ease, background 0.2s ease; }
    .kr-align-inline:hover .kr-align-inline-chev { background: rgba(45,212,191,0.2); }
    .kr-align-inline-go { flex-shrink: 0; color: #7ee7d8; font-size: 1.25rem; line-height: 1; font-weight: 700; }
    .kr-align-inline-setup { background: rgba(20,184,166,0.06); border: 1px dashed rgba(45,212,191,0.42); }
    .kr-align-inline-setup .kr-align-inline-title { color: #7ee7d8; }
    .kr-align-inline-body {
      margin-top: 0.5rem; padding: 0.7rem 0.75rem 0.6rem; border-radius: 0.7rem;
      background: rgba(8,18,28,0.55); border: 1px solid rgba(45,212,191,0.22);
    }
    .kr-align-issue { margin-bottom: 0.55rem; }
    .kr-align-issue:last-of-type { margin-bottom: 0.3rem; }
    .kr-align-issue-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; color: #cbd9ec; margin-bottom: 0.22rem; }
    .kr-align-issue-bar { height: 6px; background: rgba(10,15,30,0.85); border-radius: 999px; overflow: hidden; }
    .kr-align-inline-more { width: 100%; margin-top: 0.5rem; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7ee7d8; background: rgba(20,184,166,0.1); border: 1px solid rgba(45,212,191,0.34); padding: 0.45rem; border-radius: 0.5rem; }
    .kr-align-inline-more:hover { background: rgba(20,184,166,0.16); }
    /* Quick-adjust issue chips inside an expanded alignment breakdown — tap to
       add or remove an issue and watch the personalized match update in place. */
    .kr-align-adjust { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px dashed rgba(45,212,191,0.22); }
    .kr-align-adjust-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: #7ee7d8; margin-bottom: 0.45rem; }
    .kr-align-chip-row { display: flex; flex-wrap: wrap; gap: 0.32rem; }
    .kr-align-chip {
      display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.02em;
      padding: 0.26rem 0.55rem; border-radius: 999px; line-height: 1.1;
      color: #9fb4d4; background: rgba(10,15,30,0.55); border: 1px solid rgba(159,180,212,0.22);
      transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .kr-align-chip:hover { transform: translateY(-1px); border-color: rgba(45,212,191,0.5); color: #cbeee7; }
    .kr-align-chip:active { transform: scale(0.96); }
    .kr-align-chip .kr-align-chip-mark { font-weight: 800; opacity: 0.85; }
    .kr-align-chip.on { color: #5eead4; background: rgba(20,184,166,0.16); border-color: rgba(45,212,191,0.6); }
    /* Colour-coded "Strong / Partial / Weak match" pill next to the score, so the
       number's meaning reads instantly without doing the mental math. */
    .kr-align-inline-badge { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.07rem 0.42rem; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
    /* Slim progress bar under the title — a visual read of the % at a glance. */
    .kr-align-mini { height: 5px; border-radius: 999px; background: rgba(10,15,30,0.7); overflow: hidden; margin-top: 0.3rem; }
    .kr-align-mini > div { height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
    /* "Across <your issues>" line so it is always clear WHAT the score measures. */
    .kr-align-issues-line { font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: 0.04em; color: #8ea2c0; text-transform: uppercase; line-height: 1.25; margin-top: 0.32rem; }
    .kr-align-issues-line b { color: #9fdbd0; font-weight: 700; }
    .kr-align-issues-line .kr-align-edit { color: #5eead4; font-weight: 700; }
    /* Header row inside the expanded quick-adjust block. */
    .kr-align-adjust-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; }
    .kr-align-adjust-count { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; color: #5eead4; background: rgba(20,184,166,0.14); border: 1px solid rgba(45,212,191,0.4); border-radius: 999px; padding: 0.04rem 0.42rem; white-space: nowrap; }
    @media (max-width: 380px) {
      .kr-align-inline-num { font-size: 1.6rem; }
    }


    /* ── Prominent "Your Match" band on My Voting Team slot cards ──
       The personalized fit, made glanceable on each filled slot: a big colour-coded
       %, a Strong / Partial / Weak word and a mini bar. Tappable into the full
       issue-by-issue breakdown. Sits below the Promise Score so the two reads never
       compete. */
    .myteam-slot-match {
      width: 90%; margin: 0.1rem auto 0.5rem; display: flex; align-items: center; gap: 0.5rem;
      padding: 0.4rem 0.55rem; border-radius: 0.6rem; cursor: pointer; text-align: left;
      background: linear-gradient(135deg, rgba(45,212,191,0.05), rgba(20,184,166,0.02));
      border: 1px solid rgba(45,212,191,0.4);
      transition: transform 0.12s ease, background 0.2s ease;
    }
    .myteam-slot-match:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(45,212,191,0.1), rgba(20,184,166,0.03)); }
    .myteam-slot-match:active { transform: scale(0.99); }
    .myteam-slot-match-num { font-family: 'Bebas Neue', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 0.85; flex-shrink: 0; }
    .myteam-slot-match-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
    .myteam-slot-match-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: #9fdbd0; line-height: 1; }
    .myteam-slot-match-bar { height: 4px; border-radius: 999px; background: rgba(10,15,30,0.7); overflow: hidden; }
    .myteam-slot-match-bar > span { display: block; height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
    @keyframes alignFabPulse {
      0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 0 rgba(139,92,246,0.5); }
      50% { box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 9px rgba(139,92,246,0); }
    }



    /* Personalized-alignment quick-view modal (opened from the Align button) */
    .kraq-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(2,6,18,0.86); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.2s ease; }
    .kraq-card { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, rgba(17,24,46,0.98), rgba(10,15,30,0.98)); border: 1px solid rgba(45,212,191,0.32); border-radius: 1.1rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(20,184,166,0.12); }
    .kraq-issue-row { margin-bottom: 0.7rem; }
    .kraq-issue-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; color: #cbd9ec; margin-bottom: 0.28rem; }
    .kraq-issue-bar { height: 7px; background: rgba(10,15,30,0.85); border-radius: 999px; overflow: hidden; }
    /* At-a-glance match tally above the issue list — strong / partial / gap counts. */
    .kraq-tally-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
    .kraq-tally { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.04em; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
    .kraq-tally-good { color: #6ee7b7; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); }
    .kraq-tally-mid  { color: #fcd34d; background: rgba(234,179,8,0.1); border-color: rgba(234,179,8,0.38); }
    .kraq-tally-bad  { color: #fca5a5; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.4); }
    /* Per-issue weighting badge — shows how the voter prioritized each position. */
    .kraq-int { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; }
    .kraq-int-strong { color: #c4b5fd; background: rgba(139,92,246,0.16); border: 1px solid rgba(139,92,246,0.4); }
    .kraq-int-opp { color: #fca5a5; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); }
    .kraq-int-neutral { color: #cbd5e1; background: rgba(148,163,184,0.14); border: 1px solid rgba(148,163,184,0.4); }
    /* Sub-headers that split the breakdown into agreement vs. gaps — a voter sees
       at a glance which issues to back the candidate on and where they trade off. */
    .kraq-group-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0.55rem 0 0.6rem; padding-top: 0.55rem; border-top: 1px solid rgba(255,255,255,0.07); }
    .kraq-group-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }

    /* "📍 Stated position" badge — flags a breakdown row whose score rests on a
       documented, sourced position on that exact issue (vs. one inferred from the
       broader record). Teal to read as part of the personalized-alignment family. */
    .kraq-doc-badge { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase; color: #5eead4; background: rgba(45,212,191,0.16); border: 1px solid rgba(45,212,191,0.45); border-radius: 999px; padding: 0.02rem 0.36rem; margin-left: 0.34rem; vertical-align: middle; white-space: nowrap; }
    /* The candidate's own one-line stance, shown under a documented breakdown row so
       the voter reads WHERE the candidate stands, not just the match number. */
    .kraq-issue-stance { font-size: 0.62rem; color: #9fb4d4; line-height: 1.5; margin: 0.35rem 0 0; }
    /* Stance + power signal row — the at-a-glance "where they stand / what levers
       they hold" line under each issue bar. Reuses the Evidence Locker's own
       .el-cstance (green/red/amber) and .el-power-badge (gold) chips so the signal
       reads identically in the Alignment Tool and the Locker. */
    .kraq-signal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.45rem 0 0; }
    /* Strong-signals summary above the issue list — a quick read on how much of the
       match rests on documented stances and real positional power. Teal 📍 for
       documented stance (the personalized-alignment family), gold ⚡ for power, so
       it sits beside the match tally without competing with it. */
    .kraq-sig-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.4rem 0 0.85rem; }
    .kraq-sig { display: inline-flex; align-items: center; gap: 0.28rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
    .kraq-sig-doc   { color: #5eead4; background: rgba(45,212,191,0.12); border-color: rgba(45,212,191,0.4); }
    .kraq-sig-power { color: #ffdf7a; background: rgba(245,200,66,0.16); border-color: rgba(245,200,66,0.5); }
    /* Per-row jump into the Evidence Locker for this exact position — the bridge from
       a match score to the documents behind it. Blue to read as "Evidence" (matching
       the 📂 Evidence nav + locker links) rather than the teal alignment chrome. */
    .kraq-ev-link { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; margin: 0.4rem 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; color: #93c5fd; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.38); border-radius: 999px; padding: 0.2rem 0.55rem; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease; }
    .kraq-ev-link strong { color: #dbeafe; font-weight: 800; }
    @media (hover: hover) { .kraq-ev-link:hover { background: rgba(59,130,246,0.2); border-color: rgba(96,165,250,0.7); color: #dbeafe; transform: translateY(-1px); } }
    .kraq-ev-link:active { transform: translateY(0) scale(0.97); }
    .kraq-ev-link:focus-visible { outline: 2px solid rgba(96,165,250,0.8); outline-offset: 1px; }
    /* Person-level "see everything on record" jump above the modal action row. */
    .kraq-ev-all { display: block; width: 100%; cursor: pointer; margin: 0 0 1rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: #bfdbfe; background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(30,58,138,0.18)); border: 1px solid rgba(59,130,246,0.45); border-radius: 0.6rem; padding: 0.6rem 0.7rem; transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease; }
    .kraq-ev-all strong { color: #fff; font-weight: 800; }
    @media (hover: hover) { .kraq-ev-all:hover { background: linear-gradient(135deg, rgba(59,130,246,0.26), rgba(30,58,138,0.28)); border-color: rgba(96,165,250,0.7); transform: translateY(-1px); } }
    .kraq-ev-all:active { transform: translateY(0) scale(0.99); }
    .kraq-ev-all:focus-visible { outline: 2px solid rgba(96,165,250,0.8); outline-offset: 1px; }
    /* Issue-discovery panel — the candidate's documented positions the visitor has
       NOT picked yet, offered as tap-to-add chips. Makes available issues visible and
       turns the breakdown into a place to broaden the comparison. */
    .kraq-avail { margin-top: 1rem; padding: 0.85rem 0.9rem; background: rgba(45,212,191,0.06); border: 1px solid rgba(45,212,191,0.24); border-radius: 0.8rem; }
    .kraq-avail-head { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.02em; color: #7ee7d8; line-height: 1.3; }
    .kraq-avail-sub { font-size: 0.64rem; color: #9fb4d4; line-height: 1.45; margin-top: 0.15rem; }
    .kraq-avail-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
    .kraq-avail-chip { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.7rem; color: #cdeee8; background: rgba(20,184,166,0.1); border: 1px solid rgba(45,212,191,0.35); border-radius: 999px; padding: 0.28rem 0.6rem; transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease; }
    @media (hover: hover) { .kraq-avail-chip:hover { background: rgba(20,184,166,0.2); border-color: rgba(45,212,191,0.6); transform: translateY(-1px); } }
    .kraq-avail-chip:active { transform: translateY(0) scale(0.97); }
    .kraq-avail-st { font-size: 0.66rem; color: #5eead4; font-weight: 800; }
    .kraq-avail-plus { font-size: 0.78rem; color: #5eead4; font-weight: 800; margin-left: 0.1rem; }
    /* "Build Your Match" discovery view — the popular-issue fallback row shown under
       a candidate's documented positions so even a thin profile offers a way in. */
    .kraq-disc-quick { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed rgba(159,180,212,0.18); }
    .kraq-disc-quick-head { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.03em; color: #9fb4d4; margin-bottom: 0.1rem; }

    /* Dynamic "Spotlight" quick-view (opened from the new per-candidate Spotlight
       button). Gold patriotic theme to match the site's SPOTLIGHT REPORT styling. */
    .kr-spot-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(2,6,18,0.86); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.2s ease; }
    .kr-spot-card { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, rgba(22,18,8,0.98), rgba(10,15,30,0.98)); border: 1px solid rgba(245,200,66,0.34); border-radius: 1.1rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(245,200,66,0.12); }
    .kr-spot-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; }
    .kr-spot-badge.news { color: #93c5fd; background: rgba(59,130,246,0.14); border: 1px solid rgba(96,165,250,0.4); }
    .kr-spot-badge.flag { color: #fca5a5; background: rgba(248,113,113,0.14); border: 1px solid rgba(248,113,113,0.45); }
    .kr-spot-badge.vote { color: #5eead4; background: rgba(20,184,166,0.14); border: 1px solid rgba(45,212,191,0.45); }
    .kr-spot-badge.position, .kr-spot-badge.monitoring { color: #f5c842; background: rgba(245,200,66,0.14); border: 1px solid rgba(245,200,66,0.42); }
    .kr-spot-badge.newcomer { color: #c4b5fd; background: rgba(139,92,246,0.14); border: 1px solid rgba(167,139,250,0.45); }

    /* ── At-a-glance Spotlight preview strip on each Key Races card ──
       Surfaces the single most timely item (recent news, a red flag, a key
       vote, or a signature stance) right on the card so voters grasp it without
       tapping. Tap opens the full Spotlight modal with detail + source. The
       left rail and badge colour change by item kind so a red flag reads
       differently from routine news at a glance, while staying on the gold
       patriotic theme. */
    .kr-spot-preview {
      width: 100%; display: flex; align-items: center; gap: 0.55rem;
      padding: 0.5rem 0.7rem; border-radius: 0.8rem; cursor: pointer; text-align: left; margin-top: 0.4rem;
      background: linear-gradient(135deg, rgba(245,200,66,0.13), rgba(245,200,66,0.03));
      border: 1px solid rgba(245,200,66,0.4); border-left: 3px solid rgba(245,200,66,0.85);
      transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
    }
    .kr-spot-preview:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(245,200,66,0.19), rgba(245,200,66,0.05)); }
    .kr-spot-preview:active { transform: scale(0.99); }
    .kr-spot-preview .kr-spot-prev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
    .kr-spot-prev-badge { display: flex; align-items: center; gap: 0.35rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: #f5c842; }
    .kr-spot-prev-date { color: #9a8a55; font-weight: 600; letter-spacing: 0.04em; }
    .kr-spot-prev-text { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; line-height: 1.2; color: #ece2c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kr-spot-prev-cta { flex-shrink: 0; font-size: 0.95rem; line-height: 1; opacity: 0.85; }
    .kr-spot-preview.flag { background: linear-gradient(135deg, rgba(248,113,113,0.13), rgba(248,113,113,0.03)); border-color: rgba(248,113,113,0.4); border-left-color: rgba(248,113,113,0.85); }
    .kr-spot-preview.flag .kr-spot-prev-badge { color: #fca5a5; }
    .kr-spot-preview.flag .kr-spot-live { background: #f87171; box-shadow: 0 0 0 0 rgba(248,113,113,0.6); }
    .kr-spot-preview.news { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.03)); border-color: rgba(96,165,250,0.38); border-left-color: rgba(96,165,250,0.8); }
    .kr-spot-preview.news .kr-spot-prev-badge { color: #93c5fd; }
    .kr-spot-preview.news .kr-spot-live { background: #60a5fa; box-shadow: 0 0 0 0 rgba(96,165,250,0.6); }
    .kr-spot-preview.vote { background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(20,184,166,0.03)); border-color: rgba(45,212,191,0.4); border-left-color: rgba(45,212,191,0.8); }
    .kr-spot-preview.vote .kr-spot-prev-badge { color: #5eead4; }
    .kr-spot-preview.vote .kr-spot-live { background: #2dd4bf; box-shadow: 0 0 0 0 rgba(45,212,191,0.6); }
    .kr-spot-preview.newcomer { background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.03)); border-color: rgba(167,139,250,0.4); border-left-color: rgba(167,139,250,0.8); }
    .kr-spot-preview.newcomer .kr-spot-prev-badge { color: #c4b5fd; }
    .kr-spot-preview.newcomer .kr-spot-live { background: #a78bfa; box-shadow: 0 0 0 0 rgba(167,139,250,0.6); }

    /* Clean, non-interactive status note shown in place of the Spotlight strip for
       genuinely low-information politicians — a brand-new 2026 candidate with no
       record yet, or an officeholder whose voting record is still being compiled.
       It keeps the card complete and on-theme without faking a "tap for the story"
       spotlight that would open a near-empty modal. Same card slot, same width and
       rounding as the spotlight strip, so every card stays structurally consistent. */
    .kr-spot-status {
      width: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.5rem;
      padding: 0.5rem 0.7rem; border-radius: 0.8rem; margin-top: 0.4rem;
      background: linear-gradient(135deg, rgba(148,163,184,0.10), rgba(148,163,184,0.02));
      border: 1px solid rgba(148,163,184,0.26); border-left: 3px solid rgba(148,163,184,0.6);
    }
    .kr-spot-status-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: #b8c4d6; white-space: nowrap; }
    .kr-spot-status-text { font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; line-height: 1.3; color: #9fb4d4; }
    .kr-spot-status.newcomer { background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02)); border-color: rgba(167,139,250,0.28); border-left-color: rgba(167,139,250,0.7); }
    .kr-spot-status.newcomer .kr-spot-status-badge { color: #c4b5fd; }
    .kr-spot-status.monitoring { background: linear-gradient(135deg, rgba(96,165,250,0.10), rgba(96,165,250,0.02)); border-color: rgba(96,165,250,0.28); border-left-color: rgba(96,165,250,0.7); }
    .kr-spot-status.monitoring .kr-spot-status-badge { color: #93c5fd; }

    @media (max-width: 560px) {
      .team-add-toast {
        top: calc(0.75rem + env(safe-area-inset-top, 0px));
        left: 0.75rem; right: 0.75rem; min-width: 0; max-width: none;
        transform: translateY(-170%) scale(0.98);
      }
      .team-add-toast.visible { transform: translateY(0) scale(1); }
    }

    .account-save-toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(120%);
      background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(37,99,235,0.95));
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 0.65rem 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(59,130,246,0.3);
      z-index: 10001;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s;
      opacity: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .account-save-toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    .signin-prompt-toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(120%);
      background: linear-gradient(135deg, rgba(30,53,96,0.97), rgba(22,39,74,0.97));
      border: 1px solid rgba(245,158,11,0.35);
      color: #e2e8f0;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 0.7rem 1.2rem;
      border-radius: 0.75rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(245,158,11,0.12);
      z-index: 10001;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s;
      opacity: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .signin-prompt-toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .signin-prompt-toast .signin-prompt-btn {
      background: linear-gradient(135deg, #c0152a, #a0111f);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.35rem 0.8rem;
      border-radius: 0.5rem;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s, transform 0.15s;
      min-height: 32px;
    }
    .claim-success-toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(120%);
      background: linear-gradient(135deg, rgba(74,222,128,0.95), rgba(52,211,153,0.95));
      color: #0a0f1e;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 0.7rem 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(74,222,128,0.3);
      z-index: 10002;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s;
      opacity: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      max-width: 90vw;
      text-align: center;
    }
    .claim-success-toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    .claim-signin-toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(120%);
      background: linear-gradient(135deg, rgba(30,53,96,0.97), rgba(22,39,74,0.97));
      border: 1px solid rgba(245,158,11,0.35);
      color: #e2e8f0;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 0.7rem 1.2rem;
      border-radius: 0.75rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(245,158,11,0.12);
      z-index: 10002;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s;
      opacity: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      max-width: 90vw;
    }
    .claim-signin-toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .claim-signin-toast .signin-prompt-btn {
      background: rgba(245,158,11,0.2);
      border: 1px solid rgba(245,158,11,0.4);
      color: #fbbf24;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 0.35rem 0.9rem;
      border-radius: 0.5rem;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s, border-color 0.2s;
    }
    .claim-signin-toast .signin-prompt-btn:hover {
      background: rgba(245,158,11,0.35);
      border-color: rgba(245,158,11,0.6);
    }
    .signin-prompt-toast .signin-prompt-btn:hover {
      background: linear-gradient(135deg, #d91a31, #c0152a);
      transform: scale(1.04);
    }
    .myteam-empty-prompt {
      text-align: center;
      padding: 1.25rem 1rem;
      position: relative;
      z-index: 1;
    }
    .myteam-empty-inner {
      background: linear-gradient(135deg, rgba(30,53,96,0.18) 0%, rgba(10,15,30,0.6) 100%);
      border: 2px dashed rgba(255,255,255,0.08);
      border-radius: 1rem;
      padding: 1.5rem 1.25rem;
      transition: border-color 0.3s, background 0.3s;
    }
    .myteam-empty-inner:hover {
      border-color: rgba(192,21,42,0.25);
      background: linear-gradient(135deg, rgba(30,53,96,0.25) 0%, rgba(10,15,30,0.7) 100%);
    }
    .myteam-empty-icons {
      display: flex;
      justify-content: center;
      gap: 0.6rem;
      font-size: 1.5rem;
      margin-bottom: 0.6rem;
      opacity: 0.7;
    }
    .ballot-race-edu {
      background: rgba(10,15,30,0.7);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1rem;
      padding: 1.25rem;
      transition: border-color 0.3s, box-shadow 0.3s;
      margin-bottom: 0.75rem;
    }
    .ballot-race-edu:hover {
      border-color: rgba(192,21,42,0.25);
    }
    .ballot-race-edu.race-filled {
      border-color: rgba(74,222,128,0.3);
      box-shadow: 0 0 14px rgba(74,222,128,0.06);
    }
    .ballot-race-edu-desc {
      font-family: 'Barlow', sans-serif;
      font-size: 0.78rem;
      color: #7894b8;
      line-height: 1.55;
      margin-bottom: 0.75rem;
      padding-left: 0.75rem;
      border-left: 2px solid rgba(192,21,42,0.25);
    }
    .ballot-cand-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 0.5rem;
    }
    .ballot-cand-card {
      background: rgba(30,53,96,0.3);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 0.75rem;
      padding: 0.55rem 0.6rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.25s cubic-bezier(0.34,1.4,0.64,1);
    }
    .ballot-cand-card:hover {
      border-color: rgba(192,21,42,0.4);
      background: rgba(30,53,96,0.5);
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    }
    .ballot-cand-card:active {
      transform: scale(0.97);
      transition: transform 0.1s;
    }
    .ballot-cand-card.cand-selected {
      border-color: rgba(74,222,128,0.5);
      background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(10,15,30,0.9));
      box-shadow: 0 0 20px rgba(74,222,128,0.1), 0 4px 12px rgba(0,0,0,0.2);
    }
    .ballot-cand-photo {
      width: 34px; height: 34px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.12);
      background: rgba(30,53,96,0.5);
    }
    .ballot-cand-card.cand-selected .ballot-cand-photo {
      border-color: rgba(74,222,128,0.5);
    }
    .ballot-cand-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
    }
    /* ── Ballot candidate "why" text and profile button ── */
    .ballot-cand-why {
      font-size: 0.52rem;
      color: #7596c0;
      line-height: 1.3;
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ballot-cand-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      flex-shrink: 0;
    }
    .ballot-profile-btn {
      background: none;
      border: 1px solid rgba(96,165,250,0.3);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      padding: 0.15rem 0.4rem;
      border-radius: 0.3rem;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .ballot-profile-btn:hover {
      background: rgba(96,165,250,0.15);
      border-color: rgba(96,165,250,0.6);
      color: #bfdbfe;
    }
    .myteam-card-btns {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 4px;
      flex-wrap: wrap;
    }
    .myteam-profile-btn {
      background: linear-gradient(135deg, rgba(96,165,250,0.12), rgba(96,165,250,0.05));
      border: 1px solid rgba(96,165,250,0.35);
      color: #93c5fd;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 0.2rem 0.5rem;
      border-radius: 0.35rem;
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
    }
    .myteam-profile-btn:hover {
      background: linear-gradient(135deg, rgba(96,165,250,0.25), rgba(96,165,250,0.12));
      border-color: rgba(96,165,250,0.7);
      color: #bfdbfe;
      transform: translateY(-1px);
    }
    /* ── Card selection animation ─── */
    .ballot-cand-card {
      transition: all 0.3s cubic-bezier(0.34,1.4,0.64,1);
    }
    .ballot-cand-card.cand-selected {
      animation: ballot-select-pop 0.35s ease-out;
    }
    @keyframes ballot-select-pop {
      0% { transform: scale(0.96); }
      50% { transform: scale(1.03); }
      100% { transform: scale(1); }
    }

    /* ── Trending Reforms Carousel ────────────────────────── */
    .tr-carousel-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 1.25rem;
      background: linear-gradient(135deg, rgba(10,15,30,0.97) 0%, rgba(16,25,50,0.95) 100%);
      border: 1px solid rgba(192,21,42,0.25);
      box-shadow: 0 0 50px rgba(192,21,42,0.08), 0 20px 60px rgba(0,0,0,0.5);
    }
    .tr-carousel-wrap::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #c0152a 0%, #fff 40%, #1e3a8a 70%, #c0152a 100%);
      background-size: 200% auto;
      animation: shimmer 3s linear infinite;
      z-index: 2;
    }
    .tr-track {
      display: flex;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .tr-slide {
      min-width: 100%;
      padding: 2rem 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    @media (max-width: 640px) {
      .tr-slide { padding: 1.25rem 1rem; }
    }
    .tr-slide-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1.5rem;
      align-items: center;
    }
    @media (max-width: 768px) {
      .tr-slide-inner { grid-template-columns: 1fr; }
    }
    .tr-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.4rem, 4vw, 2rem);
      letter-spacing: 0.06em;
      color: #fff;
      line-height: 1.15;
    }
    .tr-desc {
      font-family: 'Barlow', sans-serif;
      font-size: 0.88rem;
      color: #9fb4d4;
      line-height: 1.6;
    }
    .tr-urgency {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.3rem 0.7rem;
      border-radius: 9999px;
    }
    .tr-urgency-high {
      background: rgba(245,200,66,0.15);
      border: 1px solid rgba(245,200,66,0.35);
      color: #f5c842;
    }
    .tr-urgency-growing {
      background: rgba(74,222,128,0.12);
      border: 1px solid rgba(74,222,128,0.3);
      color: #4ade80;
    }
    .tr-urgency-rising {
      background: rgba(96,165,250,0.12);
      border: 1px solid rgba(96,165,250,0.3);
      color: #60a5fa;
    }
    .tr-urgency-critical {
      background: rgba(248,113,113,0.15);
      border: 1px solid rgba(248,113,113,0.35);
      color: #f87171;
    }
    .tr-btns {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
    }
    .tr-btn-learn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.55rem 1.1rem;
      border-radius: 0.6rem;
      border: 1px solid rgba(192,21,42,0.4);
      color: #f87171;
      background: rgba(192,21,42,0.08);
      cursor: pointer;
      transition: all 0.2s;
      text-decoration: none;
      min-height: 38px;
    }
    .tr-btn-learn:hover { background: rgba(192,21,42,0.2); border-color: rgba(192,21,42,0.7); color: #fff; }
    .tr-btn-support {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.55rem 1.1rem;
      border-radius: 0.6rem;
      border: none;
      color: #fff;
      background: linear-gradient(135deg, #c0152a, #991b1b);
      cursor: pointer;
      transition: all 0.2s;
      min-height: 38px;
      box-shadow: 0 0 15px rgba(192,21,42,0.25);
    }
    .tr-btn-support:hover { background: linear-gradient(135deg, #d91a31, #b91c1c); box-shadow: 0 0 25px rgba(192,21,42,0.45); transform: translateY(-1px); }
    .tr-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      padding-bottom: 1.2rem;
    }
    .tr-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer;
      transition: all 0.3s;
    }
    .tr-dot.active {
      background: #c0152a;
      border-color: rgba(192,21,42,0.6);
      box-shadow: 0 0 8px rgba(192,21,42,0.5);
      transform: scale(1.2);
    }
    .tr-dot:hover:not(.active) { background: rgba(255,255,255,0.3); }
    .tr-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 50%;
      background: rgba(10,15,30,0.85);
      border: 1px solid rgba(255,255,255,0.12);
      color: #9fb4d4;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      min-height: unset;
      backdrop-filter: blur(6px);
    }
    .tr-nav-btn:hover { background: rgba(192,21,42,0.3); border-color: rgba(192,21,42,0.5); color: #fff; }
    .tr-nav-prev { left: 0.6rem; }
    .tr-nav-next { right: 0.6rem; }
    .tr-propose-wrap {
      display: flex;
      justify-content: center;
      padding: 0 2.5rem 1.5rem;
    }
    @media (max-width: 640px) { .tr-propose-wrap { padding: 0 1rem 1.2rem; } }
    .tr-propose-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.6rem 1.6rem;
      border-radius: 0.7rem;
      border: 1px dashed rgba(245,200,66,0.4);
      color: #f5c842;
      background: rgba(245,200,66,0.06);
      cursor: pointer;
      transition: all 0.25s;
    }
    .tr-propose-btn:hover {
      background: rgba(245,200,66,0.14);
      border-color: rgba(245,200,66,0.7);
      color: #fff;
      box-shadow: 0 0 20px rgba(245,200,66,0.15);
    }
    .tr-progress-bar {
      position: absolute;
      bottom: 0; left: 0;
      height: 2px;
      background: linear-gradient(90deg, #c0152a, #f87171);
      transition: width 0.1s linear;
      z-index: 3;
    }
    .tr-rank-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.25rem 0.6rem;
      border-radius: 0.4rem;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      color: #9fb4d4;
    }
    .tr-vote-count {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      color: #4ade80;
      line-height: 1;
    }
    .tr-vote-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #64748b;
    }
    .tr-stat-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.8rem 1.2rem;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 0.8rem;
      gap: 0.2rem;
    }

    /* ══════════════════════════════════════════════════════════
       FINAL POLISH PASS v2
       ══════════════════════════════════════════════════════════ */

    /* ── Unified transition timing ────────────────────────── */
    .pm-btn-profile, .pm-btn-compare, .like-btn, .bp-compare-btn,
    .chub-add-btn, .mypol-star, .pm-filter-chip, .rh-chip,
    .tr-btn-learn, .tr-btn-support, .veh-tool-card, .btn-glow,
    .tr-nav-btn, .tr-dot, .mypol-remove-btn,
    .rh-reset-btn, .tr-propose-btn {
      transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Consistent button active state ───────────────────── */
    .pm-btn-profile:active, .pm-btn-compare:active,
    .chub-add-btn:active, .chub-launch-btn:active,
    .tr-btn-learn:active, .tr-btn-support:active,
    .btn-glow:active, .tr-propose-btn:active,
    .mypol-remove-btn:active, .rh-reset-btn:active,
    .tr-nav-btn:active {
      transform: scale(0.96);
      transition-duration: 0.08s;
    }

    /* ── Enhanced button hover glows ──────────────────────── */
    @media (hover: hover) {
      .btn-glow:hover {
        box-shadow: 0 0 20px rgba(192,21,42,0.5), 0 0 40px rgba(192,21,42,0.15), 0 4px 12px rgba(0,0,0,0.3);
        transform: translateY(-2px);
      }
      .pm-btn-profile:hover {
        box-shadow: 0 4px 18px rgba(192,21,42,0.4), 0 0 8px rgba(192,21,42,0.15);
        transform: translateY(-1px);
      }
      .like-btn:hover {
        box-shadow: 0 0 14px rgba(74,222,128,0.18), 0 2px 8px rgba(0,0,0,0.2);
        transform: translateY(-1px);
      }
      .tr-btn-support:hover {
        box-shadow: 0 0 24px rgba(192,21,42,0.45), 0 6px 16px rgba(0,0,0,0.35);
        transform: translateY(-2px);
      }
      .tr-btn-learn:hover {
        box-shadow: 0 0 14px rgba(192,21,42,0.2), 0 4px 12px rgba(0,0,0,0.25);
        transform: translateY(-1px);
      }
      .chub-launch-btn:hover {
        box-shadow: 0 10px 36px rgba(0,0,0,0.55), 0 0 32px rgba(59,130,246,0.3);
        transform: translateY(-2px);
      }
      .veh-tool-card:hover {
        box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 0 16px rgba(192,21,42,0.1);
        transform: translateY(-3px);
      }
      .mypol-remove-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(239,68,68,0.15);
      }
      .tr-propose-btn:hover {
        transform: translateY(-2px);
      }
      .rh-reset-btn:hover {
        transform: translateY(-1px);
      }
      .agenda-vote-up:hover, .agenda-vote-down:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
      }
    }

    /* ── Filter chip polish ───────────────────────────────── */
    .pm-filter-chip {
      transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    }
    @media (hover: hover) {
      .pm-filter-chip:hover {
        box-shadow: 0 0 12px rgba(192,21,42,0.22), 0 3px 8px rgba(0,0,0,0.25);
        transform: translateY(-2px);
      }
      .pm-filter-chip.active:hover {
        box-shadow: 0 0 16px rgba(192,21,42,0.35);
      }
    }
    .rh-chip {
      transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    }
    @media (hover: hover) {
      .rh-chip:hover {
        box-shadow: 0 0 10px rgba(192,21,42,0.22);
        transform: translateY(-1px);
      }
    }

    /* ── Card glow refinements ─────────────────────────────── */
    .pm-card {
      transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.28s ease, border-color 0.28s ease;
    }
    .card-holo {
      transition: transform 0.32s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.32s ease;
    }

    /* ── Tracker card photo polish ─────────────────────────── */
    .tracker-hs {
      transition: border-color 0.28s ease, box-shadow 0.28s ease;
    }
    @media (hover: hover) {
      .card-holo:hover .tracker-hs {
        border-color: rgba(192,21,42,0.4) !important;
        box-shadow: 0 3px 14px rgba(0,0,0,0.45), 0 0 10px rgba(192,21,42,0.14);
      }
    }

    /* ── Photo placeholder styling ─────────────────────────── */
    .pm-card-photo-placeholder, .dir-card-photo-placeholder {
      background: linear-gradient(135deg, rgba(30,53,96,0.7), rgba(10,15,30,0.8));
      font-size: 1.4rem;
    }
    .pm-card-photo img, .dir-card-photo img, .tracker-hs img, .modal-headshot img {
      transition: opacity 0.35s ease;
    }

    /* ── Section divider fade transitions ──────────────────── */
    section + section {
      position: relative;
    }

    /* ── Improved mobile responsiveness ────────────────────── */
    @media (max-width: 640px) {
      .pm-sub-cards {
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }
      .pm-card-inner {
        padding: 0.75rem;
      }
      .pm-card-name {
        font-size: 0.95rem;
      }
      .pm-card-photo {
        width: 44px;
        height: 44px;
      }
      .pm-card-score {
        font-size: 1.35rem;
      }
      .pm-tier-header {
        padding: 0.75rem 1rem;
      }
      .pm-tier-title {
        font-size: 1rem;
        gap: 0.45rem;
      }
      .pm-tier-badge {
        font-size: 0.5rem;
        padding: 0.15rem 0.45rem;
      }
      .tr-slide {
        padding: 1.25rem 1rem;
      }
      .tr-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
      }
      .tr-desc {
        font-size: 0.82rem;
      }
      .tr-btns {
        gap: 0.4rem;
      }
      .tr-btn-learn, .tr-btn-support {
        font-size: 0.65rem;
        padding: 0.5rem 0.8rem;
        min-height: 36px;
      }
      .card-holo .px-4 { padding-left: 0.875rem; padding-right: 0.875rem; }
      .card-holo .sm\:px-5 { padding-left: 0.875rem; padding-right: 0.875rem; }
      #modal-panel {
        max-width: 100%;
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        max-height: 95vh;
      }
      .modal-headshot {
        width: 100px;
        height: 100px;
        border-radius: 0.75rem;
      }
      .chub-card {
        padding: 0.75rem;
      }
      .chub-launch-btn {
        font-size: 0.78rem;
        padding: 0.7rem 1.5rem;
      }
      .veh-tool-card {
        padding: 0.875rem;
      }
      .veh-tool-card .veh-icon {
        font-size: 1.4rem;
      }
      .veh-tool-card .veh-label {
        font-size: 0.88rem;
      }
      .pm-filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.3rem;
      }
      .pm-filter-chips::-webkit-scrollbar { display: none; }
      .pm-filter-chip {
        flex-shrink: 0;
      }
      .pm-location-bar {
        padding: 0.75rem 1rem;
      }
      .pm-loc-select {
        font-size: 0.75rem;
        padding: 0.45rem 0.65rem;
      }
      .wealth-card {
        padding: 0.875rem;
      }
      .section-title {
        font-size: clamp(1.8rem, 8vw, 3rem);
      }
      #mobileMenu a {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
      }
      /* Mission section mobile */
      #our-mission .grid { gap: 0.75rem; }
      #our-mission .grid > a { padding: 1.25rem; }
      #our-mission .grid > a h4 { font-size: 0.95rem; }
      /* Footer mobile */
      footer .grid { gap: 1.25rem; }
    }

    @media (max-width: 380px) {
      .pm-card-photo {
        width: 38px;
        height: 38px;
      }
      .pm-card-name {
        font-size: 0.88rem;
      }
      .pm-card-office {
        font-size: 0.55rem;
      }
      .pm-btn-profile {
        font-size: 0.55rem;
        padding: 0.38rem 0;
      }
      .pm-btn-compare {
        font-size: 0.55rem;
        padding: 0.38rem 0.45rem;
      }
      .pm-card-impact {
        font-size: 0.62rem;
      }
      .tr-title {
        font-size: 1.1rem;
      }
    }

    /* ── Tighter visual hierarchy ──────────────────────────── */
    .promise-row {
      transition: background 0.2s ease;
    }
    .vr-row {
      transition: background 0.2s ease;
    }

    /* ── Smooth scroll targets ─────────────────────────────── */
    [id] {
      scroll-margin-top: 80px;
    }

    /* ── Section spacing refinement ────────────────────────── */
    .section-py {
      padding-top: 3.5rem;
      padding-bottom: 3.5rem;
    }
    @media (min-width: 768px) {
      .section-py {
        padding-top: 5rem;
        padding-bottom: 5rem;
      }
    }

    /* ── Compare overlay mobile ────────────────────────────── */
    @media (max-width: 640px) {
      #compare-float-btn {
        bottom: 1rem;
        font-size: 0.72rem;
        padding: 0.6rem 1rem;
      }
      #cmp-header {
        padding: 0.75rem 0.875rem;
      }
      .cmp-col-header { gap: 0.35rem; }
    }

    /* ── Premium feel: text-shadow on titles ───────────────── */
    .section-title {
      text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 0 8px rgba(192,21,42,0.06);
    }
    .hero-title {
      text-shadow: 0 4px 48px rgba(0,0,0,0.55), 0 0 16px rgba(192,21,42,0.08);
    }

    /* ── Leaderboard grid polish for tablets ───────────────── */
    @media (min-width: 640px) and (max-width: 1024px) {
      .grid.xl\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ── Mission section premium styling ───────────────────── */
    #our-mission {
      position: relative;
    }
    #our-mission .grid > a {
      transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    @media (hover: hover) {
      #our-mission .grid > a:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 36px rgba(0,0,0,0.4);
      }
    }
    #our-mission .grid > a:active {
      transform: scale(0.98);
      transition-duration: 0.1s;
    }

    /* ── Venmo QR premium frame ────────────────────────────── */
    .venmo-qr-frame {
      position: relative;
      display: inline-block;
      padding: 5px;
      border-radius: 1.25rem;
      background: linear-gradient(135deg, #c0152a 0%, #1d4ed8 50%, #c0152a 100%);
      background-size: 200% 200%;
      animation: shimmer 4s linear infinite;
      box-shadow: 0 8px 32px rgba(192,21,42,0.2), 0 0 20px rgba(29,78,216,0.12);
    }
    .venmo-qr-frame .venmo-qr-inner {
      background: white;
      border-radius: 1rem;
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .venmo-qr-frame img {
      border-radius: 0.5rem;
    }

    /* ── Footer link hover polish ──────────────────────────── */
    footer a {
      transition: color 0.2s ease, transform 0.2s ease;
    }
    @media (hover: hover) {
      footer a:hover {
        transform: translateX(2px);
      }
    }

    /* ── Agenda vote buttons consistent ────────────────────── */
    .agenda-vote-up, .agenda-vote-down {
      transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    }
    .agenda-vote-up:active, .agenda-vote-down:active {
      transform: scale(0.96);
      transition-duration: 0.08s;
    }

    /* ── Improved focus ring for accessibility ─────────────── */
    .pm-filter-chip:focus-visible, .pm-btn-profile:focus-visible,
    .pm-btn-compare:focus-visible, .chub-add-btn:focus-visible,
    .btn-glow:focus-visible, .tr-btn-learn:focus-visible,
    .tr-btn-support:focus-visible, .agenda-vote-up:focus-visible,
    .agenda-vote-down:focus-visible {
      outline: 2px solid rgba(192,21,42,0.7);
      outline-offset: 2px;
    }

    /* ── Nav link underline effect ─────────────────────────── */
    .nav-link {
      position: relative;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, #c0152a, #f87171);
      transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    @media (hover: hover) {
      .nav-link:hover::after {
        width: 100%;
      }
    }

    /* ── Follow the Money sector buttons mobile ───────────── */
    @media (max-width: 640px) {
      #follow-the-money [style*="flex-wrap:wrap"] {
        gap: 0.25rem;
      }
      #follow-the-money button[onclick^="setFTMSector"] {
        font-size: 0.55rem !important;
        padding: 0.4rem 0.6rem !important;
      }
    }
    @media (max-width: 480px) {
      #follow-the-money [style*="display:flex"][style*="gap:0"] {
        flex-wrap: wrap;
        gap: 0.25rem;
      }
      #follow-the-money button[onclick^="setFTMSector"] {
        border-radius: 0.4rem !important;
        border-left: 1px solid rgba(255,255,255,0.1) !important;
      }
    }

    /* ── Wealth leaderboard cards polish ───────────────────── */
    @media (max-width: 640px) {
      #wealth-leaderboard .grid {
        gap: 0.75rem;
      }
    }

    /* ── Collection cards mobile scroll ────────────────────── */
    @media (max-width: 640px) {
      .cards-scroll {
        scroll-snap-type: x mandatory;
        scroll-padding: 0 1rem;
      }
      .cards-scroll > * {
        scroll-snap-align: start;
      }
    }

    /* ── Methodology section mobile ────────────────────────── */
    @media (max-width: 480px) {
      #methodology .p-5 { padding: 1rem; }
      #methodology .sm\:p-6 { padding: 1rem; }
    }

    /* ════════════════════════════════════════════════════════════
       FINAL POLISH PASS — Premium refinements
       ════════════════════════════════════════════════════════════ */

    /* ── GPU-accelerated transforms for smoother animations ── */
    .card-holo, .btn-glow, .pm-card, .veh-tool-card,
    .tr-slide, .pm-btn-profile, .pm-btn-compare,
    .tr-btn-learn, .tr-btn-support, .tr-propose-btn,
    .like-btn,
    .agenda-vote-up, .agenda-vote-down, .nav-link::after,
    #our-mission .grid > a, .venmo-qr-frame {
      will-change: transform;
    }

    /* ── Unified button base: consistent border-radius & font ─ */
    .pm-btn-profile, .pm-btn-compare, .bp-compare-btn,
    .chub-add-btn, .tr-btn-learn, .tr-btn-support,
    .tr-propose-btn,
    .rh-reset-btn, .mypol-remove-btn,
    .cmp-btn-profile, .spotlight-show-more {
      border-radius: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Consistent CTA button style: crimson primary ─────── */
    .btn-glow, .tr-btn-support,
    a[href="#submit"].bg-crimson-600,
    #mobileMenu a.bg-crimson-600 {
      background: linear-gradient(135deg, #c0152a 0%, #a6122a 100%);
      border: none;
      position: relative;
      overflow: hidden;
    }
    .btn-glow::after, .tr-btn-support::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 60%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    @media (hover: hover) {
      .btn-glow:hover::after, .tr-btn-support:hover::after {
        opacity: 1;
      }
    }

    /* ── Smooth hover lift for all interactive cards ──────── */
    @media (hover: hover) {
      .dir-card:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 12px rgba(192,21,42,0.06);
      }
      .agenda-card:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.3);
        border-color: rgba(255,255,255,0.12);
      }
    }

    /* ── Nav link pill buttons: consistent height & padding ── */
    nav .hidden.md\:flex a[class*="bg-navy-700"],
    nav .hidden.md\:flex a[class*="bg-amber-900"],
    nav .hidden.md\:flex a[class*="bg-blue-900"] {
      transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 0.5rem;
    }

    /* ── Mobile menu polish: slide-in + better spacing ────── */
    #mobileMenu {
      transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
    }
    #mobileMenu a {
      transition: all 0.2s ease;
      border-radius: 0.5rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
    @media (hover: hover) {
      #mobileMenu a:hover {
        background: rgba(255,255,255,0.03);
        padding-left: 1rem;
      }
    }
    #mobileMenu a.bg-crimson-600 {
      background: linear-gradient(135deg, #c0152a, #a6122a);
      border: none;
      border-radius: 0.75rem;
      box-shadow: 0 4px 16px rgba(192,21,42,0.25);
      transition: all 0.24s ease;
    }
    @media (hover: hover) {
      #mobileMenu a.bg-crimson-600:hover {
        box-shadow: 0 6px 24px rgba(192,21,42,0.4);
        transform: translateY(-1px);
        padding-left: 0.75rem;
      }
    }

    /* ── Marquee banner polish ─────────────────────────────── */
    .animate-marquee {
      gap: 2rem;
    }
    .animate-marquee span:not(.text-white\/20) {
      transition: color 0.2s ease;
    }

    /* ── Mission section: premium glass card ──────────────── */
    #our-mission .grid > a {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      position: relative;
      overflow: hidden;
    }
    #our-mission .grid > a::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.32s ease;
    }
    @media (hover: hover) {
      #our-mission .grid > a:hover::before {
        opacity: 1;
      }
      #our-mission .grid > a:hover {
        border-color: rgba(255,255,255,0.2);
      }
    }

    /* ── Mission letter: premium paper feel ───────────────── */
    #our-mission > div > .bg-navy-800\/60 {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    /* ── Venmo QR: premium hover interaction ──────────────── */
    .venmo-qr-frame {
      transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.4s ease;
    }
    @media (hover: hover) {
      .venmo-qr-frame:hover {
        transform: scale(1.03);
        box-shadow: 0 12px 48px rgba(192,21,42,0.3), 0 0 32px rgba(29,78,216,0.18);
      }
    }
    .venmo-qr-frame .venmo-qr-inner {
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    }

    /* ── Donation box premium glass ───────────────────────── */
    #our-mission .bg-navy-800\/50 {
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    /* ── Election countdown: digit glow refinement ────────── */
    #countdown-timer span[id^="cd-"] {
      transition: text-shadow 0.3s ease;
    }

    /* ── Section divider lines: subtle gradient ───────────── */
    section + section {
      position: relative;
    }

    /* ── Score ring pulse on hover ─────────────────────────── */
    @media (hover: hover) {
      .dir-card:hover .score-ring svg circle:last-child {
        filter: drop-shadow(0 0 4px currentColor);
        transition: filter 0.3s ease;
      }
    }

    /* ── Footer links: smoother directional hover ─────────── */
    footer a {
      display: inline-block;
      transition: color 0.2s ease, transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (hover: hover) {
      footer a:hover {
        transform: translateX(3px);
        color: white;
      }
    }

    /* ── Footer copyright bar ─────────────────────────────── */
    footer .border-t {
      margin-top: 0.5rem;
    }

    /* ── Typography: heading letter-spacing on mobile ──────── */
    @media (max-width: 640px) {
      .section-title {
        letter-spacing: 0.06em;
      }
      .hero-title {
        letter-spacing: 0.04em;
      }
    }

    /* ── Body text: better line heights and rendering ──────── */
    .font-body {
      text-rendering: optimizeLegibility;
    }
    p.leading-relaxed {
      line-height: 1.75;
    }

    /* ── Consistent card border radius across sections ────── */
    .wealth-card, .agenda-card, #methodology .bg-navy-800\/60 {
      border-radius: 1rem;
    }

    /* ── Modal close button polish ─────────────────────────── */
    #modal-top-bar button {
      transition: all 0.2s ease;
    }
    @media (hover: hover) {
      #modal-top-bar button:hover {
        transform: rotate(90deg);
        background: rgba(192,21,42,0.15);
        border-color: rgba(192,21,42,0.3);
      }
    }

    /* ── Scroll indicator bounce: subtler ──────────────────── */
    #hero .animate-bounce {
      animation: subtleBounce 2s ease-in-out infinite;
    }
    @keyframes subtleBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(6px); }
    }

    /* ── Hero badge float: smoother ───────────────────────── */
    #hero .animate-float {
      animation: heroFloat 4s ease-in-out infinite;
    }
    @keyframes heroFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* ── Mission CTA icon circles: consistent sizing ──────── */
    #our-mission .grid > a .w-12.h-12 {
      transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.28s ease;
    }
    @media (hover: hover) {
      #our-mission .grid > a:hover .w-12.h-12 {
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(192,21,42,0.2);
      }
    }

    /* ── Stats marquee text: slightly brighter on hover ───── */
    @media (hover: hover) {
      .bg-navy-800\/80:hover .animate-marquee span:not(.text-white\/20) {
        color: #b8cce4;
      }
    }

    /* ── Input focus glow: consistent ring across all forms ── */
    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: rgba(192,21,42,0.45);
      box-shadow: 0 0 0 3px rgba(192,21,42,0.1);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* ── Spacing: consistent section gaps on tablet ────────── */
    @media (min-width: 640px) and (max-width: 1024px) {
      .py-16 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    }

    /* ── Hero CTA buttons: matching border-radius ─────────── */
    #hero .flex a {
      border-radius: 0.75rem;
    }

    /* ── Compare Hub cards: smooth selection ───────────────── */
    .card-holo:has(.compare-cb:checked),
    .card-holo.cmp-highlight {
      transition: box-shadow 0.3s ease;
    }

    /* ── Smoother progress-fill bars everywhere ────────────── */
    .progress-fill, .dir-score-bar, .cmp-bar-fill, .ftm-sector-bar {
      transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Agenda vote buttons: matching style pair ─────────── */
    .agenda-vote-up, .agenda-vote-down {
      border-radius: 0.5rem;
      transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Mobile: better touch spacing for CTA rows ────────── */
    @media (max-width: 480px) {
      #our-mission .grid { gap: 0.625rem; }
      #our-mission .grid > a {
        padding: 1.125rem;
      }
      #our-mission .grid > a h4 {
        font-size: 0.92rem;
        letter-spacing: 0.05em;
      }
      .venmo-qr-frame {
        padding: 4px;
      }
      .venmo-qr-frame .venmo-qr-inner {
        padding: 0.75rem;
      }
      .venmo-qr-frame img {
        width: 160px !important;
        height: 160px !important;
      }
    }

    /* ── 380px and below: tighter mission section ─────────── */
    @media (max-width: 380px) {
      #our-mission .bg-navy-800\/60 {
        padding: 1.25rem;
      }
      #our-mission .bg-navy-800\/50 {
        padding: 1.25rem;
      }
    }

    /* ════════════════════════════════════════════════════════════
       PREMIUM POLISH PASS — Final refinements
       ════════════════════════════════════════════════════════════ */

    /* ── Button click ripple feedback ─────────────────────────── */
    @keyframes btnRipple {
      0% { box-shadow: 0 0 0 0 rgba(192,21,42,0.35); }
      100% { box-shadow: 0 0 0 12px rgba(192,21,42,0); }
    }
    @keyframes btnRippleBlue {
      0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.35); }
      100% { box-shadow: 0 0 0 12px rgba(59,130,246,0); }
    }
    .btn-glow:active, .pm-btn-profile:active,
    .tr-btn-support:active {
      animation: btnRipple 0.4s ease-out;
    }
    .pm-btn-compare:active, .bp-compare-btn:active,
    .chub-add-btn:active, .chub-launch-btn:active,
    .tr-btn-learn:active {
      animation: btnRippleBlue 0.4s ease-out;
    }

    /* ── Smoother global transitions ──────────────────────────── */
    a, button, select, input {
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Nav pill buttons: consistent height alignment ────────── */
    nav .hidden.md\:flex a {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }
    nav .hidden.md\:flex > a.nav-link {
      position: relative;
      padding: 0.35rem 0;
    }

    /* ── Nav: active section indicator ─────────────────────────── */
    .nav-link.active-section::after {
      width: 100%;
      background: linear-gradient(90deg, #c0152a, #f87171);
    }

    /* ── Mobile menu: smoother animation ──────────────────────── */
    #mobileMenu {
      animation: mobileMenuSlide 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    /* Non-interactive section labels that break the long mobile menu into
       scannable groups. Sits flush with the link rows below it. */
    #mobileMenu .mnav-group-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.66rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #5f7aa8;
      padding: 0.85rem 0 0.3rem;
      margin-top: 0.2rem;
      user-select: none;
    }
    #mobileMenu .mnav-group-label:first-child { margin-top: 0; padding-top: 0.2rem; }
    /* Accent variants let a group label carry the color of its section — money
       gold, education blue — so the two feedback-driven groups read as distinct
       destinations rather than blending into the long list. */
    #mobileMenu .mnav-group-label--money { color: #e9b949; }
    #mobileMenu .mnav-group-label--edu { color: #93b4d6; }
    /* A "lead" row is a hub: a bolder, card-like entry with a one-line blurb,
       used to make the Education section read as a real front door. */
    #mobileMenu a.mnav-lead {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
      background: linear-gradient(160deg, rgba(59,130,246,0.12), rgba(59,130,246,0));
      border: 1px solid rgba(147,180,214,0.24);
      border-radius: 0.75rem;
      padding: 0.85rem 0.9rem;
      margin: 0.2rem 0 0.4rem;
    }
    #mobileMenu a.mnav-lead .mnav-lead-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #cfe0f5;
    }
    #mobileMenu a.mnav-lead .mnav-lead-sub {
      font-family: 'Barlow', sans-serif;
      font-weight: 500;
      font-size: 0.72rem;
      line-height: 1.35;
      letter-spacing: 0.01em;
      text-transform: none;
      color: #8aa0c0;
    }
    /* Indented jump-links that dive straight into a sub-section (e.g. a single
       Academy track). The ↘ cue signals "jumps you into the page". */
    #mobileMenu a.mnav-sub {
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
      padding-left: 1.85rem;
      font-size: 0.78rem;
      letter-spacing: 0.05em;
      color: #9fb6d4;
    }
    #mobileMenu a.mnav-sub::after {
      content: "↘";
      margin-left: auto;
      opacity: 0.45;
      font-size: 0.85rem;
    }
    @keyframes mobileMenuSlide {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    #mobileMenu a {
      position: relative;
      overflow: hidden;
    }
    #mobileMenu a::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: linear-gradient(90deg, rgba(192,21,42,0.08), transparent);
      transition: width 0.25s ease;
    }
    @media (hover: hover) {
      #mobileMenu a:hover::before { width: 100%; }
    }

    /* ── Hero section: better CTA button pair ─────────────────── */
    #hero .flex a:first-child {
      position: relative;
      overflow: hidden;
    }
    #hero .flex a:first-child::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.06) 50%,
        transparent 60%
      );
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }
    @media (hover: hover) {
      #hero .flex a:first-child:hover::before {
        transform: translateX(100%);
      }
    }
    #hero > .flex a:not(:first-child) {
      backdrop-filter: blur(4px);
    }

    /* ── Stats marquee: smoother border treatment ─────────────── */
    .bg-navy-800\/80 {
      position: relative;
    }

    /* ── Power Map quick-jump pills: mobile scroll fix ────────── */
    @media (max-width: 640px) {
      #pm-quickjump-nav {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0.6rem 0.75rem;
        gap: 0.4rem !important;
      }
      #pm-quickjump-nav::-webkit-scrollbar { display: none; }
      #pm-quickjump-nav > a {
        flex-shrink: 0;
        font-size: 0.75rem !important;
        padding: 0.45rem 0.85rem !important;
      }
    }
    @media (max-width: 480px) {
      #pm-quickjump-nav > a {
        font-size: 0.68rem !important;
        padding: 0.4rem 0.7rem !important;
      }
    }

    /* ── Power Map location header: mobile responsive ─────────── */
    @media (max-width: 640px) {
      .pm-location-bar {
        padding: 0.65rem 0.75rem;
        border-radius: 0.875rem;
      }
      .pm-location-bar > div:first-child {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: 1rem !important;
      }
      /* Stack the identity above the action buttons so a long place name and the
         Detect / Change buttons can never collide on a phone. */
      .pm-location-bar > div:first-child > div:first-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem !important;
      }
      /* Action buttons take the full width and share the row evenly. */
      .pm-loc-actions { width: 100%; }
      .pm-loc-actions > button { flex: 1 1 0; justify-content: center; }
      /* Shrink ONLY the location icon on small screens. This selector used to
         target the whole identity block, forcing it into a 3.5rem box so the
         heading overflowed straight onto the buttons below — the overlap bug. */
      .pm-loc-iconbox {
        width: 3.5rem !important;
        height: 3.5rem !important;
        font-size: 1.8rem !important;
      }
      .pm-location-bar .font-display[style*="font-size:4.25rem"] {
        font-size: 2.2rem !important;
      }
      .pm-location-bar .font-display[style*="font-size:1.5rem"] {
        font-size: 1rem !important;
      }
      .pm-location-bar span[style*="font-size:1.15rem"] {
        font-size: 0.8rem !important;
      }
      #pm-fullstate-btn {
        font-size: 0.6rem !important;
        padding: 0.35rem 0.6rem !important;
      }
    }
    @media (max-width: 380px) {
      .pm-loc-iconbox {
        width: 2.8rem !important;
        height: 2.8rem !important;
        font-size: 1.4rem !important;
      }
      .pm-location-bar .font-display[style*="font-size:4.25rem"] {
        font-size: 1.75rem !important;
      }
    }

    /* ── Power Map cards: better mobile spacing ───────────────── */
    @media (max-width: 640px) {
      .pm-card {
        border-radius: 0.75rem;
      }
      .pm-card-impact {
        font-size: 0.65rem;
        padding-top: 0.35rem;
      }
      .pm-card-actions {
        gap: 0.35rem;
      }
      .pm-card-why {
        margin: 0 0.4rem;
        padding: 0.3rem 0.5rem;
        font-size: 0.68rem;
      }
    }

    /* ── My Politicians section: mobile grid improvements ─────── */
    @media (max-width: 640px) {
      #mypol-primary-grid {
        grid-template-columns: 1fr !important;
      }
      .mypol-section-divider {
        margin: 1.25rem 0 0.75rem;
      }
      [id^="mypol-group-"] {
        margin-bottom: 1rem;
      }
      #district-selector {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.2rem;
      }
      #district-selector::-webkit-scrollbar { display: none; }
      .district-pill {
        flex-shrink: 0;
        font-size: 0.65rem;
        padding: 0.3rem 0.7rem;
      }
      #compare-hub .text-center h2 {
        font-size: clamp(2rem, 8vw, 3.5rem);
      }
    }

    /* ── My Politicians group cards: consistent border radius ── */
    [id^="mypol-group-"] > div {
      transition: border-color 0.3s ease;
    }
    @media (hover: hover) {
      [id^="mypol-group-"] > div:hover {
        border-color: rgba(255,255,255,0.12);
      }
    }

    /* ── Compare Hub search & filters: mobile polish ──────────── */
    @media (max-width: 640px) {
      #compare-hub .grid.grid-cols-2.sm\:grid-cols-4 {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
      }
      .chub-card .font-display {
        font-size: 0.95rem;
      }
    }
    @media (max-width: 380px) {
      #compare-hub .grid.grid-cols-2.sm\:grid-cols-4 {
        grid-template-columns: 1fr;
      }
    }

    /* ── Voter Hub toolkit grid: mobile polish ─────────────────── */
    @media (max-width: 640px) {
      #voter-hub .grid.grid-cols-2.sm\:grid-cols-3 {
        gap: 0.4rem;
      }
      .veh-tool-card {
        padding: 0.75rem;
        border-radius: 0.75rem;
        gap: 0.35rem;
      }
      .veh-tool-card .veh-icon { font-size: 1.25rem; }
      .veh-tool-card .veh-label { font-size: 0.82rem; }
      .veh-tool-card .veh-desc { font-size: 0.65rem; }
    }
    @media (max-width: 380px) {
      #voter-hub .grid.grid-cols-2.sm\:grid-cols-3 {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ── Voter Hub: Power Map + side panel mobile stack ────────── */
    @media (max-width: 1024px) {
      #voter-hub .grid.grid-cols-1.lg\:grid-cols-3 {
        gap: 1.5rem;
      }
    }

    /* ── Mission section: premium glass depth ─────────────────── */
    #our-mission {
      position: relative;
      overflow: hidden;
    }
    #our-mission > div > .bg-navy-800\/60 {
      position: relative;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    #our-mission > div > .bg-navy-800\/60::after {
      content: '';
      position: absolute;
      top: 1px;
      left: 1rem;
      right: 1rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
      pointer-events: none;
    }

    /* ── Mission letter: improved typography ───────────────────── */
    #our-mission .font-body.text-steel-200 p:first-child {
      position: relative;
      padding-left: 1.25rem;
    }
    #our-mission .font-body.text-steel-200 p:first-child::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.3rem;
      bottom: 0.3rem;
      width: 3px;
      background: linear-gradient(180deg, #c0152a, #1d4ed8);
      border-radius: 2px;
    }

    /* ── Mission CTA cards: glass morphism upgrade ────────────── */
    #our-mission .grid > a {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      position: relative;
      overflow: hidden;
    }
    #our-mission .grid > a::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.06) 50%, transparent 90%);
      pointer-events: none;
    }
    #our-mission .grid > a h4 {
      transition: letter-spacing 0.3s ease;
    }
    @media (hover: hover) {
      #our-mission .grid > a:hover h4 {
        letter-spacing: 0.12em;
      }
    }

    /* ── Donation box: enhanced premium feel ───────────────────── */
    #our-mission .bg-navy-800\/50 {
      position: relative;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    #our-mission .bg-navy-800\/50::after {
      content: '';
      position: absolute;
      top: 1px;
      left: 2rem;
      right: 2rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(245,200,66,0.12), transparent);
      pointer-events: none;
    }

    /* ── Venmo QR: enhanced premium treatment ─────────────────── */
    .venmo-qr-frame {
      position: relative;
      display: inline-block;
      padding: 5px;
      border-radius: 1.25rem;
      background: linear-gradient(135deg, #c0152a 0%, #f5c842 25%, #1d4ed8 50%, #f5c842 75%, #c0152a 100%);
      background-size: 300% 300%;
      animation: venmoGlow 6s ease-in-out infinite;
      box-shadow: 0 12px 40px rgba(192,21,42,0.25), 0 0 24px rgba(29,78,216,0.15), 0 0 0 1px rgba(255,255,255,0.08);
    }
    @keyframes venmoGlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    .venmo-qr-frame .venmo-qr-inner {
      background: white;
      border-radius: calc(1.25rem - 5px);
      padding: 1.125rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 2px 8px rgba(0,0,0,0.06);
    }
    .venmo-qr-frame img {
      border-radius: 0.625rem;
    }
    @media (hover: hover) {
      .venmo-qr-frame:hover {
        transform: scale(1.04) rotate(0.5deg);
        box-shadow: 0 16px 56px rgba(192,21,42,0.35), 0 0 40px rgba(29,78,216,0.2), 0 0 0 1px rgba(255,255,255,0.1);
      }
    }

    /* ── Venmo text: better gradient and spacing ──────────────── */
    #our-mission .bg-navy-800\/50 .font-condensed.text-sm.tracking-widest {
      font-size: 0.9rem;
    }

    /* ── Mission section mobile: better padding & spacing ─────── */
    @media (max-width: 640px) {
      #our-mission {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
      }
      #our-mission > div > .bg-navy-800\/60 {
        padding: 1.5rem;
      }
      #our-mission .font-body.text-steel-200 {
        font-size: 0.92rem;
      }
      #our-mission .font-body.text-steel-200 p:first-child {
        padding-left: 1rem;
        font-size: 1.2rem !important;
      }
      #our-mission .bg-navy-800\/50 {
        padding: 1.5rem;
      }
      .venmo-qr-frame {
        padding: 4px;
      }
      .venmo-qr-frame .venmo-qr-inner {
        padding: 0.875rem;
      }
    }
    @media (max-width: 480px) {
      #our-mission .text-center.mb-12 h2 {
        font-size: clamp(1.8rem, 8vw, 3rem);
      }
      #our-mission .grid.grid-cols-1.sm\:grid-cols-2 {
        gap: 0.625rem;
      }
      #our-mission .grid > a {
        padding: 1rem;
      }
    }

    /* ── Election countdown: mobile digit sizing ──────────────── */
    @media (max-width: 480px) {
      #countdown-timer .font-display[style*="text-shadow"] {
        font-size: 2.5rem !important;
      }
      #countdown-timer > span.font-display {
        font-size: 2rem !important;
      }
      #election-countdown .grid {
        gap: 1rem;
      }
      #election-countdown .bg-navy-800\/70 {
        padding: 1.25rem;
      }
    }

    /* ── Trending carousel: mobile arrow + slide polish ────────── */
    @media (max-width: 480px) {
      .tr-nav-btn {
        width: 1.8rem;
        height: 1.8rem;
      }
      .tr-nav-prev { left: 0.3rem; }
      .tr-nav-next { right: 0.3rem; }
      .tr-stat-box {
        padding: 0.5rem 0.8rem;
      }
    }

    /* ── Section titles: consistent gradient underline ─────────── */
    .section-title {
      position: relative;
      display: inline-block;
    }

    /* ── Card hover: smoother, subtler shadow buildup ─────────── */
    @media (hover: hover) {
      .pm-card:hover {
        transition-duration: 0.32s;
      }
      .chub-card:hover {
        transition-duration: 0.32s;
      }
    }

    /* ── Footer: improved link grid spacing ───────────────────── */
    footer .grid {
      row-gap: 1.5rem;
    }
    footer .grid > div > .flex.flex-col {
      gap: 0.6rem;
    }
    @media (max-width: 640px) {
      footer {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
      }
      footer .flex.flex-col.md\:flex-row {
        gap: 2rem;
      }
      footer .grid {
        gap: 1.5rem;
        width: 100%;
      }
    }

    /* ── Footer: PolitiDex tagline glow ────────────────────────── */
    footer .font-condensed[style*="background-clip:text"] {
      filter: drop-shadow(0 0 8px rgba(245,200,66,0.15));
    }

    /* ── Profiles directory: card grid mobile ──────────────────── */
    @media (max-width: 640px) {
      #profiles .grid {
        gap: 0.5rem;
      }
      .dir-card {
        border-radius: 0.75rem;
      }
    }

    /* ── Select dropdowns: better focus treatment ─────────────── */
    select:focus {
      border-color: rgba(192,21,42,0.45);
      box-shadow: 0 0 0 3px rgba(192,21,42,0.1), 0 0 12px rgba(192,21,42,0.08);
      outline: none;
    }

    /* ── Input & textarea: consistent styling ─────────────────── */
    input[type="text"]:focus, input[type="email"]:focus,
    input[type="url"]:focus, textarea:focus {
      border-color: rgba(192,21,42,0.45);
      box-shadow: 0 0 0 3px rgba(192,21,42,0.1), 0 0 12px rgba(192,21,42,0.08);
    }

    /* ── Tooltip arrows ───────────────────────────────────────── */
    .pm-info-tip .pm-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: rgba(15,23,42,0.97);
    }

    /* ── Compare overlay: smoother open animation ─────────────── */
    #compare-overlay {
      transition: opacity 0.28s ease;
    }

    /* ── Score ring: subtle glow on high scores ───────────────── */
    .score-high {
      text-shadow: 0 0 12px rgba(74,222,128,0.25);
    }
    .score-low {
      text-shadow: 0 0 12px rgba(248,113,113,0.2);
    }

    /* ── Promise verdict badges: slightly larger for readability ─ */
    .vbadge {
      font-size: 0.62rem;
      padding: 0.2rem 0.55rem;
    }

    /* ── Modal: mobile full-screen improvements ───────────────── */
    @media (max-width: 640px) {
      #modal-panel {
        border-radius: 0;
        max-height: 100vh;
        height: 100%;
      }
      #modal-top-bar {
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      #modal-body {
        padding: 1rem;
      }
    }

    /* ── Scrollbar: custom styled for the whole page ──────────── */
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #0a0f1e;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(192,21,42,0.35);
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(192,21,42,0.55);
    }
    html {
      scrollbar-width: thin;
      scrollbar-color: rgba(192,21,42,0.35) #0a0f1e;
    }


    /* ── Reform Hub filter bar: mobile improvements ────────────── */
    @media (max-width: 480px) {
      .rh-filter-bar {
        padding: 0.75rem;
        border-radius: 0.75rem;
      }
      .rh-search-input {
        font-size: 0.78rem;
        padding: 0.5rem 2rem 0.5rem 2rem;
      }
    }

    /* ── Section-to-section: subtle divider gradient ──────────── */
    section {
      position: relative;
    }

    /* ── Wealth leaderboard: card hover refinement ────────────── */
    .wealth-card {
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (hover: hover) {
      .wealth-card:hover {
        border-color: rgba(245,200,66,0.25);
        transform: translateY(-3px);
        box-shadow: 0 12px 36px rgba(0,0,0,0.4);
      }
    }
    .wealth-card:active {
      transform: scale(0.98);
      transition-duration: 0.1s;
    }

    /* ── Agenda cards: hover and active state polish ──────────── */
    .agenda-card {
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (hover: hover) {
      .agenda-card:hover {
        transform: translateY(-2px);
      }
    }
    .agenda-card:active {
      transform: scale(0.99);
      transition-duration: 0.08s;
    }

    /* ── Text selection: patriotic theme ───────────────────────── */
    ::selection {
      background: rgba(192,21,42,0.3);
      color: #fff;
    }

    /* ── Loading skeleton: consistent shimmer ──────────────────── */
    @keyframes skeleton {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, rgba(30,53,96,0.3) 25%, rgba(59,100,160,0.15) 50%, rgba(30,53,96,0.3) 75%);
      background-size: 200% 100%;
      animation: skeleton 1.8s ease-in-out infinite;
      border-radius: 0.5rem;
    }

    /* ── Fast-first-load: roster status pill + skeleton roster ─────────────── */
    .pdx-roster-status {
      position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
      z-index: 9000; display: flex; align-items: center; gap: 0.55rem;
      max-width: 92vw; padding: 0.55rem 0.95rem;
      background: rgba(13,21,40,0.92); border: 1px solid rgba(96,165,250,0.28);
      border-radius: 999px; box-shadow: 0 10px 34px rgba(0,0,0,0.45);
      color: #cfe0f5; font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.86rem; letter-spacing: 0.02em;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      animation: pdxRosterIn 0.35s ease both;
    }
    @keyframes pdxRosterIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
    .pdx-roster-status.is-error { border-color: rgba(248,113,113,0.5); color: #fecaca; }
    .pdx-roster-status button {
      min-height: 0; padding: 0.2rem 0.7rem; margin-left: 0.25rem;
      background: rgba(192,21,42,0.85); color: #fff; border: 0; border-radius: 999px;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem;
      letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
    }
    .pdx-roster-status button:hover { background: #c0152a; }
    .pdx-roster-spin {
      width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
      border: 2px solid rgba(96,165,250,0.3); border-top-color: #60a5fa;
      animation: pdxSpin 0.7s linear infinite;
    }
    @keyframes pdxSpin { to { transform: rotate(360deg); } }

    .pdx-skel-grid {
      display: grid; gap: 0.85rem;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .pdx-skel-card {
      background: linear-gradient(180deg, rgba(20,33,61,0.6), rgba(13,21,40,0.6));
      border: 1px solid rgba(255,255,255,0.06); border-radius: 1rem;
      padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
    }
    .pdx-skel-row { display: flex; align-items: center; gap: 0.7rem; }
    .pdx-skel-lines { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
    .pdx-skel { display: block; height: 0.8rem; }
    .pdx-skel-ava { width: 46px; height: 46px; border-radius: 0.7rem; flex: 0 0 auto; }
    .pdx-skel-bar { height: 2.4rem; border-radius: 0.6rem; }
    .pdx-skel-line.w90 { width: 90%; } .pdx-skel-line.w70 { width: 70%; }
    .pdx-skel-line.w60 { width: 60%; } .pdx-skel-line.w40 { width: 40%; }

    /* Loading state inside the medium modal body and the full-profile modal. */
    .pdx-med-skel { display: flex; flex-direction: column; gap: 0.85rem; padding: 0.4rem 0; }
    .pdx-modal-loading {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0.9rem; min-height: 240px; padding: 2.5rem 1rem; text-align: center;
      color: #9fb4d4; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.03em;
    }
    .pdx-modal-loading .pdx-roster-spin { width: 26px; height: 26px; border-width: 3px; }

    /* ── Hero: scroll indicator smoother pulse ─────────────────── */
    #hero > .absolute.bottom-8 {
      transition: opacity 0.3s ease;
    }

    /* ── Improved spacing: section py on large screens ─────────── */
    @media (min-width: 1280px) {
      .section-py {
        padding-top: 6rem;
        padding-bottom: 6rem;
      }
    }

    /* ── Premium underlines for score values ───────────────────── */
    .pm-card-score, .chub-score, .cmp-score-val {
      font-variant-numeric: tabular-nums;
    }

    /* ── Backdrop blur consistency across sections ─────────────── */
    .pm-card {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    /* ── Smooth image loading: fade in on load ─────────────────── */
    .pm-card-photo img, .dir-card-photo img,
    .tracker-hs img, .modal-headshot img,
    .chub-card img {
      opacity: 1;
      transition: opacity 0.4s ease;
    }

    /* ── Better tap target sizing for mobile ───────────────────── */
    @media (max-width: 640px) {
      .pm-btn-profile, .pm-btn-compare {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .district-pill {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
      }
      .pm-filter-chip {
        min-height: 34px;
        padding: 0.35rem 0.7rem;
      }
      .tr-dot {
        min-width: 12px;
        min-height: 12px;
      }
    }

    /* ── Premium: subtle noise texture overlay ─────────────────── */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.015;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 256px 256px;
    }

    /* ── Compare float button: better mobile positioning ──────── */
    @media (max-width: 480px) {
      #compare-float-btn {
        bottom: 0.75rem;
        font-size: 0.65rem;
        padding: 0.55rem 0.85rem;
        gap: 0.4rem;
      }
    }

    /* ── Trending carousel dots: better touch targets ─────────── */
    .tr-dots {
      gap: 0.625rem;
      padding-bottom: 1.5rem;
    }
    .tr-dot {
      width: 10px;
      height: 10px;
      border: 1.5px solid rgba(255,255,255,0.15);
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .tr-dot.active {
      width: 28px;
      border-radius: 5px;
      background: linear-gradient(90deg, #c0152a, #ef4444);
      border-color: rgba(192,21,42,0.5);
      box-shadow: 0 0 10px rgba(192,21,42,0.5);
    }

    /* ── Improve section badge consistency ─────────────────────── */
    .inline-flex.items-center.gap-2.bg-crimson-600\/12,
    .inline-flex.items-center.gap-2.bg-crimson-600\/15,
    .inline-flex.items-center.gap-2\.5.bg-crimson-600\/12 {
      transition: all 0.3s ease;
    }
    @media (hover: hover) {
      .inline-flex.items-center.gap-2.bg-crimson-600\/12:hover,
      .inline-flex.items-center.gap-2.bg-crimson-600\/15:hover,
      .inline-flex.items-center.gap-2\.5.bg-crimson-600\/12:hover {
        background: rgba(192,21,42,0.18);
        border-color: rgba(192,21,42,0.4);
      }
    }

    /* ══════════════════════════════════════════════════════════
       MAX POLISH PASS — Mobile Responsiveness & Visual Hierarchy
       ══════════════════════════════════════════════════════════ */

    /* ── Footer: 4-col grid mobile collapse ────────────────────── */
    @media (max-width: 640px) {
      footer {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
      }
      footer .grid.grid-cols-1.md\:grid-cols-12 {
        gap: 2rem;
      }
      footer .grid.grid-cols-2.sm\:grid-cols-4 {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
      }
      footer .grid.grid-cols-2.sm\:grid-cols-4 > div > .flex.flex-col {
        gap: 0.5rem;
      }
    }
    @media (max-width: 380px) {
      footer .grid.grid-cols-2.sm\:grid-cols-4 {
        gap: 1rem;
      }
      footer .font-display.text-2xl {
        font-size: 1.35rem;
      }
    }

    /* ── Sections: consistent inter-section spacing ──────────── */
    @media (max-width: 640px) {
      #compare-hub, #tracker, #wealth-leaderboard, #follow-the-money {
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }
      #agenda, #methodology {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      #submit {
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }
    }

    /* ── Section titles: fluid sizing on all breakpoints ──────── */
    @media (max-width: 640px) {
      .section-title {
        font-size: clamp(1.8rem, 9vw, 3rem) !important;
        word-break: break-word;
      }
      #profiles .section-title .text-steel-400 {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.85rem;
      }
    }

    /* ── Browse Profiles: card grid & filter bar mobile ──────── */
    @media (max-width: 640px) {
      #profiles .dir-filter-grid {
        grid-template-columns: 1fr 1fr;
      }
      #profiles .dir-card {
        padding: 0.625rem;
      }
      .dir-card-photo {
        width: 44px;
        height: 44px;
      }
      .dir-card-name {
        font-size: 0.88rem;
      }
      #bp-search {
        font-size: 0.82rem;
      }
    }
    @media (max-width: 380px) {
      #profiles .dir-filter-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── Wealth Leaderboard: mobile grid polish ──────────────── */
    @media (max-width: 640px) {
      #wealth-leaderboard .grid {
        gap: 0.6rem;
      }
      #wealth-leaderboard .section-title {
        font-size: clamp(1.6rem, 8vw, 2.8rem) !important;
      }
    }

    /* ── Follow the Money: mobile card stacking ─────────────── */
    @media (max-width: 640px) {
      #follow-the-money .section-title {
        font-size: clamp(1.6rem, 8vw, 2.8rem) !important;
      }
      .ftm-sector-bar {
        height: 16px;
      }
    }

    /* ── Methodology section: mobile readability ────────────── */
    @media (max-width: 640px) {
      #methodology .max-w-4xl {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }
      #methodology .section-title {
        font-size: clamp(1.8rem, 9vw, 3rem) !important;
      }
    }

    /* ── Submit section: form mobile polish ────────────────── */
    @media (max-width: 480px) {
      #submit .max-w-2xl {
        margin-left: 0;
        margin-right: 0;
      }
      #submit form {
        padding: 1rem;
      }
    }

    /* ── Voter Hub: toolkit grid micro-gap on tiny screens ── */
    @media (max-width: 380px) {
      .veh-tool-card {
        padding: 0.6rem;
        gap: 0.25rem;
      }
      .veh-tool-card .veh-icon { font-size: 1.1rem; }
      .veh-tool-card .veh-label { font-size: 0.75rem; }
      .veh-tool-card .veh-desc { font-size: 0.6rem; }
    }

    /* ── Power Map: side panel cards mobile column ──────────── */
    @media (max-width: 640px) {
      .pm-card {
        padding: 0.625rem;
      }
      .pm-card-photo {
        width: 42px;
        height: 42px;
      }
      .pm-card-name {
        font-size: 0.9rem;
      }
      .pm-card-score {
        font-size: 1.4rem;
      }
    }


    /* ── Compare Hub: search bar & card grid mobile ─────────── */
    @media (max-width: 480px) {
      #compare-hub .section-title {
        font-size: clamp(1.8rem, 9vw, 3rem) !important;
      }
      .chub-card {
        padding: 0.625rem;
      }
    }

    /* ── My Politicians: district selector + grid mobile ─────── */
    @media (max-width: 480px) {
      #my-politicians .text-3xl {
        font-size: clamp(1.5rem, 7vw, 2rem);
      }
      #mypol-primary-grid .chub-card,
      .mypol-group-card {
        padding: 0.5rem;
      }
    }

    /* ── Promise Tracker: card rows mobile ──────────────────── */
    @media (max-width: 640px) {
      #tracker .section-title {
        font-size: clamp(1.8rem, 9vw, 3rem) !important;
      }
      .tracker-card {
        padding: 0.625rem;
        border-radius: 0.75rem;
      }
      .tracker-hs {
        width: 44px;
        height: 44px;
      }
    }

    /* ── Nav: desktop link overflow prevention ─────────────── */
    @media (min-width: 768px) and (max-width: 1280px) {
      nav .hidden.md\:flex {
        gap: 0.35rem;
        font-size: 0.65rem;
      }
      nav .hidden.md\:flex a {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
      }
    }

    /* ── Hero: better button spacing on mobile ─────────────── */
    @media (max-width: 480px) {
      #hero .flex.flex-col.sm\:flex-row {
        gap: 0.625rem;
      }
      #hero .btn-tap {
        padding: 0.875rem 1.5rem;
        font-size: 0.78rem;
      }
    }

    /* ── Election countdown: full mobile polish ──────────── */
    @media (max-width: 640px) {
      #election-countdown {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
    }
    @media (max-width: 380px) {
      #countdown-timer .font-display[style*="text-shadow"] {
        font-size: 2rem !important;
      }
      #countdown-timer > span.font-display {
        font-size: 1.6rem !important;
      }
      #election-countdown .bg-navy-800\/70 {
        padding: 1rem;
        border-radius: 1rem;
      }
    }

    /* ── Stats banner: mobile text size ─────────────────────── */
    @media (max-width: 480px) {
      .animate-marquee span.font-condensed {
        font-size: 0.72rem;
      }
    }

    /* ── Trending Reforms: mobile card padding ─────────────── */
    @media (max-width: 640px) {
      #trending-reforms {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }
    }

    /* ── Visual hierarchy: section header badge consistent glow */
    section > div > .text-center > .inline-flex {
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    }

    /* ── Premium: link underline hover effect in footer ──────── */
    footer a {
      position: relative;
      text-decoration: none;
    }
    footer .flex.flex-col a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, #c0152a, transparent);
      transition: width 0.25s ease;
    }
    @media (hover: hover) {
      footer .flex.flex-col a:hover::after {
        width: 100%;
      }
    }

    /* ── Premium: footer patriotic top border shimmer ────────── */
    footer > .absolute.top-0 {
      background-size: 200% 100%;
      animation: shimmer 8s linear infinite;
    }
    @keyframes alignGlow {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 0.9; }
    }

    /* Brief teal halo when alignSeeMatches() drops the visitor onto the candidate
       list, so it's obvious the list re-sorted to their best matches. */
    @keyframes alignFlash {
      0% { box-shadow: 0 0 0 0 rgba(94,234,212,0); }
      30% { box-shadow: 0 0 0 3px rgba(94,234,212,0.55), 0 0 22px rgba(20,184,166,0.4); }
      100% { box-shadow: 0 0 0 0 rgba(94,234,212,0); }
    }



    @keyframes alignIntIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

    /* ── Toggle feedback ─────────────────────────────────────── */
    @keyframes alignPop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
    @keyframes alignBadgePop { 0% { transform: scale(0.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }


    /* ── Nav/CTA Color Updates: Voter Hub → bright crimson ── */
    .clr-voter { color: #d91a31; text-shadow: 0 0 8px rgba(217,26,49,0.35); }
    .clr-voter:hover { color: #ff2d4a; text-shadow: 0 0 12px rgba(217,26,49,0.55); }
    .btn-voter-hub { background: linear-gradient(135deg, #d91a31, #c0152a) !important; color: #fff !important; box-shadow: 0 6px 24px rgba(217,26,49,0.45), 0 0 15px rgba(217,26,49,0.25); }
    .btn-voter-hub:hover { background: linear-gradient(135deg, #ff2d4a, #d91a31) !important; box-shadow: 0 8px 32px rgba(217,26,49,0.6), 0 0 24px rgba(217,26,49,0.35); transform: translateY(-1px); }
    .btn-voter-hub:active { background: #c0152a !important; }

    /* ── Nav/CTA Color Updates: My Politicians → gold/yellow ── */
    .clr-mypol { color: #f5c842; text-shadow: 0 0 8px rgba(245,200,66,0.3); }
    .clr-mypol:hover { color: #fad96a; text-shadow: 0 0 12px rgba(245,200,66,0.5); }
    .btn-my-politicians { border-color: #f5c842 !important; color: #f5c842 !important; background: rgba(245,200,66,0.08) !important; box-shadow: 0 4px 16px rgba(245,200,66,0.2), 0 0 10px rgba(245,200,66,0.1); }
    .btn-my-politicians:hover { border-color: #fad96a !important; color: #fad96a !important; background: rgba(245,200,66,0.15) !important; box-shadow: 0 6px 24px rgba(245,200,66,0.35), 0 0 16px rgba(245,200,66,0.2); transform: translateY(-1px); }

    /* ── Nav/CTA Color Updates: Follow the Money → vibrant money green ── */
    .clr-money { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,0.4); }
    .clr-money:hover { color: #86efac; text-shadow: 0 0 12px rgba(74,222,128,0.6); }
    .btn-follow-money { border-color: #4ade80 !important; color: #4ade80 !important; background: rgba(74,222,128,0.08) !important; box-shadow: 0 4px 16px rgba(74,222,128,0.2), 0 0 10px rgba(74,222,128,0.1); }
    .btn-follow-money:hover { border-color: #86efac !important; color: #86efac !important; background: rgba(74,222,128,0.15) !important; box-shadow: 0 6px 24px rgba(74,222,128,0.35), 0 0 16px rgba(74,222,128,0.2); transform: translateY(-1px); }

    /* ── Nav/CTA Color Updates: Wealth → vibrant money green ── */
    .clr-wealth { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,0.4); }
    .clr-wealth:hover { color: #86efac; text-shadow: 0 0 12px rgba(74,222,128,0.6); }

    /* ── Top-nav WEALTH / MONEY: vibrant money-green pill buttons ── */
    .nav-cash-btn {
      color: #4ade80 !important;
      background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(34,197,94,0.10));
      border: 1.5px solid rgba(74,222,128,0.55);
      border-radius: 0.5rem;
      padding: 4.5px 11px;
      text-shadow: 0 0 8px rgba(74,222,128,0.45);
      box-shadow: 0 0 14px rgba(74,222,128,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
      white-space: nowrap;
    }
    .nav-cash-btn:hover {
      color: #bbf7d0 !important;
      background: linear-gradient(135deg, rgba(74,222,128,0.30), rgba(34,197,94,0.18));
      border-color: rgba(134,239,172,0.85);
      box-shadow: 0 0 24px rgba(74,222,128,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    /* ── Top-nav MANDATE: vibrant flashing/pulsing invitation button ── */
    @keyframes nav-mandate-flash {
      0%, 100% { box-shadow: 0 0 14px rgba(245,200,66,0.55), 0 0 30px rgba(192,21,42,0.30); border-color: rgba(245,200,66,0.75); }
      33%      { box-shadow: 0 0 20px rgba(192,21,42,0.65), 0 0 36px rgba(245,200,66,0.35); border-color: rgba(255,94,94,0.85); }
      66%      { box-shadow: 0 0 20px rgba(59,130,246,0.65), 0 0 36px rgba(245,200,66,0.30); border-color: rgba(79,157,255,0.85); }
    }
    @keyframes nav-mandate-attention {
      0%, 90%, 100% { transform: scale(1); }
      94%           { transform: scale(1.09); }
      97%           { transform: scale(0.97); }
    }
    .nav-mandate-btn {
      color: #ffffff !important;
      font-weight: 800;
      border-radius: 0.5rem;
      padding: 4.5px 13px;
      border: 1.5px solid rgba(245,200,66,0.75);
      background: linear-gradient(120deg, #c0152a 0%, #f5c842 30%, #3b82f6 55%, #c0152a 100%);
      background-size: 300% auto;
      text-shadow: 0 1px 4px rgba(0,0,0,0.55);
      white-space: nowrap;
      animation: mandate-gradient-sweep 4s ease infinite, nav-mandate-flash 2.2s ease-in-out infinite, nav-mandate-attention 6s ease-in-out infinite;
    }
    .nav-mandate-btn:hover {
      color: #fff !important;
      filter: saturate(1.35) brightness(1.12);
    }
    .nav-mandate-btn::after { display: none !important; }

    /* ── Top-nav dropdown menus (Politicians · Library) ─────────────
       Consolidates the right-side nav into two clean gateways. Each
       trigger keeps its visible label + a caret; the panel opens on
       hover (fine pointers), on caret click (touch), and on keyboard
       focus. Styling mirrors the dark nav / All-Seeing-Eye theme. */
    .pdx-navmenu { position: relative; display: inline-flex; align-items: center; }
    .pdx-navmenu__btn { display: inline-flex; align-items: center; gap: 0.3rem; }
    /* Inline research / community glyphs riding inside a visible nav label. Sized
       to sit level with the label text like the emoji glyphs elsewhere in the bar. */
    .pdx-navmenu__glyph { width: 1.02rem; height: 1.02rem; flex-shrink: 0; }
    .pdx-navmenu__glyph svg { width: 100%; height: 100%; display: block; }
    .pdx-navmenu__caret {
      display: inline-flex; align-items: center; justify-content: center;
      margin-left: 1px; padding: 2px; color: inherit; background: none; border: none;
      cursor: pointer; line-height: 0; border-radius: 0.3rem;
      transition: transform .2s ease, color .2s ease, background .2s ease;
    }
    .pdx-navmenu__caret svg { width: 0.68rem; height: 0.68rem; transition: transform .22s cubic-bezier(0.4,0,0.2,1); }
    .pdx-navmenu__caret:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .pdx-navmenu__caret:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(245,200,66,0.5); }
    .pdx-navmenu:hover .pdx-navmenu__caret svg,
    .pdx-navmenu.is-open .pdx-navmenu__caret svg { transform: rotate(180deg); }

    .pdx-navmenu__panel {
      position: absolute; top: calc(100% + 0.55rem); right: 0; z-index: 60;
      min-width: 15.5rem; padding: 0.4rem;
      border-radius: 0.85rem;
      background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(10,15,30,0.98));
      border: 1px solid rgba(148,163,184,0.2);
      box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,200,66,0.05), 0 0 40px rgba(59,130,246,0.06);
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    }
    /* invisible hover bridge so the cursor can cross the gap into the panel */
    .pdx-navmenu__panel::before { content: ""; position: absolute; top: -0.6rem; left: 0; right: 0; height: 0.6rem; }
    .pdx-navmenu:hover .pdx-navmenu__panel,
    .pdx-navmenu:focus-within .pdx-navmenu__panel,
    .pdx-navmenu.is-open .pdx-navmenu__panel {
      opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    }
    .pdx-navmenu__hd {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.62rem;
      letter-spacing: 0.16em; text-transform: uppercase; color: #7f93b3;
      padding: 0.4rem 0.6rem 0.3rem;
    }
    .pdx-navmenu__item {
      display: flex; align-items: center; gap: 0.55rem; width: 100%;
      padding: 0.55rem 0.65rem; border-radius: 0.6rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.82rem;
      letter-spacing: 0.06em; text-transform: uppercase; color: #cbd7ea;
      text-decoration: none; white-space: nowrap; cursor: pointer;
      transition: background .13s ease, color .13s ease, transform .13s ease, box-shadow .13s ease;
    }
    .pdx-navmenu__item:hover { background: rgba(59,130,246,0.14); color: #eaf1fd; }
    .pdx-navmenu__item:active { transform: scale(0.985); }
    .pdx-navmenu__item .pdx-navmenu__ico { font-size: 1rem; line-height: 1; flex-shrink: 0; width: 1.35rem; text-align: center; }
    .pdx-navmenu__item .pdx-navmenu__lb { flex: 1; min-width: 0; }
    .pdx-navmenu__sep { height: 1px; margin: 0.35rem 0.4rem; background: rgba(255,255,255,0.06); }
    /* Primary destination row (Browse the Library / All Politicians) */
    .pdx-navmenu__item--primary {
      color: #dbeafe;
      background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(37,99,235,0.10));
      box-shadow: inset 0 0 0 1px rgba(96,165,250,0.4);
    }
    .pdx-navmenu__item--primary:hover { color: #fff; background: linear-gradient(135deg, rgba(59,130,246,0.34), rgba(37,99,235,0.18)); }
    /* Evidence Locker — the gold quick-jump, prominent in BOTH menus */
    .pdx-navmenu__item--locker {
      color: #e9d8a6;
      background: linear-gradient(135deg, rgba(245,200,66,0.10), rgba(30,41,59,0.35));
      box-shadow: inset 0 0 0 1px rgba(245,200,66,0.22);
    }
    .pdx-navmenu__item--locker:hover { color: #ffe9a8; background: linear-gradient(135deg, rgba(245,200,66,0.2), rgba(30,41,59,0.4)); box-shadow: inset 0 0 0 1px rgba(245,200,66,0.45); }
    /* Admin rows carry the crimson tool accent */
    .pdx-navmenu__item--admin { color: #fca5a5; }
    .pdx-navmenu__item--admin:hover { color: #fff; background: rgba(192,21,42,0.22); }
    /* Donate / Support — a warm gold-tinted give-back row */
    .pdx-navmenu__item--donate { color: #f2d38a; }
    .pdx-navmenu__item--donate:hover { color: #fff3cf; background: linear-gradient(135deg, rgba(245,200,66,0.16), rgba(30,41,59,0.35)); }

    /* ── Heart Button styles ── */
    .heart-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(244, 63, 94, 0.08);
      border: 1px solid rgba(244, 63, 94, 0.2);
      color: #f43f5e;
      border-radius: 0.5rem;
      padding: 0.4rem 0.65rem;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .heart-btn:hover {
      border-color: rgba(244, 63, 94, 0.5);
      transform: scale(1.05);
    }
    .heart-btn.favorited {
      background: #f43f5e !important;
      border-color: #f43f5e !important;
      color: #fff !important;
      box-shadow: 0 0 12px rgba(244, 63, 94, 0.4);
    }

    /* ── Hot Topics Carousel ──────────────────────────── */
    .ht-carousel-wrap {
      position: relative;
      overflow: hidden;
    }
    .ht-track {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 0.5rem 0;
    }
    .ht-track::-webkit-scrollbar { display: none; }
    .ht-card {
      min-width: 280px;
      max-width: 320px;
      flex-shrink: 0;
      scroll-snap-align: start;
      background: rgba(13,21,38,0.85);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1rem;
      padding: 1.25rem;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .ht-card:hover {
      transform: translateY(-4px);
      border-color: rgba(192,21,42,0.4);
      box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 20px rgba(192,21,42,0.08);
    }
    .ht-card-verdict {
      display: inline-flex;
      align-items: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
    }
    .ht-verdict-kept { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.35); color: #4ade80; }
    .ht-verdict-broken { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.35); color: #f87171; }
    .ht-verdict-pending { background: rgba(245,200,66,0.15); border: 1px solid rgba(245,200,66,0.3); color: #f5c842; }
    .ht-verdict-partial { background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.3); color: #60a5fa; }
    .ht-vote-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      color: #7596c0;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 0.3rem 0.6rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .ht-vote-btn:hover { border-color: rgba(255,255,255,0.2); color: #fff; background: rgba(255,255,255,0.04); }
    .ht-vote-btn.ht-voted-up { border-color: rgba(74,222,128,0.4); color: #4ade80; }
    .ht-vote-btn.ht-voted-down { border-color: rgba(248,113,113,0.4); color: #f87171; }
    .ht-empty { text-align: center; padding: 2rem; color: #4e72a0; font-family: 'Barlow Condensed', sans-serif; font-size: 0.85rem; }
    .ht-skeleton {
      min-width: 280px;
      max-width: 320px;
      flex-shrink: 0;
      height: 180px;
      background: rgba(13,21,38,0.85);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 1rem;
      animation: pulse2 2s ease-in-out infinite;
    }

    /* ── Hot Topics: live community pulse strip ──────────── */
    .ht-stats {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 0.4rem 1.1rem; margin-bottom: 1.25rem; min-height: 1rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem;
      letter-spacing: 0.12em; text-transform: uppercase; color: #5f7da6;
    }
    .ht-stats .ht-stat { display: inline-flex; align-items: center; gap: 0.4rem; }
    .ht-stats .ht-stat b { color: #fff; font-weight: 700; font-size: 0.92rem; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; }
    .ht-stats .ht-stat-sep { color: rgba(255,255,255,0.12); }

    /* ── Hot Topics: view filter tabs ────────────────────── */
    .ht-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
    .ht-tab {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: #7596c0; background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08); border-radius: 999px;
      padding: 0.5rem 1.1rem; cursor: pointer; transition: all 0.22s ease;
    }
    .ht-tab:hover { color: #fff; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
    .ht-tab-active {
      color: #fff; background: rgba(192,21,42,0.18);
      border-color: rgba(192,21,42,0.5); box-shadow: 0 0 16px rgba(192,21,42,0.15);
    }

    /* ── Hot Topics: richer card internals ───────────────── */
    .ht-card { display: flex; flex-direction: column; position: relative; min-height: 212px; }
    .ht-card-hot { border-color: rgba(245,200,66,0.35); }
    .ht-card-hot:hover { border-color: rgba(245,200,66,0.6); box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 22px rgba(245,200,66,0.12); }
    .ht-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.7rem; }
    .ht-card-idwrap { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
    .ht-rank {
      font-family: 'Bebas Neue', sans-serif; font-size: 0.9rem; line-height: 1;
      color: #f5c842; background: rgba(245,200,66,0.12);
      border: 1px solid rgba(245,200,66,0.3); border-radius: 0.45rem;
      padding: 0.2rem 0.4rem; flex-shrink: 0;
    }
    .ht-avatar {
      width: 2rem; height: 2rem; border-radius: 0.5rem;
      background: rgba(192,21,42,0.2); border: 1px solid rgba(192,21,42,0.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem; flex-shrink: 0;
    }
    .ht-politician {
      font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.06em;
      color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ht-hot-flag {
      position: absolute; top: -0.6rem; right: 0.85rem; z-index: 2;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #1a1208; background: linear-gradient(135deg, #f5c842, #f59e0b);
      border-radius: 999px; padding: 0.15rem 0.55rem;
      box-shadow: 0 4px 12px rgba(245,158,11,0.35);
    }
    .ht-claim {
      color: #9fb4d4; font-size: 0.82rem; line-height: 1.55; margin-bottom: 0.75rem;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      overflow: hidden; flex-grow: 1;
    }
    .ht-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; min-width: 0; }
    .ht-meta {
      display: flex; align-items: center; gap: 0.3rem; min-width: 0;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem;
      letter-spacing: 0.04em; color: #5f7da6; white-space: nowrap; overflow: hidden;
    }
    .ht-meta .ht-by { color: #7596c0; overflow: hidden; text-overflow: ellipsis; }
    .ht-meta .ht-dot { color: rgba(255,255,255,0.18); }
    .ht-evidence {
      display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: #60a5fa;
      border: 1px solid rgba(96,165,250,0.25); border-radius: 0.45rem;
      padding: 0.2rem 0.45rem; text-decoration: none; transition: all 0.2s ease;
    }
    .ht-evidence:hover { color: #93c5fd; border-color: rgba(96,165,250,0.5); background: rgba(96,165,250,0.08); }
    /* ── Hot Topics: "See the evidence" drill-in to the Evidence Locker ──
       Gold accent (Evidence Locker language) distinguishes this issue-filtered
       jump from the blue raw "Source" link above it. Only rendered when the
       claim's text maps to a tracked issue that has evidence on record. */
    .ht-locker-row { margin: 0 0 0.55rem; }
    .ht-locker-link {
      display: inline-flex; align-items: center; gap: 0.32rem; max-width: 100%;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase; color: #f5c842;
      background: rgba(245,200,66,0.08); border: 1px solid rgba(245,200,66,0.3);
      border-radius: 0.45rem; padding: 0.3rem 0.55rem; cursor: pointer;
      text-decoration: none; transition: all 0.2s ease;
    }
    .ht-locker-link:hover { color: #ffe08a; border-color: rgba(245,200,66,0.6); background: rgba(245,200,66,0.14); }
    .ht-locker-link:focus-visible { outline: 2px solid rgba(245,200,66,0.7); outline-offset: 2px; }
    .ht-locker-link .ht-locker-iss {
      color: #cdd9ef; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
      opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    .ht-actions {
      display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
      padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.05);
    }
    .ht-score { font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: #7596c0; }
    .ht-score-pos { color: #4ade80; }
    .ht-score-neg { color: #f87171; }
    .ht-vote-group { display: flex; align-items: center; gap: 0.4rem; }

    /* ── Hot Topics: swipe hint ──────────────────────────── */
    .ht-scroll-hint {
      text-align: center; margin-top: 0.9rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem;
      letter-spacing: 0.18em; text-transform: uppercase; color: #3f5f8a;
    }

    /* ── Hot Topics: inviting empty state ────────────────── */
    .ht-empty-card {
      flex: 1 1 100%; width: 100%; text-align: center; padding: 2.75rem 1.5rem;
      background: radial-gradient(circle at 50% 0%, rgba(192,21,42,0.12), transparent 70%), rgba(13,21,38,0.7);
      border: 1px dashed rgba(192,21,42,0.35); border-radius: 1.25rem;
    }
    .ht-empty-icon { font-size: 2.6rem; margin-bottom: 0.5rem; }
    .ht-empty-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 0.06em; color: #fff; margin-bottom: 0.5rem; }
    .ht-empty-text { color: #9fb4d4; font-size: 0.9rem; line-height: 1.6; max-width: 30rem; margin: 0 auto 1.4rem; }
    .ht-empty-cta {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: #fff; background: linear-gradient(135deg, #c0152a, #7c1020);
      border: 1px solid rgba(245,200,66,0.3); border-radius: 0.85rem;
      padding: 0.85rem 1.6rem; cursor: pointer; transition: all 0.22s ease;
      box-shadow: 0 8px 24px rgba(192,21,42,0.3);
    }
    .ht-empty-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(192,21,42,0.4); }
    .ht-empty-steps {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 0.5rem 0.9rem; margin-top: 1.6rem;
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.7rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: #5f7da6;
    }
    .ht-empty-steps b { color: #f5c842; font-weight: 700; margin-right: 0.3rem; }
    .ht-empty-steps .ht-step-arrow { color: rgba(255,255,255,0.15); }

    /* ── Hot Topics: curated "This Cycle" spotlight topics ── */
    .ht-topics-label {
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      margin-bottom: 1.1rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #f5c842;
    }
    .ht-topics-label::before, .ht-topics-label::after {
      content: ''; height: 1px; flex: 1 1 auto; max-width: 4.5rem;
      background: linear-gradient(90deg, transparent, rgba(245,200,66,0.5));
    }
    .ht-topics-label::after { background: linear-gradient(90deg, rgba(245,200,66,0.5), transparent); }
    .ht-topics-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1rem; margin-bottom: 2rem;
    }
    .ht-topic-card {
      position: relative; display: flex; flex-direction: column;
      background: linear-gradient(180deg, rgba(13,21,38,0.92), rgba(10,15,30,0.92));
      border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem;
      padding: 1.4rem 1.3rem 1.3rem; overflow: hidden;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .ht-topic-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--tc, #c0152a), transparent 85%);
    }
    .ht-topic-card:hover {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--tc, #c0152a) 45%, transparent);
      box-shadow: 0 14px 34px rgba(0,0,0,0.45), 0 0 22px color-mix(in srgb, var(--tc, #c0152a) 14%, transparent);
    }
    .ht-topic-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
    .ht-topic-icon {
      width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 0.65rem;
      display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
      background: color-mix(in srgb, var(--tc, #c0152a) 16%, transparent);
      border: 1px solid color-mix(in srgb, var(--tc, #c0152a) 35%, transparent);
    }
    .ht-topic-tag {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--tc, #c0152a);
    }
    .ht-topic-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; line-height: 1.05;
      letter-spacing: 0.04em; color: #fff; margin-bottom: 0.55rem;
    }
    .ht-topic-desc {
      color: #9fb4d4; font-size: 0.84rem; line-height: 1.55;
      margin-bottom: 1.1rem; flex-grow: 1;
    }
    .ht-topic-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
    .ht-topic-btn {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #cbd9ec; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 0.6rem;
      padding: 0.55rem 0.85rem; cursor: pointer; text-decoration: none;
      transition: all 0.2s ease;
    }
    .ht-topic-btn:hover { color: #fff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); }
    .ht-topic-btn-primary {
      color: #fff; background: color-mix(in srgb, var(--tc, #c0152a) 22%, transparent);
      border-color: color-mix(in srgb, var(--tc, #c0152a) 55%, transparent);
    }
    .ht-topic-btn-primary:hover {
      background: color-mix(in srgb, var(--tc, #c0152a) 32%, transparent);
      border-color: color-mix(in srgb, var(--tc, #c0152a) 75%, transparent);
    }
    @media (max-width: 860px) {
      .ht-topics-grid { grid-template-columns: 1fr; gap: 0.85rem; }
    }

    /* ── Voter Education Hub ──────────────────────────── */
    .veh-card {
      background: rgba(13,21,38,0.9);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1.5rem;
      padding: 2rem 1.75rem 1.75rem;
      transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .veh-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--veh-color, #c0152a), transparent 80%);
      opacity: 0.6;
      transition: opacity 0.35s ease;
    }
    .veh-card::after {
      content: '';
      position: absolute;
      top: -50%; right: -50%;
      width: 100%; height: 100%;
      background: radial-gradient(circle, var(--veh-glow, rgba(192,21,42,0.08)) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .veh-card:hover {
      transform: translateY(-8px) scale(1.02);
      border-color: var(--veh-border-hover, rgba(192,21,42,0.45));
      box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px var(--veh-glow, rgba(192,21,42,0.1));
    }
    .veh-card:hover::before { opacity: 1; }
    .veh-card:hover::after { opacity: 1; }
    .veh-icon-wrap {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      margin-bottom: 1rem;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }
    .veh-step-badge {
      position: absolute;
      top: -0.4rem;
      right: -0.4rem;
      width: 1.4rem;
      height: 1.4rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 0.75rem;
      color: #fff;
      z-index: 2;
    }
    .veh-card h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.25rem;
      letter-spacing: 0.08em;
      color: #fff;
      margin-bottom: 0.6rem;
      line-height: 1.2;
    }
    .veh-card p {
      font-family: 'Barlow', sans-serif;
      font-size: 0.875rem;
      color: #8ba3c7;
      line-height: 1.6;
      margin-bottom: 1rem;
      flex: 1;
    }
    .veh-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: auto;
    }
    .veh-links a {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.35rem 0.7rem;
      border-radius: 0.5rem;
      text-decoration: none;
      transition: all 0.2s ease;
      border: 1px solid;
    }
    .veh-links a:hover { transform: translateY(-1px); }
    .veh-hub-subtitle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .veh-hub-subtitle span {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .veh-hub-subtitle .veh-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      flex-shrink: 0;
    }
    .veh-hub-subtitle .veh-dot-bullet {
      color: rgba(255,255,255,0.35);
      font-size: 1.2rem;
      line-height: 1;
      flex-shrink: 0;
    }
    @media (max-width: 640px) {
      .veh-card { padding: 1.5rem 1.25rem 1.25rem; }
      .veh-card h3 { font-size: 1.1rem; }
    }

    /* ── My Notes in Modal ──────────────────────────── */
    .my-notes-area {
      width: 100%;
      min-height: 100px;
      max-height: 200px;
      background: rgba(10,15,30,0.7);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 0.75rem;
      color: #9fb4d4;
      font-family: 'Barlow', sans-serif;
      font-size: 0.85rem;
      padding: 0.75rem;
      resize: vertical;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .my-notes-area:focus { border-color: rgba(192,21,42,0.5); }
    .my-notes-area::placeholder { color: #4e72a0; }
    .my-notes-save-indicator {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: opacity 0.3s ease;
    }

    /* ── Follow the Money Modal Section ──────────────── */
    .ftm-modal-wrap {
      background: rgba(10,15,30,0.5);
      border: 1px solid rgba(74,222,128,0.15);
      border-radius: 0.875rem;
      overflow: hidden;
    }
    .ftm-modal-header {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.6rem 0.875rem;
      background: rgba(74,222,128,0.06);
      border-bottom: 1px solid rgba(74,222,128,0.12);
    }
    .ftm-modal-donor-row {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.5rem 0.875rem;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.14s;
    }
    .ftm-modal-donor-row:last-child { border-bottom: none; }
    @media (hover: hover) { .ftm-modal-donor-row:hover { background: rgba(255,255,255,0.025); } }
    .ftm-integrity-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem; letter-spacing: 0.06em;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      border: 2px solid;
    }
    .ftm-integrity-high { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.4); color: #4ade80; }
    .ftm-integrity-mid { background: rgba(245,200,66,0.12); border-color: rgba(245,200,66,0.4); color: #f5c842; }
    .ftm-integrity-low { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.4); color: #f87171; }
    .ftm-bar-corp { background: linear-gradient(90deg, #ff8a8a, #ff6b6b); border-radius: 4px; height: 10px; transition: width 1s ease; }
    .ftm-bar-small { background: linear-gradient(90deg, #7cc4ff, #60a5fa); border-radius: 4px; height: 10px; transition: width 1s ease; }
    .ftm-follow-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.7rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.5rem 1rem;
      border-radius: 0.625rem;
      border: 1px solid rgba(74,222,128,0.3);
      background: rgba(74,222,128,0.08);
      color: #4ade80;
      cursor: pointer;
      transition: all 0.2s;
    }
    .ftm-follow-btn:hover { background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.5); }
    .ftm-follow-btn.ftm-following {
      background: rgba(74,222,128,0.2);
      border-color: rgba(74,222,128,0.6);
      color: #86efac;
    }

    /* ── Follow the Money Leaderboard ──────────────── */
    .ftm-lb-card {
      background: linear-gradient(135deg, rgba(17,29,54,0.9), rgba(13,21,38,0.95));
      border: 1px solid rgba(74,222,128,0.12);
      border-radius: 1rem;
      padding: 1.25rem;
      transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .ftm-lb-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #4ade80, #22c55e);
    }
    .ftm-lb-card:hover {
      border-color: rgba(74,222,128,0.3);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(74,222,128,0.08);
    }
    .ftm-lb-rank {
      position: absolute; top: 0.5rem; right: 0.75rem;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2rem; color: rgba(74,222,128,0.12);
      line-height: 1;
    }
    .ftm-lb-nw-change {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.3rem; line-height: 1;
    }
    .ftm-lb-nw-up { color: #f87171; }
    .ftm-lb-nw-down { color: #4ade80; }

    /* ════════════════════════════════════════════════════════════
       COHESIVE POLISH PASS — Spacing, alignment & mobile
       ════════════════════════════════════════════════════════════ */

    /* ── Global tap highlight removal for buttery mobile ────── */
    a, button, select, input, textarea, [onclick], .dir-card,
    .pm-filter-chip, .browse-scope-btn, .browse-chip, .filter-chip,
    .veh-tool-card, .veh-card, .agenda-card, .ftm-lb-card {
      -webkit-tap-highlight-color: transparent;
    }

    /* ── Consistent section badge pill spacing ────────────────── */
    #hot-topics .text-center .inline-flex,
    #voter-education .text-center .inline-flex,
    #our-mission .text-center .inline-flex,
    #wealth-leaderboard .text-center .inline-flex,
    #follow-the-money .text-center .inline-flex,
    #submit .inline-flex,
    #methodology .text-center .inline-flex,
    #compare-hub .text-center .inline-flex {
      margin-bottom: 1.125rem;
    }

    /* ── Consistent section title bottom margin ───────────────── */
    #hot-topics .section-title,
    #voter-education .section-title,
    #our-mission .section-title,
    #wealth-leaderboard .section-title,
    #follow-the-money .section-title,
    #methodology .section-title {
      margin-bottom: 0.75rem;
    }

    /* ── Tighter footer ───────────────────────────────────────── */
    footer {
      padding-top: 3rem !important;
      padding-bottom: 2.5rem !important;
    }
    @media (min-width: 768px) {
      footer {
        padding-top: 3.5rem !important;
        padding-bottom: 3rem !important;
      }
    }
    footer .border-t.pt-6 {
      padding-top: 1.25rem;
      gap: 0.75rem;
    }
    footer .grid {
      margin-bottom: 2rem;
    }

    /* ── Footer column headings: consistent vertical rhythm ──── */
    footer .grid .text-white.font-700 {
      margin-bottom: 0.75rem;
    }
    footer .flex.flex-col.gap-2\.5 {
      gap: 0.5rem;
    }

    /* ── Hot Topics section: tighter header spacing ────────────── */
    #hot-topics .text-center {
      margin-bottom: 1.5rem;
    }

    /* ── FTM Leaderboard: match hot topics spacing ────────────── */
    #ftm-leaderboard .text-center {
      margin-bottom: 1.5rem;
    }

    /* ── Voter Education Hub: tighter card gap on mobile ──────── */
    @media (max-width: 640px) {
      #voter-education .grid {
        gap: 1rem;
      }
      #voter-education .text-center {
        margin-bottom: 2.5rem;
      }
    }

    /* ── Voter Education CTA box: align spacing ───────────────── */
    #voter-education .text-center.mt-12 {
      margin-top: 2.5rem;
    }

    /* ── How It Works cards: consistent gap and padding ─────── */
    .section-py + #submit,
    #submit {
      scroll-margin-top: 80px;
    }

    /* ── Submit section: balanced internal spacing on mobile ──── */
    @media (max-width: 640px) {
      #submit .p-8 { padding: 1.5rem !important; }
      #submit .rounded-3xl { border-radius: 1.5rem !important; }
      #submit h2 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    }

    /* ── Methodology cards: tighter gap ────────────────────────── */
    #methodology .bg-navy-800\/70 + .bg-navy-800\/70 {
      margin-top: 0;
    }
    #methodology .mb-5 {
      margin-bottom: 1rem;
    }

    /* ── FTM sector buttons: better mobile wrap ───────────────── */
    @media (max-width: 480px) {
      #follow-the-money .bg-navy-800\/70 .flex[style*="gap:0"] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem !important;
      }
      #follow-the-money .bg-navy-800\/70 .flex[style*="gap:0"] button {
        border-radius: 0.4rem !important;
        flex: 0 0 auto;
      }
    }

    /* ── Wealth Leaderboard tab buttons: mobile sizing ──────── */
    @media (max-width: 480px) {
      #wealth-leaderboard button[onclick^="setWealthTab"] {
        font-size: 0.68rem !important;
        padding: 0.7rem 0.65rem !important;
      }
      #wealth-leaderboard button[onclick^="setWealthSort"] {
        font-size: 0.58rem !important;
        padding: 0.4rem 0.65rem !important;
      }
    }

    /* ── Browse All Politicians panel: tighter top gap ────────── */
    #myteam-browse-panel .browse-toolbar {
      margin-bottom: 0.75rem;
    }

    /* ── My Team section: tighter card grid gap on mobile ─────── */
    @media (max-width: 640px) {
      #myteam-selected-panel .grid {
        gap: 0.625rem;
      }
      #myteam-selected-panel .p-6 {
        padding: 1.25rem !important;
      }
    }

    /* ── People's Mandate: agenda grid tighter on mobile ──────── */
    @media (max-width: 480px) {
      #agenda-grid {
        gap: 0.75rem !important;
      }
      #agenda .mandate-stat-bar {
        margin-bottom: 1.5rem;
      }
      #agenda .rh-filter-bar {
        margin-bottom: 1rem;
      }
    }

    /* ── Consistent card border-radius across all sections ────── */
    .ftm-lb-card,
    .veh-card,
    .dir-card.card-holo {
      border-radius: 1rem;
    }

    /* ── Election countdown section: tighter bottom spacing ──── */
    #election-countdown {
      padding-bottom: 3rem;
    }
    @media (min-width: 768px) {
      #election-countdown {
        padding-bottom: 4rem;
      }
    }

    /* ── Our Mission: tighter CTA grid gap on mobile ──────────── */
    @media (max-width: 640px) {
      #our-mission .grid {
        gap: 0.75rem;
      }
      #our-mission .grid > a {
        padding: 1.25rem;
      }
    }

    /* ── Consistent disclaimer box spacing ─────────────────────── */
    #follow-the-money [style*="max-width:48rem"][style*="margin:1.25rem"],
    #wealth-leaderboard [style*="max-width:48rem"][style*="margin:1.25rem"] {
      margin-top: 1rem !important;
      margin-bottom: 0 !important;
    }

    /* ── Color legend dots: consistent sizing ──────────────────── */
    #follow-the-money .flex.items-center.justify-center.gap-6,
    #wealth-leaderboard .flex.items-center.justify-center.gap-6 {
      margin-top: 1.25rem;
      gap: 1.25rem;
    }

    /* ── Browse scope toggle: better mobile touch ────────────── */
    @media (max-width: 480px) {
      .browse-scope-btn {
        padding: 0.85rem 0.65rem;
        font-size: 0.88rem;
        gap: 0.5rem;
      }
    }

    /* ── Smooth image loading placeholders ─────────────────────── */
    .dir-card-photo, .pm-card-photo, .modal-headshot,
    .cmp-col-avatar, .ftm-lb-card [style*="border-radius:50%"] {
      background: rgba(30,53,96,0.4);
    }

    /* ── Trending Reforms carousel: consistent card radius ────── */
    .tr-slide {
      border-radius: 1rem;
    }

    /* ── Nav: consistent bottom border glow ────────────────────── */
    nav {
      border-bottom-color: rgba(255,255,255,0.04) !important;
    }

    /* ── Improved modal body bottom padding for safe area ──────── */
    #modal-content {
      padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* ── Scrollbar styling for main content: subtle ────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: rgba(10,15,30,0.3); }
    ::-webkit-scrollbar-thumb { background: rgba(159,180,212,0.15); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(159,180,212,0.25); }

    /* ── Improved text readability: slightly warmer body text ──── */
    .text-steel-300 { color: #a3b8d4; }
    .text-steel-400 { color: #8098b8; }

    /* ── CTA button pair in hero: equal visual weight ─────────── */
    .btn-voter-hub {
      background: linear-gradient(135deg, #c0152a 0%, #a01025 100%);
      border: 2px solid rgba(192,21,42,0.6);
      box-shadow: 0 6px 28px rgba(192,21,42,0.3), 0 0 16px rgba(192,21,42,0.1);
    }
    .btn-my-politicians {
      border-color: rgba(245,200,66,0.45);
      color: #f5c842;
      background: rgba(245,200,66,0.06);
    }
    .btn-my-politicians:hover {
      border-color: rgba(245,200,66,0.7);
      background: rgba(245,200,66,0.12);
      color: #fad96a;
    }
    .btn-follow-money {
      border-color: rgba(74,222,128,0.35);
      color: #4ade80;
      background: rgba(74,222,128,0.06);
    }
    .btn-follow-money:hover {
      border-color: rgba(74,222,128,0.6);
      background: rgba(74,222,128,0.12);
      color: #86efac;
    }

    /* ── Voter Education Hub card unified styles ───────────────── */
    .veh-card {
      background: rgba(10,15,30,0.8);
      border: 1.5px solid rgba(255,255,255,0.07);
      border-radius: 1.25rem;
      padding: 1.75rem 1.5rem;
      transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
      position: relative;
      overflow: hidden;
    }
    .veh-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--veh-color), transparent);
      opacity: 0.6;
    }
    @media (hover: hover) {
      .veh-card:hover {
        border-color: var(--veh-border-hover, rgba(255,255,255,0.15));
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px var(--veh-glow, transparent);
      }
    }
    .veh-card h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.25rem;
      letter-spacing: 0.08em;
      color: white;
      margin-bottom: 0.5rem;
    }
    .veh-card p {
      font-size: 0.82rem;
      line-height: 1.65;
      color: #8098b8;
      margin-bottom: 1rem;
    }
    .veh-card .veh-icon-wrap {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 1rem;
      position: relative;
    }
    .veh-card .veh-step-badge {
      position: absolute;
      top: -0.3rem;
      right: -0.3rem;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      color: white;
      border: 2px solid rgba(10,15,30,0.9);
    }
    .veh-card .veh-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .veh-card .veh-links a {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.35rem 0.65rem;
      border-radius: 0.5rem;
      border: 1px solid;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .veh-card .veh-links a:hover {
      filter: brightness(1.2);
      transform: translateY(-1px);
    }

    /* ── Voter Education Hub subtitle dot bullets ──────────────── */
    .veh-hub-subtitle {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
    }
    .veh-dot-bullet {
      color: rgba(255,255,255,0.2);
      font-size: 0.5rem;
    }

    /* ── Consistent active filter chip animation ───────────────── */
    .browse-chip, .rh-chip, .filter-chip {
      transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    }

    /* ── Smooth page-level transitions when navigating ─────────── */
    section {
      scroll-margin-top: 76px;
    }

    /* ── Better keyboard focus for form fields ─────────────────── */
    .submit-inner input:focus,
    .submit-inner textarea:focus,
    .submit-inner select:focus {
      border-color: rgba(192,21,42,0.5);
      box-shadow: 0 0 0 3px rgba(192,21,42,0.12), 0 0 12px rgba(192,21,42,0.06);
    }

    /* ══════════════════════════════════════════════════════════
       FINAL VISUAL POLISH v2 — Cohesion, spacing & mobile
       ══════════════════════════════════════════════════════════ */

    /* ── iOS: prevent auto-zoom on input focus ─────────────── */
    @media (max-width: 767px) {
      input[type="text"],
      input[type="url"],
      input[type="email"],
      textarea,
      select {
        font-size: 16px !important;
      }
    }

    /* ── Subtle inter-section seam for visual rhythm ──────── */
    #hot-topics,
    #voter-education,
    #trending-reforms,
    #tracker,
    #compare-hub,
    #wealth-leaderboard,
    #follow-the-money,
    #submit,
    #methodology {
      border-top: 1px solid rgba(255,255,255,0.025);
    }

    /* ── Mobile: prevent horizontal overflow globally ──────── */
    @media (max-width: 767px) {
      body, main, section { overflow-x: hidden; max-width: 100vw; }
    }

    /* ── Mobile menu: consistent tap targets ───────────────── */
    @media (max-width: 767px) {
      #mobileMenu a {
        min-height: 48px;
        display: flex;
        align-items: center;
      }
    }

    /* ── Hero: tighter on small mobile ─────────────────────── */
    @media (max-width: 480px) {
      #hero .tagline-box {
        margin-bottom: 1.5rem;
        padding: 0.5rem 0.875rem;
      }
      #hero .hero-body {
        margin-bottom: 1.75rem;
      }
      #hero .mt-8.sm\:mt-10 {
        margin-top: 1.5rem;
      }
    }

    /* ── FTM sector buttons: smooth hover on desktop ──────── */
    #follow-the-money [onclick^="setFTMSector"] {
      transition: all 0.22s ease;
    }
    @media (hover: hover) {
      #follow-the-money [onclick^="setFTMSector"]:hover {
        background: rgba(74,222,128,0.1) !important;
        color: #86efac !important;
      }
    }

    /* ── Our Mission CTA grid: lift on hover ───────────────── */
    @media (hover: hover) {
      #our-mission .grid > a:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(0,0,0,0.35);
      }
    }

    /* ── Wealth leaderboard: tab button consistency ─────────── */
    #wealth-leaderboard button[onclick^="setWealthTab"],
    #wealth-leaderboard button[onclick^="setWealthSort"] {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 0.08em;
      transition: all 0.22s ease;
    }

    /* ── Browse panel: consistent grid gap ──────────────────── */
    #myteam-browse-panel .grid.grid-cols-1 {
      gap: 0.625rem;
    }

    /* ── Footer: separator refinement ──────────────────────── */
    footer {
      border-top-color: rgba(255,255,255,0.06) !important;
    }
    footer .border-t.pt-5 {
      padding-top: 1.25rem;
      gap: 0.625rem;
    }
    footer .flex-wrap.items-center.justify-center.gap-4 {
      gap: 0.75rem;
    }

    /* ── Agenda section: consistent header spacing ──────────── */
    #agenda .text-center {
      margin-bottom: 1.75rem;
    }

    /* ── Hide horizontal scrollbars on scroll containers ──── */
    .browse-scope-toggle,
    #district-selector,
    #pm-quickjump-nav { scrollbar-width: none; }
    .browse-scope-toggle::-webkit-scrollbar,
    #district-selector::-webkit-scrollbar,
    #pm-quickjump-nav::-webkit-scrollbar { display: none; }

    /* ── Consistent hover transition on all anchor-cards ──── */
    #our-mission .grid > a,
    #voter-education .veh-card,
    .agenda-card,
    .dir-card {
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Consistent badge pill micro-padding ─────────────── */
    section .inline-flex.items-center.rounded-full {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    /* ── Better color contrast: steel-500 tweak ──────────── */
    .text-steel-500 { color: #5e82ab; }

    /* ── Trending reforms: header spacing on mobile ─────────── */
    @media (max-width: 640px) {
      #trending-reforms .text-center {
        margin-bottom: 1.5rem;
      }
      #trending-reforms .section-title {
        font-size: clamp(1.8rem, 9vw, 3rem) !important;
      }
    }

    /* ── Methodology: tighter accordion gap ─────────────────── */
    #methodology .space-y-4 > div + div,
    #methodology .space-y-6 > div + div {
      margin-top: 0.75rem;
    }

    /* ── Election countdown: consistent bottom margin ──────── */
    #election-countdown + section {
      margin-top: 0;
    }

    /* ── Browse toolbar: align with card grid edges ────────── */
    #myteam-browse-panel .browse-toolbar {
      margin-left: 0;
      margin-right: 0;
    }

    /* ── Card photo placeholders: consistent size ──────────── */
    .dir-card-photo,
    .pm-card-photo,
    .tracker-hs {
      flex-shrink: 0;
    }

    /* ── Mobile: tighter padding on election countdown ─────── */
    @media (max-width: 480px) {
      #election-countdown {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }
    }

    /* ── Smooth focus transition for all inputs ────────────── */
    input, textarea, select {
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* ── My Team stats grid: tighter on mobile ─────────────── */
    @media (max-width: 480px) {
      #myteam-stats .grid {
        gap: 0.5rem;
      }
      #myteam-stats .grid > div {
        padding: 0.625rem;
      }
      #myteam-stats .font-display.text-3xl {
        font-size: 1.5rem;
      }
    }

    /* ── Consistent max-width constraint on all sections ──── */
    #hot-topics > div,
    #voter-education > .relative,
    #our-mission > .max-w-4xl,
    #trending-reforms > div {
      max-width: 72rem;
      margin-left: auto;
      margin-right: auto;
    }

    /* =========================================================================
       ─── POLITIDEX COMPREHENSIVE FINAL VISUAL POLISH OVERRIDES ───────────────
       ========================================================================= */

    /* ── Better Typography & Global Flow ────────────────────────────────── */
    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* ── Premium Scrollbars for All Containers ──────────────────────────── */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0a0f1e;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 99px;
      border: 2px solid #0a0f1e;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(192, 21, 42, 0.45);
    }

    /* ── Top Nav Premium Glassmorphism & Indent Underline ───────────────── */
    nav {
      backdrop-filter: blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
      background: rgba(10, 15, 30, 0.82) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Elegant underline slide effect on desktop nav links */
    nav .nav-link {
      position: relative;
      color: #9fb4d4;
      transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s ease;
    }
    nav .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #c0152a, #f5c842);
      border-radius: 99px;
      transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    nav .nav-link:hover {
      color: #fff !important;
    }
    nav .nav-link:hover::after {
      width: 100%;
      left: 0;
    }

    /* ── Patriot Premium Button Styles, Gradients & Shadows ─────────────── */
    .btn-glow, 
    button:not(.close-btn):not(.browse-search-clear), 
    a.btn-tap {
      border-radius: 0.75rem;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    
    /* Tactile interaction feel */
    button:active, 
    a.btn-tap:active {
      transform: scale(0.96) !important;
    }

    /* Primary Crimson Red Patriotic Polish */
    .bg-crimson-600 {
      background: linear-gradient(135deg, #c0152a 0%, #a00f20 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 4px 14px rgba(192, 21, 42, 0.35) !important;
    }
    .bg-crimson-600:hover {
      background: linear-gradient(135deg, #d91a31 0%, #b01224 100%) !important;
      box-shadow: 0 6px 20px rgba(192, 21, 42, 0.5), 0 0 12px rgba(192, 21, 42, 0.2) !important;
      transform: translateY(-1px);
    }

    /* Blue Interactive Accents Polish */
    .bg-blue-600 {
      background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
    }
    .bg-blue-600:hover {
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45), 0 0 12px rgba(59, 130, 246, 0.2) !important;
      transform: translateY(-1px);
    }

    /* ── My Team Ballot Slots Polish ────────────────────────────────────── */
    /* Per-office colors come from the --slot-color variable on the canonical
       .myteam-slot / .myteam-slot-empty rules above. This block only keeps the
       shared layout tweaks, so each office tint is never flattened to one color. */
    .myteam-slots-grid {
      gap: 1.15rem !important;
    }
    .myteam-slot, .myteam-slot-empty { backdrop-filter: blur(8px); }

    /* ── Beautiful Rarity Cards & Hover Glows ────────────────────────────── */
    .card-holo {
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      background: linear-gradient(145deg, rgba(17, 29, 54, 0.9) 0%, rgba(10, 15, 30, 0.98) 100%) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    }
    @media (hover: hover) {
      .card-holo:hover {
        border-color: rgba(255, 255, 255, 0.18) !important;
        transform: translateY(-6px) scale(1.015) !important;
      }
    }

    /* ── Expandable Accordion Headers and Sections ────────────────────────── */
    .browse-type-group {
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      background: rgba(13, 21, 38, 0.85) !important;
    }
    .browse-type-group.expanded {
      border-color: rgba(59, 130, 246, 0.3) !important;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(59, 130, 246, 0.08) !important;
    }
    .browse-type-header {
      padding: 1.25rem 1.65rem !important;
      background: linear-gradient(90deg, rgba(22, 39, 74, 0.6) 0%, rgba(13, 21, 38, 0.95) 100%) !important;
    }
    .browse-type-header:hover {
      background: linear-gradient(90deg, rgba(30, 53, 96, 0.75) 0%, rgba(13, 21, 38, 0.98) 100%) !important;
    }
    
    .browse-sub-header {
      padding: 1rem 1.25rem !important;
      background: linear-gradient(90deg, rgba(30, 53, 96, 0.3) 0%, rgba(17, 29, 54, 0.6) 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .browse-sub-header:hover {
      background: linear-gradient(90deg, rgba(30, 53, 96, 0.45) 0%, rgba(17, 29, 54, 0.75) 100%) !important;
      border-color: rgba(255, 255, 255, 0.15) !important;
    }

    /* ── Clean Comment Threads Polish ────────────────────────────────────── */
    .cm-comment-entry {
      background: rgba(255, 255, 255, 0.02) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      transition: all 0.2s ease;
    }
    .cm-comment-entry:hover {
      background: rgba(255, 255, 255, 0.035) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      transform: translateY(-1px);
    }
    
    /* Indented comment replies vertical patriotic line guide */
    .ml-8.sm\:ml-12.mt-2.pl-4.border-l-2.border-white\/5 {
      border-left: 2px solid rgba(59, 130, 246, 0.35) !important;
      padding-left: 1.25rem !important;
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }

    /* ── Butter-Smooth Sticky Filter Toolbar ─────────────────────────────── */
    .browse-toolbar {
      background: rgba(13, 21, 38, 0.94) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0,0,0,0.2) !important;
    }
    .browse-toolbar.is-stuck {
      border-color: rgba(59, 130, 246, 0.35) !important;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 32px rgba(59, 130, 246, 0.12) !important;
    }

    /* ── Premium Mobile Flow & Zero Cramp Padding/Spacing ────────────────── */
    @media (max-width: 768px) {
      /* Fluid section spacing with elegant breathing room */
      section, .section-py {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
      }
      
      /* Make touch targets large, comfy, and precise */
      button, a.btn-tap, .browse-filter-select, select, input, textarea {
        min-height: 48px !important;
      }
      
      /* Better Mobile Card Padding & Clean Alignment */
      .pm-card, .dir-card, .ftm-lb-card {
        padding: 1.15rem !important;
        margin-bottom: 0.5rem;
      }
      
      /* Smooth horizontal scroll containers with visual fading edges */
      #pm-quickjump-nav {
        padding: 0.25rem 0.5rem 0.75rem !important;
        mask-image: linear-gradient(to right, transparent, white 5%, white 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, white 5%, white 95%, transparent);
      }
      
      /* Elegant non-cramped inputs spacing */
      .browse-filters-row {
        gap: 0.65rem !important;
        margin-bottom: 0.75rem !important;
      }
    }

    @media (max-width: 480px) {
      /* Ultimate mobile scale and spacing optimizations */
      .hero-title {
        font-size: clamp(2.4rem, 12vw, 4rem) !important;
        line-height: 1.15 !important;
      }
      
      /* Comfortable visual container padding on micro devices */
      #voter-hub .pm-location-bar {
        padding: 1.25rem !important;
        gap: 0.85rem !important;
        border-radius: 1rem !important;
      }
      
      #voter-hub .pm-location-bar [style*="font-size:4.25rem"] {
        font-size: 1.75rem !important;
      }
      
      /* Keep grid elements neatly separated and perfectly legible */
      .myteam-slots-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
      }
      
      /* Align text and content with perfect margin balance */
      body {
        font-size: 0.95rem;
      }
      
      /* Compact, premium looking footer */
      footer {
        padding-top: 2.5rem !important;
        padding-bottom: 3.5rem !important;
      }
    }

    /* Custom Chat tab active state */
    .chat-tab-btn.active {
      background: linear-gradient(135deg, rgba(192,21,42,0.2) 0%, rgba(30,53,96,0.3) 100%) !important;
      color: #fff !important;
      border-color: rgba(192,21,42,0.5) !important;
      box-shadow: 0 0 12px rgba(192,21,42,0.15);
    }
    
    /* Hierarchical expanding selectors for accordion tree */
    .expanded > .browse-sub-body {
      max-height: 50000px !important;
    }
    .expanded svg.transition-transform {
      transform: rotate(180deg);
    }

    /* ── All Politicians / Promise Tracker AND Relevant to Me — compact, mobile-friendly
       accordion map ──
       Scoped to #myteam-browse-grid and #relevant-browse-grid so the full
       office → state → district/county map reads at a glance with minimal scrolling,
       headers stay tight, and cards never get cut off. Both sections share the exact
       same compact hierarchical accordion tree style. */

    /* Top-level OFFICE-TYPE headers — compact on every screen (overrides the bulkier
       desktop rule above) so the whole list of offices fits quickly. */
    #myteam-browse-grid .browse-type-group,
    #relevant-browse-grid .browse-type-group { margin-bottom: 0.6rem; border-radius: 0.9rem; }
    #myteam-browse-grid .browse-type-header,
    #relevant-browse-grid .browse-type-header { padding: 0.7rem 1rem !important; min-height: 54px; gap: 0.7rem; }
    #myteam-browse-grid .browse-type-icon,
    #relevant-browse-grid .browse-type-icon { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; border-radius: 0.6rem; }
    #myteam-browse-grid .browse-type-name,
    #relevant-browse-grid .browse-type-name { font-size: 1.3rem; letter-spacing: 0.06em; }
    #myteam-browse-grid .browse-type-count,
    #relevant-browse-grid .browse-type-count { font-size: 0.7rem; padding: 0.15rem 0.55rem; margin-left: 0.35rem; }
    #myteam-browse-grid .browse-type-chevron-wrap,
    #relevant-browse-grid .browse-type-chevron-wrap { width: 2.15rem; height: 2.15rem; }
    #myteam-browse-grid .browse-type-inner,
    #relevant-browse-grid .browse-type-inner { padding: 0.55rem 0.65rem 0.7rem; }

    /* STATE sub-headers (rendered with utility classes) — tighter rows + spacing. */
    #myteam-browse-grid .browse-sub-group,
    #relevant-browse-grid .browse-sub-group { margin-bottom: 0.55rem !important; }
    #myteam-browse-grid .browse-sub-group > button,
    #relevant-browse-grid .browse-sub-group > button { padding: 0.55rem 0.85rem !important; min-height: 42px !important; }
    #myteam-browse-grid .browse-sub-body > .p-3,
    #relevant-browse-grid .browse-sub-body > .p-3 { padding: 0.6rem !important; }
    #myteam-browse-grid .browse-sub-body .space-y-3 > * + *,
    #relevant-browse-grid .browse-sub-body .space-y-3 > * + * { margin-top: 0.55rem !important; }

    /* DISTRICT / COUNTY sub-headers — the tightest, innermost level. */
    #myteam-browse-grid [id^="browse-dist-"],
    #relevant-browse-grid [id^="relevant-browse-dist-"] { margin-bottom: 0.45rem; }
    #myteam-browse-grid [id^="browse-dist-"] > button,
    #relevant-browse-grid [id^="relevant-browse-dist-"] > button { padding: 0.4rem 0.7rem !important; min-height: 34px !important; }
    #myteam-browse-grid [id^="browse-dist-"] .p-2,
    #relevant-browse-grid [id^="relevant-browse-dist-"] .p-2 { padding: 0.5rem !important; }

    /* Balanced, readable cards: the score + alignment + issue-tag row wraps cleanly
       instead of being squeezed or clipped. */
    #myteam-browse-grid .chub-card,
    #relevant-browse-grid .chub-card { padding: 0.9rem; }
    #myteam-browse-grid .chub-card .flex.items-center.gap-3,
    #relevant-browse-grid .chub-card .flex.items-center.gap-3 { flex-wrap: wrap; gap: 0.6rem; }

    @media (max-width: 640px) {
      /* Card grid: always a single column on phones so nothing is cut off — overrides the
         broad #myteam-browse-panel .grid → two-column rule (higher specificity + later). */
      #myteam-browse-grid .grid.grid-cols-1,
      #relevant-browse-grid .grid.grid-cols-1 { grid-template-columns: 1fr !important; gap: 0.6rem !important; }

      /* Even tighter office headers on phones. */
      #myteam-browse-grid .browse-type-header,
      #relevant-browse-grid .browse-type-header { padding: 0.65rem 0.8rem !important; min-height: 50px; gap: 0.55rem; }
      #myteam-browse-grid .browse-type-icon,
      #relevant-browse-grid .browse-type-icon { width: 2.15rem; height: 2.15rem; font-size: 1.05rem; }
      #myteam-browse-grid .browse-type-name,
      #relevant-browse-grid .browse-type-name { font-size: 1.15rem; letter-spacing: 0.04em; }
      #myteam-browse-grid .browse-type-inner,
      #relevant-browse-grid .browse-type-inner { padding: 0.45rem 0.5rem 0.6rem; }

      /* Compact, balanced cards on phones; let the issue tags claim their own line. */
      #myteam-browse-grid .chub-card,
      #relevant-browse-grid .chub-card { padding: 0.8rem; }
      #myteam-browse-grid .chub-card .chub-score,
      #relevant-browse-grid .chub-card .chub-score { font-size: 1.9rem; }
      #myteam-browse-grid .chub-card .flex.items-center.gap-3,
      #relevant-browse-grid .chub-card .flex.items-center.gap-3 { gap: 0.55rem; }
      #myteam-browse-grid .chub-card .flex.items-center.gap-3 > .flex.flex-wrap,
      #relevant-browse-grid .chub-card .flex.items-center.gap-3 > .flex.flex-wrap { flex-basis: 100%; }
    }

    /* ── Promise Tracker / All Politicians — PREMIUM & SPACIOUS spacing polish ──────────────────
       Scoped to #myteam-browse-grid ONLY, so the Voter Hub, Relevant to Me,
       team builder, navigation, colors and every other section stay exactly as
       they were. Goal: make the politician cards look modern, clean, and luxurious. */

    /* Cards: generous internal padding & premium design */
    #myteam-browse-grid .chub-card {
      padding: 1.15rem 1.35rem !important;
      border-radius: 1.15rem !important;
      background: linear-gradient(135deg, #0d1526 0%, #0a0f1e 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    #myteam-browse-grid .chub-card:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(96, 165, 250, 0.25) !important;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.1) !important;
    }

    /* ── Incumbent vs Candidate hierarchy INSIDE the Database Expansion grid ──────
       The base #myteam-browse-grid .chub-card rules above use !important for the
       card chrome, so the unscoped .is-incumbent / .is-candidate styles can never
       win here. These id-scoped !important rules restore (and amplify) that
       hierarchy: incumbents become the premium "hero" card, candidates become a
       lighter, flatter, clearly-secondary card. */

    /* Current officeholders — premium weight: brighter background, green frame,
       layered glow, and a gold→green accent bar across the top edge. */
    #myteam-browse-grid .chub-card.is-incumbent {
      background: linear-gradient(135deg, #16284a 0%, #0b1428 100%) !important;
      border: 1.5px solid rgba(34, 197, 94, 0.55) !important;
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 26px rgba(34, 197, 94, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
      padding-top: 1.55rem !important;
    }
    #myteam-browse-grid .chub-card.is-incumbent::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: auto !important;
      height: 4px !important;
      background: linear-gradient(90deg, #fbbf24 0%, #22c55e 52%, #4ade80 100%) !important;
      opacity: 1 !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }
    #myteam-browse-grid .chub-card.is-incumbent:hover {
      transform: translateY(-4px) !important;
      border-color: rgba(74, 222, 128, 0.78) !important;
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3), 0 18px 46px rgba(0, 0, 0, 0.6), 0 0 32px rgba(34, 197, 94, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    }

    /* Candidates — deliberately the secondary tier: flat, low-contrast surface,
       hairline neutral border, no glow, tighter padding, smaller name. */
    /* Candidates — a clear, intentional BLUE secondary tier. Solid blue frame, a
       faint navy lift and a blue top rail give them real weight and an on-the-ballot
       identity, while a softer glow and slightly smaller name keep them a step below
       the green incumbent hero. (No more flat grey hairline that read as unfinished.) */
    #myteam-browse-grid .chub-card.is-candidate {
      background: linear-gradient(135deg, rgba(22,38,70,0.92) 0%, rgba(11,18,36,0.95) 100%) !important;
      border: 1.5px solid rgba(96, 165, 250, 0.45) !important;
      border-radius: 0.9rem !important;
      box-shadow: 0 0 0 1px rgba(96,165,250,0.12), 0 10px 26px rgba(0,0,0,0.45), 0 0 18px rgba(59,130,246,0.1) !important;
      padding: 1.4rem 1.05rem 0.95rem !important;
    }
    #myteam-browse-grid .chub-card.is-candidate::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: auto !important;
      height: 3px !important;
      background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 55%, #93c5fd 100%) !important;
      opacity: 1 !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }
    #myteam-browse-grid .chub-card.is-candidate:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(96, 165, 250, 0.7) !important;
      box-shadow: 0 0 0 1px rgba(96,165,250,0.22), 0 14px 34px rgba(0,0,0,0.5), 0 0 24px rgba(59,130,246,0.18) !important;
    }
    #myteam-browse-grid .chub-card.is-candidate .font-display {
      font-size: 1.05rem !important;
    }

    /* Politician Photo Container & Spacing */
    #myteam-browse-grid .chub-photo-wrapper {
      width: 60px !important;
      height: 60px !important;
      border-radius: 50% !important;
      overflow: hidden !important;
      flex-shrink: 0 !important;
      border: 2px solid rgba(255, 255, 255, 0.15) !important;
      background: rgba(30, 53, 96, 0.5) !important;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
      transition: border-color 0.2s ease !important;
    }
    #myteam-browse-grid .chub-card:has(.myteam-add-btn.on-team) .chub-photo-wrapper {
      border-color: rgba(74, 222, 128, 0.5) !important;
    }
    #myteam-browse-grid .chub-photo-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: top center !important;
    }
    #myteam-browse-grid .chub-photo-placeholder {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(135deg, rgba(30, 53, 96, 0.7), rgba(10, 15, 30, 0.8)) !important;
    }

    /* Name is bold and prominent at the top */
    #myteam-browse-grid .chub-card .font-display {
      font-size: 1.15rem !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      letter-spacing: 0.025em !important;
      line-height: 1.2 !important;
    }

    /* Office + state line is clean and well-spaced below the name */
    #myteam-browse-grid .chub-card p.font-condensed {
      font-size: 0.725rem !important;
      color: #a4b9dc !important;
      margin-top: 0.15rem !important;
      margin-bottom: 0.25rem !important;
      letter-spacing: 0.03em !important;
    }

    /* Promise % score is large, eye-catching, and has its own clean background or subtle ring */
    #myteam-browse-grid .chub-score-container {
      background: rgba(10, 15, 30, 0.8) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 0.5rem !important;
      padding: 0.25rem 0.6rem !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
      display: inline-flex !important;
      align-items: center !important;
      min-width: 72px !important;
      gap: 0.35rem !important;
      transition: border-color 0.2s ease !important;
    }
    #myteam-browse-grid .chub-score {
      font-size: 1.7rem !important;
      font-family: 'Bebas Neue', sans-serif !important;
      line-height: 1 !important;
      font-weight: 900 !important;
    }

    /* Issue tags have comfortable spacing and wrap nicely */
    #myteam-browse-grid .chub-card .flex.flex-wrap.gap-1.5 {
      gap: 0.4rem !important;
    }
    #myteam-browse-grid .chub-card .flex.flex-wrap.gap-1.5 span {
      background: rgba(22, 39, 74, 0.4) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      color: #9fb4d4 !important;
      font-size: 0.55rem !important;
      padding: 0.15rem 0.5rem !important;
      border-radius: 9999px !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      font-family: 'Barlow Condensed', sans-serif !important;
      font-weight: 600 !important;
    }

    /* Divider line */
    #myteam-browse-grid .chub-card-divider {
      height: 1px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      margin-top: 0.8rem !important;
      margin-bottom: 0.8rem !important;
    }

    /* Two Action Buttons in a clean, evenly spaced row with equal height and no crowding */
    #myteam-browse-grid .chub-card .grid.grid-cols-2 {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.6rem !important;
      width: 100% !important;
    }

    /* Uniform action button styles */
    #myteam-browse-grid .chub-card .grid.grid-cols-2 > button {
      height: 36px !important;
      min-height: 36px !important;
      border-radius: 0.5rem !important;
      font-family: 'Barlow Condensed', sans-serif !important;
      font-weight: 700 !important;
      font-size: 0.68rem !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.2s ease !important;
      cursor: pointer !important;
      border: 1px solid transparent !important;
      line-height: 1 !important;
    }

    /* "VIEW FULL PROFILE" button custom styling */
    #myteam-browse-grid .chub-view-profile-btn {
      background: rgba(30, 53, 96, 0.4) !important;
      border: 1px solid rgba(117, 150, 192, 0.2) !important;
      color: #9fb4d4 !important;
    }
    #myteam-browse-grid .chub-view-profile-btn:hover {
      background: rgba(30, 53, 96, 0.6) !important;
      border-color: rgba(117, 150, 192, 0.4) !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    /* "+ COMPARE" button custom styling */
    #myteam-browse-grid .bp-compare-btn {
      background: rgba(59, 130, 246, 0.1) !important;
      border: 1px solid rgba(96, 165, 250, 0.3) !important;
      color: #93c5fd !important;
    }
    #myteam-browse-grid .bp-compare-btn:hover {
      background: rgba(59, 130, 246, 0.2) !important;
      border-color: rgba(96, 165, 250, 0.5) !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
    }
    #myteam-browse-grid .bp-compare-btn.added {
      background: rgba(59, 130, 246, 0.25) !important;
      border-color: rgba(96, 165, 250, 0.6) !important;
      color: #ffffff !important;
      box-shadow: 0 0 12px rgba(59, 130, 246, 0.2) !important;
    }

    /* "ADD TO TEAM" button custom styling */
    #myteam-browse-grid .myteam-add-btn {
      background: rgba(245, 158, 11, 0.1) !important;
      border: 1px solid rgba(245, 158, 11, 0.3) !important;
      color: #fbbf24 !important;
    }
    #myteam-browse-grid .myteam-add-btn:hover {
      background: rgba(245, 158, 11, 0.2) !important;
      border-color: rgba(245, 158, 11, 0.5) !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important;
    }
    #myteam-browse-grid .myteam-add-btn.on-team {
      background: rgba(74, 222, 128, 0.1) !important;
      border: 1px solid rgba(74, 222, 128, 0.35) !important;
      color: #4ade80 !important;
    }
    #myteam-browse-grid .myteam-add-btn.on-team:hover {
      background: rgba(239, 68, 68, 0.12) !important;
      border-color: rgba(239, 68, 68, 0.4) !important;
      color: #f87171 !important;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
    }
    /* Strong-match invitation inside the grouped browse / Relevant grids: the base
       rules above pin the add button to amber with !important, so we re-assert the
       green "they fit you" treatment here (resting, not-yet-added state only) so the
       cue reads consistently with the same affordance everywhere else on the site. */
    #myteam-browse-grid .myteam-add-btn.match-strong:not(.on-team):not(:hover),
    #relevant-browse-grid .myteam-add-btn.match-strong:not(.on-team):not(:hover) {
      background: linear-gradient(135deg, rgba(74,222,128,0.22) 0%, rgba(245,158,11,0.10) 100%) !important;
      border-color: rgba(74,222,128,0.55) !important;
      color: #86efac !important;
    }
    /* ── Relevant to Me — SAME premium card system as All Politicians ──────────
       The premium card chrome above is scoped to #myteam-browse-grid only, which
       left the "Relevant to Me" ballot cards on the plainer base styling. These
       rules mirror that exact system for #relevant-browse-grid so a voter's own
       ballot uses the same best-in-class compact cards as the rest of the site:
       a premium green-framed "hero" card for sitting officeholders and a lighter,
       clearly-secondary card for candidates / former members. */
    #relevant-browse-grid .chub-card {
      padding: 1.15rem 1.35rem !important;
      border-radius: 1.15rem !important;
      background: linear-gradient(135deg, #0d1526 0%, #0a0f1e 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    #relevant-browse-grid .chub-card:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(96, 165, 250, 0.25) !important;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.1) !important;
    }

    /* Current officeholders — premium "hero" weight: brighter background, green
       frame, layered glow, and a gold→green accent bar across the top edge. */
    #relevant-browse-grid .chub-card.is-incumbent {
      background: linear-gradient(135deg, #16284a 0%, #0b1428 100%) !important;
      border: 1.5px solid rgba(34, 197, 94, 0.55) !important;
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 26px rgba(34, 197, 94, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
      padding-top: 1.55rem !important;
    }
    #relevant-browse-grid .chub-card.is-incumbent::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: auto !important;
      height: 4px !important;
      background: linear-gradient(90deg, #fbbf24 0%, #22c55e 52%, #4ade80 100%) !important;
      opacity: 1 !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }
    #relevant-browse-grid .chub-card.is-incumbent:hover {
      transform: translateY(-4px) !important;
      border-color: rgba(74, 222, 128, 0.78) !important;
      box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3), 0 18px 46px rgba(0, 0, 0, 0.6), 0 0 32px rgba(34, 197, 94, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    }

    /* Candidates — a clear, intentional BLUE secondary tier (solid blue frame, faint
       navy lift, blue top rail), a step below the green incumbent hero but never the
       flat grey hairline that read as unfinished. Shares the incumbent's corner
       radius and side padding so candidate and officeholder cards align cleanly when
       stacked in the same grid — the tier reads through colour and weight, not a
       cramped, mismatched frame. */
    #relevant-browse-grid .chub-card.is-candidate {
      background: linear-gradient(135deg, rgba(22,38,70,0.92) 0%, rgba(11,18,36,0.95) 100%) !important;
      border: 1.5px solid rgba(96, 165, 250, 0.45) !important;
      border-radius: 1.15rem !important;
      box-shadow: 0 0 0 1px rgba(96,165,250,0.12), 0 10px 26px rgba(0,0,0,0.45), 0 0 18px rgba(59,130,246,0.1) !important;
      padding: 1.4rem 1.35rem 1.1rem !important;
    }
    #relevant-browse-grid .chub-card.is-candidate::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: auto !important;
      height: 3px !important;
      background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 55%, #93c5fd 100%) !important;
      opacity: 1 !important;
      z-index: 2 !important;
      pointer-events: none !important;
    }
    #relevant-browse-grid .chub-card.is-candidate:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(96, 165, 250, 0.7) !important;
      box-shadow: 0 0 0 1px rgba(96,165,250,0.22), 0 14px 34px rgba(0,0,0,0.5), 0 0 24px rgba(59,130,246,0.18) !important;
    }
    #relevant-browse-grid .chub-card.is-candidate .font-display {
      font-size: 1.05rem !important;
    }

    /* Politician photo container & spacing */
    #relevant-browse-grid .chub-photo-wrapper {
      width: 60px !important;
      height: 60px !important;
      border-radius: 50% !important;
      overflow: hidden !important;
      flex-shrink: 0 !important;
      border: 2px solid rgba(255, 255, 255, 0.15) !important;
      background: rgba(30, 53, 96, 0.5) !important;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
      transition: border-color 0.2s ease !important;
    }
    #relevant-browse-grid .chub-card:has(.myteam-add-btn.on-team) .chub-photo-wrapper {
      border-color: rgba(74, 222, 128, 0.5) !important;
    }
    #relevant-browse-grid .chub-photo-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: top center !important;
    }
    #relevant-browse-grid .chub-photo-placeholder {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(135deg, rgba(30, 53, 96, 0.7), rgba(10, 15, 30, 0.8)) !important;
    }

    /* Name is bold and prominent at the top */
    #relevant-browse-grid .chub-card .font-display {
      font-size: 1.15rem !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      letter-spacing: 0.025em !important;
      line-height: 1.2 !important;
    }

    /* Office + state line is clean and well-spaced below the name */
    #relevant-browse-grid .chub-card p.font-condensed {
      font-size: 0.725rem !important;
      color: #a4b9dc !important;
      margin-top: 0.15rem !important;
      margin-bottom: 0.25rem !important;
      letter-spacing: 0.03em !important;
    }

    /* Promise % score is large, eye-catching, with its own clean ring */
    #relevant-browse-grid .chub-score-container {
      background: rgba(10, 15, 30, 0.8) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 0.5rem !important;
      padding: 0.25rem 0.6rem !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
      display: inline-flex !important;
      align-items: center !important;
      min-width: 72px !important;
      gap: 0.35rem !important;
      transition: border-color 0.2s ease !important;
    }
    #relevant-browse-grid .chub-score {
      font-size: 1.7rem !important;
      font-family: 'Bebas Neue', sans-serif !important;
      line-height: 1 !important;
      font-weight: 900 !important;
    }

    /* Issue tags have comfortable spacing and wrap nicely */
    #relevant-browse-grid .chub-card .flex.flex-wrap.gap-1.5 {
      gap: 0.4rem !important;
    }
    #relevant-browse-grid .chub-card .flex.flex-wrap.gap-1.5 span {
      background: rgba(22, 39, 74, 0.4) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      color: #9fb4d4 !important;
      font-size: 0.55rem !important;
      padding: 0.15rem 0.5rem !important;
      border-radius: 9999px !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      font-family: 'Barlow Condensed', sans-serif !important;
      font-weight: 600 !important;
    }

    /* Divider line */
    #relevant-browse-grid .chub-card-divider {
      height: 1px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      margin-top: 0.8rem !important;
      margin-bottom: 0.8rem !important;
    }

    /* ── STATES → DISTRICTS hierarchy — clean colored accordion ──────────────
       The U.S. Representatives group (and every office group) expands into a
       tidy, colored STATES accordion; expanding a state reveals its DISTRICTS
       nested one level deeper — the same clean, layered look used by the
       Relevant to Me branch headers. */
    #myteam-browse-grid .browse-sub-group {
      margin-bottom: 0.85rem !important;
      border: 1px solid rgba(255,255,255,0.1) !important;
      border-left: 4px solid rgba(96,165,250,0.75) !important;
      border-radius: 0.85rem !important;
      overflow: hidden;
      background: transparent !important;
    }
    #myteam-browse-grid .browse-sub-group > button {
      background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(30,53,96,0.34)) !important;
      border-radius: 0 !important;
      padding: 0.85rem 1.1rem !important;
      min-height: 52px;
      transition: filter 0.2s ease;
    }
    #myteam-browse-grid .browse-sub-group > button:hover { filter: brightness(1.12); }
    /* State name reads bright & spaced, like the relevant branch labels. */
    #myteam-browse-grid .browse-sub-group > button .font-condensed.text-sm {
      color: #fff !important;
      letter-spacing: 0.1em;
    }

    /* Per-state accent colors so each state is instantly distinguishable. */
    #myteam-browse-grid .browse-sub-group[id$="-colorado"] { border-left-color:#3b82f6 !important; }
    #myteam-browse-grid .browse-sub-group[id$="-colorado"] > button { background:linear-gradient(135deg, rgba(59,130,246,0.3), rgba(30,53,96,0.34)) !important; }
    #myteam-browse-grid .browse-sub-group[id$="-florida"] { border-left-color:#f59e0b !important; }
    #myteam-browse-grid .browse-sub-group[id$="-florida"] > button { background:linear-gradient(135deg, rgba(245,158,11,0.26), rgba(30,53,96,0.34)) !important; }
    #myteam-browse-grid .browse-sub-group[id$="-georgia"] { border-left-color:#22c55e !important; }
    #myteam-browse-grid .browse-sub-group[id$="-georgia"] > button { background:linear-gradient(135deg, rgba(34,197,94,0.24), rgba(30,53,96,0.34)) !important; }
    #myteam-browse-grid .browse-sub-group[id$="-kentucky"] { border-left-color:#a855f7 !important; }
    #myteam-browse-grid .browse-sub-group[id$="-kentucky"] > button { background:linear-gradient(135deg, rgba(168,85,247,0.26), rgba(30,53,96,0.34)) !important; }
    #myteam-browse-grid .browse-sub-group[id$="-utah"] { border-left-color:#c0152a !important; }
    #myteam-browse-grid .browse-sub-group[id$="-utah"] > button { background:linear-gradient(135deg, rgba(192,21,42,0.26), rgba(30,53,96,0.34)) !important; }
    #myteam-browse-grid .browse-sub-group[id$="-national"] { border-left-color:#64748b !important; }
    #myteam-browse-grid .browse-sub-group[id$="-national"] > button { background:linear-gradient(135deg, rgba(100,116,139,0.26), rgba(30,53,96,0.34)) !important; }

    /* DISTRICT rows: clearly indented one level deeper with a guide line. */
    #myteam-browse-grid [id^="browse-dist-"] {
      margin-left: 0.8rem;
      border-left: 2px solid rgba(255,255,255,0.12) !important;
      border-radius: 0.55rem;
    }
    #myteam-browse-grid [id^="browse-dist-"] > button {
      background: rgba(13,22,42,0.55) !important;
    }
    #myteam-browse-grid .browse-sub-group.expanded svg {
      transform: rotate(180deg);
    }
    #myteam-browse-grid [id^="browse-dist-"].expanded .browse-sub-body {
      max-height: 50000px;
    }
    #myteam-browse-grid [id^="browse-dist-"].expanded svg {
      transform: rotate(180deg);
    }

    /* ── RELEVANT TO ME — top-level branch headers (Federal / State / Local) ──
       These colorful section bars group the office accordions into a clean,
       expandable tree. Scoped to #relevant-browse-grid ONLY, so the Promise
       Tracker / All Politicians map is never affected. */
    #relevant-browse-grid .relevant-level { margin-bottom: 1.1rem; }
    #relevant-browse-grid .relevant-level:last-child { margin-bottom: 0; }
    #relevant-browse-grid .relevant-level-header {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.6rem 1rem;
      margin-bottom: 0.75rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(255,255,255,0.1);
      border-left-width: 4px;
      box-shadow: 0 3px 14px rgba(0,0,0,0.25);
      width: 100%;
      text-align: left;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: filter 0.2s, transform 0.1s ease;
    }
    @media (hover: hover) {
      #relevant-browse-grid .relevant-level-header:hover {
        filter: brightness(1.15);
      }
    }
    #relevant-browse-grid .relevant-level-header:active {
      transform: scale(0.99);
    }
    #relevant-browse-grid .relevant-level-chevron-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.15rem;
      height: 2.15rem;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      flex-shrink: 0;
      transition: background 0.25s, border-color 0.25s, transform 0.15s;
      margin-left: 0.5rem;
    }
    #relevant-browse-grid .relevant-level-header:hover .relevant-level-chevron-wrap {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.15);
    }
    #relevant-browse-grid .relevant-level-chevron {
      width: 1.1rem;
      height: 1.1rem;
      color: #9fb4d4;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }
    #relevant-browse-grid .relevant-level.expanded .relevant-level-chevron {
      transform: rotate(180deg);
    }
    #relevant-browse-grid .relevant-level.expanded .relevant-level-chevron-wrap {
      background: rgba(59,130,246,0.12);
      border-color: rgba(59,130,246,0.25);
    }
    #relevant-browse-grid .relevant-level-icon {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 0.55rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      flex-shrink: 0;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.12);
    }
    #relevant-browse-grid .relevant-level-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      letter-spacing: 0.14em;
      color: #fff;
      line-height: 1;
      text-shadow: 0 1px 10px rgba(0,0,0,0.5);
    }
    #relevant-browse-grid .relevant-level-count {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      color: #fff;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      padding: 0.13rem 0.6rem;
      margin-left: auto;
      white-space: nowrap;
    }
    /* Branch color themes */
    #relevant-browse-grid .relevant-level-federal .relevant-level-header {
      background: linear-gradient(135deg, rgba(192,21,42,0.34), rgba(30,58,138,0.34));
      border-left-color: #c0152a;
    }
    #relevant-browse-grid .relevant-level-state .relevant-level-header {
      background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(30,53,96,0.34));
      border-left-color: #f5c842;
    }
    #relevant-browse-grid .relevant-level-local .relevant-level-header {
      background: linear-gradient(135deg, rgba(20,184,166,0.3), rgba(30,53,96,0.34));
      border-left-color: #14b8a6;
    }
    /* Local seats all share the single 'local' bucket, so the exact office each
       person is running for (Mayor, City Council, School Board, County …) is the
       one thing a voter most needs to see. Inside the Local branch only, promote
       that office line on every card — brighter, larger and semibold — so the seat
       reads as the headline it is. Scoped to the Local level so no other section
       is affected. */
    #relevant-browse-grid .relevant-level-local .pdx-snap-office {
      font-size: 0.98rem;
      font-weight: 700;
      color: #d6e6fb;
      letter-spacing: 0.006em;
    }
    @media (max-width: 640px) {
      #relevant-browse-grid .relevant-level-local .pdx-snap-office { font-size: 0.95rem; }
    }
    /* Static office-label banner shown above a Local list when every candidate
       shares one kind of seat (so there are no collapsible sub-groups to name it).
       Mirrors the amber local accent and names the exact office plainly, with a
       who-holds-it / who's-running hint, so the roster is never unlabeled. */
    #relevant-browse-grid .relevant-local-solo-head {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0 0 0.7rem;
      padding: 0.5rem 0.75rem;
      border-radius: 0.6rem;
      border: 1px solid rgba(251,191,36,0.28);
      border-left: 3px solid rgba(251,191,36,0.6);
      background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(13,21,38,0.4));
    }
    #relevant-browse-grid .relevant-local-solo-icon {
      font-size: 0.95rem;
      line-height: 1;
      align-self: center;
    }
    #relevant-browse-grid .relevant-local-solo-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.98rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #ffe6ad;
      line-height: 1.05;
    }
    #relevant-browse-grid .relevant-local-solo-hint {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #d9c49b;
      line-height: 1.1;
    }
    #relevant-browse-grid .relevant-level-other .relevant-level-header {
      background: linear-gradient(135deg, rgba(100,116,139,0.3), rgba(30,53,96,0.34));
      border-left-color: #64748b;
    }
    /* The office accordions sit gently indented under their branch. */
    #relevant-browse-grid .relevant-level-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      padding-left: 0.55rem;
      margin-left: 0.7rem;
      border-left: 2px dashed transparent;
    }
    #relevant-browse-grid .relevant-level.expanded .relevant-level-body {
      max-height: 50000px;
      border-left-color: rgba(255,255,255,0.08);
      transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
      margin-bottom: 0.75rem;
    }
    @media (max-width: 640px) {
      #relevant-browse-grid .relevant-level-header { padding: 0.55rem 0.8rem; gap: 0.55rem; }
      #relevant-browse-grid .relevant-level-name { font-size: 1.12rem; letter-spacing: 0.09em; }
      #relevant-browse-grid .relevant-level-icon { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; }
      #relevant-browse-grid .relevant-level-body { padding-left: 0.4rem; margin-left: 0.45rem; }
      #relevant-browse-grid .relevant-level-chevron-wrap { width: 1.85rem; height: 1.85rem; margin-left: 0.35rem; }
      #relevant-browse-grid .relevant-level-chevron { width: 0.95rem; height: 0.95rem; }
    }

    /* ── RELEVANT TO ME — office position headers ────────────────────────────
       The group bars for each office (U.S. Senate, U.S. House, Governor, State
       Senate, State House, Local Office …). Previously every one of these used
       the same dark gradient + white label and only a faintly-tinted icon tile,
       so they blurred together and voters lost track of which office they were
       scrolling through. Each group now carries its own accent color across a
       bold left spine, a tinted header, a glowing icon, and a matching count
       pill — so the current office is unmistakable at a glance. Driven by a
       single --office-rgb custom property per group to keep it DRY, and scoped
       strictly to #relevant-browse-grid so My Team / Promise Tracker maps are
       untouched. The dark patriotic palette is preserved. */
    #relevant-browse-grid .browse-type-group {
      --office-rgb: 59,130,246; /* sensible default; overridden per office below */
      margin-bottom: 1.4rem !important;
      border-top: 1.5px solid rgba(255,255,255,0.12) !important;
      border-right: 1.5px solid rgba(255,255,255,0.12) !important;
      border-bottom: 1.5px solid rgba(255,255,255,0.12) !important;
      border-left: 6px solid rgb(var(--office-rgb)) !important;
      box-shadow: 0 5px 22px rgba(0,0,0,0.35), -6px 0 18px rgba(var(--office-rgb),0.15) !important;
    }
    #relevant-browse-grid .browse-type-group.expanded {
      border-top-color: rgba(var(--office-rgb),0.45) !important;
      border-right-color: rgba(var(--office-rgb),0.45) !important;
      border-bottom-color: rgba(var(--office-rgb),0.45) !important;
      box-shadow: 0 7px 30px rgba(0,0,0,0.4), -6px 0 22px rgba(var(--office-rgb),0.22), 0 0 18px rgba(var(--office-rgb),0.1) !important;
    }
    #relevant-browse-grid .browse-type-header {
      position: relative;
      background: linear-gradient(135deg, rgba(var(--office-rgb),0.34) 0%, rgba(17,29,54,0.9) 55%, rgba(13,21,38,0.94) 100%) !important;
      padding-top: 0.95rem !important;
      padding-bottom: 0.95rem !important;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06) !important;
    }
    /* A bold colored rule across the top of every office header makes each race
       a clear, unmistakable break as the voter scrolls between offices. */
    #relevant-browse-grid .browse-type-header::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, rgb(var(--office-rgb)) 0%, rgba(var(--office-rgb),0.45) 55%, transparent 100%);
    }
    @media (hover: hover) {
      #relevant-browse-grid .browse-type-header:hover {
        background: linear-gradient(135deg, rgba(var(--office-rgb),0.46) 0%, rgba(17,29,54,0.95) 55%, rgba(13,21,38,0.96) 100%) !important;
      }
    }
    #relevant-browse-grid .browse-type-icon {
      background: rgba(var(--office-rgb),0.3) !important;
      border: 1.5px solid rgba(var(--office-rgb),0.6) !important;
      box-shadow: 0 0 0 1px rgba(var(--office-rgb),0.4), 0 2px 12px rgba(var(--office-rgb),0.2) !important;
    }
    #relevant-browse-grid .browse-type-name {
      font-size: 1.42rem !important;
      letter-spacing: 0.13em !important;
      color: #ffffff !important;
      text-shadow: 0 1px 12px rgba(0,0,0,0.55) !important;
    }
    #relevant-browse-grid .browse-type-count {
      color: #ffffff !important;
      background: rgba(var(--office-rgb),0.3) !important;
      border: 1px solid rgba(var(--office-rgb),0.6) !important;
      font-weight: 700 !important;
    }
    #relevant-browse-grid .browse-type-group.expanded .browse-type-chevron-wrap {
      background: rgba(var(--office-rgb),0.2) !important;
      border-color: rgba(var(--office-rgb),0.45) !important;
    }
    #relevant-browse-grid .browse-type-group.expanded .browse-type-chevron { color: #ffffff !important; }

    /* Per-office accent colors — each office is instantly distinguishable. */
    #relevant-browse-grid #relevant-browse-group-senator        { --office-rgb: 59,130,246; }  /* U.S. Senate  — blue   */
    #relevant-browse-grid #relevant-browse-group-representative { --office-rgb: 34,197,94; }   /* U.S. House   — green  */
    #relevant-browse-grid #relevant-browse-group-governor       { --office-rgb: 168,85,247; }  /* Governor     — purple */
    #relevant-browse-grid #relevant-browse-group-state_senator  { --office-rgb: 245,158,11; }  /* State Senate — amber  */
    #relevant-browse-grid #relevant-browse-group-state_rep      { --office-rgb: 236,72,153; }  /* State House  — pink   */
    #relevant-browse-grid #relevant-browse-group-local          { --office-rgb: 20,184,166; }  /* Local Office — teal   */
    #relevant-browse-grid #relevant-browse-group-president      { --office-rgb: 192,21,42; }   /* President    — crimson*/
    #relevant-browse-grid #relevant-browse-group-cabinet        { --office-rgb: 139,92,246; }  /* Cabinet      — violet */
    #relevant-browse-grid #relevant-browse-group-candidate      { --office-rgb: 251,191,36; }  /* Candidates   — gold   */
    #relevant-browse-grid #relevant-browse-group-other          { --office-rgb: 100,116,139; } /* Other        — steel  */

    @media (max-width: 640px) {
      #relevant-browse-grid .browse-type-group { margin-bottom: 0.85rem !important; border-left-width: 5px !important; }
      #relevant-browse-grid .browse-type-name { font-size: 1.18rem !important; letter-spacing: 0.08em !important; }
    }

    /* ── RELEVANT TO ME — statewide office sub-groups ─────────────────────────
       Inside the purple "Statewide Executive Offices" accordion, each individual
       statewide race (Governor, Lt. Governor, Attorney General, Treasurer,
       Auditor…) gets its own clean, collapsible card so voters can scan a tidy
       menu of statewide seats and open just the one they want — instead of one
       long, co-mingled list. Tinted to the Governor branch's purple accent to
       stay visually anchored to its parent, in the dark patriotic palette. */
    #relevant-browse-grid .relevant-sw-group {
      --sw-rgb: 168,85,247;
      margin-bottom: 0.7rem;
      border: 1px solid rgba(var(--sw-rgb),0.22);
      border-left: 3px solid rgba(var(--sw-rgb),0.55);
      border-radius: 0.75rem;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(var(--sw-rgb),0.07), rgba(13,21,38,0.5));
    }
    #relevant-browse-grid .relevant-sw-group:last-child { margin-bottom: 0; }
    #relevant-browse-grid .relevant-sw-group.expanded {
      border-color: rgba(var(--sw-rgb),0.4);
      box-shadow: 0 4px 18px rgba(0,0,0,0.28), -4px 0 14px rgba(var(--sw-rgb),0.12);
    }
    #relevant-browse-grid .relevant-sw-header {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      width: 100%;
      text-align: left;
      cursor: pointer;
      border: none;
      padding: 0.7rem 0.85rem;
      background: linear-gradient(135deg, rgba(var(--sw-rgb),0.16) 0%, rgba(17,29,54,0.7) 60%, rgba(13,21,38,0.78) 100%);
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: filter 0.2s, transform 0.1s ease;
    }
    @media (hover: hover) {
      #relevant-browse-grid .relevant-sw-header:hover { filter: brightness(1.12); }
    }
    #relevant-browse-grid .relevant-sw-header:active { transform: scale(0.995); }
    #relevant-browse-grid .relevant-sw-icon {
      width: 1.85rem;
      height: 1.85rem;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      border-radius: 0.5rem;
      background: rgba(var(--sw-rgb),0.22);
      border: 1px solid rgba(var(--sw-rgb),0.5);
      box-shadow: 0 0 0 1px rgba(var(--sw-rgb),0.25);
    }
    #relevant-browse-grid .relevant-sw-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      gap: 0.1rem;
    }
    #relevant-browse-grid .relevant-sw-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.02rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #fff;
      line-height: 1.05;
      text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    }
    #relevant-browse-grid .relevant-sw-hint {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: #c9b8ee;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    #relevant-browse-grid .relevant-sw-count {
      margin-left: auto;
      flex-shrink: 0;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #fff;
      background: rgba(var(--sw-rgb),0.28);
      border: 1px solid rgba(var(--sw-rgb),0.55);
      border-radius: 999px;
      padding: 0.1rem 0.55rem;
      white-space: nowrap;
    }
    #relevant-browse-grid .relevant-sw-chevron-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.7rem;
      height: 1.7rem;
      flex-shrink: 0;
      border-radius: 50%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      transition: background 0.25s, border-color 0.25s;
    }
    #relevant-browse-grid .relevant-sw-group.expanded .relevant-sw-chevron-wrap {
      background: rgba(var(--sw-rgb),0.22);
      border-color: rgba(var(--sw-rgb),0.45);
    }
    #relevant-browse-grid .relevant-sw-chevron {
      width: 0.95rem;
      height: 0.95rem;
      color: #c9b8ee;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }
    #relevant-browse-grid .relevant-sw-group.expanded .relevant-sw-chevron {
      transform: rotate(180deg);
      color: #fff;
    }
    #relevant-browse-grid .relevant-sw-inner { padding: 0.65rem; }
    @media (max-width: 640px) {
      #relevant-browse-grid .relevant-sw-header { padding: 0.6rem 0.65rem; gap: 0.5rem; }
      #relevant-browse-grid .relevant-sw-name { font-size: 0.92rem; letter-spacing: 0.04em; }
      #relevant-browse-grid .relevant-sw-icon { width: 1.65rem; height: 1.65rem; font-size: 0.88rem; }
      #relevant-browse-grid .relevant-sw-chevron-wrap { width: 1.55rem; height: 1.55rem; }
      #relevant-browse-grid .relevant-sw-inner { padding: 0.45rem; }
    }

    /* ── RELEVANT TO ME — extra header prominence + values-first messaging ────
       Builds on the office-header styles above to make each race an even
       louder, scroll-proof break, and adds the supporting classes used by the
       "judge the person, not the party" banner, the per-office scope pill and
       the open-seat note. Scoped strictly to #relevant-browse-grid; the dark
       patriotic palette is preserved. */

    /* Stronger separation + a thick, glowing colored cap so the office you are
       scrolling through is unmistakable even when its candidate list is long. */
    #relevant-browse-grid .browse-type-group {
      margin-bottom: 1.9rem !important;
      border-left-width: 7px !important;
    }
    #relevant-browse-grid .browse-type-header {
      padding-top: 1.1rem !important;
      padding-bottom: 1.1rem !important;
    }
    #relevant-browse-grid .browse-type-header::before {
      height: 5px !important;
      background: rgb(var(--office-rgb)) !important;
      box-shadow: 0 0 14px rgba(var(--office-rgb),0.55) !important;
    }
    #relevant-browse-grid .browse-type-name {
      font-size: 1.56rem !important;
      letter-spacing: 0.15em !important;
      font-weight: 800 !important;
    }
    /* A bright color-true pill under the office name that calls out the exact
       scope (your district / statewide) so voters always know which seat they
       are weighing. Replaces the faint grey subtitle. */
    #relevant-browse-grid .browse-type-scope {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      margin-top: 0.32rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.68rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #ffffff;
      background: rgba(var(--office-rgb),0.24);
      border: 1px solid rgba(var(--office-rgb),0.6);
      border-radius: 999px;
      padding: 0.13rem 0.6rem;
      line-height: 1.25;
      max-width: 100%;
    }

    /* District range sub-headers (State Senate / State House "Districts 1–15")
       read larger and clearer so nested district sections separate at a glance. */
    #relevant-browse-grid .browse-range-group > button { min-height: 48px !important; padding: 0.65rem 0.95rem !important; }
    #relevant-browse-grid .browse-range-group > button span.font-condensed { font-size: 0.82rem !important; letter-spacing: 0.08em !important; }

    /* "Judge the person, not the party" — the values-first explainer that frames
       the whole section, on a gold-accented patriotic navy field. */
    #relevant-browse-grid .relevant-values-banner {
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
      margin-bottom: 1.3rem;
      padding: 1rem 1.15rem;
      border-radius: 1rem;
      background: linear-gradient(135deg, rgba(245,200,66,0.13) 0%, rgba(10,15,30,0.5) 58%, rgba(192,21,42,0.13) 100%);
      border: 1px solid rgba(245,200,66,0.32);
      border-left: 5px solid #f5c842;
      box-shadow: 0 6px 26px rgba(0,0,0,0.32);
    }
    #relevant-browse-grid .relevant-values-banner .rvb-ico {
      font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 0.1rem;
    }
    #relevant-browse-grid .relevant-values-banner .rvb-title {
      font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.06em;
      font-size: 1.18rem; color: #fff; line-height: 1.1;
    }
    #relevant-browse-grid .relevant-values-banner .rvb-text {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.88rem;
      letter-spacing: 0.01em; color: #dbe6f5; line-height: 1.5; margin: 0.32rem 0 0;
    }
    #relevant-browse-grid .relevant-values-banner .rvb-text strong { color: #f5d98a; }
    #relevant-browse-grid .relevant-values-banner .rvb-text strong.rvb-you { color: #ffffff; }

    /* Open-seat note shown above an uncontested-incumbent-free candidate field,
       reminding voters this race has no incumbent and to weigh the whole field. */
    #relevant-browse-grid .relevant-open-note {
      display: flex; gap: 0.5rem; align-items: flex-start;
      margin: 0 0 0.85rem;
      padding: 0.6rem 0.82rem;
      border-radius: 0.7rem;
      background: rgba(245,200,66,0.08);
      border: 1px solid rgba(245,200,66,0.28);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem; letter-spacing: 0.01em; color: #f5d98a; line-height: 1.45;
    }

    /* ── "Compare these candidates" prompt — Alignment Tool launcher inside a race ──
       Sits directly above a race's card grid whenever 2+ people share a seat, so the
       voter is nudged to compare them on issue alignment right where the decision is
       made. Purple to read as part of the Alignment Tool family, distinct from the
       gold "open seat" note above it. */
    #relevant-browse-grid .relevant-compare-cta {
      display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
      margin: 0 0 1rem;
      padding: 0.85rem 1rem;
      border-radius: 0.9rem;
      background: linear-gradient(135deg, rgba(88,28,135,0.28) 0%, rgba(139,92,246,0.08) 100%);
      border: 1px solid rgba(167,139,250,0.42);
      box-shadow: 0 4px 20px rgba(88,28,135,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    #relevant-browse-grid .relevant-compare-cta.is-set {
      background: linear-gradient(135deg, rgba(20,83,45,0.18) 0%, rgba(139,92,246,0.06) 100%);
      border-color: rgba(167,139,250,0.32);
    }
    #relevant-browse-grid .relevant-compare-cta-ico {
      flex-shrink: 0;
      width: 2.35rem; height: 2.35rem; border-radius: 0.7rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem;
      background: linear-gradient(135deg,#7c3aed,#6d28d9);
      box-shadow: 0 0 16px rgba(139,92,246,0.4);
    }
    #relevant-browse-grid .relevant-compare-cta-body { flex: 1; min-width: 12rem; }
    #relevant-browse-grid .relevant-compare-cta-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
      color: #e9d5ff; line-height: 1.2;
    }
    #relevant-browse-grid .relevant-compare-cta-sub {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem; letter-spacing: 0.01em; color: #c4b5fd; line-height: 1.45;
      margin-top: 0.18rem;
    }
    #relevant-browse-grid .relevant-compare-cta-sub b { color: #f0e6ff; font-weight: 800; }
    #relevant-browse-grid .relevant-compare-cta-btn {
      flex-shrink: 0;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #fff; white-space: nowrap;
      background: linear-gradient(135deg,#7c3aed,#6d28d9);
      border: 1px solid rgba(167,139,250,0.5);
      border-radius: 0.75rem;
      padding: 0.65rem 1.15rem; cursor: pointer;
      box-shadow: 0 4px 16px rgba(139,92,246,0.32);
      transition: transform 0.15s ease, box-shadow 0.2s ease;
      min-height: 44px;
    }
    #relevant-browse-grid .relevant-compare-cta-btn:hover {
      transform: translateY(-1px); box-shadow: 0 6px 22px rgba(139,92,246,0.45);
    }
    #relevant-browse-grid .relevant-compare-cta-btn.ghost {
      color: #c4b5fd; background: rgba(139,92,246,0.12);
      box-shadow: none;
    }
    #relevant-browse-grid .relevant-compare-cta-btn.ghost:hover {
      background: rgba(139,92,246,0.22); transform: translateY(-1px); box-shadow: none;
    }
    /* The one-tap "Add <strongest fit>" action wears the team-building amber/green
       so it reads as the pick-them button, not another Alignment control. */
    #relevant-browse-grid .relevant-compare-cta-btn.add {
      color: #052e16;
      background: linear-gradient(135deg,#86efac,#34d399);
      border-color: rgba(134,239,172,0.7);
      box-shadow: 0 4px 16px rgba(52,211,153,0.30);
    }
    #relevant-browse-grid .relevant-compare-cta-btn.add:hover {
      box-shadow: 0 6px 22px rgba(52,211,153,0.45);
    }

    /* ── "Why you're seeing each race" — match-precision affordances ───────────
       A small colored pill beside each office count names the BASIS on which that
       seat is on the voter's ballot (their exact district / their county / a
       statewide seat / a federal seat). A matching legend up top decodes the
       colors, and a county-level note inside the state-chamber bodies admits when
       we are showing every county seat rather than the voter's single district.
       Driven by one --why-rgb custom property each so the colors stay true to the
       rest of the dark patriotic palette. Scoped to #relevant-browse-grid. */
    #relevant-browse-grid .relevant-why-pill {
      display: inline-flex; align-items: center; gap: 0.28rem;
      flex-shrink: 0;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 0.62rem; letter-spacing: 0.08em;
      text-transform: uppercase; white-space: nowrap;
      color: #fff;
      background: rgba(var(--why-rgb), 0.22);
      border: 1px solid rgba(var(--why-rgb), 0.62);
      border-radius: 999px;
      padding: 0.16rem 0.55rem; line-height: 1.1;
    }
    #relevant-browse-grid .relevant-match-legend {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
      margin: 0 0 1.25rem;
      padding: 0.7rem 0.95rem;
      border-radius: 0.85rem;
      background: linear-gradient(135deg, rgba(30,58,138,0.18) 0%, rgba(10,15,30,0.45) 100%);
      border: 1px solid rgba(59,130,246,0.26);
    }
    #relevant-browse-grid .relevant-legend-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 0.66rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: #9fb4d4;
    }
    #relevant-browse-grid .relevant-legend-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    #relevant-browse-grid .relevant-legend-chip {
      display: inline-flex; align-items: center; gap: 0.28rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 0.66rem; letter-spacing: 0.05em;
      text-transform: uppercase; white-space: nowrap;
      color: #e7eefb;
      background: rgba(var(--why-rgb), 0.16);
      border: 1px solid rgba(var(--why-rgb), 0.55);
      border-radius: 999px;
      padding: 0.18rem 0.6rem; line-height: 1.1;
    }
    #relevant-browse-grid .relevant-narrow-note {
      display: flex; gap: 0.5rem; align-items: flex-start;
      margin: 0.2rem 0.4rem 0.85rem;
      padding: 0.6rem 0.82rem;
      border-radius: 0.7rem;
      background: rgba(245,158,11,0.09);
      border: 1px solid rgba(245,158,11,0.3);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem; letter-spacing: 0.01em; color: #fcd9a0; line-height: 1.45;
    }
    #relevant-browse-grid .relevant-narrow-note strong { color: #ffffff; }
    #relevant-browse-grid .relevant-narrow-link {
      background: none; border: none; padding: 0; cursor: pointer;
      color: #fbbf24; font: inherit; text-decoration: underline; letter-spacing: 0.01em;
    }

    /* ── District coverage tracker ─────────────────────────────────────────────
       Bridges "these are your districts" to "build your team". A compact progress
       strip at the top of the 2026 ballot shows how many of the voter's own
       district seats already have a pick on their team, names the seats still
       open, and offers a one-tap jump to fill the next one. Green = covered,
       amber/gold = still open — the same coverage language used on the chips and
       office headers below. Scoped to #relevant-browse-grid. */
    #relevant-browse-grid .relevant-coverage {
      margin: 0 0 0.95rem;
      padding: 0.85rem 1rem;
      border-radius: 0.9rem;
      background: linear-gradient(135deg, rgba(34,197,94,0.10) 0%, rgba(10,15,30,0.45) 100%);
      border: 1px solid rgba(34,197,94,0.32);
    }
    #relevant-browse-grid .relevant-coverage.is-empty {
      background: linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(10,15,30,0.45) 100%);
      border-color: rgba(245,158,11,0.34);
    }
    #relevant-browse-grid .relevant-coverage.is-complete {
      background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(10,15,30,0.4) 100%);
      border-color: rgba(34,197,94,0.55);
    }
    #relevant-browse-grid .rel-cov-top {
      display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
      margin-bottom: 0.55rem;
    }
    #relevant-browse-grid .rel-cov-title {
      font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em;
      font-size: 1.08rem; color: #fff; line-height: 1;
    }
    #relevant-browse-grid .rel-cov-frac {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #86efac;
    }
    #relevant-browse-grid .relevant-coverage.is-empty .rel-cov-frac { color: #fcd9a0; }
    /* District-first sub-stat: how many of the voter's OWN voting districts are
       filled. Amber while any remain open, green once every district is covered —
       mirrors the My Team coverage map's "voting districts" badge. */
    #relevant-browse-grid .rel-cov-distfrac {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #fcd9a0;
    }
    #relevant-browse-grid .rel-cov-distfrac.is-done { color: #86efac; }
    #relevant-browse-grid .rel-cov-bar {
      height: 8px; border-radius: 999px; overflow: hidden;
      background: rgba(255,255,255,0.08); margin-bottom: 0.6rem;
    }
    #relevant-browse-grid .rel-cov-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, #16a34a, #4ade80);
      transition: width 0.4s ease;
    }
    #relevant-browse-grid .rel-cov-msg {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.86rem; letter-spacing: 0.01em; color: #cfe0f5; line-height: 1.4;
      margin: 0;
    }
    #relevant-browse-grid .rel-cov-msg strong { color: #fff; }
    #relevant-browse-grid .rel-cov-open { color: #fcd9a0; font-weight: 700; }
    #relevant-browse-grid .rel-cov-more { color: #9fb4d4; }
    #relevant-browse-grid .rel-cov-cta {
      display: inline-flex; align-items: center; gap: 0.35rem;
      margin-top: 0.65rem; min-height: 40px;
      padding: 0.45rem 0.95rem; border-radius: 0.7rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.28), rgba(245,158,11,0.14));
      border: 1px solid rgba(245,158,11,0.5);
      color: #ffe9c2; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
      transition: transform 0.12s ease, border-color 0.15s ease;
    }
    #relevant-browse-grid .rel-cov-cta:hover { transform: translateY(-1px); border-color: rgba(251,191,36,0.85); }
    /* Row holding the coverage strip's primary "Add" CTA plus an optional
       secondary "Compare the field" action, wrapping cleanly on narrow screens. */
    #relevant-browse-grid .rel-cov-actions {
      display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem;
    }
    #relevant-browse-grid .rel-cov-actions .rel-cov-cta { margin-top: 0; }
    /* Secondary "Compare the field" button — calmer blue so the amber "Add" CTA
       stays the clear primary action. */
    #relevant-browse-grid .rel-cov-cta.is-compare {
      background: linear-gradient(135deg, rgba(59,130,246,0.24), rgba(59,130,246,0.12));
      border-color: rgba(96,165,250,0.5);
      color: #cfe0f5;
    }
    #relevant-browse-grid .rel-cov-cta.is-compare:hover { border-color: rgba(147,197,253,0.85); }
    /* "My Voting Team" round-trip button — amber team theme, distinct from the
       green "Add" CTA, so the path BACK to the team being built is always one tap
       away from the discovery surface. */
    #relevant-browse-grid .rel-cov-cta.is-team {
      background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(245,158,11,0.07));
      border-color: rgba(245,158,11,0.45);
      color: #ffe9c2;
    }
    #relevant-browse-grid .rel-cov-cta.is-team:hover { border-color: rgba(251,191,36,0.85); }

    /* ── Closing "back to My Team" bridge ──────────────────────────────────────
       Rendered at the very bottom of the personalized ballot — the moment a voter
       finishes scanning every race. Restates their live team progress and offers
       the one tap back UP to "My Voting Team", closing the discovery → building
       loop. Amber/team palette so it reads as part of the team workflow. */
    #relevant-browse-grid .relevant-team-bridge {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.85rem; flex-wrap: wrap;
      margin: 1.25rem 0 0.25rem;
      padding: 0.9rem 1.1rem; border-radius: 0.95rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(10,15,30,0.5) 100%);
      border: 1px solid rgba(245,158,11,0.34);
    }
    #relevant-browse-grid .relevant-team-bridge.is-complete {
      background: linear-gradient(135deg, rgba(34,197,94,0.16) 0%, rgba(10,15,30,0.45) 100%);
      border-color: rgba(34,197,94,0.5);
    }
    #relevant-browse-grid .rel-bridge-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
    #relevant-browse-grid .rel-bridge-title {
      font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em;
      font-size: 1.02rem; color: #fff; line-height: 1;
    }
    #relevant-browse-grid .rel-bridge-sub {
      font-family: 'Barlow Condensed', sans-serif; font-size: 0.84rem;
      letter-spacing: 0.01em; color: #cfe0f5; line-height: 1.4;
    }
    #relevant-browse-grid .rel-bridge-sub strong { color: #fff; }
    #relevant-browse-grid .rel-bridge-btn {
      flex-shrink: 0; min-height: 42px;
      display: inline-flex; align-items: center; gap: 0.35rem;
      padding: 0.5rem 1.05rem; border-radius: 0.7rem; cursor: pointer;
      background: linear-gradient(135deg, rgba(245,158,11,0.28), rgba(245,158,11,0.14));
      border: 1px solid rgba(245,158,11,0.5); color: #ffe9c2;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
      transition: transform 0.12s ease, border-color 0.15s ease;
    }
    #relevant-browse-grid .rel-bridge-btn:hover { transform: translateY(-1px); border-color: rgba(251,191,36,0.9); }
    #relevant-browse-grid .relevant-team-bridge.is-complete .rel-bridge-btn {
      background: linear-gradient(135deg, rgba(34,197,94,0.26), rgba(34,197,94,0.13));
      border-color: rgba(34,197,94,0.55); color: #bbf7d0;
    }
    #relevant-browse-grid .relevant-team-bridge.is-complete .rel-bridge-btn:hover { border-color: rgba(74,222,128,0.9); }
    /* Inline "Compare the field" button inside an open office's add-hint. */
    #relevant-browse-grid .relevant-addhint-cmp {
      display: inline-flex; align-items: center; gap: 0.3rem;
      margin-left: 0.1rem; vertical-align: baseline;
      padding: 0.12rem 0.55rem; border-radius: 0.55rem;
      background: rgba(59,130,246,0.16); border: 1px solid rgba(96,165,250,0.5);
      color: #cfe0f5; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    #relevant-browse-grid .relevant-addhint-cmp:hover {
      border-color: rgba(147,197,253,0.85); background: rgba(59,130,246,0.24);
    }

    /* Per-office "Rank by my values" launcher inside the district tree — opens the
       Best-Matches board focused on just this office's field. Purple to read as
       part of the Alignment Tool family, distinct from the blue Compare action. */
    #relevant-browse-grid .relevant-rankrow {
      display: flex; margin: 0.1rem 0.4rem 0.7rem;
    }
    #relevant-browse-grid .relevant-rank-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      width: 100%; justify-content: center;
      padding: 0.5rem 0.85rem; border-radius: 0.7rem; cursor: pointer;
      background: linear-gradient(135deg, rgba(124,58,237,0.22) 0%, rgba(13,148,136,0.12) 100%);
      border: 1px solid rgba(167,139,250,0.45); color: #ddd0fb;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
      min-height: 42px;
    }
    #relevant-browse-grid .relevant-rank-btn:hover {
      border-color: rgba(196,181,253,0.85); background: linear-gradient(135deg, rgba(124,58,237,0.32) 0%, rgba(13,148,136,0.18) 100%);
    }
    #relevant-browse-grid .relevant-rank-btn:active { transform: scale(0.99); }

    /* Filled / open status badge shown on each "Your 2026 Ballot" chip. */
    #relevant-browse-grid .rel-chip-status {
      display: inline-flex; align-items: center; gap: 0.25rem;
      max-width: 100%; margin-top: 0.18rem;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 0.66rem; letter-spacing: 0.03em;
      padding: 0.1rem 0.45rem; border-radius: 999px; line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #relevant-browse-grid .rel-chip-status.is-filled {
      color: #bbf7d0; background: rgba(34,197,94,0.16); border: 1px solid rgba(34,197,94,0.5);
    }
    #relevant-browse-grid .rel-chip-status.is-open {
      color: #fcd9a0; background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.45);
    }

    /* Coverage pill beside a district office header (✓ On your team / Open seat). */
    #relevant-browse-grid .relevant-cov-pill {
      display: inline-flex; align-items: center; gap: 0.26rem;
      flex-shrink: 0;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 0.62rem; letter-spacing: 0.07em;
      text-transform: uppercase; white-space: nowrap;
      border-radius: 999px; padding: 0.16rem 0.55rem; line-height: 1.1;
    }
    #relevant-browse-grid .relevant-cov-pill.is-filled {
      color: #bbf7d0; background: rgba(34,197,94,0.2); border: 1px solid rgba(34,197,94,0.58);
    }
    #relevant-browse-grid .relevant-cov-pill.is-open {
      color: #ffe9c2; background: rgba(245,158,11,0.16); border: 1px solid rgba(245,158,11,0.5);
    }

    /* "Add your pick" guidance shown inside an open district office body. */
    #relevant-browse-grid .relevant-addhint {
      display: flex; gap: 0.5rem; align-items: flex-start;
      margin: 0.2rem 0.4rem 0.85rem;
      padding: 0.6rem 0.82rem;
      border-radius: 0.7rem;
      background: rgba(245,158,11,0.09);
      border: 1px solid rgba(245,158,11,0.3);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem; letter-spacing: 0.01em; color: #fcd9a0; line-height: 1.45;
    }
    #relevant-browse-grid .relevant-addhint strong { color: #ffffff; }
    #relevant-browse-grid .relevant-addhint .relevant-addhint-ico { flex-shrink: 0; }

    /* ── "Start Here" guided status banner ─────────────────────────────────────
       The section's first-glance orienting element, rendered live at the top of
       the Relevant-to-Me hero card once a location is set. Where the in-grid
       coverage strip takes an all-seats lens, this banner takes the voter's OWN
       voting-districts lens — the motivating "which of my districts are covered,
       which still need attention" question — and turns each district into a
       tappable chip that jumps straight to its race, plus one clear next step and
       a round trip back to the team being built. Lives in #relevant-section (the
       hero card), not #relevant-browse-grid. Green = covered, amber = still open,
       matching the coverage language used throughout the section. */
    #relevant-section .rel-guide {
      margin-top: 1.1rem;
      padding: 0.95rem 1.05rem;
      border-radius: 1rem;
      background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(10,15,30,0.5) 60%, rgba(34,197,94,0.08) 100%);
      border: 1px solid rgba(245,158,11,0.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    #relevant-section .rel-guide.is-complete {
      background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(10,15,30,0.45) 100%);
      border-color: rgba(34,197,94,0.55);
    }
    #relevant-section .rel-guide-eyebrow {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
      color: #fcd9a0; margin-bottom: 0.35rem;
    }
    #relevant-section .rel-guide.is-complete .rel-guide-eyebrow { color: #86efac; }
    #relevant-section .rel-guide-head {
      display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }
    #relevant-section .rel-guide-title {
      font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em;
      font-size: 1.18rem; color: #fff; line-height: 1;
    }
    #relevant-section .rel-guide-frac {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: #fcd9a0;
    }
    #relevant-section .rel-guide.is-complete .rel-guide-frac { color: #86efac; }
    #relevant-section .rel-guide-bar {
      height: 8px; border-radius: 999px; overflow: hidden;
      background: rgba(255,255,255,0.08); margin-bottom: 0.7rem;
    }
    #relevant-section .rel-guide-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, #f59e0b, #fbbf24);
      transition: width 0.4s ease;
    }
    #relevant-section .rel-guide.is-complete .rel-guide-fill {
      background: linear-gradient(90deg, #16a34a, #4ade80);
    }
    /* Per-district chips — each of the voter's own voting districts, green when a
       pick is on the team, amber when it still needs attention. Tappable to jump
       straight to that race in the ballot below. */
    #relevant-section .rel-guide-chips {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 0.5rem; margin-bottom: 0.75rem;
    }
    #relevant-section .rel-guide-chip {
      display: flex; flex-direction: column; gap: 0.1rem; text-align: left;
      padding: 0.5rem 0.7rem; border-radius: 0.7rem; cursor: pointer;
      min-height: 44px;
      font-family: 'Barlow Condensed', sans-serif;
      transition: transform 0.15s ease, border-color 0.15s ease;
    }
    #relevant-section .rel-guide-chip:hover { transform: translateY(-2px); }
    #relevant-section .rel-guide-chip.is-filled {
      background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(10,15,30,0.35));
      border: 1px solid rgba(34,197,94,0.48);
    }
    #relevant-section .rel-guide-chip.is-filled:hover { border-color: rgba(74,222,128,0.85); }
    #relevant-section .rel-guide-chip.is-open {
      background: linear-gradient(135deg, rgba(245,158,11,0.13), rgba(10,15,30,0.35));
      border: 1px solid rgba(245,158,11,0.46);
    }
    #relevant-section .rel-guide-chip.is-open:hover { border-color: rgba(251,191,36,0.85); }
    #relevant-section .rgc-name {
      font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em;
      color: #fff; line-height: 1.1;
    }
    #relevant-section .rgc-sub {
      font-size: 0.64rem; letter-spacing: 0.04em; color: #9fb4d4; line-height: 1.15;
    }
    #relevant-section .rgc-stat {
      font-weight: 700; font-size: 0.66rem; letter-spacing: 0.02em;
      line-height: 1.2; margin-top: 0.1rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }
    #relevant-section .rel-guide-chip.is-filled .rgc-stat { color: #86efac; }
    #relevant-section .rel-guide-chip.is-open .rgc-stat { color: #fcd9a0; }
    #relevant-section .rel-guide-next {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.88rem; letter-spacing: 0.01em; color: #e7eefb; line-height: 1.45;
      margin: 0 0 0.7rem;
    }
    #relevant-section .rel-guide-next strong { color: #fff; }
    #relevant-section .rel-guide-next .rgn-open { color: #fcd9a0; font-weight: 700; }
    #relevant-section .rel-guide-actions {
      display: flex; flex-wrap: wrap; gap: 0.5rem;
    }
    #relevant-section .rel-guide-btn {
      display: inline-flex; align-items: center; gap: 0.35rem;
      min-height: 44px; padding: 0.5rem 1.05rem; border-radius: 0.7rem;
      cursor: pointer; white-space: nowrap;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16);
      color: #e7eefb;
      transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
    }
    #relevant-section .rel-guide-btn:hover { transform: translateY(-1px); }
    #relevant-section .rel-guide-btn.is-primary {
      background: linear-gradient(135deg, rgba(245,158,11,0.30), rgba(245,158,11,0.15));
      border-color: rgba(245,158,11,0.55); color: #ffe9c2;
    }
    #relevant-section .rel-guide-btn.is-primary:hover { border-color: rgba(251,191,36,0.9); }
    #relevant-section .rel-guide.is-complete .rel-guide-btn.is-primary {
      background: linear-gradient(135deg, rgba(34,197,94,0.28), rgba(34,197,94,0.14));
      border-color: rgba(34,197,94,0.6); color: #bbf7d0;
    }
    #relevant-section .rel-guide-btn.is-team {
      background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(59,130,246,0.10));
      border-color: rgba(96,165,250,0.5); color: #cfe0f5;
    }
    #relevant-section .rel-guide-btn.is-team:hover { border-color: rgba(147,197,253,0.85); }
    @media (max-width: 768px) {
      #relevant-section .rel-guide-btn { flex: 1 1 auto; justify-content: center; }
    }

    /* ── District trees: team-coverage indicators ─────────────────────────────
       The unified district view shows a seat's officeholder(s) alongside everyone
       running for it. These mark, at a glance, whether the voter has already added
       someone from that seat to their team: a green "On your team" pill on the
       (collapsed) district header so coverage reads while scanning the tree, plus
       a short, quiet note inside the expanded body that either confirms the pick
       or nudges the voter to fill an open seat — with a one-tap jump back to My
       Team. Coverage language mirrors Relevant to Me; green = covered, muted =
       still open. Applied to both the All Politicians tree (#myteam-browse-grid)
       and the "Explore other districts" tree nested in Relevant to Me. */
    #myteam-browse-grid .myteam-cov-slot,
    #relevant-browse-grid .myteam-cov-slot { display: inline-flex; flex-shrink: 0; }
    #myteam-browse-grid .myteam-cov-pill,
    #relevant-browse-grid .myteam-cov-pill {
      display: inline-flex; align-items: center; gap: 0.24rem; flex-shrink: 0;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 0.6rem; letter-spacing: 0.06em;
      text-transform: uppercase; white-space: nowrap;
      border-radius: 999px; padding: 0.12rem 0.5rem; line-height: 1.1; margin-left: 0.4rem;
    }
    #myteam-browse-grid .myteam-cov-pill.is-filled,
    #relevant-browse-grid .myteam-cov-pill.is-filled {
      color: #bbf7d0; background: rgba(34,197,94,0.2); border: 1px solid rgba(34,197,94,0.58);
    }
    #myteam-browse-grid .myteam-cov-pill.is-open,
    #relevant-browse-grid .myteam-cov-pill.is-open {
      color: #9fb4d4; background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.28);
    }
    /* An OPEN seat that is one of the voter's own ballot districts — amber, in the
       same "still to fill" coverage language used on the chips and progress bars,
       so the gaps they personally need stand out while scanning the tree. */
    #myteam-browse-grid .myteam-cov-pill.is-yours-open,
    #relevant-browse-grid .myteam-cov-pill.is-yours-open {
      color: #ffe9c2; background: rgba(245,158,11,0.16); border: 1px solid rgba(245,158,11,0.55);
    }
    #myteam-browse-grid .myteam-cov-note-slot,
    #relevant-browse-grid .myteam-cov-note-slot { display: block; }
    #myteam-browse-grid .myteam-cov-note,
    #relevant-browse-grid .myteam-cov-note {
      display: flex; gap: 0.5rem; align-items: flex-start;
      margin: 0 0 0.7rem; padding: 0.55rem 0.78rem; border-radius: 0.7rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem; letter-spacing: 0.01em; line-height: 1.45;
    }
    #myteam-browse-grid .myteam-cov-note.is-filled,
    #relevant-browse-grid .myteam-cov-note.is-filled {
      background: rgba(34,197,94,0.09); border: 1px solid rgba(34,197,94,0.3); color: #bbf7d0;
    }
    #myteam-browse-grid .myteam-cov-note.is-open,
    #relevant-browse-grid .myteam-cov-note.is-open {
      background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.28); color: #fcd9a0;
    }
    /* The voter's own still-open district gets a touch more emphasis than a
       generic open seat — it's a real gap in THEIR coverage, not just any race. */
    #myteam-browse-grid .myteam-cov-note.is-open.is-yours,
    #relevant-browse-grid .myteam-cov-note.is-open.is-yours {
      background: rgba(245,158,11,0.13); border-color: rgba(245,158,11,0.45); color: #ffe9c2;
    }
    #myteam-browse-grid .myteam-cov-note strong,
    #relevant-browse-grid .myteam-cov-note strong { color: #ffffff; font-weight: 700; }
    #myteam-browse-grid .myteam-cov-note-ico,
    #relevant-browse-grid .myteam-cov-note-ico { flex-shrink: 0; }
    #myteam-browse-grid .myteam-cov-link,
    #relevant-browse-grid .myteam-cov-link {
      display: inline; background: none; border: none; padding: 0; cursor: pointer;
      font: inherit; font-weight: 800; letter-spacing: 0.02em;
      color: #fbbf24; text-decoration: underline; white-space: nowrap;
    }
    #myteam-browse-grid .myteam-cov-note.is-filled .myteam-cov-link,
    #relevant-browse-grid .myteam-cov-note.is-filled .myteam-cov-link { color: #86efac; }
    #myteam-browse-grid .myteam-cov-link:hover,
    #relevant-browse-grid .myteam-cov-link:hover { opacity: 0.85; }

    @media (max-width: 640px) {
      #myteam-browse-grid .myteam-cov-pill,
      #relevant-browse-grid .myteam-cov-pill { font-size: 0.54rem; padding: 0.1rem 0.42rem; margin-left: 0.3rem; }
      #myteam-browse-grid .myteam-cov-note,
      #relevant-browse-grid .myteam-cov-note { font-size: 0.78rem; padding: 0.5rem 0.65rem; }
    }

    @media (max-width: 640px) {
      #relevant-browse-grid .relevant-why-pill { font-size: 0.56rem; margin-left: 0.35rem; padding: 0.14rem 0.45rem; }
      #relevant-browse-grid .relevant-match-legend { gap: 0.4rem; padding: 0.6rem 0.7rem; }
      #relevant-browse-grid .relevant-cov-pill { font-size: 0.56rem; padding: 0.14rem 0.45rem; }
    }
    @media (max-width: 640px) {
      #relevant-browse-grid .browse-type-name { font-size: 1.22rem !important; }
      #relevant-browse-grid .relevant-values-banner { padding: 0.85rem 0.9rem; gap: 0.65rem; }
      #relevant-browse-grid .relevant-values-banner .rvb-title { font-size: 1.05rem; }
      #relevant-browse-grid .relevant-values-banner .rvb-text { font-size: 0.82rem; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE RESPONSIVENESS POLISH — filter toolbar + politician card width
       Scoped strictly to the politician browsing / filter areas. Adds no new
       markup and changes no logic; it only re-flows the sticky filter toolbar
       so the search box and dropdowns stack cleanly (never overlapping or
       crowding each other) and lets the tree / list cards use the full screen
       width on phones. The dark patriotic styling is left intact. Placed last
       in the stylesheet so it reliably wins the cascade on small screens.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      /* ── 1 · Filter toolbar: stack search over a tidy 2-col dropdown grid ── */
      .browse-toolbar { padding: 0.85rem !important; }
      .browse-toolbar-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
      }
      /* Search field claims the full row. */
      .browse-toolbar-inner > .flex-1 { width: 100% !important; min-width: 0 !important; }
      /* The Office / State / Score / Sort cluster becomes an even two-column
         grid that can never overflow its container or sit on top of a neighbour. */
      .browse-toolbar-inner > .flex.flex-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
      }
      #myteam-browse-office,
      #myteam-browse-state,
      #myteam-browse-score,
      #myteam-browse-sort {
        min-width: 0 !important;
        width: 100% !important;
        padding-right: 1.7rem !important;
        text-overflow: ellipsis;
      }
      /* Reset spans the full width beneath the four filters. */
      .browse-toolbar-inner > .flex.flex-wrap > button { grid-column: 1 / -1 !important; }
      /* Count label + scope toggle stack so the toggles stay full-width & tappable. */
      .browse-toolbar > .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
      }
      .browse-toolbar > .flex.items-center.justify-between > .flex.gap-2 { width: 100%; }
      .browse-toolbar > .flex.items-center.justify-between > .flex.gap-2 .scope-btn { flex: 1 1 0 !important; }

      /* ── 2 · Tree / list cards: reclaim horizontal width on phones ── */
      /* Nudge the whole card map toward the screen edges without disturbing the
         neighbouring alignment tools (only the card grids get the extra width). */
      #myteam-browse-grid,
      #relevant-browse-grid { margin-left: -0.3rem !important; margin-right: -0.3rem !important; }
      /* Flatten the accordion indentation + inner padding that was making the
         nested cards skinny and tall. */
      #myteam-browse-grid [id^="browse-dist-"],
      #relevant-browse-grid [id^="relevant-browse-dist-"] { margin-left: 0.3rem !important; }
      #myteam-browse-grid .browse-sub-body > .p-3,
      #relevant-browse-grid .browse-sub-body > .p-3,
      #myteam-browse-grid .browse-sub-body > .p-2,
      #relevant-browse-grid .browse-sub-body > .p-2 { padding: 0.45rem !important; }
      #myteam-browse-grid .browse-sub-group > button,
      #relevant-browse-grid .browse-sub-group > button { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
      /* Cards: full width, comfortable padding, easy to read and tap. */
      #myteam-browse-grid .chub-card,
      #relevant-browse-grid .chub-card {
        width: 100% !important;
        padding: 1rem 1rem 1.05rem !important;
      }
      /* Politician name: wrap cleanly and never get clipped, even long
         double-barrelled names. min-width:0 lets the flex child shrink so the
         text can break instead of forcing horizontal overflow. */
      #myteam-browse-grid .chub-card .font-display,
      #relevant-browse-grid .chub-card .font-display {
        font-size: 1.05rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        min-width: 0 !important;
      }
      /* The name row and any status/ribbon rows are allowed to wrap so the
         "In Office", "Candidate", "Local", "On Team" and match badges flow onto
         a second line instead of squeezing the name or overflowing the card. */
      #myteam-browse-grid .chub-card .flex.items-center.gap-2.flex-wrap,
      #myteam-browse-grid .chub-card .chub-incumbent-ribbon-row,
      #myteam-browse-grid .chub-card .chub-candidate-tag-row,
      #relevant-browse-grid .chub-card .flex.items-center.gap-2.flex-wrap,
      #relevant-browse-grid .chub-card .chub-incumbent-ribbon-row,
      #relevant-browse-grid .chub-card .chub-candidate-tag-row {
        flex-wrap: wrap !important;
        row-gap: 0.35rem !important;
      }
      /* Office / district line wraps fully instead of being truncated. */
      #myteam-browse-grid .chub-card p.font-condensed,
      #relevant-browse-grid .chub-card p.font-condensed {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.35 !important;
      }
      /* Score + Accountability + Alignment badge strip: guarantee it wraps so the
         Promise %, Accountability and Alignment badges sit side-by-side when they
         fit and stack neatly when they don't — never overflowing the card edge. */
      #myteam-browse-grid .chub-card .flex.flex-wrap.items-center.gap-3,
      #relevant-browse-grid .chub-card .flex.flex-wrap.items-center.gap-3 {
        gap: 0.5rem !important;
        row-gap: 0.5rem !important;
      }
      #myteam-browse-grid .chub-card .chub-score-container,
      #relevant-browse-grid .chub-card .chub-score-container { flex-shrink: 0 !important; }
      /* Issue tags keep wrapping and stay legible. */
      #myteam-browse-grid .chub-card .flex.flex-wrap,
      #relevant-browse-grid .chub-card .flex.flex-wrap { min-width: 0 !important; }
      /* Action buttons (Profile / Compare) get a taller, easier tap target. */
      #myteam-browse-grid .chub-card .grid.grid-cols-2 > button,
      #relevant-browse-grid .chub-card .grid.grid-cols-2 > button {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 0.72rem !important;
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
        white-space: normal !important;
        line-height: 1.1 !important;
      }
      /* The "View Accountability Analysis" toggle becomes an easy thumb target. */
      #myteam-browse-grid .chub-card [id^="acctbtn-"],
      #relevant-browse-grid .chub-card [id^="acctbtn-"] {
        min-height: 44px !important;
        padding: 0.55rem 0.7rem !important;
      }
    }

    /* ── Narrowest phones: keep the politician cards from feeling cramped ──
       On the smallest screens the score badge can crowd the name/office block,
       so drop it to its own full-width row and tighten type a touch. Scoped to
       the browse / search card grids; desktop and larger phones are untouched. */
    @media (max-width: 400px) {
      #myteam-browse-grid .chub-card,
      #relevant-browse-grid .chub-card { padding: 0.9rem 0.85rem 1rem !important; }
      #myteam-browse-grid .chub-card .font-display,
      #relevant-browse-grid .chub-card .font-display { font-size: 1rem !important; }
      /* Let the photo + details column wrap so the details never get squeezed
         into a sliver beside the avatar. */
      #myteam-browse-grid .chub-card .flex.flex-row.items-start,
      #relevant-browse-grid .chub-card .flex.flex-row.items-start { gap: 0.7rem !important; }
      /* Two action buttons stack into a single comfortable column. */
      #myteam-browse-grid .chub-card .grid.grid-cols-2,
      #relevant-browse-grid .chub-card .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
      }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE POLISH PASS — targeted refinements to the most-used sections
       (Key Races · My Voting Team · top navigation). Purely additive and
       scoped to small screens; desktop layout, behaviour and markup are all
       left untouched. Placed last so it reliably wins the cascade on phones.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      /* ── KEY RACES ─────────────────────────────────────────────────────
         Trim the generous desktop padding so each race card is shorter and
         the content gets more usable width, while every tap target grows. */
      .kr-incumbent-panel { padding: 1rem 0.9rem 1.05rem; border-radius: 1rem; }
      .kr-incumbent-panel + .kr-incumbent-panel { margin-top: 0.65rem; }
      .kr-incumbent-name { font-size: 1.7rem; }
      .kr-challenger-card { padding: 0.8rem 0.85rem 0.85rem 0.95rem; }
      /* Compare / Spotlight / Profile / Align — comfortable, thumb-sized. */
      .kr-action-row { gap: 0.45rem; margin-top: 0.65rem; }
      .kr-action-btn { min-height: 44px; font-size: 0.7rem; }
      /* The Promise % + Truth Score strip: keep both clearly legible with a
         touch more breathing room and a consistent tap height. */
      .kr-score-strip { gap: 0.5rem; }
      .kr-score { min-height: 54px; }
      /* Spotlight / inline-alignment rows get the same easy tap height. */
      .kr-spot-preview, .kr-align-inline { min-height: 46px; }

      /* ── MY VOTING TEAM ────────────────────────────────────────────────
         Keep the empty slots from reading as tall dead space on phones, and
         make the "Add to My Team" call-to-action an easier touch target. */
      .myteam-slot { padding: 1.05rem 0.85rem 0.9rem; }
      .myteam-slot-empty { min-height: 172px; padding: 1.1rem 0.85rem; }
      .myteam-empty-cta { padding: 0.55rem 1.15rem; font-size: 0.72rem; }
    }

    @media (max-width: 480px) {
      /* The "Up for Election" banner: a little more text room so the status
         line never wraps awkwardly once the side flag is hidden. */
      .kr-ballot-banner { padding: 0.6rem 0.95rem; gap: 0.6rem; }
      .kr-ballot-banner .kr-bb-badge { width: 32px; height: 32px; }
    }

    @media (max-width: 360px) {
      /* On the narrowest phones, keep the brand, the always-visible Join
         button and the hamburger from crowding each other. */
      nav .max-w-7xl.mx-auto { gap: 0.5rem !important; }
      #nav-auth-desktop button { font-size: 9px !important; padding: 4.5px 8px !important; }
      /* Hide only the small "FREE" chip so the core label still reads. */
      #nav-auth-desktop button > span[style*="border-radius:4px"] { display: none !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE UX REFINEMENT PASS — politician cards · All Politicians filter
       bar · modals/profiles · buttons · Team Builder. Phone-only (≤768px),
       appended last so it reliably wins the cascade. Adds no markup and no
       JS; the dark patriotic styling is preserved throughout. Targets the
       reported issues: long/skinny cards, hard-to-read text, small or badly
       spaced buttons, an over-eager filter toolbar, and cramped modal /
       Team Builder layouts on phones.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* ── 1 · POLITICIAN CARDS — full width, legible, never skinny ──────
         Force a single roomy column and give the name room to wrap so even
         long double-barrelled names read cleanly instead of clipping. */
      .pm-sub-cards { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
      .pm-card-inner { padding: 1.05rem 1.1rem 1rem !important; gap: 0.8rem !important; }
      .pm-card-photo { width: 50px !important; height: 50px !important; }
      .pm-card-name {
        font-size: 1.18rem !important;
        line-height: 1.16 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .pm-card-office { overflow-wrap: anywhere; }
      /* Profile / Compare actions: full thumb-sized targets, even spacing. */
      .pm-card-actions { gap: 0.55rem !important; padding-top: 0.9rem !important; }
      .pm-btn-profile, .pm-btn-compare {
        flex: 1 1 0 !important;
        min-height: 48px !important;
        font-size: 0.72rem !important;
      }
      /* Directory / leaderboard cards stay roomy and single column too. */
      .dir-card { padding: 1.1rem !important; }

      /* ── 2 · ALL POLITICIANS / PROMISE TRACKER FILTER BAR — not sticky ──
         Keep the toolbar in normal document flow so it scrolls away with the
         page instead of clinging to the top and covering results. Neutralise
         the collapsed "stuck" variant entirely and lighten its visual weight
         so it no longer reads as a heavy floating bar on phones. */
      .browse-toolbar,
      .browse-toolbar.is-stuck,
      .browse-toolbar.is-stuck:not(.is-expanded),
      .browse-toolbar.is-stuck.is-expanded {
        position: static !important;
        top: auto !important;
        z-index: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: 0 8px 26px rgba(0,0,0,0.42) !important;
      }

      /* ── 3 · MODALS & PROFILE VIEWS — no overflow, comfortable padding ──
         Long links, sources and stance text wrap instead of forcing a
         horizontal scroll, and media can never push past the panel edge. */
      #modal-body { padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important; }
      #modal-body, #modal-body p, #modal-body a, #modal-body li, #modal-body td,
      .modal-section, .modal-section-sub {
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      #modal-body img, #modal-body table, #modal-body pre { max-width: 100% !important; }
      /* Tighter — but not cramped — rhythm on phones. Driven through the shared
         token so named sections and standalone .modal-block cards stay in step. */
      #modal-content { --modal-gap: 1.4rem; }
      .modal-section { padding-top: 1.25rem !important; }
      .modal-section-title { font-size: 1.02rem !important; }

      /* ── 4 · BUTTONS — consistent, thumb-friendly tap targets ──────────── */
      .kr-action-btn, .kr-mini-btn, .myteam-add-btn, .myteam-remove-btn,
      .chub-add-btn, .rh-reset-btn { min-height: 46px !important; }

      /* ── 5 · TEAM BUILDER / MY POLITICIANS — cleaner, less cramped ─────── */
      .myteam-slots-grid { gap: 0.7rem !important; }
      .myteam-slot { padding: 1rem 0.85rem 0.9rem !important; }
      .myteam-card { padding: 1.05rem !important; }
      .myteam-add-btn { font-size: 0.78rem !important; padding: 0.65rem 1.1rem !important; }
    }

    @media (max-width: 400px) {
      /* Narrowest phones: keep both card actions side-by-side (shorter cards)
         while shrinking type just enough that the labels never wrap or clip. */
      .pm-btn-profile, .pm-btn-compare {
        font-size: 0.66rem !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
      }
      .pm-card-name { font-size: 1.08rem !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       TEAM BUILDER / MY POLITICIANS — ACTION-ROW & CARD POLISH
       Unifies the per-card action buttons (Add to My Team · Compare ·
       Profile) into one balanced layout: a single full-width primary CTA
       above two equal secondary controls, all sharing one height, radius
       and type scale. Replaces the old row where each button carried a
       different inline size and they never lined up. Dark patriotic palette
       preserved; placed last so it reliably wins the cascade.
       ════════════════════════════════════════════════════════════════════ */
    .mypol-card-actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0.15rem;
    }
    .mypol-card-actions-secondary {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 0.5rem;
    }
    /* Primary — Add to My Team — the clear, full-width call to action. */
    .mypol-card-actions .mypol-act-add {
      width: 100%;
      justify-content: center;
      min-height: 42px;
      padding: 0 1rem;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      border-radius: 0.65rem;
    }
    /* Secondary — Compare & Profile — equal width, equal height, calm weight. */
    .mypol-card-actions .mypol-act-compare,
    .mypol-card-actions .mypol-act-profile {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      width: 100%;
      min-height: 38px;
      padding: 0 0.6rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 0.7rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      border-radius: 0.6rem;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }
    .mypol-card-actions .mypol-act-compare {
      background: rgba(59,130,246,0.1);
      border: 1px solid rgba(96,165,250,0.3);
      color: #93c5fd;
    }
    .mypol-card-actions .mypol-act-compare:hover {
      background: rgba(59,130,246,0.2);
      border-color: rgba(96,165,250,0.55);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 3px 12px rgba(59,130,246,0.18);
    }
    .mypol-card-actions .mypol-act-compare.added {
      background: rgba(59,130,246,0.28);
      border-color: rgba(96,165,250,0.65);
      color: #fff;
    }
    .mypol-card-actions .mypol-act-profile {
      background: rgba(30,53,96,0.4);
      border: 1px solid rgba(117,150,192,0.22);
      color: #9fb4d4;
    }
    .mypol-card-actions .mypol-act-profile:hover {
      background: rgba(30,53,96,0.62);
      border-color: rgba(117,150,192,0.45);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    }
    /* Phones: a touch more height for comfortable thumb targets. */
    @media (max-width: 640px) {
      .mypol-card-actions .mypol-act-add { min-height: 46px; }
      .mypol-card-actions .mypol-act-compare,
      .mypol-card-actions .mypol-act-profile { min-height: 44px; font-size: 0.72rem; }
    }

    /* ── Compact card Share button — shared by the unified browse action row
       (_pdxTeamActions) and the lightweight compare/profile row
       (_pdxCompareActions). Icon-only and calm so it sits beside Compare /
       Profile without competing with the primary "Add to My Team" action. */
    .pdx-act-share {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      min-width: 38px;
      padding: 0 0.55rem;
      background: rgba(30,53,96,0.4);
      border: 1px solid rgba(117,150,192,0.22);
      color: #9fb4d4;
      border-radius: 0.6rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .pdx-act-share:hover {
      background: rgba(30,53,96,0.62);
      border-color: rgba(117,150,192,0.45);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    }
    .pdx-act-share svg { width: 1rem; height: 1rem; }
    @media (max-width: 640px) { .pdx-act-share { min-height: 44px; min-width: 44px; } }
    /* In the lightweight flex row, keep Share compact instead of stretching to
       a full-width child like Compare/Profile do on phones. */
    .pdx-snap-actions > button.pdx-act-share { flex: 0 0 auto !important; min-width: 44px; padding: 0 0.6rem !important; }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE COMFORT POLISH — final pass (≤768px)
       Targets the rough spots still reported on phones: body copy that read
       too tightly, stacked politician cards that felt crowded, filter fields
       that triggered iOS's jarring auto-zoom, a small modal close button with
       a four-button action row crammed onto one line, and a tight My Voting
       Team summary. Purely additive, phone-scoped, and appended last so it
       reliably wins the cascade. The dark patriotic styling is untouched.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* ── 1 · READABILITY — comfortable leading for body copy on phones ──── */
      #our-mission p, #voter-academy p, #trending-reforms p,
      #modal-body p, .modal-section p, .modal-section li {
        line-height: 1.62 !important;
      }

      /* ── 2 · POLITICIAN CARDS — a little more air between stacked cards ─── */
      #profiles .grid { gap: 0.7rem !important; }
      .dir-card { margin-bottom: 0 !important; }

      /* ── 3 · ALL POLITICIANS FILTER BAR — tidy padding, and 16px control
         text so focusing a field never triggers iOS's jarring auto-zoom. ── */
      .browse-toolbar { padding: 0.85rem 0.9rem !important; }
      .browse-search-input,
      .browse-filter-select,
      #myteam-browse-search, #myteam-browse-office, #myteam-browse-state,
      #myteam-browse-score, #myteam-browse-sort {
        font-size: 16px !important;
      }

      /* ── 4 · MODAL — square, finger-sized close button, and a single slim
         engagement strip that keeps its controls on one comfortable line. ── */
      #modal-top-bar { padding: 0.8rem 0.95rem !important; }
      #modal-top-bar > button { width: 44px !important; height: 44px !important; }
      #modal-action-strip {
        gap: 0.4rem !important;
        row-gap: 0.45rem !important;
        flex-wrap: wrap !important;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
      }
      #modal-action-strip > * { min-height: 42px !important; }
      #modal-like-btn, #modal-dislike-btn {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
      }
      #modal-action-strip > a { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

      /* ── 5 · MY VOTING TEAM — summary box breathes; stat tiles less tight ── */
      .myteam-summary-box { padding: 1.1rem 1rem 1.2rem !important; }
      .myteam-summary-grid { gap: 0.6rem !important; }
      .myteam-summary-header { gap: 0.6rem !important; margin-bottom: 0.85rem !important; }
    }

    /* Narrowest phones: keep the modal's primary footer actions legible. */
    @media (max-width: 420px) {
      #modal-panel .flex.gap-3.px-5 > button,
      #modal-panel .flex.gap-3.px-5 > a { font-size: 0.7rem !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE COMFORT POLISH — PASS 3 (≤768px, with ≤480 / ≤400 refinements)
       A final, phone-only pass that targets the spots still reading as
       cramped or fiddly on a real handset: All Politicians cards whose names
       had been shrunk so small they were hard to read, a filter toolbar whose
       four selects wrapped into an uneven jumble, small secondary buttons,
       and a few tight My Voting Team / modal details. Additive only — no
       markup or JS changes — and appended last so it reliably wins the
       cascade. The dark patriotic palette is preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* ── 1 · ALL POLITICIANS CARDS — readable names, roomier cards ───────
         Earlier rules shrank the browse-card name to 0.95rem, which on a
         phone (where these cards are full-width) read as too small. Restore a
         confident, legible name that wraps cleanly, and give the card a touch
         more breathing room than the previous 0.8rem squeeze. */
      #myteam-browse-grid .chub-card,
      #relevant-browse-grid .chub-card {
        padding: 1rem 0.95rem !important;
        border-radius: 0.9rem !important;
      }
      #myteam-browse-grid .chub-card .font-display,
      #relevant-browse-grid .chub-card .font-display {
        font-size: 1.15rem !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      /* Office · state line: a hair larger and allowed to wrap instead of
         being clipped on one tight line. */
      #myteam-browse-grid .chub-card p.font-condensed,
      #relevant-browse-grid .chub-card p.font-condensed {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
      }
      /* Issue tags: nudged up from 0.55rem so they're actually readable. */
      #myteam-browse-grid .chub-card .inline-block,
      #relevant-browse-grid .chub-card .inline-block {
        font-size: 0.62rem !important;
        padding: 0.2rem 0.55rem !important;
      }
      /* Per-card secondary actions (Compare, accountability toggle, profile)
         become comfortable thumb targets. */
      #myteam-browse-grid .chub-add-btn,
      #relevant-browse-grid .chub-add-btn,
      .chub-add-btn { min-height: 46px !important; font-size: 0.74rem !important; }
      #myteam-browse-grid .chub-card [id^="acctbtn-"],
      #relevant-browse-grid .chub-card [id^="acctbtn-"] {
        min-height: 44px !important; font-size: 0.7rem !important;
      }

      /* ── 2 · FILTER TOOLBAR — tidy, predictable layout on phones ─────────
         The search field claims a full row; the four selects fall into a neat
         two-up grid (instead of wrapping unevenly), and Reset spans the width
         so nothing is half-hanging off a row. 16px control text also stops
         iOS from auto-zooming when a field is focused. */
      .browse-toolbar-inner { gap: 0.6rem !important; }
      .browse-toolbar-inner > .flex-1 { flex: 1 1 100% !important; }
      .browse-toolbar-inner > .flex.flex-wrap {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
      }
      .browse-toolbar-inner > .flex.flex-wrap > select {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
      }
      .browse-toolbar-inner > .flex.flex-wrap > button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
      }
      #myteam-browse-search { font-size: 16px !important; }
      /* The found-count + scope toggles read better stacked than squeezed
         onto one line beside the count. */
      .browse-toolbar > .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
      }
      .browse-toolbar > .flex.items-center.justify-between > .flex.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
      }
      .browse-toolbar .scope-btn { width: 100% !important; min-height: 44px !important; }

      /* ── 3 · BUTTONS — round out the remaining small secondary controls ── */
      .bp-compare-btn,
      .myteam-slot-compare-btn,
      .mandate-bottom-cta,
      .cmp-empty-cta { min-height: 44px !important; }
      .bp-compare-btn { font-size: 0.7rem !important; padding: 0.55rem 0.85rem !important; }

      /* ── 4 · MY VOTING TEAM — between phone & tablet, keep it single-column
         so each slot has real width instead of two skinny halves. */
      .myteam-slots-grid { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
      #myteam-browse-panel .grid { grid-template-columns: 1fr !important; }
      .myteam-compare-all-bar { flex-wrap: wrap !important; gap: 0.6rem !important; }

      /* ── 5 · READABILITY — a little more vertical rhythm between sections
         and their lead paragraphs on small screens. */
      .section-title { line-height: 1.05 !important; }
      #myteam-browse-grid, #relevant-browse-grid { gap: 0.65rem !important; }
    }

    @media (max-width: 480px) {
      /* Filter selects: stack to one clean column on small phones so each
         label is fully visible. */
      .browse-toolbar-inner > .flex.flex-wrap {
        grid-template-columns: 1fr !important;
      }
      /* Browse cards: keep the name strong but ensure it never overruns. */
      #myteam-browse-grid .chub-card .font-display,
      #relevant-browse-grid .chub-card .font-display { font-size: 1.1rem !important; }
    }

    @media (max-width: 400px) {
      /* Narrowest phones: trim card padding just slightly and keep the score
         badge from crowding the issue tags. */
      #myteam-browse-grid .chub-card,
      #relevant-browse-grid .chub-card { padding: 0.9rem 0.8rem !important; }
      .browse-toolbar > .flex.items-center.justify-between > .flex.gap-2 {
        grid-template-columns: 1fr !important;
      }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE COMFORT POLISH — PASS 4 (touch targets + Key Races)
       A focused, phone-scoped pass that closes the gaps the earlier passes
       didn't reach. The interactive controls voters actually tap most — the
       promise filters inside every profile, the Alignment Tool's issue
       chips, and the Key Races "your match" controls — were still rendering
       well below a comfortable thumb size, and the Key Races officeholder
       "hero" name (a large Bebas Neue heading) could overrun the card edge
       on narrow phones. Additive only — no markup or JS changes — and
       appended last so it reliably wins the cascade. The dark patriotic
       palette is preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* ── 1 · PROMISE FILTERS — finger-sized tabs in every profile ───────
         The All / Kept / Broken / Pending tabs and their inline Reset sat
         at ~26px tall — fiddly to hit while scanning a promise list. Lift
         them to a comfortable tap height; the rounded-pill look is kept. */
      .pdx-pfilter { gap: 0.45rem; }
      .pdx-pfilter-btn { min-height: 40px; padding: 0.45rem 0.85rem !important; font-size: 0.7rem; }
      .pdx-pfilter-reset { min-height: 38px; padding: 0.4rem 0.85rem !important; }

      /* ── 3 · KEY RACES — readable hero name + tappable match controls ───
         Scale the gold officeholder name down a touch and let it wrap, so a
         long name can never push past the card edge or force a sideways
         scroll. The inline "your match" bar, its quick-adjust issue chips
         and the score cells become comfortable thumb targets. */
      .kr-incumbent-name { font-size: 1.55rem; line-height: 1.08; white-space: normal; overflow-wrap: anywhere; }
      .kr-align-inline { min-height: 52px; }
      .kr-align-inline-more { min-height: 42px; }
      .kr-align-chip { min-height: 38px; padding: 0.4rem 0.7rem; }
      .kr-score { min-height: 50px; }
    }

    @media (max-width: 480px) {
      /* Narrow phones: trim the hero name and its panel a little further so
         the officeholder card stays clean on one or two lines, and keep the
         promise-filter tabs legible at the reduced width. */
      .kr-incumbent-name { font-size: 1.4rem; }
      .kr-incumbent-panel { padding: 1rem 1rem 1.05rem; }
      .pdx-pfilter-btn { font-size: 0.68rem; padding: 0.45rem 0.75rem !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE COMFORT POLISH — PASS 4 (≤768px, with ≤480 / ≤380 refinements)
       The site's primary politician card is the *unified compact card*
       (.pdx-snap-*) shown everywhere a voter browses — the district tree,
       All Politicians, Relevant to Me, Favorites and the Compare hub. Earlier
       mobile passes tuned the .pm-card and #*-browse-grid .chub-card variants
       but left this shared card largely at its desktop sizing, so on a phone
       its issue tags and "why this matters" pills were too small to read, the
       photo/name/score row felt tight, and its action row left the plain
       "View Profile" text link as a sub-thumb tap target sitting beside a
       pill-sized Compare button. This pass gives that card a roomier head,
       legible chips, and a balanced full-width action row with two real
       thumb-sized buttons. It also lifts a few core profile-modal content
       controls (promise rows, stance cards, issue pills) and the Relevant /
       Key Races section rhythm. Additive and phone-scoped only — no markup or
       JS changes — and appended last so it reliably wins the cascade. The dark
       patriotic palette is preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* ── 1 · UNIFIED COMPACT CARD — roomier, more legible head ──────────
         A touch more space between the photo, the name/office block and the
         Promise-score rail so nothing reads as crammed against the next
         element on a narrow screen. */
      .pdx-snap-head { gap: 0.9rem; }
      .pdx-snap-office { font-size: 0.86rem; line-height: 1.4; }
      .pdx-snap-metrics { gap: 0.5rem; margin-top: 0.8rem; }
      .pdx-snap-badges { gap: 0.4rem; margin-top: 0.5rem; }

      /* Issue + metric chips were ~0.57rem — readable on a desktop grid but
         genuinely hard to read on a phone. Nudge them up and give a little
         more padding so they read as tappable, glanceable tags. */
      .pdx-snap-issue { font-size: 0.66rem; padding: 0.2rem 0.6rem; }
      .pdx-snap-comments, .pdx-snap-votes { font-size: 0.66rem; padding: 0.24rem 0.62rem; }

      /* The clickable Promise-score pill doubles as the "how is this scored?"
         affordance, so give it a comfortable minimum tap footprint. */
      .pdx-snap-score-click { min-height: 48px; }

      /* ── 2 · UNIFIED CARD ACTION ROW — two real thumb targets ───────────
         The compare/profile row mixed a pill-sized "+ Compare" button with a
         borderless "View Profile" text link (~no tap height). On phones, let
         the row span the full card width and turn both into balanced, equal
         buttons so either action is an easy, deliberate tap. (Cards that use
         the richer .mypol-card-actions block are already full-width and keep
         their own layout — this only reshapes the lightweight two-button
         variant.) */
      .pdx-snap-actions { width: 100%; gap: 0.55rem; }
      .pdx-snap-actions > .chub-add-btn {
        flex: 1 1 0 !important;
        justify-content: center;
        min-height: 46px !important;
        font-size: 0.74rem !important;
      }
      .pdx-snap-actions > button:not(.chub-add-btn) {
        flex: 1 1 0 !important;
        min-height: 46px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 0.85rem !important;
        border: 1px solid rgba(117,150,192,0.28) !important;
        border-radius: 0.55rem !important;
        background: rgba(30,53,96,0.4) !important;
        color: #9fb4d4 !important;
        font-size: 0.74rem !important;
      }

      /* ── 3 · PROFILE MODAL CONTENT — comfortable, tappable rows ─────────
         Promise rows expand on tap, so give them a real minimum height and a
         little more breathing room; stance cards and issue pills get the same
         readability lift the listing chips received. */
      .promise-row { min-height: 52px; padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
      .stance-card { padding: 0.9rem 0.95rem; }
      .issue-pill { min-height: 40px; font-size: 0.72rem; }

      /* ── 4 · RELEVANT TO ME / KEY RACES — readable "why" tags & rhythm ──
         The "why this is relevant to you" pills were ~0.56rem; lift them so
         the personalised reasoning is actually readable, and give the
         Relevant and Key Races blocks a touch more vertical separation. */
      #relevant-browse-grid .relevant-why-pill { font-size: 0.66rem !important; padding: 0.18rem 0.55rem !important; }
      #relevant-section { scroll-margin-top: 72px; }
    }

    @media (max-width: 480px) {
      /* On the narrowest phones the compact card's name can dominate; keep it
         strong but slightly trimmed, and let the photo shrink just enough to
         leave the name/score room without crowding. */
      .pdx-snap-name { font-size: 1.16rem; }
      .pdx-photo { width: 52px; height: 52px; }
      /* Stack the lightweight Compare / Profile actions when both labels would
         otherwise be squeezed, so each stays a full-width, unmistakable tap. */
      .pdx-snap-actions > .chub-add-btn,
      .pdx-snap-actions > button:not(.chub-add-btn) { flex: 1 1 100% !important; }
    }

    @media (max-width: 380px) {
      /* Tiniest screens: shave the card's score rail width a hair so it never
         pushes the name onto too many lines. */
      .pdx-snap-score { min-width: 56px; padding-left: 0.4rem; padding-right: 0.4rem; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE COMFORT POLISH — PASS 5 (whole-site cohesion)
       Earlier passes tuned individual cards and toolbars; this pass closes
       the cross-section gaps that still made the phone experience feel
       uneven. The top navigation's menu button had no real tap footprint,
       the profile modal's bottom action bar tucked itself under the notch's
       home indicator on modern phones, and the primary buttons in Key Races,
       Build Your Team and Relevant-to-Me were still rendering below a
       comfortable thumb size. It also gives the browse grids a little more
       air between cards and a consistent press feedback on every control.
       Additive and phone-scoped only — no markup or JS changes — appended
       last so it reliably wins the cascade. The dark patriotic palette is
       preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* ── 1 · TOP NAV — a real hamburger tap target ──────────────────────
         The mobile menu toggle was a bare 24px icon with no padding; give it
         a full 44px touch footprint and a subtle pressed state so opening the
         menu is an easy, deliberate tap. The "Join" pill gets a comfortable
         minimum height too. */
      nav button[onclick*="classList.toggle"] {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 0.6rem; margin-right: -0.3rem;
      }
      nav button[onclick*="classList.toggle"]:active { background: rgba(255,255,255,0.08); }
      #nav-auth-desktop button { min-height: 40px; }

      /* ── 2 · PROFILE MODAL — bottom bar clears the notch, roomier CTA ────
         On notched phones the sticky engagement strip sat under the home
         indicator; reserve the safe-area inset so every footer control is
         reachable. The "Add to My Team" call-to-action and the react / save /
         comment / evidence strip get a touch more height so they read as
         confident, separated thumb targets rather than a cramped cluster. */
      #modal-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
      #modal-action-strip > * { min-height: 46px !important; }
      #modal-addteam-btn { min-height: 50px !important; font-size: 0.82rem !important; }
      .pdx-modal-share-btn { min-width: 44px; min-height: 44px; }

      /* ── 3 · KEY RACES — primary actions are confident thumb targets ─────
         The race action buttons and the alignment overlay's tally chips were
         comfortable on desktop but small on a phone; lift them and let the
         overlay use a touch more of the viewport height. */
      .kr-action-btn { min-height: 46px; }
      .kraq-card { max-height: 92vh; border-radius: 1rem; }
      .kraq-tally { font-size: 0.7rem; padding: 0.3rem 0.62rem; }

      /* ── 4 · BUILD YOUR TEAM — guide steps & team controls easy to tap ───
         The onboarding guide's "go" button, the saved / share controls and
         the headline "Add to Team" button all get a real touch height, and
         each guide step a little more padding so the list stops reading as a
         tight stack. */
      .myteam-guide-step { padding: 0.7rem 0.8rem; }
      .myteam-guide-go { min-height: 44px; font-size: 0.78rem; padding: 0.55rem 1rem; }
      .myteam-saved-btn, .myteam-share-btn { min-height: 44px; }
      .myteam-add-btn { min-height: 48px; }

      /* ── 5 · RELEVANT TO ME — readable CTA & coverage pills ─────────────
         The "compare your matches" call-to-action becomes a full thumb
         target and the small coverage pills are nudged up to a legible size. */
      #relevant-browse-grid .relevant-compare-cta-btn { min-height: 46px; font-size: 0.74rem; }
      #relevant-browse-grid .relevant-cov-pill { font-size: 0.66rem; padding: 0.22rem 0.6rem; }

      /* ── 6 · BROWSE GRIDS — a touch more air between cards ───────────────
         The district-tree and flat browse grids sat at a 0.6rem gutter; a
         hair more separation keeps full-width phone cards from reading as a
         single dense block. */
      .browse-sub-grid, .browse-type-flat-grid { gap: 0.7rem; }

      /* ── 7 · GLOBAL — consistent press feedback on every control ─────────
         A faint, on-brand tap highlight replaces the browser default so taps
         feel intentional across the whole interface. */
      button, a, [role="button"] { -webkit-tap-highlight-color: rgba(255,255,255,0.06); }
    }

    @media (max-width: 480px) {
      /* Narrowest phones: let the Key Races alignment overlay use the full
         width comfortably, and keep the Relevant call-to-action legible. */
      .kraq-card { max-width: 94vw; }
      #relevant-browse-grid .relevant-compare-cta-btn { font-size: 0.72rem; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE EXPERIENCE — FINAL POLISH PASS
       A last, phone-only layer that builds on the earlier passes and closes
       the remaining rough spots: the profile modal's bottom action bar now
       reads as a distinct, elevated control deck; the many small in-modal
       controls (promise filter tabs, issue pills, stance toggles, verdict
       badges) become real thumb targets; oversized section headers stop
       overflowing on narrow phones; and the most-used sections (Relevant to
       Me, Key Races, My Team, the district tree and top nav) get a calmer,
       more comfortable rhythm. Additive only — no markup or JS changes — and
       appended last so it reliably wins the cascade. The dark patriotic
       palette is preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* ── PROFILE MODAL — an elevated, easy-to-read action deck ───────────
         The footer was separated from the scrolling body by only a hairline.
         Lift it with a soft top shadow and a slightly stronger surface so it
         reads as a fixed control deck the eye can return to, give the primary
         CTA real presence, and keep its two rows comfortably padded. The
         scroll body gets extra bottom room so the final section never sits
         tight against the deck. */
      #modal-footer {
        box-shadow: 0 -10px 26px rgba(0,0,0,0.42);
        background: rgba(8,13,26,0.92) !important;
        border-top-color: rgba(255,255,255,0.12) !important;
      }
      #modal-footer > div:first-child { padding-top: 0.7rem !important; padding-bottom: 0.55rem !important; }
      #modal-addteam-btn { letter-spacing: 0.06em !important; border-radius: 0.7rem !important; }
      #modal-addteam-hint { font-size: 0.74rem !important; }
      #modal-action-strip { gap: 0.45rem !important; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)) !important; }
      #modal-action-strip .like-count, #modal-action-strip .dislike-count { font-size: 0.82rem !important; }
      #modal-content { padding-bottom: 1.4rem !important; }

      /* ── PROFILE MODAL — small controls become genuine tap targets ───────
         The promise All/Kept/Broken/Pending tabs, the key-issue pills, the
         stance cards and the verdict badges were comfortable with a mouse but
         fiddly on glass. Bump their padding and minimum height, and let the
         filter-tab strip breathe so the counts stay legible. */
      .pdx-pfilter { gap: 0.5rem !important; }
      .pdx-pfilter-btn { font-size: 0.74rem !important; padding: 0.5rem 0.85rem !important; min-height: 38px !important; }
      .pdx-pfilter-reset { font-size: 0.7rem !important; padding: 0.4rem 0.8rem !important; min-height: 34px !important; }
      .issue-pill { font-size: 0.82rem !important; padding: 0.5rem 0.85rem !important; }
      .vbadge-click { padding: 0.32rem 0.7rem !important; }
      .stance-card { padding: 0.9rem 0.95rem !important; }
      .profile-quote p { font-size: 0.95rem !important; }

      /* ── SECTION HEADERS — confident but contained ──────────────────────
         The big Bebas/Bebas-style display titles (My Team, Key Races, etc.)
         could run wide enough to wrap awkwardly or nudge their count badges
         off-line on a phone. Keep them bold yet contained, and let the
         header rows wrap cleanly with a little vertical gap. */
      #myteam-selected-panel .font-display,
      #keyraces-panel .font-display,
      #relevant-section .font-display.text-2xl { line-height: 1.05 !important; overflow-wrap: anywhere; }
      #myteam-count-badge, #relevant-count-badge { white-space: nowrap; }
      #relevant-section .flex.flex-wrap, #keyraces-panel .flex.flex-wrap { row-gap: 0.4rem !important; }

      /* ── KEY RACES — readable location selector & headline ──────────────
         The location picker is the gateway to this whole section; give it a
         full thumb height and 16px text so focusing it never triggers iOS
         auto-zoom, and let the headline wrap rather than clip. */
      #keyraces-location-select { min-height: 48px !important; font-size: 16px !important; }
      #keyraces-headline { line-height: 1.4 !important; }

      /* ── MY TEAM — progress bar & compare-all stay comfortable ──────────
         The progress label and the "compare all" bar are the section's two
         primary affordances; keep the label legible and the compare control
         a confident, full-width thumb target. */
      #myteam-progress-label { font-size: 0.8rem !important; line-height: 1.35 !important; }
      #myteam-compare-all-btn { min-height: 48px !important; }
      #myteam-subtext, #myteam-location-text { line-height: 1.4 !important; }

      /* ── TOP NAV — brand never crowds the menu button ───────────────────
         On the narrowest phones the wordmark could butt against the right-
         side controls; trim its size a touch and keep a hard gap so the logo,
         account chip and hamburger always read as three distinct targets. */
      nav .max-w-7xl { gap: 0.6rem !important; }
    }

    @media (max-width: 480px) {
      /* The engagement strip's five controls fit one tight row on most
         phones; on the narrowest screens let them wrap to a second row
         rather than shrink below a comfortable tap size. */
      #modal-action-strip { flex-wrap: wrap !important; row-gap: 0.45rem !important; }
      #modal-action-strip > a.ml-auto { margin-left: 0 !important; }

      /* Section display titles: a small step down so they never overflow or
         force the count badge onto its own crowded line. */
      #myteam-selected-panel .font-display.text-3xl { font-size: 1.85rem !important; }
      #keyraces-panel .font-display.text-3xl { font-size: 1.9rem !important; }

      /* District tree: a touch more separation between office groups so the
         full-width phone stack stops reading as one dense block. */
      #myteam-browse-grid .browse-type-group,
      #relevant-browse-grid .browse-type-group { margin-bottom: 0.8rem !important; }
    }

    @media (max-width: 380px) {
      /* Ultra-compact phones: keep the brand wordmark from pushing the
         account + menu controls off the bar. */
      nav .font-display.text-xl { font-size: 1.05rem !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE EXPERIENCE — CARD ADDITIONS LEGIBILITY PASS
       The earlier phone passes enlarged the original browse-card chips (issue
       tags, metric pills, "why this matters" lines) but predate the at-a-glance
       issue-position work that was added later: the support/oppose stance chips,
       the signature stance line, the "Where X stands" eyebrow and the sourced
       pull-quote. On phones those newer pieces were still rendering at their
       small desktop sizing, so a card's most informative content read smaller
       than the tags around it. This pass brings them up to the same legible,
       glanceable size the older chips already use, so the whole card reads as
       one consistent system. Additive and phone-scoped only — no markup or JS
       changes — appended last so it reliably wins the cascade. The dark
       patriotic palette is preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Stance chips match the issue tags' phone size so the documented
         positions read as clearly as the topic tags they replace. */
      .pdx-stance-chip { font-size: 0.66rem; padding: 0.2rem 0.6rem; }
      .pdx-stance-chip .pdx-stance-ico { font-size: 0.68rem; }
      .pdx-stance-more { font-size: 0.64rem; }
      /* The "Where X stands · N positions" eyebrow and its tally were ~0.56rem;
         nudge up so the at-a-glance summary stays readable on glass. */
      .pdx-stance-eyebrow { font-size: 0.6rem; }
      /* The signature stance line is the card's most quotable substance — give
         it a touch more size and leading than the desktop default. */
      .pdx-stance-lead { font-size: 0.78rem; line-height: 1.45; }
      /* The "why this matters" / candidate / quote highlight, and the quote's
         attribution, get the same readability lift as the rest of the card. */
      .pdx-snap-highlight { font-size: 0.8rem; }
      .pdx-snap-highlight--quote .pdx-snap-quote-cite { font-size: 0.66rem; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE EXPERIENCE — MAIN-PAGE RHYTHM & COHESION PASS
       The three primary surfaces a voter works through — Key Races (overview),
       Relevant to Me (research) and My Voting Team (the builder) — each grew
       their own paddings, section gaps and tap sizes across successive passes,
       so on a phone they read with slightly different insets and a few controls
       still landed just under a comfortable thumb size. This pass harmonises the
       three panels onto one inset, evens out the gaps between the stacked
       sections so the page neither crams them together nor leaves large empty
       bands, and lifts the last cramped controls (the per-race Add/Compare/
       Profile row, the research progress button and the "manage full team"
       pills) to the 44px minimum. It deliberately leaves the compact My Voting
       Team layout and the medium profile modal untouched. Additive and
       phone-scoped only — no markup or JS changes — appended last so it reliably
       wins the cascade. The dark patriotic palette is preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      /* ── 1 · UNIFIED PANEL INSET ──────────────────────────────────────
         My Voting Team sat at 24px, Key Races at 20px and the Relevant
         header at 18/22px. Bring all three to one comfortable phone inset so
         the sections read as one cohesive system and each wins back a little
         content width. */
      #myteam-selected-panel > div { padding: 1.4rem 1.15rem !important; }
      #keyraces-panel > div { padding: 1.25rem 1.1rem !important; }
      #relevant-header-panel { padding: 1.2rem 1.1rem !important; }

      /* ── 2 · EVEN SECTION RHYTHM ──────────────────────────────────────
         The stacked main sections used three different bottom gaps (mb-14 /
         mb-6 / mb-10). Settle them onto one calm, consistent rhythm — the My
         Voting Team builder no longer leaves a tall empty band before Key
         Races, and the supporting sections sit a steady distance apart. */
      #my-politicians { margin-bottom: 2rem; }
      #keyraces-panel { margin-bottom: 2rem; }

      /* ── 3 · CONFIDENT TAP TARGETS IN THE MAIN FLOW ───────────────────
         The per-race Add / Compare / Profile buttons (40px), the research
         section's progress button (42px) and the "manage full team" pills
         (36px) were all below a comfortable thumb size; lift each to 44px. */
      .kr-mini-btn { min-height: 44px; }
      .rel-team-progress__btn { min-height: 44px; }
      .pdx-back-to-team { min-height: 44px; }

      /* ── 4 · A LITTLE AIR IN THE RACE CARDS ───────────────────────────
         The compact race cards' action row and header sat a hair tight; a
         small bump to the button gap and the header padding keeps the three
         actions from reading as one fused block, without adding real height. */
      .kr-mini-actions { gap: 0.5rem; }
      .kr-race-head { padding: 0.6rem 0.85rem; }
    }

    @media (max-width: 400px) {
      /* Narrowest phones: shave the unified inset a touch more so full-width
         content never crowds the panel edges. */
      #myteam-selected-panel > div { padding: 1.15rem 0.95rem !important; }
      #keyraces-panel > div { padding: 1.1rem 0.9rem !important; }
      #relevant-header-panel { padding: 1.05rem 0.95rem !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       MOBILE EXPERIENCE — KEY RACES COMPACT OVERVIEW PASS
       Now that My Voting Team has been slimmed down, the Key Races district
       cards at the top read as the tallest, heaviest block on a phone — more
       vertical space than a quick "who represents me" scan needs, so a voter
       has to scroll past the overview before reaching the research and builder
       sections that matter more. This pass tightens the cards' internal rhythm
       (header, coverage strip, officeholder row, action gaps and the section
       grid gutter) so several districts fit in a glance, while deliberately
       leaving every piece of content in place — office + district, the
       officeholder's name and photo, the Add/Compare/Profile actions, and the
       prominent "See all candidates" bridge into Relevant to Me, which stays a
       full, easy thumb target. Additive and phone-scoped only — no markup or JS
       changes — appended last so it reliably wins the cascade. The dark
       patriotic palette is preserved throughout.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      /* ── 1 · TIGHTER CARD SHELL ────────────────────────────────────────
         Trim the header, coverage strip and body insets so the card frame
         hugs its content instead of carrying desktop-sized padding on a
         phone. */
      .kr-race-head { padding: 0.45rem 0.7rem !important; }
      .kr-cover-strip { padding: 0.4rem 0.7rem; }
      .kr-race-body { padding: 0.55rem 0.7rem 0.6rem; }

      /* ── 2 · TIGHTER OFFICEHOLDER ROW ──────────────────────────────────
         The "Currently Represented By" label, the photo/name/office identity
         row and its status pills sat with generous spacing built for the old
         tall card. Pull the gaps in — the name stays bold and the 46px photo
         stays put, so the seat's holder still reads instantly, just in less
         height. */
      .kr-incumbent-label { margin-bottom: 0.3rem; }
      .kr-holder { padding: 0.5rem 0.6rem 0.55rem; }
      .kr-holder + .kr-holder { margin-top: 0.4rem; }
      .kr-holder-top { gap: 0.55rem; }
      .kr-holder-name { font-size: 1.2rem; }
      .kr-holder-office { margin-top: 0.1rem; }
      .kr-holder-pills { margin-top: 0.3rem; }

      /* ── 3 · TIGHTER ACTION RHYTHM ─────────────────────────────────────
         Close the gap above the Add/Compare/Profile row and before the
         "See all candidates" bridge. The buttons themselves keep their full
         44–46px thumb height — only the surrounding air shrinks. */
      .kr-mini-actions { margin-top: 0.4rem; }
      .kr-race-body > div:last-child { margin-top: 0.45rem !important; }

      /* ── 4 · CLEAR, EASY BRIDGE TO RELEVANT TO ME ──────────────────────
         The "See all candidates" button is each card's primary next step, so
         it stays prominent and a confident full-width tap target even as the
         rest of the card tightens. */
      .kr-fulllist-btn { min-height: 46px; padding: 0.5rem 0.75rem; }

      /* ── 5 · TIGHTER SECTION GRID ──────────────────────────────────────
         Pull the stacked district cards a little closer together so the
         overview reads as one scannable list rather than a tall, spread-out
         column — and so more districts land in a single glance. */
      #keyraces-list { gap: 0.6rem !important; }
    }

    @media (max-width: 400px) {
      /* Narrowest phones: shave the card body and officeholder insets one
         more notch so the overview stays compact edge-to-edge. */
      .kr-race-body { padding: 0.5rem 0.6rem 0.55rem; }
      .kr-holder { padding: 0.45rem 0.55rem 0.5rem; }
      .kr-holder-name { font-size: 1.14rem; }
    }
  

/* ── Run 1 perf: CSS containment on long, below-the-fold lists/sections. */
/* content-visibility:auto lets the browser skip layout+paint for off-screen */
/* content; contain-intrinsic-size (auto + fallback) keeps the scrollbar stable. */
#digital-library, #dlib-grid,
#all-spotlights, #shub-grid, #chub-all-grid,
#stance-library,
#pdxsec-record,
#relevant-browse-grid, #li-grid, #pp-grid, #myteam-browse-grid,
#el-results, #el-pol-results, #el-issue-grid, #el-feat-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}


/* ── Run 3 perf: PER-CARD/ROW containment (extends Run 1 container-level). */
/* content-visibility:auto lets the browser skip layout+paint for OFF-SCREEN */
/* cards/rows inside a long on-screen list (the paint-level form of windowing). */
/* Visible cards render normally; contain-intrinsic-size (auto+fallback) keeps  */
/* the scrollbar stable. Purely additive and reversible — no DOM/JS change.     */
.card-holo { content-visibility: auto; contain-intrinsic-size: auto 360px; }
.vr-row { content-visibility: auto; contain-intrinsic-size: auto 76px; }
.chub-card, .el-issue-card { content-visibility: auto; contain-intrinsic-size: auto 300px; }


/* ── Run 4 smoothness: snappier taps on controls. touch-action:manipulation */
/* drops the double-tap-zoom wait on buttons/links so taps register instantly   */
/* (viewport already removes the 300ms delay). Allows normal scroll/pan/pinch.  */
button, [role="button"], a, .btn, summary, label[for] { touch-action: manipulation; }


/* ── Photo-audit: consistent, polished fallback avatar (used wherever a photo */
/* is missing or fails to load — cards, roster, search, profile hero). Additive */
/* base rule; the .profile-hero-photo .ph-fallback rule above still layers size. */
.ph-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #24345c 0%, #16223f 55%, #0e1730 100%);
  color: #9db8dd; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}