/* Shared PWA safe-area rules: notch / Dynamic Island, rounded corners, home indicator (iPhone 14–17 etc.).
   Needs <meta name="viewport" content="..., viewport-fit=cover"> on the page. */

/* Installed iPhone apps draw under the status bar with white text (black-translucent).
   A dark cap behind that zone keeps the clock and battery readable on light themes too. */
@media (display-mode: standalone) {
  body::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 100000; pointer-events: none;
    height: env(safe-area-inset-top, 0px); background: #070c14;
  }
}

/* Never let page content slide under the sensor housing or rounded corners in landscape */
/* (main app and dashboard add side insets to their own containers; simple pages use .safe-sides) */
.safe-sides { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* Fixed overlays that hug the top / sides / bottom */
.offline-banner { padding-top: calc(0.4rem + env(safe-area-inset-top, 0px)); }
.ptr-indicator { top: env(safe-area-inset-top, 0px); }
.learn-back-top { right: max(1rem, calc(0.6rem + env(safe-area-inset-right, 0px))); }

/* Bottom bars: clear the home indicator and the rounded bottom corners */
.bottom-nav { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }

/* (Full-screen map: the map runs edge to edge; its floating controls add the insets themselves) */

/* Modal dialogs: stay inside the safe area on short (landscape) screens */
dialog { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem); overflow: auto; }