/* Shared editing surfaces: one canvas, one contextual panel, no camera shifts. */
.board-experience #panel { display:none; right:var(--board-properties-right,12px); max-height:var(--board-properties-height,calc(100dvh - 100px)); overflow-y:auto; }
.board-experience.board-properties-open #panel:not([hidden]) { display:block; }
#board-more-tools { display:grid; color:var(--accent); font-size:24px; }
#board-quick-undo { display:none; }
#selection-actions { position:fixed; z-index:32; display:flex; align-items:center; gap:4px; padding:6px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:var(--shadow); overflow-x:auto; scrollbar-width:thin; }
#context-menu { z-index:75; max-height:calc(100dvh - 24px); overflow-y:auto; }
#selection-actions[hidden] { display:none; }
#selection-actions .p-btn { white-space:nowrap; flex-shrink:0; min-height:36px; border:0; border-radius:10px; background:transparent; color:var(--text); padding:8px 12px; font:550 12px var(--font); cursor:pointer; }
#selection-actions .p-btn:hover { background:var(--panel-2); }
#selection-actions .p-btn:disabled { opacity:.45; cursor:default; }
#selection-actions .compact-icon svg { display:none; }
.board-properties-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.board-properties-header button { min-width:40px; min-height:40px; font-size:24px; }
.board-object-list { display:grid; gap:8px; }
.board-object-list button { text-align:left; }
.material-panel { font-size:14px; }
.material-panel .board-properties-header strong { font-size:17px; line-height:1.3; overflow-wrap:anywhere; }
.material-field { display:grid; gap:7px; margin:14px 0; font-size:12px; color:var(--muted); }
.material-field input,.material-field select,.material-field textarea { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:10px 12px; font:14px var(--font); line-height:1.5; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--panel-2); }
.material-field textarea { resize:vertical; min-height:100px; }
.material-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.material-panel .p-btn { min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); font:500 13px var(--font); cursor:pointer; }
.material-actions .p-btn:hover,.material-template:hover { border-color:var(--accent); }
.material-note { font-size:12px; line-height:1.65; color:var(--muted); }
.material-details { margin:14px 0; border-top:1px solid var(--line); padding-top:12px; }
.material-details summary { min-height:32px; cursor:pointer; font-size:13px; color:var(--text); }
.material-template,.material-layer { display:block; width:100%; box-sizing:border-box; padding:14px; margin:10px 0; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--panel-2); text-align:left; }
.material-template { cursor:pointer; }
.material-template strong,.material-template small { display:block; line-height:1.6; }
.material-template small { color:var(--muted); font-size:12px; font-weight:400; }
.material-image-preview { display:block; max-width:100%; max-height:160px; object-fit:contain; margin:12px auto; border-radius:12px; }
.word-format-bar { position:fixed; z-index:95; pointer-events:auto; display:flex; gap:4px; padding:6px; max-width:calc(100vw - 16px); overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:var(--shadow); }
.word-format-bar[hidden] { display:none; }
.word-format-bar .p-btn { white-space:nowrap; min-height:44px; border:0; border-radius:9px; color:var(--text); background:var(--panel-2); padding:8px; cursor:pointer; }
.pen-presets { display:flex; gap:6px; margin:12px 0; }
.pen-preset { display:grid; justify-items:center; flex:1; gap:7px; min-height:62px; padding:10px 6px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--panel-2); font:12px var(--font); cursor:pointer; }
.pen-preset::before { content:''; width:28px; height:4px; border-radius:3px; background:var(--pen-color); }
.material-panel :disabled { opacity:.5; cursor:default; }
.material-panel textarea:focus-visible,.word-format-bar button:focus-visible,.pen-preset:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.board-experience button:focus-visible,.board-experience select:focus-visible,.board-experience input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.board-experience .sw { min-width:26px; min-height:26px; }
.board-experience #panel .ai-ask { color:var(--accent); }
.board-view-controls { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.board-view-controls button { flex:1; min-height:40px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text); cursor:pointer; }
.ink-search { display:grid; gap:16px; }
.ink-search input { width:100%; padding:12px; font:inherit; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); }
.ink-search-results { display:grid; gap:8px; max-height:40vh; overflow:auto; }
.ink-search-results button { white-space:pre-wrap; text-align:left; }
.ink-search-note { color:var(--muted); font-size:13px; line-height:1.6; }
.board-replay { position:fixed; z-index:52; left:50%; transform:translateX(-50%); bottom:16px; width:min(640px,calc(100vw - 24px)); padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow); }
.board-replay header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.board-replay input { width:100%; margin:12px 0; }
.board-replay p { max-height:18dvh; overflow:auto; line-height:1.6; }
.board-replay small { display:block; margin-top:8px; color:var(--muted); }
body.board-replaying .teacher-bar,body.board-replaying .lesson-workspace,body.board-replaying #selection-actions { visibility:hidden; }
.board-experience #context-menu { max-width:calc(100vw - 16px); max-height:calc(100dvh - 150px); overflow-y:auto; overscroll-behavior:contain; }
@media(max-width:720px) {
  .board-experience #topbar { left:8px; right:8px; top:max(8px,env(safe-area-inset-top)); height:48px; gap:4px; padding:0 6px; }
  .board-experience #topbar > .divider,.board-experience #topbar > .spacer,.board-experience #peers,
  .board-experience #btn-undo,.board-experience #btn-redo,.board-experience #btn-theme,.board-experience #btn-help,
  .board-experience #btn-ai,.board-experience #btn-call,.board-experience #btn-share,.board-experience #btn-account { display:none; }
  .board-experience #topbar > .tb-btn { width:40px; height:44px; flex:0 0 40px; }
  .board-experience #board-name { flex:1; width:0; min-width:32px; max-width:none; padding:8px 4px; font-size:13px; text-overflow:ellipsis; }
  .board-experience #net-badge { flex:0 0 8px; width:8px; height:8px; padding:0; overflow:hidden; font-size:0; background:var(--badge-local,var(--accent)); }
  .board-experience #readonly-badge { display:none; }
  .board-experience #readonly-badge:not([hidden]) { display:grid; place-items:center; flex:0 0 16px; width:16px; font-size:0; padding:0; }
  .board-experience #readonly-badge:not([hidden])::before { content:'🔒'; font-size:12px; }
  .board-experience #btn-teacher { color:var(--accent); background:var(--panel-2); border-radius:12px; }
  .board-experience #toolbar { left:8px; right:8px; top:calc(max(8px,env(safe-area-inset-top)) + 58px); bottom:auto; width:auto; max-height:none; padding:5px 6px; display:flex; flex-direction:row; transform:none; justify-content:space-between; gap:4px; overflow:visible; }
  .board-experience #toolbar .tool { flex:0 0 42px; width:42px; height:44px; }
  .board-experience #toolbar > .tool-sep,.board-experience #toolbar > .tool:not([data-tool="select"]):not([data-tool="pen"]):not([data-tool="eraser"]):not(#board-quick-undo):not(#board-more-tools) { display:none; }
  .board-experience #toolbar [data-tool="select"] { order:0; }
  .board-experience #toolbar [data-tool="pen"] { order:1; }
  .board-experience #toolbar [data-tool="eraser"] { order:2; }
  .board-experience #toolbar [data-tool="text"] { order:3; }
  .board-experience #toolbar [data-tool="hand"] { order:4; }
  .board-experience #board-more-tools { display:grid; order:5; }
  .board-experience #board-quick-undo { display:grid; order:3; font-size:26px; }
  .board-experience #flyout { position:fixed!important; top:132px!important; left:8px!important; width:min(304px,calc(100vw - 16px)); max-height:calc(100dvh - 156px); overflow:auto; }
  .board-experience.board-properties-open #panel { top:auto; left:8px; right:8px; bottom:var(--board-dock-bottom,64px); width:auto; max-height:min(52dvh,var(--board-properties-height,400px)); padding:16px; border-radius:20px; overflow:auto; z-index:45; }
  .board-properties-header { position:sticky; top:-16px; padding:8px 0; background:var(--panel); z-index:1; }
  #selection-actions .p-btn { min-height:42px; padding:9px 11px; }
  #selection-actions .compact-icon { width:42px; padding:9px; }
  #selection-actions .compact-icon svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  #selection-actions .compact-icon span { display:none; }
  .board-experience #zoombar { left:8px; bottom:max(8px,env(safe-area-inset-bottom)); }
  .board-experience.lesson-active #zoombar { display:none; }
  .board-experience .sw { min-width:32px; min-height:32px; }
  .board-experience #panel .p-btn,.board-experience #panel .seg button { min-height:40px; min-width:36px; }
  .board-experience #find { position:fixed; top:64px; left:8px; right:8px; width:auto; padding:8px; border-radius:14px; background:var(--panel); z-index:55; box-shadow:var(--shadow); }
  .board-experience #find-input { min-width:0; width:100%; }
  .board-experience #context-menu .menu-item { min-height:44px; }
}