@usableapp/cardds 0.7.16 → 0.7.17

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: var(--dim); }
 .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: 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>
@@ -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: 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)); }
 
@@ -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: var(--dim); }

package/css/layover.css

@@ -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;
@@ -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,15 +134,11 @@
   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] { background: var(--accent); color: var(--on-accent); }
@@ -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,13 +235,10 @@
   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;

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: 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>
@@ -85,13 +84,10 @@
 .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; }
-.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;
@@ -168,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,
@@ -198,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;
@@ -224,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,

package/css/numbers.css

@@ -33,7 +33,6 @@
 }
 .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: 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) */
@@ -72,7 +71,7 @@
   content: "";
   flex: 1;
   height: var(--sp-3);
-  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  background: var(--ink-rail); /* the track's own ink at 30% — identical to color-mix(in srgb, var(--_ink) 30%, transparent): --ink-rail already reads currentColor, and .track sets color to --_ink */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
@@ -83,7 +82,7 @@
   flex: none;
   padding: calc((var(--tap-lg) - var(--icon)) / 2);
   border-radius: 50%;
-  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  background: var(--ink-rail);
   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) */
@@ -108,7 +107,6 @@
 }
 .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: 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 {
@@ -155,14 +153,6 @@
 @supports not (width: round(up, 1px, 1px)) {
   .dotgrid::before { display: none; }
 }
-.dotgrid--stars {
-  background-image: none;
-}
-.dotgrid--stars,
-.dotgrid--stars::before {
-  --_star: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
-}
-
 /* ---- picker: horizontal snap picker, centre value big ----
    <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
 .picker { display: grid; gap: var(--picker-gap, var(--sp-1)); justify-items: center; position: relative; }
@@ -177,20 +167,15 @@
   grid-auto-columns: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  scrollbar-width: none;
   position: relative;
 }
-.picker__rail::-webkit-scrollbar { display: none; }
 .picker__item {
   scroll-snap-align: center;
-  border: 0;
-  background: transparent;
-  color: inherit;
   padding: var(--picker-item-pad-y, var(--sp-2)) var(--picker-item-pad-x, 0);
   font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
-  opacity: 0.3;
+  opacity: var(--faint);
   text-align: center;
 }
 .picker__item[aria-selected="true"] { opacity: 1; }
@@ -207,12 +192,11 @@
 }
 .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: 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); }
+  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); } /* opacity: var(--faint) already set above — the animation alone is new here */
   @keyframes picker-focus {
-    0%, 100% { opacity: 0.3; }
+    0%, 100% { opacity: var(--faint); }
     45%, 55% { opacity: 1; }
   }
 }

package/css/people.css

@@ -57,10 +57,8 @@
   display: flex;
   gap: var(--avatar-pick-gap, var(--sp-4));
   overflow-x: auto;
-  scroll-snap-type: x proximity;
-  scrollbar-width: none; /* starts at the card's padding edge, like every row */
+  scroll-snap-type: x proximity; /* starts at the card's padding edge, like every row */
 }
-.avatar-pick::-webkit-scrollbar { display: none; }
 .avatar-pick__item {
   scroll-snap-align: start;
   flex: none;
@@ -68,13 +66,8 @@
   display: grid;
   justify-items: center;
   gap: var(--avatar-pick-item-gap, var(--sp-2));
-  border: 0;
-  background: transparent;
-  color: inherit;
-  padding: 0;
   text-align: center;
 }
 .avatar-pick__name { font: var(--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)); }
 .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

@@ -1,6 +1,6 @@
 /* ============================================================
    cardds/sheet.css — sheet single: one card as a bottom sheet.
-   Four states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full
+   Five states: .sheet--peek · .sheet--half · .sheet--3q · .sheet--full · .sheet--away
 
    A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
    (stack.css): it is ALWAYS the full height of the box that holds it —
@@ -41,8 +41,8 @@
    the body. The handle and the head stay where they are at every
    state; the body is what scrolls — a sheet is a card whose head is
    pinned, not a scrolling column with a title somewhere in it.
-   cardds.js adds the handle's click / drag / keyboard and the focus
-   raise; without it every state still renders.
+   The Sheet component adds the handle's click / drag / keyboard and the
+   focus raise; without it every state still renders.
    ============================================================ */
 
 .sheet {
@@ -70,7 +70,7 @@
   position: absolute;
   inset: 0;
   top: var(--_top, 0);            /* a stage keeps its top bar's line free — see .sheet-stage */
-  translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: cardds.js, only while the handle is held */
+  translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: the Sheet component, only while the handle is held */
   transition: translate var(--motion-sheet) ease;
 
   /* handle · head · body: a column, the body takes what is left and scrolls
@@ -81,6 +81,7 @@
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
+  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -146,9 +147,8 @@
    takes no taps, its buttons do; the strip behind them is the sheet's ground, --_foot tall, and the body
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
-.sheet { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); }
 /* …and the link row under the button, when there is one (its line + the gap over it) */
-.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + calc(var(--tap-base) * 7 / 12) + var(--card-pad)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad)); }
 .sheet > .card__foot {
   position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
   align-items: end;
@@ -174,7 +174,7 @@
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
    its hit box to --tap tall and wider than the bar without changing the
-   picture. touch-action: none hands a touch drag to cardds.js instead of to
+   picture. touch-action: none hands a touch drag to the Sheet component instead of to
    the scroller behind it. */
 .sheet__handle {
   position: relative;
@@ -248,7 +248,7 @@
 .screen > .sheet-stage { margin-inline: calc(-1 * var(--screen-pad)); width: auto; } /* auto: 100% would keep the inset width */
 /* a stage laid OVER its screen (a Modal a link opened, Lh 2026-09-23): the page shows through, the stage covers it and its bar */
 .sheet-stage--over, .screen > .sheet-stage--over {
-  position: absolute; inset: 0; z-index: 40;
+  position: absolute; inset: 0; z-index: var(--z-top);
   width: auto; height: auto; max-width: none; margin: 0;
   background: transparent;
   --_top: 0rem;
@@ -305,7 +305,7 @@
   translate: -50% -50%;
   border-radius: 50%;
   border: var(--border-w) solid var(--map-ring-border, var(--accent));
-  background: var(--map-ring-bg, color-mix(in srgb, var(--accent) 22%, transparent));
+  background: var(--map-ring-bg, var(--accent-soft));
   box-shadow: var(--map-ring-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
@@ -339,9 +339,6 @@
   z-index: 1;
 }
 
-/* raised: the sheet floats above a footnote strip on the scrim. Its bottom
-   edge shows, so it gets its corners and border back; full still stops at
-   the top bar's line, because the top edge never moved. */
 /* EVERY sheet has one shape (Lh, 2026-09-21): the handle and the head stay at the top and never scroll · the
    foot's button stands at the bottom, and ABOVE the keyboard when there is one · everything between them
    scrolls, as far as it needs to. In a .step the keyboard's room is the step's (--kb, step.css); on a stage
@@ -389,6 +386,7 @@
   display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
+  --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
 }
 /* the open step GROWS into the room left, so the steps not done yet wait in a pile at the bottom — and a move is an ACCORDION:
    in one beat the step that was open folds while the new one unfolds (flex-grow and the 1fr row both ease), the piles slide
@@ -396,7 +394,7 @@
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
 .sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
-  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 */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); /* 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, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
@@ -414,7 +412,7 @@
 .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(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; }
+.sheet-step__go { position: absolute; inset: min(0rem, (var(--_row-h) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; cursor: pointer; }
 /* 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; } }