/* ═══════════════════════════════════════════════════════════════
   PWA MOBILE OPTIMIZATIONS
   Loaded globally via index.html (outside the Vite/Tailwind pipeline).

   IMPORTANT SCROLL POLICY
   -----------------------
   The hard scroll-lock (fixed html/body, overflow:hidden, overscroll:none)
   is what gives the INSTALLED PWA its native, non-bouncing app feel. But it
   must NOT apply to the public/marketing web experience (Landing, Pricing,
   Features, etc.) — there the page needs to scroll normally in a browser tab.

   So: the lock is scoped to standalone display-mode ONLY, and `body.landing-page`
   is always exempt. Inside the app, the `.pwa-shell` owns its own internal
   scroll containers, so locking the document there is safe.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   Baseline (browser tab / web): allow natural document scrolling.
   No height:100% lock, no overflow:hidden on the root elements.
   ─────────────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: #050505;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#root {
  min-height: 100%;
  isolation: isolate;
}

/* Sync root background with system theme (matches status bar / no flash) */
@media (prefers-color-scheme: light) {
  html, body { background: #fafafa; }
}

/* ───────────────────────────────────────────────────────────────
   Touch & input refinements (safe for both web and PWA)
   ─────────────────────────────────────────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

button, a, [role="button"] {
  -webkit-touch-callout: none;
}

/* Prevent iOS auto-zoom on focus: inputs must be ≥16px */
input, textarea, select {
  font-size: 16px;
}

/* ───────────────────────────────────────────────────────────────
   App shell — internal scroll containers handle scrolling.
   The shell itself never scrolls the document.
   ─────────────────────────────────────────────────────────────── */
.pwa-shell {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Bottom mobile nav keeps clear of the home indicator */
.mobile-nav,
[data-mobile-nav] {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ───────────────────────────────────────────────────────────────
   STANDALONE PWA ONLY — the native, non-bouncing app lock.
   This is the ONLY place the document is hard-locked, and even here
   the landing/marketing pages stay scrollable.
   ─────────────────────────────────────────────────────────────── */
@media all and (display-mode: standalone) {
  html:not(.landing-page),
  body:not(.landing-page) {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }

  /* Marketing pages still scroll, even when installed */
  html.landing-page,
  body.landing-page {
    position: static;
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ───────────────────────────────────────────────────────────────
   Landing / marketing pages — always free-scrolling, every context.
   Defensive: wins regardless of any other global rule.
   ─────────────────────────────────────────────────────────────── */
html.landing-page,
body.landing-page {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}