/* ================================================================
   LADDER — the two callouts a drill card may carry (practice/ladder.js)

   `.ladder-stage-callout` and its `.ladder-gap-callout` variant, both inside
   #question-text, below the prompt. The concept/rung/interval strip that used
   to sit above the prompt moved to the page-wide concept topbar
   (styles/practice/stage-ladder.css) so it spans both panels and survives a
   re-render.

   🪦 `.ladder-example` and `.ladder-example-body` lived here: the KP's worked
   example, rendered below the prompt on the supported rungs, styled to read as
   REFERENCE rather than as more prompt. Deleted 2026-09-10 with the markup that
   produced it — "we don't put worked examples in the problems anymore. They
   have their own lessons" (Seth). A drill card carries the prompt, the graded
   cases, and these two callouts; nothing else.
   ================================================================ */

.ladder-stage-callout {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 45%, transparent);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 0;
  padding: 10px 14px;
}

/* The spent-rung notice. Same block, warning tint rather than info: it is not
   describing the scaffold on this card, it is telling the learner the course
   has run out of new problems at the rung they earned. Different thing, and it
   should not read as one more piece of instructions. */
.ladder-gap-callout {
  background: color-mix(in srgb, var(--warn, #d98324) 12%, transparent);
  border-color: color-mix(in srgb, var(--warn, #d98324) 45%, transparent);
  font-weight: 500;
}