.coast-map-panel { margin: 18px 0 28px; border: 1px solid #c9dce9; border-radius: 12px; background: #fff; color: #122c4d; scroll-margin-top: 100px; overflow: hidden; }
.coast-map-panel > summary { display: flex; align-items: center; gap: 12px; padding: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.coast-map-panel > summary::-webkit-details-marker { display: none; }
.coast-map-panel > summary::after { content: '+'; margin-left: auto; }
.coast-map-panel[open] > summary::after { content: '−'; }
.coast-map-panel > summary > .ht-icon { font-size: 26px; }
.coast-map-body { padding: 0 18px 18px; min-width: 0; }
.coast-map-canvas { width: 100%; height: 450px; border-radius: 8px; background: #e7f4fc; }
.coast-map-tools { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; align-items: center; }
.coast-map-tools fieldset { display: flex; flex-wrap: wrap; gap: 10px 18px; min-width: 0; }
.coast-map-tools legend { float: none; width: auto; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.coast-map-tools label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.coast-map-tools input { width: 18px; height: 18px; accent-color: #122c4d; }
.coast-map-tools button, .coast-map-list button { border: 1px solid #bbcbd8; border-radius: 6px; background: #fff; color: #122c4d; padding: 9px 12px; font: inherit; font-size: 13px; }
.coast-map-list { margin-top: 12px; } .coast-map-list ul { max-height: 300px; overflow: auto; padding: 12px 12px 12px 24px; } .coast-map-list li { margin: 10px 0; overflow-wrap: anywhere; }
.coast-map-panel a { color: #122c4d; text-underline-offset: 3px; }
.coast-map-note, .coast-map-status { margin: 14px 0 0; font-size: 13px; color: #465e78; }
/* MapLibre translates markers from the map origin. Keep them out of document
   flow: relative positioning adds each earlier marker's height to the pin. */
.coast-map-marker { position: absolute; display: flex; justify-content: center; align-items: center; width: 38px; height: 42px; padding: 0; border: 2px solid white; border-radius: 16px 16px 16px 3px; background: #122c4d; color: #fff; box-shadow: 0 2px 8px #122c4d50; cursor: pointer; }
.coast-map-marker .ht-icon { font-size: 23px; } .coast-map-marker-parking { background: #176086; } .coast-map-marker-area { background: #28745e; } .coast-map-marker-hut { background: #c24b30; }
.coast-map-marker small { position: absolute; top: -9px; right: -9px; padding: 1px 5px; border-radius: 10px; background: #fff; color: #122c4d; font-size: 11px; font-weight: bold; }
.coast-map-popup { max-height: 280px; overflow: auto; color: #122c4d; font: 14px/1.5 Inter, Arial, sans-serif; overflow-wrap: anywhere; }
.coast-map-popup > div + div { border-top: 1px solid #d8e1e9; padding-top: 12px; } .coast-map-popup a { color: #122c4d; font-weight: 700; } .coast-map-popup p { margin: 8px 0 12px; }
.maplibregl-popup-content { padding: 24px 16px 12px; border-radius: 10px; } .maplibregl-popup-close-button { width: 32px; height: 30px; color: #122c4d; font-size: 24px; }
.coast-map-marker:focus-visible, .coast-map-panel :is(button, summary, input):focus-visible { outline: 3px solid #f47750; outline-offset: 3px; }
.coast-map-panel [hidden], .coast-map-canvas[hidden] { display: none !important; }
@media(max-width:575.98px) { .coast-map-body { padding: 0 12px 14px; } .coast-map-canvas { height: 360px; } .coast-map-tools label { font-size: 12px; } }
@media print { .coast-map-canvas, .coast-map-tools, .coast-map-list button, .maplibregl-map { display: none !important; } }