/* Chad's Coatings invoicing — approved design (Nov 2026). Ported from app-design/prototype.html. */
:root{
  --navy:#262262; --navy-2:#3B3778; --red:#BF1E2D; --red-press:#9C1724; --red-tint:#FBEDEE;
  --ink:#1C1B33; --muted:#6E6C82; --faint:#A3A1B3; --line:#E7E4EE; --bg:#F4F3F8; --card:#fff;
  --ok:#23845A; --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
@media (min-width:600px){ html,body{background:#DCDAE6} }
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button[disabled]{cursor:default}
input,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}

/* app shell: full screen on a phone, a phone-width column on a computer */
.app{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;max-width:560px;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;padding-top:var(--st)}
@media (min-width:600px){ .app{box-shadow:0 0 40px rgba(38,34,98,.12)} }
.loading{flex:1;display:grid;place-items:center;color:var(--muted)}
.testbadge{position:absolute;top:calc(var(--st) + 6px);right:10px;z-index:5;background:#FFE9A8;color:#6B4E00;font-size:11px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:99px}

/* top bars */
.iconbtn{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;color:var(--red)}
.iconbtn:active{background:var(--red-tint)}
.nav{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 8px 8px;min-height:52px}
.nav h1{margin:0;font-size:17px;font-weight:600;color:var(--navy);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.nav .l{justify-self:start}.nav .r{justify-self:end}
.textbtn{color:var(--red);font-size:17px;padding:10px 10px;border-radius:10px;font-weight:500;display:inline-flex;align-items:center;gap:2px}
.textbtn:active{background:var(--red-tint)}
.textbtn.b{font-weight:600}

.scr{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}
.scr::-webkit-scrollbar{display:none}

.sec{display:flex;justify-content:space-between;align-items:baseline;margin:20px 20px 8px;font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.card{margin:0 16px;background:var(--card);border-radius:var(--radius);box-shadow:0 1px 0 rgba(38,34,98,.04),0 1px 3px rgba(38,34,98,.06);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:64px;width:100%;text-align:left;position:relative}
.row+.row:before{content:"";position:absolute;top:0;left:68px;right:0;border-top:1px solid var(--line)}
.row.noav+.row.noav:before,.row.noav+.row:before{left:16px}
button.row:active{background:#F7F6FA}
.av{width:40px;height:40px;border-radius:20px;flex:none;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--navy);background:#E9E7F3}
.av.c1{background:#E3E1F1}.av.c2{background:#F7E4E2}.av.c3{background:#FCEBDD}.av.c4{background:#E2EEE8}
.row .mid{flex:1;min-width:0}
.row .t{font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:14px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{text-align:right;flex:none}
.row .amt{font-size:17px;font-weight:600;color:var(--ink)}
.row .rs{font-size:13px;color:var(--muted);margin-top:2px}
.chev{color:#C5C3D2;flex:none}
.addrow{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;color:var(--red);font-weight:600;font-size:16px;border-top:1px solid var(--line)}
.addrow:active{background:var(--red-tint)}
.addrow .plus{width:28px;height:28px;border-radius:14px;background:var(--red-tint);display:grid;place-items:center}

/* buttons */
.btn{background:var(--red);color:#fff;font-weight:600;font-size:17px;border-radius:14px;padding:0 22px;height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px rgba(191,30,45,.25)}
.btn:active{background:var(--red-press);transform:scale(.98)}
.btn.full{width:100%}
.btn[disabled]{background:#D8D6E2;color:#fff;box-shadow:none;transform:none}
.btn2{border:1.5px solid var(--red);color:var(--red);font-weight:600;font-size:17px;border-radius:14px;height:52px;display:flex;align-items:center;justify-content:center;width:100%;background:#fff}
.btn2:active{background:var(--red-tint)}
.dock{flex:none;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line);padding:12px 16px max(12px,calc(var(--sb) + 8px));display:flex;align-items:center;gap:10px}

/* bottom sheets */
.backdrop{position:absolute;inset:0;background:rgba(20,18,50,.38);z-index:20;animation:fade .2s}
.backdrop.still{animation:none}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:92%;background:var(--bg);border-radius:22px 22px 0 0;z-index:21;display:flex;flex-direction:column;animation:up .28s cubic-bezier(.2,.8,.2,1)}
.sheet.tall{height:92%}
.sheet.still{animation:none}
.grab{width:38px;height:5px;border-radius:3px;background:#CFCDDB;margin:8px auto 0;flex:none}
.sh-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;padding:12px 12px 6px 20px;gap:8px}
.sh-head h3{margin:0;font-size:24px;color:var(--navy);letter-spacing:-.3px}
.sh-head p{margin:3px 0 0;color:var(--muted);font-size:15px;white-space:pre-line}
.sh-body{flex:1;overflow-y:auto;padding:4px 0 12px}
.sh-foot{flex:none;padding:10px 16px max(30px,calc(var(--sb) + 14px));background:var(--bg);display:flex;flex-direction:column;gap:10px}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.seg{display:flex;margin:8px 16px 4px;background:#E4E2EC;border-radius:11px;padding:3px}
.seg button{flex:1;height:38px;border-radius:9px;font-size:15px;font-weight:600;color:var(--muted)}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* fields */
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:14px 16px 0}
.fields>*{min-width:0}
.fld{background:#fff;border-radius:14px;padding:10px 14px 8px;border:1.5px solid transparent;display:block}
.fld:focus-within{border-color:var(--navy)}
.fld .lab{display:block;font-size:13px;color:var(--muted);font-weight:500}
.fld input,.fld textarea{width:100%;border:0;outline:0;background:none;font-size:26px;font-weight:600;padding:2px 0 0;color:var(--navy);border-radius:0}
.fld input::placeholder{color:#C2C0CF}
.fld .u{font-size:15px;color:var(--muted);font-weight:500;margin-left:4px;white-space:nowrap}
.fld .inl{display:flex;align-items:baseline}
.fld .inl input{width:100%;flex:1;min-width:0}
.fld.sm input,.fld.sm textarea{font-size:17px;font-weight:500;color:var(--ink)}
.fld.sm textarea{resize:none;line-height:1.4}
.fld input[type=date]{-webkit-appearance:none;appearance:none;min-height:30px;text-align:left}
.stack{display:flex;flex-direction:column;gap:10px;margin:14px 16px 0}

.calc{margin:14px 16px 0;background:#fff;border-radius:14px;padding:6px 16px}
.calc div{display:flex;justify-content:space-between;padding:9px 0;font-size:16px;color:var(--muted)}
.calc .sum{color:var(--ink)}
.calc .sum b{font-size:22px;color:var(--navy)}

/* day by day */
.days{margin:10px 16px 0;background:#fff;border-radius:14px;overflow:hidden}
.day{display:grid;grid-template-columns:1fr 70px 76px 70px;align-items:center;gap:8px;padding:6px 10px 6px 16px;min-height:52px}
.day+.day{border-top:1px solid var(--line)}
.day .dn{font-size:16px;font-weight:600}
.day.we .dn{color:var(--faint)}
.cell{display:flex;align-items:baseline;justify-content:flex-end;background:#F4F3F8;border-radius:10px;padding:0 8px;height:40px;border:1.5px solid transparent}
.cell:focus-within{border-color:var(--navy);background:#fff}
.cell input{width:100%;border:0;background:none;outline:0;text-align:right;font-size:17px;font-weight:600;color:var(--navy);height:38px;min-width:0}
.cell input::placeholder{color:#C2C0CF;font-weight:500}
.cell span{font-size:13px;color:var(--muted);margin-left:4px}
.dayhead{display:grid;grid-template-columns:1fr 70px 76px 70px;gap:8px;padding:12px 26px 0 32px;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.dayhead span{text-align:right}
.dsum{margin:12px 16px 0;padding:12px 16px;border-radius:14px;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dsum .l{font-size:15px;color:var(--muted)}.dsum .l b{color:var(--ink)}
.dsum .r{font-size:20px;font-weight:700;color:var(--navy);white-space:nowrap}

.inline-new{margin:10px 16px 0;padding:12px;background:#fff;border-radius:14px;border:1.5px solid var(--navy)}
.inline-new .fields{margin:0;gap:8px}
.inline-new .fld{background:var(--bg)}
.inline-new .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.smbtn{height:40px;padding:0 16px;border-radius:10px;background:var(--red);color:#fff;font-weight:600;font-size:15px}
.smbtn.ghost{background:none;color:var(--red)}
.danger{display:block;margin:18px auto 0;color:var(--red);font-weight:600;font-size:16px;padding:10px}

/* PDF preview */
.pdfwrap{margin:4px 16px 0;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(38,34,98,.12);overflow:hidden;position:relative;cursor:zoom-in;aspect-ratio:8.5/11}
.pdfwrap img{display:block;width:100%;height:auto}
.pdfwrap .wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:15px}
.pdfwrap .zoomhint{position:absolute;right:10px;bottom:10px;background:rgba(38,34,98,.85);color:#fff;font-size:13px;font-weight:600;padding:6px 10px;border-radius:999px;display:flex;gap:6px;align-items:center}
.kv{display:flex;gap:12px;padding:12px 16px;align-items:center;min-height:56px;position:relative;width:100%;text-align:left}
.kv+.kv:before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
.kv .k{width:78px;flex:none;font-size:15px;color:var(--muted)}
.kv .v{flex:1;min-width:0;font-size:16px}
.kv .v b{font-weight:600}
.kv .v small{display:block;color:var(--muted);font-size:14px;margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.kv .v.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.kv .edit{color:var(--red);font-weight:600;font-size:15px;flex:none}
.kv.tap:active{background:#F7F6FA}
.toggle{width:51px;height:31px;border-radius:16px;background:#E0DEE8;position:relative;flex:none;transition:.2s}
.toggle:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s}
.toggle.on{background:var(--red)}.toggle.on:after{left:22px}

/* history */
.filt{display:flex;gap:8px;margin:0 16px 4px;overflow-x:auto;padding-bottom:2px}
.filt::-webkit-scrollbar{display:none}
.filt button{height:36px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:600;background:#fff;color:var(--ink);border:1px solid var(--line);white-space:nowrap;flex:none}
.filt button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.empty{text-align:center;padding:60px 36px 0;color:var(--muted)}
.empty .ill{width:88px;height:88px;border-radius:26px;background:#fff;margin:0 auto 18px;display:grid;place-items:center;color:var(--navy);box-shadow:0 2px 8px rgba(38,34,98,.08)}
.empty h3{color:var(--navy);font-size:20px;margin:0 0 6px}
.empty p{margin:0;font-size:16px;line-height:1.4}

/* settings */
.grp{margin:22px 20px 7px;font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.foot{margin:8px 22px 0;font-size:13px;color:var(--muted);line-height:1.4}
.srow{display:flex;align-items:center;gap:12px;padding:0 14px 0 16px;min-height:52px;width:100%;text-align:left;position:relative;font-size:17px}
.srow+.srow:before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
button.srow:active{background:#F7F6FA}
.srow .k{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .v{color:var(--muted);font-size:16px;white-space:nowrap}
.srow.add{color:var(--red);font-weight:600}
.sico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.frm .fl{display:flex;align-items:center;gap:12px;padding:6px 16px;min-height:52px;position:relative}
.frm .fl+.fl:before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
.frm .fl label{width:118px;flex:none;font-size:15px;color:var(--muted)}
.frm .fl input,.frm .fl textarea{flex:1;border:0;outline:0;background:none;font-size:16px;min-width:0;padding:8px 0;text-align:left}
.frm .fl textarea{resize:none;line-height:1.4}
.frm .fl.col{flex-direction:column;align-items:stretch;gap:2px;padding-top:10px}
.frm .fl.col label{width:auto}
.tokens{display:flex;flex-wrap:wrap;gap:6px;margin:10px 16px 0}
.tokens button{height:34px;padding:0 12px;border-radius:9px;border:1.5px dashed #E9B8BD;color:var(--red);font-weight:600;font-size:14px}
.signout{display:block;margin:26px auto 0;color:var(--red);font-weight:600;font-size:16px;padding:10px}

/* full-screen PDF */
.zoom{position:absolute;inset:0;background:#2A2840;z-index:30;display:flex;flex-direction:column;animation:fade .2s}
.zoom .zbar{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--st) + 12px) 8px 8px 20px;color:#fff;font-weight:600}
.zoom .zbar .textbtn{color:#fff}
.zoom .zs{flex:1;overflow:auto;padding:8px 12px calc(var(--sb) + 30px)}
.zoom .zs img{display:block;width:720px;max-width:none;background:#fff;border-radius:4px}

/* sending overlay + toast */
.sending{position:absolute;inset:0;background:rgba(244,243,248,.85);z-index:40;display:grid;place-items:center;font-weight:600;color:var(--navy);text-align:center}
.spin{width:36px;height:36px;border:3px solid #DAD8E6;border-top-color:var(--navy);border-radius:50%;animation:sp .8s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 110px);transform:translateX(-50%);background:rgba(28,27,51,.92);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:15px;z-index:50;max-width:90%;text-align:center}

/* sign in / first setup */
.welcome{flex:1;display:flex;flex-direction:column;padding:10px 24px calc(var(--sb) + 24px);overflow-y:auto}
.welcome .hero{text-align:center;padding:26px 0 8px}
.welcome .hero img{width:220px}
.welcome h1{font-size:28px;color:var(--navy);margin:22px 0 8px;letter-spacing:-.4px;text-align:center}
.welcome p.lead{margin:0;text-align:center;color:var(--muted);font-size:17px;line-height:1.45}
.welcome .stack{margin:26px 0 0}
.welcome .btn{margin-top:18px}
.welcome .textbtn{margin:10px auto 0}
.tick{width:26px;height:26px;border-radius:13px;background:#E2EEE8;color:var(--ok);display:grid;place-items:center;flex:none}

/* dashboard */
.dash{flex:1;display:flex;flex-direction:column;padding:0 16px calc(var(--sb) + 34px);overflow-y:auto}
.dash .hero{text-align:center;padding:30px 0 6px}
.dash .hero img{width:210px}
.dash .hello{text-align:center;color:var(--muted);font-size:16px;margin:10px 0 26px}
.bigbtn{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:#fff;border-radius:20px;padding:20px 18px;min-height:96px;box-shadow:0 1px 3px rgba(38,34,98,.07),0 6px 18px rgba(38,34,98,.05)}
.bigbtn+.bigbtn{margin-top:12px}
.bigbtn:active{transform:scale(.985);background:#FAFAFC}
.bigbtn .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--red-tint);color:var(--red)}
.bigbtn .tx{flex:1;min-width:0}
.bigbtn .tx b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.2px}
.bigbtn .tx span{display:block;font-size:15px;color:var(--muted);margin-top:3px}
.bigbtn.primary{background:var(--red);box-shadow:0 8px 22px rgba(191,30,45,.28)}
.bigbtn.primary:active{background:var(--red-press)}
.bigbtn.primary .ic{background:rgba(255,255,255,.18);color:#fff}
.bigbtn.primary .tx b{color:#fff}.bigbtn.primary .tx span{color:rgba(255,255,255,.85)}
.bigbtn.primary .chev{color:rgba(255,255,255,.7)}
.banner{display:flex;gap:12px;align-items:center;background:#E3F1EA;color:#165A3C;border-radius:16px;padding:14px 16px;margin:0 0 16px;animation:pop .4s}
.banner .ok{width:32px;height:32px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:none}
.banner b{display:block;font-size:16px}.banner span{font-size:14px}
.banner.still{animation:none}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.startover{display:block;margin:14px auto 0;color:var(--red);font-weight:600;font-size:15px;padding:8px}

/* step-by-step */
.wz{flex:none;display:grid;grid-template-columns:104px 1fr 104px;align-items:center;padding:2px 6px 0;min-height:48px}
.wz .mid{text-align:center;font-size:14px;font-weight:600;color:var(--muted)}
.wz .r{justify-self:end}
.prog{display:flex;gap:6px;margin:6px 20px 0}
.prog i{flex:1;height:4px;border-radius:2px;background:#DEDCE8}
.prog i.on{background:var(--navy)}
.wtitle{margin:20px 20px 4px;font-size:30px;line-height:1.12;font-weight:700;color:var(--navy);letter-spacing:-.5px}
.wsub{margin:6px 20px 0;color:var(--muted);font-size:16px;line-height:1.4}
.wfoot{flex:none;padding:12px 16px max(34px,calc(var(--sb) + 14px));background:linear-gradient(rgba(244,243,248,0),var(--bg) 18px)}
.wfoot .note{text-align:center;font-size:14px;color:var(--muted);margin-bottom:10px}
.wfoot .tline{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px}
.wfoot .tline span{color:var(--muted);font-size:14px}
.wfoot .tline b{font-size:24px;color:var(--navy);letter-spacing:-.4px;transition:transform .15s}

.chk{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;min-height:72px;position:relative}
.chk+.chk:before{content:"";position:absolute;top:0;left:72px;right:0;border-top:1px solid var(--line)}
.chk .box{width:30px;height:30px;border-radius:9px;border:2px solid #CBC9D8;display:grid;place-items:center;flex:none;color:#fff;transition:.15s}
.chk.on .box{background:var(--navy);border-color:var(--navy)}
.chk .mid{flex:1}
.chk .t{font-size:18px;font-weight:600}
.chk .s{font-size:14px;color:var(--muted);margin-top:2px}
.chk:not(.on) .t{color:var(--muted)}

.pcard{margin:0 16px;background:#fff;border-radius:18px;padding:14px 14px 12px;box-shadow:0 1px 3px rgba(38,34,98,.06)}
.pcard+.pcard{margin-top:12px}
.pcard .ph{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pcard .ph .nm{flex:1;min-width:0}
.pcard .ph .nm b{font-size:18px;display:block}
.typebtn{display:inline-flex;align-items:center;gap:4px;color:var(--red);font-weight:600;font-size:14px;margin-top:2px;padding:2px 0;text-align:left}
.pcard .fields{margin:0;gap:10px}
.pcard .fld{background:var(--bg)}
.pcard .res{display:flex;justify-content:space-between;align-items:baseline;margin:12px 2px 0;font-size:14px;color:var(--muted)}
.pcard .res b{font-size:18px;color:var(--navy)}
.pcard .res b.zero{color:var(--faint)}
.pcard .links{display:flex;justify-content:space-between;margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.pcard .links button{color:var(--red);font-weight:600;font-size:14px;padding:8px 2px}
.pcard .dayinfo{background:var(--bg);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-size:15px;gap:8px}

.rv .row{min-height:58px}
.rv .row .t{font-size:16px}
.rtot{display:flex;justify-content:space-between;align-items:center;padding:16px;border-top:1px solid var(--line)}
.rtot span{font-weight:600}.rtot small{display:block;color:var(--muted);font-size:13px;font-weight:500}
.rtot b{font-size:24px;color:var(--navy)}
.optlist .srow .tick{margin-left:auto}
.errbox{margin:14px 16px 0;padding:14px 16px;border-radius:14px;background:var(--red-tint);color:#7A1220;font-size:15px;line-height:1.4;white-space:pre-line}

/* Clear, tappable top buttons (Cancel, Back, Home, Edit, X): red with white words */
.navbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:48px;min-width:110px;padding:0 20px;border-radius:24px;background:var(--red);color:#fff;font-weight:600;font-size:18px;line-height:1;white-space:nowrap;box-shadow:0 4px 12px rgba(191,30,45,.25)}
.navbtn:active{background:var(--red-press);transform:scale(.97)}
.wz{grid-template-columns:110px 1fr 110px;gap:8px;padding:18px 16px 6px;min-height:72px}
.wz .mid{font-size:15px}
.wz .r{display:flex;justify-content:flex-end}
.prog{margin-top:14px}
.nav{padding:18px 16px 14px;min-height:80px}
.sh-head .navbtn{height:44px;min-width:96px;font-size:17px}
/* Hours / Minutes / Trips side by side */
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Settings: Done (bottom right) turns into Save after a change */
.sfoot{flex:none;display:flex;justify-content:flex-end;padding:10px 16px max(30px,calc(var(--sb) + 12px));background:linear-gradient(rgba(244,243,248,0),var(--bg) 14px)}
.donebtn{height:50px;min-width:116px;padding:0 24px;border-radius:25px;background:var(--navy);color:#fff;font-weight:600;font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 16px rgba(38,34,98,.25)}
.donebtn:active{transform:scale(.97)}
.donebtn.save{background:var(--red);box-shadow:0 6px 16px rgba(191,30,45,.3)}
.errbox.ask{background:#fff;color:var(--ink)}

/* ---------- Round 2 (Nov 2026): more space, pick-client screen, tax Yes/No, materials, Settings Save top right ---------- */
/* More room everywhere */
.scr{padding-top:6px;padding-bottom:40px}
.wtitle{margin-top:34px}
.wsub{margin-top:10px}
.wcard{margin-top:30px}
.wgap{height:30px}
.sec{margin:34px 20px 10px}
.grp{margin:32px 20px 10px}
.foot{margin:12px 22px 0}
.kv{min-height:62px;padding:14px 16px}
.pcard{padding:18px 16px 14px}
.pcard+.pcard{margin-top:20px}
.pcard .ph{margin-bottom:16px}
.pcard .res{margin-top:16px}
.pcard .links{margin-top:12px}
.chk{min-height:78px;padding:16px}

/* Home: bigger logo, buttons lower, Start over right under Continue invoice */
.dash{padding-top:10px}
.dash .hero{padding:44px 0 6px}
.dash .hero img{width:290px;max-width:82%}
.dash .hello{margin:14px 0 0}
.dbtns{margin-top:auto;padding-top:36px}
.dash .startover{margin:2px auto 6px;padding:10px 14px}

/* New invoice: pick a client */
/* Job cards: same size as the Home cards */
.picklbl{margin:28px 20px 10px;font-size:15px;font-weight:600;color:var(--muted)}
.pickjob{width:calc(100% - 32px);margin-left:16px;margin-right:16px;min-height:60px;padding:10px 14px;gap:12px;border-radius:16px}
.pickjob+.pickjob{margin-top:8px}
.pickjob .tx b{font-size:16px}
.pickjob .tx span{font-size:13px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pickjob .chev{width:7px;height:12px}

/* Step 1: Tax inclusive Yes / No */
.kv .k.wide{width:auto;flex:1;white-space:nowrap}
.seg.yn{margin:0;flex:none;width:136px}
.seg.yn button{height:36px}
.seg.yn button.on{background:var(--navy);color:#fff}

/* Step 3: work type as a clear dropdown */
.wtlab{font-size:13px;color:var(--muted);font-weight:500;margin:0 2px 6px}
.dropbox{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:10px 14px;margin-bottom:14px;background:#fff;border:1.5px solid #CBC9D8;border-radius:12px;text-align:left;font-size:16px;font-weight:500;color:var(--ink)}
.dropbox svg{flex:none;color:var(--navy)}
.dropbox:active{border-color:var(--navy);background:#F7F6FA}

/* Step 4: more space in the review */
.rv .row{padding:16px;min-height:70px}
.rv .row .s{margin-top:6px}
.rgst{display:flex;justify-content:space-between;align-items:center;padding:16px;border-top:1px solid var(--line);font-size:16px}
.rgst b{font-weight:600}
.rtot{padding:22px 16px 20px}

/* "$" the same size as the numbers, with a space */
.cur{font-size:26px;font-weight:600;color:var(--navy);margin-right:6px}
.cur.sm{font-size:17px;font-weight:500;color:var(--ink);margin-right:4px}

/* Materials: Add 10% switch */
.calc .tg{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.calc .tg span{display:block}
.calc .tg small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.calc #matcalc div{display:flex;justify-content:space-between;padding:9px 0}

/* History detail: the email on its own line */
.kv .v.wrap{word-break:break-all}

/* Settings: Done / Save top right; unsaved changes are clear */
.nav .donebtn{height:48px;min-width:92px;padding:0 18px}
.unsaved{margin:0 16px 4px;padding:10px 14px;border-radius:12px;background:var(--red-tint);color:#7A1220;font-size:14px;text-align:center}
.frm .fl.changed{box-shadow:inset 4px 0 0 var(--red)}
.frm .fl.changed label{color:var(--red);font-weight:600}
.frm .fl textarea{padding:8px 0}
.frm .fl:has(> textarea) {align-items:flex-start}
.frm .fl:has(> textarea) label{padding-top:8px}
.frm .fl.col:has(> textarea) label{padding-top:0}
.row .s.need{color:var(--red);font-weight:600}

/* Enlarged PDF: drag with a finger, pinch to zoom */
.zoom .zs{touch-action:pan-x pan-y;overscroll-behavior:contain}
.calc #matcalc{display:block;padding:0}
/* Top bar: the title fits between the two buttons */
.nav{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
.nav h1{max-width:none;min-width:0}
.frm .fl textarea{overflow:hidden}
/* Home: the buttons sit in the middle of the space under the logo, not stuck to the bottom */
.dbtns{margin-top:auto;margin-bottom:auto;padding-top:28px}
/* Home: logo bigger, buttons higher (more room below them than above) */
.dash .hero{padding:32px 0 4px}
.dash .hero img{width:360px;max-width:94%}
.dash{padding-bottom:calc(var(--sb) + 24px)}
@media (min-height:760px){ .dash{padding-bottom:calc(var(--sb) + 14vh)} }
@media (max-height:700px){ .dash .hero{padding-top:12px} .dash .hero img{width:300px} }
.dbtns{padding-top:20px}
/* Home: smaller buttons */
.dash .bigbtn{min-height:74px;padding:14px 16px;gap:14px;border-radius:18px}
.dash .bigbtn+.bigbtn,.dash .startover+.bigbtn{margin-top:10px}
.dash .bigbtn .ic{width:44px;height:44px;border-radius:13px}
.dash .bigbtn .ic svg{width:22px;height:22px}
.dash .bigbtn .tx b{font-size:18px}
.dash .bigbtn .tx span{font-size:14px;margin-top:2px}
/* Home: buttons smaller again */
.dash .bigbtn{min-height:60px;padding:10px 14px;gap:12px;border-radius:16px}
.dash .bigbtn+.bigbtn,.dash .startover+.bigbtn{margin-top:8px}
.dash .bigbtn .ic{width:36px;height:36px;border-radius:11px}
.dash .bigbtn .ic svg{width:18px;height:18px}
.dash .bigbtn .tx b{font-size:16px}
.dash .bigbtn .tx span{font-size:13px;margin-top:1px}
.dash .bigbtn .chev{width:7px;height:12px}
.dash .bigbtn .tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Top buttons (Cancel, Back, Home, Edit, + New client, Done/Save): 30 px tall everywhere */
.navbtn,.sh-head .navbtn,.nav .donebtn{height:30px;min-width:0;padding:0 14px;border-radius:15px;font-size:15px;box-shadow:0 2px 6px rgba(191,30,45,.22)}
.nav .donebtn{box-shadow:0 2px 6px rgba(38,34,98,.22)}
.navbtn svg,.nav .donebtn svg{width:14px;height:14px}
.nav{min-height:60px}
.wz{min-height:56px}

/* Cohesive look (2026-11-07) */
/* Top buttons: corners match the main buttons (14px on a 52px button = 8px on a 30px one) */
.navbtn,.sh-head .navbtn,.nav .donebtn{border-radius:8px}
/* Back: one small red square with an arrow, every screen */
.navbtn.back{width:30px;padding:0}
.navbtn.back svg{width:9px;height:15px;transform:translateX(-1px)} /* nudged left so the arrow looks centred */
/* Screen title: big and left, under the buttons, same style as "Who is this invoice for?" */
.nav{grid-template-columns:auto 1fr auto;row-gap:0}
.nav .l{grid-column:1;grid-row:1}
.nav .r{grid-column:3;grid-row:1;justify-self:end}
.nav h1{grid-column:1/-1;grid-row:2;text-align:left;margin:22px 4px 0;font-size:30px;line-height:1.12;font-weight:700;color:var(--navy);letter-spacing:-.5px;white-space:normal}
/* Tax Yes/No: small, words centred, chosen side filled navy so it's obvious */
.seg.yn{display:inline-flex;width:auto;padding:2px;gap:2px;border-radius:9px;background:#ECEAF2}
.seg.yn button{flex:none;width:46px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:7px;font-size:14px;line-height:1;color:var(--muted)}
.seg.yn button.on{background:var(--navy);color:#fff;box-shadow:0 1px 3px rgba(38,34,98,.25)}
/* Step 1 note: smaller */
.wsub.sm{font-size:14px;margin-top:6px}
/* Every screen title sits at the same height */
.wz .r .iconbtn{margin:-7px 0}          /* the X doesn't make the step bar taller (same look, same tap size) */
.wz ~ .scr .wtitle{margin-top:24px}      /* invoice steps */
.nav h1{margin-top:54px}                 /* History, Settings and the other Settings screens */
.wz{padding-top:18px;min-height:0}       /* back arrow at the same height as on other screens */

/* Invoice ready: "Save for later" link under Send */
.wfoot .startover.later{margin:6px auto -10px}

/* Step lines sit under the step title; "Step 1 of 4" text removed (2026-11-08) */
.scr .prog{margin:12px 20px 0}
/* Titles moved up: every title sits 16px under the back arrow (2026-11-08) */
.nav h1{margin-top:16px}
.wz ~ .scr .wtitle{margin-top:4px}
.nav ~ .scr .wtitle{margin-top:-4px}
/* History: Saved / Sent tabs (2026-11-08) */
.histtabs{margin:12px 16px 4px}
.row.saved{padding-right:4px}
.row.saved .open{align-self:stretch;display:flex;flex-direction:column;justify-content:center;text-align:left}
/* Client: "Client address same as project address" switch row (2026-11-11) */
.frm .fl.tgl{align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.frm .fl.tgl label{width:auto;flex:1;color:var(--ink)}