/**
 * Login page - API Statut FFVélo
 * Centered card layout with FFVélo branding.
 */

@layer page {
    body {
        display: grid;
        place-items: center;
        padding: var(--space-lg);
    }

    .card {
        background: var(--surface-card);
        border: 0.5px solid var(--border-base);
        border-radius: var(--radius-lg);
        padding-block: 2.25rem;
        padding-inline: 2.5rem;
        inline-size: 100%;
        max-inline-size: 26rem;
        box-shadow: var(--shadow-card);

        & .brand {
            text-align: center;
            margin-block-end: 1.75rem;

            & h1 {
                font-size: var(--fs-md);
                font-weight: 600;
                color: var(--color-blue);
                letter-spacing: 0.02em;
                text-wrap: balance;
            }

            & p {
                font-size: var(--fs-xs);
                color: var(--text-muted);
                margin-block-start: var(--space-2xs);
            }
        }
    }

    .field {
        margin-block-end: var(--space-md);

        & label {
            display: block;
            font-size: var(--fs-xs);
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-block-end: var(--space-xs);
        }

        & input {
            inline-size: 100%;
            padding-block: 0.625rem;
            padding-inline: 0.75rem;
            border: 1px solid var(--border-base);
            border-radius: var(--radius-sm);
            font-size: var(--fs-base);
            color: var(--text-base);
            background: var(--surface-card);
            transition: border-color var(--duration-quick) var(--ease-quick);

            &:focus-visible {
                outline: none;
                border-color: var(--color-blue);
                box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue), transparent 85%);
            }

            &:user-invalid {
                border-color: var(--color-red);
            }
        }
    }

    .check {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin-block-end: var(--space-lg);
        font-size: var(--fs-sm);
        color: var(--text-muted);
        cursor: pointer;
        accent-color: var(--color-blue);

        & input {
            cursor: pointer;
        }
    }

    .btn {
        inline-size: 100%;
        background: var(--color-blue);
        color: var(--text-on-blue);
        padding-block: 0.7rem;
        border-radius: var(--radius-sm);
        font-size: var(--fs-base);
        font-weight: 500;
        transition: background var(--duration-quick) var(--ease-quick);

        &:hover,
        &:focus-visible {
            background: oklch(from var(--color-blue) calc(l - 0.05) c h);
        }
    }

    .alert {
        background: var(--color-red-light);
        color: oklch(from var(--color-red) calc(l - 0.2) c h);
        border-inline-start: 3px solid var(--color-red);
        padding-block: 0.625rem;
        padding-inline: 0.875rem;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        font-size: var(--fs-sm);
        margin-block-end: var(--space-lg);
        line-height: 1.5;
        text-wrap: pretty;
    }

    .forgot {
        display: block;
        text-align: center;
        margin-block-start: 1.125rem;
        font-size: var(--fs-sm);
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--duration-quick) var(--ease-quick);

        &:hover,
        &:focus-visible {
            color: var(--color-blue);
            text-decoration: underline;
        }
    }
}