:root{--bg:#f1f2f6;--card:#fff;--ink:#141414;--mut:#9aa0ab;--line:#e7e9ee;--ok:#0f8a3c;--low:#c9791a;--bad:#d63a3a;
  --okbg:#e6f6ec;--lowbg:#fdf1e0;--badbg:#fdeaea;--r:22px;--sh:0 2px 10px rgba(20,20,20,.05)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.4}
button,input,select,textarea{font-family:inherit;color:var(--ink)}
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;background:var(--bg);
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
.hbtn{width:48px;height:48px;border-radius:50%;border:0;background:#fff;box-shadow:var(--sh);display:flex;
  align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--ink)}
.hdr h1{flex:1;text-align:center;margin:0;font-size:23px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the dashboard shows the Stanjo logo instead of a screen name */
.hdr h1 .hlogo{display:block;height:27px;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.page{max-width:640px;margin:0 auto;padding:4px 16px calc(110px + env(safe-area-inset-bottom))}
.screen{display:none}.screen.on{display:block}
/* top strip */
.strip{display:flex;gap:10px;background:#fff;border-radius:26px;padding:14px 12px;box-shadow:var(--sh);margin-bottom:18px}
.qk{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;padding:0;color:var(--ink)}
.qk .qic{width:52px;height:52px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
  display:flex;align-items:center;justify-content:center}
.qk .ql{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
/* tiles */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px 16px 16px;border:0;text-align:left;
  cursor:pointer;display:flex;flex-direction:column;gap:12px;min-height:150px;color:var(--ink)}
.tile:active{transform:scale(.98)}
.tic{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
.tile h3{margin:0;font-size:18.5px;font-weight:800;letter-spacing:-.01em}
.tile p{margin:0;color:var(--mut);font-size:13.5px;font-weight:600;line-height:1.35}
.tile .big{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* sidebar */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.side{position:fixed;top:0;bottom:0;left:0;width:min(78vw,320px);background:#111;color:#fff;z-index:50;
  transform:translateX(-102%);transition:transform .22s ease;display:flex;flex-direction:column;
  padding:calc(26px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom))}
.side.on{transform:none}
.sprof{padding:0 24px 18px;border-bottom:1px solid rgba(255,255,255,.25);margin-bottom:8px}
.sava{width:70px;height:70px;border-radius:50%;background:#2b2b2b;color:#fff;font-size:29px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.sprof b{display:block;font-size:19px;font-weight:800}
.sprof small{color:#bbb;font-size:13.5px}
.snav{flex:1;overflow-y:auto}
.sitem{display:flex;align-items:center;gap:15px;width:100%;border:0;background:none;color:#fff;font-size:16.5px;
  font-weight:700;padding:12px 24px;cursor:pointer;text-align:left}
.sver{text-align:center;color:#888;font-size:12.5px;padding-top:8px}
/* search */
.searchwrap{position:relative;margin-bottom:12px}
.search{width:100%;border:1px solid var(--line);border-radius:15px;padding:15px 16px 15px 44px;font-size:16.5px;font-weight:600;
  background:#fff;box-shadow:var(--sh)}
.search::placeholder{color:var(--mut);font-weight:500}
.search:focus{outline:2.5px solid var(--ink)}
.sic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mut)}
/* quote cards (like the reference app) */
.qcard{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:14px 16px 10px;margin-bottom:12px;cursor:pointer}
.qtop{display:flex;gap:10px}
.qtop .l{flex:1;min-width:0}
.qtop .l b{display:block;font-size:17px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.qtop .l small{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:13.5px;font-weight:650;margin-top:3px}
.qtop .r{flex-shrink:0;text-align:right}
.qtop .r .no{font-size:16.5px;font-weight:800}
.qtop .r .dt{color:var(--mut);font-size:13px;font-weight:650}
.qtop .r .amt{font-size:17px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.qby{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);margin-top:10px;padding:8px 0 2px;
  color:var(--mut);font-size:13px;font-weight:700}
.tbadge{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--bg);color:var(--mut);border-radius:8px;padding:3px 9px}
/* where a document stands — won / lost / paid / still waiting */
.sbadge{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border-radius:8px;padding:3px 9px;white-space:nowrap}
.sbadge+.tbadge{margin-left:6px}
.sbadge.ok{background:#e6f6ec;color:#1a7f43}
.sbadge.warn{background:#fff3e0;color:#a05a00}
.sbadge.low{background:#fdecec;color:#b3261e}
.strow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ssub{color:var(--mut);font-size:13px;font-weight:650}
/* fab */
.fab{position:fixed;right:18px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:30;border:0;background:var(--ink);color:#fff;
  border-radius:999px;padding:17px 24px;font-size:15px;font-weight:800;letter-spacing:.03em;box-shadow:0 8px 22px rgba(0,0,0,.3);
  cursor:pointer;display:none;align-items:center;gap:8px}
.fab.show{display:flex}
/* make screen */
.card{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:16px;margin-bottom:14px}
.card h4{margin:0 0 10px;font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}
.custsel{display:flex;align-items:center;gap:12px}
.custsel .nm{flex:1;min-width:0}
.custsel b{display:block;font-size:17px;font-weight:800}
.custsel small{color:var(--mut);font-size:13px;font-weight:600;overflow-wrap:anywhere}
.linkbtn{border:0;background:none;color:var(--ink);font-size:14px;font-weight:800;text-decoration:underline;cursor:pointer;
  padding:11px 6px;min-height:44px}
.drop{position:absolute;left:0;right:0;top:100%;z-index:25;background:#fff;border-radius:15px;box-shadow:0 8px 26px rgba(0,0,0,.16);
  max-height:290px;overflow-y:auto;margin-top:6px;display:none}
.drop.show{display:block}
.drow{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;text-align:left;padding:12px 14px;
  cursor:pointer;border-bottom:1px solid var(--line);font-size:15px}
.drow:last-child{border-bottom:0}
.drow .nm{flex:1;min-width:0}
.drow b{display:block;font-weight:750;font-size:15.5px;line-height:1.25;overflow-wrap:anywhere}
.drow small{color:var(--mut);font-size:12.5px;font-weight:600}
.drow .stk{flex-shrink:0;text-align:center;border-radius:10px;padding:5px 9px;min-width:46px}
.drow .stk .v{font-size:15px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.drow .stk .u{font-size:9px;font-weight:800;opacity:.75;text-transform:uppercase}
/* product thumbnails */
.thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg);border:1px solid var(--line)}
.thumb.ph{display:flex;align-items:center;justify-content:center;font-size:17px;color:#c3c8d2}
.bigthumb{width:100%;height:190px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--bg);display:block}
.phbox{width:100%;height:130px;border:2px dashed #cfd3db;border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:var(--mut);font-size:14px;font-weight:750;cursor:pointer}
.stk.ok{background:var(--okbg);color:var(--ok)}.stk.low{background:var(--lowbg);color:var(--low)}.stk.bad{background:var(--badbg);color:var(--bad)}
.addnew{color:var(--ok);font-weight:800}
.dgrp{font-size:10.5px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;
  padding:9px 14px 5px;border-top:1px solid var(--line);background:#fafbfc}
.srct{flex-shrink:0;font-size:9.5px;font-weight:800;letter-spacing:.05em;border-radius:7px;padding:3px 7px;
  background:#e8edf6;color:#3b5b8f}
/* "usually takes" history chips */
.histh{font-size:10.5px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;margin:0 0 7px}
.histwrap{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.hchip{flex-shrink:0;border:1.5px solid var(--line);background:#fafbfc;border-radius:13px;padding:8px 12px;
  cursor:pointer;text-align:left;max-width:200px}
.hchip b{display:block;font-size:13px;font-weight:750;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hchip small{color:var(--mut);font-size:11px;font-weight:650}
/* line cards */
.lcard{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;margin-bottom:9px;cursor:pointer}
.lcard .nm{flex:1;min-width:0}
.lcard b{display:block;font-size:15.5px;font-weight:750;line-height:1.25;overflow-wrap:anywhere}
.lcard small{color:var(--mut);font-size:12.5px;font-weight:650}
.lcard .amt{flex-shrink:0;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
/* the remove button sits inside a card that is itself tappable, so it has to be
   big enough to hit on purpose rather than by accident */
.lx{flex-shrink:0;border:0;background:var(--bg);color:var(--mut);width:40px;height:40px;border-radius:50%;font-size:16px;cursor:pointer}
.addline{width:100%;border:2px dashed #cfd3db;background:none;border-radius:14px;padding:14px;font-size:15.5px;font-weight:800;
  color:var(--ink);cursor:pointer}
/* one extra charge — name, amount, its GST rate */
.chgrow{display:flex;gap:7px;align-items:center;margin-bottom:8px}
.chgrow .fld{margin:0;flex:1;min-width:0}
.chgrow .fld.amt{flex:0 0 92px;text-align:right}
.chgrow .fld.gst{flex:0 0 68px;text-align:right}
#discChips .chip{min-width:58px;text-align:center;padding:11px 14px}
/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
#typeChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin-left:-16px;margin-right:-16px;padding:2px 16px}
#typeChips::-webkit-scrollbar{display:none}
#typeChips .chip{flex:0 0 auto}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:11px 16px;
  min-height:44px;font-size:14px;font-weight:750;cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* totals */
.trow2{display:flex;justify-content:space-between;padding:7px 0;font-size:15.5px;font-weight:650;color:#444}
.trow2.gr{border-top:2.5px solid var(--ink);margin-top:6px;padding-top:11px;font-size:19px;font-weight:800;color:var(--ink)}
.trow2 span:last-child{font-variant-numeric:tabular-nums}
/* forms */
.fld{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:14px 15px;font-size:16.5px;font-weight:600;
  background:#fff;margin-bottom:11px}
.fld:focus{outline:2.5px solid var(--ink)}
textarea.fld{resize:vertical;min-height:74px}
.flbl{display:block;font-size:12.5px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:2px 2px 6px}
.frow{display:flex;gap:10px}.frow>*{flex:1;min-width:0}
.bigbtn{width:100%;border:0;background:var(--ink);color:#fff;border-radius:14px;padding:16px;font-size:17px;font-weight:800;cursor:pointer}
.bigbtn:disabled{opacity:.55}
.ub{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:12px;font-size:14.5px;font-weight:750;cursor:pointer;color:var(--ink)}
.ub.danger{color:var(--bad);border-color:#f3d2d2}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}
.btnrow .ub{flex:1;min-width:44%}
/* detail */
.dhead{text-align:center;padding:6px 0 14px}
.dhead .no{font-size:24px;font-weight:800}
.dhead small{color:var(--mut);font-size:13.5px;font-weight:650}
.dtl{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.dtl:last-child{border-bottom:0}
.dtl .n{font-weight:750;flex:1;min-width:0;overflow-wrap:anywhere}
.dtl small{display:block;color:var(--mut);font-size:12.5px;font-weight:600}
.dtl .a{font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0}
/* product rows */
.prow2{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;box-shadow:var(--sh);padding:13px 14px;margin-bottom:10px;cursor:pointer}
.prow2 .nm{flex:1;min-width:0}
.prow2 b{display:block;font-size:15.5px;font-weight:750;line-height:1.25;overflow-wrap:anywhere}
.prow2 small{color:var(--mut);font-size:12.5px;font-weight:600}
.prow2 .rt{flex-shrink:0;text-align:right}
.prow2 .rt .v{font-size:16.5px;font-weight:800;font-variant-numeric:tabular-nums}
.prow2 .rt .g{display:block;color:var(--mut);font-size:11.5px;font-weight:700}
.prow2 .rt .v.miss{color:var(--low);font-size:13px;font-weight:800}
/* customers */
.ccard{display:flex;align-items:center;gap:13px;background:#fff;border-radius:16px;box-shadow:var(--sh);padding:14px;margin-bottom:10px;cursor:pointer}
.cava{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:18px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ccard .nm{flex:1;min-width:0}
.ccard b{display:block;font-size:16.5px;font-weight:800;overflow-wrap:anywhere}
.ccard small{color:var(--mut);font-size:13px;font-weight:600;overflow-wrap:anywhere}
/* modal */
/* The entrance is a CSS animation, not a JS-toggled class: a class added from
   requestAnimationFrame never arrives in a backgrounded tab, and a sheet whose
   visibility depended on it would open invisible. */
.mscrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:none;align-items:flex-end;justify-content:center}
.mscrim.on{display:flex;animation:scrimIn .18s ease both}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{from{transform:translateY(18px)}to{transform:none}}
/* --sheet-max is set from visualViewport, so an open keyboard never buries the sheet */
.modal{background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:640px;
  max-height:var(--sheet-max,88vh);overflow-y:auto;
  padding:22px 20px calc(26px + env(safe-area-inset-bottom))}
.mscrim.on .modal{animation:sheetIn .22s cubic-bezier(.22,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){.mscrim.on,.mscrim.on .modal{animation:none}}
/* the grab bar every phone user reads as "this pulls down to close" */
.modal::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:#d7dbe2;
  margin:-8px auto 14px}
.modal h3{margin:0 0 16px;font-size:20px;font-weight:800}
/* picking something out of a list: the sheet takes the screen and the list fills it,
   instead of a 156px strip with the results hanging off the bottom */
/* The sheet grows with the list up to the screen height, then the list scrolls
   inside it — so three results give a short sheet and three hundred give a full
   one, instead of the list hanging off the bottom of a 156px strip. */
.modal.picking{display:flex;flex-direction:column;padding-bottom:14px}
.modal.picking>h3,.modal.picking .pickhead{flex:none}
.modal.picking .searchwrap{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;margin-bottom:0}
.modal.picking .searchwrap .search{flex:none}
.modal.picking .sic{top:26px}
.modal.picking .drop{position:static;flex:0 1 auto;min-height:0;max-height:none;margin-top:10px;
  box-shadow:none;border:1.5px solid var(--line);overflow-y:auto;-webkit-overflow-scrolling:touch}
.pickhead{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.pickhead h3{flex:1;margin:0}
.xbtn{flex:none;border:0;background:var(--bg);color:var(--ink);width:44px;height:44px;border-radius:50%;
  font-size:19px;font-weight:700;line-height:1;cursor:pointer}
.dropnote{padding:10px 14px;color:var(--mut);font-size:12.5px;font-weight:650;text-align:center}
body.sheeton{overflow:hidden}
.mrow{display:flex;gap:10px;margin-top:8px}
.mrow .ub{flex:1;padding:14px;font-size:16px}
.ub.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
/* login */
.login{max-width:400px;margin:0 auto;padding:12vh 24px 40px;text-align:center}
/* the real Stanjo logo above the sign-in form (it used to be a plain "S" tile) */
.lbrand{display:block;width:auto;height:42px;max-width:78%;margin:0 auto 20px}
.lbrand.lapp{height:64px;width:64px;border-radius:15px;margin-bottom:14px}
.login h2{margin:0 0 6px;font-size:26px;font-weight:800}
.login p{margin:0 0 26px;color:var(--mut);font-weight:600;font-size:14.5px}
.err{color:var(--bad);font-weight:700;font-size:14.5px;min-height:22px;margin:10px 0 0}
/* sign in ⇄ start a business */
.lswap{margin:14px 0 0;color:var(--mut);font-size:14px;font-weight:650}
.lswap .linkbtn{min-height:auto;padding:4px 2px}
.msg{text-align:center;color:var(--mut);padding:50px 20px;font-size:16px;font-weight:600}
.spin{width:32px;height:32px;border:4px solid var(--line);border-top-color:var(--ink);border-radius:50%;margin:60px auto;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:70;background:var(--ink);
  color:#fff;border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:750;opacity:0;pointer-events:none;transition:opacity .25s;max-width:88vw;text-align:center}
.toast.on{opacity:1}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.spin{animation:none}}

/* ============================================================
   Quotation-maker parity — dashboard, make flow, customer screens
   ============================================================ */
/* header: a red help/video button that only shows on the dashboard */
.hbtn.yt{background:#ff0000;color:#fff}
.hbtn.yt svg{fill:#fff}
/* dashboard setup shortcuts — solid black glyphs on white tiles */
.strip{padding:16px 12px;border-radius:24px}
.qk .qic{border:0;box-shadow:0 1px 5px rgba(20,20,20,.10)}
.qk .qic svg{fill:var(--ink)}
/* onboarding progress banner */
.setup{display:flex;align-items:center;gap:14px;background:#fdf5e1;border:1px solid #f1e1b5;border-radius:16px;
  padding:15px 18px;margin-bottom:18px;cursor:pointer;width:100%;text-align:left;color:var(--ink);box-shadow:var(--sh)}
.setup .st-l{flex:1;min-width:0}
.setup .st-l b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em}
.setup .st-l small{color:#96854f;font-size:13.5px;font-weight:700}
.ring{position:relative;width:52px;height:52px;flex-shrink:0}
.ring svg{display:block;transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.setup .chev{flex-shrink:0;color:#c9b884;font-size:26px;font-weight:400;line-height:1}
/* dashboard document cards (reference look: black circle icon, title, subtitle) */
.dcard{background:var(--card);border-radius:20px;box-shadow:var(--sh);padding:20px 17px;border:0;text-align:left;
  cursor:pointer;display:flex;flex-direction:column;min-height:158px;color:var(--ink)}
.dcard:active{transform:scale(.98)}
.dcard .dic{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.dcard .dtxt{margin-top:auto;padding-top:18px}
.dcard h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.dcard p{margin:5px 0 0;color:var(--mut);font-size:14px;font-weight:600;line-height:1.3}
/* ---- make screen (rebuilt) ---- */
.make2{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
.mhead{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:15px 16px 14px;margin-bottom:14px;
  border-left:5px solid var(--ink)}
.mhrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mhrow .k{display:block;color:var(--mut);font-size:12.5px;font-weight:750;margin-bottom:2px}
.mh-date{border:0;background:none;color:var(--ink);font-size:18px;font-weight:800;padding:0;cursor:pointer;
  text-align:left;letter-spacing:-.01em}
.mhrow .r{text-align:right}
.mh-no{font-size:18px;font-weight:800;letter-spacing:-.01em}
.mh-other{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;background:none;
  color:var(--mut);font-size:14.5px;font-weight:700;cursor:pointer;padding:12px 0 2px;margin-top:11px;
  border-top:1px solid var(--line);text-align:left}
.mh-other .cv{transition:transform .18s}
.mh-other.open .cv{transform:rotate(180deg)}
.mh-summary{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
#optPanel{margin-top:12px;display:none}
#optPanel.open{display:block}
/* collapsible section rows */
.secrow{background:#fff;border-radius:16px;box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.sechd{display:flex;align-items:center;gap:12px;padding:17px 16px;cursor:pointer;width:100%;border:0;background:none;
  text-align:left;color:var(--ink)}
.sechd .t{flex:1;min-width:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.sechd .t small{display:block;font-size:13px;font-weight:650;color:var(--mut);margin-top:2px;letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
.sechd .plus{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.secbody{padding:0 16px 16px}
.secbody.tight{padding-top:2px}
/* sticky bottom summary bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;box-shadow:0 -3px 16px rgba(0,0,0,.10);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom))}
.mbar-in{max-width:640px;margin:0 auto}
.mbar-tax{display:flex;justify-content:space-between;font-size:15px;font-weight:700;color:#555;padding:2px 2px 9px;
  border-bottom:1px solid var(--line)}
.mbar-tax span:last-child{font-variant-numeric:tabular-nums}
.mbar-main{display:flex;align-items:center;gap:14px;margin-top:9px}
.mbar-main .k{color:var(--mut);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.mbar-main .due{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mbar-btn{margin-left:auto;border:0;background:var(--ink);color:#fff;border-radius:13px;padding:15px 22px;
  font-size:16px;font-weight:800;cursor:pointer}
.mbar-btn:disabled{opacity:.55}
/* ---- select-customer screen ---- */
.emptyc{text-align:center;color:var(--ink);font-size:27px;font-weight:750;line-height:1.35;padding:22vh 24px 0;opacity:.85}
.fab-add{position:fixed;right:20px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:35;width:96px;height:96px;
  border-radius:50%;border:3px solid #fff;background:#ff3b6b;color:#fff;font-size:13px;font-weight:800;line-height:1.15;
  text-transform:uppercase;letter-spacing:.02em;box-shadow:0 10px 24px rgba(255,59,107,.42);cursor:pointer}
.fab-add:active{transform:scale(.96)}
.hdr .spacer{width:48px;height:48px;flex-shrink:0}
/* ---- add-customer screen (underline fields, reference style) ---- */
.uform{max-width:640px;margin:0 auto}
.uform .uf{width:100%;border:0;border-bottom:1.5px solid var(--line);border-radius:0;background:none;padding:14px 2px;
  font-size:17px;font-weight:600;margin-bottom:20px;color:var(--ink)}
.uform .uf::placeholder{color:#b7bcc6;font-weight:500;text-transform:none}
.uform .uf:focus{outline:0;border-bottom-color:var(--ink)}
.uform select.uf{appearance:none;-webkit-appearance:none}
.uform .sechead{background:#eef0f4;border-radius:12px;padding:12px 14px;font-size:18px;font-weight:800;margin:6px 0 18px}
.uform .ghint{margin:-14px 2px 16px;font-size:12.5px;font-weight:700;min-height:15px}

/* ---- select-product screen ---- */
.sortbtn{flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:14px}
.pcard{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:15px;margin-bottom:12px;cursor:pointer}
.pcard .ptop{display:flex;align-items:flex-start;gap:12px}
.pcard .ptop b{flex:1;font-size:17.5px;font-weight:800;overflow-wrap:anywhere}
.pcard .pedit{flex-shrink:0;border:0;background:none;padding:2px;cursor:pointer;color:var(--ink)}
.pcard .pdesc{color:#b7bcc6;font-size:14px;font-weight:600;margin:2px 0 8px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .prow{display:flex;justify-content:space-between;font-size:15px;font-weight:700;padding:3px 0}
.pcard .prow span:first-child{color:var(--ink)}
.pcard .prow span:last-child{font-variant-numeric:tabular-nums}
.pcard .pthumb{width:46px;height:46px;border-radius:10px;object-fit:cover;border:1px solid var(--line);flex-shrink:0}
/* ---- add-product screen ---- */
.phototile{display:flex;justify-content:center;padding:10px 0 4px;border-bottom:1.5px solid var(--line);margin-bottom:20px}
.addimg{width:110px;height:72px;border:0;border-radius:12px;background:var(--ink);color:#fff;font-size:13px;
  font-weight:800;line-height:1.25;letter-spacing:.02em;cursor:pointer}
.phototile img{max-height:150px;max-width:100%;border-radius:12px;border:1px solid var(--line);object-fit:contain;cursor:pointer}
.imgmenu{max-width:340px;margin:-8px auto 18px;background:#fff;border-radius:18px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:12px}
.imgmenu .im{display:block;width:100%;border:0;background:#e3e5ea;border-radius:24px;padding:13px;font-size:17px;
  font-weight:700;margin-bottom:10px;cursor:pointer}
.imgmenu .im:last-child{margin-bottom:0}
.uform textarea.uf{resize:vertical}
.cnt{text-align:right;color:var(--mut);font-size:12.5px;font-weight:650;margin:-14px 2px 16px}
/* ---- round-off row + charge taxable ---- */
.bigcheck{width:24px;height:24px;flex-shrink:0;accent-color:var(--ink)}
.chgtax{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;cursor:pointer}
/* ---- terms library ---- */
.tl-head{text-align:center;font-size:19px;font-weight:800;border-bottom:1px solid var(--line);
  max-width:640px;margin:2px auto 16px;padding-bottom:12px}
.tlrow{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:14px;box-shadow:var(--sh);
  padding:14px;margin-bottom:10px;cursor:pointer}
.tlrow .tx{flex:1;font-size:15px;font-weight:600;white-space:pre-line;overflow-wrap:anywhere}
.tlrow .lx{align-self:center}
/* ---- detail bottom action bar ---- */
.hasbar #detailBody{padding-bottom:96px}
.dbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;box-shadow:0 -3px 16px rgba(0,0,0,.10);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.dbar-in{max-width:640px;margin:0 auto;display:flex}
.dbtn{flex:1;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;font-size:12.5px;font-weight:750;color:var(--ink)}
.dbtn svg{display:block}
.dbtn:disabled{opacity:.4}
.popwrap{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.18)}
.popmenu{position:absolute;right:18px;bottom:calc(86px + env(safe-area-inset-bottom));background:#3d3d41;color:#fff;
  border-radius:16px;padding:8px;min-width:210px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.popmenu .pm{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:#fff;
  font-size:16.5px;font-weight:700;padding:12px 12px;cursor:pointer;border-radius:10px;text-align:left}
.popmenu .pm:active{background:rgba(255,255,255,.12)}
/* theme colour swatches */
.swatch{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;font-size:18px;color:var(--ink)}
.swatch.on{outline:3px solid var(--ink);outline-offset:2px}
/* first-run coach marks — the white "Tap here…" bubbles from the reference app */
.coach{position:absolute;z-index:60;background:#fff;color:var(--ink);font-size:15.5px;font-weight:700;
  padding:12px 18px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.22);white-space:nowrap;
  animation:coachin .25s ease}
.coach:after{content:"";position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.coach.below:after{top:-7px;left:50%;margin-left:-7px}
.coach.above:after{bottom:-7px;left:50%;margin-left:-7px}
.coach.aboveright:after{bottom:-7px;right:26px}
@keyframes coachin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* room under the lists so the red button never sits on the last row */
#scr-products,#scr-customers,#scr-termslib,#scr-selprod,#scr-selcust{padding-bottom:150px}

/* ============================================================
   Stock In-Out additions
   ============================================================ */
/* the header shows the app name as text (no built-in brand logo here) */
.hdr h1{font-size:21px}
/* live-quantity badge on stock rows */
.qbadge{flex-shrink:0;text-align:center;border-radius:12px;padding:7px 11px;min-width:56px}
.qbadge .v{font-size:17px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.qbadge .u{font-size:9px;font-weight:800;opacity:.75;text-transform:uppercase}
.qbadge.ok{background:var(--okbg);color:var(--ok)}
.qbadge.low{background:var(--lowbg);color:var(--low)}
.qbadge.bad{background:var(--badbg);color:var(--bad)}
/* in / out direction dot on entry cards */
.edot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:17px;font-weight:800}
.edot.in{background:var(--okbg);color:var(--ok)}
.edot.out{background:var(--badbg);color:var(--bad)}
.edot.tr{background:#e8edf6;color:#3b5b8f}
/* the eight detail boxes, two to a row like the shop app */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.dgrid .fld{margin-bottom:10px}
.specnote{display:flex;align-items:center;gap:8px;background:#f2f6ff;border:1px solid #d9e4f8;border-radius:12px;
  padding:10px 12px;font-size:13.5px;font-weight:600;color:#33507e;margin-bottom:11px}
.specnote span{flex:1;min-width:0}
.repnote{margin:-4px 2px 12px;color:var(--mut);font-size:12.5px;font-weight:650}
/* dashboard count pills on the entry-type chips */
#dirChips .chip{min-width:64px;text-align:center}
/* room under the stock list so the red button never sits on the last row */
#scr-stock,#scr-selitem{padding-bottom:150px}
/* the [hidden] attribute must beat the grid's own display */
.dgrid[hidden],.specnote[hidden]{display:none}