家谱：修「鼠标移上去卡片会跳」+ 卡片拆成「头像进资料 / 姓名换中心」两处点击区

用户 2026-10-03 反馈两条。

一、「鼠标放在某个人的头像上，那个框会移动一下位置」——**根因是库的 CSS**：
    库的 family-chart.css:517 有一条
      `.f3 div.card:hover > div { transform: translate(0, -2px); }`
    而我们的 .kin-card 正是 `div.card` 的**直接子 div**。卡片当时用
    `transform: translate(-50%,-50%)` 居中 —— 于是鼠标一进卡片，这条规则就把
    居中 transform **整份覆盖**成 translate(0,-2px)。
    实测（1600×1000 视口、库缩放 0.9）：
      卡片 translate(-59px,-66px)  →  translate(0,-2px)
      整张卡向右下跳 **53.1 × 57.6 屏幕像素**（正好半张卡），并带 0.2s 过渡，
      所以看起来就是"框移动了一下"。
    修法两条：
      ① 居中不再依赖 transform，改用 `inset: 0` + `margin: auto`
         （绝对定位 + inset 全 0 + margin auto = 在包含块里居中）；
      ② 把库那条 :hover 位移归零（`.kin-chart.f3 div.card:hover > div { transform: none }`）——
         2px 的"上浮"仍在，实测 dy=-1.8px。在 app.css 里覆盖（它加载在库 CSS 之后，
         同特异性后写的赢，不需要 !important），**不改 vendor 里那份文件**
         （升级库会整份覆盖、改动静默消失）。
    ⚠️ 660 别改回 translate(-50%,-50%) 居中 —— 那正是这次的 bug。

二、「以他为中心」按钮不要了，改成把卡片分成两处点击区：
     · 头像 .kin-ph  → 进这个人的资料页（people/show&id=）
     · 姓名 .kin-nm  → 以他为中心重画家谱（?r=kin&focus=）
    两个都是 <a>（而不是一个 a + 一个 button）：点名字换中心本质就是"换个 URL
    重新渲染"。换成 <a> 之后，原来那段"给按钮绑 click + keydown +
    mousedown/pointerdown/touchstart 三处阻止冒泡"的代码**整段删掉** ——
    那是"用按钮干链接的活"才需要的补丁；顺带键盘 / 中键新窗口打开都天然可用。
    两张悬停提示（"资料" / "以他为中心"）分挂到头像、姓名下面，只在指针悬停时显形。
    服务端那份"谁有姻亲在图外"的 branch 计算也一并删掉（渲染没了，留着是死代码）。

验证：
  · 家谱可视化检查 26 → **29** 条全过，其中新增两条正是本次的守卫：
    ⑬ 卡片不靠 transform 居中；⑭ 鼠标移到卡片上**不位移**（原来是 53×58px）。
  · 反向验证：把 CSS 改回旧写法 → ⑬⑭ 立刻变红且实测 dx=53.1 dy=57.6；
    还原后回到全绿（断言不是永远绿的）。
  · 点击区实测：点姓名 → /index.php?r=kin&focus=9；点头像 → /index.php?r=people/show&id=9。
  · e2e 773/0（四条家谱断言跟着新口径更新）· 第 5 轮专项 91/0 · 几何 428/0 ·
    移动端 684/0 · 交互 97/0 · 升级 126/0 · 部署反向验证 3/3。
  · 部署脚本新增三条静态断言（不许 transform 居中 / 必须有 inset:0 /
    必须把库的 :hover 位移归零），防止以后被改回去。
  · 线上 templates/kin/tree.php 与 assets/css/app.css 的 md5 与本地一致；
    kin-focus 已清零、r=kin&focus= 在位、CSS 里 'inset: 0' 8 处。

assets/css/app.css

@@ -633,15 +633,43 @@ textarea.input { min-height: 76px; resize: vertical; }
   border-radius: 10px;
   box-shadow: 0 1px 3px rgba(43,38,32,.10);
   color: var(--ink);
-  transform: translate(-50%, -50%);    /* 坐标给的是卡片中心 */
   transition: border-color .15s ease, box-shadow .15s ease;
   overflow: hidden;
   pointer-events: auto;                 /* 父 .card_cont 是 none，这里恢复 */
 }
+/* ⚠️⚠️ 「鼠标放上去卡片会跳」的根因就在这里（用户 2026-10-03 反馈）。
+   库自带样式里有一条：`.f3 div.card:hover > div { transform: translate(0px,-2px); }`
+   —— 我们的 .kin-card 正好是 `div.card` 的**直接子 div**，于是鼠标一进卡片，
+   这条规则就把**我们用来居中的 `transform: translate(-50%,-50%)` 整个覆盖掉**。
+   实测（1600×1000 视口、库缩放 0.9）：卡片从 translate(-59px,-66px) 变成
+   translate(0,-2px)，整张卡**向右下跳 53.1 × 57.6 屏幕像素**（正好是半张卡）。
+   修法：不再用 transform 居中，改用 `inset: 0` + `margin: auto`
+   —— 绝对定位 + inset 全 0 + margin auto 就是"在包含块里居中"，
+   完全不依赖 transform，库那条规则再怎么覆盖也影响不到位置。
+   （也因此**不需要**去覆盖库的 :hover —— 少一处 !important，少一处将来的漂移。）
+   ⚠️ 别改回 `left/top: 50% + transform: translate(-50%,-50%)`：那正是这次的 bug。 */
+.kin-card {
+  inset: 0;
+  margin: auto;
+}
+/* ⚠️⚠️ 还要把库那条 `:hover` 位移**归零**（用户反馈的第二半）。
+   库的 family-chart.css:517 有：
+     `.f3 div.card:hover > div { transform: translate(0, -2px); }`
+   它不只覆盖居中（那已由上面的 inset+margin auto 解决），还会给卡片加一个
+   纯视觉的"上浮 2px"——实测 mouse 一进卡片，屏幕位置就 dy = **-1.8px**。
+   2px 的抖动正是用户说的「那个框会移动一下」。
+   我们的卡片是**自绘的宣纸卡**，不需要库那套"悬停上浮"装饰，所以直接归零。
+   ⚠️ 不能去改 vendor 里那份文件（升级库会整份覆盖，改动会静默消失），
+      所以在 app.css 里覆盖；app.css 在 family-chart.css **之后**加载（见 kin/tree.php），
+      同特异性下后写的赢，不需要 !important。 */
+.kin-chart.f3 div.card:hover > div { transform: none; }
+.kin-chart.f3 div.card > div { transition: none; }
 .kin-card:hover {
   box-shadow: var(--shadow-l); border-color: var(--brand-2);
 }
-/* 头像外框：**长方形**，宽度贴合头像显示宽度 */
+/* 头像外框：**长方形**，宽度贴合头像显示宽度。
+   用户 2026-10-03 第 7 条：**头像本身是链接**（点它进这个人的资料页）。
+   ⚠️ 它是 <a> 不是 <span> —— 见模板里的说明（"点哪儿去哪儿"用链接最自然）。 */
 .kin-card .kin-ph {
   width: 96px; height: 72px; border-radius: 6px; overflow: hidden;
   background: #F1E7D6; flex: 0 0 auto;
@@ -650,18 +678,9 @@ textarea.input { min-height: 76px; resize: vertical; }
 .kin-card .kin-ph img {
   width: 100%; height: 100%; object-fit: contain; display: block;
 }
-/* 右下角「以 TA 为中心」：每个人都有一个。
-   ⚠️ 单独一个 <button>（不在 <a> 里面）—— 这是"误触"的根治办法：
-      整卡若是链接，手指偏一点就先触发它跳去成员页了。 */
-.kin-card .kin-focus {
-  position: absolute; right: 3px; bottom: 3px;
-  font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 999px;
-  border: 0; background: var(--brand); color: #fff; cursor: pointer;
-  box-shadow: 0 1px 3px rgba(43, 38, 32, .25);
-  font-family: inherit;
-}
-.kin-card .kin-focus:hover { background: var(--brand-ink); }
-/* 姓名是唯一的链接入口（进成员资料页） */
+.kin-card .kin-ph:hover { box-shadow: 0 0 0 2px var(--brand-2); }
+/* 姓名：用户 2026-10-03 第 7 条改为**以他为中心看家谱**的入口（原来是进资料页）。
+   底下一行小字说明这一处能干什么 —— 不然"点名字会换一张图"没人猜得到。 */
 .kin-card .kin-nm {
   display: block;
   font-size: 12.5px; font-weight: 600; line-height: 1.25; max-width: 100%;
@@ -669,6 +688,14 @@ textarea.input { min-height: 76px; resize: vertical; }
   margin-top: 5px; color: var(--ink); text-decoration: none;
 }
 .kin-card .kin-nm:hover { color: var(--brand); text-decoration: underline; }
+/* 两张"功能提示"用极小的字，且**只在指针悬停时**出现 ——
+   不悬停时不占视觉重量（卡片本来就小，常驻两行提示会把它塞满）。 */
+.kin-card .kin-hint {
+  font-size: 9.5px; line-height: 1.2; color: var(--faint);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  max-width: 100%; opacity: 0; transition: opacity .15s ease;
+}
+.kin-card:hover .kin-hint { opacity: 1; }
 /* 称呼在姓名下面一行，用品牌色的浅字（参考实现是「(称呼)」） */
 .kin-card .kin-lb {
   font-size: 10.5px; color: var(--brand); line-height: 1.2; max-width: 100%;