/* Auth pages — log in, sign up, forgotten password, reset password (Slice A WP4).
   ONE design for all four: an accent brand panel beside the form column, inside
   a single card. Promoted from two near-identical <style> blocks in login.html
   and signup.html (they had already drifted) plus two empty ones in the
   password-reset pair, which had no design at all. Tokens only — no raw colours.

   The shared field furniture (.login-error, .login-field, .login-help, .pw-wrap,
   .pw-toggle, .phone-group) lives in components.css; this file owns the page
   frame, the card, the brand panel and the form column. */

/* --- page frame -------------------------------------------------------- */
main.page.login-page {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);   /* the viewport less the sticky top bar */
  padding: clamp(var(--sp-5), 6vw, var(--sp-8)) var(--sp-4);
}
/* On a phone the card is taller than the viewport anyway; centring it in a
   forced full-height box only adds dead scroll above and below. */
@media (max-width: 560px) {
  main.page.login-page { min-height: 0; }
}

.login-card {
  width: 100%;
  max-width: 52rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

/* --- LEFT: the brand panel (the one place the accent is a surface fill) --- */
.login-brand {
  flex: 1 1 19rem;
  min-width: 16rem;
  background: var(--accent);
  color: var(--on-accent);
  padding: clamp(var(--sp-5), 4vw, var(--sp-6));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
}
.login-brand .wordmark {
  font-family: var(--font-brand-display);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
}
.login-tagline {
  font-family: var(--font-brand-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}
.login-welcome {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading);
  /* on-accent text dimmed for hierarchy; AA-safe on the accent fill */
  color: color-mix(in srgb, var(--on-accent) 82%, var(--accent));
}
/* Promo fine print (signup). Dimmer again than the welcome line, but the
   "Terms apply" link takes the full on-accent colour plus an underline — an
   unstyled link inherited the dark accent ink and vanished into the fill. */
.login-fineprint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading);
  color: color-mix(in srgb, var(--on-accent) 70%, var(--accent));
}
.login-fineprint a {
  color: var(--on-accent);
  text-decoration: underline;
  font-weight: 500;
}

/* --- RIGHT: the form column -------------------------------------------- */
.login-form-col {
  flex: 1 1 19rem;
  min-width: 17rem;
  padding: clamp(var(--sp-5), 4vw, var(--sp-6));
}
/* The title clears the first field on its own (the reset form has no lede); a
   lede that DOES follow is pulled back up so the pair reads as one block. */
.login-form-col h1 {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
}
.login-lede {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  line-height: var(--leading);
}
.login-form-col h1 + .login-lede { margin-top: calc(var(--sp-1) - var(--sp-5)); }
.login-form-col label {
  margin: 0 0 var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
/* Every field fills the column. The email input used to keep components.css's
   30rem cap because login.html's selector was a typo that never matched
   (`.login-form-col   .login-form-col input[type=email]`), so the two fields
   could not be relied on to be the same width. */
.login-form-col input[type=email],
.login-form-col input[type=password],
.login-form-col input[type=tel] { max-width: none; }
/* The submitted value is echoed back with the error ring on the field it is about. */
.login-form-col input.has-error { border-color: var(--regen); }

/* components.css's field selector list covers text/password/email/number only,
   so the signup mobile field rendered with the browser's default border. Match
   the shared styling here until the primitive covers input[type=tel]; the left
   edge stays square because the dialling-code <select> joins onto it. */
.phone-group > input[type=tel] {
  width: 100%;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
}
.phone-group > input[type=tel]:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.phone-group.has-error > input[type=tel] { border-color: var(--regen); }
/* The option text carries the country name as words now (the flag emoji it
   replaced rendered as bare letters on Windows and as nothing on some Androids),
   so the control needs a cap or the longest name would size the whole select and
   squeeze the number field. The dialling code leads, so it always shows. */
.phone-group > select { max-width: 11rem; }

.login-submit {
  width: 100%;
  justify-content: center;
  font-size: var(--text-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-cta);
}

/* Signup consent tick: a row, not a block label, so the sentence wraps beside
   the box instead of under it. */
.login-form-col .signup-consent { margin: var(--sp-5) 0; }
.login-form-col .signup-consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: var(--leading);
}
.login-form-col .signup-consent-label input { flex: none; margin-top: 0.2em; }

/* Honeypot: off-screen for people; a filled value is silently dropped. */
.signup-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}