/* Vendored from design-system/css/df-print.css.
   Re-vendor via scripts/sync_design_system.sh; import a new drop with --import.
   Do not hand-edit this file. */

/* NOTE (v0.3): colors here are deliberately LITERAL, not var() — print output must
   not follow a dark theme the user happens to have active. Values mirror the light-mode
   tokens; if a token changes, sync the literal here by hand. */
/* =============================================================
   df-print.css — Downfield Forecast print stylesheet
   Pairs with colors_and_type.css + df.css. Optional file —
   include only on pages that should print well (research posts,
   calibration reports, league summaries).

   Link order: colors_and_type.css → df.css → df-utilities.css →
   (df-mobile.css) → df-print.css. Or wrap the whole thing in
   @media print and append to df.css if you'd rather not vendor
   a separate file. The standalone form is recommended so the
   print rules can be reviewed and updated independently.

   Strategy:
   1. Force light tokens regardless of [data-theme="dark"] —
      paper saves toner.
   2. Hide chrome (nav, footer, sticky bars, tab bars, sidebars).
   3. Linearize to a single-column at --container-prose width.
   4. Render the distribution chart line-only (no fills) — most
      home printers struggle with the multi-band fills and the
      result is muddy.
   5. Show URLs after links so cited references survive print.
   6. Sensible page breaks: never inside cards; new page before H2.
   ============================================================= */

@media print {

  /* ---------- 1. Force light tokens ---------- */
  /* Override [data-theme="dark"] for print regardless of user setting.
     We don't redefine every token — colors_and_type.css :root already
     gives us the light values, and we just neutralize the dark block. */
  [data-theme="dark"],
  [data-theme="auto"] {
    --bg: #FFFFFF;
    --paper:   #FFFFFF;
    --paper-2: #FFFFFF;
    --paper-3: #F5F5F2;
    --paper-4: #ECEAE1;
    --ink:     #0E1413;
    --ink-2:   #1F2A26;
    --ink-3:   #38453F;
    --ink-4:   #59665D;
    --ink-5:   #9AA69F;
    --fg:      #0E1413;
    --fg-2:    #1F2A26;
    --fg-muted:  #38453F;
    --fg-subtle: #59665D;
    --rule:    #D4CDB8;
    --rule-2:  #E6E1D2;
  }

  /* Pure white page background, full ink for body — saves nothing if
     we keep the warm paper tone in print since most printers pick it
     up as a faint yellow tint. */
  html, body {
    background: #FFFFFF !important;
    color: #0E1413 !important;
  }

  /* ---------- 2. Hide chrome ---------- */
  .df-nav,
  .df-tabbar,
  .df-tabbar-pad-bottom,
  .df-sticky-bottom,
  .df-bottom-sheet,
  .df-skel,
  .df-skel-line,
  nav,
  aside,
  footer,
  .no-print {
    display: none !important;
  }

  /* Topbar in app pages — print pages don't need a sticky top */
  .df-topbar-mobile { position: static !important; box-shadow: none !important; border: 0 !important; }

  /* ---------- 3. Linearize ---------- */
  .df-container,
  .df-container-text,
  .df-container-prose {
    max-width: var(--container-prose);   /* 680px = ~7.5in print column */
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Multi-column grids drop to single column for print. We only
     target the common layout grids — explicit grids inside the
     prose body (e.g. stat tiles in a research post) stay laid out. */
  .df-prose .df-row,
  .df-prose .df-row-between,
  .df-prose .df-row-between-center,
  .df-prose .df-row-loose {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--s-2) !important;
  }

  /* ---------- 4. Chart — line only ---------- */
  /* Strip fills from distribution charts when printing. Shapes get
     1px black stroke, fill removed. The median line and CI marker
     stay because they convey the most information. */
  .df-chart-print path[fill]:not([fill="none"]),
  .df-chart-print rect[fill]:not([fill="none"]) {
    fill: none !important;
  }
  .df-chart-print path,
  .df-chart-print line,
  .df-chart-print rect {
    stroke: #000 !important;
    stroke-width: 1 !important;
  }
  .df-chart-print circle {
    fill: #000 !important;
  }

  /* If you can't add `df-chart-print` to the chart container, this
     fallback makes any svg inside .df-prose print line-only. */
  .df-prose svg path[fill]:not([fill="none"]),
  .df-prose svg rect[fill]:not([fill="none"]) {
    fill: none !important;
  }

  /* ---------- 5. URL annotations ---------- */
  /* Print external link URLs after the link text. Internal links
     and same-domain anchors stay clean. */
  .df-prose a[href^="http"]::after,
  .df-prose a[href^="//"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono);
    font-size: 10pt;
    color: #555;
    word-break: break-all;
  }
  /* Don't double-print if the link text is already the URL. */
  .df-prose a[href^="http"]:where([data-print-url="false"])::after { content: ""; }

  /* ---------- 6. Page breaks ---------- */
  .df-prose h2 {
    page-break-before: always;
    break-before: page;
  }
  .df-prose h2:first-child,
  .df-prose h2:first-of-type {
    page-break-before: auto;
    break-before: auto;
  }
  .df-prose h1, .df-prose h2, .df-prose h3, .df-prose h4 {
    page-break-after: avoid;
    break-after: avoid-page;
  }
  .df-card,
  .df-callout,
  .df-empty-state,
  .df-banner,
  table,
  figure,
  pre,
  blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Card style for print — drop hover affordances, soften borders. */
  .df-card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
  }

  /* ---------- @page ---------- */
  @page {
    size: letter;
    margin: 0.75in 0.75in 0.85in;
  }

  /* Body type for print — researchers expect a true serif at a true
     point size. The screen `--t-md` = 17px is roughly 12.75pt, which
     is fine but we set explicit pt for predictable PDF output. */
  body, .df-prose {
    font-family: var(--font-reading);
    font-size: 11pt;
    line-height: 1.55;
  }
  .df-prose p { orphans: 3; widows: 3; }

  /* Headings in print — keep the family, size in pt. */
  .df-prose h1 { font-size: 22pt; line-height: 1.18; margin-top: 0; }
  .df-prose h2 { font-size: 16pt; line-height: 1.22; margin-top: 0; }
  .df-prose h3 { font-size: 13pt; line-height: 1.25; }

  /* Stats stay mono in print. */
  .df-stat, .df-stat-md, .df-stat-lg, .df-stat-xl, .df-num {
    font-family: var(--font-mono) !important;
  }

  /* Footer info — embed model version + print timestamp via a
     `<footer class="df-print-footer">…</footer>` block in the
     content. Hidden on screen, shown for print. */
  .df-print-footer {
    display: block !important;
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 1px solid #999;
    font-family: var(--font-mono);
    font-size: 8pt;
    color: #555;
  }
}

/* Default state — hide the print-only footer on screen. */
.df-print-footer { display: none; }