/* PDF print stylesheet — applied inside the headless Chromium via Paged.js.
   Paged.js paginates the DOM client-side, then Chromium prints A4 pages.
   `@page` margin boxes, `string-set`, and `target-counter()` all work. */

@page {
  size: A4;
  margin: 22mm 18mm 22mm 18mm;

  @top-left   { content: string(chapter, first); color: #888; font-size: 9pt; }
  @top-right  { content: string(doctitle, first); color: #888; font-size: 9pt; }
  @bottom-right { content: counter(page) " / " counter(pages); color: #888; font-size: 9pt; }
}

@page :first {
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-right { content: none; }
}

.pdf-cover { page-break-after: always; }
.pdf-toc   { page-break-after: always; }
.pdf-note  { page-break-before: always; }
/* Without cover and TOC the first note opens the document — a forced break
   there would produce a leading blank page. */
.pdf-doc > article.pdf-note:first-of-type { page-break-before: auto; }

/* Running header tracking. For single-note exports the doctitle and the
   chapter would be identical, so we only set the chapter when we're inside
   a collection (the wrapper carries .pdf-kind-collection). */
.pdf-doctitle-marker { string-set: doctitle content(text); position: absolute; left: -10000px; }
.pdf-kind-collection .pdf-note-title { string-set: chapter content(text); }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10.5pt;
  line-height: 1.55;
  color: #1a1a1a;
}

/* ---------- Cover ---------- */
.pdf-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 230mm;
  text-align: left;
}
.pdf-cover-kicker {
  font-size: 11pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 1.6rem;
}
.pdf-cover-title {
  font-size: 32pt;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1.5rem 0;
}
.pdf-cover-subtitle {
  font-size: 13pt;
  color: #666;
  margin-bottom: 1rem;
}
.pdf-cover-meta {
  font-size: 10pt;
  color: #666;
}

/* ---------- TOC ---------- */
.pdf-toc h2 {
  font-size: 18pt;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
}
.pdf-toc-list, .pdf-toc-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pdf-toc-list > li {
  margin: 0.45rem 0;
}
.pdf-toc-sublist {
  margin-left: 0;
  padding-left: 0;
  font-size: 9.5pt;
  color: #555;
}
.pdf-toc-sublist > li {
  margin: 0.15rem 0;
}
.pdf-toc-level-2 { margin-left: 0; }
.pdf-toc-level-3 { margin-left: 0.9rem; }
.pdf-toc-level-4 { margin-left: 1.8rem; }
.pdf-toc-level-5 { margin-left: 2.7rem; }
.pdf-toc a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.pdf-toc a::after {
  content: target-counter(attr(href), page);
  margin-left: auto;
  color: #999;
  font-variant-numeric: tabular-nums;
}
.pdf-toc a .pdf-toc-leader {
  flex: 1;
  border-bottom: 1px dotted #ccc;
  position: relative;
  top: -3px;
  min-width: 1rem;
}
.pdf-toc-level-1 { font-weight: 600; }
.pdf-toc-level-1 a::after { font-weight: 600; color: #555; }

/* ---------- Note content ---------- */
.pdf-note-header {
  margin-bottom: 1.2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.8rem;
}
.pdf-note-kicker {
  font-size: 9pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 0.4rem 0;
}
.pdf-note-title {
  font-size: 22pt;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.pdf-note-content {
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align: left;
}

.pdf-note-content h1,
.pdf-note-content h2,
.pdf-note-content h3,
.pdf-note-content h4 {
  page-break-after: avoid;
  break-after: avoid-page;
  line-height: 1.25;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}
.pdf-note-content h1 { font-size: 18pt; }
.pdf-note-content h2 { font-size: 15pt; }
.pdf-note-content h3 { font-size: 13pt; }
.pdf-note-content h4 { font-size: 11pt; font-weight: 600; }

.pdf-note-content p {
  margin: 0 0 0.7em 0;
  orphans: 3;
  widows: 3;
}

.pdf-note-content img {
  max-width: 100%;
  height: auto;
  page-break-inside: avoid;
  break-inside: avoid;
  display: block;
  margin: 0.8em auto;
}

.pdf-note-content figure {
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0.8em 0;
}

/* TipTap media wrappers: persisted markup uses <span class="tiptap-image-frame">
   around an <img> + caption span, and <div data-youtube-video> around the
   iframe (which we replace with a thumbnail) + caption span. Mirror the
   editor's centered-caption layout so the caption stays attached visually. */
.pdf-note-content .tiptap-image-frame,
.pdf-note-content [data-youtube-video] {
  display: block;
  margin: 1em auto;
  text-align: center;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pdf-note-content .tiptap-image-frame img,
.pdf-note-content [data-youtube-video] img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.pdf-note-content .tiptap-media-caption,
.pdf-note-content .tiptap-image-caption {
  display: block;
  margin-top: 0.35em;
  color: #6b6b6b;
  font-size: 9pt;       /* absolute so a caption inside an <h2> isn't huge */
  font-weight: normal;  /* and isn't bold either */
  font-style: normal;
  line-height: 1.35;
  text-align: center;
}

/* Excalidraw drawings: <div class="tiptap-excalidraw"> wraps the rendered SVG
   <img> + optional caption span. Give the drawing the same light frame the
   editor shows so it reads as a figure on the printed page. */
.pdf-note-content .tiptap-excalidraw {
  display: block;
  margin: 1em auto;
  text-align: center;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pdf-note-content .tiptap-excalidraw img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.pdf-note-content blockquote {
  margin: 0.8em 0;
  padding: 0.3em 0 0.3em 1em;
  border-left: 3px solid #ddd;
  color: #555;
}

.pdf-note-content ul,
.pdf-note-content ol {
  margin: 0 0 0.7em 1.2em;
  padding: 0;
}
.pdf-note-content li {
  margin: 0.15em 0;
}

.pdf-note-content code {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: #f4f4f4;
  padding: 0.05em 0.3em;
  border-radius: 3px;
}
.pdf-note-content pre {
  background: #f7f7f7;
  border-radius: 4px;
  padding: 0.8em 1em;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  break-inside: auto;        /* let long code blocks split across pages */
  font-size: 9pt;
  text-align: left;          /* never justify code */
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  line-height: 1.4;
  tab-size: 2;
}
.pdf-note-content pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  white-space: inherit;
  text-align: left;
}

.pdf-note-content a {
  color: #2563eb;
  text-decoration: none;
}

.pdf-note-content .pdf-video-embed {
  margin: 1em 0;
  page-break-inside: avoid;
  break-inside: avoid;
  text-align: center;
}
.pdf-note-content .pdf-video-thumbnail {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  margin: 0 auto 0.4em;
}
.pdf-note-content .pdf-video-link {
  font-size: 0.9em;
  word-break: break-all;
}
.pdf-note-content .pdf-video-link a {
  color: #2563eb;
}

.pdf-note-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.95em;
  page-break-inside: avoid;
}
.pdf-note-content th,
.pdf-note-content td {
  border: 1px solid #ddd;
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: top;
}
.pdf-note-content thead { background: #f7f7f7; }