@usableapp/cardds 0.7.103 → 0.7.105

package/css/step.css

@@ -65,132 +65,26 @@
    own screens are composed (the guide); the framework does not police it — a component never changes
    because another one is there. */
 
-/* the reading block: a .page (base.css) — the same words-on-the-base
-   block as anywhere else (it was .step__card, and a .card before 2026-09-16;
-   Lh: a step reads like a page, not a card in a page — so it IS the page's
-   block, one name). Here it keeps a card's inner rhythm (a head, --card-gap
-   between things, the tokens .card publishes for the head and .bleed) and
-   gets the flex rule: it hugs its content, and when the column runs out (a
-   short phone, large text) it shrinks and scrolls inside itself instead of
-   pushing the bar or the sheet */
+/* the reading block (base.css writes where it sits and why): a card's inner rhythm, set here */
 .step > .page, .step > .pages > .page {
   --card-pad: 0rem;              /* published for .bleed: nothing to cancel */
   --card-gap: var(--sp-4);
-  gap: var(--card-gap);
-  padding-block: 0;              /* --_lead carries the top; the bar's room is the step's */
-  color: var(--on-surface);      /* align-content: start is .page's own (base.css) — not restated here */
 }
 /* the reading block is the .page — or the .pages that holds several of them, a walk of words
    (card.css). Behind a PEEKED sheet the words keep the strip's room under them, so whatever is down there
    (the buttons that call the other sheets) scrolls clear of it — CSS alone: the box declares --sheet-peek. */
-.step:has(> .sheet--peek) > :is(.page, .pages) { padding-bottom: var(--sheet-peek); }
-.step > :is(.page, .pages) {
-  flex: 0 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-/* a lone .page carries the margin a walk's .pages does not (its own .page children do, below) —
-   the screen's gap, moved in here from above the step; the inset, taken back from the bleed.
-   It ends with the bottom layer's room, as a walk's page does: it scrolls only when the layer would cover its words
-   (timebank onboard-04, 2026-09-27 — its last Link lay under the bar; Lh: same rule as the walk) */
-.step > .page { margin: var(--_lead, 0) var(--screen-pad) 0; padding-bottom: var(--bottom-h, 0rem); }
-/* --bleed: the page's box runs to the screen's edges, the inset is its own padding — what leans, slides or casts a shadow past
-   the inset (a postcard) is cut at the glass, not at the inset; a little room on top for a turned corner. Nothing pans sideways. */
-.step > .page--bleed { margin-inline: 0; padding-inline: var(--screen-pad); padding-block-start: var(--sp-2); overflow-x: hidden; }
 
-/* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
-   (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
-   padding above AND below — so the words begin near the middle and, when a big text size runs them long, scroll up clear.
-   The walk shows no scrollbar. */
-.step > .pages { touch-action: pan-y; } /* pan-y: the walk scrolls itself up and down; a sideways swipe is the Walkthrough's (it turns the page) */ /* the scrolling box is the whole content: from the step's top edge, edge to edge — no margin, the default (Lh 2026-09-23) */
-.step > .pages > .page {
-  padding-inline: var(--screen-pad); /* the words keep the inset INSIDE it */
-  margin-top: var(--_lead, 0rem); /* the lead is each PAGE's margin (15% with no top, the screen's gap under a bar): the words start there and scroll up to the box's edge */
-  padding-bottom: var(--bottom-h, 0rem); /* exactly the bottom layer (measured by Screen): a page scrolls ONLY when the layer would cover its words, and then just far enough to clear them — at 100% nothing scrolls (Lh 2026-09-23) */
-}
 
 /* a SCROLLING (not fill) screen becomes a column at least one phone tall when it holds a bottom or a centre:
    an .action-bar as its last child (Lh 2026-09-24, 0.7.0: the bar is the column's last row — at the foot when the words are short,
    sticky to the viewport's foot while they scroll; actions.css) or a .screen__centre (Lh 2026-09-12: the group is in flow, takes the
    room after the top bar and centres its children in it; a long one makes the page longer and runs under the bar; card.css) */
-.screen:not(.screen--fill):has(> .action-bar:last-child, > .screen__centre) { display: flex; flex-direction: column; min-height: 100dvh; }
 
-/* ============================================================
-   TOP + CONTENT in one flex column; BOTTOM is a LAYER over them (Lh 2026-09-23, second call — replaces "the bar is a row"):
-   in a .screen--fill the content runs to the screen's bottom edge, and the bar lies over it at the foot — it covers what is
-   under it, on purpose; nothing is added to the content to make room. The keyboard lifts the layer (--kb).
-   (On a scrolling screen the bar is a sticky last row instead, actions.css.)
-   ============================================================ */
-.screen--fill > .action-bar {
-  position: absolute; inset-inline: 0; top: auto; bottom: var(--kb, 0rem);
-  max-width: none;
-  margin: 0;
-  /* room between its top edge and its first row (the walk's dots): since it has a ground, a 0 here put the dots against the words
-     running under it (Lh 2026-09-25) — the bar's own top padding */
-  padding-top: var(--action-bar-fill-pad-top, var(--sp-3));
-  /* its GROUND (Lh 2026-09-24, timebank card 141 — was "no ground of its own"): words that run under the layer mid-scroll
-     showed through the dots, the controls and the buttons. The layer lies on the screen's own surface now; a project sets
-     another (or `transparent`, the old see-through) with the knob */
-  background: var(--action-bar-bg, var(--surface));
-}
-/* the walk's dots are the BOTTOM layer's too (Lh 2026-09-23): a row of the bar, over its buttons, centred */
-.action-bar > .pager__at, .action-bar__tier > .pager__at { align-self: center; }
-/* the TOP is in the column too (Lh 2026-09-23): an .appbar in a fill screen is its first row, not fixed over it — the screen
-   reserves nothing for it; the breathing under it stays the one it had (--sp-2), not the screen's gap */
-.screen--fill > .appbar {
-  position: relative; inset: auto; top: auto;
-  flex: none;
-  max-width: none;
-  margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge; its own padding is the inset */
-  margin-bottom: calc(var(--sp-2) - var(--screen-gap));
-}
-.screen.screen--fill:has(> .appbar) { padding-top: var(--safe-top); --header-gap: 0rem; }
-/* …and a STEP touches it, as it touches a TopBar: a full sheet's top edge on the bar's bottom edge (0.6.5 left 8px of base between
-   them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
-.screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
-.screen--fill > .appbar + .sheet-stage { margin-top: 0; }
-/* a TRACK as the screen's TOP (Lh 2026-10-03): the walk's progress stands where a bar would, a row of the column, in the screen's
-   inset — and it never touches what comes up under it: the step (and so a sheet at full) starts --track-top-gap below it. That
-   room is the track's own, not the screen's gap; --track-top-lead is the air over it, under the status bar. Both = the screen's side inset (16): the pill
-   stands the same distance from everything around it (Lh 2026-10-03: 8 over was too little, 24 under too much). */
-.screen--fill > .track:first-child {
-  flex: none;
-  margin-top: var(--track-top-lead, var(--sp-4));
-  margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
-}
-/* …and over a STAGE (a map behind a sheet, Lh 2026-10-03): the stage is the whole screen, so the track is a LAYER on it — the map
-   shows around the pill — and the stage keeps the track's line free itself: a sheet at full stops --track-top-gap under the
-   track, as in a step. --top-h is the track's own height, measured by Screen (a numbered track grows with the text). */
-.screen--fill > .track:first-child:has(+ .sheet-stage) {
-  position: absolute; z-index: 1;
-  inset: calc(var(--safe-top) + var(--track-top-lead, var(--sp-4))) var(--screen-pad) auto;
-  margin: 0;
-}
 .screen--fill > .track:first-child + .sheet-stage {
   --_top: calc(var(--track-top-lead, var(--sp-4)) + var(--top-h, var(--header-h)) + var(--track-top-gap, var(--sp-4)));
 }
-/* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
-   the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
-.step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
-.step > .pages > .page > :is(img, .ph):first-child {
-  width: calc(100% + 2 * var(--screen-pad)); /* the content's width: the page's inset given back */
-  max-width: none;
-  margin-inline: calc(-1 * var(--screen-pad));
-  height: calc(var(--_lead, 0rem) + var(--page-media-h, 14rem));
-  max-height: none;
-  border-radius: 0;
-  border-inline: 0;
-  border-top: 0;
-  object-fit: cover;
-}
 /* an EMPTY STATE is a component in the content box too (Lh 2026-09-23 — it no longer floats in a Centre over the screen): alone in a
    Step it stands at the human centre of the content, 40% down (two parts of room above it, three below). --empty-state-at is the share of the
    free room that stands above it (a theme's 0.2 puts it a fifth down); a sheet's body holds an only EmptyState by the same share, but defaults to 0: at the top, as it always stood */
 .step:has(> .empty-state)::before { content: ""; flex: calc(var(--empty-state-at, 0.4) * 5) 1 0; }
 .step:has(> .empty-state)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0.4) * 5) 1 0; }
-.step > .empty-state { flex: none; }
-.sheet__body:has(> .empty-state:only-child) { display: flex; flex-direction: column; gap: 0; }
-.sheet__body:has(> .empty-state:only-child)::before { content: ""; flex: calc(var(--empty-state-at, 0) * 5) 1 0; }
-.sheet__body:has(> .empty-state:only-child)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0) * 5) 1 0; }
-.sheet__body > .empty-state:only-child { flex: none; }

package/css/sticky.css

@@ -1,5 +1,5 @@
 /* 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. */
+   A note is pastel paper: its tone is one of the theme's nine pastels (--pastel-*, tokens.css), its ink the onlight set, whatever card it lies on. */
 
 /* ---- 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 written one size smaller
@@ -39,28 +39,28 @@
 .sticky::before, .sticky::after {
   content: "";
   position: absolute;
-  z-index: -1;
+  z-index: var(--z-under);
   pointer-events: none;
   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)); }
+.sticky::after { --_ink: var(--sticky-edge-bg, color-mix(in srgb, var(--ink-onlight) 14%, transparent)); inset: calc(-1 * var(--border-w)); }
 .sticky::before {
-  --_ink: var(--sticky-shadow-bg, rgb(0 0 0 / 0.28));
+  --_ink: var(--sticky-shadow-bg, color-mix(in srgb, var(--ink-onlight) 28%, transparent));
   inset: var(--sp-1) var(--sp-0) calc(-1 * var(--sp-0)) var(--sp-0);
   filter: blur(var(--sticky-shadow-blur, var(--sp-0)));
 }
 .sticky--flat::before, .sticky--flat::after { background: var(--_ink); }
 /* the tones — the names in src/sticky/tones.ts. A swatch of the chooser wears the same class. */
-.sticky--cotton   { background-color: var(--sticky-cotton-bg, #f3efe2); }
-.sticky--blush    { background-color: var(--sticky-blush-bg, #f6d5da); }
-.sticky--tea-leaf { background-color: var(--sticky-tea-leaf-bg, #d5e8c5); }
-.sticky--custard  { background-color: var(--sticky-custard-bg, #f6e9a0); }
-.sticky--salmon   { background-color: var(--sticky-salmon-bg, #f3c7b3); }
-.sticky--iceberg  { background-color: var(--sticky-iceberg-bg, #cfe0ee); }
-.sticky--cocoa    { background-color: var(--sticky-cocoa-bg, #dccbbd); }
-.sticky--apricot  { background-color: var(--sticky-apricot-bg, #f6d49a); }
-.sticky--water    { background-color: var(--sticky-water-bg, #bcd6f3); }
+.sticky--cotton   { background-color: var(--sticky-cotton-bg, var(--pastel-cotton)); }
+.sticky--blush    { background-color: var(--sticky-blush-bg, var(--pastel-blush)); }
+.sticky--tea-leaf { background-color: var(--sticky-tea-leaf-bg, var(--pastel-tea-leaf)); }
+.sticky--custard  { background-color: var(--sticky-custard-bg, var(--pastel-custard)); }
+.sticky--salmon   { background-color: var(--sticky-salmon-bg, var(--pastel-salmon)); }
+.sticky--iceberg  { background-color: var(--sticky-iceberg-bg, var(--pastel-iceberg)); }
+.sticky--cocoa    { background-color: var(--sticky-cocoa-bg, var(--pastel-cocoa)); }
+.sticky--apricot  { background-color: var(--sticky-apricot-bg, var(--pastel-apricot)); }
+.sticky--water    { background-color: var(--sticky-water-bg, var(--pastel-water)); }
 
 .sticky__paper {
   position: relative;
@@ -77,12 +77,10 @@
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_fold)), calc(100% - var(--_fold)) 100%, 0 100%);
 }
 .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; 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--small .sticky__body { font: var(--sticky-small-font, var(--type-label)); } /* the note measured its words and they did not fit at its size (src/sticky/fit.ts) */
-.sticky__paper > :not(.sticky__body) > .chip { border-color: transparent; background-color: var(--sticky-chip-bg, rgb(255 255 255 / 0.85)); --dark: inherit; color: var(--sticky-ink, var(--card-ink)); } /* 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__paper > :not(.sticky__body) > .chip { --chip-border: transparent; --chip-bg: var(--sticky-chip-bg, color-mix(in srgb, var(--stamp-paper) 85%, transparent)); --dark: inherit; --chip-ink: var(--sticky-ink, var(--card-ink)); } /* 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 {
@@ -93,7 +91,7 @@
   height: var(--_fold);
   border-top-left-radius: var(--sp-1);
   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);
+  box-shadow: var(--shadow-fold);
 }
 /* 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; `StampOn main` is the main size), and may lie over the words. */
@@ -105,8 +103,8 @@
 /* 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); }
+.sticky--tilt-left { rotate: calc(-1 * var(--sticky-tilt, calc(var(--tilt-base) * 5))); }
+.sticky--tilt-right { rotate: var(--sticky-tilt, calc(var(--tilt-base) * 5)); }
 
 /* ---- sticky date: the day, big, the month under it — at the end of the note's head (its top-right corner) ----
    <div class="sticky__head">…<time class="sticky-date" datetime="2026-02-14"><span class="sticky-date__day">14</span><span class="sticky-date__month">ก.พ.</span></time></div> */
@@ -148,7 +146,6 @@
 /* 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> */
@@ -243,12 +240,12 @@
 .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__name { position: absolute; width: var(--px); height: var(--px); margin: calc(-1 * var(--px)); 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; a post counts among posts only, so a heading before the first changes no note's lean */
-.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 of .sticky-post) > .sticky-post__notes > .sticky { rotate: var(--sticky-thread-tilt, 2deg); }
+.sticky-thread--lapped > .sticky-post > .sticky-post__notes > .sticky { rotate: calc(-1 * var(--sticky-thread-tilt, calc(var(--tilt-base) * 2))); }
+.sticky-thread--lapped > .sticky-post:nth-child(even of .sticky-post) > .sticky-post__notes > .sticky { rotate: var(--sticky-thread-tilt, calc(var(--tilt-base) * 2)); }
 /* 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)); }
 
@@ -281,11 +278,12 @@
 .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); }
+   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.)
+   A pile (below) turns its notes by the same four, by their place among its children. */
+.sticky-board > :nth-child(4n + 1), .sticky-pile__notes > .sticky:nth-child(4n + 1) { rotate: var(--sticky-board-turn-1, calc(var(--tilt-base) * -3)); }
+.sticky-board > :nth-child(4n + 2), .sticky-pile__notes > .sticky:nth-child(4n + 2) { rotate: var(--sticky-board-turn-2, calc(var(--tilt-base) * 1.5)); }
+.sticky-board > :nth-child(4n + 3), .sticky-pile__notes > .sticky:nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, calc(var(--tilt-base) * 2.75)); }
+.sticky-board > :nth-child(4n), .sticky-pile__notes > .sticky:nth-child(4n) { rotate: var(--sticky-board-turn-4, calc(var(--tilt-base) * -1.75)); }
 
 /* ---- sticky pile: one to six notes lying one over another — the newest on top (Lh 2026-10-11) ----
    <div class="sticky-pile sticky-pile--tap" style="--_n: 3">
@@ -316,17 +314,13 @@
   grid-template: var(--_size) / var(--_size);
   padding: var(--_pad) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-x)) calc(var(--_pad) + (var(--_n) - 1) * var(--_step-y)) var(--_pad);
 }
-.sticky-pile__notes > .sticky { --_depth: 0; grid-area: 1 / 1; z-index: calc(7 - var(--_depth)); translate: calc(var(--_depth) * var(--_step-x)) calc(var(--_depth) * var(--_step-y)); }
+.sticky-pile__notes > .sticky { --_depth: 0; grid-area: 1 / 1; z-index: calc(var(--z-pile) - var(--_depth)); translate: calc(var(--_depth) * var(--_step-x)) calc(var(--_depth) * var(--_step-y)); }
 .sticky-pile__notes > .sticky:nth-child(2) { --_depth: 1; }
 .sticky-pile__notes > .sticky:nth-child(3) { --_depth: 2; }
 .sticky-pile__notes > .sticky:nth-child(4) { --_depth: 3; }
 .sticky-pile__notes > .sticky:nth-child(5) { --_depth: 4; }
 .sticky-pile__notes > .sticky:nth-child(6) { --_depth: 5; }
 .sticky-pile__notes > .sticky:nth-child(n + 2) .sticky__foot { display: none; }
-.sticky-pile__notes > .sticky:nth-child(4n + 1) { rotate: var(--sticky-board-turn-1, -3deg); }
-.sticky-pile__notes > .sticky:nth-child(4n + 2) { rotate: var(--sticky-board-turn-2, 1.5deg); }
-.sticky-pile__notes > .sticky:nth-child(4n + 3) { rotate: var(--sticky-board-turn-3, 2.75deg); }
-.sticky-pile__notes > .sticky:nth-child(4n) { rotate: var(--sticky-board-turn-4, -1.75deg); }
 .sticky-pile__press { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; appearance: none; background: none; -webkit-tap-highlight-color: transparent; }
 .sticky-pile--tap .sticky-pile__notes > .sticky { pointer-events: none; }
 
@@ -352,16 +346,16 @@
   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 { z-index: calc(var(--z-top) + var(--z-over)); }
+.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) var(--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)));
+  top: calc(100% - var(--_size) * var(--sticky-answer-show, 0.75) - max(var(--safe-bottom), var(--kb, 0rem)));
   right: var(--sticky-answer-end, var(--screen-pad));
-  rotate: var(--sticky-answer-tilt, -3deg);
+  rotate: var(--sticky-answer-tilt, calc(var(--tilt-base) * -3));
   pointer-events: auto;
-  transition: top var(--motion-sheet) ease, right var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
+  transition: top var(--motion-sheet) var(--ease), right var(--motion-sheet) var(--ease), rotate var(--motion-sheet) var(--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 {
@@ -369,7 +363,7 @@
   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);
+  transition: opacity var(--motion-sheet-rest) var(--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)); }
@@ -393,7 +387,7 @@
   border-block-end: var(--rule-w) dotted currentColor;
   font: inherit;
 }
-.sticky-heading__title { min-width: 0; max-width: 100%; font: var(--sticky-heading-title-font, var(--type-label)); line-height: 1.35; /* Thai marks stack taller than the label's 1.2, and overflow clips them */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sticky-heading__title { min-width: 0; max-width: 100%; font: var(--sticky-heading-title-font, var(--type-label)); line-height: var(--lh-caption); /* Thai marks stack taller than the label's 1.2, and overflow clips them */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sticky-heading__caption { font: var(--sticky-heading-caption-font, var(--type-caption)); color: var(--sticky-heading-caption-ink, var(--card-muted)); white-space: nowrap; } /* the muted words of what it stands on: a note, or the screen */
 /* on a note: across the top of its paper, and the note's words start under it */
 .sticky__stuck > .sticky-heading { position: absolute; inset: var(--sp-2) var(--sp-4) auto; }
@@ -402,5 +396,13 @@
 .sticky-board .sticky:has(> .sticky__stuck > .sticky-heading) .sticky__body { flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 /* in a thread: across its top on the screen's ground, staying there while the notes run under it; the room before the first note is the turned corner's, as the thread's own top */
 /* the ground is drawn a little wider than the heading each way: a turned note's corner and its shadow stand outside the thread's width */
-.sticky-thread > .sticky-heading { position: sticky; inset-block-start: 0; z-index: 2; padding-block-start: var(--sp-2); background: var(--surface); color: var(--on-surface); box-shadow: calc(-1 * var(--sp-3)) 0 0 var(--surface), var(--sp-3) 0 0 var(--surface); }
+.sticky-thread > .sticky-heading { position: sticky; inset-block-start: 0; z-index: var(--z-over-2); padding-block-start: var(--sp-2); background: var(--surface); color: var(--on-surface); box-shadow: calc(-1 * var(--sp-3)) 0 0 var(--surface), var(--sp-3) 0 0 var(--surface); }
 .sticky-thread--lapped > .sticky-heading { margin-block-end: var(--sp-4); }
+
+/* ==== the pile pressed whole, as PRESS in actions.css answers every other control (#62: a block is written in its own file) ==== */
+/* a pile of notes pressed whole (Lh 2026-10-11): the button lies invisible UNDER the notes, so it is the notes that answer — DIM, as a card does (the group dims as one, the
+   notes do not show through one another); the ring is the button's own, round the whole pile */
+.sticky-pile__press { cursor: pointer; touch-action: manipulation; }
+.sticky-pile__notes:has(> .sticky-pile__press) { transition: opacity var(--motion-press) var(--ease-out); }
+.sticky-pile__notes:has(> .sticky-pile__press:active) { opacity: var(--press-dim); }
+.sticky-pile__press:focus-visible { outline: var(--focus); outline-offset: 0; }

package/css/theme.template.css

@@ -61,4 +61,16 @@
      --signal-ok-onlight --signal-warn-onlight --signal-error-onlight --signal-info-onlight   (the signal set: green · yellow · red ·
        blue — retune the shade, keep the meaning; 4.5:1 on every light ground) and --signal-*-ondark (on the dark side; the ondark ink
        unless set). --signal-*-soft, the light ground of each, follows by itself */
+
+  /* ---- pastels: the nine papers of a sticky note (and a stamp's picture ground), and a stamp's paper; light grounds, onlight words ----
+     --pastel-cotton --pastel-blush --pastel-tea-leaf --pastel-custard --pastel-salmon --pastel-iceberg --pastel-cocoa --pastel-apricot
+     --pastel-water  --stamp-paper */
+
+  /* ---- the rest of what a component shows, each a token (docs/reference.md "A component brings no value of its own") ----
+     motion: --motion-* (times)  --ease --ease-in --ease-out --ease-in-out --ease-linear --ease-settle
+     angle: --tilt-base (1deg; 0deg lays every note, stamp and letter straight)
+     layer: --z-under-2 … --z-over-3   fade: --off --fade-faint … --fade-most
+     type: per kind (display h1 h2 title body label caption stat) --face-<kind> --fw-<kind> --fs-<kind> --lh-<kind> --track-<kind>;
+       the scales --fw-regular --fw-medium --fw-semibold --fw-strong --fw-bold --fw-heavy --fw-black
+       --lh-mark --lh-band --lh-badge --lh-solid --lh-tight --lh-field --lh-hand --lh-ruled  --track-loose --track-caps */
 }

package/css/tokens.css

@@ -5,8 +5,8 @@
 
    Every length is rem so the whole system scales with the root
    font size (base.css steps it down on narrow phones and it follows
-   the user's text-size setting). Only borders, rules and focus
-   rings stay in px — they must stay crisp, not scale.
+   the user's text-size setting). Borders, rules and focus rings
+   are rem too (Lh 2026-10-20: "units are always rem").
    4pt grid: 1rem = 16px → --sp-1 = 4px.
    ============================================================ */
 
@@ -28,7 +28,7 @@
   --tap-base: 3rem;    /* 48 the size of THINGS: touch targets and control heights (--tap*, --btn-h, --chip-h, --bar-h,
                           --header-h, --fab), icons, avatars, dots, the ring and the tiles. --sp-base is the room BETWEEN things.
                           Text-holders follow the type instead: --badge and --icon-xs (inline with captions) are on --fs-base.
-                          Not on a base: --screen-w (the column), borders / rules / focus (px, crisp), shadows, motion. */
+                          Not on a base: --screen-w (the column), borders / rules / focus (fixed rem), shadows, motion. */
 
   /* ---- spacing (4pt grid): the number in the name is the multiplier ---- */
   --sp-0: calc(var(--sp-base) * 0.5);  /* 2  hairline gaps (title→meta) */
@@ -47,6 +47,7 @@
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
   --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
+  --tap-xl: max(var(--tap-floor), calc(var(--tap-base) * 17 / 12));    /* 68 the biggest round control: a foot of a few big round buttons (IconBtn xl) */
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
@@ -78,7 +79,10 @@
   --tile-h: calc(var(--tap-base) * 11 / 4);    /* 132 tile / band height */
 
   /* ---- radius ---- */
-  --r-chip: 999px;        /* pills, chips, buttons — always fully round */
+  /* TILT (Lh 2026-10-20: no unit a component writes for itself): every paper laid at an angle (a note, a stamp, a letter, a card
+     sent away) turns by a multiple of this. A theme that wants everything straight sets it to 0deg */
+  --tilt-base: 1deg;
+  --r-chip: 62.4375rem;        /* pills, chips, buttons — always fully round */
   --r-card: calc(var(--r-base) * 2);         /* 41.6 the one card radius: every card, tile, menu, sheet, fab — but a row card (--r-card-row) */
   --r-card-row: calc(var(--r-base) * 0.625); /* 13 a row card's corner (Lh 2026-10-17: a small card's corner shrinks to keep the big card's PROPORTION). Measured at 375:
                                                 whole cards stand 186–437 tall, corner/height 0.095–0.224 (Card · Skeleton 0.122); a two-line row stands 88, so its
@@ -87,13 +91,19 @@
   --r-control: calc(var(--r-base) * 0.875);  /* 18.2 fields, thumbs, menu rows */
   --r-badge: calc(var(--r-base) * 0.625);    /* 13 tile badge, bars */
 
-  /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
-  --border-w: 1.5px;
-  --hairline-w: 2px;                               /* the thinnest mark: a sheet's grab line (Lh 2026-10-06: 1px, then 2px the same day) */
-  --rule-w: 2px;                                   /* dotted connectors, picker rules */
-  --scroll-w: 1px;                                 /* the scrollbar of a .bleed track: a hairline of ink */
-  --focus: 2px solid currentColor;                 /* :focus-visible ring */
-  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  /* ---- borders / rules / elevation (rem, like every length) ---- */
+  /* one device-independent pixel in rem: what the platform needs to keep a hidden word in the accessibility tree, and the half-width
+     of a drawn line. The browser's own text size: a field under it makes iOS zoom in on focus */
+  --px: 0.0625rem;
+  --browser-text: 1rem;
+  /* the wireframe map's two street directions (.map) */
+  --street-1: 75deg;  --street-2: -18deg;
+  --border-w: 0.09375rem;
+  --hairline-w: 0.125rem;                               /* the thinnest mark: a sheet's grab line (Lh 2026-10-06: 1px, then 2px the same day) */
+  --rule-w: 0.125rem;                                   /* dotted connectors, picker rules */
+  --scroll-w: 0.0625rem;                                 /* the scrollbar of a .bleed track: a hairline of ink */
+  --focus: 0.125rem solid currentColor;                 /* :focus-visible ring */
+  --shadow-card: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.06), 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
   --shadow-float: 0 0.25rem 0.75rem rgb(0 0 0 / 0.14);
   --shadow-sheet: 0 -0.5rem 2rem rgb(0 0 0 / 0.16); /* sheets, lifted cards */
 
@@ -103,11 +113,44 @@
   --motion-quick: 0.2s;  /* a small state flip that isn't a press: a chevron turning, a popover/banner opening */
   --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
   --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
+  --motion-spin: 0.9s;    /* a busy ring's one turn (Spinner, a busy FormNote) */
+  --motion-blink: 1.1s;   /* a code cell's caret, on and off once */
+  --motion-flash: 0.5s;   /* a secret code's digit seen before its dot takes it */
+  --motion-shake: 0.4s;   /* a wrong code shaking once */
+  --motion-pulse: 0.4s;   /* a sheet's grip, ink to ink and back, while the app reloads */
+  --motion-run: 6s;       /* a long title running sideways, until its own length is measured (--_run) */
+  --motion-stagger: 70ms; /* one stacked sheet after another as they tuck or untuck */
+  /* LAYERS (Lh 2026-10-20: no number a component writes for itself): the order of things INSIDE one piece, which keeps its own
+     stacking context. Under its ground, flat, over it, over that, the picked one on top */
+  --z-under-2: -2;  --z-under: -1;  --z-flat: 0;  --z-over: 1;  --z-over-2: 2;  --z-over-3: 3;
+  --z-pile: 7;  /* a sticky pile's top note: one over the six it can show, each note under it one lower (StickyPile) */
+  /* EASING (Lh 2026-10-20: a component writes no curve of its own): the six ways a thing moves, read by every transition and animation.
+     --ease-settle is the one a moved row or card lands with (Row, CardFeed: Web Animations read it) */
+  --ease: ease;
+  --ease-in: ease-in;
+  --ease-out: ease-out;
+  --ease-in-out: ease-in-out;
+  --ease-linear: linear;
+  --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-step: steps(1); /* on or off with nothing between: a code cell's caret blinking, a secret digit before its dot */
   --motion-press: 0.12s; /* a control giving under the finger and springing back (actions.css PRESS) */
   --press-scale: 0.96;   /* how far a finger-sized control gives — a share of its size */
+  --scale-lift: 1.06;    /* a stamp lifted off the paper while the finger holds it */
+  --scale-pick: 1.7;     /* a mood's dot, the one picked */
+  --scale-arrive: 0.6;   /* a stamp's remove button, the size it grows from */
   --press-dim: 0.6;      /* how far a card-wide one (a row, a summary line, a card) fades under the finger */
   --press-shade: 0.93;  /* how far something with a thing behind it (a peeked sheet, a postcard) darkens under the finger */
   --off: 0.4;            /* a disabled control's fade */
+  /* FADES (Lh 2026-10-20: no opacity a component writes for itself): what each lets through. Nine uses had eight values; one name each
+     until the system settles on fewer */
+  --fade-faint: 0.25;  /* a halo behind an avatar */
+  --fade-dim: 0.3;     /* a sheet's grip at rest, a day that cannot be picked */
+  --fade-soft: 0.4;    /* the dots between a trio's answers */
+  --fade-half: 0.5;    /* a step's button while the step is busy */
+  --fade-hint: 0.55;   /* a field's placeholder */
+  --fade-mild: 0.65;   /* a route's line after its code */
+  --fade-near: 0.85;   /* an icon row */
+  --fade-most: 0.9;    /* a quote's mark */
 
   /* ---- z-index: the few layers that stack ABOVE ordinary content, low to high ---- */
   --z-bar: 30;  /* .action-bar, .float-bar — above .sheet-stack sheets (--level 1-5) */
@@ -143,18 +186,31 @@
   --fs-hero: calc(var(--fs-base) * 2.5);       /* 55 the one number on a sheet */
   --fs-giant: calc(var(--fs-base) * 2.9);      /* 64 data bands */
 
-  /* level      weight size / line-height family */
-  --type-display: 800 var(--fs-display) / 1.15 var(--font-display); /* leading: Thai marks stack to 1.1em up and 0.3em down in FC Pride — 1.02 clipped them (2026-09-10) */
-  --track-display: -0.02em;
-  --type-h1:      900 var(--fs-h1) / 1.2 var(--font-display);
-  --track-h1: -0.015em;
-  --type-h2:      700 var(--fs-h2) / 1.25 var(--font-display);
-  --track-h2: -0.01em;
-  --type-title:   650 var(--fs-title) / 1.3 var(--font-ui);
-  --type-body:    400 var(--fs-body) / 1.5 var(--font-ui);
-  --type-label:   600 var(--fs-label) / 1.2 var(--font-ui);   /* chips, buttons */
-  --type-caption: 500 var(--fs-caption) / 1.35 var(--font-ui);
-  --type-stat:    800 var(--fs-stat) / 1.05 var(--font-display); /* big numbers */
+  /* TYPE (Lh 2026-10-20: every kind and every size has its tokens; a component writes no type value of its own).
+     THE SCALES: weight and leading, each step named once. A kind below picks a step of each; a piece that needs a step alone reads it. */
+  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-strong: 650;  --fw-bold: 700;  --fw-heavy: 800;  --fw-black: 900;
+  --lh-mark: 0.55;    /* a quotation mark three lines tall, set into the first line */
+  --lh-band: 0.9;     /* a data band's giant number */
+  --lh-badge: 0.95;   /* a date box's two lines (JourneyBadge) */
+  --lh-solid: 1;      /* a line as tall as its letters: a number in a disc, an icon's glyph, one big number */
+  --lh-tight: 1.1;    /* a day's number, a tile's value */
+  --lh-field: 1.4;    /* the words in a field */
+  --lh-hand: 1.6;     /* a letter written by hand */
+  --lh-ruled: 1.7;    /* a ruled sheet: the line under every line of writing */
+  --track-loose: 0.02em;  /* initials in an avatar */
+  --track-caps: 0.08em;   /* a kicker in capitals */
+  /* THE EIGHT KINDS: each has its face, weight, size (--fs-* above), leading and tracking, and its style --type-<kind> is made of them */
+  --fw-display: var(--fw-heavy);   --lh-display: 1.15;  --track-display: -0.02em;  /* leading: Thai marks stack to 1.1em up and 0.3em down in FC Pride — 1.02 clipped them (2026-09-10) */
+  --fw-h1: var(--fw-black);        --lh-h1: 1.2;        --track-h1: -0.015em;
+  --fw-h2: var(--fw-bold);         --lh-h2: 1.25;       --track-h2: -0.01em;
+  --fw-title: var(--fw-strong);    --lh-title: 1.3;     --track-title: normal;
+  --fw-body: var(--fw-regular);    --lh-body: 1.5;      --track-body: normal;
+  --fw-label: var(--fw-semibold);  --lh-label: 1.2;     --track-label: normal;   /* chips, buttons */
+  --fw-caption: var(--fw-medium);  --lh-caption: 1.35;  --track-caption: normal;
+  --fw-stat: var(--fw-heavy);      --lh-stat: 1.05;     --track-stat: normal;    /* big numbers */
+  --face-display: var(--font-display);  --face-h1: var(--font-display);  --face-h2: var(--font-display);  --face-stat: var(--font-display);
+  --face-title: var(--font-ui);  --face-body: var(--font-ui);  --face-label: var(--font-ui);  --face-caption: var(--font-ui);
+  /* --type-<kind> is set where a palette or a mode is (below), so a weight or a face tuned there reaches the words inside */
 
   /* ============================================================
      COLOR ROLES — wireframe defaults (grayscale).
@@ -237,6 +293,12 @@
   --ink-rail: color-mix(in srgb, currentColor 30%, transparent);   /* todo steps, ghost edges */
   --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); /* calendar marks */
   --accent-mid: color-mix(in srgb, var(--accent) 50%, transparent);
+  /* PASTELS (Lh 2026-10-20: a component never brings a colour of its own; every colour is the theme's): the nine pastel papers of a
+     sticky note, a note chooser's swatch and a stamp's picture ground (src/sticky/tones.ts names them), and a stamp's paper. Light
+     grounds in every palette: their words are the onlight set. A theme retunes them here; a knob (--sticky-<tone>-bg) retunes one place */
+  --pastel-cotton: #f3efe2;  --pastel-blush: #f6d5da;  --pastel-tea-leaf: #d5e8c5;  --pastel-custard: #f6e9a0;  --pastel-salmon: #f3c7b3;
+  --pastel-iceberg: #cfe0ee;  --pastel-cocoa: #dccbbd;  --pastel-apricot: #f6d49a;  --pastel-water: #bcd6f3;
+  --stamp-paper: #fffdf8;
   --scrim: color-mix(in srgb, #000 50%, transparent);  /* dim stage, cover gradient — ALWAYS black, never the brand (Lh 2026-09-24) */
 }
 
@@ -261,6 +323,19 @@
    sit on <body>: a custom property is resolved where it is declared. A signal's SOFT ground (what a Snackbar stands on) is its
    onlight shade washed 14% into the surface (tone 2's formula) */
 :root, [data-palette], [data-mode] {
+  /* each kind's style, from its tokens: set here so a palette or a mode that tunes a kind's weight, size, leading or face reaches .t-<kind> */
+  --type-display: var(--fw-display) var(--fs-display) / var(--lh-display) var(--face-display);
+  --type-h1:      var(--fw-h1) var(--fs-h1) / var(--lh-h1) var(--face-h1);
+  --type-h2:      var(--fw-h2) var(--fs-h2) / var(--lh-h2) var(--face-h2);
+  --type-title:   var(--fw-title) var(--fs-title) / var(--lh-title) var(--face-title);
+  --type-body:    var(--fw-body) var(--fs-body) / var(--lh-body) var(--face-body);
+  --type-label:   var(--fw-label) var(--fs-label) / var(--lh-label) var(--face-label);
+  --type-caption: var(--fw-caption) var(--fs-caption) / var(--lh-caption) var(--face-caption);
+  --type-stat:    var(--fw-stat) var(--fs-stat) / var(--lh-stat) var(--face-stat);
+  /* shadows of paper laid on paper: mixed from the onlight ink, so re-derived where a palette is set */
+  --shadow-paper: 0 var(--sp-1) var(--sp-2) color-mix(in srgb, var(--ink-onlight) 16%, transparent);    /* a stamp lying on paper: follows its teeth (drop-shadow) */
+  --shadow-lift: 0 var(--sp-0) var(--sp-1) color-mix(in srgb, var(--ink-onlight) 35%, transparent);     /* a small disc lifted over a picture */
+  --shadow-fold: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) color-mix(in srgb, var(--ink-onlight) 8%, transparent); /* a note's folded corner */
   --on-surface: color-mix(in srgb, var(--ink-ondark) calc(var(--surface-dark) * 100%), var(--ink-onlight));
   --on-surface-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--surface-dark) * 100%), var(--ink-onlight-muted));
   --action-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--action-dark) * 100%), var(--ink-onlight));
@@ -281,7 +356,7 @@
    surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
    tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
-  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > .sheet__body,
+  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > :is(.sheet__body, .card__foot),
   .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.card__head, .card__foot), .card--bands > .card__face > :is(.card__head, .card__foot)) {
   --card-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--ink-onlight));
   --card-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--dark) * 100%), var(--ink-onlight-muted));
@@ -294,8 +369,8 @@
 }
 :where(body, [data-palette], [data-mode]) { --dark: var(--surface-dark); }
 
-:root { --safe-top: calc(env(safe-area-inset-top, 0px) + var(--vv-top, 0px)); /* + the phone's pan while a keyboard is up (cardds.js) */ --safe-bottom: env(safe-area-inset-bottom, 0px); }
-* { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
+:root { --safe-top: calc(env(safe-area-inset-top, 0rem) + var(--vv-top, 0rem)); /* + the phone's pan while a keyboard is up (cardds.js) */ --safe-bottom: env(safe-area-inset-bottom, 0rem); }
+* { --_safe-b-open: max(0rem, var(--safe-bottom) - var(--kb, 0rem)); }
 
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */

package/dist/actions/Chip.d.ts

@@ -298,9 +298,9 @@ export declare function Chip({ on, muted, dot, sm, as, href, className, children
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    className: string;
     href: string | undefined;
     type: string | undefined;
-    className: string;
 }, HTMLSpanElement>;
 export interface ChipPickProps extends Omit<ComponentProps<'label'>, 'onChange'> {
     /** radio for pick-one (a time slot), checkbox for pick-many (skills); `sign` defaults to checkbox */

package/dist/actions/Chip.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
 import { cx } from '../cx.js';
+import { tagged } from '../pressable.js';
 import { Dot } from './Dot.js';
 /** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `sm` = a small label only; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
 export function Chip({ on, muted, dot, sm, as, href, className, children, ...rest }) {
-    const el = as ?? (href ? 'a' : 'span');
-    return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('chip', on && 'chip--on', muted && 'chip--muted', sm && 'chip--sm', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b', tone: dot === 'a' || dot === 'b' ? undefined : dot }), children);
+    const { el, props } = tagged(as, href);
+    return createElement(el, { ...props, className: cx('chip', on && 'chip--on', muted && 'chip--muted', sm && 'chip--sm', className), ...rest }, dot && _jsx(Dot, { b: dot === 'b', tone: dot === 'a' || dot === 'b' ? undefined : dot }), children);
 }
 /** ChipPick — a chip that is a choice, on a sheet and never in a Card (the sheet is the paper the member fills in, Lh 2026-10-18): full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
  *  interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */