/* ── Warm ambient gradient ───────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* overflow: hidden prevents native document scroll.
     A JS scroll-reset (injected in SW_SCRIPT) handles the residual
     window.scrollY drift that iOS WebKit applies in standalone PWA mode
     even when overflow is hidden. */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(ellipse 70% 55% at 68% -6%, rgba(255,196,88,0.09) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 28% 105%, rgba(190,212,255,0.07) 0%, transparent 52%),
    #F5F4F0;
  background-color: #F5F4F0;
}

/* ── Root: fill available height without 100vh jumping on iOS ─────────────── */
#root {
  height: 100%;
  /* -webkit-fill-available handles iOS Safari's shrinking viewport */
  min-height: -webkit-fill-available;
  overflow: hidden;
  position: relative;
}

/* ── Tablet: phone-width column ──────────────────────────────────────────── */
@media (min-width: 500px) and (max-width: 1023px) {
  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  #root {
    width: 430px;
    background: #F5F4F0;
    box-shadow: 0 0 60px rgba(0,0,0,0.18);
  }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  #root {
    width: 100%;
    background: transparent;
  }
}

/* ── iOS PWA: prevent pull-to-refresh and horizontal bounce ──────────────── */
body {
  overscroll-behavior: none;
  /* Do NOT add env(safe-area-inset-*) here — React Native's SafeAreaView
     handles safe area insets internally via CSS env() variables. Adding it
     here too would double-count the insets and misalign the layout. */
}

/* ── Smooth scroll ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Theme ───────────────────────────────────────────────────────────────── */
:root { color-scheme: light; }

/* ── Touch-friendly tap targets ──────────────────────────────────────────── */
button, a {
  min-height: 44px;
  min-width: 44px;
}