/* ==========================================================================
   auth.css - the auth family's v2 polish layer (makeover M4)
   --------------------------------------------------------------------------
   The four auth pages (log-in, register, forgot-password, reset-password)
   self-link this sheet ON TOP of the app.css base styles. M1's base
   already lands the family card on the CARD TIER (bg-2 + --border-strong
   + --r-md + --shadow-1, rule 1) - this sheet deliberately does NOT
   re-fight those, so the four doors here and the TOTP challenge (which
   links only the base) render the identical card. What it adds:

   - ONE input treatment: --r-sm, the focus-ready --border-strong
     border, the accent border + global ring on focus (rules 2/7/8)
   - the calm voice in type: titles --text-lg/600, subs --text-sm
     muted, labels --text-xs caps (rule 5)
   - links in text ink with an underline affordance, accent on hover/
     focus only (rule 4); one focus ring recipe for every control
   - spacing from --sp-*, motion from --dur-*/--ease (rules 3/6)

   Token references carry their contract fallbacks (harmless now that
   M1 landed :root - they defer).

   wave-35 (R4) - the THIN-CONSUMER contract: the four doors render
   their submits and text inputs through the ui.* primitive contract
   (classes APPEND: ui-btn ui-btn--primary rides next to auth-submit,
   ui-input next to the .auth-form input treatment below). This sheet
   never re-defines those primitives; the entry motion (the auth card
   itself fades in via data-motion) is R2's reactive.css layer and is
   inert until that lands - the family stays pixel-identical meanwhile.
   ========================================================================== */

.auth-mark {
  border-radius: var(--r-md, 10px);
  margin-bottom: var(--sp-4, 16px);
}

/* Page-title role: --text-lg/600 (rule 5). */
.auth-title {
  font-size: var(--size-lg, 18px);
  line-height: var(--lh-lg, 1.4);
  margin: 0 0 var(--sp-1, 4px);
}

/* Secondary role: --text-sm, muted. */
.auth-sub {
  font-size: var(--size-sm, 12.5px);
  line-height: var(--lh-sm, 1.5);
  color: var(--muted);
  margin: 0 0 var(--sp-5, 20px);
}

.auth-form {
  gap: var(--sp-1, 4px);
}

/* One input treatment for the whole family (rule 7/8): --r-sm, the
   focus-ready stronger border while idle, and the border stays out of
   the way of app.css's global :focus-visible accent ring. */
.auth-form input {
  border-radius: var(--r-sm, 6px);
  border-color: var(--border-strong);
  font-size: var(--size-base, 13.5px);
  padding: 8px 10px;
  transition: border-color var(--dur-fast, 120ms) var(--ease, ease),
    box-shadow var(--dur-fast, 120ms) var(--ease, ease);
}

.auth-form input:hover:not(:focus-visible) {
  border-color: var(--muted);
}

.auth-form input:focus-visible {
  border-color: var(--accent);
}

/* Meta labels: --text-xs caps on muted (rule 5). */
.auth-form label {
  font-size: var(--size-xs, 11px);
  letter-spacing: 0.07em;
  margin-top: var(--sp-2, 8px);
}

.auth-error,
.auth-notice {
  font-size: var(--size-sm, 12.5px);
  line-height: var(--lh-sm, 1.5);
}

.pass-toggle {
  border-radius: var(--r-sm, 6px);
  transition: color var(--dur-fast, 120ms) var(--ease, ease),
    background var(--dur-fast, 120ms) var(--ease, ease);
}

/* The family's one primary: --r-sm, the card tier's shadow, the shared
   motion; the focus ring replaces the removed outline (rule 2). */
.auth-submit {
  margin-top: var(--sp-4, 16px);
  border-radius: var(--r-sm, 6px);
  padding: 9px 14px;
  font-size: var(--size-base, 13.5px);
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast, 120ms) var(--ease, ease),
    transform var(--dur-fast, 120ms) var(--ease, ease),
    box-shadow var(--dur-fast, 120ms) var(--ease, ease);
}

.auth-submit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}

.auth-sep {
  margin: var(--sp-5, 20px) 0 var(--sp-3, 12px);
  font-size: var(--size-xs, 11px);
}

.oauth-btn {
  border-radius: var(--r-sm, 6px);
  font-size: var(--size-base, 13.5px);
  transition: border-color var(--dur-fast, 120ms) var(--ease, ease),
    background var(--dur-fast, 120ms) var(--ease, ease);
}

.oauth-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}

.auth-alt {
  margin: var(--sp-5, 20px) 0 0;
  font-size: var(--size-sm, 12.5px);
}

/* Links in the calm voice: text ink with an underline affordance, the
   accent only on hover/focus (rule 4 - accent marks, never decorates). */
.auth-link,
.auth-card .auth-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent);
  text-underline-offset: 2px;
  transition: color var(--dur-fast, 120ms) var(--ease, ease),
    text-decoration-color var(--dur-fast, 120ms) var(--ease, ease);
}

.auth-link:hover,
.auth-link:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.auth-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
  border-radius: var(--r-sm, 6px);
}

@media (prefers-reduced-motion: reduce) {
  .auth-form input,
  .auth-submit,
  .oauth-btn,
  .auth-link,
  .pass-toggle {
    transition-duration: 0.01ms;
  }
}