@usableapp/cardds 0.7.82 → 0.7.83

package/dist/cardds.css

@@ -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)); }
@@ -3762,15 +3764,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 +3786,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 +3806,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 +3834,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 +3859,16 @@ 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 one width whatever the note's (48 × 60, the stamp of the album's strip), and may lie over the words. */
 .sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
+.sticky__stuck > .stamp-on { width: var(--sticky-stamp-w, var(--stamp-on-w, var(--sp-12))); } /* the stamp's own knob still reaches it; the note's wins */
 .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.
@@ -4902,6 +5015,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) {