/* ==========================================================================
   113 — Password Strength
   Champ mot de passe avec jauge de force : 4 segments remplis en vague
   (délais croissants), couleur qui glisse rouge → orange → jaune → émeraude,
   label de niveau en roll vertical, critères cochés en stroke-draw, bouton
   œil afficher/masquer en crossfade. anim.js pose data-level="0…4" sur la
   racine et .is-met sur chaque critère.
   ========================================================================== */

.password-strength {
  --pwd-accent: var(--ml-accent, #7c8cff);
  --pwd-c1: var(--password-strength-weak, #f87171);
  --pwd-c2: var(--password-strength-fair, #fb923c);
  --pwd-c3: var(--password-strength-good, #facc15);
  --pwd-c4: var(--password-strength-strong, #34d399);
  --pwd-color: var(--ml-muted, #8b91a3);
  --pwd-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(280px, 100%);
  color: var(--ml-fg, #e8eaf2);
}

/* couleur et cran du roll pilotés par le niveau */
.password-strength[data-level="1"] { --pwd-color: var(--pwd-c1); --pwd-level: 1; }
.password-strength[data-level="2"] { --pwd-color: var(--pwd-c2); --pwd-level: 2; }
.password-strength[data-level="3"] { --pwd-color: var(--pwd-c3); --pwd-level: 3; }
.password-strength[data-level="4"] { --pwd-color: var(--pwd-c4); --pwd-level: 4; }

.password-strength__label {
  color: var(--ml-muted, #8b91a3);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* --- Champ + œil --------------------------------------------------------------- */

.password-strength__field {
  position: relative;
  border-radius: 12px;
  background-color: var(--ml-surface, #151a24);
  border: 1px solid color-mix(in srgb, var(--ml-muted, #8b91a3) 28%, transparent);
  transition: border-color 0.25s var(--pwd-ease);
}

.password-strength__field:focus-within {
  border-color: color-mix(in srgb, var(--pwd-accent) 60%, transparent);
}

.password-strength__field:has(.password-strength__input:focus-visible) {
  outline: 2px solid var(--pwd-accent);
  outline-offset: 3px;
}

.password-strength__input {
  width: 100%;
  padding: 13px 46px 13px 16px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--ml-fg, #e8eaf2);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  outline: none; /* focus porté par la bordure du champ + :focus-visible ci-dessus */
  caret-color: var(--pwd-accent);
}

.password-strength__input::placeholder {
  color: color-mix(in srgb, var(--ml-muted, #8b91a3) 65%, transparent);
  letter-spacing: normal;
}

.password-strength__eye {
  position: absolute;
  right: 6px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ml-muted, #8b91a3);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color 0.25s var(--pwd-ease),
    background-color 0.25s var(--pwd-ease);
}

.password-strength__eye:hover {
  color: var(--ml-fg, #e8eaf2);
  background-color: color-mix(in srgb, var(--ml-muted, #8b91a3) 14%, transparent);
}

.password-strength__eye:focus-visible {
  outline: 2px solid var(--pwd-accent);
  outline-offset: 2px;
}

/* crossfade des deux icônes, pilotée par aria-pressed */
.password-strength__eye .password-strength__svg {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  transition:
    opacity 0.25s var(--pwd-ease),
    transform 0.25s var(--pwd-ease);
}

.password-strength__eye .password-strength__eye-off {
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
}

.password-strength__eye[aria-pressed="true"] .password-strength__eye-on {
  opacity: 0;
  transform: scale(0.6) rotate(12deg);
}

.password-strength__eye[aria-pressed="true"] .password-strength__eye-off {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* --- Jauge : 4 segments remplis en vague ---------------------------------------- */

.password-strength__meter {
  display: flex;
  gap: 6px;
}

.password-strength__seg {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--ml-muted, #8b91a3) 20%, transparent);
  overflow: hidden;
}

.password-strength__seg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--pwd-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 0.35s var(--pwd-ease),
    background-color 0.45s ease;
}

/* vague : chaque segment part avec un léger retard sur le précédent */
.password-strength__seg:nth-child(2)::before { transition-delay: 55ms, 0ms; }
.password-strength__seg:nth-child(3)::before { transition-delay: 110ms, 0ms; }
.password-strength__seg:nth-child(4)::before { transition-delay: 165ms, 0ms; }

.password-strength[data-level="1"] .password-strength__seg:nth-child(-n+1)::before,
.password-strength[data-level="2"] .password-strength__seg:nth-child(-n+2)::before,
.password-strength[data-level="3"] .password-strength__seg:nth-child(-n+3)::before,
.password-strength[data-level="4"] .password-strength__seg:nth-child(-n+4)::before {
  transform: scaleX(1);
}

/* --- Label de niveau : roll vertical --------------------------------------------- */

.password-strength__level {
  align-self: flex-end;
  height: 1.35em;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--pwd-color);
  transition: color 0.45s ease;
}

.password-strength__roll {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--pwd-level, 0) * -1.35em));
  transition: transform 0.4s var(--pwd-ease);
}

.password-strength__roll span {
  height: 1.35em;
  line-height: 1.35em;
  text-align: right;
}

/* --- Critères : check en stroke-draw ---------------------------------------------- */

.password-strength__criteria {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.password-strength__criterion {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ml-muted, #8b91a3);
  font-size: 0.78rem;
  line-height: 1.3;
  transition: color 0.3s var(--pwd-ease);
}

.password-strength__criterion .password-strength__svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.password-strength__ring {
  fill: none;
  stroke: color-mix(in srgb, var(--ml-muted, #8b91a3) 45%, transparent);
  stroke-width: 1.8;
  transition: stroke 0.3s var(--pwd-ease);
}

.password-strength__tick {
  fill: none;
  stroke: var(--pwd-c4);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1; /* calé sur pathLength="1" */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.1s ease; /* retour rapide quand le critère retombe */
}

.password-strength__criterion.is-met {
  color: var(--ml-fg, #e8eaf2);
}

.password-strength__criterion.is-met .password-strength__ring {
  stroke: color-mix(in srgb, var(--pwd-c4) 70%, transparent);
}

/* mini stroke-draw du check quand le critère passe au vert */
.password-strength__criterion.is-met .password-strength__tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s var(--pwd-ease) 0.05s;
}

/* annonce du niveau aux lecteurs d'écran, sans rendu visuel */
.password-strength__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Reduced motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .password-strength__seg::before,
  .password-strength__roll,
  .password-strength__level,
  .password-strength__eye .password-strength__svg,
  .password-strength__criterion,
  .password-strength__tick,
  .password-strength__criterion.is-met .password-strength__tick {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
}