:root{
  --bg:#ffffff; --card:#f7f9fa; --card2:#eef2f5; --line:#dfe5ea;
  --text:#111820; --dim:#5d6b78; --faint:#98a4b0;
  --cyan:#0b7ea8;          /* brand cyan darkened so it passes contrast on white */
  --cyan-bg:#e6f4fa;
  --green:#15803d; --amber:#b45309; --red:#c62828;
  --nav-h:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* Tapping a stepper twice quickly is a double tap, and iOS reads that as zoom.
   This turns off the double-tap-to-zoom gesture on controls only. Pinch zoom
   on the page still works, so nothing is taken away from anyone who needs it. */
button, .btn, .seg a, .tap a, nav.bottom a, .step input, header.top .act, .row{
  touch-action: manipulation;
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
header.top{
  padding:20px 18px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:5;
  display:flex;align-items:center;gap:12px;
}
header.top h1{
  margin:0;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--cyan);font-weight:700;flex:1;
}
header.top .sub{display:block;font-size:11px;letter-spacing:0;text-transform:none;color:var(--dim);margin-top:4px;font-weight:400}
header.top .back{color:var(--dim);font-size:22px;line-height:1;flex:none;padding:0 4px}
header.top .act{
  flex:none;font-size:13px;color:var(--cyan);border:1px solid var(--line);
  background:var(--card);padding:9px 13px;border-radius:10px;cursor:pointer;font-weight:600;
}

main{padding:18px;max-width:660px;margin:0 auto}
.empty{color:var(--dim);text-align:center;padding:48px 20px;font-size:14px;line-height:1.6}
.empty b{display:block;color:var(--text);margin-bottom:6px;font-size:15px}

/* ---------- section labels ---------- */
.lbl{
  display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--dim);margin:26px 0 9px;font-weight:600;
}
.lbl:first-child{margin-top:0}

/* ---------- cards / rows ---------- */
.row{
  display:flex;align-items:center;gap:13px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:9px;
}
.row .grow{flex:1;min-width:0}
.row .t{font-size:15px;font-weight:600}
.row .s{font-size:12.5px;color:var(--dim);margin-top:3px}
.row .amt{flex:none;font-variant-numeric:tabular-nums;font-weight:700;color:var(--cyan)}
.row .chev{color:var(--faint);flex:none;font-size:19px}
.row.done{opacity:.55}
.row.done .t{text-decoration:line-through}

.time{
  flex:none;width:60px;text-align:center;font-variant-numeric:tabular-nums;
  border-right:1px solid var(--line);padding-right:12px;margin-right:2px;
}
.time .h{font-size:16px;font-weight:700;color:var(--cyan)}
.time .m{font-size:10.5px;color:var(--dim);letter-spacing:1px;margin-top:1px}

/* ---------- pills ---------- */
.pill{
  display:inline-block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;border:1px solid var(--line);color:var(--dim);
  background:var(--bg);font-weight:600;
}
.pill.on{border-color:#9ad2ae;color:var(--green);background:#eefbf2}
.pill.warn{border-color:#e8c99a;color:var(--amber);background:#fdf6ec}
.pill.bad{border-color:#f0b4b4;color:var(--red);background:#fdeeee}
.pill.info{border-color:#a8d8ea;color:var(--cyan);background:var(--cyan-bg)}

/* ---------- forms ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin-bottom:7px;font-weight:600}
input[type=text],input[type=tel],input[type=email],input[type=number],
input[type=date],input[type=time],select,textarea{
  width:100%;padding:13px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font-size:16px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-bg)}
textarea{min-height:88px;resize:vertical}
.two{display:flex;gap:10px}
.two > *{flex:1;min-width:0}

.btn{
  display:block;width:100%;padding:15px;border-radius:12px;border:1px solid var(--cyan);
  background:var(--cyan);color:#fff;font-size:15px;font-weight:600;
  cursor:pointer;text-align:center;font-family:inherit;
}
.btn.ghost{border-color:var(--line);background:var(--card);color:var(--text)}
.btn.danger{border-color:#f0b4b4;background:#fdeeee;color:var(--red)}
.btn + .btn{margin-top:9px}
.btn:disabled{opacity:.6}

/* ---------- segmented control ---------- */
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button,.seg a{
  flex:1;min-width:86px;padding:13px 8px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);color:var(--dim);
  font-size:14px;font-weight:600;cursor:pointer;transition:.12s;font-family:inherit;
  text-align:center;display:block;
}
.seg button.on,.seg a.on{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-bg)}

/* ---------- steppers ---------- */
.step{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;margin-bottom:9px;
}
.step .name{font-size:14px;flex:1;min-width:0}
.step .name small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.step .ctl{display:flex;align-items:center;gap:9px;flex:none}
.step button{
  width:46px;height:46px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font-size:22px;line-height:1;cursor:pointer;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.step button:active{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-bg)}
.step input{width:60px;height:42px;text-align:center;font-size:17px;font-weight:600;padding:0}
.step.zero{opacity:.6}
.step.zero:focus-within{opacity:1}

/* ---------- money breakdown, used on the result and detail pages ---------- */
.lines{font-size:13px;margin-bottom:11px}
.ln{display:flex;justify-content:space-between;gap:14px;padding:4px 0;color:var(--dim)}
.ln .amt{flex:none;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
.ln.neg .amt{color:var(--green)}
.ln.inc .amt{color:var(--green);font-size:11px;letter-spacing:.5px}
.ln .note{display:block;font-size:11px;color:var(--faint);margin-top:1px}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:11px}
.total span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);font-weight:600}
.total strong{font-size:32px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums}
.rate{font-size:12px;color:var(--dim);margin-top:5px}
.rate b{color:var(--green)}
.rate.bad b{color:var(--red)}
.warn{
  margin-top:11px;padding:11px 13px;border-radius:10px;
  background:#fdeeee;border:1px solid #f0b4b4;color:#a02020;font-size:12.5px;line-height:1.45;
}
.note-box{
  margin-top:11px;padding:11px 13px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.45;
}

/* ---------- bottom nav ---------- */
nav.bottom{
  position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg);border-top:1px solid var(--line);
  display:flex;z-index:6;
}
nav.bottom a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:var(--faint);font-size:10.5px;letter-spacing:.6px;font-weight:600;
}
nav.bottom a .ic{font-size:19px;line-height:1}
nav.bottom a.on{color:var(--cyan)}
/* The last slot used to say Quote, but it now starts a quote, an estimate or
   an invoice. A filled plus says "make something" without naming one of them. */
nav.bottom a.new .ic{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--cyan);color:#fff;font-size:17px;font-weight:700;
  margin-bottom:-2px;
}
nav.bottom a.new.on .ic{box-shadow:0 0 0 3px var(--cyan-bg)}

/* ---------- misc ---------- */
.tap{display:flex;gap:9px;margin:14px 0}
.tap a{
  flex:1;text-align:center;padding:13px 8px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px;font-weight:600;
}
.tap a:active{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-bg)}
.flash{
  margin:14px 18px 0;padding:12px 14px;border-radius:11px;
  background:var(--cyan-bg);border:1px solid #a8d8ea;color:#08607f;font-size:13.5px;
}
.search{margin-bottom:16px}
hr.sep{border:0;border-top:1px solid var(--line);margin:22px 0}

/* ---------- dashboard bar chart ---------- */
.bars{display:flex;align-items:flex-end;gap:5px;height:130px;margin-bottom:10px}
.bar{
  flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;min-width:0;
}
.bar .fill{
  width:100%;background:var(--cyan);border-radius:4px 4px 0 0;min-height:2px;
  opacity:.85;
}
.bar .tick{font-size:9.5px;color:var(--faint);letter-spacing:.3px;flex:none}

/* ---------- message thread ---------- */
.msg{display:flex;margin-bottom:9px}
.msg.out{justify-content:flex-end}
.msg .bubble{
  max-width:78%;padding:11px 13px;border-radius:14px;font-size:14.5px;line-height:1.4;
  border:1px solid var(--line);background:var(--card);white-space:pre-wrap;word-break:break-word;
}
.msg.out .bubble{background:var(--cyan-bg);border-color:#a8d8ea}
.msg .meta{font-size:10.5px;color:var(--faint);margin-top:5px;letter-spacing:.3px}
.msg .meta.err{color:var(--red)}
nav.bottom a .badge{
  position:absolute;transform:translate(13px,-8px);background:var(--red);color:#fff;
  font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}
nav.bottom a{position:relative}

/* ---------- pdf viewer ---------- */
.pdfbox{
  position:relative;border:1px solid var(--line);border-radius:12px;
  background:#0d1e35;overflow:auto;-webkit-overflow-scrolling:touch;
  height:min(64vh,560px);
}
.pdfbox .pages{display:flex;flex-direction:column;gap:8px}
/* Exactly as wide as the box, which is the whole point of using images. */
.pdfbox img{display:block;width:100%;height:auto}
.pdfbox iframe{display:block;width:100%;height:min(64vh,560px);border:0;background:#fff}

/* Full screen is a state on this page, never a new one. Navigating to a PDF in
   an installed app leaves nothing to press to get back. */
.pdfbox.full{
  position:fixed;inset:0;z-index:30;height:100vh;height:100dvh;
  border:0;border-radius:0;background:#0d1e35;
  padding:0 0 env(safe-area-inset-bottom);
}
.pdfbox.full .pages{min-height:100%;gap:12px}
/* A single page is centred and sized to fit whole, so nothing needs scrolling.
   Several pages stack from the top and scroll, because they have to. */
.pdfbox.one.full .pages{justify-content:center}
.pdfbox.full img{
  width:100%;height:auto;max-height:none;
}
.pdfbox.one.full img{
  width:auto;height:auto;max-width:100%;max-height:100dvh;margin:0 auto;
}
.pdfbox.full iframe{height:100dvh}

.pdfclose{
  position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));
  padding:13px 24px;border-radius:24px;border:0;
  background:var(--cyan);color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 3px 16px rgba(0,0,0,.4);z-index:31;
}