@layer lu-layout {
  /* ── LuStack ────────────────────────────────────────────────────────────── */
  .lu-stack              { display: flex; padding: var(--lu-space-4); }
  .lu-stack--vertical    { flex-direction: column; }
  .lu-stack--horizontal  { flex-direction: row; }
  /* DEPRECATED: Use LuContainer instead */
  .lu-stack--container   {
    flex-direction: column; width: 100%; max-width: 48rem; margin-inline: auto;
    min-height: 100%; gap: var(--lu-space-10); padding: var(--lu-space-8) var(--lu-space-10);
  }

  /* ── LuContainer ──────────────────────────────────────────────────────────── */
  .lu-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lu-space-6);   /* 1.5rem gutter on all sizes */
  }
  /* Size variants — max-width tokens */
  .lu-container--sm   { max-width: 40rem;  }   /* 640px  — tight prose / modals */
  .lu-container--md   { max-width: 56rem;  }   /* 896px  — medium content */
  .lu-container--lg   { max-width: 72rem;  }   /* 1152px — documentation default */
  .lu-container--xl   { max-width: 88rem;  }   /* 1408px — wide dashboard */
  .lu-container--fluid{ max-width: 100%;   }   /* no constraint */

  /* Responsive gutter tightening on small viewports */
  @media (max-width: 640px) {
    .lu-container { padding-inline: var(--lu-space-4); }
  }

  /* ── LuDock ─────────────────────────────────────────────────────────────── */
  .lu-dock              { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; }
  .lu-dock--horizontal  { flex-direction: row; }
  .lu-dock-item         { flex-shrink: 0; }
  .lu-dock-item--fill   { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
  .lu-dock-item--left   { flex-shrink: 0; height: 100%; }
  .lu-dock-item--right  { flex-shrink: 0; height: 100%; }
  .lu-dock-item--top    { flex-shrink: 0; width: 100%; }
  .lu-dock-item--bottom { flex-shrink: 0; width: 100%; }
  /* Internal pane wrappers generated by LuDock's render function */
  .lu-dock__pane        { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
  .lu-dock__pane--row   { flex-direction: row; }
  .lu-dock__pane--col   { flex-direction: column; }

  /* ── LuFill / LuFixed ───────────────────────────────────────────────────── */
  .lu-fill  { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
  .lu-fixed { flex-shrink: 0; }

  /* ── LuScroll ───────────────────────────────────────────────────────────── */
  .lu-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;  /* critical: allows scroll within flex column */
  }
  .lu-scroll--horizontal { overflow-x: auto; overflow-y: visible; flex: 1; min-width: 0; }

  /* ── LuGrid ─────────────────────────────────────────────────────────────── */
  .lu-grid { display: grid; padding: var(--lu-space-4); }
  .lu-grid--responsive-3 { grid-template-columns: repeat(1, 1fr); gap: var(--lu-space-8); }
  @media (min-width: 768px) { .lu-grid--responsive-3 { grid-template-columns: repeat(3, 1fr); } }

  /* ── LuSplit ────────────────────────────────────────────────────────────── */
  .lu-split              { display: flex; width: 100%; height: 100%; overflow: hidden; }
  .lu-split--horizontal  { flex-direction: row; }
  .lu-split--vertical    { flex-direction: column; }
  .lu-split-pane         { position: relative; overflow: hidden; }
  .lu-split-resizer      { background: var(--lu-color-border); flex-shrink: 0; z-index: 10; position: relative; }
  .lu-split-resizer::after { content: ""; position: absolute; z-index: 11; }
  .lu-split-resizer:hover { background: var(--lu-color-primary); }
  .lu-split-resizer--horizontal { width: 1px; cursor: col-resize; }
  .lu-split-resizer--horizontal::after { top: 0; bottom: 0; left: -5px; right: -5px; cursor: col-resize; }
  .lu-split-resizer--vertical   { height: 1px; cursor: row-resize; }
  .lu-split-resizer--vertical::after   { left: 0; right: 0; top: -5px; bottom: -5px; cursor: row-resize; }

  /* ── LuOverlay ──────────────────────────────────────────────────────────── */
  .lu-overlay { position: absolute; inset: 0; z-index: var(--lu-z-overlay); }

  /* ── Border Collapse Utilities ──────────────────────────────────────────── */
  /* Add these classes to parent containers to prevent nested borders from doubling up */
  .lu-border-collapse-x > * + * { margin-left: -1px; }
  .lu-border-collapse-y > * + * { margin-top: -1px; }
}