/* Capacitor supplies CSS variables; older WebViews often report env() as 0.
   Use the native value when present, and keep normal browser safe-area support. */
:root {
  --app-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --app-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --app-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --app-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}
.overlay {
  bottom: var(--app-safe-bottom);
  padding-left: max(12px, var(--app-safe-left));
  padding-right: max(12px, var(--app-safe-right));
  padding-bottom: calc(24px + var(--app-safe-bottom));
  scroll-padding-bottom: calc(24px + var(--app-safe-bottom));
}
.overlay .modal { min-height: 0; }
html dialog[open] {
  max-height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 32px);
  margin-top: max(16px, var(--app-safe-top));
  margin-bottom: max(16px, var(--app-safe-bottom));
}
.crew { padding-bottom: calc(64px + var(--app-safe-bottom)); }
.crew .rf-foot { padding-bottom: calc(52px + var(--app-safe-bottom)); }
.sheet-body, .vpick-body { padding-bottom: calc(24px + var(--app-safe-bottom)); }
html.in-app body { padding-bottom: calc(24px + var(--app-safe-bottom)); }
.offer-banner { bottom: calc(16px + var(--app-safe-bottom)); }
@media (max-width: 600px) {
  .overlay { padding-top: 0; padding-left: var(--app-safe-left); padding-right: var(--app-safe-right); }
  .overlay .modal { padding-bottom: 24px; }
}