/* password-toggle.css — show/hide "eye" toggle for auth password fields.
   Shared by login, signup and reset-password. CSP-safe: no inline styles
   (style-src 'self'); all styling lives here.

   password-toggle.js wraps each visible <input type="password"> in a
   .pw-wrap, tags the input .pw-has-toggle, and appends the .pw-toggle
   button. The toggle flips the input between password/text. */

.pw-wrap {
    position: relative;
    display: block;
    /* The wrapper carries the field's bottom spacing so the input's own
       margin can be zeroed — that keeps the button centred on the field
       (not on field + margin). */
    margin-bottom: 12px;
}

/* Zero the input's own bottom margin and reserve room for the button.
   Specificity (.pw-wrap + input + .pw-has-toggle = 0,2,1) beats each
   page's `input:not([type=checkbox])` (0,1,1) without needing !important. */
.pw-wrap input.pw-has-toggle {
    margin-bottom: 0;
    padding-right: 46px;
}

/* This is an icon button — neutralise the pages' global gradient
   `button { … }` rule (width:100%, gradient bg, box-shadow, min-height:48px…). */
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-height: 0;
    background: none;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    color: #94a3b8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}
.pw-toggle:hover { color: #e2e8f0; background: none; filter: none; transform: none; }
.pw-toggle:active { transform: none; }
.pw-toggle:focus-visible { outline: 2px solid #38bdf8; outline-offset: -3px; }
.pw-toggle svg { width: 20px; height: 20px; display: block; pointer-events: none; }