/* ===== ORIGINAL: style-v23-11.css ===== */
* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #081820;
}

button,
input {
    font: inherit;
}

.app {
    display: grid;
    grid-template-columns: 190px 1fr;

}

.sidebar {
    position: relative;
    z-index: 20;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 24px 18px;

    background: #0b2535;
    color: white;

    box-shadow: 5px 0 24px rgba(0, 0, 0, 0.16);
}

.sidebar h1 {
    margin: 0;
    padding: 4px 8px;

    font-size: 20px;
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -0.02em;
}

nav {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 30px;
}

.sidebar button {
    width: 100%;

    padding: 11px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #dbe6eb;

    text-align: left;
    cursor: pointer;

    transition:
        background 120ms ease,
        color 120ms ease;
}

.sidebar button:hover,
.sidebar button.active {
    background: rgba(255, 255, 255, 0.09);
    color: white;
}

.sidebar-footer {
    padding: 8px;

    color: #8da7b3;
    font-size: 12px;
}

.content {
    min-width: 0;

    display: grid;
    grid-template-rows: 70px 1fr;

    background: #081820;
}

.topbar {
    position: relative;
    z-index: 18;

    display: flex;
    align-items: center;

    padding: 14px 24px;

    background: #081820;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar input {
    width: min(420px, 60vw);

    padding: 10px 16px;

    border: 1px solid #34505f;
    border-radius: 999px;

    outline: none;

    background: rgba(255, 255, 255, 0.025);
    color: white;
}

.topbar input:focus {
    border-color: #678593;
}

.topbar input::placeholder {
    color: #8ca1ab;
}

.style-lab-toggle {

    padding: 9px 13px;

    border: 1px solid #34505f;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.035);
    color: #e4eef2;

    cursor: pointer;
}

.style-lab-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.map-area {
    position: relative;
    min-height: 0;
}

#map {
    position: absolute;
    inset: 0;
}

.maplibregl-ctrl-group {
    overflow: hidden;
    border-radius: 10px !important;
}


/* =========================================================
   STYLE LAB
   ========================================================= */

.style-lab {
    position: absolute;
    z-index: 15;

    top: 16px;
    right: 64px;

    width: 350px;
    max-height: calc(100% - 32px);

    overflow-y: auto;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;

    background: rgba(8, 24, 32, 0.94);
    color: #eaf2f4;

    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);

    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.style-lab.hidden {
    pointer-events: none;
    opacity: 0;
    transform: translateX(14px);
}

.style-lab-header {
    position: sticky;
    top: -14px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: -14px -14px 10px;
    padding: 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    background: rgba(8, 24, 32, 0.97);
}

.style-lab-title {
    margin: 0;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.style-lab-subtitle {
    margin-top: 3px;

    color: #8fa6b0;
    font-size: 11px;
}

.style-section {
    margin-top: 10px;
    padding-top: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.style-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.style-section-title {
    margin: 0 0 8px;

    color: #9fb4bd;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
}

.style-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;

    min-height: 32px;
}

.style-row + .style-row {
    margin-top: 4px;
}

.style-label {
    min-width: 0;

    color: #e1eaed;
    font-size: 12px;
}

.style-control-pair {
    display: flex;
    align-items: center;
    gap: 7px;
}

.style-value {
    width: 44px;

    color: #8fa6b0;

    font-size: 11px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.style-lab input[type="range"] {
    width: 112px;
    accent-color: #87a6b3;
}

.style-lab input[type="color"] {
    width: 34px;
    height: 24px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;

    background: transparent;
    cursor: pointer;
}

.style-lab input[type="checkbox"] {
    width: 16px;
    height: 16px;

    accent-color: #87a6b3;
}

.style-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    margin-top: 14px;
}

.style-actions button {
    padding: 9px 10px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.055);
    color: #eaf2f4;

    cursor: pointer;
}

.style-actions button:hover {
    background: rgba(255, 255, 255, 0.10);
}

.style-status {
    min-height: 18px;
    margin-top: 8px;

    color: #90a7b0;
    font-size: 11px;
}

.style-warning {
    margin-top: 10px;
    padding: 9px 10px;

    border-radius: 9px;

    background: rgba(255, 190, 90, 0.08);
    color: #c9b28c;

    font-size: 11px;
    line-height: 1.4;
}


@media (max-width: 900px) {
    .style-lab {
        right: 12px;
        width: min(350px, calc(100% - 24px));
    }
}

@media (max-width: 760px) {
    .app {
        grid-template-columns: 72px 1fr;
    }

    .sidebar {
        padding: 20px 8px;
    }

    .sidebar h1 {
        font-size: 0;
    }

    .sidebar h1::after {
        content: "CI";
        font-size: 18px;
    }

    .sidebar button {
        padding: 10px 8px;
        font-size: 10px;
    }

    .sidebar-footer {
        display: none;
    }

    .topbar {
        padding-inline: 14px;
    }

    .topbar input {
        width: 100%;
    }

    .style-lab-toggle {
    }
}


.coastline-warning:empty {
    display: none;
}

.coastline-warning.important {
    background: rgba(255, 92, 92, 0.12);
    color: #ffd0d0;
}

.coastline-warning.ok {
    background: rgba(110, 190, 145, 0.10);
    color: #b9dcc8;
}


/* =========================================================
   PRODUCT MENU V5
   ========================================================= */

:root {
    --sidebar-width: 184px;
    --ui-bg: #0b2535;
    --ui-bg-deep: #081820;
    --ui-panel: rgba(8, 24, 32, 0.92);
    --ui-border: rgba(255, 255, 255, 0.09);
    --ui-text: #eff5f6;
    --ui-muted: #8fa8b3;
    --ui-accent: #dfccb0;
}

.app {
    grid-template-columns: var(--sidebar-width) 1fr;
}

.sidebar {
    padding: 22px 14px 16px;
    background:
        linear-gradient(
            180deg,
            #0b2a3a 0%,
            #091f2d 100%
        );
}

.sidebar-main {
    min-width: 0;
}

.brand {
    display: block;
    padding: 4px 10px 12px;
    color: white;
    text-decoration: none;
}

.brand-kicker {
    display: block;
    margin-bottom: 2px;

    color: #7f9aa6;

    font-weight: 700;
}

.brand-name {
    display: block;

    color: #f0e3cc;

    font-weight: 760;
}

.main-nav {
    margin-top: 26px;
    gap: 5px;
}

.sidebar .nav-button {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;

    padding: 10px 10px;

    border-radius: 10px;

    color: #cddce2;

}

.sidebar .nav-button:hover {
    background: rgba(255, 255, 255, 0.055);
}

.sidebar .nav-button.active {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

.nav-icon {
    display: inline-grid;
    place-items: center;

    width: 22px;
    height: 22px;

    color: #91aab5;
    line-height: 1;
}

.nav-button.active .nav-icon {
    color: #e3cfaf;
}

.live-icon {
}

.sidebar-footer {
    display: grid;
    gap: 3px;
    padding: 8px 4px 0;
}

.footer-button {
    width: 100%;
    padding: 7px 9px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #9cb2bc;

    cursor: pointer;
}

.footer-button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.footer-muted {
    color: #617e8a;
}

.content {
    grid-template-rows: 62px 1fr;
}

.topbar {
    padding: 10px 18px;
}

.search-shell {
    display: flex;
    align-items: center;

    width: min(470px, 62vw);
    min-width: 240px;

    padding: 0 12px;

    border: 1px solid #2f4c5a;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);
}

.search-icon {
    flex: 0 0 auto;

    margin-right: 7px;

    color: #8da5af;
    font-size: 17px;
}

.topbar .search-shell input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;

    padding: 9px 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.topbar .search-shell:focus-within {
    border-color: #6c8b98;
    background: rgba(255, 255, 255, 0.04);
}

.search-shortcut {
    flex: 0 0 auto;

    margin-left: 10px;

    color: #617b86;

    font-size: 9px;
    letter-spacing: 0.04em;
}

.mobile-brand {
    display: none;
}

.style-lab-toggle {
    padding: 8px 12px;
    letter-spacing: 0.08em;
}


/* =========================================================
   CONTEXT / EXPLORE PANEL
   ========================================================= */

.explore-panel {
    position: absolute;
    z-index: 14;

    top: 16px;
    left: 16px;

    width: min(330px, calc(100% - 32px));
    max-height: calc(100% - 32px);

    overflow-y: auto;

    border: 1px solid var(--ui-border);
    border-radius: 18px;

    background: var(--ui-panel);
    color: var(--ui-text);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(16px);

    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.explore-panel.closed {
    pointer-events: none;
    opacity: 0;
    transform: translateX(-12px);
}

.explore-panel-header {
    position: sticky;
    top: 0;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding: 17px 17px 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    background: rgba(8, 24, 32, 0.96);
}

.panel-eyebrow {
    margin-bottom: 4px;

    color: #819da9;

    font-weight: 750;
    letter-spacing: 0.19em;
}

.panel-title {
    margin: 0;

    color: #f4ead9;

    font-weight: 680;
    letter-spacing: -0.015em;
}

.panel-close {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
    color: #9cb1ba;

    line-height: 1;
    cursor: pointer;
}

.panel-close:hover {
    background: rgba(255, 255, 255, 0.10);
    color: white;
}

.explore-panel-content {
    padding: 15px 17px 18px;
}

.panel-intro {
    margin: 0 0 15px;

    color: #a5bac3;

    font-size: 12px;
    line-height: 1.55;
}

.panel-section-title {
    margin: 19px 0 9px;

    color: #718f9b;

    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.quick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    min-height: 88px;
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.045);
    color: white;

    text-align: left;
    cursor: pointer;
}

.quick-card:hover {
    background: rgba(255, 255, 255, 0.075);
}

.quick-card-kicker {
    margin-bottom: auto;

    color: #87a5b0;

    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.15em;
}

.quick-card strong {
    color: #f1e3cc;
    font-size: 12px;
}

.quick-card > span:last-child {
    color: #8ea6b0;
    font-size: 10px;
}

.island-grid,
.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.island-chip,
.category-card {
    padding: 9px 10px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.035);
    color: #dce8ec;

    text-align: left;
    font-size: 11px;
    cursor: pointer;
}

.island-chip:hover,
.category-card:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.12);
    color: white;
}

.menu-list {
    display: grid;
    gap: 5px;
}

.menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    padding: 10px 10px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: #e4edef;

    text-align: left;
    cursor: pointer;
}

.menu-row:hover {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.045);
}

.menu-row strong {
    display: block;
    margin-bottom: 2px;

    color: #e7eff1;

    font-size: 11px;
    font-weight: 620;
}

.menu-row small {
    display: block;

    color: #7e99a4;

    font-size: 9px;
}

.menu-arrow {
    color: #6e8c98;
    font-size: 18px;
}

.empty-state {
    padding: 24px 10px;
    text-align: center;
}

.empty-heart {
    margin-bottom: 10px;

    color: #d8c6aa;

    font-size: 30px;
}

.empty-state strong {
    color: #f1e6d4;
    font-size: 12px;
}

.empty-state p {
    max-width: 240px;
    margin: 7px auto 0;

    color: #88a1ac;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   MOBILE NAV
   ========================================================= */

@media (max-width: 760px) {

    .app {
    }

    .sidebar {
        z-index: 30;

        right: 0;

        height: 66px;

        padding: 5px 8px 7px;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);

        box-shadow:
            0 -10px 30px rgba(0, 0, 0, 0.20);
    }

    .sidebar-main {
        height: 100%;
    }

    .brand,
    .sidebar-footer {
        display: none;
    }

    .main-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;

        height: 100%;
        margin: 0;
    }

    .sidebar .nav-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;

        padding: 4px 2px;


    }

    .nav-icon {
        width: auto;
        height: 21px;

        font-size: 17px;
    }

    .content {
        height: calc(100vh - 66px);
    }

    .topbar {
        gap: 8px;
        padding: 8px 10px;
    }

    .mobile-brand {
        display: block;

        color: #eadcc3;

        font-weight: 760;
        letter-spacing: 0.09em;
    }

    .search-shell {
        flex: 1 1 auto;
        width: auto;
    }

    .search-shortcut {
        display: none;
    }

    .style-lab-toggle {
        display: none;
    }

    .explore-panel {
        top: 10px;

        width: calc(100% - 20px);
        max-height: calc(100% - 20px);
    }

    .style-lab {
        right: 10px;
        left: 10px;

        width: auto;
        max-height: calc(100% - 20px);
    }
}


/* =========================================================
   ISLAND-FIRST NAVIGATION V6
   ========================================================= */

.back-to-canarias {
    margin: 0 0 10px;
    padding: 0;

    border: 0;

    background: transparent;
    color: #8ea7b2;

    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.back-to-canarias:hover {
    color: #f0e4d0;
}

.selected-island-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 14px;
    padding: 6px 9px;

    border: 1px solid rgba(226, 205, 174, 0.16);
    border-radius: 999px;

    background: rgba(226, 205, 174, 0.07);
    color: #eadcc3;

    font-size: 10px;
    font-weight: 650;
}

.selected-island-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #dfccb0;

    box-shadow:
        0 0 0 3px rgba(223, 204, 176, 0.08);
}


/* =========================================================
   DEMO PLACES V7
   ========================================================= */

.demo-notice {
    display: inline-block;

    margin: 0 0 12px;
    padding: 5px 7px;

    border: 1px solid rgba(143, 210, 223, 0.18);
    border-radius: 6px;

    background: rgba(143, 210, 223, 0.06);
    color: #8fcbd6;

    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.13em;
}

.place-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.place-filter {
    padding: 9px 10px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.035);
    color: #bdd0d7;

    text-align: left;
    font-size: 10px;
    cursor: pointer;
}

.place-filter:hover {
    background: rgba(255, 255, 255, 0.07);
    color: white;
}

.place-filter.active {
    border-color: rgba(224, 201, 165, 0.22);
    background: rgba(224, 201, 165, 0.10);
    color: #f0e2cb;
}

.place-demo-note {
    margin: 12px 0 0;

    color: #738f9a;

    font-size: 9px;
    line-height: 1.5;
}


/* MapLibre popup styled as a future place card */

.maplibregl-popup-content {
    padding: 0 !important;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px !important;

    background: #0b2735 !important;
    color: #eaf1f3;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.32);
}

.maplibregl-popup-tip {
    border-top-color: #0b2735 !important;
    border-bottom-color: #0b2735 !important;
}

.maplibregl-popup-close-button {
    top: 5px !important;
    right: 7px !important;

    color: #8fa8b2 !important;

    font-size: 18px !important;
}

.place-popup {
    min-width: 210px;
    padding: 14px 15px 15px;
}

.place-popup-kicker {
    margin-bottom: 5px;

    color: #84a9b5;

    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.place-popup h3 {
    margin: 0 24px 6px 0;

    color: #f0e2ca;

    font-size: 14px;
    line-height: 1.25;
}

.place-popup p {
    margin: 0;

    color: #9db1b9;

    font-size: 10px;
    line-height: 1.5;
}

.place-popup-button {
    margin-top: 11px;
    padding: 7px 10px;

    border: 1px solid rgba(231, 214, 183, 0.16);
    border-radius: 8px;

    background: rgba(231, 214, 183, 0.08);
    color: #eadcc4;

    font-size: 9px;
    cursor: pointer;
}

.place-popup-button:hover {
    background: rgba(231, 214, 183, 0.13);
}


/* =========================================================
   V8 — LIVE WEATHER API DEMO
   ========================================================= */

.weather-api-card {
    margin: 0 0 18px;
    padding: 13px;

    border: 1px solid rgba(143, 210, 223, 0.12);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(143, 210, 223, 0.055),
            rgba(255, 255, 255, 0.025)
        );
}

.weather-api-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.weather-api-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.weather-api-head strong {
    color: #f0e2ca;
    font-size: 12px;
}

.weather-api-kicker {
    color: #75b7c5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.weather-load-button {
    padding: 7px 10px;

    border: 1px solid rgba(143, 210, 223, 0.20);
    border-radius: 8px;

    background: rgba(143, 210, 223, 0.08);
    color: #a9d5dd;

    font-size: 9px;
    cursor: pointer;
}

.weather-load-button:hover {
    background: rgba(143, 210, 223, 0.13);
}

.weather-load-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.weather-api-help {
    margin: 10px 0 12px;

    color: #77949f;
    font-size: 9px;
    line-height: 1.5;
}

.weather-api-result {
    min-height: 38px;

    color: #9bb1b9;
    font-size: 9px;
    line-height: 1.45;
}

.weather-loading {
    padding: 10px 0;
    color: #85b7c2;
}

.weather-error {
    padding: 10px;

    border: 1px solid rgba(220, 126, 126, 0.18);
    border-radius: 9px;

    background: rgba(220, 126, 126, 0.06);
    color: #e1aaaa;
}

.weather-error small {
    display: block;
    margin-top: 4px;
    color: #9f8585;
}

.weather-location {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;

    color: #e6d8bf;
    font-size: 10px;
    font-weight: 700;
}

.weather-location span {
    color: #81abb6;
    font-size: 8px;
    font-weight: 600;
    text-align: right;
}

.weather-temperature {
    margin-top: 5px;

    color: #f2e5cc;

    font-size: 31px;
    font-weight: 650;
    letter-spacing: -0.05em;
}

.weather-temperature span {
    margin-left: 2px;
    color: #9ab0b8;
    font-size: 13px;
    letter-spacing: 0;
}

.weather-feels {
    margin-top: -2px;
    color: #819aa4;
    font-size: 8px;
}

.weather-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;

    margin-top: 13px;
}

.weather-stat {
    padding: 8px 9px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.025);
}

.weather-stat span,
.weather-stat strong {
    display: block;
}

.weather-stat span {
    color: #718e99;
    font-size: 7px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.weather-stat strong {
    margin-top: 2px;
    color: #cbdadd;
    font-size: 10px;
}

.weather-source {
    margin-top: 10px;

    color: #5f7c87;
    font-size: 7px;
    line-height: 1.4;
}


/* =========================================================
   V9 — MAP LAYERS, NOT DASHBOARDS
   ========================================================= */

.map-layer-explainer {
    margin: 0 0 14px;
    padding: 10px 11px;

    border: 1px solid rgba(143, 210, 223, 0.10);
    border-radius: 10px;

    background: rgba(143, 210, 223, 0.035);
    color: #8faab4;

    font-size: 9px;
    line-height: 1.55;
}

.map-layer-explainer strong {
    color: #d7e3e6;
}

.map-layer-row,
.base-layer-row {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 7px;
    padding: 9px 10px;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.025);
}

.map-layer-row {
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.map-layer-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.map-layer-row.active {
    border-color: rgba(143, 210, 223, 0.20);
    background: rgba(143, 210, 223, 0.07);
}

.map-layer-row.disabled {
    opacity: 0.38;
    cursor: default;
}

.map-layer-row > span:first-child,
.base-layer-row > div {
    min-width: 0;
}

.map-layer-row strong,
.base-layer-row strong {
    display: block;
    color: #d8e4e7;
    font-size: 10px;
}

.map-layer-row small,
.base-layer-row small {
    display: block;
    margin-top: 2px;
    color: #708d98;
    font-size: 8px;
}

.layer-switch {
    width: 27px;
    height: 16px;
    flex: 0 0 auto;

    position: relative;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.045);
}

.layer-switch span {
    position: absolute;
    top: 2px;
    left: 2px;

    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: #78919a;

    transition:
        transform 140ms ease,
        background 140ms ease;
}

.map-layer-row.active .layer-switch {
    border-color: rgba(143, 210, 223, 0.30);
    background: rgba(143, 210, 223, 0.11);
}

.map-layer-row.active .layer-switch span {
    transform: translateX(11px);
    background: #9fd8e1;
}

.base-layer-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;

    border: 1px solid #244b59;
    border-radius: 50%;

    background: #e7d6b7;
}

.layer-note {
    margin: 11px 2px 0;

    color: #688590;
    font-size: 8px;
    line-height: 1.55;
}


/* Weather badge popup */

.weather-map-popup {
    min-width: 220px;
    padding: 14px 15px 15px;
}

.weather-map-popup-source {
    margin-bottom: 4px;

    color: #7faab5;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.weather-map-popup h3 {
    margin: 0;

    color: #f0e2ca;
    font-size: 13px;
}

.weather-map-popup-temp {
    margin: 3px 0 8px;

    color: #f5e9d4;
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -0.05em;
}

.weather-map-popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.weather-map-popup-grid > div {
    padding: 6px 7px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.025);
}

.weather-map-popup-grid span,
.weather-map-popup-grid strong {
    display: block;
}

.weather-map-popup-grid span {
    color: #708d98;
    font-size: 7px;
}

.weather-map-popup-grid strong {
    margin-top: 1px;
    color: #ccdadd;
    font-size: 9px;
}

.weather-map-popup small {
    display: block;
    margin-top: 9px;

    color: #5f7d87;
    font-size: 7px;
}


/* V10 marker — intentionally visible while prototyping */
.prototype-version {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 25;

    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: rgba(7, 30, 41, 0.72);
    color: rgba(220, 235, 238, 0.55);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.10em;

    pointer-events: none;
}


/* =========================================================
   V11 — MAP FIRST
   ========================================================= */

/*
The navigation rail stays.
The content drawer is deliberately small and only opens
when the user needs tools.
*/

.explore-panel {
    top: 56px;

    width: min(286px, calc(100% - 24px));
    max-height: calc(100% - 68px);

    border-radius: 14px;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.25);
}

.explore-panel-header {
    padding: 12px 13px 10px;
}

.panel-eyebrow {
    margin-bottom: 2px;
    font-size: 8px;
}

.panel-title {
}

.panel-close {
    width: 25px;
    height: 25px;
    font-size: 17px;
}

.explore-panel-content {
    padding: 11px 13px 13px;
}

.panel-intro.compact {
    margin-bottom: 10px;
    font-size: 10px;
}

.island-grid {
    grid-template-columns: 1fr;
    gap: 5px;
}

.island-chip {
    padding: 8px 9px;
    font-size: 10px;
}

.tool-drawer-intro {
    margin: 0 0 9px;
    color: #78939e;
    font-size: 9px;
    line-height: 1.45;
}

.map-layer-row.compact,
.base-layer-row.compact {
    min-height: 43px;
    margin-bottom: 5px;
    padding: 7px 8px;

    border-radius: 10px;
}

.map-layer-row.compact {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.base-layer-row.compact {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.layer-row-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.035);
    color: #91b9c2;
}

.layer-row-icon svg {
    width: 17px;
    height: 17px;
}

.city-layer-icon {
    color: #e7d6b7;
    font-size: 10px;
}

.layer-row-copy {
    min-width: 0;
}

.layer-row-copy strong {
    display: block;

    color: #dce7ea;
    font-size: 10px;
    font-weight: 650;
}

.layer-row-copy small {
    display: block;

    margin-top: 1px;

    color: #69848f;
    font-size: 8px;
}

.map-layer-row.compact.active .layer-row-icon {
    border-color: rgba(143, 210, 223, 0.18);
    background: rgba(143, 210, 223, 0.08);
    color: #a8dbe2;
}

.compact-placeholder {
    padding: 10px 2px 4px;
    color: #88a0aa;
}

.compact-placeholder > span {
    display: block;
    margin-bottom: 7px;

    color: #d7c6a8;
    font-size: 22px;
}

.compact-placeholder strong {
    display: block;
    color: #e7ddcb;
    font-size: 12px;
}

.compact-placeholder p {
    margin: 5px 0 0;
    font-size: 9px;
    line-height: 1.45;
}


/* Small persistent island context instead of a permanent big panel. */

.island-context {
    position: absolute;
    z-index: 13;

    top: 12px;
    left: 12px;

    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 32px;
    padding: 0 10px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;

    background: rgba(7, 29, 39, 0.84);
    color: #9db3bb;

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(12px);

    font-size: 9px;
    cursor: pointer;
}

.island-context.hidden {
    display: none;
}

.island-context:hover {
    background: rgba(9, 36, 48, 0.94);
}

.island-context strong {
    color: #eadcc4;
    font-size: 10px;
}

.island-context-back {
    color: #7d9aa5;
}

.island-context-separator {
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.11);
}


/* =========================================================
   WEATHER MARKERS
   ========================================================= */

.weather-marker {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-width: 49px;
    height: 34px;
    padding: 0 8px 0 6px;

    border: 1px solid rgba(209, 232, 236, 0.45);
    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 57, 72, 0.97),
            rgba(9, 38, 51, 0.97)
        );

    color: #f1dfb8;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.26),
        0 0 0 4px rgba(100, 176, 192, 0.07);

    backdrop-filter: blur(8px);

    cursor: pointer;

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        border-color 120ms ease;
}

.weather-marker:hover {
    z-index: 5 !important;

    transform: translateY(-2px) scale(1.04);

    border-color: rgba(231, 239, 233, 0.68);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.30),
        0 0 0 5px rgba(100, 176, 192, 0.10);
}

.weather-marker-icon {
    width: 19px;
    height: 19px;


    color: #f0c878;
}

.weather-marker-icon svg {
    width: 19px;
    height: 19px;
    overflow: visible;
}

.weather-marker-temp {

    letter-spacing: -0.035em;
}

.weather-marker-name {

    top: 39px;

    max-width: 120px;


    background: rgba(7, 29, 39, 0.82);


    transform: translateX(-50%) translateY(-2px);




    transition:
        opacity 100ms ease,
        transform 100ms ease;
}

.weather-marker:hover .weather-marker-name,
.weather-marker.show-name .weather-marker-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* =========================================================
   WEATHER POPUP V11
   ========================================================= */

.weather-popup-v11 {
    width: 224px;
    padding: 13px;
}

.weather-popup-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.weather-popup-icon {
    width: 34px;
    height: 34px;


    border: 1px solid rgba(240, 200, 120, 0.12);
    border-radius: 10px;

    background: rgba(240, 200, 120, 0.055);
}

.weather-popup-icon svg {
    width: 23px;
    height: 23px;
}

.weather-popup-city {
    color: #eee2ce;

    font-size: 11px;
    font-weight: 680;
}

.weather-popup-condition {
    margin-top: 2px;

    color: #7696a1;

    font-size: 8px;
}

.weather-popup-temp-v11 {
    color: #f4e6ce;

    font-size: 27px;
    font-weight: 680;
    letter-spacing: -0.05em;
}

.weather-popup-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;

    margin-top: 11px;
}

.weather-popup-metric {
    padding: 7px 8px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.024);
}

.weather-popup-metric span,
.weather-popup-metric strong {
    display: block;
}

.weather-popup-metric span {
    color: #698591;

    font-size: 7px;
}

.weather-popup-metric strong {
    margin-top: 2px;

    color: #cddadd;

    font-size: 9px;
}

.weather-popup-footer {
    margin-top: 9px;

    color: #526f7a;

    font-size: 7px;
}


/* Old V10 weather layer elements are not used in V11. */
.weather-map-popup,
.weather-map-popup-source,
.weather-map-popup-grid,
.weather-map-popup-temp {
    display: none;
}


/* Make the prototype marker reflect the current build. */
.prototype-version {
    opacity: 0.65;
}


/* Mobile: drawer becomes a bottom sheet-like compact card. */
@media (max-width: 760px) {

    .explore-panel {
        right: 10px;
        bottom: 10px;
        left: 10px;

    }

    .island-context {
        top: 10px;
        left: 10px;
    }

    .weather-marker {
        height: 31px;
        min-width: 45px;
    }

    .weather-marker-name {
        display: none;
    }
}


/* =========================================================
   V12 — COMPACT RAIL + FIT-ISLAND UX
   ========================================================= */

/* Permanent navigation rail: much narrower than v11. */
.app {
    grid-template-columns: 104px 1fr;
}

.sidebar {
    padding: 16px 10px 12px;
}

.brand {
    padding: 4px 5px 10px;
    text-align: center;
}

.brand-kicker {
    font-size: 7px;
    letter-spacing: 0.18em;
}

.brand-name {
    margin-top: 2px;

    font-size: 12px;
    letter-spacing: 0.08em;
}

.main-nav {
    gap: 4px;
    margin-top: 18px;
}

.sidebar .nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    min-height: 58px;

    padding: 7px 5px;

    text-align: center;

    font-size: 9px;
    font-weight: 580;
}

.nav-icon {
    width: 20px;
    height: 20px;

    font-size: 16px;
}

.live-icon {
    font-size: 8px;
}

.sidebar-footer {
    padding: 4px 0;
    text-align: center;
}

.footer-button {
    padding: 6px 2px;

    text-align: center;

    font-size: 8px;
}

.footer-muted {
    display: none;
}


/* Tiny floating tool palette. */
.explore-panel {
    top: 52px;
    left: 12px;

    width: 228px;
    max-height: none;

    overflow: visible;

    border-radius: 13px;
}

.explore-panel-header {
    position: static;

    align-items: center;

    padding: 10px 10px 8px;
}

.panel-eyebrow {
    display: none;
}

.panel-title {
    font-size: 13px;
}

.panel-close {
    width: 24px;
    height: 24px;
}

.explore-panel-content {
    padding: 8px 9px 9px;
}

.tool-drawer-intro,
.panel-intro.compact {
    display: none;
}

.compact-layer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.compact-layer-tile {
    position: relative;

    min-height: 67px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;

    padding: 8px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.026);
    color: #b9cbd1;

    font-size: 9px;
    font-weight: 620;

    cursor: pointer;
}

button.compact-layer-tile:hover {
    background: rgba(255, 255, 255, 0.055);
}

.compact-layer-tile.active {
    border-color: rgba(143, 210, 223, 0.22);
    background: rgba(143, 210, 223, 0.08);
    color: #e1ecee;
}

.compact-layer-tile.disabled {
    opacity: 0.34;
    cursor: default;
}

.compact-layer-tile.base {
    cursor: default;
}

.compact-layer-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    color: #8fb5be;
}

.compact-layer-icon svg {
    width: 19px;
    height: 19px;
}

.compact-layer-tile.active .compact-layer-icon {
    color: #b4dde3;
}

.compact-layer-check,
.compact-layer-dot,
.compact-layer-arrow {
    position: absolute;
    top: 8px;
    right: 8px;
}

.compact-layer-check {
    color: #e5cfaa;
    font-size: 10px;
}

.compact-layer-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #e5cfaa;
}


.compact-layer-arrow {
    color: #8fb5be;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}


.compact-layer-tile.panel-action .compact-layer-status {
    color: #a48f6d;
}


/* =========================================================
   WEATHER MARKERS V12
   Outer shell must NEVER receive visual transforms.
   ========================================================= */

.weather-marker-shell {
    width: 0;
    height: 0;

    overflow: visible;

    pointer-events: none;
}

.weather-marker-card {
    position: absolute;
    left: 0;
    bottom: 0;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    min-width: 48px;
    height: 31px;

    padding: 0 8px 0 6px;

    border: 1px solid rgba(217, 235, 238, 0.42);
    border-radius: 999px;

    background: rgba(10, 43, 56, 0.96);
    color: #f0c977;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.24),
        0 0 0 3px rgba(111, 184, 197, 0.06);

    transform:
        translateX(-50%);

    pointer-events: auto;
    cursor: pointer;

    transition:
        scale 120ms ease,
        box-shadow 120ms ease,
        border-color 120ms ease;
}

.weather-marker-card:hover {
    scale: 1.06;

    border-color: rgba(234, 241, 235, 0.65);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.30),
        0 0 0 4px rgba(111, 184, 197, 0.09);
}

.weather-marker-icon {
    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;
}

.weather-marker-icon svg {
    width: 17px;
    height: 17px;
}

.weather-marker-temp {
    color: #f1e4cb;

    font-size: 12px;
    font-weight: 720;
}

.weather-marker-name {
    position: absolute;

    left: 50%;
    top: 36px;

    padding: 3px 6px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;

    background: rgba(7, 29, 39, 0.88);
    color: #cbd7da;

    opacity: 0;

    translate: -50% -2px;

    white-space: nowrap;

    font-size: 8px;

    pointer-events: none;

    transition:
        opacity 100ms ease,
        translate 100ms ease;
}

.weather-marker-card:hover .weather-marker-name,
.weather-marker-card.show-name .weather-marker-name {
    opacity: 1;
    translate: -50% 0;
}


/* Cleaner weather popup */
.weather-popup-v12 {
    width: 210px;
    padding: 12px;
}

.weather-popup-head {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 7px;
}

.weather-popup-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    color: #efc878;
}

.weather-popup-icon svg {
    width: 24px;
    height: 24px;
}

.weather-popup-copy strong,
.weather-popup-copy span {
    display: block;
}

.weather-popup-copy strong {
    color: #eee2ce;
    font-size: 10px;
}

.weather-popup-copy span {
    margin-top: 1px;
    color: #7696a1;
    font-size: 7px;
}

.weather-popup-temp {
    color: #f3e5cc;
    font-size: 24px;
    font-weight: 680;
}

.weather-popup-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;

    margin-top: 9px;
}

.weather-popup-stats > div {
    padding: 6px 7px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.022);
}

.weather-popup-stats span,
.weather-popup-stats strong {
    display: block;
}

.weather-popup-stats span {
    color: #6c8994;
    font-size: 6px;
}

.weather-popup-stats strong {
    margin-top: 1px;
    color: #cbd9dc;
    font-size: 8px;
}


/* V11 marker classes are no longer used. */
.weather-marker {
    display: none !important;
}


/* Mobile keeps the navigation visible as a bottom palette. */
@media (max-width: 760px) {

    .app {
        grid-template-columns: 1fr;
    }

    .sidebar {
    }

    .explore-panel {

    }

    .compact-layer-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .compact-layer-tile {
        min-height: 58px;
        align-items: center;
        text-align: center;
    }
}


/* =========================================================
   V18 — MOBILE DRAWER + COMPACT ATTRIBUTION
   ========================================================= */

.mobile-menu-toggle,
.mobile-menu-backdrop {
    display: none;
}


/* Attribution is required, but stays behind the information button. */
.maplibregl-ctrl-attrib:not(.maplibregl-compact-show) {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;

    overflow: hidden !important;
    padding: 0 !important;

    border-radius: 50% !important;
}

.maplibregl-ctrl-attrib:not(.maplibregl-compact-show)
    .maplibregl-ctrl-attrib-inner {
    display: none !important;
}

.maplibregl-ctrl-attrib-button {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact-show {
    width: auto !important;
    max-width: min(440px, calc(100vw - 20px)) !important;

    padding: 4px 32px 4px 8px !important;

    border-radius: 12px !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact-show
    .maplibregl-ctrl-attrib-inner {
    display: block !important;
}


@media (max-width: 760px) {

    .app {
        display: block;
    }

    .content {
        height: 100dvh;
    }

    .mobile-menu-toggle {
        flex: 0 0 auto;

        width: 38px;
        height: 38px;

        display: grid;
        place-content: center;
        gap: 4px;

        padding: 0;

        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 10px;

        background: rgba(255, 255, 255, 0.035);
        color: #e9dcc5;

        cursor: pointer;
    }

    .mobile-menu-toggle span {
        width: 17px;
        height: 1.5px;

        display: block;

        border-radius: 999px;
        background: currentColor;

        transition:
            rotate 140ms ease,
            translate 140ms ease,
            opacity 140ms ease;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        translate: 0 5.5px;
        rotate: 45deg;
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        translate: 0 -5.5px;
        rotate: -45deg;
    }

    .mobile-menu-backdrop {
        position: fixed;
        z-index: 35;
        inset: 0;

        display: block;

        border: 0;

        background: rgba(2, 13, 19, 0.52);
        opacity: 0;

        pointer-events: none;

        transition: opacity 160ms ease;
    }

    .mobile-menu-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar {
        position: fixed;
        z-index: 40;

        top: 0;
        right: auto;
        bottom: 0;
        left: 0;

        width: min(280px, 84vw);
        height: 100dvh;

        display: flex;

        padding: 18px 14px 16px;

        border-top: 0;

        transform: translateX(-104%);

        transition: transform 180ms ease;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-main {
        height: auto;
    }

    .brand {
        display: block;
        padding: 4px 8px 12px;
        text-align: left;
    }

    .brand-kicker {
        font-size: 8px;
    }

    .brand-name {
        font-size: 17px;
    }

    .main-nav {
        height: auto;

        display: flex;
        flex-direction: column;
        gap: 5px;

        margin-top: 20px;
    }

    .sidebar .nav-button {
        min-height: 48px;

        display: grid;
        grid-template-columns: 28px 1fr;
        align-items: center;
        justify-content: initial;
        gap: 10px;

        padding: 9px 11px;

        text-align: left;
        font-size: 12px;
    }

    .sidebar .nav-icon {
        width: 24px;
        height: 24px;
        font-size: 18px;
    }

    .sidebar-footer {
        display: grid;
        padding: 8px 4px 0;
    }

    .footer-button {
        text-align: left;
        font-size: 10px;
    }

    .footer-muted {
        display: inline;
    }

    .topbar {
        gap: 7px;
        padding: 8px 9px;
    }

    .mobile-brand {
        font-size: 10px;
    }

    .search-shell {
        min-width: 0;
    }

    .explore-panel {
        top: auto;
        right: 8px;
        bottom: 8px;
        left: 8px;

        width: auto;
        max-height: min(58vh, 430px);
    }
}


/* =========================================================
   API MENU — EXPLORE / LIVE / TRANSPORT / DISCOVER / NEWS
   ========================================================= */

@media (min-width: 761px) {
    .explore-panel {
        width: 306px;
        max-height: calc(100% - 64px);
        overflow: hidden;
    }
}


.explore-panel-content {
    max-height: calc(100vh - 158px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 181, 190, 0.35) transparent;
}


.compact-layer-name {
    display: block;
    line-height: 1.15;
}


.compact-layer-status {
    color: #6f8d98;
    font-size: 8px;
    font-weight: 520;
    line-height: 1;
}


.compact-layer-status.loading {
    color: #e2cfa9;
}


.compact-layer-status.ready {
    color: #8fc9b2;
}


.compact-layer-status.error {
    color: #e49b8d;
}


.compact-layer-symbol {
    border: 1px solid rgba(143, 181, 190, 0.2);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1;
}


.api-panel-results {
    display: grid;
    gap: 8px;
    margin-top: 9px;
}


.api-panel-loading,
.api-panel-error {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: #8fa7b0;
    font-size: 10px;
    line-height: 1.45;
}


.api-panel-error {
    color: #e5a79a;
}


.api-panel-card,
.api-feed {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 11px;
    background: rgba(4, 20, 28, 0.72);
    color: #c7d7db;
}


.api-panel-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}


.api-panel-card-head span,
.api-feed-card > span {
    display: block;
    color: #7895a0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.api-panel-card h3,
.api-feed h3,
.api-feed-card h4 {
    margin: 3px 0 0;
    color: #edf1ed;
    font-weight: 650;
    line-height: 1.25;
}


.api-panel-card h3,
.api-feed h3 {
    font-size: 12px;
}


.api-level-badge {
    flex: 0 0 auto;
    padding: 4px 6px;
    border: 1px solid rgba(143, 201, 178, 0.25);
    border-radius: 999px;
    color: #9bd0b9;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}


.api-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}


.api-detail-row {
    min-width: 0;
    padding: 7px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
}


.api-detail-row span,
.api-detail-row strong {
    display: block;
}


.api-detail-row span {
    color: #738e98;
    font-size: 8px;
}


.api-detail-row strong {
    margin-top: 2px;
    overflow-wrap: anywhere;
    color: #dce6e5;
    font-size: 9px;
    font-weight: 650;
}


.api-panel-card > p {
    max-height: 126px;
    overflow: hidden;
    margin: 10px 0;
    color: #a9bcc1;
    font-size: 9px;
    line-height: 1.45;
}


.api-panel-card > small {
    display: block;
    margin-top: 9px;
    color: #6f8c96;
    font-size: 8px;
    line-height: 1.35;
}


.api-card-link {
    display: inline-block;
    margin-top: 9px;
    color: #d8c39d;
    font-size: 9px;
    font-weight: 650;
    text-decoration: none;
}


.api-card-link:hover {
    text-decoration: underline;
}


.api-tide-list {
    display: grid;
    gap: 3px;
}


.api-tide-chart {
    margin: 2px 0 10px;
    padding: 7px 7px 5px;
    border: 1px solid rgba(183, 215, 221, 0.1);
    border-radius: 8px;
    background: rgba(75, 137, 154, 0.08);
}


.api-tide-chart svg {
    display: block;
    width: 100%;
    height: 74px;
    overflow: visible;
}


.api-tide-wave {
    fill: none;
    stroke: #b7d7dd;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}


.api-tide-zero {
    stroke: rgba(183, 215, 221, 0.18);
    stroke-dasharray: 3 3;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}


.api-tide-chart figcaption {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    color: #718f99;
    font-size: 7px;
}


.api-tide-list > div {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 8px;
}


.api-tide-list strong {
    color: #d8c39d;
}


.api-tide-list span {
    color: #8aa1aa;
}


.api-tide-list b {
    color: #dce6e5;
}


.api-feed {
    display: grid;
    gap: 8px;
}


.api-feed-card {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}


.api-feed-card h4 {
    font-size: 10px;
}


.api-feed-card time {
    display: block;
    margin-top: 4px;
    color: #6e8a94;
    font-size: 8px;
}


.api-feed-card p {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #9db1b7;
    font-size: 9px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}


.api-feed-note,
.api-unavailable {
    margin: 0;
    color: #809ba4;
    font-size: 9px;
    line-height: 1.45;
}


.api-unavailable {
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}


.ferry-route-card .api-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    padding: 5px 6px;
}


.ferry-route-card .api-detail-row span,
.ferry-route-card .api-detail-row strong {
    font-size: 8px;
}


.alert-card-head {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: start;
    gap: 8px;
}


.alert-card-head > div > span {
    display: block;
    color: #7895a0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.alert-type-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(183, 215, 221, 0.17);
    border-radius: 50%;
    background: rgba(183, 215, 221, 0.06);
    color: #b7d7dd;
    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1;
}


.alert-type-icon.coastal,
.alert-type-icon.rain,
.alert-type-icon.storm {
    color: #9acbd5;
}


.alert-type-icon.wind {
    color: #b6d3d1;
}


.alert-type-icon.calima,
.alert-type-icon.heat {
    color: #e0bd7e;
}


.alert-type-icon.fire {
    color: #df9478;
}


.api-list-search {
    display: grid;
    gap: 5px;
    margin: 1px 0 3px;
}


.api-list-search > span {
    color: #7895a0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.api-list-search input {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(143, 181, 190, 0.15);
    border-radius: 8px;
    outline: 0;
    background: rgba(255, 255, 255, 0.035);
    color: #dce6e5;
    font: inherit;
    font-size: 9px;
}


.api-list-search input:focus {
    border-color: rgba(143, 201, 178, 0.45);
}


.api-list-search input::placeholder {
    color: #607b85;
}


.titsa-route-list {
    display: grid;
    gap: 7px;
    max-height: 268px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 181, 190, 0.3) transparent;
}


.titsa-route-card[hidden],
.api-list-empty[hidden] {
    display: none;
}


.titsa-route-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}


.titsa-route-head strong {
    min-width: 34px;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(121, 182, 139, 0.14);
    color: #9bc9a8;
    font-size: 10px;
    text-align: center;
}


.titsa-route-head span {
    color: #6f8c96;
    font-size: 8px;
}


.api-list-empty {
    margin: 6px 0 0;
    color: #7895a0;
    font-size: 9px;
}


.webcam-card .api-card-link {
    color: #9fc7ce;
}


.api-map-popup {
    min-width: 190px;
    color: #eaf1f3;
    font-size: 11px;
    line-height: 1.5;
}


.api-map-popup h3 {
    margin: 0 18px 8px 0;
    color: #f3e7cf;
    font-size: 13px;
}


.api-map-popup .api-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    background: transparent;
}


.api-map-popup .api-detail-row span,
.api-map-popup .api-detail-row strong {
    color: #b9d0d6;
    font-size: 9px;
}


.api-map-popup .api-card-link {
    color: #e7c998;
}


.api-info-popup .maplibregl-popup-content {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #0b242f;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}


.api-info-popup .maplibregl-popup-tip {
    border-top-color: #0b242f;
    border-bottom-color: #0b242f;
}


.api-info-popup .maplibregl-popup-close-button {
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #a9bec5;
    font-size: 18px;
}


.api-info-popup .api-panel-card {
    width: min(292px, calc(100vw - 48px));
    border: 0;
    border-radius: 0;
    background: transparent;
}


@media (max-width: 760px) {
    .explore-panel {
        overflow: hidden;
    }


    .explore-panel-content {
        max-height: calc(min(58vh, 430px) - 52px);
    }
}


/* =========================================================
   V23 — ISLAND-FIRST TOP PANEL
   This block deliberately overrides the accumulated legacy menu styles.
   Map styling, coastline, boundaries and Style Lab are untouched.
   ========================================================= */

.app {
    display: block;
    width: 100%;
    height: 100dvh;
}

.content {
    width: 100%;
    height: 100%;
    grid-template-rows: 54px minmax(0, 1fr);
}

.topbar {
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px 8px 18px;
}

.topbar-brand {
    display: block;
    padding: 0;
    text-align: left;
}

.topbar-brand .brand-name {
    margin: 0;
    color: #eadcc4;
    font-size: 13px;
    letter-spacing: 0.13em;
}

.style-lab-toggle {
    margin-left: auto;
    padding: 7px 10px;
    font-size: 8px;
}

.top-map-panel.explore-panel {


    overflow: hidden;

    border-radius: 15px;


    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.top-map-panel.explore-panel.closed {
}

.top-map-panel .explore-panel-header {
    position: static;

    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    align-items: center;

    padding: 12px 13px;
}

.top-map-panel:not(.has-island) .explore-panel-header {
}

.top-map-panel .panel-heading-copy {
    min-width: 0;
}

.top-map-panel:not(.has-island) .panel-heading-copy {
    grid-column: 1;
}

.top-map-panel:not(.has-island) .panel-close {
    grid-column: 2;
}

.top-map-panel .panel-eyebrow {
    display: block;
    margin: 0 0 2px;
    color: #7896a1;
    font-size: 7px;
    letter-spacing: 0.18em;
}

.top-map-panel .panel-title {
    overflow: hidden;
    margin: 0;
    color: #f0e4d1;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-subtitle {
    overflow: hidden;
    margin: 3px 0 0;
    color: #829da7;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-panel-nav {
    display: flex;
    flex-direction: row;
    gap: 3px;
    margin: 0;
}

.top-panel-nav.hidden {
    display: none;
}

.top-panel-nav .nav-button {
    min-width: 64px;
    padding: 7px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #8da6af;
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
}

.top-panel-nav .nav-button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #dce7e7;
}

.top-panel-nav .nav-button.active {
    background: rgba(226, 204, 170, 0.11);
    color: #e7d3b3;
}

.top-map-panel .panel-close {
    padding: 0 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.top-map-panel .island-context {
    position: static;

    min-height: 28px;
    padding: 0 9px;

    border-radius: 999px;

    box-shadow: none;

    font-size: 8px;
    white-space: nowrap;
}

.top-map-panel .island-context.hidden {
    display: none;
}

.top-map-panel .explore-panel-content {
    padding: 10px 13px 13px;
    overflow-x: hidden;
    overflow-y: auto;
}

.top-panel-reopen {
    position: absolute;
    z-index: 14;
    top: 12px;
    left: 50%;

    display: none;

    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(7, 29, 39, 0.88);
    color: #d9c9ad;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
    font-size: 8px;
    cursor: pointer;
}

.top-panel-reopen.visible {
    display: block;
}

.island-carousel {
    display: grid;
    grid-auto-columns: 220px;
    grid-auto-flow: column;
    gap: 8px;

    overflow-x: auto;
    padding: 1px 1px 7px;

    scroll-snap-type: x proximity;
    scrollbar-color: rgba(143, 181, 190, 0.25) transparent;
    scrollbar-width: thin;
}

.island-card {
    min-width: 0;
    min-height: 137px;

    display: grid;
    grid-template-rows: auto 58px 1fr;
    gap: 6px;

    padding: 9px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.025);
    color: #e9decb;

    text-align: left;
    scroll-snap-align: start;
    cursor: pointer;
}

.island-card:hover {
    border-color: rgba(226, 204, 170, 0.24);
    background: rgba(255, 255, 255, 0.045);
}

.island-card strong {
    overflow: hidden;
    font-size: 10px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.island-card small {
    color: #78929c;
    font-size: 7px;
    line-height: 1.35;
}

.island-card-thumbnail {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 8px;
    background:
        radial-gradient(circle at 30% 20%, rgba(236, 217, 179, 0.22), transparent 30%),
        linear-gradient(150deg, #315f6c, #4f91a0);
}

.island-card-thumbnail::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        repeating-radial-gradient(ellipse at center, transparent 0 9px, rgba(231, 222, 203, 0.11) 10px, transparent 11px);
}

.island-card-shape {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 63%;
    height: 47%;
    border: 1px solid rgba(240, 224, 193, 0.72);
    border-radius: 57% 43% 52% 48%;
    background:
        radial-gradient(circle at 45% 35%, #b7b0a2, #77766f 72%);
    box-shadow: 0 0 0 4px rgba(244, 228, 195, 0.1);
    transform: translate(-50%, -50%) rotate(-8deg);
}

.island-card[data-island-art="gran-canaria"] .island-card-shape {
    width: 45%;
    height: 62%;
    border-radius: 48% 52% 46% 54%;
    transform: translate(-50%, -50%) rotate(7deg);
}

.island-card[data-island-art="lanzarote"] .island-card-shape {
    width: 64%;
    height: 31%;
    border-radius: 64% 36% 56% 44%;
    transform: translate(-50%, -50%) rotate(-18deg);
}

.island-card[data-island-art="fuerteventura"] .island-card-shape {
    width: 72%;
    height: 25%;
    border-radius: 67% 33% 58% 42%;
    transform: translate(-50%, -50%) rotate(16deg);
}

.island-card[data-island-art="la-palma"] .island-card-shape {
    width: 38%;
    height: 68%;
    border-radius: 45% 55% 58% 42%;
}

.island-card[data-island-art="la-gomera"] .island-card-shape {
    width: 43%;
    height: 57%;
    border-radius: 52% 48% 44% 56%;
}

.island-card[data-island-art="el-hierro"] .island-card-shape {
    width: 51%;
    height: 48%;
    border-radius: 34% 66% 57% 43%;
    transform: translate(-50%, -50%) rotate(12deg);
}

.island-card[data-island-art="la-graciosa"] .island-card-shape {
    width: 55%;
    height: 23%;
    border-radius: 65% 35% 58% 42%;
    transform: translate(-50%, -50%) rotate(-9deg);
}

.top-panel-prompt {
    margin: 0;
    color: #79949e;
    font-size: 9px;
}

.top-map-panel .compact-layer-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.top-map-panel .compact-layer-tile {
    flex: 0 0 82px;
    min-height: 54px;

    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-content: initial;
    gap: 5px;

    padding: 7px;

    border-radius: 9px;

    text-align: left;
}

.top-map-panel .compact-layer-icon {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 0;
    color: #8cb5bf;
}

.top-map-panel .compact-layer-icon svg {
    width: 20px;
    height: 20px;
}

.top-map-panel .compact-layer-name {
    color: #bfced2;
    font-size: 8px;
    line-height: 1.2;
}

.top-map-panel .compact-layer-status {
    position: absolute;
    right: 6px;
    bottom: 3px;
    left: 6px;
    overflow: hidden;
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-map-panel .compact-layer-check {
    top: 4px;
    right: 5px;
    font-size: 8px;
}

.top-map-panel .api-panel-results {
    max-width: 420px;
    max-height: 248px;
    overflow-y: auto;
    margin-top: 8px;
}

.weather-marker-card.weather-marker-pending {
    min-width: 34px;
    width: 34px;
    padding: 0;
    justify-content: center;
}

.weather-marker-card.weather-marker-pending .weather-marker-icon,
.weather-marker-card.weather-marker-pending .weather-marker-icon svg {
    width: 22px;
    height: 22px;
}


@media (max-width: 760px) {
    .content {
        grid-template-rows: 50px minmax(0, 1fr);
    }

    .topbar {
        padding: 7px 9px 7px 12px;
    }

    .topbar-brand .brand-name {
        font-size: 10px;
    }

    .top-map-panel.explore-panel {

    }

    .top-map-panel .explore-panel-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        padding: 9px 10px;
    }

    .top-map-panel .island-context {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .top-map-panel .panel-close {
        grid-column: 2;
        grid-row: 1;
    }

    .top-map-panel .panel-heading-copy {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .top-map-panel:not(.has-island) .panel-heading-copy {
        grid-column: 1;
        grid-row: 1;
    }

    .top-map-panel:not(.has-island) .panel-close {
        grid-column: 2;
        grid-row: 1;
    }

    .top-panel-nav {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
    }

    .panel-subtitle {
        white-space: normal;
    }

    .top-map-panel .explore-panel-content {
        max-height: calc(min(60vh, 430px) - 104px);
        padding: 8px 10px 10px;
    }

    .top-map-panel:not(.has-island) .explore-panel-content {
        max-height: calc(min(60vh, 430px) - 59px);
    }

    .island-carousel {
        grid-auto-columns: min(74vw, 240px);
    }

    .island-card {
        min-height: 150px;
        grid-template-rows: auto 68px 1fr;
    }

    .top-map-panel .compact-layer-tile {
        flex-basis: 78px;
    }

    .top-panel-reopen {
    }
}


/* =========================================================
   V23.1 — DOCKED PANEL + SMALL ATTRIBUTION
   The navigation occupies its own row and never covers the map.
   ========================================================= */

.map-area {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

#map {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.top-map-panel.explore-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1;

    width: 100%;
    max-height: min(360px, 44vh);

    border-right: 0;
    border-left: 0;
    border-radius: 0;

    box-shadow: none;

    transform: none;
}

.top-map-panel.explore-panel.closed {
    display: none;
    opacity: 0;
    transform: none;
}

.top-map-panel .explore-panel-header {
    background: #081c25;
}

.top-map-panel .explore-panel-content {
    max-height: 274px;
    background: rgba(8, 28, 37, 0.985);
}

.top-panel-reopen {
    grid-column: 1;
    grid-row: 2;
}

.maplibregl-ctrl-attrib.maplibregl-compact {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;


    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    background: rgba(7, 29, 39, 0.86) !important;
    color: #d9e1df !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact
    .maplibregl-ctrl-attrib-inner {
    display: none !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact
    .maplibregl-ctrl-attrib-button {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    filter: invert(1) opacity(0.78);
}

.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show {
    max-width: min(430px, calc(100vw - 20px)) !important;
    min-height: 26px !important;

    padding: 4px 30px 4px 8px !important;

    border-radius: 8px !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show
    .maplibregl-ctrl-attrib-inner {
    color: #c6d2d3 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show a {
    color: #d8c7aa !important;
}

.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
    margin: 0 7px 7px 0 !important;
}


@media (max-width: 760px) {
    .top-map-panel.explore-panel {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        max-height: min(390px, 48vh);
    }

    .top-map-panel .explore-panel-content,
    .top-map-panel:not(.has-island) .explore-panel-content {
        max-height: 272px;
    }

    .top-panel-reopen {
        top: 8px;
    }

    .maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show {
        max-width: calc(100vw - 14px) !important;
    }
}


/* =========================================================
   V23.2 — COMPACT ISLAND SELECTOR
   One shared island voice instead of eight large description cards.
   ========================================================= */

.top-map-panel:not(.has-island) .explore-panel-header {
    padding: 10px 15px 8px;
}

.top-map-panel:not(.has-island) .explore-panel-content {
    padding: 4px 15px 11px;
    overflow: visible;
}

.top-map-panel:not(.has-island) .panel-title {
}

.top-map-panel:not(.has-island) .panel-subtitle {
    margin-top: 2px;
    color: #91a6ad;
    font-size: 8px;
}

.island-selector {
    align-items: center;
}

.island-selector-list {
    padding: 2px 1px 4px;
    scrollbar-color: rgba(143, 181, 190, 0.2) transparent;
    scrollbar-width: thin;
}

.island-option {
    flex: 0 0 86px;
    grid-template-rows: 34px auto;
    justify-items: center;
    padding: 5px 5px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.island-option:hover,
.island-option:focus-visible,
.island-option.preview-active {
    border-color: rgba(226, 204, 170, 0.18);
    background: rgba(255, 255, 255, 0.045);
}

.island-option-thumbnail,
.island-voice-thumbnail {
    position: relative;
    display: block;
    overflow: hidden;
    background: radial-gradient(circle at 32% 20%, rgba(236, 217, 179, 0.17), transparent 34%), #123946;
}

.island-option-thumbnail {
    width: 58px;
    height: 34px;
    border-radius: 7px;
}

.island-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.island-option-shape,
.island-voice-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 48%;
    border: 1px solid rgba(240, 224, 193, 0.72);
    border-radius: 57% 43% 52% 48%;
    background: radial-gradient(circle at 45% 35%, #b7b0a2, #77766f 72%);
    box-shadow: 0 0 0 3px rgba(244, 228, 195, 0.07);
    transform: translate(-50%, -50%) rotate(-8deg);
}

[data-island-art="gran-canaria"] .island-option-shape,
.island-voice-thumbnail[data-island-art="gran-canaria"] .island-voice-shape {
    width: 45%; height: 62%; border-radius: 48% 52% 46% 54%; transform: translate(-50%, -50%) rotate(7deg);
}
[data-island-art="lanzarote"] .island-option-shape,
.island-voice-thumbnail[data-island-art="lanzarote"] .island-voice-shape {
    width: 64%; height: 31%; border-radius: 64% 36% 56% 44%; transform: translate(-50%, -50%) rotate(-18deg);
}
[data-island-art="fuerteventura"] .island-option-shape,
.island-voice-thumbnail[data-island-art="fuerteventura"] .island-voice-shape {
    width: 72%; height: 25%; border-radius: 67% 33% 58% 42%; transform: translate(-50%, -50%) rotate(16deg);
}
[data-island-art="la-palma"] .island-option-shape,
.island-voice-thumbnail[data-island-art="la-palma"] .island-voice-shape {
    width: 38%; height: 68%; border-radius: 45% 55% 58% 42%;
}
[data-island-art="la-gomera"] .island-option-shape,
.island-voice-thumbnail[data-island-art="la-gomera"] .island-voice-shape {
    width: 43%; height: 57%; border-radius: 52% 48% 44% 56%;
}
[data-island-art="el-hierro"] .island-option-shape,
.island-voice-thumbnail[data-island-art="el-hierro"] .island-voice-shape {
    width: 51%; height: 48%; border-radius: 34% 66% 57% 43%; transform: translate(-50%, -50%) rotate(12deg);
}
[data-island-art="la-graciosa"] .island-option-shape,
.island-voice-thumbnail[data-island-art="la-graciosa"] .island-voice-shape {
    width: 55%; height: 23%; border-radius: 65% 35% 58% 42%; transform: translate(-50%, -50%) rotate(-9deg);
}

.island-voice {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 7px 9px;
    border-left: 1px solid rgba(226, 204, 170, 0.13);
}

.island-voice-thumbnail {
    width: 70px;
    height: 42px;
    border-radius: 9px;
}

.island-voice-text {
}

@media (max-width: 760px) {
    .top-map-panel:not(.has-island) .explore-panel-header {
        padding: 8px 10px 6px;
    }

    .top-map-panel:not(.has-island) .explore-panel-content {
        padding: 3px 10px 9px;
    }

    .island-selector {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .island-selector-list {
        margin-right: -10px;
        padding-right: 10px;
    }

    .island-option {
        flex-basis: 76px;
        grid-template-rows: 30px auto;
        padding: 4px;
    }

    .island-option-thumbnail {
        width: 52px;
        height: 30px;
    }

    .island-voice {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 8px;
        padding: 6px 7px;
        border-top: 1px solid rgba(226, 204, 170, 0.1);
        border-left: 0;
    }

    .island-voice-thumbnail {
        width: 54px;
        height: 34px;
    }

    .island-voice-text {
    }
}

/* =========================================================
   V23.3 — THIN ISLAND STRIP + REAL SILHOUETTES
   Keep the map dominant: compact selector, no island cards.
   ========================================================= */

.top-map-panel.explore-panel:not(.has-island) {
    max-height: 124px;
}

.top-map-panel .explore-panel-header {
    min-height: 42px;
    padding: 7px 12px;
    gap: 8px;
}

.top-map-panel:not(.has-island) .explore-panel-header {
    grid-template-columns: minmax(0, 1fr) 24px;
    padding: 6px 12px 4px;
}

.top-map-panel:not(.has-island) .panel-eyebrow,
.top-map-panel:not(.has-island) .panel-subtitle {
    display: none;
}

.top-map-panel:not(.has-island) .panel-title {
    font-size: 16px;
    line-height: 1.1;
}

.top-map-panel .panel-close {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.025);
    color: #7896a1;
    font-size: 10px;
    line-height: 1;
}

.top-map-panel .panel-close:hover {
    background: rgba(255, 255, 255, 0.055);
    color: #d9e1df;
}

.top-map-panel:not(.has-island) .explore-panel-content {
    max-height: none;
    padding: 1px 12px 7px;
    overflow: hidden;
}

.island-selector {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    min-width: 0;
}

.island-selector-list {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 0 3px;
    scrollbar-width: none;
}

.island-selector-list::-webkit-scrollbar {
    display: none;
}

.island-option {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #9fb2b6;
    white-space: nowrap;
}

.island-option:hover,
.island-option:focus-visible,
.island-option.preview-active {
    border-color: rgba(226, 204, 170, 0.13);
    background: rgba(226, 204, 170, 0.055);
    color: #eadcc5;
    outline: none;
}

.island-option-icon {
    display: block;
    width: 24px;
    height: 17px;
    flex: 0 0 24px;
    object-fit: contain;
    opacity: 0.82;
    filter: saturate(0.82);
}

.island-option:hover .island-option-icon,
.island-option:focus-visible .island-option-icon,
.island-option.preview-active .island-option-icon {
    opacity: 1;
}

.island-option-name {
    overflow: visible;
    max-width: none;
    font-size: 8px;
    font-weight: 620;
    letter-spacing: 0.01em;
    text-overflow: clip;
    white-space: nowrap;
}

.island-voice {
    min-height: 24px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 2px 7px 1px;
    border: 0;
    border-left: 2px solid rgba(205, 187, 153, 0.24);
}

.island-voice-text {
    margin: 0;
    color: #9fb0b4;
    font-size: 8.5px;
    line-height: 1.25;
}

/* Smaller attribution: only the info dot until explicitly opened. */
.maplibregl-ctrl-attrib.maplibregl-compact {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact
    .maplibregl-ctrl-attrib-button {
    width: 20px !important;
    height: 20px !important;
    background-size: 18px 18px !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show {
    max-width: min(270px, calc(100vw - 16px)) !important;
    min-height: 22px !important;
    padding: 3px 25px 3px 7px !important;
    border-radius: 7px !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show
    .maplibregl-ctrl-attrib-inner {
    font-size: 7.5px !important;
    line-height: 1.18 !important;
}

.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
}

@media (max-width: 760px) {
    .top-map-panel.explore-panel:not(.has-island) {
        max-height: 136px;
    }

    .top-map-panel:not(.has-island) .explore-panel-header {
        padding: 5px 9px 3px;
    }

    .top-map-panel:not(.has-island) .explore-panel-content {
        padding: 0 9px 6px;
    }

    .top-map-panel:not(.has-island) .panel-title {
        font-size: 15px;
    }

    .island-selector-list {
        margin-right: -9px;
        padding-right: 9px;
    }

    .island-option {
        min-height: 28px;
        gap: 4px;
        padding: 3px 6px;
    }

    .island-option-icon {
        width: 21px;
        height: 15px;
        flex-basis: 21px;
    }

    .island-option-name {
        font-size: 7.5px;
    }

    .island-voice {
        min-height: 28px;
        padding: 2px 5px;
        border-top: 0;
        border-left: 2px solid rgba(205, 187, 153, 0.24);
    }

    .island-voice-text {
        font-size: 8px;
        line-height: 1.22;
    }

    .maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show {
        max-width: min(240px, calc(100vw - 12px)) !important;
    }
}


/* =========================================================
   V23.4 — MAP-FIRST COMPACT NAVIGATION
   Text-only island selector + single-line island tools.
   These overrides intentionally win over all legacy panel rules above.
   ========================================================= */

html,
body,
.app,
.content {
    height: 100%;
    min-height: 0;
}

.content {
    display: grid !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
}

.topbar {
    min-height: 52px !important;
    height: 52px !important;
    padding: 7px 14px 7px 18px !important;
}

.topbar-brand .brand-name {
}

.map-area {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
}

#map {
    min-height: 0 !important;
}

.top-map-panel.explore-panel,
.top-map-panel.explore-panel:not(.has-island),
.top-map-panel.explore-panel.has-island {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
    background: #081c25 !important;
}

.top-map-panel.explore-panel.closed {
    display: none !important;
}

/* ---------- before island selection: ~74 px total ---------- */
.top-map-panel:not(.has-island) .explore-panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 22px !important;
    align-items: center !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 12px 0 !important;
    gap: 8px !important;
    background: #081c25 !important;
}

.top-map-panel:not(.has-island) .panel-heading-copy {
    display: block !important;
}

.top-map-panel .panel-eyebrow,
.top-map-panel:not(.has-island) .panel-eyebrow,
.top-map-panel:not(.has-island) .panel-subtitle {
    display: none !important;
}

.top-map-panel:not(.has-island) .panel-title {
    font-size: 17px !important;
    line-height: 1 !important;
}

.top-map-panel:not(.has-island) .explore-panel-content {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 12px 4px !important;
    background: #081c25 !important;
}

.island-selector,
.island-selector.island-selector-text-only {
    grid-template-rows: 24px 16px !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.island-selector-list {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 24px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain;
}

.island-selector-list::-webkit-scrollbar {
    display: none !important;
}

.island-option {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #9eb1b6 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.island-option:hover,
.island-option:focus-visible,
.island-option.preview-active {
    background: rgba(226, 204, 170, 0.075) !important;
    color: #eadcc5 !important;
    outline: none !important;
}

.island-option-icon,
.island-option-thumbnail,
.island-option-shape {
    display: none !important;
}

.island-option-name {
    max-width: none !important;
    overflow: visible !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.island-voice {
    display: flex !important;
    align-items: center !important;
    min-height: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.island-voice-text {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #7f9aa4 !important;
    font-size: 9px !important;
    line-height: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ---------- selected island: one compact header ---------- */
.top-map-panel.has-island .explore-panel-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto 22px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 12px !important;
    background: #081c25 !important;
}

.top-map-panel.has-island .island-context {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.top-map-panel.has-island .island-context.hidden {
    display: none !important;
}

.top-map-panel.has-island .panel-heading-copy {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.top-map-panel.has-island .panel-title {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #f0e4d1 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.top-map-panel.has-island .panel-subtitle {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #7899a4 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.top-panel-nav {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.top-panel-nav.hidden {
    display: none !important;
}

.top-panel-nav .nav-button {
    min-width: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
}

.top-map-panel .panel-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 9px !important;
}

/* no empty second row after choosing an island */
.top-map-panel.has-island .explore-panel-content:empty {
}

/* ---------- Explore / Live / News tools: 32 px strip ---------- */
.top-map-panel.has-island .explore-panel-content:not(:empty) {
    display: block !important;
    min-height: 34px !important;
    max-height: 140px !important;
    padding: 2px 12px 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: rgba(8, 28, 37, 0.985) !important;
}

.top-map-panel .compact-layer-grid {
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.top-map-panel .compact-layer-grid::-webkit-scrollbar {
}

.top-map-panel .compact-layer-tile {
    position: relative !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

.top-map-panel .compact-layer-tile:hover,
.top-map-panel .compact-layer-tile.active {
    border-color: rgba(226, 204, 170, 0.12) !important;
    background: rgba(226, 204, 170, 0.07) !important;
}

.top-map-panel .compact-layer-icon {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    border: 0 !important;
    color: #89adb6 !important;
}

.top-map-panel .compact-layer-icon svg {
}

.top-map-panel .compact-layer-name {
    color: #b9c9cd !important;
    font-size: 9px !important;
    white-space: nowrap !important;
}

.top-map-panel .compact-layer-status {
    display: none !important;
}

.top-map-panel .compact-layer-check {
    position: static !important;
    display: inline !important;
    line-height: 1 !important;
}

/* Result panels may expand only when the chosen tool actually has details. */
.top-map-panel .api-panel-results {
    max-width: min(520px, 100%) !important;
    max-height: 96px !important;
    margin-top: 3px !important;
    overflow-y: auto !important;
}

/* ---------- attribution: true icon-only default ---------- */
.maplibregl-ctrl-attrib.maplibregl-compact {
    box-sizing: border-box !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
    background: rgba(6, 25, 33, .88) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show)
    .maplibregl-ctrl-attrib-inner {
    display: none !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact
    .maplibregl-ctrl-attrib-button {
    top: 0 !important;
    right: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background-color: transparent !important;
    background-size: 16px 16px !important;
    filter: invert(1) opacity(.78) !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(280px, calc(100vw - 16px)) !important;
    height: auto !important;
    min-height: 20px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 3px 22px 3px 6px !important;
    border-radius: 6px !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show
    .maplibregl-ctrl-attrib-inner {
    display: block !important;
    color: #bfcacc !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
}

.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
    margin: 0 5px 5px 0 !important;
}

@media (max-width: 760px) {
    .content {
        grid-template-rows: 48px minmax(0, 1fr) !important;
    }

    .topbar {
        min-height: 48px !important;
        height: 48px !important;
        padding: 6px 9px !important;
    }

    .top-map-panel:not(.has-island) .explore-panel-header {
        min-height: 29px !important;
        height: 29px !important;
        padding: 3px 8px 0 !important;
    }

    .top-map-panel:not(.has-island) .panel-title {
        font-size: 15px !important;
    }

    .top-map-panel:not(.has-island) .explore-panel-content {
        min-height: 43px !important;
        height: 43px !important;
        max-height: 43px !important;
        padding: 0 8px 3px !important;
    }

    .island-option {
        padding-inline: 7px !important;
    }

    .island-option-name {
    }

    .island-voice {
        padding-inline: 7px !important;
    }

    .island-voice-text {
        font-size: 8.5px !important;
    }

    .top-map-panel.has-island .explore-panel-header {
        grid-template-rows: 30px 28px !important;
        min-height: 59px !important;
        height: 59px !important;
        padding: 1px 8px !important;
    }

    .top-map-panel.has-island .island-context {
    }

    .top-map-panel.has-island .panel-heading-copy {
    }

    .top-map-panel.has-island .panel-subtitle {
    }

    .top-map-panel.has-island .top-panel-nav {
    }

    .top-map-panel.has-island .panel-close {
    }

    .top-map-panel.has-island .explore-panel-content:not(:empty) {
        min-height: 33px !important;
        max-height: 126px !important;
        padding: 2px 8px !important;
    }

    .top-map-panel .compact-layer-tile {
        padding-inline: 6px !important;
    }

    .top-map-panel .compact-layer-name {
        font-size: 8.5px !important;
    }

    .maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show {
        max-width: min(230px, calc(100vw - 10px)) !important;
    }
}

/* =========================================================
   V23.5 — ULTRA-COMPACT MAP-FIRST BAR
   Final overrides: smaller brand, one compact island row,
   smaller selected-island navigation. No geometry/style changes.
   ========================================================= */

.content {
    grid-template-rows: 34px minmax(0, 1fr) !important;
}

.topbar {
    min-height: 34px !important;
    height: 34px !important;
    padding: 3px 9px 3px 14px !important;
}

.topbar-brand {
    min-width: 0 !important;
}

.topbar-brand .brand-name {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: #efe2cd !important;
}

.style-lab-toggle {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

/* Before island selection: total panel height = 48 px. */
.top-map-panel.explore-panel:not(.has-island) {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 16px !important;
    grid-template-rows: 40px !important;
    align-items: stretch !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
}

.top-map-panel:not(.has-island) .explore-panel-header {
    display: contents !important;
}

.top-map-panel:not(.has-island) .panel-heading-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 0 6px 0 10px !important;
}

.top-map-panel:not(.has-island) .panel-title {
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #f0e4d1 !important;
}

.top-map-panel:not(.has-island) .explore-panel-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 4px 4px 3px 0 !important;
    overflow: hidden !important;
}

.top-map-panel:not(.has-island) .panel-close {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    font-size: 8px !important;
}

.island-selector,
.island-selector.island-selector-text-only {
    display: grid !important;
    grid-template-rows: 20px 13px !important;
    gap: 1px !important;
    height: 34px !important;
}

.island-selector-list {
    height: 20px !important;
    gap: 1px !important;
    padding: 0 2px !important;
}

.island-option {
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 6px !important;
}

.island-option-name {
    font-size: 9px !important;
    font-weight: 600 !important;
}

.island-voice {
    min-height: 13px !important;
    height: 13px !important;
    padding: 0 6px !important;
}

.island-voice-text {
    font-size: 8px !important;
    line-height: 13px !important;
}

/* Selected island: header 30 px + tools 26 px = 56 px max. */
.top-map-panel.explore-panel.has-island {
    min-height: 30px !important;
}

.top-map-panel.has-island .explore-panel-header {
    min-height: 30px !important;
    height: 30px !important;
    padding: 2px 9px !important;
    gap: 5px !important;
}

.top-map-panel.has-island .island-context {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
}

.top-map-panel.has-island .panel-heading-copy {
    gap: 6px !important;
}

.top-map-panel.has-island .panel-title {
    font-size: 12px !important;
}

.top-map-panel.has-island .panel-subtitle {
    font-size: 8px !important;
}

.top-panel-nav .nav-button {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
}

.top-map-panel.has-island .panel-close {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    font-size: 8px !important;
}

.top-map-panel.has-island .explore-panel-content:not(:empty) {
    min-height: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    padding: 1px 9px 2px !important;
}

.top-map-panel .compact-layer-grid {
    min-height: 20px !important;
    height: 20px !important;
}

.top-map-panel .compact-layer-tile {
    min-height: 21px !important;
    height: 21px !important;
    padding: 0 6px !important;
    gap: 3px !important;
}

.top-map-panel .compact-layer-icon,
.top-map-panel .compact-layer-icon svg {
    width: 12px !important;
    min-width: 12px !important;
    height: 12px !important;
}

.top-map-panel .compact-layer-name {
    font-size: 8px !important;
}

/* Slightly smaller native map controls to keep the map visually dominant. */
.maplibregl-ctrl-top-right .maplibregl-ctrl-group button {
    width: 26px !important;
    height: 26px !important;
}

@media (max-width: 760px) {
    .content {
        grid-template-rows: 36px minmax(0, 1fr) !important;
    }

    .topbar {
        min-height: 36px !important;
        height: 36px !important;
        padding: 3px 8px 3px 10px !important;
    }

    .topbar-brand .brand-name {
        font-size: 13px !important;
    }

    .top-map-panel.explore-panel:not(.has-island) {
        grid-template-columns: 96px minmax(0, 1fr) 16px !important;
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
    }

    .top-map-panel:not(.has-island) .panel-heading-copy {
        padding-left: 10px !important;
    }

    .top-map-panel:not(.has-island) .panel-title {
        font-size: 11px !important;
    }

    .top-map-panel:not(.has-island) .explore-panel-content {
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
    }

    .island-option-name {
        font-size: 9px !important;
    }

    .island-voice-text {
        font-size: 8px !important;
    }

    .top-map-panel.has-island .explore-panel-header {
        grid-template-columns: auto minmax(0, 1fr) auto 16px !important;
        grid-template-rows: 28px !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 1px 6px !important;
    }

    .top-map-panel.has-island .top-panel-nav {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .top-map-panel.has-island .panel-close {
        grid-column: 4 !important;
    }

    .top-map-panel.has-island .panel-subtitle {
    }

    .top-map-panel.has-island .explore-panel-content:not(:empty) {
        min-height: 25px !important;
        height: 25px !important;
        max-height: 25px !important;
        padding: 1px 6px !important;
    }
}

/* Brand refinement — title case, quiet two-tone wordmark. */
.topbar-brand .brand-name {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.topbar-brand .brand-canarias {
    color: #efe2cd !important;
    font-weight: 650 !important;
}

.topbar-brand .brand-cerca {
    color: #87a9b3 !important;
    font-weight: 500 !important;
}

@media (max-width: 760px) {
    .content {
    }

    .topbar {
        padding: 2px 7px 2px 9px !important;
    }

    .topbar-brand .brand-name {
    }

    .top-map-panel.explore-panel:not(.has-island) {
        grid-template-columns: 84px minmax(0, 1fr) 15px !important;
        min-height: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
    }

    .top-map-panel:not(.has-island) .panel-heading-copy {
        padding-left: 8px !important;
    }

    .top-map-panel:not(.has-island) .panel-title {
        font-size: 10px !important;
    }

    .top-map-panel:not(.has-island) .explore-panel-content {
        min-height: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
        padding-top: 3px !important;
    }
}

/* =========================================================
   V23.6 — ENGAGING SECTION NAV + CLEAN TOOL CHIPS
   Keep map-first footprint, but make Explore / Live / News
   obviously interactive and prevent secondary tools clipping.
   ========================================================= */

/* Selected island: give the three primary actions enough visual weight
   without turning them back into a large panel. */
.top-map-panel.has-island .explore-panel-header {
    grid-template-columns: auto minmax(0, 1fr) auto 18px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 3px 10px !important;
    gap: 7px !important;
}

.top-map-panel.has-island .island-context {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(126, 167, 179, .22) !important;
    background: rgba(255,255,255,.018) !important;
    color: #9fb7bd !important;
    font-size: 9px !important;
}

.top-map-panel.has-island .panel-title {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.top-panel-nav {
    gap: 5px !important;
}

.top-panel-nav .nav-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(126, 167, 179, .18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.025) !important;
    color: #a8bec4 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

.top-panel-nav .nav-button:hover,
.top-panel-nav .nav-button:focus-visible {
    border-color: rgba(226, 204, 170, .38) !important;
    background: rgba(226, 204, 170, .075) !important;
    outline: none !important;
}

.top-panel-nav .nav-button[aria-selected="true"] {
    border-color: rgba(226, 204, 170, .38) !important;
    background: rgba(226, 204, 170, .14) !important;
    color: #f3e4cd !important;
    box-shadow: inset 0 0 0 1px rgba(226, 204, 170, .035) !important;
}

.nav-button-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    color: #84aeba !important;
}

.nav-button-icon svg {
}

.nav-button[aria-selected="true"] .nav-button-icon,
.nav-button:hover .nav-button-icon {
    color: #e5cda9 !important;
}

.nav-button-icon-live {
    width: 11px !important;
    flex-basis: 11px !important;
}

.live-pulse-dot {
    position: relative !important;
    display: block !important;
    border-radius: 50% !important;
    background: #8fc4b0 !important;
    box-shadow: 0 0 0 3px rgba(143,196,176,.10) !important;
}

.live-pulse-dot::after {
    content: "" !important;
    position: absolute !important;
    inset: -4px !important;
    border: 1px solid rgba(143,196,176,.35) !important;
    border-radius: 50% !important;
    animation: cc-live-pulse 1.9s ease-out infinite !important;
}

@keyframes cc-live-pulse {
    0% { transform: scale(.55); opacity: .85; }
    70%, 100% { transform: scale(1.25); opacity: 0; }
}

/* Secondary tools: a real strip of complete chips, never vertically clipped. */
.top-map-panel.has-island .explore-panel-content:not(:empty) {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 4px 10px 5px !important;
    background: rgba(8, 28, 37, .99) !important;
}

.top-map-panel .compact-layer-grid {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 29px !important;
    height: 29px !important;
    width: 100% !important;
    padding: 0 10px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    scroll-padding-inline: 8px !important;
}

.top-map-panel .compact-layer-grid::-webkit-scrollbar {
    display: none !important;
}

.top-map-panel .compact-layer-tile {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px 0 7px !important;
    border: 1px solid rgba(126, 167, 179, .15) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.018) !important;
    color: #adbec3 !important;
    overflow: visible !important;
    cursor: pointer !important;
}

.top-map-panel .compact-layer-tile:hover,
.top-map-panel .compact-layer-tile:focus-visible,
.top-map-panel .compact-layer-tile.active {
    border-color: rgba(226, 204, 170, .32) !important;
    background: rgba(226, 204, 170, .085) !important;
    color: #efe0ca !important;
    outline: none !important;
}

.top-map-panel .compact-layer-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(113, 162, 175, .08) !important;
    color: #8eb5bf !important;
    overflow: visible !important;
}

.top-map-panel .compact-layer-icon svg {
    width: 14px !important;
    height: 14px !important;
    overflow: visible !important;
}

.top-map-panel .compact-layer-tile:hover .compact-layer-icon,
.top-map-panel .compact-layer-tile.active .compact-layer-icon {
    background: rgba(226, 204, 170, .09) !important;
    color: #e1c8a5 !important;
}

.top-map-panel .compact-layer-name {
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: inherit !important;
}

.top-map-panel .compact-layer-check {
    margin-left: -2px !important;
    color: #d9c29f !important;
    font-size: 8px !important;
}

/* Preserve map-first layout on mobile, but keep controls tappable. */
@media (max-width: 760px) {
    .top-map-panel.has-island .explore-panel-header {
        grid-template-columns: auto minmax(0, 1fr) 16px !important;
        grid-template-rows: 27px 31px !important;
        min-height: 61px !important;
        height: 61px !important;
        padding: 2px 7px !important;
        gap: 1px 6px !important;
    }

    .top-map-panel.has-island .island-context {
        min-height: 23px !important;
        height: 23px !important;
    }

    .top-map-panel.has-island .panel-heading-copy {
    }

    .top-map-panel.has-island .top-panel-nav {
        justify-self: start !important;
        overflow-x: auto !important;
        padding-bottom: 1px !important;
        scrollbar-width: none !important;
    }

    .top-map-panel.has-island .top-panel-nav::-webkit-scrollbar {
        display: none !important;
    }

    .top-map-panel.has-island .panel-close {
    }

    .top-panel-nav .nav-button {
        min-height: 28px !important;
        height: 28px !important;
        padding-inline: 10px !important;
        font-size: 10px !important;
    }

    .top-map-panel.has-island .explore-panel-content:not(:empty) {
        min-height: 39px !important;
        height: 39px !important;
        max-height: 39px !important;
        padding: 5px 7px !important;
    }

    .top-map-panel .compact-layer-grid {
        min-height: 29px !important;
        height: 29px !important;
        gap: 5px !important;
        padding-right: 18px !important;
    }

    .top-map-panel .compact-layer-tile {
        min-height: 28px !important;
        height: 28px !important;
        padding-right: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-pulse-dot::after {
        animation: none !important;
    }
}

/* =========================================================
   V23.7 — DISCOVERY EXPLORE + CALENDAR
   Map-first interaction: categories + point rail + map focus.
   Existing coastline / bathymetry / boundaries are untouched.
   ========================================================= */

/* Main section buttons: compact, but visually inviting. */
.top-panel-nav {
    gap: 6px !important;
}

.top-panel-nav .nav-button {
    position: relative !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px 0 6px !important;
    gap: 6px !important;
    border: 1px solid rgba(134, 173, 183, .18) !important;
    background: rgba(255,255,255,.022) !important;
    color: #aec2c8 !important;
    font-size: 9.5px !important;
    font-weight: 680 !important;
    overflow: visible !important;
}

.top-panel-nav .nav-button::after {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    right: 11px !important;
    bottom: -3px !important;
    height: 2px !important;
    border-radius: 999px !important;
    opacity: 0 !important;
    transform: scaleX(.5) !important;
    transition: opacity .16s ease, transform .16s ease !important;
}

.top-panel-nav .nav-button:hover,
.top-panel-nav .nav-button:focus-visible {
    transform: translateY(-1px) !important;
    color: #f0e4d1 !important;
    background: rgba(255,255,255,.05) !important;
}

.top-panel-nav .nav-button[aria-selected="true"] {
    color: #f5e7d3 !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}

.top-panel-nav .nav-button[aria-selected="true"]::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

.nav-button-icon {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.045) !important;
    transition: background .16s ease, color .16s ease, transform .16s ease !important;
}

.nav-button-icon svg {
    width: 14px !important;
    height: 14px !important;
}

.nav-button:hover .nav-button-icon,
.nav-button[aria-selected="true"] .nav-button-icon {
    transform: scale(1.04) !important;
}

.nav-button-explore .nav-button-icon {
    color: #e2c08d !important;
    background: rgba(226, 192, 141, .10) !important;
}
.nav-button-explore::after { background: #e2c08d !important; }

.nav-button-live .nav-button-icon {
    color: #91c5ae !important;
    background: rgba(145, 197, 174, .10) !important;
}
.nav-button-live::after { background: #91c5ae !important; }

.nav-button-calendar .nav-button-icon {
    color: #d7a58f !important;
    background: rgba(215, 165, 143, .10) !important;
}
.nav-button-calendar::after { background: #d7a58f !important; }

.nav-button-news .nav-button-icon {
    color: #8db6c5 !important;
    background: rgba(141, 182, 197, .10) !important;
}
.nav-button-news::after { background: #8db6c5 !important; }

.nav-button-icon-live {
    width: 21px !important;
    flex-basis: 21px !important;
}

.live-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    background: #9bd4b8 !important;
    box-shadow: 0 0 0 3px rgba(155,212,184,.10), 0 0 12px rgba(155,212,184,.18) !important;
}

/* The second row can now contain the discovery experience, not giant tiles. */
.top-map-panel.has-island .explore-panel-content:not(:empty) {
    height: auto !important;
    min-height: 36px !important;
    max-height: 112px !important;
    padding: 5px 10px 6px !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(126, 167, 179, .08) !important;
    background: rgba(7, 27, 36, .995) !important;
}

/* Keep Live / News as a single compact row. */
.top-map-panel.has-island .explore-panel-content:has(.compact-layer-grid) {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 96px !important;
    padding: 4px 10px 5px !important;
}

/* ---------- EXPLORE: Wetland-Atlas-inspired discovery rail ---------- */
.explore-discovery {
    display: grid;
    grid-template-rows: 24px 38px;
    gap: 4px;
    min-width: 0;
}

.explore-filter-row,
.explore-point-rail,
.calendar-date-row,
.calendar-event-rail {
    scrollbar-width: none;
}

.explore-filter-row::-webkit-scrollbar,
.explore-point-rail::-webkit-scrollbar,
.calendar-date-row::-webkit-scrollbar,
.calendar-event-rail::-webkit-scrollbar {
    display: none;
}

.explore-filter-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.explore-filter {
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #7898a2;
    font-size: 8.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

.explore-filter:hover,
.explore-filter:focus-visible {
    color: #d9e5e6;
    background: rgba(127, 170, 181, .07);
    outline: none;
}

.explore-filter.active {
    color: #f1dfc5;
    border-color: rgba(225, 191, 140, .24);
    background: rgba(225, 191, 140, .09);
}

.explore-hint {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 8px;
    color: #587782;
    font-size: 7.5px;
    white-space: nowrap;
}

.explore-point-rail {
    display: flex;
    align-items: stretch;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-right: 16px;
}

.explore-point-card {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 112px;
    max-width: 190px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid rgba(129, 171, 181, .14);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
    color: #b6c7cb;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.explore-point-card:hover,
.explore-point-card:focus-visible,
.explore-point-card.hovered {
    transform: translateY(-1px);
    border-color: rgba(226, 204, 170, .30);
    background: rgba(226, 204, 170, .055);
    color: #efe2cf;
    outline: none;
}

.explore-point-card.selected {
    border-color: rgba(226, 204, 170, .42);
    background: rgba(226, 204, 170, .10);
    color: #f4e5d1;
    box-shadow: inset 0 0 0 1px rgba(226, 204, 170, .03);
}

.explore-point-dot {
    width: 8px;
    min-width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c6aed8;
    box-shadow: 0 0 0 3px rgba(198,174,216,.08);
}

.explore-point-card.group-nature .explore-point-dot { background: #98b68f; box-shadow: 0 0 0 3px rgba(152,182,143,.08); }
.explore-point-card.group-villages .explore-point-dot { background: #dcaa8d; box-shadow: 0 0 0 3px rgba(220,170,141,.08); }
.explore-point-card.group-beaches .explore-point-dot { background: #8fbfc7; box-shadow: 0 0 0 3px rgba(143,191,199,.08); }
.explore-point-card.group-viewpoints .explore-point-dot { background: #e0b875; box-shadow: 0 0 0 3px rgba(224,184,117,.08); }
.explore-point-card.group-culture .explore-point-dot { background: #c8a07c; box-shadow: 0 0 0 3px rgba(200,160,124,.08); }

.explore-point-name {
    overflow: hidden;
    color: inherit;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-point-arrow {
    margin-left: auto;
    color: #567983;
    font-size: 9px;
}

.explore-point-card:hover .explore-point-arrow,
.explore-point-card.selected .explore-point-arrow {
    color: #d7c1a0;
}

.explore-loading,
.explore-empty,
.calendar-loading {
    display: flex;
    align-items: center;
    min-height: 36px;
    color: #7898a2;
    font-size: 9px;
}

.explore-loading span,
.calendar-loading span {
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border: 1px solid rgba(222, 199, 163, .26);
    border-top-color: #d9bf98;
    border-radius: 50%;
    animation: cc-spin .8s linear infinite;
}

@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Map-side selected place card — floating, never consumes map height. */
.explore-place-card {
    position: absolute;
    z-index: 12;
    left: 14px;
    bottom: 14px;
    width: min(290px, calc(100vw - 28px));
    padding: 12px 34px 12px 13px;
    border: 1px solid rgba(225, 203, 169, .18);
    border-radius: 14px;
    background: rgba(7, 26, 34, .94);
    color: #e9e1d4;
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
    transition: opacity .16s ease, transform .16s ease;
}

.explore-place-card.hidden {
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
}

.explore-place-card-kicker {
    display: block;
    margin-bottom: 3px;
    color: #8eb2ba;
    font-size: 7.5px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.explore-place-card h3 {
    margin: 0 0 5px;
    color: #f4e4cd;
    font-size: 16px;
    line-height: 1.1;
}

.explore-place-card p {
    margin: 0;
    color: #a6bcc1;
    font-size: 9.5px;
    line-height: 1.35;
}

.explore-place-card a {
    display: inline-block;
    margin-top: 8px;
    color: #dfc69f;
    font-size: 8.5px;
    text-decoration: none;
}

.explore-place-card-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.045);
    color: #87a3aa;
    cursor: pointer;
}

/* ---------- CALENDAR: compact date selector + event rail ---------- */
.calendar-experience {
    display: grid;
    grid-template-rows: 23px 44px;
    gap: 4px;
    min-width: 0;
}

.calendar-date-row {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
}

.calendar-date {
    flex: 0 0 auto;
    height: 21px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #7898a2;
    font-size: 8px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.calendar-date:hover,
.calendar-date:focus-visible {
    color: #e6d8c6;
    background: rgba(215, 165, 143, .06);
    outline: none;
}

.calendar-date.active {
    color: #f0d8cb;
    border-color: rgba(215, 165, 143, .26);
    background: rgba(215, 165, 143, .10);
}

.calendar-event-rail {
    display: flex;
    align-items: stretch;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 16px;
    scroll-snap-type: x proximity;
}

.calendar-event-card {
    position: relative;
    flex: 0 0 205px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 1px 6px;
    height: 42px;
    padding: 5px 9px;
    border: 1px solid rgba(136, 171, 181, .13);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
}

.calendar-event-card:hover,
.calendar-event-card:focus-visible {
    border-color: rgba(215, 165, 143, .28);
    background: rgba(215, 165, 143, .055);
    outline: none;
}

.calendar-event-date {
    grid-column: 1;
    color: #ca9883;
    font-size: 7.2px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.calendar-event-card strong {
    grid-column: 1;
    overflow: hidden;
    color: #dce5e4;
    font-size: 8.5px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-card small {
    display: none;
}

.calendar-event-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: #6c8991;
    font-size: 9px;
}

.calendar-unavailable {
    display: flex;
    align-items: center;
    grid-template-rows: none;
    gap: 9px;
    min-height: 44px;
}

.calendar-unavailable-icon {
    display: grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(215, 165, 143, .08);
    color: #d2a08a;
}

.calendar-unavailable strong,
.calendar-unavailable small {
    display: block;
}

.calendar-unavailable strong {
    color: #d7e2e1;
    font-size: 9px;
}

.calendar-unavailable small {
    margin-top: 2px;
    color: #76939b;
    font-size: 8px;
}

@media (max-width: 980px) {
    .explore-hint { display: none; }

    .top-panel-nav {
        max-width: 48vw !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .top-panel-nav::-webkit-scrollbar { display: none !important; }
}

@media (max-width: 760px) {
    .top-map-panel.has-island .explore-panel-header {
        grid-template-rows: 29px 31px !important;
        min-height: 62px !important;
        height: 62px !important;
    }

    .top-map-panel.has-island .top-panel-nav {
        max-width: calc(100vw - 14px) !important;
        gap: 5px !important;
    }

    .top-panel-nav .nav-button {
        padding: 0 9px 0 5px !important;
        font-size: 9px !important;
    }

    .nav-button-icon {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }

    .top-map-panel.has-island .explore-panel-content:not(:empty) {
        min-height: 34px !important;
        max-height: 82px !important;
        padding: 4px 7px 5px !important;
    }

    .top-map-panel.has-island .explore-panel-content:has(.explore-discovery),
    .top-map-panel.has-island .explore-panel-content:has(.calendar-experience) {
        min-height: 72px !important;
        height: 72px !important;
        max-height: 72px !important;
    }

    .explore-discovery {
        grid-template-rows: 22px 37px;
        gap: 3px;
    }

    .explore-filter {
        height: 20px;
        padding-inline: 7px;
        font-size: 8px;
    }

    .explore-point-card {
        min-width: 106px;
        height: 34px;
    }

    .calendar-experience {
        grid-template-rows: 21px 39px;
        gap: 3px;
    }

    .calendar-event-card {
        flex-basis: 180px;
        height: 38px;
        padding-block: 4px;
    }

    .explore-place-card {
        left: 9px;
        bottom: 9px;
        width: min(270px, calc(100vw - 18px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .explore-loading span,
    .calendar-loading span {
        animation: none;
    }
}

/* =========================================================
   V23.8 — WETLAND-STYLE EXPLORE PROTOTYPE
   Explore does not move the map and does not open a popup.
   A horizontal photo story strip lives over the bottom edge of the map.
   ========================================================= */

/* No second Explore menu row stealing map height. */
.top-map-panel.has-island .explore-panel-content:empty {
    display: none !important;
}

.explore-story-status {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    color: #7f9aa2;
    font-size: 8.5px;
}

.explore-story-status > span {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border: 1px solid rgba(224, 193, 147, .28);
    border-top-color: #dec192;
    border-radius: 50%;
    animation: cc-spin .8s linear infinite;
}

/* Kill the old floating detail card even if stale markup survives a hot reload. */
.explore-place-card {
    display: none !important;
}

.explore-story-dock {
    position: absolute;
    left: 12px;
    right: 74px;
    bottom: 12px;
    grid-template-rows: 22px 138px;
    gap: 6px;
    transition: opacity .18s ease, transform .18s ease;
}

.explore-story-dock.hidden {
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
}

.explore-story-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding-left: 3px;
    color: #f2dfc4;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.explore-story-heading > span {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 750;
}

.explore-story-heading > small {
    overflow: hidden;
    color: rgba(229, 239, 240, .72);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-story-track {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 18vw 2px 0;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    outline: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
}

.explore-story-track::-webkit-scrollbar {
    display: none;
}

.explore-story-card {
    position: relative;
    flex: 0 0 clamp(320px, 31vw, 430px);
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    height: 136px;
    overflow: hidden;
    border: 1px solid rgba(220, 199, 167, .16);
    border-radius: 15px;
    background: rgba(7, 25, 33, .92);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    cursor: pointer;
    opacity: .72;
    transform: translateY(3px) scale(.985);
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
    backdrop-filter: blur(8px);
}

.explore-story-card:hover,
.explore-story-card:focus-visible,
.explore-story-card.is-hovered,
.explore-story-card.is-current {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(235, 211, 175, .42);
    outline: none;
}

.explore-story-photo {
    min-width: 0;
    background:
        radial-gradient(circle at 35% 25%, rgba(218, 191, 151, .20), transparent 42%),
        #193642;
}

.explore-story-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 58%, rgba(7, 25, 33, .22));
    pointer-events: none;
}

.explore-story-photo img {
    display: block;
    transition: transform .4s ease;
}

.explore-story-card:hover .explore-story-photo img,
.explore-story-card.is-current .explore-story-photo img {
    transform: scale(1.035);
}

.explore-story-index,
.explore-story-type {
    position: absolute;
    z-index: 2;
    top: 8px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(5, 19, 25, .66);
    color: #f2e6d5;
    font-size: 7px;
    line-height: 1;
    backdrop-filter: blur(7px);
}

.explore-story-index { left: 8px; }
.explore-story-type { right: 8px; }

.explore-story-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 12px 9px;
}

.explore-story-copy h3 {
    margin: 0 0 6px;
    color: #f2dfc7;
    font-size: 16px;
    line-height: 1.05;
}

.explore-story-copy p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #a9bec3;
    font-size: 9px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.explore-story-copy small {
    overflow: hidden;
    margin-top: auto;
    padding-top: 6px;
    color: #5f7e87;
    font-size: 6.6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .explore-story-dock {
        left: 8px;
        right: 8px;
        bottom: 8px;
        grid-template-rows: 18px 126px;
        gap: 4px;
    }

    .explore-story-heading > span {
        font-size: 9.5px;
    }

    .explore-story-heading > small {
        font-size: 7px;
    }

    .explore-story-track {
        gap: 7px;
        padding-right: 10vw;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    }

    .explore-story-card {
        flex-basis: min(86vw, 360px);
        grid-template-columns: 44% minmax(0, 1fr);
        height: 124px;
        border-radius: 13px;
    }

    .explore-story-copy {
        padding: 10px 10px 8px;
    }

    .explore-story-copy h3 {
        margin-bottom: 4px;
        font-size: 14px;
    }

    .explore-story-copy p {
        font-size: 8.2px;
        -webkit-line-clamp: 4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .explore-story-card,
    .explore-story-photo img,
    .explore-story-dock {
        transition: none !important;
    }

    .explore-story-track {
        scroll-behavior: auto;
    }
}

/* =========================================================
   V23.9 — LEFT SCROLLYTELLING EXPLORE
   Wetland reference: narrative panel on the left, map on the right.
   The map camera stays fixed; scrolling only changes the highlighted point.
   ========================================================= */

/* Remove the V23.8 bottom carousel entirely. */
.map-area.explore-story-open {
    grid-template-columns: clamp(350px, 35vw, 560px) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    background: #08232d;
}

.map-area.explore-story-open > .top-map-panel.explore-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

.map-area.explore-story-open > #map {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.explore-story-dock {
    position: relative !important;
    z-index: 20;
    grid-column: 1 !important;
    grid-row: 2 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 34px 0 28px;
    border-right: 1px solid rgba(149, 190, 201, .12);
    background: #082a36;
    color: #c9dce1;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 169, 181, .28) transparent;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    overscroll-behavior: contain;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.explore-story-dock.hidden {
    display: none !important;
}

.explore-story-intro {
    min-height: min(580px, 82vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px 0 42px;
    scroll-snap-align: start;
}

.explore-story-kicker {
    margin-bottom: 20px;
    color: #7cbdd2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.explore-story-intro h2 {
    margin: 0;
    max-width: 470px;
    color: #62b7d3;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.25vw, 72px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.025em;
}

.explore-story-intro p {
    max-width: 470px;
    margin: 26px 0 0;
    color: rgba(206, 224, 229, .78);
    font-size: 15px;
    line-height: 1.72;
}

.explore-story-scroll-hint {
    margin-top: auto;
    padding-top: 34px;
    color: rgba(218, 231, 234, .78);
    font-size: 9px;
    letter-spacing: .13em;
}

.explore-story-scroll-hint b {
    display: inline-block;
    margin-left: 8px;
    color: #a9cbd4;
    font-size: 19px;
    font-weight: 400;
    transform: translateY(2px);
}

.explore-story-track {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: none !important;
}

.explore-story-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: min(620px, 86vh);
    margin: 0 !important;
    padding: 56px 0 64px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid rgba(151, 190, 200, .13) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .48 !important;
    transform: none !important;
    cursor: default !important;
    scroll-snap-align: start;
    transition: opacity .22s ease !important;
    backdrop-filter: none !important;
}

.explore-story-card:hover,
.explore-story-card:focus-visible,
.explore-story-card.is-hovered,
.explore-story-card.is-current {
    opacity: 1 !important;
    transform: none !important;
    border-color: rgba(151, 190, 200, .13) !important;
    outline: none !important;
}

.explore-story-section-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    color: #77aaba;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.explore-story-card h3 {
    margin: 0;
    color: #e9dec9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 3vw, 52px);
    font-weight: 500;
    line-height: 1;
}

.explore-story-card > p {
    margin: 18px 0 24px;
    color: rgba(207, 224, 228, .8);
    font-size: 14px;
    line-height: 1.65;
}

.explore-story-photo {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    background: #163945;
}

.explore-story-photo::after {
    display: none !important;
}

.explore-story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important;
    transition: none !important;
}

.explore-story-photo figcaption {
    position: absolute;
    right: 8px;
    bottom: 7px;
    max-width: calc(100% - 16px);
    padding: 4px 6px;
    background: rgba(3, 18, 24, .64);
    color: rgba(238, 242, 239, .72);
    font-size: 6.5px;
    line-height: 1.25;
    backdrop-filter: blur(5px);
}

.explore-story-progress {
    position: absolute;
    z-index: 32;
    top: 55%;
    left: calc(clamp(350px, 35vw, 560px) - 7px);
    display: flex;
    flex-direction: column;
    gap: 9px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.explore-story-progress.hidden {
    display: none !important;
}

.explore-story-progress-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(224, 233, 234, .52);
    box-shadow: 0 0 0 1px rgba(4, 22, 29, .55);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease;
}

.explore-story-progress-dot:hover,
.explore-story-progress-dot.is-current {
    background: #f6f3e9;
    transform: scale(1.3);
}

/* In story mode the Explore row stays compact; the story itself owns the left column. */
.map-area.explore-story-open .top-map-panel.has-island .explore-panel-content:empty {
    display: none !important;
}

@media (max-width: 900px) {
    .map-area.explore-story-open {
        grid-template-columns: min(46vw, 430px) minmax(0, 1fr) !important;
    }

    .explore-story-progress {
        left: calc(min(46vw, 430px) - 6px);
    }

    .explore-story-dock {
        padding-inline: 20px 26px;
    }

    .explore-story-intro h2 {
        font-size: clamp(34px, 5vw, 48px);
    }
}

@media (max-width: 680px) {
    /* Mobile prototype: narrative takes the screen; map is not squeezed into an unusable sliver. */
    .map-area.explore-story-open {
        grid-template-columns: 1fr !important;
    }

    .map-area.explore-story-open > #map {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .explore-story-dock {
        position: absolute !important;
        inset: 0 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: min(88vw, 390px) !important;
        height: 100% !important;
        background: rgba(8, 42, 54, .97);
        box-shadow: 12px 0 30px rgba(0,0,0,.22);
    }

    .explore-story-progress {
        left: min(calc(88vw - 4px), 386px);
    }

    .explore-story-intro {
        min-height: 72vh;
    }
}

/* =========================================================
   V23.10 — ONE STABLE LEFT DOCK FOR ALL SECTIONS
   Once an island is selected the map geometry stays fixed.
   Explore / Live / Calendar / News only swap dock content.
   ========================================================= */

.map-area {
    --cc-dock-width: clamp(320px, 23vw, 380px);
}

.map-area.section-dock-open,
.map-area.section-dock-open.explore-story-open {
    display: grid !important;
    grid-template-columns: var(--cc-dock-width) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    background: #08232d;
}

.map-area.section-dock-open > .top-map-panel.explore-panel,
.map-area.section-dock-open.explore-story-open > .top-map-panel.explore-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

.map-area.section-dock-open > #map,
.map-area.section-dock-open.explore-story-open > #map {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.section-dock,
.map-area.section-dock-open .explore-story-dock,
.map-area.section-dock-open.explore-story-open .explore-story-dock {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.section-dock {
    position: relative;
    z-index: 21;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 22px 20px 28px;
    border-right: 1px solid rgba(149, 190, 201, .12);
    background: #082a36;
    color: #c9dce1;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 169, 181, .28) transparent;
}

.section-dock.hidden {
    display: none !important;
}

.section-dock-home {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 24px 8px 54px;
}

.section-dock-kicker {
    margin-bottom: 10px;
    color: #7cbdd2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.section-dock-home h2 {
    margin: 0 0 12px;
    color: #eadfc9;
    font: 500 31px/1.02 Georgia, "Times New Roman", serif;
}

.section-dock-home p {
    margin: 0;
    color: rgba(207,224,228,.82);
    font-size: 13px;
    line-height: 1.6;
}

.section-dock-home small {
    margin-top: 18px;
    color: rgba(139,176,185,.72);
    font-size: 9px;
    line-height: 1.5;
}

/* Live / News tools live inside the same fixed dock instead of growing the top panel. */
.section-dock .compact-layer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    overflow: visible !important;
    padding: 0 !important;
}

.section-dock .compact-layer-tile {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(135,180,191,.17) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.025) !important;
    text-align: left !important;
}

.section-dock .compact-layer-tile:hover,
.section-dock .compact-layer-tile:focus-visible,
.section-dock .compact-layer-tile.active {
    border-color: rgba(122,190,208,.48) !important;
    background: rgba(91,166,187,.10) !important;
}

.section-dock .compact-layer-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(99,180,202,.10) !important;
    color: #8cc6d5 !important;
}

.section-dock .compact-layer-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.section-dock .compact-layer-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end;
    overflow: visible !important;
    color: #d9e4e6 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

.section-dock .compact-layer-status {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 2px !important;
    color: #6f98a3 !important;
    font-size: 7px !important;
}

.section-dock .api-panel-results {
    margin-top: 12px !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Explore keeps the same left column. No tab switch changes map width. */
.map-area.section-dock-open .explore-story-dock {
    padding: 0 22px 0 22px !important;
    background: #082a36 !important;
}

.map-area.section-dock-open .explore-story-intro {
    min-height: min(500px, 67vh) !important;
    padding: 34px 0 28px !important;
}

.map-area.section-dock-open .explore-story-kicker {
    margin-bottom: 12px !important;
}

.map-area.section-dock-open .explore-story-intro h2 {
    max-width: 320px !important;
    font-size: clamp(34px, 2.7vw, 48px) !important;
}

.map-area.section-dock-open .explore-story-intro p {
    margin-top: 16px !important;
    max-width: 325px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.explore-story-tools {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 20px;
}

.explore-story-tool {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 7px 3px 6px;
    border: 1px solid rgba(134,180,191,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    color: #8eabb2;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.explore-story-tool:hover,
.explore-story-tool:focus-visible,
.explore-story-tool.is-active {
    border-color: rgba(111,190,211,.52);
    background: rgba(82,170,194,.11);
    color: #e5dcc9;
    outline: none;
    transform: translateY(-1px);
}

.explore-story-tool-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(104,184,205,.09);
    color: #83bfd0;
}

.explore-story-tool-icon svg {
    width: 16px;
    height: 16px;
}

.explore-story-tool > span:last-child {
    overflow: hidden;
    width: 100%;
    font-size: 7px;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-area.section-dock-open .explore-story-scroll-hint {
    padding-top: 18px !important;
}

.map-area.section-dock-open .explore-story-card {
    min-height: min(560px, 78vh) !important;
    padding: 42px 0 52px !important;
}

.map-area.section-dock-open .explore-story-card h3 {
    font-size: clamp(30px, 2.4vw, 42px) !important;
}

.explore-story-progress {
    left: calc(var(--cc-dock-width) - 6px) !important;
}

@media (max-width: 760px) {
    .map-area.section-dock-open,
    .map-area.section-dock-open.explore-story-open {
    }

    .map-area.section-dock-open > #map,
    .map-area.section-dock-open.explore-story-open > #map {
    }

    .section-dock,
    .map-area.section-dock-open .explore-story-dock {
        position: absolute !important;
        z-index: 25 !important;
        inset: auto auto 0 0 !important;
        width: min(86vw, 370px) !important;
        height: 100% !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        box-shadow: 14px 0 30px rgba(0,0,0,.22);
    }

    .explore-story-progress {
        left: min(calc(86vw - 5px), 365px) !important;
    }

    .explore-story-tools {
        grid-template-columns: repeat(5, 52px);
        overflow-x: auto;
        padding-bottom: 3px;
    }
}

/* =========================================================
   V23.11 — CONTENT-FIRST UNIFIED DOCK
   Explore / Live / Calendar / News / Guide share one stable
   left column. Section changes never resize or move the map.
   ========================================================= */

.map-area {
    --cc-dock-width: clamp(330px, 24vw, 410px);
}

/* Five section tabs still fit as a restrained navigation row. */
.top-panel-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.top-panel-nav::-webkit-scrollbar {
    display: none !important;
}

.top-panel-nav .nav-button {
    flex: 0 0 auto !important;
}

.nav-button-guide .nav-button-icon {
    color: #c9b98d !important;
    background: rgba(201, 185, 141, .10) !important;
}

.nav-button-guide::after {
    background: #c9b98d !important;
}

/* The selected-island top strip never grows with section content. */
.top-map-panel.has-island .explore-panel-content {
    display: none !important;
}

.section-dock {
    padding: 0 !important;
    background: #082a36 !important;
    overscroll-behavior: contain;
}

.section-dock-home {
    padding: 30px 26px 54px !important;
}

/* ---------- Shared content states ---------- */
.content-state {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 28px 24px;
    color: #92afb7;
}

.content-state strong {
    color: #e7dcc9;
    font: 500 24px/1.08 Georgia, "Times New Roman", serif;
}

.content-state small {
    color: #7899a2;
    font-size: 10px;
    line-height: 1.5;
}

.content-loading {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 80px;
    font-size: 10px;
}

.content-loading span {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(231,220,201,.25);
    border-top-color: #e7dcc9;
    border-radius: 50%;
    animation: cc-spin .8s linear infinite;
}

.content-empty {
    margin: 0;
    color: #6f929c;
    font-size: 10px;
}

/* ---------- Explore: actual Wetland-style scrollytelling ---------- */
.story-experience {
    min-height: 100%;
    background: #082a36;
}

.story-tools {
    position: sticky;
    z-index: 8;
    top: 0;
    display: grid;
    gap: 5px;
    padding: 10px 12px 9px;
    border-bottom: 1px solid rgba(151, 190, 200, .11);
    background: rgba(8, 42, 54, .97);
    backdrop-filter: blur(12px);
}

.story-tool {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 2px 6px;
    border: 1px solid rgba(134,180,191,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
    color: #8daab2;
    cursor: pointer;
}

.story-tool:hover,
.story-tool:focus-visible,
.story-tool.is-active {
    border-color: rgba(217,194,158,.35);
    background: rgba(217,194,158,.07);
    color: #eadfcf;
    outline: none;
}

.story-tool.is-disabled {
    opacity: .34;
    cursor: default;
}

.story-tool-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(118,181,198,.08);
    color: #86bdcb;
}

.story-tool-icon svg {
    width: 15px;
    height: 15px;
}

.story-tool > span:last-child {
    overflow: hidden;
    width: 100%;
    font-size: 7px;
    font-weight: 650;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-list {
    display: block;
}

.story-section {
    min-height: min(650px, 88vh);
    padding: 42px 24px 56px;
    border-bottom: 1px solid rgba(151, 190, 200, .12);
    color: #cbdde1;
    opacity: .43;
    transition: opacity .26s ease;
    scroll-margin-top: 64px;
}

.story-section:hover,
.story-section:focus-visible,
.story-section.is-current {
    opacity: 1;
    outline: none;
}

.story-section-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    color: #72a6b5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.story-image {
    position: relative;
    width: 100%;
    margin: 0 0 22px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(155,193,202,.15);
    border-radius: 14px;
    background: #153945;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-image figcaption {
    position: absolute;
    right: 8px;
    bottom: 7px;
    max-width: calc(100% - 16px);
    padding: 4px 6px;
    border-radius: 5px;
    background: rgba(3, 18, 24, .68);
    color: rgba(235,242,240,.70);
    font-size: 6.5px;
    line-height: 1.25;
    backdrop-filter: blur(5px);
}

.story-image figcaption a {
    color: inherit;
}

.story-section h3 {
    margin: 0;
    color: #eadfc9;
    font: 500 clamp(30px, 2.6vw, 44px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: -.02em;
}

.story-section p {
    margin: 14px 0 0;
    color: rgba(206,224,229,.76);
    font-size: 12px;
    line-height: 1.65;
}

.story-section .story-lead {
    color: rgba(224,235,237,.90);
    font-size: 13px;
}

.story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 16px;
}

.story-tags span {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(119,173,187,.08);
    color: #86aeb8;
    font-size: 7px;
}

.story-source-link {
    display: inline-block;
    margin-top: 18px;
    color: #d8c29f;
    font-size: 9px;
    text-decoration: none;
}

/* ---------- Calendar: month grid + selected-day agenda ---------- */
.calendar-month-experience {
    min-height: 100%;
    padding: 18px 16px 28px;
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    gap: 8px;
}

.calendar-toolbar strong {
    color: #eadfc9;
    font: 500 25px/1 Georgia, "Times New Roman", serif;
    text-align: center;
    text-transform: capitalize;
}

.calendar-toolbar button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(134,180,191,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.02);
    color: #9eb8bf;
    cursor: pointer;
}

.calendar-category-filter,
.guide-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    margin-top: 14px;
    padding-bottom: 3px;
    scrollbar-width: none;
}

.calendar-category-filter::-webkit-scrollbar,
.guide-tabs::-webkit-scrollbar {
    display: none;
}

.calendar-category,
.guide-tab {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(134,180,191,.12);
    border-radius: 999px;
    background: transparent;
    color: #7f9fa8;
    font-size: 8px;
    cursor: pointer;
    text-transform: capitalize;
}

.calendar-category:hover,
.calendar-category.active,
.guide-tab:hover,
.guide-tab.active {
    border-color: rgba(216,194,159,.30);
    background: rgba(216,194,159,.07);
    color: #e8dbc6;
}

.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-top: 14px;
}

.calendar-weekday {
    padding: 4px 0;
    color: #5f818b;
    font-size: 7px;
    font-weight: 700;
    text-align: center;
}

.calendar-day {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(129,171,181,.10);
    border-radius: 9px;
    background: rgba(255,255,255,.012);
    color: #8ba5ad;
    font-size: 9px;
    cursor: pointer;
}

.calendar-day.is-empty {
    border: 0;
    background: transparent;
}

.calendar-day.has-events {
    color: #e4d8c4;
    background: rgba(216,170,145,.055);
}

.calendar-day.is-selected {
    border-color: rgba(222,180,155,.46);
    background: rgba(222,180,155,.13);
    color: #f2e4d2;
}

.calendar-day small {
    position: absolute;
    right: 4px;
    bottom: 3px;
    color: #c89f8b;
    font-size: 6px;
}

.calendar-day-agenda {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(151,190,200,.12);
}

.calendar-day-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #c7d8dc;
    font-size: 10px;
    text-transform: capitalize;
}

.calendar-day-heading small {
    color: #668a94;
    font-size: 7px;
}

.calendar-day-list {
    display: grid;
    gap: 7px;
}

.calendar-list-event {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(135,180,191,.12);
    border-radius: 11px;
    background: rgba(255,255,255,.018);
    color: inherit;
    text-decoration: none;
}

.calendar-list-event:not(:has(img)) {
    grid-template-columns: 1fr;
}

.calendar-list-event:hover {
    border-color: rgba(215,172,148,.32);
    background: rgba(215,172,148,.05);
}

.calendar-list-event img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 8px;
}

.calendar-event-meta {
    display: block;
    color: #b78e7c;
    font-size: 7px;
    text-transform: capitalize;
}

.calendar-list-event strong {
    display: block;
    margin-top: 3px;
    color: #e3dacc;
    font-size: 10px;
    line-height: 1.25;
}

.calendar-list-event small {
    display: block;
    margin-top: 3px;
    color: #7898a2;
    font-size: 7px;
}

.calendar-list-event p {
    display: -webkit-box;
    margin: 5px 0 0;
    overflow: hidden;
    color: #8da8af;
    font-size: 8px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ---------- Guide: same scrollytelling grammar ---------- */
.guide-experience {
    min-height: 100%;
}

.guide-tabs {
    position: sticky;
    z-index: 8;
    top: 0;
    margin: 0;
    padding: 11px 12px 9px;
    border-bottom: 1px solid rgba(151,190,200,.11);
    background: rgba(8,42,54,.97);
    backdrop-filter: blur(12px);
}

.guide-story-list .story-section {
    min-height: min(620px, 84vh);
}

.guide-ingredients {
    display: grid;
    gap: 4px;
    margin-top: 15px;
    padding: 10px 11px;
    border-left: 2px solid rgba(212,180,138,.42);
    background: rgba(212,180,138,.035);
}

.guide-ingredients strong {
    color: #d8c7aa;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.guide-ingredients span {
    color: #90aab1;
    font-size: 9px;
    line-height: 1.5;
}

.guide-list {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.guide-restaurant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(134,180,191,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    opacity: .68;
}

.guide-restaurant:hover,
.guide-restaurant:focus-visible,
.guide-restaurant.is-current {
    border-color: rgba(214,183,140,.33);
    background: rgba(214,183,140,.05);
    opacity: 1;
    outline: none;
}

.guide-restaurant span {
    color: #7196a0;
    font-size: 7px;
    text-transform: uppercase;
}

.guide-restaurant strong {
    display: block;
    margin-top: 4px;
    color: #e6dccb;
    font-size: 12px;
}

.guide-restaurant small,
.guide-restaurant p {
    display: block;
    margin: 4px 0 0;
    color: #819da5;
    font-size: 8px;
    line-height: 1.4;
}

.guide-restaurant > a {
    align-self: center;
    color: #d3b98e;
    text-decoration: none;
}

/* Live and News keep the exact same dock dimensions. */
.section-dock .compact-layer-grid {
    padding: 14px !important;
}

.section-dock .api-panel-results {
    margin: 0 !important;
    padding: 0 14px 20px !important;
}

@media (max-width: 900px) {
    .map-area {
        --cc-dock-width: min(44vw, 380px);
    }

    .story-section {
        padding-inline: 18px;
    }
}

@media (max-width: 760px) {
    .section-dock {
        width: min(88vw, 390px) !important;
    }

    .story-section {
        min-height: 72vh;
        padding: 34px 18px 44px;
    }

    .story-section h3 {
        font-size: 30px;
    }

    .calendar-month-experience {
        padding-inline: 12px;
    }

    .story-tools {
        scrollbar-width: none;
    }

    .story-tools::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-section {
        transition: none;
    }
}


/* =========================================================
   V23.11.4 — MOBILE MAP-FIRST FIX
   On phones the map remains visible and section content becomes
   a bottom sheet instead of an 88vw left wall.
   ========================================================= */
@media (max-width: 760px) {
    .map-area.section-dock-open,
    .map-area.section-dock-open.explore-story-open {
        grid-template-columns: 1fr !important;
    }

    .map-area.section-dock-open > #map,
    .map-area.section-dock-open.explore-story-open > #map {
    }

    .section-dock,
    .map-area.section-dock-open .explore-story-dock,
    .map-area.section-dock-open.explore-story-open .explore-story-dock {
        position: absolute !important;
        z-index: 25 !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: min(58dvh, 520px) !important;
        min-height: 280px !important;
        max-height: 64dvh !important;
        border-top: 1px solid rgba(149, 190, 201, .18) !important;
        border-right: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -14px 34px rgba(0, 0, 0, .30) !important;
        background: rgba(8, 42, 54, .985) !important;
    }

    .section-dock::before,
    .map-area.section-dock-open .explore-story-dock::before {
        content: "";
        position: sticky;
        z-index: 40;
        top: 6px;
        display: block;
        width: 42px;
        height: 4px;
        margin: 6px auto 2px;
        border-radius: 999px;
        background: rgba(205, 224, 229, .34);
        pointer-events: none;
    }

    .map-area.section-dock-open .explore-story-dock {
        padding: 0 18px !important;
    }

    .map-area.section-dock-open .explore-story-intro,
    .map-area.section-dock-open .explore-story-card,
    .story-section,
    .guide-story-list .story-section {
        min-height: min(470px, 52dvh) !important;
    }

    .map-area.section-dock-open .explore-story-card {
        padding-top: 28px !important;
        padding-bottom: 36px !important;
    }

    .story-section {
        padding: 26px 18px 34px !important;
    }

    .explore-story-progress {
        display: none !important;
    }
}


/* v23.11.10 — compact, useful map hover cards for Places */
.api-map-popup .api-popup-kicker {
    display: block;
    margin-bottom: 3px;
    color: #9fc7ce;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.api-map-popup .api-map-popup-summary {
    margin: 0 0 8px;
    max-width: 255px;
    color: #d2e0e3;
    font-size: 10.5px;
    line-height: 1.45;
}

.api-map-popup .api-popup-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 7px;
}

.api-hover-popup,
.api-hover-popup .maplibregl-popup-content {
    pointer-events: none;
}


/* v23.11.12 — Lugares category browser */
.places-category-bar,
.beaches-category-bar {
    position: sticky;
    z-index: 7;
    top: 60px;
    display: none;
    flex-wrap: wrap;
    gap: 7px;
    overflow: visible;
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(151,190,200,.10);
    background: rgba(8,42,54,.96);
}

.places-category-bar.is-visible,
.beaches-category-bar.is-visible {
    display: flex;
}

.places-category-chip {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid rgba(134,180,191,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #9db7bd;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .01em;
    cursor: pointer;
}

.places-category-chip:hover,
.places-category-chip:focus-visible,
.places-category-chip.is-active {
    border-color: rgba(217,194,158,.48);
    background: rgba(217,194,158,.10);
    color: #f0e5d5;
    outline: none;
}


/* v23.11.14 — category interaction feedback */
.places-category-chip.is-active {
    border-color: rgba(232, 204, 158, .88);
    background: rgba(232, 204, 158, .22);
    color: #fff7ea;
    box-shadow: inset 0 0 0 1px rgba(232, 204, 158, .10);
}
.places-category-chip:disabled {
}

/* =========================================================
   V23.11.16 — EXPLORE INFORMATION ARCHITECTURE
   Four primary tools; horizontal subfilters; one route at a time.
   ========================================================= */

.story-tools {
}

.places-category-bar,
.beaches-category-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(218, 199, 164, .45) transparent;
    padding-right: 28px;
}

.places-category-bar::-webkit-scrollbar,
.beaches-category-bar::-webkit-scrollbar,
.trails-route-strip::-webkit-scrollbar {
    height: 5px;
}

.places-category-bar::-webkit-scrollbar-thumb,
.beaches-category-bar::-webkit-scrollbar-thumb,
.trails-route-strip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(218, 199, 164, .42);
}

.places-category-chip {
    scroll-snap-align: start;
}

/* Core Lugares categories stay visible even if a source temporarily returns
   no rows. We never silently delete Pueblos again. */
.places-category-chip:disabled {
    display: inline-flex;
    opacity: .36;
    cursor: default;
}

.explore-story-body[hidden] {
    display: none !important;
}

.trails-browser {
    display: none;
    padding: 10px 0 12px;
    border-bottom: 1px solid rgba(151, 190, 200, .10);
    background: rgba(8, 42, 54, .97);
}

.trails-browser.is-visible {
    display: block;
}

.trails-browser-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px 8px;
}

.trails-browser-head strong {
    color: #f0e5d5;
    font-size: 11px;
}

.trails-browser-head span {
    color: #7fa3ad;
    font-size: 9px;
}

.trails-route-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(218, 199, 164, .45) transparent;
    padding: 0 12px 7px;
}

.trail-route-card {
    flex: 0 0 min(210px, 68vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 9px 11px;
    border: 1px solid rgba(134, 180, 191, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    color: #a8c0c6;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}

.trail-route-card strong {
    color: inherit;
    line-height: 1.28;
}

.trail-route-card span {
}

.trail-route-card:hover,
.trail-route-card:focus-visible,
.trail-route-card.is-active {
    border-color: rgba(232, 204, 158, .72);
    background: rgba(232, 204, 158, .13);
    color: #fff3df;
    outline: none;
}

@media (max-width: 760px) {
    .story-tools {
    }
}

.places-category-chip[hidden] {
    display: none !important;
}

/* =========================================================
   V23.11.17 — LOCAL JSON DATA FOUNDATION / MANUAL REFRESH
   ========================================================= */
.explore-data-refresh {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(151, 190, 200, .10);
    background: rgba(8, 42, 54, .97);
}

.explore-data-refresh.is-visible {
    display: flex;
}

.explore-data-refresh button {
    border: 1px solid rgba(217, 194, 158, .34);
    border-radius: 999px;
    background: rgba(217, 194, 158, .08);
    color: #efe3d1;
    padding: 6px 10px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.explore-data-refresh button:hover,
.explore-data-refresh button:focus-visible {
    border-color: rgba(232, 204, 158, .75);
    background: rgba(217, 194, 158, .14);
    outline: none;
}

.explore-data-refresh button:disabled {
    opacity: .55;
    cursor: wait;
}

.explore-data-refresh span {
    min-width: 0;
    color: #7fa3ad;
    font-size: 8.5px;
    text-align: right;
}

/* V23.11.18 — refresh controls must always stay clickable above map overlays. */
.explore-data-refresh {
    position: relative;
    z-index: 8;
    pointer-events: auto;
    flex-shrink: 0;
}
.explore-data-refresh button {
    pointer-events: auto;
    position: relative;
    z-index: 9;
}

/* =========================================================
   V23.11.20 — CURATED EXPLORE
   Raw imports are candidates; UI shows a small published subset.
   ========================================================= */

/* Five Explore tools now that Flora is a first-class layer. */
.story-tools {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Routes are a readable vertical shortlist, not an endless horizontal strip. */
.trails-route-strip,
.trails-route-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    overflow: visible;
    padding: 0 12px 8px;
}

.trail-route-card {
    width: 100%;
    min-height: 0;
    flex: none;
    gap: 5px;
    padding: 10px 11px;
}

.trail-route-card strong {
    font-size: 11px;
}

.trail-route-card em {
    display: -webkit-box;
    overflow: hidden;
    color: #9bb4ba;
    font-size: 9px;
    font-style: normal;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.trail-route-card span {
    color: #7899a2;
    font-size: 8.5px;
}

.api-map-popup-note {
    margin: 8px 0 0;
    color: #8fa9af;
    font-size: 10px;
    line-height: 1.4;
}

@media (max-width: 760px) {
    .story-tools {
        grid-template-columns: repeat(5, 58px);
        overflow-x: auto;
        justify-content: start;
    }
}

/* =========================================================
   V23.11.21 — EXPLORE LIST NAVIGATION + LIVE SIDEBAR DETAILS
   No horizontal category carousels. Lists drive the map.
   ========================================================= */

.explore-browser {
    display: none;
    padding: 10px 12px 14px;
    border-bottom: 1px solid rgba(151,190,200,.10);
    background: rgba(8,42,54,.97);
}

.explore-browser.is-visible {
    display: block;
}

.explore-browser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.explore-browser-head strong {
    color: #f0e5d5;
    font-size: 11px;
}

.explore-browser-head span {
    color: #7fa3ad;
    font-size: 8.5px;
}

.explore-browser-head select {
    min-width: 128px;
    max-width: 58%;
    padding: 7px 28px 7px 10px;
    border: 1px solid rgba(134,180,191,.18);
    border-radius: 10px;
    background: #0b3542;
    color: #d9e5e7;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.explore-item-list {
    display: grid;
    gap: 7px;
}

.explore-item-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid rgba(134,180,191,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    color: #a8c0c6;
    text-align: left;
    cursor: pointer;
}

.explore-item-card:hover,
.explore-item-card:focus-visible,
.explore-item-card.is-active {
    border-color: rgba(232,204,158,.60);
    background: rgba(232,204,158,.10);
    color: #fff3df;
    outline: none;
}

.explore-item-card strong {
    color: inherit;
    font-size: 11px;
    line-height: 1.3;
}

.explore-item-card em {
    display: -webkit-box;
    overflow: hidden;
    color: #91acb3;
    font-size: 9px;
    font-style: normal;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.explore-item-card span {
    color: #6f929b;
    font-size: 8px;
}

.explore-more-button {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(134,180,191,.15);
    border-radius: 10px;
    background: transparent;
    color: #8fb0b7;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.explore-more-button:hover,
.explore-more-button:focus-visible {
    border-color: rgba(232,204,158,.50);
    color: #f0e5d5;
    outline: none;
}

/* Old horizontal Explore subfilter bars are retired. */
.places-category-bar,
.beaches-category-bar {
    display: none !important;
}

.live-detail-sidebar {
    margin: 0 12px 12px;
    padding: 12px;
    border: 1px solid rgba(134,180,191,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}

.live-detail-sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.live-detail-sidebar-head span {
    color: #7196a0;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.live-detail-sidebar-head strong {
    color: #e8dfd1;
    font-size: 11px;
}

.live-detail-sidebar .api-panel-card {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.live-detail-sidebar .weather-popup-v12,
.live-detail-sidebar .weather-popup-v11,
.live-detail-sidebar .weather-map-popup {
    width: auto;
    max-width: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.live-detail-sidebar .weather-popup-stats,
.live-detail-sidebar .api-detail-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.live-detail-sidebar .weather-popup-stats > *,
.live-detail-sidebar .api-detail-grid > * {
    min-width: 0;
}

@media (max-width: 760px) {
    .explore-browser-head {
        align-items: stretch;
        flex-direction: column;
    }
    .explore-browser-head select {
        max-width: none;
        width: 100%;
    }
}

/* v23.11.23 — Guide chapter picker: many editorial chapters without a horizontal scroller. */
.guide-section-picker {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
}

.guide-section-picker label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .68;
}

.guide-section-picker select {
    width: 100%;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(8, 32, 39, .82);
    color: inherit;
    padding: 10px 34px 10px 12px;
    font: inherit;
}

.guide-section-picker small {
    opacity: .62;
}

.guide-meta-note,
.guide-data-note,
.guide-experience-stops {
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 10px;
}

.guide-meta-note {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.guide-meta-note span,
.guide-data-note,
.guide-experience-stops small {
    opacity: .72;
}

.guide-experience-stops ol {
    margin: 8px 0 0;
    padding-left: 20px;
}

.guide-experience-stops li {
    margin: 0 0 9px;
}

.guide-experience-stops li span,
.guide-experience-stops li small {
    display: block;
}



/* Snapshot provenance — News / dynamic data */
.section-dock .section-snapshot-status {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 8px;
}

.section-dock .section-snapshot-status span {
    display: inline-flex;
    width: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(8, 36, 47, .34);
    color: rgba(216, 232, 235, .72);
    font-size: 7.5px;
    line-height: 1.15;
}


/* ===== ORIGINAL: style-sidebar-static-camera.css ===== */
/* Desktop map-first layout.
   IMPORTANT: the left sidebar exists only AFTER an island is selected.
   The initial "Elige una isla" state keeps the original full-width map + top chooser. */
@media (min-width: 761px) {
    .map-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        min-height: 0 !important;
    }

    #map {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Only the selected-island state reserves a real left content column. */
    .map-area:has(.top-map-panel.explore-panel.has-island:not(.closed)) {
        grid-template-columns: 340px minmax(0, 1fr) !important;
    }

    .map-area:has(.top-map-panel.explore-panel.has-island:not(.closed)) #map {
        grid-column: 2 !important;
    }

    .top-map-panel.explore-panel.has-island {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column !important;
        width: 340px !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-right: 1px solid rgba(126,167,179,.12) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: hidden !important;
        background: #081c25 !important;
    }

    .top-map-panel.explore-panel.has-island.closed {
        display: none !important;
    }

    .top-map-panel.has-island .explore-panel-header {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px 12px 10px !important;
        border-bottom: 1px solid rgba(126,167,179,.10) !important;
        background: #081c25 !important;
    }

    .top-map-panel.has-island .island-context {
        flex: 0 0 auto !important;
    }

    .top-map-panel.has-island .panel-heading-copy {
        flex: 1 1 150px !important;
        display: block !important;
        min-width: 0 !important;
    }

    .top-map-panel.has-island .panel-title {
        display: block !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.15 !important;
    }

    .top-map-panel.has-island .panel-subtitle {
        display: block !important;
        margin: 3px 0 0 !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .top-map-panel.has-island .panel-close {
        position: static !important;
        flex: 0 0 26px !important;
        width: 26px !important;
        height: 26px !important;
    }

    /* Main section menu is always visible after selecting an island.
       It must not inherit the landing-state hidden class. */
    .top-map-panel.has-island .top-panel-nav,
    .top-map-panel.has-island .top-panel-nav.hidden {
        position: fixed !important;
        top: 66px !important;
        left: calc(340px + 18px) !important;
        right: 18px !important;
        z-index: 40 !important;
        display: flex !important;
        flex: none !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .top-map-panel.has-island .top-panel-nav .nav-button {
        flex: 0 0 auto !important;
    }

    .top-map-panel.has-island .explore-panel-content,
    .top-map-panel.has-island .explore-panel-content:not(:empty) {
        flex: 1 1 auto !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px 12px 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-top: 0 !important;
        background: #081c25 !important;
    }

    .top-map-panel.has-island .compact-layer-grid {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .top-map-panel.has-island .compact-layer-tile {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    .top-map-panel.has-island ~ .top-panel-reopen {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        bottom: auto !important;
    }
}

.explore-selected-detail {
    margin: 8px 0 10px;
    padding: 10px;
    border: 1px solid rgba(240,214,158,.22);
    border-radius: 12px;
    background: rgba(240,214,158,.055);
}

.explore-selected-detail .api-map-popup,
.explore-selected-detail .api-panel-card {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.explore-item-card.is-active {
    border-color: rgba(240,214,158,.55) !important;
    background: rgba(240,214,158,.10) !important;
    box-shadow: inset 3px 0 0 #F0D69E !important;
}

/* =========================================================
   DESKTOP LEFT SIDEBAR POLISH — 2026-09-18
   Keep the existing top section navigation exactly where it is.
   Keep Lugares / Playas / Fauna / Flora / Rutas in one row.
   Only improve the selected-island left information surface.
   ========================================================= */
@media (min-width: 761px) {
    /* Use a real header row + content row in the left column.
       The map keeps the same right-hand area; the top nav is untouched. */
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) {
        grid-template-columns: 340px minmax(0, 1fr) !important;
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > #map {
    }

    #explore-panel.has-island {
        width: 340px !important;
        align-self: start !important;
        border-right: 1px solid rgba(126,167,179,.12) !important;
        border-bottom: 1px solid rgba(126,167,179,.10) !important;
    }

    #explore-panel.has-island .explore-panel-header {
        gap: 9px !important;
        padding: 13px 14px 12px !important;
        background: #081f29 !important;
    }

    #explore-panel.has-island .panel-heading-copy {
    }

    #explore-panel.has-island .panel-title {
        gap: 7px !important;
        color: #f0e4d1 !important;
        font-size: 14px !important;
        font-weight: 680 !important;
        line-height: 1.2 !important;
        letter-spacing: .01em !important;
    }

    #explore-panel.has-island .panel-title::before {
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        border: 1px solid rgba(126,189,210,.16);
        border-radius: 50%;
        background: rgba(126,189,210,.07);
        color: #86bdcb;
        font-size: 11px;
        line-height: 1;
    }

    #explore-panel.has-island .panel-subtitle {
        display: -webkit-box !important;
        margin: 5px 0 0 27px !important;
        overflow: hidden !important;
        color: rgba(188,211,216,.76) !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    #explore-panel.has-island .island-context {
        margin-top: 1px !important;
    }

    #explore-panel.has-island .panel-close {
        margin-top: 1px !important;
    }

    /* The real section content sits directly below the island header. */
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > .section-dock {
        width: 340px !important;
        border-right: 1px solid rgba(126,167,179,.12) !important;
        background: #082a36 !important;
    }

    /* Explore already owns its inner spacing; remove the extra dock padding
       that made the column feel cramped and nested. */
    .section-dock:has(.story-experience) {
        padding: 0 !important;
    }

    .section-dock .story-experience {
        min-height: 100% !important;
        background: #082a36 !important;
    }

    /* Legacy story-tools row; grouped Explore navigation is styled below. */
    .section-dock .story-tools {
        gap: 4px !important;
        padding: 10px 10px 9px !important;
    }

    .section-dock .story-tool {
        min-width: 0 !important;
        padding: 7px 2px 6px !important;
        border-radius: 10px !important;
    }

    .section-dock .story-tool-icon {
        width: 23px !important;
        height: 23px !important;
    }

    .section-dock .story-tool > span:last-child {
    }

    /* Cleaner hierarchy for the active Explore browser. */
    .section-dock .explore-browser {
        padding: 13px 12px 16px !important;
    }

    .section-dock .explore-browser-head {
        margin-bottom: 10px !important;
    }

    .section-dock .explore-browser-head strong {
        color: #f0e4d1 !important;
        font-weight: 680 !important;
    }

    .section-dock .explore-browser-head select {
        min-width: 118px !important;
        max-width: 54% !important;
        padding: 7px 25px 7px 9px !important;
        border-radius: 9px !important;
        font-size: 9px !important;
    }

    /* Selected place = one readable information card, not another tiny list row. */
    .section-dock .explore-selected-detail {
        padding: 14px !important;
        border: 1px solid rgba(240,214,158,.20) !important;
        border-radius: 14px !important;
        background:
            linear-gradient(180deg, rgba(240,214,158,.075), rgba(255,255,255,.015)) !important;
        box-shadow: none !important;
    }

    .section-dock .selection-detail-card .api-popup-kicker {
        display: inline-block !important;
        margin-bottom: 7px !important;
        color: #7faeb9 !important;
        letter-spacing: .11em !important;
    }

    .section-dock .selection-detail-card h3 {
        margin: 0 0 8px !important;
        color: #f1e7d7 !important;
        font: 600 20px/1.08 Georgia, "Times New Roman", serif !important;
    }

    .section-dock .selection-detail-card .api-map-popup-summary {
        color: rgba(205,222,225,.86) !important;
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .section-dock .selection-detail-card .api-detail-grid {
        margin-top: 11px !important;
        padding-top: 9px !important;
        border-top: 1px solid rgba(151,190,200,.10) !important;
    }

    /* Remaining results stay compact but become easier to scan. */
    .section-dock .explore-item-list {
        gap: 8px !important;
    }

    .section-dock .explore-item-card {
        gap: 5px !important;
        padding: 11px 12px !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,.02) !important;
    }

    .section-dock .explore-item-card strong {
        font-size: 10.5px !important;
    }

    .section-dock .explore-item-card em {
        color: #91acb3 !important;
        line-height: 1.42 !important;
    }

    .section-dock .explore-item-card span {
        font-size: 8px !important;
    }


/* =========================================================
   DESKTOP LEFT SIDEBAR WIDE + WETLAND TILES — 2026-09-18
   Keep the current header and section navigation behavior.
   Make the information rail genuinely wider and give the five Explore tools
   a visual card treatment while keeping them in ONE horizontal row.
   ========================================================= */

    .map-area {
        --cc-left-rail-width: 440px;
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) {
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > #map {
        grid-column: 2 !important;
    }

    #explore-panel.has-island {
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > .section-dock {
    }

    /* Keep the five Explore categories in one row, but make them real visual tiles. */
    .section-dock .story-tools {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(72px, 1fr)) !important;
        padding: 13px 14px 12px !important;
        overflow-x: hidden !important;
        border-bottom: 1px solid rgba(151,190,200,.12) !important;
        background:
            linear-gradient(180deg, rgba(8,42,54,.99), rgba(8,37,48,.98)) !important;
    }

    .section-dock .story-tool {
        position: relative !important;
        min-height: 88px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        padding: 12px 10px 10px !important;
        overflow: hidden !important;
        border: 1px solid rgba(142,188,199,.16) !important;
        background:
            radial-gradient(circle at 75% 18%, rgba(126,189,210,.10), transparent 42%),
            linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
        text-align: left !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
        transition:
            transform .16s ease,
            border-color .16s ease,
            background .16s ease !important;
    }

    .section-dock .story-tool:hover,
    .section-dock .story-tool:focus-visible {
        transform: translateY(-1px) !important;
        border-color: rgba(226,204,170,.34) !important;
        background:
            radial-gradient(circle at 75% 18%, rgba(126,189,210,.14), transparent 42%),
            linear-gradient(160deg, rgba(226,204,170,.055), rgba(255,255,255,.018)) !important;
    }

    .section-dock .story-tool.is-active {
        border-color: rgba(232,204,158,.55) !important;
        background:
            radial-gradient(circle at 75% 18%, rgba(232,204,158,.13), transparent 44%),
            linear-gradient(160deg, rgba(232,204,158,.09), rgba(255,255,255,.018)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(232,204,158,.05),
            0 10px 24px rgba(0,0,0,.12) !important;
    }

    .section-dock .story-tool-icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid rgba(126,189,210,.13) !important;
        border-radius: 11px !important;
        background: rgba(126,189,210,.07) !important;
        color: #87bdcb !important;
    }

    .section-dock .story-tool.is-active .story-tool-icon {
        border-color: rgba(232,204,158,.24) !important;
        background: rgba(232,204,158,.08) !important;
        color: #e8d1ad !important;
    }

    .section-dock .story-tool-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .section-dock .story-tool > span:last-child {
        width: 100% !important;
        overflow: visible !important;
        color: inherit !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        text-align: left !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    /* Let the wider rail breathe. */
    .section-dock .explore-browser {
        padding: 15px 16px 18px !important;
    }

    .section-dock .explore-selected-detail {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .section-dock .selection-detail-card h3 {
        font-size: 19px !important;
    }

    .section-dock .explore-item-card {
        padding: 12px 13px !important;
    }



/* =========================================================
   TRUE WETLAND-STYLE CONTENT MODULES — 2026-09-18
   The five Explore category controls stay in one horizontal row.
   The cards BELOW them become the large rounded content modules.
   ========================================================= */

    .map-area {
        --cc-left-rail-width: 540px;
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) {
    }

    #explore-panel.has-island,
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > .section-dock {
        width: var(--cc-left-rail-width) !important;
    }

    /* Keep the existing five Explore controls in a single row.
       They are navigation controls, NOT the Wetlands content cards. */
    .section-dock .story-tools {
        gap: 6px !important;
        padding: 10px 14px 11px !important;
        overflow: hidden !important;
        background: #082a36 !important;
    }

    .section-dock .story-tool {
        min-height: 64px !important;
        gap: 5px !important;
        padding: 7px 3px !important;
        border-radius: 11px !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    .section-dock .story-tool-icon {
        width: 27px !important;
        height: 27px !important;
        flex: 0 0 27px !important;
        border-radius: 9px !important;
    }

    .section-dock .story-tool-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .section-dock .story-tool > span:last-child {
        font-size: 8px !important;
    }

    /* The browser itself becomes a clean canvas; its children are the modules. */
    .section-dock .explore-browser {
        padding: 14px 14px 24px !important;
        border: 0 !important;
        background: #082a36 !important;
    }

    .section-dock .explore-browser-head {
        min-height: 30px !important;
    }

    .section-dock .explore-browser-head strong {
        color: #f1e8da !important;
        font-weight: 720 !important;
        letter-spacing: .02em !important;
    }

    /* MODULE 1 — current selection: large rounded block like Wetlands. */
    .section-dock .explore-selected-detail {
        position: relative !important;
        margin: 0 0 12px !important;
        padding: 22px 22px 20px !important;
        overflow: hidden !important;
        border: 1px solid rgba(143,190,202,.12) !important;
        border-radius: 30px !important;
        background:
            radial-gradient(circle at 88% 8%, rgba(46,153,191,.14), transparent 38%),
            #0a3040 !important;
        box-shadow: 0 12px 26px rgba(0,0,0,.13) !important;
    }

    .section-dock .explore-selected-detail::before {
        content: "SELECCIÓN";
        display: block !important;
        margin-bottom: 14px !important;
        color: #91c1ce !important;
        font-size: 10px !important;
        font-weight: 780 !important;
        letter-spacing: .11em !important;
    }

    .section-dock .selection-detail-card {
        display: block !important;
    }

    .section-dock .selection-detail-card .api-popup-kicker {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 24px !important;
        margin: 0 0 10px !important;
        padding: 0 10px !important;
        border: 1px solid rgba(124,189,207,.15) !important;
        border-radius: 999px !important;
        background: rgba(124,189,207,.07) !important;
        color: #9bc8d2 !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    .section-dock .selection-detail-card h3 {
        margin: 0 0 11px !important;
        max-width: 92% !important;
        color: #fff1dc !important;
        font: 600 27px/1.04 Georgia, "Times New Roman", serif !important;
        letter-spacing: -.015em !important;
    }

    .section-dock .selection-detail-card .api-map-popup-summary {
        margin: 0 !important;
        max-width: 95% !important;
        color: rgba(220,234,236,.88) !important;
        font-size: 12px !important;
        line-height: 1.62 !important;
    }

    .section-dock .selection-detail-card .api-detail-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 16px !important;
        padding-top: 14px !important;
        border-top: 1px solid rgba(149,190,201,.12) !important;
    }

    .section-dock .selection-detail-card .api-detail-row {
        display: block !important;
        min-width: 0 !important;
        padding: 9px 10px !important;
        border: 1px solid rgba(149,190,201,.09) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.025) !important;
    }

    .section-dock .selection-detail-card .api-detail-row span,
    .section-dock .selection-detail-card .api-detail-row strong {
        display: block !important;
    }

    .section-dock .selection-detail-card .api-detail-row span {
        margin-bottom: 3px !important;
        color: #739ba6 !important;
        font-size: 7.5px !important;
        font-weight: 650 !important;
        letter-spacing: .06em !important;
        text-transform: uppercase !important;
    }

    .section-dock .selection-detail-card .api-detail-row strong {
        color: #d7e5e7 !important;
        font-size: 9.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* MODULE 2 — remaining results: one second large rounded block. */
    .section-dock .explore-item-list {
        position: relative !important;
        gap: 0 !important;
        padding: 48px 18px 10px !important;
        overflow: hidden !important;
        border: 1px solid rgba(143,190,202,.12) !important;
        border-radius: 30px !important;
        background: #0a3040 !important;
        box-shadow: 0 12px 26px rgba(0,0,0,.10) !important;
    }

    .section-dock .explore-item-list::before {
        content: "MÁS LUGARES";
        position: absolute !important;
        top: 18px !important;
        left: 20px !important;
        color: #f0e7d9 !important;
        font-size: 11px !important;
        font-weight: 780 !important;
        letter-spacing: .04em !important;
    }

    .section-dock [data-explore-browser="beaches"] .explore-item-list::before {
        content: "MÁS PLAYAS";
    }

    .section-dock [data-explore-browser="wildlife"] .explore-item-list::before {
        content: "MÁS FAUNA";
    }

    .section-dock [data-explore-browser="flora"] .explore-item-list::before {
        content: "MÁS FLORA";
    }

    .section-dock .explore-item-card {
        position: relative !important;
        display: grid !important;
        gap: 4px !important;
        padding: 13px 2px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(149,190,201,.10) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .section-dock .explore-item-card:last-child {
        border-bottom: 0 !important;
    }

    .section-dock .explore-item-card:hover,
    .section-dock .explore-item-card:focus-visible,
    .section-dock .explore-item-card.is-active {
        padding-left: 10px !important;
        border-color: rgba(232,204,158,.13) !important;
        background: rgba(232,204,158,.055) !important;
        border-radius: 13px !important;
    }

    .section-dock .explore-item-card strong {
        color: #e8e1d6 !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }

    .section-dock .explore-item-card em {
        color: #8eabb2 !important;
        font-size: 9px !important;
        line-height: 1.45 !important;
    }

    .section-dock .explore-more-button {
        margin-top: 10px !important;
        border-radius: 999px !important;
    }

    /* Trails use the same large module language. */
    .section-dock .trails-browser.is-visible {
        margin: 14px !important;
        padding: 20px !important;
        border: 1px solid rgba(143,190,202,.12) !important;
        border-radius: 30px !important;
        background: #0a3040 !important;
        box-shadow: 0 12px 26px rgba(0,0,0,.10) !important;
    }



/* =========================================================
   WETLAND GLASS OVER MAP — 2026-09-18
   Keep the current layout/content structure. Let the map continue behind the
   left rail, then tint the rail and modules with translucent glass layers.
   ========================================================= */

    /* The map is the visual background for BOTH columns. */
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > #map {
    }

    /* Header and dock stay above the map instead of replacing it with a solid wall. */
    #explore-panel.has-island {
        background: rgba(5, 34, 45, .54) !important;
        border-right: 1px solid rgba(173, 215, 224, .10) !important;
        border-bottom: 1px solid rgba(173, 215, 224, .08) !important;
        backdrop-filter: blur(8px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
    }

    #explore-panel.has-island .explore-panel-header {
        background: rgba(5, 34, 45, .42) !important;
        backdrop-filter: blur(8px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > .section-dock {
        background:
            linear-gradient(
                180deg,
                rgba(5, 34, 45, .30) 0%,
                rgba(5, 34, 45, .18) 45%,
                rgba(5, 34, 45, .26) 100%
            ) !important;
        border-right: 1px solid rgba(173, 215, 224, .08) !important;
        backdrop-filter: blur(4px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(4px) saturate(108%) !important;
    }

    .section-dock .story-experience,
    .section-dock .explore-browser {
    }

    /* Category row stays exactly where it is, just lighter so the map breathes through. */
    .section-dock .story-tools {
        background: rgba(6, 42, 55, .42) !important;
        border-bottom: 1px solid rgba(173, 215, 224, .08) !important;
        backdrop-filter: blur(8px) saturate(110%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    }

    .section-dock .story-tool {
        background: rgba(7, 48, 62, .42) !important;
        border-color: rgba(179, 218, 226, .12) !important;
        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;
    }

    .section-dock .story-tool:hover,
    .section-dock .story-tool:focus-visible {
        background: rgba(18, 70, 86, .52) !important;
    }

    .section-dock .story-tool.is-active {
        background: rgba(103, 133, 126, .28) !important;
        border-color: rgba(239, 215, 173, .38) !important;
    }

    /* Main Wetlands-like modules: translucent, rounded, map visible underneath. */
    .section-dock .explore-selected-detail,
    .section-dock .explore-item-list,
    .section-dock .trails-browser.is-visible {
        background:
            linear-gradient(
                180deg,
                rgba(5, 43, 57, .70),
                rgba(4, 38, 51, .60)
            ) !important;
        border: 1px solid rgba(194, 224, 230, .10) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important;
        backdrop-filter: blur(12px) saturate(116%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(116%) !important;
    }

    .section-dock .explore-selected-detail {
        background:
            radial-gradient(circle at 88% 8%, rgba(64, 167, 199, .10), transparent 40%),
            linear-gradient(180deg, rgba(5, 43, 57, .70), rgba(4, 38, 51, .60)) !important;
    }

    .section-dock .selection-detail-card .api-detail-row {
        background: rgba(255,255,255,.035) !important;
        border-color: rgba(203,229,234,.08) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    .section-dock .explore-item-card {
    }

    .section-dock .explore-item-card:hover,
    .section-dock .explore-item-card:focus-visible,
    .section-dock .explore-item-card.is-active {
    }



/* =========================================================
   FINAL WETLAND OVERLAY + ISLAND HERO — 2026-09-18
   Map stays full-width and stable. The rail is transparent.
   Large content modules are solid, dark Wetlands-style cards.
   ========================================================= */

    .map-area {
        --cc-left-rail-width: 540px;
    }

    /* Do NOT resize the MapLibre canvas after island selection.
       It remains full-width exactly like the landing map. */
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) {
        grid-template-columns: var(--cc-left-rail-width) minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        background: transparent !important;
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > #map {
        grid-column: 1 / 3 !important;
        grid-row: 1 / 3 !important;
        z-index: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Selected-island header: lighter marine surface, much stronger island name. */
    #explore-panel.has-island {
        grid-column: 1 !important;
        grid-row: 1 !important;
        z-index: 30 !important;
        width: var(--cc-left-rail-width) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-right: 1px solid rgba(198, 226, 232, .10) !important;
        border-bottom: 1px solid rgba(198, 226, 232, .10) !important;
        border-radius: 0 !important;
        background: rgba(18, 74, 91, .82) !important;
        backdrop-filter: blur(7px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(7px) saturate(108%) !important;
    }

    #explore-panel.has-island .explore-panel-header {
        min-height: 98px !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px 18px 15px !important;
        border: 0 !important;
        background: transparent !important;
    }

    #explore-panel.has-island .island-context {
        flex: 0 0 auto !important;
        margin-top: 2px !important;
        min-height: 28px !important;
        padding: 0 11px !important;
        border: 1px solid rgba(214, 235, 239, .16) !important;
        background: rgba(4, 34, 45, .22) !important;
        color: rgba(226, 239, 241, .72) !important;
        font-size: 8.5px !important;
    }

    #explore-panel.has-island .panel-heading-copy {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding-top: 1px !important;
    }

    #explore-panel.has-island .panel-title {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        color: #fff0d6 !important;
        font: 650 24px/1.05 Georgia, "Times New Roman", serif !important;
        letter-spacing: -.012em !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 12px rgba(0,0,0,.18) !important;
    }

    #explore-panel.has-island .panel-title::before {
        content: "⌖";
        display: inline-grid !important;
        place-items: center !important;
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
        border: 1px solid rgba(181, 224, 234, .22) !important;
        border-radius: 50% !important;
        background: rgba(9, 58, 73, .42) !important;
        color: #a6d6df !important;
        font: 500 14px/1 system-ui, sans-serif !important;
    }

    #explore-panel.has-island .panel-subtitle {
        display: block !important;
        max-width: 360px !important;
        margin: 8px 0 0 37px !important;
        overflow: visible !important;
        color: rgba(231, 243, 244, .84) !important;
        font-size: 11.5px !important;
        font-weight: 430 !important;
        line-height: 1.48 !important;
        text-overflow: clip !important;
        white-space: normal !important;
        -webkit-line-clamp: unset !important;
    }

    #explore-panel.has-island .panel-close {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin-top: 2px !important;
        border: 1px solid rgba(214,235,239,.10) !important;
        background: rgba(4,34,45,.16) !important;
        color: rgba(225,239,241,.46) !important;
        opacity: .72 !important;
    }

    /* The rail below the header is transparent: the map is visible in all gaps. */
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > .section-dock {
        grid-column: 1 !important;
        grid-row: 2 !important;
        z-index: 24 !important;
        width: var(--cc-left-rail-width) !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .story-experience,
    .section-dock .explore-browser {
        background: transparent !important;
    }

    /* Category navigation remains one row. The strip itself is transparent. */
    .section-dock .story-tools {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 14px !important;
        border: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .story-tool {
        min-height: 68px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 8px 4px !important;
        border: 1px solid rgba(175, 215, 224, .13) !important;
        border-radius: 15px !important;
        background: rgba(10, 53, 67, .92) !important;
        color: #b8cdd2 !important;
        box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
    }

    .section-dock .story-tool:hover,
    .section-dock .story-tool:focus-visible {
        background: #10475a !important;
        border-color: rgba(221, 211, 184, .28) !important;
    }

    .section-dock .story-tool.is-active {
        background: #174e5d !important;
        border-color: rgba(239, 215, 173, .42) !important;
        color: #f2e7d7 !important;
    }

    .section-dock .story-tool-icon {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        border: 1px solid rgba(175,215,224,.13) !important;
        border-radius: 10px !important;
        background: rgba(93, 155, 172, .10) !important;
    }

    .section-dock .story-tool > span:last-child {
        font-size: 8.5px !important;
        font-weight: 680 !important;
        text-align: center !important;
    }

    .section-dock .explore-browser {
        padding: 0 14px 26px !important;
    }

    .section-dock .explore-browser-head {
        margin: 0 4px 12px !important;
        padding-top: 2px !important;
    }

    .section-dock .explore-browser-head strong {
        color: #f5eadb !important;
        font-size: 13px !important;
        text-shadow: 0 1px 9px rgba(0,0,0,.28) !important;
    }

    /* True Wetlands content modules: SOLID cards over the visible map. */
    .section-dock .explore-selected-detail,
    .section-dock .explore-item-list,
    .section-dock .trails-browser.is-visible {
        border: 1px solid rgba(184, 217, 224, .11) !important;
        border-radius: 30px !important;
        background: #0a3443 !important;
        box-shadow: 0 12px 26px rgba(0,0,0,.13) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .explore-selected-detail {
        background:
            radial-gradient(circle at 88% 8%, rgba(38, 133, 163, .15), transparent 38%),
            #0a3443 !important;
    }

    .section-dock .selection-detail-card .api-detail-row {
        background: #0d3a49 !important;
        border-color: rgba(187,218,224,.08) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .explore-item-card {
        background: transparent !important;
    }

    .section-dock .explore-item-card:hover,
    .section-dock .explore-item-card:focus-visible,
    .section-dock .explore-item-card.is-active {
        background: rgba(232,204,158,.07) !important;
    }



/* =========================================================
   SEPARATE WETLAND CARDS + TRANSPARENT GAPS — 2026-09-18
   Lists are NOT one big card. Every item/route is its own solid module.
   The rail between modules stays transparent so the map shows through.
   ========================================================= */

    .section-dock .explore-item-list {
        display: grid !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .explore-item-list::before {
        display: none !important;
        content: none !important;
    }

    .section-dock .explore-item-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 17px 18px !important;
        border: 1px solid rgba(184,217,224,.12) !important;
        border-radius: 24px !important;
        background: #0a3443 !important;
        box-shadow: 0 9px 22px rgba(0,0,0,.12) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .explore-item-card:hover,
    .section-dock .explore-item-card:focus-visible {
        border-color: rgba(232,204,158,.36) !important;
        background: #0d3b4a !important;
        outline: none !important;
    }

    .section-dock .explore-item-card.is-active {
        border-color: rgba(232,204,158,.60) !important;
        background: #124250 !important;
        box-shadow:
            inset 3px 0 0 #F0D69E,
            0 9px 22px rgba(0,0,0,.13) !important;
    }

    .section-dock .explore-item-card strong {
        color: #f0e7da !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .section-dock .explore-item-card em {
        margin-top: 2px !important;
        color: rgba(190,211,216,.82) !important;
        font-size: 10px !important;
        line-height: 1.48 !important;
    }

    .section-dock .explore-item-card span {
        margin-top: 3px !important;
        color: #7fa5af !important;
        font-size: 8.5px !important;
    }

    .section-dock .trails-browser.is-visible {
        display: block !important;
        margin: 0 !important;
        padding: 0 14px 26px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .trails-browser-head {
        padding: 2px 4px 12px !important;
        margin: 0 !important;
    }

    .section-dock .trails-browser-head strong {
        color: #f3e9da !important;
        font-size: 13px !important;
        font-weight: 720 !important;
        text-shadow: 0 1px 9px rgba(0,0,0,.24) !important;
    }

    .section-dock .trails-browser-head span {
        color: rgba(219,234,236,.66) !important;
        font-size: 9px !important;
    }

    .section-dock .trails-route-list,
    .section-dock .trails-route-strip {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .section-dock .trail-route-card {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 17px 18px !important;
        border: 1px solid rgba(184,217,224,.12) !important;
        border-radius: 24px !important;
        background: #0a3443 !important;
        color: #b8cdd2 !important;
        box-shadow: 0 9px 22px rgba(0,0,0,.12) !important;
        text-align: left !important;
        scroll-snap-align: none !important;
    }

    .section-dock .trail-route-card:hover,
    .section-dock .trail-route-card:focus-visible {
        border-color: rgba(232,204,158,.36) !important;
        background: #0d3b4a !important;
        outline: none !important;
    }

    .section-dock .trail-route-card.is-active {
        border-color: rgba(232,204,158,.60) !important;
        background: #124250 !important;
        box-shadow:
            inset 3px 0 0 #F0D69E,
            0 9px 22px rgba(0,0,0,.13) !important;
    }

    .section-dock .trail-route-card strong {
        color: #f0e7da !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .section-dock .trail-route-card em {
        margin-top: 2px !important;
        color: rgba(190,211,216,.82) !important;
        font-size: 10px !important;
        line-height: 1.48 !important;
    }

    .section-dock .trail-route-card span {
        margin-top: 3px !important;
        color: #7fa5af !important;
        font-size: 8.5px !important;
    }

    .section-dock .explore-data-refresh,
    .section-dock .explore-data-refresh.is-visible {
        background: transparent !important;
        border: 0 !important;
        padding: 2px 14px 12px !important;
    }



/* =========================================================
   SELECTED ISLAND POLISH + COMPLETE CONTENT CARDS — 2026-09-18
   Desktop only. Keep the map visible in GAPS, never behind card text.
   ========================================================= */

    #explore-panel.has-island {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #explore-panel.has-island .explore-panel-header {
        width: calc(100% - 20px) !important;
        min-height: 104px !important;
        margin: 10px 10px 8px !important;
        padding: 15px 16px 14px !important;
        border: 1px solid rgba(219, 238, 242, .14) !important;
        border-radius: 26px !important;
        background:
            linear-gradient(
                160deg,
                rgba(49, 126, 145, .92),
                rgba(30, 96, 116, .90)
            ) !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .12) !important;
        backdrop-filter: blur(10px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
    }

    #explore-panel.has-island .panel-heading-copy {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        grid-template-areas:
            "island-icon island-title"
            ". island-subtitle" !important;
        column-gap: 11px !important;
        align-items: center !important;
        padding-top: 0 !important;
    }

    #explore-panel.has-island .panel-eyebrow {
        grid-area: island-icon !important;
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        border: 1px solid rgba(238, 222, 190, .24) !important;
        border-radius: 50% !important;
        background: rgba(5, 48, 62, .22) !important;
        color: #f0d8ae !important;
    }

    #explore-panel.has-island .panel-eyebrow svg {
        width: 30px !important;
        height: 20px !important;
    }

    #explore-panel.has-island .panel-title {
        grid-area: island-title !important;
        display: block !important;
        margin: 0 !important;
    }

    #explore-panel.has-island .panel-title::before {
        display: none !important;
        content: none !important;
    }

    #explore-panel.has-island .panel-subtitle {
        grid-area: island-subtitle !important;
        max-width: none !important;
        margin: 6px 0 0 !important;
    }

    #explore-panel.has-island .island-context,
    #explore-panel.has-island .panel-close {
        border-radius: 999px !important;
        background: rgba(5, 48, 62, .22) !important;
        border-color: rgba(226, 240, 243, .16) !important;
    }

    .section-dock .explore-item-card,
    .section-dock .trail-route-card,
    .section-dock .guide-restaurant,
    .section-dock .calendar-list-event,
    .section-dock .api-panel-result,
    .section-dock .live-detail-sidebar,
    .section-dock .content-state {
        border-color: rgba(207, 232, 237, .14) !important;
        background: rgba(31, 91, 107, .88) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .10) !important;
        backdrop-filter: blur(8px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(108%) !important;
    }

    .section-dock .explore-item-card:hover,
    .section-dock .explore-item-card:focus-visible,
    .section-dock .trail-route-card:hover,
    .section-dock .trail-route-card:focus-visible,
    .section-dock .guide-restaurant:hover,
    .section-dock .calendar-list-event:hover {
        border-color: rgba(238, 214, 174, .32) !important;
        background: rgba(39, 105, 121, .94) !important;
    }

    .section-dock .explore-item-card.is-active,
    .section-dock .trail-route-card.is-active,
    .section-dock .guide-restaurant.is-current {
        border-color: rgba(240, 214, 158, .52) !important;
        background: rgba(43, 112, 128, .96) !important;
    }

    .section-dock .story-list {
        padding: 0 12px 22px !important;
        background: transparent !important;
    }

    .section-dock .story-section {
        width: auto !important;
        margin: 0 0 14px !important;
        border: 1px solid rgba(210, 234, 239, .14) !important;
        border-radius: 28px !important;
        background: rgba(31, 91, 107, .95) !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .12) !important;
        opacity: 1 !important;
        overflow: hidden !important;
        backdrop-filter: blur(9px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(9px) saturate(108%) !important;
    }

    .section-dock .story-section:hover,
    .section-dock .story-section:focus-visible,
    .section-dock .story-section.is-current {
        border-color: rgba(239, 216, 180, .30) !important;
        background: rgba(38, 103, 119, .97) !important;
        opacity: 1 !important;
        box-shadow: 0 16px 34px rgba(0, 0, 0, .14) !important;
    }

    .section-dock .story-image {
        border-radius: 20px !important;
        border-color: rgba(220, 239, 242, .16) !important;
    }

    .section-dock .section-dock-home,
    .section-dock .guide-section-picker,
    .section-dock .calendar-month-experience,
    .section-dock .compact-layer-grid {
        margin: 0 12px 14px !important;
        padding: 16px !important;
        border: 1px solid rgba(210, 234, 239, .14) !important;
        border-radius: 24px !important;
        background: rgba(31, 91, 107, .92) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .10) !important;
        backdrop-filter: blur(9px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(9px) saturate(108%) !important;
    }

    .section-dock .story-tools {
        margin: 0 12px 14px !important;
        padding: 9px 10px !important;
        border: 1px solid rgba(210, 234, 239, .11) !important;
        border-radius: 20px !important;
        background: rgba(31, 91, 107, .84) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .08) !important;
        backdrop-filter: blur(8px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(108%) !important;
    }

    .section-dock .story-tool {
        background: transparent !important;
    }

    .section-dock .story-tool:hover,
    .section-dock .story-tool:focus-visible,
    .section-dock .story-tool.is-active {
        background: rgba(241, 220, 184, .10) !important;
    }
}

@media (max-width: 760px) {
    #explore-panel.has-island .panel-eyebrow {
        display: none !important;
    }
}


/* =========================================================
   LIGHTER LIVE/NEWS INNER CARDS + MEDIA — 2026-09-18
   Alerts / Volcanic / News inner cards follow the same card language.
   ========================================================= */
@media (min-width: 761px) {
    .section-dock .api-panel-results {
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 12px 18px !important;
    }

    .section-dock .api-panel-result {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .api-feed {
        display: grid !important;
        gap: 12px !important;
        background: transparent !important;
    }

    .section-dock .api-feed-heading {
        padding: 3px 4px 1px !important;
    }

    .section-dock .api-feed-card,
    .section-dock .api-panel-card {
        margin: 0 !important;
        padding: 16px 17px !important;
        border: 1px solid rgba(210, 234, 239, .14) !important;
        border-radius: 24px !important;
        background: rgba(31, 91, 107, .92) !important;
        box-shadow: 0 12px 26px rgba(0, 0, 0, .10) !important;
        overflow: hidden !important;
        backdrop-filter: blur(8px) saturate(108%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(108%) !important;
    }

    .section-dock .api-feed-card:hover,
    .section-dock .api-panel-card:hover {
        border-color: rgba(238, 214, 174, .28) !important;
        background: rgba(39, 105, 121, .96) !important;
    }

    .section-dock .api-feed-card + .api-feed-card {
        border-top: 1px solid rgba(210, 234, 239, .14) !important;
    }

    .section-dock .volcanic-report-list {
        display: grid !important;
        gap: 12px !important;
        margin-top: 12px !important;
    }

    .section-dock .volcanic-report-list > h3 {
        margin: 4px 4px 0 !important;
        color: #f2e4cf !important;
        font-size: 13px !important;
    }

    .section-dock .api-card-media {
        position: relative !important;
        width: calc(100% + 34px) !important;
        margin: -16px -17px 14px !important;
        overflow: hidden !important;
        aspect-ratio: 16 / 8.5 !important;
        border-bottom: 1px solid rgba(220, 239, 242, .14) !important;
        background: rgba(17, 69, 84, .78) !important;
    }

    .section-dock .api-card-media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .section-dock .api-card-media figcaption {
        position: absolute !important;
        right: 8px !important;
        bottom: 7px !important;
        max-width: calc(100% - 16px) !important;
        padding: 4px 6px !important;
        border-radius: 7px !important;
        background: rgba(4, 28, 36, .70) !important;
        color: rgba(239, 245, 244, .76) !important;
        font-size: 6.5px !important;
        line-height: 1.25 !important;
        backdrop-filter: blur(5px) !important;
    }

    .section-dock .api-card-media figcaption a {
        color: inherit !important;
    }

    .section-dock .guide-restaurant {
        overflow: hidden !important;
    }

    .section-dock .guide-restaurant-image {
        display: block !important;
        width: calc(100% + 34px) !important;
        height: 150px !important;
        margin: -16px -17px 14px !important;
        object-fit: cover !important;
        border-bottom: 1px solid rgba(220, 239, 242, .14) !important;
    }
}


/* =========================================================
   GROUPED EXPLORE NAV — 2026-09-19
   Six small category tabs + compact subcategory pills.
   ========================================================= */
.section-dock .explore-category-shell {
    margin: 0 12px 14px !important;
    padding: 11px !important;
    border: 1px solid rgba(210, 234, 239, .13) !important;
    border-radius: 22px !important;
    background: rgba(31, 91, 107, .90) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .09) !important;
    backdrop-filter: blur(8px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(108%) !important;
}

.section-dock .explore-group-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.section-dock .explore-group-tab {
    min-width: 0 !important;
    min-height: 31px !important;
    padding: 7px 5px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(5, 48, 62, .20) !important;
    color: rgba(224, 238, 240, .72) !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.section-dock .explore-group-tab:hover,
.section-dock .explore-group-tab:focus-visible {
    background: rgba(241, 220, 184, .08) !important;
    color: #f0e4d1 !important;
}

.section-dock .explore-group-tab.is-active {
    border-color: rgba(240, 214, 158, .30) !important;
    background: rgba(240, 214, 158, .14) !important;
    color: #f3dfbd !important;
}

.section-dock .explore-group-tab.has-active-layer::after {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    margin-left: 5px !important;
    border-radius: 50% !important;
    background: #f0d69e !important;
    vertical-align: middle !important;
}

.section-dock .explore-subtools {
    gap: 7px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(210, 234, 239, .10) !important;
}

.section-dock .explore-subtools .story-tool {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(210, 234, 239, .12) !important;
    border-radius: 999px !important;
    background: rgba(5, 48, 62, .18) !important;
    color: #b9ced2 !important;
    box-shadow: none !important;
    text-align: left !important;
}

.section-dock .explore-subtools .story-tool:hover,
.section-dock .explore-subtools .story-tool:focus-visible {
    transform: none !important;
    border-color: rgba(240, 214, 158, .22) !important;
    background: rgba(241, 220, 184, .08) !important;
}

.section-dock .explore-subtools .story-tool.is-active {
    border-color: rgba(240, 214, 158, .38) !important;
    background: rgba(240, 214, 158, .14) !important;
    color: #f1e3ca !important;
}

.section-dock .explore-subtools .story-tool-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
}

.section-dock .explore-subtools .story-tool-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.section-dock .explore-subtools .story-tool > span:last-child {
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .section-dock .explore-category-shell {
        margin: 8px 10px 12px !important;
        padding: 9px !important;
    }

    .section-dock .explore-group-tabs {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .section-dock .explore-group-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .section-dock .explore-group-tab {
        flex: 0 0 auto !important;
        padding-inline: 11px !important;
    }

    .section-dock .explore-subtools {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    .section-dock .explore-subtools::-webkit-scrollbar {
        display: none !important;
    }
}


/* =========================================================
   EXPLORE BEACH NOW — compact bridge to Live
   ========================================================= */
.section-dock .beach-selected-detail {
    margin-bottom: 14px !important;
}

.section-dock .beach-now-inline {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(149,190,201,.12) !important;
}

.section-dock .beach-now-inline > strong {
    color: #8fc2cf !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}

.section-dock .beach-now-inline > span {
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgba(220,234,236,.82) !important;
    font-size: 8.5px !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.section-dock .beach-now-inline > button {
    padding: 5px 8px !important;
    border: 1px solid rgba(232,204,158,.24) !important;
    border-radius: 999px !important;
    background: rgba(232,204,158,.06) !important;
    color: #f0dfc4 !important;
    font: inherit !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.section-dock .beach-now-inline > button:hover,
.section-dock .beach-now-inline > button:focus-visible {
    border-color: rgba(232,204,158,.48) !important;
    background: rgba(232,204,158,.11) !important;
}


/* =========================================================
   EXPLORE INLINE EXPANSION — 2026-09-20
   Feature data expands inside its tile; item details expand in that item.
   ========================================================= */
.section-dock .explore-subtools {
    align-items: flex-start !important;
}

.section-dock .explore-tool-slot {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.section-dock .explore-tool-slot > .story-tool {
    width: auto !important;
}

.section-dock .explore-tool-slot.is-active {
    display: block !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    padding: 8px !important;
    border: 1px solid rgba(240, 214, 158, .25) !important;
    border-radius: 20px !important;
    background: rgba(5, 48, 62, .16) !important;
}

.section-dock .explore-tool-slot.is-active > .story-tool {
    width: 100% !important;
    justify-content: flex-start !important;
    border-color: rgba(240, 214, 158, .32) !important;
    background: rgba(240, 214, 158, .12) !important;
}

.section-dock .explore-tool-inline-content {
    width: 100% !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(210, 234, 239, .10) !important;
}

.section-dock .explore-tool-inline-content > .explore-browser,
.section-dock .explore-tool-inline-content > .trails-browser {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.section-dock .explore-tool-inline-content .explore-browser-head,
.section-dock .explore-tool-inline-content .trails-browser-head {
    padding: 3px 2px 9px !important;
}

.section-dock .explore-item-shell {
    display: block !important;
    width: 100% !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.section-dock .explore-item-shell.is-active {
    border-color: rgba(240, 214, 158, .24) !important;
    background: rgba(6, 54, 68, .20) !important;
}

.section-dock .explore-item-shell > .explore-item-card {
    width: 100% !important;
    border-radius: 17px !important;
}

.section-dock .explore-item-shell.is-active > .explore-item-card {
    border-color: transparent !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.section-dock .explore-item-inline-detail {
    padding: 0 12px 12px !important;
    border-top: 1px solid rgba(210, 234, 239, .09) !important;
}

.section-dock .explore-item-inline-detail .api-detail-grid {
    margin-top: 10px !important;
}

.section-dock .explore-item-inline-media {
    width: calc(100% + 24px) !important;
    height: 145px !important;
    margin: 0 -12px 11px !important;
    overflow: hidden !important;
    background: rgba(9, 55, 68, .35) !important;
}

.section-dock .explore-item-inline-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.section-dock .explore-item-source {
    display: inline-flex !important;
    margin-top: 10px !important;
    color: #efd9b5 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.section-dock .explore-item-inline-detail .beach-now-inline {
    margin-top: 11px !important;
}

@media (max-width: 760px) {
    .section-dock .explore-tool-slot.is-active {
        padding: 7px !important;
        border-radius: 18px !important;
    }

    .section-dock .explore-item-inline-media {
        height: 128px !important;
    }
}


/* =========================================================
   EXPLORE GROUP BACK NAV — 2026-09-20
   Category -> tool -> category, without reopening Destacados.
   ========================================================= */
.section-dock .explore-tool-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 0 10px !important;
    padding: 6px 9px !important;
    border: 1px solid rgba(143, 190, 202, .18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .025) !important;
    color: #a8c5cc !important;
    font: inherit !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.section-dock .explore-tool-back:hover,
.section-dock .explore-tool-back:focus-visible {
    border-color: rgba(240, 214, 158, .44) !important;
    background: rgba(240, 214, 158, .08) !important;
    color: #f2e4d0 !important;
    outline: none !important;
}

/* =========================================================
   EXPLORE TRANSPARENT GROUP SURFACE — 2026-09-20
   Restore the previous compact buttons; keep only the surrounding
   surface transparent so the controls do not sit on one heavy block.
   ========================================================= */
@media (min-width: 761px) {
    .section-dock .explore-category-shell {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .explore-subtools {
        background: transparent !important;
    }

    .section-dock .explore-tool-slot.is-active {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .section-dock .explore-tool-inline-content {
        background: transparent !important;
    }

    .section-dock .explore-item-list,
    .section-dock .trails-route-list {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }



/* =========================================================
   GUIDE LANDSCAPE RAIL — 2026-09-21
   Guide is a bottom editorial rail inspired by landscape atlases:
   intro card -> thematic cards -> chapter cards -> article cards.
   ========================================================= */

    .map-area.section-dock-open:has(.guide-rail-experience) {
        position: relative !important;
        grid-template-columns: var(--cc-left-rail-width) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .map-area.section-dock-open:has(.guide-rail-experience) > #map {
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
    }

    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)):has(.guide-rail-experience) > .section-dock {
        position: absolute !important;
        z-index: 52 !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(66vh, 640px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
    }

    .section-dock .guide-rail-experience {
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 0 18px !important;
        background: transparent !important;
    }

    .section-dock .guide-landscape-rail {
        display: flex !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 4px 16px 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(211, 229, 233, .22) transparent !important;
    }



    /* Guide chrome stays transparent; only actual cards carry surfaces. */
    .section-dock .guide-rail-experience,
    .section-dock .guide-landscape-rail,
    .section-dock .guide-section-rail,
    .section-dock .guide-item-rail,
    .section-dock .guide-rail-context {
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .section-dock .guide-landscape-rail::-webkit-scrollbar {
        height: 5px !important;
    }

    .section-dock .guide-landscape-rail::-webkit-scrollbar-thumb {
        border-radius: 999px !important;
        background: rgba(211, 229, 233, .22) !important;
    }

    .section-dock .guide-rail-intro-card {
        flex: 0 0 clamp(250px, 25vw, 380px) !important;
        min-height: clamp(178px, 16vw, 232px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 26px 28px !important;
        scroll-snap-align: start !important;
        border: 0 !important;
        border-radius: 0 28px 28px 0 !important;
        background: rgba(7, 50, 68, .88) !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.10) !important;
        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;
    }

    .section-dock .guide-rail-kicker {
        margin-bottom: 18px !important;
        color: #72b7ca !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    .section-dock .guide-rail-intro-card h3 {
        max-width: 290px !important;
        margin: 0 !important;
        color: #eee0c6 !important;
        font: 500 clamp(27px, 2.6vw, 34px)/1.02 Georgia, "Times New Roman", serif !important;
        letter-spacing: -.025em !important;
    }

    .section-dock .guide-rail-intro-card p {
        max-width: 305px !important;
        margin: 15px 0 0 !important;
        color: rgba(225, 236, 238, .84) !important;
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    .section-dock .guide-landscape-card {
        position: relative !important;
        flex: 0 0 clamp(220px, 21vw, 315px) !important;
        min-height: clamp(178px, 16vw, 232px) !important;
        overflow: hidden !important;
        padding: 0 !important;
        scroll-snap-align: start !important;
        border: 1px solid rgba(220, 238, 242, .16) !important;
        border-radius: 28px !important;
        background: #184f5f !important;
        color: #fff !important;
        text-align: left !important;
        box-shadow: 0 14px 32px rgba(0, 0, 0, .15) !important;
        cursor: pointer !important;
        isolation: isolate !important;
    }

    .section-dock .guide-landscape-card:hover,
    .section-dock .guide-landscape-card:focus-visible {
        border-color: rgba(244, 220, 174, .46) !important;
        outline: none !important;
    }

    .section-dock .guide-landscape-card.is-current {
        border-color: rgba(244, 220, 174, .70) !important;
        box-shadow: 0 0 0 2px rgba(244, 220, 174, .12), 0 16px 34px rgba(0,0,0,.18) !important;
    }

    .section-dock .guide-card-art,
    .section-dock .guide-landscape-card > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        transition: transform .25s ease !important;
        z-index: 0 !important;
    }

    .section-dock .guide-landscape-card:hover .guide-card-art,
    .section-dock .guide-landscape-card:hover > img {
        transform: scale(1.025) !important;
    }

    .section-dock .guide-landscape-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background: linear-gradient(180deg, rgba(3, 31, 41, .02) 10%, rgba(3, 31, 41, .20) 45%, rgba(3, 31, 41, .92) 100%) !important;
    }

    .section-dock .guide-theme-know .guide-card-art {
        background:
            radial-gradient(circle at 72% 24%, rgba(227, 205, 156, .42), transparent 26%),
            linear-gradient(145deg, #5f796d 0%, #294e50 43%, #193846 100%) !important;
    }

    .section-dock .guide-theme-nature .guide-card-art {
        background:
            radial-gradient(circle at 28% 34%, rgba(133, 178, 121, .58), transparent 26%),
            linear-gradient(145deg, #55765e 0%, #245868 48%, #183946 100%) !important;
    }

    .section-dock .guide-theme-culture .guide-card-art {
        background:
            linear-gradient(35deg, rgba(225, 181, 127, .38), transparent 45%),
            linear-gradient(145deg, #735d52 0%, #4b5961 42%, #173b48 100%) !important;
    }

    .section-dock .guide-theme-flavours .guide-card-art {
        background:
            radial-gradient(circle at 70% 30%, rgba(222, 171, 103, .50), transparent 25%),
            linear-gradient(145deg, #746646 0%, #4d5d47 42%, #173f49 100%) !important;
    }

    .section-dock .guide-theme-experiences .guide-card-art {
        background:
            radial-gradient(circle at 36% 27%, rgba(125, 188, 205, .48), transparent 24%),
            linear-gradient(145deg, #547c89 0%, #2b5b6d 46%, #183846 100%) !important;
    }

    .section-dock .guide-card-overlay {
        position: absolute !important;
        inset: auto 0 0 !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        padding: 20px 20px 18px !important;
    }

    .section-dock .guide-card-overlay small {
        color: rgba(229, 241, 243, .72) !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
    }

    .section-dock .guide-card-overlay strong {
        max-width: 95% !important;
        color: #fff7e9 !important;
        font-size: 20px !important;
        font-weight: 720 !important;
        line-height: 1.08 !important;
        text-shadow: 0 2px 12px rgba(0,0,0,.32) !important;
    }

    .section-dock .guide-card-overlay em {
        display: -webkit-box !important;
        max-width: 95% !important;
        margin-top: 2px !important;
        overflow: hidden !important;
        color: rgba(241, 246, 246, .82) !important;
        font-size: 9px !important;
        font-style: normal !important;
        line-height: 1.35 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .section-dock .guide-group-card .guide-card-overlay em,
    .section-dock .guide-section-card .guide-card-overlay em {
        color: #efd9b5 !important;
        font-weight: 700 !important;
    }

    .section-dock .guide-rail-context {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 15px !important;
        align-items: start !important;
        margin: 0 16px 2px !important;
        padding: 6px 2px 5px !important;
        background: transparent !important;
    }

    .section-dock .guide-rail-context > button {
        margin-top: 2px !important;
        padding: 8px 11px !important;
        border: 1px solid rgba(218, 235, 239, .17) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.025) !important;
        color: #d9e8eb !important;
        font: inherit !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }

    .section-dock .guide-rail-context > button:hover,
    .section-dock .guide-rail-context > button:focus-visible {
        border-color: rgba(240, 214, 158, .42) !important;
        color: #f0dfc2 !important;
        outline: none !important;
    }

    .section-dock .guide-rail-context span {
        color: #75aebc !important;
        font-size: 8px !important;
        font-weight: 750 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    .section-dock .guide-rail-context h3 {
        margin: 3px 0 0 !important;
        color: #f0e4d1 !important;
        font: 500 25px/1.05 Georgia, "Times New Roman", serif !important;
    }

    .section-dock .guide-rail-context p {
        max-width: 620px !important;
        margin: 5px 0 0 !important;
        color: rgba(205, 224, 228, .78) !important;
        font-size: 9.5px !important;
        line-height: 1.45 !important;
    }

    .section-dock .guide-section-rail .guide-landscape-card {
        flex-basis: clamp(205px, 19vw, 270px) !important;
        min-height: clamp(175px, 15vw, 205px) !important;
    }

    .section-dock .guide-item-rail .guide-landscape-card {
        flex-basis: clamp(220px, 20vw, 300px) !important;
        min-height: clamp(165px, 14vw, 195px) !important;
    }

    .section-dock .guide-selected-detail {
        display: grid !important;
        grid-template-columns: minmax(190px, 30%) minmax(0, 1fr) !important;
        gap: 16px !important;
        width: min(940px, calc(100% - 32px)) !important;
        margin: 2px 16px 8px !important;
        overflow: hidden !important;
        border: 1px solid rgba(218, 236, 240, .16) !important;
        border-radius: 22px !important;
        background: rgba(11, 54, 67, .94) !important;
        box-shadow: 0 14px 28px rgba(0,0,0,.12) !important;
    }

    .section-dock .guide-selected-detail > figure {
        min-height: 138px !important;
        margin: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        background: rgba(30, 85, 99, .72) !important;
    }

    .section-dock .guide-selected-detail > figure img {
        width: 100% !important;
        height: 100% !important;
        min-height: 138px !important;
        display: block !important;
        object-fit: cover !important;
    }

    .section-dock .guide-selected-detail > figure figcaption {
        position: absolute !important;
        right: 8px !important;
        bottom: 8px !important;
        max-width: calc(100% - 16px) !important;
        padding: 4px 6px !important;
        border-radius: 7px !important;
        background: rgba(3, 29, 38, .70) !important;
        color: rgba(239,245,245,.72) !important;
        font-size: 6.5px !important;
    }

    .section-dock .guide-selected-copy {
        padding: 14px 18px 14px 2px !important;
    }

    .section-dock .guide-selected-detail:not(:has(figure)) .guide-selected-copy {
        grid-column: 1 / -1 !important;
        padding: 14px 18px !important;
    }

    .section-dock .guide-selected-copy > span {
        color: #7cb4c1 !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    .section-dock .guide-selected-copy h3 {
        margin: 4px 0 7px !important;
        color: #f1e5d2 !important;
        font: 500 24px/1.04 Georgia, "Times New Roman", serif !important;
    }

    .section-dock .guide-selected-copy p {
        max-width: 760px !important;
        margin: 0 0 7px !important;
        color: rgba(214, 230, 233, .84) !important;
        font-size: 10px !important;
        line-height: 1.42 !important;
    }

    .section-dock .guide-selected-lead {
        color: rgba(238, 241, 235, .92) !important;
        font-size: 11.5px !important;
    }

    .section-dock .guide-rail-experience > .content-state {
        margin: 0 16px 16px !important;
    }
}

@media (max-width: 760px) {
    .section-dock .guide-rail-experience {
        min-height: 100% !important;
        padding: 8px 0 18px !important;
        background: transparent !important;
    }

    .section-dock .guide-landscape-rail {
        display: flex !important;
        gap: 10px !important;
        padding: 6px 12px 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
    }

    .section-dock .guide-landscape-rail::-webkit-scrollbar {
        display: none !important;
    }

    .section-dock .guide-rail-intro-card,
    .section-dock .guide-landscape-card {
        flex: 0 0 min(78vw, 310px) !important;
        min-height: 210px !important;
        scroll-snap-align: start !important;
        border-radius: 22px !important;
    }

    .section-dock .guide-rail-intro-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 21px !important;
        border: 1px solid rgba(215, 235, 239, .12) !important;
        background: #073244 !important;
    }

    .section-dock .guide-rail-intro-card h3 {
        margin: 0 !important;
        color: #f0e3ce !important;
        font: 500 28px/1.04 Georgia, "Times New Roman", serif !important;
    }

    .section-dock .guide-rail-intro-card p {
        margin: 10px 0 0 !important;
        color: rgba(220,234,237,.82) !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    .section-dock .guide-landscape-card {
        position: relative !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: 1px solid rgba(220,238,242,.15) !important;
        background: #184f5f !important;
        color: white !important;
        text-align: left !important;
    }

    .section-dock .guide-card-art,
    .section-dock .guide-landscape-card > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 0 !important;
    }

    .section-dock .guide-theme-know .guide-card-art {
        background:
            radial-gradient(circle at 72% 24%, rgba(227, 205, 156, .42), transparent 26%),
            linear-gradient(145deg, #5f796d 0%, #294e50 43%, #193846 100%) !important;
    }

    .section-dock .guide-theme-nature .guide-card-art {
        background:
            radial-gradient(circle at 28% 34%, rgba(133, 178, 121, .58), transparent 26%),
            linear-gradient(145deg, #55765e 0%, #245868 48%, #183946 100%) !important;
    }

    .section-dock .guide-theme-culture .guide-card-art {
        background:
            linear-gradient(35deg, rgba(225, 181, 127, .38), transparent 45%),
            linear-gradient(145deg, #735d52 0%, #4b5961 42%, #173b48 100%) !important;
    }

    .section-dock .guide-theme-flavours .guide-card-art {
        background:
            radial-gradient(circle at 70% 30%, rgba(222, 171, 103, .50), transparent 25%),
            linear-gradient(145deg, #746646 0%, #4d5d47 42%, #173f49 100%) !important;
    }

    .section-dock .guide-theme-experiences .guide-card-art {
        background:
            radial-gradient(circle at 36% 27%, rgba(125, 188, 205, .48), transparent 24%),
            linear-gradient(145deg, #547c89 0%, #2b5b6d 46%, #183846 100%) !important;
    }

    .section-dock .guide-landscape-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(180deg, transparent 15%, rgba(4,32,42,.20) 45%, rgba(4,32,42,.92) 100%) !important;
    }

    .section-dock .guide-card-overlay {
        position: absolute !important;
        z-index: 2 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 17px !important;
    }

    .section-dock .guide-card-overlay small {
        color: rgba(228,241,243,.72) !important;
        font-size: 7px !important;
        text-transform: uppercase !important;
    }

    .section-dock .guide-card-overlay strong {
        color: #fff5e5 !important;
        font-size: 18px !important;
        line-height: 1.08 !important;
    }

    .section-dock .guide-card-overlay em {
        display: -webkit-box !important;
        overflow: hidden !important;
        color: rgba(239,246,246,.82) !important;
        font-size: 8px !important;
        font-style: normal !important;
        line-height: 1.35 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .section-dock .guide-rail-context {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 8px 12px 12px !important;
    }

    .section-dock .guide-rail-context > button {
        padding: 7px 9px !important;
        border: 1px solid rgba(220,238,242,.16) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.025) !important;
        color: #d9e8eb !important;
        font: inherit !important;
        font-size: 8px !important;
    }

    .section-dock .guide-rail-context span {
        color: #76afbd !important;
        font-size: 7px !important;
        text-transform: uppercase !important;
    }

    .section-dock .guide-rail-context h3 {
        margin: 2px 0 0 !important;
        color: #f0e4d1 !important;
        font: 500 22px/1.05 Georgia, "Times New Roman", serif !important;
    }

    .section-dock .guide-rail-context p {
        margin: 4px 0 0 !important;
        color: rgba(204,225,229,.76) !important;
        font-size: 8.5px !important;
        line-height: 1.4 !important;
    }

    .section-dock .guide-selected-detail {
        display: block !important;
        margin: 0 12px 14px !important;
        overflow: hidden !important;
        border: 1px solid rgba(218,236,240,.14) !important;
        border-radius: 20px !important;
        background: rgba(11,54,67,.96) !important;
    }

    .section-dock .guide-selected-detail > figure {
        height: 150px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .section-dock .guide-selected-detail > figure img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .section-dock .guide-selected-copy {
        padding: 15px !important;
    }

    .section-dock .guide-selected-copy h3 {
        margin: 4px 0 8px !important;
        color: #f1e5d2 !important;
        font: 500 22px/1.05 Georgia, "Times New Roman", serif !important;
    }

    .section-dock .guide-selected-copy p {
        color: rgba(214,230,233,.84) !important;
        font-size: 9px !important;
        line-height: 1.5 !important;
    }
}


/* =========================================================
   INTERACTION CLARITY — 2026-09-21
   Controls must look clickable and selected states must be obvious.
   ========================================================= */
.section-dock .explore-group-tab {
    border-color: rgba(202, 228, 233, .20) !important;
    background: rgba(8, 52, 66, .74) !important;
    color: rgba(232, 243, 245, .88) !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.08) !important;
}

.section-dock .explore-group-tab:hover,
.section-dock .explore-group-tab:focus-visible {
    border-color: rgba(240, 214, 158, .42) !important;
    background: rgba(28, 84, 99, .90) !important;
}

.section-dock .explore-group-tab.is-active {
    border-color: rgba(240, 214, 158, .68) !important;
    background: rgba(221, 188, 132, .22) !important;
    color: #fff0d0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 239, 208, .08),
        0 6px 14px rgba(0,0,0,.10) !important;
}

.section-dock .explore-subtools .story-tool {
    border-color: rgba(202, 228, 233, .20) !important;
    background: rgba(8, 52, 66, .78) !important;
    color: #d6e5e8 !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.07) !important;
}

.section-dock .explore-subtools .story-tool:hover,
.section-dock .explore-subtools .story-tool:focus-visible {
    border-color: rgba(240, 214, 158, .40) !important;
    background: rgba(31, 89, 104, .92) !important;
}

.section-dock .explore-subtools .story-tool.is-active,
.section-dock .explore-tool-slot.is-active > .story-tool {
    border-color: rgba(240, 214, 158, .70) !important;
    background: rgba(221, 188, 132, .20) !important;
    color: #fff0d0 !important;
    box-shadow:
        inset 3px 0 0 #F0D69E,
        0 6px 14px rgba(0,0,0,.10) !important;
}

.section-dock .compact-layer-tile {
    border-color: rgba(201, 227, 233, .20) !important;
    background: rgba(17, 75, 90, .82) !important;
    color: #dcebed !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.09) !important;
}

.section-dock .compact-layer-tile:hover,
.section-dock .compact-layer-tile:focus-visible {
    border-color: rgba(240, 214, 158, .42) !important;
    background: rgba(31, 93, 108, .94) !important;
    outline: none !important;
}

.section-dock .compact-layer-tile.active {
    border-color: rgba(240, 214, 158, .72) !important;
    background: rgba(221, 188, 132, .20) !important;
    color: #fff0d0 !important;
    box-shadow:
        inset 3px 0 0 #F0D69E,
        0 7px 16px rgba(0,0,0,.11) !important;
}

.section-dock .compact-layer-tile.active .compact-layer-icon {
    background: rgba(240, 214, 158, .16) !important;
    color: #f1d9aa !important;
}

.section-dock .live-beaches-browser .explore-item-card.is-active {
    border-color: rgba(240, 214, 158, .78) !important;
    background: rgba(43, 112, 128, .98) !important;
    color: #fff3dc !important;
    box-shadow:
        inset 4px 0 0 #F0D69E,
        0 10px 22px rgba(0,0,0,.14) !important;
}

.section-dock button:active {
    transform: translateY(1px) scale(.995) !important;
}


/* LIVE groups — current conditions and transport share one map-first drawer. */
.section-dock .live-layer-group {
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
}

.section-dock .live-layer-group-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 2px 7px !important;
    padding: 0 2px !important;
    color: rgba(221, 237, 240, .82) !important;
}

.section-dock .live-layer-group-head strong {
    color: #f0e2c9 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}

.section-dock .live-layer-group-head span {
    color: rgba(190, 216, 222, .62) !important;
    font-size: 8px !important;
}

.section-dock .live-layer-group .compact-layer-grid {
    margin: 0 !important;
}


/* Explore transport is orientation, not a live timetable. */
.section-dock .explore-map-layer-note {
    margin-top: 8px !important;
    padding: 10px 2px 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.section-dock .explore-map-layer-note .explore-browser-head {
    margin-bottom: 5px !important;
}

.section-dock .explore-map-layer-note p {
    max-width: 430px !important;
    margin: 0 !important;
    color: rgba(210, 228, 232, .72) !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
}


/* Transit route lists are map selectors, not timetable cards. */
.section-dock .titsa-route-card {
    width: 100% !important;
    padding: 8px 4px !important;
    border: 0 !important;
    border-top: 1px solid rgba(218, 236, 240, .10) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
}

.section-dock .titsa-route-card:hover,
.section-dock .titsa-route-card:focus-visible {
    background: rgba(125, 184, 194, .08) !important;
    outline: none !important;
}

.section-dock .titsa-route-card.is-active {
    padding-left: 9px !important;
    border-top-color: rgba(240, 214, 158, .34) !important;
    background: rgba(240, 214, 158, .10) !important;
    box-shadow: inset 3px 0 0 #F0D69E !important;
}

.section-dock .titsa-route-card.is-active .titsa-route-head strong {
    background: rgba(240, 214, 158, .16) !important;
    color: #F0D69E !important;
}


/* Transit line numbers must never be clipped. */
.section-dock .titsa-route-head {
    min-width: 0 !important;
    overflow: visible !important;
}

.section-dock .titsa-route-head strong {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    max-width: none !important;
    padding: 4px 9px !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
}

.section-dock .titsa-route-head span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* Calendar quick time filters — answer "what can I do now?" before category browsing. */
.section-dock .calendar-quick-filter {
    display: flex !important;
    gap: 6px !important;
    margin: 0 0 9px !important;
    overflow-x: auto !important;
    padding: 1px 0 2px !important;
    scrollbar-width: none !important;
}

.section-dock .calendar-quick-filter::-webkit-scrollbar {
    display: none !important;
}

.section-dock .calendar-quick {
    flex: 0 0 auto !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(139, 181, 191, .18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .025) !important;
    color: rgba(215, 230, 233, .78) !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.section-dock .calendar-quick:hover,
.section-dock .calendar-quick:focus-visible {
    border-color: rgba(240, 214, 158, .34) !important;
    color: #F0D69E !important;
    outline: none !important;
}

.section-dock .calendar-quick.active {
    border-color: rgba(240, 214, 158, .52) !important;
    background: rgba(240, 214, 158, .11) !important;
    color: #F0D69E !important;
}


/* Calendar archive: upcoming stays action-oriented; historical is a separate calm view. */
.section-dock .calendar-view-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 0 10px !important;
    padding: 3px !important;
    border: 1px solid rgba(139, 181, 191, .16) !important;
    border-radius: 999px !important;
    background: rgba(8, 31, 39, .34) !important;
}

.section-dock .calendar-view-tab {
    min-height: 28px !important;
    padding: 6px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(215, 230, 233, .66) !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
}

.section-dock .calendar-view-tab:hover,
.section-dock .calendar-view-tab:focus-visible {
    color: #F0D69E !important;
    outline: none !important;
}

.section-dock .calendar-view-tab.active {
    background: rgba(240, 214, 158, .13) !important;
    color: #F0D69E !important;
    box-shadow: inset 0 0 0 1px rgba(240, 214, 158, .20) !important;
}

.section-dock .calendar-archive-controls {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
}

.section-dock .calendar-archive-controls label {
    display: grid !important;
    gap: 4px !important;
    min-width: min(280px, 72vw) !important;
}

.section-dock .calendar-archive-controls label > span,
.section-dock .calendar-archive-controls > small {
    color: rgba(210, 228, 232, .58) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

.section-dock .calendar-archive-controls select {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 32px 7px 10px !important;
    border: 1px solid rgba(139, 181, 191, .19) !important;
    border-radius: 9px !important;
    background: rgba(7, 28, 36, .72) !important;
    color: rgba(235, 242, 242, .92) !important;
    font: inherit !important;
    font-size: 9px !important;
    outline: none !important;
}

.section-dock .calendar-archive-controls select:focus {
    border-color: rgba(240, 214, 158, .42) !important;
}

.section-dock .calendar-archive-controls.is-loading,
.section-dock .calendar-archive-controls.is-empty {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 8px 2px !important;
    color: rgba(210, 228, 232, .64) !important;
    font-size: 9px !important;
}

.section-dock .calendar-toolbar button:disabled {
    opacity: .24 !important;
    cursor: default !important;
}


/* Calendar zones: practical travel areas, not municipality-by-municipality noise. */
.section-dock .calendar-zone-filter {
    display: flex !important;
    gap: 6px !important;
    margin: 1px 0 10px !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.section-dock .calendar-zone-filter::-webkit-scrollbar {
    display: none !important;
}

.section-dock .calendar-zone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    min-height: 31px !important;
    padding: 6px 9px 6px 11px !important;
    border: 1px solid rgba(125, 184, 194, .17) !important;
    border-radius: 10px !important;
    background: rgba(6, 29, 37, .28) !important;
    color: rgba(218, 232, 234, .70) !important;
    font-size: 8.5px !important;
    font-weight: 720 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.section-dock .calendar-zone small {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: rgba(125, 184, 194, .10) !important;
    color: rgba(219, 233, 235, .62) !important;
    font-size: 7.5px !important;
    font-weight: 760 !important;
}

.section-dock .calendar-zone:hover,
.section-dock .calendar-zone:focus-visible {
    border-color: rgba(240, 214, 158, .34) !important;
    color: #F0D69E !important;
    outline: none !important;
}

.section-dock .calendar-zone.active {
    border-color: rgba(240, 214, 158, .46) !important;
    background: rgba(240, 214, 158, .10) !important;
    color: #F0D69E !important;
}

.section-dock .calendar-zone.active small {
    background: rgba(240, 214, 158, .14) !important;
    color: #F0D69E !important;
}

.section-dock .calendar-event-area {
    color: rgba(240, 214, 158, .67) !important;
    font-size: 8px !important;
}


/* Calendar zone context — compact orientation, never a heavy panel. */
.section-dock .calendar-zone-context {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: -2px 0 10px !important;
    padding: 0 2px !important;
    background: transparent !important;
}

.section-dock .calendar-zone-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 6px !important;
    color: rgba(205, 225, 229, .62) !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
}

.section-dock .calendar-zone-breadcrumb strong {
    overflow: hidden !important;
    color: #F0D69E !important;
    font-weight: 780 !important;
    text-overflow: ellipsis !important;
}

.section-dock .calendar-zone-reset {
    flex: 0 0 auto !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(210, 230, 233, .72) !important;
    font: inherit !important;
    font-size: 8px !important;
    font-weight: 720 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(240, 214, 158, .26) !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
}

.section-dock .calendar-zone-reset:hover,
.section-dock .calendar-zone-reset:focus-visible {
    color: #F0D69E !important;
    outline: none !important;
}

@media (max-width: 760px) {
    .section-dock .calendar-zone-context {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
}


/* =========================================================
   CALENDAR CLEANUP — 2026-09-22
   Fewer competing controls; month remains the primary visual anchor.
   ========================================================= */
.section-dock .calendar-month-experience {
    padding: 14px !important;
}

.section-dock .calendar-head {
    display: grid !important;
    grid-template-columns: auto minmax(190px, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.section-dock .calendar-head .calendar-view-switch {
    margin: 0 !important;
}

.section-dock .calendar-head .calendar-toolbar {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 28px !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.section-dock .calendar-head .calendar-toolbar strong {
    overflow: hidden !important;
    color: #f0e2ca !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.section-dock .calendar-head .calendar-toolbar button {
    width: 28px !important;
    height: 28px !important;
}

.section-dock .calendar-quick-filter {
    margin: 0 0 8px !important;
}

.section-dock .calendar-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.section-dock .calendar-filter-field {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.section-dock .calendar-filter-field > span {
    padding-left: 2px !important;
    color: rgba(198, 221, 226, .52) !important;
    font-size: 7.5px !important;
    font-weight: 760 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.section-dock .calendar-filter-field select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 28px 7px 10px !important;
    border: 1px solid rgba(139, 181, 191, .16) !important;
    border-radius: 9px !important;
    background: rgba(7, 28, 36, .54) !important;
    color: rgba(236, 242, 242, .88) !important;
    font: inherit !important;
    font-size: 9px !important;
    outline: none !important;
}

.section-dock .calendar-filter-field select:focus {
    border-color: rgba(240, 214, 158, .38) !important;
}

.section-dock .calendar-zone-context {
    margin: -2px 0 8px !important;
}

.section-dock .calendar-month-grid {
    margin-top: 10px !important;
    gap: 3px !important;
}

.section-dock .calendar-day {
    border-radius: 7px !important;
    background: rgba(255,255,255,.008) !important;
}

.section-dock .calendar-day.has-events {
    background: rgba(240, 214, 158, .055) !important;
}

.section-dock .calendar-day-agenda {
    margin-top: 14px !important;
    padding-top: 13px !important;
}

.section-dock .calendar-list-event {
    padding: 9px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.012) !important;
}

@media (max-width: 760px) {
    .section-dock .calendar-head {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .section-dock .calendar-head .calendar-view-switch {
        justify-self: start !important;
    }

    .section-dock .calendar-filter-bar {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================================
   CANARIAS EN DATOS — 2026-09-23
   Structural/historical data, intentionally distinct from Live.
   ========================================================= */
.section-dock .datos-experience {
    display: grid !important;
    gap: 12px !important;
    margin: 0 12px 18px !important;
}

.section-dock .datos-intro,
.section-dock .datos-section-head,
.section-dock .datos-principle,
.section-dock .datos-source-note,
.section-dock .datos-indicators,
.section-dock .datos-chart-stage {
    border: 1px solid rgba(210, 234, 239, .13) !important;
    border-radius: 22px !important;
    background: rgba(31, 91, 107, .90) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .09) !important;
}

.section-dock .datos-intro,
.section-dock .datos-section-head {
    padding: 18px !important;
}

.section-dock .datos-intro > span,
.section-dock .datos-section-head > span,
.section-dock .datos-source-note > span,
.section-dock .datos-indicators > span,
.section-dock .datos-chart-stage span {
    color: rgba(191, 218, 224, .58) !important;
    font-size: 7.5px !important;
    font-weight: 780 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.section-dock .datos-intro h3,
.section-dock .datos-section-head h3 {
    margin: 7px 0 7px !important;
    color: #f0e2ca !important;
    font: 500 28px/1.06 Georgia, "Times New Roman", serif !important;
}

.section-dock .datos-intro p,
.section-dock .datos-section-head p,
.section-dock .datos-chart-stage p {
    margin: 0 !important;
    color: rgba(215, 232, 235, .74) !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
}

.section-dock .datos-principle {
    display: grid !important;
    gap: 4px !important;
    padding: 12px 14px !important;
    background: rgba(240, 214, 158, .055) !important;
}

.section-dock .datos-principle strong {
    color: #ead8b8 !important;
    font-size: 10px !important;
}

.section-dock .datos-principle span {
    color: rgba(201, 224, 228, .66) !important;
    font-size: 8px !important;
    line-height: 1.4 !important;
}

.section-dock .datos-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.section-dock .datos-card {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 13px !important;
    border: 1px solid rgba(210, 234, 239, .12) !important;
    border-radius: 18px !important;
    background: rgba(31, 91, 107, .86) !important;
    color: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
}

.section-dock .datos-card:hover,
.section-dock .datos-card:focus-visible {
    border-color: rgba(240, 214, 158, .34) !important;
    background: rgba(39, 105, 121, .95) !important;
    outline: none !important;
}

.section-dock .datos-card.is-priority {
    border-color: rgba(240, 214, 158, .27) !important;
    background:
        linear-gradient(
            135deg,
            rgba(240, 214, 158, .055),
            rgba(31, 91, 107, .03)
        ),
        rgb(31, 91, 107) !important;
}

.section-dock .datos-card-topline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.section-dock .datos-card-topline small {
    color: rgba(183, 211, 217, .52) !important;
    font-size: 6.5px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
}

.section-dock .datos-card.is-priority .datos-card-topline small,
.section-dock .datos-card-topline em {
    color: #f0d69e !important;
}

.section-dock .datos-card-topline em {
    font-size: 11px !important;
    font-style: normal !important;
}

.section-dock .datos-card > strong {
    color: #efe2ce !important;
    font-size: 12px !important;
}

.section-dock .datos-card > span:not(.datos-card-topline) {
    color: rgba(194, 220, 225, .68) !important;
    font-size: 8px !important;
}

.section-dock .datos-card p {
    margin: 2px 0 0 !important;
    color: rgba(187, 211, 216, .56) !important;
    font-size: 8px !important;
    line-height: 1.4 !important;
}

.section-dock .datos-section-head > button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(217, 232, 234, .70) !important;
    font: inherit !important;
    font-size: 8.5px !important;
    cursor: pointer !important;
}

.section-dock .datos-section-head > button:hover,
.section-dock .datos-section-head > button:focus-visible {
    color: #f0d69e !important;
    outline: none !important;
}

.section-dock .datos-source-note,
.section-dock .datos-indicators {
    display: grid !important;
    gap: 8px !important;
    padding: 13px 14px !important;
}

.section-dock .datos-source-note strong {
    color: rgba(235, 242, 242, .88) !important;
    font-size: 9px !important;
}

.section-dock .datos-indicators > div {
    display: grid !important;
    gap: 6px !important;
}

.section-dock .datos-indicators p {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    margin: 0 !important;
    color: rgba(215, 232, 235, .76) !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
}

.section-dock .datos-indicators i {
    flex: 0 0 5px !important;
    width: 5px !important;
    height: 5px !important;
    margin-top: 4px !important;
    border-radius: 50% !important;
    background: rgba(240, 214, 158, .65) !important;
}

.section-dock .datos-chart-stage {
    min-height: 150px !important;
    padding: 18px !important;
    background:
        linear-gradient(rgba(31,91,107,.88), rgba(31,91,107,.88)),
        repeating-linear-gradient(
            to top,
            rgba(210,234,239,.055) 0,
            rgba(210,234,239,.055) 1px,
            transparent 1px,
            transparent 30px
        ) !important;
}

.section-dock .datos-chart-stage > div {
    display: grid !important;
    gap: 7px !important;
    align-content: end !important;
    min-height: 114px !important;
}

.section-dock .datos-chart-stage strong {
    color: #eadfc9 !important;
    font-size: 11px !important;
}

@media (max-width: 760px) {
    .section-dock .datos-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .section-dock .datos-card {
        padding: 12px !important;
    }

    .section-dock .datos-intro h3,
    .section-dock .datos-section-head h3 {
        font-size: 24px !important;
    }
}


/* =========================================================
   DATOS LIVE SERIES — 2026-09-27
   Real Tourism Pulse values and compact historical charts.
   ========================================================= */
.section-dock .datos-sync-status {
    display: inline-flex !important;
    margin-top: 10px !important;
    padding: 5px 8px !important;
    width: fit-content !important;
    border-radius: 999px !important;
    background: rgba(8, 36, 47, .34) !important;
    color: rgba(216, 232, 235, .72) !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
}

.section-dock .datos-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.section-dock .datos-kpi-grid-single {
    grid-template-columns: minmax(0, 1fr) !important;
}

.section-dock .datos-kpi-card {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 13px !important;
    border: 1px solid rgba(210, 234, 239, .13) !important;
    border-radius: 18px !important;
    background: rgba(31, 91, 107, .88) !important;
}

.section-dock .datos-kpi-card > span {
    color: rgba(193, 218, 223, .62) !important;
    font-size: 7.5px !important;
    font-weight: 760 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.section-dock .datos-kpi-card > strong {
    color: #f0dfc2 !important;
    font: 500 19px/1.05 Georgia, "Times New Roman", serif !important;
    overflow-wrap: anywhere !important;
}

.section-dock .datos-kpi-card > small {
    color: rgba(205, 225, 229, .65) !important;
    font-size: 7.5px !important;
    line-height: 1.35 !important;
}

.section-dock .datos-kpi-card.is-empty {
    opacity: .58 !important;
}

.section-dock .datos-series-stack {
    display: grid !important;
    gap: 9px !important;
}

.section-dock .datos-series-panel {
    display: grid !important;
    gap: 9px !important;
    padding: 13px 14px 11px !important;
    border: 1px solid rgba(210, 234, 239, .13) !important;
    border-radius: 20px !important;
    background: rgba(31, 91, 107, .89) !important;
    overflow: hidden !important;
}

.section-dock .datos-series-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.section-dock .datos-series-head > div {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.section-dock .datos-series-head strong {
    color: rgba(236, 226, 208, .94) !important;
    font-size: 10px !important;
}

.section-dock .datos-series-head span {
    color: rgba(193, 218, 223, .58) !important;
    font-size: 7.5px !important;
}

.section-dock .datos-series-head b {
    color: #f0d69e !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.section-dock .datos-line-chart {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 120px !important;
    overflow: visible !important;
}

.section-dock .datos-line-chart line {
    stroke: rgba(210, 234, 239, .09) !important;
    stroke-width: 1 !important;
}

.section-dock .datos-line-chart polyline {
    fill: none !important;
    stroke: rgba(240, 214, 158, .90) !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
}

.section-dock .datos-series-range {
    display: flex !important;
    justify-content: space-between !important;
    color: rgba(190, 215, 220, .50) !important;
    font-size: 7px !important;
}

.section-dock .datos-footnote {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 10px !important;
    padding: 2px 2px 0 !important;
    color: rgba(190, 215, 220, .52) !important;
    font-size: 7px !important;
    line-height: 1.35 !important;
}

.section-dock .datos-footnote strong {
    color: #f0d69e !important;
    font-weight: 650 !important;
}

.section-dock .datos-scope-note {
    display: grid !important;
    gap: 4px !important;
    padding: 11px 13px !important;
    border: 1px solid rgba(240, 214, 158, .20) !important;
    border-radius: 17px !important;
    background: rgba(240, 214, 158, .055) !important;
}

.section-dock .datos-scope-note strong {
    color: #f0d69e !important;
    font-size: 9px !important;
}

.section-dock .datos-scope-note span {
    color: rgba(214, 230, 232, .68) !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
}

@media (max-width: 760px) {
    .section-dock .datos-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .section-dock .datos-series-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
}


/* =========================================================
   DATOS SUBTABS — 2026-09-27
   Tourism and Climate domain navigation.
   ========================================================= */
.section-dock .datos-subtabs {
    display: flex !important;
    gap: 6px !important;
    padding: 4px !important;
    border: 1px solid rgba(210, 234, 239, .11) !important;
    border-radius: 999px !important;
    background: rgba(8, 36, 47, .26) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.section-dock .datos-subtabs::-webkit-scrollbar {
    display: none !important;
}

.section-dock .datos-subtabs button {
    flex: 0 0 auto !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(201, 224, 228, .64) !important;
    font: inherit !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.section-dock .datos-subtabs button:hover,
.section-dock .datos-subtabs button:focus-visible {
    color: #f0dfc2 !important;
    background: rgba(240, 214, 158, .06) !important;
    outline: none !important;
}

.section-dock .datos-subtabs button.is-active {
    color: #f0d69e !important;
    background: rgba(240, 214, 158, .11) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 214, 158, .16) !important;
}


/* =========================================================
   DATOS GEOLOGY — 2026-09-27
   Historical seismic events and volcanic IGN reports.
   ========================================================= */
.section-dock .datos-event-list,
.section-dock .datos-volcanic-list {
    display: grid !important;
    gap: 8px !important;
}

.section-dock .datos-event-card,
.section-dock .datos-report-card {
    display: grid !important;
    gap: 6px !important;
    padding: 12px 13px !important;
    border: 1px solid rgba(210, 234, 239, .12) !important;
    border-radius: 17px !important;
    background: rgba(31, 91, 107, .87) !important;
}

.section-dock .datos-event-card > div {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.section-dock .datos-event-card strong,
.section-dock .datos-report-card > strong {
    color: #efe2ce !important;
    font-size: 10px !important;
}

.section-dock .datos-event-card span,
.section-dock .datos-report-card > span {
    color: rgba(194, 220, 225, .58) !important;
    font-size: 7.5px !important;
}

.section-dock .datos-event-card p,
.section-dock .datos-report-card p {
    margin: 0 !important;
    color: rgba(215, 232, 235, .74) !important;
    font-size: 8.5px !important;
    line-height: 1.45 !important;
}

.section-dock .datos-event-card small,
.section-dock .datos-report-card small {
    color: rgba(186, 212, 217, .52) !important;
    font-size: 7px !important;
}

.section-dock .datos-report-card > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.section-dock .datos-report-card > div small {
    padding: 4px 6px !important;
    border-radius: 999px !important;
    background: rgba(8, 36, 47, .28) !important;
}

.section-dock .datos-empty-copy {
    margin: 0 !important;
    padding: 14px !important;
    border: 1px dashed rgba(210, 234, 239, .14) !important;
    border-radius: 17px !important;
    color: rgba(194, 220, 225, .58) !important;
    font-size: 8.5px !important;
    text-align: center !important;
}


/* =========================================================
   DATOS METADATA — 2026-09-27
   Shared source / update / methodology / processing disclosure.
   ========================================================= */
.section-dock .datos-metadata {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: hidden !important;
    border: 1px solid rgba(210, 234, 239, .12) !important;
    border-radius: 18px !important;
    background: rgba(210, 234, 239, .08) !important;
}

.section-dock .datos-metadata-item {
    display: grid !important;
    align-content: start !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 11px 12px !important;
    background: rgba(31, 91, 107, .92) !important;
}

.section-dock .datos-metadata-item > span {
    color: rgba(184, 211, 217, .52) !important;
    font-size: 6.5px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.section-dock .datos-metadata-item strong,
.section-dock .datos-metadata-item a,
.section-dock .datos-metadata-item p {
    margin: 0 !important;
    color: rgba(223, 235, 236, .78) !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

.section-dock .datos-metadata-item a {
    color: #f0d69e !important;
    text-decoration: none !important;
}

.section-dock .datos-metadata-item a:hover,
.section-dock .datos-metadata-item a:focus-visible {
    text-decoration: underline !important;
    outline: none !important;
}

.section-dock .datos-metadata-method {
    grid-column: 1 / -1 !important;
}

.section-dock .datos-metadata-warning {
    grid-column: 1 / -1 !important;
    padding: 8px 12px !important;
    background: rgba(240, 214, 158, .08) !important;
    color: #f0d69e !important;
    font-size: 7.5px !important;
    line-height: 1.4 !important;
}

@media (max-width: 760px) {
    .section-dock .datos-metadata {
        grid-template-columns: 1fr !important;
    }

    .section-dock .datos-metadata-method,
    .section-dock .datos-metadata-warning {
        grid-column: auto !important;
    }
}


/* =========================================================
   DATOS CALIMA — 2026-09-27
   Ported detector status + closed event history.
   ========================================================= */
.section-dock .datos-calima-status {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(210, 234, 239, .13) !important;
    border-radius: 18px !important;
    background: rgba(31, 91, 107, .90) !important;
}

.section-dock .datos-calima-status > div {
    display: grid !important;
    gap: 3px !important;
}

.section-dock .datos-calima-status span {
    color: rgba(189, 216, 221, .55) !important;
    font-size: 6.5px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.section-dock .datos-calima-status strong {
    color: #dfecee !important;
    font-size: 12px !important;
}

.section-dock .datos-calima-status small {
    color: rgba(202, 224, 228, .62) !important;
    font-size: 7.5px !important;
    text-align: right !important;
}

.section-dock .datos-calima-status-signature {
    border-color: rgba(240, 214, 158, .28) !important;
    background: rgba(174, 118, 48, .12) !important;
}

.section-dock .datos-calima-status-signature strong {
    color: #f0d69e !important;
}

.section-dock .datos-calima-status-strong {
    border-color: rgba(240, 164, 140, .28) !important;
    background: rgba(139, 66, 52, .15) !important;
}

.section-dock .datos-calima-status-strong strong {
    color: #f0c0b0 !important;
}

.section-dock .datos-calima-event {
    border-color: rgba(240, 214, 158, .14) !important;
}

@media (max-width: 760px) {
    .section-dock .datos-calima-status {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .section-dock .datos-calima-status small {
        text-align: left !important;
    }
}


/* =========================================================
   DATOS CLIMATE POINT SELECTOR — 2026-09-28
   Explicit monitoring point context for historical climate data.
   ========================================================= */
.section-dock .datos-climate-point {
    display: grid !important;
    gap: 6px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(210, 234, 239, .13) !important;
    border-radius: 16px !important;
    background: rgba(31, 91, 107, .86) !important;
}

.section-dock .datos-climate-point > span {
    color: rgba(184, 211, 217, .56) !important;
    font-size: 6.5px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.section-dock .datos-climate-point select {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 34px 9px 10px !important;
    border: 1px solid rgba(210, 234, 239, .14) !important;
    border-radius: 12px !important;
    background: rgba(10, 49, 60, .42) !important;
    color: #e5eff0 !important;
    font: inherit !important;
    font-size: 9px !important;
    outline: none !important;
}

.section-dock .datos-climate-point select:focus {
    border-color: rgba(240, 214, 158, .48) !important;
}

.section-dock .datos-calima-status-value {
    display: grid !important;
    gap: 3px !important;
    text-align: right !important;
}

@media (max-width: 760px) {
    .section-dock .datos-calima-status-value {
        text-align: left !important;
    }
}


/* =========================================================
   LIVE BEACH SANITARY — 2026-09-28
   Official SCS bathing-water status inside Live beaches.
   ========================================================= */
.section-dock .api-sanitary-card {
    display: grid !important;
    gap: 9px !important;
    margin-top: 6px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(210, 234, 239, .14) !important;
    border-radius: 15px !important;
    background: rgba(31, 91, 107, .72) !important;
}

.section-dock .api-sanitary-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.section-dock .api-sanitary-head > span {
    color: rgba(190, 216, 221, .58) !important;
    font-size: 6.5px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.section-dock .api-sanitary-head > strong {
    color: #dfecee !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    text-align: right !important;
}

.section-dock .api-sanitary-ok {
    border-color: rgba(143, 210, 223, .28) !important;
    background: rgba(59, 133, 126, .14) !important;
}

.section-dock .api-sanitary-ok .api-sanitary-head > strong {
    color: #bce4dc !important;
}

.section-dock .api-sanitary-alert {
    border-color: rgba(240, 164, 140, .4) !important;
    background: rgba(139, 66, 52, .17) !important;
}

.section-dock .api-sanitary-alert .api-sanitary-head > strong {
    color: #f0b6a5 !important;
}

.section-dock .api-sanitary-unknown {
    color: rgba(215, 230, 233, .66) !important;
}

.section-dock .api-sanitary-unknown strong {
    color: rgba(229, 239, 240, .78) !important;
    font-size: 8.5px !important;
}

.section-dock .api-sanitary-unknown span {
    font-size: 7.5px !important;
    line-height: 1.45 !important;
}

.section-dock .api-sanitary-source {
    color: #f0d69e !important;
    font-size: 7.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.section-dock .api-sanitary-source:hover,
.section-dock .api-sanitary-source:focus-visible {
    text-decoration: underline !important;
    outline: none !important;
}

@media (max-width: 760px) {
    .section-dock .api-sanitary-head {
        flex-direction: column !important;
    }

    .section-dock .api-sanitary-head > strong {
        text-align: left !important;
    }
}


/* =========================================================
   DATOS AIR PASSENGERS — 2026-09-29
   Pasajeros Canarias: origin, traffic type and seasonality.
   ========================================================= */
.section-dock .datos-passenger-modes {
    margin-top: -2px !important;
}

.section-dock .datos-origin-list,
.section-dock .datos-flight-list {
    display: grid !important;
    gap: 8px !important;
}

.section-dock .datos-origin-row {
    display: grid !important;
    grid-template-columns: minmax(92px, 1.15fr) minmax(74px, 1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
}

.section-dock .datos-origin-row > div:first-child {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
}

.section-dock .datos-origin-row strong {
    overflow: hidden !important;
    color: rgba(236, 226, 208, .94) !important;
    font-size: 8.5px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.section-dock .datos-origin-row span {
    color: rgba(193, 218, 223, .54) !important;
    font-size: 6.8px !important;
    white-space: nowrap !important;
}

.section-dock .datos-origin-row > b {
    color: #f0d69e !important;
    font-size: 8px !important;
    font-weight: 760 !important;
    text-align: right !important;
}

.section-dock .datos-origin-track,
.section-dock .datos-flight-track {
    position: relative !important;
    height: 7px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(6, 33, 43, .38) !important;
}

.section-dock .datos-origin-track > i,
.section-dock .datos-flight-track > i {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    display: block !important;
    border-radius: inherit !important;
    background: linear-gradient(
        90deg,
        rgba(240, 214, 158, .74),
        rgba(184, 222, 224, .78)
    ) !important;
}

.section-dock .datos-flight-row {
    display: grid !important;
    grid-template-columns: 74px minmax(80px, 1fr) 42px 66px !important;
    align-items: center !important;
    gap: 8px !important;
}

.section-dock .datos-flight-row > span {
    color: rgba(226, 235, 234, .78) !important;
    font-size: 8px !important;
}

.section-dock .datos-flight-row > strong {
    color: #f0d69e !important;
    font-size: 8px !important;
    text-align: right !important;
}

.section-dock .datos-flight-row > small {
    color: rgba(193, 218, 223, .58) !important;
    font-size: 6.8px !important;
    text-align: right !important;
}

.section-dock .datos-seasonality-scroll {
    overflow-x: auto !important;
    padding-bottom: 2px !important;
}

.section-dock .datos-seasonality-scroll::-webkit-scrollbar {
    height: 3px !important;
}

.section-dock .datos-seasonality-grid {
    display: grid !important;
    grid-template-columns: 34px repeat(12, minmax(19px, 1fr)) !important;
    gap: 3px !important;
    min-width: 310px !important;
    align-items: center !important;
}

.section-dock .datos-seasonality-grid > b {
    color: rgba(190, 215, 220, .48) !important;
    font-size: 6.4px !important;
    font-weight: 760 !important;
    text-align: center !important;
}

.section-dock .datos-seasonality-grid > strong {
    color: rgba(226, 235, 234, .68) !important;
    font-size: 7px !important;
    font-weight: 760 !important;
}

.section-dock .datos-seasonality-grid > i {
    display: block !important;
    height: 17px !important;
    border: 1px solid rgba(240, 214, 158, .06) !important;
    border-radius: 5px !important;
    background: rgba(240, 214, 158, var(--heat, .08)) !important;
}

.section-dock .datos-seasonality-grid > i.is-empty {
    background: rgba(31, 91, 107, .55) !important;
}

@media (max-width: 760px) {
    .section-dock .datos-origin-row {
        grid-template-columns: minmax(84px, 1.1fr) minmax(62px, 1fr) 38px !important;
    }

    .section-dock .datos-flight-row {
        grid-template-columns: 68px minmax(70px, 1fr) 40px 58px !important;
    }
}


/* =========================================================
   DATOS AIR PASSENGER VIEWS — 2026-09-29
   Nested air tabs, flight-type trend and ML forecast.
   ========================================================= */
.section-dock .datos-air-tabs {
    margin-top: 8px !important;
}

.section-dock .datos-air-view {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.section-dock .datos-air-view .datos-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.section-dock .datos-air-view .datos-kpi-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
}

.section-dock .datos-flight-history {
    display: grid !important;
    gap: 7px !important;
    padding-top: 11px !important;
    border-top: 1px solid rgba(210, 234, 239, .09) !important;
}

.section-dock .datos-flight-history-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.section-dock .datos-flight-history-head strong {
    color: rgba(236, 226, 208, .92) !important;
    font-size: 8.5px !important;
}

.section-dock .datos-flight-history-head span {
    color: rgba(193, 218, 223, .52) !important;
    font-size: 6.8px !important;
}

.section-dock .datos-flight-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 10px !important;
    color: rgba(203, 223, 226, .66) !important;
    font-size: 6.8px !important;
}

.section-dock .datos-flight-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.section-dock .datos-flight-legend span::before {
    width: 10px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    content: "" !important;
}

.section-dock .datos-flight-legend .is-interinsular {
    color: rgba(240, 214, 158, .88) !important;
}

.section-dock .datos-flight-legend .is-peninsular {
    color: rgba(153, 211, 221, .84) !important;
}

.section-dock .datos-flight-legend .is-foreign {
    color: rgba(202, 232, 206, .78) !important;
}

.section-dock .datos-flight-history-chart {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 132px !important;
    overflow: visible !important;
}

.section-dock .datos-flight-history-chart line {
    stroke: rgba(210, 234, 239, .09) !important;
    stroke-width: 1 !important;
}

.section-dock .datos-flight-history-chart polyline {
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
}

.section-dock .datos-flight-history-chart .is-interinsular {
    stroke: rgba(240, 214, 158, .94) !important;
}

.section-dock .datos-flight-history-chart .is-peninsular {
    stroke: rgba(153, 211, 221, .90) !important;
}

.section-dock .datos-flight-history-chart .is-foreign {
    stroke: rgba(202, 232, 206, .86) !important;
}

.section-dock .datos-forecast-panel {
    gap: 10px !important;
}

.section-dock .datos-forecast-warning {
    display: grid !important;
    gap: 3px !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(240, 214, 158, .29) !important;
    border-radius: 13px !important;
    background: rgba(240, 214, 158, .08) !important;
}

.section-dock .datos-forecast-warning strong {
    color: #f0d69e !important;
    font-size: 9px !important;
}

.section-dock .datos-forecast-warning span,
.section-dock .datos-forecast-scope {
    color: rgba(215, 232, 235, .70) !important;
    font-size: 7.6px !important;
    line-height: 1.45 !important;
}

.section-dock .datos-forecast-scope {
    margin: 0 !important;
}

.section-dock .datos-forecast-table {
    display: grid !important;
    overflow: hidden !important;
    border: 1px solid rgba(210, 234, 239, .11) !important;
    border-radius: 13px !important;
    background: rgba(8, 36, 47, .24) !important;
}

.section-dock .datos-forecast-row {
    display: grid !important;
    grid-template-columns: minmax(80px, 1fr) repeat(2, minmax(72px, .9fr)) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    border-top: 1px solid rgba(210, 234, 239, .07) !important;
}

.section-dock .datos-forecast-row:first-child {
    border-top: 0 !important;
}

.section-dock .datos-forecast-row span {
    color: rgba(207, 226, 229, .70) !important;
    font-size: 7.5px !important;
}

.section-dock .datos-forecast-row strong {
    color: rgba(236, 226, 208, .88) !important;
    font-size: 7.7px !important;
    font-weight: 720 !important;
    text-align: right !important;
}

.section-dock .datos-forecast-row.is-head {
    background: rgba(31, 91, 107, .68) !important;
}

.section-dock .datos-forecast-row.is-head span,
.section-dock .datos-forecast-row.is-head strong {
    color: rgba(240, 214, 158, .88) !important;
    font-size: 6.7px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

@media (max-width: 760px) {
    .section-dock .datos-air-view .datos-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .section-dock .datos-forecast-row {
        grid-template-columns: minmax(72px, 1fr) repeat(2, minmax(64px, .9fr)) !important;
        gap: 6px !important;
        padding-inline: 8px !important;
    }
}


/* =========================================================
   DESKTOP READABILITY + TRANSPORT RESTORE — 2026-10-09
   Keep the map dominant, but restore a genuinely readable left rail.
   ========================================================= */
@media (min-width: 761px) {
    .map-area {
        --cc-left-rail-width: clamp(490px, 34vw, 540px);
    }

    .map-area:has(.top-map-panel.explore-panel.has-island:not(.closed)),
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) {
        grid-template-columns: var(--cc-left-rail-width) minmax(0, 1fr) !important;
    }

    .top-map-panel.explore-panel.has-island,
    #explore-panel.has-island,
    .map-area.section-dock-open:has(#explore-panel.has-island:not(.closed)) > .section-dock {
        width: var(--cc-left-rail-width) !important;
        min-width: var(--cc-left-rail-width) !important;
    }

    .top-map-panel.has-island .panel-title,
    #explore-panel.has-island .panel-title {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    .top-map-panel.has-island .panel-subtitle,
    #explore-panel.has-island .panel-subtitle {
        max-width: 390px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .top-map-panel.has-island .island-context {
        font-size: 10px !important;
    }

    .section-dock .explore-group-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .section-dock .explore-group-tab {
        min-height: 33px !important;
        padding: 7px 8px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .section-dock .explore-subtools {
        gap: 8px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    .section-dock .explore-subtools .story-tool {
        padding: 8px 10px !important;
        gap: 7px !important;
    }

    .section-dock .explore-subtools .story-tool-icon {
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
    }

    .section-dock .explore-subtools .story-tool-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    .section-dock .explore-subtools .story-tool > span:last-child {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .section-dock .compact-layer-name {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    .section-dock .compact-layer-status {
        font-size: 8.5px !important;
        line-height: 1.25 !important;
    }

    #explore-panel.has-island #top-panel-nav .nav-button,
    .top-panel-nav .nav-button {
        min-height: 32px !important;
        height: 32px !important;
        font-size: 10.5px !important;
    }
}


/* ===== ORIGINAL: style-mobile-v23-11.css ===== */
/* =========================================================
   MOBILE MAP-FIRST DOCK PASS
   Applies only on phones. Desktop layout is untouched.
   All sections share a compact integrated bottom dock:
   Explore / Live / Calendar / News / Guía.
   ========================================================= */

@media (max-width: 760px) {
    html,
    body,
    .app,
    .content,
    .map-area {
        min-height: 0 !important;
    }

    .content {
        grid-template-rows: 32px minmax(0, 1fr) !important;
    }

    .topbar {
        min-height: 32px !important;
        height: 32px !important;
        padding: 2px 8px 2px 10px !important;
    }

    .topbar-brand .brand-name {
        font-size: 12px !important;
    }

    .style-lab-toggle {
        display: none !important;
    }

    /* Three real layout rows: navigation / map / section content.
       The section dock no longer floats over the map. */
    .map-area.section-dock-open,
    .map-area.section-dock-open.explore-story-open {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
        background: #08232d !important;
    }

    .map-area.section-dock-open > .top-map-panel.explore-panel,
    .map-area.section-dock-open.explore-story-open > .top-map-panel.explore-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: relative !important;
        inset: auto !important;
        z-index: 30 !important;
    }

    .map-area.section-dock-open > #map,
    .map-area.section-dock-open.explore-story-open > #map {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .section-dock,
    .map-area.section-dock-open .explore-story-dock,
    .map-area.section-dock-open.explore-story-open .explore-story-dock {
        position: relative !important;
        inset: auto !important;
        grid-column: 1 !important;
        grid-row: 3 !important;
        z-index: 20 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(149, 190, 201, .17) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #082a36 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        transition: height .18s ease !important;
    }

    .section-dock::before,
    .map-area.section-dock-open .explore-story-dock::before {
        display: none !important;
        content: none !important;
    }

    /* Per-section heights: enough to use, never half the screen by default. */
    .section-dock[data-section="home"] {
        height: 118px !important;
        max-height: 118px !important;
    }

    .section-dock[data-section="explore"] {
        height: min(26dvh, 188px) !important;
        max-height: min(26dvh, 188px) !important;
    }

    .section-dock[data-section="live"] {
        height: 108px !important;
        max-height: 108px !important;
    }

    .section-dock[data-section="live"]:has(.live-detail-sidebar),
    .section-dock[data-section="live"]:has(.api-panel-result) {
        height: min(32dvh, 238px) !important;
        max-height: min(32dvh, 238px) !important;
    }

    .section-dock[data-section="calendar"] {
        height: min(31dvh, 224px) !important;
        max-height: min(31dvh, 224px) !important;
    }

    .section-dock[data-section="news"] {
        height: min(25dvh, 184px) !important;
        max-height: min(25dvh, 184px) !important;
    }

    .section-dock[data-section="guide"] {
        height: min(29dvh, 210px) !important;
        max-height: min(29dvh, 210px) !important;
    }

    /* Selected island header: compact first row + all five tabs always visible. */
    .top-map-panel.has-island .explore-panel-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 20px !important;
        grid-template-rows: 26px 32px !important;
        gap: 2px 6px !important;
        min-height: 60px !important;
        height: 60px !important;
        padding: 1px 7px 2px !important;
        border-bottom: 1px solid rgba(126, 167, 179, .10) !important;
        background: #071a22 !important;
    }

    .top-map-panel.has-island .island-context {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 22px !important;
        height: 22px !important;
        padding: 0 7px !important;
        font-size: 8px !important;
    }

    .top-map-panel.has-island .panel-heading-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .top-map-panel.has-island .panel-title {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .top-map-panel.has-island .panel-subtitle {
        display: none !important;
    }

    .top-map-panel.has-island .panel-close {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
    }

    .top-map-panel.has-island .top-panel-nav {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .top-panel-nav .nav-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 29px !important;
        height: 29px !important;
        padding: 0 3px !important;
        gap: 3px !important;
        border-radius: 10px !important;
        font-size: 8.2px !important;
        white-space: nowrap !important;
    }

    .top-panel-nav .nav-button > span:last-child {
        overflow: hidden !important;
        min-width: 0 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .top-panel-nav .nav-button::after {
        bottom: -1px !important;
        left: 8px !important;
        right: 8px !important;
    }

    .top-panel-nav .nav-button .nav-button-icon,
    .top-panel-nav .nav-button .nav-button-icon-live {
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
        border-radius: 6px !important;
    }

    .top-panel-nav .nav-button .nav-button-icon svg {
        width: 12px !important;
        height: 12px !important;
    }

    .live-pulse-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* Hide the obsolete top-panel content row: section content lives below the map. */
    .top-map-panel.has-island .explore-panel-content,
    .top-map-panel.has-island .explore-panel-content:not(:empty) {
        display: none !important;
    }

    /* ---------- LIVE ---------- */
    .section-dock[data-section="live"] .compact-layer-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px 9px 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    .section-dock[data-section="live"] .compact-layer-grid::-webkit-scrollbar {
        display: none !important;
    }

    .section-dock[data-section="live"] .compact-layer-tile {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: auto !important;
        min-width: 88px !important;
        min-height: 45px !important;
        height: 45px !important;
        padding: 0 9px !important;
        border-radius: 12px !important;
        scroll-snap-align: start !important;
    }

    .section-dock[data-section="live"] .compact-layer-icon {
        display: grid !important;
        place-items: center !important;
        width: 25px !important;
        min-width: 25px !important;
        height: 25px !important;
        margin: 0 !important;
        border-radius: 50% !important;
    }

    .section-dock[data-section="live"] .compact-layer-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .section-dock[data-section="live"] .compact-layer-name {
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .section-dock[data-section="live"] .compact-layer-status,
    .section-dock[data-section="live"] .compact-layer-check {
        display: none !important;
    }

    .section-dock[data-section="live"] .explore-data-refresh {
        margin: 0 9px 7px !important;
        padding: 0 !important;
        min-height: 24px !important;
        gap: 7px !important;
    }

    .section-dock[data-section="live"] .explore-data-refresh button {
        min-height: 24px !important;
        padding: 0 8px !important;
        font-size: 8px !important;
    }

    .section-dock[data-section="live"] .explore-data-refresh span {
        font-size: 7px !important;
    }

    .section-dock[data-section="live"] .live-detail-sidebar {
        margin: 2px 9px 10px !important;
        padding: 9px 10px !important;
        border-radius: 11px !important;
    }

    /* ---------- EXPLORE ---------- */
    .section-dock[data-section="explore"] .story-tools {
        position: sticky !important;
        top: 0 !important;
        z-index: 8 !important;
        display: flex !important;
        grid-template-columns: none !important;
        gap: 5px !important;
        min-height: 52px !important;
        padding: 6px 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .section-dock[data-section="explore"] .story-tools::-webkit-scrollbar {
        display: none !important;
    }

    .section-dock[data-section="explore"] .story-tool {
        flex: 0 0 62px !important;
        min-width: 62px !important;
        min-height: 40px !important;
        padding: 4px 2px !important;
        gap: 2px !important;
        border-radius: 9px !important;
    }

    .section-dock[data-section="explore"] .story-tool-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .section-dock[data-section="explore"] .story-tool-icon svg {
        width: 13px !important;
        height: 13px !important;
    }

    .section-dock[data-section="explore"] .explore-browser {
        padding: 7px 9px 10px !important;
    }

    .section-dock[data-section="explore"] .explore-browser-head {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        margin-bottom: 6px !important;
    }

    .section-dock[data-section="explore"] .explore-browser-head select {
        width: auto !important;
        max-width: 55% !important;
        min-width: 112px !important;
        padding: 5px 24px 5px 8px !important;
        font-size: 8px !important;
    }

    .section-dock[data-section="explore"] .explore-item-list {
        gap: 5px !important;
    }

    .section-dock[data-section="explore"] .explore-item-card {
        gap: 2px !important;
        padding: 7px 9px !important;
        border-radius: 9px !important;
    }

    .section-dock[data-section="explore"] .explore-item-card strong {
        font-size: 9.5px !important;
    }

    .section-dock[data-section="explore"] .explore-item-card em {
        font-size: 8px !important;
        -webkit-line-clamp: 1 !important;
    }

    .section-dock[data-section="explore"] .story-section {
        min-height: 0 !important;
        padding: 14px 12px 18px !important;
        opacity: 1 !important;
    }

    .section-dock[data-section="explore"] .story-section h3 {
        font-size: 21px !important;
    }

    .section-dock[data-section="explore"] .story-section p,
    .section-dock[data-section="explore"] .story-section .story-lead {
        margin-top: 8px !important;
        font-size: 9px !important;
        line-height: 1.45 !important;
    }

    .section-dock[data-section="explore"] .story-image {
        margin-bottom: 10px !important;
        aspect-ratio: 16 / 7 !important;
        border-radius: 9px !important;
    }

    /* ---------- CALENDAR ---------- */
    .section-dock[data-section="calendar"] .explore-data-refresh {
        margin: 7px 9px 0 !important;
    }

    .section-dock[data-section="calendar"] .calendar-month-experience {
        padding: 8px 9px 14px !important;
    }

    .section-dock[data-section="calendar"] .calendar-toolbar {
        grid-template-columns: 26px 1fr 26px !important;
        gap: 5px !important;
    }

    .section-dock[data-section="calendar"] .calendar-toolbar strong {
        font-size: 18px !important;
    }

    .section-dock[data-section="calendar"] .calendar-toolbar button {
        width: 26px !important;
        height: 26px !important;
    }

    .section-dock[data-section="calendar"] .calendar-category-filter {
        margin-top: 7px !important;
        gap: 4px !important;
    }

    .section-dock[data-section="calendar"] .calendar-category {
        padding: 4px 7px !important;
        font-size: 7px !important;
    }

    .section-dock[data-section="calendar"] .calendar-month-grid {
        gap: 2px !important;
        margin-top: 7px !important;
    }

    .section-dock[data-section="calendar"] .calendar-weekday {
        padding: 2px 0 !important;
        font-size: 6px !important;
    }

    .section-dock[data-section="calendar"] .calendar-day {
        border-radius: 6px !important;
        font-size: 8px !important;
    }

    .section-dock[data-section="calendar"] .calendar-day-agenda {
        margin-top: 10px !important;
        padding-top: 9px !important;
    }

    /* ---------- NEWS ---------- */
    .section-dock[data-section="news"] .compact-layer-grid {
        display: none !important;
    }

    .section-dock[data-section="news"] .explore-data-refresh {
        margin: 8px 9px 4px !important;
    }

    .section-dock[data-section="news"] .api-panel-results {
        margin: 0 !important;
        padding: 3px 9px 12px !important;
    }

    .section-dock[data-section="news"] .api-panel-card {
        padding: 9px !important;
        border-radius: 10px !important;
    }

    /* ---------- GUIDE ---------- */
    .section-dock[data-section="guide"] .guide-tabs {
        position: sticky !important;
        top: 0 !important;
        z-index: 8 !important;
        padding: 7px 9px 6px !important;
    }

    .section-dock[data-section="guide"] .guide-section-picker {
        gap: 4px !important;
        margin: 8px 9px 10px !important;
    }

    .section-dock[data-section="guide"] .guide-section-picker select {
        padding: 7px 30px 7px 9px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
    }

    .section-dock[data-section="guide"] .story-section,
    .section-dock[data-section="guide"] .guide-story-list .story-section {
        min-height: 0 !important;
        padding: 14px 12px 18px !important;
        opacity: 1 !important;
    }

    .section-dock[data-section="guide"] .story-section h3 {
        font-size: 21px !important;
    }

    .section-dock[data-section="guide"] .story-section p,
    .section-dock[data-section="guide"] .story-section .story-lead {
        margin-top: 8px !important;
        font-size: 9px !important;
        line-height: 1.45 !important;
    }

    /* Keep controls clear of the compact bottom dock. */
    .maplibregl-ctrl-top-right {
        top: 7px !important;
        right: 6px !important;
    }

    .maplibregl-ctrl-top-right .maplibregl-ctrl-group button {
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 380px) {
    .top-panel-nav .nav-button {
        padding-inline: 2px !important;
        gap: 2px !important;
        font-size: 7.7px !important;
    }

    .top-panel-nav .nav-button .nav-button-icon,
    .top-panel-nav .nav-button .nav-button-icon-live {
        width: 15px !important;
        min-width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
    }

    .section-dock[data-section="live"] .compact-layer-tile {
        min-width: 82px !important;
    }
}


/* ===== ORIGINAL: style-nav-always-visible.css ===== */
/* Desktop section navigation repair.
   Keep the section navigation immediately to the right of the selected-island
   rail, regardless of how wide that rail becomes. */
@media (min-width: 761px) {
    #explore-panel.has-island {
        overflow: visible !important;
        backdrop-filter: none !important;
    }

    #explore-panel.has-island #top-panel-nav,
    #explore-panel.has-island #top-panel-nav.hidden {
        position: absolute !important;
        top: 12px !important;
        left: calc(var(--cc-left-rail-width, 500px) + 18px) !important;
        right: auto !important;
        z-index: 80 !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;

        width: max-content !important;
        max-width: calc(100vw - var(--cc-left-rail-width, 500px) - 38px) !important;
        margin: 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #explore-panel.has-island #top-panel-nav .nav-button {
        flex: 0 0 auto !important;
    }

    #explore-panel:not(.has-island) #top-panel-nav,
    #explore-panel:not(.has-island) #top-panel-nav.hidden {
        display: none !important;
    }



/* ===== ORIGINAL: style-landing-islands.css ===== */
/* Landing-only island chooser.
   Deliberately scoped to #explore-panel:not(.has-island) so selected-island
   Explore / Live / Calendar / News / Guía layout is untouched. */


    #explore-panel:not(.has-island).top-map-panel.explore-panel {
        position: absolute !important;
        top: 14px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: min(1120px, calc(100% - 32px)) !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        border: 1px solid rgba(255,255,255,.075) !important;
        border-radius: 16px !important;
        background: rgba(7, 29, 39, .94) !important;
        box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
        overflow: hidden !important;
        transform: translateX(-50%) !important;
    }

    #explore-panel:not(.has-island) .explore-panel-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 28px !important;
        min-height: 42px !important;
        height: auto !important;
        padding: 10px 14px 4px !important;
        align-items: center !important;
    }

    #explore-panel:not(.has-island) .panel-heading-copy {
        grid-column: 1 !important;
        display: block !important;
        padding: 0 !important;
    }

    #explore-panel:not(.has-island) .panel-title {
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        color: #f0e4d1 !important;
    }

    #explore-panel:not(.has-island) .panel-eyebrow,
    #explore-panel:not(.has-island) .panel-subtitle {
        display: none !important;
    }

    #explore-panel:not(.has-island) .panel-close {
        grid-column: 2 !important;
        width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
    }

    #explore-panel:not(.has-island) .explore-panel-content {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 4px 12px 12px !important;
        overflow: visible !important;
    }

    #explore-panel:not(.has-island) .island-selector,
    #explore-panel:not(.has-island) .island-selector-visual-row {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    #explore-panel:not(.has-island) .island-selector-list {
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #explore-panel:not(.has-island) .island-option {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 72px !important;
        min-height: 72px !important;
        display: grid !important;
        grid-template-rows: 42px auto !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 6px 4px 5px !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;
        background: transparent !important;
        color: #aabcc0 !important;
        transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease !important;
    }

    #explore-panel:not(.has-island) .island-option:hover,
    #explore-panel:not(.has-island) .island-option:focus-visible,
    #explore-panel:not(.has-island) .island-option.preview-active {
        transform: translateY(-2px) !important;
        border-color: rgba(226,204,170,.2) !important;
        background: rgba(255,255,255,.045) !important;
        color: #eadcc5 !important;
        outline: none !important;
    }

    #explore-panel:not(.has-island) .island-option-thumbnail {
        position: relative !important;
        display: block !important;
        width: 66px !important;
        height: 40px !important;
        overflow: hidden !important;
        border-radius: 9px !important;
        background:
            radial-gradient(circle at 35% 20%, rgba(236,217,179,.16), transparent 34%),
            linear-gradient(180deg, rgba(62,131,148,.34), rgba(7,36,47,.4)) !important;
    }

    #explore-panel:not(.has-island) .island-option-shape {
        display: block !important;
    }

    #explore-panel:not(.has-island) .island-option-name {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        font-size: 9.5px !important;
        line-height: 1.1 !important;
        font-weight: 650 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 760px) {
    #explore-panel:not(.has-island) .explore-panel-content {
        height: auto !important;
        max-height: none !important;
        padding: 4px 8px 8px !important;
    }

    #explore-panel:not(.has-island) .island-selector,
    #explore-panel:not(.has-island) .island-selector-visual-row {
        display: block !important;
        height: auto !important;
    }

    #explore-panel:not(.has-island) .island-selector-list {
        display: flex !important;
        gap: 6px !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 8px 4px 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    #explore-panel:not(.has-island) .island-selector-list::-webkit-scrollbar {
        display: none !important;
    }

    #explore-panel:not(.has-island) .island-option {
        flex: 0 0 88px !important;
        width: 88px !important;
        height: 68px !important;
        min-height: 68px !important;
        display: grid !important;
        grid-template-rows: 38px auto !important;
        justify-items: center !important;
        gap: 4px !important;
        padding: 5px 4px !important;
        border-radius: 10px !important;
        scroll-snap-align: start !important;
    }

    #explore-panel:not(.has-island) .island-option-thumbnail {
        position: relative !important;
        display: block !important;
        width: 58px !important;
        height: 36px !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        background:
            radial-gradient(circle at 35% 20%, rgba(236,217,179,.16), transparent 34%),
            linear-gradient(180deg, rgba(62,131,148,.34), rgba(7,36,47,.4)) !important;
    }

    #explore-panel:not(.has-island) .island-option-shape {
        display: block !important;
    }

    #explore-panel:not(.has-island) .island-option-name {
        font-size: 9px !important;
        font-weight: 650 !important;
    }
}


/* =========================================================
   LANDING WELCOME + ISLAND ICONS — 2026-09-18
   Small landing-only override. Selected-island layout stays untouched.
   ========================================================= */

#explore-panel:not(.has-island) .panel-subtitle {
    display: block !important;
    margin-top: 6px !important;
    max-width: 760px !important;
    color: #a8bcc0 !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
}

#explore-panel:not(.has-island) .island-option-thumbnail {
    display: grid !important;
    place-items: center !important;
    background: rgba(14, 59, 73, .72) !important;
}

#explore-panel:not(.has-island) .island-option-icon {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    color: #dbc7a4 !important;
    transition: color 140ms ease, transform 140ms ease !important;
}

#explore-panel:not(.has-island) .island-option-icon svg {
    width: 56px !important;
    height: 36px !important;
}

#explore-panel:not(.has-island) .island-option:hover .island-option-icon,
#explore-panel:not(.has-island) .island-option:focus-visible .island-option-icon,
#explore-panel:not(.has-island) .island-option.preview-active .island-option-icon {
    color: #f0dfbf !important;
    transform: translateY(-1px) !important;
}

@media (min-width: 761px) {
    #explore-panel:not(.has-island) .explore-panel-header {
        padding: 14px 16px 7px !important;
    }

    #explore-panel:not(.has-island) .panel-title {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }
}

@media (max-width: 760px) {
    #explore-panel:not(.has-island) .panel-subtitle {
        margin-top: 4px !important;
        font-size: 9px !important;
    }

    #explore-panel:not(.has-island) .island-option-icon svg {
        width: 50px !important;
        height: 32px !important;
    }
}


/* ===== ORIGINAL: style-ux-v2.css ===== */
/* Consolidated readability overrides. Loaded LAST to avoid fighting historical styles. */

.top-map-panel.has-island .panel-subtitle {font-size: 14px !important;line-height:1.55 !important;}
.top-map-panel.has-island .panel-title {font-size: 22px !important;}
.top-map-panel.has-island .explore-panel-content, .top-map-panel.has-island .explore-panel-content:not(:empty) {font-size: 15px !important;line-height:1.55 !important;}
.section-dock .datos-experience, .section-dock .datos-experience p, .section-dock .datos-experience span, .section-dock .datos-experience small, .section-dock .datos-experience select, .section-dock .datos-experience button {font-size: 14px;line-height: 1.5;}
.section-dock .datos-series-head strong {font-size:17px !important;}
.section-dock .datos-series-head span {font-size:13px !important;}
.datos-chart-v2 {min-width: 0;overflow:hidden;}
.datos-chart-svg {display:block;width:100%;height:auto;min-height:190px;overflow:visible;}
.datos-chart-caption {font-size:12px !important;opacity:.9;margin:0 5px 8px;}
@media (max-width: 999px) { .datos-chart-svg {min-height:165px;} }

/* UX + LIVE v3: one predictable Explore navigation hierarchy */
.section-dock .explore-category-shell {padding: 13px !important; background:transparent !important;}
.section-dock .explore-group-tabs {display:flex !important; flex-wrap:wrap !important; gap:7px !important;}
.section-dock .explore-group-tab {min-height:37px !important; font-size:12px !important; padding:8px 10px !important; flex:1 1 auto !important;}
.section-dock .explore-subtools {display:flex !important; flex-wrap:wrap !important; overflow:visible !important; gap:8px !important; margin-top:12px !important;}
.section-dock .explore-tool-slot,
.section-dock .explore-tool-slot.is-active {display:inline-flex !important; flex:0 0 auto !important; width:auto !important; padding:0 !important; border:0 !important; background:none !important; border-radius:0 !important;}
.section-dock .explore-subtools .story-tool {min-height:35px !important; font-size:13px !important; padding:8px 11px !important;}
.section-dock .explore-active-detail {margin:12px 0 0; padding:13px 10px; border-top:1px solid rgba(236,231,206,.24); background:rgba(4,34,44,.32); border-radius:14px; min-width:0;}
.section-dock .explore-active-detail-head {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:0 4px 12px;}
.section-dock .explore-active-detail-head strong {font-size:16px; color:#f0e3cc;}
.section-dock .explore-active-detail-head button {min-height:33px; padding:6px 10px; color:#f0e3cc; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); border-radius:10px; cursor:pointer;}
.section-dock [data-live-refresh-status] {display:block; font-size:13px !important; line-height:1.5 !important; color:#e7ebe7; overflow-wrap:anywhere;}
.section-dock [data-live-data-refresh] {gap:9px; flex-wrap:wrap;}
.section-dock .datos-upcoming {display:grid; gap:8px; padding:22px 12px; text-align:center; justify-items:center;}
.section-dock .datos-upcoming > span {font-size:28px; color:#ebd3a8;}
.section-dock .datos-upcoming strong {font-size:22px;}
.section-dock .datos-upcoming p {font-size:14px; max-width:34ch; line-height:1.6;}
@media (max-width:760px) {.section-dock .explore-group-tab {font-size:12px !important;}.section-dock .explore-active-detail {padding:10px 6px;}}


/* ============================================================
   CANARIAS CERCA - CANONICAL DESKTOP LAYOUT
   One dock width. No additional visual stylesheet versions.
   This block supersedes only the Explore desktop presentation.
   ============================================================ */
@media (min-width: 761px) {
  .map-area {
    --cc-dock-width: clamp(540px, 38vw, 660px) !important;
  }
  .map-area.section-dock-open,
  .map-area.section-dock-open.explore-story-open {
    display: grid !important;
    grid-template-columns: var(--cc-dock-width) minmax(0, 1fr) !important;
    min-width: 0 !important;
  }
  .map-area.section-dock-open > #map,
  .map-area.section-dock-open.explore-story-open > #map {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .map-area.section-dock-open > #explore-panel.has-island,
  .top-map-panel.explore-panel.has-island {
    box-sizing: border-box !important;
    width: var(--cc-dock-width) !important;
    max-width: var(--cc-dock-width) !important;
    min-width: 0 !important;
    left: 0 !important;
    transform: none !important;
    background: rgba(22, 99, 122, .75) !important;
  }
  #explore-panel.has-island .explore-panel-header {
    background: rgba(24, 97, 119, .35) !important;
    padding-inline: 20px !important;
  }
  #explore-panel.has-island .panel-title { font-size: 29px !important; line-height: 1.15 !important; }
  #explore-panel.has-island .panel-subtitle { font-size: 14px !important; line-height: 1.55 !important; max-width: 50ch !important; }
  .map-area.section-dock-open > .section-dock {
    grid-column: 1 !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
    background: rgba(24, 104, 130, .61) !important;
    backdrop-filter: blur(9px);
  }
  .top-map-panel.has-island .top-panel-nav,
  .top-map-panel.has-island .top-panel-nav.hidden {
    left: calc(var(--cc-dock-width) + 18px) !important;
  }
  .section-dock[data-section="explore"] .explore-category-shell {
    box-sizing: border-box !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .section-dock[data-section="explore"] .story-experience,
  .section-dock[data-section="explore"] .explore-browser,
  .section-dock[data-section="explore"] .explore-selected-detail,
  .section-dock[data-section="explore"] .selection-detail-card,
  .section-dock[data-section="explore"] .story-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .section-dock[data-section="explore"] .explore-group-tab,
  .section-dock[data-section="explore"] .story-tool { font-size: 14px !important; line-height: 1.4 !important; }
  .section-dock[data-section="explore"] .explore-browser p,
  .section-dock[data-section="explore"] .explore-selected-detail p,
  .section-dock[data-section="explore"] .selection-detail-card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .section-dock[data-section="explore"] .selection-detail-card h3 {
    font-size: clamp(23px, 1.9vw, 30px) !important;
    line-height: 1.2 !important;
  }


/* CANARIAS CERCA — Explore overlay geometry (desktop).
   One map canvas under header and drawer; no second background column.
   Replaces previous terminal PANEL REPAIR block. */

  .map-area { --cc-dock-width: clamp(510px, 36vw, 610px); --cc-left-rail-width: var(--cc-dock-width); position: relative !important; isolation: isolate; }
  .map-area.section-dock-open,
  .map-area.section-dock-open.explore-story-open {
    display: grid !important;
    grid-template-columns: var(--cc-dock-width) minmax(0,1fr) !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    background: transparent !important;
  }
  .map-area.section-dock-open > #map,
  .map-area.section-dock-open.explore-story-open > #map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    z-index: 0 !important;
    min-width: 0 !important;
  }
  .map-area.section-dock-open > #explore-panel.has-island,
  .map-area.section-dock-open > #explore-panel.has-island.top-map-panel {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: var(--cc-dock-width) !important;
    max-width: var(--cc-dock-width) !important;
    min-width: 0 !important;
    background: rgba(23, 99, 123, .52) !important;
    border: 1px solid rgba(208, 238, 242, .20) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
    z-index: 23 !important;
  }
  .map-area.section-dock-open > .section-dock[data-section="explore"] {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: var(--cc-dock-width) !important;
    max-width: var(--cc-dock-width) !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    background: rgba(18, 88, 111, .58) !important;
    backdrop-filter: blur(11px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(11px) saturate(110%) !important;
    border-right: 1px solid rgba(208, 238, 242, .24) !important;
    box-shadow: 6px 10px 30px rgba(0, 27, 38, .14) !important;
    z-index: 22 !important;
  }
  .map-area.section-dock-open > .section-dock:not([data-section="explore"]) { z-index: 21; }
  #explore-panel.has-island .explore-panel-header { background: rgba(18, 90, 112, .22) !important; }
  #explore-panel.has-island .panel-title { font-size: 28px !important; }
  #explore-panel.has-island .panel-subtitle { font-size: 14px !important; line-height: 1.55 !important; }
  .top-map-panel.has-island .top-panel-nav,
  .top-map-panel.has-island .top-panel-nav.hidden { left: calc(var(--cc-dock-width) + 18px) !important; }
  .section-dock[data-section="explore"] .explore-category-shell,
  .section-dock[data-section="explore"] .story-experience,
  .section-dock[data-section="explore"] .explore-browser {
    max-width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
  }
  .section-dock[data-section="explore"] .explore-active-detail {
    background: rgba(16, 71, 88, .24) !important;
  }
  .section-dock[data-section="explore"] .selection-detail-card,
  .section-dock[data-section="explore"] .explore-story-card {
    background: rgba(25, 97, 117, .50) !important;
  }
  .section-dock[data-section="explore"] .explore-group-tab,
  .section-dock[data-section="explore"] .story-tool { font-size: 14px !important; min-height: 40px !important; color: #eef7fa !important; }
  .section-dock[data-section="explore"] .explore-active-detail p,
  .section-dock[data-section="explore"] .selection-detail-card p,
  .section-dock[data-section="explore"] .explore-browser p { font-size: 14px !important; line-height: 1.6 !important; color: #e4f2f5 !important; }
}