/* Native wrappers may supply system-bar insets in CSS pixels. */
:root {
  --app-safe-top: max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px));
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px));
  --app-safe-left: max(env(safe-area-inset-left, 0px), var(--native-safe-left, 0px));
  --app-safe-right: max(env(safe-area-inset-right, 0px), var(--native-safe-right, 0px));
}

@media (max-width: 700px) {
  :root {
    --app-nav-height: calc(71px + var(--app-safe-bottom));
  }
  html { scroll-padding-bottom: calc(var(--app-nav-height) + 24px); }
  .bottom-nav {
    padding: 10px calc(15px + var(--app-safe-right))
      calc(12px + var(--app-safe-bottom)) calc(15px + var(--app-safe-left));
    min-height: var(--app-nav-height);
    align-items: flex-start;
  }
  .bottom-nav .nav-item { min-height: 48px; justify-content: center; }
  .main-content {
    padding-top: calc(32px + var(--app-safe-top));
    padding-left: calc(23px + var(--app-safe-left));
    padding-right: calc(23px + var(--app-safe-right));
    padding-bottom: calc(var(--app-nav-height) + 24px);
  }
  #toast { bottom: calc(var(--app-nav-height) + 12px); }
  .onboarding {
    padding-top: calc(37px + var(--app-safe-top));
    padding-bottom: calc(27px + var(--app-safe-bottom));
  }
  .settings-sheet { padding-bottom: calc(28px + var(--app-safe-bottom)); }
}