@charset "UTF-8";
/**
 * 专题页 · 右侧悬浮板块导航
 * ==========================
 * 只在 page-grad.php / page-zmt.php / page-uifw.php 上加载（见 inc/setup.php）。
 *
 * 电脑版专用，<1200px 直接不显示：
 *   · 窄桌面（1200–1799）：贴右边缘的一条 25px 数字栏，悬停或 Tab 聚焦时向左滑出全名；
 *   · 宽桌面（≥1800）：一直展开，直接看到全部板块名。
 *
 * 滑出用 transform 而不是改 right：不触发布局重排，也不会多出横向滚动条
 * （position:fixed 的盒子超出视口不计入文档可滚动区）。
 *
 * 配色跟着页面主色走：.fxgrad / .fxzmt / .fxuifw 各自给 --fxtoc-c 与 --fxtoc-soft，
 * 导航是它们的子节点，直接继承，不用再做一套主题。
 */

/* 三个专题页各自的页面主色（grad 是薄荷青，zmt / uifw 是天空蓝），
   导航挂在它们的 article 里，直接用继承拿色 */
.fxgrad{ --fxtoc-c:#9fe6de; --fxtoc-soft:rgba(93,220,205,.16); }
.fxzmt,
.fxuifw{ --fxtoc-c:#8fd6ff; --fxtoc-soft:rgba(143,214,255,.16); }

.fxtoc{
  --fxtoc-c:    #8fd6ff;                  /* 兜底：万一没挂在专题页里 */
  --fxtoc-soft: rgba(143,214,255,.16);    /* 主色的低透明底 */
  --fxtoc-rail: 25px;                     /* 收起时露出的宽度＝数字列 */
  position:fixed; right:0; top:50%;
  z-index:45;
  transform:translate(calc(100% - var(--fxtoc-rail)), -50%);
  transition:transform .26s var(--fx-ease);
  will-change:transform;
  font-size:13px;
  line-height:1.2;
}
/* 悬停 / 键盘落到里面就滑出来。焦点态必须一起管：只做 hover 的话键盘用户点不到 */
.fxtoc:hover,
.fxtoc:focus-within{ transform:translate(0, -50%); }

/* 宽桌面：右侧空槽放得下整块面板，就一直展开，不用悬停去找。
   阈值按实测算：内容右边界 =(100vw-1400)/2+1372，面板实宽 99~113px，
   1600px 视口下留 5~19px 空隙，再窄才退回数字条。 */
@media (min-width:1600px){
  .fxtoc{ right:10px; transform:translate(0, -50%); }
}

.fxtoc-in{
  display:flex; flex-direction:column;
  padding:5px; border-radius:12px 0 0 12px;
  background:rgba(11,14,20,.74);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--fx-line); border-right:0;
  box-shadow:0 20px 48px -28px rgba(0,0,0,.95);
}
@media (min-width:1600px){
  .fxtoc-in{ border-radius:12px; border-right:1px solid var(--fx-line); }
}

/* 小标题：收起时只剩左边那个图标，展开才看到「本页板块」 */
.fxtoc-h{
  display:flex; align-items:center; gap:7px; margin:0 0 5px;
  font-size:12.5px; font-weight:600; color:var(--fx-t3);
  white-space:nowrap;
}
.fxtoc-slot{
  flex:none; width:20px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fx-mono); font-size:9.5px; letter-spacing:-.04em;
}
.fxtoc-tx{
  display:block; max-width:150px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.fxtoc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }

.fxtoc-a{
  position:relative; display:flex; align-items:center; gap:7px;
  padding:6px 9px 6px 0; border-radius:8px;
  color:var(--fx-t3); text-decoration:none;
  transition:color .18s var(--fx-ease), background .18s var(--fx-ease);
}
.fxtoc-a:hover{ color:var(--fx-t1); background:rgba(255,255,255,.05); }

/* 激活态：左边一条主色竖条 + 主色底 + 数字与文字一起变亮 ——
   滚动到哪个板块，哪一项立刻变样，扫一眼就知道自己在哪。 */
.fxtoc-a.is-on,
.fxtoc-a[aria-current="true"]{
  color:#fff; background:var(--fxtoc-soft);
  box-shadow:inset 2px 0 0 var(--fxtoc-c);
}
.fxtoc-a.is-on .fxtoc-slot,
.fxtoc-a[aria-current="true"] .fxtoc-slot{
  color:var(--fxtoc-c); font-weight:700;
  text-shadow:0 0 12px var(--fxtoc-c);
}
.fxtoc-a.is-on .fxtoc-tx{ font-weight:600; }

/* 被筛选条收掉的板块：这一项也跟着灰掉、点不动，免得点进去一片空白 */
.fxtoc-li.is-off{ opacity:.3; pointer-events:none; }

.fxtoc-top{
  position:relative; display:flex; align-items:center; gap:7px;
  margin-top:6px; padding:8px 9px 7px 0;
  border:0; border-radius:8px; background:transparent;
  font:inherit; color:var(--fx-t3); cursor:pointer; text-align:left;
  white-space:nowrap;
  transition:color .18s var(--fx-ease), background .18s var(--fx-ease);
}
.fxtoc-top::before{
  content:""; position:absolute; left:5px; right:5px; top:0; height:1px;
  background:var(--fx-line);
}
.fxtoc-top:hover{ color:var(--fx-t1); background:rgba(255,255,255,.05); }
.fxtoc-top:hover .fxtoc-slot{ color:var(--fxtoc-c); }
.fxtoc-top.is-on .fxtoc-slot{ color:var(--fxtoc-c); }

/* 太窄、太矮、系统要减少动态效果时退让 */
@media (max-width:1199px){ .fxtoc{ display:none; } }
@media (max-height:560px){ .fxtoc{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .fxtoc, .fxtoc *{ transition:none !important; }
}

/* ---------------------------------------------------------------------------
 * 锚点落位：顶部有 64px 吸附顶栏 + 吸附筛选条，直接跳会被它们盖住标题。
 * JS 点击时是按实测高度滚的，这里的数值只兜「别人分享的 #锚点链接」和刷新。
 * ------------------------------------------------------------------------ */
.fxgrad-block, .fxgrad-chap, .fxgrad-grp,
.fxzmt-block, .fxzmt-chap, .fxzmt-grp,
.fxuifw-block, .fxuifw-sec{ scroll-margin-top:152px; }