/* ═══════════════════════════════════════════════════════════════════════
   CalcYourWealth - Print Stylesheet (Phase 18.3)
   File: /assets/css/print.css  (loaded with media="print" on calc pages)
   ------------------------------------------------------------------
   Print → Save as PDF now prints TWO pages:
     Page 1: the calculator input card with the entered values
     Page 2: the results card
   (If there are no results yet, only the input page prints - never a
   blank page.)
   PHASE 18.3 changes:
     - The input card (#calc-input-card) joins the visible chain; the
       content column reverses visually (flex column-reverse) so the
       form prints BEFORE the results, and section#calculator-results
       forces a page break to start page 2.
     - Inside the input card, interactive chrome is hidden (currency
       selector, submit button, share quiet link).
     - The shared-link notice (.cyw-shared-notice) is print-hidden so
       exported pages stay clean.
   ───────────────────────────────────────────────────────────────────
   DOM chain kept (calculator pages, Phase 18.2/18.3):
     main#main > div#calc-page-shell > div#calc-layout-grid
               > div#calc-content-column > section#calculator-results
                                         > div#calc-input-card
   ═══════════════════════════════════════════════════════════════════════ */
@page { size: A4; margin: 12mm; }

@media print {
  /* Everything outside <main id="main"> (nav, footer, popup, toasts) - gone. */
  body > *:not(main) { display: none !important; }

  /* Inside <main>, keep only the calculator page shell. */
  main > *:not(#calc-page-shell) { display: none !important; }
  #calc-page-shell {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Inside the shell, keep only the layout chain that contains the results. */
  #calc-page-shell > *:not(#calc-layout-grid) { display: none !important; }
  #calc-layout-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  #calc-layout-grid > *:not(#calc-content-column) { display: none !important; }

  /* PHASE 18.3: keep the RESULTS and the INPUT CARD. The column reverses
     visually so the form prints first (page 1) and the results section
     breaks onto page 2. */
  #calc-content-column {
    display: flex !important;
    flex-direction: column-reverse !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #calc-content-column > *:not(#calculator-results):not(#calc-input-card) { display: none !important; }

  /* The results card itself - starts page 2 when a calculation exists.
     Scoped to the section so the pre-calculation empty anchor (a <span>
     with the same id) never forces a blank page. */
  #calculator-results {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scroll-margin-top: 0 !important;
    /* Keep brand backgrounds (header band, tiles) in print/Save-as-PDF. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  section#calculator-results {
    page-break-before: always;
    break-before: page;
  }

  /* The input card: printed page 1, full width, natural flow (NO
     break-inside:avoid - a long form such as the invoice calculator may
     legitimately span more than one page). */
  #calc-input-card {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Interactive chrome has no meaning on paper. */
  #calc-input-card select,
  #calc-input-card button[type="submit"] { display: none !important; }

  /* Hide share/export controls and the shared-link notice. */
  #calculator-results .cyw-share-wrap,
  #calculator-results .cyw-share-quiet,
  #calc-input-card .cyw-share-quiet,
  .cyw-share-panel,
  .cyw-shared-notice { display: none !important; }

  /* Charts: in-flow, page-width, no absolute overflow. */
  #calculator-results .chart-wrap { position: relative !important; height: auto !important; min-height: 220px; }
  #calculator-results .chart-wrap canvas {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
  }

  /* Tables stay within the page. */
  #calculator-results table { table-layout: fixed; width: 100% !important; overflow: hidden; }
  #calculator-results .overflow-x-auto { overflow: visible !important; }

  /* AOS animations: force revealed state (otherwise faded content prints
     invisible when the reveal never triggered). */
  #calculator-results [data-aos],
  #calc-input-card [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}