/* =========================================================================
   纸感设计语言 · 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-mobile-index{display:none;}

/* 左上：当前焦点标题 + 一句提示 */
.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){
  body.graph-local-open{overflow:hidden;}
  .gstage{height:auto;min-height:calc(100dvh - 178px);margin-top:8px;overflow:visible;border:0;}
  .gv-board{position:relative;inset:auto;min-height:calc(100dvh - 190px);padding:12px 0 24px;}
  .gv-board canvas{display:none;}
  .gv-head{position:relative;left:auto;top:auto;max-width:none;padding:0 2px;}
  .gv-head h1{font-size:20px;}
  .gv-head .gv-tip{display:block;margin:2px 0 8px;font-size:13px;line-height:1.55;}
  .gv-find{position:relative;left:auto;right:auto;top:auto;width:auto;margin:8px 0 14px;z-index:10;}
  .gv-find .gf-field{min-height:44px;align-items:center;padding:2px 2px 4px;}
  .gv-viewbar{display:none;}
  .gv-mobile-index{display:block;}
  .gmi-intro{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:13px 14px;
    border-left:2px solid var(--pen);background:rgba(18,122,87,.045);
    border-radius:2px 12px 7px 4px/4px 7px 12px 2px;}
  .gmi-intro strong{color:var(--pen-deep);font-size:16px;}
  .gmi-intro span{color:var(--ink-soft);font-size:12.5px;line-height:1.55;}
  .gmi-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 7px;color:var(--pen-deep);font-weight:700;}
  .gmi-head small{color:var(--ink-soft);font-size:12px;font-weight:400;}
  .gmi-list{display:grid;gap:9px;}
  .gmi-card{position:relative;width:100%;min-height:78px;padding:11px 42px 11px 14px;display:grid;
    grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title meta" "words words";
    gap:5px 10px;text-align:left;border:1px solid var(--margin-soft);background:rgba(247,243,232,.78);
    color:var(--ink);border-radius:8px 15px 9px 13px/13px 9px 15px 8px;}
  .gmi-card:active{border-color:var(--pen);background:var(--hi-soft);}
  .gmi-title{grid-area:title;font-size:15.5px;font-weight:700;line-height:1.35;}
  .gmi-meta{grid-area:meta;color:var(--ink-soft);font-size:11.5px;white-space:nowrap;}
  .gmi-words{grid-area:words;display:flex;flex-wrap:wrap;gap:5px;}
  .gmi-words i{padding:1px 7px;border:1px dashed rgba(18,122,87,.34);border-radius:999px;
    color:var(--pen-deep);font-size:11.5px;font-style:normal;font-weight:400;}
  .gmi-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--pen);font-size:18px;}
  .gmi-more{width:100%;min-height:46px;margin:12px 0 0;border:1.5px dashed var(--pen);background:transparent;
    color:var(--pen-deep);font-weight:700;border-radius:52% 60% 45% 55%/60% 45% 55% 45%;}

  .gv-local.show{display:grid;position:fixed;z-index:60;inset:0;
    grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 12px;
    padding:max(10px,env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px));
    touch-action:auto;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-back{position:static;grid-column:1;grid-row:1;min-height:44px;padding:7px 14px;}
  .gv-local .gl-focus{position:static;grid-column:2;grid-row:1;align-self:center;max-width:100%;
    text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gv-local .gcanvas{position:relative;inset:auto;grid-column:1/-1;grid-row:2;height:auto;min-height:0;
    transform:none!important;overflow:auto;border:1.5px solid var(--margin-soft);
    border-radius:10px 16px 12px 14px/14px 12px 16px 10px;}
}