/* Original flow components, scoped to the ingestion page palette. */
.ingestion-flow {
 --rule:#454239; --r-panel:6px; --sheet:#151513; --grid:#ffffff0b;
 --ink:#f7f5f0; --ink-faint:#a69c89; --ink-2:#d2ccc0; --ink-3:#b9b3a7;
 --paper-2:#201e18; --amber-ink:#d6b471; --font-mono:Consolas,monospace;
 --t-ui:14px; --t-meta:12px; --ease:cubic-bezier(.22,1,.36,1);
 min-width:0;
}
.ingestion-flow>h2 {font:500 18px/1.5 'Public Sans',sans-serif;margin:0 0 22px;}
.flow-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.flow-canvas {
  position: relative;
  border: 1px solid var(--rule); border-radius: var(--r-panel);
  background-color: var(--sheet);
  background-image: radial-gradient(var(--grid) 1px, transparent 1px);
  background-size: 19px 19px;
}

.flow-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-edge { fill: none; stroke: var(--rule); stroke-width: 1.4; transition: stroke 0.25s var(--ease); }
.flow-edge[data-on="1"] { stroke: var(--ink-faint); }
.flow-arrow { fill: var(--ink-faint); }
/* Le flux est une deuxième ligne posée sur la première : l'arête au repos ne
   bouge pas, et ce qui la parcourt est un segment unique, piloté en JavaScript,
   qui part du bloc précédent et s'arrête contre le suivant. */
.flow-dash {
  fill: none; stroke: var(--amber-ink); stroke-width: 2.1; stroke-linecap: round;
  opacity: 0; transition: opacity 0.18s linear;
}
.flow-dash[data-on="1"] { opacity: 1; }
/* Le nom d'une sortie, posé sur la poignée d'où elle part. */
.flow-elabel { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-anchor: middle; }

.flow-nodes { position: relative; margin: 0; padding: 0; list-style: none; }
.flow-node {
  position: absolute; width: 170px; padding: 10px 12px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-panel);
  background: var(--sheet);
  transition: border-color 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.flow-node[data-on="run"] { border-color: var(--ink); }
.flow-node[data-on="done"] { border-color: var(--ink-faint); }
.flow-node[data-kind="port"] { background: var(--paper-2); }

/* L'impulsion qui traverse le bloc : une barre fine, rognée à ses bords, qui
   va de gauche à droite. Contenue dans le composant, et sans halo — un
   dégradé lumineux global est exactement ce que §3 du brief refuse. */
.flow-scan { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.flow-scan i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--amber-ink);
  opacity: 0; transition: opacity 0.14s linear;
}
.flow-node[data-on="run"] .flow-scan i { opacity: 0.9; }

/* L'horloge de la séquence : présente pour être animée, jamais vue. */
.flow-clock { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Une entrée n'est pas une étape : pas de carte, juste une icône et son nom,
   et trois d'entre elles convergent sur la première étape. */
.flow-node[data-kind="input"] {
  width: auto; padding: 4px 6px;
  border: 0; background: none;
  text-align: center;
}
.flow-icon { display: block; width: 19px; height: 19px; margin: 0 auto 5px; fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-linejoin: round; }
.flow-node[data-kind="input"] b { color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.flow-node[data-on="run"] .flow-icon { stroke: var(--amber-ink); }
.flow-node[data-kind="input"][data-on="run"] b { color: var(--ink); }

/* Le raccord des trois entrées n'est pas un nœud : c'est un point de taille
   nulle, qui sert d'ancrage au tronc et ne dessine rien. Quand les trois
   signaux se rejoignent, une impulsion brève marque l'endroit sur le tracé,
   puis disparaît — pas de pastille permanente au milieu du dessin. */
.flow-node[data-kind="joint"] { width: 0; height: 0; padding: 0; border: 0; background: none; }
.flow-node[data-kind="joint"]::after {
  content: ""; position: absolute; left: -2.5px; top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber-ink);
  opacity: 0; transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.flow-node[data-kind="joint"][data-on="done"]::after { opacity: 1; }

.flow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 13px; margin-bottom: 5px; }
.flow-tag, .flow-state {
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  transition: color 0.25s var(--ease);
}
.flow-node[data-on="run"] .flow-tag { color: var(--amber-ink); }
.flow-state { flex: none; color: var(--ink-3); }
.flow-node[data-on="run"] .flow-state { color: var(--amber-ink); }
.flow-node b { display: block; color: var(--ink); font-size: var(--t-ui); font-weight: 500; }
.flow-note { display: block; margin-top: 4px; color: var(--ink-3); font-size: var(--t-meta); line-height: 1.5; }
.flow-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.flow-chips i {
  padding: 2px 6px;
  border: 1px solid var(--rule); border-radius: 3px;
  color: var(--ink-2);
  font-family: var(--font-mono); font-size: 10px; font-style: normal;
}

.flow-handle {
  position: absolute; width: 7px; height: 7px;
  border: 1px solid var(--ink-faint); border-radius: 50%;
  background: var(--sheet);
}
.flow-handle[data-side="l"] { left: -4px; top: 50%; margin-top: -4px; }
.flow-handle[data-side="r"] { right: -4px; top: 50%; margin-top: -4px; }
.flow-handle[data-side="t"] { top: -4px; left: 50%; margin-left: -4px; }
.flow-handle[data-side="b"] { bottom: -4px; left: 50%; margin-left: -4px; }


.ingestion-flow .flow-wrap {max-width:100%;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#71634a #151513;}
.ingestion-flow .flow-canvas {margin-inline:auto;}
.ingestion-flow .flow-wrap:focus-visible {outline:2px solid #d6b471;outline-offset:5px;border-radius:6px;}
@media(prefers-reduced-motion:reduce){.ingestion-flow *,.ingestion-flow *::after{transition:none!important;}}

/* The landing icon stroke must not thicken SVG text. */
.ingestion-flow .flow-edges {stroke:none;}
.ingestion-flow .flow-elabel {stroke:none;}

.ingestion-flow + .ingestion-recovery {margin-top:64px;}
@media(max-width:700px){.ingestion-flow + .ingestion-recovery {margin-top:40px;}}