/* Bundled, scoped Survey Review Workbench styles for downstream embeds. Font loading is left to the host app. */
.survey-workbench-embed{
  color-scheme: dark;

  /* structure */
  --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);
  /* Layered, downward-weighted overlay elevation (contact -> ambient falloff).
     The single shadow floating surfaces — dialogs, menus, palettes, toasts —
     should use, so elevation tunes in one place. */
  --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);

  /* text */
  --k-text: #eef3f8;
  --k-text-muted: #aebccb;
  --k-text-faint: #75889d;

  /* 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;
  --k-negative: #ff6f6f;
  --k-neutral: #6f8095;
  --k-active: #7aa2ff;
  --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);
  /* 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;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-5: 24px;
  --k-space-6: 32px;

  /* radius */
  --k-radius-sm: 9px;
  --k-radius-md: 14px;
  /* Tight, desktop-grade radii for dense product chrome (controls + overlays),
     alongside the softer sm/md. */
  --k-radius-control: 4px;
  --k-radius-overlay: 10px;

  /* type */
  --k-text-xs: 11px;
  --k-text-sm: 12.5px;
  --k-text-md: 14px;
  --k-text-lg: 18px;
  --k-text-xl: 22px;
  --k-text-2xl: clamp(26px, 3.4vw, 38px);

  /* fonts */
  --k-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --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;

  /* motion */
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-dur: 0.16s;

  /* border width — replaces the ad-hoc calc(var(--k-space-1) / 4) math that
     hairline borders computed inline across primitives. */
  --k-border-thin: 1px;
  --k-border-thick: 2px;

  /* line-height — unitless ratios for display headings vs. body copy. */
  --k-leading-tight: 1.1;
  --k-leading-normal: 1.45;
  --k-leading-loose: 1.7;

  /* letter-spacing — eyebrows/badges track wide; body tracks normal. */
  --k-tracking-tight: -0.01em;
  --k-tracking-normal: 0;
  --k-tracking-wide: 0.08em;

  /* focus — one ring contract so every interactive primitive (controls,
     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;

  /* z-index — semantic stacking scale for layered surfaces. Overlays read
     these instead of inventing local magic numbers, so cross-product layering
     stays consistent (a Flow toast never renders under a Console dialog). */
  --k-z-base: 0;
  --k-z-sticky: 100;
  --k-z-dropdown: 1000;
  --k-z-overlay: 1100;
  --k-z-modal: 1200;
  --k-z-popover: 1300;
  --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;
  --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-elevation-overlay:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.08);
  --k-text: #202124;
  --k-text-muted: #5b626b;
  --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-action: #5ce0c6;
  --k-action-contrast: #06080b;
  --k-focus: #5ce0c6;
  --k-text-faint: #78889b;
  --k-focus-ring: var(--k-focus);
}

.survey-workbench-embed.theme-console{
  --k-font-ui: "Aptos Narrow", "DIN Condensed", "IBM Plex Sans Condensed", "Gill Sans", sans-serif;
  --k-font-display: "Aptos Narrow", "DIN Condensed", "IBM Plex Sans Condensed", "Gill Sans", sans-serif;
  --k-radius-sm: 0;
  --k-radius-md: 0;
  --k-radius-control: 0;
  --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;
  --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);
}

/* 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: #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: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: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;
  --k-line: #ccd5bf;
  --k-line-strong: #8fa36f;
  --k-text: #1e2319;
  --k-text-muted: #596250;
  --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: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: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);
}


/* Survey Review Workbench — field-diff review UI.
   Reviewers judge, field by field, whether a proposed value should replace a
   current one. The visual language leads with the value diff, then confidence,
   then provenance, then the decision — plain language on the primary surface,
   audit/trace detail tucked behind one collapsed <details> per field.

   Token contract: every color/radius/shadow/font below resolves through --k-*
   custom properties so a host app can re-skin the whole surface by overriding
   tokens alone (see the "Theming" section of docs/consumer-integration-guide.md).
   The aliases declared here (--k-muted, --k-raised, --k-sunken, --k-brand-ink,
   --k-brand-wash, --k-positive-wash, --k-caution-wash, --k-negative-wash,
   --k-radius) derive from Survey's existing --k-text-muted / --k-panel-raised /
   --k-brand-contrast / --k-*-soft / --k-radius-md tokens so overriding the base
   token a host already knows about re-skins these too — a host can also override
   any alias directly for finer control. */

.survey-workbench-embed{
  color-scheme: dark;

  --k-muted: var(--k-text-muted);
  --k-faint: var(--k-text-faint);
  --k-raised: var(--k-panel-raised);
  --k-sunken: color-mix(in srgb, var(--k-bg) 55%, var(--k-panel) 45%);
  --k-brand-ink: var(--k-brand-contrast);
  --k-brand-wash: color-mix(in srgb, var(--k-brand) 14%, transparent);
  --k-positive-wash: var(--k-positive-soft, color-mix(in srgb, var(--k-positive) 14%, transparent));
  --k-caution-wash: var(--k-caution-soft, color-mix(in srgb, var(--k-caution) 14%, transparent));
  --k-negative-wash: var(--k-negative-soft, color-mix(in srgb, var(--k-negative) 14%, transparent));
  --k-radius: var(--k-radius-md);

  font-family: var(--k-font-ui);
  background: var(--k-bg);
  color: var(--k-text);
}

/* Read-only evidence pane attached to the existing ReviewItem queue. */
.survey-workbench-embed .extraction-inspector{ container-type: inline-size; margin-top: 1rem; padding: 1rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-panel); color: var(--k-text); }
.survey-workbench-embed .inspector-heading, .survey-workbench-embed .inspector-layout{ display: grid; grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr); gap: 1rem; }
.survey-workbench-embed .inspector-heading h2{ margin: 0; }
.survey-workbench-embed .inspector-posture{ display: flex; flex-direction: column; padding: .75rem; border-radius: var(--k-radius-sm); background: var(--k-positive-wash); }
/* Caution first: an artifact failure on the same source must win the tie and stay negative. */
.survey-workbench-embed .inspector-posture.extraction-incomplete{ background: var(--k-caution-wash); color: var(--k-caution); border: 2px solid currentColor; }
.survey-workbench-embed .inspector-posture.digest-mismatch, .survey-workbench-embed .inspector-posture.artifact-unavailable, .survey-workbench-embed .inspector-posture.excerpt-mismatch, .survey-workbench-embed .inspector-posture.proposals-excluded{ background: var(--k-negative-wash); color: var(--k-negative); border: 2px solid currentColor; }
.survey-workbench-embed .inspector-posture.extraction-failed{ background: var(--k-negative-wash); color: var(--k-negative); border: 2px solid currentColor; }
.survey-workbench-embed .inspector-filters{ display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.survey-workbench-embed .inspector-filters label{ display: grid; gap: .25rem; font-size: .75rem; color: var(--k-text-muted); }
.survey-workbench-embed .inspector-filters select, .survey-workbench-embed .inspector-filters input{ color: var(--k-text); background: var(--k-sunken); border: 1px solid var(--k-line); padding: .4rem; }
.survey-workbench-embed .inspector-pager, .survey-workbench-embed .queue-controls, .survey-workbench-embed .queue-pager{ display: flex; align-items: end; flex-wrap: wrap; gap: .6rem; }
.survey-workbench-embed .inspector-pager{ justify-content: flex-end; margin: 0 0 .75rem; }
.survey-workbench-embed .inspector-pager button, .survey-workbench-embed .queue-pager button{ color: var(--k-text); background: var(--k-raised); border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-sm); padding: .45rem .7rem; }
.survey-workbench-embed .inspector-pager button:disabled, .survey-workbench-embed .queue-pager button:disabled{ opacity: .45; }
.survey-workbench-embed .inspector-candidates{ margin: 0; padding-left: 1.5rem; }
.survey-workbench-embed .inspector-candidate{ width: 100%; display: grid; gap: .2rem; text-align: left; padding: .65rem; color: var(--k-text); background: transparent; border: 1px solid var(--k-line); }
.survey-workbench-embed .inspector-source pre{ white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 1rem; background: var(--k-sunken); border: 1px solid var(--k-line); min-height: 8rem; line-height: 2.2; }
.survey-workbench-embed .inspector-source mark{ background: var(--k-brand-wash); color: var(--k-text); outline: 1px solid var(--k-brand); }
.survey-workbench-embed .inspector-candidate:focus{ outline: 3px solid var(--k-active); outline-offset: 2px; }
/* An inert link target, one per candidate in the model, so a host's
   `href="#<highlightElementId>"` always resolves. It is not a control and must
   not behave like one: no size, no tab stop, nothing painted. */
.survey-workbench-embed .highlight-anchor{
  display: inline;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The highlight IS the return control — the only part of this surface a reader
   can see, so it is the thing to aim at. Full phrase width, already visibly
   marked, one tab stop per painted highlight. */
.survey-workbench-embed .source-highlight{
  cursor: pointer;
  border-radius: 2px;
  /* Vertical padding on an inline box grows the hit area without moving the
     line box, and the prepared text's line-height below leaves room for it, so
     the target reaches ~24px tall without lines overlapping each other. The
     phrase itself supplies the width. */
  padding: 5px 3px;
  margin: 0 -3px;
}

.survey-workbench-embed .source-highlight:focus-visible{
  outline: 3px solid var(--k-active);
  outline-offset: 1px;
}
.survey-workbench-embed .source-unavailable{ color: var(--k-negative); font-weight: 700; }
@container (max-width: 720px) { .inspector-heading, .inspector-layout { grid-template-columns: 1fr !important; } }

.survey-workbench-embed .queue-controls{ padding: 1rem; border-bottom: 1px solid var(--k-line); background: var(--k-panel); }
.survey-workbench-embed .queue-controls label{ display: grid; gap: .25rem; color: var(--k-muted); font-size: .75rem; }
.survey-workbench-embed .queue-controls input, .survey-workbench-embed .queue-controls select{ min-height: 2.25rem; color: var(--k-text); background: var(--k-sunken); border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); padding: .4rem .55rem; }
.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; }

/* 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;
}

.survey-workbench-embed *{
  box-sizing: border-box;
}

.survey-workbench-embed{
  margin: 0;
  min-width: 320px;
}

.survey-workbench-embed button,
.survey-workbench-embed textarea,
.survey-workbench-embed input{
  font: inherit;
  color: inherit;
}

.survey-workbench-embed h1, .survey-workbench-embed h2, .survey-workbench-embed h3, .survey-workbench-embed p{
  margin: 0;
}

/* ---------- demo page chrome (host page only, not part of the component) ---------- */

.survey-workbench-embed .demo-toolbar{
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
}

.survey-workbench-embed.theme-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--k-line-strong);
  border-radius: 999px;
  background: var(--k-panel);
  color: var(--k-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.survey-workbench-embed.theme-toggle:hover{
  border-color: var(--k-brand);
  color: var(--k-brand);
}

.survey-workbench-embed.theme-toggle-icon{
  font-size: 14px;
  line-height: 1;
}

/* ---------- outer containers ---------- */

.survey-workbench-embed .workbench{
  position: relative;
  container-type: inline-size;
  min-height: 100vh;
  padding: 28px 20px 80px;
}

.survey-workbench-embed .workbench-shell{
  max-width: 940px;
  margin: 0 auto;
}

/* ---------- review panel + header ---------- */

.survey-workbench-embed .review{
  background: var(--k-panel);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  overflow: hidden;
}

.survey-workbench-embed .rhead{
  padding: 20px 22px;
  border-bottom: 1px solid var(--k-line);
  display: grid;
  gap: 14px;
}

.survey-workbench-embed .rhead .top{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.survey-workbench-embed .rhead .eyebrow{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-faint);
}

.survey-workbench-embed .rhead h1{
  margin: 2px 0 0;
  font-size: 21px;
  line-height: 1.2;
  text-wrap: balance;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.survey-workbench-embed .rhead .subj{
  flex: 1;
  min-width: 240px;
}

.survey-workbench-embed .meta{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--k-muted);
}

.survey-workbench-embed .meta b{
  color: var(--k-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* progress + apply */

.survey-workbench-embed .progress{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.survey-workbench-embed .bar{
  flex: 1;
  min-width: 80px;
  height: 7px;
  border-radius: 999px;
  background: var(--k-sunken);
  overflow: hidden;
  border: 1px solid var(--k-line);
}

.survey-workbench-embed .bar > i{
  display: block;
  height: 100%;
  background: var(--k-brand);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* `.progress` is a generic class name, and a host page may well have its own —
   @kontourai/ui ships an unscoped `.progress span { background: linear-gradient(…) }`
   that painted a gradient straight over this element's text in an embed. The
   embed cannot claim the name, but it must not leave its own descendants
   unstyled and open to a host rule; state the presentation explicitly. */
.survey-workbench-embed .progress .ptext{
  display: inline;
  height: auto;
  background: none;
}

.survey-workbench-embed .ptext{
  font-size: 13px;
  color: var(--k-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.survey-workbench-embed .ptext b{
  color: var(--k-text);
}

.survey-workbench-embed .apply{
  border: 0;
  background: var(--k-brand);
  color: var(--k-brand-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s, filter 0.15s;
}

.survey-workbench-embed .apply:hover{
  filter: brightness(1.06);
}

.survey-workbench-embed .apply:active{
  transform: translateY(1px);
}

.survey-workbench-embed .apply:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

/* ---------- field cards ---------- */

.survey-workbench-embed .fields{
  display: flex;
  flex-direction: column;
}

.survey-workbench-embed .field{
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0;
  border-top: 1px solid var(--k-line);
}

.survey-workbench-embed .field:first-child{
  border-top: 0;
}

.survey-workbench-embed .stripe{
  background: var(--k-line);
  transition: background 0.25s;
}

.survey-workbench-embed .field[data-state="accepted"] .stripe{ background: var(--k-positive); }
.survey-workbench-embed .field[data-state="kept"] .stripe{ background: var(--k-faint); }
.survey-workbench-embed .field[data-state="rejected"] .stripe{ background: var(--k-negative); }
.survey-workbench-embed .field[data-state="could-not-confirm"] .stripe{ background: var(--k-caution); }
.survey-workbench-embed .field[data-state="review"] .stripe{ background: var(--k-brand); }

.survey-workbench-embed .fbody{
  padding: 18px 22px 20px;
  display: grid;
  gap: 13px;
  min-width: 0;
}

.survey-workbench-embed .frow1{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.survey-workbench-embed .fname{
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.survey-workbench-embed .fkind{
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k-faint);
  border: 1px solid var(--k-line-strong);
  padding: 1px 7px;
  border-radius: 999px;
}

.survey-workbench-embed .chip{
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.survey-workbench-embed .chip::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.survey-workbench-embed .chip.review{ color: var(--k-brand); background: var(--k-brand-wash); }
.survey-workbench-embed .chip.accepted{ color: var(--k-positive); background: var(--k-positive-wash); }
.survey-workbench-embed .chip.kept{ color: var(--k-muted); background: var(--k-sunken); }
.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;
}

/* the diff */

.survey-workbench-embed .diff{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

/* narrow-width collapse for .diff lives in the responsive section at the foot. */

.survey-workbench-embed .val{
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  padding: 10px 12px;
  background: var(--k-raised);
  min-width: 0;
}

.survey-workbench-embed .val .vlbl{
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-faint);
  margin-bottom: 4px;
}

.survey-workbench-embed .val .vtext{
  font-size: 14.5px;
  word-break: break-word;
  white-space: pre-wrap;
}

.survey-workbench-embed .val.current{
  background: var(--k-sunken);
}

.survey-workbench-embed .val.current .vtext{
  color: var(--k-muted);
}

.survey-workbench-embed .val.proposed{
  border-color: color-mix(in srgb, var(--k-brand) 45%, var(--k-line));
}

.survey-workbench-embed .val.empty .vtext{
  color: var(--k-faint);
  font-style: italic;
}

.survey-workbench-embed .arrow{
  align-self: center;
  color: var(--k-faint);
}

.survey-workbench-embed .editrow{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.survey-workbench-embed .editrow input,
.survey-workbench-embed .editrow select{
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--k-text);
  background: var(--k-panel);
  border: 1px solid var(--k-line-strong);
  border-radius: 6px;
  padding: 6px 9px;
}

.survey-workbench-embed .editrow input:focus-visible,
.survey-workbench-embed .editrow select:focus-visible{
  outline: 2px solid var(--k-brand);
  outline-offset: 1px;
  border-color: var(--k-brand);
}

.survey-workbench-embed .editrow .ehint{
  font-size: 11.5px;
  color: var(--k-faint);
  white-space: nowrap;
}

/* Validation message for a typed proposed-value edit (hidden until the mount
   handler blocks a "Use proposed" on an out-of-shape value). */
.survey-workbench-embed .verr{
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--k-negative);
}

.survey-workbench-embed .verr[hidden]{
  display: none;
}

/* Why a decision was refused, next to the button that refused it. The input
   that satisfies the precondition can be inside the collapsed audit accordion,
   so the message cannot live only with the input (kontourai/survey#208). */
.survey-workbench-embed .derr{
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--k-negative);
}

.survey-workbench-embed .derr[hidden]{
  display: none;
}

/* confidence + provenance */

.survey-workbench-embed .prov{
  display: grid;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--k-radius-sm);
  background: var(--k-sunken);
  border: 1px solid var(--k-line);
}

.survey-workbench-embed .conf{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--k-muted);
  flex-wrap: wrap;
}

.survey-workbench-embed .conf .meter{
  width: 84px;
  height: 6px;
  border-radius: 999px;
  background: var(--k-line-strong);
  overflow: hidden;
}

.survey-workbench-embed .conf .meter > i{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--k-positive);
}

.survey-workbench-embed .conf .meter.mid > i{
  background: var(--k-caution);
}

.survey-workbench-embed .conf .pct{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--k-text);
  font-family: var(--k-font-mono);
  font-size: 12px;
}

.survey-workbench-embed .excerpt{
  font-size: 13px;
  color: var(--k-text);
}

.survey-workbench-embed .excerpt q{
  color: var(--k-text);
}

.survey-workbench-embed .excerpt q::before{ content: "\201C"; }
.survey-workbench-embed .excerpt q::after{ content: "\201D"; }

.survey-workbench-embed .excerpt .from{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--k-muted);
  flex-wrap: wrap;
}

.survey-workbench-embed .excerpt .from a{
  color: var(--k-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.survey-workbench-embed .noprov{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--k-caution);
  flex-wrap: wrap;
}

.survey-workbench-embed .noprov svg{
  flex: none;
}

.survey-workbench-embed .noprov .tag{
  background: var(--k-caution-wash);
  color: var(--k-caution);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}

/* A queue that came from an extraction import but was not checked against
   it (unverified), or that does not match it (diverges, shown instead of the
   queue). */
.survey-workbench-embed .queue-attestation{
  display: flex;
  align-items: flex-start;
  gap: var(--k-space-2);
  margin: 0 0 var(--k-space-3);
  padding: var(--k-space-2) var(--k-space-3);
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--k-caution);
  background: var(--k-caution-wash);
}

.survey-workbench-embed .queue-attestation svg{
  flex: none;
  margin-top: 2px;
}

.survey-workbench-embed .queue-attestation.diverges{
  color: var(--k-negative);
  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{
  list-style: none;
  margin: var(--k-space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--k-space-2);
}

.survey-workbench-embed .conflict-values li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-3);
  flex-wrap: wrap;
  padding: var(--k-space-2) var(--k-space-3);
  border: 1px solid var(--k-line);
  border-radius: 9px;
}

.survey-workbench-embed .conflict-values li[data-chosen="true"]{
  border-color: var(--k-positive);
  background: var(--k-positive-wash);
}

.survey-workbench-embed .conflict-values .conflict-text{
  display: inline-flex;
  align-items: baseline;
  gap: var(--k-space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.survey-workbench-embed .conflict-values .vtext{
  font-weight: 600;
  overflow-wrap: anywhere;
}

.survey-workbench-embed .conflict-values q{
  color: var(--k-muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.survey-workbench-embed .conflict-values .btn.choose{
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.survey-workbench-embed .choice-tag{
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.survey-workbench-embed .choice-tag.chosen{
  color: var(--k-positive);
  background: var(--k-positive-wash);
}

.survey-workbench-embed .choice-tag.not-chosen{
  color: var(--k-muted);
  background: var(--k-sunken);
}

.survey-workbench-embed .excerpt-verification,
.survey-workbench-embed .support-verification{
  margin: 0;
  font-size: 12px;
  color: var(--k-muted);
}

/* decisions */

/* The decision row is the point of the card, so it sits on its own line,
   right-aligned and prominent. The quiet calibration toggle is pushed to the
   far left so the two primary actions read as the clear call to action. */
.survey-workbench-embed .decide{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2px;
}

.survey-workbench-embed .btn{
  border: 1px solid var(--k-line-strong);
  background: var(--k-raised);
  color: var(--k-text);
  font-size: 14px;
  font-weight: 600;
  padding: 0 18px;
  min-height: 42px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, filter 0.12s;
}

.survey-workbench-embed .btn:hover{
  background: var(--k-sunken);
  border-color: var(--k-line-strong);
}

.survey-workbench-embed .btn:focus-visible{
  outline: 2px solid var(--k-brand);
  outline-offset: 2px;
}

/* Use proposed — the filled positive primary, the loudest thing on the card. */
.survey-workbench-embed .btn.use{
  background: var(--k-positive);
  border-color: var(--k-positive);
  color: #ffffff;
}

.survey-workbench-embed .btn.use:hover{
  background: var(--k-positive);
  border-color: var(--k-positive);
  color: #ffffff;
  filter: brightness(1.07);
}

/* Keep current — a strong neutral secondary; still prominent, clearly not the accept. */
.survey-workbench-embed .btn.keep{
  border-color: var(--k-line-strong);
  background: var(--k-panel-raised, var(--k-raised));
}

.survey-workbench-embed .btn.unconfirmed{
  border-color: var(--k-caution);
  color: var(--k-caution);
  background: var(--k-caution-wash);
}

/* "Suggestion was wrong" — optional quiet calibration toggle on Keep current.
   Ticking it turns a keep-current decision into the reject signal. Not a third action. */
.survey-workbench-embed .wrong{
  order: -1;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--k-faint);
  cursor: pointer;
  user-select: none;
  padding: 8px 4px;
  min-height: 40px;
}

.survey-workbench-embed .wrong:hover{
  color: var(--k-negative);
}

.survey-workbench-embed .wrong input{
  width: 15px;
  height: 15px;
  accent-color: var(--k-negative);
  cursor: pointer;
  margin: 0;
}

.survey-workbench-embed .decided{
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 13px;
  color: var(--k-muted);
}

.survey-workbench-embed .field[data-decided="1"] .decide{
  display: none;
}

.survey-workbench-embed .field[data-decided="1"] .decided{
  display: flex;
}

.survey-workbench-embed .undo{
  border: 0;
  background: none;
  color: var(--k-brand);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

/* footer tally */

.survey-workbench-embed .foot{
  padding: 16px 22px;
  border-top: 1px solid var(--k-line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--k-raised);
}

.survey-workbench-embed .tally{
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--k-muted);
  flex-wrap: wrap;
}

.survey-workbench-embed .tally b{
  color: var(--k-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- audit details: the single collapsed power-user surface per field ---------- */

.survey-workbench-embed .audit-details{
  border-top: 1px dashed var(--k-line);
  padding-top: 4px;
}

.survey-workbench-embed .audit-details summary{
  cursor: pointer;
  padding: 6px 0;
  color: var(--k-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.survey-workbench-embed .audit-details summary:hover{
  color: var(--k-muted);
}

.survey-workbench-embed .audit-details[open] summary{
  color: var(--k-brand);
}

.survey-workbench-embed .audit-body{
  display: grid;
  gap: 14px;
  padding: 4px 0 6px;
}

.survey-workbench-embed .note-field{
  display: grid;
  gap: 6px;
}

.survey-workbench-embed .field-label{
  color: var(--k-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.survey-workbench-embed .field-value{
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
  color: var(--k-text);
  font-size: 12.5px;
}

.survey-workbench-embed .note-field textarea{
  display: block;
  width: 100%;
  min-height: 60px;
  resize: vertical;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-radius-sm);
  padding: 8px 10px;
  color: var(--k-text);
  background: var(--k-sunken);
  font-family: var(--k-font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.survey-workbench-embed .note-field textarea:focus-visible{
  outline: none;
  border-color: var(--k-brand);
  box-shadow: 0 0 0 3px var(--k-brand-wash);
}

.survey-workbench-embed .field-stack{
  display: grid;
  gap: 9px;
}

.survey-workbench-embed .field-stack.compact{
  gap: 6px;
}

.survey-workbench-embed .kv{
  min-width: 0;
}

.survey-workbench-embed .kv .field-value{
  margin-top: 3px;
  font-family: var(--k-font-mono);
  font-size: 11.5px;
  color: var(--k-muted);
}

/* Excerpt / rationale 3-line clamp with inline "more / less" expander. */
.survey-workbench-embed .kv.excerpt .field-value,
.survey-workbench-embed .kv.rationale-clamp .field-value{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--k-font-ui);
  font-style: italic;
  color: var(--k-muted);
}

.survey-workbench-embed .excerpt-clamp.is-expanded .field-value,
.survey-workbench-embed .rationale-clamp.is-expanded .field-value{
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.survey-workbench-embed .clamp-toggle{
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--k-brand);
  cursor: pointer;
  font-family: var(--k-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 2px;
  vertical-align: baseline;
}

.survey-workbench-embed .clamp-toggle:hover{
  color: var(--k-text);
}

/* Candidate history expander: >3 unselected candidates hide behind "view all (N)". */
.survey-workbench-embed .history-overflow{
  display: none;
}

.survey-workbench-embed .history-expander.is-expanded .history-overflow{
  display: contents;
}

.survey-workbench-embed .history-expand-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid var(--k-line-strong);
  border-radius: 999px;
  background: var(--k-brand-wash);
  color: var(--k-brand);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.survey-workbench-embed .history-expand-btn:hover{
  border-color: var(--k-brand);
}

.survey-workbench-embed .history-expander.is-expanded .history-expand-btn .expand-label{
  display: none;
}

.survey-workbench-embed .history-expander.is-expanded .history-expand-btn .collapse-label{
  display: inline;
}

.survey-workbench-embed .history-expand-btn .collapse-label{
  display: none;
}

.survey-workbench-embed .preview-section-grid{
  display: grid;
  gap: 10px;
}

.survey-workbench-embed .preview-section{
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  padding: 10px 12px;
  background: var(--k-sunken);
}

.survey-workbench-embed .preview-section h3{
  margin-bottom: 6px;
  color: var(--k-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.survey-workbench-embed .reference-details{
  margin-top: 8px;
}

.survey-workbench-embed .reference-details summary{
  cursor: pointer;
  list-style: none;
  color: var(--k-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.survey-workbench-embed .reference-details summary::-webkit-details-marker{
  display: none;
}

.survey-workbench-embed .reference-details summary::before{
  content: "▸ ";
}

.survey-workbench-embed .reference-details[open] summary::before{
  content: "▾ ";
}

.survey-workbench-embed .reference-details .field-stack{
  margin-top: 8px;
}

.survey-workbench-embed .preview-disclaimer{
  font-size: 11.5px;
  color: var(--k-faint);
  line-height: 1.5;
}

.survey-workbench-embed .preview-disclaimer-footer{
  border-top: 1px solid var(--k-line);
  padding-top: 10px;
}

/* ReviewDecision payload — deliberately the deepest, last thing in the audit details. */
.survey-workbench-embed .reference-details pre,
.survey-workbench-embed pre[data-testid="decision-payload"]{
  margin: 8px 0 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  background: var(--k-bg);
  color: var(--k-muted);
  font-family: var(--k-font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.survey-workbench-embed .caption{
  text-align: center;
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--k-faint);
}

/* ---------- responsive ----------
   The workbench sets `container-type: inline-size`, so these breakpoints fire on
   the component's own width — correct whether it renders full-bleed on a phone or
   in a narrow column on a wide desktop. Mobile is the primary context, so tap
   targets stay comfortable and nothing forces a horizontal scroll. */

@container (max-width: 620px) {
  .survey-workbench-embed .workbench{
    padding: 16px 12px 56px;
  }

  .survey-workbench-embed .fbody{
    padding: 16px 15px 18px;
  }

  .survey-workbench-embed .rhead{
    padding: 16px;
  }

  .survey-workbench-embed .foot{
    padding: 14px 15px;
  }

  .survey-workbench-embed .rhead h1{
    font-size: 19px;
  }

  /* current → proposed stack vertically; the arrow rotates to point down. */
  .survey-workbench-embed .diff{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .survey-workbench-embed .diff .arrow{
    transform: rotate(90deg);
    justify-self: start;
    margin: 1px 0;
  }

  /* Apply spans the header row as an easy thumb target. */
  .survey-workbench-embed .apply{
    flex: 1;
    min-height: 44px;
  }
}

@container (max-width: 480px) {
  /* The two primary actions go full-width and tall so they're the obvious,
     thumb-friendly call to action; the calibration toggle sits below them. */
  .survey-workbench-embed .decide{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .survey-workbench-embed .btn{
    width: 100%;
    min-height: 46px;
    font-size: 15px;
  }

  .survey-workbench-embed .wrong{
    order: 0;
    margin-right: 0;
    justify-content: flex-start;
    min-height: 44px;
  }

  .survey-workbench-embed .frow1{
    gap: 8px;
  }
}

/* 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;
  }

  .survey-workbench-embed .diff .arrow{
    transform: rotate(90deg);
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .survey-workbench-embed *{
    transition: none !important;
  }
}

.survey-workbench-embed .review-context{
  margin: var(--k-space-4);
  padding: var(--k-space-4);
  border: var(--k-border-thin) solid var(--k-line-strong);
  border-radius: var(--k-radius-sm);
  background: var(--k-panel-raised);
  color: var(--k-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


.survey-workbench-embed {
  overflow: hidden;
}