/* Progressive enhancement: original password fields remain usable if scripting is unavailable. */
.password-visibility-field { position:relative; display:block; width:100%; min-width:0; }
.password-visibility-field > input.password-visibility-input { padding-right:3.25rem; min-height:44px; }
.password-visibility-field > button.password-visibility-toggle {
    /* Anchor to the input's top, not the container height: validation messages can expand it during a click. */
    position:absolute; inset-inline-end:2px; top:0;
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px; padding:0; margin:0;
    border:1px solid transparent; border-radius:6px; background:transparent;
    color:var(--ink, #19342e); line-height:1; cursor:pointer; z-index:5;
}
.password-visibility-field > button.password-visibility-toggle:hover { background:var(--surface,#f7f7f2); border-color:var(--line,#d9e0d8); }
.password-visibility-field > button.password-visibility-toggle:focus-visible { outline:3px solid var(--ink,#19342e); outline-offset:1px; }
.password-visibility-field > button.password-visibility-toggle:disabled { opacity:.45; cursor:default; }
.password-visibility-field.form-floating > button.password-visibility-toggle { top:calc((3.5rem + 2px - 44px) / 2); }
.password-visibility-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
/* Keep floating labels and validation affordances clear of the eye button. */
.password-visibility-field.form-floating > label { max-width:calc(100% - 3rem); overflow:hidden; text-overflow:ellipsis; }
.password-visibility-field > input.password-visibility-input:is(.is-valid,.is-invalid) { background-position:right 3.2rem center; padding-right:4.8rem; }
/* Replace Edge's native reveal button rather than showing two eyes. Password-manager controls remain enabled. */
.password-visibility-input::-ms-reveal { display:none; }
@media (forced-colors:active) { .password-visibility-field > button.password-visibility-toggle { color:ButtonText; border-color:ButtonText; } }