/* ============================================================
   Landscapey — auth.css
   Shared styles for /login (and later /pros/signup pages).
   ============================================================ */

.page-auth {
  background:
    radial-gradient(800px 460px at 80% 18%, rgba(148, 165, 133, 0.18), transparent 65%),
    radial-gradient(700px 360px at 18% 88%, rgba(200, 170, 132, 0.14), transparent 65%),
    var(--paper);
  min-height: 100vh;
}

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 10vh, 120px) var(--gutter);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 56px);
  box-shadow: 0 30px 60px -30px rgba(28, 31, 26, 0.18);
  text-align: center;
}

.auth-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 14px 0 14px;
}
.auth-sub {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 340px;
  margin-inline: auto;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.auth-field input {
  font: inherit;
  font-size: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.auth-field input:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 4px rgba(63, 82, 53, 0.12);
}

.auth-form .btn { margin-top: 8px; width: 100%; }

.auth-error {
  color: var(--terracotta);
  font-size: 14px;
  background: rgba(184, 92, 58, 0.08);
  padding: 10px 14px;
  border-radius: 10px;
  margin: 4px 0 0;
}

.auth-fine {
  font-size: 13px;
  color: var(--mist);
  margin: 24px 0 0;
  text-align: left;
}
.auth-fine-center { text-align: center; }
.auth-fine a { color: var(--moss-deep); text-decoration: underline; text-underline-offset: 3px; }

.auth-cta { margin-top: 8px; width: 100%; }

/* Continue with Google */
.btn-google {
  width: 100%;
  gap: 10px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-google:hover { background: var(--cream); transform: translateY(-1px); }
.btn-google svg { width: 18px; height: 18px; }

/* "or" divider between Google and the email form */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}