/* ── iOS native-shell auth screen layout ─────────────────────────
   Goal:
     • Sign-in form shown first (returning users are the majority).
       A switch link lets new users navigate to sign-up.
     • Form fills full screen width with 16px horizontal padding.
     • Header renders below the safe area / notch (no content under
       the status bar).
     • No page scrolling — auth panel itself scrolls if needed.
     • "Countertop" branding pinned at the bottom of the viewport.
   The native shell sets body.auth-platform-ios. The marketing
   header / footer / hero copy are all hidden — only the auth
   panel and the bottom Countertop wordmark are visible.
   v3
*/

/* ── Generic native-shell fallback (body.auth-native-shell) ──────
   Applied whenever native_shell=1 is in the URL, regardless of
   whether platform detection succeeded. This ensures the auth card
   is always horizontally centered and full-width inside the Expo
   WebView even if the iOS/Android platform body class was not set
   (e.g. edge-case user-agent strings, cached HTML with old scripts).
   The platform-specific rules below take precedence via higher
   specificity when auth-platform-ios / auth-platform-android is set.
*/

body.auth-native-shell {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0 !important;
}

body.auth-native-shell .site-header {
  display: none !important;
}

body.auth-native-shell .auth-mobile-sheet-head,
body.auth-native-shell .auth-mobile-backdrop,
body.auth-native-shell .sticky-bottom-cta,
body.auth-native-shell .mobile-sticky-cta {
  display: none !important;
}

body.auth-native-shell .hero-visual,
body.auth-native-shell .section,
body.auth-native-shell .site-footer,
body.auth-native-shell .auth-mobile-top-logo,
body.auth-native-shell .auth-panel-brand {
  display: none !important;
}

body.auth-native-shell main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

body.auth-native-shell .hero-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 0;
}

/* Override the 2-column marketing grid so the auth card fills full width */
body.auth-native-shell .hero-shell {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: 0;
  margin: 0 auto;
  flex: 0 1 auto;
  min-height: 0;
}

/* Full-width centered card — the primary goal of this fallback */
body.auth-native-shell .auth-panel.auth-mobile-sheet,
body.auth-native-shell .auth-mobile-sheet {
  display: flex !important;
  flex-direction: column;
  position: static !important;
  transform: none !important;
  bottom: auto !important;
  left: auto !important;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 32px rgba(15, 39, 65, 0.16);
  border: 1px solid rgba(15, 39, 65, 0.06);
  padding: 1rem 1.1rem 1.1rem;
  background: #fff;
}

/* Entry screen: show #mobile-entry in the generic native shell too */
body.auth-native-shell #mobile-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  padding-right: max(env(safe-area-inset-right, 0px), 1.25rem);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.75rem);
  padding-left: max(env(safe-area-inset-left, 0px), 1.25rem);
  /* Subtle warm-orange to soft-green wash, replacing the prior watermark
     illustration. Both stops are kept close to white so the foreground
     copy + CTAs remain the primary visual element. */
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 101, 74, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(46, 158, 91, 0.09) 0%, transparent 60%),
    linear-gradient(180deg, #FFF8F2 0%, #F4FAF5 100%);
}

/* Hero illustration is rendered as a centered, faded background watermark
   behind the entry copy/CTAs (see .mobile-entry-hero-wrap in marketing.css).
   The native-shell override only sets the visible size of the contained
   image; positioning, opacity, and pointer-events come from the shared rule. */
body.auth-native-shell .mobile-entry-hero-img {
  width: 100%;
  max-width: 360px;
  height: 100%;
  max-height: 80vh;
}
body.auth-native-shell .mobile-entry-copy,
body.auth-native-shell .mobile-entry-ctas {
  position: relative;
  z-index: 1;
}

body.auth-native-shell:not(.auth-entry-shown) .hero-wrap {
  display: none !important;
}

body.auth-native-shell.auth-entry-shown #mobile-entry {
  display: none !important;
}

body.auth-native-shell.auth-entry-shown .hero-wrap {
  display: flex !important;
}

body.auth-native-shell .mobile-entry-back-btn {
  display: flex !important;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: #C8654A;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 0.6rem;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0;
}

body.auth-native-shell .mobile-entry-back-btn[hidden] {
  display: none !important;
}

body.auth-native-shell .mobile-app-footer {
  display: none !important;
}

html:has(body.auth-platform-ios),
body.auth-platform-ios {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.auth-platform-ios {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* never scroll the page itself */
  padding-bottom: 0 !important;
}

/* Hide the marketing site header entirely — Countertop branding
   moves to the bottom footer in the native shell. */
body.auth-platform-ios .site-header {
  display: none !important;
}

/* Hide bottom sheet controls and backdrop (not needed in WebView) */
body.auth-platform-ios .auth-mobile-sheet-head,
body.auth-platform-ios .auth-mobile-backdrop,
body.auth-platform-ios .sticky-bottom-cta {
  display: none !important;
}

/* Hide all marketing copy, other page sections and the legacy footer */
body.auth-platform-ios .hero-visual,
body.auth-platform-ios .section,
body.auth-platform-ios .site-footer {
  display: none !important;
}

/* All Countertop branding is hidden on the auth forms screen — the
   form fills the viewport with no logo or watermark behind it. */
body.auth-platform-ios .auth-mobile-top-logo,
body.auth-platform-ios .auth-panel-brand {
  display: none !important;
}

/* Auth card sits above the watermark. */
body.auth-platform-ios .hero-wrap,
body.auth-platform-ios main {
  position: relative;
  z-index: 1;
}

/* Main grows to fill the space between the safe-area top and the
   bottom safe-area. The Countertop logo is pinned at the top via
   .auth-mobile-top-logo; the auth card sits centered in the
   remaining vertical space. The 16px extra offset ensures the
   logo starts comfortably below the notch/status-bar. */
body.auth-platform-ios main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: calc(env(safe-area-inset-top) + 16px);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Top logo (replaces the old bottom-pinned mobile-app-footer). */
body.auth-platform-ios .auth-mobile-top-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 1rem 0.75rem;
}
body.auth-platform-ios .auth-mobile-top-logo-img {
  width: 25%;
  max-width: 220px;
  min-width: 110px;
  height: auto;
  display: block;
}

/* Hero wrap centers the auth card both vertically and horizontally.
   Safe-area insets are already applied by `body.auth-platform-ios main`
   (lines 75–78), so only a small gutter is added here. */
body.auth-platform-ios .hero-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 0;
}

/* Single centered column sized to the card — does not stretch full width. */
body.auth-platform-ios .hero-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: 0;
  margin: 0 auto;
  flex: 0 1 auto;
  min-height: 0;
}

/* Centered card: as wide as the safe area allows up to 460px, with
   rounded corners and a subtle drop shadow so it reads as a card.
   The card itself scrolls for taller forms (sign-up). */
body.auth-platform-ios .auth-panel.auth-mobile-sheet,
body.auth-platform-ios .auth-mobile-sheet {
  display: flex !important;
  flex-direction: column;
  position: static !important;
  transform: none !important;
  bottom: auto !important;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 32px rgba(15, 39, 65, 0.16);
  border: 1px solid rgba(15, 39, 65, 0.06);
  padding: 1rem 1.1rem 1.1rem;
  background: #fff;
}

/* Tighten the form ~15% so it fits without scroll on most iPhones. */
body.auth-platform-ios #card-heading {
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}
body.auth-platform-ios .card-sub {
  font-size: 0.72rem;
  margin: 0 0 0.5rem;
  line-height: 1.35;
}
body.auth-platform-ios .auth-section-label {
  font-size: 0.58rem;
  margin: 0 0 0.3rem;
}
body.auth-platform-ios .auth-panel label {
  font-size: 0.65rem;
  margin-bottom: 0.2rem;
}
body.auth-platform-ios .form-group {
  margin-bottom: 0.45rem;
}
body.auth-platform-ios .form-row {
  gap: 0.45rem;
  /* Keep rows horizontal but ensure children never overflow the panel */
  flex-direction: row;
  flex-wrap: nowrap;
}
body.auth-platform-ios .form-row .form-group {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
body.auth-platform-ios input[type="text"],
body.auth-platform-ios input[type="email"],
body.auth-platform-ios input[type="password"],
body.auth-platform-ios input[type="tel"],
body.auth-platform-ios input[type="number"],
body.auth-platform-ios input[type="search"] {
  /* ≥16px prevents Mobile Safari from auto-zooming on input focus */
  font-size: 1rem !important;
  min-height: 38px;
  padding: 0.4rem 0.55rem;
  max-width: 100%;
  box-sizing: border-box;
}
body.auth-platform-ios .auth-submit {
  min-height: 38px;
  font-size: 0.82rem;
  padding: 0.55rem;
}
body.auth-platform-ios .field-hr {
  margin: 0.4rem 0;
}
body.auth-platform-ios .auth-switch {
  font-size: 0.75rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
}

/* Buttons */
body.auth-platform-ios .btn {
  letter-spacing: 0;
  text-transform: none;
}

/* Mistake-recovery button: keep hidden — the auth-switch link
   beneath the form handles mode toggling in both directions. */
body.auth-platform-ios .auth-mobile-mistake {
  display: none !important;
}
body.auth-platform-ios .auth-mobile-mistake-btn {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border, #d6d6d6);
  background: #fff;
  color: var(--text, #1a1a1a);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.55rem 1rem;
}
body.auth-platform-ios .auth-mobile-mistake-btn strong {
  color: var(--primary, #c44a2c);
  font-weight: 700;
  margin-left: 0.25rem;
}

/* Branding has moved to the top of the screen via .auth-mobile-top-logo;
   keep the legacy bottom-pinned mobile-app-footer hidden in the iOS shell. */
body.auth-platform-ios .mobile-app-footer {
  display: none !important;
}

/* Native iOS shell: hide the browser-only sticky "Sign up free" CTA bar. */
body.auth-platform-ios .mobile-sticky-cta {
  display: none;
}

/* Browsers (no body class): keep the bottom branding, mistake button,
   top mobile logo, and entry screen hidden. They are only used inside
   the native shells. */
.mobile-app-footer,
.auth-mobile-mistake,
.auth-mobile-top-logo,
#mobile-entry,
.mobile-entry-back-btn {
  display: none;
}

/* ── Mobile entry screen (iOS native shell) ──────────────────────
   Shown first when a logged-out user opens the app. Replaces the
   login-form-first experience with a branded onboarding gateway.
   Tapping a CTA transitions to the appropriate auth form.
*/

/* Initially hide the hero-wrap (auth forms) — entry screen shows first */
body.auth-platform-ios:not(.auth-entry-shown) .hero-wrap {
  display: none !important;
}

/* Also hide the old top-logo in entry mode — entry screen has its own logo */
body.auth-platform-ios:not(.auth-entry-shown) .auth-mobile-top-logo {
  display: none !important;
}

/* Show auth forms and restore normal shell once a CTA is tapped */
body.auth-platform-ios.auth-entry-shown #mobile-entry {
  display: none !important;
}
body.auth-platform-ios.auth-entry-shown .hero-wrap {
  display: flex !important;
}

/* Entry screen: full-height flex column filling the space below the
   top safe-area, padded for the notch and all four corners. */
body.auth-platform-ios #mobile-entry {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  padding-right: max(env(safe-area-inset-right), 1.25rem);
  padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);
  padding-left: max(env(safe-area-inset-left), 1.25rem);
}

/* Back button inside the auth panel */
body.auth-platform-ios .mobile-entry-back-btn {
  display: flex !important;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: #C8654A;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 0.6rem;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0;
}
body.auth-platform-ios .mobile-entry-back-btn[hidden] {
  display: none !important;
}

/* ── Native shell layout reset (v5) ──────────────────────────────
   The marketing site's `.hero-shell` is a 2-column desktop grid:
       grid-template-columns: minmax(0, 1.25fr) minmax(290px, 370px);
   When the auth panel renders inside the native iOS WebView the grid
   wins on iPhone screens and pushes the card into the narrow right
   column (~280–290px wide), left-aligned. The earlier `display: flex`
   override was being defeated on real devices (cache layering or a
   browser-extension-injected stylesheet on Expo Go), so this block
   uses !important to make absolutely sure the card spans the full
   safe-area width and is horizontally + vertically centered.

   This rule applies in BOTH login and signup mode. Login-only sizing
   is layered on top further below.
*/
body.auth-native-shell .hero-shell,
body.auth-platform-ios .hero-shell,
body.auth-platform-android .hero-shell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

body.auth-native-shell .auth-panel.auth-mobile-sheet,
body.auth-native-shell .auth-mobile-sheet,
body.auth-platform-ios .auth-panel.auth-mobile-sheet,
body.auth-platform-ios .auth-mobile-sheet,
body.auth-platform-android .auth-panel.auth-mobile-sheet,
body.auth-platform-android .auth-mobile-sheet {
  width: calc(100% - 16px) !important;
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Login-mode sizing: give the short 2-field form the same visual
   presence as the longer signup card. Vertically center its contents. */
body.auth-mode-login.auth-native-shell .auth-panel.auth-mobile-sheet,
body.auth-mode-login.auth-native-shell .auth-mobile-sheet,
body.auth-mode-login.auth-platform-ios .auth-panel.auth-mobile-sheet,
body.auth-mode-login.auth-platform-ios .auth-mobile-sheet,
body.auth-mode-login.auth-platform-android .auth-panel.auth-mobile-sheet,
body.auth-mode-login.auth-platform-android .auth-mobile-sheet {
  min-height: min(560px, calc(100dvh - 32px)) !important;
  justify-content: center !important;
}

body.auth-mode-login.auth-native-shell #login-form,
body.auth-mode-login.auth-platform-ios #login-form,
body.auth-mode-login.auth-platform-android #login-form {
  margin-top: 0.5rem;
}