@usableapp/cardds 0.7.106 → 0.7.107

package/css/sheet.css

@@ -34,8 +34,8 @@
    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>
+     <div class="head"><h2 class="words__title t-h2">…</h2>…</div>
+     <div class="body">…controls, or small content cards…</div>
    </article>
    Written top-down: the handle, the title row (what peek shows), then
    the body. The handle and the head stay where they are at every
@@ -107,38 +107,9 @@
 .sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
-/* the body — everything under the head, the one thing in a sheet that
-   scrolls. Its scrollport runs to the card's side and bottom edges (reading
-   --card-pad, the way .bleed does) so content scrolls clear of the edge
-   rather than stopping inside the padding, and a .bleed strip inside it
-   still reaches the edges. The card's own grid rhythm continues inside. */
-.sheet__body {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  gap: var(--card-gap);
-  align-content: start;
-  margin-inline: calc(-1 * var(--card-pad));
-  padding-inline: var(--card-pad);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  /* the part of the sheet that slid under the box's bottom edge cannot be
-     seen, and the scroller has to know that: scroll-padding is exactly "the
-     obscured part of my scrollport", so a focused field, scrollIntoView and
-     anchor navigation all land a control in the visible part, never under
-     the cut. A length from the box's container units (--_box), since the
-     cut is a share of the SHEET's height, not of the body's. */
-  scroll-padding-bottom: var(--_cover);
-  /* …and its content has to be able to LEAVE that part: the same length as bottom padding, so the last row
-     scrolls up to the visible edge at half and 3q as it does at full — everything between the head and the
-     foot can be reached at any state (Lh, 2026-09-21). Padding, not a shorter box: nothing that shows moves
-     when the state changes, only how far the body scrolls; a child that fills the body (a composer) fills
-     the part that shows. */
-  padding-bottom: var(--_cover);
-}
 /* ---- the sheet's foot: the button that FINISHES the sheet, on the sheet (Lh, 2026-09-20) ----
    A screen with a sheet has no bar in front of it: the button that completes what the sheet asks — the
-   page's conclusion — is a .card__foot, the sheet's last child, on the sheet's own material. The sheet is
+   page's conclusion — is a .foot, the sheet's last child, on the sheet's own material. The sheet is
    full height at every state, so its real bottom edge is under the cut unless it stands at full. So the
    foot is a layer as tall as the sheet, its buttons at its bottom, slid UP by the very share the sheet
    slid down (--_y, + the drag): the two cancel, and the buttons stand on the box's bottom edge at half,
@@ -146,18 +117,11 @@
    length — so a box that resizes (the keyboard) moves them as one, with nothing to catch up. The layer
    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> */
+   One row, ≤ 2 buttons (parts.css). <div class="foot"><button class="btn btn--primary btn--block">…</button></div> */
 /* …and the link row under the button, when there is one (its line + the gap over it) */
-.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--sheet-foot-h, calc(var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)))) + var(--card-pad) + var(--_safe-b-open)); } /* --sheet-foot-h: the foot's rows as the Sheet measured them (a button grows with the text size) */
-.sheet > .card__foot > * { pointer-events: auto; }
-.sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
-/* that padding can be taller than the body's own box (a short box: a small phone with the keyboard up) and a
-   box is never smaller than its padding — so the pinned parts must not give way to it: the body runs past
-   the sheet's clipped edge instead, where nothing shows anyway. At peek and away no part of the body shows. */
-.sheet > :not(.sheet__body) { flex-shrink: 0; }
-:is(.sheet--peek, .sheet--away) > .sheet__body { padding-bottom: 0; }
-.sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
-.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
+.sheet:has(> .foot--link) { --_foot: calc(var(--card-gap) + var(--sheet-foot-h, calc(var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)))) + var(--card-pad) + var(--_safe-b-open)); } /* --sheet-foot-h: the foot's rows as the Sheet measured them (a button grows with the text size) */
+/* the body's padding can be taller than its own box, so the pinned parts must not give way to it (parts.css) */
+.sheet > :not(.body) { flex-shrink: 0; }
 
 /* grab handle — first child of the sheet, but it does not take a row: it sits in the
    card's top padding, the same air as a stack sheet's four dots (stack.css --_grip-y),
@@ -183,22 +147,6 @@
   touch-action: none;
   cursor: grab;
 }
-/* paper: the head keeps the sheet's own colour, the content is the theme's paper, --action-bg, the ground of every field (Lh 2026-10-05: white; Lh 2026-10-20: the theme's, never a fixed white).
-   The body and the foot read as paper; the handle and the head stay on the card.
-   The flex gap under the head is outside the body, so it stays the sheet's tint.
-   The first field would sit on that colour seam. The paper's inset is --sp-6 (24px at
-   the default spacing), the body's own top padding, and only when the sheet is paper.
-   A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
-   inset: the stack's own gap under the head is the card's colour, so the row still needs this paper.
-   The paper takes the side of the controls' paper (--action-dark): on a dark sheet its words still turn to onlight. */
-.sheet--paper > .sheet__body {
-  --card-bg: var(--action-bg);
-  --dark: var(--action-dark);
-  background: var(--card-bg);
-  color: var(--card-ink);
-  padding-top: var(--sp-6);
-}
-.sheet--paper > .card__foot { --card-bg: var(--action-bg); --dark: var(--action-dark); --card-foot-ink: var(--card-ink); }
 .sheet__handle--dots {
   --_dot: var(--sp-1);
   --_step: calc(var(--_dot) * 2.5);
@@ -238,42 +186,6 @@
 .sheet__handle:focus-visible { outline: var(--focus); outline-offset: var(--sp-2); }
 .sheet.is-dragging .sheet__handle { cursor: grabbing; }
 
-/* the head — a title row at least --tap tall, either kind, so the peek strip
-   (--sheet-peek) is the same for every sheet:
-   - in a step it is a plain card head (card.css): the heading left, the
-     contextual thing at the far right
-   - .sheet__head is the stage sheet's three-column head: a round button,
-     the centred title and sub, a round button
-   - a label .row with its .check / .toggle may be the head when the sheet's
-     whole ask is that switch: peek shows it (a row is --tap tall plus its own
-     padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
-.sheet > .card__head { --card-head-min-h: var(--sheet-head-h); }
-/* a sheet's title is ONE line, always (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน" wrapped to two lines at 390px) — the
-   thing at its end keeps its place beside it; a caption still takes its own row. A title too long for the line RUNS sideways
-   like a song title (Lh 2026-10-03, as the StackSheet's — it was cut with …, and the end of it could never be read): the Sheet
-   measures --_over, the width it overflows by, and sets .is-long; one way — it waits, runs to its end, waits, and starts again
-   from the first letter. The move is text-indent: the heading is the app's own element, there is no inner box to slide.
-   Before the Sheet has measured, and where motion is off, it is cut with …. */
-.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { --card-head-wrap: nowrap; }
-.sheet > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; min-width: 0; } /* clip SIDEWAYS only: hidden cut the Thai tone marks over the line */
-.sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long {
-  text-overflow: clip;
-  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* --_run: from the overflow, 30px a second + the pauses */
-}
-@keyframes sheet-title-run { 0%, 20% { text-indent: 0; } 85%, 100% { text-indent: calc(-1 * var(--_over)); } }
-@media (prefers-reduced-motion: reduce) {
-  .sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long { animation: none; text-overflow: ellipsis; }
-}
-.sheet__head {
-  display: grid;
-  grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
-  align-items: center;
-  gap: var(--sp-3);
-  min-height: var(--tap);
-  text-align: center;
-}
-.sheet__title { font: var(--sheet-title-font, var(--type-h2)); letter-spacing: var(--track-h2); margin: 0; }
-.sheet__sub { font: var(--sheet-sub-font, var(--type-caption)); color: var(--sheet-sub-ink, var(--card-muted)); }
 
 /* ============================================================
    .sheet-stage — the overlay stage: a page-height box the sheet
@@ -420,11 +332,11 @@
 }
 
 /* ---- the map IN FLOW (Lh 2026-10-17): `.map--inline` — a box in a card, or the whole of a sheet's body ----
-   <div class="sheet__body"><div class="map map--inline"><div>…the engine…</div><label class="map-pick" …>…</label>…
+   <div class="body"><div class="map map--inline"><div>…the engine…</div><label class="map-pick" …>…</label>…
      <span class="map__ring" …></span></div></div>
    Choosing where to meet without leaving the sheet: the open sheet becomes the map and its head stays on top (a stage
    behind a half sheet covers the head and changes the look). No stage, so no band and no bar: the ring is at the centre
-   of the map's OWN box and the hint at its own top. In a card it is a rounded media box; as a SheetBody's only child it
+   of the map's OWN box and the hint at its own top. In a card it is a rounded media box; as a sheet's Body's only child it
    fills the body (the part above the foot), however far the sheet slid. */
 .map--inline {
   --_top: 0rem;
@@ -435,8 +347,8 @@
   overflow: hidden;
 }
 .map--bleed { margin-inline: calc(-1 * var(--card-pad, 0rem)); border-radius: 0; } /* edge to edge is a band, and a band has no corner; --map-radius is for the box in the inset */
-.sheet__body:has(> .map--inline:only-child) { display: flex; flex-direction: column; }
-.sheet__body > .map--inline:only-child { flex: 1 0 auto; }
+/* a map that is a body's only child fills it; the body turns to a column for it (parts.css) */
+.body > .map--inline:only-child { flex: 1 0 auto; }
 
 /* ---- map pick: a place on the map the member taps to choose it (Lh 2026-10-17) ----
    <label class="map-pick" style="top: 30%; left: 40%"><input type="radio" name="meet" value="library">
@@ -525,7 +437,6 @@
    the form's own spacing, from the top (never spread or centred: the keyboard needs the room under it); the next steps wait in a pile at the
    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; position: relative; }
 .sheet-steps__holder { position: absolute; top: 0; left: 0; width: var(--browser-text); height: var(--browser-text); padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: var(--browser-text); } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
 .sheet-steps__track { list-style: none; margin: 0; padding: 0 0 var(--sheet-steps-end, var(--sp-6)); flex: 1; /* room under the LAST step: scrolled to the end it never touches the foot's button (Lh 2026-09-28, #153) */ display: flex; flex-direction: column; }
@@ -561,7 +472,7 @@
 .sheet-step__check { margin-inline-start: auto; }
 /* a step's child that bleeds (ChipRow bleed, MapArea bleed, a Banner) reaches the SHEET's edges (Lh 2026-10-19, the ask sheet's
    จุดนัด step: the map edge to edge under the step's buttons). The fold's clip is the step body's box, which sat inside the sheet's
-   inset, so the body takes that inset back and pads by it again, the way .sheet__body does; the inner keeps its own box and its own
+   inset, so the body takes that inset back and pads by it again, the way a sheet's .body does; the inner keeps its own box and its own
    inset (--sheet-step-inner-pad-x: the inset BEYOND the sheet's) and publishes the whole, the sheet's plus its own, as --card-pad,
    so a .bleed cancels it exactly. The sum is computed on the body, before the inner's --card-pad takes over; outside a card there is
    no --card-pad and the step keeps its own inset (0px, as .bleed reads it). The inner reads the knob itself, not the sum: a theme's
@@ -578,45 +489,7 @@
 /* ==== the step bar answers a press, as PRESS in actions.css answers every other control (#62: a block is written in its own file) ==== */
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 
-/* ==== a body that holds only an EmptyState stands it at --empty-state-at of its room, as a Step does (step.css) (#62: a block is written in its own file) ==== */
-.sheet__body:has(> .empty-state:only-child) { display: flex; flex-direction: column; gap: 0; }
-.sheet__body:has(> .empty-state:only-child)::before { content: ""; flex: calc(var(--empty-state-at, 0) * 5) 1 0; }
-.sheet__body:has(> .empty-state:only-child)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0) * 5) 1 0; }
 
-/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
-/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
-   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
-   card's colour, so without the paper's inset the first row sits on that seam. */
-.sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0rem); transition: padding-top var(--motion-sheet) var(--ease); }
-/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the paper starts
-   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
-   stack's step and the body's own rows read it. */
-.sheet-stack > .card.sheet--paper > .sheet__body {
-  margin-top: calc(var(--sp-3) - var(--card-gap));
-  padding-top: calc(var(--sp-6) + var(--_refresh, 0rem));
-  transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
-}
-/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
-.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
-/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
-   cover the corners, and a paper body showed there beside the head. Clear, the card's own colour
-   shows in that pocket. Open, the body is paper, and the first row sits --sp-6 down, the same paper
-   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
-   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
-   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
-   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
-   at the moment the sheet stops. Rising, the body is paper at once. */
-.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-  background-color: transparent;
-  transition:
-    padding-top var(--motion-sheet) var(--ease),
-    background-color var(--motion-quick) var(--ease) calc(var(--stagger, 0) * var(--motion-stagger) + var(--motion-sheet) - var(--motion-quick));
-}
-@media (prefers-reduced-motion: reduce) { .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-    transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
-  } }
 /* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
 
-/* ---- where it sits in what stack.css draws: a body pulled to refresh holds still (docs/reference.md rule 15) ---- */
-.sheet-stack > .card > .sheet__body.is-refreshing { transition: none; }

package/css/stack.css

@@ -18,7 +18,7 @@
 
    <div class="sheet-stack sheet-stack--tap">   (drop --tap for a static stack)
      <article class="card card--2">
-       <div class="card__head">
+       <div class="head">
          <button class="icon-btn icon-btn--sm sheet-stack__back" aria-label="Back">…</button>
          <h2 class="t-h2 t-caps">Shopping</h2>
          <span class="icon-row">…</span>              (optional trailing icons)
@@ -73,7 +73,7 @@
 
 /* NOT a skeleton head: a peek is one line at its own size, and the display
    stack deliberately runs a second line under the next card. */
-.sheet-stack > .card > .card__head :is(h1, h2, h3) {
+.sheet-stack > .card > .head :is(h1, h2, h3) {
   font-size: var(--fs-h1);
   line-height: var(--lh-solid);
   letter-spacing: var(--track-h2);
@@ -85,7 +85,7 @@
 /* display stack: the giant title IS the peek — line one shows, line two is
    clipped by the next card (recents / library lists) */
 .sheet-stack--display { --stack-step: calc(var(--tap-base) * 13 / 6); }
-.sheet-stack--display > .card > .card__head :is(h1, h2, h3) {
+.sheet-stack--display > .card > .head :is(h1, h2, h3) {
   font: var(--type-display);
   letter-spacing: var(--track-display);
   /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
@@ -99,7 +99,7 @@
    NOT: there, every card is full height and full content always, and a
    peek is simply the strip of it the next card doesn't cover — the way a
    card in a real deck is never a shorter card, just a mostly hidden one. */
-.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.card__head) { display: none; }
+.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.head) { display: none; }
 
 /* ---- .sheet-stack--tap — tap a peeked sheet open; a back button returns it. How its sheets move (one property: translate) is
    told over their rules, where they sit, in card.css. ---- */
@@ -247,7 +247,7 @@
    slide read as a second thing moving while the sheet itself moved; Lh,
    2026-09-11). Only the sheet travels; the button appears where it is. */
 /* a sheet's OWN head and back: the card is the stack's child or, with one host wrapper, the wrapper's. A card standing in the sheet's body wears its own head */
-:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head > .sheet-stack__back {
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .head > .sheet-stack__back {
   position: absolute;
   left: 0;
   top: 50%;
@@ -262,35 +262,24 @@
   min-height: 0;
   padding: 0;
 }
-.sheet-stack--tap > .card.is-open > .card__head > .sheet-stack__back {
+.sheet-stack--tap > .card.is-open > .head > .sheet-stack__back {
   opacity: 1;
   visibility: visible;
 }
 
-.sheet-stack > .card:has(> .sheet__body) > :not(.sheet__body) { flex-shrink: 0; }
-.sheet-stack > .card > .sheet__body { --_cover: 0rem; } /* nothing slid under here: the stack's sheet is always whole */
-/* a paper stack's foot is paper (card.css paints it): its ink reads the action's side */
-.sheet-stack > .card.sheet--paper > .card__foot { --dark: var(--action-dark); }
+.sheet-stack > .card:has(> .body) > :not(.body) { flex-shrink: 0; }
 
 /* ---- StackSheet's tabs (Lh 2026-09-23): the head's end is a row of small icon buttons, the sheet's pages — the chosen one
    filled (.icon-btn--invert) only while the sheet is open; a count is a small circle over the icon's top right corner ---- */
 .stack-sheet__tabs { display: flex; gap: var(--stack-sheet-tabs-gap, var(--sp-2)); flex: none; } /* room between the tabs: with none, the chosen tab's disc touched its neighbour's (Lh 2026-09-24) */
-/* the head is ONE line, always (Lh 2026-09-24): the tabs keep their size, the TITLE gives — it never wraps, it runs sideways
-   (StackSheet measures --_over, the width it overflows by, and sets .is-long), one way: it waits, runs to the end, waits, and starts again from the first letter — like a song title */
-.stack-sheet__title {
-  flex: 1; min-width: 0; overflow-x: clip; overflow-y: visible; white-space: nowrap; overflow-wrap: normal; /* clip SIDEWAYS only:
-     hidden clipped the Thai tone marks above a line-height-1 line (เพื่อน lost its ไม้เอก — Lh 2026-09-24) */
-  translate: 0 var(--stack-sheet-title-shift, -0.1em); /* FC Pride's line box carries more room above its letters than below: the
-     letters sat ~0.1em under the middle of the back disc and the tabs — lifted onto it (Lh 2026-09-24) */
-}
+/* the title's run (the title's own rules are parts.css's, in a stack sheet) */
 .stack-sheet__run { display: inline-block; }
-.stack-sheet__title.is-long .stack-sheet__run {
+.stack-sheet > .head > .words__title.is-long > .stack-sheet__run {
   animation: stack-sheet-run var(--stack-sheet-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* ONE way: start → end, then back to the start at once (Lh 2026-09-24) */ /* --_run: from the overflow, 30px a second + the pauses */
 }
 @keyframes stack-sheet-run { 0%, 20% { translate: 0; } 85%, 100% { translate: calc(-1 * var(--_over)); } }
 @media (prefers-reduced-motion: reduce) {
-  .stack-sheet__title.is-long .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
-  .stack-sheet__title.is-long { text-overflow: ellipsis; }
+  .stack-sheet > .head > .words__title.is-long > .stack-sheet__run { animation: none; display: inline; } /* inline: an ellipsis cannot cut an inline-block */
   .stack-sheet__tab { transition: none; } /* the disc is simply there while open, and gone while closed */
 }
 .stack-sheet__tab {
@@ -324,23 +313,23 @@
 /* a CLOSED sheet shows no chosen disc either (Lh 2026-10-04): arriving on the home, every tab of every sheet is the icon
    alone. The fill fades in with the rise — the tab that was pressed, or the one the sheet opens on — and fades out as the
    sheet folds. The class stays (which page it is); only the paint waits for .is-open. */
-.sheet-stack--tap > .card:not(.is-open) > .card__head .stack-sheet__tab.icon-btn--invert {
+.sheet-stack--tap > .card:not(.is-open) > .head .stack-sheet__tab.icon-btn--invert {
   border-color: transparent; background-color: transparent; box-shadow: none; color: inherit;
 }
 /* the last tab's ICON lines up with the inset, not its button's edge: an unchosen tab shows the glyph only, so the button's own
    margin around it reaches into the card's padding — and an open head (back · title · three tabs) keeps one line (Lh 2026-09-23) */
-.card__head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
+.head > .stack-sheet__tabs { margin-right: calc(-1 * var(--sp-2)); }
 
 /* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
    while open; the last tab then sits on the inset (no reach into the padding) */
 .sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
-.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
+.sheet-stack--tap > .card.is-open > .head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
 .sheet-stack--tap .sheet-stack__back > .icon { --icon-size: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--_back-size) - var(--tap-sm)) / 2); }
 
 /* the open sheet's title folds it (SheetStack.tsx): it says so to a pointer */
-.sheet-stack--tap > .card.is-open > .card__head > :is(h1, h2, h3) { cursor: pointer; }
-.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) */
+.sheet-stack--tap > .card.is-open > .head > :is(h1, h2, h3) { cursor: pointer; }
+.sheet-stack--tap > .card.is-open > :not(.head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */
 
 /* ---- where it sits in what base.css draws (docs/reference.md rule 15) ---- */
 /* min-height: 0 — a flex item's floor is its content, and the stack's content

package/css/stamp.css

@@ -277,7 +277,7 @@
 }
 
 /* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
-.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
+.head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 /* ---- where it sits in what people.css draws (docs/reference.md rule 15) ---- */
 /* a stamp in the stack is the stamp's small size (--stamp-sm-size: one rule in stamp.css, 48 × 60), lapped like the heads. Measured 2026-10-11 in a Row's
    lead with a title, a meta line and an end button: at 375 the meta line breaks in two, accepted by Lh (a lap of 16 would hold it; the lap stays 8)

package/css/step.css

@@ -3,12 +3,12 @@
    What the member reads (words on the base — not a card, Lh 2026-09-16), what the member does when the
    step asks for it (a sheet, sheet.css). The move: a page of words has
    an .action-bar (actions.css) OUTSIDE the step, below it — the base's;
-   a step with a sheet has none: the sheet's own .card__foot finishes it
+   a step with a sheet has none: the sheet's own .foot finishes it
    (see "LAYERS" below).
 
    <section class="step">
      <section class="page">…the words…</section>               ← first
-     <article class="card sheet sheet--half">…the controls… <div class="card__foot">…</div></article>  ← last, optional
+     <article class="card sheet sheet--half">…the controls… <div class="foot">…</div></article>  ← last, optional
    </section>
    <div class="action-bar">…</div>   ← the screen's last child, only when there is no sheet
 
@@ -60,7 +60,7 @@
 .screen > .step:first-child, .screen--lead > .step { --_lead: var(--screen-lead, 15cqh); } /* top="lead" says it; a Step first says it too */
 
 /* 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
+   move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .foot
    (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
    own screens are composed (the guide); the framework does not police it — a component never changes
    because another one is there. */

package/css/theme.template.css

@@ -49,7 +49,7 @@
      --ink-onlight --ink-onlight-muted  --ink-ondark --ink-ondark-muted
      ---- sides: each ground says only whether it is dark (1) or light (0); its words and glyphs follow ----
      --surface-dark (0)  --card-1-dark (0) --card-2-dark (0) --card-3-dark (1) --card-4-dark (0) --card-5-dark (1)
-     --accent-dark (1, the brand fill)  --action-dark (0, the paper of buttons, chips, fields)  --neg-dark (1, a falling Delta)
+     --accent-dark (1, the brand fill)  --action-dark (0, the paper of buttons, chips, fields)  --neg-dark (1, a falling number)
      A dark mode is these sides turned to 1 with their fills darkened, in a [data-mode="dark"] block of your own: no rule per piece.
      A surface of your own: give it a fill and `--dark: 1` (or 0), and its --card-ink / --card-muted that side's set. */
 

package/css/tokens.css

@@ -248,7 +248,7 @@
   --card-1-dark: 0;  --card-2-dark: 0;  --card-3-dark: 1;  --card-4-dark: 0;  --card-5-dark: 1;
   --accent-dark: 1;   /* the brand fill: a primary button, a picked chip, a picked day */
   --action-dark: 0;   /* the paper fill of neutral controls: a button, a chip, a field, a plain tile */
-  --neg-dark: 1;      /* a falling Delta's fill */
+  --neg-dark: 1;      /* the fill of a falling number (--neg) */
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
   --surface: var(--color-surface, #f2f2f0);
@@ -354,11 +354,11 @@
    (card.css, media.css…) and is named in this list, which gives it the inks every piece on it reads: --card-ink (words, icons,
    marks, dots: currentColor), --card-muted (secondary words), the four signals, --on-accent (the ink on the accent fill, whose
    side is --accent-dark) and --accent-ink (the brand as a glyph). A piece with no fill of its own reads only these, so a dark
-   surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
+   surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (an upload
    tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
-  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > :is(.sheet__body, .card__foot),
-  .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.card__head, .card__foot), .card--bands > .card__face > :is(.card__head, .card__foot)) {
+  .float-bar__pill, .snackbar__body, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > :is(.body, .foot),
+  .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.head, .foot), .card--bands > .card__face > :is(.head, .foot)) {
   --card-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--ink-onlight));
   --card-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--dark) * 100%), var(--ink-onlight-muted));
   --on-accent: color-mix(in srgb, var(--ink-ondark) calc(var(--accent-dark) * 100%), var(--ink-onlight));

package/dist/actions/BarNote.d.ts

@@ -5,7 +5,7 @@ export interface BarNoteProps extends ComponentProps<'div'> {
  * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
- * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
- * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
+ * A member of the BOTTOM: a `Foot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
+ * it (Foot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
 export declare function BarNote({ className, children, ...rest }: BarNoteProps): import("react").JSX.Element;

package/dist/actions/BarNote.js

@@ -4,8 +4,8 @@ import { cx } from '../cx.js';
  * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
- * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
- * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
+ * A member of the BOTTOM: a `Foot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
+ * it (Foot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
 export function BarNote({ className, children, ...rest }) {
     return _jsx("div", { role: "note", className: cx('action-note', className), ...rest, children: _jsx("span", { className: "action-note__words", children: children }) });

package/dist/actions/Btn.d.ts

@@ -7,7 +7,7 @@ export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
     /** full width */
     block?: boolean;
     /** a form's button: sized to its words with wide side padding, centred on its own row — it reads as part of the form above it,
-     *  not a page CTA (Lh 2026-09-25). In a card's foot (`CardFoot`, `Card foot`, `FeedCard foot`) it keeps that size instead of
+     *  not a page CTA (Lh 2026-09-25). In a card's foot (`Foot`, `FeedCard foot`) it keeps that size instead of
      *  filling the row. Replaces the native `form` attribute (a button outside its <form> — not a cardds pattern). */
     form?: boolean;
     /** the one giant call to action in a tinted card ("Taxi!") */
@@ -17,7 +17,7 @@ export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
 }
 /**
  * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
- * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
+ * In a Foot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
 export declare function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }: BtnProps): import("react").DetailedReactHTMLElement<{
     translate?: "yes" | "no" | undefined | undefined;

package/dist/actions/Btn.js

@@ -2,7 +2,7 @@ import { createElement } from 'react';
 import { cx } from '../cx.js';
 /**
  * Btn — the pill button (48px+ tall). Plain by default; `primary` for the one move; `quiet` on tinted cards.
- * In a CardFoot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
+ * In a Foot up to four share the line; in an ActionBar it takes the width. An Icon xs may lead or trail the label.
  */
 export function Btn({ primary, quiet, block, form, xl, href, className, type, ...rest }) {
     return createElement(href ? 'a' : 'button', {

package/dist/actions/BtnRow.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
 export interface BtnRowProps extends ComponentProps<'div'> {
 }
-/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
+/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use Foot instead. */
 export declare function BtnRow({ className, ...rest }: BtnRowProps): import("react").JSX.Element;

package/dist/actions/BtnRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use CardFoot instead. */
+/** BtnRow — twin CTAs inside a card's content sharing the width (Log time · Offer). In a foot use Foot instead. */
 export function BtnRow({ className, ...rest }) {
     return _jsx("div", { className: cx('btn-row', className), ...rest });
 }

package/dist/actions/IconBtn.d.ts

@@ -20,7 +20,7 @@ export interface IconBtnProps extends ComponentProps<'button'> {
     href?: string;
 }
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
- *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<Foot round>`); a short WORD may stand in one
  *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */

package/dist/actions/IconBtn.js

@@ -4,7 +4,7 @@ import { cx } from '../cx.js';
 import { warnOnce } from '../state.js';
 import { Icon } from '../type/Icon.js';
 /** IconBtn — the round icon button: `sm` in heads and bars, full size in rows and composers, `invert` for the one filled move, `primary` for the
- *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<CardFoot round>`); a short WORD may stand in one
+ *  primary fill. `size="lg"` / `"xl"` are the big rounds (the foot of a few round answers: `<Foot round>`); a short WORD may stand in one
  *  as its child (`<IconBtn size="xl" primary label="ช่วยเหลือ">ช่วย</IconBtn>`): it grows with the member's text size up to the circle's share.
  *  It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
  *  wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */