@usableapp/cardds 0.7.101 → 0.7.102

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap. Each release section after 0.7.97 carries one `Components:` line, written by `node scripts/components-changed.mjs <previous tag>`: the components the release changed, or `all` when a file changed that any component can read (a token, the build), or `none`; check only the screens that import those.
 
+## 0.7.102 — 2026-10-19
+
+A framed write-in of several lines: `Field rows`; an icon among words stays on the line; a date badge in a card's corner takes the card's corner; a meeting place on a map is a pin at the centre, not the ring; a day picked from a run of weeks that scrolls, two in sight, the month and year on a head that stays; a card that turns over, a two-tone card, and a date badge that takes its form from the title beside it (Lh 2026-10-19, timebank's request card, approved design).
+
+Components: all
+
+### Added
+- **`Field rows={n}`: several lines in the same frame** (Lh 2026-10-19, timebank's ask sheet: the request and, under it, its reason). Before → after: a member's words had only two homes, a one-line `Field` (framed) and a `Composer` (bare, display type, the one big write-in), so two things to write on the ask sheet were a `Composer` with a `ComposerArea`, which Lh rejected as the wrong meaning: each must read as a framed box → `<Field rows={4} />` over `<Field rows={2} />`: the same outlined label wrapper (`.field.field--rows`) round a `textarea` of that many lines, the placeholder still the label, the request box taller than the reason box. `error`, `required`, `icon` and `action` work as on one line (the icon on the first line, the action at the top); `mask`, `format` and `digits` are for one line and are ignored with `rows` (warns once). A frame says "tap me", so a framed write-in is a `Field`, not a `Composer`: the `Composer` stays the one big bare write-in. Knob `--field-rows-pad-y` (`--sp-3`, the room above and below the lines). Gallery `Field/Rows` · `Field/RowsDark`.
+- **A `JourneyBadge` first or last in a `CardHead` takes a corner concentric with the card's** (timebank's date box in the card's top corner, which set `--tile-badge-radius` by hand). Before → after: a badge in the head's corner kept the badge's own corner (13), so it sat loosely in the card's big one → the card's corner less its padding (`--r-card` minus `--card-pad`: 21.6 with the defaults), set by the card's first head on the badge at its edge. A theme's `--tile-badge-radius` still wins; no new knob. A badge in the middle of a head, on a media or on a sheet keeps `--r-badge`. Every badge that already stood last in a card's first head follows (the style snapshot names them: `Card/CardHeadCustom`, `Tile/JourneyBadgeGate`, `Route/Flight`, `Route/TwoLegs`, `Route/Dark`, `NoteRow/Transit`, `NoteRow/Dark`, and the unfilled badge of `Mosaic/PhotoCard`, whose corner shows nothing); it is the same rule, not a second one. Gallery `Tile/JourneyBadgeInHeadCorner` shows first and last.
+- **`MapArea mark="pin"`: an exact point at the centre instead of the ring** (Lh 2026-10-19: every meeting position is a clear pin at the centre of the map, never the circle). Before → after: `MapArea` always drew the ring, the rough area, at the centre of its box (behind a stage, of the band a half sheet leaves open) → `mark="pin"` draws a pin there (`<span class="map__pin">` with the new `map-pin` icon), its TIP on the point the ring's centre sat, so a map engine reads the pin's bottom-centre (`ringRef` and `ringLabel` keep their names and now name the centre mark, whatever its shape; `ringLabel` defaults to "จุดนัด" for a pin, "ย่านของคุณโดยประมาณ" for the ring). The pin's ink is the map's own ground's (`--card-ink` on the tone-2 side it stands on, like `.map__hint`), not the inherited `--accent`: in a dark sheet that accent is the card's ondark ink, cream on clay's orange map. The default `mark="ring"` changes nothing; the ring stays for a rough area. Knobs `--map-pin-size` · `--map-pin-ink` · `--map-pin-drop`. New icon `map-pin`. Gallery `MapArea/Pin`, `MapArea/PinStage`.
+- **`CalendarWeeks`: a run of weeks that scrolls week by week, `show` rows in sight (2 by default), the month · year of the first row in sight on a sticky head** (timebank, Lh 2026-10-19: the member picks a day for the help on a step with little height). Before → after: a day was picked from `Calendar` (one month in detail, too tall for a step, turning pages with prev/next) or `DayStrip` (one week, no scroll, no month) → `<CalendarWeeks weeks={…} selected={key} onSelect={…} />` shows two week rows under the weekday heads, snaps one week per scroll, and the head's label follows the first row in sight; `onLabelClick` makes the label a button for the app's own month / year pick. It opens at the week that holds today (Lh 2026-10-19: "ปฏิทินต้องแสดงวันนี้เสมอ"), that row the first in sight at once, no scroll to watch; with no `today` in the data it opens at the first week. The app builds every date: `weeks: { label, days: { key, num, today?, disabled?, mark?: 'soft' | 'strong' }[] }[]`. The cells are Calendar's (`.calendar__day`, every `--calendar-*` knob reaches both); a day with `today` carries `aria-current="date"` (underlined). Knobs `--calendar-weeks-head-bg` · `--calendar-label-font` · `--calendar-label-ink`. Gallery `CalendarWeeks/TwoWeeks` · `Controlled` · `LabelPick` · `Thai`. On a sheet, never in a Card.
+- **`Card back`: the whole card turns over.** Before → after: a card had one face; a thing read on both sides (a request, its QR on the back) needed two cards or a hand-built flip → `back={…}` gives the card a back middle; a tap anywhere on the card off a control turns the whole card (3D, `--motion-flip`; an instant swap under prefers-reduced-motion) and taps again turn it back. The app owns the side: `face` + `onFaceChange`, or `defaultFace`. The head and the foot are given once and drawn on both faces (so give them no `id`); the hidden face is `inert`; a hidden turn button on each face is the keyboard's way (`toBackLabel` / `toFrontLabel`, default the words' `turnToBack` / new `turnToFront`). The middle is one fixed height on both faces, knob `--card-middle-h` (default 18.75rem), so the card keeps its height. Not on `row`, `sm` or `stack` cards (warns, ignored). Gallery `Card/Turns`, `Card/TurnsTwoLineTitle`, `Card/TurnsControlled`.
+- **`Card paper="bands"`: the two-tone card.** Before → after: `paper` made the content white and kept the head's colour → `paper="bands"` is the opposite: the head and the foot are white paper bands edge to edge over the card's padding (the foot band slim), no hairline, and the middle keeps the card's tone lightened, knob `--card-middle-bg` (default `color-mix(in srgb, var(--card-bg) 35%, var(--card-1-bg))`); the middle's words take the paper's side (35%, not timebank's 40%: at 40% the words on clay's tone 3 fall to 4.29:1). Gallery `Card/PaperBands`.
+- **`JourneyBadge stretch`: a date in a head.** As tall as the title block beside it and no taller; two lines beside a one-line title (day over number · month), three beside a two-line title. Knob `--tile-badge-line` (0.95).
+- **A ChipRow in a card head** takes a line of its own under the title, at most two lines, a chip's words cut with an ellipsis.
+
+### Changed
+- **The flip mechanic is shared.** The turn (`.flip`, `.flip__face`, `.flip__face--front`, `.flip__face--back`, `.is-flipped`) now lives once in base.css; `Postcard` and `Card back` both read it. Postcard is unchanged on screen (style snapshot: 0 property differences over 477 stories).
+
+### Fixed
+- **An `Icon` among words stays on the line** (timebank 2026-10-19: "clock 12:30 hourglass 1 ชั่วโมง" could not sit on one line). Before → after: `img, svg { display: block }` made an `Icon` inside a `Text` a block, so the story `Icon/InContext` put the map icon on a line above "Telok Ayer Park · 1.2 km" (a caption of 23 became 40 tall, a body of 33 became 80 with two icons) → an icon that is a direct child of a type level (`Text`) is `inline-block`, centred on the words' x-height, and the line keeps its height. An icon in a `Btn`, `Chip`, `Link`, `Row` or `IconBtn` is a flex item and does not move. Gallery `Text/IconInLine`.
+
 ## 0.7.101 — 2026-10-19
 
 A list that keeps only a few past entries in sight, a cross that takes a row card off its list, and a postcard that keeps the caret where it was when its paper is full.

package/css/base.css

@@ -78,6 +78,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .icon--sm { width: var(--icon-sm-size, var(--icon-sm)); height: var(--icon-sm-size, var(--icon-sm)); }
 .icon--xs { width: var(--icon-xs-size, var(--icon-xs)); height: var(--icon-xs-size, var(--icon-xs)); } /* inside captions, chips, links */
 .icon--lg { width: var(--icon-lg-size, var(--icon-lg)); height: var(--icon-lg-size, var(--icon-lg)); } /* empty states */
+/* an icon among words sits ON the line: `img, svg { display: block }` above would put it on a line of its own. Only a direct child of a
+   type level is running text; an icon in a button, chip, link or row is a flex/grid item and never matches. */
+:is(.t-display, .t-h1, .t-h2, .t-title, .t-body, .t-label, .t-caption) > .icon { display: inline-block; vertical-align: middle; }
 
 /* mobile screen column — the standard horizontal inset, and nothing vertical.
    Top is zero on purpose: room there is only ever a RESERVE for something
@@ -209,3 +212,20 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .empty-state__action { margin-top: var(--sp-2); }
 /* inside a card (a card's own "nothing yet"): the card's ink */
 .card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
+
+/* ---- the turn: one flip mechanic for everything with two faces (a Postcard, a Card's `back`).
+   The faces share one grid cell and turn on Y at --motion-flip; where motion is off they swap at once.
+   The owner sets the box's size and the faces' look; .is-flipped on .flip shows the back. */
+.flip { perspective: 60rem; display: grid; }
+.flip__face {
+  grid-area: 1 / 1;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transition: transform var(--motion-flip) ease-in-out;
+}
+.flip__face--back { transform: rotateY(180deg); }
+.flip.is-flipped > .flip__face--front { transform: rotateY(-180deg); }
+.flip.is-flipped > .flip__face--back { transform: rotateY(0); }
+@media (prefers-reduced-motion: reduce) {
+  .flip__face { transition: none; }
+}

package/css/card.css

@@ -96,6 +96,56 @@
 .card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
 .card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 
+/* 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)); }
+
+/* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are white 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. */
+: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 */
+
+/* ---- 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
+   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;
+  gap: var(--card-gap);
+  min-width: 0;
+  padding: var(--card-pad);
+  background: var(--card-bg);
+  border: var(--border-w) solid var(--card-border);
+  border-radius: inherit;
+  overflow: hidden;
+  position: relative;
+}
+.card__face > * { min-width: 0; }
+.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, 18.75rem); overflow: hidden; }
+.card__turn { position: absolute; inset: 0; width: 1px; height: 1px; 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)); }
+/* 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: 1.5; }
+.card__head > .chip-row > .chip > .icon { display: inline-block; vertical-align: -0.15em; margin-inline-end: var(--chip-sm-gap, var(--sp-1)); }
+
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
    a tile grid: the TRACK reaches the edges so it reads as scrollable, while

package/css/choice.css

@@ -154,6 +154,28 @@
 .calendar__day--mark2 { background: var(--calendar-day-mark2-bg, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--calendar-day-mark2-ink, inherit); box-shadow: var(--calendar-day-mark2-shadow, inset 0 0 0 var(--border-w) var(--accent)); }
 .calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: 700; }
 .calendar__day:disabled { opacity: 0.3; }
+.calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
+
+/* ---- 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>
+   --_weeks-h (head + `show` rows) and --_weeks-lead (the head and the gap under it, where a row snaps) are measured by src/choice/CalendarWeeks.tsx; the cells and every --calendar-* knob are Calendar's */
+.calendar--weeks {
+  position: relative;
+  max-height: var(--_weeks-h, none);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y mandatory;
+  scroll-padding-block-start: var(--_weeks-lead, 0px);
+  overflow-anchor: none; /* a pick rerenders the rows; the browser must not shift the scroll to keep an anchor */
+  scrollbar-width: none;
+}
+.calendar--weeks::-webkit-scrollbar { display: none; }
+.calendar__weeks-head { position: sticky; inset-block-start: 0; z-index: 1; display: grid; gap: var(--calendar-head-gap, var(--sp-2)); background: var(--calendar-weeks-head-bg, var(--card-bg)); }
+.calendar__label { font: var(--calendar-label-font, var(--type-label)); color: var(--calendar-label-ink, inherit); justify-self: start; }
+button.calendar__label { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--sp-1); }
+button.calendar__label:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
+.calendar__week { scroll-snap-align: start; }
 
 /* ---- mood: five dots in a pill, the picked one grows ----
    <fieldset class="mood"><label class="mood__opt"><input type="radio" name="mood"><span class="mood__dot"></span></label>×5</fieldset> */

package/css/forms.css

@@ -2,6 +2,7 @@
    cardds/forms.css — inputs + inline form actions
    .field: flat outlined input, the label IS the placeholder.
    Markup: <label class="field"><svg?/><input placeholder="Passport Number"></label>
+   Several lines (Field rows): <label class="field field--rows"><svg?/><textarea rows="4" placeholder="…"></textarea></label>
    ============================================================ */
 
 .field {
@@ -19,17 +20,28 @@
 }
 
 .field input,
-.field select {
+.field select,
+.field textarea,
+.field--rows {
+  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does. .field--rows too, so 1lh is the textarea's line for its icon */
+}
+.field input,
+.field select,
+.field textarea {
   border: 0;
   background: transparent;
   color: inherit;
-  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does */
   width: 100%;
   min-width: 0;
   outline: none; /* the browser's ring drew a second box inside the field (Lh 2026-09-22) — the field itself tells focus */
   caret-color: currentColor;
 }
-.field input::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+.field input::placeholder,
+.field textarea::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+/* several lines in the same frame (Field rows): the textarea is as tall as its `rows` × line, the frame grows round it, the icon and the action stay at the top (Lh 2026-10-19) */
+.field--rows { align-items: flex-start; padding-block: var(--field-rows-pad-y, var(--sp-3)); }
+.field textarea { flex: 1; resize: none; display: block; }
+.field--rows > .icon { margin-top: calc((1lh - var(--icon-sm)) / 2); } /* centred on the first line */
 /* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
 .field:has(:focus, [data-cursor]) { border-color: var(--field-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this field */
 

package/css/journey.css

@@ -35,7 +35,7 @@
   justify-items: center;
   gap: var(--tile-badge-gap, var(--sp-0));
   padding: var(--tile-badge-pad-y, var(--sp-1)) var(--tile-badge-pad-x, var(--sp-2));
-  border-radius: var(--tile-badge-radius, var(--r-badge));
+  border-radius: var(--tile-badge-radius, var(--_badge-radius, var(--r-badge)));  /* --_badge-radius: card.css, a badge in a card's corner */
   background: var(--tile-badge-bg, var(--card-3-bg));
   --dark: var(--card-3-dark);
   color: var(--tile-badge-ink, var(--card-ink));
@@ -49,6 +49,28 @@
 .tile-badge--plain { background: transparent; --dark: inherit; color: inherit; padding: 0; min-width: var(--tile-badge-plain-min-w, var(--tap-sm)); }
 .tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
 
+/* 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. */
+.tile-badge--stretch {
+  align-self: stretch;
+  container-type: size;
+  inline-size: calc(var(--fs-lg) * 3.25);
+  grid-template-columns: auto auto;
+  align-content: center;
+  justify-content: center;
+  align-items: baseline;
+  column-gap: var(--sp-1);
+  row-gap: 0;
+  padding-block: var(--sp-3);
+  line-height: var(--tile-badge-line, 0.95);
+}
+.tile-badge--stretch > * { line-height: inherit; }
+.tile-badge--stretch > :first-child { grid-column: 1 / -1; }
+@container (min-height: 5.5rem) {
+  .tile-badge--stretch > * { grid-column: 1 / -1; }
+}
+
 /* 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/media.css

@@ -197,8 +197,8 @@
    liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
+  display: block; /* its faces lie absolute over the box (.flip's grid cell is not used) */
   min-height: var(--postcard-min-h, var(--_cover-min-h));
-  perspective: 60rem;
   border-radius: var(--postcard-radius, var(--r-card));
   isolation: isolate;
 }
@@ -211,9 +211,6 @@
   border-radius: inherit;
   overflow: hidden;
   isolation: isolate;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transition: transform var(--motion-flip) ease-in-out;
   box-shadow: var(--postcard-face-shadow, var(--shadow-float));
 }
 /* the turn: the button that fills the face, under the band */
@@ -253,7 +250,6 @@
   background: var(--postcard-back-bg, var(--card-2-bg));
   --dark: var(--card-2-dark);
   color: var(--postcard-back-ink, var(--card-ink));
-  transform: rotateY(180deg);
 }
 .postcard__back .postcard__turn { align-content: start; padding-top: var(--postcard-back-top, 20%); gap: var(--postcard-back-gap, var(--sp-5)); } /* the name a fifth down the paper, the words after it */
 .postcard__caption { margin: 0; font: var(--postcard-caption-font, var(--type-title)); text-wrap: pretty; }
@@ -272,13 +268,8 @@
 .postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
 .postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-ink)); --accent-dark: calc(1 - var(--dark)); }
 .postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
-.postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
-.postcard.is-flipped > .postcard__back { transform: rotateY(0); }
 /* a voice note on the back: no words to read — its timeline (a Progress), its length and the control to hear it
    under them, at the middle over the turn, on the face's inset; the app plays and keeps the time */
 .postcard__voice { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
 .postcard__voice > * { pointer-events: auto; }
 .postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
-@media (prefers-reduced-motion: reduce) {
-  .postcard__face { transition: none; }
-}

package/css/sheet.css

@@ -355,7 +355,9 @@
    wireframe's street pattern, so a map is never a hole. The ring marks the
    rough area the member is choosing: fixed at the box's centre, so dragging
    the map underneath is what moves it (the centre IS the choice), never a
-   pin to place. The hint rides at the top, under the bar's line. */
+   pin to place. The hint rides at the top, under the bar's line.
+   For a MEETING place (Lh 2026-10-19) the centre mark is a pin instead of the ring: `.map__pin`, below the ring's rule,
+   its tip on the point the ring's centre sits. */
 .map {
   position: absolute;
   inset: 0;
@@ -383,6 +385,24 @@
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
+.map__pin { /* mark="pin": an exact point — the pin's TIP is where the ring's centre sits, so the engine reads the element's bottom-centre */
+  position: absolute;
+  left: 50%;
+  top: var(--_band-centre);
+  width: var(--map-pin-size, var(--tap));
+  height: var(--map-pin-size, var(--tap));
+  translate: -50% -100%;
+  /* ink follows its ground: the pin stands on the map's own tone-2 fill, not on the sheet round it — in a dark sheet the inherited
+     --accent is the card's ondark ink, cream on clay's orange map (2.8:1); so the pin takes the tone's side and its ink (tokens.css) */
+  --dark: var(--card-2-dark);
+  color: var(--map-pin-ink, var(--card-ink));
+  filter: drop-shadow(var(--map-pin-drop, var(--shadow-float)));
+  pointer-events: none;
+  z-index: 1;
+}
+/* the lucide tip stops 2.2 of 24 short of the box's bottom: lowered so the tip IS the bottom-centre; filled with the surface so the
+   street pattern never shows through the pin's body */
+.map__pin > .icon { width: 100%; height: 100%; translate: 0 9%; fill: var(--surface); }
 .map__credit { /* the tile provider's credit — required by OSM; a caption, not the engine's own control */
   position: absolute;
   right: var(--sp-2);

package/css/tokens.css

@@ -281,8 +281,8 @@
    surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
    tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
-  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .sheet--paper > .sheet__body,
-  .postcard__band, .track__step, .toggle, .chip) {
+  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > .sheet__body,
+  .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.card__head, .card__foot), .card--bands > .card__face > :is(.card__head, .card__foot)) {
   --card-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--ink-onlight));
   --card-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--dark) * 100%), var(--ink-onlight-muted));
   --on-accent: color-mix(in srgb, var(--ink-ondark) calc(var(--accent-dark) * 100%), var(--ink-onlight));

package/dist/cardds.css

@@ -322,8 +322,8 @@
    surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
    tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; docs/reference.md "Ink follows its ground" */
 :where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
-  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .sheet--paper > .sheet__body,
-  .postcard__band, .track__step, .toggle, .chip) {
+  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .map__pin, .sheet--paper > .sheet__body,
+  .postcard__band, .track__step, .toggle, .chip, .card__face, .card--bands > :is(.card__head, .card__foot), .card--bands > .card__face > :is(.card__head, .card__foot)) {
   --card-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--ink-onlight));
   --card-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--dark) * 100%), var(--ink-onlight-muted));
   --on-accent: color-mix(in srgb, var(--ink-ondark) calc(var(--accent-dark) * 100%), var(--ink-onlight));
@@ -571,6 +571,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .icon--sm { width: var(--icon-sm-size, var(--icon-sm)); height: var(--icon-sm-size, var(--icon-sm)); }
 .icon--xs { width: var(--icon-xs-size, var(--icon-xs)); height: var(--icon-xs-size, var(--icon-xs)); } /* inside captions, chips, links */
 .icon--lg { width: var(--icon-lg-size, var(--icon-lg)); height: var(--icon-lg-size, var(--icon-lg)); } /* empty states */
+/* an icon among words sits ON the line: `img, svg { display: block }` above would put it on a line of its own. Only a direct child of a
+   type level is running text; an icon in a button, chip, link or row is a flex/grid item and never matches. */
+:is(.t-display, .t-h1, .t-h2, .t-title, .t-body, .t-label, .t-caption) > .icon { display: inline-block; vertical-align: middle; }
 
 /* mobile screen column — the standard horizontal inset, and nothing vertical.
    Top is zero on purpose: room there is only ever a RESERVE for something
@@ -703,6 +706,23 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* inside a card (a card's own "nothing yet"): the card's ink */
 .card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
 
+/* ---- the turn: one flip mechanic for everything with two faces (a Postcard, a Card's `back`).
+   The faces share one grid cell and turn on Y at --motion-flip; where motion is off they swap at once.
+   The owner sets the box's size and the faces' look; .is-flipped on .flip shows the back. */
+.flip { perspective: 60rem; display: grid; }
+.flip__face {
+  grid-area: 1 / 1;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transition: transform var(--motion-flip) ease-in-out;
+}
+.flip__face--back { transform: rotateY(180deg); }
+.flip.is-flipped > .flip__face--front { transform: rotateY(-180deg); }
+.flip.is-flipped > .flip__face--back { transform: rotateY(0); }
+@media (prefers-reduced-motion: reduce) {
+  .flip__face { transition: none; }
+}
+
 /* ---- css/card.css — card boundary + list variants ---- */
 /* ============================================================
    cardds/card.css — the card boundary + list variants
@@ -802,6 +822,56 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
 .card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 
+/* 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)); }
+
+/* ---- paper bands: the two-tone card (`Card paper="bands"`, Lh 2026-10-19): the head and the foot are white 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. */
+: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 */
+
+/* ---- 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
+   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;
+  gap: var(--card-gap);
+  min-width: 0;
+  padding: var(--card-pad);
+  background: var(--card-bg);
+  border: var(--border-w) solid var(--card-border);
+  border-radius: inherit;
+  overflow: hidden;
+  position: relative;
+}
+.card__face > * { min-width: 0; }
+.card__middle { display: grid; align-content: start; gap: var(--card-gap); height: var(--card-middle-h, 18.75rem); overflow: hidden; }
+.card__turn { position: absolute; inset: 0; width: 1px; height: 1px; 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)); }
+/* 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: 1.5; }
+.card__head > .chip-row > .chip > .icon { display: inline-block; vertical-align: -0.15em; margin-inline-end: var(--chip-sm-gap, var(--sp-1)); }
+
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
    a tile grid: the TRACK reaches the edges so it reads as scrollable, while
@@ -2018,7 +2088,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    wireframe's street pattern, so a map is never a hole. The ring marks the
    rough area the member is choosing: fixed at the box's centre, so dragging
    the map underneath is what moves it (the centre IS the choice), never a
-   pin to place. The hint rides at the top, under the bar's line. */
+   pin to place. The hint rides at the top, under the bar's line.
+   For a MEETING place (Lh 2026-10-19) the centre mark is a pin instead of the ring: `.map__pin`, below the ring's rule,
+   its tip on the point the ring's centre sits. */
 .map {
   position: absolute;
   inset: 0;
@@ -2046,6 +2118,24 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
+.map__pin { /* mark="pin": an exact point — the pin's TIP is where the ring's centre sits, so the engine reads the element's bottom-centre */
+  position: absolute;
+  left: 50%;
+  top: var(--_band-centre);
+  width: var(--map-pin-size, var(--tap));
+  height: var(--map-pin-size, var(--tap));
+  translate: -50% -100%;
+  /* ink follows its ground: the pin stands on the map's own tone-2 fill, not on the sheet round it — in a dark sheet the inherited
+     --accent is the card's ondark ink, cream on clay's orange map (2.8:1); so the pin takes the tone's side and its ink (tokens.css) */
+  --dark: var(--card-2-dark);
+  color: var(--map-pin-ink, var(--card-ink));
+  filter: drop-shadow(var(--map-pin-drop, var(--shadow-float)));
+  pointer-events: none;
+  z-index: 1;
+}
+/* the lucide tip stops 2.2 of 24 short of the box's bottom: lowered so the tip IS the bottom-centre; filled with the surface so the
+   street pattern never shows through the pin's body */
+.map__pin > .icon { width: 100%; height: 100%; translate: 0 9%; fill: var(--surface); }
 .map__credit { /* the tile provider's credit — required by OSM; a caption, not the engine's own control */
   position: absolute;
   right: var(--sp-2);
@@ -2431,6 +2521,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    cardds/forms.css — inputs + inline form actions
    .field: flat outlined input, the label IS the placeholder.
    Markup: <label class="field"><svg?/><input placeholder="Passport Number"></label>
+   Several lines (Field rows): <label class="field field--rows"><svg?/><textarea rows="4" placeholder="…"></textarea></label>
    ============================================================ */
 
 .field {
@@ -2448,17 +2539,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 
 .field input,
-.field select {
+.field select,
+.field textarea,
+.field--rows {
+  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does. .field--rows too, so 1lh is the textarea's line for its icon */
+}
+.field input,
+.field select,
+.field textarea {
   border: 0;
   background: transparent;
   color: inherit;
-  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does */
   width: 100%;
   min-width: 0;
   outline: none; /* the browser's ring drew a second box inside the field (Lh 2026-09-22) — the field itself tells focus */
   caret-color: currentColor;
 }
-.field input::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+.field input::placeholder,
+.field textarea::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+/* several lines in the same frame (Field rows): the textarea is as tall as its `rows` × line, the frame grows round it, the icon and the action stay at the top (Lh 2026-10-19) */
+.field--rows { align-items: flex-start; padding-block: var(--field-rows-pad-y, var(--sp-3)); }
+.field textarea { flex: 1; resize: none; display: block; }
+.field--rows > .icon { margin-top: calc((1lh - var(--icon-sm)) / 2); } /* centred on the first line */
 /* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
 .field:has(:focus, [data-cursor]) { border-color: var(--field-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this field */
 
@@ -2547,7 +2649,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   justify-items: center;
   gap: var(--tile-badge-gap, var(--sp-0));
   padding: var(--tile-badge-pad-y, var(--sp-1)) var(--tile-badge-pad-x, var(--sp-2));
-  border-radius: var(--tile-badge-radius, var(--r-badge));
+  border-radius: var(--tile-badge-radius, var(--_badge-radius, var(--r-badge)));  /* --_badge-radius: card.css, a badge in a card's corner */
   background: var(--tile-badge-bg, var(--card-3-bg));
   --dark: var(--card-3-dark);
   color: var(--tile-badge-ink, var(--card-ink));
@@ -2561,6 +2663,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .tile-badge--plain { background: transparent; --dark: inherit; color: inherit; padding: 0; min-width: var(--tile-badge-plain-min-w, var(--tap-sm)); }
 .tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
 
+/* 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. */
+.tile-badge--stretch {
+  align-self: stretch;
+  container-type: size;
+  inline-size: calc(var(--fs-lg) * 3.25);
+  grid-template-columns: auto auto;
+  align-content: center;
+  justify-content: center;
+  align-items: baseline;
+  column-gap: var(--sp-1);
+  row-gap: 0;
+  padding-block: var(--sp-3);
+  line-height: var(--tile-badge-line, 0.95);
+}
+.tile-badge--stretch > * { line-height: inherit; }
+.tile-badge--stretch > :first-child { grid-column: 1 / -1; }
+@container (min-height: 5.5rem) {
+  .tile-badge--stretch > * { grid-column: 1 / -1; }
+}
+
 /* 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); }
 
@@ -3536,6 +3660,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .calendar__day--mark2 { background: var(--calendar-day-mark2-bg, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--calendar-day-mark2-ink, inherit); box-shadow: var(--calendar-day-mark2-shadow, inset 0 0 0 var(--border-w) var(--accent)); }
 .calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: 700; }
 .calendar__day:disabled { opacity: 0.3; }
+.calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
+
+/* ---- 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>
+   --_weeks-h (head + `show` rows) and --_weeks-lead (the head and the gap under it, where a row snaps) are measured by src/choice/CalendarWeeks.tsx; the cells and every --calendar-* knob are Calendar's */
+.calendar--weeks {
+  position: relative;
+  max-height: var(--_weeks-h, none);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: y mandatory;
+  scroll-padding-block-start: var(--_weeks-lead, 0px);
+  overflow-anchor: none; /* a pick rerenders the rows; the browser must not shift the scroll to keep an anchor */
+  scrollbar-width: none;
+}
+.calendar--weeks::-webkit-scrollbar { display: none; }
+.calendar__weeks-head { position: sticky; inset-block-start: 0; z-index: 1; display: grid; gap: var(--calendar-head-gap, var(--sp-2)); background: var(--calendar-weeks-head-bg, var(--card-bg)); }
+.calendar__label { font: var(--calendar-label-font, var(--type-label)); color: var(--calendar-label-ink, inherit); justify-self: start; }
+button.calendar__label { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--sp-1); }
+button.calendar__label:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
+.calendar__week { scroll-snap-align: start; }
 
 /* ---- mood: five dots in a pill, the picked one grows ----
    <fieldset class="mood"><label class="mood__opt"><input type="radio" name="mood"><span class="mood__dot"></span></label>×5</fieldset> */
@@ -5161,8 +5307,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
+  display: block; /* its faces lie absolute over the box (.flip's grid cell is not used) */
   min-height: var(--postcard-min-h, var(--_cover-min-h));
-  perspective: 60rem;
   border-radius: var(--postcard-radius, var(--r-card));
   isolation: isolate;
 }
@@ -5175,9 +5321,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: inherit;
   overflow: hidden;
   isolation: isolate;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transition: transform var(--motion-flip) ease-in-out;
   box-shadow: var(--postcard-face-shadow, var(--shadow-float));
 }
 /* the turn: the button that fills the face, under the band */
@@ -5217,7 +5360,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background: var(--postcard-back-bg, var(--card-2-bg));
   --dark: var(--card-2-dark);
   color: var(--postcard-back-ink, var(--card-ink));
-  transform: rotateY(180deg);
 }
 .postcard__back .postcard__turn { align-content: start; padding-top: var(--postcard-back-top, 20%); gap: var(--postcard-back-gap, var(--sp-5)); } /* the name a fifth down the paper, the words after it */
 .postcard__caption { margin: 0; font: var(--postcard-caption-font, var(--type-title)); text-wrap: pretty; }
@@ -5236,16 +5378,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
 .postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-ink)); --accent-dark: calc(1 - var(--dark)); }
 .postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
-.postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
-.postcard.is-flipped > .postcard__back { transform: rotateY(0); }
 /* a voice note on the back: no words to read — its timeline (a Progress), its length and the control to hear it
    under them, at the middle over the turn, on the face's inset; the app plays and keeps the time */
 .postcard__voice { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
 .postcard__voice > * { pointer-events: auto; }
 .postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
-@media (prefers-reduced-motion: reduce) {
-  .postcard__face { transition: none; }
-}
 
 /* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout ---- */
 /* ============================================================