@usableapp/cardds 0.7.92 → 0.7.94

package/dist/cardds.css

@@ -120,7 +120,10 @@
 
   /* ---- radius ---- */
   --r-chip: 999px;        /* pills, chips, buttons — always fully round */
-  --r-card: calc(var(--r-base) * 2);         /* 41.6 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-card: calc(var(--r-base) * 2);         /* 41.6 the one card radius: every card, tile, menu, sheet, fab — but a row card (--r-card-row) */
+  --r-card-row: calc(var(--r-base) * 0.625); /* 13 a row card's corner (Lh 2026-10-17: a small card's corner shrinks to keep the big card's PROPORTION). Measured at 375:
+                                                whole cards stand 186–437 tall, corner/height 0.095–0.224 (Card · Skeleton 0.122); a two-line row stands 88, so its
+                                                corner is 11–20 — at 41.6 it was 0.475, a pill. 13 = 0.148 of 88. On --r-base, so a square theme squares it too */
   --r-media: var(--r-base);        /* 20.8 images inside cards */
   --r-control: calc(var(--r-base) * 0.875);  /* 18.2 fields, thumbs, menu rows */
   --r-badge: calc(var(--r-base) * 0.625);    /* 13 tile badge, bars */
@@ -485,7 +488,7 @@
    the member wants to copy), and inputs are untouched. Native buttons and
    links are matched by element; the rest by the class that makes them one */
 button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], a.btn, a.icon-btn, a.chip, label.chip, .chip--pick,
-.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .track__step, .pager__at {
+.segment__item, .day, .calendar__day, .mood__opt, .pin__cell, .slider, .picker__item, .float-bar__item, .menu__item, .sheet__handle, .track__step, .pager__at, .map-pick {
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -992,7 +995,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card-list { display: grid; gap: var(--card-list-gap, var(--sp-3)); }
 
 .card--row {
-  border-radius: var(--card-row-radius, var(--r-card));
+  border-radius: var(--card-row-radius, var(--r-card-row)); /* small: the big card's corner in proportion, not its size */
   padding: var(--card-row-pad, var(--sp-4));
   display: flex;
   align-items: center;
@@ -1980,8 +1983,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
     repeating-linear-gradient(-18deg, transparent 0 8.75rem, var(--ink-tint) 8.75rem 9.25rem),
     var(--card-2-bg);
 }
-.map > :first-child { position: absolute; inset: 0; z-index: 0; isolation: isolate; } /* its own stacking context: an engine's layered panes stay under the ring */
-.sheet-stage__bg .map > :first-child { background: transparent; } /* an engine's own grey ground would hide the pattern while tiles load */
+.map > :first-child { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: transparent; } /* its own stacking context: an engine's layered panes stay under the ring; an engine's own grey ground would hide the pattern while tiles load */
 .map__ring {
   position: absolute;
   left: 50%;
@@ -2013,9 +2015,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .map__hint {
   position: absolute;
   top: calc(var(--_top, 0rem) + var(--sp-3));
-  left: 50%;
-  translate: -50% 0;
-  max-width: calc(100% - 2 * var(--sp-4));
+  /* centred by its two sides, not left 50% + translate: that left the words only half the map to wrap in, so a short hint broke onto two lines */
+  inset-inline: var(--sp-4);
+  width: fit-content;
+  margin-inline: auto;
   padding: var(--sp-2) var(--sp-4);
   border-radius: var(--map-hint-radius, var(--r-chip));
   background: var(--map-hint-bg, var(--card-3-bg));
@@ -2027,6 +2030,69 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   z-index: 1;
 }
 
+/* ---- the map IN FLOW (Lh 2026-10-17): `.map--inline` — a box in a card, or the whole of a sheet's body ----
+   <div class="sheet__body"><div class="map map--inline"><div>…the engine…</div><label class="map-pick" …>…</label>…
+     <span class="map__ring" …></span></div></div>
+   Choosing where to meet without leaving the sheet: the open sheet becomes the map and its head stays on top (a stage
+   behind a half sheet covers the head and changes the look). No stage, so no band and no bar: the ring is at the centre
+   of the map's OWN box and the hint at its own top. In a card it is a rounded media box; as a SheetBody's only child it
+   fills the body (the part above the foot), however far the sheet slid. */
+.map--inline {
+  --_top: 0rem;
+  --_band-centre: 50%;
+  position: relative;
+  min-height: var(--map-inline-h, calc(var(--map-ring) * 3 / 2));
+  border-radius: var(--map-radius, var(--r-media));
+  overflow: hidden;
+}
+.sheet__body:has(> .map--inline:only-child) { display: flex; flex-direction: column; }
+.sheet__body > .map--inline:only-child { flex: 1 0 auto; }
+
+/* ---- map pick: a place on the map the member taps to choose it (Lh 2026-10-17) ----
+   <label class="map-pick" style="top: 30%; left: 40%"><input type="radio" name="meet" value="library">
+     <span class="map-pick__mark">{icon}</span><span class="map-pick__name">ห้องสมุด</span></label>
+   A small round mark on its point and the place's short name under it — small, so five fit a phone's map (a Callout
+   is a card: five crowd it). The label is a --tap square centred on the point: the tap is never smaller than the
+   control floor however small the mark is drawn, and the name takes a tap too. The radios of one choice share a
+   name; the picked one fills with accent. Above the ring: the ring takes no taps, the places do. */
+.map-pick {
+  position: absolute;
+  z-index: 2;
+  width: var(--tap);
+  height: var(--tap);
+  translate: -50% -50%;
+  display: grid;
+  place-items: center;
+  color: var(--map-pick-ink, var(--on-surface));
+}
+.map-pick__mark {
+  display: grid;
+  place-items: center;
+  width: var(--map-pick-size, var(--sp-6));
+  height: var(--map-pick-size, var(--sp-6));
+  border-radius: 50%;
+  border: var(--border-w) solid var(--map-pick-border, var(--accent));
+  background: var(--map-pick-bg, var(--surface));
+  color: var(--map-pick-mark-ink, var(--accent));
+  box-shadow: var(--map-pick-shadow, var(--shadow-float));
+  pointer-events: none;
+}
+.map-pick__name {
+  position: absolute;
+  top: calc(50% + var(--map-pick-size, var(--sp-6)) / 2 + var(--sp-1));
+  left: 50%;
+  translate: -50% 0;
+  white-space: nowrap;
+  padding: 0 var(--sp-2);
+  border-radius: var(--map-pick-name-radius, var(--r-chip));
+  background: var(--map-pick-name-bg, color-mix(in srgb, var(--surface) 85%, transparent));
+  font: var(--map-pick-font, var(--type-caption));
+}
+.map-pick:has(:checked) { z-index: 3; } /* the picked place's name lies over a neighbour's */
+.map-pick:has(:checked) > :is(.map-pick__mark, .map-pick__name) { background: var(--map-pick-on-bg, var(--accent)); color: var(--map-pick-on-ink, var(--on-accent)); }
+.map-pick:has(:focus-visible) > .map-pick__mark { outline: var(--focus); outline-offset: var(--sp-0); }
+.map-pick:has(:disabled) { opacity: var(--off); cursor: default; }
+
 /* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
    foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
    scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
@@ -2740,18 +2806,24 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .action-bar .btn { flex: 1; box-shadow: var(--shadow-float); }
 .action-bar .icon-btn { width: var(--btn-h); height: var(--btn-h); box-shadow: var(--shadow-float); }
 
-/* ---- pager: previous / next as two round icon buttons at the two edges ----
+/* ---- pager: previous / next as two peers at the two edges ----
    For a sequence you can walk BOTH ways — a three-card feature intro, a step
    flow. Use it instead of the default pack whenever going back is as ordinary
    as going on: a wide CTA beside a small round icon reads as one action plus
    an afterthought, which is wrong when the two are peers.
 
-   The two are the same round shape and size (.icon-btn), one at each edge in
-   thumb reach from either side; the fill (--invert) alone leans forward. They
-   NEVER carry words (Lh 2026-09-16, for good): an arrow is the whole meaning,
-   and a word that isn't a direction ("Get started", "Done") is not a pager
-   button — that step COMMITS and goes back to the plain .action-bar with one
-   wide button. Where you are is said by the .pager__at dots — under the card
+   The two are the same shape and size, one at each edge in thumb reach from
+   either side; the fill alone leans forward. Two ways to draw them, both
+   valid: two round .icon-btn (an arrow is the whole meaning), or two .btn
+   that SAY the step each leads to, the arrow beside the name ("← คำขอ",
+   "วันเวลา →"; Lh 2026-10-17, lifting the 2026-09-16 "never words"). Worded,
+   they read as LEFT and RIGHT like the round pair (Lh 2026-10-17, second
+   call): each hugs its edge at its own size (its words + the arrow, no
+   stretch, so two widths are normal), open ground between them, and the
+   arrow stays the round pager's size (the md .icon, not xs). The words are
+   a STEP's name, a direction: a word that commits ("Get started", "Done")
+   is not a pager button — that step goes back to the plain .action-bar
+   with one wide button. Where you are is said by the .pager__at dots — under the card
    that changes (a .screen__centre group, card.css) for a card walk, never in
    that bar (Lh, 2026-09-12); a walk of words instead floats its dots as the
    bar's own first row (step.css, Lh 2026-09-23) — either way the dots move
@@ -2760,7 +2832,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    <div class="action-bar action-bar--pager">
      <button class="icon-btn" aria-label="ย้อนกลับ" disabled>…</button>
      <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
-   </div>   — or the same two in an .action-bar__tier--pager under a control  */
+   </div>   — or the same two in an .action-bar__tier--pager under a control
+   <div class="action-bar action-bar--pager">
+     <button class="btn"><svg class="icon">…</svg> คำขอ</button>
+     <button class="btn btn--primary">วันเวลา <svg class="icon">…</svg></button>
+   </div>   — worded: each at its edge, its own size; a skip link between stays centred  */
 .action-bar--pager { align-items: center; }
 /* The bar belongs to the BASE: the move of a page of words — a pager turning them, or one wide button. A screen
    with a sheet finishes on the sheet's own foot instead (sheet.css). Guidance for composing, not a rule the
@@ -2798,11 +2874,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 :has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 :has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 
-/* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
-:is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
+/* the first button (round or worded) sits at the left edge, the last at the right; a skip link between them stays centred.
+   A worded one keeps its own size here, not the plain bar's stretch: left and right, open ground between (Lh 2026-10-17) */
+:is(.action-bar--pager, .action-bar__tier--pager) > .btn { flex: 0 0 auto; }
+:is(.action-bar--pager, .action-bar__tier--pager) > :is(.icon-btn, .btn):first-child { margin-right: auto; }
 /* …and whatever goes BETWEEN the two (a "skip" link) stands in the middle: the bar places it, never the link itself */
-:is(.action-bar--pager, .action-bar__tier--pager) > :not(.icon-btn):not(:first-child):not(:last-child) { margin-inline: auto; }
-:is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) > .icon-btn:first-child { margin-right: 0; }
+:is(.action-bar--pager, .action-bar__tier--pager) > :not(.icon-btn, .btn):not(:first-child):not(:last-child) { margin-inline: auto; }
+:is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) > :is(.icon-btn, .btn):first-child { margin-right: 0; }
+/* with a link between, three columns: two worded buttons are two widths, and only even side columns keep the link at the bar's middle */
+:is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) { display: grid; grid-template-columns: 1fr auto 1fr; }
+:is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) > :first-child { justify-self: start; }
+:is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) > :last-child { justify-self: end; }
 
 
 /* ---- action note (Lh 2026-09-24): the main button's place, the main button's size, but ON the ground — no fill, no border, no
@@ -2837,7 +2919,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    button's, the card itself is never focused or disabled. */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove) {
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove, .map-pick) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
@@ -2849,14 +2931,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 /* a CHOICE's fill fades in as it is picked (a plain button's colour never changes on a tap, so it does not fade) */
 :where(.chip--pick, button.chip, .tile--pick, button.tile, .day, .segment__item, .calendar__day, .float-bar__item, .picker__item, .check,
-  .icon-btn[role="tab"], .avatar-pick__item > .avatar) {
+  .icon-btn[role="tab"], .avatar-pick__item > .avatar, .map-pick > .map-pick__mark, .map-pick > .map-pick__name) {
   transition-property: scale, background-color, color, border-color, opacity;
   transition-duration: var(--motion-press);
   transition-timing-function: ease-out;
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove, .map-pick):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 /* a pile of notes pressed whole (Lh 2026-10-11): the button lies invisible UNDER the notes, so it is the notes that answer — DIM, as a card does (the group dims as one, the
@@ -2869,11 +2951,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    it darkens a touch instead (--press-shade) */
 :where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
 :where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))):active { filter: brightness(var(--press-shade)); }
-/* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
+/* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label, a card that is a label round its radio) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, .stamp-on__remove):focus-visible,
-:where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible), :where(label.card:has(> input[type="radio"]:focus-visible)) { outline: var(--focus); outline-offset: var(--sp-1); }
 :where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
@@ -3334,8 +3416,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); }
 .chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
 /* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
-   a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css) — the native input lies over its whole box, unseen */
-:is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+   a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css), a place on a map (sheet.css), a card that is a label round a radio
+   (a pickable row card: the app gives the picked one its `tone`) — the native input lies over its whole box, unseen */
+:is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch, .map-pick) > input, label.card > input[type="radio"] { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
 :is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 /* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
 .chip--sign { padding-right: var(--sp-2); }
@@ -3351,7 +3434,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .chip--sign:has(:checked)::after { rotate: 45deg; }
 @media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
 
-/* ---- day strip: a week, one day selected ----
+/* ---- day strip: a week, one day selected, today a light tone ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */
 .day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--day-strip-gap, var(--sp-1)); }
 .day {
@@ -3374,6 +3457,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .day__name { font: var(--day-name-font, var(--type-caption)); }
 .day__num { font: 700 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+/* today: a light tone, no louder than a rest; the selected pill below wins when it is both (it comes after and weighs more) */
+.day--today { background: var(--day-today-bg, var(--ink-tint)); color: var(--day-today-ink, currentColor); }
 .day[aria-selected="true"] { background: var(--day-selected-bg, var(--accent)); color: var(--day-selected-ink, var(--on-accent)); opacity: 1; }
 .day__dot { grid-row: 3; align-self: center; width: var(--day-dot-size, var(--dot-xs)); height: var(--day-dot-size, var(--dot-xs)); border-radius: 50%; background: currentColor; }
 
@@ -3487,11 +3572,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- composer: big text area with a bottom bar (icon · hint · send) ----
    <div class="composer"><textarea class="composer__input" placeholder="What do you need?"></textarea>
-   <div class="composer__bar"><button class="icon-btn">…</button><span class="composer__hint">Your idea is born</span><button class="icon-btn icon-btn--invert">↑</button></div></div> */
+   <div class="composer__bar"><button class="icon-btn">…</button><span class="composer__hint">Your idea is born</span><button class="icon-btn icon-btn--invert">↑</button></div></div>
+   A second thing to write (the reason under the request) is <textarea class="composer__input composer__area"> after the
+   first: the same type, shorter, and the area draws its own dashed rule above it (no selector looks at what sits before it). */
 .composer { display: grid; gap: var(--composer-gap, var(--sp-3)); }
 .composer__input {
   width: 100%;
-  min-height: 11rem;
+  min-height: var(--composer-input-min-h, 11rem);
   resize: none;
   border: 0;
   padding: 0;
@@ -3502,6 +3589,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   outline: none;
 }
 .composer__input::placeholder { color: inherit; opacity: var(--off); }
+.composer__area {
+  box-sizing: content-box; /* its min-height is its words alone: the rule and the room under it come on top */
+  min-height: var(--composer-area-min-h, 2lh);
+  padding-block-start: var(--composer-area-pad, var(--sp-3));
+  border-block-start: var(--rule-w) dashed var(--composer-area-border, var(--card-muted)); /* the rule: the hint's ink, the system's rule width */
+}
 .composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--composer-bar-gap, var(--sp-3)); }
 .composer__hint { font: var(--composer-hint-font, var(--type-caption)); color: var(--composer-hint-ink, var(--card-muted)); }
 
@@ -4226,7 +4319,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    (one tap: half the stamp), for a stamp stuck ON something (`.stamp-on`, below), a stamp in an avatar stack (people.css) and a stamp
    at the head of a feed card (`.feed-card__lead`, card.css): one knob for the three.
    ONE exception, by the owner's decision (Lh 2026-10-11): the stamp at a postcard's corner (post.css) is the postcard's own size, 72 × 90,
-   --post-corner-stamp-w, in neither. The desk's tray (post.css) holds stamps of the standard size. */
+   --post-corner-stamp-w, in neither. The desk's tray (post.css) holds stamps of the standard size.
+   THE THIRD SIZE (Lh 2026-10-17): `.stamp-book--fill` (below) makes each stamp as wide as its third, the gaps one --screen-pad. */
 .stamp, .stamp-place {
   box-sizing: border-box;
   width: var(--stamp-size, calc(var(--tap) * 2));
@@ -4392,6 +4486,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --bare: no ground, no padding, no round — the stamps lie on what holds the book, three across as on the ground. The name is the Stamp's own; free places still draw.
    <div class="stamp-book stamp-book--bare"> */
 .stamp-book--bare { padding: 0; border-radius: 0; background: none; }
+/* --fill: the THIRD SIZE of a stamp (Lh 2026-10-17) — each stamp as wide as its third, 4:5, the gaps between the thirds one
+   --screen-pad both ways, so the row is three stamps and two gaps and nothing at its sides. At 375 in a 343 column, bare:
+   (343 − 2 × 16) / 3 = 103.67 × 129.58. The one place a stamp is not --stamp-size: the book sizes its stamps here.
+   <div class="stamp-book stamp-book--bare stamp-book--fill"> */
+.stamp-book--fill { gap: var(--stamp-book-fill-gap, var(--screen-pad)); }
+.stamp-book--fill > .stamp-place, .stamp-book--fill > .stamp-cell > .stamp { width: 100%; }
 /* --strip: ONE line of stamps that scrolls sideways — the tray a member picks from, each stamp its own size. No ground. */
 .stamp-book--strip {
   display: flex;

package/dist/cards/Card.d.ts

@@ -11,7 +11,8 @@ export interface CardProps extends ComponentProps<'article'> {
     paper?: boolean;
     /** compact: a small card inside a card or a sheet body (a note, a promo) */
     sm?: boolean;
-    /** a list row that is its own card: thumb · body · end, in a CardList */
+    /** a list row that is its own card: thumb · body · end, in a CardList. Its corner is the big card's PROPORTION, not its size (`--r-card-row`, 13; knob `--card-row-radius`).
+     *  Pickable: `as="label"` round a radio (`<input type="radio">`, unseen, over the whole card) and the app gives the picked one its `tone` */
     row?: boolean;
     /** the image IS the card: a Placeholder or img first, text over a scrim */
     cover?: boolean;

package/dist/cards/CardParts.d.ts

@@ -17,7 +17,8 @@ export interface CardEndProps extends ComponentProps<'div'> {
 export declare function CardEnd({ className, ...rest }: CardEndProps): import("react").JSX.Element;
 export interface CardListProps extends ComponentProps<'div'> {
 }
-/** CardList — a stack of `Card row`s, each its own boundary. */
+/** CardList — a stack of `Card row`s, each its own boundary: a list of things to open or to pick (past requests to reuse). It stands on the base or straight in a sheet's
+ *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`. */
 export declare function CardList({ className, ...rest }: CardListProps): import("react").JSX.Element;
 export interface IconRowProps extends ComponentProps<'span'> {
 }

package/dist/cards/CardParts.js

@@ -16,7 +16,8 @@ export function CardThumb({ className, ...rest }) {
 export function CardEnd({ className, ...rest }) {
     return _jsx("div", { className: cx('card__end', className), ...rest });
 }
-/** CardList — a stack of `Card row`s, each its own boundary. */
+/** CardList — a stack of `Card row`s, each its own boundary: a list of things to open or to pick (past requests to reuse). It stands on the base or straight in a sheet's
+ *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`. */
 export function CardList({ className, ...rest }) {
     return _jsx("div", { className: cx('card-list', className), ...rest });
 }