/* Keep the desktop classroom inside the browser window at normal zoom.
   Narrow or short windows retain the vertically scrolling layout. */
@media (min-width: 1181px) and (min-height: 640px) {
  body {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    flex: none;
    width: 100%;
    height: 50px;
    min-height: 50px;
    padding-block: 3px;
  }
  .brand { font-size: 25px; }
  .brand > span { display: flex; align-items: baseline; gap: 12px; }
  .brand small { margin: 0; font-size: 8px; }
  .search-trigger { padding-block: 8px; }

  .workspace {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    margin-block: 0;
    padding-block: 28px 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    row-gap: 0;
  }
  .lesson-area {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px 24px;
  }
  .lesson-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    padding-bottom: 10px;
    gap: 18px;
  }
  #lesson-title { font-size: clamp(29px, 2.4vw, 38px); }
  .forest-reading-grid { display: contents; }
  .forest-watch {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .player-shell {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .video-stage { flex: 1 1 auto; min-height: 0; }
  .player-controls { flex: none; }
  .player-message { flex: none; margin: 0; max-height: 48px; overflow-y: auto; }
  #mobile-outline-slot { display: none; }
  .chapter-navigation {
    flex: none;
    margin-top: 4px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .chapter-heading { margin-bottom: 7px; }
  .chapter-heading button { height: 30px; }
  .chapter-rail { padding-bottom: 4px; margin-bottom: 0; }
  .chapter-card { min-height: 64px; }

  .lesson-details {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    height: var(--lesson-notes-height, 100%);
    max-height: 100%;
    align-self: start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .lesson-details .tabs { flex: none; }
  .lesson-details > [role='tabpanel'] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .lesson-details > [role='tabpanel']::-webkit-scrollbar { display: none; }
  .lesson-details .transcript { max-height: none; overflow: visible; padding-right: 0; }

  .workspace > .course-outline { min-height: 0; height: var(--course-outline-height, 100%); max-height: 100%; align-self: start; contain: none; padding-top: 16px; }
  .outline-header { padding-bottom: 12px; }
  .outline-header h2 { font-size: 27px; margin-block: 5px 7px; }
  .outline-header p { font-size: 12px; }
  .workspace > .course-outline #lesson-list { overflow-y: auto; }
  .course-group summary { min-height: 58px; padding-block: 10px; }
  .course-group ol { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .course-group ol::-webkit-scrollbar { display: none; }
  .workspace > .course-outline .outline-foot { margin-top: 8px; padding-block: 10px; }
}

@media (min-width: 1181px) and (max-width: 1360px) and (min-height: 640px) {
  .player-controls { gap: 4px; padding-inline: 6px; }
}