@usableapp/cardds 0.1.0

package/css/sheet.css

@@ -0,0 +1,295 @@
+/* ============================================================
+   cardds/sheet.css — sheet single: one card as a bottom sheet.
+   Three states: .sheet--peek · .sheet--half · .sheet--full
+
+   A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
+   (stack.css): it is ALWAYS the full height of the box that holds it —
+   set once by inset: 0, never written again, never transitioned — and
+   a state is nothing but how far that full card has slid up. Peek is
+   a full sheet that slid down until only its handle and title show;
+   half is one that slid down by half of itself; full is one that has
+   not slid at all. The box clips whatever slid below its bottom edge,
+   so a sheet at any height is still a card: rounded top, a straight
+   cut at the box's edge, its content scrolling inside.
+
+   So translate is the only animated property. Nothing here toggles
+   height, display or z-index for a state — every past bug in the
+   stack's animation came from exactly that, and the sheet inherits
+   the rule.
+
+   Two boxes hold sheets, and the state classes mean the same in both:
+   - .step (step.css) — an app screen where the member acts: the
+     reading card behind, the sheet in front, .action-bar outside.
+   - .sheet-stage (below) — a page-level overlay stage: a sheet over
+     a map, the dim page sheet, the ask drawer (layover.css).
+
+   This is the SINGLE sheet: one sheet the member acts in, whatever it
+   holds — a short entry in a step, a place on a map, a payment on a dim
+   page. Many sheets stacked as the app's menu are the other system,
+   .sheet-stack (stack.css): the same material, its own class and file.
+
+   <article class="card sheet sheet--half" data-sheet-states="peek half full">
+     <button class="sheet__handle" type="button" aria-label="…"></button>
+     <div class="card__head"><h2 class="t-h2">…</h2>…</div>
+     <div class="sheet__body">…controls, or small content cards…</div>
+   </article>
+   Written top-down: the handle, the title row (what peek shows), then
+   the body. The handle and the head stay where they are at every
+   state; the body is what scrolls — a sheet is a card whose head is
+   pinned, not a scrolling column with a title somewhere in it.
+   cardds.js adds the handle's click / drag / keyboard and the focus
+   raise; without it every state still renders.
+   ============================================================ */
+
+.sheet {
+  --_handle: var(--sp-1);
+  /* the strip a peeked sheet shows: the card's own top padding, the handle,
+     the gap, one title row (--tap — the head rule below makes every head at
+     least that tall) and the gap under it, so the cut lands exactly where
+     the first control starts and nothing of it leaks through. Published
+     (and registered in tokens.css) so a sheet whose head is taller can
+     retune it: .my-sheet { --sheet-peek: … } */
+  --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
+  --sheet-half: 0.5;              /* a share of the sheet's own height */
+  /* the sheet's own height, seen from inside it: the box it slides in is the
+     size container (.step, .sheet-stage), so 100cqh is that box, less what
+     the sheet gives up at its top (--_top) and bottom (--_lift). The sheet
+     cannot be its own container — cq units measure a content box, and the
+     sheet's is its border box less the card's padding. */
+  --_box: calc(100cqh - var(--_top, 0rem) - var(--_lift, 0rem));
+  /* the resting offset of the current state, said twice: as a share of the
+     sheet's own height for its translate (--_y), and as a length for the
+     body's scroll-padding (--_cover) — a percentage down there would be of
+     the body, not of the sheet. Half by default. */
+  --_y: calc(var(--sheet-half) * 100%);
+  --_cover: calc(var(--sheet-half) * var(--_box));
+
+  position: absolute;
+  inset: 0;
+  top: var(--_top, 0);            /* a stage keeps its top bar's line free — see .sheet-stage */
+  translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: cardds.js, only while the handle is held */
+  transition: translate var(--motion-sheet) ease;
+
+  /* handle · head · body: a column, the body takes what is left and scrolls
+     (below) — so the handle and the head never move, whatever the content */
+  display: flex;
+  flex-direction: column;
+  overflow: clip;
+  border-radius: var(--r-card) var(--r-card) 0 0;
+  border-bottom: 0;
+  box-shadow: var(--shadow-sheet);
+}
+.sheet--full { --_y: 0%; --_cover: 0rem; }
+.sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
+.sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
+.sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
+
+/* the body — everything under the head, the one thing in a sheet that
+   scrolls. Its scrollport runs to the card's side and bottom edges (reading
+   --card-pad, the way .bleed does) so content scrolls clear of the edge
+   rather than stopping inside the padding, and a .bleed strip inside it
+   still reaches the edges. The card's own grid rhythm continues inside. */
+.sheet__body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  gap: var(--card-gap);
+  align-content: start;
+  margin-inline: calc(-1 * var(--card-pad));
+  padding-inline: var(--card-pad);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* the part of the sheet that slid under the box's bottom edge cannot be
+     seen, and the scroller has to know that: scroll-padding is exactly "the
+     obscured part of my scrollport", so a focused field, scrollIntoView and
+     anchor navigation all land a control in the visible part, never under
+     the cut. A length from the box's container units (--_box), since the
+     cut is a share of the SHEET's height, not of the body's. */
+  scroll-padding-bottom: var(--_cover);
+}
+.sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
+.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: var(--card-pad); }
+
+/* grab handle — first child of the sheet. Drawn as a small bar, but it is
+   the thumb's grab area for the whole strip above the title: a pseudo widens
+   its hit box to --tap tall and wider than the bar without changing the
+   picture. touch-action: none hands a touch drag to cardds.js instead of to
+   the scroller behind it. */
+.sheet__handle {
+  position: relative;
+  border: 0;
+  color: inherit; /* a <button> has its own UA colour; the bar is the card's ink */
+  background: currentColor;
+  opacity: 0.3;
+  width: var(--tap-sm);
+  height: var(--_handle);
+  border-radius: var(--r-chip);
+  margin: 0 auto;
+  padding: 0;
+  touch-action: none;
+  cursor: grab;
+}
+.sheet__handle::before {
+  content: "";
+  position: absolute;
+  inset: calc((var(--_handle) - var(--tap)) / 2) calc(-1 * var(--sp-8));
+}
+.sheet__handle:focus-visible { outline: var(--focus); outline-offset: var(--sp-2); }
+.sheet.is-dragging .sheet__handle { cursor: grabbing; }
+
+/* the head — a title row at least --tap tall, either kind, so the peek strip
+   (--sheet-peek) is the same for every sheet:
+   - in a step it is a plain card head (card.css): the heading left, the
+     contextual thing at the far right, the two-line budget and the squeeze
+   - .sheet__head is the stage sheet's three-column head: a round button,
+     the centred title and sub, a round button
+   - a label .row with its .check / .toggle may be the head when the sheet's
+     whole ask is that switch: peek shows it (a row is --tap tall plus its own
+     padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
+.sheet > .card__head { min-height: var(--tap); }
+.sheet__head {
+  display: grid;
+  grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
+  align-items: center;
+  gap: var(--sp-3);
+  min-height: var(--tap);
+  text-align: center;
+}
+.sheet__title { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; }
+.sheet__sub { font: var(--type-caption); color: var(--card-muted); }
+
+/* ============================================================
+   .sheet-stage — the overlay stage: a page-height box the sheet
+   slides in, over a map, a page, previous cards. It is its own
+   100dvh page, never a section of a scrolling screen — an app
+   screen where the member acts is a .step (step.css).
+   ============================================================ */
+.sheet-stage {
+  /* the centre of the band a half sheet leaves open — from the bar's line to the sheet's
+     top edge at half ((100% + --_top) / 2): where a hero or a map's ring sits */
+  --_band-centre: calc((100% + 3 * var(--_top, 0rem)) / 4);
+  --_top: var(--header-h); /* full stops UNDER the line a top bar takes rather than
+    covering it — the same reserve .screen makes for a fixed .appbar — and
+    keeps its corners; the sheet reads it as its top edge */
+  position: relative;
+  width: 100%; /* also as a grid/flex child: children are absolute, so it must size itself */
+  height: 100dvh;
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  overflow: clip; /* not hidden: a clipped box is not a scroll container, so revealing a focused field never shifts the stage */
+  container-type: size; /* the sheet's body reads this box's height as 100cqh (--_box above) */
+  background: var(--surface);
+}
+/* on an app screen the stage is the page: it takes the screen's inset back (edge to
+   edge, like a step) and, after a fixed .appbar, the room the screen reserved for
+   that bar — the stage keeps the bar's line free itself (--_top), so the reserve
+   would be paid twice and the page would scroll by it */
+.screen > .sheet-stage { margin-inline: calc(-1 * var(--screen-pad)); width: auto; } /* auto: 100% would keep the inset width */
+.appbar + .sheet-stage { margin-top: calc(-1 * (var(--header-h) + var(--header-gap, 0rem))); }
+.sheet-stage__bg { position: absolute; inset: 0; } /* map / previous cards behind */
+/* the hero: ONE thing shown in the band a half sheet leaves open (a postcard being made,
+   a photo being chosen) — centred in that band like a map's ring, on the screen's inset;
+   the sheet slides over it at full */
+.sheet-stage__hero {
+  position: absolute;
+  inset-inline: var(--screen-pad);
+  top: var(--_band-centre);
+  translate: 0 -50%;
+  /* no z-index: it follows the background in DOM order and the sheet, later, covers it at full */
+}
+
+/* ---- map: the box a map engine draws in, behind a stage sheet ----
+   <div class="sheet-stage__bg"><div class="map"><div>…the engine's canvas…</div>
+     <span class="map__ring" role="img" aria-label="ย่านของคุณโดยประมาณ"></span>
+     <span class="map__hint">ลากแผนที่ให้วงครอบย่านที่คุณอยู่</span>
+     <span class="map__credit">© OpenStreetMap</span></div></div>
+   The first child is the engine's mount (the app hands it to Leaflet or the
+   like); it fills the box. Before tiles arrive — or offline — the box shows the
+   wireframe's street pattern, so a map is never a hole. The ring marks the
+   rough area the member is choosing: fixed at the box's centre, so dragging
+   the map underneath is what moves it (the centre IS the choice), never a
+   pin to place. The hint rides at the top, under the bar's line. */
+.map {
+  position: absolute;
+  inset: 0;
+  isolation: isolate; /* the ring and the hint stack inside the map only — a sheet over the map covers them */
+  color: var(--on-surface);
+  background:
+    repeating-linear-gradient(75deg,  transparent 0 5.5rem,  var(--hairline) 5.5rem 6.25rem),
+    repeating-linear-gradient(-18deg, transparent 0 8.75rem, var(--ink-tint) 8.75rem 9.25rem),
+    var(--card-2-bg);
+}
+.map > :first-child { position: absolute; inset: 0; z-index: 0; isolation: isolate; } /* its own stacking context: an engine's layered panes stay under the ring */
+.sheet-stage__bg .map > :first-child { background: transparent; } /* an engine's own grey ground would hide the pattern while tiles load */
+.map__ring {
+  position: absolute;
+  left: 50%;
+  /* centred in the band a half sheet leaves open (the stage's --_band-centre) — the
+     member sees the whole ring while the sheet asks; the engine reads the point under it */
+  top: var(--_band-centre);
+  width: var(--map-ring);
+  height: var(--map-ring);
+  translate: -50% -50%;
+  border-radius: 50%;
+  border: var(--border-w) solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  box-shadow: var(--shadow-float);
+  pointer-events: none;
+  z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
+}
+.map__credit { /* the tile provider's credit — required by OSM; a caption, not the engine's own control */
+  position: absolute;
+  right: var(--sp-2);
+  bottom: var(--sp-2);
+  padding: var(--sp-0) var(--sp-2);
+  border-radius: var(--r-chip);
+  background: color-mix(in srgb, var(--surface) 80%, transparent);
+  color: var(--on-surface-muted);
+  font: var(--type-caption);
+  pointer-events: none;
+  z-index: 1;
+}
+.map__hint {
+  position: absolute;
+  top: calc(var(--_top, 0rem) + var(--sp-3));
+  left: 50%;
+  translate: -50% 0;
+  max-width: calc(100% - 2 * var(--sp-4));
+  padding: var(--sp-2) var(--sp-4);
+  border-radius: var(--r-chip);
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+  font: var(--type-label);
+  text-align: center;
+  box-shadow: var(--shadow-float);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* raised: the sheet floats above a footnote strip on the scrim. Its bottom
+   edge shows, so it gets its corners and border back; full still stops at
+   the top bar's line, because the top edge never moved. */
+.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--r-card); border-bottom: var(--border-w) solid var(--card-border); }
+.sheet-stage__foot {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--tap-lg);
+  margin: 0;
+  display: grid;
+  place-items: center;
+  font: var(--type-caption);
+  color: var(--card-3-ink);
+  z-index: 2;
+}
+
+/* dim stage: blur + darken whatever sits behind the sheet */
+.sheet-stage--dim .sheet-stage__bg { filter: blur(var(--sp-2)); }
+.sheet-stage--dim::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--scrim);
+  z-index: 1;
+}
+.sheet-stage--dim .sheet { z-index: 2; }

package/css/stack.css

@@ -0,0 +1,262 @@
+/* ============================================================
+   cardds/stack.css — .sheet-stack: the menu.
+   Sheets stacked in one column like paper, every one a main section
+   of the app, their heads peeking, the front one open. Tap a peeked
+   head and that sheet comes to the front; its back button returns it.
+
+   cardds has two sheet systems and one material:
+   - sheet single (sheet.css): ONE sheet the member acts in — a short
+     entry in front of a .step's card, or an overlay in a .sheet-stage.
+     Its state is how far it slid: peek / half / full.
+   - sheet stack (this file): MANY sheets, each a section, stacked at
+     the middle of the home screen. A peek is the strip the next sheet
+     does not cover; open is one sheet brought to the front.
+   A stacked sheet is written as a .card — the material — directly
+   inside .sheet-stack; .sheet stays the single sheet's class. This
+   component was first named "card stack": wrong, and retired — the
+   members are sheets and the stack is the menu, not a list of cards.
+
+   <div class="sheet-stack sheet-stack--tap">   (drop --tap for a static stack)
+     <article class="card card--2">
+       <div class="card__head">
+         <button class="icon-btn icon-btn--sm card__back" aria-label="Back">…</button>
+         <h2 class="t-h2 t-caps">Shopping</h2>
+         <span class="icon-row">…</span>              (optional trailing icons)
+       </div>
+       …the sheet's own content…
+     </article>
+     <article class="card">…</article>               (last = the front sheet)
+     <div class="sheet-stack__base">…</div>           (--closed only, optional: what the base shows above the peeks)
+   </div>
+   --closed (with --tap): nothing open on arrival — every sheet peeks at the
+   bottom, the headroom above is the base's (block below).
+   Direct children only, five at most (slots are :nth-child below):
+   first = the back of the stack, last = the front. README "Sheet stack
+   markup". cardds.js opens and closes a --tap stack; without it the
+   stack still renders, it just won't open.
+   ============================================================ */
+
+/* ---- the stack: cascading peek sheets; heads peek, the set bleeds to
+       the screen's bottom edge, so bottom corners are square ---- */
+/* step = card padding (20) + head (48) + 20 breathing below the title,
+   so every peeked strip shows the title with even space above and below */
+/* one track, exactly the stack's own height: an auto track would size itself
+   to the tallest sheet's CONTENT (a sheet's `height: 100%` is cyclic while the
+   track is being sized), so a long sheet grew the track past the screen and
+   every sheet's 100% then resolved against that — the bottom of every open
+   sheet sat below the screen, unreachable (timebank home, 2026-09-13). */
+.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: 5.5rem; }
+
+/* the stack breaks out of the screen inset, edge to edge, always: the peek
+   strips and the opened sheet span the screen's full width whatever the
+   viewport (it used to bleed only under a 27em media query — a stack in a
+   phone frame on a desktop kept the inset, and read as a narrower card;
+   Lh, 2026-09-11) */
+.sheet-stack { margin-inline: calc(-1 * var(--screen-pad)); }
+.sheet-stack > .card {
+  grid-area: 1 / 1; /* every card shares the stack's cell; later ones offset down */
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+  align-content: start;
+  align-self: start; /* own natural height (padding + head) by default */
+  --card-gap: var(--sp-5); /* head→content gap = the strip's 20px rhythm */
+  z-index: var(--level, 1); /* explicit paint order, 1 = back of the stack */
+}
+/* THE FRONT SHEET is the last .card, not the last child: a --closed stack
+   may carry a .sheet-stack__base after its sheets (below). Written once here
+   as "a card no card follows" so every rule about the front sheet agrees. */
+.sheet-stack > .card:not(:has(~ .card)) {
+  align-self: stretch; /* the front card fills the remaining stack height */
+}
+/* --_n: how many sheets the stack holds, read from the DOM by :has so the
+   closed geometry needs no script and no per-stack declaration */
+.sheet-stack { --_n: 1; }
+.sheet-stack:has(> .card:nth-child(2)) { --_n: 2; }
+.sheet-stack:has(> .card:nth-child(3)) { --_n: 3; }
+.sheet-stack:has(> .card:nth-child(4)) { --_n: 4; }
+.sheet-stack:has(> .card:nth-child(5)) { --_n: 5; }
+/* a card's place in the deck, declared here rather than measured in JS, so
+   a stack renders correctly — right offsets, right paint order — with no
+   script at all. --slot is that place in steps; the tap animation reads it
+   to know how far up to travel. Five is the practical peek depth. */
+.sheet-stack > .card:nth-child(1) { --slot: 0; --level: 1; }
+.sheet-stack > .card:nth-child(2) { --slot: 1; --level: 2; margin-top: var(--stack-step); }
+.sheet-stack > .card:nth-child(3) { --slot: 2; --level: 3; margin-top: calc(2 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(4) { --slot: 3; --level: 4; margin-top: calc(3 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(5) { --slot: 4; --level: 5; margin-top: calc(4 * var(--stack-step)); }
+
+/* stack headers: uniform — [back?] title left, icons right, one height,
+   same gap to content on every card */
+.sheet-stack > .card > .card__head {
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(--tap);
+}
+/* NOT a skeleton head: a peek is one line at its own size, and the display
+   stack deliberately runs a second line under the next card. So it opts out of
+   the whole skeleton-head treatment — budget, squeeze and clamp. cardds.js
+   skips the same cards. */
+.sheet-stack > .card > .card__head :is(h1, h2, h3) {
+  font-size: var(--fs-h1);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  margin-right: auto; /* pins the icon cluster right */
+  display: block;
+  -webkit-line-clamp: none;
+  overflow: visible;
+  overflow-wrap: normal;
+}
+
+/* display stack: the giant title IS the peek — line one shows, line two is
+   clipped by the next card (recents / library lists) */
+.sheet-stack--display { --stack-step: 6.5rem; }
+.sheet-stack--display > .card > .card__head { align-items: start; min-height: 0; }
+.sheet-stack--display > .card > .card__head :is(h1, h2, h3) {
+  font: var(--type-display);
+  letter-spacing: var(--track-display);
+  /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
+     measured from the card's top edge); line two runs under the next card */
+  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5));
+}
+/* fanned stack: a toggle opens the stack wider so every peek shows more */
+.sheet-stack--fanned { --stack-step: 9.5rem; }
+
+.sheet-stack > .card:has(~ .card) { cursor: pointer; }
+/* a peeked card in a plain stack hides its own body. A --tap stack does
+   NOT: there, every card is full height and full content always, and a
+   peek is simply the strip of it the next card doesn't cover — the way a
+   card in a real deck is never a shorter card, just a mostly hidden one. */
+.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.card__head) { display: none; }
+
+/* ============================================================
+   .sheet-stack--tap — tap a peeked sheet open; a back button returns it.
+
+   A sheet (a .card — the material, sheet.css's single sheet is the same
+   stuff) is rigid: it can move in, move out, or be covered — it can
+   never change shape. So every sheet here is the SAME full height,
+   always, set once and never touched again by anything. A "peek" is
+   not a short sheet; it's a full sheet the next one happens to cover,
+   showing only the strip above it, exactly like a sheet of paper part
+   way out of a real stack.
+
+   Because of that, the whole animation is one property: translate.
+   Nothing resizes, nothing re-stacks — z-index is the plain resting
+   --level order and is never touched, since the order already says
+   what has to happen. Cards after the tapped one sit IN FRONT of it,
+   so they're what's covering it, so they're what must leave. Cards
+   before it are already BEHIND it, so they need do nothing at all
+   except let themselves be covered as it rises over them.
+
+   .is-open   — the tapped card, moved up to the top of the stack. Its
+                own resting offset is margin-top (below); opening just
+                translates that offset back off, landing it flush at
+                the stack's top with its full height exactly filling
+                to the bottom.
+   .is-before — an earlier card, nudged one step down so it slips
+                under the next card's resting strip and is covered
+                there. Each carries its own --stagger (set in JS: 0
+                for the one nearest the tapped card, counting up
+                further back) so they tuck away, and later un-tuck,
+                one at a time.
+   .is-after  — a later card, moved out below, together, no stagger.
+   ============================================================ */
+.sheet-stack--tap > .card {
+  height: 100%; /* every card identical and full length, always — the one
+    size in this whole component, never toggled, never transitioned. At a
+    resting margin-top of n steps it simply overhangs the stack's bottom
+    by n steps (clipped by .screen--fill), so translating it up by exactly
+    that much lands it filling the stack precisely. */
+  overflow: clip;
+  transition: translate 0.35s ease; /* the only animated property here */
+  transition-delay: calc(var(--stagger, 0) * 70ms); /* 0 for everything
+    except a staggered is-before card, set in JS as it tucks or un-tucks */
+}
+.sheet-stack--tap > .card.is-open {
+  /* up by its own resting offset — pure movement, nothing resizes */
+  translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step));
+  cursor: default;
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+}
+/* the front sheet — the one open on arrival — never travels up (it is not
+   tappable), so its resting offset would leave its last n steps below the
+   screen forever, unreachable by any scroll (timebank home, 2026-09-13). It
+   alone is cut to the room it actually has, and it scrolls like an opened
+   sheet does. Every other sheet keeps the one full height. */
+.sheet-stack--tap:not(.sheet-stack--closed) > .card:not(:has(~ .card)) {
+  height: calc(100% - var(--slot, 0) * var(--stack-step));
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+}
+/* a scrolling sheet shows no scrollbar (a desktop with a mouse would paint one
+   down the card's edge — Lh 2026-09-15); it still scrolls, like the page itself */
+.sheet-stack--tap > .card { scrollbar-width: none; }
+.sheet-stack--tap > .card::-webkit-scrollbar { display: none; }
+.sheet-stack--tap > .card.is-before { translate: 0 var(--stack-step); }
+.sheet-stack--tap > .card.is-after { translate: 0 100vh; }
+
+/* ============================================================
+   .sheet-stack--closed — nothing open on arrival. Every sheet, the front
+   one too, is a peek at the BOTTOM of the stack; the room above the peeks
+   is the screen's base, free for whatever the screen wants there (a
+   picture, a greeting — timebank home, Lh 2026-09-15). Tap any head and
+   that sheet rises over the base to fill the stack; back drops it home.
+
+   Same rigid material, same one animated property. The sheets keep their
+   full height and their margin-top slots; what changes is where they REST:
+   translated down by the headroom, 100% − n × step — a card's 100% is the
+   stack's height, so the last peek strip ends exactly at the stack's
+   bottom edge. Open is translate to −slot × step, as before: the sheet
+   lands flush at the top. is-before tucks one step below its resting place.
+   ============================================================ */
+.sheet-stack--closed { --_headroom: calc(100% - var(--_n) * var(--stack-step)); }
+.sheet-stack--closed > .card { translate: 0 var(--_headroom); cursor: pointer; }
+.sheet-stack--closed > .card.is-before { translate: 0 calc(var(--_headroom) + var(--stack-step)); }
+.sheet-stack--closed > .card.is-open { translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step)); }
+.sheet-stack--closed > .card.is-after { translate: 0 100vh; }
+
+/* .sheet-stack__base — the base's content, in the headroom of a closed stack:
+   behind every sheet (level 0), the stack's inset put back (the stack bleeds),
+   exactly the headroom tall so it can lay its content out against the
+   peeks (align-content: end puts it right above them). Written LAST, after
+   the sheets, so the sheets' :nth-child slots stay what they are. */
+.sheet-stack > .sheet-stack__base {
+  grid-area: 1 / 1;
+  align-self: start;
+  z-index: 0;
+  height: var(--_headroom, 0px);
+  padding-inline: var(--screen-pad);
+  display: grid;
+  align-content: end;
+  gap: var(--card-gap, var(--sp-5));
+  overflow: clip;
+}
+
+/* back button: lives in a slot the header reserves once open, and DISSOLVES
+   into it — an opacity fade in place, never a slide in from the left (the
+   slide read as a second thing moving while the sheet itself moved; Lh,
+   2026-09-11). Only the sheet travels; the button appears where it is. */
+.sheet-stack--tap .card__head {
+  position: relative;
+  padding-left: 0;
+  transition: padding-left 0.35s ease;
+}
+.sheet-stack--tap > .card.is-open > .card__head {
+  padding-left: calc(var(--tap-sm) + var(--sp-3));
+}
+.sheet-stack--tap .card__back {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  translate: 0 -50%;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.35s ease, visibility 0.35s;
+}
+.sheet-stack--tap > .card.is-open .card__back {
+  opacity: 1;
+  visibility: visible;
+}

package/css/step.css

@@ -0,0 +1,71 @@
+/* ============================================================
+   cardds/step.css — .step: one screen, one task.
+   What the member reads (a card), what the member does when the
+   step asks for it (a sheet, sheet.css), and the screen's one
+   move (.action-bar, actions.css) OUTSIDE the step, below it.
+
+   <section class="step">
+     <article class="card step__card">…the words…</article>           ← first
+     <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
+   </section>
+   <div class="action-bar">…</div>
+
+   The step is the box the sheet slides in. It fills the screen
+   column between the top bar's reserve (.screen already pads for
+   .appbar) and the bar's, and clips at its own bottom edge — so the
+   sheet, at every state, stops above the bar and nothing ever sits
+   behind it. The card hugs its words and scrolls inside itself when
+   the column runs out. The sheet is full-width, like the bar: the
+   step bleeds to the screen's edges and the card takes the inset
+   back, so the card and the bar's buttons stand on the inset line
+   while the sheet runs edge to edge.
+
+   It needs a bounded column to fill: .screen--fill (base.css), or
+   an app section of a definite height. Reads → card only. Acts →
+   card + sheet. Never a hand-laid step, never a sheet height.
+   ============================================================ */
+.step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: clip;
+  margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge, reading the inset the screen publishes (as .sheet-stack does) */
+  container-type: size; /* the sheet's body reads the step's height as 100cqh — sheet.css, --_box.
+     (size containment also makes the step the containing block for fixed
+     descendants: the bar is outside the step, and a popover is in the top layer) */
+  /* --kb: the on-screen keyboard's height, published on :root by cardds.js
+     from the visual viewport — 0 without one, and on a platform that shrinks
+     the layout viewport itself. It grows the room below the step the same
+     way it lifts the bar (actions.css), so the control being typed into and
+     the bar both stay above the keyboard. */
+  margin-bottom: var(--kb, 0);
+}
+/* the step touches the top bar it follows, so that the sheet at full reaches
+   the bar's bottom edge and nothing else: the room the screen would have
+   left between them moves INSIDE the step, above the card (--_lead), where
+   the sheet can rise over it. After an in-flow .topbar that room is the
+   screen's gap; after a fixed .appbar it is the reserve's breathing — both
+   read from the tokens the screen publishes, never recomputed. A step that
+   follows anything else keeps the screen's gap and the sheet stops under
+   that thing. */
+.topbar + .step { margin-top: calc(-1 * var(--screen-gap)); --_lead: var(--screen-gap); }
+.appbar + .step { margin-top: calc(-1 * var(--header-gap)); --_lead: var(--screen-gap); }
+
+/* the bar's room — read from actions.css, never recomputed. Margin, not
+   padding, so the clip cuts at the box edge and nothing shows behind the
+   bar. Any parent that hosts the bar counts — <body>, an app shell, a demo
+   frame — the bar is fixed to the viewport wherever it sits. */
+:has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
+
+/* the reading card: a plain card with a flex rule — it hugs its content,
+   and when the column runs out (a short phone, large text) it shrinks and
+   scrolls inside itself instead of pushing the bar or the sheet */
+.step__card {
+  flex: 0 1 auto;
+  min-height: 0;
+  margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}