/* [board14] Whiteboard together (public/whiteboard.js). Builds on the notebook's paper and tools
   (notebook.css: .nb-paper, .nb-pens, .nb-colors, .nb-sizes, .nb-actions) so both look the same. */

.wb-home, .wb-board { max-width: 760px; width: 100%; margin: 0 auto; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.wb-lead { margin: 0; }

/* who is on the board */
.wb-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-height: var(--tap); }
.wb-member {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px 4px 4px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink-muted); font-weight: var(--weight-strong); position: relative; opacity: 0.7;
}
.wb-member.is-here { background: var(--surface); color: var(--ink); opacity: 1; box-shadow: var(--shadow-1); }
.wb-member.is-here::after {
  content: ""; position: absolute; left: 30px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--success, #3F9661); box-shadow: 0 0 0 2px var(--surface);
}
.wb-strip.wb-offline { opacity: 0.6; }
.wb-status:empty { display: none; }

/* the page: two canvases on the notebook paper (the board, and lines still being drawn) */
/* The whole page fits on the screen with the tools (no scrolling while drawing). */
.wb-paper {
  touch-action: none;
  max-width: max(260px, min(720px, calc((100vh - var(--appbar-h) - var(--tabbar-h) - 320px) * 0.75)));
  max-width: max(260px, min(720px, calc((100dvh - var(--appbar-h) - var(--tabbar-h) - 320px) * 0.75)));
}
.wb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wb-top { cursor: crosshair; touch-action: none; }
.wb-paper.wb-off .wb-top { cursor: default; }
.wb-tools .nb-shapes[hidden], .wb-hint[hidden] { display: none; }
.wb-shapes { flex-wrap: wrap; }
.wb-size-a { font: var(--weight-display) 1em / 1 var(--font-display); color: var(--ink); background: none !important; border: 0 !important; }
.wb-actions { justify-content: center; }

/* picking people */
.wb-people-pick { flex-wrap: wrap; }
.wb-pick { position: relative; border: 3px solid transparent; border-radius: var(--radius-lg); }
.wb-pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft, #FFE7C2); }
.wb-pick-check {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.wb-faces { display: inline-flex; }
.wb-faces > * + * { margin-left: -10px; }

/* a phone: the board uses the whole width */
@media (max-width: 480px) {
  .wb-board { gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-member { transition: none; }
}

/* [landscape] A screen wider than it is tall (a phone on its side, a tablet sideways): the board
   stands on the right as tall as the screen allows, with who is here, the tools and the buttons
   beside it on the left. */
@media (orientation: landscape) and (max-height: 900px) {
  .wb-board {
    max-width: 1180px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: repeat(4, auto) minmax(0, 1fr);
    column-gap: var(--space-3); row-gap: var(--space-2); align-items: start;
  }
  .wb-board > * { grid-column: 1; min-width: 0; }
  .wb-board > .wb-paper {
    grid-column: 2; grid-row: 1 / -1; width: auto; max-width: none; margin: 0;
    height: min(calc(100vh - var(--appbar-h) - 28px), max(250px, calc((100vw - var(--rail-w) - 460px) * 4 / 3)));
    height: min(calc(100dvh - var(--appbar-h) - env(safe-area-inset-top, 0px) - 28px), max(250px, calc((100vw - var(--rail-w) - 460px) * 4 / 3)));
    position: sticky; top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px) + var(--space-2));
  }
  .wb-board > .wb-actions { position: static; padding: 0; background: none; backdrop-filter: none; }
}