/* my-docs 目录树：角标可点、热区放大、朝向指示。
   分工说明：折叠类名 is-collapsed 由同目录的 tree.js 翻（原因见 tree.js 头部注释——
   插件自带那段树脚本的展开路径在这版上不工作：它按 <details> 写、模板给的却是 div，
   而且后代可见性走 hidden 属性，不是光靠类名）；
   子项显隐仍用插件自己那条 .mdocs-nav-item.is-collapsed>.mdocs-nav-children{display:none}。 */

/* 角标朝向：这里不再写任何 transform。
   原生本来就是这个语义——它把展开的 90° 旋转加在 .mdocs-nav-arrow 这个外层 span 上
   （实测展开态该 span 的 computed transform = matrix(0,1,-1,0)，收起态链上无 transform），
   图标本身朝右（path M6 3l5 5-5 5z，viewBox 0 0 16 16，顶点 (11,8)），
   所以收起=朝右、展开=朝下，正是想要的效果。
   我早先在自己那层 svg 上又加了一次 rotate(90deg)，两层叠成 180°，展开态才看起来朝左。
   这里只留一条过渡，让原生那个旋转有个动画，不改变它的方向。 */
.mdocs-nav-arrow { transition: transform .18s ease; }

/* 角标可点性。原生热区实测 16x26，太小 */
.mdocs-nav-arrow[data-mdocs-arrow] { cursor: pointer; pointer-events: auto; position: relative; }
.mdocs-nav-arrow.is-empty { cursor: default; }        /* 叶子没有子项，不参与折叠 */

/* 热区向外扩到约 32x34，但不动盒模型：用 ::before 伪元素。
   试过直接改 width/height（文字右移 10px）和 padding+负 margin 两种写法，
   前者推挤整棵树 833 行、后者会牵动行内布局，都不如伪元素干净。 */
.mdocs-nav-arrow[data-mdocs-arrow]::before {
  content: "";
  position: absolute;
  left: -8px; right: -8px; top: -4px; bottom: -4px;
  border-radius: 8px;
}
.mdocs-nav-arrow[data-mdocs-arrow]:not(.is-empty):hover::before {
  background: rgba(53, 139, 255, .14);
}
/* 触屏没有 hover，热区再扩一圈 */
@media (hover: none), (pointer: coarse) {
  .mdocs-nav-arrow[data-mdocs-arrow]::before { left: -11px; right: -11px; top: -7px; bottom: -7px; }
}