/* ==========================================================================
   v6.6 · 模块五：经验库 =「会生长的思维树」
   只写新增 / 覆盖，不动 style.css、style-v63.css、style-v65.css 的原有规则。

   1. 枝干改为有粗细变化的实心手绘线（.tbranch）；
      原来的 .branch 退化成"隐形中轴线"，仅供模块三的流动光点复制 d。
   2. 经验节点由花朵改为水彩果实（.fr-*）。
   3. 树 / 列表 双视图（.lib-switch / .lib-list）。
   4. 节点过多时切 Canvas（.tree-canvas-host）。
   ========================================================================== */

/* ---------- 1. 树 / 列表 切换（右上角，朱印正下方） ---------- */
/* 经验册封面右上角已经被「薪传」朱印占了（top:20 right:20 的 48×48），
   切换按钮就贴在它下面，仍然是视觉上的右上角。 */
.brand-hero .lib-switch {
  position: absolute;
  top: 78px;
  right: 22px;
  z-index: 6;
}
.lib-switch {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 3px;
  background: var(--bg-deep, #F6EFE2);
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(120, 96, 70, .07);
}
.lib-switch .lib-sw {
  padding: 6px 16px;
  font-family: var(--font-hand, inherit);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink-soft, #8A7B6C);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.lib-switch .lib-sw:hover { color: var(--accent-deep, #C97038); }
.lib-switch .lib-sw.on {
  color: #FBF6E7;
  background: linear-gradient(135deg, var(--accent, #E8925A), var(--accent-deep, #C97038));
  box-shadow: 0 2px 7px rgba(201, 112, 56, .28);
}

/* 图例里原来每种状态是一个彩色小圆环（.tree-legend i）。
   v6.6 换成真果实图标后，要把那个圆环的尺寸/描边/底色清掉，否则会"环 + 果"叠在一起。 */
.tree-legend .lg-fruit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
  background: none;
  border-radius: 0;
  margin-right: 3px;
  vertical-align: middle;
}
.tree-legend .lg-fallback { border-color: var(--line); background: #fff; }

/* ---------- 2. 有粗细变化的手绘枝干 ---------- */
/* 老的中轴线：只用来给流动光点取 d，本身不画 */
.tree-svg .branch,
.tree-svg .branch.on-path { stroke: none; }

.tree-svg .tbranch {
  fill: var(--accent-deep, #C97038);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: v66Grow .78s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes v66Grow {
  from { opacity: 0; transform: scaleY(.08); }
  to   { opacity: 1; transform: scaleY(1); }
}
.tree-svg .tr-trunk { fill: var(--accent-deep, #C97038); }
.tree-svg .tr-type  { fill: var(--accent-deep, #C97038); }
.tree-svg .tr-grade { fill: var(--secondary, #7A8B6F); }
.tree-svg .tr-twig  { fill: var(--secondary, #7A8B6F); }
.tree-svg .tr-leaf  { fill: var(--secondary-soft, #B6BFA8); }

/* 末端小分叉上的小叶片（树冠密度，随经验条数变密） */
.tree-svg .twig-leaf {
  fill: rgba(122, 139, 111, .42);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: v66Grow .9s ease both;
}
.tree-svg .twig-leaf.on-path { fill: rgba(232, 146, 90, .55); }

/* 命中发光（模块三）：暖橙渐变填充 + 柔光 + 呼吸 */
.tree-svg .tbranch.on-path {
  fill: url(#cySunGrad);
  filter: url(#cySoftGlow);
  animation: v66SunBreath 2.6s ease-in-out infinite;
}
@keyframes v66SunBreath {
  0%, 100% { fill-opacity: 1; }
  50%      { fill-opacity: .78; }
}
/* 搜索 / 检索联动时，非命中枝干压暗（用 fill-opacity，避免被生长动画的 opacity 覆盖） */
.tree-svg.searching .tbranch:not(.on-path) { fill-opacity: .3; }
.tree-svg.searching .twig-leaf:not(.on-path) { fill-opacity: .18; }

/* ---------- 3. 水彩果实节点 ---------- */
.tree-svg .fr { pointer-events: none; }
.tree-svg .fr-body { transition: transform .18s ease; transform-box: fill-box; transform-origin: center; }
.tree-svg .leaf:hover .fr-body { transform: scale(1.14); }
.tree-svg .leaf.dim { opacity: .2; }
.tree-svg .leaf.hit .fr-body { transform: scale(1.08); }

/* AI 检索联动：被引用的那条经验加一圈虚线，一眼找到 */
.tree-svg .leaf.focused .leaf-focus-ring {
  animation: v66FocusSpin 9s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes v66FocusSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 新入库：抽芽 → 长新叶 */
.tree-svg .leaf.new .fr {
  animation: v66Sprout 1.25s cubic-bezier(.2, 1.5, .4, 1) both;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes v66Sprout {
  0%   { opacity: 0; transform: scale(.1) rotate(-26deg); }
  45%  { opacity: 1; transform: scale(1.32) rotate(8deg); }
  72%  { transform: scale(.94) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- 4. 空库小树苗：轻轻呼吸 ---------- */
.sapling-svg .sapling-bud {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: v66Breathe 3.6s ease-in-out infinite;
}
@keyframes v66Breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2.5px) scale(1.05); }
}

/* ---------- 4b. 窄屏（纵向）树：验证状态同样用果实图标，替掉原来的小圆点 ---------- */
.tree-tall .tall-leaves li.has-fruit { padding-left: 2px; }
.tree-tall .tall-leaves li.has-fruit::before { display: none; }
.tree-tall .tall-leaves li .v-fruit {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 5. 列表视图 ---------- */
.lib-list { padding: 4px 2px 8px; }
.lib-list-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 560px;
  margin: 2px auto 16px;
  padding: 8px 14px;
  background: var(--bg-card, #FFFDF8);
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 999px;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(120, 96, 70, .06));
}
.lib-list-bar .ll-ico { flex: 0 0 auto; display: flex; opacity: .8; }
.lib-list-bar input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--ink, #4A3F35);
}
.lib-list-bar .ll-clear {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-soft, #8A7B6C);
  font-size: 15px;
  cursor: pointer;
}

.ll-group { margin-bottom: 18px; }
.ll-ghead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 8px;
  font-family: var(--font-hand, inherit);
  font-size: 15.5px;
  letter-spacing: 1px;
  color: var(--ink, #4A3F35);
}
.ll-ghead .ll-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent, #E8925A);
  box-shadow: 0 0 0 3px rgba(232, 146, 90, .16);
}
.ll-ghead b {
  margin-left: auto;
  font-family: var(--font-body, inherit);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft, #8A7B6C);
}
.ll-grade { margin: 0 0 8px 14px; padding-left: 12px; border-left: 1.5px dashed var(--line-dashed, #DCCFB6); }
.ll-gh {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--secondary-deep, #5B7A5A);
}
.ll-gh span { font-size: 12px; color: var(--ink-soft, #8A7B6C); }
.ll-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--bg-card, #FFFDF8);
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ll-item:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #E8925A);
  box-shadow: 0 4px 12px rgba(201, 112, 56, .13);
}
.ll-item:focus-visible { outline: 2px solid var(--accent, #E8925A); outline-offset: 2px; }
.ll-item.focused { border-color: var(--accent, #E8925A); background: #FFF7EC; }
.ll-fruit { flex: 0 0 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.ll-main { flex: 1 1 auto; min-width: 0; display: block; }
.ll-main .ll-t {
  display: block;
  font-size: 14px;
  color: var(--ink, #4A3F35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-main .ll-s {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-soft, #8A7B6C);
}
.ll-arrow { flex: 0 0 auto; color: var(--ink-soft, #8A7B6C); font-size: 17px; }
.ll-empty { padding: 30px 10px; text-align: center; color: var(--ink-soft, #8A7B6C); font-size: 14px; }
.ll-foot { padding: 6px 4px 0; font-size: 12px; color: var(--ink-soft, #8A7B6C); text-align: center; }

/* ---------- 6. 检索联动提示条 ---------- */
.tree-focus-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 6px 8px;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--accent-deep, #C97038);
  background: #FFF5E8;
  border: 1px solid rgba(232, 146, 90, .38);
  border-radius: 12px;
}
.tree-focus-bar .tfb-ico { flex: 0 0 auto; display: flex; }
.tree-focus-bar span { flex: 1 1 auto; min-width: 0; }
.tree-focus-bar button {
  flex: 0 0 auto;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--ink-soft, #8A7B6C);
  background: var(--bg-card, #FFFDF8);
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 999px;
  cursor: pointer;
}

/* ---------- 7. Canvas 兜底渲染 ---------- */
.tree-canvas-host { padding-bottom: 8px; }
.tree-canvas { display: block; max-width: 100%; height: auto; }
.tree-canvas-tip {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft, #8A7B6C);
}

/* ---------- 8. 无障碍：尊重"减少动态效果" ---------- */
@media (prefers-reduced-motion: reduce) {
  .tree-svg .tbranch,
  .tree-svg .twig-leaf,
  .tree-svg .tbranch.on-path,
  .tree-svg .leaf.new .fr,
  .tree-svg .leaf.focused .leaf-focus-ring,
  .sapling-svg .sapling-bud {
    animation: none !important;
  }
  .ll-item:hover { transform: none; }
}

/* ---------- 9. 窄屏 ---------- */
@media (max-width: 720px) {
  .lib-switch .lib-sw { padding: 5px 13px; font-size: 13px; }
  /* 窄屏：朱印会挤到标题上，切换按钮改回居中排在封面底部 */
  .brand-hero .lib-switch {
    position: static;
    display: inline-flex;
    margin: 12px auto 0;
  }
}