/* pwa-safe-area.css — iOS PWA (Add to Home Screen) safe-area corrections

   In standalone mode, iOS draws the status bar on top of the page.
   Our top bar has fixed heights, so we must *add* safe-area space to the bar height,
   not just add padding (padding alone causes clipping/leaks).
*/

:root{
  --safe-top: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
}

html[data-standalone="1"]{
  --safe-top: env(safe-area-inset-top);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Closed: expand the bar to include the safe-area */
html[data-standalone="1"] .topbar .topbar-inner{
  height: calc(var(--tb-closed-height, 56px) + var(--safe-top)) !important;
  padding-top: calc(var(--tb-pad, 6px) + var(--safe-top)) !important;
  padding-left: calc(20px + var(--safe-left)) !important;
  padding-right: calc(20px + var(--safe-right)) !important;
}

/* Open: also expand, otherwise the drawers creep upward / feel cramped */
html[data-standalone="1"] .topbar.is-open .topbar-inner{
  height: calc(var(--tb-open-height, 200px) + var(--safe-top)) !important;
  padding-top: calc(var(--tb-pad, 6px) + var(--safe-top)) !important;
}

/* Drawer panels start below the header row (closed height) INCLUDING safe-top */
html[data-standalone="1"]{
  --panels-top: calc(var(--tb-closed-height, 56px) + var(--safe-top));
}

/* Landscape: keep panels away from notches/home-indicator side insets */
html[data-standalone="1"] .topbar .drawer-panels{
  left: calc(20px + var(--safe-left)) !important;
  right: calc(20px + var(--safe-right)) !important;
}

/* If any fixed overlays reach the bottom, don't clip behind the home indicator */
html[data-standalone="1"] .drawer{
  padding-bottom: var(--safe-bottom) !important;
}