@usableapp/cardds 0.3.0 → 0.4.1

package/css/media.css

@@ -43,16 +43,16 @@
 
 /* ---- quote: giant mark, big text, attribution ----
    <blockquote class="quote"><p class="quote__text">It's overcast…</p><footer class="quote__by">Wednesday 15</footer></blockquote> */
-.quote { margin: 0; display: grid; gap: var(--sp-3); }
+.quote { margin: 0; display: grid; gap: var(--quote-gap, var(--sp-3)); }
 .quote::before {
   content: "\201C";
   font: 900 calc(var(--fs-h1) * 3)/0.55 var(--font-display);
   height: var(--sp-10);
   opacity: 0.9;
 }
-.quote__text { margin: 0; font: var(--type-h1); letter-spacing: var(--track-h1); text-wrap: balance; }
+.quote__text { margin: 0; font: var(--quote-text-font, var(--type-h1)); letter-spacing: var(--track-h1); text-wrap: balance; }
 .quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
-.quote__by { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--card-muted); }
+.quote__by { font: var(--quote-by-font, var(--type-overline)); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--quote-by-ink, var(--card-muted)); }
 .card--3 .quote__by { color: inherit; opacity: 0.7; }
 
 /* ---- tile grid: big square tiles — icon top, label bottom ----
@@ -61,36 +61,36 @@
 .tile-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr));
-  gap: var(--sp-3);
+  gap: var(--tile-grid-gap, var(--sp-3));
 }
 .tile-grid--3 { --tile-min: 6rem; } /* three across on a phone (attachments, upload kinds) */
 .tile {
   display: grid;
   align-content: space-between;
   justify-items: start;
-  gap: var(--sp-5);
-  min-height: var(--tile-h);
+  gap: var(--tile-gap, var(--sp-5));
+  min-height: var(--tile-min-h, var(--tile-h));
   min-width: 0;
-  padding: var(--sp-4);
-  border: var(--border-w) solid var(--outline);
-  border-radius: var(--r-card);
-  background: var(--action-bg);
-  color: var(--action-ink);
+  padding: var(--tile-pad, var(--sp-4));
+  border: var(--border-w) solid var(--tile-border, var(--outline));
+  border-radius: var(--tile-radius, var(--r-card));
+  background: var(--tile-bg, var(--action-bg));
+  color: var(--tile-ink, var(--action-ink));
   font: inherit;
   text-align: left;
   position: relative;
   cursor: pointer;
 }
-.tile__label { font: var(--type-title); }
-.tile__value { font: var(--type-h2); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
-.tile__sub { font: var(--type-caption); opacity: 0.7; }
-.tile__text { display: grid; gap: var(--sp-0); }
-.tile--on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.tile__label { font: var(--tile-label-font, var(--type-title)); }
+.tile__value { font: var(--tile-value-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
+.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: 0.7; }
+.tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
+.tile--on { background: var(--tile-on-bg, var(--accent)); color: var(--tile-on-ink, var(--on-accent)); border-color: transparent; }
 .tile--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
 .tile--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 .tile--wide { grid-column: 1 / -1; }
-.tile--stat { min-height: var(--avatar-xl); gap: var(--sp-3); grid-template-columns: auto 1fr; align-items: center; }
+.tile--stat { min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
   border-style: dashed;
@@ -98,12 +98,12 @@
   color: inherit;
   align-content: center;
   justify-items: center;
-  gap: var(--sp-2);
+  gap: var(--tile-upload-gap, var(--sp-2));
   text-align: center;
 }
 /* tinted tiles: slot colors inside a card (schedule, notes) */
-.tile--2 { background: var(--card-2-bg); color: var(--card-2-ink); border-color: transparent; }
-.tile--3 { background: var(--card-3-bg); color: var(--card-3-ink); border-color: transparent; }
+.tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); color: var(--tile-2-ink, var(--card-2-ink)); border-color: transparent; }
+.tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); color: var(--tile-3-ink, var(--card-3-ink)); border-color: transparent; }
 
 /* ---- fold: a sticky-note corner on any card (decorative) ----
    No border. The card's outline follows its border box, so it ran straight
@@ -127,7 +127,7 @@
    <span class="wave"></span> — sits in a .row__body, fills the width */
 .wave {
   display: block;
-  height: var(--icon);
+  height: var(--wave-h, var(--icon));
   width: 100%;
   background: repeating-linear-gradient(90deg, currentColor 0 var(--sp-1), transparent var(--sp-1) var(--sp-2));
   /* masks only read alpha: currentColor = "opaque" without naming a color */
@@ -142,9 +142,9 @@
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-auto-rows: 1fr;
-  gap: var(--sp-1);
+  gap: var(--mosaic-gap, var(--sp-1));
   aspect-ratio: 4 / 3;
-  border-radius: var(--r-media);
+  border-radius: var(--mosaic-radius, var(--r-media));
   overflow: hidden;
 }
 .mosaic > :first-child { grid-row: span 2; }
@@ -152,59 +152,75 @@
 .mosaic > .ph { opacity: 0.4; border-width: var(--border-w); }
 .mosaic > img { width: 100%; height: 100%; object-fit: cover; }
 
-/* ---- postcard: a member's introduction, a card in the hand — photo in front,
-   words on the back; tap to turn it over (Lh, 2026-09-12; card #63) ----
+/* ---- postcard: a member's introduction in the shape of a cover card — the photo fills it,
+   the band at the bottom names it; tap the photo to turn it over (Lh 2026-09-12; reshaped 2026-09-22) ----
    <div class="postcard">
-     <button class="postcard__face postcard__front" type="button" aria-label="พลิกดูด้านหลัง">
-       <img src="…" alt=""> — or <div class="ph"></div> —
-       <span class="postcard__label">ป้าแจ๋ว</span>
-     </button>
-     <button class="postcard__face postcard__back" type="button" aria-label="พลิกดูด้านหน้า">
-       <p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
-       <span class="postcard__label">ป้าแจ๋ว</span>
-     </button>
+     <div class="postcard__face postcard__front">
+       <button class="postcard__turn" type="button" aria-label="พลิกดูด้านหลัง"><img src="…" alt=""> — or <div class="ph"></div> —</button>
+       <div class="postcard__band">
+         <div class="postcard__words"><span class="t-h1">ป้าแจ๋ว</span><span class="t-body">บ้านสวนผัก</span></div>
+         <button class="icon-btn icon-btn--invert" aria-label="ถูกใจ" aria-pressed="false">♥</button>
+       </div>
+     </div>
+     <div class="postcard__face postcard__back">
+       <button class="postcard__turn" type="button" aria-label="พลิกดูด้านหน้า">
+         <div class="postcard__words">…</div><p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
+       </button>
+       <div class="postcard__voice"><div class="progress"></div><span class="t-caption">0:07 / 0:12</span><button class="icon-btn icon-btn--invert" aria-label="ฟัง">▶</button></div>  (a voice note: no caption — the line, its time, the control under them, at the middle)
+     </div>
    </div>
-   Each face is the whole tap target; cardds.js toggles .is-flipped on the
-   postcard (either face, Enter/Space too). A voice note, a like, a reply live
-   OUTSIDE the postcard (a Row under it): a face is a button, and a button
-   holds no button. The faces share one box (a 3:2 landscape card, the media
-   radius); the turn is a Y rotation at --motion-flip, a plain swap under
-   prefers-reduced-motion. Reads ink from the card slot it sits in. */
+   The two faces share one box and turn (a Y rotation at --motion-flip, a plain
+   swap under prefers-reduced-motion). A face is a div: the TURN is the button
+   that fills it (the photo, or the caption), the band lies over its foot and
+   turns with it — words and the heart; the back sets the name a fifth of the way down, the words after it; a
+   button in the band is never inside the turn button. The size is the cover
+   card's (--postcard-min-h = the cover's min-height, the card radius). Who
+   liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
-  aspect-ratio: 3 / 2;
+  min-height: var(--postcard-min-h, 22.5rem);
   perspective: 60rem;
-  border-radius: var(--r-media);
+  border-radius: var(--postcard-radius, var(--r-card));
+  isolation: isolate;
 }
 .postcard__face {
   position: absolute;
   inset: 0;
   display: grid;
   align-content: end;
-  padding: var(--sp-4);
-  gap: var(--sp-2);
-  border: var(--border-w) solid var(--card-border);
+  border: var(--border-w) solid var(--postcard-face-border, var(--card-border));
   border-radius: inherit;
   overflow: hidden;
   isolation: isolate;
-  color: inherit;
-  text-align: left;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   transition: transform var(--motion-flip) ease-in-out;
-  box-shadow: var(--shadow-float);
+  box-shadow: var(--postcard-face-shadow, var(--shadow-float));
+}
+/* the turn: the button that fills the face, under the band */
+.postcard__turn {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  align-content: start;
+  padding: var(--postcard-face-pad, var(--card-pad-rest));
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
 }
-.postcard__face:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
-/* the front: the photo (or the wireframe box) fills it, the name reads on a scrim */
-.postcard__front { background: var(--card-3-bg); color: var(--card-3-ink); }
-.postcard__front > img,
-.postcard__front > .ph {
+.postcard__turn:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+/* the front: the photo (or the wireframe box) fills it; the band reads on a scrim */
+.postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); color: var(--postcard-front-ink, var(--card-3-ink)); }
+.postcard__front .postcard__turn > img,
+.postcard__front .postcard__turn > .ph {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  z-index: -2;
   border: 0;
   border-radius: 0;
   min-height: 0;
@@ -213,20 +229,40 @@
   content: "";
   position: absolute;
   inset: 0;
-  z-index: -1;
+  z-index: 1;
+  pointer-events: none;
   background: linear-gradient(to top, var(--scrim), transparent 45%);
 }
-/* the back: paper — the words, big enough to read at arm's length */
+/* the back: paper — the caption and the name packed at the middle, big enough to read at arm's length */
 .postcard__back {
-  background: var(--card-2-bg);
-  color: var(--card-2-ink);
-  align-content: space-between;
+  background: var(--postcard-back-bg, var(--card-2-bg));
+  color: var(--postcard-back-ink, var(--card-2-ink));
   transform: rotateY(180deg);
 }
-.postcard__caption { margin: 0; font: var(--type-title); text-wrap: pretty; }
-.postcard__label { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.85; }
+.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; }
+/* the band: the face's foot — name and line left, the heart right; in flow at the face's end, over the turn.
+   Taps between its words fall through to the turn; its buttons take their own. */
+.postcard__band {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: end;
+  gap: var(--postcard-band-gap, var(--sp-3));
+  padding: var(--postcard-face-pad, var(--card-pad-rest));
+  pointer-events: none;
+}
+.postcard__band > * { pointer-events: auto; }
+.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-3-ink)); --on-accent: var(--postcard-front-bg, var(--card-3-bg)); }
+.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/numbers.css

@@ -31,8 +31,8 @@
   mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
 }
-.ring__value { font: var(--type-stat); letter-spacing: var(--track-display); }
-.ring__label { font: var(--type-caption); color: var(--card-muted); }
+.ring__value { font: var(--ring-value-font, var(--type-stat)); letter-spacing: var(--track-display); }
+.ring__label { font: var(--ring-label-font, var(--type-caption)); color: var(--ring-label-ink, var(--card-muted)); }
 .card--3 .ring__label { color: inherit; opacity: 0.7; }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
 .ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
@@ -52,10 +52,10 @@
   --on-accent: var(--_bg);
   list-style: none;
   margin: 0;
-  padding: var(--sp-2);
+  padding: var(--track-pad, var(--sp-2));
   display: flex;
   align-items: center;
-  border-radius: var(--r-chip);
+  border-radius: var(--track-radius, var(--r-chip));
   background: var(--_bg);
   color: var(--_ink);
 }
@@ -96,9 +96,9 @@
   grid-template-areas: "label num" "foot num";
   align-items: end;
   gap: var(--sp-2) var(--sp-4);
-  min-height: var(--tile-h);
+  min-height: var(--card-band-min-h, var(--tile-h));
 }
-.band__label { grid-area: label; align-self: start; font: var(--type-label); font-size: var(--fs-body); line-height: 1.2; }
+.band__label { grid-area: label; align-self: start; font: var(--band-label-font, var(--type-label)); font-size: var(--band-label-font-size, var(--fs-body)); line-height: 1.2; }
 .band__num {
   grid-area: num;
   font: 800 var(--fs-giant) / 0.9 var(--font-display);
@@ -106,14 +106,14 @@
   font-variant-numeric: tabular-nums;
 }
 .band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
-.band__foot { grid-area: foot; font: var(--type-caption); color: var(--card-muted); }
+.band__foot { grid-area: foot; font: var(--band-foot-font, var(--type-caption)); color: var(--band-foot-ink, var(--card-muted)); }
 .card--3 .band__foot { color: inherit; opacity: 0.7; }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
 .band-stack {
   display: grid;
-  border: var(--border-w) solid var(--card-border);
-  border-radius: var(--r-card);
+  border: var(--border-w) solid var(--band-stack-border, var(--card-border));
+  border-radius: var(--band-stack-radius, var(--r-card));
   overflow: hidden;
 }
 .band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
@@ -164,7 +164,7 @@
 
 /* ---- picker: horizontal snap picker, centre value big ----
    <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
-.picker { display: grid; gap: var(--sp-1); justify-items: center; position: relative; }
+.picker { display: grid; gap: var(--picker-gap, var(--sp-1)); justify-items: center; position: relative; }
 .picker__rail {
   width: 100%;
   display: grid;
@@ -172,7 +172,7 @@
   /* side padding = one third of the rail, so the first and last value can sit
      in the centre; the content box is then one third wide, and each column
      fills it (percent columns resolve against the content box) */
-  padding-inline: calc(100% / 3);
+  padding-inline: var(--picker-rail-pad-x, calc(100% / 3));
   grid-auto-columns: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -185,8 +185,8 @@
   border: 0;
   background: transparent;
   color: inherit;
-  padding: var(--sp-2) 0;
-  font: var(--type-stat);
+  padding: var(--picker-item-pad-y, var(--sp-2)) var(--picker-item-pad-x, 0);
+  font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
   opacity: 0.3;
@@ -205,7 +205,7 @@
   left: calc(100% / 3);
 }
 .picker::after { left: auto; right: calc(100% / 3); }
-.picker__unit { font: var(--type-caption); color: var(--card-muted); }
+.picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 .card--3 .picker__unit { color: inherit; opacity: 0.7; }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
@@ -221,30 +221,30 @@
 .badge {
   display: inline-grid;
   place-items: center;
-  min-width: var(--badge);
-  height: var(--badge);
-  padding: 0 var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--accent);
-  color: var(--on-accent);
-  font: var(--type-label);
+  min-width: var(--badge-min-w, var(--badge));
+  height: var(--badge-h, var(--badge));
+  padding: var(--badge-pad-y, 0) var(--badge-pad-x, var(--sp-2));
+  border-radius: var(--badge-radius, var(--r-chip));
+  background: var(--badge-bg, var(--accent));
+  color: var(--badge-ink, var(--on-accent));
+  font: var(--badge-font, var(--type-label));
   font-variant-numeric: tabular-nums;
   vertical-align: middle;
 }
-.badge--soft { background: var(--ink-tint); color: inherit; }
+.badge--soft { background: var(--badge-soft-bg, var(--ink-tint)); color: inherit; }
 
 /* ---- bars: three or four bars with a count on top — the glance chart ----
    <div class="bars"><div class="bar" style="--v: 16"><span>+16</span></div>… --max on the parent */
-.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--sp-2); height: calc(var(--_h) + var(--sp-8)); }
+.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--bars-gap, var(--sp-2)); height: calc(var(--_h) + var(--sp-8)); }
 .bar {
   flex: 1;
   min-width: 0;
   display: grid;
   align-content: end;
   justify-items: center;
-  gap: var(--sp-1);
+  gap: var(--bar-gap, var(--sp-1));
   height: 100%;
-  font: var(--type-caption);
+  font: var(--bar-font, var(--type-caption));
   font-weight: 700;
 }
 .bar::after {
@@ -256,3 +256,19 @@
 }
 .bar--on::after { background: var(--accent); }
 .bar--on > span { background: var(--accent); color: var(--on-accent); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-chip); }
+
+/* ---- progress: one straight line, the done share solid, the rest faint (Lh 2026-09-22) — a voice note's
+   timeline, a download, a step count as a line. <div class="progress" role="progressbar" style="--progress-at: 0.4"></div>
+   --progress-at is DATA the component writes (0–1), not a knob (scripts/knobs.mjs lists it). The done part is a
+   gradient of the line's ink sized by the share; the rest is the background colour. */
+.progress {
+  display: block;
+  width: 100%;
+  height: var(--progress-h, var(--sp-1));
+  border-radius: var(--progress-radius, var(--r-chip));
+  color: var(--progress-done-ink, inherit);
+  background-color: var(--progress-rest-bg, color-mix(in srgb, currentColor 25%, transparent));
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: calc(var(--progress-at, 0) * 100%) 100%;
+  background-repeat: no-repeat;
+}

package/css/people.css

@@ -15,9 +15,9 @@
   border-radius: 50%;
   display: grid;
   place-items: center;
-  background: var(--card-2-bg);
-  color: var(--card-2-ink);
-  font: var(--type-label);
+  background: var(--avatar-bg, var(--card-2-bg));
+  color: var(--avatar-ink, var(--card-2-ink));
+  font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
   letter-spacing: 0.02em;
@@ -30,10 +30,10 @@
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
-.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--outline); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--outline); cursor: pointer; }
+.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); cursor: pointer; }
 /* accent avatar: the "+7" tail, the selected person */
-.avatar--on { background: var(--accent); color: var(--on-accent); }
+.avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
 .avatar--halo::before {
   content: "";
@@ -55,7 +55,7 @@
    <div class="avatar-pick"><button class="avatar-pick__item"><span class="avatar avatar--lg avatar--add">+</span><span class="avatar-pick__name">Add</span><span class="avatar-pick__role">member</span></button>…</div> */
 .avatar-pick {
   display: flex;
-  gap: var(--sp-4);
+  gap: var(--avatar-pick-gap, var(--sp-4));
   overflow-x: auto;
   scroll-snap-type: x proximity;
   scrollbar-width: none; /* starts at the card's padding edge, like every row */
@@ -64,16 +64,16 @@
 .avatar-pick__item {
   scroll-snap-align: start;
   flex: none;
-  width: var(--avatar-lg);
+  width: var(--avatar-pick-item-w, var(--avatar-lg));
   display: grid;
   justify-items: center;
-  gap: var(--sp-2);
+  gap: var(--avatar-pick-item-gap, var(--sp-2));
   border: 0;
   background: transparent;
   color: inherit;
   padding: 0;
   text-align: center;
 }
-.avatar-pick__name { font: var(--type-label); font-size: var(--fs-sm); }
-.avatar-pick__role { font: var(--type-caption); color: var(--card-muted); margin-top: calc(-1 * var(--sp-1)); }
+.avatar-pick__name { font: var(--avatar-pick-name-font, var(--type-label)); font-size: var(--avatar-pick-name-font-size, var(--fs-sm)); }
+.avatar-pick__role { font: var(--avatar-pick-role-font, var(--type-caption)); color: var(--avatar-pick-role-ink, var(--card-muted)); margin-top: calc(-1 * var(--sp-1)); }
 .card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }

package/css/sheet.css

@@ -80,7 +80,7 @@
   overflow: clip;
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
-  box-shadow: var(--shadow-sheet);
+  box-shadow: var(--sheet-shadow, var(--shadow-sheet));
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -178,7 +178,7 @@
   opacity: 0.3;
   width: var(--tap-sm);
   height: var(--_handle);
-  border-radius: var(--r-chip);
+  border-radius: var(--sheet-handle-radius, var(--r-chip));
   margin: 0 auto;
   padding: 0;
   touch-action: none;
@@ -210,8 +210,8 @@
   min-height: var(--tap);
   text-align: center;
 }
-.sheet__title { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; }
-.sheet__sub { font: var(--type-caption); color: var(--card-muted); }
+.sheet__title { font: var(--sheet-title-font, var(--type-h2)); letter-spacing: var(--track-h2); margin: 0; }
+.sheet__sub { font: var(--sheet-sub-font, var(--type-caption)); color: var(--sheet-sub-ink, var(--card-muted)); }
 
 /* ============================================================
    .sheet-stage — the overlay stage: a page-height box the sheet
@@ -233,7 +233,7 @@
   margin-inline: auto;
   overflow: clip; /* not hidden: a clipped box is not a scroll container, so revealing a focused field never shifts the stage */
   container-type: size; /* the sheet's body reads this box's height as 100cqh (--_box above) */
-  background: var(--surface);
+  background: var(--sheet-stage-bg, var(--surface));
 }
 /* on an app screen the stage is the page: it takes the screen's inset back (edge to
    edge, like a step) and, after a fixed .appbar, the room the screen reserved for
@@ -250,8 +250,13 @@
   inset-inline: var(--screen-pad);
   top: var(--_band-centre);
   translate: 0 -50%;
-  /* no z-index: it follows the background in DOM order and the sheet, later, covers it at full */
+  /* as tall as the band less the screen's inset at both ends (Lh 2026-09-22: the room under the hero = the room at its sides);
+     what it holds fills it (a postcard's min-height gives way) */
+  height: calc((100cqh - var(--_top, 0rem)) / 2 - 2 * var(--screen-pad));
+  display: grid;
 }
+.sheet-stage > .sheet-stage__hero > * { min-height: 0; } /* outranks a component's own min-height (the postcard's) */
+/* no z-index on the hero: it follows the background in DOM order and the sheet, later, covers it at full */
 
 /* ---- map: the box a map engine draws in, behind a stage sheet ----
    <div class="sheet-stage__bg"><div class="map"><div>…the engine's canvas…</div>
@@ -268,7 +273,7 @@
   position: absolute;
   inset: 0;
   isolation: isolate; /* the ring and the hint stack inside the map only — a sheet over the map covers them */
-  color: var(--on-surface);
+  color: var(--map-ink, var(--on-surface));
   background:
     repeating-linear-gradient(75deg,  transparent 0 5.5rem,  var(--hairline) 5.5rem 6.25rem),
     repeating-linear-gradient(-18deg, transparent 0 8.75rem, var(--ink-tint) 8.75rem 9.25rem),
@@ -286,9 +291,9 @@
   height: var(--map-ring);
   translate: -50% -50%;
   border-radius: 50%;
-  border: var(--border-w) solid var(--accent);
-  background: color-mix(in srgb, var(--accent) 22%, transparent);
-  box-shadow: var(--shadow-float);
+  border: var(--border-w) solid var(--map-ring-border, var(--accent));
+  background: var(--map-ring-bg, color-mix(in srgb, var(--accent) 22%, transparent));
+  box-shadow: var(--map-ring-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
@@ -297,10 +302,10 @@
   right: var(--sp-2);
   bottom: var(--sp-2);
   padding: var(--sp-0) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: color-mix(in srgb, var(--surface) 80%, transparent);
-  color: var(--on-surface-muted);
-  font: var(--type-caption);
+  border-radius: var(--map-credit-radius, var(--r-chip));
+  background: var(--map-credit-bg, color-mix(in srgb, var(--surface) 80%, transparent));
+  color: var(--map-credit-ink, var(--on-surface-muted));
+  font: var(--map-credit-font, var(--type-caption));
   pointer-events: none;
   z-index: 1;
 }
@@ -311,12 +316,12 @@
   translate: -50% 0;
   max-width: calc(100% - 2 * var(--sp-4));
   padding: var(--sp-2) var(--sp-4);
-  border-radius: var(--r-chip);
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
-  font: var(--type-label);
+  border-radius: var(--map-hint-radius, var(--r-chip));
+  background: var(--map-hint-bg, var(--card-3-bg));
+  color: var(--map-hint-ink, var(--card-3-ink));
+  font: var(--map-hint-font, var(--type-label));
   text-align: center;
-  box-shadow: var(--shadow-float);
+  box-shadow: var(--map-hint-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1;
 }
@@ -327,10 +332,9 @@
 /* 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
-   the sheet gives it up itself, as --_lift — the same token a raised sheet floats on. */
+   the sheet gives it up itself, as --_lift. (A sheet ALWAYS stands on the floor — `.sheet--raised`, the one that
+   floated above a footnote strip on a dim stage, was retired 2026-09-22: that is a Modal's job.) */
 .sheet-stage > .sheet { --_lift: var(--kb, 0rem); bottom: var(--_lift); }
-.sheet-stage > .sheet--raised { --_lift: calc(var(--tap-lg) + var(--kb, 0rem)); }
-.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--r-card); border-bottom: var(--border-w) solid var(--card-border); }
 .sheet-stage__foot {
   position: absolute;
   inset-inline: 0;
@@ -339,8 +343,8 @@
   margin: 0;
   display: grid;
   place-items: center;
-  font: var(--type-caption);
-  color: var(--card-3-ink);
+  font: var(--sheet-stage-foot-font, var(--type-caption));
+  color: var(--sheet-stage-foot-ink, var(--card-3-ink));
   z-index: 2;
 }
 

package/css/stack.css

@@ -19,7 +19,7 @@
    <div class="sheet-stack sheet-stack--tap">   (drop --tap for a static stack)
      <article class="card card--2">
        <div class="card__head">
-         <button class="icon-btn icon-btn--sm card__back" aria-label="Back">…</button>
+         <button class="icon-btn icon-btn--sm sheet-stack__back" aria-label="Back">…</button>
          <h2 class="t-h2 t-caps">Shopping</h2>
          <span class="icon-row">…</span>              (optional trailing icons)
        </div>
@@ -243,7 +243,7 @@
 .sheet-stack--tap > .card.is-open > .card__head {
   padding-left: calc(var(--tap-sm) + var(--sp-3));
 }
-.sheet-stack--tap .card__back {
+.sheet-stack--tap .sheet-stack__back {
   position: absolute;
   left: 0;
   top: 50%;
@@ -252,7 +252,7 @@
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s;
 }
-.sheet-stack--tap > .card.is-open .card__back {
+.sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
   visibility: visible;
 }

package/css/theme.template.css

@@ -4,9 +4,12 @@
    Not part of the bundle: copy this file into the project as its own
    `theme.css` and load it AFTER cardds.css. It is the whole public
    surface of the system — the four size bases and the colour roles.
-   Everything else in tokens.css is derived from these; a project never
-   sets a derived token (--sp-4, --fs-h1, --r-card, --tap, --sheet-*…)
-   and never a multiplier.
+   Widest first: a BASE moves a whole family; a role / root token one meaning
+   everywhere (--accent, --btn-h, --header-h…); a KNOB one component
+   (--btn-pad-x, --chip-bg… — docs/knobs.md lists them; also settable on any
+   element, for the components inside it). Never a step of the scale
+   (--sp-4, --fs-h1, --r-card), a multiplier, a private --_* or a published
+   value (--card-pad, --bar-reserve, --sheet-*).
 
    The values below are the defaults (the wireframe): as shipped, this
    file changes nothing (tests/tokens.spec.js holds it to that).