/* Password pages in the new design (page-designs/PasswordReset.dc.html). Tokens only.
   Loaded after account/login.css, whose card, field and input classes these pages share. */

.si-wrap.pw-wrap { max-width: 420px; }
.pw-home { justify-self: center; display: inline-flex; border-radius: var(--radius-md); }
.pw-logo { display: block; width: 40px; height: 40px; }
.pw-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.pw-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--accent); color: var(--primary); }
.pw-tile--danger { background: var(--danger-soft); color: var(--danger); }
.pw-tile--success { background: var(--success-soft); color: var(--success); }
.pw-head__text { display: grid; gap: var(--space-1); }
.pw-title { font: 600 24px/32px var(--font-sans); letter-spacing: var(--type-title-tracking); color: var(--foreground); }
.pw-sub { color: var(--muted-foreground); }

.pw-help { font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.pw-error { font-size: 13px; line-height: 18px; color: var(--danger); }
.si-input.pw-input--invalid { border-color: var(--danger); }
.pw-body { color: var(--foreground); }
.pw-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.pw-actions--start { justify-content: flex-start; }
.ms-btn--ghost.pw-cancel { color: var(--foreground); }
.ms-btn--ghost.pw-cancel:hover { background: var(--muted); color: var(--foreground); }
.pw-solo { display: grid; }
.pw-solo .si-submit { text-decoration: none; }
.pw-back { text-align: center; font-size: 14px; line-height: 20px; }
.pw-wrap .ms-btn { transition: background-color 150ms ease, filter 150ms ease; }

@media (prefers-reduced-motion: reduce) {
  .pw-wrap .ms-btn { transition: none; }
}