/* ============================================================================
   RiverFlows · automations.css — "De Flow-Lab"
   Layered ON TOP of style.css + dashboards.css (shares its dark tokens, ticker,
   hero term-prompt, glance panel, manifest and build-steps). Adds the
   interactive node-based workflow editor and the page's own sections.
   ========================================================================== */

:root{
  --k-trigger:#6E86FF;
  --k-logic:#C792EA;
  --k-integration:#4EC3A5;
  --k-ai:#FF8FB1;
  --k-action:#F0A23B;
  --node-w:200px;
}

/* ---- hero (sub-hero, not full height) --------------------------------- */
.auto-hero{min-height:auto;padding-top:0}
.auto-hero .hero-inner{padding-top:clamp(2.4rem,6vh,4.6rem);padding-bottom:clamp(1.6rem,4vh,3rem);position:relative;z-index:2}
.auto-hero .hero-sub{max-width:640px}
.auto-hero .hero-sub strong{color:#fff;font-weight:600}
.auto-hero .term-prompt{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.hero-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.55}

/* ====================================================================== */
/*  THE FLOW-LAB                                                            */
/* ====================================================================== */
.lab-section{border-top:1px solid var(--line-dark);overflow:hidden;padding-top:clamp(2.6rem,6vw,4.5rem);padding-bottom:clamp(2.2rem,5vw,3.6rem)}
.lab-section .wrap .lead{margin-top:.7rem}
.lab-shell{width:min(1480px,calc(100% - 2*var(--gut)));margin:clamp(1.2rem,3vw,2rem) auto 0;border:1px solid var(--line-dark);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));box-shadow:0 60px 120px -50px rgba(0,0,0,.8),0 0 0 1px rgba(110,134,255,.05) inset;overflow:hidden}

/* Toolbar ------------------------------------------------------------- */
.lab-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .7rem;border-bottom:1px solid var(--line-dark);background:rgba(255,255,255,.02);min-height:46px}
.lab-tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1;min-width:0}
.lab-tabs::-webkit-scrollbar{display:none}
.lab-tab{flex:none;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--body);font-size:.8rem;font-weight:600;color:var(--muted-dark);background:none;border:1px solid transparent;border-radius:9px;padding:.5rem .8rem;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s,border-color .2s}
.lab-tab .dotk{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.lab-tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.lab-tab.on{color:#fff;background:rgba(110,134,255,.14);border-color:rgba(110,134,255,.4)}
.lab-tab.on .dotk{opacity:1;box-shadow:0 0 8px 1px rgba(110,134,255,.7)}
.lab-tab:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}

.lab-tools{display:flex;align-items:center;gap:.4rem;flex:none}
.lab-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:600;font-size:.85rem;padding:.55rem .95rem;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,opacity .2s}
.lab-btn.run{background:linear-gradient(180deg,var(--accent-soft),var(--accent));color:#fff;box-shadow:0 10px 24px -12px rgba(59,91,255,.8)}
.lab-btn.run:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(59,91,255,.9)}
.lab-btn.run .ic{font-size:.7rem;transform:translateY(.5px)}
.lab-btn.run.running{background:rgba(255,255,255,.08);color:var(--muted-dark);box-shadow:none;cursor:default}
.lab-btn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.lab-sep{width:1px;height:24px;background:var(--line-dark);margin:0 .25rem}
.lab-icn{width:34px;height:34px;display:grid;place-items:center;font-size:1.05rem;line-height:1;font-family:var(--body);color:var(--muted-dark);background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:9px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.lab-icn:hover{color:#fff;border-color:rgba(110,134,255,.5);background:rgba(110,134,255,.1)}
.lab-icn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.lab-zoom{font-family:var(--mono);font-size:.68rem;color:var(--muted-dark);width:42px;text-align:center;flex:none}

/* Main 3-column grid -------------------------------------------------- */
.lab-main{display:grid;grid-template-columns:206px 1fr 274px;height:clamp(420px,56vh,600px)}

/* Palette ------------------------------------------------------------- */
.lab-palette{border-right:1px solid var(--line-dark);display:flex;flex-direction:column;min-height:0;background:rgba(0,0,0,.16)}
.pal-head{padding:.85rem .9rem .6rem;border-bottom:1px solid var(--line-dark)}
.pal-title{font-family:var(--display);font-weight:600;font-size:.92rem;color:#fff;display:block}
.pal-hint{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dark)}
.pal-scroll{flex:1;overflow-y:auto;padding:.7rem .7rem 1.2rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.pal-scroll::-webkit-scrollbar{width:8px}
.pal-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
.pal-cat{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);margin:.9rem .3rem .45rem}
.pal-cat:first-child{margin-top:.2rem}
.pal-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border:1px solid var(--line-dark);border-radius:9px;background:rgba(255,255,255,.02);margin-bottom:.4rem;cursor:grab;transition:transform .15s,border-color .2s,background .2s;touch-action:none;user-select:none;-webkit-user-select:none}
.pal-item:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--k) 55%,transparent);background:rgba(255,255,255,.05)}
.pal-item:active{cursor:grabbing}
.pal-item:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.pal-item .pic{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k)}
.pal-item .pic svg{width:16px;height:16px}
.pal-item .pnm{font-size:.8rem;font-weight:500;color:#fff;line-height:1.2}
.pal-item .pgrip{margin-left:auto;color:var(--muted-dark);font-size:.8rem;letter-spacing:-1px;opacity:.5}

/* Stage / canvas ------------------------------------------------------ */
.lab-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(59,91,255,.08),transparent 60%),#0a0b0e;cursor:grab;min-width:0;touch-action:none}
.lab-stage.panning{cursor:grabbing}
.lab-stage:focus-visible{outline:2px solid var(--accent-soft);outline-offset:-2px}
.lab-grid{position:absolute;inset:-50%;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:26px 26px;background-position:0 0;pointer-events:none;opacity:.5}
.lab-canvas{position:absolute;top:0;left:0;width:2800px;height:1700px;transform-origin:0 0;will-change:transform}
.lab-edges{position:absolute;top:0;left:0;width:2800px;height:1700px;overflow:visible;pointer-events:none}
.lab-nodes{position:absolute;top:0;left:0;width:100%;height:100%}

/* edges */
.le{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2.2;transition:stroke .3s}
.le.flow{stroke-dasharray:5 7;animation:edgeFlow 1.1s linear infinite}
.le.active{stroke:var(--accent-soft);stroke-width:2.6}
@keyframes edgeFlow{to{stroke-dashoffset:-24}}
.le-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}
.le-temp{fill:none;stroke:var(--accent-soft);stroke-width:2.4;stroke-dasharray:5 5;opacity:.85}
.le-pkt{fill:var(--accent-soft);filter:drop-shadow(0 0 5px rgba(110,134,255,.9))}

/* node */
.lab-node{position:absolute;width:var(--node-w);background:linear-gradient(160deg,#15171d,#101218);border:1px solid var(--line-dark);border-radius:12px;box-shadow:0 18px 40px -22px rgba(0,0,0,.9);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:box-shadow .25s,border-color .25s,transform .12s;overflow:visible}
.lab-node::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--k);box-shadow:0 0 12px -1px var(--k)}
.lab-node:hover{border-color:color-mix(in srgb,var(--k) 50%,var(--line-dark))}
.lab-node.dragging{cursor:grabbing;box-shadow:0 30px 60px -22px rgba(0,0,0,.95);z-index:20}
.lab-node.sel{border-color:var(--k);box-shadow:0 0 0 1px var(--k),0 24px 50px -24px rgba(0,0,0,.95)}
.lab-node.running{border-color:var(--k);animation:nodePulse 1s ease-in-out infinite}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 1px var(--k),0 0 18px -2px var(--k)}50%{box-shadow:0 0 0 1px var(--k),0 0 34px 2px var(--k)}}
.lab-node.done .nstat{background:var(--ok);box-shadow:0 0 8px 1px rgba(129,201,149,.7)}
.lab-node.err{border-color:var(--crit)}
.lab-node.err .nstat{background:var(--crit);box-shadow:0 0 8px 1px rgba(255,107,107,.7)}

.nhead{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem .5rem}
.nicon{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--k) 17%,transparent);color:var(--k)}
.nicon svg{width:15px;height:15px}
.ntitle{font-size:.82rem;font-weight:600;color:#fff;line-height:1.15;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nstat{width:8px;height:8px;border-radius:50%;background:var(--muted-dark);flex:none;transition:background .3s,box-shadow .3s}
.nbody{padding:0 .7rem .55rem;font-family:var(--mono);font-size:.62rem;color:var(--muted-dark);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nkind{display:inline-block;margin:0 .7rem .6rem;font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--k);background:color-mix(in srgb,var(--k) 12%,transparent);border:1px solid color-mix(in srgb,var(--k) 26%,transparent);border-radius:5px;padding:.16rem .4rem}
.ndel{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;display:none;place-items:center;background:#1a1c22;border:1px solid var(--line-dark);color:var(--muted-dark);font-size:.7rem;cursor:pointer;z-index:5}
.ndel:hover{color:var(--crit);border-color:var(--crit)}
.lab-node.sel .ndel{display:grid}

/* ports */
.nport{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#0a0b0e;border:2px solid var(--k);transform:translateY(-50%);transition:transform .15s,box-shadow .15s,background .15s;z-index:5;touch-action:none}
.nport.in{left:-8px}
.nport.out{right:-8px;cursor:crosshair}
/* big invisible grab halo so the output port is easy to catch */
.nport.out::after{content:"";position:absolute;inset:-14px;border-radius:50%;cursor:crosshair}
.nport.out:hover,.nport.armable{transform:translateY(-50%) scale(1.4);box-shadow:0 0 12px 2px var(--k)}
.nport.in.armable{transform:translateY(-50%) scale(1.7);box-shadow:0 0 0 5px color-mix(in srgb,var(--k) 28%,transparent),0 0 16px 3px var(--k);background:var(--k)}
/* while wiring, light up every input port as a clear drop target */
.lab-canvas.connecting .nport.in{transform:translateY(-50%) scale(1.35);box-shadow:0 0 0 4px color-mix(in srgb,var(--k) 18%,transparent)}
.lab-canvas.connecting{cursor:crosshair}

/* stage hint + run bar */
.lab-stage-hint{position:absolute;left:0;right:0;bottom:0;padding:.5rem .8rem;font-family:var(--mono);font-size:.6rem;color:var(--muted-dark);background:linear-gradient(0deg,rgba(10,11,14,.92),transparent);pointer-events:none;text-align:center;letter-spacing:.02em}
.lab-stage-hint b{color:var(--accent-soft);font-weight:500}
.lab-runbar{position:absolute;left:0;top:0;right:0;height:2px;background:transparent;overflow:hidden;pointer-events:none}
.lab-runbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-soft));box-shadow:0 0 10px 1px rgba(110,134,255,.7);transition:width .35s ease}

/* Inspector ----------------------------------------------------------- */
.lab-inspector{border-left:1px solid var(--line-dark);display:flex;flex-direction:column;min-height:0;background:rgba(0,0,0,.16)}
.insp-card{flex:1;overflow-y:auto;padding:1rem .95rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.insp-card::-webkit-scrollbar{width:8px}.insp-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
.insp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;gap:.8rem;color:var(--muted-dark);padding:1rem}
.insp-empty-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;border:1px dashed var(--line-dark);font-size:1.4rem;color:var(--accent-soft)}
.insp-empty p{font-size:.84rem;line-height:1.5;max-width:30ch}

.insp-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.insp-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--k) 18%,transparent);color:var(--k)}
.insp-ic svg{width:20px;height:20px}
.insp-tt{font-family:var(--display);font-weight:600;font-size:1.05rem;color:#fff;line-height:1.15}
.insp-kind{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--k)}
.insp-desc{font-size:.82rem;color:var(--muted-dark);line-height:1.5;margin:.5rem 0 .9rem}
.insp-sec{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);margin:1rem 0 .5rem}
.insp-field{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.5rem .6rem;border:1px solid var(--line-dark);border-radius:8px;background:rgba(255,255,255,.02);margin-bottom:.4rem}
.insp-field .fk{font-size:.72rem;color:var(--muted-dark);flex:none}
.insp-field .fv{font-family:var(--mono);font-size:.7rem;color:#fff;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insp-stat{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.62rem;padding:.3rem .6rem;border-radius:999px;border:1px solid var(--line-dark);color:var(--muted-dark)}
.insp-stat i{width:7px;height:7px;border-radius:50%;background:currentColor}
.insp-stat.ok{color:var(--ok);border-color:rgba(129,201,149,.34);background:rgba(129,201,149,.08)}
.insp-stat.run{color:var(--accent-soft);border-color:rgba(110,134,255,.34);background:rgba(110,134,255,.08)}
.insp-del{margin-top:1rem;width:100%;font-family:var(--body);font-size:.78rem;font-weight:600;color:var(--crit);background:rgba(255,107,107,.07);border:1px solid rgba(255,107,107,.28);border-radius:9px;padding:.6rem;cursor:pointer;transition:background .2s}
.insp-del:hover{background:rgba(255,107,107,.16)}

.insp-log{border-top:1px solid var(--line-dark);display:flex;flex-direction:column;height:170px;flex:none}
.insp-log-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .9rem .45rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.insp-log-tag{color:var(--accent-soft)}
.insp-log-tag.run{color:var(--warn)}
.insp-log-tag.done{color:var(--ok)}
.insp-log-list{flex:1;overflow-y:auto;padding:0 .9rem .8rem;display:flex;flex-direction:column;gap:.32rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.insp-log-list::-webkit-scrollbar{width:7px}.insp-log-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
.logrow{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;color:rgba(255,255,255,.82);animation:logIn .35s cubic-bezier(.2,.7,.2,1) both}
.logrow .lc{flex:none;width:13px;text-align:center}
.logrow.ok .lc{color:var(--ok)}.logrow.run .lc{color:var(--accent-soft)}.logrow.err .lc{color:var(--crit)}.logrow.sys .lc{color:var(--muted-dark)}
.logrow .lt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logrow .lm{color:var(--muted-dark);flex:none}
@keyframes logIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

.lab-mobnote{display:none}

/* ====================================================================== */
/*  WAT WE AUTOMATISEREN                                                    */
/* ====================================================================== */
.autocat{border-top:1px solid var(--line-dark)}
.cat-grid{margin-top:2.8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat{position:relative;border:1px solid var(--line-dark);border-radius:14px;background:var(--glass);padding:1.4rem 1.4rem 1.5rem;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.cat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--k) 45%,var(--line-dark));box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.cat .cic{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k);margin-bottom:1rem}
.cat .cic svg{width:22px;height:22px}
.cat h3{font-family:var(--display);font-weight:600;font-size:1.18rem;color:#fff;letter-spacing:-.01em}
.cat p{color:var(--muted-dark);font-size:.9rem;line-height:1.55;margin-top:.5rem}
.cat .ctags{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.cat .ctags span{font-family:var(--mono);font-size:.6rem;color:rgba(255,255,255,.75);border:1px solid var(--line-dark);border-radius:6px;padding:.22rem .45rem;background:rgba(255,255,255,.02)}

/* ====================================================================== */
/*  INTEGRATIES — marquee                                                  */
/* ====================================================================== */
.integ{border-top:1px solid var(--line-dark);overflow:hidden}
.integ-marquee{margin-top:2rem;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.integ-marquee.rev{margin-top:14px}
.integ-track{display:inline-flex;gap:14px;padding-left:14px;animation:integScroll 46s linear infinite;will-change:transform}
.integ-marquee.rev .integ-track{animation-duration:58s;animation-direction:reverse}
.integ-marquee:hover .integ-track{animation-play-state:paused}
@keyframes integScroll{to{transform:translateX(-50%)}}
.ichip{flex:none;display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.05rem;border:1px solid var(--line-dark);border-radius:11px;background:var(--glass);white-space:nowrap}
.ichip .ilogo{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;font-weight:700;font-size:.82rem;color:#fff}
.ichip .inm{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.88)}

/* ====================================================================== */
/*  IMPACT                                                                  */
/* ====================================================================== */
.impact{border-top:1px solid var(--line-dark)}
.impact-grid{margin-top:2.8rem;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.impact-cell{border:1px solid var(--line-dark);border-radius:14px;background:var(--glass);padding:1.6rem 1.4rem;text-align:left}
.impact-cell .iv{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.4vw,3.1rem);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.impact-cell .il{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-dark);margin-top:.7rem;line-height:1.4}

/* ====================================================================== */
/*  RESPONSIVE                                                             */
/* ====================================================================== */
@media(max-width:1080px){
  .lab-main{grid-template-columns:188px 1fr 248px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  .lab-palette{display:none}
  .lab-main{grid-template-columns:1fr 248px;height:clamp(460px,64vh,640px)}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .lab-shell{width:calc(100% - 2*var(--gut));border-radius:14px}
  .lab-toolbar{flex-direction:column;align-items:stretch;gap:.5rem}
  .lab-tools{justify-content:space-between}
  .lab-main{grid-template-columns:1fr;height:auto}
  .lab-inspector{display:none}
  /* let the page scroll vertically past the canvas on touch; horizontal stays interactive */
  .lab-stage{height:62vh;min-height:380px;touch-action:pan-y}
  .lab-node,.nport{touch-action:pan-y}
  .lab-mobnote{display:block;padding:.9rem 1rem;font-family:var(--mono);font-size:.66rem;color:var(--muted-dark);border-top:1px solid var(--line-dark);text-align:center}
  .cat-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .le.flow{animation:none}
  .integ-track{animation:none}
  .lab-node.running{animation:none}
}