@usableapp/cardds 0.7.105 → 0.7.107

package/css/card.css

@@ -42,87 +42,25 @@
 .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 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. */
-.card > .card__head:first-child > .tile-badge:is(:first-child, :last-child) { --_badge-radius: calc(var(--r-card) - var(--card-pad)); }
+: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
-   clips, so the bands keep its corners. A two-faced card (below) carries the look on each face. */
+   clips, so the bands keep its corners. A two-faced card (below) carries the look on each face, never on the turning box: a clip
+   there cut the face off at the card's edges while it turned, its near edge being nearer the eye than the box (2026-10-21). */
 :is(.card--bands, .card--bands > .card__face) {
   background: var(--card-middle-bg, color-mix(in srgb, var(--card-bg) 35%, var(--card-1-bg)));
   --dark: var(--card-1-dark); /* the middle is mostly paper: its words take the paper's side */
   overflow: hidden;
 }
-: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__foot { margin-bottom: calc(-1 * var(--card-pad)); padding-block: var(--sp-3); } /* the foot band is slim */
+.card--bands.card--turns { background: none; overflow: visible; } /* the turning box keeps --dark: the faces' ink is computed from it */
 
 /* ---- 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
@@ -144,10 +82,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,
@@ -168,7 +106,7 @@
    nothing jumps. Chromium/Safari paint it through the ::-webkit-scrollbar
    parts; Firefox gets its thin bar in the same ink. */
 .bleed {
-  margin-inline: calc(-1 * var(--card-pad, 0rem));
+  margin-inline: calc(-1 * var(--card-pad, 0rem)); /* the edge a bleeding child takes back from what holds it; .map--bleed (sheet.css) reads the same --card-pad */
   padding-inline: var(--card-pad, 0rem);
   padding-block-end: var(--sp-2);
   scroll-padding-inline: var(--card-pad, 0rem);
@@ -185,20 +123,7 @@
 }
 /* a bleeding child sits over the container's rounded corner, so a strip that
    is genuinely first or last needs the corner clipped for it */
-.card:has(> .bleed:first-child), .card:has(> .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)); }
+.card:has(> :is(.bleed, .map--bleed):first-child), .card:has(> :is(.bleed, .map--bleed):last-child) { overflow: clip; }
 
 /* media placeholder for wireframes — currentColor so it survives any palette */
 .ph {
@@ -316,7 +241,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
@@ -333,7 +257,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. */
@@ -361,21 +285,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>
@@ -386,9 +299,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; }
@@ -405,22 +316,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
@@ -444,7 +339,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 {
@@ -534,14 +429,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.
 
@@ -594,8 +481,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);
 }
@@ -631,56 +517,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
@@ -709,7 +557,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/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

@@ -54,6 +54,7 @@
    over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. It grows no taller than
    its three lines (2026-10-21, timebank: beside a four-line title it was a tall empty block); held there, it stands at the head's top. */
 .tile-badge--stretch {
+  line-height: var(--tile-badge-line, var(--lh-badge)); /* the knob's own property; the cap below reads it too */
   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;
@@ -65,7 +66,6 @@
   column-gap: var(--sp-1);
   row-gap: 0;
   padding-block: var(--sp-3);
-  line-height: var(--tile-badge-line, var(--lh-badge));
 }
 .tile-badge--stretch > * { line-height: inherit; }
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
@@ -73,6 +73,9 @@
   .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 */
+.head:has(> .tile-badge:first-child + .chip-row) > .tile-badge--stretch:first-child { grid-column: 1; grid-row: 1; max-block-size: none; }
+
 /* corner badge: pin a tile badge on media (rating, price) — .card__media is relative */
 .tile-badge--corner { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
 

package/css/layover.css

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

package/css/lists.css

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

package/css/media.css

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