@usableapp/cardds 0.7.106 → 0.7.108

package/dist/cardds.css

@@ -289,7 +289,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);
@@ -395,11 +395,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));
@@ -521,7 +521,7 @@
 /* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a
    knob). Each fill says its side; the words on it follow */
 [data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, var(--ink-ondark)); }
-[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain, .card__media > .tile-badge--corner) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; } /* a badge on a media stays the paper (journey.css) */
 [data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 15%, transparent)); }
 /* fields are WHITE boxes on every ground (Lh 2026-09-25): a light ground, so the words typed in them are onlight, even on the moss card */
 [data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
@@ -702,8 +702,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- typography levels ---- */
 /* --fs-self: each level publishes its own size, for a consumer that scales a level without knowing which */
-.t-display  { font: var(--type-display); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; --fs-self: var(--fs-display); }
-.t-h1       { font: var(--type-h1); letter-spacing: var(--track-h1); margin: 0; --fs-self: var(--fs-h1); }
+.t-display  { --_type: var(--type-display); font: var(--type-display); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; --fs-self: var(--fs-display); }
+.t-h1       { --_type: var(--type-h1); font: var(--type-h1); letter-spacing: var(--track-h1); margin: 0; --fs-self: var(--fs-h1); }
 .t-h2       { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; --fs-self: var(--fs-h2); }
 .t-title    { font: var(--type-title); margin: 0; --fs-self: var(--fs-title); }
 .t-body     { font: var(--type-body); margin: 0; }
@@ -757,9 +757,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .page > .t-body { color: var(--page-body-ink, var(--on-surface)); max-width: 34ch; } /* full ink: a sentence is read, muted is for meta (Lh 2026-09-22 — the words on the base were grey and hard to read) */
 /* an illustration among the words (Lh 2026-09-22): capped, so a tall picture never pushes the words under the bar;
    (the walk's dots are NOT here — they are the Step's, after its Pages: step.css, Lh 2026-09-22) */
-/* the page's ONE heading on the base (a screen with no TopBar: CardHead level="h1") reads at the card heading's size —
-   h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
-.page > .card__head > .t-h1 { font-size: var(--fs-h2); }
 .page .cta-pack {
   display: flex;
   align-items: start;            /* buttons keep their own height, never the row's */
@@ -852,12 +849,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
 /* flat head markup (Lh 2026-09-16 — no <p>, no wrapper, only padding and gap tokens):
-   <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
+   <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 heading and the far-right thing share the first row; a caption sits on
    a row below (order 1), whatever the DOM order — so an author writes the
    words in reading order. */
-.card__head > :is(.t-caption, .t-body) { flex: 1 1 100%; order: 1; margin: 0; }
-.card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
+.head > :is(.t-caption, .t-body) { flex: 1 1 100%; order: 1; margin: 0; }
+.head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
 /* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
 .sheet-stack__base > .screen__centre { padding-inline: 0; }
 /* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
@@ -895,7 +892,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
 .step > .empty-state { flex: none; }
-.sheet__body > .empty-state:only-child { flex: none; }
+.body > .empty-state:only-child { flex: none; }
 /* ---- where it sits in what actions.css draws (docs/reference.md rule 15) ---- */
 /* ---- top bar: back + screen title ---- */
 .topbar .t-h1 {
@@ -968,80 +965,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card--4 { --card-bg: var(--card-4-bg); --dark: var(--card-4-dark); }
 .card--5 { --card-bg: var(--card-5-bg); --dark: var(--card-5-dark); }
 
-/* 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 .card__head--top. */
-.card__head {
-  display: flex;
-  flex-wrap: var(--card-head-wrap, wrap); /* the caption takes a line of its own — no wrapper div */
-  align-items: center;
-  justify-content: space-between;
-  column-gap: var(--card-head-col-gap, var(--sp-3));
-  row-gap: var(--card-head-row-gap, var(--sp-0));
-  min-height: var(--card-head-min-h, auto);
-}
-.card__head--top { align-items: flex-start; }
 
 .card__media { border-radius: var(--card-media-radius, var(--r-media)); overflow: hidden; position: relative; } /* relative: corner badges */
-.card__end { text-align: right; display: grid; gap: var(--card-end-gap, var(--sp-0)); justify-items: end; } /* trailing value + caption */
 .card__media > img { width: 100%; height: auto; object-fit: cover; }
 
-/* ---- 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). */
-.card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
-
-/* Skeleton head — the heading in a card's OWN head, and only there.
-   The heading wraps, no squeeze, up to three lines and cut there with an
-   ellipsis (Lh 2026-10-21: "มันควรจะ max สามบรรทัด" — a request's title ran to
-   four lines on a phone; reverses 2026-09-16's "no clamp"). The count is the knob
-   --card-head-title-lines. The group that holds heading ·
-   caption is the head's own wrapping row (above) — no wrapper element, no
-   height, only the row gap. */
-.card__head :is(h1, h2, h3) {
-  overflow-wrap: anywhere;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--card-head-title-lines, 3);
-  line-clamp: var(--card-head-title-lines, 3);
-  overflow: hidden;
-  padding-block-start: var(--_mark-room); /* a stacked Thai mark rises over the first line's box: room inside the clip, given back outside */
-  margin-block-start: calc(-1 * var(--_mark-room));
-  --_mark-room: 0.2em;
-}
-
-/* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
-   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
-   stamp.css); the head only places it.
-   <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><span class="stamp">…</span></div> */
-.card__head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
-.card__head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
-
-/* a head that LEADS with a date (Lh 2026-10-21, timebank's request card): a `CardHead` 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 --card-head-lead-gap; the date and the chips place themselves (journey.css, actions.css).
-   <div class="card__head"><span class="tile-badge tile-badge--stretch">…</span><div class="chip-row">…</div><div><h2 class="t-h1">…</h2>…</div></div> */
-.card__head:has(> .tile-badge:first-child + .chip-row) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  row-gap: var(--card-head-lead-gap, var(--sp-3));
-}
-.card__head:has(> .tile-badge:first-child + .chip-row) > :nth-child(n + 3) { grid-column: 1 / -1; }
-
 /* a JourneyBadge at the edge of the card's own first head (the date box in the top-left or top-right corner) keeps its corner concentric
    with the card's: the card's corner (--r-card) less the room the padding leaves round it. journey.css reads it behind the theme's --tile-badge-radius,
    so a theme that sets that knob still wins. */
-:is(.card > .card__head:first-child, .card__face > .card__turn + .card__head) > .tile-badge:is(:first-child, :last-child) { --_badge-radius: calc(var(--r-card) - var(--card-pad)); } /* a turning card's face: its head follows the unseen turn button */
+:is(.card > .head:first-child, .card__face > .card__turn + .head) > .tile-badge:is(:first-child, :last-child) { --_badge-radius: calc(var(--r-card) - var(--card-pad)); } /* a turning card's face: its head follows the unseen turn button */
 
 /* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are paper bands edge to
    edge over the card's padding, no hairline; the middle between them keeps the card's tone, lightened (--card-middle-bg). The card
@@ -1053,20 +984,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   overflow: hidden;
 }
 .card--bands.card--turns { background: none; overflow: visible; } /* the turning box keeps --dark: the faces' ink is computed from it */
-:is(.card--bands, .card--bands > .card__face) > :is(.card__head, .card__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) > .card__head { margin-top: calc(-1 * var(--card-pad)); padding-block: var(--card-pad); }
-:is(.card--bands, .card--bands > .card__face) > .card__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) > .card__head + * { margin-block-start: calc(var(--card-band-seam, var(--sp-2)) - var(--card-gap)); }
-:is(.card--bands, .card--bands > .card__face) > .card__foot { margin-bottom: calc(-1 * var(--card-pad)); padding-block: var(--sp-3); } /* the foot band is slim */
+/* on a dark tone (3, 5) the lightened middle is a mid grey (#adadad, #bbbbbb in wireframe) that no muted ink reads on (3.2:1 and 3.8:1;
+   the ink gate, 2026-10-22, from the caption under a code on a `Card back`): there the middle's secondary words take the full ink */
+:is(.card--bands, .card--bands > .card__face):is(.card--3, .card--5, .card--3 > *, .card--5 > *) { --card-muted: var(--card-ink); }
 
 /* ---- two faces: the WHOLE card turns (`Card back`, Lh 2026-10-19). The article is the turning box (.flip, base.css) and only that;
    each face is the card's paper — head · middle · foot — and both lie in one grid cell. The head and the foot are the same on both
@@ -1088,10 +1008,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: relative;
 }
 .card__face > * { min-width: 0; }
-.card__middle { flex: 1 0 auto; display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, auto); overflow: hidden; }
+.card__middle { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--card-gap); height: var(--card-middle-h, auto); overflow: hidden; } /* a flex column, not a grid: the middle's height is the flexed one, so one thing on a face (a QR, a code) may take the whole middle with height: 100% (a grid's auto row never stretched to it, and the thing stood at the top of an empty band) */
 .card__turn { position: absolute; inset: 0; width: var(--px); height: var(--px); padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
 .card__face:has(> .card__turn:focus-visible) { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
-.card__head > .chip-row > .chip > .icon { --icon-display: inline-block; --icon-align: -0.15em; --icon-margin: 0 var(--chip-sm-gap, var(--sp-1)) 0 0; }
+.head > .chip-row > .chip > .icon { --icon-display: inline-block; --icon-align: -0.15em; --icon-margin: 0 var(--chip-sm-gap, var(--sp-1)) 0 0; }
 
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
@@ -1131,19 +1051,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    is genuinely first or last needs the corner clipped for it */
 .card:has(> :is(.bleed, .map--bleed):first-child), .card:has(> :is(.bleed, .map--bleed):last-child) { overflow: clip; }
 
-/* foot: the card's action buttons on one line. One button takes the width,
-   up to four share it in even parts — so the gaps read even too — and from
-   three on they drop their side padding so the labels keep the room. */
-.card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; color: var(--card-foot-ink, inherit); }
-.card__foot:has(> :nth-child(3)) > .btn { --btn-pad-x: var(--sp-2); }
-/* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
-   whole short row of its own, centred — it never shares the buttons' line */
-.card__foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--card-foot-link-gap, var(--sp-1)); }
-.card__foot-link { flex: 1 0 100%; display: flex; justify-content: center; }
-/* round (CardFoot round): the foot holds a few round IconBtns, each its own size (they never share the line), as ONE group in the middle with
-   a gap that does not follow the card's width. The gap is wider than the Btns' (a miss between two round targets): --card-foot-gap sets it */
-.card__foot--round { justify-content: center; gap: var(--card-foot-gap, var(--sp-6)); }
-
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {
   background:
@@ -1260,7 +1167,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   align-items: center;
   gap: var(--card-row-gap, var(--sp-3));
 }
-.card--row .card__body { flex: 1; display: grid; gap: var(--sp-0); }
 
 /* ---- a short window of past entries (`CardList show`, Lh 2026-10-19): the list scrolls IN ITSELF, a few rows in sight and the next one cut
    in half to say there is more. The height is counted in rows by the component (`--_card-list-h`, px: rows wrap to any height); the room
@@ -1277,7 +1183,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 
 /* ---- the cross that takes a row off the list (`Card row onRemove`): small, at the row's top right corner, inside it ----
-   <label class="card card--row"><input type="radio">…<div class="card__body">…</div><button class="card__remove" aria-label="Remove"><svg class="icon">x</svg></button></label>
+   <label class="card card--row"><input type="radio">…<span class="words">…</span><button class="card__remove" aria-label="Remove"><svg class="icon">x</svg></button></label>
    Smaller than any button (a ring half a thing's size, `--tap-base` / 2 = 24) and it grows with the size of things; the touch target is an
    unseen ring round it, never under --tap-floor (44). It stands in the row's flow, so the title wraps before it, tucked into the corner
    by the row's own padding; it sits over the row's radio (which covers the whole card), so a touch on it removes and never picks. */
@@ -1305,21 +1211,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card__remove > .icon { --icon-size: 62%; }
 .card__remove:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
 
-/* leading thumb/icon in a row */
-.card__thumb {
-  width: var(--card-thumb-size, var(--tap-sm)); height: var(--card-thumb-size, var(--tap-sm));
-  flex: none;
-  border-radius: var(--card-thumb-radius, var(--r-control));
-  border: var(--border-w) solid currentColor;
-  display: grid;
-  place-items: center;
-  font: var(--card-thumb-font, var(--type-label));
-}
-
 /* ---- card feed: a queue of cards, all in sight — one big, the rest small (Lh 2026-10-09, the whole queue 2026-10-15) ----
    <div class="card-feed">
-     <article class="card feed-card"><div class="card__head feed-card__head">thumb or lead · h2 · caption</div>
-       <div class="feed-card__more"><div class="feed-card__rest">content · <div class="card__foot">…</div></div></div></article>
+     <article class="card feed-card"><div class="head">lead · h2 · caption</div>
+       <div class="feed-card__more"><div class="feed-card__rest">content · <div class="foot">…</div></div></div></article>
      <article class="card feed-card feed-card--small" role="button" tabindex="0">… <div class="feed-card__more" inert>…</div></article>
      <p class="t-caption card-feed__end" role="note">the end</p>
    </div>
@@ -1330,9 +1225,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    shut content in the scrollable overflow of whatever holds the feed — and hidden once the row has shut. */
 .card-feed { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-feed-gap, var(--card-gap-rest)); }
 .feed-card { row-gap: 0; }
-.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(.card__thumb, .feed-card__lead)) { grid-template-columns: auto minmax(0, 1fr); }
-.feed-card__head:has(> .t-caption) > :is(.card__thumb, .feed-card__lead) { grid-row: span 2; }
+.feed-card > .head:has(> .t-caption) > .feed-card__lead { grid-row: span 2; }
 .feed-card__lead { display: grid; align-self: center; } /* a Stamp here is the small one, 48 × 60 (stamp.css) */
 .card-feed__end { text-align: center; }
 .feed-card__more { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
@@ -1349,22 +1242,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   .feed-card--small .feed-card__rest { transition: visibility 0s var(--motion-sheet); }
 }
 
-/* ---- inline stat block (revenue-style) ---- */
-.stat { display: grid; gap: var(--stat-gap, var(--sp-1)); }
-.stat--centre { text-align: center; justify-items: center; } /* the one number of a sheet or a stage, under a centred avatar */
-.stat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--stat-row-gap, var(--sp-3)); }
-
-.delta {
-  font: var(--delta-font, var(--type-caption));
-  font-weight: var(--fw-bold);
-  padding: var(--delta-pad-y, var(--sp-1)) var(--delta-pad-x, var(--sp-2));
-  border-radius: var(--delta-radius, var(--r-chip));
-  background: var(--delta-bg, var(--card-3-bg));
-  --dark: var(--card-3-dark);
-  color: var(--delta-ink, var(--card-ink));
-}
-.delta--neg { background: var(--delta-neg-bg, var(--neg)); --dark: var(--neg-dark); color: var(--delta-neg-ink, var(--card-ink)); }
-
 /* ---- panes: a few panes side by side inside a card or a sheet, one in sight (Lh 2026-10-02) ----
    <div class="panes" role="group"><div class="panes__rail"><div class="panes__pane">…</div>…</div><span class="pager__at">…</span></div>
    The rail runs to the card's edges and snaps a pane at a time; each pane takes the inset back, so its content stands on the
@@ -1388,7 +1265,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- cover: the image IS the card; text over a scrim ----
    <article class="card card--cover"><div class="ph" role="img"></div>
-     <div class="card__head"><button class="icon-btn icon-btn--sm">♥</button></div>
+     <div class="head"><button class="icon-btn icon-btn--sm">♥</button></div>
      <div><h2 class="t-h1">Art Institute</h2><p class="t-body">111 South Michigan Ave</p></div>
      <div class="row">…meta…</div></article> */
 .card--cover {
@@ -1478,14 +1355,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack > .card:nth-child(3) { margin-top: calc(2 * var(--stack-step)); }
 .sheet-stack > .card:nth-child(4) { margin-top: calc(3 * var(--stack-step)); }
 .sheet-stack > .card:nth-child(5) { margin-top: calc(4 * var(--stack-step)); }
-/* stack headers: uniform — [back?] title left, icons right, one height,
-   same gap to content on every card */
-.sheet-stack > .card > .card__head {
-  align-items: center;
-  justify-content: flex-start;
-  min-height: var(--tap);
-}
-.sheet-stack--display > .card > .card__head { align-items: start; min-height: 0; }
 /* ============================================================
    .sheet-stack--tap — tap a peeked sheet open; a back button returns it.
 
@@ -1538,8 +1407,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   overscroll-behavior: contain;
 }
 .sheet-stack--tap > .card.is-open.is-dragging { transition: none; }
-.sheet-stack--tap > .card > .card__head { touch-action: none; }
-.sheet-stack--tap > .card.is-open:not(:has(> .sheet__body)) {
+.sheet-stack--tap > .card.is-open:not(:has(> .body)) {
   padding-top: calc(var(--card-pad) + var(--_refresh, 0rem));
   transition: translate var(--motion-sheet) var(--ease), padding-top var(--motion-sheet) var(--ease);
 }
@@ -1575,56 +1443,18 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    only, the sheet's size is untouched. A pull on the head keeps them square until the finger lets go. */
 .sheet-stack--flood > .card { transition: translate var(--motion-sheet) var(--ease), border-radius var(--motion-sheet) var(--ease); }
 .sheet-stack--flood > .card.is-open { border-top-left-radius: 0; border-top-right-radius: 0; }
-:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head {
-  position: relative;
-  padding-left: 0;
-  transition: padding-left var(--motion-sheet) var(--ease);
-}
-/* ---- a stacked sheet with a SheetBody has the ONE sheet shape (Lh 2026-09-23, the home layout): sheet head
-   pinned at the top · sheet body scrolls, as long as it needs · sheet foot (a CardFoot, the CTA) at the bottom.
-   The card becomes a flex column and stops scrolling itself — only the body does. A sheet with no SheetBody
+/* ---- a stacked sheet with a Body has the ONE sheet shape (Lh 2026-09-23, the home layout): sheet head
+   pinned at the top · sheet body scrolls, as long as it needs · sheet foot (a Foot, the CTA) at the bottom.
+   The card becomes a flex column and stops scrolling itself — only the body does. A sheet with no Body
    keeps the old way: the whole open card scrolls. ---- */
-.sheet-stack--tap > .card:has(> .sheet__body) { display: flex; flex-direction: column; gap: var(--card-gap); }
-.sheet-stack--tap > .card:has(> .sheet__body).is-open { overflow: clip; }
-/* a paper stack's foot is paper to the card's edges, and it covers the tinted flex gap above it so the
-   button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
-   where it was — the padding gives back what the bleed takes. */
-.sheet-stack > .card.sheet--paper > .card__foot {
-  background: var(--action-bg);
-  color: var(--card-ink);
-  margin-top: calc(-1 * var(--card-gap));
-  margin-inline: calc(-1 * var(--card-pad));
-  margin-bottom: calc(-1 * var(--card-pad));
-  padding-top: var(--card-gap);
-  padding-inline: var(--card-pad);
-  padding-bottom: var(--card-pad);
-}
-.stack-sheet > .card__head { flex-wrap: nowrap; }
+.sheet-stack--tap > .card:has(> .body) { display: flex; flex-direction: column; gap: var(--card-gap); }
+.sheet-stack--tap > .card:has(> .body).is-open { overflow: clip; }
 /* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
    tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
    (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
-.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
-:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) var(--ease); }
-.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
 /* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
    no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
-.sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
-/* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
-.sheet > .card__foot {
-  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: var(--z-over); /* the sheet's border box: the same height the sheet's own % reads */
-  align-items: end;
-  align-content: end;
-  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
-  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
-  pointer-events: none;
-  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
-  transition: translate var(--motion-sheet) var(--ease), visibility 0s;
-}
-.sheet.is-dragging > .card__foot { transition: none; }
-/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
-   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
-   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
-:is(.sheet--peek, .sheet--away) > .card__foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
+.sheet-stack--tap > .card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
 /* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
 /* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
    (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
@@ -1653,7 +1483,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .postcard__front .postcard__turn > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; min-height: 0; }
 
 /* ---- where it sits in what stack.css draws: a sheet pulled to refresh holds still (docs/reference.md rule 15) ---- */
-.sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .sheet__body)) { transition: none; }
+.sheet-stack--tap > .card.is-open.is-refreshing:not(:has(> .body)) { transition: none; }
 
 /* ---- where it sits in what step.css draws: the reading block, a walk of pages (docs/reference.md rule 15) ---- */
 .step:has(> .sheet--peek) > .pages { padding-bottom: var(--sheet-peek); }
@@ -1685,7 +1515,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
    <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)
@@ -1740,7 +1570,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* 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);
@@ -1752,7 +1582,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* 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,
@@ -1766,7 +1596,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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. ---- */
@@ -1914,7 +1744,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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%;
@@ -1929,35 +1759,24 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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 {
@@ -1991,23 +1810,23 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* 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
@@ -2054,8 +1873,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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
@@ -2127,38 +1946,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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,
@@ -2166,18 +1956,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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),
@@ -2203,22 +1986,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   touch-action: none;
   cursor: grab;
 }
-/* paper: the head keeps the sheet's own colour, the content is 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);
@@ -2258,42 +2025,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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
@@ -2440,11 +2171,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 
 /* ---- 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;
@@ -2455,8 +2186,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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">
@@ -2545,7 +2276,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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; }
@@ -2581,7 +2311,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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
@@ -2598,61 +2328,22 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ==== the step bar answers a press, as PRESS in actions.css answers every other control (#62: a block is written in its own file) ==== */
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 
-/* ==== a body that holds only an EmptyState stands it at --empty-state-at of its room, as a Step does (step.css) (#62: a block is written in its own file) ==== */
-.sheet__body:has(> .empty-state:only-child) { display: flex; flex-direction: column; gap: 0; }
-.sheet__body:has(> .empty-state:only-child)::before { content: ""; flex: calc(var(--empty-state-at, 0) * 5) 1 0; }
-.sheet__body:has(> .empty-state:only-child)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0) * 5) 1 0; }
 
-/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
-/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
-   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
-   card's colour, so without the paper's inset the first row sits on that seam. */
-.sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0rem); transition: padding-top var(--motion-sheet) var(--ease); }
-/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the paper starts
-   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
-   stack's step and the body's own rows read it. */
-.sheet-stack > .card.sheet--paper > .sheet__body {
-  margin-top: calc(var(--sp-3) - var(--card-gap));
-  padding-top: calc(var(--sp-6) + var(--_refresh, 0rem));
-  transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
-}
-/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
-.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
-/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
-   cover the corners, and a paper body showed there beside the head. Clear, the card's own colour
-   shows in that pocket. Open, the body is paper, and the first row sits --sp-6 down, the same paper
-   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
-   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
-   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
-   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
-   at the moment the sheet stops. Rising, the body is paper at once. */
-.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-  background-color: transparent;
-  transition:
-    padding-top var(--motion-sheet) var(--ease),
-    background-color var(--motion-quick) var(--ease) calc(var(--stagger, 0) * var(--motion-stagger) + var(--motion-sheet) - var(--motion-quick));
-}
-@media (prefers-reduced-motion: reduce) { .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
-    transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
-  } }
 /* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
 .screen--fill > .appbar + .sheet-stage { margin-top: 0; }
 
-/* ---- where it sits in what stack.css draws: a body pulled to refresh holds still (docs/reference.md rule 15) ---- */
-.sheet-stack > .card > .sheet__body.is-refreshing { transition: none; }
-
 /* ---- css/step.css — .step: one screen, one task — card, optional sheet, bar outside ---- */
 /* ============================================================
    cardds/step.css — .step: one screen, one task.
    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
 
@@ -2704,7 +2395,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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. */
@@ -2881,7 +2572,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   align-self: stretch;
   max-block-size: calc((2 * var(--fs-caption) + var(--fs-lg)) * var(--tile-badge-line, var(--lh-badge)) + 2 * var(--sp-3));
   container-type: size;
-  inline-size: calc(var(--fs-lg) * 3.25);
+  inline-size: var(--tile-badge-stretch-w, calc(var(--fs-lg) * 3.25)); /* a run of days ("18–21") needs more: the app sets the knob on that badge */
   grid-template-columns: auto auto;
   align-content: center;
   justify-content: center;
@@ -2890,17 +2581,21 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   row-gap: 0;
   padding-block: var(--sp-3);
 }
-.tile-badge--stretch > * { line-height: inherit; }
+.tile-badge--stretch > * { line-height: inherit; white-space: nowrap; } /* a value never breaks at its dash */
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
 @container (min-height: 3.5rem) { /* just under the three lines' own height, the most the badge grows to */
   .tile-badge--stretch > * { grid-column: 1 / -1; }
 }
 
 /* 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); }
+/* on a CardMedia (ruled Lh 2026-10-21, three screenshots side by side): the card's paper, its corner concentric with the media's — the media's
+   corner less the inset above. Not the theme's highlight: the distance on a request card is information, and a highlight fill reads as a
+   control. Both knobs still win (palette.css leaves this badge out of orchard's highlight rule for the same reason) */
+.card__media > .tile-badge--corner { --_badge-radius: calc(var(--r-media) - var(--sp-3)); background: var(--tile-badge-bg, var(--card-1-bg)); --dark: var(--card-1-dark); }
 
 /* ---- note row: icon + caption (transit hints, fine print) ---- */
 .note-row {
@@ -3020,7 +2715,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* a button may carry a WORD beside (or instead of) its icon — two named sides, ชาย · หญิง (Lh 2026-10-02): the label's look, one line */
 .icon-btn-group > .icon-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding-inline: var(--sp-2); font: var(--type-label); font-size: var(--fs-sm); white-space: nowrap; }
 .icon-btn-group > .icon-btn + .icon-btn { border-inline-start: var(--border-w) solid var(--icon-btn-group-rule, var(--icon-btn-group-border, var(--outline))); }
-.card__foot > .icon-btn-group { flex: 1 1 0; }
+.foot > .icon-btn-group { flex: 1 1 0; }
 /* --vertical: the buttons one over the other, ONE button wide — at a row's end, where a panel across would take the words' room */
 .icon-btn-group--vertical { flex-direction: column; flex: none; width: var(--tap); }
 .icon-btn-group--vertical > .icon-btn { flex: 1 0 auto; min-height: var(--tap); }
@@ -3030,7 +2725,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    does not stretch it: a foot's `flex: 1 1 0` is undone for it below, as the foot undoes it for `.btn--form` (card.css). */
 .icon-btn-group--form { flex: 0 1 auto; justify-self: center; margin-inline: auto; } /* no align-self: a sheet's foot stands its buttons on the bottom edge by `align-items: end` */
 .icon-btn-group--form > .icon-btn { flex: 0 1 auto; width: auto; min-width: var(--icon-btn-group-form-min-w, var(--tap)); }
-.card__foot > :is(.icon-btn-group--form, .icon-btn-line) { flex: 0 1 auto; }
+.foot > :is(.icon-btn-group--form, .icon-btn-line) { flex: 0 1 auto; }
 /* --labelled: the label's words, then the panel, ONE line in the middle (the words are read, not pressed: no frame, plain ink); too narrow → the words wrap
    above the panel, both centred */
 .icon-btn-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--icon-btn-group-gap, var(--sp-3)); min-width: 0; justify-self: center; margin-inline: auto; }
@@ -3281,7 +2976,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 
 /* ---- action note (Lh 2026-09-24): the main button's place, the main button's size, but ON the ground — no fill, no border, no
-   rounding — one line of muted words, an inline icon allowed; nothing to press. In a CardFoot or an ActionBar row it takes the
+   rounding — one line of muted words, an inline icon allowed; nothing to press. In a Foot or an ActionBar row it takes the
    button's share (the whole width), so a foot or a bar keeps its height whether it holds a button or the note. ---- */
 .action-note {
   flex: 1 1 0;
@@ -3351,7 +3046,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):not(.link):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
-.sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
+.sheet-stack--tap > .card > .head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */
 
 /* ==== the chip a choice draws: picked (choice.css drives it with its input), and --sign (#62: a block is written in its own file) ==== */
@@ -3373,14 +3068,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
 /* a head's ChipRow takes a line of its own under the title: at most two lines of chips, a chip's words cut with an ellipsis */
-.card__head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * var(--chip-sm-line, var(--lh-body)) + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
+.head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * var(--chip-sm-line, var(--lh-body)) + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
 /* …beside a date that leads the head (card.css) they stand in the date's row, every chip in sight: the meeting place may take a line of its own */
-.card__head:has(> .tile-badge:first-child + .chip-row) > .chip-row { grid-column: 2; grid-row: 1; max-height: none; }
-.card__head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.card__foot > .btn { flex: 1 1 0; min-width: 0; }
+.head:has(> .tile-badge:first-child + .chip-row) > .chip-row { grid-column: 2; grid-row: 1; max-height: none; }
+.head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.foot > .btn { flex: 1 1 0; min-width: 0; }
 /* …unless the button says its own size: `Btn form` is as wide as its words in a foot too, centred (Lh 2026-10-10: one button filling
    a card's foot read too big — which button a card wears is the project's choice, so the foot must not undo it) */
-.card__foot > .btn--form { flex: 0 1 auto; }
+.foot > .btn--form { flex: 0 1 auto; }
 /* the page dots under the card sit centred under it — the indicator belongs
    with the page that changes, never in the bar (Lh, 2026-09-12) */
 .screen__centre > .pager__at { justify-self: center; }
@@ -3921,7 +3616,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    <div class="calendar"><div class="calendar__head">…</div><div class="calendar__grid"><span class="calendar__wd">Mo</span>×7 <button class="calendar__day" style="--start: 3">1</button>…</div></div> */
 .calendar { display: grid; gap: var(--calendar-gap, var(--sp-3)); }
 .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--calendar-head-gap, var(--sp-2)); }
-.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; }
+.calendar__grid { display: grid; grid-template-columns: repeat(var(--_cols, 7), 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; container-type: inline-size; } /* a container: the span band below is measured in its width */
 .calendar__wd { font: var(--calendar-wd-font, var(--type-caption)); color: var(--calendar-wd-ink, var(--card-muted)); padding-block: var(--calendar-wd-pad-y, var(--sp-2)); }
 .calendar__day {
   width: 100%;
@@ -3942,6 +3637,31 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .calendar__day:disabled { opacity: var(--fade-dim); }
 .calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
 
+/* ---- span: a run of cells covered by one drag or two taps (Calendar, CalendarWeeks, HourGrid; src/choice/span.ts is the mechanic). The whole
+   run is ONE highlight, as a finger drags over words (Lh 2026-10-21: no picked first or last day, the same colour throughout): each covered
+   cell's own ::before is a slice of the band, a column and a gap wide between so the slices meet across the grid's gaps, the slice at an end
+   stops at its column's edge with the pill's corner; a one-cell run is a pill the column wide. The cells keep their ink. A grid that is a
+   span takes the touch (no scroll starts on it); the weeks' box keeps its vertical scroll, so there a drag covers a row and two taps cover across rows */
+.calendar--span .calendar__grid { touch-action: none; -webkit-user-select: none; user-select: none; }
+.calendar--weeks.calendar--span .calendar__grid { touch-action: pan-y; }
+.calendar__grid { --_col: calc((100cqw - (var(--_cols, 7) - 1) * var(--calendar-grid-gap, var(--sp-1))) / var(--_cols, 7)); --_span-w: calc(var(--_col) + var(--calendar-grid-gap, var(--sp-1))); }
+:is(.calendar__day--span-start, .calendar__day--span-in, .calendar__day--span-end, .calendar__day--span-one) { position: relative; isolation: isolate; }
+.calendar__day--span-start::before, .calendar__day--span-in::before, .calendar__day--span-end::before, .calendar__day--span-one::before { /* flat, not :is(): the knob walk reads each alternative's element */
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(50% - var(--_span-w) / 2);
+  width: var(--_span-w);
+  z-index: var(--z-under);
+  background: var(--calendar-span-bg, color-mix(in srgb, var(--accent) 25%, transparent));
+}
+.calendar__day--span-start::before { inset-inline-start: calc(50% - var(--_col) / 2); width: calc(var(--_span-w) - var(--calendar-grid-gap, var(--sp-1)) / 2); border-start-start-radius: var(--r-chip); border-end-start-radius: var(--r-chip); }
+.calendar__day--span-end::before { width: calc(var(--_span-w) - var(--calendar-grid-gap, var(--sp-1)) / 2); border-start-end-radius: var(--r-chip); border-end-end-radius: var(--r-chip); }
+.calendar__day--span-one::before { inset-inline-start: calc(50% - var(--_col) / 2); width: var(--_col); border-radius: var(--r-chip); }
+/* ---- hour grid: the hours of a day in Calendar's cells, `--hour-grid-cols` to a row, a label over them
+   <div class="calendar hour-grid"><span class="calendar__label">น.</span><div class="calendar__grid"><button class="calendar__day">9</button>…</div></div> */
+.hour-grid > .calendar__grid { --_cols: var(--hour-grid-cols, 6); }
+
 /* ---- calendar weeks: a run of week rows that scrolls week by week, `show` rows in sight; the head sticks at the top of the box
    <div class="calendar calendar--weeks"><div class="calendar__weeks-head"><span class="calendar__label">June 2026</span><div class="calendar__grid">…wd×7</div></div>
    <div class="calendar__grid calendar__week"><button class="calendar__day">…</button>×7</div>…</div>
@@ -4161,14 +3881,14 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* ---- css/lists.css — row, rows, key-value, kv grid, timeline, legend, link ---- */
 /* ============================================================
    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;
@@ -4181,21 +3901,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* 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> */
@@ -4210,7 +3916,6 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
    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));
@@ -4251,6 +3956,9 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
    <div class="kv-grid"><div class="kv-cell"><svg class="icon"/><span class="kv-cell__val">15.6 kg</span><span class="kv-cell__key">Weight</span></div>…</div> */
 .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--kv-grid-gap, var(--sp-4)); }
 .kv-grid > .kv-cell + .kv-cell { border-left: var(--border-w) solid var(--hairline); padding-left: var(--sp-4); }
+/* `centre` (Lh 2026-10-21, the code on timebank's request card, as `Stat centre` and `Head centre` were): the grid is as tall as its holder, its cells stand in the middle of it, each value and caption centred */
+.kv-grid--centre { min-height: 100%; align-content: center; text-align: center; } /* min-height, not height: in a plain card (a grid of auto rows) a percent height resolved 8px short and the cell overflowed it; a percent min-height is nothing there, and the holder's height on a turning card's face */
+.kv-grid--centre > .kv-cell { justify-items: center; }
 .kv-cell { display: grid; gap: var(--kv-cell-gap, var(--sp-0)); align-content: start; min-width: 0; }
 .kv-cell > .icon { --icon-margin: 0 0 var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
@@ -4373,6 +4081,388 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 
+/* ---- css/parts.css — the parts of a line: lead, words, end — a Row's and a row card's children ---- */
+/* ============================================================
+   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)); }
+
 /* ---- css/sticky.css — sticky note, its field, tone chooser, thread of posts, pile ---- */
 /* cardds — sticky notes: the paper note, the field written on it, the tone chooser, notes stuck on a page, a thread of posts, the answer note.
    A note is pastel paper: its tone is one of the theme's nine pastels (--pastel-*, tokens.css), its ink the onlight set, whatever card it lies on. */
@@ -5063,7 +5153,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 
 /* ---- 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)
@@ -5461,17 +5551,11 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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;
@@ -5490,7 +5574,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .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 */
@@ -5642,14 +5726,14 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 /* ---- 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:
@@ -5681,16 +5765,6 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   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);
@@ -5715,8 +5789,8 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   --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
@@ -6083,7 +6157,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
     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;
 }
@@ -6122,7 +6196,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 /* 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);
 }
@@ -6133,7 +6207,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 [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
@@ -6168,5 +6242,5 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 [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); }