/* =====================================================================
   dash2 — creative data visualisation styles
   ===================================================================== */

/* live badge */
.live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#7ee0d9;margin-left:8px}
.live i{width:7px;height:7px;border-radius:50%;background:#2ee6c9;box-shadow:0 0 0 0 rgba(46,230,201,.7);animation:livePulse 1.6s infinite}
.live.dark{color:var(--teal-d,#037F79);margin-right:4px}.live.dark i{background:var(--lime)}

/* ---------- hero v2 ---------- */
.hero2{padding:30px 32px}
.hero2 .hero-in{align-items:center}
.hp-w{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hp{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#5ee0d5;opacity:.0;animation:drift var(--t) linear infinite;animation-delay:var(--dl);box-shadow:0 0 8px #5ee0d5}
.hero .reveal{animation:riseIn .9s .2s cubic-bezier(.16,.8,.24,1) both}
.hgauge-w{display:flex;flex-direction:column;align-items:center;gap:12px;margin-left:auto}
.hgauge{position:relative;width:190px;height:190px}
.hgauge svg{width:100%;height:100%;overflow:visible}
.hg-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:14}
.hg-orbit{fill:none;stroke:rgba(126,224,217,.35);stroke-width:1;stroke-dasharray:2 6;transform-origin:80px 80px;animation:spin 30s linear infinite}
.hg-seg{fill:none;stroke-width:14;stroke-linecap:round;cursor:pointer;animation:segIn 1.3s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 0 6px rgba(0,0,0,.4));transition:stroke-width .2s}
.hg-seg:hover{stroke-width:18}
.hg-orb{transform-origin:80px 80px;animation:spin 7s linear infinite}
.hg-orb circle{fill:#7ee0d9;filter:drop-shadow(0 0 4px #7ee0d9)}
.hg-orb.o2{animation-duration:11s;animation-direction:reverse}.hg-orb.o2 circle{fill:#fff}
.hg-orb.o3{animation-duration:15s}.hg-orb.o3 circle{fill:#E3A21A}
.hg-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.hg-c b{font-size:44px;font-weight:700;letter-spacing:-.05em;line-height:1;color:#fff}
.hg-c > span{font-size:11px;color:#9fd9d5;text-transform:uppercase;letter-spacing:.12em;margin-top:4px}
.hg-leg{display:flex;gap:12px;font-size:12px;color:#d6d6d6}
.hg-leg span{display:flex;align-items:center;gap:6px;cursor:pointer;padding:3px 8px;border-radius:999px;transition:background .15s}
.hg-leg span:hover{background:rgba(255,255,255,.1)}
.hg-leg i{width:8px;height:8px;border-radius:50%}
.hg-leg b{color:#fff}

/* ---------- odometer numbers ---------- */
.odo{display:inline-flex;align-items:flex-end;font-variant-numeric:tabular-nums}
.odo-d{display:inline-block;height:1em;line-height:1em;overflow:hidden;position:relative}
.odo-s{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.odo-s span{height:1em;line-height:1em;display:block;text-align:center}
.stat-v{line-height:1;display:flex;align-items:flex-end}
.stat-v .odo{height:1em}

/* ---------- cursor spotlight ---------- */
.stat,.card,.ordc{background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(4,162,155,.075),transparent 42%)}
.card-dark{background-image:none}

/* spark end dot */
.spk-dot{opacity:0;animation:fadeOnly .3s 1.5s forwards}
.spk-ring{opacity:0;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ringPing 2s 1.6s ease-out infinite}

/* ---------- live order flow ---------- */
.flow-card .card-h .sub{margin-left:8px}
.flow-w{overflow-x:auto;margin:0 -6px}
.flow{width:100%;min-width:760px;height:auto;display:block}
.ft-bg{stroke:var(--line-2);stroke-width:14;stroke-linecap:round;fill:none}
.ft-glow{stroke-width:6;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s .2s cubic-bezier(.4,0,.2,1) forwards}
.ft-glow{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawLong 1.8s .2s cubic-bezier(.4,0,.2,1) forwards}
.ft-dash{stroke:#fff;stroke-width:2;stroke-dasharray:4 14;fill:none;opacity:.8;animation:dashMove 1.2s linear infinite}
.fp{fill:#04A29B;filter:drop-shadow(0 0 5px #04A29B)}
.fn{cursor:pointer;opacity:0;animation:popSvg .6s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--dl) + .4s);transform-box:fill-box;transform-origin:center}
.fn-ring{fill:#fff;stroke:var(--line);stroke-width:2;transition:stroke .2s}
.fn:hover .fn-ring{stroke:var(--lime);stroke-width:3}
.fn-dot{fill:#d4d4d0}.fn-dot.on{fill:#000}
.fn-c{font-size:11px;font-weight:700;fill:#fff;pointer-events:none}
.fn-l{font-size:13px;font-weight:600;fill:var(--ink-2)}
.fb{cursor:pointer;opacity:0;animation:bubbleIn .8s cubic-bezier(.2,1.3,.4,1) forwards, bob var(--bob) ease-in-out infinite;animation-delay:calc(var(--dl) + .9s), calc(var(--dl) + 1.8s)}
.fb-stem{stroke:var(--line);stroke-width:2;stroke-dasharray:3 3}
.fb-halo{opacity:.18;transform-box:fill-box;transform-origin:center;animation:halo 2.6s ease-out infinite;animation-delay:var(--dl)}
.fb-t{font-size:10px;font-weight:700;fill:#000;pointer-events:none}
.fb-n{font-size:10.5px;font-weight:600;fill:var(--muted);pointer-events:none}
.fb:hover circle:nth-of-type(2){stroke-width:5}
.fb:hover .fb-n{fill:var(--teal-d,#037F79)}

/* ---------- dark card: shipment lanes ---------- */
.card-dark{background:#05090a radial-gradient(circle at 80% 0%,rgba(4,162,155,.28),transparent 55%);border-color:#111;color:#fff}
.card-dark .card-h h3{color:#fff}
.card-dark .h-tg{color:#888}
.lanes-svg{width:100%;height:auto;display:block;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.rg{font-size:9px;letter-spacing:.3em;fill:rgba(255,255,255,.22);font-weight:700}
.ln{cursor:pointer}
.ln-base{fill:none;stroke-width:1.2;opacity:.25}
.ln-flow{fill:none;stroke-width:2.2;stroke-dasharray:6 8;animation:dashMove 1s linear infinite;animation-delay:var(--dl);filter:drop-shadow(0 0 3px currentColor)}
.ln-flow.planned{stroke-dasharray:2 6;opacity:.6;animation-duration:3s}
.ln:hover .ln-base{opacity:.7;stroke-width:3}
.cty{opacity:0;animation:fadeOnly .6s forwards;animation-delay:calc(var(--dl) + .3s)}
.cty-p{fill:rgba(126,224,217,.15);transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-out infinite}
.cty-d{fill:#7ee0d9}
.cty text{font-size:10px;fill:#d8d8d8;font-weight:600}
.ln-list{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.ln-list a{display:flex;align-items:center;gap:8px;font-size:12px;color:#d6d6d6;padding:6px 8px;border-radius:8px;text-decoration:none;transition:background .15s}
.ln-list a:hover{background:rgba(255,255,255,.08);color:#fff}
.ln-list a span{flex:1}
.ln-list i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px currentColor}

/* ---------- SLA / deadline bar on alarms ---------- */
.sla{position:relative;height:8px;border-radius:99px;margin:30px 0 20px;background:var(--line-2);cursor:pointer;max-width:520px}
.sla-z{position:absolute;top:0;bottom:0;opacity:.28}
.sla-z.g{left:0;background:var(--green);border-radius:99px 0 0 99px}.sla-z.y{background:var(--amber)}.sla-z.r{background:var(--red);border-radius:0 99px 99px 0}
.sla-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:var(--w);animation:slaGrow 1.4s .4s cubic-bezier(.2,.8,.2,1) both}
.sla-fill.red{background:repeating-linear-gradient(45deg,#E5484D 0 6px,#f07a7e 6px 12px);background-size:17px 17px;animation:slaGrow 1.4s .4s cubic-bezier(.2,.8,.2,1) both, stripes .8s linear infinite}
.sla-fill.amber{background:linear-gradient(90deg,#18A058,#E3A21A)}
.sla-mk{position:absolute;top:50%;left:var(--x);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:3px solid var(--amber);box-shadow:0 2px 6px rgba(0,0,0,.2);animation:mkSlide 1.4s .4s cubic-bezier(.2,.8,.2,1) both}
.sla-mk.red{border-color:var(--red)}
.sla-mk span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;white-space:nowrap;color:var(--ink)}
.sla-dl{position:absolute;top:-4px;bottom:-4px;width:2px;background:#000;border-radius:2px}
.sla-dl span{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}

/* ---------- payment runway ---------- */
.ptl{position:relative;padding-left:14px}
.ptl::before{content:'';position:absolute;left:4px;top:18px;bottom:18px;width:2px;background:linear-gradient(var(--red),var(--amber),var(--lime));border-radius:2px;transform-origin:top;animation:growY 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
.ptl-i{position:relative;display:flex;gap:12px;align-items:center;padding:10px 8px;margin:0 -8px 0 0;border-radius:12px;text-decoration:none;color:inherit;transition:background .15s,transform .2s;opacity:0;animation:riseIn .6s cubic-bezier(.16,.8,.24,1) forwards;animation-delay:calc(var(--dl) + .4s)}
.ptl-i:hover{background:#F7FBFB;transform:translateX(3px)}
.ptl-n{position:absolute;left:-15px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid var(--lime)}
.ptl-i.red .ptl-n{border-color:var(--red);animation:dotPulse 2s infinite}.ptl-i.amber .ptl-n{border-color:var(--amber)}
.ptl-i .pay-b{flex:1;min-width:0}
.ptl-i .right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/* ---------- cycle chart ---------- */
.cyc{width:100%;height:auto;display:block;overflow:visible}
.cy-g{stroke:var(--line-2)}
.cy-ax{font-size:10.5px;fill:var(--muted)}
.cy-tg{stroke:var(--green);stroke-width:1.5;stroke-dasharray:5 5;opacity:0;animation:fadeOnly .6s 1.6s forwards}
.cy-tgl{font-size:11px;font-weight:700;fill:var(--green);opacity:0;animation:fadeOnly .6s 1.9s forwards}
.cy-area{opacity:0;animation:fadeOnly 1s .9s forwards}
.cy-line{fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;animation:draw 2.2s cubic-bezier(.4,0,.2,1) both}
.cy-run{fill:var(--lime);stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(4,162,155,.8))}
.cy-pt{cursor:pointer}
.cy-x{stroke:var(--lime);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s}
.cy-dot{fill:#fff;stroke:#000;stroke-width:2.2;opacity:0;animation:popSvg .4s cubic-bezier(.2,1.5,.4,1) forwards;animation-delay:calc(var(--dl) + .2s);transform-box:fill-box;transform-origin:center;transition:r .15s}
.cy-tip{opacity:0;transition:opacity .15s,transform .15s;pointer-events:none}
.cy-tip rect{fill:#000}.cy-tip text{fill:#fff;font-size:11.5px;font-weight:700}
.cy-pt:hover .cy-tip,.cy-pt:hover .cy-x{opacity:1}
.cy-pt:hover .cy-dot{r:7;fill:var(--lime)}

/* ---------- money donut ---------- */
.md{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.md-ch{position:relative;width:190px;height:190px;flex:none}
.md-ch svg{width:100%;height:100%}
.md-bg{fill:none;stroke:var(--line-2);stroke-width:22}
.md-seg{fill:none;stroke-width:22;cursor:pointer;animation:segIn 1.1s cubic-bezier(.2,.8,.2,1) both;transition:stroke-width .2s,opacity .2s}
.md-ch:hover .md-seg{opacity:.45}.md-ch .md-seg:hover{opacity:1;stroke-width:28}
.md-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.md-c > span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.md-c b{font-size:26px;letter-spacing:-.04em}
.md-l{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.md-l a{position:relative;display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;text-decoration:none;color:inherit;font-size:13px;overflow:hidden;opacity:0;animation:riseIn .5s cubic-bezier(.16,.8,.24,1) forwards;animation-delay:var(--dl)}
.md-l a:hover{background:#F7FBFB}
.md-l i{width:10px;height:10px;border-radius:3px}
.md-l em{position:absolute;left:0;bottom:0;height:2px;width:var(--w);background:var(--c);opacity:.5;transform-origin:left;animation:grow 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--dl) + .2s)}

/* motion toggle */
#motionBtn svg.duo{width:19px;height:19px;color:var(--lime)}
#motionBtn.off svg.duo{color:var(--muted)}
#motionBtn.off::after{content:'';position:absolute;width:22px;height:2px;background:var(--muted);transform:rotate(-45deg)}

/* ---------- keyframes ---------- */
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(46,230,201,.6)}100%{box-shadow:0 0 0 8px rgba(46,230,201,0)}}
@keyframes drift{0%{transform:translate(0,0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translate(60px,-120px);opacity:0}}
@keyframes revealTxt{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes segIn{from{stroke-dasharray:0 100}}
@keyframes ringPing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@keyframes drawLong{to{stroke-dashoffset:0}}
@keyframes dashMove{to{stroke-dashoffset:-18}}
@keyframes popSvg{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes halo{0%{transform:scale(.9);opacity:.35}100%{transform:scale(1.9);opacity:0}}
@keyframes slaGrow{from{width:0}}
@keyframes mkSlide{from{left:0;opacity:0}}
@keyframes stripes{to{background-position:17px 0}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- calm mode (toggle in the top bar) ---------- */
html.calm *,html.calm *::before,html.calm *::after{animation-iteration-count:1!important}
html.calm .hp,html.calm .hg-orb,html.calm .hg-orbit,html.calm .ft-dash,html.calm .ln-flow,html.calm .fb-halo,html.calm .cty-p,html.calm .spk-ring,html.calm .live i,html.calm .alarm.red,html.calm .kpi.lime::after,html.calm .kpi.dark::after,html.calm .stat.s-teal::after,html.calm .impact::before,html.calm .pill .i{animation:none!important}
html.calm .fb{animation:bubbleIn .8s cubic-bezier(.2,1.3,.4,1) forwards!important;animation-delay:var(--dl)!important}

@media (max-width:900px){.hgauge-w{margin:8px auto 0}.hgauge{width:160px;height:160px}.hero2{padding:22px 18px}.md-ch{margin:0 auto}}

.ln-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ln-stats a{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#fff;transition:background .15s,transform .2s}
.ln-stats a:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.ln-stats b{font-size:24px;letter-spacing:-.04em}
.ln-stats > a > span{font-size:11px;color:#9fd9d5}
.hg-c b .odo-d,.hg-c b .odo-x{font-size:inherit}

/* lanes adapt to card width: side-by-side when wide */
.card-dark{container-type:inline-size}
@container (min-width:720px){
  .lanes-w{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:center}
  .lanes-w .lanes-svg{grid-row:span 2}
  .lanes-w .ln-stats{margin-top:0}
  .lanes-w{grid-template-rows:auto 1fr;align-items:start}
  .lanes-w .ln-list{align-self:start;margin-top:12px}
}
.lanes-svg{max-height:360px}