/* ============================================================
   planflow-night.css — NIGHT MODE and HIGH CONTRAST across the
   PlanFlow UI (round 23, track I, 2026-10-17).

   Owner: "Night mode is not fully enabled when we are navigating
   through the Pages"; "real gaps with the Limits panel, the nav, the
   collapsed-tiles button, the inspector panel, the palette … the logo
   looks strange and inconsistent during the night mode or contrasting
   mode"; "look at how the blocks look in the night mode".

   HOW IT WORKS.  topbar.js (applyAppearance) mirrors the Appearance
   popover onto <html> as `wf-theme-night` / `wf-theme-contrast` (the
   bar, its popovers and the canvas-tools bar carry `is-night` /
   `is-contrast` themselves and keep their own token sets).  Every
   PlanFlow surface already paints itself from a scoped token set
   (--surface, --text, --label, --well-bg, …: sidebar-nav.css .wf-nav,
   planflow-inspector.css .pfi-root roots, planflow-blocks.css
   .block.wf-block, planflow-pages.css .page-root).  So the theme is:

     0. ONE palette per theme, as --nt-* tokens on <body> under the flag
        (night; contrast; night + contrast);
     1. ONE mapping of every component's tokens onto the --nt-* palette;
     2. the colours the components hardcode past their tokens (white
        milk buttons, #1F2D26 titles, the card SVG fills, the family
        tints, the pages' modals, the wire labels, …), each mapped to
        a palette token so the three themes share one rule set.

   Scope: every rule carries html.wf-theme-night / .wf-theme-contrast
   AND body.aw-newblocks — flag off, and day mode, are untouched
   (spec 37 walks the CSSOM and fails on any rule without both).
   Rules that fight an existing !important night/contrast rule
   (topbar.css shell overrides) win by specificity and are named in the
   README.
   ============================================================ */

/* ============================================================
   0. THE PALETTES — defined once, on the flagged body
   ============================================================ */
html.wf-theme-night body.aw-newblocks{
  --nt-ground:#0E1411;
  --nt-surface:rgba(28,36,32,.66);
  --nt-surface-solid:#1B221E;
  --nt-border:rgba(255,255,255,.12);
  --nt-divider:rgba(255,255,255,.13);
  --nt-text:#E7EFE9;
  --nt-label:#9FB4AA;
  --nt-label-hover:#CFE9DB;
  --nt-icon:#A9BEB4;
  --nt-icon-hover:#CFE9DB;
  --nt-muted:#8A9C92;
  --nt-muted-strong:#B6C8BE;
  --nt-faint:rgba(182,200,190,.78);
  --nt-row-hover:rgba(255,255,255,.06);
  --nt-header-hover:rgba(120,200,160,.13);
  --nt-active-bg:rgba(255,255,255,.08);
  --nt-active-text:#8FD3B0;
  --nt-accent:#6FB893;
  --nt-accent-line:rgba(111,184,147,.52);
  --nt-accent-soft:rgba(111,184,147,.14);
  --nt-cta:#227A4E;            /* white on it 5.3:1 (the bar's own #2E8B5C is 4.2:1) */
  --nt-cta-hover:#1C6841;
  --nt-cta-text:#8FD3B0;       /* text-only CTAs on the dark glass */
  --nt-danger:#E08A84;
  --nt-danger-text:#F2A79A;
  --nt-danger-soft:rgba(240,160,152,.14);
  --nt-warn-text:#E6C892;
  --nt-warn-soft:rgba(230,200,146,.14);
  --nt-ok-text:#8FD3B0;
  --nt-ok-strong:#BFEBD3;
  --nt-info-text:#B7BCF0;
  --nt-plum-text:#F0A0B0;
  --nt-plum-soft:rgba(240,160,176,.14);
  --nt-well-bg:rgba(255,255,255,.045);
  --nt-well-line:rgba(255,255,255,.09);
  --nt-well-shadow:inset 0 2px 5px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.04);
  --nt-field-bg:rgba(255,255,255,.07);
  --nt-field-bg-focus:rgba(255,255,255,.11);
  --nt-field-bd-focus:rgba(255,255,255,.3);
  --nt-focus-ring:rgba(120,200,160,.6);
  --nt-track-off:rgba(255,255,255,.22);
  --nt-scroll-thumb:rgba(255,255,255,.2);
  --nt-pop-bg:#1B221E;
  --nt-pop-text:#E7EFE9;
  --nt-pop-row:rgba(255,255,255,.07);
  --nt-pop-rowtext:#CFE9DB;
  --nt-pop-seltext:#BFEBD3;
  --nt-pop-selbg:rgba(143,211,176,.18);
  --nt-pop-border:rgba(255,255,255,.14);
  --nt-blur:blur(20px) saturate(160%);
  --nt-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.42);
  --nt-shadow-rest:0 6px 18px rgba(0,0,0,.35);
  --nt-shadow-hover:0 14px 34px rgba(0,0,0,.45);
  --nt-shadow-drag:0 24px 56px rgba(0,0,0,.55);
  --nt-shadow-pop:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.45);
  --nt-tooltip-bg:rgba(231,239,233,.97);
  --nt-tooltip-fg:#10231A;
  --nt-btn-bg:rgba(255,255,255,.08);
  --nt-btn-bg-hover:rgba(255,255,255,.14);
  --nt-btn-bg-active:rgba(255,255,255,.06);
  --nt-btn-line:transparent;
  --nt-card-fill:#222B26;
  --nt-card-fill-outer:#1B221E;
  --nt-card-outer-alpha:.9;
  --nt-card-stroke:rgba(255,255,255,.14);
  --nt-card-line:#8A9C92;
  --nt-panel-fill:#171E1A;
  --nt-panel-stroke:rgba(255,255,255,.14);
  --nt-port-bg:#1B221E;
  --nt-port-stroke:rgba(255,255,255,.24);
  --nt-conn:rgba(111,184,147,.8);
  --nt-conn-hover:#A8E2C4;       /* review fix 1: the wire layer's state tokens (hover / selected / loop / trigger) */
  --nt-conn-sel:#BFEBD3;
  --nt-loop:#A694FF;
  --nt-loop-hover:#C8BCFF;
  --nt-trigger:#E6B566;
  --nt-conn-label:#E7EFE9;
  --nt-conn-halo:#0E1411;
  --nt-modal-bg:rgba(27,34,30,.96);
  --nt-scrim:rgba(0,0,0,.55);
  --nt-img-bg:rgba(255,255,255,.06);
  --nt-mix-base:#1B221E;         /* the family tints are mixed towards this */
  --nt-mix-line-base:#1B221E;
  --nt-tint-pct:32%;
  --nt-line-pct:48%;
  --nt-pal-fill-pct:28%; --nt-pal-fill-hi-pct:38%; --nt-pal-fill-down-pct:46%;
  --nt-pal-line-pct:45%; --nt-pal-line-hi-pct:58%;
  --nt-pal-badge-fill-pct:34%; --nt-pal-badge-line-pct:50%;
  --nt-pal-ink-pct:35%; --nt-pal-ink-base:#E7EFE9;
  --nt-pal-badge-ink-pct:45%; --nt-pal-badge-ink-base:#FFFFFF;
  --nt-logo-glyph:#EAFBF1;
  --nt-dot-black:#C9D3CD;
  --nt-dot-gray:#7F8F87;
  --nt-gold:#E6C892;
  --nt-gold-soft:rgba(143,107,51,.3);
  --nt-gold-line:rgba(216,198,158,.35);
  --nt-toast-bg:rgba(31,45,38,.93);
  --nt-toast-border:rgba(255,255,255,.12);
}

/* HIGH CONTRAST on the light theme: solid surfaces, ink borders, no glass */
html.wf-theme-contrast:not(.wf-theme-night) body.aw-newblocks{
  --nt-ground:#F1F4F3;
  --nt-surface:#FFFFFF;
  --nt-surface-solid:#FFFFFF;
  --nt-border:#2B3A33;
  --nt-divider:#2B3A33;
  --nt-text:#0A1410;
  --nt-label:#10231A;
  --nt-label-hover:#000000;
  --nt-icon:#10231A;
  --nt-icon-hover:#000000;
  --nt-muted:#33453C;
  --nt-muted-strong:#10231A;
  --nt-faint:#33453C;
  --nt-row-hover:rgba(31,110,69,.14);
  --nt-header-hover:rgba(31,110,69,.16);
  --nt-active-bg:rgba(31,110,69,.16);
  --nt-active-text:#0A3D27;
  --nt-accent:#176B40;
  --nt-accent-line:#176B40;
  --nt-accent-soft:rgba(23,107,64,.12);
  --nt-cta:#155832;
  --nt-cta-hover:#0A3D27;
  --nt-cta-text:#0A3D27;
  --nt-danger:#8A2E27;
  --nt-danger-text:#8A2E27;
  --nt-danger-soft:rgba(138,46,39,.1);
  --nt-warn-text:#5A3F12;
  --nt-warn-soft:rgba(154,110,30,.14);
  --nt-ok-text:#0A3D27;
  --nt-ok-strong:#06301E;
  --nt-info-text:#2F379A;
  --nt-plum-text:#6E2434;
  --nt-plum-soft:rgba(110,36,52,.1);
  --nt-well-bg:#FFFFFF;
  --nt-well-line:#2B3A33;
  --nt-well-shadow:none;
  --nt-field-bg:#FFFFFF;
  --nt-field-bg-focus:#FFFFFF;
  --nt-field-bd-focus:#0A1410;
  --nt-focus-ring:#0A3D27;
  --nt-track-off:#5B6E64;
  --nt-scroll-thumb:#5B6E64;
  --nt-pop-bg:#FFFFFF;
  --nt-pop-text:#0A1410;
  --nt-pop-row:rgba(31,110,69,.12);
  --nt-pop-rowtext:#0A3D27;
  --nt-pop-seltext:#0A3D27;
  --nt-pop-selbg:rgba(31,110,69,.18);
  --nt-pop-border:#2B3A33;
  --nt-blur:none;
  --nt-shadow:0 0 0 1px #2B3A33,0 10px 26px rgba(0,0,0,.12);
  --nt-shadow-rest:0 0 0 1px #2B3A33;
  --nt-shadow-hover:0 0 0 1px #2B3A33,0 10px 26px rgba(0,0,0,.14);
  --nt-shadow-drag:0 0 0 1px #2B3A33,0 20px 46px rgba(0,0,0,.2);
  --nt-shadow-pop:0 0 0 1px #2B3A33,0 10px 26px rgba(0,0,0,.14);
  --nt-tooltip-bg:#10231A;
  --nt-tooltip-fg:#FFFFFF;
  --nt-btn-bg:#FFFFFF;
  --nt-btn-bg-hover:rgba(31,110,69,.12);
  --nt-btn-bg-active:rgba(31,110,69,.18);
  --nt-btn-line:#2B3A33;
  --nt-card-fill:#FFFFFF;
  --nt-card-fill-outer:#FFFFFF;
  --nt-card-outer-alpha:1;
  --nt-card-stroke:#2B3A33;
  --nt-card-line:#10231A;
  --nt-panel-fill:#FFFFFF;
  --nt-panel-stroke:#2B3A33;
  --nt-port-bg:#FFFFFF;
  --nt-port-stroke:#2B3A33;
  --nt-conn:#176B40;
  --nt-conn-hover:#0F5A33;
  --nt-conn-sel:#0A3D27;
  --nt-loop:#5B3DCC;
  --nt-loop-hover:#3F2A99;
  --nt-trigger:#8A5612;
  --nt-conn-label:#0A1410;
  --nt-conn-halo:#FFFFFF;
  --nt-modal-bg:#FFFFFF;
  --nt-scrim:rgba(10,20,16,.5);
  --nt-img-bg:#FFFFFF;
  --nt-mix-base:#FFFFFF;
  --nt-mix-line-base:#0A1410;
  --nt-tint-pct:24%;
  --nt-line-pct:70%;
  --nt-pal-fill-pct:12%; --nt-pal-fill-hi-pct:20%; --nt-pal-fill-down-pct:28%;
  --nt-pal-line-pct:70%; --nt-pal-line-hi-pct:85%;
  --nt-pal-badge-fill-pct:24%; --nt-pal-badge-line-pct:70%;
  --nt-pal-ink-pct:45%; --nt-pal-ink-base:#0A1410;
  --nt-pal-badge-ink-pct:60%; --nt-pal-badge-ink-base:#000000;
  --nt-logo-glyph:#0A1410;
  --nt-dot-black:#0A1410;
  --nt-dot-gray:#5B6E64;
  --nt-gold:#5A3F12;
  --nt-gold-soft:rgba(143,107,51,.18);
  --nt-gold-line:#8F6B33;
  --nt-toast-bg:#10231A;
  --nt-toast-border:#FFFFFF;
}

/* HIGH CONTRAST on the night theme: solid near-black, pale borders, white text */
html.wf-theme-night.wf-theme-contrast body.aw-newblocks{
  --nt-ground:#0E1411;
  --nt-surface:#0E1411;
  --nt-surface-solid:#0E1411;
  --nt-border:#CFE9DB;
  --nt-divider:#7FA793;
  --nt-text:#FFFFFF;
  --nt-label:#E7EFE9;
  --nt-label-hover:#FFFFFF;
  --nt-icon:#E7EFE9;
  --nt-icon-hover:#FFFFFF;
  --nt-muted:#B6C8BE;
  --nt-muted-strong:#E7EFE9;
  --nt-faint:#B6C8BE;
  --nt-row-hover:rgba(143,211,176,.16);
  --nt-header-hover:rgba(143,211,176,.2);
  --nt-active-bg:rgba(143,211,176,.2);
  --nt-active-text:#BFEBD3;
  --nt-accent:#8FD3B0;
  --nt-accent-line:#8FD3B0;
  --nt-accent-soft:rgba(143,211,176,.18);
  --nt-cta:#1C6841;
  --nt-cta-hover:#155832;
  --nt-cta-text:#BFEBD3;
  --nt-danger:#F2A79A;
  --nt-danger-text:#FFB8AE;
  --nt-danger-soft:rgba(242,167,154,.16);
  --nt-warn-text:#F2D9A6;
  --nt-warn-soft:rgba(242,217,166,.16);
  --nt-ok-text:#BFEBD3;
  --nt-ok-strong:#D8F0E3;
  --nt-info-text:#CDD1F5;
  --nt-plum-text:#F7BFCB;
  --nt-plum-soft:rgba(247,191,203,.16);
  --nt-well-bg:#0E1411;
  --nt-well-line:#7FA793;
  --nt-well-shadow:none;
  --nt-field-bg:#0E1411;
  --nt-field-bg-focus:#0E1411;
  --nt-field-bd-focus:#FFFFFF;
  --nt-focus-ring:#BFEBD3;
  --nt-track-off:#7FA793;
  --nt-scroll-thumb:#7FA793;
  --nt-pop-bg:#0E1411;
  --nt-pop-text:#FFFFFF;
  --nt-pop-row:rgba(143,211,176,.16);
  --nt-pop-rowtext:#FFFFFF;
  --nt-pop-seltext:#BFEBD3;
  --nt-pop-selbg:rgba(143,211,176,.22);
  --nt-pop-border:#CFE9DB;
  --nt-blur:none;
  --nt-shadow:0 0 0 1px #CFE9DB,0 10px 28px rgba(0,0,0,.55);
  --nt-shadow-rest:0 0 0 1px #CFE9DB;
  --nt-shadow-hover:0 0 0 1px #CFE9DB,0 10px 28px rgba(0,0,0,.55);
  --nt-shadow-drag:0 0 0 1px #CFE9DB,0 20px 46px rgba(0,0,0,.6);
  --nt-shadow-pop:0 0 0 1px #CFE9DB,0 10px 28px rgba(0,0,0,.55);
  --nt-tooltip-bg:#FFFFFF;
  --nt-tooltip-fg:#0A1410;
  --nt-btn-bg:#0E1411;
  --nt-btn-bg-hover:rgba(143,211,176,.16);
  --nt-btn-bg-active:rgba(143,211,176,.22);
  --nt-btn-line:#CFE9DB;
  --nt-card-fill:#0E1411;
  --nt-card-fill-outer:#0E1411;
  --nt-card-outer-alpha:1;
  --nt-card-stroke:#CFE9DB;
  --nt-card-line:#E7EFE9;
  --nt-panel-fill:#0E1411;
  --nt-panel-stroke:#7FA793;
  --nt-port-bg:#0E1411;
  --nt-port-stroke:#CFE9DB;
  --nt-conn:#8FD3B0;
  --nt-conn-hover:#D8F0E3;
  --nt-conn-sel:#FFFFFF;
  --nt-loop:#C8BCFF;
  --nt-loop-hover:#E0D8FF;
  --nt-trigger:#F2D9A6;
  --nt-conn-label:#FFFFFF;
  --nt-conn-halo:#0E1411;
  --nt-modal-bg:#0E1411;
  --nt-scrim:rgba(0,0,0,.7);
  --nt-img-bg:#0E1411;
  --nt-mix-base:#0E1411;
  --nt-mix-line-base:#FFFFFF;
  --nt-tint-pct:30%;
  --nt-line-pct:70%;
  --nt-pal-fill-pct:30%; --nt-pal-fill-hi-pct:40%; --nt-pal-fill-down-pct:50%;
  --nt-pal-line-pct:75%; --nt-pal-line-hi-pct:85%;
  --nt-pal-badge-fill-pct:36%; --nt-pal-badge-line-pct:75%;
  --nt-pal-ink-pct:20%; --nt-pal-ink-base:#FFFFFF;
  --nt-pal-badge-ink-pct:40%; --nt-pal-badge-ink-base:#FFFFFF;
  --nt-logo-glyph:#FFFFFF;
  --nt-dot-black:#E7EFE9;
  --nt-dot-gray:#B6C8BE;
  --nt-gold:#F2D9A6;
  --nt-gold-soft:rgba(143,107,51,.35);
  --nt-gold-line:#E6C892;
  --nt-toast-bg:#0E1411;
  --nt-toast-border:#CFE9DB;
}

/* ============================================================
   1. THE MAPPING — every component's own tokens onto the palette.
      One rule; the component sheets keep painting from their tokens.
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(
  .wf-nav, .wf-limitpanel, .wf-iconpick,
  .pfi-root .wf-insp, .wf-modal.pfi-root, .wf-cw.pfi-root, .wf-ss.pfi-root, .wf-toast.pfi-root, .wf-pop.pfi-root, .wf-pw.pfi-root, .pfi-root .wf-group, .wf-sd.pfi-root,
  .block.wf-block, .wf-block.wf-frame-card, .canvas-item.is-simple-frame, .wf-output-overlay,
  .page-root, #dashboard-modal-mount, .rm-host, .chat-dialog, .chat-backdrop
){
  --surface:var(--nt-surface);
  --surface-solid:var(--nt-surface-solid);
  --sticky-bg:var(--nt-surface-solid);
  --substuck-bg:var(--nt-surface-solid);
  --border:var(--nt-border);
  --divider:var(--nt-divider);
  --label:var(--nt-label);
  --label-hover:var(--nt-label-hover);
  --header-hover:var(--nt-header-hover);
  --text:var(--nt-text);
  --icon:var(--nt-icon);
  --icon-hover:var(--nt-icon-hover);
  --muted:var(--nt-muted);
  --row-hover:var(--nt-row-hover);
  --active-bg:var(--nt-active-bg);
  --active-text:var(--nt-active-text);
  --accent:var(--nt-accent);
  --accent-line:var(--nt-accent-line);
  --dot-black:var(--nt-dot-black);
  --dot-gray:var(--nt-dot-gray);
  --search-bd-focus:var(--nt-field-bd-focus);
  --search-bg-focus:var(--nt-field-bg-focus);
  --focus:var(--nt-focus-ring);
  --tooltip-bg:var(--nt-tooltip-bg);
  --tooltip-fg:var(--nt-tooltip-fg);
  --field-bg:var(--nt-field-bg);
  --well-bg:var(--nt-well-bg);
  --well-line:var(--nt-well-line);
  --well-shadow:var(--nt-well-shadow);
  --field-bg-focus:var(--nt-field-bg-focus);
  --field-bd-focus:var(--nt-field-bd-focus);
  --focus-ring:var(--nt-focus-ring);
  --track-off:var(--nt-track-off);
  --cta:var(--nt-cta);
  --cta-hover:var(--nt-cta-hover);
  --danger:var(--nt-danger);
  --scroll-thumb:var(--nt-scroll-thumb);
  --pop-bg:var(--nt-pop-bg);
  --blur:var(--nt-blur);
  --shadow:var(--nt-shadow);
  --shadow-rest:var(--nt-shadow-rest);
  --shadow-hover:var(--nt-shadow-hover);
  --shadow-drag:var(--nt-shadow-drag);
  --shadow-pop:var(--nt-shadow-pop);
  --port-bg:var(--nt-port-bg);
  --port-stroke:var(--nt-port-stroke);
  --conn:var(--nt-conn);
  --panel-fill:var(--nt-panel-fill);
  --panel-stroke:var(--nt-panel-stroke);
  /* the planning widget's second vocabulary (planflow-inspector.css ~1160+) */
  --ink:var(--nt-text);
  --ink-soft:var(--nt-muted-strong);
  --well:var(--nt-well-bg);
  --wf-ink:var(--nt-text);
  /* the pages' aliases (planflow-pages.css §0) */
  --pf-text:var(--nt-text);
  --pf-border:var(--nt-border);
  --pf-accent:var(--nt-accent);
  --pf-danger-text:var(--nt-danger-text);
  --pf-badge-green:var(--nt-ok-text);
  --pf-badge-amber:var(--nt-warn-text);
}
/* the legacy page components inside the page root read the app's own
   :root names (main.css); under a theme the page root re-declares them
   for its subtree only, so the Dashboard's units, legends and tables
   follow the theme too (the owner's first report: the pages). */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root, #dashboard-modal-mount, .rm-host, .chat-dialog){
  --bg:var(--nt-ground);
  --bg-soft:var(--nt-surface-solid);
  --bg-card:var(--nt-surface-solid);
  --bg-canvas:var(--nt-ground);
  --text-muted:var(--nt-label);
  --border-strong:var(--nt-border);
  --accent-2:var(--nt-accent);
  --accent-3:var(--nt-accent);
  --shadow-soft:var(--nt-shadow-rest);
  --shadow-medium:var(--nt-shadow-pop);
  --error:var(--nt-danger-text);
  --warn:var(--nt-warn-text);
  --info:var(--nt-info-text);
  /* the run / block status pills (main.css --st-*) carry WHITE text on the
     token: these shades are the first of each hue to clear 4.5:1 under it
     (the day's --st-completed #2e8e5d is 4.08:1 — the Workflows table's
     "completed" pill, measured by spec 37's sweep) */
  --st-completed:#227A4E;
  --st-approved:#2A7A4F;
  --st-running:#8F5A12;
  --st-needs-review:#8A5612;
  --st-waiting:#6E5A1C;
  --st-not-started:#5B6E64;
  --st-skipped:#5B6E64;
  --st-stopped:#5A5A5A;
  --st-failed:#A33F3F;
}
/* the model / option popover is portalled to <body> with its own names */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-pop.pfi-root{
  --pop-bg:var(--nt-pop-bg); --pop-text:var(--nt-pop-text); --pop-row:var(--nt-pop-row); --pop-rowtext:var(--nt-pop-rowtext);
  --pop-seltext:var(--nt-pop-seltext); --pop-selbg:var(--nt-pop-selbg); --pop-acc:var(--nt-accent); --pop-thumb:var(--nt-scroll-thumb);
  border-color:var(--nt-pop-border);
  box-shadow:var(--nt-shadow-pop);
}

/* ============================================================
   2. THE PAGES (planflow-pages.css) — the ground goes with the theme
      (overrides planflow-pages.css §10, which kept the pages light)
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks.route-page .page-root{background:var(--nt-ground);color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root,#dashboard-modal-mount,.rm-host,.chat-dialog) .btn{
  background:var(--nt-btn-bg);color:var(--nt-label);box-shadow:inset 0 0 0 1px var(--nt-btn-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root,#dashboard-modal-mount,.rm-host,.chat-dialog) .btn:hover{
  background:var(--nt-btn-bg-hover);color:var(--nt-label-hover);box-shadow:inset 0 0 0 1px var(--nt-btn-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root,#dashboard-modal-mount,.rm-host,.chat-dialog) .btn:active{
  background:var(--nt-btn-bg-active)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root,#dashboard-modal-mount,.rm-host,.chat-dialog) .btn:not(.btn-quiet):not(.btn-ghost):not(.btn-danger):not(.danger):not(.lib-btn-danger){
  color:#fff;background:var(--nt-cta);box-shadow:none}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root,#dashboard-modal-mount,.rm-host,.chat-dialog) .btn:not(.btn-quiet):not(.btn-ghost):not(.btn-danger):not(.danger):not(.lib-btn-danger):hover{
  color:#fff;background:var(--nt-cta-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root,#dashboard-modal-mount,.rm-host,.chat-dialog) :is(.btn.btn-danger,.btn.danger){color:#fff;background:#AC4B46;box-shadow:none}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .page-dashboard .card-expand{background:var(--nt-btn-bg);border-color:var(--nt-border);color:var(--nt-icon)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .page-dashboard .card-expand:hover{background:var(--nt-btn-bg-hover);color:var(--nt-label-hover);border-color:var(--nt-border)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root :is(.lib-chip,.audit-action-chip,.admin-usage-picker-btn){background:var(--nt-btn-bg);color:var(--nt-label);border-color:var(--nt-border)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root :is(.lib-chip:hover,.admin-usage-picker-btn:hover){background:var(--nt-btn-bg-hover);color:var(--nt-label-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .lib-chip.on{color:var(--nt-active-text);background:var(--nt-accent-soft);border-color:var(--nt-accent-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .audit-action-chip.audit-bucket-grant{color:var(--nt-active-text);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root :is(.audit-action-chip.audit-bucket-warn,.exec-banner.warn,.upgrade-callout){color:var(--nt-warn-text);background:var(--nt-warn-soft);border-color:var(--nt-warn-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root :is(.audit-action-chip.audit-bucket-danger,.exec-banner.error){color:var(--nt-danger-text);background:var(--nt-danger-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .exec-banner.success{color:var(--nt-active-text);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .admin-action-hint code{color:var(--nt-active-text);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .usage-bar{background:var(--nt-track-off)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .admin-users-table tbody tr.admin-row-selected{background:var(--nt-accent-soft)}
/* the pages' modals: the dashboard metric modal, the repeat modal, the chat dialog, the purge modal */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(#dashboard-modal-mount .modal-backdrop,.rm-host .rm-backdrop,.chat-backdrop,.page-root .purge-modal-scrim){background:var(--nt-scrim)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(#dashboard-modal-mount .modal-shell,.rm-host .rm-dialog,.chat-dialog,.page-root .purge-modal){
  background:var(--nt-modal-bg);color:var(--nt-text);border-color:var(--nt-border);
  -webkit-backdrop-filter:var(--nt-blur);backdrop-filter:var(--nt-blur);box-shadow:var(--nt-shadow),0 28px 70px rgba(0,0,0,.4)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .page-root .purge-modal-head{background:var(--nt-danger-soft)}
/* the legacy page sheets' hardcoded whites (#fff / #fafdfb) that planflow-pages.css
   never token-mapped: spec 32's night sweep found .admin-audit-foot's hint at 2.1:1;
   the rest are the same family (saas-shell.css / dashboard.css / components.css) */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root .admin-audit-foot,.page-root .purge-modal-check,.page-root .purge-modal-foot,.rm-host .rm-mode-card,.chat-dialog .chat-msg .chat-content,.page-root .page-dashboard .range-seg,#dashboard-modal-mount .modal-head-r .range-seg,#dashboard-modal-mount .modal-breakdown){background:var(--nt-well-bg);border-color:var(--nt-well-line);color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root .admin-usage-picker-pop,.page-root .page-dashboard .action-menu-pop){background:var(--nt-pop-bg);border-color:var(--nt-pop-border);color:var(--nt-pop-text);box-shadow:var(--nt-shadow-pop)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root .page-dashboard .kpi-expand,#dashboard-modal-mount .modal-close,.page-root .user-pill){background:var(--nt-btn-bg);color:var(--nt-label);border-color:var(--nt-border)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root .page-dashboard .tab-row,.page-root .page-dashboard .range-seg,#dashboard-modal-mount .tab-row,#dashboard-modal-mount .range-seg) button.active{background:var(--nt-active-bg);color:var(--nt-active-text)}
/* REVIEW FIX 1: the metric modal's Chart / Table toggle (dashboard.css
   .tab-row button.active: a white card) kept its white under night with the
   themed light text on it (measured 1.17:1) */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks #dashboard-modal-mount :is(.tab-row,.range-seg) button{color:var(--nt-label);background:transparent}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks #dashboard-modal-mount :is(.tab-row,.range-seg) button:hover{color:var(--nt-label-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.page-root .cred-form .select,.chat-dialog .chat-input-row){background:var(--nt-field-bg);color:var(--nt-text);border-color:var(--nt-border)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .rm-host .rm-mode-card:hover{background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .rm-host .rm-mode-card.selected{background:var(--nt-accent-soft)}

/* ============================================================
   3. THE NAV, ITS LIMITS PANEL, THE LOGO AND THE RAIL
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-nav :is(.wf-help__box,.wf-motion__box,.wf-limits__box){border-color:var(--nt-border);box-shadow:var(--nt-shadow-rest)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-iobar,.wf-meter__track){background:var(--nt-track-off)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-meter.is-warn .wf-meter__pct{color:var(--nt-warn-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-meter.is-crit .wf-meter__pct{color:var(--nt-danger-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-meter__sub span{color:var(--nt-muted)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-iconpick{background:var(--nt-pop-bg);border-color:var(--nt-pop-border);box-shadow:var(--nt-shadow-pop)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-racts .wf-delete:hover{color:var(--nt-danger-text);background:var(--nt-danger-soft)}
/* the collapsed nav rail: topbar.css:1483 paints it with !important (and
   :2230 for night) — restated here from the palette so contrast gets it too */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks.route-workflow .app > .wf-nav.is-rail{
  background:var(--nt-surface) !important;border-color:var(--nt-border) !important;box-shadow:var(--nt-shadow) !important}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-iconbtn.wf-nav__collapse{color:var(--nt-label) !important}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-iconbtn.wf-nav__collapse:hover{background:var(--nt-header-hover) !important;color:var(--nt-label-hover) !important}
/* the logo: the same tile as every other chrome tile (dock, rail, zoom,
   help) — the dark gradient brand tile reads as a foreign object in night
   and in contrast; the glyph keeps its light stroke on the dark tiles and
   turns ink on the white contrast tile */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-logo{
  background:var(--nt-surface);border-color:var(--nt-border);box-shadow:var(--nt-shadow);
  -webkit-backdrop-filter:var(--nt-blur);backdrop-filter:var(--nt-blur)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-logo:focus-visible{box-shadow:0 0 0 2px var(--nt-focus-ring),var(--nt-shadow)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-logo__mark{stroke:var(--nt-logo-glyph);filter:none}

/* ============================================================
   4. THE TOPBAR'S CANVAS CHROME: zoom group, help tile, the Run button
      (the bar itself carries is-night / is-contrast tokens of its own)
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-toolbar .toolbar-group{
  background:var(--nt-surface) !important;border-color:var(--nt-border) !important;box-shadow:var(--nt-shadow) !important;
  -webkit-backdrop-filter:var(--nt-blur);backdrop-filter:var(--nt-blur)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-toolbar .toolbar-group :is(.btn,.zoom-toggle),
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .zoom-pct{color:var(--nt-label)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-toolbar .toolbar-group .btn:hover,
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .zoom-pct:hover{background:var(--nt-header-hover) !important;color:var(--nt-label-hover) !important}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .zoom-pct:focus{background:var(--nt-field-bg-focus);border-color:var(--nt-focus-ring)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-toolbar .toolbar-group .btn:focus-visible{box-shadow:0 0 0 2px var(--nt-focus-ring)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .app > .toolbar-group.toolbar-help{
  background:var(--nt-surface);border-color:var(--nt-border);box-shadow:var(--nt-shadow);
  -webkit-backdrop-filter:var(--nt-blur);backdrop-filter:var(--nt-blur)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .app > .toolbar-group.toolbar-help .btn{color:var(--nt-label)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .app > .toolbar-group.toolbar-help .btn:hover{background:var(--nt-header-hover) !important;color:var(--nt-label-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .app > .toolbar-group.toolbar-help .btn:focus-visible{outline-color:var(--nt-focus-ring)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-bar .wf-cta-run:not(.is-running):not(.is-disabled){color:var(--nt-cta-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-bar .wf-cta-run.is-disabled{color:var(--nt-muted);background:var(--nt-row-hover)}
/* the bar's popover switch track / the appearance rows */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-bpop .wf-switch{background:var(--nt-track-off)}
/* REVIEW FIX 1: the round-23 chrome of track H — the collapsed-chrome Run
   tile and the collapsed-palette tile in the dock column (#aw-dockcol,
   main.css / topbar.css) and the palette's hover-revealed collapse chevron —
   ship with the day's white glass and ink (measured under night: tile
   rgb(149,152,150) beside the dark logo tile, glyph 2.64:1; chevron 2.19:1).
   The tiles wear the dock tile's recipe, the chevron the palette's ink. */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-runtile,.wf-paltile){
  color:var(--nt-label);background:var(--nt-surface);border-color:var(--nt-border);box-shadow:var(--nt-shadow);
  -webkit-backdrop-filter:var(--nt-blur);backdrop-filter:var(--nt-blur)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-runtile,.wf-paltile):hover{background:var(--nt-header-hover);color:var(--nt-label-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-runtile,.wf-paltile):focus-visible{box-shadow:0 0 0 2px var(--nt-focus-ring),var(--nt-shadow)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-runtile.is-running{color:var(--nt-ok-text);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-runtile.is-paused{color:var(--nt-ok-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .palette .palette__collapse{color:var(--nt-label)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .palette .palette__collapse:hover{background:var(--nt-header-hover);color:var(--nt-label-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .palette .palette__collapse:focus-visible{box-shadow:0 0 0 2px var(--nt-focus-ring)}
/* REVIEW FIX 1: the canvas help popover.  panels.css paints it dark under
   html.wf-theme-night (:201) for its original classes (.help-title,
   .help-list, .kbd); the round-23 rewrite (track H, main.css: .wf-help__t,
   .wf-help__d, .wf-kbd) hardcodes the day's ink, so under night it read
   dark-on-dark (measured: description 1.13:1, title 2.11:1, key caps
   2.05:1).  Both vocabularies are mapped here, and contrast gets the
   popover too. */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-help-popover{
  background:var(--nt-modal-bg);color:var(--nt-text);border-color:var(--nt-border);box-shadow:var(--nt-shadow-pop);
  -webkit-backdrop-filter:var(--nt-blur);backdrop-filter:var(--nt-blur)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-help-popover :is(.wf-help__t,.help-title){color:var(--nt-label)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-help-popover :is(.wf-help__d,.help-list li){color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-help-popover :is(.wf-help__d small,.wf-help__plus){color:var(--nt-muted-strong)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-help-popover :is(.wf-kbd,.kbd){background:var(--nt-well-bg);border-color:var(--nt-well-line);color:var(--nt-label)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-help-popover .wf-help__list li{border-top-color:var(--nt-divider)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-help-popover em{color:var(--nt-ok-text)}

/* ============================================================
   5. THE PALETTE (components.css .aw-newblocks .palette)
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .palette{
  --pf-pal-surface:var(--nt-surface);--pf-pal-edge:var(--nt-border);--pf-pal-shadow:var(--nt-shadow);
  --pf-pal-blur:var(--nt-blur);--pf-pal-focus:var(--nt-focus-ring);--pf-pal-ink-base:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .palette .btn[data-add-block]{
  --pf-pal-fill:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-fill-pct),var(--nt-mix-base));
  --pf-pal-fill-hi:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-fill-hi-pct),var(--nt-mix-base));
  --pf-pal-fill-down:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-fill-down-pct),var(--nt-mix-base));
  --pf-pal-line:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-line-pct),var(--nt-mix-line-base));
  --pf-pal-line-hi:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-line-hi-pct),var(--nt-mix-line-base));
  --pf-pal-line-down:var(--pf-pal-line-hi);
  --pf-pal-badge-fill:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-badge-fill-pct),var(--nt-mix-base));
  --pf-pal-badge-line:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-badge-line-pct),var(--nt-mix-line-base));
  --pf-pal-ink:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-ink-pct),var(--nt-pal-ink-base));
  box-shadow:none}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .palette .btn[data-add-block]:hover{box-shadow:0 4px 12px rgba(0,0,0,.25)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .palette .pf-pal__badge{color:color-mix(in srgb,var(--pf-pal-family) var(--nt-pal-badge-ink-pct),var(--nt-pal-badge-ink-base))}

/* ============================================================
   6. THE INSPECTOR PANEL and the windows that share its root
      (planning widget, chat window, step discussion, modals, dock)
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn{background:var(--nt-btn-bg);box-shadow:inset 0 0 0 1px var(--nt-btn-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn:hover{background:var(--nt-btn-bg-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn:active{background:var(--nt-btn-bg-active)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn--ghost{background:transparent;box-shadow:none}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn--ghost:hover{background:var(--nt-btn-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn--danger:hover{color:var(--nt-danger-text);background:var(--nt-danger-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.pfi-root .wf-btn--solid,.wf-modal.pfi-root .wf-btn--solid){color:#fff;background:var(--nt-cta);box-shadow:none}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.pfi-root .wf-btn--solid:hover,.wf-modal.pfi-root .wf-btn--solid:hover){color:#fff;background:var(--nt-cta-hover);border-color:var(--nt-cta-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-modal.pfi-root .wf-btn{background:var(--nt-btn-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-modal.pfi-root .wf-btn:hover{background:var(--nt-btn-bg-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-modal.pfi-root .wf-btn--danger{color:var(--nt-danger-text);background:var(--nt-danger-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn--ok{color:var(--nt-ok-text);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn--ok:hover{color:var(--nt-ok-strong)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn.is-done{color:var(--nt-ok-text);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn--split{color:var(--nt-ok-text);box-shadow:inset 0 0 0 1.5px var(--nt-accent-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-btn--split:hover{color:var(--nt-ok-strong);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-ichip__box{border-color:var(--nt-border);box-shadow:var(--nt-shadow-rest)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-rail__tip{background:var(--nt-tooltip-bg);color:var(--nt-tooltip-fg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-itool--pin[data-on="1"]{background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-badge--data{color:var(--nt-ok-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-badge--trigger{color:var(--nt-warn-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-status.s-completed,.wf-env__status.is-on,.wf-toggle__mark,.wf-plr__btn.is-on){color:var(--nt-ok-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-status.s-running,.wf-exec__sumd.is-busy,.wf-review__hd svg){color:var(--nt-warn-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-status.s-failed,.s-failed .wf-hrun__sub,.s-failed .wf-hrun__ver,.s-failed .wf-hrun__title,.wf-file.is-failed .wf-file__ico,.wf-file.is-failed .wf-file__sz,.wf-file__err,.wf-file__rm:hover,.wf-err__do,.wf-err__raw){color:var(--nt-danger-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .s-change .wf-hrun__ver{color:var(--nt-info-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-hrun__err{color:var(--nt-danger-text);background:var(--nt-danger-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-err__rawtx{color:var(--nt-muted-strong);background:var(--nt-field-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-cw.pfi-root .wf-cw__note{color:var(--nt-danger-text);background:var(--nt-danger-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-ask__err{background:var(--nt-danger-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-out__preview img,.wf-out__thumb--img,.wf-out__gpic){background:var(--nt-img-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-bub--user,.wf-plan__msg--user){color:var(--nt-ok-strong);background:var(--nt-accent-soft);border-color:var(--nt-accent-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-compose__send,.wf-ask__send){background:var(--nt-cta)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-compose__send:hover,.wf-ask__send:hover){background:var(--nt-cta-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-hrun__use{color:var(--nt-ok-text);background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-hrun__use.is-sel{color:var(--nt-ok-strong)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-plr__btn,.wf-pw__src,.wf-plan__subnote){background:var(--nt-btn-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-plr__btn:hover,.wf-pw__src:hover,.wf-pw__src.is-open,.wf-pw__close:hover,.wf-plan__save:hover,.wf-review__hdtx--name:hover,.wf-plr__name:hover,.wf-plan__subtx:hover){background:var(--nt-btn-bg-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-review__hdtx--name:focus,.wf-plr__name:focus,.wf-plan__subtx:focus,.wf-plan__subnote:focus){background:var(--nt-field-bg-focus)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-plan__btns,.wf-plan__subbtns){background:var(--nt-pop-bg);box-shadow:var(--nt-shadow-pop)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-plan__inh-cap,.wf-plan__inh-n,.wf-plan__inh-t,.wf-sec__hint,.wf-planstrip__hint,.wf-plan__subtx:empty::before,.wf-plan__subnote::placeholder,.wf-plan__grip){color:var(--nt-faint)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-plan__inh{background:var(--nt-well-bg);border-color:var(--nt-well-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-plan__subtog,.wf-plan__subadd,.wf-grp__plantog,.wf-plan__subn,.wf-grp__pn){color:var(--nt-ok-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-plan__subn,.wf-grp__pn){background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-vpop__hd,.wf-vbtn){color:var(--nt-plum-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-vpop__dot{background:var(--nt-plum-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-vbtn{background:var(--nt-plum-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-exec__bar,.wf-miniBar,.wf-file__bar){background:var(--nt-track-off)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-pw__body,.wf-sd__body)::-webkit-scrollbar-thumb{background:var(--nt-scroll-thumb)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-modal.pfi-root{background:var(--nt-scrim)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-modal__card{background:var(--nt-modal-bg);box-shadow:var(--nt-shadow),0 28px 70px rgba(0,0,0,.4)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root .wf-modal__check input:checked::after{border-color:#fff}
/* the dock: the collapsed tiles and the group control wear the same badge
   card as the day (a white card at .55); on dark surfaces it turns into
   the panel's well so the glyph keeps its contrast */
/* REVIEW FIX 1: the open panel's own badge card (.wf-insp__corner, the same
   badgeCardSvg as the rail tile) was left out — its "AI" kept the day's
   #3C5247 on the night panel (measured 2.0:1). */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-group__badge,.wf-railbtn--badge,.wf-insp__corner) svg rect[fill="#ffffff"]{fill:var(--nt-text);fill-opacity:.1}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-group__badge,.wf-railbtn--badge,.wf-insp__corner) svg rect[stroke="#ffffff"]{stroke:var(--nt-border);stroke-opacity:1}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-group__badge,.wf-railbtn--badge,.wf-insp__corner) svg :is(g[stroke="#3C5247"],text){stroke:var(--nt-icon);fill:var(--nt-icon)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .pfi-root :is(.wf-group__badge,.wf-railbtn--badge,.wf-insp__corner) svg g[stroke="#3C5247"]{fill:none}
html.wf-theme-contrast:not(.wf-theme-night) body.aw-newblocks .pfi-root :is(.wf-group__badge,.wf-railbtn--badge,.wf-insp__corner) svg rect[fill="#ffffff"]{fill:#FFFFFF;fill-opacity:1}

/* ============================================================
   7. THE CARDS (planflow-blocks.css, planflow-groups.css)
      The card's surfaces are SVG fills in the markup (planflow-blocks.js
      svgBg*: #FBFCFA, #F4F7F4, #D6DCD6, #D9DED9, #3C5247, #E2E3E5); the
      CSS fill property beats a presentation attribute.
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block .wf-block__card svg path[fill="#FBFCFA"][fill-opacity]{fill:var(--nt-card-fill-outer);fill-opacity:var(--nt-card-outer-alpha)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block .wf-block__card svg path[fill="#FBFCFA"]:not([fill-opacity]){fill:var(--nt-card-fill)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block .wf-block__card svg path[fill="#F4F7F4"]{fill:var(--nt-panel-fill)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block .wf-block__card svg :is(path[stroke="#D6DCD6"],path[stroke="#D9DED9"]){stroke:var(--nt-card-stroke)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block .wf-block__card svg line[stroke="#3C5247"]{stroke:var(--nt-card-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block .wf-block__card svg path[fill="#E2E3E5"]{fill:var(--nt-card-stroke)}
/* the family identity (title-bar strip, badge card) mixes towards the theme's base, not white */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block[data-family]{
  --wf-family-tint:color-mix(in srgb,var(--wf-family,#1F6E45) var(--nt-tint-pct),var(--nt-mix-base));
  --wf-family-line:color-mix(in srgb,var(--wf-family,#1F6E45) var(--nt-line-pct),var(--nt-mix-line-base))}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.wf-block--grp .wf-block__layer--title-bar{
  --wf-family-tint:color-mix(in srgb,#8F6B33 var(--nt-tint-pct),var(--nt-mix-base))}
/* round 27t (owner): the plan-group badge tile is a literal SVG (planflow-groups.js GR_BADGE) - its
   gold fills map to the night mix like the title bar; the letters go light on the dark tile */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.wf-block--grp .wf-block__layer--badge svg rect[fill="#E7DBC0"]{fill:color-mix(in srgb,#8F6B33 var(--nt-tint-pct),var(--nt-mix-base))}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.wf-block--grp .wf-block__layer--badge svg rect[stroke="#D8C69E"]{stroke:color-mix(in srgb,#8F6B33 var(--nt-line-pct),var(--nt-mix-line-base))}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.wf-block--grp .wf-block__layer--badge svg :is(path[fill="#8F6B33"],text){fill:#D9B36A}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-block__title,.wf-block__provider-name,.wf-block__output__text){color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__output__toggle{color:var(--nt-icon)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__output__toggle:hover{background:var(--nt-row-hover);color:var(--nt-active-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.is-output-open .wf-block__output{background:var(--nt-panel-fill);border-color:var(--nt-panel-stroke);box-shadow:none}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.is-output-open .wf-block__output__body{border-top-color:var(--nt-panel-stroke)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__output__thumb{border-color:var(--nt-panel-stroke);background:var(--nt-img-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.has-image-output .wf-block__output__expand{background:var(--nt-surface-solid);border-color:var(--nt-border);color:var(--nt-label-hover);box-shadow:var(--nt-shadow-rest)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block.has-image-output .wf-block__output__expand:hover{background:var(--nt-pop-bg);color:var(--nt-active-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__output__expand:hover{background:var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block [data-tip]::after{background:var(--nt-tooltip-bg);color:var(--nt-tooltip-fg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block[data-family] .wf-block__cb .wf-block__subport__dot{background:var(--nt-port-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__cb .wf-block__subport__dot{background:var(--nt-port-bg);box-shadow:0 0 0 2px var(--nt-panel-fill)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__cb .wf-block__subport__dot.is-connected{box-shadow:0 0 0 2px var(--nt-panel-fill)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-block__cb-close:hover,.wf-block__cb-rowbtn:hover){background:var(--nt-row-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__top-btn--repeat.is-active,
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__top-btn--repeat.is-active svg,
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__top-btn--pg{color:var(--nt-ok-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block__loop{background:var(--nt-surface-solid)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-halo-stroke{stroke:var(--nt-accent)}
/* wires, their caps and labels, the journey's halo.
   REVIEW FIX 1: the wire layer paints every state from its own tokens
   (planflow-blocks.css .aw-newblocks .connections-svg: --conn, --conn-hover,
   --cta for the selected wire, --loop, --loop-hover; components.css :root
   --c-trigger).  A direct `stroke` on .wf-conn left those state rules
   reading the DAY values — a selected wire turned #1F6E45 (2.7:1 on the
   night ground, darker than the unselected wire), hover #1B9264, and in
   night + contrast the selection flipped a bright wire to dark green.  The
   tokens are re-pointed on the layer instead, so selected / hovered /
   flowing / trigger / repeat keep their precedence and get night values. */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .connections-svg{
  --conn:var(--nt-conn);--conn-hover:var(--nt-conn-hover);--cta:var(--nt-conn-sel);
  --loop:var(--nt-loop);--loop-hover:var(--nt-loop-hover);--c-trigger:var(--nt-trigger);--port-bg:var(--nt-port-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-cap-ring{fill:var(--nt-ground)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-ghost{stroke:var(--nt-ground)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-label__text{fill:var(--nt-conn-label);stroke:var(--nt-conn-halo)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-conn-label__text:hover,.wf-conn-label.is-dragging .wf-conn-label__text,.wf-conn-label.is-selected .wf-conn-label__text){fill:var(--nt-label-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-label-edit{color:var(--nt-text);background:var(--nt-surface-solid);border-color:var(--nt-accent)}
/* REVIEW FIX 1: the round-23 wire label (track J, planflow-blocks.css
   .wf-conn-labels) is a serif on a PILL and keeps its tokens on the layer
   (--label-ink / --label-pill / --label-line) so a theme can retune them.
   Untuned, the pill stayed the day's #EEF1EF under the light night text
   (measured 1.03:1) with a 1 px dark halo around every glyph.  The pill
   takes the solid surface and the hairline, the ink the label colour, and
   the halo stays only on the halo-form label (no pill). */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-labels{
  --label-ink:var(--nt-conn-label);--label-pill:var(--nt-surface-solid);--label-line:var(--nt-border)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-label__pill ~ .wf-conn-label__text{stroke:none}
html.wf-theme-contrast body.aw-newblocks .wf-conn-label__pill{stroke-width:calc(1.5px * var(--pf-wire-u, 1))}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-group.wf-conn--pg path.wf-conn{stroke:var(--nt-gold) !important;opacity:.75}
/* the plan group: its frame, its card's sections and folded preview, its review strip */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-planframe__hic,.wf-planframe__t,.wf-planframe__status){color:var(--nt-ok-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-planframe__n{color:var(--nt-ok-text);opacity:.8}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-planframe__fold{background:var(--nt-btn-bg);color:var(--nt-ok-text);box-shadow:inset 0 0 0 1px var(--nt-btn-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-planframe__fold:hover{background:var(--nt-btn-bg-hover)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-planframe.is-run-locked .wf-planframe__fold[aria-disabled="true"]:hover{background:var(--nt-btn-bg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-planframe__rtx{color:var(--nt-warn-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-planframe__rbtn{background:var(--nt-surface-solid);color:var(--nt-text);border-color:var(--nt-border)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-pgsec:not(.is-first)::before{background:var(--nt-gold-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-pgsec__n{background:var(--nt-gold-soft);border-color:var(--nt-gold-line);color:var(--nt-gold)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-pgsec__b{color:var(--nt-gold);background:var(--nt-gold-soft);border-color:var(--nt-gold-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-pgout__n,.wf-pgout__more){color:var(--nt-gold)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-pgout__t{color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-pgout__x{color:var(--nt-muted-strong)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-pgout::-webkit-scrollbar-thumb{background:var(--nt-scroll-thumb)}

/* ============================================================
   8. THE OUTPUT OVERLAY (card ⤢), THE TOOLTIPS, THE TOASTS, THE REPORT BADGE
   ============================================================ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-overlay{background:var(--nt-scrim)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal{
  background:var(--nt-modal-bg);border-color:var(--nt-border);color:var(--nt-text);
  box-shadow:var(--nt-shadow),0 24px 60px rgba(0,0,0,.45)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__close{color:var(--nt-icon)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__close:hover{background:var(--nt-row-hover);color:var(--nt-active-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__label{color:var(--nt-ok-text);border-bottom-color:var(--nt-divider)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__label::before{background:var(--nt-accent);box-shadow:0 0 0 3px var(--nt-accent-soft)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__text{color:var(--nt-muted-strong)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__text::first-line{color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__title{color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-output-modal__pdf{border-color:var(--nt-border)}
/* one tooltip design across the nav, the bar and the hints: inverted on dark */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks :is(.wf-tip,.wf-tip.wf-tip--hint,.wf-report-badge){background:var(--nt-tooltip-bg);color:var(--nt-tooltip-fg)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block [data-tip]::after{background:var(--nt-tooltip-bg);color:var(--nt-tooltip-fg)}   /* ROUND 31: the cards' tips too */
/* the app's toasts are dark glass already; contrast makes them solid */
html.wf-theme-contrast body.aw-newblocks :is(.toast,.wf-toast.pfi-root){background:var(--nt-toast-bg);border-color:var(--nt-toast-border);-webkit-backdrop-filter:none;backdrop-filter:none}

/* round 63 (MASTER_PLAN 2.2.4, spec 37 L-night): a SELECTED wire from an Input or an Output block
   at night — the day tokens (#2d799e, #5e49a8; planflow-blocks.css) read 3.48:1 and 2.6:1 on the
   night ground #0E1411; these two reach AA (6.0:1 and 6.2:1) and keep the families' hues */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-group.is-selected .wf-conn.wf-conn--from-input:not(.wf-conn--frame){stroke:#4FA3D1}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-label.is-from-input:not(.is-frame).is-selected .wf-conn-label__pill{stroke:#4FA3D1}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-group.is-selected .wf-conn.wf-conn--from-output:not(.wf-conn--frame){stroke:#A292E6}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-conn-label.is-from-output:not(.is-frame).is-selected .wf-conn-label__pill{stroke:#A292E6}