@usableapp/cardds 0.7.14 → 0.7.16

package/CHANGELOG.md

@@ -2,6 +2,49 @@
 
 > 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.
 
+## 0.7.16 — 2026-09-25
+
+Refactor + additions. Same props, same markup, same computed style on every story.
+
+### Added
+- `setTextScale(percent, root?)` — the member's text size as a share of the theme's `--fs-base` (100 = the theme's own). It reads the base from the CSS, so an app no longer copies `1.375rem`. Keeping the choice (localStorage…) stays the app's.
+
+- PRESS: every control (Btn, IconBtn, Fab, Link, a/button Chip, ChipPick, Tile as button/link/pick, Day, SegmentItem, Calendar day, FloatBarItem, AvatarPickItem, AddRow, Picker item, StackBack, Dropdown, AppBar brand, MenuItem) gives under the finger (`--press-scale` 0.96, `--motion-press` 0.12s, off under reduced motion) and shows a focus ring; a choice's fill fades in. Zero specificity (`:where`), so a component's own rule wins.
+- `Rows heading` takes an ELEMENT too: `<Rows heading={<Text level="title" as="h3">…</Text>}>` — that h3 is the group's name (role=group, aria-labelledby). Words still give the small label. Drop a hand-written `role="group" aria-label`.
+- Token `--dim` (0.7): the one share secondary words fade to on the dark card, a drawer, a tile's sub line (was 14 hand-typed `opacity: 0.7`). A theme sets it once.
+- `TrackStep num` — the step's number in the round instead of an Icon (the `.track__dot` look existed in CSS with no way in; story Track · Numbered).
+- `AvatarPickItem selected` (aria-pressed; the picked person's avatar fills with the accent).
+
+### Removed (breaking for anyone using them)
+- `Deck` and `DeckActions` (the swipe deck), the `.deck*` CSS and the `--deck-*` knobs — Lh 2026-09-26: no use case. Nothing replaces them; a card to pick from = `Card` + its own buttons.
+
+### Changed (may touch a screen)
+- `Mood` is controlled like every other control: `value` + `onChange(value)` or `defaultValue`. Before: `value` was only the starting dot and `onChange` got the input event. Move a starting value to `defaultValue`; read the number from `onChange`.
+- INFORMATION never looks tappable: `.tile` (a plain div) and `Avatar add` no longer set `cursor: pointer`.
+- Stories: Segment, DayStrip, FloatBar (buttons), AvatarPick answer a tap; the Chip filter row is `ChipPick`s (plain `Chip on` is a label, not a choice).
+
+### Changed (internal)
+- Every controlled/uncontrolled state (`value`+`onChange` or `defaultValue`, and the same for `state`, `open`, `at`, `tab`, `selected`, `flipped`) now runs on one internal hook, `useControlled`, instead of 12 hand copies.
+- Dev warnings (Icon, TopBar, Screen) share one `warnOnce`.
+- CSS: dead selectors removed (`.dropdown__trigger`, `.menu__item.is-on`, `.float-bar__item.is-on`), one overridden stack-head rule dropped, split rules merged. Two raw `0px` in the SheetSteps CSS → `0rem`.
+
+## 0.7.15 — 2026-09-25
+
+### Removed (breaking for anyone using them)
+- Palettes `shine` and `field`. `data-palette="shine"|"field"` → pick `clay`, `roast`, `hydro`, `orchard` or `vers`.
+  The `Palette` type no longer lists them.
+
+### Added
+- Palette `vers`: white surface, champagne paper, sage brand, earth tones 2·4·5, signals from salmon.
+- Palette `orchard` (reworked): modern earth (linen · bone · sand · moss · sage mist · clay); each tone's ink is a deep
+  shade of its own ground, so lines tint with the ground. Fields and PIN cells are white. Vivid accents: primary `Btn`
+  yellow, avatars fuchsia, `Ring` and a `Toggle` that is on in sky, the count badge and dot a in maple. Every one of these
+  still yields to its knob (`--btn-primary-bg`, `--avatar-bg`, `--badge-bg`…) set by a project.
+- Tokens `--highlight-1` … `--highlight-4`: four atmosphere colours a palette may set (grey in the wireframe). Nothing
+  changes for a project that doesn't set them.
+- Card tones 4 · 5 and signals `--signal-warn` · `--signal-ok` · `--signal-info` (with `--signal-error`).
+- Gallery: a `Palette` page (type group) — every colour role of the palette on now, plus stories `Signals` and `Highlights`.
+
 ## 0.7.14 — 2026-09-25
 
 ### Added

package/README.md

@@ -307,11 +307,9 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   above the centre (2 × (40% − the title bar)): a card taller than that is
   not a centred card — it is a plain scrolling `.screen` (the detail view).
 - **A small group at the same centre** — an empty state; a card with its quiet
-  second button and the pager dots under it; a deck with its two round
-  buttons — is `.screen__centre` (React: `Centre`), a block in the fill
+  second button and the pager dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
   screen after the topbar. Same placement and cap; it runs edge to edge with
-  the inset as padding, so a deck's fanned cards may overhang and clip at the
-  screen's edges (the fold visual, not a bug), and stacks its children at the
+  the inset as padding, and stacks its children at the
   screen's gap. Never hand-lay `top: 40%` on a screen.
 - **The bar is the screen's bottom.** Plain `.action-bar` for one move; with a
   control that belongs to the screen (a slider), `.action-bar--tiers` stacks a
@@ -588,8 +586,8 @@ Rules:
   theme's values are the project's call. The derivations are only starting points;
   any role can be set outright.
 - The member's text-size setting is the same `--fs-base`, written on `<html>`
-  by the app at run time (2.2rem = 160%): the words grow, the things keep their
-  size. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
+  at run time by `setTextScale(percent)` (a share of the theme's base; 100 = the
+  theme's own): the words grow, the things keep their size. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
 
 Try it live: the gallery's nav (`npm run dev`) has a slider per size base, and
 palette `own` shows a colour well per colour base.
@@ -619,8 +617,8 @@ whole system still resizes from one number: the root font size. `base.css` keeps
 default) and steps narrow phones (≤360px) to `93.75%`, which keeps the 25rem
 column, its 48px taps and its type in proportion on 320–360 screens. Only
 `--border-w`, `--rule-w` and the focus ring stay in px, so edges stay crisp.
-An app with its own text-size setting writes `--fs-base` on `<html>` (the type
-base, 1.375rem = 100%; 2.2rem = 160%): only the type and its holders (the count
+An app with its own text-size setting calls `setTextScale(percent)`, which writes
+`--fs-base` on `<html>` from the theme's base (100% = the theme's; 160% = 2.2rem by default): only the type and its holders (the count
 badge, the inline icon) grow; taps, spacing and radii keep their size.
 Components never write a raw length: spacing from `--sp-*`, control sizes from
 `--tap`, `--tap-lg`, `--btn-h`, `--bar-h`, `--header-h`, `--fab`, `--badge`, container

package/css/actions.css

@@ -72,7 +72,7 @@
   border-radius: var(--appbar-who-radius, var(--r-chip));
   -webkit-tap-highlight-color: transparent;
 }
-.appbar__who:focus-visible { outline: var(--focus); outline-offset: 2px; }
+.appbar__who:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 .appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
 .appbar__title { font: var(--type-label); }
 .appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
@@ -333,3 +333,26 @@
 .card .action-note { color: var(--action-note-ink, var(--card-muted)); }
 .action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
 .action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
+
+/* PRESS (Lh 2026-09-25): every CONTROL answers a tap — it gives under the finger and springs back, its choice fill fades in;
+   INFORMATION never does (no pointer, no press). One list, zero specificity: a component's own rule always wins. */
+:where(.btn, .icon-btn, .fab, .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, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item) {
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: scale var(--motion-press) ease-out;
+}
+/* a CHOICE's fill fades in as it is picked (a button's colour never changes on a tap, so it does not fade) */
+:where(.chip--pick, .tile--pick, .day, .segment__item, .calendar__day, .float-bar__item, .menu__item) {
+  transition: scale var(--motion-press) ease-out, background-color var(--motion-press) ease-out, color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
+}
+:where(.btn, .icon-btn, .fab, .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, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active:not(:disabled, [aria-disabled="true"]) {
+  scale: var(--press-scale);
+}
+:where(.btn, .icon-btn, .fab, .link, a.chip, button.chip, a.tile, button.tile, .day, .segment__item, .calendar__day, .float-bar__item,
+  .avatar-pick__item, .add-row, .picker__item, .sheet-stack__back, .dropdown__btn):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+@media (prefers-reduced-motion: reduce) {
+  :where(.btn, .icon-btn, .fab, .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, .sheet-stack__back, .dropdown__btn, .appbar__who, .menu__item):active { scale: none; }
+}

package/css/base.css

@@ -9,7 +9,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, .dropdown__trigger, .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 {
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
@@ -102,7 +102,7 @@ button { font: inherit; cursor: pointer; }
 
 .t-muted { color: var(--on-surface-muted); }
 .card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
-.card--3 .t-muted { color: inherit; opacity: 0.7; } /* card-muted is tuned for light cards; dim instead on the dark slot */
+.card--3 .t-muted { color: inherit; opacity: var(--dim); } /* card-muted is tuned for light cards; dim instead on the dark slot */
 .t-caps  { text-transform: uppercase; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.

package/css/card.css

@@ -26,6 +26,8 @@
 
 .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); }
+.card--4 { --card-bg: var(--card-4-bg); --card-ink: var(--card-4-ink); --card-muted: var(--card-4-muted); }
+.card--5 { --card-bg: var(--card-5-bg); --card-ink: var(--card-5-ink); --card-muted: var(--card-5-muted); }
 
 /* dark/accent slot: accent-toned controls would vanish — the slot re-points
    the accent tokens, so every accent consumer (btn--primary, chip--on,
@@ -159,8 +161,7 @@
      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). */
+     block keeps that room (a card and its pager under it needs 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;
@@ -171,9 +172,8 @@
 
 /* ---- 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
+   pager under it. The block runs edge to
+   edge and keeps the screen's inset as padding, 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>
@@ -246,14 +246,10 @@
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
 }
-:root[data-slide="next"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
-:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
-:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
-:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
-:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(centre-card-out), :root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(centre-card-in), :root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card-out), :root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card-in), :root[data-slide="back"]::view-transition-new(screen-in) { 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; } }

package/css/choice.css

@@ -139,7 +139,7 @@
 .calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--calendar-head-gap, var(--sp-2)); }
 .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-grid-gap, var(--sp-1)); justify-items: center; }
 .calendar__wd { font: var(--calendar-wd-font, var(--type-caption)); color: var(--calendar-wd-ink, var(--card-muted)); padding-block: var(--calendar-wd-pad-y, var(--sp-2)); }
-.card--3 .calendar__wd { color: inherit; opacity: 0.7; }
+.card--3 .calendar__wd { color: inherit; opacity: var(--dim); }
 .calendar__day {
   width: 100%;
   max-width: var(--calendar-day-max-w, var(--tap));
@@ -242,7 +242,7 @@
 .composer__input::placeholder { color: inherit; opacity: 0.4; }
 .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)); }
-.card--3 .composer__hint { color: inherit; opacity: 0.7; }
+.card--3 .composer__hint { color: inherit; opacity: var(--dim); }
 
 /* ---- 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>

package/css/journey.css

@@ -26,7 +26,7 @@
 .route__point--end .route__code::after { content: none; }
 .route__time { font: var(--route-time-font, var(--type-body)); font-variant-numeric: tabular-nums; }
 .route__place { font: var(--route-place-font, var(--type-caption)); color: var(--route-place-ink, var(--card-muted)); }
-.card--3 .route__place { color: inherit; opacity: 0.7; }
+.card--3 .route__place { color: inherit; opacity: var(--dim); }
 
 .route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
 
@@ -40,7 +40,7 @@
   background: var(--tile-badge-bg, var(--card-3-bg));
   color: var(--tile-badge-ink, var(--card-3-ink));
 }
-.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: 0.7; }
+.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: var(--dim); }
 .tile-badge__value { font: 800 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
 
 /* plain: no fill — a date box beside a title (Jun / 18) */
@@ -58,4 +58,4 @@
   font: var(--note-row-font, var(--type-caption));
   color: var(--note-row-ink, var(--card-muted));
 }
-.card--3 .note-row { color: inherit; opacity: 0.7; }
+.card--3 .note-row { color: inherit; opacity: var(--dim); }

package/css/layover.css

@@ -1,7 +1,7 @@
 /* ============================================================
    cardds/layover.css — cards that lay OVER other content:
    Modal (ask) · popover menu · expanding banner · float bar ·
-   callout · swipe deck. The sheet (peek / half / full / page)
+   callout. The sheet (peek / half / full / page)
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
@@ -72,7 +72,7 @@
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
-.modal__drawer .t-caption { opacity: 0.7; }
+.modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {
@@ -144,7 +144,7 @@
   cursor: pointer;
 }
 .menu__item:hover, .menu__item:focus-visible { background: var(--ink-tint); outline: none; }
-.menu__item[aria-current], .menu__item.is-on { background: var(--accent); color: var(--on-accent); }
+.menu__item[aria-current] { background: var(--accent); color: var(--on-accent); }
 @supports (anchor-name: --a) {
   .menu[popover] {
     position-area: block-end span-inline-end;
@@ -255,8 +255,7 @@
 }
 /* aria-current="false" is the correct way to mark the OTHER tabs, so the
    bare attribute selector lights every one of them up */
-.float-bar__item[aria-current]:not([aria-current="false"]),
-.float-bar__item.is-on { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); opacity: 1; }
 .float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
 
 /* ---- callout: a small card with a tail — over a map, a media, a mascot ----
@@ -290,18 +289,7 @@
   border-left: 0;
 }
 .callout__title { font: var(--callout-title-font, var(--type-title)); }
-.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: 0.7; }
-/* ---- deck: swipe cards; the last child is on top ----
-   <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
-   <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */
-.deck { display: grid; place-items: center; padding: var(--deck-pad-top, var(--sp-4)) var(--deck-pad-x, var(--sp-4)) var(--deck-pad-bottom, var(--sp-6)); }
-.deck > .card { grid-area: 1 / 1; width: min(100%, 20rem); min-height: 12.5rem; transition: rotate 0.3s ease, translate 0.3s ease; }
-.deck > .card:nth-last-child(2) { rotate: -4deg; translate: calc(-1 * var(--sp-2)) var(--sp-2); opacity: 0.85; }
-.deck > .card:nth-last-child(3) { rotate: 5deg; translate: var(--sp-3) var(--sp-4); opacity: 0.6; }
-.deck > .card:nth-last-child(n + 4) { display: none; }
-.deck__actions { display: flex; justify-content: center; gap: var(--deck-actions-gap, var(--sp-8)); }
-.deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }
-
+.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: var(--dim); }
 /* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
    <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
      <p class="splash__text">…</p></div></section>

package/css/media.css

@@ -53,7 +53,7 @@
 .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(--quote-by-font, var(--type-caption)); color: var(--quote-by-ink, var(--card-muted)); }
-.card--3 .quote__by { color: inherit; opacity: 0.7; }
+.card--3 .quote__by { color: inherit; opacity: var(--dim); }
 
 /* ---- tile grid: big square tiles — icon top, label bottom ----
    <div class="tile-grid"><button class="tile"><svg class="icon"/><span class="tile__label">Light</span></button>
@@ -79,11 +79,10 @@
   font: inherit;
   text-align: left;
   position: relative;
-  cursor: pointer;
 }
 .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__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: var(--dim); }
 .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; }
@@ -91,7 +90,7 @@
 .tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 .tile--wide { grid-column: 1 / -1; }
 /* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
-.tile--stat { border-color: transparent; background: none; padding-inline: 0; cursor: default; }
+.tile--stat { border-color: transparent; background: none; padding-inline: 0; }
 .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 {
@@ -105,6 +104,8 @@
 }
 /* tinted tiles: slot colors inside a card (schedule, notes) */
 .tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); color: var(--tile-2-ink, var(--card-2-ink)); border-color: transparent; }
+.tile--4 { background: var(--tile-4-bg, var(--card-4-bg)); color: var(--tile-4-ink, var(--card-4-ink)); border-color: transparent; }
+.tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); color: var(--tile-5-ink, var(--card-5-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) ----
@@ -113,7 +114,7 @@
    the corner read as a notch with a line through it rather than a lifted flap.
    The COLOUR goes transparent rather than the border going to 0, so the box
    keeps its geometry and a fold card still measures the same as the cards
-   beside it in a deck. */
+   beside it. */
 .card--fold {
   border-color: transparent;
   border-bottom-right-radius: 0;

package/css/numbers.css

@@ -33,7 +33,7 @@
 }
 .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; }
+.card--3 .ring__label { color: inherit; opacity: var(--dim); }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
 .ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
 .ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
@@ -86,6 +86,7 @@
   background: color-mix(in srgb, var(--_ink) 30%, transparent);
   color: var(--_ink);
 }
+.track__step > .track__dot { display: grid; place-items: center; padding: 0; font: var(--track-dot-font, var(--type-title)); font-variant-numeric: tabular-nums; } /* a number in the round (TrackStep num) */
 .track__step.is-done > .icon,
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
@@ -107,7 +108,7 @@
 }
 .band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
 .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; }
+.card--3 .band__foot { color: inherit; opacity: var(--dim); }
 /* 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 {
@@ -206,7 +207,7 @@
 }
 .picker::after { left: auto; right: calc(100% / 3); }
 .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; }
+.card--3 .picker__unit { color: inherit; opacity: var(--dim); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
   .picker__item { opacity: 0.3; animation: picker-focus linear both; animation-timeline: view(x); }

package/css/palette.css

@@ -26,46 +26,6 @@
   --dot-a: #e05c3a;  --dot-b: #6f6be0;
 }
 
-/* ---- SHINE — shiny: periwinkle surface, coral / black / gold cards ---- */
-[data-palette="shine"] {
-  --surface: #6d6ae4;
-  --on-surface: #ffffff;
-  --on-surface-muted: #d3d2f7;
-
-  --card-1-bg: #eec85a;  --card-1-ink: #16161a;
-  --card-2-bg: #e8624a;  --card-2-ink: #16161a;
-  --card-3-bg: #1b1b1f;  --card-3-ink: #ffffff;
-
-  --card-border: transparent;
-  --card-muted: #4c4a44;
-
-  --accent: #1b1b1f;     --on-accent: #ffffff;
-  --action-bg: #ffffff;  --action-ink: #16161a;  --action-border: transparent;
-
-  --pos: #2e9e5b;  --neg: #d6402a;
-  --dot-a: #e8624a;  --dot-b: #6d6ae4;
-}
-
-/* ---- FIELD — warm peach editorial: cream surface, orange accent ---- */
-[data-palette="field"] {
-  --surface: #f9e8dc;
-  --on-surface: #241f1b;
-  --on-surface-muted: #8a7d72;
-
-  --card-1-bg: #ffffff;  --card-1-ink: #241f1b;
-  --card-2-bg: #f6d9c5;  --card-2-ink: #241f1b;
-  --card-3-bg: #ef4e0b;  --card-3-ink: #fff4ec;
-
-  --card-border: transparent;
-  --card-muted: #8a7d72;
-
-  --accent: #ef4e0b;     --on-accent: #fff4ec;
-  --action-bg: #ffffff;  --action-ink: #241f1b;  --action-border: transparent;
-
-  --pos: #2e8f52;  --neg: #d13b1a;
-  --dot-a: #ef4e0b;  --dot-b: #241f1b;
-}
-
 /* ---- ROAST — coffee: warm cream surface, caramel accent ---- */
 [data-palette="roast"] {
   --surface: #f6f1e7;
@@ -106,6 +66,87 @@
   --dot-a: #3d63e0;  --dot-b: #eec85a;
 }
 
+/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand; every
+   tone's ink + muted is a deep shade of ITS OWN ground, so lines (currentColor mixes: --hairline, --outline, field
+   edges) come out as a darker tint of the ground under them — never a grey on a warm card. Four highlights for the
+   atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
+[data-palette="orchard"] {
+  --surface: #f4efe6;          /* linen */
+  --on-surface: #2a241c;       /* umber */
+  --on-surface-muted: #6e6353;
+
+  --card-1-bg: #fbf8f2;  --card-1-ink: #2a241c;                          /* bone paper — sheets */
+  --card-2-bg: #e6d8bf;  --card-2-ink: #33291c;                          /* sand */
+  --card-3-bg: #5c6b47;  --card-3-ink: #f6f1e6;  --card-3-muted: #d3d8c4; /* moss — the brand */
+  --card-4-bg: #d3d9c4;  --card-4-ink: #2b3322;  --card-4-muted: #515c42; /* sage mist */
+  --card-5-bg: #dcc2a6;  --card-5-ink: #3a2a1c;  --card-5-muted: #6b503a; /* clay */
+
+  --card-border: transparent;
+  --card-muted: #736754;
+  --card-2-muted: #66573f;
+
+  --accent: #5c6b47;     --on-accent: #f6f1e6;
+  --action-bg: #fbf8f2;  --action-ink: #2a241c;  --action-border: transparent;
+
+  /* highlights — decoration and atmosphere, a small dose: counts, marks, chart dots, a badge on a tile */
+  --highlight-1: #d93a1f;  /* maple red */
+  --highlight-2: #f5c518;  /* bright yellow */
+  --highlight-3: #3a9fe0;  /* sky */
+  --highlight-4: #e0457b;  /* fuchsia */
+  --dot-a: var(--highlight-1);  --dot-b: var(--highlight-3);
+
+  /* signals from Sweet Salmon #dd9787 — words and edges, always with an icon */
+  --pos: #6f8f5a;  --neg: #c4694f;
+  --signal-error: #b5503b;  /* salmon, deepened */
+  --signal-warn: #a0721f;   /* ochre */
+  --signal-ok: #4f7f4a;     /* leaf */
+  --signal-info: #4d6f96;   /* slate */
+}
+/* on the dark moss card the signals turn to their light shades — the same hues, readable on the ground */
+/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a knob) */
+[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, #fff8f0); }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); color: var(--tile-badge-ink, #2a241c); }
+[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 40%, transparent)); }
+/* fields are WHITE boxes on every ground (Lh 2026-09-25) — the words typed in them read dark, even on the moss card */
+[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: #2a241c; }
+[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: #2a241c; }
+/* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
+[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, #2a241c); }
+[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); color: var(--avatar-ink, #ffffff); }
+[data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
+[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); }
+[data-palette="orchard"] .toggle:checked::after { background: #ffffff; }
+[data-palette="orchard"] .card--3 { --signal-error: #f4b7a6; --signal-warn: #f1d18a; --signal-ok: #cfe6b8; --signal-info: #bcd0ec; }
+
+/* ---- VERS — Lh's own-palette pick (2026-09-25): white surface, champagne paper, sage brand; earth tones for tones 2·4·5 ---- */
+[data-palette="vers"] {
+  --surface: #ffffff;
+  --on-surface: #1f1b16;
+  --on-surface-muted: #6b6358;
+
+  --card-1-bg: #f6e7cb;  --card-1-ink: #1f1b16;  /* paper — Champagne */
+  --card-2-bg: #e3cfa6;  --card-2-ink: #1f1b16;  /* sand */
+  --card-3-bg: #678d58;  --card-3-ink: #ffffff;  /* brand — Sage */
+  --card-4-bg: #c9d6b0;  --card-4-ink: #1f1b16;  --card-4-muted: #4a5438;  /* lichen */
+  --card-5-bg: #d4bf9c;  --card-5-ink: #1f1b16;  --card-5-muted: #5e4a36;  /* wheat — bark was too dark */
+
+  --card-border: transparent;
+  --card-muted: #6b5f4c;
+  --card-2-muted: #5c4f3a;
+  --card-3-muted: #dfe8d6;
+
+  --accent: #678d58;     --on-accent: #ffffff;
+  --action-bg: #f6e7cb;  --action-ink: #1f1b16;  --action-border: transparent;
+
+  /* signals from Sweet Salmon #dd9787, deepened to read on white/champagne */
+  --pos: #7fa86f;  --neg: #dd9787;
+  --signal-error: #b5503b;  /* salmon */
+  --signal-warn: #a5782a;   /* ochre */
+  --signal-ok: #4f7f4a;     /* leaf */
+  --signal-info: #4d6f96;   /* slate */
+  --dot-a: #dd9787;  --dot-b: #b08a5a;
+}
+
 /* Colored palettes trade wireframe outlines for soft elevation. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
 /* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five

package/css/people.css

@@ -31,7 +31,7 @@
 .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(--avatar-outline-border, var(--outline)); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); cursor: pointer; }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
 /* accent avatar: the "+7" tail, the selected person */
 .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) */
@@ -76,4 +76,5 @@
 }
 .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; }
+.avatar-pick__item[aria-pressed="true"] > .avatar { background: var(--avatar-pick-on-bg, var(--accent)); color: var(--avatar-pick-on-ink, var(--on-accent)); border-color: transparent; } /* the picked person */
+.card--3 .avatar-pick__role { color: inherit; opacity: var(--dim); }

package/css/sheet.css

@@ -380,9 +380,8 @@
    bottom of the body, each its title line. Every step has a thin rule on top. A step opens and folds as a 1fr ↔ 0fr grid row, so the pile rises and
    falls — no height is written. Nothing fades: done and next read at full ink. */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
-.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; }
+.sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
 .sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
-.sheet-steps { position: relative; }
 .sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
 
 .sheet-step {
@@ -400,23 +399,22 @@
   display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
-  border-top: var(--sheet-step-border-w, 0px) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
+  border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
 }
-.sheet-step__summary { color: inherit; opacity: 0.8; }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
   flex: none; display: grid; place-items: center; inline-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2)); block-size: var(--sheet-step-num-size, calc(var(--tap-base) / 2));
   border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
-.sheet-step__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
 .sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
-.sheet-step__go { position: absolute; inset: min(0px, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sheet-step__go { position: absolute; inset: min(0rem, (var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 /* the last step's finish, when the app gives one: under the steps */
 .sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
 @media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }

package/css/stack.css

@@ -243,9 +243,6 @@
   padding-left: 0;
   transition: padding-left 0.35s ease;
 }
-.sheet-stack--tap > .card.is-open > .card__head {
-  padding-left: calc(var(--tap-sm) + var(--sp-3));
-}
 .sheet-stack--tap .sheet-stack__back {
   position: absolute;
   left: 0;
@@ -254,6 +251,12 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.35s ease, visibility 0.35s;
+  /* SMALL (see "the back button, SMALL" below) */
+  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
 }
 .sheet-stack--tap > .card.is-open .sheet-stack__back {
   opacity: 1;
@@ -313,13 +316,6 @@
    tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
    (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
 .sheet-stack--tap > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) + var(--sp-2))); }
-.sheet-stack--tap .sheet-stack__back {
-  width: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  height: var(--stack-back-size, calc(var(--tap-base) * 2 / 3));
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-}
 .sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--stack-back-size, calc(var(--tap-base) * 2 / 3)) - var(--tap-sm)) / 2); }