/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.canvas
   Version: 3.1.0 | Genesis-Final • Wrapping-Aware • Theme-Safe
   Classification: Core UI | Structural Root | Frameless Baseline
   Maintainer: DΛREΛKT_ CORE UI TEAM
   Host: Global (RuthBowers / Dareakt / Diagnostics / Dev)
   ──────────────────────────────────────────────────────────────── */
@layer ui.canvas {

  /* ── Root Canvas (Frameless Structural Container) ───────────── */
  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"] {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: block;
    isolation: isolate;

    /* Token-aware visual styling */
    padding-inline: var(--edge, 32px);
    background: var(--bg, var(--site-bg, transparent));
    color: var(--fg, var(--site-fg, inherit));

    /* Responsive + scroll control */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
  }

  /* ── Centered & Max Width Variant ───────────────────────────── */
  .ui-canvas[data-module="ui.canvas"][data-center="1"],
  .ui-canvas[data-mod="ui_canvas"][data-center="1"] {
    margin-inline: auto;
    max-width: var(--max, 14400px);
  }

  /* ── Vertical stacking rhythm (using --stack token) ─────────── */
  /* Default: no auto stacking (content-driven layout) */
  .ui-canvas[data-module="ui.canvas"] > * + *,
  .ui-canvas[data-mod="ui_canvas"] > * + * {
    margin-top: 0;
  }

  /* ── Layout Intent: Editorial pages opt in to stacking ───────── */
  body[data-layout="viewport"] .ui-canvas[data-module="ui.canvas"] > * + *,
  body[data-layout="viewport"] .ui-canvas[data-mod="ui_canvas"] > * + * {
    margin-top: var(--stack, 24px);
  }

  /* ── Scroll toggle (false = lock body scroll) ───────────────── */
  .ui-canvas[data-module="ui.canvas"][data-scroll="0"],
  .ui-canvas[data-mod="ui_canvas"][data-scroll="0"] {
    overflow-y: hidden !important;
  }

  /* ── Theme + Scope Awareness ────────────────────────────────── */
  .ui-canvas[data-module="ui.canvas"][data-theme="dark"],
  .ui-canvas[data-mod="ui_canvas"][data-theme="dark"] {
    background: var(--site-bg-dark, #111);
    color: var(--site-fg-dark, #eee);
  }
  .ui-canvas[data-module="ui.canvas"][data-theme="light"],
  .ui-canvas[data-mod="ui_canvas"][data-theme="light"] {
    background: var(--site-bg-light, #fff);
    color: var(--site-fg-light, #111);
  }

  /* ── Internal Helpers (isolate nested atoms) ────────────────── */
  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"]
  :where(.ui-navbar__inner,
         .ui-section-top__inner,
         .ui-copy__wrap,
         .ui-list__wrap,
         .ui-grid__wrap) {
    padding: 0;
    margin: 0;
  }

  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"]
  :where(.ui-grid, .ui-grid__wrap, .ui-grid__cell) {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* ── Responsive Safety (Stack fallback below 900px) ─────────── */
  @media (max-width: 900px) {
    .ui-canvas[data-module="ui.canvas"],
    .ui-canvas[data-mod="ui_canvas"] {
      padding-inline: var(--edge-mobile, 16px);
    }
  }

  /* ── Debug Overlay (opt-in via data-debug="1") ──────────────── */
  .ui-canvas[data-module="ui.canvas"][data-debug="1"]::before,
  .ui-canvas[data-mod="ui_canvas"][data-debug="1"]::before {
    content: "ui.canvas active";
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 10px;
    color: var(--fg, #999);
    opacity: 0.4;
    pointer-events: none;
    z-index: 9999;
  }

  /* ── Shadow Isolation Gate (no bleed outside canvas) ───────── */
  .ui-canvas[data-module="ui.canvas"] *,
  .ui-canvas[data-mod="ui_canvas"] * {
    box-sizing: inherit;
  }

  /* ── Layout Intent: Full-height only when explicitly requested ───────── */
  body[data-layout="viewport"] .ui-canvas[data-module="ui.canvas"],
  body[data-layout="viewport"] .ui-canvas[data-mod="ui_canvas"] {
    min-height: 100vh;
    height: 100%;
  }
}