/* Inline first-encounter lesson: teaching + worked explanation left, complete
   runnable worked code right. No popup or faded exercise inside lesson. */

body.lesson-mode #practice-aids,
body.lesson-mode #practice-submit-area,
body.lesson-mode #practice-feedback-area,
body.lesson-mode #question-imports,
/* 🔴 THE DRILL'S EXAMPLES ARE A SIBLING OF #question-text, NOT A CHILD OF IT.
   Every gate (practice/lessons.js, practice/example-gate.js) takes the screen
   by rewriting `#question-text` alone, so anything renderQuestion wrote into
   the nodes AROUND it survives the takeover. `#question-imports` and
   `#question-visual` were on this list from the start; `#question-examples`
   shipped later (2026-08-28) and was never added — so a gate that fired after
   a drill had rendered left "For this input, return this" and "Not this" on
   screen under the lesson, at full page width, because the 780px cap in
   notebook.css is on #question-text and nothing else. Seth, 2026-09-09, with a
   screenshot of exactly that. */
body.lesson-mode #question-examples,
body.lesson-mode #question-visual,
body.lesson-mode #torch-colab-notice,
body.lesson-mode #question-meta-top,
body.lesson-mode #question-id-chip,
body.lesson-mode .question-number-row,
body.lesson-mode #session-status-row,
body.lesson-mode #self-report-row {
  display: none !important;
}
/* #cold-start-badge and #practice-mode-intro left this list on 2026-08-23 —
   both elements were deleted outright, so hiding them here matched nothing. */

/* The concept name, graph button and progress counter that used to live in a
   `.lesson-topbar` inside this panel are now in the page-wide concept topbar
   (styles/practice/stage-ladder.css), which spans both panels. */

/* 🪦 THE PROSE RULES THAT USED TO BE HERE ARE GONE, and that is the change.
   `.lesson-body`, `.lesson-worked` and `.lesson-watch-out` were 15px system
   sans on a 1.65 line, with their own `h4`, their own inline-code chip and
   their own blockquote — a fourth reading surface in an app that already had
   three. They carry `.nbv-md` now (practice/lessons.js), so they take the one
   type scale in styles/practice/notebook-view.css at the zoom
   styles/practice/notebook.css sets for this page, exactly like a notebook
   cell. Seth, 2026-09-10: "I want them to be the same thing."

   What is left in this file is the lesson's own FURNITURE — the title, the
   Watch-out band, the note under the worked example, the button row. None of
   that exists on a notebook page. */

/* The page title. Not inside a `.nbv-md`, so it restates the heading face; the
   numbers are the shared scale's `h2`, at this page's zoom. */
.lesson-kp-title {
  color: var(--prose-head);
  font-family: var(--prose-heading);
  font-size: calc(26px * var(--anb-zoom, 1));
  font-weight: 400;
  line-height: calc(31.35px * var(--anb-zoom, 1));
  margin: 0 0 12px;
}

.lesson-watch-out {
  border-left: 3px solid var(--warn);
  margin-top: 18px;
  padding-left: 14px;
}

/* "Watch out" and "Worked example" — the two labels this page adds that no
   notebook has. They sit INSIDE the `.nbv-md` containers, so the shared scale
   has already set their face and size as an h3; all this does is close up the
   leading margin, which is right for a section label and wrong for a heading
   in the middle of prose. */
.lesson-watch-out h3,
.lesson-worked h3 {
  margin: 0 0 8px;
}

.lesson-worked {
  border-top: 1px solid var(--border);
  margin-top: 22px;
  padding-top: 18px;
}

/* Deliberately NOT in the reading face: this is an instruction about the
   interface, not part of the lesson, and setting it in the prose serif at the
   prose size would make it read as a closing paragraph of the example. */
.lesson-example-note {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 13px;
  margin-top: 14px;
}

/* A page the learner read before, back because its drill never came. */
.lesson-revisit-note {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 13px;
  margin: -6px 0 16px;
}

.lesson-actions {
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
}

.lesson-actions button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .lesson-actions button {
    width: 100%;
  }
}

/* ── the lesson's own clock (practice/lesson-timer.js) ───────────── */

/* Left of Continue, in the same row, because that is where the decision to
   move on is made. The readout and the button are rendered by lesson-timer.js
   into the empty `#lesson-clock-row` the page leaves for them — this file only
   says what they look like. */
.lesson-clock-row {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-right: auto;
}

.lesson-clock {
  color: var(--muted);
  font-family: var(--code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* The last minute. Same signal the session countdown and the exercise block
   use, so a learner reads one colour across three clocks. */
.lesson-clock--low {
  color: var(--danger);
  font-weight: 600;
}

/* Put down on purpose. Dimmed rather than hidden: the time that is left is
   the thing the learner came back to check. */
.lesson-clock--paused {
  opacity: 0.55;
}

.lesson-pause-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: 13px;
  padding: 6px 12px;
}

.lesson-pause-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

@media (max-width: 700px) {
  /* `.lesson-actions button { width: 100% }` above is about Continue. The
     clock row is a pair, not a button, and stacking it full-width would put
     three full-width blocks where there are two decisions. */
  .lesson-clock-row {
    margin-right: 0;
    width: 100%;
  }
  .lesson-actions .lesson-pause-btn {
    width: auto;
  }
}