.auth {
    max-width: 28rem;
    margin: 0 auto;
}

.auth > * + * {
    margin-top: var(--space-4);
}

.auth__intro,
.auth__notice {
    color: var(--text-muted);
    max-width: 60ch;
}

.auth__notice {
    color: var(--text-primary);
    border-left: var(--border-strong-width) solid var(--success);
    padding-left: var(--space-3);
}

.auth__form {
    background: var(--bg-surface);
    border: var(--border-hairline-width) solid var(--border-hairline);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}

.auth__form .field label {
    display: block;
}

.auth__form input {
    display: block;
    width: 100%;
    min-height: var(--touch-target);
}

.auth__form input[readonly] {
    background: var(--bg-surface);
    color: var(--text-muted);
}

.field__hint {
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: var(--type-small);
}

.field__error {
    margin-bottom: var(--space-1);
    color: var(--danger);
    font-weight: 500;
}

.field__error + input,
input[aria-invalid="true"] {
    border-color: var(--danger);
}

.auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.auth__actions .button {
    min-height: var(--touch-target);
}

.auth__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
}

.error-summary__title {
    font-size: var(--type-h3);
    line-height: var(--leading-h3);
}

.error-summary__list {
    margin-top: var(--space-2);
    padding-left: var(--space-5);
}

.error-summary__list li + li {
    margin-top: var(--space-1);
}

.error-summary__list a {
    color: var(--danger);
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
}