/* Operately design system */

:root{
  color-scheme: light;
  --paper:#F6F8F8;
  --card:#FFFFFF;
  --raised:#FBFCFC;
  --ink:#12181A;
  --ink-soft:#4A5559;
  --muted:#7C878B;
  --rule:#DDE3E3;
  --rule-soft:#EDF1F1;

  --accent:#0F6E6E;
  --accent-hi:#0B5757;
  --accent-wash:#E2EFEE;

  --good:#17733D;  --good-wash:#E4F1E9;
  --warn:#96620A;  --warn-wash:#F8EEDC;
  --crit:#A62A2A;  --crit-wash:#F8E6E6;
  --info:#2A5CA6;  --info-wash:#E5EBF6;
  --violet:#4A3AA7; --violet-wash:#E9E7F6;

  --s1:#0F6E6E; --s2:#2A5CA6; --s3:#96620A; --s4:#A62A2A;
  --s5:#4A3AA7; --s6:#17733D; --s7:#B0577F; --s8:#8A6A20;

  --shadow-sm:0 1px 2px rgba(18,24,26,.05);
  --shadow:0 2px 8px rgba(18,24,26,.07), 0 1px 2px rgba(18,24,26,.04);
  --shadow-lg:0 12px 32px rgba(18,24,26,.13), 0 2px 8px rgba(18,24,26,.06);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --r:8px; --r-lg:12px;
  /* Aliases. Later components were written against these names;
     they resolve to the same values as the originals above. */
  --surface:var(--card); --surface-2:var(--raised);
  --line:var(--rule); --sh1:var(--shadow-sm);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0C1012; --card:#151B1D; --raised:#1B2225;
    --ink:#ECF1F0; --ink-soft:#A6B1B3; --muted:#7C888B;
    --rule:#232B2E; --rule-soft:#1A2124;
    --accent:#4FC4BE; --accent-hi:#6FD6D0; --accent-wash:#11302F;
    --good:#5CBE81; --good-wash:#122A1D;
    --warn:#D9A441; --warn-wash:#2D2312;
    --crit:#E37070; --crit-wash:#2F1717;
    --info:#7BA7E8; --info-wash:#16233A;
    --violet:#9085E9; --violet-wash:#1F1B3A;
    --s1:#4FC4BE; --s2:#7BA7E8; --s3:#D9A441; --s4:#E37070;
    --s5:#9085E9; --s6:#5CBE81; --s7:#E094B4; --s8:#C7A55A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 2px 8px rgba(0,0,0,.4);
    --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0C1012; --card:#151B1D; --raised:#1B2225;
  --ink:#ECF1F0; --ink-soft:#A6B1B3; --muted:#7C888B;
  --rule:#232B2E; --rule-soft:#1A2124;
  --accent:#4FC4BE; --accent-hi:#6FD6D0; --accent-wash:#11302F;
  --good:#5CBE81; --good-wash:#122A1D;
  --warn:#D9A441; --warn-wash:#2D2312;
  --crit:#E37070; --crit-wash:#2F1717;
  --info:#7BA7E8; --info-wash:#16233A;
  --violet:#9085E9; --violet-wash:#1F1B3A;
  --s1:#4FC4BE; --s2:#7BA7E8; --s3:#D9A441; --s4:#E37070;
  --s5:#9085E9; --s6:#5CBE81; --s7:#E094B4; --s8:#C7A55A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; text-wrap:balance}
p{margin:0 0 12px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- brand mark ---------- */
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-.02em}
.logo .mark{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--accent), var(--accent-hi));
  color:#fff; font-size:14px; font-weight:800; box-shadow:var(--shadow-sm); flex:none;
}

/* ---------- app shell ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  max-width:1400px; margin:0 auto; padding:11px 24px;
  display:flex; align-items:center; gap:18px;
}
.brandchip{
  font-size:12.5px; color:var(--ink-soft); background:var(--card);
  border:1px solid var(--rule); border-radius:999px; padding:4px 12px; white-space:nowrap;
}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:8px}

.tabs{
  max-width:1400px; margin:0 auto; padding:0 24px;
  display:flex; gap:2px; border-bottom:1px solid var(--rule); overflow-x:auto;
}
.tab{
  font-size:14px; font-weight:600; color:var(--ink-soft);
  background:none; border:none; padding:12px 14px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent); border-bottom-color:var(--accent)}
.tab .badge{
  display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700;
  background:var(--crit); color:#fff; border-radius:999px; padding:1px 6px; line-height:1.5;
}

.wrap{max-width:1400px; margin:0 auto; padding:24px 24px 80px}
.panel{display:none}
.panel.active{display:block}

.subtabs{display:flex; gap:6px; margin-bottom:18px}
.subtab{
  font-size:13px; font-weight:650; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--rule); border-radius:999px;
  padding:6px 15px; cursor:pointer;
}
.subtab.active{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- headings ---------- */
.section-head{margin:28px 0 12px}
.section-head:first-child{margin-top:0}
h2.sec{font-size:19px; font-weight:700}
.sub{color:var(--ink-soft); font-size:13.5px; margin:3px 0 0}
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:0 0 8px;
}

/* ---------- cards & KPIs ---------- */
.card{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm);
}
.card + .card{margin-top:14px}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:8px}
.kpi{
  position:relative; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:15px 17px; box-shadow:var(--shadow-sm); overflow:hidden;
}
.kpi::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--kc,var(--accent))}
.kpi .v{font-size:25px; font-weight:750; letter-spacing:-.02em; line-height:1.15; color:var(--kc,var(--ink)); font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px; color:var(--ink-soft); margin-top:3px; font-weight:600}
.kpi .n{font-size:11px; color:var(--muted); margin-top:2px}

.stat-row{display:flex; flex-wrap:wrap; gap:10px}
.stat{
  flex:1 1 150px; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r); padding:12px 14px;
}
.stat .v{font-size:19px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.2}
.stat .l{font-size:11.5px; color:var(--ink-soft); margin-top:2px; font-weight:600}
.stat .n{font-size:10.5px; color:var(--muted); margin-top:1px; font-family:var(--mono)}
.stat.flag{border-color:var(--crit)}
.stat.flag .v{color:var(--crit)}
.stat.warn{border-color:var(--warn)}
.stat.warn .v{color:var(--warn)}

/* ---------- buttons & controls ---------- */
.btn{
  font-size:13px; font-weight:650; border-radius:var(--r); padding:8px 14px;
  border:1px solid var(--rule); background:var(--card); color:var(--ink);
  cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{background:var(--rule-soft)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn-good{background:var(--good); border-color:var(--good); color:#fff}
.btn-good:hover{filter:brightness(1.08)}
.btn-crit{background:var(--crit); border-color:var(--crit); color:#fff}
.btn-ghost{background:none; border-color:transparent; color:var(--accent)}
.btn-ghost:hover{background:var(--accent-wash)}
.btn:disabled{opacity:.5; cursor:default}
.btn-sm{font-size:12px; padding:5px 10px}

.input, .select, textarea.input{
  font-family:inherit; font-size:13.5px; padding:9px 12px;
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--card); color:var(--ink); width:100%;
}
.input:focus, textarea.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
textarea.input{resize:vertical; line-height:1.55}
label.field{display:block; margin-bottom:14px}
label.field .lbl{display:block; font-size:12.5px; font-weight:650; margin-bottom:5px}
label.field .hint{display:block; font-size:12px; color:var(--muted); margin-top:5px}

/* ---------- filters ---------- */
.filterbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.filterbar .input{flex:1 1 200px; width:auto; min-width:180px}
.combo{position:relative}
.combo-btn{
  font-size:12.5px; font-weight:650; padding:8px 13px; border-radius:var(--r);
  border:1px solid var(--rule); background:var(--card); color:var(--ink-soft);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:8px; min-width:140px;
}
.combo-btn.on{color:var(--ink); border-color:var(--accent)}
.combo-btn .chev{font-size:10px; color:var(--muted)}
.combo-panel{
  position:absolute; top:calc(100% + 5px); left:0; min-width:250px; z-index:40;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); display:none; overflow:hidden;
}
.combo-panel.open{display:block}
.combo-search{
  width:100%; border:none; border-bottom:1px solid var(--rule);
  padding:10px 13px; font-size:13px; background:var(--card); color:var(--ink); font-family:inherit;
}
.combo-search:focus{outline:none}
.combo-list{max-height:260px; overflow-y:auto; padding:5px}
.combo-opt{
  display:flex; align-items:center; gap:9px; padding:7px 10px;
  border-radius:6px; cursor:pointer; font-size:13px;
}
.combo-opt:hover{background:var(--rule-soft)}
.combo-opt .cnt{margin-left:auto; color:var(--muted); font-size:11.5px; font-family:var(--mono)}

.chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px}
.chip{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:650;
  padding:5px 8px 5px 12px; border-radius:999px; color:#fff; background:var(--accent);
}
.chip button{
  background:rgba(255,255,255,.28); border:none; color:#fff; width:16px; height:16px;
  border-radius:50%; cursor:pointer; font-size:11px; line-height:1;
  display:grid; place-items:center; padding:0;
}
.numfilter{display:flex; gap:5px; align-items:center}
.numfilter .select{width:auto; min-width:0; padding:8px 9px; font-size:12.5px}
.numfilter .input{width:74px; min-width:0; flex:none}

.count{font-size:12.5px; color:var(--muted); font-weight:600; margin:8px 0}

/* ---------- tables ---------- */
.tablewrap{
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:auto;
  background:var(--card); max-height:620px; box-shadow:var(--shadow-sm);
}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:left; padding:10px 13px; border-bottom:1px solid var(--rule-soft); white-space:nowrap}
thead th{
  position:sticky; top:0; z-index:2; background:var(--raised);
  font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--rule);
}
tbody tr:hover{background:var(--rule-soft)}
tbody tr.sel{background:var(--accent-wash)}
tbody tr:last-child td{border-bottom:none}
td.wrap{white-space:normal; max-width:230px; color:var(--ink-soft)}
td.r{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
th.chk, td.chk{width:34px; text-align:center; padding-left:10px; padding-right:0}
.empty{padding:34px 20px; text-align:center; color:var(--muted); font-size:13.5px}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  border-radius:999px; padding:3px 9px 3px 7px; white-space:nowrap;
}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.b-good{color:var(--good); background:var(--good-wash)}
.b-crit{color:var(--crit); background:var(--crit-wash)}
.b-warn{color:var(--warn); background:var(--warn-wash)}
.b-info{color:var(--info); background:var(--info-wash)}
.b-violet{color:var(--violet); background:var(--violet-wash)}
.b-accent{color:var(--accent); background:var(--accent-wash)}
.b-mute{color:var(--ink-soft); background:var(--rule-soft)}

.pill{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:4px; font-family:var(--mono)}
.p-crit{background:var(--crit-wash); color:var(--crit)}
.p-warn{background:var(--warn-wash); color:var(--warn)}
.p-low{background:var(--rule-soft); color:var(--muted)}

/* ---------- bar rows ---------- */
.row{display:flex; align-items:center; gap:11px; margin:8px 0; font-size:13px}
.row .lbl{flex:0 0 210px; color:var(--ink-soft); text-align:right; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .bar{flex:1; min-width:0}
.track{background:var(--rule-soft); border-radius:5px; height:20px; overflow:hidden}
.fill{height:100%; border-radius:5px; background:var(--accent); transition:width .35s ease}
.row .val{flex:0 0 64px; font-variant-numeric:tabular-nums; font-weight:650; font-size:12.5px}

/* ---------- action bar ---------- */
.actionbar{
  display:none; align-items:center; gap:12px; margin-top:12px; padding:12px 16px;
  border-radius:var(--r-lg); background:var(--card); border:1px solid var(--accent);
  box-shadow:var(--shadow); flex-wrap:wrap;
}
.actionbar.show{display:flex}
.actionbar .n{font-size:13.5px; font-weight:700}

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; background:rgba(6,10,12,.5); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal.open{display:flex}
.modal-box{
  background:var(--card); border:1px solid var(--rule); border-radius:14px;
  width:min(620px,100%); max-height:88vh; overflow-y:auto;
  padding:22px 24px; box-shadow:var(--shadow-lg);
}
.modal-box.wide{width:min(860px,100%)}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
.modal-head h3{font-size:17px; font-weight:700}
.modal-x{background:none; border:none; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; padding:0 4px}
.modal-foot{display:flex; justify-content:flex-end; gap:9px; margin-top:18px}

.recipients{
  max-height:130px; overflow-y:auto; border:1px solid var(--rule);
  border-radius:var(--r); padding:9px 13px; font-size:12.5px;
  color:var(--ink-soft); background:var(--raised);
}
.recipients div{padding:2px 0}
.varchips{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.varchip{
  font-size:11px; font-family:var(--mono); padding:4px 9px; border-radius:999px;
  border:1px solid var(--rule); background:var(--card); color:var(--accent); cursor:pointer;
}
.varchip:hover{background:var(--accent-wash)}
.preview{
  margin-top:12px; padding:12px 14px; border-radius:var(--r);
  background:var(--good-wash); border:1px solid var(--good); font-size:13px;
}
.preview .h{font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--good); font-weight:700; margin-bottom:5px}
.costline{
  margin-top:12px; padding:11px 14px; border-radius:var(--r);
  background:var(--rule-soft); font-size:13px;
}
.costline b{font-size:16px; font-variant-numeric:tabular-nums}
.langtoggle{display:inline-flex; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden}
.langtoggle button{
  font-size:12.5px; font-weight:700; padding:8px 15px; border:none;
  background:var(--card); color:var(--ink-soft); cursor:pointer;
}
.langtoggle button.active{background:var(--accent); color:#fff}

/* ---------- lifecycle timeline ---------- */
.cycle-row td{background:var(--raised); padding:18px 20px; white-space:normal}
.track-line{display:flex; align-items:flex-start; overflow-x:auto; padding:6px 0 2px}
.step{display:flex; flex-direction:column; align-items:center; min-width:118px; flex:1; position:relative}
.step .line{position:absolute; top:6px; left:-50%; width:100%; height:2px; background:var(--rule); z-index:1}
.step:first-child .line{display:none}
.step .dot{width:13px; height:13px; border-radius:50%; z-index:2;
  box-shadow:0 0 0 3px var(--raised)}
.step.done .dot{background:var(--good)}
.step.problem .dot{background:var(--crit)}
.step.pending .dot{background:var(--muted)}
.step .nm{font-size:11.5px; font-weight:650; margin-top:9px; text-align:center; line-height:1.3}
.step .tm{font-size:10.5px; color:var(--muted); margin-top:2px; text-align:center}
.step .nt{font-size:10px; color:var(--crit); margin-top:3px; text-align:center; max-width:120px; line-height:1.35}

/* ---------- charts ---------- */
.chart{width:100%}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--ink-soft);
  margin-top:12px; font-weight:600}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend .sw{width:11px; height:11px; border-radius:3px; display:inline-block}

/* ---------- notes ---------- */
.note{
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  background:var(--accent-wash); padding:13px 16px;
  border-radius:0 var(--r) var(--r) 0; font-size:13.5px; margin:14px 0;
}
.note.warn{border-left-color:var(--warn); background:var(--warn-wash)}
.note.crit{border-left-color:var(--crit); background:var(--crit-wash)}
.note b{color:var(--ink)}
.status{font-size:13px; margin-top:10px; min-height:18px}
.status.ok{color:var(--good)}
.status.err{color:var(--crit)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .topbar-in,.tabs,.wrap{padding-left:14px; padding-right:14px}
  .row .lbl{flex-basis:120px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}

/* ============================================================ cycle severity
   A duration reads as a plain number until it is banded. These three make
   "this order took too long" visible without the reader doing arithmetic. */
.cyc{display:inline-block;min-width:52px;padding:3px 9px;border-radius:7px;
     font:600 12.5px/1.3 var(--mono);text-align:center;
     border:1px solid transparent;font-variant-numeric:tabular-nums}
.cyc-ok  {color:var(--ink-soft);background:var(--surface-2);border-color:var(--line)}
.cyc-warn{color:#8a4b00;background:color-mix(in srgb,var(--warn) 16%,transparent);
          border-color:color-mix(in srgb,var(--warn) 42%,transparent)}
.cyc-crit{color:#8c1d1d;background:color-mix(in srgb,var(--crit) 15%,transparent);
          border-color:color-mix(in srgb,var(--crit) 45%,transparent);font-weight:700}
:root:not([data-theme="light"]) .cyc-warn{color:#f0b866}
:root:not([data-theme="light"]) .cyc-crit{color:#f08d8d}
:root[data-theme="dark"] .cyc-warn{color:#f0b866}
:root[data-theme="dark"] .cyc-crit{color:#f08d8d}

/* ============================================================ automation trail
   One pip per rung of the funnel, so how hard a customer has been chased is
   readable at a glance instead of requiring a click. */
.trail{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pip{display:inline-flex;align-items:center;justify-content:center;
     width:19px;height:19px;border-radius:50%;font-size:10px;font-style:normal;
     border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft)}
.pip.done{background:color-mix(in srgb,var(--accent) 18%,transparent);
          border-color:color-mix(in srgb,var(--accent) 48%,transparent);color:var(--accent)}
.pip.ok  {background:color-mix(in srgb,var(--good) 20%,transparent);
          border-color:color-mix(in srgb,var(--good) 55%,transparent);color:var(--good)}
.pip.bad {background:color-mix(in srgb,var(--crit) 18%,transparent);
          border-color:color-mix(in srgb,var(--crit) 50%,transparent);color:var(--crit)}
.pip.skip{opacity:.5;border-style:dashed}

/* ============================================================ cycle button
   The per-row warning light. Same three bands as .cyc, but sized and shaped
   as the control it is — the number is the label, the band is the verdict. */
.cycbtn{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
        min-width:62px;padding:5px 10px;border-radius:8px;cursor:pointer;
        border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
        font-family:var(--sans);transition:transform .08s ease,box-shadow .12s ease}
.cycbtn:hover{transform:translateY(-1px);box-shadow:var(--sh1)}
.cycbtn .n{font:700 13px/1.15 var(--mono);font-variant-numeric:tabular-nums}
.cycbtn .k{font:500 9.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
           opacity:.62}
.cycbtn.cyc-ok{border-color:var(--line)}
.cycbtn.cyc-warn{color:#8a4b00;background:color-mix(in srgb,var(--warn) 17%,var(--surface));
                 border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.cycbtn.cyc-crit{color:#8c1d1d;background:color-mix(in srgb,var(--crit) 16%,var(--surface));
                 border-color:color-mix(in srgb,var(--crit) 58%,transparent)}
.cycbtn.cyc-crit .n{font-weight:800}
:root:not([data-theme="light"]) .cycbtn.cyc-warn{color:#f0b866}
:root:not([data-theme="light"]) .cycbtn.cyc-crit{color:#f08d8d}
:root[data-theme="dark"] .cycbtn.cyc-warn{color:#f0b866}
:root[data-theme="dark"] .cycbtn.cyc-crit{color:#f08d8d}

/* ============================================================ flow designer
   The decision being made here is about *timing and escalation* — how patient
   am I, and how hard do I push — so the canvas is a schedule, not a form
   stack. Steps hang off a cumulative time rail; the answer to "when does this
   customer actually hear from me" is readable without arithmetic. */

.designer{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media (max-width:1080px){.designer{grid-template-columns:minmax(0,1fr)}
                          .preview-pane{position:static !important}}

.rail{position:relative;padding-left:96px}
.rail::before{content:"";position:absolute;left:79px;top:14px;bottom:14px;width:2px;
              background:linear-gradient(var(--line),var(--line));border-radius:2px}

.rnode{position:relative;margin-bottom:14px}
.rnode:last-child{margin-bottom:0}
/* the dot on the rail */
.rnode::before{content:"";position:absolute;left:-21px;top:22px;width:12px;height:12px;
               border-radius:50%;background:var(--surface);border:2px solid var(--line);z-index:1}
.rnode.is-step::before{border-color:var(--accent)}
.rnode.is-trigger::before{background:var(--ink);border-color:var(--ink)}
.rnode.is-end::before{border-style:dashed}
/* the time stamp to the left of the rail */
.rtime{position:absolute;left:-96px;top:15px;width:66px;text-align:right}
.rtime .d{font:700 12.5px/1.2 var(--sans);color:var(--ink)}
.rtime .h{font:500 10.5px/1.3 var(--sans);color:var(--muted)}

.scard{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
       transition:border-color .12s ease,box-shadow .12s ease}
.scard:hover{box-shadow:var(--sh1)}
.scard.open{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:var(--sh1)}
.scard.trigger{background:color-mix(in srgb,var(--accent) 6%,var(--surface));
               border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.scard.end{border-style:dashed;background:var(--surface-2)}

.shead{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer}
.scard.trigger .shead,.scard.end .shead{cursor:default}
.sicon{width:32px;height:32px;border-radius:9px;flex:none;display:flex;
       align-items:center;align-items:center;justify-content:center;font-size:15px}
.sicon.wa{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.sicon.call{background:color-mix(in srgb,var(--s6,var(--accent)) 18%,transparent);color:var(--accent)}
.sicon.trig{background:var(--ink);color:var(--surface)}
.sicon.end{background:var(--surface-2);color:var(--muted);border:1px dashed var(--line)}

.sinfo{flex:1;min-width:0}
.stitle{font:600 13.5px/1.35 var(--sans);display:flex;align-items:center;gap:8px}
.spreview{font:400 12.5px/1.45 var(--sans);color:var(--ink-soft);margin-top:2px;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scost{font:600 11.5px/1 var(--mono);color:var(--muted);flex:none}
.sctl{display:flex;gap:2px;flex:none}
.sctl button{width:26px;height:26px;border-radius:7px;border:1px solid transparent;
             background:transparent;color:var(--muted);cursor:pointer;font-size:13px;
             display:flex;align-items:center;justify-content:center}
.sctl button:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.sctl button:disabled{opacity:.25;cursor:default}
.sctl button:hover:not(:disabled).rm{color:var(--crit)}

.sbody{display:none;padding:0 15px 15px;border-top:1px solid var(--rule);margin-top:2px}
.scard.open .sbody{display:block}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 12px}
.chanpick{display:flex;gap:8px}
.chanopt{flex:1;display:flex;align-items:center;gap:7px;padding:9px 11px;cursor:pointer;
         border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
         font:600 12.5px/1 var(--sans)}
.chanopt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
            color:var(--accent)}
.chanopt input{display:none}

.varbar{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.varbtn{padding:3px 8px;border-radius:6px;border:1px solid var(--line);cursor:pointer;
        background:var(--surface-2);color:var(--ink-soft);font:500 11px/1.5 var(--mono)}
.varbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ---- the exits ---- */
.exits{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:13px 15px}
.exit{border-radius:9px;padding:11px 13px;background:var(--surface)}
.exit.yes{border:1px solid color-mix(in srgb,var(--good) 45%,transparent)}
.exit.no {border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.exit h5{font:600 12.5px/1.3 var(--sans);margin:0 0 5px;display:flex;align-items:center;gap:6px}
.exit p{font-size:12px;color:var(--ink-soft);margin:0;line-height:1.5}

/* ---- live preview ---- */
.preview-pane{position:sticky;top:88px}
.phone{border:1px solid var(--line);border-radius:20px;background:var(--surface-2);
       padding:12px;box-shadow:var(--sh1)}
.phone-top{display:flex;align-items:center;gap:9px;padding:4px 6px 11px;
           border-bottom:1px solid var(--rule);margin-bottom:12px}
.phone-av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
          display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--sans)}
.phone-who{font:600 12.5px/1.3 var(--sans)}
.phone-num{font:400 11px/1.3 var(--mono);color:var(--muted)}
.phone-screen{min-height:170px;padding:4px 2px 8px;display:flex;flex-direction:column;gap:9px}

.bubble{max-width:88%;align-self:flex-end;padding:9px 12px;border-radius:14px 14px 4px 14px;
        background:color-mix(in srgb,var(--good) 20%,var(--surface));
        border:1px solid color-mix(in srgb,var(--good) 34%,transparent);
        font:400 12.5px/1.55 var(--sans);white-space:pre-wrap;word-break:break-word}
.bubble .meta{display:block;margin-top:5px;font-size:10px;color:var(--muted);text-align:right}
.bubble[dir="rtl"]{text-align:right}

.callcard{border:1px solid var(--line);border-radius:12px;background:var(--surface);
          padding:13px 14px;font:400 12.5px/1.6 var(--sans);white-space:pre-wrap}
.callcard .ring{display:flex;align-items:center;gap:7px;font:600 11px/1 var(--sans);
                color:var(--accent);text-transform:uppercase;letter-spacing:.07em;
                margin-bottom:9px}

.previewnav{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap}
.pvtab{padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:var(--surface);
       font:600 11.5px/1 var(--sans);cursor:pointer;color:var(--ink-soft)}
.pvtab.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============================================================ sortable heads */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color .1s ease}
th.sortable:hover{color:var(--ink)}
th.sortable .sarrow{display:inline-block;width:11px;margin-left:3px;font-size:9px;
                    color:var(--accent);vertical-align:1px}
th.sortable.sorted{color:var(--ink)}
/* A faint arrow on hover tells you the header is clickable before you click it. */
th.sortable:not(.sorted):hover .sarrow::after{content:"▼";opacity:.35}

/* ============================================================ ai agent page
   Everything here is a design, not a running system. The ribbon says so once,
   loudly, and the rest of the page is then free to look like the real thing. */
.proto{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;margin-bottom:18px;
       border:1px dashed color-mix(in srgb,var(--warn) 60%,transparent);border-radius:var(--r);
       background:color-mix(in srgb,var(--warn) 9%,var(--surface));
       font-size:13px;line-height:1.6;color:var(--ink-soft)}
.proto-tag{flex:none;padding:3px 9px;border-radius:6px;background:var(--warn);color:#3a2200;
           font:700 10.5px/1.5 var(--sans);letter-spacing:.07em;text-transform:uppercase}

.agent-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
@media (max-width:1080px){.agent-grid{grid-template-columns:minmax(0,1fr)}}

.pickrow{display:flex;gap:7px;flex-wrap:wrap}
.pick{padding:7px 13px;border-radius:8px;border:1px solid var(--line);cursor:pointer;
      background:var(--surface-2);font:600 12.5px/1.3 var(--sans);color:var(--ink-soft)}
.pick.on{border-color:var(--accent);color:var(--accent);
         background:color-mix(in srgb,var(--accent) 11%,transparent)}

/* toggle */
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:22px;cursor:pointer;
             background:var(--line);transition:background .15s ease}
.switch span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
                     border-radius:50%;background:var(--surface);transition:transform .15s ease;
                     box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::before{transform:translateX(16px)}

/* ---- action cards, striped by how much damage they can do ---- */
.actcard{display:flex;gap:13px;align-items:flex-start;padding:14px 16px 14px 13px;
         border:1px solid var(--line);border-left-width:3px;border-radius:var(--r);
         background:var(--surface);margin-bottom:10px}
.actcard.t-read  {border-left-color:var(--good)}
.actcard.t-change{border-left-color:var(--warn)}
.actcard.t-money {border-left-color:var(--crit)}
.actcard.off{opacity:.55}
.actcard .ico{width:34px;height:34px;border-radius:9px;flex:none;display:flex;
              align-items:center;justify-content:center;font-size:15px;background:var(--surface-2)}
.actcard .meat{flex:1;min-width:0}
.actcard h4{font:600 13.5px/1.35 var(--sans);margin:0 0 3px;display:flex;align-items:center;gap:8px}
.actcard p{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.actcard .ctl{display:flex;flex-direction:column;gap:7px;align-items:flex-end;flex:none}
.tier{padding:2px 7px;border-radius:5px;font:600 10px/1.6 var(--sans);
      letter-spacing:.05em;text-transform:uppercase}
.tier.t-read  {background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.tier.t-change{background:color-mix(in srgb,var(--warn) 18%,transparent);color:#8a4b00}
.tier.t-money {background:color-mix(in srgb,var(--crit) 15%,transparent);color:var(--crit)}
:root:not([data-theme="light"]) .tier.t-change{color:#f0b866}
:root[data-theme="dark"] .tier.t-change{color:#f0b866}

.rule{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--rule)}
.rule:last-child{border-bottom:none}
.rule .meat{flex:1}
.rule h5{font:600 13px/1.35 var(--sans);margin:0 0 2px}
.rule p{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.5}

.livefacts{display:flex;flex-wrap:wrap;gap:7px}
.fact{padding:5px 11px;border-radius:7px;font:500 12px/1.5 var(--sans);
      background:color-mix(in srgb,var(--good) 12%,transparent);
      border:1px solid color-mix(in srgb,var(--good) 32%,transparent);color:var(--ink)}

.polrow{display:flex;gap:9px;margin-bottom:9px;align-items:flex-start}
.polrow input{flex:0 0 190px}
.polrow textarea{flex:1;min-height:56px}

/* ---- meta connect ---- */
.cstat{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r);
       border:1px solid var(--line);background:var(--surface-2)}
.cstat .dotbig{width:11px;height:11px;border-radius:50%;background:var(--muted);flex:none}
.cstep{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
       padding:15px 17px;margin-top:12px}
.cstep-h{display:flex;gap:11px;align-items:center;margin-bottom:9px}
.cstep-n{width:25px;height:25px;border-radius:50%;flex:none;background:var(--surface-2);
         border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
         font:700 11.5px/1 var(--sans);color:var(--ink-soft)}
.cstep-t{font:600 13.5px/1.35 var(--sans)}
.cstep p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 10px}
.cfield{margin-bottom:9px}
.cfield .lbl{display:block;font:600 11.5px/1.5 var(--sans);color:var(--ink-soft);margin-bottom:3px}

/* incoming chat bubble, so a preview reads as a conversation */
.bubble.in{align-self:flex-start;border-radius:14px 14px 14px 4px;
           background:var(--surface-2);border:1px solid var(--line)}
.bubble.act{align-self:center;max-width:96%;text-align:center;border-radius:9px;
            background:color-mix(in srgb,var(--accent) 9%,transparent);
            border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);
            font:500 11.5px/1.55 var(--sans);color:var(--ink-soft)}
.bubble.ask{align-self:center;max-width:96%;text-align:center;border-radius:9px;
            background:color-mix(in srgb,var(--warn) 12%,transparent);
            border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent);
            font:500 11.5px/1.55 var(--sans);color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════════════ POLISH PASS
   Applying the heuristics the product was already close to: visible system
   status, recognition over recall, visible focus, and a layout that does not
   jump while it loads. */

/* ---- focus. Keyboard users need to see where they are; mouse users never
   see this because :focus-visible excludes them. ------------------------- */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.tab:focus-visible{outline-offset:-2px}

/* ---- plan switcher ---------------------------------------------------- */
.planswitch{display:inline-flex;padding:2px;border-radius:9px;
            background:var(--rule-soft);border:1px solid var(--rule)}
.planopt{padding:5px 12px;border:none;border-radius:7px;cursor:pointer;background:transparent;
         font:600 12px/1.4 var(--sans);color:var(--ink-soft);white-space:nowrap;
         transition:background .13s ease,color .13s ease}
.planopt:hover{color:var(--ink)}
.planopt.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow-sm)}
.icon-btn{padding-inline:9px}

/* ---- locked tabs: present, legible, obviously not yours yet ----------- */
.tab.locked{opacity:.58}
.tab.locked:hover{opacity:.85}
.tab .lock{font-size:10px;margin-left:5px;opacity:.8}

.upsell{max-width:620px;margin:32px auto;padding:36px 38px;text-align:center;
        border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);
        box-shadow:var(--shadow)}
.up-badge{display:inline-block;padding:4px 11px;border-radius:20px;margin-bottom:16px;
          background:var(--accent-wash);color:var(--accent);
          font:700 10.5px/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.upsell h2{font:650 23px/1.25 var(--sans);margin:0 0 10px;letter-spacing:-.01em;
           text-wrap:balance}
.upsell > p{font-size:14px;line-height:1.65;color:var(--ink-soft);margin:0 auto 22px;max-width:46ch}
.up-list{display:grid;gap:8px;text-align:left;margin:0 auto 24px;max-width:400px}
.up-item{position:relative;padding-left:25px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.up-item::before{content:"✓";position:absolute;left:0;top:0;color:var(--good);font-weight:700}

/* ---- toasts ----------------------------------------------------------- */
#op-toasts{position:fixed;right:20px;bottom:20px;z-index:200;
           display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:10px;
       background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow-lg);
       font:500 13px/1.45 var(--sans);color:var(--ink);max-width:380px;
       opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}
.toast.in{opacity:1;transform:none}
.toast .ti{width:20px;height:20px;border-radius:50%;flex:none;display:flex;
           align-items:center;justify-content:center;font:700 11px/1 var(--sans);color:#fff}
.toast.ok .ti{background:var(--good)}
.toast.err .ti{background:var(--crit)}
.toast.err{border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---- skeletons. Shapes that hold the layout so nothing jumps. --------- */
.skl{height:11px;border-radius:5px;background:var(--rule-soft);
     background-image:linear-gradient(90deg,var(--rule-soft),var(--rule),var(--rule-soft));
     background-size:200% 100%;animation:sh 1.3s ease-in-out infinite}
.skl.w40{width:40%;height:22px;margin-bottom:9px}
.skl.w70{width:70%}
.kpi.sk{pointer-events:none}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skl{animation:none}}

/* ---- tables: the header stays while the rows scroll ------------------- */
.tablewrap{max-height:min(70vh,760px);overflow:auto}
.tablewrap thead th{position:sticky;top:0;z-index:2;background:var(--card);
                    box-shadow:inset 0 -1px 0 var(--rule)}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:var(--rule-soft)}

/* ---- small shared bits ------------------------------------------------ */
.vr{width:1px;height:22px;background:var(--rule);flex:none}
.addr{display:flex;flex-direction:column;gap:1px;line-height:1.45;min-width:150px}
.addr .sub{font-size:11.5px}

/* ═══════════════════════════════════════════════════ DEPTH & PRESENCE
   The bones were right; what was missing was hierarchy you feel rather than
   read. Cards gain a light source, numbers gain scale, panels arrive instead
   of appearing, and the accent earns its keep in a few loud places rather
   than being sprinkled everywhere. */

/* ---- surfaces get a light source ------------------------------------- */
.card, .kpi{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--card) 100%, #fff 3%) 0%, var(--card) 46%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent);
}
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .kpi,
:root[data-theme="dark"] .card, :root[data-theme="dark"] .kpi{
  background:linear-gradient(180deg, var(--raised) 0%, var(--card) 60%);
  box-shadow:var(--shadow-sm), inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);
}

/* ---- KPI: the number is the point, so it gets the size --------------- */
.kpi{padding:17px 19px; transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
             background:var(--kc,var(--accent));opacity:.9}
.kpi:hover{transform:translateY(-2px);
           box-shadow:var(--shadow), inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent)}
.kpi .v{font-size:30px;font-weight:700;letter-spacing:-.028em;line-height:1.05;
        font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .l{margin-top:5px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
        letter-spacing:.004em}
.kpi .n{margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--muted)}

/* ---- section headers carry more weight ------------------------------- */
.sec{font-size:17px;font-weight:680;letter-spacing:-.019em}
.section-head{margin:30px 0 14px}
.section-head:first-child{margin-top:0}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
         color:var(--muted);margin-bottom:9px}

/* ---- tabs: a real indicator, not a flat underline --------------------- */
.tab{position:relative;transition:color .14s ease}
.tab::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
            border-radius:2px 2px 0 0;background:var(--accent);
            transform:scaleX(0);transform-origin:center;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.tab.active::after{transform:scaleX(1)}
.tab:hover:not(.active){color:var(--ink)}

/* ---- subtabs read as a segmented control ------------------------------ */
.subtab{transition:background .14s ease,color .14s ease,border-color .14s ease}
.subtab:hover{color:var(--ink);border-color:var(--ink-soft)}
.subtab.active{background:var(--accent);border-color:var(--accent);color:#fff;
               box-shadow:0 1px 6px color-mix(in srgb,var(--accent) 34%,transparent)}

/* ---- panels arrive ---------------------------------------------------- */
.panel.active{animation:rise .34s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.kpis > *{animation:rise .34s cubic-bezier(.2,.7,.3,1) backwards}
.kpis > *:nth-child(2){animation-delay:.035s}
.kpis > *:nth-child(3){animation-delay:.07s}
.kpis > *:nth-child(4){animation-delay:.105s}
.kpis > *:nth-child(5){animation-delay:.14s}
.kpis > *:nth-child(6){animation-delay:.175s}
@media (prefers-reduced-motion:reduce){
  .panel.active,.kpis > *{animation:none}
  .kpi{transition:none}
}

/* ---- tables read as data, not as a grid ------------------------------- */
table{font-variant-numeric:tabular-nums}
thead th{font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
         color:var(--muted);padding-top:11px;padding-bottom:11px}
tbody td{padding-top:13px;padding-bottom:13px}
tbody tr{border-bottom:1px solid var(--rule-soft)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
tr.sel{background:color-mix(in srgb,var(--accent) 8%,transparent) !important}

/* ---- buttons get feedback -------------------------------------------- */
.btn{transition:background .13s ease,border-color .13s ease,transform .09s ease,box-shadow .13s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{box-shadow:0 1px 8px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn-primary:hover{box-shadow:0 2px 14px color-mix(in srgb,var(--accent) 42%,transparent)}

/* ---- action bar floats --------------------------------------------- */
.actionbar{box-shadow:var(--shadow-lg);backdrop-filter:saturate(180%) blur(10px)}

/* ═══════════════════════════════════════════════════ AGENT · refinement */
.proto{border-radius:var(--r-lg);align-items:center;
       background:linear-gradient(100deg,
         color-mix(in srgb,var(--warn) 11%,var(--card)),
         color-mix(in srgb,var(--warn) 5%,var(--card)))}

.actcard{border-left-width:0;padding:15px 17px;overflow:hidden;position:relative;
         transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .15s ease,opacity .15s ease}
.actcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.actcard.t-read::before  {background:var(--good)}
.actcard.t-change::before{background:var(--warn)}
.actcard.t-money::before {background:var(--crit)}
.actcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.actcard .ico{width:36px;height:36px;border-radius:11px;font-size:16px}
.actcard.t-read  .ico{background:color-mix(in srgb,var(--good) 13%,transparent)}
.actcard.t-change .ico{background:color-mix(in srgb,var(--warn) 14%,transparent)}
.actcard.t-money .ico{background:color-mix(in srgb,var(--crit) 12%,transparent)}

.pick{transition:all .13s ease}
.pick:hover{border-color:var(--ink-soft);color:var(--ink)}
.pick.on{box-shadow:0 1px 7px color-mix(in srgb,var(--accent) 26%,transparent)}

.phone{border-radius:22px;padding:14px;
       background:linear-gradient(180deg,var(--raised),var(--card));
       box-shadow:var(--shadow-lg)}
.bubble{box-shadow:var(--shadow-sm)}
.fact{transition:transform .13s ease}
.fact:hover{transform:translateY(-1px)}

.cstep{transition:border-color .15s ease,box-shadow .15s ease}
.cstep:hover{border-color:color-mix(in srgb,var(--accent) 32%,transparent);box-shadow:var(--shadow-sm)}
.cstep-n{transition:all .15s ease}
.cstep:hover .cstep-n{background:var(--accent);border-color:var(--accent);color:#fff}

/* ═══════════════════════════════════════════════ PREMIUM · refinement */
/* Charts, stat tiles and the step cards all pick up the same light source and
   the same hover behaviour, so the premium tabs read as one product with the
   Essentials ones rather than an older layer underneath. */
.stat{background:linear-gradient(180deg,
        color-mix(in srgb,var(--card) 100%,#fff 3%),var(--card) 46%);
      box-shadow:var(--shadow-sm);transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .15s ease}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat .v{font-size:23px;font-weight:700;letter-spacing:-.024em}
.stat.flag{border-color:color-mix(in srgb,var(--crit) 45%,transparent);
           background:linear-gradient(180deg,color-mix(in srgb,var(--crit) 7%,var(--card)),var(--card))}
.stat.warn{border-color:color-mix(in srgb,var(--warn) 42%,transparent)}

.row .fill{transition:width .5s cubic-bezier(.2,.7,.3,1);border-radius:5px}
.row:hover .lbl{color:var(--ink)}
.track{border-radius:5px;overflow:hidden}

.scard{transition:border-color .15s ease,box-shadow .15s ease,transform .15s cubic-bezier(.2,.7,.3,1)}
.scard:not(.trigger):not(.end):hover{transform:translateX(2px)}
.sicon{transition:transform .15s ease}
.scard:hover .sicon{transform:scale(1.06)}

.note{border-radius:var(--r-lg);
      background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 6%,var(--card)),var(--card))}
.note.crit{background:linear-gradient(100deg,color-mix(in srgb,var(--crit) 8%,var(--card)),var(--card))}
.note.warn{background:linear-gradient(100deg,color-mix(in srgb,var(--warn) 9%,var(--card)),var(--card))}

.empty{padding:44px 24px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6}

.combo-btn{transition:border-color .13s ease,background .13s ease}
.combo-btn:hover{border-color:var(--ink-soft)}
.combo-btn.on{border-color:var(--accent);color:var(--accent);
              background:color-mix(in srgb,var(--accent) 8%,transparent)}
.chip{transition:transform .12s ease}
.chip:hover{transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════ FLOW MAP
   The saved funnel, drawn as a funnel. The spine's thickness carries the
   information — how many customers are still in play — so the fact that a
   later step is doing nothing is visible before anyone reads a number. */
.mapcard{padding:22px 24px 18px}
.maphead{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
         padding-bottom:15px;margin-bottom:14px;border-bottom:1px solid var(--rule-soft)}
.mapname{font:680 17px/1.3 var(--sans);letter-spacing:-.019em}
.mapstats{display:flex;align-items:center;gap:18px;flex:none}
.mstat{display:flex;flex-direction:column;line-height:1.15}
.mstat b{font:700 19px/1 var(--sans);letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.mstat span{font:600 10.5px/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;
            color:var(--muted);margin-top:3px}

.mapscroll{overflow-x:auto;overflow-y:hidden;margin:0 -4px;padding:4px}
.flowsvg{display:block;min-width:760px;width:100%;height:auto}
.mapfoot{margin:14px 0 0;font-size:12.5px}

.livechip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
          font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;flex:none}
.livechip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.livechip.on{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.livechip.on i{animation:beat 1.9s ease-in-out infinite}
.livechip.sim{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.livechip.off{background:var(--rule-soft);color:var(--muted)}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* type inside the drawing, kept out of the markup */
.flowsvg .mt   {font:640 13px/1 var(--sans);   fill:var(--ink);      letter-spacing:-.012em}
.flowsvg .ms   {font:400 11.5px/1 var(--sans); fill:var(--ink-soft)}
.flowsvg .ms2  {font:500 10.5px/1 var(--sans); fill:var(--muted)}
.flowsvg .mbig {font:700 17px/1 var(--sans);   letter-spacing:-.02em}
.flowsvg .mi   {font:400 13px/1 var(--sans);   fill:var(--ink-soft)}
.flowsvg .mwait{font:600 10px/1 var(--sans);   fill:var(--muted); letter-spacing:.03em}
.flowsvg .maxis{font:600 10.5px/1 var(--sans); fill:var(--muted); letter-spacing:.05em;
                text-transform:uppercase}

/* The hover lift lives on an INNER group. CSS `transform` replaces the
   transform attribute rather than composing with it, so animating the group
   that also positions the node throws it to the origin — which is exactly the
   jumping this used to do. */
.flowsvg .mn{transition:transform .17s cubic-bezier(.2,.7,.3,1);cursor:default}
.flowsvg g:hover > .mn{transform:translateY(-3px)}

.flowsvg .mflow{animation:mflow 1.4s linear infinite}
@keyframes mflow{to{stroke-dashoffset:-30}}
@media (prefers-reduced-motion:reduce){
  .flowsvg .mflow{animation:none;opacity:0}
  .livechip.on i{animation:none}
  .flowsvg .mn{transition:none}
}

/* ---- builder: the trade-off you are making, always visible ------------ */
.ftotals{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
         padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid var(--rule-soft)}
.ftot{display:flex;flex-direction:column;line-height:1.15}
.ftot b{font:700 19px/1 var(--sans);letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.ftot span{font:600 10.5px/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;
           color:var(--muted);margin-top:4px}

/* ---- automation: status strip and first-run guide ---- */
.autostrip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.strip-main{display:flex;align-items:center;gap:12px;min-width:0}
.strip-title{font-weight:700}
.strip-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--muted,#888)}
.sdot.sim{background:var(--warn)}
.sdot.live{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 25%,transparent)}
.seg{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--border);border-radius:10px}
.seg .btn{border-color:transparent}
.guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
@media (max-width:860px){.guide{grid-template-columns:1fr}}
.gstep{display:flex;gap:10px;align-items:flex-start}
.gnum{flex:0 0 26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
      font-weight:700;font-size:13px;border:1px solid var(--border)}
.gstep.done .gnum{background:var(--good);border-color:var(--good);color:#fff}

/* ---- phones: the bar wraps, secondary chrome hides, tables scroll ---- */
@media (max-width:640px){
  .topbar-in{flex-wrap:wrap; gap:10px; padding:10px 14px}
  .topbar-right{margin-left:0; width:100%; flex-wrap:wrap; gap:6px}
  .topbar-right > .sub, .topbar-right .badge.b-mute, .brandchip{display:none}
  .tabs{padding:0 14px}
  .wrap{padding-left:14px; padding-right:14px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .autostrip{flex-direction:column; align-items:stretch}
  .strip-actions{justify-content:space-between}
  .actionbar{flex-wrap:wrap}
  .filterbar{flex-wrap:wrap}
  .filterbar .input{min-width:0; width:100%}
}

/* ---- confirmations: explainer, clickable KPIs, grouped actions ---- */
.explain{margin-top:8px; max-width:900px}
.explain em{font-style:normal; font-weight:650; color:var(--ink)}
.kpi-btn{cursor:pointer}
.kpi-btn.on{outline:2px solid var(--kc,var(--accent)); outline-offset:-1px}
.kpi-btn:focus-visible{outline:2px solid var(--accent)}
.actionbar .grp{display:inline-flex; align-items:center; gap:6px}
.actionbar .grp-l{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-right:2px}