/**
 * Error page - <x-error-page> on layouts/error.blade.php.
 *
 * Screens: every HTTP error view (resources/views/errors/4xx, 5xx).
 *
 * A standalone page outside the application layout: an error may be rendered
 * before a user or a context is known, so it depends on nothing but the design
 * system's stylesheets. Scoped under .view-shell for the --c-* tokens. A client
 * error (4xx) carries the accent, a server error (5xx) the danger colour.
 */

.view-shell.error-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
    background: var(--c-bg);
}

.view-shell .error-shell__logo img {
    display: block;
    max-height: 56px;
    max-width: 220px;
}

.view-shell .error-shell__footer {
    font-size: .75rem;
    color: var(--c-text-soft);
}

.view-shell .error-card {
    --error-tone: var(--c-accent);
    --error-tone-soft: var(--c-accent-soft);
    width: 100%;
    max-width: 560px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--error-tone);
    border-radius: var(--mdm-radius-lg);
    padding: 2.25rem 2rem 1.5rem;
    text-align: center;
}

.view-shell .error-card.is-server-error {
    --error-tone: var(--c-danger);
    --error-tone-soft: #fef2f2;
}

.view-shell .error-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--error-tone-soft);
    color: var(--error-tone);
}

.view-shell .error-card__code {
    display: inline-block;
    padding: .15rem .65rem;
    margin-bottom: .75rem;
    border-radius: var(--mdm-radius-pill);
    background: var(--error-tone-soft);
    color: var(--error-tone);
    font-family: var(--mdm-font-mono);
    font-size: .8rem;
    font-weight: 600;
}

.view-shell .error-card__title {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text);
}

.view-shell .error-card__description {
    margin: 0 auto;
    max-width: 440px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--c-text-mut);
}

.view-shell .error-card__detail {
    margin-top: 1.5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--error-tone);
    border-radius: var(--mdm-radius-md);
    background: var(--c-bg);
    text-align: left;
}

.view-shell .error-card__detail-label {
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-text-mut);
}

.view-shell .error-card__detail-text {
    margin: 0;
    font-size: .9rem;
    color: var(--c-text);
    overflow-wrap: anywhere;
}

.view-shell .error-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.75rem;
}

.view-shell .error-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.5rem;
    margin: 1.75rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border);
    font-size: .75rem;
}

.view-shell .error-card__meta dt {
    display: inline;
    font-weight: 400;
    color: var(--c-text-soft);
}

.view-shell .error-card__meta dt::after {
    content: ":";
}

.view-shell .error-card__meta dd {
    display: inline;
    margin: 0 0 0 .25rem;
    font-family: var(--mdm-font-mono);
    color: var(--c-text-mut);
    overflow-wrap: anywhere;
}