/* WebToTell focused authentication pages */

.auth-card h1 {
    max-width: 18ch;
    margin-bottom: var(--space-3);
}

.auth-introduction {
    max-width: 58ch;
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
    line-height: 1.7;
}

.auth-form {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.form-field {
    min-width: 0;
}

.form-help,
.auth-privacy-note {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.auth-privacy-note {
    margin-bottom: 0;
    text-align: center;
}

.field-error-list {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding-left: 1.25rem;
    color: #9f1d1d;
    font-size: 0.92rem;
    line-height: 1.45;
}

input[aria-invalid='true'] {
    border-color: #b42318;
}

input[aria-invalid='true']:focus {
    border-color: #b42318;
    outline-color: rgba(180, 35, 24, 0.18);
}

.notice {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    line-height: 1.6;
}

.notice p:last-child {
    margin-bottom: 0;
}

.notice--error {
    border-color: #e5a8a4;
    background: #fff4f2;
    color: #7a271a;
}

.notice--success {
    border-color: #8bc5a6;
    background: #f0faf4;
    color: var(--color-success);
}

.notice--warning {
    border-color: #e3c885;
    background: #fff9e8;
    color: #6f4d00;
}

.auth-result {
    text-align: left;
}

.auth-result .notice {
    margin-bottom: 0;
}

.form-field--checkbox {
    display: grid;
    gap: var(--space-1);
}

.auth-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: fit-content;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.45;
    cursor: pointer;
}

.auth-checkbox input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.16rem;
    flex: 0 0 auto;
}

.auth-checkbox__help {
    margin-left: calc(1.1rem + var(--space-2));
}

.auth-form__actions {
    margin-top: var(--space-2);
}

@media (max-width: 520px) {
    .auth-shell {
        align-items: start;
        padding: var(--space-4);
    }

    .auth-card {
        padding: var(--space-5);
    }

    .auth-header {
        gap: var(--space-3);
    }
}