/* Доска — отдельное рабочее пространство, без элементов навигации кабинета. */
body.board-open .shell-edge,
body.board-open .shell-sidebar,
body.board-open .shell-scrim { visibility: hidden; pointer-events: none; }
.board-stage { z-index: 200; font-family: Onest, sans-serif; }
.board-stage .board-bar { min-height: 64px; padding: 10px 16px; gap: 12px; flex-wrap: nowrap; }
.board-identity { min-width: 0; display: grid; gap: 3px; }
.board-stage .board-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-stage .board-save-status { font-size: 11px; max-width: 260px; white-space: normal; }
.board-retry { padding: 0; justify-self: start; font: inherit; font-size: 11px; color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.board-retry[hidden] { display: none; }
.board-history { display: flex; gap: 2px; padding-left: 12px; border-left: 1px solid var(--line); }
.board-stage .draw-btn { min-width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); }
.board-stage .draw-btn:hover { background: var(--frame-bg); color: var(--text); }
.board-stage button:disabled { opacity: .35; cursor: default; }
.board-stage :is(button,summary,input,select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.board-stage .board-body { position: relative; }
.board-stage .board-tool-row { position: absolute; z-index: 5; left: 16px; top: 16px; width: auto; }
.board-stage .board-tools { flex-direction: column; flex-wrap: nowrap; padding: 5px; gap: 3px; background: var(--surface); border-radius: 10px; box-shadow: 0 4px 18px #0000001c; max-height: none; overflow: visible; }
.board-stage .tool-btn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 6px; color: var(--text-2); }
.board-stage .tool-btn.active { background: var(--accent-soft); color: var(--accent); }
.board-stage .tool-btn:hover { background: var(--frame-bg); color: var(--text); }
.board-stage .tool-btn .ic { width: 21px; height: 21px; }
.board-stage .tool-key { font: 9px Onest, sans-serif; right: 3px; bottom: 2px; opacity: .8; }
.board-stage .tool-sep { width: 24px; height: 1px; margin: 4px 0; }
.board-stage .board-shape-wrap > .tool-btn { border-radius: 6px; }
.board-stage .board-shape-menu { top: 0; left: calc(100% + 14px); border: 0; box-shadow: 0 4px 20px #00000026; }
.board-stage .board-props { top: 0; left: calc(100% + 12px); right: auto; min-width: 0; width: 218px; padding: 10px; gap: 10px; border: 0; box-shadow: 0 4px 20px #00000026; }
.board-props-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-props-head strong { font-size: 14px; }
.board-stage .board-props-head .tool-btn { width: 28px; height: 28px; }
.board-stage .board-props-head .ic { width: 16px; height: 16px; }
.board-stage .board-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.board-stage .board-swatch { width: 30px; height: 30px; }
.board-stage .board-width { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 12px; }
.board-stage .board-width input { grid-row: 2; grid-column: 1 / -1; width: 100%; }
.board-stage .board-width-val { grid-row: 1; grid-column: 2; font-variant-numeric: tabular-nums; }
.board-options [data-board-tool-preview] { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--board-tool-color, var(--text)); border: 1px solid var(--line); }
.board-options:disabled { visibility: hidden; height: 0; margin: -3px 0 0; }
.board-stage .board-viewport { outline: none; background: var(--frame-bg); }
.board-stage .board-world { background-color: #fbfaf7; background-image: radial-gradient(#c7c4be 1px, transparent 1px); background-size: 24px 24px; }
.board-world[data-grid=lines] { background-image: linear-gradient(to right, #d9d6cf80 1px, transparent 1px), linear-gradient(to bottom, #d9d6cf80 1px, transparent 1px); background-size: 40px 40px; }
.board-world[data-grid=none] { background-image: none; }
.board-stage .board-obj { user-select: none; }
.board-stage .board-obj-grip { display: none; }
.board-stage .board-obj.is-selected { outline: none; }
.board-stage .board-selection { position: absolute; pointer-events: none; border: calc(1.5px / var(--board-zoom, 1)) solid var(--accent); z-index: 100004; }
.board-stage .board-selection[hidden] { display: none; }
.board-selection-grip { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; padding: 0; border: 1.5px solid var(--accent); border-radius: 2px; background: var(--surface); pointer-events: auto; cursor: nwse-resize; transform: scale(calc(1 / var(--board-zoom, 1))); transform-origin: center; }
.board-stage .board-selbox { border: calc(1px / var(--board-zoom, 1)) solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 0; z-index: 100002; }
.board-stage .board-marquee { z-index: 100005; border: calc(1px / var(--board-zoom, 1)) solid var(--accent); }
.board-stage .board-marquee[hidden] { display: none; }
.board-stage .board-text-input { z-index: 100006; }
.board-vector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board-stage .board-canvas { z-index: 100001; }
.board-eraser-cursor { position: absolute; pointer-events: none; border: 1px solid #555; border-radius: 50%; background: #ffffff55; z-index: 3; transform: translate(-50%, -50%); }
.board-eraser-cursor[hidden] { display: none; }
.board-stage .board-viewport.is-eraser { cursor: none; }
.board-selection-actions { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 3px; padding: 4px 8px; background: var(--surface); border-radius: 8px; box-shadow: 0 4px 18px #0000001c; }
.board-selection-actions[hidden] { display: none; }
.board-selection-actions [data-board-selection-count] { padding-inline: 4px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-stage .board-selection-actions .tool-btn { width: 36px; height: 36px; }
.board-navigation { position: absolute; bottom: 16px; right: 16px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; background: var(--surface); box-shadow: 0 4px 18px #0000001c; }
.board-stage .board-zoom { min-width: 58px; font: 12px Onest, sans-serif; font-variant-numeric: tabular-nums; }
.board-help { position: absolute; bottom: 16px; left: 16px; z-index: 6; }
.board-help > summary { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; background: var(--surface); box-shadow: 0 4px 18px #0000001c; font-weight: 600; list-style: none; }
.board-help > summary::-webkit-details-marker { display: none; }
.board-help > div { position: absolute; left: 0; bottom: 46px; width: 330px; max-width: calc(100vw - 32px); padding: 18px; border-radius: 10px; background: var(--surface); box-shadow: 0 4px 24px #00000026; font-size: 12px; }
.board-help p { margin: 10px 0 0; }
.board-help kbd { font: inherit; font-weight: 600; }
.board-stage .board-sheet-pop { top: calc(100% + 12px); right: 0; left: auto; min-width: 284px; max-height: calc(100dvh - 88px); overflow-y: auto; padding: 16px; gap: 12px; }
.board-stage .board-sheet-pop label { font-size: 12px; }
.board-task-picker { display: flex; align-items: center; gap: 8px; }
.board-stage .board-task-picker select { max-width: 180px; }
@media (max-width: 700px) {
  .board-stage .board-bar { padding: 8px 10px; gap: 6px; min-height: 60px; flex-wrap: wrap; }
  .board-identity { flex: 1; }
  .board-stage .board-title { max-width: 160px; font-size: 12px; }
  .board-stage .board-save-status { font-size: 10px; max-width: 160px; }
  .board-stage .board-bar-spacer { display: none; }
  .board-history { border: 0; padding: 0; gap: 0; }
  .board-stage .board-bar .btn { min-height: 36px; padding: 6px 8px; font-size: 12px; }
  .board-stage .board-bar [data-attach-board] { order: 2; }
  .board-task-picker { order: 2; width: 100%; }
  .board-stage .board-task-picker select { flex: 1; max-width: none; }
  .board-stage .board-tool-row { left: 8px; top: 12px; }
  .board-stage .board-tools { padding: 3px; gap: 1px; }
  .board-stage .tool-btn { width: 40px; height: 40px; }
  .board-stage .board-props { width: min(218px, calc(100vw - 78px)); left: calc(100% + 8px); }
  .board-stage .board-props-head .tool-btn { width: 30px; height: 30px; }
  .board-stage .tool-sep { margin-block: 3px; }
  .board-selection-actions { left: 66px; right: 8px; top: 12px; transform: none; justify-content: space-between; padding: 4px; flex-wrap: wrap; }
  .board-selection-actions [data-board-selection-count] { font-size: 11px; }
  .board-stage .board-selection-actions .tool-btn { width: 32px; height: 36px; }
  .board-stage .board-selection-actions .btn { font-size: 11px; padding: 4px; min-height: 36px; }
  .board-navigation { right: 8px; bottom: 10px; }
  .board-help { left: 12px; bottom: 12px; }
  .board-stage .board-sheet-pop { position: fixed; top: 68px; left: auto; right: 10px; width: min(300px, calc(100vw - 20px)); }
}
@media (max-height: 600px) {
  .board-stage .board-tool-row { top: 8px; }
  .board-stage .board-tools { display: grid; grid-template-rows: repeat(5, 40px); grid-auto-flow: column; gap: 2px; }
  .board-stage .board-tools .tool-sep { display: none; }
  .board-stage .tool-btn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .board-stage * { transition: none !important; } }
/* Наглядные толщины: один выбор — один штрих, отдельные настройки инструментов. */
.board-width-presets { display: flex; gap: 4px; }
.board-width-presets[hidden], .board-stage .board-width[hidden] { display: none; }
.board-stroke-preset { display: grid; place-items: center; flex: 1; min-width: 44px; height: 48px; padding: 3px; border: 1px solid transparent; border-radius: 9px; color: var(--text); background: transparent; cursor: pointer; }
.board-stroke-preset svg { width: 44px; height: 38px; }
.board-stroke-preset:hover { background: var(--frame-bg); }
.board-stroke-preset[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); }
.board-stage.board-stage--embedded { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.board-stage.board-stage--full { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 300; }
.board-stage--embedded:not(.board-stage--full) [data-board-close] { display: none; }
.board-stage .board-swatch { border-radius: 50%; }
.board-stage .board-swatch--pick { background: conic-gradient(red,#ff0,lime,cyan,blue,magenta,red); }
.board-stage { container-type: inline-size; }
/* Компактная палитра одного размера во встроенной и полной доске. */
.board-stage .board-width-presets { gap: 2px; }
.board-stage .board-stroke-preset { min-width: 40px; height: 42px; padding: 2px; border-radius: 6px; }
.board-stage .board-stroke-preset svg { width: 36px; height: 30px; }
.board-stage .board-task-picker select { padding-right: 36px; text-overflow: ellipsis; }