/* SERVACT department flows (Overview, #areas). Driven by assets/js/flows.js.
   Without JavaScript the five departments read as plain lists. Base styles are the finished state; every animation
   lives inside prefers-reduced-motion:no-preference and replays when a step's widget gets .on. */

/* ---------- No-JS / fallback: five readable lists ---------- */
.flows{margin-top:40px}
.flows:not(.fl-js){display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.flows:not(.fl-js) .fl-dept{border:1px solid var(--line-light);border-radius:16px;padding:20px}
.flow-name{font-size:1.125rem;font-weight:800}
.flow-head{margin-top:6px;font:700 1rem/1.35 var(--head);color:#A84B05}
.flow-steps{margin-top:14px;display:grid;gap:10px;counter-reset:fs}
.flow-steps li{font-size:.9375rem;line-height:1.45}
.flow-steps b{display:block;color:var(--ink)}
.flows:not(.fl-js) .flow-steps span{color:var(--slate)}

/* ---------- Stage ---------- */
.fl-js{position:relative;border-radius:24px;padding:22px clamp(16px,2.4vw,32px) clamp(20px,2.6vw,34px);color:#E6EDF5;
  background:radial-gradient(70% 90% at 85% 15%,rgba(0,122,231,.28),transparent 60%),radial-gradient(60% 70% at 5% 100%,rgba(252,129,2,.16),transparent 60%),linear-gradient(160deg,#03213F,#01172E 60%);
  box-shadow:0 40px 90px -40px rgba(1,23,46,.75);overflow:hidden}
.fl-js::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(80% 80% at 60% 40%,#000,transparent);pointer-events:none}
.fl-top{position:relative;display:flex;align-items:center;gap:16px}
.fl-tabs{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.fl-tabs::-webkit-scrollbar{display:none}
.fl-tab{position:relative;flex:1 0 auto;min-height:46px;padding:10px 16px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);color:#B4C0CE;font:600 .9375rem var(--body);cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.fl-tab:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.fl-tab[aria-selected="true"]{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(141,189,240,.55)}
.fl-tn-s{display:none}
.fl-prog{position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.fl-prog b{position:absolute;inset:0;width:0;background:var(--orange);border-radius:2px}
.fl-tab[aria-selected="true"] .fl-prog b{width:100%}
.fl-pause{flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#C9D4E0;font:600 .8125rem var(--body);cursor:pointer}
.fl-pause:hover{color:#fff;border-color:rgba(255,255,255,.45)}

.fl-stage{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,3.4vw,48px);align-items:center;margin-top:26px}

/* ---------- Copy (left) ---------- */
.fl-js .flow-name{font:600 .875rem var(--body);color:var(--orange);letter-spacing:0}
.fl-js .flow-head{margin-top:10px;font:800 clamp(1.625rem,2.8vw,2.375rem)/1.1 var(--head);color:#fff;letter-spacing:-.025em}
/* Concrete description for each department */
.flow-desc{margin-top:10px;font-size:.9375rem;line-height:1.5;color:var(--ink-body)}
.fl-js .flow-desc{color:#B4C0CE;max-width:34em}
.fl-js .flow-steps{margin-top:16px}
.fl-js .flow-steps{margin-top:22px;gap:2px;position:relative}
.fl-step{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;width:100%;padding:8px 6px;border:0;border-radius:10px;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.fl-step:hover{background:rgba(255,255,255,.05)}
.fl-step::before{counter-increment:fs;content:counter(fs);grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .8125rem var(--head);color:#8FA3B8;border:1.5px solid rgba(255,255,255,.2);transition:all .35s}
.fl-js .flow-steps b{color:#C9D4E0;font:700 .9688rem var(--head);transition:color .3s}
.fl-js .flow-steps span{grid-column:2;font-size:.875rem;color:#8FA3B8;line-height:1.45;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .45s ease}
.flow-steps li.is-done .fl-step::before{content:"✓";color:#01172E;background:#8DBDF0;border-color:#8DBDF0}
.flow-steps li.is-on .fl-step::before{color:#01172E;background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 5px rgba(252,129,2,.2)}
.flow-steps li.is-on b{color:#fff}
.flow-steps li.is-on span{max-height:5em;opacity:1;margin-top:3px}

/* ---------- Screen (right) ---------- */
.fl-screen{position:relative;border-radius:16px;overflow:hidden;background:#071D38;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 6px rgba(255,255,255,.03),0 0 60px -20px rgba(0,122,231,.5)}
.fl-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;background:#041428;border-bottom:1px solid rgba(255,255,255,.08);font-size:.8125rem}
.fl-bar img{width:18px;height:18px;border-radius:50%}
.fl-bar b{font:800 .8125rem var(--head);letter-spacing:.02em}
.fl-bar span{color:#8FA3B8}
.fl-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.fl-bar i:first-of-type{margin-left:auto}
.fl-item{padding:14px 18px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.fl-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fl-id{font:600 .75rem ui-monospace,SFMono-Regular,Menlo,monospace;color:#8FC2F5}
.fl-title{margin-top:6px;font:700 1rem var(--head);color:#fff}
.fl-owner{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.8125rem;color:#8FA3B8;min-height:24px}
.fl-av-s{width:24px;height:24px;border-radius:50%;background:#1E6FD0;color:#fff;font:700 .625rem var(--head);display:inline-flex;align-items:center;justify-content:center}
.fl-av-none{background:transparent;border:1.5px dashed rgba(255,255,255,.3)}
.fl-view{position:relative;height:262px;margin:14px 18px}
.fl-w{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.fl-w.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease}
.fl-log{border-top:1px solid rgba(255,255,255,.08);padding:8px 18px 10px;height:78px;overflow:hidden;font-size:.75rem;color:#8FA3B8}
.fl-log li{display:flex;gap:10px;padding:2px 0}
.fl-log li:first-child{color:#E6EDF5}
.fl-log time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#5F7690}
.fl-screen.fl-done{box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 0 6px rgba(255,255,255,.03),0 0 70px -16px rgba(34,197,94,.45)}

/* chips */
.fl-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 .75rem var(--body);white-space:nowrap}
.fl-blue{background:rgba(0,122,231,.2);color:#9CCBFA}
.fl-amber{background:rgba(252,129,2,.2);color:#FFB878}
.fl-red{background:rgba(239,68,68,.2);color:#FF9C9C}
.fl-green{background:rgba(34,197,94,.2);color:#7BE6A6}
.fl-mt{margin-top:12px}

/* widget building blocks */
.fl-card{height:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.fl-flat{height:auto}
.fl-h{font:700 .875rem var(--head);color:#fff;margin-bottom:8px}
.fl-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:.8125rem}
.fl-row span{color:#8FA3B8}
.fl-row b{font-weight:600;color:#E6EDF5;text-align:right}
.fl-btn{display:inline-flex;margin-top:12px;padding:7px 14px;border-radius:8px;background:#1E6FD0;color:#fff;font:600 .8125rem var(--body)}
.fl-ok{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#22C55E;flex:0 0 auto;position:relative}
.fl-ok::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #04260F;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fl-split2{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:100%}
.fl-doc{position:relative;background:#F4F6FA;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.fl-doc b{font:800 .8125rem var(--head);color:#01172E;letter-spacing:.04em}
.fl-doc i{height:6px;border-radius:3px;background:#C9D3DE}
.fl-scan{position:absolute;left:0;right:0;top:100%;height:3px;background:var(--orange);box-shadow:0 0 14px 3px rgba(252,129,2,.6);opacity:0}
.fl-input{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(141,189,240,.5);border-radius:8px;background:rgba(0,0,0,.2);font-size:.875rem;margin-bottom:6px}
.fl-mag{width:12px;height:12px;border:2px solid #8FA3B8;border-radius:50%;position:relative;flex:0 0 auto}
.fl-mag::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:#8FA3B8;transform:rotate(45deg)}
.fl-type{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--orange);width:calc(var(--n) * 1ch + 2px)}
.fl-hand{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;height:100%}
.fl-node{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px;display:grid;gap:4px}
.fl-node b{font:700 .9375rem var(--head);color:#fff}
.fl-node span{font-size:.75rem;color:#8FA3B8}
.fl-node .fl-chip{justify-self:start;margin-top:6px}
.fl-node-to{border-color:rgba(252,129,2,.5)}
.fl-wire{position:relative;height:2px;background:rgba(255,255,255,.2);margin:0 6px}
.fl-wire i{position:absolute;top:-4px;left:100%;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px 2px rgba(252,129,2,.6);margin-left:-10px}
.fl-appr .fl-checkrow{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.8125rem;color:#C9D4E0}
.fl-box{width:16px;height:16px;border-radius:4px;border:1.5px solid #8DBDF0;background:#1E6FD0;position:relative}
.fl-box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fl-stamp{position:absolute;right:16px;bottom:16px;padding:6px 14px;border:3px solid #22C55E;border-radius:8px;color:#7BE6A6;font:800 1.125rem var(--head);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-10deg)}
.fl-barrow{display:grid;grid-template-columns:minmax(0,1fr) 1.2fr 36px;align-items:center;gap:10px;font-size:.8125rem;margin-top:10px}
.fl-barrow span{color:#C9D4E0}
.fl-barrow i{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.fl-barrow i b{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#1E6FD0,#8DBDF0);border-radius:4px}
.fl-barrow em{font-style:normal;font-weight:700;color:#fff;text-align:right}
.fl-card > .fl-chip:first-child{margin-bottom:10px}
.fl-mboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.fl-mbox{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 10px;display:grid;gap:4px;background:rgba(0,0,0,.15)}
.fl-mbox span{font-size:.6875rem;color:#8FA3B8;text-transform:uppercase;letter-spacing:.04em}
.fl-mbox b{font-size:.8125rem;color:#fff}
.fl-mbox .fl-ok{position:absolute;top:8px;right:8px}
.fl-flag{background:rgba(239,68,68,.12);border-radius:6px;padding:6px 8px;margin-top:4px;border:0}
.fl-flag b{color:#FF9C9C}
.fl-people{display:flex;gap:16px;margin:4px 0 10px}
.fl-av{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px}
.fl-av i{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .75rem var(--head);font-style:normal;color:#C9D4E0;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2)}
.fl-av em{font:500 .6875rem var(--body);font-style:normal;color:#8FA3B8;white-space:nowrap}
.fl-av.fl-pick i{color:#fff;background:#1E6FD0;border-color:#8DBDF0;box-shadow:0 0 0 5px rgba(0,122,231,.25)}
.fl-av.fl-pick em{color:#fff}
.fl-thread{display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center}
.fl-msg{max-width:80%;padding:10px 12px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.07);font-size:.8125rem;line-height:1.4;color:#E6EDF5}
.fl-msg b{display:block;font:700 .6875rem var(--body);color:#8FC2F5;margin-bottom:2px}
.fl-msg-r{align-self:flex-end;border-radius:12px 12px 4px 12px;background:rgba(0,122,231,.22)}
.fl-sla{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:.75rem;color:#8FA3B8;margin:2px 0 8px}
.fl-sla i{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.fl-sla b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22C55E,#FC8102 70%,#EF4444)}
.fl-sla em{font-style:normal;color:#FF9C9C;font-weight:600}
.fl-table{display:grid;gap:6px;margin-top:2px}
.fl-tr{position:relative;display:grid;grid-template-columns:.7fr 1.4fr 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.04);font-size:.8125rem;color:#C9D4E0}
.fl-tr b{text-align:right;color:#fff;font-weight:600}
.fl-tr-flag{background:rgba(239,68,68,.14);box-shadow:inset 0 0 0 1px rgba(239,68,68,.45)}
.fl-pill{position:absolute;right:10px;top:-9px;padding:2px 8px;border-radius:999px;background:#EF4444;color:#fff;font:700 .625rem var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.fl-tr-new{background:rgba(0,122,231,.16);box-shadow:inset 0 0 0 1px rgba(141,189,240,.45)}
.fl-own{position:relative}
.fl-own s{display:none}
.fl-own u{text-decoration:none;color:#9CCBFA}
.fl-ci{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:.875rem;color:#E6EDF5}
.fl-pair{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin-top:6px}
.fl-link{position:relative;height:2px;background:#22C55E;margin:0 6px;display:flex;justify-content:center;align-items:center}
.fl-link i{display:none}
.fl-link .fl-ok{position:absolute}
.fl-warn{margin-top:12px;padding:12px;border-radius:10px;background:rgba(252,129,2,.14);border:1px solid rgba(252,129,2,.45);font-size:.8125rem;line-height:1.45;color:#FFD9B3}
.fl-warn b{display:block;color:#FFB878;margin-bottom:2px}
.fl-bell{margin:4px 0 8px;padding:12px;border-radius:10px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);font-size:.8125rem;color:#C9F2D8;line-height:1.45}
.fl-bell b{display:block;color:#7BE6A6;margin-bottom:2px}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .fl-tab.is-run .fl-prog b{animation:flProg var(--dur) linear both}
  .fl-paused .fl-tab.is-run .fl-prog b{animation-play-state:paused}
  .fl-w.on .fl-st{animation:flIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .2s + .15s)}
  .fl-w.on .fl-press{animation:flIn .5s both,flPress .5s ease calc(var(--i,0) * .2s + .7s) both}
  .fl-w.on .fl-ok{animation:flPop .4s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i,0) * .2s + .35s)}
  .fl-w.on .fl-scan{animation:flScan 1.5s ease-in-out .1s both}
  .fl-w.on .fl-type{animation:flType .9s steps(10) .4s both,flCaret .7s step-end 1.3s 3}
  .fl-w.on .fl-wire i{animation:flTravel 1.1s ease-in-out .5s both}
  .fl-w.on .fl-box{animation:flTick .3s ease 1.15s both}
  .fl-w.on .fl-stamp{animation:flStamp .45s cubic-bezier(.2,1.4,.4,1) 1.6s both}
  .fl-w.on .fl-barrow i b{animation:flGrow .9s ease both;animation-delay:calc(var(--i,0) * .2s + .4s)}
  .fl-w.on .fl-flag,.fl-w.on .fl-tr-flag{animation:flIn .5s both,flAlarm 1.4s ease .9s 2}
  .fl-w.on .fl-av.fl-pick i{animation:flPick .6s ease 1s both}
  .fl-w.on .fl-sla b{animation:flGrow 1.4s ease .3s both}
  .fl-w.on .fl-up{animation:flIn .5s both,flBump .6s ease 1.4s both}
  .fl-w.on .fl-own u{animation:flIn .4s ease 1.6s both}
  .fl-w.on .fl-link{animation:flLine .7s ease .5s both}
  .fl-status{animation:flPop .35s ease}
  .fl-log li:first-child{animation:flIn .4s ease both}
}
@keyframes flIn{from{opacity:0;transform:translateY(8px)}}
@keyframes flPop{from{transform:scale(0)}}
@keyframes flPress{50%{transform:scale(.94);filter:brightness(1.25)}}
@keyframes flScan{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes flType{from{width:0}}
@keyframes flCaret{50%{border-color:transparent}}
@keyframes flTravel{from{left:0;margin-left:0}}
@keyframes flTick{from{background:transparent}to{background:#1E6FD0}}
@keyframes flStamp{from{opacity:0;transform:rotate(-10deg) scale(1.8)}}
@keyframes flGrow{from{width:0}}
@keyframes flAlarm{50%{box-shadow:inset 0 0 0 1px rgba(239,68,68,.9),0 0 18px rgba(239,68,68,.45)}}
@keyframes flPick{from{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:none}}
@keyframes flBump{40%{transform:translateY(-4px)}}
@keyframes flLine{from{transform:scaleX(0)}}
@keyframes flProg{from{width:var(--from,0%)}to{width:100%}}

/* Reduced motion: no playback, so every step description is shown */
@media (prefers-reduced-motion:reduce){.fl-js .flow-steps span{max-height:none;opacity:1;margin-top:3px}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .fl-stage{grid-template-columns:1fr;gap:22px}
  .fl-screen{max-width:640px;width:100%;margin:0 auto}
}
@media (max-width:640px){
  .fl-js{border-radius:18px;margin-left:-4px;margin-right:-4px}
  .fl-top{flex-wrap:wrap}
  .fl-tn-l{display:none}.fl-tn-s{display:inline}
  .fl-tab{padding:10px 12px 14px;font-size:.875rem}
  .fl-top{flex-direction:column;align-items:flex-end;gap:10px}
  .fl-tabs{width:100%}
  .fl-view{height:282px;margin:12px}
  .fl-split2,.fl-hand,.fl-pair{grid-template-columns:1fr}
  .fl-hand{gap:10px;align-content:center}
  .fl-wire,.fl-link{height:28px;width:2px;margin:0 auto}
  .fl-wire i{left:-4px;top:100%;margin:-10px 0 0}
  .fl-doc{display:none}
  .fl-mboxes{grid-template-columns:1fr;gap:6px}
  .fl-mbox{grid-template-columns:1fr auto;padding:8px 36px 8px 10px}
  .fl-tr{grid-template-columns:.8fr 1.2fr 1fr;font-size:.75rem;padding:7px 8px}
  .fl-barrow{grid-template-columns:1fr 1fr 32px}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  @keyframes flTravel{from{top:0;margin-top:0}}
}