/* Flow system section: three connected Kanban boards seen from three Flight Levels. Needs site.css. */
.flowsys { padding: clamp(64px, 10vh, 112px) clamp(16px, 4vw, 48px); border-top: 1px solid var(--line); }
.fs-wrap { max-width: 1120px; margin: 0 auto; overflow-x: auto; }
.fs-svg { width: 100%; min-width: 900px; height: auto; display: block; }
.fs-card { fill: var(--card); stroke: var(--line); stroke-width: 1.2; }
.fs-upzone { fill: var(--gov); opacity: .055; }
.fs-fl { font: 600 10.5px var(--mono); letter-spacing: .12em; fill: #0a0f1c; opacity: .7; }
.fs-lbl { font: 600 14.5px var(--display); fill: #0a0f1c; }
.fs-sublbl { font: 500 11.5px var(--sans); fill: #0a0f1c; opacity: .8; }
.fs-head { font: 500 10px var(--mono); letter-spacing: .08em; fill: var(--muted); }
.fs-count { fill: var(--ink); font-weight: 600; }
.fs-count.full { fill: var(--wip); }
.fs-beacon { fill: var(--line); }
.fs-beacon.on { fill: var(--wip); }
@media (prefers-reduced-motion: no-preference) { .fs-beacon.on { animation: fsbeacon 1.1s ease-in-out infinite; } }
@keyframes fsbeacon { 50% { opacity: .2; } }
.fs-colline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.fs-commit { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 6 5; stroke-opacity: .45; }
.fs-top { font: 500 11px var(--mono); letter-spacing: .14em; }
.fs-top-up { fill: var(--pg3i); }
.fs-top-down { fill: var(--pg1i); }
.fs-conn { fill: none; stroke-width: 1.4; stroke-dasharray: 5 6; stroke-opacity: .75; }
@media (prefers-reduced-motion: no-preference) { .fs-conn { animation: fsmarch 1.1s linear infinite; } }
@keyframes fsmarch { to { stroke-dashoffset: -11; } }
.fs-cbadge circle { fill: var(--card); stroke: var(--line); stroke-width: 1.2; }
.fs-gate { cursor: help; }
.fs-gate rect { fill: var(--card); stroke: var(--muted); stroke-width: 1.4; transition: fill .3s, stroke .3s; }
.fs-gatetxt { font: 700 7.5px var(--mono); fill: var(--muted); pointer-events: none; }
.fs-gate.flash rect { fill: var(--pg4); stroke: var(--pg4i); }
.fs-gate.flash .fs-gatetxt { fill: #0a0f1c; }
.fs-axis { stroke: var(--line); stroke-width: 1.2; }
.fs-bar { fill: var(--pg4); stroke: var(--pg4i); stroke-width: 1; }
.fs-item { cursor: pointer; }
.fs-box { fill: transparent; stroke: var(--c); stroke-width: 1.6; transition: fill .35s, stroke .35s; }
.fs-item.down .fs-box { fill: var(--cf); }
.fs-item.hold .fs-box { fill: var(--ct); }
.fs-item.done .fs-box { fill: var(--pg4); stroke: var(--pg4i); }
.fs-item.blocked .fs-box { fill: var(--wip); stroke: var(--wip); }
.fs-fill { fill: var(--cf); }
.fs-cut { fill: none; stroke: var(--c); stroke-width: 1.1; stroke-dasharray: 2 2; }
.fs-item.hold .fs-cut, .fs-item.down .fs-cut, .fs-item.done .fs-cut { stroke: #0a0f1c; stroke-opacity: .45; }
.fs-alert { fill: var(--wip); stroke: var(--card); stroke-width: 1.5; }
.fs-x { stroke: var(--wip); stroke-width: 2.2; stroke-linecap: round; }
.fs-esc { fill: none; stroke: var(--wip); stroke-width: 1.6; stroke-dasharray: 4 4; }
.fs-fam { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-opacity: .6; stroke-dasharray: 2 3; }
.fs-svg.paused .fs-conn, .fs-svg.paused .fs-beacon.on { animation-play-state: paused; }
.fs-tip, .fs-pause { pointer-events: none; }
.fs-tipbox { fill: var(--card); stroke: var(--line); stroke-width: 1.2; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.fs-tip1 { font: 600 12px var(--sans); fill: var(--ink); }
.fs-tip2 { font: 500 11.5px var(--sans); fill: var(--ink); opacity: .85; }
.fs-tip3 { font: 500 10.5px var(--mono); fill: var(--muted); }
.fs-pause rect { fill: var(--card); stroke: var(--wip); stroke-width: 1.2; }
.fs-pause text { font: 600 10px var(--mono); letter-spacing: .12em; fill: var(--wip); }
.fs-hud { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; font: 400 12px var(--mono); color: var(--muted); margin: 16px 0 6px; }
.fs-hud b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.6ch; }
.fs-legend { display: flex; justify-content: center; gap: 10px 22px; flex-wrap: wrap; align-items: center; font: 400 12px var(--mono); color: var(--muted); margin: 10px auto 0; max-width: 1000px; }
.fs-legend svg { vertical-align: -3px; margin-right: 8px; }