/* ═══ Public hazard map demo ══════════════════════════════════════════════ */
.mapwrap {
  background: var(--scene-ink); min-height: 100svh;
  padding: clamp(96px, 14svh, 150px) 0 40px;   /* clears the floating nav pill */
}
.map-head {
  max-width: 1180px; margin: 0 auto; padding: 0 24px clamp(18px, 3vh, 30px);
}
.map-head .h2 { color: var(--scene-txt); }
.map-head .sub { color: var(--scene-dim); margin: 12px 0 0; max-width: 40rem; }
.map-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.map-ctas .pill {
  border: 0; cursor: pointer; border-radius: 999px; padding: 9px 16px;
  font-family: var(--sf); font-size: 14px; font-weight: 500; color: var(--scene-txt);
}
.map-ctas .pill:hover { color: var(--amber); }
.map-ctas .pill-btn { border: 0; cursor: pointer; font-family: var(--sf); }

.map-shell {
  position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px;
}
#hazardMap {
  height: clamp(400px, 64svh, 760px); border-radius: 24px; overflow: hidden;
  border: 1px solid var(--scene-line); background: #04060a;
}
/* MapLibre paints its own controls light; bring them into the dark scheme */
#hazardMap .maplibregl-ctrl-group { background: rgba(18, 20, 26, .82); border: 1px solid var(--scene-line); }
#hazardMap .maplibregl-ctrl-group button + button { border-top-color: var(--scene-line); }
#hazardMap .maplibregl-ctrl-icon { filter: invert(1) brightness(.9); }
#hazardMap .maplibregl-ctrl-attrib { background: rgba(4, 6, 10, .7); }
#hazardMap .maplibregl-ctrl-attrib a { color: rgba(235, 235, 240, .7); }
#hazardMap .maplibregl-ctrl-scale {
  background: rgba(4, 6, 10, .6); border-color: var(--scene-line);
  color: var(--scene-dim); font-family: var(--sf);
}
#hazardMap .maplibregl-popup-content {
  background: rgba(12, 14, 19, .94); color: var(--scene-txt);
  border: 1px solid var(--scene-line); border-radius: 12px;
  font-family: var(--sf); font-size: 13.5px; line-height: 1.45;
  backdrop-filter: blur(18px);
}
#hazardMap .maplibregl-popup-content .src {
  color: var(--scene-dim); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
}
#hazardMap .maplibregl-popup-tip { border-top-color: rgba(12, 14, 19, .94); }

.map-legend {
  position: absolute; left: 38px; top: 16px; z-index: 5;
  display: flex; flex-direction: column; gap: 7px;
  border-radius: 14px; padding: 12px 14px;
  font-family: var(--sf); font-size: 12.5px; color: var(--scene-dim);
}
.map-legend span { display: flex; align-items: center; gap: 8px; }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.map-legend .k-line { width: 16px; height: 2.5px; border-radius: 2px; background: #ff5c5c; }
.map-legend .k-tall { background: #ff8a3d; }
.map-legend .k-obst { background: #F5A524; }
.map-legend .map-count {
  color: var(--scene-txt); font-weight: 600; padding-top: 4px;
  border-top: 1px solid var(--scene-line); margin-top: 2px;
}

.map-status {
  max-width: 1180px; margin: 14px auto 0; padding: 0 24px;
  font-family: var(--sf); font-size: 14px; color: var(--scene-dim);
}
.map-status.busy { color: var(--amber); }
.map-note {
  max-width: 1180px; margin: 8px auto 0; padding: 0 24px;
  font-family: var(--sf); font-size: 13px; line-height: 1.55; color: rgba(235, 235, 240, .5);
}
.map-note b { color: rgba(235, 235, 240, .72); }
.map-note a { color: var(--amber); text-decoration: none; font-weight: 600; }

@media (max-width: 700px) {
  .map-legend { left: 30px; top: 10px; padding: 10px 12px; font-size: 11.5px; }
  #hazardMap { height: clamp(340px, 56svh, 520px); border-radius: 18px; }
}