/* ---------------------------------------------------------------------------
   print.css  ·  Paper and "Save as PDF" output for every Phasebuilt page.
   Loaded last, after readability.css, so it can win without !important spam.

   The site renders light-on-dark (--bg #0a0d0c, --lime #c8ff3d). Neither of
   those survives contact with paper: the background is dropped by most print
   pipelines, leaving pale ink on white, and lime is unreadable on white at any
   size. So we re-point the custom properties for print rather than restating
   every rule, and every component inherits the paper palette for free.
--------------------------------------------------------------------------- */
@media print {

  :root {
    --bg: #ffffff;
    --panel: #ffffff;
    --panel2: #f4f6f0;
    --ink: #101410;
    --muted: #3c443e;
    --lime: #4c6b0a;      /* lime darkened until it is legible on white */
    --line: #c2c8c0;
  }

  @page { margin: 16mm 14mm; }

  html, body {
    background: #fff;
    color: var(--ink);
    font-size: 11.5pt;
    line-height: 1.5;
  }

  /* Interactive and navigational chrome carries no meaning on paper. */
  .skip-link, .topbar, .site-footer, .ghost-btn, .primary-btn,
  .faq-cta, .share-row, .share-btn, .toast, .modal, .modal-backdrop,
  .export-actions, .plan-tabs, .hero-art, .hero-chips, .stats-strip,
  .calc-actions, .related, form .field-hint, .tool-cta {
    display: none !important;
  }

  /* A printed sheet gets separated from its source, so stamp it. .print-head
     is inert on screen (see tools.css) and only ever appears here. */
  .print-head { display: block !important; margin: 0 0 14mm; }

  main, .article, .wrap, .section { max-width: none; margin: 0; padding: 0; }

  a { color: var(--ink); text-decoration: none; }
  /* Expand real destinations for body links only. Nav and button links are
     already hidden, and printing "(/guides/)" after every crumb is noise. */
  .article p > a[href^="http"]::after,
  .article li > a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt; color: #5a625c; word-break: break-all;
  }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; color: var(--ink); }
  h2 { font-size: 15pt; padding-top: 10pt; }
  h3 { font-size: 12.5pt; }
  p, li, dd, dt, tr, .method-row, .calc-result, .workout-day, .meal-card {
    break-inside: avoid; page-break-inside: avoid;
  }
  img, figure, table { break-inside: avoid; page-break-inside: avoid; max-width: 100%; }

  /* Panels read as boxes on screen because they are lighter than the page.
     On white that inverts, so give them a rule instead of a fill. */
  .panel, .calc-panel, .formula, .source, .callout, .coach-note, .safety-note {
    background: #fff;
    border: 1px solid var(--line);
  }
  .formula { border-left: 2pt solid var(--lime); }

  .method-row { grid-template-columns: 200px 1fr; }

  /* A generated plan is the main thing anyone prints. Show every phase rather
     than only the selected tab, and start each one on a fresh sheet. */
  .plan-panel { display: block !important; }
  .plan-panel + .plan-panel { break-before: page; page-break-before: always; }

  /* Calculator output is the payload of a tool page: keep it, drop the inputs
     that produced it, since a printed form field is just an empty box. */
  /* The inputs panel is a shell once the form inside it is hidden, and in a
     two-column grid that shell reserves half the sheet for nothing. Drop the
     whole panel and let the result run the full width. */
  .calc-inputs { display: none !important; }
  .calc { display: block; }
  .calc-form { display: none !important; }
  .calc-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .calc-result { border: 1px solid var(--line); background: #fff; }
  .calc-result .big { color: var(--ink); }
}