/* Print / export-to-PDF styles.
 *
 * Exporting a PDF means printing the rendered document with the browser's own
 * "Save as PDF" destination, which keeps everything vector: KaTeX math stays
 * selectable text, mermaid diagrams stay SVG, and no rasterizing library is
 * needed. The rules below turn the two-pane app into a single flowing
 * document: the chrome and the editor are hidden, the height and overflow
 * constraints that make the screen layout scroll are lifted (otherwise the
 * print would be clipped to one page), and page breaks are steered away from
 * the middle of code blocks, tables, equations and diagrams.
 */

@page {
  margin: 18mm 16mm;
}

@media print {
  html,
  body,
  #root {
    height: auto;
  }

  .topbar,
  .splitter,
  .pane:not(.pane-preview),
  .code-block .copy-button {
    display: none !important;
  }

  .app,
  .panes {
    display: block;
    height: auto;
    min-height: 0;
  }

  /* The screen layout scrolls the preview inside a fixed-height pane; for
     print the pane has to be a plain block of arbitrary height. */
  .pane-preview {
    display: block;
    overflow: visible;
    flex: none;
  }

  .preview {
    max-width: none;
    padding: 0;
    font-size: 11pt;
    line-height: 1.5;
  }

  .preview p,
  .preview li {
    orphans: 3;
    widows: 3;
  }

  .preview h1,
  .preview h2,
  .preview h3,
  .preview h4 {
    break-after: avoid;
  }

  /* Long code blocks and tables are allowed to run across a page boundary,
     the way LaTeX breaks a verbatim block or a longtable; forbidding it just
     leaves most of a page blank. Individual rows and equations, which no
     reader wants split, are kept whole. */
  .preview tr,
  .preview thead,
  .preview .katex-display,
  .preview img,
  .mermaid-diagram {
    break-inside: avoid;
  }

  /* A table continued on the next page repeats its header row. */
  .preview thead {
    display: table-header-group;
  }

  /* On screen these scroll sideways; on paper there is nowhere to scroll, so
     let the content wrap or shrink to the page width instead of being cut. */
  .preview pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: visible;
  }

  .preview .katex-display,
  .mermaid-diagram {
    overflow: visible;
  }

  .preview table {
    display: table;
    width: 100%;
    overflow-x: visible;
  }

  .preview img,
  .mermaid-diagram svg {
    max-width: 100%;
    height: auto;
  }

  /* Code and table shading is part of how the document reads, so ask for it
     even when the print dialog has background graphics switched off. */
  .preview pre,
  .preview :not(pre) > code,
  .preview th,
  .preview tr:nth-child(2n) {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .preview a {
    color: inherit;
    text-decoration: underline;
  }
}