/* ================================================================
   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; }

/* ── V3.762 Maximize: the board fills the screen, chrome stays usable ── */
.wb-max-btn{
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: .78rem; font-weight: 600; color: #374151; background: #fff;
  border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 8px; cursor: pointer;
}
.wb-max-btn:hover{ background: #f3f4f6; }
.wb-max-btn[aria-pressed="true"]{ background: #111827; color: #fff; border-color: #111827; }
body.wb-max .site-header,
body.wb-max .site-footer,
body.wb-max .bottom-tabs{ display: none !important; }
body.wb-max .wb-page{
  position: fixed; inset: 0; height: 100dvh; max-width: none;
  margin: 0; padding: 0 6px; z-index: 2000; background: #f3f4f6;
  box-sizing: border-box;
}
body.wb-max .wb-topbar{ padding: 4px; }
body.wb-max .wb-stage{ border-radius: 6px; }
body.wb-max .wb-pagesbar{ min-height: 0; }
@media (max-width: 700px){ .wb-max-label{ display: none; } .wb-max-btn{ padding: 4px 6px; } }

/* ── 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; }

/* V3.804 — quick view dock: zoom + / − / home and "Page + ¼", floating in
   the board's top-left corner (the desk margin beside the page at 100%).
   touch-action: manipulation keeps quick double taps on + from triggering
   iOS double-tap page zoom. */
.wb-viewdock{
  position: absolute; left: 8px; top: 8px; z-index: 6;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 4px; border-radius: 10px;
  background: rgba(255,255,255,.92); border: 1px solid #d1d5db;
  box-shadow: 0 1px 4px rgba(15,23,42,.15);
  -webkit-user-select: none; user-select: none;
}
.wb-viewdock[hidden]{ display: none; }
.wb-dock-btn{
  width: 40px; min-height: 36px; padding: 0; cursor: pointer; touch-action: manipulation;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827;
  font: 600 1.05rem/1 system-ui, -apple-system, sans-serif;
}
.wb-dock-btn:hover{ background: #f3f4f6; }
.wb-dock-btn:active{ background: #e5e7eb; }
.wb-dock-btn:focus-visible{ outline: 2px solid #f0be46; outline-offset: 1px; }
.wb-dock-quarter{ font-size: .66rem; line-height: 1.15; padding: 4px 0; }
.wb-dock-pct{
  font: 600 .64rem system-ui, -apple-system, sans-serif; color: #6b7280;
  text-align: center; font-variant-numeric: tabular-nums;
}

.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-picks{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-sim-select{ max-width: 280px; }
.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; }

/* ── V3.739 — page actions on the selected thumbnail ── */
.wb-thumb-acts{ display: flex; gap: 4px; justify-content: center; margin-top: -4px; }
.wb-thumb-act{
  width: 28px; height: 22px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
  color: #374151; font-size: .72rem; cursor: pointer; padding: 0; line-height: 1;
}
.wb-thumb-act:hover:not(:disabled){ background: #f3f4f6; }
.wb-thumb-act:disabled{ opacity: .35; cursor: default; }
.wb-thumb-act-del{ color: #dc2626; }
.wb-thumb-act-del.wb-armed{ background: #dc2626 !important; color: #fff !important; }

/* ── V3.740 — follower sync ── */
.wb-sync-btn{ white-space: nowrap; }
.wb-sync-btn-off{ border-color: #f59e0b !important; color: #92400e !important; background: #fffbeb !important; }
.wb-projector-ctl .wb-sync-btn{ margin-left: 4px; }

/* V3.801 — keep the layout toggle's icon and label on one line */
.wb-sheetmode .wb-role-btn{ white-space: nowrap; }