/* Homeschool Town — sign up / log in.
   A single warm card, centered on the hero gradient — not a split-screen
   SaaS template. Reuses .field / .field__error / .form-errors from submit.css. */

.auth {
  background-image: var(--grad-hero);
  border-bottom: 1px solid var(--border);
  min-height: calc(100vh - 4.25rem);
  display: flex; align-items: center;
  padding-block: clamp(var(--s-7), 8vw, var(--s-9));
}
.auth__inner { display: flex; justify-content: center; }

.auth-card {
  width: 100%; max-width: 28rem;
  background: var(--bg); background-image: var(--grad-surface);
  border: 1px solid var(--border-warm); border-radius: var(--r-xl);
  padding: clamp(var(--s-6), 5vw, var(--s-7));
  box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: var(--t-h2); margin-top: var(--s-3); }
.auth-card__lead { color: var(--muted); line-height: 1.5; margin: var(--s-2) 0 var(--s-6); }

/* ---- Icon + toggle input wrapper (wraps a bare input, not .field__input) ---- */
.auth-input {
  display: flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg); padding-inline: 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
}
.auth-input:has(:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.auth-input:has(.input-validation-error) { border-color: var(--error); background: var(--error-tint); }
.auth-input__icon { display: flex; flex: none; color: var(--muted); }
.auth-input__field {
  flex: 1 1 auto; min-width: 0; border: 0; background: none;
  padding: 0.72rem 0; font-size: var(--t-body); line-height: 1.4; color: var(--ink);
}
.auth-input__field::placeholder { color: var(--muted); opacity: 0.8; }
.auth-input__field:focus-visible { outline: none; }
.auth-input__toggle {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.auth-input__toggle:hover { background: var(--surface-bot); color: var(--ink); }
.auth-input__toggle:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* ---- Divider ---- */
.auth-divider {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-6) 0; color: var(--muted); font-size: var(--t-xs);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---- SSO (Feature 7b — mock handshake lives on /SsoContinue) ---- */
.auth-sso { display: flex; flex-direction: column; gap: var(--s-3); }

/* ---- Mock provider chooser (the "account picker" on /SsoContinue) ---- */
.sso-roster { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; flex-direction: column; gap: var(--s-2); }
.sso-roster__row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg); text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.sso-roster__row:hover { border-color: var(--accent); background: var(--accent-tint); }
.sso-roster__row:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.sso-roster__avatar { flex: none; }
.sso-roster__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sso-roster__who strong { font-size: var(--t-sm); line-height: 1.3; }
.sso-roster__email { font-size: var(--t-xs); color: var(--muted); }
.sso-roster__go { flex: none; color: var(--muted); width: 1.1rem; height: 1.1rem; }

/* ---- "Use another account" custom identity (native <details>, no JS) ---- */
.sso-custom { margin-top: var(--s-4); }
.sso-custom__trigger {
  cursor: pointer; font-size: var(--t-sm); font-weight: 500; color: var(--primary);
  padding: var(--s-2) 0; list-style: none;
}
.sso-custom__trigger::-webkit-details-marker { display: none; }
.sso-custom__trigger:hover { color: var(--primary-hover); }
.sso-custom__trigger:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.sso-custom__form { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.sso-custom__form .field:last-of-type { margin-bottom: var(--s-5); }

/* ---- Already-signed-in notice ---- */
.auth-card--notice { text-align: center; }
.auth-card__avatar { width: 3.5rem; height: 3.5rem; font-size: 1.15rem; margin-inline: auto; }
.auth-card__notice-actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }

.auth-card__switch { text-align: center; margin-top: var(--s-6); font-size: var(--t-sm); color: var(--muted); }

/* .link-btn lives in site.css — it's also used by the global unverified-email banner. */
.field__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-1); }
.field__label-row .field__label { margin-bottom: 0; }

.auth-card__switch-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }

/* ---- Mock-email seam (Feature 7c) — the explicit stand-in for a real provider send ---- */
.mock-seam {
  margin-top: var(--s-6);
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  padding: var(--s-4); background: var(--surface-bot);
}
.mock-seam .chip { margin-bottom: var(--s-3); }
.mock-seam p { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin: 0 0 var(--s-4); }
.mock-seam p code { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.1rem 0.35rem; font-size: 0.85em; }

@media (max-width: 26rem) {
  .auth-card { border-radius: var(--r-lg); }
}