Fix folder stack overlap: pull slots, split tab/body sticky.

Sections overlap via negative margin; tabs stay in staggered rail;
active body z-index covers layers below as you scroll.

Co-authored-by: Cursor <cursoragent@cursor.com>

shared/stack-layout.css

@@ -1,12 +1,16 @@
-/* Sticky stack slots — import after stack-vars.css */
+/* Pull layers into one stack so sticky overlap works */
 .scroll-section {
   height: var(--stack-slot);
   position: relative;
 }
 
+.scroll-section + .scroll-section {
+  margin-top: calc(-1 * var(--stack-pull));
+}
+
 .scroll-section--final {
   height: var(--stack-slot-last);
-  min-height: 280px;
+  min-height: 260px;
 }
 
 .stack-stop,

shared/stack-scroll.js

@@ -5,12 +5,13 @@ export function initStackScroll(options = {}) {
     depthEl = document.getElementById('depth'),
     depthPrefix = 'L',
     tabSelector = '[data-goto], .jump',
+    bodySelector = '.body, .layer-inner, .frame-body, .unit-body',
   } = options;
 
   const sections = document.querySelectorAll(sectionSelector);
   if (!sections.length) return;
 
-  const mid = () => window.innerHeight * 0.4;
+  const mid = () => window.innerHeight * 0.42;
 
   function updateDepth() {
     let active = 0;
@@ -19,11 +20,19 @@ export function initStackScroll(options = {}) {
       if (r.top <= mid() && r.bottom > mid()) active = Number(sec.dataset.layer);
     });
     if (depthEl) depthEl.textContent = `${depthPrefix}${active}`;
+
     document.querySelectorAll('.stack-ruler button, .stack-ruler [data-goto], .tab-rail button, .tab[data-goto]').forEach((el) => {
       const n = el.dataset.layer ?? el.dataset.goto;
       if (n === undefined) return;
       el.classList.toggle('active', Number(n) === active);
     });
+
+    sections.forEach((sec) => {
+      const layer = Number(sec.dataset.layer);
+      const body = sec.querySelector(bodySelector);
+      if (!body) return;
+      body.style.zIndex = layer === active ? 100 : 10 + layer;
+    });
   }
 
   document.querySelectorAll(tabSelector).forEach((tab) => {
@@ -32,7 +41,7 @@ export function initStackScroll(options = {}) {
       const layer = tab.dataset.goto;
       const target = document.querySelector(`${sectionSelector}[data-layer="${layer}"]`);
       if (!target) return;
-      const y = target.offsetTop - 48;
+      const y = target.getBoundingClientRect().top + window.scrollY - 48;
       window.scrollTo({ top: Math.max(0, y), behavior: 'smooth' });
     });
   });

shared/stack-vars.css

@@ -1,8 +1,13 @@
-/* Shared stack scroll — one viewport per layer */
+/* Shared stack scroll — overlapping sticky layers */
 :root {
   --stack-nav: 2.5rem;
   --stack-stick: 3rem;
   --stack-step: 2.75rem;
+  --stack-tab-h: 2.25rem;
+  /* Height of tab rail (all L0–L6 tabs visible) */
+  --stack-reveal: calc(var(--stack-stick) + var(--stack-step) * 6 + var(--stack-tab-h));
   --stack-slot: 100vh;
-  --stack-slot-last: 55vh;
+  --stack-slot-last: 50vh;
+  --stack-pull: calc(var(--stack-slot) - var(--stack-reveal));
+  --stack-body-h: calc(100dvh - var(--stack-reveal) - 1rem);
 }