/* DitchBook /map/ — Leaflet map page. Builds on styles.css + directory.css
   tokens; only map-specific layout lives here. */

.map-page {
  padding-bottom: 2rem;
}

.map-intro {
  max-width: var(--measure);
  color: var(--ink-mid);
  margin: 1rem 0 1.5rem;
}

.map-intro strong {
  color: var(--ink);
}

.map-frame {
  position: relative;
  width: 100%;
  height: min(72vh, 720px);
  min-height: 360px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-dim);
  margin-bottom: 1.5rem;
}

#ditch-map {
  width: 100%;
  height: 100%;
}

.map-noscript {
  max-width: var(--measure);
  background: var(--water-tint);
  border: 1px solid var(--water-line);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.4em;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: var(--step--1);
}

.map-legend li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.map-legend-swatch {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
  flex-shrink: 0;
}

.map-footnote {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step--1);
  margin-top: 1rem;
}

.map-footnote a {
  color: var(--water-deep);
}

/* Leaflet popup card content — DitchBook-flavored, not Leaflet defaults. */

.leaflet-popup-content-wrapper {
  border-radius: 6px;
}

.leaflet-popup-content {
  font-family: var(--font-sans);
  margin: 0.9em 1em;
  min-width: 220px;
}

.map-card h2 {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  margin: 0 0 0.35em;
  color: var(--ink);
}

.map-card dl {
  margin: 0 0 0.6em;
  font-size: var(--step--1);
  color: var(--ink-mid);
}

.map-card dt {
  font-weight: 600;
  color: var(--ink-soft);
  display: inline;
}

.map-card dd {
  display: inline;
  margin: 0 0 0 0.3em;
}

.map-card dd::after {
  content: "";
  display: block;
}

.map-card .map-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin-top: 0.5em;
}

.map-card .map-card-links a {
  font-weight: 600;
  color: var(--water-deep);
  text-decoration: none;
}

.map-card .map-card-links a:hover,
.map-card .map-card-links a:focus {
  text-decoration: underline;
}

/* Marker focus ring for keyboard users tabbing through pins (circleMarkers
   render as SVG <path class="leaflet-interactive">; reservoir markers are
   divIcons, focus ring applied to the wrapping element instead). */
path.leaflet-interactive:focus,
path.leaflet-interactive:focus-visible,
.ditch-marker-reservoir:focus,
.ditch-marker-reservoir:focus-visible {
  outline: 3px solid var(--water);
  outline-offset: 1px;
}

/* Reservoir pin — a triangle, same basin color as the ditch circle marker.
   Plain CSS clip-path, no image asset, so it stays vendor-free. */
.ditch-marker-reservoir {
  background: none;
  border: none;
}

.reservoir-shape {
  display: block;
  width: 16px;
  height: 16px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: 1.5px solid #fff;
  box-sizing: border-box;
}

/* Legend shape key — plain-language circle/triangle explainer under the
   basin swatches. */
.map-legend-shapekey {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: -0.75rem 0 1.5rem;
}

.shapekey-circle,
.shapekey-triangle {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background: var(--ink-soft);
  flex-shrink: 0;
}

.shapekey-circle {
  border-radius: 50%;
}

.shapekey-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.map-legend li.active {
  outline: 2px solid var(--water-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Find-your-ditch search — reuses .company-search-input/.company-search-
   results tokens from directory.css (already loaded on this page) so the
   box reads consistently with /companies/ and /check/. */

.map-search {
  margin: 1.5rem 0 2rem;
  max-width: 32rem;
}

.map-search-results {
  max-width: 32rem;
}

.map-search-cta {
  padding: 0.9em 0.6em;
  font-size: var(--step-0);
  color: var(--ink-mid);
  line-height: 1.5;
}

/* These render as plain inline sentences (CTA copy, no-match message) —
   override directory.css's .company-search-results a rule (display:flex;
   flex-direction:column; min-height:56px), which is meant for the full-row
   matched-company link, not a link sitting mid-sentence. Touch-target size
   comes from padding on the inline link itself, not from switching it to a
   block/flex box (which is what caused each link — and the trailing
   period — to land on its own line). */
.map-search-cta a,
.map-search-results .search-empty a {
  display: inline;
  flex-direction: initial;
  min-height: 0;
  padding: 0.3em 0.15em;
  color: var(--water-deep);
  font-weight: 600;
}

/* Time slider */

.map-timeline {
  margin: 0 0 1.5rem;
  max-width: 40rem;
}

.map-timeline-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.map-play-button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5em 1.1em;
}

.map-year-slider {
  flex: 1 1 auto;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
}

.map-timeline-caption {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Oldest-ten list */

.map-oldest {
  margin: 2rem 0;
  max-width: var(--measure);
}

.map-oldest h2 {
  font-size: var(--step-1);
  margin-bottom: 0.75rem;
}

.map-oldest-list {
  list-style: decimal;
  padding-left: 1.4em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: var(--step--1);
}

.map-oldest-year {
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.4em;
}

.map-oldest-list a {
  color: var(--water-deep);
  font-weight: 600;
  text-decoration: none;
}

.map-oldest-list a:hover,
.map-oldest-list a:focus {
  text-decoration: underline;
}

.map-oldest-source {
  color: var(--ink-soft);
  margin-left: 0.4em;
}

.map-oldest-source::before {
  content: "— ";
}

@media (max-width: 640px) {
  .map-frame {
    height: 62vh;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .map-legend {
    font-size: 0.85rem;
    gap: 0.5em 1em;
  }

  .map-timeline-controls {
    flex-wrap: wrap;
  }

  .map-year-slider {
    flex-basis: 100%;
  }
}