/* ─────────────────────────────────────────────────────────────────
   Dedicated native-shell login view
   ─────────────────────────────────────────────────────────────────
   Standalone full-screen login UI shown inside the iOS / Android
   Expo WebView when the user taps "Log In" on the marketing entry
   screen. It lives OUTSIDE the marketing `.hero-shell` / `.auth-panel`
   DOM so the desktop 2-column grid in `marketing.css` can never reach
   it. The form fields submit via the existing #login-form Supabase
   handlers — the wiring is in auth.html under `setupNativeLoginView`.

   Browsers (no `auth-native-shell` body class) never see this view.
*/

#native-login-view {
  display: none;
}

body.auth-native-shell.auth-mode-login.auth-entry-shown #native-login-view,
body.auth-platform-ios.auth-mode-login.auth-entry-shown #native-login-view,
body.auth-platform-android.auth-mode-login.auth-entry-shown #native-login-view {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #FAF6F2;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: max(env(safe-area-inset-top, 0px), 20px);
  padding-right: max(env(safe-area-inset-right, 0px), 16px);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  padding-left: max(env(safe-area-inset-left, 0px), 16px);
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* When the dedicated login view is up, hide every other layer. */
body.auth-native-shell.auth-mode-login.auth-entry-shown .hero-wrap,
body.auth-platform-ios.auth-mode-login.auth-entry-shown .hero-wrap,
body.auth-platform-android.auth-mode-login.auth-entry-shown .hero-wrap,
body.auth-native-shell.auth-mode-login.auth-entry-shown #mobile-entry,
body.auth-platform-ios.auth-mode-login.auth-entry-shown #mobile-entry,
body.auth-platform-android.auth-mode-login.auth-entry-shown #mobile-entry,
body.auth-native-shell.auth-mode-login.auth-entry-shown .mobile-app-footer,
body.auth-platform-ios.auth-mode-login.auth-entry-shown .mobile-app-footer,
body.auth-platform-android.auth-mode-login.auth-entry-shown .mobile-app-footer {
  display: none !important;
}

#native-login-view .nlv-card {
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(31, 41, 51, 0.12);
  border: 1px solid rgba(31, 41, 51, 0.06);
  padding: 22px 20px 24px;
  box-sizing: border-box;
  margin: auto 0; /* vertical center within the scroll container */
}

#native-login-view .nlv-back {
  background: none;
  border: 0;
  color: #C8654A;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0 0 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

#native-login-view .nlv-heading {
  margin: 0 0 6px;
  font-size: 1.55rem;
  line-height: 1.15;
  color: #1F2933;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#native-login-view .nlv-sub {
  margin: 0 0 20px;
  color: #5A6573;
  font-size: 0.95rem;
  line-height: 1.4;
}

#native-login-view .nlv-alert {
  background: #FDE8E3;
  color: #8A2418;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  line-height: 1.4;
}

#native-login-view .nlv-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1F2933;
  margin: 12px 0 6px;
  letter-spacing: 0.01em;
}

#native-login-view .nlv-label:first-of-type {
  margin-top: 4px;
}

#native-login-view .nlv-input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border: 1.5px solid #E0D4C8;
  border-radius: 10px;
  padding: 0 14px;
  /* ≥16px keeps Mobile Safari from auto-zooming on focus */
  font-size: 16px;
  background: #FFFFFF;
  color: #1F2933;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

#native-login-view .nlv-input:focus {
  outline: none;
  border-color: #C8654A;
  box-shadow: 0 0 0 3px rgba(200, 101, 74, 0.15);
}

#native-login-view .nlv-submit {
  margin-top: 22px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: #5A4A42;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

#native-login-view .nlv-submit:active {
  background: #463A33;
}

#native-login-view .nlv-submit[disabled] {
  background: #8B7B73;
  cursor: default;
}

#native-login-view .nlv-link {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: #5A4A42;
  font-size: 0.92rem;
  margin-top: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

#native-login-view .nlv-divider {
  display: flex;
  align-items: center;
  margin: 18px 0 14px;
  color: #8B7B73;
  font-size: 0.82rem;
}

#native-login-view .nlv-divider::before,
#native-login-view .nlv-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E0D4C8;
}

#native-login-view .nlv-divider span {
  padding: 0 12px;
}

#native-login-view .nlv-google {
  width: 100%;
  height: 52px;
  border: 1.5px solid #E0D4C8;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1F2933;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

#native-login-view .nlv-footer {
  margin-top: 22px;
  text-align: center;
  font-size: 0.88rem;
  color: #5A6573;
}

#native-login-view .nlv-footer p {
  margin: 6px 0;
}

#native-login-view .nlv-textlink {
  background: none;
  border: 0;
  color: #C8654A;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
}

/* App Store guideline 3.1.1: the signup prompt must not be reachable on
   the iOS native shell. serve.js strips the wrapping `<p>` server-side via
   the IOS_STRIP markers; this rule is the client-side belt-and-suspenders
   for cases where the server-side strip is bypassed (cached HTML, UA
   missing the CountertopiOS/ token, etc.). */
body.auth-platform-ios #native-login-view .nlv-signup-prompt {
  display: none !important;
}