#qa-fab{position:fixed;bottom:22px;right:22px;z-index:9300;width:56px;height:56px;border-radius:50%;background:var(--brand);color:var(--white);border:none;box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer;display:flex;align-items:center;justify-content:center}
#qa-fab i{font-size:26px}
#qa-fab:active{transform:scale(.94)}
#qa-overlay{position:fixed;inset:0;background:rgba(45,42,37,.45);z-index:9400;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#qa-box{background:var(--surface);width:560px;max-width:96vw;max-height:92vh;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--xl)}
.qa-hd{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.qa-body{padding:12px 16px;overflow-y:auto;flex:1}
.qa-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:6px}
/* The #qa-tiles container now wraps section headings + per-section grids (id beats the class) */
#qa-tiles{display:block}
.qa-sec-hd{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin:15px 0 0}
.qa-sec-hd:first-child{margin-top:4px}
.qa-tile{border:1px solid var(--border2);border-radius:10px;background:var(--bg);padding:10px 9px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:3px;min-height:56px}
.qa-tile:active{background:var(--surface2)}
.qa-mode-ov{position:fixed;inset:0;background:rgba(45,42,37,.5);z-index:9500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.qa-mode-box{background:var(--surface);width:340px;max-width:92vw;border-radius:14px;padding:16px;box-shadow:var(--xl);display:flex;flex-direction:column;gap:9px}
.qa-mode-title{font-size:14px;font-weight:700;color:var(--text)}
.qa-mode-sub{font-size:12px;color:var(--text3);margin-bottom:3px}
.qa-mode-btn{text-align:left;border:1px solid var(--border2);border-radius:10px;background:var(--bg);padding:11px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.qa-mode-btn b{font-size:13px;color:var(--text)}
.qa-mode-btn span{font-size:11px;color:var(--text3)}
.qa-mode-btn:active{background:var(--surface2)}
.qa-mode-primary{border-color:var(--brand-ink);border-width:1.5px}
.qa-mode-cancel{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;padding:4px;margin-top:1px}
.qa-tile .qa-tname{font-size:12px;font-weight:600;color:var(--text);line-height:1.25}
.qa-tile .qa-tprice{font-size:11px;color:var(--text3);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.qa-cart-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--border)}
.qa-step{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:15px;line-height:1;color:var(--text);flex-shrink:0}
.qa-foot{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
@media(max-width:640px){#qa-box{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0}.qa-tiles{grid-template-columns:repeat(auto-fill,minmax(46%,1fr))}}

/* ── Extracted utility classes (from repeated inline styles; pixel-diff verified) ── */
.u1{color:var(--red)}
.u2{font-size:11px;color:var(--text3)}
.u3{font-size:12px;color:var(--text3)}
.u4{flex:1}
.u5{grid-column:1/-1}
.u6{margin-top:16px}
.u7{margin-bottom:10px}
.u8{text-align:center;padding:28px;color:var(--text3)}
.u9{color:var(--text3)}
.u10{font-size:11px;color:var(--text3);margin-top:4px}
.u11{margin-bottom:8px}
.u12{font-size:12px}
.u13{margin:0}
.u14{padding-top:4px}
.u15{font-size:10px;font-weight:700;color:var(--text3)}
.u16{margin-bottom:12px}
.u17{padding:12px 16px;text-align:center}
.u18{font-size:11px;color:var(--text3);margin-bottom:2px}
.u19{text-align:right}
.u20{margin-top:14px}
.u21{align-items:flex-start}
.u22{font-size:11px;color:var(--text3);font-weight:400}
.u23{font-size:11.5px;color:var(--text3);margin-top:6px}
.u24{font-size:12px;color:var(--brand-ink);text-decoration:none}
.u25{margin-bottom:14px}
.u26{flex-shrink:0}
.u27{padding:40px;text-align:center;color:var(--text3)}
.u28{margin-top:8px}
.u29{margin-bottom:0}
.u30{font-size:13px;color:var(--text2);margin-bottom:16px}
.u31{font-size:10px;color:var(--text3)}
.u32{margin:0;font-weight:700;font-size:12px}
.u33{font-weight:700;font-size:12px}
.u34{align-items:flex-start;margin-top:16px}
.u35{font-size:12px;margin-left:8px}
.u36{font-size:11px;color:var(--text3);margin-top:5px}
.u37{font-size:12px;color:var(--green)}
.u38{font-size:10.5px;font-weight:400;color:var(--text3)}
.u39{font-size:11px;color:var(--text3);margin-top:2px}
/* Room for the "$" that sits inside these money boxes. `.modal input` (0,1,1) in
   part-01.css out-specifies a bare `.u40` (0,1,0), so the padding never applied and
   the $ printed on top of the first digit — in all four modal money fields (Dale,
   3 Sep 2026, on the variation one). Scoped copy wins the cascade. */
.u40{padding-left:22px}
.modal .u40{padding-left:22px}
/* Variation amount: which GST basis the typed figure is in. */
.varm-gst{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11px;font-weight:600;
          text-transform:none;letter-spacing:0;color:var(--text2);cursor:pointer}
.varm-gst input{width:auto;margin:0}
.varm-gst-note{margin-top:3px;font-size:11px;color:var(--text3);min-height:14px}
.u41{padding:4px 7px;font-size:11px;border:1px solid var(--border);border-radius:4px;cursor:pointer;white-space:nowrap}
.u42{font-size:10px;font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.u43{margin-top:4px}
.u44{color:var(--warning-text)}   /* plain --orange as text on a light card is 2.62:1 */
.u45{background:var(--red-light)}
.u46{color:var(--brand-ink)}
.u47{font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.u48{padding:18px;cursor:pointer}
.u49{font-size:20px}
.u50{font-weight:700;font-size:15px}
.u51{margin-top:10px;font-size:11px;color:var(--accent)}
.u52{border-top:2px solid var(--border2)}
.u53{font-weight:700}
.u54{padding:0}
.u55{font-size:11px;color:var(--text3);margin-top:6px}
.u56{font-size:13px;color:var(--text3)}
.u57{font-size:12px;font-weight:400;color:var(--text3)}
.u58{margin-top:14px;padding:10px 12px;background:var(--blue-light);border-radius:var(--r-xs);font-size:12px;color:var(--blue)}
.u59{font-weight:400;color:var(--text3);font-size:11px}
.u60{margin:0;font-size:12.5px;cursor:pointer;font-weight:600}
.u61{margin-top:12px}
.u62{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.u63{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.u64{font-size:13px;color:var(--text2);margin:0 0 14px}
.u65{margin-top:2px}
.u66{font-size:13px}
.u67{font-size:11px;color:var(--mushroom)}
.u68{overflow-y:auto;flex:1;padding-right:2px}
.u69{flex-shrink:0;margin-top:14px}
.u70{gap:8px}
.u71{border-radius:4px;flex-shrink:0}
.u72{flex:2}
.u73{cursor:pointer}
.u74{background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;padding:2px 4px;line-height:1}
.u75{background:var(--orange-light)}
.u76{color:var(--text)}
.u77{padding:20px;text-align:center;font-size:12px;color:var(--text3)}
.u78{font-size:13px;font-weight:700}
.u79{color:var(--text2)}
.u80{margin-bottom:16px}
.u81{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg2)}
.u82{flex:0 0 auto}
.u83{padding-top:8px}
.u84{font-family:monospace;font-size:12px;resize:vertical}
.u85{font-size:12.5px;resize:vertical}
.u86{font-size:12px;color:var(--text2)}
.u87{font-size:12px;color:var(--text2);margin-left:12px}
.u88{font-size:12px;font-weight:600;color:var(--text2);margin:0;white-space:nowrap}
.u89{color:var(--text3);font-size:12px}
.u90{margin-top:8px;padding:0 10px}
.u91{font-size:12.5px}
.u92{font-size:11px;padding:4px 4px}
.u93{text-align:right;padding:4px 5px}
.u94{grid-column:6 / 8;padding:5px 10px}
.u95{font-size:11.5px;color:var(--text3)}
.u96{margin-left:auto}
.u97{font-size:11px;color:var(--text3);margin-top:3px}
.u98{text-align:right;margin-bottom:8px}
.u99{font-size:11px;font-weight:600;color:var(--text3)}
.u100{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.u101{font-weight:400;color:var(--text3)}
.u102{resize:vertical}
.u103{font-size:11px}
.u104{font-size:12px;color:var(--text2);margin-bottom:14px}
.u105{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.u106{margin-left:auto;font-weight:600;padding:3px 9px}
.u107{font-size:13px;vertical-align:-2px;margin-right:3px}
.u108{margin-top:10px}
.u109{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text2);padding:0 6px;line-height:1}
.u110{margin-left:6px;font-size:10px}
.u111{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}

/* Quick Add — the "add an item that isn't in the catalogue" tile and its form */
.qa-tile-new{border-style:dashed;background:transparent}
.qa-tile-new .qa-tname{color:var(--text2)}
.qa-tile-new .qa-tprice{color:var(--text3);font-style:italic}
.qa-tile-new:hover{border-color:var(--brand-ink);background:var(--surface)}
.qa-new-box{width:360px}
.qa-new-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.qa-new-in{width:100%;padding:9px 10px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-xs);font-size:13.5px;color:var(--text)}
.qa-new-in:focus{border-color:var(--brand-ink);outline:none}
.qa-new-row{display:grid;grid-template-columns:1fr 96px;gap:9px}
.qa-new-save{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text2);
  margin-top:4px;cursor:pointer;min-height:34px}
.qa-new-save input{width:16px;height:16px;accent-color:var(--brand-ink);flex:0 0 16px}

/* ── PO catalogue picker: search the whole price catalogue (Dale, 3 Sep 2026) ───────────
   The picker used to list charges + materials only; the search covers all four lists, so
   hardware and accessories are reachable here for the first time. */
.pomcat-search{position:relative;margin-bottom:2px}
.pomcat-q{width:100%;padding:10px 32px 10px 11px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-xs);font-size:13.5px;font-family:inherit;color:var(--text)}
.pomcat-q:focus{border-color:var(--brand-ink);outline:none}
.pomcat-qclear{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--text3);font-size:19px;line-height:1;cursor:pointer;padding:4px 7px}
.pomcat-count{font-weight:700;color:var(--text3)}
.pomcat-none{padding:16px 2px;font-size:12.5px;color:var(--text3)}
/* Boards carry a right-click / press-and-hold menu (custom sheet size, machining). The
   corner mark says so without costing the tile a line of text. */
.pomcat-board{position:relative}
.pomcat-board::after{content:'';position:absolute;top:5px;right:5px;width:0;height:0;
  border-top:5px solid var(--border2);border-left:5px solid transparent}

/* The board dialog behind that menu. It is opened FROM the PO modal, which sits at 450
   (.d1ef4hp0), so a plain .modal-overlay at 300 renders BEHIND it and cannot be clicked.
   Above the right-click menu (600) too, since the menu is what opens it. */
#pomat-modal{z-index:620}
.pomat-box{max-width:460px}
.pomat-sizes{display:flex;flex-wrap:wrap;gap:6px;margin:3px 0 7px}
.pomat-size{padding:8px 12px;min-height:36px;font-size:12px;font-family:inherit;border:1px solid var(--border2);
  border-radius:6px;background:var(--bg);color:var(--text2);cursor:pointer}
.pomat-size:hover{border-color:var(--brand-ink);color:var(--text)}
.pomat-size.on{border-color:var(--brand-ink);border-width:1.5px;color:var(--text);font-weight:700}
.pomat-check{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;color:var(--text);
  cursor:pointer;min-height:38px}
.pomat-check input{width:16px;height:16px;accent-color:var(--brand-ink);flex:0 0 16px}
.pomat-rates{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 2px 25px}
.pomat-radio{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;color:var(--text2);
  cursor:pointer;min-height:36px}
.pomat-radio input{width:15px;height:15px;accent-color:var(--brand-ink);flex:0 0 15px}
.pomat-radio span{font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text3)}
.pomat-calc{margin-top:12px;padding:10px 12px;background:var(--bg2);border-radius:var(--r-xs);
  font-size:12.5px;color:var(--text2)}
.pomat-calc .pcrow{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.pomat-calc .pctot{border-top:1px solid var(--border);margin-top:5px;padding-top:6px;font-weight:700;color:var(--text)}
.pomat-calc .pcwarn{color:var(--warning-text);margin-top:5px}
.pomat-calc b{font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.pomat-reset{background:none;border:none;color:var(--brand-ink);font-size:11.5px;font-family:inherit;
  cursor:pointer;padding:3px 0}
@media(max-width:640px){
  .pomat-size{flex:1 0 calc(50% - 3px);min-height:44px}
  .pomat-check,.pomat-radio{min-height:44px}
}

/* A won quote's cost sheet, shown under its scope item on the job. Read-only —
   the record of how the accepted price was reached. */
.si-costs{margin:0 0 8px 22px;padding:9px 11px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px}
.si-costs-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:6px}
.si-costs-sub{text-transform:none;letter-spacing:0;font-weight:400}
.si-costs-load{font-size:12px;color:var(--text3)}
.si-costs-tbl{width:100%;border-collapse:collapse;font-size:12px}
.si-costs-tbl td{padding:3px 0;vertical-align:top;color:var(--text2)}
.si-costs-q{color:var(--text3);white-space:nowrap;padding-left:10px!important}
.si-costs-n{text-align:right;font-family:var(--font-mono,monospace);white-space:nowrap;padding-left:12px!important}
.si-costs-sum td{border-top:1px dashed var(--border2);padding-top:6px!important;color:var(--text)}
.si-costs-tot td{border-top:1px solid var(--border2);padding-top:6px!important;font-weight:700;color:var(--text)}
.si-costs-warn{margin-top:7px;padding:6px 9px;border-radius:6px;background:#fffaf0;border:1px solid #b7791f;color:#8a5a12;font-size:11px;line-height:1.4}
@media(max-width:820px){.si-costs{margin-left:0}.si-costs-q{display:none}}

/* "Priced from a cost sheet" — the 📊 on a quote's scope row lights up once the
   sheet behind it has been filled in, so a typed price and a worked-out one are
   told apart at a glance. */
.jmq-sheet-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Quick Add gets the same catalogue search + board dialog (Dale, 3 Sep 2026) ─────────
   Quick Add stacks much higher than the PO modal: #qa-overlay is 9400 and its board
   popup .qa-mode-ov is 9500, while the right-click menu ships at 600 — so the menu
   opened INSIDE Quick Add rendered underneath it and was invisible. Raised to 9650, the
   level the existing .ndg-act-menu floating menu already uses, still under toasts (9999).
   `body` prefix only for specificity: components.css loads after this file and sets the
   same ids, so a bare #ctx-menu here would lose. */
body #ctx-menu, body #ctx-sheet{z-index:9650}
/* The board dialog is opened FROM that menu, so it sits one step above it. */
#qamat-modal{z-index:9660}