/* Printing an article (⌘P, or "Print article" in the action bar): only the
   article, at full page width, in the reading font, black on white. */
@media print {
  @page { margin: 18mm 16mm; }

  :root { --bg: #fff; --fg: #000; --fg-body: #111; --fg-dim: #555; --line: #ccc; }
  html, body { height: auto; background: #fff; }

  .sidebar, .list, .scrim, .reader-bar, .toast, .action-bar, .menu, .note.empty,
  .tag-remove, .full-note, .back, .menu-button { display: none !important; }

  .app { display: block; height: auto; }
  .pane { display: block !important; overflow: visible; }
  .reader { max-width: none; padding: 0; }

  .reader h1 { font-size: 24pt; margin-bottom: 6pt; }
  .reader h1 a { color: #000; text-decoration: none; }
  .kicker, .kicker a { color: #000; }
  .byline { margin-bottom: 14pt; }
  .reader-body { font-size: 11.5pt; line-height: 1.55; color: #111; }
  .reader-body a { color: #000; text-decoration: underline; }
  .reader-body img { max-height: 120mm; width: auto; }
  .reader-body pre { white-space: pre-wrap; border: 1px solid #ccc; background: none; }
  .reader-body table { display: table; }

  /* A video can't play on paper: say where it is instead. */
  .video { aspect-ratio: auto; background: none; border: 1px solid #ccc; padding: 8pt; }
  .video iframe { display: none; }
  .video::after { content: "Video: " attr(data-url); font: 10pt var(--ui); color: #555; }

  .note { border-left: 2px solid #000; background: none; }
  .note textarea { display: none; }
  .note::after { content: attr(data-text); white-space: pre-wrap; font: 11pt var(--ui); }
  .tag { background: none; border: 1px solid #999; color: #000; }

  .reader-foot { border-top: 1px solid #ccc; }
  .reader-foot a::after { content: " — " attr(href); font-size: 9pt; color: #555; word-break: break-all; }

  h1, h2, h3, h4 { break-after: avoid; }
  img, figure, pre, blockquote, table, .video { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
}