/*
 * OnDuty — Mobile Responsive Layer
 * BUCKET: Large tall-screen phones (Realme 15 Pro class)
 * ---------------------------------------------------------------------
 * Viewport width: ~412–480px CSS pixels, tall aspect ratio (~19.5:9 or
 * taller), portrait orientation.
 *
 * Covers the Realme 15 Pro (6.8", 1280x2800px physical, 19.5:9, punch-hole
 * selfie camera, quad-curved edge glass) along with most similarly-sized
 * modern Android flagships/near-flagships in this size class — matched by
 * SCREEN SIZE + RATIO, not by brand or model, so any device in this class
 * gets the same treatment automatically.
 *
 * ACCURACY NOTE: phone spec sheets publish physical pixel resolution, not
 * the CSS pixel viewport a browser actually reports (that depends on the
 * device's pixel-ratio, which isn't published). 412–480px is the realistic
 * range this device class falls into. Send a screenshot (or the value of
 * `window.innerWidth` from the phone) and this range/these values can be
 * tightened further.
 *
 * Loaded AFTER assets/css/style.css (see includes/header.php link order).
 */

@media (min-width: 412px) and (max-width: 480px) and (orientation: portrait) {

    /* --- Trust the real device safe-area value, don't force a floor ---
       style.css computes --onduty-safe-top / --onduty-safe-bottom /
       --onduty-mobile-safe-top / --onduty-mobile-safe-bottom from
       env(safe-area-inset-*), and uses them to position the fixed navbar,
       banner, modals, and the homepage map.

       An earlier version of this file forced a minimum (e.g. 26px) on top
       of env(), on the theory that "a floor can only help." That was
       wrong: in a normal browser tab (as opposed to an installed
       home-screen app), Android already keeps page content clear of the
       status bar / camera cutout on its own, so the correct, real value
       here IS 0 — and forcing a floor on top of a correct 0 is exactly
       what created the extra blank space at the top and bottom of the
       screen. Trusting env() directly (no forced minimum) is the correct
       fix — it still protects against a real cutout when one genuinely
       exists (env() itself reports that), it just no longer invents one
       that isn't there. */
    :root {
        --onduty-safe-top: env(safe-area-inset-top, 0px);
        --onduty-safe-bottom: env(safe-area-inset-bottom, 0px);
        --onduty-mobile-safe-top: env(safe-area-inset-top, 0px);
        --onduty-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);

        /* A touch more side breathing room than smaller phones get, so
           content doesn't feel clipped by the quad-curved edge glass. */
        --onduty-app-side: 18px;
    }

    /* The location pill has real extra width available on this screen
       class — let it use it instead of truncating at the same 140px every
       phone gets regardless of screen size. */
    #current-location-text {
        max-width: min(200px, 42vw) !important;
    }

    /* Slightly larger tap targets — this screen class has enough physical
       size to afford it without things feeling cramped. */
    body.homepage-mobile .mobile-menu-toggle,
    body.homepage-mobile .navbar .dropdown.d-lg-none,
    body.homepage-mobile .notification-bell {
        width: 48px !important;
        height: 48px !important;
    }

    body.homepage-mobile .navbar-brand .brand-badge {
        width: 44px;
        height: 44px;
    }
}