@usableapp/cardds 0.7.94 → 0.7.96

package/CHANGELOG.md

@@ -2,6 +2,82 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.96 — 2026-10-18
+
+From timebank's help sheet (Lh 2026-10-18): "the card's colour is no different from the background at all". A card is one boundary; a boundary the member cannot see is no boundary (WCAG 2.2 SC 1.4.11, 3:1). No prop changes. Two looks change on existing screens: every card in coloured mode and under the `lit` and `sticker` finishes now has a visible edge, and a `Tile stat` takes the ink of the card it stands on.
+
+Then the ink (Lh 2026-10-18). On `Tile · StatOnEachTone` at tone 3: "Text on a dark background like this must be light or white". The model, ruled the same day: "there are text colours ONLIGHT and ONDARK. When the ground is light, use onlight; when the ground is dark, use ondark. In future, with a dark mode, text uses ondark too, without changing the way of thinking", and "the onlight and ondark principle applies to other glyphs too". **Ink follows its ground** (README): two ink sets per palette, every ground declares only its side, and every word and glyph on it follows. Measured by the new check on every gallery story × 7 palettes × (as written + tones 1–5): 15,137 pieces under AA at 0a36c7a → 0, and 0 in a dark mode made of sides alone. **A theme that set a per-tone ink token must move to the two sets** (Removed, below). A theme that sets only the five `--color-*` bases (timebank) changes nothing: the sets derive from `--color-ink` and `--color-on-brand`.
+
+### Added
+- **`cardGrounds()`: can the member see each card on your theme?** Before → after: nothing measured a card against its ground, and the README said cardds made no contrast check → a function the package exports builds a card of each tone (1–5) on the screen, in a sheet's body and in a `paper` sheet's body, where your theme is loaded, and returns per pair the fill's contrast, the edge's, `pass` (one of them 3:1) and a `problem` that names the tokens and the shortfall. It changes nothing; the theme's values stay yours. Run it on a dev page (`console.table(cardGrounds())`) or in a Playwright test (`await page.evaluate(cardGrounds)`). README "Can the member see the card?".
+- **Story `Tile · StatOnEachTone`**: two stat tiles on each tone.
+- **Two ink sets.** `--ink-onlight` and `--ink-onlight-muted` (words and glyphs on a light ground), `--ink-ondark` and `--ink-ondark-muted` (on a dark one). Each holds 4.5:1 on every ground of its side. Unset, they derive from `--color-ink` and `--color-on-brand`; the wireframe's are #141414 / #575757 and #ffffff / #a8a8a8.
+- **Sides.** `--surface-dark`, `--card-1-dark` … `--card-5-dark`, `--accent-dark`, `--action-dark`, `--neg-dark`: `1` = a dark ground, `0` = a light one. The defaults: the screen, tones 1, 2, 4 and the paper light; tone 3, tone 5, the brand fill and a falling Delta dark. orchard and vers declare their tone 5 light. A surface sets `--dark` from its fill's side; the surface list in tokens.css gives it `--card-ink`, `--card-muted`, `--on-accent`, `--accent-ink` (the brand as a glyph: itself on a light ground, ondark on a dark one) and the four signals.
+- **Signals by side.** `--signal-{ok,warn,error,info}-onlight` (the shade on a light ground, 4.5:1 on every one) and `--signal-…-ondark` (the ondark ink unless a palette gives its own: orchard does). `--signal-ok` etc. are now what a piece reads, derived on each surface.
+- **Dark mode falls out.** Turn the light sides to 1 and darken their fills, in a block of your own (README "Ink follows its ground"); no rule per piece. `tests/ink.spec.js` holds the gallery to that block: 0 short.
+- **`inkGrounds()`: can the member read every word and glyph on your theme?** A function the package exports walks every visible word, field value, `svg.icon` and glyph drawn as a fill (a signal dot, a day's dot, the pager's dots, a check's tick, a switch's knob, the strong calendar mark's ring) inside a root, finds the ground under it (every fill, through every opacity) and returns `{ piece, surface, side, set, kind, ink, ground, ratio, needs, pass, problem }`. `side` is what the ground declares, `set` the ink set the colour is; `problem` names both, e.g. `… on .card.card--3 (light side): #575757 (--card-muted = --ink-onlight-muted) on #141414 (--card-bg) is 2.55:1, words need 4.5:1`. Words 4.5:1; large words, icons and glyphs 3:1. It changes nothing. `console.table(inkGrounds().filter((r) => !r.pass))` or `await page.evaluate(inkGrounds)`. `tests/ink.spec.js` runs it over every story in every stock palette and in dark mode, in `npm run ci`.
+- **Knobs.** `--sticky-dark` (a note's side, 0), `--bubble-meta-icon-ink`, plus the knobs #35 added for muted pieces: `--day-rest-ink`, `--segment-rest-ink`, `--float-bar-item-rest-ink`, `--picker-rest-ink`, `--tile-sub-ink`, `--tile-badge-label-ink`, `--callout-sub-ink`, `--snackbar-caption-ink`, `--modal-drawer-caption-ink`, `--route-via-ink`, `--sheet-step-summary-ink`, `--sticky-heading-caption-ink`, `--calendar-day-mark2-shadow`, `--sheet-stage-foot-bg` (docs/knobs.md).
+
+### Removed (before → after, for a theme that set them)
+- `--card-1-ink`, `--card-2-ink`, `--card-4-ink` (and `--color-ink` where it meant them) → `--ink-onlight`: one ink for every light ground.
+- `--card-3-ink`, `--card-5-ink` → `--ink-ondark`.
+- `--card-muted` (on `:root`, the older name), `--card-1-muted`, `--card-2-muted`, `--card-4-muted` → `--ink-onlight-muted`. `--card-muted` stays as what a piece reads on its surface; set on `:root` it no longer retunes anything.
+- `--card-3-muted`, `--card-5-muted` → `--ink-ondark-muted`.
+- A tone whose words were set the other way (orchard's and vers's light tone 5) → `--card-5-dark: 0`.
+- `--on-surface`, `--on-surface-muted`, `--on-accent`, `--action-ink`, `--action-muted` set directly → the screen's, the brand fill's and the paper's side (`--surface-dark`, `--accent-dark`, `--action-dark`). The names stay readable; they now derive.
+- `--signal-ok`, `--signal-warn`, `--signal-error`, `--signal-info` set on `:root` → `--signal-…-onlight` (and `--signal-…-ondark`).
+- `--dim` and `--rest` (#35) → the muted shade of the side; `--faint` → a pager dot at rest is the muted ink, a solid shade.
+
+### Changed
+- **A card keeps an edge in coloured mode.** Before → after: `[data-palette]` set `--card-border: transparent`, so a card's only boundary was its fill and a 6–8% shadow: in every stock palette tones 1, 2 and 4 (and 5 in orchard and vers) sat under 3:1 on the screen, and a tone-1 card in a tone-1 sheet was 1:1 → `--card-border` is `--on-surface-muted` (the ground's muted words) under any `data-palette`, a 1.5px line (`--border-w`). Every tone on every ground now holds 3:1 in every stock palette and finish (525 pairs, `tests/card-grounds.spec.js`). The shadow stays. A project that wants its own edge sets `--card-border` in `theme.css` and runs `cardGrounds()`; the old look is `--card-border: transparent`, which the check will name.
+- **The `lit` and `sticker` finishes keep the card's edge.** Before → after: every finish set `--card-border: transparent`; lit's 7% ring and sticker's white cut measured 1.15–1.41:1 on a light ground → only `--action-border` steps back under a finish; `print` and `ink` draw their own line as before.
+- **`Tile stat` takes the ink of what it stands on** (timebank: in `Card tone={3}` the value and icon were rgb(42,36,28) on rgb(92,107,71)). Before → after: the stat tile drops the plain tile's fill (`--action-bg`) but kept its ink (`--action-ink`), dark on a dark card → its ink is inherited, as the card's heading's; `--tile-ink` still overrides. Its sub line is the card's muted words (`--card-muted`, which each tone holds to AA) instead of the full ink at `--dim`, which was 3.3:1 on clay's terracotta.
+- **Every piece reads its ink from its ground's side.** Before → after (since 0a36c7a): `.card--3` set only its ink and the accent pair; a hand list in card.css faded ten named pieces by `opacity: var(--dim)`; six `.card--3 .x` patches in lists.css; per-tone ink tokens chosen one by one → a ground declares its side and the inks follow (the surface list in tokens.css: the screen, every card tone, a sheet, a tile, a chip, a switch, the drawer, a cover, each Postcard face, a note, the post paper, the float bar's pill, the snackbar, a Delta, the track and its steps, a tile badge, an avatar, a bubble, the map's hint). A piece with no fill that stands in for one takes its ground's side (`--dark: inherit`: a stat tile, an upload tile, a plain tile badge, an outline avatar, a light drawer).
+- **A muted word or glyph is a shade, never an opacity.** Unpicked days, segments, picker values, float-bar items, a tile's sub line, captions: the side's muted ink. The pager's dots at rest were 30% of the ink (1.5:1) → the muted ink; the one where you are, the full ink (it was the accent, 1.6:1 on the wireframe's tone 5). A switch's knob at rest was 45% of the ink (2.4:1, and white on the paper switch on a dark card) → the paper side's muted ink.
+- **One muted shade per side.** Wireframe: tone 1's #6b6b6b, tone 2's #5f5f5f, tone 4's #555555 and a note's 68% of the ink → #575757 (4.6:1 on the water note, the darkest light ground); tone 3's #b9b9b9 and tone 5's #c4c4c4 → #a8a8a8 (4.6:1 on tone 5). Each stock palette's sets are in palette.css with the ground that bounds them.
+- **Each tone's words are its side's ink.** orchard's per-tone inks (sand #33291c, sage #2b3322, clay #3a2a1c) → its onlight umber #2a241c; clay's terracotta and mustard muted → #2a2723 (the terracotta is a middle ground: no lighter muted holds 4.5:1 on it). On the brand card the inverted primary button's words are onlight (they were the brand colour).
+- **A chip is a ground of the paper's side.** A signal dot on a chip on a dark card took the card's ondark signal (1:1 on the white chip) → onlight. A picked chip or tile is a ground of the accent's side.
+- **The track** lays down the accent fill of where it stands and is that fill's side; its steps re-point the accent (the `.card--3 .track` rule is gone).
+- **Signals.** On a light ground, the onlight shade: wireframe ok #2b7a2f → #27692a, warn #7f6400 → #705903, error #c62828 → #af2525, info #2f5f9e → #2e5c98 (each 4.5:1 on tone 4's grey; tones 2 and 4 used to take the card's ink); orchard ok #497645 → #3e5a37, warn #8d641b → #6b4e1b, error #b04e39 → #82402f, info #4c6e95 → #40556c; vers ok #477242 → #3b5734, warn #856122 → #654b1e, error #a84a37 → #803c2d, info #49698f → #3c5169; clay ok #205622 → #1b2c18, warn #5d4a00 → #2f280d, error #931e1e → #471a17, info #264c7f → #1d2938 (4.5:1 on the terracotta: nearly the ink). On a dark ground, the ondark ink; orchard's own light shades (#f9ccc0, #f2d28b, #cfe6b8, #c5d7ef, 4.5:1 on the moss) now hold on every dark ground of orchard, not only tone 3.
+- **Stock palette fills**, chosen so each side's ink holds 4.5:1 on the fill, on the fill's own hue (OKLCH, lightness only), and so a tone's ink holds on its 12% tint too (a banner, a step bar, today's day carry words there):
+
+| palette | fill | before #35 | #35 | now | its ink | ink on it, before → now | on its 12% tint now |
+|---|---|---|---|---|---|---|---|
+| roast | tone 3 · --accent | #b97e3c | #805729 | #8c5402 | #fdf9f1 | 3.27 → 5.91 | 4.59 |
+| hydro | tone 3 · --accent | #3d63e0 | #385bce | #365bd7 | #ffffff | 5.17 → 5.78 | 4.55 |
+| orchard | tone 3 · --accent | #5c6b47 | #525f3f | #52613d | #f6f1e6 | 5.11 → 5.94 | 4.55 |
+| vers | tone 3 · --accent | #678d58 | #4d6a42 | #496d3a | #ffffff | 3.8 → 5.95 | 4.55 |
+| clay | tone 2 (light) | #e05c3a | #e36d4f | #eb6644 | #191713 | 4.91 → 5.55 | 4.56 |
+| orchard | --highlight-1 | #d93a1f | #d1381e | #d03114 | #f6f1e6 | 4.07 → 4.51 | no words on a tint |
+| orchard | --highlight-4 | #e0457b | #cd3f71 | #ca2e69 | #f6f1e6 | 3.51 → 4.54 | no words on a tint |
+| orchard | --neg | #c4694f | #a25741 | #ad553b | #f6f1e6 | 3.4 → 4.5 | no words on a tint |
+| vers | --neg | #dd9787 | #a84a37 | #a76557 | #ffffff | 2.37 → 4.52 | no words on a tint |
+
+  hydro's ondark ink #f2f6ff → #ffffff (#35). The highlight and Delta fills carry no tint, so they hold the fill alone. A palette's `--card-border` is still `--on-surface-muted`: now the onlight muted ink, a step darker.
+
+### Fixed
+- **`pager-forward-primary` reads a conditional forward slot as one** (reported by timebank 2026-10-18, poc/help-flow phone.tsx). Before → after: `<Btn>Back</Btn>{last ? <Btn primary>Send</Btn> : <Btn primary>When</Btn>}` was flagged, the first branch counted as a back button → the two branches of a conditional are one slot, and both are the forward Btn that must be `primary`.
+
+### Known, not changed
+- `inkGrounds()` reads ancestors only: words over a scrim drawn by `::after`, or over a sibling that is positioned under them, are measured against the ancestors' fills. A `url()` picture is skipped; a gradient is read as decoration unless it is one colour.
+- A `Delta` pill (bg `--card-3-bg`) has no visible boundary on the dark card (its words pass); a mark, not words, so the ink check does not read it.
+- A calendar `mark` is a 12% accent tint: the day's number reads on it, but the mark itself is not a 3:1 glyph (`mark2` adds a 3:1 ring). Decoration colours (`--dot-a`, `--dot-b`, the highlights) are not inks and are not measured: a brand-coloured legend dot vanishes on the brand card.
+- The wireframe's card edge (#141414) and its brand fill are near-black: in a dark mode they need their own colours to keep a card's boundary (cardGrounds()); the ink holds without them.
+
+## 0.7.95 — 2026-10-18
+
+From timebank's help-ask prototype (Lh 2026-10-18): its Composer, Dropdown and map stood on white cards inside the help sheet. Ruled: the sheet is the paper the member fills in.
+
+Nothing in the package's look or behaviour changes: no component, class or knob is added or removed. Two new checks may fail a project's `cardds check`: a control in a card, and a worded pager whose forward button is not the primary one.
+
+### Added
+- **`cardds check` rule `field-in-card` (error): the sheet is the paper the member fills in** (Lh 2026-10-18). Before → after: "Fields belong in a Sheet" was prose in `Field`'s doc, and nothing stopped a form on a card → a control the member fills in or picks, written inside a `<Card>`, is an error that names `Sheet`'s `SheetBody`, `SheetStep` and the stack sheet as its place. The controls: `Field`, `Composer`, `ComposerArea`, `Pin`, `Dropdown`, `Slider`, `Toggle`, `Check`, `ChipPick`, `Calendar`, `DayStrip`, `Day`, `Picker`, `Mood`, `AvatarPick`, `FileBtn`, `AddRow`, `MapPick`, a `Tile pick` and a `Tile upload`. A plain or `stat` Tile, a `Btn`, `IconBtn` or `Link`, and a raw `<input>` (the pickable row card's radio) are not flagged. A `Card` that is a sheet of a `SheetStack` is that stack's sheet and may hold them. To pass: move the controls onto the sheet's body (`<Sheet><CardHead …/><SheetBody>…controls…</SheetBody><CardFoot>…</CardFoot></Sheet>`), with no card round them. The ESLint plugin reports it under `cardds/check`.
+- **`cardds check` rule `pager-forward-primary` (error).** Before → after: a worded pager could carry back and next with the same signal (Lh saw it on a timebank screen) → in an `ActionBar variant="pager"` or an `ActionBarTier pager` with two or more worded `Btn`s, the last (forward) one must be `primary` and the others not. The round pager (`IconBtn`s) is not checked.
+
+### Changed
+- **Every control's doc says where it lives: on a sheet, never in a Card.** `Field`'s doc comment now leads with it, so `cardds get Field` and `cardds find "where does a form field go"` answer with the rule. README's sheet rules gain "The sheet is the paper the member fills in".
+- **The gallery's stories put their controls on sheets.** 60 stories in 19 files moved from a card onto a sheet: a `Step` with a `Page` and a `Sheet` where the story is a step of a flow, a bare `SheetStage` with a `Sheet` for a part shown on its own. Story ids are unchanged. Two samples that stood in two cards of one story now stand on one sheet.
+
 ## 0.7.94 — 2026-10-18
 
 From timebank's help-ask sheet (Lh 2026-10-17). One look changes on existing screens: a row card's corner (41.6 → 13). Everything else is added, and a screen that does not use it is as it was.

package/README.md

@@ -9,6 +9,9 @@
 > The other docs only point here: `CLAUDE.md` (AI working IN this repo — decisions and gotchas),
 > `docs/guides/building-with-cardds.md` (AI composing screens in React; shipped to Claude Design),
 > the `/cardds` skill (AI in another project — install + contract). To LOOK at the system: `npm run dev`.
+>
+> **Accessibility:** [Ink follows its ground](#ink-follows-its-ground). Two ink sets, onlight and ondark; every ground declares
+> only its side, and every word and glyph on it follows. `inkGrounds()` checks your theme.
 
 Card-first mobile design system, **React-first**: `src/` is the component
 library — one thin component per pattern, emitting exactly the markup the CSS
@@ -555,8 +558,21 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 - **A bottom sheet holds what the member acts on** — controls, or small
   content cards to pick from or read more — and it opens to the full height
   of its box. **Cards are content the system offers**: the words, the
-  explanation, the thing to read. Do not put a form in a card when a sheet
-  would do, and do not put the step's explanation in a sheet.
+  explanation, the thing to read. Do not put the step's explanation in a
+  sheet.
+- **The sheet is the paper the member fills in** (Lh 2026-10-18). Every
+  control the member fills in or picks stands on a sheet: a `Sheet`'s
+  `SheetBody`, a `SheetStep`, or a stack sheet. That is `Field`, `Composer`
+  and `ComposerArea`, `Pin`, `Dropdown`, `Slider`, `Toggle`, `Check`,
+  `ChipPick`, `Calendar`, `DayStrip` and `Day`, `Picker`, `Mood`,
+  `AvatarPick`, `FileBtn`, `AddRow`, `MapPick`, a `Tile pick` and a
+  `Tile upload`. A card is for reading and pressing buttons only; never put
+  a form, or one control of it, in a card. `cardds check` rule
+  `field-in-card` (error) flags a control written inside a `<Card>`. A `Card`
+  that is a sheet of a `SheetStack` is that stack's sheet, so it may hold
+  them. Seen in timebank's help-ask prototype: a Composer, a Dropdown and a
+  map on white cards inside the help sheet, the cards the colour of the
+  ground.
 - **Two sheet systems, one material.** *Sheet single* (`.sheet`, `sheet.css`)
   is ONE sheet the member acts in, whatever it holds: a short entry in front
   of a step's card, a place on a map, a payment on a dim page — in a `.step`
@@ -916,7 +932,7 @@ That file is where a project's look lives. Bases and roles:
 | the size **of** things | `--tap-base` (3rem = 48) | `--tap*`, `--btn-h`, `--chip-h`, `--bar-h`, `--header-h`, `--fab`, `--icon*`, `--avatar*`, `--dot*`, `--ring*`, `--tile-*`. `--tap*` never under `--tap-floor` (44px) |
 | faces | `--font-ui`, `--font-display` | |
 | colour | `--color-surface`, `--color-ink`, `--color-paper`, `--color-brand`, `--color-on-brand` — no default: unset = the wireframe | every role: surface / words, the three card tones (paper · the brand washed 14% into the surface · the brand), the muted inks (the ink washed into their ground), accent, neutral actions, `--dot-a` |
-| colour roles (the escape hatch) | `--surface`, `--on-surface(-muted)`, `--card-{1,2,3}-{bg,ink}`, `--card-border`, `--card-muted`, `--card-2-muted`, `--accent`, `--on-accent`, `--action-{bg,ink,border}`, `--pos`, `--neg`, `--dot-{a,b}`, `--signal-{ok,warn,error,info}` | a role set directly wins over its derivation; the tints derive from the roles |
+| colour roles (the escape hatch) | the ink sets `--ink-{onlight,ondark}(-muted)`; the sides `--surface-dark`, `--card-{1,2,3,4,5}-dark`, `--accent-dark`, `--action-dark`, `--neg-dark`; `--surface`, `--card-{1,2,3,4,5}-bg`, `--card-border`, `--accent`, `--action-{bg,border}`, `--pos`, `--neg`, `--dot-{a,b}`, `--signal-{ok,warn,error,info}-{onlight,ondark}` | a role set directly wins over its derivation; the tints derive from the roles |
 
 Rules:
 
@@ -936,9 +952,13 @@ Rules:
   trades the wireframe's borders for the card's shadow and the controls' soft
   edge (`palette.css`, `forms.css`). Colours of your own → `<html data-palette="own">`.
   Without it the colours still apply, on wireframe borders.
-- **cardds does not judge the colours.** No contrast check, no warning — a
-  theme's values are the project's call. The derivations are only starting points;
-  any role can be set outright.
+- **cardds does not pick the colours; it measures two things about them.** A theme's
+  values are the project's call and the derivations are only starting points; any
+  role can be set outright. What cardds checks is that the member can see each card
+  ([`cardGrounds()`](#can-the-member-see-the-card) names a tone whose fill and edge both
+  sit under 3:1 on its ground) and read what stands on it
+  ([`inkGrounds()`](#ink-follows-its-ground) names a word or icon under 4.5:1 or 3:1).
+  Both name the tokens to move.
 - The member's text-size setting is the same `--fs-base`, written on `<html>`
   at run time by `setTextScale(percent)` (a share of the theme's base; 100 = the
   theme's own): the words grow, and the things grow HALF as much (`--tap-base`; `controlsFor(percent)` — 130% text → 115% controls, 160% → 130%), so a larger text still fits what holds it. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
@@ -949,16 +969,95 @@ palette `own` shows a colour well per colour base.
 template to the defaults; the step / centre geometry runs at two extreme
 themes (`tight`, `loose`).
 
+## Ink follows its ground
+
+The accessibility rule for colour (Lh 2026-10-18): "there are text colours ONLIGHT and ONDARK. When the ground is light, use
+onlight; when the ground is dark, use ondark." It holds for words and for glyphs: icons, marks and dots that carry meaning, a
+check's tick, a switch's knob, the pager's dots.
+
+1. **Two ink sets.** A palette (or your theme) sets `--ink-onlight` and `--ink-onlight-muted`, `--ink-ondark` and
+   `--ink-ondark-muted`. Each holds 4.5:1 on every ground of its side.
+2. **Every ground says only its side.** `--surface-dark`, `--card-1-dark` … `--card-5-dark`, `--accent-dark` (the brand fill),
+   `--action-dark` (the paper of buttons, chips and fields), `--neg-dark`: `1` is dark, `0` light. A surface turns its side into
+   the inks every piece on it reads: `--card-ink`, `--card-muted`, `--on-accent`, `--accent-ink` and the four signals.
+3. **A piece reads its ink only from the ground it stands on** (`currentColor`, `--card-ink`, `--card-muted`). It never names a
+   fixed colour, and a muted word or glyph is a shade, never an opacity.
+4. **4.5:1 for words, 3:1 for large words (24px, or 18.66px bold), icons and glyphs** (WCAG 2.2 SC 1.4.3, 1.4.11), on the ground
+   the piece is really drawn on. A tint that carries words (a banner, a step bar, today's day) is a ground of its card's side, so
+   a dark fill holds its ondark ink on its 12% tint too.
+5. **Signals** have an onlight and an ondark shade (`--signal-ok-onlight`, `--signal-ok-ondark`, …): no one shade of a hue holds
+   4.5:1 on both. The ondark one is the ondark ink unless a palette gives its own. The icon and the words carry the meaning.
+
+**Dark mode** is the sides turned to `1` with their fills darkened, and no rule per piece:
+
+```css
+:root[data-mode="dark"] {
+  --surface-dark: 1; --card-1-dark: 1; --card-2-dark: 1; --card-4-dark: 1; --action-dark: 1;
+  --surface: #121212; --color-paper: #1e1e1e; --card-1-bg: #1e1e1e; --card-2-bg: #2a2a2a; --card-4-bg: #333333; --action-bg: #262626;
+}
+```
+
+`tests/ink.spec.js` holds the gallery to exactly that block: every story, every tone, 0 pieces short.
+
+Check your own theme where it is loaded. `inkGrounds()` walks every visible word, field value, icon and glyph inside a root and
+returns one row per piece, with the side its ground declares and the ink set its colour is:
+
+```ts
+import { inkGrounds } from '@usableapp/cardds';
+console.table(inkGrounds().filter((r) => !r.pass));   // a dev page
+
+// a Playwright test on your app (Playwright sends the function to the page)
+const short = (await page.evaluate(inkGrounds)).filter((r) => !r.pass).map((r) => r.problem);
+expect(short).toEqual([]);
+// '.t-caption.t-muted "since May" on .card.card--3 (light side): #575757 (--card-muted = --ink-onlight-muted) on #141414 (--card-bg) is 2.55:1, words need 4.5:1'
+```
+
+A side and an ink set that disagree with the ground (`light side` on a dark fill) say the ground declared the wrong side. It
+reports and changes nothing. It does not measure a piece on a picture (a `url()` ground; a gradient counts as decoration unless it
+is one colour), a disabled control, a hidden one, words drawn by CSS `content`, decoration colours (`--dot-a`, `--dot-b`, the
+highlights), or what lies under a positioned element that is not its ancestor (a scrim drawn by `::after`). cardds holds itself to
+the same function: `tests/ink.spec.js` renders every gallery story in every stock palette and in the dark mode above, as written
+and with every card turned to each tone 1–5, about 27,000 pieces a pass, in `npm run ci`.
+
+## Can the member see the card?
+
+A card is one boundary, and a boundary the member cannot see is no boundary (WCAG 2.2 SC 1.4.11, non-text contrast: 3:1 against what is
+next to it). A card's boundary is its fill against the ground it stands on, or its edge (`--card-border`, or a finish's line).
+In coloured mode the edge is `--on-surface-muted`, the ground's muted words, which a palette holds to AA on its surface; the wireframe's
+is its black line. A light card on a light ground cannot reach 3:1 by its fill (a tone-1 card in a tone-1 sheet is 1:1), so the edge
+carries it.
+
+Your theme decides the colours, so run the check on your theme. `cardGrounds()` builds a card of each tone (1–5) on each ground a card
+stands on (the screen, a sheet's body, a `paper` sheet's body) where your theme is loaded, reads what the browser draws and returns one
+row per pair:
+
+```ts
+import { cardGrounds } from '@usableapp/cardds';
+console.table(cardGrounds());                    // a dev page: ground · tone · fill · edge · pass · problem
+
+// a Playwright test on your app (Playwright sends the function to the page)
+const rows = await page.evaluate(cardGrounds);
+expect(rows.filter((r) => !r.pass).map((r) => r.problem)).toEqual([]);
+```
+
+A failing row names the tokens and the shortfall, for example
+`tone 1 card on the screen: fill 1:1 (--card-1-bg #ffffff on --surface #ffffff), edge 1:1 (--card-border); one of them needs 3:1 — the fill is short by 2, or give --card-border a colour of 3:1 on #ffffff`.
+It reports and changes nothing: which knob you move is your call. It runs in a browser on purpose: your theme's `var()` aliases,
+`[data-palette]` blocks, finish and `color-mix()` are resolved by the same engine that draws the screen. A stock palette is held to the
+same check in every finish (`tests/card-grounds.spec.js`).
+
 ## New palette
 
 Copy any block in `palette.css`, rename, retune:
 
 ```css
 [data-palette="mine"] {
-  --surface: …; --on-surface: …;
-  --card-1-bg: …; --card-1-ink: …;   /* + card-2, card-3 */
-  --accent: …;  --on-accent: …;
-  --action-bg: …; --action-ink: …;
+  --surface: …;
+  --ink-onlight: …; --ink-onlight-muted: …;   /* words and glyphs on a light ground */
+  --ink-ondark: …;  --ink-ondark-muted: …;    /* on a dark ground */
+  --card-1-bg: …;   /* + card-2 … card-5; a tone whose side is not the default's says so: --card-5-dark: 0; */
+  --accent: …;
+  --action-bg: …;
 }
 ```
 
@@ -979,7 +1078,7 @@ Four values, one attribute (`css/finish.css`; the header names each and its knob
 | `sticker` | a die-cut sticker: a white cut line, a short hard drop, a lone card leans (never one in a stack, a list or a feed), buttons with a bottom edge that press down | `--sticker-cut` (5px) · `--sticker-tilt` (0.8deg; `0deg` = straight) |
 | `ink` | a poster / comic print: a thick line in the surface's ink round every boundary and control, a hard offset in the same ink | `--ink-w` (2.5px) · `--ink-off` (5px) |
 
-Under every finish the wireframe's two borders step back (`--card-border`, `--action-border`; ink puts its own line there), a card in a closed stack's base stays flat, and the information inside a card stays flat — only a container or a control gets an edge. Colours are mixes of the roles, so a finish sits in any palette. The gallery's nav has a finish switch (key `f`); `Card · Finishes` shows the four side by side, `Home · Finish` a home under `print`.
+Under every finish the controls' wireframe border steps back (`--action-border`; ink puts its own line there) and the card keeps its edge (`--card-border`: lit's ring and sticker's cut do not reach 3:1 on a light ground, see [Can the member see the card?](#can-the-member-see-the-card)), a card in a closed stack's base stays flat, and the information inside a card stays flat — only a container or a control gets an edge. Colours are mixes of the roles, so a finish sits in any palette. The gallery's nav has a finish switch (key `f`); `Card · Finishes` shows the four side by side, `Home · Finish` a home under `print`.
 
 ## Scale: everything is rem
 

package/bin/cardds.mjs

@@ -84,7 +84,7 @@ import them, never copy their markup: the behaviour lives in the component. Gall
 
 // 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; }
+.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 (README 13) */
-.chip--muted { color: var(--chip-muted-ink, var(--card-muted)); }
-/* dark-slot inversion lives in card.css (.card--3 :is(...)) */
+.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 */
@@ -230,7 +230,7 @@
   text-align: left;
 }
 /* muted: the value is still the default (README 13) */
-.dropdown--muted .dropdown__btn { color: var(--dropdown-muted-ink, var(--card-muted)); }
+.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 */