/* ═══════════════════════════════════════════════════════════════
   SAFE-AREA GLOBAL — iPhone status bar / notch dead-zone fix

   Include on EVERY page: <link rel="stylesheet" href="/css/safe-area.css?v=1">

   The top ~47px (env(safe-area-inset-top)) of the viewport on iPhones
   with notch/Dynamic Island is a "dead zone" where the status bar sits.
   Interactive elements MUST live below this zone.
   Backgrounds MUST bleed THROUGH it (visual continuity, no gap).

   ── USAGE PATTERNS ──

   Flow pages (scrollable body with sticky header):
     #my-header {
       position: sticky;
       top: 0;
       padding-top: calc(12px + var(--sat));
     }

   Fixed full-screen containers:
     #my-root {
       position: fixed; inset: 0;
       padding-top: var(--sat);
       padding-bottom: var(--sab);
     }

   Fixed buttons near top:
     .my-btn { top: calc(16px + var(--sat)); }

   ═══════════════════════════════════════════════════════════════ */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}