/* ========== 錨點式 sticky Tabs（任務#142 M1，IA v2 第二節共用元件） ==========
   點擊捲動至頁面內區塊＋捲動時同步高亮，不做面板切換（不像首頁 .tabs/
   .tab-panel 那樣顯示/隱藏內容）。視覺語言比照 app.css 既有 .tabs／
   .tab-btn（深色底＋品牌 cyan 底線），但獨立命名 sv-anchor-tabs／
   sv-anchor-tab-btn，避免兩套邏輯不同的 tabs 互相牽動樣式。

   Sticky top 值吃 `--sv-nav-h`——由 nav.js 的 nav 高度發布器持續量測
   .nav 實際高度後寫進 :root（ResizeObserver，見 nav.js [#177] 區塊）。
   這裡的 59px 只是 nav.js 尚未執行／載入失敗時的 fallback。

   [#177] 2026-08-16 修正：原本 top 由 anchor_tabs.js 量一次後寫成 inline
   style，但 .nav 會在載入後被事後注入的內容（tier 徽章、主題調色盤鈕、
   公告條）撐高換行，那個 inline 值就停在舊高度，往下滑整條會滑進 nav
   （z-index 20）底下被蓋住。改吃 CSS 變數後，nav 一長高這裡自動跟上。 */

.sv-anchor-tabs {
  display: flex;
  /* 舉一反三修復 20260728：--scrim-rgb 定位是「上面不放字的純遮罩」（app.css
     註解），不當承字底。改吃 --tabbar-bg（深色值＝rgba(scrim,0.7) 逐字等值
     零變化；淺色翻白系表面），根治淺色主題整條深底殘留。 */
  background: var(--tabbar-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--sv-nav-h, 59px);
  z-index: 19;
  backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: none;
}

.sv-anchor-tabs::-webkit-scrollbar { display: none; }

.sv-anchor-tab-btn {
  flex: 1 0 auto;
  background: none;
  border: none;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}

.sv-anchor-tab-btn:hover {
  color: var(--text);
}

.sv-anchor-tab-btn.active {
  /* 舉一反三修復 20260728：--on-accent 是「accent 實心底上的字」，這裡底是
     tabbar 表面不是 accent；改 --text-strong（深色值 #fff 零變化；淺色近黑，
     否則翻淺後白字消失）。 */
  color: var(--text-strong);
  border-bottom-color: var(--brand-cyan);
}