[tokens] Z-layers by vibes and graph magic numbers — tokenize z-scale, derive layout from canvasSize #869

Summary

The "no magic numbers" rule produced named constants for 44px buttons and virtualization estimates — then the z-stack, dialog geometry, and graph layout got arbitrary values anyway. Three arbitrary z-layers by vibes, a command palette at mt-[12vh] w-[640px], a sidebar at w-[248px], and a circular graph layout that hardcodes its canvas center in the same file that imports canvasSize.

Evidence

• Z-axis: app-shell.tsx:263 — focus:z-[1000]; ui/overlay.tsx:209 — z-[800]; shortcuts-dialog.tsx:368 — z-[700]
• Geometry: command-palette.tsx:133 — mt-[12vh] w-[640px] max-w-[92vw]; sidebar.tsx:186 — w-[248px]
• graph-view.tsx:71 — const cx = 400, cy = 280, r = 200 while importing canvasSize (:6)
• graph-view.tsx:387 — slice(0, 22); triz-matrix-view.tsx:91 — slice(0, 12) (grapheme-unsafe, contra the Intl.Segmenter rule)

Proposed fix

1. Tokenize the z-scale (Tailwind v4 turns --z-index-* into z-* utilities):

   @theme { --z-index-shortcuts: 700; --z-index-overlay: 800; --z-index-skiplink: 1000; }

2. Named constants for palette/sidebar geometry in their files (COMMAND_PALETTE_WIDTH_CLASS, SIDEBAR_WIDTH_CLASS) or @theme spacing tokens.
3. Graph layout derives from the imported canvas size:

   const cx = canvasSize.width / 2, cy = canvasSize.height / 2, r = Math.min(cx, cy) * 0.7

4. Extract GRAPH_LABEL_MAX = 24 / TRIZ_LABEL_MAX = 12 constants; truncate via Intl.Segmenter graphemes.

Acceptance criteria

• No z-[NNN] arbitrary values remain; z-scale documented
• Graph circular layout centers correctly at any canvas size (unit test exists for layout math)
• Label truncation is grapheme-safe

Audit: plan 160 (UX-14).