pmx-canvas 0.8.2 → 0.9.1

package/dist/canvas/global.css

@@ -558,6 +558,16 @@ body,
   background: var(--c-muted);
 }
 
+/* An owner must never establish a stacking context. Card bodies own their
+   z-order; their sibling port hitboxes sit below every body in the world. */
+.canvas-node-owner {
+  position: absolute;
+  pointer-events: none;
+}
+.canvas-node-owner > .canvas-node {
+  pointer-events: auto;
+}
+
 /* Node card shared styles */
 .canvas-node {
   position: absolute;
@@ -571,7 +581,7 @@ body,
   display: flex;
   flex-direction: column;
   overflow: visible;
-  transition: box-shadow 0.15s ease;
+  transition: box-shadow 0.15s ease, opacity 0.15s ease;
   contain: layout style;
 }
 
@@ -601,7 +611,7 @@ body,
 .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);
-  transition: border-color 0.2s, box-shadow 0.2s;
+  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 */
@@ -629,35 +639,50 @@ body,
   place-items: center;
   opacity: 0;
   cursor: crosshair;
-  z-index: 10;
+  z-index: var(--node-port-z, -1);
   touch-action: none;
   transition: opacity 0.15s;
-  pointer-events: auto;
+  pointer-events: none;
 }
-.node-port::after {
-  content: '';
-  width: calc(4px * var(--node-port-scale, 1));
-  height: calc(4px * var(--node-port-scale, 1));
+.node-port-dot {
+  position: absolute;
+  pointer-events: none;
+  width: calc(8px * var(--node-port-scale, 1));
+  height: calc(8px * var(--node-port-scale, 1));
   border-radius: 50%;
   background: var(--c-accent);
   border: calc(2px * var(--node-port-scale, 1)) solid var(--c-panel);
   box-shadow: 0 0 0 calc(1px * var(--node-port-scale, 1)) var(--c-accent);
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 10;
+}
+.canvas-node-owner:hover > .node-port,
+.canvas-node-owner:has(> .canvas-node.selected) > .node-port,
+.canvas-node-owner:focus-within > .node-port {
+  opacity: 1;
+  pointer-events: auto;
 }
-.canvas-node:hover .node-port,
-.canvas-node.selected .node-port,
-.canvas-node:focus-within .node-port {
+.canvas-node-owner:hover .node-port-dot,
+.canvas-node.selected .node-port-dot,
+.canvas-node:focus-within .node-port-dot {
   opacity: 1;
 }
-.node-port:hover::after {
+.canvas-node-owner:has(> .node-port-top:hover) .node-port-dot-top,
+.canvas-node-owner:has(> .node-port-right:hover) .node-port-dot-right,
+.canvas-node-owner:has(> .node-port-bottom:hover) .node-port-dot-bottom,
+.canvas-node-owner:has(> .node-port-left:hover) .node-port-dot-left {
   background: var(--c-accent-hover);
 }
-/* Bias vertical grab areas outward so they do not steal title/footer clicks. */
-.node-port-top    { top: 0; left: 50%; transform: translate(-50%, -75%); }
-.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 75%); }
-.node-port-top::after { transform: translateY(calc(8px * var(--node-port-scale, 1))); }
-.node-port-bottom::after { transform: translateY(calc(-8px * var(--node-port-scale, 1))); }
-.node-port-left   { left: 0; top: 50%; transform: translate(-50%, -50%); }
-.node-port-right  { right: 0; top: 50%; transform: translate(50%, -50%); }
+/* Grab outside the card; even at low zoom its title and controls own their pixels. */
+.node-port-top    { top: 0; left: 50%; transform: translate(-50%, -100%); }
+.node-port-bottom { bottom: 0; left: 50%; transform: translate(-50%, 100%); }
+.node-port-left   { left: 0; top: 50%; transform: translate(-100%, -50%); }
+.node-port-right  { right: 0; top: 50%; transform: translate(100%, -50%); }
+.node-port-dot-top    { top: 0; left: 50%; transform: translate(-50%, -50%); }
+.node-port-dot-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
+.node-port-dot-left   { left: 0; top: 50%; transform: translate(-50%, -50%); }
+.node-port-dot-right  { right: 0; top: 50%; transform: translate(50%, -50%); }
 
 .canvas-node .node-titlebar {
   display: flex;
@@ -683,14 +708,13 @@ body,
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
-  /* The name is the one thing that must survive a cramped title bar. Everything
-     else in the bar is flex-shrink: 0, so without a floor the title absorbed all
-     the pressure and collapsed to an ellipsis on narrow nodes. */
-  min-width: 9ch;
+  /* The title's floor is kept by folding the header's chip (HeaderMarks.dc.html,
+     CanvasNode useHeaderFold), not by a CSS minimum. */
   min-width: 0;
 }
 
 .canvas-node .node-type-icon {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1010,6 +1034,8 @@ body,
 .app-main {
   flex: 1;
   min-width: 0;
+  min-height: 0;
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
 }
@@ -1066,6 +1092,154 @@ body,
   min-width: 0;
 }
 
+/* The right-hand group never shrinks: the context summary stays top-right at
+   every width while the left side (board name) ellipsizes. Narrow bars
+   collapse by step instead (ContextChip600.dc.html): meta text, then the
+   actions into ⋯ More, then the agent chip and Start session to icons. */
+.top-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+.top-bar-actions {
+  display: contents;
+}
+.top-bar-more {
+  position: relative;
+  display: none;
+}
+.top-bar.is-folded .top-bar-actions,
+.top-bar.is-folded > .hud-collapsible-text {
+  display: none;
+}
+.top-bar.is-folded .top-bar-more {
+  display: inline-flex;
+}
+.top-bar.is-compact {
+  gap: 4px;
+  padding-inline: 8px;
+}
+.top-bar.is-compact .top-bar-right {
+  gap: 4px;
+  margin-left: auto;
+}
+.top-bar.is-compact .board-switcher {
+  min-width: 56px;
+}
+.top-bar.is-compact .board-switcher-button {
+  gap: 2px;
+  padding-inline: 2px;
+}
+.top-bar.is-compact .agent-chips {
+  gap: 4px;
+}
+.top-bar.is-compact .context-chip {
+  gap: 4px;
+  padding-inline: 4px;
+}
+.top-bar.is-compact .top-bar-spacer,
+.top-bar.is-folded .top-bar-sep {
+  display: none;
+}
+.top-bar.is-compact .agent-chip {
+  padding: 0;
+  border: none;
+  background: none;
+}
+.top-bar.is-compact .start-session-btn {
+  padding: 5px 6px;
+}
+.top-bar.is-compact .external-indicator {
+  gap: 4px;
+  padding: 4px 6px;
+}
+.top-bar.is-compact .agent-chip > :not(.agent-chip-initial),
+.top-bar.is-compact .external-indicator-label,
+.top-bar.is-compact .external-indicator-ops,
+.top-bar.is-compact .start-session-label,
+.top-bar.is-compact .start-session-btn .beta-tag,
+.top-bar.is-compact .context-chip-cost {
+  display: none;
+}
+.top-bar.is-compact .agent-chip-initial {
+  display: inline-flex;
+}
+.top-bar.is-compact .agent-chip-initial .agent-chip-dot {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 8px;
+  height: 8px;
+  box-shadow: 0 0 0 2px var(--c-panel);
+}
+.top-bar-more-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 180px;
+  z-index: 60;
+}
+@media (max-width: 980px) {
+  .top-bar-actions {
+    display: none;
+  }
+  .top-bar-more {
+    display: inline-flex;
+  }
+}
+.agent-chip-initial {
+  display: none;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--c-agent) 16%, transparent);
+  box-shadow: inset 0 0 0 1.5px var(--c-agent);
+  color: var(--c-agent);
+  font: 600 11px var(--font-ui);
+  cursor: pointer;
+}
+@media (max-width: 760px) {
+  .top-bar-right {
+    gap: 8px;
+  }
+  .agent-chip-label,
+  .agent-chip-workers,
+  .start-session-label,
+  .start-session-btn .beta-tag,
+  .context-chip-cost,
+  .context-panel-wide {
+    display: none;
+  }
+  /* ContextChip600.dc.html: "7 in context C ⋯" — the agent chip shrinks to its
+     initial and follows the summary; ⋯ comes last. */
+  .top-bar-right > .context-chip-wrap {
+    order: 1;
+  }
+  .top-bar-right > .agent-chips {
+    order: 2;
+  }
+  .top-bar-right > .top-bar-more {
+    order: 3;
+  }
+  .agent-chip {
+    padding: 0;
+    border: none;
+    background: none;
+  }
+  .agent-chip > :not(.agent-chip-initial) {
+    display: none;
+  }
+  .agent-chip-initial {
+    display: inline-flex;
+  }
+}
+
 .top-bar-sep {
   width: 1px;
   height: 20px;
@@ -1113,9 +1287,22 @@ body,
 
 .canvas-region {
   flex: 1;
+  min-width: 0;
   min-height: 0;
   position: relative;
   overflow: hidden;
+  container: canvas / inline-size;
+}
+
+.workspace { display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
+.lifecycle-dock { flex: 0 0 380px; min-width: 0; min-height: 0; border-left: 1px solid var(--c-line); background: var(--c-panel); }
+.lifecycle-dock .knowledge-dialog.lifecycle-dialog { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; box-shadow: none; }
+.lifecycle-dock .knowledge-dialog header { position: sticky; top: -16px; z-index: 1; padding-top: 12px; background: var(--c-panel); }
+.workspace.is-reviewing .expanded-overlay-backdrop { padding: 12px; background: var(--c-bg); }
+@container (max-width: 900px) {
+  .workspace.is-reviewing { flex-direction: column; }
+  .lifecycle-dock { flex: 0 0 46%; border-left: 0; border-top: 1px solid var(--c-line); }
+  .workspace.is-reviewing .expanded-overlay-backdrop { padding: 8px; }
 }
 
 /* ── Agent presence (rail-chrome-v2 phase 3) ────────────────────
@@ -1213,6 +1400,25 @@ body,
   white-space: nowrap;
   min-width: 0;
 }
+.agent-chip-touches {
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid color-mix(in srgb, var(--c-agent) 35%, transparent);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--c-agent);
+  font: 500 11px var(--font-ui);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.agent-chip-touches:hover,
+.agent-chip-touches.is-on {
+  background: color-mix(in srgb, var(--c-agent) 16%, transparent);
+}
+.agent-chip-touches:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
 .agent-chip-who {
   font: 10px var(--font-code);
   font-weight: 400;
@@ -1305,6 +1511,65 @@ body,
 .agent-chip {
   border-left: 3px solid var(--identity-color, transparent);
 }
+/* SeeChange.dc.html: the narrow avatar keeps its ring and phase dot;
+   live counts and the lens live in a popover outside the chip's clip. */
+@media (max-width: 760px) {
+  .agent-chip {
+    padding: 0;
+    border: none;
+    background: none;
+  }
+  .agent-chips {
+    overflow: visible;
+  }
+  .agent-chips .toolbar-tooltip {
+    display: none;
+  }
+  .agent-chip-initial .agent-chip-dot {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    width: 8px;
+    height: 8px;
+    box-shadow: 0 0 0 2px var(--c-panel);
+  }
+}
+.agent-session-popover {
+  --presence-color: var(--c-agent);
+  position: fixed;
+  z-index: 10020;
+  width: 240px;
+  padding: var(--space-3);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-overlay);
+  background: var(--c-panel);
+  box-shadow: var(--e-2);
+  color: var(--c-text);
+  font-size: var(--fs-ui);
+}
+.agent-session-popover.phase-idle {
+  --presence-color: var(--c-dim);
+}
+.agent-session-popover.phase-waiting-approval {
+  --presence-color: var(--c-warn);
+}
+.agent-session-popover-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.agent-session-counts {
+  padding: 4px 10px;
+  border-radius: var(--r-pill);
+  background: color-mix(in srgb, var(--c-agent) 14%, transparent);
+  color: var(--c-agent);
+  font-weight: 500;
+}
 .minimap-presence {
   background: var(--identity-color, var(--presence-color));
 }
@@ -1359,7 +1624,9 @@ body,
 
 /* The node an attached agent is editing right now: the violet agent bar
    across the top of the header (docs/design/Context.dc.html). */
-.canvas-node.agent-mutating .node-titlebar {
+.canvas-node.agent-mutating .node-titlebar,
+/* AgentContext.dc.html: "violet bar for the session" on cards the agent edited. */
+.canvas-node.session-edited .node-titlebar {
   box-shadow: inset 0 2.5px 0 var(--c-agent);
 }
 
@@ -1929,6 +2196,64 @@ body,
   letter-spacing: 0;
 }
 
+/* Context stays useful with Agent sessions off, without the composer. */
+.context-pin-bar {
+  position: absolute;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 6px 0 12px;
+  border: 1px solid color-mix(in srgb, var(--c-pin) 30%, transparent);
+  border-radius: var(--r-pill);
+  background: var(--c-panel);
+  color: var(--c-pin);
+  box-shadow: 0 10px 30px var(--c-shadow);
+  font: 500 12px var(--font-ui);
+  white-space: nowrap;
+  z-index: 65;
+}
+.context-pin-bar button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--r-pill);
+  background: color-mix(in srgb, var(--c-pin) 14%, transparent);
+  color: var(--c-pin);
+  cursor: pointer;
+}
+.context-pin-bar button:hover {
+  background: color-mix(in srgb, var(--c-pin) 24%, transparent);
+}
+.canvas-region:has(> .context-pin-bar) > .selection-bar {
+  bottom: 62px;
+}
+@container canvas (max-width: 1200px) {
+  .canvas-region:has(> .selection-bar) > .minimap {
+    bottom: calc(28px + var(--selection-bar-height));
+  }
+  .canvas-region:has(> .context-pin-bar) > .minimap {
+    bottom: 62px;
+  }
+  .canvas-region:has(> .context-pin-bar):has(> .selection-bar) > .minimap {
+    bottom: calc(72px + var(--selection-bar-height));
+  }
+  .canvas-region:has(> .command-bar:not([hidden])) > .minimap {
+    bottom: calc(28px + var(--command-bar-height));
+  }
+  .canvas-region:has(> .command-bar:not([hidden])):has(> .selection-bar) > .minimap {
+    bottom: calc(38px + var(--command-bar-height) + var(--selection-bar-height));
+  }
+}
+
 /* ── Command bar (rail-chrome-v2 phase 5) ─────────────────────
    The human's steering surface while a session is attached: the design's
    floating composer, centered at the bottom of the canvas region, with the
@@ -1960,13 +2285,9 @@ body,
   border: 1px solid color-mix(in srgb, var(--c-pin) 35%, transparent);
   background: color-mix(in srgb, var(--c-pin) 12%, transparent);
   color: var(--c-pin);
-  font-size: 10px;
+  font-size: 11px;
   font-weight: 600;
 }
-.command-bar-chip-glyph {
-  font-size: 10px;
-  line-height: 1;
-}
 .command-bar-chip-label {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2117,53 +2438,6 @@ body,
   cursor: default;
 }
 
-/* Context-budget meter in the top bar (session-only) */
-.context-budget {
-  --tone: var(--c-ok);
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-.context-budget.tone-warn {
-  --tone: var(--c-warn);
-}
-.context-budget.tone-danger {
-  --tone: var(--c-danger);
-}
-.context-budget-caption {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--c-muted);
-}
-.context-budget-track {
-  display: block;
-  width: 72px;
-  height: 5px;
-  border-radius: 3px;
-  background: var(--c-line);
-  overflow: hidden;
-}
-.context-budget-fill {
-  display: block;
-  height: 100%;
-  border-radius: 3px;
-  background: var(--c-accent);
-  transition: width 180ms ease;
-}
-.context-budget.tone-warn .context-budget-fill,
-.context-budget.tone-danger .context-budget-fill {
-  background: var(--tone);
-}
-.context-budget-label {
-  font: 11px var(--font-code);
-  color: var(--c-text-soft);
-  min-width: 30px;
-  text-align: right;
-}
-
 /* ── External Steering (rail-chrome-v2 phase 6) ───────────────
    External writers, no session: a passive top-bar indicator, the activity
    feed popover under it, and the connected-writers sheet. Quiet otherwise. */
@@ -2624,6 +2898,7 @@ body,
 .session-panel button:focus-visible,
 .session-panel input:focus-visible,
 .command-bar button:focus-visible,
+.context-pin-bar button:focus-visible,
 .command-bar-input:focus-visible,
 .selection-bar button:focus-visible,
 .activity-feed button:focus-visible,
@@ -2674,23 +2949,13 @@ body,
 .start-session-dot {
     animation: none;
   }
-  .command-palette,
-  .snapshot-panel,
-  .session-receipt,
-  .canvas-node.group-node,
-  .activity-feed,
-  .writers-sheet,
-  .context-budget-fill {
-    animation: none;
-    transition: none;
-  }
 }
 
 /* ── Edge creation (rail-chrome-v2 item 15) ───────────────────── */
 .canvas-node.is-edge-target {
   box-shadow: 0 0 0 2px var(--c-accent), 0 0 0 6px color-mix(in srgb, var(--c-accent) 18%, transparent);
 }
-.canvas-node.is-edge-target .node-port {
+.canvas-node.is-edge-target .node-port-dot {
   opacity: 1;
   background: var(--c-accent);
 }
@@ -2829,12 +3094,14 @@ body,
   top: 14px;
   right: 14px;
   width: 290px;
-  z-index: 9998;
+  max-height: calc(100% - 28px);
+  overflow-y: auto;
+  z-index: 9996; /* Retained evidence stays below the session drawer and toolbar menus. */
   padding: 12px 14px;
   border-radius: 12px;
   border: 1px solid var(--c-line);
-  background: color-mix(in srgb, var(--c-panel) 96%, transparent);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  background: var(--c-panel);
+  box-shadow: var(--e-2);
   animation: session-panel-in 180ms ease;
 }
 .session-receipt-head {
@@ -2920,6 +3187,9 @@ body,
   color: var(--c-warn);
   font-size: var(--fs-meta);
 }
+.session-receipt-warn > span {
+  flex: 1;
+}
 .session-receipt-warn svg,
 .session-receipt-context-head svg {
   width: 13px;
@@ -2959,25 +3229,108 @@ body,
   font-size: var(--fs-meta);
   color: var(--c-muted);
 }
-.session-receipt-mini {
-  padding: 2px var(--space-2);
-  border: 1px solid var(--c-line);
-  border-radius: var(--r-control);
-  background: none;
-  color: var(--c-text);
+/* Edited row (AgentContext.dc.html): one line per card, what the edit did, See change. */
+.session-receipt-edits {
+  margin: 0;
+  padding: 0 0 0 19px;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   font-size: var(--fs-meta);
-  cursor: pointer;
+  color: var(--c-text-soft);
 }
-.session-receipt-lens {
+.session-receipt-edit-line {
   display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0;
-  border: none;
-  background: none;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+.session-receipt-edit-change {
   color: var(--c-muted);
-  font-size: var(--fs-meta);
-  cursor: pointer;
+}
+.session-receipt-link {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--c-agent);
+  font: inherit;
+  cursor: pointer;
+}
+.session-receipt-link:hover {
+  text-decoration: underline;
+}
+.session-receipt-diff-pair {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+}
+.session-receipt-undo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+}
+.session-receipt-diff-side {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--c-line);
+}
+.session-receipt-diff-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--c-dim);
+}
+.session-receipt-diff-text {
+  max-height: 120px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--c-text);
+}
+.session-receipt-diff-text del {
+  color: var(--c-muted);
+  background: var(--c-panel-soft);
+  border-radius: 3px;
+}
+.session-receipt-diff-text ins {
+  text-decoration: none;
+  background: color-mix(in srgb, var(--c-agent) 16%, transparent);
+  box-shadow: inset 0 -1.5px 0 var(--c-agent);
+  border-radius: 3px;
+}
+.session-receipt-diff-cut {
+  color: var(--c-dim);
+}
+.session-receipt-mini {
+  padding: 2px var(--space-2);
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-control);
+  background: none;
+  color: var(--c-text);
+  font-size: var(--fs-meta);
+  cursor: pointer;
+}
+.session-receipt-mini:disabled {
+  color: var(--c-dim);
+  cursor: default;
+}
+.session-receipt-lens {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--c-muted);
+  font-size: var(--fs-meta);
+  cursor: pointer;
 }
 .session-receipt-lens-track {
   position: relative;
@@ -3116,7 +3469,13 @@ body,
 /* The resize handle and connect ports carry their own pointer-events: auto,
    which punches through the inert world — a pan started on them never pans. */
 .canvas-viewport.pan-mode .node-resize-handle,
-.canvas-viewport.pan-mode .node-port {
+.canvas-viewport.pan-mode .group-frame-hit,
+.canvas-viewport.pan-mode .edge-pill-hit,
+.canvas-viewport.pan-mode .canvas-node-owner > .node-port,
+.canvas-viewport.pan-mode .canvas-node-owner > .canvas-node,
+.canvas-viewport.pan-mode .canvas-node.group-node .node-titlebar,
+.canvas-viewport.pan-mode .canvas-node.group-node .node-lifecycle-warning,
+.canvas-viewport.pan-mode .canvas-node.group-node .node-memory-links {
   pointer-events: none;
 }
 .canvas-viewport.pan-mode:active {
@@ -3420,6 +3779,11 @@ body,
   box-shadow: 0 18px 48px var(--c-shadow-heavy);
 }
 
+.toolbar-menu.top-bar-more-menu {
+  /* The top bar's backdrop root prevents this menu from blurring the drawer. */
+  background: var(--c-panel);
+}
+
 .toolbar-menu-item {
   display: flex;
   align-items: center;
@@ -3456,6 +3820,21 @@ body,
   color: var(--c-accent);
 }
 
+/* Rail Settings menu (docs/design/Chrome.dc.html §7): a muted value or key on the right. */
+.toolbar-menu-hint {
+  margin-left: auto;
+  color: var(--c-muted);
+  font: 12px var(--font-ui);
+}
+kbd.toolbar-menu-hint {
+  font-family: var(--font-code);
+}
+.toolbar-menu-divider {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--c-line);
+}
+
 .toolbar-menu-separator {
   height: 1px;
   margin: 4px 8px;
@@ -3488,6 +3867,73 @@ body,
   border-radius: 50%;
 }
 
+.rail-settings-menu {
+  width: min(300px, calc(100vw - 76px));
+}
+
+.settings-item-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.settings-caption,
+.settings-error {
+  margin: 0;
+  padding: 5px 10px;
+  color: var(--c-muted);
+  font-size: 10px;
+  line-height: 1.5;
+}
+
+.settings-error {
+  color: var(--c-danger);
+}
+
+.settings-switch {
+  display: block;
+  flex-shrink: 0;
+  margin-left: auto;
+  width: 28px;
+  height: 16px;
+  padding: 2px;
+  border: 1px solid var(--c-line);
+  border-radius: 999px;
+  background: var(--c-panel-soft);
+}
+
+.settings-switch::after {
+  content: '';
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--c-muted);
+}
+
+.settings-switch.is-on {
+  background: var(--c-accent);
+  border-color: var(--c-accent);
+}
+
+.settings-switch.is-on::after {
+  margin-left: auto;
+  background: var(--c-contrast-fg);
+}
+
+.toolbar-tooltip.settings-tooltip {
+  position: fixed;
+  width: 280px;
+  min-width: 0;
+  max-width: calc(100vw - 24px);
+  opacity: 1;
+  transform: none;
+}
+
+.toolbar-tooltip.settings-tooltip::after {
+  display: none;
+}
+
 
 @media (max-width: 900px) {
   .toolbar-tooltip {
@@ -3927,6 +4373,9 @@ body,
 }
 
 /* Auto-fit transition */
+.canvas-node-owner {
+  transition: height 0.2s ease;
+}
 .canvas-node {
   transition: height 0.2s ease, box-shadow 0.15s ease;
 }
@@ -3977,8 +4426,23 @@ html.is-node-resizing .canvas-node {
   transition: box-shadow 0.15s ease !important;
 }
 
-html.is-node-dragging,
-html.is-node-dragging *,
+/* One drag curtain keeps the cursor and pointer events over embedded frames
+   without restyling every descendant at pickup and drop on a large board. */
+html.is-node-dragging .canvas-viewport::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+  cursor: grabbing;
+  user-select: none;
+}
+
+/* A click must release on its original target so double-click menus still work. */
+html.is-node-moving .canvas-viewport::after {
+  pointer-events: auto;
+}
+
 html.is-canvas-panning,
 html.is-canvas-panning * {
   cursor: grabbing !important;
@@ -4193,6 +4657,86 @@ html.is-node-resizing .ext-app-preview-catcher {
   stroke-width: calc(0.5 * var(--edge-label-scale, 1));
 }
 
+/* Authorship lives in the hint. A person's new link keeps its muted
+   "not seen by <agent>" state until the agent's next read. */
+.edge-pill {
+  pointer-events: none;
+}
+.edge-pill-hit {
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.edge-link-mark {
+  pointer-events: none;
+  font-weight: 500;
+}
+
+.edge-link-mark.is-not-seen {
+  color: var(--c-muted);
+}
+
+/* The pill's hint, drawn at screen level below the pill. */
+.toolbar-tooltip.edge-hint {
+  position: fixed;
+  right: auto;
+  bottom: auto;
+  min-width: 0;
+  max-width: min(340px, calc(100vw - 24px));
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+  opacity: 1;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.relation-kind-control { display: grid; gap: 4px; padding: 6px 12px; }
+.relation-kind-control select,
+.relation-vocabulary input:not([type="checkbox"]),
+.relation-vocabulary select {
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-control);
+  padding: 6px;
+  font: inherit;
+  background: var(--c-input-bg);
+  color: var(--c-text);
+}
+.relation-legend { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; max-height: min(180px, 25%); overflow-x: hidden; overflow-y: auto; }
+.lifecycle-filters ~ .relation-legend { top: 48px; }
+.relation-legend > * { pointer-events: auto; flex-shrink: 0; max-width: 100%; height: 24px; box-sizing: border-box; border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-panel); color: var(--c-text); font: 500 11px var(--font-ui); padding: 0 9px; cursor: pointer; }
+.relation-legend select { background: var(--c-panel-soft); font-weight: 600; padding: 0 10px; }
+.relation-legend button { display: flex; align-items: center; gap: 6px; min-height: 24px; height: auto; overflow-wrap: anywhere; text-align: left; border-radius: var(--r-pill); }
+.relation-legend button[aria-pressed="true"] { border-color: var(--relation-ink); }
+.relation-swatch { width: 14px; height: 2.5px; border-radius: 2px; background: var(--relation-ink); }
+.relation-count { color: var(--c-muted); font-variant-numeric: tabular-nums; }
+.expanded-content-row { display: flex; flex: 1; min-height: 0; }
+.expanded-content-row > .expanded-body { flex: 1; min-width: 0; }
+.relations-panel {
+  width: 280px;
+  flex: 0 0 280px;
+  padding: 16px;
+  box-sizing: border-box;
+  border-left: 1px solid var(--c-line);
+  overflow: auto;
+  background: var(--c-panel);
+  font-size: var(--fs-ui);
+}
+.relations-panel h3 { margin: 0 0 12px; font-size: var(--fs-title); }
+.relation-row { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--c-line); overflow-wrap: anywhere; }
+.relation-row h4 { margin: 0 0 4px; font-size: var(--fs-meta); color: var(--c-muted); }
+.relation-row p, .relation-vocabulary p { margin: 0 0 8px; color: var(--c-muted); font-size: var(--fs-meta); }
+.relation-target { border: 0; padding: 0; background: none; color: var(--c-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
+.relation-vocabulary { display: grid; gap: 8px; margin-top: 12px; }
+.vocabulary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+@media (max-width: 760px) {
+  .expanded-content-row:has(.relations-panel) { flex-direction: column; overflow: auto; }
+  .expanded-content-row:has(.relations-panel) > .expanded-body { flex: 0 0 240px; }
+  .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 */
 .canvas-node.trace-node {
   border-radius: 28px;
@@ -4385,6 +4929,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 /* MCP app iframe */
 .mcp-app-frame-stack {
   position: relative;
+  isolation: isolate;
   flex: 1;
   min-width: 0;
   min-height: 0;
@@ -4719,13 +5264,9 @@ html.is-node-resizing .ext-app-preview-catcher {
 /* Selection action bar — floating bottom-center of the canvas region
    (rail-chrome-v2 phase 7, item 13). */
 /* In a session the command bar owns the bottom-center slot — lift the
-   selection bar clear of it (composer + chips row); on the quiet board the
-   pin bar does, so lift past that instead. */
-[data-session-active='true'] .selection-bar {
-  bottom: 124px;
-}
-.selection-bar.is-above-pin-bar {
-  bottom: 70px;
+   selection bar clear of it (composer + chips row). */
+.canvas-region:has(> .command-bar:not([hidden])) > .selection-bar {
+  bottom: calc(28px + var(--command-bar-height));
 }
 .selection-bar {
   position: absolute;
@@ -4733,7 +5274,12 @@ html.is-node-resizing .ext-app-preview-catcher {
   left: 50%;
   transform: translateX(-50%);
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: calc(100% - 32px);
   gap: 2px;
   padding: 6px 8px;
   background: color-mix(in srgb, var(--c-panel) 97%, transparent);
@@ -5159,7 +5705,24 @@ html.is-node-resizing .ext-app-preview-catcher {
     border-color 150ms ease,
     background 150ms ease;
 }
-.canvas-node.group-node:hover {
+.canvas-node-owner > .canvas-node.group-node {
+  /* Only the body's transparent hit target sits below child ports. Keep the
+     frame's visual z-order and its existing chrome/menu elevation unchanged. */
+  pointer-events: none;
+}
+.group-frame-hit {
+  position: absolute;
+  inset: 0;
+  border-radius: 14px;
+  pointer-events: auto;
+}
+.canvas-node.group-node .node-titlebar,
+.canvas-node.group-node .node-lifecycle-warning,
+.canvas-node.group-node .node-memory-links {
+  pointer-events: auto;
+}
+.canvas-node.group-node:hover,
+.canvas-node-owner:hover > .canvas-node.group-node {
   border-color: color-mix(in srgb, var(--group-color, var(--c-accent)) 55%, transparent);
 }
 .canvas-node.group-node.active,
@@ -5397,73 +5960,6 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-dim);
 }
 
-/* ── Context pin bar — persistent floating indicator ─────────── */
-.context-pin-bar {
-  position: absolute;
-  bottom: 18px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 14px;
-  background: var(--c-panel-glass);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--c-pin);
-  border-radius: var(--radius);
-  box-shadow: 0 8px 32px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-pin) 15%, transparent);
-  z-index: 64;
-  white-space: nowrap;
-}
-
-.context-pin-bar-count {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--c-pin);
-}
-
-.context-pin-bar-btn {
-  padding: 5px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  background: color-mix(in srgb, var(--c-pin) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--c-pin) 30%, transparent);
-  border-radius: var(--radius-sm);
-  color: var(--c-pin);
-  cursor: pointer;
-  font-family: var(--font-ui);
-}
-
-.context-pin-bar-btn:hover {
-  background: color-mix(in srgb, var(--c-pin) 20%, transparent);
-  border-color: var(--c-pin);
-}
-
-.context-pin-bar-ask {
-  background: var(--c-pin);
-  color: var(--c-on-pin);
-  border-color: var(--c-pin);
-}
-
-.context-pin-bar-ask:hover {
-  background: color-mix(in srgb, var(--c-pin) 85%, var(--c-text));
-  border-color: color-mix(in srgb, var(--c-pin) 85%, var(--c-text));
-}
-
-.context-pin-bar-clear {
-  background: none;
-  border: none;
-  color: var(--c-muted);
-  font-size: 16px;
-  padding: 2px 6px;
-  line-height: 1;
-}
-
-.context-pin-bar-clear:hover {
-  color: var(--c-text);
-  background: var(--c-surface-hover);
-}
-
 /* ── Expanded overlay actions ────────────────────────────────── */
 /* Expanded node view (rail-chrome-v2 phase 7, item 16): scrim + inset panel
    with 36/48px margins, header with kind pill + pin state, footer strip. */
@@ -5491,10 +5987,34 @@ html.is-node-resizing .ext-app-preview-catcher {
 .expanded-overlay-panel.is-pinned {
   border-color: color-mix(in srgb, var(--c-pin) 45%, var(--c-line));
 }
-.expanded-header {
+.expanded-overlay-panel .ax-step-dock {
+  /* Its sticky/backdrop-filter context must paint hints above the Source FAB. */
+  z-index: 2;
+}
+.expanded-overlay-panel:has(.ax-step-dock) .md-expanded-document {
   display: flex;
-  align-items: center;
-  gap: 10px;
+  flex-direction: column;
+}
+.expanded-overlay-panel:has(.ax-step-dock) .md-reader {
+  flex: 1;
+  min-height: 0;
+}
+.expanded-overlay-panel:has(.ax-step-dock) .md-edit-fab {
+  /* Keep Source and the document out of the bottom dock's hint area. */
+  position: static;
+  order: -1;
+  align-self: flex-end;
+  flex-shrink: 0;
+  margin-bottom: 16px;
+}
+.ax-step-dock:has(.toolbar-tooltip-anchor:hover) .toolbar-tooltip-anchor:not(:hover) > :focus-visible + .toolbar-tooltip {
+  /* Pointer exploration temporarily takes precedence without moving keyboard focus. */
+  opacity: 0;
+}
+.expanded-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   height: 46px;
   padding: 0 16px;
   border-bottom: 1px solid var(--c-line);
@@ -5729,8 +6249,22 @@ html.is-node-resizing .ext-app-preview-catcher {
   background: color-mix(in srgb, var(--c-warn) 14%, transparent);
 }
 
+/* Folded to its glyph when the title needs the room (HeaderMarks.dc.html): a
+   22 px round chip, the word in its hint. */
+.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));
+  padding: 0;
+  box-sizing: border-box;
+}
+
 /* Near a pin (docs/design/NearPin.dc.html): dotted, weaker than in context. */
 .node-near-mark {
+  background: none;
+  font-family: inherit;
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: calc(4px * var(--node-chrome-scale, 1));
@@ -5757,6 +6291,139 @@ html.is-node-resizing .ext-app-preview-catcher {
 .node-near-dot {
   fill: currentColor;
 }
+/* §3 the moment it changes: preview while dragged, one pulse on a drop inside, fade on a drop outside. */
+.node-near-mark.is-preview {
+  opacity: 0.6;
+}
+.node-near-mark.is-pulse {
+  animation: near-pulse 0.9s ease-out 1;
+}
+.node-near-mark.is-fading {
+  animation: near-fade 0.9s ease-in 1 forwards;
+}
+@keyframes near-pulse {
+  0%,
+  100% {
+    background: transparent;
+    box-shadow: none;
+  }
+  35% {
+    background: color-mix(in srgb, var(--c-pin) 18%, transparent);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-pin) 12%, transparent);
+  }
+}
+@keyframes near-fade {
+  to {
+    opacity: 0;
+  }
+}
+/* §2 hover a near chip: the pins by distance, then Pin / Show pins. Lives
+   over the canvas, not in the node: .node-content paints contained. */
+.near-hint {
+  position: fixed;
+  overflow-y: auto;
+  box-sizing: border-box;
+  z-index: 10010;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 240px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
+  background: color-mix(in srgb, var(--c-panel) 92%, black 8%);
+  box-shadow: 0 14px 36px var(--c-shadow-heavy);
+  color: var(--c-text);
+}
+.near-hint-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+.near-hint-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+}
+.near-hint-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.near-hint-distance {
+  flex-shrink: 0;
+  font-family: var(--font-code);
+  font-size: 11px;
+  color: var(--c-muted);
+}
+.near-hint-body {
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--c-text-soft);
+}
+.near-hint-actions {
+  display: flex;
+  gap: 6px;
+}
+.near-hint-actions button {
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.near-hint-pin {
+  border: 0;
+  background: var(--c-pin);
+  color: var(--c-contrast-fg);
+  font-weight: 600;
+}
+.near-hint-show {
+  border: 1px solid var(--c-line);
+  background: transparent;
+  color: var(--c-text);
+}
+.near-hint-show[aria-pressed='true'] {
+  border-color: var(--c-pin);
+  color: var(--c-pin);
+}
+
+/* §2 which pin: tethers and the 600 px radius, in screen space over the world. */
+.near-pin-layer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 5;
+}
+.near-pin-radius {
+  fill: none;
+  stroke: color-mix(in srgb, var(--c-pin) 25%, transparent);
+  stroke-width: 1.5;
+  stroke-dasharray: 3 6;
+}
+.near-pin-tether path {
+  fill: none;
+  stroke: var(--c-pin);
+  stroke-width: 1.5;
+  stroke-dasharray: 2 5;
+  stroke-linecap: round;
+}
+.near-pin-number {
+  fill: var(--c-bg);
+  stroke: var(--c-pin);
+  stroke-dasharray: 1.5 2;
+}
+.near-pin-number-label {
+  fill: var(--c-pin);
+  font-size: 11px;
+  font-weight: 600;
+  text-anchor: middle;
+  dominant-baseline: central;
+}
 
 /* Pinned by an agent: a violet dot on the pin badge. */
 .ctx-pin-mark {
@@ -5800,6 +6467,31 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-on-pin);
 }
 
+/* Board pins (docs/design/BoardPins.dc.html): the card pin's mark on a bare
+   22 px hit target, on Home cards, the switcher, portal cards and the top bar. */
+.board-pin-btn {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-radius: var(--r-pill);
+}
+.board-pin-btn:focus-visible {
+  outline: 2px solid var(--c-pin);
+  outline-offset: 1px;
+}
+.board-pin-btn .ctx-pin-mark {
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
+}
+
 /* ── Context pin HUD — top-right pill ────────────────────────── */
 .context-pin-hud {
   display: flex;
@@ -6427,6 +7119,10 @@ html.is-node-resizing .ext-app-preview-catcher {
   z-index: 5;
   width: 560px;
   max-width: calc(100% - 48px);
+  max-height: calc(100% - 48px);
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 2px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -6434,6 +7130,9 @@ html.is-node-resizing .ext-app-preview-catcher {
   text-align: center;
   animation: empty-state-in 0.4s ease-out;
 }
+.empty-state > * {
+  flex-shrink: 0;
+}
 @keyframes empty-state-in {
   from {
     opacity: 0;
@@ -6464,7 +7163,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .empty-state-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr);
   gap: 10px;
   width: 100%;
 }
@@ -6484,6 +7183,9 @@ html.is-node-resizing .ext-app-preview-catcher {
 .empty-state-action:hover {
   border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
 }
+.empty-state-action > svg {
+  flex-shrink: 0;
+}
 .empty-state-action.is-agent:hover {
   border-color: color-mix(in srgb, var(--c-agent) 45%, transparent);
 }
@@ -6501,8 +7203,31 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 .empty-state-action-label {
   flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+}
+.empty-state-action-description {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--c-muted);
+}
+.empty-state-agent {
+  width: 100%;
+  padding-top: 16px;
+  border-top: 1px solid var(--c-line);
+}
+.empty-state-agent-title {
   font-size: 12px;
   font-weight: 600;
+  color: var(--c-text-soft);
+}
+.empty-state-agent .is-agent {
+  width: 100%;
+  margin-top: 12px;
 }
 .empty-state-action kbd {
   padding: 1px 6px;
@@ -7004,7 +7729,8 @@ html.is-node-dragging .intent-line-layer {
   cursor: pointer;
 }
 .is-presenting > :not(.app-main):not(.presentation-error):not(.presentation-navigation),
-.is-presenting .app-main > :not(.canvas-region),
+.is-presenting .app-main > :not(.workspace),
+.is-presenting .workspace > :not(.canvas-region),
 .is-presenting .canvas-region > :not(.canvas-viewport) {
   display: none !important;
 }
@@ -7045,9 +7771,9 @@ html.is-node-dragging .intent-line-layer {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  max-width: 280px;
+  min-width: 0;
+  max-width: min(280px, 100%);
   padding: 6px 8px;
-  margin-left: -8px;
   background: none;
   border: 1px solid transparent;
   border-radius: 8px;
@@ -7086,6 +7812,8 @@ html.is-node-dragging .intent-line-layer {
   flex-shrink: 0;
 }
 .board-switcher-recents { min-height: 0; overflow-y: auto; }
+.board-switcher-row { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
+.board-switcher-row > .toolbar-menu-item { flex: 1; min-width: 0; }
 .board-switcher-menu .toolbar-menu-item { padding: 10px; gap: 12px; }
 .board-switcher-menu .toolbar-menu-item:hover,
 .board-switcher-menu .toolbar-menu-item:focus-visible {
@@ -7112,132 +7840,6 @@ html.is-node-dragging .intent-line-layer {
 }
 .board-switcher-actions { border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 6px; flex-shrink: 0; }
 
-.home-view {
-  position: absolute;
-  inset: 0;
-  /* Above the canvas's floating chrome (the updates tab sits at 60), below menus and prompts. */
-  z-index: 70;
-  overflow-y: auto;
-  background: var(--c-bg);
-  padding: 32px 16px;
-}
-.home-view-inner {
-  max-width: 720px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-}
-.home-view-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.home-view-title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 650;
-  color: var(--c-text);
-}
-.home-view-new {
-  padding: 7px 14px;
-  border-radius: 8px;
-  border: 1px solid var(--c-accent);
-  background: var(--c-accent);
-  color: var(--c-bg);
-  font-weight: 600;
-  cursor: pointer;
-}
-.home-view-empty {
-  color: var(--c-text-soft);
-  font-size: 13px;
-}
-.home-view-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-}
-.home-board {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 8px 7px 5px;
-  border: 1px solid var(--c-line);
-  border-radius: 10px;
-  background: var(--c-panel);
-}
-.home-board.is-confirming {
-  border-color: var(--c-danger);
-  padding: 10px 12px;
-  flex-wrap: wrap;
-}
-.home-board-open {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  padding: 6px 8px;
-  background: none;
-  border: none;
-  border-radius: 8px;
-  color: var(--c-text);
-  cursor: pointer;
-  text-align: left;
-}
-.home-board-open:hover {
-  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
-}
-.home-board-name {
-  max-width: 100%;
-  font-size: 14px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.home-board-meta {
-  font: 11px var(--font-code);
-  color: var(--c-text-soft);
-}
-.home-board-confirm-text {
-  flex: 1 1 240px;
-  font-size: 13px;
-  color: var(--c-text);
-}
-.home-board-actions {
-  display: flex;
-  gap: 2px;
-  flex-shrink: 0;
-}
-.home-board-action {
-  padding: 6px 7px;
-  border-radius: 6px;
-  border: 1px solid transparent;
-  background: none;
-  color: var(--c-dim);
-  font-size: 11px;
-  cursor: pointer;
-}
-.home-board-action:hover {
-  border-color: var(--c-line);
-  background: color-mix(in srgb, var(--c-text) 5%, transparent);
-  color: var(--c-text-soft);
-}
-.home-board-action.is-danger {
-  border-color: var(--c-danger);
-  background: var(--c-danger);
-  color: var(--c-bg);
-  font-weight: 600;
-}
-.home-board-open:focus-visible,
-.home-board-action:focus-visible,
-.home-view-new:focus-visible,
 .board-switcher-button:focus-visible {
   outline: 2px solid var(--c-accent);
   outline-offset: 2px;
@@ -7291,204 +7893,1850 @@ html.is-node-dragging .intent-line-layer {
   word-break: normal;
 }
 
-/* ── Home categories ── */
-.home-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.home-section-head {
-  display: flex;
+/* Visually hidden, still read by assistive tech. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* ── Home (docs/design/Home.dc.html; Pane600.dc.html at ≤ 760 px) ──
+   Library tree left, the folder's subfolders and board cards in the middle,
+   the selected board's details right. Folders carry no colour. */
+.home-view {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: 256px minmax(0, 1fr);
+  background: var(--c-bg);
+  color: var(--c-text);
+  font-family: var(--font-ui);
+  overflow: hidden;
+}
+.home-view.has-details {
+  grid-template-columns: 256px minmax(0, 1fr) 280px;
+}
+.home-library,
+.home-details {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--c-bg) 60%, var(--c-panel));
+}
+.home-library {
+  padding: 16px 12px;
+  border-right: 1px solid var(--c-line);
+}
+.home-library-head {
+  display: flex;
   align-items: center;
-  gap: 9px;
-  min-height: 42px;
+  justify-content: space-between;
+  padding: 0 4px;
+}
+.home-library-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+.home-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 6px;
+  border: 1px solid var(--c-line);
+  background: var(--c-panel);
+  color: var(--c-muted);
+}
+.home-search svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+.home-search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--c-text);
+  font: inherit;
+  font-size: 12px;
+}
+.home-search:focus-within {
+  border-color: var(--c-accent);
+}
+.home-library-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.home-library-section.is-folders {
+  flex: 1;
+}
+.home-section-label {
+  padding: 0 8px 4px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-dim);
+}
+.home-main-section .home-section-label {
+  padding: 0;
+}
+.home-tree,
+.home-pinned {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.home-tree-row,
+.home-pinned-row,
+.home-tree-new {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 30px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--c-text);
+  font: inherit;
+  text-align: left;
+}
+.home-tree-row:hover,
+.home-pinned-row:hover {
+  background: color-mix(in srgb, var(--c-panel) 70%, transparent);
+}
+.home-tree-row.is-selected {
+  background: var(--c-panel);
+}
+.home-tree-indent {
+  flex-shrink: 0;
+}
+.home-tree-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--c-muted);
+  cursor: pointer;
+}
+.home-tree-chevron svg {
+  width: 12px;
+  height: 12px;
+}
+.home-tree-name,
+.home-pinned-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+.home-pinned-row {
   width: 100%;
-  padding: 9px 10px;
-  background: none;
-  border: none;
-  border-radius: 8px;
+  cursor: pointer;
+}
+.home-tree-row.is-unfiled .home-tree-name {
   color: var(--c-text-soft);
+}
+.home-tree-pin {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--c-pin);
+  flex-shrink: 0;
+}
+.home-tree-count,
+.home-pinned-cost {
+  font-size: 11px;
+  color: var(--c-dim);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.home-pinned-cost {
+  padding: 2px 8px 0 32px;
+}
+.home-tree-new {
+  margin-top: 4px;
+  color: var(--c-muted);
   font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
   cursor: pointer;
+}
+.home-pin-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--c-pin);
+  color: var(--c-bg);
+  flex-shrink: 0;
+}
+.home-pin-dot svg {
+  width: 9px;
+  height: 9px;
+}
+.home-main {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+  min-height: 0;
+  padding: 24px 32px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.home-main-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 16px;
+}
+.home-main-title {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+.home-crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--c-dim);
+}
+.home-crumbs button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.home-crumbs > span:last-child button {
+  color: var(--c-text-soft);
+}
+.home-crumb-sep {
+  margin: 0 6px;
+  opacity: 0.6;
+}
+.home-view-title {
+  margin: 2px 0 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.home-main-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.home-folders,
+.home-cards,
+.home-hits {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+}
+.home-hits {
+  grid-template-columns: 1fr;
+  gap: 6px;
+}
+.home-folder {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 2px;
+  width: 100%;
+  height: 112px;
+  box-sizing: border-box;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid var(--c-line);
+  background: var(--c-panel);
+  color: var(--c-text);
+  font: inherit;
   text-align: left;
+  overflow: hidden;
+  cursor: pointer;
+}
+.home-folder:hover,
+.home-card:hover {
+  border-color: color-mix(in srgb, var(--c-line) 50%, var(--c-accent));
+}
+.home-folder-stack span {
+  position: absolute;
+  width: 56px;
+  height: 36px;
+  border-radius: 4px;
+  border: 1px solid var(--c-line);
+  background: color-mix(in srgb, var(--c-panel) 80%, var(--c-text) 4%);
+}
+.home-folder-stack span:nth-child(1) { left: 14px; top: 14px; }
+.home-folder-stack span:nth-child(2) { left: 22px; top: 20px; }
+.home-folder-stack span:nth-child(3) { left: 30px; top: 26px; }
+.home-folder-context {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--c-pin) 12%, transparent);
+  color: var(--c-pin);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 20px;
+}
+.home-folder-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+.home-folder-meta {
+  font-size: 11px;
+  color: var(--c-muted);
+}
+.home-card {
+  position: relative;
+  border-radius: 10px;
+  border: 1px solid var(--c-line);
+  background: var(--c-panel);
+  box-shadow: 0 1px 2px var(--c-shadow);
+  overflow: hidden;
+}
+.home-card.is-pinned {
+  border: 1.5px solid var(--c-pin);
+}
+.home-card.is-selected {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+.home-card-select {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.home-card .board-pin-btn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.home-thumb {
+  position: relative;
+  width: 100%;
+  height: 128px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--c-line);
+  background-color: var(--c-bg);
+  background-image: radial-gradient(color-mix(in srgb, var(--c-muted) 18%, transparent) 1px, transparent 1.2px);
+  background-size: 12px 12px;
+}
+/* The board's extent, drawn inside a 16 px margin. */
+.home-thumb-inner {
+  position: absolute;
+  inset: 16px;
+}
+.home-thumb-card {
+  position: absolute;
+  box-sizing: border-box;
+  min-width: 3px;
+  min-height: 3px;
+  border-radius: 3px;
+  border: 1px solid var(--c-line);
+  background: var(--c-panel);
+}
+.home-thumb-card.is-pinned {
+  border-color: var(--c-pin);
+}
+.home-card-body,
+.home-hit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  min-width: 0;
+}
+.home-hit {
+  width: 100%;
+  gap: 2px;
+  border: 1px solid var(--c-line);
+  border-radius: 8px;
+  background: var(--c-panel);
+  color: var(--c-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.home-card-name {
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.home-card-readme {
+  height: 33px;
+  overflow: hidden;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--c-text-soft);
+}
+.home-card-meta {
+  display: flex;
+  gap: 10px;
+  font-size: 11px;
+  color: var(--c-dim);
+  overflow: hidden;
+  white-space: nowrap;
+}
+.home-card-when {
+  margin-left: auto;
+}
+.home-review-link, .home-card-review {
+  border: 0;
+  background: transparent;
+  color: var(--c-warn);
+  font: 12px var(--font-ui);
+  text-align: left;
+  cursor: pointer;
+}
+.home-review-link { padding: 0; color: var(--c-text-soft); text-decoration: underline; text-underline-offset: 3px; }
+.home-review-link.has-review { color: var(--c-warn); }
+.home-card-review { margin: 0 14px 12px; padding: 0; }
+.home-review-link:focus-visible, .home-card-review:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
+.home-details {
+  padding: 20px 18px;
+  border-left: 1px solid var(--c-line);
+}
+.home-details-grip {
+  display: none;
+}
+.home-details-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.home-details-folder {
+  font-size: 11px;
+  color: var(--c-dim);
+}
+.home-details-name {
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.home-details-context {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--c-line);
+}
+.home-details-context.is-on {
+  border-color: color-mix(in srgb, var(--c-pin) 30%, transparent);
+  background: color-mix(in srgb, var(--c-pin) 8%, transparent);
+}
+.home-details-context-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.home-details-context-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+.home-details-context.is-on .home-details-context-label {
+  color: var(--c-pin);
+}
+.home-switch {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--c-line);
+  cursor: pointer;
+}
+.home-switch[aria-checked='true'] {
+  background: var(--c-pin);
+}
+.home-switch-knob {
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--c-bg);
+  transition: left 0.12s ease;
+}
+.home-switch[aria-checked='true'] .home-switch-knob {
+  left: 16px;
+}
+.home-details-actions {
+  margin-top: 0;
+  display: flex;
+  gap: 8px;
+}
+.home-details-confirm {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.home-details-confirm .home-details-actions {
+  margin-top: 0;
+}
+.home-button {
+  height: 34px;
+  padding: 0 14px;
+  border-radius: 6px;
+  border: 1px solid var(--c-line);
+  background: var(--c-panel);
+  color: var(--c-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.home-button.is-primary {
+  border: 0;
+  background: var(--c-pin);
+  color: var(--c-bg);
+  font-weight: 600;
+}
+.home-details-actions .home-button.is-primary {
+  flex: 1;
+  white-space: nowrap;
+}
+.home-main-head .home-button {
+  height: 32px;
+}
+.home-button.is-icon {
+  width: 34px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-button.is-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.home-button.is-danger {
+  border-color: color-mix(in srgb, var(--c-danger) 50%, transparent);
+  color: var(--c-danger);
+}
+.home-more {
+  position: relative;
+}
+.home-more-menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 6px);
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid var(--c-line);
+  background: var(--c-panel);
+  box-shadow: 0 10px 30px var(--c-shadow-heavy);
+  z-index: 2;
+}
+.home-more-item {
+  height: 30px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--c-text);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.home-more-item:hover {
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
+}
+.home-view-empty {
+  font-size: 13px;
+  color: var(--c-text-soft);
+}
+.home-narrow {
+  display: none;
+}
+.home-tree-row button:focus-visible,
+.home-pinned-row:focus-visible,
+.home-tree-new:focus-visible,
+.home-folder:focus-visible,
+.home-card-select:focus-visible,
+.home-button:focus-visible,
+.home-switch:focus-visible,
+.home-more-item:focus-visible,
+.home-hit:focus-visible,
+.home-crumbs button:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+/* Pane600.dc.html: one column; the tree is a folder picker, pins a banner,
+   boards a list, details a bottom sheet. */
+@media (max-width: 760px) {
+  .home-view,
+  .home-view.has-details {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .home-library {
+    display: none;
+  }
+  .home-library.is-open {
+    display: flex;
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    top: 120px;
+    max-height: 60%;
+    z-index: 3;
+    border: 1px solid var(--c-line);
+    border-radius: 10px;
+    box-shadow: 0 14px 36px var(--c-shadow-heavy);
+  }
+  .home-library.is-open .home-library-head,
+  .home-library.is-open .home-search,
+  .home-library.is-open .home-library-section:not(.is-folders) {
+    display: none;
+  }
+  .home-main {
+    padding: 12px 12px 160px;
+    gap: 12px;
+  }
+  .home-narrow {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .home-narrow-context {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    border: 1px solid color-mix(in srgb, var(--c-pin) 30%, transparent);
+    background: color-mix(in srgb, var(--c-pin) 8%, transparent);
+    color: var(--c-muted);
+    font: inherit;
+    font-size: 12px;
+    text-align: left;
+    cursor: pointer;
+  }
+  .home-narrow-context-label {
+    color: var(--c-pin);
+    font-weight: 600;
+  }
+  .home-narrow-context-cost {
+    flex: 1;
+  }
+  .home-narrow-picker {
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 10px;
+    border-radius: 6px;
+    border: 1px solid var(--c-line);
+    background: var(--c-panel);
+    color: var(--c-text);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .home-main-head .home-button {
+    height: 30px;
+  }
+  .home-folders {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+  }
+  .home-folder {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+    height: 30px;
+    padding: 0 12px;
+    border-radius: 999px;
+    white-space: nowrap;
+  }
+  .home-folder-stack,
+  .home-folder-context {
+    display: none;
+  }
+  .home-folder-meta::before {
+    content: ' · ';
+  }
+  .home-cards {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+  .home-card-select {
+    flex-direction: row;
+    gap: 12px;
+    padding: 10px;
+  }
+  .home-thumb {
+    width: 96px;
+    height: 64px;
+    flex-shrink: 0;
+    border: 1px solid var(--c-line);
+    border-radius: 6px;
+    background-size: 8px 8px;
+  }
+  .home-thumb-inner {
+    inset: 6px;
+  }
+  .home-card-body {
+    padding: 0 28px 0 0;
+    gap: 2px;
+  }
+  .home-card-readme {
+    height: auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .home-details {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: 70%;
+    padding: 12px;
+    gap: 10px;
+    border-left: 0;
+    border-top: 1px solid var(--c-line);
+    border-radius: 14px 14px 0 0;
+    box-shadow: 0 -10px 30px var(--c-shadow-heavy);
+    z-index: 3;
+  }
+  .home-details-grip {
+    display: block;
+    align-self: center;
+    box-sizing: content-box;
+    width: 36px;
+    height: 4px;
+    /* A 4 px bar is the look; the padding makes the tap target. */
+    padding: 10px 12px;
+    margin: -10px 0;
+    border: 0;
+    border-radius: 999px;
+    background: var(--c-line);
+    background-clip: content-box;
+    cursor: pointer;
+  }
+}
+.board-copy-dialog,
+.board-link-dialog {
+  width: min(540px, calc(100vw - 32px));
+  max-height: calc(100dvh - 40px);
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.board-copy-dialog form,
+.board-copy-field,
+.board-copy-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.board-copy-dialog h2,
+.board-link-dialog h2 { margin: 0 0 12px; font-size: 17px; }
+.board-copy-field { color: var(--c-text-soft); font-size: 12px; }
+.board-copy-cards {
+  margin: 14px 0;
+  padding: 8px;
+  border: 1px solid var(--c-line);
+  border-radius: 9px;
+  max-height: 230px;
+  overflow-y: auto;
+}
+.board-copy-cards legend { color: var(--c-text-soft); font-size: 12px; }
+.board-copy-card {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px;
+  border-radius: 7px;
+  cursor: pointer;
+}
+.board-copy-card:hover { background: color-mix(in srgb, var(--c-accent) 9%, transparent); }
+.board-copy-card span { display: flex; flex-direction: column; min-width: 0; }
+.board-copy-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.board-copy-card small,
+.board-link-results small { color: var(--c-text-soft); font: 11px var(--font-code); }
+.board-copy-options { font-size: 13px; }
+.board-copy-options label { display: flex; gap: 8px; align-items: center; }
+.board-copy-note,
+.board-copy-status { color: var(--c-text-soft); font-size: 12px; line-height: 1.5; }
+.board-copy-error { color: var(--c-danger); font-size: 12px; margin-top: 8px; }
+.board-link-results { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; padding: 0; max-height: 320px; overflow-y: auto; list-style: none; }
+.board-link-results button { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-panel); color: var(--c-text); text-align: left; cursor: pointer; }
+.board-link-results button:hover,
+.board-link-results button:focus-visible { border-color: var(--c-accent); outline: none; }
+.home-folder-dialog {
+  width: min(460px, calc(100vw - 32px));
+  max-height: calc(100dvh - 48px);
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.home-folder-hint {
+  color: var(--c-text-soft);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.home-folder-options {
+  margin: 12px 0;
+  padding: 8px;
+  border: 1px solid var(--c-line);
+  border-radius: 8px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.home-folder-options legend { color: var(--c-text-soft); font-size: 12px; }
+.home-folder-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  font-size: 13px;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.home-folder-option:has(input:checked) { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
+.home-folder-option input { accent-color: var(--c-accent); flex-shrink: 0; }
+.home-folder-new { display: flex; flex-direction: column; gap: 6px; font-size: 12px; overflow-wrap: anywhere; }
+.attachment-node { padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; overflow: auto; height: 100%; box-sizing: border-box; }
+.attachment-node p { margin: 0; color: var(--c-text-soft); line-height: 1.5; }
+.attachment-node a, .md-import-source a { color: var(--c-accent); }
+.attachment-status { font-weight: 600; }
+.attachment-button,
+.presentation-exit,
+.export-dialog-links a {
+  min-height: 38px;
+  padding: 8px 14px;
+  border: 1px solid var(--c-text-soft);
+  border-radius: 8px;
+  background: var(--c-panel);
+  color: var(--c-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.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-exit:hover,
+.export-dialog-links a:hover { filter: brightness(1.12); }
+.attachment-button: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-review { width: 100%; border-top: 1px solid var(--c-line); padding-top: 12px; }
+.attachment-review-actions {
+  position: sticky;
+  bottom: -16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 16px 0;
+  border-top: 1px solid var(--c-line);
+  background: var(--c-panel);
+  z-index: 1;
+}
+.attachment-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--font-code); padding: 12px; background: var(--c-bg); border-radius: 8px; }
+.attachment-review h4 { margin-bottom: 6px; }
+.md-import-source { padding: 6px 12px; font-size: 11px; overflow-wrap: anywhere; color: var(--c-text-soft); border-top: 1px solid var(--c-line); }
+@media (max-width: 640px) {
+  .home-board { flex-wrap: wrap; }
+  .home-board-open { flex-basis: 100%; }
+  .home-board-actions { padding: 0 8px 4px; }
+}
+
+/* ── One context chip (docs/design/ContextChip.dc.html) ───────────────
+   Top bar, right side: what is in the agent's context in brief order, with
+   what it costs in tokens. Blue in context, violet the agent's, amber only
+   when a card changed since the agent read it. */
+.context-chip-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+.context-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  border-radius: var(--r-pill);
+  border: 1px solid color-mix(in srgb, var(--c-pin) 35%, transparent);
+  background: color-mix(in srgb, var(--c-pin) 8%, transparent);
+  color: var(--c-pin);
+  font: 500 12px var(--font-ui);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.context-chip.is-open {
+  border-color: var(--c-pin);
+  background: color-mix(in srgb, var(--c-pin) 16%, transparent);
+}
+.context-chip.is-empty {
+  border: 1px dashed var(--c-line-30);
+  background: transparent;
+  color: var(--c-muted);
+}
+.context-chip:focus-visible {
+  outline: 2px solid var(--c-pin);
+  outline-offset: 2px;
+}
+.context-chip-pin {
+  position: relative;
+  display: inline-flex;
+}
+.context-chip-agent-dot {
+  position: absolute;
+  right: -3px;
+  top: -2px;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--r-pill);
+  background: var(--c-agent);
+  box-shadow: 0 0 0 1.5px var(--c-panel);
+}
+.context-chip-wide .is-near {
+  color: var(--c-muted);
+}
+.context-chip-wide .is-agent {
+  color: var(--c-agent);
+}
+.context-chip-narrow {
+  display: none;
+}
+.context-chip-cost {
+  font: 11px var(--font-code);
+  color: var(--c-muted);
+}
+
+.context-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 60;
+  width: 440px;
+  max-height: min(70vh, 640px);
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--c-line-30);
+  background: var(--c-panel);
+  box-shadow: var(--e-2);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--c-text);
+  font: 12px var(--font-ui);
+  text-align: left;
+}
+.context-panel-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.context-panel-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+}
+.context-panel-mono {
+  font: 11px var(--font-code);
+  color: var(--c-muted);
+}
+.context-panel-cap,
+.context-panel-cap-inline {
+  margin: 0;
+  font-size: 11px;
+  color: var(--c-muted);
+}
+.context-panel-cap-inline {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.context-panel-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+  padding: 6px 8px 2px;
+  border-top: 1px solid var(--c-line);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--c-muted);
+}
+.context-panel-section > span:first-child {
+  flex: 1;
+}
+.context-panel-link,
+.context-panel-promote {
+  border: 0;
+  padding: 0 4px;
+  background: transparent;
+  color: var(--c-pin);
+  font: 500 11px var(--font-ui);
+  cursor: pointer;
+}
+.context-panel-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.context-panel-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 30px;
+  padding: 0 8px;
+  border-radius: 6px;
+}
+/* Revealed on hover or focus; opacity (not visibility) keeps Pin focusable. */
+.context-panel-row.is-near .context-panel-promote {
+  opacity: 0;
+}
+.context-panel-row.is-near:hover,
+.context-panel-row.is-near:focus-within {
+  background: var(--c-panel-soft);
+}
+.context-panel-row.is-near:hover .context-panel-promote,
+.context-panel-row.is-near:focus-within .context-panel-promote {
+  opacity: 1;
+}
+.context-panel-pin {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--r-pill);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--c-pin);
+  color: var(--c-on-pin);
+}
+.context-panel-near-ring {
+  width: 12px;
+  height: 12px;
+  margin: 0 2px;
+  box-sizing: border-box;
+  border-radius: var(--r-pill);
+  border: 1.5px dotted var(--c-pin);
+  flex-shrink: 0;
+}
+.context-panel-board {
+  fill: none;
+  stroke: var(--c-pin);
+  stroke-width: 1.8;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+.context-panel-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.context-panel-name.is-soft {
+  font-weight: 400;
+  color: var(--c-text-soft);
+}
+.context-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  box-sizing: border-box;
+  padding: 0 7px;
+  border-radius: var(--r-pill);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.context-tag.is-read {
+  color: var(--c-agent);
+  background: color-mix(in srgb, var(--c-agent) 14%, transparent);
+}
+.context-tag.is-not-read {
+  color: var(--c-muted);
+  background: var(--c-panel-soft);
+}
+.context-tag.is-changed {
+  color: var(--c-warn);
+  background: color-mix(in srgb, var(--c-warn) 14%, transparent);
+}
+.context-tag {
+  gap: 4px;
+}
+.context-tag svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+/* Links changed after the last read: information, never "needs a look" (option C). */
+.context-tag.is-links {
+  gap: 4px;
+  color: var(--c-muted);
+  background: var(--c-panel-soft);
+}
+.context-tag.is-links svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.context-panel-x {
+  width: 22px;
+  height: 22px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--c-muted);
+  font-size: 14px;
+  cursor: pointer;
+  flex-shrink: 0;
+  border-radius: var(--r-pill);
+}
+.context-panel-x:hover {
+  color: var(--c-text);
+  background: var(--c-surface-hover);
+}
+
+/* 600 px (ContextChip600.dc.html): one count, and the panel becomes a sheet. */
+@media (max-width: 760px) {
+  .context-chip-wide {
+    display: none;
+  }
+  .context-chip-narrow {
+    display: inline;
+  }
+  .context-panel {
+    position: fixed;
+    top: var(--hud-bar-height, 44px);
+    left: 8px;
+    right: 8px;
+    width: auto;
+  }
+}
+
+/* Home Map / Graph: neutral folder regions; workspace context is the only blue. */
+.home-shell {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--c-bg);
+  color: var(--c-text);
+}
+.home-view-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--c-line);
+}
+.home-view-tabs [aria-pressed="true"] {
+  background: var(--c-surface-hover);
+  font-weight: 600;
+}
+.home-shell > .home-view {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+.home-memory {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  font-family: var(--font-ui);
+  font-size: 13px;
+}
+.home-memory-toolbar,
+.home-memory-legend,
+.home-memory-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 10px 16px;
+}
+.home-memory-toolbar {
+  border-bottom: 1px solid var(--c-line);
+  font-size: 12px;
+  color: var(--c-muted);
+}
+.home-memory-live { margin-left: auto; }
+.home-memory-live::before { content: '●'; margin-right: 6px; }
+.home-memory-live.is-error { color: var(--c-warn); }
+.home-memory-sidebar-toggle { display: none; }
+.home-memory-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 280px;
+  min-width: 0;
+  overflow: auto;
+  padding: 18px;
+  box-sizing: border-box;
+  background: var(--c-panel-soft);
+  border-left: 1px solid var(--c-line);
+}
+.home-memory-sidebar section { margin-bottom: 20px; flex-shrink: 0; }
+.home-memory-sidebar h2 {
+  margin: 0 0 8px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: var(--c-muted);
+}
+.home-memory-sidebar label {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  margin: 5px 0;
+  font-size: 12px;
+}
+.home-memory-sidebar input[type="search"] {
+  background: var(--c-panel);
+  color: var(--c-text);
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-control);
+  padding: 6px;
+  width: 100%;
+  min-width: 0;
+  font: inherit;
+}
+.home-memory-sidebar input { accent-color: var(--c-text-soft); }
+.home-memory-search { margin-bottom: 12px !important; }
+.home-memory-search > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.home-memory-check { min-height: 24px; }
+.home-memory-check > span { flex: 1; overflow-wrap: anywhere; }
+.home-memory-check small { color: var(--c-muted); font-family: var(--font-mono); }
+.home-memory-help { font-size: 12px; color: var(--c-muted); }
+.home-memory-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.home-memory-stage {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  touch-action: none;
+  background-color: var(--c-bg);
+  background-image: radial-gradient(color-mix(in srgb, var(--c-muted) 16%, transparent) 1px, transparent 1px);
+  background-size: 24px 24px;
+  cursor: grab;
+}
+.home-memory-stage:active { cursor: grabbing; }
+.graph-view .home-memory-stage { background-image: none; }
+.home-memory-world {
+  position: absolute;
+  transform-origin: 0 0;
+}
+.home-memory-region {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed var(--c-line);
+  border-radius: var(--r-overlay);
+  padding: 10px 16px;
+  color: var(--c-muted);
+  background: color-mix(in srgb, var(--c-panel) 30%, transparent);
+  pointer-events: none;
+}
+.home-memory-region.is-nested { background: transparent; }
+.home-memory-region > button {
+  position: absolute;
+  top: -12px;
+  left: 16px;
+  max-width: calc(100% - 32px);
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-pill);
+  padding: 4px 10px;
+  background: var(--c-panel);
+  color: var(--c-text-soft);
+  font: 500 12px var(--font-ui);
+  pointer-events: auto;
+  cursor: pointer;
+}
+.home-memory-region small { margin-left: 6px; font-weight: 400; color: var(--c-muted); }
+.home-memory-links {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: visible;
+  pointer-events: none;
+}
+.memory-edge {
+  stroke: var(--c-muted);
+  fill: none;
+  stroke-width: 1.5;
+  opacity: .5;
+}
+.home-memory .memory-edge.edge-portal { stroke: var(--c-rel-derived); }
+.home-memory .memory-edge.edge-wiki { stroke: var(--c-rel-cites); }
+.home-memory .memory-edge.edge-card { stroke: var(--c-rel-related); }
+.home-memory-connections li > small { display: block; color: var(--c-muted); font-size: 11px; }
+.home-memory .memory-edge.is-emphasized { opacity: 1; }
+.home-memory .memory-edge.is-dimmed { opacity: .08; }
+.home-memory .memory-legend-portal { color: var(--c-rel-derived); }
+.home-memory .memory-legend-wiki { color: var(--c-rel-cites); }
+.home-memory .memory-legend-card { color: var(--c-rel-related); }
+.memory-edge text {
+  fill: var(--c-muted);
+  stroke: none;
+  font-size: 12px;
+}
+.edge-previous {
+  stroke-dasharray: 8 4;
+}
+.edge-wiki {
+  stroke-dasharray: 3 3;
+}
+.edge-card {
+  stroke-width: 2.5;
 }
-.home-section-head:hover {
-  color: var(--c-text);
-  background: color-mix(in srgb, var(--c-text) 5%, transparent);
+.memory-edge.is-missing {
+  stroke: var(--c-warn);
+  stroke-dasharray: 5 3;
 }
-.home-section-chevron,
-.home-section-folder {
-  flex: 0 0 18px;
-  stroke: currentColor;
-  stroke-width: 1.75;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.memory-edge.is-missing text {
+  fill: var(--c-warn);
 }
-.home-section-chevron {
-  transition: transform 120ms ease;
+.home-memory-node {
+  position: absolute;
+  width: 220px;
+  height: 92px;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-node);
+  background: var(--c-panel);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-bg) 60%, transparent);
 }
-.home-section-head[aria-expanded='true'] .home-section-chevron {
-  transform: rotate(90deg);
+.home-memory-node.in-context {
+  border-color: var(--c-pin);
+  background: color-mix(in srgb, var(--c-pin) 8%, var(--c-panel));
 }
-.home-section-folder { color: var(--c-dim); }
-.home-section-count {
-  font: 11px var(--font-code);
-  text-transform: none;
-  color: var(--c-dim);
-  margin-left: auto;
+.home-memory-node.is-dimmed { opacity: .3; }
+.home-memory-node.is-emphasized,
+.home-memory-node:focus-within { z-index: 2; }
+.home-memory-node.is-selected {
+  outline: 2px solid var(--c-text);
+  outline-offset: 3px;
 }
-.home-section-head:focus-visible {
-  outline: 2px solid var(--c-accent);
-  outline-offset: 2px;
+.home-memory-select {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 8px 32px 8px 12px;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
 }
-.home-section-head {
-  text-transform: none;
-  letter-spacing: normal;
+.home-memory-select strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   max-width: 100%;
 }
-.home-section-name {
-  font-size: 13px;
-  font-weight: 650;
+.home-memory-select .home-memory-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.home-memory-select .home-memory-context { color: var(--c-pin); }
+.home-memory-select span {
+  font-size: 11px;
+  color: var(--c-muted);
+}
+.home-memory-node > .board-pin-btn {
+  position: absolute;
+  right: 4px;
+  top: 5px;
+}
+.home-memory-details {
+  position: relative;
+  box-sizing: border-box;
+  padding: 12px;
   overflow-wrap: anywhere;
+  background: var(--c-panel);
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-node);
+}
+.home-memory-details h3 {
+  font-size: 13px;
+  padding-right: 16px;
+  margin: 0;
+}
+.home-memory-details p { font-size: 12px; color: var(--c-muted); }
+.home-memory-details p.memory-context-legend { color: var(--c-pin); }
+.home-memory-clear { position: absolute; top: 4px; right: 4px; border: 0; background: transparent; color: var(--c-muted); cursor: pointer; font: 18px var(--font-ui); }
+.home-memory-connections { margin-top: 14px; font-size: 12px; }
+.home-memory-connections summary { cursor: pointer; }
+.home-memory-details ul {
+  padding: 0;
+  list-style: none;
 }
-.home-folder-children {
+.home-memory-details li {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding-left: 12px;
-  border-left: 1px solid var(--c-line);
+  align-items: flex-start;
+  gap: 4px;
+  margin-bottom: 10px;
 }
-.home-search { width: 100%; box-sizing: border-box; }
-.board-copy-dialog,
-.board-link-dialog {
-  width: min(540px, calc(100vw - 32px));
-  max-height: calc(100dvh - 40px);
-  overflow-y: auto;
+.home-memory-details .home-button { height: auto; min-height: 28px; padding: 6px 8px; max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-align: left; }
+.home-memory-actions {
+  padding: 0;
+}
+.home-memory-actions > .board-pin-btn {
+  position: static;
+}
+.home-memory-inspector {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+  background: var(--c-panel);
+  border-top: 1px solid var(--c-line);
   box-sizing: border-box;
 }
-.board-copy-dialog form,
-.board-copy-field,
-.board-copy-options {
+.home-memory-inspector-resize {
+  flex: 0 0 10px;
+  cursor: ns-resize;
+  touch-action: none;
+  user-select: none;
+}
+.home-memory-inspector-resize::after {
+  content: '';
+  display: block;
+  width: 48px;
+  height: 3px;
+  margin: 3px auto;
+  border-radius: var(--r-pill);
+  background: var(--c-muted);
+}
+.home-memory-inspector-resize:hover,
+.home-memory-inspector-resize:focus-visible { background: var(--c-surface-hover); }
+.home-memory-inspector-resize:focus-visible { outline: 2px solid var(--c-text-soft); outline-offset: -2px; }
+.home-memory-inspector-toggle { position: absolute; top: 18px; right: 44px; z-index: 1; }
+.home-memory-inspector.is-collapsed .home-memory-inspector-toggle { top: 8px; }
+.home-memory-inspector.is-collapsed .home-memory-detail-body,
+.home-memory-inspector.is-collapsed .home-memory-empty-details .home-memory-help { display: none; }
+.home-memory-inspector > #home-memory-details { flex: 1; min-height: 0; }
+.home-memory-inspector .home-button { font-size: 14px; min-height: 36px; }
+.home-memory-inspector .board-pin-btn { width: 36px; height: 36px; }
+.home-memory-inspector .home-memory-clear { top: 8px; width: 36px; height: 36px; font-size: 20px; }
+.home-memory-inspector .home-memory-details {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 8px 16px 12px;
 }
-.board-copy-dialog h2,
-.board-link-dialog h2 { margin: 0 0 12px; font-size: 17px; }
-.board-copy-field { color: var(--c-text-soft); font-size: 12px; }
-.board-copy-cards {
-  margin: 14px 0;
-  padding: 8px;
-  border: 1px solid var(--c-line);
-  border-radius: 9px;
-  max-height: 230px;
-  overflow-y: auto;
+.home-memory-inspector .home-memory-detail-header {
+  flex-shrink: 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--c-line);
 }
-.board-copy-cards legend { color: var(--c-text-soft); font-size: 12px; }
-.board-copy-card {
+.home-memory-inspector .home-memory-details h3 { font-size: 15px; }
+.home-memory-inspector .home-memory-details p { font-size: 13px; }
+.home-memory-inspector .home-memory-details small { font-size: 13px; }
+.home-memory-inspector .home-memory-selection-title { padding-right: 180px; }
+.home-memory-inspector .home-memory-selection-title p { margin: 2px 0 8px; }
+.home-memory-inspector .home-memory-detail-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  /* Integer scroll extents can otherwise clip the final fractional row border. */
+  padding-bottom: 1px;
+}
+.home-memory-inspector .home-memory-detail-body > p { margin: 8px 0; }
+.home-memory-inspector .home-memory-connections { margin-top: 8px; font-size: 14px; }
+.home-memory-inspector .home-memory-details li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 150px);
+  column-gap: 16px;
+  padding: 10px 0;
+  margin: 0;
+  min-height: 28px;
+  border-bottom: 1px solid var(--c-line);
+}
+.home-memory-inspector .home-memory-details li > span,
+.home-memory-inspector .home-memory-details li > small { grid-column: 1; }
+.home-memory-inspector .home-memory-details li > .home-button { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
+.home-memory-inspector .home-memory-empty-details { padding: 8px 16px; }
+.home-memory-inspector .home-memory-empty-details h3 { font-size: 15px; margin: 0 0 8px; min-height: 36px; padding-right: 180px; }
+.home-memory-inspector .home-memory-help { font-size: 13px; }
+.home-memory-zoom {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 8px;
+  background: var(--c-panel);
+  padding: 4px;
+  border-radius: var(--r-node);
+}
+.home-memory-status {
+  position: absolute;
+  top: 8px;
+  left: 12px;
+  background: var(--c-panel);
   padding: 8px;
-  border-radius: 7px;
-  cursor: pointer;
 }
-.board-copy-card:hover { background: color-mix(in srgb, var(--c-accent) 9%, transparent); }
-.board-copy-card span { display: flex; flex-direction: column; min-width: 0; }
-.board-copy-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
-.board-copy-card small,
-.board-link-results small { color: var(--c-text-soft); font: 11px var(--font-code); }
-.board-copy-options { font-size: 13px; }
-.board-copy-options label { display: flex; gap: 8px; align-items: center; }
-.board-copy-note,
-.board-copy-status { color: var(--c-text-soft); font-size: 12px; line-height: 1.5; }
-.board-copy-error { color: var(--c-danger); font-size: 12px; margin-top: 8px; }
-.board-link-results { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; padding: 0; max-height: 320px; overflow-y: auto; list-style: none; }
-.board-link-results button { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-panel); color: var(--c-text); text-align: left; cursor: pointer; }
-.board-link-results button:hover,
-.board-link-results button:focus-visible { border-color: var(--c-accent); outline: none; }
-.home-folder-dialog {
-  width: min(460px, calc(100vw - 32px));
-  max-height: calc(100dvh - 48px);
-  overflow-y: auto;
-  box-sizing: border-box;
+.home-memory-legend {
+  font-size: 11px;
+  color: var(--c-muted);
+  border-top: 1px solid var(--c-line);
 }
-.home-folder-hint {
+.memory-context-legend {
+  color: var(--c-pin);
+}
+.home-memory-missing {
+  color: var(--c-warn);
+}
+.graph-view .home-memory-sidebar { flex-basis: 240px; }
+.graph-view .home-memory-toolbar { font-size: 13px; }
+.graph-node { position: absolute; box-sizing: border-box; width: var(--graph-node-width); height: var(--graph-node-height); transform: translate(-50%, -50%); color: var(--c-text); border: 1px solid var(--c-line); border-radius: var(--r-node); background: var(--c-panel); }
+.graph-node .home-memory-select { box-sizing: border-box; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 16px 16px; align-items: center; text-align: left; padding: 8px; gap: 4px 8px; }
+.graph-node .home-memory-select strong { font-size: 14px; font-weight: 500; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+.graph-node .home-memory-select > strong, .graph-node .home-memory-select > span:not(.graph-glyph) { grid-column: 2; }
+.graph-node .home-memory-select > span:not(.graph-glyph) { font-size: 12px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.graph-node .graph-glyph { display: block; grid-column: 1; grid-row: 1 / span 3; box-sizing: border-box; width: 28px; height: 28px; border: 2px solid var(--c-text-soft); border-radius: 50%; background: var(--c-bg); }
+.graph-node.is-card .graph-glyph { width: 24px; height: 24px; border-radius: var(--r-control); }
+.graph-node.is-external { border-style: dashed; }
+.graph-node.is-selected { border-color: var(--c-text); outline: 1px solid var(--c-text); }
+.graph-node.in-context .graph-glyph { border-color: var(--c-pin); outline: 2px solid var(--c-pin); outline-offset: 4px; }
+.graph-node .home-memory-select:focus-visible { outline: 2px solid var(--c-text-soft); outline-offset: 6px; border-radius: var(--r-control); }
+.graph-node:hover, .graph-node:focus-within, .graph-node.is-selected { z-index: 2; }
+.graph-links { fill: none; stroke: var(--c-muted); stroke-width: 1.5; }
+.graph-link { cursor: pointer; opacity: .65; }
+.graph-link:hover, .graph-link:focus-visible, .graph-link.is-selected, .graph-link.is-highlighted { opacity: 1; outline: none; }
+.graph-link-line { pointer-events: none; stroke-width: 1.5; }
+.graph-link.is-bundle .graph-link-line { stroke-width: 2.5; }
+.graph-link:hover .graph-link-line, .graph-link:focus-visible .graph-link-line, .graph-link.is-selected .graph-link-line, .graph-link.is-highlighted .graph-link-line { stroke-width: 3; }
+.graph-link-hit { stroke: transparent; stroke-width: 18; pointer-events: stroke; }
+.graph-link text { pointer-events: auto; }
+.graph-links text { font: 12px var(--font-code); fill: var(--c-text-soft); paint-order: stroke; stroke: var(--c-bg); stroke-width: 4px; stroke-linejoin: round; text-anchor: middle; }
+.graph-breadcrumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
+.graph-breadcrumb strong { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.graph-direction-caption { position: absolute; top: 12px; left: 16px; right: 40px; z-index: 1; color: var(--c-muted); font-size: 13px; pointer-events: none; }
+.graph-unlinked { flex-shrink: 0; padding: 8px 16px; border-top: 1px solid var(--c-line); font-size: 13px; }
+.graph-unlinked summary { cursor: pointer; color: var(--c-muted); }
+.graph-unlinked > div { display: flex; flex-wrap: wrap; gap: 8px; max-height: 92px; overflow: auto; padding-top: 8px; }
+.graph-tray-node { display: flex; gap: 8px; align-items: center; max-width: 100%; white-space: normal; text-align: left; }
+.graph-tray-node small { color: var(--c-muted); }
+.graph-search-results { list-style: none; padding: 0; margin: 8px 0; }
+.graph-search-results .home-button { width: 100%; white-space: normal; text-align: left; height: auto; min-height: 36px; margin: 4px 0; }
+.graph-accounting { color: var(--c-muted); font-size: 13px; line-height: 1.6; }
+.node-body:has(> .node-memory-links),
+.node-body:has(> .node-lifecycle-warning) {
+  display: flex;
+  flex-direction: column;
+}
+.node-body:has(> .node-memory-links) > :first-child,
+.node-body:has(> .node-lifecycle-warning) > :first-child {
+  flex: 1;
+  min-height: 0;
+}
+.node-memory-links {
+  flex-shrink: 0;
+  max-height: min(40%, 132px);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.node-memory-link {
+  padding: 6px 12px;
+  border-top: 1px solid var(--c-line);
+}
+.node-memory-link button {
+  border: 0;
+  background: transparent;
   color: var(--c-text-soft);
-  font-size: 12px;
-  line-height: 1.5;
+  font: var(--fs-ui) var(--font-ui);
+  cursor: pointer;
   overflow-wrap: anywhere;
+  text-align: left;
 }
-.home-folder-options {
-  margin: 12px 0;
-  padding: 8px;
-  border: 1px solid var(--c-line);
-  border-radius: 8px;
-  max-height: 240px;
-  overflow-y: auto;
+.wiki-link.is-unresolved {
+  text-decoration-style: dashed;
+  color: var(--c-warn);
 }
-.home-folder-options legend { color: var(--c-text-soft); font-size: 12px; }
-.home-folder-option {
+@media (max-width: 760px) {
+  .home-memory-body { position: relative; }
+  .home-memory-sidebar { display: none; }
+  .home-memory-sidebar-toggle { display: block; }
+  .home-memory.sidebar-open .home-memory-sidebar {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(280px, 75%);
+    z-index: 4;
+    box-shadow: -6px 0 20px color-mix(in srgb, var(--c-bg) 50%, transparent);
+  }
+  .home-memory-toolbar { padding: 8px; gap: 8px; }
+  .canvas-region:has(.home-memory) > .attention-history-tab,
+  .canvas-region:has(.home-memory) > .attention-history {
+    top: calc(var(--home-memory-content-top) + 8px);
+  }
+  .canvas-region:has(.home-memory.sidebar-open) > .attention-history-tab {
+    left: 8px;
+    right: auto;
+    border-right: 1px solid var(--c-line);
+    border-radius: 14px;
+  }
+  .canvas-region:has(.home-memory.sidebar-open) > .attention-history-tab .attention-history-tab-label {
+    display: none;
+  }
+  .home-memory-legend {
+    max-height: 68px;
+    overflow: auto;
+    padding: 8px;
+  }
+}
+
+/* Wave 3: Categories / Lifecycle / Lifecycle600, variant A. */
+.knowledge-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10025; /* above top-bar chrome and the expanded card that opens Lifecycle */
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 6px;
-  font-size: 13px;
-  overflow-wrap: anywhere;
-  cursor: pointer;
+  justify-content: center;
+  padding: 20px;
+  background: var(--c-panel-overlay);
 }
-.home-folder-option:has(input:checked) { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
-.home-folder-option input { accent-color: var(--c-accent); flex-shrink: 0; }
-.home-folder-new { display: flex; flex-direction: column; gap: 6px; font-size: 12px; overflow-wrap: anywhere; }
-.attachment-node { padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; overflow: auto; height: 100%; box-sizing: border-box; }
-.attachment-node p { margin: 0; color: var(--c-text-soft); line-height: 1.5; }
-.attachment-node a, .md-import-source a { color: var(--c-accent); }
-.attachment-status { font-weight: 600; }
-.attachment-button,
-.presentation-exit,
-.export-dialog-links a {
-  min-height: 38px;
-  padding: 8px 14px;
-  border: 1px solid var(--c-text-soft);
-  border-radius: 8px;
+.knowledge-dialog {
+  box-sizing: border-box;
+  width: min(760px, 100%);
+  max-height: 100%;
+  overflow: auto;
+  padding: 16px;
+  border: 1px solid var(--c-line);
+  border-radius: 14px;
   background: var(--c-panel);
   color: var(--c-text);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-}
-.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-exit:hover,
-.export-dialog-links a:hover { filter: brightness(1.12); }
-.attachment-button: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-review { width: 100%; border-top: 1px solid var(--c-line); padding-top: 12px; }
-.attachment-review-actions {
-  position: sticky;
-  bottom: -16px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-  padding: 16px 0;
-  border-top: 1px solid var(--c-line);
-  background: var(--c-panel);
-  z-index: 1;
-}
-.attachment-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--font-code); padding: 12px; background: var(--c-bg); border-radius: 8px; }
-.attachment-review h4 { margin-bottom: 6px; }
-.md-import-source { padding: 6px 12px; font-size: 11px; overflow-wrap: anywhere; color: var(--c-text-soft); border-top: 1px solid var(--c-line); }
-@media (max-width: 640px) {
-  .home-board { flex-wrap: wrap; }
-  .home-board-open { flex-basis: 100%; }
-  .home-board-actions { padding: 0 8px 4px; }
+  font: 13px/1.5 var(--font-ui);
+  box-shadow: 0 10px 30px var(--c-shadow-heavy);
+}
+.knowledge-dialog.is-category-editor { width: min(900px, 100%); }
+.knowledge-dialog:not(.is-category-editor):has(.knowledge-folder-path) { width: min(560px, 100%); }
+.knowledge-dialog header { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--c-line); }
+.knowledge-dialog-title { flex: 1; min-width: 0; }
+.knowledge-dialog h2 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
+.knowledge-dialog header > h2 { flex: 1; }
+.knowledge-folder-path { display: block; font-size: 11px; color: var(--c-muted); overflow-wrap: anywhere; }
+.knowledge-dialog h3 { font-size: 13px; margin: 12px 0 8px; }
+.knowledge-dialog p { margin: 4px 0; color: var(--c-text-soft); font-size: 12px; }
+.knowledge-dialog form, .lifecycle-fields { display: flex; flex-direction: column; gap: 12px; }
+.knowledge-dialog form { padding: 12px 0; }
+.knowledge-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
+.knowledge-dialog label { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
+.knowledge-dialog input:not([type="checkbox"]), .knowledge-dialog select, .knowledge-dialog textarea {
+  width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--c-line);
+  border-radius: 6px; background: var(--c-input-bg); color: var(--c-text); font: 13px var(--font-ui);
+}
+.knowledge-dialog textarea { min-height: 64px; resize: vertical; }
+.knowledge-dialog button, .lifecycle-filters button {
+  padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-panel);
+  color: var(--c-text); font: 12px var(--font-ui); cursor: pointer;
+}
+.knowledge-dialog button:disabled,
+.knowledge-dialog button[aria-disabled="true"] { opacity: 0.5; cursor: wait; }
+.knowledge-dialog button[type="submit"] { align-self: flex-start; min-height: 30px; background: var(--c-accent); border-color: transparent; color: var(--c-contrast-fg); font-weight: 500; }
+:root[data-theme="sepia"] .knowledge-dialog button[type="submit"] { background: color-mix(in srgb, var(--c-accent) 75%, var(--c-text)); }
+.knowledge-dialog button.is-danger { align-self: flex-start; color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 50%, var(--c-line)); }
+.knowledge-dialog button:focus-visible, .knowledge-dialog input:focus-visible, .knowledge-dialog textarea:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
+.knowledge-dialog .choice-menu-options { position: relative; top: auto; width: 100%; max-width: 100%; min-width: 0; max-height: 200px; margin-top: 6px; box-sizing: border-box; }
+.knowledge-dialog .choice-menu-options button { border: 0; background: transparent; min-height: 30px; }
+.knowledge-dialog .choice-menu-options button:hover, .knowledge-dialog .choice-menu-options button.active { background: var(--c-panel-soft); }
+.knowledge-dialog [aria-label="Confirm category deletion"] { display: flex; flex-wrap: wrap; gap: 8px; }
+.knowledge-dialog [aria-label="Confirm category deletion"] p { width: 100%; }
+.knowledge-dialog button[aria-pressed="true"], .lifecycle-filters button[aria-pressed="true"] { border-color: var(--c-text); background: var(--c-panel-soft); }
+.lifecycle-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.lifecycle-advanced { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line); }
+.lifecycle-advanced summary { color: var(--c-muted); cursor: pointer; font-size: 12px; }
+.lifecycle-advanced[open] summary { margin-bottom: 12px; }
+.lifecycle-clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
+.lifecycle-clocks > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--c-panel-soft); overflow-wrap: anywhere; }
+.lifecycle-clocks span, .lifecycle-clocks small { color: var(--c-muted); font-size: 11px; }
+.lifecycle-clocks strong { font-size: 13px; }
+.lifecycle-clocks .is-read span { color: var(--c-agent); }
+.lifecycle-warning { color: var(--c-warn); border: 1px solid var(--c-warn); border-radius: 6px; padding: 4px 7px; font-size: 11px; overflow-wrap: anywhere; }
+.knowledge-dialog .lifecycle-warning { color: var(--c-warn); }
+.lifecycle-review { padding: 12px; border: 1px solid var(--c-line); border-radius: 10px; }
+.lifecycle-history { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--c-line); overflow-wrap: anywhere; }
+.lifecycle-history p { width: 100%; margin: 0; }
+.lifecycle-history span { color: var(--c-muted); font-size: 11px; }
+.lifecycle-filters { position: absolute; top: 8px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 40; max-width: calc(100% - 24px); }
+.retirement-toast { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-panel); color: var(--c-text-soft); font: 12px var(--font-ui); z-index: 50; box-shadow: 0 10px 30px var(--c-shadow-heavy); }
+.retirement-toast button { background: var(--c-panel-soft); color: var(--c-text); font: inherit; border: 1px solid var(--c-line); border-radius: 6px; padding: 5px 8px; cursor: pointer; }
+.relation-dimmed { opacity: 0.35; }
+.edge-line { transition: opacity 0.15s ease, stroke-width 0.15s ease; }
+.edge-pill { transition: opacity 0.15s ease; }
+@media (prefers-reduced-motion: reduce) {
+  .canvas-node, .canvas-node.neighbor, .canvas-node.search-dimmed, .edge-line, .edge-pill { transition: none; }
+}
+.lifecycle-retired { opacity: 0.5; }
+.lifecycle-filter-dimmed { opacity: 0.15; }
+.node-lifecycle-warning { display: flex; flex-shrink: 0; gap: 6px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-top: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-muted); text-align: left; font: 11px var(--font-ui); cursor: pointer; }
+.node-lifecycle-warning span:first-child { flex-shrink: 0; border: 1px solid var(--c-warn); color: var(--c-warn); border-radius: 999px; padding: 2px 6px; }
+.node-lifecycle-warning span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.knowledge-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.knowledge-presets button, .category-choice { display: flex; flex-direction: column; gap: 6px; text-align: left; overflow-wrap: anywhere; }
+.knowledge-presets span, .category-choice span { color: var(--c-muted); font-size: 11px; }
+.category-editor-columns { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 24px; margin-top: 16px; }
+.category-editor-columns > section { min-width: 0; padding-right: 16px; border-right: 1px solid var(--c-line); }
+.category-editor-columns h3 { margin-top: 0; }
+.category-list-panel > label + button { margin-top: 8px; }
+.category-library { max-height: min(420px, 50vh); overflow-y: auto; margin: 8px 0; padding: 2px; }
+.category-choice { margin-top: 4px; width: 100%; min-height: 42px; gap: 2px; }
+.category-tag { display: inline-block; border: 1px solid var(--c-line); border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--c-text-soft); }
+.category-tag.is-unknown { border-style: dashed; }
+.category-inspector, .category-tab-content { min-width: 0; }
+.category-tab-content { margin: 0; padding: 12px 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
+.category-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
+.category-tabs [aria-selected="true"] { border-color: var(--c-text); background: var(--c-panel-soft); }
+.category-glyph-choices { display: flex; flex-wrap: wrap; gap: 6px; }
+.category-glyph-choices button { min-width: 36px; min-height: 34px; font-size: 18px; }
+.category-editor-footer { position: sticky; bottom: -16px; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0; background: var(--c-panel); border-top: 1px solid var(--c-line); }
+.category-templates > summary, .lifecycle-triggers > summary { cursor: pointer; color: var(--c-text-soft); }
+.category-discard { position: sticky; top: 0; z-index: 3; padding: 12px; background: var(--c-panel); border: 1px solid var(--c-line); }
+.relation-presets-dialog .relation-preset-detail { min-width: 0; padding-right: 0; border-right: 0; }
+.relation-preset-preview { display: grid; gap: 12px; list-style: none; margin: 16px 0; padding: 0; }
+.relation-preset-preview li { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-panel-soft); }
+.relation-preset-preview li > span { color: var(--c-text-soft); font-size: var(--fs-meta); }
+.relation-preset-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 120px) minmax(0, 1fr); align-items: center; gap: 8px; }
+.relation-preset-example > span { padding: 6px; text-align: center; border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-panel); font-size: var(--fs-meta); }
+.relation-preset-example svg { display: block; width: 100%; height: 24px; color: var(--relation-ink); }
+.relation-preset-footer { position: sticky; bottom: -16px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid var(--c-line); background: var(--c-panel); }
+.relation-preset-footer > label { flex: 1 1 100%; }
+.relation-preset-footer select { flex: 1; min-width: 0; }
+.knowledge-dialog button.relation-preset-use { min-height: 30px; background: var(--c-accent); border-color: transparent; color: var(--c-contrast-fg); font-weight: 500; }
+:root[data-theme="sepia"] .knowledge-dialog button.relation-preset-use { background: color-mix(in srgb, var(--c-accent) 75%, var(--c-text)); }
+.relation-presets-dialog .relation-vocabulary .vocabulary-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
+.relation-dirty-guard, .relation-presets-dialog [aria-label="Confirm preset deletion"] { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-panel-soft); }
+.relation-dirty-guard p, .relation-presets-dialog [aria-label="Confirm preset deletion"] p { flex-basis: 100%; }
+.home-view-tabs { flex-wrap: wrap; }
+.home-review-view { min-width: 0; color: var(--c-text); }
+.home-review-view p { color: var(--c-text-soft); font-size: var(--fs-ui); }
+.home-review-view .home-main-head > label { min-width: 0; max-width: 100%; }
+.home-review-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0; }
+.home-review-view label { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-ui); }
+.home-review-view input[type="search"], .home-review-view select { min-width: 0; max-width: 100%; padding: 7px 10px; border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-input-bg); color: var(--c-text); font: inherit; }
+.home-review-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-ui); }
+.home-review-table th { text-align: left; color: var(--c-muted); font-weight: 500; }
+.home-review-table td, .home-review-table th { padding: 12px 8px; border-bottom: 1px solid var(--c-line); vertical-align: top; overflow-wrap: anywhere; }
+.home-review-table th:nth-child(3) { width: 30%; }
+.home-review-table th:last-child { width: 100px; }
+.home-review-table .home-button { height: auto; min-height: 34px; max-width: 100%; padding: 6px 10px; }
+.home-review-neutral { padding-top: 12px; border-top: 1px solid var(--c-line); }
+@media (max-width: 1024px) {
+  .home-review-table, .home-review-table tbody, .home-review-table tr, .home-review-table td { display: block; width: auto; }
+  .home-review-table thead { display: none; }
+  .home-review-table tr { border: 1px solid var(--c-line); border-radius: var(--r-node); padding: 8px; margin: 12px 0; background: var(--c-panel); }
+  .home-review-table td { padding: 4px; border: 0; }
+  .home-review-table td[data-label]::before { content: attr(data-label) ": "; color: var(--c-muted); }
+}
+@media (max-width: 760px) {
+  .knowledge-backdrop { padding: 12px; }
+  .knowledge-dialog { padding: 14px; }
+  .knowledge-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .category-editor-columns { grid-template-columns: minmax(0, 1fr); }
+  .category-editor-columns > section { padding-right: 0; border-right: 0; }
+  .category-library { max-height: 160px; }
+  .relation-presets-dialog .relation-vocabulary .vocabulary-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .home-review-view .home-main-head { align-items: flex-start; }
 }