@usableapp/cardds 0.7.95 → 0.7.97

package/bin/cardds.mjs

@@ -78,13 +78,13 @@ In the app's entry, once:
   import './theme.css';                       // after cardds.css
 
 Start a screen from a template (Walkthrough · Home · CallSheet · Splash) or compose the components —
-import them, never copy their markup: the behaviour lives in the component. Gallery: see README.`);
+import them, never copy their markup: the behaviour lives in the component. Gallery: see docs/reference.md.`);
   return 0;
 }
 
 // the exports beside the components that are not components (docs/roles.md rows `a function, not a component`…): shape `—` and nothing to tell them from a structural part, so they are named.
 // A new one joins here and in the list test of tests/catalog.spec.js, or it is listed as structure
-const HELPERS = new Set(['applyMask', 'slideTo', 'slideScreen', 'installScreenSlide', 'useLayer', 'useLayers', 'useOptionalLayer', 'registerIcons', 'LayerHistory', 'setWords', 'word', 'setTextScale', 'controlsFor']);
+const HELPERS = new Set(['applyMask', 'cardGrounds', 'inkGrounds', 'slideTo', 'slideScreen', 'installScreenSlide', 'useLayer', 'useLayers', 'useOptionalLayer', 'registerIcons', 'LayerHistory', 'setWords', 'word', 'setTextScale', 'controlsFor']);
 const one = (text) => text.replace(/\s+/g, ' ').trim();
 const indent = (text, by = '    ') => text.replace(/^(?=.)/gm, by);
 

package/css/actions.css

@@ -178,7 +178,8 @@
      toggles, tiles and the dropdown already use. */
   border: var(--border-w) solid var(--chip-border, var(--outline));
   background: var(--chip-bg, var(--action-bg));
-  color: var(--chip-ink, var(--action-ink));
+  --dark: var(--action-dark); /* a chip is a surface of the paper's side: a signal dot on it reads onlight, on any card */
+  color: var(--chip-ink, var(--card-ink));
   padding: var(--chip-pad-y, var(--sp-2)) var(--chip-pad-x, var(--sp-3));
   font: var(--type-label);
   font-size: var(--chip-font-size, var(--fs-sm));
@@ -197,10 +198,9 @@
 .dot--info { background: var(--signal-info); }
 /* --sm: a small LABEL (a name on a note, a tag in a tight head) — low and tight; never a tap target */
 .chip--sm { min-height: 0; gap: var(--chip-sm-gap, var(--sp-1)); padding: var(--chip-sm-pad-y, var(--sp-0)) var(--chip-sm-pad-x, var(--sp-2)); }
-.chip--on { background: var(--chip-on-bg, var(--accent)); color: var(--chip-on-ink, var(--on-accent)); border-color: transparent; }
-/* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (README 13) */
-.chip--muted { color: var(--chip-muted-ink, var(--card-muted)); }
-/* dark-slot inversion lives in card.css (.card--3 :is(...)) */
+.chip--on { background: var(--chip-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--chip-on-ink, var(--card-ink)); border-color: transparent; }
+/* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (docs/reference.md 13) */
+.chip--muted { color: var(--chip-muted-ink, var(--card-muted)); } /* the chip's own fill's muted words: a muted chip on the dark card is still a light chip */
 
 .chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
 .chip-row.bleed { flex-wrap: nowrap; } /* actions.css loads after card.css — the strip stays one line */
@@ -229,8 +229,8 @@
   font-size: var(--fs-body);
   text-align: left;
 }
-/* muted: the value is still the default (README 13) */
-.dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--card-muted)); }
+/* muted: the value is still the default (docs/reference.md 13) */
+.dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--action-muted)); }
 .dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dropdown__btn > .icon { transition: rotate var(--motion-quick) ease; }
 .dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
@@ -242,7 +242,7 @@
 /* ---- segment (day picker / tab strip) — items share width, shrink on small screens ---- */
 .segment { display: flex; gap: var(--sp-1); }
 .segment__item {
-  opacity: var(--rest);
+  color: var(--segment-rest-ink, var(--card-muted)); /* unpicked: the ground's muted words */
   border-radius: var(--r-chip);
   padding: var(--sp-2) var(--sp-1);
   font: var(--type-label);
@@ -254,7 +254,6 @@
 .segment__item[aria-selected="true"] {
   background: var(--accent);
   color: var(--on-accent);
-  opacity: 1;
 }
 
 /* ---- bottom CTA pack: the screen's bottom (Screen `bottom`) ----
@@ -325,10 +324,9 @@
   width: var(--dot);
   height: var(--dot);
   border-radius: 50%;
-  background: currentColor;
-  opacity: var(--faint);
+  background: var(--card-muted); /* a glyph: the dots at rest are the ground's muted ink (an opacity of 0.3 was 1.5:1), the one where you are its full ink */
 }
-.pager__at > .is-at { background: var(--accent); opacity: 1; }
+.pager__at > .is-at { background: var(--card-ink); }
 /* ---- tiers: a control row above the buttons ----
    A screen whose one move comes with a control — the introduction's text-size
    slider above its pager. Each tier is a row; the bar stacks them, and any
@@ -378,11 +376,10 @@
   gap: var(--action-note-gap, var(--sp-1));
   padding-inline: var(--sp-2);
   font: var(--action-note-font, var(--type-body));
-  color: var(--action-note-ink, var(--on-surface-muted));
+  color: var(--action-note-ink, var(--card-muted));
   text-align: center;
   cursor: default;
 }
-.card .action-note { color: var(--action-note-ink, var(--card-muted)); }
 .action-note__words { display: block; } /* ONE run of words: an icon inside sits in the line, the spaces around it kept */
 .action-note__words > .icon { display: inline-block; vertical-align: -0.2em; width: 1.25em; height: 1.25em; margin-inline: 0.15em; color: var(--action-note-icon-ink, inherit); } /* a project may colour the icon apart from the words — e.g. the system blue of the control it points at (Lh 2026-09-24) */
 

package/css/base.css

@@ -27,7 +27,7 @@ html { font-size: 100%; }
 body {
   margin: 0;
   background: var(--surface);
-  color: var(--on-surface);
+  color: var(--card-ink);
   font: var(--type-body);
   -webkit-font-smoothing: antialiased;
 }
@@ -103,7 +103,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .screen > * { min-width: 0; } /* content never widens the column past the viewport */
 /* a screen that carries its own palette (data-palette on the element, not on <html>)
    paints its own surface, so a design tool can show one screen per palette */
-.screen[data-palette] { background: var(--surface); color: var(--on-surface); }
+.screen[data-palette] { background: var(--surface); color: var(--card-ink); }
 
 /* app screen: exactly one phone height — a height, not a minimum, so that a
    .step (step.css) has a bound to fill and its card and sheet scroll INSIDE
@@ -140,9 +140,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .t-stat--mono { font-family: var(--font-mono); letter-spacing: 0; } /* clocks, ETAs, codes */
 .t-stat--xl   { font-size: var(--fs-hero); } /* the one number on a sheet */
 
-.t-muted { color: var(--on-surface-muted); }
-.card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
-/* .card--3 .t-muted (dim instead of --card-muted on the dark slot) is declared once in card.css, with the rest of that family */
+.t-muted { color: var(--card-muted); } /* the muted words of whatever it stands on: the screen, a card of any tone, a drawer */
 .t-caps  { text-transform: uppercase; }
 /* ---- mark: a highlighter stroke over a word INSIDE running text (a sender's name in a greeting) ----
    <p class="t-body"><mark class="mark">ธนาคารเวลา</mark> ส่งแสตมป์ดวงแรกให้คุณ</p>
@@ -211,4 +209,3 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .empty-state__action { margin-top: var(--sp-2); }
 /* inside a card (a card's own "nothing yet"): the card's ink */
 .card .empty-state { color: var(--card-ink); padding-block: var(--sp-6); }
-.card--3 .empty-state { color: inherit; }

package/css/card.css

@@ -6,7 +6,7 @@
 
 .card {
   --card-bg: var(--card-1-bg);   /* the slot, readable by children (avatar rings, fold) */
-  --card-ink: var(--card-1-ink);
+  --dark: var(--card-1-dark);    /* its side: the inks follow (tokens.css) */
   --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);
@@ -34,19 +34,13 @@
 .card--away { translate: 0 var(--_y); }
 @media (prefers-reduced-motion: reduce) { :is(.card--leaver, .post-desk__card) { transition: none; } }
 
-.card--2 { --card-bg: var(--card-2-bg); --card-ink: var(--card-2-ink); --card-muted: var(--card-2-muted); }
-/* dark/accent slot: accent-toned controls would vanish — the slot re-points
-   the accent tokens, so every accent consumer (btn--primary, chip--on,
-   check, toggle, ring, day…) inverts without per-component rules */
-.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
-.card--4 { --card-bg: var(--card-4-bg); --card-ink: var(--card-4-ink); --card-muted: var(--card-4-muted); }
-.card--5 { --card-bg: var(--card-5-bg); --card-ink: var(--card-5-ink); --card-muted: var(--card-5-muted); }
-/* the dark slot's captions/hints/footnotes: --card-muted is tuned for a light card, so these dim the full ink
-   instead (one rule, matching specificity to what it replaces — .card--3 <space> <one class>) — merged from
-   base.css/choice.css/media.css/numbers.css/journey.css/people.css (2026-09-27 review). lists.css's .legend
-   differs (opacity 0.8, not --dim) and stays there. */
-.card--3 :is(.t-muted, .calendar__wd, .composer__hint, .quote__by, .ring__label, .band__foot, .picker__unit,
-  .route__place, .note-row, .avatar-pick__role) { color: inherit; opacity: var(--dim); }
+/* each tone is a fill and a side; its words and glyphs follow from the side (tokens.css) */
+.card--2 { --card-bg: var(--card-2-bg); --dark: var(--card-2-dark); }
+/* the brand slot: accent-toned controls would vanish on it — the slot re-points the accent to its own ink, and that fill's side is
+   the other one, so every accent consumer (btn--primary, chip--on, check, toggle, ring, day…) inverts without per-component rules */
+.card--3 { --card-bg: var(--card-3-bg); --dark: var(--card-3-dark); --accent: var(--card-ink); --accent-dark: calc(1 - var(--dark)); }
+.card--4 { --card-bg: var(--card-4-bg); --dark: var(--card-4-dark); }
+.card--5 { --card-bg: var(--card-5-bg); --dark: var(--card-5-dark); }
 
 /* header row: title left, floating action right — centered, since the
    trailing control (chip/badge/icon-btn/link) is almost always taller than
@@ -317,7 +311,6 @@
   display: grid;
   place-items: center;
   font: var(--card-thumb-font, var(--type-label));
-  opacity: 0.85;
 }
 
 /* ---- card feed: a queue of cards, all in sight — one big, the rest small (Lh 2026-10-09, the whole queue 2026-10-15) ----
@@ -364,9 +357,10 @@
   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));
+  --dark: var(--card-3-dark);
+  color: var(--delta-ink, var(--card-ink));
 }
-.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 */
+.delta--neg { background: var(--delta-neg-bg, var(--neg)); --dark: var(--neg-dark); color: var(--delta-neg-ink, var(--card-ink)); }
 
 /* ---- panes: a few panes side by side inside a card or a sheet, one in sight (Lh 2026-10-02) ----
    <div class="panes" role="group"><div class="panes__rail"><div class="panes__pane">…</div>…</div><span class="pager__at">…</span></div>

package/css/choice.css

@@ -49,6 +49,8 @@
   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));
+  --dark: var(--action-dark); /* the paper's side: its knob at rest is the paper's muted ink, on the accent the accent's */
+  color: var(--card-ink);
   position: relative;
   transition: background-color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
 }
@@ -60,12 +62,11 @@
   width: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
   height: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
   border-radius: 50%;
-  background: currentColor;
-  opacity: 0.45;
-  transition: translate var(--motion-quick) ease, opacity var(--motion-quick) ease;
+  background: var(--card-muted); /* a glyph: a shade of its side, never an opacity (0.45 of the ink was 2.4:1 on the paper) */
+  transition: translate var(--motion-quick) ease;
 }
 .toggle:checked { background: var(--accent); border-color: transparent; }
-.toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
+.toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); }
 
 /* ---- chip pick: a chip that is a choice — a native radio/checkbox inside the label, the picked one filled with accent.
    Full-width in a .chip-grid (one slot / many options), or hugging its word on a .chip-row with --sign (an interest
@@ -87,7 +88,7 @@
    a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css), a place on a map (sheet.css), a card that is a label round a radio
    (a pickable row card: the app gives the picked one its `tone`) — the native input lies over its whole box, unseen */
 :is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch, .map-pick) > input, label.card > input[type="radio"] { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
-:is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+:is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); --dark: var(--accent-dark); color: var(--card-ink); border-color: transparent; }
 /* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
 .chip--sign { padding-right: var(--sp-2); }
 .chip--sign::after {
@@ -121,13 +122,13 @@
                                  is the same shape on every day */
   padding-inline: 0;
   border-radius: var(--day-radius, var(--r-chip));
-  opacity: var(--rest);
+  color: var(--day-rest-ink, var(--card-muted)); /* an unpicked day at rest: the muted words of the ground it stands on (an opacity faded it under AA) */
 }
 .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; }
 /* today: a light tone, no louder than a rest; the selected pill below wins when it is both (it comes after and weighs more) */
-.day--today { background: var(--day-today-bg, var(--ink-tint)); color: var(--day-today-ink, currentColor); }
-.day[aria-selected="true"] { background: var(--day-selected-bg, var(--accent)); color: var(--day-selected-ink, var(--on-accent)); opacity: 1; }
+.day--today { background: var(--day-today-bg, var(--ink-tint)); color: var(--day-today-ink, var(--card-ink)); }
+.day[aria-selected="true"] { background: var(--day-selected-bg, var(--accent)); color: var(--day-selected-ink, var(--on-accent)); }
 .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 ----
@@ -147,8 +148,10 @@
   font-variant-numeric: tabular-nums;
   grid-column-start: var(--start, auto); /* --start on the 1st: weekday column 1–7 */
 }
-.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)); }
+/* a marked day keeps the ground's ink, so its fill is a light tint (12%, as --ink-tint: every tone holds its ink 4.5:1 on that); the
+   strong mark adds a ring of the accent. A stronger fill sat at the middle, where neither the ink nor --on-accent holds 4.5:1 */
+.calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--accent) 12%, transparent)); }
+.calendar__day--mark2 { background: var(--calendar-day-mark2-bg, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--calendar-day-mark2-ink, inherit); box-shadow: var(--calendar-day-mark2-shadow, inset 0 0 0 var(--border-w) var(--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; }
 
@@ -204,7 +207,7 @@
     edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
     is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 }
-.pin__cell:not(:placeholder-shown) { color: var(--pin-cell-filled-ink, var(--accent)); } /* a typed digit: coloured words on the cell's own ground — no fill (Lh 2026-09-24; was an accent-filled pill) */
+.pin__cell:not(:placeholder-shown) { color: var(--pin-cell-filled-ink, var(--action-accent)); } /* a typed digit: coloured words on the cell's own ground — no fill (Lh 2026-09-24; was an accent-filled pill) */
 /* a PIN (secret): the cell DRAWS the dot, the character itself is not painted — except for a moment, when it has just been typed
    (Lh 2026-10-01: "each digit must flash, then go at once"). It was `-webkit-text-security: disc`: a phone's browser then shows
    the last typed character of a masked field for a second or more ("password echo", Android) — per FIELD, and a Pin is six

package/css/finish.css

@@ -20,8 +20,10 @@
    so a finish sits in any palette; the one plain white is the sticker's backing paper and the lit edge's light.
    ============================================================ */
 
-/* every finish: the finish IS the edge, so the wireframe's two borders step back (as [data-palette] in palette.css); ink puts its own line there below */
-[data-finish] { --card-border: transparent; --action-border: transparent; }
+/* every finish: the finish IS the controls' edge, so the wireframe's control border steps back (as [data-palette] in palette.css). The card
+   keeps its --card-border: lit's ring and sticker's white cut do not reach 3:1 on a light ground (palette.css, THE CARD KEEPS AN EDGE);
+   print and ink draw their own line below */
+[data-finish] { --action-border: transparent; }
 
 /* ============================================================
    lit — the light comes from above:

package/css/journey.css

@@ -27,7 +27,7 @@
 .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)); }
 
-.route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; opacity: 0.65; font-size: var(--route-via-font-size, var(--fs-body)); }
+.route__via { grid-column: 2; grid-row: 2; align-self: center; display: flex; align-items: center; color: var(--route-via-ink, var(--card-muted)); font-size: var(--route-via-font-size, var(--fs-body)); }
 
 /* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
 .tile-badge {
@@ -37,13 +37,16 @@
   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));
+  --dark: var(--card-3-dark);
+  color: var(--tile-badge-ink, var(--card-ink));
 }
-.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); opacity: var(--dim); }
+/* the label is the badge's own ink, smaller: a badge is a small fill of any colour (a palette paints it yellow), and only its own ink is
+   sure to hold 4.5:1 on it; --dim faded it to 2.4:1 */
+.tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); color: var(--tile-badge-label-ink, inherit); }
 .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(--tile-badge-plain-min-w, var(--tap-sm)); }
+.tile-badge--plain { background: transparent; --dark: inherit; 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 */

package/css/layover.css

@@ -69,19 +69,21 @@
   gap: var(--modal-drawer-gap, var(--sp-1));
   text-align: center;
   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);
+  --dark: var(--card-3-dark);
+  color: var(--modal-drawer-ink, var(--card-ink));
+  --accent: var(--card-ink);     /* the one solid button inverts on the brand drawer */
+  --accent-dark: calc(1 - var(--dark));
 }
 .modal__drawer--light {        /* light: the card's paper, dark words (Lh 2026-09-29) — the one solid button turns dark */
   background: var(--modal-drawer-light-bg, var(--card-bg));
+  --dark: inherit;              /* the card's own side */
   color: var(--modal-drawer-light-ink, var(--card-ink));
   --accent: var(--card-ink);
-  --on-accent: var(--card-bg);
+  --accent-dark: calc(1 - var(--dark));
 }
 /* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
-.modal__drawer .t-caption { opacity: var(--dim); }
+.modal__drawer .t-caption { color: var(--modal-drawer-caption-ink, var(--card-muted)); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
 /* the answers as WORD buttons (a BtnRow of Btns; Lh 2026-10-11): the row fills the ask with room over it and each button keeps its words on one
    line — left to its words' width the row squeezed two buttons into round blobs, their words on two lines. A quiet button is an outline only,
@@ -190,6 +192,7 @@
   background: var(--banner-bg, var(--ink-tint));
   color: var(--banner-ink, inherit);
   border-block: var(--border-w) solid var(--banner-border, var(--hairline));
+  --card-muted: var(--card-ink); /* a tint of the ink is a ground where no lighter shade holds 4.5:1: its secondary words are the full ink */
   /* a band edge to edge of what holds it — the card's or the screen's inset; no radius, no side border: a band, not a card */
   margin-inline: calc(-1 * var(--card-pad, var(--screen-pad)));
   padding-inline: var(--card-pad, var(--screen-pad));
@@ -243,7 +246,8 @@
   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));
+  --dark: var(--action-dark); /* the pill is the items' ground: the paper's side */
+  color: var(--float-bar-pill-ink, var(--card-ink));
   backdrop-filter: blur(var(--sp-3));
   -webkit-backdrop-filter: blur(var(--sp-3));
   box-shadow: var(--float-bar-pill-shadow, var(--shadow-float));
@@ -259,14 +263,14 @@
   border-radius: var(--float-bar-item-radius, var(--r-chip));
   font: var(--float-bar-item-font, var(--type-caption));
   text-decoration: none;
-  opacity: var(--rest);
+  color: var(--float-bar-item-rest-ink, var(--card-muted));
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 /* aria-current="false" is the correct way to mark the OTHER tabs, so the
    bare attribute selector lights every one of them up */
-.float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); }
 .float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
 
 /* ---- callout: a small card with a tail — over a map, a media, a mascot ----
@@ -303,7 +307,7 @@
   border-left: 0;
 }
 .callout__title { font: var(--callout-title-font, var(--type-title)); }
-.callout__sub { font: var(--callout-sub-font, var(--type-caption)); opacity: var(--dim); }
+.callout__sub { font: var(--callout-sub-font, var(--type-caption)); color: var(--callout-sub-ink, var(--action-muted)); }
 /* ---- splash: the app's mark at the human centre while it boots (Lh 2026-09-24) ----
    <section class="screen screen--fill splash"><div class="splash__group"><div class="splash__mark">{the app's lottie/img}</div>
      <p class="splash__text">…</p></div></section>
@@ -346,7 +350,8 @@
   border: var(--border-w) solid var(--snackbar-border, transparent);
   border-radius: var(--snackbar-radius, var(--r-card));
   background: var(--snackbar-bg, var(--signal-ok-soft));
-  color: var(--snackbar-ink, var(--on-surface));
+  --dark: var(--surface-dark); /* the signal's soft ground is a tint of the screen: the screen's side */
+  color: var(--snackbar-ink, var(--card-ink));
   box-shadow: var(--snackbar-shadow, var(--shadow-float));
   font: inherit; text-align: start;
   pointer-events: auto;
@@ -354,5 +359,5 @@
 .snackbar__body > .icon { flex: none; color: var(--snackbar-icon-ink, var(--signal-ok)); }
 .snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
 .snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
-.snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); opacity: var(--dim); }
+.snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); color: var(--snackbar-caption-ink, inherit); } /* on the signal's soft ground the full ink: a muted shade there fell under AA */
 @media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }

package/css/lists.css

@@ -32,7 +32,6 @@
 .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: var(--card-3-muted); }
 .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); }
@@ -51,7 +50,6 @@
    at --tap-sm, but not an input: nothing to press. */
 .row--done { pointer-events: none; cursor: default; }
 .row--done .row__title { color: var(--card-muted); }
-.card--3 .row--done .row__title { color: var(--card-3-muted); }
 .row__done {
   width: var(--row-done-size, var(--tap-sm));
   height: var(--row-done-size, var(--tap-sm));
@@ -96,7 +94,6 @@
 .kv-cell > .icon { margin-bottom: var(--sp-1); }
 .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: var(--card-3-muted); }
 
 /* ---- bubble: a chat message — theirs on the left, mine on the right (Lh 2026-09-18, replaces the chip's tail) ----
    No tail: a rounded block whose corner nearest the sender is square-ish
@@ -125,7 +122,8 @@
   border-radius: var(--bubble-body-radius, var(--r-card));
   border-bottom-left-radius: var(--r-control);
   background: var(--bubble-body-bg, var(--card-2-bg));
-  color: var(--bubble-body-ink, var(--card-2-ink));
+  --dark: var(--card-2-dark);
+  color: var(--bubble-body-ink, var(--card-ink));
   font: var(--bubble-body-font, var(--type-body));
   overflow-wrap: anywhere;
 }
@@ -136,10 +134,9 @@
   color: var(--on-accent);
   text-align: right;
 }
-.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__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(--card-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
-.bubble__meta > .icon { color: var(--accent); }
-.card--3 .bubble__meta { color: var(--card-3-muted); }
+.bubble__meta > .icon { color: var(--bubble-meta-icon-ink, var(--accent-ink)); }
 
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
@@ -182,7 +179,6 @@
 /* ---- 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(--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(--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 ----
@@ -203,7 +199,6 @@
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
 .link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a Countdown) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
-.card--3 .link--muted { color: var(--card-3-muted); }
 
 /* ---- bullets: a list, each item led by a small square picture as tall as a line of its words (Lh 2026-09-28, timebank #153) ----
    <ul class="bullets"><li class="bullets__item"><img class="bullets__pic" alt=""><span class="bullets__text">…</span></li></ul>

package/css/media.css

@@ -10,9 +10,9 @@
      <div class="row">…meta…</div></article> */
 .card--cover {
   --card-bg: var(--card-3-bg);
-  --card-ink: var(--card-3-ink);
-  --accent: var(--card-3-ink);
-  --on-accent: var(--card-3-bg);
+  --dark: var(--card-3-dark);
+  --accent: var(--card-ink);
+  --accent-dark: calc(1 - var(--dark));
   min-height: var(--_cover-min-h);
   align-content: space-between;
   overflow: hidden;
@@ -38,8 +38,6 @@
   z-index: -1;
   background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
 }
-.card--cover .t-muted { color: inherit; opacity: 0.75; }
-.card--cover .row__meta { color: inherit; opacity: 0.85; }
 
 /* ---- 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> */
@@ -74,35 +72,40 @@
   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));
+  --dark: var(--action-dark); /* a tile is a surface: the paper's side (a toned tile takes its tone's, below) */
+  color: var(--tile-ink, var(--card-ink));
   font: inherit;
   text-align: left;
   position: relative;
 }
 .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: var(--dim); }
+.tile__sub { font: var(--tile-sub-font, var(--type-caption)); color: var(--tile-sub-ink, var(--card-muted)); } /* the muted words of the tile's ground; --dim faded the full ink to 2.4–3.4:1 */
 .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--on { background: var(--tile-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--tile-on-ink, var(--card-ink)); border-color: transparent; }
 /* .tile--pick's hidden input and :has(:checked) fill are declared once in choice.css, alongside .chip--pick and .mood__opt */
 .tile--wide { grid-column: 1 / -1; }
 /* stat: READ, not pressed — no frame of its own inside a card (a frame says "tap me"): icon · value · words on the card's ground */
-.tile--stat { border-color: transparent; background: none; padding-inline: 0; 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; }
+/* a stat tile has no fill of its own, so it has no ink of its own: it takes the ink of what it stands on (currentColor on `color`
+   = the inherited colour), as the card's heading does. It kept the plain tile's --action-ink, dark on a dark card (timebank, tone 3,
+   Lh 2026-10-18). --tile-ink still overrides; a toned stat tile (.tile--N, below) takes its fill and its ink back */
+.tile--stat { --dark: inherit; color: var(--tile-ink, currentColor); border-color: transparent; background: none; padding-inline: 0; 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;
   background: transparent;
   color: inherit;
+  --dark: inherit;
   align-content: center;
   justify-items: center;
   gap: var(--tile-upload-gap, var(--sp-2));
   text-align: center;
 }
 /* tinted tiles: slot colors inside a card (schedule, notes) */
-.tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); color: var(--tile-2-ink, var(--card-2-ink)); border-color: transparent; }
-.tile--4 { background: var(--tile-4-bg, var(--card-4-bg)); color: var(--tile-4-ink, var(--card-4-ink)); border-color: transparent; }
-.tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); color: var(--tile-5-ink, var(--card-5-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; }
+.tile--2 { background: var(--tile-2-bg, var(--card-2-bg)); --dark: var(--card-2-dark); color: var(--tile-2-ink, var(--card-ink)); border-color: transparent; }
+.tile--4 { background: var(--tile-4-bg, var(--card-4-bg)); --dark: var(--card-4-dark); color: var(--tile-4-ink, var(--card-ink)); border-color: transparent; }
+.tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); --dark: var(--card-5-dark); color: var(--tile-5-ink, var(--card-ink)); border-color: transparent; }
+.tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--tile-3-ink, var(--card-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
@@ -225,7 +228,7 @@
 }
 .postcard__turn:focus-visible { outline-offset: calc(-1 * var(--sp-1)); } /* the ring inside the card's edge */
 /* the front: the photo (or the wireframe box) fills it; the band reads on a scrim */
-.postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); color: var(--postcard-front-ink, var(--card-3-ink)); }
+.postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--postcard-front-ink, var(--card-ink)); }
 .postcard__front .postcard__turn > img,
 .postcard__front .postcard__turn > .ph {
   position: absolute;
@@ -248,7 +251,8 @@
 /* the back: paper — the caption and the name packed at the middle, big enough to read at arm's length */
 .postcard__back {
   background: var(--postcard-back-bg, var(--card-2-bg));
-  color: var(--postcard-back-ink, var(--card-2-ink));
+  --dark: var(--card-2-dark);
+  color: var(--postcard-back-ink, var(--card-ink));
   transform: rotateY(180deg);
 }
 .postcard__back .postcard__turn { align-content: start; padding-top: var(--postcard-back-top, 20%); gap: var(--postcard-back-gap, var(--sp-5)); } /* the name a fifth down the paper, the words after it */
@@ -266,7 +270,7 @@
 }
 .postcard__band > * { pointer-events: auto; }
 .postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
-.postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-3-ink)); --on-accent: var(--postcard-front-bg, var(--card-3-bg)); }
+.postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-ink)); --accent-dark: calc(1 - var(--dark)); }
 .postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
 .postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
 .postcard.is-flipped > .postcard__back { transform: rotateY(0); }