/* ==========================================================================
   PLAY SCHOOL — Password reset (S02)
   Reuses signin.css for the shared S01 shell/branding — only the 3-step
   flow chrome specific to this page lives here.
   ========================================================================== */

.reset-progress {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.reset-progress__seg {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--signin-border);
  overflow: hidden;
  position: relative;
}
.reset-progress__seg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-premium);
}
[dir="rtl"] .reset-progress__seg::before { transform-origin: right; }
.reset-progress__seg.is-active::before,
.reset-progress__seg.is-complete::before { transform: scaleX(1); }

.reset-progress__label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--signin-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-5);
}

.reset-step {
  opacity: 0;
  transform: translateY(12px);
  animation: resetStepIn 480ms var(--ease-premium) forwards;
}
@keyframes resetStepIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .reset-step { opacity: 1; transform: none; animation: none; }
}

.reset-step .signin-heading { margin-top: 0; }
.reset-step .signin-subtitle { margin-bottom: var(--space-6); }

#step1Form, #step3Form { display: flex; flex-direction: column; gap: var(--space-5); }

.reset-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.reset-back-link { align-self: center; }

.reset-envelope {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--raw-ink-50));
}
.reset-envelope svg { width: 32px; height: 32px; color: var(--color-primary); }

/* ---------- Password checklist ---------- */
.pw-checklist { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.pw-rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--signin-text-muted);
  transition: color var(--dur-normal) var(--ease-premium);
}
.pw-rule__icon {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--signin-border);
  transition: background var(--dur-normal) var(--ease-premium), border-color var(--dur-normal) var(--ease-premium), color var(--dur-normal) var(--ease-premium);
}
.pw-rule__icon svg {
  width: 9px; height: 9px;
  color: var(--raw-white);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-micro) var(--ease-premium), transform var(--dur-micro) var(--ease-premium);
}
.pw-rule.is-valid { color: var(--color-success); }
.pw-rule.is-valid .pw-rule__icon { background: var(--color-success); border-color: var(--color-success); }
.pw-rule.is-valid .pw-rule__icon svg { opacity: 1; transform: scale(1); }

/* ---------- Strength bar ---------- */
.pw-strength { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }
.pw-strength__seg { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--signin-border); transition: background 300ms var(--ease-premium); }
.pw-strength__label { display: block; margin-bottom: var(--space-5); font-size: var(--fs-caption); font-weight: 600; color: var(--signin-text-muted); transition: color 300ms var(--ease-premium); }
.pw-strength__label.is-weak { color: var(--color-error); }
.pw-strength__label.is-fair { color: var(--color-warning); }
.pw-strength__label.is-strong { color: var(--color-success); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .reset-form-wrap { width: 100%; }
}

@media (max-width: 767px) {
  .reset-actions {
    position: sticky;
    bottom: 0;
    background: var(--raw-white);
    padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    margin-top: var(--space-5);
    border-top: 1px solid var(--signin-border);
    z-index: 2;
  }
}