/* jarchi stage (stage.js): the middle of the room, always there. The page (a board page, a document page) keeps its
   shape and takes all the room the stage has (stage.js sizes it); the screen share and the teacher's camera live
   on it too. The page is light paper in both schemes (ink colours mean the same on every screen); around it the
   room's calm dark ground. The teacher's board tools float on the stage's edge; the pages sit under it. */

.stg {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; min-height: 0;
}
.stg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.stg-err:empty { display: none; }
.stg-err {
  flex: none; align-self: center; margin: 0; padding: 8px 14px; border-radius: var(--r);
  background: var(--danger-soft); color: var(--danger-ink); font-weight: 700; font-size: var(--fs-meta);
}

/* ---------- the view: the page, the screen, the camera; beside it the cameras' strip (people-view.css) ---------- */
.stg-body { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; gap: 8px; }
.stg-body > .stg-frame { min-width: 0; }
.stg-frame { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.stg-frame[hidden] { display: none; }
.stg-view {
  --stg-fill: 1;
  position: relative;
  flex: 1 1 auto; min-height: 0;
  width: auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.stg-page {
  position: relative; flex: none;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: var(--shadow-stage);
  overflow: hidden;
}
.stg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: fill;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.stg-screen { position: absolute; inset: 0; display: grid; place-items: center; }
.stg-screen > video, .stg-screen .screen-view, .stg-screen .screen-view video { width: 100%; height: 100%; object-fit: contain; }
.stg-screen .screen-view { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; background: transparent; }
.stg-screen .screen-self { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.stg-wait {
  position: absolute; inset: auto 0 45% 0; margin: 0; text-align: center;
  color: var(--paper-muted); font-size: var(--fs-meta); font-weight: 700; pointer-events: none;
}
/* Nothing on the stage yet. */
.stg-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 32ch; text-align: center; color: var(--stage-muted);
}
.stg-empty .ic { width: 56px; height: 56px; stroke-width: 1.4; color: var(--stage-muted); }
.stg-empty p { margin: 0; font-size: var(--fs-body); line-height: 1.8; }

/* A student's line under the page: what page this is, the turn-your-phone hint, «بزرگ‌تر». */
.stg-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); }
.stg-bar[hidden] { display: none; }
.stg-pagetag { color: var(--stage-ink); font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; }
.stg-pagetag[hidden] { display: none; }
.stg-turn { display: none; min-width: 0; color: var(--stage-muted); font-size: var(--fs-meta); line-height: 1.5; }
@media (max-width: 599px) and (orientation: portrait) {
  .stg[data-wide="1"] .stg-turn { display: block; }
}
.stg-big {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); min-width: var(--tap); padding: 4px 14px;
  border: 0; border-radius: var(--r-pill);
  background: var(--stage-hover); color: var(--stage-ink);
  font-size: var(--fs-meta); font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.stg-big .ic { width: 20px; height: 20px; }
@media (hover: hover) { .stg-big:hover { background: var(--stage-chip-strong); } }
.stg-max {
  appearance: none; position: absolute; z-index: 4; top: 8px; inset-inline-start: 8px;
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 12px;
  background: var(--stage-chip); color: var(--stage-ink);
  cursor: pointer; touch-action: manipulation;
}
.stg-max .ic { width: 22px; height: 22px; }
@media (hover: hover) { .stg-max:hover { background: var(--stage-chip-strong); } }

/* The teacher's camera (camera.js fills .stg-cam): a small tile in a corner the teacher can drag it to; the whole
   stage only while nothing else is shown. */
.stg-cam:empty, .stg:not([data-cam="1"]) .stg-cam { display: none; }
.stg-cam {
  position: absolute; z-index: 3;
  width: 22%; min-width: 120px; max-width: 240px; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  background: var(--video-ground); box-shadow: var(--shadow-stage);
  cursor: grab; touch-action: none;
}
.stg-cam > video, .stg-cam > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stg-cam[data-corner="end-bottom"] { inset-inline-end: 10px; bottom: 10px; }
.stg-cam[data-corner="end-top"] { inset-inline-end: 10px; top: 56px; }
.stg-cam[data-corner="start-bottom"] { inset-inline-start: 10px; bottom: 10px; }
.stg-cam[data-corner="start-top"] { inset-inline-start: 10px; top: 10px; }
.stg[data-kind=""] .stg-cam { inset: 0; width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; cursor: default; }
/* The teacher's own picture in that tile. */
.stg-cam .cam-self-slot { position: absolute; inset: 0; }
.stg-cam .cam-self { position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--video-ground); }
.stg-cam .cam-self .cam-prev { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.stg-cam .cam-self .cam-txt { display: none; }
.stg-cam .cam-self:not([data-state="on"]):not([data-state="lost"]) .cam-txt {
  display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 8px;
  color: var(--stage-ink); font-size: var(--fs-meta); text-align: center;
}
.stg-cam .cam-self .cam-txt small { display: none; }

/* ---------- the board's tools (board-tools.js, board.css): the base of a tool button, and the page bar ---------- */
.tl {
  appearance: none;
  display: inline-grid; place-items: center;
  min-width: var(--tap); height: var(--tap); padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r-ctl);
  background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-b); line-height: 1;
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tl .ic { width: 22px; height: 22px; }
.tl[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.tl:disabled { opacity: .38; cursor: default; }
.tl:not(:disabled):active { background: var(--press); }
@media (hover: hover) { .tl:not(:disabled):not([aria-pressed="true"]):hover { background: var(--hover); } }
.tl[hidden] { display: none; }
.tl-nav {
  flex: none; align-self: center; order: 1;
  display: flex; align-items: center; gap: 2px;
  max-width: 100%;
  padding: 4px 6px; border-radius: var(--r-pill);
  background: var(--surface-raised); box-shadow: var(--shadow-2);
}
.tl-nav[hidden] { display: none; }
.tl-pages { min-width: 76px; font-variant-numeric: tabular-nums; }
.tl-new { display: inline-flex; gap: 6px; }
.tl-new .ic { width: 20px; height: 20px; }
.tl-word { display: none; } /* icons alone (the owner: minimal); the name is the tooltip and the aria-label */
.tl.stg-big { min-width: var(--tap); padding: 0 8px; background: transparent; color: var(--ink); border-radius: var(--r-ctl); }

/* ---------- sheets: a document's pages ---------- */
.stg-sheet .sheet-card > .btn.ghost:last-child { margin-top: 12px; }
.stg-pagegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px;
  max-height: 46dvh; overflow-y: auto; margin-bottom: 12px; padding: 2px;
}
.stg-pagegrid .btn { width: 100%; padding: 4px; font-variant-numeric: tabular-nums; }
.stg-pagegrid .btn[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- big: fullscreen, or over the page where the browser has no element fullscreen (iPhone) ---------- */
.stg-frame:fullscreen { background: var(--stage); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.stg-frame:-webkit-full-screen { background: var(--stage); }
.stg.is-max .stg-frame {
  position: fixed; inset: 0; z-index: 40;
  background: var(--stage);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* A phone on its side: the student's «بزرگ‌تر» floats in the stage's corner instead of taking a row. */
@media (max-width: 959px) and (max-height: 540px) and (orientation: landscape) {
  .stg-bar { position: absolute; z-index: 5; bottom: 6px; inset-inline-start: 6px; min-height: 0; }
  .stg-bar .stg-turn { display: none !important; }
  .stg-big { background: var(--stage-chip); }
}

/* A document's page is paper too: a little dimmer in dark mode, like the board (the --paper token; A1: glare). */
.stg-img { filter: brightness(var(--paper-dim, 1)); }