@usableapp/cardds 0.3.0 → 0.4.0

package/dist/cardds.css

@@ -417,10 +417,10 @@ img, svg { display: block; max-width: 100%; }
 button { font: inherit; cursor: pointer; }
 
 /* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
-.icon { width: var(--icon); height: var(--icon); flex: none; }
-.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
-.icon--xs { width: var(--icon-xs); height: var(--icon-xs); } /* inside captions, chips, links */
-.icon--lg { width: var(--icon-lg); height: var(--icon-lg); } /* empty states */
+.icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; }
+.icon--sm { width: var(--icon-sm-size, var(--icon-sm)); height: var(--icon-sm-size, var(--icon-sm)); }
+.icon--xs { width: var(--icon-xs-size, var(--icon-xs)); height: var(--icon-xs-size, var(--icon-xs)); } /* inside captions, chips, links */
+.icon--lg { width: var(--icon-lg-size, var(--icon-lg)); height: var(--icon-lg-size, var(--icon-lg)); } /* empty states */
 
 /* mobile screen column — the standard horizontal inset, and nothing vertical.
    Top and bottom are zero on purpose: vertical room is only ever a RESERVE for
@@ -487,9 +487,9 @@ button { font: inherit; cursor: pointer; }
    In a .step it is the reading block and step.css adds the flex/scroll rule ---- */
 .base-content {
   display: grid;
-  gap: var(--sp-3);
+  gap: var(--base-content-gap, var(--sp-3));
   align-content: start;          /* a tall column never stretches the rows — the words hug the top */
-  padding-block: var(--sp-4);
+  padding-block: var(--base-content-pad-y, var(--sp-4));
 }
 .base-content > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
 .base-content .cta-pack {
@@ -505,9 +505,9 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   justify-items: center;
   text-align: center;
-  gap: var(--sp-2);
-  padding: var(--sp-12) var(--sp-6);
-  color: var(--on-surface); /* full ink, icon and words alike: muted read as "disabled" at the middle of an empty screen (Lh 2026-09-16) — muted is for meta, not a sentence */
+  gap: var(--empty-state-gap, var(--sp-2));
+  padding: var(--empty-state-pad-y, var(--sp-12)) var(--empty-state-pad-x, var(--sp-6));
+  color: var(--empty-state-ink, var(--on-surface)); /* full ink, icon and words alike: muted read as "disabled" at the middle of an empty screen (Lh 2026-09-16) — muted is for meta, not a sentence */
 }
 .empty-state__action { margin-top: var(--sp-2); }
 /* inside a card (a section's "nothing yet"): the card's ink */
@@ -528,7 +528,7 @@ button { font: inherit; cursor: pointer; }
   background: var(--card-bg);
   color: var(--card-ink);
   border: var(--border-w) solid var(--card-border);
-  border-radius: var(--r-card);
+  border-radius: var(--card-radius, var(--r-card));
   padding: var(--card-pad);
   display: grid;
   gap: var(--card-gap);
@@ -559,8 +559,8 @@ button { font: inherit; cursor: pointer; }
   flex-wrap: wrap;               /* the caption / overline take a line of their own — no wrapper div */
   align-items: center;
   justify-content: space-between;
-  column-gap: var(--sp-3);
-  row-gap: var(--sp-0);
+  column-gap: var(--card-head-col-gap, var(--sp-3));
+  row-gap: var(--card-head-row-gap, var(--sp-0));
 }
 /* flat head markup (Lh 2026-09-16 — no <p>, no wrapper, only padding and gap tokens):
    <div class="card__head"><span class="t-overline t-muted">…</span><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><button class="icon-btn icon-btn--sm">…</button></div>
@@ -571,8 +571,8 @@ button { font: inherit; cursor: pointer; }
 .card__head > .t-overline { order: -1; }
 .card__head--top { align-items: flex-start; }
 
-.card__media { border-radius: var(--r-media); overflow: hidden; position: relative; } /* relative: corner badges */
-.card__end { text-align: right; display: grid; gap: var(--sp-0); justify-items: end; } /* trailing value + caption */
+.card__media { border-radius: var(--card-media-radius, var(--r-media)); overflow: hidden; position: relative; } /* relative: corner badges */
+.card__end { text-align: right; display: grid; gap: var(--card-end-gap, var(--sp-0)); justify-items: end; } /* trailing value + caption */
 .card__media > img { width: 100%; height: auto; object-fit: cover; }
 
 /* ---- the card skeleton: head · content · foot ----
@@ -636,7 +636,7 @@ button { font: inherit; cursor: pointer; }
 /* foot: the card's action buttons on one line. One button takes the width,
    up to four share it in even parts — so the gaps read even too — and from
    three on they drop their side padding so the labels keep the room. */
-.card__foot { display: flex; gap: var(--sp-2); align-items: center; }
+.card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
 .card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
 
@@ -770,51 +770,52 @@ button { font: inherit; cursor: pointer; }
 .screen__centre > .pager__at { justify-self: center; }
 
 /* compact card inside a card (nested note, promo) */
-.card--sm { padding: var(--sp-4); --card-gap: var(--sp-2); border-radius: var(--r-card); }
+.card--sm { padding: var(--card-sm-pad, var(--sp-4)); --card-gap: var(--sp-2); border-radius: var(--card-sm-radius, var(--r-card)); }
 
 /* the sheet stack (.sheet-stack) — sheets stacked, heads peeking — lives in
    stack.css; a stacked sheet is a plain .card, the material */
 
 /* trailing icon cluster in a card header */
-.icon-row { display: flex; align-items: center; gap: var(--sp-4); opacity: 0.85; }
+.icon-row { display: flex; align-items: center; gap: var(--icon-row-gap, var(--sp-4)); opacity: 0.85; }
 
 /* ---- card list: rows, each row its own boundary ---- */
-.card-list { display: grid; gap: var(--sp-3); }
+.card-list { display: grid; gap: var(--card-list-gap, var(--sp-3)); }
 
 .card--row {
-  border-radius: var(--r-card);
-  padding: var(--sp-4);
+  border-radius: var(--card-row-radius, var(--r-card));
+  padding: var(--card-row-pad, var(--sp-4));
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
+  gap: var(--card-row-gap, var(--sp-3));
 }
 .card--row .card__body { flex: 1; display: grid; gap: var(--sp-0); }
 
 /* leading thumb/icon in a row */
 .card__thumb {
-  width: var(--tap-sm); height: var(--tap-sm);
+  width: var(--card-thumb-size, var(--tap-sm)); height: var(--card-thumb-size, var(--tap-sm));
   flex: none;
-  border-radius: var(--r-control);
+  border-radius: var(--card-thumb-radius, var(--r-control));
   border: var(--border-w) solid currentColor;
   display: grid;
   place-items: center;
-  font: var(--type-label);
+  font: var(--card-thumb-font, var(--type-label));
   opacity: 0.85;
 }
 
 /* ---- inline stat block (revenue-style) ---- */
-.stat { display: grid; gap: var(--sp-1); }
-.stat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+.stat { display: grid; gap: var(--stat-gap, var(--sp-1)); }
+.stat--centre { text-align: center; justify-items: center; } /* the one number of a sheet or a stage, under a centred avatar */
+.stat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--stat-row-gap, var(--sp-3)); }
 
 .delta {
-  font: var(--type-caption);
+  font: var(--delta-font, var(--type-caption));
   font-weight: 700;
-  padding: var(--sp-1) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  padding: var(--delta-pad-y, var(--sp-1)) var(--delta-pad-x, var(--sp-2));
+  border-radius: var(--delta-radius, var(--r-chip));
+  background: var(--delta-bg, var(--card-3-bg));
+  color: var(--delta-ink, var(--card-3-ink));
 }
-.delta--neg { background: var(--neg); color: var(--card-3-ink); } /* light ink on the signal color in every slot */
+.delta--neg { background: var(--delta-neg-bg, var(--neg)); color: var(--delta-neg-ink, var(--card-3-ink)); } /* light ink on the signal color in every slot */
 
 /* ---- css/stack.css — sheet stack: .sheet-stack — the menu, sheets stacked, heads peek, tap opens ---- */
 /* ============================================================
@@ -1159,7 +1160,7 @@ button { font: inherit; cursor: pointer; }
   overflow: clip;
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
-  box-shadow: var(--shadow-sheet);
+  box-shadow: var(--sheet-shadow, var(--shadow-sheet));
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -1257,7 +1258,7 @@ button { font: inherit; cursor: pointer; }
   opacity: 0.3;
   width: var(--tap-sm);
   height: var(--_handle);
-  border-radius: var(--r-chip);
+  border-radius: var(--sheet-handle-radius, var(--r-chip));
   margin: 0 auto;
   padding: 0;
   touch-action: none;
@@ -1289,8 +1290,8 @@ button { font: inherit; cursor: pointer; }
   min-height: var(--tap);
   text-align: center;
 }
-.sheet__title { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; }
-.sheet__sub { font: var(--type-caption); color: var(--card-muted); }
+.sheet__title { font: var(--sheet-title-font, var(--type-h2)); letter-spacing: var(--track-h2); margin: 0; }
+.sheet__sub { font: var(--sheet-sub-font, var(--type-caption)); color: var(--sheet-sub-ink, var(--card-muted)); }
 
 /* ============================================================
    .sheet-stage — the overlay stage: a page-height box the sheet
@@ -1312,7 +1313,7 @@ button { font: inherit; cursor: pointer; }
   margin-inline: auto;
   overflow: clip; /* not hidden: a clipped box is not a scroll container, so revealing a focused field never shifts the stage */
   container-type: size; /* the sheet's body reads this box's height as 100cqh (--_box above) */
-  background: var(--surface);
+  background: var(--sheet-stage-bg, var(--surface));
 }
 /* on an app screen the stage is the page: it takes the screen's inset back (edge to
    edge, like a step) and, after a fixed .appbar, the room the screen reserved for
@@ -1347,7 +1348,7 @@ button { font: inherit; cursor: pointer; }
   position: absolute;
   inset: 0;
   isolation: isolate; /* the ring and the hint stack inside the map only — a sheet over the map covers them */
-  color: var(--on-surface);
+  color: var(--map-ink, var(--on-surface));
   background:
     repeating-linear-gradient(75deg,  transparent 0 5.5rem,  var(--hairline) 5.5rem 6.25rem),
     repeating-linear-gradient(-18deg, transparent 0 8.75rem, var(--ink-tint) 8.75rem 9.25rem),
@@ -1365,9 +1366,9 @@ button { font: inherit; cursor: pointer; }
   height: var(--map-ring);
   translate: -50% -50%;
   border-radius: 50%;
-  border: var(--border-w) solid var(--accent);
-  background: color-mix(in srgb, var(--accent) 22%, transparent);
-  box-shadow: var(--shadow-float);
+  border: var(--border-w) solid var(--map-ring-border, var(--accent));
+  background: var(--map-ring-bg, color-mix(in srgb, var(--accent) 22%, transparent));
+  box-shadow: var(--map-ring-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
@@ -1376,10 +1377,10 @@ button { font: inherit; cursor: pointer; }
   right: var(--sp-2);
   bottom: var(--sp-2);
   padding: var(--sp-0) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: color-mix(in srgb, var(--surface) 80%, transparent);
-  color: var(--on-surface-muted);
-  font: var(--type-caption);
+  border-radius: var(--map-credit-radius, var(--r-chip));
+  background: var(--map-credit-bg, color-mix(in srgb, var(--surface) 80%, transparent));
+  color: var(--map-credit-ink, var(--on-surface-muted));
+  font: var(--map-credit-font, var(--type-caption));
   pointer-events: none;
   z-index: 1;
 }
@@ -1390,12 +1391,12 @@ button { font: inherit; cursor: pointer; }
   translate: -50% 0;
   max-width: calc(100% - 2 * var(--sp-4));
   padding: var(--sp-2) var(--sp-4);
-  border-radius: var(--r-chip);
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
-  font: var(--type-label);
+  border-radius: var(--map-hint-radius, var(--r-chip));
+  background: var(--map-hint-bg, var(--card-3-bg));
+  color: var(--map-hint-ink, var(--card-3-ink));
+  font: var(--map-hint-font, var(--type-label));
   text-align: center;
-  box-shadow: var(--shadow-float);
+  box-shadow: var(--map-hint-shadow, var(--shadow-float));
   pointer-events: none;
   z-index: 1;
 }
@@ -1409,7 +1410,7 @@ button { font: inherit; cursor: pointer; }
    the sheet gives it up itself, as --_lift — the same token a raised sheet floats on. */
 .sheet-stage > .sheet { --_lift: var(--kb, 0rem); bottom: var(--_lift); }
 .sheet-stage > .sheet--raised { --_lift: calc(var(--tap-lg) + var(--kb, 0rem)); }
-.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--r-card); border-bottom: var(--border-w) solid var(--card-border); }
+.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--sheet-raised-radius, var(--r-card)); border-bottom: var(--border-w) solid var(--card-border); }
 .sheet-stage__foot {
   position: absolute;
   inset-inline: 0;
@@ -1418,8 +1419,8 @@ button { font: inherit; cursor: pointer; }
   margin: 0;
   display: grid;
   place-items: center;
-  font: var(--type-caption);
-  color: var(--card-3-ink);
+  font: var(--sheet-stage-foot-font, var(--type-caption));
+  color: var(--sheet-stage-foot-ink, var(--card-3-ink));
   z-index: 2;
 }
 
@@ -1543,13 +1544,13 @@ button { font: inherit; cursor: pointer; }
 .field {
   display: flex;
   align-items: center;
-  gap: var(--sp-2);
-  border: var(--border-w) solid var(--action-border);
-  border-radius: var(--r-control);
-  background: var(--action-bg);
-  color: var(--action-ink);
-  padding-inline: var(--sp-4);
-  min-height: var(--tap);
+  gap: var(--field-gap, var(--sp-2));
+  border: var(--border-w) solid var(--field-border, var(--action-border));
+  border-radius: var(--field-radius, var(--r-control));
+  background: var(--field-bg, var(--action-bg));
+  color: var(--field-ink, var(--action-ink));
+  padding-inline: var(--field-pad-x, var(--sp-4));
+  min-height: var(--field-min-h, var(--tap));
   min-width: 0;
 }
 
@@ -1566,7 +1567,7 @@ button { font: inherit; cursor: pointer; }
 .field input::placeholder { color: inherit; opacity: 0.55; }
 
 /* field with its action inside: date pick, send, go — the button sits flush right */
-.field--action { padding-right: var(--sp-1); min-height: var(--tap-lg); }
+.field--action { padding-right: var(--sp-1); min-height: var(--field-action-min-h, var(--tap-lg)); }
 .field--action > .icon-btn { margin-left: auto; }
 
 /* colored palettes drop the visible outline elsewhere — fields keep one */
@@ -1576,25 +1577,25 @@ button { font: inherit; cursor: pointer; }
 .add-row {
   display: inline-flex;
   align-items: center;
-  gap: var(--sp-2);
+  gap: var(--add-row-gap, var(--sp-2));
   border: 0;
   background: none;
   color: inherit;
-  font: var(--type-label);
-  font-size: var(--fs-body);
-  padding: var(--sp-2) 0;
-  min-height: var(--tap-sm);
+  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);
+  min-height: var(--add-row-min-h, var(--tap-sm));
 }
 .add-row__plus {
-  width: var(--icon);
-  height: var(--icon);
+  width: var(--add-row-plus-size, var(--icon));
+  height: var(--add-row-plus-size, var(--icon));
   flex: none;
   border-radius: 50%;
-  background: var(--accent);
-  color: var(--on-accent);
+  background: var(--add-row-plus-bg, var(--accent));
+  color: var(--add-row-plus-ink, var(--on-accent));
   display: grid;
   place-items: center;
-  font-size: var(--fs-md);
+  font-size: var(--add-row-plus-font-size, var(--fs-md));
   line-height: 1;
 }
 .add-row__plus .icon { width: var(--icon-xs); height: var(--icon-xs); }
@@ -1607,40 +1608,40 @@ button { font: inherit; cursor: pointer; }
    ============================================================ */
 
 /* ---- route: endpoint · dotted connector (icon in middle) · endpoint ---- */
-.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sp-1); } /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
+.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--route-col-gap, var(--sp-1)); } /* line → icon: --sp-1, as the via always had; code → line is the code row's own --sp-3 */
 /* the two endpoints get EQUAL columns whatever their words measure, so the via
    (the icon alone) sits at the card's centre; each dotted run lives on ITS
    endpoint's code row and fills that side's leftover — with short names the
    runs are long and equal, a long place name wraps in its half instead of
    pushing the plane (Lh 2026-09-16) */
 
-.route__point { display: grid; gap: var(--sp-0); min-width: 0; }
+.route__point { display: grid; gap: var(--route-point-gap, var(--sp-0)); min-width: 0; }
 .route__point--end { text-align: right; }
 
-.route__code { font: var(--type-h2); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--sp-3); }
+.route__code { font: var(--route-code-font, var(--type-h2)); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--route-code-gap, var(--sp-3)); }
 .route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: 0.65; }
 .route__point--end .route__code::after { content: none; }
-.route__time { font: var(--type-body); font-variant-numeric: tabular-nums; }
-.route__place { font: var(--type-caption); color: var(--card-muted); }
+.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 { display: flex; align-items: center; opacity: 0.65; font-size: var(--fs-body); }
+.route__via { display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
 
 /* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
 .tile-badge {
   display: inline-grid;
   justify-items: center;
-  gap: var(--sp-0);
-  padding: var(--sp-1) var(--sp-2);
-  border-radius: var(--r-badge);
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  gap: var(--tile-badge-gap, var(--sp-0));
+  padding: var(--tile-badge-pad-y, var(--sp-1)) var(--tile-badge-pad-x, var(--sp-2));
+  border-radius: var(--tile-badge-radius, var(--r-badge));
+  background: var(--tile-badge-bg, var(--card-3-bg));
+  color: var(--tile-badge-ink, var(--card-3-ink));
 }
-.tile-badge__label { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.7; }
+.tile-badge__label { font: var(--tile-badge-label-font, var(--type-overline)); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.7; }
 .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) */
-.tile-badge--plain { background: transparent; color: inherit; padding: 0; min-width: var(--tap-sm); }
+.tile-badge--plain { background: transparent; color: inherit; padding: 0; min-width: var(--tile-badge-plain-min-w, var(--tap-sm)); }
 .tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
 
 /* corner badge: pin a tile badge on media (rating, price) — .card__media is relative */
@@ -1650,9 +1651,9 @@ button { font: inherit; cursor: pointer; }
 .note-row {
   display: flex;
   align-items: center;
-  gap: var(--sp-2);
-  font: var(--type-caption);
-  color: var(--card-muted);
+  gap: var(--note-row-gap, var(--sp-2));
+  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; }
 
@@ -1662,6 +1663,14 @@ button { font: inherit; cursor: pointer; }
    topbar, chips, buttons, selects, bottom CTA pack
    ============================================================ */
 
+/* KNOBS (Lh 2026-09-21) — cardds is a framework: a project adjusts ONE component from outside, without touching this file.
+   A knob is a custom property a rule reads WITH ITS DEFAULT AS THE FALLBACK — `padding-inline: var(--btn-pad-x, var(--sp-6))` —
+   so it is declared nowhere: unset, nothing moves (tests/style-snapshot proves it); set in the project's theme.css it retunes
+   that component everywhere; set on any element it retunes the components inside that element only. Names: --<component>-<what>
+   (--btn-pad-x, --chip-bg, --icon-btn-size, --appbar-pad-x); a variant says so (--btn-primary-bg, --chip-on-ink, --icon-btn-sm-size).
+   The sizes that already were root tokens (--btn-h, --chip-h, --bar-h, --header-h, --fab…) are knobs too — set them the same way.
+   Prefer a BASE when the whole system should move (tokens.css); reach for a knob when ONE component should. `npm run knobs` lists them all. */
+
 /* ---- the bars across the top of a screen: one height, whatever they carry ----
    .topbar (screen title) and .appbar (app context) are the same bar with
    different contents, so the height is declared here once rather than left to
@@ -1672,8 +1681,8 @@ button { font: inherit; cursor: pointer; }
 .topbar, .appbar {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
-  padding-block: var(--sp-2);
+  gap: var(--bar-gap, var(--sp-3));
+  padding-block: var(--bar-pad-y, var(--sp-2));
   min-height: var(--header-h);
 }
 
@@ -1702,9 +1711,9 @@ button { font: inherit; cursor: pointer; }
   top: 0;
   max-width: var(--screen-w);
   margin-inline: auto;
-  padding-inline: var(--screen-pad); /* fixed + full-bleed: the screen's own inset, so the bar's contents line up with the title bar under it (Lh 2026-09-15) */
+  padding-inline: var(--appbar-pad-x, var(--screen-pad)); /* fixed + full-bleed: the screen's own inset, so the bar's contents line up with the title bar under it (Lh 2026-09-15) */
   z-index: 40; /* topmost — card animations never cover it */
-  background: var(--surface); /* solid: sliding cards never show through */
+  background: var(--appbar-bg, var(--surface)); /* solid: sliding cards never show through */
 }
 /* fixed, so it covers the top of the screen it sits in — reserve its height
    there, from the same token, the way the bottom bars reserve theirs. The
@@ -1721,19 +1730,19 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- icon button (round) ---- */
 .icon-btn {
-  width: var(--tap); height: var(--tap);
+  width: var(--icon-btn-size, var(--tap)); height: var(--icon-btn-size, var(--tap));
   flex: none;
-  border-radius: var(--r-chip);
-  border: var(--border-w) solid var(--outline); /* see .btn — same reason */
-  background: var(--action-bg);
-  color: var(--action-ink);
+  border-radius: var(--icon-btn-radius, var(--r-chip));
+  border: var(--border-w) solid var(--icon-btn-border, var(--outline)); /* see .btn — same reason */
+  background: var(--icon-btn-bg, var(--action-bg));
+  color: var(--icon-btn-ink, var(--action-ink));
   display: grid;
   place-items: center;
   font-size: var(--fs-lg);
   line-height: 1;
 }
-.icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; }
-.icon-btn--sm { width: var(--tap-sm); height: var(--tap-sm); font-size: var(--fs-title); }
+.icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
+.icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
 /* fab: the square floating action, bottom-right of a stage or screen */
 .fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: 31; }
 
@@ -1742,21 +1751,21 @@ button { font: inherit; cursor: pointer; }
   /* --outline, not --action-border: same reason as .chip — on a palette where
      --card-1-bg equals --action-bg a transparent border makes a plain button
      invisible on a white card. --primary and --quiet set their own edge. */
-  border: var(--border-w) solid var(--outline);
-  background: var(--action-bg);
-  color: var(--action-ink);
-  border-radius: var(--r-chip);
-  padding: var(--sp-4) var(--sp-6);
+  border: var(--border-w) solid var(--btn-border, var(--outline));
+  background: var(--btn-bg, var(--action-bg));
+  color: var(--btn-ink, var(--action-ink));
+  border-radius: var(--btn-radius, var(--r-chip));
+  padding: var(--btn-pad-y, var(--sp-4)) var(--btn-pad-x, var(--sp-6));
   font: var(--type-label);
-  font-size: var(--fs-md);
+  font-size: var(--btn-font-size, var(--fs-md));
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--sp-2);
+  gap: var(--btn-gap, var(--sp-2));
   min-height: var(--btn-h);
   text-decoration: none; /* .btn works as <a> too */
 }
-.btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.btn--primary { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-ink, var(--on-accent)); border-color: transparent; }
 /* quiet keeps a faint outline so it still reads as a button on colored palettes;
    it is ink on whatever it sits on — inherit, or on the dark slot (card--3) it
    would take the light-card action ink and vanish */
@@ -1776,25 +1785,25 @@ button { font: inherit; cursor: pointer; }
 .chip {
   display: inline-flex;
   align-items: center;
-  gap: var(--sp-2);
-  border-radius: var(--r-chip);
+  gap: var(--chip-gap, var(--sp-2));
+  border-radius: var(--chip-radius, var(--r-chip));
   /* --outline, not --action-border: a chip is a control, and on a palette
      where --card-1-bg == --action-bg (field, roast, hydro) a transparent
      border makes it invisible on a white card. Same edge fields, checks,
      toggles, tiles and the dropdown already use. */
-  border: var(--border-w) solid var(--outline);
-  background: var(--action-bg);
-  color: var(--action-ink);
-  padding: var(--sp-2) var(--sp-3);
+  border: var(--border-w) solid var(--chip-border, var(--outline));
+  background: var(--chip-bg, var(--action-bg));
+  color: var(--chip-ink, var(--action-ink));
+  padding: var(--chip-pad-y, var(--sp-2)) var(--chip-pad-x, var(--sp-3));
   font: var(--type-label);
-  font-size: var(--fs-sm);
+  font-size: var(--chip-font-size, var(--fs-sm));
   min-height: var(--chip-h);
   text-decoration: none;
   justify-self: start; /* as a grid child it hugs its text, never stretches */
 }
 .dot { width: var(--dot); height: var(--dot); flex: none; border-radius: 50%; background: var(--dot-a); } /* signal dot: chips, legends */
 .dot--b { background: var(--dot-b); }
-.chip--on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.chip--on { background: var(--chip-on-bg, var(--accent)); color: var(--chip-on-ink, var(--on-accent)); border-color: transparent; }
 /* dark-slot inversion lives in card.css (.card--3 :is(...)) */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@@ -1930,6 +1939,9 @@ button { font: inherit; cursor: pointer; }
 
 /* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
+/* …and whatever goes BETWEEN the two (a "skip" link) stands in the middle: the bar places it, never the link itself */
+:is(.action-bar--pager, .action-bar__tier--pager) > :not(.icon-btn):not(:first-child):not(:last-child) { margin-inline: auto; }
+:is(.action-bar--pager, .action-bar__tier--pager):has(> :nth-child(3)) > .icon-btn:first-child { margin-right: 0; }
 
 /* .screen's default bottom padding is a constant; derive the reserve from the
    bar instead, so a taller button (a longer label, a script with more leading)
@@ -1973,8 +1985,8 @@ button { font: inherit; cursor: pointer; }
   mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
 }
-.ring__value { font: var(--type-stat); letter-spacing: var(--track-display); }
-.ring__label { font: var(--type-caption); color: var(--card-muted); }
+.ring__value { font: var(--ring-value-font, var(--type-stat)); letter-spacing: var(--track-display); }
+.ring__label { font: var(--ring-label-font, var(--type-caption)); color: var(--ring-label-ink, var(--card-muted)); }
 .card--3 .ring__label { color: inherit; opacity: 0.7; }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
 .ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
@@ -1994,10 +2006,10 @@ button { font: inherit; cursor: pointer; }
   --on-accent: var(--_bg);
   list-style: none;
   margin: 0;
-  padding: var(--sp-2);
+  padding: var(--track-pad, var(--sp-2));
   display: flex;
   align-items: center;
-  border-radius: var(--r-chip);
+  border-radius: var(--track-radius, var(--r-chip));
   background: var(--_bg);
   color: var(--_ink);
 }
@@ -2038,9 +2050,9 @@ button { font: inherit; cursor: pointer; }
   grid-template-areas: "label num" "foot num";
   align-items: end;
   gap: var(--sp-2) var(--sp-4);
-  min-height: var(--tile-h);
+  min-height: var(--card-band-min-h, var(--tile-h));
 }
-.band__label { grid-area: label; align-self: start; font: var(--type-label); font-size: var(--fs-body); line-height: 1.2; }
+.band__label { grid-area: label; align-self: start; font: var(--band-label-font, var(--type-label)); font-size: var(--band-label-font-size, var(--fs-body)); line-height: 1.2; }
 .band__num {
   grid-area: num;
   font: 800 var(--fs-giant) / 0.9 var(--font-display);
@@ -2048,14 +2060,14 @@ button { font: inherit; cursor: pointer; }
   font-variant-numeric: tabular-nums;
 }
 .band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
-.band__foot { grid-area: foot; font: var(--type-caption); color: var(--card-muted); }
+.band__foot { grid-area: foot; font: var(--band-foot-font, var(--type-caption)); color: var(--band-foot-ink, var(--card-muted)); }
 .card--3 .band__foot { color: inherit; opacity: 0.7; }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
 .band-stack {
   display: grid;
-  border: var(--border-w) solid var(--card-border);
-  border-radius: var(--r-card);
+  border: var(--border-w) solid var(--band-stack-border, var(--card-border));
+  border-radius: var(--band-stack-radius, var(--r-card));
   overflow: hidden;
 }
 .band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
@@ -2106,7 +2118,7 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- picker: horizontal snap picker, centre value big ----
    <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
-.picker { display: grid; gap: var(--sp-1); justify-items: center; position: relative; }
+.picker { display: grid; gap: var(--picker-gap, var(--sp-1)); justify-items: center; position: relative; }
 .picker__rail {
   width: 100%;
   display: grid;
@@ -2114,7 +2126,7 @@ button { font: inherit; cursor: pointer; }
   /* side padding = one third of the rail, so the first and last value can sit
      in the centre; the content box is then one third wide, and each column
      fills it (percent columns resolve against the content box) */
-  padding-inline: calc(100% / 3);
+  padding-inline: var(--picker-rail-pad-x, calc(100% / 3));
   grid-auto-columns: 100%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2127,8 +2139,8 @@ button { font: inherit; cursor: pointer; }
   border: 0;
   background: transparent;
   color: inherit;
-  padding: var(--sp-2) 0;
-  font: var(--type-stat);
+  padding: var(--picker-item-pad-y, var(--sp-2)) var(--picker-item-pad-x, 0);
+  font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
   opacity: 0.3;
@@ -2147,7 +2159,7 @@ button { font: inherit; cursor: pointer; }
   left: calc(100% / 3);
 }
 .picker::after { left: auto; right: calc(100% / 3); }
-.picker__unit { font: var(--type-caption); color: var(--card-muted); }
+.picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 .card--3 .picker__unit { color: inherit; opacity: 0.7; }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
@@ -2163,30 +2175,30 @@ button { font: inherit; cursor: pointer; }
 .badge {
   display: inline-grid;
   place-items: center;
-  min-width: var(--badge);
-  height: var(--badge);
-  padding: 0 var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--accent);
-  color: var(--on-accent);
-  font: var(--type-label);
+  min-width: var(--badge-min-w, var(--badge));
+  height: var(--badge-h, var(--badge));
+  padding: var(--badge-pad-y, 0) var(--badge-pad-x, var(--sp-2));
+  border-radius: var(--badge-radius, var(--r-chip));
+  background: var(--badge-bg, var(--accent));
+  color: var(--badge-ink, var(--on-accent));
+  font: var(--badge-font, var(--type-label));
   font-variant-numeric: tabular-nums;
   vertical-align: middle;
 }
-.badge--soft { background: var(--ink-tint); color: inherit; }
+.badge--soft { background: var(--badge-soft-bg, var(--ink-tint)); color: inherit; }
 
 /* ---- bars: three or four bars with a count on top — the glance chart ----
    <div class="bars"><div class="bar" style="--v: 16"><span>+16</span></div>… --max on the parent */
-.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--sp-2); height: calc(var(--_h) + var(--sp-8)); }
+.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--bars-gap, var(--sp-2)); height: calc(var(--_h) + var(--sp-8)); }
 .bar {
   flex: 1;
   min-width: 0;
   display: grid;
   align-content: end;
   justify-items: center;
-  gap: var(--sp-1);
+  gap: var(--bar-gap, var(--sp-1));
   height: 100%;
-  font: var(--type-caption);
+  font: var(--bar-font, var(--type-caption));
   font-weight: 700;
 }
 .bar::after {
@@ -2217,9 +2229,9 @@ button { font: inherit; cursor: pointer; }
   border-radius: 50%;
   display: grid;
   place-items: center;
-  background: var(--card-2-bg);
-  color: var(--card-2-ink);
-  font: var(--type-label);
+  background: var(--avatar-bg, var(--card-2-bg));
+  color: var(--avatar-ink, var(--card-2-ink));
+  font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
   letter-spacing: 0.02em;
@@ -2232,10 +2244,10 @@ button { font: inherit; cursor: pointer; }
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
-.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--outline); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--outline); cursor: pointer; }
+.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); cursor: pointer; }
 /* accent avatar: the "+7" tail, the selected person */
-.avatar--on { background: var(--accent); color: var(--on-accent); }
+.avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
 .avatar--halo::before {
   content: "";
@@ -2257,7 +2269,7 @@ button { font: inherit; cursor: pointer; }
    <div class="avatar-pick"><button class="avatar-pick__item"><span class="avatar avatar--lg avatar--add">+</span><span class="avatar-pick__name">Add</span><span class="avatar-pick__role">member</span></button>…</div> */
 .avatar-pick {
   display: flex;
-  gap: var(--sp-4);
+  gap: var(--avatar-pick-gap, var(--sp-4));
   overflow-x: auto;
   scroll-snap-type: x proximity;
   scrollbar-width: none; /* starts at the card's padding edge, like every row */
@@ -2266,18 +2278,18 @@ button { font: inherit; cursor: pointer; }
 .avatar-pick__item {
   scroll-snap-align: start;
   flex: none;
-  width: var(--avatar-lg);
+  width: var(--avatar-pick-item-w, var(--avatar-lg));
   display: grid;
   justify-items: center;
-  gap: var(--sp-2);
+  gap: var(--avatar-pick-item-gap, var(--sp-2));
   border: 0;
   background: transparent;
   color: inherit;
   padding: 0;
   text-align: center;
 }
-.avatar-pick__name { font: var(--type-label); font-size: var(--fs-sm); }
-.avatar-pick__role { font: var(--type-caption); color: var(--card-muted); margin-top: calc(-1 * var(--sp-1)); }
+.avatar-pick__name { font: var(--avatar-pick-name-font, var(--type-label)); font-size: var(--avatar-pick-name-font-size, var(--fs-sm)); }
+.avatar-pick__role { font: var(--avatar-pick-role-font, var(--type-caption)); color: var(--avatar-pick-role-ink, var(--card-muted)); margin-top: calc(-1 * var(--sp-1)); }
 .card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }
 
 /* ---- css/choice.css — check, toggle, toggle chip, chip grid, days, calendar, mood, pin, composer ---- */
@@ -2295,13 +2307,13 @@ button { font: inherit; cursor: pointer; }
    <input type="checkbox" class="check" aria-label="Done"> */
 .check {
   appearance: none;
-  width: var(--tap);
-  height: var(--tap);
+  width: var(--check-size, var(--tap));
+  height: var(--check-size, var(--tap));
   flex: none;
   margin: 0;
   border-radius: 50%;
-  border: var(--border-w) solid var(--outline);
-  background: var(--action-bg);
+  border: var(--border-w) solid var(--check-border, var(--outline));
+  background: var(--check-bg, var(--action-bg));
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -2318,7 +2330,7 @@ button { font: inherit; cursor: pointer; }
 .check:checked { background: var(--accent); border-color: transparent; }
 .check:checked::after { opacity: 1; }
 .check:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
-.check--sm { width: var(--tap-sm); height: var(--tap-sm); }
+.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"> */
@@ -2331,9 +2343,9 @@ button { font: inherit; cursor: pointer; }
   height: var(--_h);
   flex: none;
   margin: 0;
-  border-radius: var(--r-chip);
-  border: var(--border-w) solid var(--outline);
-  background: var(--action-bg);
+  border-radius: var(--toggle-radius, var(--r-chip));
+  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;
@@ -2362,7 +2374,7 @@ button { font: inherit; cursor: pointer; }
 .chip-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
-  gap: var(--sp-2);
+  gap: var(--chip-grid-gap, var(--sp-2));
 }
 /* .chip hugs its text as a loose grid child (justify-self: start); inside a
    chip grid the whole point is equal, full-width pick targets, so stretch.
@@ -2389,7 +2401,7 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- day strip: a week, one day selected ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */
-.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
+.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--day-strip-gap, var(--sp-1)); }
 .day {
   display: grid;
   /* three rows, always: name · number · dot. The dot's row is reserved even on
@@ -2399,33 +2411,33 @@ button { font: inherit; cursor: pointer; }
   grid-template-rows: auto auto var(--dot-xs);
   align-content: center;  /* the group sits centred in the cell, not spread out */
   justify-items: center;
-  gap: var(--sp-0);
+  gap: var(--day-gap, var(--sp-0));
   min-width: 0;
-  min-height: var(--bar-h);
-  padding-block: var(--sp-3); /* equal air top and bottom, so the selected pill
+  min-height: var(--day-min-h, var(--bar-h));
+  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(--r-chip);
+  border-radius: var(--day-radius, var(--r-chip));
   background: transparent;
   color: inherit;
   opacity: 0.6;
 }
-.day__name { font: var(--type-caption); }
+.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; }
-.day[aria-selected="true"] { background: var(--accent); color: var(--on-accent); opacity: 1; }
-.day__dot { grid-row: 3; align-self: center; width: var(--dot-xs); height: var(--dot-xs); border-radius: 50%; background: currentColor; }
+.day[aria-selected="true"] { background: var(--day-selected-bg, var(--accent)); color: var(--day-selected-ink, var(--on-accent)); opacity: 1; }
+.day__dot { grid-row: 3; align-self: center; width: var(--day-dot-size, var(--dot-xs)); height: var(--day-dot-size, var(--dot-xs)); border-radius: 50%; background: currentColor; }
 
 /* ---- calendar: month grid, 44px cells, one accent day, optional marks ----
    <div class="calendar"><div class="calendar__head">…</div><div class="calendar__grid"><span class="calendar__wd">Mo</span>×7 <button class="calendar__day" style="--start: 3">1</button>…</div></div> */
-.calendar { display: grid; gap: var(--sp-3); }
-.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
-.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); justify-items: center; }
-.calendar__wd { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--card-muted); padding-block: var(--sp-2); }
+.calendar { display: grid; gap: var(--calendar-gap, var(--sp-3)); }
+.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-overline)); letter-spacing: var(--track-overline); text-transform: uppercase; 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(--tap);
+  max-width: var(--calendar-day-max-w, var(--tap));
   aspect-ratio: 1;
   display: grid;
   place-items: center;
@@ -2437,9 +2449,9 @@ button { font: inherit; cursor: pointer; }
   font-variant-numeric: tabular-nums;
   grid-column-start: var(--start, auto); /* --start on the 1st: weekday column 1–7 */
 }
-.calendar__day--mark { background: var(--accent-soft); }
-.calendar__day--mark2 { background: var(--accent-mid); color: var(--on-accent); }
-.calendar__day[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
+.calendar__day--mark { background: var(--calendar-day-mark-bg, var(--accent-soft)); }
+.calendar__day--mark2 { background: var(--calendar-day-mark2-bg, var(--accent-mid)); color: var(--calendar-day-mark2-ink, var(--on-accent)); }
+.calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: 700; }
 .calendar__day:disabled { opacity: 0.3; }
 
 /* ---- mood: five dots in a pill, the picked one grows ----
@@ -2447,19 +2459,19 @@ button { font: inherit; cursor: pointer; }
 .mood {
   margin: 0;
   min-inline-size: 0; /* fieldset UA default is min-content — it must shrink with the card */
-  padding: var(--sp-1);
-  border: var(--border-w) solid var(--outline);
-  border-radius: var(--r-chip);
-  background: var(--action-bg);
-  color: var(--action-ink);
+  padding: var(--mood-pad, var(--sp-1));
+  border: var(--border-w) solid var(--mood-border, var(--outline));
+  border-radius: var(--mood-radius, var(--r-chip));
+  background: var(--mood-bg, var(--action-bg));
+  color: var(--mood-ink, var(--action-ink));
   display: flex;
   justify-content: space-between;
 }
-.mood__opt { flex: 1 1 0; max-width: var(--tap); min-width: 0; height: var(--tap); display: grid; place-items: center; position: relative; cursor: pointer; }
+.mood__opt { 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__dot {
-  width: var(--icon-xs);
-  height: var(--icon-xs);
+  width: var(--mood-dot-size, var(--icon-xs));
+  height: var(--mood-dot-size, var(--icon-xs));
   border-radius: 50%;
   background: var(--_mood, currentColor);
   transition: scale 0.2s ease, box-shadow 0.2s ease;
@@ -2474,18 +2486,18 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- pin: big code entry, one digit per pill ----
    <div class="pin"><input class="pin__cell" inputmode="numeric" maxlength="1" placeholder=" ">×4</div> */
-.pin { display: flex; gap: var(--sp-3); }
+.pin { display: flex; gap: var(--pin-gap, var(--sp-3)); }
 .pin__cell {
   flex: 1;
   min-width: 0;
-  max-width: var(--fab);
+  max-width: var(--pin-cell-max-w, var(--fab));
   aspect-ratio: 2 / 3;
-  border: var(--border-w) solid var(--outline);
-  border-radius: var(--r-chip);
-  background: var(--action-bg);
-  color: var(--action-ink);
+  border: var(--border-w) solid var(--pin-cell-border, var(--outline));
+  border-radius: var(--pin-cell-radius, var(--r-chip));
+  background: var(--pin-cell-bg, var(--action-bg));
+  color: var(--pin-cell-ink, var(--action-ink));
   text-align: center;
-  font: var(--type-stat);
+  font: var(--pin-cell-font, var(--type-stat));
   font-variant-numeric: tabular-nums;
   caret-color: currentColor;
 }
@@ -2495,7 +2507,7 @@ button { font: inherit; cursor: pointer; }
 /* ---- composer: big text area with a bottom bar (icon · hint · send) ----
    <div class="composer"><textarea class="composer__input" placeholder="What do you need?"></textarea>
    <div class="composer__bar"><button class="icon-btn">…</button><span class="composer__hint">Your idea is born</span><button class="icon-btn icon-btn--invert">↑</button></div></div> */
-.composer { display: grid; gap: var(--sp-3); }
+.composer { display: grid; gap: var(--composer-gap, var(--sp-3)); }
 .composer__input {
   width: 100%;
   min-height: 11rem;
@@ -2509,8 +2521,8 @@ button { font: inherit; cursor: pointer; }
   outline: none;
 }
 .composer__input::placeholder { color: inherit; opacity: 0.4; }
-.composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
-.composer__hint { font: var(--type-caption); color: var(--card-muted); }
+.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 ----
@@ -2519,7 +2531,7 @@ button { font: inherit; cursor: pointer; }
    slider does, the input's aria-label is enough. The track is a hairline rail;
    the knob is a full --tap, and the whole range is --tap tall, so the thumb has
    a real target anywhere along it. The value is the input's own. */
-.slider { display: grid; gap: var(--sp-1); flex: 1; min-width: 0; position: relative; } /* relative: the glyph rides the knob */
+.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
@@ -2530,8 +2542,8 @@ button { font: inherit; cursor: pointer; }
   position: absolute;
   bottom: 0;
   left: calc(var(--tap) / 2 + (100% - var(--tap)) * var(--slider-at, 0));
-  width: var(--tap);
-  height: var(--tap);
+  width: var(--slider-glyph-size, var(--tap));
+  height: var(--slider-glyph-size, var(--tap));
   /* the eye centres the INK, not the line box: a letter that stands on the
      baseline (ก) has no descender, while the face's box keeps 0.30em under it
      (fonts.css) — so the ink lands low when the box is centred; lifted 0.15em
@@ -2539,15 +2551,15 @@ button { font: inherit; cursor: pointer; }
   translate: -50% -0.15em;
   display: grid;
   place-items: center;
-  font: var(--type-h2);
-  color: var(--on-accent);
+  font: var(--slider-glyph-font, var(--type-h2));
+  color: var(--slider-glyph-ink, var(--on-accent));
   pointer-events: none;
 }
-.slider__label { font: var(--type-label); }
+.slider__label { font: var(--slider-label-font, var(--type-label)); }
 .slider__range {
   appearance: none;
   width: 100%;
-  height: var(--tap);
+  height: var(--slider-range-h, var(--tap));
   margin: 0;
   background: transparent;
   cursor: pointer;
@@ -2588,8 +2600,8 @@ button { font: inherit; cursor: pointer; }
 .row {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
-  min-height: var(--tap);        /* the tap target's room — the row's only vertical size */
+  gap: var(--row-gap, var(--sp-3));
+  min-height: var(--row-min-h, var(--tap));        /* the tap target's room — the row's only vertical size */
   min-width: 0;
   color: inherit;
   text-decoration: none; /* .row works as <a> too — it is a tap target */
@@ -2598,20 +2610,20 @@ button { font: inherit; cursor: pointer; }
    Space BETWEEN rows is .rows' gap; a lone row as card content takes the card's
    gap. (.row--flush, which zeroed the old padding, is gone — every row is flush.) */
 .row__lead {
-  width: var(--tap);
-  height: var(--tap);
+  width: var(--row-lead-size, var(--tap));
+  height: var(--row-lead-size, var(--tap));
   flex: none;
-  border-radius: var(--r-control);
-  border: var(--border-w) solid var(--outline);
+  border-radius: var(--row-lead-radius, var(--r-control));
+  border: var(--border-w) solid var(--row-lead-border, var(--outline));
   display: grid;
   place-items: center;
 }
-.row__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-0); }
-.row__title { font: var(--type-title); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
-.row__meta { font: var(--type-caption); color: var(--card-muted); display: flex; align-items: center; gap: var(--sp-1); }
+.row__body { flex: 1; min-width: 0; display: grid; gap: var(--row-body-gap, var(--sp-0)); }
+.row__title { font: var(--row-title-font, var(--type-title)); overflow-wrap: anywhere; } /* wraps freely — no clip, so no padding trick for Thai marks (Lh 2026-09-16, same call as the card heading) */
+.row__meta { font: var(--row-meta-font, var(--type-caption)); color: var(--row-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--row-meta-gap, var(--sp-1)); }
 .card--3 .row__meta { color: inherit; opacity: 0.7; }
-.row__end { margin-left: auto; text-align: right; display: grid; gap: var(--sp-0); justify-items: end; flex: none; }
-.row--lg { min-height: var(--fab); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
+.row__end { margin-left: auto; text-align: right; display: grid; gap: var(--row-end-gap, var(--sp-0)); justify-items: end; flex: none; }
+.row--lg { min-height: var(--row-lg-min-h, var(--fab)); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
 .row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
 /* a finished item in a checklist (a to-do list, an onboarding "complete your introduction" list):
    the words go muted, a filled tick sits at the end, and the row is no longer a tap target —
@@ -2621,13 +2633,13 @@ button { font: inherit; cursor: pointer; }
 .row--done .row__title { color: var(--card-muted); }
 .card--3 .row--done .row__title { color: inherit; opacity: 0.7; }
 .row__done {
-  width: var(--tap-sm);
-  height: var(--tap-sm);
+  width: var(--row-done-size, var(--tap-sm));
+  height: var(--row-done-size, var(--tap-sm));
   flex: none;
   margin-left: auto;
   border-radius: 50%;
-  background: var(--accent);
-  color: var(--on-accent);
+  background: var(--row-done-bg, var(--accent));
+  color: var(--row-done-ink, var(--on-accent));
   display: grid;
   place-items: center;
 }
@@ -2648,20 +2660,20 @@ button { font: inherit; cursor: pointer; }
 /* ---- kv: label left, value right ----
    <dl class="kv"><div class="kv__row"><dt class="kv__key">Pay with</dt><dd class="kv__val">GHO</dd></div>…</dl> */
 .kv { margin: 0; display: grid; }
-.kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); }
+.kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--kv-row-gap, var(--sp-3)); min-height: var(--kv-row-min-h, var(--tap)); }
 .kv--lined > .kv__row + .kv__row { border-top: var(--border-w) solid var(--hairline); }
-.kv__key { font: var(--type-body); color: var(--card-muted); }
+.kv__key { font: var(--kv-key-font, var(--type-body)); color: var(--kv-key-ink, var(--card-muted)); }
 .card--3 .kv__key { color: inherit; opacity: 0.7; }
-.kv__val { margin: 0; font: var(--type-title); display: inline-flex; align-items: center; gap: var(--sp-2); text-align: right; min-width: 0; }
+.kv__val { margin: 0; font: var(--kv-val-font, var(--type-title)); display: inline-flex; align-items: center; gap: var(--kv-val-gap, var(--sp-2)); text-align: right; min-width: 0; }
 
 /* ---- kv grid: value over label, cells split by a rule (Sex | Weight) ----
    <div class="kv-grid"><div class="kv-cell"><svg class="icon"/><span class="kv-cell__val">15.6 kg</span><span class="kv-cell__key">Weight</span></div>…</div> */
-.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--sp-4); }
+.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--kv-grid-gap, var(--sp-4)); }
 .kv-grid > .kv-cell + .kv-cell { border-left: var(--border-w) solid var(--hairline); padding-left: var(--sp-4); }
-.kv-cell { display: grid; gap: var(--sp-0); align-content: start; min-width: 0; }
+.kv-cell { display: grid; gap: var(--kv-cell-gap, var(--sp-0)); align-content: start; min-width: 0; }
 .kv-cell > .icon { margin-bottom: var(--sp-1); }
-.kv-cell__val { font: var(--type-h2); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
-.kv-cell__key { font: var(--type-caption); color: var(--card-muted); }
+.kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
+.kv-cell__key { font: var(--kv-cell-key-font, var(--type-caption)); color: var(--kv-cell-key-ink, var(--card-muted)); }
 .card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
 
 /* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
@@ -2673,7 +2685,7 @@ button { font: inherit; cursor: pointer; }
      <div class="bubble"><p class="bubble__body">…</p><span class="bubble__actions">…icon-btns…</span><span class="bubble__meta">Dec 4 · 8:15</span></div>
      <div class="bubble bubble--right">…</div>
    </div> */
-.thread { display: grid; gap: var(--sp-4); }
+.thread { display: grid; gap: var(--thread-gap, var(--sp-4)); }
 /* two columns: the message (max-content, but it gives way — minmax(0) — so a long one shrinks
    and wraps while the actions stay beside it) and the actions; the meta on a second row under the message */
 .bubble {
@@ -2693,12 +2705,12 @@ button { font: inherit; cursor: pointer; }
 .bubble__body {
   margin: 0;
   min-width: 0;
-  padding: var(--sp-3) var(--sp-4);
-  border-radius: var(--r-card);
+  padding: var(--bubble-body-pad-y, var(--sp-3)) var(--bubble-body-pad-x, var(--sp-4));
+  border-radius: var(--bubble-body-radius, var(--r-card));
   border-bottom-left-radius: var(--r-control);
-  background: var(--card-2-bg);
-  color: var(--card-2-ink);
-  font: var(--type-body);
+  background: var(--bubble-body-bg, var(--card-2-bg));
+  color: var(--bubble-body-ink, var(--card-2-ink));
+  font: var(--bubble-body-font, var(--type-body));
   overflow-wrap: anywhere;
 }
 .bubble--right > .bubble__body {
@@ -2708,8 +2720,8 @@ button { font: inherit; cursor: pointer; }
   color: var(--on-accent);
   text-align: right;
 }
-.bubble__actions { display: flex; gap: var(--sp-1); flex: none; opacity: 0.7; }
-.bubble__meta { display: flex; align-items: center; gap: var(--sp-1); font: var(--type-caption); color: var(--on-surface-muted); }
+.bubble__actions { display: flex; gap: var(--bubble-actions-gap, var(--sp-1)); flex: none; opacity: 0.7; }
+.bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--on-surface-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
 .bubble__meta > .icon { color: var(--accent); }
 .card--3 .bubble__meta { color: inherit; opacity: 0.7; }
@@ -2721,7 +2733,7 @@ button { font: inherit; cursor: pointer; }
   margin: 0;
   padding: 0 0 0 var(--sp-6);
   display: grid;
-  gap: var(--sp-5);
+  gap: var(--timeline-gap, var(--sp-5));
   position: relative;
 }
 .timeline::before {
@@ -2732,7 +2744,7 @@ button { font: inherit; cursor: pointer; }
   bottom: var(--sp-3);
   border-left: var(--border-w) solid var(--hairline);
 }
-.timeline__item { display: grid; gap: var(--sp-2); position: relative; min-width: 0; }
+.timeline__item { display: grid; gap: var(--timeline-item-gap, var(--sp-2)); position: relative; min-width: 0; }
 .timeline__item::before {
   content: "";
   position: absolute;
@@ -2745,37 +2757,37 @@ button { font: inherit; cursor: pointer; }
 }
 .timeline__mark {
   justify-self: start;
-  font: var(--type-overline);
+  font: var(--timeline-mark-font, var(--type-overline));
   letter-spacing: var(--track-overline);
   text-transform: uppercase;
-  padding: var(--sp-1) var(--sp-2);
-  border-radius: var(--r-chip);
-  background: var(--ink-tint);
+  padding: var(--timeline-mark-pad-y, var(--sp-1)) var(--timeline-mark-pad-x, var(--sp-2));
+  border-radius: var(--timeline-mark-radius, var(--r-chip));
+  background: var(--timeline-mark-bg, var(--ink-tint));
 }
 
 /* ---- legend: signal dots with captions ----
    <div class="legend"><span class="legend__item"><span class="dot"></span> very high</span>…</div> */
-.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font: var(--type-caption); color: var(--card-muted); }
+.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font: var(--legend-font, var(--type-caption)); color: var(--legend-ink, var(--card-muted)); }
 .card--3 .legend { color: inherit; opacity: 0.8; }
-.legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--icon); }
+.legend__item { display: inline-flex; align-items: center; gap: var(--legend-item-gap, var(--sp-2)); min-height: var(--legend-item-min-h, var(--icon)); }
 
 /* ---- link: "See all ↗" in a card head, big enough to tap ----
    <a class="link" href="#">See all <svg class="icon icon--xs"/></a> */
 .link {
   display: inline-flex;
   align-items: center;
-  gap: var(--sp-1);
-  min-height: var(--tap-sm);
+  gap: var(--link-gap, var(--sp-1));
+  min-height: var(--link-min-h, var(--tap-sm));
   color: inherit;
   text-decoration: none;
-  font: var(--type-label);
-  font-size: var(--fs-body);
+  font: var(--link-font, var(--type-label));
+  font-size: var(--link-font-size, var(--fs-body));
   border: 0;
   background: transparent;
   padding: 0;
   cursor: pointer;
 }
-.link--muted { color: var(--card-muted); }
+.link--muted { color: var(--link-muted-ink, var(--card-muted)); }
 .card--3 .link--muted { color: inherit; opacity: 0.7; }
 
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
@@ -2824,16 +2836,16 @@ button { font: inherit; cursor: pointer; }
 
 /* ---- quote: giant mark, big text, attribution ----
    <blockquote class="quote"><p class="quote__text">It's overcast…</p><footer class="quote__by">Wednesday 15</footer></blockquote> */
-.quote { margin: 0; display: grid; gap: var(--sp-3); }
+.quote { margin: 0; display: grid; gap: var(--quote-gap, var(--sp-3)); }
 .quote::before {
   content: "\201C";
   font: 900 calc(var(--fs-h1) * 3)/0.55 var(--font-display);
   height: var(--sp-10);
   opacity: 0.9;
 }
-.quote__text { margin: 0; font: var(--type-h1); letter-spacing: var(--track-h1); text-wrap: balance; }
+.quote__text { margin: 0; font: var(--quote-text-font, var(--type-h1)); letter-spacing: var(--track-h1); text-wrap: balance; }
 .quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
-.quote__by { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--card-muted); }
+.quote__by { font: var(--quote-by-font, var(--type-overline)); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--quote-by-ink, var(--card-muted)); }
 .card--3 .quote__by { color: inherit; opacity: 0.7; }
 
 /* ---- tile grid: big square tiles — icon top, label bottom ----
@@ -2842,36 +2854,36 @@ button { font: inherit; cursor: pointer; }
 .tile-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr));
-  gap: var(--sp-3);
+  gap: var(--tile-grid-gap, var(--sp-3));
 }
 .tile-grid--3 { --tile-min: 6rem; } /* three across on a phone (attachments, upload kinds) */
 .tile {
   display: grid;
   align-content: space-between;
   justify-items: start;
-  gap: var(--sp-5);
-  min-height: var(--tile-h);
+  gap: var(--tile-gap, var(--sp-5));
+  min-height: var(--tile-min-h, var(--tile-h));
   min-width: 0;
-  padding: var(--sp-4);
-  border: var(--border-w) solid var(--outline);
-  border-radius: var(--r-card);
-  background: var(--action-bg);
-  color: var(--action-ink);
+  padding: var(--tile-pad, var(--sp-4));
+  border: var(--border-w) solid var(--tile-border, var(--outline));
+  border-radius: var(--tile-radius, var(--r-card));
+  background: var(--tile-bg, var(--action-bg));
+  color: var(--tile-ink, var(--action-ink));
   font: inherit;
   text-align: left;
   position: relative;
   cursor: pointer;
 }
-.tile__label { font: var(--type-title); }
-.tile__value { font: var(--type-h2); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
-.tile__sub { font: var(--type-caption); opacity: 0.7; }
-.tile__text { display: grid; gap: var(--sp-0); }
-.tile--on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.tile__label { font: var(--tile-label-font, var(--type-title)); }
+.tile__value { font: var(--tile-value-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
+.tile__sub { font: var(--tile-sub-font, var(--type-caption)); opacity: 0.7; }
+.tile__text { display: grid; gap: var(--tile-text-gap, var(--sp-0)); }
+.tile--on { background: var(--tile-on-bg, var(--accent)); color: var(--tile-on-ink, var(--on-accent)); border-color: transparent; }
 .tile--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
 .tile--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
 .tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
 .tile--wide { grid-column: 1 / -1; }
-.tile--stat { min-height: var(--avatar-xl); gap: var(--sp-3); grid-template-columns: auto 1fr; align-items: center; }
+.tile--stat { min-height: var(--tile-stat-min-h, var(--avatar-xl)); gap: var(--tile-stat-gap, var(--sp-3)); grid-template-columns: auto 1fr; align-items: center; }
 /* upload: dashed, centred plus + label */
 .tile--upload {
   border-style: dashed;
@@ -2879,12 +2891,12 @@ button { font: inherit; cursor: pointer; }
   color: inherit;
   align-content: center;
   justify-items: center;
-  gap: var(--sp-2);
+  gap: var(--tile-upload-gap, var(--sp-2));
   text-align: center;
 }
 /* tinted tiles: slot colors inside a card (schedule, notes) */
-.tile--2 { background: var(--card-2-bg); color: var(--card-2-ink); border-color: transparent; }
-.tile--3 { background: var(--card-3-bg); color: var(--card-3-ink); border-color: transparent; }
+.tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); color: var(--tile-2-ink, var(--card-2-ink)); border-color: transparent; }
+.tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); color: var(--tile-3-ink, var(--card-3-ink)); border-color: transparent; }
 
 /* ---- fold: a sticky-note corner on any card (decorative) ----
    No border. The card's outline follows its border box, so it ran straight
@@ -2908,7 +2920,7 @@ button { font: inherit; cursor: pointer; }
    <span class="wave"></span> — sits in a .row__body, fills the width */
 .wave {
   display: block;
-  height: var(--icon);
+  height: var(--wave-h, var(--icon));
   width: 100%;
   background: repeating-linear-gradient(90deg, currentColor 0 var(--sp-1), transparent var(--sp-1) var(--sp-2));
   /* masks only read alpha: currentColor = "opaque" without naming a color */
@@ -2923,9 +2935,9 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-auto-rows: 1fr;
-  gap: var(--sp-1);
+  gap: var(--mosaic-gap, var(--sp-1));
   aspect-ratio: 4 / 3;
-  border-radius: var(--r-media);
+  border-radius: var(--mosaic-radius, var(--r-media));
   overflow: hidden;
 }
 .mosaic > :first-child { grid-row: span 2; }
@@ -2955,16 +2967,16 @@ button { font: inherit; cursor: pointer; }
   position: relative;
   aspect-ratio: 3 / 2;
   perspective: 60rem;
-  border-radius: var(--r-media);
+  border-radius: var(--postcard-radius, var(--r-media));
 }
 .postcard__face {
   position: absolute;
   inset: 0;
   display: grid;
   align-content: end;
-  padding: var(--sp-4);
-  gap: var(--sp-2);
-  border: var(--border-w) solid var(--card-border);
+  padding: var(--postcard-face-pad, var(--sp-4));
+  gap: var(--postcard-face-gap, var(--sp-2));
+  border: var(--border-w) solid var(--postcard-face-border, var(--card-border));
   border-radius: inherit;
   overflow: hidden;
   isolation: isolate;
@@ -2973,11 +2985,11 @@ button { font: inherit; cursor: pointer; }
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   transition: transform var(--motion-flip) ease-in-out;
-  box-shadow: var(--shadow-float);
+  box-shadow: var(--postcard-face-shadow, var(--shadow-float));
 }
 .postcard__face:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* the front: the photo (or the wireframe box) fills it, the name reads on a scrim */
-.postcard__front { background: var(--card-3-bg); color: var(--card-3-ink); }
+.postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); color: var(--postcard-front-ink, var(--card-3-ink)); }
 .postcard__front > img,
 .postcard__front > .ph {
   position: absolute;
@@ -2999,13 +3011,13 @@ button { font: inherit; cursor: pointer; }
 }
 /* the back: paper — the words, big enough to read at arm's length */
 .postcard__back {
-  background: var(--card-2-bg);
-  color: var(--card-2-ink);
+  background: var(--postcard-back-bg, var(--card-2-bg));
+  color: var(--postcard-back-ink, var(--card-2-ink));
   align-content: space-between;
   transform: rotateY(180deg);
 }
-.postcard__caption { margin: 0; font: var(--type-title); text-wrap: pretty; }
-.postcard__label { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.85; }
+.postcard__caption { margin: 0; font: var(--postcard-caption-font, var(--type-title)); text-wrap: pretty; }
+.postcard__label { font: var(--postcard-label-font, var(--type-overline)); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.85; }
 .postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
 .postcard.is-flipped > .postcard__back { transform: rotateY(0); }
 @media (prefers-reduced-motion: reduce) {
@@ -3061,7 +3073,7 @@ button { font: inherit; cursor: pointer; }
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
   overflow: clip;
-  box-shadow: var(--shadow-sheet);
+  box-shadow: var(--modal-shadow, var(--shadow-sheet));
 }
 .modal__lift {
   padding: var(--card-pad);
@@ -3075,15 +3087,15 @@ button { font: inherit; cursor: pointer; }
 .modal__drawer {
   height: var(--drawer-h);
   box-sizing: border-box;
-  padding: var(--sp-5);
+  padding: var(--modal-drawer-pad, var(--sp-5));
   overflow: clip;
   display: grid;
   align-content: center;
   justify-items: center;
-  gap: var(--sp-1);
+  gap: var(--modal-drawer-gap, var(--sp-1));
   text-align: center;
-  background: var(--card-3-bg);
-  color: var(--card-3-ink);
+  background: var(--modal-drawer-bg, var(--card-3-bg));
+  color: var(--modal-drawer-ink, var(--card-3-ink));
   --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
   --on-accent: var(--card-3-bg);
 }
@@ -3099,14 +3111,14 @@ button { font: inherit; cursor: pointer; }
   }
   @keyframes modal-open {
     0%, 50%   { height: 0; padding-block: 0; }                       /* inside the card */
-    100%      { height: var(--drawer-h); padding-block: var(--sp-5); } /* 2. out below, the lift up, together */
+    100%      { height: var(--drawer-h); padding-block: var(--modal-drawer-pad, var(--sp-5)); } /* 2. out below, the lift up, together — the same knob the rule reads: a keyframe that pinned the value would make the knob dead */
   }
 }
 
-.btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
+.btn-trio { display: flex; align-items: center; gap: var(--btn-trio-gap, var(--sp-3)); margin-top: var(--sp-3); }
 .btn-trio__dots {
-  width: var(--sp-5);
-  height: var(--sp-1);
+  width: var(--btn-trio-dots-w, var(--sp-5));
+  height: var(--btn-trio-dots-h, var(--sp-1));
   background: radial-gradient(circle, currentColor var(--sp-0), transparent calc(var(--sp-0) + 0.5px)) 0 0 / calc(var(--sp-5) / 2) 100% repeat-x;
   opacity: 0.4;
 }
@@ -3127,31 +3139,31 @@ button { font: inherit; cursor: pointer; }
   display: none;              /* explicit closed state — never display on the base rule */
   margin: 0;
   inset: auto;
-  border: var(--border-w) solid var(--action-border);
-  border-radius: var(--r-card);
+  border: var(--border-w) solid var(--menu-border, var(--action-border));
+  border-radius: var(--menu-radius, var(--r-card));
   --menu-pad: var(--sp-2);       /* published: a row's radius is concentric with the panel's */
   padding: var(--menu-pad);
   min-width: 12rem;
-  background: var(--action-bg);
-  color: var(--action-ink);
-  box-shadow: var(--shadow-float);
+  background: var(--menu-bg, var(--action-bg));
+  color: var(--menu-ink, var(--action-ink));
+  box-shadow: var(--menu-shadow, var(--shadow-float));
 }
 .menu:popover-open { display: grid; }
 .menu:not([popover]) { display: grid; position: relative; } /* inline usage (no attribute) */
 .menu__item {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
-  min-height: var(--tap);
+  gap: var(--menu-item-gap, var(--sp-3));
+  min-height: var(--menu-item-min-h, var(--tap));
   width: 100%;
-  padding: 0 var(--sp-3);
+  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(--type-title);
+  font: var(--menu-item-font, var(--type-title));
   text-align: left;
   cursor: pointer;
 }
@@ -3179,12 +3191,12 @@ button { font: inherit; cursor: pointer; }
 /* ---- banner: a chip that opens into a tinted card, no JS ----
    <details class="banner"><summary class="chip chip--on">Save $30 on orders over $70 <svg class="icon icon--xs"/></summary>
      <div class="card card--3 banner__body">…</div></details> */
-.banner { display: grid; gap: var(--sp-2); justify-items: start; }
+.banner { display: grid; gap: var(--banner-gap, var(--sp-2)); justify-items: start; }
 .banner > summary { list-style: none; cursor: pointer; }
 .banner > summary::-webkit-details-marker { display: none; }
 .banner > summary .icon { transition: rotate 0.2s ease; }
 .banner[open] > summary .icon { rotate: 180deg; }
-.banner__body { width: 100%; padding: var(--sp-4) var(--sp-5); --card-gap: var(--sp-1); }
+.banner__body { width: 100%; padding: var(--banner-body-pad-y, var(--sp-4)) var(--banner-body-pad-x, var(--sp-5)); --card-gap: var(--sp-1); }
 .banner::details-content { width: 100%; } /* Chromium wraps the content in this pseudo; justify-items: start shrink-wrapped it, so the body never reached the width */
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {
@@ -3202,9 +3214,9 @@ button { font: inherit; cursor: pointer; }
   bottom: var(--sp-5);
   max-width: var(--screen-w);
   margin-inline: auto;
-  padding-inline: var(--sp-4);
+  padding-inline: var(--float-bar-pad-x, var(--sp-4));
   display: flex;
-  gap: var(--sp-2);
+  gap: var(--float-bar-gap, var(--sp-2));
   align-items: center;
   z-index: 30;
 }
@@ -3219,29 +3231,29 @@ button { font: inherit; cursor: pointer; }
   display: flex;
   justify-content: space-around;
   align-items: center;
-  min-height: var(--bar-h);
-  padding: var(--sp-1);
-  border-radius: var(--r-chip);
-  border: var(--border-w) solid var(--action-border);
-  background: color-mix(in srgb, var(--action-bg) 82%, transparent);
-  color: var(--action-ink);
+  min-height: var(--float-bar-pill-min-h, var(--bar-h));
+  padding: var(--float-bar-pill-pad, var(--sp-1));
+  border-radius: var(--float-bar-pill-radius, var(--r-chip));
+  border: var(--border-w) solid var(--float-bar-pill-border, var(--action-border));
+  background: var(--float-bar-pill-bg, color-mix(in srgb, var(--action-bg) 82%, transparent));
+  color: var(--float-bar-pill-ink, var(--action-ink));
   backdrop-filter: blur(var(--sp-3));
   -webkit-backdrop-filter: blur(var(--sp-3));
-  box-shadow: var(--shadow-float);
+  box-shadow: var(--float-bar-pill-shadow, var(--shadow-float));
 }
 .float-bar__item {
   flex: 1;
   min-width: 0;
   display: grid;
   justify-items: center;
-  gap: var(--sp-0);
-  min-height: var(--tap-lg);
-  padding: var(--sp-1);
+  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(--r-chip);
+  border-radius: var(--float-bar-item-radius, var(--r-chip));
   background: transparent;
   color: inherit;
-  font: var(--type-caption);
+  font: var(--float-bar-item-font, var(--type-caption));
   text-decoration: none;
   opacity: 0.6;
   overflow: hidden;
@@ -3259,15 +3271,15 @@ button { font: inherit; cursor: pointer; }
 .callout {
   position: absolute;
   display: grid;
-  gap: var(--sp-0);
+  gap: var(--callout-gap, var(--sp-0));
   width: max-content;
   max-width: 15rem;
-  padding: var(--sp-3) var(--sp-4);
-  border: var(--border-w) solid var(--action-border);
-  border-radius: var(--r-card);
-  background: var(--action-bg);
-  color: var(--action-ink);
-  box-shadow: var(--shadow-float);
+  padding: var(--callout-pad-y, var(--sp-3)) var(--callout-pad-x, var(--sp-4));
+  border: var(--border-w) solid var(--callout-border, var(--action-border));
+  border-radius: var(--callout-radius, var(--r-card));
+  background: var(--callout-bg, var(--action-bg));
+  color: var(--callout-ink, var(--action-ink));
+  box-shadow: var(--callout-shadow, var(--shadow-float));
   text-align: center;
 }
 .callout::after {
@@ -3284,16 +3296,16 @@ button { font: inherit; cursor: pointer; }
   border-top: 0;
   border-left: 0;
 }
-.callout__title { font: var(--type-title); }
-.callout__sub { font: var(--type-caption); opacity: 0.7; }
+.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(--sp-4) var(--sp-4) var(--sp-6); }
+.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(--sp-8); }
+.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); }