/* Forgot-password flow — intentionally reuses the austere login token system. */
@import url("./login-form.tokens.css");

#modal-login .forgot-password-link-row {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(var(--login-space-xs) * -1);
}

#modal-login #forgotPasswordBtn,
#modal-login #forgotBackBtn,
#modal-login #forgotResendBtn {
  padding: 0;
  border: 0;
  border-bottom: var(--login-rule-hairline) solid transparent;
  border-radius: var(--login-radius-none);
  outline: none;
  background: transparent;
  color: var(--login-color-muted);
  cursor: pointer;
  font-family: var(--login-font-body);
  font-size: var(--login-text-xs);
  font-weight: 600;
  line-height: 1.5;
  text-align: start;
  transition: border-color var(--login-dur-short) var(--login-ease-out), color var(--login-dur-short) var(--login-ease-out);
}

#modal-login #forgotPasswordBtn:focus-visible,
#modal-login #forgotBackBtn:focus-visible,
#modal-login #forgotResendBtn:focus-visible {
  outline: var(--login-rule-focus) solid var(--login-color-focus);
  outline-offset: var(--login-space-2xs);
}

#modal-login #forgotPasswordView[hidden],
#modal-login .forgot-reset-step[hidden] {
  display: none !important;
}

#modal-login #forgotPasswordView {
  padding: var(--login-space-lg);
}

#modal-login .forgot-reset-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--login-space-md);
  padding-block: var(--login-space-sm);
  border-block: var(--login-rule-hairline) solid var(--login-color-rule);
  color: var(--login-color-muted);
  font-size: var(--login-text-xs);
  line-height: 1.4;
}

#modal-login .forgot-reset-stage strong {
  color: var(--login-color-cyan);
  font-weight: 700;
}

#modal-login .forgot-reset-code-row {
  display: flex;
  align-items: stretch;
  gap: var(--login-space-xs);
}

#modal-login #forgotResetCode {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  letter-spacing: 0.32em;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

#modal-login #forgotResendBtn {
  flex: 0 0 auto;
  min-width: 6.5rem;
  padding-inline: var(--login-space-sm);
  border: var(--login-rule-hairline) solid var(--login-color-rule-strong);
  color: var(--login-color-cyan);
  text-align: center;
}

#modal-login #forgotResendBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#modal-login .forgot-reset-actions {
  display: flex;
  flex-direction: column;
  gap: var(--login-space-xs);
}

#modal-login #forgotPrimaryBtn {
  display: inline-flex;
  width: 100%;
  min-height: var(--login-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--login-space-xs);
  padding: 0 var(--login-space-md);
  border: var(--login-rule-hairline) solid var(--login-color-accent);
  border-radius: var(--login-radius-none);
  outline: none;
  background: transparent;
  color: var(--login-color-accent);
  cursor: pointer;
  font-family: var(--login-font-body);
  font-size: var(--login-text-sm);
  font-weight: 800;
  line-height: 1;
  transition: background-color var(--login-dur-short) var(--login-ease-out), color var(--login-dur-short) var(--login-ease-out), transform var(--login-dur-micro) var(--login-ease-out);
}

#modal-login #forgotPrimaryBtn:focus-visible {
  outline: var(--login-rule-focus) solid var(--login-color-focus);
  outline-offset: var(--login-space-2xs);
}

#modal-login #forgotPrimaryBtn:active:not(:disabled) {
  transform: translateY(var(--login-rule-hairline));
}

#modal-login #forgotPrimaryBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#modal-login #forgotPrimaryBtn[aria-busy="true"]::before {
  width: var(--login-space-md);
  height: var(--login-space-md);
  flex: 0 0 auto;
  border: var(--login-rule-focus) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--login-radius-pill);
  content: "";
  animation: login-spin 900ms linear infinite;
}

#modal-login #forgotResetMsg {
  min-height: 1.5lh;
  margin: 0;
  color: var(--login-color-muted);
  font-size: var(--login-text-xs);
  line-height: 1.5;
}

#modal-login #forgotResetMsg:not(:empty)::before {
  color: var(--login-color-cyan);
  content: "— ";
}

#modal-login #forgotResetMsg.ok { color: var(--login-color-accent); }
#modal-login #forgotResetMsg.err { color: var(--login-color-error); }

#modal-login .forgot-reset-password-wrap {
  position: relative;
}

#modal-login .forgot-reset-password-wrap input {
  padding-inline-end: var(--login-space-2xl);
}

#modal-login .forgot-password-toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--login-space-2xs);
  display: grid;
  width: var(--login-icon-target);
  height: var(--login-icon-target);
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--login-color-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

#modal-login .forgot-password-toggle:focus-visible {
  outline: var(--login-rule-focus) solid var(--login-color-focus);
  outline-offset: var(--login-space-2xs);
}

@media (hover: hover) and (pointer: fine) {
  #modal-login #forgotPasswordBtn:hover,
  #modal-login #forgotBackBtn:hover,
  #modal-login #forgotResendBtn:hover:not(:disabled) {
    border-color: currentColor;
    color: var(--login-color-cyan);
  }

  #modal-login #forgotPrimaryBtn:hover:not(:disabled) {
    background: color-mix(in oklch, var(--login-color-accent) 10%, transparent);
    transform: translateY(calc(var(--login-rule-hairline) * -1));
  }

  #modal-login .forgot-password-toggle:hover { color: var(--login-color-accent); }
}

@media (max-width: 30rem) {
  #modal-login .forgot-reset-code-row {
    flex-direction: column;
  }

  #modal-login #forgotResendBtn {
    width: 100%;
    min-height: var(--login-control-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  #modal-login #forgotPrimaryBtn,
  #modal-login .forgot-password-toggle {
    transform: none !important;
  }
}