/* ================================================================
   Whiteboard board view — SHARED (V3.684)
   ================================================================
   Everything the MOUNTED BOARD needs, and nothing else. Extracted from
   styles.css so the SPA (index.html) and the module whiteboard panel
   (loaded inside the module iframe, which never loads styles.css) render
   an identical board from ONE stylesheet instead of two copies that
   drift. Board-list rows, the live banner and the toast stay in
   styles.css — those are SPA chrome, not the board.

   Selectors are class-based; the #wb-canvas-* ids are kept only for the
   full-page route's stacking order, which the panel restates by class.
   ================================================================ */

.wb-page{
  display: flex; flex-direction: column;
  height: calc(100dvh - 150px); min-height: 420px;
  max-width: 1500px; margin: 0 auto; padding: 0 8px;
}
.wb-topbar{
  display: flex; align-items: center; gap: 12px; padding: 8px 4px;
}
.wb-back{ font-size: .85rem; white-space: nowrap; text-decoration: none; }
.wb-title{ font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-topbar-right{ display: flex; align-items: center; gap: 8px; }
.wb-live-tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: #dc2626; letter-spacing: .04em;
}
.wb-toolbar{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 4px 8px;
}
.wb-tools-group{ display: flex; align-items: center; gap: 6px; }
.wb-color{
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.wb-color.wb-sel{ border-color: #f0be46; box-shadow: 0 0 0 2px #fff inset; }
.wb-width{
  width: 34px; height: 26px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 6px;
}
.wb-width span{ display: block; width: 100%; background: #111827; border-radius: 99px; }
.wb-width.wb-sel{ border-color: #f0be46; box-shadow: 0 0 0 1px #f0be46; }
.wb-toolbar .btn.wb-sel{ background: #111827; color: #fff; }
.wb-bg-label{ display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; }
.wb-bg-select{ padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font-size: .85rem; }

/* V3.730 — the stage is a row: thumbnail rail | sheet. The sheet area
   (.wb-board) fills the rest and the three canvases cover it entirely;
   the pages themselves are painted onto the bg canvas (white sheets on a
   grey desk), so the "board" no longer has a size of its own. */
.wb-stage{
  flex: 1; min-height: 0; display: flex; align-items: stretch;
  background: #e5e7eb; border-radius: 10px; overflow: hidden;
}
.wb-board{ position: relative; flex: 1; min-width: 0; min-height: 0; }
.wb-board canvas{ position: absolute; inset: 0; display: block; }

.wb-rail{
  flex: none; width: 112px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 8px 6px;
  background: #f3f4f6; border-right: 1px solid #d1d5db;
  scrollbar-width: thin;
}
.wb-rail[hidden]{ display: none; }
/* V3.732 — collapsed rail: a thin strip with the reopen button */
.wb-rail.wb-rail-collapsed{ width: 26px; padding: 6px 2px; align-items: center; gap: 6px; }
.wb-rail-toggle{
  border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 6px;
  font-size: .72rem; font-weight: 600; padding: 3px 4px; cursor: pointer; width: 100%;
}
.wb-rail-collapsed .wb-rail-toggle{ width: 22px; padding: 6px 0; font-size: .8rem; }
.wb-rail-count{ font-size: .68rem; color: #6b7280; writing-mode: vertical-rl; }
/* V3.732 — live/recording column on the right, same width as the rail so
   the sheet stays centred on the screen */
.wb-side{
  flex: none; width: 112px; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 10px 8px; background: #f3f4f6; border-left: 1px solid #d1d5db;
}
.wb-side[hidden]{ display: none; }
.wb-side-head{ font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.wb-side .btn{ width: 100%; white-space: nowrap; }
.wb-side .wb-rec-badge{ flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; font-size: .72rem; }
.wb-side .wb-live-tag{ justify-content: center; }
/* an author display rule on .wb-live-dot would otherwise beat the UA's [hidden] */
.wb-thumb-btn .wb-live-dot-mini[hidden]{ display: none; }
.wb-thumb-btn{
  position: relative; display: block; width: 100%; padding: 0;
  border: 2px solid transparent; border-radius: 6px; background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.18); cursor: pointer;
}
.wb-thumb-btn.wb-sel{ border-color: #f0be46; }
.wb-thumb-btn canvas{ display: block; width: 100%; height: auto; border-radius: 4px; }
.wb-thumb-num{
  position: absolute; left: 4px; bottom: 2px; font-size: .62rem; font-weight: 700;
  color: #6b7280; pointer-events: none;
}
.wb-thumb-btn .wb-live-dot-mini{ position: absolute; right: 4px; top: 4px; }
.wb-thumb-add{
  width: 100%; height: 30px; border: 1px dashed #9ca3af; border-radius: 6px;
  background: transparent; color: #6b7280; cursor: pointer; font-size: 1rem;
}
.wb-thumb-add:hover{ background: #fff; color: #111827; }
/* with the rail showing, the page dots under the board are redundant —
   the pages bar keeps only the "Jump to live page" chip */
.wb-has-rail .wb-pages{ display: none; }
.wb-has-rail .wb-pagesbar{ min-height: 0; padding: 0; }
.wb-has-rail .wb-pagesbar:has(.wb-follow-chip){ padding: 8px 0 10px; }
@media (max-width: 900px){ .wb-rail{ width: 84px; } .wb-side{ width: 84px; padding: 8px 4px; } }
#wb-canvas-ink{ z-index: 2; }
#wb-canvas-bg{ z-index: 1; }

.wb-pagesbar{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 0 10px; min-height: 30px;
}
.wb-pages{ display: flex; gap: 6px; }
.wb-page-dot{
  position: relative; min-width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #d1d5db; background: #fff; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: #374151;
}
.wb-page-dot.wb-sel{ background: #111827; color: #fff; border-color: #111827; }
.wb-page-add{ color: #6b7280; }
.wb-follow-chip{
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #dc2626; color: #dc2626; background: #fff;
  border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600;
  cursor: pointer;
}

/* ── Toast ── */
.wb-toast{
  position: fixed; left: 50%; transform: translateX(-50%) translateY(12px);
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  background: #111827; color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: .88rem; z-index: 1500; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: 90vw;
}
.wb-toast-show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Projector mode: chrome-free for the classroom screen ── */
body.wb-projector .site-header,
body.wb-projector .site-footer,
body.wb-projector .bottom-tabs,
body.wb-projector .wb-topbar,
body.wb-projector .wb-toolbar,
body.wb-projector .wb-pagesbar{ display: none !important; }
body.wb-projector .wb-page{
  position: fixed; inset: 0; height: 100dvh; max-width: none;
  margin: 0; padding: 0; z-index: 2000; background: #f3f4f6;
}
body.wb-projector .wb-stage{ border-radius: 0; }
body.wb-projector .wb-rail, body.wb-projector .wb-side{ display: none !important; }

/* ── Mobile ── */
@media (max-width: 700px){
  .wb-page{ height: calc(100dvh - 210px); min-height: 320px; }
  .wb-toolbar{ gap: 8px; }
  .wb-board-meta{ display: none; }
}

/* ── Draw mode (V3.678): seamless pen surface on iPadOS ──
   While the drawing tools are active, the page must never react to the
   pen as text: no selection highlight, no copy/look-up callout, no
   scroll/pinch/pull-to-refresh starting from the board. Paired with the
   touch/selectstart preventDefault guards in whiteboard.js — CSS alone
   does not stop the legacy touch pipeline, and JS alone does not stop
   selection anchoring on neighboring text. Viewers never get this class. */
.wb-draw-mode,
.wb-draw-mode *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.wb-draw-mode .wb-stage,
.wb-draw-mode .wb-board,
.wb-draw-mode .wb-board canvas{
  touch-action: none;
}
.wb-draw-mode{
  overscroll-behavior: contain;
}

/* ── Zoom controls + image items (V3.684) ── */
.wb-zoom{ display: inline-flex; align-items: center; gap: 2px; }
.wb-zoom-btn{
  width: 28px; height: 28px; border: 1px solid #d1d5db; background: #fff;
  border-radius: 7px; cursor: pointer; font-size: .95rem; line-height: 1;
  color: #374151; padding: 0;
}
.wb-zoom-btn:hover{ background: #f3f4f6; }
.wb-zoom-pct{ font-size: .72rem; color: #6b7280; min-width: 34px; text-align: right; }

.wb-items{
  position: absolute; inset: 0; z-index: 2;   /* between bg (1) and ink (3) */
  transform-origin: 0 0; pointer-events: none;
}
.wb-item{ position: absolute; }
.wb-item img{
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 4px; background: #fff;
  box-shadow: 0 1px 6px rgba(15,23,42,.18);
  -webkit-user-select: none; user-select: none;
}
/* ink must composite ON TOP of snapped figures — you annotate over them */
.wb-canvas-ink{ z-index: 3; }
.wb-canvas-bg{ z-index: 1; }
.wb-draw-mode .wb-items{ touch-action: none; }

/* V3.727 — the stroke being drawn is redrawn whole on its own layer each
   frame (no overdraw → edges keep their antialiasing). It never takes the
   pointer: input stays on the ink canvas underneath. */
.wb-canvas-live{ z-index: 4; pointer-events: none; }

/* ── V3.731 — recording + replay ── */
.wb-rec-badge{
  display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700;
  color: #dc2626; letter-spacing: .02em; white-space: nowrap;
}
.wb-rec-badge-remote, .wb-rec-badge-off{ color: #6b7280; font-weight: 600; }
/* the projector's corner control: faint until hovered or live */
.wb-projector-ctl{
  position: fixed; right: 14px; bottom: 14px; z-index: 2100;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.92); border: 1px solid #d1d5db; border-radius: 999px;
  padding: 6px 10px; opacity: .22; transition: opacity .2s;
}
.wb-projector-ctl:hover, .wb-projector-ctl:focus-within, .wb-projector-ctl-live{ opacity: 1; }
/* replay mode: the sheet exactly as the room saw it — no rail, no tools */
.wb-replay .wb-rail, .wb-replay .wb-side, .wb-replay .wb-toolbar, .wb-replay .wb-pagesbar{ display: none !important; }
.wb-replay-bar{
  flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 4px 6px; border-top: 1px solid #e5e7eb;
}
.wb-rp-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-rp-meta{ font-size: .82rem; }
.wb-rp-name{ font-weight: 700; }
.wb-rp-admin{ margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wb-rp-btn{
  min-width: 36px; height: 32px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
  cursor: pointer; font-size: .95rem; padding: 0 8px; color: #111827;
}
.wb-rp-play{ font-size: 1.05rem; }
.wb-rp-time{ font-variant-numeric: tabular-nums; font-size: .82rem; color: #374151; white-space: nowrap; min-width: 92px; }
.wb-rp-track{ position: relative; flex: 1; min-width: 160px; height: 32px; display: flex; align-items: center; }
.wb-rp-range{ width: 100%; margin: 0; position: relative; z-index: 2; }
.wb-rp-markers{ position: absolute; left: 0; right: 0; top: 4px; height: 6px; pointer-events: none; z-index: 1; }
.wb-rp-marker{ position: absolute; top: 0; width: 2px; height: 6px; background: #f0be46; transform: translateX(-1px); }
.wb-rp-marker-add{ background: #dc2626; }
.wb-rp-msg{ font-size: .8rem; }
/* recorded lectures under a board row on the class page */
.wb-rec-list{
  flex-basis: 100%; width: 100%; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 0 2px 24px; margin-top: 4px; border-top: 1px solid #374151;
}
.wb-rec-list[hidden]{ display: none; }
.wb-rec-head{ font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; }
.wb-rec{ display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; text-decoration: none; color: inherit; }
.wb-rec:hover .wb-rec-name{ text-decoration: underline; }
.wb-rec-play{ color: #f87171; font-size: .8rem; }
.wb-rec-live{ color: #f87171; font-weight: 600; }
.wb-rec-interrupted{ color: #fbbf24; }
/* V3.733 — leader / follower switch in the live column */
.wb-role{ display: flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.wb-role-btn{ flex: 1; border: 0; background: #fff; color: #374151; font-size: .72rem; font-weight: 600; padding: 5px 0; cursor: pointer; }
.wb-role-btn + .wb-role-btn{ border-left: 1px solid #d1d5db; }
.wb-role-btn.wb-sel{ background: #111827; color: #fff; }
.wb-role-note{ font-size: .68rem; line-height: 1.25; }
@media (max-width: 700px){
  .wb-rp-admin{ margin-left: 0; }
  .wb-rec-list{ padding-left: 8px; }
}

/* ── V3.736 — simulation pages ── */
/* The layer sits ABOVE the ink so the module's controls take the pointer
   (Interact). In Annotate mode it drops below the ink canvas, which then
   catches the pen; the iframe keeps running underneath. */
.wb-sims{ position: absolute; inset: 0; z-index: 5; pointer-events: none; transform-origin: 0 0; }
.wb-annotate .wb-sims{ z-index: 2; }
.wb-sim{ position: absolute; overflow: hidden; background: #fff; pointer-events: auto; }
.wb-annotate .wb-sim{ pointer-events: none; }
.wb-sim iframe{
  position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0;
  transform-origin: 0 0; background: #fff;
}
.wb-sim-cap{
  position: absolute; left: 0; bottom: 0; right: 0; padding: 2px 8px;
  font-size: .7rem; color: #4338ca; background: rgba(238,242,255,.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.wb-projector .wb-sim-cap, .wb-replay .wb-sim-cap{ display: none; }
.wb-sim-form{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; padding-top: 4px; }
.wb-sim-form[hidden]{ display: none; }
.wb-sim-ref{ min-width: 200px; max-width: 260px; flex: none; }
.wb-sim-status{ font-size: .8rem; }
.wb-sim-status.wb-field-err{ color: #dc2626; }
.wb-simmode{ margin-left: 4px; }
.wb-simmode .wb-role-btn{ padding: 4px 8px; }
.wb-sim-cap-mode{ opacity: .7; margin-left: 6px; }
.wb-sim-form .wb-simmode{ margin-left: 0; }