/* Sign-in. Standalone — this page renders before there is a session, so it does not extend base.html.
 *
 * Two panels: what this system is, and the way in. The old card floated a 340px box in the middle of
 * an empty field and told an unauthenticated visitor nothing. */

.auth {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100dvh;
}

/* ── Brand panel ─────────────────────────────────────────────────────────────────────────────── */

.auth__brand {
    background: var(--surface-ink);
    padding: var(--space-16) var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-6);
}

.auth__wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.12em;
    line-height: var(--leading-tight);
    color: var(--brand-gold);
}

/* The same notch that marks a section heading and a gauge's baseline. */
.auth__rule {
    width: 48px;
    height: 2px;
    background: var(--brand-gold);
}

.auth__blurb {
    max-width: 36ch;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-on-dark-muted);
}

.auth__note {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-400);
}

/* ── Form panel ──────────────────────────────────────────────────────────────────────────────── */

.auth__panel {
    background: var(--surface);
    padding: var(--space-16) var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Wraps both ways in — the Microsoft link cannot live inside the password <form>, so the heading,
   flashes and the two methods share this column instead. */
.auth__methods {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.auth__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Outlined rather than a second solid button: two identical primaries stacked would ask the reader
   to rank them, when which one you use is decided by who you are, not by which matters more. */
.auth__sso {
    min-height: 48px;
    gap: var(--space-2);
}

.auth__ms-mark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink-600); /* not --ink-400: that is 3.6:1, documented as never for text */
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-tight);
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.auth__heading {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: 0.04em;
    color: var(--ink-900);
}

.auth__form .input {
    padding: var(--space-3) var(--space-1);
}

.auth__form .btn {
    min-height: 48px;
    margin-top: var(--space-2);
}

@media (max-width: 900px) {
    .auth {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth__brand {
        padding: var(--space-8) var(--space-6);
        gap: var(--space-4);
    }

    .auth__blurb,
    .auth__note {
        display: none;
    }

    .auth__panel {
        padding: var(--space-8) var(--space-6);
    }

    .auth__form {
        max-width: none;
    }
}