/* A phone in landscape has less height: keep the slide before the chat and
   compact its existing heading instead of spending two rows on the clock. */
@media screen and (orientation: landscape) and (max-height: 550px) and (max-width: 1100px) {
  .classroom-shell.classroom-student:has(.teaching-slide) > .classroom-topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 48px;
    grid-template-areas: "title clock exit"; gap: 8px; padding: 4px 8px;
  }
  .classroom-shell.classroom-student:has(.teaching-slide) > .classroom-topbar > div:first-child { grid-area: title; min-width: 0; }
  .classroom-shell.classroom-student:has(.teaching-slide) > .classroom-topbar > div:last-child { grid-area: exit; }
  .classroom-shell.classroom-student:has(.teaching-slide) .classroom-lesson-clock { grid-area: clock; gap: 8px; font-size: 12px; }
  .classroom-shell.classroom-student:has(.teaching-slide) .classroom-lesson-clock b { font-size: 20px; }
  .classroom-shell.classroom-student:has(.teaching-slide) .room-code { display: none; }
  .classroom-shell.classroom-student:has(.teaching-slide) > .classroom-topbar > div:last-child button { width: 48px; min-width: 48px; min-height: 48px; padding: 0; justify-content: center; font-size: 0; }
  .classroom-shell.classroom-student:has(.teaching-slide) > .classroom-main { padding: 6px; }
  .classroom-shell.classroom-student:has(.teaching-slide) .teaching-stage { padding: 4px; margin-bottom: 6px; }
  .classroom-shell.classroom-student:has(.teaching-slide) .teaching-stage > header h2 { display: none; }
  .classroom-shell.classroom-student:has(.teaching-slide) .teaching-stage:not(.teaching-paused) > header > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .classroom-shell.classroom-student:has(.teaching-slide):has(> .classroom-topbar > .classroom-lesson-clock) .teaching-stage > header > .lesson-clock { display: none; }
  .classroom-shell.classroom-student:has(.teaching-slide) .teaching-slide { min-height: 0; max-height: max(100px, calc(var(--classroom-viewport-height, 100dvh) - 88px)); object-fit: contain; }
}