@usableapp/cardds 0.7.15 → 0.7.17

package/dist/cardds.css

@@ -89,7 +89,7 @@
   --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 */
-  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
+  --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell */
   --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
   --card-pad-rest: var(--sp-5);  /* 20 a card's padding before any variant — .card publishes it as --card-pad; the sheet's peek strip is built from it where no card is in scope */
   --card-gap-rest: var(--sp-4);  /* 16 …and its gap */
@@ -134,8 +134,26 @@
 
   /* ---- motion ---- */
   --motion-sheet: 0.35s;
+  --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 */
+  --dim: 0.7; /* secondary words dimmed on a ground whose muted ink does not fit (the dark card --3, a drawer, a tile's sub line): ONE share for all */
+  --rest: 0.6;  /* an unpicked choice at rest: .day, .segment__item, .float-bar__item */
+  --faint: 0.3; /* further still: rails, far dots, unselected picker items */
+  --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 */
+  --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 */
+
+  /* ---- 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) */
+  --z-fab: 31;  /* .fab — above the bars it floats near */
+  --z-top: 40;  /* .appbar, a stage laid OVER its screen (.sheet-stage--over) — topmost, card animations never cover it */
+
+  /* ---- shared private sizes (not a knob: two components share the exact same
+     literal by design and must not drift apart) ---- */
+  --_cover-min-h: 22.5rem; /* .card--cover's min-height; --postcard-min-h falls back to it (media.css) */
 
   /* ---- typography: one scale, rem so it follows the root ---- */
   --font-ui: "PK Nonthaburi", -apple-system, system-ui, sans-serif; /* fonts.css ships it; the rest is the fallback while it loads */
@@ -250,7 +268,7 @@
 
 /* ============================================================
    REGISTERED TOKENS — the two sheet lengths are typed, so that
-   cardds.js can read them back RESOLVED: getComputedStyle returns a
+   the Sheet component can read them back RESOLVED: getComputedStyle returns a
    registered <length> in px and a <number> as a number, where an
    unregistered custom property only ever reads back as its text
    ("calc(1.25rem + …)"). Drag-to-snap needs to know where the states
@@ -262,8 +280,8 @@
    falls back to when its own declaration cannot resolve.
    ============================================================ */
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
-@property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; }
-@property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */ /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
+@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 */
+@property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */
 @property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
 @property --sheet-3q { syntax: "<number>"; inherits: true; initial-value: 0.25; }
 
@@ -427,9 +445,9 @@
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }
 
-/* ---- css/base.css — reset, surface, type levels, section ---- */
+/* ---- css/base.css — reset, surface, type levels, page ---- */
 /* ============================================================
-   cardds/base.css — reset, surface, typography levels, section
+   cardds/base.css — reset, surface, typography levels, page
    ============================================================ */
 
 *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@@ -439,7 +457,7 @@
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
 button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
-.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .dropdown__trigger, .track__step, .pager__at {
+.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .track__step, .pager__at {
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -451,9 +469,8 @@ button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn
    An app's OWN text-size setting is NOT here (Lh 2026-09-22: --text-scale, which
    multiplied the root, zoomed the UI too — retired): it is --fs-base on <html>,
    the type base, so the words grow and the things keep their size (tokens.css). */
-html { font-size: 100%; scrollbar-width: none; }
+html { font-size: 100%; }
 @media (max-width: 22.5em) { html { font-size: 93.75%; } }
-html::-webkit-scrollbar { display: none; } /* Chromium/Safari */
 
 body {
   margin: 0;
@@ -469,7 +486,30 @@ body {
 [hidden] { display: none !important; }
 
 img, svg { display: block; max-width: 100%; }
-button { font: inherit; cursor: pointer; }
+button { font: inherit; }
+button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
+
+/* zero-specificity reset for controls that draw nothing of their own (2026-09-27 review):
+   a component's own rule always wins, at any specificity, so this never fights it — it only
+   fills in for a selector that never says otherwise. Not everything below shares every
+   property: two exceptions read as they always have — .calendar__day has never set its own
+   padding (the UA button default), and .sheet-step__go has never set its own color (the UA
+   button default too) — giving either one now would be a look change, so neither is here. */
+:where(.appbar__who, .segment__item, .day, .calendar__day, .menu__item, .float-bar__item, .link,
+  .add-row, .avatar-pick__item, .picker__item, .postcard__turn, .sheet-step__go) {
+  border: 0;
+  background: transparent;
+  font: inherit;
+}
+:where(.appbar__who, .segment__item, .day, .calendar__day, .menu__item, .float-bar__item, .link,
+  .add-row, .avatar-pick__item, .picker__item, .postcard__turn) { color: inherit; }
+:where(.appbar__who, .segment__item, .day, .menu__item, .float-bar__item, .link, .add-row,
+  .avatar-pick__item, .picker__item, .postcard__turn, .sheet-step__go) { padding: 0; }
+
+/* scrollbar hidden, scroll kept: the track scrolls by touch/drag, never by a visible bar —
+   .bleed (card.css) is the one exception, its bar is designed, not hidden */
+:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
+:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
 
 /* 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; }
@@ -478,10 +518,16 @@ button { font: inherit; cursor: pointer; }
 .icon--lg { width: var(--icon-lg-size, var(--icon-lg)); height: var(--icon-lg-size, var(--icon-lg)); } /* empty states */
 
 /* mobile screen column — the standard horizontal inset, and nothing vertical.
-   Top and bottom are zero on purpose: vertical room is only ever a RESERVE for
-   something fixed parked over the screen, so each bar adds its own and a page
-   without bars needs no override. .appbar reserves the top (actions.css),
-   .action-bar (actions.css) and .float-bar (layover.css) the bottom. */
+   Top is zero on purpose: room there is only ever a RESERVE for something
+   FIXED parked over the screen — .appbar reserves it (actions.css). A bottom
+   bar is not fixed (0.7.1): it is the Screen's own last child, in flow on a
+   scrolling screen (a sticky row, actions.css) or, in a fill screen, a layer
+   over the content's foot (step.css) — nothing here reserves room for it.
+   It also reads like a native app (Lh 2026-09-25): words are not highlighted
+   by a long press or a drag, no copy / web-search callout — only what is
+   typed into, and words marked selectable (`Text selectable` → .t-select: a
+   code, an address). Knob --screen-select: `text` = the web page's old way
+   everywhere. */
 .screen {
   --screen-gap: var(--sp-5); /* published: a .step cancels it to touch the bar it follows (step.css) */
   max-width: var(--screen-w);
@@ -490,6 +536,7 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   gap: var(--screen-gap);
   align-content: start;      /* a screen taller than its content (a fixed phone) never spreads its rows — the top bar stays at the top, a row keeps its height */
+  -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none;
 }
 .screen > * { min-width: 0; } /* content never widens the column past the viewport */
 /* a screen that carries its own palette (data-palette on the element, not on <html>)
@@ -532,21 +579,18 @@ button { font: inherit; cursor: pointer; }
 
 .t-muted { color: var(--on-surface-muted); }
 .card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
-.card--3 .t-muted { color: inherit; opacity: 0.7; } /* card-muted is tuned for light cards; dim instead on the dark slot */
+/* .card--3 .t-muted (dim instead of --card-muted on the dark slot) is declared once in card.css, with the rest of that family */
 .t-caps  { text-transform: uppercase; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
-/* a screen reads like a native app (Lh 2026-09-25): words are not highlighted by a long press or a drag, no copy / web-search
-   callout — only what is typed into, and words marked selectable (`Text selectable` → .t-select: a code, an address).
-   Knob --screen-select: `text` = the web page's old way everywhere. */
-.screen { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none; }
 .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; }
 
-/* ---- base content: words straight on the base, no card around them — an
-   a heading, a paragraph, maybe a .cta-pack. Was .section until
-   2026-09-16 (Lh: the name said nothing about WHERE it lives; this one does).
+/* ---- page: words straight on the base, no card around them — a
+   heading, a paragraph, maybe a .cta-pack. Was .section until 2026-09-16
+   (Lh: the name said nothing about WHERE it lives), then .base-content
+   until 2026-09-23 (Lh: the content is a BOX; what's in it is .page).
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
 .page {
   display: grid;
@@ -580,14 +624,15 @@ button { font: inherit; cursor: pointer; }
   color: var(--empty-state-ink, var(--on-surface)); /* full ink, icon and words alike: muted read as "disabled" at the middle of an empty screen (Lh 2026-09-16) — muted is for meta, not a sentence */
 }
 .empty-state__action { margin-top: var(--sp-2); }
-/* inside a card (a section's "nothing yet"): the card's ink */
+/* inside a card (a card's own "nothing yet"): the card's ink */
 .card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
 .card--3 .empty-state { color: inherit; }
 
 /* ---- css/card.css — card boundary + list variants ---- */
 /* ============================================================
    cardds/card.css — the card boundary + list variants
-   One card = one boundary. Tone via .card--1/2/3 (role slots).
+   One card = one boundary. The base .card is tone 1; further tones
+   via .card--2/3/4/5 (role slots).
    ============================================================ */
 
 .card {
@@ -612,14 +657,18 @@ button { font: inherit; cursor: pointer; }
 .card > * { min-width: 0; }
 
 .card--2 { --card-bg: var(--card-2-bg); --card-ink: var(--card-2-ink); --card-muted: var(--card-2-muted); }
-.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); }
-.card--4 { --card-bg: var(--card-4-bg); --card-ink: var(--card-4-ink); --card-muted: var(--card-4-muted); }
-.card--5 { --card-bg: var(--card-5-bg); --card-ink: var(--card-5-ink); --card-muted: var(--card-5-muted); }
-
 /* dark/accent slot: accent-toned controls would vanish — the slot re-points
    the accent tokens, so every accent consumer (btn--primary, chip--on,
    check, toggle, ring, day…) inverts without per-component rules */
-.card--3 { --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+.card--4 { --card-bg: var(--card-4-bg); --card-ink: var(--card-4-ink); --card-muted: var(--card-4-muted); }
+.card--5 { --card-bg: var(--card-5-bg); --card-ink: var(--card-5-ink); --card-muted: var(--card-5-muted); }
+/* the dark slot's captions/hints/footnotes: --card-muted is tuned for a light card, so these dim the full ink
+   instead (one rule, matching specificity to what it replaces — .card--3 <space> <one class>) — merged from
+   base.css/choice.css/media.css/numbers.css/journey.css/people.css (2026-09-27 review). lists.css's .legend
+   differs (opacity 0.8, not --dim) and stays there. */
+.card--3 :is(.t-muted, .calendar__wd, .composer__hint, .quote__by, .ring__label, .band__foot, .picker__unit,
+  .route__place, .note-row, .avatar-pick__role) { color: inherit; opacity: var(--dim); }
 
 /* header row: title left, floating action right — centered, since the
    trailing control (chip/badge/icon-btn/link) is almost always taller than
@@ -722,7 +771,7 @@ button { font: inherit; cursor: pointer; }
     linear-gradient(to top left,  transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
   border: var(--border-w) solid currentColor;
   border-radius: var(--r-media);
-  opacity: 0.4;
+  opacity: var(--off);
   min-height: 10rem;
 }
 .ph--sm { min-height: 7.5rem; }
@@ -748,8 +797,7 @@ button { font: inherit; cursor: pointer; }
      one is there, and the screen's gap), or twice the room below it (the
      bar's reserve) — whichever is less. --_lead is the title bar's height
      only on a screen that HAS one: without a .topbar/.appbar before it the
-     block keeps that room (a deck and its two buttons, a card and its pager
-     under it, need it on a short phone; Lh, 2026-09-11). */
+     block keeps that room (a card and its pager under it needs it on a short phone; Lh, 2026-09-11). */
   --_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;
@@ -760,9 +808,8 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- 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, a deck with its two round buttons. The block runs edge to
-   edge and keeps the screen's inset as padding, so a deck's fanned cards can
-   overhang and clip at the screen's edges (correct — the fold visual), and
+   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>
@@ -780,9 +827,9 @@ button { font: inherit; cursor: pointer; }
    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 (the bar's reserve is
-   already the screen's bottom padding, actions.css) and scrolls up like any
-   page — nothing is capped, nothing shrinks, no scroll box inside a box.
+   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, the group takes the room after the top bar and
    centres its children in it. The screen's own inset stays the inset.
@@ -800,9 +847,9 @@ button { font: inherit; cursor: pointer; }
    the React adapter's slideTo() sets data-slide on :root, starts the transition
    and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
    simply switches. Only the card is named; the rest of the page must not
-   cross-fade. */
-/* the name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on every walk's current
-   page made two walks on one page — the gallery — share it, and the browser aborts a transition with a duplicate name */
+   cross-fade. The name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on
+   every walk's current page made two walks on one page — the gallery — share it, and the browser aborts a
+   transition with a duplicate name. */
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card
@@ -835,14 +882,10 @@ button { font: inherit; cursor: pointer; }
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
 }
-:root[data-slide="next"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
-:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
+: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; }
+:root[data-slide="next"]::view-transition-new(centre-card-in), :root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card-out), :root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card-in), :root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
@@ -938,7 +981,7 @@ button { font: inherit; cursor: pointer; }
    bottom, the headroom above is the base's (block below).
    Direct children only, five at most (slots are :nth-child below):
    first = the back of the stack, last = the front. README "Sheet stack
-   markup". cardds.js opens and closes a --tap stack; without it the
+   markup". The SheetStack component opens and closes a --tap stack; without it the
    stack still renders, it just won't open.
    ============================================================ */
 
@@ -951,14 +994,14 @@ button { font: inherit; cursor: pointer; }
    track is being sized), so a long sheet grew the track past the screen and
    every sheet's 100% then resolved against that — the bottom of every open
    sheet sat below the screen, unreachable (timebank home, 2026-09-13). */
-.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: 5.5rem; }
-
 /* the stack breaks out of the screen inset, edge to edge, always: the peek
    strips and the opened sheet span the screen's full width whatever the
    viewport (it used to bleed only under a 27em media query — a stack in a
    phone frame on a desktop kept the inset, and read as a narrower card;
-   Lh, 2026-09-11) */
-.sheet-stack { margin-inline: calc(-1 * var(--screen-pad)); }
+   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 > .card {
   grid-area: 1 / 1; /* every card shares the stack's cell; later ones offset down */
   border-bottom-left-radius: 0;
@@ -975,9 +1018,6 @@ button { font: inherit; cursor: pointer; }
 .sheet-stack > .card:not(:has(~ .card)) {
   align-self: stretch; /* the front card fills the remaining stack height */
 }
-/* --_n: how many sheets the stack holds, read from the DOM by :has so the
-   closed geometry needs no script and no per-stack declaration */
-.sheet-stack { --_n: 1; }
 .sheet-stack:has(> .card:nth-child(2)) { --_n: 2; }
 .sheet-stack:has(> .card:nth-child(3)) { --_n: 3; }
 .sheet-stack:has(> .card:nth-child(4)) { --_n: 4; }
@@ -1024,7 +1064,6 @@ button { font: inherit; cursor: pointer; }
 /* fanned stack: a toggle opens the stack wider so every peek shows more */
 .sheet-stack--fanned { --stack-step: 9.5rem; }
 
-.sheet-stack > .card:has(~ .card) { cursor: pointer; }
 /* 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
@@ -1070,9 +1109,10 @@ button { font: inherit; cursor: pointer; }
     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 0.35s ease; /* the only animated property here */
+  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, set in JS 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 */
 }
 .sheet-stack--tap > .card.is-open {
   /* up by its own resting offset — pure movement, nothing resizes */
@@ -1094,9 +1134,8 @@ button { font: inherit; cursor: pointer; }
   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 */
-.sheet-stack--tap > .card { scrollbar-width: none; }
-.sheet-stack--tap > .card::-webkit-scrollbar { display: none; }
+   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; }
 
@@ -1115,7 +1154,7 @@ button { font: inherit; cursor: pointer; }
    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 var(--_headroom); cursor: pointer; }
+.sheet-stack--closed > .card { translate: 0 var(--_headroom); }
 .sheet-stack--closed > .card.is-before { translate: 0 calc(var(--_headroom) + var(--stack-step)); }
 .sheet-stack--closed > .card.is-open { translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step)); }
 .sheet-stack--closed > .card.is-after { translate: 0 100vh; }
@@ -1147,10 +1186,7 @@ button { font: inherit; cursor: pointer; }
 .sheet-stack--tap .card__head {
   position: relative;
   padding-left: 0;
-  transition: padding-left 0.35s ease;
-}
-.sheet-stack--tap > .card.is-open > .card__head {
-  padding-left: calc(var(--tap-sm) + var(--sp-3));
+  transition: padding-left var(--motion-sheet) ease;
 }
 .sheet-stack--tap .sheet-stack__back {
   position: absolute;
@@ -1159,7 +1195,13 @@ button { font: inherit; cursor: pointer; }
   translate: 0 -50%;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.35s ease, visibility 0.35s;
+  transition: opacity var(--motion-sheet) ease, visibility var(--motion-sheet);
+  /* SMALL (see "the back button, SMALL" below) */
+  width: var(--_back-size);
+  height: var(--_back-size);
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
 }
 .sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
@@ -1218,28 +1260,21 @@ button { font: inherit; cursor: pointer; }
 /* ---- 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 { padding-left: var(--stack-back-room, calc(var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) + var(--sp-2))); }
-.sheet-stack--tap .sheet-stack__back {
-  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-}
+.sheet-stack--tap > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
 .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::after { content: ""; position: absolute; inset: calc((var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2); }
+.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-tap-highlight-color: transparent; -webkit-touch-callout: none; }
+.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) */
 
 /* ---- 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.
-   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
+   Five states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full · .sheet--away
 
    A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
    (stack.css): it is ALWAYS the full height of the box that holds it —
@@ -1280,8 +1315,8 @@ button { font: inherit; cursor: pointer; }
    the body. The handle and the head stay where they are at every
    state; the body is what scrolls — a sheet is a card whose head is
    pinned, not a scrolling column with a title somewhere in it.
-   cardds.js adds the handle's click / drag / keyboard and the focus
-   raise; without it every state still renders.
+   The Sheet component adds the handle's click / drag / keyboard and the
+   focus raise; without it every state still renders.
    ============================================================ */
 
 .sheet {
@@ -1309,7 +1344,7 @@ button { font: inherit; cursor: pointer; }
   position: absolute;
   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: cardds.js, only while the handle is held */
+  translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: the Sheet component, only while the handle is held */
   transition: translate var(--motion-sheet) ease;
 
   /* handle · head · body: a column, the body takes what is left and scrolls
@@ -1320,6 +1355,7 @@ button { font: inherit; cursor: pointer; }
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
+  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -1385,9 +1421,8 @@ button { font: inherit; cursor: pointer; }
    takes no taps, its buttons do; the strip behind them is the sheet's ground, --_foot tall, and the body
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
-.sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
 /* …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(--btn-h) + var(--sp-1) + calc(var(--tap-base) * 7 / 12) + var(--card-pad)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad)); }
 .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;
@@ -1413,7 +1448,7 @@ button { font: inherit; cursor: pointer; }
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
    its hit box to --tap tall and wider than the bar without changing the
-   picture. touch-action: none hands a touch drag to cardds.js instead of to
+   picture. touch-action: none hands a touch drag to the Sheet component instead of to
    the scroller behind it. */
 .sheet__handle {
   position: relative;
@@ -1487,7 +1522,7 @@ button { font: inherit; cursor: pointer; }
 .screen > .sheet-stage { margin-inline: calc(-1 * var(--screen-pad)); width: auto; } /* auto: 100% would keep the inset width */
 /* a stage laid OVER its screen (a Modal a link opened, Lh 2026-09-23): the page shows through, the stage covers it and its bar */
 .sheet-stage--over, .screen > .sheet-stage--over {
-  position: absolute; inset: 0; z-index: 40;
+  position: absolute; inset: 0; z-index: var(--z-top);
   width: auto; height: auto; max-width: none; margin: 0;
   background: transparent;
   --_top: 0rem;
@@ -1544,7 +1579,7 @@ button { font: inherit; cursor: pointer; }
   translate: -50% -50%;
   border-radius: 50%;
   border: var(--border-w) solid var(--map-ring-border, var(--accent));
-  background: var(--map-ring-bg, color-mix(in srgb, var(--accent) 22%, transparent));
+  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) */
@@ -1578,9 +1613,6 @@ button { font: inherit; cursor: pointer; }
   z-index: 1;
 }
 
-/* raised: the sheet floats above a footnote strip on the scrim. Its bottom
-   edge shows, so it gets its corners and border back; full still stops at
-   the top bar's line, because the top edge never moved. */
 /* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
    foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
    scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
@@ -1619,9 +1651,8 @@ button { font: inherit; cursor: pointer; }
    bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
    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; }
+.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 { position: relative; }
 .sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
 
 .sheet-step {
@@ -1629,6 +1660,7 @@ button { font: inherit; cursor: pointer; }
   display: grid; 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;
+  --_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:
    in one beat the step that was open folds while the new one unfolds (flex-grow and the 1fr row both ease), the piles slide
@@ -1636,26 +1668,25 @@ button { font: inherit; cursor: pointer; }
 .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) */
-  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); /* 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);
-  border-top: var(--sheet-step-border-w, 0px) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
+  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__summary { color: inherit; opacity: 0.8; }
 .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 */
   flex: none; display: grid; place-items: center; inline-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2)); block-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2));
   border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
-.sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .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); }
 .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__go { position: absolute; inset: min(0px, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.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; } }
@@ -1724,9 +1755,6 @@ button { font: inherit; cursor: pointer; }
    more air and a short one less; a screen with a bar keeps the bar's own room */
 .screen > .step:first-child, .screen--lead > .step { --_lead: var(--screen-lead, 15cqh); } /* top="lead" says it; a Step first says it too */
 
-/* a walk (the dots float on its foot): the reading block runs right to the bar's top edge — the reserve's breathing gap (--sp-6)
-   is given back, the dots keep the words clear of the bar (Lh 2026-09-23) */
-
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
    move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
    (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
@@ -1746,8 +1774,7 @@ button { font: inherit; cursor: pointer; }
   --card-gap: var(--sp-4);
   gap: var(--card-gap);
   padding-block: 0;              /* --_lead carries the top; the bar's room is the step's */
-  align-content: start;
-  color: var(--on-surface);
+  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
@@ -1755,23 +1782,22 @@ button { font: inherit; cursor: pointer; }
 .step:has(> .sheet--peek) > :is(.page, .pages) { padding-bottom: var(--sheet-peek); }
 .step > :is(.page, .pages) {
   flex: 0 1 auto;
-}
-.step > :is(.page, .pages) {
   min-height: 0;
-  margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
   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 */
+.step > .page { margin: var(--_lead, 0) var(--screen-pad) 0; }
 
 /* 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 { margin: 0; scrollbar-width: none; 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 (Lh 2026-09-23) */
-.step > .pages > .page { padding-inline: var(--screen-pad); } /* the words keep the inset INSIDE it */
-.step > .pages > .page { 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 */
-.step > .pages::-webkit-scrollbar { display: none; }
+.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) */
 }
 
@@ -1876,9 +1902,6 @@ button { font: inherit; cursor: pointer; }
   display: inline-flex;
   align-items: center;
   gap: var(--add-row-gap, var(--sp-2));
-  border: 0;
-  background: none;
-  color: inherit;
   font: var(--add-row-font, var(--type-label));
   font-size: var(--add-row-font-size, var(--fs-body));
   padding: var(--add-row-pad-y, var(--sp-2)) var(--add-row-pad-x, 0);
@@ -1944,7 +1967,6 @@ button { font: inherit; cursor: pointer; }
 .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)); }
-.card--3 .route__place { color: inherit; opacity: 0.7; }
 
 .route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
 
@@ -1958,7 +1980,7 @@ button { font: inherit; cursor: pointer; }
   background: var(--tile-badge-bg, var(--card-3-bg));
   color: var(--tile-badge-ink, var(--card-3-ink));
 }
-.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: 0.7; }
+.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: var(--dim); }
 .tile-badge__value { font: 800 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
 
 /* plain: no fill — a date box beside a title (Jun / 18) */
@@ -1976,7 +1998,6 @@ button { font: inherit; cursor: pointer; }
   font: var(--note-row-font, var(--type-caption));
   color: var(--note-row-ink, var(--card-muted));
 }
-.card--3 .note-row { color: inherit; opacity: 0.7; }
 
 /* ---- css/actions.css — topbar, chips, buttons, CTA pack ---- */
 /* ============================================================
@@ -2036,12 +2057,12 @@ button { font: inherit; cursor: pointer; }
   max-width: var(--screen-w);
   margin-inline: auto;
   padding-inline: var(--appbar-pad-x, var(--screen-pad)); /* fixed + full-bleed: the screen's own inset, so the bar's contents line up with the title bar under it (Lh 2026-09-15) */
-  z-index: 40; /* topmost — card animations never cover it */
+  z-index: var(--z-top); /* topmost — card animations never cover it */
   background: var(--appbar-bg, var(--surface)); /* solid: sliding cards never show through */
 }
 /* fixed, so it covers the top of the screen it sits in — reserve its height
-   there, from the same token, the way the bottom bars reserve theirs. The
-   breathing under it is published: a .step cancels it to touch the bar. */
+   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 */
@@ -2049,11 +2070,9 @@ button { font: inherit; cursor: pointer; }
 .appbar__who {
   flex: 1; min-width: 0; min-height: var(--tap);
   display: flex; align-items: center; gap: var(--sp-2);
-  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
+  margin: 0; text-align: start;
   border-radius: var(--appbar-who-radius, var(--r-chip));
-  -webkit-tap-highlight-color: transparent;
 }
-.appbar__who:focus-visible { outline: var(--focus); outline-offset: 2px; }
 .appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
 .appbar__title { font: var(--type-label); }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
@@ -2077,7 +2096,7 @@ button { font: inherit; cursor: pointer; }
 .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); }
 /* fab: the square floating action, bottom-right of a stage or screen */
-.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: 31; }
+.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
 
 /* ---- buttons ---- */
 .btn {
@@ -2110,7 +2129,6 @@ button { font: inherit; cursor: pointer; }
 /* 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 */
-:is(.btn, .icon-btn):disabled { opacity: 0.4; cursor: default; }
 /* a row of buttons sharing the width (twin CTAs inside a card) */
 .btn-row { display: flex; gap: var(--sp-2); }
 .btn-row > .btn { flex: 1; min-width: 0; }
@@ -2150,7 +2168,7 @@ button { font: inherit; cursor: pointer; }
 /* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
    <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
      <div class="menu" id="f1" popover><button class="menu__item" aria-current="true" data-value="week">this week</button>…</div></div>
-   cardds.js copies the picked item into the label and fires "change" on .dropdown.
+   The Dropdown component copies the picked item into the label and reports the change.
    .menu (layover.css) draws the panel; anchor positioning pins it under the trigger. */
 .dropdown { position: relative; min-width: 0; display: inline-grid; }
 .dropdown__btn {
@@ -2169,12 +2187,11 @@ button { font: inherit; cursor: pointer; }
   font: var(--type-label);
   font-size: var(--fs-body);
   text-align: left;
-  cursor: pointer;
 }
 /* muted: the value is still the default (README 13) */
 .dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--card-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dropdown__btn > .icon { transition: rotate 0.2s ease; }
+.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) */
@@ -2184,10 +2201,7 @@ button { font: inherit; cursor: pointer; }
 /* ---- segment (day picker / tab strip) — items share width, shrink on small screens ---- */
 .segment { display: flex; gap: var(--sp-1); }
 .segment__item {
-  border: 0;
-  background: transparent;
-  color: inherit;
-  opacity: 0.6;
+  opacity: var(--rest);
   border-radius: var(--r-chip);
   padding: var(--sp-2) var(--sp-1);
   font: var(--type-label);
@@ -2211,7 +2225,7 @@ button { font: inherit; cursor: pointer; }
 :root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 .action-bar {
   position: relative;
-  z-index: 30; /* above .sheet-stack sheets, which paint at --level 1-5 */
+  z-index: var(--z-bar); /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
   padding: var(--sp-3) var(--sp-4) var(--sp-5);
@@ -2241,10 +2255,11 @@ button { font: inherit; cursor: pointer; }
    NEVER carry words (Lh 2026-09-16, for good): an arrow is the whole meaning,
    and a word that isn't a direction ("Get started", "Done") is not a pager
    button — that step COMMITS and goes back to the plain .action-bar with one
-   wide button. Where you are is said by the .pager__at dots UNDER the card
-   that changes (a .screen__centre group, card.css), never in the bar — the
-   dots move with what moves (Lh, 2026-09-12). Between the buttons goes a
-   "skip" link or nothing.
+   wide button. Where you are is said by the .pager__at dots — under the card
+   that changes (a .screen__centre group, card.css) for a card walk, never in
+   that bar (Lh, 2026-09-12); a walk of words instead floats its dots as the
+   bar's own first row (step.css, Lh 2026-09-23) — either way the dots move
+   with what moves. Between the buttons goes a "skip" link or nothing.
 
    <div class="action-bar action-bar--pager">
      <button class="icon-btn" aria-label="ย้อนกลับ" disabled>…</button>
@@ -2261,14 +2276,14 @@ button { font: inherit; cursor: pointer; }
   height: var(--dot);
   border-radius: 50%;
   background: currentColor;
-  opacity: 0.3;
+  opacity: var(--faint);
 }
 .pager__at > .is-at { background: var(--accent); opacity: 1; }
 /* ---- tiers: a control row above the buttons ----
    A screen whose one move comes with a control — the introduction's text-size
    slider above its pager. Each tier is a row; the bar stacks them, and any
    parent hosting the bar publishes the room for both, the way the plain
-   reserve is published above, so a .screen or a .card--centre stops clear.
+   reserve is published above, so a .card--centre stops clear of it.
    <div class="action-bar action-bar--tiers">
      <div class="action-bar__tier"><label class="slider">…</label></div>
      <div class="action-bar__tier action-bar__tier--pager">…the round pager…</div>
@@ -2315,6 +2330,57 @@ button { font: inherit; cursor: pointer; }
 .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) */
 
+/* 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 —
+   something as wide as its card (a row, a summary line, a card, a step bar, a peeked sheet) fades under the finger (--press-dim)
+   instead, because a whole row shrinking reads as the card moving. A choice's fill fades in as it is picked. Disabled = no
+   pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here. */
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item) {
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: scale var(--motion-press) ease-out;
+}
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field) {
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: opacity var(--motion-press) 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) {
+  transition-property: scale, background-color, color, border-color, opacity;
+  transition-duration: var(--motion-press);
+  transition-timing-function: 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):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+.sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
+/* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back) must not turn see-through:
+   it darkens a touch instead (--press-shade) */
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn):active { filter: brightness(var(--press-shade)); }
+/* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item):focus-visible,
+:where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+/* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):is(:disabled, [aria-disabled="true"]),
+:where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
+:where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
+  .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
+  a.avatar, button.avatar, .menu__item):not(.link):is(:disabled, [aria-disabled="true"]),
+:where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
+.sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
+@media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */
+
 /* ---- css/numbers.css — ring, track, band, dot grid, picker, badge, bars ---- */
 /* ============================================================
    cardds/numbers.css — big numbers inside cards:
@@ -2351,7 +2417,6 @@ button { font: inherit; cursor: pointer; }
 }
 .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)); }
-.card--3 .ring__label { color: inherit; opacity: 0.7; }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
 .ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
 .ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
@@ -2390,7 +2455,7 @@ button { font: inherit; cursor: pointer; }
   content: "";
   flex: 1;
   height: var(--sp-3);
-  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  background: var(--ink-rail); /* the track's own ink at 30% — identical to color-mix(in srgb, var(--_ink) 30%, transparent): --ink-rail already reads currentColor, and .track sets color to --_ink */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
@@ -2401,9 +2466,10 @@ button { font: inherit; cursor: pointer; }
   flex: none;
   padding: calc((var(--tap-lg) - var(--icon)) / 2);
   border-radius: 50%;
-  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  background: var(--ink-rail);
   color: var(--_ink);
 }
+.track__step > .track__dot { display: grid; place-items: center; padding: 0; font: var(--track-dot-font, var(--type-title)); font-variant-numeric: tabular-nums; } /* a number in the round (TrackStep num) */
 .track__step.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
@@ -2425,7 +2491,6 @@ button { font: inherit; cursor: pointer; }
 }
 .band__num small { font-size: 0.5em; font-weight: 700; 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)); }
-.card--3 .band__foot { color: inherit; opacity: 0.7; }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
 .band-stack {
@@ -2472,14 +2537,6 @@ button { font: inherit; cursor: pointer; }
 @supports not (width: round(up, 1px, 1px)) {
   .dotgrid::before { display: none; }
 }
-.dotgrid--stars {
-  background-image: none;
-}
-.dotgrid--stars,
-.dotgrid--stars::before {
-  --_star: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
-}
-
 /* ---- picker: horizontal snap picker, centre value big ----
    <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
 .picker { display: grid; gap: var(--picker-gap, var(--sp-1)); justify-items: center; position: relative; }
@@ -2494,20 +2551,15 @@ button { font: inherit; cursor: pointer; }
   grid-auto-columns: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  scrollbar-width: none;
   position: relative;
 }
-.picker__rail::-webkit-scrollbar { display: none; }
 .picker__item {
   scroll-snap-align: center;
-  border: 0;
-  background: transparent;
-  color: inherit;
   padding: var(--picker-item-pad-y, var(--sp-2)) var(--picker-item-pad-x, 0);
   font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
-  opacity: 0.3;
+  opacity: var(--faint);
   text-align: center;
 }
 .picker__item[aria-selected="true"] { opacity: 1; }
@@ -2524,12 +2576,11 @@ button { font: inherit; cursor: pointer; }
 }
 .picker::after { left: auto; right: calc(100% / 3); }
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
-.card--3 .picker__unit { color: inherit; opacity: 0.7; }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
-  .picker__item { opacity: 0.3; animation: picker-focus linear both; animation-timeline: view(x); }
+  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); } /* opacity: var(--faint) already set above — the animation alone is new here */
   @keyframes picker-focus {
-    0%, 100% { opacity: 0.3; }
+    0%, 100% { opacity: var(--faint); }
     45%, 55% { opacity: 1; }
   }
 }
@@ -2625,7 +2676,7 @@ button { font: inherit; cursor: pointer; }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
 .avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); cursor: pointer; }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
 /* accent avatar: the "+7" tail, the selected person */
 .avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
@@ -2651,10 +2702,8 @@ button { font: inherit; cursor: pointer; }
   display: flex;
   gap: var(--avatar-pick-gap, var(--sp-4));
   overflow-x: auto;
-  scroll-snap-type: x proximity;
-  scrollbar-width: none; /* starts at the card's padding edge, like every row */
+  scroll-snap-type: x proximity; /* starts at the card's padding edge, like every row */
 }
-.avatar-pick::-webkit-scrollbar { display: none; }
 .avatar-pick__item {
   scroll-snap-align: start;
   flex: none;
@@ -2662,17 +2711,13 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   justify-items: center;
   gap: var(--avatar-pick-item-gap, var(--sp-2));
-  border: 0;
-  background: transparent;
-  color: inherit;
-  padding: 0;
   text-align: center;
 }
 .avatar-pick__name { font: var(--avatar-pick-name-font, var(--type-label)); font-size: var(--avatar-pick-name-font-size, var(--fs-sm)); }
 .avatar-pick__role { font: var(--avatar-pick-role-font, var(--type-caption)); color: var(--avatar-pick-role-ink, var(--card-muted)); margin-top: calc(-1 * var(--sp-1)); }
-.card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }
+.avatar-pick__item[aria-pressed="true"] > .avatar { background: var(--avatar-pick-on-bg, var(--accent)); color: var(--avatar-pick-on-ink, var(--on-accent)); border-color: transparent; } /* the picked person */
 
-/* ---- css/choice.css — check, toggle, toggle chip, chip grid, days, calendar, mood, pin, composer ---- */
+/* ---- css/choice.css — check, toggle, chip grid, days, calendar, mood, pin, composer ---- */
 /* ============================================================
    cardds/choice.css — thumb-size choice controls inside cards:
    check circle · toggle · toggle chip · chip grid · day strip ·
@@ -2696,7 +2741,6 @@ button { font: inherit; cursor: pointer; }
   background: var(--check-bg, var(--action-bg));
   display: grid;
   place-items: center;
-  cursor: pointer;
 }
 .check::after {
   content: "";
@@ -2709,15 +2753,14 @@ button { font: inherit; cursor: pointer; }
 }
 .check:checked { background: var(--accent); border-color: transparent; }
 .check:checked::after { opacity: 1; }
-.check:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .check--sm { width: var(--check-sm-size, var(--tap-sm)); height: var(--check-sm-size, var(--tap-sm)); }
 
 /* ---- toggle: big switch ----
    <input type="checkbox" role="switch" class="toggle" aria-label="Private"> */
 .toggle {
   --_w: var(--bar-h);            /* 64 × 36, knob = height − 2 × pad */
-  --_h: 2.25rem;
-  --_pad: 0.1875rem;
+  --_h: calc(var(--tap-base) * 3 / 4);
+  --_pad: calc(var(--tap-base) / 16);
   appearance: none;
   width: var(--_w);
   height: var(--_h);
@@ -2727,8 +2770,7 @@ button { font: inherit; cursor: pointer; }
   border: var(--border-w) solid var(--toggle-border, var(--outline));
   background: var(--toggle-bg, var(--action-bg));
   position: relative;
-  cursor: pointer;
-  transition: background 0.2s ease;
+  transition: background-color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
 }
 .toggle::after {
   content: "";
@@ -2740,11 +2782,10 @@ button { font: inherit; cursor: pointer; }
   border-radius: 50%;
   background: currentColor;
   opacity: 0.45;
-  transition: translate 0.2s ease, opacity 0.2s ease;
+  transition: translate var(--motion-quick) ease, opacity var(--motion-quick) ease;
 }
 .toggle:checked { background: var(--accent); border-color: transparent; }
 .toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
-.toggle:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 
 /* ---- chip pick: a chip that is a choice — a native radio/checkbox inside the label, the picked one filled with accent.
    Full-width in a .chip-grid (one slot / many options), or hugging its word on a .chip-row with --sign (an interest
@@ -2760,11 +2801,12 @@ button { font: inherit; cursor: pointer; }
    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); position: relative; }
-.chip--pick { cursor: pointer; position: relative; } /* the input covers the whole chip, on a row as in a grid */
-.chip--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
-.chip--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-.chip--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+.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 */
+/* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
+   a chip, a mood dot, a tile (media.css) */
+:is(.chip--pick, .mood__opt, .tile--pick) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+:is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); color: var(--on-accent); 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 {
@@ -2797,11 +2839,8 @@ button { font: inherit; cursor: pointer; }
   padding-block: var(--day-pad-y, var(--sp-3)); /* equal air top and bottom, so the selected pill
                                  is the same shape on every day */
   padding-inline: 0;
-  border: 0;
   border-radius: var(--day-radius, var(--r-chip));
-  background: transparent;
-  color: inherit;
-  opacity: 0.6;
+  opacity: var(--rest);
 }
 .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; }
@@ -2814,17 +2853,13 @@ button { font: inherit; cursor: pointer; }
 .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--calendar-head-gap, var(--sp-2)); }
 .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; }
 .calendar__wd { font: var(--calendar-wd-font, var(--type-caption)); color: var(--calendar-wd-ink, var(--card-muted)); padding-block: var(--calendar-wd-pad-y, var(--sp-2)); }
-.card--3 .calendar__wd { color: inherit; opacity: 0.7; }
 .calendar__day {
   width: 100%;
   max-width: var(--calendar-day-max-w, var(--tap));
   aspect-ratio: 1;
   display: grid;
   place-items: center;
-  border: 0;
   border-radius: 50%;
-  background: transparent;
-  color: inherit;
   font: 500 var(--fs-title)/1 var(--font-ui);
   font-variant-numeric: tabular-nums;
   grid-column-start: var(--start, auto); /* --start on the 1st: weekday column 1–7 */
@@ -2847,8 +2882,7 @@ button { font: inherit; cursor: pointer; }
   display: flex;
   justify-content: space-between;
 }
-.mood__opt { flex: 1 1 0; max-width: var(--mood-opt-max-w, var(--tap)); min-width: 0; height: var(--mood-opt-h, var(--tap)); display: grid; place-items: center; position: relative; cursor: pointer; }
-.mood__opt > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.mood__opt { flex: 1 1 0; max-width: var(--mood-opt-max-w, var(--tap)); min-width: 0; height: var(--mood-opt-h, var(--tap)); display: grid; place-items: center; position: relative; }
 .mood__dot {
   width: var(--mood-dot-size, var(--icon-xs));
   height: var(--mood-dot-size, var(--icon-xs));
@@ -2879,12 +2913,11 @@ button { font: inherit; cursor: pointer; }
   text-align: center;
   font: var(--pin-cell-font, var(--type-stat));
   font-variant-numeric: tabular-nums;
+  caret-color: transparent; /* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
+    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
+    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 }
 .pin__cell:not(:placeholder-shown) { color: var(--pin-cell-filled-ink, var(--accent)); } /* a typed digit: coloured words on the cell's own ground — no fill (Lh 2026-09-24; was an accent-filled pill) */
-/* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
-   edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
-   is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
-.pin__cell { caret-color: transparent; }
 .pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
@@ -2914,10 +2947,9 @@ button { font: inherit; cursor: pointer; }
   letter-spacing: var(--track-h2);
   outline: none;
 }
-.composer__input::placeholder { color: inherit; opacity: 0.4; }
+.composer__input::placeholder { color: inherit; opacity: var(--off); }
 .composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--composer-bar-gap, var(--sp-3)); }
 .composer__hint { font: var(--composer-hint-font, var(--type-caption)); color: var(--composer-hint-ink, var(--card-muted)); }
-.card--3 .composer__hint { color: inherit; opacity: 0.7; }
 
 /* ---- slider: one value along a track, a thumb-size knob ----
    <label class="slider"><span class="slider__label">ขนาดตัวหนังสือ</span><input class="slider__range" type="range" min="100" max="160" step="15" aria-label="ขนาดตัวหนังสือ"></label>
@@ -2928,8 +2960,8 @@ button { font: inherit; cursor: pointer; }
 .slider { display: grid; gap: var(--slider-gap, var(--sp-1)); flex: 1; min-width: 0; position: relative; } /* relative: the glyph rides the knob */
 /* ---- the sample glyph: one letter IN the knob, on-accent, at the type size
    the slider sets — so a text-size slider shows the size before anything is
-   read (Lh, 2026-09-12). cardds.js publishes the knob's place on the .slider
-   as --slider-at (0..1) from the input's value; the glyph sits over the knob
+   read (Lh, 2026-09-12). The Slider component publishes the knob's place on
+   the .slider as --slider-at (0..1) from the input's value; the glyph sits over the knob
    and never takes the pointer. <span class="slider__glyph" aria-hidden="true">ก</span>
    before the input. */
 .slider__glyph {
@@ -2979,6 +3011,8 @@ button { font: inherit; cursor: pointer; }
   box-shadow: var(--shadow-float);
 }
 .slider__range:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.slider__range:active::-webkit-slider-thumb { scale: var(--press-scale); } /* the knob gives under the finger like any control */
+.slider__range:active::-moz-range-thumb { scale: var(--press-scale); }
 
 /* ---- a switch that names itself (Toggle text, Lh 2026-09-23 — "อยู่บ้าน" on the home's top): the words, then the switch,
    one label — the whole of it is the tap target ---- */
@@ -2986,8 +3020,7 @@ button { font: inherit; cursor: pointer; }
   display: inline-flex; align-items: center; gap: var(--toggle-field-gap, var(--sp-2));
   min-height: var(--tap);
   font: var(--toggle-field-font, var(--type-label));
-  cursor: pointer;
-  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none; user-select: none;
   flex: none;
 }
 
@@ -3034,7 +3067,7 @@ button { font: inherit; cursor: pointer; }
    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; cursor: pointer; }
+.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; }
@@ -3186,14 +3219,9 @@ button { font: inherit; cursor: pointer; }
   align-items: center;
   gap: var(--link-gap, var(--sp-1));
   min-height: var(--link-min-h, var(--tap-sm));
-  color: inherit;
   text-decoration: none;
   font: var(--link-font, var(--type-label));
   font-size: var(--link-font-size, var(--fs-body));
-  border: 0;
-  background: transparent;
-  padding: 0;
-  cursor: pointer;
 }
 /* a SMALL link (Lh 2026-09-23): a thing tapped rarely — "details", a ctaLink — at the minor-link size (15) and 28px of height;
    its 44px tap target stays, an invisible ::after around it */
@@ -3220,7 +3248,7 @@ button { font: inherit; cursor: pointer; }
   --card-ink: var(--card-3-ink);
   --accent: var(--card-3-ink);
   --on-accent: var(--card-3-bg);
-  min-height: 22.5rem;
+  min-height: var(--_cover-min-h);
   align-content: space-between;
   overflow: hidden;
   isolation: isolate;
@@ -3260,7 +3288,6 @@ button { font: inherit; cursor: pointer; }
 .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); }
 .quote__by { font: var(--quote-by-font, var(--type-caption)); color: var(--quote-by-ink, var(--card-muted)); }
-.card--3 .quote__by { color: inherit; opacity: 0.7; }
 
 /* ---- tile grid: big square tiles — icon top, label bottom ----
    <div class="tile-grid"><button class="tile"><svg class="icon"/><span class="tile__label">Light</span></button>
@@ -3286,20 +3313,16 @@ button { font: inherit; cursor: pointer; }
   font: inherit;
   text-align: left;
   position: relative;
-  cursor: pointer;
 }
 .tile__label { font: var(--tile-label-font, var(--type-title)); }
 .tile__value { font: var(--tile-value-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
-.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: 0.7; }
+.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: var(--dim); }
 .tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
 .tile--on { background: var(--tile-on-bg, var(--accent)); color: var(--tile-on-ink, var(--on-accent)); border-color: transparent; }
-.tile--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
-.tile--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-.tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+/* .tile--pick's hidden input and :has(:checked) fill are declared once in choice.css, alongside .chip--pick and .mood__opt */
 .tile--wide { grid-column: 1 / -1; }
 /* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
-.tile--stat { border-color: transparent; background: none; padding-inline: 0; cursor: default; }
-.tile--stat { min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
+.tile--stat { border-color: transparent; background: none; padding-inline: 0; min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
   border-style: dashed;
@@ -3322,7 +3345,7 @@ button { font: inherit; cursor: pointer; }
    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 in a deck. */
+   beside it. */
 .card--fold {
   border-color: transparent;
   border-bottom-right-radius: 0;
@@ -3376,8 +3399,8 @@ button { font: inherit; cursor: pointer; }
   overflow: hidden;
 }
 .mosaic > :first-child { grid-row: span 2; }
-.mosaic > * { min-height: 0; border-radius: 0; opacity: 1; border-width: 0; }
-.mosaic > .ph { opacity: 0.4; border-width: var(--border-w); }
+.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,
@@ -3406,7 +3429,7 @@ button { font: inherit; cursor: pointer; }
    liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
-  min-height: var(--postcard-min-h, 22.5rem);
+  min-height: var(--postcard-min-h, var(--_cover-min-h));
   perspective: 60rem;
   border-radius: var(--postcard-radius, var(--r-card));
   isolation: isolate;
@@ -3432,14 +3455,10 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   align-content: start;
   padding: var(--postcard-face-pad, var(--card-pad-rest));
-  border: 0;
   border-radius: inherit;
-  background: transparent;
-  color: inherit;
   text-align: left;
-  cursor: pointer;
 }
-.postcard__turn:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+.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)); color: var(--postcard-front-ink, var(--card-3-ink)); }
 .postcard__front .postcard__turn > img,
@@ -3495,11 +3514,11 @@ button { font: inherit; cursor: pointer; }
   .postcard__face { transition: none; }
 }
 
-/* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout, deck ---- */
+/* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout ---- */
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
    Modal (ask) · popover menu · expanding banner · float bar ·
-   callout · swipe deck. The sheet (peek / half / full / page)
+   callout. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
@@ -3522,10 +3541,11 @@ button { font: inherit; cursor: pointer; }
      2. the drawer comes out of the card's bottom edge while the lift moves
         up, both at once: the card grows from its centre, which never moves
         (the modal centres itself — absolute, margin auto; a growing card keeps its middle where it is)
-   Closing: a click on any button in the drawer plays the same animations in
-   reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
-   fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
-   button's data-answer) for the app to remove the stage.
+   Closing: <Modal open onClosed> — set open={false} and the Modal component plays the
+   same animations in reverse (Animation.reverse() on each — nothing duplicated), then
+   calls onClosed for the app to unmount the stage. Modal no longer knows its own
+   buttons (data-answer / the "cardds:modal" event are gone; the app's own onClick
+   sets open={false}).
    Reduced motion: the finished state, no beats; closing fires at once. */
 .modal {
   --drawer-h: 14rem;
@@ -3570,7 +3590,7 @@ button { font: inherit; cursor: pointer; }
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {
@@ -3604,8 +3624,8 @@ button { font: inherit; cursor: pointer; }
    element the button belongs to (a card, a sheet), opened by an .icon-btn:
    <button class="icon-btn icon-btn--sm" popovertarget="m1" aria-label="More">…</button>
    <div class="menu menu--actions menu--end" id="m1" popover><button class="menu__item"><svg class="icon"/>Edit</button>…</div>
-   No item stays current there (cardds.js skips the mark). .menu--end = the
-   trigger sits at the far right, so the panel grows leftwards. */
+   No item stays current there — an actions menu's items carry no aria-current, unlike
+   the dropdown's. .menu--end = the trigger sits at the far right, so the panel grows leftwards. */
 .menu {
   display: none;              /* explicit closed state — never display on the base rule */
   margin: 0;
@@ -3631,18 +3651,14 @@ button { font: inherit; cursor: pointer; }
   min-height: var(--menu-item-min-h, var(--tap));
   width: 100%;
   padding: var(--menu-item-pad-y, 0) var(--menu-item-pad-x, var(--sp-3));
-  border: 0;
   /* concentric with the panel: the card radius minus the panel's padding, so the
      highlight's curve follows the outer corner (Lh 2026-09-16) */
   border-radius: calc(var(--r-card) - var(--menu-pad, var(--sp-2)));
-  background: transparent;
-  color: inherit;
   font: var(--menu-item-font, var(--type-title));
   text-align: left;
-  cursor: pointer;
 }
 .menu__item:hover, .menu__item:focus-visible { background: var(--ink-tint); outline: none; }
-.menu__item[aria-current], .menu__item.is-on { background: var(--accent); color: var(--on-accent); }
+.menu__item[aria-current] { background: var(--accent); color: var(--on-accent); }
 @supports (anchor-name: --a) {
   .menu[popover] {
     position-area: block-end span-inline-end;
@@ -3656,7 +3672,7 @@ button { font: inherit; cursor: pointer; }
   .menu[popover] {
     opacity: 0;
     translate: 0 calc(-1 * var(--sp-2));
-    transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, opacity 0.2s, translate 0.2s;
+    transition: display var(--motion-quick) allow-discrete, overlay var(--motion-quick) allow-discrete, opacity var(--motion-quick), translate var(--motion-quick);
   }
   .menu:popover-open { opacity: 1; translate: 0 0; }
   .menu.\:popover-open { opacity: 1; translate: 0 0; }
@@ -3677,19 +3693,19 @@ button { font: inherit; cursor: pointer; }
   padding-inline: var(--card-pad, var(--screen-pad));
 }
 .banner__summary {
-  list-style: none; cursor: pointer;
+  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;
 }
 .banner__summary::-webkit-details-marker { display: none; }
-.banner__summary .icon { transition: rotate 0.2s ease; }
+.banner__summary .icon { transition: rotate var(--motion-quick) ease; }
 .banner[open] .banner__summary .icon { rotate: 180deg; }
 .banner__body { display: grid; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
 .banner::details-content { width: 100%; }
 @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 0.25s ease, content-visibility 0.25s allow-discrete; }
+    .banner::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-quick) ease, content-visibility var(--motion-quick) allow-discrete; }
     .banner[open]::details-content { block-size: auto; }
   }
 }
@@ -3706,16 +3722,12 @@ button { font: inherit; cursor: pointer; }
   display: flex;
   gap: var(--float-bar-gap, var(--sp-2));
   align-items: center;
-  z-index: 30;
+  z-index: var(--z-bar);
 }
 /* in a fill screen (its `bottom`) the float bar floats over the SCREEN's foot, not the window's — it lies over the content
    (a map, a stack), so it is not a row of the column; the screen is its box (Lh 2026-09-23) */
 .screen--fill > .float-bar { position: absolute; }
-.sheet-stage > .float-bar { position: absolute; padding-inline: var(--sp-4); }
-/* .screen's default bottom padding clears an .action-bar; a .float-bar is
-   taller (--bar-h + its own bottom offset), so reserve the difference. Any
-   parent that hosts the bar counts (see .action-bar's reserve, actions.css) */
-:has(> .float-bar) .screen:not(.screen--fill) { padding-bottom: calc(var(--bar-h) + var(--sp-5) + var(--sp-6)); }
+.sheet-stage > .float-bar { position: absolute; } /* padding-inline removed 2026-09-27: it hard-coded --sp-4 over the --float-bar-pad-x knob, so the knob had no effect here */
 .float-bar__pill {
   flex: 1;
   min-width: 0;
@@ -3740,21 +3752,17 @@ button { font: inherit; cursor: pointer; }
   gap: var(--float-bar-item-gap, var(--sp-0));
   min-height: var(--float-bar-item-min-h, var(--tap-lg));
   padding: var(--float-bar-item-pad, var(--sp-1));
-  border: 0;
   border-radius: var(--float-bar-item-radius, var(--r-chip));
-  background: transparent;
-  color: inherit;
   font: var(--float-bar-item-font, var(--type-caption));
   text-decoration: none;
-  opacity: 0.6;
+  opacity: var(--rest);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 /* 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"]),
-.float-bar__item.is-on { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); opacity: 1; }
 .float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
 
 /* ---- callout: a small card with a tail — over a map, a media, a mascot ----
@@ -3788,18 +3796,7 @@ button { font: inherit; cursor: pointer; }
   border-left: 0;
 }
 .callout__title { font: var(--callout-title-font, var(--type-title)); }
-.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: 0.7; }
-/* ---- deck: swipe cards; the last child is on top ----
-   <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
-   <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */
-.deck { display: grid; place-items: center; padding: var(--deck-pad-top, var(--sp-4)) var(--deck-pad-x, var(--sp-4)) var(--deck-pad-bottom, var(--sp-6)); }
-.deck > .card { grid-area: 1 / 1; width: min(100%, 20rem); min-height: 12.5rem; transition: rotate 0.3s ease, translate 0.3s ease; }
-.deck > .card:nth-last-child(2) { rotate: -4deg; translate: calc(-1 * var(--sp-2)) var(--sp-2); opacity: 0.85; }
-.deck > .card:nth-last-child(3) { rotate: 5deg; translate: var(--sp-3) var(--sp-4); opacity: 0.6; }
-.deck > .card:nth-last-child(n + 4) { display: none; }
-.deck__actions { display: flex; justify-content: center; gap: var(--deck-actions-gap, var(--sp-8)); }
-.deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }
-
+.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: var(--dim); }
 /* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
    <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
      <p class="splash__text">…</p></div></section>