/* Gesner Ops: iPhone safe areas (status bar, notch / Dynamic Island, home indicator).
   index.html uses viewport-fit=cover and apple-mobile-web-app-status-bar-style=black-translucent,
   so iOS draws the page underneath the status bar (clock, signal, battery). These rules push the
   content back into the safe area. Loaded last. Added by tools/make_site.py from tools/safe-area.css.
   The --safe-* variables fall back to 0px where there is no inset (desktop, older phones), so the
   layout there is unchanged. Tests can set :root { --safe-top: 47px } to simulate an iPhone. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Main page: every panel header lives inside .app-shell (same 12px / 14px spacing as before, plus the inset) */
.app-shell {
  padding-top: calc(12px + var(--safe-top));
  padding-right: calc(14px + var(--safe-right));
  padding-bottom: calc(32px + var(--safe-bottom));
  padding-left: calc(14px + var(--safe-left));
}

/* Solid band behind the status bar (same colour as theme-color) so scrolled cards never sit under the clock.
   Height is 0 where there is no inset. Below popups (z 40), toast (60) and the site map (80). */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: #020308;
  z-index: 35;
  pointer-events: none;
}

/* Popups (menu sheet, guide peek, procedure viewer, day popup, confirm): keep clear of both bars */
.sheet-backdrop {
  padding-top: calc(16px + var(--safe-top));
  padding-right: calc(16px + var(--safe-right));
  padding-bottom: calc(16px + var(--safe-bottom));
  padding-left: calc(16px + var(--safe-left));
}
.sheet-backdrop.guide-peek-backdrop {
  padding-top: calc(12px + var(--safe-top));
}
/* Same heights as before, but never taller than the space between the status bar and home indicator */
.sheet-backdrop > .sheet { max-height: 100%; }
.sheet-backdrop > .day-sheet { max-height: min(86vh, 100%); }
.sheet-backdrop > .guide-modal-sheet { max-height: min(78vh, 640px, 100%); }
.sheet-backdrop > .guide-modal-sheet.guide-peek {
  max-height: min(46vh, 380px, 100%);
  height: min(46vh, 380px, 100%);
}
.sheet-backdrop > .guide-modal-sheet.guide-peek.guide-expanded {
  max-height: min(92vh, 820px, 100%);
  height: min(92vh, 820px, 100%);
}
.sheet-backdrop > .proc-modal-sheet { max-height: min(92vh, 900px, 100%) !important; }

/* Full screen site map */
.site-map-overlay {
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
}

/* Toast above the home indicator */
.toast {
  bottom: calc(24px + var(--safe-bottom));
}