/* ==========================================================================
   KIB DIRECT SALES — DESIGN TOKENS v2
   Gulf marine, Kuwait light, KIB green. Sand appears in one place only:
   the Day Arc. Every value in the interface comes from here.
   ========================================================================== */
:root{
  /* Brand — deep petrol through marine to KIB green */
  --ink-900:#06202B; --ink-700:#0B3A4A; --ink-500:#175169;
  --marine-600:#0E5C7A; --marine-500:#1478A0; --marine-100:#CFE3EC; --marine-050:#EDF5F8;
  --green-600:#0B7A55; --green-400:#2FB37E; --green-050:#E6F4EE;
  --sand-400:#D9B370; --sand-200:#EFDDBC; --sand-050:#FBF4E7;

  /* Legacy aliases so older markup keeps resolving */
  --brand-navy:var(--ink-900); --brand-blue-700:var(--marine-600);
  --brand-blue-500:var(--marine-500); --brand-blue-050:var(--marine-050);
  --brand-green-600:var(--green-600); --brand-green-400:var(--green-400);
  --brand-green-050:var(--green-050);

  /* Surfaces */
  --canvas:#F6F8F9; --surface:#FFFFFF; --surface-alt:#FBFCFD;
  --border:#DFE7EB; --border-strong:#C3D3DB;
  --text:#0A1F2A; --text-muted:#5B7280; --text-faint:#93A6B0;

  /* Status semantics */
  --positive:#0B7A55;  --positive-bg:#E6F4EE;
  --attention:#B06A0B; --attention-bg:#FBF0DF;
  --critical:#B3261E;  --critical-bg:#FBEAE8;
  --info:#1478A0;      --info-bg:#EDF5F8;
  --neutral:#5B7280;   --neutral-bg:#EDF1F3;

  /* Segments */
  --seg-lower-mass:#93A6B0; --seg-mass:#5B7280; --seg-premium:#0E5C7A;
  --seg-black:#06202B; --seg-private:#8A6A28;

  /* Shape and depth */
  --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-xl:26px;
  --shadow-1:0 1px 2px rgba(6,32,43,.05), 0 2px 6px rgba(6,32,43,.04);
  --shadow-2:0 6px 22px rgba(6,32,43,.09);
  --shadow-3:0 18px 48px rgba(6,32,43,.16);
  --ease:cubic-bezier(.22,.75,.28,1);

  /* Type — system stack. The bank network blocks webfonts and a
     render-blocking font request on 4G in the field is a real cost. */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
            "Noto Sans Arabic","Segoe UI Arabic",Arial,sans-serif;
  --font-num:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  /* Geometry — eight-point khatam, KIB's own tradition, never above 7% */
  --khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M60 6 78 24 96 24 96 42 114 60 96 78 96 96 78 96 60 114 42 96 24 96 24 78 6 60 24 42 24 24 42 24Z'/%3E%3Cpath d='M60 24 84 36 96 60 84 84 60 96 36 84 24 60 36 36Z'/%3E%3C/g%3E%3C/svg%3E");
  --khatam-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230E5C7A' stroke-width='2'%3E%3Cpath d='M60 6 78 24 96 24 96 42 114 60 96 78 96 96 78 96 60 114 42 96 24 96 24 78 6 60 24 42 24 24 42 24Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   COMPONENT LAYER v2
   Class names match the existing Blade markup so views need no rewrite.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--font-ui);
     font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul{margin:0}
a{color:var(--marine-500);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--marine-500);outline-offset:3px;border-radius:6px}
.hidden{display:none}

/* ---------- Kuwaiti dinar: fils smaller and lighter than dinars ---------- */
.kwd{font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.kwd .cur{font-size:.62em;font-weight:600;color:var(--text-muted);margin-right:.35em;letter-spacing:.04em}
.kwd .fils{font-size:.62em;font-weight:400;opacity:.5;margin-left:.03em}

/* ---------- Type scale ---------- */
.t-display{font-size:27px;font-weight:680;letter-spacing:-.03em;line-height:1.14}
.t-section{font-size:17px;font-weight:640;letter-spacing:-.015em}
.t-body{font-size:14px}
.t-label,.eyebrow,.lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-faint)}
.t-metric{font-size:29px;font-weight:660;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.t-data{font-size:13px;font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)} .faint{color:var(--text-faint)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.mask{font-family:var(--font-num);font-size:12.5px;color:var(--text-muted);letter-spacing:.02em}

/* ---------- Layout ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack>*+*{margin-top:11px}
@media(max-width:920px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:var(--shadow-1);
      transition:box-shadow .28s var(--ease),border-color .28s var(--ease)}
.card:hover{box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.card-pad{padding:20px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
           padding:15px 20px;border-bottom:1px solid var(--border)}

/* ---------- Day Arc (signature) ---------- */
.daybrief{background:linear-gradient(168deg,var(--ink-900) 0%,var(--ink-700) 62%,#0E4C63 100%);
  border-radius:var(--radius-lg);padding:22px 24px 10px;color:#fff;position:relative;
  overflow:hidden;box-shadow:var(--shadow-2);margin-bottom:16px}
.daybrief::before{content:"";position:absolute;width:320px;height:320px;right:-90px;top:-180px;
  border-radius:50%;background:radial-gradient(circle,rgba(217,179,112,.24),transparent 66%)}
.daybrief>*{position:relative;z-index:1}
.daybrief .lbl,.daybrief .t-label{color:#8FC4DC}
.daybrief h3{font-size:20px;font-weight:660;letter-spacing:-.022em;margin-top:6px}
.daybrief .stats{display:flex;gap:26px}
.daybrief .stats div{text-align:right}
.daybrief .stats b{display:block;font-size:23px;font-weight:670;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.daybrief .stats small{font-size:11px;color:#A9C6D3}

.arc{display:block;width:100%;height:96px;margin-top:6px;overflow:visible}
.arc-track{fill:none;stroke:rgba(217,179,112,.40);stroke-width:1.5;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:arcdraw 1.5s var(--ease) .15s forwards}
.arc-done{fill:none;stroke:var(--sand-400);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:arcdraw 1.5s var(--ease) .3s forwards}
@keyframes arcdraw{to{stroke-dashoffset:0}}
.arc-pt{opacity:0;animation:arcpop .5s var(--ease) forwards}
@keyframes arcpop{from{opacity:0;transform:translateY(7px) scale(.6)}to{opacity:1;transform:none}}
.arc-tick{font-size:10px;fill:#7FA3B4}
.arc-lbl{font-size:10.5px;fill:#D7E6ED;font-weight:600}
.arc-now{stroke:#fff;stroke-width:1;stroke-dasharray:3 3;opacity:.45}

/* ---------- KPI ---------- */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
     padding:17px 19px;box-shadow:var(--shadow-1);position:relative;overflow:hidden;
     opacity:0;transform:translateY(12px);animation:rise .6s var(--ease) forwards;
     transition:box-shadow .28s var(--ease),transform .28s var(--ease)}
.kpi:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
@keyframes rise{to{opacity:1;transform:none}}
.kpi:nth-child(1){animation-delay:.05s} .kpi:nth-child(2){animation-delay:.13s}
.kpi:nth-child(3){animation-delay:.21s} .kpi:nth-child(4){animation-delay:.29s}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--marine-500)}
.kpi.is-positive::after{background:var(--positive)}
.kpi.is-attention::after{background:var(--attention)}
.kpi.is-critical::after{background:var(--critical)}
.kpi .val{font-size:27px;font-weight:660;letter-spacing:-.03em;
          font-variant-numeric:tabular-nums;margin-top:9px;line-height:1.05}
.kpi .cur{font-size:14px;font-weight:600;color:var(--text-muted);margin-right:4px}
.kpi .delta{font-size:12px;font-weight:600;margin-top:9px;display:flex;gap:5px;align-items:center}
.kpi .delta.up{color:var(--positive)} .kpi .delta.down{color:var(--critical)}
.kpi .delta span{color:var(--text-faint);font-weight:400}

/* ---------- Badges and chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  font-size:11.5px;font-weight:660;white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.positive{color:var(--positive);background:var(--positive-bg);border-color:#C4E4D6}
.badge.attention{color:var(--attention);background:var(--attention-bg);border-color:#EEDCBB}
.badge.attention::before{border-radius:1px}
.badge.critical{color:var(--critical);background:var(--critical-bg);border-color:#F0CFCC}
.badge.critical::before{border-radius:1px;transform:rotate(45deg)}
.badge.info{color:var(--info);background:var(--info-bg);border-color:#C8DFE9}
.badge.neutral{color:var(--neutral);background:var(--neutral-bg);border-color:#DBE3E7}

.chip{display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--radius-sm);
      font-size:11.5px;font-weight:660;color:#fff;background:var(--seg-mass)}
.chip-lower-mass{background:var(--seg-lower-mass)} .chip-mass{background:var(--seg-mass)}
.chip-premium{background:var(--seg-premium)} .chip-black{background:var(--seg-black)}
.chip-private{background:var(--seg-private)}

/* ---------- Product Status Ladder ---------- */
.ladder-row{padding:17px 0;border-bottom:1px solid var(--border)}
.ladder-row:last-child{border-bottom:0}
.ladder-name{font-weight:640;font-size:14.5px;letter-spacing:-.01em}
.ladder-meta{font-size:12px;color:var(--text-muted);margin-top:3px}
.ladder-right{text-align:right;float:right;margin-left:16px}
.ladder-value{font-size:14px;font-weight:640;margin-top:7px;font-variant-numeric:tabular-nums}
.ladder{display:flex;gap:4px;margin-top:13px;clear:both;padding-top:6px}
.rung{flex:1;height:6px;border-radius:3px;background:var(--border);position:relative;
      transform:scaleX(0);transform-origin:left;animation:fill .5s var(--ease) forwards}
@keyframes fill{to{transform:scaleX(1)}}
.rung:nth-child(1){animation-delay:.05s} .rung:nth-child(2){animation-delay:.11s}
.rung:nth-child(3){animation-delay:.17s} .rung:nth-child(4){animation-delay:.23s}
.rung:nth-child(5){animation-delay:.29s} .rung:nth-child(6){animation-delay:.35s}
.rung.done{background:var(--marine-500)}
.rung.now{background:currentColor}
.rung.now::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--surface);
  border:3.5px solid currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.ladder.is-positive .rung.now{color:var(--positive)}
.ladder.is-attention .rung.now{color:var(--attention)}
.ladder.is-critical .rung.now{color:var(--critical)}
.ladder.is-info .rung.now{color:var(--info)}
.ladder-scale{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-faint);
  margin-top:9px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;
  border-radius:var(--radius-sm);font:inherit;font-weight:640;font-size:13.5px;padding:10px 18px;
  cursor:pointer;text-decoration:none;
  transition:transform .16s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--marine-600),#0A4C66);color:#fff;
  box-shadow:0 1px 2px rgba(6,32,43,.2),inset 0 1px 0 rgba(255,255,255,.13)}
.btn-primary:hover{box-shadow:0 4px 14px rgba(14,92,122,.34);color:#fff}
.btn-secondary{background:var(--surface);color:var(--marine-600);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--marine-050);border-color:var(--marine-500)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:var(--neutral-bg);color:var(--text)}
.btn-danger{background:var(--critical);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{padding:7px 13px;font-size:12.5px}
.btn-lg{padding:13px 24px;font-size:15px}

/* ---------- Forms ---------- */
.field{display:block;margin-bottom:15px}
.field>span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-faint);margin-bottom:7px}
.input,select.input,textarea.input{width:100%;padding:11px 13px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);font:inherit;font-size:14.5px;background:var(--surface);
  color:var(--text);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.input:focus{border-color:var(--marine-500);box-shadow:0 0 0 4px rgba(20,120,160,.13);outline:none}
.input.is-error{border-color:var(--critical);box-shadow:0 0 0 4px rgba(179,38,30,.10)}
.err{color:var(--critical);font-size:12px;margin-top:6px;display:flex;gap:6px;align-items:center}
.hint{color:var(--text-faint);font-size:12px;margin-top:6px;display:block}
.note{background:var(--marine-050);border-left:3px solid var(--marine-500);padding:14px 17px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13.5px}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);
          background:var(--surface);box-shadow:var(--shadow-1)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl thead th{background:var(--surface-alt);text-align:left;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--text-faint);padding:12px 16px;
  border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0}
.tbl tbody td{padding:14px 16px;border-bottom:1px solid var(--border)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .18s var(--ease)}
.tbl tbody tr:hover{background:var(--marine-050)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Progress ---------- */
.bar{height:7px;background:var(--neutral-bg);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--marine-600),var(--marine-500));
  transform-origin:left;animation:fill .7s var(--ease) forwards}
.bar>i.pos{background:linear-gradient(90deg,var(--green-600),var(--green-400))}
.bar>i.att{background:linear-gradient(90deg,#96590A,var(--attention))}

/* ---------- Timeline ---------- */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--marine-100),var(--border))}
.tl-item{position:relative;padding-bottom:20px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-23px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--surface);border:2.5px solid var(--marine-500)}
.tl-item.pos::before{border-color:var(--positive)}
.tl-item.att::before{border-color:var(--attention)}
.tl-item .when{font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.tl-item .what{font-weight:640;margin-top:2px}
.tl-item .who{font-size:12.5px;color:var(--text-muted)}

/* ---------- Follow-up rows ---------- */
.fu{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--border);
    transition:background .18s var(--ease)}
.fu:last-child{border-bottom:0}
.fu:hover{background:var(--surface-alt)}
.fu-flag{width:3px;align-self:stretch;border-radius:2px;background:var(--info);flex:none}
.fu.overdue .fu-flag{background:var(--critical)}
.fu.due .fu-flag{background:var(--attention)}
.fu-main{flex:1;min-width:0}
.fu-main b{display:block;font-size:13.5px;font-weight:640}
.fu-main small{color:var(--text-muted);font-size:12px}
.fu-time{font-size:12px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Pipeline board ---------- */
.pipe{display:flex;gap:13px;overflow-x:auto;padding-bottom:8px}
.pipe-col{flex:0 0 240px;background:var(--surface-alt);border:1px solid var(--border);
          border-radius:var(--radius);padding:11px}
.pipe-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-faint);display:flex;justify-content:space-between;margin-bottom:10px}
.pipe-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 12px;margin-bottom:8px;box-shadow:var(--shadow-1);cursor:grab;display:block;
  color:inherit;transition:transform .18s var(--ease),box-shadow .22s var(--ease),
  border-color .22s var(--ease)}
.pipe-card:hover{border-color:var(--marine-500);box-shadow:var(--shadow-2);
  transform:translateY(-2px);text-decoration:none}
.pipe-card b{font-size:13px;display:block;font-weight:640}
.pipe-card .v{font-size:13px;font-weight:640;margin-top:5px;font-variant-numeric:tabular-nums}
.pipe-card .m{font-size:11.5px;color:var(--text-faint);margin-top:3px}

/* ---------- States ---------- */
.empty{text-align:center;padding:36px 22px;color:var(--text-muted)}
.empty b{display:block;color:var(--text);margin-bottom:5px;font-size:15.5px;letter-spacing:-.01em}
.toast{display:flex;gap:11px;align-items:flex-start;background:var(--ink-900);color:#fff;
  padding:13px 16px;border-radius:var(--radius);box-shadow:var(--shadow-2);max-width:420px;
  animation:rise .4s var(--ease)}
.toast.ok{background:linear-gradient(180deg,#0C6D4C,#0A5D41)}
.toast b{display:block;font-size:13.5px} .toast small{color:#C8DFE8;font-size:12.5px}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh;background:var(--canvas)}
.shell-side{background:linear-gradient(178deg,var(--ink-900),#08283A);padding:20px 13px;
            position:relative;overflow:hidden}
.shell-side::after{content:"";position:absolute;left:-30px;bottom:-30px;width:180px;height:180px;
  opacity:.055;background-image:var(--khatam);background-size:contain;background-repeat:no-repeat}
.shell-brand{color:#fff;font-weight:700;font-size:13.5px;letter-spacing:-.01em;padding:6px 11px 17px;
  border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:14px;position:relative;z-index:1}
.shell-brand small{display:block;font-weight:500;color:#7FB0C8;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:4px}
.nav-i{display:flex;align-items:center;gap:10px;color:#A7C3D0;padding:9px 11px;
  border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:2px;cursor:pointer;
  position:relative;z-index:1;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),padding-left .2s var(--ease)}
.nav-i:hover{background:rgba(255,255,255,.06);color:#fff;padding-left:15px;text-decoration:none}
.nav-i.on{background:linear-gradient(90deg,rgba(20,120,160,.55),rgba(20,120,160,.14));
  color:#fff;font-weight:640}
.nav-i.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  background:var(--sand-400);border-radius:0 3px 3px 0}
.nav-i .dot{width:6px;height:6px;border-radius:50%;background:var(--green-400);margin-left:auto}
.shell-main{padding:22px;max-width:1400px}
.shell-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
           margin-bottom:18px;flex-wrap:wrap}

/* ---------- Mobile tab bar ---------- */
.tabbar{display:none}
.tab{font-size:9.5px;color:var(--text-faint);text-align:center;flex:1;text-decoration:none}
.tab i{display:block;width:20px;height:20px;border-radius:6px;background:currentColor;
       opacity:.26;margin:0 auto 5px}
.tab.on{color:var(--marine-600);font-weight:700} .tab.on i{opacity:1}
.tab.fab i{width:50px;height:50px;border-radius:17px;opacity:1;margin-top:-22px;position:relative;
  background:linear-gradient(180deg,var(--marine-500),var(--marine-600));
  box-shadow:0 8px 20px rgba(14,92,122,.42)}
.tab.fab i::after{content:"+";position:absolute;inset:0;color:#fff;font-size:27px;font-weight:300;
  display:grid;place-items:center;line-height:1}
.tab.fab{color:var(--marine-600);font-weight:700}

@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .shell-side{display:none}
  .shell-main{padding:16px 14px 84px}
  .tabbar{display:flex;justify-content:space-around;align-items:flex-end;background:var(--surface);
    border-top:1px solid var(--border);padding:8px 4px 11px;position:fixed;bottom:0;left:0;right:0;
    z-index:40;box-shadow:0 -2px 14px rgba(6,32,43,.07)}
  .t-display{font-size:22px}
  .tbl thead{display:none}
  .tbl tbody td{display:block;border:0;padding:5px 16px}
  .tbl tbody tr{display:block;border-bottom:1px solid var(--border);padding:10px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rung{transform:none} .kpi{opacity:1;transform:none}
  .arc-track,.arc-done{stroke-dashoffset:0} .arc-pt{opacity:1}
  .bar>i{transform:none}
}