/* ═══════════════════════════════════════════════════════════════════
   .topic-tabs 共享样式 (v3.0.0-alpha.5)
   ───────────────────────────────────────────────────────────────────
   单一来源宪法 — 这套 tab 样式在多页面用:
     - templates/site/topic.html      话题详情页 4 tab (百科/产品/文章/博客)
     - templates/site/index.html      首页评论流 3 tab (推荐/关注/热门)
     - 后续可扩展更多页面 (用户主页 / 频道页 / ...)
   
   视觉特征 — 搜索弹层风, 直角不圆角:
     - 默认: text-2 灰, 14px, 400 weight, 无背景无圆角
     - active: text-1 白, 500 weight, 底部 3px 下划线 (左右各 24 缩进)
     - hover: 背景透明 (强制), 不变形 (避免被父容器 hover 样式污染)
     - 跟 .home-wrap padding 配合, 不需要额外左右边距
   ═══════════════════════════════════════════════════════════════════ */
.topic-tabs {
  font-family: inherit;
}
.topic-tab {
  display: inline-block;
  padding: 18px 38px;
  margin: 0;
  color: var(--ae-text-2);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative;
  transition: color var(--ae-transition);
  cursor: pointer;
  font-family: inherit;
}
.topic-tab:hover {
  color: var(--ae-text-2);
  background: transparent !important;
  border-radius: 0 !important;
}
.topic-tab.is-active {
  color: var(--ae-text-1);
  font-weight: 600;
}
.topic-tab.is-active::after {
  content: '';
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: -1px;
  height: 3px;
  background: var(--ae-text-1);
}

/* ═══════════════════════════════════════════════════════════════════
   v3.0.0-alpha.5: Floating tabs (滚动后浮到 header 同位置, 像素级对齐)
   ───────────────────────────────────────────────────────────────────
   原位 tab 滚出视野时, body 末尾的浮层 fade-in 显示一组 tab.
   核心: position:fixed + JS 实时同步 left/width
        → floating tab 跟原位 tab X 坐标 100% 一致, 上下完美对齐
        → sidebar 拖动 / 切换 / window resize 都触发同步
   ═══════════════════════════════════════════════════════════════════ */
.topic-tabs-floating {
  position: fixed;
  top: 0;
  left: 0;                   /* JS 会实时同步 */
  width: 0;                  /* JS 会实时同步 */
  height: var(--ae-header-h, 56px);
  display: flex;
  align-items: flex-end;     /* tab 底部对齐 header 底部, 跟原位 active 下划线视觉连续 */
  z-index: 50;               /* 浮在内容之上 (但低于 modal/popover) */
  background: var(--ae-header-bg);
  backdrop-filter: blur(var(--ae-blur));
  -webkit-backdrop-filter: blur(var(--ae-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-bottom: 1px solid var(--ae-glass-border);  /* 视觉跟原位 tab border-bottom 一致 */
}
.topic-tabs-floating.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* floating 内 .topic-tab 跟原位字号/weight/active 完全一致, 不覆盖任何东西 */
/* 唯一例外: active 下划线位置必须跟 padding 配合 (这里 padding 跟原位一致, 不调) */

/* 移动端隐藏 (header 空间不够) */
@media (max-width: 640px) {
  .topic-tabs-floating { display: none !important; }
}



/* alpha.7+ patch: 防 floating-tabs 初始加载/切换时的闪烁

   原因: opacity:0 的 transition 在 IntersectionObserver 首次异步回调前会让用户看到一闪而过

   解决: 默认 visibility:hidden 强制不渲染; 切换时延迟 visibility 等 fade-out 完成 */

.topic-tabs-floating {

  visibility: hidden;

  transition: opacity 0.2s ease, visibility 0s linear 0.2s;

}

.topic-tabs-floating.is-visible {

  visibility: visible;

  transition: opacity 0.2s ease, visibility 0s linear 0s;

}