/* ============================================================
   PASSWORD EYE — show/hide toggle.

   Marker class on the <input>:  .has-pw-eye
   The JS helper (shared/password-eye.js) wraps the input in
   <span class="pw-eye-wrap"> and inserts a sibling
   <button class="pw-eye-btn"> with two SVG icons (open + closed).
   Wrapper carries `.is-shown` when the password is revealed.

   Each page loading shared/password-eye.css must also load
   shared/password-eye.js. Inputs without `.has-pw-eye` are
   untouched (e.g. admin console password input).
   ============================================================ */
.pw-eye-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* Reserve right-side space inside the input so the typed text
   never runs under the eye button. 46px = button position (12px)
   + button hit area (28px) + small breathing space (6px). Wide
   selector list covers signup (.su-input), login (.login-input),
   and reset/change-password (.rs-input).

   Phase 5 fix: also force width:100% + box-sizing:border-box on
   wrapped inputs. The .pw-eye-wrap (block, width:100%) takes over
   as the flex/grid child once we wrap; an input inside that has
   no width rule of its own (e.g. .login-input which used to
   stretch implicitly as a flex child) would render at intrinsic
   UA width ~150-180px and look ~60% as wide as its bare sibling.
   Adding width here is a no-op for inputs that already set it
   (.su-input, .rs-input) and the load-bearing fix for the ones
   that don't (.login-input). Regression from 8c49d7c. */
input.has-pw-eye {
  padding-right: 46px;
  width: 100%;
  box-sizing: border-box;
}

.pw-eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ink, #0A0A0A);
  opacity: 0.55;
  line-height: 0;
  border-radius: 4px;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.pw-eye-btn:hover { opacity: 1; }
.pw-eye-btn:focus-visible {
  outline: 2px solid var(--purple, #7E5AF2);
  outline-offset: 2px;
  opacity: 1;
}
.pw-eye-btn:active { transform: translateY(-50%) scale(0.92); }

/* Two icons stacked; CSS toggles which one is visible based on
   the wrapper's .is-shown state. Default: password hidden →
   show the OPEN eye ("click me to reveal"). After clicking →
   show the CLOSED (slashed) eye ("click me to hide"). */
.pw-eye-icon { display: block; }
.pw-eye-icon-open  { display: block; }
.pw-eye-icon-closed { display: none; }
.pw-eye-wrap.is-shown .pw-eye-icon-open  { display: none; }
.pw-eye-wrap.is-shown .pw-eye-icon-closed { display: block; }