/* 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 {
  --paper: #fffefc;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; min-height: 0;
}
@media (prefers-color-scheme: dark) {
  .stg { --paper: #f2efe8; }
}
.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: 14px;
}

/* ---------- the view: the page, the screen, the camera ---------- */
.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: 0 6px 24px rgba(0, 0, 0, .35);
  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: #77736b; font-size: 14px; 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: #bdb8ae;
}
.stg-empty .ic { width: 56px; height: 56px; stroke-width: 1.4; color: #8d887f; }
.stg-empty p { margin: 0; font-size: 15px; 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: #d9d5cc; font-size: 13px; font-weight: 700; white-space: nowrap; }
.stg-pagetag[hidden] { display: none; }
.stg-turn { display: none; min-width: 0; color: #a39e94; font-size: 12.5px; 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: rgba(255, 255, 255, .12); color: #f1efea;
  font-size: 13.5px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.stg-big .ic { width: 20px; height: 20px; }
@media (hover: hover) { .stg-big:hover { background: rgba(255, 255, 255, .2); } }
.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: rgba(18, 17, 15, .6); color: #fff;
  cursor: pointer; touch-action: manipulation;
}
.stg-max .ic { width: 22px; height: 22px; }
@media (hover: hover) { .stg-max:hover { background: rgba(18, 17, 15, .8); } }

/* 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: #000; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  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: #000; }
.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: #fff; font-size: 12.5px; text-align: center;
}
.stg-cam .cam-self .cam-txt small { display: none; }

/* ---------- the teacher's tools: a slim toolbar on the stage's edge; the pages under the stage ---------- */
.stg-tools { display: contents; }
.stg-tools[hidden] { display: none; }
.tl-group { display: flex; align-items: center; gap: 2px; }
.stg-tools > .tl-group:first-child {
  position: absolute; z-index: 5; top: 50%; inset-inline-start: 0; transform: translateY(-50%);
  flex-direction: column;
  padding: 6px; border-radius: 16px;
  background: var(--chrome, var(--card)); box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
.room[data-role="teacher"] .stg:is([data-kind="board"], [data-kind="doc"]) .stg-view { margin-inline-start: 68px; }
.tl-nav {
  flex: none; align-self: center;
  padding: 4px 6px; border-radius: var(--r-pill);
  background: var(--chrome, var(--card)); box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.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: 12px;
  background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .12s, border-color .12s;
}
.tl .ic { width: 22px; height: 22px; }
.tl[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }
.tl:disabled { opacity: .38; cursor: default; }
@media (hover: hover) { .tl:not(:disabled):not([aria-pressed="true"]):hover { background: var(--bg-sunken); } }
.tl-swatches { display: none; flex-direction: column; gap: 2px; }
.sw-dot { display: block; width: 22px; height: 22px; border-radius: 50%; background: #1f2328; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
[data-c="1"] > .sw-dot, .sw-dot[data-c="1"] { background: #1d5fc4; }
[data-c="2"] > .sw-dot, .sw-dot[data-c="2"] { background: #c62f2f; }
[data-c="3"] > .sw-dot, .sw-dot[data-c="3"] { background: #18804a; }
.tl.sw[aria-pressed="true"] { background: transparent; border-color: transparent; }
.tl.sw[aria-pressed="true"] .sw-dot { box-shadow: 0 0 0 3px var(--chrome, var(--card)), 0 0 0 5px var(--accent); }
.tl-pages { min-width: 84px; font-variant-numeric: tabular-nums; }
.tl-new { display: inline-flex; gap: 6px; }
.tl-new .ic { width: 20px; height: 20px; }
.tl-word { display: none; }
.tl-wide-only { display: none; }
.tl.stg-big { min-width: var(--tap); padding: 0 8px; background: transparent; color: var(--ink); border-radius: 12px; }
@media (min-width: 700px) {
  .tl-swatches { display: flex; }
  .tl-color, .tl-narrow-only { display: none; }
  .tl-wide-only { display: inline-grid; }
  .tl-word { display: inline; }
}
/* A phone (or any short stage: a phone on its side) folds the tools into the pen (the pen again opens them). */
@media (max-width: 699px), (max-height: 600px) {
  .room[data-role="teacher"] .stg:is([data-kind="board"], [data-kind="doc"]) .stg-view { margin-inline-start: 0; }
  .stg-tools > .tl-group:first-child { top: 8px; transform: none; inset-inline-start: 8px; padding: 4px; }
  .stg:not([data-tools="open"]) .stg-tools > .tl-group:first-child > :not(#tool-pen) { display: none; }
  .tl-nav { margin-bottom: 4px; }
}

/* ---------- sheets: colours, pages, «بیشتر» ---------- */
.stg-sheet .sheet-card > .btn.ghost:last-child { margin-top: 12px; }
.stg-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stg-color {
  appearance: none; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--card); color: var(--ink); font-weight: 700; cursor: pointer;
}
.stg-color[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.stg-list { display: flex; flex-direction: column; gap: 8px; }
.stg-row { justify-content: flex-start; }
.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(--accent-ink); border-color: var(--accent); }

/* ---------- big: fullscreen, or over the page where the browser has no element fullscreen (iPhone) ---------- */
.stg-frame:fullscreen { background: #121110; 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: #121110; }
.stg.is-max .stg-frame {
  position: fixed; inset: 0; z-index: 40;
  background: #121110;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.stg-frame:fullscreen .stg-view, .stg.is-max .stg-view { margin-inline-start: 0; }

/* The black ink's swatch keeps an edge on a dark ground. */
@media (prefers-color-scheme: dark) {
  .sw-dot, .sw-dot[data-c="0"] { box-shadow: inset 0 0 0 1.5px #8d9298; }
  [data-c="1"] > .sw-dot, .sw-dot[data-c="1"], [data-c="2"] > .sw-dot, .sw-dot[data-c="2"], [data-c="3"] > .sw-dot, .sw-dot[data-c="3"] { box-shadow: none; }
}

/* 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: rgba(18, 17, 15, .6); }
}