/* ============================================================================
   pages.css — shared logged-in page grammar (loaded AFTER dashboard.css)
   ----------------------------------------------------------------------------
   The redesign's page-level layer: the shared <PageHeader> block plus a couple
   of light layout helpers so the app's inner pages read as one product with the
   dashboard "Nu" zone. Fully tokenised (zero raw hex) — every value resolves
   from tokens.css, so this sheet introduces no new colour and cannot drift from
   the dashboard header it echoes.

   Cascade note: linked after dashboard.css in index.html. The .page-header here
   is the page analogue of dashboard.css's .dashboard-pheader (same title weight,
   spacing rhythm, and hairline), reused across Pages/* via the PageHeader
   component. Light theme only (dark is out of redesign scope).
   ============================================================================ */

/* --- Page shell: full-bleed wrapper (design §3.1 — the app canvas is full-width;
   MainLayout .main-content already supplies the 34px page padding). No outer cap,
   so every inner page fills the surface like the dashboard "Nu" zone. Long-form
   reading columns set their OWN inner max-width for legibility. ----------------- */
.page-shell {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Neutralise Bootstrap's .container width-cap + gutter when it wraps a page-shell
   (several pages use `class="container page-shell"`); the shell is full-bleed. */
.container.page-shell,
.page-shell.container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* --- Shared page header (PageHeader.razor) ---------------------------------- */
/* Echoes .dashboard-pheader: title left, muted subtitle under it, page actions
   right-aligned. No closing hairline (design feedback 2026-08, app-wide): the
   header opens straight onto the page's first structural beat. */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.page-header-text {
    min-width: 0;
}

.page-header-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}

.page-header-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(22, 40, 63, 0.5);
    margin: var(--space-1) 0 0;
}

/* Actions slot: right-aligned page-level affordances (buttons, links). */
.page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
}