/* ===== Aseel Interior Design — app shell ==================================
   Third build to this bar (a non-technical owner runs it alone), so the same
   physical rules: tap targets >= 52px, primary buttons 60px, body 16.5px,
   one loud button per screen, pictures before words.

   PALETTE — every pair computed, none eyeballed. An interior studio's own
   brand has to look designed without competing with the work it presents, so
   this is a near-black green with one earth accent on a warm paper ground:

     ink       #16302B  14.08:1 on white  - chrome, ink, masthead
     accent    #9A4A28   6.21:1 on white  - buttons WITH WHITE TEXT, links
     sage      #3F6353   6.73:1 on white  - done / paid / approved
     muted     #55635C   5.96:1 on cream  - secondary text
     faint     #63706A   4.89:1 on cream  - captions (NOT #8A968F, which
                                            measured 2.90 and failed)
     clay      #C0663F   4.03:1           - TINT AND BORDER ONLY. It fails
                                            white-on (4.03) and dark-on (4.14)
                                            alike, so unlike the other builds'
                                            gold it is never a button fill and
                                            never carries text.

   That last line is the real finding of this palette: an accent that looks
   right can still be unusable as a surface, and the honest fix is to demote
   it to decoration and promote a deeper shade for anything text sits on. */
:root{
  --ink:#16302B;
  --ink-2:#1E403A;
  --ink-deep:#0E211D;
  --ink-wash:#E9EFEC;
  --accent:#9A4A28;
  --accent-2:#7E3A1E;
  --clay:#C0663F;              /* tint / border only — see header */
  --clay-wash:#F8EDE6;
  --sage:#3F6353;
  --sage-wash:#E7EFEA;
  --sand:#F0E7D8;
  --cream:#FBF8F3;
  --paper:#FFFFFF;
  --text:#1C2A26;
  --muted:#55635C;
  --faint:#63706A;
  --line:#E4DACB;
  --line-soft:#F1EADD;
  --danger:#A03A28;
  --shadow-1:0 1px 2px rgba(22,48,43,.07), 0 1px 1px rgba(22,48,43,.05);
  --shadow-2:0 10px 26px rgba(22,48,43,.14), 0 2px 7px rgba(22,48,43,.07);
  --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(--text);font-family:var(--ui);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(--ink)}
p{margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:var(--ink);text-decoration:none}
input,textarea,select{font-family:inherit}
/* Safety net — icons.js returns a bare <svg> with no width/height, and one
   missed rule renders it at ~150px. Anything more specific still wins. */
svg{width:20px;height:20px;display:block;flex:0 0 auto}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ===== Chrome ============================================================= */
.topbar{position:sticky;top:0;z-index:50;height:64px;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;gap:22px;padding:0 22px}
.tb-brand{display:flex;align-items:center;gap:11px;color:var(--cream);flex:0 0 auto}
.tb-mark{width:36px;height:36px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff}
.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(251,248,243,.78);font-weight:700;font-size:14.5px}
.tb-link svg{width:19px;height:19px}
.tb-link:hover{background:rgba(251,248,243,.1);color:var(--cream)}
.tb-link.on{background:var(--accent);color:#fff}

.bottomnav{display:none}
@media (max-width:880px){
  .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(--muted);font-size:12.5px;font-weight:700}
  .bn svg{width:23px;height:23px}
  .bn.on{color:var(--ink);background:var(--ink-wash)}
  .bn-main{background:var(--accent);color:#fff;margin:0 6px;font-weight:800}
  .bn-main svg{width:25px;height:25px}
  .tb-nav{display:none}
}

.page{max-width:1080px;margin:0 auto;padding:24px 20px 40px}
.page-narrow{max-width:760px}
@media (max-width:880px){ .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(--muted);font-size:15.5px;margin:-6px 0 16px;max-width:680px}

/* ===== Home =============================================================== */
.hello{margin-bottom:22px}
.hello h1{font-size:30px;letter-spacing:-.4px}
.hello p{color:var(--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(--clay-wash);border:2px solid var(--clay);border-radius:var(--radius);color:var(--ink)}
.resume svg{color:var(--accent)}
.resume span{flex:1;min-width:0}
.resume b{display:block;font-size:16px}
.resume small{display:block;color:var(--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(--ink);box-shadow:var(--shadow-1)}
.bigchoice .bc-ic{width:54px;height:54px;border-radius:15px;background:var(--ink-wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:9px;color:var(--ink)}
.bigchoice .bc-ic svg{width:28px;height:28px}
.bigchoice b{font-size:21px;font-weight:800}
.bigchoice small{font-size:15px;color:var(--muted)}
.bigchoice.primary{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.bigchoice.primary .bc-ic{background:var(--accent);color:#fff}
.bigchoice.primary small{color:rgba(251,248,243,.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(--muted);font-size:14.5px}
.ms-n{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--ink);line-height:1.1}
.ms-money{font-size:20px}
.ms-warn{border-color:var(--clay);background:var(--clay-wash)}

/* ===== Studio board ======================================================= */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
@media (max-width:1000px){ .board{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .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:15.5px;color:var(--ink);line-height:1.3}
.bcol-h i{font-style:normal;font-family:var(--mono);font-weight:800;font-size:13.5px;color:#fff;
  background:var(--ink);border-radius:999px;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0 7px}
.bcol-hint{font-size:12.5px;color:var(--faint);margin:3px 0 12px}
.bempty{padding:20px 8px;text-align:center;color:var(--faint);font-size:14px;border:2px dashed var(--line);border-radius:12px}
.jcard{display:block;padding:13px;margin-bottom:10px;background:var(--cream);border:1.5px solid var(--line);border-radius:13px}
.jcard:hover{border-color:var(--ink)}
.jcard b{display:block;font-size:15.5px;color:var(--ink);line-height:1.35}
.jcard small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.jc-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:9px;flex-wrap:wrap}
.jc-money{font-family:var(--mono);font-weight:800;font-size:15px;color:var(--ink)}
.jc-tag{font-size:12.5px;font-weight:700;color:var(--accent)}

/* ===== Wizard ============================================================= */
.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(--ink);font-weight:700;font-size:15px}
.backbtn:hover{background:var(--ink-wash)}
.stepbar{height:8px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-bottom:12px}
.stepbar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}
.stepnum{font-size:13.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent)}
.stepq{font-size:29px;letter-spacing:-.4px;margin-top:3px}
@media (max-width:640px){ .stepq{font-size:25px} }
.stephint{color:var(--muted);font-size:15.5px;margin-top:7px}
/* The way forward is always on screen, pinned above the phone bottom nav. */
.stepfoot{position:fixed;left:0;right:0;bottom:0;z-index:65;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(251,248,243,.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:880px){ .stepfoot{bottom:70px} }
.page-step{padding-bottom:120px}
@media (max-width:880px){ .page-step{padding-bottom:190px} }
body.has-cartbar .page-step{padding-bottom:150px}
@media (max-width:880px){ body.has-cartbar .page-step{padding-bottom:250px} }

/* ===== Controls =========================================================== */
.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(--ink);color:var(--cream);
  font-size:18px;font-weight:800;box-shadow:var(--shadow-1)}
.bigbtn svg{width:23px;height:23px}
.bigbtn:active{transform:scale(.99)}
.bigbtn.save{background:var(--sage);color:#fff}
.bigbtn.go{background:var(--ink)}
.bigbtn.ghost{background:#fff;color:var(--ink);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(--ink);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:36px;font-size:13.5px;padding:0 8px;color:var(--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(--ink);margin-bottom:14px}
.card-t svg{color:var(--accent)}
.cardnote{color:var(--muted);font-size:14.5px;margin-bottom:14px;line-height:1.5}
.cardnote b{color:var(--ink)}
.bigfield{margin-bottom:16px}
.bigfield:last-child{margin-bottom:0}
.bigfield label{display:block;font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:7px}
.bigfield .opt{font-weight:600;color:var(--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(--text)}
.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(--ink);box-shadow:0 0 0 4px rgba(22,48,43,.12)}
.bigfield input.bad{border-color:var(--danger);background:var(--clay-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(--text);text-overflow:ellipsis}
@media (max-width:400px){ .ccsel{flex:0 0 132px;font-size:14px} }
.phonerow input{flex:1;min-width:0}
.sub-label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--muted);margin:20px 0 10px}
.sub-label.sm{margin:18px 0 9px;font-size:14px}
.sub-label svg{width:18px;height:18px;color:var(--accent)}
.recentrow{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}
.recentrow::-webkit-scrollbar{height:0}
.recentchip{flex:0 0 auto;max-width:250px;text-align:left;min-height:58px;padding:9px 15px;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;color:var(--ink)}
.recentchip b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recentchip small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nomatch{display:flex;align-items:center;gap:10px;padding:14px;color:var(--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(--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(--faint);padding:8px;display:flex}
.tabrow{display:flex;gap:9px;margin-bottom:14px}
.tabbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;font-weight:800;font-size:16px;color:var(--ink)}
.tabbtn svg{width:20px;height:20px;color:var(--accent)}
.tabbtn.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.tabbtn.on svg{color:#fff}

/* ===== Room pictures & grid =============================================== */
.room-pic{display:flex;align-items:center;justify-content:center;width:100%;height:104px;
  border-radius:13px;overflow:hidden;background:var(--sand)}
.room-pic.is-work{background:var(--ink-wash)}
.room-pic svg,.room-pic img{width:88%;height:88%;object-fit:contain}
.room-pic.sm{width:56px;height:56px;flex:0 0 auto;border-radius:11px}
.room-pic.sm svg,.room-pic.sm img{width:92%;height:92%}
@media (max-width:640px){ .room-pic{height:92px} }
.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:4px;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(--ink)}
.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(--ink);margin-top:4px}
.prod-price{font-family:var(--mono);font-size:14.5px;font-weight:800;color:var(--accent)}
.prod-cat{font-size:12.5px;color:var(--faint)}

/* ===== The room sheet ===================================================== */
.sheet-tall{max-height:94vh}
.measure{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:4px}
@media (max-width:520px){ .measure{grid-template-columns:96px minmax(0,1fr);gap:12px} }
.mshape{width:100%}
.mshape .room-pic{height:auto;aspect-ratio:1/1}
.mfields{min-width:0}
.areabox{position:relative}
.areabox input{width:100%;min-height:58px;padding:0 54px 0 14px;font-family:var(--mono);font-size:24px;font-weight:800;
  color:var(--ink);border:2px solid var(--line);border-radius:12px;background:#fff}
.areabox input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(22,48,43,.12)}
.areabox i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:14px;font-weight:700;color:var(--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(--ink);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(--muted)}
.preset.on,.preset:hover{border-color:var(--accent);background:var(--clay-wash)}

/* Scope is three big cards, never a dropdown — it is the biggest lever on
   both the price and what the studio owes, so it has to be readable. */
.scopes{display:flex;flex-direction:column;gap:10px}
.scope{display:flex;flex-direction:column;gap:6px;padding:15px 16px;text-align:left;
  background:#fff;border:2px solid var(--line);border-radius:14px;color:var(--ink)}
.scope.on{border-color:var(--ink);background:var(--ink-wash);box-shadow:0 0 0 3px rgba(22,48,43,.08)}
.scope.static{cursor:default}
.sc-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sc-h b{font-size:16.5px;font-weight:800}
.sc-h i{font-style:normal;font-family:var(--mono);font-weight:800;font-size:16px;color:var(--accent);white-space:nowrap}
.sc-b{font-size:14px;color:var(--muted);line-height:1.5}
.sc-r{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--sage)}
.sc-r svg{width:16px;height:16px}
.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(--ink-wash);border:1.5px solid var(--line);border-radius:12px;color:var(--ink)}
.qbtn:active{background:var(--ink);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(--ink);border:2px solid var(--line);border-radius:12px;background:#fff}
.sheet-price{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:var(--ink);color:var(--cream)}
.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(--clay)}
.sp-rate{font-size:13px;color:rgba(251,248,243,.75)}
.sp-total{font-family:var(--mono);font-size:26px;font-weight:800;white-space:nowrap}

/* ===== Cart bar =========================================================== */
.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:880px){ .cartbar{bottom:74px} }
.cartbar-in{display:flex;align-items:center;gap:12px;max-width:1080px;margin:0 auto;
  background:var(--ink);color:var(--cream);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(--accent);color:#fff;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(251,248,243,.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(--ink)}
.who-t svg{color:var(--accent)}
.who-p{display:flex;align-items:center;gap:7px;color:var(--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 > .room-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(--ink);line-height:1.3}
.chk-mid small{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.chk-amt{grid-area:amt;font-family:var(--mono);font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap}
.chk-unit{font-family:var(--ui);font-size:12px;font-weight:700;color:var(--faint)}
.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}
@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(--ink)}
.addmore:hover{background:var(--ink-wash);border-color:var(--ink)}
.totalcard{margin-top:16px;padding:16px 18px;background:#fff;border:2px solid var(--ink);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(--muted)}
.tc-row b{font-family:var(--mono);font-size:17px;font-weight:800;color:var(--text)}
.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(--ink);font-weight:800;font-size:19px}
.tc-grand b{font-size:27px;color:var(--ink)}

/* ===== Phase list / track ================================================= */
.phaselist{display:flex;flex-direction:column;gap:8px}
.phrow{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--cream);
  border:1.5px solid var(--line);border-radius:12px}
.ph-pct{flex:0 0 auto;min-width:46px;font-family:var(--mono);font-weight:800;font-size:15px;color:var(--accent)}
.ph-mid{flex:1;min-width:0}
.ph-mid b{display:block;font-size:15px;color:var(--ink)}
.ph-mid small{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.ph-amt{font-family:var(--mono);font-weight:800;font-size:15.5px;color:var(--ink);white-space:nowrap}

.phasetrack{display:flex;flex-direction:column;gap:12px}
.ph{border:1.5px solid var(--line);border-radius:14px;padding:14px;background:var(--cream)}
.ph.active{border-color:var(--accent);background:var(--clay-wash)}
.ph.done{border-color:var(--ink)}
.ph.invoiced{border-color:var(--accent);background:#fff}
.ph.paid{border-color:var(--sage);background:var(--sage-wash)}
.ph-top{display:flex;align-items:flex-start;gap:11px}
.ph-n{flex:0 0 auto;width:30px;height:30px;border-radius:999px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;font-family:var(--mono)}
.ph.paid .ph-n{background:var(--sage)}
.ph.active .ph-n,.ph.invoiced .ph-n{background:var(--accent)}
.ph-name{flex:1;min-width:0}
.ph-name b{display:block;font-size:16px;color:var(--ink)}
.ph-name small{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.ph-money{font-family:var(--mono);font-weight:800;font-size:16px;color:var(--ink);white-space:nowrap}
.ph-state{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--muted)}
.ph-state svg{width:17px;height:17px}
.ph.paid .ph-state{color:var(--sage)}
.ph.invoiced .ph-state{color:var(--accent)}
.phbtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:11px;
  border:none;border-radius:12px;background:var(--ink);color:var(--cream);font-weight:800;font-size:16px}
.phbtn.invoice{background:var(--accent);color:#fff}
.phbtn.paid{background:var(--sage);color:#fff}
.phlink{display:inline-flex;align-items:center;gap:7px;margin-top:9px;min-height:44px;font-weight:700;font-size:14.5px;color:var(--accent)}
.phlink svg{width:17px;height:17px}
.phsum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:14px;border-top:1.5px solid var(--line)}
@media (max-width:560px){ .phsum{grid-template-columns:1fr} }
.phsum div{display:flex;flex-direction:column;gap:2px}
.phsum span{font-size:13px;color:var(--muted);font-weight:600}
.phsum b{font-family:var(--mono);font-size:18px;font-weight:800;color:var(--ink)}

/* ===== Projects 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(--text)}
.filterbtn i{font-style:normal;font-family:var(--mono);font-weight:800;color:var(--faint)}
.filterbtn.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.filterbtn.on i{color:var(--clay)}
.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(--ink)}
.br-main{flex:1;min-width:0}
.br-main b{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.3}
.br-main small{display:block;font-size:13.5px;color:var(--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(--ink)}
.br-right svg{color:var(--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-draft{background:var(--ink-wash);color:var(--ink)}
.s-sent{background:#E4EEF3;color:#1F4E63}
.s-started{background:var(--clay-wash);color:var(--accent)}
.s-running{background:var(--clay-wash);color:var(--accent)}
.s-complete{background:var(--sage-wash);color:var(--sage)}

/* ===== Project 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(--text)}
.billhead{margin:14px 0 18px}
.billhead h1{font-size:27px;letter-spacing:-.3px}
.bh-sub{font-family:var(--mono);font-size:14px;color:var(--muted);margin:3px 0 9px}
.bh-total{font-family:var(--mono);font-size:36px;font-weight:800;color:var(--ink);margin-top:11px;line-height:1.1}
.bh-note{font-size:14.5px;color:var(--muted);margin-top:3px}
.bh-due{margin-top:6px;font-size:16px;color:var(--accent)}
.bh-due b{font-family:var(--mono);font-weight:800}
.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(--ink);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(--ink);text-align:left}
.actbtn b{display:block;font-size:16.5px;font-weight:800}
.actbtn small{display:block;font-size:13.5px;color:var(--muted)}
.actbtn span{flex:1;min-width:0}
.actbtn.wa{background:#25A366;border-color:#25A366;color:#fff}
.actbtn.wa small{color:rgba(255,255,255,.85)}
.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(--ink);border-color:var(--ink);color:var(--cream)}
.actbtn.share{background:var(--accent);border-color:var(--accent);color:#fff}
.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} }
.marksent{margin-top:8px}
.sentnote{display:flex;align-items:flex-start;gap:10px;margin-top:10px;font-size:14.5px;color:var(--sage);font-weight:700}
.sentnote > svg:first-child{width:19px;height:19px;margin-top:2px}
.sentnote span{flex:1;min-width:0}
.sentnote b{display:block;font-size:15px}
.sentnote small{display:block;font-weight:600;font-size:13.5px;color:var(--muted);line-height:1.45}
.minor{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* ===== Preview ============================================================ */
.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(--ink);margin-bottom:12px}
.pv-head > svg:first-child{color:var(--accent)}
.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}
/* flex-shrink:0 is load-bearing — as a flex item the 794px sheet is shrunk by
   the box model BEFORE its transform applies, which reads as broken scaling. */
.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}

/* ===== 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(--faint);pointer-events:none}

/* ===== Sheet / empty / toast ============================================== */
.ov{position:fixed;inset:0;z-index:90;background:rgba(14,33,29,.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;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(--text)}
.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{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(--faint);margin-bottom:6px}
.empty b{font-size:19px;color:var(--ink)}
.empty span{color:var(--muted);font-size:15.5px}
/* pointer-events:none is load-bearing: the toast is fixed at the bottom with
   the highest z-index and lands on top of the pinned primary button, where it
   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(--ink);color:var(--cream);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(--clay);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:881px){ .toast{bottom:100px} }

/* ===== THE DOCUMENT ======================================================= */
.doc-stage-wrap{display:flex;justify-content:center}
.doc-sheet{background:#fff;color:#1C2A26;width:794px;max-width:100%;margin:0 auto;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-2);
  font-size:12px;line-height:1.5}
.doc-mast{background:var(--ink);color:#fff;padding:22px 30px 20px}
.doc-mast-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.doc-bizname{font-size:16px;font-weight:800;letter-spacing:.2px}
.doc-bizaddr{font-size:9.6px;color:rgba(255,255,255,.8);margin-top:4px;line-height:1.6}
.doc-titlewrap{text-align:right;flex:0 0 auto}
.doc-title{font-size:19px;font-weight:800;letter-spacing:.5px}
.doc-subtitle{font-size:9.2px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--clay);margin-top:2px}
.doc-refnum{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.85);margin-top:4px}
.doc-refdate{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.7)}
.doc-body{padding:24px 30px 26px}
/* flex, never grid, inside the sheet — html2canvas resolves flex reliably. */
.doc-infogrid{display:flex;border:1.4px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px}
.doc-infocell{flex:1;padding:10px 13px;border-left:1.4px solid var(--line)}
.doc-infocell:first-child{flex:1.5;border-left:none}
.doc-infolabel{font-size:8.8px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:800;margin-bottom:4px}
.doc-infoval{font-weight:700;color:var(--ink);font-size:12px}
.doc-infoval .small{font-size:10.4px;font-weight:600;color:var(--muted);margin-top:2px}
.doc-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:14px;border:1.4px solid var(--line);border-radius:6px;overflow:hidden}
.doc-table thead th{text-align:left;background:var(--ink);color:#fff;padding:8px 10px;font-size:9.2px;
  text-transform:uppercase;letter-spacing:.4px;font-weight:800}
.doc-table td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:top}
.doc-table tr:nth-child(even) td{background:#FCFAF6}
.doc-table td.num,.doc-table th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.doc-table td.dim{color:var(--muted);font-size:10.4px}
.doc-table .tiny{font-size:9.2px;color:var(--faint)}
.doc-table tr.is-extra td{background:#F7F4EE}
.doc-note{border:1.4px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:14px;background:#FCFAF6}
.doc-notelabel{font-size:8.8px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:800;margin-bottom:8px}
.doc-mini{width:100%;border-collapse:collapse;font-size:10.6px}
.doc-mini td{padding:5px 6px;border-top:1px solid var(--line)}
.doc-mini tr:first-child td{border-top:none}
.doc-mini td.num{text-align:right;font-family:var(--mono)}
.doc-mini td.mark{text-align:right;font-weight:700;color:var(--muted);white-space:nowrap}
.doc-mini tr.is-this td{background:var(--clay-wash);font-weight:700;color:var(--accent)}
.doc-lower{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.doc-terms{flex:1;min-width:0}
.doc-termslist{margin:0;padding-left:16px;font-size:10.2px;color:var(--muted);line-height:1.65}
.doc-termstext{font-size:10.2px;color:var(--muted);line-height:1.65;margin-top:6px}
.doc-totalsbox{width:290px;flex:0 0 290px;border:1.4px solid var(--ink);border-radius:6px;overflow:hidden}
.doc-totrow{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;font-size:11px;border-top:1px solid var(--line)}
.doc-totrow:first-child{border-top:none}
.doc-totrow b{font-family:var(--mono);font-weight:800}
.doc-totrow.grand{background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;border-top:none}
.doc-sign{display:flex;gap:26px;margin-top:22px}
.doc-sign > div{flex:1}
.doc-sigpad{height:42px;display:flex;align-items:flex-end;padding-bottom:2px}
.doc-sigimg{max-height:40px;max-width:180px;object-fit:contain;display:block}
.doc-sign .line{border-bottom:1.2px solid var(--ink);margin-bottom:5px}
.doc-sign span{font-size:9.6px;color:var(--muted);font-weight:600}
.doc-sigmeta{font-size:8.6px;color:var(--sage);font-weight:700;margin-top:3px}
.doc-thanks{margin-top:20px;padding-top:12px;border-top:1px solid var(--line);text-align:center;
  font-size:10px;color:var(--muted)}

@media (max-width:900px){
  /* Also fires during PDF export (the clone renders at 794px, narrower than
     900) — documents.js overrides it with inline styles on the clone only. */
  .doc-infogrid{flex-direction:column}
  .doc-infocell{border-left:none;border-top:1.4px solid var(--line)}
  .doc-infocell:first-child{border-top:none}
  .doc-lower{flex-direction:column}
  .doc-lower .doc-totalsbox{width:100%;flex:1 1 auto}
}
@media print{
  body *{visibility:hidden}
  .doc-sheet,.doc-sheet *{visibility:visible}
  .doc-sheet{position:absolute;left:0;top:0;width:100%;max-width:100%;box-shadow:none;border:none}
  .bottomnav,.cartbar,.toast,.stepfoot{display:none !important}
  @page{size:A4;margin:0}
}