/* ---------------------------------------------------------------
   StaySonar — /signup and /login.
   Same tokens and buttons as the landing page, on the cream
   background with the dotted hero pattern behind the card.
   --------------------------------------------------------------- */

body.authpage {
  min-height: 100vh; background: var(--cream);
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
body.authpage .hero-pattern { position: fixed; inset: 0; }

.auth-wrap { position: relative; z-index: 2; width: 100%; max-width: 440px; text-align: center; }

.auth-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.auth-logo .logo-mark { width: 34px; height: 34px; }
.auth-logo .logo-word { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

.auth-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 34px 30px 28px; box-shadow: 0 24px 60px -28px rgba(20,21,26,.28); text-align: left;
}
.auth-card h1 { font-size: 25px; font-weight: 800; letter-spacing: -.028em; color: var(--ink); }
.auth-sub { margin-top: 7px; color: var(--body); font-size: 15px; line-height: 1.5; }

/* ---- Sign in with Google ----
   White button with a hairline border, per Google's branding rules: the
   mark keeps its own four colours and is never recoloured. Rendered only
   when GOOGLE_CLIENT_ID is set, so on an install without it these rules
   simply go unused. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; margin-top: 22px; padding: 13px 16px;
  font-size: 15.5px; font-weight: 700; color: var(--ink); text-decoration: none;
  background: #fff; border: 1.5px solid #dcdcd8; border-radius: 15px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.btn-google:hover {
  border-color: #b9bdc6; box-shadow: 0 4px 14px rgba(20,21,26,.08); transform: translateY(-1px);
}
.btn-google:active { transform: translateY(0); }
.btn-google svg { width: 19px; height: 19px; flex: none; }

/* "or" rule between Google and the email form */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 4px; color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .btn-google { transition: none; }
  .btn-google:hover { transform: none; }
}

.auth-form { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
/* Google already supplies the gap above the divider. */
.auth-divider + .auth-form { margin-top: 0; }
.auth-form input {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  padding: 13px 16px; background: #fff; border: 1.5px solid #dcdcd8; border-radius: 15px;
  transition: border-color .18s, box-shadow .18s;
}
.auth-form input::placeholder { color: #b3b3ae; }
.auth-form input:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,74,28,.15);
}
.auth-form .btn { width: 100%; justify-content: center; margin-top: 4px; }
.auth-hint { font-size: 12.5px; color: var(--muted); margin-top: -4px; }

.auth-alt { margin-top: 18px; font-size: 14px; color: var(--body); text-align: center; }
.auth-alt a { font-weight: 700; color: var(--orange); }
.auth-alt a:hover { color: var(--orange-2); }

.auth-foot { margin-top: 20px; font-size: 12.5px; color: var(--muted); }

.alert {
  margin-top: 18px; padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
}
.alert.err { background: var(--error-bg); color: var(--error-ink); }
.alert.ok  { background: var(--success-bg); color: var(--success-ink); }