/* Shared chrome for the standalone auth pages (login, signup, password reset,
   invite): the wordmark and a heading over one card, on a soft brand-tinted
   glow. The wordmark is always lowercase "plain" in Maple Mono. Lives here
   rather than inline in ~10 templates so the static pipeline can hash and
   cache it. Built from Oat's tokens, so dark mode follows on its own. */
.auth-page {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--space-4);
    background:
        radial-gradient(
            ellipse 900px 520px at 50% -8%,
            color-mix(in srgb, var(--primary) 16%, var(--background)),
            var(--background) 70%
        );
}

.auth-shell {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.wordmark {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.5rem;
}

.auth-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
}

.auth-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    border-radius: var(--radius-large);
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    box-shadow: var(--shadow-large);
}

/* Roomier fields and buttons: easier to hit, and less form-from-2010. */
.auth-card input:not([type=hidden]),
.auth-card button {
    min-height: 44px;
}

.auth-card [data-field] {
    margin-block-end: 0;
}

/* The card and its forms space their children with gap, so the per-element
   margins older auth templates carry (mt-4, mb-2) would double it. */
.auth-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-card :is(.mt-2, .mt-4, .mb-2, .mb-4) {
    margin: 0;
}

.auth-note {
    font-size: var(--text-8);
}

.auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.auth-label-row a {
    font-size: var(--text-8);
    color: var(--muted-foreground);
}

/* "or" between two ways in, on a hairline. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-8);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

.auth-foot {
    margin: 0;
    text-align: center;
    color: var(--muted-foreground);
    font-size: var(--text-7);
}

/* A phone has no room for a card on a page: the form sits on the page. */
@media (max-width: 480px) {
    .auth-page {
        place-items: start center;
        padding-top: var(--space-16);
    }

    .auth-card {
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }
}