/* Gesture handling and mobile tap tweaks */
#map-stage { touch-action: none; }
.marker_flag { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Map fills viewport under UI */
#map-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Keep popups anchored to viewport, above the map and header */
.popup {
    position: fixed !important;
    z-index: 2000; /* raise above header/suggestions/stripes */
}

/* Side stripes: visible and responsive */
#left-stripe,
#right-stripe {
    z-index: 1;
    width: clamp(56px, 16vw, 140px);
}
@media (max-width: 576px) {
    #left-stripe,
    #right-stripe {
        width: clamp(44px, 14vw, 100px);
    }
}

/* Remove header override that conflicted with layout.css */
#button-container {
    top: calc(env(safe-area-inset-top, 0px));
    z-index: 1000; /* keep on top of stripes, below popup/suggestions */
}

/* Make the three links render side-by-side (wrapping if needed) */
#button-container > a {
    display: inline-block;
}

/* Slightly tighten buttons on small screens without touching desktop styles */
@media (max-width: 576px) {
    #button-container button {
        padding: 8px 16px;
        font-size: 13px;
        margin: 4px 6px;
        white-space: nowrap;
    }
}

/* Constrain controls so they don't overflow on mobile */
#search-wrapper,
#slider-container {
    width: min(360px, 86vw);
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    #search-wrapper,
    #slider-container {
        width: min(560px, 90vw);
    }
}

#rbslider { width: 100%; }

/* Slightly smaller controls on phones */
@media (max-width: 576px) {
    #search-bar { font-size: 0.95rem; padding: .35rem .5rem; }
    #slider-values .value-box { font-size: 0.9rem; }
    #button-container { padding: 6px 8px; }
}

/* Compact noUiSlider track/handles on small screens */
#rbslider .noUi-target { height: 6px; }
#rbslider .noUi-horizontal .noUi-handle,
#rbslider .noUi-vertical .noUi-handle,
#rbslider .noUi-handle {
    width: 18px;
    height: 18px;
}

/* Suggestions list */
#suggestions { max-height: 40vh; overflow: auto; }