/* Preserve each form's existing input and palette; reserve only the eye hit area. */
.password-visibility-field { display: block; position: relative; min-width: 0; width: 100%; }
.login-card label .password-visibility-field { margin-top: 5px; }
.password-visibility-field > input[data-password-visibility] { box-sizing: border-box; width: 100%; margin: 0; padding-inline-end: 58px; }
.password-visibility-field > input::-ms-reveal { display: none; }
.password-visibility-field > button.password-visibility-toggle {
  box-sizing: border-box; position: absolute; inset-inline-end: 3px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink, var(--text, #1e4934));
  cursor: pointer; font: inherit; line-height: 1; box-shadow: none; -webkit-tap-highlight-color: transparent;
}
.password-visibility-toggle svg { display: block; width: 22px; height: 22px; pointer-events: none; }
.password-visibility-toggle .password-visibility-slash { display: none; }
.password-visibility-toggle.is-visible .password-visibility-slash { display: block; }
.password-visibility-field > button.password-visibility-toggle:focus-visible { outline: 2px solid var(--leaf, var(--green, #548a3d)); outline-offset: -3px; }
@media (hover: hover) { .password-visibility-field > button.password-visibility-toggle:hover { background: color-mix(in srgb, currentColor 8%, transparent); } }
.password-visibility-field > button.password-visibility-toggle:disabled { opacity: .45; cursor: default; }