/* The diagrams, built only from tokens.css. */

.flow { position: relative; width: 100%; height: 100%; min-height: 240px; background: var(--surface); overflow: hidden; }
.flow:fullscreen { background: var(--bg); }
[hidden] { display: none !important; }
.flow-canvas { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.flow-canvas:active { cursor: grabbing; }
.flow-svg { display: block; user-select: none; }

.flow-toolbar {
  position: absolute; z-index: 3; top: var(--space-2); right: var(--space-2);
  display: flex; align-items: center; gap: var(--space-1);
}
.flow-zoom { min-width: 48px; text-align: center; font-size: var(--text-xs); background: var(--surface); padding: 2px 0; }

.flow-legend {
  position: absolute; z-index: 3; top: var(--space-2); left: var(--space-2); max-width: 180px;
  border: 1px solid var(--border); background: var(--surface); font-size: var(--text-xs);
}
.flow-legend summary { padding: var(--space-1) var(--space-2); font-weight: 600; cursor: pointer; }
.flow-legend-body { display: grid; justify-items: start; gap: var(--space-1); padding: 0 var(--space-2) var(--space-2); }
.flow-legend .item { font-size: var(--text-xs); padding: 1px var(--space-2); }
.flow-legend-note { font-size: var(--text-xs); }

.flow-minimap {
  position: absolute; z-index: 3; right: var(--space-2); bottom: var(--space-2);
  width: 180px; height: 120px; border: 1px solid var(--border-strong); background: var(--surface);
}
.flow-minimap svg { display: block; width: 100%; height: 100%; cursor: pointer; }
.mini-node { fill: var(--node-line); }
.mini-subnode { fill: var(--subnode-line); }
.mini-interface { fill: var(--interface-line); }
.mini-external { fill: var(--external-line); }
.mini-view { fill: var(--accent); fill-opacity: 0.12; stroke: var(--accent); }

.flow-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.25; }
.flow-edge-part { stroke-width: 1; }
.flow-arrow-head { fill: var(--border-strong); }

.shape { cursor: pointer; outline: none; }
.shape-body { stroke-width: 1.5; }
.shape:hover .shape-body { stroke-width: 2.5; }
.shape:focus-visible .shape-body { stroke: var(--accent); stroke-width: 3; }
.shape-name { font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.shape-version { font-family: var(--font-mono); font-size: 12px; white-space: pre; }

.shape-node .shape-body { fill: var(--node-fill); stroke: var(--node-line); stroke-width: 2; }
.shape-node text { fill: var(--node-text); }
.shape-subnode .shape-body { fill: var(--subnode-fill); stroke: var(--subnode-line); stroke-width: 1; }
.shape-subnode text { fill: var(--subnode-text); }
.shape-interface .shape-body { fill: var(--interface-fill); stroke: var(--interface-line); }
.shape-interface text { fill: var(--interface-text); }
.shape-external .shape-body { fill: var(--external-fill); stroke: var(--external-line); stroke-dasharray: 5 3; }
.shape-external text { fill: var(--external-text); }

.pan-tag-text { font-family: var(--font-body); font-size: 10px; font-weight: 600; }
.pan-tag-step { fill: none; stroke-width: 0.75; }
.pan-tag-clear .pan-tag-bg { fill: var(--pan-clear-bg); }
.pan-tag-clear .pan-tag-text, .pan-tag-clear .on { fill: var(--pan-clear-fg); }
.pan-tag-clear .pan-tag-step { stroke: var(--pan-clear-fg); }
.pan-tag-masked .pan-tag-bg { fill: var(--pan-masked-bg); }
.pan-tag-masked .pan-tag-text, .pan-tag-masked .on { fill: var(--pan-masked-fg); }
.pan-tag-masked .pan-tag-step { stroke: var(--pan-masked-fg); }
.pan-tag-truncated .pan-tag-bg { fill: var(--pan-truncated-bg); }
.pan-tag-truncated .pan-tag-text, .pan-tag-truncated .on { fill: var(--pan-truncated-fg); }
.pan-tag-truncated .pan-tag-step { stroke: var(--pan-truncated-fg); }
.pan-tag-hashed .pan-tag-bg { fill: var(--pan-hashed-bg); }
.pan-tag-hashed .pan-tag-text, .pan-tag-hashed .on { fill: var(--pan-hashed-fg); }
.pan-tag-hashed .pan-tag-step { stroke: var(--pan-hashed-fg); }
.pan-tag-encrypted .pan-tag-bg { fill: var(--pan-encrypted-bg); }
.pan-tag-encrypted .pan-tag-text, .pan-tag-encrypted .on { fill: var(--pan-encrypted-fg); }
.pan-tag-encrypted .pan-tag-step { stroke: var(--pan-encrypted-fg); }

/* The focused item: a heavier accent line and bold name, so colour is not all. */
.shape-focused .shape-body { stroke: var(--accent); stroke-width: 3; }
.shape-focused .shape-name { font-weight: 700; }

.focus-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-soft); border-left: 3px solid var(--accent); font-size: var(--text-sm);
}
.focus-prompt { display: grid; gap: var(--space-3); max-width: 60ch; padding: var(--space-6) var(--space-4); }
.focus-prompt h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.focus-prompt p { margin: 0; color: var(--text-muted); }
.focus-prompt .row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.focus-prompt .input { width: 280px; max-width: 100%; }