/* ============================================================
   THE QUOTATION DOCUMENT (styles)

   Lifted from the hand-built client quotation under MarketingPlan/ (2026-10-20) — the deliverable
   the owner pointed at as the format they want. Kept as its own file so plan-builder.css stays
   under the read ceiling.

   ⛔ EVERY SELECTOR MENTIONS `.qp`, AND THAT IS LOAD-BEARING. plan-builder's quotationCss() builds
   the downloadable file by lifting exactly the rules whose selector matches /(^|,|\s)\.qp\b/. A rule
   written without it looks right on screen and is simply missing from the file the client opens.
   ============================================================ */

.qp {
  --q-ink:#10201c; --q-soft:#44574f; --q-muted:#7a8b85;
  --q-line:#e2eae7; --q-line2:#f0f5f3;
  --q-brand:#0e7f67; --q-brand2:#22c1c3; --q-brand3:#7cc551;
  --q-wash:#edf8f4;
  --q-amber:#9a6200; --q-amber-bg:#fff6e5; --q-amber-line:#e8a33d;
  color: var(--q-ink);
  font-family: 'Inter', system-ui, Arial, sans-serif;
  font-size: 13px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.qp * { box-sizing: border-box; }

/* An A4 sheet, in millimetres ON PURPOSE. 794×1123 px looked right and printed to EIGHT sheets for
   six pages: A4 is 1122.5 px tall at 96dpi, so a 1123 px box overflows every sheet by half a pixel
   and the forced break lands on a blank page. The document is paginated by measuring this box's
   real height (quotation-doc.js), so it must stay a fixed box, not a min-height. The reference
   deliverable mentioned in the print block below is the same hand-built quotation named at the
   top of this file. */
.qp .page {
  width: 210mm; height: 297mm; margin: 0 auto 18px; background: #fff;
  position: relative; padding: 0 46px 58px; overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.55);
}
.qp .pbody { padding-top: 2px; }
.qp footer {
  position: absolute; left: 46px; right: 46px; bottom: 20px; display: flex;
  justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--q-muted);
  border-top: 1px solid var(--q-line); padding-top: 8px;
}
.qp footer b { color: var(--q-brand); font-weight: 600; }

.qp .band { margin: 0 -46px; height: 7px;
  background: linear-gradient(90deg, var(--q-brand2) 0%, var(--q-brand) 45%, var(--q-brand3) 100%); }

.qp .mast { display: flex; justify-content: space-between; align-items: flex-start; gap: 26px;
  padding: 18px 0 12px; border-bottom: 2px solid var(--q-ink); }
.qp .mast.compact { padding: 12px 0 10px; border-bottom-width: 1px; align-items: center; }
.qp .mast .wm { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--q-ink); }
.qp .mast .wm.big { font-size: 26px; }
.qp .mast .wm b { font-weight: 800; color: var(--q-brand); }
.qp .mast .tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--q-muted); font-weight: 600; margin-top: 6px; }
.qp .dt { text-align: right; }
.qp .dt h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: .18em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--q-brand) 0%, var(--q-brand3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.qp .dt .ref { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--q-muted); margin-top: 4px; }

.qp .parties { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 26px;
  padding: 12px 0; border-bottom: 1px solid var(--q-line); }
.qp .lbl { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--q-muted);
  font-weight: 600; margin-bottom: 4px; }
.qp .who { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.qp .sub { font-size: 12px; color: var(--q-soft); margin-top: 2px; }
.qp .sub b { color: var(--q-ink); font-weight: 600; }

.qp .figs { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; margin: 10px 0 2px; }
.qp .fig { border: 1px solid var(--q-line); border-radius: 9px; padding: 13px 15px; background: #fff; }
.qp .fig.hero { background: linear-gradient(135deg, var(--q-brand) 0%, #12967a 55%, var(--q-brand3) 190%);
  border: none; color: #fff; }
.qp .fig.save { background: var(--q-wash); border-color: #bfe5d9; }
.qp .fig.pickd { border: 2px solid var(--q-brand); }
.qp .fig .k { font-size: 9px; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; color: var(--q-muted); }
.qp .fig.hero .k { color: rgba(255,255,255,.82); }
.qp .fig .v { font-size: 24px; font-weight: 800; letter-spacing: -.025em; margin-top: 5px; line-height: 1.05; }
.qp .fig.save .v { color: var(--q-brand); }
.qp .fig .n { font-size: 10.5px; color: var(--q-muted); margin-top: 4px; }
.qp .fig.hero .n { color: rgba(255,255,255,.8); }

.qp h2 { font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--q-brand); margin: 12px 0 6px; }

.qp table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qp thead th { text-align: left; font-size: 9px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--q-muted); font-weight: 600; padding: 0 10px 7px; white-space: nowrap; }
.qp tbody td { padding: 8px 10px; border-top: 1px solid var(--q-line2); vertical-align: top; }
.qp tbody tr:first-child td { border-top: 1px solid var(--q-line); }
.qp td.mod { font-weight: 600; position: relative; padding-left: 22px; }
.qp tr.feat td.mod { padding-left: 36px; font-weight: 500; }
.qp td.mod i { position: absolute; left: 8px; top: 11px; width: 7px; height: 7px; border-radius: 2px; display: block; }
.qp tr.feat td.mod i { left: 22px; width: 5px; height: 5px; top: 12px; opacity: .65; }
.qp td.mod span { display: block; font-weight: 400; font-size: 10.5px; color: var(--q-muted);
  margin-top: 3px; line-height: 1.45; }
.qp td.basis { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px;
  color: var(--q-muted); white-space: nowrap; }
.qp td.r, .qp th.r { text-align: right; white-space: nowrap; }
.qp td.q, .qp th.q { text-align: right; white-space: nowrap; color: var(--q-soft); }
.qp td.q b { color: var(--q-ink); font-weight: 600; }
.qp td.big { font-weight: 600; }

.qp .subtot { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--q-ink); margin-top: 2px; padding-top: 11px; font-size: 15px; font-weight: 800; }
.qp .subtot b { color: var(--q-brand); }
.qp .subtot.one { border-top: 1px solid var(--q-line); font-size: 13.5px; padding-top: 8px; }

.qp .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qp .opt { border: 1px solid var(--q-line); border-radius: 9px; padding: 15px 17px; }
.qp .opt.pick { border: 2px solid var(--q-brand); background: var(--q-wash); }
.qp .opt h3 { font-size: 13.5px; font-weight: 700; margin: 0; }
.qp .pill { display: inline-block; font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 99px; margin-bottom: 7px;
  background: linear-gradient(90deg, var(--q-brand) 0%, var(--q-brand3) 160%); }
.qp .opt dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 9px 0 0; font-size: 12px; }
.qp .opt dt { color: var(--q-muted); }
.qp .opt dd { margin: 0; text-align: right; }
.qp .opt .pay { border-top: 1px solid #cfe5dd; margin-top: 9px; padding-top: 9px; }
.qp .opt .pay dt, .qp .opt .pay dd { font-weight: 800; font-size: 15px; color: var(--q-ink); }
.qp .opt.pick .pay dd { color: var(--q-brand); }

.qp .flag { border: 1px solid var(--q-amber-line); border-left-width: 4px; background: var(--q-amber-bg);
  border-radius: 7px; padding: 13px 16px; }
.qp .flag h3 { font-size: 12px; font-weight: 700; margin: 0 0 7px; color: var(--q-amber); }
.qp ol.tight { margin: 0; padding-left: 17px; font-size: 11.5px; color: var(--q-soft); }
.qp ol.tight li { margin-bottom: 6px; }
.qp ol.tight li:last-child { margin-bottom: 0; }
.qp ul.tight { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--q-soft); }
.qp ul.tight li { margin-bottom: 5px; }
.qp ul.tight li:last-child { margin-bottom: 0; }
.qp ol.tight b, .qp ul.tight b { color: var(--q-ink); font-weight: 600; }
.qp ul.tight i { font-style: normal; color: var(--q-brand); font-weight: 600; }
.qp .note { font-size: 11.5px; color: var(--q-muted); margin: 0; }
.qp .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.qp .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px;
  border: 1px solid var(--q-line); border-radius: 9px; padding: 15px 17px; }
.qp .rule { border-bottom: 1px solid var(--q-ink); height: 34px; }
.qp .sign .cap { font-size: 10px; color: var(--q-muted); margin-top: 5px; }

/* On a phone the fixed A4 sheet would force a sideways scroll, so it becomes a flowing document.
   The PRINTED and DOWNLOADED copies keep the real page boxes — this only affects reading on glass. */
@media (max-width: 860px) {
  .qp .page { width: 100%; height: auto; padding: 0 16px 26px; margin-bottom: 12px; }
  .qp footer { position: static; margin-top: 16px; }
  .qp .band { margin: 0 -16px; }
  .qp .parties, .qp .figs, .qp .opts, .qp .two, .qp .sign { grid-template-columns: 1fr; }
  .qp table, .qp thead th, .qp tbody td { font-size: 11.5px; }
  .qp tbody td { padding: 6px 4px; }
  .qp td.basis { font-size: 9.5px; }
}

/* ⛔ NO FORCED PAGE BREAKS, AND THAT IS MEASURED, NOT STYLE. Each .page is exactly one sheet
   (297mm), so the pages tile the sheets by themselves. Adding `break-after: page` on top of that
   printed SIX pages onto EIGHT sheets: a forced break that lands precisely on a sheet boundary
   makes Chrome emit an empty fragment, and two of the five did. The hand-built reference
   quotation under MarketingPlan/ has no forced breaks and prints to exactly its page count; the
   probe that proved it is in the 2026-10-20 commit message. */
@media print {
  .qp .page { box-shadow: none; margin: 0; }
}