@usableapp/cardds 0.7.104 → 0.7.106

package/dist/cardds.css

@@ -88,6 +88,7 @@
   --tap: max(var(--tap-floor), var(--tap-base));                       /* 48 primary touch target */
   --tap-sm: max(var(--tap-floor), calc(var(--tap-base) * 11 / 12));    /* 44 minimum touch target */
   --tap-lg: max(var(--tap-floor), calc(var(--tap-base) * 7 / 6));      /* 56 hero controls: send, field with action */
+  --tap-xl: max(var(--tap-floor), calc(var(--tap-base) * 17 / 12));    /* 68 the biggest round control: a foot of a few big round buttons (IconBtn xl) */
   --btn-h: calc(var(--tap-base) * 13 / 12);   /* 52 button height */
   --btn-xl-h: calc(var(--tap-base) * 11 / 6); /* 88 the one giant CTA */
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
@@ -332,6 +333,7 @@
   --ink-tint: color-mix(in srgb, currentColor 12%, transparent);   /* hover, rails, rests */
   --ink-rail: color-mix(in srgb, currentColor 30%, transparent);   /* todo steps, ghost edges */
   --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); /* calendar marks */
+  --accent-wash: color-mix(in srgb, var(--accent) 22%, var(--action-bg)); /* the same wash laid on the paper of fields and buttons, opaque: a soft chip reads the same on any card (Chip soft) */
   --accent-mid: color-mix(in srgb, var(--accent) 50%, transparent);
   /* PASTELS (Lh 2026-10-20: a component never brings a colour of its own; every colour is the theme's): the nine pastel papers of a
      sticky note, a note chooser's swatch and a stamp's picture ground (src/sticky/tones.ts names them), and a stamp's paper. Light
@@ -525,7 +527,7 @@
 [data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
 [data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: var(--ink-onlight); }
 /* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
-[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
+[data-palette="orchard"] :is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
 [data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); --dark: 1; }
 [data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
 [data-palette="orchard"] .toggle:checked { background: var(--highlight-3); --accent-dark: 0; } /* sky is a light ground: its knob is onlight */
@@ -999,12 +1001,23 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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 freely: no line budget, no squeeze, no clamp (Lh
-   2026-09-16 — a height rule on words only distorts them; content that needs
-   more rows takes more rows). The group that holds heading ·
+   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; }
+.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,
@@ -1013,19 +1026,33 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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. */
-.card > .card__head:first-child > .tile-badge:is(:first-child, :last-child) { --_badge-radius: calc(var(--r-card) - var(--card-pad)); }
+: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 */
 
 /* ---- 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;
 }
+.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);
@@ -1035,16 +1062,22 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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 */
 
 /* ---- 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
-   faces; the middle is one fixed height (--card-middle-h, the theme's call), so the card never changes height as it turns. The hidden
+   faces; the card is as tall as its taller face and each face fills it, the middle taking what the head and the foot leave (2026-10-21,
+   timebank: a fixed middle left a short front a tall empty band), so the card never changes height as it turns; --card-middle-h fixes
+   the middle's height instead, the theme's call. The hidden
    face is inert. Each face holds an unseen turn button: the keyboard's way to turn it; its ring is drawn on the face. */
 .card--turns { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
 .card__face {
-  display: grid;
-  align-content: start;
+  display: flex;
+  flex-direction: column;
   gap: var(--card-gap);
   min-width: 0;
   padding: var(--card-pad);
@@ -1055,7 +1088,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: relative;
 }
 .card__face > * { min-width: 0; }
-.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, calc(var(--tap-base) * 25 / 4)); overflow: hidden; }
+.card__middle { flex: 1 0 auto; display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, auto); overflow: hidden; }
 .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; }
@@ -1079,7 +1112,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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);
@@ -1096,7 +1129,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 /* 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; }
+.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
@@ -1107,6 +1140,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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 {
@@ -1721,7 +1757,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   letter-spacing: var(--track-display);
   /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
      measured from the card's top edge); line two runs under the next card */
-  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5));
+  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5) - var(--_mark-room)); /* --_mark-room: card.css, the room for the marks over line one */
 }
 /* fanned stack: a toggle opens the stack wider so every peek shows more */
 .sheet-stack--fanned { --stack-step: calc(var(--tap-base) * 19 / 6); }
@@ -2418,6 +2454,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: var(--map-radius, var(--r-media));
   overflow: hidden;
 }
+.map--bleed { margin-inline: calc(-1 * var(--card-pad, 0rem)); border-radius: 0; } /* edge to edge is a band, and a band has no corner; --map-radius is for the box in the inset */
 .sheet__body:has(> .map--inline:only-child) { display: flex; flex-direction: column; }
 .sheet__body > .map--inline:only-child { flex: 1 0 auto; }
 
@@ -2542,8 +2579,15 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .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 .sheet__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; }
@@ -2830,9 +2874,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* stretch: a date in a head (Lh 2026-10-19) — as tall as the title block beside it and no taller (the head stretches it; size
    containment keeps its own words from adding height). Its height picks the form: short (a one-line title) = two lines, the day name
-   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. */
+   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;
   inline-size: calc(var(--fs-lg) * 3.25);
   grid-template-columns: auto auto;
@@ -2842,14 +2889,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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; }
-@container (min-height: 5.5rem) {
+@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; }
+
 /* 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); }
 
@@ -2947,6 +2996,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
+/* the bigger round sizes (`IconBtn size`): lg is the hero control's size (--tap-lg), xl the biggest (--tap-xl), both on --tap-base like every size.
+   What stands inside is a share of the circle (`--_ib`, its side), so it grows with it: the ICON is --icon-btn-icon of the side (7/12, the share of the default 48px
+   button's 28px icon), and a WORD (a string child) keeps to --icon-btn-word-max of the side (0.45: a word of four letters stays inside) — it still
+   grows with the member's text size, to that ceiling and no further. The default and the sm button keep their icon tokens and their word as before. */
+.icon-btn--lg { --_ib: var(--icon-btn-lg-size, var(--tap-lg)); width: var(--_ib); height: var(--_ib); }
+.icon-btn--xl { --_ib: var(--icon-btn-xl-size, var(--tap-xl)); width: var(--_ib); height: var(--_ib); }
+:is(.icon-btn--lg, .icon-btn--xl) { font-size: min(var(--fs-lg), calc(var(--_ib) * var(--icon-btn-word-max, 0.45))); }
+:is(.icon-btn--lg, .icon-btn--xl) > .icon { --icon-size: calc(var(--_ib) * var(--icon-btn-icon, 7 / 12)); --icon-sm-size: var(--icon-size); --icon-lg-size: var(--icon-size); } /* the Icon's own knobs */
 /* ---- icon button group: up to four icon-only commands in ONE frame (Lh 2026-09-29) ----
    <div class="icon-btn-group" role="group"><button class="icon-btn" aria-label="…">…</button>…</div>
    One pill as tall as a button, the buttons share its width, a hairline between them; in a foot it takes the row. */
@@ -3004,7 +3061,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   min-height: var(--btn-h);
   text-decoration: none; /* .btn works as <a> too */
 }
-.btn--primary { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
+/* primary: a Btn and a round IconBtn fill alike, from the same tokens (the palette's primary — orchard's yellow — retunes both) */
+:is(.btn--primary, .icon-btn--primary) { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
 /* quiet keeps a faint outline so it still reads as a button on colored palettes;
    it is ink on whatever it sits on — inherit, or on the dark slot (card--3) it
    would take the light-card action ink and vanish */
@@ -3052,12 +3110,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .dot--error { background: var(--signal-error); }
 .dot--info { background: var(--signal-info); }
 /* --sm: a small LABEL (a name on a note, a tag in a tight head) — low and tight; never a tap target */
-.chip--sm { min-height: 0; gap: var(--chip-sm-gap, var(--sp-1)); padding: var(--chip-sm-pad-y, var(--sp-0)) var(--chip-sm-pad-x, var(--sp-2)); }
+/* one height wherever it stands (Lh 2026-10-21): the body's line, so a head that cuts its words with an ellipsis keeps the Thai marks over them, and a foot's or a middle's chip reads the same */
+.chip--sm { min-height: 0; gap: var(--chip-sm-gap, var(--sp-1)); padding: var(--chip-sm-pad-y, var(--sp-0)) var(--chip-sm-pad-x, var(--sp-2)); line-height: var(--chip-sm-line, var(--lh-body)); }
+/* soft: the accent washed into the chip's ground, no edge — a status to see, quieter than on (was the inbox Ribbon, Lh 2026-10-21) */
+.chip--soft { background: var(--chip-soft-bg, var(--accent-wash)); color: var(--chip-soft-ink, var(--card-ink)); border-color: transparent; } /* the wash on the chip's own paper, opaque (--accent-wash): see-through, a dark tone came through under the light side's ink (ink.spec) */
 .chip--on { background: var(--chip-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--chip-on-ink, var(--card-ink)); border-color: transparent; }
 /* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (docs/reference.md 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); } /* the chip's own fill's muted words: a muted chip on the dark card is still a light chip */
 
 .chip-row { display: flex; gap: var(--sp-2); }
+/* the words that lead the chips (ChipRow `lead`, "นัดที่" before a place, Lh 2026-10-21): the chips' own type and size, at the middle of their height */
+.chip-row__lead { align-self: center; font: var(--type-label); font-size: var(--chip-font-size, var(--fs-sm)); color: var(--chip-row-lead-ink, inherit); }
 .chip-row:not(.bleed) { flex-wrap: wrap; } /* a strip (.bleed, card.css) stays one line */
 .chip-row.bleed > .chip { flex: none; white-space: nowrap; } /* a chip of the strip keeps its words on one line at its own width: the strip scrolls, a chip never shrinks to fit it */
 
@@ -3310,8 +3373,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- where it sits in what card.css draws (docs/reference.md rule 15) ---- */
 /* a head's ChipRow takes a line of its own under the title: at most two lines of chips, a chip's words cut with an ellipsis */
-.card__head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * 1.5 + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
-.card__head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-body); }
+.card__head > .chip-row { flex: 1 1 100%; order: 2; max-height: calc(2 * (var(--fs-sm) * var(--chip-sm-line, var(--lh-body)) + 2 * var(--chip-sm-pad-y, var(--sp-0)) + 2 * var(--border-w)) + var(--sp-2)); overflow: hidden; }
+/* …beside a date that leads the head (card.css) they stand in the date's row, every chip in sight: the meeting place may take a line of its own */
+.card__head:has(> .tile-badge:first-child + .chip-row) > .chip-row { grid-column: 2; grid-row: 1; max-height: none; }
+.card__head > .chip-row > .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
 /* …unless the button says its own size: `Btn form` is as wide as its words in a foot too, centred (Lh 2026-10-10: one button filling
    a card's foot read too big — which button a card wears is the project's choice, so the foot must not undo it) */
@@ -6012,7 +6077,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 }
 /* the main button throws its own colour */
 [data-finish="lit"] .btn--primary,
-[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+[data-finish="lit"] :is(.icon-btn--invert, .icon-btn--primary):not(.icon-btn-group > *) {
   box-shadow: var(--finish-edge),
     0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 20%, transparent),
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);

package/dist/cards/Card.d.ts

@@ -43,6 +43,8 @@ export interface CardProps extends ComponentProps<'article'> {
     foot?: ReactNode;
     /** the small Link under the foot's buttons (CardFoot `link`) */
     footLink?: ReactNode;
+    /** the foot is a few big ROUND buttons (CardFoot `round`): `foot` holds `IconBtn`s, stood as one centred group a fixed gap apart */
+    footRound?: boolean;
     /** set by `SheetStack` from the app's `open` and `refreshing`. The card renders its place, its grip and its pull. Leave it unset on any other card */
     stack?: StackPlace;
     /** THE CARD LEAVES — the card floats away: up and out with a small turn, as one piece with all it holds (a stamp that has just landed on it goes with it).
@@ -59,8 +61,8 @@ export interface CardProps extends ComponentProps<'article'> {
     onRemove?: () => void;
     /** THE BACK — the card has two faces and the member turns the WHOLE card over: a tap anywhere on it that is not on a control asks for the other
      *  face. The head and the foot (`heading`/`caption`/`end` or a CardHead child, `foot`) are given once and drawn on BOTH faces, so they read the same
-     *  either way; the children are the front's middle, `back` the back's. The middle is one fixed height on both faces (knob `--card-middle-h`), so the
-     *  card never changes height when it turns. The hidden face is `inert`; an `id` in the head or the foot would be drawn twice, so give it none.
+     *  either way; the children are the front's middle, `back` the back's. The card is as tall as its taller face and each face fills it, the middle taking
+     *  what is left, so the card never changes height when it turns (knob `--card-middle-h` fixes the middle's height instead). The hidden face is `inert`; an `id` in the head or the foot would be drawn twice, so give it none.
      *  Not on a `row`, `sm` or `stack` card */
     back?: ReactNode;
     /** CONTROLLED: the face that shows — pair it with `onFaceChange`. The app owns it */
@@ -87,7 +89,7 @@ export interface CardProps extends ComponentProps<'article'> {
  * TWO FACES (`back`): the whole card turns over on a tap off a control (the flip mechanic it shares with Postcard); the head and the foot
  * read the same on both faces, the middle is one fixed height. `paper="bands"`: paper head and foot bands edge to edge, the tint between.
  */
-export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace, onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
+export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, footRound, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace, onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
     onClick: (e: MouseEvent<HTMLElement>) => void;
     inert?: boolean | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/cards/Card.js

@@ -19,7 +19,7 @@ import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '.
  * TWO FACES (`back`): the whole card turns over on a tap off a control (the flip mechanic it shares with Postcard); the head and the foot
  * read the same on both faces, the middle is one fixed height. `paper="bands"`: paper head and foot bands edge to edge, the tint between.
  */
-export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace = 'front', onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }) {
+export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, footRound, stack, leave, onLeft, onRemove, removeLabel, back, face, defaultFace = 'front', onFaceChange, toBackLabel, toFrontLabel, className, style, children, onClick, ref, ...rest }) {
     if (onRemove && !row)
         warnOnce('card-remove-row', 'cardds Card: `onRemove` draws its cross on a `row` card only');
     if (back != null && (row || sm || stack))
@@ -118,10 +118,10 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         const ownHeadKid = kids.find((c) => isValidElement(c) && c.type === CardHead);
         const ownFootKid = kids.find((c) => isValidElement(c) && c.type === CardFoot);
         const front = kids.filter((c) => c !== ownHeadKid && c !== ownFootKid);
-        const side = (which, middle) => (_jsxs("div", { className: cx('card__face flip__face', `flip__face--${which}`), ...((which === 'back') !== flipped ? { inert: true } : {}), children: [_jsx("button", { type: "button", className: "card__turn", "aria-label": which === 'front' ? toBackLabel ?? word('turnToBack') : toFrontLabel ?? word('turnToFront'), onClick: () => ask(which === 'front' ? 'back' : 'front') }), head ? _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }) : ownHeadKid, _jsx("div", { className: "card__middle", children: which === 'front' ? front : middle }), tail ? _jsx(CardFoot, { link: footLink, children: foot }) : ownFootKid] }, which));
+        const side = (which, middle) => (_jsxs("div", { className: cx('card__face flip__face', `flip__face--${which}`), ...((which === 'back') !== flipped ? { inert: true } : {}), children: [_jsx("button", { type: "button", className: "card__turn", "aria-label": which === 'front' ? toBackLabel ?? word('turnToBack') : toFrontLabel ?? word('turnToFront'), onClick: () => ask(which === 'front' ? 'back' : 'front') }), head ? _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }) : ownHeadKid, _jsx("div", { className: "card__middle", children: which === 'front' ? front : middle }), tail ? _jsx(CardFoot, { link: footLink, round: footRound, children: foot }) : ownFootKid] }, which));
         return createElement(as, props, inner(_jsxs(_Fragment, { children: [side('front', null), side('back', back)] })));
     }
     if (!head && !tail)
         return createElement(as, props, inner(_jsxs(_Fragment, { children: [children, cross] })));
-    return createElement(as, props, inner(_jsxs(_Fragment, { children: [head && _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }, "head"), Children.toArray(children), tail && _jsx(CardFoot, { link: footLink, children: foot }, "foot"), cross] })));
+    return createElement(as, props, inner(_jsxs(_Fragment, { children: [head && _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }, "head"), Children.toArray(children), tail && _jsx(CardFoot, { link: footLink, round: footRound, children: foot }, "foot"), cross] })));
 }

package/dist/cards/CardFoot.d.ts

@@ -3,8 +3,13 @@ export interface CardFootProps extends ComponentProps<'div'> {
     /** a SMALL LINK under the buttons, centred on its own short row (a `Link sm` — "details for developers") — the same as an
      *  ActionBar's ctaLink (Lh 2026-09-23). It never takes a share of the buttons' line */
     link?: ReactNode;
+    /** a foot of a few ROUND buttons (`IconBtn`, a size `lg` / `xl` for the big ones): they keep their own size instead of sharing the line, and
+     *  stand as ONE group in the middle of the foot, a fixed gap apart (wider than the Btns' — `--card-foot-gap` sets it). The Btn foot is
+     *  unchanged: this is the other foot, for a few big round answers */
+    round?: boolean;
 }
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
  *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
- *  should not fill the card. */
-export declare function CardFoot({ link, className, children, ...rest }: CardFootProps): import("react").JSX.Element;
+ *  should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one `primary` with a word, the others
+ *  with icons): one centred group, a fixed gap between them. */
+export declare function CardFoot({ link, round, className, children, ...rest }: CardFootProps): import("react").JSX.Element;

package/dist/cards/CardFoot.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
  *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
- *  should not fill the card. */
-export function CardFoot({ link, className, children, ...rest }) {
-    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
+ *  should not fill the card. With `round` it is the foot of a few round `IconBtn`s (`size="xl"`, one `primary` with a word, the others
+ *  with icons): one centred group, a fixed gap between them. */
+export function CardFoot({ link, round, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', round && 'card__foot--round', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
 }