/**
 * Password reset flow: step rail, password fields with a show/hide toggle,
 * and the live rule checklist.
 *
 * The markup comes from CustomPasswordResetForm and the
 * digicel-reset-steps / digicel-reset-rules Twig templates, not from a
 * Single Directory Component, so it is styled here in the foundation
 * library alongside the other bare-markup content in content.css.
 */

/* Step rail (digicel-reset-steps.html.twig). */
.dc-reset-steps {
  display: flex;
  gap: 6px;
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}

.dc-reset-steps__step {
  flex: 1;
}

.dc-reset-steps__bar {
  display: block;
  height: 4px;
  border-radius: var(--radius-xs);
  background: var(--border-subtle);
}

.dc-reset-steps__step.is-done .dc-reset-steps__bar {
  background: var(--digicel-red);
}

/* min-height rather than a fixed line count: the French "Créer le mot de
   passe" wraps to two lines where the English label fits on one, and
   without a reserved height the bars would sit at different heights
   between languages. */
.dc-reset-steps__label {
  display: block;
  min-height: 32px;
  margin-top: var(--space-2);
  font-family: var(--font-brand);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-body);
  color: var(--fg-primary);
  opacity: 0.7;
}

.dc-reset-steps__step.is-done .dc-reset-steps__label {
  color: var(--digicel-red);
  opacity: 1;
}

/* Password field with show/hide toggle (wrapper built by the JS behavior). */
.dc-reset__field {
  position: relative;
  display: block;
}

.dc-reset__field input {
  padding-right: 48px;
}

.dc-reset__toggle {
  position: absolute;
  right: var(--space-3);
  /* The input carries a margin-bottom from content.css, so centering
     against 50% of the wrapper would centre against that margin too and
     sit low. 22px lines the button up with the input box itself. */
  top: 22px;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg-primary);
  cursor: pointer;
  line-height: 0;
}

.dc-reset__toggle:hover {
  color: var(--digicel-red);
}

.dc-reset__toggle .dc-reset__eye-off {
  display: none;
}

.dc-reset__field.is-visible .dc-reset__toggle .dc-reset__eye {
  display: none;
}

.dc-reset__field.is-visible .dc-reset__toggle .dc-reset__eye-off {
  display: inline-flex;
}

/* Live rule checklist (digicel-reset-rules.html.twig). */
.dc-reset-rules {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.dc-reset-rules__rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dc-reset-rules__mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg-surface);
  color: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}

.dc-reset-rules__rule.is-met .dc-reset-rules__mark {
  background: var(--digicel-red);
  color: var(--fg-on-red);
}

.dc-reset-rules__label {
  font-family: var(--font-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
  opacity: 0.55;
}

.dc-reset-rules.is-touched .dc-reset-rules__label {
  opacity: 0.85;
}

.dc-reset-rules__rule.is-met .dc-reset-rules__label {
  color: var(--digicel-red);
  opacity: 1;
  font-weight: var(--weight-bold);
}

/* Match feedback (built by the JS behavior). */
.dc-reset__match {
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
  font-family: var(--font-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* Both states use the brand red: the palette has only four sanctioned
   colours and none of them is a green, so "success" borrows the same red
   as "error" — this is what the prototype does too. */
.dc-reset__match.is-ok,
.dc-reset__match.is-error {
  color: var(--digicel-red);
}

/* Intro copy and the closing note. */
.dc-reset__intro {
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--fg-primary);
  line-height: var(--leading-normal);
}

.dc-reset__note {
  margin: var(--space-6) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--fg-primary);
  opacity: 0.7;
  line-height: var(--leading-normal);
}

/* Disabled submit: neutral rather than the usual brand-red button, so it
   reads as unavailable. */
.dc-reset__submit[disabled] {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--fg-primary);
  cursor: not-allowed;
  opacity: 1;
}