/* Password reveal toggle (2026-08-04).
   Standalone so login.html — which loads no other stylesheet — can use it.
   Falls back to literal values when the design tokens are absent. */

/* No width here on purpose. Pages cap these inputs at their own sizes
   (client-detail uses max-width: 512px inside a 928px row), so the wrapper is
   measured and pinned to the input in JS — a `width: 100%` wrapper would put
   the eye 400px to the right of the field it belongs to. */
.pw-field {
  position: relative;
  display: block;
}

/* Keep room for the eye so a long secret never runs underneath it. Width is
   deliberately untouched: the input keeps whatever the page gave it. */
.pw-field > input {
  padding-right: 2.75rem;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32px keeps the hit area comfortable without overlapping the border. */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  line-height: 0;
}

.pw-toggle:hover {
  color: var(--text-primary, #111827);
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
}

.pw-toggle:focus-visible {
  outline: 2px solid var(--border-focus, #2563eb);
  outline-offset: 1px;
}

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

/* A disabled/readonly field still shows the eye but must not invite a click. */
.pw-field > input:disabled ~ .pw-toggle {
  opacity: 0.4;
  pointer-events: none;
}