/* The lecture workspace takes the available viewport; its lists scroll independently. */
.diagram-overview,.diagram-expand-label{display:none}
@media screen and (min-width:621px) and (max-height:800px){
  .lecture-page .chalk-stage .diagram:has(.diagram-overview){height:auto}
  .lecture-page .chalk-stage .diagram-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
  .lecture-page .diagram-overview>div{border:1px solid var(--line);border-radius:6px;padding:6px;background:#fff}
  .lecture-page .diagram-overview strong{font-size:calc(10px * var(--study-text-scale, 1));line-height:1.5}
  .lecture-page .diagram-overview p{font-size:calc(10px * var(--study-text-scale, 1));line-height:1.6;margin-top:3px}
  .lecture-page .chalk-stage .diagram:has(.diagram-overview) .diagram-image{flex:none;min-height:24px;padding:2px 6px;font-size:calc(10px * var(--study-text-scale, 1))}
  .lecture-page .chalk-stage .diagram:has(.diagram-overview) img,.lecture-page .diagram:has(.diagram-overview) .diagram-caption{display:none}
  .lecture-page .diagram-expand-label{display:block}
}
@media screen{
  html:has(.listening-main),body:has(.listening-main){height:100%;min-height:0;overflow:hidden}
  .layout:has(.listening-main)>.sidebar{overflow:hidden}
  .workspace:has(.listening-main)>.footer{display:none}
  .main.listening-main{height:calc(100dvh - 66px);max-width:none;padding:12px 22px;min-height:0;display:flex}
  .listen-wrap.lecture-page{width:100%;height:100%;min-height:0;display:flex;flex-direction:column}
  .lecture-page .page-head{flex:none;min-height:38px;margin:0 0 9px;gap:12px}
  .lecture-page .page-head h1{font-size:calc(20px * var(--study-text-scale, 1));line-height:1.4}
  .lecture-page .page-head p{display:none}
  .lecture-head-actions{display:flex;gap:8px}
  .lecture-head-actions .button{min-height:34px;padding:6px 10px;font-size:calc(11px * var(--study-text-scale, 1))}
  .lecture-head-actions svg{width:15px;height:15px}
  .lecture-page>.keyboard-hints{display:none}
  .lecture-page .lecture-layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}
  .lecture-page .lecture-view{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;align-content:stretch}
  .lecture-page .lecture-status{min-height:18px;line-height:18px;font-size:calc(10px * var(--study-text-scale, 1));margin:0 0 5px}
  .lecture-page .listen-deck{height:100%;min-height:0;overflow:hidden}
  .lecture-page .listen-card{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden}
  .lecture-page .listen-card[hidden]{display:none}
  .lecture-page .video-heading{min-height:41px;padding:6px 15px;display:block}
  .lecture-page .video-heading h2{font-size:calc(17px * var(--study-text-scale, 1));line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lecture-page .video-heading .listen-label,.lecture-page .dialogue-badge{display:none}
  .lecture-page .chalk-stage{height:auto;min-height:0;flex:none;overflow:hidden}
  .lecture-page .board-topline{top:8px;left:13px;right:13px;font-size:calc(8px * var(--study-text-scale, 1))}
  .lecture-page .chalk-stage .listen-diagram{inset:28px clamp(86px,17%,145px) 12px;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .lecture-page .chalk-stage .diagram{width:100%;max-height:100%;padding:12px;margin:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:0 1 auto}
  .lecture-page .chalk-stage .diagram figcaption{font-size:calc(12px * var(--study-text-scale, 1));line-height:1.6;margin-bottom:10px}
  .lecture-page .chalk-stage .diagram-node{padding:10px}
  .lecture-page .chalk-stage .diagram-node strong{font-size:calc(11px * var(--study-text-scale, 1))}
  .lecture-page .chalk-stage .diagram-node p,.lecture-page .chalk-stage .diagram-caption{font-size:calc(10px * var(--study-text-scale, 1));line-height:1.7}
  .lecture-page .chalk-stage .diagram:has(.diagram-image){height:100%;display:flex;flex-direction:column}
  .lecture-page .chalk-stage .diagram-image{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;overflow:hidden}
  .lecture-page .chalk-stage .diagram img{width:100%;height:100%;max-height:100%;object-fit:contain}
  .lecture-page .stage-character{width:clamp(78px,16cqi,140px);height:min(160px,65%);bottom:4px}
  .lecture-page .stage-character.teacher{left:5px}
  .lecture-page .stage-character.student{right:5px}

  .lecture-page .listen-key-points{padding:12px;max-height:100%;overflow:auto}
  .lecture-page .listen-key-points ul{font-size:calc(14px * var(--study-text-scale, 1));gap:9px}
  .lecture-page .listen-caption{height:clamp(78px,12dvh,108px);min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px 15px}
  .lecture-page .caption-role{font-size:calc(10px * var(--study-text-scale, 1));line-height:1.4;margin-bottom:4px}
  .lecture-page .listen-caption p{font-size:calc(16px * var(--study-text-scale, 1));line-height:1.7}
  .lecture-page .video-card-footer{min-height:27px;padding:4px 14px;gap:12px}
  .lecture-page .video-card-footer .reading-link{font-size:calc(10px * var(--study-text-scale, 1));white-space:nowrap}
  .lecture-page .lecture-console{padding:10px 14px 11px}
  .lecture-page .lecture-console .audio-timeline{margin-bottom:7px;min-height:12px}
  .lecture-page .lecture-console .listen-controls{flex-wrap:nowrap}
  .lecture-page .lecture-neighbors{margin:8px 0 5px}
  .lecture-page .lecture-neighbors button{min-height:55px;padding:8px 12px}
  .lecture-page .lecture-neighbors strong{-webkit-line-clamp:1;font-size:calc(11px * var(--study-text-scale, 1));margin-top:2px}
  .lecture-page .narration-credit{margin:4px 1px 0;font-size:calc(9px * var(--study-text-scale, 1));line-height:1.6;gap:1px 12px}
  .lecture-page .lecture-layout>.lecture-catalog{display:none;position:static;height:100%;min-height:0;overflow:hidden}
  .lecture-page .lecture-catalog-head{flex:none;padding:16px 16px 12px}
  .lecture-page .lecture-filters{flex:none;padding:0 16px 12px;gap:8px}
  .lecture-page .lecture-catalog #lecture-list{min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1}

}
/* Settings and transcripts open above the player without reducing its height. */
.lecture-page .lecture-panel-dialog{
  position:fixed;inset:0;margin:auto;width:min(540px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);
  padding:22px;border:1px solid #d9e2d2;border-radius:14px;background:#f8faf4;color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 18px 70px #0c231e33;
}
.lecture-panel-dialog::backdrop{background:#142b2366;backdrop-filter:blur(3px)}
.lecture-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.lecture-panel-head h2{font-size:calc(16px * var(--study-text-scale, 1));line-height:1.6}
.lecture-panel-head .icon-button{width:34px;min-height:34px;background:transparent;border:0}
.lecture-page .lecture-panel-dialog.lecture-notes{width:min(700px,calc(100vw - 32px));background:#fff}
.lecture-panel-dialog.lecture-notes>p{font-size:calc(11px * var(--study-text-scale, 1));margin-bottom:12px}

@media(max-width:620px){
  .main.listening-main{height:calc(100dvh - 60px - 64px - env(safe-area-inset-bottom));padding:8px 10px}
  .lecture-page .page-head{min-height:34px;margin-bottom:5px;gap:8px}
  .lecture-page .page-head h1{font-size:calc(17px * var(--study-text-scale, 1));white-space:nowrap}
  .lecture-head-actions{gap:6px}
  .lecture-head-actions .button{font-size:calc(10px * var(--study-text-scale, 1));padding:5px 8px;min-height:32px}
  .lecture-page .video-heading{min-height:34px;padding:5px 11px}
  .lecture-page .video-heading h2{font-size:calc(14px * var(--study-text-scale, 1))}
  .lecture-page .chalk-stage .listen-diagram{inset:22px 69px 8px}
  .lecture-page .chalk-stage .diagram{padding:9px}
  .lecture-page .chalk-stage .diagram figcaption{font-size:calc(10px * var(--study-text-scale, 1));margin-bottom:8px}
  .lecture-page .chalk-stage .diagram-nodes.comparison{grid-template-columns:1fr;gap:7px}
  .lecture-page .chalk-stage .diagram-node{padding:8px}
  .lecture-page .stage-character{width:65px;height:min(104px,65%)}

  .lecture-page .board-topline{font-size:calc(7px * var(--study-text-scale, 1));top:6px;left:8px;right:8px}
  .lecture-page .board-topline>span:last-child{display:none}
  .lecture-page .listen-caption{height:clamp(84px,13dvh,110px);padding:8px 11px}
  .lecture-page .listen-caption p{font-size:calc(14px * var(--study-text-scale, 1));line-height:1.7}
  .lecture-page .video-card-footer{min-height:23px;padding:3px 10px}
  .lecture-page .video-card-footer .reading-link{font-size:calc(9px * var(--study-text-scale, 1))}
  .lecture-page .lecture-console{padding:8px 10px}
  .lecture-page .lecture-console .audio-timeline{margin-bottom:5px}
  .lecture-page .lecture-console .audio-timeline #caption-count{font-size:calc(9px * var(--study-text-scale, 1));flex:none}
  .lecture-page .lecture-console .listen-controls{display:flex;flex:1;gap:7px;min-width:0}
  .lecture-page .lecture-console .lecture-audio-button{flex:0 0 38px;width:38px;min-height:38px;padding:8px}
  .lecture-page .lecture-console .lecture-audio-button span{display:none}
  .lecture-page .lecture-console .caption-next-button{flex:1;width:auto;min-height:38px;font-size:calc(11px * var(--study-text-scale, 1))}
  .lecture-page .lecture-console .lecture-tool{min-height:30px;min-width:34px;padding:4px 7px}
  .lecture-transport{display:flex;gap:7px}
  .lecture-utility-actions{flex:none}
  .lecture-page .lecture-console #lecture-settings-toggle>span{display:none}
  .lecture-page .lecture-neighbors button{min-height:48px;padding:6px 9px;gap:6px}
  .lecture-page .lecture-neighbors small{font-size:calc(9px * var(--study-text-scale, 1))}
  .lecture-page .lecture-neighbors strong{font-size:calc(10px * var(--study-text-scale, 1))}
  .lecture-page .narration-credit{font-size:calc(8px * var(--study-text-scale, 1));gap:0 8px}
  .lecture-page .lecture-panel-dialog{padding:17px;max-height:calc(100dvh - 24px)}

}
@media(max-height:560px) and (min-width:621px){
  .main.listening-main{padding-block:7px}
  .lecture-page .page-head{min-height:28px;margin-bottom:5px}
  .lecture-page .page-head h1{font-size:calc(17px * var(--study-text-scale, 1))}
  .lecture-page .video-heading{min-height:31px;padding-block:3px}
  .lecture-page .video-heading h2{font-size:calc(14px * var(--study-text-scale, 1))}
  .lecture-page .listen-card{grid-template-columns:minmax(0,1fr) 225px;grid-template-rows:auto minmax(0,1fr) auto}
  .lecture-page .video-heading{grid-column:1/-1}
  .lecture-page .chalk-stage{grid-column:1;grid-row:2/4}
  .lecture-page .listen-caption{grid-column:2;grid-row:2;height:100%;border-left-width:3px}
  .lecture-page .video-card-footer{grid-column:2;grid-row:3}
  .lecture-page .video-card-footer .caption-steps{display:none}
  .lecture-page .chalk-stage .listen-diagram{inset:24px 74px 8px}
  .lecture-page .stage-character{width:70px;height:min(95px,70%)}
  .lecture-page .lecture-neighbors button{min-height:42px;padding:4px 10px}
  .lecture-page .lecture-console{padding-block:6px}
  .lecture-page .lecture-console .audio-timeline{margin-bottom:4px}
  .lecture-page .narration-credit{font-size:calc(8px * var(--study-text-scale, 1))}
}
@media(prefers-color-scheme:dark){
  .lecture-page .lecture-panel-dialog,.lecture-page .lecture-panel-dialog.lecture-notes{background:var(--surface);border-color:var(--line);color:var(--ink)}
  .lecture-page .video-card-footer{background:var(--surface);border-top:1px solid var(--line)}
  .lecture-page .listen-caption{background:#18241e;border-left-color:#c984ae}
  .lecture-page .listen-caption p{color:var(--ink)}
  .lecture-page .caption-role{color:#dba0c4}
  .lecture-page .listen-caption.student-caption{background:#17261b;border-left-color:#84b850}
  .lecture-page .student-caption .caption-role{color:#9fd16b}
}