/* ACA CRM, on ACA's design system (/ui.css, shared with the funnel pages): a very light grey page, white cards and
   bars in front of it (light grey controls inside them), black pill buttons and selections, and frosted gradient
   cards for the numbers that open each page. Inter, its display cut on titles and numbers, set light: 400 for text
   and words, 450 for navigation, 500 for buttons, names and headings; Geist Mono for numbers and data (stat tiles,
   table amounts, times, counts, uppercase labels, table headers, chart axes). Dot charts colour their main series with a
   warm heat ramp by height.
   Phones: no sidebar, a floating tab bar, one column, dialogs as sheets from the bottom. */
:root{
  --s-blue:#3b82f6; --s-lilac:#8b5cf6; --s-teal:#14b8a6; --s-gray:#a1a1aa; --s-amber:#f59e0b; --s-red:#ef4444; --s-orange:#f97316; --s-green:#22c55e; --s-ink:#52525b;
  --scrim:rgba(11,11,15,.34); --rl:rgba(11,11,15,.07); /* hairlines inside a card */
  --r:24px;
  /* charts: one accent (slot-1 blue of the dataviz palette, 4.6:1 on white), a quiet gray for "the rest",
     and the lightest step of the same blue ramp for meter tracks */
  --viz-1:#2a78d6; --viz-rest:#c9cad3; --viz-track:#dfe8f6;
  /* the heat ramp of the dot charts (amber at the bottom, red at the top, as in the burn chart): the same five steps as HEAT in charts.js */
  --heat:linear-gradient(135deg,#f4b740,#ef8a35 50%,#d83b2f);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
svg{display:block}
.boot{display:grid;place-items:center;height:100vh;font-family:var(--head);font-weight:500;font-size:22px;letter-spacing:-.03em;color:var(--ink-3)}
h1{font-family:var(--head);font-size:30px;font-weight:500;letter-spacing:-.034em;line-height:1.1;margin:0}
h2{font-family:var(--head);font-size:16px;font-weight:500;letter-spacing:-.016em;margin:0}
h3{font:400 11px/1.4 var(--mono);margin:0;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
p{margin:0}
.sub{color:var(--ink-3);font-size:14px;margin-top:6px}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)} .small{font-size:12.5px} .nowrap{white-space:nowrap}
.cap::first-letter{text-transform:uppercase}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.num,.tnum{font-variant-numeric:tabular-nums}

/* ---------- controls: pills; black is the main action and the current choice; neutral ones follow --ctl ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;border:0;background:var(--ctl);
  color:var(--ink);font-weight:500;font-size:13.5px;letter-spacing:-.008em;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s,transform .14s var(--ease),opacity .15s}
.btn:hover{background:var(--ctl-2)}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--ink);color:var(--on-ink)}
.btn.dark:hover{background:#24242b}
.btn.ghost{background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--ctl);color:var(--ink)}
.btn.danger{background:#fdf0ef;color:var(--danger)}
.btn.danger:hover{background:#fbe3e1}
.btn.sm{height:32px;padding:0 13px;font-size:13px}
.btn.block{width:100%;height:46px;font-size:14.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
[data-wa] .ico{color:#1da851} /* WhatsApp's green on its icon only */
.person .meta .btn{height:28px;padding:0 11px;font-size:12.5px}
.btn svg,.ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
input[type=text],input[type=email],input[type=number],input[type=date],input[type=time],input[type=search],input[type=url],input[type=tel],input[type=password],select,textarea{
  border:1.5px solid transparent;background-color:var(--ctl);border-radius:var(--r-sm);height:40px;padding:0 13px;font-size:14px;width:100%;min-width:0;color:var(--ink);
  appearance:none;-webkit-appearance:none;transition:border-color .15s,background-color .15s}
textarea{height:auto;padding:11px 13px;resize:vertical;min-height:88px;line-height:1.5}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5' fill='none' stroke='%235c5c66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background-color:#fff}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=color]{border:0;background:var(--ctl);border-radius:var(--r-sm);cursor:pointer}
label.f{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:400;color:var(--ink-2);min-width:0}
.check{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--ink);margin:0}
.err{font-size:13.5px;color:var(--danger)}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;background:var(--ctl);color:var(--ink-2);font-size:12px;font-weight:450;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip.ok{background:#e8f8ee;color:#067647} .chip.warn{background:#fff3e6;color:#b54708} .chip.info{background:#eef1ff;color:#3538cd}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;border-radius:999px;background:var(--ctl);font-size:12.5px;font-weight:450;white-space:nowrap;color:var(--ink)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--sc,var(--s-gray));flex:none}
.badge{min-width:22px;height:20px;padding:0 7px;border-radius:999px;background:var(--fill-2);font:400 11px/1 var(--mono);display:inline-grid;place-items:center;color:var(--ink-2)}
.badge.alert{background:#fde8e7;color:#c81e1e}
.av{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:500;background:var(--fill-2);color:var(--ink-2);flex:none;letter-spacing:.01em}
.av.lg{width:56px;height:56px;font-size:19px;font-weight:400;font-family:var(--head)}
.av.sm{width:28px;height:28px;font-size:11px}
.av.xs{width:22px;height:22px;font-size:9.5px}
/* initials on a soft tint picked from the name, so a person keeps the same color everywhere */
.av.t0{background:#e9f0ff;color:#2459d0} .av.t1{background:#f1edff;color:#6436e0} .av.t2{background:#e6f8ee;color:#147a3d}
.av.t3{background:#fff2df;color:#a6530b} .av.t4{background:#fdecf5;color:#b3195a} .av.t5{background:#e4f8fb;color:#0b6b80}
.namecell{display:flex;align-items:center;gap:10px;min-width:0}
.namecell>div{min-width:0}
kbd{font-family:var(--mono);font-size:11px;font-weight:400;min-width:20px;height:20px;display:inline-grid;place-items:center;border-radius:6px;color:var(--ink-3);padding:0 5px;background:var(--fill)}
/* segmented controls and tabs: a black pill glides to the chosen option */
.seg{display:inline-flex;background:var(--ctl);border-radius:999px;padding:3px;flex:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.seg button{border:0;background:none;height:32px;padding:0 14px;font-size:13px;font-weight:450;color:var(--ink-2);cursor:pointer;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.tabs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:450;font-size:13.5px;z-index:90;max-width:calc(100% - 32px);box-shadow:var(--shadow-2)}
.toast.bad{background:var(--danger)}

/* ---------- sign-in ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:30px 18px;background:var(--bg)}
.auth-box{width:min(420px,100%);background:var(--card);border-radius:var(--r-xl);padding:32px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-2);--ctl:var(--fill);--ctl-2:var(--fill-2)}
.auth-box input{height:48px}
.auth-box .btn{height:48px}

/* ---------- shell: a white sidebar and floating white controls on the grey page ---------- */
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);line-height:0}
.brand svg{display:block;fill:currentColor;flex:none}
.brand .word{height:25px;width:auto}
.brand .mark{display:none;height:27px;width:auto}
.app{display:flex;min-height:100vh}
.side{width:244px;flex:none;display:flex;flex-direction:column;padding:0 14px 16px;position:sticky;top:0;height:100vh;background:var(--card);box-shadow:1px 0 0 rgba(11,11,15,.04);--ctl:var(--fill);--ctl-2:var(--fill-2)}
.side .brand{height:68px;padding:0 10px}
.navsec{font:400 10.5px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:18px 12px 8px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:450;font-size:14px;position:relative}
.nav a:hover{background:var(--fill);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--ink);color:#fff}
.nav a[aria-current="page"] .badge{background:rgba(255,255,255,.18);color:#fff}
.nav .ico{width:18px;height:18px}
.nav .badge{margin-left:auto}
.side-foot{margin-top:auto;padding-top:12px}
.page{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:68px;flex:none;display:flex;align-items:center;gap:14px;padding:0 30px;position:sticky;top:0;background:rgba(245,245,247,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);z-index:30}
.top .brand{display:none}
.search{display:flex;align-items:center;gap:8px;width:min(400px,100%);height:42px;border-radius:999px;padding:0 8px 0 15px;color:var(--ink-3);background:var(--ctl);border:1.5px solid transparent;transition:border-color .15s,background-color .15s}
.search:focus-within{border-color:var(--ink);background:#fff}
.search input{border:0!important;background:transparent!important;height:38px;padding:0;flex:1;font-size:14px}
.search .keys{display:flex;gap:3px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);position:relative;text-decoration:none;border:0;background:var(--ctl);cursor:pointer;transition:background .15s}
.iconbtn:hover{background:var(--ctl-2)}
.iconbtn .ico{width:18px;height:18px}
.iconbtn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--s-red);border:2px solid var(--ctl)}
.who{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;margin-left:2px;height:42px;border-radius:999px;background:var(--ctl);text-decoration:none}
.who b{display:block;font-size:13.5px;font-weight:500;line-height:1.2}
.who small{display:block;font-size:12px;color:var(--ink-3);line-height:1.2}
.main{flex:1;width:100%;min-width:0;padding:22px 30px 64px} /* the whole width of the window, on any screen */
.head{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.head>.title{margin-right:auto;min-width:0}
.bottom{display:none}

/* ---------- blocks: white cards on the grey page, light grey things inside ---------- */
.card{background:var(--card);border-radius:var(--r);padding:20px 22px;box-shadow:var(--lift);--ctl:var(--fill);--ctl-2:var(--fill-2)}
.card+.card{margin-top:14px}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{margin-right:auto}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.stats+.stats{margin-top:-8px}
.stat{border-radius:var(--r);padding:18px 20px;background:var(--card);min-height:136px;display:flex;flex-direction:column;box-shadow:var(--lift);container-type:inline-size;--ctl:var(--fill);--ctl-2:var(--fill-2)}
.stat .k{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-2);font-weight:400}
/* the number in Geist Mono, as large as the tile allows: --n is its length in characters (set by stat() in app.js).
   Numbers in mono close up the full-width space before a unit ("790 $", "77 %") to the width of the group separator. */
.stat .v{font-family:var(--mono);font-size:min(36px,calc(100cqi / (var(--n,8) * .6)));font-weight:400;letter-spacing:-.045em;word-spacing:-.3em;margin-top:auto;padding-top:14px;line-height:1.02;white-space:nowrap}
.stat .d{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.si{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--ink-2);flex:none}
.si .ico{width:16px;height:16px}
.si.amber{color:#c27803} .si.red{color:#d92d20} .si.violet{color:#6e3ff3} .si.blue{color:#2463eb} .si.green{color:#15803d}
/* the numbers that open a page: frosted gradient tiles, the colour follows the tile's icon */
.stats.hero .stat{color:#fff;position:relative;overflow:hidden;isolation:isolate;background:var(--g-violet);background-blend-mode:overlay,normal;--glow:rgba(60,60,180,.5);box-shadow:var(--rim),0 20px 40px -28px var(--glow)}
.stats.hero .stat:has(.si.blue){background:var(--g-ocean);--glow:rgba(40,80,200,.48)} .stats.hero .stat:has(.si.amber){background:var(--g-sun);--glow:rgba(220,90,20,.45)}
.stats.hero .stat:has(.si.green){background:var(--g-lime);--glow:rgba(25,110,55,.45)} .stats.hero .stat:has(.si.red){background:var(--g-coral);--glow:rgba(200,40,30,.45)}
.stats.hero .stat:has(.si.violet){background:var(--g-grape);--glow:rgba(50,25,110,.5)}
.stats.hero .stat .k{color:rgba(255,255,255,.88)}
.stats.hero .stat .d{color:rgba(255,255,255,.78)}
.stats.hero .si{background:var(--frost);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.stats.hero .delta.up,.stats.hero .delta.down{color:#fff}
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start}
.grid2>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.grid2 .card+.card{margin-top:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.cols>.card+.card{margin-top:0}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:12px 8px;border-top:1px solid var(--rl);min-width:0}
.row:first-child{border-top:0}
.row.link{cursor:pointer;border-radius:14px}
.row.link:hover{background:var(--fill);border-top-color:transparent}
.row.link:hover+.row{border-top-color:transparent}
.row .when{width:56px;flex:none;font:400 14.5px/1.3 var(--mono);letter-spacing:-.02em}
.row .grow{flex:1;min-width:0}
.row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.empty{padding:26px 6px;color:var(--ink-3);text-align:center;font-size:13.5px}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:30px 16px 32px;color:var(--ink-2)}
.empty-state .es-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--ink-3);margin-bottom:8px}
.empty-state .es-ico .ico{width:19px;height:19px}
.empty-state b{font-family:var(--head);font-weight:500;font-size:15px;color:var(--ink)}
.empty-state p{font-size:13px;color:var(--ink-3);max-width:360px;line-height:1.5}
.empty-state .btn{margin-top:10px}
td .empty-state{padding:34px 16px}
.kv{display:grid;grid-template-columns:minmax(100px,max-content) 1fr;gap:9px 16px;font-size:13.5px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.qa{display:flex;flex-direction:column;gap:14px}
.qa .q{font-size:12.5px;color:var(--ink-3)}
.qa .a{font-size:14px;white-space:pre-wrap;margin-top:3px}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:12px;padding:8px 0;font-size:13.5px;border-top:1px solid var(--rl)}
.tl li:first-child{border-top:0}
.tl li .t{width:122px;flex:none;color:var(--ink-3);font:400 11.5px/1.6 var(--mono);padding-top:1px}
.tl li .x{min-width:0}
.tabs{display:flex;gap:2px;overflow-x:auto;padding:3px;border-radius:999px;background:var(--ctl);margin-bottom:14px;max-width:100%;width:max-content;scrollbar-width:none}
.tabs button{border:0;background:transparent;border-radius:999px;height:34px;padding:0 14px;font-size:13px;font-weight:450;color:var(--ink-2);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tabs button:hover{color:var(--ink)}
.tabs button b{font:400 11px/1 var(--mono);color:var(--ink-3)}
.tabs button[aria-pressed="true"] b{color:rgba(255,255,255,.7)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters select,.filters input{width:auto;min-width:160px;flex:0 1 200px;height:38px;font-size:13.5px;border-radius:999px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font:400 10.5px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:13px 12px 10px;white-space:nowrap}
.tbl td{padding:12px;border-top:1px solid var(--rl);vertical-align:middle}
.tbl tr.link{cursor:pointer}
.tbl tr.link:hover td{background:var(--fill)}
.tbl tr.link:hover td:first-child{border-radius:14px 0 0 14px}
.tbl tr.link:hover td:last-child{border-radius:0 14px 14px 0}
.tbl tr.link:hover td,.tbl tr.link:hover+tr td{border-top-color:transparent}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.num{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em;word-spacing:-.3em}
.tbl td.num .btn{font-family:var(--font);letter-spacing:-.008em;word-spacing:normal}
.tbl-card{border-radius:var(--r);overflow:hidden;background:var(--card);padding:4px 8px;box-shadow:var(--lift);--ctl:var(--fill);--ctl-2:var(--fill-2)}
.tbl-wrap{overflow-x:auto}
.card .tbl th{padding:0 9px 9px}
.card .tbl td{padding-left:9px;padding-right:9px}
.card .tbl td:first-child,.card .tbl th:first-child{padding-left:0}
.card .tbl td:last-child,.card .tbl th:last-child{padding-right:0}
.bar{height:5px;background:var(--fill-2);border-radius:99px;overflow:hidden;width:64px;margin-bottom:3px}
.bar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.funnelrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:20px}
.step{padding:16px;border-radius:20px;background:var(--card);display:flex;flex-direction:column;box-shadow:var(--lift)}
.step .d{margin-bottom:10px}
.step .meter{margin-top:auto}
.step .k{font-size:12.5px;color:var(--ink-3)} .step .v{font-family:var(--mono);font-size:26px;font-weight:400;letter-spacing:-.045em;word-spacing:-.3em;margin-top:4px} .step .d{font-size:12px;color:var(--ink-2)}
.hours{display:grid;gap:8px}
.hours .day{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px}
.hours .spans{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hours input[type=time]{width:112px;height:36px;padding:0 9px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--fill);border-radius:var(--r-sm);padding:11px 13px;overflow-wrap:anywhere;white-space:pre-wrap}
.callbox{border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:12px;background:var(--card);box-shadow:var(--lift);--ctl:var(--fill);--ctl-2:var(--fill-2)}
.card .callbox{background:var(--fill);box-shadow:none;--ctl:#fff;--ctl-2:#f7f7f9}
.callbox .big{font-family:var(--head);font-size:24px;font-weight:400;letter-spacing:-.034em}
.callbox .acts{display:flex;gap:8px;flex-wrap:wrap}
.outs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.outs button{height:48px;border:0;background:var(--ctl);border-radius:14px;font-weight:450;cursor:pointer;font-size:13.5px;transition:background .15s,color .15s}
.outs button:hover{background:var(--ctl-2)}
.outs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#ofields{display:grid;gap:12px}
#ofields:empty{display:none}
.danger-zone{border-radius:var(--r);padding:16px 18px;background:#fdf0ef}
iframe.mail{width:100%;height:460px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.person{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:4px 0 22px}
.person .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--ink-2)}
.person .meta a{text-decoration:none}
.person .meta a:hover{text-decoration:underline}
/* funnel editor: the gradient of a funnel */
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches label{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:450;color:var(--ink-2)}
.swatches input{position:absolute;opacity:0;width:1px;height:1px}
.swatches i{width:52px;height:52px;border-radius:50%;box-shadow:var(--rim-sm);transition:box-shadow .15s,transform .15s var(--ease)}
.swatches input:checked+i{box-shadow:var(--rim-sm),0 0 0 3px #fff,0 0 0 4.5px var(--ink)}
.swatches input:focus-visible+i{outline:2px solid var(--ink);outline-offset:4px}
.swatches label:hover i{transform:scale(1.05)}

/* ---------- the next call (Aujourd'hui): a gradient card ---------- */
.nextcall{border-radius:var(--r);padding:22px 24px;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:22px;align-items:center;margin-bottom:14px}
.kicker{display:flex;align-items:center;gap:7px;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--s-amber);flex:none}
.kicker i.live{background:var(--s-red);box-shadow:0 0 0 3px rgba(239,68,68,.2)}
.nextcall .kicker{color:rgba(255,255,255,.85)}
.nextcall .kicker i{background:#fff}
.nextcall .kicker i.live{background:#ffd2cf;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.nextcall .clock{font-family:var(--mono);font-size:42px;font-weight:400;letter-spacing:-.06em;line-height:1;margin-top:10px}
.nextcall .eta{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:6px}
.nextcall .eta.soon{color:#fff;font-weight:500}
.nextcall .who-line{display:flex;align-items:center;gap:10px;min-width:0}
.nextcall .who-line b{font-family:var(--head);font-size:20px;font-weight:450;letter-spacing:-.024em}
.nextcall .faint{color:rgba(255,255,255,.78)}
.nextcall .av{background:var(--frost);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.nextcall .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.nextcall .chip,.nextcall .risk{background:var(--frost);color:#fff}
.nextcall .acc{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.92);line-height:1.5}
.nextcall .ai{background:var(--frost);color:#fff}
.nextcall .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nextcall .btn{background:var(--frost);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.nextcall .btn:hover{background:var(--frost-2)}
.nextcall .btn.dark{background:#fff;box-shadow:none;color:var(--ink)}
.nextcall .btn.dark:hover{background:#f1f1f4}

/* ---------- agenda week board: white columns, light grey calls ---------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.week .col{border-radius:20px;background:var(--card);min-height:460px;display:flex;flex-direction:column;min-width:0;box-shadow:var(--lift);--ctl:var(--fill);--ctl-2:var(--fill-2)}
.week .col.past{opacity:.6}
.week .dh{padding:12px 12px 8px;display:flex;align-items:center;gap:7px}
.week .dh .wd{font:400 10.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.week .dh .dn{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:-.04em;min-width:30px;height:30px;display:inline-grid;place-items:center;border-radius:50%}
.week .col.today .dn{background:var(--ink);color:#fff}
.week .dh .n{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.week .evs{padding:4px 8px 8px;display:flex;flex-direction:column;gap:6px}
.ev{border:0;border-radius:14px;padding:8px 10px 9px 22px;background:var(--fill);cursor:pointer;position:relative;min-width:0;display:block;text-align:left;width:100%;font:inherit;color:inherit;
  transition:box-shadow .15s,background-color .15s,transform .15s var(--ease)}
.ev::before{content:"";position:absolute;left:10px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--sc,var(--s-gray))}
.ev:hover{box-shadow:0 0 0 1.5px var(--ink);background:#fff}
.ev .t{font:400 11px/1.4 var(--mono);color:var(--ink-2);display:flex;gap:6px;align-items:center}
.ev .n{font-size:13px;font-weight:500;margin-top:1px}
.ev .m{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.week .free{font-size:12px;color:var(--ink-3);padding:4px 6px}
.agenda-list{display:none}
.agenda-list .day-empty{display:flex;align-items:center;gap:10px;padding:10px 4px;font-size:13px;color:var(--ink-3);border-top:1px solid var(--rl)}
.agenda-list .day-empty:first-child{border-top:0}

/* ---------- charts: dots, hairlines, white tooltips ---------- */
.chart{position:relative;margin-top:4px}
.chart svg{width:100%;display:block;overflow:visible}
.chart .gl{stroke:var(--rl);stroke-width:1;shape-rendering:crispEdges}
.chart .base{stroke:rgba(11,11,15,.1);stroke-width:1;shape-rendering:crispEdges}
.chart text{font-family:var(--mono);font-size:10.5px;fill:var(--ink-3);word-spacing:-.3em}
.chart text.peak{fill:var(--ink);font-weight:500}
.heatkey{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:8px;font:400 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.heatkey span{margin:0 4px}
.heatkey i{width:7px;height:7px;border-radius:50%;flex:none}
.chart .hit{fill:transparent;outline:none}
.chart .dotbase{fill:rgba(11,11,15,.12)}
.chart .hit:focus-visible{stroke:var(--ink);stroke-width:1.5}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:50%;background:var(--k);flex:none}
.legend.lines i{width:14px;height:3px;border-radius:2px}
.tip{position:absolute;z-index:6;pointer-events:none;background:#fff;border-radius:14px;box-shadow:var(--shadow-2),0 0 0 1px rgba(11,11,15,.05);padding:10px 13px 11px;font-size:12.5px;min-width:150px;white-space:nowrap}
.tip .th{font-weight:500;color:var(--ink);margin-bottom:6px}
.tip .tr{display:flex;align-items:center;gap:8px;color:var(--ink-2);line-height:1.7}
.tip .tr b{color:var(--ink);font:500 12px/1.7 var(--mono);letter-spacing:-.02em;word-spacing:-.3em}
.tip .tr .k{width:8px;height:8px;border-radius:50%;background:var(--k);flex:none}
.tip .tr .k.none{background:transparent}
.meter{height:6px;border-radius:99px;background:var(--fill-2);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--ink);min-width:2px}
.lbar{height:5px;border-radius:99px;background:var(--fill-2);overflow:hidden;margin-top:6px;max-width:180px}
.lbar i{display:block;height:100%;border-radius:99px;background:var(--ink)}
.delta{font:400 11.5px/1.4 var(--mono)}
.delta.up{color:#067647} .delta.down{color:#b42318}

/* ---------- Claude: call notes and pre-call brief ---------- */
.ai{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;background:#f0ebff;color:#6436e0;font-size:12px;font-weight:450;white-space:nowrap}
.ai .ico{width:13px;height:13px}
.notes{display:grid;gap:16px}
.notes .resume{font-size:14px;line-height:1.65}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.facts .q{font-size:12px;color:var(--ink-3)} .facts .a{font-size:13.5px;margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.objs{display:flex;flex-direction:column;gap:8px}
.obj{border-radius:14px;padding:10px 13px;background:var(--fill)}
.obj b{font-weight:500;font-size:13.5px} .obj p{font-size:13px;color:var(--ink-2);margin-top:2px}
.engage{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.engage i{width:14px;height:6px;border-radius:3px;background:var(--fill-2)}
.engage i.on{background:var(--ink)}
.draft{border-radius:14px;background:var(--fill);padding:13px 15px;font-size:13.5px;white-space:pre-wrap;line-height:1.6}
.draft .subj{font-weight:500;margin-bottom:8px}
.ai-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--rl);padding-top:12px}
.ai-foot .faint{margin-right:auto}
.wait{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:13.5px;padding:4px 0;flex-wrap:wrap}
.wait>.small{min-width:180px}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--fill-2);border-top-color:var(--ink);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.brief{display:grid;gap:12px;border-top:1px solid var(--rl);padding-top:14px}
.brief .acc{font-size:14px;font-weight:500;line-height:1.5}
.brief .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.brief h4{font-size:12px;font-weight:500;color:var(--ink-3);margin:0 0 4px}
.brief ul{margin:0;padding-left:17px;font-size:13.5px;color:var(--ink-2)}
.brief li+li{margin-top:2px}
.suggest{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#6436e0;margin-top:-4px}

/* ---------- motion: quick, soft and never in the way; all of it off with reduced motion ---------- */
.main{transition:opacity .22s var(--ease)}
.main.busy{opacity:.5}
.main.anim>*{animation:enter .55s var(--spring) both}
.main.anim>*:nth-child(2){animation-delay:.04s}.main.anim>*:nth-child(3){animation-delay:.08s}.main.anim>*:nth-child(4){animation-delay:.12s}
.main.anim>*:nth-child(5){animation-delay:.16s}.main.anim>*:nth-child(6){animation-delay:.2s}.main.anim>*:nth-child(n+7){animation-delay:.24s}
.main.anim .stats>.stat{animation:enter .55s var(--spring) both}
.main.anim .stats>.stat:nth-child(2){animation-delay:.05s}.main.anim .stats>.stat:nth-child(3){animation-delay:.1s}.main.anim .stats>.stat:nth-child(4){animation-delay:.15s}
.main.anim .agrid>.card{animation:enter .6s var(--spring) both}
.main.anim .agrid>.card:nth-child(2){animation-delay:.05s}.main.anim .agrid>.card:nth-child(3){animation-delay:.1s}.main.anim .agrid>.card:nth-child(4){animation-delay:.15s}.main.anim .agrid>.card:nth-child(n+5){animation-delay:.2s}
@keyframes enter{from{opacity:0;transform:translateY(10px)}}
.scrim{animation:fade .22s ease both}
.scrim .modal{animation:pop .32s var(--spring) both}
.scrim.out{animation:fadeout .18s ease both}
.scrim.out .modal{animation:popout .18s ease both}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes popout{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes fadeout{to{opacity:0}}
.toast{animation:toastin .35s var(--spring) both}
.toast.out{animation:toastout .22s ease both}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px) scale(.97)}}
@keyframes toastout{to{opacity:0;transform:translate(-50%,8px)}}
.row.link,.tbl tr.link td,.nav a,.subnav a{transition:background .15s,color .15s,border-color .15s}
.seg,.tabs{position:relative}
.seg .glider,.tabs .glider{position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--ink);pointer-events:none;z-index:0}
.seg .glider.move,.tabs .glider.move{transition:transform .34s var(--spring),width .34s var(--spring)}
.seg button,.tabs button{position:relative;z-index:1;transition:color .2s}
.seg.glide button[aria-pressed="true"],.tabs.glide button[aria-pressed="true"]{background:transparent}
/* charts */
.c-grow{transform-box:fill-box;transform-origin:50% 100%;animation:cgrow .75s var(--spring) both;animation-delay:var(--d,0ms)}
.c-grow.down{transform-origin:50% 0}
.c-growx{transform-box:fill-box;transform-origin:0 50%;animation:cgrowx .85s var(--spring) both;animation-delay:var(--d,0ms)}
.c-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:cdraw 1.2s var(--ease) forwards;animation-delay:var(--d,0ms)}
.c-fade{animation:fade .7s ease both;animation-delay:var(--d,0ms)}
.c-pop{transform-box:fill-box;transform-origin:50% 50%;animation:cpop .5s var(--spring) both;animation-delay:var(--d,0ms)}
@keyframes cgrow{from{transform:scaleY(0)}}
@keyframes cgrowx{from{transform:scaleX(0)}}
@keyframes cdraw{to{stroke-dashoffset:0}}
@keyframes cpop{from{opacity:0;transform:scale(.2)}}
.chart .lab{font-family:var(--font);font-size:12.5px;fill:var(--ink-2);font-weight:400;word-spacing:normal}
.chart .val{font-family:var(--mono);font-size:12px;fill:var(--ink);font-weight:400}
.chart .track{fill:var(--fill)}
.chart .cross{stroke:rgba(11,11,15,.18);stroke-width:1;shape-rendering:crispEdges}
.chart .cell:focus-visible,.chart .hit:focus-visible{outline:none;stroke:var(--ink);stroke-width:1.5}
.chart .bar-on circle:not(.dotbase),.chart .bar-on path,.chart .bar-on rect:not(.hit):not(.track){filter:brightness(1.1) saturate(1.1)}
.chart .cell:hover{filter:brightness(.92)}
.tip{transition:left .12s var(--ease),top .12s var(--ease)}

/* ---------- Funnels: one card per funnel, its numbers, its leads per day and its pages ---------- */
.fcard+.fcard{margin-top:14px}
.fhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.fhead .grow{flex:1;min-width:180px}
.fhead h2{font-size:19px;letter-spacing:-.024em}
.fdot{width:40px;height:40px;border-radius:12px;flex:none;background-blend-mode:overlay,normal;box-shadow:var(--rim-sm)}
.furl{font:400 12px/1.6 var(--mono);color:var(--ink-3);text-decoration:none}
.furl:hover{color:var(--ink);text-decoration:underline}
.fkpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fk{background:var(--fill);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.fk span{font-size:12.5px;color:var(--ink-2)}
.fk b{font:400 22px/1.15 var(--mono);letter-spacing:-.04em;word-spacing:-.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk small{font:400 11px/1.4 var(--mono);color:var(--ink-3)}
.fchart{margin-top:16px}
.fpages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fpage{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:14px;background:var(--fill);min-width:0}
.fpage .grow{flex:1;min-width:0}
.fpage b{display:block;font-weight:500;font-size:13.5px}
.fpage span{display:block;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpage .btn{background:#fff}
@media (max-width:980px){.fkpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.fkpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fpages{grid-template-columns:1fr}.fhead .btn{flex:1}}

/* ---------- Analyses ---------- */
.agrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.agrid>.card{margin:0}
.agrid>.wide{grid-column:1 / -1}
.card .sub2{font-size:12.5px;color:var(--ink-3);margin:-8px 0 12px}
.kpi-note{font-size:12px;color:var(--ink-3)}

/* ---------- no-show risk, Stripe, emails ---------- */
.risk{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;background:#fff3e6;color:#b54708;font-size:12px;font-weight:450;white-space:nowrap;cursor:help}
.risk.high{background:#fde8e7;color:#b42318}
.risk .ico{width:13px;height:13px}
.ev.risky{box-shadow:0 0 0 1.5px #f8c99c}
.ev.risky.high{box-shadow:0 0 0 1.5px #f5b2ad}
.ev .rk{margin-left:auto;display:inline-flex;color:#c2610c}.ev .rk svg{width:13px;height:13px}
.ev.risky.high .rk{color:var(--danger)}
.stp{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:450;line-height:1.35;max-width:100%}
.stp .ico{flex:none}
td .stp{white-space:nowrap}
.stp.ok{background:#e8f8ee;color:#067647} .stp.ecart,.stp.depasse{background:#fff3e6;color:#b54708} .stp.manquant{background:#fde8e7;color:#b42318} .stp.attente{background:var(--ctl);color:var(--ink-2)}
.stp .ico{width:13px;height:13px}
.mails{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.mails span{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-3)}
.mails span.on{color:#067647}
.mails span.bad{color:#b42318}
.mails .ico{width:12px;height:12px}
.booked{font-size:12.5px;color:var(--ink-3)}

/* ---------- phones: "Plus" opens a sheet with the other pages ---------- */
.sheet-scrim{position:fixed;inset:0;background:var(--scrim);z-index:70;animation:fade .22s ease both}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--card);--ctl:var(--fill);--ctl-2:var(--fill-2);border-radius:28px 28px 0 0;padding:8px 12px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(11,11,15,.14);animation:sheetin .38s var(--spring) both}
.sheet.out{animation:sheetout .22s ease both}
.sheet-scrim.out{animation:fadeout .22s ease both}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--line-2);margin:4px auto 10px}
.sheet a{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:450;font-size:15px}
.sheet a:active{background:var(--fill)}
.sheet a[aria-current]{background:var(--ink);color:#fff}.sheet a[aria-current] .ico{color:#fff}
.sheet a .ico{width:20px;height:20px;color:var(--ink-2)}
@keyframes sheetin{from{transform:translateY(100%)}}
@keyframes sheetout{to{transform:translateY(100%)}}

/* ---------- commissions ---------- */
.monthnav{display:inline-flex;align-items:center;gap:2px;border-radius:999px;padding:3px;background:var(--ctl)}
.monthnav b{font-family:var(--head);font-weight:450;font-size:14px;min-width:132px;text-align:center;text-transform:capitalize}
.monthnav .btn{height:32px;width:32px;padding:0;background:var(--fill)}
.monthnav .btn:hover{background:var(--fill-2)}
.tbl tfoot td{font-weight:500;border-top:1px solid rgba(11,11,15,.12);border-bottom:0;padding-top:12px}
.neg{color:#b42318}

/* ---------- settings ---------- */
.settings{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.subnav{display:flex;flex-direction:column;gap:3px;position:sticky;top:90px}
.subnav a{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:450;white-space:nowrap}
.subnav a:hover{background:var(--ctl);color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--ink);color:#fff}
.subnav .ico{width:17px;height:17px}
.pane-head{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pane-head .title{margin-right:auto}
.pane-head h2{font-size:24px;font-weight:500;letter-spacing:-.03em}

/* ---------- modal: a card in the middle, a sheet from the bottom on phones ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:18px;z-index:60;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.scrim.ask .modal{width:min(440px,100%)}
.scrim + .scrim.ask{background:rgba(11,11,15,.14)}
.modal{background:var(--card);border-radius:var(--r-xl);width:min(560px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:24px 26px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-2);--ctl:var(--fill);--ctl-2:var(--fill-2)}
.modal.wide{width:min(760px,100%)}
.modal .mhead{display:flex;align-items:center;gap:10px}
.modal .mhead h2{margin-right:auto;font-size:21px;font-weight:500;letter-spacing:-.026em}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@keyframes fade{from{opacity:0}to{opacity:1}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:95;width:100%;height:100%}

/* ---------- laptops and tablets: the sidebar becomes an icon rail ---------- */
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week{display:none}
  .agenda-list{display:block}
  .nextcall{grid-template-columns:130px minmax(0,1fr)}
  .nextcall .acts{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:1100px) and (min-width:761px){
  .side{width:76px;padding:0 12px 14px;align-items:center}
  .side .brand{padding:0;justify-content:center;width:100%}
  .side .brand .word{display:none}
  .side .brand .mark{display:block}
  .navsec{font-size:0;padding:0;margin:10px 8px;height:1px;background:var(--line);width:32px}
  .nav{align-items:center}
  .nav a{width:46px;height:42px;padding:0;justify-content:center}
  .nav a span:not(.badge){display:none}
  .nav .badge{position:absolute;top:0;right:-4px;min-width:18px;height:17px;padding:0 4px;font-size:10px;margin:0}
  .side-foot{width:100%;display:flex;justify-content:center}
  .top{padding:0 22px}
  .main{padding:20px 24px 56px}
}
@media (max-width:980px){
  .agrid{grid-template-columns:1fr}
  .grid2,.settings{grid-template-columns:1fr}
  .subnav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .subnav::-webkit-scrollbar{display:none}
  .brief .cols{grid-template-columns:1fr}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  .row>.av.sm{display:none}
  .nextcall{grid-template-columns:1fr;gap:14px;padding:18px}
  .nextcall .clock{font-size:34px;margin-top:6px}
  .nextcall .when-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .facts{grid-template-columns:1fr}
  .monthnav b{min-width:110px}
  .side{display:none}
  .top{padding:0 14px;gap:8px;height:62px}
  .top .brand{display:flex;font-size:19px}
  .top .brand .word{height:21px}
  .search{flex:1;width:auto;height:40px}
  .search .keys,.who .who-text{display:none}
  .who{padding:0;margin:0;background:transparent;height:auto}
  .iconbtn{width:40px;height:40px}
  .main{padding:14px 14px calc(110px + env(safe-area-inset-bottom,0px))}
  h1{font-size:28px}
  .head{margin-bottom:18px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:14px 15px;min-height:120px}
  .stat .v{font-size:min(30px,calc(100cqi / (var(--n,8) * .6)))}
  .stat .d{display:none}
  .card{padding:16px}
  .row{flex-wrap:wrap}
  .row .acts{flex-basis:100%;justify-content:flex-start}
  .row:has(.when) .acts{padding-left:68px}
  .grid2,.settings{grid-template-columns:1fr}
  .funnelrow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .outs{grid-template-columns:repeat(2,1fr)}
  .form .two{grid-template-columns:1fr}
  /* filters: one row that scrolls sideways instead of five rows of selects */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 14px;padding:0 14px}
  .filters::-webkit-scrollbar{display:none}
  .filters select,.filters input,.filters .btn{flex:0 0 auto;width:auto;min-width:0}
  .filters input{width:220px}
  /* tables: the first column gives way (names and emails are cut with an ellipsis) */
  .tbl td,.tbl th{padding-left:10px;padding-right:10px}
  .tbl .namecell .ell{max-width:42vw!important}
  .tbl-card{padding:2px 4px}
  /* the leads list: each lead on two lines (name, then status), the time on the right */
  .tbl-leads thead{display:none}
  .tbl-leads tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:12px 10px;border-top:1px solid var(--rl)}
  .tbl-leads tbody tr:first-child{border-top:0}
  .tbl-leads td{border:0!important;padding:0!important;background:none!important}
  .tbl-leads td:first-child{grid-column:1}
  .tbl-leads td:nth-child(2){grid-column:1;padding-left:38px!important}
  .tbl-leads td:last-child{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;white-space:normal;max-width:96px}
  .tbl-leads .namecell .ell{max-width:58vw!important}
  .tbl-leads tr.link:hover{background:var(--fill);border-radius:16px;border-top-color:transparent}
  .tbl-leads tr.link:hover+tr{border-top-color:transparent}
  /* a floating white tab bar; the current page is a black pill */
  .bottom{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;background:rgba(255,255,255,.92);border-radius:999px;padding:6px;
    box-shadow:0 18px 40px -18px rgba(11,11,15,.28),0 0 0 1px rgba(11,11,15,.05);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
  .bottom a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:52px;border-radius:999px;font-size:10.5px;font-weight:450;color:var(--ink-3);text-decoration:none;position:relative;transition:background .2s,color .2s}
  .bottom a[aria-current="page"]{background:var(--ink);color:#fff}
  .bottom .ico{width:21px;height:21px}
  .bottom .badge{position:absolute;top:3px;right:calc(50% - 22px);min-width:17px;height:16px;font-size:10px;padding:0 4px;background:var(--danger);color:#fff}
  .hide-sm{display:none}
  .tl li .t{width:96px}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  /* dialogs come up from the bottom */
  .scrim{place-items:end center;padding:0}
  .modal,.scrim.ask .modal{width:100%;max-height:calc(100dvh - 24px);border-radius:28px 28px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .scrim .modal{animation:sheetin .38s var(--spring) both}
  .scrim.out .modal{animation:sheetout .2s ease both}
  .modal .acts .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.c-draw{stroke-dasharray:none}}