@import url('tokens.css');

/* ============================================================================
   NotFound page (the Router's not-found surface). Renders inside the AppShell content
   region: fill the region and centre the shared .ui-empty-state so the message sits in the
   middle of the LIVE frame — the rail + status bar around it are the reassurance the station
   is still running, not a web error page. The glyph, body caption and spacing reuse the shared
   .ui-empty-state; only the fill wrapper and the focal title are page-specific.
   ============================================================================ */
.nf-page {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
}

.nf-title {
    margin: 0;
    font-size: var(--font-size-page-title-dense);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;   /* display tracking (docs/brand/brand.md) */
    color: var(--color-text);
    text-wrap: balance;
}