/* BAS editorial shell: restrained forest colors keep geographic data readable. */
.bas-atlas {
    --atlas-border:#ccd7c6;
    --atlas-soft:#edf0e5;
    max-width:1580px;
    margin:auto;
    padding:42px 38px 0
}

.atlas-heading {
    display:flex;
    gap:40px;
    justify-content:space-between;
    align-items:center;
    margin:0 0 32px
}

.atlas-heading h1 {
    font-size:clamp(2.7rem,4.6vw,5rem);
    margin:12px 0 18px;
    max-width:900px
}

.atlas-heading h1 em {
    color:#64855a
}

.atlas-heading p {
    font-size:.95rem;
    max-width:760px;
    margin:0;
    color:var(--muted)
}

.atlas-trust-link {
    flex:0 0 220px;
    border-left:2px solid #85a48a;
    padding:14px 0 14px 24px;
    font-size:.85rem;
    font-weight:600;
    text-decoration:none
}

.atlas-trust-link small {
    display:block;
    font-weight:400;
    margin-top:7px;
    color:var(--muted)
}

/* Desktop discovery is a bounded scrolling list alongside a stable-height map. */
.atlas-workspace {
    display:grid;
    grid-template-columns:326px minmax(0,1fr);
    border:1px solid var(--atlas-border);
    border-radius:12px;
    box-shadow:0 12px 36px #183e320a;
    overflow:hidden;
    background:#fffef8
}

.atlas-discovery {
    display:flex;
    flex-direction:column;
    min-width:0;
    border-right:1px solid var(--atlas-border);
    max-height:820px
}

.atlas-search {
    padding:20px 18px 14px;
    font-size:.73rem;
    font-weight:600
}

.atlas-search input {
    display:block;
    width:100%;
    padding:11px 12px;
    margin-top:8px;
    border:1px solid #b6c6b0;
    border-radius:5px;
    color:var(--ink);
    background:white;
    font-size:.85rem
}

.atlas-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    padding:0 18px 14px
}

.atlas-tabs button {
    border:1px solid var(--atlas-border);
    border-radius:30px;
    background:transparent;
    color:var(--ink);
    padding:6px 11px;
    font-size:.72rem
}

.atlas-tabs button[aria-pressed=true] {
    background:var(--forest);
    border-color:var(--forest);
    color:white
}

.atlas-park-filter {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.73rem;
    padding:0 18px 12px
}

.atlas-park-filter select {
    font:inherit;
    color:var(--ink);
    background:white;
    border:1px solid var(--atlas-border);
    border-radius:4px;
    padding:9px;
    min-width:0;
    flex:1
}

.atlas-list-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 18px;
    border-block:1px solid var(--atlas-border);
    font-size:.7rem;
    color:var(--muted)
}

.atlas-list-heading button,.atlas-no-results button {
    border:0;
    background:transparent;
    color:var(--forest);
    font-size:inherit;
    text-decoration:underline;
    text-underline-offset:3px
}

.atlas-places {
    overflow:auto;
    overscroll-behavior:contain;
    min-height:180px;
    flex:1;
    scrollbar-width:thin;
    scrollbar-color:#9caf94 transparent
}

.atlas-place {
    display:flex;
    gap:11px;
    width:100%;
    text-align:left;
    border:0;
    border-bottom:1px solid #e0e5d9;
    background:transparent;
    color:var(--ink);
    padding:16px 17px;
    align-items:flex-start
}

.atlas-place:hover {
    background:#f1f4e9
}

.atlas-place.is-selected {
    background:#e7eedb;
    box-shadow:inset 4px 0 #386847
}

.atlas-place>img {
    width:60px;
    height:66px;
    object-fit:cover;
    border-radius:5px;
    flex-shrink:0
}

.atlas-place>span {
    min-width:0
}

.atlas-place small {
    display:block;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.57rem;
    color:#607258;
    margin-bottom:4px
}

.atlas-place strong {
    display:block;
    font-size:.91rem;
    line-height:1.3;
    margin-bottom:6px;
    font-weight:600
}

.atlas-place>span>span {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.7rem;
    line-height:1.45;
    color:#5c6a57
}

.atlas-place>b {
    font-size:.8rem;
    font-weight:400;
    margin-left:auto
}

.atlas-list-footer {
    padding:12px 18px;
    background:#f1f3e9;
    font-size:.73rem;
    text-decoration:none;
    border-top:1px solid var(--atlas-border)
}

.atlas-no-results {
    padding:24px 18px;
    font-size:.85rem
}

.atlas-no-results h3 {
    font-family:var(--serif);
    font-size:1.7rem
}

/* Background choices are visible controls; the map never depends on a hidden GIS menu. */
.atlas-map-column {
    min-width:0
}

.atlas-map-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 18px
}

.atlas-map-toolbar fieldset {
    border:0;
    padding:0;
    margin:0;
    min-width:0
}

.atlas-map-toolbar legend {
    font-size:.64rem;
    font-weight:600;
    margin-bottom:6px
}

.atlas-basemaps {
    display:flex;
    gap:7px;
    flex-wrap:wrap
}

.atlas-basemap {
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--atlas-border);
    border-radius:5px;
    padding:7px 10px;
    background:white;
    color:var(--ink);
    font-size:.74rem
}

.atlas-basemap[aria-pressed=true] {
    border-color:var(--forest);
    box-shadow:0 0 0 1px var(--forest);
    background:#f1f4e9
}

.atlas-basemap>span {
    width:22px;
    height:22px;
    border-radius:3px;
    display:block;
    background:linear-gradient(120deg,#91b4aa 40%,#d1e2b4 40%)
}

.atlas-basemap.satellite>span {
    background:linear-gradient(125deg,#15392d 0%,#4c6540 40%,#277e8f 42%,#133751 100%)
}

.atlas-basemap.terrain>span {
    background:repeating-radial-gradient(ellipse at bottom,#e2d8b7 0 3px,#a7ac84 4px,#ece7ce 6px 9px)
}

.atlas-basemap.streets>span {
    background:linear-gradient(25deg,transparent 42%,#fff 43% 52%,transparent 53%),linear-gradient(110deg,#d0d8cb 42%,#fff 43% 52%,#dfdecf 53%)
}

.atlas-reset {
    border:1px solid var(--atlas-border);
    border-radius:5px;
    background:transparent;
    font-size:.75rem;
    color:var(--forest);
    padding:10px;
    align-self:end;
    white-space:nowrap
}

.atlas-map-frame {
    position:relative;
    background:#d3e9e5
}

.bas-map-canvas {
    height:510px;
    width:100%;
    z-index:0
}

.atlas-map-peek {
    position:absolute;
    bottom:35px;
    left:16px;
    z-index:500;
    display:flex;
    gap:13px;
    align-items:center;
    padding:10px 14px 10px 10px;
    background:#fffef8f5;
    box-shadow:0 3px 18px #102a2b26;
    border:1px solid #fff;
    border-radius:6px;
    max-width:calc(100% - 90px);
    pointer-events:auto
}

.atlas-map-peek>img {
    width:52px;
    height:55px;
    object-fit:cover;
    border-radius:3px
}

.atlas-map-peek small {
    display:block;
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:.08em
}

.atlas-map-peek strong {
    font-size:1.05rem;
    display:block;
    line-height:1.2
}

.atlas-map-peek a {
    font-size:.7rem
}

.atlas-map-note {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 18px;
    font-size:.62rem;
    color:var(--muted);
    border-bottom:1px solid var(--atlas-border)
}

.atlas-layers {
    padding:14px 18px;
    font-size:.76rem
}

.atlas-layers summary {
    font-weight:600;
    cursor:pointer
}

.atlas-layers>div {
    display:flex;
    gap:14px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:10px
}

.atlas-layers label {
    display:inline-flex;
    gap:6px;
    align-items:center;
    cursor:pointer
}

.atlas-layers input {
    accent-color:var(--forest);
    width:16px;
    height:16px
}

.atlas-layers p {
    font-size:.65rem;
    line-height:1.5;
    color:var(--muted);
    max-width:100%;
    margin:9px 0 0
}

.atlas-legend {
    display:flex;
    gap:5px;
    align-items:center;
    flex-wrap:wrap;
    font-size:.62rem
}

.atlas-legend i {
    width:8px;
    height:8px;
    background:#276747;
    border-radius:50%;
    margin-left:6px
}

.atlas-legend .experience {
    background:#286d85
}

.atlas-legend .gateway {
    background:#a35d33
}

.atlas-legend .science {
    background:#735a94
}

.atlas-status {
    margin:0;
    padding:10px 18px;
    background:#fbecd0;
    color:#6b4c26;
    font-size:.75rem;
    max-width:100%
}

/* One rich detail article follows the map, preserving original image/document credits. */
.atlas-detail {
    margin:68px 0;
    scroll-margin-top:24px
}

.atlas-detail-title {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center;
    border-bottom:1px solid var(--atlas-border);
    padding-bottom:30px;
    margin-bottom:30px
}

.atlas-detail-title h2 {
    font-size:clamp(2.6rem,4vw,4.4rem);
    margin:12px 0 18px
}

.atlas-lede {
    max-width:800px;
    font-size:1.05rem;
    color:var(--muted);
    margin:0
}

.atlas-detail-title>.text-link {
    flex-shrink:0
}

.atlas-detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);
    gap:64px
}

.atlas-detail-photo {
    margin:0 0 30px
}

.atlas-detail-photo>img {
    width:100%;
    height:auto;
    max-height:440px;
    object-fit:cover;
    border-radius:7px
}

.atlas-detail-photo figcaption {
    font-size:.65rem;
    color:var(--muted);
    margin-top:8px
}

.atlas-detail-story h3 {
    font-family:var(--serif);
    font-size:2.1rem;
    margin-bottom:14px
}

.atlas-detail-story>p,.atlas-visit-note p {
    font-size:.95rem;
    line-height:1.8
}

.atlas-visit-note {
    border-left:3px solid #91ad73;
    background:#edf1e2;
    padding:24px 28px;
    margin:25px 0
}

.atlas-visit-note h3 {
    font-size:1.6rem
}

.atlas-visit-note p {
    margin:0
}

.atlas-detail-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:25px 0 40px
}

.atlas-detail-gallery {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}

.atlas-detail-gallery figure {
    margin:0
}

.atlas-detail-gallery img {
    width:100%;
    height:auto;
    aspect-ratio:1.3;
    object-fit:cover;
    border-radius:5px
}

.atlas-detail-gallery img[src*=crystal-cave] {
    object-fit:contain;
    background:#10291e
}

.atlas-detail-gallery figcaption {
    font-size:.72rem;
    line-height:1.5;
    margin-top:10px;
    color:var(--muted)
}

.atlas-detail-gallery small {
    display:block;
    font-size:.6rem;
    margin-top:6px
}

.atlas-reading {
    border-left:1px solid var(--atlas-border);
    padding-left:34px;
    min-width:0
}

.atlas-reading>h3 {
    font-family:var(--serif);
    font-size:2rem;
    margin:12px 0 24px
}

.atlas-reading>article {
    padding:0 0 22px;
    margin-bottom:23px;
    border-bottom:1px solid var(--atlas-border)
}

.atlas-reading-type {
    font-size:.63rem;
    font-weight:600;
    letter-spacing:.09em;
    color:var(--muted)
}

.atlas-reading h4 {
    font-size:1rem;
    line-height:1.45;
    margin:8px 0 12px
}

.atlas-reading p {
    font-size:.81rem;
    line-height:1.65;
    color:var(--muted);
    margin-bottom:12px
}

.atlas-reading article>a {
    font-size:.74rem
}

.atlas-reading ul {
    padding-left:18px
}

.atlas-reading li {
    margin:10px 0;
    font-size:.8rem
}

.atlas-location-source {
    background:#eeeee5;
    padding:20px;
    font-size:.76rem;
    margin-top:25px;
    overflow-wrap:anywhere
}

.atlas-location-source p {
    font-size:.74rem;
    margin:7px 0
}

.atlas-location-source small {
    display:block;
    font-size:.65rem;
    line-height:1.6;
    margin-top:12px;
    color:var(--muted)
}

.atlas-reef-handoff {
    background:var(--forest);
    color:var(--cream);
    padding:24px;
    border-radius:7px;
    margin-top:28px
}

.atlas-reef-handoff h3 {
    font-family:var(--serif);
    font-size:1.8rem
}

.atlas-reef-handoff p {
    color:#dce4d1
}

.atlas-reef-handoff a {
    font-size:.85rem
}

/* Provenance and responsible-visit context remain discoverable without overwhelming the map. */
.atlas-sources {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:80px;
    border-top:1px solid var(--atlas-border);
    padding:60px 0 70px
}

.atlas-sources h2 {
    font-size:3.6rem;
    margin-top:20px
}

.atlas-sources p {
    font-size:.88rem;
    color:var(--muted)
}

.atlas-sources h3 {
    font-family:var(--serif);
    font-size:2rem
}

.atlas-source-links {
    display:flex;
    flex-direction:column;
    gap:11px;
    font-size:.8rem
}

.atlas-loading,.atlas-error {
    padding:60px 25px;
    background:#edf0e5;
    margin-bottom:50px
}

.atlas-error h2 {
    font-size:2.4rem
}

.atlas-feature-link {
    display:inline-block;
    margin-left:18px
}

/* Wide displays gain map height rather than denser controls. */
@media(min-width:1500px) {
    .bas-map-canvas {
        height:570px
    }

    .atlas-discovery {
        max-height:880px
    }

}

/* Tablet widths retain the side-by-side task flow with a narrower list. */
@media(max-width:1100px) {
    .atlas-workspace {
        grid-template-columns:280px minmax(0,1fr)
    }

    .bas-atlas {
        padding:30px 24px 0
    }

    .atlas-map-toolbar {
        align-items:start;
        flex-direction:column;
        gap:10px
    }

    .atlas-reset {
        align-self:auto;
        padding:5px 10px
    }

    .atlas-detail-grid {
        gap:30px
    }

    .atlas-reading {
        padding-left:25px
    }

    .atlas-discovery {
        max-height:865px
    }

    .atlas-heading {
        gap:22px
    }

    .atlas-trust-link {
        flex-basis:180px
    }

    .atlas-map-note {
        flex-direction:column;
        gap:3px
    }

    .atlas-sources {
        gap:35px
    }

    .atlas-place {
        padding-inline:12px
    }

    .atlas-place>img {
        width:48px;
        height:56px
    }

}

/* Phones put the map first, with a direct list jump and a genuinely scrollable results panel. */
@media(max-width:800px) {
    .atlas-heading {
        display:block
    }

    .atlas-heading h1 {
        max-width:560px
    }

    .atlas-trust-link {
        display:block;
        margin-top:22px;
        padding:10px 0 10px 16px
    }

    .atlas-workspace {
        grid-template-columns:1fr;
        overflow:visible
    }

    .atlas-map-column {
        grid-row:1;
        overflow:hidden;
        border-radius:12px 12px 0 0
    }

    .atlas-discovery {
        border-right:0;
        border-top:1px solid var(--atlas-border);
        max-height:600px
    }

    .atlas-places {
        max-height:320px;
        min-height:160px
    }

    .atlas-map-toolbar {
        flex-direction:row;
        align-items:end
    }

    .atlas-reset {
        align-self:end;
        white-space:normal
    }

    .bas-map-canvas {
        height:430px
    }

    .atlas-map-note {
        flex-direction:row
    }

    .atlas-detail-grid {
        grid-template-columns:1fr;
        gap:40px
    }

    .atlas-reading {
        padding:30px 0 0;
        border-left:0;
        border-top:1px solid var(--atlas-border)
    }

    .atlas-detail-title {
        display:block
    }

    .atlas-detail-title>.text-link {
        display:inline-block;
        margin-top:20px
    }

    .atlas-sources {
        grid-template-columns:1fr;
        gap:30px
    }

    .atlas-detail-gallery {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .atlas-places {
        scroll-padding:10px
    }

    .atlas-place>img {
        width:64px;
        height:60px
    }

    .atlas-place>span>span {
        -webkit-line-clamp:1
    }

    .atlas-feature-link {
        margin:10px 0 0;
        display:block
    }

}

/* Small phones use a two-by-two background chooser and single-width primary actions. */
@media(max-width:480px) {
    .bas-atlas {
        padding:26px 14px 0
    }

    .atlas-heading h1 {
        font-size:2.7rem
    }

    .atlas-heading p {
        font-size:.86rem
    }

    .atlas-map-toolbar {
        padding:12px;
        display:block
    }

    .atlas-basemaps {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px
    }

    .atlas-basemap {
        font-size:.72rem;
        padding:7px
    }

    .atlas-reset {
        margin-top:10px
    }

    .bas-map-canvas {
        height:380px
    }

    .atlas-map-peek {
        left:10px;
        bottom:35px;
        gap:9px;
        padding:8px;
        max-width:calc(100% - 50px)
    }

    .atlas-map-peek strong {
        font-size:.9rem
    }

    .atlas-map-peek>img {
        width:40px;
        height:45px
    }

    .atlas-map-peek a {
        font-size:.62rem
    }

    .atlas-map-note {
        flex-direction:column
    }

    .atlas-layers {
        padding:12px
    }

    .atlas-detail {
        margin-block:44px
    }

    .atlas-detail-title h2 {
        font-size:2.7rem
    }

    .atlas-lede {
        font-size:.94rem
    }

    .atlas-detail-gallery {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .atlas-detail-actions .button {
        width:100%
    }

    .atlas-visit-note {
        padding:20px
    }

    .atlas-sources h2 {
        font-size:2.8rem
    }

    .atlas-detail-gallery figcaption {
        font-size:.65rem
    }

}

/* Respect reduced-motion preferences even when the host stylesheet uses smooth anchors. */
@media(prefers-reduced-motion:reduce) {
    .bas-atlas * {
        scroll-behavior:auto!important
    }

}

.atlas-find-mobile {
    display:none
}

@media(max-width:800px) {
    .atlas-find-mobile {
        display:inline-block;
        font-size:.74rem;
        margin-right:14px
    }

    .atlas-map-toolbar {
        flex-wrap:wrap
    }

    .atlas-map-toolbar fieldset {
        width:100%
    }

    .atlas-discovery {
        scroll-margin-top:15px
    }

}

/* Discovery actions keep search, planning and map orientation connected. */
.atlas-list-heading>div {
    display:flex;
    gap:12px;
    align-items:center
}

.atlas-list-heading button:disabled {
    opacity:.4;
    cursor:default
}

.atlas-share {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    padding:12px 18px;
    background:#f1f3e9;
    border-top:1px solid var(--atlas-border);
    font-size:.72rem
}

.atlas-share>a {
    text-decoration:none;
    flex:1
}

.atlas-share>button {
    border:1px solid var(--atlas-border);
    border-radius:4px;
    background:#fffef8;
    color:var(--forest);
    font-size:.7rem;
    padding:7px 9px
}

.atlas-share-status {
    flex-basis:100%;
    font-size:.67rem;
    color:var(--muted)
}

.atlas-share-status:empty {
    display:none
}

.atlas-nearby {
    background:transparent;
    border:0;
    border-bottom:1px solid var(--atlas-border);
    padding:12px 0;
    color:var(--forest);
    font-size:.85rem;
    text-align:left;
    flex-basis:100%
}

.atlas-detail-actions button[aria-pressed=true] {
    background:#e7eedb
}

.atlas-detail:focus {
    outline:none
}

/* Routine provider announcements remain accessible without a repeated status stripe. */
.atlas-status.is-quiet {
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap
}

.atlas-status.has-warning {
    background:#fbecd0;
    color:#6b4c26
}

/* Atlas-inspired controls are part of the map, with one compact, scrollable
   layer panel. The page list remains the accessible discovery/reading surface. */
.atlas-map-dock {
    position:absolute;
    inset:14px 14px auto;
    z-index:610;
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:10px;
    pointer-events:none
}
.atlas-map-area {
    display:block;
    flex:1 1 220px;
    max-width:250px;
    min-width:0;
    padding:9px 12px;
    border:1px solid #d1dccf;
    border-radius:8px;
    background:#fffef9f5;
    box-shadow:0 3px 16px #173f3314;
    pointer-events:auto
}
.atlas-map-area>span {
    display:block;
    margin:0 0 3px;
    font-size:.6rem;
    font-weight:600;
    color:#627460
}
.atlas-map-area select {
    width:100%;
    min-width:0;
    padding:0 14px 0 0;
    border:0;
    background:transparent;
    color:var(--ink);
    font:600 .76rem/1.6 var(--sans)
}
.atlas-map-tools {
    display:flex;
    gap:6px;
    flex-shrink:0;
    pointer-events:auto
}
.atlas-tool {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:43px;
    border:1px solid #cbd8c9;
    border-radius:8px;
    padding:10px 12px;
    background:#fffef9f5;
    color:var(--forest);
    box-shadow:0 3px 16px #173f3314;
    font:600 .72rem/1.25 var(--sans)
}
.atlas-tool[aria-expanded=true] {
    background:#244f3d;
    border-color:#244f3d;
    color:#fffef4
}
.atlas-tool svg {
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round
}
.atlas-expand { width:43px;padding:9px }
.atlas-control-panel {
    position:absolute;
    top:75px;
    right:14px;
    z-index:605;
    width:294px;
    max-width:calc(100% - 28px);
    border:1px solid #cbd8c9;
    border-radius:10px;
    background:#fffef9f7;
    box-shadow:0 8px 30px #183e3224;
    overflow:hidden
}
.atlas-control-panel>header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 10px 8px 16px;
    border-bottom:1px solid #e2e8dc
}
.atlas-control-panel>header>strong { font-size:.79rem;font-weight:600 }
.atlas-control-panel>header>button {
    border:0;
    background:transparent;
    color:#536d56;
    width:33px;
    height:33px;
    border-radius:5px;
    font:400 25px/1 var(--sans)
}
.atlas-control-panel>header>button:hover { background:#e7eddf }
.atlas-control-scroll {
    padding:14px 16px 17px;
    max-height:360px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#a9b9a0 transparent
}
.atlas-control-scroll fieldset { border:0;padding:0;margin:0 0 18px;min-width:0 }
.atlas-control-scroll legend {
    display:block;
    padding:0;
    margin:0 0 10px;
    font-size:.63rem;
    font-weight:700;
    letter-spacing:.035em;
    color:#536a50
}
.atlas-control-panel .atlas-basemaps { display:grid;grid-template-columns:1fr 1fr;gap:7px }
.atlas-control-panel .atlas-basemap { padding:7px 8px;font-size:.67rem;line-height:1.3;min-height:40px;text-align:left }
.atlas-control-panel .atlas-basemap>span { flex:0 0 22px }
.atlas-view-choices>p { font-size:.58rem;line-height:1.5;margin:10px 0 0;color:#6c7866 }
.atlas-layer-options label {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:5px 0;
    cursor:pointer;
    font-size:.72rem;
    line-height:1.4
}
.atlas-layer-options input { flex:0 0 15px;width:15px;height:15px;margin:0;accent-color:#38664c }
.atlas-layer-options label>span { min-width:0 }
.atlas-layer-options small { display:block;font-size:.57rem;color:#6a7b64;margin-top:2px }
.atlas-layer-options .is-unavailable small { color:#955d28 }
.atlas-layer-swatch {
    display:block;
    width:16px;
    height:12px;
    flex:0 0 16px;
    border:1px solid #9eb599;
    border-radius:2px;
    background:#bfd3b0
}
.atlas-layer-swatch.outline,.atlas-layer-swatch.reserve { background:#dce5d14d;border:2px solid #497455 }
.atlas-layer-swatch.trail { background:transparent;height:0;border:0;border-top:2px dashed #a45629;border-radius:0 }
.atlas-layer-swatch.land { background:#e3ebd4 }
.atlas-layer-swatch.water { background:#bbdce0;border-color:#8bbec3 }
.atlas-layer-swatch.river { height:3px;background:#86b7c0;border:0;transform:rotate(-12deg) }
.atlas-layer-swatch.wetland { background:repeating-linear-gradient(-45deg,#bed9c8 0 2px,#deead7 2px 4px) }
.atlas-layer-swatch.road { height:3px;background:#b2ae98;border:0;transform:rotate(-12deg) }
.atlas-layer-swatch.reef { background:#8fc8b3;border-color:#559f92 }
.atlas-layer-swatch.depth { background:transparent;border-width:1px 0;border-color:#6398ad;transform:rotate(-12deg) }
.atlas-layer-swatch.reserve { border-color:#886889 }
.atlas-layer-swatch.heat { background:linear-gradient(90deg,#d9c987,#da8450,#b94d63);border:0 }
.atlas-layer-swatch.storm { height:0;border:0;border-top:2px dashed #9b718b;transform:rotate(-12deg) }
.atlas-layer-swatch.survey { border-radius:50%;width:11px;height:11px;flex-basis:11px;margin-inline:2.5px;background:#a18ab5;border-color:#685786 }
.atlas-class-key {
    margin:3px 0 9px 23px;
    padding-left:10px;
    border-left:1px solid #d9e1d1;
    display:grid;
    gap:4px
}
.atlas-class-key>span { display:flex;align-items:center;gap:7px;font-size:.56rem;color:#65765d }
.atlas-class-key i { flex:0 0 11px;height:8px;border-radius:1px;background:var(--swatch) }
.atlas-map-symbols { display:grid;grid-template-columns:1fr 1fr;gap:8px 6px;border-top:1px solid #dce4d5;padding-top:13px }
.atlas-map-symbols>strong { grid-column:1/-1;font-size:.65rem;margin-bottom:3px }
.atlas-map-symbols>span { display:flex;align-items:center;gap:6px;font-size:.57rem }
.atlas-map-symbols i { display:grid;place-items:center;width:16px;height:16px;font:600 10px/1 var(--sans);font-style:normal;color:white;background:#204f37;border-radius:50% }
.atlas-map-symbols .experience { background:#286d85 }
.atlas-map-symbols .gateway { background:#a35d33 }
.atlas-map-symbols .science { background:#68618b }
.atlas-control-sources { display:block;font-size:.61rem;margin-top:16px;text-underline-offset:3px }
.atlas-map-navigation {
    position:absolute;
    left:14px;
    bottom:128px;
    z-index:500;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    max-width:calc(100% - 76px)
}
.atlas-map-navigation button,.atlas-map-navigation a {
    display:inline-flex;
    gap:6px;
    align-items:center;
    border:1px solid #cbd8c9;
    border-radius:6px;
    padding:8px 10px;
    min-height:34px;
    background:#fffef9f5;
    color:var(--forest);
    font:600 .64rem/1.3 var(--sans);
    text-decoration:none;
    box-shadow:0 3px 12px #173f3312
}
.atlas-map-navigation .atlas-find-mobile { display:none }
.atlas-map-navigation button:hover,.atlas-tool:hover { filter:brightness(.97) }
.atlas-map-frame .bas-map-canvas { height:clamp(580px,76vh,780px) }
.atlas-workspace .atlas-discovery { max-height:calc(clamp(580px,76vh,780px) + 44px) }
.atlas-map-peek { max-width:min(390px,calc(100% - 80px));border-color:#d3ddce;left:14px;bottom:38px }
.atlas-map-peek>div { min-width:0 }
.atlas-map-peek strong { font-size:.97rem }
.atlas-map-note a { color:inherit;text-underline-offset:2px }

/* Native full-screen expands the same frame instead of creating a second map. */
.atlas-map-frame:fullscreen { width:100vw;height:100vh;background:#d3e9e6 }
.atlas-map-frame:fullscreen .bas-map-canvas { width:100%;height:100%;min-height:0 }
.atlas-map-frame:fullscreen .atlas-control-scroll { max-height:calc(100vh - 250px) }

/* Dated source layers stay discoverable in ordinary HTML, with original downloads. */
.atlas-layer-library { display:grid;grid-template-columns:1fr 1.2fr;gap:70px;padding:0 0 70px }
.atlas-layer-library h2 { margin:18px 0;font-size:clamp(2rem,3vw,3.1rem) }
.atlas-layer-library p { font-size:.85rem;color:var(--muted);line-height:1.7 }
.atlas-layer-catalog details { border-top:1px solid var(--atlas-border);padding:16px 0 }
.atlas-layer-catalog summary { font-size:.88rem;font-weight:600;cursor:pointer }
.atlas-layer-catalog p { margin:12px 0 }
.atlas-layer-catalog small { display:block;font-size:.65rem;color:var(--muted);line-height:1.6 }
.atlas-layer-catalog details>div { display:flex;flex-wrap:wrap;gap:15px;margin-top:13px;font-size:.7rem }

/* On narrow maps the control panel leaves a useful lower map area visible.
   The search/list jump remains on the map instead of offscreen above it. */
@media(max-width:1100px) and (min-width:801px) {
    .atlas-map-dock { flex-wrap:wrap }
    .atlas-map-area { flex-basis:100%;max-width:none }
    .atlas-map-tools { margin-left:auto }
    .atlas-control-panel { top:123px }
    .atlas-control-scroll { max-height:285px }
}
@media(max-width:800px) {
    .atlas-map-frame .bas-map-canvas { height:600px }
    .atlas-workspace .atlas-discovery { max-height:600px }
    .atlas-map-dock { inset:12px 12px auto }
    .atlas-control-panel { right:12px;max-width:calc(100% - 24px) }
    .atlas-control-scroll { max-height:285px }
    .atlas-map-navigation .atlas-find-mobile { display:inline-flex }
    .atlas-layer-library { grid-template-columns:1fr;gap:20px;padding-bottom:45px }
}
@media(max-width:540px) {
    .atlas-map-dock { flex-wrap:wrap;gap:8px }
    .atlas-map-area { flex-basis:100%;max-width:none;padding:8px 11px }
    .atlas-map-tools { margin-left:auto }
    .atlas-tool { min-height:38px;padding:8px 10px;font-size:.68rem }
    .atlas-expand { width:38px;padding:8px }
    .atlas-control-panel { top:116px;width:272px }
    .atlas-control-scroll { max-height:225px;padding:12px 14px }
    .atlas-control-panel>header { padding:5px 8px 5px 14px }
    .atlas-map-navigation { left:12px;bottom:122px;max-width:calc(100% - 24px) }
    .atlas-map-navigation button,.atlas-map-navigation a { font-size:.58rem;padding:7px 8px;min-height:33px }
    .atlas-map-peek { left:12px;max-width:calc(100% - 74px);padding:9px;gap:9px }
    .atlas-map-peek strong { font-size:.85rem }
    .atlas-map-peek a { font-size:.6rem }
    .atlas-map-peek small { font-size:.53rem }
    .atlas-map-frame .bas-map-canvas { height:590px }
    .atlas-map-frame:fullscreen .bas-map-canvas { height:100% }
    .atlas-map-frame:fullscreen .atlas-control-scroll { max-height:min(42vh,300px) }
}

/* Additional geometry keys share the same restrained source-symbol vocabulary. */
.atlas-layer-swatch.coast { height:2px;background:#90b7ab;border:0;transform:rotate(-12deg) }
.atlas-layer-swatch.heritage { width:10px;height:10px;flex-basis:10px;margin-inline:3px;background:#e4ce82;border-color:#8c743e;transform:rotate(45deg) }

/* Embedded browsers can block native full-screen. This equivalent expanded
   frame keeps all controls available while JS restores scroll/focus on exit. */
.atlas-map-frame.is-expanded { position:fixed;inset:0;width:100vw;height:100dvh;z-index:100000;background:#d3e9e6 }
.atlas-map-frame.is-expanded .bas-map-canvas { width:100%;height:100%;min-height:0 }
.atlas-map-frame.is-expanded .atlas-control-scroll { max-height:calc(100dvh - 255px) }
.atlas-layer-swatch.label { border:0;background:none;position:relative }
.atlas-layer-swatch.label::before { content:'Aa';position:absolute;top:-3px;font:600 11px/1.5 var(--sans);color:#536d56 }
.atlas-layer-swatch.heritage { border-radius:50%;transform:none }
@media(max-width:540px) { .atlas-map-frame.is-expanded .atlas-control-scroll { max-height:min(42dvh,300px) } }
