/* Page-specific motion illustration; typography and fills use the existing TYCT tokens. */
.flow-map{overflow:visible}
.flow-channels{fill:none;stroke:var(--brand-light);stroke-width:1.25;opacity:.45}
.flow-channel-highlights{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-dasharray:.2 .8;opacity:0}
.flow-source-card{fill:var(--white);stroke:var(--line);stroke-width:1}
.flow-source-name{fill:var(--ink);font-family:Inter,Arial,sans-serif;font-weight:500;letter-spacing:-.02em}
.flow-source-detail,.flow-source-code{fill:var(--gray-500);font-family:Inter,Arial,sans-serif;font-size:10px}
.flow-source-code{text-anchor:end;font-size:9px;letter-spacing:.05em}
.flow-source-dot{fill:var(--brand)}
.flow-packet-glow{fill:var(--tint);opacity:.85}
.flow-document{fill:var(--white);stroke:var(--brand);stroke-width:1.5}
.flow-document-lines{fill:none;stroke:var(--brand-light);stroke-width:1.2;stroke-linecap:round}
.flow-core-aura{fill:var(--tint);opacity:.8}
.flow-core-disc{fill:var(--white);stroke:var(--line);stroke-width:1}
.flow-score-track{fill:none;stroke:var(--tint);stroke-width:3}
.flow-score-progress{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round}
.flow-core-caption,.flow-score-title,.flow-score-scale{fill:var(--gray-500);font-family:Inter,Arial,sans-serif;text-anchor:middle;font-size:9px;letter-spacing:.1em}
.flow-score-title{font-size:9px;letter-spacing:.08em}
.flow-score-number{fill:var(--brand);font-family:Inter,Arial,sans-serif;font-weight:500;font-size:58px;letter-spacing:-.06em;text-anchor:middle;font-variant-numeric:tabular-nums}
.flow-score-scale{font-size:11px;letter-spacing:0}
.flow-intake{opacity:0}
.flow-result{opacity:1}
.flow-phases{display:flex;justify-content:center;align-items:center;gap:var(--space-7);padding:0;list-style:none;margin:0 0 var(--space-5);font-size:13px;color:var(--gray-500)}
.flow-phases li{display:flex;align-items:center;gap:var(--space-2);transition:color var(--motion-content)}
.flow-phases li>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);font-size:9px;transition:background-color var(--motion-content),color var(--motion-content),border-color var(--motion-content)}
.flow-phases li.is-active{color:var(--plantation)}
.flow-phases li.is-active>span{color:var(--white);background:var(--brand);border-color:var(--brand)}
@media(max-width:600px){.flow-source-detail{font-size:9px}.flow-source-code{font-size:8px}.flow-phases{gap:var(--space-3);font-size:9px;justify-content:space-between;margin-top:var(--space-3)}.flow-phases li{gap:6px;line-height:1.5}.flow-phases li>span{width:20px;height:20px;flex-shrink:0;font-size:8px}.flow-score-number{font-size:52px}.flow-score-title{font-size:8px}.flow-core-caption{font-size:8px;letter-spacing:.06em}.flow-channel-highlights{stroke-width:1.5}}
@media(prefers-reduced-motion:reduce){.flow-phases li,.flow-phases li>span{transition:none}}
.flow-source-card{transition:stroke var(--motion-content),fill var(--motion-content)}
.flow-source.is-sending .flow-source-card{stroke:var(--brand-light);fill:var(--tint)}
@media(prefers-reduced-motion:reduce){.flow-source-card{transition:none}}

.flow-controls{display:flex;align-items:center;gap:var(--space-4)}
.flow-replay{border:0;background:none;color:var(--gray-500);padding:var(--space-2);font-size:10px;text-decoration:underline;text-underline-offset:3px}
.flow-replay:hover{color:var(--brand)}
@media(prefers-reduced-motion:reduce){.flow-replay{display:none}}

/* Larger labels keep the fixed-node illustration readable. */
.flow-source-detail{font-size:13px;fill:var(--gray-700)}
.flow-source-code{font-size:12px;fill:var(--gray-700)}
.flow-core-caption,.flow-score-title{font-size:12px;letter-spacing:0}
.flow-phases{font-size:var(--text-ui);flex-wrap:wrap}
.flow-phases li>span{font-size:var(--text-caption)}
.signal-network figcaption{font-size:var(--text-detail);color:var(--gray-700);line-height:1.5;text-align:center}
.signal-motion-toggle,.flow-replay{font-size:var(--text-detail);color:var(--gray-700)}
@media(max-width:600px){.flow-source-detail{font-size:12px}.flow-source-code{display:none}.flow-phases{font-size:var(--text-detail);gap:var(--space-3);justify-content:center}.flow-phases li>span{font-size:var(--text-caption)}}

/* SVG labels use viewBox units. Place them in the wide middle of the circle,
   with case-sensitive text metrics and room between label, value and scale. */
.flow-score-title{font-size:12px;font-weight:500;letter-spacing:0;fill:var(--gray-700)}
/* Label sizes per SVG variant (moved out of inline style attributes for the CSP). */
.signal-map .flow-source-name{font-size:18px}
.signal-map-mobile .flow-source-name{font-size:14px}