/* Scene 04 · "Mỗi con số phải đi cùng căn cứ sử dụng." — the traceable quotation.
   Sources on the left (the stored email, then one approved rate source), one record on the right. One event per beat:
   1 PRESERVE: the trucking phrase lifts out of the email into the scope field; Sales has checked it; a thread stays to the source
   2 QUALIFY: the rate source is matched against route, equipment, ETD inside its validity and who it applies to; its code lands
     on the freight line and the number appears with it ("Thử: ETD 12/11" shows the other case: no suitable rate, no number)
   3 DECIDE: within policy Sales continues; the record becomes a draft (not sent), every thread kept.
   Numbers are an illustrative case. */
#s-flow :is(.fz-tag,.tq-mail,.tq-rate,.tq-th,.tq-doc,.tq-fly,.fz-end){position:absolute;margin:0}
#s-flow .fz-tag{right:160px;top:112px;display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:500;color:var(--amber);background:var(--amber-dim);padding:6px 15px 7px;border-radius:999px}
#s-flow .fz-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---- source 1 · the stored email ---- */
#s-flow .tq-mail{left:160px;top:248px;width:520px;box-sizing:border-box;padding:20px 28px 22px;border-radius:20px;background:#F3F6FA;color:#0E1727;
  box-shadow:var(--shadow),0 30px 70px -30px rgba(0,0,0,.7);opacity:0;translate:-20px 0;transition:opacity .5s var(--out),translate .7s var(--out),opacity .5s}
#s-flow .tq-mail header{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #DCE3EC}
#s-flow .tq-mail .av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:17px;color:#fff;background:linear-gradient(135deg,#3C6FE0,#7FB0FF)}
#s-flow .tq-mail header b{display:block;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5B6B82}
#s-flow .tq-mail header span{display:block;font-size:19px;font-weight:600}
#s-flow .tq-mail .l{margin:10px 0 0;font-size:24px;line-height:1.38;font-weight:500;color:#33445C}
#s-flow .tq-mail :is(.m-route,.m-eq){color:#0E1727;font-weight:600}
#s-flow .tq-mail .m-tr{color:#0E1727;padding:0 4px;margin:0 -4px;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(transparent 52%,rgba(240,166,58,.5) 52%) no-repeat 0 0/0% 100%;transition:background-size .4s var(--io)}

/* ---- source 2 · one approved rate ---- */
#s-flow .tq-rate{left:160px;top:560px;width:520px;height:288px;box-sizing:border-box;padding:18px 28px;border-radius:20px;background:linear-gradient(180deg,rgba(22,40,80,.9),rgba(12,24,52,.9));
  border:1.5px solid rgba(127,176,255,.4);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);opacity:0;translate:-20px 18px;transition:opacity .5s var(--out),translate .7s var(--out),border-color .4s}
#s-flow .tq-rate header{display:flex;align-items:baseline;gap:14px}
#s-flow .tq-rate header b{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9EB2DC}
#s-flow .tq-rate .code{font-size:25px;font-weight:700;color:#8FBAFF;letter-spacing:.02em}
#s-flow .tq-rate header em{margin-left:auto;font-style:normal;font-size:15px;font-weight:700;color:#8FE3B4;border:1.5px solid rgba(143,227,180,.5);padding:3px 10px;border-radius:999px}
#s-flow .tq-rate .tq-rr{margin:12px 0 0;font-size:22px;font-weight:600;color:var(--white)}
#s-flow .tq-rate .vb{position:relative;margin-top:26px;width:464px;height:56px}
#s-flow .tq-rate .vb .bar{position:absolute;left:0;top:10px;width:69%;height:14px;border-radius:7px;background:#4F7FE8}
#s-flow .tq-rate .vb::before{content:"";position:absolute;left:0;right:0;top:16px;height:2px;background:rgba(158,178,220,.25)}
#s-flow .tq-rate .vb span{position:absolute;top:32px;font-size:15px;font-weight:600;color:#9EB2DC}
#s-flow .tq-rate .vb .a0{left:0}#s-flow .tq-rate .vb .a1{left:69%;translate:-100% 0}
#s-flow .tq-rate .vb .etd{position:absolute;left:60%;top:-4px;width:4px;height:42px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8);transition:left .55s var(--io),background .3s}
#s-flow .tq-rate .vb .etd b{position:absolute;left:50%;top:-26px;translate:-50% 0;padding:1px 8px;border-radius:6px;background:#fff;color:#0B1736;font-size:14px;font-weight:700}
#s-flow .tq-rate .ap{margin:4px 0 0;font-size:19px;font-weight:600;color:#C6D3E8}
#s-flow .tq-alt{position:absolute;right:22px;bottom:18px;border:1.5px solid rgba(158,178,220,.45);background:none;color:#C6D3E8;font:inherit;font-size:15px;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .3s}
#s-flow[data-k="2"] .tq-alt{opacity:.85}
#s-flow.tq-x .tq-alt{border-color:rgba(255,159,143,.7);color:#FFC2B8}

/* ---- matched pairs (record ↔ rate) ---- */
#s-flow :is(.k-route,.k-eq,.k-ap,.d-route,.d-eq,.d-etd,.d-ap){border-radius:6px;transition:box-shadow .35s,background-color .35s,color .35s}
#s-flow:is([data-k="2"],[data-k="3"]) :is(.k-route,.k-eq,.k-ap){box-shadow:0 2px 0 #7FB0FF}
#s-flow:is([data-k="2"],[data-k="3"]) :is(.d-route){box-shadow:0 2px 0 #2A63E6}
#s-flow:is([data-k="2"],[data-k="3"]) :is(.d-eq,.d-etd,.d-ap){background-color:#E2EAFB;border-color:#9DB8F2!important;color:#1E4FD6}
#s-flow[data-k="2"] :is(.k-route,.d-route){transition-delay:.55s}#s-flow[data-k="2"] :is(.k-eq,.d-eq){transition-delay:.75s}
#s-flow[data-k="2"] .d-etd{transition-delay:.95s}#s-flow[data-k="2"] :is(.k-ap,.d-ap){transition-delay:1.15s}
#s-flow[data-k="2"] .vb .etd{animation:tqPing .6s ease-out .95s}
@keyframes tqPing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
#s-flow.tq-x .vb .etd{left:93%;background:#FF9F8F}
#s-flow.tq-x .vb::after{content:"";position:absolute;left:69%;width:24%;top:10px;height:14px;border-radius:0 7px 7px 0;background:repeating-linear-gradient(135deg,rgba(255,159,143,.55) 0 4px,transparent 4px 8px)}
#s-flow.tq-x:is([data-k="2"],[data-k="3"]) .d-etd{background-color:#FBE1D3!important;color:#8A3B16!important;border-color:#F2B49B!important}

/* ---- the record ---- */
#s-flow .tq-doc{left:820px;top:236px;width:940px;height:526px;box-sizing:border-box;border-radius:24px;background:#F6F8FC;color:#0E1727;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(190,208,235,.12),0 50px 110px -30px rgba(0,0,0,.8);opacity:0;translate:24px 0;transition:opacity .5s var(--out),translate .8s var(--out)}
#s-flow.cg-wait .tq-doc{opacity:.001!important;transition:none!important}
#s-flow .tq-doc header{position:relative;display:flex;align-items:center;justify-content:space-between;height:96px;padding:0 34px;border-bottom:1px solid #DCE3EC}
#s-flow .tq-doc .kk{position:relative;display:block;height:20px;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5B6B82}
#s-flow .tq-doc .kk span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .35s}
#s-flow .tq-doc .k2{opacity:0;color:#1E4FD6}
#s-flow .tq-doc header strong{display:block;margin-top:6px;font-size:25px;font-weight:700}
#s-flow .tq-doc .tq-pill{position:relative;font-style:normal;font-size:16px;font-weight:700;height:32px;min-width:250px}
#s-flow .tq-doc .tq-pill span{position:absolute;right:0;top:0;white-space:nowrap;padding:5px 14px;border-radius:999px;transition:opacity .35s}
#s-flow .tq-doc .p1{color:#33445C;background:#E4EAF2}
#s-flow .tq-doc .p2{color:#7A4A08;background:#FCE3B8;opacity:0}
#s-flow .tq-doc .p3{color:#8A3B16;background:#FBE1D3;opacity:0}
#s-flow .tq-doc .meta{margin:0;height:60px;display:flex;align-items:center;gap:12px;padding:0 34px;border-bottom:1px solid #E4EAF2}
#s-flow .tq-doc .meta span{font-size:18px;font-weight:600;color:#33445C;padding:5px 12px;border-radius:8px;border:1.5px solid #DCE3EC}
#s-flow .tq-doc .ln{position:relative;height:104px;box-sizing:border-box;padding:16px 34px 0;border-bottom:1px solid #E4EAF2;transition:background-color .45s}
#s-flow .tq-doc .ln>span{display:block;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5B6B82}
#s-flow .tq-doc .ln>b{position:absolute;left:34px;top:44px;font-size:27px;font-weight:700;white-space:nowrap;opacity:0;translate:0 8px;transition:opacity .35s,translate .5s var(--out)}
#s-flow .tq-doc .ln>.v0{color:#9AA6B8;font-style:italic;font-weight:600;opacity:1;translate:0 0}
#s-flow .tq-doc .l1>.v1{color:#7A4A08}
#s-flow .tq-doc .l2>.v1{top:36px;font-size:42px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#s-flow .tq-doc .ln>.v2{color:#B5462A;font-size:24px}
#s-flow .tq-doc .ln>em{position:absolute;right:34px;top:14px;font-style:normal;font-size:15px;font-weight:700;padding:4px 11px;border-radius:999px;opacity:0;transition:opacity .35s}
#s-flow .tq-doc .l1>em{color:#7A4A08;background:#FCE3B8}
#s-flow .tq-doc .l2>em{color:#1E4FD6;background:#E2EAFB}
#s-flow .tq-doc .ln>.an{position:absolute;left:-1px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;opacity:0;transition:opacity .3s}
#s-flow .tq-doc .l1>.an{background:#F0A63A}#s-flow .tq-doc .l2>.an{background:#2A63E6}
#s-flow .tq-doc .l3{border-bottom:0}
#s-flow .tq-doc .l3>.v1{color:#0E1727;font-size:25px}
#s-flow .tq-doc .l3>small{position:absolute;left:34px;top:78px;font-size:16px;font-weight:600;color:#8A97A9;opacity:0;transition:opacity .35s}
#s-flow .tq-doc .ft{position:absolute;left:0;right:0;bottom:0;margin:0;height:58px;display:flex;align-items:center;padding:0 34px;font-size:17px;font-weight:600;color:#1E4FD6;background:#EDF2FC;border-top:1px solid #DCE3EC;opacity:0;transition:opacity .4s}
#s-flow .tq-doc .sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-140%) skewX(-16deg);opacity:0}

/* ---- threads back to the sources, and the two things that travel ---- */
#s-flow .tq-th{left:0;top:0;width:1920px;height:1080px;overflow:visible;pointer-events:none;z-index:3}
#s-flow .tq-th path{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--io),opacity .35s}
#s-flow .tq-th .th-a{stroke:#F0A63A;stroke-width:3;filter:drop-shadow(0 0 6px rgba(240,166,58,.65))}
#s-flow .tq-th .th-b{stroke:#7FB0FF;stroke-width:3;filter:drop-shadow(0 0 6px rgba(127,176,255,.65))}
#s-flow .tq-fly{left:0;top:0;z-index:5;white-space:nowrap;font-size:22px;font-weight:700;padding:6px 14px;border-radius:12px;opacity:0;pointer-events:none}
#s-flow .f-tr{color:#7A4A08;background:#FFE3B5;box-shadow:0 0 0 2px #F0A63A,0 18px 34px -14px rgba(0,0,0,.6)}
#s-flow .f-code{color:#fff;background:#2A63E6;box-shadow:0 0 0 2px #AFCBFF,0 18px 34px -14px rgba(0,0,0,.6)}
#s-flow .fz-end{left:160px;top:868px;font-size:42px;line-height:1.15;font-weight:700;color:var(--white);opacity:0;translate:0 14px;transition:opacity .55s var(--out),translate .8s var(--out)}

/* ================= states ================= */
#s-flow:not([data-k="0"]) :is(.tq-mail,.tq-doc){opacity:1;translate:0 0}
#s-flow[data-k="1"] .tq-doc{transition-delay:.12s}
#s-flow:not([data-k="0"]) .tq-mail .m-tr{background-size:100% 100%}
#s-flow[data-k="1"] .tq-mail .m-tr{transition-delay:.7s}
/* 1 · the condition is kept */
#s-flow:not([data-k="0"]) .tq-th .th-a{stroke-dashoffset:0}
#s-flow[data-k="1"] .tq-th .th-a{transition-delay:1.25s}
#s-flow:not([data-k="0"]) .l1>.v0{opacity:0}
#s-flow:not([data-k="0"]) .l1>:is(.v1,em,.an){opacity:1;translate:0 0}
#s-flow[data-k="1"] .l1>.v0{transition-delay:1.75s}#s-flow[data-k="1"] .l1>.v1{transition-delay:1.8s}#s-flow[data-k="1"] .l1>:is(em,.an){transition-delay:2s}
#s-flow:not([data-k="0"]) .l1{background-color:rgba(240,166,58,.08)}
#s-flow[data-k="1"] .l1{transition-delay:1.8s}
/* 2 · the price is qualified, then it appears with its basis */
#s-flow:is([data-k="2"],[data-k="3"]) .tq-rate{opacity:1;translate:0 0}
#s-flow:is([data-k="2"],[data-k="3"]):not(.tq-x) .tq-th .th-b{stroke-dashoffset:0}
#s-flow[data-k="2"] .tq-th .th-b{transition-delay:1.6s}
#s-flow:is([data-k="2"],[data-k="3"]) .l2>.v0{opacity:0}
#s-flow:is([data-k="2"],[data-k="3"]):not(.tq-x) .l2>:is(.v1,em,.an){opacity:1;translate:0 0}
#s-flow:is([data-k="2"],[data-k="3"]).tq-x .l2>.v2{opacity:1;translate:0 0}
#s-flow[data-k="2"] .l2>.v0{transition-delay:2s}#s-flow[data-k="2"] .l2>.v1{transition-delay:2.05s}#s-flow[data-k="2"] .l2>:is(em,.an){transition-delay:2.2s}
#s-flow:is([data-k="2"],[data-k="3"]).tq-x .l2{background-color:rgba(224,88,79,.07)}
#s-flow:is([data-k="2"],[data-k="3"]).tq-x .tq-doc .p1{opacity:0}#s-flow:is([data-k="2"],[data-k="3"]).tq-x .tq-doc .p3{opacity:1}
/* 3 · within policy Sales continues; the record becomes a draft and keeps every thread */
#s-flow[data-k="3"]:not(.tq-x) .l3>.v1,#s-flow[data-k="3"].tq-x .l3>.v2{opacity:1;translate:0 0;transition-delay:.15s}
#s-flow[data-k="3"]:not(.tq-x) .l3>small{opacity:1;transition-delay:.45s}
#s-flow[data-k="3"]:not(.tq-x) .tq-doc :is(.k1,.p1){opacity:0;transition-delay:.7s}
#s-flow[data-k="3"]:not(.tq-x) .tq-doc :is(.k2,.p2){opacity:1;transition-delay:.7s}
#s-flow[data-k="3"]:not(.tq-x) .tq-doc .ft{opacity:1;transition-delay:1.1s}
#s-flow[data-k="3"]:not(.tq-x) .tq-doc .sweep{animation:tqSweep .9s cubic-bezier(.4,0,.2,1) .7s}
@keyframes tqSweep{0%{opacity:1;transform:translateX(-140%) skewX(-16deg)}100%{opacity:1;transform:translateX(560%) skewX(-16deg)}}
#s-flow[data-k="3"]:not(.tq-x) .tq-th path{animation:tqPulse 1s ease-out .8s}
@keyframes tqPulse{0%{stroke-width:3}40%{stroke-width:6}100%{stroke-width:3}}
#s-flow[data-k="3"]:not(.tq-x) :is(.tq-mail,.tq-rate){opacity:.75}
#s-flow[data-k="3"] .fz-end{opacity:1;translate:0 0;transition-delay:1.3s}
#s-flow:not([data-k="2"]) .tq-alt{pointer-events:none}
#s-flow.tq-now *{transition-delay:0s!important}   /* the presenter flips the case: it answers at once */
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-flow *{transition:none!important;animation:none!important}
.dm-shot{width:1440px;height:800px;border-radius:16px;background:url(../img/demo-poster.jpg) -120px -120px/1920px 1080px no-repeat;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}

/* where the rate source comes from: Excel rate sheets and carrier emails, normalised, approved by Pricing (report 3.2.1) */
#s-flow .tq-prov{position:absolute;left:28px;right:22px;bottom:16px;margin:0;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#C6D3E8;
  padding-top:10px;border-top:1px solid rgba(158,178,220,.25);transition:color .4s}
#s-flow .tq-prov i{flex:none;width:16px;height:12px;border:1.5px solid currentColor}
#s-flow .tq-prov .xl{background:linear-gradient(currentColor,currentColor) 50% 0/1.5px 100% no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat}
#s-flow .tq-prov .ml{background:linear-gradient(35deg,transparent 46%,currentColor 48%,currentColor 54%,transparent 56%) 0 0/50% 100% no-repeat,linear-gradient(-35deg,transparent 46%,currentColor 48%,currentColor 54%,transparent 56%) 100% 0/50% 100% no-repeat}
#s-flow[data-k="2"] .tq-prov{color:#FFD08A;transition-delay:.3s}
#s-flow .tq-rate .ap{margin-top:0}

/* report case (PL.7): the long rate-sheet code stays on one line */
#s-flow .tq-rate .code{font-size:21px;white-space:nowrap}
#s-flow .tq-rate header em{white-space:nowrap}