/*
 * Page — the content-page frame every view renders inside
 * .shell__content: a header (title, subtitle, actions), an optional
 * .subnav, then a .page__grid of cards and/or .page__section stacks.
 *
 *   <section class="page" data-page="tasks">
 *     <header class="page__header">
 *       <div class="page__heading">
 *         <h1 class="page__title">Tasks</h1>
 *         <p class="page__subtitle">12 open · 3 running</p>
 *       </div>
 *       <div class="page__actions">…buttons…</div>
 *     </header>
 *     <nav class="subnav">…</nav>
 *     <div class="page__grid">…cards…</div>
 *   </section>
 *
 * The grid itself is defined once in layouts/_grid.css (shared with the
 * legacy .grid--cards name); this file owns the header and stacks.
 */
.page { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-4);
    flex-wrap: wrap;
}
.page__heading { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.page__title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.page__subtitle { color: var(--color-text-muted); font-size: var(--fs-sm); }
/* FlowRow: actions wrap onto further lines on narrow screens rather
   than squeezing the title. */
.page__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-left: auto;
}
@media (max-width: 640px) {
    .page__actions { width: 100%; margin-left: 0; }
}
/* Vertical stack of cards / tables that should not flow into the grid
   (a single wide table, a form). */
.page__section { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.page__section--span { grid-column: 1 / -1; }