/* ==========================================================================
 * 站点自定义样式（Stellar v2）
 * ==========================================================================
 * 为什么是 .css 而不是 .styl（重要，别再改回去）：
 *   1. Hexo 会把 source/ 下以 `_` 或 `.` 开头的文件当 hidden **直接排除**
 *      （见 hexo/dist/plugins/processor/common.js 的 isHiddenFile），
 *      所以 source/css/_custom.styl 永远不会进入 asset 流水线、不会产出 _custom.css。
 *   2. 主题 main.styl 里的 `@import '_custom'` 由 hexo-renderer-stylus 解析，
 *      而它把 Stylus 的搜索路径钉在**主题**的 source/css/ 上，
 *      所以那条 import 命中的是主题自己的 _custom.styl，不是站点的。
 *   → 站点样式必须自己产出为 asset 再显式挂载。纯 CSS 还顺带避免了
 *     Stylus 的两个坑：变量作用域（旧写法里 $ff-body 与主题同名，看着生效其实被覆盖）
 *     以及裸写的 max()/min() 被 Stylus 当内建函数吃掉（静默出错）。
 *
 * 挂载方式：_config.stellar.yml 的 inject.head_end 指向 /css/custom.css
 *   必须用 head_end 而不是 head_begin：head.ejs 先输出 main.css、后输出 headEnd，
 *   这样自定义规则才排在主题样式之后，覆盖才生效。
 *
 * 可用令牌（已核对 v2 源码，不要凭 v1 记忆写）：
 *   颜色  --theme --theme-a10/a20/a30 --accent --link --link-a20
 *         --background --card --block --block-border
 *         --text --text-p1..p4 --text-meta --text-code --text-reverse
 *         --bg-a20/a50/a60/a75/a100   ← 注意语义是"当前主题下的半透明底色"，
 *                                        light 下偏白、dark 下偏黑，不是"半透明白"
 *   字号  --fs-root --fs-content-base --fs-content --fsh2/--fsh3/--fsh4
 *   间距  --gap-base --gap-page --gap-p --gap-p-compact
 *   布局  --width-main --leftbar-width --rightbar-width --side-content-width
 *   交互  --hoverable-card-hover-shadow --hoverable-card-hover-transform
 *         --card-hover-spotlight-color --item-theme --ui-icon-color
 *   ⚠️ 不存在 --border-* 与 --boxshadow-* 自定义属性（它们是构建期烘死的 Stylus 常量），
 *      所以圆角只能改 _config.stellar.yml 的 appearance.shape.radius.*，
 *      阴影要在 CSS 里直接写 box-shadow。
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 1. 细滚动条
 * --------------------------------------------------------------------------
 * 默认的粗滚动条在磨砂玻璃风格里很突兀。
 * 悬停色用主题自己的 --text-p3（与主题 ::-webkit-scrollbar-thumb:hover 一致），
 * 不要用 --text-p4 —— 那个更淡，hover 反而变浅了。 */
* {
  /* 标准属性，供 Firefox 与未来 Chromium 使用，与下面的 webkit 写法不冲突 */
  scrollbar-width: thin;
  scrollbar-color: var(--block-border) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--block-border);
  border-radius: 999px;
  /* 透明边框给滑块留白，视觉更细，且不减小可点面积 */
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-p3);
}

/* 代码块滚动条宽度由外观配置单独控制，这里不覆盖 .highlight */


/* --------------------------------------------------------------------------
 * 2. 文字选中色：对齐主题色，替换系统默认蓝
 * -------------------------------------------------------------------------- */
::selection {
  background: var(--theme-a30);
  color: var(--text-p1);
}


/* --------------------------------------------------------------------------
 * 3. 恢复卡片上浮反馈
 * --------------------------------------------------------------------------
 * 主题的 glass 外观把上浮关掉了：
 *   _appearances/glass.styl 里 --hoverable-card-hover-transform: none、阴影也降级。
 * 这两个是**真实存在的自定义属性**（由 _defines/func.styl 的 hoverable-card() 消费），
 * 所以可以在站点侧恢复，且只影响用 hoverable-card 的卡片（链接卡、grid、友链等）。
 * 位移取 2px（与主题其它外观的默认值一致）：够暗示"可点"，又不会在密集列表里晃眼。 */
.site-shell {
  --hoverable-card-hover-transform: translate3d(0, -2px, 0);
  --hoverable-card-hover-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.22);
}


/* --------------------------------------------------------------------------
 * 4. 暗色下的行内代码配色
 * --------------------------------------------------------------------------
 * 主题在暗色下把 --text-code 覆盖成橙棕 hsla(20 75% 60%)（见 _defines/theme_base.styl）。
 * 那个颜色配冷色系主题略跳，这里改成在暗背景上更协调的琥珀色。
 * 浅色模式保持主题默认（--text-code 的基线值），所以只覆盖暗色分支。
 * ⚠️ appearance.color_scheme: auto 时 <html> 上没有 data-theme 属性，
 *    暗色只靠媒体查询命中，所以这里必须两种选择器都写。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --text-code: hsl(28 85% 68%);
  }
}

:root[data-theme='dark'] {
  --text-code: hsl(28 85% 68%);
}


/* --------------------------------------------------------------------------
 * 5. 侧边栏布局优化
 * -------------------------------------------------------------------------- */

/* 5.1 隐藏主题硬编码的"设置"入口
 * --------------------------------------------------------------------------
 * 它**不是配置项**：layout/_partial/regions/widgets.ejs 把
 * <div class="site-region__settings">…widget-instance--settings…</div>
 * 无条件写死在左栏 footer 里（同一行的"收起左栏"按钮也一样），
 * leftbar.enabled:false 都影响不到它，所以只能从站点侧隐藏。
 *
 * 它渲染的是访客资料占位（settings-widget__avatar + __name）并指向 /settings/。
 * 用 display:none 而不是 display:none !important + 改 node_modules：
 * 后者会在下次 npm i 时丢失，且无法跟随主题升级。
 *
 * 注意：这同时也移除了用户发现 /settings/ 页面的入口（该页面仍然生成）。
 * 如果以后想要回这个入口，删掉这一段即可。 */
.site-region__settings {
  display: none;
}

/* 5.2 收紧 footer 内部的垂直间距
 * --------------------------------------------------------------------------
 * 主题给 .site-region__footer 是 gap: 8px。现在"设置"那行没了、footer 只剩
 * 「动作图标」+「system 行」两块，8px 显得松散，收到 6px。 */
.site-region__footer {
  gap: 6px;
}

/* 5.3 system 行：左「切换配色」、右「收起左栏」
 * --------------------------------------------------------------------------
 * 这一行原本是「设置」占满左侧 + 「收起左栏」在右（settings 是 flex:1 1 auto）。
 * 设置入口被隐藏后，按钮由 scripts/theme-switch.js 动态插入到本行最前，
 * 这里用 space-between 让它靠左、收起按钮靠右，正好复现原来的位置关系。
 *
 * 为什么不用 !important：
 *   主题只在**收起态**给 .leftbar-state-toggle 设了 margin-inline: auto
 *   （layout.styl 在 [data-leftbar-state='collapsed'] 块内）。展开态没有 auto margin，
 *   所以 space-between 直接生效；本选择器特异性 (0,2,0) 也高于主题的 (0,1,0)。
 *   rail 态该行是 48px 单列，两个 32px 图标居中排列，观感正常，故不覆盖。 */
.site-region--leftbar .site-region__system {
  justify-content: space-between;
  gap: 4px;
}

/* 按钮尺寸对齐同一行的「收起左栏」（它是 flex: 0 0 32px / 32px）。
 * 注意要同时重置 min-width，否则会继承 .ui-collection__item 的最小宽度而撑开。 */
.site-region--leftbar .site-region__system .lvbyte-scheme-switch {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 4px;
  justify-content: center;
}


/* --------------------------------------------------------------------------
 * 6. 关于明暗切换按钮的样式
 * --------------------------------------------------------------------------
 * 按钮由 scripts/theme-switch.js 动态创建并插入 5.3 说的 system 行，
 * 复用主题的 collection item 类组合
 * （ui-collection__item ui-interactive card-hover card-hover--spotlight is-icon-only），
 * 所以尺寸、圆角、hover、光斑全部沿用主题，这里只需要 5.3 那两条定位与尺寸规则。
 *
 * 历史说明：早先这个按钮是作为 leftbar.footer.actions 的一个 button 项渲染的，
 * 那时需要用 button[onclick^="window.setColorScheme"] 作为挂钩点
 * （主题的 action 校验是 sealed 的，不认自定义 data-* 属性）。
 * 现在按钮不再经过配置渲染，那个挂钩已无必要，故删掉以免误导。
 */


/* --------------------------------------------------------------------------
 * 7. 正文可读性：只做一处很克制的收紧
 * --------------------------------------------------------------------------
 * 主题正文行高 1.6、段间距由 --gap-p 控制。中文长段落在 1.6 下略挤，
 * 提到 1.75 更透气；英文正文改这个可能显得松散，但本站以中文为主。
 * 只作用于正文段落，不动标题/列表/Callout（它们各自有独立间距体系）。 */
.md-text.content p {
  line-height: 1.75;
}


/* --------------------------------------------------------------------------
 * 8. 无障碍：尊重"减少动态效果"的系统设置
 * --------------------------------------------------------------------------
 * reveal 与 card_hover 都已开启，主题自身的 reduced-motion 覆盖并不完整
 * （只覆盖了抽屉、tilt、TOC 等少数地方），所以这里做一次统一兜底。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}