/* css/wc-themes.css: Appearance themes for every signed-in page (26 Sep 2026, [themes]).

   Each theme is ONLY a token set over the surface system (css/wc-surfaces.css, --wcs-*) and the
   portal tokens (admin/css/themes.css --color-gray-* / --surface-*, css/customer-portal.css
   --cust-*), plus the few utility remaps a dark or high-contrast palette needs because pages
   hard-code Tailwind colour classes. Layouts never change.

     linen     the house look. No attribute, or data-ui-theme="linen": the tokens in wc-surfaces.css,
               unchanged. Its values are repeated here only for the picker preview.
     slate     cool greys and white (the earlier admin look), sage accents kept.
     evening   warm dark: near-black linen ground, lifted warm-charcoal cards, cream text, light sage.
     sage      a soft green-grey light look.
     harbor    navy dark, the cool counterpart to Evening.
     contrast  near-black text, dark edges, a deep focus ring, underlined links. Also what the house
               default becomes when the device asks for more contrast (prefers-contrast: more).

   How it switches: <html data-ui-theme="..." data-ui-theme-pref="..."> is written on the server
   (app/helpers/ui-theme.php wc_ui_theme_html_attr), so the first paint is already right; a head
   script only resolves "Match my device". Logged-out pages never get this sheet or the attribute.

   Contrast (WCAG 2.1 relative luminance, computed by /root/e2e/themes/contrast.py, table in
   /root/e2e/themes/research.md): every text pair below is 4.5:1 or more in slate, evening and
   contrast; control edges and focus rings are 3:1 or more. Linen keeps its approved values; its
   focus ring is the one change (deep gold #8A6A0C, 5.06:1 on white) because the gold ring was
   2.42:1, and a focus ring is an accessibility floor, not a look.

   Order: 1 shared extras, 2 token sets, 3 admin portal tokens, 4 customer portal tokens,
   5 evening remaps, 6 contrast remaps, 7 slate remaps, 8 focus, 9 the picker, 10 forced colours,
   11 reduced motion. */

/* 1. Extras every theme needs that the base token sheet lacks. ------------------------------ */
:root {
  --wcs-on-sage: #FFFFFF;            /* text on a sage-deep fill */
  --wcs-sage-fill: #46573F;          /* a filled primary button (carries --wcs-on-fill text) */
  --wcs-on-fill: #FFFFFF;
  --wcs-chip: #F3EEE6;               /* a pill or chip sitting inside a raised card */
  --wcs-focus-ring: #8A6A0C;         /* keyboard focus ring colour (see 8) */
  --wcs-ok-bg: #ECFDF5;  --wcs-ok-ink: #047857;
  --wcs-warn-bg: #FFFBEB; --wcs-warn-ink: #B45309;
  --wcs-bad-bg: #FEF2F2;  --wcs-bad-ink: #B91C1C;
  --wcs-info-bg: #EFF6FF; --wcs-info-ink: #1D4ED8;
}

/* 2. Token sets. [data-ui-theme-preview] scopes the same tokens to a picker swatch. ---------- */
[data-ui-theme-preview="linen"] {
  --wcs-ground: #F3EEE6; --wcs-raised: #FFFFFF; --wcs-inset: #F9F6F0;
  --wcs-line: #E3D9CB; --wcs-line-soft: #EFE9DF; --wcs-line-strong: #928672;
  --wcs-ink: #2F3830; --wcs-ink-2: #4F4739; --wcs-muted: #6A5F50;
  --wcs-sage: #5E7259; --wcs-sage-deep: #46573F; --wcs-sage-wash: #EDF1E8; --wcs-sage-line: #C9D3C1;
  --wcs-gold: #C9A227; --wcs-gold-wash: #FBF4E1; --wcs-gold-ink: #6B4E00; --wcs-row-hover: #FBF8F3;
}

:root[data-ui-theme="slate"], [data-ui-theme-preview="slate"] {
  color-scheme: light;
  --wcs-ground: #EAEFF4;
  --wcs-raised: #FFFFFF;
  --wcs-inset: #F6F8FA;
  --wcs-line: #D9E0E8;
  --wcs-line-soft: #E9EEF3;
  --wcs-line-strong: #7A889B;
  --wcs-ink: #0F172A;
  --wcs-ink-2: #1E293B;
  --wcs-muted: #475569;
  --wcs-sage: #4F6F55;
  --wcs-sage-deep: #3B5741;
  --wcs-sage-wash: #EAF1EC;
  --wcs-sage-line: #BCCDC0;
  --wcs-gold: #8A6A0C;
  --wcs-gold-wash: #FAF3DD;
  --wcs-gold-ink: #5F4700;
  --wcs-row-hover: #F5F8FB;
  --wcs-chip: #EEF2F6;
  --wcs-sage-fill: #3B5741;
  --wcs-focus-ring: #1E3A8A;
  --wcs-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 24px -16px rgba(15, 23, 42, .28);
  --wcs-shadow-hover: 0 2px 4px rgba(15, 23, 42, .07), 0 18px 36px -18px rgba(15, 23, 42, .36);
  --wcs-shadow-lifted: 0 2px 6px rgba(15, 23, 42, .07), 0 26px 50px -24px rgba(15, 23, 42, .42);
}

:root[data-ui-theme="evening"], [data-ui-theme-preview="evening"] {
  color-scheme: dark;
  --wcs-ground: #161412;
  --wcs-raised: #221F1B;
  --wcs-inset: #1B1916;
  --wcs-line: #3A342D;
  --wcs-line-soft: #2C2823;
  --wcs-line-strong: #7D7263;
  --wcs-ink: #F3EDE4;
  --wcs-ink-2: #DDD3C5;
  --wcs-muted: #B5A996;
  --wcs-sage: #9DB894;
  --wcs-sage-deep: #B7CDAE;
  --wcs-sage-wash: #26302A;
  --wcs-sage-line: #4B5C48;
  --wcs-gold: #D9B54A;
  --wcs-gold-wash: #2F2817;
  --wcs-gold-ink: #EBCB6A;
  --wcs-row-hover: #2A2622;
  --wcs-on-sage: #161412;
  --wcs-sage-fill: #5E7A57;
  --wcs-sage-fill-2: #56704F;
  --wcs-glass: rgba(34, 31, 27, .86);
  --wcs-rail: #0F0E0C;
  --wcs-chip: #2E2A25;
  --wcs-focus-ring: #EBCB6A;
  --wcs-ok-bg: #16291F;  --wcs-ok-ink: #86D4A6;
  --wcs-warn-bg: #2E2412; --wcs-warn-ink: #F1C66A;
  --wcs-bad-bg: #33191A;  --wcs-bad-ink: #F2A7A0;
  --wcs-info-bg: #172335; --wcs-info-ink: #9CC2F5;
  --wcs-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px -16px rgba(0, 0, 0, .75);
  --wcs-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 36px -18px rgba(0, 0, 0, .8);
  --wcs-shadow-lifted: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 50px -24px rgba(0, 0, 0, .85);
  --wcs-focus: 0 0 0 3px rgba(235, 203, 106, .45);
}

:root[data-ui-theme="sage"], [data-ui-theme-preview="sage"] {
  color-scheme: light;
  --wcs-ground: #E9EEE5;
  --wcs-raised: #FFFFFF;
  --wcs-inset: #F4F7F1;
  --wcs-line: #D3DCCC;
  --wcs-line-soft: #E4EADF;
  --wcs-line-strong: #76866E;
  --wcs-ink: #1E2A1F;
  --wcs-ink-2: #33422F;
  --wcs-muted: #4D5C49;
  --wcs-sage: #4A6445;
  --wcs-sage-deep: #3A5236;
  --wcs-sage-wash: #E4ECDF;
  --wcs-sage-line: #B7C8AE;
  --wcs-gold: #8A6A0C;
  --wcs-gold-wash: #F8F1DC;
  --wcs-gold-ink: #5F4700;
  --wcs-row-hover: #F4F7F1;
  --wcs-chip: #EDF2E9;
  --wcs-sage-fill: #3A5236;
  --wcs-focus-ring: #8A6A0C;
  --wcs-shadow: 0 1px 2px rgba(30, 42, 31, .06), 0 10px 24px -16px rgba(30, 42, 31, .28);
  --wcs-shadow-hover: 0 2px 4px rgba(30, 42, 31, .07), 0 18px 36px -18px rgba(30, 42, 31, .36);
  --wcs-shadow-lifted: 0 2px 6px rgba(30, 42, 31, .07), 0 26px 50px -24px rgba(30, 42, 31, .42);
}

:root[data-ui-theme="harbor"], [data-ui-theme-preview="harbor"] {
  color-scheme: dark;
  --wcs-ground: #0E1624;
  --wcs-raised: #172234;
  --wcs-inset: #121C2C;
  --wcs-line: #2A3A52;
  --wcs-line-soft: #1F2C40;
  --wcs-line-strong: #6B7F9E;
  --wcs-ink: #EEF2F8;
  --wcs-ink-2: #D2DAE6;
  --wcs-muted: #A3B0C4;
  --wcs-sage: #9CC3A8;
  --wcs-sage-deep: #B5D6BF;
  --wcs-sage-wash: #1C2E33;
  --wcs-sage-line: #3E5A5C;
  --wcs-gold: #E0BD5A;
  --wcs-gold-wash: #2A2A20;
  --wcs-gold-ink: #EDCB70;
  --wcs-row-hover: #1C293D;
  --wcs-on-sage: #0E1624;
  --wcs-sage-fill: #4F7A63;
  --wcs-sage-fill-2: #466D58;
  --wcs-glass: rgba(23, 34, 52, .86);
  --wcs-rail: #0A101B;
  --wcs-chip: #213047;
  --wcs-focus-ring: #EDCB70;
  --wcs-ok-bg: #13302A;  --wcs-ok-ink: #86D4A6;
  --wcs-warn-bg: #33290F; --wcs-warn-ink: #F1C66A;
  --wcs-bad-bg: #3A1C22;  --wcs-bad-ink: #F2A7A0;
  --wcs-info-bg: #16294A; --wcs-info-ink: #9CC2F5;
  --wcs-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px -16px rgba(0, 0, 0, .75);
  --wcs-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 36px -18px rgba(0, 0, 0, .8);
  --wcs-shadow-lifted: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 50px -24px rgba(0, 0, 0, .85);
  --wcs-focus: 0 0 0 3px rgba(237, 203, 112, .45);
}

:root[data-ui-theme="contrast"], [data-ui-theme-preview="contrast"] {
  color-scheme: light;
  --wcs-ground: #ECE7DF;
  --wcs-raised: #FFFFFF;
  --wcs-inset: #F7F4EF;
  --wcs-line: #6E6558;
  --wcs-line-soft: #A39A8C;
  --wcs-line-strong: #2B2620;
  --wcs-ink: #0B0B0A;
  --wcs-ink-2: #1C1915;
  --wcs-muted: #37322B;
  --wcs-sage: #2F4A2B;
  --wcs-sage-deep: #223820;
  --wcs-sage-wash: #E3ECDD;
  --wcs-sage-line: #4E6A48;
  --wcs-gold: #6E5100;
  --wcs-gold-wash: #FFF3CF;
  --wcs-gold-ink: #3F2E00;
  --wcs-row-hover: #F3EFE8;
  --wcs-chip: #F3EFE8;
  --wcs-sage-fill: #223820;
  --wcs-focus-ring: #0B0B0A;
  --wcs-ok-bg: #E6F5EC;  --wcs-ok-ink: #03512F;
  --wcs-warn-bg: #FFF4DB; --wcs-warn-ink: #6B3A00;
  --wcs-bad-bg: #FDECEC;  --wcs-bad-ink: #8A1414;
  --wcs-info-bg: #E8F0FD; --wcs-info-ink: #123C96;
  --wcs-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  --wcs-shadow-hover: 0 2px 4px rgba(0, 0, 0, .16);
  --wcs-shadow-lifted: 0 2px 8px rgba(0, 0, 0, .18);
  --wcs-focus: 0 0 0 3px #0B0B0A;
}

/* 3. Admin portal tokens (admin/css/themes.css "premium", which every admin page carries). The
   surface sheet already points the pale greys at the surface tokens; the text greys follow here. */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"])[data-theme] {
  --color-dark: var(--wcs-ink);
  --color-gray-900: var(--wcs-ink);
  --color-gray-800: var(--wcs-ink);
  --color-gray-700: var(--wcs-ink-2);
  --color-gray-600: var(--wcs-muted);
  --color-gray-500: var(--wcs-muted);
  --color-gray-400: var(--wcs-muted);
  --color-gray-300: var(--wcs-line-strong);
  --color-gray-200: var(--wcs-line);
  --color-gray-100: var(--wcs-ground);
  --color-gray-50: var(--wcs-inset);
  --color-white: var(--wcs-raised);
  --surface-primary: var(--wcs-raised);
  --surface-secondary: var(--wcs-inset);
  --surface-tertiary: var(--wcs-ground);
  --surface-elevated: var(--wcs-raised);
  --surface-glass: var(--wcs-glass);
  --border-color: var(--wcs-line);
  --border-color-light: var(--wcs-line-soft);
  --border-color-btn: var(--wcs-line-strong);
  --color-primary: var(--wcs-sage-fill);
  --color-primary-hover: var(--wcs-sage-fill-2);
  --color-primary-active: var(--wcs-sage-fill-2);
  --color-primary-light: var(--wcs-sage-wash);
  --content-bg: var(--wcs-ground);
}
:root[data-ui-theme="contrast"][data-theme] {
  --color-gray-900: var(--wcs-ink);
  --color-gray-800: var(--wcs-ink);
  --color-gray-700: var(--wcs-ink-2);
  --color-gray-600: var(--wcs-muted);
  --color-gray-500: var(--wcs-muted);
  --color-gray-400: var(--wcs-muted);
  --color-gray-300: var(--wcs-line-strong);
  --color-gray-200: var(--wcs-line);
  --border-color: var(--wcs-line);
  --border-color-light: var(--wcs-line-soft);
  --border-color-btn: var(--wcs-line-strong);
  --color-primary: var(--wcs-sage);
  --color-primary-hover: var(--wcs-sage-deep);
}

/* 3b. Component token sets the admin already draws with (no raw colours in their rules):
   leads and working surfaces --wl-* (admin/css/wl-tokens.css), page header --wc-ph-*
   (admin/css/wc-pagehead.css), sidebar column --navv2-* (admin-sidebar-v2.php), lead page --ld-*
   (lead-detail.php, set on #main). In every non-default theme they follow the surface tokens. */
:root:is([data-ui-theme="slate"], [data-ui-theme="sage"], [data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"]) {
  --wl-ink: var(--wcs-ink); --wl-ink-2: var(--wcs-ink-2); --wl-muted: var(--wcs-muted); --wl-faint: var(--wcs-muted);
  --wl-line: var(--wcs-line); --wl-line-2: var(--wcs-line-soft); --wl-surface: var(--wcs-raised); --wl-ground: var(--wcs-ground);
  --wl-cream: var(--wcs-inset); --wl-tint: var(--wcs-sage-wash);
  --wl-primary: var(--wcs-sage-fill); --wl-primary-ink: var(--wcs-on-fill); --wl-primary-hover: var(--wcs-sage); --wl-primary-wash: var(--wcs-sage-wash);
  --wl-good: var(--wcs-ok-ink); --wl-good-wash: var(--wcs-ok-bg); --wl-warn: var(--wcs-warn-ink); --wl-warn-wash: var(--wcs-warn-bg);
  --wl-bad: var(--wcs-bad-ink); --wl-bad-wash: var(--wcs-bad-bg);
  --wc-ph-ink: var(--wcs-ink); --wc-ph-ink-soft: var(--wcs-ink-2); --wc-ph-muted: var(--wcs-muted); --wc-ph-faint: var(--wcs-muted);
  --wc-ph-surface: var(--wcs-raised); --wc-ph-chip: var(--wcs-chip); --wc-ph-chip-hover: var(--wcs-row-hover);
  --wc-ph-line: var(--wcs-line); --wc-ph-line-strong: var(--wcs-line-strong);
  --wc-ph-sage: var(--wcs-sage-fill); --wc-ph-sage-ink: var(--wcs-sage-deep); --wc-ph-sage-tint: var(--wcs-sage-wash); --wc-ph-sage-line: var(--wcs-sage-line);
  --wc-ph-focus: var(--wcs-focus-ring); --wc-ph-shadow: var(--wcs-shadow);
  --navv2-col-bg: var(--wcs-raised); --navv2-col-foot-bg: var(--wcs-inset); --navv2-col-border: var(--wcs-line); --navv2-col-divider: var(--wcs-line-soft);
  --navv2-input-bg: var(--wcs-inset); --navv2-text: var(--wcs-ink); --navv2-text-muted: var(--wcs-muted); --navv2-text-faint: var(--wcs-muted);
  --navv2-accent-ink: var(--wcs-sage-deep); --navv2-accent: var(--wcs-sage-fill); --navv2-on-accent: var(--wcs-on-fill);
}
:root:is([data-ui-theme="slate"], [data-ui-theme="sage"], [data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"]) #main {
  --ld-ink: var(--wcs-ink); --ld-ink2: var(--wcs-ink-2); --ld-muted: var(--wcs-muted); --ld-faint: var(--wcs-muted);
  --ld-line: var(--wcs-line); --ld-soft: var(--wcs-inset); --ld-card: var(--wcs-raised);
  --ld-sage: var(--wcs-sage-fill); --ld-sage-d: var(--wcs-sage-deep); --ld-sage-t: var(--wcs-sage-wash);
  --ld-amber-t: var(--wcs-warn-bg); --ld-amber: var(--wcs-warn-ink); --ld-red-t: var(--wcs-bad-bg); --ld-red: var(--wcs-bad-ink);
  --ld-blue-t: var(--wcs-info-bg); --ld-blue: var(--wcs-info-ink);
}
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) {
  --navv2-item-hover: rgba(183, 205, 174, .08); --navv2-item-active: rgba(183, 205, 174, .16); --navv2-accent-soft: rgba(183, 205, 174, .14);
  --navv2-rail-bg: var(--wcs-rail); --navv2-scrim: rgba(0, 0, 0, .6);
  --gradient-primary: linear-gradient(135deg, var(--wcs-sage-fill) 0%, var(--wcs-sage-fill-2) 100%);
}

/* 3c. Lead work session and claim bar (admin/css/work-session.css, --ws-* on :root). */
:root:is([data-ui-theme="slate"], [data-ui-theme="sage"], [data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"]) {
  --ws-ink: var(--wcs-ink); --ws-ink-2: var(--wcs-ink-2); --ws-muted: var(--wcs-muted); --ws-faint: var(--wcs-muted);
  --ws-line: var(--wcs-line); --ws-line-2: var(--wcs-line-soft); --ws-line-3: var(--wcs-line-strong);
  --ws-surface: var(--wcs-raised); --ws-ground: var(--wcs-ground); --ws-cream: var(--wcs-inset); --ws-idle: var(--wcs-chip);
  --ws-sage: var(--wcs-sage-fill); --ws-sage-deep: var(--wcs-sage-deep); --ws-sage-wash: var(--wcs-sage-wash); --ws-sage-line: var(--wcs-sage-line);
  --ws-on-sage: var(--wcs-on-fill); --ws-bad: var(--wcs-bad-ink); --ws-bad-wash: var(--wcs-bad-bg);
}

/* 4. Customer and host portal tokens (css/customer-portal.css). */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) {
  --cust-cream-50: var(--wcs-ground);
  --cust-cream-100: var(--wcs-inset);
  --cust-cream-200: var(--wcs-line);
  --cust-cream-300: var(--wcs-line-strong);
  --cust-shadow-card: var(--wcs-shadow);
}
:root:is([data-ui-theme="slate"], [data-ui-theme="sage"]) {
  --cust-cream-50: var(--wcs-ground);
  --cust-cream-100: var(--wcs-inset);
  --cust-cream-200: var(--wcs-line);
  --cust-cream-300: var(--wcs-line-strong);
}
:root[data-ui-theme="contrast"] {
  --cust-cream-200: var(--wcs-line);
  --cust-cream-300: var(--wcs-line-strong);
}

/* 5. Evening: pages hard-code Tailwind light fills and dark text; each maps to a token. ------- */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) body { background-color: var(--wcs-ground) !important; color: var(--wcs-ink); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.cust-page, main, #main, .admin-main, .wrap, .min-h-screen) { background-color: var(--wcs-ground); }

/* 5a. Fills */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-white, .bg-cream-50) { background-color: var(--wcs-raised) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-gray-50, .bg-slate-50, .bg-warm-50, .bg-stone-50, .bg-neutral-50, .bg-zinc-50) { background-color: var(--wcs-inset) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-gray-100, .bg-slate-100, .bg-warm-100, .bg-stone-100, .bg-neutral-100) { background-color: var(--wcs-chip) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-gray-200, .bg-slate-200, .bg-warm-200, .bg-stone-200) { background-color: var(--wcs-line) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-sage-50, .bg-sage-100) { background-color: var(--wcs-sage-wash) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100, .bg-teal-50) { background-color: var(--wcs-ok-bg) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100, .bg-orange-50, .bg-orange-100) { background-color: var(--wcs-warn-bg) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100) { background-color: var(--wcs-bad-bg) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-indigo-50, .bg-indigo-100, .bg-purple-50, .bg-purple-100, .bg-violet-50) { background-color: var(--wcs-info-bg) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.hover\:bg-gray-50, .hover\:bg-gray-100, .hover\:bg-warm-50, .hover\:bg-warm-100, .hover\:bg-slate-50, .hover\:bg-sage-50, .hover\:bg-white):hover { background-color: var(--wcs-row-hover) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.from-white, .from-gray-50, .from-warm-50, .from-sage-50, .from-cream-50) { --tw-gradient-from: var(--wcs-raised) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.to-white, .to-gray-50, .to-warm-50, .to-sage-50, .to-cream-50, .to-warm-100) { --tw-gradient-to: var(--wcs-inset) var(--tw-gradient-to-position) !important; }

/* 5b. Text */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800, .text-warm-900, .text-warm-800, .text-stone-900, .text-stone-800, .text-black, .text-sage-900) { color: var(--wcs-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-gray-700, .text-slate-700, .text-warm-700, .text-stone-700) { color: var(--wcs-ink-2) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-gray-300, .text-slate-600, .text-slate-500, .text-slate-400, .text-warm-600, .text-warm-500, .text-warm-400, .text-warm-300, .text-stone-500, .text-stone-400) { color: var(--wcs-muted) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-sage-800, .text-sage-700, .text-sage-600, .text-sage-500, .text-emerald-900) { color: var(--wcs-sage-deep) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-green-600, .text-green-700, .text-green-800, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-teal-700) { color: var(--wcs-ok-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-yellow-600, .text-yellow-700, .text-yellow-800, .text-orange-600, .text-orange-700) { color: var(--wcs-warn-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900, .text-rose-600, .text-rose-700) { color: var(--wcs-bad-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-indigo-600, .text-indigo-700, .text-sky-700, .text-purple-600, .text-purple-700, .text-violet-700) { color: var(--wcs-info-ink) !important; }
/* A dark fill keeps light text; the remaps above never reach white text. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(h1, h2, h3, h4):not([class*="text-"]) { color: var(--wcs-ink); }

/* 5c. Edges */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .border-warm-100, .border-warm-200, .border-warm-50, .border-gray-50, .border-sage-100, .border-sage-200, .border-stone-200, .border-white) { border-color: var(--wcs-line) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.border-gray-300, .border-slate-300, .border-warm-300, .border-sage-300, .border-sage-400) { border-color: var(--wcs-line-strong) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.border-green-200, .border-emerald-200, .border-green-100) { border-color: rgba(134, 212, 166, .28) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.border-amber-200, .border-yellow-200, .border-amber-100, .border-orange-200) { border-color: rgba(241, 198, 106, .3) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.border-red-200, .border-red-100, .border-rose-200) { border-color: rgba(242, 167, 160, .3) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.border-blue-200, .border-blue-100, .border-indigo-200, .border-purple-200) { border-color: rgba(156, 194, 245, .3) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.divide-gray-100, .divide-gray-200, .divide-warm-100, .divide-warm-200, .divide-slate-100) > :not([hidden]) ~ :not([hidden]) { border-color: var(--wcs-line-soft) !important; }

/* 5d. Fields */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) {
  background-color: var(--wcs-inset) !important; color: var(--wcs-ink) !important; border-color: var(--wcs-line-strong);
}
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(input, textarea)::placeholder { color: var(--wcs-muted); opacity: 1; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--wcs-sage); }

/* 5e. Portal surfaces with hard-coded white. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.ld-card, .gh-panel, .stat-card, .detail-card, .scard, .auto-card, .task-table, .add-form,
  .ar-owed, .ar-panel, .st-today, .filter-card, .candidate-row, .wl-row, .wl-card, .wl-reply, .card, .fc, .staff-desktop, .wc-card, .wc-ph, .wc-ph__bar, .modal-content,
  .cust-section, .cust-section--ghost, .wcs-card, dialog) { background: var(--wcs-raised) !important; color: var(--wcs-ink); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.wc-card.is-quiet, .ld-ask, .wcs-well) { background: var(--wcs-inset) !important; }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .cust-page::before { opacity: .25; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(table) { color: var(--wcs-ink); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(thead, thead tr, thead th) { background-color: var(--wcs-inset); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(main, .admin-main, .wrap) table tbody tr:hover > td { background-color: var(--wcs-row-hover); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) a:not([class]) { color: var(--wcs-sage-deep); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.shadow, .shadow-sm, .shadow-md, .shadow-lg) { --tw-shadow-color: rgba(0, 0, 0, .6); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) img:is([src*="logo"], [alt*="logo" i]):not([src$=".jpg"]) { filter: brightness(1.15); }

/* 5f. Start page and other hard-coded card text (admin/start.php inline sheet). */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"], [data-ui-theme="slate"], [data-ui-theme="sage"]) :is(.wc-card__n, .wc-card__title) { color: var(--wcs-ink); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"], [data-ui-theme="slate"], [data-ui-theme="sage"]) :is(.wc-card__sub, .wc-start__lede, .st-today__sub) { color: var(--wcs-muted); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"], [data-ui-theme="slate"], [data-ui-theme="sage"]) .wc-start__lede a { color: var(--wcs-sage-deep); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"], [data-ui-theme="slate"], [data-ui-theme="sage"]) .wc-card { border-color: var(--wcs-line); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .wc-card.is-urgent :is(.wc-card__n, .wc-card__icon) { color: var(--wcs-warn-ink); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-teal-600, .text-teal-700, .text-teal-800) { color: var(--wcs-ok-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-teal-50, .bg-teal-100) { background-color: var(--wcs-ok-bg) !important; }

/* 5g. Admin sidebar pieces that paint their own white (admin-sidebar-v2.php inline sheet). */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.navv2__workspace, .navv2__notif-panel, .navv2__strip) { background: var(--wcs-raised) !important; border-color: var(--wcs-line) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.navv2__filter, .navv2__filter-kbd, .navv2__item.is-active .navv2__item-icon-wrap) { background: var(--wcs-inset) !important; border-color: var(--wcs-line) !important; color: var(--wcs-ink); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .navv2__brand { background: var(--wcs-raised) !important; }

/* 5h. The start page run sheet (--st-* on .st-today, admin/includes/start-today.php). */
:root:is([data-ui-theme="slate"], [data-ui-theme="sage"], [data-ui-theme="evening"], [data-ui-theme="harbor"], [data-ui-theme="contrast"]) .st-today {
  --st-ink: var(--wcs-ink); --st-ink-2: var(--wcs-ink-2); --st-muted: var(--wcs-muted); --st-faint: var(--wcs-muted);
  --st-line: var(--wcs-line); --st-line-2: var(--wcs-line-soft); --st-surface: var(--wcs-raised); --st-ground: var(--wcs-inset); --st-tint: var(--wcs-sage-wash);
  --st-primary: var(--wcs-sage-fill); --st-primary-hover: var(--wcs-sage-deep); --st-primary-wash: var(--wcs-sage-wash);
  --st-good: var(--wcs-ok-ink); --st-warn: var(--wcs-warn-ink); --st-bad: var(--wcs-bad-ink); --st-bad-wash: var(--wcs-bad-bg);
}
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .st-today :is(.st-today__links a.on, .st-today__links a.on b, .st-btn.is-primary) { color: var(--wcs-on-fill); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.wc-start__panel, .wc-card.is-urgent) { background: var(--wcs-raised) !important; }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .wc-card.is-urgent { border-color: rgba(217, 181, 74, .55); }

/* 5i. Inline colours some admin buttons carry (style="color:#dc2626" and similar). */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([style*="color: #dc2626"], [style*="color:#dc2626"], [style*="color: #DC2626"], [style*="color:#b91c1c"]) { color: var(--wcs-bad-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([style*="color:#556855"], [style*="color: #556855"], [style*="color:#4F6B4F"], [style*="color:#5E7259"], [style*="color: #5E7259"]) { color: var(--wcs-sage-deep) !important; border-color: var(--wcs-sage-line) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([style*="color:#2B2A26"], [style*="color: #2B2A26"], [style*="color:#1F2620"], [style*="color:#111"], [style*="color: #111"]) { color: var(--wcs-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFF"], [style*="background-color:#fff"], [style*="background: white"], [style*="background:white"]) { background: var(--wcs-raised) !important; }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .sr-fix { color: var(--wcs-sage-deep); }

/* 5j. The signature layer (css/wow-v1.css) already has a dark branch for its tokens; Evening uses it. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) body[data-wow] {
  --wow-focus: var(--wcs-focus-ring); --wow-line: rgba(255, 255, 255, .08); --wow-line-strong: rgba(255, 255, 255, .16);
  --wow-glow: rgba(94, 114, 89, .14); --wow-glow-2: rgba(201, 169, 110, .08); --wow-card-light: none; --wow-row-hover: rgba(255, 255, 255, .04);
  --wow-header-wash: none;
  --wow-shadow-rest: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 32px -14px rgba(0, 0, 0, .55);
  --wow-shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -18px rgba(0, 0, 0, .7);
}

/* 5k. Customer and host portal: glass bars, see-through whites, arbitrary dark text, eyebrows. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([class*="bg-white/"], .nav-glass, .nav-glass[data-scrolled="true"]) { background-color: var(--wcs-glass) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([class*="text-[#0"], [class*="text-[#1"], [class*="text-[#2"], [class*="text-[#3"]) { color: var(--wcs-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([class*="bg-[#F"], [class*="bg-[#f"], [class*="bg-[#E"], [class*="bg-[#e"]) { background-color: var(--wcs-inset) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.cust-eyebrow, .cust-kicker) { color: var(--wcs-sage-deep); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) [id^="milestone-banner-"] { background: var(--wcs-sage-wash) !important; border-color: var(--wcs-sage-line) !important; }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) [id^="milestone-banner-"] :is(div, button) { color: var(--wcs-ink) !important; }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .border-warm-200\/60 { border-color: var(--wcs-line) !important; }

/* 5l. The customer portal "polish" layer (css/customer-portal.css, body[data-polish="on"]) paints
   its own light ground, dark bold text and sidebar colours with !important; Evening answers it. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body, html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body[data-polish="on"] { background: var(--wcs-ground) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body[data-polish="on"] :is(.font-semibold, .font-bold, h1, h2, h3):not([class*="text-white"]):not([class*="text-sage-"]):not([class*="text-red"]):not([class*="text-amber"]):not([class*="text-green"]):not([class*="text-emerald"]) { color: var(--wcs-ink); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body[data-polish="on"] .sidebar-link.active { background: var(--wcs-sage-wash) !important; color: var(--wcs-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body[data-polish="on"] .sidebar-link:not(.active):hover { background: var(--wcs-row-hover) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body[data-polish="on"] :is(.stat-card.bg-white, .quick-action) { background: var(--wcs-raised) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body[data-polish="on"] :is(.text-gray-500, .text-gray-600) { color: var(--wcs-muted) !important; }

/* 5m. Inline colours in older blocks (style="color:#2d2b27" and the like): dark greys become the
   ink, mid greys the muted tone. Portal hub tabs (customer/includes/hub-tabs.php) and host KPI cards. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([style^="color:#1"], [style^="color: #1"], [style*=";color:#1"], [style*="; color:#1"], [style*="; color: #1"], [style*=";color: #1"], [style^="color:#2"], [style^="color: #2"], [style*=";color:#2"], [style*="; color:#2"], [style*="; color: #2"], [style*=";color: #2"], [style^="color:#3"], [style^="color: #3"], [style*=";color:#3"], [style*="; color:#3"], [style*="; color: #3"], [style*=";color: #3"], [style^="color:#4"], [style^="color: #4"], [style*=";color:#4"], [style*="; color:#4"], [style*="; color: #4"], [style*=";color: #4"]) { color: var(--wcs-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([style^="color:#5"], [style^="color: #5"], [style*=";color:#5"], [style*="; color:#5"], [style*="; color: #5"], [style*=";color: #5"], [style^="color:#6"], [style^="color: #6"], [style*=";color:#6"], [style*="; color:#6"], [style*="; color: #6"], [style*=";color: #6"], [style^="color:#7"], [style^="color: #7"], [style*=";color:#7"], [style*="; color:#7"], [style*="; color: #7"], [style*=";color: #7"], [style^="color:#8"], [style^="color: #8"], [style*=";color:#8"], [style*="; color:#8"], [style*="; color: #8"], [style*=";color: #8"]) { color: var(--wcs-muted) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([style*="border:1.5px solid #"], [style*="border: 1px solid #"], [style*="border:1px solid #"]) { border-color: var(--wcs-line) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-hub__in { background: var(--wcs-inset); box-shadow: inset 0 0 0 1px var(--wcs-line); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-hub a { color: var(--wcs-ink-2); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.wc-hub a i, .wc-hub__eyebrow) { color: var(--wcs-muted); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-hub a:is(:hover, [aria-current="page"]) { color: var(--wcs-ink); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-hub a[aria-current="page"] { background: var(--wcs-raised); box-shadow: 0 0 0 1px var(--wcs-line-strong); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-hub a[aria-current="page"] i { color: var(--wcs-sage-deep); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.kpi-card, .host-card, .stat-box) { background: var(--wcs-raised) !important; border-color: var(--wcs-line) !important; color: var(--wcs-ink); }

/* 5o. Cleaner dashboard: the next-job card's Open job bar (staff/dashboard.php inline sheet). */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .sd-next__cta { background: var(--wcs-raised); color: var(--wcs-ink); }

html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body #navV2Hamburger { background: var(--wcs-raised); color: var(--wcs-ink); border-color: var(--wcs-line); }

/* 5n. Customer phone tab bar (customer/includes/customer-mobile-nav.php) and the deep blue notice text. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-cnav { background: var(--wcs-glass); border-top-color: var(--wcs-line); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-cnav__tab { color: var(--wcs-muted); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .wc-cnav__tab.is-active { color: var(--wcs-sage-deep); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.text-blue-900, .text-indigo-900, .text-sky-900) { color: var(--wcs-info-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.border-blue-300, .border-blue-400, .border-sky-200) { border-color: rgba(156, 194, 245, .35) !important; }

/* 6. High contrast: pale greys become near-black, hairlines become real edges, links underline. */
:root[data-ui-theme="contrast"] body { color: var(--wcs-ink); }
html[data-ui-theme="contrast"]:root body :is(.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800, .text-warm-900, .text-warm-800, .text-sage-900) { color: var(--wcs-ink) !important; }
html[data-ui-theme="contrast"]:root body :is(.text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-gray-300, .text-slate-700, .text-slate-600, .text-slate-500, .text-slate-400,
  .text-warm-700, .text-warm-600, .text-warm-500, .text-warm-400, .text-warm-300, .text-stone-500) { color: var(--wcs-muted) !important; }
html[data-ui-theme="contrast"]:root body :is(.text-sage-800, .text-sage-700, .text-sage-600, .text-sage-500, .text-sage-400) { color: var(--wcs-sage-deep) !important; }
html[data-ui-theme="contrast"]:root body :is(.text-green-600, .text-green-700, .text-emerald-600, .text-emerald-700) { color: var(--wcs-ok-ink) !important; }
html[data-ui-theme="contrast"]:root body :is(.text-amber-600, .text-amber-700, .text-yellow-600, .text-yellow-700, .text-orange-600) { color: var(--wcs-warn-ink) !important; }
html[data-ui-theme="contrast"]:root body :is(.text-red-500, .text-red-600, .text-red-700) { color: var(--wcs-bad-ink) !important; }
html[data-ui-theme="contrast"]:root body :is(.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-600) { color: var(--wcs-info-ink) !important; }
html[data-ui-theme="contrast"]:root body :is(.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .border-warm-100, .border-warm-200, .border-warm-50, .border-gray-50, .border-sage-100, .border-sage-200) { border-color: var(--wcs-line) !important; }
html[data-ui-theme="contrast"]:root body :is(.border-gray-300, .border-warm-300, .border-sage-300, .border-sage-400) { border-color: var(--wcs-line-strong) !important; }
html[data-ui-theme="contrast"]:root body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea) { border-color: var(--wcs-line-strong) !important; }
html[data-ui-theme="contrast"]:root body :is(input, textarea)::placeholder { color: var(--wcs-muted); opacity: 1; }
html[data-ui-theme="contrast"]:root body :is(main, .admin-main, .wrap, .cust-page) p a:not([class]),
html[data-ui-theme="contrast"]:root body :is(main, .admin-main, .wrap, .cust-page) a.underline-on-contrast { text-decoration: underline; text-underline-offset: 2px; }
html[data-ui-theme="contrast"]:root body :is(.opacity-50, .opacity-60, .opacity-70, .opacity-75) { opacity: 1 !important; }

/* 6b. High contrast: the leftovers the house look carries (initials on pale sage, pale header
   text on the sage bands, teal row actions, pale eyebrows, dark text on mid-sage pills). */
html[data-ui-theme="contrast"]:root body :is(.navv2__crew-avatar, .rounded-full.text-white, span.text-white.text-xl.font-bold) { background: var(--wcs-sage-deep) !important; color: #FFFFFF !important; }
html[data-ui-theme="contrast"]:root body :is(.text-sage-200, .text-sage-100, .text-white\/90, .text-white\/80, .text-white\/70, .text-white\/60) { color: #FFFFFF !important; }
html[data-ui-theme="contrast"]:root body :is(.text-teal-600, .text-teal-700) { color: var(--wcs-ok-ink) !important; }
html[data-ui-theme="contrast"]:root body :is(.wc-hub__eyebrow, .wc-hub a i, .wc-lang-s, .cust-eyebrow) { color: var(--wcs-muted) !important; }
html[data-ui-theme="contrast"]:root body :is(h1, h2) em { color: var(--wcs-sage-deep); }
html[data-ui-theme="contrast"]:root body :is(.rebook-btn, .filter-pill.active, .filter-pill[aria-current], a.filter-pill.bg-sage-600) { background: var(--wcs-sage-fill) !important; color: #FFFFFF !important; }
html[data-ui-theme="contrast"]:root body :is([style^="color:#5"], [style^="color: #5"], [style*=";color:#5"], [style*="; color:#5"], [style*="; color: #5"], [style*=";color: #5"], [style^="color:#6"], [style^="color: #6"], [style*=";color:#6"], [style*="; color:#6"], [style*="; color: #6"], [style*=";color: #6"], [style^="color:#7"], [style^="color: #7"], [style*=";color:#7"], [style*="; color:#7"], [style*="; color: #7"], [style*=";color: #7"], [style^="color:#8"], [style^="color: #8"], [style*=";color:#8"], [style*="; color:#8"], [style*="; color: #8"], [style*=";color: #8"], [style^="color:#9"], [style^="color: #9"], [style*=";color:#9"], [style*="; color:#9"], [style*="; color: #9"], [style*=";color: #9"], [style^="color:#a"], [style^="color: #a"], [style*=";color:#a"], [style*="; color:#a"], [style*="; color: #a"], [style*=";color: #a"], [style^="color:#A"], [style^="color: #A"], [style*=";color:#A"], [style*="; color:#A"], [style*="; color: #A"], [style*=";color: #A"], [style^="color:#b"], [style^="color: #b"], [style*=";color:#b"], [style*="; color:#b"], [style*="; color: #b"], [style*=";color: #b"], [style^="color:#B"], [style^="color: #B"], [style*=";color:#B"], [style*="; color:#B"], [style*="; color: #B"], [style*=";color: #B"]) { color: var(--wcs-muted) !important; }
html[data-ui-theme="contrast"]:root body .wc-hub a { color: var(--wcs-ink); }

/* 7. Slate: the warm Tailwind utilities that pages hard-code turn cool (admin already maps them). */
:root:is([data-ui-theme="slate"], [data-ui-theme="sage"]) body { background-color: var(--wcs-ground); }
html:is([data-ui-theme="slate"], [data-ui-theme="sage"]):root body :is(.bg-warm-50, .bg-cream-50) { background-color: var(--wcs-inset) !important; }
:root[data-ui-theme="slate"] .bg-warm-100 { background-color: var(--wcs-chip) !important; }
:root[data-ui-theme="slate"] .bg-warm-200 { background-color: var(--wcs-line) !important; }
html:is([data-ui-theme="slate"], [data-ui-theme="sage"]):root body :is(.border-warm-50, .border-warm-100, .border-warm-200) { border-color: var(--wcs-line) !important; }
:root[data-ui-theme="slate"] .border-warm-300 { border-color: var(--wcs-line-strong) !important; }
html:is([data-ui-theme="slate"], [data-ui-theme="sage"]):root body :is(.text-warm-900, .text-warm-800) { color: var(--wcs-ink) !important; }
:root[data-ui-theme="slate"] .text-warm-700 { color: var(--wcs-ink-2) !important; }
html:is([data-ui-theme="slate"], [data-ui-theme="sage"]):root body :is(.text-warm-600, .text-warm-500, .text-warm-400) { color: var(--wcs-muted) !important; }
:root:is([data-ui-theme="slate"], [data-ui-theme="sage"]) .cust-page::before { opacity: .35; }

/* 7b. The customer portal's dark green sidebar keeps its own light text in the light themes: the
   text remaps above are for pale surfaces, not for this band. */
html:is([data-ui-theme="slate"], [data-ui-theme="sage"], [data-ui-theme="contrast"]):root body :is(.desktop-sidebar, aside.bg-sage-900, aside[class*="bg-gradient"]) :is(.text-warm-900, .text-warm-800, .text-warm-700, .text-warm-600, .text-warm-500, .text-warm-400, .text-warm-300, .text-gray-900, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-sage-700, .text-sage-600, .text-sage-500) { color: inherit !important; }

/* 8. Focus: every theme's ring passes 3:1 against the surface it sits on. The surface sheets draw
   the ring with var(--wcs-gold); only the focused element's own gold changes, so nothing moves. */
:root[data-ui-theme] :focus-visible { --wcs-gold: var(--wcs-focus-ring); --wcx-gold: var(--wcs-focus-ring); }
html[data-ui-theme="contrast"]:root body :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible { outline: 3px solid var(--wcs-focus-ring) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #FFFFFF !important; }

/* 9. The picker (wc_ui_theme_picker): five looks as radio cards, each with a true-colour preview. */
.wct-picker { margin: 0; font-family: var(--wcs-sans); color: var(--wcs-ink); }
.wct-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.wct-legend { padding: 0; margin: 0 0 4px; font: 600 1.35rem/1.2 var(--wcs-serif); color: var(--wcs-ink); }
.wct-lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--wcs-muted); }
.wct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wct-opt {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--wcs-line-strong); border-radius: var(--wcs-radius-sm); background: var(--wcs-raised);
  box-shadow: 0 1px 1px rgba(61, 55, 47, .05); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wct-opt:hover { border-color: var(--wcs-sage); background: var(--wcs-row-hover); }
.wct-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wct-opt:has(.wct-radio:checked) { border-color: var(--wcs-sage-deep); box-shadow: 0 0 0 2px var(--wcs-sage-deep); }
.wct-opt:has(.wct-radio:checked)::after {
  content: ""; position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--wcs-sage-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 2px var(--wcs-raised);
}
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .wct-opt:has(.wct-radio:checked)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23161412' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wct-opt:has(.wct-radio:focus-visible) { outline: 3px solid var(--wcs-focus-ring); outline-offset: 2px; }
.wct-prev {
  display: flex; align-items: flex-end; height: 64px; padding: 10px; border-radius: 8px; overflow: hidden;
  background: var(--wcs-ground); border: 1px solid var(--wcs-line);
}
.wct-prev--split { padding: 0; gap: 0; align-items: stretch; }
.wct-prev__half { flex: 1; display: flex; align-items: flex-end; padding: 10px 6px 10px 10px; background: var(--wcs-ground); }
.wct-prev__half + .wct-prev__half { padding: 10px 10px 10px 6px; }
.wct-prev__card {
  display: grid; gap: 5px; width: 100%; padding: 8px; border-radius: 6px;
  background: var(--wcs-raised); border: 1px solid var(--wcs-line); box-shadow: var(--wcs-shadow);
}
.wct-prev__card i { display: block; height: 5px; border-radius: 3px; background: var(--wcs-ink); width: 70%; }
.wct-prev__card i + i { background: var(--wcs-muted); width: 90%; opacity: .75; }
.wct-prev__card b { display: block; height: 8px; width: 40%; border-radius: 4px; background: var(--wcs-sage-deep); box-shadow: 14px 0 0 -1px var(--wcs-gold); }
.wct-txt { display: grid; gap: 2px; }
.wct-name { font: 600 14px/1.25 var(--wcs-sans); color: var(--wcs-ink); }
.wct-hint { font-size: 12.5px; line-height: 1.4; color: var(--wcs-muted); }
.wct-status { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--wcs-sage-deep); }
.wct-status.is-bad { color: var(--wcs-bad-ink); }
.wct-save { margin-top: 12px; min-height: 44px; padding: 0 18px; border-radius: var(--wcs-radius-sm); border: 0; background: var(--wcs-sage-deep); color: var(--wcs-on-sage); font-weight: 600; }
/* Compact: a row of five previews for an account menu. */
.wct-picker--compact .wct-legend { font: 700 11px/1.2 var(--wcs-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wcs-muted); margin-bottom: 8px; }
.wct-picker--compact .wct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wct-picker--compact .wct-opt { padding: 4px; gap: 4px; min-height: 44px; align-items: stretch; }
.wct-picker--compact .wct-prev { height: 34px; padding: 5px; }
.wct-picker--compact .wct-prev__half { padding: 5px 3px 5px 5px; }
.wct-picker--compact .wct-prev__half + .wct-prev__half { padding: 5px 5px 5px 3px; }
.wct-picker--compact .wct-prev__card { padding: 4px; gap: 3px; }
.wct-picker--compact .wct-prev__card i { height: 3px; }
.wct-picker--compact .wct-prev__card b { height: 4px; box-shadow: none; }
.wct-picker--compact .wct-name { font-size: 10.5px; line-height: 1.15; text-align: center; font-weight: 600; }
.wct-picker--compact .wct-opt:has(.wct-radio:checked)::after { top: -6px; right: -6px; width: 16px; height: 16px; background-size: 11px; }
.wct-picker--compact .wct-status { margin-top: 6px; font-size: 12px; }
/* A settings card that hosts the full picker. */
.wct-card { background: var(--wcs-raised); border: 1px solid var(--wcs-line); border-radius: var(--wcs-radius); box-shadow: var(--wcs-shadow); padding: 18px; }
.wct-card--page { max-width: 700px; margin: 40px auto 0; padding: 24px 28px; }
@media (max-width: 640px) { .wct-card--page { margin: 24px 16px 0; padding: 18px 16px; } }
@media (max-width: 480px) {
  .wct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wct-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .wct-picker--compact .wct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wct-picker--compact .wct-opt:last-child:nth-child(odd) { grid-column: auto; }
}

/* 10. Forced colours (Windows contrast themes): the system palette takes over; surfaces that
   relied on a shadow keep an edge, the chosen look is marked, the previews keep true colour. */
@media (forced-colors: active) {
  :root :is(.wcs-card, .wcs-btn2, .wct-opt, .wct-card, .wcx-card, .ld-card, .gh-panel, .stat-card, .detail-card, .cust-section) { border: 1px solid CanvasText; }
  .wct-opt:has(.wct-radio:checked) { outline: 3px solid Highlight; outline-offset: 1px; }
  .wct-opt:has(.wct-radio:checked)::after { forced-color-adjust: none; background-color: Highlight; }
  .wct-prev, .wct-prev * { forced-color-adjust: none; }
  :root :focus-visible { outline: 3px solid Highlight !important; }
}

/* 11. Reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .wct-opt { transition: none; }
}

/* [review8] 26 Sep 2026: the admin flag banner (admin/includes/admin-flag-banner.php) paints its tone inline, a light
   wash with dark ink. In Evening and Harbor the theme's light text landed on that light wash (1.03 to 1.07:1, the
   Access request notice was unreadable). Dark themes get the matching dark wash and light ink for each severity. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root .wcflag { border-color: var(--wcs-line-strong) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root .wcflag[style*="#EFF6FF"] { background: var(--wcs-info-bg) !important; color: var(--wcs-info-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root .wcflag[style*="#FFFBEB"] { background: var(--wcs-warn-bg) !important; color: var(--wcs-warn-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root .wcflag[style*="#FFF1F2"] { background: var(--wcs-bad-bg) !important; color: var(--wcs-bad-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root .wcflag :is(.wcflag-txt, .wcflag-txt *, .wcflag-ico, .wcflag-btn, .wcflag-pre, a) { color: inherit !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root .wcflag .wcflag-btn { border-color: currentColor !important; background: transparent !important; }


/* 12. [ui6] 26 Sep 2026: Evening and Harbor on the admin pages ranked 18 to 60 by use, the shared admin
   chrome they all carry, and the AA fixes the light themes needed on the same pages.

   12a. Dark-only page tokens. An admin page's own <style> block (and its style="" attributes) writes each
   light colour as var(--wcs-dk-<role>, <the colour it always had>). These variables exist ONLY here, under
   Evening and Harbor, so in Slate, Linen, Sage and High contrast the fallback paints and those looks stay
   exactly as they were; the dark themes paint the surface token. Pure white fills use var(--wcs-raised),
   which is white in every light theme. Colours that failed AA in the light themes use the all-theme tokens
   (--wcs-muted, --wcs-line-strong, the status inks) instead. Tool: /root/e2e/ui6/tokenize.py. */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) {
  --wcs-dk-raised: var(--wcs-raised);
  --wcs-dk-inset: var(--wcs-inset);
  --wcs-dk-chip: var(--wcs-chip);
  --wcs-dk-line: var(--wcs-line);
  --wcs-dk-line-strong: var(--wcs-line-strong);
  --wcs-dk-ink: var(--wcs-ink);
  --wcs-dk-ink-2: var(--wcs-ink-2);
  --wcs-dk-muted: var(--wcs-muted);
  --wcs-dk-sage: var(--wcs-sage-deep);
  --wcs-dk-sage-wash: var(--wcs-sage-wash);
  --wcs-dk-ok-bg: var(--wcs-ok-bg);     --wcs-dk-ok-ink: var(--wcs-ok-ink);
  --wcs-dk-warn-bg: var(--wcs-warn-bg); --wcs-dk-warn-ink: var(--wcs-warn-ink);
  --wcs-dk-bad-bg: var(--wcs-bad-bg);   --wcs-dk-bad-ink: var(--wcs-bad-ink);
  --wcs-dk-info-bg: var(--wcs-info-bg); --wcs-dk-info-ink: var(--wcs-info-ink);
  /* the declined state of the Owners only placeholder (css/wc-money-mask.css keeps these three raw) */
  --wcm-danger-ink: var(--wcs-bad-ink); --wcm-danger-wash: var(--wcs-bad-bg); --wcm-danger-line: var(--wcs-line-strong);
}

/* 12b. The operating pages on admin/css/ops.css (AI shift log, lead replies, projects, playbook, applicant
   triage) draw with their own --bg/--paper/--ink tokens; in the dark themes those follow the surface tokens.
   Scoped to pages that load ops.css, so no other page's same-named variables move. The dark masthead stays
   dark, and the two filled controls keep light-on-sage. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):has(link[href*="/admin/css/ops.css"]) {
  --bg: var(--wcs-ground); --paper: var(--wcs-raised); --paper-2: var(--wcs-chip); --paper-3: var(--wcs-inset);
  --rule: var(--wcs-line); --rule-soft: var(--wcs-line-soft);
  --ink: var(--wcs-ink); --ink-2: var(--wcs-ink-2); --ink-3: var(--wcs-muted);
  --forest: var(--wcs-sage-deep); --forest-deep: var(--wcs-ink);
  --sage: var(--wcs-sage); --sage-wash: var(--wcs-sage-wash); --sage-line: var(--wcs-sage-line);
  --gold: var(--wcs-gold); --gold-wash: var(--wcs-gold-wash); --gold-line: var(--wcs-line-strong); --gold-ink: var(--wcs-gold-ink);
  --good: var(--wcs-ok-ink); --bad: var(--wcs-bad-ink); --bad-wash: var(--wcs-bad-bg); --bad-line: var(--wcs-line-strong);
}
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):has(link[href*="/admin/css/ops.css"]) body .mast { background: var(--wcs-rail); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):has(link[href*="/admin/css/ops.css"]) body :is(.chips a.on, .btn.primary) { background: var(--wcs-sage-fill); border-color: var(--wcs-sage-fill); color: var(--wcs-on-fill); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):has(link[href*="/admin/css/ops.css"]) body .btn.primary:hover { background: var(--wcs-sage-fill-2); border-color: var(--wcs-sage-fill-2); }

/* 12c. The guide pages (admin Help, and the customer and cleaner guides, includes/guide-page.php) carry
   their own palette, whose dark half only follows the device. Under Evening and Harbor it follows the
   surface tokens; the forest bands (masthead, cheat sheet, step numbers) stay dark. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):has(.wc-guidebar) {
  --ground: var(--wcs-ground); --paper: var(--wcs-raised); --rule: var(--wcs-line);
  --ink: var(--wcs-ink); --ink-2: var(--wcs-ink-2); --ink-3: var(--wcs-muted);
  --sage: var(--wcs-sage-deep); --sage-wash: var(--wcs-sage-wash); --warn-wash: var(--wcs-warn-bg); --warn-ink: var(--wcs-warn-ink);
}

/* 12d. The fixed Report a problem pill and its dialog (admin/includes/admin-navigation.php paints them
   with raw colours). Every theme: the pill was drawn at 72% opacity, so its words were 3.4:1; it is now
   solid, sage-deep on the raised surface with a control edge. The dialog's fields and Cancel get a 3:1
   edge. Dark themes: the card, words and fields follow the surface tokens. */
:root #wcIssueFab { opacity: 1; background: var(--wcs-raised); color: var(--wcs-sage-deep); border-color: var(--wcs-line-strong); }
:root #wcIssueFab:is(:hover, :focus-visible) { background: var(--wcs-sage-wash); border-color: var(--wcs-sage-deep); }
:root #wcIssueFab:focus-visible { outline: 3px solid var(--wcs-focus-ring); outline-offset: 2px; }
:root .wc-issue-card :is(input, select, textarea), :root #wcIssueCancel { border-color: var(--wcs-line-strong); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .wc-issue-card { background: var(--wcs-raised); color: var(--wcs-ink); border: 1px solid var(--wcs-line); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .wc-issue-card :is(.wc-issue-sub, label) { color: var(--wcs-muted); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .wc-issue-card .wc-issue-msg { color: var(--wcs-sage-deep); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) #wcIssueCancel { background: var(--wcs-raised); color: var(--wcs-ink-2); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) #wcIssueSend { background: var(--wcs-sage-fill); border-color: var(--wcs-sage-fill); color: var(--wcs-on-fill); }

/* 12e. Shared admin chrome that still painted light-theme colours in the dark themes: the sidebar's
   systems chip (green-800 words) and current item (house ink), the writing tools' Speak and suggestion
   chips (sage fill used as text, 3.4:1), and dark "bg-*-900 text-white" buttons whose fill the text remaps
   above had turned light. */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .navv2__status-chip { color: var(--wcs-ok-ink); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) .navv2__item.is-active { color: var(--wcs-ink); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) :is(.wcw-mic:not(.is-live), .wcw-chip) { color: var(--wcs-sage-deep); }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-warm-900, .bg-gray-900, .bg-slate-900, .bg-stone-900, .bg-gray-800, .bg-warm-800).text-white { background-color: var(--wcs-sage-fill) !important; color: var(--wcs-on-fill) !important; }

/* 12f. More dark-only page tokens found by the second scan: a hover fill and a dark band that must stay dark
   (a page variable named for ink or sage was also used as a fill), and a sticky header's light glass. */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) {
  --wcs-dk-fill: var(--wcs-sage-fill);
  --wcs-dk-fill-2: var(--wcs-sage-fill-2);
  --wcs-dk-band: var(--wcs-rail);
  --wcs-dk-glass: var(--wcs-glass);
}

/* 12g. Shared pieces that failed AA in every theme on these pages, fixed with tokens:
   the sidebar count badges (white on amber-600, 3.2:1), pale sage words on the sage revenue bands
   (text-sage-200 on sage-600, 4.2:1), emerald-600 and red-500 buttons and toasts with white words
   (3.8:1 and 3.8:1), and the lighter AA greys admin/css/admin-responsive.css hard-codes for labels
   (right in the light themes, dark-on-dark in Evening and Harbor). */
html:root { --navv2-badge: var(--wcs-warn-ink); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) :is(.navv2__icon-btn-count, .navv2__item-badge) { background: var(--wcs-gold); color: var(--wcs-on-sage); border-color: var(--wcs-raised); }
:root :is([class*="from-sage-6"], [class*="from-sage-7"], [class*="from-sage-8"], .bg-sage-600, .bg-sage-700, .bg-sage-800) .text-sage-200 { color: var(--wcs-on-fill); }
html:root body :is(.bg-emerald-600, .bg-green-600).text-white { background-color: var(--wcs-ok-ink) !important; }
html:root body .bg-red-500.text-white { background-color: var(--wcs-bad-ink) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is(.bg-emerald-600, .bg-green-600).text-white { background-color: var(--wcs-sage-fill) !important; color: var(--wcs-on-fill) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body .bg-red-500.text-white { background-color: var(--wcs-bad-bg) !important; color: var(--wcs-bad-ink) !important; border: 1px solid var(--wcs-line-strong); }
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) :is(.rail-label, .email-rail p, .rail-empty, .thread-time, .thread-preview, .tab-btn, .kpi-label, .kpi .lbl, .card .lbl, .stat-mini .lbl) { color: var(--wcs-muted); }
/* Tailwind arbitrary text colours in markup: the sage ones become sage-deep, the mid greys muted. */
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([class*="text-[#4F6B4F]"], [class*="text-[#5E7259]"], [class*="text-[#556855]"], [class*="text-[#4F6350]"]) { color: var(--wcs-sage-deep) !important; }
html:is([data-ui-theme="evening"], [data-ui-theme="harbor"]):root body :is([class*="text-[#6"], [class*="text-[#7"], [class*="text-[#8"], [class*="text-[#9"]) { color: var(--wcs-muted) !important; }
/* The sidebar rail: the current section's label and the Add pin control sit on the sage fill; pure white
   words there, not the off-white rail ink (4.45:1 in Harbor). */
:root:is([data-ui-theme="evening"], [data-ui-theme="harbor"]) :is(.navv2__rail-btn.is-active .navv2__rail-label, .navv2__pins-tool--add) { color: var(--wcs-on-fill); }

/* 12h. Light themes too (measured in Slate, Linen and Sage on the same pages): the sidebar's agenda figure
   labels (#64748B on the ground, 4.2:1), blue chip words (blue-600 on blue-100, 4.2:1) and the pale red
   remove links (red-400, 2.8:1). */
:root .navv2__agenda-stat-label { color: var(--wcs-muted); }
:root :is(.bg-blue-100.text-blue-600, .bg-blue-100 .text-blue-600, .bg-blue-50.text-blue-600, .bg-blue-50 .text-blue-600) { color: var(--wcs-info-ink) !important; }
:root .text-red-400 { color: var(--wcs-bad-ink) !important; }

/* 12i. Every theme: status words drawn at 70% opacity (4.0:1 and under), green-600 and emerald-600 words
   (3.3:1 and 3.8:1 on white), red-600 on a red-50 chip (4.4:1), and the guide bar's pills (a 14% white edge). */
:root :is(.text-green-800, .text-green-700, .text-red-800, .text-red-700, .text-amber-800, .text-amber-700, .text-emerald-800, .text-emerald-700).opacity-70 { opacity: 1; }
:root :is(.text-green-600, .text-emerald-600) { color: var(--wcs-ok-ink); }
:root :is(.bg-red-50 .text-red-600, .bg-red-50.text-red-600) { color: var(--wcs-bad-ink); }
:root .wc-guidebar :is(a, button) { border-color: currentColor; }