/* ==========================================================================
   password-toggle -- the ONE show / hide control for every password and PIN input (S283 T6, ui-guideline.md Q106).
   static/shared/password_toggle.js wraps each input[type=password] in .pw-field and adds the .pw-toggle button; the
   eye / eye-off icons come from the icon set through templates/shared/_password_toggle.html.

   A shared partial with no tokens of its own: the button inherits the input's text colour (currentColor), so light, dark and
   every Desktop / Mobile / public / auth family follow their own input. Sizes are rem; the touch target is 2.75rem (44 px).
   ========================================================================== */
.pw-field { position: relative; display: block; width: 100%; }
.pw-field > input { width: 100%; padding-inline-end: 2.75rem; box-sizing: border-box; }
.pw-toggle {
  position: absolute; top: 50%; inset-inline-end: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 0.375rem; color: inherit; opacity: 0.65; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { opacity: 1; }
.pw-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; opacity: 1; }
.pw-toggle svg { display: block; width: 1.25rem; height: 1.25rem; pointer-events: none; }