/* OLS Live 3D card for the projector (teacher dashboard only; the revision pages are untouched).
   Two columns that always fit the screen, in the window and in full screen (Mo, 19 Oct 2026):
   the 3D stage fills the left column; the step buttons, view buttons, explanation, facts and legend sit in
   the right column. Every card has the same parts (section > *-head, *-stage, *-controls, *-info), so this
   is layout only: the card's own script and markup are unchanged. Narrow screens stack as before. */
body.ols-live-model-body { background: #fff; margin: 0; overflow: hidden; }
.ols-live-model { height: 100vh; display: flex; flex-direction: column; }
.ols-live-mbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 18px; background: #1C244B; color: #fff; }
.ols-live-mbar .ols-live-brand-mark { background: #fff; color: #1C244B; }
.ols-live-mbar .ols-live-brand-name { color: #9fbcff; }
.ols-live-mbar .ols-live-btn { padding: .45em .9em; }
.ols-live-mtitle { flex: 1; min-width: 0; font-weight: 600; font-size: clamp(15px, 1.4vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ols-live-mstage { flex: 1; min-height: 0; padding: 12px 14px 8px; box-sizing: border-box; display: flex; flex-direction: column; }
.ols-live-mstage > section {
  max-width: none !important; width: 100% !important; flex: 1 1 auto; min-height: 0; height: auto !important; margin: 0 !important; box-shadow: none !important;
  border: 0 !important; padding: 0 !important; background: transparent !important; box-sizing: border-box;
  display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 480px); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "stage controls" "stage info"; column-gap: 16px; row-gap: 12px;
}
.ols-live-mstage > section > [class$="-head"] { display: none !important; }
.ols-live-mstage > section > [class$="-stage"] { grid-area: stage; height: 100% !important; min-height: 0 !important; margin: 0 !important; }
.ols-live-mstage > section > [class$="-controls"] { grid-area: controls; margin: 0 !important; padding: 0 !important; min-width: 0; }
.ols-live-mstage > section > [class$="-info"] { grid-area: info; margin: 0 !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
/* Film cards: the chapter chips sit in the info row as a compact block, top aligned, never stretched. */
.ols-live-mstage > section > [class$="-chips"] { grid-area: info; align-self: start; align-content: flex-start; margin: 0 !important; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.ols-live-mstage > section > [class$="-chips"] button { font-size: clamp(13px, 1vw, 17px) !important; padding: .4em .85em !important; height: auto !important; }
.ols-live-mstage > p[class^="ols-cc-"] { flex: none; margin: 6px 0 0 !important; font-size: 11px !important; text-align: right; opacity: .75; } /* the card copyright stays, small, under both columns */

/* Right column: rows stack, step buttons become a full-width list. */
.ols-live-mstage [class$="-controls"] [class$="-row"] { display: block !important; margin: 0 0 10px !important; }
.ols-live-mstage [class$="-controls"] [class$="-rowlab"] { display: none !important; }
.ols-live-mstage [class$="-controls"] [class$="-seg"] { display: flex !important; flex-direction: column !important; width: 100% !important; border-radius: 14px !important; overflow: hidden; }
.ols-live-mstage button[data-step] {
  width: 100% !important; justify-content: flex-start !important; text-align: left !important; white-space: normal !important;
  font-size: clamp(14px, 1.15vw, 21px) !important; padding: .55em .9em !important; border-radius: 0 !important;
}
.ols-live-mstage button[data-step] [class$="-n"] { width: 1.6em !important; height: 1.6em !important; font-size: .8em !important; flex: none; }
.ols-live-mstage [class$="-controls"] [class$="-pill"] { font-size: clamp(13px, 1vw, 17px) !important; }
.ols-live-mstage [class$="-caption"] { font-size: clamp(13px, 1.1vw, 20px) !important; }
.ols-live-mstage [class$="-info"] h3 { font-size: clamp(16px, 1.25vw, 22px) !important; margin-top: 0 !important; }
.ols-live-mstage [class$="-info"] p { font-size: clamp(13px, 1.02vw, 18px) !important; line-height: 1.5 !important; max-width: none !important; }
.ols-live-mstage [class$="-facts"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px 14px !important; }
.ols-live-mstage [class$="-key"] { flex-wrap: wrap; }

/* Projectors 720-820 px high: tighter type and spacing so the whole right column fits without scrolling. */
@media (min-width: 861px) and (max-height: 820px) {
  .ols-live-mstage { padding: 8px 12px 6px; }
  .ols-live-mstage > section { row-gap: 8px; }
  .ols-live-mstage button[data-step] { font-size: 14px !important; padding: .38em .8em !important; }
  .ols-live-mstage [class$="-controls"] [class$="-row"] { margin-bottom: 6px !important; }
  .ols-live-mstage [class$="-controls"] [class$="-pill"] { font-size: 12.5px !important; padding: .35em .9em !important; }
  .ols-live-mstage > section > [class$="-info"] { padding: 12px 14px !important; }
  .ols-live-mstage [class$="-info"] h3 { font-size: 15px !important; margin-bottom: 4px !important; }
  .ols-live-mstage [class$="-info"] p { font-size: 12.5px !important; line-height: 1.42 !important; margin: 0 0 6px !important; }
  .ols-live-mstage [class$="-facts"] { margin-top: 6px !important; padding-top: 6px !important; }
  .ols-live-mstage [class$="-facts"] * { font-size: 12px !important; line-height: 1.3 !important; }
  .ols-live-mstage [class$="-key"] { margin-top: 6px !important; gap: 4px 10px !important; }
  .ols-live-mstage [class$="-key"] * { font-size: 11px !important; }
}

/* Narrow windows: stack as before (stage on top, then the controls and the explanation). */
@media (max-width: 860px) {
  body.ols-live-model-body { overflow: auto; }
  .ols-live-model { height: auto; min-height: 100vh; }
  .ols-live-mstage > section { height: auto !important; display: block !important; }
  .ols-live-mstage > section > [class$="-stage"] { height: 62vh !important; min-height: 320px !important; }
  .ols-live-mstage > section > [class$="-controls"] { margin-top: 10px !important; }
  .ols-live-mstage [class$="-controls"] [class$="-seg"] { flex-direction: row !important; flex-wrap: wrap; }
  .ols-live-mstage button[data-step] { width: auto !important; }
  .ols-live-mstage > section > [class$="-info"] { overflow: visible; }
}