/*
 * The sign-in and register forms (landing/lib/pages/signin.php), scoped to #authPage. Built from apex.css's
 * Deep Field tokens (polished-ui v2): the field, input and ring styles stay the shared ones; this file only adds the
 * password toggle and the register strength meter.
 */

#authPage .auth-input::placeholder { color: var(--text-dim); opacity: 0.7; }

/* Password field with the show/hide button inside it. */
#authPage .auth-password { position: relative; }
#authPage .auth-password.has-toggle .auth-input { padding-right: 52px; }

#authPage .auth-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text-dim);
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth);
}
#authPage .auth-toggle[hidden] { display: none; }
#authPage .auth-toggle:active { transform: scale(var(--press-scale)); }
#authPage .auth-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
    #authPage .auth-toggle:hover { color: var(--text); }
}

/* The two eye icons cross-fade and scale between each other instead of swapping. */
#authPage .auth-toggle svg {
    grid-area: 1 / 1;
    width: 20px;
    height: 20px;
    transition: opacity var(--duration-normal) var(--ease-smooth), transform var(--duration-normal) var(--ease-smooth);
}
#authPage .auth-toggle .auth-eye-off { opacity: 0; transform: scale(0.8); }
#authPage .auth-toggle[aria-pressed="true"] .auth-eye { opacity: 0; transform: scale(0.8); }
#authPage .auth-toggle[aria-pressed="true"] .auth-eye-off { opacity: 1; transform: scale(1); }

/* Strength meter: four bars that fill from the left, red, orange, yellow, green. */
#authPage .auth-meter { margin-top: 10px; }

#authPage .auth-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

#authPage .auth-bar {
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(138, 160, 191, 0.18);
}

#authPage .auth-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--auth-meter-color, var(--danger));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-smooth), background-color var(--duration-normal) var(--ease-smooth);
}
#authPage .auth-bar.is-on::after { transform: scaleX(1); }
#authPage .auth-bar:nth-child(2)::after { transition-delay: var(--stagger), 0ms; }
#authPage .auth-bar:nth-child(3)::after { transition-delay: calc(var(--stagger) * 2), 0ms; }
#authPage .auth-bar:nth-child(4)::after { transition-delay: calc(var(--stagger) * 3), 0ms; }

#authPage .auth-meter[data-score="1"] { --auth-meter-color: var(--danger); }
/* Amber from apex.css's base palette: --accent-warm itself changes per branding variant (cyan in Fracture). */
#authPage .auth-meter[data-score="2"] { --auth-meter-color: #ffb84d; }
#authPage .auth-meter[data-score="3"] { --auth-meter-color: var(--gold); }
#authPage .auth-meter[data-score="4"] { --auth-meter-color: var(--success); }

/* Label and advice open below the bars with a grid-row reveal once something is typed. */
#authPage .auth-advice {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-smooth);
}
#authPage .auth-meter[data-open="true"] .auth-advice { grid-template-rows: 1fr; }
#authPage .auth-advice > div { overflow: hidden; }

#authPage .auth-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--auth-meter-color, var(--text-dim));
    transition: color var(--duration-normal) var(--ease-smooth);
}

#authPage .auth-tips {
    margin: 4px 0 0;
    padding: 0 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-soft);
    text-wrap: pretty;
}
#authPage .auth-tips li + li { margin-top: 2px; }
#authPage .auth-tips:empty { display: none; }

/* The plain length hint is for visitors without JavaScript; the meter replaces it. */
#authPage .auth-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-dim);
}
#authPage .auth-meter:not([hidden]) + .auth-hint { display: none; }