@usableapp/cardds 0.7.106 → 0.7.108

package/css/card.css

@@ -42,80 +42,14 @@
 .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
@@ -127,20 +61,9 @@
   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
@@ -162,10 +85,10 @@
   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,
@@ -205,19 +128,6 @@
    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:
@@ -334,7 +244,6 @@
   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
@@ -351,7 +260,7 @@
 }
 
 /* ---- 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. */
@@ -379,21 +288,10 @@
 .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>
@@ -404,9 +302,7 @@
    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; }
@@ -423,22 +319,6 @@
   .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
@@ -462,7 +342,7 @@
 
 /* ---- 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 {
@@ -552,14 +432,6 @@
 .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.
 
@@ -612,8 +484,7 @@
   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);
 }
@@ -649,56 +520,18 @@
    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
@@ -727,7 +560,7 @@
 .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); }

package/css/choice.css

@@ -119,7 +119,7 @@
    <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%;
@@ -140,6 +140,31 @@
 .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>

package/css/finish.css

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

package/css/journey.css

@@ -58,7 +58,7 @@
   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;
@@ -67,17 +67,21 @@
   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 {

package/css/layover.css

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

package/css/lists.css

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

package/css/media.css

@@ -43,17 +43,11 @@
   position: relative;
 }
 .tile__label { font: var(--tile-label-font, var(--type-title)); }
-.tile__value { font: var(--tile-value-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
 .tile__sub { font: var(--tile-sub-font, var(--type-caption)); color: var(--tile-sub-ink, var(--card-muted)); } /* the muted words of the tile's ground; --dim faded the full ink to 2.4–3.4:1 */
 .tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
 .tile--on { background: var(--tile-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--tile-on-ink, var(--card-ink)); border-color: transparent; }
 /* .tile--pick's hidden input and :has(:checked) fill are declared once in choice.css, alongside .chip--pick and .mood__opt */
 .tile--wide { grid-column: 1 / -1; }
-/* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
-/* a stat tile has no fill of its own, so it has no ink of its own: it takes the ink of what it stands on (currentColor on `color`
-   = the inherited colour), as the card's heading does. It kept the plain tile's --action-ink, dark on a dark card (timebank, tone 3,
-   Lh 2026-10-18). --tile-ink still overrides; a toned stat tile (.tile--N, below) takes its fill and its ink back */
-.tile--stat { --dark: inherit; color: var(--tile-ink, currentColor); border-color: transparent; background: none; padding-inline: 0; min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
   border-style: dashed;
@@ -72,7 +66,7 @@
 .tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--tile-3-ink, var(--card-ink)); border-color: transparent; }
 
 /* ---- wave: audio waveform stand-in for voice rows ----
-   <span class="wave"></span> — sits in a .row__body, fills the width */
+   <span class="wave"></span> — sits in a .words, fills the width */
 .wave {
   /* only WHOLE bars show (Lh 2026-09-23 — a clipped last bar read thinner): the columns are as many whole bar-widths as fit
      (auto-fill), spread edge to edge; bars that do not fit go to rows of no height, clipped away */

package/css/palette.css

@@ -92,7 +92,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); }