/* National map site styles.
 *
 * Race cards themselves are styled by returns.css, which this page loads
 * unchanged: a card in the panel must look exactly like the same card on a
 * state page. This file covers only what the state pages don't have — the
 * map, the legend, the state chips, and the panel chrome.
 */

.national {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 3.5rem;
  font-family: var(--brand-body-font, system-ui, sans-serif);
  color: var(--brand-ink, #1a1a1a);
}

.national-head h1 {
  font-family: var(--brand-display-font, var(--brand-body-font, system-ui, sans-serif));
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .5rem;
}

.national-sub { max-width: 54rem; line-height: 1.6; margin: 0 0 .4rem; }

/* The description and updated stamp sit beneath the map, after the chips. */
.national-after { margin-top: 1.1rem; }

/* ---- Partner content slot (partners/<slug>/content.html) ----------------- */
/* Same rules the shell page styles it with, so the voter topper reads the
 * way it always has. */
.shell-content { max-width: 760px; font-size: 1.125rem; line-height: 1.6; margin: 1.5rem 0 1.75rem; }
.shell-content a { color: var(--brand-primary, #00f); text-decoration: underline; }
.shell-content li { margin-bottom: .75rem; }

/* ---- Legend ------------------------------------------------------------- */

.national-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: .85rem;
  color: var(--brand-muted, #555);
}
.national-legend li { display: flex; align-items: center; gap: .4rem; }
.legend-swatch {
  width: .9rem;
  height: .9rem;
  border-radius: .2rem;
  border: 1px solid rgba(0, 0, 0, .18);
  flex: none;
}
.legend-swatch[data-legend="idle"]        { background: #d0d0d0; }
.legend-swatch[data-legend="partial-dem"] { background: #a7c0e2; }
.legend-swatch[data-legend="partial-rep"] { background: #e8aaa7; }
.legend-swatch[data-legend="called-dem"]  { background: var(--party-dem, #1f5fa9); }
.legend-swatch[data-legend="called-rep"]  { background: var(--party-rep, #c4302b); }

/* ---- Map ---------------------------------------------------------------- */

.us-map { max-width: 62rem; margin: 0 auto; }
.us-map svg { width: 100%; height: auto; display: block; }

/* States are plain grey paths from the source SVG; status and leader party
 * arrive as data attributes from summary.json. Idle stays the map's own
 * grey: a state with no data and a state awaiting votes must not pretend to
 * differ on the map — the list and the panel say which is which. */
.us-map path[data-status="idle"],
.us-map path[data-status="pre"] { fill: #d0d0d0; }

.us-map path[data-status="partial"] { fill: #cfd6dd; }
.us-map path[data-status="partial"][data-party="dem"] { fill: #a7c0e2; }
.us-map path[data-status="partial"][data-party="rep"] { fill: #e8aaa7; }

.us-map path[data-status="called"] { fill: var(--party-other, #6b7280); }
.us-map path[data-status="called"][data-party="dem"]   { fill: var(--party-dem, #1f5fa9); }
.us-map path[data-status="called"][data-party="rep"]   { fill: var(--party-rep, #c4302b); }
.us-map path[data-status="called"][data-party="lib"]   { fill: var(--party-lib, #c8a800); }
.us-map path[data-status="called"][data-party="green"] { fill: var(--party-green, #2e7d32); }
.us-map path[data-status="called"][data-party="ind"]   { fill: var(--party-ind, #6a5acd); }

.us-map path[data-status] {
  cursor: pointer;
  transition: fill .2s ease;
}
.us-map path[data-status]:hover {
  stroke: var(--brand-ink, #1a1a1a);
  stroke-width: 1.2px;
}
.us-map path[data-status]:focus-visible {
  outline: 3px solid var(--brand-primary, #002f88);
  outline-offset: 1px;
}
.us-map path.is-selected {
  stroke: var(--brand-primary, #002f88);
  stroke-width: 2px;
}

/* ---- State chips --------------------------------------------------------- */

.state-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-width: 62rem;
  margin: 1.2rem auto 0;
  justify-content: center;
}

/* Chips are <button>s, and the partner stylesheet ships its own button
 * styling (the red pill on their DONATE button) that otherwise wins: light
 * grey fill with white text and red borders. These rules are id-scoped and
 * !important for that reason — the chips must read as ours: dark text on
 * light fills, the partner's blue for selection. */

#state-list .state-chip {
  font: inherit !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  padding: .42rem .55rem !important;
  min-width: 2.6rem !important;
  border: 1px solid var(--brand-rule, #ccc) !important;
  border-radius: .3rem !important;
  background: #fff !important;
  color: var(--brand-ink, #1a1a1a) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
#state-list .state-chip:hover {
  background: #f2f4f7 !important;
  border-color: var(--brand-primary, #333) !important;
}
#state-list .state-chip:focus-visible {
  outline: 3px solid var(--brand-primary, #002f88) !important;
  outline-offset: 1px !important;
}

/* Status fills echo the map. Light fills keep dark ink text; only the full
 * party colors flip to white, where contrast holds. */
#state-list .state-chip[data-status="idle"],
#state-list .state-chip[data-status="pre"] { background: #eef0f2 !important; }
#state-list .state-chip[data-status="partial"] { background: #dfe5ea !important; }
#state-list .state-chip[data-status="partial"][data-party="dem"] { background: #a7c0e2 !important; }
#state-list .state-chip[data-status="partial"][data-party="rep"] { background: #e8aaa7 !important; }
#state-list .state-chip[data-status="called"][data-party="dem"] { background: var(--party-dem, #1f5fa9) !important; color: #fff !important; }
#state-list .state-chip[data-status="called"][data-party="rep"] { background: var(--party-rep, #c4302b) !important; color: #fff !important; }
#state-list .state-chip[data-status="called"][data-party="lib"] { background: var(--party-lib, #c8a800) !important; }
#state-list .state-chip[data-status="called"][data-party="green"] { background: var(--party-green, #2e7d32) !important; color: #fff !important; }
#state-list .state-chip[data-status="called"][data-party="ind"] { background: var(--party-ind, #6a5acd) !important; color: #fff !important; }

/* Selection is the partner's blue, not red: it must read as "you are here",
 * not as a result. Declared last so it wins over the status fills above at
 * equal specificity. */
#state-list .state-chip[aria-pressed="true"] {
  background: var(--brand-primary, #002f88) !important;
  border-color: var(--brand-primary, #002f88) !important;
  color: #fff !important;
  outline: 2px solid var(--brand-primary, #002f88) !important;
  outline-offset: 1px !important;
}

/* ---- Results panel -------------------------------------------------------- */
/* .national-panel also carries .returns, so the card grid, candidate rows,
 * status pills and attribution inside it are styled by returns.css exactly
 * as on a state page. */

.national-panel {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--brand-rule, #ddd);
  scroll-margin-top: 1.5rem;
}

.national-panel .returns-head h2 {
  font-family: var(--brand-display-font, var(--brand-body-font, sans-serif));
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 .4rem;
}

.national-prompt {
  color: var(--brand-muted, #555);
  font-size: 1.05rem;
  margin: 0;
}

.national-site-link { margin: 1.4rem 0 0; font-weight: 600; }
.national-site-link a { color: var(--brand-primary, inherit); }

/* ---- No-JS fallback -------------------------------------------------------- */

.national-noscript-note { font-size: .9rem; color: var(--brand-muted, #555); margin: 1.2rem 0 .4rem; }
.national-noscript-list { margin: 0; padding-left: 1.2rem; columns: 3; column-gap: 2rem; font-size: .9rem; }
.national-noscript-list a { color: inherit; }
@media (max-width: 40rem) { .national-noscript-list { columns: 2; } }
@media (max-width: 24rem) { .national-noscript-list { columns: 1; } }