/* One persistent video element across all responsive layouts. */
body[data-screen="watch"] main { max-width: 1320px; }
.watch-workspace { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr); gap:20px; align-items:start; margin:18px 0; scroll-margin-top:88px; }
.watch-workspace > * { min-width:0; }
.watch-workspace .watch-stage { position:sticky; top:88px; border-radius:16px; }
.watch-workspace .watch-video { width:100%; aspect-ratio:16/9; object-fit:contain; max-height:70svh; border-radius:0; }
.watch-question-panel { background:#f8fbfa; border:1px solid #d8e5e2; border-radius:16px; box-shadow:0 8px 28px #183f3b0d; overflow:hidden; }
.watch-question-tools { display:flex; gap:6px; align-items:center; padding:10px 12px; border-bottom:1px solid #d8e5e2; }
.watch-question-tools[hidden], .watch-question-idle[hidden] { display:none; }
.watch-question-tools strong { margin-right:auto; font-size:12px; color:#315c5b; }
body[data-screen="watch"] .watch-workspace .watch-tool { min-height:44px; padding:8px 10px; margin:0; font:inherit; font-size:12px; border:1px solid #ccdeda; border-radius:10px; color:#254b4b; background:white; white-space:nowrap; }
.watch-tool:focus-visible, .watch-workspace .choice:focus-visible { outline:3px solid #b87914; outline-offset:-3px; }
.watch-question-idle { padding:24px; margin:0; color:#5e7371; font-size:14px; line-height:1.8; }
.watch-workspace .watch-q { margin:0; padding:18px; border:0; border-radius:0; box-shadow:none; background:transparent; overflow-wrap:anywhere; }
.watch-workspace .watch-q[hidden], .watch-workspace.question-collapsed .watch-q { display:none; }
.watch-workspace .watch-q .choices { grid-template-columns:1fr; gap:8px; }
.watch-workspace .choice { min-height:48px; text-align:left; padding:12px 14px; line-height:1.5; font-size:16px; white-space:normal; }
.watch-workspace .watch-q textarea { box-sizing:border-box; max-width:100%; min-height:130px; font-size:16px!important; }
.watch-workspace .watch-q-body { font-size:17px; }
.watch-q-remaining { width:fit-content; margin:0 0 10px; padding:4px 9px; border-radius:8px; background:#e8f3f0; color:#205a57; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.watch-home-link { margin:0 0 8px; padding:4px 0; min-height:44px; border:0; background:transparent; color:#245e5b; font-size:13px; font-weight:700; }
.watch-inline-note { margin:8px 0 16px; font-size:12px; color:var(--ink-soft); }
@media(max-width:900px) and (min-height:501px) {
  .watch-workspace { display:block; }
  .watch-workspace .watch-stage { z-index:2; top:88px; }
  .watch-workspace .watch-video { max-height:65svh; }
  .watch-question-panel { position:relative; z-index:3; margin:12px 0 0; }
  .watch-workspace.has-question .watch-stage { position:relative; top:auto; }
}
@media(max-width:600px) {
  .watch-workspace { display:block; margin:12px -10px; scroll-margin-top:76px; }
  .watch-workspace .watch-stage { z-index:2; top:76px; border-radius:12px; }
  .watch-workspace .watch-video { max-height:65svh; }
  .watch-question-panel { position:relative; z-index:3; margin:12px 0 0; }
  .watch-workspace .watch-q { padding:14px; max-height:none; overflow:visible; }
  .watch-question-tools { padding:7px 10px; }
  .watch-workspace .watch-q-body { font-size:16px; line-height:1.65; }
  .watch-workspace .choice { padding:12px 14px; font-size:16px; }
}
@media(max-height:500px) and (min-width:601px) {
  .watch-workspace { grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr); gap:12px; }
  .watch-workspace .watch-video { max-height:calc(100svh - 100px); }
  .watch-workspace .watch-q { max-height:none; overflow:visible; }
}
@media(prefers-reduced-motion:reduce) { .watch-workspace * { scroll-behavior:auto!important; } }

/* Keep every answer reachable using page scroll, including a reduced keyboard viewport. */
.watch-question-panel { scroll-margin-top:calc(var(--app-header-height, 0px) + 12px); }
body[data-student-watch="true"] .watch-question-panel { scroll-margin-top:8px; }
.watch-question-tools { flex-wrap:wrap; }
.watch-question-tools strong { min-width:0; overflow-wrap:anywhere; }
.watch-workspace .watch-q-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.watch-workspace .watch-q input, .watch-workspace .watch-q textarea,
.watch-workspace .watch-q button, .watch-workspace .watch-q form { min-width:0; max-width:100%; box-sizing:border-box; }
.watch-workspace .watch-q button { overflow-wrap:anywhere; white-space:normal; }
@media(max-width:900px), (max-height:500px) {
  .watch-workspace.has-question .watch-stage { position:relative; top:auto; }
}

.watch-question-announcement { font-weight:700; color:#205a57; margin:8px 0; }
.student-shortcut-dialog { box-sizing:border-box; width:min(480px,calc(100vw - 24px)); max-height:85svh; overflow:auto; overflow-wrap:anywhere; line-height:1.8; }
.student-shortcut-dialog svg { vertical-align:middle; }
.monitor-answer-result { display:block; margin:8px 0; }

/* Inline small player: reuse the same video node and leave the answer in normal page flow. */
body[data-screen="watch"] .watch-workspace.video-floating .watch-stage { position:sticky; top:calc(var(--app-header-height, 0px) + 48px); z-index:4; width:min(320px,100%); justify-self:start; }
body[data-screen="watch"] .watch-workspace.video-floating .watch-video { max-height:25svh; width:100%; object-fit:contain; }
body[data-student-watch="true"] .watch-workspace.video-floating .watch-stage { top:48px; }
.watch-workspace.video-floating .watch-question-panel { scroll-margin-top:calc(25svh + var(--app-header-height,0px) + 60px); }
.watch-workspace.video-floating input,.watch-workspace.video-floating textarea,.watch-workspace.video-floating .choice { scroll-margin-top:calc(25svh + 60px); }
@media(max-width:900px), (max-height:500px){
 .watch-workspace.video-floating { display:block; }
 .watch-workspace.video-floating .watch-stage { margin-bottom:12px; }
}
.watch-attendance-notice { font-size:13px; background:#fff4cc; padding:8px; }
/* Override the compact question rule even when classroom-ux.css is loaded later. */
body[data-student-watch="true"][data-screen="watch"] .watch-workspace.video-floating.has-question .watch-stage { position:sticky; top:48px; }
/* Automatic mobile following; no manual floating/collapse controls. */
.watch-follow-sentinel{display:block;height:1px;width:1px;grid-column:1/-1}
body[data-screen="watch"] .watch-workspace.auto-follow{display:block}
body[data-screen="watch"] .watch-workspace.auto-follow .watch-stage{position:sticky;top:48px;z-index:4}
body[data-screen="watch"] .watch-workspace.auto-follow.video-floating .watch-stage{width:min(320px,100%);margin-bottom:12px}
.watch-resize-frame{position:relative;width:100%;min-width:0}
.watch-resize-frame>.watch-question{transform-origin:left bottom}
.watch-resize-frame>[id]{transform-origin:left bottom;position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box}
.watch-resize-handle{position:absolute;z-index:3;min-width:44px;min-height:44px;touch-action:none;border:2px solid #087e84!important;border-radius:10px;background:#fff!important;color:#075e65!important;cursor:nesw-resize;font-size:22px!important}
.watch-resize-handle[hidden]{display:none!important}