.password-field {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  vertical-align: middle;
  gap: 6px;
}
.password-field input {
  min-width: 0;
  max-width: 100%;
}
.login-card .password-field,
.saas-form .password-field {
  display: flex;
  width: 100%;
}
button.password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color, #dce5e8);
  border-radius: 6px;
  background: var(--body-bg, #fff);
  color: var(--body-fg, #263640);
  cursor: pointer;
}
button.password-toggle:hover {
  background: var(--darkened-bg, #edf1f3);
}
button.password-toggle:focus-visible {
  outline: 2px solid var(--link-fg, #183247);
  outline-offset: 2px;
}
.password-toggle-slash {
  display: none;
}
.password-toggle[aria-pressed="true"] .password-toggle-slash {
  display: inline;
}
.password-feedback {
  font-size: 13px;
  margin: 8px 0;
  color: var(--body-fg, #263640);
}
form .password-static-help[hidden] {
  display: none;
}
.password-feedback ul {
  padding-left: 18px;
  margin: 0;
}
.password-feedback li {
  margin: 4px 0;
  animation: password-feedback-in .18s ease-out;
}
.password-rule-valid {
  color: var(--success, #218653);
}
.password-rule-invalid,
.password-feedback[data-state="error"] {
  color: var(--error-fg, #ab2939);
}
.password-rule-invalid {
  font-weight: 600;
}
.password-field input[aria-invalid="true"] {
  border: 2px solid var(--error-fg, #ab2939);
  outline-color: var(--error-fg, #ab2939);
}
.password-feedback[data-state="pending"]::before,
.password-submit-status:not([hidden])::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: password-spinner .7s linear infinite;
}
.password-submit-status {
  margin-top: 8px;
  color: var(--body-fg, #263640);
}
button[type="submit"]:disabled,
input[type="submit"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@keyframes password-spinner {
  to { transform: rotate(360deg); }
}
@keyframes password-feedback-in {
  from { opacity: .4; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .password-feedback li,
  .password-feedback[data-state="pending"]::before,
  .password-submit-status:not([hidden])::before {
    animation: none;
  }
}