@usableapp/cardds 0.7.82 → 0.7.84

package/dist/cardds.css

@@ -770,14 +770,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    height, only the row gap. */
 .card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
 
-/* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right and AS TALL AS BOTH LINES — the heading and the
-   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. A stamp has no size of its own in a flex
-   row (a width of 100% of the head, up to its cap), so it takes --card-head-stamp-w here, as a stamp in an AvatarStack takes a width of its own.
+/* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
+   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
+   stamp.css); the head only places it.
    <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><span class="stamp">…</span></div> */
 .card__head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
 .card__head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
 .card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
-.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; width: var(--card-head-stamp-w, calc(var(--tap) * 2)); margin-inline: 0; }
+.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
@@ -2624,6 +2624,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .dot--warn { background: var(--signal-warn); }
 .dot--error { background: var(--signal-error); }
 .dot--info { background: var(--signal-info); }
+/* --sm: a small LABEL (a name on a note, a tag in a tight head) — low and tight; never a tap target */
+.chip--sm { min-height: 0; gap: var(--chip-sm-gap, var(--sp-1)); padding: var(--chip-sm-pad-y, var(--sp-0)) var(--chip-sm-pad-x, var(--sp-2)); }
 .chip--on { background: var(--chip-on-bg, var(--accent)); color: var(--chip-on-ink, var(--on-accent)); border-color: transparent; }
 /* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (README 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); }
@@ -3184,9 +3186,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .avatar-stack { display: inline-flex; align-items: center; }
 .avatar-stack > .avatar { box-shadow: 0 0 0 var(--sp-1) var(--card-bg, var(--surface)); }
 .avatar-stack > .avatar + .avatar { margin-left: calc(-1 * var(--sp-3)); }
-/* stamps in the stack: a Stamp is as wide as its column, and an inline row has none — so it brings one, as tall as an sm head (4:5) and a little overlapped, like the heads
+/* a stamp in the stack is the stamp's small size, the one a stuck stamp is (--stamp-sm-size, 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 { --_stack-w: calc(var(--avatar-sm) * 4 / 5); flex: none; width: var(--avatar-stack-stamp-w, var(--_stack-w)); margin-inline: 0; }
+.avatar-stack > .stamp { flex: none; width: var(--stamp-sm-size, var(--tap)); margin-inline: 0; }
 .avatar-stack > .stamp + .stamp { margin-left: calc(-1 * var(--sp-2)); }
 /* more: the count that trails the stack — plain words on the ground, title size so it reads at arm's length (the accent "+7" avatar is the small, framed way) */
 .avatar-stack__more { margin-left: var(--avatar-stack-more-gap, var(--sp-3)); font: var(--avatar-stack-more-font, var(--type-title)); color: var(--avatar-stack-more-ink, inherit); white-space: nowrap; }
@@ -3762,15 +3765,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .bullets__text { flex: 1; min-width: 0; }
 
 /* ---- css/sticky.css — sticky note, its field, tone chooser, thread of posts, pile ---- */
-/* cardds — sticky notes: the paper note, the field written on it, the tone chooser, a thread of posts.
+/* cardds — sticky notes: the paper note, the field written on it, the tone chooser, notes stuck on a page, a thread of posts, the answer note.
    A note is its own paper: it brings its colour and its ink, whatever card or palette it lies on. */
 
-/* ---- sticky: a paper note — a flat pastel block, straight, the bottom-right corner folded over ----
-   Straight unless asked (--tilt-left / --tilt-right: the one note of a start screen), never patterned. The corner is CUT on the diagonal and a flap of a darker shade lies over it.
+/* ---- sticky: a paper note — a flat pastel SQUARE of one size, the bottom-right corner folded over ----
+   ONE SIZE (Lh 2026-10-10): every note is --sticky-size square (168), whatever it says; words it cannot hold are cut where the words' room ends,
+   no ellipsis. Square corners. THE FOLD SAYS UNREAD: a folded corner = not read yet, --flat = read.
+   Straight unless asked (--tilt-left / --tilt-right, or a holder that turns its notes), never patterned. The corner is CUT on the diagonal and a flap of a darker shade lies over it.
    <div class="sticky sticky--custard">
      <div class="sticky__paper">
        <div class="sticky__head">12 Oct</div><div class="sticky__body">…</div><div class="sticky__foot">From Noi</div>
-       <span class="sticky__fold"></span>
+       <span class="sticky__fold"></span><span class="sticky__state t-sr">Unread</span>
      </div>
    </div>
    Two boxes on purpose: the OUTER one holds the tone and the shadow, the PAPER is the one that is cut — a clip-path
@@ -3782,16 +3787,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --_muted: color-mix(in srgb, currentColor 62%, transparent); /* muted words: the ink sunk into the paper (currentColor is read where it is used: there it is still the note's ink) */
   padding-inline-end: var(--sticky-fold, var(--sp-6)); /* the knob, read by a real property first (the knob test probes that one); --_fold hands the same value to the paper and the flap */
   --_fold: var(--sticky-fold, var(--sp-6));
-  --_min: calc(var(--tap) * 3);
-  --_cap: calc(var(--tap) * 7);
-  --_tall: calc(var(--tap) * 4.4);
   position: relative;
   display: grid;
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* the paper is the note's size, never its words' */
   box-sizing: border-box;
-  width: fit-content;                              /* hugs its words… */
-  min-width: var(--sticky-min-w, var(--_min));     /* …but a word alone is still a note */
-  max-width: var(--sticky-max-w, 100%);
-  min-height: var(--sticky-min-h, var(--_tall));   /* every note is one height, the height of a note being written (Lh 2026-10-07); more words still grow it */
+  flex: none;
+  width: var(--sticky-size, calc(var(--sp-12) * 3.5)); /* 168: two side by side on a phone */
+  aspect-ratio: 1;
   padding: 0 var(--_fold) var(--_fold) 0; /* = the line above, written whole */
   background-clip: content-box;
   isolation: isolate; /* the two layers below stay under this note, over whatever is behind it */
@@ -3805,7 +3807,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: absolute;
   z-index: -1;
   pointer-events: none;
-  border-radius: var(--sticky-radius, var(--sp-1));
+  border-radius: var(--sticky-radius, 0rem);
   background-image: linear-gradient(-45deg, transparent calc(var(--_fold) * 0.7071), var(--_ink) 0); /* the folded corner, cut */
 }
 .sticky::after { --_ink: var(--sticky-edge-bg, rgb(0 0 0 / 0.14)); inset: calc(-1 * var(--border-w)); }
@@ -3833,18 +3835,20 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   gap: var(--sticky-gap, var(--sp-3));
   box-sizing: border-box;
   min-width: 0;
+  min-height: 0;
   margin: 0 calc(-1 * var(--_fold)) calc(-1 * var(--_fold)) 0;
   padding: var(--sticky-pad-y, var(--sp-4)) var(--sticky-pad-x, var(--sp-4));
-  border-radius: var(--sticky-radius, var(--sp-1));
+  border-radius: var(--sticky-radius, 0rem);
   background-color: inherit;
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_fold)), calc(100% - var(--_fold)) 100%, 0 100%);
 }
-.sticky__head { display: flex; align-items: center; gap: var(--sticky-head-gap, var(--sp-2)); font: var(--sticky-head-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
+.sticky__head { flex: none; display: flex; align-items: center; gap: var(--sticky-head-gap, var(--sp-2)); font: var(--sticky-head-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
 .sticky__head > .ph { flex: 1 1 0; min-width: 0; } /* a picture in the head takes the note's width */
 .sticky__head:has(> .sticky-date) { align-items: start; }
 .sticky__head:has(> .sticky-date) > .ph { flex: none; width: var(--sticky-pic-size, calc(var(--tap) * 1.5)); min-height: 0; aspect-ratio: 1; } /* beside a date the picture is a small square at the start */
-.sticky__body { flex: 1 1 auto; min-width: 0; font: var(--sticky-font, var(--type-title)); overflow-wrap: anywhere; }
-.sticky__foot { font: var(--sticky-foot-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); padding-inline-end: var(--_fold); } /* the line stops before the fold */
+.sticky__body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: clip; /* words past the note's room are cut, the foot keeps its place */ font: var(--sticky-font, var(--type-title)); overflow-wrap: anywhere; }
+.sticky__paper > :not(.sticky__body) > .chip { border-color: transparent; background-color: var(--sticky-chip-bg, rgb(255 255 255 / 0.85)); color: var(--sticky-ink, #141414); } /* a chip on a note is a label ON the paper (whose note it is): a pale ground nearly opaque (it may lie over words), no edge, the note's ink */
+.sticky__foot { flex: none; font: var(--sticky-foot-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); padding-inline-end: var(--_fold); } /* the line stops before the fold */
 /* the flap: a square in the corner — the paper's cut takes its outer half, what is left is the triangle lying on the note */
 .sticky__fold {
   position: absolute;
@@ -3856,12 +3860,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background-color: var(--sticky-fold-bg, color-mix(in srgb, currentColor 14%, transparent)); /* a darker shade of whatever the paper is */
   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. */
+/* 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. */
 .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; }
 
-/* --tilt: the note turned a little on its middle. Straight is the rule; this is for the one note a start screen hands over. */
+/* --tilt: the note turned a little on its middle — the one note a start screen hands over. Notes on a board or in a lapped thread are turned by their holder. */
+/* a note that stands alone in a page's column or in a centre stands in its middle */
+.page > .sticky, .screen__centre > .sticky { margin-inline: auto; }
 .sticky--tilt-left, .sticky--tilt-right { margin-block: var(--sp-4); } /* the turned corners and the shadow need room: a box that scrolls (a centre) would cut them */
 .sticky--tilt-left { rotate: calc(-1 * var(--sticky-tilt, 5deg)); }
 .sticky--tilt-right { rotate: var(--sticky-tilt, 5deg); }
@@ -3872,9 +3879,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky-date__day { font: var(--sticky-date-day-font, var(--type-stat)); }
 .sticky-date__month { font: var(--sticky-date-month-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
 
-/* --square: the note to write on — 1:1, as wide as its column up to a cap, in the middle */
-.sticky--square { width: 100%; max-width: var(--sticky-square-max-w, var(--_cap)); aspect-ratio: 1; margin-inline: auto; }
-
 /* --corner: a control stands ON the bottom-right corner, half outside. The paper is notched round it (a mask, so no
    ground colour is needed; the edge and the shadow are notched the same way); the note has no fold. */
 .sticky__corner {
@@ -3890,7 +3894,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* the half of the control that stands outside is the note's own room: it never runs past the column, nor onto what follows */
 .sticky--corner {
   --_corner: var(--sticky-corner-size, var(--tap-sm)); /* the same default as .sticky__corner above: the paper's notch needs it too */
-  max-width: calc(var(--sticky-max-w, 100%) - var(--_corner) / 2);
   margin: 0 calc(var(--_corner) / 2) calc(var(--_corner) / 2) 0;
 }
 .sticky--corner::before, .sticky--corner::after { background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--_corner) / 2 + var(--sp-1)), var(--_ink) 0); }
@@ -3901,16 +3904,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   mask: radial-gradient(circle at 100% 100%, transparent calc(var(--_notch) - var(--border-w)), #000 var(--_notch));
 }
 
-/* a tilted square is sized by the SCREEN, not by a length: three quarters of its width inside the inset, about two thirds of the glass (Lh 2026-10-06) — the turned corners
-   keep clear of the edges on any phone. cqw reads the fill screen (the size container). After --square, so it wins. */
-.sticky--square.sticky--tilt-left, .sticky--square.sticky--tilt-right { max-width: var(--sticky-tilt-max-w, 75cqw); }
-
 /* --tap: the whole note is the button (`onClick`). The fold stays; the ring follows the note's turn. */
 .sticky--tap { appearance: none; border: 0; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .sticky--tap .sticky__body, .sticky--tap .sticky__foot { display: block; }
 .sticky--tap:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .sticky--tap:active > .sticky__paper { translate: 0 var(--sp-0); }
 
+/* a name label in the foot (a Chip, `sm`) stands at the START, what follows it (the time) at the end, on one line: a long name is cut
+   with an ellipsis past its share of the row and never wraps; the time is never cut (a long one may run a little onto the fold) */
+.sticky__paper > .sticky__foot:has(> .chip) { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); white-space: nowrap; text-align: end; }
+.sticky__foot > .chip { display: block; flex: none; min-width: 0; max-width: var(--sticky-foot-chip-max-w, 62%); overflow: hidden; text-overflow: ellipsis; text-align: start; }
+
 /* ---- sticky field: the words written ON a note — a bare textarea in the note's type and ink, filling it ----
    <div class="sticky__body"><textarea class="sticky-field" aria-label="Note" placeholder="Add text to this note"></textarea></div> */
 .sticky__body:has(> .sticky-field) { display: grid; }
@@ -3918,7 +3922,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: block;
   box-sizing: border-box;
   width: 100%;
-  min-height: var(--sticky-field-min-h, var(--_min));
+  height: 100%; /* the note's whole room: a touch anywhere on the paper writes */
   resize: none;
   border: 0;
   margin: 0;
@@ -3974,7 +3978,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky-post__name { min-width: 0; font: var(--sticky-post-name-font, var(--type-label)); overflow-wrap: anywhere; }
 .sticky-post__time { margin-inline-start: auto; font: var(--sticky-post-time-font, var(--type-caption)); color: var(--sticky-post-time-ink, var(--on-surface-muted)); white-space: nowrap; }
 .sticky-post__notes { grid-area: 2 / 2; display: grid; justify-items: start; gap: var(--sticky-post-notes-gap, var(--sp-3)); min-width: 0; }
-.sticky-post__notes > .sticky { max-width: var(--sticky-post-max-w, 85%); } /* a note leaves the far side open, as a bubble does */
 .sticky-post__rail { display: none; grid-area: 2 / 1; justify-self: center; align-self: stretch; color: var(--sticky-thread-rail-ink, var(--on-surface-muted)); border-inline-start: var(--rule-w) dotted currentColor; margin-block-end: calc(-1 * var(--_thread-gap)); } /* runs on through the gap to the next avatar */
 .sticky-thread--rail > .sticky-post:not(:last-child) > .sticky-post__rail { display: block; }
 /* a chat (no rail): a note leans on its writer's own edge of the thread — it starts under the avatar, not under the name, so theirs and mine stand apart (Lh 2026-10-07: both sat in the middle). With a rail the notes keep clear of it, under the name. */
@@ -3986,6 +3989,116 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky-post--right > .sticky-post__notes { grid-column: 1; justify-items: end; }
 .sticky-post--right > .sticky-post__rail { grid-column: 2; }
 
+/* --lapped: a chat with NO head rows (Lh 2026-10-10) — theirs at the left, mine at the right, each turn lying over a corner of the one before
+   on the other side; two turns from one side have nothing to lie over and stand a small gap apart. The time stands close under its note, on
+   its own side; the avatar is not drawn and the name is only heard (it stands once, in the screen's top bar). The thread is two notes wide
+   less what they share, in the middle of its column, so the corners cross on any phone. Later = on top: the order of the turns. */
+.sticky-thread--lapped {
+  gap: 0;
+  width: 100%;
+  max-width: calc(2 * var(--sticky-size, calc(var(--sp-12) * 3.5)) - var(--sticky-thread-lap-x, var(--sp-8))); /* 304: the two sides cross 32 in the middle (38 as they lie turned — the prototype's 39); on a 375 phone each stands 19.5 in from the screen's inset */
+  margin-inline: auto;
+  padding-block-start: var(--sp-4); /* the first note's turned corner */
+}
+.sticky-thread--lapped > .sticky-post { position: relative; display: grid; grid-template-columns: auto; justify-self: start; justify-items: start; row-gap: var(--sticky-thread-time-gap, var(--sp-0)); margin-block-start: var(--sticky-thread-same-gap, var(--sp-2)); }
+.sticky-thread--lapped > .sticky-post:first-child { margin-block-start: 0; }
+.sticky-thread--lapped > .sticky-post--right { justify-self: end; justify-items: end; }
+.sticky-thread--lapped > .sticky-post:not(.sticky-post--right) + .sticky-post--right,
+.sticky-thread--lapped > .sticky-post--right + .sticky-post:not(.sticky-post--right) { margin-block-start: calc(-1 * var(--sticky-thread-lap, calc(var(--sp-1) * 19))); } /* 76 */
+.sticky-thread--lapped > .sticky-post > .sticky-post__who { display: none; }
+.sticky-thread--lapped > .sticky-post > .sticky-post__notes { grid-area: 1 / 1; }
+.sticky-thread--lapped > .sticky-post > .sticky-post__head { grid-area: 2 / 1; }
+.sticky-thread--lapped > .sticky-post > .sticky-post__head > .sticky-post__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* as .t-sr: heard, not seen */
+.sticky-thread--lapped > .sticky-post > .sticky-post__head > .sticky-post__time { margin-inline: 0; }
+.sticky-thread--lapped > .sticky-post > .sticky-post__head:not(:has(> .sticky-post__time)) { display: none; }
+/* each note leans a little, one way then the other */
+.sticky-thread--lapped > .sticky-post > .sticky-post__notes > .sticky { rotate: calc(-1 * var(--sticky-thread-tilt, 2deg)); }
+.sticky-thread--lapped > .sticky-post:nth-child(even) > .sticky-post__notes > .sticky { rotate: var(--sticky-thread-tilt, 2deg); }
+/* under an answer note the thread ends with the room that note stands in: the last turn scrolls up clear of it */
+.screen:has(> .sticky-answer) .sticky-thread--lapped { padding-block-end: calc(var(--sticky-size, calc(var(--sp-12) * 3.5)) * var(--sticky-answer-show, 0.75) + var(--sp-6)); }
+
+/* ---- sticky board: notes stuck on a page — rows that wrap by the width, each note turned a little ----
+   <div class="sticky-board"><button class="sticky sticky--tap …">…</button>…</div>
+   As many notes in a row as the width holds (two on a phone, three from 504 of room, a screen about 540 wide), the rows in the middle. The notes stand edge to
+   edge both ways (--sticky-board-lap 0): only their turned corners cross. LATER = ON TOP, always: the right one over the left, the lower over
+   the upper — the order of the notes, no z-index. Where two notes do not fit side by side, each lies over the one before by what is
+   missing, so a phone still shows two — but never by more than half the fold, which would hide the corner that says unread: past that, one in a row.
+   The columns are tracks of the note's size less the lap; a note is wider than its track by the lap, and the room at the end is what the last
+   of a row runs into — none is cut. The tracks are 50% while the lap is the missing room (padding % and track % read the same width).
+   A note here is the SAME note as inside its chat (Lh 2026-10-11): on the paper only what is the note's own — its words, its time at the END
+   of the foot, the stamps really stuck on it. Whose it is, is a label of the page: a small Chip at the start of the note's foot.
+   The foot takes no room from the words (below). */
+.sticky-board {
+  --_size: var(--sticky-size, calc(var(--sp-12) * 3.5));
+  --_most: calc(var(--sticky-fold, var(--sp-6)) / 2);
+  padding-inline-end: clamp(var(--sticky-board-lap, 0rem), 2 * var(--_size) - 100%, var(--_most));
+  --_cell: max(var(--_size) - var(--_most), min(var(--_size) - var(--sticky-board-lap, 0rem), 50%));
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--_cell));
+  grid-auto-rows: calc(var(--_size) - var(--sticky-board-lap, 0rem)); /* down the page the lap is the set one: a page is as long as it needs */
+  justify-content: center;
+  padding-block: var(--sp-2) calc(var(--sticky-board-lap, 0rem) + var(--sticky-board-drop, var(--sp-2)) + var(--sp-2)); /* the turned corners above; below, the last row's overhang and its drop */
+}
+.sticky-board > * { position: relative; }
+.sticky-board > :nth-child(even) { translate: 0 var(--sticky-board-drop, var(--sp-2)); } /* tops of a row NEAR one line, not on it */
+/* the foot is laid OVER the note's foot, out of its flow: the words keep the whole paper, so they break exactly as they do where the note is
+   opened (Lh 2026-10-11 — a clamp showed three lines and "…" on the page and four inside). A long note's last line runs under the label and the time. */
+.sticky-board .sticky__paper > .sticky__foot { position: absolute; inset: auto var(--sticky-board-foot-inset, var(--sp-3)) var(--sticky-board-foot-inset, var(--sp-3)); text-align: end; }
+/* how far each is turned: FOUR unlike angles in turn (Lh 2026-10-11). At most three notes meet, so four keep the lean from ever looking the
+   same: two in a row, a note lies over the one two before it and those lean opposite ways; three in a row, over the one three before it,
+   never the same angle. (A run of seven left one column at 0.75° and −0.5°: its edges read as one straight line and the lean was lost.) */
+.sticky-board > :nth-child(4n + 1) { rotate: var(--sticky-board-turn-1, -3deg); }
+.sticky-board > :nth-child(4n + 2) { rotate: var(--sticky-board-turn-2, 1.5deg); }
+.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 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>
+     <div class="sticky-answer__note"><div class="sticky sticky--flat">…<textarea class="sticky-field"></textarea>…</div></div>
+     <div class="sticky-answer__under" inert>
+       <div class="sticky-answer__tools">…the paper chooser · the send button…</div>
+       <div class="sticky-answer__tray">…what else stands under them (the writer's stamp)…</div>
+     </div>
+   </div>
+   A LAYER of the screen (its child), as the snackbar is. AT REST the note stands near the right, three quarters of it above the screen's
+   foot (--sticky-answer-show), turned a little; what stands under it is out of sight and inert. WRITING it stands straight in the middle under
+   the top bar, the screen behind is washed pale and takes no touch, tools and tray stand under it. The note keeps its one size in both
+   places. One `top`, one `right` — they slide between the two places; nothing else moves. */
+.sticky-answer {
+  --_size: var(--sticky-size, calc(var(--sp-12) * 3.5));
+  position: fixed; inset: 0;
+  max-width: var(--screen-w); margin-inline: auto;
+  overflow: clip;
+  z-index: var(--z-fab);
+  pointer-events: none;
+}
+.screen--fill > .sticky-answer { position: absolute; }
+.sticky-answer--writing { z-index: calc(var(--z-top) + 1); }
+.sticky-answer__scrim { position: absolute; inset: 0; background: var(--sticky-answer-scrim-bg, color-mix(in srgb, var(--surface) 82%, transparent)); opacity: 0; visibility: hidden; transition: opacity var(--motion-sheet) ease, visibility 0s var(--motion-sheet); }
+.sticky-answer--writing > .sticky-answer__scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
+.sticky-answer__note {
+  position: absolute;
+  top: calc(100% - var(--_size) * var(--sticky-answer-show, 0.75) - max(var(--safe-bottom), var(--kb, 0px)));
+  right: var(--sticky-answer-end, var(--screen-pad));
+  rotate: var(--sticky-answer-tilt, -3deg);
+  pointer-events: auto;
+  transition: top var(--motion-sheet) ease, right var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
+}
+.sticky-answer--writing > .sticky-answer__note { top: calc(var(--safe-top) + var(--header-h) + var(--sticky-answer-top, var(--sp-5))); right: calc(50% - var(--_size) / 2); rotate: 0deg; }
+.sticky-answer__under {
+  position: absolute; inset-inline: var(--screen-pad);
+  top: calc(var(--safe-top) + var(--header-h) + var(--sticky-answer-top, var(--sp-5)) + var(--_size) + var(--sticky-answer-gap, var(--sp-4)));
+  display: grid; gap: var(--sticky-answer-gap, var(--sp-4));
+  opacity: 0; visibility: hidden;
+  transition: opacity var(--motion-sheet-rest) ease, visibility 0s var(--motion-sheet-rest);
+}
+.sticky-answer--writing > .sticky-answer__under { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: var(--motion-sheet-rest), 0s; }
+.sticky-answer__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sticky-answer-tools-gap, var(--sp-3)); }
+.sticky-answer__tools > .sticky-pick { justify-content: start; }
+.sticky-answer__tray { display: grid; gap: var(--sticky-answer-tray-gap, var(--sp-2)); }
+@media (prefers-reduced-motion: reduce) { .sticky-answer__scrim, .sticky-answer__note, .sticky-answer__under { transition: none; } }
+
 /* ---- css/stamp.css — stamp, empty place, album page, a stamp stuck on a surface ---- */
 /* cardds — stamps: the paper stamp, an empty place for one, the album page, a stamp stuck on a surface.
    A stamp is its own paper, like a sticky note: it brings its ground and its ink, whatever card or palette it lies on.
@@ -4002,13 +4115,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    </span>
    Two boxes, as the sticky note: the OUTER one holds the size and the shadow, the PAPER is the one whose edge is
    punched (a mask on the outer box would cut its own shadow off). The stamp is a size container: every inner length
-   is a share of its width (cqw), so it reads the same from a tray to a sheet. The ground wears a sticky tone class —
-   one list of tones (src/sticky/tones.ts), one set of tone knobs. */
+   is a share of its width (cqw). The ground wears a sticky tone class — one list of tones (src/sticky/tones.ts), one
+   set of tone knobs.
+   ONE SIZE (Lh 2026-10-11): a stamp, and the empty place for one, is --stamp-size wide wherever it stands — in a book, a tray,
+   a card's head, a centre, a sheet, a page. What holds it only PLACES it. There is ONE other size, the small one, --stamp-sm-size
+   (one tap: half the stamp), for a stamp stuck ON something (`.stamp-on`, below) and a stamp in an avatar stack (people.css): one knob for both.
+   ONE exception, by the owner's decision (Lh 2026-10-11): the stamp at a postcard's corner (post.css) is the postcard's own size, 72 × 90,
+   --post-corner-stamp-w, in neither. The desk's tray (post.css) holds stamps of the standard size. */
 .stamp, .stamp-place {
-  --_cap: calc(var(--tap) * 4.5);
   box-sizing: border-box;
-  width: 100%;                                  /* sized by its column… */
-  max-width: var(--stamp-max-w, var(--_cap));   /* …up to a cap */
+  width: var(--stamp-size, calc(var(--tap) * 2));
+  max-width: 100%;                              /* a holder narrower than a stamp still shows it whole */
   aspect-ratio: 4 / 5;
   margin-inline: auto;
 }
@@ -4052,7 +4169,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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)); }
-/* tiny (a tray, an album cell, a stamp stuck on a note): the small line goes, the name grows */
+/* 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. */
 .stamp--bare .stamp__cap, .stamp-on .stamp__cap, .post-corner .stamp__cap { display: none; }
@@ -4071,12 +4188,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --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: sized by the SCREEN (a little over half its width inside the inset), its greeting centred under it */
+/* 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; }
-.screen__centre > :is(.stamp, .stamp-place) { max-width: var(--stamp-centre-max-w, 56cqw); }
-/* in the room above a closed stack's heads the stamp is held by that room's HEIGHT too: its height at most 45% of it, so two lines of words under it
-   still fit on a short phone (320×568 left 253px for a group 314 tall — reported by timebank, 2026-10-07). cqh reads the base, a size container. */
-.sheet-stack__base > .screen__centre > :is(.stamp, .stamp-place) { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
 
 /* ---- 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>
@@ -4124,6 +4237,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .stamp-place--faint { --_edge: var(--stamp-place-faint-border, var(--hairline)); }
 
 /* ---- stamp book: the album page — three stamps across on an album ground, who each is from under it ----
+   The book places its stamps, it does not size them: each stands in the middle of its third. The column gap is the one that lets
+   three stamps keep their size in a phone's column (343 − 2 × 16 of padding − 2 × 8 = 295 ≥ 3 × 96); in a holder narrower than
+   that the thirds, and the stamps with them, shrink alike.
    <div class="stamp-book">
      <button class="stamp-cell"><span class="stamp">…</span><span class="stamp-cell__label">ต้น</span></button>
      <span class="stamp-cell">…</span>
@@ -4133,7 +4249,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: start;
-  gap: var(--stamp-book-row-gap, var(--sp-4)) var(--stamp-book-col-gap, var(--sp-3));
+  gap: var(--stamp-book-row-gap, var(--sp-4)) var(--stamp-book-col-gap, var(--sp-2));
   padding: var(--stamp-book-pad, var(--sp-4));
   border-radius: var(--stamp-book-radius, var(--r-media));
   background-color: var(--stamp-book-bg, var(--ink-tint));
@@ -4141,6 +4257,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .stamp-cell {
   position: relative;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);   /* the cell's one column is the cell, never its stamp: in a third narrower than a stamp the stamp gives way (its max-width) */
   gap: var(--stamp-cell-gap, var(--sp-2));
   min-width: 0;
   appearance: none;
@@ -4167,15 +4284,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   color: var(--stamp-cell-on-ink, var(--on-accent));
 }
 .stamp-cell__on > .icon { width: 70%; height: 70%; }
-/* --bare: no ground, no padding — the stamps lie on what holds the book and fill it: three across, each the whole width of its third (the Stamp's own cap is lifted), the gap the least that still keeps three apart (the shadow's room), the row gap the same. The name is the Stamp's own; free places still draw.
+/* --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 { gap: var(--stamp-book-bare-gap, var(--sp-2)); padding: 0; border-radius: 0; background: none; }
-.stamp-book--bare :is(.stamp, .stamp-place) { max-width: none; }
-/* --strip: ONE line of small stamps that scrolls sideways — the tray a member picks from. No ground. */
+.stamp-book--bare { padding: 0; border-radius: 0; background: none; }
+/* --strip: ONE line of stamps that scrolls sideways — the tray a member picks from, each stamp its own size. No ground. */
 .stamp-book--strip {
-  --_strip: calc(var(--tap) * 1.5);
   display: flex;
-  gap: var(--stamp-book-col-gap, var(--sp-3));
+  gap: var(--stamp-book-col-gap, var(--sp-2));
   padding: var(--sp-2) 0;
   border-radius: 0;
   background: none;
@@ -4184,7 +4299,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   scrollbar-width: none;
 }
 .stamp-book--strip::-webkit-scrollbar { display: none; }
-.stamp-book--strip > * { flex: none; width: var(--stamp-book-strip-w, var(--_strip)); }
+.stamp-book--strip > * { flex: none; }
 
 /* ---- stamp on: a stamp stuck on a surface where the member put it ----
    <div class="sticky__stuck"><div class="stamp-on stamp-on--move" style="--stamp-on-x: 0.8; --stamp-on-y: 0.2; --stamp-on-turn: 6"><span class="stamp">…</span></div></div>
@@ -4194,12 +4309,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: absolute;
   left: calc(var(--stamp-on-x, 0.5) * 100%);
   top: calc(var(--stamp-on-y, 0.5) * 100%);
-  width: var(--stamp-on-w, 27%);
   translate: -50% -50%;
   rotate: calc(var(--stamp-on-turn, 0) * 1deg);
   pointer-events: auto; /* the layer it lies in lets a tap through to the surface; the stamp itself takes it */
 }
-.stamp-on > .stamp { max-width: none; }
+/* 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; }
 .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); }
@@ -4269,7 +4384,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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-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 */
 
 /* ============================================================
    post-letter — READING one that arrived. The written side stood upright: the address half over the message half.
@@ -4452,9 +4567,21 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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; }
+/* the sender's stamps to choose from, under the card: each the standard size (--stamp-size, stamp.css), in one line that scrolls sideways when
+   they outrun the screen — a stamp never shrinks to fit. Three fit a 343 column at 375 (3 × 104 + 2 × 12); with the gap at sp-4 they were 1px over. The padding (taken back by the margin) keeps the focus ring and the lean inside the scroller */
+.post-desk__stamps {
+  display: flex;
+  gap: var(--post-desk-stamps-gap, var(--sp-3));
+  align-items: center;
+  margin: calc(-1 * var(--sp-2));
+  padding: var(--sp-2);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.post-desk__stamps::-webkit-scrollbar { display: none; }
 .post-desk__pick {
+  flex: none;
   display: grid;
   place-items: center;
   min-width: var(--tap);
@@ -4464,7 +4591,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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 > .stamp { 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 */
@@ -4902,6 +5029,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
+/* the answers as WORD buttons (a BtnRow of Btns; Lh 2026-10-11): the row fills the ask with room over it and each button keeps its words on one
+   line — left to its words' width the row squeezed two buttons into round blobs, their words on two lines. A quiet button is an outline only,
+   so on the ask its edge is the ask's ink at full strength (light on the dark end, dark on --light). The BtnTrio of round buttons is not touched. */
+.modal__drawer > .btn-row { justify-self: stretch; margin-top: var(--modal-drawer-answers-gap, var(--sp-5)); white-space: nowrap; }
+.modal__drawer .btn--quiet { border-color: var(--modal-drawer-quiet-border, currentColor); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {