/* Sign In / Sign Up / Forgot Password / Reset Password pages. No app
   header/footer/nav at all -- a full-bleed, edge-to-edge two-column layout
   (brand panel + form panel), each filling the full viewport height. The
   only way back to Snappy is the logo inside the brand panel (desktop) or
   the compact mobile brand line (mobile). */

/* ---- page shell: two full-height columns, no outer padding/margin ---- */
.auth-page { min-height: 100svh; display: flex; flex-direction: column; }
@media (min-width: 960px) { .auth-page { flex-direction: row; } }

/* ---- desktop brand panel (hidden below 960px) ---- */
.auth-brand { display: none; }
@media (min-width: 960px) {
  .auth-brand {
    flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden; padding: 64px;
  }
}
.auth-brand {
  background: linear-gradient(165deg, rgba(240,153,107,0.1), transparent 55%), var(--surface);
}
.auth-brand::before {
  /* soft peach glow, top-right -- decorative only */
  content: ''; position: absolute; inset: -30% -20% auto auto; width: 60%; height: 60%; z-index: 0;
  background: radial-gradient(circle, rgba(240,153,107,0.18), transparent 65%); pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-logo { display: inline-block; margin-bottom: 40px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.auth-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.auth-brand h2 { margin: 0 0 16px; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.auth-brand-sub { margin: 0 0 32px; color: #ded2c4; font-size: 16px; line-height: 1.55; max-width: 40ch; }

.auth-feature-cards { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.auth-feature-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--hair); background: rgba(251,243,233,0.03);
}
.auth-feature-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: rgba(240,153,107,0.14);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.auth-feature-icon .ico { width: 19px; height: 19px; }
.auth-feature-card h3 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--text); }
.auth-feature-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ---- compact brand line, mobile only ---- */
.auth-mobile-brand { text-align: center; padding: calc(env(safe-area-inset-top) + 24px) 20px 0; }
.auth-mobile-brand-logo { display: inline-block; margin-bottom: 14px; font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none; }
.auth-mobile-brand .auth-eyebrow { margin-bottom: 0; }
@media (min-width: 960px) { .auth-mobile-brand { display: none; } }

/* ---- form panel: fills its half height, content centered, no bordered
   "floating card" -- the page background IS the panel background. ---- */
.auth-panel-col {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px calc(env(safe-area-inset-bottom) + 32px);
}
@media (min-width: 960px) { .auth-panel-col { flex: 1 1 50%; } }

.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 1.5rem + 0.6vw, 2.125rem); font-weight: 700; letter-spacing: -0.01em; text-align: left; }
.auth-card .auth-sub { margin: 0 0 30px; color: var(--muted); font-size: 15px; text-align: left; line-height: 1.5; }

.auth-card .field-group { margin-bottom: 20px; }
.auth-card .field-group input { min-height: 52px; font-size: 16px; }

/* Icon inside email/password fields -- decorative, purely visual. */
.auth-input-wrap { position: relative; }
.auth-input-wrap input { width: 100%; padding-left: 44px !important; }
.auth-input-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: flex;
}
.auth-input-icon .ico { width: 18px; height: 18px; }

.auth-pw-wrap { position: relative; }
.auth-pw-wrap input { width: 100%; padding-left: 44px !important; padding-right: 46px !important; }
.auth-pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 0; background: none;
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.auth-pw-toggle:hover { color: var(--text); background: rgba(251,243,233,0.08); }
.auth-pw-toggle .ico { width: 19px; height: 19px; }
.auth-forgot-link { display: block; text-align: right; margin: -8px 0 6px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.auth-submit { width: 100%; margin-top: 10px; min-height: 52px; font-size: 16px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--muted); }
.auth-switch a { color: var(--accent); font-weight: 700; text-decoration: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.auth-google-host { display: flex; justify-content: center; min-height: 44px; }
.auth-success { text-align: center; padding: 12px 0; }