/* Lesson text. Colors come from Bootstrap's theme variables, so all three themes work. */
.lesson-body { max-width: 50rem; line-height: 1.7; }
.lesson-body h2 { margin-top: 2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--bs-border-color); }
.lesson-body h3 { margin-top: 1.5rem; }
.lesson-body img { max-width: 100%; }
.lesson-body blockquote {
  border-left: 4px solid var(--bs-primary);
  background: var(--bs-tertiary-bg);
  padding: .75rem 1rem;
  border-radius: 0 .375rem .375rem 0;
}
.lesson-body blockquote p:last-child { margin-bottom: 0; }
.lesson-body .codehilite { border-radius: .5rem; padding: 1rem 1.25rem; margin: 1rem 0; overflow-x: auto; }
.lesson-body .codehilite pre { margin: 0; }
/* Coffee's code background (gruvbox cream) looked like a note; use the theme's beige instead. */
[data-bs-theme=coffee] .lesson-body .codehilite { background: var(--bs-tertiary-bg); }
.lesson-body table { margin: 1rem 0; }
.lesson-body th, .lesson-body td { border: 1px solid var(--bs-border-color); padding: .35rem .6rem; }
.lesson-body li.task-item { list-style: none; }
.lesson-body li.task-item input { margin-right: .5rem; }

/* Reading fonts (Display menu). They apply to lesson text (.reading) and to each font's name in the menu;
   menus and admin pages keep Bootstrap's system font, and code stays monospace. "system" needs no rule. */
.font-literata, [data-font=literata] .reading { font-family: Literata, serif; }
.font-source-serif, [data-font=source-serif] .reading { font-family: "Source Serif 4", serif; }
.font-merriweather, [data-font=merriweather] .reading { font-family: Merriweather, serif; }
.font-inter, [data-font=inter] .reading { font-family: Inter, sans-serif; }

/* Lesson page: a fixed-width lesson list, a faint rule, then the text (capped like .lesson-body).
   Fixed widths mean the page never jumps as the window narrows; the spare space on the right goes first. */
/* lesson-main fills the rest of the row so notes can query the free width; its children keep the 50rem cap. */
.lesson-main { min-width: 0; container-type: inline-size; }
.lesson-main > * { max-width: 50rem; }
.lesson-nav .check { width: 1em; flex-shrink: 0; }   /* keeps titles lined up with or without a tick */
.lesson-pager { display: none; }   /* shown on the rail when the list is hidden (below) */
@media (min-width: 768px) {
  .lesson-aside { width: 20rem; border-right: 1px solid var(--bs-border-color); }   /* 18.5rem list + 1.5rem gap */
  .lesson-nav { position: sticky; top: 1rem; }
  /* Lesson list hidden (#navToggle): only the toggle stays, as a narrow rail, and its arrows point right.
     Previous/next sit at the bottom of the window; fixed with no left keeps them in line with the rail. */
  .nav-hidden .lesson-aside { width: auto; }
  .nav-hidden .lesson-nav > :not(:first-child, .lesson-pager), .nav-hidden .lesson-nav-title { display: none; }
  .nav-hidden #navToggle svg { transform: scaleX(-1); }
  .nav-hidden .lesson-pager { display: flex; position: fixed; bottom: 1rem; }
}

/* Page editor (CodeMirror, neo theme): take the background and text color from the Bootstrap theme. */
.cm-s-neo.CodeMirror { background: var(--bs-body-bg); color: var(--bs-body-color); }
.cm-s-neo .CodeMirror-cursor { border-color: var(--bs-body-color); }

/* Notes (lesson page). pre-wrap keeps the writer's line breaks. When there is room right of the text
   (50rem text + 18rem), each note floats there beside its heading; floats stack, so notes never overlap. */
.note { white-space: pre-wrap; width: 100%; }
@container (min-width: 68rem) {
  .reading .note { float: right; clear: right; width: 16rem; margin-right: -18rem; }
}