@kontourai/survey 7.0.0 → 8.1.0

package/dist/src/review-workbench/review-workbench-css.generated.js

@@ -1,5 +1,5 @@
 // Generated by scripts/copy-review-workbench-package-assets.cjs from CSS sources.
-// Do not edit directly; edit examples/review-workbench/review-workbench.css or vendor tokens instead.
+// Do not edit directly; edit examples/review-workbench/review-workbench.css or bump @kontourai/ui instead.
 /* eslint-disable */
 export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench styles for downstream embeds. Font loading is left to the host app. */
 .survey-workbench-embed{
@@ -23,12 +23,23 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   /* text */
   --k-text: #eef3f8;
   --k-text-muted: #aebccb;
-  --k-text-faint: #72869b;
+  --k-text-faint: #75889d;
 
-  /* brand */
+  /* brand — the product identity slot (eyebrows, accents, the progress sweep).
+     A product theme or a white-label deployment may override it; nothing
+     interactive reads it, so a brand that fails contrast cannot break a
+     button or a focus ring. */
   --k-brand: #5ce0c6;
   --k-brand-contrast: #06080b;
 
+  /* interaction roles — primary actions and keyboard focus. They hold their
+     own values instead of var(--k-brand): an alias would make every brand
+     override repaint buttons whether or not the new color can carry text.
+     Each theme and mode sets its action and focus beside its brand. */
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+
   /* semantic status scale */
   --k-positive: #34d399;
   --k-caution: #f3b14b;
@@ -39,6 +50,51 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
   --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
   --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
+  /* Text on a filled status tone (tone badges, status-toned buttons). Its own
+     role so a white-label --k-brand-contrast cannot recolor status text. */
+  --k-status-contrast: #06080b;
+
+  /* trust states — Surface's claim statuses (TRUST_STATUSES, in Surface's
+     order), shown as presentation states: separate from the five status
+     tones and from the product accents. Each state has its own ink (label,
+     glyph, border), fill (the chip's own background, so its text pair does
+     not depend on the container) and line style (the non-color cue borders
+     and chart strokes reuse). Values are literal, never aliases: an alias
+     declared here resolves here, so a light or themed scope would inherit
+     this scope's hue (ui#78). */
+  --k-trust-unknown: #a2acb7;
+  --k-trust-unknown-fill: #252d39;
+  --k-trust-unknown-line: dotted;
+  --k-trust-proposed: #87b1fd;
+  --k-trust-proposed-fill: #222d42;
+  --k-trust-proposed-line: dashed;
+  --k-trust-assumed: #c4a4fe;
+  --k-trust-assumed-fill: #2a2c43;
+  --k-trust-assumed-line: dashed;
+  --k-trust-verified: #50d492;
+  --k-trust-verified-fill: #1a3233;
+  --k-trust-verified-line: solid;
+  --k-trust-stale: #f6b84d;
+  --k-trust-stale-fill: #312e2a;
+  --k-trust-stale-line: dotted;
+  --k-trust-disputed: #ec81c0;
+  --k-trust-disputed-fill: #30273a;
+  --k-trust-disputed-line: double;
+  --k-trust-superseded: #6bc8d3;
+  --k-trust-superseded-fill: #1e313d;
+  --k-trust-superseded-line: dotted;
+  --k-trust-rejected: #f66d67;
+  --k-trust-rejected-fill: #31242d;
+  --k-trust-rejected-line: solid;
+  --k-trust-revoked: #fdc2a2;
+  --k-trust-revoked-fill: #323036;
+  --k-trust-revoked-line: dotted;
+
+  /* trust basis — the line after a trust-state chip. Caveat facets
+     (Model-derived, not evaluated, cited only, contradicts, failed) are
+     underlined with a dashed line in the text's own color: a line-style cue,
+     never a hue. Names no color, so it inherits the rated muted text. */
+  --k-basis-caveat-decoration: underline dashed 1px;
 
   /* spacing */
   --k-space-1: 4px;
@@ -89,8 +145,11 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   --k-tracking-wide: 0.08em;
 
   /* focus — one ring contract so every interactive primitive (controls,
-     buttons, links) shows the same keyboard-focus affordance. */
-  --k-focus-ring: var(--k-brand);
+     buttons, links) shows the same keyboard-focus affordance. The ring color
+     is the --k-focus role; --k-focus-ring is kept as a compatibility alias for
+     consumer styles. Primitives read --k-focus directly, so an override of
+     --k-focus on any element reaches them. */
+  --k-focus-ring: var(--k-focus);
   --k-focus-ring-width: 2px;
   --k-focus-ring-offset: 2px;
 
@@ -106,6 +165,63 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   --k-z-toast: 1400;
 }
 
+/* The dark contract again, for a data-theme="dark" element below a light
+   element (ui#80). It sets exactly the tokens the light block sets, with the
+   :root values; check:contrast fails if either drifts. Mode-independent
+   tokens (spacing, type, radii, fonts) are not reset, so a theme's own values
+   for them survive a mode switch. With no light ancestor there is nothing to
+   reset, so it does not match and a dark element simply inherits. */
+.survey-workbench-embed[data-theme="dark"]:where([data-theme="light"] *){
+  color-scheme: dark;
+  --k-bg: #0a0e13;
+  --k-panel: #111824;
+  --k-panel-raised: #16202d;
+  --k-line: rgba(150, 180, 210, 0.12);
+  --k-line-strong: rgba(150, 180, 210, 0.22);
+  --k-shadow: 0 26px 60px -42px rgba(0, 0, 0, 0.95);
+  --k-elevation-overlay:
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 12px 32px rgba(0, 0, 0, 0.45),
+    0 24px 56px rgba(0, 0, 0, 0.4);
+  --k-text: #eef3f8;
+  --k-text-muted: #aebccb;
+  --k-text-faint: #75889d;
+  --k-brand: #5ce0c6;
+  --k-brand-contrast: #06080b;
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+  --k-positive: #34d399;
+  --k-caution: #f3b14b;
+  --k-negative: #ff6f6f;
+  --k-neutral: #6f8095;
+  --k-active: #7aa2ff;
+  --k-status-contrast: #06080b;
+  --k-trust-unknown: #a2acb7;
+  --k-trust-unknown-fill: #252d39;
+  --k-trust-proposed: #87b1fd;
+  --k-trust-proposed-fill: #222d42;
+  --k-trust-assumed: #c4a4fe;
+  --k-trust-assumed-fill: #2a2c43;
+  --k-trust-verified: #50d492;
+  --k-trust-verified-fill: #1a3233;
+  --k-trust-stale: #f6b84d;
+  --k-trust-stale-fill: #312e2a;
+  --k-trust-disputed: #ec81c0;
+  --k-trust-disputed-fill: #30273a;
+  --k-trust-superseded: #6bc8d3;
+  --k-trust-superseded-fill: #1e313d;
+  --k-trust-rejected: #f66d67;
+  --k-trust-rejected-fill: #31242d;
+  --k-trust-revoked: #fdc2a2;
+  --k-trust-revoked-fill: #323036;
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
+}
+
 .survey-workbench-embed[data-theme="light"]{
   color-scheme: light;
   --k-bg: #f5f4ef;
@@ -120,25 +236,92 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
     0 18px 48px rgba(0, 0, 0, 0.08);
   --k-text: #202124;
   --k-text-muted: #5b626b;
-  --k-text-faint: #707782;
+  --k-text-faint: #6a707b;
   /* The dark-mode brand (#5ce0c6) is too light to carry white text or read as
      text on the light canvas (~1.6:1). Darken it for light mode: #0e7c64 holds
      the teal hue while clearing WCAG AA both as a button fill (white text,
      5.1:1) and as text on --k-bg (4.7:1). */
   --k-brand: #0e7c64;
   --k-brand-contrast: #ffffff;
+  --k-action: #0e7c64;
+  --k-action-contrast: #ffffff;
+  --k-focus: #0e7c64;
   --k-positive: #168257;
   --k-caution: #8a5a00;
   --k-negative: #c83b3b;
   --k-neutral: #5f6975;
   --k-active: #3f6fd6;
+  --k-status-contrast: #ffffff;
+
+  /* Light trust inks are dark enough that each label clears AA on its own
+     tinted fill; check:contrast rates every pair. */
+  --k-trust-unknown: #535c66;
+  --k-trust-unknown-fill: #eeeff0;
+  --k-trust-proposed: #2855ad;
+  --k-trust-proposed-fill: #eaeef7;
+  --k-trust-assumed: #6938a7;
+  --k-trust-assumed-fill: #f0ebf6;
+  --k-trust-verified: #006d42;
+  --k-trust-verified-fill: #e6f0ec;
+  --k-trust-stale: #855a00;
+  --k-trust-stale-fill: #f3efe6;
+  --k-trust-disputed: #94296f;
+  --k-trust-disputed-fill: #f4eaf1;
+  --k-trust-superseded: #016770;
+  --k-trust-superseded-fill: #e6f0f1;
+  --k-trust-rejected: #a12628;
+  --k-trust-rejected-fill: #f6e9ea;
+  --k-trust-revoked: #713408;
+  --k-trust-revoked-fill: #f1ebe6;
+
+  /* Tokens derived with var() resolve on the element that declares them and
+     are inherited as computed values, so each scope that changes an input
+     redeclares them. Without this, data-theme on a descendant of <html> would
+     keep the dark default's ring and soft fills. */
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
 }
 
 
+/* Product themes. Each theme sets its brand (identity) and, beside it, the
+   action and focus roles. The roles hold their own values rather than aliasing
+   the brand, so a later brand override cannot break primary actions or focus.
+   Every scope that sets --k-action also sets --k-action-contrast: a theme
+   nested under another theme's scope would otherwise inherit that scope's text
+   color onto its own fill.
+
+   Every scope that sets --k-focus also redeclares --k-focus-ring, and every
+   scope that sets a status hue redeclares its soft fill: a var()-derived token
+   resolves where it is declared, so without this a scope below the root would
+   inherit the root's value (issue 78). check:tokens enforces both.
+
+   Each light block matches three placements of the theme class and
+   data-theme="light": on one element, the theme class below the light
+   attribute, and the light attribute below the theme class. The last is
+   wrapped in :where() so it weighs the same as the bare [data-theme="light"]
+   block in tokens.css (which it follows, so it wins there) and less than a
+   theme class sitting on the light element itself: a nested theme keeps its
+   own identity.
+
+   Scoping rule (ui#80, ui#84; DESIGN.md "Theme and mode scoping"): the
+   nearest data-theme picks the mode and the nearest theme class picks the
+   product. The :where(:not(...)) tails enforce "nearest" without changing a
+   selector's weight: the class-below-attribute form stops at a nearer
+   data-theme="dark", and the attribute-below-class form stops at a nearer
+   (or its own) other theme class. Weights are unchanged, so an override
+   declared later with these selectors still wins. */
+
 .survey-workbench-embed.theme-survey{
   --k-bg: #06080b;
   --k-brand: #5ce0c6;
-  --k-text-faint: #6f8095;
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+  --k-text-faint: #78889b;
+  --k-focus-ring: var(--k-focus);
 }
 
 .survey-workbench-embed.theme-console{
@@ -150,6 +333,9 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   --k-radius-overlay: 0;
   --k-brand: #c9ff4a;
   --k-brand-contrast: #11120f;
+  --k-action: #c9ff4a;
+  --k-action-contrast: #11120f;
+  --k-focus: #c9ff4a;
   --k-bg: #11120f;
   --k-panel: #191b16;
   --k-panel-raised: #20231e;
@@ -157,30 +343,81 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   --k-line-strong: #8ea36e;
   --k-text: #f2f0e8;
   --k-text-muted: #a6ab9c;
-  --k-text-faint: #747a6c;
+  --k-text-faint: #858b7e;
   --k-positive: #a6d37b;
   --k-caution: #e8c15f;
   --k-negative: #ee776f;
   --k-active: #84d8c8;
+  --k-status-contrast: #11120f;
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
 }
 
+/* Flow dark: the brand is the accent lightened (OKLCH hue within 0.3°, same chroma)
+   just enough to read as text at 4.5:1 on bg, panel and raised panel; the
+   action and focus keep the accent, which clears their 3:1 and dark-text
+   pairs. */
 .survey-workbench-embed.theme-flow{
-  --k-brand: #2f88a6;
+  --k-brand: #3890ae;
+  --k-action: #2f88a6;
+  --k-action-contrast: #06080b;
+  --k-focus: #2f88a6;
+  --k-focus-ring: var(--k-focus);
 }
 
 .survey-workbench-embed.theme-surface{
   --k-brand: #14a37a;
-}
-
+  --k-action: #14a37a;
+  --k-action-contrast: #06080b;
+  --k-focus: #14a37a;
+  --k-focus-ring: var(--k-focus);
+}
+
+/* Station: the draft accent, adjusted per mode only where WCAG AA needs it.
+   Dark: the accent carries white text as a fill but is too dark to read as
+   text on the dark panel, so the focus ring is the accent lightened to clear
+   contrast, and the brand is lightened a little further (OKLCH hue within 0.1°) to
+   read as text at 4.5:1 on bg, panel and raised panel; the action keeps the
+   draft accent. */
+.survey-workbench-embed.theme-station{
+  --k-brand: #966aff;
+  --k-action: #7c3aed;
+  --k-action-contrast: #ffffff;
+  --k-focus: #9364ff;
+  --k-focus-ring: var(--k-focus);
+}
+
+/* Survey light: the brand is the accent darkened (same OKLCH hue and chroma) just enough
+   to read as text at 4.5:1 on the light canvas; the action and focus keep the
+   accent. */
 .survey-workbench-embed[data-theme="light"].theme-survey,
-.survey-workbench-embed[data-theme="light"] .theme-survey{
-  --k-brand: #16806f;
-}
-
+.survey-workbench-embed[data-theme="light"] .theme-survey:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-survey) [data-theme="light"]:where(:not(.theme-console, .theme-flow, .theme-surface, .theme-station, .theme-survey :is(.theme-console, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-bg: #f5f4ef;
+  --k-text-faint: #6a707b;
+  --k-brand: #107e6d;
+  --k-action: #16806f;
+  --k-action-contrast: #ffffff;
+  --k-focus: #16806f;
+  --k-focus-ring: var(--k-focus);
+}
+
+/* Console light: the brand is the lime darkened (OKLCH hue within 0.1°) just enough
+   to read as text at 4.5:1 on bg, panel and raised panel, and it keeps white
+   brand-contrast text (5.1:1; dark text would be 3.7:1). The action and focus
+   keep the brighter lime with dark text. */
 .survey-workbench-embed[data-theme="light"].theme-console,
-.survey-workbench-embed[data-theme="light"] .theme-console{
-  --k-brand: #6c9400;
+.survey-workbench-embed[data-theme="light"] .theme-console:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-console) [data-theme="light"]:where(:not(.theme-survey, .theme-flow, .theme-surface, .theme-station, .theme-console :is(.theme-survey, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-brand: #577800;
   --k-brand-contrast: #ffffff;
+  --k-action: #6c9400;
+  --k-action-contrast: #11120f;
+  --k-focus: #6c9400;
+  --k-focus-ring: var(--k-focus);
   --k-bg: #f3f5eb;
   --k-panel: #fbfcf7;
   --k-panel-raised: #eef2e6;
@@ -188,21 +425,114 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   --k-line-strong: #8fa36f;
   --k-text: #1e2319;
   --k-text-muted: #596250;
-  --k-text-faint: #77816d;
+  --k-text-faint: #68705f;
   --k-positive: #2f7d32;
   --k-caution: #8a6500;
   --k-negative: #b93a36;
   --k-active: #247f75;
+  --k-status-contrast: #ffffff;
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
 }
 
 .survey-workbench-embed[data-theme="light"].theme-flow,
-.survey-workbench-embed[data-theme="light"] .theme-flow{
+.survey-workbench-embed[data-theme="light"] .theme-flow:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-flow) [data-theme="light"]:where(:not(.theme-survey, .theme-console, .theme-surface, .theme-station, .theme-flow :is(.theme-survey, .theme-console, .theme-surface, .theme-station) *)){
   --k-brand: #1f6f88;
+  --k-action: #1f6f88;
+  --k-action-contrast: #ffffff;
+  --k-focus: #1f6f88;
+  --k-focus-ring: var(--k-focus);
 }
 
 .survey-workbench-embed[data-theme="light"].theme-surface,
-.survey-workbench-embed[data-theme="light"] .theme-surface{
+.survey-workbench-embed[data-theme="light"] .theme-surface:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-surface) [data-theme="light"]:where(:not(.theme-survey, .theme-console, .theme-flow, .theme-station, .theme-surface :is(.theme-survey, .theme-console, .theme-flow, .theme-station) *)){
   --k-brand: #0f6b52;
+  --k-action: #0f6b52;
+  --k-action-contrast: #ffffff;
+  --k-focus: #0f6b52;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="light"].theme-station,
+.survey-workbench-embed[data-theme="light"] .theme-station:where(:not([data-theme="dark"], [data-theme="light"] [data-theme="dark"] *)),
+.survey-workbench-embed :where(.theme-station) [data-theme="light"]:where(:not(.theme-survey, .theme-console, .theme-flow, .theme-surface, .theme-station :is(.theme-survey, .theme-console, .theme-flow, .theme-surface) *)){
+  --k-brand: #7c3aed;
+  --k-action: #7c3aed;
+  --k-action-contrast: #ffffff;
+  --k-focus: #7c3aed;
+  --k-focus-ring: var(--k-focus);
+}
+
+
+/* Dark islands (ui#80): a data-theme="dark" element below a light element
+   takes its nearest theme's dark values. tokens.css resets it to the default
+   dark contract first; each block below repeats its theme's mode-dependent
+   base values (check:contrast fails if one drifts) and, like the light
+   blocks, yields to a nearer theme class. Without a light ancestor nothing
+   needs resetting, so these blocks do not match and the element inherits. */
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-survey *):where([data-theme="light"] *):where(:not(.theme-console, .theme-flow, .theme-surface, .theme-station, .theme-survey :is(.theme-console, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-bg: #06080b;
+  --k-brand: #5ce0c6;
+  --k-action: #5ce0c6;
+  --k-action-contrast: #06080b;
+  --k-focus: #5ce0c6;
+  --k-text-faint: #78889b;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-console *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-flow, .theme-surface, .theme-station, .theme-console :is(.theme-survey, .theme-flow, .theme-surface, .theme-station) *)){
+  --k-brand: #c9ff4a;
+  --k-brand-contrast: #11120f;
+  --k-action: #c9ff4a;
+  --k-action-contrast: #11120f;
+  --k-focus: #c9ff4a;
+  --k-bg: #11120f;
+  --k-panel: #191b16;
+  --k-panel-raised: #20231e;
+  --k-line: #3a4035;
+  --k-line-strong: #8ea36e;
+  --k-text: #f2f0e8;
+  --k-text-muted: #a6ab9c;
+  --k-text-faint: #858b7e;
+  --k-positive: #a6d37b;
+  --k-caution: #e8c15f;
+  --k-negative: #ee776f;
+  --k-active: #84d8c8;
+  --k-status-contrast: #11120f;
+  --k-focus-ring: var(--k-focus);
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-flow *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-console, .theme-surface, .theme-station, .theme-flow :is(.theme-survey, .theme-console, .theme-surface, .theme-station) *)){
+  --k-brand: #3890ae;
+  --k-action: #2f88a6;
+  --k-action-contrast: #06080b;
+  --k-focus: #2f88a6;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-surface *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-console, .theme-flow, .theme-station, .theme-surface :is(.theme-survey, .theme-console, .theme-flow, .theme-station) *)){
+  --k-brand: #14a37a;
+  --k-action: #14a37a;
+  --k-action-contrast: #06080b;
+  --k-focus: #14a37a;
+  --k-focus-ring: var(--k-focus);
+}
+
+.survey-workbench-embed[data-theme="dark"]:where(.theme-station *):where([data-theme="light"] *):where(:not(.theme-survey, .theme-console, .theme-flow, .theme-surface, .theme-station :is(.theme-survey, .theme-console, .theme-flow, .theme-surface) *)){
+  --k-brand: #966aff;
+  --k-action: #7c3aed;
+  --k-action-contrast: #ffffff;
+  --k-focus: #9364ff;
+  --k-focus-ring: var(--k-focus);
 }
 
 
@@ -299,31 +629,13 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
 .survey-workbench-embed .queue-result-count{ margin-left: auto; color: var(--k-muted); }
 .survey-workbench-embed .queue-empty{ padding: 2rem; color: var(--k-muted); text-align: center; }
 
-/* Re-assert the base structural tokens for light mode. themes.css's \`.theme-*\`
-   preset classes hardcode a dark --k-bg/--k-panel/etc (so the preset "just
-   works" without requiring [data-theme] to be set), and a bare class selector
-   ties with the \`[data-theme="light"]\` selector in tokens.css on specificity —
-   so source order decides, and themes.css loads after tokens.css. Re-declaring
-   the light values here (loaded after themes.css) wins that tie-break. Presets
-   still control --k-brand (and theme-console's fuller palette) via their own,
-   more specific \`[data-theme="light"].theme-*\` rules in themes.css. */
+/* Light-mode token values come from @kontourai/ui (tokens.css plus each
+   theme's light block, which since 1.17 re-sets every mode-dependent value
+   its dark preset sets). Only color-scheme is re-asserted here: the :root rule
+   above sets it to dark and would otherwise win the source-order tie with
+   tokens.css's [data-theme="light"], leaving native controls dark. */
 .survey-workbench-embed[data-theme="light"]{
   color-scheme: light;
-  --k-bg: #f5f4ef;
-  --k-panel: #ffffff;
-  --k-panel-raised: #fbfaf7;
-  --k-line: rgba(36, 40, 46, 0.12);
-  --k-line-strong: rgba(36, 40, 46, 0.20);
-  --k-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.25);
-  --k-text: #202124;
-  --k-text-muted: #5b626b;
-  --k-text-faint: #707782;
-  --k-brand-contrast: #ffffff;
-  --k-positive: #168257;
-  --k-caution: #8a5a00;
-  --k-negative: #c83b3b;
-  --k-neutral: #5f6975;
-  --k-active: #3f6fd6;
 }
 
 .survey-workbench-embed *{
@@ -617,6 +929,30 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
 .survey-workbench-embed .chip.rejected{ color: var(--k-negative); background: var(--k-negative-wash); }
 .survey-workbench-embed .chip.could-not-confirm{ color: var(--k-caution); background: var(--k-caution-wash); }
 
+/* Field-state panel: one row per field, content and lifecycle derived from
+   the records, never stored labels. A field that was not read is listed. */
+.survey-workbench-embed .field-states{ padding: var(--k-space-3, 12px) 1rem; border-bottom: 1px solid var(--k-line); background: var(--k-panel); }
+.survey-workbench-embed .field-states h2{ margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--k-text); }
+.survey-workbench-embed .field-states ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.survey-workbench-embed .field-states-lead{ margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--k-caution); }
+.survey-workbench-embed .field-state-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--k-line); }
+.survey-workbench-embed .field-state-row:first-child{ border-top: 0; }
+.survey-workbench-embed .field-state-name{ font-family: var(--k-font-mono, ui-monospace, monospace); font-size: 12px; color: var(--k-text); overflow-wrap: anywhere; }
+.survey-workbench-embed .field-state-chips{ display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
+.survey-workbench-embed .field-state-note{ grid-column: 1 / -1; font-size: 12px; color: var(--k-muted); }
+.survey-workbench-embed .field-state-note.signal{ color: var(--k-caution); }
+.survey-workbench-embed .chip.state-content.value{ color: var(--k-positive); background: var(--k-positive-wash); }
+.survey-workbench-embed .chip.state-content.conflicting,
+.survey-workbench-embed .chip.state-content.excluded,
+.survey-workbench-embed .chip.state-content.not_covered{ color: var(--k-caution); background: var(--k-caution-wash); }
+.survey-workbench-embed .chip.state-content.unsupported{ color: var(--k-negative); background: var(--k-negative-wash); }
+.survey-workbench-embed .chip.state-content.none,
+.survey-workbench-embed .chip.state-lifecycle.superseded{ color: var(--k-muted); background: var(--k-sunken); }
+.survey-workbench-embed .chip.state-lifecycle.pending{ color: var(--k-brand); background: var(--k-brand-wash); }
+.survey-workbench-embed .chip.state-lifecycle.accepted{ color: var(--k-positive); background: var(--k-positive-wash); }
+.survey-workbench-embed .chip.state-lifecycle.rejected{ color: var(--k-negative); background: var(--k-negative-wash); }
+.survey-workbench-embed .chip.state-lifecycle.could_not_confirm{ color: var(--k-caution); background: var(--k-caution-wash); }
+
 .survey-workbench-embed .frow1 .push{
   margin-left: auto;
 }
@@ -861,6 +1197,12 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
   background: var(--k-negative-wash);
 }
 
+/* A score-blind session: an informational note, not a warning. */
+.survey-workbench-embed .queue-attestation.score-blind{
+  color: var(--k-active);
+  background: var(--k-active-soft);
+}
+
 /* Conflicting proposed values: each value is listed with its own choice
    control until the field is decided, then marked chosen or not chosen. */
 .survey-workbench-embed .conflict-values ul{
@@ -1421,6 +1763,8 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
 /* The diff-collapse must also hold in host contexts without a query container
    (e.g. an embed that doesn't establish \`container-type\`): fall back to viewport. */
 @media (max-width: 620px) {
+  .survey-workbench-embed .field-state-row{ grid-template-columns: minmax(0, 1fr); }
+  .survey-workbench-embed .field-state-chips{ justify-content: flex-start; }
   .survey-workbench-embed .diff{
     grid-template-columns: 1fr;
   }
@@ -1441,4 +1785,70 @@ export const REVIEW_WORKBENCH_CSS = `/* Bundled, scoped Survey Review Workbench
 .survey-workbench-embed {
   overflow: hidden;
 }`;
+/** Literal dark token defaults for the element's :host, from @kontourai/ui tokens.css :root. */
+export const REVIEW_WORKBENCH_DARK_TOKEN_DECLARATIONS = `  --k-bg: #0a0e13;
+  --k-panel: #111824;
+  --k-panel-raised: #16202d;
+  --k-text: #eef3f8;
+  --k-text-muted: #aebccb;
+  --k-text-faint: #75889d;
+  --k-line: rgba(150, 180, 210, 0.12);
+  --k-line-strong: rgba(150, 180, 210, 0.22);
+  --k-brand: #5ce0c6;
+  --k-brand-contrast: #06080b;
+  --k-active: #7aa2ff;
+  --k-positive: #34d399;
+  --k-caution: #f3b14b;
+  --k-negative: #ff6f6f;
+  --k-neutral: #6f8095;
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);
+  --k-radius-md: 14px;
+  --k-radius-sm: 9px;
+  --k-shadow: 0 26px 60px -42px rgba(0, 0, 0, 0.95);
+  --k-font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --k-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --k-font-display: "Fraunces", Georgia, "Times New Roman", serif;`;
+/** Literal light token values for the element's color-scheme="light", from @kontourai/ui tokens.css [data-theme="light"]. */
+export const REVIEW_WORKBENCH_LIGHT_TOKEN_DECLARATIONS = `  --k-bg: #f5f4ef;
+  --k-panel: #ffffff;
+  --k-panel-raised: #fbfaf7;
+  --k-line: rgba(36, 40, 46, 0.12);
+  --k-line-strong: rgba(36, 40, 46, 0.20);
+  --k-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.25);
+  --k-text: #202124;
+  --k-text-muted: #5b626b;
+  --k-text-faint: #6a707b;
+  --k-brand: #0e7c64;
+  --k-brand-contrast: #ffffff;
+  --k-positive: #168257;
+  --k-caution: #8a5a00;
+  --k-negative: #c83b3b;
+  --k-neutral: #5f6975;
+  --k-active: #3f6fd6;
+  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);
+  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);
+  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);
+  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);`;
+/** Each built-in preset's dark and light values, from @kontourai/ui themes.css. */
+export const REVIEW_WORKBENCH_THEME_TOKEN_DECLARATIONS = {
+    "survey": {
+        "dark": "  --k-bg: #06080b;\n  --k-brand: #5ce0c6;\n  --k-text-faint: #78889b;",
+        "light": "  --k-bg: #f5f4ef;\n  --k-text-faint: #6a707b;\n  --k-brand: #107e6d;"
+    },
+    "console": {
+        "dark": "  --k-font-ui: \"Aptos Narrow\", \"DIN Condensed\", \"IBM Plex Sans Condensed\", \"Gill Sans\", sans-serif;\n  --k-font-display: \"Aptos Narrow\", \"DIN Condensed\", \"IBM Plex Sans Condensed\", \"Gill Sans\", sans-serif;\n  --k-radius-sm: 0;\n  --k-radius-md: 0;\n  --k-brand: #c9ff4a;\n  --k-brand-contrast: #11120f;\n  --k-bg: #11120f;\n  --k-panel: #191b16;\n  --k-panel-raised: #20231e;\n  --k-line: #3a4035;\n  --k-line-strong: #8ea36e;\n  --k-text: #f2f0e8;\n  --k-text-muted: #a6ab9c;\n  --k-text-faint: #858b7e;\n  --k-positive: #a6d37b;\n  --k-caution: #e8c15f;\n  --k-negative: #ee776f;\n  --k-active: #84d8c8;\n  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);\n  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);\n  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);\n  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);",
+        "light": "  --k-brand: #577800;\n  --k-brand-contrast: #ffffff;\n  --k-bg: #f3f5eb;\n  --k-panel: #fbfcf7;\n  --k-panel-raised: #eef2e6;\n  --k-line: #ccd5bf;\n  --k-line-strong: #8fa36f;\n  --k-text: #1e2319;\n  --k-text-muted: #596250;\n  --k-text-faint: #68705f;\n  --k-positive: #2f7d32;\n  --k-caution: #8a6500;\n  --k-negative: #b93a36;\n  --k-active: #247f75;\n  --k-positive-soft: color-mix(in oklab, var(--k-positive) 14%, transparent);\n  --k-caution-soft: color-mix(in oklab, var(--k-caution) 14%, transparent);\n  --k-negative-soft: color-mix(in oklab, var(--k-negative) 14%, transparent);\n  --k-active-soft: color-mix(in oklab, var(--k-active) 14%, transparent);"
+    },
+    "flow": {
+        "dark": "  --k-brand: #3890ae;",
+        "light": "  --k-brand: #1f6f88;"
+    },
+    "surface": {
+        "dark": "  --k-brand: #14a37a;",
+        "light": "  --k-brand: #0f6b52;"
+    }
+};
 export default REVIEW_WORKBENCH_CSS;