:root{--gray:#696969;--copper:#985308;--navy:#16226C;--bg:#F4F5F8;--line:#E2E4EA;--text:#1d1f26;--muted:#6b6f7a;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
[hidden]{display:none!important}
a{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:12px 16px;font-family:inherit;font-weight:600;font-size:16px;line-height:1.1;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--navy);color:#fff}
.btn.copper{background:var(--copper);color:#fff}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.danger{background:#fff;color:#b3261e;border:1px solid #f0c9c6}
/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#fff}
.lcard{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px}
.logo{display:flex;justify-content:center}.logo img{width:150px;height:150px;object-fit:contain}
.lt{margin:4px 0 0;text-align:center;font-size:24px;color:var(--navy)}
.ls{margin:-8px 0 8px;text-align:center;color:var(--copper);font-weight:600;font-size:14px;letter-spacing:.3px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
input,select,textarea{font-family:inherit;font-size:16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:-1px}
.err{color:#b3261e;margin:0;text-align:center;font-size:14px}
/* app chrome */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) 14px 10px;background:#fff;border-bottom:3px solid var(--copper)}
.top h1{flex:1;margin:0;font-size:20px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{border:0;background:none;color:var(--navy);font-size:30px;line-height:1;padding:0 6px 2px 0;cursor:pointer}
.top .link{border:0;background:none;color:var(--navy);font-family:inherit;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer}
main{padding:12px 14px calc(110px + var(--safe-b))}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;background:#fff;border-top:1px solid var(--line);padding:6px 0 calc(6px + var(--safe-b))}
.tabs a{display:flex;align-items:center;justify-content:center;width:64px;height:28px;color:var(--gray)}
.tabs svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tabs a.on{color:var(--navy)}
/* list */
.search{position:relative;margin-bottom:10px}.search input{padding-left:38px;border-radius:12px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2}
.count{font-size:13px;color:var(--muted);margin:0 2px 8px}
.letter{font-size:13px;font-weight:700;color:var(--copper);margin:12px 4px 4px}
.list{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.row:first-child{border-top:0}
.av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.row .nm{font-weight:600}.row .sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx{min-width:0;flex:1}
.empty{text-align:center;color:var(--muted);padding:40px 16px}
.fab{position:fixed;right:18px;bottom:calc(58px + var(--safe-b));z-index:7;width:62px;height:62px;border-radius:50%;border:0;background:var(--copper);color:#fff;font-size:36px;line-height:1;box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
/* record */
.hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 14px}
.hero .av{width:76px;height:76px;font-size:28px}
.hero h2{margin:4px 0 0;font-size:22px;text-align:center}.hero .co{color:var(--copper);font-weight:600}
.sec{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.sec h3{margin:0;padding:10px 14px 6px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.sec h3+.item{border-top:0}
.item .tx{flex:1;min-width:0}.item .lbl{font-size:12px;color:var(--muted);text-transform:capitalize}.item .val{font-size:17px;word-break:break-word}
.act{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:20px;font-family:inherit;font-weight:600;font-size:15px;border:0;text-decoration:none;cursor:pointer}
.act svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.act.call{background:var(--navy);color:#fff}.act.dir{background:var(--copper);color:#fff}.act.mail{background:#eef0f6;color:var(--navy)}
.soon{color:var(--muted);font-size:14px;padding:4px 14px 14px}
.rowbtns{display:flex;gap:10px;margin-top:6px}.rowbtns .btn{flex:1}
/* form */
.form{display:flex;flex-direction:column;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .csz{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:8px}
.ph{display:grid;grid-template-columns:100px 1fr 40px;gap:8px;align-items:center}
.ph .x{border:0;background:#fff;border:1px solid var(--line);border-radius:10px;height:44px;font-size:20px;color:#b3261e;cursor:pointer}
.fsec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.fsec h3{margin:0;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.addph{align-self:flex-start;border:0;background:none;color:var(--navy);font-family:inherit;font-weight:600;font-size:15px;padding:4px 0;cursor:pointer}
/* sheet */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.35);display:flex;align-items:flex-end}
.sheet .pan{width:100%;background:#fff;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + var(--safe-b));display:flex;flex-direction:column;gap:10px}
.sheet .pan p{margin:0 0 4px;text-align:center;color:var(--muted);font-size:14px}
/* notes & activity (step 2) */
textarea{resize:vertical;min-height:84px;line-height:1.35}
input[type=datetime-local]{min-height:46px;-webkit-appearance:none;appearance:none;text-align:left}
.row .last{flex:none;font-size:12px;color:var(--copper);font-weight:600;white-space:nowrap}
.aform{display:flex;flex-direction:column;gap:10px;padding:4px 14px 14px}
.sheet .aform{padding:0}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kinds .kind{display:block;gap:0;color:inherit;font-weight:600}
.kinds input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kinds span{display:flex;align-items:center;justify-content:center;gap:5px;height:40px;padding:0 6px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--gray);font-size:14px;cursor:pointer;white-space:nowrap}
.kinds svg,.aic svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.kinds input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.kinds input:focus-visible+span{outline:2px solid var(--copper);outline-offset:1px}
.alist{border-top:1px solid var(--line)}
.ahead{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:10px 14px 2px}
.alist .soon{padding-top:12px}
.act-i{display:flex;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.ahead+.act-i{border-top:0}
.aic{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef0f6;color:var(--navy);margin-top:2px}
.k-call .aic{background:var(--navy);color:#fff}.k-site_visit .aic{background:var(--copper);color:#fff}.k-quote .aic{background:#f6ecdf;color:var(--copper)}
.k-note .aic{background:#ececec;color:var(--gray)}
.act-i .tx{flex:1;min-width:0}
.ah{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.ak{font-weight:700;color:var(--navy)}.aw{font-size:13px;color:var(--muted)}
.ab{margin-top:3px;white-space:pre-wrap;word-break:break-word;font-size:15px}
.abtns{display:flex;gap:16px;margin-top:4px}
.lnk{border:0;background:none;padding:4px 0;font-family:inherit;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer}
.lnk.red{color:#b3261e}
.sheet .pan{max-height:92vh;overflow:auto}
/* calendar link + follow-up (step 3) */
.kinds .kind:last-child{grid-column:1/-1}
.k-follow_up .aic{background:#e6e8f3;color:var(--navy)}
.up{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:var(--copper);border-radius:6px;padding:1px 6px}
.row .last.fu{color:var(--navy)}
.calhero{text-align:center;padding:6px 6px 12px}
.calhero h2{margin:8px 0 4px;font-size:20px;color:var(--navy)}.calhero p{margin:0;color:var(--muted);font-size:14px}
.calic{width:56px;height:56px;margin:0 auto;border-radius:16px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}
.calic svg,.calsec .btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.calsec .btn svg{width:20px;height:20px}
.warn{background:#fdf3e7;border:1px solid #ecd1b0;border-left:4px solid var(--copper);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:14px;color:#5a3405}
.calsec{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}.calsec>*:not(h3){margin:0 14px}
.callink{font-size:13px;color:var(--muted);background:var(--bg)}
.err.ok{color:#1b6b33}
.howto .ht{padding:6px 14px}.howto ol{margin:4px 0 0;padding-left:20px;font-size:14px}.howto li{margin:2px 0}
.howto .fine{margin:4px 14px 14px;font-size:12px;color:var(--muted)}
.navitem{text-decoration:none;color:inherit}.navitem .lbl{text-transform:none}.chev{font-size:24px;color:var(--gray)}
/* import (step 4) */
.impsec{padding-bottom:14px}.impsec>*:not(h3){margin-left:14px;margin-right:14px}
.hint{font-size:13px;color:var(--muted);margin:0 0 10px}
.filebtn{position:relative;overflow:hidden;width:calc(100% - 28px)}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
details.sec>summary{padding:12px 14px;font-weight:600;color:var(--navy);cursor:pointer}
.mapsec .maps{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.map{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;color:var(--text);font-weight:600}
.map small{display:block;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map select{padding:8px;font-size:14px}
.warn.small{margin:0 14px 10px;font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:2px 14px 8px}
.chip{font-size:13px;font-weight:700;border-radius:20px;padding:4px 10px}
.chip.new,.badge.new{background:#e5f3ea;color:#1b6b33}.chip.duplicate,.badge.duplicate{background:#fdf3e7;color:var(--copper)}.chip.problem,.badge.problem{background:#fbe9e8;color:#b3261e}
.prevsec .hint{padding:0 14px}
.tblwrap{overflow-x:auto}
table.prev{width:100%;border-collapse:collapse;font-size:14px}
.prev th{position:sticky;top:0;background:#fff;text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.prev th small{font-weight:400}
.prev td{vertical-align:top;padding:9px 8px;border-top:1px solid var(--line)}
.prev td:first-child,.prev th:first-child{width:34px;padding-left:14px}
.prev input[type=checkbox]{width:20px;height:20px;padding:0;margin:2px 0 0;accent-color:var(--navy)}
.prev .pn{font-weight:600}.prev .pc{color:var(--copper);font-size:13px}.prev .pd{color:var(--muted);font-size:13px;word-break:break-word}.prev .pd i{font-style:normal;font-size:11px;text-transform:uppercase}
.prev td:last-child{width:96px;padding-right:14px}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 6px;text-transform:uppercase;letter-spacing:.3px}
.why{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.25}
.st-problem td{opacity:.75}
.impbar{position:sticky;bottom:calc(52px + var(--safe-b));z-index:4;background:linear-gradient(transparent,var(--bg) 30%);padding:12px 0 6px}
.impbar .btn{width:100%}.impbar .hint{text-align:center;margin:6px 0 0}
.btn:disabled{opacity:.5}
.impdone{padding-bottom:14px}.impdone .btn{margin:0 14px;width:calc(100% - 28px)}.impdone .hint{padding:8px 14px 0}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 14px 12px;text-align:center}
.tally div{background:var(--bg);border-radius:12px;padding:10px 4px;font-size:13px;color:var(--muted)}.tally b{display:block;font-size:24px;color:var(--navy)}
.tally .bad b{color:#b3261e}

/* step 5: home activity feed */
.feedsec .alist{border-top:0}
.feed-i{text-decoration:none;color:inherit;align-items:flex-start}
.feed-i:first-child{border-top:0}
.feed-i:active{background:var(--bg)}
.feed-i .chev{align-self:center;margin-left:2px}
.fn{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0}
.fnm{font-weight:700;font-size:16px;color:var(--text)}
.fco{font-size:13px;color:var(--copper);font-weight:600}
.fb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;color:#3a3d46;font-size:14px}
.feedempty .calic{margin-bottom:10px}.feedempty .calic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feedempty b{display:block;color:var(--navy);font-size:18px}.feedempty p{margin:6px auto 16px;max-width:320px;font-size:14px}
#feedmore{margin-bottom:12px}
/* calendar month grid + agenda (step 6) */
.calpage{--cellh:58px}
.calbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.calbar h2{margin:0 4px;font-size:20px;color:var(--navy);min-width:150px;text-align:center}
.cnav{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:10px;width:40px;height:40px;font-size:26px;line-height:1;cursor:pointer}
.calbar .btn{width:auto;padding:9px 14px;font-size:15px}.cadd{margin-left:auto}
.calwrap{display:flex;flex-direction:column;gap:12px}
.mgrid{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--navy);color:#fff;font-size:12px;font-weight:700;text-align:center}
.mhead div{padding:6px 0}
.mbody{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.mcell{min-width:0;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:2px 2px 4px;cursor:pointer;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.mcell:nth-child(7n+1){border-left:0}
.mcell.out{background:#fafbfc}.mcell.out .dn{color:#b3b6be}
.mcell .dn{font-size:12px;font-weight:600;color:var(--text);padding:1px 3px;align-self:flex-start;border-radius:10px;min-width:20px;text-align:center}
.mhead div.we{background:#dfe1e7;color:var(--navy)}.mcell.we{background:#eceef2}.mcell.we.out{background:#f4f5f7}
.mcell.today{background:#fdf3e7}.mcell.today .dn{background:var(--copper);color:#fff}
.mcell.sel{outline:2px solid var(--navy);outline-offset:-2px}
.ce{display:block;font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--navy);background:#e6e8f3;border-radius:4px;padding:1px 3px;border-left:3px solid var(--navy)}
.ce.k-site_visit{background:#fdf3e7;color:#5a3405;border-left-color:var(--copper)}.ce.k-meeting{background:#e5f3ea;color:#1b5a2c;border-left-color:#1b6b33}
.cmore{font-size:10px;color:var(--muted);font-weight:600;padding:0 3px}
.agenda{margin:0}.agenda h3{display:flex;justify-content:space-between}
.agbtns{display:flex;justify-content:space-between;gap:10px;padding:0 14px 6px}
.agday{font-size:13px;font-weight:700;color:var(--copper);padding:10px 14px 4px;border-top:1px solid var(--line)}
.agday.today{color:var(--navy)}
.agi{display:flex;align-items:flex-start;gap:10px;padding:8px 14px;text-decoration:none;color:inherit}
.agt{flex:none;width:68px;font-size:14px;font-weight:600;color:var(--navy)}
.agx{flex:1;min-width:0;display:flex;flex-direction:column}
.agk{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.k-site_visit .agk{color:var(--copper)}.k-meeting .agk{color:#1b6b33}
.agn{font-weight:600}.agn small{color:var(--copper);font-weight:600}
.agb{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subsec{margin-top:12px}.subsec #subbody{padding:0 0 14px}.subsec .calsec{padding:0}
.subsec .howto h3{padding:10px 14px 2px}.subsec #calreset{width:calc(100% - 28px);margin:0 14px}.subsec .warn{margin:0 14px 12px}
.picklist{max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:12px;margin:8px 0}
.pickc{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;border-top:1px solid var(--line);background:#fff;padding:10px 12px;font:inherit;text-align:left;cursor:pointer}
.pickc:first-child{border-top:0}.pickc small{color:var(--copper);font-size:13px}
@media (max-width:420px){.calpage{--cellh:54px}.ce{font-size:9.5px;line-height:1.2;padding:1px 2px;border-left-width:2px;white-space:normal;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.calbar .btn{padding:9px 10px}.cnav{width:36px}.calbar h2{min-width:0;flex:1;font-size:18px}.cadd{margin-left:0}.mcell .dn{font-size:11px}}
@media (min-width:900px){main:has(.calpage){max-width:1400px;margin:0 auto}.calpage{--cellh:104px}.calwrap{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr);align-items:start}.ce{font-size:12px;padding:2px 5px}.mcell .dn{font-size:13px}}
/* call confirmation (step 6) */
.cmodal{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px}
.cmodal[hidden]{display:none}
.cbox{width:100%;max-width:340px;background:#fff;border-radius:16px;padding:20px 16px 16px;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.cbox p{margin:0 0 16px;text-align:center;font-size:17px;color:var(--text);word-break:break-word}
.cbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cbtns .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.cbtns svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* step 6: offline banner (inside the sticky header) + "Waiting to send" marks */
.top{flex-wrap:wrap}
/* update bar floats just under the header over the page (no push-down / layout shift) */
.netbar{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:8;pointer-events:auto;box-shadow:0 4px 10px rgba(17,24,64,.12);padding:6px 14px;font-size:13px;font-weight:600;line-height:1.3;text-align:center;background:#FFF4E5;color:#7A4306;border-top:1px solid #F1D9B8}
.netbar.off{background:#EEF0F8;color:var(--navy);border-top-color:#D6DAEC}
.netbar .lnk{font:inherit;color:#B42318;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.pend{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;border:1px solid var(--copper);color:var(--copper);background:#FFF8F0;font-size:11px;font-weight:700;vertical-align:middle;white-space:nowrap}
.faillist{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.faili{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.faili small{color:#B42318}
/* step 7: Outlook events (read-only) - Outlook blue, dashed edge so they never look like CRM entries */
.olbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;padding:8px 12px;border:1px solid #cfe0f3;border-radius:10px;background:#f3f8fd;font-size:13px;color:#33475b}
.olbar:empty{display:none}.olbar .oltx{flex:1;min-width:150px}.olbar .lnk{font-size:13px}
.otag{display:inline-block;padding:1px 8px;border-radius:999px;background:#0F6CBD;color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;vertical-align:middle}
.olerr{flex-basis:100%;color:#b42318;font-size:12.5px}.olerr.ok{color:#1b6b33}
.ce.k-outlook{background:#e8f1fb;color:#0b4a8b;border-left:3px dashed #0F6CBD}
.agi.k-outlook .agk{color:#0F6CBD}.agi.k-outlook{background:linear-gradient(90deg,#f3f8fd,transparent 60%)}
.olev h3{margin:8px 0 4px;color:var(--navy)}.olev .olwhen{margin:0 0 8px;font-weight:600}.olev .olloc{display:flex;gap:6px;align-items:flex-start;margin:0 0 8px}
.olev .olloc svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}.olev .olnotes{white-space:pre-wrap;word-break:break-word;font-size:14px;color:#3a3d46;max-height:40vh;overflow:auto}
.olsec .olform{padding:4px 14px 12px}.olsec .olform input{width:100%;margin:6px 0 10px}.olsec .olform .btn{width:100%}
.olsec .olbtns{display:flex;gap:10px;padding:0 14px 12px}.olsec .olbtns .btn{flex:1}.olsec .howto{padding:0 14px 12px}.olsec #olmsg{margin:6px 14px 10px}
.olmask{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
.olsec .lbl{text-transform:none}

/* contact list rows: tap the row for the record, tap the round phone button to call (phone-fix) */
.row{padding:0 12px 0 0;gap:4px}
.row .rl{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:11px 0 11px 12px;text-decoration:none;color:inherit}
.row .pnum{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.row .plbl{font-size:12px;color:var(--muted)}
.rcall{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin-left:4px}
.rcall svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chip.update,.badge.update{background:#e6e8f3;color:var(--navy)}

/* jobs (2026-10-27) */
.jfil{display:flex;gap:8px;margin-bottom:10px}.jfil select{padding:9px 10px;font-size:15px}
.jrow{display:flex;align-items:center;gap:10px;padding:10px 14px;color:inherit;text-decoration:none;border-top:1px solid var(--line)}.list .jrow:first-child{border-top:0}
.jrow .tx{flex:1;min-width:0}.jrow .nm{font-weight:600;font-size:17px}.jrow .sub{font-size:14px;color:var(--muted);margin-top:2px}
.jb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}.jbc{justify-content:center}
.jt,.jst,.jrole,.jamt{font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.jt{background:#16226C;color:#fff}.jst{background:#EEF0F6;color:#16226C}.jrole{border:1px solid var(--copper);color:var(--copper)}.jamt{background:#F3F3F3;color:#333}
.js-sold,.js-in-progress{background:#E7F4EA;color:#1E6B34}.js-done{background:#E8E8E8;color:#444}.js-lost{background:#FDECEC;color:#B3261E}.js-bid-sent{background:#FFF3E0;color:#985308}
.jnotes{white-space:pre-wrap;font-size:15px}.jsm{font-size:14px}.jlink a.tx{color:inherit;text-decoration:none}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.tabs a{width:56px}
/* jobs v5 (2026-10-28): est. close date + next action */
input[type=date]{min-height:46px;-webkit-appearance:none;appearance:none;text-align:left;display:block;min-width:0}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.jfil select{flex:1;min-width:0}
.jplan{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:4px;font-size:13px;line-height:1.3}
.jclose{color:var(--navy);font-weight:600;white-space:nowrap}
.jnext{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.jnext.overdue{color:#B42318;font-weight:700}.jnext.today{color:var(--copper);font-weight:700}
.jdue{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;vertical-align:middle;text-transform:none;letter-spacing:0}
.jdue.overdue{background:#FDECEC;color:#B42318}.jdue.today{background:#FFF8F0;color:var(--copper);border:1px solid var(--copper)}
.jover .val{color:#B42318;font-weight:600}
/* job files (2026-10-28) */
.jfile{gap:10px}.jfi{flex:none;font-size:22px;width:28px;text-align:center}
.jfo{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.jfnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jfhint{margin:0;padding:0 14px 12px;font-size:12px;color:var(--muted)}
.jfmsg{color:var(--navy)}
.jfadd input[disabled]{cursor:default}
.jfprev{max-width:100%;max-height:45vh;object-fit:contain;border-radius:10px;align-self:center}
/* 2026-10-28: calendar list swipe left -> Delete (CRM entries) / Hide (Outlook events), Undo toast */
.agrow{position:relative;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.agrow .agi{position:relative;z-index:1;background:#fff;will-change:transform}
.agrow .agi.k-outlook{background:linear-gradient(90deg,#f3f8fd,#fff 60%)}
.agact{position:absolute;top:0;right:0;bottom:0;z-index:0;width:88px;border:0;color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:width .15s ease}
.agact.del{background:#D92D20}.agact.hide{background:#475467}.agact.unhide{background:#1b6b33}
.agrow.full .agact{width:100%;justify-content:flex-end;padding-right:24px}
.agrow:not(.open) .agact{visibility:hidden}.agrow.open .agact,.agrow.full .agact{visibility:visible}
.agrow.hid .agi{opacity:.6}.agrow.hid .agn{text-decoration:line-through}
.ce.k-outlook.hid{opacity:.5;text-decoration:line-through}
.aghid{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:0 14px 6px;font-size:13px}.aghid .lnk{font-size:13px}
.aghint{flex-basis:100%;color:var(--muted);font-size:12px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(66px + var(--safe-b));z-index:45;display:flex;align-items:center;gap:16px;max-width:calc(100% - 24px);padding:11px 16px;border-radius:12px;background:#1d1f26;color:#fff;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast[hidden]{display:none}.toast .lnk{color:#F8C77E;font-weight:700;font-size:15px;background:none;border:0;padding:4px 2px;cursor:pointer}
.toast.go{animation:toastin .18s ease}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
/* 2026-10-28: Jobs list swipe RIGHT -> Status (picker / full swipe = next status) */
.jswrap{position:relative;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-top:1px solid var(--line)}
.list .jswrap:first-child{border-top:0}.jswrap .jrow{border-top:0;position:relative;z-index:1;background:#fff;will-change:transform}
.jsact{position:absolute;top:0;left:0;bottom:0;z-index:0;width:96px;border:0;background:var(--navy);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 6px}
.jsact small{font-size:11px;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.jswrap.full .jsact{width:100%;background:#1b6b33;align-items:flex-start;padding-left:24px}
.jswrap:not(.open) .jsact{visibility:hidden}.jswrap.open .jsact{visibility:visible}
.jshint{color:var(--muted);font-weight:400}
.jspick{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:8px 0 10px}
.jspi{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-top:1px solid var(--line);background:#fff;padding:13px 14px;font:inherit;cursor:pointer;text-align:left}
.jspi:first-child{border-top:0}.jspi.on{background:#eef0f8}.jsck{color:var(--navy);font-weight:800;font-size:18px}
/* 2026-10-28: landscape / wide screens -> app framed in a centered column (max 640px). Portrait phones (<600px) unchanged. */
:root{--colw:min(640px, calc(100vw - 2 * max(env(safe-area-inset-left,0px), env(safe-area-inset-right,0px))));--coll:calc((100vw - var(--colw)) / 2)}
@media (min-width:600px){
  html{background:#C9CCD3}
  body{max-width:var(--colw);margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 0 24px rgba(0,0,0,.12)}
  .login{background:#fff}
  .tabs{left:var(--coll);right:var(--coll)}
  .fab{right:calc(var(--coll) + 18px)}
  .sheet{justify-content:center}
  .sheet .pan{max-width:var(--colw);max-height:90vh;max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .cmodal{padding:12px}.cbox{max-height:calc(100dvh - 24px);overflow:auto}
  .toast{max-width:calc(var(--colw) - 24px)}
}
/* sheet children never shrink: a tall sheet scrolls instead of clipping its list (status picker rows were cut off in landscape) */
.sheet .pan>*{flex-shrink:0}
/* 2026-10-28: Done checkbox on follow-ups (Home feed, contact page, job page, Calendar list). 44px touch target. */
.fdone{flex:none;align-self:center;width:44px;height:44px;margin:-6px -6px -6px 0;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fdbox{width:28px;height:28px;border-radius:8px;border:2px solid #9aa0b4;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.fdbox svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.fdone.on .fdbox{background:#1b6b33;border-color:#1b6b33}.fdone.on .fdbox svg{opacity:1}
.fdone:focus-visible .fdbox{outline:2px solid var(--copper);outline-offset:2px}
.fdone:active .fdbox{transform:scale(.92)}
.dtag{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:#1b6b33;border-radius:6px;padding:1px 6px}
.act-i.done .ab,.act-i.done .fnm,.agrow.done .agn,.agrow.done .agb,.act-i.jfu.done .ak{text-decoration:line-through;color:var(--muted)}
.act-i.done .aic,.agrow.done .agt{opacity:.55}
.ce.done{opacity:.55;text-decoration:line-through}
.agi .fdone{margin:-8px -4px -8px 0}
.jfu .tx{text-decoration:none;color:inherit}
.jfu .ak{color:var(--text)}
/* Contact groups (Ketchup 2026-10-28): group picker above search, contact page Groups row, group sheets */
.gpick{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:16px;color:var(--text);cursor:pointer;text-align:left}
.gpick .gl{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.gpick .gv{flex:1;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpick .gcar{color:var(--copper);font-size:14px}
.glist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gopt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:10px 14px;border:0;border-top:1px solid var(--line);background:#fff;font-family:inherit;font-size:16px;color:var(--text);text-align:left;cursor:pointer}
.gopt:first-child,.grow:first-child,.gchk:first-child{border-top:0}
.gopt.on{color:var(--navy);font-weight:700;background:#eef0f6}
.gopt svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.grow{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px;border-top:1px solid var(--line)}
.grow .gn{flex:1;font-weight:600}.grow .gn small{color:var(--muted);font-weight:400}
.gchk{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px;border-top:1px solid var(--line);font-size:16px;cursor:pointer}
.gchk input{width:22px;height:22px;padding:0;margin:0;accent-color:var(--navy)}
.gadd{display:flex;gap:8px}.gadd input{flex:1}.gadd .btn{flex:none}
.gnote{background:#e5f3ea;color:#1b6b33;border-radius:10px;padding:8px 12px;font-size:14px;text-align:center}
.item.grp{align-items:center}
.gchips{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.gchip{font-size:13px;font-weight:700;border-radius:20px;padding:5px 11px;background:#eef0f6;color:var(--navy)}
.gnone{color:var(--muted);font-size:15px}
.act.gedit{background:#eef0f6;color:var(--navy)}

.gchk{flex-direction:row;justify-content:flex-start}.gchk input{flex:none;width:22px}

/* 2026-10-28 (preview): group picker drops down under the Group button (top of screen) instead of a bottom sheet. */
.gwrap{position:relative;z-index:9}
.gback{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.12)}
.gdrop{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:16;display:flex;flex-direction:column;gap:6px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);
  max-height:calc(100vh - 190px - var(--safe-t) - var(--safe-b));max-height:calc(100dvh - 190px - var(--safe-t) - var(--safe-b));min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.gdrop .glist{flex-shrink:0}
.gdrop .gopt{width:100%}
.gman{flex-shrink:0;min-height:44px;border:0;background:none;color:var(--navy);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;border-radius:10px}
.gman:active{background:#eef0f6}

/* 2026-10-28 ~8 PM (preview, v2): Calendar screen on wide screens is HALFWAY between the 640px centered column and the
   full screen: width = (available width + 640px) / 2, never narrower than the 640px column, never wider than the screen.
   "Available" = screen width minus the iPhone notch insets. Header, Upcoming and tab bar match that width.
   Upcoming sits directly under the month grid at every width, same width as the calendar. Other screens unchanged. */
:root{--avail:calc(100vw - 2 * max(env(safe-area-inset-left,0px), env(safe-area-inset-right,0px)));
  --calw:max(var(--colw), min(var(--avail), calc((var(--avail) + 640px) / 2)));--call:calc((100vw - var(--calw)) / 2)}
@media (min-width:600px){
  body:has(.calpage){max-width:var(--calw)}
  body:has(.calpage) .tabs{left:var(--call);right:var(--call)}
}
@media (min-width:900px){
  .calwrap{display:flex;flex-direction:column;align-items:stretch}
}

/* 2026-10-28 ~8:15 PM (preview): calendar day boxes ~17-19% taller at every size (54->64 phone portrait, 58->68, 104->122 at 900px+). */
.calpage{--cellh:68px}
@media (max-width:420px){.calpage{--cellh:64px}}
@media (min-width:900px){.calpage{--cellh:122px}}
/* "Upcoming" heading under the month grid, styled exactly like the "Calendar" title (.top h1): 20px, bold, navy, same font. */
.agtitle{margin:0;padding:0 2px;font-size:20px;font-weight:700;line-height:1.35;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agtitle .agcnt{color:var(--muted);font-weight:600}
/* 2026-10-28 (preview): Outlook event popup opens next to the tapped row / calendar chip, plus a Done checkbox. */
.sheet.anch{display:block;background:rgba(0,0,0,.18)}
.sheet.anch .pan{position:fixed;max-width:none;border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.oldone{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;font-size:16px;font-weight:600;color:var(--text);cursor:pointer}
.oldone input{width:24px;height:24px;margin:0;padding:0;accent-color:#1b6b33;flex:none}
.oldone small{flex-basis:100%;padding-left:34px;font-size:12px;font-weight:400;color:var(--muted)}
.agrow.done .k-outlook .agn{text-decoration:line-through;color:var(--muted)}
.olpbtns{display:flex;gap:8px}.olpbtns .btn{flex:1}
/* 2026-10-28 (preview): drag and drop to another day on the Calendar */
.calpage .agrow,.calpage a.ce{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
body.dnd,body.dnd *{-webkit-user-select:none;user-select:none;cursor:grabbing}
.dnd-src{opacity:.45}
.dndghost{position:fixed;left:0;top:0;z-index:30;pointer-events:none;max-width:240px;padding:8px 12px;border-radius:10px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.mcell.dnd-from{background:#f2f3f7}
.mcell.dnd-over{background:#ffe9c7 !important;outline:3px solid var(--copper);outline-offset:-3px}
.ce.k-outlook.moved{border-left-style:dashed}
.olmoved{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:#fdf3e7;color:#5a3405;font-size:14px}
/* =====================================================================================================
   2026-10-28 ~9:30 PM (preview): VISUAL POLISH LAYER. Looks only: no layout or behavior changes.
   Brand: navy #16226C, ketchup red #C8102E, white, copper accent. Poppins (bundled, OFL) for headings; system font
   (SF Pro on iPhone, Segoe UI on Windows) for body. 4/8 px spacing, 44 px touch targets, soft cards, blurred bars.
   Remove this whole block to go back to the previous look.
   ===================================================================================================== */
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-semibold-v1.woff) format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-bold-v1.woff) format("woff")}
:root{--red:#C8102E;--bg:#F2F3F7;--line:#E6E8EE;--text:#171A24;--muted:#646A78;--card:#fff;--radius:16px;
  --shadow:0 1px 2px rgba(17,24,64,.05),0 4px 14px rgba(17,24,64,.06);--shadow-lg:0 12px 32px rgba(17,24,64,.18);
  --head:"Poppins",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  --tabh:calc(52px + var(--safe-b))}
html,body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg)}
/* headings in Poppins */
.top h1,.agtitle,.lt,.hero h2,.calbar h2,.feedempty b{font-family:var(--head);letter-spacing:-.2px}
.top h1{font-size:22px;font-weight:700}
.agtitle{font-size:20px;font-weight:700}
.lt{font-size:28px;font-weight:700}
/* header: translucent with blur, thin copper accent */
.top{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:2px solid var(--copper);box-shadow:0 1px 0 rgba(17,24,64,.04)}
.top .link{padding:12px 6px;margin:-12px -6px}
main{padding:16px 16px calc(120px + var(--safe-b))}
/* iOS-style tab bar: blurred, icon + small label, active in navy */
.tabs{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-top:1px solid rgba(17,24,64,.08);padding:6px 0 calc(4px + var(--safe-b))}
.tabs a{flex-direction:column;gap:2px;width:72px;height:auto;min-height:44px;color:#8A8F9C;text-decoration:none;transition:color .15s}
.tabs a::after{content:attr(aria-label);font-size:10.5px;font-weight:600;letter-spacing:.1px;line-height:1.1}
.tabs svg{width:24px;height:24px}
.tabs a.on{color:var(--navy)}.tabs a.on svg{stroke-width:2.3}
.fab{bottom:calc(72px + var(--safe-b));width:58px;height:58px;font-size:32px;background:var(--red);box-shadow:0 8px 20px rgba(200,16,46,.35);transition:transform .15s}
.fab:active{transform:scale(.94)}
.toast{bottom:calc(76px + var(--safe-b));border-radius:14px;box-shadow:var(--shadow-lg)}
/* cards: no hard borders, soft shadow, 16 px corners */
.list,.sec,.fsec{border:0;border-radius:var(--radius);box-shadow:var(--shadow)}
.sec{margin-bottom:16px}
.sec h3,.fsec h3{font-size:12px;font-weight:700;letter-spacing:.7px;color:#7A8090;padding:14px 16px 6px}
.fsec h3{padding:0}
.item,.act-i,.row{border-top-color:#EEF0F4}
.item{padding:12px 16px;min-height:52px}
.act-i{padding:12px 16px}
.row .nm{font-weight:600;letter-spacing:-.1px}
.letter{font-family:var(--head);font-size:13px;font-weight:600;color:var(--copper);margin:16px 6px 6px}
.count{margin:0 4px 8px;font-size:13px}
.av{background:linear-gradient(145deg,#26348C,#16226C);font-weight:700;letter-spacing:.3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hero{padding:8px 0 18px;gap:4px}
.hero .av{box-shadow:0 6px 16px rgba(22,34,108,.25)}
.hero h2{font-size:24px;font-weight:700}
/* buttons & controls: 44 px, gentle press feedback */
.btn{min-height:44px;border-radius:12px;transition:transform .12s,background-color .15s,box-shadow .15s}
.btn:active,.act:active,.gopt:active,.row:active,.feed-i:active{transform:scale(.985)}
.btn.primary{box-shadow:0 2px 8px rgba(22,34,108,.22)}
.btn.ghost{border-color:#E1E4EC}
.act{min-height:40px;padding:9px 16px;transition:transform .12s}
.act.mail{background:#EEF0F7}
input,select,textarea{border-radius:12px;border-color:#DDE1E9;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,34,108,.14)}
.search input{min-height:44px;background:#fff;border-color:transparent;box-shadow:var(--shadow)}
.gpick{min-height:48px;border:0;border-radius:14px;box-shadow:var(--shadow);margin-bottom:10px}
.gdrop{border:0;border-radius:16px;box-shadow:var(--shadow-lg)}
/* tags: softer pills */
.up{background:#FBEFE4;color:#8A4A06;border-radius:999px;padding:2px 8px;letter-spacing:.5px}
.dtag{border-radius:999px;padding:2px 8px}
.aic{background:#EEF0F7}
/* sheets & popups: rounder, softer */
.sheet{background:rgba(17,24,64,.32)}
.sheet .pan{border-radius:20px 20px 0 0;box-shadow:var(--shadow-lg)}
.sheet.anch .pan{border-radius:16px}
.sheet .pan::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:#D5D8E0;margin:-6px auto 4px;flex:none}
.sheet.anch .pan::before{display:none}
/* calendar */
.calbar h2{font-weight:700}
.cnav{border:0;box-shadow:var(--shadow);border-radius:12px;min-width:44px;height:44px}
.calbar .btn.ghost{border:0;box-shadow:var(--shadow)}
.mhead{letter-spacing:.3px}
.mcell{border-top-color:#EDEFF3;border-left-color:#EDEFF3}
.olbar{border:0;border-radius:12px;background:#EEF4FC;box-shadow:inset 0 0 0 1px #D9E6F6}
.agday{font-family:var(--head);font-weight:600;font-size:13px;padding:12px 16px 4px;border-top-color:#EEF0F4}
.agi{padding:10px 16px}
/* motion: respect reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* wide screens keep the framed column look */
@media (min-width:600px){html{background:#D7DAE1}}
/* hexagons (2026-10-28, ?v=31): every truly round button/badge becomes a pointy-top hexagon. Pills and rounded rectangles stay.
   clip-path would also cut off box-shadows, so the shadowed ones (FAB, big contact avatar) paint the hexagon on a ::before layer
   and keep their glow with filter:drop-shadow on the element itself. */
:root{--hex:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%)}
.av,.aic,.rcall{border-radius:0;clip-path:var(--hex);-webkit-clip-path:var(--hex)}
.fab,.hero .av{clip-path:none;-webkit-clip-path:none;border-radius:0;box-shadow:none;position:relative;z-index:0;isolation:isolate}
.fab{position:fixed;z-index:7;display:flex;align-items:center;justify-content:center;text-decoration:none;background:transparent!important;filter:drop-shadow(0 6px 10px rgba(200,16,46,.35))}
.fab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);clip-path:var(--hex);-webkit-clip-path:var(--hex)}
.hero .av{background:transparent;filter:drop-shadow(0 6px 10px rgba(22,34,108,.25))}
.hero .av::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(145deg,#26348C,#16226C);clip-path:var(--hex);-webkit-clip-path:var(--hex)}
/* calendar: today's round date badge becomes a hexagon too */
.mcell.today .dn{display:flex;align-items:center;justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:0;clip-path:var(--hex);-webkit-clip-path:var(--hex)}
:root{--hexm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpolygon%20points='50.0,8.08%2086.3,29.04%2086.3,70.96%2050.0,91.92%2013.7,70.96%2013.7,29.04'%20fill='black'%20stroke='black'%20stroke-width='14'%20stroke-linejoin='round'/%3E%3C/svg%3E");--hexl:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4000'%20height='100'%20viewBox='0%200%204000%20100'%3E%3Cpolygon%20points='33.61,8.0%204042.0,8.0%204042.0,92.0%2033.61,92.0%209.25,50.0'%20fill='black'%20stroke='black'%20stroke-width='16'%20stroke-linejoin='round'/%3E%3C/svg%3E");--hexr:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4000'%20height='100'%20viewBox='0%200%204000%20100'%3E%3Cpolygon%20points='-42.0,8.0%203966.39,8.0%203990.75,50.0%203966.39,92.0%20-42.0,92.0'%20fill='black'%20stroke='black'%20stroke-width='16'%20stroke-linejoin='round'/%3E%3C/svg%3E")}
/* ===== soft hexagons (2026-10-28, ?v=32) =====
   All hexagons get rounded corners via SVG masks (mask-image works in iOS Safari and Chrome; clip-path polygon can't round).
   Regular hexagons use one mask; wide buttons/tags intersect a left-pointed and a right-pointed cap scaled to the element's height,
   so the points keep the same angle at any width. Elements with a border or shadow paint their shape on ::before (border colour)
   and ::after (fill, inset by the border width) inside an isolated layer, and keep their shadow via filter:drop-shadow. */
.av,.aic,.rcall,.mcell.today .dn{clip-path:none;-webkit-clip-path:none;-webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
.fab::before,.hero .av::before{clip-path:none;-webkit-clip-path:none;-webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
.hero .av{-webkit-mask:none;mask:none}
/* wide: masked directly (no border, no shadow) */
.act,.chip,.gchip,.otag,.jt,.jst,.jamt,.jdue,.up,.dtag{border-radius:0;
  -webkit-mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;-webkit-mask-composite:source-in;
  mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;mask-composite:intersect}
/* wide: layered (border and/or shadow) */
.btn,.cnav,.kinds span,.pend,.jrole,.jdue.today{position:relative;isolation:isolate;border-radius:0;background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  -webkit-mask:none;mask:none;filter:var(--hsh,none)}
.btn::before,.cnav::before,.kinds span::before,.pend::before,.jrole::before,.jdue.today::before,
.btn::after,.cnav::after,.kinds span::after,.pend::after,.jrole::after,.jdue.today::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  -webkit-mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;-webkit-mask-composite:source-in;
  mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;mask-composite:intersect}
.btn::before,.cnav::before,.kinds span::before,.pend::before,.jrole::before,.jdue.today::before{inset:calc(-1 * var(--hbw,0px));background:var(--hb,transparent)}
.btn::after,.cnav::after,.kinds span::after,.pend::after,.jrole::after,.jdue.today::after{inset:0;background:var(--hf,transparent)}
.btn{--hf:#eef0f6}
.btn.primary{--hf:var(--navy);--hsh:drop-shadow(0 2px 4px rgba(22,34,108,.22))}
.btn.copper{--hf:var(--copper)}
.btn.ghost{--hf:#fff;--hb:#E1E4EC;--hbw:1px}
.btn.danger{--hf:#fff;--hb:#f0c9c6;--hbw:1px}
.calbar .btn.ghost,.cnav{--hf:#fff;--hb:transparent;--hbw:0px;--hsh:drop-shadow(0 1px 1px rgba(17,24,64,.06)) drop-shadow(0 3px 6px rgba(17,24,64,.08))}
.kinds span{--hf:#fff;--hb:var(--line);--hbw:1px}
.kinds input:checked+span{--hf:var(--navy);--hb:var(--navy)}
.pend,.jdue.today{--hf:#FFF8F0;--hb:var(--copper);--hbw:1px}
.jrole{--hf:#fff;--hb:var(--copper);--hbw:1px}
.btn:disabled{opacity:.5}
:root{--tabhex-ring:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='86.6'%20height='100'%20viewBox='0%200%2086.6%20100'%3E%3Cpath%20d='M33.81,9.56%20Q43.30,4.00%2052.79,9.56%20L73.11,21.44%20Q82.60,27.00%2082.60,38.00%20L82.60,62.00%20Q82.60,73.00%2073.11,78.56%20L52.79,90.44%20Q43.30,96.00%2033.81,90.44%20L13.49,78.56%20Q4.00,73.00%204.00,62.00%20L4.00,38.00%20Q4.00,27.00%2013.49,21.44%20Z'%20fill='none'%20stroke='black'%20stroke-width='4.6'%20stroke-linejoin='round'/%3E%3C/svg%3E");--tabhex-fill:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='86.6'%20height='100'%20viewBox='0%200%2086.6%20100'%3E%3Cpath%20d='M33.81,9.56%20Q43.30,4.00%2052.79,9.56%20L73.11,21.44%20Q82.60,27.00%2082.60,38.00%20L82.60,62.00%20Q82.60,73.00%2073.11,78.56%20L52.79,90.44%20Q43.30,96.00%2033.81,90.44%20L13.49,78.56%20Q4.00,73.00%204.00,62.00%20L4.00,38.00%20Q4.00,27.00%2013.49,21.44%20Z'%20fill='black'%20stroke='black'%20stroke-width='4.6'%20stroke-linejoin='round'/%3E%3C/svg%3E")}
/* ===== tab bar hexagon frames (2026-10-28, ?v=33) =====
   Each tab icon sits in a soft-cornered pointy-top hexagon (33x38 px), drawn on a::before with an SVG mask so the glyph and label
   are untouched. Normal: thin grey outline. Selected: solid navy hexagon, white glyph, navy label (as before).
   So the frame clears the label, the icon-to-label gap goes from 2 to 9 px and the bar's top padding from 6 to 11 px (bar ~12 px taller).
   The frame is centred on the icon: the tab is (24 icon + 9 gap + 11.55 label) = 44.55 px tall, so icon centre = 50% - 10.275px. */
.tabs{padding-top:11px}
.tabs a{position:relative;isolation:isolate;gap:9px}
.tabs a::before{content:"";position:absolute;left:50%;top:calc(50% - 10.275px - 19px);width:33px;height:38px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:#C3C7D2;-webkit-mask:var(--tabhex-ring) center/100% 100% no-repeat;mask:var(--tabhex-ring) center/100% 100% no-repeat;transition:background-color .15s}
.tabs a.on::before{background:var(--navy);-webkit-mask-image:var(--tabhex-fill);mask-image:var(--tabhex-fill)}
.tabs a.on svg{color:#fff}
.tabs a.on::after{color:var(--navy)}

/* ===== Upcoming "Show more" (2026-10-28, ?v=34) =====
   Centred under the Upcoming list. Uses the existing soft stretched-hexagon ghost pill (.btn.ghost: white fill, thin grey edge,
   navy Poppins semibold text), slightly smaller than a full button. */
.agmorewrap{display:flex;justify-content:center;padding:12px 14px 16px}
.btn.agmore{min-height:40px;padding:10px 28px;font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:.1px;color:var(--navy);--hb:#D5D9E4}

/* =====================================================================================================
   ===== DEPTH + HEADER LOGO (2026-10-29, ?v=35, crm-v38, PREVIEW) =====
   Looks only. Soft layered shadows, gentle top-to-bottom sheen on hex buttons/pills/tabs, drop shadows under the masked
   hexagon avatars / call buttons / + button (filter:drop-shadow on an unmasked parent, shape painted on ::before),
   pressed states that sink ~1px, shadows under the header and above the tab bar, faint background gradient.
   Header: the official Concept A horizontal lockup (bottle icon + "Ketchup", Poppins ExtraBold outlined) centred,
   replacing the visible page title (the #title text stays in the page for screen readers). Remove this block to undo.
   ===================================================================================================== */
:root{--shadow:0 0 0 1px rgba(17,24,64,.035),0 1px 2px rgba(17,24,64,.06),0 3px 8px -2px rgba(17,24,64,.07),0 10px 22px -10px rgba(17,24,64,.14);
  --shadow-press:0 0 0 1px rgba(17,24,64,.04),0 1px 2px rgba(17,24,64,.08);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.04) 48%,rgba(0,0,0,.06));
  --sheen-lt:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 55%,rgba(17,24,64,.035));
  --navy-grad:linear-gradient(170deg,#2E3C9A 0%,#1C2878 45%,#141E60 100%)}
/* faint page gradient instead of flat grey */
body{background:linear-gradient(180deg,#F8F9FB 0%,#F0F1F5 40%,#E9EBF1 100%) fixed;background-color:#F0F1F5}
/* cards, list rows, panels: layered soft shadow + hairline top highlight */
.list,.sec,.fsec,.mgrid,.gpick,.search input{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.list,.sec,.fsec,.mgrid{background-image:linear-gradient(180deg,#fff 0%,#FDFDFE 100%)}
.mhead{background-image:var(--navy-grad)}
/* header: soft shadow beneath, very light sheen; centred logo */
.top{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,250,252,.88));
  box-shadow:0 1px 0 rgba(17,24,64,.04),0 4px 10px -4px rgba(17,24,64,.10),0 10px 24px -12px rgba(17,24,64,.16);
  position:sticky;min-height:calc(56px + var(--safe-t))}
.top h1#title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.top #act{margin-left:auto}
.toplogo{position:absolute;left:50%;top:calc(var(--safe-t) + 10px);height:34px;transform:translateX(-50%);display:flex;align-items:center;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(17,24,64,.10))}
.toplogo img{display:block;height:34px;width:auto}
/* tab bar: soft shadow above, light sheen; selected hexagon gets a navy gradient */
.tabs{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,247,250,.90));
  box-shadow:0 -1px 0 rgba(17,24,64,.04),0 -4px 10px -4px rgba(17,24,64,.08),0 -10px 24px -12px rgba(17,24,64,.14)}
.tabs a.on::before{background:var(--navy-grad)}
.tabs a:not(.on)::before{background:linear-gradient(180deg,#CDD1DB,#B4B9C6)}
.tabs a:active{transform:translateY(1px)}
/* hex avatars + call buttons: shape on ::before so a drop shadow can show under the hexagon */
.av,.rcall{-webkit-mask:none;mask:none;background:transparent!important;position:relative;isolation:isolate;
  filter:drop-shadow(0 1px 1px rgba(17,24,64,.14)) drop-shadow(0 3px 4px rgba(17,24,64,.14));transition:transform .12s,filter .12s}
.av::before,.rcall::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy-grad);
  -webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
.av::after,.rcall::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%);
  -webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat;pointer-events:none}
.hero .av{filter:drop-shadow(0 2px 2px rgba(22,34,108,.18)) drop-shadow(0 8px 12px rgba(22,34,108,.22))}
.hero .av::before{background:var(--navy-grad)}
.rcall:active{transform:translateY(1px) scale(.96);filter:drop-shadow(0 1px 1px rgba(17,24,64,.16))}
/* + button: red gradient, deeper soft shadow, sinks on press */
.fab::before{background:linear-gradient(170deg,#E0213F 0%,#C8102E 50%,#A90C26 100%)}
.fab{filter:drop-shadow(0 2px 3px rgba(120,10,28,.25)) drop-shadow(0 8px 14px rgba(200,16,46,.30));transition:transform .12s,filter .12s}
.fab:active{transform:translateY(2px) scale(.96);filter:drop-shadow(0 1px 2px rgba(120,10,28,.30)) drop-shadow(0 3px 6px rgba(200,16,46,.22))}
/* small round icons in feeds: gentle sheen */
.aic{background-image:var(--sheen-lt)}
.k-call .aic,.k-site_visit .aic{background-image:var(--sheen)}
/* hexagon buttons (layered ones paint the fill on ::after): add the sheen + a soft shadow, sink on press */
.btn::after,.cnav::after,.kinds span::after{background-image:var(--sheen-lt)}
.btn.primary::after,.btn.copper::after,.kinds input:checked+span::after{background-image:var(--sheen)}
.btn.primary{--hsh:drop-shadow(0 1px 1px rgba(22,34,108,.20)) drop-shadow(0 4px 6px rgba(22,34,108,.20))}
.btn.ghost,.btn.danger,.btn:not(.primary):not(.copper){--hsh:drop-shadow(0 1px 1px rgba(17,24,64,.06)) drop-shadow(0 2px 4px rgba(17,24,64,.07))}
.btn,.cnav,.kinds span{transition:transform .12s,filter .12s}
.btn:active:not(:disabled),.cnav:active:not(:disabled){transform:translateY(1px) scale(.985);--hsh:drop-shadow(0 1px 1px rgba(17,24,64,.10))}
/* masked pills & tags (Call / Email / Directions, chips, tags): sheen inside the shape, darken a touch on press */
.act,.chip,.gchip,.otag,.jt,.jst,.jamt,.jdue,.up,.dtag{background-image:var(--sheen-lt)}
.act.call,.act.dir,.dtag{background-image:var(--sheen)}
.act:active{transform:translateY(1px) scale(.985);filter:brightness(.95)}
/* rows: tiny press feedback */
.row:active,.feed-i:active,.agi:active,.jrow:active{transform:translateY(1px)}
.gpick:active{box-shadow:var(--shadow-press)}
/* today's date hexagon on the calendar */
.mcell.today .dn{background-image:var(--sheen)}

/* ===== DEPTH 2: deeper shadows + more contrast + glossy logo (2026-10-29 ~12:20 AM, ?v=36, crm-v39, PREVIEW) =====
   Cards/rows/panels: crisp 1px navy hairline + tight contact shadow + wide ambient shadow. Darker page gradient, darker grey
   secondary text, crisper dividers, a bit more room per row, stronger header/tab bar shadows, hexagon shadows to match.
   Header logo is the glossy 3D lockup (ketchup-lockup-3d.svg) with a light drop shadow. Remove this block to go back to depth 1. */
:root{--muted:#4B5162;
  --shadow:0 0 0 1px rgba(22,34,108,.09),0 1px 2px rgba(22,34,108,.12),0 3px 6px -1px rgba(22,34,108,.12),0 16px 32px -10px rgba(22,34,108,.30);
  --shadow-press:0 0 0 1px rgba(22,34,108,.10),0 1px 2px rgba(22,34,108,.16)}
body{background:linear-gradient(180deg,#EDEFF4 0%,#E3E6ED 45%,#D9DDE6 100%) fixed;background-color:#E3E6ED}
@media (min-width:600px){html{background:#C9CDD6}}
/* cards, list rows, panels */
.list,.sec,.fsec,.mgrid,.gpick,.search input{box-shadow:var(--shadow),inset 0 1px 0 #fff}
.list,.sec,.fsec{margin-bottom:4px}
.sec{margin-bottom:18px}
/* crisper dividers + secondary text */
.item,.act-i,.row,.agday,.jrow,.gopt,.grow,.gchk,.jspi,.pickc{border-top-color:#DDE1E8}
.mcell{border-top-color:#E0E3EA;border-left-color:#E0E3EA}
.sec h3,.fsec h3{color:#555B6B}
.row .sub,.agb,.item .lbl,.aw,.count,.jrow .sub,.agtitle .agcnt{color:var(--muted)}
.agk{color:#555B6B}
/* a little more room per row */
.row .rl{padding-top:13px;padding-bottom:13px}
.agi{padding-top:12px;padding-bottom:12px}
.item{padding-top:13px;padding-bottom:13px}
.letter{margin-top:20px}
/* header & tab bar: stronger shadow */
.top{box-shadow:0 1px 0 rgba(22,34,108,.08),0 4px 8px -2px rgba(22,34,108,.16),0 14px 30px -12px rgba(22,34,108,.32)}
.tabs{border-top-color:rgba(22,34,108,.12);box-shadow:0 -1px 0 rgba(22,34,108,.06),0 -4px 8px -2px rgba(22,34,108,.12),0 -14px 30px -12px rgba(22,34,108,.28)}
/* hexagons: shadows matched to the new depth (shapes/colours unchanged) */
.av,.rcall{filter:drop-shadow(0 1px 1px rgba(22,34,108,.22)) drop-shadow(0 4px 6px rgba(22,34,108,.22))}
.hero .av{filter:drop-shadow(0 2px 2px rgba(22,34,108,.24)) drop-shadow(0 10px 16px rgba(22,34,108,.30))}
.btn.primary{--hsh:drop-shadow(0 1px 1px rgba(22,34,108,.26)) drop-shadow(0 5px 8px rgba(22,34,108,.26))}
.btn.ghost,.btn.danger,.btn:not(.primary):not(.copper),.calbar .btn.ghost,.cnav{--hsh:drop-shadow(0 1px 1px rgba(22,34,108,.12)) drop-shadow(0 4px 7px rgba(22,34,108,.16))}
.btn:active:not(:disabled),.cnav:active:not(:disabled){--hsh:drop-shadow(0 1px 1px rgba(22,34,108,.16))}
.fab{filter:drop-shadow(0 2px 3px rgba(110,8,26,.32)) drop-shadow(0 10px 18px rgba(200,16,46,.36))}
/* glossy logo: light drop shadow, subtler than the hexagons */
.toplogo{filter:drop-shadow(0 1px 1px rgba(17,24,64,.12)) drop-shadow(0 2px 3px rgba(17,24,64,.10))}

/* ===== HOT TAB (red flame) (2026-10-29 ~1:45 AM, ?v=37, crm-v40, PREVIEW) =====
   (2026-10-29 ~1:55 AM, ?v=38: the Hot tab moved out of the tab bar into the header corner button, see FLAME CORNER below.) Hot page: two sections
   (Debt Calls, Daily) in the same depth cards, a Done box on the left, a navy hexagon call button on the right. Remove this block to undo. */
.hotpage{padding-bottom:12px}
.hotsec h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hotsec .hsh{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:18px;font-weight:700;letter-spacing:.5px;color:#9E1024}
.hotsec .hsh svg{width:24px;height:24px;filter:drop-shadow(0 1px 1px rgba(160,16,36,.25))}
.hotsec .hcnt{font-size:11.5px;font-weight:600;letter-spacing:.2px;text-transform:none;color:var(--muted)}
.hreset{margin-left:auto;border:0;background:none;color:var(--navy);font-family:inherit;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer;padding:4px 0}
.hotsec .soon{padding:6px 16px 16px;color:var(--muted);font-size:14px}
.hrow{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-top:1px solid #DDE1E8}
.hlist .hrow:first-child{border-top:0}
.htx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 4px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.htx .nm{font-weight:600;letter-spacing:-.1px;line-height:1.25}
.htx .hnote{font-size:13px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.htx .hmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:2px}
.htx .pnum{font-size:14px;font-variant-numeric:tabular-nums;color:var(--text)}
.htx .hlink{font-size:12px;font-weight:600;color:var(--copper)}
.hdone{flex:none;align-self:center;width:44px;height:44px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.hdone.on .fdbox{background:#1b6b33;border-color:#1b6b33}.hdone.on .fdbox svg{opacity:1}
.hdone:active .fdbox{transform:scale(.92)}
.hdone:focus-visible .fdbox{outline:2px solid var(--copper);outline-offset:2px}
.hrow.done .nm{text-decoration:line-through;color:var(--muted)}
.hrow.done .hnote,.hrow.done .pnum{opacity:.6}
.hrow.done .rcall{opacity:.55}
.hrow:active{transform:translateY(1px)}
.hotf{display:flex;flex-direction:column;gap:12px}
.hotf .hft{margin:0;font-family:var(--head);font-size:18px;color:var(--navy)}
.hotf textarea{resize:vertical}
.hotf .hopen{font-weight:600}
.sheet .pan:has(.hotf){max-height:92vh;overflow:auto}

/* ===== FLAME CORNER (2026-10-29 ~1:55 AM, ?v=38, crm-v41, PREVIEW) =====
   Hot is no longer a tab (the bar is back to its five tabs). A 44px glossy hexagon button with a big red/orange flame sits by
   itself in the header's top-left corner; tapping it opens the Hot page. Red badge = open (unchecked) Hot items, hidden at 0.
   On the Hot page the hexagon turns navy (like a selected tab) with a warm glow. On pages with a Back arrow, the arrow sits right
   of the flame. Remove this block (and the #hotbtn link in index.html) to undo. */
.hotbtn{flex:none;position:relative;isolation:isolate;width:44px;height:44px;margin:-2px 2px -2px -4px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  filter:drop-shadow(0 1px 1px rgba(22,34,108,.22)) drop-shadow(0 4px 7px rgba(22,34,108,.22));transition:transform .12s,filter .15s;z-index:2}
.hotbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#FFFFFF 0%,#F3F4F8 55%,#E3E6EE 100%);
  -webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
.hotbtn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 48%);
  -webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat;pointer-events:none}
.hotbtn svg.flame{width:30px;height:30px;fill:none;stroke:none;filter:drop-shadow(0 1px 1px rgba(150,12,30,.35)) drop-shadow(0 0 3px rgba(255,120,30,.25))}
.hotbtn svg.flame path{stroke:none}
.hotbtn:active{transform:translateY(1px) scale(.95);filter:drop-shadow(0 1px 1px rgba(22,34,108,.25))}
.hotbtn.on{filter:drop-shadow(0 0 4px rgba(255,110,30,.55)) drop-shadow(0 4px 10px rgba(200,16,46,.45))}
.hotbtn.on::before{background:var(--navy-grad)}
.hotbtn.on::after{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%)}
.hotbtn.on svg.flame .fo{stroke:#fff;stroke-width:.9;stroke-linejoin:round;paint-order:stroke}
.hotbtn:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:10px}
.hotbadge{position:absolute;top:-3px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:linear-gradient(180deg,#EE2A45,#C8102E);
  color:#fff;font:700 11.5px/19px var(--head,system-ui);text-align:center;box-shadow:0 0 0 2px #fff,0 2px 4px rgba(120,10,28,.35);font-variant-numeric:tabular-nums}
.top #back{margin-left:0}
/* Hot checkbox explosion (2026-10-29, ?v=39): particles drawn in a fixed overlay above the page */
.hboom{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.hboom i{position:absolute;display:block;border-radius:50%;will-change:transform,opacity}
.hboom i.hbflash{width:30px;height:30px;background:radial-gradient(circle,#FFF3C4 0%,#FF9F1C 40%,rgba(238,58,30,.5) 65%,rgba(200,16,46,0) 72%)}
.hrow.boom .hdone .fdbox{background:#EE3A1E;border-color:#EE3A1E}.hrow.boom .hdone .fdbox svg{opacity:1}
/* in-app file viewer (2026-10-29): full-screen layer with a Close button; safe-area aware for the home-screen app */
html.fvon,html.fvon body{overflow:hidden}
.fv{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#2b2e36}
.fvbar{flex:none;display:flex;align-items:center;gap:8px;padding:calc(8px + var(--safe-t)) max(10px, env(safe-area-inset-right,0px)) 8px max(10px, env(safe-area-inset-left,0px));background:#fff;border-bottom:3px solid var(--copper)}
.fvx{flex:none;min-height:44px;min-width:44px;border:0;border-radius:10px;background:var(--navy);color:#fff;font-family:inherit;font-size:16px;font-weight:600;padding:0 14px 0 10px;display:flex;align-items:center;gap:6px;cursor:pointer}
.fvx b{font-size:28px;line-height:20px;margin-top:-3px}
.fvt{flex:1;min-width:0;display:flex;flex-direction:column}
.fvt b{font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fvt small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fvsave{flex:none;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-family:inherit;font-size:15px;font-weight:600;padding:0 12px;cursor:pointer}
.fvsave:disabled{opacity:.45}
.fvbody{position:relative;flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.fvmsg{color:#dfe2ea;text-align:center;padding:48px 16px;font-size:15px}
.fvimg{min-height:100%;display:flex;align-items:center;justify-content:center;padding:8px 8px calc(8px + var(--safe-b))}
.fvimg img{max-width:100%;max-height:calc(100vh - 90px - var(--safe-t) - var(--safe-b));object-fit:contain;background:#fff}
.fvpages{width:max-content;min-width:100%;padding:8px 8px calc(72px + var(--safe-b))}
.fvpg{margin:0 auto 8px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center}
.fvpg canvas{display:block;width:100%;height:100%}
.fvframe{display:block;width:100%;height:100%;border:0;background:#fff}
.fvtxt{margin:0;padding:16px 16px calc(16px + var(--safe-b));background:#fff;min-height:100%;white-space:pre-wrap;overflow-wrap:break-word;font:13px/1.45 ui-monospace,Menlo,monospace}
.fvcard{margin:40px 16px;padding:24px 16px;border-radius:14px;background:#fff;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.fvcard b{overflow-wrap:anywhere}.fvcard .btn{margin-top:8px;min-width:160px}
.fvic{font-size:52px;line-height:1}.fvcard p{margin:8px 0 0;color:var(--muted);font-size:14px}
.fvzoom{position:absolute;right:max(12px, env(safe-area-inset-right,0px));bottom:calc(12px + var(--safe-b));display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.96);border-radius:24px;box-shadow:0 4px 14px rgba(0,0,0,.3);padding:3px}
.fvzoom button{width:42px;height:42px;border:0;border-radius:50%;background:none;color:var(--navy);font-size:24px;line-height:1;cursor:pointer}
.fvzoom span{min-width:48px;text-align:center;font-size:13px;font-weight:600;color:var(--navy)}
.fvedge{position:absolute;left:0;top:calc(64px + var(--safe-t));bottom:0;width:18px;z-index:2} /* catches the swipe-in-from-the-left-edge (also over Word/Excel frames) */
/* quick preview card (2026-10-29, separate feature) */
.qp{display:flex;flex-direction:column;gap:12px}
.qpth{position:relative;height:min(40vh,340px);border-radius:12px;background:#eef0f6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qpth img,.qpth canvas{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.qpth canvas{width:auto;height:auto}
.qpic{font-size:72px;line-height:1}
.qpload{color:var(--muted);font-size:14px}
.qppg{position:absolute;right:8px;bottom:8px;background:rgba(22,34,108,.85);color:#fff;font-size:12px;font-weight:600;border-radius:10px;padding:2px 8px}
.qpmeta{display:flex;flex-direction:column;gap:2px;text-align:center}
.qpmeta b{font-size:16px;overflow-wrap:anywhere}
.qpmeta span{font-size:13px;color:var(--muted)}
.qpbtns{display:flex;gap:10px}.qpbtns .btn{flex:1;min-height:46px}
.qpdel{align-self:center;color:#b3261e}
/* Excel tabs in the file viewer (2026-10-29): one sheet at a time, Excel-style tabs along the bottom */
.fvxl{display:flex;flex-direction:column;height:100%}
.fvxlf{flex:1;min-height:0;background:#fff}
.fvtabs{position:relative;z-index:3;flex:none;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding:8px max(10px, env(safe-area-inset-right,0px)) calc(8px + var(--safe-b)) max(10px, env(safe-area-inset-left,0px));background:#fff;border-top:3px solid var(--copper)}
.fvtabs::-webkit-scrollbar{display:none}
.fvtab{flex:none;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-family:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.fvtab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 6px rgba(22,34,108,.3)}
.fvtab:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
/* "Open in Excel / Word" (2026-10-29) */
.fvsave.xl,.fvsave.wd{font-size:14px;padding:0 10px;color:#fff;border-color:transparent}
.fvsave.xl{background:#1D6F42}.fvsave.wd{background:#2B579A}
.qpext{min-height:46px}
.qpext:disabled{opacity:.55}
/* ---------- Hot history (2026-10-29, ?v=44) ---------- */
.hdonebox{margin:0 0 6px;border-top:1px solid #DDE1E8}
.hdonebox>summary{cursor:pointer;list-style:none;padding:10px 16px;font-size:13px;font-weight:700;color:#1b6b33;display:flex;align-items:center;gap:6px}
.hdonebox>summary::-webkit-details-marker{display:none}
.hdonebox>summary::before{content:'▸';font-size:12px;transition:transform .15s}
.hdonebox[open]>summary::before{transform:rotate(90deg)}
.hdonebox .hrow{padding-left:14px}
.hundo{flex:none;border:1px solid #C9CED8;background:#fff;color:var(--navy);font:inherit;font-size:13px;font-weight:700;padding:8px 14px;min-height:40px;cursor:pointer}
.hlogbar{padding:14px 16px 90px;text-align:center}
.hlogbar .link{font-size:13px}
.k-hot .hic svg{width:20px;height:20px}
.k-hot .htag{color:#9E1024}
.hbf{font-size:11px;color:var(--muted);font-style:italic}
.hlt{font-weight:700;font-size:14px}
.hlm{font-size:12.5px;color:var(--muted)}
.hwho{color:var(--copper);font-weight:600}
.hln{white-space:pre-wrap}
.chot .hhh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#9E1024}
.chot .hhh svg{width:18px;height:18px}
.chot .hcnt{font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:.2px;color:var(--muted)}
.hci{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #DDE1E8}
.hci .hct{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hci .nm{font-weight:700}
.hci.done .nm{text-decoration:line-through;color:var(--muted)}
.hci.gone .nm{color:var(--muted)}
.hci .hcb{display:flex;gap:6px}
.hci .hhist{flex-basis:100%}
.hopen1{color:#9E1024;font-weight:700}
.btn.sm{width:auto;min-height:36px;padding:6px 12px;font-size:13px;margin:0}
.hhist>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--navy);padding:4px 0}
.hhist .act-i{padding:8px 4px}
.hrel{display:flex;flex-direction:column;gap:6px}
.hrel .lbl2{font-size:13px;font-weight:600}
.hrelc{display:flex;flex-wrap:wrap;gap:6px}
.hrelchip{display:inline-flex;align-items:center;gap:4px}
.hrelchip button{border:0;background:none;font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.hreladd{display:flex;gap:6px}
.hreladd input{flex:1;min-width:0}
.hnolink{color:#9E1024;margin:0}
.hlnd>summary{cursor:pointer;list-style:none;font-size:13.5px;color:var(--ink,#333)}
.hlnd>summary::-webkit-details-marker{display:none}
.hlnd>summary .lnk{font-size:12.5px;font-weight:600;color:var(--navy)}
.hlnd[open]>summary{display:none}
/* 2026-10-29 (preview ?v=45): bottom tab bar pinned to the bottom edge on iPhone (Safari and home-screen app).
   The page itself no longer scrolls (that let iOS drag / bounce / toolbar-resize the fixed bar away); the app is a fixed full-screen
   column and only #view (main) scrolls, with the old 120px + safe-area bottom padding so nothing hides under the bar. */
html:has(#app:not([hidden])),html:has(#app:not([hidden])) body{height:100%;overflow:hidden;overscroll-behavior:none}
#app:not([hidden]){position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden}
#app>.top{flex:none}
#app>#view{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.tabs{position:fixed;bottom:0}
@media (min-width:600px){
  #app:not([hidden]){left:var(--coll);right:var(--coll)}
  body:has(.calpage) #app:not([hidden]){left:var(--call);right:var(--call)}
}
html.kbd .tabs,html.kbd .fab{visibility:hidden} /* keyboard up: don't let the bar float above it */
/* 2026-10-29 (preview ?v=45): "Log this call" sheet, shown when Chad comes back to Ketchup after tapping Call */
.sheet .pan:has(.clf){max-height:92vh;max-height:92dvh;overflow:auto}
.clf{display:flex;flex-direction:column;gap:9px}
.clf textarea[name=note]{min-height:66px}
.clf .hft{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--head);font-size:18px;color:var(--navy)}
.clf .hft svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.clwho{display:flex;flex-direction:column;gap:2px}.clwho b{font-size:17px;color:var(--text)}.clwho span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.clwho .clhot{display:flex;align-items:center;gap:4px;color:var(--text)}.clwho .clhot svg{width:16px;height:16px;flex:none}
.clout{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.clo input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.clo span{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--gray);font-size:15px;font-weight:600;cursor:pointer}
.clo input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.clo input:focus-visible+span{outline:2px solid var(--copper);outline-offset:1px}
.clf textarea[name=tr]{min-height:60px}
.sheet .pan .cltip{margin:-4px 0 0;text-align:left;font-size:12.5px;color:var(--muted)}
.clres{display:flex;flex-direction:column;border-radius:10px;overflow:hidden}.clres:not(:empty){border:1px solid var(--line);margin-top:6px}
.clr{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:0;border-top:1px solid var(--line);background:#fff;padding:10px 12px;font:inherit;text-align:left;cursor:pointer}
.clr:first-child{border-top:0}.clr span{font-size:13px;color:var(--muted)}

/* Clear "x" on search bars (2026-10-29, preview ?v=46): shared wrapper from app.js; native WebKit cancel button hidden (no double x) */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.sclr{position:relative;display:block;width:100%;min-width:0}
.hreladd .sclr{flex:1}
.sclr>input{display:block;padding-right:44px}
.sclrx{position:absolute;top:50%;right:2px;transform:translateY(-50%);width:40px;height:40px;padding:0;margin:0;border:0;background:none;display:none;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;color:#a3abb6;border-radius:50%}
.sclr.has-v .sclrx{display:flex}
.sclrx svg{width:20px;height:20px;display:block}
.sclrx svg circle{fill:currentColor;stroke:none}
.sclrx svg path{stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none}
.sclrx:hover,.sclrx:active{color:#5f6b7a}
.sclrx:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
.sclr .sclrx svg{position:static;left:auto;top:auto;transform:none;stroke:none;fill:none;width:20px;height:20px}

/* 2026-10-29 (?v=46): tab bar hardening. #tabs is now a direct child of <body> (not inside #app), so no scrolling, clipped,
   transformed, filtered or will-change ancestor can drag it. Body is pinned too (no rubber-band / toolbar resize of the page),
   and #app + bar follow the visual viewport via --vvt / --vvb (set by app.js) for the iOS 26.0 stuck-keyboard-offset bug. */
html:has(#app:not([hidden])) body{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;overscroll-behavior:none}
#app:not([hidden]){top:var(--vvt,0px);bottom:var(--vvb,0px)}
.tabs{position:fixed!important;bottom:var(--vvb,0px)!important;top:auto!important;transform:none;margin:0}
#app[hidden]~.tabs{display:none}
@media (min-width:600px){ html:has(#app:not([hidden])) body{width:auto;margin:0 auto} }
.search>svg{z-index:2;pointer-events:none} /* magnifier stays above the clear-x wrapper */
/* ---------- 2026-10-29 feature batch (preview ?v=47) ---------- */
/* status colors: pink at the start, redder toward Done (close); Lost stays gray */
.jst.js-cold{background:#F5E8EC;color:#8A5A66}
.jst.js-lead{background:#FFE1E9;color:#B0234A}
.jst.js-bid-sent{background:#FFC3D1;color:#951238}
.jst.js-sold{background:#FF93AB;color:#62061C}
.jst.js-in-progress{background:#EE4D6B;color:#fff}
.jst.js-done{background:#C8102E;color:#fff}
.jst.js-lost{background:#E6E6EA;color:#555}
/* job rows + job page: type | name | status pill */
.jhead{display:flex;align-items:center;gap:8px;min-width:0}
.jhead .jt{flex:none}
.jhead .jname{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jrow .jhead.nm{font-weight:600;font-size:17px}
.jpill{flex:none;cursor:pointer;min-height:28px;display:inline-flex;align-items:center;padding:3px 11px;font-size:12.5px;border-radius:999px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:transform .12s,box-shadow .12s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.jpill.press{transform:scale(.94);box-shadow:0 0 0 4px rgba(200,16,46,.18)}
.jpill:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.jswrap a.jrow{-webkit-touch-callout:none}
.jhero .jhead{justify-content:center;flex-wrap:wrap;margin:4px 0 0;font-size:22px;font-weight:700;max-width:100%}
.jhero .jhead .jname{flex:0 1 auto;white-space:normal;text-align:center}
.jhero .jt{font-size:13px}.jhero .jpill{font-size:13.5px;min-height:32px;padding:4px 13px}
.jphint{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
/* Hot: automatic item tags + email draft */
.ktag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ktag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.krolled{background:#FFF1E0;color:#985308}.kfri{background:#FFE1E9;color:#B0234A}.kcold{background:#EEF1F8;color:#4A5A8A}
.kmail{background:#E8ECF8;color:var(--navy)}.kblank{background:#FDECEC;color:#B3261E}
.rmail{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#E8ECF8;color:var(--navy);display:flex;align-items:center;justify-content:center;margin-left:4px;cursor:pointer}
.rmail svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.draftf textarea[name=body]{min-height:150px;max-height:36vh;max-height:36dvh;font-size:15px;line-height:1.4}
.draftf .hft svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.dbtns{display:flex;gap:8px}.dbtns .btn{flex:1}
.sheet .pan:has(.draftf){max-height:94vh;max-height:94dvh;overflow:auto}
/* bottom bar: six tabs (Map added) share the width */
.tabs a{width:auto;flex:1 1 0;max-width:72px;min-width:0}
/* Map tab */
body.mapon #app>#view{overflow:hidden;padding:0!important;position:relative}
.mapwrap{position:absolute;left:0;right:0;top:0;bottom:calc(var(--tabh,64px) + var(--vvb,0px))}
.kmap{position:absolute;inset:0;background:#E9EDF2;z-index:0}
.msearch{position:absolute;top:10px;left:56px;right:10px;z-index:500}
.msearch .search{margin:0;box-shadow:0 4px 14px rgba(22,34,108,.18)}
.mres{margin-top:6px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(22,34,108,.22);max-height:50vh;overflow:auto}
.mr{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:10px 12px;font:inherit;color:var(--text);cursor:pointer}
.mr:first-child{border-top:0}.mr small{color:var(--muted);font-size:13px}.mr.off b{color:var(--muted)}
.mstat{position:absolute;left:10px;bottom:10px;right:76px;z-index:450;background:rgba(255,255,255,.92);border-radius:10px;padding:6px 10px;font-size:12.5px;color:var(--muted);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.mstat b{color:var(--navy)}
.mlegbtn{position:absolute;right:10px;bottom:10px;z-index:460;border:0;border-radius:10px;background:#fff;color:var(--navy);font:inherit;font-weight:700;font-size:13px;padding:8px 12px;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer}
.mleg{position:absolute;right:10px;bottom:52px;z-index:460;background:#fff;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.mleg span{display:flex;align-items:center;gap:8px}.mleg small{color:var(--muted);max-width:160px}
.lg{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.mcard{position:absolute;left:10px;right:10px;bottom:52px;z-index:600;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(22,34,108,.28);padding:12px;display:flex;flex-direction:column;gap:10px}
.mct{cursor:pointer;min-width:0}.mcn{font-weight:700;font-size:17px;color:var(--text)}.mcs{font-size:13.5px;color:var(--muted);margin-top:1px}
.mcj{display:flex;flex-direction:column;gap:5px;margin-top:7px}.mcjr{display:flex;align-items:center;gap:6px;min-width:0}
.mcjn{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcb{display:flex;gap:8px;align-items:center}.mcb .act{flex:1;justify-content:center}
.mcx{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#F0F1F5;font-size:22px;color:var(--muted);cursor:pointer}
/* pins: teardrop, color = status (pink -> red), blue = no job; icon shows when zoomed in */
.kpin{background:none;border:0}
/* pin size follows the zoom level (--ps set from app.js): small when zoomed out, bigger as you zoom in. The tip sits on the address. */
.kmap{--ps:20px}
.kp{position:absolute;left:calc(var(--ps) / -2);top:calc(var(--ps) * -1.207);width:var(--ps);height:var(--ps);border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:all .15s}
.kp svg{width:0;height:0;transform:rotate(45deg);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kmap.zin .kp svg{width:calc(var(--ps) * .56);height:calc(var(--ps) * .56)}
.p-cold{background:#D9AFBB}.p-lead{background:#FF9FB8}.p-bid-sent{background:#FF7393}.p-sold{background:#F2496D}.p-in-progress{background:#D91E43}.p-done{background:#9C0B22}.p-lost{background:#9AA0A6}.p-none{background:#2F6FDE}
.leaflet-container{font:inherit}
.leaflet-top.leaflet-left{top:0}

/* ===== 2026-10-30 (?v=49, PREVIEW): Hot flame moved from the header to the CENTER of the bottom bar =====
   Tab order: Home, Contacts, Jobs, [Hot], Map, Calendar, Account. The Hot tab is a raised hexagon about 1.3x the other tab
   frames (44x50 vs 33x38) with a 32px flame (other icons 24px) and the red open-count badge. The header now starts with a clear
   "< Back" button (44px tall tap area, tinted pill) on pages that have one. */
.tabs{overflow:visible}
.tabs a.hottab::before{content:none}
.tabs a.hottab::after{content:"Hot"}
.tabs a.hottab{gap:3px}
.tabs a.hottab.on::after{color:#B80F2A}
.hothex{position:relative;isolation:isolate;flex:none;width:50px;height:57.7px;margin-top:-27px;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 1px rgba(22,34,108,.25)) drop-shadow(0 4px 8px rgba(22,34,108,.25));transition:transform .12s,filter .15s}
.hothex::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#FFFFFF 0%,#F3F4F8 55%,#E3E6EE 100%);
  -webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
.hothex::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 48%);
  -webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat;pointer-events:none}
.tabs .hothex svg.flame{width:42px;height:42px;margin-top:-1px;fill:none;stroke:none;filter:drop-shadow(0 1px 1px rgba(150,12,30,.35)) drop-shadow(0 0 3px rgba(255,120,30,.25))}
.tabs .hothex svg.flame path{stroke:none}
.tabs a.hottab:active .hothex{transform:translateY(1px) scale(.95)}
.tabs a.hottab.on .hothex{filter:drop-shadow(0 0 4px rgba(255,110,30,.55)) drop-shadow(0 4px 10px rgba(200,16,46,.45))}
.tabs a.hottab.on .hothex::before{background:var(--navy-grad)}
.tabs a.hottab.on .hothex::after{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%)}
.tabs a.hottab.on svg.flame .fo{stroke:#fff;stroke-width:.9;stroke-linejoin:round;paint-order:stroke}
.tabs .hothex .hotbadge{top:-2px;right:-8px}
@media (max-width:360px){.tabs a::after{font-size:9.5px;letter-spacing:0}}
.top .backbtn{display:inline-flex;align-items:center;gap:1px;flex:none;height:40px;margin:-4px 0 -4px -6px;padding:0 13px 0 6px;border-radius:20px;
  background:#EEF0F8;color:var(--navy);font:700 16px/1 var(--head,system-ui);box-shadow:inset 0 0 0 1px rgba(22,34,108,.10);position:relative;z-index:2}
.top .backbtn[hidden]{display:none}
.top .backbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.top .backbtn::before{content:"";position:absolute;inset:-2px -4px}
.top .backbtn:active{transform:translateY(1px);background:#E2E6F3}
@media (max-width:379px){.top .backbtn{width:40px;padding:0;justify-content:center}.top .backbtn span{display:none}.top .backbtn svg{margin-left:-2px}}
/* 2026-10-30 (?v=50): center Hot hexagon is a REGULAR hexagon (all six sides equal, same rounded shape as the tab frames,
   width:height = 0.866), 50x57.7 box (~1.5x the 33x38 tab frames), and the flame is 42px so it fills the hexagon. */
.hothex::before,.hothex::after{-webkit-mask:var(--tabhex-fill) center/100% 100% no-repeat!important;mask:var(--tabhex-fill) center/100% 100% no-repeat!important}
.mapprox{font-style:normal;color:#9E1024;font-size:12.5px}
/* 2026-10-30 (?v=52, preview): Add contact from iPhone - big tap targets, review banner, duplicate sheet */
.addform .bigbtn{min-height:52px;font-size:17px;width:100%}
.addform .bigbtn svg,.shbanner svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.addform .filebtn{width:100%}
.addform input,.addform select,.addform textarea{font-size:16px} /* 16px+ = iPhone doesn't zoom in on focus */
.addform .ph input{min-height:44px}
.fillfrom{gap:10px}
.howbtn{align-self:center;font-size:14px;padding:6px 4px;min-height:36px}
.req{font-weight:600;color:var(--red,#C8102E);text-transform:none;letter-spacing:0;margin-left:4px}
.okmsg{margin:0;background:#eef6ee;border:1px solid #cfe5cf;border-radius:12px;padding:10px 12px;font-size:14px;color:#1d4d1d}


.shbanner{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#fff4e5;border:1px solid #f0cf9f;color:#5a3405;text-decoration:none;font-size:14px;min-height:52px}
.shbanner span:not(.chev){flex:1}
.fillfrom .shbanner{margin:0}
#view>#shb .shbanner{margin:10px 12px 12px}
.shlist .row{display:flex;align-items:center;text-decoration:none;color:inherit}
.shlist .rl{display:flex;align-items:center;gap:12px;flex:1;padding:10px 12px}
.shhint{padding:8px 16px 14px}
.duplist{display:flex;flex-direction:column;gap:10px;margin:6px 0 10px}
.dupi{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.dupi .tx{display:flex;flex-direction:column;gap:2px}
.dupi small{color:var(--muted)}
.dupb{display:flex;gap:8px}.dupb .btn{flex:1}
.shbtns{display:flex;gap:8px;padding:0 12px 12px}.shbtns .btn{flex:1}
#shkey,#shurl{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:14px;word-break:break-all}
small.red{color:#b3261e}
#shset .lbl,#sheet label.lbl{text-transform:none}
/* 2026-10-30 (?v=52 preview, round 2): type-to-find + business card scanner */
.tfind{background:#fff8ec;border:1px solid #f0cf9f;border-radius:14px;padding:6px;display:flex;flex-direction:column;gap:4px;margin-top:-4px}
.tfh{font-size:12px;font-weight:700;color:#7a4a0c;padding:4px 8px;text-transform:uppercase;letter-spacing:.5px}
.tfi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:#fff;border-radius:10px;padding:10px 12px;min-height:48px;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.tfi .tfn{font-weight:600;font-size:16px}.tfi small{color:var(--muted);font-size:13px}
.scanlib{display:block;text-align:center;position:relative;overflow:hidden;width:100%}
.scanbox{background:#fff;border-radius:14px;padding:10px;box-shadow:var(--shadow)}
.scanbox img{width:100%;border-radius:8px;display:block}
.scanbox summary{font-size:14px;color:var(--navy);padding:8px 2px;cursor:pointer}
.scanbox pre{white-space:pre-wrap;font-size:13px;margin:0;color:#333}
.scanprog{height:10px;border-radius:5px;background:#e6e8f0;overflow:hidden;margin:8px 0}
#scanbar{height:100%;width:10%;background:var(--navy);transition:width .3s}

/* draft: no email on file (2026-10-30) */
.noemail{background:#fff4e5;border:1px solid #f0c27a;border-radius:10px;padding:10px 12px;margin:4px 0 10px;font-size:15px;line-height:1.35}
.noemail .nerow{display:flex;gap:8px;margin-top:8px}.noemail .nerow input{flex:1;min-width:0;font-size:16px;padding:10px;border:1px solid #ccc;border-radius:8px}.noemail .nerow .btn{white-space:nowrap;padding:10px 14px}
.improw{display:flex;gap:8px;align-items:stretch}.improw .impbtn{flex:1.6;font-size:18px;min-height:58px}.improw .impall{flex:1;min-height:58px;font-size:15px;line-height:1.15;padding:6px 8px}
.otherways{margin-top:6px}.otherways summary{color:#666;font-size:14px;padding:6px 0;cursor:pointer}
.impsum{display:grid;gap:6px;margin:8px 0}.impsum div{background:#f6f6f6;border-radius:8px;padding:8px 10px}.impsum b{font-size:18px;margin-right:4px}
.suhome{background:#fff;border:2px solid #16226C;border-radius:14px;padding:12px 14px;margin:10px 12px;display:grid;gap:6px}.suhome span{color:#444;font-size:15px}.suhb{display:flex;gap:8px}.suhb .btn{flex:1}
.sucode{font-family:ui-monospace,Menlo,monospace;background:#f3f5fb;border-radius:8px;padding:8px 10px;word-break:break-all;font-size:14px}.sustep li{margin:4px 0}
#shlink{width:100%;font-size:16px;padding:10px;border:1px solid #ccc;border-radius:8px;margin:6px 0}
.welcome textarea{width:100%;font-size:16px}.wst{display:grid;gap:6px}.wsti{display:flex;gap:10px;align-items:center;font-size:16px;padding:6px 0}.wsti input{width:22px;height:22px}

/* always a way out of a sheet (2026-10-30): stop below the status bar with a strip of backdrop to tap; tall sheets get a sticky
   top bar with Close; the body scrolls inside instead of pushing the buttons off screen */
.sheet:not(.anch) .pan{max-height:calc(100vh - var(--safe-t) - 28px);max-height:calc(100dvh - var(--safe-t) - 28px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet .pan .shbar{position:sticky;top:0;z-index:5;margin:-16px -16px 2px;padding:8px 12px 8px 16px;background:#fff;display:flex;align-items:center;justify-content:flex-end;border-radius:20px 20px 0 0;box-shadow:0 1px 0 #E6E8EE;flex-shrink:0;touch-action:none}
.sheet .pan .shgrab{position:absolute;left:50%;top:6px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:#D5D8E0}
.sheet .pan:has(>.shbar)::before{display:none}
.sheet .pan .shx{min-height:40px;min-width:88px;padding:0 14px;border:0;border-radius:20px;background:#E8ECF8;color:var(--navy);font-family:inherit;font-weight:600;font-size:15px;line-height:1;cursor:pointer}
.sheet.anch .pan .shbar{border-radius:14px 14px 0 0;margin:-14px -14px 0}
/* call = done (2026-10-30) */
.clkeep{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#FFF4EA;border-radius:12px;padding:8px 10px;font-size:14px;color:#6b4a2a}.clkeep .btn{flex:none;width:auto;padding:0 14px;min-height:40px}
.sheet .pan p.clretry{color:var(--navy);text-align:left;font-weight:600}
.ktag.kvm{background:#FFF0DC;color:#9A5A12}
/* empty Groups / Jobs (2026-10-30): one compact line, the word on the left and Add on the right */
.sec.mini{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sec.mini h3{padding:12px 16px;flex:1}
.sec.mini>.item,.sec.mini>#cjobs{border:0;padding:6px 14px 6px 0!important;background:none;flex:none;display:flex}
.sec.mini .minadd{min-height:36px;padding:0 16px;margin:0}
.sheet .glist .sec.mini{margin:0;width:100%}
.minadd{background:#E8ECF8;color:var(--navy)}
/* contact header (2026-10-30, v59): hexagon with initials on the left, name beside it, tighter; no "Contact" heading on the info box */
.hero.chero{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:2px 4px 10px;text-align:left}
.hero.chero .av{width:52px;height:60px;font-size:20px;flex:none}
.hero.chero .chn{min-width:0;display:flex;flex-direction:column;gap:2px}
.hero.chero h2{margin:0;font-size:21px;line-height:1.2;text-align:left;overflow-wrap:anywhere}
.hero.chero .co{font-size:14px}
.sec.cinfo>.item:first-child{border-top:0}
/* Back button (2026-10-30, v59): rounded hexagon like the other hex buttons; same or bigger tap area, arrow centered */
.top .backbtn{border-radius:0;background:transparent;box-shadow:none;isolation:isolate;padding:0 15px 0 10px;
  filter:drop-shadow(0 0 .7px rgba(22,34,108,.55)) drop-shadow(0 1px 2px rgba(22,34,108,.18))}
.top .backbtn::after{content:"";position:absolute;inset:0;z-index:-1;background:#E2E6F4;pointer-events:none;
  -webkit-mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;-webkit-mask-composite:source-in;
  mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;mask-composite:intersect}
.top .backbtn:active{background:transparent}.top .backbtn:active::after{background:#D6DBEE}
@media (max-width:379px){.top .backbtn{width:42px;height:46px;margin:-7px 0 -7px -6px;padding:0;justify-content:center}
  .top .backbtn::after{-webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat;-webkit-mask-composite:source-over;mask-composite:add}
  .top .backbtn svg{margin-left:-2px}}

/* ---------- Month / Week / Day toggle + Week and Day time grids (2026-11-01, preview ?v=60) ---------- */
.cview{display:inline-flex;background:#e9ebf1;border-radius:12px;padding:3px;gap:2px}
.cvb{border:0;background:transparent;color:var(--navy);font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;min-height:38px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cvb.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(17,24,64,.12),0 2px 6px rgba(17,24,64,.10)}
.cvb:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.mgrid.tgmode{overflow:visible}
.tg{--hh:52px;--gw:52px;position:relative}
.tghead,.tgall,.tgbody{display:grid;grid-template-columns:var(--gw) repeat(var(--tgn),minmax(0,1fr))}
.tghead{position:sticky;top:0;z-index:3;background-image:var(--navy-grad,none);background-color:var(--navy);border-radius:14px 14px 0 0}
.tgdh{border:0;background:transparent;color:#fff;font:inherit;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-width:0}
.tg-day .tgdh{flex-direction:row;justify-content:center;gap:8px;cursor:default}
.tgdh.we{background:#dfe1e7;color:var(--navy)}
.tgwd{font-size:12px;font-weight:700;letter-spacing:.3px}
.tgdn{font-size:15px;font-weight:700;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.tgdh.today .tgdn{background:var(--copper);color:#fff}
.tgdh.sel{box-shadow:inset 0 -3px 0 var(--copper)}
.tggut{font-size:11px;color:var(--muted);text-align:right;padding-right:6px}
.tgall .tggut{display:flex;align-items:center;justify-content:flex-end;font-size:10.5px}
.tgall{border-bottom:2px solid var(--line);min-height:30px}
.tgall.tgnone{min-height:22px}
.tall{border-left:1px solid var(--line);padding:2px;display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer}
.tall.today{background:#fdf3e7}
.tgbody{position:relative;height:calc(var(--rows) * var(--hh))}
.tghrs{position:relative}
.tghl{height:var(--hh);position:relative}
.tghl span{position:absolute;top:-7px;right:6px;white-space:nowrap;background:#fff;padding:0 1px}
.tghl:first-child span{top:2px}
.tcol{position:relative;border-left:1px solid var(--line);min-width:0;cursor:pointer;
  background-image:linear-gradient(to bottom,#E6E8EE 1px,transparent 1px),linear-gradient(to bottom,transparent calc(var(--hh) / 2),#F2F3F6 calc(var(--hh) / 2),#F2F3F6 calc(var(--hh) / 2 + 1px),transparent calc(var(--hh) / 2 + 1px));
  background-size:100% var(--hh),100% var(--hh)}
.tcol.we{background-color:#f6f7f9}
.tcol.today{background-color:#fffaf3}
.tcol.sel{outline:2px solid var(--navy);outline-offset:-2px}
.tgev{position:absolute;z-index:1;top:calc(var(--t) * var(--hh) + 1px);height:max(calc(var(--d) * var(--hh) - 2px),22px);
  left:calc(var(--l) * 100% / var(--n) + 1px);width:calc(100% / var(--n) - 3px)}
.ce.tge{height:100%;box-sizing:border-box;display:block;white-space:normal;overflow:hidden;font-size:11.5px;line-height:1.25;padding:2px 4px;border-radius:5px;box-shadow:0 1px 2px rgba(17,24,64,.10);-webkit-line-clamp:unset}
.tall .ce.tge{height:auto;min-height:20px;white-space:nowrap;text-overflow:ellipsis}
.tge .tgt{font-weight:700;white-space:nowrap}
.tge .tgn{font-weight:600}
.tge .tgl{display:block;font-weight:400;opacity:.85;margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.ce.tge:has(.fdone){position:relative;padding-right:26px}
.tge .fdone{position:absolute;top:0;right:0;width:28px;height:28px;margin:0;align-self:auto}
.tge .fdbox{width:18px;height:18px;border-radius:5px;border-width:2px}.tge .fdbox svg{width:13px;height:13px}
.tgnow{position:absolute;left:0;right:0;top:calc(var(--t) * var(--hh));height:2px;background:var(--red,#C8102E);z-index:2;pointer-events:none}
.tgnow::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--red,#C8102E)}
.tgempty{padding:10px 14px;color:var(--muted);font-size:14px;text-align:center;border-top:1px solid var(--line)}
.tg-day .ce.tge{font-size:13.5px;padding:4px 8px}
.tg-day .tgev{width:calc(100% / var(--n) - 6px)}
.tcol.dnd-over,.tall.dnd-over,.tgdh.dnd-over{background:#ffe9c7 !important;outline:3px solid var(--copper);outline-offset:-3px}
.tcol.dnd-from{background-color:#f2f3f7}
@media (min-width:900px){.tg{--hh:64px;--gw:60px}.tg-week .ce.tge{font-size:12px}}
/* iPhone: the toggle gets its own full-width row; week columns stay on screen (no sideways scroll), chips wrap tight */
@media (max-width:600px){
  .calbar .cview{order:9;flex:1 1 100%;display:flex}.cview .cvb{flex:1}
  .tg{--hh:48px;--gw:38px}
  .tggut{padding-right:3px;font-size:9.5px}.tgall .tggut{font-size:9px}
  .tghl span{right:3px}
  .tgwd{font-size:10.5px}.tgdn{font-size:14px;width:24px;height:24px}
  .tg-week .ce.tge{font-size:9.5px;line-height:1.2;padding:1px 2px;border-left-width:2px;word-break:break-word}
  .tg-week .tge .tgt{display:block}
  .tg-week .tge .fdone{display:none}.tg-week .ce.tge:has(.fdone){padding-right:2px}
  .tg-week .tgev{left:calc(var(--l) * 100% / var(--n));width:calc(100% / var(--n) - 1px)}
  .tg-week .tall{padding:1px}
}

.tgev.nar .fdone{display:none}.tgev.nar .ce.tge{padding-right:2px}
.tg-day .ce.tge{white-space:nowrap;text-overflow:ellipsis}
.tg-day .tge .tgl{display:inline;margin-left:6px}
.tg-day .tge .tgl::before{content:"· "}
.tge .fdone{z-index:2;background:inherit;border-radius:6px}

/* Drag to a time in Week / Day (2026-11-01, preview ?v=61) */
.tgdrop{position:absolute;left:2px;right:2px;z-index:4;pointer-events:none;top:calc(var(--t) * var(--hh));height:max(calc(var(--d) * var(--hh)),18px);
  border:2px dashed var(--copper);border-radius:6px;background:rgba(198,123,60,.16);color:#5a3405;font-size:11px;font-weight:700;padding:1px 4px;box-sizing:border-box;white-space:nowrap;overflow:hidden}
.tcol.dnd-over{background:inherit !important;outline:0}
.tg .tgev a.ce[data-aid]{cursor:grab}
body.dnd .tg .tgev a.ce{cursor:grabbing}

/* Resize handles in Week / Day (2026-11-01, preview ?v=61): top edge = start, bottom edge = end */
.tgrz{position:absolute;left:0;right:0;height:8px;z-index:3;cursor:ns-resize;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tgrz.rzt{top:0}.tgrz.rzb{bottom:0}
.tgrz::after{content:"";position:absolute;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:rgba(22,34,108,.45);opacity:0;transition:opacity .12s}
.tgrz.rzt::after{top:2px}.tgrz.rzb::after{bottom:2px}
.tgev.rzable:hover .tgrz::after,.tgev.rzing .tgrz::after{opacity:1}
.tgev.rzing{z-index:5}.tgev.rzing .ce{box-shadow:0 0 0 2px var(--copper),0 6px 14px rgba(17,24,64,.2)}
body.rz,body.rz *{cursor:ns-resize !important;-webkit-user-select:none;user-select:none}
.rzlbl{position:fixed;left:0;top:0;z-index:31;pointer-events:none;padding:7px 11px;border-radius:10px;background:var(--navy);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.3)}
@media (hover:none),(max-width:600px){.tgrz{height:12px}.tgrz::after{opacity:.7}.tgrz.rzt::after{top:3px}.tgrz.rzb::after{bottom:3px}}
.tge .fdone{z-index:4}
.tgdrop{white-space:normal}
/* grips: thin bars right at the edges so they never cross the text; week view shows them only on hover / while resizing */
.tgrz::after{height:2px;width:18px;margin-left:-9px}
.tgrz.rzt::after{top:1px !important}.tgrz.rzb::after{bottom:1px !important}
.tg-day .tgrz::after{opacity:.45}
.tg-week .tgrz::after{opacity:0}
.tgev.rzable:hover .tgrz::after,.tgev.rzing .tgrz::after{opacity:1}
@media (hover:none){.tgev.rzable:hover .tgrz::after{opacity:inherit}.tg-week .tgev.rzable:hover .tgrz::after{opacity:0}.tgev.rzing .tgrz::after{opacity:1}}
.tgev:has(.fdone) .tgrz{right:30px}.tg-week .tgev:has(.fdone) .tgrz,.tgev.nar:has(.fdone) .tgrz{right:0}

/* Add to Hot from the Calendar (2026-11-02) */
.olhot{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin:8px 0;color:#C8102E;border-color:#f3b3bd;font-weight:700}
.olhot svg.flame{width:22px;height:22px;flex:none;stroke:none}.olhot svg.flame path{stroke:none}
.abtns .hotlnk{color:#C8102E;font-weight:700}
.hotalready{display:flex;gap:10px;align-items:flex-start;padding:4px 2px 10px}.hotalready svg.flame{width:30px;height:30px;flex:none;stroke:none}.hotalready svg.flame path{stroke:none}
.hotalready b{font-size:18px}.sheet .pan .hotalready p{margin:4px 0 0;text-align:left}

/* 2026-11-02 (preview ?v=67): "+ Add contact" in the link-to-contact pickers (Hot Linked contact, Calendar Add event, Job Add a contact) */
.qcadd{align-self:flex-start}
.qcf{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg)}
.qcf .qct{font-size:13px;font-weight:600;color:var(--navy)}
.qcf .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qcf textarea{resize:vertical}
.qcf .err{text-align:left}
.qcbtns{display:flex;gap:8px}
.sheet .pan p.qcok{margin:0;text-align:left;color:var(--navy);font-size:13px}

/* ===== BIGGER ICONS + POLISHED JOB HEXAGONS + HEXAGON CHECKBOXES (2026-11-02 ~12:10 PM PT, style.css?v=67b, sw crm-v70b, PREVIEW ONLY) =====
   Chad (voice call ~12:00 PM). Remove this block (and burstAt + the checkbox burst hook at the end of app.js) to undo.
   1) Home recent activity icons (.feed-i .aic): 32px -> 37px, glyph 16px -> 18px.
   2) Contacts list: initials avatar 40px -> 45px (letters 15px -> 17px); call button 40px -> 45px (phone icon 18px -> 20px). Same hexagon shape.
   3) Jobs list type hexagons (.jrow .jt): about 12% bigger (12px -> 13.5px text, padding 2px 8px -> 3px 9px, ~20px -> ~23px tall).
      In the code every job type (Sunset, Basis, BRC, GPEC, Smasher, Shop, custom) shares this one .jt style, so the polish applies to all alike.
   4) Checkboxes (Done boxes .fdbox on follow-ups, Hot, calendar, and every native checkbox): soft hexagon (same shape as --hexm).
      Unchecked: thin grey outline with a very light grey check. Checked: red hexagon (the + button's red gradient) with a white check.
      Checking one plays the existing Hot burst (app.js burstAt). Tap areas unchanged (44px Done buttons; native boxes keep their sizes). */
:root{--cbx-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,8.08 86.3,29.04 86.3,70.96 50,91.92 13.7,70.96 13.7,29.04' fill='%239AA0B4' stroke='%239AA0B4' stroke-width='14' stroke-linejoin='round'/%3E%3Cpolygon points='50,16.17 79.3,33.09 79.3,66.91 50,83.83 20.7,66.91 20.7,33.09' fill='%23fff' stroke='%23fff' stroke-width='14' stroke-linejoin='round'/%3E%3Cpath d='M31 51 L44 63 L69 37' fill='none' stroke='%23DCDFE6' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--cbx-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E0213F'/%3E%3Cstop offset='.5' stop-color='%23C8102E'/%3E%3Cstop offset='1' stop-color='%23A90C26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='50,8.08 86.3,29.04 86.3,70.96 50,91.92 13.7,70.96 13.7,29.04' fill='url%28%23g%29' stroke='url%28%23g%29' stroke-width='14' stroke-linejoin='round'/%3E%3Cpath d='M31 51 L44 63 L69 37' fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.feed-i .aic{width:37px;height:37px}
.feed-i .aic svg{width:18px;height:18px}
.row .av{width:45px;height:45px;font-size:17px}
.row .rcall{width:45px;height:45px}
.row .rcall svg{width:20px;height:20px}
.jrow .jt{font-size:13.5px;padding:3px 9px}
/* hexagon checkboxes: Done boxes */
.fdbox,.tge .fdbox{border:0;border-radius:0;background:var(--cbx-off) center/100% 100% no-repeat}
.fdbox svg{visibility:hidden}
.fdone.on .fdbox,.hdone.on .fdbox,.hrow.boom .hdone .fdbox{background:var(--cbx-on) center/100% 100% no-repeat}
.fdone:focus-visible .fdbox,.hdone:focus-visible .fdbox{outline:0;filter:drop-shadow(0 0 2px var(--copper)) drop-shadow(0 0 1px var(--copper))}
/* hexagon checkboxes: native inputs (import rows, groups, Outlook Done, setup statuses) */
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;padding:0;border:0;border-radius:0;box-shadow:none;cursor:pointer;
  background:var(--cbx-off) center/100% 100% no-repeat;transition:transform .12s}
input[type=checkbox]:checked{background:var(--cbx-on) center/100% 100% no-repeat}
input[type=checkbox]:active:not(:disabled){transform:scale(.92)}
input[type=checkbox]:disabled{opacity:.4;cursor:default}
input[type=checkbox]:focus{box-shadow:none;outline:0}
input[type=checkbox]:focus-visible{filter:drop-shadow(0 0 2px var(--copper)) drop-shadow(0 0 1px var(--copper))}
.wsti input{width:22px;height:22px;margin:0}

/* ===== BUBBLY 3D TOUCH-UP + "+" BUTTON GLOSS (2026-11-02 ~12:15 PM PT, style.css?v=67c, sw crm-v70c, PREVIEW ONLY) =====
   Chad (voice ~12:10 PM): subtle 3-8% size bumps on raised elements, same shapes/colours/positions; + button gets the same raised look.
   Checkbox audit: every checkbox already uses the hexagon look from the ?v=67b block above; nothing else needed for them.
   Sizes: tab frames 33x38 -> 35x40.4 (icons 24 -> 25px); Hot centre hexagon 50x57.7 -> 52x60 (flame 42 -> 44px);
   + button 58 -> 61px ("+" 32 -> 34px); buttons (.btn) min-height 44 -> 46px. Remove this block to undo. */
.tabs svg{width:25px;height:25px}
.tabs a::before{top:calc(50% - 10.275px - 20.2px);width:35px;height:40.4px}
.hothex{width:52px;height:60px;margin-top:-29px}
.tabs .hothex svg.flame{width:44px;height:44px}
.btn{min-height:46px}
/* + button: glossy top highlight on its own layer (same mask as the red fill), layered soft shadow, gentle press-in */
.fab{width:61px;height:61px;font-size:34px;text-shadow:0 1px 1px rgba(110,8,26,.35);
  filter:drop-shadow(0 1px 1px rgba(110,8,26,.30)) drop-shadow(0 3px 4px rgba(110,8,26,.22)) drop-shadow(0 10px 16px rgba(200,16,46,.30))}
.fab::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,0) 52%,rgba(0,0,0,.10) 100%);
  -webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
.fab:active{transform:translateY(2px) scale(.95);filter:drop-shadow(0 1px 1px rgba(110,8,26,.32)) drop-shadow(0 2px 4px rgba(200,16,46,.22))}

/* ===== WHOLE-APP BUBBLY 3D PASS (2026-11-02 ~12:20 PM PT, style.css?v=67d, sw crm-v70d, PREVIEW ONLY) =====
   Chad (voice 12:09 PM): raised, glossy, polished (not cartoonish). Only shadows, highlights and gradients; no colour, layout or
   size changes. The + button and the tab bar stay exactly as in ?v=67c. Job type tags keep their existing polished look. Remove this block to undo. */
:root{--raise:0 0 0 1px rgba(22,34,108,.08),0 1px 1px rgba(22,34,108,.10),0 2px 4px -1px rgba(22,34,108,.12),0 8px 16px -6px rgba(22,34,108,.20),0 22px 36px -16px rgba(22,34,108,.30);
  --edge:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(22,34,108,.05)}
/* cards / list surfaces: soft layered shadow, white top edge light, faint top-to-bottom sheen */
.list,.sec,.fsec,.mgrid,.gpick{box-shadow:var(--raise),var(--edge);background-image:linear-gradient(180deg,#FFFFFF 0%,#FCFCFE 60%,#F8F9FC 100%)}
.sheet .pan{box-shadow:var(--shadow-lg),inset 0 1px 0 #fff}
/* rows inside cards: gentle press-in */
.row:active,.jrow:active,.feed-i:active,.hrow:active,.item:active,.agi:active,.cjrow:active{box-shadow:inset 0 2px 5px -2px rgba(22,34,108,.16)}
/* header: glossy top highlight */
.top{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 0 rgba(22,34,108,.08),0 4px 8px -2px rgba(22,34,108,.16),0 14px 30px -12px rgba(22,34,108,.32)}
/* inputs: a soft inset well with a light bottom edge (zero specificity, so focus rings and the search bar keep their own look) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){
  background-image:linear-gradient(180deg,#F6F7FA 0%,#FFFFFF 38%);box-shadow:inset 0 1px 2px rgba(22,34,108,.10),0 1px 0 rgba(255,255,255,.9)}
.search input{background-image:linear-gradient(180deg,#FFFFFF,#FAFBFD)}
/* hexagon buttons and pills: a little more gloss on top, a slight darkening at the bottom */
.btn.primary::after,.btn.copper::after,.kinds input:checked+span::after{background-image:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 46%,rgba(0,0,0,0) 54%,rgba(0,0,0,.12) 100%)}
.btn:not(.primary):not(.copper)::after,.cnav::after,.kinds span::after{background-image:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 46%,rgba(255,255,255,0) 54%,rgba(22,34,108,.05) 100%)}
.act.call,.act.dir,.dtag{background-image:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 46%,rgba(0,0,0,0) 54%,rgba(0,0,0,.12) 100%)}
.act:active,.chip:active,.gchip:active{transform:translateY(1px) scale(.985);filter:brightness(.95)}
.jpill{transition:transform .12s,filter .12s}.jpill:active{transform:translateY(1px) scale(.97);filter:brightness(.95)}
/* hexagon avatars + call buttons: brighter top gloss */
.av::after,.rcall::after{background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 46%,rgba(255,255,255,0) 54%,rgba(0,0,0,.10) 100%)}
.av:active{transform:translateY(1px) scale(.97)}
/* small activity icons: soft raised hexagon */
.aic{filter:drop-shadow(0 1px 1px rgba(22,34,108,.14)) drop-shadow(0 2px 3px rgba(22,34,108,.10))}
/* hexagon checkboxes: a whisper of shadow so they sit on the card, press-in on tap */
.fdbox,input[type=checkbox]{filter:drop-shadow(0 1px 1px rgba(22,34,108,.16))}
.fdone:active .fdbox,.hdone:active .fdbox{transform:translateY(1px) scale(.92)}

/* ===== 3D TURNED UP (2026-11-02 ~12:22 PM PT, style.css?v=67e, sw crm-v70e, PREVIEW ONLY) =====
   Chad (voice 12:18 PM): make the bubbly 3D clearly noticeable. Deeper layered card shadows, stronger gloss on buttons/pills/
   avatars/call buttons, deeper press-in (inset shadow + 2px sink + 0.97 scale), more sunken text boxes. + and tab bar keep their
   shape/size/position, with matching gloss/shadow. No colour, layout or size changes. Remove this block to go back to ?v=67d. */
:root{--raise2:0 0 0 1px rgba(22,34,108,.10),0 1px 1px rgba(22,34,108,.14),0 3px 5px -1px rgba(22,34,108,.18),0 10px 18px -6px rgba(22,34,108,.30),0 26px 42px -16px rgba(22,34,108,.42);
  --edge2:inset 0 1.5px 0 #fff,inset 0 -2px 0 rgba(22,34,108,.07);
  --gloss-dk:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.14) 44%,rgba(255,255,255,0) 52%,rgba(0,0,0,.18) 100%);
  --gloss-lt:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,.55) 44%,rgba(255,255,255,0) 52%,rgba(22,34,108,.09) 100%)}
body{background:linear-gradient(180deg,#E9ECF2 0%,#DEE2EA 45%,#D3D8E2 100%) fixed;background-color:#DEE2EA}
/* cards: clearly lifted */
.list,.sec,.fsec,.mgrid,.gpick{box-shadow:var(--raise2),var(--edge2);background-image:linear-gradient(180deg,#FFFFFF 0%,#FBFBFD 55%,#F3F5F9 100%)}
.search input{box-shadow:var(--raise2),inset 0 1.5px 0 #fff}
.sheet .pan{box-shadow:0 -10px 30px rgba(22,34,108,.28),0 -2px 6px rgba(22,34,108,.12),inset 0 1.5px 0 #fff}
/* header */
.top{box-shadow:inset 0 1.5px 0 #fff,0 1px 0 rgba(22,34,108,.10),0 5px 10px -2px rgba(22,34,108,.22),0 18px 34px -12px rgba(22,34,108,.40)}
/* rows: visible press-in */
.row,.jrow,.feed-i,.hrow,.item,.agi,.cjrow{transition:transform .1s,box-shadow .1s,background-color .1s}
.row:active,.jrow:active,.feed-i:active,.hrow:active,.item:active,.agi:active,.cjrow:active{transform:translateY(2px) scale(.985);
  box-shadow:inset 0 3px 8px -2px rgba(22,34,108,.24),inset 0 1px 2px rgba(22,34,108,.12);background-color:#F4F6FA}
/* text boxes: clearly sunken */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){
  background-image:linear-gradient(180deg,#EEF0F5 0%,#FAFBFC 30%,#FFFFFF 60%);
  box-shadow:inset 0 2px 4px rgba(22,34,108,.16),inset 0 1px 1px rgba(22,34,108,.10),0 1px 0 #fff}
/* hexagon buttons: stronger gloss + deeper shadow, 2px sink on press */
.btn.primary::after,.btn.copper::after,.kinds input:checked+span::after{background-image:var(--gloss-dk)}
.btn:not(.primary):not(.copper)::after,.cnav::after,.kinds span::after{background-image:var(--gloss-lt)}
.btn.primary{--hsh:drop-shadow(0 1px 1px rgba(22,34,108,.35)) drop-shadow(0 4px 5px rgba(22,34,108,.28)) drop-shadow(0 10px 14px rgba(22,34,108,.24))}
.btn.copper{--hsh:drop-shadow(0 1px 1px rgba(90,48,5,.35)) drop-shadow(0 4px 5px rgba(90,48,5,.26)) drop-shadow(0 10px 14px rgba(152,83,8,.22))}
.btn.ghost,.btn.danger,.btn:not(.primary):not(.copper),.calbar .btn.ghost,.cnav{--hsh:drop-shadow(0 1px 1px rgba(22,34,108,.18)) drop-shadow(0 3px 5px rgba(22,34,108,.18)) drop-shadow(0 8px 12px rgba(22,34,108,.14))}
.btn:active:not(:disabled),.cnav:active:not(:disabled){transform:translateY(2px) scale(.97);--hsh:drop-shadow(0 1px 1px rgba(22,34,108,.22))}
/* pills / tags / chips (masked): stronger gloss, press-in */
.act.call,.act.dir,.dtag,.jt{background-image:var(--gloss-dk)}
.act:not(.call):not(.dir),.chip,.gchip,.otag,.jst,.jamt,.jdue,.up{background-image:var(--gloss-lt)}
.act:active,.chip:active,.gchip:active,.jpill:active{transform:translateY(2px) scale(.97);filter:brightness(.92)}
/* avatars + call buttons: stronger gloss, deeper shadow, press-in */
.av::after,.rcall::after{background:var(--gloss-dk)}
.av,.rcall{filter:drop-shadow(0 1px 1px rgba(22,34,108,.32)) drop-shadow(0 4px 5px rgba(22,34,108,.26)) drop-shadow(0 9px 12px rgba(22,34,108,.20))}
.hero .av{filter:drop-shadow(0 2px 2px rgba(22,34,108,.32)) drop-shadow(0 8px 12px rgba(22,34,108,.30)) drop-shadow(0 16px 22px rgba(22,34,108,.24))}
.rcall:active,.av:active{transform:translateY(2px) scale(.97);filter:drop-shadow(0 1px 1px rgba(22,34,108,.30))}
/* activity icons: glossier fill */
.aic{background-image:var(--gloss-lt)}
.k-call .aic,.k-site_visit .aic{background-image:var(--gloss-dk)}
/* checkboxes: slightly deeper sit + sink */
.fdbox,input[type=checkbox]{filter:drop-shadow(0 1px 1px rgba(22,34,108,.22)) drop-shadow(0 2px 3px rgba(22,34,108,.12))}
.fdone:active .fdbox,.hdone:active .fdbox,input[type=checkbox]:active:not(:disabled){transform:translateY(2px) scale(.92)}
/* + button and tab bar: same shape/size/position, matching gloss and shadow */
.fab::after{background:linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.16) 44%,rgba(255,255,255,0) 52%,rgba(0,0,0,.16) 100%)}
.fab{filter:drop-shadow(0 1px 1px rgba(110,8,26,.38)) drop-shadow(0 4px 6px rgba(110,8,26,.28)) drop-shadow(0 12px 18px rgba(200,16,46,.34))}
.fab:active{transform:translateY(2px) scale(.95);filter:drop-shadow(0 1px 1px rgba(110,8,26,.36)) drop-shadow(0 2px 4px rgba(200,16,46,.24))}
.tabs{box-shadow:inset 0 1.5px 0 #fff,0 -1px 0 rgba(22,34,108,.08),0 -5px 10px -2px rgba(22,34,108,.16),0 -16px 32px -12px rgba(22,34,108,.34)}
.tabs a{filter:drop-shadow(0 1px 1px rgba(22,34,108,.10))}
.tabs a.on{filter:drop-shadow(0 1px 1px rgba(22,34,108,.30)) drop-shadow(0 3px 5px rgba(22,34,108,.22))}
.tabs a:active{transform:translateY(2px) scale(.97)}
.hothex{filter:drop-shadow(0 1px 1px rgba(22,34,108,.30)) drop-shadow(0 5px 9px rgba(22,34,108,.30))}

/* ===== DEEPER ADD + CALL BUTTONS (2026-11-02 ~12:25 PM PT, style.css?v=67f, sw crm-v70f, PREVIEW ONLY) =====
   Chad (voice 12:19 PM): full-width Add buttons (+ Add event, + Add contact, Add, Save...) and the call buttons read flat.
   Stronger gradient, top droplet highlight, bottom edge shade, real raised shadow, deeper press-in; buttons 46 -> 48px tall.
   Pill buttons (.act: Call / Email / Directions / Add) now paint their hexagon on a ::before layer so they can cast a real shadow
   (same colours, shape and size). Job type tags keep their original polish. Remove this block to go back to ?v=67e. */
.jt{background-image:var(--sheen-lt)}
.btn{min-height:48px}
/* droplet + gradient + bottom shade inside the hexagon fill */
.btn.primary::after,.btn.copper::after,.kinds input:checked+span::after{background-image:
  radial-gradient(ellipse 46% 34% at 50% 6%,rgba(255,255,255,.34),rgba(255,255,255,0) 72%),
  linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 44%,rgba(255,255,255,0) 52%,rgba(0,0,0,.10) 78%,rgba(0,0,0,.26) 100%)}
.btn:not(.primary):not(.copper)::after,.cnav::after,.kinds span::after{background-image:
  radial-gradient(ellipse 46% 34% at 50% 6%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),
  linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,.5) 44%,rgba(255,255,255,0) 52%,rgba(22,34,108,.08) 80%,rgba(22,34,108,.16) 100%)}
.btn.primary{--hsh:drop-shadow(0 1px 0 rgba(10,16,60,.55)) drop-shadow(0 2px 2px rgba(22,34,108,.35)) drop-shadow(0 6px 8px rgba(22,34,108,.30)) drop-shadow(0 14px 18px rgba(22,34,108,.24))}
.btn.copper{--hsh:drop-shadow(0 1px 0 rgba(80,40,0,.55)) drop-shadow(0 2px 2px rgba(90,48,5,.35)) drop-shadow(0 6px 8px rgba(90,48,5,.28)) drop-shadow(0 14px 18px rgba(152,83,8,.22))}
.btn.ghost,.btn.danger,.btn:not(.primary):not(.copper),.calbar .btn.ghost,.cnav{--hsh:drop-shadow(0 1px 0 rgba(22,34,108,.22)) drop-shadow(0 2px 3px rgba(22,34,108,.20)) drop-shadow(0 6px 10px rgba(22,34,108,.18)) drop-shadow(0 12px 16px rgba(22,34,108,.12))}
.btn:active:not(:disabled),.cnav:active:not(:disabled){transform:translateY(2px) scale(.97);--hsh:drop-shadow(0 1px 0 rgba(22,34,108,.30)) drop-shadow(0 1px 2px rgba(22,34,108,.22));filter:var(--hsh) brightness(.95)}
/* pill buttons: layered so the shadow shows */
.act{--af:#EEF0F7;-webkit-mask:none;mask:none;position:relative;isolation:isolate;background:transparent!important;
  filter:drop-shadow(0 1px 0 rgba(22,34,108,.20)) drop-shadow(0 2px 3px rgba(22,34,108,.18)) drop-shadow(0 6px 9px rgba(22,34,108,.16));transition:transform .12s,filter .12s}
.act.call{--af:var(--navy)}.act.dir{--af:var(--copper)}.act.minadd{--af:#E8ECF8}.act.mail,.act.gedit{--af:#EEF0F7}
.act::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--af);
  background-image:radial-gradient(ellipse 46% 34% at 50% 6%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,.5) 44%,rgba(255,255,255,0) 52%,rgba(22,34,108,.08) 80%,rgba(22,34,108,.16) 100%);
  -webkit-mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;-webkit-mask-composite:source-in;
  mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;mask-composite:intersect}
.act.call::before,.act.dir::before{background-image:radial-gradient(ellipse 46% 34% at 50% 6%,rgba(255,255,255,.34),rgba(255,255,255,0) 72%),
  linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 44%,rgba(255,255,255,0) 52%,rgba(0,0,0,.10) 78%,rgba(0,0,0,.26) 100%)}
.act.call{filter:drop-shadow(0 1px 0 rgba(10,16,60,.55)) drop-shadow(0 2px 2px rgba(22,34,108,.35)) drop-shadow(0 6px 8px rgba(22,34,108,.28))}
.act.dir{filter:drop-shadow(0 1px 0 rgba(80,40,0,.55)) drop-shadow(0 2px 2px rgba(90,48,5,.32)) drop-shadow(0 6px 8px rgba(90,48,5,.26))}
.act:active{transform:translateY(2px) scale(.97);filter:drop-shadow(0 1px 0 rgba(22,34,108,.30)) drop-shadow(0 1px 2px rgba(22,34,108,.20)) brightness(.95)}
/* hexagon call buttons in lists: droplet highlight + bottom shade + firmer edge */
.rcall::after{background:radial-gradient(ellipse 50% 30% at 50% 14%,rgba(255,255,255,.40),rgba(255,255,255,0) 72%),
  linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 44%,rgba(255,255,255,0) 52%,rgba(0,0,0,.10) 78%,rgba(0,0,0,.26) 100%)}
.rcall{filter:drop-shadow(0 1px 0 rgba(10,16,60,.50)) drop-shadow(0 3px 3px rgba(22,34,108,.32)) drop-shadow(0 8px 12px rgba(22,34,108,.26))}
.rcall:active{transform:translateY(2px) scale(.97);filter:drop-shadow(0 1px 0 rgba(10,16,60,.45)) drop-shadow(0 1px 2px rgba(22,34,108,.25)) brightness(.95)}

/* ===== WATER-BEAD GLOSS (2026-11-02 ~12:28 PM PT, style.css?v=67g, sw crm-v70g, PREVIEW ONLY) =====
   Chad (voice 12:18 PM): buttons look like a glossy bead of water sits on them. CSS only, on the existing masked layers, so every
   highlight stays inside the hexagon: (1) tiny bright catch-light dot, (2) sharp curved specular highlight near the top,
   (3) soft refraction glow along the bottom inside edge, (4) slightly darker rim, (5) the existing base gradient.
   (2026-11-02 12:25 PM, ?v=68: Chad had the catch-light dot (1) removed; 2-5 stay.)
   Applies to: hexagon call buttons, pill Call/Directions/Email/Add, the + button, full-width and other .btn buttons.
   Colours, sizes and shapes unchanged. Remove this block to go back to ?v=67g's predecessor (?v=67f). */
:root{
  --bead-spec:radial-gradient(ellipse 54% 24% at 50% 9%,rgba(255,255,255,.66) 0%,rgba(255,255,255,.42) 45%,rgba(255,255,255,.08) 82%,rgba(255,255,255,0) 100%);
  --bead-glow:radial-gradient(ellipse 58% 26% at 50% 100%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 60%,rgba(255,255,255,0) 100%);
  --bead-rim:radial-gradient(farthest-side at 50% 50%,rgba(0,0,0,0) 68%,rgba(0,0,0,.10) 88%,rgba(0,0,0,.22) 100%);
  --bead-base:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.08) 80%,rgba(0,0,0,.18) 100%);
  /* light (white / pale) buttons: same bead, tinted navy shading so it shows on white */
  --bead-spec-lt:radial-gradient(ellipse 54% 24% at 50% 9%,#FFFFFF 0%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%);
  --bead-glow-lt:radial-gradient(ellipse 58% 26% at 50% 100%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 100%);
  --bead-rim-lt:radial-gradient(farthest-side at 50% 50%,rgba(22,34,108,0) 66%,rgba(22,34,108,.07) 86%,rgba(22,34,108,.16) 100%);
  --bead-base-lt:linear-gradient(180deg,rgba(22,34,108,0) 45%,rgba(22,34,108,.06) 75%,rgba(22,34,108,.12) 100%)}
/* hexagon call buttons in lists (the ::after already carries the hexagon mask) */
.rcall::after{background:var(--bead-spec),var(--bead-glow),var(--bead-rim),var(--bead-base)}
/* + button */
.fab::after{background:var(--bead-spec),var(--bead-glow),var(--bead-rim),var(--bead-base)}
/* full-width / navy / copper buttons (fill colour stays on ::after's background-color) */
.btn.primary::after,.btn.copper::after,.kinds input:checked+span::after{background-image:var(--bead-spec),var(--bead-glow),var(--bead-rim),var(--bead-base)}
.btn:not(.primary):not(.copper)::after,.cnav::after,.kinds span::after{background-image:var(--bead-spec-lt),var(--bead-glow-lt),var(--bead-rim-lt),var(--bead-base-lt)}
/* pill buttons (hexagon on ::before since ?v=67f) */
.act.call::before,.act.dir::before{background-image:var(--bead-spec),var(--bead-glow),var(--bead-rim),var(--bead-base)}
.act:not(.call):not(.dir)::before{background-image:var(--bead-spec-lt),var(--bead-glow-lt),var(--bead-rim-lt),var(--bead-base-lt)}
/* keep white text/icons crisp over the highlight */
.btn.primary,.btn.copper,.act.call,.act.dir,.fab{text-shadow:0 1px 1px rgba(0,0,0,.28)}
.rcall svg,.act.call svg,.act.dir svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}

/* ===== MATCHED HEXAGON RADII + BLACK LIFT (2026-11-02 ~2:05 PM PT, style.css?v=69b, sw crm-v72b, PREVIEW ONLY) =====
   Chad (chat 1:58 PM): every hexagon gets the SAME corner rounding as the Ketchup logo's hexagon (the shape from the v2 ad/sell sheet):
   120-degree corners, each rounded with a curve whose tangent length is 12.4% of the hexagon's across-flats size (so rounding scales
   with size). Applies to the shared masks (--hexm regular, --hexl/--hexr wide caps, --tabhex-ring/--tabhex-fill tab frames + Hot),
   and the checkbox pictures (--cbx-off/--cbx-on). Outer sizes, colours, gloss and water-bead highlights are unchanged.
   Shadows (Chad 1:59-2:00 PM): one black lift on every hexagon and 3D button, "1/16 inch off the page": 0 6px 7px rgba(0,0,0,.32);
   pressed = 0 2px 3px. Directly-masked tags/icons now paint their hexagon on ::before (background:inherit) so the lift can show.
   Remove this block to go back to ?v=68 (live bf44b30b look). Generated by tools/gen_hexradius_css.py. */
:root{--hexm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='black'/%3E%3C/svg%3E");--hexl:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4000'%20height='100'%20viewBox='0%200%204000%20100'%3E%3Cpath%20d='M22.67,10.74%20Q28.87,0.00%2041.27,0.00%20L4087.60,0.00%20Q4100.00,0.00%204100.00,12.40%20L4100.00,87.60%20Q4100.00,100.00%204087.60,100.00%20L41.27,100.00%20Q28.87,100.00%2022.67,89.26%20L6.20,60.74%20Q0.00,50.00%206.20,39.26%20Z'%20fill='black'/%3E%3C/svg%3E");--hexr:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4000'%20height='100'%20viewBox='0%200%204000%20100'%3E%3Cpath%20d='M-100.00,12.40%20Q-100.00,0.00%20-87.60,0.00%20L3958.73,0.00%20Q3971.13,0.00%203977.33,10.74%20L3993.80,39.26%20Q4000.00,50.00%203993.80,60.74%20L3977.33,89.26%20Q3971.13,100.00%203958.73,100.00%20L-87.60,100.00%20Q-100.00,100.00%20-100.00,87.60%20Z'%20fill='black'/%3E%3C/svg%3E");--tabhex-ring:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='86.6'%20height='100'%20viewBox='0%200%2086.6%20100'%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z%20M35.38,11.30%20Q43.30,6.66%2051.22,11.30%20L72.38,23.68%20Q80.30,28.32%2080.30,37.49%20L80.30,62.51%20Q80.30,71.68%2072.38,76.32%20L51.22,88.70%20Q43.30,93.34%2035.38,88.70%20L14.22,76.32%20Q6.30,71.68%206.30,62.51%20L6.30,37.49%20Q6.30,28.32%2014.22,23.68%20Z'%20fill='black'%20fill-rule='evenodd'/%3E%3C/svg%3E");--tabhex-fill:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='86.6'%20height='100'%20viewBox='0%200%2086.6%20100'%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z'%20fill='black'/%3E%3C/svg%3E");--cbx-off:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='%239AA0B4'/%3E%3Cpath%20d='M42.20,12.59%20Q50.00,8.08%2057.80,12.59%20L78.50,24.54%20Q86.30,29.04%2086.30,38.04%20L86.30,61.96%20Q86.30,70.96%2078.50,75.46%20L57.80,87.41%20Q50.00,91.92%2042.20,87.41%20L21.50,75.46%20Q13.70,70.96%2013.70,61.96%20L13.70,38.04%20Q13.70,29.04%2021.50,24.54%20Z'%20fill='%23fff'/%3E%3Cpath%20d='M31%2051%20L44%2063%20L69%2037'%20fill='none'%20stroke='%23DCDFE6'%20stroke-width='9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");--cbx-on:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23E0213F'/%3E%3Cstop%20offset='.5'%20stop-color='%23C8102E'/%3E%3Cstop%20offset='1'%20stop-color='%23A90C26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='url(%23g)'/%3E%3Cpath%20d='M31%2051%20L44%2063%20L69%2037'%20fill='none'%20stroke='%23fff'%20stroke-width='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --lift:drop-shadow(0 6px 7px rgba(0,0,0,.32));--lift-press:drop-shadow(0 2px 3px rgba(0,0,0,.30))}
/* layered hexagons that already cast a shadow: black lift */
.fab,.hero .av,.av,.rcall,.act,.act.call,.act.dir,.hothex,.hotbtn,.fdbox,input[type=checkbox]{filter:var(--lift)}
.top .backbtn{filter:drop-shadow(0 0 .7px rgba(0,0,0,.40)) var(--lift)}
.hotbtn:active{filter:var(--lift-press)}
.btn.primary,.btn.copper,.btn.ghost,.btn.danger,.btn:not(.primary):not(.copper),.calbar .btn.ghost,.cnav,.kinds span,.pend,.jrole,.jdue.today{--hsh:var(--lift)}
.fab:active{transform:translateY(2px) scale(.95);filter:var(--lift-press)}
.rcall:active,.av:active{transform:translateY(2px) scale(.97);filter:var(--lift-press) brightness(.95)}
.act:active{transform:translateY(2px) scale(.97);filter:var(--lift-press) brightness(.95)}
.btn:active:not(:disabled),.cnav:active:not(:disabled){--hsh:var(--lift-press)}
input[type=checkbox]:disabled{filter:none}
.fdone:focus-visible .fdbox,.hdone:focus-visible .fdbox,input[type=checkbox]:focus-visible{filter:drop-shadow(0 0 2px var(--copper)) drop-shadow(0 0 1px var(--copper)) var(--lift)}
.tabs a.hottab.on .hothex,.hotbtn.on{filter:drop-shadow(0 0 4px rgba(255,110,30,.55)) var(--lift)}
/* directly-masked hexagons (job type/status tags, chips, small badges, activity icons, today's date): hexagon moves to ::before so it can lift */
.chip,.gchip,.otag,.jt,.jst,.jamt,.jdue:not(.today),.up,.dtag,.aic,.mcell.today .dn{-webkit-mask:none;mask:none;position:relative;isolation:isolate;-webkit-background-clip:text!important;background-clip:text!important;filter:var(--lift)}
.chip::before,.gchip::before,.otag::before,.jt::before,.jst::before,.jamt::before,.jdue:not(.today)::before,.up::before,.dtag::before,.aic::before,.mcell.today .dn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:inherit;-webkit-background-clip:border-box!important;background-clip:border-box!important}
.chip::before,.gchip::before,.otag::before,.jt::before,.jst::before,.jamt::before,.jdue:not(.today)::before,.up::before,.dtag::before{-webkit-mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;-webkit-mask-composite:source-in;mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;mask-composite:intersect}
.aic::before,.mcell.today .dn::before{-webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
.chip:active,.gchip:active,.jpill:active{transform:translateY(2px) scale(.97);filter:var(--lift-press) brightness(.92)}
/* tab bar: selected frame is a picture with its own black lift (label stays shadow-free); unselected outline rings stay flat */
.tabs a{filter:none}
.tabs a.on{filter:none}
.tabs a.on::before{-webkit-mask:none;mask:none;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='136.6'%20height='160'%20viewBox='-25%20-25%20136.6%20160'%3E%3Cdefs%3E%3Cfilter%20id='s'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeDropShadow%20dx='0'%20dy='14.85'%20stdDeviation='8.66'%20flood-color='black'%20flood-opacity='.32'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z'%20fill='%2316226C'%20filter='url(%23s)'/%3E%3C/svg%3E") center/100% 100% no-repeat;width:55.21px;height:64.64px;top:calc(50% - 10.275px - 20.2px - 10.1px)}

/* ===== FILLETED RIM (2026-11-02 ~2:25 PM PT, style.css?v=70, sw crm-v73, PREVIEW ONLY) =====
   Chad (chat 2:20 PM): "can the edges have more of a fillet edge". Every hexagon and hex-ended button/tag gets a rolled rim that follows
   the rounded-hex outline: a soft light band on the upper edges and a soft darker band on the lower edges, about 10% of the hex size wide,
   blending into the face. Painted as pictures on the existing hexagon layers (or a spare ::after clipped to the same hexagon mask), so the
   12.4% corners, black 1/16" lift, colours, water-drop shine and sizes are unchanged. Remove this block to go back to ?v=69b. */
:root{--bevm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='v'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='.72'/%3E%3Cstop%20offset='.30'%20stop-color='%23fff'%20stop-opacity='.24'/%3E%3Cstop%20offset='.48'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.52'%20stop-color='%23000'%20stop-opacity='0'/%3E%3Cstop%20offset='.72'%20stop-color='%23000'%20stop-opacity='.10'/%3E%3Cstop%20offset='1'%20stop-color='%23000'%20stop-opacity='.34'/%3E%3C/linearGradient%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'/%3E%3C/clipPath%3E%3Cfilter%20id='b'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20clip-path='url(%23c)'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='none'%20stroke='url(%23v)'%20stroke-width='16'%20stroke-linejoin='round'%20filter='url(%23b)'/%3E%3C/g%3E%3C/svg%3E");--bevt:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='86.6'%20height='100'%20viewBox='0%200%2086.6%20100'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='v'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='.72'/%3E%3Cstop%20offset='.30'%20stop-color='%23fff'%20stop-opacity='.24'/%3E%3Cstop%20offset='.48'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.52'%20stop-color='%23000'%20stop-opacity='0'/%3E%3Cstop%20offset='.72'%20stop-color='%23000'%20stop-opacity='.10'/%3E%3Cstop%20offset='1'%20stop-color='%23000'%20stop-opacity='.34'/%3E%3C/linearGradient%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z'/%3E%3C/clipPath%3E%3Cfilter%20id='b'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20clip-path='url(%23c)'%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z'%20fill='none'%20stroke='url(%23v)'%20stroke-width='16'%20stroke-linejoin='round'%20filter='url(%23b)'/%3E%3C/g%3E%3C/svg%3E");--bevl:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4000'%20height='100'%20viewBox='0%200%204000%20100'%3E%3Cdefs%3E%3ClinearGradient%20id='v'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='.72'/%3E%3Cstop%20offset='.30'%20stop-color='%23fff'%20stop-opacity='.24'/%3E%3Cstop%20offset='.48'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.52'%20stop-color='%23000'%20stop-opacity='0'/%3E%3Cstop%20offset='.72'%20stop-color='%23000'%20stop-opacity='.10'/%3E%3Cstop%20offset='1'%20stop-color='%23000'%20stop-opacity='.34'/%3E%3C/linearGradient%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M22.67,10.74%20Q28.87,0.00%2041.27,0.00%20L4087.60,0.00%20Q4100.00,0.00%204100.00,12.40%20L4100.00,87.60%20Q4100.00,100.00%204087.60,100.00%20L41.27,100.00%20Q28.87,100.00%2022.67,89.26%20L6.20,60.74%20Q0.00,50.00%206.20,39.26%20Z'/%3E%3C/clipPath%3E%3Cfilter%20id='b'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20clip-path='url(%23c)'%3E%3Cpath%20d='M22.67,10.74%20Q28.87,0.00%2041.27,0.00%20L4087.60,0.00%20Q4100.00,0.00%204100.00,12.40%20L4100.00,87.60%20Q4100.00,100.00%204087.60,100.00%20L41.27,100.00%20Q28.87,100.00%2022.67,89.26%20L6.20,60.74%20Q0.00,50.00%206.20,39.26%20Z'%20fill='none'%20stroke='url(%23v)'%20stroke-width='16'%20stroke-linejoin='round'%20filter='url(%23b)'/%3E%3C/g%3E%3C/svg%3E");--bevr:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='4000'%20height='100'%20viewBox='0%200%204000%20100'%3E%3Cdefs%3E%3ClinearGradient%20id='v'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='.72'/%3E%3Cstop%20offset='.30'%20stop-color='%23fff'%20stop-opacity='.24'/%3E%3Cstop%20offset='.48'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.52'%20stop-color='%23000'%20stop-opacity='0'/%3E%3Cstop%20offset='.72'%20stop-color='%23000'%20stop-opacity='.10'/%3E%3Cstop%20offset='1'%20stop-color='%23000'%20stop-opacity='.34'/%3E%3C/linearGradient%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M-100.00,12.40%20Q-100.00,0.00%20-87.60,0.00%20L3958.73,0.00%20Q3971.13,0.00%203977.33,10.74%20L3993.80,39.26%20Q4000.00,50.00%203993.80,60.74%20L3977.33,89.26%20Q3971.13,100.00%203958.73,100.00%20L-87.60,100.00%20Q-100.00,100.00%20-100.00,87.60%20Z'/%3E%3C/clipPath%3E%3Cfilter%20id='b'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='2.6'/%3E%3C/filter%3E%3ClinearGradient%20id='f'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='.03'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.15'%20stop-color='%23fff'/%3E%3Cstop%20offset='.85'%20stop-color='%23fff'/%3E%3Cstop%20offset='.97'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask%20id='m'%20maskUnits='userSpaceOnUse'%20x='3000'%20y='-10'%20width='1100'%20height='120'%3E%3Crect%20x='3000'%20y='-10'%20width='1100'%20height='120'%20fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%20clip-path='url(%23c)'%20mask='url(%23m)'%3E%3Cpath%20d='M3958.73,0%20Q3971.13,0%203977.33,10.74%20L3993.80,39.26%20Q4000,50%203993.80,60.74%20L3977.33,89.26%20Q3971.13,100%203958.73,100'%20fill='none'%20stroke='url(%23v)'%20stroke-width='16'%20stroke-linejoin='round'%20filter='url(%23b)'/%3E%3C/g%3E%3C/svg%3E");--cbx-off:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='%239AA0B4'/%3E%3Cpath%20d='M42.20,12.59%20Q50.00,8.08%2057.80,12.59%20L78.50,24.54%20Q86.30,29.04%2086.30,38.04%20L86.30,61.96%20Q86.30,70.96%2078.50,75.46%20L57.80,87.41%20Q50.00,91.92%2042.20,87.41%20L21.50,75.46%20Q13.70,70.96%2013.70,61.96%20L13.70,38.04%20Q13.70,29.04%2021.50,24.54%20Z'%20fill='%23fff'/%3E%3Cdefs%3E%3ClinearGradient%20id='v'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='.72'/%3E%3Cstop%20offset='.30'%20stop-color='%23fff'%20stop-opacity='.24'/%3E%3Cstop%20offset='.48'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.52'%20stop-color='%23000'%20stop-opacity='0'/%3E%3Cstop%20offset='.72'%20stop-color='%23000'%20stop-opacity='.10'/%3E%3Cstop%20offset='1'%20stop-color='%23000'%20stop-opacity='.34'/%3E%3C/linearGradient%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'/%3E%3C/clipPath%3E%3Cfilter%20id='b'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20clip-path='url(%23c)'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='none'%20stroke='url(%23v)'%20stroke-width='16'%20stroke-linejoin='round'%20filter='url(%23b)'/%3E%3C/g%3E%3Cpath%20d='M31%2051%20L44%2063%20L69%2037'%20fill='none'%20stroke='%23DCDFE6'%20stroke-width='9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");--cbx-on:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23E0213F'/%3E%3Cstop%20offset='.5'%20stop-color='%23C8102E'/%3E%3Cstop%20offset='1'%20stop-color='%23A90C26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='url(%23g)'/%3E%3Cdefs%3E%3ClinearGradient%20id='v'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='.72'/%3E%3Cstop%20offset='.30'%20stop-color='%23fff'%20stop-opacity='.24'/%3E%3Cstop%20offset='.48'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.52'%20stop-color='%23000'%20stop-opacity='0'/%3E%3Cstop%20offset='.72'%20stop-color='%23000'%20stop-opacity='.10'/%3E%3Cstop%20offset='1'%20stop-color='%23000'%20stop-opacity='.34'/%3E%3C/linearGradient%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'/%3E%3C/clipPath%3E%3Cfilter%20id='b'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20clip-path='url(%23c)'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='none'%20stroke='url(%23v)'%20stroke-width='16'%20stroke-linejoin='round'%20filter='url(%23b)'/%3E%3C/g%3E%3Cpath%20d='M31%2051%20L44%2063%20L69%2037'%20fill='none'%20stroke='%23fff'%20stroke-width='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E")}
/* regular hexagons with a gloss layer already on ::after: rim added as the top picture */
.av::after{background:var(--bevm) center/100% 100% no-repeat,var(--gloss-dk)}
.rcall::after,.fab::after{background:var(--bevm) center/100% 100% no-repeat,var(--bead-spec),var(--bead-glow),var(--bead-rim),var(--bead-base)}
.hotbtn::after{background:var(--bevm) center/100% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 48%)}
.hotbtn.on::after{background:var(--bevm) center/100% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%)}
.hothex::after{background:var(--bevt) center/100% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 48%)}
.tabs a.hottab.on .hothex::after{background:var(--bevt) center/100% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%)}
/* small hexagons/tags/pills with a spare ::after: rim layer clipped to the same hexagon */
.chip::after,.gchip::after,.otag::after,.jt::after,.jst::after,.jamt::after,.jdue:not(.today)::after,.up::after,.dtag::after,.act::after,.aic::after,.mcell.today .dn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.chip::after,.gchip::after,.otag::after,.jt::after,.jst::after,.jamt::after,.jdue:not(.today)::after,.up::after,.dtag::after,.act::after{background:var(--bevl) left center/auto 100% no-repeat,var(--bevr) right center/auto 100% no-repeat;-webkit-mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;-webkit-mask-composite:source-in;mask:var(--hexl) left center/auto 100% no-repeat,var(--hexr) right center/auto 100% no-repeat;mask-composite:intersect}
.aic::after,.mcell.today .dn::after{background:var(--bevm) center/100% 100% no-repeat;-webkit-mask:var(--hexm) center/100% 100% no-repeat;mask:var(--hexm) center/100% 100% no-repeat}
/* hex-ended buttons (fill on ::after): rim pictures on top of the existing water-drop layers */
.btn.primary::after,.btn.copper::after,.kinds input:checked+span::after{background-image:var(--bevl),var(--bevr),var(--bead-spec),var(--bead-glow),var(--bead-rim),var(--bead-base);background-position:left center,right center,center;background-size:auto 100%;background-repeat:no-repeat}
.btn:not(.primary):not(.copper)::after,.cnav::after,.kinds span::after{background-image:var(--bevl),var(--bevr),var(--bead-spec-lt),var(--bead-glow-lt),var(--bead-rim-lt),var(--bead-base-lt);background-position:left center,right center,center;background-size:auto 100%;background-repeat:no-repeat}
.pend::after,.jrole::after,.jdue.today::after{background-image:var(--bevl),var(--bevr);background-position:left center,right center,center;background-size:auto 100%;background-repeat:no-repeat}
.top .backbtn::after,.top .backbtn:active::after{background-image:var(--bevl),var(--bevr);background-position:left center,right center,center;background-size:auto 100%;background-repeat:no-repeat}
@media (max-width:379px){.top .backbtn::after,.top .backbtn:active::after{background-image:var(--bevm);background-position:center;background-size:100% 100%}}
/* selected tab frame picture: same lift, rim baked in */
.tabs a.on::before{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='136.6'%20height='160'%20viewBox='-25%20-25%20136.6%20160'%3E%3Cdefs%3E%3Cfilter%20id='s'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeDropShadow%20dx='0'%20dy='14.85'%20stdDeviation='8.66'%20flood-color='black'%20flood-opacity='.32'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z'%20fill='%2316226C'%20filter='url(%23s)'/%3E%3Cdefs%3E%3ClinearGradient%20id='v'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='0'%20y2='100'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='.72'/%3E%3Cstop%20offset='.30'%20stop-color='%23fff'%20stop-opacity='.24'/%3E%3Cstop%20offset='.48'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.52'%20stop-color='%23000'%20stop-opacity='0'/%3E%3Cstop%20offset='.72'%20stop-color='%23000'%20stop-opacity='.10'/%3E%3Cstop%20offset='1'%20stop-color='%23000'%20stop-opacity='.34'/%3E%3C/linearGradient%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z'/%3E%3C/clipPath%3E%3Cfilter%20id='b'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeGaussianBlur%20stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20clip-path='url(%23c)'%3E%3Cpath%20d='M34.40,6.55%20Q43.30,1.34%2052.20,6.55%20L76.00,20.47%20Q84.90,25.68%2084.90,36.00%20L84.90,64.00%20Q84.90,74.32%2076.00,79.53%20L52.20,93.45%20Q43.30,98.66%2034.40,93.45%20L10.60,79.53%20Q1.70,74.32%201.70,64.00%20L1.70,36.00%20Q1.70,25.68%2010.60,20.47%20Z'%20fill='none'%20stroke='url(%23v)'%20stroke-width='16'%20stroke-linejoin='round'%20filter='url(%23b)'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ===== FINE OUTLINE ON PALE ACTIVITY ICONS (2026-11-02 ~2:32 PM PT, style.css?v=71, sw crm-v74, PREVIEW ONLY) =====
   Chad (chat 2:27 PM): "looks like we might need a fine line around the people and calendar icons". The pale activity hexagons
   (people = meeting, calendar = follow-up, plus the other pale kinds: note, quote, email, Hot log) blended into the white cards.
   They get a crisp ~1px navy line (55% opacity) just inside the same rounded-hex outline, on top of the fillet rim.
   Navy call and copper site-visit icons already stand out and stay as they were. Remove this block to go back to ?v=70. */
:root{--aicring:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath%20id='c'%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d='M40.70,5.37%20Q50.00,0.00%2059.30,5.37%20L84.00,19.63%20Q93.30,25.00%2093.30,35.74%20L93.30,64.26%20Q93.30,75.00%2084.00,80.37%20L59.30,94.63%20Q50.00,100.00%2040.70,94.63%20L16.00,80.37%20Q6.70,75.00%206.70,64.26%20L6.70,35.74%20Q6.70,25.00%2016.00,19.63%20Z'%20fill='none'%20stroke='%2316226C'%20stroke-opacity='.55'%20stroke-width='6'%20stroke-linejoin='round'%20clip-path='url(%23c)'/%3E%3C/svg%3E")}
.aic::after{background:var(--aicring) center/100% 100% no-repeat,var(--bevm) center/100% 100% no-repeat}
.k-call .aic::after,.k-site_visit .aic::after{background:var(--bevm) center/100% 100% no-repeat}

/* ===== 2026-11-02 (?v=72, crm-v75): KB-01 / KB-02 call-log keyboard fixes + 3D, slightly bigger header logo =====
   KB-01: with the iPhone keyboard up, an open (bottom) sheet is fitted to the visible area above the keyboard (--kbt / --kbvh, set by
   app.js from visualViewport), so the field being typed in is never under the keyboard; the panel scrolls inside itself.
   KB-02: app.js blurs the field and resets the bar after the sheet closes (no CSS needed beyond the existing --vvb pin). */
html.kbs .sheet:not(.anch):not([hidden]){top:var(--kbt,0px);bottom:auto;height:var(--kbvh,100%)}
html.kbs .sheet:not(.anch) .pan{max-height:calc(var(--kbvh,100vh) - max(0px, var(--safe-t) - var(--kbt,0px)) - 8px)!important;padding-bottom:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet .pan:has(.clf){scroll-padding:64px 0 24px}
/* header logo: a bit bigger (34 -> 40 px) with a raised, 3D lift like the buttons */
.toplogo{top:calc(var(--safe-t) + 7px);height:40px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 1px 1px rgba(17,24,64,.22)) drop-shadow(0 3px 3px rgba(17,24,64,.16)) drop-shadow(0 7px 10px rgba(22,34,108,.18))}
.toplogo img{height:40px}

/* ===== 2026-11-02 (?v=73, crm-v76): Hot list swipe. Left = red Delete, right = amber Tomorrow; full swipe does it (Undo 5 s) ===== */
.hswrap{position:relative;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-top:1px solid #DDE1E8}
.hlist .hswrap:first-child{border-top:0}.hswrap>.hrow{border-top:0;position:relative;z-index:1;background:#fff;will-change:transform}
.hsbtn{position:absolute;top:0;bottom:0;z-index:0;width:92px;border:0;color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 6px;visibility:hidden}
.hstmr{left:0;background:#D97706}.hsdel{right:0;background:#C8102E}
.hswrap.openl .hstmr,.hswrap.openr .hsdel{visibility:visible}
.hswrap.fulll .hstmr,.hswrap.fullr .hsdel{width:100%}
.hswrap.fulll .hstmr{justify-content:flex-start;padding-left:24px}.hswrap.fullr .hsdel{justify-content:flex-end;padding-right:24px}
.hswrap a.rcall{-webkit-touch-callout:none}
.hlaterbox{margin:0 0 6px;border-top:1px solid #DDE1E8}
.hlaterbox>summary{cursor:pointer;list-style:none;padding:10px 16px;font-size:13px;font-weight:700;color:#B45309;display:flex;align-items:center;gap:6px}
.hlaterbox>summary::-webkit-details-marker{display:none}
.hlaterbox>summary::before{content:'▸';font-size:12px;transition:transform .15s}.hlaterbox[open]>summary::before{transform:rotate(90deg)}
.hlaterbox .hrow{padding-left:14px}.hlaterbox .htx{flex:1;min-width:0;display:flex;flex-direction:column;padding:8px 0}
.ktag.klater{background:#FEF3C7;color:#92400E}

/* ===== 2026-11-02 (?v=74, crm-v77, PREVIEW): one-tap red Lost button in the jobs swipe tray, next to Status ===== */
.jslost{position:absolute;top:0;left:96px;bottom:0;z-index:0;width:80px;border:0;background:#C8102E;color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 6px;box-shadow:inset 1px 0 0 rgba(255,255,255,.25)}
.jslost small{font-size:11px;font-weight:700;opacity:.9}
.jslost.is{background:#8E1A2B;opacity:.85}
.jswrap:not(.open) .jslost,.jswrap.full .jslost{visibility:hidden}.jswrap.open:not(.full) .jslost{visibility:visible}
.count .jlostshow,.empty .jlostshow{font:inherit;font-size:inherit;color:var(--navy);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}

/* Contacts list swipe (2026-11-02): left = red Delete, right = blue Message (Text / Email sheet) */
.cswrap{position:relative;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-top:1px solid #EEF0F4}
.list .cswrap:first-child{border-top:0}.cswrap>.row{border-top:0;position:relative;z-index:1;background:#fff;will-change:transform}
.csbtn{position:absolute;top:0;bottom:0;z-index:0;width:92px;border:0;color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 6px;visibility:hidden}
.csmsg{left:0;background:#1D5FD1}.csdel{right:0;background:#C8102E}
.cswrap.openl .csmsg,.cswrap.openr .csdel{visibility:visible}
.cswrap.fulll .csmsg,.cswrap.fullr .csdel{width:100%}
.cswrap.fulll .csmsg{justify-content:flex-start;padding-left:24px}.cswrap.fullr .csdel{justify-content:flex-end;padding-right:24px}
.cswrap a{-webkit-touch-callout:none}
.csmsgsheet .csopts{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.csmsgsheet .csopt{width:100%;flex-direction:column;gap:3px}.csmsgsheet .csopt small{font-size:13px;font-weight:500;opacity:.85}
.csmsgsheet .csopt[disabled]{opacity:.45;cursor:default}.csmsgsheet .csno{margin:-4px 0 4px;text-align:center}
.csmsgsheet .cshd{margin:2px 0 0;font-weight:600}

/* 2026-11-02 KB-02 v2 (navfix, ?v=76n): the bottom bar is pinned by CSS only, never by JS-computed heights.
   Old cause: app.js copied the (stale) iOS visualViewport gap into --vvb and lifted #app + the bar by it (up to 120px) -> grey band.
   Now --vvt/--vvb are ignored, #app and the bar sit on the real bottom edge, safe-area padding stays inside the bar.
   Home-screen app (html.pwa / display-mode standalone): no browser toolbars there, so the shell is sized to the large viewport
   (100lvh) and the bar is pushed down by any shortfall of a keyboard-shrunk layout viewport (min(0, 100% - 100lvh)) - it can
   only ever move DOWN to the true bottom, never up. */
html:has(#app:not([hidden])) body{top:0!important;bottom:0!important}
#app:not([hidden]){top:0!important;bottom:0!important}
.tabs{position:fixed!important;bottom:0!important;top:auto!important;transform:none!important;margin:0;will-change:auto}
.mapwrap{bottom:var(--tabh,64px)}
html.pwa:has(#app:not([hidden])),html.pwa:has(#app:not([hidden])) body{height:100%;height:max(100%,100lvh)}
html.pwa:has(#app:not([hidden])) body{bottom:auto!important}
html.pwa #app:not([hidden]){bottom:auto!important;height:100%;height:max(100%,100lvh)}
html.pwa .tabs{bottom:0!important;bottom:min(0px,calc(100% - 100lvh))!important}
@media (display-mode: standalone){
  html:has(#app:not([hidden])),html:has(#app:not([hidden])) body{height:max(100%,100lvh)}
  html:has(#app:not([hidden])) body{bottom:auto!important}
  #app:not([hidden]){bottom:auto!important;height:max(100%,100lvh)}
  .tabs{bottom:min(0px,calc(100% - 100lvh))!important}
}

/* 2026-11-02 Hot lists (?v=77h): Manage Hot lists sheet + entry on the Hot page */
.hlogbar{display:flex;flex-direction:column;align-items:center;gap:6px}
.hman{padding:0 16px}
.hlists .grow{gap:6px}.hlists .gn{min-width:0;overflow-wrap:anywhere}
.hlmv{min-width:34px;min-height:40px;font-size:13px}.hlmv:disabled{opacity:.25}
.hlfix{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:8px;background:#eef0f6;color:var(--muted)!important;font-size:11px}

/* ===== 2026-11-03 batch 6 (?v=78b7, crm-v81b7, PREVIEW) ===== */
/* 1. Hot Edit mode */
.top .hotedit{font-weight:700}.top .hotedit.on{color:#fff;background:var(--navy);border-radius:10px;padding:6px 12px}
.hedhint{margin:0 2px 12px;padding:10px 12px;border-radius:12px;background:#FFF6E5;color:#6B4A00;font-size:13.5px;line-height:1.4}
.hedhint b{color:#4A3300}.hedxi{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#C8102E;color:#fff;font-weight:800;line-height:1}
.hedsec .hedtools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:0 14px 8px}
.hedsec .hedtools .lnk{min-height:36px}.hedsec .hedtools .hlmv{min-width:36px;font-size:13px}.hedsec .hedtools .hlmv:disabled{opacity:.25}
.hedsec .hlfix{display:inline-block;padding:2px 8px;border-radius:8px;background:#eef0f6;color:var(--muted);font-size:11.5px;font-weight:600}
.hedrow{padding:2px 12px 2px 8px}.hedrow .chev{color:#A3A9B6;font-size:22px}
.hedrow.done .nm{color:var(--muted);text-decoration:line-through}
.hedx{flex:none;width:30px;height:30px;margin:7px;border:0;border-radius:50%;background:#C8102E;color:#fff;font:800 20px/1 system-ui,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(150,12,30,.35)}
.hedadd{display:block;width:100%;border:0;border-top:1px solid #DDE1E8;background:none;padding:12px 16px;text-align:left;font:inherit;font-size:15px;font-weight:700;color:var(--navy);cursor:pointer}
.hednew form{padding:4px 14px 14px}.hednew .err{margin:0 14px 12px}
/* 2. Calendar: activity popup + one width for Month / Week / Day on wide screens */
.acev .atag{background:var(--navy)}.acev .atag.k-follow_up{background:#985308}.acev .atag.k-site_visit{background:#1F7A4D}.acev .atag.k-meeting{background:#6B3FA0}
.acev .acco{margin:0 0 6px;color:var(--muted);font-weight:600}
.sheet .pan .olpbtns a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .pan .olpbtns{margin-top:8px}
@media (min-width:900px){main:has(.calpage){width:100%;max-width:var(--calmax,1400px)}} /* was shrink-to-fit: Week / Day came out narrower than Month */
/* 4. Contacts: Group picker + search stay put at the top while the list scrolls */
.cstick{position:sticky;top:-16px;z-index:8;margin:-16px -16px 6px;padding:16px 16px 8px;background:#E6E9EF;box-shadow:0 1px 0 rgba(22,34,108,.08),0 6px 12px -8px rgba(22,34,108,.25)}
.cstick .search{margin-bottom:0}.cstick .gwrap{margin-bottom:8px}
/* 6. Phone: the bottom bar. Content and the map end exactly above the MEASURED bar (--tabh from app.js), on every screen.
   The bar always sits on the bottom edge of the screen the app is given (bottom:0), so its icons can't be pushed off the bottom;
   the strip under it (::after) paints any leftover gap below in the bar's own colour (instead of moving the bar down, which cut the icons). */
main{padding-bottom:max(calc(120px + var(--safe-b)), calc(var(--tabh, 80px) + 40px))}
body.mapon #app>#view{padding:0!important}
.mapwrap{bottom:var(--tabh,64px)!important}
html.pwa .tabs{bottom:0!important}
@media (display-mode: standalone){ .tabs{bottom:0!important} }
html.pwa:has(#app:not([hidden])),html.pwa:has(#app:not([hidden])) body{height:100%}
html.pwa #app:not([hidden]){height:100%}
@media (display-mode: standalone){ html:has(#app:not([hidden])),html:has(#app:not([hidden])) body{height:100%} #app:not([hidden]){height:100%} }
.tabs::after{content:"";position:absolute;left:0;right:0;top:100%;height:240px;background:#F3F4F8;pointer-events:none}

/* 2026-11-03: New list = small plain text button at the very top of Hot Edit mode */
.hednewbar{display:flex;justify-content:flex-start;margin:0 2px 8px}.hednewbtn{min-height:36px;padding:4px 2px;font-size:15px;font-weight:700;color:var(--navy,#1B2A6B);background:none;border:0}

/* 2026-11-03: Hot Edit is a clear button (outlined), always on the right of the header */
.top .hotedit{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:36px;margin:0;padding:6px 14px;border:2px solid var(--navy);border-radius:10px;background:#fff;color:var(--navy);font-weight:700;position:relative;z-index:6;flex:none}
.top .hotedit.on{background:var(--navy);color:#fff}