/* Live Leaflet map inside Movement 01 (Watch). */

#program-map-live { width: 100%; height: 100%; min-height: 0; background: var(--surface-alt); }
#program-map-live:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }

/* Overlays float above Leaflet's own controls (z-index 1000). */
.map-stage .map-legend, .live-map-status { z-index: 1100; }

.live-map-status { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); margin: 0; padding: .4rem .7rem; border-radius: 8px; background: var(--yellow-pale); color: var(--ink); font-size: .8rem; max-width: min(92%, 46ch); text-align: center; box-shadow: 0 5px 20px rgba(20, 50, 54, .15); }
.live-map-status[hidden] { display: none; }

/* Keep the legend clear of the scale control in the bottom-left corner. */
.map-stage .map-legend { left: .6rem; bottom: 2.3rem; }
.map-legend .line { border-top-color: var(--brand-blue-dark, #5A8FA0); }
.map-legend .dot { width: .8rem; height: .8rem; border-radius: 50%; }
.map-legend .dot-sighting { background: var(--green-deep); }
.map-legend .dot-nosighting { background: #fff; border: 2px solid var(--teal); }
.map-legend .dot-private { background: var(--eco-yellow); border: 2px solid var(--yellow-deep); }

.map-data-note { color: var(--muted); font-size: .74rem; line-height: 1.5; }

.waterway-tip-hint { color: var(--muted); font-weight: 400; }
.map-data-note a { color: var(--teal); }

/* Popups in the site's voice */
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 12px 34px rgba(16, 44, 51, .22); font-family: var(--font-body); }
.leaflet-popup-content { margin: .85rem 1rem; font-size: .84rem; line-height: 1.5; color: var(--ink); }
.leaflet-popup-content h3 { margin: 0 0 .25rem; font-size: .95rem; letter-spacing: -.01em; }
.leaflet-popup-content .private-notice { margin: 0 0 .5rem; padding: .45rem .6rem; border-radius: 8px; background: var(--yellow-pale); border: 1px solid var(--eco-yellow); font-weight: 600; }
.leaflet-popup-content .waterway-name { font-weight: 650; }
.leaflet-popup-content .popup-caveat { color: var(--muted); font-size: .76rem; margin: .45rem 0 0; }

/* Aggregated per-place markers (shown when zoomed out). Leaflet positions
   the outer div with a transform, so the visual disc is an inner element
   that can scale with zoom (--agg-zoom-scale, set by the map component)
   without disturbing the marker's anchor. */
.agg-marker { background: none; border: 0; }
.agg-marker .agg-disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 2.5px solid var(--teal); color: var(--teal-deep); font-family: var(--font-body); font-style: normal; font-weight: 750; box-shadow: 0 4px 14px rgba(16, 44, 51, .25); transform: scale(var(--agg-zoom-scale, 1)); transition: transform .18s ease-out; }
.agg-marker .agg-disc span { font-size: .82rem; }
.agg-marker-detected .agg-disc { background: var(--green-deep); border-color: #fff; color: #fff; }
.agg-marker-private .agg-disc { background: var(--eco-yellow); border-color: var(--yellow-deep); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .agg-marker .agg-disc { transition: none; } }

/* Popups scroll internally instead of clipping against the map edge. */
.leaflet-popup-scrolled { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.stack-list { margin: .3rem 0 0; padding-left: 1.1rem; max-height: 10rem; overflow-y: auto; }
.stack-list li { margin: .15rem 0; }

.popup-zoom { margin: .5rem 0 .2rem; padding: .45rem .9rem; border: 0; border-radius: 999px; background: var(--teal-deep); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.popup-zoom:hover { background: var(--teal); }
.popup-zoom:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Phones: the legend is a static block under the map and the attribution
   sits on its own line beneath it (live-map.js moves the Leaflet control
   into .map-attribution-row), so nothing overlays the map or each other. */
@media (max-width: 760px) {
  .map-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
  .map-stage #program-map-live { grid-row: 1; min-height: 440px; }
  .map-stage .map-legend { position: static; grid-row: 2; order: 0; left: auto; bottom: auto; gap: .5rem .9rem; padding: .6rem .8rem; border-radius: 0; background: var(--surface); box-shadow: none; border-top: 1px solid var(--line); }
  .map-attribution-row { grid-row: 3; padding: .4rem .8rem .5rem; background: var(--surface); border-top: 1px solid var(--line); }
  .map-attribution-row .leaflet-control-attribution { position: static; float: none; margin: 0; padding: 0; background: none; color: var(--muted); font-family: var(--font-body); font-size: .76rem; line-height: 1.45; white-space: normal; }
  .map-attribution-row .leaflet-control-attribution a { color: var(--teal); }
}