/* Mid-decade redistricting map — page-specific styles.
   Page chrome (fonts, header/footer, theme toggle) comes from the site layout
   and css/site.css; this file only adds map colors and components. Base colors
   reuse the site's variables (--ink, --muted, --line, --bg) so the map follows
   the site's light/dark theme automatically. */

:root {
  --dem-fill:      rgba(115, 181, 234, 0.55);
  --dem-border:    rgb(115, 181, 234);
  --dem-text:      #4d94d4;
  --gop-fill:      rgba(238, 141, 140, 0.55);
  --gop-border:    rgb(238, 141, 140);
  --gop-text:      #e0595e;

  --state-base:    #f7f7f6;
  --state-border:  #c5c5c5;
  --us-outline:    #b5b5b5;
  --hatch-a:       #dddddd;
  --hatch-b:       #eeeeee;
  --connector:     #333333;
  --tile-range:    #111111;
}

:root[data-theme="dark"] {
  --dem-fill:      rgba(115, 181, 234, 0.38);
  --dem-border:    rgb(101, 165, 219);
  --dem-text:      #7db8e8;
  --gop-fill:      rgba(238, 141, 140, 0.38);
  --gop-border:    rgb(224, 122, 121);
  --gop-text:      #ef8a8e;

  --state-base:    #232326;
  --state-border:  #3d3d42;
  --us-outline:    #4a4a50;
  --hatch-a:       #3a3a3e;
  --hatch-b:       #2b2b2f;
  --connector:     #c7c7c7;
  --tile-range:    #f0f0f0;
}

/* Wider than the site's default 860px wrap — the map needs the room */
.map-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1rem;
}

.map-header .page-title { margin: 0 0 .35rem; }

.subtitle {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  color: var(--muted);
}

.updated {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.map-figure {
  margin: 18px 0 0;
  position: relative;
}

#map svg {
  display: block;
  width: 100%;
  height: auto;
}

.map-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- SVG map ---------- */

.state {
  fill: var(--state-base);
  stroke: none;
}
.state.st-dem { fill: var(--dem-fill); }
.state.st-gop { fill: var(--gop-fill); }
.state.st-blocked  { fill: url(#hatch-blocked); }
.state.st-proposed { fill: url(#hatch-proposed); }
.state.has-data { cursor: default; }

.hatch-a { fill: var(--hatch-a); }
.hatch-b { fill: var(--hatch-b); }

.borders {
  fill: none;
  stroke: var(--state-border);
  stroke-width: 0.7;
  pointer-events: none;
}

.us-outline {
  fill: none;
  stroke: var(--us-outline);
  stroke-width: 0.8;
  pointer-events: none;
}

/* Party-colored outline drawn on top of involved states */
.state-outline {
  fill: none;
  pointer-events: none;
  stroke-width: 1.4;
}
.state-outline.st-dem { stroke: var(--dem-border); }
.state-outline.st-gop { stroke: var(--gop-border); }
.state-outline.st-proposed { stroke-width: 2; }

/* ---------- Value tiles ---------- */

.tile { pointer-events: none; }

.tile text {
  font-family: var(--font);
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-linejoin: round;
}

.tile .tile-value {
  font-weight: 700;
  stroke-width: 4px;
}
.tile .tile-value.st-dem { fill: var(--dem-text); }
.tile .tile-value.st-gop { fill: var(--gop-text); }

.tile .tile-name {
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--muted);
  stroke-width: 2.5px;
}

.tile .tile-range {
  font-weight: 700;
  fill: var(--tile-range);
  stroke-width: 3px;
}

.tile.excluded { opacity: 0.8; }
.tile .strike {
  stroke: var(--tile-range);
  stroke-width: 1.4;
}

.connector {
  fill: none;
  stroke: var(--connector);
  stroke-width: 1.6;
}
.arrowhead-path { fill: var(--connector); }

/* ---------- Legend & annotation (SVG) ---------- */

.legend text { font-family: var(--font); }
.legend .legend-label { font-size: 21px; font-weight: 700; fill: var(--ink); }
.legend .legend-value { font-size: 21px; font-weight: 700; }
.legend .legend-value.st-dem { fill: var(--dem-text); }
.legend .legend-value.st-gop { fill: var(--gop-text); }
.legend .legend-rule { stroke: var(--line); stroke-width: 1; }

.annotation text {
  font-family: var(--font);
  font-size: 14.5px;
  fill: var(--ink);
}
.annotation .em { font-style: italic; }

/* ---------- Tooltip ---------- */

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 240px;
  z-index: 5;
}
.tooltip .tt-name { font-weight: 700; }
.tooltip .tt-status { color: var(--muted); }
.tooltip .tt-exp { font-weight: 600; }
.tooltip .tt-exp.st-dem { color: var(--dem-text); }
.tooltip .tt-exp.st-gop { color: var(--gop-text); }

@media (max-width: 640px) {
  .map-wrap { padding: 1.5rem 0.75rem 1rem; }
}