/* Lesson page — LAYOUT ONLY.

   🪦 THIS SHEET USED TO DRESS A SECOND KIND OF CELL. `.nb-cell` was the lesson
   gate's own rectangle — a Run BAR under the code with a text button and a
   status line — against the Run GUTTER that the Notebooks tab and the ARENA
   pages have always drawn. Two rectangles for one idea, two copies of the
   run-state colours, and a learner who moved from a lesson to the notebook OF
   that lesson saw the same code in a different frame.

   Seth, 2026-09-10: "I want the lessons in notebook style format rather than
   what they currently are so that it can look a lot nicer" — and on how to get
   there, "it is better to reuse something rather than creating another surface
   with more bugs. I want them to be the same thing."

   So the cells are built by practice/notebook-cells.js and dressed by
   styles/practice/notebook-view.css, exactly like the other two surfaces, and
   what is left here is the part that really is this page's own: it is a
   PANEL, not a page, and the split has to collapse around it. */

/* ---- single column ------------------------------------------------------
   The lesson is prose with code in it, so the split has nothing to hold: the
   right panel would be an empty editor beside an explanation that already
   contains its own runnable code. Collapse to one measured column instead of
   two half-width ones — long lines of prose in a 440px panel are the reason
   the old layout was hard to read even when the mapping was obvious. */

body.lesson-mode .practice-right {
  display: none;
}

body.lesson-mode .practice-left {
  border-right: none;
  flex: 1;
}

/* 🔴 THE LESSON'S ZOOM, AND IT IS THE ONLY NUMBER THIS PAGE SETS ABOUT TYPE.
   The whole scale — prose size, headings, the code metrics, the column width —
   is one set of LessWrong measurements in notebook-view.css multiplied by this
   (see the header there). The ARENA page reads at 1.4 and the Notebooks tab at
   1.25; a lesson is 0.95 because it is the one of the three that is a PANEL
   inside the practice tab rather than a page of its own, and it is read
   directly before a drill that is set at the panel's size.

   🔴 DO NOT RETUNE THIS PAGE BY EDITING SIZES. Every pixel value in that scale
   was read off a LessWrong render with tools/visual-diff; a hand-scaled copy
   here would look approximately right today and could never be checked against
   theirs again. This number, and nothing else.

   On `body` rather than on `#question-text`: the cells and the prose are both
   below it, and a custom property inherits downwards only. */
body.lesson-mode {
  --anb-zoom: 0.95;
}

/* The column itself is capped, not the panel: the panel keeps the full width
   so its scrollbar stays at the window edge where it is expected. The cap is
   the SHARED measure, so the lesson's column and the notebook's column are the
   same column at two sizes rather than 780px and 880px by coincidence. */
body.lesson-mode #question-text {
  margin: 0 auto;
  max-width: calc(682px * var(--anb-zoom, 1));
  width: 100%;
}

/* ---- static fences -------------------------------------------------------
   A ```python no-run block, or anything under "Watch out". They are coloured
   like every other piece of code (practice/notebook-code-edit.js paints
   `pre[data-fence] > code` too) but carry no Run button, so they need the
   rectangle a cell gets from `.nbv-code`.

   🔴 Scoped to the lesson panel on purpose: `pre[data-fence]` is also what the
   ARENA surfaces render, and now that the lesson's prose is `.nbv-md` the
   shared `.nbv-md pre` rule in notebook-view.css already dresses the fences
   inside it. What this catches is the fences OUTSIDE that prose — the ones
   under "Watch out", which is a `.lesson-watch-out` band and not a markdown
   cell. */
body.lesson-mode #question-text .lesson-watch-out pre[data-fence] {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 16px 0;
  overflow-x: auto;
  padding: 12px 14px;
}

body.lesson-mode #question-text .lesson-watch-out pre[data-fence] > code {
  background: none;
  color: var(--white);
  display: block;
  font-family: var(--code-font);
  font-size: calc(18.2px * var(--anb-zoom, 1));
  line-height: calc(26px * var(--anb-zoom, 1));
  padding: 0;
  white-space: pre;
}