/* ============================================================
   ConTrack AI · Password reveal control
   Shared by the sign-in and create-account screens.
   A bare eye icon in the brand palette: maroon #7A0C0C,
   rose #F5C2C2, cream accent #F4C396.
   ============================================================ */

.pw-field {
    position: relative;
    display: block;
}

.pw-field > input {
    padding-right: 46px;
}

/* The bare `button` selector in index.css / CP.css styles every button as a
   full-width maroon bar, so all of that needs clearing here. */
.pw-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    letter-spacing: normal;
    color: #c2989d;
    cursor: pointer;
    filter: none;
    transition: color .2s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
    -webkit-tap-highlight-color: transparent;
}

.pw-toggle:hover {
    filter: none;
    background: none;
    color: #991B1B;
    transform: translateY(-50%) scale(1.12);
}

.pw-toggle:active {
    transform: translateY(-50%) scale(0.92);
}

.pw-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(228, 193, 156, 0.65);
}

/* Revealed: full brand maroon. */
.pw-field.is-revealed .pw-toggle {
    color: #7A0C0C;
}

.pw-field.is-revealed .pw-toggle:hover {
    color: #991B1B;
}

/* Icons are stacked and cross-faded. */
.pw-toggle svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.pw-toggle .pw-icon-off {
    opacity: 0;
    transform: scale(.55) rotate(-14deg);
}

.pw-field.is-revealed .pw-toggle .pw-icon-on {
    opacity: 0;
    transform: scale(.55) rotate(14deg);
}

.pw-field.is-revealed .pw-toggle .pw-icon-off {
    opacity: 1;
    transform: scale(1) rotate(0);
}

/* The strike-through draws itself instead of popping in. */
.pw-toggle .pw-slash {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
}

.pw-field.is-revealed .pw-toggle .pw-slash {
    animation: pwSlashDraw .34s ease forwards .05s;
}

@keyframes pwSlashDraw {
    to { stroke-dashoffset: 0; }
}

/* Slightly wider tracking while the characters are legible. */
.pw-field.is-revealed > input {
    letter-spacing: .3px;
}

@media (prefers-reduced-motion: reduce) {
    .pw-toggle,
    .pw-toggle svg,
    .pw-toggle .pw-slash {
        transition: none;
        animation: none;
    }

    .pw-toggle:hover,
    .pw-toggle:active {
        transform: translateY(-50%);
    }

    .pw-toggle .pw-slash {
        stroke-dashoffset: 0;
    }
}