/* ==========================================================================
   Sign-coverage explorer — dark-theme stylesheet (Phase 42, Plan 42-03)
   Design tokens, reset/base, and typography roles live in ../common.css
   (shared with docs/demo/styles.css, D-15) so the explorer reads with the
   same polish as the Phase 41 demo — WITHOUT restating the demo's marketing
   layout. docs/demo/ is a separate site and is NOT modified (R6). This
   :root only adds the tier/marker tokens common.css doesn't define; the
   explorer-specific rules (legend, filters, tier colors, canvas markers,
   states) are added below.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Confidence-tier color scale (red -> green, D-09). Reuses the existing
     semantic tokens where they already map to a tier, and mints only the two
     values the demo palette lacks (a mid teal-green and a red), so the tier
     scale stays consistent with the rest of the project rather than a fresh
     palette. This is the HUE channel; the text label (legend + popup) and the
     per-tier marker radius below are the second/third channels for colorblind
     users (Prohibition 3 / T-42-05).
       high       -> --positive  (green,  exact block match)
       medium     -> teal-green  (approximate match)
       low        -> --warning   (amber,  fuzzy/fallback match)
       unresolved -> red         (no SODA record — the gaps we're hunting)
     ---------------------------------------------------------------------- */
  --tier-high: var(--positive);   /* #35d67f */
  --tier-medium: #2dd4bf;         /* mid teal-green between green and amber */
  --tier-low: var(--warning);     /* #f5a623 */
  --tier-unresolved: #e5484d;     /* red — highest-visibility gap marker */

  /* ------------------------------------------------------------------------
     Per-tier MARKER RADIUS convention (third, non-hue channel — for 42-04's
     canvas circleMarkers to honor). Unresolved is LARGEST so data gaps pop even
     at citywide zoom and are distinguishable by size regardless of color
     vision; high-confidence (the well-covered common case) is SMALLEST so it
     recedes. Ordering: unresolved > low > medium > high.
       --marker-r-unresolved: 5px
       --marker-r-low:        4px
       --marker-r-medium:     3px
       --marker-r-high:       2px
     (Exposed as variables so 42-04 can read them from getComputedStyle if it
     prefers CSS as the single source of truth.)
     ---------------------------------------------------------------------- */
  --marker-r-unresolved: 5px;
  --marker-r-low: 4px;
  --marker-r-medium: 3px;
  --marker-r-high: 2px;
}

a { color: var(--accent); }             /* Accent reserved use #6 — text links */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
#map:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* .hero / .hero-subhead live in ../common.css (shared with demo). */
.hero-freshness {
  margin: var(--sp-md) 0 0;
}

/* .layout / .panel / #map (base rule) live in ../common.css (shared with
   docs/demo/styles.css). This file overrides #map's min-height at wider
   breakpoints below. */

/* ==========================================================================
   Map region
   ========================================================================== */
.map-region { display: flex; flex-direction: column; gap: var(--sp-md); }

/* Canvas circleMarker fill/stroke colors keyed to the tier scale. 42-04 sets
   the fillColor per marker; these classes document the intended mapping and can
   be reused if it renders any DOM swatch/marker. Each tier's on-map size is the
   third channel (radius convention above). */
.marker--high       { color: var(--tier-high); }
.marker--medium     { color: var(--tier-medium); }
.marker--low        { color: var(--tier-low); }
.marker--unresolved { color: var(--tier-unresolved); }

/* ==========================================================================
   Marker popups — buildPopup() (42-04) builds this DOM tree via textContent
   only; Leaflet wraps it in .leaflet-popup-content(-wrapper). The wrapper is
   re-themed here too (Leaflet's default is a light popup, which would clash
   with the dark palette and fail contrast against --fg-colored text).
   ========================================================================== */
.leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-popup-content { margin: var(--sp-sm) var(--sp-md); }

.marker-popup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  max-width: 260px;
}
.popup-street { margin: 0; font-size: 16px; font-weight: 600; }
.popup-cross { margin: 0; color: var(--muted); }
.popup-attrs { width: 100%; border-collapse: collapse; margin: var(--sp-xs) 0; }
.popup-attrs td { text-align: left; padding: var(--sp-xs) 0; vertical-align: top; }
.popup-attrs td:first-child {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  padding-right: var(--sp-md);
  white-space: nowrap;
}
.popup-attrs td:last-child {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
}
.popup-status { margin: 0; color: var(--warning); }
.popup-links { display: flex; gap: var(--sp-md); margin: var(--sp-xs) 0 0; }

/* ==========================================================================
   Legend — ALWAYS visible (D-16). Each row pairs a color swatch (hue) with a
   text label (the non-hue channel required by Prohibition 3 / T-42-05).
   ========================================================================== */
#legend,
.legend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-lg);
}
.legend-title {
  margin: 0 0 var(--sp-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}
.legend-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.legend-swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.legend-swatch--high       { background: var(--tier-high); }
.legend-swatch--medium     { background: var(--tier-medium); }
.legend-swatch--low        { background: var(--tier-low); }
.legend-swatch--unresolved { background: var(--tier-unresolved); }
.legend-label {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.4;
}

/* .card lives in ../common.css (shared with docs/demo/styles.css). */

/* ==========================================================================
   Filter panel — label + control rows, 44px touch targets (like the demo's
   .mode-option). Four independent AND-composed controls (R4).
   ========================================================================== */
#filters,
.filters { display: flex; flex-direction: column; gap: var(--sp-md); }
.filter-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.filter-row .label { color: var(--muted); }
.filter-control {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  min-height: 44px;               /* touch target — parity with demo .mode-option */
  font: inherit;
  font-size: 14px;
  width: 100%;
}
.filter-control:hover { border-color: var(--accent); }
/* search input clear affordance stays legible on dark */
input.filter-control::placeholder { color: var(--muted); }
.filter-hint { display: block; margin-top: var(--sp-xs); }

.filter-actions {
  display: flex;
  margin-top: var(--sp-xs);
}
#export-geojson,
.btn-export {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  min-height: 44px;               /* touch target */
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}
.btn-export:hover { border-color: var(--accent); }

/* ==========================================================================
   State regions — no-results (R4) and dataset-load error (R2)
   ========================================================================== */
#no-results,
.no-results {
  color: var(--muted);
  border-color: var(--border);
}
#error-state,
.error-state { border-color: var(--warning); }

/* .site-footer lives in ../common.css (shared with demo). */

/* ==========================================================================
   Responsive — tablet (768–1023px) taller map
   ========================================================================== */
@media (min-width: 768px) {
  #map { min-height: 480px; }     /* tablet map height */
}

/* ==========================================================================
   Responsive — desktop (≥1024px) two columns: map ~60% / filter panel ~40%
   ========================================================================== */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 3fr 2fr;   /* ~60% / ~40% */
    align-items: start;
  }
  #map { min-height: 600px; }         /* explicit desktop map height (Pitfall 7) */
  .panel {
    position: sticky;
    top: var(--sp-lg);
    max-height: calc(100vh - var(--sp-xl));
    overflow-y: auto;
  }
}

/* ==========================================================================
   Reduced motion — no explorer animations, but honor the demo's global guard.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}