/* Shared mobile-first guardrails for every student and teacher-facing page. */
@media (max-width: 600px) {
  body { overflow-x: hidden; }
  header { padding: 2rem 1rem 1.5rem; }
  header h1 { font-size: clamp(2rem, 11vw, 3.2rem); line-height: 1.05; }
  main { width: min(100% - 1rem, 920px); margin: 1rem auto 3rem; }
  .card { border-radius: 14px; padding: 1rem; }
  .controls { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .controls button, .controls .button-link { width: 100%; text-align: center; }
  button, .button-link { min-height: 48px; }
  audio { max-width: 100%; min-width: 0; }
  .metadata dl { grid-template-columns: 1fr; }
  .completion h2 { font-size: 2rem; }
}

@media (max-width: 390px) {
  .review-overview dd { overflow-wrap: anywhere; }
  .timeline article { grid-template-columns: 1fr; }
}