/* ══ AI Call Center console — design system ════════════════════════════════
   One system, used by /outbound and /admin alike.

   Three rules hold the whole thing together:

   1. Every size comes from a token. Seven type steps, four radii, one 4px
      spacing grid. A page that needs an eighth size is a page that needs
      rethinking, not a new value.
   2. Colour is semantic, never decorative. `completed` is the same green in
      a badge, a bar, a chart segment and a funnel stage.
   3. Surfaces are separated by a hairline and a fill, not by shadow. Drop
      shadows are reserved for things that genuinely float — the drawer, the
      command palette, a popover.

   The layout is fluid: content spans the viewport rather than sitting in a
   fixed centred column, because this is an operations console and the screen
   is the working surface.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Neutrals: a cool slate ramp ──────────────────────────────────────── */
  --n-0:#ffffff; --n-25:#fcfcfd; --n-50:#f6f7f9; --n-100:#eff1f5;
  --n-150:#e7eaf0; --n-200:#dde1e9; --n-300:#c2c8d4; --n-400:#98a0b0;
  --n-500:#6a7383; --n-600:#4c5567; --n-700:#39415270; --n-800:#252c3b;
  --n-900:#141a26;

  --txt:#141a26; --txt-2:#4c5567; --txt-3:#79808f; --txt-4:#a3aab8;

  /* ── Semantic states ──────────────────────────────────────────────────
     success = connected / completed / healthy    warning = paused / queued
     danger  = failed / cancelled / blocked       neutral = draft / unknown  */
  --accent:#4f46e5; --accent-2:#4338ca; --accent-3:#6366f1;
  --accent-bg:#eef2ff; --accent-br:#c7d2fe;
  --ok:#047857;  --ok-solid:#059669; --ok-bg:#ecfdf5; --ok-br:#a7f3d0;
  --warn:#b45309; --warn-solid:#d97706; --warn-bg:#fffbeb; --warn-br:#fde68a;
  --err:#b91c1c; --err-solid:#dc2626; --err-bg:#fef2f2; --err-br:#fecaca;
  --info:#0369a1; --info-solid:#0ea5e9; --info-bg:#f0f9ff; --info-br:#bae6fd;

  /* ── Type scale: 7 steps, no others ───────────────────────────────────── */
  --fs-micro:10.5px;   /* uppercase eyebrows, axis ticks           */
  --fs-xs:11.5px;      /* metadata, table sub-lines, hints         */
  --fs-sm:12.5px;      /* controls, chips, dense secondary text    */
  --fs-base:13px;      /* body, table cells                        */
  --fs-md:14px;        /* section titles, drawer headings          */
  --fs-lg:17px;        /* detail-page subject                      */
  --fs-xl:21px;        /* page title                               */
  --fs-num:25px;       /* KPI value                                */

  --fw-n:400; --fw-m:500; --fw-s:600; --fw-b:680;

  /* ── Spacing: a 4px grid ──────────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* ── Radii: 4 steps ───────────────────────────────────────────────────── */
  --r1:4px; --r2:6px; --r3:8px; --r4:11px; --r-pill:99px;

  --sidebar-w:232px;
  --rail:#12151f; --rail-2:#171b28; --rail-br:rgba(255,255,255,.07);
  --rail-txt:#c9cede; --rail-txt-2:#79819a; --rail-on:#a5b4fc;

  --hair:1px solid var(--n-200);
  --hair-soft:1px solid var(--n-150);
  --sh:0 1px 2px rgba(20,26,38,.04);
  --sh-pop:0 16px 40px -12px rgba(20,26,38,.28),0 0 0 1px rgba(20,26,38,.06);
  --tr:.15s cubic-bezier(.4,0,.2,1);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* Chart series. Same hues as the badges, so a status reads identically
     whether it is a pill, a bar or a donut segment. */
  --c-completed:#059669; --c-failed:#dc2626; --c-progress:#4f46e5;
  --c-originated:#0ea5e9; --c-dialing:#d97706; --c-queued:#94a3b8;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:var(--fw-n) var(--fs-base)/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  color:var(--txt);background:var(--n-50);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"cv08" 1;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:var(--r1)}
.num{font-variant-numeric:tabular-nums}
a{color:var(--accent-2)}

/* ══ Shell ═══════════════════════════════════════════════════════════════ */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

.side{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--rail-2),var(--rail));
  border-right:1px solid var(--rail-br);z-index:20;color:var(--rail-txt);
}
.side-top{padding:var(--s4) var(--s3) var(--s3);border-bottom:1px solid var(--rail-br)}
.logo{display:flex;align-items:center;gap:9px;min-width:0}
.logo .mk{
  width:30px;height:30px;border-radius:var(--r3);flex:none;display:grid;place-items:center;
  color:#fff;font-weight:var(--fw-b);font-size:var(--fs-xs);letter-spacing:.3px;
  background:linear-gradient(145deg,var(--accent-3),var(--accent-2));
}
.logo b{font-size:var(--fs-base);font-weight:var(--fw-s);letter-spacing:-.012em;display:block;
  line-height:1.25;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo span{font-size:var(--fs-xs);color:var(--rail-txt-2)}

.nav{padding:var(--s2) var(--s2);flex:1;overflow-y:auto}
.nav-label{
  font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;letter-spacing:.11em;
  color:var(--rail-txt-2);padding:var(--s3) 10px var(--s1);
}
.nav a{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r2);
  color:var(--rail-txt);text-decoration:none;font-size:var(--fs-sm);font-weight:var(--fw-m);
  transition:background var(--tr),color var(--tr);position:relative;
}
.nav a svg{width:15px;height:15px;flex:none;opacity:.55;transition:opacity var(--tr)}
.nav a:hover{background:rgba(255,255,255,.055);color:#fff}
.nav a:hover svg{opacity:.9}
.nav a.on{background:rgba(99,102,241,.18);color:#fff;font-weight:var(--fw-s)}
.nav a.on svg{opacity:1;color:var(--rail-on)}
.nav a.on::before{
  content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  background:var(--accent-3);
}
.nav a .cnt{
  margin-left:auto;font-size:var(--fs-micro);font-weight:var(--fw-s);color:var(--rail-txt-2);
  background:rgba(255,255,255,.07);padding:1.5px 6px;border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
}
.nav a.on .cnt{background:rgba(165,180,252,.18);color:var(--rail-on)}

.side-foot{padding:var(--s2);border-top:1px solid var(--rail-br)}
.me{display:flex;align-items:center;gap:9px;padding:7px;border-radius:var(--r2);min-width:0}
.me .av{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:var(--fs-micro);font-weight:var(--fw-b);color:#fff;
  background:linear-gradient(145deg,var(--accent-3),var(--accent-2));
}
.me .nm{font-size:var(--fs-sm);font-weight:var(--fw-s);line-height:1.3;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .em{font-size:var(--fs-xs);color:var(--rail-txt-2);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .out{
  width:100%;margin-top:var(--s1);padding:6px;border:1px solid var(--rail-br);border-radius:var(--r2);
  background:rgba(255,255,255,.03);color:var(--rail-txt-2);font-size:var(--fs-sm);cursor:pointer;
  transition:background var(--tr),color var(--tr)
}
.side-foot .out:hover{background:rgba(255,255,255,.09);color:#fff}

/* ══ Top bar + content ═══════════════════════════════════════════════════ */
.main{grid-column:2;display:flex;flex-direction:column;min-width:0}
.bar{
  position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:var(--s3);
  height:48px;padding:0 var(--s6);background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(8px);box-shadow:0 1px 0 var(--n-200);
}
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--txt-3);min-width:0}
.crumbs a{color:var(--txt-3);text-decoration:none}
.crumbs a:hover{color:var(--accent-2);text-decoration:underline}
.crumbs b{color:var(--txt);font-weight:var(--fw-s)}
.crumbs .sep{color:var(--n-300)}
.grow{flex:1}
.kbd{
  display:inline-flex;align-items:center;gap:3px;padding:1.5px 5px;border:var(--hair);
  border-bottom-width:2px;border-radius:var(--r1);font-family:var(--mono);
  font-size:var(--fs-micro);color:var(--txt-3);background:var(--n-25)
}

/* Fluid: the console fills the screen it is given. The cap only stops text
   measures becoming absurd on an ultrawide; at 1920 nothing is capped. */
.content{padding:var(--s5) var(--s6) var(--s8);width:100%;max-width:2200px}

/* ══ Page header ═════════════════════════════════════════════════════════ */
.head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.head h1{font-size:var(--fs-xl);font-weight:var(--fw-b);letter-spacing:-.022em;line-height:1.2}
.head p{font-size:var(--fs-sm);color:var(--txt-3);margin-top:2px;max-width:76ch}
.head .acts{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-left:auto}

/* ══ Layout grids ════════════════════════════════════════════════════════
   Named by intent. A dashboard row is not "two equal cards" — one chart
   usually deserves the width and its companion does not. */
.grid{display:grid;gap:var(--s3);align-items:start;margin-bottom:var(--s3)}
.g-rec{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}          /* record: main + rail */
.split{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,1fr);
  gap:var(--s3);align-items:start;margin-bottom:var(--s3)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
  align-items:start;margin-bottom:var(--s3)}

@media(max-width:1240px){
  .split,.g-rec{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .grid,.trio{grid-template-columns:minmax(0,1fr)}
}

/* ══ Buttons ═════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:6.5px var(--s3);border:1px solid transparent;border-radius:var(--r2);
  font-size:var(--fs-sm);font-weight:var(--fw-s);cursor:pointer;white-space:nowrap;
  background:var(--accent);color:#fff;text-decoration:none;
  transition:background var(--tr),border-color var(--tr),color var(--tr);
}
.btn:hover:not(:disabled){background:var(--accent-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:14px;height:14px;flex:none}
.btn.sec{background:var(--n-0);color:var(--txt-2);border-color:var(--n-200)}
.btn.sec:hover:not(:disabled){background:var(--n-50);color:var(--txt);border-color:var(--n-300)}
.btn.dgr{background:var(--n-0);color:var(--err);border-color:var(--err-br)}
.btn.dgr:hover:not(:disabled){background:var(--err-bg)}
.btn.xs{padding:4px 9px;font-size:var(--fs-xs);border-radius:var(--r1)}
.btn.lg{padding:9px var(--s5);font-size:var(--fs-base)}
.btn.qt{background:none;border-color:transparent;color:var(--txt-3)}
.btn.qt:hover:not(:disabled){background:var(--n-100);color:var(--txt)}
.btn.disabled,a.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ══ Panels ══════════════════════════════════════════════════════════════ */
.panel{background:var(--n-0);border:var(--hair);border-radius:var(--r4);overflow:hidden}
.panel + .panel{margin-top:var(--s3)}
.panel.flush{overflow:visible}
.panel-head{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s4);
  border-bottom:var(--hair);flex-wrap:wrap;min-height:44px}
.panel-head h2{font-size:var(--fs-md);font-weight:var(--fw-s);letter-spacing:-.012em;line-height:1.3}
.panel-head p{font-size:var(--fs-xs);color:var(--txt-3);margin-top:1px}
.panel-head .acts{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.panel-head .acts .sbox{flex:0 1 190px;max-width:190px}
.panel-body{padding:var(--s4)}
.panel-body.tight{padding:var(--s3)}
.panel-foot{display:flex;align-items:center;gap:var(--s2);padding:9px var(--s4);
  border-top:var(--hair);background:var(--n-25);font-size:var(--fs-xs);color:var(--txt-3);flex-wrap:wrap}

/* A metric explained on hover — "Answer rate = connected ÷ attempted". */
.info{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--n-300);color:var(--txt-4);font-size:var(--fs-micro);
  font-weight:var(--fw-b);cursor:help;flex:none;line-height:1}
.info:hover{border-color:var(--accent);color:var(--accent)}

/* ══ Filters ═════════════════════════════════════════════════════════════ */
.filters{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;width:100%}
.sbox{position:relative;flex:1 1 200px;max-width:320px}
.sbox input{
  width:100%;padding:6px 10px 6px 29px;background:var(--n-50);border:var(--hair);
  border-radius:var(--r2);font-size:var(--fs-sm);transition:background var(--tr),border-color var(--tr)
}
.sbox input:focus{background:var(--n-0);border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.sbox svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--txt-4)}
select.sel{
  flex:0 0 auto;width:auto;max-width:200px;padding:6px 26px 6px 10px;background:var(--n-50);
  border:var(--hair);border-radius:var(--r2);font-size:var(--fs-sm);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2379808f' stroke-width='2' stroke-linecap='round'><path d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;
}
select.sel:focus{border-color:var(--accent);outline:none}
.count{font-size:var(--fs-xs);color:var(--txt-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.count b{color:var(--txt);font-weight:var(--fw-s)}

/* ══ Tables ══════════════════════════════════════════════════════════════
   First-class in a call centre: compact rows, sticky headers, a hover state
   that reads as "this row opens something". */
.tbl-wrap{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{
  text-align:left;font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.075em;color:var(--txt-4);padding:7px var(--s4);background:var(--n-25);
  border-bottom:var(--hair);white-space:nowrap;
}
thead th.sortable{cursor:pointer;user-select:none;transition:color var(--tr)}
thead th.sortable:hover{color:var(--txt-2)}
thead th .arrow{opacity:0;margin-left:3px;font-size:var(--fs-micro);vertical-align:1px}
thead th.sorted{color:var(--accent-2)}
thead th.sorted .arrow{opacity:1}
tbody td{padding:6px var(--s4);border-bottom:var(--hair-soft);vertical-align:middle;
  font-size:var(--fs-base)}
tbody tr:last-child td{border-bottom:0}
tbody tr.row{cursor:pointer;transition:background var(--tr)}
tbody tr.row:hover{background:var(--n-50);box-shadow:inset 2px 0 0 var(--accent-3)}
tbody tr.row:hover .rowact{opacity:1}
tbody tr.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
tbody tr.sel td{background:var(--accent-bg)}
.rowact{opacity:0;transition:opacity var(--tr);display:flex;gap:5px;justify-content:flex-end}
td.right,th.right{text-align:right}
td.w1,th.w1{width:1%;white-space:nowrap}
td.nowrap{white-space:nowrap}
.tbl-mini tbody td{padding:5px var(--s3)}
.tbl-mini thead th{padding:6px var(--s3)}

.ent{display:flex;align-items:center;gap:9px;min-width:0}
.ent .av{width:26px;height:26px;border-radius:var(--r2);flex:none;display:grid;place-items:center;
  font-size:var(--fs-micro);font-weight:var(--fw-b);color:#fff;letter-spacing:.2px}
.ent .t1{font-size:var(--fs-base);font-weight:var(--fw-s);letter-spacing:-.006em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent .t2{font-size:var(--fs-xs);color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pagination */
.pager{display:flex;align-items:center;gap:var(--s2);padding:8px var(--s4);border-top:var(--hair);
  background:var(--n-25);flex-wrap:wrap}
.pager .pg{font-size:var(--fs-xs);color:var(--txt-3);font-variant-numeric:tabular-nums}

/* ══ Status vocabulary ═══════════════════════════════════════════════════ */
.tag{display:inline-flex;align-items:center;gap:4.5px;padding:1.5px 7px;border-radius:var(--r1);
  font-size:var(--fs-xs);font-weight:var(--fw-s);border:1px solid transparent;white-space:nowrap}
.tag .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag.active{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.tag.suspended,.tag.disabled{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-br)}
.tag.neutral{background:var(--n-100);color:var(--txt-3);border-color:var(--n-200)}
.tag.neutral .dot{display:none}
.tag.accent{background:var(--accent-bg);color:var(--accent-2);border-color:var(--accent-br)}
.tag.accent .dot{display:none}
.tag.danger{background:var(--err-bg);color:var(--err);border-color:var(--err-br)}
.tag.danger .dot{display:none}
.tag.info{background:var(--info-bg);color:var(--info);border-color:var(--info-br)}
.tag.info .dot{display:none}

.mono{font-family:var(--mono);font-size:var(--fs-xs);color:var(--txt-2)}
.chip{font-family:var(--mono);font-size:var(--fs-micro);background:var(--n-100);border:var(--hair);
  padding:1px 6px;border-radius:var(--r1);color:var(--txt-2);white-space:nowrap}
.muted{color:var(--txt-3)}
.unset{color:var(--txt-4);font-style:italic}
.sm{font-size:var(--fs-xs)}
.eyebrow{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.08em;color:var(--txt-4)}

/* ══ KPI tiles ═══════════════════════════════════════════════════════════
   Standalone cards on a gap grid. A partly filled last row simply has fewer
   cards — there is no container to leave an empty cell behind. */
/* A fixed column count, not auto-fill: the tile count is known per page, and
   a count that divides it is what keeps the last row from being a stub. */
.kpis{display:grid;gap:var(--s2);margin-bottom:var(--s3);
  grid-template-columns:repeat(5,minmax(0,1fr))}
.kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{
  background:var(--n-0);border:var(--hair);border-radius:var(--r3);padding:11px var(--s3) 10px;
  position:relative;overflow:hidden;display:block;text-decoration:none;color:inherit;
  transition:border-color var(--tr),background var(--tr);min-width:0;
}
.kpi.link{cursor:pointer}
.kpi.link::after{content:"↗";position:absolute;top:8px;right:10px;font-size:var(--fs-xs);
  color:var(--txt-4);opacity:0;transition:opacity var(--tr)}
.kpi.link:hover{border-color:var(--accent-br);background:var(--accent-bg)}
.kpi.link:hover::after{opacity:1}
.kpi.link:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.kpi-k{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.075em;color:var(--txt-4);display:flex;align-items:center;gap:5px}
.kpi-v{font-size:var(--fs-num);font-weight:var(--fw-b);letter-spacing:-.03em;margin-top:5px;
  line-height:1.05;font-variant-numeric:tabular-nums}
.kpi-f{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.kpi-s{font-size:var(--fs-xs);color:var(--txt-3)}
.delta{font-size:var(--fs-xs);font-weight:var(--fw-s);font-variant-numeric:tabular-nums;
  padding:0 5px;border-radius:var(--r1);background:var(--n-100);color:var(--txt-3)}
.kpi-f.pos .delta{background:var(--ok-bg);color:var(--ok)}
.kpi-f.neg .delta{background:var(--err-bg);color:var(--err)}
.spark{position:absolute;right:11px;bottom:9px;width:54px;height:19px;opacity:.7;pointer-events:none}
.spark path.ln{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spark path.ar{stroke:none}

/* Compact metric row inside a panel (campaign detail, lead profile) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--n-150)}
.stats > div{background:var(--n-0);padding:10px var(--s3)}
.stats .k{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.075em;color:var(--txt-4)}
.stats .v{font-size:19px;font-weight:var(--fw-b);letter-spacing:-.025em;margin-top:3px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.stats .s{font-size:var(--fs-xs);color:var(--txt-3);margin-top:2px}

/* ══ Charts ══════════════════════════════════════════════════════════════
   Fixed heights by role. The primary chart earns real estate; a companion
   chart does not get the same. */
.chartbox{position:relative;height:268px}
.chartbox.tall{height:320px}
.chartbox.sm{height:196px}
.chartbox.donut{height:232px}
.legend{display:flex;flex-direction:column;gap:1px}
.legend .li{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);
  padding:5px 6px;border-radius:var(--r1);text-decoration:none;color:inherit;
  transition:background var(--tr)}
.legend .li:hover{background:var(--n-50)}
.legend .sw{width:10px;height:10px;border-radius:var(--r1);flex:none}
.legend .nm{color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend .vl{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:var(--fw-s)}
.legend .pc{color:var(--txt-4);font-size:var(--fs-xs);min-width:42px;text-align:right;
  font-variant-numeric:tabular-nums}
.legend .li.off{opacity:.4}

/* Horizontal bar list — the workhorse of every breakdown */
.bars{display:flex;flex-direction:column;gap:2px}
.bars .b{display:grid;grid-template-columns:minmax(90px,1.1fr) minmax(0,3fr) 52px 56px;
  align-items:center;gap:var(--s3);font-size:var(--fs-sm);padding:4px 6px;border-radius:var(--r1);
  text-decoration:none;color:inherit;transition:background var(--tr)}
a.b:hover{background:var(--n-50)}
.bars .bl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt-2)}
.bars .bt{height:7px;border-radius:var(--r-pill);background:var(--n-150);overflow:hidden}
.bars .bt i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent);
  transition:width .35s var(--tr)}
.bars .bt i.ok{background:var(--ok-solid)}
.bars .bv{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-s)}
.bars .br{text-align:right;font-variant-numeric:tabular-nums;color:var(--txt-3);font-size:var(--fs-xs)}
.bars.simple .b{grid-template-columns:minmax(90px,1.2fr) minmax(0,3fr) 56px}

/* ══ Funnel ══════════════════════════════════════════════════════════════ */
.funnel{display:flex;flex-direction:column;gap:2px}
.fstage{display:grid;grid-template-columns:126px minmax(0,1fr) 108px;align-items:center;
  gap:var(--s3);padding:5px 6px;border-radius:var(--r1);text-decoration:none;color:inherit;
  transition:background var(--tr)}
.fstage:hover{background:var(--n-50)}
.fstage:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
.fstage .fl{font-size:var(--fs-sm);color:var(--txt-2);font-weight:var(--fw-m)}
.fbar{height:24px;border-radius:var(--r2);background:var(--n-100);overflow:hidden;position:relative}
.fbar i{display:block;height:100%;border-radius:var(--r2);
  background:linear-gradient(90deg,var(--accent-3),var(--accent));transition:width .4s var(--tr)}
.fstage .fv{font-size:var(--fs-base);font-weight:var(--fw-b);font-variant-numeric:tabular-nums;
  text-align:right}
.fstage .fv small{font-weight:var(--fw-m);color:var(--txt-3);font-size:var(--fs-xs);margin-left:5px}
.fdrop{font-size:var(--fs-xs);color:var(--warn);padding:0 6px 3px 138px;
  font-variant-numeric:tabular-nums}

/* ══ Hour-of-day heat ════════════════════════════════════════════════════ */
.hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px}
.hours .hr{height:42px;border-radius:var(--r1);background:var(--n-100);position:relative;
  display:block;text-decoration:none;transition:transform var(--tr)}
.hours a.hr:hover{transform:scaleY(1.08);box-shadow:0 0 0 2px var(--accent-br)}
.hour-ruler{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;margin-top:4px}
.hour-ruler span{font-size:var(--fs-micro);color:var(--txt-4);text-align:center;
  font-variant-numeric:tabular-nums}

/* ══ Day-of-week bars ════════════════════════════════════════════════════ */
.dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2);
  align-items:end;height:150px}
.dow .d{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px;
  text-decoration:none;color:inherit}
.dow .bar{border-radius:var(--r2) var(--r2) 0 0;
  background:linear-gradient(180deg,var(--accent-3),var(--accent));min-height:3px;
  transition:height .3s var(--tr),filter var(--tr)}
.dow a.d:hover .bar{filter:brightness(1.12)}
.dow .bar.dim{background:var(--n-200)}
.dow .bar.best{background:linear-gradient(180deg,#34d399,var(--ok-solid))}
.dow .dwl{font-size:var(--fs-xs);color:var(--txt-3);text-align:center}
.dow .dv{font-size:var(--fs-xs);font-weight:var(--fw-s);text-align:center;
  font-variant-numeric:tabular-nums}

/* ══ Insight line — a sentence computed from the same data as the chart ══ */
.insight{display:flex;align-items:flex-start;gap:7px;margin-top:var(--s3);padding:8px 10px;
  background:var(--n-25);border:var(--hair-soft);border-radius:var(--r2);
  font-size:var(--fs-xs);color:var(--txt-2);line-height:1.5}
.insight svg{width:13px;height:13px;flex:none;color:var(--accent);margin-top:1px}
.insight b{font-weight:var(--fw-s);color:var(--txt)}

/* ══ Progress meter ══════════════════════════════════════════════════════ */
.meter{height:5px;border-radius:var(--r-pill);background:var(--n-150);overflow:hidden;min-width:60px}
.meter.lg{height:10px}
.run-bar{display:flex;flex-direction:column;gap:7px}
.run-legend{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--txt-2)}
.run-legend b{font-weight:var(--fw-b);font-variant-numeric:tabular-nums;color:var(--txt)}
.meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.meter.done i{background:var(--ok-solid)}

/* ══ Empty / loading / error states ══════════════════════════════════════ */
.blank{padding:44px var(--s6);text-align:center}
.blank .ico{width:36px;height:36px;margin:0 auto var(--s3);border-radius:var(--r3);display:grid;
  place-items:center;background:var(--n-100);color:var(--txt-4)}
.blank .ico svg{width:18px;height:18px}
.blank h3{font-size:var(--fs-md);font-weight:var(--fw-s);margin-bottom:3px}
.blank p{font-size:var(--fs-sm);color:var(--txt-3);margin-bottom:var(--s4);max-width:46ch;margin-inline:auto}
.blank.err .ico{background:var(--err-bg);color:var(--err)}
.skel{height:10px;border-radius:var(--r1);
  background:linear-gradient(90deg,var(--n-100),var(--n-150),var(--n-100));
  background-size:200% 100%;animation:sh 1.15s ease-in-out infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-kpi{background:var(--n-0);border:var(--hair);border-radius:var(--r3);padding:11px var(--s3);height:88px}
.skel-chart{height:268px;border-radius:var(--r2);
  background:linear-gradient(90deg,var(--n-50),var(--n-100),var(--n-50));
  background-size:200% 100%;animation:sh 1.15s ease-in-out infinite}

/* ══ Definition lists ════════════════════════════════════════════════════ */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--n-150)}
.dl > div{padding:9px var(--s4);min-width:0;background:var(--n-0)}
.dl dt{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.07em;color:var(--txt-4);margin-bottom:3px}
.dl dd{font-size:var(--fs-base);word-break:break-word}
.dl.rows{grid-template-columns:1fr}
.dl.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl.pairs{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* ══ Detail-page header ══════════════════════════════════════════════════ */
.rec{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);flex-wrap:wrap}
.rec + .dl,.rec + .stats{border-top:var(--hair)}
.rec .idav{width:40px;height:40px;border-radius:var(--r3);flex:none;display:grid;place-items:center;
  color:#fff;font-weight:var(--fw-b);font-size:var(--fs-md)}
.rec h1{font-size:var(--fs-lg);font-weight:var(--fw-b);letter-spacing:-.02em;line-height:1.25}
.rec .meta{font-size:var(--fs-xs);color:var(--txt-3);margin-top:3px;display:flex;gap:var(--s2);
  flex-wrap:wrap;align-items:center}
.rec .acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}

/* ══ Drawer / modal ══════════════════════════════════════════════════════ */
.scrim{position:fixed;inset:0;background:rgba(20,26,38,.4);opacity:0;pointer-events:none;
  transition:opacity var(--tr);z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--n-0);
  box-shadow:var(--sh-pop);transform:translateX(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);z-index:61;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-head{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:var(--hair);flex:none}
.dr-head h2{font-size:var(--fs-md);font-weight:var(--fw-b);letter-spacing:-.015em}
.dr-head p{font-size:var(--fs-xs);color:var(--txt-3);margin-top:2px}
.dr-body{padding:var(--s5);overflow-y:auto;flex:1}
.dr-foot{display:flex;gap:var(--s2);justify-content:flex-end;padding:var(--s3) var(--s5);
  border-top:var(--hair);background:var(--n-25);flex:none}
.xbtn{background:none;border:0;cursor:pointer;color:var(--txt-4);padding:5px;border-radius:var(--r1);line-height:0}
.xbtn:hover{background:var(--n-100);color:var(--txt)}

/* ══ Forms ═══════════════════════════════════════════════════════════════ */
.grp{margin-bottom:var(--s5);border:0;padding:0}
.grp > legend{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.09em;color:var(--txt-4);margin-bottom:var(--s2);display:block}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.fld{margin-bottom:var(--s3);min-width:0}
.fld:last-child{margin-bottom:0}
label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-m);color:var(--txt-2);margin-bottom:4px}
label .rq{color:var(--err)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],
input[type=number],textarea,.fld select,select.wide{
  width:100%;padding:7px 10px;font-size:var(--fs-base);background:var(--n-0);
  border:1px solid var(--n-200);border-radius:var(--r2);
  transition:border-color var(--tr),box-shadow var(--tr)
}
input:focus,textarea:focus,.fld select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,70,229,.1)}
input:disabled,select:disabled{background:var(--n-50);color:var(--txt-4);cursor:not-allowed}
textarea{resize:vertical;min-height:60px;font-family:inherit}
.hint{font-size:var(--fs-xs);color:var(--txt-3);margin-top:3px;line-height:1.5}
.bad-txt{font-size:var(--fs-xs);color:var(--err);margin-top:3px;display:none}
.fld.bad input,.fld.bad select{border-color:var(--err)}
.fld.bad .bad-txt{display:block}
.note{margin-top:var(--s3);padding:var(--s3);border-radius:var(--r2);font-size:var(--fs-sm);
  background:var(--ok-bg);border:1px solid var(--ok-br)}
.note h4{font-size:var(--fs-sm);color:var(--ok);margin-bottom:var(--s2)}
.note .kv{display:flex;align-items:center;gap:var(--s2);margin-bottom:5px}
.note .kv span{color:var(--txt-2);min-width:68px;font-size:var(--fs-xs)}
.note .kv code{flex:1;background:var(--n-0);border:1px solid var(--ok-br);padding:3px 8px;
  border-radius:var(--r1);font-family:var(--mono);font-size:var(--fs-xs);word-break:break-all}
.note .warn{font-size:var(--fs-xs);color:var(--warn);margin-top:var(--s2);line-height:1.5}
.callout{padding:10px var(--s3);border-radius:var(--r2);font-size:var(--fs-sm);line-height:1.55;
  background:var(--n-25);border:var(--hair);color:var(--txt-2)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-br);color:var(--warn)}
.callout.info{background:var(--info-bg);border-color:var(--info-br);color:var(--info)}
.callout b{font-weight:var(--fw-s)}

/* File drop */
.drop{border:1.5px dashed var(--n-300);border-radius:var(--r3);padding:var(--s5);text-align:center;
  background:var(--n-25);cursor:pointer;display:block;
  transition:border-color var(--tr),background var(--tr)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-bg)}
.drop input{display:none}
.drop .t{font-size:var(--fs-base);font-weight:var(--fw-s);margin-bottom:2px}
.drop .s{font-size:var(--fs-xs);color:var(--txt-3)}
.drop.has{border-style:solid;border-color:var(--ok-br);background:var(--ok-bg);text-align:left}
.drop.has .t{color:var(--ok)}

/* First-run guidance. Reached only when nothing has ever been loaded. */
.onboard{list-style:none;display:flex;flex-direction:column;gap:var(--s3);max-width:70ch}
.onboard li{display:flex;gap:var(--s3);align-items:flex-start}
.onboard .n{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:var(--fw-b);background:var(--n-100);color:var(--txt-3);
  border:1px solid var(--n-200)}
.onboard li.done .n{background:var(--ok-bg);border-color:var(--ok-br);color:var(--ok)}
.onboard b{display:block;font-size:var(--fs-base);font-weight:var(--fw-s)}
.onboard li > span:last-child > span{display:block;font-size:var(--fs-sm);color:var(--txt-3);margin-top:1px}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* ══ Wizard ══════════════════════════════════════════════════════════════ */
.wiz{display:grid;grid-template-columns:216px minmax(0,1fr);gap:var(--s5);align-items:start;
  max-width:1080px}
@media(max-width:900px){.wiz{grid-template-columns:1fr}}
.steps{display:flex;flex-direction:column;gap:1px;list-style:none}
.steps li{display:flex;gap:10px;padding:9px 10px;border-radius:var(--r2);font-size:var(--fs-sm);
  color:var(--txt-3);align-items:flex-start}
.steps li .n{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:var(--fs-micro);font-weight:var(--fw-b);background:var(--n-100);color:var(--txt-4);
  border:1px solid var(--n-200)}
.steps li .t{display:block;font-weight:var(--fw-m);line-height:1.35}
.steps li .d{display:block;font-size:var(--fs-xs);color:var(--txt-4);margin-top:1px;line-height:1.4}
.steps li.done .n{background:var(--ok-bg);border-color:var(--ok-br);color:var(--ok)}
.steps li.done{color:var(--txt-2)}
.steps li.on{background:var(--accent-bg);color:var(--accent-2)}
.steps li.on .n{background:var(--accent);border-color:var(--accent);color:#fff}
.steps li.on .t{font-weight:var(--fw-s)}
.wiz-step h2{font-size:var(--fs-md);font-weight:var(--fw-s);letter-spacing:-.012em}
.wiz-step > p{font-size:var(--fs-sm);color:var(--txt-3);margin:3px 0 var(--s4);max-width:70ch}
.map-grid{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:var(--s2) var(--s3);
  align-items:center}
.map-grid .arw{color:var(--txt-4);text-align:center;font-size:var(--fs-sm)}
.map-grid .src{font-size:var(--fs-sm);font-weight:var(--fw-m);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.map-grid .src small{display:block;font-weight:var(--fw-n);color:var(--txt-4);font-size:var(--fs-xs);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The last screen before real phones ring. The number is the message. */
.ready{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);margin-bottom:var(--s4);
  background:var(--accent-bg);border:1px solid var(--accent-br);border-radius:var(--r3)}
.ready-n{font-size:38px;font-weight:var(--fw-b);letter-spacing:-.03em;line-height:1;
  color:var(--accent-2);font-variant-numeric:tabular-nums;flex:none}
.ready h2{font-size:var(--fs-md);font-weight:var(--fw-s)}
.ready p{font-size:var(--fs-sm);color:var(--txt-2)}

.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--s2)}
.tally > div{border:var(--hair);border-radius:var(--r3);padding:10px var(--s3);background:var(--n-0)}
.tally .k{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.075em;color:var(--txt-4)}
.tally .v{font-size:21px;font-weight:var(--fw-b);margin-top:3px;font-variant-numeric:tabular-nums;
  line-height:1.1}
.tally .ok-v{color:var(--ok)} .tally .err-v{color:var(--err)} .tally .warn-v{color:var(--warn)}

/* ══ Tabs ════════════════════════════════════════════════════════════════ */
.tabs{display:inline-flex;gap:2px;padding:2px;background:var(--n-100);border-radius:var(--r2)}
.tabs button{padding:5px 11px;border:0;background:none;border-radius:var(--r1);
  font-size:var(--fs-sm);font-weight:var(--fw-s);color:var(--txt-3);cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--n-0);color:var(--txt);box-shadow:var(--sh)}
.tabs button:hover:not(.on){color:var(--txt-2)}
.tabbar{display:flex;gap:var(--s5);border-bottom:var(--hair);margin-bottom:var(--s4);overflow-x:auto}
.tabbar a{padding:0 0 9px;font-size:var(--fs-base);font-weight:var(--fw-m);color:var(--txt-3);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabbar a:hover{color:var(--txt)}
.tabbar a.on{color:var(--accent-2);border-bottom-color:var(--accent);font-weight:var(--fw-s)}

/* ══ Status strip ════════════════════════════════════════════════════════
   The Campaigns page leads with "what is running". These are filters, not
   decoration: each one is a link that scopes the list below it. */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:var(--s2);margin-bottom:var(--s3)}
.stat-tile{display:flex;flex-direction:column;gap:2px;padding:11px var(--s3);background:var(--n-0);
  border:var(--hair);border-radius:var(--r3);text-decoration:none;color:inherit;
  transition:border-color var(--tr),background var(--tr)}
.stat-tile:hover{border-color:var(--n-300);background:var(--n-25)}
.stat-tile.on{border-color:var(--accent);background:var(--accent-bg)}
.stat-tile.on .st-k{color:var(--accent-2)}
.st-k{display:flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:var(--fw-b);
  text-transform:uppercase;letter-spacing:.075em;color:var(--txt-4)}
.st-v{font-size:22px;font-weight:var(--fw-b);letter-spacing:-.028em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.st-s{font-size:var(--fs-xs);color:var(--txt-3)}
.st-dot{width:6px;height:6px;border-radius:50%;background:var(--n-300);flex:none}
.s-running .st-dot{background:var(--ok-solid)}
.s-completed .st-dot{background:var(--accent)}
.s-stopped .st-dot{background:var(--warn-solid)}

/* The live monitor sits above the full list and is only present while
   something is actually dialling. */
.live-panel{border-color:var(--accent-br)}
.live-panel.stalled{border-color:var(--warn-br)}
.live-panel.stalled > .panel-head{background:var(--warn-bg);border-bottom-color:var(--warn-br)}
.live-panel.stalled .panel-head p{color:var(--warn)}
.warn-txt{color:var(--warn)}
.live-panel > .panel-head{background:var(--accent-bg);border-bottom-color:var(--accent-br)}
.live-panel h2{display:flex;align-items:center;gap:7px}
.live-panel .panel-head p{color:var(--accent-2);opacity:.85}

/* ══ Freshness ═══════════════════════════════════════════════════════════
   Polling is not realtime. Saying when the numbers were last confirmed is
   more honest than a pulsing dot that implies a stream, and it is the only
   moving thing a background refresh is allowed to produce. */
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  color:var(--txt-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.fresh-dot{width:6px;height:6px;border-radius:50%;background:var(--ok-solid);flex:none;
  transition:background var(--tr)}
.fresh-dot.busy{background:var(--accent);animation:blip 1s ease-in-out infinite}
.fresh-dot.err{background:var(--err-solid)}
.fresh-dot.idle{background:var(--n-300)}
.fresh-dot.off{background:var(--warn-solid)}
.fresh.live{color:var(--ok);font-weight:var(--fw-s)}
.fresh.unlinked{color:var(--warn)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
#refreshBtn svg{width:13px;height:13px}

/* ══ Filter chips ════════════════════════════════════════════════════════ */
.chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3)}
.chip-f{display:inline-flex;align-items:center;gap:5px;padding:2.5px 4px 2.5px 9px;
  background:var(--accent-bg);border:1px solid var(--accent-br);border-radius:var(--r-pill);
  font-size:var(--fs-xs);color:var(--accent-2)}
.chip-f b{font-weight:var(--fw-s)}
.chip-f a{color:var(--accent-2);text-decoration:none;opacity:.65;padding:0 4px;
  border-radius:var(--r-pill);line-height:1;font-size:var(--fs-base)}
.chip-f a:hover{opacity:1;background:rgba(79,70,229,.14)}
.chip-clear{font-size:var(--fs-xs);color:var(--txt-3);text-decoration:none;padding:3px 8px;
  border-radius:var(--r-pill)}
.chip-clear:hover{background:var(--n-100);color:var(--txt)}

/* ══ Date range ══════════════════════════════════════════════════════════ */
.daterange{position:relative}
.dr-menu{position:absolute;right:0;top:calc(100% + 5px);width:206px;background:var(--n-0);
  border:var(--hair);border-radius:var(--r3);box-shadow:var(--sh-pop);padding:5px;z-index:40;display:none}
.dr-menu.on{display:block}
.dr-menu button{display:block;width:100%;text-align:left;padding:6px 9px;border:0;background:none;
  border-radius:var(--r1);font-size:var(--fs-sm);cursor:pointer;color:var(--txt-2)}
.dr-menu button:hover{background:var(--n-100);color:var(--txt)}
.dr-menu button.on{background:var(--accent-bg);color:var(--accent-2);font-weight:var(--fw-s)}
.dr-menu .sep{height:1px;background:var(--n-150);margin:5px 0}
.dr-custom{display:flex;gap:6px;padding:5px 4px}
.dr-custom input{flex:1;min-width:0;padding:5px 7px;font-size:var(--fs-xs);border:var(--hair);
  border-radius:var(--r1)}

/* ══ Transcript reader ═══════════════════════════════════════════════════ */
.talk{display:flex;flex-direction:column;gap:var(--s2)}
.turn{display:flex;gap:9px;max-width:82%}
.turn.them{align-self:flex-end;flex-direction:row-reverse}
.turn .who{width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:9px;font-weight:var(--fw-b);color:#fff;margin-top:2px}
.turn.us .who{background:var(--accent)}
.turn.them .who{background:var(--n-500)}
.turn .said{padding:7px 11px;border-radius:10px;font-size:var(--fs-sm);line-height:1.55;
  background:var(--n-100);border:var(--hair-soft)}
.turn.us .said{background:var(--accent-bg);border-color:var(--accent-br);border-bottom-left-radius:3px}
.turn.them .said{background:var(--n-0);border-bottom-right-radius:3px}
.turn mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px}
.audio{width:100%;height:34px}

/* A missing recording or transcript states its absence. The alternative is
   an <audio> element stuck at 0:00 / 0:00, which reads as a broken page. */
.media-none{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--n-25);border:1px dashed var(--n-300);border-radius:var(--r3)}
.media-none svg{width:18px;height:18px;color:var(--txt-4);flex:none}
.media-none > div{min-width:0;flex:1}
.media-none b{display:block;font-size:var(--fs-base);font-weight:var(--fw-s)}
.media-none span{display:block;font-size:var(--fs-xs);color:var(--txt-3);margin-top:1px}

/* ══ Activity feed ═══════════════════════════════════════════════════════ */
.feed{display:flex;flex-direction:column}
.feed .it{display:flex;align-items:center;gap:var(--s2);padding:7px var(--s4);
  border-bottom:var(--hair-soft);text-decoration:none;color:inherit}
.feed .it:last-child{border-bottom:0}
.feed a.it:hover{background:var(--n-50)}
.feed .dotc{width:7px;height:7px;border-radius:50%;flex:none}
.feed .nm{font-size:var(--fs-sm);font-weight:var(--fw-m);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.feed .mt{font-size:var(--fs-xs);color:var(--txt-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.feed .rt{margin-left:auto;font-size:var(--fs-xs);color:var(--txt-4);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ══ Live strip ══════════════════════════════════════════════════════════ */
.live{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s2);
  margin-bottom:var(--s3)}
.live .cell{background:var(--n-0);border:var(--hair);border-radius:var(--r3);padding:10px var(--s3);
  position:relative;overflow:hidden}
.live .cell.hot{border-color:var(--accent-br);background:var(--accent-bg)}
.live .k{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.08em;color:var(--txt-4);display:flex;align-items:center;gap:5px}
.live .v{font-size:20px;font-weight:var(--fw-b);letter-spacing:-.028em;margin-top:5px;line-height:1;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.live .v small{font-size:var(--fs-xs);font-weight:var(--fw-n);color:var(--txt-3);letter-spacing:0}
.live .s{font-size:var(--fs-xs);color:var(--txt-3);margin-top:3px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ok-solid);flex:none;animation:pl 2s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}70%{box-shadow:0 0 0 6px rgba(5,150,105,0)}
              100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
.pulse.idle{background:var(--n-300);animation:none}

/* ══ Toasts ══════════════════════════════════════════════════════════════ */
.toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toasts > div{background:var(--n-900);color:#fff;border-radius:var(--r3);box-shadow:var(--sh-pop);
  padding:10px var(--s3);font-size:var(--fs-sm);max-width:380px;display:flex;align-items:center;
  gap:var(--s2);animation:tin .2s cubic-bezier(.32,.72,0,1)}
.toasts > div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-3);flex:none}
.toasts > div.ok::before{background:#34d399}
.toasts > div.err::before{background:#f87171}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══ Command palette ═════════════════════════════════════════════════════ */
.cmdk-scrim{position:fixed;inset:0;background:rgba(20,26,38,.42);opacity:0;pointer-events:none;
  transition:opacity var(--tr);z-index:90}
.cmdk-scrim.on{opacity:1;pointer-events:auto}
.cmdk{position:fixed;top:13vh;left:50%;transform:translate(-50%,-8px) scale(.985);width:min(620px,92vw);
  background:var(--n-0);border:var(--hair);border-radius:var(--r4);box-shadow:var(--sh-pop);
  z-index:91;opacity:0;pointer-events:none;overflow:hidden;
  transition:opacity .14s var(--tr),transform .14s var(--tr)}
.cmdk.on{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:12px var(--s4);border-bottom:var(--hair)}
.cmdk-in svg{width:16px;height:16px;color:var(--txt-4);flex:none}
.cmdk-in input{flex:1;border:0;outline:none;font-size:var(--fs-md);background:none;padding:0;box-shadow:none}
.cmdk-res{max-height:min(50vh,420px);overflow-y:auto}
.cmdk-grp{font-size:var(--fs-micro);font-weight:var(--fw-b);text-transform:uppercase;
  letter-spacing:.09em;color:var(--txt-4);padding:10px var(--s4) 4px}
.cmdk-it{display:flex;align-items:center;gap:10px;padding:7px var(--s4);cursor:pointer;
  border-left:2px solid transparent}
.cmdk-it:hover,.cmdk-it.sel{background:var(--accent-bg);border-left-color:var(--accent)}
.cmdk-it .ic{width:25px;height:25px;border-radius:var(--r2);flex:none;display:grid;place-items:center;
  background:var(--n-100);color:var(--txt-3)}
.cmdk-it .ic svg{width:14px;height:14px}
.cmdk-it .t1{font-size:var(--fs-base);font-weight:var(--fw-m);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cmdk-it .t2{font-size:var(--fs-xs);color:var(--txt-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cmdk-it .rt{margin-left:auto;font-size:var(--fs-xs);color:var(--txt-4);flex:none}
.cmdk-empty{padding:28px var(--s4);text-align:center;color:var(--txt-3);font-size:var(--fs-base)}

/* ══ Legacy aliases kept so no view has to be rewritten to be restyled ═══ */
.metrics{display:grid;gap:var(--s2);margin-bottom:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.metric{background:var(--n-0);border:var(--hair);border-radius:var(--r3);padding:11px var(--s3)}
.metric .k{display:flex;align-items:center;gap:5px;font-size:var(--fs-micro);font-weight:var(--fw-b);
  text-transform:uppercase;letter-spacing:.08em;color:var(--txt-4)}
.metric .k svg{width:13px;height:13px}
.metric .v{font-size:23px;font-weight:var(--fw-b);letter-spacing:-.03em;margin-top:6px;line-height:1;
  font-variant-numeric:tabular-nums}
.metric .s{font-size:var(--fs-xs);color:var(--txt-3);margin-top:4px;display:flex;align-items:center;gap:5px}
.metric .s.alert{color:var(--warn);font-weight:var(--fw-m)}
.dhead{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);border-bottom:var(--hair);
  flex-wrap:wrap}
.dhead .av{width:42px;height:42px;border-radius:var(--r3);font-size:var(--fs-md)}

/* ══ Utilities ═══════════════════════════════════════════════════════════ */
.hide{display:none !important}
.mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)}

.stack{display:flex;flex-direction:column;gap:var(--s3)}

/* ══ Accessibility ═══════════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:9px var(--s3);
  background:var(--n-0);border:var(--hair);border-radius:var(--r2);box-shadow:var(--sh-pop);
  font-size:var(--fs-base);font-weight:var(--fw-s);color:var(--accent-2);text-decoration:none}
.skip:focus{left:8px}

/* ══ Motion — subtle, and never a substitute for hierarchy ═══════════════ */
.panel,.kpi,.live .cell{animation:rise .3s cubic-bezier(.22,.75,.3,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.counting{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ══ Responsive ══════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .shell{grid-template-columns:1fr}
  .side{transform:translateX(-100%);transition:transform var(--tr)}
  .side.open{transform:none}
  .main{grid-column:1}
  .content{padding:var(--s4) var(--s4) var(--s6)}
  .bar{padding:0 var(--s4)}
  .g2,.g3{grid-template-columns:1fr}
  .sm-hide{display:none}
  .fstage{grid-template-columns:96px minmax(0,1fr) 88px}
  .fdrop{padding-left:108px}
}
@media(min-width:1081px){.menu-btn{display:none}}
@media(max-width:900px){
  .kpis,.kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Two tiles to a row leaves no clear space beside the caption, and the
     sparkline is the least load-bearing thing in the tile. */
  .spark{display:none}
}
@media(max-width:620px){
  .live{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dow{height:120px}
  .hours .hr{height:32px}
  .head h1{font-size:19px}
}

/* ── Agent assignment ─────────────────────────────────────────────────────
   The multi-select in the platform console, and the agent identity that now
   appears on campaigns, calls and the wizard. Same eight sizes and four radii
   as everything else — no new scale is introduced here. */

.note.bad{background:var(--err-bg);border-color:var(--err-br);color:var(--txt)}
.note.bad b{color:var(--err)}

/* A checkable list of agents. Rows, not cards: the operator is comparing
   names down a column, and a grid of tiles makes that scan harder. */
.picks{display:flex;flex-direction:column;gap:var(--s1);max-height:min(46vh,380px);
  overflow-y:auto;border:var(--hair);border-radius:var(--r3);padding:var(--s2);
  background:var(--n-25)}
.pick{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  border-radius:var(--r2);background:var(--n-0);border:1px solid transparent;cursor:pointer;
  transition:background .12s,border-color .12s}
.pick:hover{border-color:var(--n-200)}
.pick:has(input:checked){border-color:var(--accent);background:var(--n-25)}
.pick:has(input:disabled){cursor:default;opacity:.72}
.pick:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.pick input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--accent);cursor:inherit}
.pick-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pick-t{font-size:var(--fs-md);font-weight:540;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-s{font-size:var(--fs-xs);color:var(--txt-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.picks:empty::after{content:"No agent matches that search.";display:block;
  padding:var(--s4);text-align:center;color:var(--txt-3);font-size:var(--fs-sm)}

/* The agent avatar, so an agent row reads as an entity like an org or a user. */
.av.bot{display:grid;place-items:center;background:var(--n-50);color:var(--txt-2);
  border:var(--hair)}
.av.bot svg{width:16px;height:16px}

/* Agent identity wherever a campaign or call is shown. */
.agent-line{display:inline-flex;align-items:center;gap:5px;min-width:0;
  font-size:var(--fs-sm);color:var(--txt-2)}
.agent-line svg{width:13px;height:13px;flex:0 0 auto;color:var(--txt-3)}
.agent-line b{font-weight:540;color:var(--txt);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}