/* Utility pages — error, not-found, access denied. */

.utility-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - var(--public-header-height));
    padding: var(--public-stack-lg) var(--public-gutter-page);
    font-family: var(--public-font-family);
    background: var(--public-background);
}

.utility-page__inner {
    width: 100%;
    max-width: 28rem;
    text-align: center;
}

.utility-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--public-stack-md);
    border-radius: var(--public-radius-full);
    background: var(--public-primary-fixed);
    color: var(--public-primary-interactive);
}

.utility-page__title {
    margin: 0 0 var(--public-stack-sm);
    font-size: var(--public-headline-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--public-text-primary);
}

.utility-page__message {
    margin: 0 0 var(--public-stack-lg);
    font-size: var(--public-body-md);
    line-height: 1.6;
    color: var(--public-text-secondary);
}

.utility-page__meta {
    margin: 0 0 var(--public-stack-lg);
    font-size: var(--public-text-sm);
    color: var(--public-text-secondary);
}

.utility-page__meta code {
    font-family: 'Cascadia Code', Consolas, Courier, monospace;
    font-size: var(--public-text-xs);
    color: var(--public-on-primary-fixed);
    background: var(--public-primary-fixed);
    border-radius: var(--public-radius-sm);
    padding: 2px 6px;
}

.utility-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--public-stack-sm);
    justify-content: center;
}

.utility-page__image {
    max-width: 20rem;
    width: 100%;
    margin-bottom: var(--public-stack-lg);
}