/* ============================================================================
 * The sign-in screen, its secondary actions and its confirmation panel.
 *
 * Split out of app.css on 19-08-2026 (was lines 35-156). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* =============================================================== LOGIN VIEW */
.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(15,159,196,0.10), transparent 60%),
        radial-gradient(1000px 500px at -10% 110%, rgba(31,61,124,0.08), transparent 60%),
        var(--off-white, #F7F7F8);
}
.login__card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: var(--radius-modal, 16px);
    box-shadow: var(--shadow-modal, 0 20px 60px rgba(0,0,0,0.3));
    padding: 2rem 1.75rem 1.75rem;
    animation: modalSlideIn 0.3s ease;
}
.login__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text-dark, #0F1E45);
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.login__brand .fa-droplet, .login__logo { color: var(--cyan-ink, #0A7A97); }
.login__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate, #55648A);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 0 0 1.5rem;
}
.login__hint {
    font-size: 0.72rem;
    color: var(--slate, #55648A);
    text-align: center;
    margin-top: 1.25rem;
    line-height: 1.5;
}
/*
 * The house mark at the foot of the card, on every mode.
 *
 * `margin-top: auto` is deliberately NOT used — the card is not a flex column,
 * and the mark should sit under whatever the mode rendered rather than push the
 * card to a fixed height. The hairline above it separates the brand from the
 * form without drawing a heavy line across a card this small.
 *
 * The source PNG is 136px wide, so the cap below is its native size: anything
 * larger upscales and goes soft, which is worse than a modest mark.
 */
.login__mark {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--light-silver, #E3E4E9);
}
.login__mark img {
    width: 88px;
    max-width: 100%;
    height: auto;
}

.login__error {
    display: none;
    margin-top: 0.875rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-input, 6px);
    background: #fdeeee;
    color: var(--logout-red, #e05c5c);
    font-size: 0.8rem;
    font-weight: 500;
    border-left: 3px solid var(--logout-red, #e05c5c);
}
.login__error.is-visible { display: block; }

/* Secondary actions under the sign-in button ("Forgot password?", "Back"). */
.login__links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.login__link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cyan-ink, #0A7A97);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.login__link:hover { border-bottom-color: var(--cyan-ink, #0A7A97); }
.login__link:focus-visible {
    outline: 2px solid var(--cyan-ink, #0A7A97);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Confirmation panel: "check your email", "password updated". */
.login__notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-input, 6px);
    background: var(--pale-cyan, #EAF7FA);
    border-left: 3px solid var(--cyan-ink, #0A7A97);
}
.login__notice i { color: var(--cyan-ink, #0A7A97); font-size: 1rem; margin-top: 1px; }
.login__notice p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-dark, #0F1E45);
}

/*
 * A session that ended on its own. Amber rather than the cyan of an
 * informational panel: nothing has gone wrong, but something happened TO the
 * reader that they did not ask for, and this card is the consequence.
 *
 * Declared AFTER the base rules on purpose — the icon colour is a single class
 * plus a type selector either way, so equal specificity makes source order the
 * decider, and above `.login__notice i` the amber would simply lose.
 *
 * Same palette as `.badge--warn`, which is where the app's amber already lives.
 */
.login__notice--signedout {
    background: #fdf2e3;
    border-left-color: #d8a24a;
}
.login__notice--signedout i { color: #8a5a12; }