@usableapp/cardds 0.7.105 → 0.7.107

package/css/parts.css

@@ -0,0 +1,380 @@
+/* ============================================================
+   cardds/parts.css — the parts of a LINE: lead · words · end.
+   A Row (lists.css) and a row card (.card--row, card.css) are
+   both made of them, as their direct children in that order.
+   An outer governs a part only through the part's knobs or a
+   selector naming both, written here (Lh 2026-10-21).
+   <div class="row"><span class="lead"><svg class="icon"/></span><span class="words"><span class="words__title">Alice Kau</span><span class="words__meta">Owner</span></span><span class="end"><span class="t-title">+1.0 h</span><span class="t-caption t-muted">Tue</span></span></div>
+   ============================================================ */
+
+/* ---- lead: the outlined box at the start of a line ---- */
+.lead {
+  width: var(--lead-size, var(--tap));
+  height: var(--lead-size, var(--tap));
+  flex: none;
+  border-radius: var(--lead-radius, var(--r-control));
+  border: var(--border-w) solid var(--lead-border, var(--outline));
+  display: grid;
+  place-items: center;
+}
+/* in a row card or a feed card's head: the small box in the card's own ink, a number or an initial in label type */
+:is(.card--row, .feed-card > .head) > .lead {
+  width: var(--lead-size, var(--tap-sm));
+  height: var(--lead-size, var(--tap-sm));
+  border-color: var(--lead-border, currentColor);
+  font: var(--lead-font, var(--type-label));
+}
+.feed-card > .head:has(> .t-caption) > .lead { grid-row: span 2; }
+
+/* ---- words: the title over its meta, taking the room between the lead and the end ---- */
+.words { flex: 1; display: grid; gap: var(--words-gap, var(--sp-0)); }
+.row > .words { min-width: 0; }
+.words__title { font: var(--words-title-font, var(--type-title)); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
+.words__meta { font: var(--words-meta-font, var(--type-caption)); color: var(--words-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--words-meta-gap, var(--sp-1)); }
+.row--lg > .words > .words__title { font: var(--fw-bold) var(--fs-lg) / var(--lh-h1) var(--font-display); }
+.row--done > .words > .words__title { color: var(--card-muted); }
+
+/* ---- end: the value over its caption, right-aligned at the end of a line ---- */
+.end { margin-left: auto; text-align: right; display: grid; gap: var(--end-gap, var(--sp-0)); justify-items: end; }
+.row > .end { flex: none; }
+
+/* ---- head: the first row of a card, a sheet and a stack sheet. A lead, the Words, chips, an end, as its direct children.
+   <div class="head"><h2 class="words__title t-h2">…</h2><span class="words__meta t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
+   The Words of a head are its title and its meta, flat in the head (no .words box round them): the title and the end share the first
+   row, the meta takes a row of its own under both (base.css `order: 1`). An outer governs a head through the head's knobs or a selector
+   naming both, written below under the outer's name (Lh 2026-10-21). ---- */
+/* header row: title left, floating action right — centered, since the
+   trailing control (chip/badge/icon-btn/link) is almost always taller than
+   a single line of title text; top-aligning them left the control visually
+   low against the title's optical center. A head with a genuinely tall,
+   multi-line title can opt back out with .head--top. */
+.head {
+  display: flex;
+  flex-wrap: var(--head-wrap, wrap); /* the caption takes a line of its own — no wrapper div */
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--head-col-gap, var(--sp-3));
+  row-gap: var(--head-row-gap, var(--sp-0));
+  min-height: var(--head-min-h, auto);
+}
+.head--top { align-items: flex-start; }
+
+/* ---- the card skeleton: head · content · foot ----
+   Every card is a head (the heading left, hints / actions / a more-menu at
+   the far right), its content, and an optional foot of action buttons.
+   The head's leading child — the heading, or the div that wraps heading and
+   caption — takes the room, so a heading with nothing at the far right runs
+   all the way across; whatever trails it hugs its own width. Only the
+   heading (or the div that wraps it) is that leading child: a control that
+   leads a custom head — a chip, an avatar, a tile badge — keeps its own
+   width, else the rule stretched a chip into a bar and an avatar into an
+   ellipse (two agents and the wallet demo caught it, 2026-09-10). */
+.head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
+
+/* Skeleton head — the heading in a card's OWN head, and only there.
+   The heading wraps, no squeeze, up to three lines and cut there with an
+   ellipsis (Lh 2026-10-21: "มันควรจะ max สามบรรทัด" — a request's title ran to
+   four lines on a phone; reverses 2026-09-16's "no clamp"). The count is the knob
+   --head-title-lines. The group that holds heading ·
+   caption is the head's own wrapping row (above) — no wrapper element, no
+   height, only the row gap. */
+.head :is(h1, h2, h3) {
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--head-title-lines, 3);
+  line-clamp: var(--head-title-lines, 3);
+  overflow: hidden;
+  padding-block-start: var(--_mark-room); /* a stacked Thai mark rises over the first line's box: room inside the clip, given back outside */
+  margin-block-start: calc(-1 * var(--_mark-room));
+  --_mark-room: 0.2em;
+}
+
+.head > .words__title { font: var(--words-title-font, var(--_type, var(--type-h2))); } /* --_type: the level's own face, set by .t-h1 and .t-display (base.css) */
+.page > .head > h1.words__title { font-size: var(--fs-h2); } /* the page's ONE heading on the base (a screen with no TopBar) reads at the card heading's size — h1 is the semantic level, not a bigger face; --fs-h1 is the bar title's size (Lh 2026-09-22) */
+.head > .words__meta { display: block; align-items: initial; gap: initial; } /* a head's caption is text; the flex line with a Dot is a row's */
+
+/* a stage sheet's head (`Head centre`): a round button · the centred title over its meta · a round button. The title and the meta
+   stand in the middle column, the buttons span both rows; the 1fr rows keep the pair centred when a button is the taller */
+.head--centre {
+  display: grid;
+  grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
+  grid-template-rows: 1fr auto auto 1fr;
+  align-items: center;
+  column-gap: var(--sp-3);
+  row-gap: 0;
+  min-height: var(--tap);
+  text-align: center;
+}
+.head--centre > .words__title { grid-area: 2 / 2; }
+.head--centre > .words__meta { grid-area: 3 / 2; line-height: calc(var(--lh-body) * var(--fs-base)); } /* the meta stands on the body's line, as the sub did, an inline span in a line of the head's own type */
+.head--centre > :first-child:not(.words__title) { grid-area: 1 / 1 / -1 / 2; }
+.head--centre > :last-child:not(.words__title, .words__meta) { grid-area: 1 / 3 / -1 / 4; }
+
+/* a Stamp in a card's head (a `Stamp` as the head's end): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
+   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
+   stamp.css); the head only places it.
+   <div class="head"><h2 class="words__title t-h2">…</h2><span class="words__meta t-caption t-muted">…</span><span class="stamp">…</span></div> */
+.head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
+.head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
+
+/* a head that LEADS with a date (Lh 2026-10-21, timebank's request card): a `Head` whose first child is a JourneyBadge and whose second is a
+   ChipRow. The date stands at the left and the chips beside it, the two as tall as each other; the heading and its caption take the whole
+   width under them, so the heading sits right over the words of the middle. The date is always as tall as the chips. The gap under the date row is --head-lead-gap; the date and the chips place themselves (journey.css, actions.css).
+   <div class="head"><span class="tile-badge tile-badge--stretch">…</span><div class="chip-row">…</div><div><h2 class="words__title t-h1">…</h2>…</div></div> */
+.head:has(> .tile-badge:first-child + .chip-row) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  row-gap: var(--head-lead-gap, var(--sp-3));
+}
+.head:has(> .tile-badge:first-child + .chip-row) > :nth-child(n + 3) { grid-column: 1 / -1; }
+
+/* in a card with paper bands: the head and the foot are paper bands edge to edge, one look */
+:is(.card--bands, .card--bands > .card__face) > :is(.head, .foot) {
+  --card-bg: var(--card-1-bg);
+  --dark: var(--card-1-dark);
+  background: var(--card-bg);
+  color: var(--card-ink);
+  margin-inline: calc(-1 * var(--card-pad));
+  padding-inline: var(--card-pad);
+}
+:is(.card--bands, .card--bands > .card__face) > .head { margin-top: calc(-1 * var(--card-pad)); padding-block: var(--card-pad); }
+:is(.card--bands, .card--bands > .card__face) > .head { padding-block-end: var(--card-band-seam, var(--sp-2)); }
+/* the seam: the heading and the words under it read as ONE paragraph that changes colour at the band's edge (Lh 2026-10-21), so the room on
+   each side of the head band's lower edge is --card-band-seam, not the card's padding and gap */
+:is(.card--bands, .card--bands > .card__face) > .head + * { margin-block-start: calc(var(--card-band-seam, var(--sp-2)) - var(--card-gap)); }
+
+/* in a sheet stack */
+/* stack headers: uniform — [back?] title left, icons right, one height,
+   same gap to content on every card */
+.sheet-stack > .card > .head {
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(--tap);
+}
+.sheet-stack--display > .card > .head { align-items: start; min-height: 0; }
+.sheet-stack--tap > .card > .head { touch-action: none; }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .head {
+  position: relative;
+  padding-left: 0;
+  transition: padding-left var(--motion-sheet) var(--ease);
+}
+.stack-sheet > .head { flex-wrap: nowrap; }
+.sheet-stack--tap > .card.is-open > .head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+:is(.sheet-stack--tap > .card, .sheet-stack--tap > :not(.card, .sheet-stack__base) > .card) > .head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) var(--ease); }
+.sheet-stack--tap > .card.is-open > .head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+/* a stacked sheet is a control until it is open: its head is not text to select */
+.sheet-stack > .card > .head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+
+/* in a sheet */
+/* the head — a title row at least --tap tall, either kind, so the peek strip
+   (--sheet-peek) is the same for every sheet:
+   - in a step it is a plain card head (card.css): the heading left, the
+     contextual thing at the far right
+   - `Head centre` is the stage sheet's three-column head: a round button,
+     the centred title and meta, a round button
+   - a label .row with its .check / .toggle may be the head when the sheet's
+     whole ask is that switch: peek shows it (a row is --tap tall plus its own
+     padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
+.sheet > .head { --head-min-h: var(--sheet-head-h); }
+.sheet > .head:not(:has(> :is(.t-caption, .t-body))) { --head-wrap: nowrap; }
+
+/* a sheet's title is ONE line, always (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน" wrapped to two lines at 390px) — the
+   thing at its end keeps its place beside it; a caption still takes its own row. A title too long for the line RUNS sideways
+   like a song title (Lh 2026-10-03, as the StackSheet's — it was cut with …, and the end of it could never be read): the Sheet
+   measures --_over, the width it overflows by, and sets .is-long; one way — it waits, runs to its end, waits, and starts again
+   from the first letter. The move is text-indent: the heading is the app's own element, there is no inner box to slide.
+   Before the Sheet has measured, and where motion is off, it is cut with …. */
+.sheet > .head > :is(.words__title, :is(h1, h2, h3):first-child) { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; min-width: 0; } /* clip SIDEWAYS only: hidden cut the Thai tone marks over the line */
+.sheet > .head > :is(.words__title, :is(h1, h2, h3):first-child).is-long {
+  text-overflow: clip;
+  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* --_run: from the overflow, 30px a second + the pauses */
+}
+@keyframes sheet-title-run { 0%, 20% { text-indent: 0; } 85%, 100% { text-indent: calc(-1 * var(--_over)); } }
+@media (prefers-reduced-motion: reduce) {
+  .sheet > .head > :is(.words__title, :is(h1, h2, h3):first-child).is-long { animation: none; text-overflow: ellipsis; }
+}
+
+/* in a stack sheet: the head is ONE line, always (Lh 2026-09-24) — the tabs keep their size, the TITLE gives. It never wraps, it runs sideways
+   (StackSheet measures --_over, the width it overflows by, and sets .is-long; the run itself is stack.css's), one way: it waits, runs to the end,
+   waits, and starts again from the first letter — like a song title. The head's line clamp (above) already cuts it, so no overflow is set here */
+.stack-sheet > .head > .words__title {
+  flex: 1; min-width: 0; white-space: nowrap; overflow-wrap: normal;
+  translate: 0 var(--stack-sheet-title-shift, -0.1em); /* FC Pride's line box carries more room above its letters than below: the
+     letters sat ~0.1em under the middle of the back disc and the tabs — lifted onto it (Lh 2026-09-24) */
+}
+@media (prefers-reduced-motion: reduce) {
+  .stack-sheet > .head > .words__title.is-long { text-overflow: ellipsis; }
+}
+
+/* in a feed card */
+.feed-card > .head { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: var(--feed-card-head-h, var(--tap)); }
+.feed-card > .head:has(> :is(.lead, .feed-card__lead)) { grid-template-columns: auto minmax(0, 1fr); } /* a Lead's own row of the head: parts.css */
+
+/* ---- body: the content row, under the head and over the foot. What the member reads or fills in; in a sheet, a stack sheet
+   and a modal the one part that scrolls. A grid column from the top, the card's rhythm inside.
+   <div class="body">…controls, rows, small content cards…</div>
+   Knobs --body-gap (the card's gap) and --body-pad-top (none; a paper sheet's inset). An outer governs a body through those
+   knobs or a selector naming both, written below under the outer's name (Lh 2026-10-21). ---- */
+.body {
+  display: grid;
+  gap: var(--body-gap, var(--card-gap));
+  align-content: start;
+  min-height: 0;
+  padding-top: var(--body-pad-top, 0rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+/* what a body holds alone: a map fills it, a SheetSteps runs its pile down it, an EmptyState stands at --empty-state-at of its room as in a Step (step.css) */
+.body:has(> .map--inline:only-child) { display: flex; flex-direction: column; }
+.body:has(> .sheet-steps) { display: flex; flex-direction: column; }
+.body:has(> .empty-state:only-child) { display: flex; flex-direction: column; gap: 0; }
+.body:has(> .empty-state:only-child)::before { content: ""; flex: calc(var(--empty-state-at, 0) * 5) 1 0; }
+.body:has(> .empty-state:only-child)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0) * 5) 1 0; }
+
+/* in a sheet and a stack sheet */
+/* everything under the head. Its scrollport runs to the card's side and bottom edges (reading --card-pad, the way .bleed does) so
+   content scrolls clear of the edge rather than stopping inside the padding, and a .bleed strip inside it still reaches the edges.
+   The outers are in a :where() so the body keeps the weight of one class, as the state rules below expect. */
+:where(.sheet, .sheet-stack .card) > .body {
+  flex: 1;
+  margin-inline: calc(-1 * var(--card-pad));
+  padding-inline: var(--card-pad);
+  /* the part of the sheet that slid under the box's bottom edge cannot be
+     seen, and the scroller has to know that: scroll-padding is exactly "the
+     obscured part of my scrollport", so a focused field, scrollIntoView and
+     anchor navigation all land a control in the visible part, never under
+     the cut. A length from the box's container units (--_box), since the
+     cut is a share of the SHEET's height, not of the body's. */
+  scroll-padding-bottom: var(--_cover);
+  /* …and its content has to be able to LEAVE that part: the same length as bottom padding, so the last row
+     scrolls up to the visible edge at half and 3q as it does at full — everything between the head and the
+     foot can be reached at any state (Lh, 2026-09-21). Padding, not a shorter box: nothing that shows moves
+     when the state changes, only how far the body scrolls; a child that fills the body (a composer) fills
+     the part that shows. */
+  padding-bottom: var(--_cover);
+}
+.sheet:has(> .foot) > .body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the foot's strip (the card's own padding is the rest) */
+/* that padding can be taller than the body's own box (a short box: a small phone with the keyboard up) and a
+   box is never smaller than its padding: the body runs past the sheet's clipped edge instead, where nothing
+   shows anyway (the sheet's other parts keep their size, sheet.css). At peek and away no part of the body shows. */
+:is(.sheet--peek, .sheet--away) > .body { padding-bottom: 0; }
+:where(.sheet, .sheet-stack .card) > .body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
+:where(.sheet, .sheet-stack .card) > .body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
+/* paper: the head keeps the sheet's own colour, the content is the theme's paper, --action-bg, the ground of every field (Lh 2026-10-05: white; Lh 2026-10-20: the theme's, never a fixed white).
+   The body and the foot read as paper; the handle and the head stay on the card.
+   The flex gap under the head is outside the body, so it stays the sheet's tint.
+   The first field would sit on that colour seam. The paper's inset is --sp-6 (24px at
+   the default spacing), the body's own top padding, and only when the sheet is paper.
+   A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
+   inset: the stack's own gap under the head is the card's colour, so the row still needs this paper.
+   The paper takes the side of the controls' paper (--action-dark): on a dark sheet its words still turn to onlight. */
+.sheet--paper > .body {
+  --card-bg: var(--action-bg);
+  --dark: var(--action-dark);
+  background: var(--card-bg);
+  color: var(--card-ink);
+  padding-top: var(--body-pad-top, var(--sp-6));
+}
+
+/* in a sheet stack */
+/* nothing slid under here: the stack's sheet is always whole. A pull in the content, already at the top: the words move down, the card stays.
+   --_refresh is the finger, private. A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
+   card's colour, so without the paper's inset the first row sits on that seam. */
+.sheet-stack > .card > .body {
+  --_cover: 0rem;
+  padding-top: calc(var(--body-pad-top, 0rem) + var(--_refresh, 0rem));
+  transition: padding-top var(--motion-sheet) var(--ease);
+}
+/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the paper starts
+   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
+   stack's step and the body's own rows read it. */
+.sheet-stack > .card.sheet--paper > .body {
+  margin-top: calc(var(--sp-3) - var(--card-gap));
+  padding-top: calc(var(--body-pad-top, var(--sp-6)) + var(--_refresh, 0rem));
+  transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
+}
+/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
+.sheet-stack > .card.sheet--paper > .body.is-refreshing { transition: none; }
+/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
+   cover the corners, and a paper body showed there beside the head. Clear, the card's own colour
+   shows in that pocket. Open, the body is paper, and the first row sits --sp-6 down, the same paper
+   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
+   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
+   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
+   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
+   at the moment the sheet stops. Rising, the body is paper at once. */
+.sheet-stack > .card.sheet--paper:not(.is-open) > .body {
+  background-color: transparent;
+  transition:
+    padding-top var(--motion-sheet) var(--ease),
+    background-color var(--motion-quick) var(--ease) calc(var(--stagger, 0) * var(--motion-stagger) + var(--motion-sheet) - var(--motion-quick));
+}
+@media (prefers-reduced-motion: reduce) { .sheet-stack > .card.sheet--paper:not(.is-open) > .body {
+    transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
+  } }
+/* a body pulled to refresh holds still */
+.sheet-stack > .card > .body.is-refreshing { transition: none; }
+
+/* in a modal: the light part that holds the thing being asked about, padded on every side, shrinking (and scrolling) under the
+   modal's max-height while the ask keeps its height (layover.css) */
+.modal > .body {
+  padding: var(--body-pad-top, var(--card-pad)) var(--card-pad) var(--card-pad);
+  flex: 0 1 auto;
+}
+
+/* ---- foot: the last row of a card, a sheet and a stack sheet. What the member can do next: the action buttons on one line.
+   One button takes the width, up to four share it in even parts — so the gaps read even too — and from three on they drop their
+   side padding so the labels keep the room. <div class="foot"><button class="btn btn--primary btn--block">…</button></div>
+   Knobs --foot-gap, --foot-ink, --foot-link-gap. An outer governs a foot through those knobs or a selector naming both, written
+   below under the outer's name (Lh 2026-10-21). ---- */
+.foot { display: flex; gap: var(--foot-gap, var(--sp-2)); align-items: center; color: var(--foot-ink, inherit); }
+.foot:has(> :nth-child(3)) > .btn { --btn-pad-x: var(--sp-2); }
+/* a small link under the buttons (Foot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
+   whole short row of its own, centred — it never shares the buttons' line */
+.foot--link { flex-wrap: wrap; align-content: end; row-gap: var(--foot-link-gap, var(--sp-1)); }
+.foot__link { flex: 1 0 100%; display: flex; justify-content: center; }
+/* round (Foot round): the foot holds a few round IconBtns, each its own size (they never share the line), as ONE group in the middle with
+   a gap that does not follow the card's width. The gap is wider than the Btns' (a miss between two round targets): --foot-gap sets it */
+.foot--round { justify-content: center; gap: var(--foot-gap, var(--sp-6)); }
+
+/* in a card with paper bands: the foot band (the head's look, above) is slim */
+:is(.card--bands, .card--bands > .card__face) > .foot { margin-bottom: calc(-1 * var(--card-pad)); padding-block: var(--sp-3); }
+
+/* in a sheet stack */
+/* a paper stack's foot is paper to the card's edges, and it covers the tinted flex gap above it so the
+   button does not sit on a colour stripe. The head's gap stays: it is outside this foot. The button stays
+   where it was — the padding gives back what the bleed takes. Its ink reads the action's side. */
+.sheet-stack > .card.sheet--paper > .foot {
+  --dark: var(--action-dark);
+  background: var(--action-bg);
+  color: var(--card-ink);
+  margin-top: calc(-1 * var(--card-gap));
+  margin-inline: calc(-1 * var(--card-pad));
+  margin-bottom: calc(-1 * var(--card-pad));
+  padding-top: var(--card-gap);
+  padding-inline: var(--card-pad);
+  padding-bottom: var(--card-pad);
+}
+
+/* in a sheet: the button that FINISHES the sheet stands on the box's bottom edge at half, 3q and full alike (sheet.css says why).
+   The layer is as tall as the sheet, its buttons at its bottom, slid UP by the share the sheet slid down; it takes no taps, its buttons do */
+.sheet > .foot {
+  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: var(--z-over); /* the sheet's border box: the same height the sheet's own % reads */
+  align-items: end;
+  align-content: end;
+  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
+  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
+  pointer-events: none;
+  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
+  transition: translate var(--motion-sheet) var(--ease), visibility 0s;
+}
+.sheet > .foot > * { pointer-events: auto; }
+.sheet.is-dragging > .foot { transition: none; }
+/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
+   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
+   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
+:is(.sheet--peek, .sheet--away) > .foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
+/* a paper sheet's foot is paper, as its body is: the words read the controls' side */
+.sheet--paper > .foot { --card-bg: var(--action-bg); --dark: var(--action-dark); color: var(--foot-ink, var(--card-ink)); }

package/css/sheet.css

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