/* TEDRA v4 · graph.css (Builder B) — the workflow graphs. Ink on paper only; no colour anywhere.
   The page sizes a graph with --gv-h on .gv (default 300px, 236px at phone width).
   Optional hooks: --gv-ctl-x (Run it inset from the left), --gv-rule (hairline colour; transparent drops it).
   Node fills follow the card stock through --sheet, then --paper. Strokes are ~2px at card zoom, never under 1.3px (--gv-s). */
.gv{
  --gv-ctl-h:40px;
  --gv-ink:var(--ink,#141414);
  --gv-paper:var(--sheet,var(--paper,#F7F7F3));
  position:relative;height:var(--gv-h,300px);min-width:0;overflow:hidden;overflow:clip;
  border-top:1px solid var(--gv-rule,rgba(20,20,20,.16));border-bottom:1px solid var(--gv-rule,rgba(20,20,20,.16));
  color:var(--gv-ink);contain:layout paint;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent
}
@media (max-width:700px){ .gv{height:var(--gv-h,236px)} }

/* camera: moved by transform only; a reset cross-fades its opacity */
.gv__cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;transition:opacity .32s ease}
.gv__cam.is-quick{transition-duration:.17s}
.gv svg.wf{position:relative;z-index:1;display:block;max-width:none;max-height:none;overflow:visible;--gv-s:1}
/* the happy path's ink: one bar under the svg, grown by scaleX; ink-filled nodes cover it */
.gv__trail{position:absolute;left:0;top:0;z-index:0;width:0;height:2px;background:var(--gv-ink);transform-origin:0 50%;transform:scaleX(0);will-change:transform;pointer-events:none}
.gv.is-static .gv__trail{display:none}
.gv .wf__pulse{display:none}

/* edges: the happy path is drawn light, then inked as the run reaches it (trail bar; .wf__ink for side branches); off-path edges faint and dashed */
.wf__edge,.wf__ink{fill:none;stroke:var(--gv-ink);stroke-width:max(3px, calc(1.3px / var(--gv-s)));stroke-linecap:round}
.wf__edge.is-path{opacity:.3}
.wf__edge.is-faint{opacity:.2;stroke-dasharray:calc(4px / var(--gv-s)) calc(5px / var(--gv-s))}
.wf__ink{pointer-events:none}
.gv.is-static .wf__edge.is-path{opacity:1}

/* nodes: outline on the page's paper; ink-filled once the run has passed; off-path nodes faint */
.wf__node rect,.wf__node path:not(.wf__glyph){fill:transparent;stroke:var(--gv-ink);stroke-width:max(3px, calc(1.3px / var(--gv-s)))}
.wf__glyph{fill:none;stroke:var(--gv-ink);stroke-width:max(3.4px, calc(1.5px / var(--gv-s)));stroke-linecap:round;stroke-linejoin:round}
.wf__node.is-faint{opacity:.22}
.wf__node--off rect{stroke-dasharray:8 8}
.wf__node.is-on rect,.wf__node.is-on path:not(.wf__glyph),
.wf__node.is-done rect,.wf__node.is-done path:not(.wf__glyph){fill:var(--gv-ink)}
.wf__node.is-on .wf__glyph,.wf__node.is-done .wf__glyph{stroke:var(--gv-paper)}
.wf__node.is-trigger{cursor:pointer}

/* the pulse: one ink dot with a paper ring, on its own layer; it shows on connectors and disappears into each node */
.gv__pulse{position:absolute;left:0;top:0;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--gv-ink);box-shadow:0 0 0 3px var(--gv-paper);opacity:0;will-change:transform;pointer-events:none}
.gv__pulse.is-on{opacity:1}

/* hover tip: the node's name */
.gv__tip{position:absolute;left:0;top:0;z-index:3;transform:translate(-50%,-100%);
  font:500 11.5px/1 var(--mono,"IBM Plex Mono",ui-monospace,Menlo,monospace);letter-spacing:.02em;
  padding:6px 8px 5px;border-radius:6px;background:var(--gv-ink);color:var(--gv-paper);white-space:nowrap;pointer-events:none}
.gv__tip[hidden]{display:none}

/* Run it + counter, in the strip above the graph */
.gv__ctl{position:absolute;left:var(--gv-ctl-x,0px);top:calc((var(--gv-ctl-h) - 26px) / 2 + 2px);z-index:2;display:flex;align-items:center;gap:12px;
  font:400 12px/1 var(--mono,"IBM Plex Mono",ui-monospace,Menlo,monospace);letter-spacing:.03em;color:var(--gv-ink)}
.gv__run{display:inline-flex;align-items:center;gap:8px;height:26px;margin:0;padding:0 12px 0 10px;border:1px solid var(--gv-ink);border-radius:999px;
  background:transparent;color:var(--gv-ink);font:inherit;letter-spacing:inherit;cursor:pointer}
.gv__run::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.gv__run:hover{background:var(--gv-ink);color:var(--gv-paper)}
.gv__run:focus-visible{outline:2px solid var(--gv-ink);outline-offset:2px}
.gv__count{font-variant-numeric:tabular-nums;opacity:.6;white-space:nowrap}
.gv.is-static .gv__ctl{display:none}
/* reduced motion on a narrow band: the still, inked graph keeps readable nodes and can be swiped sideways */
.gv.is-static.is-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;contain:none}