/* 2026-07-08 v49: Shared state/detail forecast-card contract.
   Loaded by state/_detail and house/district/_detail so the left-side forecast card,
   incumbent section, nominee section, election-information stack, and universal pills
   are governed by one CSS contract instead of separate page-specific approximations. */

body:is(.cmep-page-state-detail,.cmep-page-house-district-detail){
  --state-detail-section-gap:clamp(1rem,1.55vw,1.25rem);
  --home-pill-h:1.72rem;
  --home-pill-h-lg:1.84rem;
  --home-pill-px:.68rem;
  --home-pill-px-lg:.72rem;
  --home-pill-fs:.72rem;
  --home-pill-lh:1;
  --home-pill-weight:850;
}

body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #houseDistrictForecastCard.card.cm-card{
  background:var(--bg-card) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:var(--radius-card) !important;
  padding:1.2rem 1.4rem !important;
  box-shadow:var(--shadow-soft) !important;
}

body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #houseDistrictForecastCard .card-title-row{
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:.75rem !important;
  flex-wrap:wrap !important;
  margin:0 0 .75rem !important;
  text-align:center !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #houseDistrictForecastCard .card-h2{
  margin:0 !important;
  font-size:1.25rem !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  line-height:1.2 !important;
  color:var(--text-strong) !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #houseDistrictForecastCard .badge{
  font-size:.8rem !important;
  color:var(--text-muted) !important;
}

body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-info-section{
  margin:clamp(.9rem,1.6vw,1.25rem) 0 0 !important;
  padding:clamp(.9rem,1.6vw,1.1rem) !important;
  border:1px solid var(--border, rgba(148,163,184,.22)) !important;
  border-radius:22px !important;
  background:color-mix(in srgb, var(--card-bg, #fff) 88%, transparent) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-incumbent-section{
  padding-bottom:clamp(.75rem,1.3vw,1rem) !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-section{
  padding-top:clamp(1rem,1.8vw,1.25rem) !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-section-heading{
  display:flex !important;
  align-items:center !important;
  gap:.75rem !important;
  margin:0 0 .85rem !important;
  color:var(--text-muted, #64748b) !important;
  font-size:.78rem !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  text-align:left !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-section-heading::after{
  content:"" !important;
  height:1px !important;
  flex:1 1 auto !important;
  background:var(--border, rgba(148,163,184,.22)) !important;
  opacity:.85 !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-subheading{
  margin:0 0 .72rem !important;
  color:var(--text, #0f172a) !important;
  font-size:clamp(1rem,1.4vw,1.15rem) !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--state-detail-section-gap) !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-unit{
  margin:0 !important;
  min-width:0 !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-unit > :first-child{margin-top:0 !important;}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-unit > :last-child{margin-bottom:0 !important;}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-section .race,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-section .chart-wrap,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-section .model-drivers,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-section .cand-wrap,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-election-section .state-detail-candidate-wrap{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Same person/candidate contract as state/detail. */
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-row,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-row,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-row{
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:.75rem !important;
  row-gap:.42rem !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-row > .person-photo,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-row > .person-photo,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-row > .person-photo{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:64px !important;
  height:64px !important;
  border-radius:18px !important;
  object-fit:cover !important;
  background:var(--bg-soft, rgba(148,163,184,.14)) !important;
  border:1px solid var(--border-subtle, rgba(148,163,184,.24)) !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-row > .person-meta,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-row > .person-meta,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-row > .person-meta{
  display:contents !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-name,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-name,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-name{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:.45rem !important;
  flex-wrap:wrap !important;
  margin:0 !important;
  color:var(--text-strong, #0f172a) !important;
  font-size:1rem !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:-.018em !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-sub,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-sub,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-sub{
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
  margin:0 !important;
  color:var(--text-muted, #64748b) !important;
  font-size:.86rem !important;
  line-height:1.25 !important;
  font-weight:650 !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-cred,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-cred,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-cred{
  grid-column:1 / -1 !important;
  grid-row:auto !important;
  margin-top:.18rem !important;
  padding-top:.38rem !important;
  border-top:1px solid var(--border-subtle, rgba(148,163,184,.24)) !important;
  color:var(--text-muted, #64748b) !important;
  font-size:.74rem !important;
  line-height:1.25 !important;
  font-weight:650 !important;
  overflow-wrap:anywhere !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-row:not(:has(.person-sub)) > .person-photo,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-row:not(:has(.person-sub)) > .person-photo,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-row:not(:has(.person-sub)) > .person-photo{
  grid-row:1 !important;
}

body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .cand-grid{
  display:flex !important;
  gap:.9rem !important;
  align-items:stretch !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .cand-tile,
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .cand-tile:is(:hover,:focus,:focus-within){
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) :where(
  .pill,
  .legend-pill,
  .legend .legend-item,
  .rating-pill,
  .race-rating-pill,
  .party-pill,
  .badge,
  .tag,
  .chip,
  .ct-chip,
  .cl-pill,
  .driver-pill,
  .notup-badge
){
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:var(--home-pill-h) !important;
  padding:.39rem var(--home-pill-px) !important;
  border-radius:999px !important;
  font-size:var(--home-pill-fs) !important;
  line-height:var(--home-pill-lh) !important;
  font-weight:var(--home-pill-weight) !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) :where(.rating-row,.district-top-pills,.model-drivers-pills,.leg-legend,.cl-pills){
  gap:.38rem !important;
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-info-section{
    background:rgba(15,23,42,.62) !important;
    border-color:rgba(148,163,184,.22) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.22) !important;
  }
}
html[data-theme="dark"] body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-info-section{
  background:rgba(15,23,42,.62) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.22) !important;
}
@media (max-width:720px){
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail){
    --state-detail-section-gap:.95rem;
    --home-pill-h:1.64rem;
    --home-pill-h-lg:1.76rem;
    --home-pill-px:.58rem;
    --home-pill-px-lg:.62rem;
    --home-pill-fs:.68rem;
  }
}
@media (max-width:520px){
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .cand-grid{
    flex-direction:column !important;
  }
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-row,
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-row,
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-row{
    grid-template-columns:56px minmax(0,1fr) !important;
    column-gap:.65rem !important;
  }
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .state-detail-candidate-wrap .person-row > .person-photo,
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) .cand-wrap .person-row > .person-photo,
  body:is(.cmep-page-state-detail,.cmep-page-house-district-detail) #incumbentMount .person-row > .person-photo{
    width:56px !important;
    height:56px !important;
    border-radius:16px !important;
  }
}