/* Module 01: the map. Classes prefixed map-. The library's own sheet comes first. Dark theme hangs off :root[data-theme="dark"]. */
@import url("vendor/maplibre-gl/maplibre-gl.css");
:root { --mk-mod: #F2B88A; --mk-low: #BDBDBD; }
:root[data-theme="dark"] { --mk-mod: #E0955A; --mk-low: #9A9A9A; }
#map-slot:not([hidden]) { display: flex; flex-direction: column; }
.map-frame { position: relative; flex: 1 1 auto; min-height: 440px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.map-canvas { position: absolute; inset: 0; }
.map-wait { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; margin: 0; padding: 16px; color: var(--ink-2); font-size: 16px; max-width: none; pointer-events: none; }
.map-wait[hidden] { display: none; }
.map-failed .map-wait { background: var(--surface); pointer-events: auto; }
.map-failed .maplibregl-ctrl-top-right { display: none; }
.map-retry { min-height: 48px; }
/* markers: one button per pinned place; fill by risk (the risk is also in the accessible name and the tag) */
.map-mk { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ink); background: var(--mk-low); cursor: pointer; }
.map-mk::before { content: ""; position: absolute; inset: -17px; }
.map-mk.high { background: var(--risk-high); }
.map-mk.moderate { background: var(--mk-mod); }
.map-mk.low { background: var(--mk-low); }
.map-mk.sel { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--ink); z-index: 2; }
.map-mk:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.map-tag.left { left: auto; right: calc(100% + 8px); }
.map-tag { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 600 12px/16px Inter, system-ui, sans-serif; white-space: normal; width: max-content; max-width: 220px; overflow-wrap: anywhere; pointer-events: none; }
/* a quiet map: one grey, no hue, for the light base map; the detailed base map is left as it is */
.map-frame:not(.map-detailed) .maplibregl-canvas { filter: grayscale(1); }
.map-canvas .maplibregl-ctrl-group { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.map-canvas .maplibregl-ctrl-group button { width: 48px; height: 48px; }
.map-canvas .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.map-canvas .maplibregl-ctrl button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; box-shadow: none; }
.map-canvas .maplibregl-cooperative-gesture-screen { background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--bg); font: 16px/1.4 Inter, system-ui, sans-serif; }
:root[data-theme="dark"] .map-frame:not(.map-detailed) .maplibregl-canvas { filter: grayscale(1) invert(1) brightness(.9); }
:root[data-theme="dark"] .map-canvas .maplibregl-ctrl-icon { filter: invert(1); }
@media (forced-colors: active) {
  .map-mk, .map-mk.high, .map-mk.moderate, .map-mk.low { border: 2px solid Canvas; background: CanvasText; }
}
/* tide gauge dots: the dots themselves are map paint; this is the legend (under the map) and the hover label */
.map-legend { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: none; }
.map-legend[hidden] { display: none; }
.map-legend svg { flex: none; margin: 5px 0 0; fill: var(--ink); stroke: var(--bg); stroke-width: 1; }
.map-tip .maplibregl-popup-tip { display: none; }
.map-tip .maplibregl-popup-content { max-width: 28ch; padding: 4px 8px; font: 14px/1.4 Inter, system-ui, sans-serif; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* compact attribution, inside the map, bottom right: an info button (48 px hit area) that opens the credit words */
.map-canvas .maplibregl-ctrl-attrib.maplibregl-compact { box-sizing: border-box; min-height: 48px; margin: 8px; padding: 0 48px 0 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 24px; box-shadow: none; font: 14px/20px Inter, system-ui, sans-serif; }
.map-canvas .maplibregl-ctrl-bottom-right { max-width: 100%; }
.map-canvas .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 8px 48px 8px 8px; border-radius: 8px; }
.map-canvas .maplibregl-ctrl-attrib, .map-canvas .maplibregl-ctrl-attrib-inner { font-size: 14px; line-height: 20px; }
.map-canvas .maplibregl-ctrl-attrib a { font-size: 14px; line-height: 20px; color: var(--ink); text-decoration: underline; }
.map-canvas .maplibregl-ctrl-attrib-button { position: absolute; top: 0; right: 0; width: 48px; height: 48px; background-size: 24px 24px; background-position: center; background-repeat: no-repeat; border-radius: 24px; }
.map-canvas .maplibregl-ctrl-attrib-button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; box-shadow: none; }
:root[data-theme="dark"] .map-canvas .maplibregl-ctrl-attrib-button { filter: invert(1); }