/* =========================================================
   PTG SOLAR — PRINTABLE PROPOSAL / QUOTATION
   Rendered via the browser's own native print (js/proposal-print.js
   printProposal() calls window.print() — the customer picks "Save as
   PDF" as their destination). Rewritten 2026-07-22 from an earlier
   html2canvas + jsPDF screenshot/slicing approach. The rules below
   apply unconditionally (not gated behind @media print) so the
   markup is already correctly styled the moment JS populates
   #printableProposal — @media print (near the end of this file) then
   just handles showing it and hiding everything else at print time.

   On screen (normal browsing) the proposal markup stays display:none
   by default — it's only ever shown by an actual browser print.

   Reuses the site's existing --ink / --amber / --paper / --line
   design tokens from styles.css so the document reads as the
   same brand, just reformatted for paper: light background,
   bordered cards instead of glowing dark UI tiles, no motion,
   no shadows that won't survive rendering to an image.
========================================================= */

#printableProposal { display: none; }

#printableProposal {
  position: relative;
  width: 100%;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#printableProposal * { box-shadow: none !important; text-shadow: none !important; }

/* ---------- Watermark ----------
   position:fixed repeats this on every printed page in
   Chrome/Chromium-based browsers (the engine "Save as PDF"
   uses). It's plain low-opacity text, not a background image,
   so it still prints even if "background graphics" is left
   unchecked in the print dialog. */
.proposal-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-33deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 74px;
  letter-spacing: 0.08em;
  color: rgba(6, 15, 28, 0.045);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Repeating page brand ----------
   position:fixed repeats this on every printed page in Chrome/
   Chromium (the engine "Save as PDF" uses) — same technique as the
   watermark above. Sits inside the @page bottom margin so it never
   collides with normal document content, which stops at the margin
   edge on its own. */
.proposal-page-brand {
  position: fixed;
  bottom: 5mm;
  left: 13mm;
  right: 13mm;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.proposal-page-brand img { width: 13px; height: 13px; object-fit: contain; opacity: 0.85; }
.proposal-page-brand span {
  font-family: var(--font-display); font-size: 8.5px; letter-spacing: 0.02em; color: var(--slate-light);
}
.proposal-page-brand span b { color: var(--slate); font-weight: 700; }

/* ---------- Header / letterhead ---------- */
.proposal-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--amber);
  margin-bottom: 18px;
}
.proposal-brand { display: flex; align-items: center; gap: 10px; }
.proposal-logo { width: 36px; height: 36px; object-fit: contain; }
.proposal-brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink);
}
.proposal-brand-name span { color: var(--amber-dark); }
.proposal-brand-tagline {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate-light); margin-top: 1px;
}
.proposal-doc-meta { text-align: right; }
.proposal-doc-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 3px;
}
.proposal-doc-ref, .proposal-doc-date {
  font-family: var(--font-mono); font-size: 10px; color: var(--slate);
}

/* ---------- Prepared for ---------- */
.proposal-prepared-for {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 20px;
  margin-bottom: 16px;
}
.proposal-label {
  display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber-dark); margin-bottom: 4px;
}
.proposal-cust-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.proposal-cust-loc { font-size: 11.5px; color: var(--slate); margin-top: 1px; }
.proposal-prepared-for > div:last-child { text-align: right; font-size: 11.5px; color: var(--slate); }
.proposal-prepared-for > div:last-child div:first-of-type { color: var(--ink); font-weight: 600; }

/* ---------- Intro / pitch paragraph ---------- */
.proposal-intro {
  position: relative; z-index: 1;
  font-size: 12px;
  color: #33404A;
  background: #FBF8F0;
  border-left: 3px solid var(--amber);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
}

/* ---------- Investment highlights band ----------
   The headline sales moment: four bold stat cards up top so the
   lucrative-investment case is the first thing read, before any
   line-item detail. Border-based (not filled) so it's guaranteed
   to print correctly with or without "background graphics" on. */
.proposal-highlights {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.proposal-highlight {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--amber);
  border-radius: 8px;
  padding: 10px 10px 9px;
  text-align: center;
  break-inside: avoid;
}
.proposal-highlight .ph-label {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 5px;
}
.proposal-highlight .ph-value {
  font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--amber-dark);
  line-height: 1.15;
}
.proposal-highlight .ph-value .meter-unit { font-size: 10px; color: var(--amber-dark); margin-left: 1px; }
.proposal-highlight .ph-sub { font-size: 8px; color: var(--slate-light); margin-top: 4px; }

/* ---------- Spec highlights (Inverter / Panels / Battery) ----------
   Same visual treatment as the financial highlights above, but a
   3-column strip — used to emphasize the package's core hardware
   spec right alongside the breaker & protection sizing output. */
.proposal-spec-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* ---------- Section lead-in paragraphs (e.g. "Why Solar, Why Now") ---------- */
.proposal-lead-in { font-size: 11px; color: #33404A; margin-bottom: 10px; line-height: 1.55; }

/* ---------- Section shell ---------- */
.proposal-section {
  position: relative; z-index: 1;
  margin-bottom: 20px;
  break-inside: avoid-page;
}
/* The 25-row table is too long to keep on one page — let it flow
   and break naturally instead of forcing awkward whitespace. */
.proposal-table-section { break-inside: auto; }
.proposal-h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.proposal-h3 .num { color: var(--amber-dark); font-family: var(--font-mono); margin-right: 4px; }

/* ---------- Meter cards, reskinned light for paper ----------
   Same DOM/classes as the on-screen dark UI cards (cloned
   directly from the live results), just restyled here so the
   numbers are guaranteed identical to what the customer saw
   on screen while looking right on a printed/white page. */
#printableProposal .meter-group-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--slate); margin: 18px 0 8px;
  break-after: avoid-page; break-inside: avoid;
}
#printableProposal .meter-group-label:first-child { margin-top: 0; }
#printableProposal .meter-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px;
}
/* FIX (2026-07-22): Payback Summary only ever has 2 boxes (Standard +
   Depreciation-Adjusted), but was sharing the same 3-column grid as the
   7-box Investment Ratios section — leaving an awkward empty gap on
   the right instead of two evenly-balanced boxes. Scoped to
   #proposalPayback specifically so Investment Ratios' 7-box grid is
   untouched. */
#printableProposal #proposalPayback .meter-grid {
  grid-template-columns: repeat(2, 1fr);
}
#printableProposal .meter {
  background: #F7F5EF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  position: relative;
  overflow: hidden;
}
#printableProposal .meter::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gradient-gold);
}
#printableProposal .meter.teal-accent::before { background: linear-gradient(180deg, #6FCBB8, var(--success)); }
#printableProposal .meter .meter-label {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); margin-bottom: 4px;
}
#printableProposal .meter .meter-value {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--amber-dark);
}
#printableProposal .meter.teal-accent .meter-value { color: #2F6B52; }
#printableProposal .meter .meter-unit { font-size: 9px; color: var(--slate-light); margin-left: 2px; }
#printableProposal .meter .meter-note { font-size: 8.5px; color: var(--slate-light); margin-top: 4px; line-height: 1.4; }

/* ---------- Pricing breakdown (cloned #quoteBody) ---------- */
#printableProposal .breakdown { display: flex; flex-direction: column; gap: 2px; }
#printableProposal .breakdown-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; color: #33404A; padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}
#printableProposal .breakdown-row .val { font-family: var(--font-mono); text-align: right; }
#printableProposal .breakdown-row.total {
  font-weight: 700; color: var(--ink); font-size: 12.5px;
  border-top: 1px solid var(--ink); border-bottom: none; margin-top: 2px; padding-top: 8px;
}
#printableProposal .savings-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #E7F2EF; color: #2F6B52; font-weight: 700; font-size: 11px;
  border-radius: 5px; padding: 7px 10px; margin: 6px 0;
}
#printableProposal .help-text { font-size: 9px; color: var(--slate-light); }

/* ---------- Final total banner ----------
   Border-based emphasis rather than a solid fill, so it prints
   reliably even if the browser's "background graphics" option
   is left off. */
.proposal-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: 10px 2px; margin-top: 10px;
}
.proposal-total-row span:first-child {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--slate);
}
.proposal-total-row span:last-child {
  font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--amber-dark);
}

/* ---------- Warranty block (inverter warranty + service warranty) ----------
   Two-column card pair sitting under the pricing total: inverter
   warranty (with the Solis extension upsell inline, when applicable)
   on the left, the included service-warranty coverage on the right. */
.proposal-warranty {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.proposal-warranty--three-col { grid-template-columns: 1fr 1fr 1fr; }
.proposal-warranty-col {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #FBF9F3;
  break-inside: avoid;
}
.proposal-warranty-headline {
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--ink); margin: 4px 0 6px;
}
.proposal-warranty-note { font-size: 9.5px; color: var(--slate); line-height: 1.5; margin: 0; }
.proposal-warranty-upsell {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); break-inside: avoid;
}
.pw-upsell-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber-dark); border: 1px solid var(--amber); border-radius: 20px; padding: 2px 8px; margin-bottom: 6px;
}
.pw-upsell-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 4px;
}
.pw-upsell-row .val { font-family: var(--font-mono); color: var(--amber-dark); white-space: nowrap; }
.proposal-warranty-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.proposal-warranty-list li {
  font-size: 9.5px; color: #33404A; padding-left: 14px; position: relative; line-height: 1.4;
}
.proposal-warranty-list li::before {
  content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 700; font-size: 9px;
}

/* ---------- Forecast-basis note (Why Solar, Why Now / Your Investment
   Snapshot) ----------
   FIX (2026-07-22): margin-bottom was 0, and nothing directly below it
   (the Payback Summary meter boxes on the Investment Snapshot page)
   added its own top margin either — the note and the boxes right after
   it were sitting flush against each other with no gap at all. Now
   gives every note a consistent, deliberate gap below it regardless of
   what follows. */
.proposal-forecast-basis {
  position: relative; z-index: 1;
  font-size: 9.5px; color: var(--slate); background: #F7F5EF; border: 1px dashed var(--line);
  border-radius: 6px; padding: 10px 12px; margin-top: 12px; margin-bottom: 16px; line-height: 1.55;
  break-inside: avoid;
}

/* ---------- PH vs. SG electricity rate crisis stat block (Why Solar,
   Why Now) — added 2026-07-22. Static, general-awareness content citing
   a verified, sourced, dated DOE finding — not computed from the
   customer's own numbers, not presented as a permanent ranking. Three
   chunks, each its own .proposal-highlight (reused purely for the
   existing "never split across a page" pagination behavior — see
   collectUnbreakableBoxes in proposal-print.js — no JS changes needed
   since that selector already includes .proposal-highlight). */
.proposal-rate-crisis { margin: 4px 0 18px; }
.proposal-rate-crisis .proposal-highlight { text-align: center; padding: 14px 16px; margin-bottom: 10px; }
.proposal-rate-crisis .proposal-highlight:last-child { margin-bottom: 0; }

.rc-value { font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: var(--amber-dark); line-height: 1; }
.rc-value .rc-unit { font-size: 14px; color: var(--slate); margin-left: 2px; }

.rc-flag-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.rc-flag-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rc-flag { font-size: 22px; line-height: 1; }
.rc-country-tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--white);
}
.rc-country-tag--dim { background: var(--paper-dim); color: var(--slate); }
.rc-vs { font-size: 16px; font-weight: 700; color: var(--slate); }

.rc-caption { font-size: 11px; font-weight: 600; color: var(--ink); margin-top: 10px; }
.rc-source { font-size: 8px; color: var(--slate-light); margin-top: 3px; }

.rc-drivers-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 10px;
}
.rc-driver-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; text-align: left; }
.rc-driver { padding: 8px 10px; }
.rc-driver-icon { font-size: 15px; }
.rc-driver-title { font-size: 10.5px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.rc-driver-sub { font-size: 8.5px; color: var(--slate); margin-top: 2px; line-height: 1.3; }
/* Emphasizes "Record low" on the Peso vs. Dollar driver (2026-07-23) —
   bold + amber-dark, matching the urgency color already used for the
   headline ₱12.43/kWh figure, so the eye catches it first. */
.rc-driver-sub strong { color: var(--amber-dark); font-weight: 700; }

/* "Looking ahead" mini-cards (Pax Silica, Super El Niño — added
   2026-07-23, condensed 2026-07-23) — reuses the same terse icon +
   title + short-caption format as the confirmed-fact driver cards
   above (.rc-driver), but visually set apart (dashed border, explicit
   tag) since these are forward-looking/analytical rather than
   already-happening drivers: Pax Silica is a confirmed real initiative,
   but its demand impact is inference (semiconductor fabrication is
   broadly known to be electricity-intensive); Super El Niño's demand
   link is sourced (PAGASA's own confirmed forecast, intensifying
   through Q4 2026 — higher cooling demand during extreme heat is a
   well-established effect, not speculation). */
.rc-lookahead {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  text-align: left;
}
.rc-lookahead-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 7.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-light);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; margin-bottom: 8px;
}
.rc-lookahead-grid { text-align: left; }


.rc-shout { background: var(--ink); border-color: var(--ink); }
.rc-shout-line { font-family: var(--font-display); font-weight: 800; line-height: 1.3; }
.rc-shout-warn { font-size: 18px; color: #FF6B5E; margin-bottom: 6px; }
.rc-shout-sun { font-size: 18px; color: var(--amber); }

/* ---------- "Where else could this money go?" investment comparison
   table (2026-07-22) — a table with a proportional bar in each cell
   rather than a Chart.js canvas, deliberately: given how much of this
   session went into debugging canvas-sizing bugs on the other three
   charts, a plain HTML/CSS bar (just a width-driven <div>) carries zero
   equivalent risk and paginates natively. */
.ic-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.ic-table th {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--slate); text-align: left; padding: 0 8px 8px; vertical-align: bottom;
}
.ic-table th:first-child { width: 15%; }
.ic-row-head { width: 15%; }
.ic-tag {
  display: block; font-size: 7px; font-weight: 700; text-transform: none; letter-spacing: 0.01em;
  color: var(--success); margin-top: 3px;
}
.ic-tag--est { color: var(--slate-light); }
.ic-row-label {
  font-weight: 700; color: var(--ink); padding: 10px 8px 10px 0; vertical-align: top;
  border-top: 1px solid var(--line);
}
.ic-row-label .note { display: block; font-weight: 400; font-size: 8px; color: var(--slate); margin-top: 3px; line-height: 1.4; }
.ic-cell { padding: 10px 8px; vertical-align: top; border-top: 1px solid var(--line); }
.ic-bar-track { background: var(--paper-dim); border-radius: 4px; height: 7px; overflow: hidden; margin-bottom: 5px; }
.ic-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--amber), var(--amber-dark)); }
.ic-bar-fill--neg { background: #C23B3B; }
.ic-cell-value { font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--ink); }
.ic-cell-value--neg { color: #B3261E; }
.ic-cell-note { font-family: var(--font-body); font-weight: 400; font-size: 8px; color: var(--slate-light); }


/* ---------- Chart snapshot ---------- */
.proposal-chart-wrap { margin-top: 10px; break-inside: avoid-page; }
.proposal-chart-wrap img, .proposal-chart-wrap canvas {
  /* FIX (2026-07-22): max-height was 340px, tuned for the OLD, broken
     canvas aspect ratio (the 300x150 default-canvas bug fixed earlier
     today). Once the canvas got its correct 740x460 / 600x380 size, that
     same 340px cap started kicking in too early — it now bounds the
     image to ~547px/537px wide instead of the ~695px actually available
     on the page, which is exactly what read as "the charts shrank."
     Raised to 460px so object-fit:contain can let width:100% actually
     reach full container width for both chart aspect ratios (740x460
     needs ~432px of height to fill ~695px of width; 600x380 needs
     ~440px) before the height cap ever engages.
     FIX (2026-07-23): the three PDF charts now embed as live <canvas>
     elements rather than <img> (see placeChartSnapshot() in
     proposal-print.js — fixes charts occasionally rendering blank under
     native print). object-fit/width/max-height all apply identically to
     canvas as a CSS "replaced element," using its width/height HTML
     attributes (which Chart.js sets to CSS size x devicePixelRatio) as
     the intrinsic aspect ratio — same visual sizing behavior as before,
     img kept in this selector too in case it's ever needed again. */
  width: 100%; max-height: 460px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #FFF;
  display: block;
}
.proposal-chart-caption { font-size: 9px; color: var(--slate-light); margin-top: 5px; text-align: center; }

/* ---------- Year-by-year projection table ----------
   Same table the app already renders (cloned as-is), restyled for
   paper. thead repeats on every page it spans; rows never split
   across a page break. The payback-row highlight uses bold text +
   a top/bottom rule rather than a fill, so it's guaranteed visible
   whether or not "background graphics" is enabled in the print
   dialog.

   FIX (2026-07-21): this table was overflowing past the right edge
   of the printed page — the "Solar Net Position" column got clipped
   off entirely. Root cause: default `table-layout: auto` lets each
   column's width grow to fit its content (long peso values can't
   wrap), so the table quietly rendered wider than the fixed 794px
   capture width and the overflow got clipped during PDF rasterization.
   Fixed with `table-layout: fixed` + explicit per-column percentages
   below — this makes column widths deterministic and CONTENT-
   INDEPENDENT, so no value (however large) can force the table wider
   than its container ever again. `overflow-wrap`/`word-break` on the
   cells is a second line of defense: if a value is ever wider than
   its fixed column, it wraps within the cell instead of pushing the
   table's width out. `.proposal-table-section` itself also gets a
   hard `overflow: hidden` + `max-width: 100%` as a last-resort clip,
   so even a future regression fails safely (a wrapped/clipped cell)
   instead of silently escaping the page again. */
.proposal-table-section {
  overflow: hidden;
  max-width: 100%;
}
.proposal-table-section table.projection-table {
  width: 100%; max-width: 100%; min-width: 0; table-layout: fixed;
  border-collapse: collapse; font-size: 9px;
}
.proposal-table-section table.projection-table caption { display: none; }
.proposal-table-section table.projection-table thead { display: table-header-group; }
.proposal-table-section table.projection-table th,
.proposal-table-section table.projection-table td {
  overflow-wrap: break-word;
  word-break: break-word;
}
.proposal-table-section table.projection-table thead th {
  font-family: var(--font-mono); font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--slate); text-align: right; padding: 4px 5px; border-bottom: 1.5px solid var(--ink);
  line-height: 1.3;
}
.proposal-table-section table.projection-table thead th:first-child,
.proposal-table-section table.projection-table tbody td:first-child { text-align: left; }
/* Explicit column widths (sum to 100%) — deliberately content-
   independent. Year gets the smallest share; the three peso columns
   split the rest evenly, with slightly more room for the header
   labels ("Cumulative Meralco Cost (no solar)", etc.) to wrap onto
   two lines cleanly rather than one cramped line. */
.proposal-table-section table.projection-table th:nth-child(1),
.proposal-table-section table.projection-table td:nth-child(1) { width: 13%; }
.proposal-table-section table.projection-table th:nth-child(2),
.proposal-table-section table.projection-table td:nth-child(2) { width: 30%; }
.proposal-table-section table.projection-table th:nth-child(3),
.proposal-table-section table.projection-table td:nth-child(3) { width: 29%; }
.proposal-table-section table.projection-table th:nth-child(4),
.proposal-table-section table.projection-table td:nth-child(4) { width: 28%; }
.proposal-table-section table.projection-table tbody td {
  padding: 4px 5px; text-align: right; font-family: var(--font-mono);
  border-bottom: 1px solid var(--line);
}
.proposal-table-section table.projection-table tbody tr { break-inside: avoid; }
.proposal-table-section table.projection-table tbody tr:nth-child(even) { background: #F7F5EF; }
.proposal-table-section table.projection-table tbody tr.payback-row td {
  font-weight: 700; color: var(--amber-dark);
  border-top: 1.5px solid var(--amber-dark); border-bottom: 1.5px solid var(--amber-dark);
}
.proposal-table-section table.projection-table td.neg { color: #B3261E; }
.proposal-table-section table.projection-table td.pos { color: #1E7A3D; }

/* ---------- What's included ---------- */
.proposal-included ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.proposal-included li {
  font-size: 11px; color: #33404A; padding-left: 16px; position: relative;
}
.proposal-included li::before {
  content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; font-size: 10px;
}

/* ---------- Disclaimer ---------- */
.proposal-disclaimer {
  position: relative; z-index: 1;
  margin-top: 18px; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: 6px;
  font-size: 8.5px; color: var(--slate-light); line-height: 1.55;
}
.proposal-disclaimer strong { color: var(--slate); }

/* ---------- Footer ---------- */
.proposal-footer {
  position: relative; z-index: 1;
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px;
}
.proposal-validity { font-size: 9px; color: var(--slate-light); max-width: 60%; line-height: 1.5; }
.proposal-contact { font-size: 10px; color: var(--slate); text-align: right; line-height: 1.6; }
.proposal-contact strong { color: var(--ink); }

/* =========================================================
   OPTIONAL FALLBACK — manual browser printing (Ctrl+P)
   Rewritten 2026-07-22: this is now the PRIMARY PDF-generation
   mechanism, not a fallback. printProposal() in js/proposal-print.js
   calls the browser's native window.print() directly — the customer
   picks "Save as PDF" as their destination. Everything below (the
   @page rule, hiding the rest of the page, and the .proposal-page-break
   rule just below) is what actually produces the paginated PDF now.
   This same block also still works correctly if someone manually hits
   Ctrl+P on this page. */
@media print {
  @page {
    size: A4;
    margin: 14mm 13mm;
  }

  html, body {
    background: #FFFFFF !important;
    overflow-x: visible !important;
  }

  body > *:not(#printableProposal) { display: none !important; }

  #printableProposal { display: block !important; }

  /* Forces each numbered section (02 through 06) — and the standalone
     PH-vs-Singapore stat page — onto its own fresh page, regardless of
     how much room was left on the previous page. This class existed
     before (used by the old html2canvas pipeline's JS as a marker to
     measure position from), but had NO actual CSS page-break meaning
     until this rewrite — under the old screenshot approach, forcing a
     break was custom pixel math (collectForcedBreaks); under native
     print, it's just this one line. break-before is the modern
     property; page-break-before is kept alongside it for older
     engines, since it costs nothing and both are widely supported by
     the browsers people actually use to "Save as PDF" (Chrome, Edge,
     Safari). */
  .proposal-page-break {
    break-before: page;
    page-break-before: always;
  }
  /* Section 01 ("Load & Usage Summary") deliberately does NOT carry
     .proposal-page-break — it's the natural continuation of page 1,
     right after the header/highlights — so no rule is needed to
     exempt it from a forced break here. */
}