@usableapp/cardds 0.1.4 → 0.1.6

package/README.md

@@ -2,12 +2,12 @@
 
 Card-first mobile design system, **React-first**: `src/` is the component
 library — one thin component per pattern, emitting exactly the markup the CSS
-documents — and `app/` is the Commons Time Bank PWA built from it (the twelve
-screens of the Claude Design handoff, as real routes). The CSS (`css/*.css`)
+documents. The CSS (`css/*.css`)
 stays the only truth: a component never styles anything, it only picks classes
 from props. The CSS also works alone, with no build, for a host that wants
-class names rather than components; `demo/` keeps the CSS spec pages the
-acceptance tests drive.
+class names rather than components. The demo is `/gallery` (`npm run dev`):
+every component's stories, live, searchable; `tests/fixtures/` holds the
+HTML pages the acceptance tests drive (not a demo — nobody reads them).
 
 Repo: **https://github.com/everysundays/cardds** (private — this is the
 source of truth; every consuming project vendors a copy from here, never
@@ -23,14 +23,13 @@ licences (`fonts/LICENSES.md`).
 
 ```bash
 npm install
-npm run dev          # the app (app/) on http://localhost:5174 — the twelve screens, /screens lists them
+npm run dev          # the gallery on http://localhost:5174 — every story, searchable
 npm run build        # the library: icons → src/type/icons.ts · tsc → dist/ (ESM + .d.ts) · dist/cardds.css (flattened)
-npm run build:app    # the PWA → app/dist (manifest, service worker, icons)
-npm test             # Playwright: the step/sheet/centre geometry on demo/, the app's screens and the four handoff upgrades
+npm test             # Playwright: the step/sheet/centre geometry on tests/fixtures/, the app's screens and the four handoff upgrades
 ```
 
 ```tsx
-import { Screen, TopBar, Step, StepCard, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from 'cardds';
+import { Screen, TopBar, Step, BaseContent, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from 'cardds';
 import 'cardds/dist/cardds.css';   // or cardds/cardds.css with the css/ folder beside it
 ```
 
@@ -42,12 +41,13 @@ the code), a card heading that needs more than two lines squeezing its type
 (see *Anatomy*), and the `.dropdown` writing its picked value back. `Icon`
 inlines the 56 symbols of `icons.svg` at build time, so no sprite file ships.
 
-**The app** (`app/`): Vite + React Router, `cardds` aliased to `src/` so the
-app and the package share one truth with no build between them. Twelve
-screens from `docs/handoff/commons-time-bank-SPEC.md` — welcome, install (the
-real `beforeinstallprompt`), verify phone, home, browse, detail, matches,
-empty, the two menus (sheet stacks), post, profile. `app/README.md` records
-what the port changed against the mockups and why.
+**The gallery** (`gallery/`): Vite + React Router, `cardds` aliased to `src/`
+so the gallery and the package share one truth with no build between them.
+`/` lists every story of every component, `/:Name` one component. (The
+Commons Time Bank app that used to live here — twelve screens from
+`docs/handoff/commons-time-bank-SPEC.md` — was dropped on 2026-09-16; nobody
+looked at it, the gallery is the demo. The type scale is the `Text · Scale`
+story.)
 
 **CSS only** (no React, no build):
 
@@ -62,14 +62,12 @@ popover) but won't update its label, a stack still displays but won't open, a
 sheet renders every state but only moves when a class changes, a pin is six
 plain inputs.
 
-`demo/index.html` is the CSS spec — every component in one page, palette
-switcher top-right. `demo/sheet.html` — the single sheet at phone height: a step
-that reads, a step that acts, the overlay stage; `demo/stack.html` — the sheet
-stack: the menu and the display variant; `demo/elements.html` — in-card
-elements and layovers grown from the timebanking board. Serve the repo root
-(`python3 -m http.server 4174`) and open `/demo/`. These pages are the fixtures
-of `tests/step.spec.js` and `tests/centre.spec.js`; `tests/app.spec.js` drives
-the app. Nothing here is verified by eye.
+The one place to look is `/gallery` (`npm run dev` → `http://localhost:5174/gallery`):
+every `.design-sync/previews/<Name>.tsx` story, live, grouped by `src/<group>/`,
+searchable, in a 375×812 phone cell, with a palette switch and an inspect
+switch (box outlines + dimensions on hover). `tests/fixtures/*.html` (ex
+`demo/`) are the pages `tests/step.spec.js` and `tests/centre.spec.js` measure;
+`tests/gallery.spec.js` drives the gallery. Nothing here is verified by eye.
 
 ### In another project
 
@@ -187,19 +185,19 @@ A step is one screen, one task (see *Anatomy*). It is the other component
 whose markup has rules, because the sheet's box is the step itself:
 
 ```html
-<!-- reads: card only -->
+<!-- reads: the words only -->
 <section class="step">
-  <article class="card step__card">
-    <div class="card__head"><div><span class="t-overline t-muted">ขั้นที่ 2 จาก 4</span><h2 class="t-h2">…</h2></div></div>
+  <section class="base-content">
+    <div class="card__head"><span class="t-overline t-muted">ขั้นที่ 2 จาก 4</span><h2 class="t-h2">…</h2></div>
     <p class="t-body">…</p>
-  </article>
+  </section>
 </section>
 <div class="action-bar action-bar--pager">…</div>
 
-<!-- acts: card + sheet -->
+<!-- acts: the words + a sheet -->
 <section class="step">
-  <article class="card step__card">…the words…</article>
-  <article class="card sheet sheet--half" data-sheet-states="peek half full">
+  <section class="base-content">…the words…</section>
+  <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
     <button class="sheet__handle" type="button" aria-label="ปรับความสูง"></button>
     <div class="card__head"><h2 class="t-h2">…</h2><span class="chip">…</span></div>
     <div class="sheet__body">
@@ -221,8 +219,10 @@ whose markup has rules, because the sheet's box is the step itself:
   card takes the inset back as its side margins — so the card and the bar's
   buttons stand on the inset line, and the sheet runs edge to edge like the
   bar and like a sheet in a `.sheet-stage`.
-- **`.step__card` first, `.sheet` last.** The card carries the step's words
-  and is a normal card: head · content · optional foot. The sheet is
+- **`.base-content` first, `.sheet` last.** The block carries the step's words
+  ON THE BASE — no frame, no area colour (it was a `.card` until 2026-09-16;
+  Lh: a step reads like a page, not a card in a page). It keeps a card's
+  rhythm: a `.card__head`, `--card-gap` between things. The sheet is
   **handle · head · body**: the handle, then a `.card__head` title row (that
   row is what `peek` shows — heading left, the contextual thing right), then
   `.sheet__body` with what the member acts on. The handle and the head are
@@ -298,25 +298,25 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 | `css/fonts.css` + `fonts/` | the two `@font-face`s: PK Nonthaburi (body, `--font-ui`), FC Pride (display, `--font-display`); the font files and their licences | when swapping a face |
 | `css/tokens.css` | spacing, radius, type levels, motion (`--motion-sheet`), the human centre (`--screen-centre`), grayscale role defaults; registers the two sheet tokens (`--sheet-peek`, `--sheet-half`) so script can read them resolved | rarely |
 | `css/palette.css` | **color settings — palettes as role-token overrides** | yes, this one |
-| `css/base.css` | reset, surface, typography classes, `.section` | rarely |
+| `css/base.css` | reset, surface, typography classes, `.base-content` | rarely |
 | `css/card.css` | `.card` + its skeleton (`.card__head` / content / `.card__foot`), `.card-list`, `.card--row`, `.icon-row`, stats, `.card--centre` (one card at the human centre of a fill screen) and `.screen__centre` (a small group there) | when adding variants |
 | `css/stack.css` | **sheet stack** — `.sheet-stack`: the menu, sheets stacked (heads peek, up to 5; `--tap` tap-to-open, the back button dissolves in; `--closed` nothing open, heads at the bottom, the base above (`.sheet-stack__base`); `--display` the title is the peek, `--fanned` wider peeks); always edge to edge; a stacked sheet is a `.card` | rarely |
 | `css/sheet.css` | **sheet single** — `.sheet`: a card as bottom sheet, full height always, a state is how far it slid: `--peek` / `--half` / `--full` (translate only); handle · head · `.sheet__body` (the head pinned, the body scrolls); `.sheet-stage` (overlay stage: map sheet, a `__hero` — one thing centred in the band a half sheet leaves open, `--dim`, `--raised`, ask drawer) | when adding states |
-| `css/step.css` | `.step` — one screen, one task: `.step__card` (reads) + optional `.sheet` (acts), the bar's room, the keyboard's room | rarely |
+| `css/step.css` | `.step` — one screen, one task: `.base-content` (reads) + optional `.sheet` (acts), the bar's room, the keyboard's room | rarely |
 | `css/forms.css` | `.field` (outlined input, label = placeholder), `.add-row` | when adding controls |
 | `css/journey.css` | `.route`, `.tile-badge`, `.note-row` — trip/status primitives | when adding variants |
-| `css/actions.css` | topbar, chips, buttons (`.btn--xl`), `.dropdown` (the standard select: pill + `.menu` popover), `.action-bar` (+ `--pager` for previous/next, as labels or as two round buttons; `--tiers` for a control row above the buttons), `.fab` | when adding actions |
+| `css/actions.css` | topbar, chips, buttons (`.btn--xl`), `.dropdown` (the standard select: pill + `.menu` popover), `.action-bar` (+ `--pager` for previous/next, two round icon buttons, never labels; `--tiers` for a control row above the buttons), `.fab` | when adding actions |
 | `css/numbers.css` | `.ring` gauge, `.track` steps, `.card--band` + `.band-stack`, `.dotgrid`, `.picker`, `.badge`, `.bars` | big numbers |
 | `css/people.css` | `.avatar` (sm/lg/xl, outline, add, on, halo), `.avatar-stack`, `.avatar-pick` | people |
 | `css/choice.css` | `.check`, `.toggle`, `.chip--toggle`, `.chip-grid` + `.chip--pick`, `.day-strip`, `.calendar`, `.mood`, `.pin`, `.composer`, `.slider` | choice controls |
 | `css/lists.css` | `.row` / `.rows` (frameless rows in a card), `.kv`, `.kv-grid`, `.timeline`, `.legend`, `.link` | lists inside cards |
 | `css/media.css` | `.card--cover`, `.quote`, `.tile-grid` + `.tile`, `.card--fold`, `.mosaic`, `.wave` | media & display |
-| `css/layover.css` | `.drawer` (ask), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.chip--bubble`, `.deck` | cards over content |
+| `css/layover.css` | `.modal` (the ask: `__lift` + `__drawer`, closes on any drawer button → `cardds:modal`), `.menu` (popover), `.banner` (details), `.float-bar`, `.callout`, `.chip--bubble`, `.deck` | cards over content |
 | `icons.svg` | Lucide sprite (ISC), 56 minimal stroke icons | add symbols as needed |
 | `src/` → `dist/` | the React library: `src/<group>/<Name>.tsx`, one thin component per pattern, JSDoc = the rule; built by `npm run build` (tsc) into `dist/` with `.d.ts`; `src/type/icons.ts` is generated from `icons.svg` | when adding a component |
-| `app/` | the Commons Time Bank PWA: `app/src/screens/*.tsx` (the twelve screens), `App.tsx` (the routes), `install.ts` (the install prompt), `public/` (manifest, `sw.js`, icons); `npm run dev` / `build:app` | the product |
-| `demo/` | the CSS spec pages (`index`, `sheet`, `stack`, `elements`) — CSS only, and the fixtures of the geometry tests | when the CSS contract changes |
-| `docs/handoff/` | the Claude Design handoff spec the app was ported from | reference |
+| `gallery/` | the gallery site: `npm run dev` → `/` every story, `/:Name` one component (`gallery/src/Gallery.tsx` globs `.design-sync/previews/`) | the demo |
+| `tests/fixtures/` | the HTML pages (`index`, `sheet`, `stack`, `elements`) the geometry tests measure — ex `demo/`, not a demo | when a geometry test needs a new case |
+| `docs/handoff/` | the Claude Design handoff spec (the Commons Time Bank app built from it was dropped 2026-09-16) | reference |
 | `scripts/` | `build-icons.mjs` (icons.svg → `src/type/icons.ts`), `flatten-css.mjs` (`cardds.css` + imports → `dist/cardds.css`) | rarely |
 | `docs/guides/` | `building-with-cardds.md` — the anatomy, the step, the two sheet systems and the vocabulary in React terms; shipped to Claude Design as its guidelines | when the contract changes |
 | `cardds.js` | the behaviours (delegated, class/property toggles only — everything renders without it): dropdown value sync, `.sheet-stack--tap` open/close (tolerates one wrapper per sheet; close reads the tapped sheet), `.pin` auto-advance / Backspace / paste + `cardds:pin`, the sheet handle (tap / drag-snap / Enter / Space), the focus and keyboard raises (`--kb`), `cardds:sheet` | rarely |
@@ -356,7 +356,7 @@ Every screen is the same four things, and every card the same three:
 - **Two sheet systems, one material.** *Sheet single* (`.sheet`, `sheet.css`)
   is ONE sheet the member acts in, whatever it holds: a short entry in front
   of a step's card, a place on a map, a payment on a dim page — in a `.step`
-  or a `.sheet-stage`, and its state is how far it slid (peek / half / full).
+  or a `.sheet-stage`, and its state is how far it slid (peek / half / 3q / full).
   *Sheet stack* (`.sheet-stack`, `stack.css`) is MANY sheets, each a main
   section of the app, stacked like paper at the middle of the home screen:
   the menu. Heads peek, a tap brings one sheet to the front, back returns it;
@@ -365,8 +365,8 @@ Every screen is the same four things, and every card the same three:
   sheet is `.card.sheet` — and both obey rule 8: rigid, full height, moved
   by `translate` only. (The stack was first named "card stack": wrong, and
   retired.) Demos: `sheet.html`, `stack.html`.
-- **A step is one screen, one task: `.step`.** What the member reads is a
-  card (`.step__card`); what the member does, if the step asks for it, is a
+- **A step is one screen, one task: `.step`.** What the member reads is
+  words on the base (`.base-content` — the same block as anywhere on the base; it was `.step__card` until 2026-09-16); what the member does, if the step asks for it, is a
   `.sheet` in front of it; the screen's one move is `.action-bar`, outside
   the step, below it. A step where the member only READS is the card alone.
   A step where the member ACTS (types, picks, shoots a photo, records) adds
@@ -393,7 +393,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
 1. **One card = one boundary.** A card frames one thing: a category, a stat
    group, a list row. Tone slots: `.card` (card-1), `.card--2`, `.card--3`.
 2. **Sections are not cards.** Page sections = frameless on-surface content
-   (`.section`) + a lone/packed CTA (`.cta-pack`).
+   (`.base-content`) + a lone/packed CTA (`.cta-pack`).
 3. **Surrounding UI is separate.** `.topbar`, `.filter-row`, `.chip-row`,
    `.action-bar` live outside cards, above/below. The bottom bar has two
    arrangements and they mean different things: the default pack (one wide
@@ -469,9 +469,12 @@ Demo: the *skeleton* block at the top of `elements.html`.
 8. **A single sheet is rigid material, like a sheet in the stack.** It is always the full
    height of the box that holds it (`inset: 0`, set once, never written
    again) and a state is nothing but how far that full card slid:
-   `sheet--full` slid nowhere, `sheet--half` slid down by `--sheet-half`
-   (50% of itself), `sheet--peek` slid down until only `--sheet-peek` shows —
-   the handle and the title row. `translate` is the only animated property
+   `sheet--full` slid nowhere, `sheet--3q` slid down by `--sheet-3q` (a
+   quarter of itself — three quarters show), `sheet--half` by `--sheet-half`
+   (50%), `sheet--peek` slid down until only `--sheet-peek` shows — the
+   handle and the title row. A tap on the handle toggles between the sheet's
+   own state and peek (never a step-by-step climb, Lh 2026-09-16); a drag
+   snaps to any listed state, and where it lands is what a tap returns to. `translate` is the only animated property
    (`--motion-sheet`), and nothing toggles height, display or z-index for a
    state — the stack's rule, inherited. The box clips whatever slid below its
    bottom edge, so a sheet at any height is still a card: rounded top, a
@@ -484,7 +487,7 @@ Demo: the *skeleton* block at the top of `elements.html`.
    padding. Two boxes hold sheets and the states
    mean the same in both: `.step` (an app screen, the bar outside — Anatomy)
    and `.sheet-stage` (a page-level overlay: a sheet over a map, the dim page
-   sheet `--dim` + `--raised`, the ask drawer `--ask` + `.lift` + `.drawer`).
+   sheet `--dim` + `--raised`, the ask `--ask` + `.modal` = `__lift` + `__drawer`).
    A stage keeps the top bar's line free (`--_top`), so `--full` stops under
    `--header-h` and keeps its corners. Both sheet tokens are published — a
    sheet with a taller head retunes `--sheet-peek` — and registered in

package/cardds.js

@@ -177,8 +177,12 @@ function carddsCloseStack(stack, card) {
    without it; this adds the handle's click and drag, the focus raise, the
    keyboard room, and one event. Delegated: any sheet on the page, no ids.
 
-   - click / Enter / Space on .sheet__handle cycles the states named in
-     data-sheet-states (default "peek half full"), wrapping round
+   - click / Enter / Space on .sheet__handle TOGGLES the sheet between its
+     own state and peek (Lh 2026-09-16 — never a step-by-step climb). "Its
+     own state" is the last non-peek state it rested in (authored, dragged
+     to, or set), kept in data-sheet-home
+   - data-sheet-states (default "peek half 3q full") lists the states a
+     drag snaps to
    - drag on the handle writes the offset to --_drag (the CSS adds it to the
      state's translate) and on release snaps to the nearest state; a move
      shorter than --sp-2 is a tap. The snap is the one place the sheet's
@@ -194,7 +198,7 @@ function carddsCloseStack(stack, card) {
 
    carddsSheetSet(sheet, state) is the one entry point; an app that sets
    the state itself calls it rather than swapping classes, so listeners hear. */
-const CARDDS_SHEET_STATES = ['peek', 'half', 'full'];
+const CARDDS_SHEET_STATES = ['peek', 'half', '3q', 'full'];
 const CARDDS_SHEET_TAP_REM = 0.5; /* = --sp-2: a move shorter than this is a tap, not a drag */
 
 function carddsSheetStates(sheet) {
@@ -210,6 +214,10 @@ function carddsSheetSet(sheet, state) {
   if (!CARDDS_SHEET_STATES.includes(state)) return;
   const was = carddsSheetState(sheet);
   CARDDS_SHEET_STATES.forEach(s => sheet.classList.toggle('sheet--' + s, s === state));
+  /* where a tap from peek returns to: the non-peek state it is going to, or the
+     one it is leaving (an authored state never passed through here before) */
+  const home = state !== 'peek' ? state : was !== 'peek' ? was : null;
+  if (home) sheet.dataset.sheetHome = home;
   if (was !== state) sheet.dispatchEvent(new CustomEvent('cardds:sheet', { bubbles: true, detail: { state } }));
 }
 
@@ -224,10 +232,19 @@ document.addEventListener('click', e => {
   if (handle === carddsSheetSkipClick) { carddsSheetSkipClick = null; return; }
   const sheet = handle.closest('.sheet');
   if (!sheet) return;
-  const states = carddsSheetStates(sheet);
-  carddsSheetSet(sheet, states[(states.indexOf(carddsSheetState(sheet)) + 1) % states.length]);
+  carddsSheetSet(sheet, carddsSheetState(sheet) === 'peek' ? carddsSheetHome(sheet) : 'peek');
 });
 
+/* the state a tap from peek returns to: the last non-peek state it rested in,
+   else the authored one, else the first non-peek state it snaps to */
+function carddsSheetHome(sheet) {
+  const states = carddsSheetStates(sheet);
+  const home = sheet.dataset.sheetHome;
+  if (home && states.includes(home)) return home;
+  const now = carddsSheetState(sheet);
+  return now !== 'peek' ? now : states.find(s => s !== 'peek') ?? 'half';
+}
+
 /* how far the sheet has slid, in px: its rendered top against its resting top
    at full (the box's padding edge + its own offset). Read from geometry, not
    from the computed translate — that keeps percentages and calcs as text. */
@@ -243,6 +260,7 @@ function carddsSheetStops(sheet) {
   return {
     full: 0,
     half: height * (parseFloat(cs.getPropertyValue('--sheet-half')) || 0), // a share of the height
+    '3q': height * (parseFloat(cs.getPropertyValue('--sheet-3q')) || 0),
     peek: height - (parseFloat(cs.getPropertyValue('--sheet-peek')) || 0),  // a length, resolved
   };
 }
@@ -299,18 +317,17 @@ document.addEventListener('pointerup', carddsSheetRelease);
 document.addEventListener('pointercancel', carddsSheetRelease);
 
 /* focus in a peeked sheet: a control under the cut cannot be used, so raise
-   the sheet first — to the state after peek at least, further if that one
-   has no room for the control under the pinned head (a small phone at a
-   large text size). The browser's own reveal scrolled the body against the
+   the sheet first — to its own state (the one a tap returns to) at least,
+   further if that one has no room for the control under the pinned head (a
+   small phone at a large text size). The browser's own reveal scrolled the body against the
    peek strip before this fired; start over from the top and let the reveal,
    with the raised state's scroll-padding, do the least. */
 document.addEventListener('focusin', e => {
   const sheet = e.target.closest?.('.sheet');
   if (!sheet || !sheet.classList.contains('sheet--peek') || e.target.closest('.sheet__handle')) return;
-  const states = carddsSheetStates(sheet);
   const body = sheet.querySelector(':scope > .sheet__body');
   if (body) body.scrollTop = 0;
-  carddsSheetReveal(e.target, states[states.indexOf('peek') + 1] ?? states[states.length - 1]);
+  carddsSheetReveal(e.target, carddsSheetHome(sheet));
 });
 
 /* --kb: the height of the viewport an on-screen keyboard covers. iOS keeps
@@ -377,3 +394,23 @@ document.addEventListener('scroll', e => {
   clearTimeout(carddsScrollTimers.get(t));
   carddsScrollTimers.set(t, setTimeout(() => t.classList.remove('is-scrolling'), 700));
 }, true);
+
+/* ---- Modal (layover.css, .sheet-stage--ask): a click on any button in the
+   drawer closes the modal by playing its open animations backwards —
+   Animation.reverse() on every animation in the card, the same keyframes, no
+   closing keyframes to keep in step — then fires "cardds:modal" on the stage
+   (bubbles, detail.answer = the button's data-answer) so the app removes the
+   stage. Reduced motion (no animations): the event fires at once. */
+document.addEventListener('click', e => {
+  const btn = e.target.closest('.modal__drawer button');
+  if (!btn) return;
+  const stage = btn.closest('.sheet-stage--ask');
+  const modal = btn.closest('.modal');
+  if (!stage || !modal || stage.classList.contains('is-closing')) return;
+  stage.classList.add('is-closing');
+  const anims = modal.getAnimations({ subtree: true });
+  anims.forEach(a => a.reverse());
+  Promise.all(anims.map(a => a.finished)).then(() => {
+    stage.dispatchEvent(new CustomEvent('cardds:modal', { bubbles: true, detail: { answer: btn.dataset.answer ?? null } }));
+  });
+});

package/css/actions.css

@@ -218,35 +218,27 @@
 .action-bar .btn { flex: 1; box-shadow: var(--shadow-float); }
 .action-bar .icon-btn { width: var(--btn-h); height: var(--btn-h); box-shadow: var(--shadow-float); }
 
-/* ---- pager: previous / next at the two edges of the bar ----
+/* ---- pager: previous / next as two round icon buttons at the two edges ----
    For a sequence you can walk BOTH ways — a three-card feature intro, a step
    flow. Use it instead of the default pack whenever going back is as ordinary
    as going on: a wide CTA beside a small round icon reads as one action plus
    an afterthought, which is wrong when the two are peers.
 
-   Both buttons are the same shape and the same height, so neither wins by
-   being physically bigger; the fill alone leans forward. The bar carries the
-   buttons only: where you are is said by the .pager__at dots UNDER the card
+   The two are the same round shape and size (.icon-btn), one at each edge in
+   thumb reach from either side; the fill (--invert) alone leans forward. They
+   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. Keep the last step of a flow on the plain
-   .action-bar: a step that COMMITS deserves one wide button, not a pair.
+   "skip" link or nothing.
 
    <div class="action-bar action-bar--pager">
-     <button class="btn" disabled><svg class="icon icon--xs"><use href="icons.svg#arrow-left"/></svg>Back</button>
-     <button class="btn btn--primary">Next<svg class="icon icon--xs"><use href="icons.svg#arrow-right"/></svg></button>
-   </div>                                                                  */
+     <button class="icon-btn" aria-label="ย้อนกลับ" disabled>…</button>
+     <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
+   </div>   — or the same two in an .action-bar__tier--pager under a control  */
 .action-bar--pager { align-items: center; }
-/* equal share of the bar, and tighter than a lone CTA so two labels plus the
-   indicator still fit a 320px screen */
-.action-bar--pager > .btn {
-  flex: 1 1 0;
-  min-width: 0;
-  padding-inline: var(--sp-3);
-  gap: var(--sp-1);
-  white-space: nowrap;
-  overflow: hidden;
-}
 /* the page dots: under the card in a .screen__centre group; tight gaps */
 .pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
 .pager__at > * {
@@ -274,14 +266,7 @@
 .action-bar__tier > .btn { flex: 1; }
 :has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
 
-/* ---- round pager: previous / next as two round buttons at the two edges ----
-   The pager with nothing to say between its buttons — no dots, no label — as
-   two equal round icon buttons, one at each edge, in thumb reach from either
-   side. Rule 3 still holds: the step that commits goes back to one wide button.
-   <div class="action-bar action-bar--pager">
-     <button class="icon-btn" aria-label="ย้อนกลับ">…</button>
-     <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
-   </div>   — or the same two in an .action-bar__tier--pager under a control  */
+/* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
 
 /* .screen's default bottom padding is a constant; derive the reserve from the

package/css/base.css

@@ -3,6 +3,17 @@
    ============================================================ */
 
 *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+/* a control is a thing you press, not a thing you read: a long press never
+   raises the text-selection bar on it (Lh 2026-09-16). CONTROLS ONLY — words
+   in cards, rows and bodies stay selectable (an address, a code, a number
+   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--toggle, .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 {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
 
 /* the scale: everything is rem, so this one number resizes the whole system.
    100% = the user's text size (16px by default); narrow phones step to 15/16 so
@@ -49,6 +60,7 @@ button { font: inherit; cursor: pointer; }
   padding-inline: var(--screen-pad);
   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 */
 }
 .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>)
@@ -95,15 +107,20 @@ button { font: inherit; cursor: pointer; }
 .t-caps  { text-transform: uppercase; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 
-/* ---- section: frameless on-surface content + CTA (never a card) ---- */
-.section {
+/* ---- base content: words straight on the base, no card around them — an
+   overline, 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).
+   In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
+.base-content {
   display: grid;
   gap: var(--sp-3);
+  align-content: start;          /* a tall column never stretches the rows — the words hug the top */
   padding-block: var(--sp-4);
 }
-.section > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
-.section .cta-pack {
+.base-content > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
+.base-content .cta-pack {
   display: flex;
+  align-items: start;            /* buttons keep their own height, never the row's */
   gap: var(--sp-2);
   margin-top: var(--sp-2);
   flex-wrap: wrap;
@@ -116,12 +133,9 @@ button { font: inherit; cursor: pointer; }
   text-align: center;
   gap: var(--sp-2);
   padding: var(--sp-12) var(--sp-6);
-  color: var(--on-surface-muted);
+  color: 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 > :is(h1, h2, h3) { color: var(--on-surface); } /* the heading in full ink, the words muted */
 .empty-state__action { margin-top: var(--sp-2); }
-/* inside a card (a section's "nothing yet"): the card's ink, the way .t-muted and .row__meta follow it */
-.card .empty-state { color: var(--card-muted); padding-block: var(--sp-6); }
-.card .empty-state > :is(h1, h2, h3) { color: var(--card-ink); }
+/* inside a card (a section's "nothing yet"): the card's ink */
+.card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
 .card--3 .empty-state { color: inherit; }
-.card--3 .empty-state > :not(:is(h1, h2, h3)) { opacity: 0.7; }

package/css/layover.css

@@ -1,48 +1,93 @@
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
-   ask drawer · popover menu · expanding banner · float bar ·
+   Modal (ask) · popover menu · expanding banner · float bar ·
    callout · swipe deck. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask drawer: the content card lifts, a dark drawer asks ----
+/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
    <div class="sheet-stage sheet-stage--ask">
-     <article class="card lift">…page content…</article>
-     <div class="drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
-       <div class="btn-trio"><button class="icon-btn">×</button><span class="btn-trio__dots"></span><button class="icon-btn icon-btn--invert">?</button><span class="btn-trio__dots"></span><button class="icon-btn">✓</button></div>
-     </div></div> */
+     <article class="card modal">
+       <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
+       <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
+         <div class="btn-trio">…</div>
+       </div>
+     </article>
+   </div>
+   .modal is the card — no border (the shadow is its edge on the scrim);
+   .modal__lift the light part that holds the thing being asked about (it
+   scrolls when tall); .modal__drawer the dark end that asks. The ground is
+   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   the stage appears, and the same two backwards when it closes:
+     1. the card drops in from above the stage to the screen's centre — its
+        drawer still inside it, height 0: nothing of the ask shows yet
+     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 stage centres it; 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.
+   Reduced motion: the finished state, no beats; closing fires at once. */
 .sheet-stage--ask {
   --drawer-h: 14rem;
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  display: grid;
+  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
+  padding-inline: var(--screen-pad);
 }
-.lift {
-  position: absolute;
-  inset: 0 0 var(--drawer-h) 0;
-  border: 0;
-  border-radius: 0 0 var(--r-card) var(--r-card);
-  overflow: hidden;
-  overscroll-behavior: contain;
+.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
+.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
+.modal {
+  position: relative;
+  z-index: 1;                     /* over the scrim */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  padding: 0;                     /* the parts pad themselves */
+  border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: clip;
   box-shadow: var(--shadow-sheet);
+}
+.modal__lift {
+  padding: var(--card-pad);
+  display: grid;
+  gap: var(--card-gap);
   align-content: start;
+  min-height: 0;
+  overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
+  overscroll-behavior: contain;
 }
-.drawer {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
+.modal__drawer {
   height: var(--drawer-h);
+  box-sizing: border-box;
   padding: var(--sp-5);
+  overflow: clip;
   display: grid;
   align-content: center;
   justify-items: center;
   gap: var(--sp-1);
   text-align: center;
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.drawer .t-caption { opacity: 0.7; }
-.drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
-.drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.modal__drawer .t-caption { opacity: 0.7; }
+.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) {
+  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
+  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
+  @keyframes modal-drop {
+    0%        { translate: 0 -100cqh; }   /* above the stage */
+    50%, 100% { translate: 0 0; }         /* 1. at the centre — and it stays: beat 2 is the drawer's */
+  }
+  @keyframes modal-open {
+    0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
+    100%      { height: var(--drawer-h); padding-block: var(--sp-5); } /* 2. out below, the lift up, together */
+  }
+}
+
 .btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
 .btn-trio__dots {
   width: var(--sp-5);

package/css/sheet.css

@@ -1,14 +1,14 @@
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
-   Three states: .sheet--peek · .sheet--half · .sheet--full
+   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
 
    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 —
    set once by inset: 0, never written again, never transitioned — and
    a state is nothing but how far that full card has slid up. Peek is
    a full sheet that slid down until only its handle and title show;
-   half is one that slid down by half of itself; full is one that has
-   not slid at all. The box clips whatever slid below its bottom edge,
+   half is one that slid down by half of itself; 3q (three quarters,
+   Lh 2026-09-16) by a quarter; full is one that has not slid at all. The box clips whatever slid below its bottom edge,
    so a sheet at any height is still a card: rounded top, a straight
    cut at the box's edge, its content scrolling inside.
 
@@ -28,7 +28,11 @@
    page. Many sheets stacked as the app's menu are the other system,
    .sheet-stack (stack.css): the same material, its own class and file.
 
-   <article class="card sheet sheet--half" data-sheet-states="peek half full">
+   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
+   A tap on the handle TOGGLES the sheet between its own state and peek
+   (Lh 2026-09-16) — never a step-by-step climb; a drag snaps to any of
+   the listed states, and the state it lands on becomes the one a tap
+   returns to.
      <button class="sheet__handle" type="button" aria-label="…"></button>
      <div class="card__head"><h2 class="t-h2">…</h2>…</div>
      <div class="sheet__body">…controls, or small content cards…</div>
@@ -51,6 +55,7 @@
      retune it: .my-sheet { --sheet-peek: … } */
   --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
   --sheet-half: 0.5;              /* a share of the sheet's own height */
+  --sheet-3q: 0.25;               /* three quarters showing: slid by a quarter */
   /* the sheet's own height, seen from inside it: the box it slides in is the
      size container (.step, .sheet-stage), so 100cqh is that box, less what
      the sheet gives up at its top (--_top) and bottom (--_lift). The sheet
@@ -81,6 +86,7 @@
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
+.sheet--3q { --_y: calc(var(--sheet-3q) * 100%); --_cover: calc(var(--sheet-3q) * var(--_box)); }
 .sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */