/* The board is the workspace's second column, so the library shelf stays visible and
 * papers can be dragged in; fullscreen (real Fullscreen API) gives it the whole screen. */
#board-view{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper);color:var(--ink);font-size:12px}
#board-view[hidden]{display:none}
#board-view:fullscreen{border-radius:0}
.board-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface,var(--paper))}
.board-toolbar .board-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.board-toolbar .board-right{margin-left:auto}
/* Containment: the toolbar carries the tools and the few always-useful controls; everything else
 * lives in a menu that drops over the canvas, so opening one never reflows or scrolls the board. */
.board-bar{position:relative}
.board-menus{margin-left:auto}
.board-menu-button{white-space:nowrap}
.board-menu-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.board-menu{position:absolute;top:100%;left:8px;z-index:7;display:none;flex-direction:column;gap:8px;min-width:min(260px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:62vh;overflow:auto;margin-top:2px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:0 14px 30px rgba(30,40,30,.16)}
.board-menu.is-open{display:flex}
.board-inspector{left:auto;right:8px;min-width:min(320px,calc(100vw - 24px))}
.board-menu-row,.board-menu-section{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.board-menu-label{flex-basis:100%;font-size:10px;letter-spacing:.4px;color:var(--muted)}
.board-view-group{gap:2px;padding-left:5px;border-left:1px solid var(--line)}
.board-file-list{display:flex;flex-direction:column;gap:4px;max-height:42vh;overflow:auto}
.board-file-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;font-size:11px}
.board-file-row.is-current{border-color:var(--dsw-alias-link);background:var(--dsw-alias-interactive-bg-hover)}
.board-file-row strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.board-file-row small{color:var(--muted);font-size:10px;white-space:nowrap}
.board-status:empty{display:none}
.board-toolbar .board-check{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.board-toolbar .board-check input{accent-color:var(--dsw-alias-link);margin:0}
.board-toolbar .board-field input[type=number]{width:64px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:inherit;font-size:12px}
.board-toolbar .board-sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.board-tool{font:inherit;font-size:12px;padding:5px 9px;min-height:30px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:inherit;cursor:pointer}
.board-tool:hover{background:var(--dsw-alias-interactive-bg-hover)}
.board-tool[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.board-toolbar .button{font-size:12px;padding:5px 9px;min-height:30px}
.board-toolbar .button:disabled,.board-toolbar .board-tool:disabled{opacity:.5;cursor:default}
.board-title{font:inherit;font-size:13px;font-weight:600;min-width:150px;max-width:280px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:inherit}
.board-field{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:11px}
.board-field select{font:inherit;font-size:12px;max-width:220px;padding:5px 6px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:inherit}
.board-status{font-size:11px;color:var(--muted);min-width:0;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-status.is-error{color:var(--dsw-alias-state-error-primary);font-weight:500}
.board-status.is-saved{color:var(--dsw-alias-state-success-primary)}
.board-conflict{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--dsw-alias-state-warn-tertiary);color:var(--dsw-alias-state-warn-label)}
.board-conflict[hidden]{display:none}
.board-stage{position:relative;flex:1;min-height:280px;overflow:hidden;background-color:var(--paper);background-image:radial-gradient(circle,var(--line) 1px,transparent 1px);touch-action:none}
#board-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default}
#board-canvas.is-pan{cursor:grab}
#board-canvas.is-panning{cursor:grabbing}
#board-canvas.is-drawing{cursor:crosshair}
/* Until the board record loads, the canvas is present but cannot be drawn on. */
.board-stage.is-loading #board-canvas{cursor:progress}
.board-node{cursor:move}
.board-node-shape{fill:var(--dsw-alias-bg-layer-2);stroke:var(--line);stroke-width:1.5}
.board-node-kind-note .board-node-shape{fill:var(--dsw-alias-state-warn-tertiary);stroke:var(--dsw-alias-state-warn-label)}
/* A sticky note: square corners, a turned-up corner and a soft lift off the canvas. */
.board-node-kind-note{filter:drop-shadow(0 2px 2px rgba(40,45,35,.18))}
.board-node-fold{fill:var(--dsw-alias-state-warn-label);opacity:.28;pointer-events:none}
.board-node-kind-paper .board-node-shape{fill:var(--dsw-specific-bubble);stroke:var(--dsw-alias-link)}
.board-node.is-selected .board-node-shape{stroke:var(--dsw-alias-link);stroke-width:2}
.board-node.is-ai .board-node-shape{stroke-dasharray:5 3}
.board-node-text{font:500 13px var(--dsw-font-family);fill:var(--ink);pointer-events:none;white-space:pre-wrap}
.board-node-meta{font:400 11px var(--dsw-font-family);fill:var(--muted);pointer-events:none}
.board-node-handle{fill:var(--paper);stroke:var(--dsw-alias-link);stroke-width:1.5}
.board-edge{stroke:var(--line);stroke-width:1.6;fill:none}
.board-edge-hit{stroke:transparent;stroke-width:12;fill:none;cursor:pointer}
.board-edge.is-selected{stroke:var(--dsw-alias-link);stroke-width:2.4}
/* The line a connect gesture is still dragging: one element, moved instead of re-appended. */
.board-edge-preview{stroke:var(--dsw-alias-link);stroke-width:1.6;pointer-events:none}
.board-edge-label{font:400 11px var(--dsw-font-family);fill:var(--muted);pointer-events:none}
.board-marquee{fill:var(--dsw-alias-interactive-bg-active);stroke:var(--dsw-alias-link);stroke-width:1;stroke-dasharray:4 3}
.board-node.is-connect-source .board-node-shape{stroke:var(--dsw-alias-link);stroke-width:3;stroke-dasharray:6 3}
.board-waypoint{fill:var(--paper);stroke:var(--dsw-alias-link);stroke-width:2;cursor:move}
.board-marquee[hidden]{display:none}
.board-editor-layer{position:absolute;inset:0;pointer-events:none}
/* The editor sits *on* the shape: an opaque rounded box would hide a diamond or a sticky note
 * behind a rectangle while the reader is naming it (the reported "diamond starts as a rect"). */
/* While a node is being edited, its own text is hidden: the editor is a translucent overlay, so the
   old text (or the （空） placeholder) would otherwise show through behind the caret. */
.board-node.is-editing .board-node-text,.board-node.is-editing .board-node-meta{visibility:hidden}
.board-text-editor{position:absolute;pointer-events:auto;font:500 13px var(--dsw-font-family);line-height:1.4;padding:6px 8px;border:1px dashed var(--dsw-alias-link);border-radius:4px;background:transparent;color:var(--ink);resize:none;box-sizing:border-box;overflow:auto}
@supports (background:color-mix(in srgb,red 50%,transparent)){.board-text-editor{background:color-mix(in srgb,var(--dsw-alias-bg-layer-1) 66%,transparent)}}.board-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;color:var(--muted);pointer-events:none}
.board-empty[hidden]{display:none}
.board-empty strong{color:var(--ink);font-size:14px}
.board-dialog{border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:14px;width:min(460px,calc(100vw - 32px))}
.board-dialog::backdrop{background:var(--dsw-alias-bg-mask-1)}
.board-dialog h2{font-size:15px;margin:0 0 8px}
.board-dialog .board-picker{max-height:240px;overflow:auto;display:grid;gap:2px;margin:8px 0}
/* Content, style and a draw.io box do not fit a laptop viewport at once; the dialog scrolls so
   the actions at the bottom stay reachable instead of hanging below the screen. */
.board-source-dialog{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
/* Its action row follows the scroll instead of sitting below the fold, so 「校验并应用」 is
   reachable without hunting for it. */
.board-source-dialog .dialog-actions{position:sticky;bottom:-14px;background:var(--paper);z-index:1}
.board-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.board-source-grid textarea{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow:auto;min-height:220px}
.board-source-grid code{font-size:11px;color:var(--muted)}
#board-source-status.is-error{color:var(--dsw-alias-state-error-primary)}
@media (max-width:820px){.board-source-grid{grid-template-columns:1fr}}
.board-dialog .board-picker-row{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.board-dialog .board-picker-row:hover{background:var(--dsw-alias-interactive-bg-hover)}
.board-dialog .board-picker-row input{flex:none;margin-top:3px;accent-color:var(--dsw-alias-link)}
.board-dialog .board-picker-row span{display:grid;gap:2px;min-width:0}
.board-dialog .board-picker-row strong{font-weight:500;overflow-wrap:anywhere}
.board-dialog .board-picker-row small{color:var(--muted);font-size:10px}
.board-dialog .board-picker button{font:inherit;text-align:left;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:inherit;cursor:pointer}
.board-dialog .board-picker button:hover{background:var(--dsw-alias-interactive-bg-hover)}
.board-dialog .board-picker small{display:block;color:var(--muted);font-size:10px}
/* The source dialog carries a row of source/Mermaid/draw.io actions. A non-wrapping flex row
   pushed the leftmost ones outside the dialog box, where they were unreachable behind the
   modal backdrop, so the row wraps instead. */
.board-dialog .dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:10px}
.board-dialog .field{display:grid;gap:4px;margin:6px 0}
.board-dialog input,.board-dialog select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:inherit}
body.board-mode .detail-pane{display:none}
/* Pure canvas: the board is the only thing on screen, no Fullscreen API required. */
body.board-focused .topbar,body.board-focused .library-pane,body.board-focused .detail-pane,
body.board-focused .site-header,body.board-focused .site-foot{display:none}
body.board-focused .workspace{grid-template-columns:minmax(0,1fr)}
body.board-focused #board-view{grid-column:1}
.board-shelf{border-bottom:1px solid var(--line);padding:8px 12px 6px}
.board-shelf>summary{cursor:pointer;font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center}
.board-shelf>summary span:first-child{font-weight:600;color:var(--ink);font-size:12px}
.board-shelf-list{display:grid;gap:2px;margin:6px 0 2px;max-height:190px;overflow:auto}
.board-shelf-row{display:flex;gap:6px;align-items:baseline;padding:4px 6px;border:1px solid var(--line);border-radius:7px;font-size:11px}
.board-shelf-row strong{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.board-shelf-row small{color:var(--muted);font-size:10px;white-space:nowrap}
.board-shelf-row button{font-size:10px;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.board-shelf-row.is-linked{border-color:var(--dsw-alias-link)}
/* A narrow pane cannot show a library column and a canvas at once, and the app's own
 * single-pane layout would stack the board under the shelf. Whenever the board is open in a
 * narrow container it takes the whole pane, so pressing 「画板」 in the library never leaves the
 * canvas half-visible or hides the reader for nothing. */
/* A narrow pane cannot show a library column and a canvas at once, and the app's own single-pane
 * layout would otherwise stack the board under the shelf. Whenever the board is open in a narrow
 * container it takes the whole pane. */
@media (max-width:640px){
  .board-toolbar{gap:4px;padding:6px}
  .board-title{min-width:110px;max-width:100%}
  body.board-mode .workspace{display:block}
  body.board-mode .library-pane{display:none}
  body.board-mode #board-view{height:100%}
  .board-toolbar .board-tools{order:1;flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;gap:2px;padding-bottom:2px}
  .board-toolbar .board-tools .board-sep{display:none}
  .board-toolbar .board-tool{padding:5px 6px;min-width:38px}
  #board-files-open{order:2;flex:none}
  /* A narrow toolbar shows the name inside the file menu, not in the trigger. */
  .board-menu-name{display:none}
  .board-menus{order:2;margin-left:auto}
  /* The save state rides with the menus; the selection count would duplicate the canvas. */
  #board-status{order:2;flex:1 1 auto;min-width:0;max-width:none}
  #board-selection{display:none}
  .board-toolbar .board-quick{order:3;flex-basis:100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;gap:6px}
  .board-toolbar .board-quick .board-view-group{flex-wrap:nowrap}
  /* Still anchored under the bar: a static position would drop the panel over the toolbar and
   * swallow the trigger that opened it. */
  .board-menu{left:4px;right:4px;max-width:none}
  .board-inspector{left:4px;right:4px}
}