/* Shared flow (assets/js/flow.mjs): lit-border cards joined by connectors that light and carry a pulse, on the shared diagram clock. Tokens from system.css. */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) clamp(2.5rem, 5vw, 4.5rem) minmax(0, 1fr) clamp(2.5rem, 5vw, 4.5rem) minmax(0, 1fr); align-items: stretch; }
.flow__node { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; height: 100%; padding: clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); color: var(--text); text-decoration: none; }
.flow__node h3 { margin: 0; }
.flow__node p { margin: 0; color: var(--text-dim); }
.flow__node .link-arrow { margin-top: auto; padding-top: .5rem; }
.flow__node.is-on { border-color: color-mix(in srgb, var(--brand-blue) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-blue) 25%, transparent), 0 14px 40px -22px rgba(1, 137, 253, .55); }
.flow__link { position: relative; align-self: center; height: 2px; border-radius: 2px; background: var(--border-hover); transition: background var(--dg-step-default, 400ms) var(--ease); }
.flow__link.is-on { background: linear-gradient(90deg, #FC6A02, #C02E62 55%, #0189FD); }
.flow__link::after { content: ''; position: absolute; right: -1px; top: 50%; width: .5rem; height: .5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); color: var(--border-hover); transition: color var(--dg-step-default, 400ms) var(--ease); }
.flow__link.is-on::after { color: #0189FD; }
.flow__pulse { position: absolute; left: 0; top: 50%; width: .6rem; height: .6rem; margin: -.3rem 0 0 -.3rem; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 2px rgba(1, 137, 253, .8); opacity: 0; transform: translate(0, 0); }
.flow__link.is-run .flow__pulse { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)); transition: transform var(--pulse-ms, 400ms) linear, opacity 120ms linear; }
@media (max-width: 63.99rem) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__link { justify-self: center; width: 2px; height: clamp(2rem, 6vw, 2.75rem); }
  .flow__link.is-on { background: linear-gradient(180deg, #FC6A02, #C02E62 55%, #0189FD); }
  .flow__link::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .flow__pulse { left: 50%; top: 0; }
}
@media (prefers-reduced-motion: reduce) { .flow__pulse { display: none; } }