/* Flow diagrams (web/diagrams.js). Every colour is a Nexus Data Viz token, so the diagrams follow
   [data-theme="dark"] / prefers-color-scheme without re-rendering. Fonts fall back to the IBM Plex
   stack when the app's --sans / --mono are not defined (e.g. the standalone preview). */
.dg {
  --dg-sans: var(--sans, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --dg-mono: var(--mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  --dg-accent: var(--viz-brand-blue);
  --dg-tint: color-mix(in srgb, var(--viz-brand-blue) 8%, transparent);
  display: block; width: 100%; height: auto;
}
/* Wrap a diagram in .dg-scroll so it scrolls sideways on a phone instead of shrinking below legibility. */
.dg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.dg-scroll > .dg { min-width: 720px; }

.dg .dg-bg, .dg .dg-mask, .dg .dg-lmask { fill: var(--viz-paper); }
.dg .dg-box { fill: var(--viz-raised); stroke: var(--viz-ink); stroke-width: 1; }
.dg .dg-box.dg-focal { fill: var(--dg-tint); stroke: var(--dg-accent); stroke-width: 1.2; }
.dg .dg-box.dg-ext { fill: color-mix(in srgb, var(--viz-ink) 3%, transparent); stroke: color-mix(in srgb, var(--viz-ink) 40%, transparent); stroke-dasharray: 4 3; }
.dg .dg-box.dg-state { fill: color-mix(in srgb, var(--viz-ink) 6%, var(--viz-raised)); stroke: var(--viz-grey); }
.dg .dg-box.dg-term { fill: var(--viz-raised); stroke: var(--viz-grey); }
.dg .dg-box.dg-ghost { fill: none; stroke: var(--viz-rule); stroke-dasharray: 2 3; }
.dg .dg-box.dg-regionkey { fill: none; stroke: var(--viz-rule); stroke-dasharray: 4 4; }
.dg .dg-tag { fill: none; stroke: var(--viz-rule); stroke-width: 0.8; }
.dg .dg-region { fill: none; stroke: var(--viz-rule); stroke-width: 1; stroke-dasharray: 4 4; }
.dg .dg-band { fill: color-mix(in srgb, var(--viz-ink) 5%, transparent); }
.dg .dg-life { stroke: var(--viz-rule); stroke-width: 1; stroke-dasharray: 3 3; }
.dg .dg-hair { stroke: var(--viz-rule); stroke-width: 0.8; }

.dg .dg-ln { fill: none; stroke: var(--viz-grey); stroke-width: 1.2; }
.dg .dg-ln.dg-msg { stroke-dasharray: 2 3; }
.dg .dg-ln.dg-acc { stroke: var(--dg-accent); }
.dg .dg-ln.dg-lag { stroke: var(--dg-accent); stroke-dasharray: 5 4; }
.dg .dg-ln.dg-off { stroke: var(--viz-faint); stroke-dasharray: 1 3; }
.dg .dg-mk { fill: var(--viz-grey); }
.dg .dg-mk.dg-acc { fill: var(--dg-accent); }
.dg .dg-mk.dg-off { fill: var(--viz-faint); }
.dg .dg-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; }

.dg text { font-family: var(--dg-sans); }
.dg .dg-name { font: 600 12px var(--dg-sans); fill: var(--viz-ink); }
.dg .dg-sub { font: 400 9px var(--dg-mono); fill: var(--viz-grey); }
.dg .dg-eb { font: 500 8px var(--dg-mono); letter-spacing: 0.14em; fill: var(--viz-grey); }
.dg .dg-al { font: 400 8px var(--dg-mono); letter-spacing: 0.06em; fill: var(--viz-ink); }
.dg .dg-quiet { fill: var(--viz-grey); }
.dg .dg-cap { font: italic 400 12px var(--dg-sans); fill: var(--viz-grey); }
.dg .dg-acc { fill: var(--dg-accent); }
.dg .dg-ln.dg-acc, .dg .dg-ln.dg-lag { fill: none; }
.dg .dg-lnk { text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.dg .dg-lnk:hover, .dg .dg-lnk:focus-visible { fill: var(--dg-accent); }

/* Interaction: hover and keyboard focus draw the same accent ring. */
.dg [data-action] { cursor: pointer; }
.dg [data-action]:focus { outline: none; }
.dg .dg-act[data-action]:hover .dg-sub, .dg .dg-act[data-action]:focus-visible .dg-sub { fill: var(--dg-accent); text-decoration: underline; }
.dg .dg-node[data-action]:hover .dg-box, .dg .dg-node[data-action]:focus-visible .dg-box { stroke: var(--dg-accent); stroke-width: 2; }
.dg .dg-edge[data-action]:hover .dg-ln, .dg .dg-edge[data-action]:focus-visible .dg-ln { stroke-width: 2; }
.dg .dg-elabel[data-action]:hover .dg-lmask, .dg .dg-elabel[data-action]:focus-visible .dg-lmask { stroke: var(--dg-accent); stroke-width: 1; }
.dg .dg-elabel[data-action]:focus-visible .dg-lmask { stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) { .dg .dg-box, .dg .dg-ln { transition: stroke-width 120ms ease; } }