/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.stack
   Version: 3.1.0 | Genesis-Final • Vertical Rhythm Atom
   Classification: Layout Atom | Flow Coordinator | Token-Aware
   Maintainer: DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */
@layer components.ui.stack {

  /* ─── Root Stack Container ───────────────────────────────────── */
  .ui-stack[data-mod="ui_stack"] {
    display: flex;
    flex-direction: column;
    gap: var(--ui-stack-gap, 1rem);
    align-items: var(--ui-stack-align, stretch);
    justify-content: var(--ui-stack-justify, start);
    position: relative;
    background: var(--ui-stack-bg, transparent);
    color: var(--ui-stack-fg, inherit);
    width: 100%;
    box-sizing: border-box;
    isolation: isolate;
  }

  /* ─── Bleed Mode (edge overlap) ───────────────────────────────── */
  .ui-stack[data-bleed="true"] {
    margin-top: calc(var(--ui-stack-gap, 1rem) * -1);
  }

  /* ─── Divider-Enabled Mode ────────────────────────────────────── */
  .ui-stack[data-mod="ui_stack"][data-divider="1"] > * + * {
    border-top: 1px solid var(--ui-stack-divider-color, rgba(0,0,0,0.1));
    padding-top: calc(var(--ui-stack-gap, 1rem) / 2);
  }

  /* ─── Debug Visualization (diagnostics only) ──────────────────── */
  .ui-stack[data-mod="ui_stack"][data-debug="true"] {
    outline: 1px dashed rgba(255, 0, 0, 0.35);
    outline-offset: 2px;
  }

  /* ─── Theme-Aware Color Tokens (optional) ─────────────────────── */
  [data-theme="dark"] .ui-stack[data-mod="ui_stack"][data-divider="1"] > * + * {
    border-top-color: var(--ui-stack-divider-color-dark, rgba(255,255,255,0.15));
  }

  /* ─── Internal Safety (no margin collapse, allow alignment) ──── */
  .ui-stack[data-mod="ui_stack"] > * {
    margin-block-start: 0;
    margin-block-end: 0;
    width: auto;       /* override .ui-section width:100% so align-items works */
    min-width: 0;      /* prevent flex overflow */
  }

  /* ─── Optional Diagnostic Label (off by default) ──────────────── */
  /* .ui-stack[data-mod="ui_stack"]::before {
       content: "ui.stack active";
       position: absolute;
       top: 0.25rem;
       right: 0.5rem;
       font-size: 10px;
       opacity: 0.4;
       color: #999;
       pointer-events: none;
     } */
}