/* Show / hide password toggle (2026-11-03). Pairs with password-toggle.js. */

/* Room for the 44px button, so typed text never runs under it. Browser
   autofill icons sit inside the content box, so this padding keeps them
   clear of the button too. */
input.pw-toggle-input {
  padding-right: 48px !important;
}

/* Edge's built-in reveal button would be a second eye. */
input.pw-toggle-input::-ms-reveal,
input.pw-toggle-input::-ms-clear {
  display: none;
}

/* The button is positioned against the input's parent. */
.pw-toggle-host {
  position: relative;
}

.pw-toggle-btn {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--text-muted, #8b93a1);
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pw-toggle-btn:hover {
  color: var(--text-primary, #e6e8eb);
}

.pw-toggle-btn:focus {
  outline: none;
}

.pw-toggle-btn:focus-visible {
  outline: 2px solid var(--accent-gold, #c9a227);
  outline-offset: -4px;
}

.pw-toggle-btn[aria-pressed="true"] {
  color: var(--text-primary, #e6e8eb);
}

.pw-toggle-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}