/* flow — the pipeline of slide 05, one stage per row.
   A vertical rail rather than the horizontal node strip next door: seven
   stages will not fit across a 16:9 stage without shrinking the type to the
   point nobody reads it, and reading order top-to-bottom is what carries the
   sense of a listing falling through the machine. */
[data-slide="flow"] .flow { position: relative; }

/* the rail itself, drawn once behind every row */
[data-slide="flow"] .flow::before { content: ''; position: absolute; left: 3px; top: 1.1rem; bottom: 1.1rem;
                                    width: 1px; background: linear-gradient(var(--border), var(--accent)); }

[data-slide="flow"] .flow-row { position: relative; display: grid; grid-template-columns: 1.8rem 22px 1fr auto;
                                align-items: center; gap: 0 0.75rem; padding: 0.62rem 0 0.62rem 1.5rem;
                                border-top: 1px solid var(--border); }
[data-slide="flow"] .flow-row .icon { width: 22px; height: 22px; }
[data-slide="flow"] .flow-row:last-of-type { border-bottom: 1px solid var(--border); }
/* the node on the rail */
[data-slide="flow"] .flow-row::before { content: ''; position: absolute; left: 0; top: 50%;
                                        width: 7px; height: 7px; border-radius: 50%;
                                        background: var(--bg); border: 1px solid var(--accent);
                                        transform: translateY(-50%); }

[data-slide="flow"] .flow-n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
[data-slide="flow"] .flow-body { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
[data-slide="flow"] .flow-body strong { font-size: 0.95rem; font-weight: 500; }
[data-slide="flow"] .flow-body p { margin: 0; max-width: none; font-size: 0.84rem; color: var(--fg-muted); }

[data-slide="flow"] .flow-chip { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fg-muted);
                                 border: 1px solid var(--border); padding: 0.22rem 0.5rem; white-space: nowrap; }
/* the delivery surfaces, as marks rather than words: the row is about where a
   listing arrives, and four names would outweigh the stage it belongs to. */
[data-slide="flow"] .flow-chip.channels { display: flex; align-items: center; gap: 0.45rem; }
[data-slide="flow"] .flow-chip.channels .icon { width: 15px; height: 15px; color: inherit; }
[data-slide="flow"] .flow-chip.channels .mono { font-size: 0.62rem; letter-spacing: 0.04em; }

[data-slide="flow"] .source-note { margin-top: 0.8rem; }

@media (max-width: 760px) {
  [data-slide="flow"] .flow-row { grid-template-columns: 1.8rem 22px 1fr; row-gap: 0.35rem; }
  [data-slide="flow"] .flow-chip { grid-column: 3; justify-self: start; }
}