/* ===== Al Amoud Carpentry & Mukhtiar Wood Furnitures — app shell =========
   Build v2 (2026-09-06). The SHELL is the East Area Carpentry rebuild — the
   same physical rules, because the same requirement applies here: an older
   joiner who reads very little must run this alone. Every tap target >= 52px,
   primary buttons 60px, body text 16.5px and never below 13px, one loud
   button per screen.

   What is Al Amoud's and not East Area's: the real logo, the real business
   facts, and this palette — the client's own two colours, nothing invented.

   PALETTE — measured with a WCAG relative-luminance calculation, not
   eyeballed. Contrast is quoted against the cream paper #FBF7F1.

     maroon    #351214  15.77:1  ink, chrome, document masthead (their logo
                                 mark colour)
     terra     #84481F   6.72:1  the accent, and the useful finding of this
                                 build: UNLIKE East Area's honey, terracotta
                                 clears AA both ways — 6.72:1 as text on
                                 paper AND 7.17:1 with white text on it. So
                                 there is no fill/text split here; one token
                                 does both jobs, and white is the colour that
                                 sits on it (--on-accent), never dark ink,
                                 which would be 2.35:1 and unreadable.
     sage      #2F6B4F   5.90:1  done / paid / approved
     alert     #B3261E   6.12:1  late, blocked, money overdue. Deliberately a
                                 RED and not the old clay: with terracotta
                                 promoted to the primary accent, a warning in
                                 the same hue family stops reading as a
                                 warning at all.
     warn      #8A5A12   5.54:1  part-paid — carried over from the first Al
                                 Amoud build, where it was already chosen to
                                 sit apart from the product family's colours.
     ink       #2A211D  14.75:1  body text
     ink-muted #6E5A50   6.07:1  secondary text
     ink-faint #877063   4.35:1  captions. East Area's #9C8A7C measured
                                 3.19:1 here and was darkened rather than
                                 carried over.

   The DOCUMENT styles at the bottom of this file are Al Amoud's own two
   designs — cream-paper Quotation (.docA-*) and maroon-header-band Tax
   Invoice (.docB-*) — ported from the first build. They stay two visibly
   different documents on purpose: the client's own complaint was that staff
   and customers were confusing a quote with an invoice. */
:root{
  --maroon:#351214;
  --maroon-2:#4A1D20;
  --maroon-deep:#240C0D;
  --maroon-wash:#F4EAEA;
  --terra:#84481F;
  --terra-deep:#6E3A18;
  --terra-wash:#FBF0E8;
  --terra-light:#F4E4D6;   /* Quotation category rules + tint blocks */
  --terra-zebra:#FBF1E6;   /* Quotation line-item zebra striping */
  --on-accent:#FFFFFF;
  --sage:#2F6B4F;
  --sage-wash:#E7F0EB;
  --alert:#B3261E;
  --alert-wash:#FBEBEA;
  --warn:#8A5A12;
  --warn-wash:#FBF2E2;
  --cream:#FBF7F1;
  --paper:#FFFDFA;
  --ink:#2A211D;
  --ink-muted:#6E5A50;
  --ink-faint:#7E695C;
  --line:#E7DCD2;
  --line-soft:#F3ECE4;
  --danger:#B3261E;
  --shadow-1:0 1px 2px rgba(53,18,20,.08), 0 1px 1px rgba(53,18,20,.05);
  --shadow-2:0 10px 26px rgba(53,18,20,.15), 0 2px 7px rgba(53,18,20,.08);
  --radius:16px;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'Cascadia Mono','Segoe UI Mono',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);color:var(--ink);font-family:var(--ui);
  overflow-wrap:break-word;
  font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{margin:0;font-weight:800;color:var(--maroon)}
p{margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:var(--maroon);text-decoration:none}
input,textarea,select{font-family:inherit}
/* Safety net: icons.js returns a bare <svg> with no width/height, and a
   missed sizing rule renders it at ~150px. Any more specific rule still wins. */
svg{width:20px;height:20px;display:block;flex:0 0 auto}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ===== Top bar ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;height:64px;background:var(--maroon);color:var(--paper);
  display:flex;align-items:center;gap:22px;padding:0 22px;
}
.tb-brand{display:flex;align-items:center;gap:11px;min-height:44px;color:var(--paper);flex:0 0 auto}
.tb-brand img{height:36px;width:auto;display:block;border-radius:7px;background:#fff;padding:3px}
.tb-brand b{font-size:16px;font-weight:800;letter-spacing:.2px}
.tb-nav{display:flex;gap:4px;margin-left:auto}
.tb-link{display:flex;align-items:center;gap:9px;height:44px;padding:0 15px;border-radius:10px;
  color:rgba(253,251,247,.78);font-weight:700;font-size:14.5px}
.tb-link svg{width:19px;height:19px}
.tb-link:hover{background:rgba(253,251,247,.1);color:var(--paper)}
.tb-link.on{background:var(--terra);color:var(--on-accent)}

/* ===== Bottom bar (phone) ================================================= */
.bottomnav{display:none}
@media (max-width:860px){
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
    border-top:1.5px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .bn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;border-radius:12px;color:var(--ink-muted);font-size:12.5px;font-weight:700}
  .bn svg{width:23px;height:23px}
  .bn.on{color:var(--maroon);background:var(--maroon-wash)}
  .bn-main{background:var(--terra);color:var(--on-accent);margin:0 5px;font-weight:800}
  /* Four items on a 360px phone: the labels must not wrap or the bar
     grows and eats the page. */
  .bn span{white-space:nowrap;font-size:13px}
  @media (max-width:380px){ .bn span{font-size:12.5px} .bn svg{width:21px;height:21px} }
  .bn-main svg{width:25px;height:25px}
  .tb-nav{display:none}
  /* Typing: give the screen back. Nobody navigates mid-word, and on a small
     phone the nav plus the wizard bar were taking half the visible height. */
  body.kb-open .bottomnav{display:none}
  body.kb-open .stepfoot{bottom:0}
  body.kb-open .cartbar{bottom:0}
}

/* ===== Page =============================================================== */
.page{max-width:1080px;margin:0 auto;padding:24px 20px 40px}
.page-narrow{max-width:700px}
.page-wide{max-width:1320px}
@media (max-width:860px){ .page{padding:18px 14px 96px} }
body.has-cartbar .page{padding-bottom:190px}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.pagehead h1{font-size:27px}
.pagesub{color:var(--ink-muted);font-size:15.5px;margin:-6px 0 16px;max-width:660px}

/* ===== Home =============================================================== */
.hello{margin-bottom:22px}
.hello h1{font-size:30px;letter-spacing:-.4px}
.hello p{color:var(--ink-muted);font-size:17px;margin-top:4px}
.resume{display:flex;align-items:center;gap:13px;margin-bottom:18px;padding:15px 16px;min-height:64px;
  background:var(--terra-wash);border:2px solid var(--terra);border-radius:var(--radius);color:var(--maroon)}
.resume svg{color:var(--terra-deep)}
.resume span{flex:1;min-width:0}
.resume b{display:block;font-size:16px}
.resume small{display:block;color:var(--ink-muted);font-size:14px}

.bigchoices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media (max-width:640px){ .bigchoices{grid-template-columns:1fr} }
.bigchoice{display:flex;flex-direction:column;gap:3px;padding:24px 22px;min-height:150px;justify-content:center;
  background:#fff;border:2px solid var(--line);border-radius:20px;color:var(--maroon);box-shadow:var(--shadow-1)}
.bigchoice .bc-ic{width:54px;height:54px;border-radius:15px;background:var(--maroon-wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:9px;color:var(--maroon)}
.bigchoice .bc-ic svg{width:28px;height:28px}
.bigchoice b{font-size:21px;font-weight:800}
.bigchoice small{font-size:15px;color:var(--ink-muted)}
.bigchoice.primary{background:var(--maroon);border-color:var(--maroon);color:var(--paper)}
.bigchoice.primary .bc-ic{background:var(--terra);color:var(--on-accent)}
.bigchoice.primary small{color:rgba(253,251,247,.75)}

.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){ .mini-stats{grid-template-columns:1fr} }
.ms{display:flex;flex-direction:column;gap:2px;padding:16px 17px;min-height:88px;justify-content:center;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);color:var(--ink-muted);font-size:14.5px}
.ms-n{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--maroon);line-height:1.1}
.ms-money{font-size:20px}
.ms-warn{border-color:var(--terra);background:var(--terra-wash)}

/* ===== Workshop board ===================================================== */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media (max-width:900px){ .board{grid-template-columns:1fr} }
.bcol{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:14px}
.bcol-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bcol-h b{font-size:16.5px;color:var(--maroon)}
.bcol-h i{font-style:normal;font-family:var(--mono);font-weight:800;font-size:14px;color:var(--paper);
  background:var(--maroon);border-radius:999px;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0 7px}
.bcol-hint{font-size:13px;color:var(--ink-faint);margin:3px 0 12px}
.bempty{padding:22px 8px;text-align:center;color:var(--ink-faint);font-size:14.5px;
  border:2px dashed var(--line);border-radius:12px}
.jcard{display:block;padding:14px;margin-bottom:10px;background:var(--cream);
  border:1.5px solid var(--line);border-radius:13px;min-height:64px}
.jcard:hover{border-color:var(--maroon)}
.jcard.late{border-color:var(--alert);background:var(--alert-wash)}
.jcard b{display:block;font-size:16px;color:var(--maroon);line-height:1.35}
.jcard small{display:block;font-size:13.5px;color:var(--ink-muted);margin-top:2px}
.jc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;flex-wrap:wrap}
.jc-money{font-family:var(--mono);font-weight:800;font-size:15.5px;color:var(--maroon)}
.jc-due{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink-muted)}
.jc-due svg{width:15px;height:15px}
.jc-due.is-late{color:var(--alert)}
.jc-bal{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px;color:var(--terra-deep);font-weight:700}

/* ===== Wizard shell ======================================================= */
.stephead{margin-bottom:20px}
.backbtn{display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 14px 0 10px;margin-bottom:12px;
  border-radius:11px;background:#fff;border:1.5px solid var(--line);color:var(--maroon);font-weight:700;font-size:15px}
.backbtn:hover{background:var(--maroon-wash)}
.stepbar{height:8px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-bottom:12px}
.stepbar-fill{height:100%;background:var(--terra);border-radius:999px;transition:width .3s ease}
.stepnum{font-size:13.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--terra-deep)}
.stepq{font-size:29px;letter-spacing:-.4px;margin-top:3px}
@media (max-width:640px){ .stepq{font-size:25px} }
.stephint{color:var(--ink-muted);font-size:15.5px;margin-top:7px}

/* The way forward is ALWAYS on screen — pinned above the phone bottom nav,
   which would otherwise cover it. */
.stepfoot{position:fixed;left:0;right:0;bottom:0;z-index:65;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(250,246,239,.97);border-top:1.5px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stepfoot .bigbtn{max-width:1080px;margin:0 auto;display:flex}
@media (max-width:860px){ .stepfoot{bottom:70px} }
.page-step{padding-bottom:120px}
@media (max-width:860px){ .page-step{padding-bottom:190px} }
body.has-cartbar .page-step{padding-bottom:150px}
@media (max-width:860px){ body.has-cartbar .page-step{padding-bottom:250px} }

/* ===== Buttons & fields =================================================== */
.bigbtn{display:inline-flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:60px;
  padding:0 22px;border:none;border-radius:15px;background:var(--maroon);color:var(--paper);
  font-size:18px;font-weight:800;box-shadow:var(--shadow-1)}
.bigbtn svg{width:23px;height:23px}
.bigbtn:active{transform:scale(.99)}
.bigbtn.save,.bigbtn.approve,.bigbtn.paid{background:var(--sage)}
.bigbtn.start,.bigbtn.fitted{background:var(--terra);color:var(--on-accent)}
.bigbtn.ghost{background:#fff;color:var(--maroon);border:2px solid var(--line);box-shadow:none}
.bigbtn.sm{width:auto;min-height:50px;font-size:16px;padding:0 18px}
.linkbtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;background:none;border:none;
  color:var(--maroon);font-weight:700;font-size:15px}
.linkbtn svg{width:19px;height:19px}
.linkbtn:hover{text-decoration:underline}
.linkbtn.danger{color:var(--danger)}
.linkbtn.tiny{min-height:44px;font-size:13.5px;padding:0 10px;color:var(--ink-muted)}

.card{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.card-t{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--maroon);margin-bottom:14px}
.card-t svg{color:var(--terra-deep)}
.cardnote{color:var(--ink-muted);font-size:14.5px;margin-bottom:14px;line-height:1.5}
.cardnote b{color:var(--maroon)}

.bigfield{margin-bottom:16px}
.bigfield:last-child{margin-bottom:0}
.bigfield label{display:block;font-weight:700;font-size:15.5px;color:var(--maroon);margin-bottom:7px}
.bigfield .opt{font-weight:600;color:var(--ink-muted);font-size:14px}
.bigfield input,.bigfield textarea,.bigfield select{
  width:100%;min-height:56px;padding:13px 15px;font-size:17px;
  border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.bigfield textarea{min-height:78px;resize:vertical;line-height:1.5}
.bigfield input:focus,.bigfield textarea:focus,.bigfield select:focus{
  outline:none;border-color:var(--maroon);box-shadow:0 0 0 4px rgba(46,33,26,.12)}
.bigfield input.bad{border-color:var(--danger);background:var(--alert-wash)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }

.phonerow{display:flex;gap:9px;align-items:stretch}
.ccsel{flex:0 0 152px;min-height:56px;padding:0 8px;font-size:15px;font-weight:700;
  border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-overflow:ellipsis}
.ccsel:focus{outline:none;border-color:var(--maroon)}
.phonerow input{flex:1;min-width:0}
@media (max-width:400px){ .ccsel{flex:0 0 132px;font-size:14px} }

.sub-label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ink-muted);margin:20px 0 10px}
.sub-label.sm{margin:18px 0 9px;font-size:14px}
.sub-label svg{width:18px;height:18px;color:var(--terra-deep)}
.recentrow{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}
.recentrow::-webkit-scrollbar{height:0}
.recentchip{flex:0 0 auto;max-width:240px;text-align:left;min-height:58px;padding:9px 15px;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;color:var(--maroon)}
.recentchip b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recentchip small{display:block;color:var(--ink-muted);font-size:13px}
.recentchip:hover{border-color:var(--maroon);background:var(--maroon-wash)}
.nomatch{display:flex;align-items:center;gap:10px;padding:14px;color:var(--ink-muted);font-size:15px}

.bigsearch{display:flex;align-items:center;gap:11px;background:#fff;border:2px solid var(--line);
  border-radius:14px;padding:0 15px;min-height:58px;margin-bottom:14px}
.bigsearch svg{color:var(--ink-faint)}
.bigsearch input{flex:1;border:none;outline:none;font-size:17px;background:transparent;min-width:0;height:54px}
.bigsearch.sm{min-height:52px;margin-bottom:10px}
.bigsearch.sm input{height:48px;font-size:16px}
.clearsearch{background:none;border:none;color:var(--ink-faint);padding:8px;display:flex}

.catrow{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.catrow::-webkit-scrollbar{height:0}
.catbtn{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;white-space:nowrap;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;font-weight:700;font-size:15px;color:var(--ink)}
.catbtn svg{width:20px;height:20px;color:var(--terra-deep)}
.catbtn.on{background:var(--maroon);border-color:var(--maroon);color:var(--paper)}
.catbtn.on svg{color:var(--terra)}

/* ===== Product pictures & grid ============================================ */
.prod-pic{display:flex;align-items:center;justify-content:center;width:100%;height:104px;
  border-radius:13px;background:var(--line-soft);overflow:hidden;position:relative}
.prod-pic svg,.prod-pic img{width:84%;height:84%;object-fit:contain}
.prod-pic.sm{width:56px;height:56px;flex:0 0 auto;border-radius:11px}
.prod-pic.sm svg,.prod-pic.sm img{width:88%;height:88%}
@media (max-width:640px){ .prod-pic{height:92px} }
.pic-doors{background:#F6EDE1}
.pic-windows{background:#EDF2F4}
.pic-kitchen{background:#F5EFE3}
.pic-wardrobes{background:#F1E9E3}
.pic-ceiling{background:#F4EFE6}
.pic-glass{background:#EAF1F3}
.pic-bespoke{background:#F2EBE6}
.pic-hardware{background:#EFF1F2}
.pic-services{background:#F0EFEA}

.prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
@media (max-width:640px){ .prodgrid{grid-template-columns:1fr 1fr;gap:10px} }
@media (max-width:339px){ .prodgrid{grid-template-columns:1fr} }
.prod{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;padding:13px;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.prod:hover{border-color:var(--maroon)}
.prod.has{border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-wash)}
.prod-have{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:4px;
  background:var(--sage);color:#fff;border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:800}
.prod-have svg{width:14px;height:14px}
.prod-name{font-weight:800;font-size:15.5px;line-height:1.3;color:var(--maroon);margin-top:4px}
.prod-cat{font-size:13px;color:var(--ink-faint)}
.prod-price{font-family:var(--mono);font-size:14.5px;font-weight:800;color:var(--terra-deep);margin-top:2px}

/* ===== The measure & price sheet ========================================== */
/* vh on iOS is the LARGE viewport — with the address bar showing, a 94vh
   sheet runs off the bottom of the screen and takes its Save button with
   it. dvh is the height you can actually see; vh stays as the fallback. */
.sheet-tall{max-height:94vh;max-height:94dvh}
.measure{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:6px}
@media (max-width:520px){ .measure{grid-template-columns:96px minmax(0,1fr);gap:12px} }
/* The live drawing. Sits beside the numbers, not below them, so the shape and
   the figures are read together — that adjacency is the whole point. */
.mshape{width:100%;aspect-ratio:1/1;border-radius:14px;background:var(--line-soft);
  display:flex;align-items:center;justify-content:center;padding:8px;border:1.5px solid var(--line)}
.mshape svg{width:100%;height:100%}
.mfields{display:flex;flex-direction:column;gap:10px;min-width:0}
.dimrow{display:grid;grid-template-columns:64px 1fr 1fr;gap:8px;align-items:center}
.dlabel{font-size:14.5px;font-weight:700;color:var(--ink-muted)}
.dbox{position:relative}
.dbox input{width:100%;min-height:58px;padding:0 30px 0 12px;text-align:center;
  font-family:var(--mono);font-size:22px;font-weight:800;color:var(--maroon);
  border:2px solid var(--line);border-radius:12px;background:#fff}
.dbox input:focus{outline:none;border-color:var(--maroon);box-shadow:0 0 0 4px rgba(46,33,26,.12)}
.dbox i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:13px;font-weight:700;color:var(--ink-faint);pointer-events:none}

.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media (min-width:520px){ .presets{grid-template-columns:repeat(4,1fr)} }
.preset{min-height:58px;padding:8px 10px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;color:var(--maroon);text-align:center}
.preset b{display:block;font-size:14px;font-weight:800}
.preset small{display:block;font-family:var(--mono);font-size:13px;color:var(--ink-muted)}
.preset:hover{border-color:var(--terra);background:var(--terra-wash)}

/* Material swatches — a joiner knows teak from MDF by looking, so the colour
   does the work a dropdown of eleven names cannot. */
.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media (min-width:560px){ .swatches{grid-template-columns:repeat(3,1fr)} }
.swatch{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 12px;text-align:left;
  background:#fff;border:2px solid var(--line);border-radius:12px;color:var(--maroon);
  font-size:14px;font-weight:700;line-height:1.3}
.sw-chip{width:26px;height:26px;flex:0 0 auto;border-radius:7px;border:1.5px solid}
.swatch.on{border-color:var(--maroon);background:var(--maroon-wash)}

.chiprow{display:flex;gap:9px;flex-wrap:wrap}
.chip{min-height:52px;padding:0 15px;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  color:var(--maroon);font-size:15px;font-weight:700}
.chip i{font-style:normal;color:var(--terra-deep);font-family:var(--mono);font-size:13px}
.chip.on{background:var(--maroon);border-color:var(--maroon);color:var(--paper)}
.chip.on i{color:var(--terra)}

.qtyrow{display:flex;align-items:center;gap:9px}
.qbtn{width:56px;height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--maroon-wash);border:1.5px solid var(--line);border-radius:12px;color:var(--maroon)}
.qbtn:active{background:var(--maroon);color:#fff}
.qinput{flex:1;min-width:0;height:56px;text-align:center;font-family:var(--mono);font-size:22px;font-weight:800;
  color:var(--maroon);border:2px solid var(--line);border-radius:12px;background:#fff}
.qinput:focus{outline:none;border-color:var(--maroon)}

/* The price is pinned: it is the answer to this whole screen and must never
   scroll out of sight while the size is being adjusted. */
.sheet-price{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;background:var(--maroon);color:var(--paper)}
.sp-left{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-area{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--terra)}
.sp-rate{font-size:13px;color:rgba(253,251,247,.72)}
.sp-total{font-family:var(--mono);font-size:26px;font-weight:800;white-space:nowrap}

/* ===== Sticky cart ======================================================== */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:75;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
@media (max-width:860px){ .cartbar{bottom:74px} }
.cartbar-in{display:flex;align-items:center;gap:12px;max-width:1080px;margin:0 auto;
  background:var(--maroon);color:var(--paper);border-radius:16px;padding:13px 16px;min-height:68px;box-shadow:var(--shadow-2)}
.cb-count{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--terra);color:var(--on-accent);border-radius:999px;font-family:var(--mono);font-weight:800;font-size:15px}
.cb-txt{flex:1;min-width:0}
.cb-txt b{display:block;font-size:16px}
.cb-txt small{display:block;font-size:13.5px;color:rgba(253,251,247,.72)}
.cb-money{font-family:var(--mono);font-weight:800;font-size:18px}

/* ===== Check list ========================================================= */
.who{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.who-t{display:flex;align-items:center;gap:9px;font-size:17px;color:var(--maroon)}
.who-t svg{color:var(--terra-deep)}
.who-p{display:flex;align-items:center;gap:7px;color:var(--ink-muted);font-size:15px}
.who-p svg{width:18px;height:18px}
.who-edit{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:44px;font-weight:700;font-size:15px}
.who-edit svg{width:18px;height:18px}

.checklist{display:flex;flex-direction:column;gap:10px}
.chk{display:grid;gap:6px 12px;padding:12px;grid-template-columns:56px 1fr auto;
  grid-template-areas:"pic name amt" "pic spec rm";align-items:center;
  background:#fff;border:1.5px solid var(--line);border-radius:14px}
.chk > .prod-pic{grid-area:pic}
.chk-mid{grid-area:name;min-width:0}
.chk-mid b{display:block;font-size:15.5px;font-weight:800;color:var(--maroon);line-height:1.3}
.chk-mid small{display:block;font-size:13px;color:var(--ink-muted);line-height:1.45}
.chk-amt{grid-area:amt;font-family:var(--mono);font-size:17px;font-weight:800;color:var(--maroon);white-space:nowrap}
.chk .rm{grid-area:rm;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:1.5px solid var(--line);border-radius:10px;color:var(--danger);justify-self:end}
.chk .rm:active{background:var(--alert-wash)}
@media (min-width:700px){
  .chk{grid-template-columns:56px 1fr auto auto;grid-template-areas:"pic name amt rm" "pic spec amt rm"}
}
.addmore{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;margin-top:12px;
  border:2px dashed var(--line);border-radius:14px;font-weight:800;font-size:16px;color:var(--maroon)}
.addmore:hover{background:var(--maroon-wash);border-color:var(--maroon)}

.totalcard{margin-top:16px;padding:16px 18px;background:#fff;border:2px solid var(--maroon);border-radius:var(--radius)}
.tc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:16px;color:var(--ink-muted)}
.tc-row b{font-family:var(--mono);font-size:17px;font-weight:800;color:var(--ink)}
.tc-row.disc{border-bottom:1px dashed var(--line)}
.discin{width:110px;height:46px;text-align:right;padding:0 11px;font-family:var(--mono);font-size:16px;font-weight:800;
  border:2px solid var(--line);border-radius:10px}
.tc-grand{border-top:2px solid var(--line);margin-top:6px;padding-top:13px;color:var(--maroon);font-weight:800;font-size:19px}
.tc-grand b{font-size:27px;color:var(--maroon)}

/* ===== Jobs list ========================================================== */
.filterrow{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.filterrow::-webkit-scrollbar{height:0}
.filterbtn{display:flex;align-items:center;gap:7px;min-height:50px;padding:0 16px;white-space:nowrap;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;font-weight:700;font-size:15px;color:var(--ink)}
.filterbtn i{font-style:normal;font-family:var(--mono);font-weight:800;color:var(--ink-faint)}
.filterbtn.on{background:var(--maroon);border-color:var(--maroon);color:var(--paper)}
.filterbtn.on i{color:#C9A227}   /* 6.96 on maroon */
.billlist{display:flex;flex-direction:column;gap:11px}
.billrow{display:flex;align-items:center;gap:14px;padding:16px;min-height:88px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.billrow:hover{border-color:var(--maroon)}
.br-main{flex:1;min-width:0}
.br-main b{display:block;font-size:17px;font-weight:800;color:var(--maroon);line-height:1.3}
.br-main small{display:block;font-size:13.5px;color:var(--ink-muted);margin:2px 0 7px}
.br-right{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.br-right b{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--maroon)}
.br-right svg{color:var(--ink-faint)}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:800}
.pill svg{width:16px;height:16px}
.s-quote{background:#EFE9E3;color:#5A4B43}          /* 6.91 */
.s-sent{background:#FBF0E8;color:#7A4119}           /* 7.21 */
.s-approved{background:#E7F0EB;color:#2F6B4F}       /* 5.41 */
.s-workshop{background:#FBF2E2;color:#74510F}       /* 6.46 */
.s-fitted{background:#E1EDEF;color:#14555C}         /* 7.07 */
.s-paid{background:#2F6B4F;color:#FFFFFF}           /* 6.29 — the one filled pill */
/* Which document the job IS. Deliberately different in weight from the stage
   pills: the invoice one is filled maroon with a gold rule, because "this is
   now a bill" is a louder fact than "the work is at stage four". */
.s-doc-quo{background:#EFE9E3;color:#5A4B43}
.s-doc-inv{background:var(--maroon);color:var(--doc-gold-soft);box-shadow:inset 0 -2px 0 var(--doc-gold)}
.bh-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.actbtn.quolink{margin-top:10px;background:#fff;border:1.5px solid var(--line)}
.actbtn.quolink small{display:block;font-size:13px;color:var(--ink-muted);font-weight:600}
.nb-note{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 12px;border-radius:11px;
  background:var(--maroon-wash);color:var(--maroon);font-size:14px;font-weight:700}
.nb-note svg{width:17px;height:17px;flex:0 0 auto}

/* ===== Job detail ========================================================= */
.saved-banner{display:flex;align-items:center;gap:13px;margin:14px 0;padding:16px 18px;
  background:var(--sage-wash);border:2px solid var(--sage);border-radius:var(--radius);color:var(--sage)}
.saved-banner svg{width:28px;height:28px}
.saved-banner b{display:block;font-size:18px}
.saved-banner span{font-size:15px;color:var(--ink)}
.billhead{margin:14px 0 18px}
.billhead h1{font-size:27px;letter-spacing:-.3px}
.bh-sub{font-family:var(--mono);font-size:14px;color:var(--ink-muted);margin:3px 0 9px}
.bh-total{font-family:var(--mono);font-size:36px;font-weight:800;color:var(--maroon);margin-top:11px;line-height:1.1}
.bh-due{margin-top:5px;font-size:16px;color:var(--alert)}
.bh-due b{font-family:var(--mono);font-weight:800}

.stages{display:flex;align-items:center;gap:3px;margin-top:14px;overflow-x:auto;padding-bottom:4px}
.stages::-webkit-scrollbar{height:0}
.stage{flex:1;min-width:58px;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;
  font-size:12.5px;font-weight:700;color:var(--ink-muted);text-align:center}
.stage::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2.5px;background:var(--line);z-index:0}
.stage:first-child::before{display:none}
.stdot{width:24px;height:24px;border-radius:999px;background:var(--line);z-index:1;
  display:flex;align-items:center;justify-content:center;color:#fff}
.stdot svg{width:15px;height:15px}
.stage.done{color:var(--sage)}
.stage.done .stdot{background:var(--sage)}
.stage.done::before{background:var(--sage)}
.stage.now{color:var(--maroon)}
.stage.now .stdot{background:var(--terra);box-shadow:0 0 0 4px var(--terra-wash)}

.sendbox{background:#fff;border:2px solid var(--sage);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.sendbox-t{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--maroon);margin-bottom:13px}
.sendbox-t svg{color:var(--sage)}
.actbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 16px;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;color:var(--maroon);text-align:left}
.actbtn b{display:block;font-size:16.5px;font-weight:800}
.actbtn small{display:block;font-size:13.5px;color:var(--ink-muted)}
.actbtn span{flex:1;min-width:0}
.actbtn.wa{background:#1B7F4E;border-color:#1B7F4E;color:#fff}   /* 5.01 with white */
.actbtn.wa small{color:rgba(255,255,255,.92)}
.actbtn.sm{min-height:56px;justify-content:center;text-align:center}
.actbtn.sm span{flex:0 1 auto}
.actbtn.sm b{font-size:15px}
.actbtn.hi{background:var(--maroon);border-color:var(--maroon);color:var(--paper)}
.actbtn.share{background:var(--maroon-2);border-color:var(--maroon-2);color:var(--paper)}
.actrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}
@media (max-width:560px){ .actrow3{grid-template-columns:1fr 1fr} .actrow3 > :last-child{grid-column:1 / -1} }

.nextbox{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.nb-t{font-weight:700;font-size:15.5px;color:var(--ink-muted);margin-bottom:11px}
.nb-done{display:flex;align-items:center;gap:10px;color:var(--sage);font-size:17px;margin-bottom:6px}
.nb-warn{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:11px;
  background:var(--terra-wash);border:1.5px solid var(--terra);border-radius:12px;
  font-size:14.5px;color:var(--terra-deep);font-weight:600;line-height:1.5}
.nb-warn svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.nb-ok{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:11px;
  background:var(--sage-wash);border:1.5px solid var(--sage);border-radius:12px;
  font-size:14.5px;color:var(--sage);font-weight:700}
.nb-ok svg{width:19px;height:19px}
.moneyrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;
  font-size:16px;color:var(--ink-muted);border-bottom:1px dashed var(--line)}
.moneyrow:last-child{border-bottom:none}
.moneyrow b{font-family:var(--mono);font-size:17px;font-weight:800;color:var(--ink)}
.moneyrow.grand{border-top:2px solid var(--line);margin-top:4px;padding-top:12px;color:var(--maroon);font-weight:800}
.moneyrow.grand b{font-size:21px;color:var(--maroon)}
.advset{display:flex;align-items:center;gap:9px}
.minor{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* ===== Preview ============================================================ */
/* On a phone this preview renders the A4 sheet's body text at about 5px —
   nobody can read it, and it adds ~600px of scrolling to the busiest screen
   in the app. "See / Print" in the send box above opens it full size. */
@media (max-width:640px){ .previewbox{display:none} }
.previewbox{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;overflow:hidden}
.pv-head{display:flex;align-items:center;gap:9px;font-size:17px;color:var(--maroon);margin-bottom:12px}
.pv-head > svg:first-child{color:var(--terra-deep)}
.pv-open{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-weight:700;font-size:14.5px;min-height:44px}
.pv-open svg{width:17px;height:17px}
/* Width/height set by fitPreview(); flex-shrink:0 stops the 794px sheet being
   shrunk by the box model before its transform applies. */
.pv-stage{display:block;border:1.5px solid var(--line-soft);border-radius:10px;overflow:hidden;
  background:var(--cream);height:420px;margin:0 auto}
.pv-scale{display:block;width:794px;transform-origin:top left;pointer-events:none;flex:0 0 auto;flex-shrink:0}
.pv-stage .doc-sheet{box-shadow:none;border:none;margin:0}
.docbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.docbar-r{display:flex;gap:9px;flex-wrap:wrap}
.docbar-r .actbtn{width:auto;padding:10px 16px}

/* ===== Prices ============================================================= */
.priceshell{display:grid;grid-template-columns:286px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:900px){ .priceshell{display:block} .rail{margin-bottom:18px} }
.pricemain{min-width:0}
.rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px;align-self:start}
@media (max-width:900px){ .rail{position:static} }
.rail-sec{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:14px}
.rail-t{display:flex;align-items:center;gap:8px;margin-bottom:11px;font-size:13px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;color:var(--ink-muted)}
.rail-t svg{width:17px;height:17px;color:var(--terra-deep)}
.raillist{display:flex;flex-direction:column;gap:4px;max-height:460px;overflow-y:auto}
.railitem{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 11px;text-align:left;
  background:none;border:1.5px solid transparent;border-radius:10px;font-weight:700;font-size:14.5px;color:var(--maroon)}
.railitem svg{width:19px;height:19px;color:var(--terra-deep)}
.railitem span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railitem i{font-style:normal;font-family:var(--mono);font-weight:800;font-size:13px;color:var(--ink-faint)}
.railitem:hover{background:var(--cream);border-color:var(--line)}
.railitem.on{background:var(--maroon);color:var(--paper)}
.railitem.on svg,.railitem.on i{color:#C9A227}   /* 6.96 on maroon */
.railnote{font-size:13.5px;color:var(--ink-muted);line-height:1.5;margin-bottom:11px}
.railnote b{color:var(--maroon)}
.railbtn{display:flex;align-items:center;gap:9px;width:100%;min-height:50px;padding:0 12px;margin-bottom:8px;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;text-align:left;font-weight:700;font-size:14.5px;color:var(--maroon)}
.railbtn svg{width:18px;height:18px;color:var(--terra-deep)}
.railbtn:hover{background:var(--terra-wash);border-color:var(--terra)}
.resultline{font-size:14px;color:var(--ink-muted);font-weight:600;margin-bottom:12px}
.pricegroup{margin-bottom:22px}
.pricerow{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:9px;
  background:#fff;border:1.5px solid var(--line);border-radius:14px}
.pricerow.off{opacity:.55}
.pricerow.editing{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(46,33,26,.1);flex-wrap:wrap}
.pr-mid{flex:1;min-width:0}
.pr-mid b{display:block;font-size:15.5px;font-weight:800;color:var(--maroon)}
.pr-mid small{display:block;font-size:13.5px;color:var(--ink-muted)}
.pr-mid input{width:100%;min-height:46px;padding:8px 12px;font-size:15.5px;border:2px solid var(--line);border-radius:10px;margin-bottom:7px}
.pr-tiers{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.tchip{background:var(--terra-wash);color:var(--terra-deep);border-radius:7px;padding:4px 9px;
  font-size:13px;font-weight:800;font-family:var(--mono)}
.tchip.base{background:var(--maroon-wash);color:var(--maroon)}
.tag-off{background:var(--line-soft);color:var(--ink-muted);border-radius:5px;padding:1px 6px;font-weight:800;font-size:12px}
.tiered-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tiered-row .tq,.tiered-row .tp{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink-muted)}
.tiered-row input{width:110px;min-height:46px;margin:0;text-align:center;font-family:var(--mono);font-weight:800;font-size:15px}
.tunit{font-size:13px;color:var(--ink-faint);font-weight:700}
.pr-act{display:flex;gap:7px;flex:0 0 auto}
.iconbtn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--line);border-radius:11px;color:var(--maroon)}
.iconbtn:hover{background:var(--maroon-wash)}
.iconbtn.ok{background:var(--sage);border-color:var(--sage);color:#fff}
.pctrow{display:flex;gap:8px;align-items:center}
.pctrow input{width:110px;min-height:52px;text-align:center;font-family:var(--mono);font-weight:800;font-size:17px;
  border:2px solid var(--line);border-radius:11px}
.pctsign{font-weight:800;color:var(--ink-muted)}

/* PHONE: the rail stacked 10 group buttons and the bulk controls vertically —
   908px, more than a whole screen, before the first price. The groups become
   one horizontal scroller (the same pattern the item picker already uses and
   which people already understand), and "change many at once" moves below the
   list, because it is a rare action and it was sitting in front of a common
   one. */
@media (max-width:900px){
  .rail{gap:10px}
  .rail-sec{padding:11px}
  .rail-sec:first-child .rail-t{margin-bottom:8px}
  .raillist{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;
    gap:8px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .raillist::-webkit-scrollbar{height:0}
  .railitem{flex:0 0 auto;width:auto;white-space:nowrap}
  .railitem span{overflow:visible;text-overflow:clip}
  /* the bulk-change block after the list it acts on */
  /* A flex COLUMN sizes its items by content in the cross axis when they can
     grow, which pushed .pricemain to 314px inside a 292px content box on a
     320px phone. Pinning the children to 100% keeps the reorder without the
     overflow. */
  .priceshell{display:flex;flex-direction:column}
  .priceshell > *,.priceshell > .rail > *{width:100%;min-width:0;max-width:100%}
  /* display:contents dissolves the rail so its three sections can be ordered
     independently around the price list, which is the whole point: the group
     filter belongs ABOVE the list it filters, and the rare bulk-change action
     belongs below it. */
  .rail{display:contents}
  .rail-sec.groups{order:1;margin-bottom:2px}
  .priceshell{gap:10px}
  .pricemain .pagehead{margin-top:2px}
  /* A group clipped mid-word at the edge reads as a bug rather than as "there
     is more this way". The fade says it scrolls. */
  .rail-sec.groups{position:relative}
  .rail-sec.groups::after{content:"";position:absolute;top:11px;right:11px;bottom:11px;width:34px;
    pointer-events:none;border-radius:0 12px 12px 0;
    background:linear-gradient(to right,rgba(255,255,255,0),#fff 78%)}
  .pricemain{order:2}
  .rail-sec.bulk{order:3;margin-top:18px}
  /* The rail's "add a new item" duplicates the button already in the page
     head; one of them is noise on a phone. */
  .rail-sec.add{display:none}
}

/* ===== Signature ========================================================== */
.sigbox{display:flex;align-items:center;justify-content:center;min-height:96px;margin-bottom:12px;padding:10px;
  background:var(--cream);border:1.5px solid var(--line);border-radius:12px}
.sigbox img{max-width:100%;max-height:88px;object-fit:contain}
.sigpad-wrap{position:relative;margin-bottom:12px}
#sigPad{width:100%;height:170px;display:block;touch-action:none;cursor:crosshair;
  background:#fff;border:2px dashed var(--line);border-radius:12px}
.sigpad-hint{position:absolute;left:14px;bottom:10px;font-size:13px;font-weight:700;color:var(--ink-faint);pointer-events:none}

/* ===== Modal sheet ======================================================== */
.ov{position:fixed;inset:0;z-index:90;background:rgba(30,22,16,.55);display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){ .ov{align-items:center;padding:24px} }
.sheet{background:#fff;width:100%;max-width:620px;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;box-shadow:var(--shadow-2)}
@media (min-width:700px){ .sheet{border-radius:20px} }
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px}
.sheet-h h3{font-size:21px}
.sheet-x{width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--line-soft);border:none;border-radius:12px;color:var(--ink)}
.sheet-b{padding:0 20px 16px;overflow-y:auto;flex:1}
.sheet-f{display:flex;gap:11px;padding:14px 20px calc(18px + env(safe-area-inset-bottom));border-top:1.5px solid var(--line)}
.sheet-f .bigbtn{flex:1}

/* ===== Empty + toast ====================================================== */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:44px 20px;
  background:#fff;border:2px dashed var(--line);border-radius:var(--radius)}
.empty > svg{width:42px;height:42px;color:var(--ink-faint);margin-bottom:6px}
.empty > b{font-size:19px;color:var(--maroon)}
.empty > span{color:var(--ink-muted);font-size:15.5px}
/* pointer-events:none is load-bearing: the toast is fixed at the bottom with
   the highest z-index, so it lands on top of the step footer's primary button
   and would silently eat the tap. */
.toast{pointer-events:none;position:fixed;left:50%;transform:translateX(-50%);bottom:170px;z-index:120;
  display:flex;align-items:center;gap:9px;max-width:calc(100vw - 40px);white-space:nowrap;overflow:hidden;
  background:var(--maroon);color:var(--paper);border-radius:12px;padding:11px 17px;
  font-size:15px;font-weight:700;box-shadow:var(--shadow-2);animation:tin .22s ease}
.toast svg{color:var(--terra);width:19px;height:19px}
.toast span{overflow:hidden;text-overflow:ellipsis}
.toast-bad{background:var(--danger)}
.toast-bad svg{color:#fff}
@keyframes tin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:861px){ .toast{bottom:100px} }


/* ===== Custom items + the Home recent list =============================== */

/* "Not in the list? Add your own" — a solid button, never a dashed outline.
   As an outline this control reads as a section heading and people do not
   know it is pressable. */
.addown{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-top:16px;
  min-height:72px;padding:14px 16px;background:var(--maroon);border:none;border-radius:var(--radius);
  color:var(--paper);box-shadow:var(--shadow-1)}
.addown:active{transform:scale(.995)}
.addown-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;
  border-radius:12px;background:var(--terra);color:var(--on-accent)}
.addown-ic svg{width:23px;height:23px}
.addown > span:nth-child(2){flex:1;min-width:0}
.addown b{display:block;font-size:17px;font-weight:800;line-height:1.3}
.addown small{display:block;font-size:13.5px;color:rgba(255,253,250,.78);margin-top:2px;line-height:1.4}
.addown > svg:last-child{flex:0 0 auto;color:rgba(255,253,250,.7)}

/* how-do-you-charge cards */
.modegrid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:16px}
.cmode{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:64px;padding:13px 14px;background:#fff;border:2px solid var(--line);border-radius:14px;color:var(--ink)}
.cmode.on{border-color:var(--terra);background:var(--terra-wash)}
.cmode-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;
  border-radius:11px;background:var(--maroon-wash);color:var(--maroon)}
.cmode.on .cmode-ic{background:var(--terra);color:var(--on-accent)}
.cmode-ic svg{width:21px;height:21px}
.cmode-txt{flex:1;min-width:0;padding-right:26px}
.cmode b{display:block;font-size:15.5px;font-weight:800;color:var(--maroon);line-height:1.3}
.cmode small{display:block;font-size:13.5px;color:var(--ink-muted);margin-top:1px}
.cmode .pset-tick{top:50%;transform:translateY(-50%);width:26px;height:26px}

/* keep-it-in-my-list tick */
.sheet-f .bigbtn span{white-space:nowrap}
@media (max-width:400px){ .sheet-f .bigbtn{font-size:16px;padding:0 12px} }
.keeprow{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;margin-bottom:6px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:13px}
.keeprow.on{border-color:var(--sage);background:var(--sage-wash)}
.keeprow input{width:24px;height:24px;flex:0 0 auto;margin-top:1px;accent-color:var(--sage)}
.keeprow b{display:block;font-size:15.5px;color:var(--maroon)}
.keeprow small{display:block;font-size:13.5px;color:var(--ink-muted);margin-top:2px;line-height:1.4}

.railbtn.hi{background:var(--maroon);border-color:var(--maroon);color:var(--paper)}
.railbtn.hi svg{color:var(--terra)}
.iconbtn.danger{color:var(--alert)}

/* Home — latest quotations */
.recentlist{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.rq{display:flex;align-items:center;gap:12px;min-width:0;min-height:64px;padding:12px 14px;background:#fff;
  border:1.5px solid var(--line);border-radius:14px;color:var(--ink);box-shadow:var(--shadow-1)}
.rq:hover{border-color:var(--terra)}
.rq-mid{flex:1;min-width:0;overflow:hidden}
.rq-mid b{display:block;font-size:16px;color:var(--maroon);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-mid small{display:block;font-size:13px;color:var(--ink-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-proj{display:flex !important;align-items:center;gap:5px;color:var(--terra) !important;margin-top:2px}
.rq-proj svg{width:13px;height:13px;flex:0 0 auto}
.rq-proj span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-amt.none{font-family:var(--ui);font-size:12.5px;font-weight:700;color:var(--ink-faint)}
.rq-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.rq-amt{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--ink)}
.rq-due{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--alert)}
.rq > svg:last-child{flex:0 0 auto;color:var(--ink-faint)}
.seeall{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;margin-top:11px;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;color:var(--maroon);font-weight:700;font-size:15.5px}
.seeall:hover{border-color:var(--terra)}
@media (max-width:420px){
  .rq{gap:9px}
  .rq .pill{font-size:12.5px;padding:4px 9px}
  .rq-amt{font-size:14px}
}

/* ===== Projects ===========================================================
   Same physical rules as the rest of the shell: every tap target >= 52px,
   nothing below 13px, one loud thing per screen. Red appears in exactly two
   places on a project — "waiting for" and "late" — so red always means the
   same thing, and both carry words as well as colour. */

/* progress bar. The text sits BESIDE the bar, never inside it: a number
   printed on an 8px track is unreadable at arm's length in a workshop. */
.pbar{display:flex;align-items:center;gap:11px;margin:11px 0 2px}
.pbar-track{flex:1;height:9px;background:var(--line-soft);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.pbar-fill{height:100%;background:var(--terra);border-radius:999px;transition:width .3s ease}
.pbar-fill.done{background:var(--sage)}
.pbar-txt{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink-muted);white-space:nowrap}
.pbar.sm{margin:9px 0 6px}
.pbar.sm .pbar-track{height:7px}
.pbar.sm .pbar-txt{font-size:12.5px}

/* view toggle */
.viewtoggle{display:inline-flex;gap:4px;padding:4px;background:#fff;border:1.5px solid var(--line);
  border-radius:13px;margin-bottom:14px}
.vt{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border:none;border-radius:10px;
  background:none;color:var(--ink-muted);font-weight:700;font-size:15px}
.vt.on{background:var(--maroon);color:var(--paper)}
.vt svg{width:18px;height:18px}

/* project cards */
.pboard{grid-template-columns:repeat(4,1fr)}
.pboard .bcol{min-width:0}
@media (max-width:1100px){ .pboard{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .pboard{grid-template-columns:1fr} }
/* "Now:" prefix. The step labels are written as finished statements
   ("Advance money received", "Fitted and installed") because that is how they
   read once ticked — but shown as the CURRENT step with no framing they read
   as a claim that the thing has already happened. The label supplies the
   framing the ladder gets from its tick marks. */
.pc-nowlab{font-size:12.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-muted);margin-top:6px}
.pl-state{display:block;font-family:var(--ui);font-size:12.5px;font-weight:700;color:var(--ink-muted);
  text-align:right;margin-top:1px}
.planrow.met .pl-state{color:var(--sage)}
.plist{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:900px){ .plist{grid-template-columns:repeat(2,1fr)} }
.pcard{display:block;padding:15px 16px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-1);margin-bottom:11px;color:var(--ink)}
.pcard:last-child{margin-bottom:0}
.pcard:hover{border-color:var(--terra);box-shadow:var(--shadow-2)}
.pcard.needs{border-color:var(--alert);border-width:2px}
.pcard.fin{background:var(--sage-wash);border-color:#CFE0D6}
.pc-name{font-weight:800;font-size:17px;color:var(--maroon);line-height:1.3}
.pc-sub{font-size:13.5px;color:var(--ink-muted);margin-top:3px}
.pc-now{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--terra);margin-top:2px}
.pc-now svg{width:17px;height:17px}
.pc-now.fin{color:var(--sage)}
.pc-money{margin-top:8px;font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--maroon)}
.pflag{display:flex;align-items:center;gap:7px;margin-top:9px;padding:8px 10px;border-radius:10px;
  font-size:13.5px;font-weight:700;line-height:1.35}
.pflag svg{width:16px;height:16px;flex:0 0 auto}
.pflag.wait,.pflag.late{background:var(--alert-wash);color:var(--alert)}

/* preset picker */
.presetgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:6px}
@media (min-width:820px){ .presetgrid{grid-template-columns:repeat(3,1fr)} }
.pset{position:relative;display:block;width:100%;text-align:left;padding:16px;background:#fff;
  border:2px solid var(--line);border-radius:var(--radius);color:var(--ink);min-height:52px}
.pset.on{border-color:var(--terra);background:var(--terra-wash)}
.pset-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:var(--maroon-wash);color:var(--maroon);margin-bottom:10px}
.pset.on .pset-ic{background:var(--terra);color:var(--on-accent)}
.pset-ic svg{width:22px;height:22px}
.pset b{display:block;font-size:17px;font-weight:800;color:var(--maroon)}
.pset-eg{display:block;font-size:13.5px;color:var(--terra);font-weight:700;margin-top:2px}
.pset-blurb{display:block;font-size:14px;color:var(--ink-muted);margin-top:6px;line-height:1.45}
.pset-n{display:inline-block;margin-top:10px;padding:3px 9px;border-radius:999px;background:var(--maroon-wash);
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--maroon)}
.pset.on .pset-n{background:#fff}
.pset-tick{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--terra);color:var(--on-accent)}
.pset-tick svg{width:17px;height:17px}

/* project head */
.phead{padding:17px 18px;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);margin-bottom:14px}
.phead h1{font-size:25px;line-height:1.25}
.ph-sub{font-size:14px;color:var(--ink-muted);margin-top:5px}
.ph-target{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 11px;border-radius:999px;
  background:var(--maroon-wash);color:var(--maroon);font-size:13.5px;font-weight:700}
.ph-target svg{width:16px;height:16px}
.ph-target.late{background:var(--alert-wash);color:var(--alert)}

/* the loud "where are we now" card */
.nowbox{padding:17px 18px;background:var(--terra-wash);border:2px solid var(--terra);
  border-radius:var(--radius);margin-bottom:14px}
.nowbox.waiting{background:var(--alert-wash);border-color:var(--alert)}
.nowbox.fin{background:var(--sage-wash);border-color:var(--sage)}
.now-t{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.nowbox.waiting .now-t{color:var(--alert)}
.nowbox.fin .now-t{color:var(--sage);text-transform:none;font-size:17px;letter-spacing:0}
.now-t svg{width:19px;height:19px}
.now-p{font-size:15.5px;color:var(--ink-muted)}
.now-step{display:flex;align-items:center;gap:13px;padding:14px;background:#fff;border-radius:13px;
  border:1.5px solid var(--line);margin-bottom:12px}
.now-step svg{width:26px;height:26px;color:var(--terra);flex:0 0 auto}
.now-step b{display:block;font-size:19px;color:var(--maroon);line-height:1.3}
.now-step small{display:block;font-size:14.5px;color:var(--ink-muted);margin-top:2px}
.now-wait,.now-gate{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border-radius:12px;
  margin-bottom:12px;font-size:14.5px;line-height:1.45}
.now-wait{background:#fff;border:1.5px solid var(--alert);color:var(--alert)}
.now-wait span,.now-gate span{min-width:0}
.now-wait b{display:block;font-size:15.5px}
.now-wait small{display:block;color:var(--ink-muted);font-size:14px;margin-top:2px}
.now-gate{background:#fff;border:1.5px solid var(--warn);color:var(--warn);font-weight:700}
.now-wait svg,.now-gate svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px}
.now-more{display:flex;justify-content:center;margin-top:4px}

/* money plan rows */
.moneyrow b.soft{color:var(--ink-muted);font-weight:700}
.moneyrow b.good{color:var(--sage)}
.planrows{margin-top:13px;border-top:1.5px solid var(--line);padding-top:11px}
.planrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.planrow:last-of-type{border-bottom:none}
.pl-ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--line-soft);color:var(--ink-faint);flex:0 0 auto}
.pl-ic svg{width:17px;height:17px}
.planrow.met .pl-ic{background:var(--sage);color:#fff}
.pl-mid{flex:1;min-width:0;overflow-wrap:anywhere}
.pl-mid b{display:block;font-size:15px;color:var(--maroon)}
.planrow.met .pl-mid b{color:var(--sage)}
.pl-mid small{display:block;font-size:13px;color:var(--ink-muted)}
.pl-amt{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}
.planfoot{margin-top:9px;font-size:13px;color:var(--ink-muted);line-height:1.45}

/* jobs on a project */
.jlist{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-bottom:13px}
.jrow{display:flex;align-items:center;gap:11px;padding:12px 13px;min-height:56px;min-width:0;background:#fff;
  border:1.5px solid var(--line);border-radius:13px;color:var(--ink)}
.jrow:hover{border-color:var(--terra)}
.jr-mid{flex:1;min-width:0;overflow:hidden}
.jr-mid b{display:block;font-family:var(--mono);font-size:14.5px;color:var(--maroon);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-mid small{display:block;font-size:13.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.jr-amt{font-family:var(--mono);font-size:15px;font-weight:700}
@media (max-width:560px){
  .jr-right{flex-direction:column;align-items:flex-end;gap:3px}
  .jrow .pill{font-size:12.5px}
}

/* the ladder */
.phaseh{display:flex;align-items:center;gap:10px;margin:16px 0 9px;font-size:15.5px;color:var(--maroon)}
.phaseh:first-child{margin-top:4px}
.ph-n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--maroon);color:var(--paper);font-family:var(--mono);font-size:14px;font-weight:800;flex:0 0 auto}
.phaseh b{flex:1;font-weight:800}
.phaseh i{font-style:normal;font-family:var(--mono);font-size:13.5px;color:var(--ink-muted);font-weight:700}
.ladder{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.srow{display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;min-height:56px;padding:11px 13px;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;color:var(--ink)}
.srow-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--line-soft);color:var(--ink-faint);flex:0 0 auto}
.srow-mark svg{width:18px;height:18px}
.srow-mid{flex:1;min-width:0;overflow-wrap:anywhere}
.srow-mid b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.srow-mid small{display:block;font-size:13.5px;color:var(--ink-muted);margin-top:1px}
.srow-note{color:var(--terra) !important;display:block !important;margin-top:3px;min-width:0}
.srow-note svg{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:5px}
.srow-go{color:var(--ink-faint);flex:0 0 auto}
.srow-go svg{width:19px;height:19px}
.srow.done{background:var(--sage-wash);border-color:#D5E4DB}
.srow.done .srow-mark{background:var(--sage);color:#fff}
.srow.done .srow-mid b{color:var(--sage)}
.srow.now{border-color:var(--terra);border-width:2px;background:var(--terra-wash)}
.srow.now .srow-mark{background:var(--terra);color:var(--on-accent)}
.srow.now .srow-mid b{color:var(--maroon);font-weight:800}
.srow-wait{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--alert-wash);
  color:var(--alert);font-size:12.5px;font-weight:700;flex:0 0 auto;max-width:44%}
.srow-wait svg{width:14px;height:14px;flex:0 0 auto}
@media (max-width:560px){
  .srow{flex-wrap:wrap}
  .srow-wait{max-width:none;order:9;width:100%;margin-left:44px;justify-content:flex-start}
}

/* step sheet + step picker */
.ss-head{display:flex;align-items:center;gap:12px;padding:13px;background:var(--maroon-wash);border-radius:13px;margin-bottom:14px}
.ss-head svg{width:24px;height:24px;color:var(--maroon);flex:0 0 auto}
.ss-head b{display:block;font-size:17px;color:var(--maroon)}
.ss-head small{display:block;font-size:14px;color:var(--ink-muted)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.wchip{display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 14px;background:#fff;
  border:1.5px solid var(--line);border-radius:12px;color:var(--ink);font-size:15px;font-weight:700}
.wchip svg{width:17px;height:17px;flex:0 0 auto}
.wchip.on{background:var(--maroon);border-color:var(--maroon);color:var(--paper)}
.wchip.wait.on{background:var(--alert);border-color:var(--alert);color:#fff}
.wchip.clear{color:var(--ink-muted)}
.wchip-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -10px 0 2px;
  padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.2);color:inherit}
.wchip-x svg{width:16px;height:16px}
.plainin{width:100%;min-height:56px;padding:0 15px;background:#fff;border:1.5px solid var(--line);
  border-radius:13px;font-size:16.5px;color:var(--ink)}
.plainin:focus{outline:none;border-color:var(--terra)}
.bigbtn.ghost.danger{color:var(--alert);border-color:var(--alert)}
.ticklist{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;margin-bottom:6px}
.tickrow{display:flex;align-items:center;gap:11px;min-height:48px;padding:6px 11px;background:#fff;
  border:1.5px solid var(--line);border-radius:11px;font-size:15px;cursor:pointer}
.tickrow input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--terra)}
.tickdone{font-style:normal;font-size:12.5px;color:var(--sage);font-weight:700}

/* step photos */
.photorow{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.photo{position:relative;width:88px;height:88px;border-radius:12px;overflow:hidden;border:1.5px solid var(--line)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo-x{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:none;border-radius:50%;background:rgba(36,12,13,.72);color:#fff}
.photo-x svg{width:15px;height:15px}
.photo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:88px;height:88px;border-radius:12px;border:2px dashed var(--line);background:#fff;
  color:var(--terra);font-size:11.5px;font-weight:700;text-align:center;cursor:pointer;padding:6px}
.photo-add svg{width:23px;height:23px}
.photo-add:hover{border-color:var(--terra);background:var(--terra-wash)}

/* attach-to-project confirmation on wizard step 1 */
.attached{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;margin-bottom:16px;border-radius:12px;
  background:var(--sage-wash);border:1.5px solid #CFE0D6;color:var(--ink);font-size:14.5px;line-height:1.45}
.attached svg{width:19px;height:19px;color:var(--sage);flex:0 0 auto;margin-top:1px}
.attached b{color:var(--maroon)}

/* project link on a job, and the workshop-job-card action */
.projlink{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;margin-bottom:14px;
  background:var(--maroon-wash);border:1.5px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.projlink:hover{border-color:var(--terra)}
.projlink > svg:first-child{width:23px;height:23px;color:var(--maroon);flex:0 0 auto}
.projlink span{flex:1;min-width:0}
.projlink b{display:block;font-size:16px;color:var(--maroon);line-height:1.3}
.projlink small{display:block;font-size:13.5px;color:var(--ink-muted)}
.actbtn.wsheet{margin-top:10px;background:#fff;border:1.5px dashed var(--line)}
.actbtn.wsheet small{display:block;font-size:13px;color:var(--ink-muted);font-weight:600}

/* the "needs you" mini stat, red only when it is not zero */
.ms-bad{border-color:var(--alert) !important;background:var(--alert-wash) !important}
.ms-bad .ms-n{color:var(--alert)}

/* three big choices on Home */
@media (min-width:900px){
  .bigchoices.tri{grid-template-columns:1.4fr 1fr 1fr}
}

/* ===== DESIGN C — the project report ===================================== */
.docC-sheet{background:var(--cream);width:100%;max-width:794px;border-radius:8px;border:1px solid var(--line);
  box-shadow:var(--shadow-2);padding:34px 38px 26px;font-family:var(--ui);color:var(--ink);font-size:12px;line-height:1.5}
.docC-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.docC-brand{display:flex;align-items:center;gap:12px}
.docC-brand img{height:46px;width:auto;object-fit:contain}
.docC-bizname{font-weight:800;font-size:14px;color:var(--maroon);line-height:1.25}
.docC-tagline{font-size:10.5px;color:var(--terra);font-style:italic}
.docC-label{text-align:right;font-size:16px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--maroon)}
.docC-refnum{text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--terra);font-weight:700}
.docC-refdate{text-align:right;font-size:10.5px;color:var(--ink-muted)}
.docC-rule{height:2px;background:var(--terra);margin:12px 0 16px}
.docC-projname{font-size:17px;font-weight:800;color:var(--maroon);line-height:1.3}
.docC-projmeta{font-size:11.5px;color:var(--ink-muted);margin-top:2px}
.docC-scope{margin-top:7px;font-size:11.5px;color:var(--ink);line-height:1.55}
.docC-progress{margin:16px 0 6px;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:7px}
.docC-progtop{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--maroon)}
.docC-progtop span{font-family:var(--mono);font-weight:700;color:var(--terra)}
.docC-bar{height:8px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin:8px 0 9px;border:1px solid var(--line)}
.docC-barfill{height:100%;background:var(--terra)}
.docC-next{font-size:12px;color:var(--ink)}
.docC-next.fin{color:var(--sage);font-weight:700}
.docC-wait{color:var(--alert);font-weight:700}
.docC-target{margin-top:4px;font-size:11px;color:var(--ink-muted)}
.docC-phase{margin-top:14px;page-break-inside:avoid;break-inside:avoid}
.docC-phaseh{display:flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1px solid var(--terra-light);margin-bottom:5px}
.docC-phn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  background:var(--maroon);color:#fff;font-family:var(--mono);font-size:10px;font-weight:800}
.docC-phaseh b{flex:1;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--maroon)}
.docC-phaseh i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-muted)}
.docC-step{display:flex;align-items:flex-start;gap:9px;padding:3.5px 0}
.docC-box{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 auto;
  border:1.2px solid var(--ink-faint);border-radius:3px;font-size:10px;line-height:1;color:var(--ink-faint);margin-top:1px}
.docC-step.done .docC-box{background:var(--sage);border-color:var(--sage);color:#fff}
.docC-step.now .docC-box{background:var(--terra);border-color:var(--terra);color:#fff}
.docC-steplabel{flex:1;min-width:0;font-size:11.5px;overflow-wrap:anywhere}
.docC-step.done .docC-steplabel{color:var(--ink-muted)}
.docC-step.now .docC-steplabel{font-weight:800;color:var(--maroon)}
.docC-stepnote{display:block;font-size:10.5px;color:var(--ink-muted);font-style:italic;margin-top:1px}
.docC-stepmeta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);flex:0 0 auto;text-align:right;min-width:96px}
.docC-money{margin-top:18px;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:7px;
  page-break-inside:avoid;break-inside:avoid}
.docC-moneyt{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--terra);font-weight:800;margin-bottom:7px}
.docC-mrow{display:flex;justify-content:space-between;padding:4px 0;font-size:11.5px;border-bottom:1px solid var(--line-soft)}
.docC-mrow .num{font-family:var(--mono);font-weight:700}
.docC-mrow.grand{border-bottom:none;border-top:1.4px solid var(--maroon);margin-top:3px;padding-top:7px;
  font-size:13px;font-weight:800;color:var(--maroon)}
.docC-moneynote{margin-top:8px;font-size:10px;color:var(--ink-muted);line-height:1.45;font-style:italic}
.docC-bottomfoot{margin-top:18px;padding-top:9px;border-top:1px solid var(--line);text-align:center;
  font-size:9.5px;color:var(--ink-faint)}

/* ===== DESIGN D — the workshop job card ================================== */
.docD-sheet{background:#fff;width:100%;max-width:794px;border-radius:8px;border:1px solid var(--line);
  box-shadow:var(--shadow-2);padding:30px 34px 24px;font-family:var(--ui);color:var(--ink);font-size:12.5px;line-height:1.45}
.docD-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:12px;border-bottom:3px solid var(--maroon)}
.docD-title{font-size:23px;font-weight:800;letter-spacing:-.3px;color:var(--maroon);text-transform:uppercase}
.docD-ref{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--terra);margin-top:2px}
.docD-headright{text-align:right}
.docD-biz{font-weight:800;font-size:13px;color:var(--maroon)}
.docD-date{font-size:11px;color:var(--ink-muted)}
.docD-info{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:14px 0 16px;
  border:1.4px solid var(--line);border-radius:6px;overflow:hidden}
.docD-icell{padding:9px 11px;border-left:1.4px solid var(--line)}
.docD-icell:first-child{border-left:none}
.docD-icell span{display:block;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--terra);font-weight:800}
.docD-icell b{display:block;font-size:12.5px;margin-top:2px;line-height:1.3}
.docD-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px}
.docD-table{width:100%;min-width:520px;border-collapse:collapse}
.docD-table th{background:var(--maroon);color:#fff;text-align:left;padding:8px 9px;font-size:10px;
  letter-spacing:.7px;text-transform:uppercase;font-weight:800}
.docD-table td{padding:11px 9px;border-bottom:1.2px solid var(--line);vertical-align:top;font-size:12.5px}
.docD-table tr:nth-child(even) td{background:#FBF9F7}
.docD-table th.tick,.docD-table td.tick{width:46px;text-align:center}
/* A real box to tick with a pencil — this sheet lives on the bench. */
.docD-box{display:inline-block;width:19px;height:19px;border:1.6px solid var(--maroon);border-radius:3px}
.docD-size{font-family:var(--mono);font-weight:700;white-space:nowrap}
.docD-qty{font-family:var(--mono);font-weight:800;text-align:center}
.docD-note{font-size:11px;color:var(--terra);font-style:italic;margin-top:2px}
.docD-notes{margin-bottom:16px}
.docD-noteslabel{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--terra);font-weight:800;margin-bottom:6px}
.docD-lines span{display:block;border-bottom:1.2px solid var(--line);height:24px}
.docD-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px;
  page-break-inside:avoid;break-inside:avoid}
.docD-sigline{border-top:1.2px solid var(--ink-faint);padding-top:6px;font-size:10.5px;color:var(--ink-muted)}
.docD-foot{margin-top:18px;padding-top:9px;border-top:1px solid var(--line);text-align:center;
  font-size:9.5px;color:var(--ink-faint);letter-spacing:.4px;text-transform:uppercase;font-weight:700}
@media (max-width:640px){
  .docC-sheet{padding:20px 16px 22px}
  .docD-sheet{padding:20px 16px 22px}
  .docD-info{grid-template-columns:1fr}
  .docD-icell{border-left:none;border-top:1.4px solid var(--line)}
  .docD-icell:first-child{border-top:none}
  .docD-sign{grid-template-columns:1fr;gap:20px}
  .docC-stepmeta{min-width:0}
}

/* =====================================================================
   DOCUMENT VIEWER SHELL
   ===================================================================== */
.docviewer-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.doc-stage-wrap{display:flex;justify-content:center}

/* =====================================================================
   THE LETTERHEAD — shared by the Quotation and the Tax Invoice.

   Built to the template the client picked. Rendered in Al Amoud's own
   maroon rather than the reference's black, because the maroon IS their
   logo colour and reads as near-black anyway (15.77:1 on the paper).

   COLOUR RULE, measured not eyeballed: gold #C9A227 clears AA on maroon
   (6.96:1) so it carries figures and labels INSIDE the dark areas — but it
   is 2.27:1 on the cream paper, so it never carries text out there. Small
   caps labels on paper are terracotta #84481F (6.72:1).

   No `gap` and no inline <svg> anywhere in this block: both are documented
   html2canvas failures in this repo and all of it has to survive the PDF
   export. Spacing is margins only.
   ===================================================================== */
:root{
  --doc-gold:#C9A227;
  --doc-gold-soft:#E2C56A;
}

.docE-sheet{
  position:relative;overflow:hidden;width:100%;max-width:794px;
  /* A FULL A4 page, always. 794px wide is 210mm, so 1122px is 297mm — one
     page exactly. Without this the sheet was only as tall as its content, so
     a short quotation ended at 80% of the page and the maroon contact band
     floated in the middle with white underneath it. A letterhead's footer
     belongs at the foot of the PAGE. A long document simply grows past this
     and paginates, with the band landing at the bottom of the last page. */
  min-height:1122px;
  border-radius:8px;border:1px solid var(--line);box-shadow:var(--shadow-2);
  font-family:var(--ui);color:var(--ink);font-size:12px;line-height:1.5;
  /* Clearance for the contact band. The band is 149px tall on the page
     and its gold ribbon starts ~62px down, so the last ~87px is inked —
     plus air for the signature's second line and its descenders. An
     earlier 94px printed "Authorised Signatory" straight onto the gold. */
  padding-bottom:118px;
}
.docE-sheet.is-quo{background:var(--cream)}
.docE-sheet.is-inv{background:#FFFFFF}

/* The two curved bands. Raster PNGs, positioned — see make-letterhead.py for
   why they are not SVG. */
.docE-wtop{position:absolute;top:0;left:0;width:100%;height:auto;display:block}
.docE-wbot{position:absolute;bottom:0;left:0;width:100%;height:auto;display:block}

/* ---------------- masthead, sitting inside the dark sweep -------------- */
.docE-head{position:relative;z-index:2;display:flex;justify-content:space-between;
  align-items:flex-start;padding:26px 40px 0}
.docE-brand{display:flex;align-items:flex-start;max-width:56%}
/* The client's logo is maroon-on-white artwork; on a maroon field it would
   vanish, and recolouring a real logo to suit a layout is not something this
   repo does. A white chip is the honest fix. */
.docE-chip{display:block;flex:0 0 auto;background:#fff;border-radius:6px;padding:6px 8px;margin-right:12px}
.docE-chip img{display:block;height:40px;width:auto;object-fit:contain}
.docE-bizwrap{display:block;padding-top:2px;min-width:0}
.docE-bizname{display:block;font-size:12.5px;font-weight:800;color:var(--doc-gold-soft);
  line-height:1.35;letter-spacing:.2px}
.docE-tag{display:block;font-size:10px;color:rgba(251,247,241,.72);font-style:italic;margin-top:2px}
.docE-titlewrap{text-align:right;padding-top:34px;flex:0 0 auto}
.docE-title{font-size:27px;font-weight:800;letter-spacing:3px;color:var(--maroon);line-height:1}
.docE-kicker{font-family:var(--mono);font-size:10px;color:var(--terra);margin-top:5px;letter-spacing:.4px}

/* ---------------- body ------------------------------------------------- */
.docE-body{position:relative;z-index:2;padding:0 40px}
/* The band is 794 x 198.5px on the page and its lowest point (curve +
   ribbon) sits at ~162px. The masthead above ends at ~78px, so this is
   what keeps "BILL TO" clear of the sweep. Re-measure if the curve in
   tools/make-letterhead.py changes. */
.docE-body{margin-top:98px}

.docE-lab{font-size:9.5px;font-weight:800;letter-spacing:1.2px;color:var(--terra);margin-bottom:5px}

.docE-info{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.docE-to{max-width:52%}
.docE-cname{font-size:15px;font-weight:800;color:var(--maroon);line-height:1.3}
.docE-caddr{font-size:11px;color:var(--ink-muted);margin-top:3px;line-height:1.55}
.docE-meta{min-width:238px}
.docE-mrow{display:flex;align-items:baseline;margin-bottom:6px}
.docE-mlab{width:96px;flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.9px;color:var(--terra)}
.docE-mcol{width:14px;flex:0 0 auto;color:var(--ink-faint);font-size:11px}
.docE-mval{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink)}
.docE-badgerow{margin-top:9px}
/* No CSS gap and no icon inside this badge: the icon+gap combination is what
   emptied the old status pill in the exported PDF. Status is carried by the
   WORD, so it never depends on colour alone. */
.docE-badge{display:inline-block;padding:5px 14px;border-radius:999px;font-size:10px;
  font-weight:800;letter-spacing:1.4px;color:#fff}
.docE-badge.due{background:var(--alert)}
.docE-badge.partial{background:var(--warn)}
.docE-badge.paid{background:var(--sage)}

.docE-scope{font-size:11.5px;color:var(--ink);line-height:1.6;margin-bottom:14px;
  padding-left:11px;border-left:2px solid var(--doc-gold)}

/* ---------------- the item table --------------------------------------- */
.docE-tablewrap{border:1px solid var(--doc-gold);border-radius:11px;overflow:hidden;margin-bottom:14px}
.docE-table{width:100%;border-collapse:collapse}
.docE-table th{background:var(--maroon);color:var(--cream);text-align:left;padding:9px 12px;
  font-size:9px;font-weight:800;letter-spacing:1.1px}
.docE-table td{padding:8.5px 12px;border-top:1px solid var(--line-soft);vertical-align:middle;font-size:11.5px}
.docE-sheet.is-quo .docE-table tbody tr:nth-child(even) td{background:rgba(201,162,39,.06)}
.docE-sheet.is-inv .docE-table tbody tr:nth-child(even) td{background:#FBF9F6}
.docE-table .c-no{width:42px;text-align:center}
.docE-table td.c-no{font-family:var(--mono);font-weight:800;color:var(--terra)}
.docE-table .c-qty{width:96px;white-space:nowrap}
.docE-table td.c-qty{font-family:var(--mono);font-size:11px}
.docE-table .c-rate{width:104px;text-align:right;white-space:nowrap}
.docE-table td.c-rate{font-family:var(--mono);font-size:11px}
.docE-table .c-amt{width:104px;text-align:right;white-space:nowrap}
.docE-table td.c-amt{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--maroon)}
.docE-table th.c-qty,.docE-table th.c-rate,.docE-table th.c-amt{text-align:right}
.docE-table th.c-qty{text-align:left}
.docE-iname{display:block;font-weight:700;color:var(--ink);line-height:1.35}
.docE-ispec{display:block;font-size:10px;color:var(--ink-muted);margin-top:1px}
.docE-icat{display:block;font-size:9px;letter-spacing:.5px;color:var(--ink-faint);margin-top:1px}
.docE-per{color:var(--ink-faint)}
.docE-none{text-align:center;color:var(--ink-faint);padding:18px}

/* ---------------- lower half ------------------------------------------- */
.docE-lower{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.docE-lleft{width:54%;padding-right:22px}
.docE-terms{margin:0;padding-left:15px;font-size:10px;color:var(--ink-muted);line-height:1.6}
.docE-terms li{margin-bottom:2px}
.docE-bank{font-size:10.5px;color:var(--ink);line-height:1.6;white-space:pre-line}
.docE-note{margin:0;font-size:10px;color:var(--ink-muted);line-height:1.6}

.docE-totals{width:290px;flex:0 0 auto}
.docE-trow{display:flex;justify-content:space-between;align-items:center;
  padding:7px 14px;background:rgba(201,162,39,.10);font-size:10.5px;font-weight:800;
  letter-spacing:.7px;color:var(--ink-muted)}
.docE-trow b{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--ink);letter-spacing:0}
.docE-trow.paid b{color:var(--sage)}
.docE-sheet.is-inv .docE-trow{background:#F6F1E9}
/* The dark bar with the figure in gold — the reference's single loudest
   element, and the one thing a customer looks for. */
.docE-tbar{display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;background:var(--maroon);color:var(--cream);
  font-size:11.5px;font-weight:800;letter-spacing:1.4px}
.docE-tbar b{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--doc-gold);letter-spacing:0}
.docE-tbar.due{background:var(--maroon-deep);margin-top:1px}
.docE-totals > *:first-child{border-radius:9px 9px 0 0}
.docE-totals > *:last-child{border-radius:0 0 9px 9px}

/* ---------------- notes + thank you ------------------------------------ */
.docE-close{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4px}
.docE-notes{width:56%}
.docE-notes p{margin:0;font-size:10px;color:var(--ink-muted);line-height:1.6}
/* Georgia is on every Windows, Mac, iOS and Android device that matters and
   needs no webfont — this document has to open in a yard with no signal, and
   a half-loaded webfont makes the PDF unpredictable because html2canvas
   rasterises whatever happened to resolve. Terracotta, not gold: gold on this
   paper is 2.27:1 and unreadable even at this size. */
.docE-thanks{text-align:right;font-family:Georgia,'Times New Roman',serif;font-style:italic;
  font-size:24px;color:var(--terra);line-height:1.1}
.docE-thanks span{display:block;font-family:var(--ui);font-style:normal;font-size:8.5px;
  font-weight:800;letter-spacing:2.6px;color:var(--ink-faint);margin-top:4px}

/* ---------------- signature -------------------------------------------- */
.docE-sign{display:flex;justify-content:space-between;margin-top:10px}
.docE-sign > div{width:46%}
.docE-sigline{border-top:1px solid var(--ink-faint);padding-top:5px;font-size:9px;
  font-weight:800;letter-spacing:.9px;color:var(--ink-muted)}

/* ---------------- the contact band ------------------------------------- */
.docE-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;
  justify-content:space-between;align-items:flex-end;padding:0 40px 20px}
.docE-fcol{font-size:10px;color:rgba(251,247,241,.86);line-height:1.6}
.docE-fcol.right{text-align:right}
.docE-frow b{display:inline-block;width:26px;color:var(--doc-gold);font-weight:800;font-size:8.5px;letter-spacing:.6px}
.docE-fname{font-size:10.5px;font-weight:800;color:var(--doc-gold-soft)}
.docE-faddr{font-size:9.5px;color:rgba(251,247,241,.74);margin-top:1px}

@media (max-width:640px){
  .docE-head{padding:18px 18px 0}
  .docE-body{padding:0 18px}
  .docE-foot{padding:0 18px 16px}
  .docE-title{font-size:20px;letter-spacing:2px}
  .docE-chip img{height:30px}
  .docE-info{display:block}
  .docE-to{max-width:none;margin-bottom:12px}
  .docE-meta{min-width:0}
  .docE-lower{display:block}
  .docE-lleft{width:auto;padding-right:0;margin-bottom:14px}
  .docE-totals{width:100%}
  .docE-close{display:block}
  .docE-notes{width:auto}
  .docE-thanks{text-align:left;margin-top:12px;font-size:22px}
  .docE-tablewrap{overflow-x:auto}
  .docE-table{min-width:560px}
}

/* Signature block inside the printed document. MUST stay a raster image —
   html2canvas draws nothing at all for an SVG data URI inside an <img>: no
   error, just a blank signature area. Verified by counting inked pixels in
   a real export (0 as SVG, several thousand as PNG). */
.doc-sigpad{height:44px;display:flex;align-items:flex-end;padding-bottom:2px}
.doc-sigimg{max-height:42px;max-width:180px;object-fit:contain;display:block}
.doc-sigmeta{font-size:8.6px;color:var(--sage);font-weight:700;margin-top:3px;letter-spacing:.2px}

/* ═══════════════════ document responsive ═══════════════════════════════ */

/* ═══════════════════ print (PDF export uses the same sheet) ════════════ */
@media print{
  body *{visibility:hidden}
  .docE-sheet,.docE-sheet *,.docC-sheet,.docC-sheet *,.docD-sheet,.docD-sheet *{visibility:visible}
  .docE-sheet,.docC-sheet,.docD-sheet{position:absolute;left:0;top:0;width:100%;max-width:100%;box-shadow:none;border:none}
  @page{size:A4;margin:0}
}