/* views-auth.css — auth-card screens (js/views/auth-extra.js): signup,
   forgot, reset, magic link, auth callback, plus the pieces login.js and
   mfa-challenge.js share (wrapper, "or" divider, OAuth buttons, privacy line).
   Moved verbatim from auth-extra.js inline styles (UI audit D5, N42): same
   computed values, so no visual change. Tokens where one resolves to the
   same value; the rest stay literal until a visual pass converges them
   (e.g. .auth-input onto the kit .input, which is 13px / 33px). */

/* Full-viewport wrapper. The card carries margin:auto, so flex auto-margins
   center it on both axes; when the card is taller than the viewport the auto
   margins collapse to 0 and the layout degrades to a top-aligned scroll —
   nothing gets clipped above the fold, which align-items:center would do.
   100vh is the fallback where dvh is unsupported. Auth routes are public (no
   topbar), so the .view mount spans the viewport and this adds no second
   scroll model. */
.auth-wrap {
  display: flex;
  justify-content: center;
  padding: var(--s5) var(--s4);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Surface: the kit .card.card--pad (auth-extra.js adds both); only the
   width and the inset are ours. */
.auth-card {
  margin: auto;
  width: min(380px, 92vw);
  --card-pad: var(--s6) 28px;
}
.auth-card--center { text-align: center; }

.auth-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 6px;
  color: var(--text-1);
}
.auth-sub {
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-bottom: 20px;
}
.auth-card--center .auth-sub { margin-bottom: var(--s5); }

/* aria-live message line: danger by default, .is-ok after a success. */
.auth-alert {
  font-size: var(--fs-12);
  min-height: 16px;
  margin-bottom: 10px;
  color: var(--danger);
  line-height: 1.4;
}
.auth-alert.is-ok { color: var(--ok); }
.auth-card--center .auth-alert { text-align: center; }

/* ── fields ─────────────────────────────────────────────────────────────── */
.auth-field { margin-bottom: var(--s1); }
.auth-label {
  display: block;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--s1);
  letter-spacing: .3px;
}
/* Box, focus ring and padding: the platform field (base.css, components.css). */
.auth-input {
  width: 100%;
  margin-bottom: var(--s2);
  font-size: var(--fs-14);
}

.auth-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

/* Password strength: data-score 0–4 sets fill and colour. */
.auth-strength {
  margin-bottom: var(--s3);
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--border-subtle);
  overflow: hidden;
}
.auth-strength-bar {
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  transition: width .3s, background .3s;
}
.auth-strength-bar[data-score="0"] { width: 0%;   background: var(--danger); }
.auth-strength-bar[data-score="1"] { width: 25%;  background: var(--warn); }
.auth-strength-bar[data-score="2"] { width: 50%;  background: var(--warn); }
.auth-strength-bar[data-score="3"] { width: 75%;  background: var(--ok); }
.auth-strength-bar[data-score="4"] { width: 100%; background: var(--ok); }

/* "Passwords match" line under the confirm field. */
.auth-match {
  font-size: var(--fs-11);
  min-height: 14px;
  margin-bottom: var(--s3);
  color: var(--text-muted);
}
.auth-match.is-ok { color: var(--ok); }
.auth-match.is-bad { color: var(--danger); }

/* Reset-token notice above the form. */
.auth-notice {
  font-size: var(--fs-12);
  margin-bottom: var(--s4);
  padding: var(--s2) 10px;
  border-radius: var(--r-sm);
}
.auth-notice.is-ok {
  color: var(--ok);
  background: var(--ok-dim);
  border: 1px solid #1d5c47;
}
.auth-notice.is-warn {
  color: var(--warn);
  background: var(--warn-dim);
  border: 1px solid #6b4e10;
}

/* Full-width kit Button under a form. */
.btn.auth-submit { width: 100%; }
.btn.auth-submit--gap-s { margin-top: var(--s1); }
.btn.auth-submit--gap-m { margin-top: var(--s2); }

/* ── divider + alternative sign-in ──────────────────────────────────────── */
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}
.auth-or-line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.auth-or-label {
  font-size: var(--fs-11);
  color: var(--text-muted);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.auth-alt {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* Google / Microsoft buttons (also used by login.js): kit .btn.btn-secondary,
   whose hover (--bg-2 / --border-strong) is the one these always had. The
   modifier keeps their size: full width, 9px/16px padding, 14px type, 18px
   glyph, height from content (not --control-h). */
.btn.auth-oauth {
  display: flex;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 9px var(--s4);
  font-size: var(--fs-14);
  line-height: normal;
  transition: background .15s, border-color .15s;
}
.btn.auth-oauth svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Quiet "Sign in with password instead" on the magic-link card: kit
   .btn.btn-ghost with a subtle border, and a hover that lifts border and
   text only (no background, unlike the plain ghost button). */
.btn.auth-switch {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 9px var(--s4);
  border-color: var(--border-subtle);
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: normal;
  transition: border-color .15s, color .15s;
}
.btn.auth-switch:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text-1);
}

/* ── footers ────────────────────────────────────────────────────────────── */
.auth-footer {
  text-align: center;
  font-size: var(--fs-12-5);
  color: var(--text-muted);
  margin-top: 20px;
}
.auth-footer a { color: var(--accent-text); }

/* Privacy line: quieter than the accent links above it. */
.auth-privacy {
  text-align: center;
  font-size: var(--fs-11);
  color: var(--text-muted);
  margin: 18px 0 0;
}
.auth-privacy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── auth callback ──────────────────────────────────────────────────────── */
.state.auth-loading {
  max-width: 240px;
  margin: 0 auto var(--s4);
}
.auth-back {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent-text);
  font-size: var(--fs-13);
}