.lesson-stage-mode-status:not([hidden]) {
  margin: 8px 0;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--brand-soft, #edf3fc);
  color: var(--muted, #52647c);
  font-size: 14px;
  line-height: 1.6;
}

/* Only the content INSIDE the left stage changes. Never resize the outer
   grid, board, playback controls or follow-up position for reading mode. */
.canvas-stage-panel[data-analysis-mode="reading"] > .canvas-viewport {
  visibility: hidden;
  pointer-events: none;
}
.canvas-stage-panel[data-analysis-mode="reading"] > .canvas-zoom-controls {
  display: none !important;
}
.lesson-analysis-stage {
  container: analysis-card / inline-size;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 3vw, 48px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--canvas-bg, #f8fbff);
  color: var(--ink, #172033);
  overflow-wrap: anywhere;
  text-align: left;
}
.lesson-analysis-stage[hidden] { display: none !important; }
.lesson-analysis-stage .lesson-analysis-sheet {
  display: grid;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: min(100%, 760px);
  min-width: 0;
  gap: 28px;
  margin: auto;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--canvas-grid, #d8e3f1);
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink, #172033) 5%, transparent);
}
.lesson-analysis-stage .lesson-analysis-heading {
  display: grid;
  min-width: 0;
  gap: 10px;
}
.lesson-analysis-stage .lesson-analysis-copy {
  display: grid;
  min-width: 0;
  gap: 24px;
}
.lesson-analysis-stage .lesson-analysis-sheet[data-companion] {
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: center;
  --analysis-cue: var(--teaching-observation, #0e7490);
  --analysis-cue-soft: var(--teaching-observation-soft, #ecfeff);
}
.lesson-analysis-stage .lesson-analysis-sheet[data-companion="think"] {
  --analysis-cue: var(--teaching-thought, #7e22ce);
  --analysis-cue-soft: var(--teaching-thought-soft, #faf5ff);
}
.lesson-analysis-stage .lesson-analysis-sheet[data-companion="result"] {
  --analysis-cue: var(--teaching-result, #15803d);
  --analysis-cue-soft: var(--teaching-result-soft, #f0fdf4);
}
.lesson-analysis-stage .lesson-analysis-companion {
  min-width: 0;
  width: 144px;
  height: 160px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  background: var(--analysis-cue-soft);
  pointer-events: none;
}
.lesson-analysis-stage .lesson-analysis-student {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.lesson-analysis-stage [data-companion] .lesson-analysis-eyebrow {
  color: var(--analysis-cue);
}
@container analysis-card (max-width: 560px) {
  .lesson-analysis-stage .lesson-analysis-sheet[data-companion] {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
  }
  .lesson-analysis-stage [data-companion] .lesson-analysis-copy { display: contents; }
  .lesson-analysis-stage .lesson-analysis-companion {
    width: 64px;
    height: 72px;
    border-radius: 14px;
  }
  .lesson-analysis-stage [data-companion] .lesson-analysis-context,
  .lesson-analysis-stage [data-companion] .lesson-analysis-current,
  .lesson-analysis-stage [data-companion] .lesson-analysis-narration { grid-column: 1 / -1; }
}
.lesson-analysis-stage .lesson-analysis-eyebrow {
  color: var(--muted, #667085);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.5;
}
.lesson-analysis-stage .lesson-analysis-title {
  margin: 0;
  color: var(--ink, #172033);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 650;
  line-height: 1.55;
}
.lesson-analysis-stage .lesson-analysis-context,
.lesson-analysis-stage .lesson-analysis-current {
  display: grid;
  min-width: 0;
  gap: 20px;
}
.lesson-analysis-stage .lesson-analysis-current {
  padding-top: 24px;
  border-top: 1px solid var(--canvas-grid, #d8e3f1);
}
.lesson-analysis-stage .lesson-analysis-context { gap: 12px; }
.lesson-analysis-stage .lesson-analysis-line {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.lesson-analysis-stage .lesson-analysis-line[data-kind="text"] {
  grid-template-columns: minmax(0, 1fr);
}
.lesson-analysis-stage .lesson-analysis-kind {
  display: grid;
  width: 28px;
  height: 28px;
  margin-top: 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--teaching-formula-soft, #eff6ff);
  color: var(--teaching-formula, #2563eb);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.lesson-analysis-stage .lesson-analysis-line[data-kind="result"] .lesson-analysis-kind {
  background: var(--teaching-result-soft, #f0fdf4);
  color: var(--teaching-result, #15803d);
}
.lesson-analysis-stage .lesson-analysis-text,
.lesson-analysis-stage .lesson-analysis-narration {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--ink, #172033);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 550;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lesson-analysis-stage .lesson-analysis-line[data-kind="result"] .lesson-analysis-text {
  color: var(--teaching-result, #15803d);
}
.lesson-analysis-stage .lesson-analysis-context .lesson-analysis-text {
  color: var(--muted, #667085);
  font-size: 18px;
  font-weight: 450;
}
/* Oversized expressions scroll inside their typeset span; long prose wraps
   and scrolls locally, without widening the stage or shrinking the board. */
.lesson-analysis-stage .math-typeset {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
  padding-block: .26em;
  overscroll-behavior-x: contain;
}
.lesson-analysis-stage .math-typeset math { font-size: 1em; }
@media (max-width: 520px) {
  .lesson-analysis-stage { padding: 14px; }
  .lesson-analysis-stage .lesson-analysis-sheet {
    padding: 22px 18px;
    gap: 20px;
    border-radius: 12px;
  }
  .lesson-analysis-stage .lesson-analysis-line {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
  }
  .lesson-analysis-stage .lesson-analysis-kind {
    width: 24px;
    height: 24px;
    margin-top: 8px;
  }
  .lesson-analysis-stage .lesson-analysis-text { font-size: 24px; }
}