/*
 * OnDuty — Mobile Responsive Layer
 * BUCKET: Tablets / phablets (still using the mobile layout)
 * Viewport width: 481px – 1024px CSS pixels
 * Typical devices: small/mid tablets, large phablets, below Bootstrap's
 * 768px desktop-layout breakpoint used elsewhere on the site
 *
 * Loaded AFTER assets/css/style.css (see includes/header.php).
 * Kept intentionally light for now — the safe-area floor is bumped for
 * consistency with the phone buckets; no layout changes yet since none
 * were reported for this size class. Extend this file if/when a tablet
 * screenshot shows something specific to fix.
 */

@media (min-width: 481px) and (max-width: 1024px) {
    /* 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);
    }
}