/* The interactive Nodal View (site/wf.js). Everything is prefixed .wf-live.
   State colours are Bernard's own: BernardClient/Src/GUI/App.py lines 27-33 (waitingColor ... pauseColor). */
.wf-live { --wf-waiting: #51565A; --wf-ready: #14B7C8; --wf-wip: #EEA11F; --wf-pause: #918572;
           --wf-done: #81AC40; --wf-failed: #A13122;
           --wf-bg: #3C3C3C; --wf-text: #F2F2F2;
           position: relative; max-width: 1100px; margin: 0 auto; color: var(--wf-text);
           font-family: Geist, system-ui, sans-serif; }
.wf-live * { box-sizing: border-box; }

/* below ~700 px the graph scrolls inside its own box, never the page */
.wf-live .wf-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; border-radius: 8px;
                      background: var(--wf-bg); border: 1px solid #2a2a2a; }
.wf-live .wf-stage { position: relative; min-width: 760px; width: 100%; }
.wf-live .wf-svg { display: block; width: 100%; height: auto; user-select: none; }

.wf-live .wf-band { opacity: .85; }
.wf-live .wf-compound { fill-opacity: .5; }
.wf-live .wf-c-pre  { fill: #3A5A8C; }
.wf-live .wf-c-prod { fill: #8C6A5A; }
.wf-live .wf-c-post { fill: #6E50A0; }
.wf-live .wf-c-del  { fill: #5A7078; }
.wf-live .wf-clabel { fill: #8A909A; font-weight: 700; font-size: 12.5px; letter-spacing: 1.2px; }

.wf-live .wf-links path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; opacity: .92; }
.wf-live .wf-port { fill: #fff; }

.wf-live .wf-tab rect { fill: #4A4F55; }
.wf-live .wf-tab-in rect { fill: var(--wf-done); }
.wf-live .wf-tab text { fill: #fff; font-size: 12.5px; }

.wf-live .wf-node { cursor: pointer; outline: none; }
.wf-live .wf-body { fill: var(--wf-waiting); transition: fill .3s; }
.wf-live .wf-node[data-state="Waiting"] .wf-body { fill: var(--wf-waiting); }
.wf-live .wf-node[data-state="Ready"] .wf-body   { fill: var(--wf-ready); }
.wf-live .wf-node[data-state="WIP"] .wf-body     { fill: var(--wf-wip); }
.wf-live .wf-node[data-state="Pause"] .wf-body   { fill: var(--wf-pause); }
.wf-live .wf-node[data-state="Done"] .wf-body    { fill: var(--wf-done); }
.wf-live .wf-node[data-state="Failed"] .wf-body  { fill: var(--wf-failed); }
.wf-live .wf-node:hover .wf-body { stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.wf-live .wf-node:focus-visible .wf-body { stroke: #fff; stroke-width: 2.5; }
.wf-live .wf-name { fill: var(--wf-text); font-size: 13px; font-weight: 500; pointer-events: none; }
.wf-live .wf-ic { pointer-events: none; }
.wf-live .wf-task .wf-ic path, .wf-live .wf-script .wf-ic path { fill: #fff; }
.wf-live .wf-teeth { fill: none; stroke: #fff; stroke-width: 2.6; }
.wf-live .wf-script .wf-ic path { fill: #fff; }
.wf-live .wf-chk-ring { fill: none; stroke: #3B82D6; stroke-width: 2; }
.wf-live .wf-chk-tick { fill: none; stroke: #3B82D6; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* a validation node in a light state colour: keep the blue legible */
.wf-live .wf-node.wf-validation[data-state="Done"] .wf-chk-ring,
.wf-live .wf-node.wf-validation[data-state="Done"] .wf-chk-tick { stroke: #fff; }

/* a running script: the gear spins */
.wf-live .wf-gear { transform-box: fill-box; transform-origin: center; }
.wf-live .wf-script[data-state="WIP"] .wf-gear { animation: wf-spin 1.1s linear infinite; }
@keyframes wf-spin { to { transform: rotate(360deg); } }

/* the small action menu */
.wf-live .wf-menu { position: absolute; z-index: 5; min-width: 190px; max-width: 280px; padding: 6px;
                    background: #1d1d1f; border: 1px solid #55595f; border-radius: 8px;
                    box-shadow: 0 8px 24px rgba(0,0,0,.55); font-size: 14px; }
.wf-live .wf-menu[hidden] { display: none; }
.wf-live .wf-menu-title { padding: 4px 8px 6px; color: #A09D96; font-family: "Geist Mono", monospace;
                          font-size: 11.5px; letter-spacing: .6px; }
.wf-live .wf-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0;
                           border-radius: 5px; background: transparent; color: var(--wf-text); font: inherit; cursor: pointer; }
.wf-live .wf-menu button:hover, .wf-live .wf-menu button:focus-visible { background: #34363a; outline: 1px solid #fff; outline-offset: -1px; }
.wf-live .wf-menu-note { margin: 0; padding: 4px 8px 6px; color: #CFCBC2; line-height: 1.4; }

/* the log line and the reset button, under the graph */
.wf-live .wf-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.wf-live .wf-log { flex: 1 1 260px; margin: 0; min-height: 1.4em; color: #CFCBC2;
                   font-family: "Geist Mono", monospace; font-size: 13px; line-height: 1.4; }
.wf-live .wf-reset { padding: 7px 14px; border: 1px solid #6F6C66; border-radius: 6px; background: transparent;
                     color: #CFCBC2; font: 500 13px Geist, system-ui, sans-serif; cursor: pointer; }
.wf-live .wf-reset:hover { border-color: #FFC94A; color: #FFC94A; }
.wf-live .wf-reset:focus-visible { outline: 2px solid #FFC94A; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wf-live .wf-body { transition: none; }
  .wf-live .wf-script[data-state="WIP"] .wf-gear { animation: none; }
}