/* Query map: operation colors identify structure, never measured cost. */
#plan {
  background: var(--bg-0);
  color: var(--ink-0);
  padding: 28px 0 32px;
}
#plan > .wrap { width: calc(100% - 64px); max-width: 1800px; }
.map-intro { margin: 0 0 18px; max-width: 980px; }
.map-intro h2 { margin: 8px 0; font: 500 clamp(28px, 3vw, 40px)/1.12 var(--font-ui); letter-spacing: -.04em; }
.map-intro p { max-width: 85ch; margin: 0; color: var(--ink-1); font: 14px/1.65 var(--font-ui); overflow-wrap: anywhere; }
#plan .workspace-shell { min-height: 0; height: auto; grid-template-rows: auto; padding: 0; gap: 0; border-radius: 12px; border-color: var(--line-1); box-shadow: var(--shadow-2); }
#plan .visualizer-panel { height: auto; }
#plan .canvas-body { flex: none; }
#plan .workspace-controls { margin-bottom: 8px; }
#plan .share-status { margin: 4px 0 10px; }
#plan .tab-bar { padding: 10px 16px; min-height: 56px; }
#plan .segmented-control { background: var(--bg-2); border: 0; padding: 3px; }
#plan .segment.active { background: var(--bg-1); box-shadow: var(--shadow-1); }
#plan .tool-button { background: var(--bg-1); color: var(--ink-1); border: 1px solid var(--line-1); border-radius: 6px; min-height: 32px; }
#plan .tool-button:hover, #plan .tool-button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
#plan .plan-search { background: var(--bg-1); }
#plan .graph-actions { gap: 8px; padding: 10px 16px; border-bottom: 0; }
.map-direction { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; flex: 1 0 100%; color: var(--ink-2-aa); font: 11px/1.5 var(--font-ui); }
.map-direction strong { color: var(--ink-1); font-weight: 600; }
#plan .graph-minimap { width: 112px; height: 36px; flex-basis: 112px; border: 1px solid var(--line-0); border-radius: 5px; background: var(--bg-1); box-shadow: none; }
#plan .canvas-body, #plan #treeContainer { min-height: 360px; height: var(--map-height, 480px); }
#plan #treeContainer { border-top: 1px solid var(--line-0); background: radial-gradient(circle, var(--map-dot) .7px, transparent .9px) 0 0 / 20px 20px, var(--map-canvas); }
#plan .node { outline: none; --operation: var(--op-neutral); --operation-line: var(--op-neutral-line); }
#plan .stage-source { --operation: var(--op-read); --operation-line: var(--op-read-line); }
#plan .stage-join, #plan .stage-union { --operation: var(--op-join); --operation-line: var(--op-join-line); }
#plan .stage-aggregate, #plan .stage-filter { --operation: var(--op-aggregate); --operation-line: var(--op-aggregate-line); }
#plan .stage-window, #plan .stage-sort, #plan .stage-distinct { --operation: var(--op-window); --operation-line: var(--op-window-line); }
#plan .node text { font-family: var(--font-ui); }
#plan .node .stage-surface { fill: var(--map-card) !important; stroke: var(--operation-line) !important; stroke-width: 1.25px; stroke-dasharray: none; filter: drop-shadow(0 3px 3px var(--shadow-soft-color)) !important; }
#plan .node:hover .stage-surface { stroke: var(--operation) !important; stroke-width: 2px; }
#plan .node.selected .stage-surface, #plan .node:focus-visible .stage-surface { stroke: var(--operation) !important; stroke-width: 2.5px !important; filter: drop-shadow(0 3px 5px var(--accent-glow)) !important; }
#plan .node.highlighted .stage-surface, #plan .node.search-match .stage-surface { stroke: var(--crit) !important; }
#plan .node .node-name { font-size: 17px; font-weight: 500; fill: var(--ink-0); }
#plan .node.stage-source .node-name { font-weight: 600; }
#plan .node text.node-kind { font-size: 10px; letter-spacing: .12em; fill: var(--operation) !important; }
#plan .node .node-count { font-size: 12px; font-weight: 400; fill: var(--ink-1); }
#plan .node .stage-findings { font-size: 12px; font-weight: 600; text-anchor: end; fill: var(--crit); }
.stage-symbol { fill: var(--operation); stroke: none; pointer-events: none; }
.stage-glyph { fill: none; stroke: var(--map-card); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.operation-mark { fill: var(--operation); stroke: var(--operation); stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
#plan .node:not(.stage-source) .node-kind { display: none; }
#plan .node:not(.stage-source) .node-name,
#plan .node:not(.stage-source) .node-count,
#plan .node:not(.stage-source) .stage-findings { text-anchor: middle; }
#plan .node .node-evidence { font-size: 12px; fill: var(--ink-1); text-anchor: start; }
#plan .node .node-cue { font-size: 12px; fill: var(--crit); text-anchor: start; pointer-events: auto; cursor: pointer; }
#plan .node .node-cue:hover, #plan .node .node-cue:focus-visible { text-decoration: underline; }
#plan .node.details-card .node-name,
#plan .node.details-card .node-count { text-anchor: start; }
#plan .node.details-card .node-kind { display: none; }
#plan .node.details-card .stage-surface { filter: none !important; }
.map-link { fill: none; stroke: var(--map-link); stroke-width: 1.8; }
.map-link.measured-link { stroke: var(--map-link-measured); }
#analyzeStatus { margin: 0; padding: 10px 16px; max-width: 100%; overflow-wrap: anywhere; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 16px; border-top: 1px solid var(--line-0); color: var(--ink-1); font: 11px/1.4 var(--font-ui); background: var(--bg-1); }
body[data-page="loading"] #plan .tab-bar,
body[data-page="loading"] #plan .graph-actions,
body[data-page="loading"] #plan .map-legend { display: none; }
.map-legend > span:not(.legend-note)::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 2px; background: var(--legend-color); }
.legend-source { --legend-color: var(--op-read); }
.legend-join { --legend-color: var(--op-join); }
.legend-aggregate { --legend-color: var(--op-aggregate); }
.legend-window { --legend-color: var(--op-window); }
.legend-note { margin-left: auto; color: var(--ink-2-aa); }
#plan .path-tracing .node:not(.on-path),
#plan .path-tracing .map-link:not(.on-path) { opacity: .23; }
#plan .path-tracing .map-link.on-path { stroke: var(--heat-5); stroke-width: 2.5; }
#plan #traceSummary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; color: var(--ink-1); background: var(--bg-1); font-size: 12px; border-bottom: 1px solid var(--line-0); }
#plan #traceSummary[hidden] { display: none; }
#plan .story-trace { font: inherit; letter-spacing: inherit; text-align: left; color: inherit; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .16em; text-decoration-thickness: 1px; }
#plan .story-trace:hover { text-decoration-color: var(--heat-5); }
#plan .story-trace:focus-visible { outline: 2px solid var(--heat-5); outline-offset: 6px; }
#plan .bottleneck-current { stroke: var(--crit); stroke-dasharray: none; animation: none; }
#plan .bottleneck-only .links { opacity: .2; }
#plan .stage-step rect { fill: var(--map-step) !important; stroke: none !important; filter: none !important; }
#plan .stage-step text { font-size: 12px; fill: var(--ink-0); }
#plan .stage-step:hover rect, #plan .stage-step:focus-visible rect, #plan .stage-step.selected-step rect { fill: var(--map-step-active) !important; }
#plan .stage-step.highlighted-step text { fill: var(--crit); font-weight: 600; }
#plan .inspector-rail { max-height: 680px; }
#plan .inspector-title { font: 500 23px/1.2 var(--font-ui); letter-spacing: -.025em; }
#plan .inspector-kind i { box-shadow: none; }
@media (max-width: 760px) {
  #plan { padding-top: 28px; }
  #plan > .wrap { width: calc(100% - 24px); }
  .map-intro { margin-bottom: 18px; }
  .map-intro h2 { max-width: 15ch; }
  .map-intro p { font-size: 12px; }
  #plan .tab-bar, #plan .graph-actions { padding: 10px; }
  #plan .graph-actions { gap: 6px; }
  #plan .tool-button { min-height: 44px; }
  .map-legend { gap: 8px 14px; padding: 10px; }
  .legend-note { margin-left: 0; flex-basis: 100%; }
  #plan .graph-minimap { width: 96px; flex-basis: 96px; }
  .map-direction { gap: 2px; }
  .map-direction > span { flex-basis: 100%; }
  #plan .canvas-body, #plan #treeContainer { min-height: 420px; height: 420px; }
  #plan .inspector-rail { max-height: none; }
}