/* /map — layout only. Colour, type and the depth-key gradient all come
   from styles.css's own tokens; nothing here introduces a second palette.

   No topbar: a full nav bar was eating a chunk of the map for a page
   whose whole point is the map. Chrome here is a small set of floating
   glass panels instead — backdrop-blur, low-opacity fill, a hairline
   border — so the seabed itself is what a viewer's eye lands on, and the
   controls read as instrument overlays rather than a website header
   bolted onto a map. */

html, body.map-page { height: 100%; overflow: hidden; }
#map-main { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; background: var(--black); }

:root {
  --glass-bg: rgba(18, 20, 20, .46);
  --glass-bg-strong: rgba(14, 16, 16, .62);
  --glass-border: rgba(240, 238, 231, .14);
  --glass-blur: blur(16px) saturate(160%);
}

.map-watermark {
  position: absolute; top: 18px; left: 18px; z-index: 5;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 10px; border-radius: 999px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  font-weight: 680; letter-spacing: .1em; font-size: 12px; color: var(--paper);
  text-decoration: none; opacity: .82; transition: opacity .18s ease, background .18s ease;
}
.map-watermark:hover { opacity: 1; background: var(--glass-bg-strong); }
.map-watermark img { width: 22px; height: 22px; object-fit: contain; display: block; }

.map-depth-key {
  position: absolute; left: 18px; bottom: 18px; z-index: 5;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 10px;
  padding: 10px 14px;
}

.map-load {
  position: absolute; left: 50%; bottom: 18px; z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 34px; padding: 0 13px; border-radius: 999px;
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); color: var(--paper-dim);
  font: 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.map-load[data-state="loading"], .map-load[data-state="error"] { opacity: 1; transform: translate(-50%, 0); }
.map-load[data-state="error"] { border-color: rgba(246, 221, 130, .45); color: var(--paper); }
.map-load-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(70,190,180,.55); }
.map-load[data-state="loading"] .map-load-pulse { animation: map-pulse 1.25s ease-out infinite; }
.map-load[data-state="error"] .map-load-pulse { background: var(--yellow); }
@keyframes map-pulse { 70% { box-shadow: 0 0 0 7px rgba(70,190,180,0); } 100% { box-shadow: 0 0 0 0 rgba(70,190,180,0); } }

/* A small "i" toggle rather than a permanent strip of legal text across
   the map — the attribution still exists (required by the data licences)
   but reads it only when asked, via hover/focus. */
.map-attrib { position: absolute; right: 18px; bottom: 18px; z-index: 6; }
.map-attrib-toggle {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); color: var(--paper-dim);
  font: 11px var(--mono); cursor: pointer; transition: background .18s ease, color .18s ease;
}
.map-attrib-toggle:hover, .map-attrib-toggle:focus-visible { background: var(--glass-bg-strong); color: var(--paper); }
.map-attrib-tip {
  position: absolute; right: 0; bottom: 36px; width: min(340px, 60vw);
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 10px; padding: 12px 14px;
  font: 10px/1.6 var(--mono); color: var(--paper-dim);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.map-attrib:hover .map-attrib-tip, .map-attrib:focus-within .map-attrib-tip { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* One instrument column, not two: the zoom control (MapLibre's own,
   restyled below) sits directly above this with the same 18px inset and a
   matching small gap, same button footprint, same neutral glass palette —
   previously this was a second, visually disconnected cluster with a
   yellow "active" accent that didn't exist anywhere else in the chrome. */
.map-tools {
  position: absolute; right: 18px; top: 96px; z-index: 7;
  display: grid; gap: 8px;
}
.map-tools button {
  width: 29px; height: 29px; display: grid; place-items: center;
  border: 1px solid var(--glass-border); border-radius: 10px;
  background: var(--glass-bg); color: var(--paper-dim); cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 7px 24px rgba(0,0,0,.12);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.map-tools button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.map-tools button:hover { color: var(--paper); background: var(--glass-bg-strong); }
.map-tools button[aria-pressed="true"] { color: var(--paper); background: var(--glass-bg-strong); border-color: rgba(240,238,231,.28); }

/* MapLibre's own zoom control, restyled as glass instead of a solid grey
   box — same treatment as everything else floating over the map. */
.maplibregl-ctrl-top-right { top: 18px !important; right: 18px !important; }
.maplibregl-ctrl-group {
  background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important; border-radius: 10px !important; box-shadow: none !important; overflow: hidden;
}
.maplibregl-ctrl-group button { background: transparent !important; transition: background .15s ease; }
.maplibregl-ctrl-group button:hover { background: rgba(240, 238, 231, .08) !important; }
.maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }

@media (max-width: 600px) {
  .map-watermark { top: 12px; left: 12px; padding: 7px 13px 7px 8px; }
  .map-watermark span { display: none; }
  .map-depth-key { left: 12px; bottom: 12px; padding: 8px 11px; }
  .map-attrib { right: 12px; bottom: 12px; }
  .map-load { bottom: 58px; max-width: calc(100vw - 24px); white-space: nowrap; }
  .maplibregl-ctrl-top-right { top: 12px !important; right: 12px !important; }
  .map-tools { top: 88px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-load, .map-load-pulse { animation: none !important; transition: none !important; }
}