/*
 * OnDuty — Mobile Responsive Layer
 * BUCKET: Standard phones
 * Viewport width: 360px – 411.98px CSS pixels
 * Typical devices: mainstream Android (Galaxy S-series and similar),
 * iPhone SE/13/14-width devices
 *
 * Loaded AFTER assets/css/style.css (see includes/header.php).
 */

@media (min-width: 360px) and (max-width: 411.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);
        --onduty-mobile-safe-top: env(safe-area-inset-top, 0px);
        --onduty-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }
}