/* Flow diagram: inline SVG nodes and edges, animated packets, click a node for its explanation and log lines. See js/flow.js. */
.flow { display: grid; gap: var(--sp-2); min-width: 0; }
.flow-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.flow-ctl { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.flow-stage { background: var(--surface-2); border: var(--bd); border-radius: var(--r-3); padding: var(--sp-2); overflow: hidden; }
.flow-svg { display: block; width: 100%; height: auto; color: var(--ink-2); }
.flow-svg-v { display: none; max-width: 340px; margin-inline: auto; }
@media (max-width: 760px) { .flow-svg-h { display: none; } .flow-svg-v { display: block; } }
.flow-edge { fill: none; stroke: var(--line-strong); stroke-width: 2; transition: stroke var(--d-base) var(--ease); }
.flow-edge.is-hot { stroke: var(--accent-ink); stroke-width: 2.5; }
.flow-node { cursor: pointer; outline: none; }
.flow-box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: fill var(--d-base) var(--ease), stroke var(--d-base) var(--ease); }
.flow-ic { color: var(--accent-ink); }
.flow-label { font: 700 15.5px var(--font-head); fill: var(--ink); letter-spacing: -0.01em; }
.flow-sub { font: 400 12.5px var(--font-body); fill: var(--ink-2); }
.flow-node:hover .flow-box { stroke: var(--accent-ink); }
.flow-node:focus-visible .flow-box { stroke: var(--accent-ink); stroke-width: 3.5; }
.flow-node.is-reached .flow-box { stroke: var(--accent-ink); }
.flow-node.is-active .flow-box { fill: var(--navy); stroke: var(--navy); }
.flow-node.is-active .flow-label { fill: #fff; }
.flow-node.is-active .flow-sub { fill: #c9d4e0; }
.flow-node.is-active .flow-ic { color: var(--accent); }
.flow-packet { fill: var(--accent); stroke: #fff; stroke-width: 2; opacity: 0; }
.flow-packet.is-on { opacity: 1; }
.flow-below { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-3); align-items: start; }
@media (max-width: 860px) { .flow-below { grid-template-columns: minmax(0, 1fr); } }
.flow-detail { padding: var(--sp-1) 0; }
.flow-k { margin: 0 0 4px; color: var(--accent-ink); font: var(--w-strong) var(--fs--1) var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.flow-explain { margin: 0; font: var(--w-head) var(--fs-1)/1.35 var(--font-head); color: var(--ink); letter-spacing: -0.01em; min-height: 3.9em; }
.flow-hint { margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: 0.9rem; }
.flow-fallback { margin: 0; padding-left: 1.2em; color: var(--ink-2); }
html.am-js .flow-fallback { display: none; }
html:not(.am-js) .flow-head, html:not(.am-js) .flow-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .flow-packet { display: none; } }