/* =========================================================
   PDF pages (rendered off-screen at A4 794×1123px)
   Colours come from --pdf-* variables that pdf.js resolves from
   the current theme. Only plain colours here: html2canvas cannot
   read color-mix(). Text stops at weight 600.
   ========================================================= */

.pdf-page{
  --pdf-type:1;          /* text tier set by pdf.js when fitting a page */
  --pdf-img-max:340px;
  position:relative;
  display:flex;
  flex-direction:column;
  width:794px;
  height:1123px;
  padding:44px 56px 0;
  overflow:hidden;
  contain:strict;
  background:var(--pdf-paper);
  color:var(--pdf-text);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  line-height:1.55;
}

.pdf-logo{ display:block; height:22px; width:auto; }

/* subject doodle behind every page (a pre-drawn PNG); content sits above it */
.pdf-pattern{
  position:absolute;
  inset:0;
  z-index:0;
  width:794px;
  height:1123px;
  pointer-events:none;
}
.pdf-page > :not(.pdf-pattern){ position:relative; z-index:1; }

/* ---------- cover page ---------- */

.pdf-cover-page{ padding-bottom:0; }
.pdf-cover-top{
  display:flex;
  align-items:center;
  gap:14px;
  height:20px;
  color:var(--pdf-text-3);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pdf-cover-top .pdf-logo{ height:26px; }
.pdf-cover-date{ padding-left:14px; border-left:1px solid var(--pdf-line); line-height:14px; }

.pdf-cover-center{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* a solid panel so the title never sits on the pattern */
.pdf-cover-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:580px;
  padding:64px 56px 48px;
  border:1px solid var(--pdf-line);
  border-radius:28px;
  background:var(--pdf-surface);
  text-align:center;
  overflow:hidden;
}
.pdf-cover-band{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:var(--subject);
}
.pdf-cover-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  margin-bottom:28px;
  border:1px solid var(--pdf-line);
  border-radius:50%;
  background:var(--pdf-paper);
}
.pdf-cover-icon img{ display:block; width:48px; height:48px; }
.pdf-cover-kind{
  color:var(--pdf-accent-text);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:500;
  line-height:18px;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.pdf-cover-title{
  max-width:470px;
  margin:18px 0 0;
  color:var(--pdf-text);
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.pdf-cover-subtitle{
  max-width:440px;
  margin-top:18px;
  color:var(--pdf-text-2);
  font-family:var(--font-display);
  font-size:24px;
  font-weight:500;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.pdf-cover-stats{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--pdf-line);
  color:var(--pdf-text-3);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pdf-cover-dot{ width:4px; height:4px; border-radius:50%; background:var(--pdf-text-3); }
.pdf-cover-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  color:var(--pdf-text-3);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- content page chrome (fixed size on every page) ---------- */

.pdf-running{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:36px;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--pdf-line);
  color:var(--pdf-text-3);
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:20px;
  letter-spacing:.04em;
}
.pdf-running-text{ white-space:nowrap; }

/* One type scale for every export; --pdf-type scales it as a whole. */
.pdf-body{
  --pdf-fs-label:calc(10px * var(--pdf-type));
  --pdf-fs-small:calc(12.5px * var(--pdf-type));
  --pdf-fs-body:calc(14px * var(--pdf-type));
  --pdf-fs-q:calc(19px * var(--pdf-type));
  --pdf-sp-1:calc(4px * var(--pdf-type));
  --pdf-sp-2:calc(8px * var(--pdf-type));
  --pdf-sp-3:calc(12px * var(--pdf-type));
  --pdf-sp-4:calc(16px * var(--pdf-type));
  --pdf-sp-5:calc(22px * var(--pdf-type));
  flex:1;
  min-height:0;
  margin-bottom:20px;
  overflow:hidden;
  font-size:var(--pdf-fs-body);
}

.pdf-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:50px;
  border-top:1px solid var(--pdf-line);
  color:var(--pdf-text-3);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.04em;
  white-space:nowrap;
}

.pdf-muted{ color:var(--pdf-text-3); }

/* shared small-caps label */
.pdf-qnum,
.pdf-info-heading,
.pdf-table-head{
  font-family:var(--font-mono);
  font-size:var(--pdf-fs-label);
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- question card: as tall as the question and its notes ---------- */

.pdf-card{
  border:1px solid var(--pdf-line);
  border-radius:14px;
  background:var(--pdf-surface);
}
.pdf-card-inner{
  display:flex;
  flex-direction:column;
  gap:var(--pdf-sp-4);
  padding:var(--pdf-sp-5);
}
.pdf-card-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--pdf-sp-3); }
.pdf-qnum{ color:var(--pdf-accent-text); font-weight:500; }
.pdf-question{
  font-family:var(--font-display);
  font-size:var(--pdf-fs-q);
  font-weight:500;
  line-height:1.42;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.pdf-difficulty{
  --tone:var(--pdf-good);
  display:flex;
  align-items:center;
  gap:var(--pdf-sp-2);
  font-size:var(--pdf-fs-label);
  line-height:1.5;
}
.pdf-difficulty > span:first-child{ color:var(--tone); font-weight:600; }
.pdf-difficulty.medium{ --tone:var(--pdf-warn); }
.pdf-difficulty.hard{ --tone:var(--pdf-bad); }
.pdf-difficulty-bars{ display:flex; gap:3px; }
.pdf-difficulty-bars i{ width:4px; height:11px; border-radius:1px; background:var(--pdf-line); }
.pdf-difficulty-bars i.on{ background:var(--tone); }

.pdf-image{ display:flex; justify-content:center; }
.pdf-image img{
  max-width:100%;
  max-height:var(--pdf-img-max);
  border:1px solid var(--pdf-line);
  border-radius:10px;
  object-fit:contain;
}

.pdf-answers{ display:flex; flex-direction:column; gap:var(--pdf-sp-2); }
.pdf-answer{
  display:flex;
  align-items:flex-start;
  gap:var(--pdf-sp-3);
  padding:var(--pdf-sp-2) var(--pdf-sp-3);
  border:1px solid var(--pdf-line);
  border-radius:10px;
  background:var(--pdf-paper);
}
.pdf-letter{
  width:calc(28px * var(--pdf-type));
  flex:none;
  color:var(--pdf-text-3);
  font-family:"Instrument Serif", Georgia, serif;
  font-size:calc(var(--pdf-fs-body) * 1.35);
  font-style:italic;
  font-weight:400;
  line-height:calc(var(--pdf-fs-body) * 1.55);
}
.pdf-answer-copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pdf-answer-text{ font-weight:500; overflow-wrap:anywhere; }
.pdf-answer-explain{ color:var(--pdf-text-2); font-size:var(--pdf-fs-small); line-height:1.5; overflow-wrap:anywhere; }
.pdf-answer.correct{ border-color:var(--pdf-good); background:var(--pdf-good-wash); }
.pdf-answer.correct .pdf-letter{ color:var(--pdf-good); }
.pdf-check{ color:var(--pdf-good); font-weight:600; line-height:calc(var(--pdf-fs-body) * 1.55); }

.pdf-info{
  padding:var(--pdf-sp-3) var(--pdf-sp-4);
  border:1px solid var(--pdf-line);
  border-left:3px solid var(--pdf-accent);
  border-radius:8px;
  background:var(--pdf-paper);
}
.pdf-info-remember{ border-left-color:var(--pdf-warn); }
.pdf-info-heading{ margin-bottom:var(--pdf-sp-1); color:var(--pdf-text-3); }
.pdf-info-text{ font-size:var(--pdf-fs-small); line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---------- flowing items ---------- */

.pdf-flow{ display:flex; flex-direction:column; gap:var(--pdf-sp-3); }

/* ---------- notes: bullet points on one sheet, as on the notes page ---------- */

.pdf-note-sheet{
  padding:var(--pdf-sp-5) calc(26px * var(--pdf-type));
  border:1px solid var(--pdf-line);
  border-radius:14px;
  background:var(--pdf-surface);
}
.pdf-note-list{ display:flex; flex-direction:column; gap:var(--pdf-sp-3); margin:0; padding:0; list-style:none; }
.pdf-note-points{ display:flex; flex-direction:column; gap:var(--pdf-sp-3); margin:0; padding:0; list-style:none; }
.pdf-note-points li{
  display:flex;
  align-items:flex-start;
  gap:calc(14px * var(--pdf-type));
  color:var(--pdf-text);
  font-size:var(--pdf-fs-body);
  line-height:1.6;
}
.pdf-note-points .note-mark{ flex:none; display:flex; align-items:center; height:1.6em; color:var(--pdf-accent-text); }
.pdf-note-points .note-star{ display:block; width:calc(12px * var(--pdf-type)); height:calc(12px * var(--pdf-type)); fill:currentColor; }
.pdf-note-points .note-text{ flex:1; min-width:0; overflow-wrap:anywhere; }

/* ---------- definitions table ---------- */

.pdf-table{
  border:1px solid var(--pdf-line);
  border-radius:var(--r-md);
  background:var(--pdf-paper);
  overflow:hidden;
}
.pdf-table-head,
.pdf-def-row{
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  column-gap:var(--pdf-sp-5);
  padding:0 var(--pdf-sp-5);
}
.pdf-table-head{
  padding-top:var(--pdf-sp-2);
  padding-bottom:var(--pdf-sp-2);
  border-bottom:1px solid var(--pdf-line);
  background:var(--pdf-surface);
  color:var(--pdf-text-3);
}
.pdf-def-row{
  padding-top:var(--pdf-sp-3);
  padding-bottom:var(--pdf-sp-3);
  border-top:1px solid var(--pdf-line-soft);
}
/* letter heading before each letter's terms: the letter set large in the display face, a fine rule, the count */
.pdf-def-letter{
  display:flex;
  align-items:baseline;
  gap:var(--pdf-sp-3);
  padding:var(--pdf-sp-5) var(--pdf-sp-5) var(--pdf-sp-1);
}
.pdf-def-letter-char{
  flex:none;
  min-width:calc(24px * var(--pdf-type));
  color:var(--pdf-text);
  font-family:var(--font-display);
  font-size:calc(30px * var(--pdf-type));
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
}
.pdf-def-letter-rule{
  flex:1;
  align-self:center;
  height:1px;
  margin-top:calc(6px * var(--pdf-type));
  background:var(--pdf-line);
}
.pdf-def-letter-count{
  flex:none;
  color:var(--pdf-text-3);
  font-family:var(--font-mono);
  font-size:var(--pdf-fs-label);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.pdf-table-rows > :first-child,
.pdf-table-rows > :first-child > :first-child{ border-top:0; }
.pdf-def-letter + .pdf-def-row{ border-top:0; }
.pdf-def-term{
  font-family:var(--font-display);
  font-size:var(--pdf-fs-body);
  font-weight:600;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.pdf-def-text{
  color:var(--pdf-text-2);
  font-size:var(--pdf-fs-small);
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* html2canvas finds each font's baseline with a 1×1 <img> it puts in a div on
   <body>; base.css makes images blocks, which drops every glyph ~8px low.
   Keep that probe inline. */
body > div > img[width="1"][height="1"]{ display:inline; }

/* ---------- export progress (in the app) ---------- */

.pdf-progress{
  position:fixed;
  z-index:700;
  left:50%;
  bottom:var(--s-6);
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:500;
  transform:translateX(-50%);
  animation:toast-in var(--dur-3) var(--ease-spring) both;
}
.pdf-progress .spinner{ color:var(--accent-text); }
.pdf-progress.is-leaving{ animation:fade-out var(--dur-2) both; }

/* KaTeX inside PDFs: no clipping, left aligned like the app */
.pdf-page .katex-display{ margin:6px 0; padding:4px 0 6px; overflow:visible; text-align:left; }
.pdf-page .katex-display > .katex{ text-align:left; }
.pdf-page .katex{ font-size:1.05em; }