@usableapp/cardds 0.2.2 → 0.4.0

package/css/base.css

@@ -43,10 +43,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
@@ -113,9 +113,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 {
@@ -131,9 +131,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 */

package/css/card.css

@@ -6,12 +6,12 @@
 .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);
@@ -42,8 +42,8 @@
   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>
@@ -54,8 +54,8 @@
 .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 ----
@@ -119,7 +119,7 @@
 /* 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); }
 
@@ -253,48 +253,49 @@
 .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 */

package/css/choice.css

@@ -12,13 +12,13 @@
    <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;
@@ -35,7 +35,7 @@
 .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"> */
@@ -48,9 +48,9 @@
   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;
@@ -79,7 +79,7 @@
 .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.
@@ -106,7 +106,7 @@
 
 /* ---- 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
@@ -116,33 +116,33 @@
   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;
@@ -154,9 +154,9 @@
   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 ----
@@ -164,19 +164,19 @@
 .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;
@@ -191,18 +191,18 @@
 
 /* ---- 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;
 }
@@ -212,7 +212,7 @@
 /* ---- 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;
@@ -226,8 +226,8 @@
   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 ----
@@ -236,7 +236,7 @@
    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
@@ -247,8 +247,8 @@
   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
@@ -256,15 +256,15 @@
   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;

package/css/forms.css

@@ -7,13 +7,13 @@
 .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;
 }
 
@@ -30,7 +30,7 @@
 .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 */
@@ -40,25 +40,25 @@
 .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); }

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; }