@usableapp/cardds 0.1.0

package/css/card.css

@@ -0,0 +1,283 @@
+/* ============================================================
+   cardds/card.css — the card boundary + list variants
+   One card = one boundary. Tone via .card--1/2/3 (role slots).
+   ============================================================ */
+
+.card {
+  --card-bg: var(--card-1-bg);   /* the slot, readable by children (avatar rings, fold) */
+  --card-ink: var(--card-1-ink);
+  --card-pad: var(--sp-5);       /* published so .bleed can cancel it exactly */
+  --card-gap: var(--sp-4);       /* published so a sheet's peek strip (sheet.css) is exact */
+  background: var(--card-bg);
+  color: var(--card-ink);
+  border: var(--border-w) solid var(--card-border);
+  border-radius: var(--r-card);
+  padding: var(--card-pad);
+  display: grid;
+  gap: var(--card-gap);
+  position: relative;
+  min-width: 0;
+  text-decoration: none; /* .card works as <a> too */
+}
+/* the card is a grid: a child with a wide min-content (inputs, fixed-width
+   rows) would otherwise widen the track past the card's padding on narrow
+   screens. Children shrink to the track; they never size the card. */
+.card > * { min-width: 0; }
+
+.card--2 { --card-bg: var(--card-2-bg); --card-ink: var(--card-2-ink); --card-muted: var(--card-2-muted); }
+.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); }
+
+/* dark/accent slot: accent-toned controls would vanish — the slot re-points
+   the accent tokens, so every accent consumer (btn--primary, chip--on,
+   check, toggle, ring, day…) inverts without per-component rules */
+.card--3 { --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+
+/* header row: title left, floating action right — centered, since the
+   trailing control (chip/badge/icon-btn/link) is almost always taller than
+   a single line of title text; top-aligning them left the control visually
+   low against the title's optical center. A head with a genuinely tall,
+   multi-line title can opt back out with .card__head--top. */
+.card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+}
+.card__head--top { align-items: flex-start; }
+
+.card__media { border-radius: var(--r-media); overflow: hidden; position: relative; } /* relative: corner badges */
+.card__end { text-align: right; display: grid; gap: var(--sp-0); justify-items: end; } /* trailing value + caption */
+.card__media > img { width: 100%; height: auto; object-fit: cover; }
+
+/* ---- the card skeleton: head · content · foot ----
+   Every card is a head (the heading left, hints / actions / a more-menu at
+   the far right), its content, and an optional foot of action buttons.
+   The head's leading child — the heading, or the div that wraps heading and
+   caption — takes the room, so a heading with nothing at the far right runs
+   all the way across; whatever trails it hugs its own width. Only the
+   heading (or the div that wraps it) is that leading child: a control that
+   leads a custom head — a chip, an avatar, a tile badge — keeps its own
+   width, else the rule stretched a chip into a bar and an avatar into an
+   ellipse (two agents and the wallet demo caught it, 2026-09-10). */
+.card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
+
+/* Skeleton head — the heading in a card's OWN head, and only there.
+   Two lines are the budget: cardds.js measures and steps --squeeze down so the
+   type shrinks to fit; the clamp holds a heading that still overflows to three
+   lines, never more. The level's own size comes through --fs-self (base.css),
+   so the multiplier is level-agnostic and a heading without --squeeze renders
+   exactly as before.
+   A STACK head is not a skeleton head — it is a one-line peek at its own size,
+   and "stack headers" below opts it out of the budget, the squeeze and the
+   clamp. cardds.js skips those same cards, so CSS and JS agree on what counts
+   as a skeleton head. Change one, change the other. */
+.card__head :is(h1, h2, h3) {
+  font-size: calc(var(--fs-self, var(--fs-h2)) * var(--squeeze, 1));
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  /* the clip would take the hair the tight leading leaves outside the line
+     box — a stacked tone mark on top, สระอู below (fonts.css). Padding is
+     inside the clip, the negative margin gives the room back, so the head
+     measures exactly as before. */
+  padding-block: 0.15em;
+  margin-block: -0.15em;
+}
+
+/* ---- 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
+   the first and last item stay on the same line as everything else.
+   Reads --card-pad, so it is exact by construction and follows any container
+   that publishes one (.card today, a sheet or a screen the same way).
+   <div class="avatar-pick bleed">…</div>
+   Padding, not item margins: padding is inside the scrollable area, so the
+   last item scrolls fully clear of the edge instead of stopping against it.
+   scroll-padding keeps snap points on the content line, not the border edge. */
+.bleed {
+  margin-inline: calc(-1 * var(--card-pad, 0px));
+  padding-inline: var(--card-pad, 0px);
+  scroll-padding-inline: var(--card-pad, 0px);
+}
+/* a bleeding child sits over the container's rounded corner, so a strip that
+   is genuinely first or last needs the corner clipped for it */
+.card:has(> .bleed:first-child), .card:has(> .bleed:last-child) { overflow: clip; }
+
+/* foot: the card's action buttons on one line. One button takes the width,
+   up to four share it in even parts — so the gaps read even too — and from
+   three on they drop their side padding so the labels keep the room. */
+.card__foot { display: flex; gap: var(--sp-2); align-items: center; }
+.card__foot > .btn { flex: 1 1 0; min-width: 0; }
+.card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+
+/* media placeholder for wireframes — currentColor so it survives any palette */
+.ph {
+  background:
+    linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
+    linear-gradient(to top left,  transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
+  border: var(--border-w) solid currentColor;
+  border-radius: var(--r-media);
+  opacity: 0.4;
+  min-height: 10rem;
+}
+.ph--sm { min-height: 7.5rem; }
+.ph--md { min-height: 9rem; }
+/* ---- centred card: one thing to read, at the human centre of a fill screen ----
+   (.screen__centre below is the same placement for a small GROUP of things)
+   Where the centre of a phone IS, to the person holding it: the bottom fifth is
+   the thumb's — the bar, the controls — so what is meant to be read sits at the
+   middle of the four fifths above it, --screen-centre (40%) down the screen, not
+   at 50%. (Lh, 2026-09-10.) Any screen with one
+   card and nothing else to read may.
+   <div class="screen screen--fill"><header class="topbar">…</header><article class="card card--centre">…</article></div>
+   <div class="action-bar">…</div>
+   The card hugs its words and keeps the screen's inset. It is capped so that it
+   never reaches the title bar above it nor the bar's room below it — past that it
+   scrolls inside — from the same tokens those bars reserve their room with. */
+.card--centre,
+.screen--fill > .screen__centre {
+  position: absolute;
+  top: var(--screen-centre);
+  translate: 0 -50%;
+  /* the cap: twice the room above the centre (the title bar's height, when
+     one is there, and the screen's gap), or twice the room below it (the
+     bar's reserve) — whichever is less. --_lead is the title bar's height
+     only on a screen that HAS one: without a .topbar/.appbar before it the
+     block keeps that room (a deck and its two buttons, a card and its pager
+     under it, need it on a short phone; Lh, 2026-09-11). */
+  --_lead: 0rem;
+  max-height: calc(2 * min(var(--screen-centre) - var(--_lead) - var(--screen-gap), 100% - var(--screen-centre) - var(--bar-reserve)));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+:is(.topbar, .appbar) ~ :is(.card--centre, .screen__centre) { --_lead: var(--header-h); }
+.card--centre { inset-inline: var(--screen-pad); }
+
+/* ---- centred block: the same place, for one thing to read that is not a
+   lone card — an empty state, a card with its quiet second button and the
+   pager under it, a deck with its two round buttons. The block runs edge to
+   edge and keeps the screen's inset as padding, so a deck's fanned cards can
+   overhang and clip at the screen's edges (correct — the fold visual), and
+   its children stack at the screen's own rhythm (Lh, 2026-09-11):
+   <div class="screen screen--fill"><header class="topbar">…</header>
+     <div class="screen__centre"><article class="card">…</article><button class="btn btn--quiet btn--block">…</button></div>
+   </div> */
+.screen__centre {
+  inset-inline: 0;
+  padding-inline: var(--screen-pad);
+  display: grid;
+  gap: var(--screen-gap);
+  align-content: start;
+}
+.screen__centre > * { min-width: 0; }
+
+/* ---- the same group on a plain .screen: centred when short, as long as it
+   likes when not (Lh, 2026-09-12) ----
+   The member sees one content area — whatever is between the top bar and the
+   bar — and reads it as a whole page: a short card sits at its middle, a long
+   one simply makes the page longer, runs under the bar (the bar's reserve is
+   already the screen's bottom padding, actions.css) and scrolls up like any
+   page — nothing is capped, nothing shrinks, no scroll box inside a box.
+   So on a .screen that is NOT --fill the group is in flow: the column is at
+   least one phone tall, the group takes the room after the top bar and
+   centres its children in it. The screen's own inset stays the inset.
+   <div class="screen"><header class="topbar">…</header>
+     <div class="screen__centre"><article class="card">…</article><div class="pager__at">…</div></div>
+   </div><div class="action-bar">…</div> */
+.screen:not(.screen--fill):has(> .screen__centre) { min-height: 100dvh; display: flex; flex-direction: column; }
+.screen:not(.screen--fill) > .screen__centre { flex: 1; padding-inline: 0; align-content: center; }
+
+/* ---- the card that changes slides: out one side, the next in from the other ----
+   A .screen__centre group that walks pages (data-slide="next" | "back" on the
+   root while a step changes) turns its card like a page: the old card slides
+   out, the new one slides in from the side the move came from — quick, the
+   heading and the dots stay still (Lh, 2026-09-12). Built on view transitions:
+   the React adapter's slideTo() sets data-slide on :root, starts the transition
+   and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
+   simply switches. Only the card is named; the rest of the page must not
+   cross-fade. */
+.screen__centre > .card, .pages > .card[aria-current] { view-transition-name: centre-card; }
+
+/* ---- pages: the cards of a walk, all one height ----
+   A sequence the member walks (an introduction) reads steadier when every card
+   is the same height (Lh, 2026-09-12): so all its cards are on the page at
+   once, stacked in one grid cell, and the cell is as tall as the tallest — at
+   any text size. The current card carries aria-current="step"; every other
+   one is inert (out of the tab order and the accessibility tree) and hidden
+   in place, keeping its height. A page turn is the same slideTo() as a lone card.
+   <div class="screen__centre"><div class="pages">
+     <article class="card" aria-current="step">…</article>
+     <article class="card" inert>…</article>
+   </div><div class="pager__at">…</div></div> */
+.pages { display: grid; }
+.pages > .card { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+.pages > .card[inert] { visibility: hidden; }
+::view-transition-old(root), ::view-transition-new(root) { animation: none; }
+::view-transition-old(centre-card), ::view-transition-new(centre-card) {
+  animation-duration: var(--motion-slide);
+  animation-timing-function: ease-out;
+  mix-blend-mode: normal;
+}
+:root[data-slide="next"]::view-transition-old(centre-card) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(centre-card) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card) { animation-name: centre-card-in-left; }
+@keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
+@keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
+@keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
+@keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(centre-card), ::view-transition-new(centre-card) { animation: none; }
+}
+/* the page dots under the card sit centred under it — the indicator belongs
+   with the page that changes, never in the bar (Lh, 2026-09-12) */
+.screen__centre > .pager__at { justify-self: center; }
+
+/* compact card inside a card (nested note, promo) */
+.card--sm { padding: var(--sp-4); --card-gap: var(--sp-2); border-radius: var(--r-card); }
+
+/* the sheet stack (.sheet-stack) — sheets stacked, heads peeking — lives in
+   stack.css; a stacked sheet is a plain .card, the material */
+
+/* trailing icon cluster in a card header */
+.icon-row { display: flex; align-items: center; gap: var(--sp-4); opacity: 0.85; }
+
+/* ---- card list: rows, each row its own boundary ---- */
+.card-list { display: grid; gap: var(--sp-3); }
+
+.card--row {
+  border-radius: var(--r-card);
+  padding: var(--sp-4);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+.card--row .card__body { flex: 1; display: grid; gap: var(--sp-0); }
+
+/* leading thumb/icon in a row */
+.card__thumb {
+  width: var(--tap-sm); height: var(--tap-sm);
+  flex: none;
+  border-radius: var(--r-control);
+  border: var(--border-w) solid currentColor;
+  display: grid;
+  place-items: center;
+  font: var(--type-label);
+  opacity: 0.85;
+}
+
+/* ---- inline stat block (revenue-style) ---- */
+.stat { display: grid; gap: var(--sp-1); }
+.stat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+
+.delta {
+  font: var(--type-caption);
+  font-weight: 700;
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-chip);
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+}
+.delta--neg { background: var(--neg); color: var(--card-3-ink); } /* light ink on the signal color in every slot */

package/css/choice.css

@@ -0,0 +1,297 @@
+/* ============================================================
+   cardds/choice.css — thumb-size choice controls inside cards:
+   check circle · toggle · toggle chip · chip grid · day strip ·
+   calendar · mood picker · pin field · composer · upload tile
+   Native inputs carry the state; CSS reads :checked. No JS.
+   ============================================================ */
+
+/* the data-URI icons below are masks: only their alpha is read, so the
+   "black" stroke inside them is shape, not color — the fill is the token. */
+
+/* ---- check: round check circle at a row's end ----
+   <input type="checkbox" class="check" aria-label="Done"> */
+.check {
+  appearance: none;
+  width: var(--tap);
+  height: var(--tap);
+  flex: none;
+  margin: 0;
+  border-radius: 50%;
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.check::after {
+  content: "";
+  width: calc(var(--tap) / 2);
+  height: calc(var(--tap) / 2);
+  background: var(--on-accent);
+  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
+  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
+  opacity: 0;
+}
+.check:checked { background: var(--accent); border-color: transparent; }
+.check:checked::after { opacity: 1; }
+.check:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.check--sm { width: var(--tap-sm); height: var(--tap-sm); }
+
+/* ---- toggle: big switch ----
+   <input type="checkbox" role="switch" class="toggle" aria-label="Private"> */
+.toggle {
+  --_w: var(--bar-h);            /* 64 × 36, knob = height − 2 × pad */
+  --_h: 2.25rem;
+  --_pad: 0.1875rem;
+  appearance: none;
+  width: var(--_w);
+  height: var(--_h);
+  flex: none;
+  margin: 0;
+  border-radius: var(--r-chip);
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+.toggle::after {
+  content: "";
+  position: absolute;
+  top: var(--_pad);
+  left: var(--_pad);
+  width: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
+  height: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.45;
+  transition: translate 0.2s ease, opacity 0.2s ease;
+}
+.toggle:checked { background: var(--accent); border-color: transparent; }
+.toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
+.toggle:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- toggle chip: interest / filter picker — shows + off, × on ----
+   <label class="chip chip--toggle"><input type="checkbox">Nature</label> */
+.chip--toggle { cursor: pointer; padding-right: var(--sp-2); }
+.chip--toggle > input { appearance: none; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
+.chip--toggle::after {
+  content: "";
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  flex: none;
+  background: currentColor;
+  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
+}
+.chip--toggle:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.chip--toggle:has(:checked)::after {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
+}
+.chip--toggle:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+.chip--toggle:has(:checked) { font-style: italic; } /* the interest-picker flourish; drop if unwanted */
+
+/* ---- chip grid: pick one slot / many options in a grid ----
+   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div> */
+.chip-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
+  gap: var(--sp-2);
+}
+/* .chip hugs its text as a loose grid child (justify-self: start); inside a
+   chip grid the whole point is equal, full-width pick targets, so stretch.
+   Matters most in scripts without word spaces (Thai): min-content is the
+   whole string, tracks get wide, and hugging chips leave a ragged grid. */
+.chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); position: relative; }
+.chip--pick { cursor: pointer; }
+.chip--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.chip--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.chip--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- day strip: a week, one day selected ----
+   <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(--sp-1); }
+.day {
+  display: grid;
+  /* three rows, always: name · number · dot. The dot's row is reserved even on
+     a day that has no dot, so every number sits on the same line and every dot
+     sits on the same line — otherwise a marked day's rows share the height
+     differently and its number rides up. */
+  grid-template-rows: auto auto var(--dot-xs);
+  align-content: center;  /* the group sits centred in the cell, not spread out */
+  justify-items: center;
+  gap: var(--sp-0);
+  min-width: 0;
+  min-height: var(--bar-h);
+  padding-block: var(--sp-3); /* equal air top and bottom, so the selected pill
+                                 is the same shape on every day */
+  padding-inline: 0;
+  border: 0;
+  border-radius: var(--r-chip);
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+}
+.day__name { font: var(--type-caption); }
+.day__num { font: 700 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+.day[aria-selected="true"] { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.day__dot { grid-row: 3; align-self: center; width: var(--dot-xs); height: var(--dot-xs); border-radius: 50%; background: currentColor; }
+
+/* ---- calendar: month grid, 44px cells, one accent day, optional marks ----
+   <div class="calendar"><div class="calendar__head">…</div><div class="calendar__grid"><span class="calendar__wd">Mo</span>×7 <button class="calendar__day" style="--start: 3">1</button>…</div></div> */
+.calendar { display: grid; gap: var(--sp-3); }
+.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
+.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); justify-items: center; }
+.calendar__wd { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--card-muted); padding-block: var(--sp-2); }
+.card--3 .calendar__wd { color: inherit; opacity: 0.7; }
+.calendar__day {
+  width: 100%;
+  max-width: var(--tap);
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font: 500 var(--fs-title)/1 var(--font-ui);
+  font-variant-numeric: tabular-nums;
+  grid-column-start: var(--start, auto); /* --start on the 1st: weekday column 1–7 */
+}
+.calendar__day--mark { background: var(--accent-soft); }
+.calendar__day--mark2 { background: var(--accent-mid); color: var(--on-accent); }
+.calendar__day[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
+.calendar__day:disabled { opacity: 0.3; }
+
+/* ---- 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> */
+.mood {
+  margin: 0;
+  min-inline-size: 0; /* fieldset UA default is min-content — it must shrink with the card */
+  padding: var(--sp-1);
+  border: var(--border-w) solid var(--outline);
+  border-radius: var(--r-chip);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  display: flex;
+  justify-content: space-between;
+}
+.mood__opt { flex: 1 1 0; max-width: var(--tap); min-width: 0; height: var(--tap); display: grid; place-items: center; position: relative; cursor: pointer; }
+.mood__opt > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.mood__dot {
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  border-radius: 50%;
+  background: var(--_mood, currentColor);
+  transition: scale 0.2s ease, box-shadow 0.2s ease;
+}
+.mood__opt:nth-child(1) { --_mood: var(--neg); }
+.mood__opt:nth-child(2) { --_mood: color-mix(in srgb, var(--neg) 50%, var(--dot-b)); }
+.mood__opt:nth-child(3) { --_mood: var(--dot-b); }
+.mood__opt:nth-child(4) { --_mood: color-mix(in srgb, var(--pos) 50%, var(--dot-b)); }
+.mood__opt:nth-child(5) { --_mood: var(--pos); }
+.mood__opt:has(:checked) > .mood__dot { scale: 1.7; box-shadow: 0 0 0 var(--sp-2) color-mix(in srgb, var(--_mood, currentColor) 25%, transparent); }
+.mood__opt:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-0); border-radius: 50%; }
+
+/* ---- pin: big code entry, one digit per pill ----
+   <div class="pin"><input class="pin__cell" inputmode="numeric" maxlength="1" placeholder=" ">×4</div> */
+.pin { display: flex; gap: var(--sp-3); }
+.pin__cell {
+  flex: 1;
+  min-width: 0;
+  max-width: var(--fab);
+  aspect-ratio: 2 / 3;
+  border: var(--border-w) solid var(--outline);
+  border-radius: var(--r-chip);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  text-align: center;
+  font: var(--type-stat);
+  font-variant-numeric: tabular-nums;
+  caret-color: currentColor;
+}
+.pin__cell:not(:placeholder-shown) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.pin__cell:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- 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> */
+.composer { display: grid; gap: var(--sp-3); }
+.composer__input {
+  width: 100%;
+  min-height: 11rem;
+  resize: none;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: 700 var(--fs-2xl)/1.25 var(--font-display);
+  letter-spacing: var(--track-h2);
+  outline: none;
+}
+.composer__input::placeholder { color: inherit; opacity: 0.4; }
+.composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+.composer__hint { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .composer__hint { color: inherit; opacity: 0.7; }
+
+/* ---- slider: one value along a track, a thumb-size knob ----
+   <label class="slider"><span class="slider__label">ขนาดตัวหนังสือ</span><input class="slider__range" type="range" min="100" max="160" step="15" aria-label="ขนาดตัวหนังสือ"></label>
+   The label row is optional: in a bar under a card that already says what the
+   slider does, the input's aria-label is enough. The track is a hairline rail;
+   the knob is a full --tap, and the whole range is --tap tall, so the thumb has
+   a real target anywhere along it. The value is the input's own. */
+.slider { display: grid; gap: var(--sp-1); flex: 1; min-width: 0; position: relative; } /* relative: the glyph rides the knob */
+/* ---- the sample glyph: one letter IN the knob, on-accent, at the type size
+   the slider sets — so a text-size slider shows the size before anything is
+   read (Lh, 2026-09-12). cardds.js publishes the knob's place on the .slider
+   as --slider-at (0..1) from the input's value; the glyph sits over the knob
+   and never takes the pointer. <span class="slider__glyph" aria-hidden="true">ก</span>
+   before the input. */
+.slider__glyph {
+  position: absolute;
+  bottom: 0;
+  left: calc(var(--tap) / 2 + (100% - var(--tap)) * var(--slider-at, 0));
+  width: var(--tap);
+  height: var(--tap);
+  /* the eye centres the INK, not the line box: a letter that stands on the
+     baseline (ก) has no descender, while the face's box keeps 0.30em under it
+     (fonts.css) — so the ink lands low when the box is centred; lifted 0.15em
+     (set by eye with Lh on FC Pride at h2, 2026-09-12) */
+  translate: -50% -0.15em;
+  display: grid;
+  place-items: center;
+  font: var(--type-h2);
+  color: var(--on-accent);
+  pointer-events: none;
+}
+.slider__label { font: var(--type-label); }
+.slider__range {
+  appearance: none;
+  width: 100%;
+  height: var(--tap);
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.slider__range::-webkit-slider-runnable-track { height: var(--sp-1); border-radius: var(--r-chip); background: var(--ink-rail); }
+.slider__range::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--tap);
+  height: var(--tap);
+  margin-top: calc((var(--sp-1) - var(--tap)) / 2);
+  border-radius: 50%;
+  background: var(--accent);
+  border: var(--border-w) solid var(--on-accent);
+  box-shadow: var(--shadow-float);
+}
+.slider__range::-moz-range-track { height: var(--sp-1); border-radius: var(--r-chip); background: var(--ink-rail); }
+.slider__range::-moz-range-thumb {
+  width: var(--tap);
+  height: var(--tap);
+  border-radius: 50%;
+  background: var(--accent);
+  border: var(--border-w) solid var(--on-accent);
+  box-shadow: var(--shadow-float);
+}
+.slider__range:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }

package/css/fonts.css

@@ -0,0 +1,37 @@
+/* ============================================================
+   cardds/fonts.css — the two faces the system ships (Lh, 2026-09-10).
+   Body: PK Nonthaburi (Pocket Fonts, demo weight — one face; the browser
+   synthesises bold for labels and titles, so the 400/700 contrast holds).
+   Display: FC Pride (Fontcraft Studio, Medium — non-commercial licence);
+   declared across every weight so headings render the real Medium, never
+   a smeared faux-bold. Both cover Thai + Latin + digits. Licences: fonts/LICENSES.md.
+   tokens.css points --font-ui and --font-display at these; a consumer who
+   vendors the CSS copies fonts/ beside it (the url()s are ../fonts/).
+   ============================================================ */
+@font-face {
+  font-family: "PK Nonthaburi";
+  src: url("../fonts/pk-nonthaburi-demo.ttf") format("truetype");
+  font-weight: 400 500;
+  font-style: normal;
+  font-display: swap;
+  /* the box the line-height centres = the ink: tone marks reach 1.02em up,
+     lower vowels 0.30em down (measured; the face declares 0.92 / 0.30 + gap) */
+  ascent-override: 102%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}
+@font-face {
+  font-family: "FC Pride";
+  src: url("../fonts/fc-pride-medium.otf") format("opentype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  /* the face declares 1.20 up / 0.18 down, but a stacked vowel + tone mark
+     reaches 1.10em and สระอู 0.29em — override so the line box centres the
+     ink and a clipped heading loses the same hair top and bottom, not the
+     whole lower vowel. With the leading in tokens.css this is 0.075em a side
+     at h2; the clipped containers pad that back (card.css, actions.css) */
+  ascent-override: 110%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}