/* Scene 04 · one record, clear responsibility. #s-flow[data-k]: 1 Sales keeps the context (trucking pinned)
   2 Pricing verifies when needed: an expired rate holds the file (.fl-held), a current one releases it (.fl-ok); bypass when Sales already has a valid rate
   3 the decision follows policy: continue by permission, exceptions branch to an approver; every field stays traceable. [data-focus] = role picked with 1–3. */
#s-flow svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#s-flow .fl-rail{position:absolute;inset:0;width:1920px;height:1080px;overflow:visible;pointer-events:none}
#s-flow .fl-rail path{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--io),opacity .5s}
#s-flow .fl-rail .s1,#s-flow .fl-rail .s2{stroke:#8FBAFF;stroke-width:3}
#s-flow .fl-rail .by{stroke:rgba(143,186,255,.55);stroke-width:2;stroke-dasharray:.012 .014;stroke-dashoffset:0;opacity:0}
#s-flow .fl-rail .b1{stroke:#8FBAFF;stroke-width:3}
#s-flow .fl-rail .b2{stroke:var(--amber);stroke-width:2.5}
#s-flow:not([data-k="0"]) .fl-rail .s1{stroke-dashoffset:.5;transition-delay:.3s}
#s-flow:is([data-k="2"],[data-k="3"]) .fl-rail .s1{stroke-dashoffset:0;transition-delay:0s}
#s-flow:is([data-k="2"],[data-k="3"]) .fl-rail .by{opacity:1;transition-delay:2.6s}
#s-flow[data-k="3"] .fl-rail .by{transition-delay:0s}
#s-flow[data-k="3"] .fl-rail .s2{stroke-dashoffset:0;transition-delay:.15s}
#s-flow[data-k="3"] .fl-rail .b1{stroke-dashoffset:0;transition-delay:1s}
#s-flow[data-k="3"] .fl-rail .b2{stroke-dashoffset:0;transition-delay:1.4s}
#s-flow .fl-node{position:absolute;top:322px;width:240px;margin-left:-120px;padding:0;border:0;background:none;color:inherit;font:inherit;display:flex;flex-direction:column;align-items:center;cursor:pointer;opacity:.28;transition:opacity .6s}
#s-flow .fl-node.n1{left:410px}#s-flow .fl-node.n2{left:910px}#s-flow .fl-node.n3{left:1410px}
#s-flow .fl-node small{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8FBAFF}
#s-flow .fl-node.n2 small{color:var(--amber)}
#s-flow .fl-node b{margin-top:4px;font-size:30px;font-weight:700;color:var(--white)}
#s-flow .fl-node i{margin-top:14px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#CFE0FF;background:#0D1B3B;box-shadow:0 0 0 2px rgba(143,186,255,.75);transition:box-shadow .5s,background .5s,color .5s}
#s-flow .fl-node i svg{width:34px;height:34px}
#s-flow .fl-node.n2 i{box-shadow:0 0 0 2px rgba(240,166,58,.75);border:0;outline:2px dashed rgba(240,166,58,.5);outline-offset:6px}
#s-flow:not([data-k="0"]) .fl-node.n1,#s-flow:is([data-k="2"],[data-k="3"]) .fl-node.n2,#s-flow[data-k="3"] .fl-node.n3{opacity:1}
#s-flow[data-k="1"] .fl-node.n1 i,#s-flow[data-k="2"] .fl-node.n2 i,#s-flow[data-k="3"] .fl-node.n3 i{background:rgba(42,99,230,.5);color:#fff;box-shadow:0 0 0 2px #AFCBFF,0 0 30px rgba(127,176,255,.6)}
#s-flow[data-k="2"] .fl-node.n2 i{background:rgba(240,166,58,.25);box-shadow:0 0 0 2px var(--amber),0 0 30px rgba(240,166,58,.45)}
#s-flow .fl-by{position:absolute;left:660px;top:518px;width:600px;margin:0;text-align:center;font-size:17px;color:#9CC3FF;opacity:0;transition:opacity .5s}
#s-flow:is([data-k="2"],[data-k="3"]) .fl-by{opacity:1;transition-delay:2.8s}
#s-flow[data-k="3"] .fl-by{transition-delay:0s}
#s-flow .fl-br{position:absolute;left:1540px;margin:0;display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .6s var(--out)}
#s-flow .fl-br i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
#s-flow .fl-br i svg{width:20px;height:20px}
#s-flow .fl-br.r1{top:371px;color:var(--white)}#s-flow .fl-br.r1 i{background:rgba(42,99,230,.5);color:#fff;box-shadow:0 0 0 1.5px #9CC3FF}
#s-flow .fl-br.r2{top:475px;color:#F3C784}#s-flow .fl-br.r2 i{color:#FFD08A;border:1.5px dashed var(--amber)}
#s-flow[data-k="3"] .fl-br{opacity:1;transform:none}
#s-flow[data-k="3"] .fl-br.r1{transition-delay:1.4s}#s-flow[data-k="3"] .fl-br.r2{transition-delay:1.8s}
/* the record */
#s-flow .fl-rec{position:absolute;left:160px;top:580px;width:1500px;height:310px;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);border-radius:24px;border:2px solid rgba(127,176,255,.45);background:linear-gradient(180deg,rgba(22,40,80,.75),rgba(12,24,52,.75));box-shadow:0 30px 70px -30px rgba(0,0,0,.75);opacity:0;transform:translateY(20px);transition:opacity .6s var(--out),transform .9s var(--out)}
#s-flow:not([data-k="0"]) .fl-rec{opacity:1;transform:none;transition-delay:.4s}
#s-flow .fl-tag{position:absolute;left:30px;top:-15px;padding:0 12px;background:var(--navy);font-size:17px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9CC3FF;white-space:nowrap}
#s-flow .fl-col{padding:30px 28px 0;border-left:1px solid rgba(142,163,192,.18);opacity:.22;transition:opacity .6s}
#s-flow .fl-col.c1{border-left:0}
#s-flow .fl-col h4{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FBAFF}
#s-flow .fl-col.c2 h4{color:var(--amber)}
#s-flow:not([data-k="0"]) .fl-col.c1,#s-flow:is([data-k="2"],[data-k="3"]) .fl-col.c2,#s-flow[data-k="3"] .fl-col.c3{opacity:1}
#s-flow .fl-fi{position:relative;display:grid;grid-template-columns:40px 1fr 26px;grid-template-rows:auto auto;column-gap:12px;align-items:center;margin:0;padding:10px 0;border-top:1px solid rgba(142,163,192,.14)}
#s-flow .fl-fi i{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(127,176,255,.12);color:#AFCBFF}
#s-flow .fl-fi i svg{width:22px;height:22px}
#s-flow .fl-fi b{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8EA3C0}
#s-flow .fl-fi span{grid-column:2;font-size:19px;color:var(--white);line-height:1.3}
#s-flow .fl-fi em{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#0B1736;background:#8FBAFF;transform:scale(0);transition:transform .45s var(--out)}
#s-flow .fl-fi em svg{width:16px;height:16px;stroke-width:2.6}
#s-flow .fl-fi.pin span{color:#F3C784;font-weight:600}
#s-flow .fl-fi.pin i{background:rgba(240,166,58,.18);color:#FFD08A;box-shadow:0 0 0 1.5px rgba(240,166,58,.6)}
#s-flow:not([data-k="0"]) .fl-col.c1 em{transform:none}
#s-flow[data-k="1"] .fl-col.c1 .fl-fi:nth-of-type(1) em{transition-delay:1s}#s-flow[data-k="1"] .fl-col.c1 .fl-fi:nth-of-type(2) em{transition-delay:1.4s}#s-flow[data-k="1"] .fl-col.c1 .fl-fi:nth-of-type(3) em{transition-delay:1.8s}
#s-flow:is([data-k="2"],[data-k="3"]) .fl-col.c2 .fl-fi:not(.hold) em{transform:none}
#s-flow[data-k="2"] .fl-col.c2 .fl-fi:nth-of-type(1) em{transition-delay:.7s}#s-flow[data-k="2"] .fl-col.c2 .fl-fi:nth-of-type(3) em{transition-delay:1s}
#s-flow .fl-fi.hold u{text-decoration:none;display:none}
#s-flow .fl-fi.hold .v2{display:inline}
#s-flow.fl-held .fl-fi.hold .v1{display:inline;color:#F3C784}#s-flow.fl-held .fl-fi.hold .v2{display:none}
#s-flow.fl-held .fl-fi.hold i{background:rgba(240,166,58,.18);color:#FFD08A;box-shadow:0 0 0 1.5px var(--amber)}
#s-flow.fl-held .fl-fi.hold{background:linear-gradient(90deg,rgba(240,166,58,.1),transparent)}
#s-flow:is([data-k="2"],[data-k="3"]):not(.fl-held) .fl-fi.hold em{transform:none}
#s-flow[data-k="3"] .fl-col.c3 em{transform:none}
#s-flow[data-k="3"] .fl-col.c3 .fl-fi:nth-of-type(1) em{transition-delay:.8s}#s-flow[data-k="3"] .fl-col.c3 .fl-fi:nth-of-type(2) em{transition-delay:1.2s}#s-flow[data-k="3"] .fl-col.c3 .fl-fi:nth-of-type(3) em{transition-delay:1.6s}
#s-flow .fl-end{position:absolute;left:160px;width:1500px;top:920px;margin:0;text-align:center;font-size:36px;font-weight:600;color:var(--white);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .8s var(--out)}
#s-flow .fl-end b{color:#9CC3FF}
#s-flow .fl-note{position:absolute;left:160px;width:1500px;top:985px;margin:0;text-align:center;font-size:17px;color:var(--steel);opacity:0;transition:opacity .6s}
#s-flow[data-k="3"] :is(.fl-end,.fl-note){opacity:1;transform:none;transition-delay:2s}
/* role focus (keys 1–3) */
#s-flow[data-focus="0"] .fl-col:not(.c1),#s-flow[data-focus="1"] .fl-col:not(.c2),#s-flow[data-focus="2"] .fl-col:not(.c3){opacity:.25}
#s-flow[data-focus="0"] .fl-node:not(.n1),#s-flow[data-focus="1"] .fl-node:not(.n2),#s-flow[data-focus="2"] .fl-node:not(.n3){opacity:.3}

/* ---------- motion layer ---------- */
/* the travelling record token: Sales → (held before Pricing on an expired rate) → past Pricing → decision → main branch */
#s-flow .fl-token{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:11px;background:rgba(14,30,66,.96);border:1.5px solid #9CC3FF;box-shadow:0 0 24px rgba(127,176,255,.55),0 10px 24px -8px rgba(0,0,0,.8);color:#fff;font-size:15px;font-weight:700;letter-spacing:.08em;transform:translate(410px,440px) translate(-50%,-50%) scale(.6);opacity:0;transition:transform 1.1s cubic-bezier(.65,0,.25,1),opacity .4s,border-color .4s,box-shadow .4s;z-index:3}
#s-flow .fl-token svg{width:18px;height:18px}
#s-flow[data-k="1"] .fl-token{opacity:1;transform:translate(560px,440px) translate(-50%,-50%);transition-delay:.5s}
#s-flow[data-k="2"] .fl-token{opacity:1;transform:translate(1060px,440px) translate(-50%,-50%)}
#s-flow.fl-held[data-k="2"] .fl-token{transform:translate(800px,440px) translate(-50%,-50%);border-color:var(--amber);box-shadow:0 0 26px rgba(240,166,58,.7);animation:flHold 1s ease-in-out .9s infinite}
#s-flow[data-k="3"] .fl-token{opacity:1;transform:translate(1610px,388px) translate(-50%,-50%) scale(.001);transition:transform 1.6s cubic-bezier(.65,0,.25,1),opacity .4s 1.2s}
@keyframes flHold{0%,100%{box-shadow:0 0 18px rgba(240,166,58,.45)}50%{box-shadow:0 0 34px rgba(240,166,58,.95)}}
/* a faint ghost takes the exception branch once, to show it exists but is not the default */
#s-flow .fl-ghost{position:absolute;left:0;top:0;padding:5px 10px;border-radius:9px;border:1.5px dashed var(--amber);color:#F3C784;font-size:13px;font-weight:700;opacity:0;offset-path:path("M1410 440C1450 460 1478 480 1500 488S1530 492 1540 492");offset-rotate:0deg}
#s-flow[data-k="3"] .fl-ghost{animation:flGhost 1.6s cubic-bezier(.5,0,.3,1) 1.5s both}
@keyframes flGhost{0%{offset-distance:0%;opacity:0}25%{opacity:.85}100%{offset-distance:100%;opacity:0}}
/* light pulses that run along each segment as it is used */
#s-flow .fl-pulse{position:absolute;left:0;top:0;width:90px;height:6px;margin:-3px 0 0 -45px;border-radius:3px;background:linear-gradient(90deg,transparent,#E3EEFF,transparent);filter:drop-shadow(0 0 8px #8FBAFF);opacity:0;offset-rotate:auto}
#s-flow .fl-pulse.p1{offset-path:path("M410 440H910")}
#s-flow .fl-pulse.p2{offset-path:path("M910 440H1410")}
#s-flow .fl-pulse.p3{offset-path:path("M1410 440C1450 420 1478 400 1500 392S1530 388 1540 388")}
#s-flow .fl-pulse.p4{offset-path:path("M440 470C600 535 1220 535 1380 470");background:linear-gradient(90deg,transparent,#9CC3FF,transparent);height:4px}
#s-flow[data-k="1"] .fl-pulse.p1{animation:flRun 1.2s ease-in-out .3s both}
#s-flow[data-k="2"] .fl-pulse.p1{animation:flRun 1s ease-in-out both}
#s-flow[data-k="2"] .fl-pulse.p4{animation:flRun 1.8s ease-in-out 2.9s both}
#s-flow[data-k="3"] .fl-pulse.p2{animation:flRun 1.1s ease-in-out .1s both}
#s-flow[data-k="3"] .fl-pulse.p3{animation:flRun .9s ease-in-out 1.1s both}
@keyframes flRun{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
/* data drops from the active role into its column, one field at a time */
#s-flow .fl-fi{opacity:0;transform:translateY(-26px) scale(.97);transition:opacity .45s var(--out),transform .6s cubic-bezier(.2,1.3,.4,1)}
#s-flow:not([data-k="0"]) .fl-col.c1 .fl-fi,#s-flow:is([data-k="2"],[data-k="3"]) .fl-col.c2 .fl-fi,#s-flow[data-k="3"] .fl-col.c3 .fl-fi{opacity:1;transform:none}
#s-flow[data-k="1"] .fl-col.c1 .fl-fi:nth-of-type(1){transition-delay:.8s}#s-flow[data-k="1"] .fl-col.c1 .fl-fi:nth-of-type(2){transition-delay:1.15s}#s-flow[data-k="1"] .fl-col.c1 .fl-fi:nth-of-type(3){transition-delay:1.5s}
#s-flow[data-k="2"] .fl-col.c2 .fl-fi:nth-of-type(1){transition-delay:.5s}#s-flow[data-k="2"] .fl-col.c2 .fl-fi:nth-of-type(2){transition-delay:.85s}#s-flow[data-k="2"] .fl-col.c2 .fl-fi:nth-of-type(3){transition-delay:1.2s}
#s-flow[data-k="3"] .fl-col.c3 .fl-fi:nth-of-type(1){transition-delay:.6s}#s-flow[data-k="3"] .fl-col.c3 .fl-fi:nth-of-type(2){transition-delay:.95s}#s-flow[data-k="3"] .fl-col.c3 .fl-fi:nth-of-type(3){transition-delay:1.3s}
#s-flow .fl-col{opacity:1}
#s-flow .fl-col h4{opacity:.35;transition:opacity .5s}
#s-flow:not([data-k="0"]) .fl-col.c1 h4,#s-flow:is([data-k="2"],[data-k="3"]) .fl-col.c2 h4,#s-flow[data-k="3"] .fl-col.c3 h4{opacity:1}
/* the held field pulses amber, then the confirmed value flips in */
#s-flow.fl-held .fl-fi.hold{animation:flRow 1s ease-in-out infinite}
@keyframes flRow{0%,100%{box-shadow:inset 0 0 0 1px rgba(240,166,58,.4)}50%{box-shadow:inset 0 0 0 1px var(--amber)}}
#s-flow .fl-fi.hold .v2{display:inline-block;transform-origin:50% 0;animation:flFlip .6s cubic-bezier(.2,1.2,.4,1)}
@keyframes flFlip{0%{transform:rotateX(90deg);opacity:0;color:#9CF0C0}100%{transform:none;opacity:1}}
/* closing: a light sweeps once around the record */
#s-flow .fl-rec::after{content:"";position:absolute;inset:-2px;border-radius:24px;padding:2px;background:conic-gradient(from var(--fla,0deg),transparent 0 70%,#CFE0FF 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none}
@property --fla{syntax:"<angle>";inherits:false;initial-value:0deg}
#s-flow[data-k="3"] .fl-rec::after{animation:flSweep 1.8s ease-in-out 1.7s both}
@keyframes flSweep{0%{--fla:0deg;opacity:0}15%{opacity:1}85%{opacity:1}100%{--fla:360deg;opacity:0}}
#s-flow.kb-cut .fl-pulse,#s-flow.kb-cut .fl-ghost,#s-flow.kb-cut .fl-rec::after{animation:none!important;opacity:0}
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-flow *,body.calm #s-flow .fl-rec::after{animation:none!important}