.password-visibility {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.password-visibility > input {
    width: 100%;
    padding-right: 3.25rem !important;
}

.password-visibility__toggle {
    position: absolute;
    top: 50%;
    right: .25rem;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    transform: translateY(-50%);
    place-items: center;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--text-muted, #697077);
    cursor: pointer;
    touch-action: manipulation;
}

.password-visibility__toggle:hover {
    background: color-mix(in srgb, var(--accent, #f04b23) 10%, transparent);
    color: var(--accent, #f04b23);
}

.password-visibility__toggle:focus-visible {
    outline: .1875rem solid var(--accent, #f04b23);
    outline-offset: .125rem;
}

.password-visibility__toggle svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .password-visibility__toggle { transition: none; }
}