/* ============================================================
 * APEX CLIENT CRM (James Demo) · LAYOUT · CANONICAL
 *
 * Structural layout skeletons for all 48 client screens.
 * This file owns FRAMES and GRIDS only. It places things on
 * the page. It does NOT skin them (colors, borders, chips, orb,
 * hold-btn, sparklines all live in 02-primitives.css), and it
 * does NOT animate them (04-transitions.css). Every color comes
 * from a 00-tokens var, never a hardcode.
 *
 * Mirrors the locked Apex Sales OS layouts:
 *   - .frame-wrap     1440x900 no-scroll device frame (donor: call.html)
 *   - .stage          dark video stage grid           (donor: call.html)
 *   - .dd-shell       two-column deal/desk shell       (donor: payment.html)
 *   - .page           cockpit page stage grid          (donor: home.html)
 *   - .war-room       3-up war-room hero grid          (donor: home.html)
 *   - .cockpit-kpi-row 4-up KPI strip                  (donor: home.html)
 *   - no-scroll cockpit grids (lists scroll INTERNALLY only)
 *
 * BRAND LAWS (do not break):
 *   - No-scroll: the 1440x900 frame clips. Overflow goes to tabs,
 *     drawers, modals, or INTERNAL list scroll, never page scroll.
 *   - Cool-spectrum / purple only. No red. No traffic-light green.
 *   - Light is default, dark theme is the video stage only.
 *
 * Owner: Terminal 0 (shared-foundation / 03-layout). READ-ONLY to
 * every other terminal. Do not modify outside this file.
 * ============================================================ */

/* ============================================================
 * 1 · APP ROOT — center the device frame, hard no-scroll page
 * ============================================================ */
.app-root,
.stage-host{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--bg-warm);
  overflow:hidden;                 /* page never scrolls */
}

/* ============================================================
 * 2 · FRAME-WRAP — the locked 1440x900 device frame
 * Everything in a screen lives inside one .frame-wrap. It clips,
 * so no content can ever push the page past 900px tall.
 * ============================================================ */
.frame-wrap{
  position:relative;
  width:1440px;
  height:900px;
  overflow:hidden;                 /* the no-scroll law, enforced here */
  border-radius:var(--radius-xl);
  border:1px solid var(--border-strong);
  background:var(--bg);
  box-shadow:var(--shadow-lg);
  display:grid;
  /* topbar (fixed) · context-bar (optional) · body (fills) · done-strip (optional) */
  grid-template-rows:auto auto minmax(0,1fr) auto;
}
/* the dark video stage paints the frame obsidian via the dark theme tokens */
.frame-wrap[data-surface="stage"]{ background:var(--bg); }

/* Direct frame children never overflow their grid track. */
.frame-wrap > *{ min-height:0; min-width:0; }

/* The body region of a frame fills the remaining height and clips. */
.frame-body{
  position:relative;
  min-height:0;
  overflow:hidden;                 /* children scroll internally if needed */
  display:flex;
  flex-direction:column;
}

/* When a topbar/context-bar/done-strip is absent, the empty auto track
 * collapses to 0 automatically, so the body still fills correctly. */

/* ============================================================
 * 3 · PAGE — the cockpit stage grid (donor: home.html <main class="page">)
 * A padded scroll-clipped column that stacks war-room hero, KPI strip,
 * and the main work grid. Internal sections scroll, the page does not.
 * ============================================================ */
.page{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px 22px 20px;
}
.page > .scroll-region{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;                 /* the ONLY allowed scroll, and it is internal */
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ============================================================
 * 4 · WAR-ROOM HERO GRID — 3 equal columns split by hairlines
 * (donor: home.html .war-room). Structure only, skin in 02-primitives.
 * ============================================================ */
.war-room{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
  align-items:stretch;
  gap:0;
}
.war-room > .wr-divider{ width:1px; background:var(--border); }
.war-room > .wr-col{ min-width:0; padding:0 20px; }
.war-room > .wr-col:first-child{ padding-left:4px; }
.war-room > .wr-col:last-child{ padding-right:4px; }

/* ============================================================
 * 5 · COCKPIT KPI STRIP — 4-up headline metrics
 * (donor: home.html .cockpit-kpi-row). Layout only.
 * ============================================================ */
.cockpit-kpi-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.cockpit-kpi{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cockpit-kpi-head{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
}
.cockpit-kpi-vals{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.cockpit-kpi-delta{ display:flex; align-items:center; gap:4px; }

/* Generic responsive auto-fit KPI grid for cockpits that vary count. */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

/* ============================================================
 * 6 · DD-SHELL — two-column deal/desk shell
 * (donor: payment.html <main class="dd-shell">).
 * LEFT main work column, RIGHT fixed-ish rail. Both clip, rail
 * scrolls internally. Collapses to one column under 1080px.
 * ============================================================ */
.dd-shell{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;
  padding:18px 22px 20px;
  align-items:stretch;
}
.dd-main{
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.dd-main > .scroll-region{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.dd-rail,
.dd-side{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* Variant: narrow rail on the LEFT (wizard summary, then work on right). */
.dd-shell[data-rail="left"]{ grid-template-columns:320px minmax(0,1fr); }
.dd-shell[data-rail="left"] .dd-rail{ order:-1; }

/* ============================================================
 * 7 · STAGE — the dark video stage grid (donor: call.html)
 * Big stage on the left, .side-rail on the right (chat / pushed
 * content). Both clip. Rail scrolls internally. Under a slim
 * frame the rail can collapse via data-rail="hidden".
 * ============================================================ */
.stage-shell{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:0;
}
.stage{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.stage-shell[data-rail="hidden"]{ grid-template-columns:minmax(0,1fr); }
.stage-shell[data-rail="hidden"] .side-rail{ display:none; }

/* the side-rail holds chat + closer-pushed payloads; it clips and
 * scrolls internally so the stage height is never disturbed. */
.side-rail{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto; /* head · scrollable feed · composer */
}
.side-rail > .rail-feed{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* The REC badge sits top-left of the stage (skinned in 02-primitives). */
.stage > .stage-rec{ position:absolute; top:16px; left:16px; z-index:3; }
/* Stage controls dock bottom-center. */
.stage > .stage-controls{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:12px;
}

/* ============================================================
 * 8 · WIZARD STAGE — one-action-at-a-time client flows
 * (sign-in, waiting-room, onboarding, identity). A single centered
 * wizard-card on a calm field. Card is skinned in 02-primitives;
 * here we just center it and cap its width so it never scrolls.
 * ============================================================ */
.wizard-stage{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:24px;
}
.wizard-col{
  width:100%;
  max-width:560px;
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:0;
}
.wizard-col > .wizard-card{
  min-height:0;
  display:flex;
  flex-direction:column;
}
/* the card body scrolls internally if a step is unusually tall. */
.wizard-card > .wizard-body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Split wizard: media / proof on the left, the step on the right. */
.wizard-stage[data-split="1"]{ place-items:stretch; padding:0; }
.wizard-split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  height:100%;
  min-height:0;
}
.wizard-split > .ws-media{ position:relative; min-width:0; overflow:hidden; }
.wizard-split > .ws-form{
  min-width:0; min-height:0; overflow:hidden;
  display:grid; place-items:center; padding:32px;
}

/* ============================================================
 * 9 · CONTENT GRIDS — brand-missions hub, content engine, schedule
 * Card galleries that fit the frame. They wrap, and the WHOLE grid
 * lives inside a .scroll-region so only the list scrolls.
 * ============================================================ */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.card-grid--wide{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.card-grid--tight{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

/* Two-pane hub: left nav/list rail, right detail. Both clip. */
.hub-shell{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:0;
}
.hub-shell > .hub-nav{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-right:1px solid var(--border);
}
.hub-shell > .hub-detail{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.hub-shell > .hub-detail > .scroll-region{
  min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
}

/* ============================================================
 * 10 · LIST / TABLE GRIDS — schedule rows, mission rows, ledger
 * (donor: home.html 70px 1fr 130px 110px 110px row template).
 * The header and body share one column template via CSS vars so
 * cells align. The body is the only thing that scrolls.
 * ============================================================ */
.row-grid{
  --cols:70px minmax(0,1fr) 130px 110px 110px;
}
.row-grid .row-head,
.row-grid .row{
  display:grid;
  grid-template-columns:var(--cols);
  gap:10px;
  align-items:center;
}
.row-grid .row-body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* ============================================================
 * 11 · CHROME ANCHORS — topbar / context-bar / progress-strip /
 * done-strip live in the frame grid auto-rows. They are skinned in
 * 02-primitives.css; here we only guarantee they sit in the frame
 * and stay above the body. The frame grid (section 2) already slots
 * them, so these just pin z-order and prevent shrink.
 * ============================================================ */
.frame-wrap > .topbar,
.frame-wrap > .context-bar,
.frame-wrap > .progress-strip,
.frame-wrap > .done-strip{
  position:relative;
  z-index:2;
  flex-shrink:0;
}

/* A drawer is an off-canvas panel that slides in over the frame body.
 * Layout only: pin it to the right edge, full body height, clip it.
 * The slide animation lives in 04-transitions, the scrim/skin in
 * 02-primitives. */
.frame-body > .drawer{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(440px,86%);
  z-index:6;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.frame-body > .drawer > .drawer-body{
  min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
}
.frame-body > .drawer-scrim{
  position:absolute; inset:0; z-index:5;
}

/* Modals center over the whole frame. */
.frame-wrap > .modal-host{
  position:absolute; inset:0; z-index:10;
  display:grid; place-items:center; padding:32px;
}
.frame-wrap > .modal-host > .modal-card{
  max-width:min(560px,90%);
  max-height:86%;
  display:flex; flex-direction:column; min-height:0;
}
.frame-wrap > .modal-host > .modal-card > .modal-body{
  min-height:0; overflow-y:auto; overscroll-behavior:contain;
}

/* ============================================================
 * 12 · UTILITY LAYOUT HELPERS (shared, token-clean)
 * ============================================================ */
.l-row{ display:flex; align-items:center; gap:10px; }
.l-row--between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.l-col{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.l-center{ display:grid; place-items:center; }
.l-fill{ flex:1 1 auto; min-width:0; min-height:0; }
.l-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.l-spacer{ flex:1 1 auto; }
.l-scroll{ min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.l-clip{ overflow:hidden; min-width:0; min-height:0; }
.l-hidden{ display:none !important; }

/* ============================================================
 * 13 · RESPONSIVE COLLAPSE — the demo runs at 1440x900, but if the
 * frame is scaled down in a smaller viewport, two-column shells
 * fold to one column so nothing clips its own content out of view.
 * Internal scroll still does the work, never the page.
 * ============================================================ */
@media (max-width:1180px){
  .dd-shell{ grid-template-columns:minmax(0,1fr); }
  .dd-shell[data-rail="left"]{ grid-template-columns:minmax(0,1fr); }
  .dd-shell .dd-rail{ order:0; }
  .stage-shell{ grid-template-columns:minmax(0,1fr); }
  .stage-shell .side-rail{ display:none; }
  .hub-shell{ grid-template-columns:minmax(0,1fr); }
  .hub-shell > .hub-nav{ display:none; }
  .wizard-split{ grid-template-columns:minmax(0,1fr); }
  .wizard-split > .ws-media{ display:none; }
}
@media (max-width:760px){
  .war-room{ grid-template-columns:minmax(0,1fr); }
  .war-room > .wr-divider{ display:none; }
  .cockpit-kpi-row{ grid-template-columns:repeat(2,1fr); }
}