/* Graph: flat nodes, sharp corners; type encoded by outline + label, state by a rail; DEPENDS_ON in ink. */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chip { font: var(--type-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); }
.chip.t-INTENT { border-width: 1px 1px 1px 4px; }
.chip.t-REQUIREMENT { border-style: double; border-width: 3px; padding: 0 5px; }
.chip.t-DECISION { border-width: 1px 4px 1px 1px; }
.chip.t-EXECUTION { border-style: dotted; }
.chip.t-VALIDATION { border-style: dashed; }
.chip.t-EVIDENCE { background: var(--status-ok-tint); }
.chip.dep { border: 0; padding-inline-start: 0; }
.chip.dep::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--rule-strong);
  vertical-align: middle; margin-inline-end: 6px; }
.chip.active { background: var(--signal); color: var(--on-signal); }

.graph-wrap { overflow: auto; border-top: var(--section-rule); padding: var(--space-4) 0; }
svg.graph { display: block; font-family: var(--font-ui); }
svg.graph .edge line { stroke: var(--rule); stroke-width: 1; }
svg.graph .edge.e-DEPENDS_ON line { stroke: var(--rule-strong); stroke-width: 1.8; }
svg.graph .node { cursor: pointer; }
svg.graph .node .box { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1; }
svg.graph .node .rail { fill: transparent; }
svg.graph .node:hover .box, svg.graph .node:focus .box { stroke-width: 2; }
svg.graph .node:focus { outline: none; }
svg.graph .node:focus-visible .box { stroke: var(--focus); stroke-width: 2.5; }
svg.graph .label { font: 650 10.5px/1 var(--font-mono); letter-spacing: 0.04em; fill: var(--ink-muted); }
svg.graph .title { font-size: 12px; fill: var(--ink); }
svg.graph .node.t-INTENT .rail { fill: var(--rule-strong); }
svg.graph .node.t-REQUIREMENT .box { stroke-width: 3; stroke: var(--rule-strong); paint-order: stroke; fill: var(--surface); }
svg.graph .node.t-REQUIREMENT .inner { fill: none; stroke: var(--surface); stroke-width: 1; }
svg.graph .node.t-DECISION .corner { fill: var(--rule-strong); }
svg.graph .node.t-EXECUTION .box { stroke-dasharray: 1.5 2.5; }
svg.graph .node.t-VALIDATION .box { stroke-dasharray: 5 3; }
svg.graph .node.t-EVIDENCE .box { fill: var(--status-ok-tint); }
svg.graph .node.s-ACTIVE .rail { fill: var(--signal); }
svg.graph .node.s-DONE .rail { fill: var(--status-ok); }
svg.graph .node.s-BLOCKED .rail, svg.graph .node.s-WAITING_HUMAN .rail { fill: var(--status-danger); }
svg.graph .node.s-VERIFYING .rail { fill: var(--status-warn); }
svg.graph .node[data-center='true'] .box { stroke-width: 2.5; }
svg.graph .node[data-center='true'] .label { fill: var(--ink); }
svg.graph .state { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.06em; fill: var(--ink-muted); text-anchor: end; }