@layer components {
    .login {
        flex: 1;
        padding-block: var(--space-l) var(--space-xl);

        & .login__body {
            --flow-space: var(--space-s);
            max-inline-size: 26rem;
        }

        & .login__title {
            font-size: var(--size-step-3);
        }

        & .login__lead {
            color: var(--color-text-muted);
        }

        & .login__form,
        & .login__step {
            --flow-space: var(--space-s);
        }

        & .login__field {
            display: grid;
            gap: var(--space-3xs);
        }

        & .login__label {
            font-weight: 600;
        }

        & .login__input {
            inline-size: 100%;
            min-block-size: var(--tap-min);
            padding: var(--space-2xs) var(--space-xs);
            border: 1px solid var(--color-border-strong);
            border-radius: var(--radius-none);
            background: var(--color-surface-raised);
            color: var(--color-text);
            /* 16px at least, or iOS zooms the page on focus. */
            font: inherit;
            font-size: max(1rem, var(--size-step-0));

            &:focus-visible {
                outline: 2px solid var(--color-accent);
                outline-offset: 0;
                border-color: var(--color-accent);
            }

            &[aria-invalid="true"] {
                border-color: var(--color-danger);
            }
        }

        /* Six digits, spaced, centred: read back at a glance against the mail. */
        & .login__code {
            font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
            font-size: var(--size-step-2);
            letter-spacing: 0.4em;
            text-align: center;
        }

        & .login__privacy {
            font-size: var(--size-step--1);

            & a {
                color: var(--color-text-muted);
            }
        }

        & .login__hint {
            color: var(--color-text-muted);
            font-size: var(--size-step--1);
        }

        /* A message is always a sentence, never colour alone. */
        & .login__notice {
            padding: var(--space-2xs) var(--space-xs);
            border-inline-start: 3px solid var(--color-border-accent);
            background: var(--color-surface-raised);

            &[data-tone="error"] {
                border-inline-start-color: var(--color-danger);
            }
        }

        & .login__submit {
            inline-size: 100%;
        }

        & .login__secondary {
            --cluster-gap: var(--space-2xs);

            & .button {
                flex: 1 1 10rem;
                padding-inline: var(--space-xs);
                font-size: var(--size-step--1);
            }

            & .button:disabled {
                cursor: default;
                opacity: 0.7;
            }
        }
    }
}