@usableapp/cardds 0.7.103 → 0.7.105

package/css/card.css

@@ -29,10 +29,10 @@
    card once `sent` and a `Card` with `leave` read the same two knobs; the time is --motion-sheet. `.card--leaver` is a card whose app may ask it
    to go (it holds the transition, so it comes back as it went); `.card--away` is one that has been asked. A knob of the time would read dead:
    the knob walk switches motion off */
-:is(.card--leaver, .post-desk__card) { transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease; }
-:is(.card--away, .post-desk--sent .post-desk__card) { --_y: calc(var(--leave-rise, 160%) * -1); rotate: var(--leave-turn, -5deg); }
+.card--leaver { transition: translate var(--motion-sheet) var(--ease), rotate var(--motion-sheet) var(--ease); }
+.card--away { --_y: calc(var(--leave-rise, 160%) * -1); rotate: var(--leave-turn, calc(var(--tilt-base) * -5)); }
 .card--away { translate: 0 var(--_y); }
-@media (prefers-reduced-motion: reduce) { :is(.card--leaver, .post-desk__card) { transition: none; } }
+@media (prefers-reduced-motion: reduce) { .card--leaver { transition: none; } }
 
 /* each tone is a fill and a side; its words and glyphs follow from the side (tokens.css) */
 .card--2 { --card-bg: var(--card-2-bg); --dark: var(--card-2-dark); }
@@ -49,18 +49,13 @@
    multi-line title can opt back out with .card__head--top. */
 .card__head {
   display: flex;
-  flex-wrap: wrap;               /* the caption takes a line of its own — no wrapper div */
+  flex-wrap: var(--card-head-wrap, wrap); /* the caption takes a line of its own — no wrapper div */
   align-items: center;
   justify-content: space-between;
   column-gap: var(--card-head-col-gap, var(--sp-3));
   row-gap: var(--card-head-row-gap, var(--sp-0));
+  min-height: var(--card-head-min-h, auto);
 }
-/* flat head markup (Lh 2026-09-16 — no <p>, no wrapper, only padding and gap tokens):
-   <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
-   The heading and the far-right thing share the first row; a caption sits on
-   a row below (order 1), whatever the DOM order — so an author writes the
-   words in reading order. */
-.card__head > :is(.t-caption, .t-body) { flex: 1 1 100%; order: 1; margin: 0; }
 .card__head--top { align-items: flex-start; }
 
 .card__media { border-radius: var(--card-media-radius, var(--r-media)); overflow: hidden; position: relative; } /* relative: corner badges */
@@ -80,12 +75,23 @@
 .card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
 
 /* Skeleton head — the heading in a card's OWN head, and only there.
-   The heading wraps freely: no line budget, no squeeze, no clamp (Lh
-   2026-09-16 — a height rule on words only distorts them; content that needs
-   more rows takes more rows). The group that holds heading ·
+   The heading wraps, no squeeze, up to three lines and cut there with an
+   ellipsis (Lh 2026-10-21: "มันควรจะ max สามบรรทัด" — a request's title ran to
+   four lines on a phone; reverses 2026-09-16's "no clamp"). The count is the knob
+   --card-head-title-lines. The group that holds heading ·
    caption is the head's own wrapping row (above) — no wrapper element, no
    height, only the row gap. */
-.card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
+.card__head :is(h1, h2, h3) {
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--card-head-title-lines, 3);
+  line-clamp: var(--card-head-title-lines, 3);
+  overflow: hidden;
+  padding-block-start: var(--_mark-room); /* a stacked Thai mark rises over the first line's box: room inside the clip, given back outside */
+  margin-block-start: calc(-1 * var(--_mark-room));
+  --_mark-room: 0.2em;
+}
 
 /* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
    caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
@@ -93,15 +99,13 @@
    <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><span class="stamp">…</span></div> */
 .card__head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
 .card__head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
-.card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
-.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 
 /* a JourneyBadge at the edge of the card's own first head (the date box in the top-left or top-right corner) keeps its corner concentric
    with the card's: the card's corner (--r-card) less the room the padding leaves round it. journey.css reads it behind the theme's --tile-badge-radius,
    so a theme that sets that knob still wins. */
 .card > .card__head:first-child > .tile-badge:is(:first-child, :last-child) { --_badge-radius: calc(var(--r-card) - var(--card-pad)); }
 
-/* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are white paper bands edge to
+/* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are paper bands edge to
    edge over the card's padding, no hairline; the middle between them keeps the card's tone, lightened (--card-middle-bg). The card
    clips, so the bands keep its corners. A two-faced card (below) carries the look on each face. */
 :is(.card--bands, .card--bands > .card__face) {
@@ -122,12 +126,14 @@
 
 /* ---- two faces: the WHOLE card turns (`Card back`, Lh 2026-10-19). The article is the turning box (.flip, base.css) and only that;
    each face is the card's paper — head · middle · foot — and both lie in one grid cell. The head and the foot are the same on both
-   faces; the middle is one fixed height (--card-middle-h, the theme's call), so the card never changes height as it turns. The hidden
+   faces; the card is as tall as its taller face and each face fills it, the middle taking what the head and the foot leave (2026-10-21,
+   timebank: a fixed middle left a short front a tall empty band), so the card never changes height as it turns; --card-middle-h fixes
+   the middle's height instead, the theme's call. The hidden
    face is inert. Each face holds an unseen turn button: the keyboard's way to turn it; its ring is drawn on the face. */
 .card--turns { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
 .card__face {
-  display: grid;
-  align-content: start;
+  display: flex;
+  flex-direction: column;
   gap: var(--card-gap);
   min-width: 0;
   padding: var(--card-pad);
@@ -138,13 +144,10 @@
   position: relative;
 }
 .card__face > * { min-width: 0; }
-.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, 18.75rem); overflow: hidden; }
-.card__turn { position: absolute; inset: 0; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
+.card__middle { flex: 1 0 auto; display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, auto); overflow: hidden; }
+.card__turn { position: absolute; inset: 0; width: var(--px); height: var(--px); padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
 .card__face:has(> .card__turn:focus-visible) { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
-/* a head's ChipRow takes a line of its own under the title: at most two lines of chips, a chip's words cut with an ellipsis */
-.card__head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * 1.5 + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
-.card__head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
-.card__head > .chip-row > .chip > .icon { display: inline-block; vertical-align: -0.15em; margin-inline-end: var(--chip-sm-gap, var(--sp-1)); }
+.card__head > .chip-row > .chip > .icon { --icon-display: inline-block; --icon-align: -0.15em; --icon-margin: 0 var(--chip-sm-gap, var(--sp-1)) 0 0; }
 
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
@@ -165,15 +168,15 @@
    nothing jumps. Chromium/Safari paint it through the ::-webkit-scrollbar
    parts; Firefox gets its thin bar in the same ink. */
 .bleed {
-  margin-inline: calc(-1 * var(--card-pad, 0px));
-  padding-inline: var(--card-pad, 0px);
+  margin-inline: calc(-1 * var(--card-pad, 0rem));
+  padding-inline: var(--card-pad, 0rem);
   padding-block-end: var(--sp-2);
-  scroll-padding-inline: var(--card-pad, 0px);
+  scroll-padding-inline: var(--card-pad, 0rem);
   flex-wrap: nowrap;
   overflow-x: auto;
 }
 .bleed::-webkit-scrollbar { height: var(--scroll-w); }
-.bleed::-webkit-scrollbar-track { background: transparent; margin-inline: var(--card-pad, 0px); }
+.bleed::-webkit-scrollbar-track { background: transparent; margin-inline: var(--card-pad, 0rem); }
 .bleed::-webkit-scrollbar-thumb { background: transparent; }
 .bleed:is(:hover, .is-scrolling)::-webkit-scrollbar-thumb { background: currentColor; }
 @supports not selector(::-webkit-scrollbar) {
@@ -187,29 +190,28 @@
 /* foot: the card's action buttons on one line. One button takes the width,
    up to four share it in even parts — so the gaps read even too — and from
    three on they drop their side padding so the labels keep the room. */
-.card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
-.card__foot > .btn { flex: 1 1 0; min-width: 0; }
-/* …unless the button says its own size: `Btn form` is as wide as its words in a foot too, centred (Lh 2026-10-10: one button filling
-   a card's foot read too big — which button a card wears is the project's choice, so the foot must not undo it) */
-.card__foot > .btn--form { flex: 0 1 auto; }
-.card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+.card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; color: var(--card-foot-ink, inherit); }
+.card__foot:has(> :nth-child(3)) > .btn { --btn-pad-x: var(--sp-2); }
 /* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
    whole short row of its own, centred — it never shares the buttons' line */
 .card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
 .card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
+/* round (CardFoot round): the foot holds a few round IconBtns, each its own size (they never share the line), as ONE group in the middle with
+   a gap that does not follow the card's width. The gap is wider than the Btns' (a miss between two round targets): --card-foot-gap sets it */
+.card__foot--round { justify-content: center; gap: var(--card-foot-gap, var(--sp-6)); }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {
   background:
-    linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
-    linear-gradient(to top left,  transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
+    linear-gradient(to top right, transparent calc(50% - var(--px)), currentColor calc(50% - var(--px)), currentColor calc(50% + var(--px)), transparent calc(50% + var(--px))),
+    linear-gradient(to top left,  transparent calc(50% - var(--px)), currentColor calc(50% - var(--px)), currentColor calc(50% + var(--px)), transparent calc(50% + var(--px)));
   border: var(--border-w) solid currentColor;
   border-radius: var(--r-media);
   opacity: var(--off);
-  min-height: 10rem;
+  min-height: calc(var(--tap-base) * 10 / 3);
 }
-.ph--sm { min-height: 7.5rem; }
-.ph--md { min-height: 9rem; }
+.ph--sm { min-height: calc(var(--tap-base) * 5 / 2); }
+.ph--md { min-height: calc(var(--tap-base) * 3); }
 /* ---- centred card: one thing to read, at the human centre of a fill screen ----
    (.screen__centre below is the same placement for a small GROUP of things)
    Where the centre of a phone IS, to the person holding it: the bottom fifth is
@@ -222,8 +224,7 @@
    The card hugs its words and keeps the screen's inset. It is capped so that it
    never reaches the title bar above it nor the bar's room below it — past that it
    scrolls inside — from the same tokens those bars reserve their room with. */
-.card--centre,
-.screen--fill > .screen__centre {
+.card--centre {
   position: absolute;
   top: var(--screen-centre);
   translate: 0 -50%;
@@ -240,38 +241,6 @@
 :is(.topbar, .appbar) ~ :is(.card--centre, .screen__centre) { --_lead: var(--header-h); }
 .card--centre { inset-inline: var(--screen-pad); }
 
-/* ---- centred block: the same place, for one thing to read that is not a
-   lone card — an empty state, a card with its quiet second button and the
-   pager under it. The block runs edge to
-   edge and keeps the screen's inset as padding, and
-   its children stack at the screen's own rhythm (Lh, 2026-09-11):
-   <div class="screen screen--fill"><header class="topbar">…</header>
-     <div class="screen__centre"><article class="card">…</article><button class="btn btn--quiet btn--block">…</button></div>
-   </div> */
-.screen__centre {
-  inset-inline: 0;
-  padding-inline: var(--screen-pad);
-  display: grid;
-  gap: var(--screen-gap);
-  align-content: start;
-}
-.screen__centre > * { min-width: 0; }
-
-/* ---- the same group on a plain .screen: centred when short, as long as it
-   likes when not (Lh, 2026-09-12) ----
-   The member sees one content area — whatever is between the top bar and the
-   bar — and reads it as a whole page: a short card sits at its middle, a long
-   one simply makes the page longer, runs under the bar (a sticky last row,
-   actions.css) and scrolls up like any page — nothing is capped, nothing
-   shrinks, no scroll box inside a box.
-   So on a .screen that is NOT --fill the group is in flow: the column is at
-   least one phone tall (step.css), the group takes the room after the top bar and
-   centres its children in it. The screen's own inset stays the inset.
-   <div class="screen"><header class="topbar">…</header>
-     <div class="screen__centre"><article class="card">…</article><div class="pager__at">…</div></div>
-   </div><div class="action-bar">…</div> */
-.screen:not(.screen--fill) > .screen__centre { flex: 1; padding-inline: 0; align-content: center; }
-
 /* ---- the card that changes slides: out one side, the next in from the other ----
    A .screen__centre group that walks pages (data-slide="next" | "back" on the
    root while a step changes) turns its card like a page: the old card slides
@@ -300,7 +269,7 @@
   user-select: none;   /* a walk is dragged, not read-and-selected — without this, a finger crossing the words highlights them instead of turning the page (timebank #59) */
   touch-action: pan-y;  /* leaves vertical scroll to the browser; horizontal is the app's own drag, never a native pan */
 }
-.pages > :is(.card, .page) { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+.pages > .card { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
 .pages > [inert] { visibility: hidden; }
 /* pages of WORDS (Lh, 2026-09-20): the same walk with .page pages, on the base — in a .step the
    .pages is the reading block (step.css), the round pager in the bar turns it, the same slideTo().
@@ -312,7 +281,7 @@
 ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
 ::view-transition-old(screen-out), ::view-transition-new(screen-in) { /* screen-*: slideScreen — one whole screen to the next (Lh 2026-09-25) */
   animation-duration: var(--motion-slide);
-  animation-timing-function: ease-out;
+  animation-timing-function: var(--ease-out);
   mix-blend-mode: normal;
 }
 :root[data-slide="next"]::view-transition-old(centre-card-out), :root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
@@ -327,9 +296,6 @@
   ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
   ::view-transition-old(screen-out), ::view-transition-new(screen-in) { animation: none; }
 }
-/* the page dots under the card sit centred under it — the indicator belongs
-   with the page that changes, never in the bar (Lh, 2026-09-12) */
-.screen__centre > .pager__at { justify-self: center; }
 
 /* compact card inside a card (nested note, promo) */
 .card--sm { padding: var(--card-sm-pad, var(--sp-4)); --card-gap: var(--sp-2); border-radius: var(--card-sm-radius, var(--r-card)); }
@@ -338,7 +304,7 @@
    stack.css; a stacked sheet is a plain .card, the material */
 
 /* trailing icon cluster in a card header */
-.icon-row { display: flex; align-items: center; gap: var(--icon-row-gap, var(--sp-4)); opacity: 0.85; }
+.icon-row { display: flex; align-items: center; gap: var(--icon-row-gap, var(--sp-4)); opacity: var(--fade-near); }
 
 /* ---- card list: rows, each row its own boundary ---- */
 .card-list { display: grid; gap: var(--card-list-gap, var(--sp-3)); }
@@ -374,7 +340,7 @@
 .card__remove {
   --_size: var(--card-remove-size, calc(var(--tap-base) / 2));
   position: relative;
-  z-index: 1;
+  z-index: var(--z-over);
   flex: none;
   align-self: flex-start;
   display: grid;
@@ -392,7 +358,7 @@
   cursor: pointer;
 }
 .card__remove::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: max(var(--tap-floor), var(--_size)); aspect-ratio: 1; border-radius: 50%; }
-.card__remove > .icon { width: 62%; height: 62%; }
+.card__remove > .icon { --icon-size: 62%; }
 .card__remove:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
 
 /* leading thumb/icon in a row */
@@ -435,7 +401,7 @@
 .feed-card__rest > :first-child { margin-top: var(--card-gap); }
 .feed-card--small .feed-card__rest { overflow: clip; visibility: hidden; }
 @media (prefers-reduced-motion: no-preference) {
-  .feed-card__more { transition: grid-template-rows var(--motion-sheet) ease; }
+  .feed-card__more { transition: grid-template-rows var(--motion-sheet) var(--ease); }
   .feed-card--small .feed-card__rest { transition: visibility 0s var(--motion-sheet); }
 }
 
@@ -446,7 +412,7 @@
 
 .delta {
   font: var(--delta-font, var(--type-caption));
-  font-weight: 700;
+  font-weight: var(--fw-bold);
   padding: var(--delta-pad-y, var(--sp-1)) var(--delta-pad-x, var(--sp-2));
   border-radius: var(--delta-radius, var(--r-chip));
   background: var(--delta-bg, var(--card-3-bg));
@@ -473,4 +439,283 @@
   scroll-snap-align: start; scroll-snap-stop: always;
   display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); align-content: start;
 }
-.panes > .pager__at { justify-self: center; }
+
+/* ==== the card's variants another family draws: Cover and the fold (media), Band (numbers) (#62: a block is written in its own file) ==== */
+
+/* ---- cover: the image IS the card; text over a scrim ----
+   <article class="card card--cover"><div class="ph" role="img"></div>
+     <div class="card__head"><button class="icon-btn icon-btn--sm">♥</button></div>
+     <div><h2 class="t-h1">Art Institute</h2><p class="t-body">111 South Michigan Ave</p></div>
+     <div class="row">…meta…</div></article> */
+.card--cover {
+  --card-bg: var(--card-3-bg);
+  --dark: var(--card-3-dark);
+  --accent: var(--card-ink);
+  --accent-dark: calc(1 - var(--dark));
+  min-height: var(--_cover-min-h);
+  align-content: space-between;
+  overflow: hidden;
+  isolation: isolate;
+}
+.card--cover > img,
+.card--cover > .ph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: var(--z-under-2);
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+}
+/* scrim: dark at both ends so the meta stays readable */
+.card--cover::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-under);
+  background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
+}
+
+/* ---- fold: a sticky-note corner on any card (decorative) ----
+   No border. The card's outline follows its border box, so it ran straight
+   across the squared bottom-right corner and cut through the fold's diagonal —
+   the corner read as a notch with a line through it rather than a lifted flap.
+   The COLOUR goes transparent rather than the border going to 0, so the box
+   keeps its geometry and a fold card still measures the same as the cards
+   beside it. */
+.card--fold {
+  border-color: transparent;
+  border-bottom-right-radius: 0;
+  background-image: linear-gradient(to top left,
+    var(--card-bg) 0 50%,   /* the card's own background, not --surface (the page's) — a mismatch here drew a seam at the flap's edge */
+    color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: var(--sp-8) var(--sp-8);
+  background-origin: border-box;  /* the flap sits on the true corner, not inside the (transparent) border */
+  /* the corner is CUT: the triangle under the flap shows what is behind the card. Painted in the card's own colour it
+     read as the square corner of a second card underneath (Lh 2026-09-23). The polygon reaches --sp-12 past the other
+     edges so a coloured palette's shadow is not clipped there. */
+  clip-path: polygon(calc(-1 * var(--sp-12)) calc(-1 * var(--sp-12)), calc(100% + var(--sp-12)) calc(-1 * var(--sp-12)), calc(100% + var(--sp-12)) calc(100% - var(--sp-8) - var(--sp-12)),
+                     calc(100% - var(--sp-8) - var(--sp-12)) calc(100% + var(--sp-12)), calc(-1 * var(--sp-12)) calc(100% + var(--sp-12)));
+}
+
+/* ---- band: data card; numbers.css draws its parts and the band stack ---- */
+.card--band {
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "label num" "foot num";
+  align-items: end;
+  gap: var(--sp-2) var(--sp-4);
+  min-height: var(--card-band-min-h, var(--tile-h));
+}
+
+/* ---- where it sits in what base.css draws (docs/reference.md rule 15) ---- */
+.page > :is(img, .ph) { max-height: var(--page-media-h, calc(var(--tap-base) * 14 / 3)); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.page > .ph { width: 100%; height: var(--page-media-h, calc(var(--tap-base) * 14 / 3)); }
+/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
+.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 */
+  z-index: var(--level, var(--z-over)); /* 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 */
+}
+.sheet-stack > .card:nth-child(2) { margin-top: var(--stack-step); }
+.sheet-stack > .card:nth-child(3) { margin-top: calc(2 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(4) { margin-top: calc(3 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(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);
+}
+.sheet-stack--display > .card > .card__head { align-items: start; min-height: 0; }
+/* ============================================================
+   .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 var(--motion-sheet) var(--ease); /* the only animated property here */
+  transition-delay: calc(var(--stagger, 0) * var(--motion-stagger)); /* 0 for everything
+    except a staggered is-before card: the card renders --stagger 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) + var(--_pull, 0rem));
+  cursor: default;
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+}
+.sheet-stack--tap > .card.is-open.is-dragging { transition: none; }
+.sheet-stack--tap > .card > .card__head { touch-action: none; }
+.sheet-stack--tap > .card.is-open:not(:has(> .sheet__body)) {
+  padding-top: calc(var(--card-pad) + var(--_refresh, 0rem));
+  transition: translate var(--motion-sheet) var(--ease), padding-top var(--motion-sheet) var(--ease);
+}
+/* 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
+   (the hiding rule is base.css's, shared with every other scrolling track) */
+.sheet-stack--tap > .card.is-before { translate: 0 var(--stack-step); }
+.sheet-stack--tap > .card.is-after { translate: 0 100vh; }
+.sheet-stack--closed > .card { translate: 0 calc(var(--_headroom) - var(--_lift, 0rem)); }
+.sheet-stack--closed > .card.is-dragging { transition: none; }
+.sheet-stack--tap:not(.sheet-stack--closed) > .card.is-dragging:not(.is-open) {
+  translate: 0 calc(-1 * var(--_lift, 0rem));
+  transition: none;
+}
+.sheet-stack--closed > .card.is-before { translate: 0 calc(var(--_headroom) + var(--stack-step)); }
+.sheet-stack--closed > .card.is-after { translate: 0 100vh; }
+/* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
+   line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
+:is([data-palette], [data-finish]) .sheet-stack__base .card { box-shadow: none; }
+/* at the screen's top the open sheet's top corners are SQUARE (Lh 2026-10-08): round, they left two small pockets of the
+   bar's ground at the glass. They square as the sheet rises and round again as it folds, in the slide's own time. Paint
+   only, the sheet's size is untouched. A pull on the head keeps them square until the finger lets go. */
+.sheet-stack--flood > .card { transition: translate var(--motion-sheet) var(--ease), border-radius var(--motion-sheet) var(--ease); }
+.sheet-stack--flood > .card.is-open { border-top-left-radius: 0; border-top-right-radius: 0; }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head {
+  position: relative;
+  padding-left: 0;
+  transition: padding-left var(--motion-sheet) var(--ease);
+}
+/* ---- a stacked sheet with a SheetBody has the ONE sheet shape (Lh 2026-09-23, the home layout): sheet head
+   pinned at the top · sheet body scrolls, as long as it needs · sheet foot (a CardFoot, the CTA) at the bottom.
+   The card becomes a flex column and stops scrolling itself — only the body does. A sheet with no SheetBody
+   keeps the old way: the whole open card scrolls. ---- */
+.sheet-stack--tap > .card:has(> .sheet__body) { display: flex; flex-direction: column; gap: var(--card-gap); }
+.sheet-stack--tap > .card:has(> .sheet__body).is-open { overflow: clip; }
+/* a paper stack's foot is paper to the card's edges, and it covers the tinted flex gap above it so the
+   button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
+   where it was — the padding gives back what the bleed takes. */
+.sheet-stack > .card.sheet--paper > .card__foot {
+  background: var(--action-bg);
+  color: var(--card-ink);
+  margin-top: calc(-1 * var(--card-gap));
+  margin-inline: calc(-1 * var(--card-pad));
+  margin-bottom: calc(-1 * var(--card-pad));
+  padding-top: var(--card-gap);
+  padding-inline: var(--card-pad);
+  padding-bottom: var(--card-pad);
+}
+.stack-sheet > .card__head { flex-wrap: nowrap; }
+/* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
+   tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
+   (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) var(--ease); }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+/* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
+   no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
+.sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+/* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
+.sheet > .card__foot {
+  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: var(--z-over); /* the sheet's border box: the same height the sheet's own % reads */
+  align-items: end;
+  align-content: end;
+  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
+  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
+  pointer-events: none;
+  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
+  transition: translate var(--motion-sheet) var(--ease), visibility 0s;
+}
+.sheet.is-dragging > .card__foot { transition: none; }
+/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
+   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
+   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
+:is(.sheet--peek, .sheet--away) > .card__foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+/* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
+   (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
+   padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
+   The walk shows no scrollbar. */
+.step > .pages { touch-action: pan-y; } /* pan-y: the walk scrolls itself up and down; a sideways swipe is the Walkthrough's (it turns the page) */ /* the scrolling box is the whole content: from the step's top edge, edge to edge — no margin, the default (Lh 2026-09-23) */
+.step > .pages > .page > :is(img, .ph):first-child {
+  width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
+  max-width: none;
+  margin-inline: calc(-1 * var(--screen-pad));
+  height: calc(var(--_lead, 0rem) + var(--page-media-h, calc(var(--tap-base) * 14 / 3)));
+  max-height: none;
+  border-radius: 0;
+  border-inline: 0;
+  border-top: 0;
+  object-fit: cover;
+}
+/* ---- where it sits in what numbers.css draws (docs/reference.md rule 15) ---- */
+.band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
+.band-stack > .card--band + .card--band { border-top: var(--border-w) solid var(--hairline); }
+/* ---- where it sits in what sticky.css draws (docs/reference.md rule 15) ---- */
+.sticky__head > .ph { flex: 1 1 0; min-width: 0; } /* a picture in the head takes the note's width */
+.sticky__head:has(> .sticky-date) > .ph { flex: none; width: var(--sticky-pic-size, calc(var(--tap) * 1.5)); min-height: 0; aspect-ratio: 1; } /* beside a date the picture is a small square at the start */
+
+/* ---- where it sits in what media.css draws: a postcard's picture (docs/reference.md rule 15) ---- */
+.postcard__front .postcard__turn > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; min-height: 0; }
+
+/* ---- where it sits in what stack.css draws: a sheet pulled to refresh holds still (docs/reference.md rule 15) ---- */
+.sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .sheet__body)) { transition: none; }
+
+/* ---- where it sits in what step.css draws: the reading block, a walk of pages (docs/reference.md rule 15) ---- */
+.step:has(> .sheet--peek) > .pages { padding-bottom: var(--sheet-peek); }
+.step > .pages {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}