/* Diagrams (diagram.js): show_diagram's nodes and arrows. Shapes are the
 * card's surface with a hairline, words in ink, arrows a quiet gray; the
 * node under the pointer, its arrows and neighbours stay, the rest step back. */

.ui-diagram-stage { overflow-x: auto; overscroll-behavior-x: contain; padding-block: var(--sv-space-1); }
.ui-diagram-svg { display: block; width: 100%; height: auto; margin-inline: auto; font-size: 13px; }
.ui-diagram-nodes rect, .ui-diagram-nodes polygon { fill: var(--sv-surface); stroke: var(--sv-hairline-strong); stroke-width: 1; }
.ui-diagram-nodes g[data-shape="round"] rect { fill: var(--sv-surface-sunken); }
.ui-diagram-nodes text { fill: var(--sv-ink); }
.ui-diagram-edges path { fill: none; stroke: var(--sv-ink-tertiary); stroke-width: 1.5; }
.ui-diagram-svg marker path { fill: var(--sv-ink-tertiary); }
.ui-diagram-tags rect { fill: var(--sv-surface-raised); }
.ui-diagram-tags text { fill: var(--sv-ink-secondary); font-size: 12px; }
.ui-diagram-svg > g > g { transition: opacity 120ms ease; }
.ui-diagram-svg.tracing > g > g:not(.on) { opacity: 0.25; }
.ui-diagram-svg.tracing .ui-diagram-edges g.on path { stroke: var(--sv-ink); }
.ui-diagram-svg.tracing .ui-diagram-nodes g.on rect, .ui-diagram-svg.tracing .ui-diagram-nodes g.on polygon { stroke: var(--sv-ink); }
.ui-diagram-nodes, .ui-diagram-edges { animation: ui-chart-in 320ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .ui-diagram-nodes, .ui-diagram-edges { animation: none; }
  .ui-diagram-svg > g > g { transition: none; }
}