codegraph/docs/design/codegraph-ui-design-spec.md

codegraph ui — design specification

Authoritative visual + interaction spec for the codegraph ui viewer (Kommandr epics CG-39 → CG-48 → CG-56; Pro layers in docker-app DOCKERAPP-10). Companion to the design proposal ("Reading the graph") and the interactive prototype; the prototype's stylesheet is appended verbatim at the end and is the source of truth for every measurement below. Screenshots: CodeGraph/codegraph-web-prototype/screenshots/ (also attached to the Kommandr epics).

Design proposal: https://claude.ai/code/artifact/58336c87-9780-4018-8c04-37fe53236e96 Prototype: https://claude.ai/code/artifact/304bffb6-72d6-49c7-8f3a-9e4f244909f8 Prototype sources: CodeGraph/codegraph-web-prototype/ (proto.css, proto.js, extract.mjs, build.mjs)

1. Principles (non-negotiable)

1. One symbol at a time — no whole-graph picture, no node-link neighborhood graph (decided).
2. Code order is the coordinate system — layouts by source line or dependency layer; deterministic; never force-directed.
3. Edges grow out of the code — every call edge is drawn from the line that makes the call (gutter port → callee row at that height).
4. Direction is spatial — callers left, callees right, flows read left→right, map dependencies point down.
5. Collapse the tails, show the counts — hubs badge (fan-in ≥ 40), tests fold, confidence < 0.6 folds ("uncertain"), outside-index counts; nothing silently dropped.
6. Honesty in the pixels — confidence = line style; heuristic (synthesized) edges dashed + wiring site; boundaries announced; drift banners; "no test within 3 hops" badge.

2. Visual language

The engine's paper/ink editorial system (site/src/styles/theme.css): flat, hairline rules, square corners everywhere (border-radius: 0 !important globally), no shadows, no gradients, sentence case, no tiny all-caps tracked labels, one oxblood accent used only for focus/selection/edges, one amber used only for the "untested" warning. Syntax highlighting is deliberately near-monochrome so the graph's edges are the only colour in the code.

2.1 Color tokens

token	light	dark	used for
--paper	#f7f6f2	#16150f	page/body background (always set explicitly)
--paper-2	#f1efe8	#1c1a14	trail bar, inputs, hovered code line, figure grounds
--press	#e8e6dd	#23211a	hover fills, inline code background, bars
--press-2	#dedbd0	#2c2a22	reserved (pressed state)
--ink	#16150f	#f3f1ea	primary text, node borders, major rules
--ink-2	#56544a	#b8b5a8	secondary text, strings, callers' names when uncertain
--ink-3	#87847a	#87847a	tertiary text, comments, glyph borders, edge labels
--ink-4	#b4b1a5	#5d5b52	line numbers, resting connectors, dimmed map nodes
--rule	#16150f	#f3f1ea	top bar bottom rule, code/blast section rules
--rule-soft	#d6d3c8	#34322a	rail dividers, chips, card borders
--rule-faint	#e6e3d9	#26241d	row separators, map layer lines
--accent	#7a2230	#d48b96	oxblood: call-site links, current trail hop, hot connectors, selected map edges
--accent-ink	#5e1a25	#e5a5ae	accent text on accent-soft
--accent-soft	#f0e3e5	#33201f	tinted rows ("you came from here"), hot code lines
--accent-line	#d9b3b9	#6b3a42	accent borders/underlines at rest
--amber	#8a5a0b	#d9a94a	"No test reaches this within 3 caller hops" badge only
--amber-soft	#f3e9d2	#2e2716	that badge's fill

Theme selection: define the light set on bare :root; redefine under @media (prefers-color-scheme: dark) guarded as :root:not([data-theme="light"]); redefine again under :root[data-theme="dark"]. Never define a colour only inside a media/[data-theme] block. body { background: var(--paper); color: var(--ink) }.

2.2 Type

• UI: Archivo 400/500/600/700 (fallback -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif).
• Code, symbol names, file paths, chips, trail, map labels: IBM Plex Mono 400/500/600 (+ italic 400) (fallback ui-monospace, 'SF Mono', Menlo, Consolas, monospace).
• Scale: body UI 13px/1.45; code 12.5px/20px; symbol title 600 20px/1.2 mono, letter-spacing −0.01em; section labels (Called by, Calls, Blast radius) 600 13px sans; rail rows 12.5px mono name + 11px sans meta; chips 11px mono; line numbers 11px mono in --ink-4; badges 11.5px; map node label 13px mono, count 11px; flow card name 600 13px mono, window 12px/19px mono; trail 12px mono. Headings sentence case, text-wrap: balance.
• Code token classes: comment --code-comment; string --ink-2; keyword weight 500 (same ink); number --ink-2; definition name on its own line weight 600; call-site link = --accent, underline --accent-line, offset 3px, hover/hot fill --accent-soft; uncertain link = --ink-2, dotted underline --ink-4; link to a symbol outside the index = --ink-2, underline --rule-soft, not clickable.
  • As built (CG-43) — comments are --code-comment, not --ink-3. --ink-3 measures 3.46:1 on --paper and 3.00:1 on the hot-line tint --accent-soft, both under the 4.5:1 that 12.5px body text needs. --code-comment is the smallest step along the same warm-grey ramp that clears 4.5:1 on every background a code line can have (#6a675d light — paper 5.23, paper-2 4.92, accent-soft 4.53; #8e8b81 dark — 5.36 / 5.10 / 4.51) while staying quieter than the --ink-2 strings and numbers use, so the recession order above is unchanged. Everything else in this list passes as specified: ink 16.9/16.2, ink-2 7.03/8.89, accent 9.25/6.91 (8.02/5.80 on --accent-soft).
  • Line numbers remain --ink-4 (1.99:1 light, 2.69:1 dark) — a known contrast gap, left as specified rather than changed inside a rendering task. Worth a design call before phase 2.

2.3 Kind glyphs

16×16 hollow square, 1px --ink-3 border, letter in 500 9.5px mono: ƒ function · m method · C class · I interface · S struct · T type alias · E enum · e enum member · k constant · v variable · p property/field · ≡ file (dashed border) · R route · ⟨⟩ component · N namespace · M module · Tr trait · U union · P protocol. Container/type kinds get a --press fill.

3. Layout and components

3.1 App shell

• Grid rows: top bar 48px / trail bar 34px / main. Top bar: brand (10px hollow square mark + "CodeGraph" 600 14px + "ui" in --ink-3), view tabs (Map · Symbol · Flow, 5px 10px padding, active = 2px --ink bottom border), search input (30px tall, --paper-2 fill, --rule-soft border → --ink on focus, max-width 720px), project stats in --ink-2 12px. Bottom rule of the top bar is --rule (1px); the trail bar's is --rule-soft.
• Focus ring everywhere: outline: 2px solid var(--accent); outline-offset: 1px. prefers-reduced-motion disables transitions.

3.2 Symbol view (#/s/<id>?t=<trail>&hl=<line>)

• Grid: left rail 300px | stage minmax(520px, 1fr); inside the stage: center minmax(480px, 1fr) | right rail 320px. Left rail has its own scroll; center + right rail scroll together in the stage (so callee rows stay aligned to lines). ≤ 1100px: 240px | minmax(360px,1fr) | 260px.
• Rail headers sticky, 12px 14px 8px padding, 600 13px, count in --ink-3, hint text right-aligned 11.5px (← step up, step down →).
• Center: padding 18px 22px 40px. Header row: glyph, name (h1), kind word (--ink-3 12.5px, "· async · static · private"), location file:start–end · N lines (11.5px mono, file is a link). "in ClassName" breadcrumb 11.5px mono --ink-3. Badges row (gap 6px): exported · hub · N callers (border --ink) · tests badge (Reached by tests · N files within 3 hops, hollow 8px swatch) or amber warning (filled swatch). Signature 12px mono --ink-2, docstring 12.5px --ink-2 max 70ch, relations row of chips (extends X, implemented by …, uses types … — chips 11.5px mono, --rule-soft border, 1px 6px).
• Code block: 1px --rule top border + 6px; each line is a grid 44px | 1fr | 18px (line number right-aligned, 12px right padding; text white-space: pre; port cell). Hover line → --paper-2; hot/highlighted line → --accent-soft. Port: 6×6 square, 1px --ink-3 border, positioned right 4px / top 7px; filled --ink-3 when the line has a resolved (≥ 0.6) edge, hollow when only uncertain; accent fill+border when hot. Gap rows ("⋯ N lines without calls"): 11px --ink-4, dashed --rule-soft top/bottom, 2px margin, indented 44px. Long bodies: head 80 lines + ±4-line windows around every call site; bodies ≤ 260 lines shown whole; containers show the outline instead of a body > 80 lines.
• Right rail rows (.rrow): absolutely positioned, left 14px right 12px, height 34px, grid 16px | 1fr gap 8px, padding 0 6px, 1px transparent border (→ --ink when keyboard-selected; --accent-line + --accent-soft when hot/origin). Desired y = center of first call-site line − 17px; place in line order with y = max(desired, prevY + 34 + 6); the stage's min-height grows to fit. Name 12.5px mono (×N in --ink-3 when called from N lines); meta 11px --ink-3: file (or "same file"), edge word (creates, passes as value), tags (hub · N, outside index, via <synthesizedBy>) as 10.5px bordered pills. Uncertain targets fold into a <details> ("+ Uncertain · N name-only matches, confidence < 0.6") placed 8px below the last row; "+N more calls into symbols outside the index" note 11.5px.
• Connectors (SVG overlay covering the stage content): one cubic Bézier per call line → row: M x0,ly C cx,ly cx,ry x1,ry with x0 = center right edge − 10, x1 = rail left + 14, cx = (x0+x1)/2. Resting: --ink-4 1px; hot: --accent 1.5px; uncertain: dasharray 2 3; heuristic: dasharray 6 3 in --ink-3; origin (the edge you arrived by): --accent. Left rail draws no connectors (separate scroll container); the origin caller row is tinted instead. (Real build: consider converging left connectors into the header — open question.)
• Left rail: file groups (.filegroup padding 10px 14px 4px; path 11px mono --ink-3, count bold --ink-2; the focus's own file first as "same file"); rows grid 16px | 1fr, padding 5px 6px 5px 4px, name 12.5px mono, meta row with edge-kind label + call-site chips (:4657, 11px mono, --rule-soft border, 0 4px; click = open caller at that line). Folds: Tests · N calls from M files (lists files), Uncertain · N. Origin row: --accent-soft fill + --accent-line border
  • "you came from here". Empty state note 11.5px --ink-3.
• Blast radius strip: 22px above, 1px --rule top border, 10px padding-top; "Blast radius" 600 + stats (<strong>N</strong> direct dependents · within 3 hops · files · test files · routes, tabular-nums); bar 6px tall, max-width 420px, --press track, light fill --ink-2 = within-3 share, dark fill --ink = direct share, both scaled to the widest radius in the index; legend 11.5px; <details> "What would need re-checking if this changed" listing dependents by file.
• Members outline (classes, interfaces, structs, enums, files): rows grid 16px | minmax(160px,auto) | 1fr | auto, padding 6px 4px, --rule-faint separators, name 12.5px mono, signature 11.5px mono --ink-3 ellipsised, counts ← in → out 11px mono tabular; nested members indented 22px; properties/enum members dimmed.
• Keyboard: / or ⌘K search · ↑/↓ (or j/k) move in the active rail · ←/→ switch rail · Enter follow · Backspace or [ back · m map · f flow · Esc back to Symbol view. Selection = 1px --ink border on the row, scrolled into view.

3.3 Trail bar

34px, --paper-2, mono 12px. Trail label in --ink-3 sans; hops as buttons (glyph + name, padding 4px 8px) separated by → (stepped into a call) or ← (stepped up to a caller) in --ink-3; current hop: --accent text, --accent-line border, --paper fill; hover --press. Right side: Read as flow, Clear (sans 4px 8px, --rule-soft border). Empty hint in --ink-3.

3.4 File view (#/file/<path>)

Grid 300px | minmax(480px,1fr) | 300px: Imported by · outline (source order, nested, counts, line number right) · Imports. File rows 12px mono, 5px 14px padding, --rule-faint separators; files outside the index in --ink-3, not clickable. Header: file glyph, basename as h1, lang · KB · N symbols · generated, full path.

As built (phase 1, CG-46). The two rails count dependencies, not import statements — getFileDependencies / getFileDependents, every cross-file edge except contains. The prototype drew imports edges alone, and on this repo that understates the answer: src/graph/traversal.ts imports two files and depends on four (it reaches src/resolution/lru-cache.ts through a call no import names). The import rows are still merged in — they carry the symbol NAMES, shown as a count on the row and in full in its tooltip. Rows sort production-first then alphabetically, tests last. Imports that resolved to nothing indexed are listed under Outside the index, in --ink-3 and not clickable, so a file importing react and fs does not read as having one dependency. The header's N symbols is the OUTLINE's total, not the file record's node count (which includes the file node and its import declarations). A file that runs code at its top level — an edge out of the file node — carries a badge ("Runs N calls at the top level — see what it calls") that focuses the file node, the only place that code can be read. Outline rows are a fixed 28px and the list is windowed above 250 rows (this repo's own fixtures hold a 1,681-symbol .d.ts); the two constants live together in ui/src/lib/file-model.ts. Keyboard: ↑/↓ within a pane, ←/→ across the three panes, Enter follows; ?hl=<line> selects the DEEPEST outline row whose range holds the line.

3.5 Flow strip (#/flow/<key>)

Header: "Flow" + a <select> of flows (--paper-2, --rule-soft border, 12.5px sans) + a 78ch note. Cards 380px wide, --rule-soft border (--ink on hover, --accent when current), header grid 16px | 1fr padding 10px 12px 6px (name 600 13px mono, file:line 11px --ink-3), separator --rule-faint, source window 12px/19px mono with line numbers (grid 40px | 1fr | 6px), the call line tinted --accent-soft and the calling identifier as an accent link; ±3 lines around the call. Links between cards: 86px wide; a 1px --ink-3 line with a filled arrowhead (polygon 76,3 84,7 76,11 in a 86×14 box); label 11px mono --ink-3 centred (calls, line 2029; via callback · registered at file:line); uncertain dasharray 2 3; heuristic dasharray 5 3. End cap: 240px, dashed --rule-soft border, 12px text — "Where the graph stops" + the boundary (form, key, line) + uncertain continuations. In the real build the strip is a Svelte Flow canvas laid out left→right with the same card/link visuals.

3.6 Map (#/map)

Grid: canvas minmax(600px,1fr) | side panel 320px (--rule-soft left border, 14px 16px padding). Nodes: rect width = max(110, label.length × 7.3 + 28), height 40, --paper fill, 1px --ink stroke (2px + --press fill when hovered/selected; --ink-4 when dimmed; test modules dashed 4 3 in --ink-3), label 13px mono at (10,17), count "N symbols · M files" 11px --ink-3 at (10,32). Layers: vertical gap 74px, horizontal gap 34px, padding 44px; entry points at the top ("entry points" label), foundations at the bottom ("foundations — depend on nothing below"); faint layer lines --rule-faint. Layout: aggregate edges by module; break 2-cycles keeping the heavier direction; longest-path layering (a module sits one layer above everything it depends on); barycenter ordering, 3 sweeps; single-node layers centred; ports spread along each box (x = left + width × (i+1)/(n+1) over the node's sorted out/in edges) so bundles fan. Edges: cubic M x0,y0 C x0,my x1,my x1,y1 (my = midpoint), stroke-width = min(6, 1 + log2(count) × 0.7), --ink at opacity 0.28 (hot 0.95, dimmed 0.06); a 12px transparent hit path per edge; edges with count < 4 (< 6 when tests included) hidden until a touching module is selected; cycle back-edges only when selected, --accent opacity 0.6, dasharray 4 3. Tooltip: --paper, 1px --ink border, 8px 10px, 12px: "src/a → src/b", "N edges", by kind, top 4 symbol pairs. Side panel: title, 2-sentence explanation, hidden-edge note, "Include tests, scripts, kernel & site" checkbox, "Mutual dependencies" fold, selected module's dependencies/dependents with counts and its files. Fit: SVG width 100%, viewBox to content, height: max(100%, 0.9 × content) so labels never scale below ~0.9. In the real build this is a Svelte Flow canvas (custom node + custom edge components; hidden handles as ports; pan/zoom/fitView) with the same geometry.

3.7 Search palette

Results panel under the input: 1px --ink border, max-height 420px; group headers 12px --ink-3 (Flow, Symbols & files); rows grid 18px | 1fr | auto, 6px 10px, --rule-faint separators, selected/hover --press; name 12.5px mono + signature 11.5px mono --ink-3 + location 11px mono. Flow grammar: "how does X reach Y", "X -> Y", "X → Y".

As built (phase 1, CG-45). Group headers are the result's KIND — Methods, Functions, Classes, Files — a group appearing where its best result did, so flattening the groups reproduces the ranking ↑/↓ walks. The prototype's two-group split (Flow / Symbols & files) waits for the Flow view: a flow question is recognised now, but until there is a path to draw it searches both endpoints and says so in one line above the results rather than offering a row that lands on a placeholder. A file's row shows its basename with its DIRECTORY in the location column — its name column already carries the path, and printing it twice reads as an error.

At rest — an empty box, or the empty screen — the panel shows entry points from /api/entrypoints: routes (URL → handler), files that run something at module level (a CLI, a worker entry, a script — ranked by calls × the number of other files they reach), and the most depended-on symbols. Each section says what it is derived from, never that a file IS the entry point.

4. Libraries and versions

• Svelte 5 (≥ 5.25) + Vite (workspace ui/), Svelte Flow @xyflow/svelte ^1.6 for the Map and Flow canvases only (custom nodes/edges, hidden handles for port spreading, local selection state — the pattern in docker-app's StackGraph.svelte); @dagrejs/dagre only as a fallback if crossing quality demands it (never ELK). Symbol view = DOM + one SVG overlay (ResizeObserver re-layout).
• Shiki (JavaScript regex engine, lazy grammars, custom near-monochrome theme as in §2.2) server-side in /api/source; tree-sitter-derived tokens replace it in phase 3.
  • As built (CG-43). @shikijs/core + @shikijs/engine-javascript are runtime dependencies (~5 MB installed, no wasm, no native module); @shikijs/langs is a devDependency and npm run build:textmate (scripts/prune-grammars.mjs) writes only the closure the engine's 40-odd languages reach — 56 grammars, 2.6 MB — into dist/textmate/, checked by scripts/check-ui-build.mjs. Shipping all 722 grammars would have been 11 MB.
  • The theme classifies rather than colours: its foregrounds are sentinels the server maps to class names (comment, string, keyword, number, ident, other), and the viewer paints them from the CSS custom properties above — so one token stream serves light and dark with no refetch when prefers-color-scheme flips, and the ramp lives only in ui/src/app.css.
  • Every code token is split into identifier runs before it goes on the wire, so the graph's call-site overlay claims a token the highlighter produced rather than re-cutting a line — which is what keeps a link landing on the callee's own name whatever boundaries a grammar chose, and keeps links working in the plain-text fallback.
  • Measured on this machine (Shiki 4.4.3, JS regex engine, 3 000 lines cold): Python 35–47 ms, Go 43–57 ms, TypeScript ~700 ms — the TS TextMate grammar is 5–7× the cost of any other and the oniguruma-wasm engine would run it in ~120 ms. Slices are therefore cached by content hash + range, so a re-render (resize, theme flip, stepping back through the trail) is a map lookup (< 10 ms); a symbol-sized slice (~280 lines of TS) is ~50 ms cold. Phase 1 only ever requests one symbol's range.
• No native modules; no runtime dependency for the UI itself; the CLI serves dist/viewer/ over node:http, loopback only. (Not dist/ui/ — src/ui/ is the engine's terminal ui and tsc already compiles it there; see ui/README.md.)

5. Copy rules

Sentence case; controls say what happens ("Read as flow", "Clear"); counts always visible next to folds; honesty phrases fixed: "No test reaches this within 3 caller hops", "Reached by tests · N files within 3 hops", "Uncertain · N name-only matches, confidence < 0.6", "outside the index", "Where the graph stops", "changed on disk after the last index sync".

---

Appendix — prototype stylesheet (verbatim; measurements above are derived from it)

/* ---------- tokens: paper/ink editorial, one oxblood accent ---------- */
:root {
  --paper: #f7f6f2; --paper-2: #f1efe8; --press: #e8e6dd; --press-2: #dedbd0;
  --ink: #16150f; --ink-2: #56544a; --ink-3: #87847a; --ink-4: #b4b1a5;
  --rule: #16150f; --rule-soft: #d6d3c8; --rule-faint: #e6e3d9;
  --accent: #7a2230; --accent-ink: #5e1a25; --accent-soft: #f0e3e5; --accent-line: #d9b3b9;
  --amber: #8a5a0b; --amber-soft: #f3e9d2;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --code-size: 12.5px; --code-lh: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16150f; --paper-2: #1c1a14; --press: #23211a; --press-2: #2c2a22;
    --ink: #f3f1ea; --ink-2: #b8b5a8; --ink-3: #87847a; --ink-4: #5d5b52;
    --rule: #f3f1ea; --rule-soft: #34322a; --rule-faint: #26241d;
    --accent: #d48b96; --accent-ink: #e5a5ae; --accent-soft: #33201f; --accent-line: #6b3a42;
    --amber: #d9a94a; --amber-soft: #2e2716;
  }
}
:root[data-theme="dark"] {
  --paper: #16150f; --paper-2: #1c1a14; --press: #23211a; --press-2: #2c2a22;
  --ink: #f3f1ea; --ink-2: #b8b5a8; --ink-3: #87847a; --ink-4: #5d5b52;
  --rule: #f3f1ea; --rule-soft: #34322a; --rule-faint: #26241d;
  --accent: #d48b96; --accent-ink: #e5a5ae; --accent-soft: #33201f; --accent-line: #6b3a42;
  --amber: #d9a94a; --amber-soft: #2e2716;
}

html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; border-radius: 0 !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); }
.dim { color: var(--ink-3); }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

#app { height: 100vh; display: grid; grid-template-rows: 48px 34px 1fr; }

/* ---------- top bar ---------- */
.topbar { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 22px; padding: 0 18px; border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 30; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--ink); background: var(--paper); align-self: center; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 14px; }
.brand-sub { color: var(--ink-3); font-size: 12px; }
.views { display: flex; gap: 2px; }
.views a { padding: 5px 10px; color: var(--ink-2); border-bottom: 2px solid transparent; }
.views a:hover { color: var(--ink); }
.views a.active { color: var(--ink); border-bottom-color: var(--ink); }
.search { position: relative; max-width: 720px; }
#q { width: 100%; height: 30px; padding: 0 10px; border: 1px solid var(--rule-soft); background: var(--paper-2); color: var(--ink); font: 13px var(--sans); }
#q:focus { border-color: var(--ink); outline: none; }
#q::placeholder { color: var(--ink-3); }
.q-results { position: absolute; top: 32px; left: 0; right: 0; background: var(--paper); border: 1px solid var(--ink); max-height: 420px; overflow: auto; z-index: 40; }
.q-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid var(--rule-faint); cursor: pointer; }
.q-row:last-child { border-bottom: 0; }
.q-row:hover, .q-row.sel { background: var(--press); }
.q-row .nm { font-family: var(--mono); font-size: 12.5px; }
.q-row .sig { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; margin-left: 6px; }
.q-row .loc { color: var(--ink-3); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.q-head { padding: 6px 10px 4px; color: var(--ink-3); font-size: 12px; border-bottom: 1px solid var(--rule-faint); }
.project { color: var(--ink-2); font-size: 12px; white-space: nowrap; }

/* kind glyph: hollow square variants, mono letter */
.k { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid var(--ink-3); color: var(--ink-2); font: 500 9.5px var(--mono); flex: 0 0 auto; }
.k.fn { border-style: solid; }
.k.cls, .k.iface, .k.struct, .k.type { background: var(--press); }
.k.file { border-style: dashed; }

/* ---------- trail bar ---------- */
.trailbar { display: flex; align-items: center; gap: 0; padding: 0 18px; border-bottom: 1px solid var(--rule-soft); background: var(--paper-2); overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.trailbar .label { color: var(--ink-3); font-family: var(--sans); margin-right: 10px; }
.hop { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--ink-2); border: 1px solid transparent; }
.hop:hover { color: var(--ink); background: var(--press); }
.hop.cur { color: var(--accent); border-color: var(--accent-line); background: var(--paper); }
.hop-arrow { color: var(--ink-3); padding: 0 2px; }
.hop-arrow.up { color: var(--ink-2); }
.trailbar .spacer { flex: 1; }
.trailbar .tb-btn { font-family: var(--sans); color: var(--ink-2); padding: 4px 8px; border: 1px solid var(--rule-soft); margin-left: 8px; background: var(--paper); }
.trailbar .tb-btn:hover { border-color: var(--ink); color: var(--ink); }
.trailbar .empty { color: var(--ink-3); font-family: var(--sans); }

/* ---------- main / focus layout ---------- */
#main { min-height: 0; overflow: hidden; }
.focus { display: grid; grid-template-columns: 300px minmax(520px, 1fr); height: 100%; min-height: 0; }
.rail-left { border-right: 1px solid var(--rule-soft); overflow: auto; background: var(--paper); }
.stage { position: relative; overflow: auto; }
.stage-inner { position: relative; display: grid; grid-template-columns: minmax(480px, 1fr) 320px; min-height: 100%; }
.center { padding: 18px 22px 40px 22px; min-width: 0; }
.rail-right { position: relative; border-left: 1px solid var(--rule-faint); }
.overlay { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.overlay path { fill: none; stroke: var(--ink-4); stroke-width: 1; }
.overlay path.hot { stroke: var(--accent); stroke-width: 1.5; }
.overlay path.uncertain { stroke-dasharray: 2 3; }
.overlay path.heur { stroke-dasharray: 6 3; stroke: var(--ink-3); }
.overlay path.origin { stroke: var(--accent); }

/* rail headings */
.rail-h { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 8px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.rail-h .n { color: var(--ink-3); font-weight: 400; }
.rail-h .hint { color: var(--ink-3); font-weight: 400; font-size: 11.5px; }
.filegroup { padding: 10px 14px 4px; }
.filegroup .fpath { font: 11px var(--mono); color: var(--ink-3); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.filegroup .fpath b { color: var(--ink-2); font-weight: 500; }
.filegroup .fpath a:hover { color: var(--ink); text-decoration: underline; }
.row { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; padding: 5px 6px 5px 4px; margin: 0 -6px; cursor: pointer; border: 1px solid transparent; position: relative; }
.row:hover { background: var(--press); }
.row.sel { border-color: var(--ink); }
.row.origin { background: var(--accent-soft); border-color: var(--accent-line); }
.row .nm { font: 12.5px var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { color: var(--ink-3); font-size: 11px; margin-top: 1px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.row .kindlbl { color: var(--ink-3); }
.row .chip { font: 11px var(--mono); color: var(--ink-2); border: 1px solid var(--rule-soft); padding: 0 4px; background: var(--paper); }
.row .chip:hover { border-color: var(--ink); color: var(--ink); }
.row.uncertain .nm, .row.stub .nm { color: var(--ink-2); }
.row.uncertain .nm { text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; }
.row.stub { cursor: default; }
.row.stub .nm::after { content: ' ·'; color: var(--ink-4); }
.fold { padding: 8px 14px; }
.fold > summary { cursor: pointer; color: var(--ink-2); font-size: 12px; list-style: none; display: flex; gap: 6px; align-items: baseline; }
.fold > summary::before { content: '+'; font-family: var(--mono); color: var(--ink-3); width: 10px; }
.fold[open] > summary::before { content: '−'; }
.fold .body { padding: 6px 0 0 16px; color: var(--ink-2); font-size: 12px; }
.fold .body .fp { font: 11px var(--mono); color: var(--ink-2); padding: 2px 0; }
.note { padding: 8px 14px; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }

/* ---------- focus card ---------- */
.card-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.card-h h1 { margin: 0; font: 600 20px/1.2 var(--mono); letter-spacing: -0.01em; }
.card-h .kindword { color: var(--ink-3); font-size: 12.5px; }
.card-h .loc { font: 11.5px var(--mono); color: var(--ink-2); }
.card-h .loc a:hover { text-decoration: underline; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge { font-size: 11.5px; color: var(--ink-2); border: 1px solid var(--rule-soft); padding: 2px 7px; background: var(--paper); display: inline-flex; gap: 5px; align-items: center; }
.badge.ok { border-color: var(--rule-soft); }
.badge.warn { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.badge.hub { border-color: var(--ink); }
.badge .sw { width: 8px; height: 8px; border: 1px solid currentColor; display: inline-block; }
.badge.warn .sw { background: currentColor; }
.sig { margin-top: 10px; font: 12px var(--mono); color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.doc { margin-top: 8px; color: var(--ink-2); font-size: 12.5px; max-width: 70ch; white-space: pre-wrap; }
.parents { margin-top: 6px; font: 11.5px var(--mono); color: var(--ink-3); }
.parents a:hover { color: var(--ink); text-decoration: underline; }
.rel { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12px; color: var(--ink-3); }
.rel .chip { font: 11.5px var(--mono); color: var(--ink-2); border: 1px solid var(--rule-soft); padding: 1px 6px; cursor: pointer; background: var(--paper); }
.rel .chip:hover { border-color: var(--ink); color: var(--ink); }

/* code */
.code { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 6px; font: var(--code-size)/var(--code-lh) var(--mono); }
.ln { display: grid; grid-template-columns: 44px 1fr 18px; align-items: stretch; position: relative; }
.ln:hover { background: var(--paper-2); }
.ln.hot { background: var(--accent-soft); }
.ln .no { color: var(--ink-4); text-align: right; padding-right: 12px; user-select: none; font-size: 11px; }
.ln .tx { white-space: pre; overflow-x: auto; scrollbar-width: none; }
.ln .tx::-webkit-scrollbar { display: none; }
.ln .port { position: relative; }
.ln .port i { position: absolute; right: 4px; top: 7px; width: 6px; height: 6px; border: 1px solid var(--ink-3); background: var(--paper); }
.ln .port i.sure { background: var(--ink-3); }
.ln.hot .port i { border-color: var(--accent); background: var(--accent); }
.gap { color: var(--ink-4); padding: 2px 0 2px 44px; font-size: 11px; border-top: 1px dashed var(--rule-soft); border-bottom: 1px dashed var(--rule-soft); margin: 2px 0; }
.t-c { color: var(--ink-3); }
.t-s { color: var(--ink-2); }
.t-k { font-weight: 500; }
.t-n { color: var(--ink-2); }
.t-def { font-weight: 600; }
.ref { color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.ref:hover, .ref.hot { text-decoration-color: var(--accent); background: var(--accent-soft); }
.ref.uncertain { color: var(--ink-2); text-decoration-style: dotted; text-decoration-color: var(--ink-4); }
.ref.stub { color: var(--ink-2); text-decoration-color: var(--rule-soft); cursor: default; }

/* callee rail rows (absolutely positioned to lines) */
.rail-right .rrow { position: absolute; left: 14px; right: 12px; height: 34px; display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; padding: 0 6px; border: 1px solid transparent; cursor: pointer; }
.rail-right .rrow:hover { background: var(--press); }
.rail-right .rrow.sel { border-color: var(--ink); }
.rail-right .rrow.hot { background: var(--accent-soft); border-color: var(--accent-line); }
.rail-right .rrow.origin { background: var(--accent-soft); }
.rail-right .rrow .nm { font: 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-right .rrow .meta { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 8px; }
.rail-right .rrow.uncertain .nm { color: var(--ink-2); text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; }
.rail-right .rrow.stub { cursor: default; }
.rail-right .rrow.stub .nm { color: var(--ink-2); }
.rail-right .rrow .tag { font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--rule-soft); padding: 0 4px; }
.rail-right .rfold { position: absolute; left: 14px; right: 12px; }
.rail-right .rfold summary { cursor: pointer; color: var(--ink-2); font-size: 12px; list-style: none; padding: 6px; }
.rail-right .rfold summary::before { content: '+ '; font-family: var(--mono); color: var(--ink-3); }
.rail-right .rfold[open] summary::before { content: '− '; }
.rail-right .rfold .body .rrow { position: static; height: auto; padding: 4px 6px; }
.rail-right .rnote { position: absolute; left: 20px; right: 12px; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }
.rail-right .rail-h { position: sticky; }

/* blast radius */
.blast { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 10px; }
.blast .bh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.blast .bh b { font-weight: 600; }
.blast .stat { font-size: 12.5px; color: var(--ink-2); }
.blast .stat strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.blast .bar { height: 6px; background: var(--press); margin-top: 8px; position: relative; max-width: 420px; }
.blast .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); }
.blast .bar i.direct { background: var(--ink); }
.blast .legend { color: var(--ink-3); font-size: 11.5px; margin-top: 4px; }
.blast details { margin-top: 8px; }
.blast summary { cursor: pointer; color: var(--ink-2); font-size: 12px; list-style: none; }
.blast summary::before { content: '+ '; font-family: var(--mono); color: var(--ink-3); }
.blast details[open] summary::before { content: '− '; }

/* members outline (class / interface / file) */
.outline { margin-top: 14px; border-top: 1px solid var(--rule); }
.orow { display: grid; grid-template-columns: 16px minmax(160px, auto) 1fr auto; gap: 10px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--rule-faint); cursor: pointer; }
.orow:hover { background: var(--press); }
.orow .nm { font: 12.5px var(--mono); }
.orow .sig { font: 11.5px var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .cnt { font: 11px var(--mono); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.orow.nested { padding-left: 22px; }
.orow.dimmed .nm { color: var(--ink-3); }
.subh { margin: 18px 0 4px; font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.subh .n { color: var(--ink-3); font-weight: 400; }

/* ---------- file view ---------- */
.fileview { display: grid; grid-template-columns: 300px minmax(480px, 1fr) 300px; height: 100%; }
.fileview .rail-left, .fileview .rail-r2 { overflow: auto; }
.fileview .rail-r2 { border-left: 1px solid var(--rule-soft); }
.fileview .center { overflow: auto; }
.filerow { display: block; padding: 5px 14px; font: 12px var(--mono); color: var(--ink-2); cursor: pointer; border-bottom: 1px solid var(--rule-faint); }
.filerow:hover { background: var(--press); color: var(--ink); }
.filerow.stubf { color: var(--ink-3); cursor: default; }

/* ---------- flow view ---------- */
.flow { height: 100%; overflow: auto; padding: 18px 22px; }
.flow-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-bottom: 14px; }
.flow-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.flow-h select { font: 12.5px var(--sans); border: 1px solid var(--rule-soft); background: var(--paper-2); color: var(--ink); padding: 4px 8px; }
.strip { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: 18px; }
.hopcard { flex: 0 0 380px; border: 1px solid var(--rule-soft); background: var(--paper); cursor: pointer; }
.hopcard:hover { border-color: var(--ink); }
.hopcard.cur { border-color: var(--accent); }
.hopcard .hh { padding: 10px 12px 6px; border-bottom: 1px solid var(--rule-faint); display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; }
.hopcard .hh .nm { font: 600 13px var(--mono); }
.hopcard .hh .loc { font: 11px var(--mono); color: var(--ink-3); }
.hopcard .hh .stepno { color: var(--ink-3); font-size: 11px; font-family: var(--mono); }
.hopcard .win { padding: 6px 0 8px; font: 12px/19px var(--mono); }
.hopcard .win .ln { grid-template-columns: 40px 1fr 6px; }
.hopcard .win .ln .no { font-size: 10.5px; }
.hopcard .win .ln .tx { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.hopcard .nosrc { padding: 10px 12px; color: var(--ink-3); font-size: 12px; }
.hoplink { flex: 0 0 86px; display: flex; flex-direction: column; align-items: center; padding-top: 14px; color: var(--ink-3); font: 11px var(--mono); text-align: center; gap: 4px; }
.hoplink svg { width: 86px; height: 14px; display: block; }
.hoplink svg line { stroke: var(--ink-3); stroke-width: 1; }
.hoplink svg polygon { fill: var(--ink-3); }
.hoplink.uncertain svg line { stroke-dasharray: 2 3; }
.hoplink.heur svg line { stroke-dasharray: 5 3; }
.hoplink .lbl { max-width: 84px; line-height: 1.3; }
.endcap { flex: 0 0 240px; border: 1px dashed var(--rule-soft); padding: 12px; color: var(--ink-2); font-size: 12px; line-height: 1.45; align-self: stretch; }
.endcap b { color: var(--ink); font-weight: 600; }
.flow-note { color: var(--ink-3); font-size: 12px; max-width: 78ch; line-height: 1.5; }

/* ---------- map view ---------- */
.mapview { display: grid; grid-template-columns: minmax(600px, 1fr) 320px; height: 100%; }
.mapstage { position: relative; overflow: auto; }
.mapstage svg { display: block; width: 100%; }
.mapside details { margin: 4px 0 10px; }
.mapside summary::-webkit-details-marker { display: none; }
.mapside { border-left: 1px solid var(--rule-soft); overflow: auto; padding: 14px 16px; }
.mapside h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.mapside p { margin: 0 0 10px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; max-width: 40ch; }
.mapside .toggle { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin: 10px 0 14px; cursor: pointer; }
.mapside .toggle input { margin: 0; accent-color: var(--ink); }
.mapside .cyc { font: 11.5px var(--mono); color: var(--ink-2); padding: 3px 0; }
.mapside .cyc b { color: var(--accent); font-weight: 500; }
.mapside .modlist { margin-top: 8px; }
.mapside .edgeinfo { margin-top: 12px; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.mapside .edgeinfo .pair { font: 11.5px var(--mono); color: var(--ink-2); padding: 2px 0; display: flex; justify-content: space-between; gap: 10px; }
.mapside .edgeinfo .pair b { color: var(--ink); font-weight: 500; }
.mnode rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.mnode text { font: 13px var(--mono); fill: var(--ink); }
.mnode .cnt { font-size: 11px; fill: var(--ink-3); }
.mnode.test rect { stroke-dasharray: 4 3; stroke: var(--ink-3); }
.mnode.test text { fill: var(--ink-2); }
.mnode:hover rect, .mnode.sel rect { stroke-width: 2; fill: var(--press); }
.mnode.dimmed rect { stroke: var(--ink-4); }
.mnode.dimmed text { fill: var(--ink-4); }
.medge { fill: none; stroke: var(--ink); stroke-opacity: 0.28; cursor: pointer; }
.medge:hover, .medge.hot { stroke-opacity: 0.95; }
.medge.dimmed { stroke-opacity: 0.06; }
.medge.cycle { stroke: var(--accent); stroke-opacity: 0.6; }
.medge-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
.layerlbl { font: 12px var(--sans); fill: var(--ink-3); }
.layerline { stroke: var(--rule-faint); stroke-width: 1; }
.tip { position: absolute; z-index: 20; background: var(--paper); border: 1px solid var(--ink); padding: 8px 10px; font-size: 12px; color: var(--ink); pointer-events: none; max-width: 320px; }
.tip .mono { font-size: 11.5px; }
.tip .row2 { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }

/* ---------- misc ---------- */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 8px 14px; font-size: 12.5px; z-index: 50; max-width: 70ch; }
.kbd { font: 11px var(--mono); border: 1px solid var(--rule-soft); padding: 0 4px; color: var(--ink-2); background: var(--paper); }
.emptystate { padding: 40px; color: var(--ink-2); max-width: 60ch; line-height: 1.5; }
.emptystate h2 { margin: 0 0 8px; font-size: 16px; }
@media (max-width: 1100px) { .focus { grid-template-columns: 240px 1fr; } .stage-inner { grid-template-columns: minmax(360px, 1fr) 260px; } .fileview { grid-template-columns: 220px 1fr 220px; } .mapview { grid-template-columns: 1fr 260px; } }