:root {
  color-scheme: light;
  --navy: #00205c;
  --ink: #172033;
  --paper: rgba(255,255,255,.96);
  --border: rgba(23,32,51,.14);
  --clinical: #7f3fbf;
  --community: #00205c;
  --district: #2c7c89;
  --precinct: #c54f13;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: #eef2f6; }

.map-shell { position: relative; width: 100%; height: 100%; overflow: hidden; }
#map { position: absolute; inset: 0; }

.map-title,
.map-layers,
.map-key {
  position: absolute;
  left: 20px;
  z-index: 3;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(20,30,55,.12);
  backdrop-filter: blur(10px);
}

.map-title {
  top: 20px;
  width: min(360px, calc(100vw - 40px));
  padding: 18px 20px 17px;
  border-radius: 14px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(28px, 4vw, 40px);
  line-height: .98;
  letter-spacing: -.025em;
}

.subtitle {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: #4b566d;
}

.map-layers {
  top: 151px;
  width: min(240px, calc(100vw - 40px));
  padding: 11px 13px 12px;
  border-radius: 11px;
}

.control-title {
  margin: 0 0 8px;
  color: #687185;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.layer-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 26px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.layer-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  width: 34px;
  height: 19px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #c8ced8;
  transition: background .16s ease;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .16s ease;
}

.layer-toggle input:checked + .toggle-track { background: var(--precinct); }
.layer-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(15px); }
.layer-toggle input:focus-visible + .toggle-track { outline: 2px solid var(--navy); outline-offset: 2px; }
.layer-toggle:has(input:disabled) { opacity: .55; cursor: wait; }

.map-key {
  bottom: 20px;
  padding: 11px 13px;
  border-radius: 10px;
  display: grid;
  gap: 7px;
  font-size: 12px;
  line-height: 1.2;
}

.key-row { display: flex; align-items: center; gap: 8px; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.95); }
.key-dot-clinical { background: var(--clinical); }
.key-dot-community { background: var(--community); }
.key-area { width: 12px; height: 10px; border: 2px solid; border-radius: 2px; }
.key-area-district { background: rgba(44,124,137,.22); border-color: #005c6a; }
.key-line { width: 14px; height: 0; border-top: 2px solid; }
.key-line-precinct { border-color: var(--precinct); }

.mapboxgl-popup-content {
  padding: 11px 13px;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(20,30,55,.16);
  font-family: Arial, Helvetica, sans-serif;
}

.popup-name { margin: 0; color: var(--navy); font-size: 14px; line-height: 1.2; font-weight: 700; }
.popup-role { margin: 4px 0 0; color: #596277; font-size: 12px; line-height: 1.3; }

.mapboxgl-ctrl-top-right { top: 10px; right: 10px; }
.mapboxgl-ctrl-group { border-radius: 9px; overflow: hidden; }

.map-data-error .map-layers::after {
  content: 'Map data failed to load.';
  display: block;
  margin-top: 8px;
  color: #9a321b;
  font-size: 11px;
}

@media (max-width: 640px) {
  .map-title { top: 12px; left: 12px; width: calc(100vw - 24px); padding: 15px 16px 14px; }
  .map-layers { top: 135px; left: 12px; width: 205px; }
  .map-key { left: 12px; bottom: 12px; }
  .mapboxgl-ctrl-top-right { top: auto; bottom: 12px; right: 12px; }
}