/* =========================================================================
   FinLink flow language — shared across the three story variants.

   This is the "pushed envelope" setting: three lit color channels, glowing
   strokes, traveling pulses. It is deliberately louder than the page's
   quiet typographic base so we can dial it back from a known ceiling.

   Dial-back switches (change these, not the components):
     :root[data-flow="calm"]  drops glow, mutes channels toward the accent
     :root[data-flow="mono"]  collapses all three channels onto the accent
   ========================================================================= */

:root {
  /* Three channels, because the diagram has three directions of travel.
     in  = your money data arriving      (blue)
     out = memory leaving to an agent    (green)
     sch = routines running on a clock   (amber) */
  --fl-in:   #1D6FE0;
  --fl-out:  #0E9F6E;
  --fl-sch:  #E07A1D;
  --fl-node: var(--sc-accent);

  --fl-glow-in:  0 0 12px color-mix(in srgb, var(--fl-in) 55%, transparent);
  --fl-glow-out: 0 0 12px color-mix(in srgb, var(--fl-out) 55%, transparent);
  --fl-glow-sch: 0 0 12px color-mix(in srgb, var(--fl-sch) 55%, transparent);

  --fl-stroke: 1.6;
  --fl-track:  color-mix(in srgb, var(--sc-ink) 12%, transparent);
}

:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --fl-in:   #4DA3FF;
  --fl-out:  #34D399;
  --fl-sch:  #FBA94C;
  --fl-track: color-mix(in srgb, var(--sc-ink) 18%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fl-in: #4DA3FF; --fl-out: #34D399; --fl-sch: #FBA94C;
    --fl-track: color-mix(in srgb, var(--sc-ink) 18%, transparent);
  }
}

/* Dial-backs -------------------------------------------------------------- */
:root[data-flow="calm"] { --fl-glow-in: none; --fl-glow-out: none; --fl-glow-sch: none; }
:root[data-flow="mono"] {
  --fl-in: var(--sc-accent); --fl-out: var(--sc-accent); --fl-sch: var(--sc-accent);
  --fl-glow-in: none; --fl-glow-out: none; --fl-glow-sch: none;
}

/* =========================================================================
   1 · The schematic surface
   ========================================================================= */
.flow { position: relative; width: 100%; }
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Every stroked path carries pathLength="1" in the markup, so one token
   draws it regardless of its real geometry. --d is the draw progress 0..1.
   stroke-dashoffset is a paint property rather than transform/opacity: it is
   the one exception taken here, because it is the only way to draw a line
   along its own length without a JS-per-frame path walk. */
.flow path, .flow line, .flow polyline {
  fill: none;
  stroke-width: var(--fl-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  pathLength: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--d, 1));
}

.flow .ch-in    { stroke: var(--fl-in);   filter: drop-shadow(var(--fl-glow-in)); }
.flow .ch-out   { stroke: var(--fl-out);  filter: drop-shadow(var(--fl-glow-out)); }
.flow .ch-sch   { stroke: var(--fl-sch);  filter: drop-shadow(var(--fl-glow-sch)); }
.flow .ch-track { stroke: var(--fl-track); stroke-dasharray: 3 4; stroke-dashoffset: 0; }

:root[data-flow="calm"] .flow .ch-in,
:root[data-flow="calm"] .flow .ch-out,
:root[data-flow="calm"] .flow .ch-sch,
:root[data-flow="mono"] .flow [class^="ch-"] { filter: none; }

/* =========================================================================
   2 · Pulses — the thing that makes it read as flow rather than plumbing
   Each pulse rides its own path with offset-path, which animates as a
   transform, so it stays inside the transform/opacity budget.
   ========================================================================= */
.flow .pulse {
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: fl-ride var(--dur, 2.6s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes fl-ride {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.flow .pulse--in  { fill: var(--fl-in);  filter: drop-shadow(var(--fl-glow-in)); }
.flow .pulse--out { fill: var(--fl-out); filter: drop-shadow(var(--fl-glow-out)); }
.flow .pulse--sch { fill: var(--fl-sch); filter: drop-shadow(var(--fl-glow-sch)); }

/* Pulses only ride once their line has actually been drawn. Set --lit to 1
   from the act's own --sc-p to switch a whole channel on. */
.flow .pulse { opacity: 0; }
.flow[style*="--lit"] .pulse, .flow.is-lit .pulse { opacity: 1; }

/* =========================================================================
   3 · Stage furniture — nodes, tiles, chips
   ========================================================================= */
.flow-stage { display: grid; gap: .45rem; }
.flow-stage__n {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; font-family: var(--sc-font-mono); font-size: .72rem;
  border: 1px solid currentColor;
}
.flow-stage--in  { color: var(--fl-in); }
.flow-stage--org { color: var(--fl-node); }
.flow-stage--out { color: var(--fl-out); }
.flow-stage--sch { color: var(--fl-sch); }
.flow-stage__t {
  font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase;
}

.flow-tile {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center;
  padding: .7rem .85rem; border-radius: 10px;
  background: var(--sc-surface); border: 1px solid var(--fl-rule);
  box-shadow: var(--fl-shadow);
}
.flow-tile__ico {
  width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint, var(--fl-in)) 14%, transparent);
  color: var(--tint, var(--fl-in));
}
.flow-tile__ico svg { width: 1.05rem; height: 1.05rem; stroke: currentColor;
                      stroke-width: 1.7; fill: none; }
.flow-tile__t { font-size: .9375rem; font-weight: 550; letter-spacing: -.01em; }
.flow-tile__s { font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); }

/* The FinLink node itself — the one object everything converges on. */
.flow-node {
  border-radius: 14px; background: var(--sc-surface);
  border: 1px solid color-mix(in srgb, var(--fl-node) 42%, var(--fl-rule));
  box-shadow: var(--fl-shadow), 0 0 0 4px color-mix(in srgb, var(--fl-node) 8%, transparent);
  padding: 1rem 1.05rem; display: grid; gap: .8rem;
}
.flow-node__hd { display: flex; align-items: center; gap: .5rem; }
.flow-node__hd b { font-family: var(--sc-font-display); font-size: 1.05rem; letter-spacing: -.02em; }

.flow-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .5rem; border-radius: 999px;
  font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .04em;
  border: 1px solid color-mix(in srgb, var(--tint, var(--sc-ink)) 30%, transparent);
  color: var(--tint, var(--sc-ink-soft));
  background: color-mix(in srgb, var(--tint, var(--sc-ink)) 8%, transparent);
}

/* A memory row: the raw string and what it resolved to, on one line. */
.flow-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .6rem;
  padding: .42rem 0; border-bottom: 1px solid var(--fl-rule);
  font-size: .8125rem; align-items: baseline;
}
.flow-row:last-child { border-bottom: 0; }
.flow-row__raw { font-family: var(--sc-font-mono); font-size: .75rem; color: var(--fl-raw); }

/* =========================================================================
   4 · Reduced motion — every loop stops, nothing disappears.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .flow .pulse { animation: none; offset-distance: 62%; opacity: 1; }
  .flow path, .flow line, .flow polyline { stroke-dashoffset: 0; }
}