.coastal-map-panel { margin: 28px 0; padding: 20px; border: 1px solid var(--line); background: var(--white); }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.map-toolbar .eyebrow { margin-bottom: 5px; }
.map-toolbar h2 { margin: 0; font: 500 clamp(23px, 3vw, 33px)/1.2 var(--serif); letter-spacing: -.03em; }
.coastal-map { z-index: 0; width: 100%; height: clamp(340px, 50vw, 530px); background: var(--paper); }
.coastal-map .leaflet-tile-pane { filter: grayscale(1); }
.map-loading { padding: 32px; color: var(--muted); }
.map-status, .map-coverage { margin: 0; color: var(--muted); font-size: 12px; }
.map-status { font-size: 11px; }
.map-coverage strong { color: var(--ink); font-weight: 600; }
.map-sources { display: block; color: var(--muted); font-size: 10px; }
.map-notes { display: grid; gap: 7px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.map-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.map-reset, .map-ship-view { flex-shrink: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--lake); padding: 7px 12px; font: 600 12px var(--sans); }
.map-reset:not(:disabled):hover, .map-ship-view:hover { border-color: var(--lake); }
.map-ship-view[aria-pressed="true"] { background: var(--lake); color: var(--white); }
.map-ship-frame { display: block; width: 100%; height: clamp(400px, 50vw, 530px); border: 0; }
.map-ship-disclosure, .map-ship-consent { display: block; color: var(--muted); font-size: 11px; }
.map-ship-disclosure { margin: 0 0 10px; }
.map-show-place { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 0; color: var(--lake); font: 600 12px var(--sans); cursor: pointer; }
.map-show-place svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.map-show-place:hover { text-decoration: underline; text-underline-offset: 4px; }
.map-reset:disabled { opacity: .5; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--muted); font-size: 11px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.town-dot { background: var(--lake); }
.lighthouse-dot { background: #bb8033; }
.park-dot { background: #53815c; }
.cluster-dot { width: 11px; height: 11px; border: 2px solid var(--white); background: var(--sand); box-shadow: 0 0 0 1px #c9a160; }
.legend-line { width: 25px; border-top: 2px dashed #a57425; }
.map-pin, .map-cluster { display: grid; place-items: center; width: 33px; height: 33px; padding: 0; border: 2px solid var(--white); border-radius: 50%; background: var(--lake); color: white; box-shadow: 0 2px 8px #122b4a40; font: 700 12px var(--sans); cursor: pointer; }
.map-pin-lighthouse { background: #bb8033; }
.map-pin-park { background: #53815c; }
.map-cluster { width: 41px; height: 41px; border: 3px solid var(--white); background: var(--sand); color: var(--deep); }
.map-pin-selected { outline: 3px solid var(--sand); outline-offset: 3px; }
.map-lake-wrapper { width: max-content; height: auto; }
.map-lake-label { padding: 3px 8px; border-radius: 2px; background: #122b4add; color: #f7f5ef; text-decoration: none; font: italic 14px var(--serif); white-space: nowrap; }
.coastal-map .map-lake-label { display: block; transform: translate(-50%, -50%); color: #f7f5ef; }
.map-lake-label:hover, .map-lake-label:focus { color: var(--sand); }
.map-selected { outline: 3px solid var(--sand); outline-offset: 3px; }
.coastal-map .leaflet-popup-content { margin: 18px; color: var(--ink); font-family: var(--sans); }
.coastal-map .leaflet-popup-content p { margin: 8px 0; font-size: 11px; }
.coastal-map .leaflet-popup-content a { color: var(--lake); font-weight: 600; }
.map-fullscreen { width: 30px; height: 30px; border: 0; background: white; color: var(--ink); font-size: 22px; cursor: pointer; }
.coastal-map-panel:fullscreen { display: flex; flex-direction: column; height: 100%; overflow: auto; padding: 18px; }
.coastal-map-panel:fullscreen .coastal-map { flex: 1; min-height: 250px; }
.coastal-map-panel:fullscreen .map-ship-embed { display: flex; flex: 1; flex-direction: column; }
.coastal-map-panel:fullscreen .map-ship-frame { flex: 1; min-height: 400px; }
.map-ship { background: none; border: 0; filter: drop-shadow(0 1px 2px #122b4a66); }
.map-ship svg { display: block; transition: transform .4s ease; }
.map-ship-toggle { display: flex !important; align-items: center; gap: 6px; margin: 0; padding: 5px 9px; background: #fffefa; color: var(--ink); font: 600 12px var(--sans); cursor: pointer; }
.map-ship-toggle input { margin: 0; accent-color: var(--lake); }
.map-ship-count { min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--lake-light); color: var(--lake); text-align: center; font-size: 11px; }
.map-ships { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--muted); font-size: 11px; }
.map-ship-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.map-ship-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-ship-legend i { width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #122b4a33; }
.coastal-map .leaflet-popup-content .map-ship-age { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .map-ship svg { transition: none; } }
@media (max-width: 600px) {
  .coastal-map-panel { padding: 12px; }
  .map-toolbar { gap: 10px; }
  .map-toolbar h2 { font-size: 23px; }
  .map-lake-label { font-size: 11px; padding: 2px 4px; }
}