@usableapp/cardds 0.7.66 → 0.7.68

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.68 — 2026-10-07
+
+### Changed
+- **A `Sticky` has an edge, and a short shadow** (Lh 2026-10-07) — a hairline edge runs round the note in its own shape (the folded corner, a `corner` notch), so a pale note still ends somewhere on a pale ground; the shadow is short and close under the note. Before: one wide soft shadow all round (8px of blur), which swallowed the edge of a pale note. Nothing to change in a screen. BREAKING for a theme: the knob `--sticky-drop` is gone — set `--sticky-edge-bg` (the edge's colour), `--sticky-shadow-bg` (the shadow's colour) and `--sticky-shadow-blur` instead.
+- **In a chat, a note leans on its writer's own side** (Lh 2026-10-07) — in a `StickyThread` without `rail`, a note starts at the thread's edge under the avatar: theirs against the left, mine (`side="right"`) against the right. Before: notes started under the name, so both sides stood almost one over the other in the middle. A thread WITH `rail` is unchanged (the notes keep clear of the dotted line). Nothing to change in a screen.
+- **A `Stamp` has fewer, larger teeth** (Lh 2026-10-07) — 12 across and 15 down; it was 20 and 25, which ran together into a fuzzy edge on a small stamp. Nothing to change in a screen.
+
+### Fixed
+- **Safari / iPhone: a dragged `StampOn` left its shadow behind as a trail, and the note under it showed a hard grey band** — seen on the iOS Simulator. A draggable stamp is on its own layer now, and the note has no filter (see the edge and shadow above). Nothing to change in a screen.
+
+## 0.7.67 — 2026-10-07
+
+### Added
+- **Stamps: `Stamp`, `StampPlace`, `StampBook` + `StampCell`, `StampOn`** (Lh 2026-10-07) — a perforated 4:5 paper stamp a member keeps and sticks on a note or a postcard. `<Stamp pictures={[…]} tone="custard" name="ต้น" words="กาแฟ · หมา" />`: `pictures` is one to four nodes of the app's own art, and the stamp places, sizes and turns them by how many there are. `tone` is one of `STICKY_TONES` (the same knobs as a note's paper). `tilt`, and `onClick` makes the whole stamp a button. It fills its column up to `--stamp-max-w`; in a `Centre` it is `--stamp-centre-max-w` (56cqw) with its words centred under it. `StampPlace` is an empty dashed place. `StampBook places={6}` is the album page, three `StampCell label onClick on` across; `strip` is one scrolling line of small stamps. `StampOn at={{ x, y }} turn onAtChange` is a stamp stuck on a surface: with `onAtChange` the member drags it (arrow keys too) and it asks on letting go, without it the stamp is still. The picture set, the words and the random ground are the app's: store `{ pictures, ground, name, words }` and the stamp draws the same every time. Gallery group `stamps`, screens on `StampScreens` (the first stamp on a home, one from a neighbour, making your own from up to four chips, a note with stamps).
+- **A stamp shows its words in the album and its pictures only once stuck** (Lh 2026-10-07) — inside a `StampOn` the `name` and `words` are not drawn and the pictures move to the middle of the frame. For any other place a stamp is stuck, pass `<Stamp bare>`.
+- **`Sticky stuck`** (Lh 2026-10-07) — things stuck on the note, each placing itself over the paper: `<Sticky stuck={<StampOn …><Stamp … /></StampOn>}>`. A tap between them still reaches the words. Before: nothing could lie on a note.
+- **`Mark`: a highlighter stroke over a word in a sentence** (Lh 2026-10-07) — `<Text level="body"><Mark>ธนาคารเวลา</Mark> ส่งแสตมป์ดวงแรกให้คุณ</Text>`. Green (`--signal-ok`) by default, `tone="warn" | "error" | "info"` for the others; `--mark-bg` / `--mark-ink` / `--mark-radius` retune it. Drawn as a pen would: four unlike corners, the ink darker at its ends and along its middle. It follows the words across a line break and is never a control.
+- **Postcards: `PostLetter`, `PostDesk`, `PostBox`, `Postmark`** (Lh 2026-10-07) — a postcard read, written and kept. Nothing flips; the older `Postcard` (a cover card that turns over) is unchanged and shares nothing with these. `PostLetter`: two upright sheets, the picture and the written side (address over message, the stamp and its postmark on the corner); the tab or a tap turns it — `face` + `onFaceChange`; `voice` + `playing` / `onPlayingChange` puts a play control on the picture (the app plays and passes the time). `PostDesk`: the paper is twice the screen, one half in sight (`half`); typing stops when the half is full (`onLinesChange`, `onFull`); the sender picks one of their `stamps` (`stamp` + `onStampChange`); the app sets `state="struck"` from its own button, the postmark lands, the desk asks for `sent` and the card leaves. `PostBox` + `PostBoxCard`: kept cards one behind another, an edge parts the box (`open` = the card's `id`, `null` = the front card). `Postmark`: `place`, `date`. The stamp is always a `Stamp` you pass; on a card it shows its pictures only. Gallery group `postcards`, the three finished screens on `PostScreens`.
+- **`Page bleed`** (Lh 2026-10-07) — in a `Step` the page runs to the screen's edges and keeps the inset as its own padding: a card that leans, slides or casts a shadow is cut at the glass, not at the inset, and nothing pans sideways. Before: such a card was cut 16px in. A plain `Page` is unchanged.
+- **Icon `pause`**, and cardds's own words for the post (`play`, `pause`, `to`, `turnToBack`, `turnToPicture`, `message`, `address`, `toMessage`, `toAddress`, `stampOn`, `stampOff`, `stamps`) in English and Thai — `setWords` retunes them.
+
+### Changed
+- **Every `Sticky` is one height** (Lh 2026-10-07) — a note is at least 211px tall at the defaults (`--tap` × 4.4, the height of a note being written), whatever it says; more words still grow it. Before: a note hugged its words, so a one-line note in a `StickyThread` was about 89px. A feed of short notes is now taller: about three notes to a screen. To get the hugging note back, set `--sticky-min-h: 0` in your `theme.css` or on the thread. A `square` note is unchanged.
+
 ## 0.7.66 — 2026-10-06
 
 ### Added

package/README.md

@@ -484,6 +484,66 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 
 Live: every screen in the gallery (`npm run dev`).
 
+## Stamps
+
+A stamp is a small paper picture a member keeps and sticks on a note or a postcard for a neighbour. Sending never uses
+it up. cardds draws the paper; the pictures, their words and which stamp a member owns are the app's.
+
+- **`Stamp`** — a perforated 4:5 stamp. `pictures` is one to four nodes, the app's own art (an svg, an img), in placement
+  order: the stamp places, sizes and turns them by how many there are. `tone` is the ground, one of `STICKY_TONES` (the
+  same list and the same `--sticky-<tone>-bg` knobs as a note's paper). `name` is the big line on the picture's foot,
+  `words` the small line above it. `tilt` turns it, `onClick` makes the whole stamp a button. It fills its column up to
+  `--stamp-max-w`, and every inner length follows its width, so one stamp reads in a tray and in a sheet.
+- **`StampPlace`** — an empty dashed place the size of a stamp: a word inside, `onClick` for "make yours", `faint` for a
+  gap nobody is asked to fill.
+- **`StampBook`** + **`StampCell`** — the album page: cells three across on an album ground, a `label` under each stamp,
+  the free places drawn up to `places`. A cell with `onClick` is a button; `on` marks it pressed. `strip` is one line
+  of small stamps that scrolls sideways, the tray a member picks from.
+- **`StampOn`** — a stamp stuck on a surface. `at` is the stamp's middle as a share of the surface (`{ x, y }`, 0 to 1),
+  `turn` its angle in degrees. With `onAtChange` the member drags it (the arrow keys move it too) and it asks with the
+  new place when the finger lets go; without it the stamp is still. The surface is the nearest positioned box:
+  `Sticky stuck={…}` is one.
+
+What an app stores for a stamp: the picture ids (1 to 4, in order), the ground tone, the name, the small line. Making
+one is the app's screen: `ChipPick` checkboxes that each show a picture, the app refuses a fifth, and the app draws
+ONE of the picked chips at random for the ground and keeps it, so the stamp renders the same every time. The gallery's
+`StampScreens` page has the four screens: the first stamp on a home, one from a neighbour, make your own, a note with
+stamps.
+
+**`Mark`** is a highlighter stroke over a word inside running text: `<Text level="body"><Mark>ธนาคารเวลา</Mark> ส่ง…</Text>`.
+Green (`--signal-ok`) unless `tone` names another signal; `--mark-bg` / `--mark-ink` retune it. It is information, never
+a control, and never a chip or a line of its own.
+
+## Postcards
+
+A postcard is the one piece of mail with no envelope: the written side is the card, and the corner (a stamp, the postmark
+struck over its edge) proves the trip. Three components, one for each thing a member does with one. None of them flips;
+the older `Postcard` (a member's cover card that turns over) is another component and shares nothing with these.
+
+- **`PostLetter`**: reading one that arrived. Two upright 2:3 sheets, one in front. The picture side is `picture` (the
+  app's img or svg) in a white margin with `caption` under it; the written side is the address (`kicker`, `to` lines) over
+  the message (`children`, set large, `sign` at its end), with `stamp` and `postmark` on the corner. The tab over the
+  card, or a tap on the card, turns it: the sheet in front swings to its edge and the other swings in. `face` +
+  `onFaceChange`, or `defaultFace`. `voice` is a voice note's time as the app words it; with it the picture side has a
+  play control (`playing` + `onPlayingChange`). cardds never plays sound: the control asks, the app plays and passes the
+  time. `journey` is one line under the card.
+- **`PostDesk`**: writing one. The paper is landscape and twice the screen, and the phone looks at one half (`half` +
+  `onHalfChange`): the message on ruled lines, then the address (`address`, a few `PostDeskLine`s) and the stamp box.
+  Typing stops when the half is full; `onLinesChange(left, fits)` and `onFull` let the app word its `note`. `stamps` is
+  the sender's own stamps (`{ id, stamp, label }`), shown under the card; `stamp` + `onStampChange` is the one in the
+  box. Sending is the screen's button, never the desk's: the app sets `state="struck"`, the `postmark` lands, the desk
+  asks for `sent`, the card leaves upward and `sent` stands in its place.
+- **`PostBox`** + **`PostBoxCard`**: keeping many. Cards whole and landscape, one behind another, each showing its top
+  edge (`from`, `when`, `stamp`, `postmark`). The last child stands in front, nearest the thumb. Pressing an edge parts
+  the box at that card (`open` is its `id`, `null` is the front card; `onOpenChange`).
+- **`Postmark`**: the round mark, `place` and `date`. Information, nothing to press.
+
+The stamp is always a `Stamp` the app hands over. On a card's corner it shows its pictures only (pass `bare`; the corner
+drops the words by itself too); in the desk's tray it keeps its words. `PostLetter` and `PostDesk` size themselves to the
+screen they are in, so they go in a `Step` > `Page bleed`. **`Page bleed`** runs the page to the screen's edges and keeps
+the inset as its own padding, so a card that leans, slides or casts a shadow is cut at the glass, not at the inset.
+The gallery's `PostScreens` page has the three finished screens (read, write, keep) to start from.
+
 ## Rules of the system
 
 1. **One card = one boundary.** A card frames one thing: a category, a stat

package/cardds.css

@@ -15,6 +15,8 @@
 @import url("css/choice.css");   /* check, toggle, chip grid, days, calendar, mood, pin, composer */
 @import url("css/lists.css");    /* row, rows, key-value, kv grid, timeline, legend, link */
 @import url("css/sticky.css");   /* sticky note, its field, tone chooser, thread of posts, pile */
+@import url("css/stamp.css");    /* stamp, empty place, album page, a stamp stuck on a surface */
+@import url("css/post.css");     /* the post: postmark, a postcard read (letter), written (desk), kept (box) */
 @import url("css/media.css");    /* cover card, quote, tile grid, fold, mosaic, wave */
 @import url("css/layover.css");  /* ask drawer, popover menu, banner, float bar, callout */
 @import url("css/finish.css");   /* light, shadow, edges — only under data-finish="lit" */

package/css/actions.css

@@ -364,12 +364,12 @@
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here. */
 :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) {
+  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) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
 }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -383,27 +383,27 @@
 }
 :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):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, .toggle-field):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+  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); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .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 */
-/* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back) must not turn see-through:
+/* 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) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
-:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn):active { filter: brightness(var(--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; }
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))):active { filter: brightness(var(--press-shade)); }
 /* 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):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):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, .toggle-field):not(label, .toggle-field):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, .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, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):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, 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):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):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 */

package/css/base.css

@@ -144,6 +144,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
 /* .card--3 .t-muted (dim instead of --card-muted on the dark slot) is declared once in card.css, with the rest of that family */
 .t-caps  { text-transform: uppercase; }
+/* ---- mark: a highlighter stroke over a word INSIDE running text (a sender's name in a greeting) ----
+   <p class="t-body"><mark class="mark">ธนาคารเวลา</mark> ส่งแสตมป์ดวงแรกให้คุณ</p>
+   The words keep their ink and their size; the stroke is the signal washed thin, drawn as a pen would: unlike corners, the ink
+   darker at its ends and along its middle. It follows the words across a line break (each piece is its own stroke). Information, never a control. Green (ok) unless a tone says otherwise. */
+.mark {
+  --_bg: color-mix(in srgb, var(--signal-ok) 30%, transparent);
+  --_pool: color-mix(in srgb, var(--mark-bg, var(--_bg)) 75%, transparent); /* the same ink again, thinner: where it lies twice it reads darker, as wet ink does */
+  --_shape: 0.75em 0.3em 0.9em 0.35em / 0.4em 0.95em 0.35em 0.8em; /* four unlike corners: a stroke drawn by hand has no two ends alike */
+  background-color: var(--mark-bg, var(--_bg));
+  background-image:
+    linear-gradient(100deg, var(--_pool), transparent 0.55em),                    /* ink pools where the pen lands */
+    linear-gradient(280deg, var(--_pool), transparent 0.4em),                     /* and a little where it lifts */
+    linear-gradient(181deg, transparent 18%, var(--_pool) 52%, transparent 88%);  /* the nib presses harder along its middle */
+  color: var(--mark-ink, inherit);
+  padding-inline: var(--mark-pad-x, 0.3em);
+  border-radius: var(--mark-radius, var(--_shape));
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.mark--warn { --_bg: color-mix(in srgb, var(--signal-warn) 30%, transparent); }
+.mark--error { --_bg: color-mix(in srgb, var(--signal-error) 30%, transparent); }
+.mark--info { --_bg: color-mix(in srgb, var(--signal-info) 30%, transparent); }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */

package/css/post.css

@@ -0,0 +1,326 @@
+/* cardds — the post: a postcard read (post-letter), written (post-desk) and kept (post-box), the postmark, the card stock.
+   Not the `Postcard` of media.css (a member's cover card that flips) — nothing here flips, and no class is shared with it.
+   The written side is the postcard; the corner — a stamp, the postmark struck over its edge — proves the journey. The stamp is
+   always a `Stamp` (stamp.css), handed over by the app. */
+
+/* ---- post-paper: the card stock. Its own ground and ink, wherever it lies; its parts read --_muted and --_rule ---- */
+.post-paper {
+  background: var(--post-paper-bg, var(--card-1-bg));
+  color: var(--post-paper-ink, var(--card-1-ink));
+  border-radius: var(--post-paper-radius, var(--sp-2));
+  box-shadow: var(--post-paper-shadow, var(--shadow-card));
+  --_muted: var(--post-paper-muted-ink, var(--card-muted));
+  --_rule: var(--post-paper-rule-ink, var(--ink-rail));
+}
+
+/* ---- postmark: the round mark struck by the post — where, when — two rings, turned a little, its cancel lines running on
+   <div class="postmark"><span>จันทบุรี</span><span>12 เม.ย.</span></div> ---- */
+.postmark {
+  --_base: calc(var(--tap) * 1.75);
+  position: relative;
+  z-index: 1;
+  flex: none;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  width: var(--postmark-size, var(--_base));
+  --_size: var(--postmark-size, var(--_base));
+  aspect-ratio: 1;
+  border: var(--rule-w) solid currentColor;
+  border-radius: 50%;
+  outline: var(--border-w) solid currentColor;
+  outline-offset: calc(-1 * var(--sp-1) - var(--rule-w));
+  color: var(--postmark-ink, color-mix(in srgb, currentColor 72%, transparent));
+  font: var(--postmark-font, var(--type-label));
+  text-align: center;
+  rotate: var(--postmark-tilt, -10deg);
+}
+.postmark::after { /* the cancel lines that run on over the stamp */
+  content: "";
+  position: absolute;
+  inset-inline-start: 100%;
+  inset-block-start: 28%;
+  width: 46%;
+  height: calc(var(--sp-3) * 2 + var(--rule-w));
+  background: repeating-linear-gradient(to bottom, currentColor 0 var(--rule-w), transparent var(--rule-w) var(--sp-3));
+}
+.postmark > span { display: block; white-space: nowrap; }
+
+/* ---- post-corner: the corner that proves the journey — the stamp, and the postmark struck over its edge
+   <div class="post-corner"><div class="postmark">…</div><span class="post-corner__stamp"><span class="stamp">…</span></span></div>
+   A stamp stuck here shows its pictures only, as one in a `.stamp-on` does (stamp.css `--bare`): the words belong to the album. ---- */
+.post-corner { display: flex; align-items: flex-end; justify-content: flex-end; flex: none; }
+.post-corner > .postmark { margin-inline-end: calc(var(--_size) * -0.4); margin-block-end: calc(var(--sp-2) * -1); }
+.post-corner__stamp {
+  --_w: calc(var(--sp-2) * 9);
+  position: relative;
+  flex: none;
+  display: grid;
+  width: var(--post-corner-stamp-w, var(--_w));
+  aspect-ratio: 4 / 5;
+  rotate: var(--post-corner-stamp-tilt, 2deg);
+}
+.post-corner__stamp > :is(.stamp, .stamp-place) { grid-area: 1 / 1; max-width: none; }
+
+/* ============================================================
+   post-letter — READING one that arrived. The written side stood upright: the address half over the message half.
+   The picture is the other sheet; the tab over the pair brings it forward. Two rigid sheets changing places —
+   PostLetter swings the one in front to its edge, then the other in (Web Animations; nothing with reduced motion).
+   <div class="post-letter post-letter--picture">
+     <div class="post-letter__sheet post-letter__sheet--picture post-paper">
+       <div class="post-letter__pic">…</div><p class="post-letter__caption">…</p>
+       <div class="post-letter__voice"><button class="icon-btn icon-btn--invert">…</button><span class="post-letter__time">0:12</span></div>
+     </div>
+     <article class="post-letter__sheet post-letter__sheet--back post-paper" inert>
+       <header class="post-letter__head">
+         <div class="post-letter__to"><span class="post-letter__kicker">…</span>
+           <span class="post-letter__lines"><span class="post-letter__line post-letter__line--name"><small>ถึง</small>ฝน</span><span class="post-letter__line">…</span></span></div>
+         <div class="post-corner">…</div>
+       </header>
+       <div class="post-letter__message"><p>…</p><p class="post-letter__sign">…</p></div>
+     </article>
+     <button class="post-letter__turn">…icon…<span>พลิกดูด้านหลัง</span></button>
+     <p class="post-letter__journey">…</p>
+   </div>
+   ============================================================ */
+.post-letter {
+  --_room: calc(var(--tap) + var(--sp-5));
+  position: relative;
+  display: grid;
+  padding-block-start: var(--post-letter-peek, var(--tap));
+  --_peek: var(--post-letter-peek, var(--tap));
+  /* as wide as leaves the 2:3 sheet, the tab and the journey line whole above the bottom layer */
+  width: min(100%, calc((100cqh - var(--bottom-h, 0rem) - var(--_peek) - var(--sp-6) - var(--post-letter-journey-room, var(--_room))) * 2 / 3));
+  margin-inline: auto;
+}
+.post-letter__sheet {
+  position: relative;
+  grid-area: 1 / 1;
+  aspect-ratio: 2 / 3;
+  min-width: 0;
+  min-height: 0;
+  overflow: clip;
+  visibility: hidden;
+  rotate: calc(-1 * var(--post-letter-tilt, 2deg));
+}
+.post-letter__sheet--back { rotate: var(--post-letter-tilt, 2deg); } /* turned over, the lean is the other way */
+.post-letter--back > .post-letter__sheet--back,
+.post-letter--picture > .post-letter__sheet--picture { visibility: visible; }
+.post-letter:not(:has(> .post-letter__journey)) { --_room: 0rem; } /* no journey line: its room goes back to the sheet */
+.post-letter__journey { grid-area: 2 / 1; margin: var(--sp-3) 0 0; text-align: center; font: var(--type-caption); color: var(--post-letter-journey-ink, var(--on-surface-muted)); }
+
+/* the picture side: the print with its white margin, the place printed under it */
+.post-letter__sheet--picture {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: var(--sp-2);
+  padding: var(--post-letter-picture-pad, var(--sp-3));
+  --_pad: var(--post-letter-picture-pad, var(--sp-3));
+}
+.post-letter__pic { min-height: 0; border-radius: var(--sp-1); overflow: clip; }
+.post-letter__pic > * { display: block; width: 100%; height: 100%; object-fit: cover; }
+.post-letter__caption { margin: 0; min-height: 1.35em; font: var(--type-caption); color: var(--_muted); }
+/* the voice on the picture side: the play button over the print's corner, its time under it in the margin */
+.post-letter__voice { position: absolute; inset-block-end: var(--_pad); inset-inline-end: calc(var(--_pad) + var(--sp-2)); display: grid; justify-items: center; gap: var(--sp-2); cursor: auto; }
+.post-letter__time { font: var(--type-caption); font-variant-numeric: tabular-nums; color: var(--_muted); }
+
+/* the written side */
+.post-letter__sheet--back { display: flex; flex-direction: column; gap: var(--post-letter-gap, var(--sp-4)); padding: var(--post-letter-pad, var(--sp-5)); }
+.post-letter__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); padding-block-end: var(--sp-4); border-block-end: var(--rule-w) solid var(--_rule); }
+.post-letter__to { display: grid; gap: var(--sp-2); min-width: 0; align-self: stretch; align-content: space-between; }
+.post-letter__kicker { font: var(--type-caption); color: var(--_muted); letter-spacing: 0.08em; }
+.post-letter__lines { display: grid; gap: var(--sp-1); }
+.post-letter__line { display: block; padding-block: var(--sp-1); border-block-end: var(--border-w) solid var(--_rule); font: var(--type-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.post-letter__line--name { font: var(--type-title); }
+.post-letter__line > small { font: var(--type-caption); color: var(--_muted); margin-inline-end: var(--sp-2); }
+.post-letter__message {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  font: var(--post-letter-hand-font, var(--type-h2));
+  font-size: var(--post-letter-hand-font-size, var(--fs-lg));
+  line-height: var(--post-letter-hand-leading, 1.6);
+}
+.post-letter__message > p { margin: 0; }
+.post-letter__sign { align-self: flex-end; }
+
+/* the tab: the showing edge of the sheet behind is the control that brings it forward. A chip in the strip over the pair;
+   its tap target is the strip's whole height (the ::after). The press and the ring are the PRESS list's (actions.css) */
+.post-letter__turn {
+  position: absolute;
+  inset-block-start: calc(var(--_peek) / 2);
+  inset-inline-start: var(--sp-2);
+  translate: 0 -50%;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-1) var(--sp-3);
+  border: 0;
+  border-radius: var(--r-chip);
+  background: var(--post-letter-tab-bg, var(--action-bg));
+  color: var(--post-letter-tab-ink, var(--action-ink));
+  font: var(--type-label);
+  box-shadow: var(--shadow-float);
+}
+.post-letter__turn::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; height: var(--_peek); translate: 0 -50%; }
+
+/* ============================================================
+   post-desk — WRITING one. The paper stays landscape and twice the screen; the phone looks at one half. Half of a 3:2 card
+   is a 3:4 panel, so each half fills the hand: write on the left, slide the paper, address and stamp the right.
+   The stamp box is a button; struck, the postmark lands on it; sent, the card leaves upward. Lives in a `Page bleed`.
+   <div class="post-desk post-desk--message post-desk--writing">
+     <div class="post-desk__window">
+       <div class="post-desk__card post-paper">
+         <section class="post-desk__half post-desk__half--message"><textarea class="post-desk__write"></textarea></section>
+         <section class="post-desk__half post-desk__half--address" inert>
+           <div class="post-desk__corner"><div class="post-corner">…postmark…<button class="post-corner__stamp post-desk__slot" aria-pressed="false">…</button></div></div>
+           <div class="post-desk__lines"><label class="post-desk__line"><span>ถึง</span><input></label>…</div>
+         </section>
+       </div>
+       <button class="post-desk__reach post-desk__reach--address"></button>
+       <div class="post-desk__gone">…</div>
+     </div>
+     <p class="post-desk__note">…</p>
+     <div class="post-desk__stamps" role="group"><button class="post-desk__pick" aria-pressed="false">…stamp…</button>…</div>
+   </div>
+   ============================================================ */
+.post-desk { container-type: inline-size; display: grid; gap: var(--post-desk-gap, var(--sp-3)); }
+.post-desk__window { position: relative; min-width: 0; }
+.post-desk__card {
+  --_peek: var(--post-desk-peek, var(--sp-6));
+  --_p: min(calc(100cqi - var(--_peek)), calc((100cqh + var(--kb, 0rem) - var(--bottom-h, 0rem) - var(--sp-12) * 2) * 0.75)); /* + --kb: the screen's box shrinks under a keyboard, the paper never does — what was written must still fit */
+  --_x: 0rem;
+  --_y: 0rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: calc(var(--_p) * 2);
+  aspect-ratio: 3 / 2;
+  translate: var(--_x) var(--_y);
+  transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
+}
+.post-desk--address .post-desk__card { --_x: calc(100cqi - var(--_p) * 2); }
+.post-desk--sent .post-desk__card { --_y: -160%; rotate: -5deg; }
+.post-desk__half { min-width: 0; min-height: 0; padding: var(--post-desk-pad, var(--sp-5)); display: flex; flex-direction: column; }
+.post-desk__half--address { border-inline-start: var(--rule-w) solid var(--_rule); gap: var(--sp-4); }
+.post-desk__write {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  resize: none;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: var(--post-desk-hand-font, var(--type-h2));
+  line-height: calc(var(--fs-body) * var(--post-desk-leading, 1.7));
+  --_line: calc(var(--fs-body) * var(--post-desk-leading, 1.7));
+  /* the ruled lines: one under every line of writing */
+  background-image: linear-gradient(to bottom, transparent calc(100% - var(--border-w)), var(--_rule) 0);
+  background-size: 100% var(--_line);
+  caret-color: currentColor;
+}
+.post-desk__write::placeholder { color: var(--_muted); }
+.post-desk__corner { display: flex; justify-content: flex-end; }
+.post-desk__lines { display: grid; gap: var(--sp-3); margin-block-start: auto; padding-block-end: var(--sp-6); }
+.post-desk__line { display: grid; gap: var(--sp-0); border-block-end: var(--border-w) solid var(--_rule); }
+.post-desk__line:focus-within { border-block-end-color: currentColor; }
+.post-desk__line > span { font: var(--type-caption); color: var(--_muted); }
+.post-desk__line > input { width: 100%; min-width: 0; min-height: var(--tap); border: 0; outline: none; background: transparent; color: inherit; font: var(--type-title); }
+.post-desk__line > input::placeholder { color: var(--_muted); }
+/* the stamp box: empty it is a dashed place to press; pressed, the chosen stamp lies in it */
+.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; }
+}
+@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)); }
+.post-desk__reach--message { inset-inline-start: calc(-1 * var(--screen-pad)); }
+.post-desk__reach:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+/* the sender's stamps to choose from, under the card */
+.post-desk__stamps { display: flex; gap: var(--post-desk-stamps-gap, var(--sp-4)); align-items: center; }
+.post-desk__pick {
+  display: grid;
+  place-items: center;
+  min-width: var(--tap);
+  min-height: var(--tap);
+  padding: var(--sp-1);
+  border: 0;
+  border-block-end: var(--rule-w) solid transparent;
+  background: transparent;
+}
+.post-desk__pick > .stamp { --_w: calc(var(--sp-2) * 9); width: var(--post-desk-pick-w, var(--_w)); max-width: none; rotate: var(--post-corner-stamp-tilt, 2deg); } /* in the tray a stamp keeps its words */
+.post-desk__pick[aria-pressed="true"] { border-block-end-color: var(--on-surface); }
+.post-desk__note { margin: 0; font: var(--type-caption); color: var(--post-desk-note-ink, var(--on-surface-muted)); min-height: 1.35em; }
+/* what stands where the card was, once it has left */
+.post-desk__gone { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--sp-2); }
+@media (prefers-reduced-motion: reduce) { .post-desk__card { transition: none; } }
+
+/* ============================================================
+   post-box — KEEPING many. The cards whole and landscape, standing one behind another; each shows its top edge: who, where,
+   when, the stamp and the postmark. Pressing an edge parts the box: every card in front slides down and the whole card is
+   there to read. The newest stands in front — the foot of the list, nearest the thumb.
+   <ul class="post-box">
+     <li class="post-box__card post-paper is-open">
+       <button class="post-box__edge" aria-expanded="true"><span class="post-box__from">แม่</span><span class="post-box__when">เชียงใหม่ · 3 ม.ค. 69</span></button>
+       <div class="post-corner" aria-hidden="true">…</div>
+       <div class="post-box__body"><p class="post-box__message">…</p><div class="post-box__to"><span>ถึง ฝน</span>…</div></div>
+     </li>…
+   </ul>
+   ============================================================ */
+/* the card first: its edge is the knob's real reader — the box (below) hands the same length on to the parting */
+.post-box__card {
+  position: relative;
+  height: var(--_h);
+  margin-block-end: calc(var(--_e) - var(--_h));
+  display: grid;
+  grid-template-rows: var(--post-box-edge, var(--_edge)) minmax(0, 1fr);
+  transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
+}
+.post-box {
+  --_edge: calc(var(--sp-base) * 20);
+  --_e: var(--post-box-edge, var(--_edge));
+  --_h: calc(100cqi * 2 / 3);
+  --_part: calc(var(--_h) - var(--_e) + var(--sp-3));
+  container-type: inline-size;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+.post-box:has(> .post-box__card.is-open:not(:last-child)) { padding-block-end: var(--_part); }
+.post-box__card:last-child { margin-block-end: 0; }
+.post-box__card:nth-child(3n + 1) { rotate: var(--post-box-lean, 0.6deg); }
+.post-box__card:nth-child(3n + 2) { rotate: calc(var(--post-box-lean, 0.6deg) * -0.8); }
+.post-box__card.is-open { rotate: none; }
+.post-box__card.is-open ~ .post-box__card { translate: 0 var(--_part); }
+.post-box__edge {
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  gap: var(--sp-0);
+  padding: var(--sp-2) calc(var(--tap) * 2.75) var(--sp-1) var(--sp-4);
+  border: 0;
+  border-radius: var(--post-paper-radius, var(--sp-2));
+  background: transparent;
+  color: inherit;
+  text-align: start;
+}
+.post-box__edge:focus-visible { outline-offset: calc(-1 * var(--sp-1)); }
+.post-box__from { font: var(--type-title); }
+.post-box__when { font: var(--type-caption); color: var(--_muted); white-space: nowrap; }
+.post-box__card > .post-corner { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-4); pointer-events: none; }
+.post-box__body { min-height: 0; display: grid; grid-template-columns: 5fr 4fr; padding: 0 var(--sp-4) var(--sp-3); }
+.post-box__message { margin: 0; padding-inline-end: var(--sp-3); font: var(--type-caption); font-family: var(--font-display); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; align-self: start; }
+.post-box__to { display: grid; align-content: end; gap: var(--sp-1); padding-inline-start: var(--sp-3); border-inline-start: var(--border-w) solid var(--_rule); min-width: 0; }
+.post-box__to > span { padding-block: var(--sp-1); border-block-end: var(--border-w) solid var(--_rule); font: var(--type-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* behind another card only the mark's top shows: the place alone, lifted clear of the next card's edge */
+.post-box__card:not(.is-open) .postmark > span:last-child:not(:first-child) { display: none; }
+.post-box__card:not(.is-open) .postmark { box-sizing: border-box; place-content: start center; padding-block-start: calc(var(--_size) * 0.18); }
+@media (prefers-reduced-motion: reduce) { .post-box__card { transition: none; } }