/* Branded print output for the calculator pages — the web's answer to the Android
   app's generated PDF.
   ---------------------------------------------------------------------------------
   A DELIBERATE DIVERGENCE, recorded as one. The app builds its PDF with a Dart PDF
   library; the web hands the job to the browser's own "Save as PDF" and decides, here,
   what goes into the document. That buys three things a PDF library would not: zero
   dependencies, no server-side rendering load, and — because the charts are SVG — marks
   that print at vector resolution instead of as a rasterised screenshot.

   Loaded with media="print", and only on pages that set `printable` (the calculator
   pages and the full-schedule pages). It is written entirely against .calc-* classes,
   so it has nothing to say about any other page and is not shipped to them.

   The document contains: the branded masthead, the calculator's name and URL, the
   inputs used, every output, the Key takeaways, all charts, the COMPLETE schedule
   (not the six-row preview — see .calc-print-schedule below), the formula, the About
   and FAQ text with every answer open, and the disclaimer. It contains no site chrome,
   no navigation, no form controls and no cross-sell. */

@media print {
  @page { size: A4; margin: 14mm 12mm; }

  /* ---- what paper does not need ------------------------------------------------ */
  .tj-public-header, .tj-public-footer, .tj-sidebar, .tj-nav-backdrop, .tj-topbar,
  .calc-back, .calc-crosssell, .calc-print-btn, .calc-schedule-more, .calc-granularity,
  .calc-inputs, .calc-slider, .calc-slider-ends, .tj-toast, .toast, button,
  [x-cloak] { display: none !important; }

  /* The inputs card is hidden above and replaced by .calc-print-inputs: a printed
     slider is furniture, and an <input> carries its value as a DOM property rather
     than an attribute, so the form prints blank the moment JavaScript is off. */

  /* Paper is white. The shell paints --bg-base behind everything, which with
     printBackground on becomes a full-bleed grey wash across every sheet. */
  html, body, .tj-public-shell, .tj-public-main, .tj-shell, .tj-main, main, .page {
    background: #fff !important;
  }
  body { color: #111; font-size: 10.5pt; }
  .tj-public-main, .tj-main, main, .page { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .card {
    border: 1px solid #ddd !important; box-shadow: none !important; background: #fff !important;
    break-inside: avoid; padding: 10pt 12pt !important; margin: 0 0 10pt !important;
  }
  .calc-layout { display: block !important; }
  .calc-result { position: static !important; }
  a[href]::after { content: ""; }   /* never splice a URL into the middle of a sentence */
  a { color: inherit; text-decoration: none; }

  /* ---- the branded masthead, printed once at the top --------------------------- */
  .calc-print-head {
    display: block !important;
    border-bottom: 2px solid #111;
    padding-bottom: 6pt;
    margin-bottom: 10pt;
  }
  .calc-print-brand { font-size: 13pt; font-weight: 700; letter-spacing: -0.01em; }
  .calc-print-doc { font-size: 11pt; font-weight: 600; margin-top: 2pt; }
  .calc-print-url { font-size: 8.5pt; color: #555; margin-top: 1pt; }

  /* ---- the inputs the figures were computed from ------------------------------- */
  .calc-print-inputs {
    display: flex !important; flex-wrap: wrap; gap: 4pt 18pt;
    border: 1px solid #ddd; padding: 7pt 9pt; margin-bottom: 10pt;
    break-inside: avoid; font-size: 9.5pt;
  }
  .calc-print-input { white-space: nowrap; }
  .calc-print-input-label { color: #555; }
  .calc-print-input-label::after { content: ": "; }
  .calc-print-input-value { font-weight: 600; }

  /* ---- results, takeaways, charts ---------------------------------------------- */
  .calc-result-value { font-size: 20pt !important; }
  /* Keep the small, self-contained blocks whole. Long-form prose and tables are
     explicitly allowed to break: `.card`'s blanket break-inside:avoid pushed a 20-row
     schedule that fitted on the NEXT page wholesale onto it, leaving page 1 of the
     full-schedule document empty below the masthead. */
  .calc-insights, .calc-chart { break-inside: avoid; }
  .calc-content, .calc-faq, .calc-schedule-full, .calc-print-schedule { break-inside: auto !important; }
  .calc-chart-scroll { overflow: visible !important; }
  .calc-chart-svg { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
  .calc-insight-marker { background: #444 !important; }
  .calc-insight-text, .calc-content-p, .calc-faq-a { color: #222 !important; }

  /* ---- the schedule: the WHOLE schedule ---------------------------------------- */
  /* On screen the page shows six rows and links to the rest. On paper there is no
     link to follow, so the preview is dropped and the complete table — the same rows
     /calculators/<slug>/schedule would show at these inputs — is printed instead. */
  .calc-schedule { display: none !important; }
  .calc-print-schedule {
    display: block !important;
    border: 1px solid #ddd; padding: 10pt 12pt; margin: 0 0 10pt;
  }
  .calc-print-schedule .calc-schedule-table { width: 100%; font-size: 8.5pt; border-collapse: collapse; }
  .calc-print-schedule th, .calc-print-schedule td { padding: 2pt 4pt; border-bottom: 1px solid #eee; }
  .calc-print-schedule thead { display: table-header-group; }   /* repeat the header on every page */
  .calc-print-row { break-inside: avoid; }
  /* The full-schedule PAGE renders the same section in `full` mode, where the table is
     already every row — that one prints as it is. */
  .calc-schedule.calc-schedule-full { display: block !important; }
  .calc-schedule-scroll { overflow: visible !important; }
  .calc-schedule-full .calc-schedule-table { font-size: 8.5pt; }
  .calc-schedule-full thead { display: table-header-group; }

  /* ---- FAQ answers print expanded ---------------------------------------------- */
  /* A collapsed <details> on paper is simply a lost answer.
     `display: block` on the answer is NOT enough and looks like it is: a closed
     <details> hides its children through the UA shadow slot, not through their own
     display, so the rule below is the one that actually does the work. Engines without
     ::details-content (Safari < 18.4, Firefox < 139) are covered by the beforeprint
     handler in public/js/calculators.js, which opens each item for the duration of the
     print and closes it again afterwards. */
  details::details-content { content-visibility: visible !important; block-size: auto !important; }
  details, .calc-faq-item { display: block !important; }
  /* Every item is open on paper, and `[open]` tints the question with the accent —
     which prints as a mid-grey on a monochrome printer. Black reads at any setting. */
  .calc-faq-q, .calc-faq-item[open] .calc-faq-q { list-style: none; font-weight: 600; color: #111 !important; }
  .calc-faq-q::after { content: "" !important; }
  .calc-faq-a { display: block !important; padding-bottom: 8pt; }

  /* ---- the disclaimer must survive to paper ------------------------------------ */
  /* It is the compliance element: "not investment advice and not a recommendation",
     on the printed copy exactly as on the page. */
  .calc-disclaimer {
    display: block !important;
    font-size: 8.5pt; color: #333 !important;
    border-top: 1px solid #ccc; padding-top: 6pt; margin-top: 8pt;
    break-inside: avoid;
  }
}