@w6w/ui 0.0.0-stage → 0.1.0

package/src/styles.css

@@ -0,0 +1,4208 @@
+/* GENERATED FILE — DO NOT EDIT.
+ *
+ * Compiled from src/styles.scss by scripts/build-css.mjs (`pnpm build:css`).
+ * Edit the .scss partials under src/styles/ instead; `pnpm check:css` fails
+ * if this file has drifted from them.
+ */
+@charset "UTF-8";
+/*
+ * @w6w/ui — styles for the pure-presentation components.
+ *
+ * Everything is namespaced under `.w6w-*` class names so this stylesheet
+ * won't collide with your app's CSS.
+ *
+ * THEMING
+ * -------
+ * The library ships a complete DEFAULT theme in BOTH light and dark:
+ *   - Light is the base.
+ *   - Dark applies automatically when the OS prefers dark
+ *     (`prefers-color-scheme: dark`).
+ *   - Either mode can be forced with `data-theme="light" | "dark"` on any
+ *     ancestor (usually <html>) — the same signal the JS components read
+ *     (AppIcon / CodeEditor / JsonEditor: explicit prop > data-theme > OS pref),
+ *     so CSS and components always agree.
+ *
+ * A HOST can override any subset of the tokens — set the ones you care about and
+ * the rest keep their themed defaults:
+ *
+ *   :root { --w6w-accent: #3355e6; }              // one token, both modes
+ *   html[data-theme="dark"] { --w6w-panel: #000 } // mode-specific
+ *
+ * Every default below is declared through `:where(...)` (specificity 0), so ANY
+ * host rule — even a plain `:root { ... }` — wins without !important. Tokens are
+ * defined on :root so every `.w6w-*` component inherits them out of the box.
+ */
+/* Light — the base defaults. */
+:where(:root) {
+  color-scheme: light;
+  --w6w-bg: #f7f8fa;
+  --w6w-panel: #ffffff;
+  --w6w-panel-2: #f0f2f6;
+  --w6w-border: #d9dee5;
+  --w6w-text: #1a1d24;
+  --w6w-muted: #5f6875;
+  --w6w-accent: #3355e6;
+  --w6w-danger: #c1362f;
+  --w6w-success: #2e9e5b;
+  --w6w-health-ok: var(--w6w-success);
+  --w6w-health-degraded: #c77700;
+  --w6w-health-down: var(--w6w-danger);
+  --w6w-health-unknown: #5f6875;
+  --w6w-icon-swatch: #f0f2f6;
+  --w6w-code-comment: #6b7280;
+  --w6w-code-keyword: #8250df;
+  --w6w-code-string: #0a7b34;
+  --w6w-code-number: #b3541e;
+  --w6w-code-function: #1f6feb;
+  --w6w-code-punctuation: #5f6875;
+  --w6w-code-variable: #953800;
+  --w6w-radius: 10px;
+}
+
+/* Dark — followed automatically from the OS preference (unless a host has
+   forced a mode via data-theme, which is handled by the blocks below). */
+@media (prefers-color-scheme: dark) {
+  :where(:root) {
+    color-scheme: dark;
+    --w6w-bg: #0f1115;
+    --w6w-panel: #181b22;
+    --w6w-panel-2: #1f232c;
+    --w6w-border: #2a2f3a;
+    --w6w-text: #e6e8ee;
+    --w6w-muted: #9aa3b2;
+    --w6w-accent: #5b8cff;
+    --w6w-danger: #ff6b6b;
+    --w6w-success: #3fbf77;
+    --w6w-health-ok: var(--w6w-success);
+    --w6w-health-degraded: #f0a020;
+    --w6w-health-down: var(--w6w-danger);
+    --w6w-health-unknown: #9aa3b2;
+    --w6w-icon-swatch: #1f232c;
+    --w6w-code-comment: #7d8797;
+    --w6w-code-keyword: #d2a8ff;
+    --w6w-code-string: #7ee787;
+    --w6w-code-number: #ffab70;
+    --w6w-code-function: #79c0ff;
+    --w6w-code-punctuation: #9aa3b2;
+    --w6w-code-variable: #ffa657;
+  }
+}
+/* Explicit mode. Declared AFTER the media query at equal (zero) specificity, so
+   a forced data-theme always beats the OS preference. */
+:where([data-theme=light]) {
+  color-scheme: light;
+  --w6w-bg: #f7f8fa;
+  --w6w-panel: #ffffff;
+  --w6w-panel-2: #f0f2f6;
+  --w6w-border: #d9dee5;
+  --w6w-text: #1a1d24;
+  --w6w-muted: #5f6875;
+  --w6w-accent: #3355e6;
+  --w6w-danger: #c1362f;
+  --w6w-success: #2e9e5b;
+  --w6w-health-ok: var(--w6w-success);
+  --w6w-health-degraded: #c77700;
+  --w6w-health-down: var(--w6w-danger);
+  --w6w-health-unknown: #5f6875;
+  --w6w-icon-swatch: #f0f2f6;
+  --w6w-code-comment: #6b7280;
+  --w6w-code-keyword: #8250df;
+  --w6w-code-string: #0a7b34;
+  --w6w-code-number: #b3541e;
+  --w6w-code-function: #1f6feb;
+  --w6w-code-punctuation: #5f6875;
+  --w6w-code-variable: #953800;
+}
+
+:where([data-theme=dark]) {
+  color-scheme: dark;
+  --w6w-bg: #0f1115;
+  --w6w-panel: #181b22;
+  --w6w-panel-2: #1f232c;
+  --w6w-border: #2a2f3a;
+  --w6w-text: #e6e8ee;
+  --w6w-muted: #9aa3b2;
+  --w6w-accent: #5b8cff;
+  --w6w-danger: #ff6b6b;
+  --w6w-success: #3fbf77;
+  --w6w-health-ok: var(--w6w-success);
+  --w6w-health-degraded: #f0a020;
+  --w6w-health-down: var(--w6w-danger);
+  --w6w-health-unknown: #9aa3b2;
+  --w6w-icon-swatch: #1f232c;
+  --w6w-code-comment: #7d8797;
+  --w6w-code-keyword: #d2a8ff;
+  --w6w-code-string: #7ee787;
+  --w6w-code-number: #ffab70;
+  --w6w-code-function: #79c0ff;
+  --w6w-code-punctuation: #9aa3b2;
+  --w6w-code-variable: #ffa657;
+}
+
+.w6w-muted {
+  color: var(--w6w-muted);
+}
+
+.w6w-small {
+  font-size: 0.85em;
+}
+
+/*
+ * @w6w/ui — the spacing / typography scale.
+ *
+ * Values are MIRRORED, not invented, from `packages/frontend/packages/web`'s
+ * `src/styles/global.css:83-130` — that file is the canonical reference (it
+ * arrived at the same 4px base independently); this block copies its
+ * `--sp-*`/`--fs-*`/`--fw-*`/`--lh-*`/`--font-*` values byte-for-byte under the
+ * `--w6w-*` namespace this package already uses for every other token.
+ * `--fs-hero`'s `clamp()` stays `web`-only (a marketing-page concern; `ui` has
+ * no hero). Colour tokens, `--radius*`, `--shadow-*` and `--transition-fast`
+ * are NOT part of this scale — see `_tokens.scss`.
+ *
+ * HALF-STEPS (`--w6w-sp-0-5` / `--w6w-sp-1-5` / `--w6w-sp-2-5`) are `ui`-only
+ * additions on top of `web`'s set — `web` has none. The rule that keeps this a
+ * system rather than a free-for-all: whole steps for new code; a half-step is
+ * only for preserving an existing measured value that does not sit on a 4px
+ * step. Parity with `web` is therefore DIRECTIONAL — `ui` ⊇ `web` on the
+ * shared key set (every `web` token here has a byte-identical `ui` counterpart;
+ * `ui` additionally declares the three half-steps `web` does not).
+ *
+ * One `:where(:root)` block, not colour's three-way light / prefers-color-scheme /
+ * [data-theme] split — the scale is not theme-dependent, so a single specificity-0
+ * block covers every mode. Positioning this partial's `@use` line immediately
+ * after `styles/tokens` (see `styles.scss`) is a readability convention, not a
+ * cascade constraint: CSS custom properties resolve at computed-value time, so
+ * definition order relative to consumption order does not matter here, unlike
+ * `_tokens.scss`'s internal prefers-color-scheme / [data-theme] ordering, which
+ * IS load-bearing.
+ */
+:where(:root) {
+  /* Spacing — 4px ramp. Values mirror frontend/web's --sp-* verbatim. */
+  --w6w-sp-1: 4px;
+  --w6w-sp-2: 8px;
+  --w6w-sp-3: 12px;
+  --w6w-sp-4: 16px;
+  --w6w-sp-5: 20px;
+  --w6w-sp-6: 24px;
+  --w6w-sp-8: 32px;
+  --w6w-sp-10: 40px;
+  --w6w-sp-12: 48px;
+  --w6w-sp-16: 64px;
+  --w6w-sp-20: 80px;
+  /* Half-steps — ui-only, see the decision above. */
+  --w6w-sp-0-5: 2px;
+  --w6w-sp-1-5: 6px;
+  --w6w-sp-2-5: 10px;
+  /* Type ramp — rem, role names mirror frontend/web's --fs-*. */
+  --w6w-fs-xs: 0.75rem;
+  --w6w-fs-sm: 0.875rem;
+  --w6w-fs-base: 1rem;
+  --w6w-fs-lg: 1.125rem;
+  --w6w-fs-xl: 1.25rem;
+  --w6w-fs-2xl: 1.5rem;
+  --w6w-fs-3xl: 2rem;
+  --w6w-fw-regular: 400;
+  --w6w-fw-medium: 500;
+  --w6w-fw-semibold: 600;
+  --w6w-fw-bold: 700;
+  --w6w-lh-tight: 1.2;
+  --w6w-lh-normal: 1.5;
+  --w6w-lh-relaxed: 1.7;
+  --w6w-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --w6w-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/*
+ * Breakpoints — Sass variables, NOT CSS custom properties.
+ *
+ * `@media (min-width: var(--w6w-bp-md))` is invalid in every browser: a media
+ * query condition cannot read a custom property. So these live as Sass
+ * variables instead, resolved before the browser ever sees the stylesheet.
+ * `!default` lets a Sass consumer override one:
+ *
+ *   @use "@w6w/ui/styles/scale" with ($w6w-bp-md: 960px);
+ *
+ * `ui` itself consumes none of these — it deliberately ships no layout media
+ * queries (the host owns page layout; `ui` owns component internals). They
+ * exist purely so a consumer stops inventing its own breakpoint values (seven
+ * uncoordinated ones exist across the four repos today).
+ */
+/* Layout helpers */
+.w6w-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+}
+
+/* Form fields */
+.w6w-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  color: var(--w6w-muted);
+  font-size: 0.9em;
+}
+
+.w6w-field > span {
+  color: var(--w6w-muted);
+}
+
+.w6w-field input[type=text],
+.w6w-field input[type=password],
+.w6w-field input[type=number],
+.w6w-field select,
+.w6w-field textarea {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+}
+
+/* Native popups: the list background follows `color-scheme` (declared with the
+   tokens), so give the options token colours too — never one theme's text on
+   the other theme's background. */
+.w6w-field option,
+.w6w-field optgroup,
+select option,
+select optgroup {
+  color: var(--w6w-text);
+  background-color: var(--w6w-panel);
+}
+
+.w6w-field input:focus,
+.w6w-field select:focus,
+.w6w-field textarea:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+
+/* Credential inputs are plain text fields (never type="password", which would
+   trigger the browser's save-password prompt + suggestions). Mask them visually
+   so a secret still reads as dots. WebKit/Blink support text-security; other
+   engines fall back to plain text, which is acceptable for a credential. */
+.w6w-secret-input {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+
+.w6w-hint {
+  color: var(--w6w-muted);
+  font-size: 0.8em;
+}
+
+/* Side-by-side fields: params sharing a `row` id lay out horizontally. */
+.w6w-field-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-2-5);
+}
+
+.w6w-field-row > .w6w-field {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+/* Array control: a row per item + an add button. */
+.w6w-array {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+  align-items: flex-start;
+}
+
+.w6w-array-row {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  width: 100%;
+}
+
+.w6w-array-cells {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+  flex: 1;
+  min-width: 0;
+}
+
+.w6w-array-cells > .w6w-array-input {
+  flex: 1 1 120px;
+}
+
+/* An object-item array row's boolean cell: `<label><checkbox><span>`. It is a
+   `<label>`, so `margin: 0` is load-bearing for the same reason it is on
+   `.w6w-fx-inline-label` further down — a host page layers an unscoped
+   `label { margin-bottom: 10px }` after this file (studio's does, at
+   `studio/src/styles.css:499`) and owns any property this block leaves
+   undeclared. `.w6w-array-cells` is a flex row at the default `align-items:
+   stretch`, so a bottom margin does not translate this cell, it SHORTENS its
+   stretched box — and because this block centres its own contents, the checkbox
+   and its caption then ride upward off the row's centre line. Measured before
+   this declaration existed, in [ui+studio]: checkbox cy 792 against the sibling
+   text cell's 799 — 7.0px out, while a ui-only render showed 0.0px. */
+.w6w-array-check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  flex: 0 0 auto;
+  margin: 0;
+  font-size: 13px;
+  color: var(--w6w-text);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* `> input[type="checkbox"]`, not `input`: a bare `.w6w-array-check input` is
+   (0,1,1), which TIES with a host `input[type="checkbox"] { margin-right: 6px }`
+   (studio/src/styles.css:785) and then loses on source order — measured
+   `margin-right: 6px` reaching this checkbox with the `margin: 0` below already
+   present. The compound form is (0,2,1) and wins outright. Same shape as
+   `.w6w-fx-inline > input[type="checkbox"]`, which is why that one was never
+   affected. */
+.w6w-array-check > input[type=checkbox] {
+  margin: 0;
+}
+
+.w6w-field .w6w-array-input {
+  flex: 1;
+  min-width: 0;
+  /* Load-bearing, same class as `.w6w-array-check` above: a host
+     `input[type="text"] { margin-top: 4px }` otherwise lands here and drops this
+     cell 2px below its own row's checkbox cell. Measured in [ui+studio]:
+     checkbox cy 797 against this input's 799. This selector is (0,2,0) and beats
+     the host's (0,1,1). */
+  margin: 0;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+}
+
+.w6w-field .w6w-array-input:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+
+.w6w-array-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-base);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.w6w-array-x:hover {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+
+.w6w-array-add {
+  margin-top: var(--w6w-sp-0-5);
+}
+
+/* Material-style multi-select: chips live INSIDE a single input-like box,
+   followed by the dropdown which reads as the trailing placeholder. */
+.w6w-multiselect {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: 5px var(--w6w-sp-2);
+  min-height: 38px;
+}
+
+.w6w-multiselect:focus-within {
+  border-color: var(--w6w-accent);
+}
+
+.w6w-multiselect.is-readonly {
+  opacity: 0.7;
+}
+
+/* The add-dropdown blends into the box (no border/background) — compound
+   selector so it beats the global `.w6w-field select` styling. */
+.w6w-field .w6w-multiselect-add,
+.w6w-multiselect .w6w-multiselect-add {
+  flex: 1 1 90px;
+  min-width: 90px;
+  border: none;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+  padding: var(--w6w-sp-0-5) 0;
+  outline: none;
+  cursor: pointer;
+}
+
+.w6w-multiselect .w6w-multiselect-add:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+/* A selected value, rendered as a filled chip inside the box. */
+.w6w-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-1) var(--w6w-sp-0-5) var(--w6w-sp-2);
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--w6w-text);
+}
+
+.w6w-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.w6w-chip-x:hover {
+  background: var(--w6w-border);
+  color: var(--w6w-text);
+}
+
+/* Incoming state (WorkflowFlowEditor · `IncomingStateField`, mounted by BOTH the
+   step editor's Test tab and the canvas ▶ Run collect form). The raw JSON box is
+   an OVERRIDE, so it sits behind a disclosure instead of being the first thing
+   the tab shows — the seed chips above it stay in plain sight. */
+.w6w-state-override {
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2);
+}
+
+.w6w-state-override > summary {
+  cursor: pointer;
+  color: var(--w6w-muted);
+  font-size: 0.85em;
+}
+
+/* Breathing room only once it is open: closed, the summary IS the whole box. */
+.w6w-state-override[open] > summary {
+  margin-bottom: var(--w6w-sp-1-5);
+}
+
+.w6w-state-override > .w6w-hint {
+  display: block;
+  margin-top: var(--w6w-sp-1);
+}
+
+/* Incoming-state seed picker: upstream steps' saved tests offered as one-click
+   seeds for the step's incoming state (WorkflowFlowEditor · StepEditModal). */
+.w6w-seed-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  margin-bottom: var(--w6w-sp-1-5);
+}
+
+.w6w-seed-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-seed-chip {
+  cursor: pointer;
+}
+
+.w6w-seed-chip:hover:not(:disabled) {
+  border-color: var(--w6w-text);
+}
+
+.w6w-seed-chip:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+/* Expression input: a field whose contents are inline SEGMENTS — plain text
+   plus var/secret/expr chips, edited in place (contentEditable, like a Notion /
+   Zapier block field). A small toolbar carries the Insert menu + the {{ }} (fx)
+   mode toggle. Theme-aware via the shared tokens. */
+.w6w-expr {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+}
+
+/* Inline expression field: ONE input-like box holding the editable surface plus
+   a ƒx button that reads as a trailing decoration INSIDE it — the same idiom as
+   `.w6w-multiselect` above and `.w6w-expr-sealed` below. The box lives here so
+   the standalone uses still render as a field (the `secret` param path and the
+   public ExpressionInput export). When this rides inside a `.w6w-fx-wrap`, that
+   wrapper is the box and this is flattened — see `.w6w-fx-wrap` below. */
+.w6w-expr-field {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  min-height: 38px;
+}
+
+.w6w-expr-field:focus-within {
+  border-color: var(--w6w-accent);
+}
+
+.w6w-expr-field .w6w-expr-editor {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The ƒx rides inside the box, so it draws no chrome of its own — only its
+   colour states remain. */
+.w6w-expr-field .w6w-expr-edit {
+  border: none;
+  background: transparent;
+}
+
+.w6w-expr-edit {
+  flex-shrink: 0;
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+  font-size: 13px;
+  line-height: 1;
+  padding: var(--w6w-sp-1) var(--w6w-sp-1-5);
+  cursor: pointer;
+}
+
+.w6w-expr-edit:hover {
+  color: var(--w6w-accent);
+}
+
+/* Sealed at-rest secret (masked chip + Replace). */
+.w6w-expr-sealed {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: 5px var(--w6w-sp-2);
+  min-height: 38px;
+}
+
+.w6w-expr-sealed.is-readonly {
+  opacity: 0.7;
+}
+
+/* Expression editor modal: left data sources | right (editor over preview). */
+.w6w-exprmodal {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 14px;
+}
+
+.w6w-exprmodal-sources {
+  overflow: auto;
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  background: var(--w6w-panel-2);
+  padding: var(--w6w-sp-2-5);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.w6w-exprmodal-group {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.w6w-exprmodal-group-label {
+  font-size: 0.72em;
+  font-weight: var(--w6w-fw-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--w6w-muted);
+  margin-bottom: var(--w6w-sp-0-5);
+}
+
+.w6w-exprmodal-source {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.w6w-exprmodal-source:hover {
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+}
+
+.w6w-exprmodal-source.w6w-expr-chip-var {
+  color: var(--w6w-accent);
+}
+
+.w6w-exprmodal-source.w6w-expr-chip-secret {
+  color: var(--w6w-danger);
+}
+
+.w6w-exprmodal-source-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A step's per-field sources, nested under its whole-output source, so three
+   upstream steps x four fields reads as a tree rather than a flat wall. */
+.w6w-exprmodal-subsources {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-left: 9px;
+  padding-left: var(--w6w-sp-2);
+  border-left: 1px solid var(--w6w-border);
+}
+
+/* One document-field row: the primary insert source (flex: 1, so it still
+   truncates a long key the same way a bare `.w6w-exprmodal-source` does) plus
+   the second, visible action (D-P1) that inserts the SAME ref as a `render`
+   part — so the two read as one entry, not two unrelated controls. */
+.w6w-exprmodal-subsource-row {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-exprmodal-subsource-row .w6w-exprmodal-source {
+  flex: 1;
+  min-width: 0;
+}
+
+.w6w-exprmodal-render-btn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-success);
+  opacity: 0.75;
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+
+.w6w-exprmodal-render-btn:hover {
+  opacity: 1;
+  background: var(--w6w-panel);
+  border-color: var(--w6w-success);
+}
+
+/* A rail source with surviving child rows (a multi-field document, a step
+   with declared outputs) — the "whole source" button plus the expand/collapse
+   toggle, as siblings on one row. Mirrors `.w6w-exprmodal-subsource-row`'s
+   flex row + child-fills-width shape (`:74-82` above), kept as its own class
+   because the two are counted independently by the test suite. */
+.w6w-exprmodal-source-row {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-exprmodal-source-row .w6w-exprmodal-source {
+  flex: 1;
+  min-width: 0;
+}
+
+/* A step row's disclosure caret, sitting where the chip's `▸` sigil was —
+   that arrow reads as "expand", so on a row with fields it does exactly that
+   (the chip beside it still inserts the whole output). */
+.w6w-exprmodal-caret-btn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-accent);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+
+.w6w-exprmodal-caret-btn:hover {
+  background: var(--w6w-panel);
+}
+
+/* The "N fields" toggle with the Metadata toggle stacked under it, so both
+   disclosures share one left edge on a step row. */
+.w6w-exprmodal-toggle-stack {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px; /* lint-tokens-allow: 3px sits between no two steps of the spacing scale; tight stack of the fields and Metadata toggles */
+}
+
+/* A step with no fields: its Metadata toggle sits at the leaf indentation of
+   `.w6w-exprmodal-subsources` (margin 9px + 1px border + sp-2 padding). */
+.w6w-exprmodal-meta-row {
+  margin-left: calc(10px + var(--w6w-sp-2)); /* lint-tokens-allow: 9px margin + 1px border of .w6w-exprmodal-subsources */
+}
+
+/* Same 20px-high chrome as `.w6w-exprmodal-render-btn` above — the sizing
+   precedent for a dense rail control — but a separate class: this toggles
+   the `.w6w-exprmodal-subsources` block below it, the render-btn inserts a
+   `render` part. It carries a "N fields" label, not a bare chevron, so it is
+   auto-width (a lone 20px chevron went unnoticed beside the chip). */
+.w6w-exprmodal-toggle-btn {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--w6w-sp-1);
+  height: 20px;
+  padding: 0 6px; /* lint-tokens-allow: no 6px step on the spacing scale; between sp-1 and sp-2 keeps the 20px pill's label centred */
+  white-space: nowrap;
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+
+.w6w-exprmodal-toggle-btn:hover {
+  background: var(--w6w-panel);
+  border-color: var(--w6w-accent);
+  color: var(--w6w-text);
+}
+
+.w6w-exprmodal-main {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-exprmodal-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.w6w-exprmodal-pane-label {
+  font-size: 13px;
+  font-weight: var(--w6w-fw-semibold);
+  color: var(--w6w-text);
+}
+
+/* The WYSIWYG chip editor: tags flow inline with text (colored + spaced). */
+.w6w-exprmodal-chips {
+  flex: 1;
+  min-height: 180px;
+  overflow: auto;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  line-height: 2.1;
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.w6w-exprmodal-chips:focus {
+  border-color: var(--w6w-accent);
+}
+
+.w6w-exprmodal-chips.is-empty::before {
+  content: attr(data-placeholder);
+  color: var(--w6w-muted);
+  pointer-events: none;
+}
+
+.w6w-exprmodal-chips.is-masked {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+
+.w6w-exprmodal-chips.is-masked .w6w-expr-chip {
+  -webkit-text-security: none;
+  text-security: none;
+}
+
+.w6w-exprmodal-preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+}
+
+/* The Result pane's own share of `.w6w-exprmodal-main`'s flex column — the
+   SHARE lives on this wrapper, not on the `<pre>` below: the `<pre>`'s parent
+   is this wrapper (`.w6w-exprmodal-preview`, a flex column), not `-main`
+   itself, so a `flex-basis` on the `<pre>` would be a share of a
+   content-sized box and do nothing. 42% keeps the pane in the 30-50% band and
+   the chips editor above the 25% floor at 1440x900, 1280x720 and 1440x1200 —
+   measured in real Chromium, `test/expr-template/expr-template-guards.test.cjs`
+   T-height; see the project's result for the numbers. */
+.w6w-exprmodal-result-pane {
+  flex: 0 0 42%;
+  min-height: 0;
+}
+
+/* The pane's 42% share above is a flex-basis on `.w6w-exprmodal-result-pane`
+   itself (a column flex container) — it must still reach the `<pre>` now that
+   `Copyable` wraps it in a `.w6w-copyable` div. That wrapper is the actual
+   column child now, so it needs the grow/shrink share instead. */
+.w6w-exprmodal-result-pane > .w6w-copyable {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.w6w-exprmodal-result {
+  flex: 1 1 auto;
+  /* `.w6w-copyable` is a ROW flex container (`_copyable.scss:5`), and its
+     `:has(> pre)` arm (`_copyable.scss:19-21`) sets `align-items: flex-start`
+     for CodeBlock's snippet case, where the box is sized TO the pre's
+     content. Here it's the other way around — the wrapper is grown to the
+     pane's share by the rule above, and the `<pre>` must fill IT. `flex: 1 1
+     auto`'s grow/shrink applies to the row's main axis (width) and does
+     nothing for height there, so the cross-axis stretch has to be pinned
+     directly on this item, overriding the container's `flex-start`. */
+  align-self: stretch;
+  min-height: 0;
+  max-height: none;
+  overflow: auto;
+  margin: 0;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  /* `_copyable.scss:105-107`'s corner-button clearance is scoped to
+     `.w6w-code-block` and does not apply here — same 40px value (icon box +
+     inset + gap) so the overlaid copy button never sits on the first line. */
+  padding-right: var(--w6w-sp-10);
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.w6w-exprmodal-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-expr-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+
+/* fx toggle — an end decoration INSIDE the field, not a button beside it. The
+   WRAPPER owns the input chrome (background/border/radius/min-height and the
+   focus ring) and every widget it holds is flattened below, so the value and its
+   ƒx affordance read as ONE box. Mirrors `.w6w-multiselect` above. */
+.w6w-fx-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  min-height: 38px;
+}
+
+/* A textarea is taller than the ƒx, so there the decoration rides at the top. */
+.w6w-fx-wrap:has(> textarea) {
+  align-items: flex-start;
+}
+
+/* Focus reads on the box now that the inner widget has no border of its own. */
+.w6w-fx-wrap:focus-within {
+  border-color: var(--w6w-accent);
+}
+
+.w6w-fx-wrap > input,
+.w6w-fx-wrap > select,
+.w6w-fx-wrap > textarea,
+.w6w-fx-wrap > .w6w-multiselect,
+.w6w-fx-wrap > .w6w-expr {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The widget inside the wrapper carries NO chrome of its own. COMPOUND
+   selectors, because the global `.w6w-field input|select|textarea` rule is
+   (0,2,1) and a bare `.w6w-fx-wrap > input` at (0,1,1) would lose to it — the
+   same trap documented on `.w6w-multiselect-add` above. `.w6w-datavar-row
+   input|select` is the second rule to beat, for the `bare` vars-row cell. */
+.w6w-field .w6w-fx-wrap input[type=text],
+.w6w-field .w6w-fx-wrap input[type=password],
+.w6w-field .w6w-fx-wrap input[type=number],
+.w6w-field .w6w-fx-wrap select,
+.w6w-field .w6w-fx-wrap textarea,
+.w6w-datavar-row .w6w-fx-wrap input,
+.w6w-datavar-row .w6w-fx-wrap select,
+.w6w-fx-wrap input[type=text],
+.w6w-fx-wrap input[type=password],
+.w6w-fx-wrap input[type=number],
+.w6w-fx-wrap select,
+.w6w-fx-wrap textarea {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  padding: var(--w6w-sp-1) var(--w6w-sp-0-5);
+  outline: none;
+  /* EVERY property in this block is load-bearing, for the same reason
+     `.w6w-fx-inline-label`'s `margin: 0` is (see below): a host page layers its
+     own unscoped `input[type="text"], textarea { … }` rule AFTER this file
+     (studio's does, at `studio/src/styles.css:513-533`, `:759-771` and `:788`),
+     so every property this block leaves undeclared is the host's — including
+     inside a box this library draws. The two below were measured leaking, in
+     [ui+studio], before they were declared — and they fix DIFFERENT things:
+
+       margin     — ALIGNMENT. A host `margin-top: 4px` in an `align-items:
+                    center` row drops the control 2px below the ƒx it shares the
+                    row with (string, number and the bare vars cell; select and
+                    multiselect escaped only because the host rule does not list
+                    them). Rendered: control cy 67 vs ƒx cy 65. On the textarea
+                    row — `align-items: flex-start` — the same 4px showed up as
+                    the ƒx sitting 4px off the control's first line. `margin: 0`
+                    is the whole of that fix.
+
+       min-height — SIZE, and nothing else. Do not re-justify this one as
+                    alignment: the counterfactual was rendered (this `margin: 0`
+                    kept, `min-height: 0` removed) and the row measures a 0.0px
+                    top delta with the host's 80px floor fully in effect. What it
+                    fixes is that a host `textarea { min-height: 80px }`, written
+                    for that host's own bare textareas, was sizing the INSIDE of
+                    a box it cannot see — 80px/94px against the 62px/72px the
+                    same markup renders elsewhere, i.e. one of five control types
+                    29% taller than the library drew it. The box is the library's
+                    to size; how many lines it holds is `rows` on the control.
+                    If a taller body field is ever wanted, it belongs HERE, not
+                    in a host element selector.
+
+     Declared, not fought for: this stays at the block's existing specificity and
+     uses no `!important`. A component that is only aligned while the host
+     cooperates is broken. */
+  margin: 0;
+  min-height: 0;
+}
+
+/* …and the two widgets that own an input-like box themselves are flattened too,
+   so the wrapper never draws a box around a box. */
+.w6w-fx-wrap .w6w-expr-field,
+.w6w-fx-wrap .w6w-multiselect {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+  min-height: 0;
+}
+
+/* The OTHER wrapper FxField can render (`variant="inline"`). A control that does
+   not FILL a text-field box — today only a `boolean`'s ~13px checkbox — opts out
+   of the box at the component seam and lands here instead, so `.w6w-fx-wrap`'s
+   chrome above is never applied and nothing has to be clawed back with a more
+   specific selector. Layout is the review's sketch: <checkbox> <ƒx> <label>,
+   one row, no border/background/padding/min-height of its own. */
+.w6w-fx-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-fx-inline > input[type=checkbox] {
+  flex: 0 0 auto;
+  margin: 0;
+}
+
+/* The label reads as the control's own text, next to it (mirrors
+   `.w6w-array-check` above, the existing inline-checkbox idiom).
+   `margin: 0` is LOAD-BEARING, not tidiness: a host page may carry an unscoped
+   top-level `label { … margin-bottom: 10px }` (studio's own sheet does, at
+   `studio/src/styles.css:499`), and since it is layered AFTER this file any
+   property this block leaves undeclared is the host's. A bottom margin inside an
+   `align-items: center` row lifts the text off the row's centre line — measured
+   5px above the checkbox and the ƒx before this declaration existed. Every other
+   element of the row is defended the same way: the checkbox's `margin: 0` above
+   out-specifies a host `input[type="checkbox"] { margin-right: … }` (0,2,1 vs
+   0,1,1), and the ƒx's chrome is pinned by `.w6w-fx-inline .w6w-expr-fx` below.
+   A component that only lines up when the host sheet cooperates is broken. */
+.w6w-fx-inline-label {
+  margin: 0;
+  color: var(--w6w-text);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+/* The ƒx itself is a decoration inside whichever wrapper holds it: no chrome,
+   colour only. This is where the UA button border/background is removed (the
+   `.w6w-expr-fx` block below declares neither), so the inline wrapper has to be
+   listed here too or its ƒx comes back as a grey rounded button. The label row
+   (`json` / childless `group` params, which have no field box) is a third
+   placement and gets the same chrome-stripping. */
+.w6w-fx-wrap .w6w-expr-fx,
+.w6w-fx-inline .w6w-expr-fx,
+.w6w-field-labelrow .w6w-expr-fx {
+  border: none;
+  background: transparent;
+}
+
+.w6w-expr-fx {
+  flex-shrink: 0;
+  color: var(--w6w-muted);
+  font-size: 13px;
+  font-family: var(--w6w-font-mono);
+  line-height: 1;
+  padding: var(--w6w-sp-1) var(--w6w-sp-1-5);
+  cursor: pointer;
+}
+
+.w6w-expr-fx:hover {
+  color: var(--w6w-text);
+}
+
+.w6w-expr-fx.is-active {
+  color: var(--w6w-accent);
+}
+
+/* Copyable — an in-box copy affordance decorating a value-displaying control
+   (an <input>, a <textarea>, or CodeBlock's <pre>). Mirrors `.w6w-fx-wrap`
+   (`_fx.scss:1-88`): the WRAPPER owns the box chrome and every child it holds
+   is flattened below, so the value and the copy affordance read as ONE box. */
+.w6w-copyable {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  /* Box-family invariant: byte-identical to `.w6w-fx-wrap`'s at `_fx.scss:13` —
+     six rules across four partials share this value (`building-blocks.md` §3
+     row 7); a scale token here would drift the moment that family moves. */
+  min-height: 38px;
+}
+
+/* A textarea/pre is taller than the button, so the button rides at the top —
+   mirrors `.w6w-fx-wrap:has(> textarea)` (`_fx.scss:16-18`). */
+.w6w-copyable:has(> textarea),
+.w6w-copyable:has(> pre) {
+  align-items: flex-start;
+}
+
+/* Focus reads on the box now that the inner control has no border of its own. */
+.w6w-copyable:focus-within {
+  border-color: var(--w6w-accent);
+}
+
+.w6w-copyable > input,
+.w6w-copyable > textarea,
+.w6w-copyable > pre {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The control inside the wrapper carries NO chrome of its own. Mirrors
+   `_fx.scss:36-88`'s selector list and property list WHOLESALE
+   (s/w6w-fx-wrap/w6w-copyable/g) — not re-derived, gated for parity by the
+   project's test plan. See that file for the measured leak evidence (7.0px
+   alignment / 2px / 29% height) each property below defends against; a host
+   page's unscoped `input[type="text"], … textarea { … }` rule (studio's own,
+   layered AFTER this stylesheet) is exactly what these declarations beat. */
+.w6w-field .w6w-copyable input[type=text],
+.w6w-field .w6w-copyable input[type=password],
+.w6w-field .w6w-copyable input[type=number],
+.w6w-field .w6w-copyable select,
+.w6w-field .w6w-copyable textarea,
+.w6w-datavar-row .w6w-copyable input,
+.w6w-datavar-row .w6w-copyable select,
+.w6w-copyable input[type=text],
+.w6w-copyable input[type=password],
+.w6w-copyable input[type=number],
+.w6w-copyable select,
+.w6w-copyable textarea {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  /* lint-tokens-allow: mirrors _fx.scss:36-88 byte-for-byte, required by the parity gate */
+  padding: 4px 2px;
+  outline: none;
+  margin: 0;
+  min-height: 0;
+}
+
+/* The wrapper never draws a box around a box (mirrors `_fx.scss:91-98`). */
+.w6w-copyable .w6w-code-block {
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+/* Button chrome extends `.w6w-icon-btn` (`_icons.scss:1-11`) in markup — this
+   class only pins the flex behaviour and the copied state, no re-authored
+   hover/active states. */
+.w6w-copyable-btn {
+  flex: none;
+}
+
+/* ── CodeBlock: the button OVERLAYS the box's top-right corner ──────────────
+   For an <input>/<textarea> the button is a flex sibling, which is right: the
+   value is one line and the control shrinks to leave room for it. A <pre> is
+   different — it is a block of many lines, and a flex sibling would carve a
+   permanent empty column out of the full height of it to seat one 28px button.
+   So here the button leaves the flow and sits over the corner instead.
+
+   Absolute against the WRAPPER, not the <pre>, on purpose: the <pre> is the
+   element that scrolls (`overflow-x: auto`, plus `overflow-y` when `maxHeight`
+   is set), so anchoring to it would slide the button out of view on a wide or
+   tall snippet. Anchored to the wrapper it stays pinned to the visible corner. */
+.w6w-copyable:has(> pre) {
+  position: relative;
+}
+
+.w6w-copyable:has(> pre) > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  /* An opaque backdrop, which the flex-sibling case does not need: this button
+     sits ON the code, and `.w6w-icon-btn`'s transparent idle state would let
+     the first line's text read through it. It also restores the hover feedback
+     — `.w6w-icon-btn:hover` paints `--w6w-panel-2`, which is the wrapper's own
+     background here and would otherwise be a no-op. */
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+}
+
+/* Keep the first line clear of the button. Deliberately NOT folded into the
+   `.w6w-copyable .w6w-code-block` reset above — that rule mirrors
+   `_fx.scss:91-98` and is held byte-for-byte by the parity gate. 40px = the
+   button's ~28px box + its 4px inset + a 8px gap before the text. */
+.w6w-copyable:has(> pre) > .w6w-code-block {
+  padding-right: var(--w6w-sp-10);
+}
+
+.w6w-copyable-btn.is-copied {
+  /* Mirrors `.w6w-expr-chip-render`'s "confirmed/success" convention exactly
+     (`_chips.scss:38-42`) — the one visual for a copied/success state. */
+  border-color: var(--w6w-success);
+  color: var(--w6w-success);
+  background: color-mix(in srgb, var(--w6w-success) 14%, transparent);
+}
+
+/* Scoped visually-hidden live region — not a new general `sr-only` utility
+   (none exists in `ui` to extend; see `Copyable.tsx` for why this, not the
+   button's own accessible name, carries the "Copied" announcement). */
+.w6w-copyable-status {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+  padding: 0;
+}
+
+/* ── Bare modifier: CopyableText (D-7) ───────────────────────────────────
+   A self-contained modifier, NOT a widening of the shared `> input, >
+   textarea, > pre` selector above (`:28-33`) — that list stays untouched.
+   Strips the box chrome the base `.w6w-copyable` rule sets (`:5-17`: border,
+   background, padding, min-height), and separately gives its own `> span`
+   child the SAME flex-and-shrink pair the shared selector gives an
+   `<input>`/`<textarea>`/`<pre>` (`:28-33` below) — a bare `<span>` is not in
+   that list, and without this it silently reproduces the overflow bug
+   `studio/src/pages/VarsPage.tsx:62-79` had to hand-patch. */
+.w6w-copyable--bare {
+  border: none;
+  background: transparent;
+  padding: 0;
+  min-height: 0;
+}
+
+.w6w-copyable--bare > span {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The raw {{ }} input stands alone, so it keeps an input box of its own. */
+.w6w-expr-raw {
+  width: 100%;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  min-height: 38px;
+  color: var(--w6w-text);
+  font-family: var(--w6w-font-mono);
+  font-size: 13px;
+  line-height: var(--w6w-lh-relaxed);
+}
+
+.w6w-expr-raw:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+
+/* The inline editor surface (one continuous field) sits INSIDE
+   `.w6w-expr-field`'s box, so it draws no chrome — the border, the background
+   and the focus ring all belong to that box. */
+.w6w-expr-editor {
+  width: 100%;
+  padding: var(--w6w-sp-0-5) 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+  line-height: var(--w6w-lh-relaxed);
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.w6w-expr-editor.is-readonly,
+.w6w-expr-input.is-readonly {
+  opacity: 0.7;
+}
+
+/* Placeholder for the empty contentEditable field. */
+.w6w-expr-editor.is-empty::before {
+  content: attr(data-placeholder);
+  color: var(--w6w-muted);
+  pointer-events: none;
+}
+
+/* Masked (secret) fields: mask typed TEXT as dots; chips are exempt — a chip
+   shows a name/label, never a secret value. */
+.w6w-expr-editor.is-masked {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+
+.w6w-expr-editor.is-masked .w6w-expr-chip {
+  -webkit-text-security: none;
+  text-security: none;
+}
+
+/* Sealed at-rest secret uses a simple flex wrapper (chip + Replace). */
+.w6w-expr-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: 5px var(--w6w-sp-2);
+  min-height: 38px;
+}
+
+/* Chips: a var/secret/expr segment. Distinct look per kind; sits inline in the
+   text flow. */
+.w6w-expr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  vertical-align: baseline;
+  box-sizing: border-box;
+  /* Never exceed the field's content box; the label truncates before the chip
+     can overrun the adjacent ƒx button. */
+  max-width: 100%;
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: 1px var(--w6w-sp-1-5);
+  margin: 0 3px;
+  font-size: 12.5px;
+  line-height: 1.4;
+  font-family: var(--w6w-font-mono);
+  color: var(--w6w-text);
+  background: var(--w6w-panel);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.w6w-expr-chip-var {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+  background: color-mix(in srgb, var(--w6w-accent) 14%, transparent);
+}
+
+.w6w-expr-chip-secret {
+  border-color: var(--w6w-danger);
+  color: var(--w6w-danger);
+  background: color-mix(in srgb, var(--w6w-danger) 14%, transparent);
+}
+
+.w6w-expr-chip-expr {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--w6w-text) 8%, transparent);
+}
+
+.w6w-expr-chip-render {
+  border-color: var(--w6w-success);
+  color: var(--w6w-success);
+  background: color-mix(in srgb, var(--w6w-success) 14%, transparent);
+}
+
+.w6w-expr-chip-sigil {
+  flex: none;
+  font-weight: var(--w6w-fw-semibold);
+  opacity: 0.8;
+}
+
+.w6w-expr-chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--w6w-fw-medium);
+}
+
+.w6w-expr-chip-x {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  font-size: var(--w6w-fs-sm);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.w6w-expr-chip-x:hover {
+  opacity: 1;
+  background: var(--w6w-border);
+}
+
+/* The render affordance: flips a var/render chip in place (see `makeChip`). */
+.w6w-expr-chip-toggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  font-size: var(--w6w-fs-xs);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.w6w-expr-chip-toggle:hover {
+  opacity: 1;
+  background: var(--w6w-border);
+}
+
+.w6w-expr-replace {
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  font-family: inherit;
+  padding: 3px var(--w6w-sp-2);
+  cursor: pointer;
+}
+
+.w6w-expr-replace:hover {
+  color: var(--w6w-text);
+  background: var(--w6w-panel);
+}
+
+/* Insert affordance + popover menu (variable / secret / expression). */
+.w6w-expr-insert {
+  position: relative;
+  display: inline-flex;
+}
+
+.w6w-expr-insert-btn {
+  border: 1px dashed var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  font-family: inherit;
+  padding: 3px var(--w6w-sp-2);
+  cursor: pointer;
+}
+
+.w6w-expr-insert-btn:hover {
+  color: var(--w6w-text);
+  border-color: var(--w6w-accent);
+}
+
+.w6w-expr-menu {
+  position: absolute;
+  top: calc(100% + var(--w6w-sp-1));
+  left: 0;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  min-width: 200px;
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+}
+
+.w6w-expr-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-expr-menu-group + .w6w-expr-menu-group {
+  border-top: 1px solid var(--w6w-border);
+  padding-top: var(--w6w-sp-2);
+}
+
+.w6w-expr-menu-label {
+  font-size: 0.72em;
+  font-weight: var(--w6w-fw-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--w6w-muted);
+}
+
+/* A secret-typed field surfaces the Secrets group first + highlighted, so
+   picking a secret is the obvious one-click path (task 3.2). */
+.w6w-expr-menu-group.is-primary {
+  background: var(--w6w-panel-2);
+  border-radius: 6px;
+  padding: var(--w6w-sp-1-5);
+  margin: -2px;
+}
+
+.w6w-expr-menu-group.is-primary .w6w-expr-menu-label {
+  color: var(--w6w-accent);
+}
+
+.w6w-expr-menu-empty {
+  font-size: var(--w6w-fs-xs);
+  color: var(--w6w-muted);
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  font-style: italic;
+}
+
+.w6w-expr-menu-item {
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.w6w-expr-menu-item:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-expr-menu-add {
+  display: flex;
+  gap: var(--w6w-sp-1-5);
+  align-items: center;
+}
+
+.w6w-expr-menu-add input {
+  flex: 1;
+  min-width: 0;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.w6w-expr-menu-add input:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+
+/* Typed key/value rows (the `vars` form element / `data` control step). */
+.w6w-datavar-row {
+  display: grid;
+  grid-template-columns: 1fr 110px 1fr auto;
+  gap: var(--w6w-sp-1-5);
+  /* Align to the end so that on an `expression` row — where the value cell is a
+     taller ExpressionInput (toolbar above its editor) — the key/type/remove
+     cells line up with the editor at the bottom, not the toolbar. Single-line
+     rows are unaffected (every cell is the same height). */
+  align-items: end;
+}
+
+.w6w-datavar-row input,
+.w6w-datavar-row select {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+  min-width: 0;
+}
+
+/* The block above is `.w6w-datavar-row input` at (0,1,1), which TIES with a host
+   `input[type="text"] { margin-top: 4px }` and loses on source order — so the
+   margin has to be re-declared at a specificity that wins, rather than added to
+   that block where it would have no effect. `.w6w-field` is always an ancestor
+   here (`VarsField` renders one), giving (0,2,1). */
+.w6w-field .w6w-datavar-row input,
+.w6w-field .w6w-datavar-row select {
+  margin: 0;
+}
+
+.w6w-datavar-row input:focus,
+.w6w-datavar-row select:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+
+.w6w-datavar-row .w6w-btn {
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2-5);
+}
+
+/* Buttons */
+.w6w-btn {
+  background: var(--w6w-accent);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) 14px;
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+
+.w6w-btn:hover {
+  filter: brightness(1.08);
+}
+
+.w6w-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.w6w-btn-ghost {
+  background: transparent;
+  border: 1px solid var(--w6w-border);
+  color: var(--w6w-text);
+}
+
+.w6w-btn-ghost:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-btn-ghost.active {
+  border-color: var(--w6w-accent);
+  background: var(--w6w-panel-2);
+}
+
+/* Destructive confirm button (ConfirmModal's default). Styled from the same
+   --w6w-danger token the error notices and health pills already use. */
+.w6w-btn-danger {
+  background: var(--w6w-danger);
+  color: white;
+}
+
+/* List row — a clean, reusable list item (leading icon · title/subtitle · trailing).
+   Mirrors the ghost saved-test button rows it replaces. */
+.w6w-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  width: 100%;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--w6w-text);
+  text-align: left;
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+
+button.w6w-list-item {
+  font: inherit;
+  font-size: var(--w6w-fs-sm);
+}
+
+.w6w-list-item:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-list-item:focus-visible {
+  outline: none;
+  border-color: var(--w6w-accent);
+  box-shadow: 0 0 0 2px var(--w6w-accent);
+}
+
+.w6w-list-item.active {
+  border-color: var(--w6w-accent);
+  background: var(--w6w-panel-2);
+}
+
+.w6w-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.w6w-list-item-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: var(--w6w-sp-0-5);
+}
+
+.w6w-list-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w6w-list-item-subtitle {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w6w-list-item-trailing {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Health status pill — a small, theme-aware badge for one health state
+   (ok · degraded · down · unknown). Colour comes from the `--w6w-health-*`
+   tokens so a host can restyle every state by overriding those; the dot tints
+   with the state while the pill keeps a soft tinted background + border. */
+.w6w-health-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2) var(--w6w-sp-0-5) 7px;
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 40%, var(--w6w-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--w6w-health-color) 12%, transparent);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-normal);
+  white-space: nowrap;
+  --w6w-health-color: var(--w6w-health-unknown);
+}
+
+.w6w-health-pill-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+}
+
+.w6w-health-pill-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+}
+
+.w6w-health-pill-down {
+  --w6w-health-color: var(--w6w-health-down);
+}
+
+.w6w-health-pill-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+}
+
+.w6w-health-pill-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--w6w-health-color);
+}
+
+.w6w-health-pill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* App summary block */
+.w6w-app-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+}
+
+/* Modal */
+.w6w-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: grid;
+  place-items: center;
+  padding: var(--w6w-sp-5);
+  z-index: 50;
+}
+
+dialog.w6w-modal {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  overflow: auto;
+  padding: var(--w6w-sp-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+
+dialog.w6w-modal::backdrop {
+  background: rgba(0, 0, 0, 0.55);
+}
+
+dialog.w6w-modal h3,
+dialog.w6w-modal h4,
+dialog.w6w-modal p {
+  color: var(--w6w-text);
+  margin: 0;
+}
+
+dialog.w6w-modal.w6w-modal-wide {
+  max-width: min(850px, 80vw);
+  min-height: min(70vh, 560px);
+}
+
+dialog.w6w-modal.w6w-modal-xl {
+  max-width: 1040px;
+  min-height: min(70vh, 620px);
+}
+
+dialog.w6w-modal.w6w-modal-full {
+  max-width: min(1200px, 96vw);
+  width: 96vw;
+  height: 92vh;
+  max-height: 92vh;
+  overflow: hidden;
+}
+
+/* Edge-to-edge surface: the whole viewport, no rounded corners and no visible
+   backdrop margin. Distinct from `.w6w-modal-full` (96vw x 92vh), which is
+   deliberately inset so the page behind stays visible as context — the
+   expression editor and the action tester both rely on that.
+   `position: fixed; inset: 0` already sizes to the viewport, so width/height
+   here are belt-and-braces against a UA stylesheet's `dialog` sizing.
+   The header is pinned; the caller's own child scrolls (it must set
+   `flex: 1; min-height: 0; overflow: auto` on itself). */
+dialog.w6w-modal.w6w-modal-fullscreen {
+  max-width: none;
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  padding: var(--w6w-sp-5) var(--w6w-sp-6);
+}
+
+dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
+  flex-shrink: 0;
+  padding-bottom: var(--w6w-sp-4);
+  border-bottom: 1px solid var(--w6w-border);
+}
+
+.w6w-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-modal-title {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  min-width: 0;
+}
+
+.w6w-modal-subtitle {
+  color: var(--w6w-muted);
+  font-size: 0.7em;
+  font-weight: var(--w6w-fw-regular);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.w6w-modal-subtitle code {
+  font-size: inherit;
+}
+
+/* The one scrolling region of a dialog (D-3): the body takes the leftover height
+   and scrolls, so the header/footer around it stay put. The dialog's own
+   `gap: var(--w6w-sp-3)` column is reproduced here so content-spacing is
+   unchanged now that body children are flex items of THIS box, not the dialog's. */
+.w6w-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Pinned below the scrolling `.w6w-modal-body`, never shrunk away by it (D-3).
+   Sits at the dialog's bottom for free: the body above it already absorbs the
+   free space, so no `margin-top: auto` is needed (or wanted — it would shrink
+   this row instead). */
+.w6w-modal-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+/* Icon-button view toggle (e.g. Form ⇄ JSON), inline with a modal header. */
+.w6w-view-toggle {
+  display: flex;
+  gap: var(--w6w-sp-1);
+  flex-shrink: 0;
+}
+
+.w6w-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5);
+  color: var(--w6w-muted);
+  cursor: pointer;
+}
+
+.w6w-icon-btn:hover {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+
+.w6w-icon-btn.active {
+  background: var(--w6w-panel-2);
+  border-color: var(--w6w-accent);
+  color: var(--w6w-text);
+}
+
+/* Segmented sub-tabs inside the edit modal's form view (Parameters | Config). */
+.w6w-subtabs {
+  display: inline-flex;
+  gap: var(--w6w-sp-0-5);
+  padding: var(--w6w-sp-0-5);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  align-self: flex-start;
+}
+
+.w6w-subtab {
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-3);
+  color: var(--w6w-muted);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.w6w-subtab:hover {
+  color: var(--w6w-text);
+}
+
+.w6w-subtab.active {
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  font-weight: var(--w6w-fw-medium);
+}
+
+.w6w-subtab:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.w6w-subtab:disabled:hover {
+  color: var(--w6w-muted);
+}
+
+/* Full-width tabs bar: segmented tabs on the left, view icons on the right. */
+.w6w-tabsbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+  border-bottom: 1px solid var(--w6w-border);
+  padding-bottom: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+
+.w6w-icon-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.w6w-icon-btn:disabled:hover {
+  background: transparent;
+  color: var(--w6w-muted);
+}
+
+/* Config modal body (a picked app/node) fills the dialog so the footer pins to
+   the modal's bottom rather than a fixed-height content area. */
+.w6w-stepbuilder-config {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Compact one-line step identity (id · app · action) in the edit modal. */
+.w6w-step-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  /* lint-tokens-allow: relative em, not absolute rem like the scale's --w6w-fs- type tokens — mirrors the accepted _modal.scss:88 .w6w-modal-subtitle precedent; .w6w-step-meta currently has zero .tsx call sites (possible dead CSS, not this task's to delete) */
+  font-size: 0.8em;
+  color: var(--w6w-muted);
+}
+
+.w6w-step-meta code {
+  color: var(--w6w-text);
+}
+
+/* Step builder (sidebar + content) */
+.w6w-stepbuilder {
+  display: flex;
+  gap: var(--w6w-sp-4);
+  min-height: 340px;
+}
+
+.w6w-stepbuilder-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  width: 140px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--w6w-border);
+  padding-right: var(--w6w-sp-3);
+}
+
+.w6w-stepbuilder-tab {
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+
+.w6w-stepbuilder-tab:hover {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+
+.w6w-stepbuilder-tab.active {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+  font-weight: var(--w6w-fw-medium);
+}
+
+.w6w-stepbuilder-content {
+  flex: 1;
+  min-width: 0;
+  /* Fixed height (not content-driven) so the modal never resizes when toggling
+     tabs, and the sidebar divider — which stretches to this row — stays a
+     constant length regardless of the right pane's content. */
+  height: min(70vh, 520px);
+  overflow: auto;
+}
+
+/* Apps flow: a fixed search header + a separately scrolling list, so the
+   scrollbar is contained to the list and never runs alongside the search. */
+.w6w-stepbuilder-apps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+  height: 100%;
+  min-height: 0;
+}
+
+.w6w-stepbuilder-scroll {
+  overflow-y: auto;
+  /* Fill the remaining height below the search header; the list — not the
+     outer modal content — owns the scrollbar. */
+  flex: 1;
+  min-height: 0;
+  padding-right: var(--w6w-sp-1);
+}
+
+.w6w-stepbuilder-search {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+  width: 100%;
+}
+
+.w6w-stepbuilder-search:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+
+.w6w-stepbuilder-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-stepbuilder-item {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  text-align: left;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  color: var(--w6w-text);
+  cursor: pointer;
+  font-size: var(--w6w-fs-sm);
+}
+
+.w6w-stepbuilder-item:hover {
+  border-color: var(--w6w-accent);
+}
+
+.w6w-stepbuilder-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+
+/* AppPicker's own multi-column card grid (T1.1.1). ADDITIVE on top of the
+   shared `.w6w-stepbuilder-list`/`-item` above, which stay byte-identical to
+   `main` (NodeList/CallableRow/ReadyToUseFlow still consume them unmodified)
+   — this rule wins the cascade purely by being declared later at equal
+   (single-class) specificity. `minmax(190px, 1fr)` is re-derived for this
+   card's much shorter content (icon + name + id + version, not a full
+   description card) from the scale `packages/frontend`'s generic `.grid`
+   utility uses (`minmax(260px, 1fr)`) — `grid-template-columns` is box
+   geometry, outside `lint:tokens`' scanned property set, so the literal is
+   deliberate, not an oversight.
+
+   `auto-fill`, NOT `auto-fit`: the two differ in exactly one case, and it is
+   the case a search box guarantees will happen. `auto-fit` COLLAPSES the
+   tracks no card landed in, and the `1fr` then hands their width to the
+   survivors — so typing a query that matches one app blew that single card up
+   to the full width of the panel, a tile that changes size as you type. With
+   `auto-fill` the empty tracks are kept at their `minmax()` width, so a card
+   is the same size whether the grid holds 60 of them or 1.
+
+   `align-content: start` is the vertical half of the same invariant: an auto
+   row track under the default `stretch` absorbs the free space of a grid with
+   a definite height (this one's, from `.w6w-stepbuilder-scroll`'s `flex: 1`),
+   so a single result would also have grown DOWN to fill the panel. */
+.w6w-apppicker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: var(--w6w-sp-2);
+  align-content: start;
+}
+
+/* The quieter resting card (D-3): `--w6w-panel` at rest instead of
+   `--w6w-panel-2`, shifting TO `--w6w-panel-2` on hover/focus — the inverse
+   of the shared item's flat `--w6w-panel-2` always-on tint. No new token;
+   `.w6w-stepbuilder-item:hover`'s `border-color: var(--w6w-accent)` above
+   still applies unchanged, so hover keeps both effects together. Slightly
+   tighter padding than the shared item, sized for a narrower multi-column
+   card rather than a single full-width row.
+
+   `min-height` pins every tile to one height regardless of what it holds:
+   `version` is optional on `AppSummary`, so a catalog that mixes versioned and
+   unversioned apps would otherwise render two card heights down the same grid
+   (grid items stretch to their ROW, not to the whole grid). The floor is the
+   three-line card's own content height rounded up, so it never clips.
+
+   `align-items: flex-start` overrides the shared item's `center`: against a
+   three-line block a centred 24px icon floats beside the id rather than
+   reading as the name's own mark. */
+.w6w-apppicker-card {
+  background: var(--w6w-panel);
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  align-items: flex-start;
+  min-height: 84px;
+}
+
+.w6w-apppicker-card:hover,
+.w6w-apppicker-card:focus-visible {
+  background: var(--w6w-panel-2);
+}
+
+/* The card's two metadata lines. One `font-size` declaration for both, because
+   there is only one deliberate literal here to justify: the type ramp's
+   smallest role is `--w6w-fs-xs` (0.75rem), the id and version want to sit a
+   step UNDER it, and the ramp has no `2xs` — its 30-name key set is pinned
+   name-for-name by `scale-tokens.test.ts` and mirrored by `packages/frontend`'s
+   `check:scale-parity`, so adding one is a cross-repo contract change, not a
+   card tweak. `code`'s own UA `font-size` also has to be overridden here
+   whatever value is chosen. */
+.w6w-apppicker-card-id,
+.w6w-apppicker-card-version {
+  /* lint-tokens-allow: one step under --w6w-fs-xs; the ramp has no 2xs role and its keys are pinned */
+  font-size: 0.6875rem;
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+}
+
+/* Truncation, not wrapping: `min-width: 0` on the parent
+   `.w6w-stepbuilder-item-main` is what lets this shrink below its own
+   min-content width in the first place — without it the ellipsis never
+   engages and a long id widens the flex line instead. */
+.w6w-apppicker-card-id {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.6;
+}
+
+/* Quieter than the name, but a step louder than the id it sits under — it is
+   the shorter, more scannable of the two. */
+.w6w-apppicker-card-version {
+  opacity: 0.75;
+}
+
+/* The opt-in category-filter chip row (D-1a; AddConnectionModal only —
+   `AppPickerProps.categoryFilter`). Extends `.w6w-chip`'s look
+   (`_multiselect.scss:40-53`) for the general shape rather than importing
+   it — that partial belongs to `ParamsForm`'s array-editor chips, a
+   different feature with the opposite interaction (only SELECTED values are
+   chips there; every available category is always a chip here). */
+.w6w-apppicker-cats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-apppicker-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-0-5);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+
+.w6w-apppicker-chip:hover {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-text);
+}
+
+/* The pressed/selected state is driven by the same `aria-pressed` the
+   button already carries for assistive tech (P10) — no separate class to
+   keep in sync with it. */
+.w6w-apppicker-chip[aria-pressed=true] {
+  background: var(--w6w-accent);
+  border-color: var(--w6w-accent);
+  color: #fff;
+  /* The count's `.w6w-muted` sets its OWN color, so it doesn't inherit this
+     `color: #fff` — left alone it stays `var(--w6w-muted)`, a gray tuned for
+     the unpressed `--w6w-panel` background, which is nearly invisible against
+     the accent fill. Not full white: the count is still secondary to the
+     label. */
+}
+.w6w-apppicker-chip[aria-pressed=true] .w6w-muted {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+/* AppPicker's own layout owner, nested inside `.w6w-stepbuilder-content` (never
+   applied in its place — see the call sites). A flex item's automatic minimum
+   size is its min-content size unless `overflow` is non-`visible` or
+   `min-height:0` is set; `.w6w-stepbuilder-content` has neither, so its
+   min-content (every app row, unclipped) pushes `dialog.w6w-modal` up against
+   `max-height:90vh`. This host's explicit `height` + `overflow:hidden` zeroes
+   that contribution, so the dialog falls back to `.w6w-modal-xl`'s
+   `min-height: min(70vh, 620px)` — the step builder's own height. */
+.w6w-apppicker-host {
+  flex: 0 0 auto;
+  min-width: 0;
+  height: min(70vh, 520px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.w6w-apppicker-host > .w6w-stepbuilder-apps {
+  height: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* The picker's home tab — the intake's two-column layout:
+
+     Connnected apps | functions
+                     | workflows
+
+   Connected apps down the left; Functions above Workflows down the right.
+   Nested inside `.w6w-apppicker-host`, which owns the height, so each column's
+   own list is what scrolls — never the modal. `min-height: 0` on the grid and
+   on every column is load-bearing: a grid/flex item's automatic minimum size
+   is its min-content size, so without it a long list pushes the dialog past
+   `.w6w-apppicker-host`'s fixed height instead of scrolling inside it. */
+.w6w-readytouse {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--w6w-sp-4);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* A half with nothing in it is not rendered at all (an empty "Workflows"
+   heading would claim you have workflows ready to use), so the grid collapses
+   to the one column that survived — and the divider below, which only makes
+   sense between two halves, goes with it. */
+.w6w-readytouse[data-cols="1"] {
+  grid-template-columns: 1fr;
+}
+
+/* The `|` in the intake's sketch. On the right half's leading edge rather than
+   as a third grid track, so it spans the full column height however tall the
+   two halves end up, and disappears with the half itself. */
+.w6w-readytouse[data-cols="2"] > .w6w-readytouse-stack {
+  border-left: 1px solid var(--w6w-border);
+  padding-left: var(--w6w-sp-4);
+}
+
+/* The right half stacks its two sections; they share the height evenly. */
+.w6w-readytouse-stack {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: var(--w6w-sp-3);
+  min-height: 0;
+}
+
+/* A single column: heading pinned, list scrolling under it. */
+.w6w-readytouse-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  min-height: 0;
+}
+
+/* One section only in the stack — a picker offering a single callable family,
+   or a workspace with Functions but no Workflows. It takes the whole right
+   half rather than leaving a gap under it. */
+.w6w-readytouse-stack > .w6w-readytouse-col:only-child {
+  grid-row: 1/-1;
+}
+
+.w6w-readytouse-heading {
+  margin: 0;
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-semibold);
+  color: var(--w6w-muted-text, var(--w6w-text));
+}
+
+/* A Function/Workflow row, distinct from an app row at a glance: an app is
+   somebody else's service, a Function/Workflow is something YOU built here.
+   Applied by `CallableRow`, which both the home tab and the Workflows/
+   Functions tabs render — so the tint and the glyph travel together and a
+   Function looks the same wherever it is offered. */
+.w6w-stepbuilder-item--callable {
+  background: var(--w6w-panel);
+  border-style: dashed;
+}
+
+/* Step config (app action / control node): a fixed header (connection + action)
+   that never scrolls, a scrolling parameters body, and a pinned footer — mirrors
+   the fixed-header/scroll-body split used by `.w6w-stepbuilder-apps`. */
+.w6w-stepconfig {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  gap: var(--w6w-sp-3);
+  /* Horizontal breathing room so header/footer align with the padded body. */
+  padding-inline: var(--w6w-sp-1);
+}
+
+/* Inline step rename (pencil) shown next to the modal title. */
+.w6w-step-rename {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-step-rename input {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-accent);
+  border-radius: 6px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-1-5);
+  color: var(--w6w-text);
+  /* lint-tokens-allow: relative em, not absolute rem like the scale's --w6w-fs- type tokens — mirrors the accepted _modal.scss:88 .w6w-modal-subtitle precedent */
+  font-size: 0.9em;
+  font-family: inherit;
+}
+
+.w6w-stepconfig-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+  flex-shrink: 0;
+}
+
+/* Connection + action share a row and wrap on narrow widths. */
+.w6w-stepconfig-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-3);
+  align-items: flex-start;
+}
+
+.w6w-stepconfig-conn,
+.w6w-stepconfig-action {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+
+.w6w-stepconfig-conn-empty {
+  flex: 1 1 100%;
+}
+
+/* Selected connection rendered as a static label (not a dropdown). */
+.w6w-conn-label {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2) var(--w6w-sp-1-5) var(--w6w-sp-2-5);
+  min-height: 36px;
+}
+
+.w6w-conn-label-name {
+  flex: 1;
+  min-width: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A pseudo-field wrapper (border/background, like every other field in this
+   form) CONTAINING two real buttons, spaced apart — `[App] <--> [Connection]`
+   (2026-08-30, fifth pass: "still missing border around SendGrid + prod...
+   look like before, where both were inside a pseudo field, only change was
+   to make the buttons look like buttons"). The outer border is back; each
+   button ALSO keeps its own border/background (one shade lighter,
+   `--w6w-panel` against the field's `--w6w-panel-2`) so it still reads as a
+   clickable button, not merely text, without the two touching directly —
+   the field's own padding is the gap between its edge and each button. */
+.w6w-app-conn-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  min-height: 36px;
+  padding: var(--w6w-sp-1);
+}
+
+.w6w-app-conn-btn {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2-5);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: var(--w6w-text);
+}
+
+.w6w-app-conn-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.w6w-app-conn-btn:hover:not(:disabled),
+.w6w-app-conn-btn[aria-expanded=true] {
+  border-color: var(--w6w-accent);
+}
+
+/* A flyout popover (App/Connection pickers) — portaled to the enclosing
+   `<dialog>` so it floats OVER the modal's own scrollable body instead of
+   being clipped/squeezed inside it (`Flyout` component doc has the why).
+   Plain positioned div, not a nested native dialog. No max-height/overflow
+   of its own: `AppPicker` already caps and scrolls itself
+   (`.w6w-apppicker-host`, `min(70vh, 520px)`), and the plain connection
+   list is short enough in practice to size to content — a SECOND scroll
+   container nested inside this one would double-scroll `AppPicker`. */
+.w6w-flyout {
+  position: fixed;
+  z-index: 40;
+  /* No `box-sizing: border-box` reset elsewhere in this package (checked) —
+     the inline `width` set by `Flyout` is meant to match the anchor row
+     EXACTLY (2026-08-30: "should extend to the end of the prod button and
+     div"), so padding/border must come out of that width, not add to it. */
+  box-sizing: border-box;
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  padding: var(--w6w-sp-2);
+}
+
+.w6w-btn-sm {
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  font-size: var(--w6w-fs-xs);
+  flex-shrink: 0;
+}
+
+/* Only the parameters form scrolls; x-padding keeps fields off the edge + scrollbar. */
+.w6w-stepconfig-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-inline: var(--w6w-sp-1);
+  padding-right: var(--w6w-sp-2);
+}
+
+/* Footer pinned to the modal bottom, outside the scroll area. */
+.w6w-stepconfig-footer {
+  flex-shrink: 0;
+  border-top: 1px solid var(--w6w-border);
+  padding-top: var(--w6w-sp-3);
+  margin-top: 0;
+}
+
+/* Test-required note — always rendered (empty when there is nothing to say),
+   so its reserved height keeps the footer's buttons at the same x/y whether
+   the note has text or not; one line, ellipsized rather than wrapped. */
+.w6w-stepconfig-testnote {
+  flex-shrink: 0;
+  min-height: 1.4em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The whole-config "code"/JSON view is a DIRECT child of the body — stretch it
+   to fill the modal height instead of leaving the dialog half-empty (it passes
+   height="100%"). Inline json/code PARAM fields live inside a `.w6w-field` and
+   size to their content, capped by the editor's own maxHeight (grow, then
+   scroll inside), so they are intentionally NOT stretched here — that was the
+   cause of the empty space + overlap under short group/json fields. */
+.w6w-stepconfig-body:has(> .w6w-code-editor, > .w6w-json-editor) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+}
+
+.w6w-stepconfig-body > .w6w-code-editor,
+.w6w-stepconfig-body > .w6w-json-editor {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* The `copyable` prop's button overlays `.w6w-json-editor`'s own top-right
+   corner — mirrors `_copyable.scss:86-100`'s CodeBlock geometry, but there is
+   no `<pre>` here for a `:has()` selector to reach, so it is scoped directly
+   to the class instead. Anchored to `.w6w-json-editor` itself (not the
+   CodeMirror scroller), so it stays pinned to the visible corner rather than
+   scrolling with the content. */
+.w6w-json-editor {
+  position: relative;
+}
+
+.w6w-json-editor > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  /* Opaque backdrop: this button sits ON the JSON's first line, and
+     `.w6w-icon-btn`'s transparent idle state would let the text read through
+     it (mirrors `_copyable.scss:93-99`'s rationale exactly). */
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+}
+
+.w6w-stepconfig-body .w6w-field > textarea {
+  resize: vertical;
+}
+
+/* Field label row with a trailing action (e.g. the JSON "open full view" btn). */
+.w6w-field-labelrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+}
+
+/* Full-view JSON modal body — fill the dialog so the editor is roomy. */
+.w6w-json-fullview {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+  height: 60vh;
+}
+
+.w6w-json-fullview > .w6w-json-editor {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* React Flow chrome, driven from the app's own tokens.
+
+   React Flow themes every surface through a three-link chain,
+   `var(--xy-X-props, var(--xy-X, var(--xy-X-default)))`. The library defines
+   only the `-default` link (light/dark, its own palette); the MIDDLE name is
+   never declared by the library and exists purely as a host hook. Setting those
+   middle names here re-points the zoom/fit control stack at `--w6w-*`, so it
+   matches whatever surface the host theme actually uses — and any ControlButton
+   added to that stack later inherits it with no styling of its own.
+
+   Custom properties, deliberately, rather than a `.react-flow__controls-button`
+   override: `@xyflow/react/dist/style.css` is imported as a side effect from
+   WorkflowFlowEditor.tsx, so it rides in the LAZY chunk and is injected *after*
+   this stylesheet. A bare class override (0,1,0) would tie with the library's
+   own rule and lose on source order. Custom properties inherit and are
+   order-independent, and scoping them on `.w6w-flow` keeps them off the rest of
+   the page.
+
+   Pairs with `colorMode={…}` on <ReactFlow>, which fixes the `-default` link for
+   the chrome this block doesn't name (minimap mask, handles, background dots). */
+.w6w-flow {
+  --xy-controls-button-background-color: var(--w6w-panel);
+  --xy-controls-button-background-color-hover: var(--w6w-panel-2);
+  --xy-controls-button-color: var(--w6w-text);
+  --xy-controls-button-color-hover: var(--w6w-accent);
+  --xy-controls-button-border-color: var(--w6w-border);
+}
+
+/* An error edge — `Edge.when: "error"` (core rfcs/workflow.md · "Amendment —
+   2026-07-29: failure-conditioned edges"). Dashed and drawn in the shared
+   --w6w-danger token (never a hard-coded hex) so the failure lane reads
+   differently from the success lane, and correctly, in BOTH themes.
+
+   ORDER MATTERS — this must stay ABOVE the selected/focused block below.
+   Both selectors are (0,4,0), i.e. exactly equal specificity, so source order
+   decides the winner. Selection has to be able to repaint the edge in the
+   accent colour; put this block after that one and a selected error edge stops
+   highlighting, which reads as a bug. */
+.w6w-flow .react-flow__edge.w6w-edge-error .react-flow__edge-path {
+  stroke: var(--w6w-danger);
+  stroke-dasharray: 6 4;
+}
+
+.w6w-flow .react-flow__edge.w6w-edge-error .react-flow__edge-text {
+  fill: var(--w6w-danger);
+}
+
+.w6w-flow .react-flow__edge.w6w-edge-error .react-flow__edge-textbg {
+  fill: var(--w6w-panel);
+}
+
+/* Run-state edge painting (T1.1.1) — whether a main-graph edge was TAKEN or
+   SKIPPED by the run currently showing on the canvas (see `run-visuals.ts`'s
+   `edgeRunState`). Both classes are ADDITIVE to `.w6w-edge-error` above (an
+   edge can be `w6w-edge-error w6w-edge-taken` at once), so ORDER decides how
+   they compose — same equal-(0,4,0)-specificity discipline `.w6w-edge-error`
+   already documents, kept below it in source:
+
+   - `.w6w-edge-taken`'s STROKE COLOUR is guarded to the non-error case via
+     `:where(:not(.w6w-edge-error))` — `:where()` contributes ZERO
+     specificity, so this stays at the SAME (0,4,0) weight as every other
+     block here instead of out-ranking `.selected` below. A taken ERROR edge
+     (the failure path a run actually followed) keeps the danger colour — the
+     fact of having failed does not stop being true — and only gets the
+     thicker stroke-width (the second, unconditional rule).
+   - `.w6w-edge-skipped` is intentionally UNGUARDED: a skipped error edge
+     (the step succeeded, so its error lane never fired) dims to muted same
+     as a skipped success edge does — the failure never happened, so danger
+     is the wrong colour regardless of which lane it is. */
+.w6w-flow .react-flow__edge.w6w-edge-taken:where(:not(.w6w-edge-error)) .react-flow__edge-path {
+  stroke: var(--w6w-success);
+}
+
+.w6w-flow .react-flow__edge.w6w-edge-taken .react-flow__edge-path {
+  stroke-width: 2.5;
+}
+
+.w6w-flow .react-flow__edge.w6w-edge-skipped .react-flow__edge-path {
+  stroke: var(--w6w-muted);
+  stroke-dasharray: 2 3;
+  opacity: 0.55;
+}
+
+/* A step's own Notes, shown under its canvas card — human override,
+   2026-08-30, so a description written once (settings → gear icon) is
+   visible without opening the step. One line, clipped with an ellipsis (the
+   full text is still on the node's `title=` for a hover); `max-width`
+   matches the card's own `minWidth` so a short note never forces the row
+   wider than the card sitting above it. Font size matches the sibling
+   meta-line's own inline fontSize:10 (not scanned by this ratchet) directly
+   above it — the smallest declared token, --w6w-fs-xs, is 12px and would
+   visibly mismatch the two lines. */
+.w6w-flow .w6w-node-notes {
+  margin-top: var(--w6w-sp-0-5);
+  padding-left: var(--w6w-sp-0-5);
+  /* lint-tokens-allow: matches the sibling meta-line's inline fontSize:10 above it */
+  font-size: 10px;
+  font-style: italic;
+  opacity: 0.75;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The ordinary (success) ports — bumped from the library's own 6px default
+   (2026-08-30: "ports must have consistent size") to match the error port
+   below exactly. `:not(.w6w-handle-multi)`: the multi-input handle is its
+   own taller pill shape (`PortHandle`'s inline style), not a dot — this
+   rule must not touch it. */
+.w6w-flow .react-flow__handle:not(.w6w-handle-multi) {
+  width: 8px;
+  height: 8px;
+}
+
+/* The error exit port — a step/control node's second SOURCE handle (T1.1.1),
+   rendered below the ordinary exit via the shared PortHandle component
+   (`id={ERROR_SOURCE_HANDLE}`, `variant="error"`). Danger-tinted, same
+   --w6w-danger token as .w6w-edge-error above (never a hard-coded hex).
+   DELIBERATELY 1px SMALLER, in actual box size, than the ordinary ports
+   above (2026-08-30, second pass on "consistent size"): setting both to the
+   literal same 8px×8px box (the first pass) still read as bigger — measured
+   directly, computed styles for both were byte-identical (same width,
+   height, border-width, box-sizing, no box-shadow/outline difference) — a
+   saturated warm fill on a light canvas background perceptually "expands"
+   past a same-sized dark/cool one (the classic irradiation illusion), so
+   matching PIXELS does not produce matching APPEARANCE. Compensating with a
+   smaller literal box is what actually reads as equal. */
+.w6w-flow .react-flow__handle.w6w-handle-error {
+  width: 7px;
+  height: 7px;
+  background: var(--w6w-danger);
+  border-color: var(--w6w-danger);
+  opacity: 0.85;
+}
+
+.w6w-flow .react-flow__handle.w6w-handle-error:hover {
+  opacity: 1;
+}
+
+/* Workflow edges: highlight the selected/focused edge in the accent colour and
+   thicken it, so it's obvious which one Backspace/Delete will remove. The wide,
+   invisible interaction path keeps the click target generous. */
+.w6w-flow .react-flow__edge.selected .react-flow__edge-path,
+.w6w-flow .react-flow__edge:focus .react-flow__edge-path,
+.w6w-flow .react-flow__edge:focus-visible .react-flow__edge-path {
+  stroke: var(--w6w-accent);
+  stroke-width: 2.5;
+}
+
+/* The edge-lane control — `Run on: Success / Error`, revealed in a React Flow
+   <Panel position="top-right"> when exactly one edge is selected. Unlike the
+   `+ Step` button (a self-contained .w6w-btn), this row mixes a label, two ghost
+   buttons and an inline refusal, so it needs its own surface to stay legible over
+   the canvas background. Same shape as .w6w-node-toolbar below; tokens only. */
+.w6w-edge-lane {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+  max-width: 280px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+}
+
+/* An inline refusal (re-laning would mint an id another edge already holds).
+   Rendered here rather than through a browser dialog — see .ai/conventions.md ·
+   "No browser dialogs" — and on its own row so the buttons don't reflow. */
+.w6w-edge-lane-err {
+  flex: 1 1 100%;
+  color: var(--w6w-danger);
+}
+
+/* Per-node control toolbar (React Flow NodeToolbar) */
+.w6w-node-toolbar {
+  display: flex;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+}
+
+.w6w-node-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 5px;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+
+.w6w-node-toolbar-btn:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-node-toolbar-btn.danger:hover {
+  background: var(--w6w-danger);
+  color: white;
+}
+
+.w6w-params-optional > summary {
+  cursor: pointer;
+}
+
+/* `section` param — a layout-only container. `section: "collapsible"` renders as
+   a titled, bordered disclosure; `section: "group"` reuses `.w6w-field-row` /
+   `.w6w-stack` for its layout (no rules of its own needed). */
+/* Fan-out badge under a card: the glyph (⇉ parallel / → sequence), not colour, carries the mode. */
+.w6w-flow .w6w-fanout-badge {
+  display: inline-block;
+  margin-top: var(--w6w-sp-0-5);
+  padding: 0 var(--w6w-sp-1);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius-sm, 3px);
+  font-size: var(--w6w-fs-xs);
+  color: var(--w6w-muted, inherit);
+}
+
+.w6w-section {
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+}
+
+.w6w-section > summary {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+}
+
+.w6w-section-title {
+  color: var(--w6w-text);
+  font-weight: var(--w6w-fw-semibold);
+}
+
+.w6w-section-subtitle {
+  color: var(--w6w-muted);
+  font-size: 0.8em;
+}
+
+.w6w-section-body {
+  margin-top: var(--w6w-sp-2);
+}
+
+/* Inline "Test run" block in the step builder (sits above the footer). */
+.w6w-steptest {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+
+.w6w-steptest-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+}
+
+/* A labeled test-run output block (Result vs Console). */
+.w6w-testout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-testout-label {
+  font-size: 0.72em;
+  font-weight: var(--w6w-fw-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--w6w-muted);
+}
+
+/* Console output reads as a terminal — monospace + muted, distinct from Result. */
+.w6w-testout-console {
+  font-family: var(--w6w-font-mono);
+  color: var(--w6w-muted);
+  border-style: dashed;
+}
+
+/* Result / error box */
+.w6w-result {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  font-family: var(--w6w-font-mono);
+  font-size: 0.85em;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--w6w-text);
+}
+
+.w6w-result.w6w-error {
+  border-color: var(--w6w-danger);
+  color: var(--w6w-danger);
+}
+
+/* Host-embedded ActionTestForm (studio's ConnectionTesterModal wraps it in its
+   OWN full modal). The widget then fills that modal as a full-height flex column:
+   the params + saved-tests region scrolls, and the action bar is a bottom-pinned,
+   non-scrolling footer. These classes are only applied in `embedded` mode, so the
+   inline / own-pop-out layout is untouched. */
+.w6w-tester-embedded-root {
+  flex: 1;
+  min-height: 0;
+}
+
+.w6w-tester-embedded {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.w6w-tester-embedded-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.w6w-tester-embedded-cols {
+  display: flex;
+  gap: var(--w6w-sp-4);
+  align-items: flex-start;
+}
+
+.w6w-tester-embedded-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.w6w-tester-embedded-rail {
+  width: 260px;
+  flex-shrink: 0;
+}
+
+/* The action bar as a pinned footer: kept out of the scroll region and separated
+   with a top border so Run / Save / Delete stay visible however long the params. */
+.w6w-tester-actions-footer {
+  margin-top: auto;
+  border-top: 1px solid var(--w6w-border);
+  padding-top: var(--w6w-sp-3);
+}
+
+/* ActionTestForm's OWN pop-out (`Modal size="full"`, the "Edit params" ⤢
+   toggle — not the host-embedded case above). T1.4.1 round 1 made `-full`'s
+   `overflow: hidden` live for the first time; the dialog itself no longer
+   scrolls, so at a realistic param count (15-23 is typical for a first-party
+   action, e.g. followupboss/search-people, youtube/search) content below the
+   fold became unreachable with zero scrollbar. This mirrors the
+   `.w6w-tester-embedded-scroll` mechanism above — flex:1/min-height:0 to fill
+   the dialog's remaining flex-column height, `overflow: auto` to own the
+   scrollbar — so the params + result (+ saved-tests rail) region scrolls
+   internally while the Run/Save/Delete action bar stays a pinned,
+   non-scrolling footer via the SAME `.w6w-tester-actions-footer` class. */
+.w6w-tester-popout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.w6w-tester-popout-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Uptime strip — one cell per day, "how has this service behaved lately" at a
+   glance. Colour comes from the same `--w6w-health-*` tokens as the health pill,
+   through the same single `--w6w-health-color` indirection (set once on the cell,
+   remapped by the per-state class below), so overriding a token restyles the pill
+   and the strip together.
+
+   Colour is never the only signal: the FILL HEIGHT encodes severity, so the row
+   stays readable in greyscale and for a colour-blind viewer — `ok` a short
+   baseline bar, `degraded` taller, `down` the full cell, and `unknown` a hatched
+   outline with no solid fill (nothing was measured: not a good day, not a bad
+   one). Each cell also carries a `title` with its day and state. */
+.w6w-uptime-strip {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: var(--w6w-sp-0-5);
+  height: 22px;
+  min-width: 0;
+  align-items: stretch;
+}
+
+.w6w-uptime-cell {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-uptime-fill: 100%;
+  position: relative;
+  min-width: 2px;
+  border-radius: 2px;
+  /* The unfilled remainder of the day, so the strip reads as a continuous row
+     rather than as floating bars. */
+  background: color-mix(in srgb, var(--w6w-border) 55%, transparent);
+  overflow: hidden;
+}
+
+.w6w-uptime-cell::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--w6w-uptime-fill);
+  border-radius: inherit;
+  background: var(--w6w-health-color);
+}
+
+.w6w-uptime-cell-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+  --w6w-uptime-fill: 35%;
+}
+
+.w6w-uptime-cell-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+  --w6w-uptime-fill: 65%;
+}
+
+.w6w-uptime-cell-down {
+  --w6w-health-color: var(--w6w-health-down);
+  --w6w-uptime-fill: 100%;
+}
+
+.w6w-uptime-cell-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-uptime-fill: 100%;
+}
+
+/* No solid fill for `unknown` — a hatch, so an unmeasured day can never be
+   mistaken for a healthy or a failing one, with or without colour. */
+.w6w-uptime-cell-unknown::after {
+  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--w6w-health-color) 45%, transparent) 0 2px, transparent 2px 5px);
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 35%, var(--w6w-border));
+}
+
+/* --- CodeBlock ------------------------------------------------------------ */
+/* Read-only syntax-highlighted display (`<CodeBlock>`). The colours come from
+   the `--w6w-code-*` tokens via inline styles Prism sets, so this rule only
+   owns box, rhythm and overflow. */
+.w6w-history-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+}
+
+/* One positioned container shared by both lanes AND the axis, so every
+   `left`/`width` percentage in any of the three is on the same coordinate
+   system — this is what keeps the two series from drifting apart. */
+.w6w-history-plot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-history-lane {
+  position: relative;
+  height: 22px;
+  min-width: 0;
+}
+
+/* --- execution lane -------------------------------------------------- */
+.w6w-history-cell {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-history-fill: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  min-width: 1px;
+  border-radius: 2px;
+  overflow: hidden;
+  /* The unfilled remainder of the cell, so the lane reads as a continuous
+     row rather than as floating marks — same treatment as `UptimeStrip`. */
+  background: color-mix(in srgb, var(--w6w-border) 55%, transparent);
+}
+
+.w6w-history-cell::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--w6w-history-fill);
+  border-radius: inherit;
+  background: var(--w6w-health-color);
+}
+
+.w6w-history-cell-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+  --w6w-history-fill: 35%;
+}
+
+.w6w-history-cell-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+  --w6w-history-fill: 65%;
+}
+
+.w6w-history-cell-down {
+  --w6w-health-color: var(--w6w-health-down);
+  --w6w-history-fill: 100%;
+}
+
+.w6w-history-cell-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-history-fill: 100%;
+}
+
+/* No solid fill for `unknown` — a hatch, same reasoning as `UptimeStrip`'s:
+   an unmeasured day must never be mistaken for a healthy or a failing one. */
+.w6w-history-cell-unknown::after {
+  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--w6w-health-color) 45%, transparent) 0 2px, transparent 2px 5px);
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 35%, var(--w6w-border));
+}
+
+/* --- vendor lane ------------------------------------------------------- */
+.w6w-history-bar {
+  --w6w-health-color: var(--w6w-health-unknown);
+  position: absolute;
+  /* Thickness is the geometry half of severity — thin for `ok`, thicker for
+     `degraded`, full lane height for `down`/`unknown` — using the spacing
+     scale rather than a one-off literal so it never drifts from it. */
+  top: var(--w6w-sp-1);
+  bottom: var(--w6w-sp-1);
+  min-width: 2px;
+  border-radius: 2px;
+  background: var(--w6w-health-color);
+}
+
+.w6w-history-bar-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+}
+
+.w6w-history-bar-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+  top: var(--w6w-sp-0-5);
+  bottom: var(--w6w-sp-0-5);
+}
+
+.w6w-history-bar-down {
+  --w6w-health-color: var(--w6w-health-down);
+  top: 0;
+  bottom: 0;
+}
+
+.w6w-history-bar-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+  top: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--w6w-health-color) 45%, transparent) 0 2px, transparent 2px 5px);
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 35%, var(--w6w-border));
+}
+
+/* A clipped edge is squared off rather than rounded, so a bar that runs off
+   the window reads as continuing beyond it rather than as ending there. */
+.w6w-history-bar-clip-start {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.w6w-history-bar-clip-end {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.w6w-history-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- axis --------------------------------------------------------------- */
+.w6w-history-axis {
+  position: relative;
+  height: 16px;
+}
+
+.w6w-history-tick {
+  position: absolute;
+  top: 0;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-normal);
+  white-space: nowrap;
+}
+
+.w6w-history-tick-start {
+  transform: translateX(0);
+}
+
+.w6w-history-tick-end {
+  transform: translateX(-100%);
+}
+
+.w6w-code-block {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  margin: 0;
+  overflow-x: auto;
+  padding: var(--w6w-sp-3) 14px;
+  tab-size: 2;
+}
+
+.w6w-code-block code {
+  background: none;
+  display: block;
+  font-family: var(--w6w-font-mono);
+  font-size: 13px;
+  line-height: 1.55;
+  padding: 0;
+}
+
+/* Each line is its own row so a line number can sit beside the text rather
+   than inside it — a number inside the flow would be caught by a copy. */
+.w6w-code-line {
+  display: flex;
+  gap: var(--w6w-sp-3);
+  white-space: pre;
+}
+
+.w6w-code-line-text {
+  white-space: inherit;
+}
+
+/* `user-select: none` keeps the gutter out of a mouse selection; `aria-hidden`
+   on the element keeps it out of the accessibility tree. Both are needed —
+   neither one alone stops a copy from picking up the digits. */
+.w6w-code-line-no {
+  color: var(--w6w-muted);
+  flex: 0 0 auto;
+  min-width: 2ch;
+  opacity: 0.65;
+  text-align: right;
+  user-select: none;
+}
+
+/* Wrapped mode indents continuation rows to the text column so a wrapped line
+   still reads as one line. */
+.w6w-code-block--wrap .w6w-code-line,
+.w6w-code-block--wrap .w6w-code-line-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.w6w-code-block--wrap {
+  overflow-x: hidden;
+}
+
+/* Resolved params (Test tab, read-only): inline badge weight — like
+   JsonParamField's "Invalid JSON" hint, not a full `.w6w-result.w6w-error`
+   block per param, since either can appear once per configured param. */
+.w6w-param-unresolved {
+  color: var(--w6w-danger);
+  font-size: 0.85em;
+  font-style: italic;
+}
+
+.w6w-param-unevaluated {
+  color: var(--w6w-muted);
+  font-size: 0.85em;
+  font-style: italic;
+}
+
+/* One resolved param: a table row, not a stacked form field — this list is
+   read-only display, never an editable `.w6w-field`, so it earns its own
+   compact key-left/value-right layout instead of a label-above-control block
+   (human report, 2026-09-01: key and value were indistinguishable and every
+   row burned a full stacked block of vertical space). ONE grid across the
+   whole list (`.w6w-resolved-table`), not one grid per row, so every row's
+   key column lines up with the one above and below it. */
+.w6w-resolved-table {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+}
+
+/* Each row is `display: contents` — it renders no box of its own, so its two
+   children (label, value) become direct items of the parent grid above,
+   sharing its column tracks instead of sizing their own. */
+.w6w-resolved-row {
+  display: contents;
+  font-size: calc(var(--w6w-fs-sm) * 0.9);
+}
+
+/* No `column-gap` on the grid: a gap leaves a hole no cell's own border
+   crosses, breaking the row divider into two segments. The same visual
+   space between key and value comes from padding instead, which is part of
+   each cell's own box — the border-bottom stays one unbroken line. */
+.w6w-resolved-row > * {
+  padding: var(--w6w-sp-1-5) 0;
+  border-bottom: 1px solid var(--w6w-border);
+}
+
+.w6w-resolved-row:last-child > * {
+  border-bottom: none;
+}
+
+.w6w-resolved-label {
+  padding-right: var(--w6w-sp-3);
+  color: var(--w6w-muted);
+}
+
+/* One resolved row's value. `anywhere` (not `break-word`) because these values
+   are markup and URLs as often as prose: a single unbroken 40kB attribute
+   string would otherwise force the whole modal to scroll sideways. Full-
+   strength text color (not `--w6w-muted`) so it reads as the actual content,
+   distinct from the label beside it. */
+.w6w-resolved-value {
+  color: var(--w6w-text);
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+/* The expanded form of a clipped value (`resolved-clip.ts`). A block with its
+   own scroll, so "Show all" can never restore the unbounded inline paste that
+   buried the other params and the run's result. */
+.w6w-resolved-text-full {
+  display: block;
+  margin: var(--w6w-sp-1) 0;
+  max-height: 14em;
+  overflow: auto;
+  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  font-family: var(--w6w-font-mono);
+  font-size: 0.85em; /* lint-tokens-allow: matches the sibling code-typography rules above in this same file */
+  line-height: var(--w6w-lh-normal);
+  white-space: pre-wrap;
+}
+
+/* Link-weight toggle — this sits inside a value, so it must not read as a
+   second action competing with the modal's own buttons. */
+.w6w-resolved-more {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-left: var(--w6w-sp-2);
+  color: var(--w6w-accent);
+  font-size: 0.85em; /* lint-tokens-allow: matches the sibling code-typography rules above in this same file */
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.w6w-resolved-more:hover {
+  text-decoration: underline;
+}
+
+.w6w-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5);
+  color: var(--w6w-muted);
+  cursor: pointer;
+}
+
+.w6w-icon-button:hover:not(:disabled) {
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+}
+
+.w6w-icon-button-danger:hover:not(:disabled) {
+  color: var(--w6w-danger);
+}
+
+.w6w-icon-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.w6w-info-tip {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-info-tip-body {
+  flex-basis: 100%;
+}
+
+/* The shared `Icon` (`src/components/Icon.tsx`).
+ *
+ * Only geometry invariants live here. The PAINT is per-entry in
+ * `src/components/icons.tsx` (the set mixes filled Material-style glyphs with
+ * stroked Feather ones, and the language marks paint their own elements), and
+ * the SIZE comes from the `size` prop — so there is nothing about colour or
+ * scale for this class to say. */
+.w6w-icon {
+  /* Never squashed by a flex parent: a rail glyph squeezed to 9px is unreadable,
+     and the sources draw at 14–20px inside rows that can be tight. */
+  flex-shrink: 0;
+  /* A glyph dropped into a line of text sits on the baseline by default, which
+     reads as a foot below the words. */
+  vertical-align: middle;
+}
+
+.w6w-repo-sync {
+  position: relative;
+  display: inline-flex;
+}
+
+.w6w-repo-sync-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-3);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+
+.w6w-repo-sync-trigger:hover {
+  border-color: var(--w6w-accent);
+}
+
+.w6w-repo-sync-icon {
+  position: relative;
+  display: inline-flex;
+}
+
+.w6w-repo-sync-spin {
+  position: absolute;
+  bottom: calc(-1 * var(--w6w-sp-0-5));
+  right: calc(-1 * var(--w6w-sp-0-5));
+  width: 10px;
+  height: 10px;
+  background: var(--w6w-panel-2);
+  border-radius: 50%;
+  animation: w6w-spin 0.8s linear infinite;
+}
+
+@keyframes w6w-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .w6w-repo-sync-spin {
+    animation: none;
+  }
+}
+.w6w-repo-sync-branch {
+  font-weight: var(--w6w-fw-medium);
+}
+
+.w6w-repo-sync-sha {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  font-family: var(--w6w-font-mono);
+}
+
+.w6w-repo-sync-menu {
+  position: absolute;
+  top: calc(100% + var(--w6w-sp-1-5));
+  right: 0;
+  min-width: 220px;
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  padding: var(--w6w-sp-1-5);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+}
+
+.w6w-repo-sync-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+
+.w6w-repo-sync-detail > :first-child {
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-medium);
+}
+
+.w6w-repo-sync-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+
+.w6w-repo-sync-item:hover:not(:disabled) {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-repo-sync-item:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+/* --- StepStatusPill ---------------------------------------------------- */
+/* Mirrors `.w6w-health-pill` shape for shape (see `_health.scss`), with its
+   own five-state colour set behind `--w6w-step-color` — never a new global
+   `--w6w-*` token, only the base palette (`--w6w-muted`/`--w6w-accent`/
+   `--w6w-success`/`--w6w-danger`) this file is scoped to. */
+.w6w-step-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2) var(--w6w-sp-0-5) var(--w6w-sp-1-5);
+  border: 1px solid color-mix(in srgb, var(--w6w-step-color) 40%, var(--w6w-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--w6w-step-color) 12%, transparent);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-normal);
+  white-space: nowrap;
+  --w6w-step-color: var(--w6w-muted);
+}
+
+.w6w-step-pill-pending {
+  --w6w-step-color: var(--w6w-muted);
+}
+
+.w6w-step-pill-running {
+  --w6w-step-color: var(--w6w-accent);
+}
+
+.w6w-step-pill-succeeded {
+  --w6w-step-color: var(--w6w-success);
+}
+
+.w6w-step-pill-failed {
+  --w6w-step-color: var(--w6w-danger);
+}
+
+/* Same base colour as `pending` — a dashed border, not a second colour, is
+   what keeps this distinct: colour alone is never the only signal, and this
+   pill already carries a different text label too. */
+.w6w-step-pill-skipped {
+  --w6w-step-color: var(--w6w-muted);
+  border-style: dashed;
+}
+
+/* The two RUN states (`ExecutionStatus`), both deliberately in the same muted
+   family as `pending`/`skipped` above: neither is a verdict on the work —
+   `queued` hasn't started and `canceled` stopped before reaching one — so
+   neither earns `--w6w-success`/`--w6w-danger`/`--w6w-accent`, and this file
+   keeps its stated scope (the base palette only, never a new global token).
+   `canceled` takes `skipped`'s dashed border for the same reason that one
+   does; the two never co-occur in one list (one is a step state, the other a
+   run state), and the label carries the meaning regardless. */
+.w6w-step-pill-queued {
+  --w6w-step-color: var(--w6w-muted);
+}
+
+.w6w-step-pill-canceled {
+  --w6w-step-color: var(--w6w-muted);
+  border-style: dashed;
+}
+
+.w6w-step-pill-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--w6w-step-color);
+}
+
+.w6w-step-pill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- ExecutionLogPanel --------------------------------------------------- */
+/* A vertical ordered list, not `_history-timeline.scss`'s idiom: that
+   partial lays out a fixed WINDOW of time-proportional lanes (`left`/`width`
+   percentages against a shared axis) for a health-history strip, which has
+   no notion of "one row per step" or of steps that haven't happened yet.
+   This panel is a plain in-order list of a priori unbounded rows, closer in
+   shape to `.w6w-resolved-table`'s row list — reused here as `.w6w-stack`
+   (`_layout.scss`) for the two-block (input/output) stack inside a row,
+   rather than inventing a second vertical-list treatment.
+
+   Each row's own box (border/background/border-radius/padding) comes from
+   `.w6w-section` (`_sections.scss`), reused rather than duplicated here —
+   `ApiCallsPanel.tsx`'s collapsed-by-default `<details>` idiom, applied to
+   this panel's rows (REVIEW.md R-1). This file only adds the row-specific
+   layout `.w6w-section` doesn't know about: the flex line for the summary's
+   pill/label/timing. */
+/* The optional header row (T1.1.1 A4) — rendered only when the host supplies
+   `onDismiss`, and in BOTH branches below, since the empty state is exactly
+   where a dismiss control is needed most. Right-aligned, mirroring where
+   studio's own `.notice-close` dismiss sits on a panel header; that class is
+   studio-scoped CSS and does not exist in this package, so only the placement
+   transfers, not the rule. */
+.w6w-execution-log-head {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+  margin-bottom: var(--w6w-sp-2);
+}
+
+.w6w-execution-log {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+/* `width: 100%` plus padding and a border overflows the parent under the
+   default content-box sizing; this package has no global box-sizing reset, so
+   it opts in per element (as `_chips.scss` and `_step-config.scss` do). */
+.w6w-execution-log-empty {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--w6w-sp-4);
+  border: 1px dashed var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  text-align: center;
+}
+
+.w6w-execution-log-row {
+  min-width: 0;
+}
+
+.w6w-execution-log-row-header {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  flex-wrap: wrap;
+}
+
+.w6w-execution-log-row-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-weight: var(--w6w-fw-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Shrinkable, so a narrow row (the 360px docked panel) wraps the
+   "<ts> → <ts> (elapsed)" text inside the row's box. With `flex-shrink: 0` it
+   kept its max-content width, wrapped onto its own flex line, and ran past the
+   row's border. */
+.w6w-execution-log-timing {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+
+.w6w-execution-log-json {
+  min-width: 0;
+}
+
+/* Error blocks (step `error`, run `runError`/`stepErrors`). The box itself is
+   `.w6w-result.w6w-error` (`_tester.scss`) — TriggerFillForm's StepError
+   visual, reused, not restyled here; these rules only place it. */
+.w6w-execution-log-errors {
+  width: 100%;
+  margin-bottom: var(--w6w-sp-2);
+}
+
+/* A step's error sits after its `.w6w-section` box, inside the same `<li>` —
+   closer to its own row than the list's row gap, so it reads as that row's. */
+.w6w-execution-log-row > .w6w-error {
+  margin-top: var(--w6w-sp-1-5);
+}
+
+/* TriggerFillForm's inline `opacity: 0.75; marginBottom: 4` code line, as tokens. */
+.w6w-execution-log-error-code {
+  opacity: 0.75;
+  margin-bottom: var(--w6w-sp-1);
+}
+
+.w6w-execution-log-error-label {
+  display: block;
+  margin-bottom: var(--w6w-sp-1);
+}
+
+/* --- ExecutionList ------------------------------------------------------- */
+/* Rows of past executions: a click-to-select list plus a prev/next pager.
+   Closer in shape to `.w6w-execution-log` (`_execution-log.scss`) than to
+   `.w6w-history-*`: that family lays out a time-proportional strip against a
+   shared axis, while this is a plain in-order list of one row per run. The row
+   itself is `ListItem` (`.w6w-list-item`, `_lists.scss`) — reused whole, box,
+   hover, focus ring, `active` highlight and all — so this partial only owns
+   the LIST around the rows: the `ul` reset and the pager strip.
+
+   Spacing/type come from the scale tokens only (the `lint:tokens` ratchet has
+   no baseline entry for this file, so anything literal here would be a new
+   violation); colour stays on `_execution-log.scss`'s pill and the shared
+   `.w6w-btn` classes. */
+.w6w-execution-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  width: 100%;
+  min-width: 0;
+}
+
+/* A `<ul>`, reset to a bare vertical stack — the marker/indent are the only
+   things `_layout.scss`'s `.w6w-stack` doesn't already strip, and rows are
+   `<li>` so the list is announced as a list, not a run of cards. */
+.w6w-execution-list-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.w6w-execution-list-rows > li {
+  min-width: 0;
+}
+
+/* Both non-list branches (the loading and the empty `<p>`) hang straight off
+   the root, so one direct-child rule covers them and neither needs a class the
+   pinned markup doesn't have. Same dashed box `.w6w-execution-log-empty`
+   uses — one treatment for "nothing here yet" across the run-log family. */
+.w6w-execution-list > p {
+  width: 100%;
+  margin: 0;
+  padding: var(--w6w-sp-4);
+  border: 1px dashed var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  text-align: center;
+}
+
+.w6w-execution-list-pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--w6w-sp-2);
+}
+
+/* --- ExecutionFilters --------------------------------------------------- */
+/* One dense row of heterogeneous controls. The control chrome cannot come from
+   `_fields.scss`: those rules are anchored on `.w6w-field` (a labelled,
+   stacked field with a visible `<span>`), and these controls are labelled
+   accessibly (`aria-label`) instead — a visible label per control would triple
+   the bar's height. Tokens only, for the same reason as the rules above. */
+/* The row is width-driven: a wrapped line is formed from each control's
+   *hypothetical* size, so six controls plus their gaps sit on one line for as
+   long as they fit, and the row breaks by itself once they don't. That is the
+   behaviour this bar needs — it renders full width in the studio History page
+   and ~500px wide inside the detail modal — so the break follows THIS box
+   rather than the viewport, and nothing here may key off a media query. */
+.w6w-execution-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+  min-width: 0;
+}
+
+/* These are bare form elements, so a host's own global `input`/`select` chrome
+   lands on them too — and in the studio it is decisive: `studio/src/styles.css`
+   gives `input[type="search"]`/`input[type="date"]` a `width: 100%` and a
+   `margin-top`. A `width: 100%` on a flex item whose `flex-basis` is `auto` IS
+   that item's basis, so each date picker asked for the whole bar and the row
+   broke into one control per line, while the margin lifted the two inputs off
+   the selects' line. Both are pinned back here; at (0,2,1) this selector beats
+   a host's bare `input[type=…]` (0,1,1) and `input` (0,0,1) rules without
+   needing `!important`, and a host that leaves the controls alone is unaffected
+   because `width: auto`/`margin: 0` are what these controls want anyway. */
+.w6w-execution-filters input[type=search],
+.w6w-execution-filters input[type=date],
+.w6w-execution-filters select {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  margin: 0;
+  width: auto;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+}
+
+.w6w-execution-filters input[type=search]:focus-visible,
+.w6w-execution-filters input[type=date]:focus-visible,
+.w6w-execution-filters select:focus-visible {
+  outline: 2px solid var(--w6w-accent);
+  outline-offset: 1px;
+}
+
+/* The dropdowns and the two date pickers show one short, fixed label, so they
+   keep their intrinsic width and neither grow nor shrink: the row's spare width
+   is the search box's alone. */
+.w6w-execution-filters select,
+.w6w-execution-filters input[type=date] {
+  flex: 0 0 auto;
+}
+
+/* The search box is the only control that flexes — it takes the spare width and
+   gives it back down to a 160px floor, and that floor is what sets the row's
+   breakpoint: 160px of search + the five intrinsic controls + five 8px gaps
+   ≈ 757px, so the bar is one row from the 760px the layout promises, and wraps
+   below it. */
+.w6w-execution-filters-search {
+  flex: 1 1 160px;
+  min-width: 160px;
+}
+
+/* Clear is a fixed-size control and stays at the end of the row. */
+.w6w-execution-filters-clear {
+  flex: 0 0 auto;
+}
+
+/* --- ExecutionStats ----------------------------------------------------- */
+/* The `DashboardPage.tsx` `StatCard` shape (big value, muted label) promoted
+   out of the page and onto tokens — that page had the value's type ramp and
+   weight inline, which is exactly what a shared component must not leave to
+   its host. */
+.w6w-execution-stats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+  min-width: 0;
+}
+
+.w6w-execution-stats-label {
+  margin: 0;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+}
+
+.w6w-execution-stats-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-execution-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  flex: 1 1 140px;
+  min-width: 0;
+  padding: var(--w6w-sp-3);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel-2);
+}
+
+.w6w-execution-stat-value {
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-3xl);
+  font-weight: var(--w6w-fw-semibold);
+  line-height: var(--w6w-lh-tight);
+}
+
+.w6w-execution-stat-label {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+}
+
+/* --- ExecutionDetail ---------------------------------------------------- */
+.w6w-execution-detail {
+  width: 100%;
+  min-width: 0;
+}
+
+/* Title block left, controls right; the actions keep their width, the name
+   wraps or ellipses into whatever is left. */
+.w6w-execution-detail-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-execution-detail-title {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+
+.w6w-execution-detail-name {
+  margin: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-lg);
+  font-weight: var(--w6w-fw-semibold);
+  overflow-wrap: anywhere;
+}
+
+.w6w-execution-detail-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-execution-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+
+.w6w-execution-detail-id-line {
+  margin: 0;
+}
+
+.w6w-execution-detail-id {
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-sm);
+  color: var(--w6w-muted);
+  overflow-wrap: anywhere;
+}
+
+/* A `<dl>` whose pairs are `<div>`s, so the three facts row up side by side
+   instead of stacking as three label/value paragraphs. */
+.w6w-execution-detail-timing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-5);
+  margin: 0;
+}
+
+.w6w-execution-detail-timing-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+
+.w6w-execution-detail-timing-item dt {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+
+.w6w-execution-detail-timing-item dd {
+  margin: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+}
+
+/* The view-level failure notice: the same danger token `.w6w-btn-danger` and
+   the health pills use, tinted rather than filled so it reads as a notice and
+   not as a button. */
+.w6w-execution-detail-error-message {
+  margin: 0;
+  padding: var(--w6w-sp-2) var(--w6w-sp-3);
+  border: 1px solid var(--w6w-danger);
+  border-radius: var(--w6w-radius);
+  background: color-mix(in srgb, var(--w6w-danger) 10%, transparent);
+  color: var(--w6w-danger);
+  font-size: var(--w6w-fs-sm);
+}
+
+/*
+ * Server resources — the four presentational variants from
+ * `src/components/ServerResources.tsx` (card, small card, rail, badge).
+ *
+ * Spacing and type come from the `--w6w-sp-*` / `--w6w-fs-*` ramps only, so a
+ * host that re-tunes the scale re-tunes these too; box geometry (heights,
+ * track widths, radii) is deliberately literal, as everywhere else in this
+ * package. The only colour that is not a themed token reference is the
+ * sparkline stroke, which is `--w6w-accent` in both modes.
+ *
+ * The rail variant is the size-sensitive one: it lands in a ~200 px sidebar
+ * column, so every part of it is `min-width: 0`-safe and the sparkline is
+ * scaled by `preserveAspectRatio="none"` rather than given an intrinsic width.
+ */
+.w6w-server-resources {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  min-width: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  line-height: var(--w6w-lh-normal);
+}
+
+.w6w-server-resources__title {
+  margin: 0;
+  font-size: var(--w6w-fs-base);
+  font-weight: var(--w6w-fw-semibold);
+  line-height: var(--w6w-lh-tight);
+}
+
+.w6w-server-resources__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.w6w-server-resources__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--w6w-sp-1) var(--w6w-sp-2);
+}
+
+.w6w-server-resources__label {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.w6w-server-resources__value {
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The line itself. `stroke` is repeated as a property (not only as the
+   polyline's presentation attribute) so a host stylesheet can re-colour it
+   without reaching into the SVG. */
+.w6w-server-resources__spark {
+  grid-column: 1/-1;
+  display: block;
+  width: 100%;
+  height: 28px;
+  stroke: var(--w6w-accent);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  overflow: visible;
+}
+
+.w6w-server-resources__meta {
+  margin: 0;
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-xs);
+}
+
+/* --- card ---------------------------------------------------------------- */
+.w6w-server-resources--card {
+  gap: var(--w6w-sp-3);
+  padding: var(--w6w-sp-4);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+}
+
+/* --- small card ---------------------------------------------------------- */
+.w6w-server-resources--small {
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-3);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+}
+
+.w6w-server-resources--small .w6w-server-resources__title {
+  font-size: var(--w6w-fs-sm);
+}
+
+/* --- rail ---------------------------------------------------------------- */
+.w6w-server-resources--rail {
+  gap: var(--w6w-sp-1);
+  padding: var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+}
+
+.w6w-server-resources__rail-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: baseline;
+  gap: 0 var(--w6w-sp-2);
+}
+
+.w6w-server-resources__rail-row .w6w-server-resources__value {
+  text-align: right;
+}
+
+.w6w-server-resources__rail-row .w6w-server-resources__spark {
+  height: 20px;
+}
+
+.w6w-server-resources__expand {
+  width: 100%;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel-2);
+  color: var(--w6w-muted);
+  font-family: inherit;
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+
+.w6w-server-resources__expand:hover {
+  color: var(--w6w-text);
+  border-color: var(--w6w-accent);
+}
+
+/* --- badge --------------------------------------------------------------- */
+.w6w-server-resources--badge {
+  flex-direction: row;
+  gap: var(--w6w-sp-2);
+  align-items: center;
+  padding: 0 var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  background: var(--w6w-panel-2);
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-xs);
+  white-space: nowrap;
+}