/* body.marketing (marketing.css) sets height:auto for normal scrolling
   pages — a combined element+class selector, which beats a plain
   .explore-body class selector on specificity regardless of which rule
   comes first in the file. This selector has to be at least as specific
   to actually override it, or the whole flex-fill-viewport chain below
   has nothing real to work with. Same class of bug as the teaser-section
   padding issue fixed earlier in this project. */
body.marketing.explore-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* the map itself scrolls/pans, the page shouldn't */
}
.explore-main {
    flex: 1;
    display: flex;
    min-height: 0; /* lets the flex child actually shrink to fill, rather than growing past the viewport */
    position: relative;
}
.explore-shell {
    position: relative;
    flex: 1;
    width: 100%;
}
.explore-map {
    /* Absolutely positioned to fill .explore-shell exactly, rather than
       width/height:100% — this doesn't depend on how a percentage height
       resolves through the flex chain above it, which is more bulletproof
       given how much trouble that chain already caused once. */
    position: absolute;
    inset: 0;
}

/* ---------- Intro panel ---------- */
/* Floats over the top-left of the map instead of taking up its own
   horizontal band above it — the map fills the full remaining viewport
   height below the header either way. */
.explore-intro {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1000;
    max-width: min(360px, calc(100vw - 28px));
    background: rgba(22, 33, 44, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: 16px 18px;
}
.explore-intro h1 { margin: 0 0 6px; font-size: 19px; }
.explore-intro .m-lead { margin: 0; max-width: none; font-size: 13px; }

/* ---------- Settings panel ---------- */
/* A native <details> rather than JS-driven show/hide — works even if
   explore.js fails to load for any reason, since the map settings are
   pure enhancement on top of markers that already render without it. */
.explore-settings {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1000;
    background: rgba(22, 33, 44, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    max-width: min(320px, calc(100vw - 28px));
}
.explore-settings summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.explore-settings summary::-webkit-details-marker { display: none; }
.explore-settings summary::before { content: '⚙'; }
.explore-settings-panel {
    padding: 4px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
}
.explore-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.explore-toggle input {
    margin-top: 3px;
    accent-color: var(--accent);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.explore-toggle strong { display: block; font-size: 13px; color: var(--text); }
.explore-toggle small { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 1px; }

/* floating-actions/fab/zoom-control come from style.css already — just
   repositioning them for this page's own map shell rather than the
   dashboard's full-viewport one. */
.explore-shell .floating-actions {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1000;
}

/* On short/mobile viewports, drop the intro panel from an absolute
   overlay (which would otherwise cover a big chunk of a small map) down
   to a normal block above the map instead. */
@media (max-width: 640px) {
    .explore-main { flex-direction: column; }
    .explore-intro {
        position: static;
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }
}

/* ---------- Toast ---------- */
.explore-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13.5px;
    color: var(--text);
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2000;
    pointer-events: none;
}
.explore-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .explore-toast { transition: opacity 0.25s ease; }
}