/* join.html serves classroom students too, and they get this same markup with
   the roster hidden. Only the chrome that reframes the board — the outer
   border and the taller canvas — is gated on .study-room-active, the flag the
   tutor column already sets; the bare grid below is inert without a roster. */
.study-board-workspace { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.study-board-stage { position: relative; min-width: 0; }
.study-room-active .study-board-workspace {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
}
.study-room-active .whiteboard { height: clamp(340px, 48vw, 540px); border: 0; border-radius: 0; }
/* The roster reveals itself when the first participant list arrives, so the
   column track follows the panel's own hidden state rather than a second class
   the script has to keep in sync. */
.study-board-workspace:has(.board-participants:not([hidden])) { grid-template-columns: 190px minmax(0, 1fr); }
.board-participants {
  max-height: 540px; overflow-y: auto; padding: 15px 12px;
  border-right: 1px solid var(--line); background: #fbfaf8;
}
.board-participants[hidden] { display: none; }
.board-participants-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 5px 12px; color: var(--ink-faint); font-size: 11px; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase;
}
.board-participants-head [data-board-participant-count] {
  display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px;
  color: var(--ink-soft); background: #eeece8; font-size: 11px; letter-spacing: 0;
}
.board-participants ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.board-participants li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 7px; align-items: center; gap: 9px;
  min-width: 0; padding: 8px 7px; border-radius: 9px; transition: background .15s ease;
}
.board-participants li.cursor-active { background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.07); }
.board-participant-avatar {
  display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%;
  color: #fff; background: var(--presence-color); font-size: 13px; font-weight: 750;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
}
.board-participant-identity { display: grid; min-width: 0; line-height: 1.2; }
.board-participant-identity strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.board-participant-identity span { margin-top: 3px; color: var(--ink-faint); font-size: 10.5px; }
.board-participant-online { width: 7px; height: 7px; border-radius: 50%; background: #2ca86b; }
.board-cursors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.board-peer-cursor {
  position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 2px;
  transform: translate(-4px, -3px); transition: left 55ms linear, top 55ms linear;
  filter: drop-shadow(0 2px 2px rgba(16,24,40,.14));
}
.board-peer-pointer { display: block; width: 25px; height: 29px; transform-origin: 5px 4px; }
.board-peer-pointer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.board-peer-pointer path { fill: var(--presence-color); stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
.board-peer-label {
  margin: 18px 0 0 -3px; padding: 4px 7px; border-radius: 5px; color: #fff;
  background: var(--presence-color); font-size: 11px; font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.board-peer-cursor.drawing .board-peer-pointer { animation: peer-pencil .42s ease-in-out infinite alternate; }
.board-peer-cursor.drawing .board-peer-label::after { content: " · drawing"; font-weight: 550; opacity: .82; }
@keyframes peer-pencil { to { transform: rotate(-8deg) scale(.94); } }

@media (max-width: 600px) {
  .study-board-workspace:has(.board-participants:not([hidden])) { grid-template-columns: 1fr; }
  .board-participants {
    max-height: none; overflow-y: visible; padding: 10px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .board-participants-head { padding-bottom: 8px; }
  .board-participants ul { display: flex; gap: 6px; overflow-x: auto; }
  .board-participants li { min-width: 142px; }
  .study-room-active .whiteboard { height: 360px; }
}