/* Tengingar: the workflow graph (js/wf.js). Replaces the plug picture.
   Style taken from Bifrost's Workflow graph (rounded node cards with a small line icon, soft S-curve lines that draw once, a ring that beats on arrival),
   recoloured with the site tokens in css/modes.css only, so day, night, winter, aurora and flare all work.
   Text pairs used: --ink and --ink2 on --paper (card), --ink on the card while it is lit (paper mixed with 16% orange), the three system icons (--button-ink on --orange, --on-teal on --teal, --bg on --ink): all checked by tests/site-contrast-modes.test.cjs. */
.wf{position:relative;margin:0 0 20px;padding:30px 28px 34px;border-radius:20px;background-color:var(--foam);outline:2px solid var(--ink);outline-offset:-2px;box-shadow:0 5px 0 var(--aqua);
  background-image:linear-gradient(var(--aqua) 1px,transparent 1px),linear-gradient(90deg,var(--aqua) 1px,transparent 1px);background-size:26px 26px;background-blend-mode:soft-light}
.wf-nodes{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:46px}
.wf-nodes>li{position:relative;margin:0;padding:0;width:min(78%,300px)}
.wf-nodes>li:nth-child(odd){align-self:flex-start}
.wf-nodes>li:nth-child(even){align-self:flex-end}
.wf-node{--lit:0;position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;min-height:76px;padding:12px 14px;border:2px solid var(--ink);border-radius:var(--rad,16px);background:color-mix(in srgb,var(--orange) calc(var(--lit) * 16%),var(--paper));color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--acc,var(--aqua));transition:transform .18s ease,box-shadow .18s ease}
.wf-node:hover,.wf-node[aria-expanded="true"]{transform:translateY(-2px)}
.wf-node:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.wf-say{display:block;height:0;overflow:hidden;opacity:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.wf-say:not(:empty){padding-top:10px}
.wf-ic{flex:none;width:42px;height:42px;border-radius:var(--ic-rad,12px);display:grid;place-items:center;background:var(--ic-bg,var(--petrol));color:var(--ic-fg,var(--on-petrol))}
.wf-ic svg{width:23px;height:23px;display:block}
/* the system card has three looks, one per tab (js/wf.js morphs between them) */
.wf-sys{min-height:var(--h,76px)}
.wf-sys[data-s="0"]{--acc:var(--orange);--ic-bg:var(--orange);--ic-fg:var(--button-ink);--rad:16px;--ic-rad:12px;--h:76px}
.wf-sys[data-s="1"]{--acc:var(--teal);--ic-bg:var(--teal);--ic-fg:var(--on-teal);--rad:40px;--ic-rad:50%;--h:84px}
.wf-sys[data-s="2"]{--acc:var(--sea);--ic-bg:var(--ink);--ic-fg:var(--bg);--rad:6px;--ic-rad:6px;--h:76px}
.wf-in{display:flex;align-items:center;gap:12px;min-width:0}
.wf-t{display:grid;gap:2px;min-width:0}
.wf-t b{font-size:17px;line-height:1.15;font-weight:900;color:var(--ink);overflow-wrap:anywhere}
.wf-t i{font-style:normal;font-size:14px;line-height:1.2;color:var(--ink2)}
.wf-ring{position:absolute;inset:-7px;border:2px solid var(--orange);border-radius:21px;opacity:0;pointer-events:none}
/* connectors and the packet of light */
.wf-lines{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.wf-line{fill:none;stroke:var(--sea);stroke-width:2.5;stroke-linecap:round}
.js .wf:not(.in) .wf-line{opacity:0}
.wf-port{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.wf-trail{fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:round;opacity:0}
.wf-packet{opacity:0}
.wf-core{fill:var(--orange-d);stroke:var(--paper);stroke-width:2.5}
.wf-glow-stop{stop-color:var(--orange)}
@media (min-width:900px){
  .wf{padding:34px 36px 36px}
  .wf-nodes{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:clamp(48px,6vw,96px)}
  .wf-nodes>li{flex:1 1 0;width:auto;max-width:250px;min-width:0}
  .wf-nodes>li:nth-child(odd),.wf-nodes>li:nth-child(even){align-self:flex-start}
  .wf-nodes>li:nth-child(even){margin-top:30px}
}
@media (max-width:899px){.wf-nodes>li{width:min(82%,300px)}}
/* one column under the graph: the panel text stays exactly as it was, the old plug picture is gone */
.plugSec .ppanel,.plugSec .ppanel[hidden]{grid-template-columns:minmax(0,1fr)}
.plugSec .ppanel[hidden]{display:none}
@media (min-width:901px){.plugSec .ppanel{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:0}.plugSec .ptext{max-width:none}}
@media (prefers-reduced-motion:reduce){.wf-node{transition:none}.js .wf:not(.in) .wf-line{opacity:1}}
/* Phones: keep the how-we-connect lines clear of the floating chat button (bottom right, 56 px) */
@media (max-width:600px){details.more.how li{padding-right:52px}}