/* Click popup for the public /explorer map. Page-scoped (loaded via the
 * /explorer extra_head). A corner-docked panel — NOT a click-anchored
 * MapLibre Popup — sitting over the top-right of the map. */

.map-popup {
    position: absolute;
    top: var(--ds-space-3);
    right: var(--ds-space-3);
    z-index: 5;
    width: 18rem;
    max-width: calc(100% - 2 * var(--ds-space-3));
    background: var(--ds-map-popup-bg);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-popup);
    padding: var(--ds-space-3);
}

.map-popup-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--ds-radius-sm);
    margin: 0;
    background: var(--ds-map-popup-thumb-bg);
}

/* Thumbnail figure — positioning context for the zoom-on-hover hint and
 * the click-to-open affordance. The element is role="button", so Pico
 * paints it as a filled button; strip that chrome back to a bare
 * clickable thumbnail. */
.map-popup-figure {
    position: relative;
    margin: var(--ds-space-2) 0;
    cursor: pointer;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.map-popup-figure:focus-visible {
    outline: 2px solid var(--ds-color-info);
    outline-offset: 2px;
}
.map-popup-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: color-mix(in srgb, #000 35%, transparent);
    opacity: 0;
    transition: opacity var(--ds-transition-base);
    pointer-events: none;
}
.map-popup-figure:hover .map-popup-zoom { opacity: 1; }

.map-popup-error {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-map-popup-thumb-bg);
    color: var(--pico-muted-color);
    font-size: var(--ds-font-sm);
    border-radius: var(--ds-radius-sm);
}

/* Tabstrip for overlapping footprints. */
.map-popup-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-0);
    margin: var(--ds-space-1) 0;
}
.map-popup-tabs [role="tab"] {
    appearance: none;
    border: 1px solid var(--ds-color-info);
    background: transparent;
    color: var(--ds-color-info);
    border-radius: var(--ds-radius-pill);
    padding: 0 var(--ds-space-2);
    font-size: var(--ds-font-xs);
    cursor: pointer;
    width: auto;
}
.map-popup-tabs [role="tab"][aria-selected="true"] {
    background: color-mix(in srgb, var(--ds-color-info-bg) 45%, transparent);
    color: #fff;
}
#popup-tab-more {
    align-self: center;
    font-size: var(--ds-font-xs);
    color: var(--pico-muted-color);
}

.map-popup-meta {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ds-space-0) var(--ds-space-2);
    font-size: var(--ds-font-sm);
}
.map-popup-meta dt { color: var(--pico-muted-color); margin: 0; }
.map-popup-meta dd { margin: 0; }

.map-popup-coords {
    font-family: var(--pico-font-family-monospace, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

/* Fullscreen lightbox — a single centered image (NOT the verdict-review
 * two-column .verdict-modal). Reuses only the .verdict-modal-dialog shell
 * from ui_modal(:lightbox). */
.map-lightbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.map-lightbox-img {
    width: auto;
    height: auto;
    max-width: min(90vw, 100%);
    max-height: 90vh;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Empty-state auto-dismiss: fade out after 3 s then stop intercepting
 * map clicks. The animation is intentionally one-shot (forwards fill). */
@keyframes popup-auto-dismiss {
    0%   { opacity: 1; pointer-events: auto; }
    75%  { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

#map-popup-empty {
    animation: popup-auto-dismiss 4s ease forwards;
    animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    .map-popup-zoom { transition: none; }
    #map-popup-empty { animation: none; opacity: 0; pointer-events: none; }
}

/* Mobile: dock to a full-width bottom sheet (matches the plan's
 * interaction spec; finer touch sizing arrives with Phase 5 chrome). */
@media (max-width: 640px) {
    .map-popup {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
        /* The sheet spans the full bottom edge, so its content would tuck
         * under the home indicator / rounded corners on a notched phone.
         * Every other explorer overlay clears the device safe area; the
         * sheet must too. Pad (not margin) so the panel background still
         * bleeds to the physical edges while the content sits in the safe
         * zone. --ds-safe-* are exposed on the .explorer-page ancestor and
         * fall back to 0 (desktop/non-notched unchanged). */
        padding-bottom: calc(var(--ds-space-3) + var(--ds-safe-bottom));
        padding-left: calc(var(--ds-space-3) + var(--ds-safe-left));
        padding-right: calc(var(--ds-space-3) + var(--ds-safe-right));
    }
    /* Stop the 1:1 thumb from driving the sheet height past the viewport:
     * drop the square ratio on mobile and cap the rendered height so the
     * event chip + meta stay in view (object-fit:cover crops to fit). */
    .map-popup-thumb,
    .map-popup-error {
        aspect-ratio: auto;
        height: 38vh;
        max-height: 16rem;
    }
}