/* Form errors on every page (GOV.UK pattern, #617 and #618).
   The summary is a dark box with a danger-coloured edge, not Bootstrap's light pink
   alert: its text is #ffe3e8 and its links #ff9db0 on the dark card (at least
   4.5:1). Each field's message sits under its label, above the field, in the
   danger colour (5.8:1 on the card); the field's red outline is in base-body.css. */
.form-error-summary {
    font-family: var(--font-body);
    background-color: rgba(255, 77, 109, 0.1);
    border: 1px solid rgba(255, 99, 132, 0.45);
    border-left: 4px solid var(--rave-danger);
    color: #ffe3e8;
}

.form-error-summary:focus {
    outline: 2px solid #ff9db0;
    outline-offset: 2px;
}

.form-error-summary .alert-link {
    color: #ff9db0;
}

/* Two classes, so a page's own heading rule (.lineup-add-card h3) never restyles it. */
.form-error-summary .form-error-summary-title {
    color: var(--rave-text-primary);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.form-error-summary-list {
    margin: 0;
    padding-left: 1.25rem;
}

.form-error-summary-list li {
    text-wrap: pretty;
}

.form-error-summary-list li + li {
    margin-top: 0.25rem;
}

.form-field-error {
    color: var(--rave-danger);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    text-wrap: pretty;
}