/* =========================================================================
   纸感设计语言 · 手绘关系图组件（共享）
   规范：docs/pr/0221-2026-07-15-notebook-design-spec.md §5（手写层）/ §7 / §8
   由 GraphEngine.mount 渲染的局部手绘图样式。read / graph / case 页共用。
   ========================================================================= */

/* 画布 */
.gcanvas{position:relative;width:100%;height:100%;}
svg.gwires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
svg.gwires path{fill:none;stroke:var(--ink-soft);stroke-width:1.4;opacity:.42;stroke-linecap:round;}

/* 关系词：手写在线上的小字 */
.grelword{position:absolute;z-index:2;font-size:12.5px;color:var(--ink-soft);background:var(--paper);
  padding:0 5px;transform:translate(-50%,-50%);white-space:nowrap;}

/* 节点：手画不规则圈 */
.gnode{position:absolute;z-index:3;transform:translate(-50%,-50%);cursor:pointer;text-align:center;}
.gnode .bubble{display:inline-block;padding:5px 14px;color:var(--ink);font-size:14.5px;
  border:1.6px solid var(--ink-soft);background:rgba(247,243,232,.86);
  transition:border-color .16s,color .16s;position:relative;white-space:nowrap;}
.gnode:hover .bubble{border-color:var(--pen);color:var(--pen-deep);}
/* 焦点：单层绿椭圆（勿加直角 ::after 第二层轮廓，规范 §7） */
.gnode.focus .bubble{font-size:19px;font-weight:700;color:var(--pen-deep);padding:8px 22px;
  border:2.2px solid var(--pen);background:var(--paper);box-shadow:2px 3px 0 rgba(18,122,87,.14);}

/* 逐笔入场（规范 §8）：节点 penIn、连线 draw，按 --k 序号错峰 */
.gcanvas.drawing .gnode{animation:penIn .34s both;animation-delay:calc(var(--k,0)*.045s + .1s);}
.gcanvas.drawing .grelword{animation:penIn .3s both;animation-delay:calc(var(--k,0)*.045s + .34s);}
.gcanvas.drawing svg.gwires path{stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:draw .5s ease forwards;animation-delay:calc(var(--k,0)*.045s + .18s);}
.gcanvas.drawing .gnode.focus{animation:penIn .3s both;animation-delay:0s;}
@keyframes penIn{from{opacity:0;transform:translate(-50%,-50%) scale(.8);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes draw{to{stroke-dashoffset:0;}}