/* board.css · P28, Easel: the whiteboard's layout on the design system's
   tokens. The canvas fills the page under the product's bar; the panels float
   over it as the design system's menus do (raised, a hairline ring and the
   second elevation). The buttons, segmented controls, switch, sync, avatars,
   menus, keys and dialog are the design system's components; this file
   places them and draws what a whiteboard has that the design system does
   not: the color swatches, the other people's pointers and the field a
   shape's words are written in. Every value is a token. */

.wb { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; }
.wb-scene, .wb-over { position: absolute; inset: 0; display: block; }
.wb-over { outline: none; }
/* the board takes the keys while it has the focus: a line along its top edge shows it, and the drawing keeps its edges free */
.wb-over:focus-visible { box-shadow: inset 0 2px 0 var(--accent); }
.wb[data-following] { box-shadow: inset 0 0 0 2px var(--follow); }

/* the floating panels */
.wb-panel { position: absolute; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); }
.wb-top { top: 12px; height: var(--h-36); }
.wb-top-left { left: 12px; gap: 4px; padding: 4px 4px 4px 6px; }
.wb-top-right { right: 12px; gap: 6px; padding: 4px 4px 4px 6px; }
.wb-title { width: 220px; height: var(--h-28); padding: 0 6px; border: 0; border-radius: var(--r-press); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); outline: none; text-overflow: ellipsis; }
.wb-title:hover { background: var(--raised-hover); }
.wb-title:focus-visible { box-shadow: 0 0 0 var(--px) var(--accent); }
.wb-people { display: flex; align-items: center; }
.wb-person { display: inline-flex; margin-left: -4px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: 0 0 0 2px var(--raised); }
.wb-person:first-child { margin-left: 0; }
button.wb-person { cursor: default; }
button.wb-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.wb-person[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }

.wb-tools { left: 50%; bottom: 16px; transform: translateX(-50%); padding: 4px; }

.wb-zoom { left: 12px; bottom: 16px; }
.wb-zoom-level { min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; }

.wb-mini { right: 12px; bottom: 16px; width: 200px; height: 136px; padding: 0; background: var(--raised); }
.wb-mini[hidden] { display: none; }

/* the style panel */
.wb-style { top: 60px; right: 12px; flex-direction: column; align-items: stretch; gap: 10px; width: 236px; max-height: calc(100% - 140px); overflow: auto; padding: 12px; scrollbar-width: thin; }
.wb-style[hidden] { display: none; }
.wb-style[data-side="left"] { right: auto; left: 12px; }
.wb-row { display: flex; flex-direction: column; gap: 6px; }
.wb-row-end { flex-direction: row; flex-wrap: wrap; gap: 2px; margin: 0 -4px -4px; }
.wb-label { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
.wb-row > [data-r="segmented"] { width: 100%; }
.wb-row > [data-r="segmented"] > [data-r="button"] { flex: 1; justify-content: center; }
.wb-acts { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 -4px; }
.wb-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wb-swatch { position: relative; height: var(--h-28); padding: 0; border: 0; border-radius: var(--r-press); background: transparent; }
.wb-swatch::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 var(--px) var(--a10); }
.wb-swatch:hover { background: var(--raised-hover); }
.wb-swatch[aria-checked="true"] { background: var(--raised-selected); box-shadow: inset 0 0 0 var(--px) var(--line-4); }
.wb-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the other people's pointers */
.wb-cursors { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.wb-cursor { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; color: var(--c); transition: transform 60ms linear; will-change: transform; }
.wb-cursor[hidden] { display: none; }
.wb-cursor > svg { flex: none; margin: -3px 0 0 -4px; }
.wb-cursor > span { margin: 14px 0 0 -4px; padding: 2px 6px; border-radius: var(--r-key); background: var(--c); color: var(--gray-0); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wb-cursor { transition: none; } }

/* the field a shape's words are written in, over the shape */
.wb-edit { position: absolute; z-index: 1; margin: 0; border: 0; border-radius: 0; background: transparent; outline: none; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; caret-color: var(--accent); user-select: text; -webkit-user-select: text; font-feature-settings: var(--font-features); }
.wb-edit[hidden] { display: none; }
.wb-edit::selection { background: var(--accent-tint); }

.wb-follow { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: var(--h-36); padding: 4px 4px 4px 12px; border-radius: var(--r-contain); background: var(--c); color: var(--gray-0); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); box-shadow: var(--e2); }
.wb-follow[hidden] { display: none; }
.wb-follow > [data-r="button"] { color: var(--gray-0); }
.wb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the keys */
.wb-keys { width: min(720px, calc(100vw - 32px)); }
.wb-keys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.wb-keys-grid h3 { margin: 0 0 8px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink-3); }
.wb-keys-grid dl { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.wb-keys-grid dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
.wb-keys-grid dt { display: flex; gap: 3px; }
.wb-keys-grid dd { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }

/* the bench */
.wb-bench-card { top: 16px; left: 16px; flex-direction: column; align-items: flex-start; gap: 10px; width: min(460px, calc(100% - 32px)); padding: 16px; }
.wb-bench-card h1 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
.wb-bench-status, .wb-bench-summary { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
.wb-bench-card [data-r="table"] { width: 100%; }

/* a phone: the panels move out of each other's way */
@media (max-width: 720px) {
  .wb-title { width: 128px; }
  .wb-net > span, .wb-top-right [data-r="sync"] > [data-part="label"] { display: none; }
  .wb-tools { left: 8px; right: 8px; bottom: 8px; transform: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .wb-zoom { bottom: 64px; left: 8px; }
  .wb-style { top: auto; bottom: 64px; right: 8px; max-height: 45%; width: 220px; }
  .wb-top-left { left: 8px; } .wb-top-right { right: 8px; }
}