pmx-canvas 0.9.3 → 0.11.0

package/src/client/theme/global.css

@@ -84,12 +84,12 @@
   /* ── Core palette (dark · ink + cyan) ────────────────────── */
   --c-bg: #081524;
   --c-panel: #0f1d31;
-  --c-panel-soft: #0a1729;
+  --c-panel-soft: #13243b;
   --c-line: #1b2c44;
   --c-text: #e6eef7;
-  --c-text-soft: #c7d3ea;
+  --c-text-soft: #b9c6d6;
   --c-muted: #8ea3bd;
-  --c-dim: #5c6b80;
+  --c-dim: #6b7d94;
   --c-accent: #4BBCFF;
   --c-ok: #2fd07f;
   --c-warn: #f4c542;
@@ -106,7 +106,7 @@
   --c-rel-informs: #E58FB0;
   --c-rel-related: #8ea3bd;
   --c-input-bg: #0a1729;
-  --c-dot-grid: rgba(75, 188, 255, 0.08);
+  --c-dot-grid: rgba(142, 163, 189, 0.14);
   --c-panel-overlay: rgba(8, 21, 36, 0.6);
   --c-panel-glass: rgba(15, 29, 49, 0.92);
   --c-shadow: rgba(0, 0, 0, 0.3);
@@ -148,19 +148,19 @@
 }
 
 .board-node, .md-card-preview { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+.board-node > .home-thumb { height: 96px; flex-shrink: 0; }
+.board-node-missing { display: grid; place-items: center; min-height: 72px; margin: 10px 10px 0; border: 1px dashed var(--c-line); border-radius: var(--r-control); color: var(--c-muted); font-size: var(--fs-meta); }
+.board-node-relink { max-width: 100%; margin-top: 8px; padding: 4px 8px; color: var(--c-text); background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-control); font: var(--fs-ui) var(--font-ui); }
 .board-node-content { flex: 1; min-height: 0; overflow: auto; padding: 16px; overflow-wrap: anywhere; }
-.board-node-label { color: var(--c-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
 .board-node-title { display: block; font-size: 17px; line-height: 1.35; margin-bottom: 6px; }
 .board-node-meta { color: var(--c-dim); font-size: 11px; line-height: 1.5; }
 .board-node-summary { color: var(--c-text-soft); font-size: 13px; line-height: 1.6; margin: 14px 0; }
 .board-node-open { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-accent); font: 500 12px var(--font-ui); text-align: left; cursor: pointer; }
-.board-node-open:hover:not(:disabled) { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
-.board-node-open:disabled { color: var(--c-dim); cursor: default; }
+.board-node-open:hover { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
 .md-card-content { flex: 1; min-height: 0; overflow: auto; }
 .md-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; border-top: 1px solid var(--c-line); padding: 6px 36px 6px 8px; background: var(--c-panel); }
-.md-card-actions button { border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--c-dim); padding: 4px 8px; font: 500 11px var(--font-ui); cursor: pointer; }
+.md-card-actions button { border: 1px solid transparent; border-radius: var(--r-control); background: transparent; color: var(--c-dim); padding: 4px 8px; font: 500 var(--fs-meta) var(--font-ui); cursor: pointer; }
 .md-card-actions button:hover { color: var(--c-text); background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
-.md-card-actions .md-readme-btn[aria-pressed="true"] { color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, transparent); border-color: color-mix(in srgb, var(--c-accent) 25%, transparent); }
 .md-card-edit { margin-left: auto; }
 .board-node-open:focus-visible, .md-card-actions button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
 .canvas-node[data-node-type="markdown"] .node-body,
@@ -599,30 +599,62 @@ body,
   display: contents;
 }
 
+.node-header-meta {
+  color: var(--c-dim);
+  font-size: var(--fs-meta);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 20%;
+}
+
+.node-readme-mark {
+  flex-shrink: 0;
+  color: var(--c-muted);
+  font-size: var(--fs-meta);
+  white-space: nowrap;
+}
+
+/* Chrome §9: the markdown title becomes the section heading. */
+.canvas-node.heading-node {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.canvas-node.heading-node .node-titlebar {
+  border: 0;
+  padding: 8px 16px 0;
+  background: transparent;
+}
+.canvas-node.heading-node .node-title {
+  font-size: var(--fs-heading);
+  line-height: 28px;
+  letter-spacing: -0.01em;
+}
+.canvas-node.heading-node .node-type-icon { display: none; }
+.heading-node:not(:hover):not(:focus-within) .node-controls { visibility: hidden; }
+.heading-node:not(:hover):not(:focus-within) .node-resize-handle { visibility: hidden; }
+.canvas-node.heading-node .node-body { padding: 0 16px 8px; color: var(--c-muted); }
+
 .canvas-node:hover {
-  box-shadow: 0 6px 32px var(--c-shadow);
+  box-shadow: var(--e-2);
 }
 
 .canvas-node.active {
   border-color: var(--c-accent);
-  box-shadow: 0 0 0 1px var(--c-accent), 0 6px 32px color-mix(in srgb, var(--c-accent) 15%, transparent);
+  box-shadow: 0 0 0 1px var(--c-accent), var(--e-1);
 }
 
 .canvas-node.neighbor {
   border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 4px 20px color-mix(in srgb, var(--c-accent) 15%, transparent);
+  box-shadow: var(--e-1);
   transition: border-color 0.2s, box-shadow 0.2s, opacity 0.15s ease;
 }
 
 /* Spatial search highlighting — canvas lights up as you type in Cmd+K */
 .canvas-node.search-match {
   border-color: var(--c-accent);
-  box-shadow: 0 0 0 2px var(--c-accent), 0 0 20px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 40px color-mix(in srgb, var(--c-accent) 15%, transparent);
-  animation: search-pulse 1.5s ease-in-out infinite;
-}
-@keyframes search-pulse {
-  0%, 100% { box-shadow: 0 0 0 2px var(--c-accent), 0 0 20px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 40px color-mix(in srgb, var(--c-accent) 15%, transparent); }
-  50%      { box-shadow: 0 0 0 2px var(--c-accent), 0 0 30px color-mix(in srgb, var(--c-accent) 40%, transparent), 0 0 60px color-mix(in srgb, var(--c-accent) 25%, transparent); }
+  box-shadow: 0 0 0 2px var(--c-accent), var(--e-1);
 }
 .canvas-node.search-dimmed {
   opacity: 0.25;
@@ -687,9 +719,9 @@ body,
 .canvas-node .node-titlebar {
   display: flex;
   align-items: center;
-  gap: calc(8px * var(--node-chrome-scale, 1));
-  padding: calc(7px * var(--node-chrome-scale, 1)) calc(12px * var(--node-chrome-scale, 1));
-  background: var(--c-panel-overlay);
+  gap: 8px;
+  padding: 7px 12px;
+  background: transparent;
   border-bottom: 1px solid var(--c-line);
   cursor: grab;
   user-select: none;
@@ -701,9 +733,10 @@ body,
 }
 
 .canvas-node .node-title {
-  font-size: calc(12px * var(--node-chrome-scale, 1));
+  font-size: calc(12px * var(--node-title-scale, 1));
+  line-height: 22px;
   font-weight: 600;
-  color: var(--c-text-soft);
+  color: var(--c-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -718,16 +751,16 @@ body,
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: calc(14px * var(--node-chrome-scale, 1));
-  height: calc(14px * var(--node-chrome-scale, 1));
+  width: 14px;
+  height: 14px;
   color: var(--c-muted);
   flex-shrink: 0;
 }
 
 .canvas-node .node-type-badge {
-  font-size: calc(10px * var(--node-chrome-scale, 1));
-  padding: calc(1px * var(--node-chrome-scale, 1)) calc(6px * var(--node-chrome-scale, 1));
-  border-radius: calc(4px * var(--node-chrome-scale, 1));
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 4px;
   background: color-mix(in srgb, var(--c-accent) 12%, transparent);
   color: var(--c-accent);
   text-transform: uppercase;
@@ -736,16 +769,12 @@ body,
 }
 
 .canvas-node .node-ax-status {
-  /* A long status ("in-progress") must not push the node's NAME out of the bar;
-     the pill is a glance-level cue, the name is the identity. */
-  max-width: 11ch;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* The status is a complete word, never an ellipsis: the title is the part of
+     the bar that gives way (HeaderMarks keeps it its minimum width). */
   white-space: nowrap;
-  flex-shrink: 1;
-  font-size: calc(9px * var(--node-chrome-scale, 1));
-  padding: calc(1px * var(--node-chrome-scale, 1)) calc(6px * var(--node-chrome-scale, 1));
-  border-radius: calc(4px * var(--node-chrome-scale, 1));
+  font-size: 9px;
+  padding: 1px 6px;
+  border-radius: 4px;
   background: var(--c-panel-overlay);
   color: var(--c-muted);
   text-transform: uppercase;
@@ -768,7 +797,7 @@ body,
 .canvas-node .node-controls {
   display: flex;
   align-items: center;
-  gap: calc(4px * var(--node-chrome-scale, 1));
+  gap: 4px;
   flex-shrink: 0;
 }
 
@@ -780,12 +809,12 @@ body,
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: calc(22px * var(--node-chrome-scale, 1));
-  min-height: calc(22px * var(--node-chrome-scale, 1));
-  padding: calc(2px * var(--node-chrome-scale, 1)) calc(4px * var(--node-chrome-scale, 1));
-  font-size: calc(14px * var(--node-chrome-scale, 1));
+  min-width: 22px;
+  min-height: 22px;
+  padding: 2px 4px;
+  font-size: 14px;
   line-height: 1;
-  border-radius: calc(3px * var(--node-chrome-scale, 1));
+  border-radius: 3px;
 }
 
 .canvas-node .node-controls button svg {
@@ -815,7 +844,7 @@ body,
   overflow: auto;
   padding: 10px 14px;
   min-height: 0;
-  font-size: 11px;
+  font-size: var(--fs-ui);
   line-height: 1.6;
   color: var(--c-text-soft);
 }
@@ -1420,7 +1449,7 @@ body,
   outline-offset: 2px;
 }
 .agent-chip-who {
-  font: 10px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   font-weight: 400;
   color: var(--c-muted);
   white-space: nowrap;
@@ -1454,7 +1483,7 @@ body,
   transform-origin: top left;
 }
 .agent-cursor.is-worker .agent-cursor-chip {
-  font-size: 9px;
+  font-size: var(--fs-meta);
   padding: 1px 6px;
 }
 /* Parked idle cursors leave the board (user feedback, 0.5.1 cycle): with many agents
@@ -1477,7 +1506,7 @@ body,
   border-radius: 8px;
   background: color-mix(in srgb, var(--c-accent) 16%, transparent);
   color: var(--c-accent);
-  font-size: 9px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.04em;
   white-space: nowrap;
@@ -1601,10 +1630,10 @@ body,
   border: 1px solid color-mix(in srgb, var(--presence-color) 35%, transparent);
   background: color-mix(in srgb, var(--c-panel) 92%, var(--presence-color) 8%);
   color: var(--presence-color);
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   white-space: nowrap;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--e-2);
 }
 .agent-cursor-dot {
   width: 6px;
@@ -1617,7 +1646,7 @@ body,
   animation: presence-pulse 1.4s ease-in-out infinite;
 }
 .agent-cursor-who {
-  font: 9.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   font-weight: 400;
   color: var(--c-muted);
 }
@@ -1673,7 +1702,7 @@ body,
 }
 .session-collapsed-label {
   writing-mode: vertical-rl;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -1684,7 +1713,7 @@ body,
   flex-direction: column;
   align-items: center;
   gap: 4px;
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .session-collapsed-live .session-live-dot {
@@ -1712,7 +1741,7 @@ body,
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  font: 10px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-muted);
 }
 .session-live.phase-thinking {
@@ -1765,14 +1794,14 @@ body,
 }
 .session-section-title {
   margin: 0 0 8px;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--c-dim);
 }
 .session-empty {
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   line-height: 1.5;
   color: var(--c-dim);
 }
@@ -1846,12 +1875,12 @@ body,
 }
 .session-item-detail {
   margin-top: 2px;
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   line-height: 1.45;
   color: var(--c-muted);
 }
 .session-item-status {
-  font-size: 9px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -1860,7 +1889,7 @@ body,
   margin-top: 3px;
 }
 .session-item-time {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
   flex-shrink: 0;
   margin-top: 4px;
@@ -1871,7 +1900,7 @@ body,
 }
 .session-gate-ttl {
   margin-top: 4px;
-  font: 10px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-warn);
 }
 .session-gate-held {
@@ -1933,7 +1962,7 @@ body,
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font: 10px/1 var(--font-code);
+  font: var(--fs-meta)/1 var(--font-code);
   color: var(--c-muted);
 }
 .session-work-dot {
@@ -2015,7 +2044,7 @@ body,
    anchored tooltip would clip against the filter row's own scroll container. */
 .session-timeline-hint {
   margin: -4px 0 8px;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   line-height: 1.35;
   color: var(--c-muted);
   min-height: 14px;
@@ -2071,7 +2100,7 @@ body,
 /* Row writer in its identity hue — multi-assistant boards need every row to
    answer "who wrote this" without opening anything. */
 .session-timeline-who {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   color: var(--identity-color, var(--c-muted));
   white-space: nowrap;
@@ -2100,11 +2129,11 @@ body,
 }
 .session-timeline-undone {
   margin-top: 2px;
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .session-timeline-body {
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   line-height: 1.5;
   color: var(--c-text-soft);
   overflow-wrap: anywhere;
@@ -2117,7 +2146,7 @@ body,
   gap: 8px;
   padding: 8px 12px 8px 16px;
   border-bottom: 1px solid var(--c-line);
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   color: var(--c-muted);
 }
 .session-scope.is-fenced {
@@ -2147,7 +2176,7 @@ body,
   border: 1px solid var(--c-line);
   background: none;
   color: var(--c-muted);
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
@@ -2181,7 +2210,7 @@ body,
   border: 1px solid color-mix(in srgb, var(--c-agent) 35%, transparent);
   background: color-mix(in srgb, var(--c-panel) 92%, var(--c-agent) 8%);
   color: var(--c-agent);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   letter-spacing: 0.04em;
   white-space: nowrap;
@@ -2315,7 +2344,7 @@ body,
   background: color-mix(in srgb, var(--c-pin) 25%, transparent);
 }
 .command-bar-chips-note {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 .command-bar-composer {
@@ -2328,7 +2357,7 @@ body,
   border: 1px solid var(--c-line);
   background: color-mix(in srgb, var(--c-panel) 95%, transparent);
   backdrop-filter: blur(16px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--e-2);
 }
 .command-bar-target {
   max-width: 148px;
@@ -2448,7 +2477,7 @@ body,
   border-radius: 50%;
   border: 1.5px solid var(--c-panel-soft);
   color: var(--c-bg);
-  font-size: 8.5px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   flex-shrink: 0;
 }
@@ -2482,7 +2511,7 @@ body,
   font-weight: 600;
 }
 .external-indicator-ops {
-  font: 10px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-muted);
 }
 .external-indicator-dot {
@@ -2504,8 +2533,8 @@ body,
   flex-direction: column;
   background: var(--c-panel);
   border: 1px solid color-mix(in srgb, var(--c-agent) 30%, transparent);
-  border-radius: 10px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  border-radius: var(--r-overlay);
+  box-shadow: var(--e-2);
   /* Popover-level like the rail menus: above the minimap, below the rail. */
   z-index: 9999;
   overflow: hidden;
@@ -2528,7 +2557,7 @@ body,
   color: var(--c-text);
 }
 .activity-feed-sub {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .activity-feed-close {
@@ -2556,7 +2585,7 @@ body,
   border: 1px solid var(--c-line);
   background: none;
   color: var(--c-muted);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   cursor: pointer;
 }
@@ -2614,7 +2643,7 @@ body,
   overflow-wrap: anywhere;
 }
 .activity-meta {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   line-height: 1.45;
   color: var(--c-muted);
 }
@@ -2633,7 +2662,7 @@ body,
   background: none;
   border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent);
   color: var(--c-danger);
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   cursor: pointer;
 }
@@ -2642,7 +2671,7 @@ body,
 }
 .activity-hint,
 .activity-age {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
   flex-shrink: 0;
 }
@@ -2661,7 +2690,7 @@ body,
 }
 .activity-feed-note {
   flex: 1;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 .activity-feed-link {
@@ -2669,7 +2698,7 @@ body,
   border: none;
   padding: 0;
   color: var(--c-muted);
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   cursor: pointer;
 }
@@ -2698,8 +2727,8 @@ body,
   max-width: calc(100% - 48px);
   background: var(--c-panel);
   border: 1px solid var(--c-line);
-  border-radius: 12px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+  border-radius: var(--r-overlay);
+  box-shadow: var(--e-2);
   z-index: 10000;
   overflow: hidden;
 }
@@ -2718,7 +2747,7 @@ body,
   color: var(--c-text);
 }
 .writers-board {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .writers-body {
@@ -2729,7 +2758,7 @@ body,
 }
 .writers-section {
   padding: 8px 0 2px;
-  font-size: 9px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -2754,7 +2783,7 @@ body,
   font: 11px var(--font-code);
 }
 .writers-config {
-  font-size: 9.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 999px;
@@ -2762,11 +2791,11 @@ body,
   color: var(--c-agent);
 }
 .writers-meta {
-  font: 9.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .writers-empty {
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
   padding: 4px 0;
 }
@@ -2780,7 +2809,7 @@ body,
 }
 .writers-note {
   flex: 1;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 .writers-done {
@@ -2803,9 +2832,9 @@ body,
   width: 168px;
   height: 112px;
   border: 1px solid var(--c-line);
-  border-radius: 8px;
+  border-radius: var(--r-node);
   overflow: hidden;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--e-2);
   background: color-mix(in srgb, var(--c-panel-soft) 94%, transparent);
   backdrop-filter: blur(8px);
   z-index: 60;
@@ -2820,7 +2849,7 @@ body,
 .minimap:hover {
   opacity: 1;
   transform: scale(1.7);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
+  box-shadow: var(--e-2);
 }
 .minimap-node {
   position: absolute;
@@ -2939,7 +2968,7 @@ body,
   border-radius: 8px;
   border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
   color: var(--c-accent);
-  font-size: 9px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -2973,12 +3002,12 @@ body,
   white-space: nowrap;
 }
 .edge-hint-main {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   color: var(--c-accent);
 }
 .edge-hint-keys {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 
@@ -3010,7 +3039,7 @@ body,
   border-radius: 999px;
   background: color-mix(in srgb, var(--c-ok) 92%, transparent);
   color: var(--c-bg);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   white-space: nowrap;
 }
@@ -3033,7 +3062,7 @@ body,
   background: var(--c-panel-soft);
   border: 1px solid color-mix(in srgb, var(--c-agent) 40%, transparent);
   color: var(--c-agent);
-  font-size: 9.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   white-space: nowrap;
 }
@@ -3079,7 +3108,7 @@ body,
   border: 1px solid var(--c-line);
   background: none;
   color: var(--c-muted);
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   cursor: pointer;
 }
@@ -3156,7 +3185,7 @@ body,
   gap: 2px;
 }
 .session-receipt-tile-label {
-  font-size: 9.5px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 .session-receipt-tile-value {
@@ -3364,7 +3393,7 @@ body,
 .session-receipt-note,
 .session-receipt-diff {
   margin-top: 10px;
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   line-height: 1.5;
   color: var(--c-muted);
 }
@@ -3437,7 +3466,7 @@ body,
     right: 0;
     bottom: 0;
     width: 312px;
-    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--e-2);
   }
 }
 
@@ -3711,7 +3740,7 @@ body,
   min-width: 0;
 }
 .connection-banner-meta {
-  font: 9.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-muted);
 }
 .connection-banner-progress {
@@ -3784,6 +3813,29 @@ body,
   background: var(--c-panel);
 }
 
+/* A floating hint would clip inside the scrolling menu. Keep its explanation in flow. */
+.top-bar-more-menu .toolbar-tooltip-anchor {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.toolbar-menu.top-bar-more-menu .toolbar-tooltip {
+  position: static;
+  display: none;
+  opacity: 1;
+  transform: none;
+  min-width: 0;
+  max-width: 240px;
+  white-space: normal;
+  box-shadow: none;
+  margin: 0 4px 8px;
+}
+.top-bar-more-menu .toolbar-tooltip-anchor:hover .toolbar-tooltip,
+.top-bar-more-menu .toolbar-tooltip-anchor:has(> :focus-visible) .toolbar-tooltip {
+  display: flex;
+}
+.top-bar-more-menu .toolbar-tooltip::after { display: none; }
+
 .toolbar-menu-item {
   display: flex;
   align-items: center;
@@ -3844,7 +3896,7 @@ kbd.toolbar-menu-hint {
 
 .toolbar-menu-heading {
   padding: 6px 12px 2px;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--c-dim);
@@ -3882,7 +3934,7 @@ kbd.toolbar-menu-hint {
   margin: 0;
   padding: 5px 10px;
   color: var(--c-muted);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   line-height: 1.5;
 }
 
@@ -4473,7 +4525,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 .canvas-node .pin-indicator {
   color: var(--c-accent);
-  font-size: calc(11px * var(--node-chrome-scale, 1));
+  font-size: 11px;
   opacity: 0.6;
 }
 
@@ -4481,13 +4533,13 @@ html.is-node-resizing .ext-app-preview-catcher {
 .canvas-node .node-title-input {
   flex: 1;
   min-width: 0;
-  font-size: calc(12px * var(--node-chrome-scale, 1));
+  font-size: calc(12px * var(--node-title-scale, 1));
   font-weight: 600;
   color: var(--c-text);
   background: var(--c-surface-hover);
   border: 1px solid var(--c-accent);
-  border-radius: calc(3px * var(--node-chrome-scale, 1));
-  padding: calc(1px * var(--node-chrome-scale, 1)) calc(6px * var(--node-chrome-scale, 1));
+  border-radius: 3px;
+  padding: 1px 6px;
   outline: none;
   font-family: inherit;
 }
@@ -4518,18 +4570,28 @@ html.is-node-resizing .ext-app-preview-catcher {
   text-align: left;
 }
 
-.context-menu-item:hover {
+.context-menu-item:hover:not(:disabled), .context-menu-item:focus-visible {
   background: color-mix(in srgb, var(--c-accent) 10%, transparent);
   color: var(--c-accent);
 }
 
+.context-menu-item:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: -2px;
+}
+
+.context-menu-item:disabled {
+  color: var(--c-muted);
+  cursor: default;
+}
+
 .context-menu-item.is-danger .context-menu-label {
   color: var(--c-danger);
 }
 
 .context-menu-shortcut {
   color: var(--c-muted);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   margin-left: 16px;
 }
 
@@ -4559,7 +4621,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 .context-menu-section-label {
   color: var(--c-muted);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -4743,9 +4805,9 @@ html.is-node-resizing .ext-app-preview-catcher {
   .relations-panel { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--c-line); overflow: visible; }
 }
 
-/* Trace nodes — compact pills for agent tool/subagent visualization */
+/* Types1: trace cards share the node shell, with a violet running mark. */
 .canvas-node.trace-node {
-  border-radius: 28px;
+  border-radius: var(--r-node);
   min-height: 0;
 }
 
@@ -4764,19 +4826,27 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .canvas-node.trace-node.trace-running {
-  border-color: var(--c-accent);
-  animation: trace-pulse 2s ease-in-out infinite;
-}
-
-@keyframes trace-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 30%, transparent);
-  }
-  50% {
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 15%, transparent);
-  }
-}
+  border-top: 3px solid var(--c-agent);
+}
+
+.context-node { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-ui); }
+.context-node-expanded { max-width: 760px; margin: 0 auto; }
+.context-node-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+.context-usage { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--c-muted); flex-wrap: wrap; }
+.context-usage-track { display: inline-block; width: 64px; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--c-line); }
+.context-usage-track > span, .status-progress > div { display: block; height: 100%; }
+.context-node-label { color: var(--c-muted); font-size: var(--fs-meta); font-weight: 600; }
+.context-row { display: block; padding: 8px 0; border-top: 1px solid var(--c-line); overflow-wrap: anywhere; }
+.context-row-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.context-row-title > span { flex-shrink: 0; font-size: var(--fs-meta); color: var(--c-muted); }
+.context-row-title > .context-row-warning { color: var(--c-warn); }
+.context-row-meta, .context-row-summary { color: var(--c-muted); font-size: var(--fs-meta); line-height: 1.5; }
+.context-row-summary { white-space: pre-wrap; }
+.context-row-open { margin-top: 6px; padding: 4px 8px; background: var(--c-panel-soft); border: 1px solid var(--c-line); border-radius: var(--r-control); color: var(--c-text); font-size: var(--fs-meta); cursor: pointer; }
+.status-progress { height: 4px; background: var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
+.node-file-toolbar { min-width: 0; max-width: 50%; }
+.file-toolbar-metadata { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
+.prompt-key-hint { padding: 2px 6px; border: 1px solid var(--c-line); border-radius: var(--r-control); color: var(--c-muted); font: var(--fs-meta) var(--font-ui); }
 
 /* Diff nodes — unified diff viewer with per-file sections */
 .diff-node {
@@ -4858,7 +4928,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   flex-shrink: 0;
   padding: 4px 10px;
   color: var(--c-muted);
-  font-size: 10px;
+  font-size: var(--fs-meta);
 }
 
 /* Own scroll port so a wide CSV scrolls inside the node instead of blowing out
@@ -4933,23 +5003,59 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 /* MCP app iframe */
+.viewer-host, .mermaid-viewer, .mermaid-diagram, .ext-app-viewer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+.mermaid-viewer { overflow: auto; }
+.mermaid-diagram > svg { display: block; flex-shrink: 0; }
+.ext-app-frame { width: 100%; height: 100%; border: 0; background: transparent; }
+.ext-app-preview-catcher { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
+.ext-app-session-notice { padding: 8px 12px; font-size: var(--fs-meta); color: var(--c-warn); }
+.viewer-placeholder, .viewer-fallback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  height: 100%;
+  color: var(--c-muted);
+  font-size: var(--fs-ui);
+}
+.viewer-fallback { position: absolute; inset: 0; z-index: 2; background: var(--c-panel); }
+.viewer-fallback-retained { top: auto; height: auto; flex-direction: row; }
+.viewer-placeholder button, .viewer-fallback button {
+  padding: 4px 12px;
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-control);
+  color: var(--c-text);
+  background: var(--c-panel-soft);
+}
+.canvas-node:is([data-node-type="html"], [data-node-type="json-render"], [data-node-type="graph"], [data-node-type="mcp-app"], [data-node-type="mermaid"]) .node-body { padding: 0; display: flex; flex-direction: column; }
 .mcp-app-frame-stack {
   position: relative;
   isolation: isolate;
   flex: 1;
   min-width: 0;
   min-height: 0;
-  background: var(--c-panel-soft);
+  background: var(--c-panel);
   overflow: hidden;
-  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
+  border-radius: 0;
 }
 
 .mcp-app-frame-stack:has(.html-node-frame) {
   width: 100%;
   height: 100%;
-  min-height: 300px;
-  background: var(--c-bg);
-  border-radius: 6px;
+  min-height: 0;
+  background: var(--c-panel);
+  border-radius: 0;
 }
 
 .mcp-app-frame-stack:has(.html-node-frame-presentation) {
@@ -5292,7 +5398,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   backdrop-filter: blur(12px);
   border: 1px solid var(--c-line);
   border-radius: 10px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--e-2);
   z-index: 66;
   white-space: nowrap;
 }
@@ -5481,25 +5587,22 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 .attention-history-tab {
   position: absolute;
-  top: 60px;
-  right: 0;
+  top: 7px;
+  right: 8px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px 8px 14px;
-  background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
-  backdrop-filter: blur(16px);
-  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
-  border-right: 0;
-  border-radius: 14px 0 0 14px;
-  box-shadow: 0 12px 36px var(--c-shadow);
-  color: var(--c-text);
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-pill);
+  box-shadow: var(--e-2);
+  color: var(--c-text-soft);
   cursor: pointer;
   font: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-size: var(--fs-ui);
+  font-weight: 500;
   z-index: 60;
 }
 
@@ -5519,17 +5622,12 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .attention-history-tab-badge {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 9px;
-  background: var(--c-accent);
-  color: var(--c-contrast-fg);
-  font-size: 10px;
-  font-weight: 700;
+  color: var(--c-accent);
+  font-size: var(--fs-ui);
+  font-weight: 500;
   letter-spacing: 0;
   text-transform: none;
 }
@@ -5613,7 +5711,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .attention-history-time {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
   white-space: nowrap;
 }
@@ -5788,17 +5886,15 @@ html.is-node-resizing .ext-app-preview-catcher {
   max-width: 70%;
 }
 .group-name {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--group-color, var(--c-accent));
+  font-size: var(--fs-ui);
+  font-weight: 600;
+  color: var(--c-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .group-count {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-ui);
   color: var(--c-dim);
 }
 .group-title-input {
@@ -5858,7 +5954,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   background: var(--c-panel);
   border: 1px solid var(--c-line);
   border-radius: 8px;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--e-2);
   z-index: 20;
 }
 .group-menu button {
@@ -5917,10 +6013,8 @@ html.is-node-resizing .ext-app-preview-catcher {
   cursor: pointer;
 }
 .group-chip-name {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-size: var(--fs-ui);
+  font-weight: 600;
   color: var(--group-color, var(--c-accent));
   white-space: nowrap;
 }
@@ -5938,7 +6032,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   opacity: 0.8;
 }
 .group-chip-count {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 
@@ -5957,12 +6051,12 @@ html.is-node-resizing .ext-app-preview-catcher {
   white-space: nowrap;
 }
 .drop-pill-text {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   color: var(--c-accent);
 }
 .drop-pill-hint {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 
@@ -5986,13 +6080,60 @@ html.is-node-resizing .ext-app-preview-catcher {
   flex-direction: column;
   background: var(--c-panel);
   border: 1px solid var(--c-line);
-  border-radius: 14px;
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
+  border-radius: var(--r-overlay);
+  box-shadow: var(--e-2);
   overflow: hidden;
 }
 .expanded-overlay-panel.is-pinned {
   border-color: color-mix(in srgb, var(--c-pin) 45%, var(--c-line));
 }
+/* AX step footer (AxStepControls). The expanded overlay places it as a sibling of
+   its padded content area (--ax-dock-bleed: 0) and keeps it stuck to the bottom. */
+.ax-step-dock {
+  position: sticky;
+  bottom: calc(-1 * var(--ax-dock-bleed, 12px));
+  margin: 12px calc(-1 * var(--ax-dock-bleed, 12px)) calc(-1 * var(--ax-dock-bleed, 12px));
+  padding: 9px var(--ax-dock-pad, 12px) 10px;
+  background: var(--c-panel-overlay);
+  border-top: 1px solid var(--c-line);
+  backdrop-filter: blur(6px);
+}
+/* On a card the step is one body and one footer row: the step controls beside the
+   card's own actions. Rows: content (scrolls by itself, never taller than it needs),
+   extras, free space, footer. Nothing bleeds past the body, so it never scrolls. */
+.canvas-node .node-body:has(> .ax-step-dock) {
+  display: grid;
+  grid-template: minmax(0, max-content) auto 1fr auto / minmax(0, 1fr) auto;
+  padding: 0;
+  overflow: hidden;
+}
+.canvas-node .node-body:has(> .ax-step-dock) > .md-card-preview { display: contents; }
+.canvas-node .node-body:has(> .ax-step-dock) > :first-child:not(.md-card-preview),
+.canvas-node .node-body:has(> .ax-step-dock) > .md-card-preview > .md-card-content {
+  grid-area: 1 / 1 / 2 / -1;
+  min-height: 0;
+  overflow: auto;
+  padding: 10px 14px;
+}
+.canvas-node .node-body:has(> .ax-step-dock) > :not(.ax-step-dock),
+.canvas-node .node-body:has(> .ax-step-dock) > .md-card-preview > * {
+  grid-column: 1 / -1;
+}
+.canvas-node .node-body > .ax-step-dock,
+.canvas-node .node-body:has(> .ax-step-dock) > .md-card-preview > .md-card-actions {
+  grid-row: 4;
+  position: static;
+  margin: 0;
+  background: var(--c-panel);
+  border-top: 1px solid var(--c-line);
+  backdrop-filter: none;
+}
+.canvas-node .node-body > .ax-step-dock { grid-column: 1; padding: 6px 4px 6px 12px; }
+.canvas-node .node-body:has(> .ax-step-dock) > .md-card-preview > .md-card-actions {
+  grid-column: 2;
+  align-items: flex-start;
+  padding: 6px 36px 6px 4px;
+}
 .expanded-overlay-panel .ax-step-dock {
   /* Its sticky/backdrop-filter context must paint hints above the Source FAB. */
   z-index: 2;
@@ -6030,7 +6171,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   min-width: 0;
 }
 .expanded-kind-pill {
-  font-size: 9px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 999px;
@@ -6081,7 +6222,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 8px 16px;
   border-top: 1px solid var(--c-line);
   background: color-mix(in srgb, var(--c-bg) 50%, transparent);
-  font: 9.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
   flex-shrink: 0;
 }
@@ -6095,6 +6236,10 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .expanded-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
   padding: 3px 10px;
   font-size: 11px;
   font-weight: 600;
@@ -6106,6 +6251,12 @@ html.is-node-resizing .ext-app-preview-catcher {
   font-family: var(--font-ui);
 }
 
+@media (max-width: 760px) {
+  .expanded-header { height: auto; min-height: 46px; flex-wrap: wrap; row-gap: 8px; padding: 10px 16px; }
+  .expanded-title { flex: 1; }
+  .expanded-actions { order: 1; flex-basis: 100%; flex-wrap: wrap; }
+}
+
 .expanded-action-btn:hover {
   background: var(--c-surface-hover);
   color: var(--c-text);
@@ -6136,7 +6287,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .expanded-meta {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-muted);
   padding: 0 4px;
 }
@@ -6213,18 +6364,18 @@ html.is-node-resizing .ext-app-preview-catcher {
 .node-context-mark {
   display: inline-flex;
   align-items: center;
-  gap: calc(4px * var(--node-chrome-scale, 1));
-  height: calc(20px * var(--node-chrome-scale, 1));
-  padding: 0 calc(7px * var(--node-chrome-scale, 1));
+  gap: 4px;
+  height: 20px;
+  padding: 0 7px;
   border-radius: var(--r-pill);
-  font-size: calc(var(--fs-meta) * var(--node-chrome-scale, 1));
+  font-size: var(--fs-meta);
   font-weight: 500;
   white-space: nowrap;
   flex-shrink: 0;
 }
 .node-context-mark svg {
-  width: calc(12px * var(--node-chrome-scale, 1));
-  height: calc(12px * var(--node-chrome-scale, 1));
+  width: 12px;
+  height: 12px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
@@ -6249,8 +6400,8 @@ html.is-node-resizing .ext-app-preview-catcher {
 .node-context-mark.is-glyph,
 .node-near-mark.is-glyph {
   justify-content: center;
-  width: calc(22px * var(--node-chrome-scale, 1));
-  height: calc(22px * var(--node-chrome-scale, 1));
+  width: 22px;
+  height: 22px;
   padding: 0;
   box-sizing: border-box;
 }
@@ -6262,20 +6413,20 @@ html.is-node-resizing .ext-app-preview-catcher {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  gap: calc(4px * var(--node-chrome-scale, 1));
-  height: calc(18px * var(--node-chrome-scale, 1));
-  padding: 0 calc(7px * var(--node-chrome-scale, 1));
+  gap: 4px;
+  height: 18px;
+  padding: 0 7px;
   border: 1px dotted var(--c-pin);
   border-radius: var(--r-pill);
   color: color-mix(in srgb, var(--c-pin) 75%, var(--c-text));
-  font-size: calc(var(--fs-meta) * var(--node-chrome-scale, 1));
+  font-size: var(--fs-meta);
   font-weight: 500;
   white-space: nowrap;
   flex-shrink: 0;
 }
 .node-near-mark svg {
-  width: calc(12px * var(--node-chrome-scale, 1));
-  height: calc(12px * var(--node-chrome-scale, 1));
+  width: 12px;
+  height: 12px;
 }
 .node-near-ring {
   fill: none;
@@ -6438,15 +6589,15 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 /* The drawn 18 px circle sits inside the standard control hit target. */
 .ctx-pin-mark {
-  width: calc(18px * var(--node-chrome-scale, 1));
-  height: calc(18px * var(--node-chrome-scale, 1));
+  width: 18px;
+  height: 18px;
   box-sizing: border-box;
   border: 1.5px solid var(--c-muted);
   border-radius: var(--r-pill);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: calc(13px * var(--node-chrome-scale, 1));
+  font-size: 13px;
   color: var(--c-text-soft);
 }
 
@@ -6484,7 +6635,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 .board-pin-btn .ctx-pin-mark {
   width: 18px;
   height: 18px;
-  font-size: 10px;
+  font-size: var(--fs-meta);
 }
 
 /* ── Context pin HUD — top-right pill ────────────────────────── */
@@ -6527,7 +6678,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 .thread-turn-assistant {
   padding: 6px 0;
-  border-left: 2px solid color-mix(in srgb, var(--c-ok) 20%, transparent);
+  border-left: 2px solid color-mix(in srgb, var(--c-agent) 35%, transparent);
   padding-left: 10px;
   margin-left: 2px;
   overflow: hidden;
@@ -6545,10 +6696,8 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .thread-turn-role {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  font-size: var(--fs-meta);
+  font-weight: 600;
   margin-bottom: 3px;
   display: flex;
   align-items: center;
@@ -6571,11 +6720,11 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .thread-turn-assistant .thread-turn-role {
-  color: var(--c-ok);
+  color: var(--c-agent);
 }
 
 .thread-turn-assistant .status-dot {
-  background: var(--c-ok);
+  background: var(--c-agent);
 }
 
 .thread-turn-assistant .status-dot.pulsing {
@@ -6629,7 +6778,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   flex-direction: column;
   background: var(--c-panel-soft);
   border-left: 1px solid var(--c-line);
-  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--e-2);
   /* Above the receipt it is opened from, below the rail popovers. */
   z-index: 9999;
   overflow: hidden;
@@ -6658,7 +6807,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-text);
 }
 .snapshot-panel-sub {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 .snapshot-panel-spacer {
@@ -6714,7 +6863,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .snapshot-restore-note {
   padding: 0 12px 8px;
-  font-size: 9.5px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 
@@ -6734,7 +6883,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .snapshot-section-header {
   margin: 10px 2px 4px;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -6781,12 +6930,12 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-text);
 }
 .snapshot-item-time {
-  font: 9px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .snapshot-item-meta {
   margin-top: 3px;
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   color: var(--c-muted);
 }
 .snapshot-item-diff {
@@ -6804,7 +6953,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 6px;
   background: none;
   color: var(--c-muted);
-  font-size: 10.5px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   cursor: pointer;
 }
@@ -6842,7 +6991,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 .snapshot-panel-foot {
   padding: 9px 14px;
   border-top: 1px solid var(--c-line);
-  font-size: 9.5px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
   flex-shrink: 0;
 }
@@ -6868,8 +7017,8 @@ html.is-node-resizing .ext-app-preview-catcher {
   flex-direction: column;
   background: var(--c-panel);
   border: 1px solid var(--c-line);
-  border-radius: 12px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+  border-radius: var(--r-overlay);
+  box-shadow: var(--e-2);
   overflow: hidden;
   animation: command-palette-in 0.12s ease-out;
   align-self: flex-start;
@@ -6906,7 +7055,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 1px 6px;
   border: 1px solid var(--c-line);
   border-radius: 4px;
-  font: 9.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-muted);
 }
 .command-palette-esc {
@@ -6928,7 +7077,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .command-palette-group {
   padding: 6px 10px 4px;
-  font-size: 9px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -6992,7 +7141,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 8px 14px;
   border-top: 1px solid var(--c-line);
   background: color-mix(in srgb, var(--c-bg) 50%, transparent);
-  font: 9.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .command-palette-hint-spacer {
@@ -7020,7 +7169,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   backdrop-filter: blur(16px);
   border: 1px solid var(--c-line);
   border-radius: var(--radius);
-  box-shadow: 0 12px 40px var(--c-shadow-heavy), 0 0 0 1px rgba(255,255,255,0.04);
+  box-shadow: var(--e-2);
   overflow: hidden;
   animation: command-palette-in 0.12s ease-out;
 }
@@ -7040,7 +7189,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .shortcut-overlay-hint {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 .shortcut-overlay-hint kbd {
@@ -7050,7 +7199,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 3px;
   padding: 0 4px;
   font-family: var(--font-ui);
-  font-size: 9px;
+  font-size: var(--fs-meta);
   line-height: 1.6;
   margin: 0 2px;
 }
@@ -7070,7 +7219,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .shortcut-group-title {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -7228,18 +7377,18 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 1px 6px;
   border: 1px solid var(--c-line);
   border-radius: 4px;
-  font: 9.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
 }
 .empty-state-action-hint {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
 }
 .empty-state-hint {
   background: none;
   border: none;
   padding: 0;
-  font: 10.5px var(--font-code);
+  font: var(--fs-meta) var(--font-code);
   color: var(--c-dim);
   cursor: pointer;
 }
@@ -7306,7 +7455,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .image-node-warning-title {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -7372,7 +7521,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 .image-node-error-path {
   font-family: var(--font-code);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-muted);
   word-break: break-all;
   max-width: 250px;
@@ -7405,7 +7554,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 4px 10px;
   border-top: 1px solid var(--c-line);
   background: var(--c-panel-soft);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
   gap: 8px;
   min-height: 24px;
@@ -7433,7 +7582,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 3px;
   padding: 1px 6px;
   font: inherit;
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-accent);
   cursor: pointer;
 }
@@ -7597,7 +7746,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 999px;
   background: var(--c-accent);
   color: var(--c-bg);
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-weight: 700;
 }
 
@@ -7616,7 +7765,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .intent-confidence {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   font-variant-numeric: tabular-nums;
   color: var(--c-muted);
 }
@@ -7735,10 +7884,17 @@ html.is-node-dragging .intent-line-layer {
   inset: 0;
   z-index: 99;
 }
-.presentation-exit {
+.presentation-controls {
   position: absolute;
   top: 16px;
   right: 16px;
+  max-width: calc(100% - 32px);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.presentation-controls button {
   box-shadow: 0 2px 12px var(--c-shadow);
 }
 .presentation-error {
@@ -7827,7 +7983,7 @@ html.is-node-dragging .intent-line-layer {
 }
 .board-switcher-item-folder { font-size: 11px; line-height: 1.4; color: var(--c-dim); overflow-wrap: anywhere; }
 .board-switcher-item-meta {
-  font-size: 10px;
+  font-size: var(--fs-meta);
   color: var(--c-dim);
   white-space: nowrap;
   align-self: flex-start;
@@ -8761,6 +8917,7 @@ html.is-node-dragging .intent-line-layer {
 .attachment-node a, .md-import-source a { color: var(--c-accent); }
 .attachment-status { font-weight: 600; }
 .attachment-button,
+.presentation-step,
 .presentation-exit,
 .export-dialog-links a {
   min-height: 38px;
@@ -8776,12 +8933,15 @@ html.is-node-dragging .intent-line-layer {
 .attachment-button.is-primary,
 .export-dialog-links a.is-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
 .attachment-button:hover:not(:disabled),
+.presentation-step:hover:not([aria-disabled="true"]),
 .presentation-exit:hover,
 .export-dialog-links a:hover { filter: brightness(1.12); }
 .attachment-button:focus-visible,
+.presentation-step:focus-visible,
 .presentation-exit:focus-visible,
 .export-dialog-links a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
-.attachment-button:disabled { opacity: 0.5; cursor: default; }
+.attachment-button:disabled,
+.presentation-step[aria-disabled="true"] { opacity: 0.5; cursor: default; }
 .attachment-review { width: 100%; border-top: 1px solid var(--c-line); padding-top: 12px; }
 .attachment-review-actions {
   position: sticky;