@usableapp/cardds 0.7.15 → 0.7.17

package/css/card.css

@@ -1,6 +1,7 @@
 /* ============================================================
    cardds/card.css — the card boundary + list variants
-   One card = one boundary. Tone via .card--1/2/3 (role slots).
+   One card = one boundary. The base .card is tone 1; further tones
+   via .card--2/3/4/5 (role slots).
    ============================================================ */
 
 .card {
@@ -25,14 +26,18 @@
 .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); }
-.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,
    check, toggle, ring, day…) inverts without per-component rules */
-.card--3 { --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+.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); }
+/* the dark slot's captions/hints/footnotes: --card-muted is tuned for a light card, so these dim the full ink
+   instead (one rule, matching specificity to what it replaces — .card--3 <space> <one class>) — merged from
+   base.css/choice.css/media.css/numbers.css/journey.css/people.css (2026-09-27 review). lists.css's .legend
+   differs (opacity 0.8, not --dim) and stays there. */
+.card--3 :is(.t-muted, .calendar__wd, .composer__hint, .quote__by, .ring__label, .band__foot, .picker__unit,
+  .route__place, .note-row, .avatar-pick__role) { color: inherit; opacity: var(--dim); }
 
 /* header row: title left, floating action right — centered, since the
    trailing control (chip/badge/icon-btn/link) is almost always taller than
@@ -135,7 +140,7 @@
     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;
+  opacity: var(--off);
   min-height: 10rem;
 }
 .ph--sm { min-height: 7.5rem; }
@@ -161,8 +166,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;
@@ -173,9 +177,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>
@@ -193,9 +196,9 @@
    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.
+   one simply makes the page longer, runs under the bar (a sticky last row,
+   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.
@@ -213,9 +216,9 @@
    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. */
-/* the name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on every walk's current
-   page made two walks on one page — the gallery — share it, and the browser aborts a transition with a duplicate name */
+   cross-fade. The name is set by slideTo() on the moving element for the move only (2026-09-22): a static name on
+   every walk's current page made two walks on one page — the gallery — share it, and the browser aborts a
+   transition with a duplicate name. */
 
 /* ---- pages: the cards of a walk, all one height ----
    A sequence the member walks (an introduction) reads steadier when every card
@@ -248,14 +251,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

@@ -21,7 +21,6 @@
   background: var(--check-bg, var(--action-bg));
   display: grid;
   place-items: center;
-  cursor: pointer;
 }
 .check::after {
   content: "";
@@ -34,15 +33,14 @@
 }
 .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(--check-sm-size, var(--tap-sm)); height: var(--check-sm-size, 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;
+  --_h: calc(var(--tap-base) * 3 / 4);
+  --_pad: calc(var(--tap-base) / 16);
   appearance: none;
   width: var(--_w);
   height: var(--_h);
@@ -52,8 +50,7 @@
   border: var(--border-w) solid var(--toggle-border, var(--outline));
   background: var(--toggle-bg, var(--action-bg));
   position: relative;
-  cursor: pointer;
-  transition: background 0.2s ease;
+  transition: background-color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
 }
 .toggle::after {
   content: "";
@@ -65,11 +62,10 @@
   border-radius: 50%;
   background: currentColor;
   opacity: 0.45;
-  transition: translate 0.2s ease, opacity 0.2s ease;
+  transition: translate var(--motion-quick) ease, opacity var(--motion-quick) 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); }
 
 /* ---- chip pick: a chip that is a choice — a native radio/checkbox inside the label, the picked one filled with accent.
    Full-width in a .chip-grid (one slot / many options), or hugging its word on a .chip-row with --sign (an interest
@@ -85,11 +81,12 @@
    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; position: relative; } /* the input covers the whole chip, on a row as in a grid */
-.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); }
+.chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); }
+.chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
+/* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
+   a chip, a mood dot, a tile (media.css) */
+:is(.chip--pick, .mood__opt, .tile--pick) > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
+:is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 /* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
 .chip--sign { padding-right: var(--sp-2); }
 .chip--sign::after {
@@ -122,11 +119,8 @@
   padding-block: var(--day-pad-y, 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(--day-radius, var(--r-chip));
-  background: transparent;
-  color: inherit;
-  opacity: 0.6;
+  opacity: var(--rest);
 }
 .day__name { font: var(--day-name-font, var(--type-caption)); }
 .day__num { font: 700 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
@@ -139,17 +133,13 @@
 .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; }
 .calendar__day {
   width: 100%;
   max-width: var(--calendar-day-max-w, 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 */
@@ -172,8 +162,7 @@
   display: flex;
   justify-content: space-between;
 }
-.mood__opt { flex: 1 1 0; max-width: var(--mood-opt-max-w, var(--tap)); min-width: 0; height: var(--mood-opt-h, 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__opt { flex: 1 1 0; max-width: var(--mood-opt-max-w, var(--tap)); min-width: 0; height: var(--mood-opt-h, var(--tap)); display: grid; place-items: center; position: relative; }
 .mood__dot {
   width: var(--mood-dot-size, var(--icon-xs));
   height: var(--mood-dot-size, var(--icon-xs));
@@ -204,12 +193,11 @@
   text-align: center;
   font: var(--pin-cell-font, var(--type-stat));
   font-variant-numeric: tabular-nums;
+  caret-color: transparent; /* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
+    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
+    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 }
 .pin__cell:not(:placeholder-shown) { color: var(--pin-cell-filled-ink, var(--accent)); } /* a typed digit: coloured words on the cell's own ground — no fill (Lh 2026-09-24; was an accent-filled pill) */
-/* the cell the cursor waits in (Lh 2026-09-22): NO outline ring — it sat outside the pill and got cropped by the sheet's
-   edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
-   is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
-.pin__cell { caret-color: transparent; }
 .pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
@@ -239,10 +227,9 @@
   letter-spacing: var(--track-h2);
   outline: none;
 }
-.composer__input::placeholder { color: inherit; opacity: 0.4; }
+.composer__input::placeholder { color: inherit; opacity: var(--off); }
 .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; }
 
 /* ---- 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>
@@ -253,8 +240,8 @@
 .slider { display: grid; gap: var(--slider-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
+   read (Lh, 2026-09-12). The Slider component 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 {
@@ -304,6 +291,8 @@
   box-shadow: var(--shadow-float);
 }
 .slider__range:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.slider__range:active::-webkit-slider-thumb { scale: var(--press-scale); } /* the knob gives under the finger like any control */
+.slider__range:active::-moz-range-thumb { scale: var(--press-scale); }
 
 /* ---- a switch that names itself (Toggle text, Lh 2026-09-23 — "อยู่บ้าน" on the home's top): the words, then the switch,
    one label — the whole of it is the tap target ---- */
@@ -311,7 +300,6 @@
   display: inline-flex; align-items: center; gap: var(--toggle-field-gap, var(--sp-2));
   min-height: var(--tap);
   font: var(--toggle-field-font, var(--type-label));
-  cursor: pointer;
-  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none; user-select: none;
   flex: none;
 }

package/css/forms.css

@@ -44,9 +44,6 @@
   display: inline-flex;
   align-items: center;
   gap: var(--add-row-gap, var(--sp-2));
-  border: 0;
-  background: none;
-  color: inherit;
   font: var(--add-row-font, var(--type-label));
   font-size: var(--add-row-font-size, var(--fs-body));
   padding: var(--add-row-pad-y, var(--sp-2)) var(--add-row-pad-x, 0);

package/css/journey.css

@@ -26,7 +26,6 @@
 .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; }
 
 .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 +39,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 +57,3 @@
   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; }

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.
    ============================================================ */
 
@@ -24,10 +24,11 @@
      2. the drawer comes out of the card's bottom edge while the lift moves
         up, both at once: the card grows from its centre, which never moves
         (the modal centres itself — absolute, margin auto; a growing card keeps its middle where it is)
-   Closing: a click on any button in the drawer plays the same animations in
-   reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
-   fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
-   button's data-answer) for the app to remove the stage.
+   Closing: <Modal open onClosed> — set open={false} and the Modal component plays the
+   same animations in reverse (Animation.reverse() on each — nothing duplicated), then
+   calls onClosed for the app to unmount the stage. Modal no longer knows its own
+   buttons (data-answer / the "cardds:modal" event are gone; the app's own onClick
+   sets open={false}).
    Reduced motion: the finished state, no beats; closing fires at once. */
 .modal {
   --drawer-h: 14rem;
@@ -72,7 +73,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) {
@@ -106,8 +107,8 @@
    element the button belongs to (a card, a sheet), opened by an .icon-btn:
    <button class="icon-btn icon-btn--sm" popovertarget="m1" aria-label="More">…</button>
    <div class="menu menu--actions menu--end" id="m1" popover><button class="menu__item"><svg class="icon"/>Edit</button>…</div>
-   No item stays current there (cardds.js skips the mark). .menu--end = the
-   trigger sits at the far right, so the panel grows leftwards. */
+   No item stays current there — an actions menu's items carry no aria-current, unlike
+   the dropdown's. .menu--end = the trigger sits at the far right, so the panel grows leftwards. */
 .menu {
   display: none;              /* explicit closed state — never display on the base rule */
   margin: 0;
@@ -133,18 +134,14 @@
   min-height: var(--menu-item-min-h, var(--tap));
   width: 100%;
   padding: var(--menu-item-pad-y, 0) var(--menu-item-pad-x, var(--sp-3));
-  border: 0;
   /* concentric with the panel: the card radius minus the panel's padding, so the
      highlight's curve follows the outer corner (Lh 2026-09-16) */
   border-radius: calc(var(--r-card) - var(--menu-pad, var(--sp-2)));
-  background: transparent;
-  color: inherit;
   font: var(--menu-item-font, var(--type-title));
   text-align: left;
-  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;
@@ -158,7 +155,7 @@
   .menu[popover] {
     opacity: 0;
     translate: 0 calc(-1 * var(--sp-2));
-    transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, opacity 0.2s, translate 0.2s;
+    transition: display var(--motion-quick) allow-discrete, overlay var(--motion-quick) allow-discrete, opacity var(--motion-quick), translate var(--motion-quick);
   }
   .menu:popover-open { opacity: 1; translate: 0 0; }
   .menu.\:popover-open { opacity: 1; translate: 0 0; }
@@ -179,19 +176,19 @@
   padding-inline: var(--card-pad, var(--screen-pad));
 }
 .banner__summary {
-  list-style: none; cursor: pointer;
+  list-style: none;
   display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
   padding-block: var(--banner-summary-pad-y, calc(var(--sp-base) * 1.5)); font: var(--banner-summary-font, var(--type-caption)); font-weight: 400;
 }
 .banner__summary::-webkit-details-marker { display: none; }
-.banner__summary .icon { transition: rotate 0.2s ease; }
+.banner__summary .icon { transition: rotate var(--motion-quick) ease; }
 .banner[open] .banner__summary .icon { rotate: 180deg; }
 .banner__body { display: grid; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
 .banner::details-content { width: 100%; }
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {
     .banner { interpolate-size: allow-keywords; }
-    .banner::details-content { block-size: 0; overflow: clip; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete; }
+    .banner::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-quick) ease, content-visibility var(--motion-quick) allow-discrete; }
     .banner[open]::details-content { block-size: auto; }
   }
 }
@@ -208,16 +205,12 @@
   display: flex;
   gap: var(--float-bar-gap, var(--sp-2));
   align-items: center;
-  z-index: 30;
+  z-index: var(--z-bar);
 }
 /* in a fill screen (its `bottom`) the float bar floats over the SCREEN's foot, not the window's — it lies over the content
    (a map, a stack), so it is not a row of the column; the screen is its box (Lh 2026-09-23) */
 .screen--fill > .float-bar { position: absolute; }
-.sheet-stage > .float-bar { position: absolute; padding-inline: var(--sp-4); }
-/* .screen's default bottom padding clears an .action-bar; a .float-bar is
-   taller (--bar-h + its own bottom offset), so reserve the difference. Any
-   parent that hosts the bar counts (see .action-bar's reserve, actions.css) */
-:has(> .float-bar) .screen:not(.screen--fill) { padding-bottom: calc(var(--bar-h) + var(--sp-5) + var(--sp-6)); }
+.sheet-stage > .float-bar { position: absolute; } /* padding-inline removed 2026-09-27: it hard-coded --sp-4 over the --float-bar-pad-x knob, so the knob had no effect here */
 .float-bar__pill {
   flex: 1;
   min-width: 0;
@@ -242,21 +235,17 @@
   gap: var(--float-bar-item-gap, var(--sp-0));
   min-height: var(--float-bar-item-min-h, var(--tap-lg));
   padding: var(--float-bar-item-pad, var(--sp-1));
-  border: 0;
   border-radius: var(--float-bar-item-radius, var(--r-chip));
-  background: transparent;
-  color: inherit;
   font: var(--float-bar-item-font, var(--type-caption));
   text-decoration: none;
-  opacity: 0.6;
+  opacity: var(--rest);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 /* 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 +279,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/lists.css

@@ -40,7 +40,7 @@
    who liked a postcard, the rest of a list. An end chevron turns when open. The app owns the list.
    <details class="row-expand"><summary class="row">…lead · body · end…</summary><div class="row-expand__more">…</div></details> */
 .row-expand { display: block; }
-.row-expand > summary { list-style: none; cursor: pointer; }
+.row-expand > summary { list-style: none; }
 .row-expand > summary::-webkit-details-marker { display: none; }
 .row-expand > summary > .icon:last-child { transition: rotate var(--motion-slide); }
 .row-expand[open] > summary > .icon:last-child { rotate: 180deg; }
@@ -192,14 +192,9 @@
   align-items: center;
   gap: var(--link-gap, var(--sp-1));
   min-height: var(--link-min-h, var(--tap-sm));
-  color: inherit;
   text-decoration: none;
   font: var(--link-font, var(--type-label));
   font-size: var(--link-font-size, var(--fs-body));
-  border: 0;
-  background: transparent;
-  padding: 0;
-  cursor: pointer;
 }
 /* a SMALL link (Lh 2026-09-23): a thing tapped rarely — "details", a ctaLink — at the minor-link size (15) and 28px of height;
    its 44px tap target stays, an invisible ::after around it */

package/css/media.css

@@ -13,7 +13,7 @@
   --card-ink: var(--card-3-ink);
   --accent: var(--card-3-ink);
   --on-accent: var(--card-3-bg);
-  min-height: 22.5rem;
+  min-height: var(--_cover-min-h);
   align-content: space-between;
   overflow: hidden;
   isolation: isolate;
@@ -53,7 +53,6 @@
 .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; }
 
 /* ---- 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,20 +78,16 @@
   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; }
-.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--pick's hidden input and :has(:checked) fill are declared once in choice.css, alongside .chip--pick and .mood__opt */
 .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 { 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; }
+.tile--stat { border-color: transparent; background: none; padding-inline: 0; 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;
@@ -115,7 +110,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;
@@ -169,8 +164,8 @@
   overflow: hidden;
 }
 .mosaic > :first-child { grid-row: span 2; }
-.mosaic > * { min-height: 0; border-radius: 0; opacity: 1; border-width: 0; }
-.mosaic > .ph { opacity: 0.4; border-width: var(--border-w); }
+.mosaic > * { min-height: 0; border-radius: 0; } /* opacity/border-width here were no-ops: .ph restates its own below, and nothing else in a mosaic carries either by default */
+.mosaic > .ph { opacity: var(--off); border-width: var(--border-w); }
 .mosaic > img { width: 100%; height: 100%; object-fit: cover; }
 
 /* ---- postcard: a member's introduction in the shape of a cover card — the photo fills it,
@@ -199,7 +194,7 @@
    liked it, a voice note, a reply live OUTSIDE the postcard, in a Row under it. */
 .postcard {
   position: relative;
-  min-height: var(--postcard-min-h, 22.5rem);
+  min-height: var(--postcard-min-h, var(--_cover-min-h));
   perspective: 60rem;
   border-radius: var(--postcard-radius, var(--r-card));
   isolation: isolate;
@@ -225,14 +220,10 @@
   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__turn:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+.postcard__turn:focus-visible { outline-offset: calc(-1 * var(--sp-1)); } /* the ring inside the card's edge */
 /* 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,