/* Scene upgrade (21/10): flow — layout and looks on top of the shared material (up-material.css).
   04 "Giải pháp NEXQUOTE" is the AFTER answer to 02: the same dark desktop, three real windows, nothing retyped. The NEXQUOTE window
   (the record, where 03's case card lands: 820, 236, 940 wide) holds the draft; the stored email and the rate repository sit beside it.
   Each value lands once (app.js flies the chip) and keeps its thread: amber = the trucking condition, blue = the rate source.
   Text ≥ 20 px. Motion: transform / opacity only (the two threads draw with stroke-dashoffset, as in 02). */

/* ---------------- the desktop ---------------- */
#s-flow .fq-desk{position:absolute;left:120px;top:204px;width:1680px;height:736px;border-radius:18px;overflow:hidden;pointer-events:none;background:
  radial-gradient(1100px 700px at 18% 12%,rgba(120,150,210,.17),rgba(120,150,210,0) 70%),
  radial-gradient(1200px 800px at 86% 96%,rgba(70,96,160,.15),rgba(70,96,160,0) 70%),
  linear-gradient(160deg,#25365A 0,#1A2846 45%,#131E36 100%);
  box-shadow:inset 0 0 0 10px #0B111E,inset 0 0 0 12px rgba(160,180,215,.18),0 50px 110px -40px rgba(0,0,0,.85)}
#s-flow .fq-desk::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 48%,rgba(4,10,30,0) 55%,rgba(4,10,30,.45) 100%)}
#s-flow .fq-desk .fq-glass{position:absolute;inset:0;z-index:1;background:linear-gradient(118deg,rgba(255,196,128,.08) 0,rgba(255,196,128,.03) 24%,rgba(255,196,128,0) 42%),
  linear-gradient(118deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.025) 64%,rgba(255,255,255,0) 70%)}

/* ---------------- title bars ---------------- */
#s-flow .fq-tb{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;box-sizing:border-box;flex:none}
#s-flow .fq-tb>i{width:12px;height:12px;border-radius:50%;flex:none}
#s-flow .fq-tb>b{margin-left:10px;font-size:21px;font-weight:600;white-space:nowrap;letter-spacing:0;text-transform:none}
#s-flow .fq-tb.lt{background:#E1E6ED linear-gradient(#ECEFF4,#E1E6ED);border-bottom:1px solid #C6CEDA}
#s-flow .fq-tb.lt>i{background:#B9C2CF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#s-flow .fq-tb.lt>b{color:#253042}
#s-flow .fq-tb.dk{background:#15223F linear-gradient(#1B2A4C,#15223F);border-bottom:1px solid rgba(127,176,255,.22)}
#s-flow .fq-tb.dk>i{background:#4A5B7D}
#s-flow .fq-tb.dk>b{color:#DCE6F7}
/* the product's own bar: brand mark and wordmark on night navy */
#s-flow .fq-app{height:52px;background:#101C38 linear-gradient(#17284B,#101C38);border-bottom:1px solid rgba(127,176,255,.3)}
#s-flow .fq-app>i{background:#4A5B7D}
#s-flow .fq-app .fq-mk{width:22px;height:23px;margin-left:12px;flex:none}
#s-flow .fq-app>b{margin-left:4px;font-size:23px;font-weight:700;color:#F2F6FD;letter-spacing:-.01em}
#s-flow .fq-app>b em{font-style:normal;color:#9CC3FF}

/* ---------------- source 1 · the stored email (a light window) ---------------- */
#s-flow .tq-mail{left:160px;top:230px;width:540px;padding:0 0 20px;border-radius:12px;background:#F5F7FA;color:#18212F;overflow:hidden;
  box-shadow:0 0 0 1px rgba(20,32,56,.55),0 2px 3px rgba(0,0,0,.35),0 18px 34px -12px rgba(0,0,0,.6),0 44px 70px -30px rgba(0,0,0,.5);
  translate:-14px 10px;scale:.975;transform-origin:0 0;transition:opacity .5s var(--out),translate .8s var(--out),scale .8s var(--out)}
#s-flow .tq-mail header{margin:0 26px;padding:12px 0 10px;gap:14px}
#s-flow .tq-mail .av{width:42px;height:42px;font-size:22px;background:#2A5BCC linear-gradient(135deg,#2A5BCC,#4F82EE)}
#s-flow .tq-mail header b{font-size:20px;letter-spacing:.1em;color:#4A5A72}
#s-flow .tq-mail header span{font-size:22px;color:#18212F}
#s-flow .tq-mail .l{margin:9px 26px 0;font-size:25px;color:#3E4C62}
#s-flow .tq-mail :is(.m-route,.m-eq){color:#18212F}
#s-flow:not([data-k="0"]) .tq-mail{scale:1}

/* ---------------- source 2 · the rate repository (a dark window) ---------------- */
#s-flow .tq-rate{left:160px;top:560px;width:540px;height:356px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#0F1A33 linear-gradient(180deg,#132143,#0E1830);
  box-shadow:0 0 0 1px rgba(127,176,255,.3),0 2px 3px rgba(0,0,0,.45),0 18px 34px -12px rgba(0,0,0,.7),0 44px 70px -30px rgba(0,0,0,.6);
  translate:-14px 14px;scale:.97;transform-origin:0 0;transition:opacity .5s var(--out),translate .8s var(--out),scale .8s var(--out)}
#s-flow:is([data-k="2"],[data-k="3"]) .tq-rate{scale:1}
#s-flow .tq-rate header{margin:14px 26px 0;gap:14px}
#s-flow .tq-rate header b{font-size:20px;letter-spacing:.1em;color:#A9BCE2}
#s-flow .tq-rate .code{font-family:var(--nq-mono);font-size:23px;font-weight:700;letter-spacing:0;color:#9CC3FF}
#s-flow .tq-rate .tq-rr{margin:8px 26px 0;font-size:23px}
#s-flow .tq-rate .vb{margin:46px 26px 0;width:488px;height:58px}
#s-flow .tq-rate .vb .bar{top:8px;height:16px;border-radius:8px;background:linear-gradient(90deg,#3F72E4,#5A8FF6)}
#s-flow .tq-rate .vb::before{top:15px}
#s-flow .tq-rate .vb span{top:32px;font-size:20.5px;font-weight:600;color:#B4C4E2;font-variant-numeric:tabular-nums}
#s-flow .tq-rate .vb .etd{top:-2px;height:30px;width:4px;font-style:normal}
#s-flow .tq-rate .vb .etd b{top:-36px;font-style:normal;padding:1px 10px 2px;border-radius:7px;font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
#s-flow .tq-rate .vb .etd .fq-etd{position:static;font-size:inherit;font-weight:700;color:inherit}
#s-flow .tq-rate .ap{margin:6px 26px 0;font-size:21px;color:#D2DCEC}
#s-flow .tq-rate .tq-prov{left:0;right:0;bottom:0;padding:9px 26px 11px;gap:10px;font-size:20px;line-height:1.3;color:#C6D3E8;background:rgba(255,255,255,.035);border-top:1px solid rgba(158,178,220,.22)}
#s-flow .tq-rate .tq-prov i{width:18px;height:14px}
#s-flow .tq-alt{font-size:20px}

/* ---------------- the record: the NEXQUOTE window holding the draft ---------------- */
#s-flow .tq-doc{left:820px;top:236px;width:940px;height:642px;border-radius:12px;background:#F6F8FC;
  box-shadow:0 0 0 1px rgba(20,32,56,.6),0 2px 3px rgba(0,0,0,.35),0 22px 40px -14px rgba(0,0,0,.6),0 60px 100px -40px rgba(0,0,0,.6)}
#s-flow .tq-doc header{height:104px;box-sizing:border-box;align-items:flex-start;padding:20px 34px 0}
#s-flow .tq-doc .kk{height:26px;font-size:20px;letter-spacing:.12em;color:#4F5F77}
#s-flow .tq-doc .k2{color:#1E4FD6}
#s-flow .tq-doc header strong{margin-top:8px;font-size:27px;color:#0E1727}
/* the status badge: a real control on the record, top right */
#s-flow .tq-doc .tq-pill{position:absolute;right:30px;top:16px;width:0;min-width:0;height:36px;font-size:21px}
#s-flow .tq-doc .tq-pill span{display:inline-flex;align-items:center;gap:9px;height:36px;box-sizing:border-box;padding:0 16px;border-radius:999px;
  transform-origin:100% 50%;transition:opacity .35s,transform .5s cubic-bezier(.2,1.3,.4,1)}
#s-flow .tq-doc .p1{color:#33445C;background:#E4EAF2;box-shadow:inset 0 0 0 1.5px #CBD5E3}
#s-flow .tq-doc .p2{color:#5E3700;background:#FFE7BD;box-shadow:inset 0 0 0 2px #E9A23B,0 6px 14px -8px rgba(122,74,8,.6);transform:scale(1.12)}
#s-flow .tq-doc .p3{color:#8A3B16;background:#FBE1D3;box-shadow:inset 0 0 0 1.5px #F2B49B}
#s-flow .tq-doc .tq-pill span::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.8}
#s-flow .tq-doc .tq-pill .p2::before{width:15px;height:18px;border-radius:2px;opacity:1;background:
  linear-gradient(currentColor,currentColor) 3px 5px/7px 2px no-repeat,linear-gradient(currentColor,currentColor) 3px 10px/7px 2px no-repeat;box-shadow:inset 0 0 0 2px currentColor}
#s-flow[data-k="3"]:not(.tq-x) .tq-doc .p2{transform:none}
#s-flow .tq-doc .meta{height:64px;gap:12px}
#s-flow .tq-doc .meta span{font-size:20px;padding:5px 14px 6px;color:#33445C;border-color:#D3DAE5}
#s-flow .tq-doc .ln{padding:16px 34px 0}
#s-flow .tq-doc .ln>span{font-size:20px;letter-spacing:.1em;color:#4F5F77}
#s-flow .tq-doc .ln>b{top:48px;font-size:28px}
#s-flow .tq-doc .ln>.v0{color:#5B6B82}
#s-flow .tq-doc .l1{height:112px}
#s-flow .tq-doc .l2{height:122px}
#s-flow .tq-doc .l2>.v1{top:40px;font-size:48px;font-weight:800;letter-spacing:-.015em;color:#0E1727}
#s-flow .tq-doc .ln>.v2{font-size:24px}
#s-flow .tq-doc .ln>em{right:30px;top:14px;font-size:20px;padding:3px 12px 4px}
/* the row's socket: the thread plugs in at the left edge; a coloured bar marks the row as linked */
#s-flow .tq-doc .ln>.an{left:14px;width:12px;height:12px;margin-top:-6px;opacity:0!important}
#s-flow .tq-doc .ln::before{content:"";position:absolute;left:14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;opacity:0;transition:opacity .35s}
#s-flow .tq-doc .l1::before{background:#F0A63A}#s-flow .tq-doc .l2::before{background:#2F6BE0}
#s-flow:not([data-k="0"]) .tq-doc .l1::before{opacity:1}
#s-flow[data-k="1"] .tq-doc .l1::before{transition-delay:1.8s}
#s-flow:is([data-k="2"],[data-k="3"]):not(.tq-x) .tq-doc .l2::before{opacity:1}
#s-flow[data-k="2"] .tq-doc .l2::before{transition-delay:2.1s}
/* the total line */
#s-flow .tq-doc .l3{height:126px;border-top:2px solid #C3CEDF;background:#FFFFFF}
#s-flow .tq-doc .l3>span{color:#18212F;font-weight:700}
#s-flow .tq-doc .l3>.v1{font-size:26px;color:#0E1727}
#s-flow .tq-doc .l3>.v2{font-size:24px}
#s-flow .tq-doc .l3>small{top:88px;font-size:20px;color:#5B6B82}
#s-flow .tq-doc .ft{height:62px;font-size:20px;color:#1E4FD6;background:#EDF2FC}
/* the window's status bar is there from the start; its line appears on the last beat */
#s-flow .tq-doc::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62px;background:#EEF2F8;border-top:1px solid #DCE3EC;pointer-events:none}

/* ---------------- threads and the two that travel ---------------- */
#s-flow .tq-th path{filter:none}
#s-flow .tq-th .th-a{stroke:#FFC46B;stroke-width:3.5}
#s-flow .tq-th .th-b{stroke:#7FB0FF;stroke-width:3.5}
#s-flow .tq-th .fq-u{fill:none;stroke-width:12;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--io)}
#s-flow .tq-th .fq-ua{stroke:rgba(240,166,58,.3)}
#s-flow .tq-th .fq-ub{stroke:rgba(90,143,246,.32)}
#s-flow:not([data-k="0"]) .tq-th .fq-ua{stroke-dashoffset:0}
#s-flow[data-k="1"] .tq-th .fq-ua{transition-delay:1.25s}
#s-flow:is([data-k="2"],[data-k="3"]):not(.tq-x) .tq-th .fq-ub{stroke-dashoffset:0}
#s-flow[data-k="2"] .tq-th .fq-ub{transition-delay:1.6s}
#s-flow[data-k="3"]:not(.tq-x) .tq-th path{animation:none}
/* end dots: light at the source, light at the socket */
#s-flow .tq-th .fq-d circle{transform-box:fill-box;transform-origin:50% 50%}
#s-flow .tq-th .fq-d .dt{stroke-width:8;paint-order:stroke;opacity:0;transform:scale(.2);transition:opacity .25s,transform .45s cubic-bezier(.2,1.4,.4,1)}
#s-flow .tq-th .fq-d .rg{fill:none;stroke-width:2.5;opacity:0}
#s-flow .tq-th :is(.fq-da0,.fq-da1) .dt{fill:#FFE2B0;stroke:rgba(240,166,58,.4)}
#s-flow .tq-th :is(.fq-da0,.fq-da1) .rg{stroke:#FFC46B}
#s-flow .tq-th :is(.fq-db0,.fq-db1) .dt{fill:#CFE0FF;stroke:rgba(90,143,246,.42)}
#s-flow .tq-th :is(.fq-db0,.fq-db1) .rg{stroke:#9CC3FF}
#s-flow:not([data-k="0"]) .tq-th :is(.fq-da0,.fq-da1) .dt{opacity:1;transform:none}
#s-flow[data-k="1"] .tq-th .fq-da0 .dt{transition-delay:1.2s}#s-flow[data-k="1"] .tq-th .fq-da1 .dt{transition-delay:1.75s}
#s-flow:is([data-k="2"],[data-k="3"]):not(.tq-x) .tq-th :is(.fq-db0,.fq-db1) .dt{opacity:1;transform:none}
#s-flow[data-k="2"] .tq-th .fq-db0 .dt{transition-delay:1.55s}#s-flow[data-k="2"] .tq-th .fq-db1 .dt{transition-delay:2.1s}
/* contact: a ring leaves the socket when the value lands; on the last beat every thread answers once */
@keyframes fqPing{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
#s-flow[data-k="1"] .tq-th .fq-da1 .rg{animation:fqPing .8s cubic-bezier(.2,.7,.2,1) 1.8s both}
#s-flow[data-k="2"]:not(.tq-x) .tq-th .fq-db1 .rg{animation:fqPing .8s cubic-bezier(.2,.7,.2,1) 2.15s both}
#s-flow[data-k="3"]:not(.tq-x) .tq-th .fq-d .rg{animation:fqPing .9s cubic-bezier(.2,.7,.2,1) .75s both}
#s-flow[data-k="3"]:not(.tq-x) .tq-th :is(.fq-da0,.fq-db0) .rg{animation-delay:.95s}
#s-flow .tq-fly{font-size:22px}

/* ---------------- states ---------------- */
/* the sources stay lit on the last beat: the record is a draft that still points at them */
#s-flow[data-k="3"]:not(.tq-x) :is(.tq-mail,.tq-rate){opacity:1}
#s-flow .fz-tag{font-size:20px}
#s-flow .fz-end{top:958px;font-size:42px}
/* the ETD lands inside the validity: a ring leaves the marker (transform/opacity, instead of the old growing box-shadow) */
#s-flow[data-k="2"] .tq-rate .vb .etd{animation:none}
#s-flow .tq-rate .vb .etd::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;box-sizing:border-box;border:2px solid #fff;opacity:0;pointer-events:none}
#s-flow[data-k="2"]:not(.tq-x) .tq-rate .vb .etd::after{animation:fqPing .7s cubic-bezier(.2,.7,.2,1) .95s both}
/* calm: no motion, states only */
body.calm #s-flow .tq-th *{transition:none!important;animation:none!important}