/* Flow map (web/js/flowmap.js): service nodes, flowing edges, per-item chips. Shared by pages. */
.fm-wrap { padding: 16px; overflow-x: auto; }
svg.fm { width: 100%; height: auto; display: block; font-family: var(--font-sans); }
.fm .fm-s-done { --fm-c: var(--approved-solid); }
.fm .fm-s-run { --fm-c: var(--chart-1); }
.fm .fm-s-bad { --fm-c: var(--critical-solid); }
.fm .fm-s-wait { --fm-c: var(--border-control); }
.fm-edge { stroke: var(--fm-c); stroke-width: 2.5; stroke-linecap: round; }
.fm-edge.fm-wait { stroke: var(--border-control); stroke-width: 2; stroke-dasharray: 4 6; }
.fm-dot { fill: var(--fm-c); }
.fm-box { fill: var(--surface-1); stroke: var(--border-default); }
.fm-halo { fill: none; stroke: var(--fm-c); stroke-width: 2; }
.fm-sdot { fill: var(--fm-c); }
.fm-ring { fill: none; stroke: var(--fm-c); stroke-width: 2; stroke-dasharray: 20 18; }
.fm-t { fill: var(--fg-1); font-size: 13px; font-weight: 600; }
.fm-sub { fill: var(--fg-3); font-size: 11px; }
.fm-cap { fill: var(--fg-3); font-size: 11px; }
.fm-chip rect { fill: color-mix(in srgb, var(--fm-c) 16%, transparent); stroke: var(--fm-c); stroke-opacity: .5; }
.fm-chip circle { fill: var(--fm-c); }
.fm-chip text { fill: var(--fg-1); font-size: 11px; }
.fm-chip[role="button"] { cursor: pointer; }
.fm-chip[role="button"]:hover rect { stroke-opacity: 1; }
.fm-chip[role="button"]:focus { outline: none; }
.fm-chip[role="button"]:focus-visible rect { stroke-opacity: 1; stroke-width: 2; }
.fm-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.fm-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fm-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.fm-legend .fm-s-done { background: var(--approved-solid); }
.fm-legend .fm-s-run { background: var(--chart-1); }
.fm-legend .fm-s-bad { background: var(--critical-solid); }
.fm-legend .fm-s-wait { background: var(--border-control); }

@keyframes fmFlow { to { stroke-dashoffset: -28; } }
@keyframes fmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fmSpin { to { transform: rotate(360deg); } }
.fm-flow { stroke-dasharray: 6 8; animation: fmFlow 1s linear infinite; }
.fm-pulse { animation: fmPulse 1.6s ease-in-out infinite; }
.fm-spin { transform-box: fill-box; transform-origin: center; animation: fmSpin 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .fm-flow, .fm-pulse, .fm-spin { animation: none; } }