/*
 * The screens that stop somebody: an error, a refusal, a form the server would not take.
 *
 * One layout for all three. They used to be three: a table with a 180 pixel icon in one cell, an
 * alert box floated against a date in italic maroon, and a page of English prose about setting
 * ASPNETCORE_ENVIRONMENT. Whatever went wrong, the person reading this wanted to do something and
 * now cannot, so the page says what happened, in their own language, and gives them the one thing
 * that will get them moving again.
 *
 * Colours are the shared status palette, so a refusal here is the same red as a refusal anywhere.
 */
.status-page {
    display: flex;
    justify-content: center;
    padding: 6vh 16px 24px;
}

.status-page-card {
    width: 100%;
    max-width: 640px;
    background: var(--s-card-bg);
    border: 1px solid var(--s-card-border);
    border-radius: 12px;
    box-shadow: var(--s-card-shadow);
    padding: 32px;
}

.status-page-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.status-page-badge.is-bad {
    background: var(--status-bad-soft);
    color: var(--status-bad);
}

.status-page-badge.is-warn {
    background: var(--status-warn-soft);
    color: var(--status-warn);
}

.status-page-badge.is-info {
    background: var(--status-info-soft);
    color: var(--status-info);
}

.status-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--s-card-title);
    margin: 0 0 8px;
}

.status-page-message {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--bs-body-color);
    margin: 0;
}

/* What the server actually said, kept apart from the sentence that explains it: a validation
   message or a request id is something to copy into a mail, not something to read as prose. */
.status-page-detail {
    margin-top: 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--status-bad);
    background: var(--status-bad-soft);
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.status-page-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Who was looking and when. Small, last, and there because it is the first thing anybody asks for
   when the page is sent on to somebody who has to work out what happened. */
.status-page-footer {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--s-card-border);
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575px) {
    .status-page {
        padding: 3vh 12px 16px;
    }

    .status-page-card {
        padding: 22px;
    }

    .status-page-actions .btn {
        width: 100%;
    }
}