/* Shared academic shell for every scientific simulation route. */
.question-nav-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.question-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 0;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.question-back:hover,
.question-back:focus-visible {
  color: var(--ink);
}

.question-back:focus-visible {
  outline: 1px solid #c89b3c;
  outline-offset: 6px;
}

.question-back-arrow {
  color: #c89b3c;
  font-family: "DM Sans", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.wrap > header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 30px;
}

.wrap > header .sub {
  max-width: 72ch;
}

.layout {
  gap: 20px !important;
  margin-top: 28px !important;
}

.side {
  gap: 14px !important;
}

.stage,
.controls,
.legend,
.factcard,
.step,
.result,
.panel {
  border-color: var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.controls,
.legend,
.factcard,
.step,
.result {
  background: var(--panel) !important;
}

.stage canvas,
canvas {
  border-radius: 5px;
}

.concept {
  margin-top: 54px !important;
}

footer {
  border-top: 1px solid var(--line);
  margin-top: 50px !important;
  padding-top: 22px !important;
}

.stage.compact-stage canvas,
.stage.compact-stage canvas#scene {
  height: 350px !important;
}

@media (max-width: 900px) {
  .question-shell,
  .wrap {
    max-width: 760px;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stage canvas,
  canvas#scene {
    height: clamp(320px, 68vw, 500px) !important;
  }

  .panel canvas {
    height: clamp(270px, 55vw, 380px) !important;
  }

  .stage.compact-stage canvas,
  .stage.compact-stage canvas#scene {
    height: clamp(300px, 54vw, 350px) !important;
  }
}

@media (max-width: 640px) {
  .question-shell {
    padding: 0 16px;
  }

  .question-nav {
    min-height: 58px;
  }

  .question-nav-left {
    gap: 12px;
  }

  .question-brand {
    display: none;
  }

  .question-back {
    font-size: 10px;
  }

  .question-nav-actions {
    gap: 8px;
  }

  .wrap {
    padding: 34px 16px 48px;
  }

  h1 {
    font-size: clamp(29px, 9vw, 40px) !important;
  }

  .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }

  .sub {
    font-size: 16px !important;
  }

  .controls,
  .legend,
  .factcard,
  .result,
  .step {
    padding: 16px !important;
  }

  .stage canvas,
  canvas#scene {
    height: clamp(320px, 108vw, 440px) !important;
  }

  .panel {
    padding: 10px !important;
  }

  .panel canvas {
    height: 280px !important;
  }

  .stage.compact-stage canvas,
  .stage.compact-stage canvas#scene {
    height: clamp(290px, 74vw, 340px) !important;
  }

  .btns {
    flex-wrap: wrap;
  }

  button {
    max-width: 100%;
  }

  .concept {
    margin-top: 42px !important;
  }
}