@usableapp/cardds 0.2.2 → 0.4.0

package/dist/cardds.css

@@ -90,6 +90,8 @@
   --chip-h: calc(var(--tap-base) * 19 / 24);  /* 38 chip height */
   --bar-h: calc(var(--tap-base) * 4 / 3);     /* 64 float bar, day cell, deck actions */
   --header-h: calc(var(--tap-base) * 5 / 4);  /* 60 top bar — .topbar and .appbar alike */
+  --card-pad-rest: var(--sp-5);  /* 20 a card's padding before any variant — .card publishes it as --card-pad; the sheet's peek strip is built from it where no card is in scope */
+  --card-gap-rest: var(--sp-4);  /* 16 …and its gap */
   --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
   --map-ring: calc(var(--tap-base) * 10 / 3);    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
   --fab: calc(var(--tap-base) * 3 / 2); /* 72 square floating action */
@@ -415,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
@@ -485,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 {
@@ -503,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 */
@@ -521,12 +523,12 @@ button { font: inherit; cursor: pointer; }
 .card {
   --card-bg: var(--card-1-bg);   /* the slot, readable by children (avatar rings, fold) */
   --card-ink: var(--card-1-ink);
-  --card-pad: var(--sp-5);       /* published so .bleed can cancel it exactly */
-  --card-gap: var(--sp-4);       /* published so a sheet's peek strip (sheet.css) is exact */
+  --card-pad: var(--card-pad-rest);       /* published so .bleed can cancel it exactly */
+  --card-gap: var(--card-gap-rest);       /* published so a sheet's peek strip (sheet.css) is exact */
   background: var(--card-bg);
   color: var(--card-ink);
   border: var(--border-w) solid var(--card-border);
-  border-radius: var(--r-card);
+  border-radius: var(--card-radius, var(--r-card));
   padding: var(--card-pad);
   display: grid;
   gap: var(--card-gap);
@@ -557,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>
@@ -569,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 ----
@@ -634,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); }
 
@@ -768,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 ---- */
 /* ============================================================
@@ -1105,7 +1108,7 @@ button { font: inherit; cursor: pointer; }
    page. Many sheets stacked as the app's menu are the other system,
    .sheet-stack (stack.css): the same material, its own class and file.
 
-   <article class="card sheet sheet--half" data-sheet-states="peek half 3q full">
+   <article class="card sheet sheet--half">
    A tap on the handle TOGGLES the sheet between its own state and peek
    (Lh 2026-09-16) — never a step-by-step climb; a drag snaps to any of
    the listed states, and the state it lands on becomes the one a tap
@@ -1123,14 +1126,12 @@ button { font: inherit; cursor: pointer; }
    ============================================================ */
 
 .sheet {
-  --_handle: var(--sp-1);
   /* the strip a peeked sheet shows: the card's own top padding, the handle,
      the gap, one title row (--tap — the head rule below makes every head at
      least that tall) and the gap under it, so the cut lands exactly where
      the first control starts and nothing of it leaks through. Published
      (and registered in tokens.css) so a sheet whose head is taller can
      retune it: .my-sheet { --sheet-peek: … } */
-  --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
   --sheet-half: 0.5;              /* a share of the sheet's own height */
   --sheet-3q: 0.25;               /* three quarters showing: slid by a quarter */
   /* the sheet's own height, seen from inside it: the box it slides in is the
@@ -1159,20 +1160,22 @@ 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)); }
 .sheet--3q { --_y: calc(var(--sheet-3q) * 100%); --_cover: calc(var(--sheet-3q) * var(--_box)); }
 .sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
+/* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
+   have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
+   inherits it. A sheet whose head is taller retunes it on the box. */
+:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--tap)); }
+
 /* ---- called sheets (Lh, 2026-09-20): a .step whose .base-content has buttons that each CALL a sheet ----
    .sheet--away = not on the screen: slid all the way out (translate, like every state — the material never
    changes), and hidden once it has left so its shadow does not lie on the step's bottom edge; write it
-   with `inert`. A button names its sheet — <button aria-controls="when"> … <article id="when" class="card
-   sheet sheet--away" inert data-sheet-states="peek full"> — and cardds.js does the rest: a tap slides that
-   sheet up to full and sends any other one away; the handle takes it down to peek, never further, so the
-   words and the other buttons are back in reach; the same button again raises it from peek to full.
-   Nothing waits at peek before the first call. No bar on such a screen (actions.css).
+   with `inert` (the React Sheet does). WHO brings it onto the screen is the app's business — a button, a route:
+   cardds ties no component to another. Nothing waits at peek before the first call.
    WHAT IT IS FOR: the base offers WAYS IN — sign in · new phone · join — and each button calls a sheet
    that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
    carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:
@@ -1255,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;
@@ -1287,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
@@ -1310,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
@@ -1345,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),
@@ -1363,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) */
 }
@@ -1374,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;
 }
@@ -1388,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;
 }
@@ -1407,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;
@@ -1416,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;
 }
 
@@ -1497,8 +1500,9 @@ button { font: inherit; cursor: pointer; }
 :has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
 /* LAYERS (Lh, 2026-09-20): the base, then the sheet over it, then the top bar. A bar is the BASE's — the
    move of a page of words — so a step with a sheet has NO bar: the sheet finishes on its own .card__foot
-   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. Should a bar be written
-   beside a sheet anyway it stands down (actions.css + cardds.js) — a net for a mistake, not a layout. */
+   (sheet.css), and a form lives whole in ONE sheet, never item by item on the base. That is how cardds's
+   own screens are composed (the guide); the framework does not police it — a component never changes
+   because another one is there. */
 
 /* the reading block: a .base-content (base.css) — the same words-on-the-base
    block as anywhere else (it was .step__card, and a .card before 2026-09-16;
@@ -1517,11 +1521,10 @@ button { font: inherit; cursor: pointer; }
   color: var(--on-surface);
 }
 /* the reading block is the .base-content — or the .pages that holds several of them, a walk of words
-   (card.css). --sheet-room: the strip a CALLED sheet keeps at peek (sheet.css, "called sheets"), published
-   on the step by cardds.js while one is on the screen, so the buttons under it can scroll clear of it;
-   nothing without one. */
+   (card.css). Behind a PEEKED sheet the words keep the strip's room under them, so whatever is down there
+   (the buttons that call the other sheets) scrolls clear of it — CSS alone: the box declares --sheet-peek. */
+.step:has(> .sheet--peek) > :is(.base-content, .pages) { padding-bottom: var(--sheet-peek); }
 .step > :is(.base-content, .pages) {
-  padding-bottom: var(--sheet-room, 0rem);
   flex: 0 1 auto;
 }
 .step > :is(.base-content, .pages) {
@@ -1541,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;
 }
 
@@ -1564,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 */
@@ -1574,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); }
@@ -1605,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 */
@@ -1648,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; }
 
@@ -1660,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
@@ -1670,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);
 }
 
@@ -1700,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
@@ -1719,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; }
 
@@ -1740,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 */
@@ -1774,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; }
@@ -1896,14 +1907,9 @@ button { font: inherit; cursor: pointer; }
      <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
    </div>   — or the same two in an .action-bar__tier--pager under a control  */
 .action-bar--pager { align-items: center; }
-/* The bar belongs to the BASE (Lh, 2026-09-20): it is the move of a page of words — a pager turning
-   them, or one wide button. It is never in front of a sheet: a sheet that is on the screen covers it
-   (step.css, "layers"), a peeking one included, and the button that finishes a sheet is the sheet's own
-   foot (sheet.css). So a pager never works beside a sheet — that screen has work that cannot be walked
-   past — and neither does any other bar: while a sheet is on (only .sheet--away, a sheet not called yet,
-   is not), the bar takes no pointer here and cardds.js makes it inert, so the keyboard cannot reach what
-   the eye cannot see. */
-:has(.step > .sheet:not(.sheet--away)) > .action-bar { pointer-events: none; }
+/* The bar belongs to the BASE: the move of a page of words — a pager turning them, or one wide button. A screen
+   with a sheet finishes on the sheet's own foot instead (sheet.css). Guidance for composing, not a rule the
+   CSS enforces: a component never changes because another one is there. */
 /* the page dots: under the card in a .screen__centre group; tight gaps */
 .pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
 .pager__at > * {
@@ -1933,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)
@@ -1976,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); }
@@ -1997,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);
 }
@@ -2041,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);
@@ -2051,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; }
@@ -2109,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;
@@ -2117,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;
@@ -2130,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;
@@ -2150,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)) {
@@ -2166,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 {
@@ -2220,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;
@@ -2235,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: "";
@@ -2260,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 */
@@ -2269,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 ---- */
@@ -2298,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;
@@ -2321,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"> */
@@ -2334,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;
@@ -2365,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.
@@ -2392,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
@@ -2402,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;
@@ -2440,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 ----
@@ -2450,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;
@@ -2477,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;
 }
@@ -2498,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;
@@ -2512,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 ----
@@ -2522,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
@@ -2533,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
@@ -2542,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;
@@ -2591,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 */
@@ -2601,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 —
@@ -2624,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;
 }
@@ -2651,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) ----
@@ -2676,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 {
@@ -2696,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 {
@@ -2711,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; }
@@ -2724,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 {
@@ -2735,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;
@@ -2748,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 ---- */
@@ -2827,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 ----
@@ -2845,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;
@@ -2882,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
@@ -2911,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 */
@@ -2926,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; }
@@ -2958,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;
@@ -2976,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;
@@ -3002,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) {
@@ -3064,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);
@@ -3078,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);
 }
@@ -3102,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;
 }
@@ -3130,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;
 }
@@ -3182,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) {
@@ -3205,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;
 }
@@ -3222,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;
@@ -3262,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 {
@@ -3287,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); }