/* Compatibility-only rules. These preserve the legacy Canvas runtime while
   giving its DOM loading state a stable width in the Next.js shell. */
/* Student loading: presentation only. Keep streaming nodes for the host/SDK. */
.legacy-runtime .canvas-shell:has(> #stageLoadingOverlay.is-automatic-question-progress:not([hidden])) #autoFollowupSequence {
  position: relative;
  z-index: 101;
  pointer-events: auto;
  background: var(--surface, #fff);
}

/* The lesson scrubber is rendered inside the left canvas column. */
body:not(.mobile-preview-mode) .legacy-runtime.lesson-page .canvas-stage-panel > .timeline {
  display: flex !important;
}

.legacy-runtime #stageLoadingOverlay[data-initial-loading="true"] {
  position: fixed !important;
  inset: 64px 0 0 !important;
  z-index: 100;
  border-radius: 0;
  background: var(--bg, #faf9fd);
  backdrop-filter: none;
  pointer-events: auto;
}
.legacy-runtime .stage-loading-overlay.student-loading {
  background: color-mix(in srgb, var(--bg, #f7f8fb) 96%, transparent);
  pointer-events: none;
  overflow-y: auto;
  padding: 24px 12px;
}
.legacy-runtime #stageLoadingOverlay.student-loading .loading-card,
.legacy-runtime #stageLoadingOverlay.student-loading .loading-card.has-stream {
  width: min(420px, 100%);
  min-width: 0;
  max-height: none;
  border: 0;
  padding: 16px;
  gap: 14px;
  background: transparent;
  box-shadow: none;
  text-align: center;
  pointer-events: auto;
}
.legacy-runtime .student-loading #stageStreamingPanel,
.legacy-runtime .student-loading:not(.is-error) #stageLoadingDetail {
  display: none !important;
}
.legacy-runtime .student-loading #stageLoadingTitle {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
}
.legacy-runtime .student-loading #flywait-entry {
  width: auto !important;
  max-width: 100%;
  margin-top: 0 !important;
}
.loading-mascot { position: relative; width: clamp(170px, 32vh, 260px); aspect-ratio: 1; }
.loading-writing-sprite { position: absolute; inset: 5%; background-size: 200% 200%; background-repeat: no-repeat; background-position: 0 0; animation: student-write .56s steps(1, end) infinite; }
.loading-mascot-halo { position: absolute; inset: 14% 5% 4%; border-radius: 50%; background: color-mix(in srgb, var(--brand) 7%, transparent); }
.loading-spark { position: absolute; color: var(--brand); font: 500 22px/1 sans-serif; animation: student-spark 3s ease-in-out infinite; }
.loading-spark-one { left: 5%; top: 28%; }
.loading-spark-two { right: 1%; top: 16%; animation-delay: -.8s; }
.loading-spark-three { right: 0; top: 56%; animation-delay: -1.6s; }
.loading-beats { display: flex; gap: 9px; align-items: center; height: 12px; }
.loading-beats i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); animation: student-beat 1.8s ease-in-out infinite; }
.loading-beats i:nth-child(2) { animation-delay: .15s; }
.loading-beats i:nth-child(3) { animation-delay: .3s; }
.loading-beats i:nth-child(4) { animation-delay: .45s; }
.loading-beats i:nth-child(5) { animation-delay: .6s; }
.student-loading.is-error .loading-mascot,
.student-loading.is-error .loading-beats,
.student-loading.flywait-user-hold .loading-mascot,
.student-loading.flywait-user-hold .loading-beats { display: none; }
.legacy-runtime .student-loading.is-error #stageLoadingDetail { display: block; color: var(--danger, #b42318); }
@keyframes student-write {
  0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  75% { background-position: 100% 100%; }
}
@keyframes student-spark { 0%, 100% { opacity: .35; transform: translateY(3px); } 50% { opacity: .85; transform: translateY(-3px); } }
@keyframes student-beat { 0%, 70%, 100% { opacity: .25; transform: scale(.85); } 35% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .loading-writing-sprite, .loading-spark, .loading-beats i { animation: none; }
}
/* Entry mode hides lesson-only actions. Keep the signed-in learner's route to
   saved practice visible without restoring the redundant new-question button. */
body.question-entry-mode .legacy-runtime .practice-navigation-button {
  display: inline-flex !important;
}

.legacy-runtime .stage-loading-overlay .loading-card {
  display: flex;
  width: min(520px, calc(100% - 48px));
  min-width: min(360px, calc(100% - 48px));
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.legacy-runtime .stage-loading-overlay .loading-card.has-stream {
  width: min(720px, calc(100% - 48px));
}

.legacy-runtime .stage-loading-overlay .loading-card > strong,
.legacy-runtime .stage-loading-overlay .loading-card > span:not(.loading-spinner) {
  width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.legacy-runtime .stage-loading-overlay .loading-card > strong {
  font-size: 16px;
  line-height: 1.45;
}

.legacy-runtime .stage-loading-overlay .loading-card > span:not(.loading-spinner) {
  color: #60718b;
  font-size: 13px;
  line-height: 1.65;
}

.legacy-runtime .stage-loading-overlay .loading-stream-panel {
  width: 100%;
  align-self: stretch;
  text-align: left;
}

/* Long reasoning steps must remain readable in the host shell. The step card
   grows with projected text instead of silently cutting it at two lines. */
@media (min-width: 761px) {
  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel .lesson-context {
    max-height: none;
    overflow: visible;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel .lesson-context strong,
  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel .lesson-context p {
    display: block;
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-line-clamp: unset;
  }
}

@media (max-width: 560px) {
  .legacy-runtime .stage-loading-overlay .loading-card {
    min-width: 0;
    width: calc(100% - 32px);
  }

  .legacy-runtime .stage-loading-overlay .loading-card.has-stream {
    width: calc(100% - 20px);
  }

}

/* Mobile learning flow: keep the animation first, then surface the lesson and Q&A
   as readable, independently scrolled cards. These selectors intentionally leave
   the legacy renderer's IDs and canvas sizing contract untouched. */
@media (max-width: 760px) {
  body:not(.mobile-preview-mode) .legacy-runtime .app-shell {
    padding: 10px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .topbar {
    height: 54px;
    min-height: 54px;
    margin: -10px -10px 10px;
    padding: 0 12px;
    gap: 10px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .topbar .tagline,
  body:not(.mobile-preview-mode) .legacy-runtime .topbar .top-links > span {
    display: none;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .topbar .top-links {
    display: flex;
    margin-left: auto;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .workspace {
    display: flex;
    gap: 12px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 14px 12px 16px;
    overflow: visible;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel .panel-heading {
    padding-bottom: 8px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel > .stage-speed {
    position: static;
    align-self: flex-end;
    margin: 0 0 12px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .lesson-context {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
    padding: 11px 12px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .lesson-context p {
    white-space: normal;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel .lesson-context .step-actions {
    position: static;
    display: flex;
    justify-content: flex-end;
    transform: none;
  }

  body:not(.mobile-preview-mode) .legacy-runtime #stage {
    width: 100% !important;
    margin: 0;
    border-radius: 7px;
  }

  /* The runtime still updates this element internally, but learners do not need
     a separate scrubber below the animation. */
  body:not(.mobile-preview-mode) .legacy-runtime .timeline {
    display: none;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .learning-steps {
    margin-top: 14px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    display: block;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector > section {
    margin: 0 0 12px;
    border: 1px solid #dce5f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px #18376608;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector > .lesson-summary-section {
    min-height: 180px;
    overflow: visible;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector > .tutor-question-section {
    border-top: 1px solid #dce5f2;
    padding: 0;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .tutor-question-form {
    padding: 8px 10px 10px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .tutor-question-footer {
    gap: 6px;
  }
}

/* Tablet keeps the current one-surface lesson contract. The historical split
   workspace reserved a hidden inspector column and then subtracted another
   300px from the canvas shell, which could collapse the teaching canvas to 2px. */
@media (min-width: 761px) and (max-width: 1180px) {
  body:not(.mobile-preview-mode):not(.question-entry-mode) {
    height: 100dvh;
    overflow: hidden;
  }

  body:not(.mobile-preview-mode):not(.question-entry-mode) .legacy-runtime .app-shell {
    display: flex;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
  }

  body:not(.mobile-preview-mode):not(.question-entry-mode) .legacy-runtime .topbar {
    display: flex;
    flex-direction: row;
    height: 62px;
    min-height: 62px;
    flex: 0 0 62px;
    margin: -16px -18px 16px;
    padding: 0 20px;
    overflow: visible;
  }

  body:not(.mobile-preview-mode):not(.question-entry-mode) .legacy-runtime .workspace {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel,
  body:not(.mobile-preview-mode) .legacy-runtime .inspector {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel {
    display: flex;
    width: 100%;
    padding: 16px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .canvas-shell {
    width: min(100%, 1080px);
    margin-right: auto;
    margin-left: auto;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel > .stage-speed {
    top: 15px;
    right: 16px;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .stage-panel #stage,
  body:not(.mobile-preview-mode) .legacy-runtime #stage {
    width: 100% !important;
    min-height: 0 !important;
    height: auto;
    max-height: calc(100dvh - 280px);
    margin: 0;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .timeline {
    display: none;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector > section {
    margin: 0;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector > .question-context {
    flex: 0 0 auto;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector > .lesson-summary-section {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body:not(.mobile-preview-mode) .legacy-runtime .inspector > .tutor-question-section {
    flex: 0 0 auto;
    margin-top: 8px;
    border-top: 1px solid #e8edf5;
    padding-top: 8px;
  }
}