/* ============================================================
   CCD BRB Design System — Layout Primitives
   ------------------------------------------------------------
   Shared frame classes consumed by every CCD·BRB tool.
   Depends on tokens.css (must be imported first).

   Why these exist: tokens alone don't prevent drift. Without
   shared classes, each tool reinvents its own .container/.grid
   and the suite quietly diverges (see onboarding-radius-drift.md).
   These primitives are the mechanism that keeps tools coherent.

   What's locked here:
     .l-page       page wrapper, paper-tint canvas
     .l-header     utility top bar (52px), sticky
     .l-container  max-width + gutter, the alignment rail
     .l-section    vertical rhythm between content blocks
     .l-grid       canonical 12-col grid

   Per-tool freedom: what fills .l-section (hero, KPIs,
   split pane). Whether to show subnav, sidebar, hero.
   ============================================================ */

.l-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper-tint);
  color: var(--ink);
  font-family: var(--sans);
}

.l-header {
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.l-container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.l-main {
  flex: 1;
  padding: var(--s-7) 0 var(--s-9);
}

/* Section rhythm: 48px breath between top-level content blocks */
.l-section + .l-section {
  margin-top: var(--s-7);
}

/* Canonical 12-col grid · 24px gap.
   Use grid-column: span N on children. Common spans:
     12 · full-width row (table, banner)
      8 · primary content (chart, main panel)
      6 · half (paired cards)
      4 · third (feature card, sidebar)
      3 · quarter (KPI in a row of 4) */
.l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5);
}

/* Responsive collapse — shared rule, not per-tool.
   Tools that need finer control can override these spans locally. */
@media (max-width: 960px) {
  .l-grid > [class*="span-3"],
  .l-grid > [class*="span-4"] { grid-column: span 6; }
  .l-grid > [class*="span-8"] { grid-column: span 12; }
}
@media (max-width: 540px) {
  .l-grid > * { grid-column: span 12; }
}