/*
 * Show / hide password toggle - see wwwroot/js/password-visibility.js.
 *
 * Scoped entirely to .mi-pw_reveal, which the script adds only while the in-field
 * glyph is actually a toggle (i.e. the field has text). So the username field's
 * fa-user glyph, and a password field's fa-key while empty, are never affected.
 *
 * Deliberately no colour rules. login.min.css already colours these glyphs via
 *     .mi-login-wrapper .mi-login-container .mi-login-middle .mi-login-field
 *         input:focus~i::before { color:#b9c7ce }        (0,5,3)
 * and beating that would mean another long-selector fight for no real gain - the
 * app's existing pale/focus colours are fine for this control. Only `cursor` and
 * `outline` are set here, and nothing in app.min.css or login.min.css sets either
 * on these icons.
 */

.mi-pw_reveal {
    cursor: pointer;
}

/* The toggle is keyboard reachable (role="button" + tabindex="0"), so it needs a
   visible focus indicator - without one it is an accessibility defect. */
.mi-pw_reveal:focus {
    outline: 2px solid #496cc4;   /* matches the input focus border in login.min.css */
    outline-offset: 2px;
}

/* Hide the ring for pointer users while keeping it for keyboard users. Browsers
   without :focus-visible drop this rule as invalid and simply always show the
   ring, which is the safe direction to fail in. */
.mi-pw_reveal:focus:not(:focus-visible) {
    outline: none;
}