/* ============================================================
   Kaizen CRM — live UI replicas ("kui")
   ------------------------------------------------------------
   Real DOM re-creations of the product's own views (dashboard,
   deal pipeline, quotes, sales dashboard, gantt, mobile), not
   screenshots. Every replica is built from the same shell:

     .kui  →  .kui-canvas  →  .kui-side + .kui-main

   The canvas is authored at a FIXED 880x550 design size and
   scaled with transform:scale(var(--k)). JS (kaizen-ui.js) sets
   --k from the container width; the media-query ladder below is
   the no-JS / pre-hydration fallback so the replica is never
   rendered clipped at 1x.

   Motion is driven declaratively: the driver sets data-step="N"
   on .kui and every animated rule keys off that attribute. No
   per-view JS, and the whole system collapses to its final,
   fully-legible state under prefers-reduced-motion.
   ============================================================ */

.kui{
  --k:1;
  /* product palette, sampled from the app itself */
  --kx-ink:#17181C;          /* sidebar */
  --kx-ink-2:#1B1C21;        /* topbar */
  --kx-ink-line:#2C2E36;
  --kx-ink-txt:#A9ADB7;
  --kx-ink-dim:#6E727D;
  --kx-blue:#2563EB;
  --kx-blue-2:#3B82F6;
  --kx-green:#34D399;
  --kx-bg:#F7F8FA;
  --kx-card:#FFFFFF;
  --kx-line:#E5E7EB;
  --kx-line-2:#EEF0F3;
  --kx-txt:#111827;
  --kx-txt-2:#4B5563;
  --kx-txt-3:#8A909C;
  --kx-ok-bg:#DCFCE7; --kx-ok-tx:#15803D;
  --kx-warn-bg:#FEF3C7; --kx-warn-tx:#92400E;
  --kx-hot-bg:#FEE2E2; --kx-hot-tx:#B91C1C;
  --kx-info-bg:#DBEAFE; --kx-info-tx:#1D4ED8;

  /* Effective design width. Narrow viewports drop the rail and re-scale to the
     main column — otherwise an 880px canvas squeezed into a 330px phone renders
     the whole product at 0.38 and nothing in it is legible. The real app
     collapses its sidebar at this width too, so this is the faithful shape. */
  --kw:880;

  position:relative;
  aspect-ratio:calc(var(--kw) / 550);
  overflow:hidden;
  background:var(--kx-bg);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  color:var(--kx-txt);
  line-height:1.35;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.kui *{box-sizing:border-box}
.kui-canvas{
  position:absolute; top:0; left:0;
  width:calc(var(--kw) * 1px); height:550px;
  transform:scale(var(--k)); transform-origin:0 0;
  display:flex;
  background:var(--kx-bg);
}
/* Fallback scale ladder — replaced by the exact value once JS measures. */
@media (max-width:1180px){ .kui{--k:.84} }
@media (max-width:900px){  .kui{--k:.74} }
@media (max-width:760px){  .kui{--kw:708;--k:.72} .kui-side{display:none} }
@media (max-width:520px){  .kui{--kw:708;--k:.46} }

/* The replica sits inside the existing .shot browser chrome. The screenshot
   variant parks its caption tag under the URL bar; here that lands on top of
   the app's own topbar, so move it out of the product's way. */
.kui-shot .kui{border-radius:0}
.kui-shot .cap-tag{top:auto;right:auto;bottom:12px;left:12px}

/* ---------- sidebar ---------- */
.kui-side{
  width:172px; flex:0 0 172px; background:var(--kx-ink);
  border-right:1px solid var(--kx-ink-line); padding:0; overflow:hidden;
}
.kui-brand{padding:13px 14px 12px;border-bottom:1px solid var(--kx-ink-line)}
.kui-wm{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:15px;letter-spacing:.01em;color:#fff;line-height:1}
.kui-wm span{color:var(--kx-green)}
.kui-tag{margin-top:5px;font-size:8.5px;color:var(--kx-ink-dim);letter-spacing:.01em}
.kui-ws{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--kx-ink-line)}
.kui-ws svg{flex:0 0 auto;opacity:.9}
.kui-ws b{font-size:11px;font-weight:600;color:#E8EAEE}
.kui-search{margin:10px;display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;
  border:1px solid var(--kx-ink-line);border-radius:6px;color:var(--kx-ink-dim);font-size:10px}
.kui-nav{padding:2px 8px}
.kui-nav a,.kui-nav div.i{
  display:flex;align-items:center;gap:9px;height:28px;padding:0 8px;border-radius:6px;
  font-size:11.5px;font-weight:500;color:var(--kx-ink-txt);text-decoration:none;margin-bottom:1px;
}
.kui-nav a span,.kui-nav div.i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Reporting & Analytics" is the longest label in the tree and wraps at the
   body size — the real rail keeps every group on one line. */
.kui-nav .i.grp{color:#D6D9DF;font-weight:600;font-size:10.8px;letter-spacing:-.005em}
.kui-nav .i.grp.open{background:rgba(255,255,255,.05)}
.kui-nav .chev{margin-left:auto;opacity:.5}
.kui-nav .sub{padding-left:14px}
.kui-nav .i.on{background:var(--kx-blue);color:#fff;font-weight:600}
.kui-nav .i.on svg{opacity:1}
.kui-nav svg{flex:0 0 auto;opacity:.72}

/* ---------- topbar + page body ---------- */
.kui-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.kui-top{
  height:42px;flex:0 0 42px;background:var(--kx-ink-2);display:flex;align-items:center;
  gap:11px;padding:0 14px;color:#E8EAEE;
}
.kui-top .tt{font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.kui-top .sp{margin-left:auto;display:flex;align-items:center;gap:13px;opacity:.72}
.kui-av{display:flex;align-items:center;gap:7px;margin-left:4px;opacity:1}
.kui-av .cir{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#4F46E5,#2563EB);
  display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff}
.kui-av .nm{display:block;font-size:10.5px;font-weight:600;line-height:1.15;color:#fff;white-space:nowrap}
.kui-av .rl{display:block;font-size:8.5px;color:#9AA0AC;white-space:nowrap}

.kui-body{flex:1 1 auto;min-height:0;overflow:hidden;padding:16px 18px}
.kui-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--kx-txt);line-height:1.15}
.kui-sub{font-size:11px;color:var(--kx-txt-3);margin-top:3px}
.kui-hrow{display:flex;align-items:flex-start;gap:11px}
.kui-hrow .sp{margin-left:auto;display:flex;align-items:center;gap:7px}
.kui-tile{width:34px;height:34px;border-radius:9px;background:var(--kx-blue);display:grid;place-items:center;flex:0 0 auto}

/* ---------- generic app primitives ---------- */
.kui-card{background:var(--kx-card);border:1px solid var(--kx-line);border-radius:9px}
.kui-card>.hd{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--kx-line-2)}
.kui-card>.hd b{font-size:12px;font-weight:700}
.kui-card>.hd .c{font-size:10px;color:var(--kx-txt-3);font-weight:500}
.kui-card>.hd .sp{margin-left:auto;display:flex;align-items:center;gap:6px}

.kui-btn{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:6px;
  border:1px solid var(--kx-line);background:#fff;font-size:10.5px;font-weight:600;color:var(--kx-txt-2);white-space:nowrap}
.kui-btn.pri{background:var(--kx-blue);border-color:var(--kx-blue);color:#fff}
.kui-btn.pur{background:#7C3AED;border-color:#7C3AED;color:#fff}
.kui-btn.dgr{border-color:#FCA5A5;color:#DC2626}
.kui-btn.act{border-color:var(--kx-blue);color:var(--kx-blue)}
.kui-inp{display:flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--kx-line);
  border-radius:6px;background:#fff;font-size:10.5px;color:var(--kx-txt-3)}
.kui-sel{display:flex;align-items:center;height:26px;padding:0 9px;border:1px solid var(--kx-line);
  border-radius:6px;background:#fff;font-size:10.5px;color:var(--kx-txt-2)}
.kui-sel::after{content:"";margin-left:7px;width:0;height:0;border:3.2px solid transparent;border-top-color:#9AA0AC;translate:0 2px}
.kui-badge{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;
  font-size:9px;font-weight:700;letter-spacing:.01em}
.kui-badge.ok{background:var(--kx-ok-bg);color:var(--kx-ok-tx)}
.kui-badge.warn{background:var(--kx-warn-bg);color:var(--kx-warn-tx)}
.kui-badge.hot{background:var(--kx-hot-bg);color:var(--kx-hot-tx)}
.kui-badge.info{background:var(--kx-info-bg);color:var(--kx-info-tx)}
.kui-badge.mut{background:#F1F2F4;color:#6B7280}
.kui-chk{width:12px;height:12px;border:1.5px solid #C6CAD1;border-radius:3px;flex:0 0 auto;position:relative;background:#fff}
.kui-chk.on{background:var(--kx-blue);border-color:var(--kx-blue)}
.kui-chk.on::after{content:"";position:absolute;left:3px;top:1px;width:4px;height:7px;
  border:1.8px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.kui-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:7px;
  font-size:11px;font-weight:700}
.kui-pill.b{background:#EFF4FE;border:1px solid #C7D9FB;color:var(--kx-blue)}
.kui-pill.g{background:#EFFBF3;border:1px solid #BBEBCD;color:#15803D}
.kui-pill i{font-style:normal;font-weight:500;color:var(--kx-txt-3);font-size:10px}

/* ============================================================
   VIEW · Dashboard
   ============================================================ */
.kui-listcard{width:236px;background:#fff;border:1px solid var(--kx-line);border-radius:8px;padding:9px 10px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kui-listcard .lh{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.kui-listcard .lh b{font-size:11.5px;font-weight:700}
.kui-listcard .lh .n{font-size:9.5px;color:var(--kx-txt-3);margin-left:auto}
.kui-todo{display:flex;align-items:flex-start;gap:7px;padding:4px 0;font-size:10.5px;color:var(--kx-txt-2)}
.kui-todo .tx{position:relative}
.kui-todo .tx::after{content:"";position:absolute;left:0;top:52%;height:1px;width:0;background:var(--kx-txt-3);
  transition:width .42s cubic-bezier(.4,0,.2,1)}
.kui-todo.done{color:var(--kx-txt-3)}
.kui-todo.done .tx::after{width:100%}
.kui-add{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--kx-txt-3);padding-top:6px}

.kui-task{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-bottom:1px solid var(--kx-line-2)}
.kui-task:last-child{border-bottom:0}
.kui-task .t1{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kui-task .t1 b{font-size:11.5px;font-weight:700;color:var(--kx-txt)}
.kui-task .t2{font-size:9.5px;color:var(--kx-txt-3);margin-top:3px}
.kui-pri{font-size:9px;font-weight:700}
.kui-pri.high{color:#DC2626}
.kui-pri.med{color:#D97706}

/* ============================================================
   VIEW · Deal pipeline (kanban)
   ============================================================ */
.kui-board{display:flex;gap:10px;margin-top:11px;height:346px;position:relative}
/* space the dragged card vacates, reclaimed once the drop lands */
.kui-slot{flex:0 0 auto;height:102px;transition:height .5s cubic-bezier(.4,0,.2,1),margin-bottom .5s cubic-bezier(.4,0,.2,1)}
.kui-slot.gone{height:0;margin-bottom:-7px}
/* dashed target that appears in the destination column while dragging */
.kui-drop{height:102px;border:1.5px dashed #93B4F7;border-radius:7px;background:rgba(37,99,235,.05);
  opacity:0;transition:opacity .3s ease}
.kui-drop.on{opacity:1}
.kui-col{flex:1 1 0;min-width:0;background:#F1F2F5;border:1px solid var(--kx-line);border-radius:9px;
  display:flex;flex-direction:column;overflow:hidden}
.kui-col.acc-b{border-color:#93B4F7;box-shadow:inset 3px 0 0 var(--kx-blue-2)}
.kui-col.acc-y{border-color:#F5D48A;box-shadow:inset 3px 0 0 #F0B429}
.kui-col>.ch{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border-bottom:1px solid var(--kx-line)}
.kui-col>.ch .dot{width:7px;height:7px;border-radius:50%;background:#9AA0AC}
.kui-col.acc-b>.ch .dot{background:var(--kx-blue-2)}
.kui-col.acc-y>.ch .dot{background:#F0B429}
.kui-col>.ch b{font-size:11px;font-weight:700}
.kui-col.acc-b>.ch b{color:var(--kx-blue)}
.kui-col.acc-y>.ch b{color:#B45309}
.kui-col>.ch .n{margin-left:auto;min-width:17px;height:16px;padding:0 5px;border-radius:4px;background:#EDEFF2;
  font-size:9px;font-weight:700;color:var(--kx-txt-2);display:grid;place-items:center}
.kui-col>.cb{flex:1 1 auto;padding:8px;display:flex;flex-direction:column;gap:7px;overflow:hidden;position:relative}
.kui-col .empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;
  color:#B9BEC7;font-size:9.5px;transition:opacity .3s ease}

.kui-deal{background:#fff;border:1px solid var(--kx-line);border-radius:7px;padding:8px 9px 7px 14px;position:relative;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.kui-deal::before{content:"";position:absolute;left:5px;top:9px;width:3px;height:9px;border-radius:2px;
  background:repeating-linear-gradient(#D3D6DC 0 1px,transparent 1px 3px)}
.kui-deal .d1{display:flex;align-items:baseline;gap:8px}
.kui-deal .d1 a{font-size:11px;font-weight:700;color:var(--kx-blue);text-decoration:none}
.kui-deal .d1 .v{margin-left:auto;font-size:11px;font-weight:700;color:var(--kx-txt)}
.kui-deal .d2{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--kx-txt-2);margin-top:5px}
.kui-deal .d3{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--kx-txt-3);margin-top:3px}
.kui-deal .d4{display:flex;align-items:center;gap:9px;font-size:8.5px;color:#9AA0AC;margin-top:6px;
  padding-top:6px;border-top:1px solid var(--kx-line-2);flex-wrap:nowrap;white-space:nowrap}
.kui-deal .d4>span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.kui-deal .d4>span:last-child{margin-left:auto;flex:0 0 auto}
.kui-deal .d2,.kui-deal .d3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   VIEW · Quotes (filters + table)
   ============================================================ */
.kui-stat{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:8px;border:1px solid}
.kui-stat.b{background:#F4F7FE;border-color:#D5E2FC}
.kui-stat.g{background:#F2FCF6;border-color:#CBEEDA}
.kui-stat .ic{width:24px;height:24px;border-radius:6px;display:grid;place-items:center}
.kui-stat.b .ic{background:#DEE9FD}
.kui-stat.g .ic{background:#D6F3E2}
.kui-stat .v{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1}
.kui-stat .l{display:block}
.kui-stat.b .v{color:var(--kx-blue)}
.kui-stat.g .v{color:#15803D}
.kui-stat .l{font-size:9.5px;color:var(--kx-txt-3);margin-top:2px}

.kui-chips{display:flex;flex-wrap:wrap;gap:6px}
.kui-chip{height:23px;padding:0 10px;border-radius:6px;border:1px solid var(--kx-line);background:#fff;
  font-size:10px;font-weight:600;color:var(--kx-txt-2);display:inline-flex;align-items:center;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.kui-chip.on{background:var(--kx-blue);border-color:var(--kx-blue);color:#fff}

.kui-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.kui-tbl th{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A909C;
  text-align:left;padding:8px 9px;border-bottom:1px solid var(--kx-line);white-space:nowrap}
.kui-tbl td{font-size:10.5px;color:var(--kx-txt-2);padding:9px;border-bottom:1px solid var(--kx-line-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kui-tbl td.q{color:var(--kx-blue);font-weight:700}
.kui-tbl td.strong{color:var(--kx-txt);font-weight:700}
.kui-tbl tr{transition:opacity .3s ease,background .3s ease}
.kui-tbl tr.dim{opacity:.28}
.kui-tbl tbody tr.hl{background:#F6F9FF}

/* ============================================================
   VIEW · Sales dashboard (analytics)
   ============================================================ */
.kui-eyebrow{font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8A909C;margin-bottom:7px}
.kui-mets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.kui-met{border:1px solid;border-radius:9px;padding:9px 11px 10px;position:relative;overflow:hidden}
.kui-met .l{font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.kui-met .v{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:2px}
.kui-met .ic{position:absolute;right:10px;top:11px;opacity:.5}
.kui-met .bt{margin-top:8px;height:19px;border-radius:5px;display:grid;place-items:center;
  font-size:8.5px;font-weight:700;color:#fff}
.kui-met.m1{background:linear-gradient(135deg,#F7EEFE,#EDE7FE);border-color:#DFD2FA;color:#6D28D9}
.kui-met.m1 .bt{background:#8B5CF6}
.kui-met.m2{background:linear-gradient(135deg,#EEF5FE,#E4EFFE);border-color:#CFE0FB;color:#1D4ED8}
.kui-met.m2 .bt{background:#3B82F6}
.kui-met.m3{background:linear-gradient(135deg,#EDFBF1,#E1F7E9);border-color:#C6EDD3;color:#15803D}
.kui-met.m3 .bt{background:#22A75A}
.kui-met.m4{background:linear-gradient(135deg,#EEF1FE,#E5EAFD);border-color:#D2DAFA;color:#3730A3}
.kui-met.m4 .bt{background:#4F46E5}
.kui-met.p1{background:linear-gradient(135deg,#E9FAFB,#DFF6F8);border-color:#C2EAEE;color:#0E7490}
.kui-met.p2{background:linear-gradient(135deg,#E7FAF3,#DCF6ED);border-color:#BEEBDC;color:#0F766E}
.kui-met.p3{background:linear-gradient(135deg,#EBFAEC,#E0F6E2);border-color:#C4EBC7;color:#15803D}
.kui-met.p4{background:linear-gradient(135deg,#F5FBE4,#EEF8D6);border-color:#DCEDB4;color:#4D7C0F}

.kui-big{font-size:44px;font-weight:800;letter-spacing:-.04em;color:#DC2626;line-height:1}
.kui-spark{display:block;width:100%;height:42px}
.kui-spark path{stroke:#DC2626;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.kui-perf{display:flex;align-items:center;gap:9px;margin-top:8px}
.kui-perf .nm{width:66px;flex:0 0 66px;font-size:10.5px;font-weight:600;color:var(--kx-txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kui-perf .tr{flex:1 1 auto;height:19px;border-radius:5px;background:#EFF0F3;position:relative;overflow:hidden}
.kui-perf .tr>i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:#DC2626;
  transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.kui-perf .tr>i.g{background:#22A75A}
.kui-perf .tr>span{position:absolute;inset:0;display:grid;place-items:center;font-size:9.5px;
  font-weight:700;color:var(--kx-txt-2)}

/* ============================================================
   VIEW · Production gantt
   ============================================================ */
.kui-tabs{display:flex;gap:16px;border-bottom:1px solid var(--kx-line);margin-top:11px}
.kui-tabs .t{display:flex;align-items:center;gap:5px;padding:0 0 7px;font-size:11px;font-weight:600;color:var(--kx-txt-3)}
.kui-tabs .t.on{color:var(--kx-blue);box-shadow:inset 0 -2px 0 var(--kx-blue)}
.kui-strip{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #BBE7CB;
  background:#F1FBF5;border-radius:8px;margin-top:10px}
.kui-strip .s{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:6px;
  background:#fff;border:1px solid #C9E9D6;font-size:9.5px;font-weight:700;color:var(--kx-txt-2)}
.kui-strip .ln{width:20px;height:2px;background:#7CC79A;border-radius:2px}
.kui-strip .w{font-size:9.5px;font-weight:700;color:#15803D}

.kui-gantt{margin-top:10px;border:1px solid var(--kx-line);border-radius:8px;overflow:hidden;background:#fff}
.kui-gantt .yr{text-align:center;font-size:9px;font-weight:700;color:var(--kx-txt-3);padding:5px 0 2px}
.kui-gantt .mo{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--kx-line)}
.kui-gantt .mo span{text-align:center;font-size:9.5px;font-weight:700;color:#DC2626;padding:0 0 6px}
.kui-grow{position:relative;height:38px;border-bottom:1px solid var(--kx-line-2);
  background:linear-gradient(90deg,transparent 0 33.33%,#FDF2F2 33.33% 66.66%,transparent 66.66%)}
.kui-grow:nth-child(even){background-color:#FAFBFC}
.kui-gbar{position:absolute;top:9px;height:20px;border-radius:5px;background:var(--kx-blue-2);
  box-shadow:0 1px 3px rgba(37,99,235,.35);
  transition:left .8s cubic-bezier(.34,1.3,.5,1),width .8s cubic-bezier(.34,1.3,.5,1),transform .3s ease}
.kui-gbar .lb{position:absolute;left:calc(100% + 7px);top:50%;translate:0 -50%;white-space:nowrap;
  font-size:10px;font-weight:600;color:var(--kx-txt-2)}
.kui-prog{flex:0 0 auto;width:64px;height:6px;border-radius:4px;background:#EDEFF2;overflow:hidden}
.kui-prog>i{display:block;height:100%;width:0;background:var(--kx-blue);border-radius:4px;
  transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.kui-legend{display:flex;align-items:center;gap:9px;font-size:9px;color:var(--kx-txt-2)}
.kui-legend b{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.kui-legend i{width:8px;height:8px;border-radius:2px}
.kui-seg{display:inline-flex;flex:0 0 auto;border:1px solid var(--kx-line);border-radius:6px;overflow:hidden;background:#fff}
.kui-seg span{flex:0 0 auto;padding:0 10px;height:22px;display:grid;place-items:center;font-size:10px;
  font-weight:600;color:var(--kx-txt-2);white-space:nowrap}
.kui-legend{flex:0 0 auto}
.kui-seg span.on{background:#EDEFF2;color:var(--kx-txt)}

/* ============================================================
   Motion layer — cursor, pop-outs, toasts, step choreography
   ============================================================ */

/* ghost cursor that performs the interaction */
.kui-cursor{
  position:absolute;left:0;top:0;width:17px;height:17px;z-index:30;pointer-events:none;
  opacity:0;translate:var(--cx,50%) var(--cy,50%);
  transition:translate .85s cubic-bezier(.45,.05,.2,1),opacity .3s ease;
  filter:drop-shadow(0 2px 4px rgba(16,24,40,.35));
}
.kui-cursor::after{
  content:"";position:absolute;left:-9px;top:-9px;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--kx-blue);opacity:0;
}
.kui[data-step]:not([data-step="0"]) .kui-cursor{opacity:1}
.kui-cursor.tap::after{animation:kui-tap .55s ease-out}
@keyframes kui-tap{0%{opacity:.75;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}

/* annotation pop-outs: the "here's what just happened" callouts */
.kui-pop{
  position:absolute;z-index:28;max-width:210px;
  background:var(--sumi,#1B1C21);color:#F4EFE4;border-radius:9px;padding:8px 11px;
  box-shadow:0 14px 30px -12px rgba(16,24,40,.55);
  opacity:0;translate:0 8px;scale:.94;transform-origin:var(--po,50% 100%);
  transition:opacity .32s ease,translate .38s cubic-bezier(.34,1.4,.5,1),scale .38s cubic-bezier(.34,1.4,.5,1);
  pointer-events:none;
}
.kui-pop b{display:block;font-size:11px;font-weight:700;letter-spacing:-.005em;line-height:1.25}
.kui-pop span{display:block;font-size:9.5px;line-height:1.4;color:#C9C6BE;margin-top:2px}
.kui-pop::after{content:"";position:absolute;width:9px;height:9px;background:var(--sumi,#1B1C21);rotate:45deg}
.kui-pop.ar-b::after{left:var(--ax,22px);bottom:-4px}
.kui-pop.ar-t::after{left:var(--ax,22px);top:-4px}
.kui-pop.ar-l::after{left:-4px;top:var(--ay,16px)}
.kui-pop.ar-r::after{right:-4px;top:var(--ay,16px)}
.kui-pop.shu{background:var(--shu-deep,#B23A2F)}
.kui-pop.shu::after{background:var(--shu-deep,#B23A2F)}
.kui-pop.matcha{background:var(--matcha-deep,#5C6E3C)}
.kui-pop.matcha::after{background:var(--matcha-deep,#5C6E3C)}
.kui-pop.on{opacity:1;translate:0 0;scale:1}

/* in-app toast, the way the product actually confirms an action */
.kui-toast{
  position:absolute;right:14px;bottom:14px;z-index:26;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--kx-line);border-left:3px solid #22A75A;border-radius:8px;
  padding:8px 12px;box-shadow:0 12px 26px -10px rgba(16,24,40,.35);
  opacity:0;translate:0 10px;transition:opacity .3s ease,translate .35s cubic-bezier(.34,1.4,.5,1);
}
.kui-toast b{font-size:10.5px;font-weight:700}
.kui-toast span{display:block;font-size:9px;color:var(--kx-txt-3);margin-top:1px}
.kui-toast.on{opacity:1;translate:0 0}

/* elements that enter on a step */
.kui-in{opacity:0;translate:0 -6px;transition:opacity .4s ease,translate .45s cubic-bezier(.34,1.35,.5,1)}
.kui-in.on{opacity:1;translate:0 0}
/* a table/list row that is created mid-animation: collapse until it exists,
   otherwise the card reserves a blank gap for the first three steps */
.kui-rowin{max-height:0;overflow:hidden;opacity:0;padding-top:0;padding-bottom:0;border-bottom-width:0;
  transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .35s ease .12s,padding .5s cubic-bezier(.4,0,.2,1)}
.kui-rowin.on{max-height:62px;opacity:1;padding-top:9px;padding-bottom:9px;border-bottom-width:1px}
/* elements the timeline retires (superseded badges, empty-state placeholders) */
.kui .hide{display:none!important}
/* a row that flashes when it is created/updated */
@keyframes kui-flash{0%{background:#EAF2FE}100%{background:transparent}}
.kui-flash{animation:kui-flash 1.6s ease-out}

/* The card being dragged across the board. It is a child of .kui-board rather
   than of a column: a column clips its own overflow, so a card animated inside
   one vanishes the moment it crosses the edge. Coordinates match the slot it
   starts in (measured against the 880x550 canvas). */
.kui-drag{position:absolute;left:9px;top:42px;width:142px;z-index:12;
  transition:transform .9s cubic-bezier(.45,.05,.2,1),box-shadow .3s ease,rotate .3s ease}
.kui-drag.lift{box-shadow:0 16px 30px -10px rgba(16,24,40,.4);rotate:-1.6deg}

/* counters roll rather than jump */
.kui-num{display:inline-block;transition:none}

/* ---------- step choreography (declarative, per view) ----------
   Coordinates are DESIGN-SPACE pixels against the 880x550 canvas, measured
   from the rendered replica rather than guessed — if you move an element in
   app/ui-anim.php, re-measure before nudging these.                        */

/* Dashboard: cursor to the second priority, tick it, then a lead lands. */
.kui-dash .kui-cursor{--cx:216px;--cy:226px}
.kui-dash[data-step="0"] .kui-cursor{--cx:430px;--cy:320px;opacity:0}

/* Pipeline: pick up the $7,000 deal, carry it into Quoting, drop it. */
.kui-pipe .kui-cursor{--cx:262px;--cy:236px}
.kui-pipe[data-step="0"] .kui-cursor{--cx:210px;--cy:340px;opacity:0}
.kui-pipe[data-step="2"] .kui-cursor,
.kui-pipe[data-step="3"] .kui-cursor,
.kui-pipe[data-step="4"] .kui-cursor{--cx:600px;--cy:228px}
.kui-pipe[data-step="1"] .kui-drag{transform:translate(0,-3px)}
.kui-pipe[data-step="2"] .kui-drag,
.kui-pipe[data-step="3"] .kui-drag,
.kui-pipe[data-step="4"] .kui-drag{transform:translate(341px,-8px)}

/* Quotes: click the "To Close This Week" filter, then the survivor books. */
.kui-quotes .kui-cursor{--cx:528px;--cy:206px}
.kui-quotes[data-step="0"] .kui-cursor{--cx:560px;--cy:330px;opacity:0}

/* Gantt: operations land, then #20 is dragged a week right and #30 follows. */
.kui-gantt-v .kui-cursor{--cx:566px;--cy:418px}
.kui-gantt-v[data-step="0"] .kui-cursor{--cx:610px;--cy:470px;opacity:0}
.kui-gantt-v[data-step="3"] .kui-cursor,
.kui-gantt-v[data-step="4"] .kui-cursor{--cx:616px;--cy:418px}

/* ---------- mobile / phone replica ---------- */
.kui-phone{
  --k:1;
  position:relative;width:246px;margin-inline:auto;aspect-ratio:246/500;
}
.kui-phone .shellp{
  position:absolute;inset:0;border-radius:32px;background:#101114;padding:8px;
  box-shadow:0 30px 60px -22px rgba(16,24,40,.6),0 0 0 1.5px rgba(255,255,255,.09) inset;
}
.kui-phone .screen{
  position:relative;width:100%;height:100%;border-radius:25px;overflow:hidden;background:var(--kx-bg,#F7F8FA);
  display:flex;flex-direction:column;
}
.kui-phone .notch{position:absolute;left:50%;translate:-50% 0;top:9px;width:66px;height:16px;border-radius:9px;
  background:#101114;z-index:20}
.kui-mtop{flex:0 0 auto;background:#17181C;color:#fff;padding:22px 13px 10px;display:flex;align-items:center;gap:8px}
.kui-mtop .wm{font-size:12px;font-weight:800}
.kui-mtop .wm span{color:var(--kx-green,#34D399)}
.kui-mtop .cir{margin-left:auto;width:19px;height:19px;border-radius:50%;
  background:linear-gradient(135deg,#4F46E5,#2563EB);display:grid;place-items:center;font-size:9px;font-weight:700}
.kui-mbody{flex:1 1 auto;position:relative;overflow:hidden}
.kui-mscreen{position:absolute;inset:0;padding:11px;opacity:0;translate:0 14px;
  transition:opacity .45s ease,translate .5s cubic-bezier(.34,1.3,.5,1)}
.kui-mscreen.on{opacity:1;translate:0 0}
.kui-mnav{flex:0 0 auto;display:flex;background:#fff;border-top:1px solid var(--kx-line,#E5E7EB);padding:7px 0 9px}
.kui-mnav .n{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:8px;font-weight:600;color:#9AA0AC}
.kui-mnav .n.on{color:var(--kx-blue,#2563EB)}
.kui-push{
  position:absolute;left:9px;right:9px;top:9px;z-index:15;display:flex;gap:9px;align-items:flex-start;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:12px;padding:9px 10px;
  box-shadow:0 12px 28px -10px rgba(16,24,40,.45);
  opacity:0;translate:0 -18px;transition:opacity .4s ease,translate .45s cubic-bezier(.34,1.4,.5,1);
}
.kui-push.on{opacity:1;translate:0 0}
.kui-push .ico{width:20px;height:20px;border-radius:5px;background:var(--kx-blue,#2563EB);display:grid;place-items:center;flex:0 0 auto}
.kui-push b{font-size:10px;font-weight:700;display:block}
.kui-push span{font-size:9px;color:#6B7280;display:block;margin-top:1px;line-height:1.35}
.kui-mcard{background:#fff;border:1px solid var(--kx-line,#E5E7EB);border-radius:9px;padding:10px}
.kui-mrow{display:flex;align-items:center;gap:7px;font-size:10px;color:#4B5563;padding:5px 0}
.kui-mbtn{height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:10.5px;font-weight:700;color:#fff;background:var(--kx-blue,#2563EB)}
.kui-mbtn.g{background:#16A34A}
.kui-mbtn.o{background:#fff;color:#2563EB;border:1px solid #BFD4FA}
.kui-dots{display:flex;gap:5px;justify-content:center;margin-top:14px}
.kui-dots i{width:5px;height:5px;border-radius:50%;background:var(--line,rgba(27,28,33,.2));transition:all .3s ease}
.kui-dots i.on{background:var(--shu,#D8473A);width:16px;border-radius:3px}

/* phone-side annotation rail */
.kui-phone-stage{display:grid;grid-template-columns:1fr 246px;gap:44px;align-items:center}
.kui-rail{display:flex;flex-direction:column;gap:11px}
.kui-rail .r{
  background:var(--washi,#F4EFE4);border:1px solid var(--line,rgba(27,28,33,.14));border-radius:11px;padding:11px 13px;
  opacity:.34;transform:translateX(-6px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.3,.5,1),border-color .4s ease,background .4s ease,box-shadow .4s ease;
}
.kui-rail .r.on{opacity:1;transform:translateX(0);border-color:rgba(216,71,58,.45);background:#fff;
  box-shadow:0 12px 26px -14px rgba(27,28,33,.35)}
.kui-rail .r .n{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--shu-deep,#B23A2F)}
.kui-rail .r b{display:block;font-size:14.5px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
.kui-rail .r p{font-size:12.5px;color:var(--sumi-2,#3C3D45);margin-top:3px;line-height:1.45}
.kui-rail.right .r{text-align:left}
@media(max-width:900px){
  .kui-phone-stage{grid-template-columns:1fr;justify-items:center}
  .kui-rail{width:100%;max-width:420px}
}

/* ---------- caption strip under a replica ---------- */
.kui-caption{
  display:flex;align-items:center;gap:9px;margin-top:11px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.03em;color:var(--sumi-3,#6B6A66);
}
.kui-caption .live{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;
  color:var(--shu-deep,#B23A2F);font-weight:600}
.kui-caption .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--shu,#D8473A);
  animation:kui-pulse 1.9s ease-in-out infinite}
@keyframes kui-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.kui-steps{margin-left:auto;display:flex;gap:5px}
/* The hero already narrates itself with the floating chips, and the caption
   strip collides with them under the tilted frame. */
.hero-shot .kui-caption{display:none}
.kui-steps i{width:16px;height:3px;border-radius:2px;background:var(--line,rgba(27,28,33,.16));transition:background .3s ease}
.kui-steps i.on{background:var(--shu,#D8473A)}

/* ---------- reduced motion: land on the final, legible state ---------- */
@media (prefers-reduced-motion:reduce){
  .kui-cursor{display:none}
  .kui-pop,.kui-toast,.kui-in,.kui-mscreen,.kui-push{opacity:1!important;translate:0 0!important;scale:1!important}
  .kui-mscreen:not(.on){display:none}
  .kui-drag{transform:none!important}
  .kui-spark path{stroke-dashoffset:0!important}
  .kui-flash{animation:none}
  .kui-rail .r{opacity:1}
}