/*
 * =============================================================================
 * Copyright (c) 2026 Paseo Platform LLC. All rights reserved.
 * CONFIDENTIAL AND PROPRIETARY
 * =============================================================================
 *
 * Paseo Action — show/hide toggle for password fields.
 *
 * Built by static/js/password-reveal.js, which wraps every
 * `input[type="password"]` in `.pw-reveal` and appends `.pw-reveal__btn`. The
 * markup exists only once script has run, so nothing here applies to a page
 * that loaded without it.
 *
 * Deliberately shell-agnostic. The same component renders inside a PWA
 * `.m-form-input` and a desktop Bootstrap `.form-control`, so it styles the
 * wrapper and the button and reaches the input only to reserve room for the
 * button. Every colour resolves from design-system.css, which all four shells
 * load, so the Gauge skin and dark mode re-point it for free.
 */

.pw-reveal {
    position: relative;
    display: block;
    width: 100%;
}

/* Keep typed characters out from under the button. Scoped through the wrapper
   so it outranks the bare `.m-form-input` / `.form-control` padding without
   !important, and so a field that was never enhanced keeps its own padding. */
.pw-reveal > input {
    width: 100%;
    padding-inline-end: 46px;
}

.pw-reveal__btn {
    position: absolute;
    inset-inline-end: 1px;
    top: 1px;
    bottom: 1px;
    /* 44px is the touch-target floor; a smaller eye is the kind of control that
       is only hittable with a fingernail, which is the population this was
       built for. */
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    /* --text-muted fails AA on the light input background; this is a control,
       not decoration, so it takes the body ink. */
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    -webkit-appearance: none;
    appearance: none;
}

.pw-reveal__btn:hover {
    color: var(--text-primary);
}

.pw-reveal__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    color: var(--text-primary);
}

.pw-reveal__icon {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Chrome and Edge draw their own reveal control inside a password field, and
   Safari draws a password-manager key. Both land under ours and read as two
   competing eyes. */
.pw-reveal > input::-ms-reveal,
.pw-reveal > input::-ms-clear {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .pw-reveal__btn {
        transition: none;
    }
}