/* Show/hide eye and match feedback on password fields.
 * Companion to koala/static/js/password_ux.js (DD 2026-08-24).
 *
 * Its own file rather than an addition to koala-theme*.css: the theme files are
 * swappable per page (SiteThemeSettings picks one of six at render time), so
 * anything that a FEATURE depends on cannot live inside one of them — pick a
 * different theme and the reveal button loses its positioning. This loads
 * unconditionally from base.html beside the script it belongs to.
 */

/* The wrapper the script inserts around each password input. */
.pw-ux-wrap {
    position: relative;
    display: block;
}

/* Room for the button so a long password never runs underneath it.
   2.75rem clears the 44px touch target below. */
.pw-ux-wrap input {
    padding-right: 2.75rem;
}

.pw-ux-eye {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    /* 44px is the minimum comfortable touch target; business owners are
       signing up on phones, where a 20px icon is a coin toss. */
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
}

.pw-ux-eye:hover,
.pw-ux-eye:focus {
    color: #43b1b0;                 /* koala teal */
}

/* Keep the focus ring — the button is keyboard-reachable and removing the
   outline would make it invisible to anyone tabbing through the form. */
.pw-ux-eye:focus-visible {
    outline: 2px solid #43b1b0;
    outline-offset: -2px;
}

.pw-ux-msg {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    min-height: 1.1rem;             /* reserve the line so the form does not
                                       jump as the message appears/clears */
}

/* Colour is a SECOND signal, never the only one — the text says which state
   this is, so the message still reads correctly in greyscale or to anyone who
   does not distinguish red from green. */
.pw-ux-ok {
    color: #198754;
}

.pw-ux-bad {
    color: #dc3545;
}