/* Map-engine presentation; page layout lives in bas-map-ui.css. */
.bas-map-canvas {
    background:#d3e9e6;
    isolation:isolate;
    font-family:var(--sans,Arial,sans-serif);
    color:#193f32;
    min-height:360px
}

.bas-map-canvas:focus-visible {
    outline:3px solid #bb713c;
    outline-offset:-3px
}

.bas-map-canvas .leaflet-pane>svg {
    max-width:none
}

/* Keep zoom and attribution readable over every provider background. */
.bas-map-canvas .leaflet-control-container {
    font:12px/1.45 var(--sans,Arial,sans-serif)
}

.bas-map-canvas .leaflet-control-zoom {
    border:1px solid #bfccbf;
    box-shadow:0 4px 15px #173f3314;
    border-radius:8px;
    overflow:hidden
}

.bas-map-canvas .leaflet-control-zoom a {
    background:#fffdf6;
    color:#183e32;
    width:36px;
    height:36px;
    line-height:36px;
    font-size:23px;
    border-color:#dce2d3
}

.bas-map-canvas .leaflet-control-zoom a:hover {
    background:#e5edda
}

.bas-map-canvas .leaflet-control-attribution {
    max-width:calc(100vw - 55px);
    font-size:10px;
    background:#fffef7e8;
    color:#3d5144;
    line-height:1.4;
    padding:3px 7px;
    overflow-wrap:anywhere
}

.bas-map-canvas .leaflet-control-attribution a {
    color:#215c47;
    text-decoration:underline;
    text-underline-offset:2px
}

.bas-map-canvas .leaflet-control-scale-line {
    border-color:#4c6658;
    background:#fffef2dc;
    color:#314c3b;
    font-size:10px;
    text-shadow:none
}

/* Numbered parks and shaped experience markers remain distinguishable beyond color. */
.bas-map-pin {
    border:0;
    background:none;
    box-shadow:none;
    display:grid;
    place-items:center
}

.bas-map-pin-face {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    border:2px solid #fffef4;
    background:#2b6747;
    color:#fff;
    box-shadow:0 2px 9px #193d3445;
    border-radius:50%;
    font:700 12px/1 var(--sans,Arial,sans-serif);
    transition:box-shadow .12s,transform .12s;
    box-sizing:border-box
}

.bas-map-pin-park .bas-map-pin-face {
    background:#204f37;
    border-width:3px;
    font-size:12px
}

.bas-map-pin-experience .bas-map-pin-face {
    background:#286d85;
    font-size:14px
}

.bas-map-pin-gateway .bas-map-pin-face {
    background:#a35d33;
    font-size:17px
}

.bas-map-pin-science .bas-map-pin-face {
    background:#68618b;
    font-size:17px
}

.bas-map-pin:hover .bas-map-pin-face,.bas-map-pin:focus-visible .bas-map-pin-face {
    transform:scale(1.12);
    box-shadow:0 0 0 4px #ffffffa8,0 3px 12px #193d3460
}

.bas-map-pin.is-selected .bas-map-pin-face {
    box-shadow:0 0 0 4px #ebc270,0 0 0 7px #fffdf4b3,0 4px 15px #14372d59;
    transform:scale(1.1)
}

.bas-map-pin:focus-visible {
    outline:0
}

/* Short previews invite discovery; full content stays in semantic Blazor markup. */
.bas-map-tooltip {
    border:1px solid #d3decf;
    border-radius:4px;
    box-shadow:0 4px 12px #193f321c;
    background:#fffdf6;
    color:#173f33;
    font:500 12px/1.4 var(--sans,Arial,sans-serif);
    padding:7px 10px;
    max-width:240px;
    white-space:normal
}

.bas-map-canvas .leaflet-popup-content-wrapper,.bas-map-canvas .leaflet-popup-tip {
    background:#fffdf6;
    color:#173f33;
    box-shadow:0 5px 24px #173f3325
}

.bas-map-canvas .leaflet-popup-content-wrapper {
    border-radius:10px;
    padding:3px
}

.bas-map-canvas .leaflet-popup-content {
    margin:19px 21px;
    font:14px/1.5 var(--sans,Arial,sans-serif)
}

.bas-map-popup-kind {
    display:block;
    text-transform:uppercase;
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    color:#66775c;
    margin:0 18px 7px 0
}

.bas-map-popup-content h3 {
    font:400 25px/1.08 var(--serif,Georgia,serif);
    letter-spacing:-.02em;
    margin:0 0 10px
}

.bas-map-canvas .bas-map-popup-content p {
    margin:0 0 12px;
    font-size:12px;
    line-height:1.55;
    color:#576858
}

.bas-map-popup-button {
    display:block;
    border:0;
    border-top:1px solid #d6e0ce;
    background:transparent;
    color:#215b41;
    font:600 11px/1.4 var(--sans,Arial,sans-serif);
    padding:10px 0 0;
    text-align:left;
    cursor:pointer;
    text-decoration:none
}

.bas-map-popup-button:hover {
    text-decoration:underline
}

.bas-map-canvas a.leaflet-popup-close-button {
    font-size:22px;
    line-height:28px;
    width:30px;
    height:30px;
    color:#516b58;
    border-radius:50%
}

.bas-map-canvas a.leaflet-popup-close-button:hover {
    background:#e8eddf;
    color:#183e32
}

/* Geometry styling preserves the distinction between park outlines and mapped trail fragments. */
.bas-map-boundary {
    stroke-linejoin:round
}

.bas-map-trail {
    stroke-linecap:round;
    stroke-linejoin:round
}

/* Only overview labels use these text styles; precise waypoints are separate markers. */
.bas-map-context-label {
    background:none;
    border:0;
    text-align:center;
    white-space:nowrap;
    color:#526c4b;
    font:600 11px/22px var(--sans,Arial,sans-serif);
    letter-spacing:.2em;
    text-shadow:0 1px 2px #ffffef
}

.bas-map-context-label.water {
    font:italic 15px/22px var(--serif,Georgia,serif);
    letter-spacing:.07em;
    color:#407879;
    text-shadow:0 1px 2px #eaf8f5
}

.bas-map-context-label.reef {
    font:500 10px/22px var(--sans,Arial,sans-serif);
    letter-spacing:.05em;
    color:#527b73;
    text-shadow:0 1px 2px #f1f7df
}

/* On small screens attribution wraps, while popup controls remain usable. */
@media(max-width:600px) {
    .bas-map-canvas .leaflet-control-attribution {
        font-size:9px;
        max-width:calc(100vw - 48px)
    }

    .bas-map-canvas .leaflet-popup-content {
        margin:15px 17px
    }

    .bas-map-popup-content h3 {
        font-size:23px
    }

    .bas-map-canvas .leaflet-control-scale {
        margin-bottom:25px
    }

}

/* Selection highlighting must not require movement to be understood. */
@media(prefers-reduced-motion:reduce) {
    .bas-map-pin-face {
        transition:none
    }

}

/* Thematic source cards distinguish archived measurements from visitor markers. */
.bas-map-context-facts { display:grid;gap:8px;margin:14px 0 }
.bas-map-context-facts>div { display:flex;justify-content:space-between;gap:18px;border-top:1px solid #e0e7d8;padding-top:7px }
.bas-map-context-facts dt { font-size:10px;color:#65775e;max-width:65% }
.bas-map-context-facts dd { font-size:11px;font-weight:600;margin:0;text-align:right }
.bas-map-source-date { display:block;font-size:9px;line-height:1.5;color:#71816b;margin:10px 0 }
.bas-map-context-popup h3 { font-size:22px }
.bas-map-canvas .leaflet-bottom.leaflet-right { margin-bottom:18px }
.bas-map-canvas .leaflet-control-attribution { border-radius:5px 0 0 0 }
.bas-map-canvas .leaflet-control-zoom a { width:36px;height:36px;line-height:36px }

/* Gazetteer labels appear only at useful scales and are collision-limited by JS. */
.bas-map-detail-label { border:0;background:none;text-align:center;white-space:nowrap;pointer-events:none;color:#4d6852;font:500 11px/20px var(--sans,Arial,sans-serif);text-shadow:-1px -1px 0 #f5f8eb,1px -1px 0 #f5f8eb,-1px 1px 0 #f5f8eb,1px 1px 0 #f5f8eb,0 0 4px #f5f8eb }
.bas-map-detail-label.city,.bas-map-detail-label.town { color:#385741;font-weight:700;font-size:11.5px }
.bas-map-detail-label.island { font-style:italic;color:#528176 }

/* Quiet source geography never intercepts map clicks; the single thematic
   Canvas handles scientific hit testing above the protected-area outlines. */
.bas-map-canvas .leaflet-pane[class*="bas-detail-"]>canvas { pointer-events:none }