/* Invoice document — the printed/emailed bill. A4 sheet, document aesthetic:
   hairline rules do the structural work, seal red only on the masthead rule and
   the total. Used on screen (Billing desk preview, client portal) and in print;
   the same markup is rasterised for the PDF attachment. */

.inv-sheet{width:210mm;min-height:297mm;box-sizing:border-box;padding:12mm 13mm 10mm;background:#fff;color:var(--ink-1);font-family:var(--font-sans);font-size:10.5pt;line-height:1.5;display:flex;flex-direction:column;border:1px solid var(--line);box-shadow:var(--shadow-sm,0 1px 2px rgba(38,33,27,.06))}
.inv-sheet *{box-sizing:border-box}
.inv-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.inv-eyebrow{font-size:7.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep)}

/* Masthead — typographic nameplate, no logo (ICAI). */
.inv-mast{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;padding-bottom:9px;border-bottom:2px solid var(--seal)}
.inv-name{font-family:var(--font-serif);font-size:19pt;line-height:1.12;font-weight:600;letter-spacing:-.01em;margin:0}
.inv-name .amp{color:var(--seal)}
.inv-desig{font-size:8.5pt;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.inv-addr{font-size:8.8pt;color:var(--ink-2);margin-top:7px;max-width:88mm;line-height:1.45}
.inv-ids{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;font-size:8.3pt;color:var(--ink-2)}
.inv-ids b{font-weight:600;color:var(--ink-3);font-weight:600}
.inv-title{text-align:right}
.inv-title h2{font-family:var(--font-serif);font-size:15pt;font-weight:600;margin:0;letter-spacing:.02em;color:var(--seal)}
.inv-icai{height:13mm;width:auto;margin-top:6px;display:block;margin-left:auto}

/* Party + meta */
.inv-parties{display:grid;grid-template-columns:1fr 78mm;gap:0;border-bottom:1px solid var(--line-strong)}
.inv-billto{padding:10px 13px 10px 0}
.inv-meta{padding:10px 0 10px 13px;border-left:1px solid var(--line)}
.inv-billto .who{font-family:var(--font-serif);font-size:12.5pt;font-weight:600;margin:5px 0 2px}
.inv-billto .lines{font-size:9pt;color:var(--ink-2);line-height:1.45;white-space:pre-line}
.inv-billto .idrow{margin-top:5px;font-size:8.5pt;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:1px 14px}
.inv-mrow{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:9pt}
.inv-mrow dt{color:var(--ink-3)}
.inv-mrow dd{margin:0;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:8.8pt}
.inv-blank{color:var(--alert);background:var(--alert-tint);padding:0 4px;border-radius:2px;font-size:8pt;letter-spacing:.02em}

/* Fee lines */
.inv-tbl{width:100%;border-collapse:collapse;margin-top:11px}
.inv-tbl th{font-size:7.8pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:7px 8px;border-bottom:1px solid var(--line-strong);background:var(--paper-1)}
.inv-tbl td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;font-size:9.5pt;line-height:1.38}
.inv-tbl th:first-child,.inv-tbl td:first-child{padding-left:0;width:9mm;color:var(--ink-3)}
.inv-tbl .r{text-align:right}
.inv-tbl th.r,.inv-tbl td.r{padding-right:0}
.inv-tbl td.r{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-tbl .sac{width:22mm;font-family:var(--font-mono);font-size:8.6pt;color:var(--ink-2)}
.inv-tbl .qty{width:16mm;font-family:var(--font-mono);font-size:8.8pt;color:var(--ink-2);text-align:right}
.inv-tbl .part b{font-weight:600}
.inv-tbl .sub{display:block;font-size:8.3pt;color:var(--ink-3);margin-top:1px}

/* Totals */
.inv-sum{display:grid;grid-template-columns:1fr 80mm;gap:16px;margin-top:10px;align-items:start}
.inv-words{font-size:9pt;color:var(--ink-2);line-height:1.5}
.inv-words b{display:block;font-size:7.5pt;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:3px}
.inv-trow{display:flex;justify-content:space-between;gap:12px;font-size:9.4pt;padding:4px 0;color:var(--ink-2)}
.inv-trow span:first-child{white-space:nowrap}
.inv-trow span:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-1);white-space:nowrap}
.inv-trow--rule{border-top:1px solid var(--line)}
.inv-trow--grand{border-top:2px solid var(--seal);border-bottom:2px solid var(--seal);margin-top:4px;padding:7px 0;font-weight:700;font-size:11pt;color:var(--ink-1)}
.inv-trow--grand span:last-child{color:var(--seal);font-weight:700}
.inv-trow--due span:last-child{color:var(--alert)}
.inv-trow--paid span:last-child{color:var(--ok)}

/* Pay + terms + sign-off */
.inv-pay{display:grid;grid-template-columns:1fr auto;gap:16px;margin-top:12px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-0)}
.inv-pay .prow{display:grid;grid-template-columns:30mm 1fr;gap:1px 10px;font-size:8.5pt}
.inv-pay .prow dt{color:var(--ink-3)}
.inv-pay .prow dd{margin:0;font-family:var(--font-mono);font-size:8.6pt;color:var(--ink-1)}
.inv-qr{text-align:center;font-size:7.5pt;color:var(--ink-3)}
.inv-qr img{width:24mm;height:24mm;display:block;border:1px solid var(--line);border-radius:4px;margin-bottom:3px}
.inv-foot{margin-top:auto;padding-top:10px;display:grid;grid-template-columns:1fr 62mm;gap:20px;align-items:end}
.inv-terms{font-size:8.3pt;color:var(--ink-2);line-height:1.42}
.inv-terms .eyebrow2{font-size:7.5pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:3px}
.inv-terms ul{margin:0;padding-left:13px}
.inv-terms li{margin:1px 0}
.inv-sign{text-align:right;font-size:9pt}
.inv-sign .for{color:var(--ink-2);margin-bottom:2px}
.inv-sign .who{font-family:var(--font-serif);font-size:11pt;font-weight:600;margin-top:2px}
.inv-sign .role{font-size:8.3pt;color:var(--ink-3)}
.inv-sign img{height:14mm;width:auto;display:block;margin:4px 0 2px auto}
.inv-sign .rule{border-top:1px solid var(--line-strong);margin-top:7mm;padding-top:4px}
.inv-tail{margin-top:9px;padding-top:6px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:7.8pt;color:var(--ink-3)}

/* Screen shell around the sheet (preview + desk modal) */
.inv-stage{background:var(--paper-2);padding:22px;display:flex;justify-content:center;overflow:auto}
/* Preview inside a modal: the sheet is 210mm wide, so it is scaled to fit. */
.modalcard--sheet{max-width:min(96vw,720px)}
.modalcard--send{max-width:min(96vw,1020px)}
.inv-fitwrap{background:var(--paper-2);padding:16px;max-height:68vh;overflow:auto}
.inv-fit{width:210mm;transform:scale(.78);transform-origin:top left;margin-bottom:-66mm}
/* --auto scales to whatever it is actually inside, rather than to the .78 that
   assumes the invoice's own modal width. The sheet is 210mm (794px) and a
   narrower shell simply clips its right edge — which is where the meta values
   sit. usePaperFit() measures the wrapper and sets the three custom properties.

   A TRANSFORM DOES NOT CHANGE THE LAYOUT BOX, so BOTH axes have to be reclaimed
   or the wrapper keeps scrolling over the full 794mm×full-height box the sheet
   no longer visually occupies: --fit-pull cancels the residual height, and
   --fit-push the residual width. Without the second the modal showed a
   horizontal scrollbar over some 300px of empty paper — the same invisible
   fault as an undefined class, in that nothing errors and the page merely looks
   wrong. */
.inv-fit--auto{width:210mm;transform:scale(var(--fit,.78));transform-origin:top left;margin-bottom:var(--fit-pull,-66mm);margin-right:var(--fit-push,0)}
.inv-fit .inv-sheet,.inv-fit--auto .inv-sheet{box-shadow:var(--shadow-sm,0 1px 3px rgba(38,33,27,.1))}

/* Fee-line editor (invoice form) */
/* The invoice form carries a seven-column fee-line grid, and the billing-entity
   form is long — both need more room than the shared 600px dialog. */
.modalcard--form{max-width:min(96vw,940px)}
.invline{display:grid;grid-template-columns:1fr 76px 108px 62px 84px 104px 28px;gap:7px;align-items:center;margin-bottom:7px}
.invline--nosac{grid-template-columns:1fr 108px 62px 84px 104px 28px}
.invline--head{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.invline--head .r,.invline .r{text-align:right}
.invline .input{height:34px;padding:5px 8px;font-size:13px}
.invline .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.invtot{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-0);padding:11px 14px}
.invtot>div{display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--ink-2);padding:3px 0}
.invtot__grand{border-top:1px solid var(--line-strong);margin-top:5px;padding-top:7px!important;font-weight:700;color:var(--ink-1)!important;font-size:15px!important}
.invtot__grand span:last-child{color:var(--seal)}
@media (max-width:760px){
  .invline,.invline--nosac{grid-template-columns:1fr 1fr 28px;gap:6px}
  .invline--head{display:none}
  /* The dialogs that carry a sheet or a long form join the phone's bottom-sheet
     treatment instead of sitting 96vw wide with rounded corners mid-air. */
  .modalcard--sheet,.modalcard--send,.modalcard--form{max-width:none}
  /* A 210mm sheet scaled to .78 is still 620px wide — it scrolled sideways on a
     phone. Scaled to fit the screen instead (the margin cancels the space the
     untransformed height still occupies). */
  .inv-fit{transform:scale(.44);margin-bottom:-166mm}
  .inv-fitwrap{padding:10px;max-height:64dvh}
  .inv-stage{padding:10px}
  /* The despatch list is a six-column grid: on a phone each row stacks. */
  .invsend__head{display:none}
  .invsend__row,.invsend__client{grid-template-columns:28px 1fr;gap:4px 10px;padding:11px 14px}
  .invsend__row>*:nth-child(n+3),.invsend__client>*:nth-child(n+3){grid-column:2}
  .invsend__acts{justify-content:flex-start}
  .invsend__list{max-height:none}
}

/* Send screen */.invsend__bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper-1);position:sticky;top:0;z-index:2}
.invsend__only{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-caption);color:var(--ink-2);white-space:nowrap}
.invsend__only input{accent-color:var(--seal)}
.invsend__list{max-height:56vh;overflow:auto}
.invsend__head,.invsend__row,.invsend__client{display:grid;grid-template-columns:34px 150px 1fr 120px 108px 62px;gap:12px;align-items:center;padding:9px 18px;border-bottom:1px solid var(--line)}
.invsend__client{grid-template-columns:34px 1fr 110px 130px 92px}
.invsend__head{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-0);position:sticky;top:0;z-index:1}
.invsend__row:hover,.invsend__client:hover{background:var(--paper-1)}
.invsend__pick{display:flex;align-items:center;justify-content:center}
.invsend__pick input{width:16px;height:16px;accent-color:var(--seal);cursor:pointer}
.invsend__state{font-size:var(--fs-caption)}
.invsend__acts{display:flex;gap:5px;justify-content:flex-end}
.invsend__msg{grid-column:1/-1;font-size:var(--fs-caption);color:var(--alert);padding:2px 0 0 46px}
.invsend__periodbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--paper-0);flex-wrap:wrap}
.invsend__note{margin:0;padding:13px 18px;color:var(--ink-3);border-top:1px solid var(--line);line-height:var(--lh-normal)}

@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important}
  .inv-noprint{display:none!important}
  .inv-stage{padding:0;background:#fff;display:block;overflow:visible}
  .inv-sheet{border:0;box-shadow:none;margin:0;page-break-after:always}
  .inv-sheet:last-child{page-break-after:auto}
}

/* ---- Engagement letter (peer review § 01) --------------------------------
   The letter prints on the invoice's own A4 stage, so it inherits the mast,
   the parties block and the margins. These rules add only what a letter needs
   and an invoice does not: running prose, a numbered scope, and two places to
   sign. Nothing here changes an invoice. */
.let-sub { margin: 20px 0 14px; font-family: var(--font-serif); font-size: 13.5pt; line-height: 1.35; }
.let-body { margin: 0 0 10px; font-family: var(--font-sans); font-size: 10pt; line-height: 1.6; color: var(--ink-1); text-wrap: pretty; }
.let-sec { margin: 16px 0; }
.let-sec .inv-eyebrow { margin-bottom: 6px; }
.let-list { margin: 0; padding-left: 20px; }
.let-list li { font-family: var(--font-sans); font-size: 10pt; line-height: 1.6; margin-bottom: 6px; text-wrap: pretty; }
.let-sign { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; margin-top: 28px; page-break-inside: avoid; }
.let-sig { display: block; max-height: 64px; margin: 10px 0 4px; }
.let-sigspace { height: 64px; }
.let-sigspace--client { height: auto; display: grid; gap: 14px; margin-top: 10px; }
.let-ruled { border-bottom: 1px solid var(--line-strong); font-family: var(--font-sans); font-size: 8pt;
             color: var(--ink-3); padding-bottom: 2px; }
.let-signame { font-family: var(--font-sans); font-size: 9.5pt; line-height: 1.45; }
.let-accepted { margin-top: 10px; font-family: var(--font-sans); font-size: 9.5pt; line-height: 1.5; }