/* ============================================================
 * /app/auth/ - dedicated stylesheet.
 * ------------------------------------------------------------
 * Restyled to the §17 "Login + Onboarding" dossier
 * (design-dossiers/full-ecosystem/vilkax/17-onboarding.html):
 * a dark premium glass card with a nexus-ice (#4DA9FF) top-edge
 * gradient, an SSO button grid, premium-glow magic-link CTA,
 * 6-digit OTP boxes with focus glow, and onboarding step dots.
 *
 * Tokens come from the web nexus map in style.css
 * (--brand-primary = ice #4DA9FF, --text-* ink ladder, the
 * --vlx-sh-glow halo). No auth LOGIC lives here - markup hooks
 * only; the crypto / token handling is untouched.
 *
 * Visual hierarchy (intentional):
 *   1. SSO grid (Google / Passkey / …) - primary surface.
 *   2. Magic-link form                 - secondary, below the divider.
 *   3. Password sign-in                - opt-in toggle, tucked.
 *   4. Business "sign in with your company" - SSO-first work-email path.
 *
 * Designed for the dark theme; the future light-theme will
 * override the CSS variables in `auth-light` body class.
 * ============================================================ */

/* ── Layout ─────────────────────────────────────────────────── */

.auth-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 18px 56px;
}

/* The §17 desk-card: glass surface, ice-tinted halo from the top,
   ice hairline top-edge gradient, deep premium drop shadow. */
.auth-card {
  position: relative;
  padding: 36px 28px 32px;
  text-align: center;
  border-radius: 20px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(77,169,255,0.10), transparent 70%),
    rgba(20, 25, 35, 0.66);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(77,169,255,0.18);
  box-shadow:
    0 36px 80px -22px rgba(77,169,255,0.22),
    0 18px 48px -22px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}

/* §17 top-edge ice gradient line (.desk-card::before). */
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,169,255,0.45), transparent);
  pointer-events: none;
}

.auth-brand {
  display: block;
  margin: 0 auto 22px;
  width: 156px;
  height: 156px;
  filter: drop-shadow(0 14px 32px rgba(77,169,255,0.32));
  /* Premium polish: a slow, very-subtle breathe so the wolf feels
     alive at the top of the card. Killed under reduced-motion. */
  animation: auth-brand-breathe 7s ease-in-out infinite;
}
@keyframes auth-brand-breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 14px 32px rgba(77,169,255,0.32)); }
  50%      { transform: scale(1.03); filter: drop-shadow(0 18px 40px rgba(125,194,255,0.42)); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-brand { animation: none; }
}
@media (max-width: 480px) {
  .auth-brand { width: 128px; height: 128px; margin-bottom: 18px; }
}

.auth-h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  /* §17 desk-card h2 chrome-text gradient (premium ice-chrome). */
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE8FF 55%, #9FB4D8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* §17 accent word - italic serif, ice gradient. */
.auth-h1 em {
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, #B9D5FF, #4DA9FF 60%, #1F5FB8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-sub {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--text-muted, #818996);
  line-height: 1.6;
}

/* §17 "badge" eyebrow chip - ice mono pill. */
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--brand-accent-soft, rgba(77,169,255,0.18));
  border: 1px solid rgba(77,169,255,0.35);
  color: var(--brand-primary, #4DA9FF);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.auth-badge .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-primary, #4DA9FF);
  box-shadow: 0 0 8px var(--brand-primary, #4DA9FF);
}

/* ── SSO buttons - primary surface (§17 SSO grid) ──────────── */

/* A 2-up grid for the secondary SSO chips; the Google + Passkey
   marquee buttons span the full width so they keep their generous
   tap target while extra providers tile beneath. */
.auth-sso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
}
.auth-sso .auth-sso-span2 { grid-column: 1 / -1; }

/* Google button - built to spec:
   - 44px+ tap target
   - real Google "G" SVG (kept in HTML)
   - white surface, Google brand text colour #1F1F1F
   - 1px hairline + soft elevation hover
   - focus-visible ring on the brand-blue
   - loading state pulses opacity + shows spinner
*/
.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: #fff;
  color: #1f1f1f;
  font-family: "Roboto", "Helvetica Neue", -apple-system, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease;
  position: relative;
  user-select: none;
}
.auth-google:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.40);
}
.auth-google:active { transform: translateY(1px); }
.auth-google:focus-visible {
  outline: 3px solid rgba(77,169,255,0.55);
  outline-offset: 2px;
}
.auth-google[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.72;
}
.auth-google[aria-busy="true"] .auth-g-label::after {
  content: " · taking you to Google…";
  font-weight: 400;
  color: #5f6368;
}
.auth-g-svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Passkey button - promoted to the SSO row when supported.
   §17 primary CTA: ice gradient + glow + inset top highlight. */
.auth-passkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #4DA9FF, #1F5FB8);
  color: #fff;
  font: 600 14px/1 inherit;
  border: 1px solid rgba(77,169,255,0.5);
  box-shadow:
    0 10px 22px -8px rgba(77,169,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
  cursor: pointer;
  transition: transform 120ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.auth-passkey:hover {
  filter: brightness(1.07);
  box-shadow:
    0 14px 30px -8px rgba(77,169,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.28);
}
.auth-passkey:active { transform: translateY(1px); }
.auth-passkey:focus-visible {
  outline: 3px solid rgba(77,169,255,0.6);
  outline-offset: 2px;
}
.auth-passkey:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-passkey-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
}

/* Generic SSO chip (§17 .sso .b) - neutral ink tile for extra
   providers (Apple, Phone OTP, …). Sits in the 2-up grid. */
.auth-sso-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  background: var(--bg-surface, #141923);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-default, #C3CAD6);
  font: 500 12px/1 inherit;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.auth-sso-chip:hover {
  background: var(--bg-3, #1B212D);
  border-color: rgba(77,169,255,0.28);
  color: var(--text-strong, #F2F5FA);
}
.auth-sso-chip:focus-visible {
  outline: 3px solid rgba(77,169,255,0.55);
  outline-offset: 2px;
}
.auth-sso-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ── Divider (§17 .div mono rule) ──────────────────────────── */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--text-dim, #535C6A);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

/* ── Magic-link form - secondary ───────────────────────────── */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-ink, #0A0D13);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-strong, #F2F5FA);
  font: 14px/1.3 inherit;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.auth-input::placeholder { color: var(--text-dim, #535C6A); }
.auth-input:hover { border-color: rgba(255,255,255,0.16); }
.auth-input:focus-visible {
  border-color: var(--brand-primary, #4DA9FF);
  background: rgba(77,169,255,0.04);
  box-shadow: 0 0 0 3px rgba(77,169,255,0.18);
}
.auth-input[aria-invalid="true"] {
  border-color: rgba(255,107,87,0.55);
  box-shadow: 0 0 0 3px rgba(255,107,87,0.18);
}

.auth-submit {
  min-height: 48px;
  /* Inherit .submit-btn ice gradient + animation defined in style.css */
}

/* ── Password panel - tertiary, opt-in ──────────────────────── */

.auth-pw-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--brand-accent-soft, rgba(77,169,255,0.10));
  color: var(--text-strong, #F2F5FA);
  font: 600 13px/1 inherit;
  border: 1px solid rgba(77,169,255,0.18);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.auth-pw-toggle:hover {
  background: rgba(77,169,255,0.16);
  border-color: rgba(77,169,255,0.34);
}
.auth-pw-toggle:focus-visible {
  outline: 3px solid rgba(77,169,255,0.55);
  outline-offset: 2px;
}
.auth-pw-toggle-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  flex: 0 0 auto;
}

.auth-pw-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-pw-panel[hidden] { display: none; }

.auth-pw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-top: 2px;
}
.auth-pw-row a {
  color: var(--brand-primary, #4DA9FF);
  text-decoration: none;
}
.auth-pw-row a.auth-pw-row-muted {
  color: var(--text-muted, #818996);
}
.auth-pw-row a:hover { text-decoration: underline; }

/* TOTP code input - wider letter spacing, tabular numerals.
   Kept as a fallback; the JS now renders §17 OTP boxes instead. */
.auth-totp-input {
  font-size: 18px;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── 6-digit OTP boxes (§17 .otp) ──────────────────────────────
 * Used by the TOTP second-factor step. A real <input> sits on top
 * (transparent, 1ch-spaced caret) while the boxes render the digits
 * beneath, so autocomplete="one-time-code" / OS autofill still work
 * and the auth LOGIC is unchanged. */
.auth-otp {
  position: relative;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 2px;
}
.auth-otp .auth-otp-box {
  width: 42px;
  height: 50px;
  border-radius: 10px;
  background: var(--bg-ink, #0A0D13);
  border: 1px solid rgba(255,255,255,0.10);
  display: grid;
  place-items: center;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-strong, #F2F5FA);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.auth-otp .auth-otp-box.is-empty { color: var(--text-dim, #535C6A); }
.auth-otp .auth-otp-box.is-focus {
  border-color: var(--brand-primary, #4DA9FF);
  background: rgba(77,169,255,0.05);
  box-shadow: 0 0 0 2px rgba(77,169,255,0.18), 0 0 18px -4px rgba(77,169,255,0.45);
}
/* The actual input is stretched invisibly across the boxes so the
   native one-time-code keyboard / autofill path is preserved. */
.auth-otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: 0;
  caret-color: transparent;
  cursor: text;
}

/* Resend / countdown hint under the OTP boxes. */
.auth-otp-hint {
  margin: 8px 0 0;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim, #535C6A);
  text-align: center;
}

/* ── Onboarding step dots (§17 .steps) ─────────────────────── */
.auth-steps {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding-top: 4px;
  margin-top: 16px;
}
.auth-steps .d {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-3, #1B212D);
}
.auth-steps .d.is-active {
  background: var(--brand-primary, #4DA9FF);
  box-shadow: 0 0 8px var(--brand-accent-glow, rgba(77,169,255,0.45));
}
.auth-steps .d.done { background: var(--sev-clean, #45D6A0); }

/* ── Business path · "sign in with your company" (§17 SSO-first) ──
 * Styled distinctly from the consumer ice surface: a work-email
 * field with a routing hint card, SSO-first. Folded behind a toggle
 * so the consumer flow stays the default. */
.auth-biz-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted, #818996);
  font: 500 12px/1 inherit;
  border: 1px dashed rgba(255,255,255,0.12);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.auth-biz-toggle:hover {
  color: var(--text-strong, #F2F5FA);
  border-color: rgba(77,169,255,0.30);
  background: rgba(77,169,255,0.05);
}
.auth-biz-toggle:focus-visible {
  outline: 3px solid rgba(77,169,255,0.55);
  outline-offset: 2px;
}
.auth-biz-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex: 0 0 auto; }

.auth-biz-panel {
  margin-top: 12px;
  padding: 16px;
  text-align: left;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(77,169,255,0.10), transparent 80%),
    var(--bg-surface, #141923);
  border: 1px solid rgba(77,169,255,0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-biz-panel[hidden] { display: none; }
.auth-biz-label {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim, #535C6A);
}
/* SSO-routing discovery hint (e.g. "Acme uses Okta SAML SSO"). */
.auth-biz-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(77,169,255,0.10), transparent 80%),
    var(--bg-ink, #0A0D13);
  border: 1px solid rgba(77,169,255,0.22);
  font-size: 11px;
  color: var(--text-default, #C3CAD6);
}
.auth-biz-hint[hidden] { display: none; }
.auth-biz-hint svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: var(--brand-primary, #4DA9FF); fill: none; }
.auth-biz-hint b { color: var(--text-strong, #F2F5FA); }
/* The continue-to-SSO CTA inherits .submit-btn (ice gradient). */
.auth-biz-foot {
  margin-top: 2px;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-dim, #535C6A);
  text-align: center;
}

/* ── Status / inline error chips ────────────────────────────── */

.auth-status {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #818996);
  min-height: 1.4em;
}
.auth-status.is-error   { color: #ff8896; }
.auth-status.is-success { color: #7be6c2; }

/* ?error= banner (Google/OAuth) - louder than the magic-link
   status because the user just round-tripped to another origin
   and came back; we owe them an immediate explanation. */
.auth-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: rgba(255,107,87,0.08);
  border: 1px solid rgba(255,107,87,0.32);
  color: #ffc6cc;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.auth-error-banner[hidden] { display: none; }
.auth-error-banner-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  stroke: currentColor;
  fill: none;
}

/* ── Footer micro-copy + back link ──────────────────────────── */

.auth-foot {
  margin: 24px 0 0;
  font-size: 11px;
  color: var(--text-dim, #535C6A);
  line-height: 1.6;
}

.auth-back {
  display: inline-block;
  margin-top: 14px;
  color: var(--text-muted, #818996);
  text-decoration: none;
  font-size: 11px;
}
.auth-back:hover { color: var(--text-strong, #F2F5FA); }
.auth-back:focus-visible {
  outline: 2px solid rgba(77,169,255,0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Cloudflare Turnstile mount (rendered by /_shared/turnstile-mount.js) ──
   The widget is interaction-only, so it occupies no space until a challenge is
   actually shown. The margin only takes effect once the widget renders, so an
   empty (unconfigured / no-challenge) mount leaves the form layout untouched. */
.vlx-turnstile-mount:not(:empty) { margin: 4px 0 2px; }

/* ── Reduced-motion: kill the breathe animations + spinner ──── */

@media (prefers-reduced-motion: reduce) {
  .auth-google,
  .auth-passkey,
  .auth-sso-chip,
  .auth-pw-toggle,
  .auth-biz-toggle { transition: none; }
}