:root {
  --green: #2e9d4f;
  --yellow: #e0a800;
  --red: #d33a2c;
  --none: #8a8f98;
  --ink: #1d2330;
  --muted: #5d6573;
  --line: #dde1e7;
  --bg: #ffffff;
  --panel-width: 380px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--bg); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- top bar ---------------------------------------------------------- */

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--line); z-index: 1000;
}
.topbar h1 { font-size: 1.1rem; margin: 0; white-space: nowrap; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bands { display: flex; gap: 0.25rem; border: 0; margin: 0; padding: 0; }
.band-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 0.85rem;
  border: 2px solid currentColor; user-select: none;
}
.band-toggle input { margin: 0; accent-color: currentColor; }
.band-toggle.green { color: var(--green); }
.band-toggle.yellow { color: #a37a00; }
.band-toggle.red { color: var(--red); }
.band-toggle.none { color: var(--none); }
.zip input { width: 5.5rem; padding: 0.3rem 0.5rem; font: inherit; border: 1px solid var(--line); border-radius: 6px; }
.zip input:invalid { border-color: var(--red); }
#show-decliners {
  font: inherit; padding: 0.3rem 0.8rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
}
.count { margin: 0 0 0 auto; color: var(--muted); font-size: 0.85rem; }

/* --- map + panel ------------------------------------------------------- */

.layout { flex: 1; display: flex; min-height: 0; position: relative; }
.map { flex: 1; min-height: 0; }

.panel {
  width: var(--panel-width); overflow-y: auto; padding: 1rem 1.25rem 2rem;
  border-left: 1px solid var(--line); background: var(--bg); position: relative;
}
.panel[hidden] { display: none; }
.panel-close {
  position: absolute; top: 0.4rem; right: 0.6rem; font-size: 1.5rem; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--muted);
}
.panel h2 { font-size: 1.15rem; margin: 0 1.5rem 0.25rem 0; }
.panel .address { color: var(--muted); margin: 0 0 0.75rem; font-size: 0.9rem; }
.panel h3 { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
.panel .note { color: var(--muted); font-size: 0.85rem; }

.headline { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.score-badge {
  font-size: 1.8rem; font-weight: 700; color: #fff; border-radius: 8px;
  padding: 0.1rem 0.55rem; min-width: 3.2rem; text-align: center;
}
.score-badge.green { background: var(--green); }
.score-badge.yellow { background: var(--yellow); }
.score-badge.red { background: var(--red); }
.score-badge.none { background: var(--none); font-size: 1rem; padding: 0.45rem 0.6rem; }
.delta.down { color: var(--red); font-weight: 600; }
.delta.up { color: var(--green); font-weight: 600; }
.trend { color: var(--muted); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin: 0.75rem 0 0; font-size: 0.9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.chart { width: 100%; height: auto; display: block; }
.chart .zone.green { fill: var(--green); opacity: 0.08; }
.chart .zone.yellow { fill: var(--yellow); opacity: 0.1; }
.chart .zone.red { fill: var(--red); opacity: 0.08; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 10px; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chart .pt { stroke: #fff; stroke-width: 1.5; }
.chart .pt.green { fill: var(--green); }
.chart .pt.yellow { fill: var(--yellow); }
.chart .pt.red { fill: var(--red); }

.history { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.history th, .history td { text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); }
.history td.score { font-weight: 600; }

.decliners { list-style: none; padding: 0; margin: 0; }
.decliners li { border-bottom: 1px solid var(--line); }
.decliners button {
  display: block; width: 100%; text-align: left; font: inherit; background: none;
  border: 0; padding: 0.55rem 0.25rem; cursor: pointer;
}
.decliners button:hover, .decliners button:focus-visible { background: #f4f6f9; }
.decliners .name { font-weight: 600; }
.decliners .meta { color: var(--muted); font-size: 0.85rem; }

/* --- markers ----------------------------------------------------------- */

.marker {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.marker.green { background: var(--green); }
.marker.yellow { background: var(--yellow); }
.marker.red { background: var(--red); }
.marker.none { background: var(--none); }

.cluster { background: none; border: 0; }
.cluster svg { display: block; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45)); }
.cluster .seg { fill: none; stroke-width: 9; }
.cluster .seg.green { stroke: var(--green); }
.cluster .seg.yellow { stroke: var(--yellow); }
.cluster .seg.red { stroke: var(--red); }
.cluster .seg.none { stroke: var(--none); }
.cluster .hole { fill: #fff; }
.cluster text { font-size: 12px; font-weight: 700; fill: var(--ink); }

.leaflet-interactive.highlight, .highlight { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 4 3; }

/* --- footer ------------------------------------------------------------ */

.footer {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 0.4rem 1rem;
  border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted);
}
.footer a { color: inherit; }
.legend { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 0.4rem; }
.dot.green { background: var(--green); }
.dot.yellow { background: var(--yellow); }
.dot.red { background: var(--red); }
.dot.none { background: var(--none); }

/* --- phones: the panel becomes a bottom sheet --------------------------- */

@media (max-width: 720px) {
  .count { margin-left: 0; }
  .panel {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 60%;
    border-left: 0; border-top: 1px solid var(--line); z-index: 1000;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15); border-radius: 12px 12px 0 0;
  }
}