@usableapp/cardds 0.7.106 → 0.7.107

package/css/finish.css

@@ -82,7 +82,7 @@
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
 }
 /* a peeked stack tab is the icon alone: no sheen and no shadow until its sheet is open (the fill fades with the sheet) */
-[data-finish="lit"] .sheet-stack--tap > .card:not(.is-open) > .card__head .stack-sheet__tab {
+[data-finish="lit"] .sheet-stack--tap > .card:not(.is-open) > .head .stack-sheet__tab {
   background-image: none;
   box-shadow: none;
 }
@@ -121,7 +121,7 @@
 }
 /* a dark card (the brand tone, a cover): multiply would only blacken it, so the grain lightens, fainter */
 [data-finish="print"] :is(.card--3, .card--cover)::after { mix-blend-mode: screen; opacity: calc(var(--print-grain, 0.32) * 0.56); }
-[data-finish="print"] .card:not(.card--row, .card--cover, .feed-card--small, .sheet-stack > *, .sheet-stack > :not(.sheet-stack__base) > *) > .card__head {
+[data-finish="print"] .card:not(.card--row, .card--cover, .feed-card--small, .sheet-stack > *, .sheet-stack > :not(.sheet-stack__base) > *) > .head {
   padding-bottom: var(--sp-2);
   border-bottom: var(--rule-w) dotted color-mix(in srgb, currentColor 45%, transparent);
 }
@@ -132,7 +132,7 @@
 [data-finish="print"] .chip { border-color: var(--chip-border, var(--_ink)); } /* a holder that clears a chip's edge (a note's chips) clears it in print too */
 [data-finish="print"] .btn--primary { box-shadow: 0.125rem 0.125rem 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
 [data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 0.125rem 0.125rem; }
-[data-finish="print"] .card__thumb { border-style: dashed; }
+[data-finish="print"] .card--row > .lead { border-style: dashed; }
 
 /* ============================================================
    sticker — a die-cut sticker on a sheet: --sticker-cut of white paper left round the print, a short hard
@@ -167,4 +167,4 @@
 [data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 0.15625rem) solid currentColor; box-shadow: 0.1875rem 0.1875rem 0 0 currentColor; }
 [data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 0.1875rem 0.1875rem 0 0 var(--on-surface); }
 [data-finish="ink"] .toggle { box-shadow: 0.125rem 0.125rem 0 0 var(--on-surface); }
-[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 0.15625rem); }
+[data-finish="ink"] .card--row > .lead { border-width: var(--ink-w, 0.15625rem); }

package/css/journey.css

@@ -74,7 +74,7 @@
 }
 
 /* where it sits in a head that leads with the date (card.css): the first cell, as tall as the chips beside it however many rows, so no cap */
-.card__head:has(> .tile-badge:first-child + .chip-row) > .tile-badge--stretch:first-child { grid-column: 1; grid-row: 1; max-block-size: none; }
+.head:has(> .tile-badge:first-child + .chip-row) > .tile-badge--stretch:first-child { grid-column: 1; grid-row: 1; max-block-size: none; }
 
 /* corner badge: pin a tile badge on media (rating, price) — .card__media is relative */
 .tile-badge--corner { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }

package/css/layover.css

@@ -8,14 +8,14 @@
 /* ---- the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
    <div class="sheet-stage sheet-stage--dim">   (dim = the page under a scrim; a Modal on a clean ground is the stage without it — Lh 2026-09-22, `--ask` retired: the stage does the ground, the modal centres itself)
      <article class="card modal">
-       <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
+       <div class="body">…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
+   .body the light part that holds the thing being asked about (it
    scrolls when tall); .modal__drawer the dark end that asks. The ground is
    whatever the stage shows (dim it or not). Two beats (2 × --motion-sheet) when
    the stage appears, and the same two backwards when it closes:
@@ -47,16 +47,6 @@
   overflow: clip;
   box-shadow: var(--modal-shadow, var(--shadow-sheet));
 }
-.modal__lift {
-  padding: var(--card-pad);
-  display: grid;
-  gap: var(--card-gap);
-  align-content: start;
-  flex: 0 1 auto;
-  min-height: 0;
-  overflow-y: auto;               /* tall content scrolls inside; the drawer stays */
-  overscroll-behavior: contain;
-}
 .modal__drawer {
   flex-shrink: 0;
   height: var(--drawer-h);
@@ -81,8 +71,8 @@
   --accent: var(--card-ink);
   --accent-dark: calc(1 - var(--dark));
 }
-/* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
-.modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
+/* the CONFIRM: a Modal with no Body: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
+.modal:not(:has(> .body)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { --t-caption-ink: var(--modal-drawer-caption-ink, var(--card-muted)); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
 /* the answers as WORD buttons (a BtnRow of Btns; Lh 2026-10-11): the row fills the ask with room over it and each button keeps its words on one

package/css/lists.css

@@ -1,13 +1,13 @@
 /* ============================================================
    cardds/lists.css — frameless rows and pairs INSIDE a card:
-   row (lead · body · end) · key-value rows · kv grid ·
-   timeline · legend · link
+   row (its parts, lead · words · end, are parts.css) · key-value
+   rows · kv grid · timeline · legend · link
    A row inside a card has no boundary of its own; .rows draws
    hairlines between rows. A row that IS a card = .card--row.
    ============================================================ */
 
 /* ---- row: leading visual · title + meta · trailing control ----
-   <div class="row"><span class="avatar">A</span><div class="row__body"><span class="row__title">Alice Kau</span><span class="row__meta">Owner</span></div><button class="icon-btn icon-btn--sm">›</button></div> */
+   <div class="row"><span class="avatar">A</span><span class="words"><span class="words__title">Alice Kau</span><span class="words__meta">Owner</span></span><button class="icon-btn icon-btn--sm">›</button></div> */
 .row {
   display: flex;
   align-items: center;
@@ -20,21 +20,7 @@
 /* no padding on a row (Lh 2026-09-16): padding is for room, not for spreading.
    Space BETWEEN rows is .rows' gap; a lone row as card content takes the card's
    gap. (.row--flush, which zeroed the old padding, is gone — every row is flush.) */
-.row__lead {
-  width: var(--row-lead-size, var(--tap));
-  height: var(--row-lead-size, var(--tap));
-  flex: none;
-  border-radius: var(--row-lead-radius, var(--r-control));
-  border: var(--border-w) solid var(--row-lead-border, var(--outline));
-  display: grid;
-  place-items: center;
-}
-.row__body { flex: 1; min-width: 0; display: grid; gap: var(--row-body-gap, var(--sp-0)); }
-.row__title { font: var(--row-title-font, var(--type-title)); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
-.row__meta { font: var(--row-meta-font, var(--type-caption)); color: var(--row-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--row-meta-gap, var(--sp-1)); }
-.row__end { margin-left: auto; text-align: right; display: grid; gap: var(--row-end-gap, var(--sp-0)); justify-items: end; flex: none; }
 .row--lg { min-height: var(--row-lg-min-h, var(--fab)); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
-.row--lg .row__title { font: var(--fw-bold) var(--fs-lg) / var(--lh-h1) var(--font-display); }
 /* a row that EXPANDS (Lh 2026-09-22): the row is a <details>' summary, what it shows comes out under it —
    who liked a postcard, the rest of a list. An end chevron turns when open. The app owns the list.
    <details class="row-expand"><summary class="row">…lead · body · end…</summary><div class="row-expand__more">…</div></details> */
@@ -49,7 +35,6 @@
    pointer-events off here, aria-disabled from the markup. The tick is the .check's checked look
    at --tap-sm, but not an input: nothing to press. */
 .row--done { pointer-events: none; cursor: default; }
-.row--done .row__title { color: var(--card-muted); }
 .row__done {
   width: var(--row-done-size, var(--tap-sm));
   height: var(--row-done-size, var(--tap-sm));

package/css/media.css

@@ -43,17 +43,11 @@
   position: relative;
 }
 .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)); color: var(--tile-sub-ink, var(--card-muted)); } /* the muted words of the tile's ground; --dim faded the full ink to 2.4–3.4:1 */
 .tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
 .tile--on { background: var(--tile-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--tile-on-ink, var(--card-ink)); border-color: transparent; }
 /* .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 */
-/* a stat tile has no fill of its own, so it has no ink of its own: it takes the ink of what it stands on (currentColor on `color`
-   = the inherited colour), as the card's heading does. It kept the plain tile's --action-ink, dark on a dark card (timebank, tone 3,
-   Lh 2026-10-18). --tile-ink still overrides; a toned stat tile (.tile--N, below) takes its fill and its ink back */
-.tile--stat { --dark: inherit; color: var(--tile-ink, currentColor); 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;
@@ -72,7 +66,7 @@
 .tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--tile-3-ink, var(--card-ink)); border-color: transparent; }
 
 /* ---- wave: audio waveform stand-in for voice rows ----
-   <span class="wave"></span> — sits in a .row__body, fills the width */
+   <span class="wave"></span> — sits in a .words, fills the width */
 .wave {
   /* only WHOLE bars show (Lh 2026-09-23 — a clipped last bar read thinner): the columns are as many whole bar-widths as fit
      (auto-fill), spread edge to edge; bars that do not fit go to rows of no height, clipped away */

package/css/parts.css

@@ -0,0 +1,380 @@
+/* ============================================================
+   cardds/parts.css — the parts of a LINE: lead · words · end.
+   A Row (lists.css) and a row card (.card--row, card.css) are
+   both made of them, as their direct children in that order.
+   An outer governs a part only through the part's knobs or a
+   selector naming both, written here (Lh 2026-10-21).
+   <div class="row"><span class="lead"><svg class="icon"/></span><span class="words"><span class="words__title">Alice Kau</span><span class="words__meta">Owner</span></span><span class="end"><span class="t-title">+1.0 h</span><span class="t-caption t-muted">Tue</span></span></div>
+   ============================================================ */
+
+/* ---- lead: the outlined box at the start of a line ---- */
+.lead {
+  width: var(--lead-size, var(--tap));
+  height: var(--lead-size, var(--tap));
+  flex: none;
+  border-radius: var(--lead-radius, var(--r-control));
+  border: var(--border-w) solid var(--lead-border, var(--outline));
+  display: grid;
+  place-items: center;
+}
+/* in a row card or a feed card's head: the small box in the card's own ink, a number or an initial in label type */
+:is(.card--row, .feed-card > .head) > .lead {
+  width: var(--lead-size, var(--tap-sm));
+  height: var(--lead-size, var(--tap-sm));
+  border-color: var(--lead-border, currentColor);
+  font: var(--lead-font, var(--type-label));
+}
+.feed-card > .head:has(> .t-caption) > .lead { grid-row: span 2; }
+
+/* ---- words: the title over its meta, taking the room between the lead and the end ---- */
+.words { flex: 1; display: grid; gap: var(--words-gap, var(--sp-0)); }
+.row > .words { min-width: 0; }
+.words__title { font: var(--words-title-font, var(--type-title)); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
+.words__meta { font: var(--words-meta-font, var(--type-caption)); color: var(--words-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--words-meta-gap, var(--sp-1)); }
+.row--lg > .words > .words__title { font: var(--fw-bold) var(--fs-lg) / var(--lh-h1) var(--font-display); }
+.row--done > .words > .words__title { color: var(--card-muted); }
+
+/* ---- end: the value over its caption, right-aligned at the end of a line ---- */
+.end { margin-left: auto; text-align: right; display: grid; gap: var(--end-gap, var(--sp-0)); justify-items: end; }
+.row > .end { flex: none; }
+
+/* ---- head: the first row of a card, a sheet and a stack sheet. A lead, the Words, chips, an end, as its direct children.
+   <div class="head"><h2 class="words__title t-h2">…</h2><span class="words__meta t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
+   The Words of a head are its title and its meta, flat in the head (no .words box round them): the title and the end share the first
+   row, the meta takes a row of its own under both (base.css `order: 1`). An outer governs a head through the head's knobs or a selector
+   naming both, written below under the outer's name (Lh 2026-10-21). ---- */
+/* header row: title left, floating action right — centered, since the
+   trailing control (chip/badge/icon-btn/link) is almost always taller than
+   a single line of title text; top-aligning them left the control visually
+   low against the title's optical center. A head with a genuinely tall,
+   multi-line title can opt back out with .head--top. */
+.head {
+  display: flex;
+  flex-wrap: var(--head-wrap, wrap); /* the caption takes a line of its own — no wrapper div */
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--head-col-gap, var(--sp-3));
+  row-gap: var(--head-row-gap, var(--sp-0));
+  min-height: var(--head-min-h, auto);
+}
+.head--top { align-items: flex-start; }
+
+/* ---- the card skeleton: head · content · foot ----
+   Every card is a head (the heading left, hints / actions / a more-menu at
+   the far right), its content, and an optional foot of action buttons.
+   The head's leading child — the heading, or the div that wraps heading and
+   caption — takes the room, so a heading with nothing at the far right runs
+   all the way across; whatever trails it hugs its own width. Only the
+   heading (or the div that wraps it) is that leading child: a control that
+   leads a custom head — a chip, an avatar, a tile badge — keeps its own
+   width, else the rule stretched a chip into a bar and an avatar into an
+   ellipse (two agents and the wallet demo caught it, 2026-09-10). */
+.head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
+
+/* Skeleton head — the heading in a card's OWN head, and only there.
+   The heading wraps, no squeeze, up to three lines and cut there with an
+   ellipsis (Lh 2026-10-21: "มันควรจะ max สามบรรทัด" — a request's title ran to
+   four lines on a phone; reverses 2026-09-16's "no clamp"). The count is the knob
+   --head-title-lines. The group that holds heading ·
+   caption is the head's own wrapping row (above) — no wrapper element, no
+   height, only the row gap. */
+.head :is(h1, h2, h3) {
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--head-title-lines, 3);
+  line-clamp: var(--head-title-lines, 3);
+  overflow: hidden;
+  padding-block-start: var(--_mark-room); /* a stacked Thai mark rises over the first line's box: room inside the clip, given back outside */
+  margin-block-start: calc(-1 * var(--_mark-room));
+  --_mark-room: 0.2em;
+}
+
+.head > .words__title { font: var(--words-title-font, var(--_type, var(--type-h2))); } /* --_type: the level's own face, set by .t-h1 and .t-display (base.css) */
+.page > .head > h1.words__title { font-size: var(--fs-h2); } /* the page's ONE heading on the base (a screen with no TopBar) reads at the card heading's size — h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
+.head > .words__meta { display: block; align-items: initial; gap: initial; } /* a head's caption is text; the flex line with a Dot is a row's */
+
+/* a stage sheet's head (`Head centre`): a round button · the centred title over its meta · a round button. The title and the meta
+   stand in the middle column, the buttons span both rows; the 1fr rows keep the pair centred when a button is the taller */
+.head--centre {
+  display: grid;
+  grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
+  grid-template-rows: 1fr auto auto 1fr;
+  align-items: center;
+  column-gap: var(--sp-3);
+  row-gap: 0;
+  min-height: var(--tap);
+  text-align: center;
+}
+.head--centre > .words__title { grid-area: 2 / 2; }
+.head--centre > .words__meta { grid-area: 3 / 2; line-height: calc(var(--lh-body) * var(--fs-base)); } /* the meta stands on the body's line, as the sub did, an inline span in a line of the head's own type */
+.head--centre > :first-child:not(.words__title) { grid-area: 1 / 1 / -1 / 2; }
+.head--centre > :last-child:not(.words__title, .words__meta) { grid-area: 1 / 3 / -1 / 4; }
+
+/* a Stamp in a card's head (a `Stamp` as the head's end): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
+   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
+   stamp.css); the head only places it.
+   <div class="head"><h2 class="words__title t-h2">…</h2><span class="words__meta t-caption t-muted">…</span><span class="stamp">…</span></div> */
+.head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
+.head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
+
+/* a head that LEADS with a date (Lh 2026-10-21, timebank's request card): a `Head` whose first child is a JourneyBadge and whose second is a
+   ChipRow. The date stands at the left and the chips beside it, the two as tall as each other; the heading and its caption take the whole
+   width under them, so the heading sits right over the words of the middle. The date is always as tall as the chips. The gap under the date row is --head-lead-gap; the date and the chips place themselves (journey.css, actions.css).
+   <div class="head"><span class="tile-badge tile-badge--stretch">…</span><div class="chip-row">…</div><div><h2 class="words__title t-h1">…</h2>…</div></div> */
+.head:has(> .tile-badge:first-child + .chip-row) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  row-gap: var(--head-lead-gap, var(--sp-3));
+}
+.head:has(> .tile-badge:first-child + .chip-row) > :nth-child(n + 3) { grid-column: 1 / -1; }
+
+/* in a card with paper bands: the head and the foot are paper bands edge to edge, one look */
+:is(.card--bands, .card--bands > .card__face) > :is(.head, .foot) {
+  --card-bg: var(--card-1-bg);
+  --dark: var(--card-1-dark);
+  background: var(--card-bg);
+  color: var(--card-ink);
+  margin-inline: calc(-1 * var(--card-pad));
+  padding-inline: var(--card-pad);
+}
+:is(.card--bands, .card--bands > .card__face) > .head { margin-top: calc(-1 * var(--card-pad)); padding-block: var(--card-pad); }
+:is(.card--bands, .card--bands > .card__face) > .head { padding-block-end: var(--card-band-seam, var(--sp-2)); }
+/* the seam: the heading and the words under it read as ONE paragraph that changes colour at the band's edge (Lh 2026-10-21), so the room on
+   each side of the head band's lower edge is --card-band-seam, not the card's padding and gap */
+:is(.card--bands, .card--bands > .card__face) > .head + * { margin-block-start: calc(var(--card-band-seam, var(--sp-2)) - var(--card-gap)); }
+
+/* in a sheet stack */
+/* stack headers: uniform — [back?] title left, icons right, one height,
+   same gap to content on every card */
+.sheet-stack > .card > .head {
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(--tap);
+}
+.sheet-stack--display > .card > .head { align-items: start; min-height: 0; }
+.sheet-stack--tap > .card > .head { touch-action: none; }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .head {
+  position: relative;
+  padding-left: 0;
+  transition: padding-left var(--motion-sheet) var(--ease);
+}
+.stack-sheet > .head { flex-wrap: nowrap; }
+.sheet-stack--tap > .card.is-open > .head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) var(--ease); }
+.sheet-stack--tap > .card.is-open > .head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+/* a stacked sheet is a control until it is open: its head is not text to select */
+.sheet-stack > .card > .head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+
+/* in a sheet */
+/* 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
+   - `Head centre` is the stage sheet's three-column head: a round button,
+     the centred title and meta, 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 > .head { --head-min-h: var(--sheet-head-h); }
+.sheet > .head:not(:has(> :is(.t-caption, .t-body))) { --head-wrap: nowrap; }
+
+/* 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 > .head > :is(.words__title, :is(h1, h2, h3):first-child) { 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 > .head > :is(.words__title, :is(h1, h2, h3):first-child).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 > .head > :is(.words__title, :is(h1, h2, h3):first-child).is-long { animation: none; text-overflow: ellipsis; }
+}
+
+/* in a stack sheet: 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; the run itself is stack.css's), one way: it waits, runs to the end,
+   waits, and starts again from the first letter — like a song title. The head's line clamp (above) already cuts it, so no overflow is set here */
+.stack-sheet > .head > .words__title {
+  flex: 1; min-width: 0; white-space: nowrap; overflow-wrap: normal;
+  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) */
+}
+@media (prefers-reduced-motion: reduce) {
+  .stack-sheet > .head > .words__title.is-long { text-overflow: ellipsis; }
+}
+
+/* in a feed card */
+.feed-card > .head { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: var(--feed-card-head-h, var(--tap)); }
+.feed-card > .head:has(> :is(.lead, .feed-card__lead)) { grid-template-columns: auto minmax(0, 1fr); } /* a Lead's own row of the head: parts.css */
+
+/* ---- body: the content row, under the head and over the foot. What the member reads or fills in; in a sheet, a stack sheet
+   and a modal the one part that scrolls. A grid column from the top, the card's rhythm inside.
+   <div class="body">…controls, rows, small content cards…</div>
+   Knobs --body-gap (the card's gap) and --body-pad-top (none; a paper sheet's inset). An outer governs a body through those
+   knobs or a selector naming both, written below under the outer's name (Lh 2026-10-21). ---- */
+.body {
+  display: grid;
+  gap: var(--body-gap, var(--card-gap));
+  align-content: start;
+  min-height: 0;
+  padding-top: var(--body-pad-top, 0rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+/* what a body holds alone: a map fills it, a SheetSteps runs its pile down it, an EmptyState stands at --empty-state-at of its room as in a Step (step.css) */
+.body:has(> .map--inline:only-child) { display: flex; flex-direction: column; }
+.body:has(> .sheet-steps) { display: flex; flex-direction: column; }
+.body:has(> .empty-state:only-child) { display: flex; flex-direction: column; gap: 0; }
+.body:has(> .empty-state:only-child)::before { content: ""; flex: calc(var(--empty-state-at, 0) * 5) 1 0; }
+.body:has(> .empty-state:only-child)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0) * 5) 1 0; }
+
+/* in a sheet and a stack sheet */
+/* everything under the head. 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 outers are in a :where() so the body keeps the weight of one class, as the state rules below expect. */
+:where(.sheet, .sheet-stack .card) > .body {
+  flex: 1;
+  margin-inline: calc(-1 * var(--card-pad));
+  padding-inline: var(--card-pad);
+  /* 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);
+}
+.sheet:has(> .foot) > .body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the foot's 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: the body runs past the sheet's clipped edge instead, where nothing
+   shows anyway (the sheet's other parts keep their size, sheet.css). At peek and away no part of the body shows. */
+:is(.sheet--peek, .sheet--away) > .body { padding-bottom: 0; }
+:where(.sheet, .sheet-stack .card) > .body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
+:where(.sheet, .sheet-stack .card) > .body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
+/* 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 > .body {
+  --card-bg: var(--action-bg);
+  --dark: var(--action-dark);
+  background: var(--card-bg);
+  color: var(--card-ink);
+  padding-top: var(--body-pad-top, var(--sp-6));
+}
+
+/* in a sheet stack */
+/* nothing slid under here: the stack's sheet is always whole. 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 > .body {
+  --_cover: 0rem;
+  padding-top: calc(var(--body-pad-top, 0rem) + 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 > .body {
+  margin-top: calc(var(--sp-3) - var(--card-gap));
+  padding-top: calc(var(--body-pad-top, 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 > .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) > .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) > .body {
+    transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
+  } }
+/* a body pulled to refresh holds still */
+.sheet-stack > .card > .body.is-refreshing { transition: none; }
+
+/* in a modal: the light part that holds the thing being asked about, padded on every side, shrinking (and scrolling) under the
+   modal's max-height while the ask keeps its height (layover.css) */
+.modal > .body {
+  padding: var(--body-pad-top, var(--card-pad)) var(--card-pad) var(--card-pad);
+  flex: 0 1 auto;
+}
+
+/* ---- foot: the last row of a card, a sheet and a stack sheet. What the member can do next: the action buttons on one line.
+   One button takes the width, up to four share it in even parts — so the gaps read even too — and from three on they drop their
+   side padding so the labels keep the room. <div class="foot"><button class="btn btn--primary btn--block">…</button></div>
+   Knobs --foot-gap, --foot-ink, --foot-link-gap. An outer governs a foot through those knobs or a selector naming both, written
+   below under the outer's name (Lh 2026-10-21). ---- */
+.foot { display: flex; gap: var(--foot-gap, var(--sp-2)); align-items: center; color: var(--foot-ink, inherit); }
+.foot:has(> :nth-child(3)) > .btn { --btn-pad-x: var(--sp-2); }
+/* a small link under the buttons (Foot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
+   whole short row of its own, centred — it never shares the buttons' line */
+.foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--foot-link-gap, var(--sp-1)); }
+.foot__link { flex: 1 0 100%; display: flex; justify-content: center; }
+/* round (Foot round): the foot holds a few round IconBtns, each its own size (they never share the line), as ONE group in the middle with
+   a gap that does not follow the card's width. The gap is wider than the Btns' (a miss between two round targets): --foot-gap sets it */
+.foot--round { justify-content: center; gap: var(--foot-gap, var(--sp-6)); }
+
+/* in a card with paper bands: the foot band (the head's look, above) is slim */
+:is(.card--bands, .card--bands > .card__face) > .foot { margin-bottom: calc(-1 * var(--card-pad)); padding-block: var(--sp-3); }
+
+/* in a sheet stack */
+/* a paper stack's foot is paper to the card's edges, and it covers the tinted flex gap above it so the
+   button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
+   where it was — the padding gives back what the bleed takes. Its ink reads the action's side. */
+.sheet-stack > .card.sheet--paper > .foot {
+  --dark: var(--action-dark);
+  background: var(--action-bg);
+  color: var(--card-ink);
+  margin-top: calc(-1 * var(--card-gap));
+  margin-inline: calc(-1 * var(--card-pad));
+  margin-bottom: calc(-1 * var(--card-pad));
+  padding-top: var(--card-gap);
+  padding-inline: var(--card-pad);
+  padding-bottom: var(--card-pad);
+}
+
+/* in a sheet: the button that FINISHES the sheet stands on the box's bottom edge at half, 3q and full alike (sheet.css says why).
+   The layer is as tall as the sheet, its buttons at its bottom, slid UP by the share the sheet slid down; it takes no taps, its buttons do */
+.sheet > .foot {
+  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: var(--z-over); /* the sheet's border box: the same height the sheet's own % reads */
+  align-items: end;
+  align-content: end;
+  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
+  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
+  pointer-events: none;
+  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
+  transition: translate var(--motion-sheet) var(--ease), visibility 0s;
+}
+.sheet > .foot > * { pointer-events: auto; }
+.sheet.is-dragging > .foot { transition: none; }
+/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
+   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
+   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
+:is(.sheet--peek, .sheet--away) > .foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
+/* a paper sheet's foot is paper, as its body is: the words read the controls' side */
+.sheet--paper > .foot { --card-bg: var(--action-bg); --dark: var(--action-dark); color: var(--foot-ink, var(--card-ink)); }