:root{--accent:#DE761D;--navy:#B35C14;--blue:#B35C14;--ink:#222222;--bg:#F2F4F7;--card:#fff;--line:#E1E5EB;--muted:#6B7280;--red:#B42318;--redbg:#FEE4E2;--amber:#93590B;--amberbg:#FEF0C7;--green:#067647;--greenbg:#DCFAE6;--orangebg:#FFF1E0;--orange:#B54708}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overscroll-behavior-y:none;background:var(--bg);color:var(--ink);font:17px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;min-height:56px;padding:calc(env(safe-area-inset-top) + 4px) 12px 4px;background:#fff;color:var(--ink);border-bottom:3px solid var(--accent)}
header h1{flex:1;margin:0;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#who{font-size:12px;color:#555;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{background:none;border:0;color:var(--navy);font-size:38px;line-height:1;min-width:44px;min-height:44px;padding:0 6px 4px 0}
main{padding:12px 12px calc(150px + env(safe-area-inset-bottom))} /* room so the floating + Add part button never covers the last thing on the page */
nav#tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}
nav#tabs a .ti{font-size:22px;line-height:1.1}
nav#tabs a.on{color:var(--navy);box-shadow:inset 0 3px 0 var(--accent)}
nav#tabs a.on .ti{transform:scale(1.08)}
.pad{padding:8px 4px}.muted{color:var(--muted)}.small{font-size:14px}.tiny{font-size:12.5px}
.search{width:100%;font-size:17px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:50px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 15px;font-size:15px;font-weight:600;color:#374151;min-height:44px}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip .n{opacity:.7;font-weight:500;margin-left:4px}
.list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.card{display:block;background:var(--card);border-radius:14px;padding:13px 14px;border:1px solid var(--line);color:inherit;text-decoration:none}
a.card:active,.tap:active{background:#EEF2F7}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.t1{font-weight:700;font-size:17px}
.t2{color:#374151;font-size:15px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.t3{color:var(--muted);font-size:13.5px;margin-top:3px}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700;white-space:nowrap;background:#EEF2F7;color:#344054}
.pill.SHORT{background:var(--redbg);color:var(--red)}.pill.ORDER{background:var(--amberbg);color:var(--amber)}.pill.ON{background:#E0EAFF;color:#2D4BB3}.pill.OK{background:var(--greenbg);color:var(--green)}
.pill.hold{background:#E0EAFF;color:#1D3A8A}.pill.done{background:#F2F4F7;color:#667085}.pill.warn{background:var(--orangebg);color:var(--orange)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;border-radius:14px;border:0;background:var(--navy);color:#fff;font-size:17px;font-weight:700;text-decoration:none;margin-top:10px}
.btn.alt{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.danger{background:#fff;color:var(--red);border:1.5px solid #F2B8B5}
.btn.sm{min-height:46px;font-size:16px;width:auto;padding:0 16px;margin:0}
.sect{margin:18px 4px 6px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;gap:8px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:8px 10px;font-size:16px}
.kv .k{color:var(--muted)}
.kv a{color:var(--blue)}
.note{background:var(--orangebg);color:#7A2E0E;border-radius:10px;padding:9px 11px;font-size:14px;margin-top:8px}
.form label{display:block;font-size:14px;font-weight:700;color:#374151;margin:14px 2px 6px}
.form input,.form select,.form textarea{width:100%;font-size:17px;padding:12px 13px;border:1px solid #CDD3DC;border-radius:12px;background:#fff;min-height:50px;font-family:inherit;color:inherit}
.form textarea{min-height:90px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{flex:1 1 auto;min-height:48px;padding:0 12px;border-radius:12px;border:1px solid #CDD3DC;background:#fff;font-size:16px;font-weight:600;color:#374151}
.seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button,.qbtn{min-width:52px;min-height:52px;border-radius:14px;border:1.5px solid #CDD3DC;background:#fff;font-size:28px;font-weight:600;line-height:1;color:var(--navy)}
.stepper input{text-align:center;font-size:22px;font-weight:700;max-width:110px}
.qty{min-width:44px;text-align:center;font-size:24px;font-weight:800}
.stats{display:flex;gap:6px;margin-top:8px;font-size:13.5px;color:#374151}
.stats b{font-size:15px}
.stats span{background:#F5F7FA;border-radius:8px;padding:4px 8px}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 4px}
.summary button{border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px 4px;min-height:68px;font-weight:700;font-size:11.5px;color:#374151}
.summary button b{display:block;font-size:24px}
.summary button.on{outline:3px solid var(--accent);outline-offset:-1px}
.summary .s1 b{color:var(--red)}.summary .s2 b{color:var(--amber)}.summary .s4 b{color:#2D4BB3}.summary .s3 b{color:var(--green)}
.pick{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:6px}
.pick .opt{padding:12px;border-bottom:1px solid var(--line);min-height:52px}
.pick .opt:last-child{border-bottom:0}
.selected{background:#FFF4EA;border:1.5px solid var(--blue);border-radius:12px;padding:12px;margin-top:6px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom));background:#222222;color:#fff;padding:12px 18px;border-radius:12px;font-size:15px;z-index:9;max-width:90%}
.fab{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:4;min-height:56px;padding:0 20px;border-radius:28px;border:0;background:var(--blue);color:#fff;font-weight:700;font-size:17px;box-shadow:0 6px 16px rgba(0,0,0,.2);text-decoration:none;display:flex;align-items:center}
.money{font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--muted);padding:30px 10px}
body.signin nav#tabs,body.signin .fab{display:none}
.login{max-width:420px;margin:4vh auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 18px 18px}
.login .logo{text-align:center}.login .logo img{border-radius:16px}
.login .lt{text-align:center;font-size:26px;font-weight:800;color:var(--navy);margin-top:8px}
.login .ls{text-align:center;font-size:14px;margin:4px 0 6px}
.login input{font-size:18px;min-height:54px}
.btn.big{min-height:58px;font-size:19px;margin-top:20px}
.btn:disabled{opacity:.6}
.lerr{background:var(--redbg);color:var(--red);border-radius:10px;padding:10px 12px;font-size:15px;font-weight:600;margin-top:14px}
header .hlogo{height:34px;width:auto;flex:none;margin-right:2px}
.login .logo img.big{width:auto;height:200px;border-radius:0}
.login .lt{color:var(--ink)}
/* profit line */
.profit .money{font-weight:800}.profit .pm{margin-left:8px;font-size:14px;font-weight:700;border-radius:999px;padding:2px 8px;background:#F2F4F7}
.profit.pos{color:var(--green)}.profit.pos .pm{background:var(--greenbg)}
.profit.neg{color:var(--red)}.profit.neg .pm{background:var(--redbg)}
.pmiss{color:var(--orange);font-weight:600;margin-top:3px}
/* swipe-to-delete part lines */
.swipe{position:relative;border-radius:14px;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,margin .25s ease;max-height:400px}
.swipe .swcard{position:relative;z-index:1;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .2s ease;will-change:transform}
.swipe .swdel{position:absolute;top:0;right:0;bottom:0;width:84px;border:0;border-radius:0 14px 14px 0;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.swipe:not(.open) .swdel{pointer-events:none}
.swipe.gone{max-height:0;opacity:0;margin-top:-8px}
#toast .tact{margin-left:14px;background:none;border:0;color:#FFB672;font-weight:800;font-size:15px;padding:4px 2px;min-height:32px}
#toast:not([hidden]){display:flex;align-items:center;gap:4px;white-space:nowrap}
/* frame builder */
.fb .sec{margin:16px 2px 6px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fb .fr,.card.fb .fr{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.fb .card .fr:last-child,.card.fb .fr:last-child{border-bottom:0}
.fr .l{flex:1;min-width:0}.fr .l b{display:block;font-size:15px;color:var(--ink);line-height:1.25}.fr .l span{font-size:12.5px;color:var(--muted)}
.st{display:flex;align-items:center;gap:5px;flex:none}.st button{width:38px;height:38px;border-radius:10px;border:1.5px solid #CDD3DC;background:#fff;font-size:22px;font-weight:700;color:var(--navy);line-height:1;padding:0}
.st input.v{width:50px;height:38px;text-align:center;font-size:17px;font-weight:800;border:1px solid var(--line);border-radius:8px;padding:0;background:#fff;color:inherit;-moz-appearance:textfield}
.st input.v::-webkit-outer-spin-button,.st input.v::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fb .amt{min-width:56px;text-align:right;font-size:14px;font-weight:700;color:#374151;font-variant-numeric:tabular-nums}
.fb .amt.z{color:#B0B7C3;font-weight:600}
.fb input.sm{width:58px;height:40px;font-size:16px;text-align:center;border:1px solid #CDD3DC;border-radius:10px}
.fb .seg button{white-space:nowrap;font-size:14.5px;padding:0 8px;min-height:44px}
.calc{font-size:12.5px;color:var(--muted);background:#F5F7FA;border-radius:8px;padding:6px 9px;margin-top:6px;line-height:1.45}
textarea.desc{width:100%;font:inherit;background:#FFF4EA;border:1.5px solid var(--accent);border-radius:12px;padding:10px 12px;font-weight:700;font-size:15px;color:var(--ink);resize:vertical}
details.more{margin-top:12px}details.more>summary{font-weight:700;color:var(--blue);padding:8px 2px;cursor:pointer;font-size:15px}
details.more.in{margin-top:4px}
.sum{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:4;background:#fff;border-top:3px solid var(--accent);padding:10px 14px 10px;box-shadow:0 -6px 16px rgba(0,0,0,.08)}
.sum .g{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:14px;max-width:560px;margin:0 auto}
.sum .g .t{font-weight:800;font-size:16.5px;border-top:1px solid var(--line);padding-top:5px;margin-top:3px}
.sum .btn{max-width:560px;margin:8px auto 0;min-height:50px}
input.rate{width:92px;font-size:17px;padding:8px 10px;border:1px solid #CDD3DC;border-radius:10px;text-align:right}
.buildfr{margin-top:6px;border:1.5px solid var(--accent);background:#FFF4EA}.buildfr .frico{font-size:26px;color:var(--accent);width:34px;text-align:center}.buildfr .chev{font-size:28px;color:var(--navy)}
.pill.fr{background:var(--orangebg);color:var(--orange);font-size:11.5px;padding:1px 7px;vertical-align:1px}
.profit .pm.mk{background:#EEF2F7;color:#344054;white-space:nowrap;display:inline-block}
body:has(.sum) #toast{bottom:calc(275px + env(safe-area-inset-bottom))}
.kv .emails a{word-break:break-all}
.srow{display:flex;gap:8px;align-items:stretch}.srow .search{flex:1;min-width:0}
.sortchip{position:relative;flex:none;display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 12px;min-height:50px;font-size:15px;font-weight:700;color:var(--navy);white-space:nowrap;max-width:46%}
.sortchip .si{font-size:17px}.sortchip #sortlbl{overflow:hidden;text-overflow:ellipsis}
.sortchip select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;-webkit-appearance:none;appearance:none;border:0}
.srow2{margin-top:8px}.srow2 .sortchip{flex:1;max-width:none;min-height:44px;justify-content:center}
.fchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.jt{color:var(--orange);font-weight:700}
.seg button .n{opacity:.7;font-weight:500}
.tpl .row{align-items:center}.tpl .st button{width:34px;height:34px}.tpl .st input.v{width:44px;height:34px}
.tdel{border:0;background:none;color:var(--red);font-size:20px;width:34px;height:40px;flex:none;padding:0}
.stsm{display:flex;gap:8px;margin:12px 0 0;align-items:flex-end}.stsm>select,.stsm>input{min-width:0}
.stsm>select{flex:0 1 54%}.stsm>input{flex:1 1 46%;font-weight:600}.stsm>input::placeholder{color:#9AA3AF;font-weight:500}
.form .stsm{margin:0}.form .stsm>div{flex:1;min-width:0}.form .stsm>div:first-child{flex:1.15}
#jtnote a{color:var(--blue);font-weight:700}
/* ---------- app shell: the page itself never scrolls ----------
   html/body are pinned to the screen; the app is a column: header / scrolling main / tab bar.
   The tab bar is a normal flex child at the bottom (not position:fixed), so iOS can't leave it floating.
   While the keyboard is open, JS sets --app-h to the visible height so the column ends at the keyboard. */
html{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
body.kb{bottom:auto;height:var(--app-h,100%)}
header{position:relative;top:auto;flex:none}
main{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:96px} /* room so the floating + Add part button never covers the last thing in the list */
nav#tabs{position:relative;left:auto;right:auto;bottom:auto;flex:none;transform:none;-webkit-transform:none;contain:none}
/* floating bits sit on the app column (body), not the scrolling list, so they stay put and follow the keyboard */
.fab,.sum,#toast{position:absolute}
body:has(.sum) main{padding-bottom:270px}
body.kb nav#tabs,body.kb .fab{display:none}
/* v51: on a computer (mouse, no on-screen keyboard) typing in a box never hides the bottom tab bar. Phones/tablets (touch) are unchanged. */
html.desk body.kb nav#tabs{display:flex} /* html.desk is set by app.js on computers only */
body.kb .sum{bottom:0}
body.kb main{padding-bottom:24px}
body.kb.has-sum main,body.kb:has(.sum) main{padding-bottom:230px}
/* line status: badge + left tint */
.ls{display:inline-block;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:800;letter-spacing:.01em;vertical-align:1px;margin-right:4px;background:#EEF2F7;color:#475467}
.ls-ordered{background:#E0EAFF;color:#2D4BB3}.ls-received{background:var(--greenbg);color:var(--green)}.ls-installed{background:#D1FADF;color:#05603A}.ls-cancelled{background:var(--redbg);color:var(--red);text-decoration:line-through}
.swcard.lst-ordered{box-shadow:inset 5px 0 0 #4E6FD8}.swcard.lst-received{box-shadow:inset 5px 0 0 #12B76A}.swcard.lst-installed{box-shadow:inset 5px 0 0 #05603A}.swcard.lst-cancelled{box-shadow:inset 5px 0 0 var(--red);opacity:.75}
/* swipe right: status buttons */
.swipe .swst{position:absolute;top:0;left:0;bottom:0;width:176px;display:flex;border-radius:14px 0 0 14px;overflow:hidden;visibility:hidden}
.swipe.dragr .swst,.swipe.openl .swst{visibility:visible}.swipe.dragr .swdel,.swipe.openl .swdel{visibility:hidden}
.swipe:not(.openl) .swst{pointer-events:none}
.swst button{flex:1;border:0;color:#fff;font-size:14.5px;font-weight:800;padding:0 4px;line-height:1.15}
.swst .sw-ord{background:#3B5BDB}.swst .sw-in{background:#0E9F6E}.swst button.cur{background:#667085}
.btnrow{display:flex;gap:8px}.btnrow .btn{flex:1}
.fab{transition:opacity .15s ease,transform .15s ease}.fab.fab-away{opacity:0;transform:translateY(16px);pointer-events:none}
.miles{margin-top:8px}.miles .btn{min-height:44px;margin-top:0}
.msrp.tap{cursor:pointer}.msrped{grid-column:1/-1;background:#fff7ef;border:1px solid #f1c79b;border-radius:12px;padding:10px;margin:2px 0 6px}
.msrprow{display:flex;gap:8px;margin-top:8px}.msrprow input{flex:1;min-height:46px;font-size:18px;border:1px solid #d0d5dd;border-radius:10px;padding:0 12px}.msrprow .btn{margin-top:0;min-height:46px;flex:0 0 auto;padding:0 16px}
/* customer-supplied: one quiet "Customer confirmed" checkbox */
.csck{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:3px 9px 3px 5px;min-height:30px;border:1px solid #D0D5DD;border-radius:999px;background:#fff;color:#667085;font:inherit;font-size:13px;font-weight:600;vertical-align:middle;cursor:pointer}
.csck .bx{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid #98A2B3;border-radius:5px;font-size:13px;line-height:1;color:#fff}
.csck.on{color:#067647;border-color:#ABEFC6;background:#F6FEF9}.csck.on .bx{background:#17B26A;border-color:#17B26A}
.swst.one{width:132px}.swst.one button{font-size:14px}
.ckrow{display:flex;align-items:center;gap:12px;min-height:54px;padding:4px 12px;margin-top:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:700;font-size:16px}
.ckrow input{width:24px;height:24px;accent-color:#17B26A;flex:none;margin:0}
/* keep the swipe buttons fully tucked under the card (no red/blue hairline at the rounded corners) */
.swipe .swdel{top:2px;bottom:2px;right:1px}.swipe .swst{top:2px;bottom:2px;left:1px}
.form label.ckrow{display:flex;margin:14px 0 0;font-size:16px;color:var(--ink)}
.form .ckrow input[type=checkbox]{width:24px;height:24px;min-height:0;padding:0;border-radius:6px;flex:none}
/* tappable status badge (tap = next status) */
.lsb{border:1px solid rgba(16,24,40,.08);font:inherit;font-size:13px;font-weight:800;padding:5px 12px;min-height:30px;margin:-4px 6px -4px 0;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;vertical-align:middle;-webkit-tap-highlight-color:transparent;transition:transform .08s ease}
.lsb:active{transform:scale(.94)}
/* header: Export & Settings button (Jobs screen) */
.hx{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-size:14px;font-weight:700;text-decoration:none;background:#fff}
.hx[hidden]{display:none}
/* Orders tab badge */
nav#tabs a .ti{position:relative}
.tbadge{position:absolute;top:-4px;left:62%;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;font-style:normal}
.tbadge[hidden]{display:none}
/* Orders screen */
.otabs{margin-bottom:10px}.otabs button{flex:1;min-height:46px;font-size:16px}
.ojf{width:100%;max-width:none;justify-content:center;min-height:44px;margin-bottom:10px}
.osum .money.big{font-size:22px;font-weight:800}
.osup{margin-top:16px}.osh{display:flex;align-items:flex-end;padding:0 4px 6px}
.olist{padding:0}.op{padding:12px 14px;border-bottom:1px solid var(--line)}.op:last-child{border-bottom:0}
.op .row{align-items:flex-start}.op .oq{text-align:right;min-width:44px}.op .pn{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#475467}
.ojobs{margin-top:3px}.ojobs a{color:var(--blue);font-weight:700;text-decoration:none}
.op .ob{margin-top:8px;min-height:40px;width:auto;padding:0 16px}.op .ob.in{background:#0E9F6E}
.oage{color:#475467}.oage.old{color:#B42318;font-weight:700}.oage.unk{color:#98A2B3;font-style:italic}
.op.late{box-shadow:inset 4px 0 0 #F04438}
.oall{margin-top:8px}
.jobhit{margin-top:4px;color:var(--blue);font-weight:700}

/* reorder levels + restock */
.ropb{border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;color:var(--navy);min-height:28px}
.stats .ropb{font-size:13px}
.pill.NO{background:#EEF0F3;color:#475467}
.nolvl{display:block;width:100%;margin:8px 0 0;padding:9px 12px;border:1px dashed #98A2B3;border-radius:12px;background:#fff;color:#475467;font-size:13px;font-weight:600;text-align:left}
.nolvl.on{border-style:solid;border-color:var(--navy);color:var(--navy)}
.sheetbg{position:fixed;inset:0;z-index:60;background:rgba(16,24,40,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;background:#fff;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.sheet label{display:block;margin:12px 0 4px;font-weight:700}
.sheet input{width:100%;box-sizing:border-box;font-size:17px;padding:11px 12px;border:1px solid var(--line);border-radius:10px}
.rstag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:#E0EAFF;color:#3538CD;font-size:11px;font-weight:800;vertical-align:2px}
.note.blue{background:#EEF4FF;color:#3538CD}
.qty.neg{color:#B42318}
.qtap{display:block;margin:0 auto;min-width:52px;min-height:40px;padding:2px 6px;border:1px dashed #C4CAD4;border-radius:10px;background:#fff;font:inherit;font-size:22px;font-weight:800;color:var(--ink);line-height:1.1;touch-action:manipulation}
.qtap.neg{color:#B42318;border-color:#F1A9A0}
.invtop{align-items:flex-start}
.avbox{flex:none;text-align:center;min-width:60px}
.cntsheet input{font-size:24px;font-weight:800;text-align:center}
.cnthint{margin-top:8px;font-size:14px;color:#475467}
.pill.NONE{background:#EEF0F3;color:#475467}
.lcolor{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:#F2F4F7;color:#344054;font-size:12px;font-weight:700;vertical-align:1px}
.seg.wrap{flex-wrap:wrap}.seg.wrap button{flex:1 1 30%}
.donefold{display:flex;align-items:center;gap:10px;width:100%;margin:16px 0 8px;padding:14px 16px;border:1px dashed #D0D5DD;border-radius:14px;background:#F9FAFB;color:#344054;font:inherit;font-weight:800;font-size:16px;text-align:left;cursor:pointer}
.donefold .dfi{display:inline-block;transition:transform .15s;color:#667085}.donefold.open .dfi{transform:rotate(90deg)}
.donelist .card{opacity:.92}.pill.fin{background:#ECFDF3;color:#067647}

/* popups stay above the iPhone keyboard: while typing, JS sizes .sheetbg to the visible part of the screen (visualViewport);
   the sheet never grows past that, scrolls inside, and its Save / Cancel row stays pinned at the bottom */
.sheet{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet .btnrow{position:sticky;bottom:0;z-index:1;background:#fff}
body.kb .sheet{padding-bottom:10px} /* keyboard covers the home-bar area, no safe-area gap needed */
/* full-screen forms (Edit part, Edit job, Edit part info…): while typing, the Save button stays pinned just above the keyboard */
body.kb .form > .btn[type=submit]{position:sticky;bottom:8px;z-index:2;box-shadow:0 0 0 8px var(--bg),0 -6px 14px 8px rgba(242,244,247,.9)}
/* ---------- v38: compact bottom tab bar (icons only, ~44px tap targets) ----------
   The home-bar safe area is added once, on the bar itself; floating bits sit just above the bar. */
:root{--navh:45px}
nav#tabs{padding-bottom:env(safe-area-inset-bottom)}
nav#tabs a{flex-direction:row;min-height:44px;padding:0}
nav#tabs a .ti{font-size:24px;line-height:1}
nav#tabs a .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* label kept for screen readers only */
.tbadge{top:-6px;left:68%}
main{padding-bottom:84px}
.fab{bottom:calc(var(--navh) + 14px + env(safe-area-inset-bottom))}
#toast{bottom:calc(var(--navh) + 18px + env(safe-area-inset-bottom))}
.sum{bottom:calc(var(--navh) + env(safe-area-inset-bottom))}
body:has(.sum) #toast{bottom:calc(var(--navh) + 213px + env(safe-area-inset-bottom))}
body.kb .sum{bottom:0}
body.kb main{padding-bottom:24px}
body.kb.has-sum main,body.kb:has(.sum) main{padding-bottom:230px}
/* ---------- v38: short screen above the keyboard (iPhone landscape), JS sets body.kbs ---------- */
body.kbs header{display:none}
body.kbs main{padding-top:6px;padding-bottom:10px}
body.kbs .sum{display:none}
body.kbs.has-sum main,body.kbs:has(.sum) main{padding-bottom:10px}
body.kbs .form > .btn[type=submit]{bottom:4px;min-height:42px;margin-top:6px}
body.kbs .sheetbg{align-items:flex-end}
body.kbs .sheet{padding:6px 12px 6px;border-radius:12px 12px 0 0}
body.kbs .sheet .t1{font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.kbs .sheet .t3,body.kbs .sheet label .muted{display:none}
body.kbs .sheet label{margin:4px 0 2px;font-size:13px}
body.kbs .sheet input{padding:6px 10px;min-height:40px}
body.kbs .sheet .btnrow{padding-top:6px}
body.kbs .sheet .btn{min-height:42px;margin-top:0;font-size:16px}
/* On hand popup: title, then [number][Save][Cancel] on one row, then the available math in small print */
body.kbs .cntsheet{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
body.kbs .cntsheet .t1{flex:1 1 100%}
body.kbs .cntsheet label{display:none}
body.kbs .cntsheet #ohv{flex:1 1 0;min-width:0;width:auto;height:44px;min-height:44px;padding:0 10px;font-size:22px}
body.kbs .cntsheet .btnrow{flex:none;position:static;padding:0;gap:6px}
body.kbs .cntsheet .btnrow .btn{width:auto;min-width:84px;padding:0 14px;min-height:44px}
body.kbs .cntsheet .cnthint{order:3;flex:1 1 100%;margin:0;font-size:12px;line-height:1.2}
/* Reorder popup: each label beside its box, one short row per field */
body.kbs .ropsheet{display:grid;grid-template-columns:1fr minmax(96px,38%);column-gap:10px;row-gap:4px;align-items:center}
body.kbs .ropsheet .t1,body.kbs .ropsheet .btnrow{grid-column:1/-1}
body.kbs .ropsheet label{margin:0}
body.kbs .ropsheet input{font-size:18px;text-align:center}
/* ---------- v41: job photos & videos ---------- */
.fab.fabph{right:150px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phin{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 8px}
.mtile{position:relative;aspect-ratio:1/1;border:0;padding:0;border-radius:10px;overflow:hidden;background:#E5E7EB;cursor:pointer}
.mtile img{width:100%;height:100%;object-fit:cover;display:block}
.mtile .mph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px}
.mtile .mplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.mup{font-size:15px;font-weight:700;color:var(--navy);background:var(--orangebg);border-radius:10px;padding:10px 12px;margin:4px 0 8px}
.mview{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column}
.mview .mbar{display:flex;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
.mview .mbar button{min-height:44px;padding:0 16px;border-radius:22px;border:0;font-size:16px;font-weight:700;background:rgba(255,255,255,.18);color:#fff}
.mview .mbar .mdel{background:var(--red)}
.mview .mbody{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.mview .mbody img,.mview .mbody video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mview .mcap{color:#bbb;font-size:13px;text-align:center;padding:6px 12px calc(8px + env(safe-area-inset-bottom))}
/* ---------- v42: part photos ---------- */
.pth{width:42px;height:42px;flex:none;border-radius:8px;object-fit:cover;background:#E5E7EB;margin-right:10px;align-self:center}
.phbtn{cursor:pointer;margin-top:4px}
/* v43: part lock + photo/cutout pair */
.ppair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.ppair:empty{display:none}
.ppair .pcell .tiny{margin:0 2px 3px;font-weight:700}
.ppair .mtile{width:100%;display:block}
.ppair .mtile img{object-fit:contain;background:#fff}
.mtile.pnone{cursor:default;display:flex;align-items:center;justify-content:center}
.ctile img{object-fit:contain!important;background:#fff}
.lockbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F2F4F7;border-radius:12px;padding:8px 10px;margin:0 0 8px;font-size:14px;font-weight:600}
.lockbar.on{background:#FFF4E5;color:#B35C14}
.lockbar .btn{margin:0;min-height:40px;width:auto;padding:0 16px}
.ffs{border:0;padding:0;margin:0;min-width:0}
.form.locked input,.form.locked select,.form.locked textarea{background:#F2F4F7;color:#222;-webkit-text-fill-color:#222;opacity:1}
.form.locked .seg button{opacity:.75}
/* ---------- v44: polish pass (contrast, focus, tap targets, press feedback, loading/error states) ---------- */
:root{--muted:#5F6673} /* a touch darker so small grey text passes contrast on the grey background */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn,.chip,.seg button,.qbtn,.stepper button,.st button,.ropb,.fab,.summary button,.nolvl,.donefold{touch-action:manipulation;cursor:pointer}
.btn,.chip,.seg button,.fab,.summary button,.qbtn,.stepper button,.st button{transition:transform .08s ease,filter .12s ease}
.btn:active,.chip:active,.seg button:active,.fab:active,.summary button:active,.qbtn:active,.stepper button:active,.st button:active{transform:scale(.97);filter:brightness(.94)}
.btn:disabled{cursor:default;transform:none;filter:none}
/* bigger tap targets (44px guideline) without changing the layout */
.ropb{min-height:36px;padding:6px 12px}
.lsb{min-height:36px}
.nolvl{min-height:44px}
.ojobs a{display:inline-block;padding:8px 5px;margin:-8px -1px}
.tpl .st button{width:40px;height:40px}.tpl .st input.v{height:40px}.tdel{width:40px;height:44px}
.card a.tiny[href="#/frame-prices"]{padding:10px 0;margin-top:0!important}
/* long words / links wrap instead of pushing past the screen edge */
.card,.kv,.note,.t3{overflow-wrap:break-word}
/* loading + error */
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 10px;color:var(--muted);font-weight:600}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.errbox{background:#fff;border:1px solid var(--line);border-radius:16px;margin:24px 4px;padding:26px 18px}
.errbox .erri{font-size:34px;margin-bottom:6px}.errbox .t1{color:var(--ink)}.errbox .btn{max-width:260px;margin:18px auto 0}
.empty .btn{max-width:260px;margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
/* ---------- v45: tab bar shows short text labels under the icons (Chad, 2026-10-21) ---------- */
:root{--navh:54px}
nav#tabs a{flex-direction:column;gap:2px;min-height:54px;padding:5px 2px 4px}
nav#tabs a .ti{font-size:22px;line-height:1}
nav#tabs a .tl{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;font-size:12px;font-weight:700;line-height:1.1;letter-spacing:.01em;white-space:nowrap}
nav#tabs a.on .tl{color:var(--navy)}
.tbadge{top:-6px;left:70%}
/* v46: reorder part lists (job parts, starter lists) + aluminum in 20' tubes */
.reob{margin-left:auto;flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--blue);background:#fff;color:var(--navy);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.reob.on{background:var(--blue);color:#fff}
.reonote{margin:2px 4px 8px;padding:10px 12px;border-radius:12px;background:var(--orangebg);color:#5B3A12;font-size:14px;line-height:1.35}
.reol .rrow{padding:10px 8px 10px 12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:box-shadow .15s}
.reol .rrow .row{align-items:center;gap:8px}
.reol .rrow .t2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rbtns{display:flex;flex-direction:column;gap:4px;flex:none}
.rbtns button{width:44px;height:34px;border-radius:9px;border:1.5px solid #CDD3DC;background:#fff;color:var(--navy);font-size:15px;line-height:1;padding:0}
.rrow:first-child .rup,.rrow:last-child .rdn{opacity:.35}
.rgrip{flex:none;width:44px;align-self:stretch;min-height:72px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#667085;touch-action:none;cursor:grab;border-radius:10px;background:#F2F4F7}
.rrow.drag{position:relative;z-index:3;box-shadow:0 10px 24px rgba(0,0,0,.22);border-color:var(--accent)}
.rrow.drag .rgrip{cursor:grabbing;background:var(--orangebg);color:var(--navy)}
.reol.dragging{touch-action:none}
@keyframes rmoved{from{background:var(--orangebg)}to{background:#fff}}
.rrow.moved{animation:rmoved .7s ease-out}
.abuy{color:var(--navy);font-weight:700;white-space:nowrap}
.alumbox{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#FAFBFC}
.alumbox .btn{margin-top:8px;width:100%}

/* v49: Email order + Suppliers */
.eord{width:100%;margin:0 0 10px}
.oeml{width:100%;margin:8px 0 0}
.eosheet .eosub{padding:8px 10px;background:#F7F8FA;border-radius:10px;word-break:break-word}
.eosheet .eolist{max-height:34vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px 10px}
.eosheet .eorow{padding:7px 0;border-bottom:1px solid #EEF0F3;font-size:15px}.eosheet .eorow:last-child{border-bottom:0}
.eosheet .list{display:flex;flex-direction:column;gap:8px}
/* v50: recent part searches dropdown */
.hist{position:absolute;z-index:40;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(16,24,40,.18);max-height:min(60vh,420px);overflow:auto;-webkit-overflow-scrolling:touch}
.hist .hh{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line)}
.hist .hclr{background:none;border:0;color:var(--blue);font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;min-height:36px;padding:0 4px}
.hist .hi{display:flex;align-items:center;gap:6px;padding:0 4px 0 14px;min-height:48px;border-bottom:1px solid var(--line);cursor:pointer}
.hist .hi:last-child{border-bottom:0}
.hist .hi:hover,.hist .hi.on,.hist .hi:active{background:#EEF2F7}
.hist .ht{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;color:var(--ink)}
.hist .ht::before{content:"🕘";margin-right:8px;opacity:.55;font-size:14px}
.hist .hx{background:none;border:0;color:var(--muted);font-size:16px;min-width:44px;min-height:44px}

/* ---------- v53: zoomable picture viewer + tappable part thumbnails ---------- */
.mview .mbar{align-items:center}
.mview .mzbtns{display:flex;gap:8px;margin-left:auto}
.mview .mzbtns+.mdel{margin-left:0}
.mview .mbar .mzbtns button{min-width:48px;padding:0 12px;font-size:22px;line-height:1}
.mview .mbar .mzbtns #mzf{font-size:15px}
.mview .mbody.mzoom{position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:zoom-in;overscroll-behavior:contain}
.mview .mbody.mzoom.zin{cursor:grab}
.mview .mbody.mzoom img{transform-origin:center center;will-change:transform;-webkit-user-drag:none;user-select:none;max-width:100%;max-height:100%}
.mview .mzload{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;background:rgba(0,0,0,.6);padding:8px 14px;border-radius:18px;font-size:14px;pointer-events:none}
img.pth[data-pz]{cursor:zoom-in}

/* v57 (2026-10-26, Chad): New/Edit job form. Job #, Customer, Job type, Status each on their own line; Job name and Job folder fields removed (columns + saved values kept; saving only sends the fields on the form);
   Contract $ / Order date / Due date share one line (3 across on wide screens; phones: Contract full width, the two dates side by side).
   Phone + Email share a line under it (stacked on phones), Address full width below.
   Undo: restore public/app.js + style.css from *.bak-20261026-1407. */
.form .jmoney{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
.form .jmoney>div{min-width:0}.form .jmoney .jc{grid-column:1/-1}
.form .jmoney input{min-width:0}
@media (min-width:600px){.form .jmoney{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}.form .jmoney .jc{grid-column:auto}}
.form .jpe{display:grid;grid-template-columns:minmax(0,1fr);gap:0 10px}.form .jpe>div{min-width:0}
@media (min-width:600px){.form .jpe{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
/* v58 (2026-10-26, Chad): Job # (narrow, ~8 digits) + Customer / dealer on one line, phones too. Undo: restore public/*.bak-20261026-1415 */
.form .jcust{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 8px}.form .jcust>div{min-width:0}.form .jcust label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:600px){.form .jcust{grid-template-columns:150px minmax(0,1fr);gap:0 10px}}
/* v59 (2026-10-26, Chad): Job type + Status two across (phones too); starter-parts hint text removed. Undo: restore public/*.bak-20261026-1419 */
.form .jtst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}.form .jtst>div{min-width:0}
@media (min-width:600px){.form .jtst{gap:0 10px}}