/* public/tufteweb/print.css — copied from castel-tufte at fc2d685 on
 * 19 September 2026; site code, edit here (see tokens.css for the reason).
 * Linked media="print" from the essay pages' own <head>, in
 * components/essays/EssayPage.js. The header below is the system's own. */

/* print.css — the print regime
 *
 * This system descends from a book class, so a document that cannot become a PDF
 * is missing its most obvious deliverable. Three things in the screen design are
 * actively hostile to pagination, and each needs undoing rather than tweaking:
 *
 *   1. THE MARGIN RAIL absolutely positions every margin item at an offset
 *      measured against one continuous page. Paper has pages, so those offsets
 *      are meaningless — a note anchored at 4300px lands on nothing. Print
 *      therefore returns margin items to the flow, where the browser's own
 *      pagination can keep each one with the block that raised it.
 *
 *   2. FIXED ELEMENTS repeat on every sheet or swallow one whole. The bar, the
 *      progress rule, the settings menu and the annexe are all interface; none
 *      of them is the document.
 *
 *   3. THE THREE-COLUMN GRID cannot survive a page break: a grid item that
 *      straddles a break is either clipped or moved. The printed page gets the
 *      text column at full measure, with the apparatus in the flow.
 *
 * WHAT THIS DELIBERATELY DOES NOT DO
 * It does not try to reproduce the printed thesis. That is Print Page A4's job,
 * and it is a facsimile at true pt. This is the web document, printed — the
 * proportions come from the same tokens, but the page is the reader's paper.
 *
 * Load it last, after the document's own <style>.
 */

@page {
  size: A4;
  /* 42pt left / 72pt top, the class's own insets, as the sheet margin */
  margin: 72pt 42pt 56pt 42pt;
}

@media print {

  /* ---- interface leaves ------------------------------------------------- */

  [data-sticky-bar],
  [data-annexe-panel],
  [data-annexe-scrim],
  reader-settings,
  #tw-spacer,
  [id$="-progress"],
  [id$="-search"],
  [id$="-count"],
  #mt-pop,
  [id$="-lightbox"] {
    display: none !important;
  }

  /* ---- the page is one column ------------------------------------------ */

  html, body {
    background: var(--sheet) !important;
    /* Screen leading is looser than print for a reason that stops applying on
     * paper: 1.30 is the class's own 13pt on 10pt. */
    line-height: 1.3;
  }

  main[data-margin-rail] {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background-image: none !important;
    transform: none !important;
  }

  main[data-margin-rail] > * {
    grid-column: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Margin material returns to the flow, set off the way a ruled remark is —
   * the one piece of vocabulary the reader already knows for "aside". */
  main[data-margin-rail] > [data-rail-member] {
    border-left: var(--hair) solid var(--rule);
    padding-left: var(--rule-indent);
    margin: 0 0 var(--par) !important;
    break-inside: avoid;
  }

  /* ---- pagination ------------------------------------------------------- */

  h1, h2, h3 { break-after: avoid; break-inside: avoid; }
  figure, table, dl, pre { break-inside: avoid; }
  tex-figure, tufte-chart, lit-graph, lit-timeline { break-inside: avoid; }
  figcaption { break-before: avoid; }

  /* A theorem box split across a sheet loses the thing the box is for. */
  main > div[style*="border"] { break-inside: avoid; }

  p { orphans: 3; widows: 3; }

  /* ---- links ------------------------------------------------------------ */

  a { border-bottom: none; text-decoration: none; }
  /* An internal cross-reference is a page number on paper, which the browser
   * supplies; an external URL has to be printed or it is lost. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.82em;
    color: var(--chrome);
    word-break: break-all;
  }

  /* ---- figures --------------------------------------------------------- */

  /* A figure that bled past the text column on screen has no bleed on paper. */
  lit-graph { width: auto !important; margin-left: 0 !important; }

  img, svg, tex-figure { max-width: 100% !important; }

  /* Dimming is a hover state; print takes the whole graph. */
  .dim { opacity: 1 !important; }

  /* ---- the specimen's own scaffolding ---------------------------------- */

  /* Swatches must print their fill, not be helpfully dropped as "background". */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}