/* =========================================================================
   纸感设计语言 · 手绘关系图组件（共享）
   规范：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;}}

/* 手机不压缩蜘蛛网，改成可连续追踪的关系脉络。 */
.mobile-rel-map{min-height:100%;padding:14px 12px 24px;}
.mobile-rel-focus{position:relative;padding:16px 16px 14px;border:1.8px solid var(--pen);
  border-radius:12px 20px 14px 18px/18px 14px 20px 12px;background:rgba(247,243,232,.92);
  box-shadow:2px 3px 0 rgba(18,122,87,.11);}
.mobile-rel-focus::after{content:"";position:absolute;left:20px;bottom:-15px;height:15px;
  border-left:1.5px dashed var(--margin);}
.mobile-rel-focus small{display:block;color:var(--pen-deep);font-size:12px;font-weight:700;}
.mobile-rel-focus h2{margin:2px 0 5px;color:var(--pen-deep);font-size:22px;line-height:1.35;}
.mobile-rel-focus p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mobile-rel-focus > span{display:block;margin-top:8px;color:var(--ink-soft);font-size:12px;}
.mobile-rel-flow{position:relative;padding:20px 0 0 18px;}
.mobile-rel-flow::before{content:"";position:absolute;left:20px;top:0;bottom:18px;
  border-left:1.5px dashed var(--margin);opacity:.72;}
.mobile-rel-item{position:relative;width:100%;min-height:66px;margin:0 0 10px;padding:10px 42px 10px 20px;
  display:flex;align-items:center;text-align:left;border:1px solid var(--margin-soft);background:rgba(247,243,232,.82);
  color:var(--ink);border-radius:8px 15px 10px 13px/13px 10px 15px 8px;cursor:pointer;}
.mobile-rel-item:active{background:var(--hi-soft);border-color:var(--pen);}
.mobile-rel-dot{position:absolute;left:-4px;top:50%;width:13px;height:13px;transform:translateY(-50%);
  border:1.8px solid var(--pen);border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px var(--paper);}
.mobile-rel-copy{display:block;min-width:0;}
.mobile-rel-copy small{display:block;color:var(--pen-deep);font-size:12px;line-height:1.3;}
.mobile-rel-copy strong{display:block;margin-top:2px;font-size:15.5px;line-height:1.45;font-weight:700;}
.mobile-rel-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--pen);font-size:18px;}
.mobile-rel-empty{margin:0;padding:12px;color:var(--ink-soft);font-size:14px;}
.gcanvas.drawing .mobile-rel-item{animation:mobileRelIn .28s both;animation-delay:calc(var(--k,0)*.045s + .08s);}
@keyframes mobileRelIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:760px){
  .gcanvas.mobile-relations{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
}