@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/theme/tokens.css

@@ -0,0 +1,2896 @@
+/* =========================================================
+   Wildcard Pipeline — Design Tokens & Base
+   PrimeVue 4 Aura-inspired, dark, brand-customized.
+
+   1:1 port of docs/design-handoff/wildcard-pipeline/project/styles.css.
+   Keep selectors and rule order in sync with the prototype so future
+   ports can diff cleanly.
+   ========================================================= */
+
+:root {
+  /* Variable color palette — kept in sync with
+   * src/components/shared/theme.css (extension surface). The bundle
+   * editor mounts Context-side section components (CombineTemplateSection
+   * detected pills + preview tokens etc.) which call `varColorClass()`
+   * to emit `.var-1`..`.var-8`; without these rules in the manager
+   * surface the highlight collapses to default text color. */
+  --wp-var-1: #93c5fd;
+  --wp-var-2: #fcd34d;
+  --wp-var-3: #86efac;
+  --wp-var-4: #f9a8d4;
+  --wp-var-5: #fdba74;
+  --wp-var-6: #c4b5fd;
+  --wp-var-7: #67e8f9;
+  --wp-var-8: #fda4af;
+
+  /* Brand gradient (from logo) */
+  --wp-brand-1: #6c4cff;
+  --wp-brand-2: #a371ff;
+  --wp-brand-3: #2dd4bf;
+
+  /* Accent scale: Orbit indigo, the logo's #6366f1 (Tailwind indigo).
+   * One accent across canvas and manager; filled controls use -600. */
+  --wp-accent-50:  #eef2ff;
+  --wp-accent-100: #e0e7ff;
+  --wp-accent-200: #c7d2fe;
+  --wp-accent-300: #a5b4fc;
+  --wp-accent-400: #818cf8;
+  --wp-accent-500: #6366f1;
+  --wp-accent-600: #4f46e5;
+  --wp-accent-700: #4338ca;
+  --wp-accent-800: #3730a3;
+  --wp-accent-900: #312e81;
+
+  /* Semantic accent text (theme-aware — overridden in light theme) */
+  --wp-accent-text:        var(--wp-accent-300);
+  --wp-accent-text-strong: var(--wp-accent-200);
+
+  /* Surfaces (dark) */
+  --wp-bg:    #0b0b12;
+  --wp-bg-1:  #11111b;
+  --wp-bg-2:  #15151f;
+  --wp-bg-3:  #1c1c28;
+  --wp-bg-4:  #232333;
+
+  --wp-border:        rgba(255,255,255,0.08);
+  --wp-border-strong: rgba(255,255,255,0.14);
+  --wp-border-focus:  var(--wp-accent-400);
+
+  /* Text */
+  --wp-text:        #e7e7ee;
+  --wp-text-muted:  #a1a1ad;
+  /* Dim was previously #6e6e7c (~3.8:1 vs --wp-bg). Bumped to #8a8a9a
+   * so all dim text — row ids, version chip, toolbar counters,
+   * sidebar section headings — passes WCAG AA 4.5:1 contrast on the
+   * darkest surface. Still visually subordinate to text-muted. */
+  --wp-text-dim:    #8a8a9a;
+
+  /* Status */
+  /* Tag-axis accessor (`$outfit.SHOES`). One fixed colour rather than the
+     group's own hue: an accessor is the same KIND of thing wherever it
+     appears, and per-group hues made the meaning look different per
+     variable. Deliberately amber-400, not --wp-warn (amber-500), so a valid
+     axis never reads as the undeclared-axis warning. */
+  --wp-axis: #fbbf24;
+  --wp-success: #22c55e;
+  --wp-warn:    #f59e0b;
+  --wp-danger:  #ef4444;
+  --wp-info:    #3b82f6;
+
+  /* Status text — for direct `color:` usage on dark tinted surfaces.
+   * Dark: lighter tint than the base status color (red-300 vs red-500) for dark-bg legibility.
+   * Light overrides below cascade through --wp-danger etc. which flip to -700 shades. */
+  --wp-danger-text:  #fca5a5;            /* red-300; light override → var(--wp-danger) = red-700 */
+
+  /* Syntax @ref pill color — pink/magenta, distinct from wildcard KIND violet */
+  --wp-kind-ref:    #f0abfc;            /* fuchsia-300; light override → fuchsia-800 */
+  --wp-kind-ref-bg: rgba(192, 38, 211, 0.18);
+
+  /* Type */
+  --wp-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --wp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+
+  /* Spacing — 4/8 grid. All padding/margin/gap in src/manager/** routes through these. */
+
+  /* Base spacing (pre-density). The scale a designer reasons about. */
+  --wp-space-1-base: 2px;
+  --wp-space-2-base: 4px;
+  --wp-space-3-base: 6px;
+  --wp-space-4-base: 8px;
+  --wp-space-5-base: 12px;
+  --wp-space-6-base: 16px;
+  --wp-space-7-base: 24px;
+  --wp-space-8-base: 32px;
+
+  /* Shared names (2026-10-27): the canvas's motion and soft-border names,
+   * so a shared component (components/shared/) reads the same names here.
+   * SHARED_TOKENS in components/shared/shared-tokens.test.ts lists them. */
+  --wp-motion-quick:    120ms;
+  --wp-motion-hover:    150ms;
+  --wp-motion-fade:     180ms;
+  --wp-motion-swap:     200ms;
+  --wp-motion-flip:     280ms;
+  --wp-motion-pulse:    420ms;
+  --wp-motion-collapse: 450ms;
+  --wp-motion-stagger:   60ms;
+  --wp-motion-shimmer: 1400ms;
+  --wp-motion-curve-collapse: cubic-bezier(0.4, 0, 0.2, 1);
+  --wp-motion-curve-flip:     cubic-bezier(0.22, 1, 0.36, 1);
+  --wp-motion-curve-linear:   linear;
+  --wp-border-soft: var(--wp-border);
+
+  /* Density multiplier — comfortable=1, compact=0.85. Set on <html>
+   * via uiStore.setDensity. Defaults to 1 here so a fresh boot before
+   * the store applies its class reads as comfortable. */
+  --wp-density: 1;
+
+  /* Applied spacing — what consumers reference. Multiplied by density. */
+  --wp-space-0: 0;
+  --wp-space-1: calc(var(--wp-space-1-base) * var(--wp-density));
+  --wp-space-2: calc(var(--wp-space-2-base) * var(--wp-density));
+  --wp-space-3: calc(var(--wp-space-3-base) * var(--wp-density));
+  --wp-space-4: calc(var(--wp-space-4-base) * var(--wp-density));
+  --wp-space-5: calc(var(--wp-space-5-base) * var(--wp-density));
+  --wp-space-6: calc(var(--wp-space-6-base) * var(--wp-density));
+  --wp-space-7: calc(var(--wp-space-7-base) * var(--wp-density));
+  --wp-space-8: calc(var(--wp-space-8-base) * var(--wp-density));
+
+  /* Mapping rule: prefer the closest token. The audit allows raw 0
+   * (= --wp-space-0) and 2px (= --wp-space-1) as direct token values,
+   * plus 1px as an off-grid hairline exemption (e.g. 1px borders).
+   * Other off-grid values (3px, 5px, 7px, etc.) stay raw only when
+   * tagged `audit-exempt` with a justifying comment. */
+
+  /* Typography scale. line-height paired per step. */
+  --wp-text-xs:   11px;  --wp-line-xs:   16px;
+  --wp-text-sm:   12px;  --wp-line-sm:   16px;
+  --wp-text-base: 13px;  --wp-line-base: 20px;
+  --wp-text-md:   14px;  --wp-line-md:   20px;
+  --wp-text-lg:   16px;  --wp-line-lg:   22px;
+  --wp-text-xl:   20px;  --wp-line-xl:   28px;
+  --wp-text-2xl:  24px;  --wp-line-2xl:  32px;
+  --wp-text-3xl:  30px;  --wp-line-3xl:  38px;
+
+  /* Weights */
+  --wp-weight-normal: 400;
+  --wp-weight-medium: 500;
+  --wp-weight-semibold: 600;
+  --wp-weight-bold: 700;
+
+  /* Sizing — 4/8 grid */
+  --wp-radius-sm: 6px;
+  --wp-radius:    8px;
+  --wp-radius-lg: 12px;
+  --wp-radius-xl: 16px;
+  /* The roundest a corner may get: fixed corners are written
+   * min(Npx, var(--wp-radius-cap, 999px)), so a look (styles/looks.css)
+   * squares them by lowering this one name. */
+  --wp-radius-cap: 999px;
+  /* Alias used by some prototype rules */
+  --wp-radius-md: var(--wp-radius);
+
+  /* Form-control sizing — single canonical scale. */
+
+  /* Base control heights (pre-density). */
+  --wp-control-h-sm-base: 24px;
+  --wp-control-h-md-base: 32px;
+  --wp-control-h-lg-base: 40px;
+
+  /* Applied — multiplied by density, rounded to whole pixels. sm never
+     drops under the 24px manager hit target, so Compact keeps it at 24. */
+  --wp-control-h-sm: max(24px, round(calc(var(--wp-control-h-sm-base) * var(--wp-density)), 1px));
+  --wp-control-h-md: round(calc(var(--wp-control-h-md-base) * var(--wp-density)), 1px);
+  --wp-control-h-lg: round(calc(var(--wp-control-h-lg-base) * var(--wp-density)), 1px);
+
+  --wp-input-h:    var(--wp-control-h-md);  /* unified input height */
+  --wp-input-h-sm: var(--wp-control-h-sm);
+  --wp-btn-h:      var(--wp-control-h-md);
+  --wp-btn-h-sm:   var(--wp-control-h-sm);
+
+  /* Focus ring — single declaration reused across all controls. */
+  --wp-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.45);
+  /* Text and marks on a solid accent fill, and over a picture: the same in
+     both themes. --wp-scrim darkens a picture enough to read on it. */
+  --wp-on-accent: #fff;
+  --wp-on-media: #fff;
+  --wp-scrim: rgba(0, 0, 0, 0.55);
+  /* Brand colours of services we link to: the same in both themes. */
+  --wp-brand-discord: #5865f2;
+
+  /* Error treatment */
+  --wp-error-border: var(--wp-danger);
+  --wp-error-text:   var(--wp-danger);
+
+  --wp-sidebar-w: 232px;
+  --wp-topbar-h:  48px;
+
+  --wp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --wp-shadow:    0 2px 8px rgba(0, 0, 0, 0.3);
+  --wp-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.28);
+  --wp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --wp-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.45);
+
+  /* Elevation — semantic aliases over the shadow scale. Pick by
+   * purpose (resting, popover, modal) rather than visual weight.
+   *   elev-0  flat (no shadow)
+   *   elev-1  resting cards, list items
+   *   elev-2  popovers, dropdowns, hover-lift
+   *   elev-3  modals
+   *   elev-4  full-page overlays (rare)
+   */
+  --wp-elev-0: none;
+  --wp-elev-1: var(--wp-shadow-sm);
+  --wp-elev-2: var(--wp-shadow-md);
+  --wp-elev-3: var(--wp-shadow-lg);
+  --wp-elev-4: var(--wp-shadow-xl);
+
+  /* Overlays / drawers */
+  --wp-overlay-bg: rgba(0, 0, 0, 0.45);
+
+  /* Phase 4 — row hover + scrollbar thumb + input-shade tokens.
+   * Pre-fix these were inline `rgba(255,255,255,0.02)` / `rgba(0,0,0,0.32)`
+   * literals across components; tokenize so the light theme override
+   * below can flip the tint instead of leaving white-on-white or
+   * black-on-white surfaces. */
+  --wp-row-hover: rgba(255,255,255,0.02);
+  --wp-row-active: rgba(79,70,229,0.04);
+  --wp-scrollbar-thumb: rgba(255,255,255,0.08);
+  --wp-scrollbar-thumb-hover: rgba(255,255,255,0.16);
+  --wp-input-shade: rgba(0,0,0,0.32);
+
+  /* Pipeline / kind stripe accents */
+  --wp-kind-stripe-w: 3px;
+
+  /* Rich-text token colors (used by RichTextInput / RichTextPreview) */
+  --wp-rt-token-good:    #34d399;
+  --wp-rt-token-good-bg: color-mix(in oklab, #10b981 12%, transparent);
+  --wp-rt-token-mut:     #fb923c;
+  --wp-rt-token-mut-bg:  color-mix(in oklab, #f97316 12%, transparent);
+
+  /* Status colors — `modified` retained for the SPA ImportExport "mod"
+   * badge + the in-graph ContextWidget modified-dot, both of which
+   * mean "user diff from upstream". Drift state in ContextWidget reuses
+   * `--wp-warn` for SPA-IO `--exists` parity (see ContextWidget.vue
+   * `.wp-mod-dot--drift`). */
+  --wp-status-modified: #fb923c;
+
+  /* WP node identity accent — brand teal, deliberately distinct from the
+   * 5 module kind colors so a node icon never reads as a module kind. */
+  --wp-node: var(--wp-brand-3); /* #2dd4bf */
+
+  /* Kept as a name for older call sites; Orbit has no gradients, so it is flat. */
+  --wp-accent-gradient: var(--wp-accent-500);
+}
+
+/* `.var-N` color classes — emitted by `varColorClass(name)` in
+ * src/components/shared/var-color.ts. Same definitions live in
+ * extension theme.css; mirrored here so the manager surface paints
+ * them when mounting Context-side section components. */
+.var-1 { color: var(--wp-var-1); }
+.var-2 { color: var(--wp-var-2); }
+.var-3 { color: var(--wp-var-3); }
+.var-4 { color: var(--wp-var-4); }
+.var-5 { color: var(--wp-var-5); }
+.var-6 { color: var(--wp-var-6); }
+.var-7 { color: var(--wp-var-7); }
+.var-8 { color: var(--wp-var-8); }
+
+* { box-sizing: border-box; }
+
+:root, .wp-theme-dark {
+  color-scheme: dark;
+}
+
+.wp-theme-light {
+  color-scheme: light;
+  --wp-bg:    #f7f7fb;
+  --wp-bg-1:  #ffffff;
+  --wp-bg-2:  #ffffff;
+  --wp-bg-3:  #f1f1f6;
+  --wp-bg-4:  #e6e6ee;
+
+  --wp-border:        rgba(15,15,30,0.10);
+  --wp-border-strong: rgba(15,15,30,0.18);
+
+  --wp-text:        #1a1a25;
+  --wp-text-muted:  #5a5a6a;
+  /* Light theme: dim was #8b8b98 (~3.2:1 vs #f7f7fb). Bumped to #6e6e7e
+   * for WCAG AA on the darkest light-mode surface. */
+  --wp-text-dim:    #6e6e7e;
+
+  --wp-shadow-sm: 0 1px 2px rgba(15, 15, 30, 0.06);
+  --wp-shadow:    0 2px 8px rgba(15, 15, 30, 0.08);
+  --wp-shadow-md: 0 1px 2px rgba(15, 15, 30, 0.06), 0 4px 12px rgba(15, 15, 30, 0.10);
+  --wp-shadow-lg: 0 8px 24px rgba(15, 15, 30, 0.12);
+  --wp-shadow-xl: 0 16px 40px rgba(15, 15, 30, 0.16);
+
+  /* Phase 4 — flip the dark-theme white tints to dark tints so subtle
+   * surfaces remain visible on light bg. */
+  --wp-row-hover: rgba(15,15,30,0.04);
+  --wp-row-active: rgba(79,70,229,0.08);
+  --wp-scrollbar-thumb: rgba(15,15,30,0.14);
+  --wp-scrollbar-thumb-hover: rgba(15,15,30,0.22);
+  --wp-input-shade: rgba(15,15,30,0.06);
+
+  /* Light theme needs darker accent text for contrast on near-white surfaces */
+  --wp-accent-text:        var(--wp-accent-700);
+  --wp-accent-text-strong: var(--wp-accent-800);
+
+  /* Status colors — dark amber/green/red/blue are ~2.5–4:1 on white (fail AA for text).
+   * Swap to -700 / -800 level shades that clear 4.5:1. Values from Tailwind palette. */
+  --wp-success:      #15803d;           /* green-700   4.55:1 on white */
+  --wp-warn:         #b45309;           /* amber-700   4.75:1 on white */
+  --wp-danger:       #b91c1c;           /* red-700     5.25:1 on white */
+  --wp-info:         #1d4ed8;           /* blue-700    5.53:1 on white */
+
+  /* Status-text: in light mode, override to the same -700 shade as the base token
+   * (dark has lighter pastels; light has deeper shades — both are correct for their surface) */
+  --wp-danger-text:  var(--wp-danger);   /* red-700 via cascade */
+
+  /* Overlay — lighter scrim so light bg beneath still registers as dimmed */
+  --wp-overlay-bg: rgba(15, 15, 30, 0.35);
+
+  /* Bundle default — slate-700 for AA contrast on near-white.
+   * Slate signals "container/structural" vs the kind palette which
+   * signals "module type". Passes ~9.2:1 on white. */
+  --wp-bundle-default: #334155;
+
+  /* Ref pill — deeper magenta for light surfaces */
+  --wp-kind-ref:    #86198f;            /* fuchsia-800 5.03:1 on white */
+  --wp-kind-ref-bg: rgba(192, 38, 211, 0.13);
+
+  /* Rich-text inline tokens — flip bright pastels to readable dark shades */
+  --wp-rt-token-good:    #166534;       /* green-800   4.80:1 on white */
+  --wp-rt-token-good-bg: color-mix(in oklab, #166534 12%, transparent);
+  --wp-rt-token-mut:     #9a3412;       /* orange-800  5.19:1 on white */
+  --wp-rt-token-mut-bg:  color-mix(in oklab, #9a3412 12%, transparent);
+
+  /* Status-modified badge (ImportExport mod indicator) — orange-800 for light */
+  --wp-status-modified:  #c2410c;       /* orange-700  4.63:1 on white */
+
+  /* teal-700 — AA on near-white (4.54:1) */
+  --wp-node: #0f766e;
+}
+
+/* ---------- Light-theme kind-color overrides ----------
+   Dark-theme kind values are high-chroma pastels that fail WCAG AA on white/near-white.
+   These darker shades pass AA for both page-surface usage (icons, borders, dots ≥3.0)
+   and chip-text usage (color on 22% tint background ≥4.5). Verified 2026-05-18.
+   See docs/superpowers/specs/2026-05-18-kind-color-audit.md.
+
+   Selector is `html.wp-theme-light` (specificity 0,1,1) — beats the
+   later `:root` kind-color block (specificity 0,1,0) further down the
+   file. Without the `html` qualifier the second `:root` definition
+   would clobber these overrides through plain source-order cascade. */
+html.wp-theme-light {
+  --wp-kind-wildcard:        #6d28d9;                       /* violet-700  — chip 4.91:1 on white */
+  --wp-kind-wildcard-bg:     rgba(109, 40, 217, 0.12);
+  /* Fixed moved off cyan-800 — too close to combine emerald-800 in light. */
+  --wp-kind-fixed:           #1d4ed8;                       /* blue-700    — chip 6.61:1 on white */
+  --wp-kind-fixed-bg:        rgba(29, 78, 216, 0.12);
+  --wp-kind-combine:         #065f46;                       /* emerald-800 — chip 5.37:1 on white */
+  --wp-kind-combine-bg:      rgba(6, 95, 70, 0.12);
+  --wp-kind-derivation:      #92400e;                       /* amber-800   — chip 4.99:1 on white */
+  --wp-kind-derivation-bg:   rgba(146, 64, 14, 0.12);
+  --wp-kind-constraint:      #9d174d;                       /* pink-800    — chip 5.29:1 on white */
+  --wp-kind-constraint-bg:   rgba(157, 23, 77, 0.12);
+
+  /* Constraint matrix source/target — darker shades for light bg. */
+  --wp-constraint-source:      #7c3aed;                      /* violet-600 — 6.16:1 on white */
+  --wp-constraint-source-text: #6d28d9;
+  --wp-constraint-target:      #0891b2;                      /* cyan-600   — 4.97:1 on white */
+  --wp-constraint-target-text: #155e75;
+
+  /* Variable hash colors — dark pastel defaults fail on near-white;
+   * shift to *-700 family for AA contrast on the light page surface. */
+  --wp-var-1: #0369a1;  /* sky-700      4.84:1 on white */
+  --wp-var-2: #b45309;  /* amber-700    4.85:1 on white */
+  --wp-var-3: #047857;  /* emerald-700  4.91:1 on white */
+  --wp-var-4: #be185d;  /* rose-700     5.78:1 on white */
+  --wp-var-5: #c2410c;  /* orange-700   4.93:1 on white */
+  --wp-var-6: #6d28d9;  /* violet-700   4.91:1 on white */
+  --wp-var-7: #0e7490;  /* cyan-700     5.24:1 on white */
+  --wp-var-8: #b91c1c;  /* red-700      6.74:1 on white */
+}
+
+/* Constraint source/target — dark-theme defaults at :root above. */
+:root {
+  --wp-constraint-source:      #c084fc;                      /* purple-400 */
+  --wp-constraint-source-text: #d8b4fe;                      /* purple-300 */
+  --wp-constraint-target:      #22d3ee;                      /* cyan-400   */
+  --wp-constraint-target-text: #67e8f9;                      /* cyan-300   */
+}
+
+.wp-theme-light {
+  /* Slightly tighter alpha on light surfaces keeps the ring at the same
+   * perceived intensity as dark-mode's 0.35 on dark bg. */
+  --wp-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35);
+}
+
+.wp-theme-light ::-webkit-scrollbar-thumb { background: rgba(15,15,30,0.14); }
+.wp-theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(15,15,30,0.22); }
+
+/* Theme-switching: kill ALL transitions/animations briefly so dark↔light flips in one paint */
+.wp-theme-switching,
+.wp-theme-switching *,
+.wp-theme-switching *::before,
+.wp-theme-switching *::after {
+  transition: none !important;
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+}
+
+html, body, #app, #root {
+  margin: 0;
+  padding: 0;
+  background: var(--wp-bg);
+  color: var(--wp-text);
+  font-family: var(--wp-font);
+  font-size: 13.5px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+  overflow: hidden;
+}
+
+button { font: inherit; color: inherit; }
+input, textarea, select { font: inherit; }
+
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--wp-scrollbar-thumb, rgba(255,255,255,0.08)); border-radius: var(--wp-radius-cap, 999px); }
+::-webkit-scrollbar-thumb:hover { background: var(--wp-scrollbar-thumb-hover, rgba(255,255,255,0.16)); }
+
+/* ---------- App shell ---------- */
+.wp-app {
+  display: grid;
+  grid-template-rows: var(--wp-topbar-h) 1fr;
+  height: 100vh;
+  width: 100vw;
+  background: var(--wp-bg);
+}
+
+.wp-topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg-1);
+  height: var(--wp-topbar-h);
+  position: relative;
+  z-index: 30;
+}
+
+.wp-topbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: -0.01em;
+}
+.wp-topbar__version {
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  color: var(--wp-text-dim);
+  padding: 2px 6px;
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-cap, 999px);
+  letter-spacing: 0.02em;
+}
+.wp-topbar__spacer { flex: 1; }
+
+.wp-topbar__icon-btn {
+  width: 30px; height: 30px;
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  display: inline-grid; place-items: center;
+  background: transparent; border: 1px solid transparent;
+  color: var(--wp-text-muted);
+  cursor: pointer;
+  transition: background .15s, color .15s, border-color .15s;
+}
+.wp-topbar__icon-btn:hover {
+  background: var(--wp-bg-3);
+  color: var(--wp-text);
+  border-color: var(--wp-border);
+}
+
+/* ---------- Body grid ---------- */
+.wp-body {
+  display: grid;
+  grid-template-columns: var(--wp-sidebar-w) 1fr;
+  min-height: 0;
+}
+.wp-body[data-collapsed="true"] { grid-template-columns: 56px 1fr; }
+
+/* ---------- Sidebar ---------- */
+.wp-sidebar {
+  border-right: 1px solid var(--wp-border);
+  background: var(--wp-bg-1);
+  padding: 10px 8px;
+  overflow-y: auto;
+  display: flex; flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+}
+
+.wp-sidebar__section {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wp-text-dim);
+  padding: 14px 10px 6px;
+}
+
+.wp-nav {
+  display: flex; align-items: center; gap: 10px;
+  padding: 7px 10px;
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  color: var(--wp-text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  user-select: none;
+  background: transparent;
+  border: 1px solid transparent;
+  text-align: left;
+  font-family: inherit;
+  transition: background .12s, color .12s, border-color .12s;
+  position: relative;
+}
+.wp-nav:hover { background: var(--wp-bg-3); color: var(--wp-text); }
+.wp-nav[data-active] {
+  background: color-mix(in oklab, var(--wp-accent-500) 14%, transparent);
+  color: var(--wp-text);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 30%, transparent);
+}
+/* Active-row gradient strip lives in AppSidebar.vue scoped CSS (presence selector). */
+.wp-nav__icon { width: 16px; flex: 0 0 16px; display: grid; place-items: center; color: inherit; }
+.wp-nav__label { flex: 1; white-space: nowrap; }
+.wp-nav__badge {
+  font-size: 9.5px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 1.5px 6px;
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-dim);
+  border: 1px solid var(--wp-border);
+  font-weight: 600;
+}
+.wp-nav__ext { color: var(--wp-text-dim); width: 12px; }
+
+/* ---------- Content area ---------- */
+.wp-content {
+  overflow: auto;
+  padding: 18px 22px 40px;
+  min-width: 0;
+  --wp-content-px: 22px;
+  --wp-content-pb: 40px;
+}
+
+.wp-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex; flex-direction: column;
+  gap: 16px;
+  min-height: 100%;
+}
+
+/* Fill-mode page: instead of growing the parent's scroll, become a fixed-height
+   flex column whose children opt-in to scrolling (typically a table-wrap). */
+.wp-page--fill {
+  height: 100%;
+  min-height: 0;
+}
+.wp-page--fill > .wp-table-wrap--scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+.wp-table--sticky-head thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--wp-bg-2);
+}
+
+.wp-page__header {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 4px;
+}
+.wp-page__title-wrap { display: flex; flex-direction: column; gap: 4px; }
+.wp-page__title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
+.wp-page__subtitle { color: var(--wp-text-muted); font-size: 12.5px; margin: 0; max-width: 720px; }
+
+.wp-breadcrumb {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--wp-text-muted); font-size: 12px;
+  background: none; border: none; padding: 0; cursor: pointer;
+  margin-bottom: 4px;
+}
+.wp-breadcrumb:hover { color: var(--wp-text); }
+
+/* ---------- Cards / panels ---------- */
+.wp-card {
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+}
+.wp-card__header {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--wp-border);
+  display: flex; align-items: center; gap: 10px;
+  /* Wrap only engages once the row genuinely cannot fit, which previously
+     meant the widest flexible child collapsed instead — the derivation card
+     has four buttons and squeezed its filter input to 18px in a narrow
+     window. A header that fits is unaffected. */
+  flex-wrap: wrap;
+}
+.wp-card__title-wrap { display: flex; flex-direction: column; gap: 1px; }
+/* A card's name reads as its title: normal case, 14px semibold, full text
+ * colour. Uppercase stays for small group labels (Field, table heads). */
+.wp-card__title { font-size: 14px; line-height: 1.35; color: var(--wp-text); margin: 0; font-weight: 600; letter-spacing: -0.005em; }
+.wp-card__subtitle {
+  font-size: 11.5px;
+  color: var(--wp-text-dim);
+  margin: 0;
+  font-weight: 400;
+}
+.wp-card__body { padding: 14px; }
+/* Sticky-header cards pin their header + `subheader` slot (e.g. a bulk-edit
+ * toolbar) to the top of the scroll region so a long list's actions (Add
+ * option, Bulk edit, the selection toolbar, …) stay reachable at the bottom.
+ * The whole `.wp-card__sticky` region sticks as one so its sub-toolbar can't
+ * be left behind. Card.vue publishes `--wp-card-header-h` (the region's
+ * measured height) so a sticky <thead> below offsets right under it. Needs an
+ * opaque bg (header/subheader are transparent). */
+.wp-card--sticky-header > .wp-card__sticky {
+  position: sticky;
+  /* -1px, not 0: the scroll container's top can land on a fractional device
+   * pixel (measured e.g. 152.39 at dpr 1), so pinning exactly at top:0 leaves
+   * a sub-pixel sliver above the opaque header through which the scrolled
+   * content behind bleeds as a faint ghost line. Overlapping the scroll edge
+   * by 1px (the extra px is clipped by the container's overflow and absorbed
+   * by the header's 12px top padding) guarantees the bg covers that seam at
+   * any DPR. The sticky <thead> below tracks the same -1px. */
+  top: -1px;
+  z-index: 5;
+  background: var(--wp-bg-1);
+}
+/* Sticky column header inside a sticky-header card — pins right under the
+ * toolbar. Chromium won't scroll-anchor a table CELL here, but sticking the
+ * <thead> element does; th gets an opaque bg so rows don't bleed through.
+ * Shared by the wildcard + fixed-values option tables. The -1px mirrors the
+ * header's overlap above so the two stay flush (no gap for rows to bleed). */
+.wp-card--sticky-header .wp-options-table thead {
+  position: sticky;
+  top: calc(var(--wp-card-header-h, 53px) - 1px);
+  z-index: 4;
+}
+.wp-card--sticky-header .wp-options-table thead th {
+  background: var(--wp-bg-1);
+  box-shadow: inset 0 -1px 0 var(--wp-border);
+}
+
+/* Quick-select preset chip — shared by the import/export presets bars
+ * (ExportTab + ImportPicker). Layout of the bar itself stays per-component;
+ * this is just the button atom. */
+.wp-preset-btn {
+  background: var(--wp-bg-3);
+  border: 1px solid var(--wp-border);
+  color: var(--wp-text);
+  font-family: var(--wp-font);
+  font-size: var(--wp-text-sm);
+  padding: 4px 11px;
+  border-radius: var(--wp-radius-sm);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+}
+.wp-preset-btn:hover:not(:disabled) {
+  background: var(--wp-bg-4);
+  border-color: var(--wp-border-strong);
+}
+.wp-preset-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.wp-preset-btn .pi {
+  font-size: 10px;
+  color: var(--wp-text-muted);
+}
+.wp-preset-btn:focus-visible {
+  outline: 2px solid var(--wp-accent-500);
+  outline-offset: 2px;
+}
+
+/* ---------- Buttons ----------
+ * The .wp-btn rules live in kit/button.css, shared with the
+ * canvas Button (component standard, rule 8). main.ts loads it right after
+ * this file. */
+
+/* ---------- Inputs ---------- */
+.wp-input,
+.wp-select,
+.wp-textarea {
+  height: var(--wp-input-h);
+  width: 100%;
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  padding: 0 10px;
+  font-size: 12.5px;
+  outline: none;
+  transition: border-color .12s, background .12s, box-shadow .12s;
+}
+.wp-textarea {
+  height: auto;
+  padding: 8px 10px;
+  resize: vertical;
+  min-height: var(--wp-input-h);
+  line-height: 1.5;
+}
+.wp-input:focus-visible,
+.wp-select:focus-visible,
+.wp-textarea:focus-visible {
+  border-color: var(--wp-accent-500);
+  box-shadow: var(--wp-focus-ring);
+  background: var(--wp-bg-1);
+}
+/* Retain :focus fallback for browsers/contexts that don't support :focus-visible */
+.wp-input:focus,
+.wp-select:focus,
+.wp-textarea:focus {
+  border-color: var(--wp-accent-500);
+  box-shadow: var(--wp-focus-ring);
+  background: var(--wp-bg-1);
+}
+/* Error state on standalone controls (when not wrapped in .wp-field) */
+.wp-input[aria-invalid="true"],
+.wp-select[aria-invalid="true"],
+.wp-textarea[aria-invalid="true"] {
+  border-color: var(--wp-error-border);
+}
+.wp-input::placeholder, .wp-textarea::placeholder { color: var(--wp-text-dim); }
+.wp-input--sm, .wp-select--sm { height: var(--wp-input-h-sm); font-size: 12px; padding: 0 8px; }
+.wp-input--lg { height: var(--wp-control-h-lg); font-size: 13.5px; padding: 0 12px; }
+/* Readonly: shown, not editable. Dimmer fill, no focus ring (Input adds a lock). */
+.wp-input[readonly],
+.wp-textarea[readonly] {
+  background: var(--wp-bg-1);
+  color: var(--wp-text-muted);
+  border-style: dashed;
+  cursor: default;
+}
+.wp-input[readonly]:focus,
+.wp-input[readonly]:focus-visible,
+.wp-textarea[readonly]:focus,
+.wp-textarea[readonly]:focus-visible { box-shadow: none; border-color: var(--wp-border-strong); background: var(--wp-bg-1); }
+.wp-input:disabled,
+.wp-textarea:disabled { opacity: 0.45; cursor: not-allowed; }
+/* Custom select trigger button — flex layout so label + spacer + chevron align. */
+.wp-select {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+}
+
+.wp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.wp-field__label {
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--wp-text-muted);
+  font-weight: 600;
+}
+.wp-field__hint { font-size: 11.5px; color: var(--wp-text-dim); }
+.wp-field__error { font-size: 11.5px; color: var(--wp-error-text); }
+.wp-field--error .wp-input,
+.wp-field--error .wp-textarea,
+.wp-field--error .wp-select,
+.wp-field--error .wp-input-group {
+  border-color: var(--wp-error-border);
+}
+
+.wp-input-group {
+  display: inline-flex; align-items: stretch; width: 100%;
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-sm);
+  background: var(--wp-bg-2);
+  overflow: hidden;
+  height: var(--wp-input-h);
+  min-height: var(--wp-input-h);
+  flex-shrink: 0;
+  transition: border-color .12s, box-shadow .12s;
+}
+.wp-input-group:focus-within {
+  border-color: var(--wp-accent-500);
+  box-shadow: var(--wp-focus-ring);
+}
+/* Inline icon and prefix/suffix text: no box, no divider, sitting in the
+ * field's own padding so "$" reads as part of "$hair". */
+.wp-input-group__icon,
+.wp-input-group__affix,
+.wp-input-group__lock {
+  display: inline-flex; align-items: center; flex-shrink: 0;
+  color: var(--wp-text-dim);
+  user-select: none;
+}
+.wp-input-group__icon { padding-left: 10px; }
+.wp-input-group__icon .pi { font-size: 13px; line-height: 1; }
+.wp-input-group__affix { font-family: var(--wp-font-mono); font-size: 12.5px; }
+.wp-input-group__affix--prefix { padding-left: 10px; }
+.wp-input-group__affix--suffix { padding-right: 10px; }
+.wp-input-group__lock { padding-right: 10px; }
+.wp-input-group__icon + .wp-input,
+.wp-input-group__icon + .wp-input-group__affix--prefix { padding-left: 7px; }
+.wp-input-group__affix--prefix + .wp-input { padding-left: 2px; }
+.wp-input-group .wp-input:has(+ .wp-input-group__affix--suffix),
+.wp-input-group .wp-input:has(+ .wp-input-group__lock) { padding-right: 4px; }
+.wp-input-group--sm { height: var(--wp-control-h-sm); min-height: var(--wp-control-h-sm); }
+.wp-input-group--lg { height: var(--wp-control-h-lg); min-height: var(--wp-control-h-lg); }
+.wp-input-group--readonly { background: var(--wp-bg-1); border-style: dashed; }
+.wp-input-group--readonly:focus-within { box-shadow: none; border-color: var(--wp-border-strong); }
+.wp-input-group--readonly .wp-input[readonly] { border: none; }
+.wp-input-group--disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-input-group--disabled .wp-input:disabled { opacity: 1; }
+.wp-input-group[aria-invalid="true"] { border-color: var(--wp-error-border); }
+.wp-input-group .wp-input {
+  border: none !important;
+  background: transparent !important;
+  border-radius: 0;
+  height: 100%;
+  flex: 1;
+}
+.wp-input-group .wp-input:focus { box-shadow: none; }
+
+/* ---------- Chips / tags ---------- */
+.wp-chip {
+  /* Reduced overall density: padding 2→1, font 11→10.5, gap 5→4 →
+   * chips feel like compact tags instead of buttons. The close-target
+   * min-height drops in lockstep so an X-bearing chip doesn't end up
+   * forced taller than its bare counterpart. */
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 1px 7px;
+  border-radius: var(--wp-radius-cap, 999px);
+  font-size: 10.5px;
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  border: 1px solid var(--wp-border);
+  white-space: nowrap;
+  font-weight: 500;
+}
+.wp-chip--accent {
+  color: var(--wp-accent-text-strong);
+  background: rgba(99, 102, 241, 0.16);
+  background: color-mix(in oklab, var(--wp-accent-500) 16%, transparent);
+  border-color: rgba(99, 102, 241, 0.38);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 38%, transparent);
+}
+/* Status chips — text is a lighter tint of the status color in dark, deeper shade in light.
+ * Dark theme: --wp-success etc. are bright saturated (green-500/amber-500/red-500/blue-500),
+ * readable on dark surface tints. Light-mode overrides below flip to -700 shades via the
+ * status token cascade set in .wp-theme-light. */
+.wp-chip--success { color: var(--wp-success); background: color-mix(in oklab, var(--wp-success) 14%, transparent); border-color: color-mix(in oklab, var(--wp-success) 36%, transparent); }
+.wp-chip--warn    { color: var(--wp-warn);    background: color-mix(in oklab, var(--wp-warn)    14%, transparent); border-color: color-mix(in oklab, var(--wp-warn)    36%, transparent); }
+.wp-chip--danger  { color: var(--wp-danger);  background: color-mix(in oklab, var(--wp-danger)  14%, transparent); border-color: color-mix(in oklab, var(--wp-danger)  36%, transparent); }
+.wp-chip--info    { color: var(--wp-info);    background: color-mix(in oklab, var(--wp-info)    14%, transparent); border-color: color-mix(in oklab, var(--wp-info)    36%, transparent); }
+.wp-chip__dot { width: 7px; height: 7px; border-radius: var(--wp-radius-cap, 999px); background: currentColor; }
+.wp-chip__close {
+  /* A plain ✕: no background zone and no box that makes a removable chip
+   * taller than a bare one. The glyph box is 12px, inside the chip's own
+   * line; the ::after reaches 4px past it on every side for a 20px click
+   * target without changing the layout. Hover only darkens the glyph. */
+  position: relative;
+  background: none; border: none; padding: 0; margin: 0 -2px 0 1px;
+  width: 12px; height: 12px;
+  color: inherit; opacity: 0.65; cursor: pointer; line-height: 0;
+  display: inline-grid; place-items: center;
+  border-radius: 0;
+  transition: opacity .12s, color .12s;
+}
+.wp-chip__close::after { content: ""; position: absolute; inset: -4px; }
+.wp-chip__close:hover { opacity: 1; background: none; }
+.wp-chip__close:focus-visible { outline: 2px solid var(--wp-accent-500); outline-offset: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); opacity: 1; }
+
+
+/* ---------- DataTable ---------- */
+.wp-table-wrap {
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+  overflow: hidden;
+}
+.wp-table { width: 100%; border-collapse: collapse; }
+.wp-table thead th {
+  text-align: left;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  color: var(--wp-text-muted);
+  padding: 10px 12px;
+  background: var(--wp-bg-2);
+  border-bottom: 1px solid var(--wp-border);
+  white-space: nowrap;
+  user-select: none;
+}
+.wp-table thead th.wp-sortable { cursor: pointer; }
+.wp-table thead th.wp-sortable:hover { color: var(--wp-text); }
+.wp-table tbody td {
+  padding: 10px 12px;
+  font-size: 12.5px;
+  border-bottom: 1px solid var(--wp-border);
+  vertical-align: middle;
+}
+.wp-table tbody tr:last-child td { border-bottom: none; }
+.wp-table tbody tr:hover td { background: var(--wp-row-hover, rgba(255,255,255,0.02)); }
+.wp-table tbody tr[data-expanded="true"] > td { background: var(--wp-row-active, rgba(79,70,229,0.04)); }
+
+/* Skeleton rows shown during first paint of list views. The shimmer
+ * animation is short + low-contrast so it reads as "content settling"
+ * rather than competing for attention. `prefers-reduced-motion` users
+ * still get the bar — sans pulse — so absence of motion does not
+ * collapse the loading affordance to nothing. */
+/* Skip-to-content link — hidden off-screen until keyboard focus, then
+ * pops into the top-left so users can jump past the topbar + sidebar.
+ * Standard a11y pattern; matches WCAG 2.4.1 bypass-blocks. */
+.wp-skip-link {
+  position: fixed;
+  top: -40px;
+  left: 8px;
+  z-index: 10000;
+  padding: 8px 14px;
+  background: var(--wp-accent-500);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: min(6px, var(--wp-radius-cap, 999px));
+  text-decoration: none;
+  transition: top 120ms ease;
+}
+.wp-skip-link:focus,
+.wp-skip-link:focus-visible {
+  top: 8px;
+  outline: 2px solid var(--wp-accent-300, var(--wp-accent-500));
+  outline-offset: 2px;
+}
+
+/* Visually-hidden text for screen readers — pattern lifted from
+ * Tailwind's `sr-only`. Used to give empty `<th>` cells (select,
+ * expand, favorite) an accessible name without showing one. */
+.wp-sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Subtle banner transition used by load-error, draft-restore, and
+ * editor field-error rollups. Slide-down + fade on enter, fade only on
+ * leave so the banner doesn't visually retreat to the wrong direction.
+ * Honored by Vue's <Transition name="wp-banner">. */
+.wp-banner-enter-active { transition: opacity 180ms ease, transform 180ms ease; }
+.wp-banner-leave-active { transition: opacity 140ms ease; }
+.wp-banner-enter-from { opacity: 0; transform: translateY(-6px); }
+.wp-banner-leave-to   { opacity: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-banner-enter-active,
+  .wp-banner-leave-active { transition: none; }
+  .wp-banner-enter-from { transform: none; }
+}
+
+.wp-row-skel:hover td { background: transparent; }
+.wp-row-skel td { vertical-align: middle; }
+.wp-skel-bar {
+  display: block;
+  height: 10px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  background: linear-gradient(
+    90deg,
+    var(--wp-bg-3) 0%,
+    var(--wp-bg-4) 50%,
+    var(--wp-bg-3) 100%
+  );
+  background-size: 200% 100%;
+  animation: wp-skel-pulse 1.4s ease-in-out infinite;
+  opacity: 0.55;
+}
+@keyframes wp-skel-pulse {
+  0%   { background-position: 100% 50%; }
+  100% { background-position: -100% 50%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-skel-bar { animation: none; }
+}
+.wp-table .wp-row-expand {
+  background: var(--wp-bg-2);
+  padding: 12px 16px 14px 56px;
+  font-size: 12px;
+}
+.wp-table .wp-row-expand .wp-row-expand__title {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--wp-text-dim);
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+/* ---------- List-row chrome (used by all 6 list screens) ---------- */
+.wp-tag-chip {
+  font-size: 10px;
+  padding: 2px 8px;
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  border-radius: var(--wp-radius-cap, 999px);
+  letter-spacing: 0.02em;
+  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.wp-tag-chip:hover { background: var(--wp-bg-4); color: var(--wp-text); }
+/* Active state defined globally so scoped view files can use color-mix and this
+   serves as the rgba fallback when color-mix is unsupported (old Chromium). */
+.wp-tag-chip[data-active="true"] {
+  background: rgba(99, 102, 241, 0.22);
+  background: color-mix(in oklab, var(--wp-accent-500) 22%, transparent);
+  border-color: rgba(99, 102, 241, 0.45);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 45%, transparent);
+  color: var(--wp-accent-text);
+}
+
+.wp-id {
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  color: var(--wp-text-dim);
+  cursor: pointer;
+  user-select: all;
+}
+.wp-id:hover { color: var(--wp-text-muted); }
+
+.wp-fav-toggle {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 13px; color: var(--wp-text); cursor: pointer;
+}
+
+.wp-row-name {
+  display: flex; flex-direction: column; gap: 1px;
+}
+.wp-row-name__text {
+  font-weight: 500; cursor: pointer;
+}
+.wp-row-name__text:hover { color: var(--wp-text); filter: brightness(1.1); }
+
+.wp-row-expand__title {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--wp-text-muted);
+  margin: 0 0 8px 0;
+  font-weight: 600;
+}
+.wp-row-expand__name {
+  color: var(--wp-accent-text);
+  font-weight: 600;
+}
+
+.wp-filters-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+.wp-field--full { grid-column: 1 / -1; }
+.wp-field__label {
+  display: block;
+  font-size: 11px;
+  color: var(--wp-text-muted);
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+/* A colour-tinted chip (a category, a kind): the colour triple is inline,
+   set by Chip's `color` prop; the label reads a touch heavier. */
+.wp-chip--color { font-weight: 500; }
+
+/* ---------- Wildcard syntax indicators ---------- */
+.wp-syntax-cell {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.wp-syntax-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: var(--wp-radius-cap, 999px);
+  font-size: 10.5px;
+  font-weight: 600;
+  font-family: var(--wp-font-mono);
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1;
+}
+.wp-syntax-pill .pi { font-size: 9.5px; }
+.wp-syntax-pill--ref {
+  /* outgoing nested @refs — pink/magenta; uses --wp-kind-ref which flips to fuchsia-800 in light */
+  color: var(--wp-kind-ref);
+  background: var(--wp-kind-ref-bg);
+  border-color: color-mix(in oklab, var(--wp-kind-ref) 32%, transparent);
+}
+.wp-syntax-pill--in {
+  /* incoming references — accent (purple) */
+  color: var(--wp-accent-text);
+  background: rgba(99, 102, 241, 0.18);
+  background: color-mix(in oklab, var(--wp-accent-500) 18%, transparent);
+  border-color: rgba(99, 102, 241, 0.35);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 35%, transparent);
+}
+.wp-syntax-pill--dp {
+  /* inline {a|b|c} — derivation yellow; --wp-kind-derivation flips to amber-800 in light */
+  color: var(--wp-kind-derivation);
+  background: var(--wp-kind-derivation-bg);
+  border-color: color-mix(in oklab, var(--wp-kind-derivation) 32%, transparent);
+}
+
+/* Syntax-color tint for filter-panel toggle chips. Lets the
+ * Wildcards filter pills (Uses nested refs / Has inline / Referenced
+ * by others) match the colored pills in the body's Syntax column —
+ * users learn one color set for both surfaces. Same hue tokens as
+ * `.wp-syntax-pill--*` above; tint depth tuned for the chip shape
+ * (border-only at rest, full fill when active). */
+.wp-chip--toggle.wp-chip--syntax-ref {
+  border-color: color-mix(in oklab, var(--wp-kind-ref) 35%, transparent);
+  color: var(--wp-kind-ref);
+}
+.wp-chip--toggle.wp-chip--syntax-ref[data-active] {
+  background: color-mix(in oklab, var(--wp-kind-ref) 22%, transparent);
+  border-color: color-mix(in oklab, var(--wp-kind-ref) 45%, transparent);
+  color: var(--wp-kind-ref);
+}
+.wp-chip--toggle.wp-chip--syntax-in {
+  border-color: color-mix(in oklab, var(--wp-accent-500) 35%, transparent);
+  color: var(--wp-accent-text);
+}
+.wp-chip--toggle.wp-chip--syntax-in[data-active] {
+  background: color-mix(in oklab, var(--wp-accent-500) 22%, transparent);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 45%, transparent);
+  color: var(--wp-accent-text);
+}
+.wp-chip--toggle.wp-chip--syntax-dp {
+  border-color: color-mix(in oklab, var(--wp-kind-derivation) 35%, transparent);
+  color: var(--wp-kind-derivation);
+}
+.wp-chip--toggle.wp-chip--syntax-dp[data-active] {
+  background: color-mix(in oklab, var(--wp-kind-derivation) 22%, transparent);
+  border-color: color-mix(in oklab, var(--wp-kind-derivation) 45%, transparent);
+  color: var(--wp-kind-derivation);
+}
+
+/* Light-mode pill overrides — token cascade handles color; adjust tint depth for near-white surface */
+.wp-theme-light .wp-syntax-pill--ref {
+  /* --wp-kind-ref → fuchsia-800 (#86198f) in light; --wp-kind-ref-bg → 13% tint */
+  color: var(--wp-kind-ref);
+  background: var(--wp-kind-ref-bg);
+  border-color: color-mix(in oklab, var(--wp-kind-ref) 38%, transparent);
+}
+.wp-theme-light .wp-syntax-pill--in {
+  /* color inherits --wp-accent-text which light mode sets to accent-700 */
+  background: rgba(99, 102, 241, 0.13);
+  border-color: rgba(99, 102, 241, 0.40);
+}
+.wp-theme-light .wp-syntax-pill--dp {
+  /* --wp-kind-derivation → amber-800 (#92400e) in light; --wp-kind-derivation-bg → 12% tint */
+  color: var(--wp-kind-derivation);
+  background: var(--wp-kind-derivation-bg);
+  border-color: color-mix(in oklab, var(--wp-kind-derivation) 45%, transparent);
+}
+
+/* ── Light-mode overrides: buttons, chips, tags, links ── */
+/* Danger button hover: white text fails on light tint; swap to dark-red label */
+
+/* Tone chips: swap light text for dark text, slightly stronger tint.
+ * Colors route through status tokens which flip to -700/-800 shades in light mode. */
+.wp-theme-light .wp-chip--accent {
+  /* color inherits --wp-accent-text-strong → accent-800 in light mode */
+  background: rgba(99, 102, 241, 0.13);
+  border-color: rgba(99, 102, 241, 0.40);
+}
+.wp-theme-light .wp-chip--success { color: var(--wp-success); background: color-mix(in oklab, var(--wp-success) 14%, transparent); border-color: color-mix(in oklab, var(--wp-success) 42%, transparent); }
+.wp-theme-light .wp-chip--warn    { color: var(--wp-warn);    background: color-mix(in oklab, var(--wp-warn)    14%, transparent); border-color: color-mix(in oklab, var(--wp-warn)    42%, transparent); }
+.wp-theme-light .wp-chip--danger  { color: var(--wp-danger);  background: color-mix(in oklab, var(--wp-danger)  14%, transparent); border-color: color-mix(in oklab, var(--wp-danger)  42%, transparent); }
+.wp-theme-light .wp-chip--info    { color: var(--wp-info);    background: color-mix(in oklab, var(--wp-info)    14%, transparent); border-color: color-mix(in oklab, var(--wp-info)    42%, transparent); }
+/* Tag chip active: color auto-adapts (--wp-accent-text → dark purple in light mode) */
+.wp-theme-light .wp-tag-chip[data-active="true"] {
+  background: rgba(99, 102, 241, 0.16);
+  border-color: rgba(99, 102, 241, 0.42);
+}
+/* Missing wildcard ref link: --wp-danger flips to red-700 in light */
+.wp-theme-light .wp-syntax-link--missing,
+.wp-theme-light .wp-syntax-link--missing:hover {
+  color: var(--wp-danger);
+  border-color: color-mix(in oklab, var(--wp-danger) 42%, transparent);
+  background: color-mix(in oklab, var(--wp-danger) 12%, transparent);
+}
+
+/* Reference graph block inside row-expand */
+.wp-syntax-graph {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--wp-border);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+}
+.wp-syntax-graph__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.wp-syntax-graph__row .pi { font-size: 11px; opacity: 0.7; }
+.wp-syntax-link {
+  appearance: none;
+  background: var(--wp-bg-3);
+  border: 1px solid var(--wp-border);
+  color: var(--wp-text-dim);
+  font: inherit;
+  padding: 1px 8px;
+  border-radius: var(--wp-radius-cap, 999px);
+  cursor: pointer;
+  transition: color 120ms, background 120ms, border-color 120ms;
+}
+.wp-syntax-link:hover {
+  color: var(--wp-accent-text);
+  border-color: rgba(99, 102, 241, 0.45);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 45%, transparent);
+  background: rgba(99, 102, 241, 0.12);
+  background: color-mix(in oklab, var(--wp-accent-500) 12%, var(--wp-bg-3));
+}
+.wp-syntax-link--missing {
+  /* audit-exempt: red-400 (#f87171) is lighter than --wp-danger for dark-bg legibility;
+   * light-mode override above uses var(--wp-danger) which flips to red-700. */
+  color: #f87171;
+  border-color: color-mix(in oklab, #f87171 38%, transparent);
+  background: color-mix(in oklab, #f87171 14%, transparent);
+  font-family: var(--wp-font-mono);
+  cursor: default;
+}
+.wp-syntax-link--missing:hover {
+  color: #f87171; /* audit-exempt: see above */
+  border-color: color-mix(in oklab, #f87171 38%, transparent);
+  background: color-mix(in oklab, #f87171 14%, transparent);
+}
+
+.wp-id {
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  color: var(--wp-text-dim);
+  letter-spacing: 0;
+}
+
+/* ---------- Toolbar ---------- */
+.wp-toolbar {
+  display: flex; align-items: center; gap: 8px;
+  flex-wrap: wrap;
+}
+.wp-toolbar__search { flex: 1; min-width: 220px; max-width: 320px; }
+.wp-toolbar__count { font-size: 11.5px; color: var(--wp-text-dim); margin-left: auto; }
+
+/* ---------- Pagination ---------- */
+.wp-pagination {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px;
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-md);
+}
+.wp-pager {
+  display: inline-flex; align-items: center; gap: 2px;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  padding: 2px;
+}
+.wp-pager__label {
+  padding: 0 10px;
+  font-size: 11.5px;
+  color: var(--wp-text-muted);
+  font-variant-numeric: tabular-nums;
+  min-width: 80px;
+  text-align: center;
+}
+
+/* ---------- Rule card (Derivation editor) ---------- */
+.wp-rule {
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-md);
+  padding: 10px 12px;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.wp-rule__head {
+  display: flex; align-items: center; gap: 8px;
+}
+.wp-rule__num {
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  background: color-mix(in oklab, var(--wp-accent-500) 18%, transparent);
+  color: var(--wp-accent-text);
+}
+.wp-rule__index { font-size: 11px; color: var(--wp-text-dim); font-variant-numeric: tabular-nums; }
+.wp-rule__row {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 10px;
+  align-items: center;
+}
+.wp-rule__label {
+  font-size: 11.5px;
+  color: var(--wp-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+}
+.wp-rule__cond {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+.wp-rule--else {
+  margin-top: 12px;
+  border-style: dashed;
+  background: transparent;
+}
+.wp-rule--else[data-active="true"] {
+  background: var(--wp-bg-2);
+  border-style: solid;
+}
+.wp-rule--else .wp-rule__num {
+  background: color-mix(in oklab, var(--wp-warn) 18%, transparent);
+  color: var(--wp-warn);
+}
+
+/* Group rule (independent rule with its own IF/ELIF/ELSE branches) */
+.wp-rule--group {
+  border: 1px solid var(--wp-border-strong);
+  background: var(--wp-bg-1);
+  padding: 12px;
+}
+.wp-rule--group .wp-rule__num {
+  background: color-mix(in oklab, var(--wp-accent-500) 24%, transparent);
+}
+.wp-rule__branches {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+  padding-left: 10px;
+  border-left: 2px solid color-mix(in oklab, var(--wp-accent-500) 30%, transparent);
+}
+.wp-branch {
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  padding: 10px 12px;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.wp-branch__head {
+  display: flex; align-items: center; gap: 8px;
+}
+.wp-branch__tag {
+  font-family: var(--wp-font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  padding: 2px 7px;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  text-transform: uppercase;
+}
+.wp-branch__tag[data-kind="if"] {
+  background: color-mix(in oklab, var(--wp-accent-500) 22%, transparent);
+  color: var(--wp-accent-text);
+}
+.wp-branch__tag[data-kind="elif"] {
+  background: color-mix(in oklab, var(--wp-info, #60a5fa) 22%, transparent);
+  color: var(--wp-info, #60a5fa);
+}
+.wp-branch__tag[data-kind="else"] {
+  background: color-mix(in oklab, var(--wp-warn) 22%, transparent);
+  color: var(--wp-warn);
+}
+.wp-branch--else {
+  border-style: dashed;
+}
+.wp-rule__addbar {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  padding-left: 12px;
+}
+
+/* ---------- Hero ----------
+ * A page header with the logo or an icon. Plain surface: Orbit has no
+ * decorative gradients. */
+.wp-hero {
+  border-radius: var(--wp-radius-xl);
+  padding: 16px 20px;
+  display: flex; align-items: center; gap: 16px;
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border);
+}
+.wp-hero__icon {
+  width: 48px; height: 48px;
+  border-radius: min(12px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+  display: grid; place-items: center;
+  flex-shrink: 0;
+  color: var(--wp-accent-text);
+}
+.wp-hero__title { font-size: 17px; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; color: var(--wp-text); }
+.wp-hero__sub { font-size: 13px; color: var(--wp-text-muted); margin: 0; max-width: 640px; }
+
+/* ---------- Stat cards ---------- */
+.wp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+/* Page area narrower than 680px (usePageWidth; the chat can take the rest). */
+.wp-content[data-lt~="680"] .wp-stats { grid-template-columns: repeat(2, 1fr); }
+.wp-stat {
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+  padding: 12px 14px;
+  display: flex; flex-direction: column; gap: 4px;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+.wp-stat:is(button, a):hover,
+.wp-stat[role="button"]:hover {
+  transform: translateY(-2px);
+  border-color: var(--wp-border-strong);
+  box-shadow: var(--wp-shadow);
+}
+.wp-stat__label {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--wp-text-dim);
+  font-weight: 600;
+  display: flex; align-items: center; gap: 6px;
+}
+.wp-stat__value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
+.wp-stat__delta { font-size: 11px; color: var(--wp-text-dim); display: flex; align-items: center; gap: 4px; }
+.wp-stat__icon {
+  position: absolute; top: 10px; right: 10px;
+  width: 26px; height: 26px;
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  display: grid; place-items: center;
+  background: color-mix(in oklab, var(--wp-accent-500) 14%, transparent);
+  color: var(--wp-accent-text);
+  font-size: 13px;
+}
+
+/* ---------- List rows ---------- */
+.wp-list { display: flex; flex-direction: column; }
+.wp-list__row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 12px;
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  cursor: pointer;
+  transition: background .12s;
+}
+.wp-list__row:hover { background: var(--wp-bg-3); }
+.wp-list__row + .wp-list__row { border-top: 1px solid var(--wp-border); border-radius: 0; }
+
+/* ---------- Empty state ---------- */
+.wp-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--wp-text-muted);
+  gap: 10px;
+}
+.wp-empty__icon {
+  width: 56px; height: 56px;
+  border-radius: min(14px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  display: grid; place-items: center;
+  color: var(--wp-text-dim);
+  font-size: 22px;
+}
+
+/* `.wp-empty--card` (full-width dashed empty state) lived alongside the
+   community sub-screens. It moved to the feat/community-tab branch with
+   them; main has no remaining consumer. Re-introduce here when another
+   surface needs it. */
+
+/* Compact dashed-card empty placeholder used inside editor cards
+   (DerivationEditor rules list, ConstraintEditor matrix/exceptions,
+   PipelineSteps step list). Single-line muted text in a softly-bordered box. */
+.wp-empty-card {
+  border: 1px dashed var(--wp-border);
+  border-radius: var(--wp-radius);
+  padding: 18px;
+  text-align: center;
+  color: var(--wp-text-dim);
+  font-size: 12.5px;
+}
+/* A leading info/status icon (e.g. the matrix "needs a sub-category" hint or
+   the exceptions hint) sat flush against the message text. Give it breathing
+   room without restructuring the centered single-line layout. */
+.wp-empty-card .pi { margin-right: 6px; }
+
+/* Small muted hint text used above editor card content
+   (replaces dv-hint / cn-hint / pl-hint / wp-text-xs duplicates). */
+.wp-card__hint {
+  font-size: 11.5px;
+  color: var(--wp-text-dim);
+  margin: 0 0 8px 0;
+  line-height: 1.45;
+}
+
+/* Status icon colour modifiers — for Wildcards list validity icons and
+   similar inline status glyphs. Keeps inline color attributes pointing at
+   semantic tokens out of templates. */
+.wp-icon--success { color: var(--wp-success); }
+.wp-icon--warn    { color: var(--wp-warn); }
+.wp-icon--danger  { color: var(--wp-danger); }
+.wp-icon--info    { color: var(--wp-info); }
+
+/* Refresh-button affordance — spins the `pi-refresh` icon on the
+ * button it's attached to while a fetch is in flight. Defined in
+ * tokens.css (global) rather than per-component scoped styles so
+ * every list page that imports Button.vue can wear the modifier
+ * class without crossing :deep() boundaries. */
+.wp-refresh-btn--spin .pi-refresh {
+  animation: wp-refresh-spin 0.9s linear infinite;
+}
+@keyframes wp-refresh-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ---------- Sticky footer for editors ---------- */
+.wp-footer-bar {
+  position: sticky; bottom: 0;
+  margin-top: auto;
+  background: var(--wp-bg);
+  border-top: 1px solid var(--wp-border);
+  padding: 12px 0;
+  display: flex; justify-content: flex-end; gap: 8px;
+  z-index: 5;
+}
+.wp-footer-bar::before {
+  content: "";
+  position: absolute;
+  left: 0; right: 0; bottom: 100%;
+  height: 20px;
+  background: linear-gradient(180deg, transparent, var(--wp-bg));
+  pointer-events: none;
+}
+.wp-footer-bar__inner {
+  display: contents;
+}
+
+/* ---------- Toggle ----------
+   Toggle.vue wraps the shared WpSwitch; its look lives in
+   kit/WpSwitch.vue (one sheet for canvas + manager). */
+
+/* ---------- Checkbox ----------
+   Canonical geometry matches the wildcard pool's per-option box
+   (`.opt__check` in OptionRow.vue: 14px, 1.5px soft border, 3px radius, sunk
+   into `--wp-bg`). This is THE checkbox look for the whole app; the only
+   opt-outs are the custom toggle BUTTONS (internal flag, seed-lock).
+
+   Markup-agnostic on purpose: works for both the shared ui/Checkbox.vue
+   `<button data-checked>` and bare `<span role="checkbox" aria-checked>`
+   used inline in the size-sensitive embed tree (which avoids importing the
+   component to stay within the bundle budget). On-state fill stays at
+   accent-600 for the white-tick contrast audit. */
+.wp-check {
+  width: 14px; height: 14px;
+  /* A visible edge on the empty box: the hairline border tokens vanished on
+   * a dark row, so nobody saw that list rows can be selected. */
+  border: 1.5px solid color-mix(in srgb, var(--wp-text-dim) 70%, transparent);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg);
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; margin: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: transparent;
+  transition: background .12s, border-color .12s, color .12s;
+  line-height: 0;
+}
+.wp-check[data-checked="true"],
+.wp-check[aria-checked="true"] {
+  background: var(--wp-accent-600);
+  border-color: var(--wp-accent-500);
+  color: #fff; /* audit-exempt: white checkmark on accent-600 background ≥4.5:1 both themes */
+}
+/* Indeterminate (tri-state) — must look visually distinct from an empty box.
+   The base .wp-check sets color: transparent, so the dash SVG (stroke="currentColor")
+   would be invisible without flipping color here. Mirrors the checked-state fill so
+   a section-checkbox with a partial selection is unmistakably "some, not none, not all".
+   Visibility contract: see src/manager/components/ui/Checkbox.vue (indeterminate prop)
+   and src/manager/__tests__/ui/Checkbox.test.ts (data-indeterminate assertions). */
+.wp-check[data-indeterminate="true"] {
+  background: var(--wp-accent-600);
+  border-color: var(--wp-accent-500);
+  color: #fff; /* audit-exempt: white dash on accent-600 background ≥4.5:1 both themes */
+}
+.wp-check svg { width: 9px; height: 9px; display: block; pointer-events: none; }
+.wp-check:not(:disabled, [aria-disabled="true"], [data-checked="true"], [aria-checked="true"], [data-indeterminate="true"]):hover {
+  border-color: var(--wp-accent-500);
+}
+/* Disabled: grey, not dim purple, so a ticked disabled box no longer reads
+ * as a live one in dark mode. */
+.wp-check:disabled,
+.wp-check[aria-disabled="true"] {
+  cursor: not-allowed;
+  background: var(--wp-bg-3);
+  border-color: var(--wp-border);
+  opacity: 0.6;
+}
+.wp-check:disabled[data-checked="true"],
+.wp-check:disabled[data-indeterminate="true"],
+.wp-check[aria-disabled="true"][aria-checked="true"] {
+  background: var(--wp-text-dim);
+  border-color: var(--wp-text-dim);
+  color: var(--wp-bg-1);
+}
+.wp-checkbox.is-disabled { cursor: not-allowed; }
+.wp-checkbox.is-disabled .wp-checkbox__label { opacity: 0.5; }
+.wp-check:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+
+/* Inline checkbox wrapper (label + box) — min-height fills canonical hit-target. */
+.wp-checkbox {
+  display: inline-flex; align-items: center; gap: 8px;
+  min-height: var(--wp-input-h);
+  cursor: pointer;
+  user-select: none;
+  font-size: 12.5px;
+  color: var(--wp-text);
+}
+/* Box-only checkbox inside a row or a <label> that already gives the hit
+   target (AI result lists, file lists): no 32px min-height, so it sits on
+   the row's text line. */
+.wp-checkbox--inline { min-height: 0; flex: none; }
+/* Field checkbox (`<Checkbox field>`): an input-height box in a form grid.
+   The label fills the box so a click anywhere toggles once (the label
+   toggles, the box toggles, nothing else does). */
+.wp-checkbox--field {
+  display: flex;
+  width: 100%;
+  height: var(--wp-input-h);
+  gap: 0;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  transition: border-color .12s;
+}
+.wp-checkbox--field:hover { border-color: var(--wp-border-strong); }
+.wp-checkbox--field:focus-within { border-color: var(--wp-accent-500); }
+.wp-checkbox--field .wp-check { margin-left: 10px; }
+.wp-checkbox--field .wp-checkbox__label {
+  flex: 1;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0 10px 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---------- Radio ----------
+   Native <input type="radio" class="wp-radio"> drawn to match .wp-check:
+   same 14px box, soft border and accent-600 fill, round. Stays a real
+   radio so name-grouping, arrow keys and v-model keep working. */
+.wp-radio {
+  appearance: none; -webkit-appearance: none;
+  width: 14px; height: 14px; margin: 0; flex-shrink: 0;
+  border: 1.5px solid var(--wp-border-strong);
+  border-radius: 50%; /* round: a radio is round in every look */
+  background: var(--wp-bg);
+  display: inline-grid; place-items: center;
+  cursor: pointer;
+  transition: background .12s, border-color .12s;
+}
+.wp-radio::before {
+  content: ""; width: 6px; height: 6px; border-radius: 50%; /* round: radio dot */
+  background: #fff; /* audit-exempt: white dot on accent-600 fill ≥4.5:1 both themes */
+  transform: scale(0); transition: transform .12s;
+}
+.wp-radio:checked { background: var(--wp-accent-600); border-color: var(--wp-accent-500); }
+.wp-radio:checked::before { transform: scale(1); }
+.wp-radio:disabled { opacity: 0.6; cursor: not-allowed; background: var(--wp-bg-3); border-color: var(--wp-border); }
+.wp-radio:disabled:checked { background: var(--wp-text-dim); border-color: var(--wp-text-dim); }
+.wp-radio:disabled:checked::before { background: var(--wp-bg-1); }
+label:has(> .wp-radio:disabled) { cursor: not-allowed; color: var(--wp-text-dim); }
+.wp-radio:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-checkbox__label { color: var(--wp-text); }
+
+/* ---------- Star (favorite) ---------- */
+.wp-star { color: var(--wp-text-dim); cursor: pointer; transition: color .12s, transform .1s; background: none; border: none; padding: 4px; line-height: 0; }
+.wp-star:hover { color: var(--wp-warn); }
+.wp-star[data-on="true"] { color: var(--wp-warn); }
+
+/* ---------- Tabs ---------- */
+.wp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--wp-border); }
+.wp-tab {
+  padding: 8px 12px;
+  background: none; border: none;
+  color: var(--wp-text-muted);
+  font-size: 12.5px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  display: inline-flex; align-items: center; gap: 6px;
+  font-weight: 500;
+}
+.wp-tab:hover { color: var(--wp-text); }
+.wp-tab[data-active="true"] { color: var(--wp-text); border-bottom-color: var(--wp-accent-400); }
+
+/* ---------- Code-ish snippet display ---------- */
+.wp-snippet {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  padding: 8px 10px;
+  color: var(--wp-text);
+  line-height: 1.6;
+}
+.wp-token-var { color: var(--wp-accent-text); }
+.wp-token-str { color: var(--wp-rt-token-good); }   /* green; --wp-rt-token-good flips in light */
+.wp-token-key { color: var(--wp-kind-derivation); } /* amber; --wp-kind-derivation flips in light */
+.wp-token-com { color: var(--wp-text-dim); }
+
+/* ---------- Toast ---------- */
+.wp-toast-stack {
+  position: fixed; right: 16px; bottom: 16px;
+  display: flex; flex-direction: column; gap: 8px;
+  z-index: 100;
+  pointer-events: none;
+}
+/* The toast itself is kit/ToastCard.vue (shared with the canvas). */
+.wp-toast-stack > * { animation: wp-slide-in .18s ease-out; }
+@keyframes wp-slide-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+/* ---------- Misc utility ---------- */
+.wp-hsplit { display: flex; align-items: center; gap: 8px; }
+.wp-spacer { flex: 1; }
+.wp-mono { font-family: var(--wp-font-mono); }
+.wp-muted { color: var(--wp-text-muted); }
+.wp-dim { color: var(--wp-text-dim); }
+.wp-divider { height: 1px; background: var(--wp-border); margin: 4px 0; }
+
+/* ---------- Token autocomplete popup ---------- */
+.wp-autocomplete {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0; right: 0;
+  z-index: 50;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  box-shadow: var(--wp-shadow-md);
+  overflow: hidden;
+  max-height: 280px;
+  display: flex; flex-direction: column;
+  animation: wp-fade-in .1s ease-out;
+}
+.wp-autocomplete[data-flip] {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+.wp-autocomplete__head {
+  display: flex; align-items: center;
+  padding: 6px 10px;
+  font-size: 11px;
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-dim);
+}
+.wp-autocomplete__item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 7px 10px;
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  color: var(--wp-text);
+  font-size: 12.5px;
+  font-family: var(--wp-font-mono);
+}
+.wp-autocomplete__item[data-active="true"] {
+  background: color-mix(in oklab, var(--wp-accent-600) 22%, transparent);
+}
+.wp-autocomplete__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-autocomplete__hint { font-size: 11px; color: var(--wp-text-dim); font-family: var(--wp-font); }
+
+/* ---------- Custom select popup ---------- */
+.wp-select-wrap { position: relative; display: inline-block; width: 100%; }
+
+/* Menu teleported to <body>; position/top/left provided via inline style from JS. */
+.wp-select__menu {
+  background: var(--wp-bg-3);
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  box-shadow: var(--wp-shadow-md);
+  z-index: 9999;
+  padding: 4px;
+  max-height: 240px;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+}
+.wp-select__option {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 8px;
+  border-radius: min(6px, var(--wp-radius-cap, 999px));
+  color: var(--wp-text-muted);
+  cursor: pointer;
+  font-size: 12.5px;
+  user-select: none;
+}
+.wp-select__option:hover {
+  background: var(--wp-bg-4);
+  color: var(--wp-text);
+}
+.wp-select__option[data-active="true"] {
+  background: rgba(99, 102, 241, 0.20);
+  background: color-mix(in oklab, var(--wp-accent-500) 20%, transparent);
+  color: var(--wp-text);
+}
+.wp-select__option[data-selected="true"] {
+  background: rgba(99, 102, 241, 0.18);
+  background: color-mix(in oklab, var(--wp-accent-500) 18%, transparent);
+  color: var(--wp-text);
+}
+/* Dot + label wrapper inside trigger button */
+.wp-select__label-wrap {
+  display: flex; align-items: center; gap: 6px;
+  flex: 1; min-width: 0; overflow: hidden;
+}
+/* Color dot — rendered in both trigger and option list */
+.wp-select__dot {
+  width: 8px; height: 8px;
+  border-radius: 50%; /* round: colour dot */
+  flex-shrink: 0;
+  display: inline-block;
+}
+/* Label text inside trigger — must be a flex item (not inline) for ellipsis to work */
+.wp-select__label-text,
+.wp-select__placeholder {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* Option label text — no truncation; menu grows to fit widest option */
+.wp-select__option-label {
+  flex: 1;
+  white-space: nowrap;
+}
+.wp-select__placeholder { color: var(--wp-text-dim); }
+.wp-select__chevron { color: var(--wp-text-dim); font-size: 11px; margin-left: 6px; flex-shrink: 0; }
+
+/* ---------- Color picker (categories) ---------- */
+.wp-color-picker {
+  display: inline-flex; align-items: center; gap: 8px;
+}
+.wp-color-picker__swatch {
+  position: relative;
+  width: var(--wp-input-h); height: var(--wp-input-h);
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  border: 1px solid var(--wp-border);
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: inline-grid; place-items: center;
+}
+.wp-color-picker__swatch input[type="color"] {
+  position: absolute; inset: -2px;
+  width: calc(100% + 4px); height: calc(100% + 4px);
+  border: none; padding: 0; background: transparent;
+  cursor: pointer; opacity: 0;
+}
+.wp-color-picker__palette {
+  display: inline-flex; gap: 4px;
+}
+.wp-color-picker__chip {
+  width: 22px; height: 22px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  border: 1px solid var(--wp-border);
+  cursor: pointer; padding: 0;
+  transition: transform .08s, box-shadow .12s;
+}
+.wp-color-picker__chip:hover { transform: scale(1.08); }
+.wp-color-picker__chip[data-active="true"] {
+  box-shadow: 0 0 0 2px var(--wp-bg-1), 0 0 0 4px var(--wp-accent-500);
+}
+
+/* ---------- Constraint rule matrix ---------- */
+.wp-matrix {
+  border-collapse: separate; border-spacing: 4px;
+  font-size: 12px;
+}
+.wp-matrix__corner {
+  padding: 0 8px; text-align: left;
+  color: var(--wp-text-dim);
+  font-weight: 500; font-size: 10.5px;
+  text-transform: uppercase; letter-spacing: .05em;
+  display: flex; flex-direction: column; gap: 2px;
+}
+.wp-matrix__col-h {
+  padding: 0 8px; color: var(--wp-text-muted);
+  font-weight: 500; white-space: nowrap;
+}
+.wp-matrix__row-h {
+  padding: 0 8px; color: var(--wp-text-muted);
+  white-space: nowrap; text-align: left;
+}
+.wp-matrix-cell {
+  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
+  min-width: 56px; height: 30px; padding: 0 8px;
+  border-radius: min(6px, var(--wp-radius-cap, 999px)); cursor: pointer;
+  border: 1px solid var(--wp-border);
+  font-family: var(--wp-font);
+  transition: background .12s, border-color .12s, transform .04s;
+}
+.wp-matrix-cell:hover { transform: translateY(-1px); }
+.wp-matrix-cell[data-mode="allow"] { min-width: 36px; padding: 0 6px; }
+.wp-matrix-cell[data-mode="exclude"] { min-width: 36px; padding: 0 6px; }
+.wp-matrix-cell__icon { font-size: 14px; font-weight: 600; line-height: 1; }
+.wp-matrix-cell__factor {
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px; font-weight: 500;
+  opacity: 0.85;
+}
+.wp-matrix-cell__tune {
+  position: absolute; top: -6px; right: -6px;
+  width: 18px; height: 18px;
+  border-radius: min(50%, var(--wp-radius-cap, 999px));
+  display: grid; place-items: center;
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border-strong);
+  color: var(--wp-text-muted);
+  cursor: pointer; padding: 0;
+  font-size: 9px;
+  box-shadow: var(--wp-shadow-sm);
+  transition: color .12s, border-color .12s, background .12s;
+}
+.wp-matrix-cell__tune:hover {
+  color: var(--wp-accent-text);
+  border-color: var(--wp-accent-500);
+  background: var(--wp-bg-2);
+}
+
+/* ---------- Tune popover (matrix factor fine-tune) ---------- */
+.wp-tune-pop {
+  z-index: 200;
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(10px, var(--wp-radius-cap, 999px));
+  padding: 10px 12px;
+  box-shadow: var(--wp-shadow-md, 0 12px 28px rgba(0,0,0,.35));
+  display: flex; flex-direction: column; gap: 8px;
+}
+.wp-matrix-cell-wrap {
+  position: relative;
+  display: inline-block;
+}
+.wp-tune-pop__head {
+  display: flex; justify-content: space-between; align-items: center;
+}
+.wp-tune-pop__row {
+  display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: center;
+}
+.wp-tune-pop__presets {
+  display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
+}
+.wp-chip-btn {
+  padding: 3px 7px;
+  border-radius: var(--wp-radius-cap, 999px);
+  border: 1px solid var(--wp-border);
+  background: var(--wp-bg-2);
+  color: var(--wp-text-muted);
+  font-size: 10.5px;
+  font-family: var(--wp-font-mono);
+  cursor: pointer;
+  transition: background .12s, color .12s, border-color .12s;
+}
+.wp-chip-btn:hover { background: var(--wp-bg-3); color: var(--wp-text); }
+.wp-chip-btn[data-active="true"] {
+  background: color-mix(in oklab, var(--wp-accent-500) 18%, transparent);
+  color: var(--wp-accent-text-strong);
+  border-color: color-mix(in oklab, var(--wp-accent-500) 40%, transparent);
+}
+
+/* native range styled to match */
+.wp-range {
+  width: 100%;
+  -webkit-appearance: none; appearance: none;
+  height: 4px;
+  background: var(--wp-bg-3);
+  border-radius: var(--wp-radius-cap, 999px);
+  outline: none;
+  cursor: pointer;
+  margin: 6px 0;
+}
+.wp-range::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 14px; height: 14px;
+  border-radius: min(50%, var(--wp-radius-cap, 999px));
+  background: var(--wp-accent-500);
+  border: 2px solid var(--wp-bg-1);
+  cursor: pointer;
+  box-shadow: 0 0 0 1px var(--wp-accent-600);
+}
+.wp-range::-moz-range-thumb {
+  width: 14px; height: 14px;
+  border-radius: min(50%, var(--wp-radius-cap, 999px));
+  background: var(--wp-accent-500);
+  border: 2px solid var(--wp-bg-1);
+  cursor: pointer;
+  box-shadow: 0 0 0 1px var(--wp-accent-600);
+}
+
+/* ---------- Rich text input (syntax-highlighted overlay) ---------- */
+.wp-rt {
+  position: relative;
+  width: 100%;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  transition: border-color .12s, background .12s, box-shadow .12s;
+  overflow: hidden;
+}
+.wp-rt[data-focused] {
+  border-color: var(--wp-accent-500);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp-accent-500) 25%, transparent);
+  background: var(--wp-bg-1);
+}
+
+/* Mirror layer — renders styled tokens behind the textarea. Two visual modes
+   driven by parent class:
+     --editing : while textarea is focused. Chips are zero-width visual
+                 decorations (no padding/margin/border) so mirror text width
+                 matches the textarea text width exactly and the caret tracks.
+     --rest    : when textarea is blurred. Chips get a hair of horizontal
+                 padding so they read as proper pills at a glance. */
+.wp-rt__mirror {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0 10px;
+  font-size: 12.5px;
+  line-height: var(--wp-input-h);
+  color: var(--wp-text);
+  white-space: pre;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  letter-spacing: 0;
+}
+.wp-rt__mirror--multi {
+  padding: 8px 10px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Textarea/input layer — transparent text so the mirror shows through.
+   Caret stays visible (native blink, native colour). */
+.wp-rt__input {
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--wp-text);
+  font-size: 12.5px;
+  font-family: inherit;
+  letter-spacing: 0;
+  resize: none;
+}
+.wp-rt__input--single {
+  height: var(--wp-input-h);
+  padding: 0 10px;
+  line-height: var(--wp-input-h);
+}
+.wp-rt__input--multi {
+  padding: 8px 10px;
+  line-height: 1.5;
+  resize: vertical;
+  min-height: 72px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.wp-rt__input::selection { background: color-mix(in oklab, var(--wp-accent-500) 38%, transparent); color: transparent; }
+.wp-rt__input::placeholder { color: var(--wp-text-dim); }
+.wp-rt__tail { color: transparent; }
+
+/* Token spans — base appearance (width-neutral, suitable while editing) */
+.wp-rt-text { color: var(--wp-text); }
+.wp-rt-comment { color: var(--wp-text-dim); font-style: italic; }
+.wp-rt-escape { color: var(--wp-text-muted); opacity: 0.7; }
+
+/* `$var`: syntax-coloured text, no pill (the hover card carries the detail). */
+.wp-rt-var {
+  color: var(--wp-accent-text);
+  font-weight: 600;
+  pointer-events: auto;
+}
+.wp-rt-ref {
+  /* --wp-kind-ref = fuchsia-300 dark / fuchsia-800 light */
+  color: var(--wp-kind-ref);
+  background: var(--wp-kind-ref-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-kind-ref) 28%, transparent);
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  font-weight: 500;
+}
+/* dp = inline {a|b|c} derivation — matches --wp-kind-derivation (amber) */
+.wp-rt-dp-brace { color: var(--wp-kind-derivation); font-weight: 600; }
+.wp-rt-dp-pipe { color: var(--wp-kind-derivation); opacity: 0.65; }
+.wp-rt-dp-multi {
+  /* multi-candidate group — uses --wp-rt-token-good (green); light override below.
+     SP2b V2: colour only, NO background/box — kept in sync with the scoped rule
+     in manager/styles/rich-text.css (a stray background here was the source of a
+     leftover green box behind multi-pick blocks). */
+  color: var(--wp-rt-token-good);
+  font-weight: 500;
+}
+.wp-rt-dp-weight {
+  /* weight factor — uses --wp-rt-token-mut (orange); light override below */
+  color: var(--wp-rt-token-mut);
+  background: var(--wp-rt-token-mut-bg);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  font-weight: 500;
+}
+.wp-rt-quantifier {
+  /* quantifier — matches --wp-info (blue) */
+  color: var(--wp-info);
+  background: color-mix(in oklab, var(--wp-info) 14%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-info) 28%, transparent);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  font-weight: 500;
+}
+
+/* AT-REST: hair of horizontal padding so chips don't kiss their text. The
+   mirror's width can drift from the (hidden) textarea here — fine, the
+   textarea is invisible at rest. */
+.wp-rt__mirror--rest .wp-rt-var,
+.wp-rt__mirror--rest .wp-rt-ref,
+.wp-rt__mirror--rest .wp-rt-dp-multi,
+.wp-rt__mirror--rest .wp-rt-dp-weight,
+.wp-rt__mirror--rest .wp-rt-quantifier {
+  padding: 0 3px;
+  margin: 0 0.5px;
+}
+
+/* Inline preview span (used in Combine preview etc.) */
+.wp-rt__preview {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+}
+
+/* Token properties popover (for $var chips) */
+.wp-tokenprops {
+  position: fixed;
+  z-index: 200;
+  width: 320px;
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(10px, var(--wp-radius-cap, 999px));
+  box-shadow: var(--wp-shadow-md, 0 12px 28px rgba(0,0,0,.4));
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.wp-tokenprops__head {
+  display: flex; align-items: center; gap: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--wp-border);
+}
+.wp-tokenprops__name {
+  font-family: var(--wp-font-mono);
+  font-size: 13px;
+  color: var(--wp-accent-text);
+  font-weight: 500;
+}
+.wp-tokenprops__type {
+  margin-left: auto;
+  font-size: 10.5px;
+  color: var(--wp-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.wp-tokenprops__row {
+  display: grid;
+  grid-template-columns: 86px 1fr;
+  gap: 8px;
+  align-items: center;
+}
+.wp-tokenprops__label {
+  font-size: 11.5px;
+  color: var(--wp-text-muted);
+}
+.wp-tokenprops__output {
+  font-family: var(--wp-font-mono);
+  font-size: 11.5px;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: min(6px, var(--wp-radius-cap, 999px));
+  padding: 6px 8px;
+  color: var(--wp-text);
+  word-break: break-all;
+  line-height: 1.5;
+}
+.wp-tokenprops__legend {
+  font-size: 10.5px;
+  color: var(--wp-text-dim);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+
+/* ===================== PIPELINES ===================== */
+
+/* Stack of step rows in the pipeline editor */
+.wp-pl-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* `.wp-pl-empty` removed: PipelineSteps now uses the canonical
+   `.wp-empty-card` class for its empty placeholder. */
+
+/* ---------- Step row ---------- */
+.wp-pl-row {
+  display: grid;
+  grid-template-columns: 22px 22px 32px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  background: var(--wp-bg2);
+  border: 1px solid var(--wp-border);
+  border-left: 3px solid var(--step-color, var(--wp-accent-500));
+  border-radius: var(--wp-radius-md);
+  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, opacity 120ms ease;
+}
+.wp-pl-row:hover {
+  border-color: var(--wp-border-strong);
+  background: var(--wp-bg3);
+}
+.wp-pl-row[data-drag-over] {
+  border-top-color: var(--wp-accent-500);
+  box-shadow: 0 -2px 0 var(--wp-accent-500);
+}
+.wp-pl-row[data-disabled] { opacity: 0.5; }
+.wp-pl-row[data-disabled] .wp-pl-row__name select { text-decoration: line-through; }
+
+/* drag handle */
+.wp-pl-row__handle {
+  display: flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px;
+  color: var(--wp-text-dim);
+  cursor: grab;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  user-select: none;
+}
+.wp-pl-row__handle:hover { color: var(--wp-text); background: var(--wp-bg-hover); }
+.wp-pl-row__handle:active { cursor: grabbing; }
+
+/* enable/disable toggle */
+.wp-pl-row__toggle {
+  width: 22px; height: 22px;
+  display: flex; align-items: center; justify-content: center;
+  border: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  color: var(--wp-text-muted);
+  cursor: pointer;
+  padding: 0;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+.wp-pl-row__toggle:hover { background: var(--wp-bg-hover); color: var(--wp-text); border-color: var(--wp-border-strong); }
+
+/* kind icon (color tinted by --step-color) */
+.wp-pl-row__icon {
+  width: 32px; height: 32px;
+  border-radius: var(--wp-radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  background: color-mix(in oklab, var(--step-color, var(--wp-accent-500)) 16%, var(--wp-bg3));
+  color: var(--step-color, var(--wp-accent-300));
+  flex-shrink: 0;
+}
+
+/* main column */
+.wp-pl-row__main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.wp-pl-row__top {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--wp-text-muted);
+  font-weight: 500;
+}
+.wp-pl-row__kind { color: var(--step-color, var(--wp-text-muted)); }
+.wp-pl-row__index {
+  margin-left: auto;
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0;
+  padding: 1px 5px;
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg);
+  border: 1px solid var(--wp-border);
+  color: var(--wp-text-dim);
+}
+.wp-pl-row__name {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.wp-pl-row__sub {
+  font-size: 11.5px;
+  color: var(--wp-text-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* `.wp-pl-row__refselect` styles intentionally removed.
+   Earlier the pipeline ref-select was a native <select> styled here
+   to look like inline text. We now route through the shared `Select`
+   component (see `components/ui/Select.vue`), which already brings
+   its own height (`--wp-input-h-sm`, 24px at Comfortable) + chevron + focus ring.
+   The leftover `height: 26px; overflow: hidden` rule was clipping the
+   new trigger by ~2px at the bottom, which read as a "cut" border on
+   the pipeline row. The scoped block in PipelineSteps.vue keeps the
+   only two rules still needed (`flex: 1; min-width: 0`). */
+
+/* row actions */
+.wp-pl-row__actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.wp-pl-row__act {
+  width: 26px; height: 26px;
+  display: flex; align-items: center; justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  color: var(--wp-text-muted);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+.wp-pl-row__act:hover {
+  background: var(--wp-bg-hover);
+  color: var(--wp-text);
+  border-color: var(--wp-border);
+}
+.wp-pl-row__act--danger:hover {
+  background: color-mix(in oklab, var(--wp-danger) 16%, transparent);
+  color: var(--wp-danger-text);
+  border-color: color-mix(in oklab, var(--wp-danger) 30%, transparent);
+}
+
+/* add-step button */
+.wp-pl-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  width: 100%;
+  border: 1px dashed var(--wp-border-strong);
+  border-radius: var(--wp-radius-md);
+  background: transparent;
+  color: var(--wp-text-muted);
+  font-size: 12.5px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  margin-top: 4px;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.wp-pl-add:hover {
+  border-style: solid;
+  border-color: var(--wp-accent-500);
+  color: var(--wp-accent-text);
+  background: color-mix(in oklab, var(--wp-accent-500) 7%, transparent);
+}
+.wp-pl-add .pi { font-size: 11px; }
+
+/* ---------- Module picker tabs ---------- */
+.wp-pl-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: var(--wp-bg2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.wp-pl-tab:hover {
+  background: var(--wp-bg3);
+  color: var(--wp-text);
+  border-color: var(--wp-border-strong);
+}
+.wp-pl-tab[data-active] {
+  background: color-mix(in oklab, var(--tab-color, var(--wp-accent-500)) 14%, var(--wp-bg2));
+  border-color: color-mix(in oklab, var(--tab-color, var(--wp-accent-500)) 50%, transparent);
+  color: var(--tab-color, var(--wp-accent-text));
+}
+.wp-pl-tab__count {
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  padding: 0 5px;
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg);
+  border: 1px solid var(--wp-border);
+  color: var(--wp-text-dim);
+  min-width: 18px;
+  text-align: center;
+}
+
+/* picker rows */
+.wp-pl-pickrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  background: var(--wp-bg2);
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  font-size: 13px;
+  color: var(--wp-text);
+  transition: background 120ms ease;
+}
+.wp-pl-pickrow:hover {
+  background: var(--wp-bg3);
+}
+.wp-pl-pickrow__icon {
+  width: 28px; height: 28px;
+  border-radius: var(--wp-radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ---------- Resolution preview flow ---------- */
+.wp-pl-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.wp-pl-flow__step {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  background: var(--wp-bg);
+  border: 1px solid var(--wp-border);
+  border-left: 3px solid var(--step-color, var(--wp-accent-500));
+  border-radius: var(--wp-radius-md);
+  position: relative;
+}
+.wp-pl-flow__step + .wp-pl-flow__step::before {
+  content: "";
+  position: absolute;
+  top: -5px;
+  left: 18px;
+  width: 1px;
+  height: 6px;
+  background: var(--wp-border-strong);
+}
+.wp-pl-flow__head {
+  display: flex; align-items: center; gap: 8px;
+  color: var(--wp-text);
+}
+.wp-pl-flow__idx {
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  padding: 1px 5px;
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg2);
+  border: 1px solid var(--wp-border);
+  color: var(--wp-text-dim);
+}
+.wp-pl-flow__adds {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-left: 30px;
+}
+.wp-pl-flow__binding {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.wp-pl-flow__binding > span:last-child {
+  color: var(--wp-text);
+  word-break: break-word;
+}
+
+/* ---------- Modal (simple, used by picker) ---------- */
+.wp-modal__backdrop,
+.wp-modal-backdrop {
+  position: fixed; inset: 0;
+  background: var(--wp-overlay-bg, rgba(0,0,0,0.55));
+  backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+  animation: wp-modal-fade 120ms ease;
+}
+@keyframes wp-modal-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.wp-theme-light .wp-modal-backdrop,
+.wp-theme-light .wp-modal__backdrop {
+  background: rgba(15, 15, 30, 0.45);
+}
+.wp-modal {
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+  box-shadow: var(--wp-shadow-xl, 0 20px 60px rgba(0,0,0,0.5));
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: wp-modal-pop 160ms cubic-bezier(.2,.7,.3,1.2);
+}
+/* The dialog takes focus only when nothing in it can (see Modal.vue). */
+.wp-modal:focus { outline: none; }
+.wp-modal--sm { max-width: 360px; }
+.wp-modal--md { max-width: 560px; }
+.wp-modal--lg { max-width: 880px; }
+@keyframes wp-modal-pop {
+  from { opacity: 0; transform: translateY(8px) scale(.98); }
+  to   { opacity: 1; transform: translateY(0)  scale(1); }
+}
+.wp-modal__head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+}
+.wp-modal__title { font-size: 14px; font-weight: 600; margin: 0; flex: 1; }
+.wp-modal__body {
+  padding: 12px 14px;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+.wp-modal__foot {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+}
+
+
+/* ---------- Picker modal sizing & layout ---------- */
+.wp-modal--picker {
+  width: 560px;
+  max-width: 100%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.wp-pl-picker__body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+
+/* tabs row — wraps on narrow widths instead of forcing horizontal scroll */
+.wp-pl-picker__tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.wp-pl-tab {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.wp-pl-tab__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+/* picker list */
+.wp-pl-picker__list {
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid var(--wp-border);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg);
+  flex: 1;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+.wp-pl-pickrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  background: var(--wp-bg2);
+  border: none;
+  border-bottom: 1px solid var(--wp-border);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  font-size: 13px;
+  color: var(--wp-text);
+  transition: background 120ms ease;
+  min-width: 0;
+}
+.wp-pl-pickrow:last-child { border-bottom: none; }
+.wp-pl-pickrow:hover { background: var(--wp-bg3); }
+.wp-pl-pickrow__icon {
+  width: 28px; height: 28px;
+  border-radius: var(--wp-radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.wp-pl-pickrow__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  overflow: hidden;
+}
+.wp-pl-pickrow__name {
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--wp-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wp-pl-pickrow__id {
+  font-size: 11px;
+  font-family: var(--wp-font-mono);
+  color: var(--wp-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* shrink modal padding on narrow viewports */
+@media (max-width: 640px) {
+  .wp-modal-backdrop { padding: 12px; }
+  .wp-modal__head, .wp-modal__body, .wp-modal__foot {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+
+/* In picker modal, give the search bar a bit more breathing room. */
+.wp-pl-picker__body .wp-input-group {
+  flex-shrink: 0;
+  height: 38px;
+  min-height: 38px;
+}
+.wp-pl-picker__body .wp-pl-picker__tabs { flex-shrink: 0; }
+
+/* ---------- Module-kind palette (icon + bg pairs) ----------
+   Source: docs/design-handoff/wildcard-pipeline/project/data.jsx KIND_META.
+   Dark-theme values (bright, high-chroma) — all pass WCAG AA on dark surfaces.
+   Light-theme overrides in .wp-theme-light below use darker shades so the
+   same tokens pass AA on white/near-white surfaces and as chip text on 22% tint. */
+:root {
+  --wp-kind-wildcard:        #a78bfa;                       /* violet */
+  --wp-kind-wildcard-bg:     rgba(167, 139, 250, 0.12);
+  --wp-kind-fixed:           #22d3ee;                       /* cyan */
+  --wp-kind-fixed-bg:        rgba(34, 211, 238, 0.12);
+  --wp-kind-combine:         #34d399;                       /* green */
+  --wp-kind-combine-bg:      rgba(52, 211, 153, 0.12);
+  --wp-kind-derivation:      #fbbf24;                       /* amber */
+  --wp-kind-derivation-bg:   rgba(251, 191, 36, 0.12);
+  --wp-kind-constraint:      #f472b6;                       /* pink */
+  --wp-kind-constraint-bg:   rgba(244, 114, 182, 0.12);
+}
+
+/* ---------- Accent presets (data-accent on :root) ---------- */
+:root[data-accent="indigo"] {
+  --wp-accent-50:  #eef2ff;
+  --wp-accent-100: #e0e7ff;
+  --wp-accent-200: #c7d2fe;
+  --wp-accent-300: #a5b4fc;
+  --wp-accent-400: #818cf8;
+  --wp-accent-500: #6366f1;
+  --wp-accent-600: #4f46e5;
+  --wp-accent-700: #4338ca;
+  --wp-accent-800: #3730a3;
+  --wp-accent-900: #312e81;
+}
+:root[data-accent="teal"] {
+  --wp-accent-50:  #f0fdfa;
+  --wp-accent-100: #ccfbf1;
+  --wp-accent-200: #99f6e4;
+  --wp-accent-300: #5eead4;
+  --wp-accent-400: #2dd4bf;
+  --wp-accent-500: #14b8a6;
+  --wp-accent-600: #0d9488;
+  --wp-accent-700: #0f766e;
+  --wp-accent-800: #115e59;
+  --wp-accent-900: #134e4a;
+}
+:root[data-accent="rose"] {
+  --wp-accent-50:  #fff1f2;
+  --wp-accent-100: #ffe4e6;
+  --wp-accent-200: #fecdd3;
+  --wp-accent-300: #fda4af;
+  --wp-accent-400: #fb7185;
+  --wp-accent-500: #f43f5e;
+  --wp-accent-600: #e11d48;
+  --wp-accent-700: #be123c;
+  --wp-accent-800: #9f1239;
+  --wp-accent-900: #881337;
+}
+:root[data-accent="amber"] {
+  --wp-accent-50:  #fffbeb;
+  --wp-accent-100: #fef3c7;
+  --wp-accent-200: #fde68a;
+  --wp-accent-300: #fcd34d;
+  --wp-accent-400: #fbbf24;
+  --wp-accent-500: #f59e0b;
+  --wp-accent-600: #d97706;
+  --wp-accent-700: #b45309;
+  --wp-accent-800: #92400e;
+  --wp-accent-900: #78350f;
+}
+
+/* Density — applied to <html> by uiStore.setDensity(). Comfortable is the
+ * default (--wp-density: 1 in :root). Control heights and spacing scale
+ * through it; the store writes no heights inline. */
+html.wp-density-compact {
+  --wp-density: 0.85;
+}
+html.wp-density-cozy {
+  --wp-density: 1.12;
+}
+
+/* Motion — Settings › Appearance. "Reduce" stops animations and transitions
+ * whatever the OS says; "Auto" leaves the prefers-reduced-motion rules above
+ * in charge. */
+html.wp-reduce-motion *,
+html.wp-reduce-motion *::before,
+html.wp-reduce-motion *::after {
+  animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.001ms !important;
+  scroll-behavior: auto !important;
+}
+
+/* ---------- Brand gradient utility ---------- */
+:root {
+  --wp-brand-gradient: linear-gradient(135deg, var(--wp-brand-1), var(--wp-brand-2), var(--wp-brand-3));
+}
+
+/* ---------- Color-scheme hint ----------
+ * The app applies `wp-dark` / `wp-theme-light` classes on <html> from
+ * stores/uiStore.ts. Mark the dark scope explicitly so form controls (date
+ * pickers, scrollbars) respect the theme. */
+html.wp-dark {
+  color-scheme: dark;
+}
+
+/* ---------- Legacy compatibility aliases ----------
+ * Existing .vue components reference an older flat set of token names
+ * (--wp-bg2, --wp-text2, --wp-accent, etc.). Map them to the new tokens
+ * so the screen-by-screen port can roll out without a flag-day rewrite. */
+:root {
+  /* Surfaces */
+  --wp-bg2: var(--wp-bg-2);
+  --wp-bg3: var(--wp-bg-3);
+  --wp-bg4: var(--wp-bg-4);
+
+  /* Text tiers */
+  --wp-text2: var(--wp-text-muted);
+  --wp-text3: var(--wp-text-dim);
+  --wp-text4: var(--wp-text-dim);
+
+  /* Borders */
+  --wp-border2: var(--wp-border-strong);
+
+  /* Accent — old flat aliases */
+  --wp-accent:      var(--wp-accent-500);
+  --wp-accent2:     var(--wp-accent-400);
+  --wp-accent-glow: rgba(99, 102, 241, 0.15);
+
+  /* Bundle default color — used by bundle kind icon/badge when no user
+   * color is set. Slate signals "container/structural" vs the kind
+   * palette which signals "module type". Distinct from accent purple
+   * + every kind color; works on dark + light surfaces. */
+  --wp-bundle-default: #64748b;         /* slate-500 — light override → #334155 (slate-700) */
+
+  /* Module-kind aliases (legacy single-color tokens) */
+  --wp-violet:    var(--wp-kind-wildcard);
+  --wp-violet-bg: var(--wp-kind-wildcard-bg);
+  --wp-teal:      var(--wp-kind-fixed);
+  --wp-teal-bg:   var(--wp-kind-fixed-bg);
+  --wp-green:     var(--wp-kind-combine);
+  --wp-green-bg:  var(--wp-kind-combine-bg);
+  --wp-amber:     var(--wp-kind-derivation);
+  --wp-amber-bg:  var(--wp-kind-derivation-bg);
+  --wp-rose:      var(--wp-kind-constraint);
+  --wp-rose-bg:   var(--wp-kind-constraint-bg);
+  --wp-red:       var(--wp-danger);
+  --wp-red-bg:    rgba(239, 68, 68, 0.12);
+
+  /* Type alias */
+  --wp-font-sans: var(--wp-font);
+}
+
+/* ---------- Route transition (RouterView fade) ---------- */
+.route-fade-enter-active,
+.route-fade-leave-active {
+  transition: opacity 0.16s ease, transform 0.16s ease;
+}
+.route-fade-enter-from { opacity: 0; transform: translateY(4px); }
+.route-fade-leave-to   { opacity: 0; transform: translateY(-4px); }
+
+/* ---------- Toast slide-in (already used by ToastHost) ---------- */
+@keyframes wp-toast-in {
+  from { opacity: 0; transform: translateX(12px); }
+  to   { opacity: 1; transform: translateX(0); }
+}