/*
 * ==========================================================================
 * FORM PASSWORD COMPONENT
 * ==========================================================================
 * Password input with an inline toggle-visibility button (eye icon).
 *
 * Structure produced by templates/components/form-password.html:
 *     <div class="form-password" data-form-password>
 *         <input class="form-input form-password-input" type="password" ...>
 *         <button class="form-password-toggle" data-form-password-toggle ...>
 *             <span class="form-password-toggle-icon" data-icon-show>...</span>
 *             <span class="form-password-toggle-icon" data-icon-hide hidden>...</span>
 *         </button>
 *     </div>
 *
 * The input is the canonical .form-input. The wrapper provides positioning
 * context; .form-password-input only adds enough padding-right to leave
 * room for the button without overlapping typed characters.
 * ==========================================================================
 */

.form-password {
    position: relative;
    display: block;
}

/* Reserve space for the toggle button so long passwords don't slide under it.
   2.75rem = button width (2rem) + 0.5rem right offset + 0.25rem safety. */
.form-password-input {
    padding-right: 2.75rem;
}

.form-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.375rem; /* 6px — visually centered against typical input padding */
    transform: translateY(-50%);

    /* Square hit target. Visually chromeless until interaction. */
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: var(--radius-sm, 0.375rem);
    color: var(--text-muted, var(--text-secondary, #6b6b6b));
    cursor: pointer;

    transition:
        color var(--transition-base, 150ms ease),
        background-color var(--transition-base, 150ms ease),
        box-shadow var(--transition-base, 150ms ease);

    /* Prevent the button from inheriting input font sizing quirks. */
    font: inherit;
    line-height: 0;
}

.form-password-toggle:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.form-password-toggle:focus-visible {
    outline: none;
    color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-light, rgba(46, 92, 138, 0.18));
}

.form-password-toggle:active {
    transform: translateY(-50%) scale(0.94);
}

/* Pressed state — password is currently visible. Use the accent so the
   button reads as "active mode" rather than just an idle icon. */
.form-password-toggle[aria-pressed="true"] {
    color: var(--accent-primary);
}

.form-password-toggle svg {
    width: 1.125rem;  /* 18px — slightly smaller than the 1.25rem icon norm
                          so it feels embedded in the field, not floating */
    height: 1.125rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.form-password-toggle-icon {
    display: inline-flex;
}

.form-password-toggle-icon[hidden] {
    display: none;
}

/* Disabled input — the toggle should also be inert and visually quieter. */
.form-password-input:disabled ~ .form-password-toggle,
.form-password:has(.form-password-input:disabled) .form-password-toggle {
    pointer-events: none;
    opacity: 0.5;
}

/* When :has() is unavailable, JS adds .is-disabled on the wrapper. */
.form-password.is-disabled .form-password-toggle {
    pointer-events: none;
    opacity: 0.5;
}

/* High-contrast mode: make sure the button outline is visible. */
@media (prefers-contrast: more) {
    .form-password-toggle:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-password-toggle {
        transition: none;
    }
    .form-password-toggle:active {
        transform: translateY(-50%);
    }
}