/* Shared presentation for the public service-status pages:
   Components/Pages/Public/Error.razor and Components/Pages/Public/NotFound.razor.

   Lives in features/ rather than a page-scoped .razor.css because it is one
   visual pattern shared by two sibling pages, and because .service-status-header
   is applied through UiPageHeader's `Class` parameter — an element rendered
   inside another component's template, which Blazor scope isolation must not be
   used on blindly (see the layering policy at the top of core/ui-system.css).

   This file is linked eagerly from App.razor instead of being injected by the
   route-based loader wwwroot/js/siteNavigation.js: both pages render through
   MainLayout at /error, /not-found, and any other unmatched route, i.e. paths
   featureStylesForPath() never covers. Keep that <link> in sync with this file;
   CoreStylesheetPolicyTests guards the pairing. */

.service-status-page {
    width: min(760px, 100%);
    margin: 0 auto;
}

.service-status-card {
    overflow: hidden;
}

/* Applied to UiCard's own .card-header element via HeaderClass, so it replaces
   Bootstrap's card-header padding and background rather than sitting inside them.
   The UiPageHeader rendered in that slot drops its standalone bottom margin. */
.service-status-header {
    padding: clamp(18px, 4vw, 28px) clamp(18px, 5vw, 32px);
    border-bottom: 1px solid var(--sp-color-border);
    background: var(--sp-color-surface-raised);
}

.service-status-header .ui-page-header {
    margin-bottom: 0;
}

/* The workspace shell hides page descriptions because its header repeats them; the
   service-status card is the only explanation of a 404 or error, so it keeps its own. */
.workspace-body .service-status-header .ui-page-header .page-subtitle {
    display: block;
}

/* The description is body copy under the heading, not a second heading. */
.service-status-header .ui-page-header .page-subtitle {
    margin-top: var(--sp-space-2);
    font-weight: 400;
}

.service-status-body {
    padding: clamp(18px, 4vw, 28px) clamp(18px, 5vw, 32px);
}

.service-status-body p {
    margin: 0 0 var(--sp-space-3);
    color: var(--sp-color-ink-muted);
    line-height: 1.55;
}

.service-status-reference {
    padding: 12px 14px;
    border: 1px solid var(--sp-color-danger-border);
    border-radius: var(--sp-radius-md);
    background: var(--sp-color-danger-soft);
    color: var(--sp-color-danger-text) !important;
}

.service-status-reference code {
    overflow-wrap: anywhere;
    color: inherit;
    font-weight: 800;
}

.service-status-support {
    font-size: var(--sp-font-size-sm);
}

.service-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-2);
    margin-top: var(--sp-space-5);
}

@media (max-width: 520px) {
    .service-status-actions > * {
        flex: 1 1 100%;
        text-align: center;
    }
}