/* Interactive call-flow explorer */
.call-flow-panel{outline:none}.call-flow-panel:focus-visible{box-shadow:0 0 0 2px var(--cyan)}.panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:10px}.panel-title-row .panel-title{margin-bottom:4px}.panel-title-row p{color:var(--muted);font-size:10px;line-height:1.55}.flow-keyboard{flex:none;color:#64748b;font-size:8px;border:1px solid var(--line);border-radius:5px;padding:5px 7px}.flow-console{border-top:1px solid var(--line);margin-top:15px;padding-top:15px}.flow-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center}.flow-tabs,.flow-actions{display:flex;gap:7px;flex-wrap:wrap}.flow-tab,.flow-actions button{font:600 9px 'JetBrains Mono',monospace;color:var(--muted);background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;cursor:pointer}.flow-tab{display:flex;align-items:center;gap:7px}.flow-tab i{width:7px;height:7px;border-radius:50%;background:var(--flow-color)}.flow-tab:hover,.flow-actions button:hover{color:var(--ink);border-color:var(--cyan)}.flow-tab.active{color:var(--ink);border-color:var(--flow-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--flow-color) 30%,transparent)}.flow-status{display:grid;grid-template-columns:90px minmax(130px,220px) 1fr;gap:14px;align-items:start;margin:13px 0;padding:13px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px}.flow-status>span{color:var(--cyan);font-size:9px;font-weight:700}.flow-status>strong{font-size:10px;color:var(--ink)}.flow-status>p{color:var(--body);font-size:10px;line-height:1.55}.flow-static-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;list-style:none;padding:0}.flow-static-list li{position:relative;display:grid;gap:6px;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);cursor:pointer;opacity:.64;transition:opacity .2s,border-color .2s,transform .2s}.flow-static-list li:hover{opacity:1;transform:translateY(-1px)}.flow-static-list li.active{opacity:1;border-color:var(--cyan);box-shadow:0 0 18px rgba(34,211,238,.09)}.flow-static-list li.complete{opacity:.82;border-color:color-mix(in srgb,var(--green) 60%,var(--line))}.flow-static-list b{font-size:9px;color:var(--ink)}.flow-static-list span{font-size:8.5px;line-height:1.5;color:var(--muted)}.call-flow-overlay{pointer-events:none}.flow-route{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.62;filter:drop-shadow(0 0 2px currentColor)}.flow-badge{stroke:#020617;stroke-width:3}.flow-badge.current{filter:drop-shadow(0 0 7px currentColor)}.flow-badge-number{fill:#020617;font:800 8px 'JetBrains Mono',monospace}.flow-packet{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 8px currentColor)}.arch-node{transition:opacity .2s,filter .2s}.arch-node.flow-upcoming .node-surface{opacity:.62}.arch-node.flow-complete .node-surface{opacity:.78}.arch-node.flow-active{filter:drop-shadow(0 0 12px rgba(34,211,238,.85))}.arch-node.flow-active .node-surface{stroke-width:3}.arch-node text{opacity:1!important}
@media(max-width:760px){.panel-title-row,.flow-toolbar{display:block}.flow-keyboard{display:none}.flow-actions{margin-top:9px}.flow-status{grid-template-columns:1fr;gap:5px}.flow-static-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}.flow-static-list li{flex:0 0 235px;scroll-snap-align:start}.flow-tab,.flow-actions button{min-height:38px}.flow-route{stroke-width:4}}
@media(prefers-reduced-motion:reduce){.flow-packet{display:none}.arch-node,.flow-static-list li{transition:none}.flow-route{filter:none}}