/*
 * The sign-in block. Broadsheet: flush left, no box — the serif heading, a measure of text and
 * one solid accent button. Only token names that exist in app.css.
 */
@layer components {
    /* The standalone sign-in page (templates/security/login.html.twig). */
    .sign-in-page {
        padding: var(--space-2xl) var(--space-m);
    }

    .sign-in {
        display: grid;
        gap: var(--space-m);
        justify-items: start;
        max-width: var(--measure);
    }

    .sign-in__title {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--text-title);
        line-height: 1.1;
    }

    .sign-in__lead,
    .sign-in__error,
    .sign-in__fineprint,
    .sign-in__form {
        margin: 0;
    }

    .sign-in__lead {
        font-size: var(--text-lead);
    }

    .sign-in__error {
        color: var(--danger);
    }

    /* One button per provider, stacked and equally wide on a phone, side by side when they fit. */
    .sign-in__providers {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-s);
        inline-size: 100%;
    }

    .sign-in__providers .sign-in__form {
        flex: 1 1 14rem;
    }

    .sign-in__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        inline-size: 100%;
        min-height: 2.75rem; /* a finger-sized target */
        padding: var(--space-s) var(--space-l);
        border: 0;
        border-radius: var(--radius-s);
        background: var(--color-accent-700);
        color: var(--color-accent-contrast);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .sign-in__submit svg {
        inline-size: 1.25em;
        block-size: 1.25em;
        flex: none;
    }

    .sign-in__submit:hover {
        background: color-mix(in oklab, var(--color-accent) 85%, var(--color-text));
    }

    .sign-in__submit:active {
        background: color-mix(in oklab, var(--color-accent) 70%, var(--color-text));
    }

    .sign-in__submit:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }

    .sign-in__fineprint {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }
}