structural mechanics

<div class="lay-stack-b">          <!-- container: no padding -->
  <div class="lay-stackgroup">     <!-- one sticky unit -->
    <div class="lay-stackhead">north</div>   <!-- leaf: owns the inset -->
    <div class="lay-stacksub">revenue</div>
  </div>
  <table class="lay-table">...</table>
</div>

/* globals.css, mechanics 1 */
.lay-stack-b    { flex flex-col h-72 overflow-auto rounded-xl bg-paper-quiet; } /* no p-4 */
.lay-stackgroup { sticky top-0 z-20 flex flex-col; }
.lay-stackhead  { bg-indigo-700 px-4 py-2 font-semibold; }  /* the leaf pads */
.lay-stacksub   { bg-zinc-800 px-4 py-1 text-ink-muted; }

<div class="lay-modal">    <!-- container: no padding, no gap -->
  <b class="lay-modtitle is-inset">invites</b>
  <ul class="lay-modlist">
    <li class="lay-modrow">dana · viewer</li>
  </ul>
  <div class="lay-modfoot-in">
    <Button variant="ghost" size="sm">cancel</Button>
    <Button size="sm">invite</Button>
  </div>
</div>

/* globals.css, mechanics 2 */
.lay-modal      { flex max-h-64 w-64 flex-col overflow-hidden rounded-xl; } /* no p-6 */
.lay-modlist    { flex min-h-0 flex-1 flex-col overflow-auto overscroll-contain; }
.lay-modrow     { px-6 py-1; }                      /* each row is a leaf */
.lay-modfoot-in { flex min-h-12 items-center justify-end gap-2
                  border-t border-rule after:w-3 after:content-['']; } /* band: gap + spacer, no button margins */

<div class="lay-page-b">        <!-- container: no padding -->
  <div class="lay-pagescroll">  <!-- min-h-0 flex child -->
    <div class="lay-pageitem-in">cart item 1</div>
  </div>
  <div class="lay-pagebar">     <!-- sits after the scroller -->
    <Button size="sm">checkout</Button>
  </div>
</div>

/* globals.css, mechanics 3 */
.lay-page-b      { flex h-72 flex-col overflow-hidden rounded-xl bg-paper-quiet; } /* no p-4 pb-20 */
.lay-pagescroll  { flex min-h-0 flex-1 flex-col overflow-auto; }
.lay-pageitem-in { shrink-0 px-4 py-2; }
.lay-pagebar     { flex min-h-14 items-center justify-end border-t bg-paper/90
                   after:w-4 after:content-['']; } /* no sticky bottom, no -mb */

<div class="lay-phone">          <!-- container: no pt/pb -->
  <div class="lay-phonehead">
    <span class="lay-safetop"></span>         <!-- spacer leaf -->
    <b class="lay-phoneheadtitle">wallet</b>
  </div>
  <div class="lay-phonetabs">
    <div class="lay-phonetabsrow">...</div>
    <span class="lay-safebottom"></span>      <!-- spacer leaf -->
  </div>
</div>

/* globals.css, mechanics 4 */
.lay-phone     { relative flex h-[420px] w-56 flex-col overflow-hidden; } /* no pt/pb guess */
.lay-safetop   { h-[max(env(safe-area-inset-top),var(--sat))]; }
.lay-safebottom{ h-[max(env(safe-area-inset-bottom),var(--sab))]; }

<div class="lay-reflow">         <!-- @container, no padding -->
  <aside class="lay-refdrawer" data-drawer>
    <span class="lay-refitem">dashboard</span>
  </aside>
  <div class="lay-refmain">
    <div class="lay-refmenurow">
      <Button variant="ghost" size="sm">menu</Button>
    </div>
    <table class="lay-reftable is-desktop">...</table>
    <div class="lay-refcards">...</div>
  </div>
</div>

/* globals.css, mechanics 5 */
.lay-reflow              { @container relative flex w-[820px] resize-x
                           overflow-hidden rounded-xl; }          /* no p-4 */
.lay-reftable.is-desktop { hidden @md:table; }  /* container query, not md: */
.lay-refdrawer           { absolute inset-y-0 @2xl:static @2xl:flex; }
.lay-refcards            { grid gap-px @md:hidden; }

<div class="lay-cqcard">      <!-- @container, no padding -->
  <div class="lay-cqrow">
    <span class="lay-cqmedia"></span>
    <span class="lay-cqtext is-center">
      <b class="lay-cqname">compact card</b>
      <span class="lay-cqmeta">resizes with its box</span>
    </span>
  </div>
</div>

/* globals.css, mechanics 6 */
.lay-cqcard  { @container min-w-48 w-[320px] max-w-full resize-x
               overflow-hidden rounded-xl; }          /* no p-4 */
.lay-cqrow   { flex flex-col @sm:flex-row; }
.lay-cqmedia { aspect-video bg-gradient @sm:aspect-square @sm:w-40; } /* no -mx -mt */
.lay-cqname  { px-4 pt-3; }
.lay-cqmeta  { px-4 pb-3 text-ink-muted; }

<div class="lay-zstage is-scale">  <!-- isolate: one local scale -->
  <div class="lay-zhead" data-z="head">
    <span class="lay-zlabel">app bar · z-10</span>
  </div>
  <div class="lay-zdrop" data-z="dropdown">...</div>
  <div class="lay-zmodal" data-z="modal">...</div>
  <div class="lay-ztoast" data-z="toast">...</div>
</div>

/* globals.css, mechanics 7 */
.lay-zstage.is-scale { isolate flex flex-col; }  /* caps the scale */
.lay-zhead  { sticky top-0 z-10; }
.lay-zdrop  { absolute left-4 top-12 z-20; }
.lay-zmodal { absolute inset-8 z-30 shadow-2xl; }
.lay-ztoast { absolute bottom-4 right-4 z-40; }

<div class="lay-imgcard">   <!-- container: no padding -->
  <img class="lay-img" src="..." alt="">
  <p class="lay-imgcap">aspect-video reserves the box...</p>
</div>

/* globals.css, mechanics 8 */
.lay-imgcard { flex flex-col overflow-hidden rounded-xl bg-paper-quiet; } /* no p-4 */
.lay-img     { aspect-video w-full object-cover; } /* not pt-[56.25%] + absolute */
.lay-imgcap  { px-4 py-3; }