@usableapp/cardds 0.3.0 → 0.4.0

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

@@ -46,7 +46,7 @@
   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 +60,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 +84,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 +112,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 +164,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 +187,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 +204,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 +244,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 +269,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,20 +21,20 @@
    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 —
@@ -44,13 +44,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 +71,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 +96,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 +116,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 +131,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 +144,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 +155,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 +168,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; }

package/css/media.css

@@ -43,16 +43,16 @@
 
 /* ---- 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 ----
@@ -61,36 +61,36 @@
 .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;
@@ -98,12 +98,12 @@
   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
@@ -127,7 +127,7 @@
    <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 */
@@ -142,9 +142,9 @@
   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; }
@@ -174,16 +174,16 @@
   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;
@@ -192,11 +192,11 @@
   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;
@@ -218,13 +218,13 @@
 }
 /* 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) {