/*
 * Login page. The background artwork supplies the branding and the palette, so the form is a
 * dark glass panel with the same cyan accent, positioned low to avoid covering the AHU render
 * and the wordmark above it.
 */

:root {
    --login-cyan: #22a7f0;
    --login-cyan-bright: #4fc3ff;
    --login-ink: #eaf4ff;
    --login-muted: #8fa9c4;
}

* { box-sizing: border-box; }

body.login-page {
    margin: 0;
    min-height: 100vh;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--login-ink);

    /* A dark fallback so the page never flashes white while the artwork loads. */
    background-color: #05080f;

    /*
     * The artwork is a dark photographic render, which is the worst case for PNG - it was
     * 1.9MB of lossless encoding for an image nobody inspects pixel by pixel. WebP at quality
     * 82 is 123kB and indistinguishable at 1:1, including in the dark gradients where banding
     * would show first.
     *
     * The plain url() below is read by anything that does not understand image-set(), so those
     * browsers get the JPEG; everything current takes the WebP and never requests the JPEG at
     * all. Two declarations rather than two requests.
     */
    background-image: url("/img/loginAHUWatch.jpg");
    background-image: image-set(
        url("/img/loginAHUWatch.webp") type("image/webp"),
        url("/img/loginAHUWatch.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.login-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pushed toward the bottom: the upper two thirds of the artwork hold the wordmark and
       the AHU, which the card would otherwise sit on top of. */
    justify-content: flex-end;
    padding: 40px 24px 34px;
    gap: 18px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 26px 28px 30px;
    border-radius: 14px;
    border: 1px solid rgba(79, 195, 255, 0.28);
    background: rgba(6, 14, 26, 0.82);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.login-heading {
    /* Bottom margin lives here rather than on a subtitle, which the first step does not have. */
    margin: 0 0 20px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* The verify step keeps a subtitle (the address the code went to), so it supplies the gap. */
.login-heading + .login-sub {
    margin-top: -16px;
}

.login-sub {
    margin: 4px 0 20px;
    font-size: 12.5px;
    color: var(--login-muted);
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.login-field {
    display: block;
    margin-bottom: 15px;
}

.login-field span {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--login-muted);
}

.login-field input {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--login-ink);
    background: rgba(3, 9, 18, 0.75);
    border: 1px solid rgba(143, 169, 196, 0.32);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-field input:focus {
    outline: none;
    border-color: var(--login-cyan);
    box-shadow: 0 0 0 3px rgba(34, 167, 240, 0.22);
}

.login-button {
    width: 100%;
    margin-top: 6px;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #04121f;
    background: linear-gradient(180deg, var(--login-cyan-bright), var(--login-cyan));
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.login-button:hover { filter: brightness(1.08); }
.login-button:active { transform: translateY(1px); }

/* Wide tracking makes a 6 digit code easy to read back from an email. */
.login-field input.code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px;
    letter-spacing: 8px;
    text-align: center;
    padding: 12px;
}

.login-hint {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--login-muted);
}

.login-hint a {
    color: var(--login-cyan-bright);
    text-decoration: none;
}

.login-hint a:hover { text-decoration: underline; }

.login-alert {
    margin-bottom: 16px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13.5px;
}

.login-alert-error {
    background: rgba(176, 58, 58, 0.22);
    border: 1px solid rgba(226, 106, 106, 0.45);
    color: #ffc9c9;
}

.login-alert-ok {
    background: rgba(34, 167, 240, 0.16);
    border: 1px solid rgba(79, 195, 255, 0.4);
    color: #cfeaff;
}

.login-footer {
    margin: 0;
    font-size: 11.5px;
    color: rgba(143, 169, 196, 0.75);
    text-align: center;
}

/* On short viewports the artwork is cropped hard; centring the card reads better than
   pinning it to an edge. */
@media (max-height: 620px) {
    .login-shell { justify-content: center; }
}