/* ===================================================================
   Printed quotation (components/QuotePrint.tsx)
   Deliberately self-contained: its own hex palette (the oklch tokens
   converted and nudged for paper) and no Tailwind classes, because
   react-to-print clones this subtree into a bare iframe. Sized in mm
   against A4 so the on-screen preview is the printed page.

   TWO KNOBS, and they do different jobs:

   `font-size` on .qdoc is the only absolute size in the file — every
   other size is an `em` multiple of it, taken from the 9.2pt this was
   drawn at. Change it and the whole sheet rescales with its hierarchy
   intact. It is deliberately NOT the fitting knob: shrinking the type
   costs legibility for very little height, because most of the page is
   whitespace, not glyphs.

   `--q-sp` scales the vertical rhythm — margins, vertical padding, the
   signature rule — while horizontal padding stays put so nothing looks
   pinched. `--q-lh` goes with it. QuotePrint measures the rendered
   sheet and steps down the .q-dense-N rungs below until it fits one A4
   page, so a short quote keeps the airy layout and a long one tightens
   itself. If even the tightest rung will not fit, it reverts to the
   roomy layout and runs to two pages rather than being cramped AND
   long for nothing.
   =================================================================== */
.qdoc {
  --q-brand: #178961;
  --q-deep: #035f44;
  --q-tint: #e4faed;
  --q-edge: #cfe9dc;
  --q-gold: #e1bf7b;
  --q-gold-deep: #a47634;
  --q-ink: #1c2420;
  --q-soft: #525a56;
  --q-faint: #8b918e;
  --q-line: #dfe4e1;
  --q-hair: #edf0ee;

  /* Vertical rhythm multiplier and body leading — see .q-dense-N below. */
  --q-sp: 1;
  --q-lh: 1.45;

  width: 186mm;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: var(--q-ink);
  font-family: 'Geist', 'Geist Variable', system-ui, sans-serif;
  font-size: 9.2pt;
  line-height: var(--q-lh);
  /* Without this the emerald bands print as blank white. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The fitting ladder. Type is untouched on every rung — only the air between
   things closes up, which is where the page height actually is. QuotePrint
   takes the LOOSEST rung that still fits, so the rungs are close together:
   a coarse ladder overshoots and leaves a short quote needlessly cramped. */
.qdoc.q-dense-1 { --q-sp: 0.82; --q-lh: 1.40; }
.qdoc.q-dense-2 { --q-sp: 0.68; --q-lh: 1.34; }
.qdoc.q-dense-3 { --q-sp: 0.56; --q-lh: 1.28; }
.qdoc.q-dense-4 { --q-sp: 0.44; --q-lh: 1.22; }
.qdoc.q-dense-5 { --q-sp: 0.32; --q-lh: 1.16; }

/* --- letterhead --- */
.q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10mm; }
.q-brandrow { display: flex; align-items: center; gap: 3.5mm; }
.q-mark {
  width: 14mm; height: 13mm; flex-shrink: 0;
  object-fit: contain; object-position: center;
}
.q-brandname { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 2.391em; font-weight: 600; line-height: 0.95; color: var(--q-deep); }
.q-brandsub { font-size: 0.696em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--q-gold-deep); margin-top: calc(1.8mm * var(--q-sp)); }
.q-headright { text-align: right; padding-top: 0.5mm; }
.q-doctitle { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 1.467em; font-weight: 600; color: var(--q-ink); line-height: 1; }
.q-docmeta { font-size: 0.826em; color: var(--q-soft); margin-top: calc(2mm * var(--q-sp)); font-variant-numeric: tabular-nums; }
.q-docnum { font-weight: 600; color: var(--q-brand); letter-spacing: 0.04em; }
.q-rule { height: 1.2mm; border-radius: 1mm; margin-top: calc(4mm * var(--q-sp));
  background: linear-gradient(90deg, var(--q-deep), var(--q-brand) 45%, var(--q-gold)); }

/* --- guest block --- */
.q-meta { margin-top: calc(5mm * var(--q-sp)); display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(3.4mm * var(--q-sp)) 8mm;
  background: var(--q-tint); border: 1px solid var(--q-edge); border-radius: 2.5mm;
  padding: calc(4mm * var(--q-sp)) 5mm; }
.q-meta dt { font-size: 0.696em; letter-spacing: 0.15em; text-transform: uppercase; color: var(--q-gold-deep); font-weight: 600; }
.q-meta dd { margin: calc(0.9mm * var(--q-sp)) 0 0; font-size: 1.087em; font-weight: 600; color: var(--q-ink); }

/* --- section tables --- */
.q-section { margin-top: calc(6mm * var(--q-sp)); }
.q-band { display: flex; align-items: baseline; justify-content: space-between;
  background: var(--q-deep); color: #fff; padding: calc(2.3mm * var(--q-sp)) 3.5mm; border-radius: 2mm 2mm 0 0; }
.q-band h3 { margin: 0; font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 1.25em; font-weight: 600; letter-spacing: 0.01em; }
.q-band span { font-size: 0.717em; letter-spacing: 0.16em; text-transform: uppercase; color: #9fd8c1; }

.q-table { width: 100%; border-collapse: collapse; border: 1px solid var(--q-line); border-top: none; }
.q-table thead th { background: var(--q-tint); color: var(--q-deep); font-size: 0.707em;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: calc(1.9mm * var(--q-sp)) 2.5mm; text-align: left; border-bottom: 1px solid var(--q-edge); }
.q-table td { padding: calc(2mm * var(--q-sp)) 2.5mm; border-bottom: 1px solid var(--q-hair); vertical-align: top; }
.q-table tbody tr:last-child td { border-bottom: none; }
.q-table tbody tr:nth-child(even) td { background: #fbfdfb; }
.q-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-date { color: var(--q-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-part { font-weight: 500; }
.q-venue { color: var(--q-soft); }
.q-strong { font-weight: 600; }
.q-sub td { background: var(--q-tint) !important; color: var(--q-deep); font-weight: 600;
  border-top: 1px solid var(--q-edge); border-bottom: none; }
.q-sub .q-lab { font-size: 0.783em; letter-spacing: 0.1em; text-transform: uppercase; }

/* --- grand total --- */
.q-grand { margin-top: calc(6mm * var(--q-sp)); display: flex; align-items: center; justify-content: space-between;
  gap: 8mm; padding: calc(4.5mm * var(--q-sp)) 5.5mm; border-radius: 2.5mm; color: #fff;
  background: linear-gradient(105deg, #024b36, #0d7d5b);
  border-left: 1.6mm solid var(--q-gold); }
.q-grand .q-lab { font-size: 0.739em; letter-spacing: 0.2em; text-transform: uppercase; color: #9fd8c1; }
.q-grand .q-amt { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 2.283em; font-weight: 600;
  line-height: 1; margin-top: calc(1.5mm * var(--q-sp)); font-variant-numeric: tabular-nums; }
.q-words { font-size: 0.848em; font-style: italic; color: #c6e8d8; margin-top: calc(1.8mm * var(--q-sp)); max-width: 78mm; }

/* --- notes / terms / footer --- */
.q-note { margin-top: calc(3.5mm * var(--q-sp)); padding: calc(2.7mm * var(--q-sp)) 3.5mm; font-size: 0.87em; color: #5f4c22;
  background: #fdf8ec; border-left: 2.4pt solid var(--q-gold); border-radius: 0 2mm 2mm 0; }
.q-note strong { color: #4a3a14; }

.q-terms { margin-top: calc(6.5mm * var(--q-sp)); }
.q-terms h4 { margin: 0 0 calc(2.5mm * var(--q-sp)); font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 1.087em;
  font-weight: 600; color: var(--q-deep); letter-spacing: 0.02em; }
.q-terms ol { margin: 0; padding-left: 4.5mm; columns: 2; column-gap: 8mm;
  font-size: 0.804em; line-height: calc(var(--q-lh) * 1.03); color: var(--q-soft); }
.q-terms li { margin-bottom: calc(1.2mm * var(--q-sp)); }
/* Terms are the one block that pays better in columns than in leading, but
   only once the leading has already been spent — hence the tightest rungs. */
.qdoc.q-dense-4 .q-terms ol,
.qdoc.q-dense-5 .q-terms ol { columns: 3; column-gap: 6mm; }

.q-foot { margin-top: calc(7mm * var(--q-sp)); padding-top: calc(3.5mm * var(--q-sp)); border-top: 1px solid var(--q-line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10mm; }
.q-vendors { font-size: 0.804em; line-height: calc(var(--q-lh) * 1.1); color: var(--q-soft); white-space: pre-line; }
.q-sign { text-align: center; flex-shrink: 0; }
.q-signline { width: 44mm; border-bottom: 1px solid var(--q-faint); height: calc(11mm * var(--q-sp)); }
.q-signlabel { font-size: 0.761em; color: var(--q-soft); margin-top: calc(1.8mm * var(--q-sp)); }

/* On-screen preview: render the A4 sheet as paper on the app background. */
.qpaper { background: #fff; border-radius: 4px; padding: 12mm;
  box-shadow: 0 18px 50px -22px rgba(12, 55, 40, 0.45), 0 0 0 1px rgba(12, 55, 40, 0.06); }

@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  .qpaper { padding: 0; box-shadow: none; border-radius: 0; }
  .qdoc { width: auto; font-size: 9pt; }
  /* Repeat column headers when a long section spills onto page two. */
  .q-table thead { display: table-header-group; }
  .q-table tr, .q-grand, .q-note, .q-meta, .q-foot { break-inside: avoid; }
  .q-band { break-after: avoid; }
  .q-terms h4 { break-after: avoid; }
}