/**
 * scrollbar.css — 全站捲軸(髮絲寬度)。
 *
 * 拆成獨立檔是因為 base.css 加進來會破 300 行,而捲軸本來就是自成一件的事
 * (與 form.css / edit.css / canvas.css / ppt.css 同一個拆法)。
 * 代幣也一起搬過來,這支檔案自給自足。
 *
 * 每一頁都要引,順序在 base.css 之後。
 */

/* ---------- 代幣 ---------- */

/*
 * ★ 髮絲寬度只能用實心色,不能用漸層 —— 理由見下面〈為什麼這裡沒有漸層〉。
 *   所以代幣只剩「安靜」與「滑上去」兩個顏色,兩個主題各自往相反方向取:
 *
 *   淺色底要往**深**走 —— --brand-warm 原色打白底只有 2.36:1,
 *   加多少不透明度都到不了 3:1,只能靠變深。
 *   暗色底相反,要往**亮**走。
 *
 *   愈細的東西愈需要對比,所以這裡用足彩度、不做半透明。
 */

:root {
  --scroll-track: rgba(24, 20, 16, 0.06);

  --scroll-hair: #c9560d;      /* 白底 4.36:1 */
  --scroll-hair-hi: #a8460a;   /* 滑上去再深一階 */
}

:root[data-theme="dark"] {
  --scroll-track: rgba(255, 246, 236, 0.06);

  --scroll-hair: #f59022;      /* 暗底 7.66:1 */
  --scroll-hair-hi: #ffb063;   /* 滑上去再亮一階 */
}

/* ---------- 捲軸 ---------- */

/*
 * 捲軸只用暖橘一個色系。要兩色同時出現只能像 logo 那樣「並置」,不能混合 ——
 * --brand-warm 與 --brand-cool 的 sRGB 內插中點落在色相 72° 的橄欖綠。
 */

/* ★★ 這段一定要關在 @supports 裡,不能裸寫。
 *
 * 現代 Chrome 也支援標準的 scrollbar-width / scrollbar-color,而且
 * **一旦指定其中任何一個,它就完全忽略 ::-webkit-scrollbar 偽元素**。
 * 裸寫這兩行等於把下面整塊樣式在 Chrome 上關掉 —— 實測主捲軸量到
 * 10px(scrollbar-width:thin 的寬度)而不是設定值。踩過一次,別再踩。
 *
 * selector(::-webkit-scrollbar) 在 Chrome/Safari 為真、Firefox 為假,
 * 正好把這兩行圍給只有它們生效的 Firefox。
 *
 * ★ Firefox 給不了髮絲寬度 —— `thin` 是它最細的一檔(約 10px),
 *   沒有數值可調。那邊必然比 Chrome 粗一截,這是規格限制。
 */
@supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-hair) var(--scroll-track);
  }
}

/* 主捲軸 3.5px。軌道保留一道極淡的凹槽 —— 髮絲寬度下,
 * 沒有軌道就看不出「這裡可以捲」,thumb 會像憑空浮著的一撇 */
*::-webkit-scrollbar {
  width: 3.5px;
  height: 3.5px;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

/* ★ 沒有 border、沒有 background-clip、沒有 inset 陰影 —— 全都放不下。
 * 原本用 2px 透明邊框把 thumb 浮在軌道中間,3.5px 的總寬扣掉兩側就是負的。 */
*::-webkit-scrollbar-thumb {
  background-color: var(--scroll-hair);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-hair-hi);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- 為什麼這裡沒有漸層與玻璃質感 ---------- */

/*
 * 做過,量過,在這個寬度下做不到,不是沒試。
 *
 * 玻璃感來自「圓柱受光」—— 亮面在一側、暗面在另一側,漸層必須橫跨**短邊**。
 * 14px 捲軸配 2px 透明邊框時,thumb 真正能上色的只有 10px,
 * 實測明度落差 0.27~0.50、色相跨度 7~11°,那是勉強成立的下限。
 *
 * 更早的一版用 12px 配 3px 邊框,可上色只剩 6px —— 量出來的明暗
 * **全部來自 inset 陰影**,漸層根本擠不進去(thumb 從 15% 到 95%
 * 讀數完全平坦)。
 *
 * 3.5px 連 2px 的邊框都放不下。這裡只能是實心色。
 *
 * 要找回玻璃質感,唯一的路是把寬度加回 10px 以上。
 */

/* ---------- 為什麼沒有「hover 才現身」 ---------- */

/*
 * 試過了,純 CSS 做不到,規則已移除。留下結論免得下次再試一遍。
 *
 * 寫法本身沒問題:容器 `::-webkit-scrollbar-thumb` 預設透明、
 * `容器:hover::-webkit-scrollbar-thumb` 還原顏色 —— 四條規則都確認進了
 * CSSOM,變數也解析得出值。
 *
 * 但 **Chrome 只在捲軸建立時計算一次 ::-webkit-scrollbar 的樣式**,
 * 之後 scroller 的 :hover 狀態改變不會觸發捲軸重繪。實測:
 *   - 滑鼠移上去 —— 捲軸不出現(截圖相減:變動像素全在縮圖上,捲軸列零變動)
 *   - JS 強制 `display:none` 再還原 —— 捲軸出現了
 *   - 滑鼠移開 —— 捲軸**還在**,狀態卡住不還原
 *
 * 要做只能靠 JS 在 mouseenter/mouseleave 時強制重建捲軸,
 * 每次進出都觸發一次 reflow,代價不划算。
 *
 * ★ 但 thumb 自己的 `:hover` **會**重繪 —— 那是捲軸內部狀態,
 *   所以上面 `*::-webkit-scrollbar-thumb:hover` 那條是有效的,雙向都會還原。
 */