/**
 * Phase 11B — Auth Overlay UI (presentation only)
 * Scoped under #loginScreen / #passwordChangeScreen / #forgotPasswordScreen / #resetPasswordScreen + body.login-open
 * Does not alter auth APIs, payloads, rate limits, cookies, or helpers.
 */

#loginScreen.auth-overlay-modern,
#passwordChangeScreen.auth-overlay-modern,
#forgotPasswordScreen.auth-overlay-modern,
#resetPasswordScreen.auth-overlay-modern {
  --ao-gap: 14px;
  --ao-radius: 14px;
  --ao-control: 44px;
  --ao-panel-w: min(440px, 100%);
  --ao-ink: var(--ds-color-ink, var(--ink, #24262d));
  --ao-muted: var(--ds-color-muted, var(--muted, #6b7280));
  --ao-line: var(--ds-color-line, var(--line, #e5e7eb));
  --ao-surface: #ffffff;
  --ao-accent: var(--ds-color-accent, var(--accent, #0f766e));
  --ao-accent-strong: var(--accent-strong, #0b5f59);
  --ao-accent-soft: var(--accent-soft, #e4f4f1);
  --ao-danger: var(--red, #b42318);
  --ao-danger-soft: var(--red-soft, #fdecea);
  --ao-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}

#loginScreen.auth-overlay-modern *,
#loginScreen.auth-overlay-modern *::before,
#loginScreen.auth-overlay-modern *::after,
#passwordChangeScreen.auth-overlay-modern *,
#passwordChangeScreen.auth-overlay-modern *::before,
#passwordChangeScreen.auth-overlay-modern *::after,
#forgotPasswordScreen.auth-overlay-modern *,
#forgotPasswordScreen.auth-overlay-modern *::before,
#forgotPasswordScreen.auth-overlay-modern *::after,
#resetPasswordScreen.auth-overlay-modern *,
#resetPasswordScreen.auth-overlay-modern *::before,
#resetPasswordScreen.auth-overlay-modern *::after {
  box-sizing: border-box;
}

/* —— Overlay shell —— */
#loginScreen.auth-overlay-modern.login-screen,
#passwordChangeScreen.auth-overlay-modern.login-screen,
#forgotPasswordScreen.auth-overlay-modern.login-screen,
#resetPasswordScreen.auth-overlay-modern.login-screen {
  position: fixed;
  inset: 0;
  /* Above mobile chrome (.mobile-sticky-bar 1250, .mobile-bottom-nav 2000). */
  z-index: 3000;
  display: none;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(1200px 520px at 50% -10%, color-mix(in srgb, var(--ao-accent-soft) 88%, #fff) 0%, transparent 62%),
    linear-gradient(180deg, #f4f7f7 0%, #eef2f4 100%);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#loginScreen.auth-overlay-modern.login-screen.active,
#passwordChangeScreen.auth-overlay-modern.login-screen.active,
#forgotPasswordScreen.auth-overlay-modern.login-screen.active,
#resetPasswordScreen.auth-overlay-modern.login-screen.active {
  display: grid;
}

#passwordChangeScreen.auth-overlay-modern.login-screen[hidden],
#forgotPasswordScreen.auth-overlay-modern.login-screen[hidden],
#resetPasswordScreen.auth-overlay-modern.login-screen[hidden] {
  display: none !important;
}

/* Keep app shell non-interactive while auth is open (presentation reinforce). */
body.login-open #appShell.is-locked {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

/* Suppress mobile chrome that can paint above a low-z auth overlay.
   Proven leak: #mobileOfferStickyBar.mobile-sticky-bar (z-index 1250, white bar). */
body.login-open #mobileBottomNav,
body.login-open .mobile-bottom-nav,
body.login-open #mobileOfferStickyBar,
body.login-open .mobile-sticky-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.login-open {
  overflow: hidden;
}

/* —— Panel —— */
#loginScreen.auth-overlay-modern .login-panel,
#passwordChangeScreen.auth-overlay-modern .login-panel,
#forgotPasswordScreen.auth-overlay-modern .login-panel,
#resetPasswordScreen.auth-overlay-modern .login-panel {
  display: grid;
  gap: var(--ao-gap);
  width: var(--ao-panel-w);
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 28px 24px;
  border: 1px solid color-mix(in srgb, var(--ao-line) 88%, transparent);
  border-radius: var(--ao-radius);
  background: var(--ao-surface);
  box-shadow: var(--ao-shadow);
  color: var(--ao-ink);
}

#loginScreen.auth-overlay-modern .login-brand,
#passwordChangeScreen.auth-overlay-modern .login-brand,
#forgotPasswordScreen.auth-overlay-modern .login-brand,
#resetPasswordScreen.auth-overlay-modern .login-brand {
  margin: 0 0 2px;
  align-items: center;
  gap: 12px;
}

#loginScreen.auth-overlay-modern .login-brand-mark,
#passwordChangeScreen.auth-overlay-modern .login-brand-mark,
#forgotPasswordScreen.auth-overlay-modern .login-brand-mark,
#resetPasswordScreen.auth-overlay-modern .login-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  color: var(--ao-accent-strong);
  background: linear-gradient(145deg, var(--ao-accent-soft) 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--ao-accent) 22%, var(--ao-line));
}

#loginScreen.auth-overlay-modern .login-brand-name,
#passwordChangeScreen.auth-overlay-modern .login-brand-name,
#forgotPasswordScreen.auth-overlay-modern .login-brand-name,
#resetPasswordScreen.auth-overlay-modern .login-brand-name {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ao-ink);
}

#loginScreen.auth-overlay-modern .eyebrow,
#passwordChangeScreen.auth-overlay-modern .eyebrow,
#forgotPasswordScreen.auth-overlay-modern .eyebrow,
#resetPasswordScreen.auth-overlay-modern .eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--ao-accent-strong);
}

#loginScreen.auth-overlay-modern h1,
#passwordChangeScreen.auth-overlay-modern h1,
#forgotPasswordScreen.auth-overlay-modern h1,
#resetPasswordScreen.auth-overlay-modern h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ao-ink);
}

#passwordChangeScreen.auth-overlay-modern .muted-text,
#forgotPasswordScreen.auth-overlay-modern .muted-text,
#resetPasswordScreen.auth-overlay-modern .muted-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ao-muted);
}

/* —— Fields —— */
#loginScreen.auth-overlay-modern label,
#passwordChangeScreen.auth-overlay-modern label,
#forgotPasswordScreen.auth-overlay-modern label,
#resetPasswordScreen.auth-overlay-modern label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ao-ink);
}

#loginScreen.auth-overlay-modern input[type="password"],
#loginScreen.auth-overlay-modern select,
#passwordChangeScreen.auth-overlay-modern input[type="password"],
#passwordChangeScreen.auth-overlay-modern select,
#forgotPasswordScreen.auth-overlay-modern input[type="password"],
#resetPasswordScreen.auth-overlay-modern input[type="password"],
#forgotPasswordScreen.auth-overlay-modern select,
#resetPasswordScreen.auth-overlay-modern select {
  width: 100%;
  min-width: 0;
  min-height: var(--ao-control);
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ao-line) 92%, #94a3b8);
  border-radius: 10px;
  background: #fff;
  color: var(--ao-ink);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
}

#loginScreen.auth-overlay-modern input[type="password"]:focus,
#loginScreen.auth-overlay-modern select:focus,
#passwordChangeScreen.auth-overlay-modern input[type="password"]:focus,
#passwordChangeScreen.auth-overlay-modern select:focus,
#forgotPasswordScreen.auth-overlay-modern input[type="password"]:focus,
#resetPasswordScreen.auth-overlay-modern input[type="password"]:focus,
#forgotPasswordScreen.auth-overlay-modern select:focus,
#resetPasswordScreen.auth-overlay-modern select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ao-accent) 55%, var(--ao-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ao-accent) 16%, transparent);
}

#loginScreen.auth-overlay-modern select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ao-muted) 50%),
    linear-gradient(135deg, var(--ao-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* —— Errors —— */
#loginScreen.auth-overlay-modern .login-error,
#passwordChangeScreen.auth-overlay-modern .login-error,
#forgotPasswordScreen.auth-overlay-modern .login-error,
#resetPasswordScreen.auth-overlay-modern .login-error {
  margin: 0;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  color: var(--ao-danger);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 550;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#loginScreen.auth-overlay-modern .login-error:empty,
#passwordChangeScreen.auth-overlay-modern .login-error:empty,
#forgotPasswordScreen.auth-overlay-modern .login-error:empty,
#resetPasswordScreen.auth-overlay-modern .login-error:empty {
  display: none;
}

#loginScreen.auth-overlay-modern .login-error:not(:empty),
#passwordChangeScreen.auth-overlay-modern .login-error:not(:empty),
#forgotPasswordScreen.auth-overlay-modern .login-error:not(:empty),
#resetPasswordScreen.auth-overlay-modern .login-error:not(:empty) {
  display: block;
  padding: 10px 12px;
  background: var(--ao-danger-soft);
  border: 1px solid color-mix(in srgb, var(--ao-danger) 22%, transparent);
}

/* —— Primary action —— */
#loginScreen.auth-overlay-modern .primary-button,
#passwordChangeScreen.auth-overlay-modern .primary-button,
#forgotPasswordScreen.auth-overlay-modern .primary-button,
#resetPasswordScreen.auth-overlay-modern .primary-button {
  width: 100%;
  min-height: var(--ao-control);
  margin-top: 2px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--ao-accent-strong);
  background: var(--ao-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

#loginScreen.auth-overlay-modern .primary-button:hover,
#passwordChangeScreen.auth-overlay-modern .primary-button:hover,
#forgotPasswordScreen.auth-overlay-modern .primary-button:hover,
#resetPasswordScreen.auth-overlay-modern .primary-button:hover {
  background: var(--ao-accent-strong);
}

#loginScreen.auth-overlay-modern .primary-button:focus-visible,
#passwordChangeScreen.auth-overlay-modern .primary-button:focus-visible,
#loginScreen.auth-overlay-modern input:focus-visible,
#loginScreen.auth-overlay-modern select:focus-visible,
#passwordChangeScreen.auth-overlay-modern input:focus-visible,
#forgotPasswordScreen.auth-overlay-modern select:focus-visible,
#resetPasswordScreen.auth-overlay-modern input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ao-accent) 70%, #000);
  outline-offset: 2px;
}

/* —— Password-change identity (same family, distinct task) —— */
#passwordChangeScreen.auth-overlay-modern .login-panel,
#forgotPasswordScreen.auth-overlay-modern .login-panel,
#resetPasswordScreen.auth-overlay-modern .login-panel {
  border-top: 3px solid var(--ao-accent);
}

/* —— Responsive —— */
@media (max-width: 768px) {
#loginScreen.auth-overlay-modern.login-screen,
#passwordChangeScreen.auth-overlay-modern.login-screen,
#forgotPasswordScreen.auth-overlay-modern.login-screen,
#resetPasswordScreen.auth-overlay-modern.login-screen {
    place-items: stretch center;
    align-content: center;
    padding: 20px 14px;
  }

#loginScreen.auth-overlay-modern .login-panel,
#passwordChangeScreen.auth-overlay-modern .login-panel,
#forgotPasswordScreen.auth-overlay-modern .login-panel,
#resetPasswordScreen.auth-overlay-modern .login-panel {
    width: min(440px, 100%);
    padding: 22px 18px 18px;
    gap: 12px;
  }

#loginScreen.auth-overlay-modern h1,
#passwordChangeScreen.auth-overlay-modern h1,
#forgotPasswordScreen.auth-overlay-modern h1,
#resetPasswordScreen.auth-overlay-modern h1 {
    font-size: 20px;
  }
}

@media (max-width: 430px) {
#loginScreen.auth-overlay-modern.login-screen,
#passwordChangeScreen.auth-overlay-modern.login-screen,
#forgotPasswordScreen.auth-overlay-modern.login-screen,
#resetPasswordScreen.auth-overlay-modern.login-screen {
    padding: 16px 12px;
  }

#loginScreen.auth-overlay-modern .login-panel,
#passwordChangeScreen.auth-overlay-modern .login-panel,
#forgotPasswordScreen.auth-overlay-modern .login-panel,
#resetPasswordScreen.auth-overlay-modern .login-panel {
    padding: 20px 14px 16px;
    border-radius: 12px;
  }

#loginScreen.auth-overlay-modern input[type="password"],
#loginScreen.auth-overlay-modern select,
#passwordChangeScreen.auth-overlay-modern input[type="password"],
#passwordChangeScreen.auth-overlay-modern .primary-button,
#loginScreen.auth-overlay-modern .primary-button,
#forgotPasswordScreen.auth-overlay-modern input[type="password"],
#resetPasswordScreen.auth-overlay-modern input[type="password"],
#forgotPasswordScreen.auth-overlay-modern .primary-button,
#resetPasswordScreen.auth-overlay-modern .primary-button {
    min-height: 44px;
    font-size: 16px; /* iOS zoom-safe */
  }
}

@media (max-width: 360px) {
#loginScreen.auth-overlay-modern.login-screen,
#passwordChangeScreen.auth-overlay-modern.login-screen,
#forgotPasswordScreen.auth-overlay-modern.login-screen,
#resetPasswordScreen.auth-overlay-modern.login-screen {
    padding: 14px 10px;
  }
}

/* Password visibility toggle — login, auth overlays, settings */
.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-field > input {
  width: 100%;
  padding-right: 44px;
  box-sizing: border-box;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ao-muted, var(--muted, #6b7280));
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--ao-accent-strong, var(--accent, #0b5f59));
  background: var(--ao-accent-soft, #e4f4f1);
  outline: none;
}

.password-toggle.is-visible .password-toggle__eye {
  display: none;
}

.password-toggle.is-visible .password-toggle__eye-off {
  display: block;
}

.password-toggle__eye-off[hidden] {
  display: none !important;
}