/* The board surface. Drawing styles live in render.js (as SVG attributes) so the board looks
   the same wherever it is mounted: the Board Lab, the call page, a screenshot. */
.bb-svg {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 1px 1px, rgba(13, 20, 36, .07) 1px, transparent 0) 0 0 / 2.5% 4.444%,
    #fbfcfe;
  border-radius: inherit;
  font-family: Inter, system-ui, sans-serif;
  user-select: none;
}
.bb-eq-body { font-family: "KaTeX_Main", "Times New Roman", serif; line-height: 1.2; overflow: visible; }
.bb-eq-body .katex { white-space: nowrap; }

/* squared maths paper (the default): white with a fine grey grid, 32 x 18 squares over the 16 x 9 board, like a page
   of a maths exercise book */
.bb-svg.bb-paper { background: #ffffff; }        /* its squares are drawn in the board itself (render.js #squares) */

/* dark board: deep navy with a faint dot grid */
.bb-svg.bb-dark {
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 2.5% 4.444%,
    radial-gradient(120% 90% at 50% 0%, #121a35 0%, #0b1020 60%);
}

/* a session board (camera.js): one endless board that fills its box, to drag around and zoom into */
.bb-wrap { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: inherit; background: #ffffff; }
.bb-wrap .bb-svg.bb-session { width: 100%; height: 100%; aspect-ratio: auto; cursor: grab; touch-action: none; outline: none; }
.bb-wrap.bb-grabbing .bb-svg { cursor: grabbing; }
.bb-wrap .bb-svg:focus-visible { box-shadow: inset 0 0 0 3px rgba(58, 108, 246, .45); }
/* the controls stay out of the drawing's way: a small row in the bottom corner, faint until the board is in use */
.bb-nav { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; z-index: 3; opacity: .6; transition: opacity .2s; }
.bb-wrap:hover .bb-nav, .bb-nav:focus-within, .bb-wrap.bb-review .bb-nav, .bb-nav:has(.bb-live:not([hidden])) { opacity: 1; }
.bb-nav [hidden] { display: none; }
.bb-nav button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 10px; border: 1px solid rgba(13, 20, 36, .12); background: rgba(255, 255, 255, .92); color: #1f3a8a;
  font: 600 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(13, 20, 36, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bb-nav button:hover { background: #fff; border-color: rgba(31, 58, 138, .35); }
.bb-nav button:focus-visible { outline: 3px solid rgba(58, 108, 246, .45); outline-offset: 1px; }
.bb-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bb-nav .bb-live { background: #1f3a8a; color: #fff; border-color: transparent; white-space: nowrap; }
.bb-nav .bb-live:hover { background: #26459e; }
.bb-nav .bb-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; }
.bb-nav .bb-live.bb-new { animation: bb-pulse 1.1s ease-out 2; }
@keyframes bb-pulse { 0% { box-shadow: 0 0 0 0 rgba(58, 108, 246, .55); } 100% { box-shadow: 0 0 0 14px rgba(58, 108, 246, 0); } }
.bb-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); margin: 0; padding: 7px 12px; border-radius: 999px;
  background: rgba(13, 20, 36, .78); color: #fff; font: 500 12.5px/1.2 Inter, system-ui, sans-serif; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .4s;
}
.bb-wrap.bb-review .bb-hint { opacity: 1; }
.bb-wrap .bb-hint.gone { opacity: 0; }
@media (max-width: 560px) { .bb-hint { white-space: normal; width: max-content; max-width: calc(100% - 32px); text-align: center; } }
@media (prefers-reduced-motion: reduce) { .bb-nav .bb-live.bb-new { animation: none; } }

/* maths written piece by piece (mathspeech.js): each glyph group waits for the words that name it */
.bb-atoms [data-g] { visibility: hidden; }
.bb-atoms [data-g].on { visibility: visible; }