:root {
  --bg: #fafafa;
  --ink: #1a1a1a;
  --muted: #5a5a5a;
  --line: #e1e1e1;
  --accent: #225ea8;
  --bad: #d7301f;

  --s0: #d7301f;
  --s1: #ef6548;
  --s2: #fc8d59;
  --s3: #fdbb84;
  --s4: #fdd49e;
  --s5: #c7e9b4;
  --s6: #41b6c4;
  --s7: #225ea8;
}

* { box-sizing: border-box }
html, body { margin: 0; height: 100%; font: 14px/1.45 -apple-system, BlinkMacSystemFont,
  "Segoe UI", Inter, Roboto, system-ui, sans-serif; color: var(--ink); }
#map { position: absolute; inset: 0; }

aside#panel {
  position: absolute; top: 16px; right: 16px;
  width: 320px; max-height: calc(100vh - 32px);
  background: rgba(255,255,255, 0.97);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px 12px;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
  z-index: 5;
}
@media (max-width: 720px) {
  aside#panel { width: calc(100% - 32px); top: auto; bottom: 16px; max-height: 60vh; }
}
aside#panel h1 { font-size: 16px; margin: 0 0 4px; letter-spacing: -0.01em; }
aside#panel .sub { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
aside#panel .sub a { color: var(--accent); }
aside#panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 14px 0 6px; font-weight: 600; }
aside#panel .block { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
aside#panel .block:first-of-type { border-top: 0; padding-top: 0; }

aside#panel label { display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 3px 0; cursor: pointer; }
aside#panel input[type=radio], aside#panel input[type=checkbox] { margin: 0; }

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block;
       border: 1px solid rgba(0,0,0,0.18); flex: 0 0 auto; }
.s-school { background: #e41a1c; }
.s-kg     { background: #ff7f00; }
.s-pharm  { background: #984ea3; }
.s-groc   { background: #4daf4a; }
.s-health { background: #377eb8; }
.s-pt     { background: #ffd92f; }
.s-green  { background: #5d9a4f; }

#legend .row { display: flex; align-items: center; gap: 7px; padding: 2px 0;
               font-size: 12px; color: var(--ink); }
#legend .row .swatch {
  width: 18px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.12);
  flex: 0 0 auto;
}

.modal { position: absolute; inset: 0; background: rgba(20,20,20,0.45);
         z-index: 20; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal .card { background: white; padding: 24px 28px; border-radius: 8px;
               max-width: 540px; max-height: 80vh; overflow-y: auto;
               box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.modal h2 { margin: 0 0 8px; }
.modal h3 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase;
            letter-spacing: 0.05em; color: var(--muted); }
.modal p { margin: 0 0 8px; }
.modal button { background: var(--accent); color: white; border: 0;
                padding: 8px 16px; border-radius: 4px; cursor: pointer;
                font: inherit; margin-top: 12px; }

.maplibregl-popup-content {
  font: 13px -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  border-radius: 6px; padding: 10px 14px;
}
.maplibregl-popup-content .pop-h { font-weight: 600; margin-bottom: 4px; }
.maplibregl-popup-content .pop-score {
  display: inline-block; padding: 2px 8px; border-radius: 12px; color: white;
  font-weight: 600; margin-bottom: 6px;
}
.maplibregl-popup-content ul { padding: 0; margin: 6px 0 0; list-style: none; }
.maplibregl-popup-content li { padding: 1px 0; font-size: 12px; }
.maplibregl-popup-content li.yes::before { content: "✓ "; color: #1a8a4f; }
.maplibregl-popup-content li.no::before { content: "✗ "; color: var(--bad); }