/* ================= 技能图谱 =================
   🔵 2026-10-17 用户指定：Obsidian 知识图谱风格（黑底 / 细节点 / 极细灰线）
   配色严格限制在黑 / 白 / 灰三色（用户明确「没有用到橙色」）。
   实现见 nk-graph.js（Cytoscape.js 3.34.4，Obsidian 生态 Juggl 插件同款）。

   ⚠️ 坑 1：GL canvas（.gl）是 position:fixed inset:0 z-index:10，会盖住图谱，
     打开图谱时要关掉它的指针事件 + 降层级。
     🔴🔴 但作用域必须精确到 .gl —— 之前写成 `html.nk-graph-on canvas {…!important}`
        会把图谱自己的 canvas 一起关掉 → hover/click 全失效（实测 hoverCnt=0）。
        这是一个「兜底规则误伤本体」的典型坑，只选 `.gl canvas`，不碰 .nk-graph 里的。
   ⚠️ 坑 2：body 是 position:fixed + overflow:hidden，
     容器不能用 height:100vh，必须 inset:0 + absolute。 */

html.nk-graph-on .gl,
html.nk-graph-on .gl * { pointer-events: none !important; }
html.nk-graph-on .gl { z-index: 0 !important; }
html.nk-graph-on .gl canvas { pointer-events: none !important; }

/* 🔴🔴 关键坑：#nk-root 是 pointer-events:none（整个改稿层的设计），
   子元素默认继承 none → 图谱 canvas 收不到任何鼠标事件，
   hover / click / 拖拽全部失效（实测 hoverCnt=0）。
   → 这里必须显式打开，整层可交互。 */
.nk-graph {
  position: absolute;
  inset: 0;                       /* 🔴 坑 2：不用 100vh */
  z-index: 40;
  background: #000;
  display: none;
  pointer-events: auto;
}
.nk-graph.on { display: block; }
/* canvas 也必须显式给 auto —— #nk-root button/a/input 只放开了一部分标签，
   canvas 不在那个选择器里，继承 none 就点不动了。 */
.nk-graph-canvas,
.nk-graph-canvas-inner,
.nk-graph-canvas canvas { pointer-events: auto; }

/* 🔴 坑 3：Cytoscape 是异步渲染的，容器高度为 0 会让布局全压成一坨 */
.nk-graph-canvas {
  position: absolute;
  inset: 0;
  min-height: 320px;
  width: 100%;
  height: 100%;
}
/* 这层是 mountGraph 动态建的，必须撑满外层，
   否则 canvas 高度=0（实测 3024x0），节点全挤在一条线上。 */
.nk-graph-canvas-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- 库未加载 / 无数据时的占位 ---------- */
.nk-graph-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: calc(13 * var(--s));
  letter-spacing: 0;
  color: rgba(255, 255, 255, .42);
  text-align: center;
}
.nk-graph-fallback span { font-size: calc(11.5 * var(--s)); color: rgba(255, 255, 255, .26); }

/* ---------- 详情面板（点节点后右侧滑出）---------- */
/* ══════════════════════════════════════════════════════════════
   R7-P1-B：详情面板遮挡内容
   ──────────────────────────────────────────────────────────────
   原来是 320*s 宽、**全高**的右侧栏（top:0;right:0;bottom:0），
   R7 实测它固定盖住 4 个技能标签（包装结构与工艺/摄影/设计体系搭建/设计系统），
   还把 lead 说明文字的后两行也盖了。

   ✅ 改成**内容自适应高度的浮动卡片**：
      ① 高度由内容决定（max-height 限制），不再占满全高
      ② 打开时自动避开被点的那个节点 —— 点左边节点则卡片靠右，
         点右边节点则靠左（JS 里加 .panel-left 类）
      ③ 半透明 + 背景模糊，遮挡处的标签仍隐约可见
   ══════════════════════════════════════════════════════════════ */
.nk-graph-panel {
  position: absolute;
  /* 🔵 R7-P1-B：垂直中心从 50% 下移到 56%，
     避开上方的标题 + lead 说明文字（原来 lead 的第二行被卡片压住）。
     黑洞内层高 696px，6% = 42px，恰好让开 lead 的两行。*/
  top: 56%;
  right: calc(10 * var(--s));
  /* 🔵 高度由内容决定，最多占 62% 视口高 */
  max-height: 62%;
  width: calc(268 * var(--s));
  max-width: 42vw;
  padding: calc(22 * var(--s)) calc(20 * var(--s));
  background: rgba(10, 10, 11, .90);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: calc(3 * var(--s));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  /* 滑入用 transform（可逆，不触发布局）*/
  transform: translate(102%, -50%);
  transition: transform .42s var(--ease, cubic-bezier(.22,.61,.36,1));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 4;
  pointer-events: auto;
}
.nk-graph-panel.on { transform: translate(0, -50%); }
/* 点右侧节点时靠左（JS 加这个类）*/
.nk-graph-panel.panel-left {
  right: auto;
  left: calc(10 * var(--s));
  transform: translate(-102%, -50%);
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.nk-graph-panel.panel-left.on { transform: translate(0, -50%); }
.nk-graph-panel::-webkit-scrollbar { width: 0; }

.nk-graph-close {
  position: absolute;
  top: calc(12 * var(--s)); right: calc(12 * var(--s));
  width: calc(30 * var(--s)); height: calc(30 * var(--s));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, .6);
  font-size: calc(17 * var(--s));
  line-height: 1;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.nk-graph-close:hover { border-color: rgba(255, 255, 255, .7); color: #fff; }

.nk-graph-kicker {
  font-family: var(--ui);
  font-size: calc(10.5 * var(--s));
  letter-spacing: calc(1.2 * var(--s));
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  margin-bottom: calc(12 * var(--s));
}
.nk-graph-title {
  font-family: var(--ui);
  font-size: calc(25 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-0.6 * var(--s));
  font-weight: 500;
  color: #fff;
  margin: 0 0 calc(16 * var(--s));
}
.nk-graph-sum {
  font-family: var(--ui);
  font-size: calc(13.5 * var(--s));
  line-height: 1.75;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .62);
  margin: 0;
  white-space: pre-wrap;
}

/* ---------- 二级页里的「看技能图谱」入口按钮 ---------- */
.nk-sheet-graph {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: calc(22 * var(--s));
  padding: calc(11 * var(--s)) calc(20 * var(--s));
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, .78);
  font-family: var(--ui);
  font-size: calc(12.5 * var(--s));
  letter-spacing: 0;
  cursor: pointer;
  pointer-events: auto;
  /* 只过渡颜色，和今天表单按钮一个原则：无位移无缩放 */
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.nk-sheet-graph:hover {
  background: #111;
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}
.nk-sheet-graph::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .nk-graph-panel { transition: none; }
  .nk-sheet-graph { transition: none; }
}


/* ══════════════════════════════════════════════════════════════
   R6-P1-1：图谱视觉重心补偿
   ──────────────────────────────────────────────────────────────
   标题 + 说明占黑洞页顶部约 102px，图谱容器是 flex:1 吃满剩余，
   于是图谱墨迹中心比圆心低 55.1px（三档视口一致）。

   试过三条路都不行：
     ① position:absolute 铺满 page → 标题被 canvas 盖住，且 canvas
        尺寸与容器 resize 不同步，最后一行被裁
     ② 负 margin 上移容器 → -52 单位只到 29px，-89 单位就撞标题
     ③ viewport().pan() 偏移 → 会被后续 resize/center 覆盖，
        且模型单位↔渲染单位换算反复出错（实测 -186 / -400）

   ✅ 最终解：容器不动，给**内层 canvas 容器**加 padding-top。
      canvas 的绘制区 = 容器 - padding → 内容整体上移，
      而容器尺寸不变 → applyLayout 量到的 cw/ch 也不变（不用重算）。
   ══════════════════════════════════════════════════════════════ */
.nk-graph-canvas-inner{
  /* 🔴🔴🔴 R7-P1-1 更正：R7 我写成了 padding-top，方向**反了**。
   *
   * R7 实测（正确口径 canvasRect）：
   *   padding-top  0 → DY +49.5 | 36 → +67.6 | 60 → +77.4 | 80 → +111.4
   *   padding-bottom 0 → DY +49.5 | 30 → +34.5 | 60 → +19.5 | 90 → +4.5 ✅
   *
   * 原因：box-sizing:border-box 下 padding-top 压缩的是 canvas 内部可用区，
   * 而 applyLayout() 的 cy.center() 是在 padding 后的区域居中 →
   * 整个绘制区被**推下去**。padding-bottom 才是压缩下边界、把内容上移。
   *
   * ⚠️ 测几何必须用 canvas 的 rect，不是 container 的 rect：
   *     containerRect 漏掉了这段 padding，会把 DY 少算 36px（= 46×0.787），
   *     导致「+67.6 被误读成 +31.4 已修好」这种假阳性。
   */
  padding-bottom: calc(90 * var(--s));
  box-sizing: border-box;
}