/* ============================================================
 * APEX SALES OS · APP LAYOUT
 * The page-frame that holds every authenticated screen.
 *
 * Token-driven. No hardcoded colors / spacings.
 * Loads AFTER 02-primitives.css; layout-scoped rules below
 * intentionally restate context-bar / crumb declarations so this
 * file is self-contained as the canonical layout sheet.
 *
 * Owner: Worker W2 (r4-002-layout-css).
 * ============================================================ */

.app-frame {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  /* IRON LAW: sizing comes from the flex chain in 01-base.css.
     min-height removed so this container never forces the body to
     scroll. height + overflow are inherited from .app-frame in
     01-base.css (flex: 1; min-height: 0; overflow: hidden). */
  width: 100%;
  /* NO-WHITE-SLICE: app-frame is a transparent layout container so
     the body / #app-root bg-warm is visible behind every page. Only
     .card / .page-card / .kpi-tile-style elements paint surface. */
  background: transparent;
}

.context-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px; color: var(--text-muted);
}
.crumb { color: var(--text-soft); }
.crumb-current { color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--text-faint); margin: 0 4px; }
.context-bar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Page section header (used inside pages) */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.section-head .meta { font-size: 12px; color: var(--text-muted); }

/* Grids that recur */
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 12px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 12px; }
.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 12px; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }

/* Card surface (lightweight wrapper used by pages) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.card-head h3 {
  margin: 0;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.card-head .meta { font-size: 11.5px; color: var(--text-muted); }

/* ============================================================
 * UNIVERSAL PAGE SHELL
 * Every authenticated page renders inside ONE centered card with
 * margin around it. The page body is never edge-to-edge.
 *
 * Outer:  .page-shell   warm-light background, padding around card
 * Inner:  .page-card    surface, rounded, 1px border, soft shadow
 *
 * Used by every paperwork, brand-mission, master-class, and
 * profile page. The only exception is the floor graduation
 * celebration which intentionally stays full-bleed.
 *
 * Owner: fix/uniform-page-shell — 2026-05-28
 * See: docs/UNIVERSAL-PAGE-SHELL.md
 * ============================================================ */
.page-shell {
  background: var(--bg-warm);
  padding: 16px 24px 24px;
  min-height: calc(100vh - 56px);          /* below 56px topbar */
  display: flex;
  flex-direction: column;
}
.page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px;
  gap: 14px;
  min-width: 0;
  overflow: hidden;                        /* clip inner shells to radius */
}

/* When an .app-frame page also opts into the universal shell, its
 * own max-width / margin centering should NOT fight the shell. The
 * shell already centers via the parent app-frame gutters. */
.app-frame > .page-shell {
  padding: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.app-frame > .page-shell > .page-card {
  padding: 16px 20px 20px;
}

/* Master-class roots (.page-mc-*-root) already paint .bg-warm at the
 * viewport level. When wrapped, the inner page-card uses surface tone
 * and keeps the calm centered layout the master-class CSS already
 * implements via its own .page-mc-* containers. The 1440x900 lock
 * comes from the flex chain in 01-base.css; do NOT restore min-height
 * here or the page will overflow the viewport. */
.page-mc-preflight-root > .page-shell,
.page-mc-exam-root      > .page-shell,
.page-mc-result-root    > .page-shell {
  padding: 16px 24px 24px;
}

/* Inside the card, the leading context-bar should not pad-top because
 * the card already has its own internal padding. */
.page-card > .context-bar:first-child {
  padding-top: 0;
}

/* ============================================================
 * UNIVERSAL INNER-SCROLL UTILITY
 *
 * The page viewport (body + #app-root + .page-shell + .page-card)
 * is locked at 1440x900 with overflow: hidden so the screen never
 * scrolls. Long content (forms, lists, doc previews, settings)
 * MUST scroll INTERNALLY within its own bounded region while the
 * page chrome (eyebrow + title + sub on top, foot CTAs on bottom)
 * stays anchored.
 *
 * Pages opt in by adding `.inner-scroll` to any middle region:
 *   - W-9 form body  → wraps sections 1+2+3
 *   - eSign agreement preview pane
 *   - direct deposit form body
 *   - settings list rows
 *   - module-runner long video/MC content
 *   - admin tables, ledger rows, message threads
 *
 * The OUTER container must be flex column (so the head + foot are
 * `flex-shrink: 0` and `.inner-scroll` is `flex: 1; min-height: 0`).
 *
 * Owner: fix/inner-scroll-sweep
 * ============================================================ */
.inner-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.inner-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.inner-scroll::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 4px;
}
.inner-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.inner-scroll::-webkit-scrollbar-track { background: transparent; }

/* Pages that adopt inner-scroll also need their chrome rows to NOT
 * compress under flex distribution. */
.inner-scroll-head,
.inner-scroll-foot {
  flex-shrink: 0;
}