@usableapp/cardds 0.7.103 → 0.7.105

package/dist/cardds.css

@@ -46,8 +46,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.
    ============================================================ */
 
@@ -69,7 +69,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) */
@@ -88,6 +88,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 */
@@ -119,7 +120,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
@@ -128,13 +132,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 */
 
@@ -144,11 +154,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) */
@@ -184,18 +227,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).
@@ -278,6 +334,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) */
 }
 
@@ -302,6 +364,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));
@@ -322,7 +397,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));
@@ -335,8 +410,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 */
@@ -352,7 +427,7 @@
 
 /* ---- css/palette.css — color settings — the file you tune ---- */
 /* ============================================================
-   cardds/palette.css — COLOR SETTINGS. The only file you tune.
+   cardds/palette.css — the palettes cardds ships. A project tunes its own theme.css (theme.template.css), never this file.
    Apply with <html data-palette="clay"> (or <body>).
    No attribute = wireframe grayscale from tokens.css.
    Each palette overrides role tokens only — components never change.
@@ -451,7 +526,7 @@
 [data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
 [data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: var(--ink-onlight); }
 /* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
-[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
+[data-palette="orchard"] :is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
 [data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); --dark: 1; }
 [data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
 [data-palette="orchard"] .toggle:checked { background: var(--highlight-3); --accent-dark: 0; } /* sky is a light ground: its knob is onlight */
@@ -568,6 +643,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
 .icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; }
+/* what a component that holds an icon may set on it (#62: a holder adjusts its child only through the child's knobs): unset, each
+   is the icon as it is. No fill: a drawing's own fill="none" is an attribute any declared fill would beat */
+.icon {
+  display: var(--icon-display, block); vertical-align: var(--icon-align, baseline); margin: var(--icon-margin, 0);
+  padding: var(--icon-pad, 0); border-radius: var(--icon-radius, 0); background: var(--icon-bg, none); color: var(--icon-ink, inherit);
+  rotate: var(--icon-turn, none); translate: var(--icon-shift, none); transition: var(--icon-motion, all 0s); animation: var(--icon-spin, none);
+}
 .icon--sm { width: var(--icon-sm-size, var(--icon-sm)); height: var(--icon-sm-size, var(--icon-sm)); }
 .icon--xs { width: var(--icon-xs-size, var(--icon-xs)); height: var(--icon-xs-size, var(--icon-xs)); } /* inside captions, chips, links */
 .icon--lg { width: var(--icon-lg-size, var(--icon-lg)); height: var(--icon-lg-size, var(--icon-lg)); } /* empty states */
@@ -616,12 +698,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
   container-type: size; /* a share of the SCREEN's height (a no-bar step's lead, step.css) reads it as cqh — a real phone's height, or the gallery's frame */
 }
-/* min-height: 0 — a flex item's floor is its content, and the stack's content
-   is its own full-height sheets, so without it the stack grew to the whole
-   screen and its open sheet ran past the bottom edge by the bars' height,
-   unreachable by scrolling (timebank home, 2026-09-13). The stack IS the room
-   left under the bars; every sheet fills exactly that. */
-.screen--fill > .sheet-stack { flex: 1; min-height: 0; }
 
 /* ---- typography levels ---- */
 /* --fs-self: each level publishes its own size, for a consumer that scales a level without knowing which */
@@ -631,7 +707,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .t-title    { font: var(--type-title); margin: 0; --fs-self: var(--fs-title); }
 .t-body     { font: var(--type-body); margin: 0; }
 .t-label    { font: var(--type-label); }
-.t-caption  { font: var(--type-caption); }
+.t-caption  { font: var(--type-caption); color: var(--t-caption-ink, inherit); }
 .t-stat     { font: var(--type-stat); letter-spacing: var(--track-display); margin: 0; font-variant-numeric: tabular-nums; }
 .t-stat--mono { font-family: var(--font-mono); letter-spacing: 0; } /* clocks, ETAs, codes */
 .t-stat--xl   { font-size: var(--fs-hero); } /* the one number on a sheet */
@@ -648,9 +724,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --_shape: 0.75em 0.3em 0.9em 0.35em / 0.4em 0.95em 0.35em 0.8em; /* four unlike corners: a stroke drawn by hand has no two ends alike */
   background-color: var(--mark-bg, var(--_bg));
   background-image:
-    linear-gradient(100deg, var(--_pool), transparent 0.55em),                    /* ink pools where the pen lands */
-    linear-gradient(280deg, var(--_pool), transparent 0.4em),                     /* and a little where it lifts */
-    linear-gradient(181deg, transparent 18%, var(--_pool) 52%, transparent 88%);  /* the nib presses harder along its middle */
+    linear-gradient(calc(90deg + var(--tilt-base) * 10), var(--_pool), transparent 0.55em),                    /* ink pools where the pen lands */
+    linear-gradient(calc(270deg + var(--tilt-base) * 10), var(--_pool), transparent 0.4em),                     /* and a little where it lifts */
+    linear-gradient(calc(180deg + var(--tilt-base)), transparent 18%, var(--_pool) 52%, transparent 88%);  /* the nib presses harder along its middle */
   color: var(--mark-ink, inherit);
   padding-inline: var(--mark-pad-x, 0.3em);
   border-radius: var(--mark-radius, var(--_shape));
@@ -664,7 +740,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
 .screen :is(input, textarea, [contenteditable="true"]), .screen .t-select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
-.t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.t-sr { position: absolute; width: var(--px); height: var(--px); margin: calc(-1 * var(--px)); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
 /* ---- page: words straight on the base, no card around them — a
    heading, a paragraph, maybe a .cta-pack. Was .section until 2026-09-16
@@ -683,8 +759,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
    h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
 .page > .card__head > .t-h1 { font-size: var(--fs-h2); }
-.page > :is(img, .ph) { max-height: var(--page-media-h, 14rem); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
-.page > .ph { width: 100%; height: var(--page-media-h, 14rem); }
 .page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
@@ -709,12 +783,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- the turn: one flip mechanic for everything with two faces (a Postcard, a Card's `back`).
    The faces share one grid cell and turn on Y at --motion-flip; where motion is off they swap at once.
    The owner sets the box's size and the faces' look; .is-flipped on .flip shows the back. */
-.flip { perspective: 60rem; display: grid; }
+.flip { perspective: calc(var(--tap-base) * 20); display: grid; }
 .flip__face {
   grid-area: 1 / 1;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
-  transition: transform var(--motion-flip) ease-in-out;
+  transition: transform var(--motion-flip) var(--ease-in-out);
 }
 .flip__face--back { transform: rotateY(180deg); }
 .flip.is-flipped > .flip__face--front { transform: rotateY(-180deg); }
@@ -723,6 +797,131 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   .flip__face { transition: none; }
 }
 
+/* ==== the screen's parts and the room it keeps, once written in the files of what they hold (#62: a block is written in its own file) ==== */
+/* the appbar is fixed over the top of the screen: the screen reserves its height, from the same header-h token. The breathing under it is published:
+   a .step cancels it to touch the bar (actions.css) */
+.screen:has(> .appbar) { --header-gap: var(--sp-2); padding-top: calc(var(--header-h) + var(--header-gap)); }
+.screen.screen--fill:has(> .appbar) { padding-top: var(--safe-top); --header-gap: 0rem; }
+/* a plain screen is a column at least one phone tall when it ends on an .action-bar or holds a .screen__centre (step.css, card.css) */
+.screen:not(.screen--fill):has(> .action-bar:last-child, > .screen__centre) { display: flex; flex-direction: column; min-height: 100dvh; }
+/* the centred group: the place of a .card--centre (card.css), for a small group of things */
+.screen--fill > .screen__centre {
+  position: absolute;
+  top: var(--screen-centre);
+  translate: 0 -50%;
+  /* the cap: as a .card--centre's (card.css, which says why) */
+  --_lead: 0rem;
+  max-height: calc(2 * min(var(--screen-centre) - var(--_lead) - var(--screen-gap), 100% - var(--screen-centre) - var(--bar-reserve)));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+/* ---- centred block: the same place, for one thing to read that is not a
+   lone card — an empty state, a card with its quiet second button and the
+   pager under it. The block runs edge to
+   edge and keeps the screen's inset as padding, and
+   its children stack at the screen's own rhythm (Lh, 2026-09-11):
+   <div class="screen screen--fill"><header class="topbar">…</header>
+     <div class="screen__centre"><article class="card">…</article><button class="btn btn--quiet btn--block">…</button></div>
+   </div> */
+.screen__centre {
+  inset-inline: 0;
+  padding-inline: var(--screen-pad);
+  display: grid;
+  gap: var(--screen-gap);
+  align-content: start;
+}
+.screen__centre > * { min-width: 0; }
+
+/* ---- the same group on a plain .screen: centred when short, as long as it
+   likes when not (Lh, 2026-09-12) ----
+   The member sees one content area — whatever is between the top bar and the
+   bar — and reads it as a whole page: a short card sits at its middle, a long
+   one simply makes the page longer, runs under the bar (a sticky last row,
+   actions.css) and scrolls up like any page — nothing is capped, nothing
+   shrinks, no scroll box inside a box.
+   So on a .screen that is NOT --fill the group is in flow: the column is at
+   least one phone tall (step.css), the group takes the room after the top bar and
+   centres its children in it. The screen's own inset stays the inset.
+   <div class="screen"><header class="topbar">…</header>
+     <div class="screen__centre"><article class="card">…</article><div class="pager__at">…</div></div>
+   </div><div class="action-bar">…</div> */
+.screen:not(.screen--fill) > .screen__centre { flex: 1; padding-inline: 0; align-content: center; }
+
+.screen__centre:has(> :is(.stamp, .stamp-place)) { justify-items: center; text-align: center; }
+
+/* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
+/* flat head markup (Lh 2026-09-16 — no <p>, no wrapper, only padding and gap tokens):
+   <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
+   The heading and the far-right thing share the first row; a caption sits on
+   a row below (order 1), whatever the DOM order — so an author writes the
+   words in reading order. */
+.card__head > :is(.t-caption, .t-body) { flex: 1 1 100%; order: 1; margin: 0; }
+.card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
+/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
+.sheet-stack__base > .screen__centre { padding-inline: 0; }
+/* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
+/* the lucide tip stops 2.2 of 24 short of the box's bottom: lowered so the tip IS the bottom-centre; filled with the surface so the
+   street pattern never shows through the pin's body */
+.map__pin > .icon { fill: var(--surface); }
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+/* 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 */
+.step > .page, .step > .pages > .page {
+  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 */
+}
+/* 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; }
+.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 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 > .empty-state { flex: none; }
+.sheet__body > .empty-state:only-child { flex: none; }
+/* ---- where it sits in what actions.css draws (docs/reference.md rule 15) ---- */
+/* ---- top bar: back + screen title ---- */
+.topbar .t-h1 {
+  text-transform: uppercase;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-block: 0.15em; /* Thai marks survive the clip — see card.css, the head rule */
+  margin-block: -0.15em;
+}
+/* ---- where it sits in what media.css draws (docs/reference.md rule 15) ---- */
+.postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
+
+/* ---- where it sits in what card.css draws: a walk's page (docs/reference.md rule 15) ---- */
+.pages > .page { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+
+/* ---- where it sits in what step.css draws: the reading block (docs/reference.md rule 15) ---- */
+.step:has(> .sheet--peek) > .page { padding-bottom: var(--sheet-peek); }
+.step > .page {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
 /* ---- css/card.css — card boundary + list variants ---- */
 /* ============================================================
    cardds/card.css — the card boundary + list variants
@@ -755,10 +954,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    card once `sent` and a `Card` with `leave` read the same two knobs; the time is --motion-sheet. `.card--leaver` is a card whose app may ask it
    to go (it holds the transition, so it comes back as it went); `.card--away` is one that has been asked. A knob of the time would read dead:
    the knob walk switches motion off */
-:is(.card--leaver, .post-desk__card) { transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease; }
-:is(.card--away, .post-desk--sent .post-desk__card) { --_y: calc(var(--leave-rise, 160%) * -1); rotate: var(--leave-turn, -5deg); }
+.card--leaver { transition: translate var(--motion-sheet) var(--ease), rotate var(--motion-sheet) var(--ease); }
+.card--away { --_y: calc(var(--leave-rise, 160%) * -1); rotate: var(--leave-turn, calc(var(--tilt-base) * -5)); }
 .card--away { translate: 0 var(--_y); }
-@media (prefers-reduced-motion: reduce) { :is(.card--leaver, .post-desk__card) { transition: none; } }
+@media (prefers-reduced-motion: reduce) { .card--leaver { transition: none; } }
 
 /* each tone is a fill and a side; its words and glyphs follow from the side (tokens.css) */
 .card--2 { --card-bg: var(--card-2-bg); --dark: var(--card-2-dark); }
@@ -775,18 +974,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    multi-line title can opt back out with .card__head--top. */
 .card__head {
   display: flex;
-  flex-wrap: wrap;               /* the caption takes a line of its own — no wrapper div */
+  flex-wrap: var(--card-head-wrap, wrap); /* the caption takes a line of its own — no wrapper div */
   align-items: center;
   justify-content: space-between;
   column-gap: var(--card-head-col-gap, var(--sp-3));
   row-gap: var(--card-head-row-gap, var(--sp-0));
+  min-height: var(--card-head-min-h, auto);
 }
-/* flat head markup (Lh 2026-09-16 — no <p>, no wrapper, only padding and gap tokens):
-   <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
-   The heading and the far-right thing share the first row; a caption sits on
-   a row below (order 1), whatever the DOM order — so an author writes the
-   words in reading order. */
-.card__head > :is(.t-caption, .t-body) { flex: 1 1 100%; order: 1; margin: 0; }
 .card__head--top { align-items: flex-start; }
 
 .card__media { border-radius: var(--card-media-radius, var(--r-media)); overflow: hidden; position: relative; } /* relative: corner badges */
@@ -806,12 +1000,23 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
 
 /* Skeleton head — the heading in a card's OWN head, and only there.
-   The heading wraps freely: no line budget, no squeeze, no clamp (Lh
-   2026-09-16 — a height rule on words only distorts them; content that needs
-   more rows takes more rows). The group that holds heading ·
+   The heading wraps, no squeeze, up to three lines and cut there with an
+   ellipsis (Lh 2026-10-21: "มันควรจะ max สามบรรทัด" — a request's title ran to
+   four lines on a phone; reverses 2026-09-16's "no clamp"). The count is the knob
+   --card-head-title-lines. The group that holds heading ·
    caption is the head's own wrapping row (above) — no wrapper element, no
    height, only the row gap. */
-.card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
+.card__head :is(h1, h2, h3) {
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--card-head-title-lines, 3);
+  line-clamp: var(--card-head-title-lines, 3);
+  overflow: hidden;
+  padding-block-start: var(--_mark-room); /* a stacked Thai mark rises over the first line's box: room inside the clip, given back outside */
+  margin-block-start: calc(-1 * var(--_mark-room));
+  --_mark-room: 0.2em;
+}
 
 /* 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,
@@ -819,15 +1024,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    <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; margin-inline: 0; }
 
 /* a JourneyBadge at the edge of the card's own first head (the date box in the top-left or top-right corner) keeps its corner concentric
    with the card's: the card's corner (--r-card) less the room the padding leaves round it. journey.css reads it behind the theme's --tile-badge-radius,
    so a theme that sets that knob still wins. */
 .card > .card__head:first-child > .tile-badge:is(:first-child, :last-child) { --_badge-radius: calc(var(--r-card) - var(--card-pad)); }
 
-/* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are white paper bands edge to
+/* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are paper bands edge to
    edge over the card's padding, no hairline; the middle between them keeps the card's tone, lightened (--card-middle-bg). The card
    clips, so the bands keep its corners. A two-faced card (below) carries the look on each face. */
 :is(.card--bands, .card--bands > .card__face) {
@@ -848,12 +1051,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- two faces: the WHOLE card turns (`Card back`, Lh 2026-10-19). The article is the turning box (.flip, base.css) and only that;
    each face is the card's paper — head · middle · foot — and both lie in one grid cell. The head and the foot are the same on both
-   faces; the middle is one fixed height (--card-middle-h, the theme's call), so the card never changes height as it turns. The hidden
+   faces; the card is as tall as its taller face and each face fills it, the middle taking what the head and the foot leave (2026-10-21,
+   timebank: a fixed middle left a short front a tall empty band), so the card never changes height as it turns; --card-middle-h fixes
+   the middle's height instead, the theme's call. The hidden
    face is inert. Each face holds an unseen turn button: the keyboard's way to turn it; its ring is drawn on the face. */
 .card--turns { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
 .card__face {
-  display: grid;
-  align-content: start;
+  display: flex;
+  flex-direction: column;
   gap: var(--card-gap);
   min-width: 0;
   padding: var(--card-pad);
@@ -864,13 +1069,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: relative;
 }
 .card__face > * { min-width: 0; }
-.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, 18.75rem); overflow: hidden; }
-.card__turn { position: absolute; inset: 0; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
+.card__middle { flex: 1 0 auto; display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, auto); overflow: hidden; }
+.card__turn { position: absolute; inset: 0; width: var(--px); height: var(--px); padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
 .card__face:has(> .card__turn:focus-visible) { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
-/* a head's ChipRow takes a line of its own under the title: at most two lines of chips, a chip's words cut with an ellipsis */
-.card__head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * 1.5 + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
-.card__head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
-.card__head > .chip-row > .chip > .icon { display: inline-block; vertical-align: -0.15em; margin-inline-end: var(--chip-sm-gap, var(--sp-1)); }
+.card__head > .chip-row > .chip > .icon { --icon-display: inline-block; --icon-align: -0.15em; --icon-margin: 0 var(--chip-sm-gap, var(--sp-1)) 0 0; }
 
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
@@ -891,15 +1093,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    nothing jumps. Chromium/Safari paint it through the ::-webkit-scrollbar
    parts; Firefox gets its thin bar in the same ink. */
 .bleed {
-  margin-inline: calc(-1 * var(--card-pad, 0px));
-  padding-inline: var(--card-pad, 0px);
+  margin-inline: calc(-1 * var(--card-pad, 0rem));
+  padding-inline: var(--card-pad, 0rem);
   padding-block-end: var(--sp-2);
-  scroll-padding-inline: var(--card-pad, 0px);
+  scroll-padding-inline: var(--card-pad, 0rem);
   flex-wrap: nowrap;
   overflow-x: auto;
 }
 .bleed::-webkit-scrollbar { height: var(--scroll-w); }
-.bleed::-webkit-scrollbar-track { background: transparent; margin-inline: var(--card-pad, 0px); }
+.bleed::-webkit-scrollbar-track { background: transparent; margin-inline: var(--card-pad, 0rem); }
 .bleed::-webkit-scrollbar-thumb { background: transparent; }
 .bleed:is(:hover, .is-scrolling)::-webkit-scrollbar-thumb { background: currentColor; }
 @supports not selector(::-webkit-scrollbar) {
@@ -913,29 +1115,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* foot: the card's action buttons on one line. One button takes the width,
    up to four share it in even parts — so the gaps read even too — and from
    three on they drop their side padding so the labels keep the room. */
-.card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
-.card__foot > .btn { flex: 1 1 0; min-width: 0; }
-/* …unless the button says its own size: `Btn form` is as wide as its words in a foot too, centred (Lh 2026-10-10: one button filling
-   a card's foot read too big — which button a card wears is the project's choice, so the foot must not undo it) */
-.card__foot > .btn--form { flex: 0 1 auto; }
-.card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+.card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; color: var(--card-foot-ink, inherit); }
+.card__foot:has(> :nth-child(3)) > .btn { --btn-pad-x: var(--sp-2); }
 /* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
    whole short row of its own, centred — it never shares the buttons' line */
 .card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
 .card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
+/* round (CardFoot round): the foot holds a few round IconBtns, each its own size (they never share the line), as ONE group in the middle with
+   a gap that does not follow the card's width. The gap is wider than the Btns' (a miss between two round targets): --card-foot-gap sets it */
+.card__foot--round { justify-content: center; gap: var(--card-foot-gap, var(--sp-6)); }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {
   background:
-    linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
-    linear-gradient(to top left,  transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
+    linear-gradient(to top right, transparent calc(50% - var(--px)), currentColor calc(50% - var(--px)), currentColor calc(50% + var(--px)), transparent calc(50% + var(--px))),
+    linear-gradient(to top left,  transparent calc(50% - var(--px)), currentColor calc(50% - var(--px)), currentColor calc(50% + var(--px)), transparent calc(50% + var(--px)));
   border: var(--border-w) solid currentColor;
   border-radius: var(--r-media);
   opacity: var(--off);
-  min-height: 10rem;
+  min-height: calc(var(--tap-base) * 10 / 3);
 }
-.ph--sm { min-height: 7.5rem; }
-.ph--md { min-height: 9rem; }
+.ph--sm { min-height: calc(var(--tap-base) * 5 / 2); }
+.ph--md { min-height: calc(var(--tap-base) * 3); }
 /* ---- centred card: one thing to read, at the human centre of a fill screen ----
    (.screen__centre below is the same placement for a small GROUP of things)
    Where the centre of a phone IS, to the person holding it: the bottom fifth is
@@ -948,8 +1149,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    The card hugs its words and keeps the screen's inset. It is capped so that it
    never reaches the title bar above it nor the bar's room below it — past that it
    scrolls inside — from the same tokens those bars reserve their room with. */
-.card--centre,
-.screen--fill > .screen__centre {
+.card--centre {
   position: absolute;
   top: var(--screen-centre);
   translate: 0 -50%;
@@ -966,38 +1166,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 :is(.topbar, .appbar) ~ :is(.card--centre, .screen__centre) { --_lead: var(--header-h); }
 .card--centre { inset-inline: var(--screen-pad); }
 
-/* ---- centred block: the same place, for one thing to read that is not a
-   lone card — an empty state, a card with its quiet second button and the
-   pager under it. The block runs edge to
-   edge and keeps the screen's inset as padding, and
-   its children stack at the screen's own rhythm (Lh, 2026-09-11):
-   <div class="screen screen--fill"><header class="topbar">…</header>
-     <div class="screen__centre"><article class="card">…</article><button class="btn btn--quiet btn--block">…</button></div>
-   </div> */
-.screen__centre {
-  inset-inline: 0;
-  padding-inline: var(--screen-pad);
-  display: grid;
-  gap: var(--screen-gap);
-  align-content: start;
-}
-.screen__centre > * { min-width: 0; }
-
-/* ---- the same group on a plain .screen: centred when short, as long as it
-   likes when not (Lh, 2026-09-12) ----
-   The member sees one content area — whatever is between the top bar and the
-   bar — and reads it as a whole page: a short card sits at its middle, a long
-   one simply makes the page longer, runs under the bar (a sticky last row,
-   actions.css) and scrolls up like any page — nothing is capped, nothing
-   shrinks, no scroll box inside a box.
-   So on a .screen that is NOT --fill the group is in flow: the column is at
-   least one phone tall (step.css), the group takes the room after the top bar and
-   centres its children in it. The screen's own inset stays the inset.
-   <div class="screen"><header class="topbar">…</header>
-     <div class="screen__centre"><article class="card">…</article><div class="pager__at">…</div></div>
-   </div><div class="action-bar">…</div> */
-.screen:not(.screen--fill) > .screen__centre { flex: 1; padding-inline: 0; align-content: center; }
-
 /* ---- the card that changes slides: out one side, the next in from the other ----
    A .screen__centre group that walks pages (data-slide="next" | "back" on the
    root while a step changes) turns its card like a page: the old card slides
@@ -1026,7 +1194,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   user-select: none;   /* a walk is dragged, not read-and-selected — without this, a finger crossing the words highlights them instead of turning the page (timebank #59) */
   touch-action: pan-y;  /* leaves vertical scroll to the browser; horizontal is the app's own drag, never a native pan */
 }
-.pages > :is(.card, .page) { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+.pages > .card { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
 .pages > [inert] { visibility: hidden; }
 /* pages of WORDS (Lh, 2026-09-20): the same walk with .page pages, on the base — in a .step the
    .pages is the reading block (step.css), the round pager in the bar turns it, the same slideTo().
@@ -1038,7 +1206,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
 ::view-transition-old(screen-out), ::view-transition-new(screen-in) { /* screen-*: slideScreen — one whole screen to the next (Lh 2026-09-25) */
   animation-duration: var(--motion-slide);
-  animation-timing-function: ease-out;
+  animation-timing-function: var(--ease-out);
   mix-blend-mode: normal;
 }
 :root[data-slide="next"]::view-transition-old(centre-card-out), :root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
@@ -1053,9 +1221,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
   ::view-transition-old(screen-out), ::view-transition-new(screen-in) { animation: none; }
 }
-/* the page dots under the card sit centred under it — the indicator belongs
-   with the page that changes, never in the bar (Lh, 2026-09-12) */
-.screen__centre > .pager__at { justify-self: center; }
 
 /* compact card inside a card (nested note, promo) */
 .card--sm { padding: var(--card-sm-pad, var(--sp-4)); --card-gap: var(--sp-2); border-radius: var(--card-sm-radius, var(--r-card)); }
@@ -1064,7 +1229,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    stack.css; a stacked sheet is a plain .card, the material */
 
 /* trailing icon cluster in a card header */
-.icon-row { display: flex; align-items: center; gap: var(--icon-row-gap, var(--sp-4)); opacity: 0.85; }
+.icon-row { display: flex; align-items: center; gap: var(--icon-row-gap, var(--sp-4)); opacity: var(--fade-near); }
 
 /* ---- card list: rows, each row its own boundary ---- */
 .card-list { display: grid; gap: var(--card-list-gap, var(--sp-3)); }
@@ -1100,7 +1265,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card__remove {
   --_size: var(--card-remove-size, calc(var(--tap-base) / 2));
   position: relative;
-  z-index: 1;
+  z-index: var(--z-over);
   flex: none;
   align-self: flex-start;
   display: grid;
@@ -1118,7 +1283,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   cursor: pointer;
 }
 .card__remove::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: max(var(--tap-floor), var(--_size)); aspect-ratio: 1; border-radius: 50%; }
-.card__remove > .icon { width: 62%; height: 62%; }
+.card__remove > .icon { --icon-size: 62%; }
 .card__remove:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
 
 /* leading thumb/icon in a row */
@@ -1161,7 +1326,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .feed-card__rest > :first-child { margin-top: var(--card-gap); }
 .feed-card--small .feed-card__rest { overflow: clip; visibility: hidden; }
 @media (prefers-reduced-motion: no-preference) {
-  .feed-card__more { transition: grid-template-rows var(--motion-sheet) ease; }
+  .feed-card__more { transition: grid-template-rows var(--motion-sheet) var(--ease); }
   .feed-card--small .feed-card__rest { transition: visibility 0s var(--motion-sheet); }
 }
 
@@ -1172,7 +1337,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 .delta {
   font: var(--delta-font, var(--type-caption));
-  font-weight: 700;
+  font-weight: var(--fw-bold);
   padding: var(--delta-pad-y, var(--sp-1)) var(--delta-pad-x, var(--sp-2));
   border-radius: var(--delta-radius, var(--r-chip));
   background: var(--delta-bg, var(--card-3-bg));
@@ -1199,7 +1364,286 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   scroll-snap-align: start; scroll-snap-stop: always;
   display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); align-content: start;
 }
-.panes > .pager__at { justify-self: center; }
+
+/* ==== the card's variants another family draws: Cover and the fold (media), Band (numbers) (#62: a block is written in its own file) ==== */
+
+/* ---- cover: the image IS the card; text over a scrim ----
+   <article class="card card--cover"><div class="ph" role="img"></div>
+     <div class="card__head"><button class="icon-btn icon-btn--sm">♥</button></div>
+     <div><h2 class="t-h1">Art Institute</h2><p class="t-body">111 South Michigan Ave</p></div>
+     <div class="row">…meta…</div></article> */
+.card--cover {
+  --card-bg: var(--card-3-bg);
+  --dark: var(--card-3-dark);
+  --accent: var(--card-ink);
+  --accent-dark: calc(1 - var(--dark));
+  min-height: var(--_cover-min-h);
+  align-content: space-between;
+  overflow: hidden;
+  isolation: isolate;
+}
+.card--cover > img,
+.card--cover > .ph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: var(--z-under-2);
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+}
+/* scrim: dark at both ends so the meta stays readable */
+.card--cover::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-under);
+  background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
+}
+
+/* ---- fold: a sticky-note corner on any card (decorative) ----
+   No border. The card's outline follows its border box, so it ran straight
+   across the squared bottom-right corner and cut through the fold's diagonal —
+   the corner read as a notch with a line through it rather than a lifted flap.
+   The COLOUR goes transparent rather than the border going to 0, so the box
+   keeps its geometry and a fold card still measures the same as the cards
+   beside it. */
+.card--fold {
+  border-color: transparent;
+  border-bottom-right-radius: 0;
+  background-image: linear-gradient(to top left,
+    var(--card-bg) 0 50%,   /* the card's own background, not --surface (the page's) — a mismatch here drew a seam at the flap's edge */
+    color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: var(--sp-8) var(--sp-8);
+  background-origin: border-box;  /* the flap sits on the true corner, not inside the (transparent) border */
+  /* the corner is CUT: the triangle under the flap shows what is behind the card. Painted in the card's own colour it
+     read as the square corner of a second card underneath (Lh 2026-09-23). The polygon reaches --sp-12 past the other
+     edges so a coloured palette's shadow is not clipped there. */
+  clip-path: polygon(calc(-1 * var(--sp-12)) calc(-1 * var(--sp-12)), calc(100% + var(--sp-12)) calc(-1 * var(--sp-12)), calc(100% + var(--sp-12)) calc(100% - var(--sp-8) - var(--sp-12)),
+                     calc(100% - var(--sp-8) - var(--sp-12)) calc(100% + var(--sp-12)), calc(-1 * var(--sp-12)) calc(100% + var(--sp-12)));
+}
+
+/* ---- band: data card; numbers.css draws its parts and the band stack ---- */
+.card--band {
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "label num" "foot num";
+  align-items: end;
+  gap: var(--sp-2) var(--sp-4);
+  min-height: var(--card-band-min-h, var(--tile-h));
+}
+
+/* ---- where it sits in what base.css draws (docs/reference.md rule 15) ---- */
+.page > :is(img, .ph) { max-height: var(--page-media-h, calc(var(--tap-base) * 14 / 3)); width: auto; height: auto; max-width: 100%; object-fit: contain; justify-self: start; align-self: start; } /* height auto: an <img> with width/height attributes keeps its ratio inside the cap — no band under the picture */
+.page > .ph { width: 100%; height: var(--page-media-h, calc(var(--tap-base) * 14 / 3)); }
+/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
+.sheet-stack > .card {
+  grid-area: 1 / 1; /* every card shares the stack's cell; later ones offset down */
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+  align-content: start;
+  align-self: start; /* own natural height (padding + head) by default */
+  z-index: var(--level, var(--z-over)); /* explicit paint order, 1 = back of the stack */
+}
+/* THE FRONT SHEET is the last .card, not the last child: a --closed stack
+   may carry a .sheet-stack__base after its sheets (below). Written once here
+   as "a card no card follows" so every rule about the front sheet agrees. */
+.sheet-stack > .card:not(:has(~ .card)) {
+  align-self: stretch; /* the front card fills the remaining stack height */
+}
+.sheet-stack > .card:nth-child(2) { margin-top: var(--stack-step); }
+.sheet-stack > .card:nth-child(3) { margin-top: calc(2 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(4) { margin-top: calc(3 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(5) { margin-top: calc(4 * var(--stack-step)); }
+/* stack headers: uniform — [back?] title left, icons right, one height,
+   same gap to content on every card */
+.sheet-stack > .card > .card__head {
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(--tap);
+}
+.sheet-stack--display > .card > .card__head { align-items: start; min-height: 0; }
+/* ============================================================
+   .sheet-stack--tap — tap a peeked sheet open; a back button returns it.
+
+   A sheet (a .card — the material, sheet.css's single sheet is the same
+   stuff) is rigid: it can move in, move out, or be covered — it can
+   never change shape. So every sheet here is the SAME full height,
+   always, set once and never touched again by anything. A "peek" is
+   not a short sheet; it's a full sheet the next one happens to cover,
+   showing only the strip above it, exactly like a sheet of paper part
+   way out of a real stack.
+
+   Because of that, the whole animation is one property: translate.
+   Nothing resizes, nothing re-stacks — z-index is the plain resting
+   --level order and is never touched, since the order already says
+   what has to happen. Cards after the tapped one sit IN FRONT of it,
+   so they're what's covering it, so they're what must leave. Cards
+   before it are already BEHIND it, so they need do nothing at all
+   except let themselves be covered as it rises over them.
+
+   .is-open   — the tapped card, moved up to the top of the stack. Its
+                own resting offset is margin-top (below); opening just
+                translates that offset back off, landing it flush at
+                the stack's top with its full height exactly filling
+                to the bottom.
+   .is-before — an earlier card, nudged one step down so it slips
+                under the next card's resting strip and is covered
+                there. Each carries its own --stagger (set in JS: 0
+                for the one nearest the tapped card, counting up
+                further back) so they tuck away, and later un-tuck,
+                one at a time.
+   .is-after  — a later card, moved out below, together, no stagger.
+   ============================================================ */
+.sheet-stack--tap > .card {
+  height: 100%; /* every card identical and full length, always — the one
+    size in this whole component, never toggled, never transitioned. At a
+    resting margin-top of n steps it simply overhangs the stack's bottom
+    by n steps (clipped by .screen--fill), so translating it up by exactly
+    that much lands it filling the stack precisely. */
+  overflow: clip;
+  transition: translate var(--motion-sheet) var(--ease); /* the only animated property here */
+  transition-delay: calc(var(--stagger, 0) * var(--motion-stagger)); /* 0 for everything
+    except a staggered is-before card: the card renders --stagger as it tucks or un-tucks */
+}
+.sheet-stack--tap > .card.is-open {
+  /* up by its own resting offset — pure movement, nothing resizes */
+  translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step) + var(--_pull, 0rem));
+  cursor: default;
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+}
+.sheet-stack--tap > .card.is-open.is-dragging { transition: none; }
+.sheet-stack--tap > .card > .card__head { touch-action: none; }
+.sheet-stack--tap > .card.is-open:not(:has(> .sheet__body)) {
+  padding-top: calc(var(--card-pad) + var(--_refresh, 0rem));
+  transition: translate var(--motion-sheet) var(--ease), padding-top var(--motion-sheet) var(--ease);
+}
+/* the front sheet — the one open on arrival — never travels up (it is not
+   tappable), so its resting offset would leave its last n steps below the
+   screen forever, unreachable by any scroll (timebank home, 2026-09-13). It
+   alone is cut to the room it actually has, and it scrolls like an opened
+   sheet does. Every other sheet keeps the one full height. */
+.sheet-stack--tap:not(.sheet-stack--closed) > .card:not(:has(~ .card)) {
+  height: calc(100% - var(--slot, 0) * var(--stack-step));
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+}
+/* a scrolling sheet shows no scrollbar (a desktop with a mouse would paint one
+   down the card's edge — Lh 2026-09-15); it still scrolls, like the page itself
+   (the hiding rule is base.css's, shared with every other scrolling track) */
+.sheet-stack--tap > .card.is-before { translate: 0 var(--stack-step); }
+.sheet-stack--tap > .card.is-after { translate: 0 100vh; }
+.sheet-stack--closed > .card { translate: 0 calc(var(--_headroom) - var(--_lift, 0rem)); }
+.sheet-stack--closed > .card.is-dragging { transition: none; }
+.sheet-stack--tap:not(.sheet-stack--closed) > .card.is-dragging:not(.is-open) {
+  translate: 0 calc(-1 * var(--_lift, 0rem));
+  transition: none;
+}
+.sheet-stack--closed > .card.is-before { translate: 0 calc(var(--_headroom) + var(--stack-step)); }
+.sheet-stack--closed > .card.is-after { translate: 0 100vh; }
+/* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
+   line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
+:is([data-palette], [data-finish]) .sheet-stack__base .card { box-shadow: none; }
+/* at the screen's top the open sheet's top corners are SQUARE (Lh 2026-10-08): round, they left two small pockets of the
+   bar's ground at the glass. They square as the sheet rises and round again as it folds, in the slide's own time. Paint
+   only, the sheet's size is untouched. A pull on the head keeps them square until the finger lets go. */
+.sheet-stack--flood > .card { transition: translate var(--motion-sheet) var(--ease), border-radius var(--motion-sheet) var(--ease); }
+.sheet-stack--flood > .card.is-open { border-top-left-radius: 0; border-top-right-radius: 0; }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head {
+  position: relative;
+  padding-left: 0;
+  transition: padding-left var(--motion-sheet) var(--ease);
+}
+/* ---- a stacked sheet with a SheetBody has the ONE sheet shape (Lh 2026-09-23, the home layout): sheet head
+   pinned at the top · sheet body scrolls, as long as it needs · sheet foot (a CardFoot, the CTA) at the bottom.
+   The card becomes a flex column and stops scrolling itself — only the body does. A sheet with no SheetBody
+   keeps the old way: the whole open card scrolls. ---- */
+.sheet-stack--tap > .card:has(> .sheet__body) { display: flex; flex-direction: column; gap: var(--card-gap); }
+.sheet-stack--tap > .card:has(> .sheet__body).is-open { overflow: clip; }
+/* a paper stack's foot is paper to the card's edges, and it covers the tinted flex gap above it so the
+   button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
+   where it was — the padding gives back what the bleed takes. */
+.sheet-stack > .card.sheet--paper > .card__foot {
+  background: var(--action-bg);
+  color: var(--card-ink);
+  margin-top: calc(-1 * var(--card-gap));
+  margin-inline: calc(-1 * var(--card-pad));
+  margin-bottom: calc(-1 * var(--card-pad));
+  padding-top: var(--card-gap);
+  padding-inline: var(--card-pad);
+  padding-bottom: var(--card-pad);
+}
+.stack-sheet > .card__head { flex-wrap: nowrap; }
+/* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
+   tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
+   (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) var(--ease); }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+/* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
+   no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
+.sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+/* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
+.sheet > .card__foot {
+  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: var(--z-over); /* the sheet's border box: the same height the sheet's own % reads */
+  align-items: end;
+  align-content: end;
+  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
+  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
+  pointer-events: none;
+  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
+  transition: translate var(--motion-sheet) var(--ease), visibility 0s;
+}
+.sheet.is-dragging > .card__foot { transition: none; }
+/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
+   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
+   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
+:is(.sheet--peek, .sheet--away) > .card__foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+/* 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 > :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, calc(var(--tap-base) * 14 / 3)));
+  max-height: none;
+  border-radius: 0;
+  border-inline: 0;
+  border-top: 0;
+  object-fit: cover;
+}
+/* ---- where it sits in what numbers.css draws (docs/reference.md rule 15) ---- */
+.band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
+.band-stack > .card--band + .card--band { border-top: var(--border-w) solid var(--hairline); }
+/* ---- where it sits in what sticky.css draws (docs/reference.md rule 15) ---- */
+.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) > .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 */
+
+/* ---- where it sits in what media.css draws: a postcard's picture (docs/reference.md rule 15) ---- */
+.postcard__front .postcard__turn > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; min-height: 0; }
+
+/* ---- where it sits in what stack.css draws: a sheet pulled to refresh holds still (docs/reference.md rule 15) ---- */
+.sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .sheet__body)) { transition: none; }
+
+/* ---- where it sits in what step.css draws: the reading block, a walk of pages (docs/reference.md rule 15) ---- */
+.step:has(> .sheet--peek) > .pages { padding-bottom: var(--sheet-peek); }
+.step > .pages {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
 
 /* ---- css/stack.css — sheet stack: .sheet-stack — the menu, sheets stacked, heads peek, tap opens ---- */
 /* ============================================================
@@ -1257,22 +1701,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    Lh, 2026-09-11). --_n: how many sheets the stack holds, read from the DOM
    by :has below so the closed geometry needs no script and no per-stack
    declaration. */
-.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: 5.5rem; margin-inline: calc(-1 * var(--screen-pad)); --_n: 1; }
+.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: calc(var(--tap-base) * 11 / 6); margin-inline: calc(-1 * var(--screen-pad)); --_n: 1; }
 .sheet-stack > .card {
-  grid-area: 1 / 1; /* every card shares the stack's cell; later ones offset down */
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom: 0;
-  align-content: start;
-  align-self: start; /* own natural height (padding + head) by default */
   --card-gap: var(--sp-5); /* head→content gap = the strip's 20px rhythm */
-  z-index: var(--level, 1); /* explicit paint order, 1 = back of the stack */
-}
-/* THE FRONT SHEET is the last .card, not the last child: a --closed stack
-   may carry a .sheet-stack__base after its sheets (below). Written once here
-   as "a card no card follows" so every rule about the front sheet agrees. */
-.sheet-stack > .card:not(:has(~ .card)) {
-  align-self: stretch; /* the front card fills the remaining stack height */
 }
 .sheet-stack:has(> .card:nth-child(2)) { --_n: 2; }
 .sheet-stack:has(> .card:nth-child(3)) { --_n: 3; }
@@ -1283,119 +1714,53 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    script at all. --slot is that place in steps; the tap animation reads it
    to know how far up to travel. Five is the practical peek depth. */
 .sheet-stack > .card:nth-child(1) { --slot: 0; --level: 1; }
-.sheet-stack > .card:nth-child(2) { --slot: 1; --level: 2; margin-top: var(--stack-step); }
-.sheet-stack > .card:nth-child(3) { --slot: 2; --level: 3; margin-top: calc(2 * var(--stack-step)); }
-.sheet-stack > .card:nth-child(4) { --slot: 3; --level: 4; margin-top: calc(3 * var(--stack-step)); }
-.sheet-stack > .card:nth-child(5) { --slot: 4; --level: 5; margin-top: calc(4 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(2) { --slot: 1; --level: 2; }
+.sheet-stack > .card:nth-child(3) { --slot: 2; --level: 3; }
+.sheet-stack > .card:nth-child(4) { --slot: 3; --level: 4; }
+.sheet-stack > .card:nth-child(5) { --slot: 4; --level: 5; }
 
-/* stack headers: uniform — [back?] title left, icons right, one height,
-   same gap to content on every card */
-.sheet-stack > .card > .card__head {
-  align-items: center;
-  justify-content: flex-start;
-  min-height: var(--tap);
-}
 /* NOT a skeleton head: a peek is one line at its own size, and the display
    stack deliberately runs a second line under the next card. */
 .sheet-stack > .card > .card__head :is(h1, h2, h3) {
   font-size: var(--fs-h1);
-  line-height: 1;
-  letter-spacing: -0.01em;
+  line-height: var(--lh-solid);
+  letter-spacing: var(--track-h2);
   margin-right: auto; /* pins the icon cluster right */
   display: block;
-  overflow-wrap: normal;
-}
-
-/* display stack: the giant title IS the peek — line one shows, line two is
-   clipped by the next card (recents / library lists) */
-.sheet-stack--display { --stack-step: 6.5rem; }
-.sheet-stack--display > .card > .card__head { align-items: start; min-height: 0; }
-.sheet-stack--display > .card > .card__head :is(h1, h2, h3) {
-  font: var(--type-display);
-  letter-spacing: var(--track-display);
-  /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
-     measured from the card's top edge); line two runs under the next card */
-  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5));
-}
-/* fanned stack: a toggle opens the stack wider so every peek shows more */
-.sheet-stack--fanned { --stack-step: 9.5rem; }
-
-/* a peeked card in a plain stack hides its own body. A --tap stack does
-   NOT: there, every card is full height and full content always, and a
-   peek is simply the strip of it the next card doesn't cover — the way a
-   card in a real deck is never a shorter card, just a mostly hidden one. */
-.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.card__head) { display: none; }
-
-/* ============================================================
-   .sheet-stack--tap — tap a peeked sheet open; a back button returns it.
-
-   A sheet (a .card — the material, sheet.css's single sheet is the same
-   stuff) is rigid: it can move in, move out, or be covered — it can
-   never change shape. So every sheet here is the SAME full height,
-   always, set once and never touched again by anything. A "peek" is
-   not a short sheet; it's a full sheet the next one happens to cover,
-   showing only the strip above it, exactly like a sheet of paper part
-   way out of a real stack.
-
-   Because of that, the whole animation is one property: translate.
-   Nothing resizes, nothing re-stacks — z-index is the plain resting
-   --level order and is never touched, since the order already says
-   what has to happen. Cards after the tapped one sit IN FRONT of it,
-   so they're what's covering it, so they're what must leave. Cards
-   before it are already BEHIND it, so they need do nothing at all
-   except let themselves be covered as it rises over them.
-
-   .is-open   — the tapped card, moved up to the top of the stack. Its
-                own resting offset is margin-top (below); opening just
-                translates that offset back off, landing it flush at
-                the stack's top with its full height exactly filling
-                to the bottom.
-   .is-before — an earlier card, nudged one step down so it slips
-                under the next card's resting strip and is covered
-                there. Each carries its own --stagger (set in JS: 0
-                for the one nearest the tapped card, counting up
-                further back) so they tuck away, and later un-tuck,
-                one at a time.
-   .is-after  — a later card, moved out below, together, no stagger.
-   ============================================================ */
-.sheet-stack--tap > .card {
-  height: 100%; /* every card identical and full length, always — the one
-    size in this whole component, never toggled, never transitioned. At a
-    resting margin-top of n steps it simply overhangs the stack's bottom
-    by n steps (clipped by .screen--fill), so translating it up by exactly
-    that much lands it filling the stack precisely. */
-  overflow: clip;
-  transition: translate var(--motion-sheet) ease; /* the only animated property here */
-  transition-delay: calc(var(--stagger, 0) * 70ms); /* 0 for everything
-    except a staggered is-before card: the card renders --stagger as it tucks or un-tucks */
-  --_back-size: var(--stack-back-size, calc(var(--tap-base) * 2 / 3)); /* read once, shared by the back button and the head's padding below */
+  overflow-wrap: normal;
 }
-.sheet-stack--tap > .card.is-open {
-  /* up by its own resting offset — pure movement, nothing resizes */
-  translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step) + var(--_pull, 0px));
-  cursor: default;
-  overflow-y: auto;
-  overflow-x: clip;
-  overscroll-behavior: contain;
+
+/* display stack: the giant title IS the peek — line one shows, line two is
+   clipped by the next card (recents / library lists) */
+.sheet-stack--display { --stack-step: calc(var(--tap-base) * 13 / 6); }
+.sheet-stack--display > .card > .card__head :is(h1, h2, h3) {
+  font: var(--type-display);
+  letter-spacing: var(--track-display);
+  /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
+     measured from the card's top edge); line two runs under the next card */
+  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5) - var(--_mark-room)); /* --_mark-room: card.css, the room for the marks over line one */
 }
-.sheet-stack--tap > .card.is-open.is-dragging { transition: none; }
-.sheet-stack--tap > .card > .card__head { touch-action: none; }
-/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
-   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
-   card's colour, so without the white inset the first row sits on that seam. */
-.sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0px); transition: padding-top var(--motion-sheet) ease; }
-.sheet-stack--tap > .card.is-open:not(:has(> .sheet__body)) {
-  padding-top: calc(var(--card-pad) + var(--_refresh, 0px));
-  transition: translate var(--motion-sheet) ease, padding-top var(--motion-sheet) ease;
+/* fanned stack: a toggle opens the stack wider so every peek shows more */
+.sheet-stack--fanned { --stack-step: calc(var(--tap-base) * 19 / 6); }
+
+/* a peeked card in a plain stack hides its own body. A --tap stack does
+   NOT: there, every card is full height and full content always, and a
+   peek is simply the strip of it the next card doesn't cover — the way a
+   card in a real deck is never a shorter card, just a mostly hidden one. */
+.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.card__head) { display: none; }
+
+/* ---- .sheet-stack--tap — tap a peeked sheet open; a back button returns it. How its sheets move (one property: translate) is
+   told over their rules, where they sit, in card.css. ---- */
+.sheet-stack--tap > .card {
+  --_back-size: var(--stack-back-size, calc(var(--tap-base) * 2 / 3)); /* read once, shared by the back button and the head's padding below */
 }
-.sheet-stack > .card > .sheet__body.is-refreshing,
-.sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .sheet__body)) { transition: none; }
+
 /* the GRIP (Lh 2026-10-05): four small dots at the middle of every sheet's top edge — a sign that this card
    slides up and down. A mark, not a control: nothing to press, nothing added to the sheet (the card's own background, in the
    room above its head). The card renders `.stack-card` when it is a sheet of a tap stack, so the dots are its own.
    At rest they are the card's own ink, faint. Only while THAT sheet reloads (`.is-loading`, from its `refreshing` prop,
-   and only while it is open) they dissolve white → black, so a light card and a dark one each get a moment the dots stand out.
-   Nothing travels. --_grip is the mix, 0 white → 1 black, private. */
+   and only while it is open) they dissolve from the ondark ink to the onlight ink, so a light card and a dark one each get a moment the dots stand out.
+   Nothing travels. --_grip is the mix, 0 the ondark ink → 1 the onlight ink, private. */
 @property --_grip { syntax: "<number>"; inherits: false; initial-value: 0; }
 .stack-card {
   --_grip-dot: var(--sp-1);
@@ -1411,8 +1776,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
     calc(50% + 0.5 * var(--_grip-step)) var(--_grip-y), calc(50% + 1.5 * var(--_grip-step)) var(--_grip-y);
 }
 .stack-card.is-open.is-loading {
-  --_grip-ink: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
-  animation: stack-grip-dissolve 0.4s ease-in-out infinite alternate;
+  --_grip-ink: color-mix(in srgb, var(--ink-onlight) calc(var(--_grip) * 100%), var(--ink-ondark));
+  animation: stack-grip-dissolve var(--motion-pulse) var(--ease-in-out) infinite alternate;
 }
 @keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
 /* the grip as ONE LINE (`mark="line"`, Lh 2026-10-06): the single Sheet's line, at the same place and the same length. It reads the
@@ -1432,22 +1797,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 @media (prefers-reduced-motion: reduce) {
   .stack-card.is-open.is-loading { animation: none; --_grip-ink: currentColor; }
 }
-/* the front sheet — the one open on arrival — never travels up (it is not
-   tappable), so its resting offset would leave its last n steps below the
-   screen forever, unreachable by any scroll (timebank home, 2026-09-13). It
-   alone is cut to the room it actually has, and it scrolls like an opened
-   sheet does. Every other sheet keeps the one full height. */
-.sheet-stack--tap:not(.sheet-stack--closed) > .card:not(:has(~ .card)) {
-  height: calc(100% - var(--slot, 0) * var(--stack-step));
-  overflow-y: auto;
-  overflow-x: clip;
-  overscroll-behavior: contain;
-}
-/* a scrolling sheet shows no scrollbar (a desktop with a mouse would paint one
-   down the card's edge — Lh 2026-09-15); it still scrolls, like the page itself
-   (the hiding rule is base.css's, shared with every other scrolling track) */
-.sheet-stack--tap > .card.is-before { translate: 0 var(--stack-step); }
-.sheet-stack--tap > .card.is-after { translate: 0 100vh; }
 
 /* ============================================================
    .sheet-stack--closed — nothing open on arrival. Every sheet, the front
@@ -1464,14 +1813,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    lands flush at the top. is-before tucks one step below its resting place.
    ============================================================ */
 .sheet-stack--closed { --_headroom: calc(100% - var(--_n) * var(--stack-step)); }
-.sheet-stack--closed > .card { translate: 0 calc(var(--_headroom) - var(--_lift, 0px)); }
-.sheet-stack--closed > .card.is-dragging { transition: none; }
-.sheet-stack--tap:not(.sheet-stack--closed) > .card.is-dragging:not(.is-open) {
-  translate: 0 calc(-1 * var(--_lift, 0px));
-  transition: none;
-}
-.sheet-stack--closed > .card.is-before { translate: 0 calc(var(--_headroom) + var(--stack-step)); }
-.sheet-stack--closed > .card.is-after { translate: 0 100vh; }
 
 /* .sheet-stack__base — the base's content, in the headroom of a closed stack:
    behind every sheet (level 0), the stack's inset put back (the stack bleeds),
@@ -1481,9 +1822,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack > .sheet-stack__base {
   grid-area: 1 / 1;
   align-self: start;
-  z-index: 0;
-  --_under: 0px;
-  height: calc(var(--_headroom, 0px) + var(--_under));
+  z-index: var(--z-flat);
+  --_under: 0rem;
+  height: calc(var(--_headroom, 0rem) + var(--_under));
   padding-inline: var(--screen-pad);
   --_gap: var(--card-gap, var(--sp-5));
   display: grid;
@@ -1500,7 +1841,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* a base that is ONE Centre is one thing handed over (a note, an empty state): it stands in the MIDDLE of the room above the peeks
    (Lh 2026-10-06). The base already keeps the screen's inset, so the centre block gives its own back. */
 .sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
-.sheet-stack__base > .screen__centre { padding-inline: 0; }
 /* loose things rest against the peeks, so the room under the last one is the room between two of them (Lh 2026-10-09: a card's
    bottom edge lay on the first sheet's top edge). A lone Page reads from the top and a lone Centre stands in the middle: neither rests there. */
 .sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) {
@@ -1523,9 +1863,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   overscroll-behavior: contain;
   touch-action: pan-y;
 }
-/* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
-   line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
-:is([data-palette], [data-finish]) .sheet-stack__base .card { box-shadow: none; }
 
 /* ============================================================
    .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen
@@ -1547,38 +1884,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    ============================================================ */
 .screen--fill:has(> .sheet-stack--flood) { --_bar-gap: var(--sp-2); }
 .screen--fill:has(> .sheet-stack--flood):has(> .topbar:first-child) { --_bar-gap: var(--screen-gap); }
-.screen--fill:has(> .sheet-stack--flood) > :is(.appbar, .topbar):first-child {
-  position: absolute;
-  inset: var(--safe-top) 0 auto;
-  max-width: none;
-  margin: 0;
-  z-index: 0; /* under every sheet (--level 1-5); the base clears it by margin */
-}
 .sheet-stack--flood { --_bar: calc(var(--top-h, var(--header-h)) + var(--_bar-gap)); }
 .sheet-stack--flood > .sheet-stack__base {
   margin-top: var(--_bar);
-  height: calc(var(--_headroom, 0px) - var(--_bar) + var(--_under));
+  height: calc(var(--_headroom, 0rem) - var(--_bar) + var(--_under));
 }
-.screen--fill:has(> .sheet-stack--flood > .stack-card.is-open, > .sheet-stack--flood > :not(.stack-card) > .stack-card.is-open) > :is(.appbar, .topbar):first-child {
-  visibility: hidden;
-  transition: visibility 0s linear var(--motion-sheet); /* gone once the sheet has covered it; back at once on a fold (the rule above has no delay) */
-}
-/* at the screen's top the open sheet's top corners are SQUARE (Lh 2026-10-08): round, they left two small pockets of the
-   bar's ground at the glass. They square as the sheet rises and round again as it folds, in the slide's own time. Paint
-   only, the sheet's size is untouched. A pull on the head keeps them square until the finger lets go. */
-.sheet-stack--flood > .card { transition: translate var(--motion-sheet) ease, border-radius var(--motion-sheet) ease; }
-.sheet-stack--flood > .card.is-open { border-top-left-radius: 0; border-top-right-radius: 0; }
 
 /* back button: lives in a slot the header reserves once open, and DISSOLVES
    into it — an opacity fade in place, never a slide in from the left (the
    slide read as a second thing moving while the sheet itself moved; Lh,
    2026-09-11). Only the sheet travels; the button appears where it is. */
 /* a sheet's OWN head and back: the card is the stack's child or, with one host wrapper, the wrapper's. A card standing in the sheet's body wears its own head */
-:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head {
-  position: relative;
-  padding-left: 0;
-  transition: padding-left var(--motion-sheet) ease;
-}
 :is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head > .sheet-stack__back {
   position: absolute;
   left: 0;
@@ -1586,7 +1902,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   translate: 0 -50%;
   opacity: 0;
   visibility: hidden;
-  transition: opacity var(--motion-sheet) ease, visibility var(--motion-sheet);
+  transition: opacity var(--motion-sheet) var(--ease), visibility var(--motion-sheet);
   /* SMALL (see "the back button, SMALL" below) */
   width: var(--_back-size);
   height: var(--_back-size);
@@ -1599,63 +1915,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   visibility: visible;
 }
 
-/* ---- a stacked sheet with a SheetBody has the ONE sheet shape (Lh 2026-09-23, the home layout): sheet head
-   pinned at the top · sheet body scrolls, as long as it needs · sheet foot (a CardFoot, the CTA) at the bottom.
-   The card becomes a flex column and stops scrolling itself — only the body does. A sheet with no SheetBody
-   keeps the old way: the whole open card scrolls. ---- */
-.sheet-stack--tap > .card:has(> .sheet__body) { display: flex; flex-direction: column; gap: var(--card-gap); }
-.sheet-stack--tap > .card:has(> .sheet__body).is-open { overflow: clip; }
 .sheet-stack > .card:has(> .sheet__body) > :not(.sheet__body) { flex-shrink: 0; }
 .sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
-/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
-   cover the corners, and a white body showed there beside the head. Clear, the card's own colour
-   shows in that pocket. Open, the body is white, and the first row sits --sp-6 down, the same white
-   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
-   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
-   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
-   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
-   at the moment the sheet stops. Rising, the body is white at once. */
-/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the white starts
-   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
-   stack's step and the body's own rows read it. */
-.sheet-stack > .card.sheet--paper > .sheet__body {
-  margin-top: calc(var(--sp-3) - var(--card-gap));
-  padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
-  transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
-}
-/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
-.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
-.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-  background-color: transparent;
-  transition:
-    padding-top var(--motion-sheet) ease,
-    background-color var(--motion-quick) ease calc(var(--stagger, 0) * 70ms + var(--motion-sheet) - var(--motion-quick));
-}
-@media (prefers-reduced-motion: reduce) {
-  .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-    transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
-  }
-}
-/* a paper stack's foot is white to the card's edges, and it covers the tinted flex gap above it so the
-   button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
-   where it was — the padding gives back what the bleed takes. */
-.sheet-stack > .card.sheet--paper > .card__foot {
-  background: var(--color-paper, #fff);
-  color: var(--color-ink, #141414);
-  margin-top: calc(-1 * var(--card-gap));
-  margin-inline: calc(-1 * var(--card-pad));
-  margin-bottom: calc(-1 * var(--card-pad));
-  padding-top: var(--card-gap);
-  padding-inline: var(--card-pad);
-  padding-bottom: var(--card-pad);
-}
+/* a paper stack's foot is paper (card.css paints it): its ink reads the action's side */
+.sheet-stack > .card.sheet--paper > .card__foot { --dark: var(--action-dark); }
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
    filled (.icon-btn--invert) only while the sheet is open; a count is a small circle over the icon's top right corner ---- */
 .stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
 /* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
    (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
-.stack-sheet > .card__head { flex-wrap: nowrap; }
 .stack-sheet__title {
   flex: 1; min-width: 0; overflow-x: clip; overflow-y: visible; white-space: nowrap; overflow-wrap: normal; /* clip SIDEWAYS only:
      hidden clipped the Thai tone marks above a line-height-1 line (เพื่อน lost its ไม้เอก — Lh 2026-09-24) */
@@ -1664,7 +1933,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .stack-sheet__run { display: inline-block; }
 .stack-sheet__title.is-long .stack-sheet__run {
-  animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, 6s)) ease-in-out infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
+  animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
 }
 @keyframes stack-sheet-run { 0%, 20% { translate: 0; } 85%, 100% { translate: calc(-1 * var(--_over)); } }
 @media (prefers-reduced-motion: reduce) {
@@ -1677,11 +1946,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   /* the disc fades with the sheet: in as it rises, out as it folds, and across when another tab is pressed.
      scale stays on the press (actions.css) so the give under a finger stays quick */
   transition:
-    scale var(--motion-press) ease-out,
-    background-color var(--motion-sheet) ease,
-    color var(--motion-sheet) ease,
-    border-color var(--motion-sheet) ease,
-    box-shadow var(--motion-sheet) ease;
+    scale var(--motion-press) var(--ease-out),
+    background-color var(--motion-sheet) var(--ease),
+    color var(--motion-sheet) var(--ease),
+    border-color var(--motion-sheet) var(--ease),
+    box-shadow var(--motion-sheet) var(--ease);
 }
 .stack-sheet__tab > .stack-sheet__count { /* outranks .badge (numbers.css loads after this file) */
   position: absolute;
@@ -1694,7 +1963,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding: 0 var(--stack-sheet-count-pad-x, 0.25em) var(--stack-sheet-count-lift, 0.1em); /* "99+" keeps its room at every text size;
      the room UNDER the number lifts it onto the circle's middle: a digit has no descender, so a centred line box sets it low (Lh 2026-10-01) */
   font: var(--type-caption);
-  line-height: 1;
+  line-height: var(--lh-solid);
   pointer-events: none;
 }
 /* a tab not chosen is the icon alone — no ring, no ground (Lh 2026-09-23: "the circle around is not pretty"); the chosen one turns
@@ -1710,26 +1979,25 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    margin around it reaches into the card's padding — and an open head (back · title · three tabs) keeps one line (Lh 2026-09-23) */
 .card__head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
 
-/* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
-   tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
-   (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
-.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
 /* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
    while open; the last tab then sits on the inset (no reach into the padding) */
 .sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
-:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) ease; }
-.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
 .sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
-.sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
+.sheet-stack--tap .sheet-stack__back > .icon { --icon-size: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--_back-size) - var(--tap-sm)) / 2); }
 
 /* the open sheet's title folds it (SheetStack.tsx): it says so to a pointer */
 .sheet-stack--tap > .card.is-open > .card__head > :is(h1, h2, h3) { cursor: pointer; }
-/* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
-   no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
-.sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
 .sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */
 
+/* ---- where it sits in what base.css draws (docs/reference.md rule 15) ---- */
+/* min-height: 0 — a flex item's floor is its content, and the stack's content
+   is its own full-height sheets, so without it the stack grew to the whole
+   screen and its open sheet ran past the bottom edge by the bars' height,
+   unreachable by scrolling (timebank home, 2026-09-13). The stack IS the room
+   left under the bars; every sheet fills exactly that. */
+.screen--fill > .sheet-stack { flex: 1; min-height: 0; }
+
 /* ---- css/sheet.css — sheet single: .sheet — one card as a bottom sheet, peek / half / full ---- */
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
@@ -1804,7 +2072,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   inset: 0;
   top: var(--_top, 0);            /* a stage keeps its top bar's line free — see .sheet-stage */
   translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: the Sheet component, only while the handle is held */
-  transition: translate var(--motion-sheet) ease;
+  transition: translate var(--motion-sheet) var(--ease);
 
   /* handle · head · body: a column, the body takes what is left and scrolls
      (below) — so the handle and the head never move, whatever the content */
@@ -1837,7 +2105,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
    carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:
    a form lives whole in one sheet. */
-.sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
+.sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
 /* the body — everything under the head, the one thing in a sheet that
@@ -1882,23 +2150,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 /* …and the link row under the button, when there is one (its line + the gap over it) */
 .sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--sheet-foot-h, calc(var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)))) + var(--card-pad) + var(--_safe-b-open)); } /* --sheet-foot-h: the foot's rows as the Sheet measured them (a button grows with the text size) */
-.sheet > .card__foot {
-  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
-  align-items: end;
-  align-content: end;
-  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
-  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
-  pointer-events: none;
-  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
-  transition: translate var(--motion-sheet) ease, visibility 0s;
-}
 .sheet > .card__foot > * { pointer-events: auto; }
 .sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
-.sheet.is-dragging > .card__foot { transition: none; }
-/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
-   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
-   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
-:is(.sheet--peek, .sheet--away) > .card__foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 /* that padding can be taller than the body's own box (a short box: a small phone with the keyboard up) and a
    box is never smaller than its padding — so the pinned parts must not give way to it: the body runs past
    the sheet's clipped edge instead, where nothing shows anyway. At peek and away no part of the body shows. */
@@ -1915,14 +2168,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    touch-action: none hands a touch drag to the Sheet component instead of to the scroller. */
 .sheet__handle {
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-over);
   top: calc((var(--card-pad) - var(--sp-1)) / 2); /* the dots' top: (pad − 4) / 2. The line starts there too */
   left: 50%;
   translate: -50% 0;
   border: 0;
   color: inherit; /* a <button> has its own UA colour; the mark is the card's ink */
   background: currentColor;
-  opacity: 0.3;
+  opacity: var(--fade-dim);
   width: calc(var(--sp-base) * 18); /* 72: the line. The grab is the ::before, not this width */
   height: var(--_handle);
   border-radius: var(--sheet-handle-radius, var(--r-chip));
@@ -1931,22 +2184,22 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   touch-action: none;
   cursor: grab;
 }
-/* paper: the head keeps the sheet's own colour, the content is white (Lh 2026-10-05).
+/* paper: the head keeps the sheet's own colour, the content is the theme's paper, --action-bg, the ground of every field (Lh 2026-10-05: white; Lh 2026-10-20: the theme's, never a fixed white).
    The body and the foot read as paper; the handle and the head stay on the card.
    The flex gap under the head is outside the body, so it stays the sheet's tint.
-   The first field would sit on that colour seam. The white inset is --sp-6 (24px at
+   The first field would sit on that colour seam. The paper's inset is --sp-6 (24px at
    the default spacing), the body's own top padding, and only when the sheet is paper.
    A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
-   inset: the stack's own gap under the head is the card's colour, so the row still needs this white.
-   The paper is a surface of the plain card's side: on a dark sheet its words still turn to onlight. */
+   inset: the stack's own gap under the head is the card's colour, so the row still needs this paper.
+   The paper takes the side of the controls' paper (--action-dark): on a dark sheet its words still turn to onlight. */
 .sheet--paper > .sheet__body {
-  --card-bg: var(--color-paper, #fff);
-  --dark: var(--card-1-dark);
+  --card-bg: var(--action-bg);
+  --dark: var(--action-dark);
   background: var(--card-bg);
   color: var(--card-ink);
   padding-top: var(--sp-6);
 }
-.sheet--paper > .card__foot { --card-bg: var(--color-paper, #fff); color: var(--color-ink, #141414); }
+.sheet--paper > .card__foot { --card-bg: var(--action-bg); --dark: var(--action-dark); --card-foot-ink: var(--card-ink); }
 .sheet__handle--dots {
   --_dot: var(--sp-1);
   --_step: calc(var(--_dot) * 2.5);
@@ -1963,15 +2216,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background-position: 0 0, var(--_step) 0, calc(2 * var(--_step)) 0, calc(3 * var(--_step)) 0;
 }
 /* the app reloads what the sheet shows (`refreshing`, off unless set): the mark changes colour exactly as a stack sheet's grip
-   does — white → black and back, so a light sheet and a dark one each get a moment it stands out. --_grip and the keyframes are
+   does — the ondark ink → the onlight ink and back, so a light sheet and a dark one each get a moment it stands out. --_grip and the keyframes are
    the stack's (stack.css): one sign for both. Nothing travels. */
 .sheet.is-loading > .sheet__handle {
   opacity: 1;
-  background-color: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
-  animation: stack-grip-dissolve 0.4s ease-in-out infinite alternate;
+  background-color: color-mix(in srgb, var(--ink-onlight) calc(var(--_grip) * 100%), var(--ink-ondark));
+  animation: stack-grip-dissolve var(--motion-pulse) var(--ease-in-out) infinite alternate;
 }
 .sheet.is-loading > .sheet__handle--dots {
-  --_ink: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
+  --_ink: color-mix(in srgb, var(--ink-onlight) calc(var(--_grip) * 100%), var(--ink-ondark));
   background-color: transparent;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1995,18 +2248,18 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    - a label .row with its .check / .toggle may be the head when the sheet's
      whole ask is that switch: peek shows it (a row is --tap tall plus its own
      padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
-.sheet > .card__head { min-height: var(--sheet-head-h); }
+.sheet > .card__head { --card-head-min-h: var(--sheet-head-h); }
 /* a sheet's title is ONE line, always (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน" wrapped to two lines at 390px) — the
    thing at its end keeps its place beside it; a caption still takes its own row. A title too long for the line RUNS sideways
    like a song title (Lh 2026-10-03, as the StackSheet's — it was cut with …, and the end of it could never be read): the Sheet
    measures --_over, the width it overflows by, and sets .is-long; one way — it waits, runs to its end, waits, and starts again
    from the first letter. The move is text-indent: the heading is the app's own element, there is no inner box to slide.
    Before the Sheet has measured, and where motion is off, it is cut with …. */
-.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { flex-wrap: nowrap; }
+.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { --card-head-wrap: nowrap; }
 .sheet > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; min-width: 0; } /* clip SIDEWAYS only: hidden cut the Thai tone marks over the line */
 .sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long {
   text-overflow: clip;
-  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, 6s)) ease-in-out infinite; /* --_run: from the overflow, 30px a second + the pauses */
+  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* --_run: from the overflow, 30px a second + the pauses */
 }
 @keyframes sheet-title-run { 0%, 20% { text-indent: 0; } 85%, 100% { text-indent: calc(-1 * var(--_over)); } }
 @media (prefers-reduced-motion: reduce) {
@@ -2097,11 +2350,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   isolation: isolate; /* the ring and the hint stack inside the map only — a sheet over the map covers them */
   color: var(--map-ink, var(--on-surface));
   background:
-    repeating-linear-gradient(75deg,  transparent 0 5.5rem,  var(--hairline) 5.5rem 6.25rem),
-    repeating-linear-gradient(-18deg, transparent 0 8.75rem, var(--ink-tint) 8.75rem 9.25rem),
+    repeating-linear-gradient(var(--street-1),  transparent 0 calc(var(--tap-base) * 11 / 6),  var(--hairline) calc(var(--tap-base) * 11 / 6) calc(var(--tap-base) * 25 / 12)),
+    repeating-linear-gradient(var(--street-2), transparent 0 calc(var(--tap-base) * 35 / 12), var(--ink-tint) calc(var(--tap-base) * 35 / 12) calc(var(--tap-base) * 37 / 12)),
     var(--card-2-bg);
 }
-.map > :first-child { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: transparent; } /* its own stacking context: an engine's layered panes stay under the ring; an engine's own grey ground would hide the pattern while tiles load */
+.map > :first-child { position: absolute; inset: 0; z-index: var(--z-flat); isolation: isolate; background: transparent; } /* its own stacking context: an engine's layered panes stay under the ring; an engine's own grey ground would hide the pattern while tiles load */
 .map__ring {
   position: absolute;
   left: 50%;
@@ -2116,7 +2369,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background: var(--map-ring-bg, var(--accent-soft));
   box-shadow: var(--map-ring-shadow, var(--shadow-float));
   pointer-events: none;
-  z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
+  z-index: var(--z-over); /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
 .map__pin { /* mark="pin": an exact point — the pin's TIP is where the ring's centre sits, so the engine reads the element's bottom-centre */
   position: absolute;
@@ -2131,11 +2384,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   color: var(--map-pin-ink, var(--card-ink));
   filter: drop-shadow(var(--map-pin-drop, var(--shadow-float)));
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-over);
 }
 /* the lucide tip stops 2.2 of 24 short of the box's bottom: lowered so the tip IS the bottom-centre; filled with the surface so the
    street pattern never shows through the pin's body */
-.map__pin > .icon { width: 100%; height: 100%; translate: 0 9%; fill: var(--surface); }
+.map__pin > .icon { --icon-size: 100%; --icon-shift: 0 9%; }
 .map__credit { /* the tile provider's credit — required by OSM; a caption, not the engine's own control */
   position: absolute;
   right: var(--sp-2);
@@ -2146,7 +2399,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   color: var(--map-credit-ink, var(--on-surface-muted));
   font: var(--map-credit-font, var(--type-caption));
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-over);
 }
 .map__hint {
   position: absolute;
@@ -2164,7 +2417,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   text-align: center;
   box-shadow: var(--map-hint-shadow, var(--shadow-float));
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-over);
 }
 
 /* ---- the map IN FLOW (Lh 2026-10-17): `.map--inline` — a box in a card, or the whole of a sheet's body ----
@@ -2194,7 +2447,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    name; the picked one fills with accent. Above the ring: the ring takes no taps, the places do. */
 .map-pick {
   position: absolute;
-  z-index: 2;
+  z-index: var(--z-over-2);
   width: var(--tap);
   height: var(--tap);
   translate: -50% -50%;
@@ -2225,7 +2478,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background: var(--map-pick-name-bg, color-mix(in srgb, var(--surface) 85%, transparent));
   font: var(--map-pick-font, var(--type-caption));
 }
-.map-pick:has(:checked) { z-index: 3; } /* the picked place's name lies over a neighbour's */
+.map-pick:has(:checked) { z-index: var(--z-over-3); } /* the picked place's name lies over a neighbour's */
 .map-pick:has(:checked) > :is(.map-pick__mark, .map-pick__name) { background: var(--map-pick-on-bg, var(--accent)); color: var(--map-pick-on-ink, var(--on-accent)); }
 .map-pick:has(:focus-visible) > .map-pick__mark { outline: var(--focus); outline-offset: var(--sp-0); }
 .map-pick:has(:disabled) { opacity: var(--off); cursor: default; }
@@ -2250,8 +2503,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   /* words on the scrim: white on a strip of the scrim over it. The scrim alone is half black, so over a white page it is #808080, where white
      is 3.9:1; doubled, #404040, 10:1. It read --card-3-ink, a brand's light ink, on a black scrim */
   background: var(--sheet-stage-foot-bg, var(--scrim));
-  color: var(--sheet-stage-foot-ink, #ffffff);
-  z-index: 2;
+  color: var(--sheet-stage-foot-ink, var(--ink-ondark));
+  z-index: var(--z-over-2);
 }
 
 /* dim stage: blur + darken whatever sits behind the sheet */
@@ -2261,9 +2514,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: absolute;
   inset: 0;
   background: var(--scrim);
-  z-index: 1;
+  z-index: var(--z-over);
 }
-.sheet-stage--dim .sheet { z-index: 2; }
+.sheet-stage--dim .sheet { z-index: var(--z-over-2); }
 
 /* ---- sheet steps: one task in steps inside one sheet (Lh 2026-09-24) ----
    <div class="sheet-steps"> › <ol class="sheet-steps__track"> of <li class="sheet-step sheet-step--done|now|next">. The done steps
@@ -2274,14 +2527,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    falls — no height is written. Nothing fades: done and next read at full ink. */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
 .sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
-.sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
+.sheet-steps__holder { position: absolute; top: 0; left: 0; width: var(--browser-text); height: var(--browser-text); padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: var(--browser-text); } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
 .sheet-steps__track { list-style: none; margin: 0; padding: 0 0 var(--sheet-steps-end, var(--sp-6)); flex: 1; /* room under the LAST step: scrolled to the end it never touches the foot's button (Lh 2026-09-28, #153) */ display: flex; flex-direction: column; }
 
 .sheet-step {
   position: relative; min-width: 0;
   display: grid; grid-template-columns: minmax(0, 1fr); /* the column is the step's width, never its words' — a long summary is cut with …, it never pushes the row past the sheet's edge (Lh 2026-09-28, #153) */ grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
-  transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
+  transition: grid-template-rows var(--motion-sheet) var(--ease), flex-grow var(--motion-sheet) var(--ease);
   --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
 }
 /* the open step GROWS into the room left, so the steps not done yet wait in a pile at the bottom — and a move is an ACCORDION:
@@ -2289,7 +2542,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    with them, nothing jumps (Lh 2026-09-24) */
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
-.sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
+.sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the card's room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
   display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
@@ -2297,11 +2550,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
 }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
+.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a disc of the card's colour on the bar, the number in the ink */
   flex: none; display: grid; place-items: center; box-sizing: border-box; inline-size: var(--sheet-step-num-size, 1.408em); block-size: var(--sheet-step-num-size, 1.408em); /* em, not rem (Lh 2026-10-03, as the StackSheet's count): the disc is cut from ITS OWN number's size —
      at a large text size the number grew and a 24px disc did not, so the digit sat on its bottom edge; 1.408em of a 17px caption = the 24px it always was */
   padding-bottom: var(--sheet-step-num-lift, 0.1em); /* the room UNDER the number lifts it onto the disc's middle: a digit has no descender, so a centred line box sets it low */
-  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
+  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: var(--lh-solid); font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
 .sheet-step__summary { color: var(--sheet-step-summary-ink, var(--card-muted)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -2309,14 +2562,57 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
 .sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */
 .sheet-step__inner > * { min-width: 0; }
-.sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
-.sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
+.sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s var(--ease-linear) var(--motion-sheet); }
 .sheet-step__go { position: absolute; inset: min(0rem, (var(--_row-h) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; cursor: pointer; }
 /* the last step's finish, when the app gives one: under the steps */
 .sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
 @media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }
-/* the step waiting for its answer: its buttons take no taps (the app guards its own handler too) */
-.sheet-step--busy .btn { pointer-events: none; opacity: 0.5; }
+
+/* ==== the step bar answers a press, as PRESS in actions.css answers every other control (#62: a block is written in its own file) ==== */
+.sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
+
+/* ==== a body that holds only an EmptyState stands it at --empty-state-at of its room, as a Step does (step.css) (#62: a block is written in its own file) ==== */
+.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; }
+
+/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
+/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
+   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
+   card's colour, so without the paper's inset the first row sits on that seam. */
+.sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0rem); transition: padding-top var(--motion-sheet) var(--ease); }
+/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the paper starts
+   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
+   stack's step and the body's own rows read it. */
+.sheet-stack > .card.sheet--paper > .sheet__body {
+  margin-top: calc(var(--sp-3) - var(--card-gap));
+  padding-top: calc(var(--sp-6) + var(--_refresh, 0rem));
+  transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
+}
+/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
+.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
+/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
+   cover the corners, and a paper body showed there beside the head. Clear, the card's own colour
+   shows in that pocket. Open, the body is paper, and the first row sits --sp-6 down, the same paper
+   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
+   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
+   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
+   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
+   at the moment the sheet stops. Rising, the body is paper at once. */
+.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+  background-color: transparent;
+  transition:
+    padding-top var(--motion-sheet) var(--ease),
+    background-color var(--motion-quick) var(--ease) calc(var(--stagger, 0) * var(--motion-stagger) + var(--motion-sheet) - var(--motion-quick));
+}
+@media (prefers-reduced-motion: reduce) { .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+    transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
+  } }
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+.screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+
+/* ---- where it sits in what stack.css draws: a body pulled to refresh holds still (docs/reference.md rule 15) ---- */
+.sheet-stack > .card > .sheet__body.is-refreshing { transition: none; }
 
 /* ---- css/step.css — .step: one screen, one task — card, optional sheet, bar outside ---- */
 /* ============================================================
@@ -2386,135 +2682,29 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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;
-}
+   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--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; }
 
 /* ---- css/forms.css — outlined fields, add-row ---- */
 /* ============================================================
@@ -2542,7 +2732,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .field select,
 .field textarea,
 .field--rows {
-  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does. .field--rows too, so 1lh is the textarea's line for its icon */
+  font: var(--field-font, var(--fw-regular) var(--fs-lg) / var(--lh-field) var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does. .field--rows too, so 1lh is the textarea's line for its icon */
 }
 .field input,
 .field select,
@@ -2556,17 +2746,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   caret-color: currentColor;
 }
 .field input::placeholder,
-.field textarea::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+.field textarea::placeholder { color: inherit; opacity: var(--fade-hint); font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
 /* several lines in the same frame (Field rows): the textarea is as tall as its `rows` × line, the frame grows round it, the icon and the action stay at the top (Lh 2026-10-19) */
 .field--rows { align-items: flex-start; padding-block: var(--field-rows-pad-y, var(--sp-3)); }
 .field textarea { flex: 1; resize: none; display: block; }
-.field--rows > .icon { margin-top: calc((1lh - var(--icon-sm)) / 2); } /* centred on the first line */
+.field--rows > .icon { --icon-margin: calc((1lh - var(--icon-sm)) / 2) 0 0; } /* centred on the first line */
 /* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
 .field:has(:focus, [data-cursor]) { border-color: var(--field-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this field */
 
 /* field with its action inside: date pick, send, go — the button sits flush right */
 .field--action { padding-right: var(--sp-1); min-height: var(--field-action-min-h, var(--tap-lg)); }
-.field--action > .icon-btn { margin-left: auto; }
 
 /* colored palettes drop the visible outline elsewhere — fields keep one */
 [data-palette] .field:not(:has(:focus)) { border-color: color-mix(in srgb, currentColor 25%, transparent); }
@@ -2591,25 +2780,18 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: grid;
   place-items: center;
   font-size: var(--add-row-plus-font-size, var(--fs-md));
-  line-height: 1;
+  line-height: var(--lh-solid);
 }
-.add-row__plus .icon { width: var(--icon-xs); height: var(--icon-xs); }
+.add-row__plus .icon { --icon-size: var(--icon-xs); }
 
 /* ---- a wrong value, and the line that says so (Lh 2026-09-24) ----
    --signal-error is the one colour the wireframe has; it never speaks alone — the line carries an icon and words.
    <p class="form-note form-note--error" role="alert"><svg class="icon icon--xs">…</svg>Not a phone number</p>
    <p class="form-note form-note--busy" role="status"><svg …/>Sending the code…</p> (the ring turns) */
 .field.field--error, [data-palette] .field.field--error { border-color: var(--field-error-border, var(--signal-error)); }
-.pin.pin--error .pin__cell, .pin.pin--error .pin__cell:focus { border-color: var(--pin-error-border, var(--signal-error)); color: var(--pin-error-ink, var(--signal-error)); } /* ALL the cells, edge and digit — the one the cursor waits in too (Lh 2026-09-24); the wrong digits stay in red until the member types again */
-/* a code that does not match (Pin match): the row shakes once, sideways, then the Pin empties itself for a new try (Lh 2026-09-25) */
-@media (prefers-reduced-motion: no-preference) {
-  .pin--shake { animation: pin-shake var(--pin-shake-time, 0.4s) ease-in-out; }
-}
-@keyframes pin-shake { 0%, 100% { translate: 0; } 20%, 60% { translate: calc(-1 * var(--pin-shake-x, var(--sp-2))); } 40%, 80% { translate: var(--pin-shake-x, var(--sp-2)); } }
 .form-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font: var(--form-note-font, var(--type-caption)); color: var(--form-note-ink, var(--card-muted)); text-align: center; }
-.form-note > .icon { flex: none; }
 .form-note--error { color: var(--form-note-error-ink, var(--signal-error)); }
-@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
+@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { --icon-spin: turn var(--motion-spin) var(--ease-linear) infinite; } } /* `turn`: tokens.css */
 
 /* ---- css/journey.css — route, tile badge, note row ---- */
 /* ============================================================
@@ -2636,7 +2818,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .route__time { grid-row: 3; align-self: start; }
 
 .route__code { font: var(--route-code-font, var(--type-h2)); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--route-code-gap, var(--sp-3)); }
-.route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: 0.65; }
+.route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: var(--fade-mild); }
 .route__point--end .route__code::after { content: none; }
 .route__time { font: var(--route-time-font, var(--type-body)); font-variant-numeric: tabular-nums; }
 .route__place { font: var(--route-place-font, var(--type-caption)); color: var(--route-place-ink, var(--card-muted)); }
@@ -2657,17 +2839,19 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* the label is the badge's own ink, smaller: a badge is a small fill of any colour (a palette paints it yellow), and only its own ink is
    sure to hold 4.5:1 on it; --dim faded it to 2.4:1 */
 .tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); color: var(--tile-badge-label-ink, inherit); }
-.tile-badge__value { font: 800 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+.tile-badge__value { font: var(--fw-heavy) var(--fs-lg) / var(--lh-tight) var(--font-display); font-variant-numeric: tabular-nums; }
 
 /* plain: no fill — a date box beside a title (Jun / 18) */
 .tile-badge--plain { background: transparent; --dark: inherit; color: inherit; padding: 0; min-width: var(--tile-badge-plain-min-w, var(--tap-sm)); }
-.tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
+.tile-badge--plain .tile-badge__value { font: var(--fw-heavy) var(--fs-h1) / var(--lh-solid) var(--font-display); }
 
 /* stretch: a date in a head (Lh 2026-10-19) — as tall as the title block beside it and no taller (the head stretches it; size
    containment keeps its own words from adding height). Its height picks the form: short (a one-line title) = two lines, the day name
-   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. */
+   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. It grows no taller than
+   its three lines (2026-10-21, timebank: beside a four-line title it was a tall empty block); held there, it stands at the head's top. */
 .tile-badge--stretch {
   align-self: stretch;
+  max-block-size: calc((2 * var(--fs-caption) + var(--fs-lg)) * var(--tile-badge-line, var(--lh-badge)) + 2 * var(--sp-3));
   container-type: size;
   inline-size: calc(var(--fs-lg) * 3.25);
   grid-template-columns: auto auto;
@@ -2677,11 +2861,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   column-gap: var(--sp-1);
   row-gap: 0;
   padding-block: var(--sp-3);
-  line-height: var(--tile-badge-line, 0.95);
+  line-height: var(--tile-badge-line, var(--lh-badge));
 }
 .tile-badge--stretch > * { line-height: inherit; }
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
-@container (min-height: 5.5rem) {
+@container (min-height: 3.5rem) { /* just under the three lines' own height, the most the badge grows to */
   .tile-badge--stretch > * { grid-column: 1 / -1; }
 }
 
@@ -2726,17 +2910,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   min-height: var(--header-h);
 }
 
-/* ---- top bar: back + screen title ---- */
-.topbar .t-h1 {
-  text-transform: uppercase;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-block: 0.15em; /* Thai marks survive the clip — see card.css, the head rule */
-  margin-block: -0.15em;
-}
 .topbar__actions { margin-left: auto; display: flex; gap: var(--sp-2); }
 /* at most TWO trailing controls (Lh 2026-09-22): the title must keep its line; a third and
    beyond is not drawn — more moves belong in a Menu behind one button, or on the base */
@@ -2761,7 +2934,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* fixed, so it covers the top of the screen it sits in — reserve its height
    there, from the same header-h token. The breathing under it is published:
    a .step cancels it to touch the bar. */
-.screen:has(> .appbar) { --header-gap: var(--sp-2); padding-top: calc(var(--header-h) + var(--header-gap)); }
 .appbar__brand { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
 .appbar__text { display: grid; min-width: 0; flex: 1; } /* pushes trailing button to the right edge */
 /* the mark + the words as ONE button (AppBar brandButton — the member's name opens their menu, Lh 2026-09-23): the same row, a tap target */
@@ -2771,7 +2943,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   margin: 0; text-align: start;
   border-radius: var(--appbar-who-radius, var(--r-chip));
 }
-.appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
+.appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-caption); } /* clipped lines: room for Thai marks */
 .appbar__title { font: var(--type-label); }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
 /* the bar's trailing controls (one or two: a labelled switch chip, a wallet button — home,
@@ -2786,13 +2958,22 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border: var(--border-w) solid var(--icon-btn-border, var(--outline)); /* see .btn — same reason */
   background: var(--icon-btn-bg, var(--action-bg));
   color: var(--icon-btn-ink, var(--action-ink));
+  box-shadow: var(--icon-btn-shadow, none);
   display: grid;
   place-items: center;
   font-size: var(--fs-lg);
-  line-height: 1;
+  line-height: var(--lh-solid);
 }
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
+/* the bigger round sizes (`IconBtn size`): lg is the hero control's size (--tap-lg), xl the biggest (--tap-xl), both on --tap-base like every size.
+   What stands inside is a share of the circle (`--_ib`, its side), so it grows with it: the ICON is --icon-btn-icon of the side (7/12, the share of the default 48px
+   button's 28px icon), and a WORD (a string child) keeps to --icon-btn-word-max of the side (0.45: a word of four letters stays inside) — it still
+   grows with the member's text size, to that ceiling and no further. The default and the sm button keep their icon tokens and their word as before. */
+.icon-btn--lg { --_ib: var(--icon-btn-lg-size, var(--tap-lg)); width: var(--_ib); height: var(--_ib); }
+.icon-btn--xl { --_ib: var(--icon-btn-xl-size, var(--tap-xl)); width: var(--_ib); height: var(--_ib); }
+:is(.icon-btn--lg, .icon-btn--xl) { font-size: min(var(--fs-lg), calc(var(--_ib) * var(--icon-btn-word-max, 0.45))); }
+:is(.icon-btn--lg, .icon-btn--xl) > .icon { --icon-size: calc(var(--_ib) * var(--icon-btn-icon, 7 / 12)); --icon-sm-size: var(--icon-size); --icon-lg-size: var(--icon-size); } /* the Icon's own knobs */
 /* ---- icon button group: up to four icon-only commands in ONE frame (Lh 2026-09-29) ----
    <div class="icon-btn-group" role="group"><button class="icon-btn" aria-label="…">…</button>…</div>
    One pill as tall as a button, the buttons share its width, a hairline between them; in a foot it takes the row. */
@@ -2850,15 +3031,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   min-height: var(--btn-h);
   text-decoration: none; /* .btn works as <a> too */
 }
-.btn--primary { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
+/* primary: a Btn and a round IconBtn fill alike, from the same tokens (the palette's primary — orchard's yellow — retunes both) */
+:is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
 /* quiet keeps a faint outline so it still reads as a button on colored palettes;
    it is ink on whatever it sits on — inherit, or on the dark slot (card--3) it
    would take the light-card action ink and vanish */
-.btn--quiet   { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
+.btn--quiet   { background: transparent; color: inherit; border-color: var(--btn-quiet-border, color-mix(in srgb, currentColor 35%, transparent)); }
 .btn--block   { width: 100%; }
 .btn--form    { justify-self: center; align-self: center; margin-inline: auto; padding-inline: var(--btn-form-pad-x, calc(var(--sp-base) * 14.5)); /* 58px: "ส่งรหัส OTP" at 213px, 20% longer than at 40px sides (Lh 2026-09-25) */ } /* a form's button: its words + wide sides, centred in a grid (a step) or a block (Lh 2026-09-25) */
 /* xl: the one giant call to action in a tinted card ("Taxi!") */
-.btn--xl      { min-height: var(--btn-xl-h); font: 800 var(--fs-3xl)/1 var(--font-display); letter-spacing: var(--track-h1); border-radius: var(--r-card); padding-inline: var(--sp-8); }
+.btn--xl      { min-height: var(--btn-xl-h); font: var(--fw-heavy) var(--fs-3xl) / var(--lh-solid) var(--font-display); letter-spacing: var(--track-h1); border-radius: var(--r-card); padding-inline: var(--sp-8); }
 /* disabled keeps the slot — a control that vanishes moves everything else,
    and a pager whose "previous" disappeared on page one would shift the bar
    under the thumb on every page */
@@ -2883,9 +3065,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding: var(--chip-pad-y, var(--sp-2)) var(--chip-pad-x, var(--sp-3));
   font: var(--type-label);
   font-size: var(--chip-font-size, var(--fs-sm));
-  min-height: var(--chip-h);
+  min-height: var(--chip-min-h, var(--chip-h));
   text-decoration: none;
-  justify-self: start; /* as a grid child it hugs its text, never stretches */
+  justify-content: var(--chip-justify, normal);
+  justify-self: var(--chip-self, start); /* as a grid child it hugs its text, never stretches */
 }
 .dot { width: var(--dot); height: var(--dot); flex: none; border-radius: 50%; background: var(--dot-a); translate: 0 var(--dot-drop, 0.09em); } /* signal dot: chips, legends.
    The drop: a line box is centred on its ascender room (Thai marks), the letters beside the dot sit lower — the dot rides down to the
@@ -2902,8 +3085,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (docs/reference.md 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); } /* the chip's own fill's muted words: a muted chip on the dark card is still a light chip */
 
-.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
-.chip-row.bleed { flex-wrap: nowrap; } /* actions.css loads after card.css — the strip stays one line */
+.chip-row { display: flex; gap: var(--sp-2); }
+.chip-row:not(.bleed) { flex-wrap: wrap; } /* a strip (.bleed, card.css) stays one line */
 .chip-row.bleed > .chip { flex: none; white-space: nowrap; } /* a chip of the strip keeps its words on one line at its own width: the strip scrolls, a chip never shrinks to fit it */
 
 /* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
@@ -2932,10 +3115,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* muted: the value is still the default (docs/reference.md 13) */
 .dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--action-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dropdown__btn > .icon { transition: rotate var(--motion-quick) ease; }
-.dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
-.dropdown:has(.menu.\:popover-open) .dropdown__btn > .icon { rotate: 180deg; } /* the polyfill's open (layover.css) */
-.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */
+.dropdown__btn > .icon { --icon-motion: rotate var(--motion-quick) var(--ease); }
+.dropdown:has(.menu:popover-open) .dropdown__btn > .icon { --icon-turn: 180deg; }
+.dropdown:has(.menu.\:popover-open) .dropdown__btn > .icon { --icon-turn: 180deg; } /* the polyfill's open (layover.css) */
 .filter-row { display: flex; gap: var(--sp-2); }
 .filter-row > .dropdown { flex: 1; min-width: 0; }
 
@@ -3081,7 +3263,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   cursor: default;
 }
 .action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
-.action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
+.action-note__words > .icon { --icon-display: inline-block; --icon-align: -0.2em; --icon-size: 1.25em; --icon-margin: 0 0.15em; --icon-ink: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
 
 /* PRESS (Lh 2026-09-25; every tappable thing, 2026-09-27): every CONTROL answers a tap, INFORMATION never does (no pointer, no
    press). Two answers, by size: GIVE — a control the size of a finger shrinks under it (--press-scale) and springs back; DIM —
@@ -3097,34 +3279,27 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove, .map-pick) {
   cursor: pointer;
   touch-action: manipulation;
-  transition: scale var(--motion-press) ease-out;
+  transition: scale var(--motion-press) var(--ease-out);
 }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
-  transition: opacity var(--motion-press) ease-out;
+  transition: opacity var(--motion-press) var(--ease-out);
 }
 /* a CHOICE's fill fades in as it is picked (a plain button's colour never changes on a tap, so it does not fade) */
 :where(.chip--pick, button.chip, .tile--pick, button.tile, .day, .segment__item, .calendar__day, .float-bar__item, .picker__item, .check,
   .icon-btn[role="tab"], .avatar-pick__item > .avatar, .map-pick > .map-pick__mark, .map-pick > .map-pick__name) {
   transition-property: scale, background-color, color, border-color, opacity;
   transition-duration: var(--motion-press);
-  transition-timing-function: ease-out;
+  transition-timing-function: var(--ease-out);
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove, .map-pick):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
-.sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
-/* a pile of notes pressed whole (Lh 2026-10-11): the button lies invisible UNDER the notes, so it is the notes that answer — DIM, as a card does (the group dims as one, the
-   notes do not show through one another); the ring is the button's own, round the whole pile */
-.sticky-pile__press { cursor: pointer; touch-action: manipulation; }
-.sticky-pile__notes:has(> .sticky-pile__press) { transition: opacity var(--motion-press) ease-out; }
-.sticky-pile__notes:has(> .sticky-pile__press:active) { opacity: var(--press-dim); }
-.sticky-pile__press:focus-visible { outline: var(--focus); outline-offset: 0; }
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
-:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) var(--ease-out); }
 :where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))):active { filter: brightness(var(--press-shade)); }
 /* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label, a card that is a label round its radio) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
@@ -3144,6 +3319,90 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */
 
+/* ==== the chip a choice draws: picked (choice.css drives it with its input), and --sign (#62: a block is written in its own file) ==== */
+.chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
+.chip--pick:has(:checked) { background: var(--accent); --dark: var(--accent-dark); color: var(--card-ink); border-color: transparent; }
+/* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
+.chip--sign { padding-right: var(--sp-2); }
+.chip--sign::after {
+  content: "";
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  flex: none;
+  background: currentColor;
+  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+}
+.chip--sign:has(:checked)::after { rotate: 45deg; }
+@media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
+
+/* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
+/* a head's ChipRow takes a line of its own under the title: at most two lines of chips, a chip's words cut with an ellipsis */
+.card__head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * 1.5 + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
+.card__head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-body); }
+.card__foot > .btn { flex: 1 1 0; min-width: 0; }
+/* …unless the button says its own size: `Btn form` is as wide as its words in a foot too, centred (Lh 2026-10-10: one button filling
+   a card's foot read too big — which button a card wears is the project's choice, so the foot must not undo it) */
+.card__foot > .btn--form { flex: 0 1 auto; }
+/* the page dots under the card sit centred under it — the indicator belongs
+   with the page that changes, never in the bar (Lh, 2026-09-12) */
+.screen__centre > .pager__at { justify-self: center; }
+.panes > .pager__at { justify-self: center; }
+/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
+.screen--fill:has(> .sheet-stack--flood) > :is(.appbar, .topbar):first-child {
+  position: absolute;
+  inset: var(--safe-top) 0 auto;
+  max-width: none;
+  margin: 0;
+  z-index: var(--z-flat); /* under every sheet (--level 1-5); the base clears it by margin */
+}
+.screen--fill:has(> .sheet-stack--flood > .stack-card.is-open, > .sheet-stack--flood > :not(.stack-card) > .stack-card.is-open) > :is(.appbar, .topbar):first-child {
+  visibility: hidden;
+  transition: visibility 0s var(--ease-linear) var(--motion-sheet); /* gone once the sheet has covered it; back at once on a fold (the rule above has no delay) */
+}
+/* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
+/* the step waiting for its answer: its buttons take no taps (the app guards its own handler too) */
+.sheet-step--busy .btn { pointer-events: none; opacity: var(--fade-half); }
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+/* ============================================================
+   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));
+}
+/* …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)); }
+/* ---- where it sits in what forms.css draws (docs/reference.md rule 15) ---- */
+.field--action > .icon-btn { margin-left: auto; }
+/* ---- where it sits in what sticky.css draws (docs/reference.md rule 15) ---- */
+.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; }
+/* ---- where it sits in what layover.css draws (docs/reference.md rule 15) ---- */
+.modal__drawer > .btn-row { justify-self: stretch; margin-top: var(--modal-drawer-answers-gap, var(--sp-5)); white-space: nowrap; }
+
 /* ---- css/numbers.css — ring, track, band, dot grid, picker, badge, bars ---- */
 /* ============================================================
    cardds/numbers.css — big numbers inside cards:
@@ -3175,13 +3434,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: 50%;
   background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--ink-tint) 0);
   /* masks only read alpha: currentColor = "opaque" without naming a color */
-  mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
-  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - var(--px)), currentColor calc(100% - var(--_w)));
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - var(--px)), currentColor calc(100% - var(--_w)));
 }
 .ring__value { font: var(--ring-value-font, var(--type-stat)); letter-spacing: var(--track-display); }
 .ring__label { font: var(--ring-label-font, var(--type-caption)); color: var(--ring-label-ink, var(--card-muted)); }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
-.ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
+.ring--sm .ring__value { font: var(--fw-heavy) var(--fs-2xl) / var(--lh-solid) var(--font-display); }
 .ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
 .ring--xs .ring__value { font: var(--type-caption); }
 
@@ -3222,44 +3481,31 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
-.track__step > .icon,
-.track__step > .track__dot {
-  width: var(--_step);
-  height: var(--_step);
+.track__step > .icon { --icon-size: var(--_step); --icon-pad: calc(var(--_step) * 7 / 32); --icon-radius: 50%; --icon-bg: var(--ink-rail); --icon-ink: var(--card-ink); }
+.track__step > .track__dot { /* a number in the round (TrackStep num) */
   flex: none;
-  padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
-  background: var(--ink-rail);
+  background: var(--ink-tint); /* a number is words: on the 30% rail it fell under 4.5:1 on a mid-dark track; the 12% tint is what every tone holds its ink on */
   color: var(--card-ink);
-}
-.track__step > .track__dot { background: var(--ink-tint); } /* a number is words: on the 30% rail it fell under 4.5:1 on a mid-dark track; the 12% tint is what every tone holds its ink on */
-.track__step > .track__dot { /* a number in the round (TrackStep num) */
   display: grid; place-items: center; box-sizing: border-box;
-  font: var(--track-dot-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
+  font: var(--track-dot-font, var(--type-caption)); line-height: var(--lh-solid); font-variant-numeric: tabular-nums;
   width: var(--track-dot-size, 1.877em); height: var(--track-dot-size, 1.877em); /* em, not rem (Lh 2026-10-03, as the SheetSteps' number and the StackSheet's count): the round is cut from ITS OWN
      number's size — 1.877em of a 17px caption = the 32px of an icon's round; at a larger text it grows with its number, and the pill with it */
   padding: 0 0 var(--track-dot-lift, 0.1em); /* the room UNDER the number lifts it onto the round's middle: a digit has no descender */
 }
-.track__step.is-done > .icon,
+.track__step.is-done > .icon { --icon-bg: var(--accent); --icon-ink: var(--on-accent); }
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
 /* ---- band: data card — 2-line label · giant number · footnote ----
    <article class="card card--band"><span class="band__label">Hours<br>banked</span><span class="band__num">18</span><span class="band__foot">this week</span></article> */
-.card--band {
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "label num" "foot num";
-  align-items: end;
-  gap: var(--sp-2) var(--sp-4);
-  min-height: var(--card-band-min-h, var(--tile-h));
-}
-.band__label { grid-area: label; align-self: start; font: var(--band-label-font, var(--type-label)); font-size: var(--band-label-font-size, var(--fs-body)); line-height: 1.2; }
+.band__label { grid-area: label; align-self: start; font: var(--band-label-font, var(--type-label)); font-size: var(--band-label-font-size, var(--fs-body)); line-height: var(--lh-label); }
 .band__num {
   grid-area: num;
-  font: 800 var(--fs-giant) / 0.9 var(--font-display);
+  font: var(--fw-heavy) var(--fs-giant) / var(--lh-band) var(--font-display);
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
 }
-.band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
+.band__num small { font-size: 0.5em; font-weight: var(--fw-bold); margin-right: 0.1em; } /* unit or % */
 .band__foot { grid-area: foot; font: var(--band-foot-font, var(--type-caption)); color: var(--band-foot-ink, var(--card-muted)); }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
@@ -3269,8 +3515,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: var(--band-stack-radius, var(--r-card));
   overflow: hidden;
 }
-.band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
-.band-stack > .card--band + .card--band { border-top: var(--border-w) solid var(--hairline); }
 
 /* ---- dotgrid: progress over time as dots — --total, --done, --cols ----
    one element, no children:
@@ -3304,7 +3548,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   );
 }
 /* no round(): show the grid without the done fill rather than a broken shape */
-@supports not (width: round(up, 1px, 1px)) {
+@supports not (width: round(up, 0.0625rem, 0.0625rem)) {
   .dotgrid::before { display: none; }
 }
 /* ---- picker: horizontal snap picker, centre value big ----
@@ -3349,7 +3593,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
-  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); }
+  .picker__item { animation: picker-focus var(--ease-linear) both; animation-timeline: view(x); }
   @keyframes picker-focus {
     0%, 100% { color: var(--_rest); }
     45%, 55% { color: var(--card-ink); }
@@ -3375,7 +3619,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- bars: three or four bars with a count on top — the glance chart ----
    <div class="bars"><div class="bar" style="--v: 16"><span>+16</span></div>… --max on the parent */
-.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--bars-gap, var(--sp-2)); height: calc(var(--_h) + var(--sp-8)); }
+.bars { --max: 20; --_h: calc(var(--tap-base) * 5 / 3); display: flex; align-items: end; gap: var(--bars-gap, var(--sp-2)); height: calc(var(--_h) + var(--sp-8)); }
 .bar {
   flex: 1;
   min-width: 0;
@@ -3385,7 +3629,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   gap: var(--bar-gap, var(--sp-1));
   height: 100%;
   font: var(--bar-font, var(--type-caption));
-  font-weight: 700;
+  font-weight: var(--fw-bold);
 }
 .bar::after {
   content: "";
@@ -3401,8 +3645,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    <span class="spinner" role="status"><svg class="icon">…loader-circle…</svg>Loading…</span>
    The ring turns; words beside it are optional and take the caption's look. Still when motion is reduced. */
 .spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); vertical-align: middle; font: var(--type-caption); color: var(--spinner-ink, currentColor); }
-.spinner > .icon { flex: none; }
-@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
+@media (prefers-reduced-motion: no-preference) { .spinner > .icon { --icon-spin: turn var(--motion-spin) var(--ease-linear) infinite; } } /* `turn`: tokens.css */
 
 /* ---- progress: one straight line, the done share solid, the rest faint (Lh 2026-09-22) — a voice note's
    timeline, a download, a step count as a line. <div class="progress" role="progressbar" style="--progress-at: 0.4"></div>
@@ -3420,6 +3663,27 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background-repeat: no-repeat;
 }
 
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+/* 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: var(--z-over);
+  inset: calc(var(--safe-top) + var(--track-top-lead, var(--sp-4))) var(--screen-pad) auto;
+  margin: 0;
+}
+/* ---- where it sits in what media.css draws (docs/reference.md rule 15) ---- */
+.postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
+
 /* ---- css/people.css — avatar, avatar stack, chooser row ---- */
 /* ============================================================
    cardds/people.css — avatars: single, stacked, chooser row.
@@ -3444,12 +3708,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
-  letter-spacing: 0.02em;
+  letter-spacing: var(--track-loose);
   position: relative;
   text-decoration: none; /* .avatar works as <a> too */
 }
 .avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
-.avatar > .icon { width: 50%; height: 50%; }
+.avatar > .icon { --icon-size: 50%; }
 .avatar--sm { --_size: var(--avatar-sm); }
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
@@ -3465,7 +3729,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   inset: calc(-0.55 * var(--_size));
   border-radius: 50%;
   background: repeating-radial-gradient(circle, transparent 0 calc(var(--_size) * 0.5), currentColor calc(var(--_size) * 0.5) calc(var(--_size) * 0.5 + var(--border-w)), transparent calc(var(--_size) * 0.5 + var(--border-w)) calc(var(--_size) * 0.68));
-  opacity: 0.25;
+  opacity: var(--fade-faint);
   pointer-events: none;
 }
 
@@ -3474,11 +3738,6 @@ 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)); }
-/* a stamp in the stack is the stamp's small size (--stamp-sm-size: one rule in 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 { flex: none; 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; }
 
@@ -3558,7 +3817,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --dark: var(--action-dark); /* the paper's side: its knob at rest is the paper's muted ink, on the accent the accent's */
   color: var(--card-ink);
   position: relative;
-  transition: background-color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
+  transition: background-color var(--motion-press) var(--ease-out), border-color var(--motion-press) var(--ease-out);
 }
 .toggle::after {
   content: "";
@@ -3569,7 +3828,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   height: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
   border-radius: 50%;
   background: var(--card-muted); /* a glyph: a shade of its side, never an opacity (0.45 of the ink was 2.4:1 on the paper) */
-  transition: translate var(--motion-quick) ease;
+  transition: translate var(--motion-quick) var(--ease);
 }
 .toggle:checked { background: var(--accent); border-color: transparent; }
 .toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); }
@@ -3581,34 +3840,18 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    <div class="chip-row"><label class="chip chip--pick chip--sign"><input type="checkbox">Nature</label>…</div> */
 .chip-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--tap-base) * 11 / 6), 100%), 1fr));
   gap: var(--chip-grid-gap, var(--sp-2));
 }
 /* .chip hugs its text as a loose grid child (justify-self: start); inside a
    chip grid the whole point is equal, full-width pick targets, so stretch.
    Matters most in scripts without word spaces (Thai): min-content is the
    whole string, tracks get wide, and hugging chips leave a ragged grid. */
-.chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); }
-.chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
+.chip-grid > .chip { --chip-self: stretch; --chip-justify: center; --chip-min-h: var(--btn-h); --chip-pad-x: var(--sp-2); }
 /* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
    a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css), a place on a map (sheet.css), a card that is a label round a radio
    (a pickable row card: the app gives the picked one its `tone`) — the native input lies over its whole box, unseen */
 :is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch, .map-pick) > input, label.card > input[type="radio"] { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
-:is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); --dark: var(--accent-dark); color: var(--card-ink); border-color: transparent; }
-/* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
-.chip--sign { padding-right: var(--sp-2); }
-.chip--sign::after {
-  content: "";
-  width: var(--icon-xs);
-  height: var(--icon-xs);
-  flex: none;
-  background: currentColor;
-  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-}
-.chip--sign:has(:checked)::after { rotate: 45deg; }
-@media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
-
 /* ---- day strip: a week, one day selected, today a light tone ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */
 .day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--day-strip-gap, var(--sp-1)); }
@@ -3631,7 +3874,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   color: var(--day-rest-ink, var(--card-muted)); /* an unpicked day at rest: the muted words of the ground it stands on (an opacity faded it under AA) */
 }
 .day__name { font: var(--day-name-font, var(--type-caption)); }
-.day__num { font: 700 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+.day__num { font: var(--fw-bold) var(--fs-lg) / var(--lh-tight) var(--font-display); font-variant-numeric: tabular-nums; }
 /* today: a light tone, no louder than a rest; the selected pill below wins when it is both (it comes after and weighs more) */
 .day--today { background: var(--day-today-bg, var(--ink-tint)); color: var(--day-today-ink, var(--card-ink)); }
 .day[aria-selected="true"] { background: var(--day-selected-bg, var(--accent)); color: var(--day-selected-ink, var(--on-accent)); }
@@ -3650,7 +3893,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: grid;
   place-items: center;
   border-radius: 50%;
-  font: 500 var(--fs-title)/1 var(--font-ui);
+  font: var(--fw-medium) var(--fs-title) / var(--lh-solid) var(--font-ui);
   font-variant-numeric: tabular-nums;
   grid-column-start: var(--start, auto); /* --start on the 1st: weekday column 1–7 */
 }
@@ -3658,8 +3901,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    strong mark adds a ring of the accent. A stronger fill sat at the middle, where neither the ink nor --on-accent holds 4.5:1 */
 .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--accent) 12%, transparent)); }
 .calendar__day--mark2 { background: var(--calendar-day-mark2-bg, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--calendar-day-mark2-ink, inherit); box-shadow: var(--calendar-day-mark2-shadow, inset 0 0 0 var(--border-w) var(--accent)); }
-.calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: 700; }
-.calendar__day:disabled { opacity: 0.3; }
+.calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: var(--fw-bold); }
+.calendar__day:disabled { opacity: var(--fade-dim); }
 .calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
 
 /* ---- calendar weeks: a run of week rows that scrolls week by week, `show` rows in sight; the head sticks at the top of the box
@@ -3672,12 +3915,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   overflow-y: auto;
   overscroll-behavior: contain;
   scroll-snap-type: y mandatory;
-  scroll-padding-block-start: var(--_weeks-lead, 0px);
+  scroll-padding-block-start: var(--_weeks-lead, 0rem);
   overflow-anchor: none; /* a pick rerenders the rows; the browser must not shift the scroll to keep an anchor */
   scrollbar-width: none;
 }
 .calendar--weeks::-webkit-scrollbar { display: none; }
-.calendar__weeks-head { position: sticky; inset-block-start: 0; z-index: 1; display: grid; gap: var(--calendar-head-gap, var(--sp-2)); background: var(--calendar-weeks-head-bg, var(--card-bg)); }
+.calendar__weeks-head { position: sticky; inset-block-start: 0; z-index: var(--z-over); display: grid; gap: var(--calendar-head-gap, var(--sp-2)); background: var(--calendar-weeks-head-bg, var(--card-bg)); }
 .calendar__label { font: var(--calendar-label-font, var(--type-label)); color: var(--calendar-label-ink, inherit); justify-self: start; }
 button.calendar__label { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--sp-1); }
 button.calendar__label:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
@@ -3702,14 +3945,14 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   height: var(--mood-dot-size, var(--icon-xs));
   border-radius: 50%;
   background: var(--_mood, currentColor);
-  transition: scale 0.2s ease, box-shadow 0.2s ease;
+  transition: scale var(--motion-quick) var(--ease), box-shadow var(--motion-quick) var(--ease);
 }
 .mood__opt:nth-child(1) { --_mood: var(--neg); }
 .mood__opt:nth-child(2) { --_mood: color-mix(in srgb, var(--neg) 50%, var(--dot-b)); }
 .mood__opt:nth-child(3) { --_mood: var(--dot-b); }
 .mood__opt:nth-child(4) { --_mood: color-mix(in srgb, var(--pos) 50%, var(--dot-b)); }
 .mood__opt:nth-child(5) { --_mood: var(--pos); }
-.mood__opt:has(:checked) > .mood__dot { scale: 1.7; box-shadow: 0 0 0 var(--sp-2) color-mix(in srgb, var(--_mood, currentColor) 25%, transparent); }
+.mood__opt:has(:checked) > .mood__dot { scale: var(--scale-pick); box-shadow: 0 0 0 var(--sp-2) color-mix(in srgb, var(--_mood, currentColor) 25%, transparent); }
 .mood__opt:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-0); border-radius: 50%; }
 
 /* ---- pin: big code entry, one digit per pill ----
@@ -3749,7 +3992,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   background-position: center;
   background-repeat: no-repeat;
 }
-.pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, 0.5s) steps(1); }
+.pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, var(--motion-flash)) var(--ease-step); }
 @keyframes pin-flash { 0% { -webkit-text-fill-color: currentColor; background-size: 0 0; } }
 .pin--secret .pin__cell::selection { background: transparent; } /* its digit is selected when the cell takes the cursor: nothing to show of it */
 .pin__cell:focus { outline: none; }
@@ -3760,12 +4003,12 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .pin--asleep .pin__cell:focus:placeholder-shown { background-image: none; animation: none; }
 .pin__cell:is(:focus, [data-cursor]):placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);
-  background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);
+  background-size: var(--pin-caret-w, var(--hairline-w)) var(--pin-caret-h, 1em);
   background-position: center;
   background-repeat: no-repeat;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .pin__cell:is(:focus, [data-cursor]):placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
+  .pin__cell:is(:focus, [data-cursor]):placeholder-shown { animation: pin-caret var(--motion-blink) var(--ease-step) infinite; }
   @keyframes pin-caret { 50% { background-size: 0 0; } }
 }
 
@@ -3777,13 +4020,13 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .composer { display: grid; gap: var(--composer-gap, var(--sp-3)); }
 .composer__input {
   width: 100%;
-  min-height: var(--composer-input-min-h, 11rem);
+  min-height: var(--composer-input-min-h, calc(var(--tap-base) * 11 / 3));
   resize: none;
   border: 0;
   padding: 0;
   background: transparent;
   color: inherit;
-  font: var(--composer-input-font, 700 var(--fs-2xl)/1.25 var(--font-display));
+  font: var(--composer-input-font, var(--fw-bold) var(--fs-2xl) / var(--lh-h2) var(--font-display));
   letter-spacing: var(--track-h2);
   outline: none;
 }
@@ -3870,6 +4113,14 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   flex: none;
 }
 
+/* ==== the pin's wrong code: red cells and one shake (#62: a block is written in its own file) ==== */
+.pin.pin--error .pin__cell, .pin.pin--error .pin__cell:focus { border-color: var(--pin-error-border, var(--signal-error)); color: var(--pin-error-ink, var(--signal-error)); } /* ALL the cells, edge and digit — the one the cursor waits in too (Lh 2026-09-24); the wrong digits stay in red until the member types again */
+/* a code that does not match (Pin match): the row shakes once, sideways, then the Pin empties itself for a new try (Lh 2026-09-25) */
+@media (prefers-reduced-motion: no-preference) {
+  .pin--shake { animation: pin-shake var(--pin-shake-time, var(--motion-shake)) var(--ease-in-out); }
+}
+@keyframes pin-shake { 0%, 100% { translate: 0; } 20%, 60% { translate: calc(-1 * var(--pin-shake-x, var(--sp-2))); } 40%, 80% { translate: var(--pin-shake-x, var(--sp-2)); } }
+
 /* ---- css/lists.css — row, rows, key-value, kv grid, timeline, legend, link ---- */
 /* ============================================================
    cardds/lists.css — frameless rows and pairs INSIDE a card:
@@ -3907,15 +4158,15 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .row__meta { font: var(--row-meta-font, var(--type-caption)); color: var(--row-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--row-meta-gap, var(--sp-1)); }
 .row__end { margin-left: auto; text-align: right; display: grid; gap: var(--row-end-gap, var(--sp-0)); justify-items: end; flex: none; }
 .row--lg { min-height: var(--row-lg-min-h, var(--fab)); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
-.row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
+.row--lg .row__title { font: var(--fw-bold) var(--fs-lg) / var(--lh-h1) var(--font-display); }
 /* a row that EXPANDS (Lh 2026-09-22): the row is a <details>' summary, what it shows comes out under it —
    who liked a postcard, the rest of a list. An end chevron turns when open. The app owns the list.
    <details class="row-expand"><summary class="row">…lead · body · end…</summary><div class="row-expand__more">…</div></details> */
 .row-expand { display: block; }
 .row-expand > summary { list-style: none; }
 .row-expand > summary::-webkit-details-marker { display: none; }
-.row-expand > summary > .icon:last-child { transition: rotate var(--motion-slide); }
-.row-expand[open] > summary > .icon:last-child { rotate: 180deg; }
+.row-expand > summary > .icon:last-child { --icon-motion: rotate var(--motion-slide); }
+.row-expand[open] > summary > .icon:last-child { --icon-turn: 180deg; }
 .row-expand__more { padding-top: var(--row-expand-gap, var(--sp-3)); }
 /* a finished item in a checklist (a to-do list, an onboarding "complete your introduction" list):
    the words go muted, a filled tick sits at the end, and the row is no longer a tap target —
@@ -3964,7 +4215,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--kv-grid-gap, var(--sp-4)); }
 .kv-grid > .kv-cell + .kv-cell { border-left: var(--border-w) solid var(--hairline); padding-left: var(--sp-4); }
 .kv-cell { display: grid; gap: var(--kv-cell-gap, var(--sp-0)); align-content: start; min-width: 0; }
-.kv-cell > .icon { margin-bottom: var(--sp-1); }
+.kv-cell > .icon { --icon-margin: 0 0 var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
 .kv-cell__key { font: var(--kv-cell-key-font, var(--type-caption)); color: var(--kv-cell-key-ink, var(--card-muted)); }
 
@@ -4009,7 +4260,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--card-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
-.bubble__meta > .icon { color: var(--bubble-meta-icon-ink, var(--accent-ink)); }
+.bubble__meta > .icon { --icon-ink: var(--bubble-meta-icon-ink, var(--accent-ink)); }
 
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
@@ -4080,12 +4331,14 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bullets-gap, var(--sp-3)); font: var(--bullets-font, var(--type-body)); }
 .bullets__item { display: flex; align-items: start; gap: var(--bullets-pic-gap, var(--sp-3)); min-width: 0; }
 .bullets__pic { flex: none; inline-size: var(--bullets-pic-size, 1lh); block-size: var(--bullets-pic-size, 1lh); min-height: 0; object-fit: contain; border-radius: var(--bullets-pic-radius, 0rem); display: grid; place-items: center; }
-.bullets__pic.ph { border-radius: var(--bullets-pic-radius, 0rem); }
 .bullets__text { flex: 1; min-width: 0; }
 
+/* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
+.sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
+
 /* ---- 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, 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
@@ -4125,28 +4378,28 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .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;
@@ -4163,12 +4416,10 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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 {
@@ -4179,7 +4430,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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. */
@@ -4191,8 +4442,8 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* 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> */
@@ -4234,7 +4485,6 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* 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> */
@@ -4329,12 +4579,12 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .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)); }
 
@@ -4367,11 +4617,12 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .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">
@@ -4402,17 +4653,13 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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; }
 
@@ -4438,16 +4685,16 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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 {
@@ -4455,7 +4702,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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)); }
@@ -4479,7 +4726,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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; }
@@ -4488,9 +4735,17 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .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; }
+
 /* ---- 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.
@@ -4527,42 +4782,44 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   position: relative;
   display: block;
   container-type: inline-size;
-  color: var(--stamp-ink, #141414);
-  filter: drop-shadow(var(--stamp-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the teeth; a box-shadow would draw the rectangle */
+  color: var(--stamp-ink, var(--ink-onlight));
+  filter: drop-shadow(var(--stamp-drop, var(--shadow-paper))); /* drop-shadow follows the teeth; a box-shadow would draw the rectangle */
+  rotate: var(--stamp-turn, none);
+  animation: var(--stamp-arrive, none);
 }
 .stamp__paper {
   --_pitch: calc(100cqw / 12);  /* one tooth: 12 across, 15 down — the holes land whole on every edge. Fewer and larger than a real stamp's: a small stamp's teeth must still read (Lh 2026-10-07; it was 20 × 25) */
   --_hole: 2.6cqw;
   position: absolute;
   inset: 0;
-  background-color: var(--stamp-paper-bg, #fffdf8);
+  background-color: var(--stamp-paper-bg, var(--stamp-paper));
   -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
     radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
   mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
     radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
 }
-.stamp__pic { position: absolute; inset: var(--stamp-frame, 8cqw); overflow: hidden; } /* the white frame round the picture; the ground is the tone class's */
+.stamp__pic { position: absolute; inset: var(--stamp-frame, 8cqw); overflow: hidden; } /* the paper's frame round the picture; the ground is the tone class's */
 
 /* the pictures, placed by COUNT: where, how wide, how far turned — the layout is the stamp's look, never the app's.
    A share of the picture area; the foot stays clear for the words. */
 .stamp__art { position: absolute; left: var(--_x); top: var(--_y); width: var(--_w); aspect-ratio: 1; translate: -50% -50%; rotate: var(--_r); }
 .stamp__art > * { display: block; width: 100%; height: 100%; }
 .stamp--1 .stamp__art { --_x: 50%; --_y: 40%; --_w: 72%; --_r: 0deg; }
-.stamp--2 .stamp__art:nth-child(1) { --_x: 37%; --_y: 27%; --_w: 58%; --_r: -6deg; }
-.stamp--2 .stamp__art:nth-child(2) { --_x: 63%; --_y: 56%; --_w: 54%; --_r: 8deg; }
-.stamp--3 .stamp__art:nth-child(1) { --_x: 30%; --_y: 21%; --_w: 50%; --_r: -8deg; }
-.stamp--3 .stamp__art:nth-child(2) { --_x: 71%; --_y: 31%; --_w: 46%; --_r: 7deg; }
-.stamp--3 .stamp__art:nth-child(3) { --_x: 47%; --_y: 58%; --_w: 54%; --_r: -2deg; }
-.stamp--4 .stamp__art:nth-child(1) { --_x: 29%; --_y: 19%; --_w: 44%; --_r: -8deg; }
-.stamp--4 .stamp__art:nth-child(2) { --_x: 71%; --_y: 24%; --_w: 42%; --_r: 7deg; }
-.stamp--4 .stamp__art:nth-child(3) { --_x: 31%; --_y: 57%; --_w: 42%; --_r: 5deg; }
-.stamp--4 .stamp__art:nth-child(4) { --_x: 70%; --_y: 60%; --_w: 44%; --_r: -6deg; }
+.stamp--2 .stamp__art:nth-child(1) { --_x: 37%; --_y: 27%; --_w: 58%; --_r: calc(var(--tilt-base) * -6); }
+.stamp--2 .stamp__art:nth-child(2) { --_x: 63%; --_y: 56%; --_w: 54%; --_r: calc(var(--tilt-base) * 8); }
+.stamp--3 .stamp__art:nth-child(1) { --_x: 30%; --_y: 21%; --_w: 50%; --_r: calc(var(--tilt-base) * -8); }
+.stamp--3 .stamp__art:nth-child(2) { --_x: 71%; --_y: 31%; --_w: 46%; --_r: calc(var(--tilt-base) * 7); }
+.stamp--3 .stamp__art:nth-child(3) { --_x: 47%; --_y: 58%; --_w: 54%; --_r: calc(var(--tilt-base) * -2); }
+.stamp--4 .stamp__art:nth-child(1) { --_x: 29%; --_y: 19%; --_w: 44%; --_r: calc(var(--tilt-base) * -8); }
+.stamp--4 .stamp__art:nth-child(2) { --_x: 71%; --_y: 24%; --_w: 42%; --_r: calc(var(--tilt-base) * 7); }
+.stamp--4 .stamp__art:nth-child(3) { --_x: 31%; --_y: 57%; --_w: 42%; --_r: calc(var(--tilt-base) * 5); }
+.stamp--4 .stamp__art:nth-child(4) { --_x: 70%; --_y: 60%; --_w: 44%; --_r: calc(var(--tilt-base) * -6); }
 
 /* the words on the picture's foot: a small line, then the big name — one line each (clipped sideways only: Thai tone marks stand above the line box) */
 .stamp__cap { position: absolute; inset-inline: 5cqw; bottom: 3.5cqw; display: grid; gap: 0.4cqw; }
 .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)); }
+.stamp__words { --_words: 4.8cqw; font: var(--fw-medium) var(--_words) / var(--lh-title) var(--font-ui); font-size: var(--stamp-words-font-size, var(--_words)); }
+.stamp__name { --_name: 9.5cqw; font: var(--fw-black) var(--_name) / var(--lh-display) var(--font-display); font-size: var(--stamp-name-font-size, var(--_name)); }
 /* 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. */
@@ -4576,14 +4833,13 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 
 /* --tilt: turned a little on its middle — the one stamp a start screen hands over */
 .stamp--tilt-left, .stamp--tilt-right { margin-block: var(--sp-4); } /* the turned corners and the shadow need room: a centre scrolls and would cut them */
-.stamp--tilt-left { rotate: calc(-1 * var(--stamp-tilt, 5deg)); }
-.stamp--tilt-right { rotate: var(--stamp-tilt, 5deg); }
+.stamp--tilt-left { rotate: calc(-1 * var(--stamp-tilt, calc(var(--tilt-base) * 5))); }
+.stamp--tilt-right { rotate: var(--stamp-tilt, calc(var(--tilt-base) * 5)); }
 
 /* --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: 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; }
 
 /* ---- 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>
@@ -4677,7 +4933,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   background-color: var(--stamp-cell-on-bg, var(--accent));
   color: var(--stamp-cell-on-ink, var(--on-accent));
 }
-.stamp-cell__on > .icon { width: 70%; height: 70%; }
+.stamp-cell__on > .icon { --icon-size: 70%; }
 /* --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 { padding: 0; border-radius: 0; background: none; }
@@ -4721,24 +4977,24 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
    After the rule above, at the same weight: `main` is the one place a stuck stamp reads --stamp-size. */
 .stamp-on--main > .stamp { width: var(--stamp-size, calc(var(--tap) * 2)); }
 .stamp-on--move { will-change: transform; } /* its own layer: Safari left the stamp's shadow behind as a trail along the drag when it was painted with the note (seen on the simulator, 2026-10-07) */
-.stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) ease-out; }
+.stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) var(--ease-out); }
 .stamp-on--move:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
-.stamp-on.is-held { cursor: grabbing; z-index: 1; scale: 1.06; } /* lifted off the paper while the finger holds it */
+.stamp-on.is-held { cursor: grabbing; z-index: var(--z-over); scale: var(--scale-lift); } /* lifted off the paper while the finger holds it */
 @media (prefers-reduced-motion: reduce) { .stamp-on.is-held { scale: 1; } }
 
 /* ---- the cross that takes a stamp off (`StampOn onRemove`): a small dark disc with an x on the stamp's top right corner ----
    <div class="stamp-on stamp-on--move">…<button class="stamp-on__remove" aria-label="Remove"><span class="stamp-on__remove-disc"><svg class="icon">x</svg></span></button></div>
    The button is the touch target — at least --tap-floor (44) square, invisible, centred on the corner — and the disc inside it is what is seen
    (24). It is NOT turned with the stamp: a hand turns a stamp, a button stays square to the screen, so the cross counter-turns by the stamp's own turn. Like the
-   stamp it brings its ground and its ink (a dark disc, a pale x and a pale ring: seen on any paper and over any picture). */
+   stamp it takes the theme's two inks, the onlight ink as its disc and the ondark ink as its x and ring: seen on any paper and over any picture. */
 .stamp-on__remove-disc {
   display: grid;
   place-items: center;
   width: var(--stamp-on-remove-size, var(--sp-6));
   aspect-ratio: 1;
   border-radius: 50%;
-  background-color: var(--stamp-on-remove-bg, #141414);
-  box-shadow: 0 0 0 var(--sp-0) currentColor, 0 var(--sp-0) var(--sp-1) rgb(0 0 0 / 0.35);
+  background-color: var(--stamp-on-remove-bg, var(--ink-onlight));
+  box-shadow: 0 0 0 var(--sp-0) currentColor, var(--shadow-lift);
 }
 .stamp-on__remove {
   --_hit: max(var(--tap-floor), var(--stamp-on-remove-size, var(--sp-6)));
@@ -4755,20 +5011,31 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   border: 0;
   border-radius: 50%;
   background: none;
-  color: var(--stamp-on-remove-ink, #ffffff);
+  color: var(--stamp-on-remove-ink, var(--ink-ondark));
   font: inherit;
   -webkit-tap-highlight-color: transparent;
 }
-.stamp-on__remove-disc > .icon { width: 60%; height: 60%; }
-@media (prefers-reduced-motion: no-preference) { .stamp-on__remove { animation: stamp-on-remove-in var(--motion-press) ease-out; } }
-@keyframes stamp-on-remove-in { from { opacity: 0; scale: 0.6; } }
+.stamp-on__remove-disc > .icon { --icon-size: 60%; }
+@media (prefers-reduced-motion: no-preference) { .stamp-on__remove { animation: stamp-on-remove-in var(--motion-press) var(--ease-out); } }
+@keyframes stamp-on-remove-in { from { opacity: 0; scale: var(--scale-arrive); } }
 
 /* --arrive: the stamp sticks ITSELF (StampOn `arrive`; a Stamp's `arrive` too, where it already stands) — struck onto its place (`strike`: tokens.css).
    The component reads the animation's name to tell the app it has landed. `scale` and `opacity` leave a --tilt's `rotate` alone. Knob: --stamp-on-arrive-time */
 @media (prefers-reduced-motion: no-preference) {
-  .stamp-on--arrive, .stamp--arrive { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; }
+  .stamp-on--arrive, .stamp--arrive { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) var(--ease-in) both; }
 }
 
+/* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
+.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
+/* ---- where it sits in what people.css draws (docs/reference.md rule 15) ---- */
+/* a stamp in the stack is the stamp's small size (--stamp-sm-size: one rule in 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 { flex: none; margin-inline: 0; }
+.avatar-stack > .stamp + .stamp { margin-left: calc(-1 * var(--sp-2)); }
+/* ---- where it sits in what post.css draws (docs/reference.md rule 15) ---- */
+.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 */
+
 /* ---- css/post.css — the post: postmark, a postcard read (letter), written (desk), kept (box) ---- */
 /* cardds — the post: a postcard read (post-letter), written (post-desk) and kept (post-box), the postmark, the card stock.
    Not the `Postcard` of media.css (a member's cover card that flips) — nothing here flips, and no class is shared with it.
@@ -4791,7 +5058,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .postmark {
   --_base: calc(var(--tap) * 1.75);
   position: relative;
-  z-index: 1;
+  z-index: var(--z-over);
   flex: none;
   display: grid;
   place-content: center;
@@ -4806,7 +5073,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   color: var(--postmark-ink, color-mix(in srgb, currentColor 72%, transparent));
   font: var(--postmark-font, var(--type-label));
   text-align: center;
-  rotate: var(--postmark-tilt, -10deg);
+  rotate: var(--postmark-tilt, calc(var(--tilt-base) * -10));
 }
 .postmark::after { /* the cancel lines that run on over the stamp */
   content: "";
@@ -4831,9 +5098,8 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   display: grid;
   width: var(--post-corner-stamp-w, var(--_w));
   aspect-ratio: 4 / 5;
-  rotate: var(--post-corner-stamp-tilt, 2deg);
+  rotate: var(--post-corner-stamp-tilt, calc(var(--tilt-base) * 2));
 }
-.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.
@@ -4874,15 +5140,15 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   min-height: 0;
   overflow: clip;
   visibility: hidden;
-  rotate: calc(-1 * var(--post-letter-tilt, 2deg));
+  rotate: calc(-1 * var(--post-letter-tilt, calc(var(--tilt-base) * 2)));
 }
-.post-letter__sheet--back { rotate: var(--post-letter-tilt, 2deg); } /* turned over, the lean is the other way */
+.post-letter__sheet--back { rotate: var(--post-letter-tilt, calc(var(--tilt-base) * 2)); } /* turned over, the lean is the other way */
 .post-letter--back > .post-letter__sheet--back,
 .post-letter--picture > .post-letter__sheet--picture { visibility: visible; }
 .post-letter:not(:has(> .post-letter__journey)) { --_room: 0rem; } /* no journey line: its room goes back to the sheet */
 .post-letter__journey { grid-area: 2 / 1; margin: var(--sp-3) 0 0; text-align: center; font: var(--type-caption); color: var(--post-letter-journey-ink, var(--on-surface-muted)); }
 
-/* the picture side: the print with its white margin, the place printed under it */
+/* the picture side: the print with its margin of paper, the place printed under it */
 .post-letter__sheet--picture {
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
@@ -4901,7 +5167,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .post-letter__sheet--back { display: flex; flex-direction: column; gap: var(--post-letter-gap, var(--sp-4)); padding: var(--post-letter-pad, var(--sp-5)); }
 .post-letter__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); padding-block-end: var(--sp-4); border-block-end: var(--rule-w) solid var(--_rule); }
 .post-letter__to { display: grid; gap: var(--sp-2); min-width: 0; align-self: stretch; align-content: space-between; }
-.post-letter__kicker { font: var(--type-caption); color: var(--_muted); letter-spacing: 0.08em; }
+.post-letter__kicker { font: var(--type-caption); color: var(--_muted); letter-spacing: var(--track-caps); }
 .post-letter__lines { display: grid; gap: var(--sp-1); }
 .post-letter__line { display: block; padding-block: var(--sp-1); border-block-end: var(--border-w) solid var(--_rule); font: var(--type-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .post-letter__line--name { font: var(--type-title); }
@@ -4914,7 +5180,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   gap: var(--sp-3);
   font: var(--post-letter-hand-font, var(--type-h2));
   font-size: var(--post-letter-hand-font-size, var(--fs-lg));
-  line-height: var(--post-letter-hand-leading, 1.6);
+  line-height: var(--post-letter-hand-leading, var(--lh-hand));
 }
 .post-letter__message > p { margin: 0; }
 .post-letter__sign { align-self: flex-end; }
@@ -4926,7 +5192,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   inset-block-start: calc(var(--_peek) / 2);
   inset-inline-start: var(--sp-2);
   translate: 0 -50%;
-  z-index: 2;
+  z-index: var(--z-over-2);
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
@@ -4987,8 +5253,8 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   background: transparent;
   color: inherit;
   font: var(--post-desk-hand-font, var(--type-h2));
-  line-height: calc(var(--fs-body) * var(--post-desk-leading, 1.7));
-  --_line: calc(var(--fs-body) * var(--post-desk-leading, 1.7));
+  line-height: calc(var(--fs-body) * var(--post-desk-leading, var(--lh-ruled)));
+  --_line: calc(var(--fs-body) * var(--post-desk-leading, var(--lh-ruled)));
   /* the ruled lines: one under every line of writing */
   background-image: linear-gradient(to bottom, transparent calc(100% - var(--border-w)), var(--_rule) 0);
   background-size: 100% var(--_line);
@@ -5005,10 +5271,10 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* the stamp box: empty it is a place of dots to press; pressed, the chosen stamp lies in it */
 .post-desk__slot { border: 0; background: transparent; color: inherit; }
 @media (prefers-reduced-motion: no-preference) {
-  .post-desk__slot > .stamp { animation: post-desk-stick var(--motion-quick) ease-out both; }
-  .post-desk .postmark { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; } /* struck as a StampOn is (`strike`: tokens.css), in the same time */
+  .post-desk__slot > .stamp { --stamp-arrive: post-desk-stick var(--motion-quick) var(--ease-out) both; }
+  .post-desk .postmark { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) var(--ease-in) both; } /* struck as a StampOn is (`strike`: tokens.css), in the same time */
 }
-@keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: 14deg; opacity: 0; } }
+@keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: calc(var(--tilt-base) * 14); opacity: 0; } }
 /* the other half's showing edge brings it across: a tap-wide strip out to the screen's edge */
 .post-desk__reach { position: absolute; inset-block: 0; width: var(--tap); border: 0; background: transparent; }
 .post-desk__reach--address { inset-inline-end: calc(-1 * var(--screen-pad)); }
@@ -5038,7 +5304,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   border-block-end: var(--rule-w) solid transparent;
   background: transparent;
 }
-.post-desk__pick > .stamp { rotate: var(--post-corner-stamp-tilt, 2deg); } /* in the tray a stamp keeps its words */
+.post-desk__pick > .stamp { --stamp-turn: var(--post-corner-stamp-tilt, calc(var(--tilt-base) * 2)); } /* 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 */
@@ -5063,7 +5329,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   margin-block-end: calc(var(--_e) - var(--_h));
   display: grid;
   grid-template-rows: var(--post-box-edge, var(--_edge)) minmax(0, 1fr);
-  transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
+  transition: translate var(--motion-sheet) var(--ease), rotate var(--motion-sheet) var(--ease);
 }
 .post-box {
   --_edge: calc(var(--sp-base) * 20);
@@ -5078,8 +5344,8 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 .post-box:has(> .post-box__card.is-open:not(:last-child)) { padding-block-end: var(--_part); }
 .post-box__card:last-child { margin-block-end: 0; }
-.post-box__card:nth-child(3n + 1) { rotate: var(--post-box-lean, 0.6deg); }
-.post-box__card:nth-child(3n + 2) { rotate: calc(var(--post-box-lean, 0.6deg) * -0.8); }
+.post-box__card:nth-child(3n + 1) { rotate: var(--post-box-lean, calc(var(--tilt-base) * 0.6)); }
+.post-box__card:nth-child(3n + 2) { rotate: calc(var(--post-box-lean, calc(var(--tilt-base) * 0.6)) * -0.8); }
 .post-box__card.is-open { rotate: none; }
 .post-box__card.is-open ~ .post-box__card { translate: 0 var(--_part); }
 .post-box__edge {
@@ -5107,56 +5373,25 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .post-box__card:not(.is-open) .postmark { box-sizing: border-box; place-content: start center; padding-block-start: calc(var(--_size) * 0.18); }
 @media (prefers-reduced-motion: reduce) { .post-box__card { transition: none; } }
 
+/* ---- the desk's card leaves as a card with `leave` does (card.css LEAVE): the same two knobs, the same time ---- */
+.post-desk__card { transition: translate var(--motion-sheet) var(--ease), rotate var(--motion-sheet) var(--ease); }
+.post-desk--sent .post-desk__card { --_y: calc(var(--leave-rise, 160%) * -1); rotate: var(--leave-turn, calc(var(--tilt-base) * -5)); }
+@media (prefers-reduced-motion: reduce) { .post-desk__card { transition: none; } }
+
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
 /* ============================================================
    cardds/media.css — media & display inside cards:
-   cover card · quote · tile grid · fold · waveform
+   quote · tile grid · waveform (the cover card and the fold are card variants: card.css)
    ============================================================ */
 
-/* ---- cover: the image IS the card; text over a scrim ----
-   <article class="card card--cover"><div class="ph" role="img"></div>
-     <div class="card__head"><button class="icon-btn icon-btn--sm">♥</button></div>
-     <div><h2 class="t-h1">Art Institute</h2><p class="t-body">111 South Michigan Ave</p></div>
-     <div class="row">…meta…</div></article> */
-.card--cover {
-  --card-bg: var(--card-3-bg);
-  --dark: var(--card-3-dark);
-  --accent: var(--card-ink);
-  --accent-dark: calc(1 - var(--dark));
-  min-height: var(--_cover-min-h);
-  align-content: space-between;
-  overflow: hidden;
-  isolation: isolate;
-}
-.card--cover > img,
-.card--cover > .ph {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: -2;
-  border: 0;
-  border-radius: 0;
-  min-height: 0;
-}
-/* scrim: dark at both ends so the meta stays readable */
-.card--cover::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
-}
-
 /* ---- quote: giant mark, big text, attribution ----
    <blockquote class="quote"><p class="quote__text">It's overcast…</p><footer class="quote__by">Wednesday 15</footer></blockquote> */
 .quote { margin: 0; display: grid; gap: var(--quote-gap, var(--sp-3)); }
 .quote::before {
   content: "\201C";
-  font: 900 calc(var(--fs-h1) * 3)/0.55 var(--font-display);
+  font: var(--fw-black) calc(var(--fs-h1) * 3) / var(--lh-mark) var(--font-display);
   height: var(--sp-10);
-  opacity: 0.9;
+  opacity: var(--fade-most);
 }
 .quote__text { margin: 0; font: var(--quote-text-font, var(--type-h1)); letter-spacing: var(--track-h1); text-wrap: balance; }
 .quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
@@ -5170,7 +5405,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr));
   gap: var(--tile-grid-gap, var(--sp-3));
 }
-.tile-grid--3 { --tile-min: 6rem; } /* three across on a phone (attachments, upload kinds) */
+.tile-grid--3 { --tile-min: calc(var(--tap-base) * 2); } /* three across on a phone (attachments, upload kinds) */
 .tile {
   display: grid;
   align-content: space-between;
@@ -5217,42 +5452,18 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); --dark: var(--card-5-dark); color: var(--tile-5-ink, var(--card-ink)); border-color: transparent; }
 .tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--tile-3-ink, var(--card-ink)); border-color: transparent; }
 
-/* ---- fold: a sticky-note corner on any card (decorative) ----
-   No border. The card's outline follows its border box, so it ran straight
-   across the squared bottom-right corner and cut through the fold's diagonal —
-   the corner read as a notch with a line through it rather than a lifted flap.
-   The COLOUR goes transparent rather than the border going to 0, so the box
-   keeps its geometry and a fold card still measures the same as the cards
-   beside it. */
-.card--fold {
-  border-color: transparent;
-  border-bottom-right-radius: 0;
-  background-image: linear-gradient(to top left,
-    var(--card-bg) 0 50%,   /* the card's own background, not --surface (the page's) — a mismatch here drew a seam at the flap's edge */
-    color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  background-size: var(--sp-8) var(--sp-8);
-  background-origin: border-box;  /* the flap sits on the true corner, not inside the (transparent) border */
-  /* the corner is CUT: the triangle under the flap shows what is behind the card. Painted in the card's own colour it
-     read as the square corner of a second card underneath (Lh 2026-09-23). The polygon reaches 3rem past the other
-     edges so a coloured palette's shadow is not clipped there. */
-  clip-path: polygon(-3rem -3rem, calc(100% + 3rem) -3rem, calc(100% + 3rem) calc(100% - var(--sp-8) - 3rem),
-                     calc(100% - var(--sp-8) - 3rem) calc(100% + 3rem), -3rem calc(100% + 3rem));
-}
-
 /* ---- wave: audio waveform stand-in for voice rows ----
    <span class="wave"></span> — sits in a .row__body, fills the width */
 .wave {
   /* only WHOLE bars show (Lh 2026-09-23 — a clipped last bar read thinner): the columns are as many whole bar-widths as fit
      (auto-fill), spread edge to edge; bars that do not fit go to rows of no height, clipped away */
   display: grid;
-  grid-template-columns: repeat(auto-fit, var(--wave-bar-width, 0.125rem)); /* auto-FIT: columns no bar fills collapse, so a wide row still spreads its bars edge to edge */
+  grid-template-columns: repeat(auto-fit, var(--wave-bar-width, var(--hairline-w))); /* auto-FIT: columns no bar fills collapse, so a wide row still spreads its bars edge to edge */
   grid-template-rows: 100%;
   grid-auto-rows: 0;
   justify-content: space-between;
   align-items: center;
-  column-gap: var(--wave-gap, 0.125rem);
+  column-gap: var(--wave-gap, var(--hairline-w));
   height: var(--wave-h, var(--icon));
   width: 100%;
   overflow: hidden;
@@ -5278,7 +5489,6 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 .mosaic > :first-child { grid-row: span 2; }
 .mosaic > * { min-height: 0; border-radius: 0; } /* opacity/border-width here were no-ops: .ph restates its own below, and nothing else in a mosaic carries either by default */
-.mosaic > .ph { opacity: var(--off); border-width: var(--border-w); }
 .mosaic > img { width: 100%; height: 100%; object-fit: cover; }
 
 /* ---- postcard: a member's introduction in the shape of a cover card — the photo fills it,
@@ -5336,8 +5546,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .postcard__turn:focus-visible { outline-offset: calc(-1 * var(--sp-1)); } /* the ring inside the card's edge */
 /* the front: the photo (or the wireframe box) fills it; the band reads on a scrim */
 .postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--postcard-front-ink, var(--card-ink)); }
-.postcard__front .postcard__turn > img,
-.postcard__front .postcard__turn > .ph {
+.postcard__front .postcard__turn > img {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -5351,7 +5560,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   content: "";
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: var(--z-over);
   pointer-events: none;
   background: linear-gradient(to top, var(--scrim), transparent 45%);
 }
@@ -5367,7 +5576,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
    Taps between its words fall through to the turn; its buttons take their own. */
 .postcard__band {
   position: relative;
-  z-index: 2;
+  z-index: var(--z-over-2);
   display: flex;
   align-items: end;
   gap: var(--postcard-band-gap, var(--sp-3));
@@ -5377,12 +5586,13 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .postcard__band > * { pointer-events: auto; }
 .postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
 .postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-ink)); --accent-dark: calc(1 - var(--dark)); }
-.postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
 /* a voice note on the back: no words to read — its timeline (a Progress), its length and the control to hear it
    under them, at the middle over the turn, on the face's inset; the app plays and keeps the time */
-.postcard__voice { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
+.postcard__voice { position: absolute; inset: 0; z-index: var(--z-over-2); display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
 .postcard__voice > * { pointer-events: auto; }
-.postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
+
+/* ==== the tile a choice draws, picked (choice.css drives it with its input) (#62: a block is written in its own file) ==== */
+.tile--pick:has(:checked) { background: var(--accent); --dark: var(--accent-dark); color: var(--card-ink); border-color: transparent; }
 
 /* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout ---- */
 /* ============================================================
@@ -5418,14 +5628,14 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
    sets open={false}).
    Reduced motion: the finished state, no beats; closing fires at once. */
 .modal {
-  --drawer-h: 14rem;
+  --drawer-h: calc(var(--tap-base) * 14 / 3);
   position: absolute;             /* at the stage's centre, and kept there as it grows: its middle is pinned at 50% and */
   top: 50%;                       /* translate -50% of its OWN height re-centres it on every height. NOT inset 0 + margin auto + */
   inset-inline: 0;                /* align-self: center — Safari 18 ignores align-self on an absolute box in a block container, */
   margin-inline: auto;            /* so the card stretched to the whole stage (iOS 18.6, Lh 2026-09-24); nor height: fit-content */
   translate: 0 -50%;
   width: calc(100% - 2 * var(--screen-pad));
-  z-index: 2;                     /* over the dim stage's scrim (z 1) */
+  z-index: var(--z-over-2);                     /* over the dim stage's scrim (z 1) */
   max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
   padding: 0;                     /* the parts pad themselves */
   border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
@@ -5470,18 +5680,17 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 /* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .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 { color: var(--modal-drawer-caption-ink, var(--card-muted)); }
+.modal__drawer .t-caption { --t-caption-ink: var(--modal-drawer-caption-ink, var(--card-muted)); }
 .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); }
+.modal__drawer .btn--quiet { --btn-quiet-border: var(--modal-drawer-quiet-border, currentColor); }
+.modal__drawer .icon-btn { --icon-btn-bg: transparent; --icon-btn-ink: currentColor; --icon-btn-border: var(--ink-rail); }
+.modal__drawer .icon-btn--invert { --icon-btn-size: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {
-  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
-  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
+  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) var(--ease) both; }
+  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) var(--ease) both; }
   @keyframes modal-drop {
     0%        { translate: 0 calc(-50% - 100cqh); }   /* above the stage */
     50%, 100% { translate: 0 -50%; }       /* 1. at the centre — and it stays: beat 2 is the drawer's */
@@ -5496,8 +5705,8 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .btn-trio__dots {
   width: var(--btn-trio-dots-w, var(--sp-5));
   height: var(--btn-trio-dots-h, var(--sp-1));
-  background: radial-gradient(circle, currentColor var(--sp-0), transparent calc(var(--sp-0) + 0.5px)) 0 0 / calc(var(--sp-5) / 2) 100% repeat-x;
-  opacity: 0.4;
+  background: radial-gradient(circle, currentColor var(--sp-0), transparent calc(var(--sp-0) + var(--px) / 2)) 0 0 / calc(var(--sp-5) / 2) 100% repeat-x;
+  opacity: var(--fade-soft);
 }
 
 /* ---- popover menu: a card anchored to its button, rows of icon + label ----
@@ -5520,7 +5729,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   border-radius: var(--menu-radius, var(--r-card));
   --menu-pad: var(--sp-2);       /* published: a row's radius is concentric with the panel's */
   padding: var(--menu-pad);
-  min-width: 12rem;
+  min-width: calc(var(--tap-base) * 4);
   align-content: start;       /* rows keep their own height: WebKit stretches a popover grid's rows to the whole room under its anchor (iOS 26.5, 2026-10-08) */
   --_menu-max: min(60dvh, calc(100dvh - 2 * var(--sp-5)));
   max-height: var(--menu-max-h, var(--_menu-max)); /* a long list (twenty neighbours) scrolls inside the panel — it ran off the screen's foot, the last names out of reach (timebank, 2026-10-08) */
@@ -5554,7 +5763,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   .menu[popover] {
     position-area: block-end span-inline-end;
     margin-top: var(--sp-2);
-    min-width: max(12rem, anchor-size(width)); /* at least as wide as its trigger */
+    min-width: max(calc(var(--tap-base) * 4), anchor-size(width)); /* at least as wide as its trigger */
     position-try-fallbacks: flip-block, flip-inline;
   }
   .menu--end[popover] { position-area: block-end span-inline-start; }
@@ -5587,11 +5796,11 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .banner__summary {
   list-style: none;
   display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
-  padding-block: var(--banner-summary-pad-y, calc(var(--sp-base) * 1.5)); font: var(--banner-summary-font, var(--type-caption)); font-weight: 400;
+  padding-block: var(--banner-summary-pad-y, calc(var(--sp-base) * 1.5)); font: var(--banner-summary-font, var(--type-caption)); font-weight: var(--fw-regular);
 }
 .banner__summary::-webkit-details-marker { display: none; }
-.banner__summary .icon { transition: rotate var(--motion-quick) ease; }
-.banner[open] .banner__summary .icon { rotate: 180deg; }
+.banner__summary .icon { --icon-motion: rotate var(--motion-quick) var(--ease); }
+.banner[open] .banner__summary .icon { --icon-turn: 180deg; }
 /* the band's words never run past it: one column that cannot be wider than the band (a grid track is as wide as its longest
    word otherwise), and a word with no break in it — a link — breaks where it must (mailpool, Lh 2026-10-01) */
 .banner__body { display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
@@ -5599,7 +5808,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {
     .banner { interpolate-size: allow-keywords; }
-    .banner::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-quick) ease, content-visibility var(--motion-quick) allow-discrete; }
+    .banner::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-quick) var(--ease), content-visibility var(--motion-quick) allow-discrete; }
     .banner[open]::details-content { block-size: auto; }
   }
 }
@@ -5658,7 +5867,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* aria-current="false" is the correct way to mark the OTHER tabs, so the
    bare attribute selector lights every one of them up */
 .float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); }
-.float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
+.float-bar > .icon-btn { --icon-btn-size: var(--bar-h); --icon-btn-shadow: var(--shadow-float); }
 
 /* ---- callout: a small card with a tail — over a map, a media, a mascot ----
    <div class="callout" style="top: 30%; left: 40%"><span class="callout__title">Telok Ayer Park</span><span class="callout__sub">1.2 km</span></div> */
@@ -5667,7 +5876,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   display: grid;
   gap: var(--callout-gap, var(--sp-0));
   width: max-content;
-  max-width: 15rem;
+  max-width: calc(var(--tap-base) * 5);
   padding: var(--callout-pad-y, var(--sp-3)) var(--callout-pad-x, var(--sp-4));
   border: var(--border-w) solid var(--callout-border, var(--action-border));
   border-radius: var(--callout-radius, var(--r-card));
@@ -5700,7 +5909,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
      <p class="splash__text">…</p></div></section>
    The group's MIDDLE is on --screen-centre (40% down), the same line a centred card uses. The mark is the app's own content —
    a lottie box often carries empty room around its drawing — the app sets the knobs below, cardds does not guess it. */
-.splash { position: relative; background: var(--splash-bg, var(--surface)); transition: opacity var(--motion-sheet) ease; }
+.splash { position: relative; background: var(--splash-bg, var(--surface)); transition: opacity var(--motion-sheet) var(--ease); }
 .splash--leaving { opacity: 0; }
 .splash__group {
   position: absolute; inset-inline: var(--screen-pad); top: var(--splash-at, var(--screen-centre)); translate: 0 -50%;
@@ -5722,13 +5931,13 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   position: fixed; inset-inline: 0; top: calc(var(--sp-3) + var(--safe-top));
   max-width: var(--screen-w); margin-inline: auto; padding-inline: var(--screen-pad, var(--sp-4));
   display: grid; justify-items: center;
-  z-index: calc(var(--z-top) + 1);
+  z-index: calc(var(--z-top) + var(--z-over));
   pointer-events: none; visibility: hidden;
   translate: 0 calc(var(--_out) * (100% + var(--sp-8) + var(--safe-top)));
-  transition: translate var(--motion-sheet) ease, visibility 0s var(--motion-sheet);
+  transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--motion-sheet);
 }
 .screen--fill > .snackbar, .sheet-stage > .snackbar { position: absolute; }
-.snackbar--bottom { --_out: 1; top: auto; bottom: calc(var(--sp-3) + var(--bottom-h, 0px) + max(var(--safe-bottom), var(--kb, 0px))); }
+.snackbar--bottom { --_out: 1; top: auto; bottom: calc(var(--sp-3) + var(--bottom-h, 0rem) + max(var(--safe-bottom), var(--kb, 0rem))); }
 .snackbar--open { translate: 0; visibility: visible; transition-delay: 0s; }
 .snackbar__body {
   display: flex; align-items: center; gap: var(--snackbar-gap, var(--sp-3));
@@ -5743,12 +5952,15 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   font: inherit; text-align: start;
   pointer-events: auto;
 }
-.snackbar__body > .icon { flex: none; color: var(--snackbar-icon-ink, var(--signal-ok)); }
+.snackbar__body > .icon { --icon-ink: var(--snackbar-icon-ink, var(--signal-ok)); }
 .snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
 .snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
 .snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); color: var(--snackbar-caption-ink, inherit); } /* on the signal's soft ground the full ink: a muted shade there fell under AA */
 @media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }
 
+/* ---- where it sits in what actions.css draws (docs/reference.md rule 15) ---- */
+.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */
+
 /* ---- css/finish.css — light, shadow, edges — only under data-finish="lit" ---- */
 /* ============================================================
    cardds/finish.css — FINISH: the finish of a card's paper. A style of its own (Lh 2026-10-02: the plain
@@ -5785,28 +5997,28 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
    ============================================================ */
 [data-finish="lit"] {
   --_shade: var(--on-surface);
-  --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
-  --finish-ring: 0 0 0 1px color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
+  --finish-edge: inset 0 0.0625rem 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
+  --finish-ring: 0 0 0 0.0625rem color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
 
   /* the three shadows every component already reads — layered: one close and crisp, one far and soft */
   --shadow-card: var(--finish-edge), var(--finish-ring),
-    0 1px 2px color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
     0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
     0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--_shade) 14%, transparent);
   --shadow-float: var(--finish-edge), var(--finish-ring),
-    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 12%, transparent),
     0 0.5rem 1.25rem -0.25rem color-mix(in srgb, var(--_shade) 22%, transparent);
   --shadow-sheet: var(--finish-edge), var(--finish-ring),
-    0 -1px 2px color-mix(in srgb, var(--_shade) 6%, transparent),
+    0 -0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 6%, transparent),
     0 -0.75rem 2.5rem color-mix(in srgb, var(--_shade) 18%, transparent);
 
   /* a control: its own small lift, and the sheen that runs down its face */
   --finish-control: var(--finish-edge), var(--finish-ring),
-    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 12%, transparent),
     0 0.25rem 0.5rem -0.125rem color-mix(in srgb, var(--_shade) 12%, transparent);
-  --finish-control-down: var(--finish-ring), inset 0 1px 2px color-mix(in srgb, var(--_shade) 18%, transparent);
+  --finish-control-down: var(--finish-ring), inset 0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 18%, transparent);
   --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
-  --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
+  --finish-sunk: inset 0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 14%, transparent), 0 0.0625rem 0 rgb(255 255 255 / 0.5);
 
   --outline: color-mix(in srgb, currentColor 14%, transparent);
 }
@@ -5828,9 +6040,9 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 /* the main button throws its own colour */
 [data-finish="lit"] .btn--primary,
-[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+[data-finish="lit"] :is(.icon-btn--invert, .icon-btn--primary):not(.icon-btn-group > *) {
   box-shadow: var(--finish-edge),
-    0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 20%, transparent),
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
 }
 /* a peeked stack tab is the icon alone: no sheen and no shadow until its sheet is open (the fill fades with the sheet) */
@@ -5844,7 +6056,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 [data-finish="lit"] .icon-btn-group { box-shadow: var(--finish-control); }
 [data-finish="lit"] .toggle { box-shadow: var(--finish-sunk); }
-[data-finish="lit"] .toggle::after { box-shadow: 0 1px 2px color-mix(in srgb, var(--_shade) 35%, transparent); }
+[data-finish="lit"] .toggle::after { box-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 35%, transparent); }
 
 /* ---- sunk: what the member types into ---- */
 [data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }
@@ -5862,12 +6074,12 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 [data-finish="print"] .card {
   border: var(--border-w) solid var(--_ink);
-  box-shadow: var(--print-off, 3px) var(--print-off, 3px) 0 0 color-mix(in srgb, var(--card-ink) 28%, transparent);
+  box-shadow: var(--print-off, 0.1875rem) var(--print-off, 0.1875rem) 0 0 color-mix(in srgb, var(--card-ink) 28%, transparent);
   isolation: isolate; /* the grain's blend stays inside the card */
 }
 /* the grain: a ::after, not ::before — .card--cover's scrim is its ::before. Over everything in the card (z-index 1, the foot's own level), touches pass through it */
 [data-finish="print"] .card::after {
-  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: var(--z-over);
   opacity: var(--print-grain, 0.32); mix-blend-mode: multiply;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
@@ -5879,10 +6091,11 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 [data-finish="print"] :is(.btn, .chip) {
   border-color: var(--_ink);
-  box-shadow: 2px 2px 0 0 color-mix(in srgb, currentColor 35%, transparent);
+  box-shadow: 0.125rem 0.125rem 0 0 color-mix(in srgb, currentColor 35%, transparent);
 }
-[data-finish="print"] .btn--primary { box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
-[data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 2px 2px; }
+[data-finish="print"] .chip { border-color: var(--chip-border, var(--_ink)); } /* a holder that clears a chip's edge (a note's chips) clears it in print too */
+[data-finish="print"] .btn--primary { box-shadow: 0.125rem 0.125rem 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
+[data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 0.125rem 0.125rem; }
 [data-finish="print"] .card__thumb { border-style: dashed; }
 
 /* ============================================================
@@ -5894,29 +6107,29 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 [data-finish="sticker"] { --outline: color-mix(in srgb, currentColor 18%, transparent); }
 [data-finish="sticker"] .card {
   box-shadow:
-    0 0 0 var(--sticker-cut, 5px) #fff,
-    0 calc(var(--sticker-cut, 5px) + 4px) 0 0 color-mix(in srgb, var(--on-surface) 16%, transparent),
-    0 calc(var(--sticker-cut, 5px) + 12px) 20px -8px color-mix(in srgb, var(--on-surface) 22%, transparent);
+    0 0 0 var(--sticker-cut, 0.3125rem) #fff,
+    0 calc(var(--sticker-cut, 0.3125rem) + 0.25rem) 0 0 color-mix(in srgb, var(--on-surface) 16%, transparent),
+    0 calc(var(--sticker-cut, 0.3125rem) + 0.75rem) 1.25rem -0.5rem color-mix(in srgb, var(--on-surface) 22%, transparent);
 }
 [data-finish="sticker"] .card:not(.sheet, .modal, .card--away, .sheet-stack *, .card-list > *, .card-feed > *) { rotate: var(--sticker-tilt, 0.8deg); }
 [data-finish="sticker"] .card:not(.sheet, .modal, .card--away, .sheet-stack *, .card-list > *, .card-feed > *):nth-of-type(even) { rotate: calc(-1 * var(--sticker-tilt, 0.8deg)); }
 [data-finish="sticker"] .card-list { gap: var(--sp-5); }
 [data-finish="sticker"] .btn {
-  box-shadow: 0 3px 0 0 color-mix(in srgb, currentColor 30%, transparent);
+  box-shadow: 0 0.1875rem 0 0 color-mix(in srgb, currentColor 30%, transparent);
   border-color: color-mix(in srgb, currentColor 25%, transparent);
 }
-[data-finish="sticker"] .btn--primary { box-shadow: 0 3px 0 0 color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 55%, var(--on-surface)); }
-[data-finish="sticker"] .btn:active { box-shadow: none; translate: 0 3px; }
-[data-finish="sticker"] .chip { box-shadow: 0 0 0 3px #fff; }
+[data-finish="sticker"] .btn--primary { box-shadow: 0 0.1875rem 0 0 color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 55%, var(--on-surface)); }
+[data-finish="sticker"] .btn:active { box-shadow: none; translate: 0 0.1875rem; }
+[data-finish="sticker"] .chip { box-shadow: 0 0 0 0.1875rem #fff; }
 
 /* ============================================================
    ink — a poster / comic print: --ink-w of the surface's ink round every boundary and control, and a hard
    offset of --ink-off in the same ink. The two wireframe borders come back as that line.
    ============================================================ */
 [data-finish="ink"] { --card-border: var(--on-surface); --action-border: var(--on-surface); --outline: currentColor; }
-[data-finish="ink"] .card { border: var(--ink-w, 2.5px) solid var(--on-surface); box-shadow: var(--ink-off, 5px) var(--ink-off, 5px) 0 0 var(--on-surface); }
-[data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 2.5px) solid currentColor; box-shadow: 3px 3px 0 0 currentColor; }
-[data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 3px 3px 0 0 var(--on-surface); }
-[data-finish="ink"] .toggle { box-shadow: 2px 2px 0 0 var(--on-surface); }
-[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 2.5px); }
+[data-finish="ink"] .card { border: var(--ink-w, 0.15625rem) solid var(--on-surface); box-shadow: var(--ink-off, 0.3125rem) var(--ink-off, 0.3125rem) 0 0 var(--on-surface); }
+[data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 0.15625rem) solid currentColor; box-shadow: 0.1875rem 0.1875rem 0 0 currentColor; }
+[data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 0.1875rem 0.1875rem 0 0 var(--on-surface); }
+[data-finish="ink"] .toggle { box-shadow: 0.125rem 0.125rem 0 0 var(--on-surface); }
+[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 0.15625rem); }