/* =====================================================================
 * oasis/password-reset.css  —  Password reset screen styles
 *
 * Loaded by templates/auth/password-reset.html AFTER auth.css.
 * The reset flow is a 4-step wizard inside the .card:
 *   1. Enter email
 *   2. Mail sent
 *   3. Set new password (password fields + strength meter)
 *   4. Done
 *
 * Sections:
 *   1. Step indicator inside card (.demo-steps / .demo-dot)
 *   2. .card container + .step visibility
 *   3. Step content fade keyframe
 *   4. Back link to login
 *
 * Historical note: the mockup previously had .demo-mail / .demo-tag
 * demo-only artifacts that were dropped from the production template;
 * those CSS rules were removed at the same time.
 * ===================================================================== */


/* ---------- 1. Step indicator (inside the card) ---------- */
.demo-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-bottom: 22px;
}
.demo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border);
  transition: all var(--transition);
}
.demo-dot.active {
  background: var(--accent);
  width: 22px; border-radius: 4px;
}
.demo-dot.done { background: var(--accent); }

/* Legacy pill-style indicator (kept for any reference; not used by current template) */
.demo-step-sep {
  width: 22px; height: 2px; background: var(--border-light);
  border-radius: 1px;
  transition: background var(--transition);
}
.demo-step-sep.active { background: var(--accent); }


/* ---------- 2. Step content card (used by step 3 password) ---------- */
.card { /* alias used by the reset markup; matches mockup verbatim */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  padding: 38px 36px 30px;
}

.step { display: none; }
.step.active { display: block; animation: stepFade 0.3s ease; }
.step.fade-out { animation: stepFadeOut 0.2s ease forwards; }

@keyframes stepFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes stepFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-4px); }
}


/* ---------- 4. Back link to login ---------- */
.back-link {
  display: block; text-align: center;
  font-size: 0.78rem; color: var(--info-blue);
  text-decoration: none; margin-top: 18px;
  transition: color var(--transition);
}
.back-link:hover { text-decoration: underline; }
.back-link svg { width: 14px; height: 14px; vertical-align: middle; margin-right: 2px; }