/* ── A STAGED question (study_staged.js; Seth 2026-11-02) ─────────────────
   One step at a time: inline maths dropdowns or an MC list, red/green cells,
   the named mistake, then the worked solution. Display maths never shows a
   scrollbar it doesn't need: overflow-y hidden + room above and below. */
/* Plain (Seth 2026-11-02): the steps sit on the page's own background, no
   card, band or rule; only a worked solution (not the learner's) is tinted. */
.ct-staged { display: grid; gap: 1.4rem; margin-top: 0.9rem; }
.ct-st-step { background: none; border: 0; }
.ct-st-num { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.35rem; }
.ct-st-line { line-height: 2.4; }
.ct-st-cell { display: inline-block; vertical-align: middle; margin: 0 0.2rem; }
.ct-st-dd { position: relative; display: inline-block; }
.ct-st-dd-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; min-width: 4.5rem; padding: 0.15rem 0.5rem;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--input-bg); color: inherit; cursor: pointer;
}
.ct-st-dd-btn:disabled { cursor: default; }
.ct-st-dd-empty { color: var(--muted); }
.ct-st-dd-caret { font-size: 0.75em; color: var(--muted); }
.ct-st-dd-list {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); display: grid; min-width: 100%;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface);
  box-shadow: 0 6px 18px var(--shadow-soft);
}
.ct-st-dd-list[hidden] { display: none; }
.ct-st-dd-opt { padding: 0.3rem 0.6rem; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.ct-st-dd-opt:hover { background: rgb(var(--info-rgb) / 0.12); }
.ct-st-dd.is-right .ct-st-dd-btn { border-color: var(--ok); background: rgb(var(--ok-rgb) / 0.22); color: var(--ok); }
.ct-st-dd.is-wrong .ct-st-dd-btn { border-color: var(--danger); background: rgb(var(--danger-rgb) / 0.22); color: var(--danger); }
.ct-st-dd.is-key .ct-st-dd-btn { border-color: var(--ok); border-style: dashed; color: var(--ok); }
.ct-st-check { margin-top: 0.5rem; }
.ct-st-why { color: var(--danger); margin: 0.4rem 0 0; }
.ct-st-solution { margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-left: 3px solid var(--ok); background: rgb(var(--ok-rgb) / 0.06); }
.ct-st-solution-h { font-weight: 600; margin-bottom: 0.3rem; }
.ct-st-rightwhy { color: var(--ok); margin: 0 0 0.4rem; }
.ct-st-ref { display: inline-block; margin-top: 0.4rem; color: var(--info); }
.ct-msg .katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 0.35em; }
.ct-part-here { outline: 2px solid var(--info); outline-offset: 4px; border-radius: 4px; }