/* Custom Agents, Benefits, 1 "Connect the whole workflow" (r21 rethink; client 395 "still bad i asked it to be rethought"). One 3D line
   scene in the site's isometric language (the Runtime map on black, the Security servers): the systems on a plinth at the back, cabled
   down to the route; recurring work piled in an in-tray; the route forks at the decision; the branch runs to a person at a desk and
   back; a policy sheet stands beside the route; work done is the squared stack in the out-tray, its top sheet checked. Drawn by
   _research/ca_workflow/gen_wf.py (desktop and phone views); words are HTML; ca-wf.js only adds classes and swaps the domain. */

.ca-wf{margin:clamp(36px,3.6vw,52px) 0 0}
.ca-wf .ca-dom{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);margin-bottom:clamp(8px,1.2vw,16px)}
.ca-wf .ca-dom button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:999px;cursor:pointer;font:500 var(--s-small)/1.2 var(--f);color:var(--fg2);text-align:center;transition:background-color .2s,color .2s}
.ca-wf .ca-dom button[aria-pressed="true"]{background:#f5f5f3;color:var(--ink)}
.ca-wf .ca-dom button:focus-visible{box-shadow:0 0 0 1.5px #fff}
.ca-wf[data-dom="fs"] [data-d]:not([data-d="fs"]),.ca-wf[data-dom="sc"] [data-d]:not([data-d="sc"]),.ca-wf[data-dom="eo"] [data-d]:not([data-d="eo"]){display:none}

.wf-box{position:relative;width:100%;aspect-ratio:var(--ar-d)}
.wf-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.wf-svg--m{display:none}

/* ---------- the drawing (black ground: dark planes, light lines, one vermilion route) ---------- */
.wf-svg polygon,.wf-svg path,.wf-svg line,.wf-svg ellipse,.wf-svg circle{stroke-linejoin:round}
.fl-t{fill:rgba(255,255,255,.022);stroke:rgba(255,255,255,.2);stroke-width:1}
.fl-fz{fill:#111211;stroke:rgba(255,255,255,.2);stroke-width:1}
.fl-fx{fill:#171817;stroke:rgba(255,255,255,.2);stroke-width:1}
.fl-tick{stroke:rgba(255,255,255,.26);stroke-width:1}
.fl-dot{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2.2;stroke-linecap:round}
.pn-t{fill:#141514;stroke:rgba(255,255,255,.3);stroke-width:1}
.pn-fz{fill:#0f100f;stroke:rgba(255,255,255,.26);stroke-width:1}
.pn-fx{fill:#151615;stroke:rgba(255,255,255,.26);stroke-width:1}
.sv-t{fill:#262726;stroke:rgba(255,255,255,.46);stroke-width:1}
.sv-fz{fill:#1a1b1a;stroke:rgba(255,255,255,.36);stroke-width:1}
.sv-fx{fill:#121312;stroke:rgba(255,255,255,.32);stroke-width:1}
.sv-e{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.sv-b{fill:#0d0e0d;stroke:rgba(255,255,255,.26);stroke-width:1}
.sv-v{stroke:rgba(255,255,255,.22);stroke-width:1}
.sv-l{fill:rgba(245,245,243,.8);stroke:none}
.sv-l2{fill:rgba(245,245,243,.3)}
.sv-i{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.ft-t{fill:#1d1e1d;stroke:rgba(255,255,255,.36);stroke-width:1}
.ft-fz,.ft-fx{fill:#121312;stroke:rgba(255,255,255,.3);stroke-width:1}
.ps2-f{fill:#e9eae7;stroke:rgba(14,15,15,.6);stroke-width:.8}
.ps2-e{fill:#9fa09d;stroke:rgba(14,15,15,.6);stroke-width:.8}
.ps2-d{fill:#c4c5c1;stroke:rgba(14,15,15,.5);stroke-width:.8}
.ps2-h{fill:rgba(14,15,15,.42);stroke:none}
.ps2-r{stroke:rgba(14,15,15,.3);stroke-width:1.4;stroke-linecap:round}
.ps2-on{stroke:var(--verm);stroke-width:2}
.ps2-s{fill:none;stroke:rgba(14,15,15,.4);stroke-width:1}
.tr-t{fill:#1c1d1c;stroke:rgba(255,255,255,.42);stroke-width:1}
.tr-fz,.tr-fx{fill:#121312;stroke:rgba(255,255,255,.36);stroke-width:1}
.sh-t{fill:#e9eae7;stroke:rgba(14,15,15,.55);stroke-width:.8}
.sh-fz{fill:#b9bab7;stroke:rgba(14,15,15,.5);stroke-width:.6}
.sh-fx{fill:#a4a5a2;stroke:rgba(14,15,15,.5);stroke-width:.6}
.sh-h{fill:rgba(14,15,15,.3);stroke:none}
.sh-r{stroke:rgba(14,15,15,.32);stroke-width:1;stroke-linecap:round}
.dm-t{fill:#1f201f;stroke:rgba(255,255,255,.55);stroke-width:1}
.dm-f{fill:#121312;stroke:rgba(255,255,255,.4);stroke-width:1}
.dm-i{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:3 3}
.dk-t{fill:#232423;stroke:rgba(255,255,255,.48);stroke-width:1}
.dk-fz,.dk-fx{fill:#121312;stroke:rgba(255,255,255,.4);stroke-width:1}
.lg-t,.lg-fz,.lg-fx{fill:#1a1b1a;stroke:rgba(255,255,255,.34);stroke-width:1}
.ps-b,.ps-a,.ps-t,.ps-h{fill:#1f201f;stroke:rgba(255,255,255,.6);stroke-width:1.1}
.ps-s{stroke:rgba(255,255,255,.3);stroke-width:1}
.ck-c{fill:var(--verm);stroke:none}
.ck-k{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cb{fill:none;stroke:rgba(245,245,243,.42);stroke-width:1.2;stroke-linecap:round}
.rt{fill:none;stroke:var(--verm);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jn{fill:#0a0a0a;stroke:rgba(245,245,243,.8);stroke-width:1.3}
.jn-r{fill:var(--verm);stroke:none}

/* ---------- labels ---------- */
.wf-lab{position:absolute;left:var(--x);top:var(--y);pointer-events:none;white-space:nowrap}
/* a label sits off its anchor by a stem (--s) on one side: d-t above, d-b below, d-l left, d-r right (phone: m-*) */
.wf-lab::before{content:"";position:absolute;left:0;top:0;background:rgba(245,245,243,.45)}
.wf-lab::after{content:"";position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:rgba(245,245,243,.9)}
.wf-lab > span{position:absolute;left:0;top:0}
@media (min-width:761px){
  .wf-lab.d-t::before{width:1px;height:var(--s);transform:translateY(-100%)}
  .wf-lab.d-t > span{transform:translate(calc(-50% + var(--o,0px)),calc(-100% - var(--s)))}
  .wf-lab.d-b::before{width:1px;height:var(--s)}
  .wf-lab.d-b > span{transform:translate(calc(-50% + var(--o,0px)),var(--s))}
  .wf-lab.d-l::before{height:1px;width:var(--s);transform:translateX(-100%)}
  .wf-lab.d-l > span{transform:translate(calc(-100% - var(--s)),calc(-50% + var(--o,0px)))}
  .wf-lab.d-r::before{height:1px;width:var(--s)}
  .wf-lab.d-r > span{transform:translate(var(--s),calc(-50% + var(--o,0px)))}
}
@media (max-width:760px){
  .wf-lab.m-t::before{width:1px;height:var(--ps);transform:translateY(-100%)}
  .wf-lab.m-t > span{transform:translate(calc(-50% + var(--po,0px)),calc(-100% - var(--ps)))}
  .wf-lab.m-b::before{width:1px;height:var(--ps)}
  .wf-lab.m-b > span{transform:translate(calc(-50% + var(--po,0px)),var(--ps))}
  .wf-lab.m-l::before{height:1px;width:var(--ps);transform:translateX(-100%)}
  .wf-lab.m-l > span{transform:translate(calc(-100% - var(--ps)),calc(-50% + var(--po,0px)))}
  .wf-lab.m-r::before{height:1px;width:var(--ps)}
  .wf-lab.m-r > span{transform:translate(var(--ps),calc(-50% + var(--po,0px)))}
}
.wf-lab--sys::before,.wf-lab--sys::after{display:none}
.wf-tag{display:flex;flex-direction:column;gap:2px;padding:8px 13px 9px;border-radius:12px;background:#121312;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.wf-c{font:500 var(--s-small)/1.2 var(--f);color:var(--fg2)}
.wf-n{font:400 var(--s-body)/1.2 var(--f);color:#fff}
.wf-tag--s{padding:6px 12px;border-radius:999px;font:500 var(--s-small)/1.2 var(--f);color:var(--fg)}
.wf-tag--done{flex-direction:row;align-items:center;padding:8px 14px;border-radius:999px;background:#f5f5f3;box-shadow:none;font:500 var(--s-small)/1.2 var(--f);color:var(--ink)}
.wf-grp{font:500 var(--s-small)/1.2 var(--f);color:var(--fg2)}
.wf-lab--wd::before{background:var(--verm)}
.wf-lab--wd::after{background:var(--verm)}

@media (max-width:760px){
  .wf-box{aspect-ratio:var(--ar-m);max-width:350px;margin:0 auto}
  .wf-svg--d{display:none}
  .wf-svg--m{display:block}
  .wf-lab{left:var(--px);top:var(--py)}
}
@media (max-width:760px){
  .wf-tag{padding:6px 10px 7px;border-radius:10px;gap:1px}
  .wf-n{font:500 var(--s-small)/1.25 var(--f)}
  .wf-tag--s{padding:5px 10px;border-radius:999px}
  .wf-tag--done{padding:6px 12px;border-radius:999px}
}
@media (max-width:760px){ .wf-lab.m-c > span{transform:translate(-50%,-50%)} }

/* ---------- the entrance (once, about 2.4 s), then the scene rests whole ---------- */
.js .ca-wf .wf-o{opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ease) calc(var(--i) * 45ms),transform .6s var(--spring) calc(var(--i) * 45ms)}
.js .ca-wf .wf-mv{transform:translate(var(--mx),var(--my));transition:opacity .25s var(--ease) var(--d),transform .9s var(--ease-io) var(--d)}
.js .ca-wf.in .wf-o{opacity:1;transform:none}
.js .ca-wf .rt,.js .ca-wf .cb{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t) var(--ease-io) var(--d)}
.js .ca-wf .rt-a{transition-timing-function:cubic-bezier(.45,0,.55,1)}
.js .ca-wf.in .rt,.js .ca-wf.in .cb{stroke-dashoffset:0}
.js .ca-wf .jn,.js .ca-wf .jn-r{opacity:0;transition:opacity .3s var(--ease) var(--d)}
.js .ca-wf.in .jn,.js .ca-wf.in .jn-r{opacity:1}
.js .ca-wf .ps2-on{stroke:rgba(14,15,15,.3);stroke-width:1.4;transition:stroke .4s var(--ease) var(--dp),stroke-width .4s var(--ease) var(--dp)}
.js .ca-wf.in .ps2-on{stroke:var(--verm);stroke-width:2}
.js .ca-wf .ck-c{opacity:0;transition:opacity .3s var(--ease) var(--dk)}
.js .ca-wf .ck-k{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease) calc(var(--dk) + .2s)}
.js .ca-wf.in .ck-c{opacity:1}
.js .ca-wf.in .ck-k{stroke-dashoffset:0}
.js .ca-wf .wf-lab{opacity:0;transition:opacity .45s var(--ease) var(--ld)}
.js .ca-wf.in .wf-lab{opacity:1}
@media (prefers-reduced-motion:reduce){
  .ca-wf *,.ca-wf *::before,.ca-wf *::after{transition:none!important}
}
@media (max-width:760px){
  .ca-wf .ca-dom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:22px}
  .ca-wf .ca-dom button{height:auto;min-height:44px;padding:6px 8px;border-radius:18px}
}