@usableapp/cardds 0.3.0 → 0.4.1

package/css/journey.css

@@ -5,40 +5,40 @@
    ============================================================ */
 
 /* ---- 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 */
@@ -48,8 +48,8 @@
 .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; }

package/css/layover.css

@@ -5,8 +5,8 @@
    lives in sheet.css; these compose with .sheet-stage.
    ============================================================ */
 
-/* ---- ask: the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
-   <div class="sheet-stage sheet-stage--ask">
+/* ---- the Modal — the case drops in, its drawer opens below (Lh 2026-09-16: ONE card, two parts)
+   <div class="sheet-stage sheet-stage--dim">   (dim = the page under a scrim; a Modal on a clean ground is the stage without it — Lh 2026-09-22, `--ask` retired: the stage does the ground, the modal centres itself)
      <article class="card modal">
        <div class="modal__lift">…the card's content (a head, rows, a timeline)…</div>
        <div class="modal__drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
@@ -17,36 +17,33 @@
    .modal is the card — no border (the shadow is its edge on the scrim);
    .modal__lift the light part that holds the thing being asked about (it
    scrolls when tall); .modal__drawer the dark end that asks. The ground is
-   the page under a scrim (like --dim). Two beats (2 × --motion-sheet) when
+   whatever the stage shows (dim it or not). Two beats (2 × --motion-sheet) when
    the stage appears, and the same two backwards when it closes:
      1. the card drops in from above the stage to the screen's centre — its
         drawer still inside it, height 0: nothing of the ask shows yet
      2. the drawer comes out of the card's bottom edge while the lift moves
         up, both at once: the card grows from its centre, which never moves
-        (the stage centres it; a growing card keeps its middle where it is)
+        (the modal centres itself — absolute, margin auto; a growing card keeps its middle where it is)
    Closing: a click on any button in the drawer plays the same animations in
    reverse (cardds.js: Animation.reverse() on each — nothing duplicated), then
    fires "cardds:modal" on the .sheet-stage (bubbles, detail.answer from the
    button's data-answer) for the app to remove the stage.
    Reduced motion: the finished state, no beats; closing fires at once. */
-.sheet-stage--ask {
-  --drawer-h: 14rem;
-  display: grid;
-  align-content: center;          /* the card at the screen's centre — and kept there as it grows */
-  padding-inline: var(--screen-pad);
-}
-.sheet-stage--ask::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } /* the page dimmed */
-.sheet-stage--ask > .sheet-stage__bg { filter: blur(var(--sp-2)); }
 .modal {
-  position: relative;
-  z-index: 1;                     /* over the scrim */
-  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) — a % here would be of the grid area, which is the card itself */
+  --drawer-h: 14rem;
+  position: absolute;             /* at the stage's centre, and kept there as it grows: absolute + margin auto re-centres on every height */
+  inset: 0;
+  margin: auto;
+  height: fit-content;            /* inset 0 alone would stretch it to the stage: its own height, then the margins share the rest */
+  width: calc(100% - 2 * var(--screen-pad));
+  z-index: 2;                     /* over the dim stage's scrim (z 1) */
+  max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
   padding: 0;                     /* the parts pad themselves */
   border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
   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);
@@ -60,15 +57,15 @@
 .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);
 }
@@ -84,14 +81,14 @@
   }
   @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;
 }
@@ -112,31 +109,31 @@
   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;
 }
@@ -164,12 +161,12 @@
 /* ---- 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) {
@@ -187,9 +184,9 @@
   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;
 }
@@ -204,29 +201,29 @@
   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;
@@ -244,15 +241,15 @@
 .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 {
@@ -269,15 +266,15 @@
   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); }

package/css/lists.css

@@ -11,8 +11,8 @@
 .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 */
@@ -21,21 +21,30 @@
    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 row that EXPANDS (Lh 2026-09-22): the row is a <details>' summary, what it shows comes out under it —
+   who liked a postcard, the rest of a list. An end chevron turns when open. The app owns the list.
+   <details class="row-expand"><summary class="row">…lead · body · end…</summary><div class="row-expand__more">…</div></details> */
+.row-expand { display: block; }
+.row-expand > summary { list-style: none; cursor: pointer; }
+.row-expand > summary::-webkit-details-marker { display: none; }
+.row-expand > summary > .icon:last-child { transition: rotate var(--motion-slide); }
+.row-expand[open] > summary > .icon:last-child { rotate: 180deg; }
+.row-expand__more { padding-top: var(--row-expand-gap, var(--sp-3)); }
 /* 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 —
    pointer-events off here, aria-disabled from the markup. The tick is the .check's checked look
@@ -44,13 +53,13 @@
 .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;
 }
@@ -71,20 +80,20 @@
 /* ---- 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) ----
@@ -96,7 +105,7 @@
      <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 {
@@ -116,12 +125,12 @@
 .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 {
@@ -131,8 +140,8 @@
   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; }
@@ -144,7 +153,7 @@
   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 {
@@ -155,7 +164,7 @@
   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;
@@ -168,35 +177,35 @@
 }
 .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; }