/* ============================================================================
   聽摘 TingZhai — 元件變體制 (Component Variants)
   ----------------------------------------------------------------------------
   這支檔案是全站按鈕／卡片／標籤的唯一定義來源。

   為什麼要有它（收斂前實測的數字，2026-08-12）：
     .btn  散在 6 個檔案共 40 個規則塊
           （styles.css×15、faq×8、sync×8、landing-b×5、welcome×3、episode×1）
     padding 至少四種：9px 20px／10px 20px／10px 24px／11px 26px
           ── 同一顆「開啟 App」在不同頁大小就是不一樣
     同一件事有三種命名：.outline／.btn-outline／.ghost
     .card 在 2 個檔案各寫一份、.chip 在 landing-b 與 deck 各長一套

   ----------------------------------------------------------------------------
   怎麼用（借 shadcn cva 的結構，但一行框架都沒有）：

     <a class="btn">主要動作</a>                  基底＝主要按鈕
     <a class="btn btn--outline">次要動作</a>      外框
     <a class="btn btn--ghost">最弱動作</a>        幽靈（只有框線）
     <button class="btn btn--danger">刪除</button>  危險
     <button class="btn btn--sm">小</button>        尺寸：sm ／（不加）md ／ lg

   舊 class 名一律照舊有效，HTML 一個字都不用改：
     .btn.outline ＝ .btn.btn-outline ＝ .btn--outline
     .btn.ghost                       ＝ .btn--ghost
     .btn.danger                      ＝ .btn--danger
     .btn.small                       ＝ .btn--sm
     .btn.btn-big                     ＝ .btn--lg

   ----------------------------------------------------------------------------
   兩個設計決定，先講清楚免得後人踩雷：

   1. 皮膚跟著主題走，不是跟著頁面走。
      全站在載入CSS之前由appearance.js套用裝置偏好，預設dark。
      明確light與dark各用同一組元件規則。
      所以皮膚寫成 :where(html[data-theme="light"]) 與 :where(html[data-theme="dark"])。
      用 :where() 是刻意的：它把選擇器權重壓成 0，主題皮膚跟變體一樣都是 (0,1,0)，
      誰在後面誰贏，順序即優先序，不會出現「主題把變體蓋掉」這種難查的坑。

   2. 變體只改 --btn-* 這組元件變數，不直接寫 background／color。
      基底一次把 var(--btn-*) 接到真正的屬性上，變體與各頁覆寫只要改變數。
      這樣「頁面專屬覆寫」也能安全參與（例如 landing-b 的主色按鈕），
      不會因為某一層寫死 box-shadow 而把 ghost 的「不要陰影」蓋回去。

   ----------------------------------------------------------------------------
   載入順序：tokens.css → components.css → styles.css／該頁 <style>。
   （後兩者才放頁面專屬覆寫，順序反了會整組失效。）
   ============================================================================ */


/* ────────────────────────────────────────────────────────────────────────────
   元件刻度 — 落不進 tokens.css 通用刻度的值放這裡
   tokens.css 的間距是 4 的倍數（4／8／12／16／24…），按鈕的內距天生落在半階上，
   硬塞進去反而會讓按鈕大幅變形。所以另外開一層元件刻度，數字集中在這一塊，
   之後要整體調按鈕大小只要改這裡，不用回去翻 6 個檔案。
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* 按鈕內距 md：取收斂前四種值的中位數
     直向 9／10／10／11 → 10px；橫向 20／20／24／26 → 22px
     所以每一頁的按鈕最多只差 ±2px，沒有任何一頁被改到變形。 */
  --btn-py-md: 10px;
  --btn-px-md: 22px;

  /* sm：沿用 styles.css 既有值（index／episode 共 93 顆小按鈕，動它等於全站重排） */
  --btn-py-sm: 6px;
  --btn-px-sm: 13px;

  /* lg：沿用 welcome 的 .btn-big（首頁兩組主 CTA） */
  --btn-py-lg: 16px;
  --btn-px-lg: 40px;

  /* 圖示與文字的間隙。6px 不在 4 的倍數刻度上，但改成 8px 會動到
     App 頁上百顆帶圖示的按鈕，這一輪先原樣鎖住。 */
  --btn-gap: 6px;

  /* 卡片內距：改版夜收成 tokens.css 的 --pad-card（16px）。實拍內距 12–22 四檔，只留一檔。 */
  --card-pad: var(--pad-card, 16px);

  /* 標籤內距：沿用 landing-b 既有值（該頁 43 顆 chip，動它整排會重排） */
  --chip-py: 5px;
  --chip-px: 13px;
}


/* ════════════════════════════════════════════════════════════════════════════
   A. 按鈕基底
   ════════════════════════════════════════════════════════════════════════════ */
.btn,
.btn-primary,
.btn-secondary {
  /* —— 變體介面：以下每一個變數都可以被變體或頁面覆寫 —— */
  /* 改版夜：主鍵＝ink 實心＋paper 字（深色＝米白 #f2efe9 底暖黑字 16.8:1；淺色＝墨色底米白字）。
     朱紅退出按鈕——它只剩「你現在在這裡」（進度條／當前句／卡拉OK／時間戳）一件事。 */
  --btn-bg:           var(--ink);
  --btn-fg:           var(--paper);
  --btn-bd:           transparent;
  --btn-bw:           0px;                    /* 框線寬度 */
  --btn-py:           var(--btn-py-md);
  --btn-px:           var(--btn-px-md);
  --btn-fs:           var(--fs-base);
  --btn-fw:           700;
  --btn-shadow:       none;
  --btn-lift:         0px;                    /* hover 時上浮幾 px */
  --btn-bg-hover:     color-mix(in srgb, var(--ink) 86%, var(--paper));
  --btn-fg-hover:     var(--btn-fg);
  --btn-bd-hover:     var(--btn-bd);
  --btn-shadow-hover: var(--btn-shadow);
  /* 2026-09-20 立體系統：按下的陰影與縮放也走變數——實體鍵按下要「下沉」（內陰影＋.98），
     其餘變體維持原本的 .96 純縮放。 */
  --btn-shadow-active: var(--btn-shadow);
  --btn-scale-active: 0.96;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);

  padding: var(--btn-py) var(--btn-px);
  border: var(--btn-bw) solid var(--btn-bd);
  border-radius: var(--r-full);

  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);

  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  /* ⚠️ 這裡原本是 `white-space: nowrap`。
     它擋掉的是「本來就放得下卻硬要換行」，但也讓按鈕在使用者把系統文字
     放大時衝出視窗、被裁掉且捲不到（實測 200% 時「免費開始使用（送 3 小時）」
     超出 55px）。改成 normal——瀏覽器只在真的放不下時才換行，
     一般狀態的版面經逐元素比對完全不變。 */
  white-space: normal;
  max-width: 100%;
  text-decoration: none;

  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform  0.22s var(--ease-spring),
    background 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    color      0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out),
    opacity    0.18s;
}

/* 註：line-height 刻意不設。
   各頁 body 的行高不一樣（App 1.7、faq 1.8、landing-b 1.7），
   在這裡釘死會讓按鈕高度整批位移好幾 px，屬於「明顯改變外觀」，留給下一輪處理。 */


/* ────────────────────────────────────────────────────────────────────────────
   B. 主題皮膚（基底層）
   放在變體之前：變體永遠贏得過主題，順序即優先序。
   ──────────────────────────────────────────────────────────────────────────── */

/* 淺色＝行銷頁：墨色實心 ＋ 2px 墨框，hover 轉硃紅並上浮 2px
   來源：faq／sync／welcome 三份一模一樣的定義。 */
:where(html[data-theme="light"]) .btn {
  --btn-bg:       var(--fg);
  --btn-fg:       var(--bg);
  --btn-bd:       var(--fg);
  --btn-bw:       2px;
  --btn-lift:     -2px;
  --btn-bg-hover: var(--primary-ink);
  --btn-fg-hover: var(--bg);
  --btn-bd-hover: var(--primary);
}

/* 深色＝App 頁：米白（--ink #f2efe9）實心＋暖黑字。
   歷史：原本是寫死朱紅漸層 #f2613a→#d94f2b（白字 3.21／4.11:1，23 種主鍵不到 AA）→ 改版夜稍早接成
   --primary 平色（4.99:1）→ 同夜語意色收斂：朱紅只留播放位置，主鍵全站統一米白（與 iOS Theme 規則、
   episode.html 的 .snip-btn 同一顆）。米白底暖黑字 16.8:1。沒有光暈、沒有漸層。 */
:where(html[data-theme="dark"]) .btn,
:where(html[data-theme="dark"]) .btn-primary {
  /* 2026-09-20 立體系統（SPEC §2）：米白主鍵＝**實體鍵**——同色相 ±5% 明度的漸層、頂邊 1px 白高光、
     底邊 1px 暗線、1px 落影；按下＝內陰影下沉＋scale(.98)。字色 #100d0e（16.5:1）。沒有光暈、沒有第二個色相。 */
  --btn-bg:           var(--btn-primary-bg);
  --btn-fg:           var(--btn-primary-fg, #100d0e);
  --btn-bg-hover:     var(--btn-primary-bg-hover, var(--btn-primary-bg));
  --btn-fg-hover:     var(--btn-primary-fg, #100d0e);
  --btn-shadow:       var(--btn-primary-shadow);
  --btn-shadow-hover: var(--btn-primary-shadow);
  --btn-shadow-active: var(--btn-primary-pressed);
  --btn-scale-active: 0.98;
}


/* ────────────────────────────────────────────────────────────────────────────
   C. 狀態
   ──────────────────────────────────────────────────────────────────────────── */
.btn:hover, .btn-primary:hover, .btn-secondary:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-bd-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(var(--btn-lift));
}

/* 按下瞬間縮 0.96，做出原生 App 的壓感（原本只有 App 頁有，現在行銷頁也吃得到） */
.btn:active:not(:disabled):not([aria-disabled="true"]),
.btn-primary:active:not(:disabled):not([aria-disabled="true"]),
.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(var(--btn-scale-active, 0.96));
  box-shadow: var(--btn-shadow-active, var(--btn-shadow));
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn-primary:disabled, .btn-primary[disabled], .btn-primary[aria-disabled="true"],
.btn-secondary:disabled, .btn-secondary[disabled], .btn-secondary[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* 焦點環：tokens.css 已有 :where() 全域版，這裡再寫一次是為了讓 .btn 一定壓得過
   任何舊的頁面樣式（鍵盤使用者看不到焦點＝可用性 bug，不是外觀偏好）。 */
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}


/* ────────────────────────────────────────────────────────────────────────────
   D. 尺寸變體
   ──────────────────────────────────────────────────────────────────────────── */
.btn--sm,
.btn.small {
  --btn-py: var(--btn-py-sm);
  --btn-px: var(--btn-px-sm);
  --btn-fs: var(--fs-sm);
}

.btn--lg,
.btn.btn-big {
  --btn-py: var(--btn-py-lg);
  --btn-px: var(--btn-px-lg);
  --btn-fs: var(--fs-md);
}


/* ────────────────────────────────────────────────────────────────────────────
   E. 樣式變體
   每個變體依序寫「通用 → 淺色 → 深色」，同權重、後者贏，
   而任一頁只會命中其中一個主題，所以不會互相打架。
   ──────────────────────────────────────────────────────────────────────────── */

/* ── outline：次要動作 ──
   淺色頁不必另外寫：框線寬度與框色沿用上面的淺色皮膚（透明底＋墨框、hover 轉硃紅框），
   跟收斂前 faq／sync／welcome 的行為一模一樣。 */
.btn--outline,
.btn.outline,
.btn.btn-outline {
  --btn-bg:           transparent;
  --btn-fg:           var(--fg);
  --btn-shadow:       none;
  --btn-shadow-hover: none;
  --btn-shadow-active: none;
  --btn-scale-active: 0.96;
  --btn-bg-hover:     var(--fg);
  --btn-fg-hover:     var(--bg);
}
/* 深色：App 端的 outline 其實是「灰底無框」，不是真的外框（styles.css 原樣）。
   色票刻意用舊別名 var(--ink)：styles.css 目前把它覆寫成 #f2efe9（token 是 #f4ece3），
   改用 --fg 會讓 57 顆按鈕的字色跟著變，那不屬於這一輪的範圍。 */
:where(html[data-theme="dark"]) .btn--outline,
:where(html[data-theme="dark"]) .btn.outline,
:where(html[data-theme="dark"]) .btn.btn-outline {
  --btn-bg:       var(--surface-2);
  --btn-fg:       var(--ink);
  --btn-bd:       transparent;
  --btn-bw:       0px;
  --btn-bg-hover: var(--surface-3);
  --btn-fg-hover: var(--ink);
}

/* ── ghost：最弱動作，只有一條細框（來源：landing-b 的 .ghost） ── */
.btn--ghost,
.btn.ghost {
  --btn-bg:           transparent;
  --btn-fg:           var(--fg);
  --btn-bd:           var(--fg);
  --btn-bw:           1.5px;
  --btn-shadow:       none;
  --btn-shadow-hover: none;
  --btn-shadow-active: none;
  --btn-scale-active: 0.96;
  --btn-bg-hover:     color-mix(in srgb, var(--fg) 8%, transparent);
  --btn-fg-hover:     var(--fg);
  --btn-bd-hover:     var(--fg);
}

/* ── danger：破壞性動作。深色 App 頁專用，行銷頁沒有用到 ── */
.btn--danger,
.btn.danger {
  --btn-bg:           var(--surface-2);
  /* 改版夜：破壞性動作的字色改 --status-error（alert 色，深色 #f17a91 在 surface-2 上 6.38:1）。
     朱紅不再借給「危險」——它只代表播放位置。 */
  --btn-fg:           var(--status-error);
  --btn-bd:           transparent;
  --btn-bw:           0px;
  --btn-shadow:       none;
  --btn-shadow-hover: none;
  --btn-shadow-active: none;
  --btn-scale-active: 0.96;
  /* 收斂前 danger 的 hover 完全沒有回饋（被同權重規則互相蓋掉），這裡補上最輕的一階 */
  --btn-bg-hover:     var(--surface-3);
  --btn-fg-hover:     var(--status-error);
}


/* ────────────────────────────────────────────────────────────────────────────
   H. 改版夜三個全站元件（2026-09-19，對齊 iOS 的 PrimaryActionButton／SecondaryActionButton／ContentCard）
   WA／WB 之後把頁面上的主鍵、次鍵、內容卡改用這三個 class；可單獨用（<button class="btn-primary">），
   也可疊在 .btn 上（<a class="btn btn-primary">）——兩種寫法長得一樣。
     .btn-primary    主要行動：ink 實心＋paper 字，44px 命中區，全圓角
     .btn-secondary  次要行動：透明底＋1.5px ink 外框＋ink 字，44px
     .card-content   內容卡：--surface 平色＋--r-card 16＋--pad-card 16，無漸層
   ──────────────────────────────────────────────────────────────────────────── */
.btn-primary {
  /* 2026-09-20：實體鍵（兩主題都走 --btn-primary-* token；深色米白鍵暖黑字、淺色墨鍵米白字） */
  --btn-bg:           var(--btn-primary-bg);
  --btn-fg:           var(--btn-primary-fg, #100d0e);
  --btn-bd:           transparent;
  --btn-bw:           0px;
  --btn-bg-hover:     var(--btn-primary-bg-hover, var(--btn-primary-bg));
  --btn-fg-hover:     var(--btn-primary-fg, #100d0e);
  --btn-bd-hover:     transparent;
  --btn-shadow:       var(--btn-primary-shadow);
  --btn-shadow-hover: var(--btn-primary-shadow);
  --btn-shadow-active: var(--btn-primary-pressed);
  --btn-scale-active: 0.98;
  --btn-lift:         0px;
  --btn-fw:           800;
  min-height: 44px;
}
.btn-secondary {
  --btn-bg:           transparent;
  --btn-fg:           var(--ink);
  --btn-bd:           var(--ink);
  --btn-bw:           1.5px;
  --btn-bg-hover:     color-mix(in srgb, var(--ink) 8%, transparent);
  --btn-fg-hover:     var(--ink);
  --btn-bd-hover:     var(--ink);
  --btn-shadow:       none;
  --btn-shadow-hover: none;
  --btn-shadow-active: none;
  --btn-scale-active: 0.96;
  --btn-lift:         0px;
  min-height: 44px;
}
.card-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  box-shadow: var(--hl-s1);   /* 2026-09-20：surface-1 卡＝色階＋頂邊 1px 高光，無陰影（SPEC §2） */
}


/* ════════════════════════════════════════════════════════════════════════════
   F. 卡片
   來源：styles.css 的 .card（＋第 448 行的景深群組）與 sync.html 的 .card。
   註：目前全站 13 個 .card 都是「一個容器裝自由內容」，
       沒有任何一頁有 header／body／title／desc 的固定結構，
       所以刻意不生 .card__header 這類子元素樣式 —— 那會是沒人用的死 CSS。
       等真的出現重複結構再補。
   ════════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  box-shadow: var(--hl-s1);   /* 2026-09-20：resting 卡＝色階＋頂邊 1px 高光，不下陰影 */
  transition:
    transform  0.25s var(--ease-spring),
    background 0.18s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}

/* 深色：改版夜拿掉漸層（漸層取樣出來就是「卡面 5 色」的來源），平色 --surface。
   2026-09-20 立體系統：resting 卡**不再有陰影**（陰影只給浮層），改頂邊 1px 高光 --hl-s1；
   「浮起來」的東西才用 --surface-2＋--hl-s2＋--elev-2。 */
:where(html[data-theme="dark"]) .card {
  background: var(--surface);
  border-top-color: var(--line-strong);
  box-shadow: var(--hl-s1);
}


/* ════════════════════════════════════════════════════════════════════════════
   G. 標籤 chip
   來源：landing-b 的 .chip（唯一一份完整定義）。
   deck.html 的 .bcard .chip 是另一種東西（顏色由 JS 逐顆內嵌），
   在該頁保留區域覆寫，不強行合併。
   註：margin 刻意不放進元件 —— 那是版面的事，留在 landing-b。
   ════════════════════════════════════════════════════════════════════════════ */
.chip {
  display: inline-block;
  padding: var(--chip-py) var(--chip-px);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* 選中態。⚠️ 目前沒有任何一頁用到，是替「可篩選的 chip 列」預留的正式寫法，
   免得下次有人又在頁面裡自己發明一個 .chip.on。 */
.chip--active {
  /* 改版夜：選中＝ink 實心（與主鍵、show-chip.active 同一種語彙），不借朱紅 */
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* 摘錄與單字本使用相同入口；分類不靠卡片文字推斷。 */
.snip-kind-switch { display:flex; gap:4px; padding:4px; margin:0 0 18px; border:1px solid var(--line); border-radius:999px; width:fit-content; background:var(--card); }
.snip-kind-switch button { border:0; border-radius:999px; min-height:44px; padding:8px 24px; background:none; color:var(--ink-soft); font:inherit; font-weight:700; cursor:pointer; }
.snip-kind-switch button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.vocabulary-card { min-width:0; overflow-wrap:anywhere; }
.vocabulary-word { color:var(--ink); font-size:1.5rem; font-weight:800; line-height:1.4; }
.vocabulary-meaning { color:var(--ink); font-size:1rem; line-height:1.6; margin-top:4px; }
.vocabulary-source { font-size:.75rem; color:var(--ink-soft); margin-top:10px; line-height:1.6; }
.vocabulary-context { font-size:.875rem; line-height:1.7; white-space:pre-wrap; margin-top:10px; color:var(--ink-soft); }
.vocabulary-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.vocabulary-actions .btn { display:inline-flex; align-items:center; min-height:44px; }


/* ════════════════════════════════════════════════════════════════════════════
   I. 2026-09-20 色彩點綴＋立體系統的元件（SPEC §1／§2；WA／WB 在 html 直接用這些 class）
     .field-sunken        下沉輸入框容器：--surface-sunken 底＋內陰影＋--line 邊；focus 邊 --line-strong
     .field-sunken.ask    「問聽摘」：focus 邊改靛 --accent-ink-line（跟一般搜尋框分開）
     .chip--accent-ink    #標籤 chip（off 態）：靛 tint 底＋靛字——標籤是分類動作的結果，不跟「展開全文」長一樣
     .eyebrow-ink         「筆記」「🔗 相關摘錄」等 eyebrow：靛字（你寫的／你建的連結）
     .num-memory          複習連續天數、日記統計數字：紫藤字（累積＝時間的顏色；標籤仍灰）
     .heat-1 ～ .heat-4   熱力圖 4 階：紫藤 tint 18％→36％→60％→實色字色
   點綴色永不當按鈕底、tab 選中、開關 on、內文字色（SPEC §1）。
   ════════════════════════════════════════════════════════════════════════════ */
.field-sunken {
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 12px 14px;
  transition: border-color 0.18s var(--ease-out);
}
.field-sunken:focus-within { border-color: var(--line-strong); }
.field-sunken.ask:focus-within { border-color: var(--accent-ink-line); }
/* 容器裡的原生輸入框：透明底、無框、無外環（外框由 .field-sunken 畫）；placeholder 用 --fg-muted（8.3:1），不用 faint */
.field-sunken > input,
.field-sunken > textarea {
  background: transparent; border: none; outline: none; box-shadow: none;
  width: 100%; min-width: 0; color: var(--fg); font-family: inherit;
}
.field-sunken > input::placeholder,
.field-sunken > textarea::placeholder { color: var(--fg-muted); opacity: 1; }
:where(html[data-theme="light"]) .field-sunken { box-shadow: inset 0 1px 2px rgba(28, 24, 19, 0.12); }

.chip--accent-ink {
  background: var(--accent-ink-tint);
  color: var(--accent-ink-text);
  border-color: transparent;
}

.eyebrow-ink { color: var(--accent-ink-text); }
.num-memory  { color: var(--accent-memory-text); font-variant-numeric: tabular-nums; }

.heat-1 { background: color-mix(in srgb, var(--accent-memory-heat) 18%, transparent); }
.heat-2 { background: color-mix(in srgb, var(--accent-memory-heat) 36%, transparent); }
.heat-3 { background: color-mix(in srgb, var(--accent-memory-heat) 60%, transparent); }
.heat-4 { background: var(--accent-memory-text); }

/* ════════════════════════════════════════════════════════════════════════════
   一句播放器（public/sentence-player.js；docs/SENTENCE-PLAYER-SPEC.md）
   單句卡、複習卡、回想卡用 card 版；精聽逐句列用 row 版。episode 與 index 共用這一段。
   色彩：主鍵＝米白實體鍵（.btn 本身）；慢速／跟讀／圖示鍵一律中性。
         朱紅只給播放位置（這裡一次都不出現）；分數只用松綠（完成）與中性。
   ════════════════════════════════════════════════════════════════════════════ */
.sp-svg { width: 14px; height: 14px; flex-shrink: 0; }
.sp-card { display: block; }
.sp-card .sp-main { width: 100%; min-height: 48px; font-weight: 800; }
.sp-subs { display: flex; gap: 10px; margin-top: 10px; }
.sp-pill { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: none; color: var(--fg);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.sp-pill:disabled { opacity: .5; cursor: default; }
.sp-pill:not(:disabled):active { background: var(--surface-3); }
/* 慢速開著＝深一階的底（surface-2）＋一圈墨色外框，字維持墨色。
   **不用米白實心**（2026-09-24 老闆決定）：深色主題的 --ink 就是米白，米白實心只留給會觸發動作的主鍵（.btn）。 */
.sp-slow.on, .sp-repeat.on { background: var(--surface-2); color: var(--fg); border-color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--ink); }
/* row 版：三顆 44pt 圖示鍵，全部中性 */
.sp-row { display: inline-flex; align-items: center; gap: 6px; }
.sp-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--fg);
  font: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1; cursor: pointer; }
.sp-ico .sp-svg { width: 16px; height: 16px; }
.sp-ico:disabled { opacity: .5; cursor: default; }
.sp-ico:not(:disabled):active { background: var(--surface-3); }
.sp-ico.sp-slow.on, .sp-ico.sp-repeat.on { background: var(--surface-2); color: var(--fg); border-color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--ink); }
/* 錄音中與慢速開啟同一套：深底＋墨色外框；只有中性小圓點脈動。 */
.sp-shadow { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.sp-shadow.rec, .sp-shadow.rec:not(:disabled):active { background: var(--surface-2); color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.sp-rec-dot { display: none; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--ink); }
.sp-shadow.rec .sp-rec-dot { display: inline-block; animation: sp-pulse 1s ease-in-out infinite; }
.sp-shadow.rec .sp-svg { display: none; }
.sp-ico.sp-shadow .sp-shadow-l { display: none; }
.sp-ico.sp-shadow.rec { width: auto; min-width: 44px; padding: 0 12px; gap: 6px; border-radius: var(--r-full); }
.sp-ico.sp-shadow.rec .sp-shadow-l { display: inline; white-space: nowrap; }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .sp-shadow.rec .sp-rec-dot { animation: none; } }
/* 分數框（ShadowNotice）：元件正下方同一個位置 */
.sp-score { margin-top: 12px; font-size: var(--fs-sm); line-height: 2; text-align: left; }
.sp-score[hidden] { display: none; }
.sp-score .sc, .cr-score .sc { display: inline-block; font-weight: 900; border-radius: var(--r-full); padding: 1px 10px; margin-right: 8px; font-size: var(--fs-xs); }
.sp-score .sc.good, .cr-score .sc.good { background: color-mix(in srgb, var(--pine) 22%, transparent); color: var(--pine-ink, var(--pine)); }
.sp-score .sc.mid, .cr-score .sc.mid,
.sp-score .sc.bad, .cr-score .sc.bad { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sp-score .w, .cr-score .w { margin-right: 6px; }
.sp-score .w.ok, .cr-score .w.ok { color: var(--fg); font-weight: 700; }
.sp-score .w.miss, .cr-score .w.miss { color: var(--fg-muted); text-decoration: underline wavy currentColor 1px; text-underline-offset: 3px; }
.sp-score .heard, .cr-score .heard { display: block; color: var(--fg-muted); font-size: var(--fs-xs); margin-top: 4px; line-height: 1.7; }
/* 文字匹配率（2026-09-24）：中性膠囊——這是辨識文字的比對，不是「完成」，不用松綠 */
.sp-score .sc.rate, .cr-score .sc.rate { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sp-score .sp-target, .cr-score .sp-target { display: block; color: var(--fg); font-size: var(--fs-sm); line-height: 1.7; }
.sp-score .sp-why, .cr-score .sp-why { font-style: normal; }
.sp-score .sp-prev, .cr-score .sp-prev { font-variant-numeric: tabular-nums; }

#tab-snips[data-kind="vocabulary"] #lib-chat,
#tab-snips[data-kind="vocabulary"] #brief-fold,
#tab-snips[data-kind="vocabulary"] #boards-section,
#tab-snips[data-kind="vocabulary"] #snips-more,
#tab-snips[data-kind="vocabulary"] #transcript-hits { display:none !important; }