/* Phase 4 SEO/internal-link helpers. Keeps crawlable related links visible without changing forecast data wiring. */
.cmep-related-links-card,
.cmep-all-district-links-card{
  margin: 1.25rem auto 0;
  padding: 1.25rem;
  border: 1px solid var(--border-subtle, rgba(148,163,184,.32));
  border-radius: 24px;
  background: var(--card-bg, rgba(255,255,255,.92));
  box-shadow: var(--shadow-subtle, 0 14px 32px rgba(15,23,42,.08));
  text-align: center;
}
.cmep-related-links-card h2,
.cmep-all-district-links-card h2,
.cmep-all-district-links-card summary{
  margin: 0;
  color: var(--text-main, #0f172a);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
}
.cmep-related-links-card p,
.cmep-all-district-links-card p{
  max-width: 68ch;
  margin: .35rem auto 0;
  color: var(--text-muted, #64748b);
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
}
.cmep-related-links-list,
.cmep-state-link-list,
.cmep-district-link-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin-top: .85rem;
}
.cmep-related-links-list a,
.cmep-state-link-list a,
.cmep-district-link-list a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .42rem .72rem;
  border: 1px solid var(--border-subtle, rgba(148,163,184,.35));
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-bg, #fff) 82%, var(--bg-soft, #f8fafc));
  color: var(--text-main, #0f172a);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.cmep-related-links-list a:hover,
.cmep-state-link-list a:hover,
.cmep-district-link-list a:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle, 0 8px 18px rgba(15,23,42,.08));
}
.cmep-all-district-links-card details{ margin:0; }
.cmep-all-district-links-card summary{ cursor:pointer; list-style-position: inside; }
.cmep-state-link-group{
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border-subtle, rgba(148,163,184,.25));
  text-align: center;
}
.cmep-state-link-group h3{
  margin: 0;
  color: var(--text-main, #0f172a);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
}
@media (max-width: 720px){
  .cmep-related-links-card,
  .cmep-all-district-links-card{ border-radius: 20px; padding: 1rem; }
  .cmep-related-links-list,
  .cmep-state-link-list,
  .cmep-district-link-list{ gap: .45rem; }
}

/* Explicit dark-mode contract for pages that do not expose the same CSS variables. */
html[data-theme="dark"] .cmep-related-links-card,
html[data-theme="dark"] .cmep-all-district-links-card,
html.dark .cmep-related-links-card,
html.dark .cmep-all-district-links-card,
html.dark-mode .cmep-related-links-card,
html.dark-mode .cmep-all-district-links-card,
body[data-theme="dark"] .cmep-related-links-card,
body[data-theme="dark"] .cmep-all-district-links-card,
body.dark .cmep-related-links-card,
body.dark .cmep-all-district-links-card,
body.dark-mode .cmep-related-links-card,
body.dark-mode .cmep-all-district-links-card,
body.theme-dark .cmep-related-links-card,
body.theme-dark .cmep-all-district-links-card{
  background: var(--card-bg, rgba(15,23,42,.92));
  border-color: var(--border-subtle, rgba(148,163,184,.28));
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
}
html[data-theme="dark"] .cmep-related-links-card h2,
html[data-theme="dark"] .cmep-all-district-links-card h2,
html[data-theme="dark"] .cmep-all-district-links-card summary,
html[data-theme="dark"] .cmep-state-link-group h3,
html.dark .cmep-related-links-card h2,
html.dark .cmep-all-district-links-card h2,
html.dark .cmep-all-district-links-card summary,
html.dark .cmep-state-link-group h3,
html.dark-mode .cmep-related-links-card h2,
html.dark-mode .cmep-all-district-links-card h2,
html.dark-mode .cmep-all-district-links-card summary,
html.dark-mode .cmep-state-link-group h3,
body[data-theme="dark"] .cmep-related-links-card h2,
body[data-theme="dark"] .cmep-all-district-links-card h2,
body[data-theme="dark"] .cmep-all-district-links-card summary,
body[data-theme="dark"] .cmep-state-link-group h3,
body.dark .cmep-related-links-card h2,
body.dark .cmep-all-district-links-card h2,
body.dark .cmep-all-district-links-card summary,
body.dark .cmep-state-link-group h3,
body.dark-mode .cmep-related-links-card h2,
body.dark-mode .cmep-all-district-links-card h2,
body.dark-mode .cmep-all-district-links-card summary,
body.dark-mode .cmep-state-link-group h3,
body.theme-dark .cmep-related-links-card h2,
body.theme-dark .cmep-all-district-links-card h2,
body.theme-dark .cmep-all-district-links-card summary,
body.theme-dark .cmep-state-link-group h3{
  color: var(--text-main, #f8fafc);
}
html[data-theme="dark"] .cmep-related-links-card p,
html[data-theme="dark"] .cmep-all-district-links-card p,
html.dark .cmep-related-links-card p,
html.dark .cmep-all-district-links-card p,
html.dark-mode .cmep-related-links-card p,
html.dark-mode .cmep-all-district-links-card p,
body[data-theme="dark"] .cmep-related-links-card p,
body[data-theme="dark"] .cmep-all-district-links-card p,
body.dark .cmep-related-links-card p,
body.dark .cmep-all-district-links-card p,
body.dark-mode .cmep-related-links-card p,
body.dark-mode .cmep-all-district-links-card p,
body.theme-dark .cmep-related-links-card p,
body.theme-dark .cmep-all-district-links-card p{
  color: var(--text-muted, #cbd5e1);
}
html[data-theme="dark"] .cmep-related-links-list a,
html[data-theme="dark"] .cmep-state-link-list a,
html[data-theme="dark"] .cmep-district-link-list a,
html.dark .cmep-related-links-list a,
html.dark .cmep-state-link-list a,
html.dark .cmep-district-link-list a,
html.dark-mode .cmep-related-links-list a,
html.dark-mode .cmep-state-link-list a,
html.dark-mode .cmep-district-link-list a,
body[data-theme="dark"] .cmep-related-links-list a,
body[data-theme="dark"] .cmep-state-link-list a,
body[data-theme="dark"] .cmep-district-link-list a,
body.dark .cmep-related-links-list a,
body.dark .cmep-state-link-list a,
body.dark .cmep-district-link-list a,
body.dark-mode .cmep-related-links-list a,
body.dark-mode .cmep-state-link-list a,
body.dark-mode .cmep-district-link-list a,
body.theme-dark .cmep-related-links-list a,
body.theme-dark .cmep-state-link-list a,
body.theme-dark .cmep-district-link-list a{
  background: color-mix(in srgb, var(--card-bg, #0f172a) 72%, #1e293b);
  border-color: var(--border-subtle, rgba(148,163,184,.34));
  color: var(--text-main, #f8fafc);
}
html[data-theme="dark"] .cmep-related-links-list a:hover,
html[data-theme="dark"] .cmep-state-link-list a:hover,
html[data-theme="dark"] .cmep-district-link-list a:hover,
html.dark .cmep-related-links-list a:hover,
html.dark .cmep-state-link-list a:hover,
html.dark .cmep-district-link-list a:hover,
html.dark-mode .cmep-related-links-list a:hover,
html.dark-mode .cmep-state-link-list a:hover,
html.dark-mode .cmep-district-link-list a:hover,
body[data-theme="dark"] .cmep-related-links-list a:hover,
body[data-theme="dark"] .cmep-state-link-list a:hover,
body[data-theme="dark"] .cmep-district-link-list a:hover,
body.dark .cmep-related-links-list a:hover,
body.dark .cmep-state-link-list a:hover,
body.dark .cmep-district-link-list a:hover,
body.dark-mode .cmep-related-links-list a:hover,
body.dark-mode .cmep-state-link-list a:hover,
body.dark-mode .cmep-district-link-list a:hover,
body.theme-dark .cmep-related-links-list a:hover,
body.theme-dark .cmep-state-link-list a:hover,
body.theme-dark .cmep-district-link-list a:hover{
  background: color-mix(in srgb, var(--card-bg, #0f172a) 58%, #334155);
  border-color: rgba(203,213,225,.46);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}


/* Phase 4 v58: final related-link section sizing + dark-mode hardening.
   Native <details> accordions still expose their <a href> links in source HTML, so
   crawlability is preserved when large link hubs are collapsed. */
.cmep-related-links-card,
.cmep-all-district-links-card{
  box-sizing: border-box !important;
  width: min(100%, 1440px) !important;
  max-width: min(1440px, calc(100vw - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(1rem, 2vw, 1.5rem) !important;
  text-align: center !important;
}
.cmep-related-links-card > *,
.cmep-all-district-links-card > *{
  margin-left: auto !important;
  margin-right: auto !important;
}
.cmep-related-links-list,
.cmep-state-link-list,
.cmep-district-link-list{
  justify-content: center !important;
  text-align: center !important;
}
.cmep-related-links-list a,
.cmep-state-link-list a,
.cmep-district-link-list a{
  color: var(--text-strong, var(--text-main, #0f172a)) !important;
  background: color-mix(in srgb, var(--bg-card, #ffffff) 88%, var(--bg-page, #f8fafc)) !important;
  border-color: var(--border-subtle, rgba(148,163,184,.35)) !important;
}
.cmep-related-links-list a:visited,
.cmep-state-link-list a:visited,
.cmep-district-link-list a:visited{
  color: var(--text-strong, var(--text-main, #0f172a)) !important;
}
.cmep-all-district-links-card summary{
  display: block !important;
  text-align: center !important;
  color: var(--text-strong, var(--text-main, #0f172a)) !important;
}
.cmep-state-link-group{
  text-align: center !important;
}

html[data-theme="dark"] .cmep-related-links-card,
html[data-theme="dark"] .cmep-all-district-links-card,
html.dark .cmep-related-links-card,
html.dark .cmep-all-district-links-card,
html.dark-mode .cmep-related-links-card,
html.dark-mode .cmep-all-district-links-card,
body[data-theme="dark"] .cmep-related-links-card,
body[data-theme="dark"] .cmep-all-district-links-card,
body.dark .cmep-related-links-card,
body.dark .cmep-all-district-links-card,
body.dark-mode .cmep-related-links-card,
body.dark-mode .cmep-all-district-links-card,
body.theme-dark .cmep-related-links-card,
body.theme-dark .cmep-all-district-links-card{
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.92)) !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .cmep-related-links-card :where(h2,p,summary,h3),
html[data-theme="dark"] .cmep-all-district-links-card :where(h2,p,summary,h3),
html.dark .cmep-related-links-card :where(h2,p,summary,h3),
html.dark .cmep-all-district-links-card :where(h2,p,summary,h3),
html.dark-mode .cmep-related-links-card :where(h2,p,summary,h3),
html.dark-mode .cmep-all-district-links-card :where(h2,p,summary,h3),
body[data-theme="dark"] .cmep-related-links-card :where(h2,p,summary,h3),
body[data-theme="dark"] .cmep-all-district-links-card :where(h2,p,summary,h3),
body.dark .cmep-related-links-card :where(h2,p,summary,h3),
body.dark .cmep-all-district-links-card :where(h2,p,summary,h3),
body.dark-mode .cmep-related-links-card :where(h2,p,summary,h3),
body.dark-mode .cmep-all-district-links-card :where(h2,p,summary,h3),
body.theme-dark .cmep-related-links-card :where(h2,p,summary,h3),
body.theme-dark .cmep-all-district-links-card :where(h2,p,summary,h3){
  color: #e5e7eb !important;
}
html[data-theme="dark"] .cmep-related-links-card p,
html[data-theme="dark"] .cmep-all-district-links-card p,
html.dark .cmep-related-links-card p,
html.dark .cmep-all-district-links-card p,
html.dark-mode .cmep-related-links-card p,
html.dark-mode .cmep-all-district-links-card p,
body[data-theme="dark"] .cmep-related-links-card p,
body[data-theme="dark"] .cmep-all-district-links-card p,
body.dark .cmep-related-links-card p,
body.dark .cmep-all-district-links-card p,
body.dark-mode .cmep-related-links-card p,
body.dark-mode .cmep-all-district-links-card p,
body.theme-dark .cmep-related-links-card p,
body.theme-dark .cmep-all-district-links-card p{
  color: #cbd5e1 !important;
}
html[data-theme="dark"] :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a,
html.dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a,
html.dark-mode :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a,
body[data-theme="dark"] :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a,
body.dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a,
body.dark-mode :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a,
body.theme-dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a{
  background: rgba(30,41,59,.95) !important;
  border-color: rgba(148,163,184,.36) !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited,
html.dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited,
html.dark-mode :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited,
body[data-theme="dark"] :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited,
body.dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited,
body.dark-mode :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited,
body.theme-dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited{
  color: #f8fafc !important;
}
html[data-theme="dark"] :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:hover,
html.dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:hover,
html.dark-mode :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:hover,
body[data-theme="dark"] :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:hover,
body.dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:hover,
body.dark-mode :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:hover,
body.theme-dark :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:hover{
  background: rgba(51,65,85,.98) !important;
  border-color: rgba(226,232,240,.45) !important;
  color: #fff !important;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) .cmep-related-links-card,
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) .cmep-all-district-links-card{
    background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.92)) !important;
    border-color: rgba(148,163,184,.28) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.35) !important;
  }
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) .cmep-related-links-card :where(h2,p,summary,h3),
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) .cmep-all-district-links-card :where(h2,p,summary,h3){
    color: #e5e7eb !important;
  }
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) .cmep-related-links-card p,
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) .cmep-all-district-links-card p{
    color: #cbd5e1 !important;
  }
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a,
  html:not([data-theme="light"]):not(.light) body:not(.light):not(.light-mode) :where(.cmep-related-links-list,.cmep-state-link-list,.cmep-district-link-list) a:visited{
    background: rgba(30,41,59,.95) !important;
    border-color: rgba(148,163,184,.36) !important;
    color: #f8fafc !important;
  }
}


/* Phase 4 v59: accordion normalization and page-width alignment. */
.cmep-related-links-card,
.cmep-all-district-links-card{
  width: 100% !important;
  max-width: 1150px !important;
  margin: 1.25rem auto 0 !important;
}
body.cmep-home-page .cmep-related-links-card,
body.cmep-home-page .cmep-all-district-links-card,
body.cmep-page-election-night .cmep-related-links-card,
body.cmep-page-election-night .cmep-all-district-links-card{
  max-width: 1150px !important;
}
body.cmep-page-house-district-detail .cmep-related-links-card,
body.cmep-page-house-district-detail .cmep-all-district-links-card{
  max-width: min(1440px, calc(100vw - 48px)) !important;
}
.cmep-related-links-card details,
.cmep-all-district-links-card details{
  margin: 0 !important;
  width: 100% !important;
}
.cmep-related-links-card summary,
.cmep-all-district-links-card summary{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  cursor: pointer !important;
  list-style: none !important;
  color: var(--text-strong, var(--text-main, #0f172a)) !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
}
.cmep-related-links-card summary::-webkit-details-marker,
.cmep-all-district-links-card summary::-webkit-details-marker{
  display: none !important;
}
.cmep-related-links-card summary::before,
.cmep-all-district-links-card summary::before{
  content: "▸" !important;
  display: inline-block !important;
  transform: translateY(-.02em) rotate(0deg) !important;
  transition: transform .18s ease !important;
  color: currentColor !important;
  opacity: .92 !important;
}
.cmep-related-links-card details[open] > summary::before,
.cmep-all-district-links-card details[open] > summary::before{
  transform: translateY(-.02em) rotate(90deg) !important;
}
.cmep-related-links-card details > p,
.cmep-all-district-links-card details > p{
  margin-top: .45rem !important;
}
.cmep-related-links-card details > nav,
.cmep-all-district-links-card details > nav,
.cmep-related-links-card details > .cmep-state-link-group:first-of-type,
.cmep-all-district-links-card details > .cmep-state-link-group:first-of-type{
  margin-top: .9rem !important;
}
/* Keep source-visible links crawlable while making all related-link blocks visually compact by default. */
.cmep-related-links-card details:not([open]) > :not(summary),
.cmep-all-district-links-card details:not([open]) > :not(summary){
  display: none !important;
}

@media (max-width: 720px){
  .cmep-related-links-card,
  .cmep-all-district-links-card,
  body.cmep-page-house-district-detail .cmep-related-links-card,
  body.cmep-page-house-district-detail .cmep-all-district-links-card{
    max-width: calc(100vw - 24px) !important;
  }
}