/* ============================================================
   THE READING SHEET (owner picked Option A, 2026-10-05: "lets do A only
   for notes, summaries, mcqs, all these resources").
   Loaded LAST on every study page (notes, summaries, flashcards, topic
   questions, MCQ, videos, past papers and mock exams), so it wins by order
   over the page sheets it refines.

   What a student reads sits on one plain sheet. The dot grid stays on the
   desk around it, fainter, and never runs under a word: the 18px grid sits
   at 2 to 2.5 cycles per degree, the band where a repeating pattern is most
   uncomfortable, and at night its 12% dots were a plainly visible lattice
   behind every line. Notes and summaries become a sheet as wide as the old
   note column, with 20px running prose (17px measured just under the size
   where reading speed peaks on a laptop).
   The practice cards (flashcards, question cards, MCQ cards, the video
   frame, the paper rows) already are sheets on --nb-paper-raised; here they
   take the reading sheet's tone. By night every study column reads in the
   softer --nb-read-ink. Research and the six options the owner chose from:
   Desktop/notes-reading-options-2026-10-05.

   Discipline (pages/tests_notebook.py): zero raw colours, every value a
   --nb-* token; no font shorthand or weight here, so the typography
   fingerprint is unmoved; sizes only through var(--nb-text-*).
   ============================================================ */

/* ---------- 1 · The desk ----------------------------------------------
   Both theme selectors, so these tie notebook-account-skin.css's
   html.theme-* body paper (0,1,2) and win by load order. */
html.theme-light,
html:not(.theme-light) {
  background-color: var(--nb-read-desk);
}
html.theme-light body,
html:not(.theme-light) body {
  background-color: var(--nb-read-desk);
  background-image: radial-gradient(var(--nb-read-dot) 1px, transparent 1px);
}
/* The topic question bar is more of this desk (tq-desk.css section 7, the
   owner's mock-up of 2026-10-07): the same tone and dots, under a hairline. */
@media (min-width: 861px) and (min-height: 501px) {
  html.theme-light .nb-qg-practice > .qg-pager,
  html:not(.theme-light) .nb-qg-practice > .qg-pager {
    background-color: var(--nb-read-desk);
    background-image: radial-gradient(var(--nb-read-dot) 1px, transparent 1px);
  }
}

/* ---------- 2 · Every study column reads on the sheet's tone ---------- */
.nb-notes-column,
.nb-papers {
  --nb-paper-raised: var(--nb-read-sheet);
  --nb-ink: var(--nb-read-ink);
  --nb-ink-2: var(--nb-read-ink);
  --nb-ink-3: var(--nb-read-ink);
  color: var(--nb-ink);
}
.nb-notes-column img,
.nb-papers img {
  filter: var(--nb-read-figure);
}

/* ---------- 3 · Notes and summaries: the sheet ------------------------
   Only a column that holds a note (never a practice column, never a
   chapter whose whole body is the paywall card): nb_resource_detail.html
   marks it nb-read-notes, and nb-read-sheet unless the chapter is fully
   paywalled. Classes, never :has(): with :has() on the column every
   selector below hung off an ancestor of the whole note, so each node
   KaTeX and note-math-fit.js wrote re-styled the note, and a maths page
   froze for 200ms after loading (measured 2026-10-05). --nb-paper is re-pointed
   inside it so every callout and box wash mixes with the sheet, not the
   desk. The note keeps the width it had before the sheet (owner,
   2026-10-05: "the note is not taking up the same space as it used to ...
   make it more wide"): the sheet is 880px with a 40px inner margin, so the
   text runs the old ~800px column, and tables, figures and boxes keep the
   same room they had. */
.nb-notes-column.nb-read-notes.nb-read-sheet {
  --nb-paper: var(--nb-read-sheet);
  max-width: 880px;
  padding: var(--nb-s8) var(--nb-s8) var(--nb-s9);
  background: var(--nb-read-sheet);
  border: 1px solid var(--nb-read-edge);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-1);
}
/* running prose: 20px (the type role's 1.65 leading carries over) */
.nb-notes-column.nb-read-notes .note-prose-surface > :is(p, ul, ol) {
  font-size: var(--nb-text-lg);
}
/* Callouts (owner, 2026-10-05, from the Reading lab: "I liked the exam cue
   stopped being a misconception, also ... it made the callouts softer a bit
   and also all of them had the same px size"). On the sheet every callout
   drops its edge and keeps only its type's wash, and reads at the prose size
   (it was 17px under 20px prose, so the text that wins marks read like small
   print). */
.nb-notes-column.nb-read-notes .nb-notes :is(.note-callout, blockquote[class^="callout-"], blockquote[class*=" callout-"]) {
  border-color: transparent;
  font-size: var(--nb-text-lg);
  line-height: 1.65;
}
/* The exam cue is no box, so it never reads as part of the box it usually
   follows: one line on the prose edge, a drawn green tick, its name in the
   tip green at the prose size, then the cue. (The first line version, a 13px
   capitals label behind a ticked circle, looked "off and ugly" to the owner
   the same day. The tick is drawn because the sans has no U+2713 and the
   fallback symbol font draws it like a root sign.) */
.nb-notes-column.nb-read-notes .nb-notes :is(.note-callout.note-callout--exam-tip, blockquote.callout-exam-tip:not(.note-callout)) {
  padding: 0;
  background: none;
}
.nb-notes-column.nb-read-notes .nb-notes blockquote.callout-exam-tip .callout-icon-col {
  display: none;
}
.nb-notes-column.nb-read-notes .nb-notes :is(.note-callout--exam-tip > strong, blockquote.callout-exam-tip .callout-body p:first-child > strong:first-child) {
  display: inline;
  margin: 0 0.5em 0 0;
  font-size: var(--nb-text-lg);
  line-height: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.nb-notes-column.nb-read-notes .nb-notes :is(.note-callout--exam-tip > strong, blockquote.callout-exam-tip .callout-body p:first-child > strong:first-child)::before {
  content: "";
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin: 0 0.4em 0 0;
  vertical-align: -0.04em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.6 3.4 7.2-7.8' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.6 3.4 7.2-7.8' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}
.nb-notes-column.nb-read-notes .nb-notes .note-callout--exam-tip :is(.note-callout-body, .note-callout-body > p:first-child) {
  display: inline;
}
/* Inside a worked example, practical or derivation a callout (and an exam
   cue's name) reads at the box's own 17px, not the 20px prose size: "the same
   size" means the same as the text around it (callout census 2026-10-05:
   3,445 callout boxes sit inside a box, 3,154 of them misconceptions, and
   322 exam cue lines). */
.nb-notes-column.nb-read-notes .nb-notes :is(.note-worked-example, .note-practical, .note-derivation) :is(.note-callout, blockquote[class^="callout-"], blockquote[class*=" callout-"]),
.nb-notes-column.nb-read-notes .nb-notes :is(.note-worked-example, .note-practical, .note-derivation) :is(.note-callout--exam-tip > strong, blockquote.callout-exam-tip .callout-body p:first-child > strong:first-child) {
  font-size: var(--nb-text-md);
}
/* A callout inside a worked example, practical or derivation is the box's
   last part, not a box inside the box (owner, 2026-10-05: "it becomes the
   last part of a box and without the callout"): a hairline across the box,
   then its coloured name and its words, on the box's own ground. */
.nb-notes-column.nb-read-notes .nb-notes :is(.note-worked-example, .note-practical, .note-derivation) .note-callout:not(.note-callout--exam-tip) {
  margin: var(--nb-s5) 0 0;
  padding: var(--nb-s4) 0 0;
  background: none;
  border-width: 1px 0 0;
  border-color: var(--nb-border);
  border-radius: 0;
}
/* Callout boxes straight after one another join into one block (owner,
   2026-10-05): one frame, a hairline between the parts, and every part
   keeps its own wash and name, so a misconception still reads red. The
   sibling :has() looks at the next sibling only, never at a subtree. */
.nb-notes-column.nb-read-notes .note-prose-surface > .note-callout:not(.note-callout--exam-tip, .note-callout--memorize) + .note-callout:not(.note-callout--exam-tip, .note-callout--memorize) {
  margin-top: 0;
  border-top-color: var(--nb-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nb-notes-column.nb-read-notes .note-prose-surface > .note-callout:not(.note-callout--exam-tip, .note-callout--memorize):has(+ .note-callout:not(.note-callout--exam-tip, .note-callout--memorize)) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* Memorize (the list at the end of every summary) is no box: its name with
   a drawn bookmark, then the list, the same shape as the Exam tips list
   just above it (owner, 2026-10-05; 701 of the 946 were long or too big). */
.nb-notes-column.nb-read-notes .nb-notes .note-callout.note-callout--memorize {
  padding: 0;
  background: none;
}
.nb-notes-column.nb-read-notes .nb-notes .note-callout--memorize > strong {
  margin: 0 0 var(--nb-s2);
  font-size: var(--nb-text-lg);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.nb-notes-column.nb-read-notes .nb-notes .note-callout--memorize > strong::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.4em 0 0;
  vertical-align: -0.06em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.8h8v12.4l-4-3.1-4 3.1z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.8h8v12.4l-4-3.1-4 3.1z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}
/* Drawing guidance is text (blocks_render.drawing_guidance_html): its bold
   name line sits on its numbered steps. */
.nb-notes-column.nb-read-notes .note-dg-title {
  margin-bottom: var(--nb-s2);
}
.nb-notes-column.nb-read-notes .note-dg-title + .note-dg-steps {
  margin-top: 0;
}
/* The other callout-like panels take the same treatment (owner, 2026-10-05,
   "do all your picks", from the panel census and its pictures):
   - a worked example's Answer, Check, Scenario and Interpretation panels and
     a practical's Key precaution (10,248, every one inside its box, each a
     wash and a 3px stripe) are parts of the box like its own Problem,
     Strategy and Working rows: a hairline, the coloured name, the words. The
     Answer keeps its green words. The first part of a box draws no hairline
     under the box's own title rule. */
.nb-notes-column.nb-read-notes .nb-notes :is(.note-we-callout, .note-field--warn) {
  margin: var(--nb-s5) 0 0;
  padding: var(--nb-s4) 0 0;
  background: none;
  border-width: 1px 0 0;
  border-style: solid;
  border-color: var(--nb-border);
  border-radius: 0;
  box-shadow: none;
}
.nb-notes-column.nb-read-notes .nb-notes :is(.note-worked-example-body, .note-practical-body, .note-derivation-body) > :is(.note-we-callout, .note-field--warn):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top-width: 0;
}
/* - the Quick recap and the Can I...? progress check at the end of every
     note are soft like the objectives: no border, a faint blue wash on the
     sheet's tone, and their lists at the prose size; */
.nb-notes-column.nb-read-notes .nb-notes .note-review-section {
  background: color-mix(in srgb, var(--nb-blue) 5%, var(--nb-read-sheet));
  border-color: transparent;
  box-shadow: none;
}
.nb-notes-column.nb-read-notes .nb-notes .note-review-list > li {
  font-size: var(--nb-text-lg);
}
/* - a chemistry equation plate has no border and its equation reads at the
     prose size (inside a box, at the box's 17px). Plates one after another
     already join into one (notebook-notes.css). */
.nb-notes-column.nb-read-notes .nb-notes .note-chem-equation {
  background: color-mix(in srgb, var(--nb-ink) 5%, var(--nb-read-sheet));
  border-color: transparent;
}
.nb-notes-column.nb-read-notes .nb-notes .note-chem-equation > p {
  font-size: var(--nb-text-lg);
}
.nb-notes-column.nb-read-notes .nb-notes :is(.note-worked-example, .note-practical, .note-derivation) .note-chem-equation > p {
  font-size: var(--nb-text-md);
}
/* no card inside the sheet: the objectives become a quiet wash */
.nb-notes-column.nb-read-notes .nb-notes .nt-objectives-card {
  background: color-mix(in srgb, var(--nb-blue) 6%, var(--nb-read-sheet));
  border-color: transparent;
  box-shadow: none;
}

/* ---------- 4 · Phones: the whole reading area is paper ----------------
   Under 861px the sheet runs edge to edge: it steps back into the page's
   own side gutter (notebook-page.css section 7, the study page's
   padding-inline clamp), and running prose returns to 17px. */
@media (max-width: 860px) {
  .nb-notes-column.nb-read-notes.nb-read-sheet {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * clamp(20px, 2.5vw, 48px));
    padding: var(--nb-s7) var(--nb-s5) var(--nb-s9);
    border-width: 1px 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nb-notes-column.nb-read-notes .note-prose-surface > :is(p, ul, ol),
  .nb-notes-column.nb-read-notes .nb-notes :is(.note-callout, blockquote[class^="callout-"], blockquote[class*=" callout-"]),
  .nb-notes-column.nb-read-notes .nb-notes :is(.note-callout--exam-tip > strong, blockquote.callout-exam-tip .callout-body p:first-child > strong:first-child),
  .nb-notes-column.nb-read-notes .nb-notes .note-callout--memorize > strong,
  .nb-notes-column.nb-read-notes .nb-notes .note-review-list > li,
  .nb-notes-column.nb-read-notes .nb-notes .note-chem-equation > p {
    font-size: var(--nb-text-md);
  }
}