@goplasmatic/datalogic-ui 5.0.0 → 5.1.0

package/dist/styles.css

@@ -1,113 +1,175 @@
 /*
- * DataLogic UI - Scoped Theme Variables
+ * DataLogic UI — "Signal Board" theme tokens
+ * ============================================================
+ * Every design decision in this component is expressed as a CSS custom
+ * property, all scoped to `.logic-editor` so nothing leaks into the host app.
  *
- * All variables are scoped to .logic-editor to avoid leaking into consumer apps.
- * The library component applies this class to its root element.
+ * OVERRIDING FROM A CONSUMER APP
+ * ------------------------------
+ * Import the stylesheet once, then redefine any token with equal-or-greater
+ * specificity. Two supported patterns:
+ *
+ *   1. Re-tune the whole component:
+ *        .logic-editor { --sig-number: #0ea5e9; --board: #f7f7f8; }
+ *        .logic-editor[data-theme="dark"] { --board: #0b0b0f; }
+ *
+ *   2. Scope an override to one instance (pass className to DataLogicEditor):
+ *        .my-editor.logic-editor { --accent: #db2777; }
+ *
+ * The SIGNAL palette (`--sig-*`) is the primary colour axis: a node is
+ * coloured by the *type of value it produces*. The neutral board tokens
+ * (`--board`, `--ink`, `--hairline`) set the calm substrate everything sits on.
+ * Legacy aliases (`--bg-primary`, `--node-bg`, `--syntax-*`, `--debug-*`) are
+ * kept and mapped onto the new system so existing consumer overrides keep working.
  */
 
 .logic-editor {
-  /* Light theme (default) — zinc-leaning neutrals */
-  --bg-primary: #fafafa;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #f6f6f7;
-  --bg-hover: #f0f0f1;
-  --bg-active: #e8e8ea;
-
-  --text-primary: #18181b;
-  --text-secondary: #3f3f46;
-  --text-tertiary: #71717a;
-  --text-muted: #a1a1aa;
-  --text-placeholder: #c4c4c7;
-
-  --border-primary: rgba(0, 0, 0, 0.10);
-  --border-secondary: rgba(0, 0, 0, 0.06);
-  --border-light: rgba(0, 0, 0, 0.04);
-
-  --accent-blue: #6366f1;
-  --accent-blue-light: #e0e7ff;
-  --accent-blue-hover: #4f46e5;
-
-  --accent-amber: #f59e0b;
-  --accent-amber-light: #fef3c7;
-
-  /* Status colors */
-  --success-bg: #ecfdf5;
-  --success-text: #047857;
-  --success-border: #a7f3d0;
-
-  --error-bg: #fef2f2;
-  --error-bg-light: #fff7f7;
-  --error-bg-lighter: #fffafa;
-  --error-text: #dc2626;
-  --error-border: #fecaca;
-
-  --warning-bg: #fffbeb;
-  --warning-text: #b45309;
-  --warning-border: #fde68a;
-
-  /* Syntax highlighting */
-  --syntax-key: #0550ae;
-  --syntax-string: #0a3069;
-  --syntax-number: #0550ae;
-  --syntax-boolean: #cf222e;
-  --syntax-null: #6e7781;
-  --syntax-bracket: #24292f;
-  --syntax-punctuation: #24292f;
-
-  /* Node colors */
-  --node-bg: #ffffff;
-  --node-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
-  --node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
-
-  /* Code background */
-  --code-bg: #f8f9fa;
-
-  /* Debug popover colors */
-  --debug-popover-bg: #ffffff;
-  --debug-popover-text: #1f2937;
-  --debug-popover-error-bg: #fef2f2;
-  --debug-popover-shadow: rgba(0, 0, 0, 0.15);
-  --debug-popover-value-bg: rgba(0, 0, 0, 0.05);
-  --debug-iteration-color: #b45309;
-  --debug-label-color: #6b7280;
-  --debug-border-color: rgba(0, 0, 0, 0.1);
-
-  /* Debug value type colors */
-  --debug-value-true: #059669;
-  --debug-value-false: #dc2626;
-  --debug-value-number: #2563eb;
-  --debug-value-string: #059669;
-  --debug-value-array: #7c3aed;
-  --debug-value-null: #6b7280;
-
-  /* Radius scale */
-  --radius-sm: 6px;
+  /* ---- Fonts ------------------------------------------------------ */
+  --font-ui: 'Space Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code',
+    'Consolas', monospace;
+
+  /* ---- Substrate — cool paper (light default) -------------------- */
+  --board: #eef1f5;
+  --board-grid: rgba(20, 40, 70, 0.05);
+  --surface: #ffffff;
+  --surface-2: #f6f8fb;
+  --chip: #ffffff;
+  --hairline: #d6dde6;
+  --hairline-2: #e6ebf1;
+
+  --ink: #0e1826;
+  --ink-2: #33475e;
+  --muted: #5b6a7d;
+  --faint: #9aa9ba; /* NON-TEXT only: idle wires, dot-grid, dashed slots */
+
+  /* ---- Structural accent — used ONLY for selection/root/focus ----- */
+  --accent: #4b56d6;
+  --accent-soft: #e7e9fb;
+  --accent-hover: #3a44c0;
+
+  /* ---- SIGNAL palette — colour = the value that flows OUT --------- */
+  --sig-bool-true: #1a7f37;
+  --sig-bool-false: #cf222e;
+  --sig-bool-rest: #57708a;
+  --sig-number: #0959c0;
+  --sig-string: #8a5a00;
+  --sig-collection: #8250df;
+  --sig-data: #1b7c83;
+  --sig-temporal: #bf3989;
+  --sig-null: #6e7781;
+
+  --sig-bool-true-bg: rgba(26, 127, 55, 0.10);
+  --sig-bool-false-bg: rgba(207, 34, 46, 0.10);
+  --sig-number-bg: rgba(9, 105, 218, 0.10);
+  --sig-string-bg: rgba(154, 103, 0, 0.12);
+  --sig-collection-bg: rgba(130, 80, 223, 0.10);
+  --sig-data-bg: rgba(27, 124, 131, 0.10);
+  --sig-temporal-bg: rgba(191, 57, 137, 0.10);
+  --sig-null-bg: rgba(110, 119, 129, 0.10);
+
+  /* ---- Radius & spacing scales ----------------------------------- */
+  --radius-sm: 7px;
   --radius-md: 10px;
   --radius-lg: 14px;
 
-  /* Shadow elevation scale (layered: ambient + key) */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10);
+  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
+  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
+
+  /* ---- Elevation ------------------------------------------------- */
+  --shadow-sm: 0 1px 2px rgba(16, 30, 54, 0.05);
+  --shadow-md: 0 1px 2px rgba(16, 30, 54, 0.06), 0 2px 6px rgba(16, 30, 54, 0.06);
+  --shadow-lg: 0 8px 30px rgba(16, 30, 54, 0.14), 0 2px 8px rgba(16, 30, 54, 0.08);
 
-  /* Motion */
+  /* ---- Motion ---------------------------------------------------- */
   --motion-fast: 120ms;
   --motion-base: 180ms;
   --motion-slow: 260ms;
   --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Focus ring */
-  --focus-ring: 0 0 0 2px var(--accent-blue);
-
-  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  /* ============================================================
+     LEGACY ALIASES — mapped onto the Signal Board system so existing
+     consumer overrides (e.g. dataflow-rs redefines --node-bg / --node-shadow)
+     keep working. Prefer the tokens above for new overrides.
+     ============================================================ */
+  --bg-primary: var(--board);
+  --bg-secondary: var(--surface);
+  --bg-tertiary: var(--surface-2);
+  --bg-hover: var(--surface-2);
+  --bg-active: var(--hairline-2);
+
+  --text-primary: var(--ink);
+  --text-secondary: var(--ink-2);
+  --text-tertiary: var(--muted);
+  --text-muted: var(--muted);
+  --text-placeholder: var(--faint);
+
+  --border-primary: var(--hairline);
+  --border-secondary: var(--hairline-2);
+  --border-light: var(--hairline-2);
+
+  --accent-blue: var(--accent);
+  --accent-blue-light: var(--accent-soft);
+  --accent-blue-hover: var(--accent-hover);
+
+  --accent-amber: var(--sig-string);
+  --accent-amber-light: var(--sig-string-bg);
+
+  --success-bg: var(--sig-bool-true-bg);
+  --success-text: var(--sig-bool-true);
+  --success-border: color-mix(in srgb, var(--sig-bool-true) 30%, transparent);
+
+  --error-bg: var(--sig-bool-false-bg);
+  --error-bg-light: color-mix(in srgb, var(--sig-bool-false) 6%, var(--surface));
+  --error-bg-lighter: color-mix(in srgb, var(--sig-bool-false) 3%, var(--surface));
+  --error-text: var(--sig-bool-false);
+  --error-border: color-mix(in srgb, var(--sig-bool-false) 30%, transparent);
+
+  --warning-bg: var(--sig-string-bg);
+  --warning-text: var(--sig-string);
+  --warning-border: color-mix(in srgb, var(--sig-string) 30%, transparent);
+
+  --syntax-key: var(--sig-data);
+  --syntax-string: var(--sig-string);
+  --syntax-number: var(--sig-number);
+  --syntax-boolean: var(--sig-bool-false);
+  --syntax-null: var(--sig-null);
+  --syntax-bracket: var(--ink-2);
+  --syntax-punctuation: var(--muted);
+
+  --node-bg: var(--chip);
+  --node-shadow: var(--shadow-sm);
+  --node-shadow-hover: var(--shadow-md);
+
+  --code-bg: var(--surface-2);
+
+  --debug-popover-bg: var(--chip);
+  --debug-popover-text: var(--ink);
+  --debug-popover-error-bg: var(--sig-bool-false-bg);
+  --debug-popover-shadow: rgba(16, 30, 54, 0.15);
+  --debug-popover-value-bg: var(--surface-2);
+  --debug-iteration-color: var(--sig-collection);
+  --debug-label-color: var(--muted);
+  --debug-border-color: var(--hairline-2);
+
+  --debug-value-true: var(--sig-bool-true);
+  --debug-value-false: var(--sig-bool-false);
+  --debug-value-number: var(--sig-number);
+  --debug-value-string: var(--sig-string);
+  --debug-value-array: var(--sig-collection);
+  --debug-value-null: var(--sig-null);
+
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  font-family: var(--font-ui);
   line-height: 1.5;
   font-weight: 400;
-  color: var(--text-primary);
+  color: var(--ink);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'cv11', 'ss01';
 }
 
 .logic-editor *,
@@ -120,84 +182,51 @@
   font-family: inherit;
 }
 
+/* ============================================================
+   DARK — "lit logic board"
+   ============================================================ */
 .logic-editor[data-theme="dark"] {
-  --bg-primary: #0c0c0d;
-  --bg-secondary: #161618;
-  --bg-tertiary: #1c1c1f;
-  --bg-hover: #242427;
-  --bg-active: #2c2c30;
-
-  --text-primary: #fafafa;
-  --text-secondary: #d4d4d8;
-  --text-tertiary: #a1a1aa;
-  --text-muted: #71717a;
-  --text-placeholder: #52525b;
-
-  --border-primary: rgba(255, 255, 255, 0.10);
-  --border-secondary: rgba(255, 255, 255, 0.06);
-  --border-light: rgba(255, 255, 255, 0.04);
-
-  --accent-blue: #818cf8;
-  --accent-blue-light: #1e1b4b;
-  --accent-blue-hover: #a5b4fc;
-
-  --accent-amber: #fbbf24;
-  --accent-amber-light: #422006;
-
-  /* Status colors - darker variants */
-  --success-bg: #052e1c;
-  --success-text: #6ee7b7;
-  --success-border: #065f46;
-
-  --error-bg: #2c0a0c;
-  --error-bg-light: #240a0c;
-  --error-bg-lighter: #1a0a0c;
-  --error-text: #fca5a5;
-  --error-border: #7f1d1d;
-
-  --warning-bg: #2a1c05;
-  --warning-text: #fcd34d;
-  --warning-border: #78350f;
-
-  /* Syntax highlighting - dark theme */
-  --syntax-key: #79c0ff;
-  --syntax-string: #a5d6ff;
-  --syntax-number: #79c0ff;
-  --syntax-boolean: #ff7b72;
-  --syntax-null: #8b949e;
-  --syntax-bracket: #c9d1d9;
-  --syntax-punctuation: #c9d1d9;
-
-  /* Node colors */
-  --node-bg: #18181b;
-  --node-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
-  --node-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
-
-  /* Code background */
-  --code-bg: #1f1f1f;
-
-  /* Debug popover colors */
-  --debug-popover-bg: #1f2937;
-  --debug-popover-text: #f3f4f6;
-  --debug-popover-error-bg: #7f1d1d;
-  --debug-popover-shadow: rgba(0, 0, 0, 0.4);
-  --debug-popover-value-bg: rgba(0, 0, 0, 0.2);
-  --debug-iteration-color: #fbbf24;
-  --debug-label-color: #9ca3af;
-  --debug-border-color: rgba(255, 255, 255, 0.1);
-
-  /* Debug value type colors */
-  --debug-value-true: #86efac;
-  --debug-value-false: #fca5a5;
-  --debug-value-number: #93c5fd;
-  --debug-value-string: #86efac;
-  --debug-value-array: #d8b4fe;
-  --debug-value-null: #9ca3af;
-
-  /* Dark mode shadow tweaks */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.6);
+  --board: #0a0f16;
+  --board-grid: rgba(120, 170, 255, 0.06);
+  --surface: #10161f;
+  --surface-2: #141b26;
+  --chip: #161d28;
+  --hairline: #263140;
+  --hairline-2: #1d2632;
+
+  --ink: #e6edf5;
+  --ink-2: #b3c1d1;
+  --muted: #8a9cb0;
+  --faint: #566172;
+
+  --accent: #7c86f5;
+  --accent-soft: #1b2140;
+  --accent-hover: #9aa2f8;
+
+  --sig-bool-true: #3fb950;
+  --sig-bool-false: #f85149;
+  --sig-bool-rest: #8098b0;
+  --sig-number: #58a6ff;
+  --sig-string: #e3b341;
+  --sig-collection: #bc8cff;
+  --sig-data: #39c5cf;
+  --sig-temporal: #db61a2;
+  --sig-null: #8b949e;
+
+  --sig-bool-true-bg: rgba(63, 185, 80, 0.13);
+  --sig-bool-false-bg: rgba(248, 81, 73, 0.13);
+  --sig-number-bg: rgba(88, 166, 255, 0.13);
+  --sig-string-bg: rgba(227, 179, 65, 0.14);
+  --sig-collection-bg: rgba(188, 140, 255, 0.13);
+  --sig-data-bg: rgba(57, 197, 207, 0.13);
+  --sig-temporal-bg: rgba(219, 97, 162, 0.14);
+  --sig-null-bg: rgba(139, 148, 158, 0.14);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
+
+  --debug-popover-shadow: rgba(0, 0, 0, 0.5);
 }
 /*
  * ReactFlow base styles - bundled locally so they're included in the library's styles.css
@@ -1102,7 +1131,7 @@ svg.react-flow__connectionline {
 }
 
 .dl-edge-picker-operator-name {
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-family: var(--font-mono);
   font-weight: 600;
   min-width: 50px;
 }
@@ -1173,27 +1202,9 @@ svg.react-flow__connectionline {
     display: none;
   }
 }
-/* Inline variant (used in toolbar) */
-.dl-debugger-controls--inline {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
+/* Transport bar — floating over the board, or chrome-stripped inline in the toolbar.
+   Mirrors the design-system .transport. */
 
-.dl-debugger-controls--inline .dl-debugger-controls-inner {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  backdrop-filter: none;
-  flex-shrink: 0;
-}
-
-/* Floating overlay variant (legacy, used inside ReactFlow) */
 .dl-debugger-controls--floating {
   position: absolute;
   top: 12px;
@@ -1203,188 +1214,205 @@ svg.react-flow__connectionline {
   pointer-events: auto;
 }
 
-.dl-debugger-controls--floating .dl-debugger-controls-inner {
-  display: flex;
+.dl-debugger-controls-inner {
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  gap: 16px;
-  padding: 8px 16px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-primary);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px var(--node-shadow);
-  backdrop-filter: blur(8px);
+  gap: 12px;
+  height: 48px;
+  padding: 0 12px 0 15px;
+  border-radius: 13px;
+  background: color-mix(in srgb, var(--surface) 92%, transparent);
+  backdrop-filter: blur(14px);
+  border: 1px solid var(--hairline);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-ui);
+}
+
+/* left rail — resting slate, accent while playing */
+.dl-debugger-controls-inner::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10px;
+  bottom: 10px;
+  width: 3px;
+  border-radius: 3px;
+  background: var(--sig-bool-rest);
+}
+.dl-debugger-controls-inner.is-playing::before {
+  background: var(--accent);
 }
 
-/* Bug icon indicator */
 .dl-debugger-icon {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  color: var(--accent-amber);
+  color: var(--sig-string);
 }
 
-/* Navigation buttons */
 .dl-debugger-buttons {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   flex-shrink: 0;
 }
 
 .dl-debugger-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   padding: 0;
-  border: none;
-  border-radius: 6px;
-  background: var(--bg-hover);
-  color: var(--text-secondary);
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
   cursor: pointer;
-  transition: background-color 0.15s, color 0.15s, transform 0.1s;
+  background: var(--surface-2);
+  border: 1px solid var(--hairline);
+  color: var(--ink-2);
+  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease, color 0.15s ease;
 }
-
 .dl-debugger-btn:hover:not(:disabled) {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline));
+  color: var(--ink);
 }
-
 .dl-debugger-btn:active:not(:disabled) {
-  transform: scale(0.95);
+  transform: scale(0.94);
 }
-
 .dl-debugger-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+  opacity: 0.35;
+  cursor: default;
 }
-
 .dl-debugger-btn-primary {
-  width: 36px;
-  height: 36px;
-  background: var(--accent-blue);
-  color: white;
+  width: 40px;
+  height: 40px;
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  box-shadow: 0 0 0 3px var(--accent-soft);
 }
-
 .dl-debugger-btn-primary:hover:not(:disabled) {
-  background: var(--accent-blue-hover);
-  color: white;
+  filter: brightness(1.08);
+  color: #fff;
+  border-color: var(--accent);
 }
 
-/* Step counter */
+/* step counter — a mono readout whose underline fills with progress */
 .dl-debugger-step-counter {
-  display: flex;
+  position: relative;
+  display: inline-flex;
   align-items: baseline;
-  gap: 2px;
-  font-family: 'SF Mono', 'Consolas', monospace;
-  font-size: 13px;
-  min-width: 60px;
+  gap: 3px;
+  min-width: 58px;
   justify-content: center;
+  padding: 6px 12px 8px;
+  border-radius: 8px;
+  overflow: hidden;
   flex-shrink: 0;
+  font-family: var(--font-mono);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface-2)), var(--surface-2));
+  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--hairline));
 }
-
 .dl-step-current {
-  color: var(--text-primary);
-  font-weight: 600;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ink);
 }
-
-.dl-step-separator {
-  color: var(--text-muted);
-  margin: 0 2px;
+.dl-debugger-controls-inner.is-playing .dl-step-current {
+  color: var(--accent);
 }
-
+.dl-step-separator,
 .dl-step-total {
-  color: var(--text-secondary);
+  color: var(--muted);
+  font-size: 12px;
+}
+.dl-step-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: width 0.2s ease;
 }
 
-/* Speed control */
+/* speed slider */
 .dl-debugger-speed {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
 }
-
 .dl-speed-label {
-  font-size: 12px;
-  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
   white-space: nowrap;
 }
-
 .dl-speed-slider {
-  width: 80px;
-  height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: var(--bg-tertiary);
-  border-radius: 2px;
+  width: 84px;
+  height: 4px;
+  border-radius: 3px;
+  background: var(--hairline);
   cursor: pointer;
 }
-
 .dl-speed-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 14px;
   height: 14px;
-  background: var(--accent-blue);
   border-radius: 50%;
+  background: var(--chip);
+  border: 2px solid var(--sig-number);
   cursor: pointer;
-  transition: transform 0.1s;
-}
-
-.dl-speed-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.15);
 }
-
 .dl-speed-slider::-moz-range-thumb {
   width: 14px;
   height: 14px;
-  background: var(--accent-blue);
   border-radius: 50%;
-  border: none;
+  background: var(--chip);
+  border: 2px solid var(--sig-number);
   cursor: pointer;
 }
 
-/* Dark mode adjustments */
-.logic-editor[data-theme="dark"] .dl-debugger-controls--floating .dl-debugger-controls-inner {
-  background: rgba(31, 41, 55, 0.95);
-  border-color: var(--border-light);
+/* inline variant — chrome stripped, lives in the toolbar strip */
+.dl-debugger-controls--inline {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
-
-.logic-editor[data-theme="dark"] .dl-debugger-btn {
-  background: rgba(55, 65, 81, 0.8);
+.dl-debugger-controls--inline .dl-debugger-controls-inner {
+  background: none;
+  backdrop-filter: none;
+  border: none;
+  box-shadow: none;
+  height: auto;
+  padding: 0;
+  gap: 10px;
 }
-
-.logic-editor[data-theme="dark"] .dl-debugger-btn:hover:not(:disabled) {
-  background: rgba(75, 85, 99, 0.9);
+.dl-debugger-controls--inline .dl-debugger-controls-inner::before {
+  display: none;
 }
-
-.logic-editor[data-theme="dark"] .dl-speed-slider {
-  background: rgba(75, 85, 99, 0.8);
+.dl-debugger-controls--inline .dl-debugger-icon,
+.dl-debugger-controls--inline .dl-debugger-speed {
+  display: none;
+}
+.dl-debugger-controls--inline .dl-debugger-btn {
+  width: 30px;
+  height: 30px;
+}
+.dl-debugger-controls--inline .dl-debugger-btn-primary {
+  width: 34px;
+  height: 34px;
 }
 
-/* Mobile adjustments */
 @media (max-width: 1024px) {
   .dl-debugger-controls--inline .dl-debugger-controls-inner {
     gap: 8px;
   }
-
-  .dl-debugger-btn {
-    width: 36px;
-    height: 36px;
-  }
-
-  .dl-debugger-btn-primary {
-    width: 40px;
-    height: 40px;
-  }
-
-  .dl-debugger-step-counter {
-    min-width: 50px;
-    font-size: 12px;
-  }
-
   .dl-speed-slider {
     width: 60px;
   }
@@ -1597,7 +1625,7 @@ svg.react-flow__connectionline {
 }
 
 .help-badge code {
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
 }
 
 .help-badge-arity {
@@ -1712,7 +1740,7 @@ svg.react-flow__connectionline {
 .help-example-code {
   margin: 0;
   padding: 8px;
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.5;
   background: var(--dl-bg-code, #fff);
@@ -1749,7 +1777,7 @@ svg.react-flow__connectionline {
 
 .help-example-data code,
 .help-example-result code {
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   color: var(--dl-text-primary, #1a1a1a);
 }
 
@@ -1759,7 +1787,7 @@ svg.react-flow__connectionline {
 }
 
 .help-example-error code {
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   color: var(--dl-error, #ef4444);
 }
 
@@ -1978,7 +2006,7 @@ svg.react-flow__connectionline {
   flex: 1;
   padding: 4px 8px;
   font-size: 12px;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-family: var(--font-mono);
   color: var(--text-primary, #1a1a1a);
   background: transparent;
   border: none;
@@ -2096,7 +2124,7 @@ svg.react-flow__connectionline {
   width: 100%;
   padding: 6px 8px;
   font-size: 12px;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-family: var(--font-mono);
   color: var(--text-primary, #1a1a1a);
   background: var(--bg-primary, #ffffff);
   border: 1px solid var(--border-color, #d0d0d0);
@@ -2178,7 +2206,7 @@ svg.react-flow__connectionline {
   flex: 1;
   padding: 6px 8px;
   font-size: 12px;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-family: var(--font-mono);
   color: var(--color-primary, #2563eb);
   background: var(--bg-primary, #ffffff);
   border: 1px solid var(--border-color, #d0d0d0);
@@ -2218,7 +2246,7 @@ svg.react-flow__connectionline {
   width: 100%;
   padding: 6px 8px;
   font-size: 12px;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-family: var(--font-mono);
   color: var(--text-secondary, #666);
   background: var(--bg-tertiary, #f5f5f5);
   border: 1px solid var(--border-color, #e0e0e0);
@@ -2393,7 +2421,7 @@ svg.react-flow__connectionline {
 }
 
 .properties-panel-operator-symbol {
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--text-tertiary, #999);
   padding: 2px 6px;
@@ -2580,7 +2608,7 @@ svg.react-flow__connectionline {
 .panel-input-textarea {
   resize: vertical;
   min-height: 60px;
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
 }
 
 /* ==========================================================================
@@ -2704,7 +2732,7 @@ svg.react-flow__connectionline {
 .panel-input-path-prefix {
   padding: 8px 0 8px 10px;
   font-size: 13px;
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   color: var(--dl-text-tertiary, #999);
   user-select: none;
 }
@@ -2712,7 +2740,7 @@ svg.react-flow__connectionline {
 .panel-input-path {
   border: none;
   padding-left: 4px;
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
 }
 
 .panel-input-path:focus {
@@ -2737,7 +2765,7 @@ svg.react-flow__connectionline {
 
 .panel-input-segment {
   flex: 1;
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
 }
 
 .panel-input-segment-remove {
@@ -2791,7 +2819,7 @@ svg.react-flow__connectionline {
 
 .panel-input-path-preview {
   font-size: 11px;
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   color: var(--dl-text-tertiary, #999);
   padding: 4px 0;
 }
@@ -2824,7 +2852,7 @@ svg.react-flow__connectionline {
 }
 
 .panel-input-expression-summary {
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   color: var(--dl-text-primary, #1a1a1a);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2852,7 +2880,7 @@ svg.react-flow__connectionline {
 }
 
 .panel-input-json {
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.5;
   resize: vertical;
@@ -2960,7 +2988,7 @@ svg.react-flow__connectionline {
 }
 
 .panel-hint-description code {
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   font-size: 11px;
   background: var(--dl-bg-code, #e8e8e8);
   padding: 1px 4px;
@@ -2995,7 +3023,7 @@ svg.react-flow__connectionline {
 }
 
 .panel-context-example {
-  font-family: var(--dl-font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
+  font-family: var(--font-mono);
   font-size: 11px;
   background: var(--dl-bg-code, rgba(0, 0, 0, 0.06));
   padding: 2px 6px;
@@ -3015,6 +3043,529 @@ svg.react-flow__connectionline {
   font-size: 11px;
   color: var(--dl-text-tertiary, #999);
 }
+/* ============================================
+   Signal Board — operand pills, LEDs, op glyphs, shape silhouettes
+   ============================================ */
+
+/* type-coloured operand pills (colour = the operand's value type) */
+.dl-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.dl-pill-tap  { color: var(--sig-data);       background: var(--sig-data-bg);       border-color: color-mix(in srgb, var(--sig-data) 24%, transparent); }
+.dl-pill-tap::before { content: "\2041"; font-size: 11px; opacity: 0.8; }
+.dl-pill-num  { color: var(--sig-number);     background: var(--sig-number-bg);     border-color: color-mix(in srgb, var(--sig-number) 22%, transparent); }
+.dl-pill-str  { color: var(--sig-string);     background: var(--sig-string-bg);     border-color: color-mix(in srgb, var(--sig-string) 26%, transparent); }
+.dl-pill-bool { color: var(--sig-bool-true);  background: var(--sig-bool-true-bg);  border-color: color-mix(in srgb, var(--sig-bool-true) 24%, transparent); }
+.dl-pill-coll { color: var(--sig-collection); background: var(--sig-collection-bg); border-color: color-mix(in srgb, var(--sig-collection) 24%, transparent); }
+.dl-pill-temp { color: var(--sig-temporal);   background: var(--sig-temporal-bg);   border-color: color-mix(in srgb, var(--sig-temporal) 24%, transparent); }
+.dl-pill-nul  { color: var(--sig-null);       background: var(--sig-null-bg);       border-color: color-mix(in srgb, var(--sig-null) 22%, transparent); font-style: italic; }
+
+/* boolean gate/quantifier LED */
+.dl-led {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1.5px solid var(--sig-bool-rest);
+  background: transparent;
+}
+.dl-node.debug-executed .dl-led {
+  border-color: var(--sig-bool-true);
+  background: var(--sig-bool-true);
+  box-shadow: 0 0 0 3px var(--sig-bool-true-bg);
+}
+.dl-node.debug-error .dl-led {
+  border-color: var(--sig-bool-false);
+  background: var(--sig-bool-false);
+}
+
+/* operator math glyph (gate / arithmetic) */
+.dl-op-glyph {
+  font-family: var(--font-mono);
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--dl-sig);
+  flex-shrink: 0;
+  min-width: 14px;
+  text-align: center;
+}
+
+/* gate & arithmetic: the op-glyph carries the meaning, so drop the category
+   badge and demote the verbose label to a small-caps eyebrow */
+.dl-shape-gate .vertical-cell-icon,
+.dl-shape-arith .vertical-cell-icon {
+  display: none;
+}
+.dl-shape-gate .vertical-cell-label,
+.dl-shape-arith .vertical-cell-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* data tap (var / val / exists): a teal PLUG that reads from the data and points
+   into the flow. The node box itself is transparent; the inner .dl-tap carries the
+   silhouette (clip-path), so the ReactFlow output handle — a sibling of .dl-tap —
+   stays at the plug's tip and is never clipped. */
+.dl-shape-tap { --dl-sig: var(--sig-data); }
+.dl-node.dl-shape-tap {
+  background: transparent !important;
+  border: none;
+  box-shadow: none;
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  overflow: visible;
+}
+.dl-node.dl-shape-tap::before { display: none; } /* no left rail — the plug is fully tinted */
+.dl-node.dl-shape-tap:hover { box-shadow: none; }
+/* keep the plug's 1px drop-shadow outline from being clipped in debug states */
+.dl-node.dl-shape-tap[class*="debug-"]:not(.debug-current) { overflow: visible; }
+
+.dl-tap {
+  --tap-line: color-mix(in srgb, var(--sig-data) 55%, var(--node-bg));
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  padding: 6px 19px 6px 12px; /* extra right padding leaves room for the plug point */
+  font-family: var(--font-mono);
+  font-size: 12px; /* matches the operand pills so operands read at one size */
+  font-weight: 500;
+  color: var(--sig-data);
+  background: color-mix(in srgb, var(--sig-data) 15%, var(--node-bg));
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
+  filter:
+    drop-shadow(1px 0 0 var(--tap-line)) drop-shadow(-1px 0 0 var(--tap-line))
+    drop-shadow(0 1px 0 var(--tap-line)) drop-shadow(0 -1px 0 var(--tap-line))
+    drop-shadow(0.8px 0.8px 0 var(--tap-line)) drop-shadow(-0.8px 0.8px 0 var(--tap-line))
+    drop-shadow(0.8px -0.8px 0 var(--tap-line)) drop-shadow(-0.8px -0.8px 0 var(--tap-line));
+  transition: filter var(--motion-base) var(--ease-out);
+}
+.dl-tap-glyph { opacity: 0.85; font-size: 11px; }
+.dl-tap-path { color: var(--sig-data); font-weight: 600; }
+.dl-tap-val { color: var(--muted); font-size: 11px; }
+
+/* hover: deepen the plug outline (parallels the border-tint hover on card nodes) */
+.dl-node.dl-shape-tap:hover .dl-tap {
+  --tap-line: color-mix(in srgb, var(--sig-data) 82%, var(--node-bg));
+}
+
+/* selection ring FOLLOWS the plug silhouette: an accent copy of the plug shape
+   rendered 2px larger BEHIND the plug, on the un-clipped node wrapper. (A
+   box-shadow / drop-shadow on the plug itself is swallowed by its own clip-path.) */
+.dl-node.dl-shape-tap.selected { box-shadow: none; }
+.dl-node.dl-shape-tap .dl-tap { z-index: 1; }
+.dl-node.dl-shape-tap.selected::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  z-index: 0;
+  background: var(--accent);
+  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
+  pointer-events: none;
+}
+
+/* debug rings: an accent-free copy of the plug silhouette, tinted per state, so the
+   highlight follows the plug SHAPE. The node box is transparent, so the generic
+   rectangular box-shadow debug rings would halo empty space — suppress them here
+   and let the clip-path ::after ring carry every debug state instead. */
+.dl-node.dl-shape-tap[class*="debug-"] {
+  box-shadow: none !important;
+  animation: none !important;
+}
+.dl-node.dl-shape-tap[class*="debug-"]::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  z-index: 0;
+  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
+  pointer-events: none;
+}
+.dl-node.dl-shape-tap.debug-executed::after { background: var(--debug-executed-color); }
+.dl-node.dl-shape-tap.debug-on-path::after  { background: var(--debug-current-color); opacity: 0.55; }
+.dl-node.dl-shape-tap.debug-error::after    { background: var(--debug-error-color); }
+.dl-node.dl-shape-tap.debug-current::after {
+  background: var(--debug-current-color);
+  animation: debug-pulse-plug 1.5s ease-in-out infinite;
+}
+.dl-node.dl-shape-tap.debug-error.debug-current::after { background: var(--debug-error-color); }
+
+/* box-shadow can't follow the clip-path, so pulse the silhouette ring's own
+   size/opacity to echo the card nodes' debug-current pulse. */
+@keyframes debug-pulse-plug {
+  0%, 100% { inset: -2px; opacity: 1; }
+  50%      { inset: -4px; opacity: 0.7; }
+}
+
+/* branch (if / switch / match): structural accent */
+.dl-shape-branch { --dl-sig: var(--accent); }
+.dl-shape-branch .vertical-cell-icon {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+/* iterator / quantifier: stacked "collection" frame — an offset card outline
+   behind the node (drawn with layered box-shadows so it renders above canvas) */
+.dl-shape-iterator,
+.dl-shape-quantifier { --dl-sig: var(--sig-collection); }
+.dl-shape-iterator,
+.dl-shape-quantifier {
+  box-shadow:
+    5px -5px 0 -1px var(--node-bg),
+    5px -5px 0 0 color-mix(in srgb, var(--sig-collection) 38%, var(--hairline)),
+    var(--node-shadow);
+}
+.dl-shape-iterator:hover,
+.dl-shape-quantifier:hover {
+  box-shadow:
+    5px -5px 0 -1px var(--node-bg),
+    5px -5px 0 0 color-mix(in srgb, var(--sig-collection) 50%, var(--hairline)),
+    var(--node-shadow-hover);
+}
+.dl-shape-quantifier { --dl-sig: var(--sig-bool-rest); }
+.dl-shape-quantifier .vertical-cell-icon {
+  color: var(--sig-collection);
+  background: color-mix(in srgb, var(--sig-collection) 14%, transparent);
+}
+
+/* literal: a folded-corner CONSTANT TAG, tinted by its value type. The fold +
+   outline live on the inner .dl-lit (clip-path); the .dl-node wrapper stays
+   UNCLIPPED and transparent so it can host a selection / debug ring (::after)
+   that follows the fold shape — a box-shadow ring is swallowed by the clip.
+   Mirrors the data-tap plug. */
+.dl-node.dl-shape-literal {
+  background: transparent !important;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  overflow: visible;
+}
+.dl-node.dl-shape-literal::before { display: none; } /* no left rail — the tag is fully tinted */
+.dl-node.dl-shape-literal:hover { box-shadow: none; }
+.dl-node.dl-shape-literal[class*="debug-"]:not(.debug-current) { overflow: visible; }
+
+.dl-lit {
+  --lit-line: color-mix(in srgb, var(--dl-sig) 55%, var(--node-bg));
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 12px;
+  font-family: var(--font-mono);
+  font-size: 12px; /* matches the operand pills / data taps */
+  font-weight: 600;
+  color: var(--dl-sig);
+  background: color-mix(in srgb, var(--dl-sig) 12%, var(--node-bg));
+  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
+  filter:
+    drop-shadow(1px 0 0 var(--lit-line)) drop-shadow(-1px 0 0 var(--lit-line))
+    drop-shadow(0 1px 0 var(--lit-line)) drop-shadow(0 -1px 0 var(--lit-line))
+    drop-shadow(0.8px 0.8px 0 var(--lit-line)) drop-shadow(-0.8px 0.8px 0 var(--lit-line))
+    drop-shadow(0.8px -0.8px 0 var(--lit-line)) drop-shadow(-0.8px -0.8px 0 var(--lit-line));
+  transition: filter var(--motion-base) var(--ease-out);
+}
+/* hover: deepen the fold outline (parallels the card border-tint hover) */
+.dl-node.dl-shape-literal:hover .dl-lit {
+  --lit-line: color-mix(in srgb, var(--dl-sig) 82%, var(--node-bg));
+}
+
+/* selection ring FOLLOWS the fold silhouette: an accent copy of the tag shape,
+   2px larger, BEHIND the tag (a box-shadow ring is swallowed by the clip-path). */
+.dl-node.dl-shape-literal.selected { box-shadow: none; }
+.dl-node.dl-shape-literal.selected::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  z-index: 0;
+  background: var(--accent);
+  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
+  pointer-events: none;
+}
+
+/* debug rings: the same folded silhouette tinted per state — the transparent box
+   would otherwise halo empty space with the generic rectangular ring. */
+.dl-node.dl-shape-literal[class*="debug-"] {
+  box-shadow: none !important;
+  animation: none !important;
+}
+.dl-node.dl-shape-literal[class*="debug-"]::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  z-index: 0;
+  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
+  pointer-events: none;
+}
+.dl-node.dl-shape-literal.debug-executed::after { background: var(--debug-executed-color); }
+.dl-node.dl-shape-literal.debug-on-path::after  { background: var(--debug-current-color); opacity: 0.55; }
+.dl-node.dl-shape-literal.debug-error::after    { background: var(--debug-error-color); }
+.dl-node.dl-shape-literal.debug-current::after {
+  background: var(--debug-current-color);
+  animation: debug-pulse-plug 1.5s ease-in-out infinite;
+}
+.dl-node.dl-shape-literal.debug-error.debug-current::after { background: var(--debug-error-color); }
+.dl-lit-ptag {
+  font-family: var(--font-mono);
+  font-size: 8px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 600;
+  margin-left: 3px; /* clear the folded corner */
+}
+.dl-shape-literal .literal-value {
+  color: var(--dl-sig);
+  font-weight: 600;
+  font-size: 12px; /* override the legacy .literal-value 13px so operands read at one size */
+  word-break: break-word;
+}
+
+/* ============================================
+   Infix operator chips — the readable "shape = role" forms for the two most
+   common families:
+     • compare (== != < > in …): a chip with a boolean LED + infix glyph
+     • arithmetic (+ − × ÷ …):   the op glyph in a round number-tinted badge
+   Both keep the .dl-node chip (border, signal rail, shadow); only the BODY is
+   a horizontal infix run of operand pills instead of stacked cell rows.
+   ============================================ */
+.dl-node.dl-infix-node {
+  display: inline-flex;
+  align-items: center;
+  width: max-content; /* size to the unwrapped infix run, not the RF wrapper width */
+  max-width: 520px;
+}
+.dl-infix {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  padding: 7px 13px 7px 15px;
+  min-width: 0;
+}
+
+/* operator glyph */
+.dl-inop {
+  font-family: var(--font-mono);
+  line-height: 1;
+  flex-shrink: 0;
+}
+.dl-infix-gate .dl-inop {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--ink);
+  padding: 0 1px;
+}
+/* arithmetic op glyph rides in a round badge — the "operation node" convention */
+.dl-infix-arith .dl-inop {
+  display: inline-grid;
+  place-items: center;
+  width: 23px;
+  height: 23px;
+  border-radius: 50%;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--sig-number);
+  background: color-mix(in srgb, var(--sig-number) 13%, var(--node-bg));
+  border: 1px solid color-mix(in srgb, var(--sig-number) 42%, var(--hairline));
+}
+
+/* the boolean LED leads the compare chip */
+.dl-infix-gate .dl-led { margin-right: 2px; }
+
+/* the (single) wired operand connects at the chip's LEFT edge, centred, so the
+   arrow points at the edge instead of into the middle of the chip */
+.dl-node.dl-infix-node .dl-infix-in.react-flow__handle {
+  left: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.dl-pill-expr {
+  color: var(--ink-2);
+  background: var(--surface-2);
+  border-color: var(--hairline);
+  font-family: var(--font-mono);
+  max-width: 210px;
+}
+
+/* ============================================
+   Boolean logic-gate silhouettes — AND / OR / NOT
+   Rendered when a logical op's operands are ALL wired children. The node box is
+   transparent; the SVG silhouette carries the shape, input ports spread down the
+   left edge, output on the right. The child nodes carry the logic.
+   ============================================ */
+.dl-node.dl-gate-node {
+  background: transparent !important;
+  border: none;
+  box-shadow: none;
+  width: fit-content;
+  min-width: 84px;
+  /* floor only; the true height is pinned inline (gateNodeHeight) so the drawn
+     silhouette matches the footprint the layout reserved for it. */
+  min-height: 44px;
+  display: grid;
+  place-items: center;
+  position: relative;
+  padding: 2px 8px;
+}
+.dl-node.dl-gate-node::before { display: none; }
+.dl-node.dl-gate-node:hover { box-shadow: none; }
+.dl-gate-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.dl-gate-sil {
+  fill: color-mix(in srgb, var(--dl-sig) 12%, var(--node-bg));
+  stroke: var(--dl-sig);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+.dl-gate-label {
+  position: relative;
+  z-index: 2;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--dl-sig);
+  pointer-events: none;
+  transform: translateX(-8px);
+}
+.dl-node.dl-gate-node .dl-gate-in.react-flow__handle {
+  width: 8px;
+  height: 8px;
+}
+/* selection follows the gate silhouette — suppress the generic rectangular ring */
+.dl-node.dl-gate-node.selected { box-shadow: none; }
+.dl-node.dl-gate-node.selected .dl-gate-sil { stroke: var(--accent); stroke-width: 2.5; }
+.dl-node.dl-gate-node.selected .dl-gate-svg {
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 45%, transparent));
+}
+.dl-node.dl-gate-node[class*="debug-"] { box-shadow: none !important; }
+.dl-node.dl-gate-node.debug-executed .dl-gate-sil { stroke: var(--debug-executed-color); }
+.dl-node.dl-gate-node.debug-error .dl-gate-sil { stroke: var(--debug-error-color); }
+.dl-node.dl-gate-node.debug-current .dl-gate-sil { stroke: var(--debug-current-color); }
+
+/* ============================================
+   Decision diamond — if / else-if
+   Each condition is its own standalone flowchart diamond. Three inputs on the
+   left (when / then / else, colour-coded); an else-if chains into the else input.
+   ============================================ */
+.dl-node.dl-decision-node {
+  background: transparent !important;
+  border: none;
+  box-shadow: none;
+  width: fit-content;
+  /* 72px square (was 90) — reserved to match in getNodeDimensions/DECISION_NODE,
+     so the diamond sits as tight to its neighbours as any other node. */
+  min-width: 72px;
+  min-height: 72px;
+  display: grid;
+  place-items: center;
+  position: relative;
+  padding: 2px;
+}
+.dl-node.dl-decision-node::before { display: none; }
+.dl-node.dl-decision-node:hover { box-shadow: none; }
+.dl-dec-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.dl-dec-sil {
+  fill: var(--accent-soft);
+  stroke: var(--accent);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+.dl-dec-label {
+  position: relative;
+  z-index: 2;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--accent);
+  pointer-events: none;
+}
+.dl-node.dl-decision-node .dl-dec-port.react-flow__handle {
+  width: 9px;
+  height: 9px;
+  border: 1.5px solid var(--node-bg);
+}
+.dl-node.dl-decision-node .dl-dec-when.react-flow__handle { background: var(--sig-bool-rest); }
+.dl-node.dl-decision-node .dl-dec-then.react-flow__handle { background: var(--sig-bool-true); }
+.dl-node.dl-decision-node .dl-dec-else.react-flow__handle { background: var(--sig-bool-false); }
+/* selection follows the diamond silhouette — suppress the generic rectangular ring */
+.dl-node.dl-decision-node.selected { box-shadow: none; }
+.dl-node.dl-decision-node.selected .dl-dec-sil {
+  stroke: var(--accent);
+  stroke-width: 2.5;
+  fill: color-mix(in srgb, var(--accent) 20%, var(--node-bg));
+}
+.dl-node.dl-decision-node.selected .dl-dec-svg {
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 45%, transparent));
+}
+.dl-node.dl-decision-node[class*="debug-"] { box-shadow: none !important; }
+.dl-node.dl-decision-node.debug-executed .dl-dec-sil { stroke: var(--debug-executed-color); }
+.dl-node.dl-decision-node.debug-error .dl-dec-sil { stroke: var(--debug-error-color); }
+.dl-node.dl-decision-node.debug-current .dl-dec-sil { stroke: var(--debug-current-color); }
+
+/* ============================================
+   Direction: hierarchy (root on the left)
+   Mirrors the compact directional cues so plugs/chips point toward their
+   consumer, which now sits on the LEFT. Layout, handles and edges are flipped
+   in JS (see utils/layout, edge-builder, and the handle components); only the
+   pure-visual silhouettes are mirrored here.
+   ============================================ */
+.logic-editor[data-direction="hierarchy"] .dl-tap {
+  padding: 6px 12px 6px 19px; /* room for the plug point on the LEFT */
+  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
+}
+.logic-editor[data-direction="hierarchy"] .dl-node.dl-shape-tap.selected::after,
+.logic-editor[data-direction="hierarchy"] .dl-node.dl-shape-tap[class*="debug-"]::after {
+  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
+}
+.logic-editor[data-direction="hierarchy"] .dl-node.dl-infix-node .dl-infix-in.react-flow__handle {
+  left: auto;
+  right: -6px;
+}
+/* gate points toward its output, which is on the LEFT in hierarchy → mirror it */
+.logic-editor[data-direction="hierarchy"] .dl-gate-svg {
+  transform: scaleX(-1);
+}
+.logic-editor[data-direction="hierarchy"] .dl-gate-label {
+  transform: translateX(8px);
+}
+
 /* ============================================
    CSS Variables - Debug Colors
    ============================================ */
@@ -3042,25 +3593,45 @@ svg.react-flow__connectionline {
    ============================================ */
 
 .dl-node {
+  --dl-sig: var(--sig-bool-rest); /* set per-node from its signal (return type) */
   border-radius: var(--radius-md);
-  border: 2px solid;
+  border: 1px solid var(--hairline);
   font-family: inherit;
   font-size: 13px;
   width: 100%;
   box-sizing: border-box;
   box-shadow: var(--node-shadow);
   transition: box-shadow var(--motion-base) var(--ease-out),
+              border-color var(--motion-base) var(--ease-out),
               transform var(--motion-fast) var(--ease-out);
   background: var(--node-bg) !important;
   position: relative;
 }
 
+/* thin left "signal rail" — tinted by the value type this node outputs.
+   Quiet by default; the chip stays near-neutral so colour reads as meaning. */
+.dl-node::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background: var(--dl-sig);
+  opacity: 0.9;
+  z-index: 1;
+  pointer-events: none;
+}
+
 .dl-node:hover {
+  border-color: color-mix(in srgb, var(--dl-sig) 45%, var(--hairline));
   box-shadow: var(--node-shadow-hover);
 }
 
 .dl-node.selected {
-  box-shadow: 0 0 0 2px var(--accent-blue), var(--node-shadow-hover);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent), var(--node-shadow-hover);
 }
 
 /* ============================================
@@ -3142,12 +3713,12 @@ svg.react-flow__connectionline {
    ============================================ */
 
 .vertical-cell-header {
-  padding: 4px 10px;
-  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
-  color: white;
+  padding: 7px 12px 7px 15px;
+  color: var(--ink);
   display: flex;
   align-items: center;
   gap: 8px;
+  border-bottom: 1px solid var(--hairline-2);
 }
 
 .vertical-cell-header .vertical-cell-label {
@@ -3158,15 +3729,24 @@ svg.react-flow__connectionline {
   margin-left: auto;
 }
 
+/* category glyph reads as a monochrome badge tinted by the node's signal */
 .vertical-cell-icon {
-  font-size: 16px;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  color: var(--dl-sig);
+  background: color-mix(in srgb, var(--dl-sig) 14%, transparent);
 }
 
 .vertical-cell-label {
   font-weight: 600;
-  font-size: 16px;
-  letter-spacing: 0.5px;
+  font-size: 13px;
+  letter-spacing: -0.01em;
   white-space: nowrap;
+  color: var(--ink);
 }
 
 .vertical-cell-body {
@@ -3174,7 +3754,7 @@ svg.react-flow__connectionline {
 }
 
 .vertical-cell-row {
-  padding: 6px 12px;
+  padding: 6px 12px 6px 15px;
   border-bottom: 1px solid var(--border-light);
   display: flex;
   align-items: center;
@@ -3182,10 +3762,11 @@ svg.react-flow__connectionline {
   position: relative;
 }
 
-/* Handle positioned inside cell row */
+/* Handle positioned inside cell row — LEFT edge (children/operands flow in from
+   the left in the Signal Board left->right data flow) */
 .vertical-cell-row .cell-handle {
   position: absolute;
-  right: -5px;
+  left: -5px;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -3221,7 +3802,7 @@ svg.react-flow__connectionline {
 }
 
 .vertical-cell-inline {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   color: var(--text-primary);
   word-break: break-word;
@@ -3247,6 +3828,91 @@ svg.react-flow__connectionline {
   border-left-color: #64748b;
 }
 
+/* Branch rails — a wired child operand. The child's logic lives in its own node,
+   so the row shows a compact type-tinted "extends to child" chip (dl-child-link
+   reuses the dl-pill tint) instead of repeating the expression. */
+.dl-child-link {
+  flex-shrink: 0;
+  padding: 1px 9px;
+  cursor: default;
+}
+.dl-child-glyph {
+  font-size: 13px;
+  line-height: 1;
+  opacity: 0.9;
+}
+
+/* If / Then / Else rows read as coloured rails (design-system When/Then/Else). */
+.branch-rail .vertical-cell-row-label {
+  letter-spacing: 0.03em;
+}
+.branch-rail-when .vertical-cell-row-label { color: var(--sig-bool-rest); }
+.branch-rail-then .vertical-cell-row-label { color: var(--sig-bool-true); }
+.branch-rail-else .vertical-cell-row-label { color: var(--sig-bool-false); }
+
+/* If as a chained decision — flowchart diamonds ("if" / "elif") down a spine,
+   with the Then / Else rails indented beneath each (design-system diamond). */
+.dl-shape-branch .vertical-cell-body {
+  position: relative;
+}
+.dl-shape-branch .vertical-cell-body::before {
+  content: "";
+  position: absolute;
+  left: 34px; /* through the diamond centres */
+  top: 12px;
+  bottom: 12px;
+  width: 1.5px;
+  background: color-mix(in srgb, var(--accent) 30%, var(--hairline));
+  z-index: 0;
+}
+.dl-shape-branch .vertical-cell-row {
+  z-index: 1;
+}
+/* condition diamond — the decision shape, "if" / "elif" chained down the spine */
+.dl-cond-diamond {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  margin: -3px 4px -3px 0;
+}
+.dl-cond-diamond svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.dl-cond-diamond svg path {
+  fill: var(--accent-soft);
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+.dl-cond-label {
+  position: relative;
+  z-index: 1;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  color: var(--accent);
+}
+/* Then / Else rails sit indented under the diamond, colour-coded */
+.vertical-cell-row.branch-rail-then,
+.vertical-cell-row.branch-rail-else {
+  padding-left: 48px;
+}
+.branch-rail-then .vertical-cell-row-icon { color: var(--sig-bool-true); }
+.branch-rail-else .vertical-cell-row-icon { color: var(--sig-bool-false); }
+.branch-rail-then .vertical-cell-row-label,
+.branch-rail-else .vertical-cell-row-label {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 9.5px;
+}
+
 /* Header right section for result badge and collapse toggle */
 .header-right {
   display: flex;
@@ -3259,7 +3925,7 @@ svg.react-flow__connectionline {
 .collapse-toggle {
   background: transparent;
   border: none;
-  color: white;
+  color: var(--muted);
   font-size: 10px;
   cursor: pointer;
   padding: 2px 6px;
@@ -3274,7 +3940,7 @@ svg.react-flow__connectionline {
 
 /* Expression text for collapsed nodes */
 .expression-text {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   color: var(--text-primary);
   padding: 4px 8px;
@@ -3318,7 +3984,7 @@ svg.react-flow__connectionline {
 }
 
 .arg-label {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -3330,7 +3996,7 @@ svg.react-flow__connectionline {
    ============================================ */
 
 .literal-node {
-  padding: 8px 12px;
+  padding: 8px 12px 8px 15px;
 }
 
 .literal-node-content {
@@ -3347,7 +4013,7 @@ svg.react-flow__connectionline {
 }
 
 .literal-value {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   color: var(--text-primary);
   word-break: break-all;
@@ -3364,33 +4030,38 @@ svg.react-flow__connectionline {
 }
 
 .structure-node-header {
-  padding: 6px 12px;
-  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
-  color: white;
+  padding: 6px 12px 6px 15px;
+  color: var(--ink);
   display: flex;
   align-items: center;
   gap: 8px;
   height: 32px;
   box-sizing: border-box;
+  border-bottom: 1px solid var(--hairline-2);
 }
 
 .structure-node-icon {
-  font-size: 14px;
-  display: flex;
-  align-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  display: grid;
+  place-items: center;
+  color: var(--dl-sig);
+  background: color-mix(in srgb, var(--dl-sig) 14%, transparent);
 }
 
 .structure-node-label {
   font-weight: 600;
-  font-size: 14px;
-  letter-spacing: 0.5px;
+  font-size: 13px;
+  letter-spacing: -0.01em;
   flex: 1;
+  color: var(--ink);
 }
 
 .structure-node-body {
   padding: 8px 12px;
   padding-right: 24px;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   white-space: pre;
   line-height: 18px;
@@ -3473,20 +4144,17 @@ svg.react-flow__connectionline {
   bottom: -6px;
 }
 
+/* input handles (connection to parent) now sit on the RIGHT, centred */
 .react-flow__handle-right {
   right: -6px;
-}
-
-.react-flow__handle-left {
-  left: -6px;
   top: 50% !important;
   transform: translateY(-50%) !important;
 }
 
-/* Ensure left handles are centered on simple nodes */
-.literal-node .react-flow__handle-left {
-  top: 50% !important;
-  transform: translateY(-50%) !important;
+/* left handles are the per-cell branch handles — their vertical position is set
+   inline / by .cell-handle, so do NOT force-centre them here */
+.react-flow__handle-left {
+  left: -6px;
 }
 
 /* Edge styles */
@@ -3514,7 +4182,7 @@ svg.react-flow__connectionline {
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 11px;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-weight: 500;
   max-width: 120px;
   overflow: hidden;
@@ -3557,7 +4225,7 @@ svg.react-flow__connectionline {
   margin: 0;
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
 }
 
 .result-popover.error {
@@ -3776,17 +4444,34 @@ svg.react-flow__connectionline {
 
 .debug-info-bubble {
   position: absolute;
-  background: var(--debug-popover-bg);
-  color: var(--debug-popover-text);
-  border-radius: var(--radius-md);
-  padding: 10px 12px;
+  width: 264px;
+  max-width: 300px;
+  background: var(--chip);
+  color: var(--ink-2);
+  border: 1px solid var(--hairline);
+  border-radius: 11px;
+  padding: 0;
+  font-family: var(--font-mono);
   font-size: 11px;
   z-index: 9999;
   box-shadow: var(--shadow-lg);
-  min-width: 180px;
-  max-width: 280px;
   pointer-events: auto;
 }
+/* signal rail — accent by default, red on error (design-system .pop::before) */
+.debug-info-bubble::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 3px;
+  background: var(--accent);
+  z-index: 1;
+}
+.debug-info-bubble.error::before {
+  background: var(--sig-bool-false);
+}
 
 .debug-info-bubble.debug-info-top {
   bottom: 100%;
@@ -3870,45 +4555,61 @@ svg.react-flow__connectionline {
 }
 
 .debug-info-iteration {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--debug-iteration-color);
-  margin-bottom: 8px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid var(--debug-border-color);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--font-ui);
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--sig-collection);
+  padding: 8px 12px 8px 15px;
+  border-bottom: 1px solid var(--hairline-2);
 }
 
 .debug-info-section {
-  margin-bottom: 8px;
+  padding: 9px 12px 9px 15px;
+  border-bottom: 1px solid var(--hairline-2);
 }
 
 .debug-info-section:last-child {
-  margin-bottom: 0;
+  border-bottom: none;
 }
 
 .debug-info-label {
-  display: block;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--debug-label-color);
+  display: flex;
+  align-items: center;
+  font-family: var(--font-ui);
+  font-size: 9.5px;
+  font-weight: 700;
+  color: var(--muted);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 4px;
+  letter-spacing: 0.1em;
+  margin-bottom: 6px;
 }
 
 .debug-info-value {
   margin: 0;
-  padding: 4px 6px;
-  background: var(--debug-popover-value-bg);
-  border-radius: 4px;
-  font-family: 'SF Mono', 'Consolas', monospace;
-  font-size: 10px;
+  padding: 7px 9px;
+  background: var(--surface-2);
+  border: 1px solid var(--hairline-2);
+  border-radius: 7px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  line-height: 1.6;
+  color: var(--ink-2);
   white-space: pre-wrap;
   word-break: break-word;
-  max-height: 100px;
+  max-height: 116px;
   overflow: auto;
 }
 
+.debug-info-simple-value {
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: 700;
+}
+
 /* Custom scrollbar styling */
 .debug-info-value::-webkit-scrollbar {
   width: 6px;
@@ -3968,7 +4669,7 @@ svg.react-flow__connectionline {
 }
 
 .debug-info-simple-value {
-  font-family: 'SF Mono', 'Consolas', monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 500;
 }
@@ -4070,6 +4771,45 @@ svg.react-flow__connectionline {
   cursor: pointer;
 }
 
+/* Direction toggle — a compact segmented control: Data flow ⇄ Hierarchy */
+.logic-editor-toolbar .dl-direction-toggle {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  border: 1px solid var(--hairline, #ddd);
+  border-radius: var(--radius-sm, 6px);
+  overflow: hidden;
+}
+
+.logic-editor-toolbar .dl-direction-toggle button {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary, #666);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  padding: 4px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--motion-fast) var(--ease-out),
+              color var(--motion-fast) var(--ease-out);
+}
+
+.logic-editor-toolbar .dl-direction-toggle button + button {
+  border-left: 1px solid var(--hairline, #ddd);
+}
+
+.logic-editor-toolbar .dl-direction-toggle button:hover:not(.active) {
+  background: var(--bg-hover, #f0f0f0);
+  color: var(--text-primary, #1a1a1a);
+}
+
+.logic-editor-toolbar .dl-direction-toggle button.active {
+  background: var(--accent, #6366f1);
+  color: #fff;
+}
+
 /* Shared toolbar button style (undo/redo, etc.) */
 .dl-toolbar-btn {
   display: flex;
@@ -4312,8 +5052,8 @@ svg.react-flow__connectionline {
   gap: 4px;
   padding: 4px 8px;
   margin: 4px 8px 8px;
-  border: 1.5px dashed var(--color-primary, #2563eb);
-  border-radius: 4px;
+  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--hairline));
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--color-primary, #2563eb);
   font-size: 11px;