/* Screen styles: Quotes and Materials (design review 2).
   quotes/list, detail, new, prices and materials/*. NOT quotes/print.html (print pages never load these files).
   Loaded on every app page after jeevz.css (core/templates/core/base.html), so every rule is scoped to
   .qbody (the wrapper in quotes/base.html and materials/base.html) or to classes only these pages use.
   Read --jz-* tokens only. Spec: docs/design-review-2.md. Lessons: docs/design-learnings.md "## quotes". */

/* ---------- 0. The page: 20px gutter, big title, one subtitle ---------- */
.body.qbody{padding:var(--jz-s2) 20px var(--jz-s8)}
.qbody{--q-ink:var(--jz-ink);--q-muted:var(--jz-muted);--q-hair:var(--jz-hair);--q-shadow:0 1px 2px rgba(23,33,29,.04),0 4px 16px -8px rgba(23,33,29,.10);--q-r:16px;
  --q-chev:var(--jz-chev)}
.qbody .crumb{min-height:44px;margin:0;padding:0 var(--jz-s3) 0 0;font:600 17px/1.2 var(--jz-sans);gap:2px}
.qbody .crumb::before{content:"";width:10px;height:10px;margin:0 6px 0 3px;border:solid currentColor;border-width:0 0 2.25px 2.25px;transform:rotate(45deg);border-radius:1px}
.qbody h1,.qtitle h1,.qhead h1{margin:0;font:800 34px/40px var(--jz-sans);letter-spacing:-.03em;color:var(--q-ink);overflow-wrap:anywhere}
.qtitle{margin:var(--jz-s2) 0 var(--jz-s6)}
.qsub,.qlead{margin:var(--jz-s2) 0 0;font:400 15px/20px var(--jz-sans);color:var(--q-muted);font-variant-numeric:tabular-nums}
.qmeta{margin:var(--jz-s1) 0 0;font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
.qmeta a{color:var(--jz-forest);font-weight:600;text-decoration:none}
/* title row on list screens: title left, one action right */
.qhead{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s5) 0 var(--jz-s6)}
.qhead.withcrumb{margin-top:var(--jz-s2)}
.qhead>div{min-width:0}
/* the one "new" control on every list screen: a 44px ink circle with a plus (same as Diary's) */
.qplusbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--q-ink);color:#fff;box-shadow:0 6px 16px -8px rgba(23,33,29,.5);transition:transform 120ms}
.qplusbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round}
.qplusbtn:active{transform:scale(.94)}
.qplusbtn:focus-visible{outline:2px solid var(--jz-forest);outline-offset:3px}

/* section header: 13/600 sentence case, 32 above, 8 below, lined up with row text */
.qsec,.qbody h2.qsec{margin:var(--jz-s8) 0 var(--jz-s2);padding:0 16px;font:600 13px/18px var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--q-muted)}
.qfoot{margin:var(--jz-s2) 16px 0;font:400 13px/18px var(--jz-sans);color:var(--q-muted)}

/* ---------- 1. Surfaces: one white card per idea, no borders ---------- */
.qcard,.qlist,.qmore,.qnotice{margin:0;padding:0;background:var(--jz-card);border:0;border-radius:var(--q-r);box-shadow:var(--q-shadow);overflow:hidden}
.qcard.qpad{padding:16px}

/* status as one coloured word, never a pill */
.qst{font-weight:600;color:var(--q-muted)}
.qst.st-ready,.qst.st-issued,.qst.st-ordered{color:var(--jz-forest)}
.qst.st-accepted,.qst.st-collected{color:var(--jz-ok)}
.qst.st-declined{color:var(--jz-red)}
.qst.st-replaced{text-decoration:line-through}

/* ---------- 2. Rows (quotes, materials, merchants) ---------- */
.qlist{display:block}
.qrow2{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 16px;box-sizing:border-box;color:var(--q-ink);text-decoration:none;background:var(--jz-card);transition:background 120ms}
.qrow2+.qrow2::before{content:"";position:absolute;top:0;right:0;left:68px;height:1px;background:var(--q-hair)}
.qlist.noav .qrow2+.qrow2::before{left:16px}
.qlist.tiles .qrow2+.qrow2::before{left:60px}
.qrow2:active{background:var(--jz-soft)}
.qbody .qav{flex:none;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 15px/1 var(--jz-sans);color:var(--q-ink);background:#dff3e8}
.qbody .qav[data-l=B],.qbody .qav[data-l=H],.qbody .qav[data-l=N],.qbody .qav[data-l=T],.qbody .qav[data-l=Z]{background:#dcebf7}
.qbody .qav[data-l=C],.qbody .qav[data-l=I],.qbody .qav[data-l=O],.qbody .qav[data-l=U]{background:#f3ead8}
.qbody .qav[data-l=D],.qbody .qav[data-l=J],.qbody .qav[data-l=P],.qbody .qav[data-l=V]{background:#f7e1e6}
.qbody .qav[data-l=E],.qbody .qav[data-l=K],.qbody .qav[data-l=Q],.qbody .qav[data-l=W]{background:#e8e2f5}
.qbody .qav[data-l=F],.qbody .qav[data-l=L],.qbody .qav[data-l=R],.qbody .qav[data-l=X]{background:#e7e9e4}
.qrow2 .qrb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qrow2 .qrb b{font:600 17px/22px var(--jz-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow2 .qrb small{font:400 15px/20px var(--jz-sans);color:var(--q-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.qrow2 .qrt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.qrow2 .qrt b{font:700 17px/22px var(--jz-sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.qrow2 .qrt .qst{font-size:13px;line-height:18px}
.qrow2.chev::after{content:"";flex:none;width:8px;height:8px;margin-left:2px;border:solid var(--q-chev);border-width:2px 2px 0 0;transform:rotate(45deg)}
.qtile{flex:none;width:32px;height:32px;border-radius:27.5%;display:inline-flex;align-items:center;justify-content:center;background:var(--jz-soft)}
.qtile svg{width:18px;height:18px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.qlist.tiles .qrow2{min-height:56px}

/* the "your details" row opens in place */
details.qrowd{position:relative}
details.qrowd>summary{list-style:none;cursor:pointer}
details.qrowd>summary::-webkit-details-marker{display:none}
details.qrowd>summary::after{transform:rotate(135deg);margin-top:-4px;transition:transform 200ms}
details.qrowd[open]>summary::after{transform:rotate(-45deg);margin-top:4px}
details.qrowd+.qrow2::before,.qrow2+details.qrowd::before{content:"";position:absolute;top:0;right:0;left:60px;height:1px;background:var(--q-hair);z-index:1}
.qrowform{padding:4px 16px 16px}

/* ---------- 3. Fields: quiet filled inputs, not web-form boxes ---------- */
.qbody :is(.qcard,.qrowform,.qnotice) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.qbody :is(.qcard,.qrowform,.qnotice) select,.qbody :is(.qcard,.qrowform) textarea{min-height:52px;padding:14px 16px;border:0;border-radius:12px;background-color:var(--jz-field);box-shadow:inset 0 0 0 1px transparent;font:400 17px/22px var(--jz-sans);color:var(--q-ink);transition:box-shadow 120ms,background-color 120ms}
.qbody :is(.qcard,.qrowform,.qnotice) :is(input,select,textarea):focus{outline:0;background-color:var(--jz-surface);box-shadow:inset 0 0 0 2px var(--jz-forest)}
.qbody :is(.qcard,.qrowform) textarea{resize:none}
.qbody :is(.qcard,.qrowform) .field{gap:8px;margin:0 0 16px;font:600 15px/20px var(--jz-sans);color:var(--q-ink)}
.qbody :is(.qcard,.qrowform) .field:last-of-type{margin-bottom:16px}
.qbody select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b645d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:44px!important}
.qpair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qpair .field{margin-bottom:16px}
.qtext{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;background:none;border:0;font:600 17px/1 var(--jz-sans);color:var(--jz-forest);cursor:pointer}
.qbody .btn{border-radius:999px}
.qbody .btn.ink{min-height:52px;font:600 17px/1 var(--jz-sans)}
.qbody .btn.small{min-height:44px;font:600 15px/1 var(--jz-sans)}
.qbody .btn.ghost{background:var(--jz-field);border:0;color:var(--q-ink);box-shadow:none}
/* segmented choice (radios), Apple style */
.qseg{display:flex;gap:2px;padding:2px;margin:0 0 16px;border:0;border-radius:10px;background:var(--jz-field)}
.qseg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qseg label{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;margin:0;border-radius:8px;font:600 15px/1 var(--jz-sans);color:var(--q-ink);cursor:pointer}
.qseg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.qseg label:has(input:checked){background:var(--jz-surface);box-shadow:0 1px 2px rgba(23,33,29,.10),0 3px 8px -2px rgba(23,33,29,.12)}
.qseg label:has(input:focus-visible){outline:2px solid var(--jz-forest);outline-offset:1px}

/* iOS switch row */
.qswrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin:0;font:400 17px/22px var(--jz-sans);color:var(--q-ink);cursor:pointer}
.qswrow input.switch{width:51px;height:31px}
.qswrow input.switch::after{width:27px;height:27px;top:2px;left:2px}
.qswrow input.switch:checked::after{transform:translateX(20px)}

/* ---------- 4. Quote detail ---------- */
/* the fix-it notice: white, one amber word, the price box right there */
.qnotice{margin:0 0 var(--jz-s6);padding:16px}
.qnotice .needhead{display:flex;align-items:center;gap:12px;margin:0 0 4px;font:600 17px/22px var(--jz-sans);color:var(--q-ink)}
.qnotice .needhead::before{content:"!";flex:none;width:32px;height:32px;border-radius:27.5%;background:var(--jz-amber-soft);color:var(--jz-amber);display:inline-flex;align-items:center;justify-content:center;font:800 17px/1 var(--jz-sans)}
.qnotice .needhead b{font-weight:600}
.qnotice .fixhint{margin:0 0 0 44px;font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
.qnotice .fixrow{position:relative;padding:12px 0 4px 44px}
.qnotice .fixrow+.fixrow{border-top:1px solid var(--q-hair)}
.qnotice .fixwhat{display:flex;flex-direction:column;gap:2px;margin:0 0 8px}
.qnotice .fixwhat b{font:600 17px/22px var(--jz-sans);color:var(--q-ink)}
.qnotice .fixwhat small{font:600 13px/18px var(--jz-sans);color:var(--jz-amber)}
.qnotice .fixgo{display:flex;align-items:center;gap:8px;margin:0}
.qmoney{position:relative;flex:1;min-width:0;display:block}
.qmoney .pound{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:600 17px/1 var(--jz-sans);color:var(--q-muted);pointer-events:none}
.qbody .qmoney input{padding-left:30px!important;font-variant-numeric:tabular-nums;font-weight:600!important}
.qnotice .fixgo .btn{flex:none;min-height:52px;padding:0 20px;margin:0;background:var(--q-ink);color:#fff;border:0}
.qnotice .fixfree{margin:0}
.fixlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the quote: lines, then totals, then the VAT switch, all in one card */
.qcard#quote{position:relative}
.qcardhead{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:4px 16px 0;font:600 13px/18px var(--jz-sans);color:var(--q-muted)}
.qcardhead .qtext{font-size:15px}
.qedit-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qedit-on{display:none}
.qedit-toggle:checked~.qcardhead .qedit-on{display:inline}
.qedit-toggle:checked~.qcardhead .qedit-off{display:none}
.qline{position:relative;display:flex;align-items:center;gap:0;min-height:68px;padding:12px 16px}
.qline+.qline::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--q-hair)}
.qld{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;margin-right:12px}
.qld b{font:600 17px/22px var(--jz-sans);color:var(--q-ink);overflow-wrap:anywhere}
.qld small{font:400 15px/20px var(--jz-sans);color:var(--q-muted);font-variant-numeric:tabular-nums}
.qflag{font:600 13px/18px var(--jz-sans);color:var(--jz-amber);white-space:nowrap}
.qflag::before{content:"\00B7";margin:0 6px 0 2px;color:var(--q-muted)}
.qflag.free{color:var(--jz-forest)}
.qlt{flex:none;font:700 17px/22px var(--jz-sans);letter-spacing:-.01em;color:var(--q-ink);font-variant-numeric:tabular-nums;text-align:right}
/* remove: hidden until Edit, then a red minus at the start of each line (iOS edit mode). Still reachable by keyboard. */
.qrm{flex:none;margin:0;width:0;overflow:hidden;opacity:0;transition:width 200ms,opacity 200ms}
.qrm:focus-within,.qedit-toggle:checked~.qlines .qrm{width:32px;margin-right:12px;opacity:1}
.qrm-btn{display:flex;align-items:center;justify-content:center;width:32px;height:44px;margin:0;padding:0;background:none;border:0;cursor:pointer}
.qrm-btn svg{width:24px;height:24px}
.qrm-btn circle{fill:var(--jz-red)}
.qrm-btn path{fill:none;stroke:#fff;stroke-width:2.25;stroke-linecap:round}
.qnone{margin:0;padding:16px;font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
/* add a line: a quiet row in the card that opens in place */
details.qadd{position:relative;border-top:1px solid var(--q-hair);margin:0 0 0 16px}
details.qadd>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;font:600 17px/22px var(--jz-sans);color:var(--jz-forest)}
details.qadd>summary::-webkit-details-marker{display:none}
.qplus{width:24px;height:24px;border-radius:50%;background:var(--jz-soft);display:inline-flex;align-items:center;justify-content:center}
.qplus svg{width:14px;height:14px;fill:none;stroke:var(--jz-forest);stroke-width:2.5;stroke-linecap:round}
details.qadd[open]>summary .qplus svg{transform:rotate(45deg)}
.qaddform{padding:0 16px 16px 0}
/* totals: subtotal and VAT small and quiet, the total big */
.qtotals{margin:0 0 0 16px;padding:12px 16px 16px 0;border-top:1px solid var(--q-hair)}
.qtot{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;font:400 15px/22px var(--jz-sans);color:var(--q-muted);font-variant-numeric:tabular-nums}
.qtot.qgrand{align-items:baseline;margin-top:8px;color:var(--q-ink);font:600 17px/22px var(--jz-sans)}
.qtot.qgrand span:last-child{font:800 34px/40px var(--jz-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right;min-width:0}
/* VAT: one switch row. The switch is a submit button, so one tap saves it, with or without script. */
.qvat{margin:0 0 0 16px;border-top:1px solid var(--q-hair)}
.qswitch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;margin:0;padding:0 16px 0 0;background:none;border:0;font:400 17px/22px var(--jz-sans);color:var(--q-ink);text-align:left;cursor:pointer}
.qknob{position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:var(--jz-switch-off,#d5dad3);transition:background 200ms}
.qknob::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);transition:transform 200ms}
.qswitch[aria-checked=true] .qknob{background:var(--jz-forest)}
.qswitch[aria-checked=true] .qknob::after{transform:translateX(20px)}
.qswitch:focus-visible{outline:2px solid var(--jz-forest);outline-offset:-2px;border-radius:8px}

/* ready to send: two numbered steps in one card */
.qsteps{list-style:none;margin:0;padding:0;background:var(--jz-card);border-radius:var(--q-r);box-shadow:var(--q-shadow)}
.qsteps li{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 16px}
.qsteps li+li::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--q-hair)}
.qsteps b{font:600 17px/22px var(--jz-sans)}
.qsteps span{font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
.qsteps .qsent{margin:10px 0 0}

/* notes */
.qnotes{margin-bottom:12px!important}
.qnotes textarea{min-height:120px}
.qdetail .talk{margin:0}
.qdetail .talk-btn{min-height:44px;background:var(--jz-soft);color:var(--jz-forest);border:0;font:600 15px/1 var(--jz-sans)}
.qdetail .talk .note{margin:8px 0 0;font:400 13px/18px var(--jz-sans);color:var(--q-muted)}
.qdetail .qsave{display:flex;margin:4px 0 0 auto;min-height:44px;padding:0;background:none;border:0;box-shadow:none;color:var(--jz-forest);font:600 17px/1 var(--jz-sans)}
#notes-form{display:flex;flex-direction:column}
.qdraft{margin-top:12px;min-height:52px}

/* photos */
.qfiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.qfile{position:relative;min-width:0}
.qfile:not(.img){grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--jz-field)}
.qthumb{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--jz-field)}
.qthumb img{display:block;width:100%;height:100%;object-fit:cover}
.qfile form{margin:0}
.qfile.img form{position:absolute;top:4px;right:4px}
.qfx{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px -6px 0 0;padding:0;background:none;border:0;cursor:pointer}
.qfx svg{width:24px;height:24px;padding:4px;box-sizing:border-box;border-radius:50%;background:rgba(23,33,29,.55);fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round}
.qfile:not(.img) .qfx svg{background:rgba(23,33,29,.12);stroke:var(--q-ink)}
.qdoc{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--q-ink);text-decoration:none}
.qdoc b{font:600 17px/22px var(--jz-sans)}
.qdoc small{font:400 15px/20px var(--jz-sans);color:var(--q-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qdoc audio{width:100%;margin-top:6px}
.qattach{margin:0}
.qpick{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;margin:0;cursor:pointer}
.qpick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.qpick-ic{flex:none;width:44px;height:44px;border-radius:27.5%;background:var(--jz-soft);display:inline-flex;align-items:center;justify-content:center}
.qpick-ic svg{width:24px;height:24px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.qpick-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.qpick-t b{font:600 17px/22px var(--jz-sans);color:var(--q-ink)}
.qpick-t small{font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
.qpick-ok{display:none}
.qattach-go{display:none!important;margin-top:12px}
.qattach:has(input[type=file]:valid) .qattach-go{display:flex!important}
.qattach:has(input[type=file]:valid) .qpick-ok{display:block;color:var(--jz-forest);font-weight:600}
.qattach:has(input[type=file]:valid) .qpick-empty{display:none}
/* no :has support: show the button so nothing is stuck */
@supports not selector(:has(*)){.qattach-go{display:flex!important}}

/* more for this quote: one grouped list with chevrons */
.qmore{display:flex;flex-direction:column;margin-top:var(--jz-s8)}
.qmore form{margin:0}
.qmore a,.qmore button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;min-height:52px;margin:0;padding:0 16px;background:none;border:0;border-radius:0;font:400 17px/22px var(--jz-sans);color:var(--q-ink);text-decoration:none;text-align:left;cursor:pointer}
.qmore>*+*::before,.qmore>form+*::before,.qmore>*+form button::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--q-hair)}
.qmore>form{position:relative}
.qmore a::after{content:"";flex:none;width:8px;height:8px;border:solid var(--q-chev);border-width:2px 2px 0 0;transform:rotate(45deg)}
.qmore a:active,.qmore button:active{background:var(--jz-soft)}
.qbody .safe{align-items:flex-start;justify-content:flex-start;margin:var(--jz-s6) 16px 0;font:400 13px/18px var(--jz-sans);text-align:left}
.qbody .safe::before{margin-top:1px}

/* the pinned action: clear paper behind it, 16px air above, nothing under it touched */
.qbody~.dock::before,.qbody .dock::before{inset:-16px -1px calc(-1 * var(--jz-dock-gap) - 8px);background:var(--jz-paper)}
.qbody .dock .btn{min-height:52px;font:600 17px/1 var(--jz-sans);box-shadow:0 8px 24px -12px rgba(48,109,85,.55)}
body:has(.qbody .dock) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 52px + 56px)}

/* ---------- 5. New quote: name first, recent customers as a list ---------- */
.qwho .field{margin:0!important}
.qpicklist{margin:0}
.qpicklist label{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;margin:0;padding:10px 16px;cursor:pointer;font:600 17px/22px var(--jz-sans);color:var(--q-ink)}
.qpicklist label+label::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--q-hair)}
.qpicklist input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.qpicklist .qrb{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qpicklist .qrb small{font:400 15px/20px var(--jz-sans);color:var(--q-muted);font-variant-numeric:tabular-nums}
.qtick{flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.75px rgba(23,33,29,.22);display:inline-flex;align-items:center;justify-content:center}
.qpicklist label:has(input:checked) .qtick{background:var(--jz-forest);box-shadow:none}
.qpicklist label:has(input:checked) .qtick::after{content:"";width:10px;height:5px;margin-top:-3px;border:solid #fff;border-width:0 0 2.25px 2.25px;transform:rotate(-45deg)}
.qpicklist label:has(input:focus-visible){outline:2px solid var(--jz-forest);outline-offset:-2px}
.qbody .qpicklist .qnewav{background:var(--jz-soft)}
.qpicklist .qnewav svg{width:18px;height:18px;fill:none;stroke:var(--jz-forest);stroke-width:2.25;stroke-linecap:round}
details.qall>summary{list-style:none;position:relative;display:flex;align-items:center;min-height:52px;padding:0 16px;cursor:pointer;font:600 17px/22px var(--jz-sans);color:var(--jz-forest)}
details.qall>summary::-webkit-details-marker{display:none}
details.qall>summary::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--q-hair)}
details.qall[open]>summary{display:none}
.qpicklist details.qall>label:first-of-type::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--q-hair)}
/* someone new: the name box shows only when Someone new is picked */
.qvatcard{margin-top:var(--jz-s6);padding:2px 16px}

/* ---------- 6. Price list ---------- */
.plist{display:block}
.plist .pitem{position:relative;background:var(--jz-card)}
.plist .pitem+.pitem::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--q-hair)}
.plist .pitem>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;cursor:pointer}
.plist .pitem>summary::-webkit-details-marker{display:none}
.plist .pitem>summary::after{content:"";flex:none;width:8px;height:8px;border:solid var(--q-chev);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 2px 0 0;transition:transform 200ms}
.plist .pitem[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.plist .pitem>summary:active{background:var(--jz-soft)}
.pname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pname b{font:600 17px/22px var(--jz-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname small{font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
.plist .amt{font:700 17px/22px var(--jz-sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--q-ink)}
.pitem.off .pname b,.pitem.off .amt{color:var(--q-muted)}
.poff{font-weight:600;color:var(--jz-amber)}
.pedit{padding:0 16px 16px}
.pedit .fixgo{display:flex;align-items:center;gap:8px;margin:0}
.pedit .fixgo .btn{flex:none;min-height:52px;padding:0 20px;margin:0;background:var(--q-ink);color:#fff;border:0}
.pedit .acts{display:flex;gap:24px;margin:4px 0 0}
.pedit .acts .btn{min-height:44px;padding:0;background:none;border:0;box-shadow:none;color:var(--jz-forest);font:600 15px/1 var(--jz-sans)}
.pedit .acts .btn.qdel{color:var(--jz-red)}
.qbody .plist input[name=price]{min-height:52px;padding:14px 16px;border:0;border-radius:12px;background:var(--jz-field);font:600 17px/22px var(--jz-sans)}
.qaddprice{padding:16px}

/* ---------- 7. Empty states: no dashed box, a quiet centred block ---------- */
.qempty{display:flex;flex-direction:column;align-items:center;gap:6px;margin:var(--jz-s4) 0 0;padding:32px 24px;text-align:center;background:var(--jz-card);border:0;border-radius:var(--q-r);box-shadow:var(--q-shadow)}
.qempty .qeic{width:56px;height:56px;margin-bottom:8px;border-radius:27.5%;background:var(--jz-soft);display:inline-flex;align-items:center;justify-content:center}
.qempty .qeic svg{width:28px;height:28px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.qempty b{font:700 22px/28px var(--jz-sans);letter-spacing:-.02em;color:var(--q-ink)}
.qempty span{font:400 15px/20px var(--jz-sans);color:var(--q-muted)}

/* ---------- 8. Materials ---------- */
.mitems .qline{min-height:60px}
.qqtybox{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;padding:0 8px;box-sizing:border-box;border-radius:10px;background:var(--jz-field);font:700 15px/1 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--q-ink)}
.mpicklist label{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;margin:0;padding:8px 16px;font:400 17px/22px var(--jz-sans);color:var(--q-ink);cursor:pointer}
.mpicklist label+label::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--q-hair)}
.mpicklist input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.mpicklist label .qtick{order:3;margin-left:auto}
.mpicklist label:has(input:checked) .qtick{background:var(--jz-forest);box-shadow:none}
.mpicklist label:has(input:checked) .qtick::after{content:"";width:10px;height:5px;margin-top:-3px;border:solid #fff;border-width:0 0 2.25px 2.25px;transform:rotate(-45deg)}
.mpicklist label:has(input:focus-visible){outline:2px solid var(--jz-forest);outline-offset:-2px}
.mto .mtoline{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--q-hair)}
.mto .mtoline span{flex:none;font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
.mto .mtoline b{font:600 17px/22px var(--jz-sans);overflow-wrap:anywhere}
.mto textarea.draftbox{min-height:280px}
.mto .acts{display:flex;gap:24px;margin:0}
.mto .acts .btn{min-height:44px;padding:0;background:none;border:0;box-shadow:none;color:var(--jz-forest);font:600 15px/1 var(--jz-sans)}
.qdone{display:flex;align-items:center;gap:10px;margin:var(--jz-s6) 0 0;padding:14px 16px;border-radius:var(--q-r);background:var(--jz-ok-soft);font:600 17px/22px var(--jz-sans);color:var(--jz-ok)}
.qdone::before{content:"";width:10px;height:5px;margin:-4px 4px 0 2px;border:solid currentColor;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.qremove{margin:var(--jz-s8) 0 0}
.qremove .btn{display:flex;width:100%;min-height:52px;background:var(--jz-card);border:0;box-shadow:var(--q-shadow);color:var(--jz-red);font:600 17px/1 var(--jz-sans)}
.qbody .qnote{margin:var(--jz-s3) 16px 0;font:400 13px/18px var(--jz-sans);color:var(--q-muted)}
.qbody .qnote:empty{display:none}
.qbody .alert{margin:0 0 var(--jz-s4)}
.qsec.qfirst{margin-top:0}
.qgroup:not(:has(.qrow2)),.qrest:has(+ .qgroup:not(:has(.qrow2))){display:none}
.qintro{margin:calc(-1 * var(--jz-s4)) 0 var(--jz-s6)}
.qlist.qgap,.qmore.qgap,.qfoot.qgap{margin-top:var(--jz-s8)}
.qcall{color:var(--jz-forest);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.qmore.qflat{margin-top:0}
.qmore .qsentit{font-weight:600;color:var(--jz-forest)}
.qmore>button+button::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--q-hair)}
.mitems .qlines{padding-bottom:4px}
.mld{margin-left:12px}
.qbody #needs-price{background:var(--jz-card);border:0}
.qnotice .fixfree .qtext{font-size:15px}

/* ---------- 9. Pass 3 (31 Oct 2026) ---------- */
/* "Powered by": quiet sentence case at the very foot of the page, never floating mid-screen */
body:has(.qbody) #app{display:flex;flex-direction:column}
body:has(.qbody) #app>.qbody{flex:1 0 auto}
body:has(.qbody) .pwr{margin:0;padding:8px 20px 16px;font:500 13px/18px var(--jz-sans);letter-spacing:0;text-transform:none;color:rgba(23,33,29,.38)}
.qempty .qtext{margin-top:4px;font-size:17px;text-decoration:none}

/* add a price / add a merchant: hidden until the "+" is tapped (#target), no script. Open when there's nothing yet or an error. */
.qaddsheet{display:none;margin:0 0 var(--jz-s8)}
.qaddsheet:target,.qaddsheet.open{display:block}
.qaddsheet:target{animation:qsheet 220ms ease-out}
@keyframes qsheet{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qaddsheet:target{animation:none}}
.qsheethead{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0 0 8px;padding:0 4px 0 16px}
.qsheethead h2{margin:0;font:700 22px/28px var(--jz-sans);letter-spacing:-.02em;color:var(--q-ink);text-transform:none}
.qsheethead .qtext{font-size:17px;text-decoration:none}
.qaddsheet .btn.ink{margin-top:4px}

/* new quote: "Someone new" is the last row; its name box opens as a full row lined up with the names */
.qpicklist details.qall+.qnewrow::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--q-hair)}
.qbody .qnewname{display:none;position:relative;padding:0 16px 0 68px}
.qwhoform:has(.qnewrow input:checked) .qnewname{display:block}
.qpicklist .qnewname label{display:block;min-height:0;margin:0;padding:0}
.qbody .qpicklist .qnewname input[name=customer_name]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){display:block;width:100%;min-height:52px;margin:0 0 8px;padding:0 0 0 0;border:0;border-bottom:2px solid var(--jz-forest);border-radius:0;background:transparent;box-shadow:none;font:400 17px/22px var(--jz-sans);color:var(--q-ink)}
.qbody .qpicklist .qnewname input[name=customer_name]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus{background:transparent;box-shadow:none;outline:0}
.qbody .qpicklist .qnewname input::placeholder{color:rgba(23,33,29,.38)}

/* Start quote waits for a pick */
.qwhoform:not(:has(input[name=contact]:checked)) .dock .btn{pointer-events:none}

/* notes card: text box, then Talk and Save on one line, then Draft, then the "How this works" fold */
.qnotescard{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.qnotescard>#notes-form,.qnotescard .talk{display:contents}
.qnotescard .qnotes{order:1;flex:1 0 100%;margin:0 0 12px!important}
.qnotescard .talk-btn{order:2;flex:none;padding:0 18px}
.qnotescard .talk-live{order:3;flex:1 0 100%;margin:8px 0 0;font:600 15px/20px var(--jz-sans);color:var(--jz-forest)}
.qnotescard .talk-fallback{order:4;flex:1 0 100%}
.qnotescard .qsave{order:5;margin:0 0 0 auto!important}
.qnotescard .qdraftform{order:6;flex:1 0 100%;margin:0}
.qnotescard details.qhow{order:7}
.qnotescard .talk-words{order:8;display:none;flex:1 0 100%;margin:0!important;padding:0 0 4px;font:400 15px/20px var(--jz-sans)!important;color:var(--q-muted)}
.qnotescard:has(details.qhow[open]) .talk-words{display:block}
details.qhow{flex:1 0 100%;margin:16px -16px 0;padding:0 16px;border-top:1px solid var(--q-hair)}
details.qhow>summary{list-style:none;position:relative;display:flex;align-items:center;min-height:56px;padding:8px 24px 0 0;cursor:pointer}
details.qhow>summary::-webkit-details-marker{display:none}
details.qhow>summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-2px;border:solid var(--q-chev);border-width:0 2px 2px 0;transform:translateY(-50%) rotate(45deg);transition:transform 200ms}
details.qhow[open]>summary::after{transform:translateY(-20%) rotate(225deg)}
.qhow-t{display:flex;flex-direction:column;gap:2px}
.qhow-t b{font:600 15px/20px var(--jz-sans);color:var(--jz-forest)}
.qhow-t small{font:400 13px/18px var(--jz-sans);color:var(--q-muted)}
.qhow-p{margin:8px 0 12px;font:400 15px/20px var(--jz-sans);color:var(--q-muted)}
.qdetail .qdraft{margin-top:12px}
.qbody .qnotescard .btn.talk-btn{flex:none;width:auto;min-height:44px;padding:0 18px;margin:0;border-radius:999px;background:var(--jz-soft);color:var(--jz-forest)}
.qbody .qnotescard .btn.ghost.qsave{flex:none;width:auto;min-height:44px;padding:0 4px;background:none;color:var(--jz-forest);font:600 17px/1 var(--jz-sans)}
.qbody .qnotescard .btn.qdraft{width:100%}
.qaddsheet{scroll-margin-top:72px}
.qbody .qcard.qpad>.field:last-child,.qbody .qcard.qpad>.qseg:last-child{margin-bottom:0}
details.qhow[open]{padding-bottom:4px}
.qbody .safe{display:flex;gap:8px;padding:0}
.qbody .safe::before{flex:none;margin:2px 0 0;vertical-align:0}
.mlists .qrow2 .qrb small+small{font-size:15px}

/* ---------- 10. Pass 4 (31 Oct 2026): every form is rows, no grey boxes ---------- */
/* list rows: the second line wraps, never "Downlig..." */
.qrow2 .qrb small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* rows that sit inside a card already (Add a line, Your details, Order details): flat, no second card */
#app .qbody .jz-group.qrows{margin:0 0 16px;background:transparent;border-radius:0;box-shadow:none;overflow:visible}
#app .qbody .qrowform .jz-group.qrows{margin:0 -16px 16px}
#app .qbody .qaddform .jz-group.qrows{margin:0 -16px 16px -16px}
#app .qbody .qaddform{padding:0 16px 16px 0}
#app .qbody .jz-group.qrows>:first-child::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--jz-chev);opacity:.5}
/* the segmented choice sits in its own row */
#app .qbody .jz-row.qsegrow{cursor:default;padding-top:8px;padding-bottom:8px}
#app .qbody .jz-row.qsegrow:active,#app .qbody .jz-row.qsegrow:focus-within{background:transparent}
#app .qbody .qsegrow .qseg{flex:1;position:relative;margin:0;padding:2px;min-width:0}
#app .qbody .qsegrow .k+.qseg{flex:0 1 220px;margin-left:auto}
#app .qbody .qsegrow .qseg label{min-height:36px}
/* forms in a sheet: the group, then the button */
#app .qbody .qaddprice{margin:0}
#app .qbody .qaddprice>.jz-group{margin:0 0 16px}
#app .qbody .qaddprice>.btn{margin:0}
/* notes: a borderless box with its question above it */
#app .qbody .qnotescard .jz-area.qnotes{padding:0 0 4px;margin:0 0 12px!important;border-bottom:.5px solid rgba(23,33,29,.14)}
#app .qbody .qnotescard .jz-area.qnotes textarea{min-height:72px}
/* order email: To, Subject, Message as rows; Save and Copy on the last row */
#app .qbody .mto .mtoline{margin:0;padding:0 16px;border:0;cursor:default;align-items:center}
#app .qbody .mto .mtoline:active{background:transparent}
#app .qbody .mto .mtoline .k{color:var(--jz-muted)}
#app .qbody .mto .mtoline b{flex:1;min-width:0;text-align:right;font:400 17px/22px var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
#app .qbody .mto textarea.draftbox{min-height:240px}
#app .qbody .mto .acts{position:relative;padding:4px 16px}
#app .qbody .mto>.qnote{margin:0;padding:0 16px 12px}
/* the price fixes (Needs a price, change a price): a white box with a thin line, not a grey slab */
.qbody :is(.pedit,.qnotice) .qmoney input:not([type=hidden]){background-color:#fff!important;box-shadow:inset 0 0 0 1px rgba(23,33,29,.16)!important}
.qbody :is(.pedit,.qnotice) .qmoney input:not([type=hidden]):focus{box-shadow:inset 0 0 0 2px var(--jz-forest)!important}
#app .qbody .qaddprice{padding:0}
#app .qbody .qsheethead{padding:0}
/* text actions sit at the left, sized to their words (Switch off / Delete, Save my changes / Copy) */
#app .qbody :is(.pedit,.mto) .acts{justify-content:flex-start}
#app .qbody :is(.pedit,.mto) .acts .btn{flex:none;width:auto}
#app .qbody .qrowform>.note{margin:12px 0 0;padding:0}
#app .qbody .pedit .acts{margin:4px 0 -8px}

/* ---------- 11. Pass 5 (1 Nov 2026, art director round) ---------- */
/* status sits after the number with its own dot, no "·" before it (one dot per status, app-wide) */
.qdetail .jz-sub .qst{margin-left:8px}
/* every card leaves 24px under it, like .jz-group, so the shared footnote (.safe, -8px) lands 16px below, never on it */
.qbody :is(.qcard,.qlist,.qmore,.qsteps){margin-bottom:var(--jz-s6)}
.qbody .qfoot{margin:calc(-1 * var(--jz-s4)) 0 var(--jz-s6);padding:0 16px}
.qbody .qfoot.qgap{margin-top:var(--jz-s8)}
/* link rows under a quote: a 32px icon tile, the words, a chevron (same row as Quotes > Tools) */
.qbody .qmore :is(a,button){justify-content:flex-start;min-height:56px;gap:12px}
.qbody .qmore .qmt{flex:1;min-width:0}
.qbody .qmore>*+*::before,.qbody .qmore>form+*::before,.qbody .qmore>*+form button::before,.qbody .qmore>button+button::before{left:60px}
.qbody .qmore button::after{content:none}
/* photo row: the size rule is its second line, wrapped, not a loose grey note under the card */
.qdetail .jz-file.qpick .jz-file-t small{white-space:normal;overflow:visible}
.qdetail .qcard.qpad:has(>.qattach:only-child){padding:0}
.qdetail .qcard.qpad:has(>.qattach:only-child) .jz-file{margin:0;box-shadow:none;border-radius:0;padding:12px 16px}
/* materials home: "Lists" and "Merchants" are sections; the empty state sits under its header */
.qbody .qsec+.qempty{margin-top:0}
/* quote rows: the same two-letter avatar as the customer picker and Money; status after the number with its own dot */
#app .qrow2>.avt{flex:none;width:40px;height:40px;font-size:15px}
#app .qrow2 .qrb small .qst{margin-left:8px}
#app .qdetail .jz-file .jz-file-t small{white-space:normal;overflow:visible;text-overflow:clip}
/* the photo row is the card: icon 16px in, like every other row */
#app .qdetail .qcard.qpad:has(>.qattach:only-child) .jz-file{margin:0;padding:12px 16px;box-shadow:none;border-radius:0}
/* scroll room under a pinned button: the page's own 32px + the last block's 24px + this = Dock (52 + 2x12) + 16px clear */
body:has(.qbody .dock) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 36px)}

/* ---------- 11. Pass 6 (1 Nov 2026, art director round) ---------- */
/* status colour only where the trader has something to wait on or act on: Sent amber, Accepted green, Declined red, Draft a hollow ring */
#app .qbody .qst.st-issued{color:var(--jz-amber)}
#app .qbody .qst.st-accepted{color:var(--jz-ok)}
/* materials: one second line, status first, so its dot sits flush left and the gap goes after it */
#app .mlists .qrow2 .qrb small .qst{margin:0 8px 0 0}

/* quote detail: "From the visit" is one group of rows (notes, photos), the same anatomy as the actions group under it */
.qvisit{position:relative;margin:0 0 var(--jz-s6);background:var(--jz-card);border-radius:var(--q-r);box-shadow:var(--q-shadow);overflow:hidden}
.qvisit>*{position:relative}
.qvisit>*+*::before{content:"";position:absolute;top:0;left:60px;right:0;height:.5px;background:var(--jz-chev);opacity:.5;z-index:3}
.qnotesd>summary{list-style:none}
.qnotesd>summary::-webkit-details-marker{display:none}
.qvrow{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 40px 10px 16px;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qvrow:active{background:var(--jz-field)}
.qvrow::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--q-chev);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform 200ms}
.qnotesd[open]>.qvrow::after{margin-top:-2px;transform:rotate(225deg)}
.qvt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qvt b{font:400 17px/22px var(--jz-sans);color:var(--q-ink)}
.qvt small{font:400 15px/20px var(--jz-sans);color:var(--q-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qnotesd[open] .qvt small{display:none}
#app .qvisit .qnotescard{padding:0 16px 16px}
#app .qbody .qvisit .qnotescard .jz-area.qnotes{padding:0 0 4px}
#app .qbody .qvisit .qnotescard .jz-area.qnotes>.k{display:none}
#app .qvisit .qnotescard .talk-words{display:block;order:8;margin:12px 0 0!important;font:400 13px/18px var(--jz-sans)!important;color:var(--q-muted)}
#app .qvisit .qnotescard .qdraftform{margin-top:12px}
/* the photo row: same 32px tile and 16px inset as the notes row above it */
#app .qvisit .jz-file{min-height:64px;margin:0;padding:10px 16px;border-radius:0;box-shadow:none;background:none}
#app .qvisit .jz-file:active{background:var(--jz-field)}
#app .qvisit .jz-file .jz-file-ic{width:32px;height:32px;border-radius:27.5%}
#app .qvisit .jz-file .jz-file-ic svg{width:18px;height:18px}
#app .qvisit .jz-file .jz-file-t b{font-weight:400}
#app#app .qvisit .jz-file .jz-file-t small{white-space:normal;overflow:visible;text-overflow:clip;-webkit-mask-image:none;mask-image:none}
#app .qvisit .jz-file:focus-within{outline-offset:-2px}
#app .qvisit .qattach-go{margin:0 16px 16px;width:calc(100% - 32px)}
#app .qvisit .qfiles{margin:0;padding:12px 16px}
/* the pinned button: the page fades into it over 24px, so whatever sits under it reads as "more below", not a cut */
#app .qbody .dock::before{content:"";position:absolute;left:0;right:0;top:-32px;bottom:auto;height:32px;inset:auto 0 100% 0;background:linear-gradient(to bottom,color-mix(in srgb,var(--jz-paper) 0%,transparent),var(--jz-paper) 85%);pointer-events:none}

/* new quote: "Someone new" keeps the shared radio tick, the same last row as New invoice and New booking (judge J2) */
#app .qbody .dock{box-shadow:none}
/* materials list rows: one second line. Status leads so it is never cut; only the merchant's tail can fade off */
#app .mlists .qrow2 .qrb small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the photo row is a row like the others: chevron on the right */
#app .qvisit .jz-file{padding-right:40px}
#app .qvisit .jz-file::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-4px;border:solid var(--q-chev);border-width:2px 2px 0 0;transform:rotate(45deg)}
/* scroll room: the 32px fade above the pinned button also needs clearing, so the last line never sits in it */
body:has(.qbody .dock) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 60px)}
#app .qbody .qvisit .qnotescard .btn.qdraft{margin:0}

/* Walk 1 Nov: after "Add to price list" the page lands on the new row (#item-N); tint it so the eye finds it. */
.plist .pitem:target{scroll-margin-top:96px;animation:qadded 2400ms ease-out}
@keyframes qadded{0%,40%{background:var(--jz-soft)}100%{background:var(--jz-card)}}
@media (prefers-reduced-motion:reduce){.plist .pitem:target{animation:none}}

/* Art-director pass 4 (1 Nov): one money style, one status dot, merchant on its own line */
#app .qtot.qgrand span:last-child{font-size:34px;line-height:40px}
#app .qtot.qgrand .p{font:700 .55em/1 var(--jz-sans);letter-spacing:-.02em;color:inherit}
#app#app :is(.qst,.m-st).st-draft::before{background:currentColor;box-shadow:none}
#app .mlists .qrow2 .qrb small.mmer{display:block;margin-top:0;font:400 15px/20px var(--jz-sans);color:var(--q-muted);white-space:normal;overflow:visible;overflow-wrap:anywhere}
#app#app .qbody .dock>.safe{margin:0 0 var(--jz-s2);padding:0 var(--jz-s4)}
#app .pname b{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:pretty}

/* Judge 1 (1 Nov): price list names get the row's whole width. At 390px a name beside the price had ~220px and
   "Find and fix a tripping circuit" (~245px) broke onto two lines; now the name runs across the top line and the
   price sits in a fixed right-hand column on the second line, beside "Each · Labour", with the chevron centred. */
#app .plist .pitem>summary{display:grid;grid-template-columns:minmax(0,1fr) 88px 10px;column-gap:12px;row-gap:2px;align-items:baseline}
#app .plist .pname{display:contents}
#app .plist .pname b{grid-column:1/3;grid-row:1}
#app .plist .pname small{grid-column:1;grid-row:2}
#app .plist .amt{grid-column:2;grid-row:2;text-align:right;white-space:nowrap}
#app .plist .pitem>summary::after{grid-column:3;grid-row:1/3;align-self:center}
/* Judge 2 (1 Nov): one detail anatomy with invoices. Customer name 28/700, "Q-0010 · Accepted 1 Nov" 15 muted under it. */
#app .qdetail .qtitle h1{font:700 28px/34px var(--jz-sans);letter-spacing:-.02em}
#app .qdetail .qtitle .jz-sub{margin-top:4px}

/* ======================================================================================================================
   6 Nov rebuild: Quotes, a quote, the price list and Materials (quotes/ and materials/ templates, not print.html), in
   both looks. Scoped to .qn (quotes/base.html, materials/base.html). Built from the shared parts in jeevz.css: the
   hero number, stage chips, rows with status chips, cards (28px, a 1.5px edge, one shadow), Cabinet money. Every
   colour is a role token, so nothing here differs by look.
   ====================================================================================================================== */
#app .qn{--q-hair:var(--jz-hair);--q-r:var(--jz-r-card);--q-shadow:var(--jz-shadow);--q-muted:var(--jz-ink-2);padding:0 var(--jz-gutter) var(--jz-s8)}
#app .qn :is(.qsec,h2.qsec){margin:var(--jz-s7) var(--jz-s1) var(--jz-s3);padding:0;font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app .qn .qsec.qfirst{margin-top:var(--jz-s5)}
#app .qn :is(.qcard,.qlist,.qmore,.qnotice){border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .qn .jz-list.qlist{margin:0}
/* the hero and the stage chips */
#app .qn .qn-hero{margin:0 0 var(--jz-s5)}
#app .qn .qn-hero .jz-hero{margin:0}
#app .qn .qn-hero-s{margin:8px 0 0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .qn-hero-s b{color:var(--jz-ink);font-weight:600}
#app .qn .jz-stages{margin:0 0 var(--jz-s2)}
/* a quote row: avatar, the customer, the number and a status chip, the total */
#app .qn .qn-row{background:none;min-height:84px;padding:14px 18px;gap:14px}
#app .qn .qn-row+.qn-row::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .qn .qn-row>.avt{width:48px;height:48px;font:700 17px/1 var(--jz-display)}
#app .qn .qn-row .jz-li-t small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
#app .qn .qn-row .jz-chip{min-height:28px;padding:0 10px 0 8px;font-size:var(--jz-t-meta);gap:5px}
#app .qn .qn-row .jz-chip .jz-ic{width:15px;height:15px}
#app .qn .qn-row .jz-li-v{font-size:22px}
#app .qn .qn-row .jz-li-v small{font-size:.6em;letter-spacing:-.01em}
#app .qn .qn-row::after{content:none}
/* tool rows (Price list, Materials orders, Your details, a merchant) */
#app .qn .qlist.tiles .qrow2,#app .qn .qlist>.qrow2:not(.qn-row){min-height:var(--jz-row);padding:12px 18px;gap:14px;background:none}
#app .qn .qrow2+.qrow2::before,#app .qn details.qrowd+.qrow2::before,#app .qn .qrow2+details.qrowd::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .qn .qrow2:active{background:var(--jz-press)}
#app .qn .qtile{width:44px;height:44px;border-radius:50%;background:var(--jz-surface-2)}
#app .qn .qtile svg{width:22px;height:22px;stroke:var(--jz-ink);stroke-width:2}
#app .qn .qrow2 .qrb b{font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}
#app .qn .qrow2 .qrb small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .qav{width:48px;height:48px;border-radius:50%;font:700 18px/1 var(--jz-display)}
/* a quote: the money card first (the document, so pence show) */
#app .qn .qtitle .jz-sub:has(#quote-status){display:none}
#app .qn .qn-doc{margin:0 0 14px}
#app .qn .qn-doc-l{margin:16px 0 0;font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .qn .qn-doc-n{margin:8px 0 6px;font-size:56px;color:var(--jz-ink)}
#app .qn .qn-doc-n small{font-size:.5em;letter-spacing:-.02em}
#app .qn .qn-need{color:var(--jz-late);font-weight:600}
#app .qn .qst{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-ink)}
#app .qn .qst.st-ready,#app .qn .qst.st-ordered{background:var(--jz-info-soft);color:var(--jz-info)}
#app .qn .qst:is(.st-accepted,.st-collected){background:var(--jz-wash);color:var(--jz-forest)}
#app .qn .qst.st-declined{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
#app .qn .qrb small .qst{margin-right:8px}
/* needs a price: a late card, the amber edge and words */
#app .qn .qnotice{position:relative;padding:18px 18px 18px calc(18px + var(--jz-late-bar));margin:0 0 14px}
#app .qn .qnotice::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:var(--jz-late-bar);border-radius:0 var(--jz-r-s) var(--jz-r-s) 0;background:var(--jz-late-edge)}
#app .qn .qnotice::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--jz-band);background:var(--jz-late-fill)}
#app .qn .qnotice .needhead b{font:700 var(--jz-t-card)/1.15 var(--jz-display);letter-spacing:-.015em;color:var(--jz-ink)}
#app .qn .qnotice .fixwhat b{font:600 18px/1.25 var(--jz-sans)}
#app .qn .qnotice .fixwhat small{font:600 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-late)}
/* what's in it: lines, the VAT switch, the totals in a quiet well */
#app .qn .qcardhead{min-height:60px;padding:6px 18px 0;font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app .qn .qcardhead .qtext{font:600 17px/1 var(--jz-sans);color:var(--jz-forest)}
#app .qn .qline{min-height:72px;padding:12px 18px}
#app .qn .qline+.qline::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .qn .qld b{font:600 18px/1.25 var(--jz-sans);color:var(--jz-ink)}
#app .qn .qld small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .qlt{font:700 20px/1.1 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink)}
#app .qn .qflag{color:var(--jz-late);font-weight:600}
#app .qn .qflag::before{background:var(--jz-late-fill)}
#app .qn .qflag.free{color:var(--jz-forest)}
#app .qn details.qadd>summary{min-height:60px;padding:0 18px;font:600 18px/1 var(--jz-sans);color:var(--jz-forest)}
#app .qn .qplus{width:36px;height:36px;border-radius:50%;background:var(--jz-wash)}
#app .qn .qplus svg{stroke:var(--jz-forest)}
#app .qn .qvat{border-top:1.5px solid var(--jz-hair)}
#app .qn .qswitch{min-height:64px;padding:0 18px;font:600 18px/1.25 var(--jz-sans);color:var(--jz-ink)}
#app .qn .qtotals{margin:4px 10px 10px;padding:12px 14px;border:0;border-radius:var(--jz-r-inner);background:var(--jz-surface-2)}
#app .qn .qtot{font:500 var(--jz-t-meta)/1.5 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .qtot.qgrand{padding-top:10px;border-top:1.5px solid var(--jz-hair);font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .qn .qtot.qgrand span:last-child{font:800 34px/1 var(--jz-display);letter-spacing:var(--jz-track-num)}
/* how to send, from the visit, and the more list */
#app .qn .qsteps li{padding:14px 18px}
#app .qn .qsteps b{font:600 18px/1.25 var(--jz-sans)}
#app .qn .qsteps span{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .qvrow{min-height:var(--jz-row);padding:12px 18px}
#app .qn .qvt b{font:600 18px/1.25 var(--jz-sans)}
#app .qn .qvt small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .qmore a,#app .qn .qmore button{min-height:var(--jz-row);gap:14px;padding:10px 18px;font:600 18px/1.25 var(--jz-sans);justify-content:flex-start}
#app .qn .qmore .qmt{flex:1}
#app .qn .qmore>*+*::before,#app .qn .qmore>form+*::before,#app .qn .qmore>*+form button::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .qn .qmore{margin-top:var(--jz-s6)}
/* forms inside cards: quiet wells, a forest ring on focus */
#app .qn .btn.ink{min-height:var(--jz-btn);border-radius:var(--jz-r-btn);background:var(--jz-forest);color:var(--jz-on-forest);font:600 18px/1 var(--jz-sans)}
#app .qn .btn.small{min-height:48px;border-radius:var(--jz-r-btn);font:600 16px/1 var(--jz-sans)}
#app .qn .btn.ghost{background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring)}
#app .qn .btn.danger{border-radius:var(--jz-r-btn)}
#app .qn .qseg label:has(input:checked){background:var(--jz-surface);color:var(--jz-ink);box-shadow:inset 0 0 0 2px var(--jz-forest)}
#app .qn .qmoney input{font:800 26px/1 var(--jz-display)}
/* the price list: each price a row, the money in Cabinet; the add sheet a card */
#app .qn .plist .pitem>summary{min-height:72px;padding:12px 18px}
#app .qn .plist .pitem+.pitem::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .qn .pname b{font:600 18px/1.25 var(--jz-sans);white-space:normal}
#app .qn .pname small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .plist .amt{font:800 22px/1 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink)}
#app .qn .poff{color:var(--jz-late);font-weight:600}
#app .qn .qaddsheet{border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .qn .qsheethead h2{font:700 var(--jz-t-h2)/1.1 var(--jz-display);color:var(--jz-ink)}
#app .qn .qn-pricehero{margin:0 0 var(--jz-s5)}
#app .qn .qn-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
/* Materials: lists as rows with a status chip; items with the count in a box */
#app .qn .qqtybox{min-width:48px;height:48px;border-radius:var(--jz-r-s);background:var(--jz-surface-2);font:800 20px/1 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink)}
#app .qn .mitems .qline{gap:14px}
#app .qn .mld b{font:600 18px/1.25 var(--jz-sans)}
#app .qn .mlists .qrow2 .qrb small{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#app .qn .mlists .qrow2 small.mmer{display:block}
#app .qn .qn-mhero{margin:0 0 var(--jz-s5)}
#app .qn .qdone{font:600 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-forest)}
#app .qn .mto .mtoline b{font:600 17px/1.3 var(--jz-sans)}
#app .qn .qfoot{margin:var(--jz-s3) var(--jz-s1) 0;padding:0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .jz-lock{margin:var(--jz-s6) 0 0}
#app .qn .alert:not(.success):not(.info){padding:14px 16px;border:0;border-radius:var(--jz-r-inner);background:var(--jz-late-soft);color:var(--jz-ink);font:500 var(--jz-t-meta)/1.4 var(--jz-sans)}
#app .qn .qn-mdoc .qn-doc-n small{font:700 22px/1 var(--jz-display);letter-spacing:-.01em}
#app .qn .qn-mdoc+.mitems{margin-top:0}
#app .qn header.is-detail:has(+ .qn-mdoc) .jz-sub,#app .qn header.is-detail:has(+ .alert + .qn-mdoc) .jz-sub{display:none}

/* ===================== Q7c (6 Nov): price list and materials heroes, both looks =====================
   Price list: the count, then the spread (every price you use as a dot on one line, cheapest to dearest: labour
   forest, materials info blue), then the kind chips. Materials: the count, then where every list is, as stage chips. */
#app .qn .qn-pricehero,#app .qn .qn-mhero{margin:0 0 var(--jz-s5);padding:var(--jz-s5)}
#app .qn .qn-spread{margin:var(--jz-s4) 0 0;padding:var(--jz-s4) 0 0;box-shadow:inset 0 1.5px 0 var(--jz-hair)}
#app .qn .qn-spread-l{margin:0 0 14px;font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .qn .qn-spread-line{position:relative;height:20px;margin:0 9px}
#app .qn .qn-spread-line::before{content:"";position:absolute;left:-9px;right:-9px;top:50%;height:6px;margin-top:-3px;border-radius:var(--jz-r-full);background:var(--jz-ring-track)}
#app .qn .qn-spread-line i{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--jz-forest);box-shadow:0 0 0 3px var(--jz-surface)}
#app .qn .qn-spread-line i.is-material{background:var(--jz-info)}
#app .qn .qn-spread-ends{display:flex;justify-content:space-between;margin:8px 0 0;font:600 var(--jz-t-label)/1 var(--jz-sans);color:var(--jz-ink-2);font-variant-numeric:tabular-nums}
#app .qn .qn-pricehero .qn-kinds{margin-top:var(--jz-s4)}
#app .qn .qn-mhero .jz-stages{margin:var(--jz-s4) 0 0;padding:var(--jz-s4) 0 0;box-shadow:inset 0 1.5px 0 var(--jz-hair)}
#app .qn .qn-mhero .jz-stage{min-height:0}
#app .qn .qn-mhero .jz-stage-c{width:52px;height:52px;background:var(--jz-surface-2);box-shadow:none;font-size:24px}
#app .qn .qn-mhero .jz-stage.is-on .jz-stage-c{background:var(--jz-surface);box-shadow:inset 0 0 0 2.5px var(--jz-ink)}
#app .qn .qn-mhero .jz-stage.is-paid .jz-stage-c{background:var(--jz-done)}
#app .qn .qn-mhero .jz-stage.is-zero .jz-stage-c{background:transparent;box-shadow:inset 0 0 0 1.5px var(--jz-chev)}

/* NOW #5: part quantities. The hint under How many / Unit. */
.qaddform .qhint{margin:-6px 0 14px;font:400 13px/18px var(--jz-sans);color:var(--q-muted)}

/* Polish (8 Nov): "From the visit" wears the same 44px round icon as the notes row and the More list under it. The
   photo row had the old 32px mint square. Same 18px inset, same hairline, same title weight as every other row. */
#app .qn .qvisit .jz-file{min-height:var(--jz-row);padding:12px 40px 12px 18px;gap:14px}
#app .qn .qvisit .jz-file .jz-file-ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--jz-surface-2);color:var(--jz-ink)}
#app .qn .qvisit .jz-file .jz-file-ic svg{width:22px;height:22px;fill:none;stroke:var(--jz-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#app .qn .qvisit .jz-file .jz-file-t b{font:600 18px/1.25 var(--jz-sans);color:var(--jz-ink)}
#app#app .qn .qvisit .jz-file .jz-file-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .qn .qvisit .qvrow{gap:14px}
#app .qn .qvisit>*+*::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair);opacity:1}