/* Shared password reveal/hide control (issue #25).
   Wraps the untouched password input and overlays one native button. */
.password-visibility{position:relative;display:block;min-width:0}
.password-visibility input{width:100%;box-sizing:border-box;padding-right:56px}
.password-visibility-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:8px;color:#4d6640;background:transparent;cursor:pointer;line-height:1}
/* Pin the 44x44 box with a higher-specificity selector: page stylesheets also
   size bare `button` elements (e.g. `.profile-form button{width:100%}` at
   <=520px), which would otherwise stretch the overlay across the whole input. */
.password-visibility button.password-visibility-toggle{width:44px;height:44px;min-width:44px;min-height:44px}
/* Label-wrapped fields (profile/admin): the wrapper spans the whole <label>
   block, so the toggle is anchored to the real input box with the offsets
   measured in password-visibility.js, falling back to the shared centring
   while the field has no box yet (closed <dialog>). */
.password-visibility--labeled .password-visibility-toggle{top:var(--password-visibility-top,50%);right:var(--password-visibility-right,4px)}
.password-visibility-toggle:hover{color:#075435;background:rgba(7,84,53,.08)}
.password-visibility-toggle:focus-visible{color:#075435;background:rgba(7,84,53,.08);outline:3px solid rgba(61,143,47,.35);outline-offset:1px}
.password-visibility-toggle svg{display:block;pointer-events:none}
.password-visibility-toggle[aria-pressed="true"]{color:#075435;background:rgba(7,84,53,.1)}
@media(max-width:560px){.password-visibility input{padding-right:50px}}