/* Vernon Claims — phone-first. Every colour is a token; a restyle is this block. */
:root{
  --plane:#f0f3f1; --surface:#ffffff; --sunken:#f7faf8;
  --line:#dfe7e2; --line-soft:#edf1ee;
  --ink:#17231d; --ink-2:#67756d; --ink-3:#8b978f;
  --brand:#123d2b; --brand-2:#245b43; --accent:#d7a734; --accent-ink:#173c2c;
  --good:#26704d; --good-bg:#e8f5ed;
  --warn:#916814; --warn-bg:#fff4d9;
  --bad:#a84d3e;  --bad-bg:#fce9e6;
  --age-1:#f5dca2; --age-2:#e6bc63; --age-3:#cf9a30; --age-4:#9c7420;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--plane);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}
a{color:inherit;text-decoration:none}

/* ---- top bar ---- */
.top{background:var(--brand);color:#f7fbf8;padding:14px 18px;display:flex;align-items:center;gap:12px}
.mark{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--brand);
      display:grid;place-items:center;font-weight:900}
.top strong{font-size:15px;letter-spacing:-.01em}
.top .who{margin-left:auto;font-size:12px;color:#b9d3c5}

.wrap{padding:16px 16px 92px;max-width:1100px;margin:0 auto}
h1{font-size:22px;margin:0 0 3px;letter-spacing:-.02em}
.sub{margin:0 0 18px;color:var(--ink-2);font-size:12.5px}

/* ---- cards & tiles ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.hero{font-size:40px;font-weight:800;letter-spacing:-.03em;margin:6px 0 2px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px}
.tile .v{font-size:22px;font-weight:800;letter-spacing:-.025em;margin-top:5px}
.tile .n{font-size:10.5px;color:var(--ink-2);margin-top:3px}
.tile .n.warn{color:var(--bad)}

/* ---- aging ---- */
.stack{display:flex;height:12px;gap:2px;margin:12px 0 4px}
.stack span{display:block;height:100%}
.stack span:first-child{border-radius:4px 0 0 4px}
.stack span:last-child{border-radius:0 4px 4px 0}
.lg{margin-top:10px}
.lg .row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:13px}
.lg .row:first-child{border-top:0}
.sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.lg .lb{flex:1;color:var(--ink-2)}
.lg .vl{font-weight:700;font-variant-numeric:tabular-nums}
.lg .ct{width:26px;text-align:right;color:var(--ink-3);font-size:11.5px}

/* ---- rows ---- */
.sec{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
     color:var(--ink-3);margin:22px 0 9px}
/* section heading with an action parked on the right */
.sec.act{display:flex;align-items:center;gap:10px}
.sec.act .btn{margin-left:auto;text-transform:none;letter-spacing:0;
              padding:7px 12px;font-size:11.5px}
.row{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft)}
.row:first-child{border-top:0}
.row .body{flex:1;min-width:0}
.row .nm{font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.row .mt{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.row .rt{text-align:right;flex:0 0 auto}
.row .amt{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.row .day{font-size:11px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.row .day.late{color:var(--bad);font-weight:700}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:20px;
      font-size:11px;font-weight:700;background:var(--sunken);border:1px solid var(--line);color:var(--ink-2)}
.chip b{width:7px;height:7px;border-radius:50%;display:block}
.chip.Paid b{background:var(--good)} .chip.Partial b,.chip.Draft b{background:var(--warn)}
.chip.Overdue b{background:var(--bad)} .chip.Unpaid b{background:var(--ink-3)}

/* ---- pipeline ---- */
.stage{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px}
.stage .lb{width:88px;color:var(--ink-2);flex:0 0 auto}
.stage .track{flex:1;height:9px;background:#e8eeea;border-radius:5px;overflow:hidden}
.stage .track i{display:block;height:100%;background:var(--brand-2);border-radius:0 4px 4px 0}
.stage .ct{width:22px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* ---- forms & buttons ---- */
input,select,button{font:inherit}
input[type=text],input[type=date],input[type=number],input[type=password]{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.btn{border:0;background:var(--accent);color:var(--accent-ink);font-weight:800;
     padding:10px 15px;border-radius:9px;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2);font-weight:600}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.inline input[type=number]{width:120px}
.inline input[type=date]{width:150px}
details>summary{cursor:pointer;font-size:12px;color:var(--brand-2);font-weight:700;list-style:none}
details>summary::-webkit-details-marker{display:none}

/* ---- bottom nav (thumb zone) ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;
      background:var(--surface);border-top:1px solid var(--line);
      padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.dock a{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-3);padding:4px 2px}
.dock a i{display:block;font-style:normal;font-size:17px;margin-bottom:2px}
.dock a.on{color:var(--brand-2)}

.empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}
.flash{background:var(--warn-bg);border-left:3px solid var(--accent);padding:11px 13px;
       border-radius:8px;font-size:12px;margin-bottom:12px}

@media(min-width:760px){
  .tiles{grid-template-columns:repeat(4,1fr)}
  .wrap{padding:24px 24px 92px}
  h1{font-size:26px}
  .two{display:grid;grid-template-columns:1.4fr .9fr;gap:14px;align-items:start}
}

/* ---- form fields ---- */
.fld{margin-bottom:11px}
.fld label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
           text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.fld select{width:100%;padding:10px 12px;border:1px solid var(--line);
            border-radius:9px;background:#fff;color:var(--ink)}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:-4px}

/* ---- invoice ---- */
.invoice{padding:20px}
.inv-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
          padding-bottom:16px;border-bottom:2px solid var(--brand)}
.inv-from{font-weight:800;font-size:16px;letter-spacing:-.01em}
.inv-meta{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.inv-no{text-align:right}
.inv-num{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:3px 0 6px}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.inv-to{font-weight:700;font-size:15px;margin-top:3px}
.inv-table{width:100%;border-collapse:collapse;margin-top:6px}
.inv-table th{text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
              color:var(--ink-3);padding:8px 0;border-bottom:1px solid var(--line)}
.inv-table td{padding:11px 0;border-bottom:1px solid var(--line-soft);
              font-size:13px;vertical-align:top}
.inv-table .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-table tr.tot td{font-weight:700;border-bottom:1px solid var(--line)}
.inv-table tr.tot.big td{font-size:17px;border-bottom:0;border-top:2px solid var(--brand);
                         padding-top:13px}

@media print{
  .top,.dock,.noprint{display:none !important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
  .card,.invoice{border:0;margin:0;padding:0}
  .flash{border:1px solid #ccc}
}