/*
 * Device-independent viewport shell
 *
 * Keep all screen-edge geometry in this file. Components consume the shared
 * variables below instead of identifying phones or repeating magic offsets.
 * JavaScript may set only --bark-nav-content-lift as a browser-bug guard. It
 * is visual-only and must never participate in structural component sizes.
 */
:root {
    --bark-safe-top: env(safe-area-inset-top, 0px);
    --bark-safe-right: env(safe-area-inset-right, 0px);
    --bark-safe-bottom: env(safe-area-inset-bottom, 0px);
    --bark-safe-left: env(safe-area-inset-left, 0px);
    --bark-nav-content-height: 75px;
    --bark-nav-content-lift: 0px;
    --bark-nav-total-height: calc(
        var(--bark-nav-content-height) +
        var(--bark-safe-bottom)
    );
    --bark-view-bottom-clearance: calc(var(--bark-nav-total-height) + 15px);
    --bark-filter-bottom-clearance: calc(var(--bark-nav-total-height) + 12px);
    --bark-map-control-bottom-clearance: calc(var(--bark-nav-total-height) + 15px);
    --bark-map-indicator-bottom-clearance: calc(var(--bark-nav-total-height) + 29px);
}

/* CSS owns the full-screen canvas. The coordinator may publish only the
   installed iOS app-window height; it never uses screen dimensions, device
   names, or phone-specific constants. */
html,
body,
#map,
.ui-view,
.modal-overlay,
#bark-loader {
    height: 100vh;
    height: 100dvh;
}

/* An installed iOS app owns the whole app window, but WebKit can restore a
   shorter browser viewport after Apple's external-site/photo sheet closes.
   Use the measured standalone *window* height for structural surfaces. This
   is one rule for every iPhone/iPad size and orientation—no model list, screen
   constants, or per-device offsets. Normal Safari and Android are untouched. */
html.bark-stable-standalone-shell,
html.bark-stable-standalone-shell body,
html.bark-stable-standalone-shell #map,
html.bark-stable-standalone-shell .ui-view,
html.bark-stable-standalone-shell .modal-overlay,
html.bark-stable-standalone-shell #bark-loader {
    height: var(--bark-standalone-app-height, 100dvh);
}

html.bark-stable-standalone-shell body {
    position: relative;
}

@media (max-width: 767px) {
    .glass-nav {
        position: fixed;
        inset: auto 0 0 0;
        width: 100%;
        height: var(--bark-nav-total-height);
        min-height: var(--bark-nav-total-height);
        padding: 0 0 var(--bark-safe-bottom);
        box-sizing: border-box;
        align-items: center;
        overflow: visible;
    }

    /* Fixed boxes follow WebKit's stale post-sheet viewport. Anchor the two
       bottom structural surfaces to the stable standalone body instead. */
    html.bark-stable-standalone-shell .glass-nav,
    html.bark-stable-standalone-shell #slide-panel {
        position: absolute;
    }

    .glass-nav .nav-item {
        height: 100%;
        padding-bottom: 0;
        transform: translate3d(0, calc(0px - var(--bark-nav-content-lift)), 0);
        transition: color 0.2s;
    }

    /* A rare WebKit visual-viewport mismatch can place the physical bottom of
       the screen above the structural nav. Move a matching glass backdrop with
       the controls without changing any layout geometry. */
    html[data-bark-nav-content-lift]:not([data-bark-nav-content-lift="0"]) .glass-nav::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: rgba(255, 255, 255, 0.85);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transform: translate3d(0, calc(0px - var(--bark-nav-content-lift)), 0);
        pointer-events: none;
    }

    .ui-view {
        padding-top: calc(20px + var(--bark-safe-top));
        padding-right: max(20px, var(--bark-safe-right));
        padding-bottom: var(--bark-view-bottom-clearance);
        padding-left: max(20px, var(--bark-safe-left));
    }

    #filter-panel {
        --filter-panel-bottom-clearance: var(--bark-filter-bottom-clearance);
        top: calc(20px + var(--bark-safe-top));
        max-height: calc(
            100dvh - 20px - var(--bark-safe-top) -
            var(--filter-panel-bottom-clearance)
        );
    }

    #slide-panel {
        /* Safari can report a short documentElement.clientHeight while its
           visible standalone viewport and fixed nav still fill the screen.
           Absolute positioning anchors to that stale document boundary and
           leaves the sheet floating far above the nav. Fixed positioning
           makes both surfaces use the same viewport coordinate system. */
        position: fixed;
        bottom: var(--bark-nav-total-height);
        height: min(
            55dvh,
            calc(100dvh - var(--bark-safe-top) - var(--bark-nav-total-height) - 16px)
        );
        max-height: calc(
            100dvh - var(--bark-safe-top) - var(--bark-nav-total-height) - 16px
        );
        transform: translate3d(0, calc(100% + var(--bark-nav-total-height) + 1px), 0);
    }

    #slide-panel.open {
        transform: translate3d(0, 0, 0);
    }

    .leaflet-bottom {
        bottom: var(--bark-map-control-bottom-clearance) !important;
    }

    .filtered-pins-indicator {
        bottom: var(--bark-map-indicator-bottom-clearance);
    }
}

/* Wide, short phones keep the existing floating landscape navigation. Give
   other overlays one shared description of its 70px + 30px footprint. */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 700px) {
    :root {
        --bark-filter-bottom-clearance: 112px;
    }
}