:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --page-plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);

  --series-cleared: #2a78d6;
  --series-active: #eb6834;

  --seq-100: #cde2fb;
  --seq-200: #9ec5f4;
  --seq-350: #5598e7;
  --seq-450: #2a78d6;
  --seq-550: #1c5cab;
  --seq-700: #0d366b;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page-plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --border: rgba(255, 255, 255, 0.10);

    --series-cleared: #3987e5;
    --series-active: #d95926;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overscroll-behavior: none;
}

/* ---- App shell: map + sidebar on desktop, map + bottom sheet on mobile ---- */

.app {
  display: flex;
  flex-direction: row;
  /* Leave room for the shared site header. The 0px fallback keeps the app
     full-height if /header.js fails to load, rather than breaking. */
  height: calc(100vh - var(--site-header-h, 0px));
}

#map-pane {
  flex: 1;
  min-width: 0;
  position: relative;
}

#map {
  position: absolute;
  inset: 0;
}

.panel {
  flex: 0 0 380px;
  /* 100% of .app, which already subtracts the shared header. Using 100vh here
     overflows the app by the header's height and gives the document a second
     scrollbar. */
  height: 100%;
  overflow-y: auto;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.panel-handle-row {
  display: none;
}

.panel-scroll {
  padding: 16px 20px 28px;
}

.panel-header h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.panel-header .subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 10px;
}

.stat-tile {
  text-align: left;
}

.stat-tile .stat-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.stat-tile .stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

.filter-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.filter-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-right: 2px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.filter-chip .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.filter-chip[data-active="true"] {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.filter-chip[data-active="false"] {
  opacity: 0.5;
}

.date-filter {
  align-self: stretch;
}

.histogram {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 44px;
  margin-top: 6px;
}

.histogram-bar {
  flex: 1 1 0;
  min-width: 1px;
  background: var(--series-cleared);
  opacity: 0.85;
  border-radius: 2px 2px 0 0;
  transition: opacity 120ms ease;
}

.histogram-bar.out-of-range {
  opacity: 0.2;
}

.range-slider {
  position: relative;
  height: 20px;
  margin-top: 6px;
}

.range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--gridline);
  border-radius: 2px;
  pointer-events: none;
}

.range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--series-cleared);
  border-radius: 2px;
  pointer-events: none;
}

.range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.range-input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
  height: 20px;
}

.range-input::-moz-range-track {
  background: transparent;
  height: 20px;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 2px solid var(--series-cleared);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 2px solid var(--series-cleared);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.legend {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}

.legend h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}

.legend-row .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.legend-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.legend-note strong {
  color: var(--text-secondary);
}

.about {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.about h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.about h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 14px 0 4px;
}

.about p {
  margin: 0 0 8px;
}

.about a {
  color: var(--series-cleared);
}

.noscript-note {
  margin: 0;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ward-bin-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  font-size: 11px;
}

.ward-bin-row .swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex: none;
}

.legend hr {
  border: none;
  border-top: 1px solid var(--gridline);
  margin: 8px 0;
}

.leaflet-popup-content-wrapper {
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: 6px;
}

.leaflet-popup-tip {
  background: var(--surface-1);
}

.leaflet-popup-content {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  margin: 10px 12px;
}

.popup-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.popup-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 0;
}

.popup-row .k {
  color: var(--text-muted);
}

.popup-row .v {
  font-weight: 500;
  text-align: right;
}

.popup-description {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--gridline);
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
}

.load-error {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* ---- Mobile: full-screen map, bottom sheet for stats/filters ---- */

@media (max-width: 860px) {
  .app {
    display: block;
    height: calc(100vh - var(--site-header-h, 0px));
  }

  #map-pane {
    position: fixed;
    inset: var(--site-header-h, 0px) 0 0 0;
  }

  .panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    flex: none;
    height: auto;
    max-height: 42vh;
    overflow-y: auto;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
    transition: max-height 220ms ease;
  }

  /* Collapsed/expanded heights are set inline by JS from window.innerHeight, not from
     these vh rules -- on mobile browsers, CSS vh is pinned to the LARGEST viewport (as
     if the address bar were hidden), not the actually-visible one, so an "82vh" panel
     can visually overflow past the real viewport whenever the address bar is showing.
     window.innerHeight tracks the real, current viewport, so JS is the source of truth;
     these are just a pre-JS fallback to avoid a flash of the wrong size. */
  .panel[data-state="minimized"] {
    max-height: 56px;
  }

  .panel[data-state="expanded"] {
    max-height: 82vh;
  }

  .panel.dragging {
    transition: none;
  }

  .panel-handle-row {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    background: var(--surface-1);
  }

  .panel-drag-handle {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0 6px;
    background: none;
    border: none;
    cursor: grab;
    color: var(--text-secondary);
    font: inherit;
    touch-action: none;
    user-select: none;
  }

  .handle-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--gridline);
  }

  .handle-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }

  .panel[data-state="minimized"] .handle-label {
    display: none;
  }

  .panel[data-state="expanded"] .handle-label::after {
    content: " (tap to collapse)";
  }

  /* A dedicated, always-reliable escape hatch back to the map -- independent of the
     drag/tap handling on panel-drag-handle, so there's always a guaranteed way out. */
  .panel-hide-btn {
    flex: none;
    margin-right: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--page-plane);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
  }

  .panel[data-state="minimized"] .panel-hide-btn {
    display: none;
  }
}

/* ---- Mobile point markers + clusters (desktop keeps plain canvas circleMarkers) ---- */

.point-badge {
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.cluster-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  color: #ffffff;
  font-weight: 600;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}