/* ── Android native-shell auth screen layout ─────────────────────
   Mirrors platform-ios.css. See that file for the design rationale.
   v3
*/

/* ── Generic native-shell fallback (body.auth-native-shell) ──────
   Explicit Android copy of the shared fallback. Mirrors the block in
   platform-ios.css so this file is self-contained and does not rely
   on stylesheet load order to pick up the iOS rules.
   When auth-platform-android is also present its rules below take
   precedence (same specificity, later source position).
*/

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 */
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;
}

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-android),
body.auth-platform-android {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

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

body.auth-platform-android .site-header {
  display: none !important;
}

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

body.auth-platform-android .hero-visual,
body.auth-platform-android .section,
body.auth-platform-android .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-android .auth-mobile-top-logo,
body.auth-platform-android .auth-panel-brand {
  display: none !important;
}

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

body.auth-platform-android 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-android .auth-mobile-top-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 1rem 0.75rem;
}
body.auth-platform-android .auth-mobile-top-logo-img {
  width: 25%;
  max-width: 220px;
  min-width: 110px;
  height: auto;
  display: block;
}

/* Hero wrap centers the auth modal in the safe area. */
body.auth-platform-android .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 that sizes to the modal. */
body.auth-platform-android .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 modal: as wide as the safe area allows up to 460px, sized
   to its content with internal scrolling for taller forms. */
body.auth-platform-android .auth-panel.auth-mobile-sheet,
body.auth-platform-android .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;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto !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);
  /* Reserve extra bottom space inside the scroll container so the submit
     button and auth-switch row always clear the Android nav/gesture bar.
     Android often reports safe-area-inset-bottom:0 for 3-button nav, so
     the flat 24px addend provides a defensible minimum clearance. */
  padding: 1rem 1.1rem calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: #fff;
}

body.auth-platform-android #card-heading {
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}
body.auth-platform-android .card-sub {
  font-size: 0.72rem;
  margin: 0 0 0.5rem;
  line-height: 1.35;
}
body.auth-platform-android .auth-section-label {
  font-size: 0.58rem;
  margin: 0 0 0.3rem;
}
body.auth-platform-android .auth-panel label {
  font-size: 0.65rem;
  margin-bottom: 0.2rem;
}
body.auth-platform-android .form-group {
  margin-bottom: 0.45rem;
}
body.auth-platform-android .form-row {
  gap: 0.45rem;
}
body.auth-platform-android input {
  min-height: 38px;
  padding: 0.4rem 0.55rem;
}
body.auth-platform-android .auth-submit {
  min-height: 38px;
  font-size: 0.82rem;
  padding: 0.55rem;
}
body.auth-platform-android .field-hr {
  margin: 0.4rem 0;
}
body.auth-platform-android .auth-switch {
  font-size: 0.75rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
}

body.auth-platform-android .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-android .auth-mobile-mistake {
  display: none !important;
}
body.auth-platform-android .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-android .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 Android shell. */
body.auth-platform-android .mobile-app-footer {
  display: none !important;
}

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

/* ── Mobile entry screen (Android native shell) ──────────────────
   Mirror of the iOS entry-screen rules in platform-ios.css.
*/

/* Initially hide the hero-wrap (auth forms) — entry screen shows first */
body.auth-platform-android: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-android: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-android.auth-entry-shown #mobile-entry {
  display: none !important;
}
body.auth-platform-android.auth-entry-shown .hero-wrap {
  display: flex !important;
}

/* Entry screen: full-height flex column with safe-area padding on
   all four sides for notched / cutout displays. */
body.auth-platform-android #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);
  /* Android 3-button nav often reports safe-area-inset-bottom:0 even though
     it physically occupies ~48px. Add a flat 24px on top of whatever the env()
     reports so the Log In button always clears the gesture/nav bar. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  padding-left: max(env(safe-area-inset-left), 1.25rem);
}

/* Back button inside the auth panel */
body.auth-platform-android .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-android .mobile-entry-back-btn[hidden] {
  display: none !important;
}

/* ── Native shell layout reset (v5) — mirror of iOS rule. ──────────
   Defeats the marketing site's `.hero-shell` 2-column grid that was
   pushing the auth card into the narrow right column on phone widths.
*/
body.auth-native-shell .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-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;
}

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-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-android #login-form {
  margin-top: 0.5rem;
}