docs: update design spec and increase section gap to 80px

Update design spec with implementation notes covering recursive
compound nesting, edge z-ordering, ON_COMPLETION sections, drill-down
navigation, CSS transform zoom, and HTML overlay toolbar.

Increase SECTION_GAP to 80px for better visual separation between
completion and error handler sections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/superpowers/specs/2026-03-27-interactive-process-diagram-design.md

@@ -333,3 +333,27 @@ These are explicitly out of scope for sub-project 1:
 8. **Compound nodes:** Route with CHOICE renders children inside dashed container
 9. **Keyboard (required):** Escape deselects, +/- zooms, 0 fits to view
 10. **Direction:** `?direction=TB` renders top-to-bottom layout
+
+---
+
+## Implementation Notes (post-spec additions)
+
+The following features were added during implementation beyond the original spec:
+
+### Recursive compound nesting
+EIP_WHEN, EIP_OTHERWISE, DO_CATCH, DO_FINALLY added to COMPOUND_TYPES on both backend and frontend. CompoundNode recursively renders children that are themselves compound (e.g., CHOICE → WHEN → processors).
+
+### Edge z-ordering
+Edges are distributed to their containing compound and rendered inside the compound's SVG group (after background, before children). Top-level edges stay in the main edges group. This prevents compound backgrounds from hiding edges.
+
+### ON_COMPLETION handler sections
+ON_COMPLETION nodes render as teal-tinted sections between the main flow and error handler sections. Structurally parallel to ON_EXCEPTION.
+
+### Drill-down navigation
+Double-click on DIRECT or SEDA nodes navigates into the target route's diagram. A breadcrumb bar shows the route stack and supports clicking back to any level. Escape key goes back one level. Route ID resolution handles camelCase endpoint URIs → kebab-case route IDs using the catalog's known route IDs.
+
+### Zoom via CSS transform
+The original spec proposed SVG viewBox manipulation. Implementation uses CSS `transform: translate() scale()` on the content `<g>` element instead, which is simpler and more predictable. Default zoom is 100%.
+
+### Toolbar as HTML overlay
+The original spec proposed SVG `<foreignObject>`. Implementation renders the toolbar as an absolute-positioned HTML div outside the SVG, so it maintains fixed size regardless of zoom level. Styled with design system tokens.