@usableapp/cardds 0.7.103 → 0.7.105

package/css/stack.css

@@ -53,22 +53,9 @@
    Lh, 2026-09-11). --_n: how many sheets the stack holds, read from the DOM
    by :has below so the closed geometry needs no script and no per-stack
    declaration. */
-.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: 5.5rem; margin-inline: calc(-1 * var(--screen-pad)); --_n: 1; }
+.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: calc(var(--tap-base) * 11 / 6); margin-inline: calc(-1 * var(--screen-pad)); --_n: 1; }
 .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 */
 }
 .sheet-stack:has(> .card:nth-child(2)) { --_n: 2; }
 .sheet-stack:has(> .card:nth-child(3)) { --_n: 3; }
@@ -79,24 +66,17 @@
    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)); }
+.sheet-stack > .card:nth-child(2) { --slot: 1; --level: 2; }
+.sheet-stack > .card:nth-child(3) { --slot: 2; --level: 3; }
+.sheet-stack > .card:nth-child(4) { --slot: 3; --level: 4; }
+.sheet-stack > .card:nth-child(5) { --slot: 4; --level: 5; }
 
-/* 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. */
 .sheet-stack > .card > .card__head :is(h1, h2, h3) {
   font-size: var(--fs-h1);
-  line-height: 1;
-  letter-spacing: -0.01em;
+  line-height: var(--lh-solid);
+  letter-spacing: var(--track-h2);
   margin-right: auto; /* pins the icon cluster right */
   display: block;
   overflow-wrap: normal;
@@ -104,17 +84,16 @@
 
 /* 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 { --stack-step: calc(var(--tap-base) * 13 / 6); }
 .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));
+  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5) - var(--_mark-room)); /* --_mark-room: card.css, the room for the marks over line one */
 }
 /* fanned stack: a toggle opens the stack wider so every peek shows more */
-.sheet-stack--fanned { --stack-step: 9.5rem; }
+.sheet-stack--fanned { --stack-step: calc(var(--tap-base) * 19 / 6); }
 
 /* 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
@@ -122,76 +101,18 @@
    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 — tap a peeked sheet open; a back button returns it. How its sheets move (one property: translate) is
+   told over their rules, where they sit, in card.css. ---- */
 .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) ease; /* the only animated property here */
-  transition-delay: calc(var(--stagger, 0) * 70ms); /* 0 for everything
-    except a staggered is-before card: the card renders --stagger as it tucks or un-tucks */
   --_back-size: var(--stack-back-size, calc(var(--tap-base) * 2 / 3)); /* read once, shared by the back button and the head's padding below */
 }
-.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, 0px));
-  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; }
-/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
-   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
-   card's colour, so without the white inset the first row sits on that seam. */
-.sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0px); transition: padding-top var(--motion-sheet) ease; }
-.sheet-stack--tap > .card.is-open:not(:has(> .sheet__body)) {
-  padding-top: calc(var(--card-pad) + var(--_refresh, 0px));
-  transition: translate var(--motion-sheet) ease, padding-top var(--motion-sheet) ease;
-}
-.sheet-stack > .card > .sheet__body.is-refreshing,
-.sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .sheet__body)) { transition: none; }
+
 /* the GRIP (Lh 2026-10-05): four small dots at the middle of every sheet's top edge — a sign that this card
    slides up and down. A mark, not a control: nothing to press, nothing added to the sheet (the card's own background, in the
    room above its head). The card renders `.stack-card` when it is a sheet of a tap stack, so the dots are its own.
    At rest they are the card's own ink, faint. Only while THAT sheet reloads (`.is-loading`, from its `refreshing` prop,
-   and only while it is open) they dissolve white → black, so a light card and a dark one each get a moment the dots stand out.
-   Nothing travels. --_grip is the mix, 0 white → 1 black, private. */
+   and only while it is open) they dissolve from the ondark ink to the onlight ink, so a light card and a dark one each get a moment the dots stand out.
+   Nothing travels. --_grip is the mix, 0 the ondark ink → 1 the onlight ink, private. */
 @property --_grip { syntax: "<number>"; inherits: false; initial-value: 0; }
 .stack-card {
   --_grip-dot: var(--sp-1);
@@ -207,8 +128,8 @@
     calc(50% + 0.5 * var(--_grip-step)) var(--_grip-y), calc(50% + 1.5 * var(--_grip-step)) var(--_grip-y);
 }
 .stack-card.is-open.is-loading {
-  --_grip-ink: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
-  animation: stack-grip-dissolve 0.4s ease-in-out infinite alternate;
+  --_grip-ink: color-mix(in srgb, var(--ink-onlight) calc(var(--_grip) * 100%), var(--ink-ondark));
+  animation: stack-grip-dissolve var(--motion-pulse) var(--ease-in-out) infinite alternate;
 }
 @keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
 /* the grip as ONE LINE (`mark="line"`, Lh 2026-10-06): the single Sheet's line, at the same place and the same length. It reads the
@@ -228,22 +149,6 @@
 @media (prefers-reduced-motion: reduce) {
   .stack-card.is-open.is-loading { animation: none; --_grip-ink: currentColor; }
 }
-/* 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 — nothing open on arrival. Every sheet, the front
@@ -260,14 +165,6 @@
    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 calc(var(--_headroom) - var(--_lift, 0px)); }
-.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, 0px));
-  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; }
 
 /* .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),
@@ -277,9 +174,9 @@
 .sheet-stack > .sheet-stack__base {
   grid-area: 1 / 1;
   align-self: start;
-  z-index: 0;
-  --_under: 0px;
-  height: calc(var(--_headroom, 0px) + var(--_under));
+  z-index: var(--z-flat);
+  --_under: 0rem;
+  height: calc(var(--_headroom, 0rem) + var(--_under));
   padding-inline: var(--screen-pad);
   --_gap: var(--card-gap, var(--sp-5));
   display: grid;
@@ -296,7 +193,6 @@
 /* a base that is ONE Centre is one thing handed over (a note, an empty state): it stands in the MIDDLE of the room above the peeks
    (Lh 2026-10-06). The base already keeps the screen's inset, so the centre block gives its own back. */
 .sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
-.sheet-stack__base > .screen__centre { padding-inline: 0; }
 /* loose things rest against the peeks, so the room under the last one is the room between two of them (Lh 2026-10-09: a card's
    bottom edge lay on the first sheet's top edge). A lone Page reads from the top and a lone Centre stands in the middle: neither rests there. */
 .sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) {
@@ -319,9 +215,6 @@
   overscroll-behavior: contain;
   touch-action: pan-y;
 }
-/* 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; }
 
 /* ============================================================
    .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen
@@ -343,38 +236,17 @@
    ============================================================ */
 .screen--fill:has(> .sheet-stack--flood) { --_bar-gap: var(--sp-2); }
 .screen--fill:has(> .sheet-stack--flood):has(> .topbar:first-child) { --_bar-gap: var(--screen-gap); }
-.screen--fill:has(> .sheet-stack--flood) > :is(.appbar, .topbar):first-child {
-  position: absolute;
-  inset: var(--safe-top) 0 auto;
-  max-width: none;
-  margin: 0;
-  z-index: 0; /* under every sheet (--level 1-5); the base clears it by margin */
-}
 .sheet-stack--flood { --_bar: calc(var(--top-h, var(--header-h)) + var(--_bar-gap)); }
 .sheet-stack--flood > .sheet-stack__base {
   margin-top: var(--_bar);
-  height: calc(var(--_headroom, 0px) - var(--_bar) + var(--_under));
+  height: calc(var(--_headroom, 0rem) - var(--_bar) + var(--_under));
 }
-.screen--fill:has(> .sheet-stack--flood > .stack-card.is-open, > .sheet-stack--flood > :not(.stack-card) > .stack-card.is-open) > :is(.appbar, .topbar):first-child {
-  visibility: hidden;
-  transition: visibility 0s linear var(--motion-sheet); /* gone once the sheet has covered it; back at once on a fold (the rule above has no delay) */
-}
-/* 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) ease, border-radius var(--motion-sheet) ease; }
-.sheet-stack--flood > .card.is-open { border-top-left-radius: 0; border-top-right-radius: 0; }
 
 /* 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. */
 /* a sheet's OWN head and back: the card is the stack's child or, with one host wrapper, the wrapper's. A card standing in the sheet's body wears its own head */
-: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) ease;
-}
 :is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head > .sheet-stack__back {
   position: absolute;
   left: 0;
@@ -382,7 +254,7 @@
   translate: 0 -50%;
   opacity: 0;
   visibility: hidden;
-  transition: opacity var(--motion-sheet) ease, visibility var(--motion-sheet);
+  transition: opacity var(--motion-sheet) var(--ease), visibility var(--motion-sheet);
   /* SMALL (see "the back button, SMALL" below) */
   width: var(--_back-size);
   height: var(--_back-size);
@@ -395,63 +267,16 @@
   visibility: visible;
 }
 
-/* ---- 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; }
 .sheet-stack > .card:has(> .sheet__body) > :not(.sheet__body) { flex-shrink: 0; }
 .sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
-/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
-   cover the corners, and a white body showed there beside the head. Clear, the card's own colour
-   shows in that pocket. Open, the body is white, and the first row sits --sp-6 down, the same white
-   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
-   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
-   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
-   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
-   at the moment the sheet stops. Rising, the body is white at once. */
-/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the white starts
-   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
-   stack's step and the body's own rows read it. */
-.sheet-stack > .card.sheet--paper > .sheet__body {
-  margin-top: calc(var(--sp-3) - var(--card-gap));
-  padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
-  transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
-}
-/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
-.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
-.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-  background-color: transparent;
-  transition:
-    padding-top var(--motion-sheet) ease,
-    background-color var(--motion-quick) ease calc(var(--stagger, 0) * 70ms + var(--motion-sheet) - var(--motion-quick));
-}
-@media (prefers-reduced-motion: reduce) {
-  .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-    transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
-  }
-}
-/* a paper stack's foot is white 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(--color-paper, #fff);
-  color: var(--color-ink, #141414);
-  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);
-}
+/* a paper stack's foot is paper (card.css paints it): its ink reads the action's side */
+.sheet-stack > .card.sheet--paper > .card__foot { --dark: var(--action-dark); }
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
    filled (.icon-btn--invert) only while the sheet is open; a count is a small circle over the icon's top right corner ---- */
 .stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
 /* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
    (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
-.stack-sheet > .card__head { flex-wrap: nowrap; }
 .stack-sheet__title {
   flex: 1; min-width: 0; overflow-x: clip; overflow-y: visible; white-space: nowrap; overflow-wrap: normal; /* clip SIDEWAYS only:
      hidden clipped the Thai tone marks above a line-height-1 line (เพื่อน lost its ไม้เอก — Lh 2026-09-24) */
@@ -460,7 +285,7 @@
 }
 .stack-sheet__run { display: inline-block; }
 .stack-sheet__title.is-long .stack-sheet__run {
-  animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, 6s)) ease-in-out infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
+  animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
 }
 @keyframes stack-sheet-run { 0%, 20% { translate: 0; } 85%, 100% { translate: calc(-1 * var(--_over)); } }
 @media (prefers-reduced-motion: reduce) {
@@ -473,11 +298,11 @@
   /* the disc fades with the sheet: in as it rises, out as it folds, and across when another tab is pressed.
      scale stays on the press (actions.css) so the give under a finger stays quick */
   transition:
-    scale var(--motion-press) ease-out,
-    background-color var(--motion-sheet) ease,
-    color var(--motion-sheet) ease,
-    border-color var(--motion-sheet) ease,
-    box-shadow var(--motion-sheet) ease;
+    scale var(--motion-press) var(--ease-out),
+    background-color var(--motion-sheet) var(--ease),
+    color var(--motion-sheet) var(--ease),
+    border-color var(--motion-sheet) var(--ease),
+    box-shadow var(--motion-sheet) var(--ease);
 }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
@@ -490,7 +315,7 @@
   padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
      the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
-  line-height: 1;
+  line-height: var(--lh-solid);
   pointer-events: none;
 }
 /* a tab not chosen is the icon alone — no ring, no ground (Lh 2026-09-23: "the circle around is not pretty"); the chosen one turns
@@ -506,22 +331,21 @@
    margin around it reaches into the card's padding — and an open head (back · title · three tabs) keeps one line (Lh 2026-09-23) */
 .card__head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
 
-/* ---- 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))); }
 /* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
    while open; the last tab then sits on the inset (no reach into the padding) */
 .sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
-: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) 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))); }
 .sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
-.sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
+.sheet-stack--tap .sheet-stack__back > .icon { --icon-size: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--_back-size) - var(--tap-sm)) / 2); }
 
 /* the open sheet's title folds it (SheetStack.tsx): it says so to a pointer */
 .sheet-stack--tap > .card.is-open > .card__head > :is(h1, h2, h3) { cursor: pointer; }
-/* 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; }
 .sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */
+
+/* ---- where it sits in what base.css draws (docs/reference.md rule 15) ---- */
+/* min-height: 0 — a flex item's floor is its content, and the stack's content
+   is its own full-height sheets, so without it the stack grew to the whole
+   screen and its open sheet ran past the bottom edge by the bars' height,
+   unreachable by scrolling (timebank home, 2026-09-13). The stack IS the room
+   left under the bars; every sheet fills exactly that. */
+.screen--fill > .sheet-stack { flex: 1; min-height: 0; }

package/css/stamp.css

@@ -33,42 +33,44 @@
   position: relative;
   display: block;
   container-type: inline-size;
-  color: var(--stamp-ink, #141414);
-  filter: drop-shadow(var(--stamp-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the teeth; a box-shadow would draw the rectangle */
+  color: var(--stamp-ink, var(--ink-onlight));
+  filter: drop-shadow(var(--stamp-drop, var(--shadow-paper))); /* drop-shadow follows the teeth; a box-shadow would draw the rectangle */
+  rotate: var(--stamp-turn, none);
+  animation: var(--stamp-arrive, none);
 }
 .stamp__paper {
   --_pitch: calc(100cqw / 12);  /* one tooth: 12 across, 15 down — the holes land whole on every edge. Fewer and larger than a real stamp's: a small stamp's teeth must still read (Lh 2026-10-07; it was 20 × 25) */
   --_hole: 2.6cqw;
   position: absolute;
   inset: 0;
-  background-color: var(--stamp-paper-bg, #fffdf8);
+  background-color: var(--stamp-paper-bg, var(--stamp-paper));
   -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
     radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
   mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
     radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
 }
-.stamp__pic { position: absolute; inset: var(--stamp-frame, 8cqw); overflow: hidden; } /* the white frame round the picture; the ground is the tone class's */
+.stamp__pic { position: absolute; inset: var(--stamp-frame, 8cqw); overflow: hidden; } /* the paper's frame round the picture; the ground is the tone class's */
 
 /* the pictures, placed by COUNT: where, how wide, how far turned — the layout is the stamp's look, never the app's.
    A share of the picture area; the foot stays clear for the words. */
 .stamp__art { position: absolute; left: var(--_x); top: var(--_y); width: var(--_w); aspect-ratio: 1; translate: -50% -50%; rotate: var(--_r); }
 .stamp__art > * { display: block; width: 100%; height: 100%; }
 .stamp--1 .stamp__art { --_x: 50%; --_y: 40%; --_w: 72%; --_r: 0deg; }
-.stamp--2 .stamp__art:nth-child(1) { --_x: 37%; --_y: 27%; --_w: 58%; --_r: -6deg; }
-.stamp--2 .stamp__art:nth-child(2) { --_x: 63%; --_y: 56%; --_w: 54%; --_r: 8deg; }
-.stamp--3 .stamp__art:nth-child(1) { --_x: 30%; --_y: 21%; --_w: 50%; --_r: -8deg; }
-.stamp--3 .stamp__art:nth-child(2) { --_x: 71%; --_y: 31%; --_w: 46%; --_r: 7deg; }
-.stamp--3 .stamp__art:nth-child(3) { --_x: 47%; --_y: 58%; --_w: 54%; --_r: -2deg; }
-.stamp--4 .stamp__art:nth-child(1) { --_x: 29%; --_y: 19%; --_w: 44%; --_r: -8deg; }
-.stamp--4 .stamp__art:nth-child(2) { --_x: 71%; --_y: 24%; --_w: 42%; --_r: 7deg; }
-.stamp--4 .stamp__art:nth-child(3) { --_x: 31%; --_y: 57%; --_w: 42%; --_r: 5deg; }
-.stamp--4 .stamp__art:nth-child(4) { --_x: 70%; --_y: 60%; --_w: 44%; --_r: -6deg; }
+.stamp--2 .stamp__art:nth-child(1) { --_x: 37%; --_y: 27%; --_w: 58%; --_r: calc(var(--tilt-base) * -6); }
+.stamp--2 .stamp__art:nth-child(2) { --_x: 63%; --_y: 56%; --_w: 54%; --_r: calc(var(--tilt-base) * 8); }
+.stamp--3 .stamp__art:nth-child(1) { --_x: 30%; --_y: 21%; --_w: 50%; --_r: calc(var(--tilt-base) * -8); }
+.stamp--3 .stamp__art:nth-child(2) { --_x: 71%; --_y: 31%; --_w: 46%; --_r: calc(var(--tilt-base) * 7); }
+.stamp--3 .stamp__art:nth-child(3) { --_x: 47%; --_y: 58%; --_w: 54%; --_r: calc(var(--tilt-base) * -2); }
+.stamp--4 .stamp__art:nth-child(1) { --_x: 29%; --_y: 19%; --_w: 44%; --_r: calc(var(--tilt-base) * -8); }
+.stamp--4 .stamp__art:nth-child(2) { --_x: 71%; --_y: 24%; --_w: 42%; --_r: calc(var(--tilt-base) * 7); }
+.stamp--4 .stamp__art:nth-child(3) { --_x: 31%; --_y: 57%; --_w: 42%; --_r: calc(var(--tilt-base) * 5); }
+.stamp--4 .stamp__art:nth-child(4) { --_x: 70%; --_y: 60%; --_w: 44%; --_r: calc(var(--tilt-base) * -6); }
 
 /* the words on the picture's foot: a small line, then the big name — one line each (clipped sideways only: Thai tone marks stand above the line box) */
 .stamp__cap { position: absolute; inset-inline: 5cqw; bottom: 3.5cqw; display: grid; gap: 0.4cqw; }
 .stamp__words, .stamp__name { display: block; min-width: 0; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; }
-.stamp__words { --_words: 4.8cqw; font: 500 var(--_words) / 1.3 var(--font-ui); font-size: var(--stamp-words-font-size, var(--_words)); }
-.stamp__name { --_name: 9.5cqw; font: 900 var(--_name) / 1.15 var(--font-display); font-size: var(--stamp-name-font-size, var(--_name)); }
+.stamp__words { --_words: 4.8cqw; font: var(--fw-medium) var(--_words) / var(--lh-title) var(--font-ui); font-size: var(--stamp-words-font-size, var(--_words)); }
+.stamp__name { --_name: 9.5cqw; font: var(--fw-black) var(--_name) / var(--lh-display) var(--font-display); font-size: var(--stamp-name-font-size, var(--_name)); }
 /* at the stamp's own size and under (and stuck on a note): the small line goes, the name grows */
 /* --bare: the pictures alone, no words — a stamp stuck on something (a note, a postcard). The words belong to the album.
    The pictures take the foot's room: each sits a little lower, so the group stands in the middle of the frame. */
@@ -82,14 +84,13 @@
 
 /* --tilt: turned a little on its middle — the one stamp a start screen hands over */
 .stamp--tilt-left, .stamp--tilt-right { margin-block: var(--sp-4); } /* the turned corners and the shadow need room: a centre scrolls and would cut them */
-.stamp--tilt-left { rotate: calc(-1 * var(--stamp-tilt, 5deg)); }
-.stamp--tilt-right { rotate: var(--stamp-tilt, 5deg); }
+.stamp--tilt-left { rotate: calc(-1 * var(--stamp-tilt, calc(var(--tilt-base) * 5))); }
+.stamp--tilt-right { rotate: var(--stamp-tilt, calc(var(--tilt-base) * 5)); }
 
 /* --tap: the whole stamp is the button (`onClick`); the press and the ring are the PRESS list's (actions.css) */
 .stamp--tap { appearance: none; border: 0; padding: 0; background: none; font: inherit; text-align: start; -webkit-tap-highlight-color: transparent; }
 
 /* a stamp — or the empty place for one — handed over in a Centre: its greeting centred under it. The stamp is its own size here as everywhere */
-.screen__centre:has(> :is(.stamp, .stamp-place)) { justify-items: center; text-align: center; }
 
 /* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
    <span class="stamp-place"><svg class="stamp-place__edge" aria-hidden="true"><rect/></svg>สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint">…</span>
@@ -183,7 +184,7 @@
   background-color: var(--stamp-cell-on-bg, var(--accent));
   color: var(--stamp-cell-on-ink, var(--on-accent));
 }
-.stamp-cell__on > .icon { width: 70%; height: 70%; }
+.stamp-cell__on > .icon { --icon-size: 70%; }
 /* --bare: no ground, no padding, no round — the stamps lie on what holds the book, three across as on the ground. The name is the Stamp's own; free places still draw.
    <div class="stamp-book stamp-book--bare"> */
 .stamp-book--bare { padding: 0; border-radius: 0; background: none; }
@@ -227,24 +228,24 @@
    After the rule above, at the same weight: `main` is the one place a stuck stamp reads --stamp-size. */
 .stamp-on--main > .stamp { width: var(--stamp-size, calc(var(--tap) * 2)); }
 .stamp-on--move { will-change: transform; } /* its own layer: Safari left the stamp's shadow behind as a trail along the drag when it was painted with the note (seen on the simulator, 2026-10-07) */
-.stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) ease-out; }
+.stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) var(--ease-out); }
 .stamp-on--move:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
-.stamp-on.is-held { cursor: grabbing; z-index: 1; scale: 1.06; } /* lifted off the paper while the finger holds it */
+.stamp-on.is-held { cursor: grabbing; z-index: var(--z-over); scale: var(--scale-lift); } /* lifted off the paper while the finger holds it */
 @media (prefers-reduced-motion: reduce) { .stamp-on.is-held { scale: 1; } }
 
 /* ---- the cross that takes a stamp off (`StampOn onRemove`): a small dark disc with an x on the stamp's top right corner ----
    <div class="stamp-on stamp-on--move">…<button class="stamp-on__remove" aria-label="Remove"><span class="stamp-on__remove-disc"><svg class="icon">x</svg></span></button></div>
    The button is the touch target — at least --tap-floor (44) square, invisible, centred on the corner — and the disc inside it is what is seen
    (24). It is NOT turned with the stamp: a hand turns a stamp, a button stays square to the screen, so the cross counter-turns by the stamp's own turn. Like the
-   stamp it brings its ground and its ink (a dark disc, a pale x and a pale ring: seen on any paper and over any picture). */
+   stamp it takes the theme's two inks, the onlight ink as its disc and the ondark ink as its x and ring: seen on any paper and over any picture. */
 .stamp-on__remove-disc {
   display: grid;
   place-items: center;
   width: var(--stamp-on-remove-size, var(--sp-6));
   aspect-ratio: 1;
   border-radius: 50%;
-  background-color: var(--stamp-on-remove-bg, #141414);
-  box-shadow: 0 0 0 var(--sp-0) currentColor, 0 var(--sp-0) var(--sp-1) rgb(0 0 0 / 0.35);
+  background-color: var(--stamp-on-remove-bg, var(--ink-onlight));
+  box-shadow: 0 0 0 var(--sp-0) currentColor, var(--shadow-lift);
 }
 .stamp-on__remove {
   --_hit: max(var(--tap-floor), var(--stamp-on-remove-size, var(--sp-6)));
@@ -261,16 +262,27 @@
   border: 0;
   border-radius: 50%;
   background: none;
-  color: var(--stamp-on-remove-ink, #ffffff);
+  color: var(--stamp-on-remove-ink, var(--ink-ondark));
   font: inherit;
   -webkit-tap-highlight-color: transparent;
 }
-.stamp-on__remove-disc > .icon { width: 60%; height: 60%; }
-@media (prefers-reduced-motion: no-preference) { .stamp-on__remove { animation: stamp-on-remove-in var(--motion-press) ease-out; } }
-@keyframes stamp-on-remove-in { from { opacity: 0; scale: 0.6; } }
+.stamp-on__remove-disc > .icon { --icon-size: 60%; }
+@media (prefers-reduced-motion: no-preference) { .stamp-on__remove { animation: stamp-on-remove-in var(--motion-press) var(--ease-out); } }
+@keyframes stamp-on-remove-in { from { opacity: 0; scale: var(--scale-arrive); } }
 
 /* --arrive: the stamp sticks ITSELF (StampOn `arrive`; a Stamp's `arrive` too, where it already stands) — struck onto its place (`strike`: tokens.css).
    The component reads the animation's name to tell the app it has landed. `scale` and `opacity` leave a --tilt's `rotate` alone. Knob: --stamp-on-arrive-time */
 @media (prefers-reduced-motion: no-preference) {
-  .stamp-on--arrive, .stamp--arrive { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
+  .stamp-on--arrive, .stamp--arrive { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) var(--ease-in) both; }
 }
+
+/* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
+.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
+/* ---- where it sits in what people.css draws (docs/reference.md rule 15) ---- */
+/* a stamp in the stack is the stamp's small size (--stamp-sm-size: one rule in stamp.css, 48 × 60), lapped like the heads. Measured 2026-10-11 in a Row's
+   lead with a title, a meta line and an end button: at 375 the meta line breaks in two, accepted by Lh (a lap of 16 would hold it; the lap stays 8)
+   <span class="avatar-stack"><span class="stamp stamp--bare">…</span><span class="stamp stamp--bare">…</span><span class="avatar-stack__more">+9</span></span> */
+.avatar-stack > .stamp { flex: none; margin-inline: 0; }
+.avatar-stack > .stamp + .stamp { margin-left: calc(-1 * var(--sp-2)); }
+/* ---- where it sits in what post.css draws (docs/reference.md rule 15) ---- */
+.post-corner__stamp > :is(.stamp, .stamp-place) { grid-area: 1 / 1; width: 100%; max-width: none; } /* the corner is the postcard's own size (72 × 90), outside the stamp's two sizes, by the owner's decision (2026-10-11); its box sizes the stamp, which fills it */