/* ============================================================================
   print.css — shared print / PDF stylesheet for the whole study-notes site.

   Goal: a clean, ink-friendly, "pure black-on-white" printout that keeps the
   STRUCTURE (headings, code, tables, callouts) but strips decoration
   (dark theme, colour fills, grain, vignettes, shadows, interactive chrome).

   How it's wired in (no build step):
     • assets/notes.css and assets/bookmark.css @import this file (print-only),
       so every page on those two families gets it for free.
     • Each DSA report-kit  style.css  @imports it too.
     • Fully-inline pages link it directly with <link media="print" ...>.

   Everything lives inside @media print so importing it never touches screen.
   ========================================================================== */
@media print {

  /* ── Page geometry ────────────────────────────────────────────────────
     Physical margins are honoured by every browser. The margin-box page
     counter only renders in true paged-media engines (Prince/WeasyPrint);
     in Chrome/Firefox enable "Headers and footers" in the print dialog to
     get page numbers — this rule is harmless there. */
  @page {
    margin: 16mm 14mm 18mm;
  }
  @page {
    @bottom-center { content: "Page " counter(page); font: 9pt/1 sans-serif; color: #555; }
  }

  /* ── Flatten every design token to ink-on-paper ───────────────────────
     All three families are token-driven, so redefining the tokens does most
     of the flattening automatically (colored headings → black, card fills →
     white, accent rules → grey). We redefine the union of all vocabularies. */
  :root, body {
    /* notes.css family */
    --paper:#fff !important;   --paper-2:#fff !important;   --card:#fff !important;
    --ink:#161616 !important;  --ink-soft:#333 !important;  --ink-faint:#555 !important;
    --accent:#161616 !important; --accent-line:#c4c4c4 !important; --accent-soft:#f0f0f0 !important;
    --hairline:#cfcfcf !important; --hairline-2:#dcdcdc !important; --rail:#cfcfcf !important;
    --grid:transparent !important; --vignette:transparent !important; --edge-hi:transparent !important;
    --slab:#f6f7f8 !important; --slab-line:#e6e8ea !important; --slab-text:#1b1b1b !important;
    --inline-bg:#eef0f1 !important;
    --note:#161616 !important;   --note-bg:#f5f5f5 !important;
    --tip:#161616 !important;    --tip-bg:#f5f5f5 !important;
    --warn:#161616 !important;   --warn-bg:#f5f5f5 !important;
    --danger:#161616 !important; --danger-bg:#f5f5f5 !important;
    --muse:#161616 !important;   --muse-bg:#f5f5f5 !important;
    /* bookmark.css family */
    --bm-ink:#161616 !important; --bm-ink-soft:#333 !important; --bm-accent:#161616 !important;
    --bm-accent-soft:#f0f0f0 !important; --bm-card:#fff !important; --bm-line:#cfcfcf !important;
    --bm-shadow:none !important;
    /* DSA report-kit family */
    --bg:#fff !important; --ink-secondary:#333 !important; --ink-muted:#555 !important;
    --divider:#cfcfcf !important; --toggle-bg:#fff !important; --toggle-border:#cfcfcf !important;
    --toggle-color:#161616 !important;
    /* ByteByteGo family (ByteByteGo/**, assets/bbg.css) */
    --bg-soft:#fff !important; --bg-card:#fff !important; --bg-elev:#fff !important;
    --text:#161616 !important; --text-soft:#333 !important; --text-mute:#555 !important;
    --border:#cfcfcf !important; --border-soft:#dcdcdc !important;
    --green:#161616 !important; --green-soft:#f5f5f5 !important; --amber:#161616 !important;
    --purple:#161616 !important; --red:#161616 !important; --cyan:#161616 !important;
    --shadow:none !important;
  }

  /* Never carry a saved dark theme into print. */
  :root, :root[data-theme="dark"], [data-theme="dark"] { color-scheme: light !important; }

  html, body {
    background:#fff !important;
    background-image:none !important;
    color:#161616 !important;
    font-family:'Newsreader', Georgia, 'Times New Roman', serif;
    font-size:11pt;
    line-height:1.5;
  }

  /* Strip decorative overlays (grain, vignette, gradients, crop marks). */
  .report-grain, [class*="grain"], [class*="vignette"], .crop-mark { display:none !important; }

  /* ── Remove shadows / animation / blur everywhere ─────────────────────── */
  * {
    box-shadow:none !important;
    text-shadow:none !important;
    animation:none !important;
    transition:none !important;
    filter:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* ── Hide interactive chrome (union of class names across all families) ── */
  .topbar, .toc, nav.toc, .tocv, .toc-mini, .quicknav, .rail,
  .copy, .copy-btn, [class*="copy-btn"],
  .theme-toggle, .settings-wrap, .settings-panel, .settings-btn,
  .resume-chip, .resume-card, #resume-slot, .pin-toggle, .pin-toggle-float,
  .print-fab, .back-to-top, .backtotop, .scrollspy, .back-link, .report-date,
  button.toggle, /* ByteByteGo chapters' fixed theme button */
  button[aria-label*="dark" i], button[title*="dark" i],
  button[aria-label*="theme" i], button[title*="theme" i] {
    display:none !important;
  }

  /* ── Reclaim the full reading width ───────────────────────────────────── */
  .doc, .doc.has-toc, .report, .report-wrap, .report-body,
  main, .content, .wrap, article {
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    color:#161616 !important;
  }

  /* ── Typography ───────────────────────────────────────────────────────── */
  h1,h2,h3,h4,h5,h6 { color:#0f0f0f !important; font-family:'Fraunces', Georgia, 'Times New Roman', serif; break-after:avoid; page-break-after:avoid; }
  h1 { font-size:20pt; margin-top:0; }
  h2 { font-size:15pt; }
  h3 { font-size:12.5pt; }
  p, li, dd, dt { orphans:3; widows:3; }
  a, a:visited { color:#161616 !important; text-decoration:none !important; }
  hr { border:0; border-top:1px solid #cfcfcf !important; }
  ::selection { background:transparent; }

  /* Force ALL text to near-black — catches accent headings, eyebrows, kickers
     and small label classes ("Step 1", "01", ...) on pages whose local colour
     tokens this file can't know by name. It is !important, so it beats any
     page-local accent declaration (which are normal-weight) regardless of the
     page's specificity. Code containers are excluded here; the syntax palette
     below re-colours tokens INSIDE code with higher (class) specificity so it
     wins there. Note: some pages reuse single-letter classes like `.n` as
     labels OUTSIDE code — those correctly go black because the syntax rules
     are scoped to code containers only. */
  body :not(pre):not(code):not(kbd):not(samp) { color:#161616 !important; }

  /* ── Callouts / cards / figures: white bg, hairline border, keep whole ── */
  .crux, .partband, .pat, .quiz, .trap, .note, .tip, .warn, .callout, .muse,
  .card, .sheet-card, figure, .notebook, .hook, .takeaways, blockquote,
  .reason, .maptoc, .ladder, .dtree, .think, .reveal,
  .result, .result-wrap, .code-block {
    background:#fff !important;
    border:1px solid #ccc !important;
    break-inside:avoid;
    page-break-inside:avoid;
  }

  /* ── Code: light slab, hairline border, WRAP long lines so nothing clips ─ */
  pre, code, kbd, samp { font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; }
  pre {
    background:#f6f7f8 !important;
    color:#1b1b1b !important;
    border:1px solid #ccc !important;
    border-radius:4px;
    padding:8px 10px !important;
    white-space:pre-wrap !important;
    word-break:break-word;
    overflow-wrap:anywhere;
    overflow:visible !important;
    break-inside:avoid;
    page-break-inside:avoid;
    font-size:9pt;
    line-height:1.45;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  pre code, .code-block code {
    background:none !important; border:0 !important; padding:0 !important;
    white-space:pre-wrap !important; color:#1b1b1b !important; font-size:inherit !important;
  }
  :not(pre) > code {
    background:#eef0f1 !important; color:#1b1b1b !important;
    padding:0.05em 0.3em; border-radius:3px;
    white-space:pre-wrap; overflow-wrap:anywhere;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  /* Muted syntax highlighting on white — covers notes.css + inline token sets.
     Scoped to code containers so the single-letter classes (.c/.k/.s/.n/…),
     which some pages also reuse as non-code labels, only get coloured when
     they are actually inside code. Class specificity here (0,2,0) beats the
     blacken rule above (0,0,5), so tokens keep their colour inside code. */
  :is(pre, code, .code-block) :is(.tok-com, .c)            { color:#6a6a6a !important; font-style:italic; }
  :is(pre, code, .code-block) :is(.tok-kw, .kw, .k, .keyword) { color:#1f4e79 !important; }
  :is(pre, code, .code-block) :is(.tok-type, .t)           { color:#0f6f63 !important; }
  :is(pre, code, .code-block) :is(.tok-str, .s)            { color:#3d6b1f !important; }
  :is(pre, code, .code-block) :is(.tok-fn, .fn, .m)        { color:#8a5a10 !important; }
  :is(pre, code, .code-block) :is(.tok-num, .n)            { color:#a4502f !important; }
  :is(pre, code, .code-block) .tok-punc                    { color:#444 !important; }

  /* ── Expand every collapsible so its hidden content prints ────────────── */
  details { display:block !important; }
  details > summary { list-style:none; font-weight:600; cursor:auto; }
  details > summary::-webkit-details-marker { display:none; }
  details:not([open]) > *:not(summary) { display:block !important; }
  details .a, details .body, details .answer { display:block !important; }

  /* ── Tables ───────────────────────────────────────────────────────────── */
  table { width:100% !important; border-collapse:collapse !important; break-inside:auto; }
  thead { display:table-header-group; }
  tr, img, svg, figure, pre { page-break-inside:avoid; }
  th, td { border:1px solid #ccc !important; padding:4px 8px !important; color:#161616 !important; }
  th { background:#f2f2f2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* ── Media fits the page ──────────────────────────────────────────────── */
  img, svg, canvas { max-width:100% !important; height:auto !important; }

  /* Keep a heading glued to the content that follows it. */
  h1 + *, h2 + *, h3 + *, h4 + * { break-before:avoid; page-break-before:avoid; }
}