@usableapp/cardds 0.7.94 → 0.7.96

package/dist/cardds.css

@@ -144,9 +144,6 @@
   --motion-quick: 0.2s;  /* a small state flip that isn't a press: a chevron turning, a popover/banner opening */
   --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
   --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
-  --dim: 0.7; /* secondary words dimmed on a ground whose muted ink does not fit (the dark card --3, a drawer, a tile's sub line): ONE share for all */
-  --rest: 0.6;  /* an unpicked choice at rest: .day, .segment__item, .float-bar__item */
-  --faint: 0.3; /* further still: rails, far dots, unselected picker items */
   --motion-press: 0.12s; /* a control giving under the finger and springing back (actions.css PRESS) */
   --press-scale: 0.96;   /* how far a finger-sized control gives — a share of its size */
   --press-dim: 0.6;      /* how far a card-wide one (a row, a summary line, a card) fades under the finger */
@@ -215,40 +212,45 @@
      value. That is what the fallbacks are for — a private mix (--_*) that
      reads an unset base is invalid, so var(--_x, #grey) lands on the grey.
      Set, the roles derive: tone 2 = the brand washed into the surface, the
-     muted inks = the ink washed into their ground. A role set directly
+     muted inks = the ink washed into its ground. A role set directly
      (a palette, or a project's theme.css) always wins over its derivation.
      ============================================================ */
-  --_muted-on-surface: color-mix(in srgb, var(--color-ink) 66%, var(--color-surface, #f2f2f0));
-  --_muted-on-paper: color-mix(in srgb, var(--color-ink) 66%, var(--color-paper, #ffffff));
   --_tone-2: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface, #f2f2f0));
-  --_muted-on-tone-2: color-mix(in srgb, var(--color-ink, #141414) 72%, var(--_tone-2));
-  --_muted-on-brand: color-mix(in srgb, var(--color-on-brand) 70%, var(--color-brand)); /* the tone-3 card's secondary words: on-brand faded into brand — was opacity 0.7, which no theme could set (timebank #132, 2026-09-22) */
+  --_onlight-muted: color-mix(in srgb, var(--color-ink) 70%, var(--_tone-2));
+  --_ondark-muted: color-mix(in srgb, var(--color-on-brand) 70%, var(--color-brand));
+
+  /* INK: TWO SETS, ONLIGHT AND ONDARK (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"). Words and glyphs alike (icons, marks, dots, a check, a knob). Each set holds its
+     ink and its muted shade to 4.5:1 on every ground of its side. README "Ink follows its ground". */
+  --ink-onlight: var(--color-ink, #141414);
+  --ink-onlight-muted: var(--_onlight-muted, #575757);   /* 4.6:1 on the water note and 4.9 on tone 4's grey, the darkest light grounds */
+  --ink-ondark: var(--color-on-brand, #ffffff);
+  --ink-ondark-muted: var(--_ondark-muted, #a8a8a8);     /* 4.6:1 on tone 5's grey, the lightest dark ground */
+
+  /* SIDES: every ground says whether it is dark (1) or light (0); nothing else. Its words and glyphs follow from the side
+     (the surface list below). Dark mode is these switches turned to 1 with darker fills, and no rule per piece. */
+  --surface-dark: 0;
+  --card-1-dark: 0;  --card-2-dark: 0;  --card-3-dark: 1;  --card-4-dark: 0;  --card-5-dark: 1;
+  --accent-dark: 1;   /* the brand fill: a primary button, a picked chip, a picked day */
+  --action-dark: 0;   /* the paper fill of neutral controls: a button, a chip, a field, a plain tile */
+  --neg-dark: 1;      /* a falling Delta's fill */
 
   /* app background ("earth-toned surface or shiny color, up to the app") */
   --surface: var(--color-surface, #f2f2f0);
-  --on-surface: var(--color-ink, #141414);
-  --on-surface-muted: var(--_muted-on-surface, #6b6b6b);
 
-  /* card boundaries — 3 slots so stacked/adjacent cards can differ */
-  --card-1-bg: var(--color-paper, #ffffff);  --card-1-ink: var(--color-ink, #141414);
-  --card-2-bg: var(--_tone-2, #e6e6e3);  --card-2-ink: var(--color-ink, #141414);
-  --card-3-bg: var(--color-brand, #141414);  --card-3-ink: var(--color-on-brand, #ffffff);
+  /* card boundaries — five tones; each one's words follow its side */
+  --card-1-bg: var(--color-paper, #ffffff);
+  --card-2-bg: var(--_tone-2, #e6e6e3);
+  --card-3-bg: var(--color-brand, #141414);
   /* tones 4 · 5 (Lh 2026-09-25): more card colours for a palette that has them — the wireframe keeps them grey */
-  --card-4-bg: #d4d4d0;  --card-4-ink: var(--color-ink, #141414);  --card-4-muted: #555555;
-  --card-5-bg: #3d3d3d;  --card-5-ink: #ffffff;                    --card-5-muted: #c4c4c4;
+  --card-4-bg: #d4d4d0;
+  --card-5-bg: #3d3d3d;
 
-  --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
-  --card-muted: var(--_muted-on-paper, #6b6b6b);       /* secondary text inside cards (the default, tone-1 card) */
-  --card-3-muted: var(--_muted-on-brand, #b9b9b9);      /* the same text on the tone-3 card — a real colour, like the two above: a theme whose brand is not near-black sets it to reach its contrast (the wireframe's #b9b9b9 = white at 0.7 on #141414, what the opacity gave) */
-  --card-2-muted: var(--_muted-on-tone-2, #5f5f5f);     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
-                                  a palette whose tone-2 ground is strong
-                                  sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
+  --card-border: #141414;      /* wireframe: visible outline; coloured mode: --on-surface-muted (palette.css). Its edge, or the fill, holds 3:1 on the ground: cardGrounds() */
 
   /* actions */
   --accent: var(--color-brand, #141414);           /* primary CTA fill */
-  --on-accent: var(--color-on-brand, #ffffff);
   --action-bg: var(--color-paper, #ffffff);        /* neutral buttons/chips/inputs */
-  --action-ink: var(--color-ink, #141414);
   --action-border: #141414;
 
   /* signals (chip dots, deltas) */
@@ -259,12 +261,15 @@
   /* THE SIGNAL SET (Lh 2026-09-25; the standard, Lh 2026-10-02): ok (green) · warn (yellow) · error (red) · info (blue) — the same four
      meanings in every project, wireframe included; a theme may retune the shade, never the meaning. Each is dark enough for words and
      edges and comes with an icon and words, never the colour alone. `--signal-*-soft` (below :root) = its light ground. */
-  --signal-warn: #8a6d00;
-  --signal-ok: #2e7d32;
-  --signal-info: #2f5f9e;
+  --signal-warn-onlight: #705903;  /* each onlight shade 4.5:1 on every light ground, tone 4's grey the darkest (#7f6400 was 3.8 there) */
+  --signal-ok-onlight: #27692a;
+  --signal-info-onlight: #2e5c98;
   /* highlights (Lh 2026-09-25): four atmosphere colours a palette may set for decoration — a count, a mark, a chart dot; the wireframe keeps them grey */
   --highlight-1: #3d3d3d;  --highlight-2: #8a8a8a;  --highlight-3: #5f5f5f;  --highlight-4: #b0b0b0;
-  --signal-error: #c62828;  /* something went wrong — a field's edge, the words that say what */
+  --signal-error-onlight: #af2525;  /* something went wrong — a field's edge, the words that say what */
+  /* on a dark ground no shade of one hue holds 4.5:1 on every palette's dark fill and stays itself: a signal there is the ondark ink,
+     and the icon and the words carry the meaning. A palette may give its own (orchard) */
+  --signal-ok-ondark: var(--ink-ondark);  --signal-warn-ondark: var(--ink-ondark);  --signal-error-ondark: var(--ink-ondark);  --signal-info-ondark: var(--ink-ondark);
 
   /* derived tints — read the element's own ink, so they work on any slot */
   --outline: var(--action-border);                                 /* control edges (palette.css softens) */
@@ -293,14 +298,43 @@
    bars take over the page when the app runs edge to edge (viewport-fit=cover: Android Chrome, an iPhone home-screen app).
    PUBLISHED: backgrounds still run to the edge; what the member reads or taps stands clear of them. 0 without cover.
    --_safe-b-open = the bottom inset the keyboard does NOT already cover (a keyboard up hides the gesture bar). */
-/* a signal's SOFT ground: the signal washed 14% into the surface (tone 2's formula) — what a Snackbar stands on. Re-derived where a
-   palette is set, so a palette's own signal shade gives its own soft */
-:root, [data-palette] {
-  --signal-ok-soft: color-mix(in srgb, var(--signal-ok) 14%, var(--surface));
-  --signal-warn-soft: color-mix(in srgb, var(--signal-warn) 14%, var(--surface));
-  --signal-error-soft: color-mix(in srgb, var(--signal-error) 14%, var(--surface));
-  --signal-info-soft: color-mix(in srgb, var(--signal-info) 14%, var(--surface));
-}
+/* THE ROLES OF THE SCREEN AND OF THE PAPER CONTROLS, from their sides. Re-derived wherever a palette or a mode is set, since one may
+   sit on <body>: a custom property is resolved where it is declared. A signal's SOFT ground (what a Snackbar stands on) is its
+   onlight shade washed 14% into the surface (tone 2's formula) */
+:root, [data-palette], [data-mode] {
+  --on-surface: color-mix(in srgb, var(--ink-ondark) calc(var(--surface-dark) * 100%), var(--ink-onlight));
+  --on-surface-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--surface-dark) * 100%), var(--ink-onlight-muted));
+  --action-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--action-dark) * 100%), var(--ink-onlight));
+  --action-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--action-dark) * 100%), var(--ink-onlight-muted));
+  /* the brand as a glyph on the paper (a typed PIN digit, a map's place mark): the brand on a light paper, ondark on a dark one. It stays
+     the paper's on a brand card, where --accent turns to the card's ink */
+  --action-accent: color-mix(in srgb, var(--ink-ondark) calc(var(--action-dark) * 100%), var(--accent));
+  --signal-ok-soft: color-mix(in srgb, var(--signal-ok-onlight) 14%, var(--surface));
+  --signal-warn-soft: color-mix(in srgb, var(--signal-warn-onlight) 14%, var(--surface));
+  --signal-error-soft: color-mix(in srgb, var(--signal-error-onlight) 14%, var(--surface));
+  --signal-info-soft: color-mix(in srgb, var(--signal-info-onlight) 14%, var(--surface));
+}
+/* INK FOLLOWS ITS GROUND (Lh 2026-10-18: "When the ground is light, use onlight; when the ground is dark, use ondark"). A surface
+   says only which side it is, `--dark: 0` (light) or `1` (dark), from its fill's side token above; it does so in its own file
+   (card.css, media.css…) and is named in this list, which gives it the inks every piece on it reads: --card-ink (words, icons,
+   marks, dots: currentColor), --card-muted (secondary words), the four signals, --on-accent (the ink on the accent fill, whose
+   side is --accent-dark) and --accent-ink (the brand as a glyph). A piece with no fill of its own reads only these, so a dark
+   surface turns everything on it to ondark with no rule per piece. A piece with no fill that stands in for a surface (a stat
+   tile) takes its ground's side: `--dark: inherit`. inkGrounds() measures it; README "Ink follows its ground" */
+:where(body, [data-palette], [data-mode], .card, .tile, .modal__drawer, .postcard__front, .postcard__back, .sticky, .post-paper,
+  .float-bar__pill, .snackbar__body, .delta, .track, .tile-badge, .avatar, .bubble__body, .map__hint, .sheet--paper > .sheet__body,
+  .postcard__band, .track__step, .toggle, .chip) {
+  --card-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--ink-onlight));
+  --card-muted: color-mix(in srgb, var(--ink-ondark-muted) calc(var(--dark) * 100%), var(--ink-onlight-muted));
+  --on-accent: color-mix(in srgb, var(--ink-ondark) calc(var(--accent-dark) * 100%), var(--ink-onlight));
+  --accent-ink: color-mix(in srgb, var(--ink-ondark) calc(var(--dark) * 100%), var(--accent));
+  --signal-ok: color-mix(in srgb, var(--signal-ok-ondark) calc(var(--dark) * 100%), var(--signal-ok-onlight));
+  --signal-warn: color-mix(in srgb, var(--signal-warn-ondark) calc(var(--dark) * 100%), var(--signal-warn-onlight));
+  --signal-error: color-mix(in srgb, var(--signal-error-ondark) calc(var(--dark) * 100%), var(--signal-error-onlight));
+  --signal-info: color-mix(in srgb, var(--signal-info-ondark) calc(var(--dark) * 100%), var(--signal-info-onlight));
+}
+:where(body, [data-palette], [data-mode]) { --dark: var(--surface-dark); }
+
 :root { --safe-top: calc(env(safe-area-inset-top, 0px) + var(--vv-top, 0px)); /* + the phone's pan while a keyboard is up (cardds.js) */ --safe-bottom: env(safe-area-inset-bottom, 0px); }
 * { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
 
@@ -322,157 +356,139 @@
    Apply with <html data-palette="clay"> (or <body>).
    No attribute = wireframe grayscale from tokens.css.
    Each palette overrides role tokens only — components never change.
+   A palette sets its grounds, its two ink sets (onlight, ondark; README "Ink follows its ground") and the side of any ground
+   that is not the default's (tokens.css: tones 1, 2, 4 and the paper light; tone 3, tone 5 and the brand dark). Each ink set
+   holds 4.5:1 on every ground of its side; a tone with words on its 12% tint (a banner, a step bar, today) holds them there too.
    ============================================================ */
 
 /* ---- CLAY — earth-toned: cream surface, terracotta / mustard / ink cards ---- */
 [data-palette="clay"] {
   --surface: #ece5d8;
-  --on-surface: #191713;
-  --on-surface-muted: #6f675a;
-
-  --card-1-bg: #e8b647;  --card-1-ink: #191713;  /* mustard hero */
-  --card-2-bg: #e05c3a;  --card-2-ink: #191713;  /* terracotta */
-  --card-3-bg: #1c1a17;  --card-3-ink: #f4efe4;  /* ink */
+  --ink-onlight: #191713;  --ink-onlight-muted: #2a2723;  /* the terracotta is a middle ground: no muted shade a step lighter holds 4.5:1 on it (4.6) */
+  --ink-ondark: #f4efe4;   --ink-ondark-muted: #aeaaa1;   /* 4.6:1 on tone 5's grey */
 
-  --card-border: transparent;
-  --card-muted: #45412f;       /* 5.5:1 on the mustard card — AA for captions and metas (#55503f was 4.3:1) */
-  --card-2-muted: var(--card-2-ink); /* terracotta holds 5:1 for its ink alone; nothing lighter passes AA, so tone 2 has no muted */
+  --card-1-bg: #e8b647;  /* mustard hero */
+  --card-2-bg: #eb6644;  /* terracotta, a step lighter: the ink 5.5:1, 4.5 on its own tint (#e05c3a was 4.9 and 4.1) */
+  --card-3-bg: #1c1a17;  /* ink */
 
-  --accent: #1c1a17;     --on-accent: #f4efe4;
-  --action-bg: #f7f3e9;  --action-ink: #191713;  --action-border: transparent;
+  --accent: #1c1a17;
+  --action-bg: #f7f3e9;  --action-border: transparent;
 
   --pos: #3e7d4f;  --neg: #c23c1d;
-  --dot-a: #e05c3a;  --dot-b: #6f6be0;
+  --dot-a: #eb6644;  --dot-b: #6f6be0;
+  /* the signals, deep enough for words on the terracotta (4.5:1) and so on every lighter ground; nearly the ink, the hue stays */
+  --signal-ok-onlight: #1b2c18;  --signal-warn-onlight: #2f280d;  --signal-error-onlight: #471a17;  --signal-info-onlight: #1d2938;
 }
 
 /* ---- ROAST — coffee: warm cream surface, caramel accent ---- */
 [data-palette="roast"] {
   --surface: #f6f1e7;
-  --on-surface: #2b211a;
-  --on-surface-muted: #8c7f70;
+  --ink-onlight: #2b211a;  --ink-onlight-muted: #5e554d;  /* 4.6:1 on the water note, the darkest light ground */
+  --ink-ondark: #fdf9f1;   --ink-ondark-muted: #ecdfcb;   /* 4.6:1 on the caramel */
 
-  --card-1-bg: #ffffff;  --card-1-ink: #2b211a;
-  --card-2-bg: #e9dcc6;  --card-2-ink: #2b211a;
-  --card-3-bg: #b97e3c;  --card-3-ink: #fdf9f1;
+  --card-1-bg: #ffffff;
+  --card-2-bg: #e9dcc6;
+  --card-3-bg: #8c5402;  /* caramel, on its own hue as far as the light ink holds 4.5:1 on it and on its tint (#b97e3c held it at 3.3) */
 
-  --card-border: transparent;
-  --card-muted: #8c7f70;
-
-  --accent: #b97e3c;     --on-accent: #fdf9f1;
-  --action-bg: #ffffff;  --action-ink: #2b211a;  --action-border: transparent;
+  --accent: #8c5402;
+  --action-bg: #ffffff;  --action-border: transparent;
 
   --pos: #3e7d4f;  --neg: #bf4028;
-  --dot-a: #b97e3c;  --dot-b: #2b211a;
+  --dot-a: #8c5402;  --dot-b: #2b211a;
 }
 
 /* ---- HYDRO — cool shiny blue: airy surface, saturated blue CTA ---- */
 [data-palette="hydro"] {
   --surface: #e9f0fb;
-  --on-surface: #17203a;
-  --on-surface-muted: #64729a;
-
-  --card-1-bg: #ffffff;  --card-1-ink: #17203a;
-  --card-2-bg: #cddcf7;  --card-2-ink: #17203a;
-  --card-3-bg: #3d63e0;  --card-3-ink: #f2f6ff;
+  --ink-onlight: #17203a;  --ink-onlight-muted: #4e566c;  /* 4.6:1 on the water note, the darkest light ground */
+  --ink-ondark: #ffffff;   --ink-ondark-muted: #e0e6f9;   /* 4.6:1 on the blue */
 
-  --card-border: transparent;
-  --card-muted: #64729a;
+  --card-1-bg: #ffffff;
+  --card-2-bg: #cddcf7;
+  --card-3-bg: #365bd7;  /* white 5.7:1, 4.5 on its tint (#3d63e0 was 5.2 and 4.1) */
 
-  --accent: #3d63e0;     --on-accent: #f2f6ff;
-  --action-bg: #ffffff;  --action-ink: #17203a;  --action-border: transparent;
+  --accent: #365bd7;
+  --action-bg: #ffffff;  --action-border: transparent;
 
   --pos: #2e8f52;  --neg: #d13b1a;
-  --dot-a: #3d63e0;  --dot-b: #eec85a;
+  --dot-a: #365bd7;  --dot-b: #eec85a;
 }
 
-/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand; every
-   tone's ink + muted is a deep shade of ITS OWN ground, so lines (currentColor mixes: --hairline, --outline, field
-   edges) come out as a darker tint of the ground under them — never a grey on a warm card. Four highlights for the
-   atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
+/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand. Four highlights for
+   the atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
 [data-palette="orchard"] {
   --surface: #f4efe6;          /* linen */
-  --on-surface: #2a241c;       /* umber */
-  --on-surface-muted: #6e6353;
+  --ink-onlight: #2a241c;  --ink-onlight-muted: #565148;  /* umber; muted 4.6:1 on the clay tone */
+  --ink-ondark: #f6f1e6;   --ink-ondark-muted: #d7d6c6;   /* linen; muted 4.6:1 on the moss */
 
-  --card-1-bg: #fbf8f2;  --card-1-ink: #2a241c;                          /* bone paper — sheets */
-  --card-2-bg: #e6d8bf;  --card-2-ink: #33291c;                          /* sand */
-  --card-3-bg: #5c6b47;  --card-3-ink: #f6f1e6;  --card-3-muted: #d3d8c4; /* moss — the brand */
-  --card-4-bg: #d3d9c4;  --card-4-ink: #2b3322;  --card-4-muted: #515c42; /* sage mist */
-  --card-5-bg: #dcc2a6;  --card-5-ink: #3a2a1c;  --card-5-muted: #6b503a; /* clay */
+  --card-1-bg: #fbf8f2;  /* bone paper — sheets */
+  --card-2-bg: #e6d8bf;  /* sand */
+  --card-3-bg: #52613d;  /* moss — the brand: its ink 5.9:1, 4.5 on its tint (#5c6b47 was 5.1 and 4.0) */
+  --card-4-bg: #d3d9c4;  /* sage mist */
+  --card-5-bg: #dcc2a6;  --card-5-dark: 0;  /* clay: a light tone here */
 
-  --card-border: transparent;
-  --card-muted: #736754;
-  --card-2-muted: #66573f;
-
-  --accent: #5c6b47;     --on-accent: #f6f1e6;
-  --action-bg: #fbf8f2;  --action-ink: #2a241c;  --action-border: transparent;
+  --accent: #52613d;
+  --action-bg: #fbf8f2;  --action-border: transparent;
 
   /* highlights — decoration and atmosphere, a small dose: counts, marks, chart dots, a badge on a tile */
-  --highlight-1: #d93a1f;  /* maple red */
+  --highlight-1: #d03114;  /* maple red — the linen ink 4.5:1 on it (#d93a1f was 4.1) */
   --highlight-2: #f5c518;  /* bright yellow */
   --highlight-3: #3a9fe0;  /* sky */
-  --highlight-4: #e0457b;  /* fuchsia */
+  --highlight-4: #ca2e69;  /* fuchsia — the linen ink 4.5:1 on it (#e0457b was 3.5) */
   --dot-a: var(--highlight-1);  --dot-b: var(--highlight-3);
 
   /* signals from Sweet Salmon #dd9787 — words and edges, always with an icon */
-  --pos: #6f8f5a;  --neg: #c4694f;
-  --signal-error: #b5503b;  /* salmon, deepened */
-  --signal-warn: #a0721f;   /* ochre */
-  --signal-ok: #4f7f4a;     /* leaf */
-  --signal-info: #4d6f96;   /* slate */
-}
-/* on the dark moss card the signals turn to their light shades — the same hues, readable on the ground */
-/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a knob) */
-[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, #fff8f0); }
-[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); color: var(--tile-badge-ink, #2a241c); }
-[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 40%, transparent)); }
-/* fields are WHITE boxes on every ground (Lh 2026-09-25) — the words typed in them read dark, even on the moss card */
-[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: #2a241c; }
-[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: #2a241c; }
+  --pos: #6f8f5a;  --neg: #ad553b;  /* a falling delta's linen words 4.5:1 (#c4694f was 3.4) */
+  --signal-error-onlight: #82402f;  --signal-warn-onlight: #6b4e1b;  --signal-ok-onlight: #3e5a37;  --signal-info-onlight: #40556c;  /* 4.5:1 on the clay tone */
+  --signal-error-ondark: #f9ccc0;  --signal-warn-ondark: #f2d28b;  --signal-ok-ondark: #cfe6b8;  --signal-info-ondark: #c5d7ef;  /* the same hues, 4.5:1 on the moss */
+}
+/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a
+   knob). Each fill says its side; the words on it follow */
+[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, var(--ink-ondark)); }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; }
+[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 15%, transparent)); }
+/* fields are WHITE boxes on every ground (Lh 2026-09-25): a light ground, so the words typed in them are onlight, even on the moss card */
+[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
+[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: var(--ink-onlight); }
 /* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
-[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, #2a241c); }
-[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); color: var(--avatar-ink, #ffffff); }
+[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
+[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); --dark: 1; }
 [data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
-[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); }
-[data-palette="orchard"] .toggle:checked::after { background: #ffffff; }
-[data-palette="orchard"] .card--3 { --signal-error: #f4b7a6; --signal-warn: #f1d18a; --signal-ok: #cfe6b8; --signal-info: #bcd0ec; }
+[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); --accent-dark: 0; } /* sky is a light ground: its knob is onlight */
 
 /* ---- VERS — Lh's own-palette pick (2026-09-25): white surface, champagne paper, sage brand; earth tones for tones 2·4·5 ---- */
 [data-palette="vers"] {
   --surface: #ffffff;
-  --on-surface: #1f1b16;
-  --on-surface-muted: #6b6358;
-
-  --card-1-bg: #f6e7cb;  --card-1-ink: #1f1b16;  /* paper — Champagne */
-  --card-2-bg: #e3cfa6;  --card-2-ink: #1f1b16;  /* sand */
-  --card-3-bg: #678d58;  --card-3-ink: #ffffff;  /* brand — Sage */
-  --card-4-bg: #c9d6b0;  --card-4-ink: #1f1b16;  --card-4-muted: #4a5438;  /* lichen */
-  --card-5-bg: #d4bf9c;  --card-5-ink: #1f1b16;  --card-5-muted: #5e4a36;  /* wheat — bark was too dark */
-
-  --card-border: transparent;
-  --card-muted: #6b5f4c;
-  --card-2-muted: #5c4f3a;
-  --card-3-muted: #dfe8d6;
-
-  --accent: #678d58;     --on-accent: #ffffff;
-  --action-bg: #f6e7cb;  --action-ink: #1f1b16;  --action-border: transparent;
-
-  /* signals from Sweet Salmon #dd9787, deepened to read on white/champagne */
-  --pos: #7fa86f;  --neg: #dd9787;
-  --signal-error: #b5503b;  /* salmon */
-  --signal-warn: #a5782a;   /* ochre */
-  --signal-ok: #4f7f4a;     /* leaf */
-  --signal-info: #4d6f96;   /* slate */
+  --ink-onlight: #1f1b16;  --ink-onlight-muted: #534f4c;  /* 4.5:1 on the wheat */
+  --ink-ondark: #ffffff;   --ink-ondark-muted: #dee5dc;   /* 4.6:1 on the sage */
+
+  --card-1-bg: #f6e7cb;  /* paper — Champagne */
+  --card-2-bg: #e3cfa6;  /* sand */
+  --card-3-bg: #496d3a;  /* brand — Sage, on its own hue as far as white holds 4.5:1 on it and on its tint (#678d58 held it at 3.8) */
+  --card-4-bg: #c9d6b0;  /* lichen */
+  --card-5-bg: #d4bf9c;  --card-5-dark: 0;  /* wheat — a light tone here */
+
+  --accent: #496d3a;
+  --action-bg: #f6e7cb;  --action-border: transparent;
+
+  /* signals from Sweet Salmon #dd9787, deepened to read on every light ground (4.5:1 on the wheat) */
+  --pos: #7fa86f;  --neg: #a76557;  /* the salmon deepened as far as a falling delta's white words hold 4.5:1 (#dd9787 was 2.4) */
+  --signal-error-onlight: #803c2d;  --signal-warn-onlight: #654b1e;  --signal-ok-onlight: #3b5734;  --signal-info-onlight: #3c5169;
   --dot-a: #dd9787;  --dot-b: #b08a5a;
 }
 
-/* Colored palettes trade wireframe outlines for soft elevation. */
+/* Colored palettes add a soft elevation under the card's edge. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
 /* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
    --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
    "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
-   edge (forms.css); and the two wireframe borders step back, as in every stock palette. */
-[data-palette] { --card-border: transparent; --action-border: transparent; }
+   edge (forms.css); and the controls' wireframe border steps back, as in every stock palette.
+   THE CARD KEEPS AN EDGE (Lh 2026-10-18, timebank's help sheet: white cards on the white sheet, "no different from
+   the background at all"). A card is one boundary, and WCAG 2.2 SC 1.4.11 asks 3:1 for it against what it stands
+   on. Light cards on a light ground cannot reach 3:1 by fill (a tone-1 card in a tone-1 sheet is 1:1), so the
+   edge carries it: the muted ink of the ground, which every palette already holds to AA on its surface.
+   `cardGrounds()` measures each tone on each ground (tests/card-grounds.spec.js). */
+[data-palette] { --card-border: var(--on-surface-muted); --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }
 
@@ -506,7 +522,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;
 }
@@ -582,7 +598,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
@@ -619,9 +635,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>
@@ -690,7 +704,6 @@ 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; }
 
 /* ---- css/card.css — card boundary + list variants ---- */
 /* ============================================================
@@ -701,7 +714,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 .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);
@@ -729,19 +742,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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
@@ -1012,7 +1019,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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) ----
@@ -1059,9 +1065,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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>
@@ -1820,12 +1827,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    the default spacing), the body's own top padding, and only when the sheet is paper.
    A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
    inset: the stack's own gap under the head is the card's colour, so the row still needs this white.
-   The ink falls back to the wireframe word colour: an unset --color-ink would otherwise
-   inherit a dark card's light ink, and the words would vanish on the white. */
+   The paper is a surface of the plain card's side: on a dark sheet its words still turn to onlight. */
 .sheet--paper > .sheet__body {
   --card-bg: var(--color-paper, #fff);
-  --card-ink: var(--color-ink, #141414);
-  --card-muted: var(--_muted-on-paper, #555555);
+  --dark: var(--card-1-dark);
   background: var(--card-bg);
   color: var(--card-ink);
   padding-top: var(--sp-6);
@@ -2006,7 +2011,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   bottom: var(--sp-2);
   padding: var(--sp-0) var(--sp-2);
   border-radius: var(--map-credit-radius, var(--r-chip));
-  background: var(--map-credit-bg, color-mix(in srgb, var(--surface) 80%, transparent));
+  background: var(--map-credit-bg, var(--surface)); /* solid: at 80% over a map the muted words fell under 4.5:1 (clay, 3.9) */
   color: var(--map-credit-ink, var(--on-surface-muted));
   font: var(--map-credit-font, var(--type-caption));
   pointer-events: none;
@@ -2022,7 +2027,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding: var(--sp-2) var(--sp-4);
   border-radius: var(--map-hint-radius, var(--r-chip));
   background: var(--map-hint-bg, var(--card-3-bg));
-  color: var(--map-hint-ink, var(--card-3-ink));
+  --dark: var(--card-3-dark);
+  color: var(--map-hint-ink, var(--card-ink));
   font: var(--map-hint-font, var(--type-label));
   text-align: center;
   box-shadow: var(--map-hint-shadow, var(--shadow-float));
@@ -2071,9 +2077,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   width: var(--map-pick-size, var(--sp-6));
   height: var(--map-pick-size, var(--sp-6));
   border-radius: 50%;
-  border: var(--border-w) solid var(--map-pick-border, var(--accent));
+  border: var(--border-w) solid var(--map-pick-border, var(--action-accent));
   background: var(--map-pick-bg, var(--surface));
-  color: var(--map-pick-mark-ink, var(--accent));
+  color: var(--map-pick-mark-ink, var(--action-accent));
   box-shadow: var(--map-pick-shadow, var(--shadow-float));
   pointer-events: none;
 }
@@ -2110,7 +2116,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: grid;
   place-items: center;
   font: var(--sheet-stage-foot-font, var(--type-caption));
-  color: var(--sheet-stage-foot-ink, var(--card-3-ink));
+  /* words on the scrim: white on a strip of the scrim over it. The scrim alone is half black, so over a white page it is #808080, where white
+     is 3.9:1; doubled, #404040, 10:1. It read --card-3-ink, a brand's light ink, on a black scrim */
+  background: var(--sheet-stage-foot-bg, var(--scrim));
+  color: var(--sheet-stage-foot-ink, #ffffff);
   z-index: 2;
 }
 
@@ -2153,6 +2162,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
+  --card-muted: var(--card-ink); /* a tint of the ink: its secondary words are the full ink (no lighter shade holds 4.5:1 there) */
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
 }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -2163,7 +2173,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
-.sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__summary { color: var(--sheet-step-summary-ink, var(--card-muted)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
 .sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */
@@ -2488,7 +2498,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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 {
@@ -2498,13 +2508,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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 */
@@ -2700,7 +2713,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
      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));
@@ -2719,10 +2733,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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 */
@@ -2752,7 +2765,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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; }
@@ -2764,7 +2777,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- 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);
@@ -2776,7 +2789,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .segment__item[aria-selected="true"] {
   background: var(--accent);
   color: var(--on-accent);
-  opacity: 1;
 }
 
 /* ---- bottom CTA pack: the screen's bottom (Screen `bottom`) ----
@@ -2847,10 +2859,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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
@@ -2900,11 +2911,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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) */
 
@@ -3017,25 +3027,21 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .track {
   --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
   --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
-  --_bg: var(--card-3-bg);
-  --_ink: var(--card-3-ink);
-  /* the track lays down its own dark ground, so like the dark card slot it
-     re-points the accent to its own ink (README rule 10). Without this, any
-     palette where --accent equals --card-3-bg — field, hydro, and the
-     wireframe default — paints done steps invisibly on the track. */
-  --accent: var(--_ink);
-  --on-accent: var(--_bg);
+  /* the track lays down the accent fill of where it stands (the brand on a light card, the card's ink on the brand card), so it is a
+     surface of that fill's side; its steps re-point the accent to its ink, as the brand card slot does (README rule 10) */
+  --dark: var(--accent-dark);
   list-style: none;
   margin: 0;
   padding: var(--track-pad, var(--_pad));
   display: flex;
   align-items: center;
   border-radius: var(--track-radius, var(--r-chip));
-  background: var(--_bg);
-  color: var(--_ink);
+  background: var(--accent);
+  color: var(--card-ink);
 }
-.card--3 .track { --_bg: var(--card-3-ink); --_ink: var(--card-3-bg); }
 .track__step {
+  --accent: var(--card-ink);
+  --accent-dark: calc(1 - var(--dark));
   flex: 1;
   display: flex;
   align-items: center;
@@ -3047,7 +3053,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   content: "";
   flex: 1;
   height: var(--sp-2);
-  background: var(--ink-rail); /* the track's own ink at 30% — identical to color-mix(in srgb, var(--_ink) 30%, transparent): --ink-rail already reads currentColor, and .track sets color to --_ink */
+  background: var(--ink-rail); /* the track's own ink at 30%: --ink-rail reads currentColor */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
@@ -3059,8 +3065,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
   background: var(--ink-rail);
-  color: var(--_ink);
+  color: var(--card-ink);
 }
+.track__step > .track__dot { background: var(--ink-tint); } /* a number is words: on the 30% rail it fell under 4.5:1 on a mid-dark track; the 12% tint is what every tone holds its ink on */
 .track__step > .track__dot { /* a number in the round (TrackStep num) */
   display: grid; place-items: center; box-sizing: border-box;
   font: var(--track-dot-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
@@ -3157,10 +3164,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
-  opacity: var(--faint);
+  --_rest: var(--picker-rest-ink, var(--card-muted)); /* the values either side: the ground's muted words (they faded to 0.3, 1.8:1) */
+  color: var(--_rest);
   text-align: center;
 }
-.picker__item[aria-selected="true"] { opacity: 1; }
+.picker__item[aria-selected="true"] { color: var(--card-ink); }
 /* centre rules either side of the selected value */
 .picker::before,
 .picker::after {
@@ -3176,10 +3184,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
-  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); } /* opacity: var(--faint) already set above — the animation alone is new here */
+  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); }
   @keyframes picker-focus {
-    0%, 100% { opacity: var(--faint); }
-    45%, 55% { opacity: 1; }
+    0%, 100% { color: var(--_rest); }
+    45%, 55% { color: var(--card-ink); }
   }
 }
 
@@ -3266,7 +3274,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: grid;
   place-items: center;
   background: var(--avatar-bg, var(--card-2-bg));
-  color: var(--avatar-ink, var(--card-2-ink));
+  --dark: var(--card-2-dark);
+  color: var(--avatar-ink, var(--card-ink));
   font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
@@ -3280,10 +3289,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
-.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
+.avatar--outline { background: transparent; --dark: inherit; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
+.avatar--add { background: transparent; --dark: inherit; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
 /* accent avatar: the "+7" tail, the selected person */
-.avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
+.avatar--on { background: var(--avatar-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--avatar-on-ink, var(--card-ink)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
 .avatar--halo::before {
   content: "";
@@ -3381,6 +3390,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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;
 }
@@ -3392,12 +3403,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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
@@ -3419,7 +3429,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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 {
@@ -3453,13 +3463,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
                                  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 ----
@@ -3479,8 +3489,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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; }
 
@@ -3536,7 +3548,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
     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
@@ -3706,7 +3718,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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); }
@@ -3725,7 +3736,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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));
@@ -3770,7 +3780,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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
@@ -3799,7 +3808,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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;
 }
@@ -3810,10 +3820,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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> */
@@ -3856,7 +3865,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- 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 ----
@@ -3877,7 +3885,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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>
@@ -3908,8 +3915,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    only its content box, which stops one fold short of the right and bottom edges; the paper's negative margins run
    back out to the full size. The paper takes the tone by `inherit`. */
 .sticky {
-  color: var(--sticky-ink, #141414);
-  --_muted: color-mix(in srgb, currentColor 62%, transparent); /* muted words: the ink sunk into the paper (currentColor is read where it is used: there it is still the note's ink) */
+  --dark: var(--sticky-dark, 0); /* a note is pastel paper: a light ground in any palette and any mode, so its words are onlight */
+  color: var(--sticky-ink, var(--card-ink));
+  --_muted: var(--card-muted);
   padding-inline-end: var(--sticky-fold, var(--sp-6)); /* the knob, read by a real property first (the knob test probes that one); --_fold hands the same value to the paper and the flap */
   --_fold: var(--sticky-fold, var(--sp-6));
   position: relative;
@@ -3973,7 +3981,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky__head:has(> .sticky-date) > .ph { flex: none; width: var(--sticky-pic-size, calc(var(--tap) * 1.5)); min-height: 0; aspect-ratio: 1; } /* beside a date the picture is a small square at the start */
 .sticky__body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: clip; /* words past the note's room are cut, the foot keeps its place */ font: var(--sticky-font, var(--type-title)); overflow-wrap: anywhere; }
 .sticky--small .sticky__body { font: var(--sticky-small-font, var(--type-label)); } /* the note measured its words and they did not fit at its size (src/sticky/fit.ts) */
-.sticky__paper > :not(.sticky__body) > .chip { border-color: transparent; background-color: var(--sticky-chip-bg, rgb(255 255 255 / 0.85)); color: var(--sticky-ink, #141414); } /* a chip on a note is a label ON the paper (whose note it is): a pale ground nearly opaque (it may lie over words), no edge, the note's ink */
+.sticky__paper > :not(.sticky__body) > .chip { border-color: transparent; background-color: var(--sticky-chip-bg, rgb(255 255 255 / 0.85)); --dark: inherit; color: var(--sticky-ink, var(--card-ink)); } /* a chip on a note is a label ON the paper (whose note it is): a pale ground nearly opaque (it may lie over words), no edge, the note's ink */
 .sticky__foot { flex: none; font: var(--sticky-foot-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); padding-inline-end: var(--_fold); } /* the line stops before the fold */
 /* the flap: a square in the corner — the paper's cut takes its outer half, what is left is the triangle lying on the note */
 .sticky__fold {
@@ -4001,7 +4009,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* ---- sticky date: the day, big, the month under it — at the end of the note's head (its top-right corner) ----
    <div class="sticky__head">…<time class="sticky-date" datetime="2026-02-14"><span class="sticky-date__day">14</span><span class="sticky-date__month">ก.พ.</span></time></div> */
-.sticky-date { display: grid; justify-items: end; margin-inline-start: auto; text-align: end; color: var(--sticky-ink, #141414); }
+.sticky-date { display: grid; justify-items: end; margin-inline-start: auto; text-align: end; color: var(--sticky-ink, var(--card-ink)); }
 .sticky-date__day { font: var(--sticky-date-day-font, var(--type-stat)); }
 .sticky-date__month { font: var(--sticky-date-month-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
 
@@ -4285,7 +4293,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   font: inherit;
 }
 .sticky-heading__title { min-width: 0; max-width: 100%; font: var(--sticky-heading-title-font, var(--type-label)); line-height: 1.35; /* Thai marks stack taller than the label's 1.2, and overflow clips them */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sticky-heading__caption { font: var(--sticky-heading-caption-font, var(--type-caption)); color: color-mix(in srgb, currentColor 62%, transparent); white-space: nowrap; }
+.sticky-heading__caption { font: var(--sticky-heading-caption-font, var(--type-caption)); color: var(--sticky-heading-caption-ink, var(--card-muted)); white-space: nowrap; } /* the muted words of what it stands on: a note, or the screen */
 /* on a note: across the top of its paper, and the note's words start under it */
 .sticky__stuck > .sticky-heading { position: absolute; inset: var(--sp-2) var(--sp-4) auto; }
 .sticky:has(> .sticky__stuck > .sticky-heading) > .sticky__paper { padding-block-start: var(--sticky-heading-room, calc(var(--sp-12) + var(--sp-4))); }
@@ -4583,7 +4591,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- post-paper: the card stock. Its own ground and ink, wherever it lies; its parts read --_muted and --_rule ---- */
 .post-paper {
   background: var(--post-paper-bg, var(--card-1-bg));
-  color: var(--post-paper-ink, var(--card-1-ink));
+  --dark: var(--card-1-dark);
+  color: var(--post-paper-ink, var(--card-ink));
   border-radius: var(--post-paper-radius, var(--sp-2));
   box-shadow: var(--post-paper-shadow, var(--shadow-card));
   --_muted: var(--post-paper-muted-ink, var(--card-muted));
@@ -4924,9 +4933,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
      <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;
@@ -4952,8 +4961,6 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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> */
@@ -4988,35 +4995,40 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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
@@ -5139,7 +5151,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .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;
@@ -5162,7 +5174,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* 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 */
@@ -5180,7 +5193,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .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); }
@@ -5265,19 +5278,21 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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,
@@ -5386,6 +5401,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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));
@@ -5439,7 +5455,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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));
@@ -5455,14 +5472,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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 ----
@@ -5499,7 +5516,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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>
@@ -5542,7 +5559,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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;
@@ -5550,7 +5568,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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; } }
 
 /* ---- css/finish.css — light, shadow, edges — only under data-finish="lit" ---- */
@@ -5576,8 +5594,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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: