/* ═══════════════════════════════════════════════════════════════
   frames.css · the products' own design tokens and components
   Lifted verbatim from the live products (weft / shuttle / warp).
   Everything is scoped under .ui so it can never touch site styles.
   Do not restyle this file to match the portfolio. The screens are
   the screens.
   ═══════════════════════════════════════════════════════════════ */

.ui{
  --ground:#f5f6f8; --surface:#fff; --surface-2:#fafbfc; --surface-3:#f0f2f5;
  --line:#e2e5ea; --line-soft:#eef0f3; --line-strong:#cfd5dd; --hover:#f4f6f8;
  --ink:#14171c; --ink-soft:#5c6470; --ink-dim:#878f9b;
  --accent:#26303d; --accent-hover:#323e4e; --accent-soft:#eaeef3;
  --ok:#2f6a4f; --ok-bg:#edf3ef; --ok-line:#c8dbd0;
  --warn:#8a6a24; --warn-bg:#f8f4ea; --warn-line:#e3d6b8;
  --danger:#9d3a34; --danger-bg:#f8eeed; --danger-line:#e2c6c3;
  --info:#3f5573; --info-bg:#eef1f6; --info-line:#ccd5e2;
  --li:#3f5f8f; --li-bg:#eef1f7; --em:#6d6357; --em-bg:#f4f2ef;
  --nav-bg:#1d232b; --nav-ink:#e7eaee;
  --p1:#7b8593; --p2:#636d7c; --p3:#4d5765; --p4:#3a434f; --p5:#26303d;
  --r:6px; --r-lg:8px; --r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Roboto,"Helvetica Neue",Arial,sans-serif;

  width:1160px;
  font-family:var(--font);
  font-size:13px;
  line-height:normal;
  color:var(--ink);
  background:var(--surface);
  text-align:left;
}
.ui *{box-sizing:border-box;margin:0;padding:0;font-family:inherit}

/* ── Shell ─────────────────────────────────────────────────── */
.ui .app{display:flex;height:540px;font-size:13px}
.ui .sb{width:200px;flex:0 0 200px;background:var(--nav-bg);color:var(--nav-ink);
  display:flex;flex-direction:column;padding-top:16px}
.ui .sb-brand{padding:0 18px 16px}
.ui .sb-brand .bn{font-size:12px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase}
.ui .sb-brand .bs{font-size:10px;color:rgba(255,255,255,.42);letter-spacing:.6px;margin-top:2px}
.ui .sb-ch{display:flex;align-items:center;gap:7px;padding:6px 18px;font-size:10px;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--li)}
.ui .sb-ch.li{color:#7fa3d6} .ui .sb-ch.em{color:#b8a893}
.ui.is-warp .sb-ch{color:#b8a893}
.ui .sb-ch i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ui .sb-item{display:flex;align-items:center;padding:8px 18px;font-size:12.5px;
  color:rgba(255,255,255,.6);border-left:2px solid transparent}
.ui .sb-item.on{background:rgba(255,255,255,.08);color:#fff;border-left-color:#fff;font-weight:500}
.ui .sb-item .ct{margin-left:auto;background:#cfd5dd;color:#26303d;font-size:9.5px;font-weight:700;
  min-width:17px;height:17px;border-radius:var(--r-pill);display:flex;align-items:center;
  justify-content:center;padding:0 5px}
.ui .sb-gap{height:1px;background:rgba(255,255,255,.07);margin:8px 0}
.ui .main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--ground)}
.ui .tb{height:40px;flex:0 0 40px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 20px;gap:10px;font-size:12.5px;color:var(--ink-soft)}
.ui .tb b{color:var(--ink);font-weight:500}
.ui .tb .sep{color:var(--ink-dim)}
.ui .tb .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ui .pill{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px}
.ui .pill i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.ui .av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.ui .banner{font-size:11.5px;font-weight:500;padding:6px 20px}
.ui .banner.live,.ui .banner-live{background:var(--warn-bg);border-bottom:1px solid var(--warn-line);
  color:var(--warn);font-size:11.5px;font-weight:500;padding:6px 20px}
.ui .view{flex:1;overflow:hidden;padding:24px 26px}
.ui .h1{font-size:23px;font-weight:300;letter-spacing:-.4px}
.ui .sub{color:var(--ink-soft);font-size:12.5px;margin-top:3px}
.ui .vh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.ui .row{display:flex;align-items:center;gap:8px}

/* ── Cards, stats, controls ────────────────────────────────── */
.ui .grid{display:grid;gap:13px}
.ui .k5{grid-template-columns:repeat(5,1fr)} .ui .k4{grid-template-columns:repeat(4,1fr)}
.ui .k3{grid-template-columns:repeat(3,1fr)} .ui .k2{grid-template-columns:repeat(2,1fr)}
.ui .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.ui .card-h{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.ui .card-h .t{font-size:12.5px;font-weight:600}
.ui .card-b{padding:16px}
.ui .card-f{padding:9px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-dim);
  display:flex;justify-content:space-between;align-items:center}
.ui .stat{padding:15px 16px}
.ui .lbl{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.ui .num{font-size:27px;font-weight:300;letter-spacing:-.7px;margin-top:6px}
.ui .num.sm{font-size:22px}
.ui .delta{font-size:11px;color:var(--ink-soft);margin-top:4px}
.ui .delta.up{color:var(--ok)} .ui .delta.dn{color:var(--danger)} .ui .delta.w{color:var(--warn)}
.ui .badge{display:inline-block;padding:1px 8px;border-radius:4px;font-size:10.5px;font-weight:500;
  background:var(--surface-3);color:var(--ink-soft);border:1px solid var(--line)}
.ui .badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.ui .badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.ui .badge.dn{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.ui .badge.info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.ui .btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:4px;
  font-size:12px;font-weight:500;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft)}
.ui .btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.ui .btn.warnb{background:var(--warn);color:#fff;border-color:var(--warn)}
.ui .btn.sm{padding:3px 9px;font-size:11px}
.ui .sel{border:1px solid var(--line);border-radius:4px;padding:4px 10px;font-size:12px;
  background:var(--surface);color:var(--ink)}
.ui table{width:100%;border-collapse:collapse;font-size:12px}
.ui th{padding:8px 12px;text-align:left;font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-dim);background:var(--surface-2);border-bottom:1px solid var(--line);font-weight:600}
.ui td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.ui tr:last-child td{border-bottom:none}
.ui .tnum{text-align:right}
.ui .avs{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 24px}
.ui.is-warp .avs{background:var(--em-bg);color:var(--em)}
.ui .dim{color:var(--ink-dim);font-size:11px}
.ui .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.ui .tab{padding:7px 13px;font-size:12px;color:var(--ink-soft);border-bottom:2px solid transparent}
.ui .tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.ui .tab .c{margin-left:6px;font-size:10px;background:var(--surface-3);padding:1px 6px;
  border-radius:var(--r-pill)}
.ui .tab.on .c{background:var(--accent);color:#fff}

/* Blur — live client relationships. These rules are absolute. */
.ui .bl{filter:blur(4.5px);user-select:none}
.ui .bl-s{filter:blur(3px);user-select:none}

/* ── Channel picker ────────────────────────────────────────── */
.ui .chgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:660px;margin:0 auto}
.ui .chcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.ui .chcard.on{border-color:var(--line-strong);box-shadow:0 2px 10px rgba(20,23,28,.06)}
.ui .chtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ui .chic{width:38px;height:38px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700}
.ui .chic.li{background:var(--li-bg);color:var(--li)} .ui .chic.em{background:var(--em-bg);color:var(--em)}
.ui .chname{font-size:20px;font-weight:500;letter-spacing:-.3px}
.ui .chdesc{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.55}
.ui .chstats{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ui .chstat b{display:block;font-size:16px;font-weight:500;letter-spacing:-.3px}
.ui .chstat span{font-size:11px;color:var(--ink-dim)}
.ui .chgo{margin-top:18px;font-size:12.5px;font-weight:500;color:var(--ink-soft)}

/* ── KPI cards (current dashboard build) ───────────────────── */
.ui .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px 15px;position:relative;overflow:hidden}
.ui .kpi:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--k,#3f5573)}
.ui .kpi.fill{background:var(--kbg,#f4f2ef)}
.ui .kpi-h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.ui .kpi-ic{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:12px;background:var(--kbg,#eef1f6);color:var(--k,#3f5573)}
.ui .kpi-t{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
.ui .kpi-n{font-size:31px;font-weight:300;letter-spacing:-1px;line-height:1;color:var(--k,#26303d)}
.ui .kpi-s{font-size:11px;color:var(--ink-soft);margin-top:6px}
.ui .kpi-s b{color:var(--k);font-weight:600}
.ui .kpi-bar{height:4px;border-radius:2px;background:var(--surface-3);margin-top:11px;overflow:hidden}
.ui .kpi-bar i{display:block;height:100%;background:var(--k);width:var(--w)}
.ui .k-blue{--k:#2f5597;--kbg:#eaf0fa}
.ui .k-green{--k:#2f6a4f;--kbg:#eaf3ee}
.ui .k-amber{--k:#a8681c;--kbg:#f9f1e6}
.ui .k-teal{--k:#1f6b6b;--kbg:#e7f2f2}
.ui .k-plum{--k:#5b4a8a;--kbg:#f0edf7}
.ui .k-slate{--k:#3f5573;--kbg:#eef1f6}

/* ── Funnel bars ───────────────────────────────────────────── */
.ui .fstage{display:grid;grid-template-columns:120px 1fr 52px;align-items:center;gap:10px;
  margin-bottom:7px;font-size:11.5px}
.ui .fbar{height:26px;border-radius:4px;display:flex;align-items:center;padding:0 9px;
  color:#fff;font-size:11px;font-weight:600}

/* ── Inbox three-pane ──────────────────────────────────────── */
.ui .ib{display:flex;height:100%;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--surface)}
.ui .ib-list{width:270px;flex:0 0 270px;border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.ui .ib-row{padding:10px 13px;border-bottom:1px solid var(--line-soft);display:flex;gap:9px}
.ui .ib-row.on{background:var(--accent-soft)}
.ui .ib-th{flex:1;display:flex;flex-direction:column;background:var(--surface-2)}
.ui .msg{max-width:74%;padding:9px 12px;border-radius:var(--r);font-size:12px;
  line-height:1.55;margin-bottom:9px}
.ui .msg.them{background:var(--surface);border:1px solid var(--line)}
.ui .msg.me{background:var(--accent);color:#fff;margin-left:auto}
.ui .msg .who{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;opacity:.6;margin-bottom:3px}

/* ── Journey timeline ──────────────────────────────────────── */
.ui .jl{position:relative;padding-left:22px}
.ui .jl:before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line)}
.ui .je{position:relative;padding-bottom:14px}
.ui .je:before{content:"";position:absolute;left:-21px;top:3px;width:10px;height:10px;
  border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.ui .je.hi:before{border-color:var(--ok);background:var(--ok)}
.ui .je .d{font-size:10px;color:var(--ink-dim);letter-spacing:.4px}
.ui .je .t{font-size:12px;font-weight:500;margin-top:1px}

/* ── Sequence steps ────────────────────────────────────────── */
.ui .step{border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;
  background:var(--surface);display:flex;align-items:center;gap:10px}
.ui .step .n{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 22px}
.ui .wait{text-align:center;font-size:10.5px;color:var(--ink-dim);padding:5px 0}

/* ── Before / after split ──────────────────────────────────── */
.ui .split{display:grid;grid-template-columns:1fr 1fr}
.ui .lbl-side{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;
  padding:8px 16px;color:#fff}
.ui .side-old .lbl-side{background:#8a6a24} .ui .side-new .lbl-side{background:var(--ok)}
.ui .side-old{border-right:2px solid var(--line-strong)}
.ui .bignum{font-size:58px;font-weight:200;letter-spacing:-2px;line-height:1}
.ui .bigcap{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-dim);
  font-weight:600;margin-top:6px}
.ui .big-cmp{font-size:44px;font-weight:200;letter-spacing:-1.5px;line-height:1}

/* ── Embedded email tool ───────────────────────────────────── */
.ui .embanner{background:var(--warn-bg);border-bottom:1px solid var(--warn-line);color:var(--warn);
  font-size:11px;padding:6px 14px;text-align:center;font-weight:500}

/* ── Template variables (warp) ─────────────────────────────── */
.ui .var{display:inline-block;background:var(--info-bg);color:var(--info);
  border:1px solid var(--info-line);border-radius:3px;padding:0 5px;
  font-family:ui-monospace,Consolas,monospace;font-size:11px}
.ui .resolved{display:inline-block;background:var(--ok-bg);color:var(--ok);
  border:1px solid var(--ok-line);border-radius:3px;padding:0 5px;font-weight:600}

/* ── Cadence timeline (warp) ───────────────────────────────── */
.ui .tl{position:relative;height:96px;margin:20px 0 6px}
.ui .tl-line{position:absolute;left:0;right:0;top:44px;height:2px;background:var(--line)}
.ui .tl-pt{position:absolute;top:34px;width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);display:flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:700;color:var(--accent)}
.ui .tl-pt.off{border-color:var(--line-strong);color:var(--ink-dim);opacity:.45}
.ui .tl-pt.rep{border-color:var(--ok);background:var(--ok);color:#fff;width:26px;height:26px;top:32px}
.ui .tl-lb{position:absolute;top:66px;font-size:10px;color:var(--ink-dim);transform:translateX(-50%)}
.ui .tl-lb.off{text-decoration:line-through;opacity:.5}

/* ── Atlas: stage chips, summary strip, access codes ───────── */
.ui.is-atlas .sb-ch{color:#c9a46a}
.ui .stg{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 1px 7px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:500;border:1px solid var(--line);background:var(--surface-3);color:var(--ink-soft);
  white-space:nowrap}
.ui .stg i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ui .stg.pre{color:#5b4a8a;background:#f0edf7;border-color:#dcd5ec}
.ui .stg.branch{color:#1f6b6b;background:#e7f2f2;border-color:#c6dfdf}
.ui .stg.loom{color:#2f5597;background:#eaf0fa;border-color:#cbd8ef}
.ui .stg.fin{color:#a8681c;background:#f9f1e6;border-color:#ecd8bd}
.ui .stg.disp{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.ui .sumb{display:grid;grid-template-columns:1.5fr repeat(4,1fr);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r)}
.ui .sumb > div{padding:10px 14px;border-left:1px solid var(--line-soft)}
.ui .sumb > div:first-child{border-left:0}
.ui .sumb .n{font-size:21px;font-weight:300;letter-spacing:-.5px;margin-top:3px;color:var(--k,var(--ink))}
.ui .sumb .bar{height:3px;background:var(--surface-3);margin-top:7px;border-radius:2px;overflow:hidden}
.ui .sumb .bar i{display:block;height:100%;width:var(--w);background:var(--k)}
.ui .kv{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;font-size:12px}
.ui .kv dt{color:var(--ink-dim)}
.ui .lnk{color:var(--info);text-decoration:underline;text-underline-offset:2px}
.ui .code{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:4px;
  padding:3px 8px;font-size:11.5px;background:var(--surface-2);font-family:ui-monospace,Consolas,monospace}
.ui .code .x{color:var(--ink-dim)}
.ui .inp{flex:1;border:1px solid var(--line);border-radius:4px;padding:5px 10px;font-size:12px;
  color:var(--ink-dim);background:var(--surface)}