@usableapp/cardds 0.7.85 → 0.7.87

package/dist/cardds.css

@@ -307,6 +307,12 @@
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
 @property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }
 
+/* the ring that turns while waiting: Spinner, FormNote busy */
+@keyframes turn { to { rotate: 1turn; } }
+/* a mark struck onto paper — shown large and faint, pressed a little past its size, then at rest: StampOn `arrive`, the post desk's
+   postmark (Lh 2026-10-12: one strike for both; the postmark used to slide in from up-left, turning). Both read --stamp-on-arrive-time */
+@keyframes strike { from { scale: 2; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }
+
 /* ---- css/palette.css — color settings — the file you tune ---- */
 /* ============================================================
    cardds/palette.css — COLOR SETTINGS. The only file you tune.
@@ -898,12 +904,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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, the group takes the room after the top bar and
+   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):has(> .screen__centre) { min-height: 100dvh; display: flex; flex-direction: column; }
 .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 ----
@@ -1387,7 +1392,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 /* 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="lit"]) .sheet-stack__base .card { box-shadow: none; }
+: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
@@ -2207,6 +2212,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
 }
 
+/* a SCROLLING (not fill) screen becomes a column at least one phone tall when it holds a bottom or a centre:
+   an .action-bar as its last child (Lh 2026-09-24, 0.7.0: the bar is the column's last row — at the foot when the words are short,
+   sticky to the viewport's foot while they scroll; actions.css) or a .screen__centre (Lh 2026-09-12: the group is in flow, takes the
+   room after the top bar and centres its children in it; a long one makes the page longer and runs under the bar; card.css) */
+.screen:not(.screen--fill):has(> .action-bar:last-child, > .screen__centre) { display: flex; flex-direction: column; min-height: 100dvh; }
+
 /* ============================================================
    TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
    in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
@@ -2362,8 +2373,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .form-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font: var(--form-note-font, var(--type-caption)); color: var(--form-note-ink, var(--card-muted)); text-align: center; }
 .form-note > .icon { flex: none; }
 .form-note--error { color: var(--form-note-error-ink, var(--signal-error)); }
-@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: form-note-turn 0.9s linear infinite; } }
-@keyframes form-note-turn { to { rotate: 1turn; } }
+@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
 
 /* ---- css/journey.css — route, tile badge, note row ---- */
 /* ============================================================
@@ -2702,10 +2712,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex;
   gap: var(--sp-2);
 }
-/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall, the bar its
+/* a bar INSIDE a scrolling (not fill) screen (Lh 2026-09-24, 0.7.0): the screen is a column at least one phone tall (step.css), the bar its
    last row — at the foot when the words are short, and sticky to the viewport's foot (above the keyboard) while they scroll;
    it takes the room it needs in the column, so nothing is added to the content for it */
-.screen:not(.screen--fill):has(> .action-bar:last-child) { display: flex; flex-direction: column; min-height: 100dvh; }
 .screen:not(.screen--fill) > .action-bar:last-child {
   position: sticky; bottom: var(--kb, 0rem);
   max-width: none;
@@ -2811,7 +2820,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    button's, the card itself is never focused or disabled. */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach) {
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
@@ -2830,9 +2839,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
+/* a pile of notes pressed whole (Lh 2026-10-11): the button lies invisible UNDER the notes, so it is the notes that answer — DIM, as a card does (the group dims as one, the
+   notes do not show through one another); the ring is the button's own, round the whole pile */
+.sticky-pile__press { cursor: pointer; touch-action: manipulation; }
+.sticky-pile__notes:has(> .sticky-pile__press) { transition: opacity var(--motion-press) ease-out; }
+.sticky-pile__notes:has(> .sticky-pile__press:active) { opacity: var(--press-dim); }
+.sticky-pile__press:focus-visible { outline: var(--focus); outline-offset: 0; }
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
 :where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
@@ -2840,17 +2855,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):not(.link):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):not(.link):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
 .sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */
@@ -3115,8 +3130,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    The ring turns; words beside it are optional and take the caption's look. Still when motion is reduced. */
 .spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); vertical-align: middle; font: var(--type-caption); color: var(--spinner-ink, currentColor); }
 .spinner > .icon { flex: none; }
-@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: spinner-turn 0.9s linear infinite; } }
-@keyframes spinner-turn { to { rotate: 1turn; } }
+@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
 
 /* ---- progress: one straight line, the done share solid, the rest faint (Lh 2026-09-22) — a voice note's
    timeline, a download, a step count as a line. <div class="progress" role="progressbar" style="--progress-at: 0.4"></div>
@@ -3303,8 +3317,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); }
 .chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
 /* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
-   a chip, a mood dot, a tile (media.css) */
-:is(.chip--pick, .mood__opt, .tile--pick) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+   a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css) — the native input lies over its whole box, unseen */
+:is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
 :is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 /* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
 .chip--sign { padding-right: var(--sp-2); }
@@ -3862,7 +3876,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
 }
 /* things stuck ON the note (a stamp, placed by hand): a layer over the whole paper. A tap between them still reaches the words under it.
-   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css), and may lie over the words. */
+   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css; `StampOn main` is the main size), and may lie over the words. */
 .sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
 .sticky--flat > .sticky__paper { clip-path: none; }
 .sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
@@ -3950,7 +3964,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   box-shadow: inset 0 0 0 var(--border-w) var(--ink-tint); /* a pale tone still has an edge on a pale ground */
   cursor: pointer;
 }
-.sticky-pick__swatch > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+/* its hidden input: the picks' one rule, choice.css */
 .sticky-pick__swatch:has(> :checked) { outline: var(--rule-w) solid currentColor; outline-offset: var(--sp-0); }
 .sticky-pick__swatch:has(> :focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 
@@ -4053,6 +4067,49 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky-board > :nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, 2.75deg); }
 .sticky-board > :nth-child(4n) { rotate: var(--sticky-board-turn-4, -1.75deg); }
 
+/* ---- sticky pile: one to six notes lying one over another — the newest on top (Lh 2026-10-11) ----
+   <div class="sticky-pile sticky-pile--tap" style="--_n: 3">
+     <div class="sticky-pile__notes">
+       <div class="sticky">…</div><div class="sticky">…</div><div class="sticky">…</div>
+       <button class="sticky-pile__press" aria-label="Three new notes"></button>
+     </div>
+   </div>
+   The FIRST note is on top; each one under it is shifted a step right and down (--sticky-pile-step-x 24, --sticky-pile-step-y 8) so a strip of it peeks
+   out. All lie in ONE grid cell. The turn of each is the board's, by its place among the children (4n + 1 … 4n): the first, the top, is always −3°, whatever the count.
+   The notes under the top one draw no foot. The pile is centred in its column (the root is the column's width and a size container) and never
+   wider than it: the steps are shortened to what the column leaves. --_n is the count, written by the component: data, not a knob.
+   The room round the notes (--sticky-pile-pad) is for the turned corners and the shadow.
+   --tap: the whole pile is the button, a layer UNDER the notes (the last child): the notes let a touch through to it (pointer-events), a stamp on the top note keeps its own.
+   The press look is actions.css's (DIM); the ring is the button's own, round the whole pile. */
+.sticky-pile {
+  --_size: var(--sticky-size, calc(var(--sp-12) * 3.5));
+  --_pad: var(--sticky-pile-pad, var(--sp-2));
+  --_step-x: min(var(--sticky-pile-step-x, var(--sp-6)), (100cqw - var(--_size) - 2 * var(--_pad)) / max(var(--_n) - 1, 1));
+  --_step-y: var(--sticky-pile-step-y, var(--sp-2));
+  container-type: inline-size;
+  display: grid;
+  justify-items: center;
+}
+.sticky-pile__notes {
+  position: relative;
+  display: grid;
+  grid-template: var(--_size) / var(--_size);
+  padding: var(--_pad) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-x)) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-y)) var(--_pad);
+}
+.sticky-pile__notes > .sticky { --_depth: 0; grid-area: 1 / 1; z-index: calc(7 - var(--_depth)); translate: calc(var(--_depth) * var(--_step-x)) calc(var(--_depth) * var(--_step-y)); }
+.sticky-pile__notes > .sticky:nth-child(2) { --_depth: 1; }
+.sticky-pile__notes > .sticky:nth-child(3) { --_depth: 2; }
+.sticky-pile__notes > .sticky:nth-child(4) { --_depth: 3; }
+.sticky-pile__notes > .sticky:nth-child(5) { --_depth: 4; }
+.sticky-pile__notes > .sticky:nth-child(6) { --_depth: 5; }
+.sticky-pile__notes > .sticky:nth-child(n + 2) .sticky__foot { display: none; }
+.sticky-pile__notes > .sticky:nth-child(4n + 1) { rotate: var(--sticky-board-turn-1, -3deg); }
+.sticky-pile__notes > .sticky:nth-child(4n + 2) { rotate: var(--sticky-board-turn-2, 1.5deg); }
+.sticky-pile__notes > .sticky:nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, 2.75deg); }
+.sticky-pile__notes > .sticky:nth-child(4n) { rotate: var(--sticky-board-turn-4, -1.75deg); }
+.sticky-pile__press { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; appearance: none; background: none; -webkit-tap-highlight-color: transparent; }
+.sticky-pile--tap .sticky-pile__notes > .sticky { pointer-events: none; }
+
 /* ---- sticky answer: the note you answer on — it waits at the screen's foot and comes to the top to be written on ----
    <div class="sticky-answer sticky-answer--writing">
      <div class="sticky-answer__scrim"></div>
@@ -4316,17 +4373,57 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 /* the SMALL stamp: stuck on a surface (a note). 48 × 60 whatever the surface's size. The stamp carries the size and the `.stamp-on` box is as wide as its stamp */
 .stamp-on > .stamp { width: var(--stamp-sm-size, var(--tap)); max-width: none; }
+/* --main: the same stuck stamp at the stamp's MAIN size, 96 × 120 (--stamp-size), to cover what it lies on (the owner's call, 2026-10-11: the home's note).
+   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: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 */
 @media (prefers-reduced-motion: reduce) { .stamp-on.is-held { scale: 1; } }
-/* --arrive: the stamp sticks ITSELF (StampOn `arrive`) — struck onto its place: shown large and faint, pressed a little past its
-   size, then at rest. The component reads the animation's name to tell the app it has landed. Knob: --stamp-on-arrive-time */
+
+/* ---- 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-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);
+}
+.stamp-on__remove {
+  --_hit: max(var(--tap-floor), var(--stamp-on-remove-size, var(--sp-6)));
+  position: absolute;
+  top: 0;
+  right: 0;
+  translate: 50% -50%;
+  rotate: calc(var(--stamp-on-turn, 0) * -1deg);
+  display: grid;
+  place-items: center;
+  width: var(--_hit);
+  height: var(--_hit);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--stamp-on-remove-ink, #ffffff);
+  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; } }
+
+/* --arrive: the stamp sticks ITSELF (StampOn `arrive`) — struck onto its place (`strike`: tokens.css). The component reads the
+   animation's name to tell the app it has landed. Knob: --stamp-on-arrive-time */
 @media (prefers-reduced-motion: no-preference) {
-  .stamp-on--arrive { animation: stamp-on-strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
+  .stamp-on--arrive { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
 }
-@keyframes stamp-on-strike { from { scale: 2; opacity: 0; } 60% { scale: 0.92; opacity: 1; } }
 
 /* ---- css/post.css — the post: postmark, a postcard read (letter), written (desk), kept (box) ---- */
 /* cardds — the post: a postcard read (post-letter), written (post-desk) and kept (post-box), the postmark, the card stock.
@@ -4565,10 +4662,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .post-desk__slot { border: 0; background: transparent; color: inherit; }
 @media (prefers-reduced-motion: no-preference) {
   .post-desk__slot > .stamp { animation: post-desk-stick var(--motion-quick) ease-out both; }
-  .post-desk .postmark { animation: post-desk-strike var(--motion-press) ease-in both; }
+  .post-desk .postmark { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; } /* struck as a StampOn is (`strike`: tokens.css), in the same time */
 }
 @keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: 14deg; opacity: 0; } }
-@keyframes post-desk-strike { from { translate: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-6)); rotate: -24deg; opacity: 0; } }
 /* the other half's showing edge brings it across: a tap-wide strip out to the screen's edge */
 .post-desk__reach { position: absolute; inset-block: 0; width: var(--tap); border: 0; background: transparent; }
 .post-desk__reach--address { inset-inline-end: calc(-1 * var(--screen-pad)); }
@@ -5312,19 +5408,37 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- css/finish.css — light, shadow, edges — only under data-finish="lit" ---- */
 /* ============================================================
-   cardds/finish.css — FINISH: light, shadow and edges. A style of its own (Lh 2026-10-02: the plain
-   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says how
-   the material is lit. Apply with <html data-finish="lit"> beside any palette (or none, or "own").
-   No attribute = nothing here applies — the flat look, unchanged.
+   cardds/finish.css — FINISH: the finish of a card's paper. A style of its own (Lh 2026-10-02: the plain
+   look read flat, "not finished"), apart from colour: palette.css says WHICH colours, this says what the
+   material is and how it is lit. Apply with <html data-finish="…"> (or on any ancestor) beside any palette,
+   or none, or "own". No attribute = nothing here applies — the flat look, unchanged.
+
+   FINISHES — four values of the one attribute (Lh 2026-10-12, from the timebank home with each injected:
+   four finishes, variations of one concept, never new pieces; teeth · tape · ticket · slab were rejected):
+     lit     = lit from above: a lit top edge, a hairline ring and a layered shadow that grows with height; filled buttons stand up and go down under the finger; fields and pin cells are sunk.
+     print   = printed paper: an ink line in the card's own ink, a hard misregistered offset instead of a blurred shadow, paper grain over the card, a dotted rule under the head as on a printed form; information inside stays flat.
+     sticker = a die-cut sticker: a white cut line round the card, a short hard drop, a slight tilt on a lone card, buttons with a bottom edge that press down.
+     ink     = a poster / comic print: a thick line in the surface's ink round every boundary and control, a hard offset in the same ink.
+   KNOBS (set in a theme, as any knob; docs/knobs.md lists them):
+     print   --print-off (the misregistration: how far the second pass missed) · --print-grain (the grain's opacity; a ::after, so the knob walk cannot probe it)
+     sticker --sticker-cut (the paper left round the print) · --sticker-tilt (a lone card's lean; 0deg for none — a card in a stack or a list never leans)
+     ink     --ink-w (the line) · --ink-off (the offset)
+
+   Information inside a card stays flat under every finish: only a container or a control gets an edge.
+   Colours are mixes of the roles (--on-surface, --card-ink, --accent, currentColor), never plain black,
+   so a finish sits in any palette; the one plain white is the sticker's backing paper and the lit edge's light.
+   ============================================================ */
 
-   The light comes from above:
+/* every finish: the finish IS the edge, so the wireframe's two borders step back (as [data-palette] in palette.css); ink puts its own line there below */
+[data-finish] { --card-border: transparent; --action-border: transparent; }
+
+/* ============================================================
+   lit — the light comes from above:
      - a thing that stands UP (card, sheet, button) has a lit top edge, a hairline ring and a shadow
        that grows with its height: card 1 · sheet / float 2 — the layers cardds already has;
-     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge;
-     - information inside a card stays flat: only a container or a control gets an edge.
+     - a thing that is SUNK (a field, a pin cell) has its shadow inside, under its top edge.
    Shadows are mixed from the ink (--on-surface), never plain black, so they sit in the palette.
    ============================================================ */
-
 [data-finish="lit"] {
   --_shade: var(--on-surface);
   --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
@@ -5350,9 +5464,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
   --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
 
-  /* the shadow is the edge: the wireframe's lines step back (as in every colour palette) */
-  --card-border: transparent;
-  --action-border: transparent;
   --outline: color-mix(in srgb, currentColor 14%, transparent);
 }
 
@@ -5394,3 +5505,74 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- sunk: what the member types into ---- */
 [data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }
 
+/* ============================================================
+   print — printed paper (riso / zine): the second pass missed by --print-off, so the card's shadow is a
+   hard offset in its own ink; a line in that ink round the card; grain over the whole card; the head
+   underlined by a dotted rule as on a printed form. A lone card's head is a form's head; a stacked
+   sheet's, a row card's, a cover's (controls over a picture) and a folded feed card's (the head is the
+   whole card) have no rule.
+   ============================================================ */
+[data-finish="print"] {
+  --_ink: color-mix(in srgb, currentColor 70%, transparent);
+  --outline: var(--_ink);
+}
+[data-finish="print"] .card {
+  border: var(--border-w) solid var(--_ink);
+  box-shadow: var(--print-off, 3px) var(--print-off, 3px) 0 0 color-mix(in srgb, var(--card-ink) 28%, transparent);
+  isolation: isolate; /* the grain's blend stays inside the card */
+}
+/* the grain: a ::after, not ::before — .card--cover's scrim is its ::before. Over everything in the card (z-index 1, the foot's own level), touches pass through it */
+[data-finish="print"] .card::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
+  opacity: var(--print-grain, 0.32); mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+/* a dark card (the brand tone, a cover): multiply would only blacken it, so the grain lightens, fainter */
+[data-finish="print"] :is(.card--3, .card--cover)::after { mix-blend-mode: screen; opacity: calc(var(--print-grain, 0.32) * 0.56); }
+[data-finish="print"] .card:not(.card--row, .card--cover, .feed-card--small, .sheet-stack > *, .sheet-stack > :not(.sheet-stack__base) > *) > .card__head {
+  padding-bottom: var(--sp-2);
+  border-bottom: var(--rule-w) dotted color-mix(in srgb, currentColor 45%, transparent);
+}
+[data-finish="print"] :is(.btn, .chip) {
+  border-color: var(--_ink);
+  box-shadow: 2px 2px 0 0 color-mix(in srgb, currentColor 35%, transparent);
+}
+[data-finish="print"] .btn--primary { box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
+[data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 2px 2px; }
+[data-finish="print"] .card__thumb { border-style: dashed; }
+
+/* ============================================================
+   sticker — a die-cut sticker on a sheet: --sticker-cut of white paper left round the print, a short hard
+   drop under it, a lone card leans by --sticker-tilt (the next one the other way); chunky buttons with a
+   bottom edge that press down. A card in a stack, in a list, in a feed, a sheet or a modal never leans:
+   those are placed by their holder, a lean would cut or cross them.
+   ============================================================ */
+[data-finish="sticker"] { --outline: color-mix(in srgb, currentColor 18%, transparent); }
+[data-finish="sticker"] .card {
+  box-shadow:
+    0 0 0 var(--sticker-cut, 5px) #fff,
+    0 calc(var(--sticker-cut, 5px) + 4px) 0 0 color-mix(in srgb, var(--on-surface) 16%, transparent),
+    0 calc(var(--sticker-cut, 5px) + 12px) 20px -8px color-mix(in srgb, var(--on-surface) 22%, transparent);
+}
+[data-finish="sticker"] .card:not(.sheet, .modal, .sheet-stack *, .card-list > *, .card-feed > *) { rotate: var(--sticker-tilt, 0.8deg); }
+[data-finish="sticker"] .card:not(.sheet, .modal, .sheet-stack *, .card-list > *, .card-feed > *):nth-of-type(even) { rotate: calc(-1 * var(--sticker-tilt, 0.8deg)); }
+[data-finish="sticker"] .card-list { gap: var(--sp-5); }
+[data-finish="sticker"] .btn {
+  box-shadow: 0 3px 0 0 color-mix(in srgb, currentColor 30%, transparent);
+  border-color: color-mix(in srgb, currentColor 25%, transparent);
+}
+[data-finish="sticker"] .btn--primary { box-shadow: 0 3px 0 0 color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 55%, var(--on-surface)); }
+[data-finish="sticker"] .btn:active { box-shadow: none; translate: 0 3px; }
+[data-finish="sticker"] .chip { box-shadow: 0 0 0 3px #fff; }
+
+/* ============================================================
+   ink — a poster / comic print: --ink-w of the surface's ink round every boundary and control, and a hard
+   offset of --ink-off in the same ink. The two wireframe borders come back as that line.
+   ============================================================ */
+[data-finish="ink"] { --card-border: var(--on-surface); --action-border: var(--on-surface); --outline: currentColor; }
+[data-finish="ink"] .card { border: var(--ink-w, 2.5px) solid var(--on-surface); box-shadow: var(--ink-off, 5px) var(--ink-off, 5px) 0 0 var(--on-surface); }
+[data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 2.5px) solid currentColor; box-shadow: 3px 3px 0 0 currentColor; }
+[data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 3px 3px 0 0 var(--on-surface); }
+[data-finish="ink"] .toggle { box-shadow: 2px 2px 0 0 var(--on-surface); }
+[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 2.5px); }
+

package/dist/cards/CardFeed.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
-import { reducedMotion, useControlled, warnOnce } from '../state.js';
+import { reducedMotion, setRefs, useControlled, warnOnce } from '../state.js';
 import { Card } from './Card.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
@@ -53,16 +53,9 @@ export function CardFeed({ big: bigProp, defaultBig, onBigChange, className, chi
         }
         tops.current = at;
     });
-    const setRef = (node) => {
-        own.current = node;
-        if (typeof ref === 'function')
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
     if (!shown.length)
         return null;
-    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRef, className: cx('card-feed', className), ...rest, children: shown }) }));
+    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRefs(own, ref), className: cx('card-feed', className), ...rest, children: shown }) }));
 }
 const onSmallKey = (e) => {
     if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' '))