/* Code blocks inside question text — shared by every screen that renders a question.
   Defined once because the same stem appears in the quiz, the wrong-answer notebook,
   the results review and the public /q/<slug> page; four copies of this rule would
   drift, and three of them already had no rule at all.

   The bug this fixes: an unstyled <pre> does not wrap, so one long line of Java made
   the whole page wider than the phone screen — header, timer and answer choices all
   scrolled sideways. The code now WRAPS; nothing scrolls sideways, at any width.

   min-width:0 matters: a flex/grid child defaults to min-width:auto and refuses to
   shrink below its content, so wrapping the <pre> alone would still let the layout be
   pushed. Both are needed. */

.q-code-scope pre {
  margin: 12px 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #1f2937;
  /* WRAP rather than scroll. Sideways-scrolling a code block on a phone hides part of
     the very thing the question asks the student to trace, and they have to discover the
     scroll to see it. pre-wrap keeps the authored newlines and indentation and breaks
     only lines that genuinely do not fit.

     The hanging indent is the point: a wrapped continuation is pushed further right than
     any real code line, so a student counting statements ("how many times does the loop
     body run?") can still tell a wrap from a new line.

     No horizontal scrollbar at any width, by instruction: overflow-x is hidden and
     overflow-wrap:anywhere breaks even an unbroken token, so nothing can be hidden off
     the right edge where a student would never think to look. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
  max-width: 100%;
}

/* One span per source line (see the code_lines filter). The hanging indent has to be
   per LINE: on the <pre> itself, text-indent would outdent only the first line of the
   whole listing and leave every wrapped continuation looking like a real new line. */
.q-code-scope pre .cl {
  display: block;
  padding-left: 2.4em;
  text-indent: -2.4em;
}

.q-code-scope code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.q-code-scope pre code { background: none; padding: 0; font-size: inherit; }

/* Let the scroll box actually be constrained by its parent. */
.q-code-scope { min-width: 0; max-width: 100%; }

/* Long unbroken tokens (URLs, identifiers) outside <pre> must not widen the page. */
.q-code-scope { overflow-wrap: break-word; }

@media (max-width: 640px) {
  .q-code-scope pre { font-size: 0.8rem; padding: 10px 12px 10px 2.2em; }
}

body.dark .q-code-scope pre { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark .q-code-scope code { background: #334155; color: #e2e8f0; }