/* ═══════════════════════════════════════════════════════════════════
   The documents themselves — quotation, invoice, receipt, development
   agreement. One stylesheet drives both the on-screen preview and the
   printed page, so what the client sees is what the client receives.

   Page is A4 with a 16mm margin. Everything is sized in mm so a print
   at 100% lands where it should; the screen preview just scales the
   same sheet down inside a grey surround.
   ═══════════════════════════════════════════════════════════════════ */

.sheetwrap { background: #e9e6df; padding: 28px var(--gut) 64px; display: flex; justify-content: center }

.sheet {
  width: 210mm;
  min-height: 297mm;
  padding: 16mm;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10.2pt;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(20, 37, 27, .14);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── masthead ───────────────────────────────────────────────────── */
.doc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14mm;
  padding-bottom: 7mm;
  border-bottom: 2px solid var(--ink);
}
.doc-id { display: flex; align-items: center; gap: 3.4mm }
.doc-id .mk { width: 11mm; height: 11mm; flex: 0 0 11mm }
.doc-id b {
  font-family: var(--display); font-weight: 800; font-size: 15pt;
  letter-spacing: -.01em; display: block; line-height: 1;
}
.doc-id span {
  display: block; font-size: 6.6pt; letter-spacing: .3em; text-indent: .3em;
  color: var(--ink-3); font-weight: 700; margin-top: 1.4mm;
}
.doc-kind { text-align: right }
.doc-kind h1 {
  font-family: var(--display); font-weight: 800; font-size: 19pt;
  letter-spacing: -.035em; line-height: 1; color: var(--red);
}
.doc-kind .ref {
  font-family: var(--display); font-weight: 700; font-size: 10pt;
  margin-top: 2mm; letter-spacing: .02em;
}
.doc-kind .st { margin-top: 2.6mm }

/* ── party / meta band ──────────────────────────────────────────── */
.doc-band {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10mm;
  padding: 6mm 0 7mm;
  border-bottom: 1px solid var(--line);
}
.doc-band h4 {
  font-size: 6.8pt; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 2.2mm;
}
.doc-band .who b { display: block; font-size: 11pt; font-weight: 700; margin-bottom: 1mm }
.doc-band .who p { font-size: 9pt; color: var(--ink-2); line-height: 1.55 }
.doc-band .meta { min-width: 46mm }
.doc-band .meta div {
  display: flex; justify-content: space-between; gap: 6mm;
  font-size: 9pt; padding: 1.3mm 0; border-bottom: 1px dotted var(--line);
}
.doc-band .meta div:last-child { border-bottom: 0 }
.doc-band .meta dt { color: var(--ink-3) }
.doc-band .meta dd { font-weight: 700; font-variant-numeric: tabular-nums }

/* ── line items ─────────────────────────────────────────────────── */
.doc-items { width: 100%; border-collapse: collapse; margin-top: 7mm }
.doc-items th {
  font-size: 6.8pt; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; text-align: left;
  padding: 0 2.5mm 2.4mm; border-bottom: 1.5px solid var(--ink);
}
.doc-items th.r, .doc-items td.r { text-align: right }
.doc-items td {
  padding: 3.2mm 2.5mm; border-bottom: 1px solid var(--line);
  vertical-align: top; font-size: 9.6pt;
}
.doc-items td:first-child, .doc-items th:first-child { padding-left: 0 }
.doc-items td:last-child, .doc-items th:last-child { padding-right: 0 }
.doc-items .it b { font-weight: 700; display: block }
.doc-items .it p { font-size: 8.4pt; color: var(--ink-3); line-height: 1.5; margin-top: .8mm }
.doc-items .n { font-variant-numeric: tabular-nums; white-space: nowrap }

/* ── totals ─────────────────────────────────────────────────────── */
.doc-sum { display: flex; justify-content: flex-end; margin-top: 6mm }
.doc-sum .box { width: 74mm }
.doc-sum .l {
  display: flex; justify-content: space-between; gap: 8mm;
  font-size: 9.6pt; padding: 1.9mm 0; border-bottom: 1px solid var(--line);
}
.doc-sum .l span:last-child { font-variant-numeric: tabular-nums }
.doc-sum .l.disc span:last-child { color: var(--green) }
.doc-sum .l.grand {
  border-bottom: 0; border-top: 2px solid var(--ink);
  margin-top: 1.4mm; padding-top: 3.2mm;
  font-family: var(--display); font-weight: 800; font-size: 13pt; letter-spacing: -.02em;
}
.doc-sum .l.due {
  background: var(--red); color: #fff; margin-top: 2.4mm;
  padding: 2.8mm 3.4mm; border: 0;
  font-family: var(--display); font-weight: 800; font-size: 12pt;
}
.doc-sum .paidmark {
  margin-top: 3.4mm; border: 2px solid var(--green); color: var(--green);
  text-align: center; padding: 2.6mm; border-radius: var(--r);
  font-family: var(--display); font-weight: 800; font-size: 12pt;
  letter-spacing: .14em; text-indent: .14em;
}

/* ── prose blocks (terms, agreement clauses) ────────────────────── */
.doc-sec { margin-top: 8mm; break-inside: avoid }
.doc-sec > h3 {
  font-family: var(--display); font-weight: 800; font-size: 10.5pt;
  letter-spacing: -.01em; padding-bottom: 1.8mm; margin-bottom: 3mm;
  border-bottom: 1px solid var(--line);
}
.doc-sec p { font-size: 9pt; line-height: 1.62; color: var(--ink-2); margin-bottom: 2.4mm }
.doc-sec p:last-child { margin-bottom: 0 }
.doc-sec ol { margin: 0 0 0 4.6mm; font-size: 9pt; line-height: 1.62; color: var(--ink-2) }
.doc-sec ol > li { margin-bottom: 2.6mm; padding-left: 1mm }
.doc-sec ol > li > b { color: var(--ink) }
.doc-sec ul { margin: 1.6mm 0 0 4.6mm; font-size: 9pt; line-height: 1.6; color: var(--ink-2) }
.doc-sec ul li { margin-bottom: 1.2mm }

.clause-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 9mm }

/* milestone / schedule table */
.sched { width: 100%; border-collapse: collapse; font-size: 9pt; margin-top: 2mm }
.sched th {
  font-size: 6.6pt; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  font-weight: 700; text-align: left; padding: 0 2.5mm 2mm; border-bottom: 1px solid var(--ink);
}
.sched th:first-child, .sched td:first-child { padding-left: 0 }
.sched th.r, .sched td.r { text-align: right; padding-right: 0 }
.sched td { padding: 2.6mm 2.5mm; border-bottom: 1px solid var(--line); vertical-align: top }
.sched .n { font-variant-numeric: tabular-nums; white-space: nowrap }

/* payment / remittance strip */
.remit {
  margin-top: 7mm; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--red); border-radius: var(--r); padding: 4mm 5mm;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 8mm; break-inside: avoid;
}
.remit h4 {
  grid-column: 1 / -1; font-size: 6.8pt; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.remit div { font-size: 9pt }
.remit dt { color: var(--ink-3); font-size: 8pt }
.remit dd { font-weight: 700 }

/* signatures */
.signs { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 12mm; break-inside: avoid }
.sign .line { border-bottom: 1px solid var(--ink); height: 16mm }
.sign .cap { font-size: 8pt; color: var(--ink-3); margin-top: 2mm; line-height: 1.5 }
.sign .cap b { display: block; color: var(--ink); font-size: 9.4pt; margin-bottom: .6mm }

/* footer */
.doc-foot {
  margin-top: auto; padding-top: 7mm; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 8mm;
  font-size: 7.6pt; color: var(--ink-3); line-height: 1.55;
}
.doc-foot b { color: var(--ink-2) }

/* watermark for drafts */
.sheet.is-draft::after {
  content: "DRAFT";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 64pt;
  color: rgba(25, 34, 31, .05); letter-spacing: .2em; pointer-events: none;
  transform: rotate(-24deg);
}

/* ── print ──────────────────────────────────────────────────────── */
@page { size: A4; margin: 0 }

@media print {
  .rail, .topbar, .docbar, .no-print { display: none !important }
  body { background: #fff }
  .app { display: block }
  .sheetwrap { background: #fff; padding: 0; display: block }
  /* min-height must go: on a multi-page document it combines with the
     footer's auto margin to push the footer onto a page of its own. */
  .sheet { box-shadow: none; width: auto; min-height: 0; margin: 0 }
  .doc-foot { margin-top: 10mm; break-before: avoid }
  .doc-sec, .signs, .remit, .doc-band { break-inside: avoid }
}

/* screen-only toolbar that sits above the sheet */
.docbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px var(--gut); border-bottom: 1px solid var(--line); background: var(--bg);
}
.docbar .sp { flex: 1 }

/* `screen` matters: an A4 print surface is ~794 CSS px, which is inside
   this breakpoint, so an unscoped query would collapse the printed
   party band into a single column and waste half of page one. */
@media screen and (max-width: 900px) {
  .sheet { width: 100%; min-height: 0; padding: 7mm; font-size: 9.6pt }
  .doc-band { grid-template-columns: 1fr; gap: 5mm }
  .clause-grid, .signs, .remit { grid-template-columns: 1fr }
  .sheetwrap { padding: 14px 12px 40px }
}