/* =========================================================================
   纸感设计语言 · graph 页（发现关联）专属样式
   规范：docs/pr/0221-2026-07-15-notebook-design-spec.md §6(graph)
   全局视图 = 移植旧站 canvas 力导向渲染器，中皮换到纸感（见 graph.js）。
   局部视图 = 复用共享手绘图组件（graph.css / GraphEngine.mount）。
   全屏舞台：不走三栏骨架，页首下方整块给图。
   ========================================================================= */

/* 全屏舞台容器（页首之下占满） */
.gstage{position:relative;height:calc(100vh - var(--row)*4);min-height:440px;
  border:1.5px solid var(--margin-soft);border-radius:6px 14px 8px 12px/12px 8px 14px 6px;
  overflow:hidden;margin-top:calc(var(--row)*.5);}

/* —— 全局视图：canvas 图 + 悬浮控件 —— */
.gv-board{position:absolute;inset:0;}
.gv-board canvas{display:block;width:100%;height:100%;cursor:grab;}
.gv-board canvas.dragging{cursor:grabbing;}

/* 左上：当前焦点标题 + 一句提示 */
.gv-head{position:absolute;left:22px;top:18px;max-width:44%;pointer-events:none;}
.gv-head h1{font-size:23px;font-weight:700;color:var(--pen-deep);line-height:calc(var(--row)*1.1);
  margin:0;transform:rotate(-.5deg);}
.gv-head .gv-tip{font-size:13.5px;color:var(--ink-soft);line-height:var(--row);margin:2px 0 0;}

/* —— 本页专属搜索：翻索引直达某概念的局部图（≠ 右上角跨页查找）—— */
.gv-find{position:absolute;left:22px;top:calc(var(--row)*2.4);width:min(300px,42%);
  pointer-events:auto;z-index:6;}
.gv-find .gf-field{display:flex;align-items:baseline;gap:8px;
  border-bottom:1.6px solid var(--pen);padding-bottom:3px;}
.gv-find .gf-cue{font-size:13px;color:var(--pen-deep);white-space:nowrap;transform:rotate(-.5deg);}
.gv-find input{flex:1;min-width:0;border:none;background:transparent;outline:none;
  font-family:var(--hand);font-size:15px;color:var(--ink);}
.gv-find input::placeholder{color:var(--ink-soft);}
/* 下拉候选：夹进纸缝的一叠便签 */
.gf-list{margin-top:6px;background:var(--paper);
  border:1.5px solid var(--margin);border-radius:6px 12px 7px 11px/11px 7px 12px 6px;
  box-shadow:2px 3px 0 rgba(178,86,52,.12);overflow:hidden;max-height:52vh;overflow-y:auto;}
.gf-list:empty{display:none;}
.gf-item{display:block;padding:6px 12px;cursor:pointer;line-height:calc(var(--row)*.9);
  border-bottom:1px solid var(--margin-soft);}
.gf-item:last-child{border-bottom:none;}
.gf-item:hover,.gf-item.on{background:var(--hi-soft);}
.gf-item .gf-t{font-size:15px;color:var(--ink);}
.gf-item:hover .gf-t,.gf-item.on .gf-t{color:var(--pen-deep);font-weight:700;}
.gf-item .gf-d{font-size:12.5px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gf-empty{padding:6px 12px;font-size:13px;color:var(--ink-soft);font-style:italic;}
/* 命中关键词高亮：荧光笔轻扫 */
.gf-item mark{background:var(--hi);color:inherit;border-radius:3px;padding:0 1px;}

/* 右下：缩放 + 计数 */
.gv-viewbar{position:absolute;right:20px;bottom:18px;display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;}
.gv-zoom{display:inline-flex;gap:0;border:1.5px solid var(--pen);
  border-radius:48% 55% 45% 52%/55% 45% 55% 48%;overflow:hidden;background:var(--paper);}
.gv-zoom button{font-family:var(--hand);font-size:14px;color:var(--pen-deep);background:none;border:none;
  padding:3px 12px;cursor:pointer;line-height:var(--row);}
.gv-zoom button:hover{background:var(--hi-soft);}
.gv-zoom button#gvZoomReset{font-size:12.5px;border-left:1px solid var(--margin-soft);
  border-right:1px solid var(--margin-soft);}
.gv-count{font-size:12.5px;color:var(--ink-soft);}
.gv-count b{color:var(--pen-deep);}

/* 悬浮 tooltip（近看某节点） */
.gv-tooltip{position:absolute;z-index:5;max-width:300px;pointer-events:none;
  background:var(--paper);border:1.5px solid var(--margin);
  border-radius:6px 12px 7px 11px/11px 7px 12px 6px;padding:8px 12px;
  box-shadow:2px 3px 0 rgba(178,86,52,.12);}
.gv-tooltip small{display:block;font-size:12px;color:var(--ink-soft);line-height:var(--row);}
.gv-tooltip strong{display:block;font-size:15.5px;color:var(--pen-deep);line-height:calc(var(--row)*.9);margin:1px 0 3px;}
.gv-tooltip span{display:block;font-size:13px;color:var(--ink);line-height:calc(var(--row)*.86);}

/* —— 局部视图：复用手绘图组件，只留返回 —— */
/* 不透明纸底完整盖住全局 canvas（否则全局那帧会透上来，两图叠着显示）*/
.gv-local{position:absolute;inset:0;display:none;
  background:
    repeating-linear-gradient(var(--paper),var(--paper) calc(var(--row) - 1px),
      var(--rule) calc(var(--row) - 1px),var(--rule) var(--row)),
    var(--paper);}
.gv-local.show{display:block;}
.gv-local .gcanvas{position:absolute;inset:0;}
.gv-back{position:absolute;left:22px;top:18px;z-index:6;
  font-size:14.5px;font-weight:700;color:var(--pen-deep);
  border:1.5px solid var(--pen);border-radius:52% 60% 45% 55%/60% 45% 55% 45%;
  padding:3px 14px;background:var(--paper);cursor:pointer;}
.gv-back:hover{background:var(--hi-soft);}

/* 局部图中心焦点提示 */
.gv-local .gl-focus{position:absolute;right:22px;top:18px;z-index:6;
  font-size:13.5px;color:var(--ink-soft);pointer-events:none;}
.gv-local .gl-focus b{color:var(--pen-deep);}
.gv-local .gcanvas{transform-origin:center;will-change:transform;}
.graph-keyboard-list:focus-within{position:absolute!important;z-index:12;left:18px;bottom:72px;width:min(340px,calc(100% - 36px))!important;
  height:auto!important;max-height:46%;margin:0!important;padding:10px 12px!important;overflow:auto!important;clip:auto!important;
  white-space:normal!important;background:var(--paper);border:1.5px solid var(--pen)!important;border-radius:8px 13px 9px 12px/12px 9px 13px 8px;
  box-shadow:2px 3px 0 rgba(178,86,52,.12);}
.graph-keyboard-list p{margin:0 0 4px;color:var(--pen-deep);font-weight:700;}
.graph-keyboard-list ul{list-style:none;margin:0;padding:0;}
.graph-keyboard-list a{display:block;padding:4px 6px;color:var(--ink);}
.graph-keyboard-list a:hover{background:var(--hi-soft);color:var(--pen-deep);}

@media (max-width:760px){
  .gstage{height:calc(100dvh - 178px);min-height:480px;margin-top:8px;}
  .gv-board canvas,.gv-local{touch-action:none;}
  .gv-head{left:14px;top:12px;max-width:66%;}
  .gv-head h1{font-size:20px;}
  .gv-head .gv-tip{display:none;}
  .gv-find{left:14px;right:14px;top:calc(var(--row)*1.8);width:auto;}
  .gv-viewbar{right:12px;bottom:12px;}
  .gv-zoom button{min-width:44px;min-height:44px;padding:6px 10px;}
  .gv-count{margin:0;}
  .gv-back{left:12px;top:12px;min-height:44px;padding:7px 14px;}
  .gv-local .gl-focus{right:12px;top:16px;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gv-local .gcanvas{top:52px;height:calc(100% - 52px);}
}