/* 模块「前台美化」：顶部加载进度条 + 滚动条
   两个组件的**行为与观感**照搬 acc 站（accounts.mclinyunhai.com）+ 论坛集成插件。

   ── 关于配色（重要，2026-10-02 订正）──
   acc 站用的品牌蓝是 #165dff，照抄会和本站的按钮、链接、高亮撞色，所以不能沿用。
   下面这两个组件的基色当前取 **#00a2e3 / #0080c0** —— 这组值是从**论坛**那边带过来的，
   而**博客的子比主题色尚未在这里逐项核实**。也就是说：
   如果博客的主题色不是青色系，滚动条与进度条的颜色就是错的，改这两个值即可。
   （只影响观感，不影响任何功能；文本选中色不走这里，见下条。）

   注意：**下面这些颜色不能改用 var()** —— `::-webkit-scrollbar-*` 与 `::selection`
   不解析自定义属性（原因见下），只能写死。
   **例外：文本选中色（::selection）不写在这个文件里** ——
   它需要跟随子比的实时主题色，由 class-ui.php 的 selectionCss() 读 `_pz('theme_skin')`
   拼成字面量后经 wp_add_inline_style() 注入，所以子比那边改色它能自动跟上，
   不需要回来改这里。滚动条与进度条仍是写死的，改主题色时要手动同步。 */

/* ─────────── 顶部加载进度条 ───────────
   2px 高。z-index 取 1100 的理由见 class-ui.php 顶部注释第 3 条。 */
.mlyb-page-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, rgba(0, 162, 227, 0.85), rgba(0, 128, 192, 0.85));
    z-index: 1100;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.3s ease;
}

/* ─────────── 滚动条（-webkit- 自绘）───────────
   注意三件事（前两条是 acc 那边踩过记下来的）：

   1. Chrome 121+ 的优先级规则：只要元素上写了标准属性 `scrollbar-color` / `scrollbar-width`，
      Chrome/Edge 就会**整组忽略 `::-webkit-scrollbar*` 自绘规则** —— 表现为「自绘没生效、
      退回浏览器原生细条」。而颜色还是我们给的，所以肉眼容易以为生效了，其实那套自绘根本没渲染。
      修法：标准属性**只留给 Firefox** —— `@supports (-moz-appearance: none)` 只有 Firefox 命中，
      Chrome / Edge / Safari 恒不命中，自然回到下面的自绘版。

   2. `::-webkit-scrollbar-*` 与 `::selection` 一律**直接写色值，不要改成 var()**
      （这两个伪元素里不解析自定义属性）。

   3. **轨道用 `transparent` 而不是写死的颜色** —— 这样它自动跟随底下的页面（或容器）底色，
      **不依赖任何「暗色类」，所以首屏就是对的**。
     （2026-10-02 踩过：最初轨道写死 `#fff` + 用 `html.dark` 钩暗色，结果带暗色 cookie 首屏仍然是白轨 ——
      因为子比的 `dark` 类只在**点击切换时**由 JS 加到 `<html>`，首次加载时 html 上根本没有这个类。） */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #00a2e3;
    border-radius: 2px;   /* 4px 宽取半宽 → 上下两端全圆，铺满轨道、左右不留缝 */
}

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

/* ─────────── 滚动条（Firefox 走标准属性）───────────
   Firefox 的 `scrollbar-color` 轨道色没法给 transparent（只能实色），所以这里必须按暗色切换。

   **钩子用 `body.dark-theme`，不是 `html.dark`** —— 已核实：
   - 子比是**服务端**把 `dark-theme` 输出到 `<body>` 上的
     （带 `theme_mode=dark-theme` cookie 请求，返回的 HTML 里 `<body class="… dark-theme …">`），
     所以首屏就在，不会闪；
   - `html` 上的 `dark` 类只在点击切换时才由 JS 加，首次加载时没有。

   而**页面级滚动条挂在 `html` 自身**上，`body.dark-theme` 管不到它，
   所以用 `:has()` 反向匹配（Chrome 105+ / Safari 15.4+ / Firefox 121+ 支持；
   万一不支持，退化成亮色轨道，不影响功能）。 */
@supports (-moz-appearance: none) {
    html {
        scrollbar-width: thin;
        /* 顺序是「滑块色 轨道色」 */
        scrollbar-color: #00a2e3 #fff;
    }

    html:has(body.dark-theme) {
        scrollbar-color: #00a2e3 #292a2d;   /* 子比暗色的页面底色 --body-bg-color */
    }
}