/* Account - Log in and other account forms, centered on a single card */

.auth {
    /* Retint the shared Material field tokens to the site's ink and green for these forms only */
    --md-primary: var(--uchu-green-9);
    --md-surface-container-highest: var(--uchu-gray-1);
    --md-outline-variant: var(--uchu-yin-3);
    --md-on-surface-variant: var(--uchu-yin-7);
    /* Keep inputs at or above 1rem so iOS does not zoom on focus, but stop them growing past 1.125rem */
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --auth-danger: var(--uchu-red-7);

    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 28rem;
    margin-inline: auto;
    padding-block: var(--space-l) var(--space-2xl);
    font-family: var(--font-family-san-serif);
}

.auth-header {
    text-align: center;
    margin-block-end: var(--space-m);

    & h1 {
        margin: 0;
        font-size: var(--step-4);
        letter-spacing: -0.03em;
    }
}

.auth-eyebrow {
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-family-san-serif);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--uchu-green-9);
}

.auth-lede {
    margin: var(--space-xs) auto 0;
    max-inline-size: 30ch;
    font-size: var(--step--1);
    color: var(--color-muted);
}

.auth-card {
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m-l);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-block-start: 4px solid var(--color-primary);
    border-radius: 0.75rem;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.04),
        0 12px 32px -12px rgb(0 0 0 / 0.18);
}

.auth-field {
    display: grid;
    gap: var(--space-3xs);

    & .md3-field {
        margin: 0;
    }

    & .md3-field:has(.input-validation-error) {
        --md-primary: var(--auth-danger);

        & .md-line {
            block-size: var(--indicator-active);
            background: var(--auth-danger);
        }
    }
}

.auth-hint {
    margin: 0;
    padding-inline: var(--gap);
    font-size: var(--step--2);
    color: var(--color-muted);
}

.auth .field-validation-error {
    font-size: var(--step--2);
    color: var(--auth-danger);
    padding-inline: var(--gap);
}

.auth-alert {
    padding: var(--space-xs) var(--space-s);
    border-inline-start: 4px solid var(--auth-danger);
    border-radius: 0.375rem;
    background: color-mix(in oklch, var(--uchu-red-1) 45%, white);
    color: var(--uchu-red-9);
    font-size: var(--step--1);

    &.validation-summary-valid {
        display: none;
    }

    & ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Identity can report several problems at once (e.g. password rules) */
    & li + li {
        margin-block-start: var(--space-3xs);
    }
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    justify-self: start;
    font-size: var(--step--1);
    color: var(--color-foreground);
    cursor: pointer;

    & input {
        inline-size: 1.125rem;
        block-size: 1.125rem;
        margin: 0;
        accent-color: var(--uchu-green-9);
        cursor: pointer;
    }
}

.auth-submit {
    justify-content: center;
    inline-size: 100%;
    margin-block-start: var(--space-2xs);
    font-size: var(--step-0);
}

.auth-switch {
    margin: var(--space-m) 0 0;
    text-align: center;
    font-family: var(--font-family-san-serif);
    font-size: var(--step--1);
    color: var(--color-muted);

    & a {
        font-weight: 600;
    }
}