/* ============================================================
   auth.css — MOCK-ONLY layer for the auth screens.
   All real auth-screen primitives (.auth-shell, .auth-card,
   .auth-head/.auth-eyebrow/.auth-title/.auth-sub, .auth-form,
   .auth-row, .auth-link, .auth-foot, .auth-check, .btn-block,
   .field-toggle, .code-input/.code-cell/.code-hint, .setup-steps,
   .qr-frame, .manual-disclose/.manual-code, .auth-success,
   .auth-error) were promoted into the design system and now live
   in ds/base.css (auth-shell, auth-card) and ds/components.css.
   This file only carries the screen-switch pill that lets you jump
   between the four mock screens during design review — it's not
   part of the shipping UI.
   ============================================================ */

.auth-demo-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 6px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.auth-demo-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.auth-demo-nav a:hover { color: var(--text); }
.auth-demo-nav a.current {
  background: var(--accent-grad);
  color: white;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}