/* Auth pages (B6): sign-up, log in, 2FA, password reset, e-mail verification.
   Also loaded on /dashboard/settings for the password strength meter. Tokens only. */

.auth-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.auth-note svg { flex-shrink: 0; margin-top: 3px; color: var(--signal-text); }

.auth-fine {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.55;
}
.auth-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.auth-icon { margin-bottom: var(--s-4); }
.auth-state .auth-lead { max-width: 46ch; }

.auth-code {
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.auth-code::placeholder { letter-spacing: 0.18em; }

/* Honeypot: visually removed, still in the DOM for bots. */
.auth-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  left: -10000px;
}

form.auth-switch { margin: 0; }
form.auth-switch .btn--link { font-size: var(--fs-sm); }

.checkbox__text a { text-decoration: underline; text-underline-offset: 2px; }

/* Password strength meter */
.pw-meter {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.pw-meter__bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  flex: 1;
  max-width: 220px;
}
.pw-meter__bars span {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border);
  transition: background-color 160ms ease;
}
.pw-meter__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.pw-meter[data-level="0"] .pw-meter__bars span:nth-child(-n+1),
.pw-meter[data-level="1"] .pw-meter__bars span:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-level="2"] .pw-meter__bars span:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-level="3"] .pw-meter__bars span:nth-child(-n+3) { background: var(--brand); }
.pw-meter[data-level="4"] .pw-meter__bars span { background: var(--signal); }
.pw-meter[data-level="0"] .pw-meter__label,
.pw-meter[data-level="1"] .pw-meter__label { color: var(--danger-text); }
.pw-meter[data-level="2"] .pw-meter__label { color: var(--warn-text); }
.pw-meter[data-level="4"] .pw-meter__label { color: var(--signal-text); }

.pw-match {
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.pw-match.is-ok { color: var(--signal-text); }

@media (prefers-reduced-motion: reduce) {
  .pw-meter__bars span { transition: none; }
}