/* ==========================================================================
   print.css — Save-as-PDF / paper stylesheet for reading pages
   --------------------------------------------------------------------------
   Linked from base.html with media="print", so these rules apply ONLY when
   the page is printed or saved to PDF. Goal: strip all site chrome and
   interactive widgets, force a clean black-on-white serif document, and
   reveal external link destinations so the printout is self-contained.

   Loaded after styles.css, so equal-specificity rules win on source order;
   !important is used where the live theme sets values we must override.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page geometry
   -------------------------------------------------------------------------- */
@page {
  margin: 2cm 2.2cm;
}

/* --------------------------------------------------------------------------
   2. Force a light, ink-friendly palette
   The live site defaults to white-on-black (dark theme). Re-point the theme
   custom properties so prose that reads them inherits dark-on-white, and
   neutralize backgrounds/shadows that waste toner.
   -------------------------------------------------------------------------- */
:root,
[data-theme],
[data-theme="light"],
html:not([data-theme]) {
  --color-bg-dark: #ffffff !important;
  --color-bg-elevated: #ffffff !important;
  --color-bg-surface: #ffffff !important;
  --color-text-primary: #000000 !important;
  --color-text-secondary: #333333 !important;
  --color-text-tertiary: #555555 !important;
  --color-border: #cccccc !important;
  --color-border-subtle: #dddddd !important;
  --color-border-hover: #bbbbbb !important;
  --color-accent: #000000 !important;
  --color-accent-hover: #000000 !important;
}

html,
body {
  background: #ffffff !important;
  color: #000000 !important;
  /* Honor user color choices but lean toward economical printing. */
  -webkit-print-color-adjust: economy;
  print-color-adjust: economy;
}

/* Kill decorative backgrounds, shadows, and gradients site-wide. */
*,
*::before,
*::after {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   3. Readable serif body at a print size
   -------------------------------------------------------------------------- */
body {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype",
    "Book Antiqua", Palatino, "Times New Roman", Times, serif !important;
  font-size: 11.5pt !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: auto;
}

/* Headings stay tight to the text that follows them. */
h1, h2, h3, h4, h5, h6 {
  color: #000000 !important;
  font-family: Georgia, "Iowan Old Style", Palatino, "Times New Roman",
    Times, serif !important;
  line-height: 1.25 !important;
  page-break-after: avoid;
  break-after: avoid;
}
h1 { font-size: 22pt !important; }
h2 { font-size: 17pt !important; }
h3 { font-size: 14pt !important; }
h4, h5, h6 { font-size: 12pt !important; }

p, li, blockquote, dd, dt, figcaption, td, th {
  color: #000000 !important;
}

/* Keep orphans/widows reasonable and avoid splitting atomic blocks. */
p, blockquote, figure, table, pre, img {
  orphans: 3;
  widows: 3;
  page-break-inside: avoid;
  break-inside: avoid;
}

blockquote {
  border-left: 2pt solid #888 !important;
  padding-left: 0.8em !important;
  margin-left: 0 !important;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   4. Hide site chrome
   Global navigation, header/footer, theme toggle, language switcher, and
   the per-article audio player — none of which belong on paper.
   -------------------------------------------------------------------------- */
.header,
.footer,
.nav,
.nav--desktop,
.nav__toggle,
.mobile-menu,
.mobile-language-panel,
.header__actions,
.header__end,
.theme-toggle,
.language-switcher,
.language-switcher-trigger,
.language-mobile-btn,
.language-current,
.bc-listen,
.skip-link,
a.skip-link,
[href="#main"].skip-link {
  display: none !important;
}

/* --------------------------------------------------------------------------
   5. Hide blog/guide reading chrome
   Breadcrumbs, provenance banners, cluster/series/related navigation,
   pagination, quiz, share rails, and the "back to posts" footer. Document
   metadata (date, reading time, tags) is intentionally kept.
   -------------------------------------------------------------------------- */
.breadcrumb,
.blog-post__provenance,
.blog-cluster,
.blog-post__series,
.blog-post__related,
.blog-post__pagination,
.blog-post__footer,
.blog-post__back,
.quiz-container,
/* Guide (terminal/canvas) reader chrome */
.terminal-sidebar,
.terminal-sidebar-fab,
.terminal-progress,
.terminal-scanlines,
.search-trigger,
.canvas-drawer,
.canvas-section-nav,
.canvas-progress,
.canvas-back-top,
.canvas-badge {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. Hide interactive widgets, demos, and media controls
   These are non-functional on paper. Covers the shared naming conventions
   (*-interactive, *-demo, *-playground, *-simulator, *-visualizer) plus raw
   canvas/iframe/media and any element opted out via .no-print / data-no-print.
   -------------------------------------------------------------------------- */
canvas,
iframe,
video,
audio,
button,
[role="button"],
[class*="-interactive"],
[class*="-demo"],
[class*="-playground"],
[class*="-simulator"],
[class*="-visualizer"],
.signal-lab,
.glsl-playground,
.milkdrop,
.no-print,
[data-no-print],
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7. Let the content breathe across the full printable width
   Drop fixed/sticky positioning and the on-screen reading-column max-widths
   so the article uses the page from margin to margin.
   -------------------------------------------------------------------------- */
main,
#main,
[role="main"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.container,
.container--narrow,
.blog-post,
.blog-post__content,
.prose,
.canvas-prose,
.terminal-guide {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: #ffffff !important;
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   8. Media and code
   -------------------------------------------------------------------------- */
img,
svg,
figure img {
  max-width: 100% !important;
  height: auto !important;
}

pre,
code,
kbd,
samp {
  font-family: "SF Mono", "DejaVu Sans Mono", Menlo, Consolas,
    "Courier New", monospace !important;
  font-size: 9.5pt !important;
  color: #000000 !important;
}

pre {
  white-space: pre-wrap !important;       /* wrap long lines instead of clipping */
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  border: 1pt solid #cccccc !important;
  border-radius: 0 !important;
  padding: 0.6em 0.8em !important;
  background: #f7f7f7 !important;
}

code {
  background: #f2f2f2 !important;
  padding: 0.05em 0.25em !important;
}

table {
  border-collapse: collapse !important;
  width: 100% !important;
}
th, td {
  border: 1pt solid #cccccc !important;
  padding: 0.35em 0.5em !important;
}

/* --------------------------------------------------------------------------
   9. Links — keep them readable and reveal external destinations
   Internal/relative links print as plain underlined text; absolute http(s)
   links also print their URL so the page is self-contained on paper.
   -------------------------------------------------------------------------- */
a,
a:link,
a:visited {
  color: #000000 !important;
  text-decoration: underline !important;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: .85em;
  color: #555;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Don't append URLs for in-page anchors or fragment/footnote links. */
a[href^="#"]::after,
a[href^="javascript:"]::after {
  content: "" !important;
}