/*
 * OnDuty — Mobile Responsive Layer
 * BUCKET: Small / compact phones
 * Viewport width: up to 359.98px CSS pixels
 * Typical devices: older/budget Android phones, compact-width devices
 *
 * Loaded AFTER assets/css/style.css (see includes/header.php), which
 * already has a matching @media (max-width: 359.98px) block covering the
 * grid/column/font-size essentials for this bucket. Nothing further is
 * needed right now — this file exists so the bucket is scaffolded and
 * ready the moment a real device/screenshot for this size needs a fix.
 */

@media (max-width: 359.98px) {
    /* No forced minimum here — see large-phones.css for why a forced
       floor on top of env(safe-area-inset-*) creates unwanted blank space
       on a normal browser tab instead of protecting anything. Trusting
       env() directly still handles a real cutout correctly. */
    :root {
        --onduty-safe-top: env(safe-area-inset-top, 0px);
        --onduty-safe-bottom: env(safe-area-inset-bottom, 0px);
    }
}