/* GITS Flow section: a BPMN-style swimlane diagram on an always-dark canvas */
.flowwrap { margin-bottom: 8px; }
.flowbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.flowbar .meta { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.flowbar .meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fstat { color: #15803d; border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; font-size: 11px; }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.seg button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.seg button:hover { color: #171717; }
.seg button[aria-pressed="true"] { background: #171717; color: #fafafa; }
.seg button:focus-visible { outline: 2px solid #f59e0b; outline-offset: 1px; }

.flowbox { background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 16px; padding: 8px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); }
.flowscroll { overflow-x: auto; }
.flowbox svg { display: block; width: 100%; min-width: 760px; height: auto; }

.pool { fill: #0f0f0f; stroke: #333; stroke-width: 1.5; }
.lane { stroke: #2a2a2a; stroke-width: 1; }
.lanelbl { fill: #737373; font: 600 12px var(--sans); letter-spacing: .04em; }
.edge { fill: none; stroke: #525252; stroke-width: 1.6; }
.elbl { fill: #a3a3a3; font: 12px var(--sans); }
.ev, .gw { fill: #141414; stroke: #a3a3a3; stroke-width: 1.6; }
.ev.end { stroke-width: 3.2; }

.node { cursor: pointer; outline: none; }
.tk { fill: #171717; stroke: #525252; stroke-width: 1.6; transition: stroke .3s, fill .3s, stroke-width .15s; }
.tt { fill: #fafafa; font: 600 12px var(--sans); text-anchor: middle; transition: transform .35s; }
.chip { font: 600 9.5px var(--mono); text-anchor: middle; opacity: 0; transition: opacity .35s; }
.node:hover .tk, .node.sel .tk, .node:focus-visible .tk { stroke-width: 3; }
.flowwrap[data-view="draw"] .node:hover .tk,
.flowwrap[data-view="draw"] .node.sel .tk,
.flowwrap[data-view="draw"] .node:focus-visible .tk { stroke: #fafafa; }

.flowwrap[data-view="live"] .chip { opacity: 1; }
.flowwrap[data-view="live"] .tt { transform: translateY(-8px); }
.flowwrap[data-view="live"] .tone-ok .tk { stroke: #4ade80; fill: #0f2a18; }
.flowwrap[data-view="live"] .tone-ok .chip { fill: #4ade80; }
.flowwrap[data-view="live"] .tone-run .tk { stroke: #7dd3fc; fill: #0b2230; }
.flowwrap[data-view="live"] .tone-run .chip { fill: #7dd3fc; }
.flowwrap[data-view="live"] .tone-wait .tk { stroke: #f59e0b; fill: #2a1d05; animation: fl-pulse 1.8s infinite; }
.flowwrap[data-view="live"] .tone-wait .chip { fill: #f59e0b; }
.flowwrap[data-view="live"] .tone-bad .tk { stroke: #f87171; fill: #2d1010; }
.flowwrap[data-view="live"] .tone-bad .chip { fill: #f87171; }
@keyframes fl-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }

.flowinfo { margin-top: 12px; min-height: 52px; display: flex; align-items: center; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px; font-size: 14px; color: var(--muted); }
.flowinfo b { color: var(--fg); }
.flowinfo code, .fstep code { background: var(--soft); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--fg); }
.fcap { margin-top: 10px; font-size: 12px; color: var(--muted); }

.fsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.fstep { border-top: 2px solid var(--line); padding-top: 16px; transition: border-color .25s; }
.fstep:hover { border-top-color: var(--accent); }
.fstep .fn { font-family: var(--mono); font-size: 12px; color: #b45309; }
.fstep h3 { font-size: 18px; letter-spacing: -.01em; margin: 6px 0 8px; }
.fstep p { font-size: 14.5px; color: var(--muted); }

.fexp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 36px; font-size: 13px; color: var(--muted); }
.xp { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; background: var(--card); color: var(--fg); }

@media (max-width: 1100px) { .links { gap: 20px; } }
@media (max-width: 920px) { .fsteps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fsteps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .tk, .tt, .chip, .fstep { transition: none; }
  .flowwrap[data-view="live"] .tone-wait .tk { animation: none; }
}