: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:220px;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}