/* Extracted from house/index.html <style> block 1. Keep page-specific rules here until componentized. */
/* ---------- THEME ---------- */
:root {
  --solid-d:#0076BA; --likely-d:#00A2FF; --lean-d:#56C1FF;
  --toss-up:#929292; --lean-r:#FF968D; --likely-r:#FF644E; --solid-r:#EE220C;

  --flip-gold:#F6CE46;

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

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

  --radius-card:24px;
  --shadow-soft:0 18px 40px rgba(15,23,42,0.1);

  --bg-card-subtle:#f5f5f7;

  --radius-pill:999px;

  --shadow-subtle:0 1px 3px rgba(15,23,42,0.15);
}

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

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

    --shadow-soft:0 18px 40px rgba(0,0,0,0.9);
    --shadow-subtle:0 1px 3px rgba(0,0,0,0.6);

    --radius-pill:999px;

    --flip-gold:#F6CE46;
  }
}

/* ---------- LAYOUT ---------- */

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-main);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Sticky header spacing handled dynamically */
  padding-top: var(--header-offset, 0px);
}

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

/* ---------- CARDS ---------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.5rem;
}

.card-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  margin: 0;
}

/* ---------- COLLAPSIBLE BUCKETS ---------- */
.cmep-collapse{
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.40));
  box-shadow: var(--shadow-soft);
}
/* --- Toss-Ups bucket: remove "slab" background behind cards --- */
.cmep-collapse{
  background: transparent !important;
}
.cmep-collapse-summary{
  background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.40));
}
@media (prefers-color-scheme: dark){
  .cmep-collapse-summary{
    background: linear-gradient(180deg, rgba(10,14,24,0.75), rgba(10,14,24,0.45));
  }
}

@media (prefers-color-scheme: dark){
  .cmep-collapse{
    background: linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.70));
  }
}
.cmep-collapse > summary{
  list-style: none;
}
.cmep-collapse summary::-webkit-details-marker{ display:none; }

.cmep-collapse-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  cursor:pointer;
  user-select:none;
  position: relative;
  transition: background 160ms ease-out;
}
.cmep-collapse-summary:hover{
  background: rgba(246,206,70,0.10);
}
@media (prefers-color-scheme: dark){
  .cmep-collapse-summary:hover{ background: rgba(246,206,70,0.12); }
}
.cmep-collapse-left{ display:flex; flex-direction:column; gap:0.15rem; min-width: 0; }
.cmep-collapse-title{
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.cmep-collapse-subtitle{
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.2;
  max-width: 52ch;
}
.cmep-collapse-right{
  display:flex;
  align-items:center;
  gap:0.65rem;
  flex-shrink:0;
}

/* neutral count pill */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(15,23,42,0.12);
}

/* Match state-specific pivotal pill exactly */
.pill-flip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.15rem 0.55rem;
  border-radius:var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  border:none;
  box-shadow:var(--shadow-subtle);
  background: var(--flip-gold, #F5C542);
  color:#000;
}
.pill.pill-flip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.15rem 0.55rem;
  border-radius:var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  border:none;
  box-shadow:var(--shadow-subtle);
  background: var(--flip-gold, #F5C542);
  color:#000;
}
.pill-neutral{
  background: rgba(255,255,255,0.70);
  color: var(--text-main);
}
@media (prefers-color-scheme: dark){
  .pill-neutral{
    background: rgba(2,6,23,0.65);
    color: var(--text-main);
  }
}

.cmep-collapse-chevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 180ms ease-out;
  opacity: 0.95;
}

.cmep-collapse[open] .cmep-collapse-summary{
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.02);
}
@media (prefers-color-scheme: dark){
  .cmep-collapse[open] .cmep-collapse-summary{ background: rgba(255,255,255,0.03); }
}
.cmep-collapse[open] .cmep-collapse-chevron{
  transform: rotate(-135deg);
}

.cmep-collapse-body{
  padding: 0.75rem 1.1rem 1.1rem;
}
.cmep-collapse[open] .cmep-collapse-body{
  animation: cmepDrop 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes cmepDrop{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px){
  .cmep-collapse-summary{ padding: 0.9rem 0.95rem; }
  .cmep-collapse-subtitle{ display:none; } /* less text on mobile */
  .cmep-collapse-body{ padding: 0.65rem 0.95rem 0.95rem; }
}

/* ---------- CARD HEADER ---------- */
.card-header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin: 0 0 1.2rem;
}

/* ---------- IFRAMES ---------- */

iframe {
  width: 100%;
  border: 0;
  height: 0; /* dynamically resized */
  display: block;
  margin-bottom: 1.3rem;
}

/* ---------- BUTTON / LINK CARD ---------- */
.find-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.85rem;
}
.find-text{
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding: 0.75rem 1.05rem;
  border-radius: 18px;
  font-weight: 800;
  text-decoration:none;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
}
.btn:hover{ transform: translateY(-1px); }

.find-row .btn{
  align-self: center;
  min-width: 240px;
}

/* GLOBAL TOOLTIP OVERLAY (for embedded seat-table iframes) */
#cmep-global-tooltip{
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
  min-width: 200px;
  max-width: 260px;
  padding: 0.55rem 0.65rem;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.92);
  color: #111827;
  box-shadow: var(--shadow-soft);
  transform: translate(-50%, -115%);
  transition: opacity 120ms ease;
}
@media (prefers-color-scheme: dark){
  #cmep-global-tooltip{
    background: rgba(20,20,20,0.92);
    color: #f9fafb;
    border-color: rgba(255,255,255,0.14);
  }
}
/* match tooltip inner typography used in seat pages */
#cmep-global-tooltip .tip-date{ font-weight: 800; margin: 0 0 6px; font-size: 0.9rem; }
#cmep-global-tooltip .tip-row{ display:flex; justify-content:space-between; gap:0.65rem; margin: 2px 0; font-size: 0.86rem; font-weight: 700; }
#cmep-global-tooltip .tip-d{ color: var(--solid-d); }
#cmep-global-tooltip .tip-r{ color: var(--solid-r); }


/* =========================
   NATIVE HOUSE ARC (inline)
   ========================= */
#cmep-house-arc-native{
  --solid-d:#0076BA; --likely-d:#00A2FF; --lean-d:#56C1FF; --toss-up:#929292;
  --lean-r:#FF968D;  --likely-r:#FF644E; --solid-r:#EE220C;
  --flip-gold:#F6CE46;

  --bg-page:#f3f4f6; --bg-card:#ffffff; --border-subtle:#d4d4d8;
  --text-main:#111827; --text-muted:#6b7280; --text-strong:#000000;

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

  --transition-fast:150ms ease-out;
  --transition-med:220ms cubic-bezier(0.22,0.61,0.36,1);
}

@media (prefers-color-scheme: dark){
#cmep-house-arc-native{
    --bg-page:#020617; --bg-card:#020617; --border-subtle:#1f2937;
    --text-main:#e5e7eb; --text-muted:#9ca3af; --text-strong:#f9fafb;
    --shadow-soft:0 18px 40px rgba(0,0,0,0.85);
    --shadow-subtle:0 1px 3px rgba(0,0,0,0.6);
  }
}

/* Layout */
#cmep-house-arc-native{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg-page);
  color:var(--text-main);
}
.arc-wrap{
  max-width:1100px;
  margin:0 auto 24px;
  padding:0 12px 24px;
  box-sizing:border-box;
  position:relative;
  /* Enable container queries so Path buttons respond to card width, not viewport width */
  container-type:inline-size;
  container-name:cmep-house-arc;
}
svg{ width:100%; height:auto; display:block; }

/* Legend */
.legend{
  max-width:1100px;
  margin:10px auto 8px;
  padding:0 12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.legend-item{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-size:0.8rem;
  font-weight:800;
  letter-spacing:0.03em;
  color:#fff;
  box-shadow:var(--shadow-subtle);
}
.leg-solid-D{background:var(--solid-d)}
.leg-likely-D{background:var(--likely-d)}
.leg-lean-D{background:var(--lean-d)}
.leg-toss-up{background:var(--toss-up)}
.leg-lean-R{background:var(--lean-r)}
.leg-likely-R{background:var(--likely-r)}
.leg-solid-R{background:var(--solid-r)}
.leg-majority{
  background:#fff;
  color:#929292;
  border:2px solid var(--flip-gold);
  box-shadow:var(--shadow-subtle);
}
.leg-majority .ring{
  width:12px;height:12px;border-radius:50%;
  border:3px solid var(--flip-gold);
  display:inline-block;
  margin-right:6px;
}

/* Path label */
.path-separator-line{
  width:100%;
  max-width:1100px;
  margin:8px auto 12px;
  border-bottom:2px solid var(--border-subtle);
  display:none;
}

.path-banner{
  max-width:1100px;
  margin:0 auto 4px;
  padding:0 12px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:900;
  font-size:1.05rem;
  min-height:1.4em;

  opacity:0;
  transform:translateY(4px);
  transition:opacity 220ms ease, transform 260ms cubic-bezier(0.22,0.61,0.36,1);
}
.path-banner.show{
  opacity:1;
  transform:translateY(0);
}
.path-banner .path-pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  color:#fff;
  font-weight:900;
  letter-spacing:0.01em;
}
.path-banner .path-pill.dem{ background:var(--solid-d); }
.path-banner .path-pill.gop{ background:var(--solid-r); }
.path-explainer{
  max-width:1100px;
  margin:0 auto 16px;
  padding:0 12px;
  text-align:center;
  font-size:0.85rem;
  color:var(--text-muted);
  min-height:1.4em;
}

/* Seat colors */
.solid-D{fill:#0076BA}
.likely-D{fill:#00A2FF}
.lean-D{fill:#56C1FF}
.toss-up{fill:#929292}
.lean-R{fill:#FF968D}
.likely-R{fill:#FF644E}
.solid-R{fill:#EE220C}

/* Base seat motion */
.seat{
  cursor:pointer;
  transition:
    cx 420ms cubic-bezier(0.22,0.61,0.36,1),
    cy 620ms cubic-bezier(0.18,0.89,0.32,1.18),
    r  320ms cubic-bezier(0.22,0.61,0.36,1),
    opacity var(--transition-fast);
  will-change: cx, cy, r, opacity;
}
.seat, #cmep-house-arc-mm-halo{
  transform-box:fill-box;
  transform-origin:center;
}

/* smoother “flight” for the currently moving dot */
.seat.cmep-stackflight{
  transition:
    cx 560ms cubic-bezier(0.22,0.61,0.36,1),
    cy 920ms cubic-bezier(0.18,0.89,0.32,1.10),
    r  360ms cubic-bezier(0.22,0.61,0.36,1),
    opacity var(--transition-fast);
}

.majority-seat{
  stroke:var(--flip-gold);
  stroke-width:1.5;
}

/* Path highlighting (no DOM reordering needed) */
.seat.dem-path{ filter:drop-shadow(0 0 5px rgba(0,118,186,0.9)); }
.seat.gop-path{ filter:drop-shadow(0 0 5px rgba(238,34,12,0.9)); }
.seat.dem-path, .seat.gop-path{
  stroke: rgba(255,255,255,0.28);
  stroke-width: 0.6;
}

/* Ensure path highlight stroke never overrides the Majority Maker outline */
.seat.majority-seat.dem-path,
.seat.majority-seat.gop-path{
  stroke: var(--flip-gold) !important;
  stroke-width: 1.8 !important;
}

.seat.path-muted{ opacity:0.20; pointer-events:none; }

/* Gentle hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  .seat:hover{
    transform:scale(1.06);
    filter:drop-shadow(0 0 7px rgba(15,23,42,0.18));
  }
}

/* Tooltip */
#cmep-house-arc-tooltip{
  position:absolute;
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  color:var(--text-main);
  padding:10px 14px;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  pointer-events:none;
  font-size:0.9rem;
  display:none;
  max-width:260px;
  z-index:9999;
}
#cmep-house-arc-tooltip strong{ font-weight:800; color:var(--text-strong); }
#cmep-house-arc-tooltip.mobile{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  pointer-events:auto;
  max-width:90vw;
}
@supports (padding-bottom: env(safe-area-inset-bottom)){
  #cmep-house-arc-tooltip.mobile{ bottom:calc(env(safe-area-inset-bottom) + 20px); }
}
#cmep-house-arc-tooltip strong, #cmep-house-arc-native .mobile-path-card strong{ font-weight:800; color:var(--text-strong); }
#cmep-house-arc-tooltip .ct-head, #cmep-house-arc-native .mobile-path-card .ct-head{ font-weight:900; font-size:0.95rem; letter-spacing:-0.01em; color:var(--text-strong); margin:0 0 0.35rem; }
#cmep-house-arc-tooltip .ct-summary, #cmep-house-arc-native .mobile-path-card .ct-summary{ display:flex; flex-wrap:wrap; gap:0.35rem; margin:0 0 0.45rem; }
#cmep-house-arc-tooltip .ct-chip, #cmep-house-arc-native .mobile-path-card .ct-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.18rem 0.5rem; border-radius:999px;
  border:1px solid var(--border-subtle); background:var(--bg-card-subtle);
  color:var(--text-muted); font-size:0.72rem; font-weight:800; line-height:1.1;
}
#cmep-house-arc-tooltip .ct-chip.solid-D, #cmep-house-arc-native .mobile-path-card .ct-chip.solid-D{ background:var(--solid-d); border-color:transparent; color:#fff; }
#cmep-house-arc-tooltip .ct-chip.likely-D, #cmep-house-arc-native .mobile-path-card .ct-chip.likely-D{ background:var(--likely-d); border-color:transparent; color:#fff; }
#cmep-house-arc-tooltip .ct-chip.lean-D, #cmep-house-arc-native .mobile-path-card .ct-chip.lean-D{ background:var(--lean-d); border-color:transparent; color:#fff; }
#cmep-house-arc-tooltip .ct-chip.toss-up, #cmep-house-arc-native .mobile-path-card .ct-chip.toss-up{ background:var(--toss-up); border-color:transparent; color:#fff; }
#cmep-house-arc-tooltip .ct-chip.lean-R, #cmep-house-arc-native .mobile-path-card .ct-chip.lean-R{ background:var(--lean-r); border-color:transparent; color:#fff; }
#cmep-house-arc-tooltip .ct-chip.likely-R, #cmep-house-arc-native .mobile-path-card .ct-chip.likely-R{ background:var(--likely-r); border-color:transparent; color:#fff; }
#cmep-house-arc-tooltip .ct-chip.solid-R, #cmep-house-arc-native .mobile-path-card .ct-chip.solid-R{ background:var(--solid-r); border-color:transparent; color:#fff; }
#cmep-house-arc-tooltip .ct-rows, #cmep-house-arc-native .mobile-path-card .ct-rows{ display:grid; gap:0.36rem; }
#cmep-house-arc-tooltip .ct-row, #cmep-house-arc-native .mobile-path-card .ct-row{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; }
#cmep-house-arc-tooltip .ct-left, #cmep-house-arc-native .mobile-path-card .ct-left{ min-width:0; display:flex; flex-direction:column; gap:0.06rem; }
#cmep-house-arc-tooltip .ct-name, #cmep-house-arc-native .mobile-path-card .ct-name{ font-weight:850; color:var(--text-strong); line-height:1.15; }
#cmep-house-arc-tooltip .ct-sub, #cmep-house-arc-native .mobile-path-card .ct-sub{ color:var(--text-muted); font-size:0.76rem; font-weight:700; line-height:1.15; }
#cmep-house-arc-tooltip .ct-right, #cmep-house-arc-native .mobile-path-card .ct-right{ text-align:right; white-space:nowrap; }
#cmep-house-arc-tooltip .ct-pct, #cmep-house-arc-native .mobile-path-card .ct-pct{ font-weight:900; font-variant-numeric:tabular-nums; }
#cmep-house-arc-tooltip .ct-pct.d, #cmep-house-arc-native .mobile-path-card .ct-pct.d{ color:var(--solid-d); }
#cmep-house-arc-tooltip .ct-pct.r, #cmep-house-arc-native .mobile-path-card .ct-pct.r{ color:var(--solid-r); }

/* National House map tooltip styled like arc tooltips */
#cmep-house-national-map-tooltip{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:min(320px, calc(100vw - 16px));
  max-width:calc(100vw - 16px);
  padding:0.7rem 0.8rem;
  border-radius:20px;
  border:1px solid var(--border-subtle);
  background:rgba(255,255,255,0.94);
  color:var(--text-main);
  box-shadow:var(--shadow-soft);
  font-size:0.9rem;
  z-index:9999;
  display:none;
  pointer-events:auto;
}
@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){
  #cmep-house-national-map-tooltip{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}
html[data-theme="dark"] #cmep-house-national-map-tooltip{ background:rgba(2,6,23,0.9); border-color:rgba(255,255,255,0.14); }
@media (prefers-color-scheme: dark){
  #cmep-house-national-map-tooltip{ background:rgba(2,6,23,0.9); border-color:rgba(255,255,255,0.14); }
}
#cmep-house-national-map-tooltip .ct-head,
.cmep-house-national-popup .ct-head{ font-weight:900; font-size:0.95rem; letter-spacing:-0.01em; color:var(--text-strong); margin:0 0 0.35rem; }
#cmep-house-national-map-tooltip .ct-summary,
.cmep-house-national-popup .ct-summary{ display:flex; flex-wrap:wrap; gap:0.35rem; margin:0 0 0.45rem; }
#cmep-house-national-map-tooltip .ct-chip,
.cmep-house-national-popup .ct-chip{ display:inline-flex; align-items:center; justify-content:center; padding:0.18rem 0.5rem; border-radius:999px; border:1px solid var(--border-subtle); background:var(--bg-card-subtle); color:var(--text-muted); font-size:0.72rem; font-weight:800; line-height:1.1; }
#cmep-house-national-map-tooltip .ct-chip.solid-D, .cmep-house-national-popup .ct-chip.solid-D{ background:var(--solid-d); border-color:transparent; color:#fff; }
#cmep-house-national-map-tooltip .ct-chip.likely-D, .cmep-house-national-popup .ct-chip.likely-D{ background:var(--likely-d); border-color:transparent; color:#fff; }
#cmep-house-national-map-tooltip .ct-chip.lean-D, .cmep-house-national-popup .ct-chip.lean-D{ background:var(--lean-d); border-color:transparent; color:#fff; }
#cmep-house-national-map-tooltip .ct-chip.toss-up, .cmep-house-national-popup .ct-chip.toss-up{ background:var(--toss-up); border-color:transparent; color:#fff; }
#cmep-house-national-map-tooltip .ct-chip.lean-R, .cmep-house-national-popup .ct-chip.lean-R{ background:var(--lean-r); border-color:transparent; color:#fff; }
#cmep-house-national-map-tooltip .ct-chip.likely-R, .cmep-house-national-popup .ct-chip.likely-R{ background:var(--likely-r); border-color:transparent; color:#fff; }
#cmep-house-national-map-tooltip .ct-chip.solid-R, .cmep-house-national-popup .ct-chip.solid-R{ background:var(--solid-r); border-color:transparent; color:#fff; }
#cmep-house-national-map-tooltip .ct-rows,
.cmep-house-national-popup .ct-rows{ display:grid; gap:0.36rem; }
#cmep-house-national-map-tooltip .ct-row,
.cmep-house-national-popup .ct-row{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; }
#cmep-house-national-map-tooltip .ct-left,
.cmep-house-national-popup .ct-left{ min-width:0; display:flex; flex-direction:column; gap:0.06rem; }
#cmep-house-national-map-tooltip .ct-name,
.cmep-house-national-popup .ct-name{ font-weight:850; color:var(--text-strong); line-height:1.15; }
#cmep-house-national-map-tooltip .ct-sub,
.cmep-house-national-popup .ct-sub{ color:var(--text-muted); font-size:0.76rem; font-weight:700; line-height:1.15; }
#cmep-house-national-map-tooltip .ct-right,
.cmep-house-national-popup .ct-right{ text-align:right; white-space:nowrap; }
#cmep-house-national-map-tooltip .ct-pct,
.cmep-house-national-popup .ct-pct{ font-weight:900; font-variant-numeric:tabular-nums; }
#cmep-house-national-map-tooltip .ct-pct.d,
.cmep-house-national-popup .ct-pct.d{ color:var(--solid-d); }
#cmep-house-national-map-tooltip .ct-pct.r,
.cmep-house-national-popup .ct-pct.r{ color:var(--solid-r); }

.cmep-house-national-inset-card{ overflow:visible !important; }
.cmep-house-national-inset-card .maplibregl-map{ overflow:visible !important; border-radius:0 0 14px 14px; }
.cmep-house-national-inset-card .maplibregl-canvas-container{ overflow:hidden !important; border-radius:0 0 14px 14px; }
.cmep-house-national-inset-card .maplibregl-canvas{ border-radius:0 0 14px 14px; }
.cmep-house-national-inset-card .maplibregl-control-container,
.cmep-house-national-inset-card .maplibregl-popup{ z-index:60; }
.cmep-house-national-popup .maplibregl-popup-content{ padding:0.7rem 0.8rem; border-radius:20px; border:1px solid var(--border-subtle); background:rgba(255,255,255,0.94); color:var(--text-main); box-shadow:var(--shadow-soft); }
@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){
  .cmep-house-national-popup .maplibregl-popup-content{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}
html[data-theme="dark"] .cmep-house-national-popup .maplibregl-popup-content{ background:rgba(2,6,23,0.9); border-color:rgba(255,255,255,0.14); }
@media (prefers-color-scheme: dark){
  .cmep-house-national-popup .maplibregl-popup-content{ background:rgba(2,6,23,0.9); border-color:rgba(255,255,255,0.14); }
}
.cmep-house-national-popup .maplibregl-popup-tip{ display:none; }
.cmep-house-national-popup .maplibregl-popup-close-button{ display:none; }
@supports (padding-bottom: env(safe-area-inset-bottom)){
  #cmep-house-national-map-tooltip{ bottom:calc(env(safe-area-inset-bottom) + 20px); }
}
#cmep-house-arc-native .mobile-path-majority{ display:none; }
@media (max-width:820px), (hover: none), (pointer: coarse){
  #cmep-house-arc-native .mobile-path-majority{ display:none; margin-top:14px; }
  #cmep-house-arc-native .mobile-path-majority.show{ display:block; width:100%; }
  #cmep-house-arc-native .mobile-path-dots{ display:flex; align-items:flex-end; justify-content:center; gap:9px; margin:0 0 14px; padding:0 8px; }
  #cmep-house-arc-native .mobile-path-dot{ width:14px; height:14px; border-radius:999px; border:2px solid color-mix(in srgb, var(--dot-color, rgba(148,163,184,0.45)) 80%, rgba(255,255,255,0.18)); background:color-mix(in srgb, var(--dot-color, rgba(148,163,184,0.28)) 34%, transparent); box-shadow:0 6px 16px rgba(15,23,42,0.12); transition:transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med), background-color var(--transition-med); padding:0; cursor:pointer; }
  #cmep-house-arc-native .mobile-path-dot.active{ transform:translateY(-2px) scale(1.12); box-shadow:0 10px 22px rgba(15,23,42,0.18); background:var(--dot-color, rgba(148,163,184,0.45)); border-color:var(--dot-color, rgba(148,163,184,0.45)); }
  #cmep-house-arc-native .mobile-path-dot.majority-maker{ border-color:var(--flip-gold); }
  #cmep-house-arc-native .mobile-path-dot.majority-maker.active{ box-shadow:0 0 0 3px rgba(246,206,70,0.22), 0 10px 22px rgba(15,23,42,0.18); }
  #cmep-house-arc-native .mobile-path-cards{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 8px 6px; scrollbar-width:none; }
  #cmep-house-arc-native .mobile-path-cards::-webkit-scrollbar{ display:none; }
  #cmep-house-arc-native .mobile-path-card{ flex:0 0 min(320px, calc(100vw - 16px)); width:min(320px, calc(100vw - 16px)); max-width:calc(100vw - 16px); min-width:0; scroll-snap-align:center; padding:0.7rem 0.8rem; border-radius:20px; border:1px solid var(--border-subtle); background:rgba(255,255,255,0.94); color:var(--text-main); box-shadow:var(--shadow-soft); font-size:0.9rem; }
  #cmep-house-arc-native .mobile-path-card{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  #cmep-house-arc-native .mobile-path-card:active{ transform:scale(0.995); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    #cmep-house-arc-native .mobile-path-card{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  }
  #cmep-house-arc-native .mobile-path-card.majority-maker{ border:2px solid var(--flip-gold); box-shadow:0 0 0 3px rgba(246,206,70,0.12), var(--shadow-soft); }
  @media (prefers-color-scheme: dark){
    #cmep-house-arc-native .mobile-path-card{ background:rgba(2,6,23,0.9); border-color:rgba(255,255,255,0.14); }
  }
}

/* Path controls */
#cmep-house-arc-path-controls{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  display:flex;
  gap:24px;
  pointer-events:none;
}
.path-button{
  width:120px;height:120px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.9);
  background:#000;
  color:#fff;
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
  font-weight:900;
  cursor:pointer;
  pointer-events:auto;
  transition:
    transform var(--transition-med),
    box-shadow var(--transition-med),
    background-color var(--transition-med),
    border-color var(--transition-med),
    color var(--transition-med);
}
.path-button.path-dem{ background:var(--solid-d); }
.path-button.path-gop{ background:var(--solid-r); }
.path-button span.label{ pointer-events:none; letter-spacing:0.03em; }
.path-button span.close-icon{ display:none; font-size:1.9rem; line-height:1; pointer-events:none; }
.path-button:hover{ transform:translateY(-1px) scale(1.02); box-shadow:0 22px 45px rgba(15,23,42,0.18); }
.path-button.active{ background:transparent; box-shadow:0 0 0 2px rgba(15,23,42,0.15); }
.path-button.active span.label{ display:none; }
.path-button.active span.close-icon{ display:block; }
.path-button.path-dem.active{ border-color:var(--solid-d); color:var(--solid-d); }
.path-button.path-gop.active{ border-color:var(--solid-r); color:var(--solid-r); }

@media (max-width:600px){
  #cmep-house-arc-path-controls{ bottom:10%; gap:16px; }
  .path-button{ width:96px; height:96px; font-size:0.8rem; }
  .path-button span.close-icon{ font-size:1.6rem; }
}
@media (max-width:600px){
  #cmep-house-arc-path-controls{
    position:static;
    transform:none;
    margin-top:20px;
    margin-bottom:10px;
    justify-content:center;
  }
}

/* Container-based scaling (fixes desktop layouts where the arc card shrinks but the viewport stays wide) */
@container cmep-house-arc (max-width: 860px){
  #cmep-house-arc-path-controls{ bottom:10%; gap:16px; }
  .path-button{ width:96px; height:96px; font-size:0.8rem; }
  .path-button span.close-icon{ font-size:1.6rem; }
}
@container cmep-house-arc (max-width: 700px){
  #cmep-house-arc-path-controls{
    position:static;
    transform:none;
    margin-top:20px;
    margin-bottom:10px;
    justify-content:center;
  }
}

/* Beauty: subtle bloom + ripple + settle */
@keyframes cmep-path-bloom{ 0%{transform:scale(0.98);opacity:0.92} 55%{transform:scale(1.03);opacity:1} 100%{transform:scale(1);opacity:1} }
.seat.cmep-bloom{ animation:cmep-path-bloom 420ms cubic-bezier(0.22,0.61,0.36,1); }

@keyframes cmep-path-pulse{ 0%{filter:brightness(1)} 40%{filter:brightness(1.55)} 100%{filter:brightness(1)} }
.seat.cmep-pulsing{ animation:cmep-path-pulse 420ms ease-out; }

@keyframes cmep-settle{ 0%{transform:scale(0.94)} 55%{transform:scale(1.08)} 100%{transform:scale(1)} }
.seat.cmep-settle{ animation:cmep-settle 360ms cubic-bezier(0.18,0.89,0.32,1.28); }

@keyframes cmep-majority-pulse{
  0%{filter:drop-shadow(0 0 0 rgba(246,206,70,0))}
  35%{filter:drop-shadow(0 0 11px rgba(246,206,70,0.85))}
  100%{filter:drop-shadow(0 0 0 rgba(246,206,70,0))}
}
.seat.majority-seat.cmep-majority-pulse{ animation:cmep-majority-pulse 760ms ease-out; }

/* Halo: pop out then back in quickly (no lingering) */
#cmep-house-arc-mm-halo{
  fill:none;
  stroke:var(--flip-gold);
  stroke-width:2.0;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(246,206,70,0.45));
}
@keyframes cmep-halo-pop{
  0%{transform:scale(0.85);opacity:0}
  35%{transform:scale(1.22);opacity:0.95}
  70%{transform:scale(1.00);opacity:0.55}
  100%{transform:scale(0.85);opacity:0}
}
#cmep-house-arc-mm-halo.pop{ animation:cmep-halo-pop 520ms ease-out; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .seat{ transition:none !important; }
  .seat.cmep-bloom,.seat.cmep-pulsing,.seat.cmep-settle,
  .seat.majority-seat.cmep-majority-pulse,#cmep-house-arc-mm-halo.pop{ animation:none !important; }
  .path-banner{ transition:none !important; }
}

/* Share (exports legend + path pill + arc; excludes buttons) */
.cmep-share-row{
  max-width:1100px;
  margin:8px auto 0;
  padding:0 12px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.cmep-share-btn{
  appearance:none;
  border:1px solid var(--border-subtle);
  background:var(--bg-card);
  color:var(--text-main);
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:0.85rem;
  letter-spacing:0.02em;
  box-shadow:var(--shadow-subtle);
  cursor:pointer;
  transition:transform var(--transition-med), box-shadow var(--transition-med), background-color var(--transition-med);
}
.cmep-share-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.cmep-share-btn:active{ transform:translateY(0px) scale(0.99); }
.cmep-share-btn[disabled]{ opacity:0.65; cursor:not-allowed; }
@media (max-width:600px){
  .cmep-share-row{ justify-content:center; }
}


/* Card-share mode: hide any in-widget share UI */
#cmep-share-btn, #cmep-share-button, .cmep-share-btn { display:none !important; }

/* ===== Share (Image) — CM unified (House/Senate) ===== */
.cmep-share-row{
  max-width:1100px;
  margin:6px auto 10px;
  padding:0 12px;
  display:flex;
  justify-content:center;
}
#cmep-house-arc-share-image{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-size:0.9rem;
  font-weight:900;
  letter-spacing:0.02em;
  color:#fff;
  background:var(--toss-up);
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform var(--transition-med), box-shadow var(--transition-med), opacity var(--transition-fast);
}
#cmep-house-arc-share-image:hover{ transform:translateY(-1px); }
#cmep-house-arc-share-image:active{ transform:translateY(0px) scale(0.98); opacity:0.95; }

/* Share header stack only during capture */
.cmep-share-stack{
  max-width:1100px;
  margin:12px auto 10px;
  padding:0 12px;
  display:none;
  box-sizing:border-box;
}
.cmep-share-stack-inner{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:18px;
  box-shadow:var(--shadow-subtle);
  overflow:hidden;
}
.cmep-share-top{
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.cmep-share-left{ display:flex; align-items:center; gap:10px; }
.cmep-share-logo{
  width:34px;
  height:34px;
  border-radius:999px;
  flex:0 0 auto;
}
#cmep-house-arc-share-updated{
  font-size:0.78rem;
  font-weight:900;
  color:var(--text-muted);
  white-space:nowrap;
  margin-left:auto;
}
.cmep-share-bottom{
  padding:8px 12px;
  border-top:1px solid var(--border-subtle);
  font-size:0.82rem;
  font-weight:900;
  letter-spacing:0.02em;
  color:var(--text-muted);
  text-align:center;
}

/* Share-mode toggles */
.cmep-sharing .cmep-share-stack{ display:block; }
.cmep-sharing #cmep-house-arc-share-image{ display:none !important; }
.cmep-sharing #cmep-house-arc-tooltip{ display:none !important; }

/* Hide Path UI in snapshot only (keep visible normally) */
.cmep-sharing #cmep-house-arc-path-controls,
.cmep-sharing #cmep-house-arc-path-separator,
.cmep-sharing #cmep-house-arc-path-banner,
.cmep-sharing #cmep-house-arc-path-explainer{ display:none !important; }

@media (max-width:520px){
  #cmep-house-arc-share-updated{
    width:100%;
    margin-left:0;
    white-space:normal;
  }
  .cmep-share-bottom{
    text-align:left;
  }
}


#cmep-house-arc-native{ background: transparent !important; }


  /* Native widget hosts */
  .cmep-native-widget{display:block;width:100%;}
  #cmep-house-seats-native{margin-top: 1.25rem;}

/* =============== By State (Native) =============== */
#cmep-house-by-state-card .cmep-by-state-controls{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
}
#cmep-house-by-state-card .cmep-by-state-filter{
  flex: 1 1 auto;
  min-width: 220px;
  padding: 0.75rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(255,255,255,0.70);
  color: var(--text-main);
  font-weight: 700;
  outline: none;
}
@media (prefers-color-scheme: dark){
  #cmep-house-by-state-card .cmep-by-state-filter{
    background: rgba(0,0,0,0.25);
    border-color: rgba(148,163,184,0.20);
    color: rgba(255,255,255,0.92);
  }
}
#cmep-house-by-state-card .cmep-by-state-filter:focus{
  border-color: rgba(246,206,70,0.8);
  box-shadow: 0 0 0 4px rgba(246,206,70,0.18);
}
#cmep-house-by-state-card .cmep-by-state-meta{
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

#cmep-house-by-state-card details.cmep-state{
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  margin-bottom: 0.65rem;
}
#cmep-house-by-state-card details.cmep-state > summary.cmep-state-summary{
  list-style: none;
  cursor: pointer;
  padding: 0.8rem 0.95rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(148,163,184,0.06);
}
#cmep-house-by-state-card details.cmep-state[open] > summary.cmep-state-summary{
  background: rgba(148,163,184,0.10);
}
#cmep-house-by-state-card details.cmep-state > summary.cmep-state-summary::-webkit-details-marker{ display:none; }

#cmep-house-by-state-card .cmep-state-left{
  display:flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}
#cmep-house-by-state-card .cmep-state-name{
  font-weight: 900;
  color: var(--text-main);
}
#cmep-house-by-state-card .cmep-state-abbr{
  font-weight: 900;
  color: var(--text-muted);
  font-size: 0.85rem;
}
#cmep-house-by-state-card .cmep-state-right{
  display:flex;
  align-items:center;
  gap: 0.6rem;
}
#cmep-house-by-state-card .cmep-state-chevron{
  width: 18px;
  height: 18px;
  display:inline-block;
  opacity: 0.8;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.5 7.5a1 1 0 0 1 1.4 0L10 10.6l3.1-3.1a1 1 0 1 1 1.4 1.4l-3.8 3.8a1 1 0 0 1-1.4 0L5.5 8.9a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.5 7.5a1 1 0 0 1 1.4 0L10 10.6l3.1-3.1a1 1 0 1 1 1.4 1.4l-3.8 3.8a1 1 0 0 1-1.4 0L5.5 8.9a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms ease;
  color: var(--text-muted);
}
#cmep-house-by-state-card details.cmep-state[open] .cmep-state-chevron{
  transform: rotate(180deg);
}

#cmep-house-by-state-card .cmep-state-body{
  padding: 0.85rem 0.95rem 1.0rem;
}
#cmep-house-by-state-card .district-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 0.75rem;
}
#cmep-house-by-state-card .district-card{
  grid-column: span 6;
}
@media (max-width: 900px){
  #cmep-house-by-state-card .district-card{ grid-column: span 12; }
  #cmep-house-by-state-card .cmep-by-state-controls{ flex-direction: column; align-items: stretch; }
  #cmep-house-by-state-card .cmep-by-state-meta{ text-align: right; }
}



#cmep-house-by-state-card .district-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 0.75rem;
}
#cmep-house-by-state-card .district-card{ grid-column: span 6; }
@media (max-width: 900px){
  #cmep-house-by-state-card .district-card{ grid-column: span 12; }
}

/* State collapsibles: match Toss-Up/Lean collapsibles, but no shadow */
#cmep-house-by-state-card details.cmep-collapse{
  box-shadow: none !important;
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 16px;
  background: transparent;
  margin-bottom: 0.65rem;
  overflow: hidden;
}
#cmep-house-by-state-card details.cmep-collapse[open]{
  box-shadow: none !important;
}
#cmep-house-by-state-card details.cmep-collapse > summary.cmep-collapse-summary{
  border-radius: 0;
}
#cmep-house-by-state-card details.cmep-collapse[open] > summary.cmep-collapse-summary{
  box-shadow: none !important;
}



/* === By-State district cards match Toss-Ups/Lean buckets exactly === */
#cmep-house-by-state-card .solid-D{ background: var(--solid-d);   color: #fff; font-weight: 700; }
.likely-R { background: var(--likely-r);  color: #fff; font-weight: 700; }
/* Rating pill (matches index.html) */
.rating-pill{
  padding:0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  white-space:nowrap;
  border:1px solid transparent;
  box-shadow: var(--shadow-subtle);
  color:#fff;
}

/* Rating pill colors (scoped so arc SVG fills are untouched) */
#cmep-house-by-state-card .rating-pill.solid-D{ background: var(--solid-d); }
#cmep-house-by-state-card .rating-pill.likely-D{ background: var(--likely-d); }
#cmep-house-by-state-card .rating-pill.lean-D{ background: var(--lean-d); }
#cmep-house-by-state-card .rating-pill.toss-up{ background: var(--toss-up); }
#cmep-house-by-state-card .rating-pill.lean-R{ background: var(--lean-r); }
#cmep-house-by-state-card .rating-pill.likely-R{ background: var(--likely-r); }
#cmep-house-by-state-card .rating-pill.solid-R{ background: var(--solid-r); }
.lean-R   { background: var(--lean-r);    color: #fff; font-weight: 700; }
/* --- By-State: force exact pill + odds-bar geometry to match Toss-Up/Lean buckets --- */
#cmep-house-by-state-card .rating-pill{
  border-radius: 999px !important;
  padding: 0.2rem 0.6rem !important;
  box-shadow: var(--shadow-subtle) !important;
}
#cmep-house-by-state-card .prob-bar{
  border-radius: 999px !important;
  overflow: hidden !important;
}

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

#cmep-house-by-state-card .lean-D{ background: var(--lean-d);    color: #fff; font-weight: 700; }
.toss-up  { background: var(--toss-up);   color: #fff; font-weight: 700; }

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

#cmep-house-by-state-card .toss-up{ background: var(--toss-up);   color: #fff; font-weight: 700; }

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

#cmep-house-by-state-card .lean-R{ background: var(--lean-r);    color: #fff; font-weight: 700; }
/* Rating pill (matches index.html) */
.rating-pill{
  padding:0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  white-space:nowrap;
  border:1px solid transparent;
  box-shadow: var(--shadow-subtle);
  color:#fff;
}

#cmep-house-by-state-card .likely-R{ background: var(--likely-r);  color: #fff; font-weight: 700; }
/* Rating pill (matches index.html) */
.rating-pill{
  padding:0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  white-space:nowrap;
  border:1px solid transparent;
  box-shadow: var(--shadow-subtle);
  color:#fff;
}

#cmep-house-by-state-card .solid-R{ background: var(--solid-r);   color: #fff; font-weight: 700; }
/* Rating pill (matches index.html) */
.rating-pill{
  padding:0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  white-space:nowrap;
  border:1px solid transparent;
  box-shadow: var(--shadow-subtle);
  color:#fff;
}

#cmep-house-by-state-card .rating-pill{
  padding:0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  white-space:nowrap;
  border:1px solid transparent;
  box-shadow: var(--shadow-subtle);
  color:#fff;
}

#cmep-house-by-state-card .rating-none{
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

#cmep-house-by-state-card .district-intro{
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

#cmep-house-by-state-card .district-intro .intro-sub{
  display:block;
  margin-top:0.15rem;
  font-size:0.8rem;
}

#cmep-house-by-state-card .district-list{
  /* Default (mobile): single column list */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Wide screens: 2-column card grid (matches old by-state layout) */
@media (min-width: 901px){
  #cmep-house-by-state-card .district-list{
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 0.75rem;
  }
  #cmep-house-by-state-card .district-list .district-card{
    grid-column: span 6;
  }
}

/* Narrow screens: 1 column */
@media (max-width: 900px){
  #cmep-house-by-state-card .district-list .district-card{
    grid-column: span 12;
  }
}

#cmep-house-by-state-card .district-card{
  /* Match index.html "race" card style */
  background: var(--bg-card-subtle);
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-subtle);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#cmep-house-by-state-card .district-header{
  /* Match index.html "race-head" */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#cmep-house-by-state-card .district-right{
  display:flex;
  align-items:center;
  gap:0.45rem;
  flex-wrap:wrap;
}

#cmep-house-by-state-card .district-subheader{
  display:flex;
  align-items:center;
  gap:0.35rem;
  flex-wrap:wrap;
  font-size:0.82rem;
  line-height:1.1;
  color: var(--text-muted);
}

#cmep-house-by-state-card .district-subheader .inc-name{
  font-weight:650;
  color: var(--text-main);
}

#cmep-house-by-state-card .district-subheader .inc-note{
  font-weight:650;
  color: var(--text-muted);
}

#cmep-house-by-state-card .district-name{
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  display:flex;
  gap:0.45rem;
  align-items:center;
  flex-wrap:wrap;
}

#cmep-house-by-state-card .district-link{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease;
  will-change: transform;
}

#cmep-house-by-state-card .district-link:hover{
  transform: translateY(-1px);
filter: brightness(1.02);
}

#cmep-house-by-state-card .prob-row{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.1rem 0 0.15rem;
}

#cmep-house-by-state-card .prob-label{
  font-size: 0.75rem;
  font-weight: 600;
}

#cmep-house-by-state-card .prob-label-d{
  color: var(--solid-d);
}

#cmep-house-by-state-card .prob-label-r{
  color: var(--solid-r);
  margin-left: auto;
}

#cmep-house-by-state-card .prob-bar-wrapper{
  flex: 1 1 120px;
  display: flex;
  align-items: center;
}

#cmep-house-by-state-card .prob-bar{
  position: relative;
  width: 100%;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
}

#cmep-house-by-state-card .prob-bar-d,
#cmep-house-by-state-card .prob-bar-r{
  height: 100%;
  display: block;
}

#cmep-house-by-state-card .prob-bar-d{
  background: var(--solid-d);
  float: left;
}

#cmep-house-by-state-card .prob-bar-r{
  background: var(--solid-r);
  float: right;
}

/* ===== By-State district cards: EXACT match to Toss-Up/Lean cards (scoped) ===== */
#cmep-house-by-state-card .district-card {
  /* Match index.html "race" card style */
  background: var(--bg-card-subtle);
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-subtle);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#cmep-house-by-state-card .district-header {
  /* Match index.html "race-head" */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#cmep-house-by-state-card .district-right {
  display:flex;
  align-items:center;
  gap:0.45rem;
  flex-wrap:wrap;
}

#cmep-house-by-state-card .district-subheader {
  display:flex;
  align-items:center;
  gap:0.35rem;
  flex-wrap:wrap;
  font-size:0.82rem;
  line-height:1.1;
  color: var(--text-muted);
}

#cmep-house-by-state-card .district-subheader .inc-name {
  font-weight:650;
  color: var(--text-main);
}

#cmep-house-by-state-card .district-subheader .inc-note {
  font-weight:650;
  color: var(--text-muted);
}

#cmep-house-by-state-card .district-name {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  display:flex;
  gap:0.45rem;
  align-items:center;
  flex-wrap:wrap;
}

/* Incumbent pills use same .pill base with party colors */
.inc-D-pill {
  background: var(--solid-d);
  color: #fff;
}

#cmep-house-by-state-card .inc-R-pill {
  background: var(--solid-r);
  color: #fff;
}

/* “Flip” / pivotal pill (black text) */
.pill-flip,
.flip-pill{
  background: var(--flip-gold);
  color:#000;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

/* Force Pivotal Race pill to match state-specific exactly (do not affect other pills) */
.pill.pill-flip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.15rem 0.55rem;
  border-radius:var(--radius-pill);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  border:none;
  box-shadow:var(--shadow-subtle);
  background: var(--flip-gold, #F5C542);
  color:#000;
  text-transform:none;
}

/* Probability row */
.prob-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.1rem 0 0.15rem;
}

#cmep-house-by-state-card .prob-label {
  font-size: 0.75rem;
  font-weight: 600;
}

#cmep-house-by-state-card .prob-label-d {
  color: var(--solid-d);
}

#cmep-house-by-state-card .prob-label-r {
  color: var(--solid-r);
  margin-left: auto;
}

#cmep-house-by-state-card .prob-bar-wrapper {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
}

#cmep-house-by-state-card .prob-bar {
  position: relative;
  width: 100%;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

#cmep-house-by-state-card .prob-bar-d, #cmep-house-by-state-card .prob-bar-r {
  height: 100%;
  display: block;
}

#cmep-house-by-state-card .prob-bar-d {
  background: var(--solid-d);
  float: left;
}

#cmep-house-by-state-card .prob-bar-r {
  background: var(--solid-r);
  float: right;
}


/* Clickable district cards */
.district-link{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease;
  will-change: transform;
}

#cmep-house-by-state-card .district-link:hover {
  transform: translateY(-1px);
filter: brightness(1.02);
}

#cmep-house-by-state-card .district-link:focus {
  outline: 2px solid var(--flip-gold);
  outline-offset: 3px;
  border-radius: 18px;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .seat-road-labels {
    flex-direction: column;
    align-items: flex-start;
  }

#cmep-house-by-state-card .seat-label-t {
    text-align: left;
  }

#cmep-house-by-state-card thead th, #cmep-house-by-state-card td {
    padding: 8px;
    font-size: 0.8rem;
  }

#cmep-house-by-state-card .count {
    font-size: 0.8rem;
  }

#cmep-house-by-state-card .district-card {
    padding: 0.8rem 0.85rem;
  }

#cmep-house-by-state-card .prob-row {
    gap: 0.25rem;
  }
}

#cmep-house-by-state-card .district-link:active { transform: translateY(0px); }

@media (prefers-reduced-motion: reduce){
  .district-link{ transition: none !important; }

#cmep-house-by-state-card .district-link:hover { transform:none !important; }
}


/* Incumbent inline (name + party pill) */
.inc-inline{ display:inline-flex; align-items:center; gap:0.35rem; }

#cmep-house-by-state-card .inc-sep { color: var(--text-muted); padding: 0 0.15rem; }



/* Hide long intro copy when embedded in collapsible */

/* Remove any open-state shadow on state collapsibles */
#cmep-house-by-state-card details.cmep-state,
#cmep-house-by-state-card details.cmep-state[open]{
  box-shadow: none !important;
}