/* Opt-in classroom lesson view; other guided families retain their layout. */
body.has-guided-lesson > .container { max-width: 1240px; padding: 0 24px; }
body.has-guided-lesson > .topbar + div { display: none; }
.guided-problem.guided-lesson { max-width: 1180px; padding: 22px; margin: 20px auto; }
.guided-lesson .guided-header { margin-bottom: 18px; }
.guided-lesson .guided-progress:empty { display: none; }
.guided-lesson-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.guided-lesson-visual, .guided-lesson-work { min-width: 0; }
.guided-lesson-visual { position: sticky; top: 76px; }
.guided-lesson .guided-canvas-container { padding: 0; overflow: hidden; margin: 0; align-content: start; flex-wrap: wrap; }
.guided-lesson .guided-scenario { padding: 12px 14px; font-size: .93rem; margin-bottom: 18px; }
.guided-lesson .guided-scenario p { line-height: 1.5; }
.guided-lesson .step-question { font-size: 1rem; line-height: 1.5; }
.guided-lesson .guided-controls { margin: 12px 0; gap: 8px; flex-wrap: wrap; }
.guided-lesson .guided-controls .guided-btn { flex: 1 1 auto; }
.guided-lesson #rewatch-btn { display: none !important; }
.guided-lesson .guided-step-content { margin-bottom: 12px; }
.guided-lesson .guided-feedback { margin-top: 12px; }
.guided-lesson .predict-step { padding: 16px; background: #f2f6fc; color: #24364a; border: 1px solid #cbd9e9; }
.guided-lesson .predict-badge { background: #e0eafa; color: #25466e; border-color: #bdcce0; }
.guided-lesson .predict-choice { padding: 10px 12px; background: white; border-color: #ccd7e2; color: #24364a; }
.guided-lesson .predict-choice:hover { background: #e8f0fb; }
.guided-lesson .predict-choice-text { color: inherit; font-size: .95rem; line-height: 1.45; }
.guided-lesson .predict-replay-note { color: #25466e; background: #e4edf9; }
.guided-lesson .watching-message { background: #edf4fb; color: #24364a; padding: 16px; border: 1px solid #cbd9e9; }
.guided-lesson .watching-message p { line-height: 1.5; }
.guided-lesson .mc-choice { padding: 10px; line-height: 1.4; }
.guided-lesson .guided-input { width: 155px; }
.guided-problem button.hint-toggle { border: 0; background: transparent; color: inherit; text-align: left; width: 100%; font: inherit; padding: 0; cursor: pointer; }
.guided-lesson :is(button,input,a):focus-visible { outline: 3px solid #1d6ad3; outline-offset: 3px; }
.guided-lesson .sim3d-data-panel { position: static; order: 2; flex: 1 1 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; font-size: .73rem; box-shadow: none; border: 0; border-top: 1px solid #dde5ec; padding: 8px 12px; }
.guided-lesson .sim3d-data-panel:not(.minimized) { display: flex; flex-wrap: wrap; gap: 6px 8px; }
/* Readout chips: the old single monospace line ("t (s) 0.00 A x (m) 0.0 …")
   ran the labels and numbers together. One chip per quantity, label muted,
   value tabular so the digits do not jitter as they update. */
.guided-lesson .sim3d-data-panel .sim3d-row { background: #f3f6f9; border: 1px solid #e3e9ef; border-radius: 6px; padding: 2px 9px; gap: 6px; font-size: .8rem; line-height: 1.5; }
.guided-lesson .sim3d-data-panel .sim3d-label { color: #5d6d7e; font-weight: 600; }
.guided-lesson .sim3d-data-panel .sim3d-val { font-variant-numeric: tabular-nums; font-weight: 700; color: #1f2d3d; }
.guided-lesson .sim3d-data-panel .data-row { gap: 8px; }
.guided-lesson .sim3d-data-panel.minimized { min-height: 26px; }
.guided-lesson .lesson-graph-strip { order: 3; }
.guided-visual-note { font-size: .8rem; line-height: 1.4; color: #4c6073; margin: 9px 0; }
.lesson-transport { padding: 10px 12px; border: 1px solid #d4dee8; border-radius: 8px; background: #fff; }
.lesson-transport[hidden] { display: none; }
.lesson-playback-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lesson-playback-row button { padding: 7px 10px; border: 1px solid #c6d3e0; border-radius: 6px; background: #f2f6fb; color: #25466e; cursor: pointer; font: inherit; font-size: .85rem; }
.lesson-playback-row button:disabled { opacity: .45; cursor: default; }
.lesson-clock { margin-left: auto; font: .8rem ui-monospace, monospace; color: #34495e; }
.lesson-time-label { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .75rem; color: #52667c; }
.lesson-time { flex: 1; min-width: 70px; accent-color: #2e6bb1; }
.lesson-time-label[hidden], .lesson-clock[hidden] { display: none; }
.guided-lesson .focus-toggle-btn { display: none; }
@media (max-width: 900px) {
  .guided-lesson-body { grid-template-columns: 1fr; gap: 18px; }
  .guided-lesson-visual { position: static; }
  body.has-guided-lesson > .container { padding: 0 12px; }
  .guided-problem.guided-lesson { padding: 14px; margin: 12px auto; }
}
@media (max-width: 480px) {
  body.has-guided-lesson > .container { padding: 0 6px; }
  .guided-problem.guided-lesson { padding: 12px; }
  .guided-lesson .guided-title { font-size: 1.1rem; }
  .guided-lesson .guided-progress { white-space: nowrap; font-size: .75rem; }
  .lesson-playback-row button { min-height: 40px; }
  .lesson-time-label { flex-wrap: wrap; }
  .lesson-time { min-height: 32px; }
}
.guided-problem .worked-values { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ccd8e5; }
.guided-problem .worked-values ul { margin: 8px 0; padding-left: 22px; }
.guided-problem .worked-values p { margin: 8px 0; }
.guided-problem .use-worked-values { padding: 8px 12px; border: 1px solid #8aa8c5; border-radius: 6px; background: #fff; color: #183d61; font: inherit; cursor: pointer; }