/* ============================================================
   天上雲音 — 深色主題的原生控件修正
   ============================================================
   ★ 為什麼需要這個檔（2026-10-05）★
   本站是深色主題（style.css 的 --bg-primary: #0a0a1a、--text-primary: #e8e8f0），
   但 style.css 沒有宣告 `color-scheme: dark`。

   結果：瀏覽器會用「淺色」模式畫原生控件 —— 捲軸、日期選擇器，
   還有最明顯的 <select> 展開的選項清單。那個清單不吃半透明底色，
   會用系統預設的白底，而 option 繼承了淺色的文字色 → **白底白字，看不到**。

   ★ 為什麼要獨立成一個檔，而不是直接改 style.css ★
   AGENTS.md 明令「絕對不要碰 site/assets/css/style.css（站台全域 CSS，會影響所有頁面）」。
   所以這個檔是**純新增、純加掛**的：
     - 不修改 style.css 的任何一行
     - 只在需要它的頁面加一行 <link>
     - 不想要的話把 <link> 拿掉就完全還原
   ============================================================ */

/* ---- 1. 宣告整站是深色主題 ----
   這一行讓所有原生控件（<select> 清單、捲軸、日期選擇器…）自動走深色，
   是最省事也最保險的修法。放在 :root 上會被 style.css 的 :root 一起生效。 */
:root {
    color-scheme: dark;
}

/* ---- 2. 表單控件也明確宣告一次 ----
   某些瀏覽器只認元素層級的 color-scheme，不看繼承。 */
input,
select,
textarea,
button {
    color-scheme: dark;
}

/* ---- 3. <select> 的底色必須「不透明」 ----
   ★ 這是關鍵 ★
   深色頁面常寫 `background: rgba(255,255,255,.05)`（半透明）。
   關閉時看起來沒問題（頁面底色透出來），
   但展開的清單不吃半透明 → 白底 → 白字看不見。
   所以這裡給一個不透明的實色。

   顏色用 CSS 變數 + fallback：
     - 站台變數是 --bg-secondary（style.css 的值）
     - fallback 給 /sync/ 那種自己定義深色主題的頁面用 */
select {
    background-color: var(--bg-secondary, #12122a);
    color: var(--text-primary, #e8e8f0);
}

/* ---- 4. 選項清單本身也要明確指定 ----
   ★ 這才是讓清單「看得到字」的那一步 ★
   option 的底色若不指定，會退回瀏覽器預設（白色）；
   而文字色會從 select 繼承淺色 → 白底白字。 */
select option,
select optgroup {
    background-color: var(--bg-secondary, #12122a);
    color: var(--text-primary, #e8e8f0);
}

/* ---- 5. 深色底上的原生陰影框（focus ring）看不見，改用亮色 ---- */
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent, #c084fc);
    outline-offset: 1px;
}

/* ---- 6. 深色提示框（placeholder 預設是灰色，深底上偏暗）---- */
::placeholder {
    color: var(--text-muted, #6a6a8a);
    opacity: 1;   /* Firefox 預設 0.54，深底上幾乎看不見 */
}

/* ---- 7. 深色捲軸 ----
   color-scheme: dark 已經會處理大部分瀏覽器，
   這裡是給仍用舊引擎的 WebKit 補的。 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary, #0a0a1a);
}
::-webkit-scrollbar-thumb {
    background: var(--border, #2a2a50);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #6a6a8a);
}