/* ============================================================
   Axtrivc's Blog — UI Polish 视觉优化层 (2026-08-27)
   全站视觉板块统一收尾:与 theme-system.css 分工 —
   那边管"主题切换正确性",这边管"版面质感一致性"。
   一律使用 --theme-*-current 运行时变量,5 主题全适配。
   板块:
     A 滚动条与阅读进度   B 内页页头压缩+主题色晕染
     C 首页文章卡片重塑   D Butterfly 默认棕色(#8b6f47)清扫
     E 目录卡百分比徽标   F 相关推荐卡空封面修复
     G 标题孤字换行治理   H 选区/焦点态
   ============================================================ */

/* ── A. 滚动条:隐藏根滚动条,消除右侧 5px 色带 ─────────────
   html 背景 = --footer-river-bottom(overscroll 兜底),自定义
   滚动条轨道透明 → 白色内容区旁永远漏出一条河底绿。索性隐藏
   根滚动条(触摸/滚轮不受影响),阅读位置改由顶部进度线承担。
   注意只作用于 html/body,代码块等内部滚动器不在此列。 */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 顶部阅读进度线(元素由 /js/ui-polish.js 注入) */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  z-index: 10090;
  background: var(--theme-accent-current, #07C160);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}
@media (max-width: 768px) {
  #scroll-progress { height: 2px; }
}

/* ── B. 内页页头(Archives/Tags/Categories 等 not-home-page)
   原来 400px 空白只悬一行标题 → 压到 220px,底部加一层
   极淡的主题色晕染过渡进正文,消除"白板"感。 */
#page-header.not-home-page {
  height: 220px !important;
  min-height: 220px !important;
}
#page-header.not-home-page::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(7, 193, 96, 0.06));
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--theme-accent-current, #07C160) 7%, transparent));
}
#page-header.not-home-page #site-title {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  letter-spacing: 0.02em;
}

/* 翻页首页(/page/2+)同样适用压缩:Butterfly 给它们 full_page 头图,
   900px 白底只悬一行站点标题,是首页 hero 化之后的残留大空幕。
   首页本体(带 hero 的 hero-page-active)不在此列——它由 hero-inject
   置 height:0,两条规则各管各的。 */
body:not(.hero-page-active) #page-header.full_page {
  height: 220px !important;
  min-height: 220px !important;
}
body:not(.hero-page-active) #page-header.full_page #site-title {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  letter-spacing: 0.02em;
}
body:not(.hero-page-active) #page-header.full_page #scroll-down {
  display: none !important;
}

/* ── C. 首页文章卡片:从"裸文本"升级为实体卡片 ─────────────── */
#recent-posts.masonry .recent-post-item {
  padding: 20px 24px 18px !important;
  border-radius: 16px !important;
  border: 1px solid var(--theme-border-current, #EDEDED) !important;
  background-color: var(--theme-card-current, #FFFFFF) !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  /* 审计修复(2026-08-28): hover 上浮必须用独立 translate 属性——
     theme-system.css 的网格锁 transform:none !important 会无条件
     压掉任何 transform 声明(与特异性无关),首轮的 translateY 从未生效 */
  transition: translate 0.25s ease,
              box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
  #recent-posts.masonry .recent-post-item:hover {
    translate: 0 -4px;
    border-color: var(--theme-accent-current, #07C160) !important;
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.10);
  }
}
@media (max-width: 768px) {
  #recent-posts.masonry .recent-post-item {
    padding: 16px 18px 15px !important;
    border-radius: 14px !important;
  }
}

/* 收尾重构 2026-08-27(第二轮):
   ① 首页网格统一沟槽(横纵一致),呼吸感与侧栏 gutter 对齐 */
@media (min-width: 768px) {
  #recent-posts.masonry .recent-post-items {
    gap: 22px 20px;
  }
}

/* 卡片标题:字号收敛 + 居左 + 双行截断(平衡换行防孤字) */
#recent-posts.masonry .recent-post-item > .recent-post-info > .article-title {
  font-size: clamp(19px, 1.55vw, 21px) !important;
  line-height: 1.45;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

/* meta 行:缩小弱化,让标题成为视觉主角 */
#recent-posts.masonry .recent-post-item > .recent-post-info > .article-meta-wrap {
  font-size: 13px;
  margin: 8px 0 12px;
}
#recent-posts.masonry .recent-post-item > .recent-post-info > .article-meta-wrap i {
  font-size: 13px;
}

/* 摘要与 meta 之间加发丝分隔线,三行截断统一节奏 */
#recent-posts.masonry .recent-post-item > .recent-post-info > .content {
  font-size: 14.5px;
  line-height: 1.75;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border-top: 1px solid var(--theme-border-current, rgba(0, 0, 0, 0.05));
  padding-top: 12px;
}

/* ── D. Butterfly 默认棕色残留清扫(源 $theme-color #8b6f47)
   全部映射到运行时主题变量,与站点 accent 系统对齐。 */

/* 文章内链接 hover(全局 a:hover 是棕色) */
#article-container a:hover,
#post .post-copyright a:hover,
#page-header.nav-fixed #nav a:hover,
#page-header.nav-fixed #nav span.site-page:hover {
  color: var(--theme-accent-current, #07C160);
}
/* 吸顶导航下品牌名 hover(漏网棕色) */
#page-header.nav-fixed #nav #blog-info:hover {
  color: var(--theme-heading, #1a1a1a);
}
#post-info #post-meta a:hover {
  color: var(--theme-accent-current, #07C160);
}

/* 首页卡片/侧栏 hover(部分已被 theme-system.css 处理,补齐同类) */
#recent-posts .recent-post-item > .recent-post-info > .article-title:hover,
#recent-posts .recent-post-item > .recent-post-info > .article-meta-wrap a:hover {
  color: var(--theme-accent-current, #07C160);
}

/* 归档时间轴:圆点 + 连线 + 年份标记(原来棕色) */
.article-sort-title:before,
.article-sort-item:before,
.article-sort-item.year:hover:before {
  background: var(--theme-accent-current, #07C160) !important;
  border-color: var(--theme-accent-current, #07C160) !important;
}
.article-sort-item:before {
  background: var(--theme-card-current, #FFFFFF) !important;
  border: 2px solid var(--theme-accent-current, #07C160) !important;
}
.article-sort-title,
.article-sort-item:not(.year):hover .article-sort-item-time time {
  color: inherit;
}
.article-sort-item-title:hover {
  color: var(--theme-accent-current, #07C160);
}
.article-sort {
  border-left: 1px dashed var(--theme-border-current, rgba(0, 0, 0, 0.08));
}
/* 年份标题下竖线连接段 + --pseudo-hover 兜底变量(原 #c4a96a 金棕) */
.article-sort-title:after {
  background: var(--theme-accent-current, #07C160);
}
:root {
  --pseudo-hover: var(--theme-accent-current, #07C160);
}

/* 分类/列表圆点符号 */
.category-lists ul li:before,
.list-beauty li:before {
  background: var(--theme-accent-current, #07C160);
}
.category-lists .category-list a:hover {
  color: var(--theme-accent-current, #07C160);
}

/* 文章底部标签胶囊:描边式 → 主题化,hover 反色 */
#post .tag_share .post-meta__tags {
  border-color: var(--theme-border-current, rgba(0, 0, 0, 0.12));
  color: var(--theme-text-current, #222222);
  background: var(--theme-card-current, #FFFFFF);
  transition: all 0.22s ease;
}
#post .tag_share .post-meta__tags:hover {
  background: var(--theme-accent-current, #07C160);
  border-color: var(--theme-accent-current, #07C160);
  color: #FFFFFF;
}

/* 版权卡图标("©"大字与栏目标题色) */
#post .post-copyright:before {
  color: var(--theme-secondary-current, #7A7A7A);
  text-shadow: none;
}
#post .post-copyright .post-copyright-meta {
  color: var(--theme-heading, #1a1a1a);
}

/* 折叠块按钮 / 选项卡激活 / 回到顶部按钮 */
.hide-block > .hide-button,
.hide-inline > .hide-button {
  background-color: var(--theme-accent-current, #07C160);
}
.container .tabs > .nav-tabs > .tab.active {
  background: var(--theme-accent-current, #07C160);
  color: #FFFFFF;
  border: 1px solid var(--theme-accent-current, #07C160);
}
.container .tab-to-top button:hover,
.container .timeline .timeline-item:hover .item-circle:before,
.container .timeline .timeline-item.headline .timeline-item-title .item-circle:before {
  background: var(--theme-accent-current, #07C160);
  color: #FFFFFF;
}

/* 分页按钮:与卡片体系统一圆角/字重,hover 轻浮起 */
#pagination .page-number,
.pagination .page-number,
#pagination .extend,
#pagination .extend.next,
#pagination .extend.prev {
  border-radius: 10px;
  font-weight: 600;
}
@media (hover: hover) {
  #pagination .page-number:hover,
  .pagination .page-number:hover {
    translate: 0 -2px;
  }
}

/* 搜索弹窗导航条 */
.search-dialog .search-nav {
  color: var(--theme-heading, #1a1a1a);
}
.search-dialog .search-close-button:hover {
  color: var(--theme-accent-current, #07C160);
}
.search-dialog .search-result-list .local-search-hit-item:hover,
.search-dialog .ais-Hits-list .local-search-hit-item:hover {
  background: var(--theme-card-current, #FFFFFF);
}
.search-dialog .local-search-input input,
.search-dialog #algolia-search-input input,
.search-dialog .local-search-input {
  border: 2px solid var(--theme-border-current, #E5E7EB);
}

/* ── E. 目录卡右上角阅读进度:大号灰斜体 → 小徽标 ───────────── */
#aside-content #card-toc .toc-percentage {
  float: right;
  margin-top: -4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--theme-secondary-current, #7A7A7A);
  background: transparent;
}
#aside-content #card-toc .toc-percentage:not(:empty) {
  min-width: 30px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--theme-border-current, rgba(0, 0, 0, 0.08));
  text-align: center;
}
#aside-content #card-toc .toc-percentage:not(:empty)::after {
  content: '%';
  font-size: 10px;
  margin-left: 1px;
}

/* ── F. 相关推荐卡:无封面时 cover 占位半屏空白 → 移除并压实 ── */
.relatedPosts-list > a {
  padding: 18px 14px !important;
  border-radius: 12px;
  transition: translate 0.22s ease, box-shadow 0.22s ease !important;
}
.relatedPosts-list > a .cover {
  display: none !important;
}
.relatedPosts-list > a .info-1 .info-item-2 {
  text-wrap: balance;
}
@media (hover: hover) {
  .relatedPosts-list > a:hover {
    translate: 0 -3px;
    box-shadow: 0 10px 26px rgba(16, 24, 40, 0.10) !important;
  }
}

/* ── G. 孤字换行治理:标题类文本平衡换行 ───────────────────── */
#recent-posts.masonry .article-title,
.article-sort-item-title,
#aside-content .aside-list > .aside-list-item .content > .title,
.pagination-related .info-2 {
  text-wrap: balance;
}

/* ── H. 选区与键盘焦点 ─────────────────────────────────────── */
::selection {
  background: rgba(7, 193, 96, 0.22);
  background: color-mix(in srgb, var(--theme-accent-current, #07C160) 22%, transparent);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--theme-accent-current, #07C160);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════
   第三轮(2026-08-28):动效编排
   入场动画走独立 translate/opacity 属性,不碰 transform——
   网格锁(theme-system.css)用 transform:none !important 压
   MasonryInfiniteGrid 的内联定位,hover 抬升也在用 transform,
   三者互不踩脚。过渡类由 /js/ui-polish.js 挂载、动画结束后摘除,
   摘除后卡片回到第一轮的 hover 过渡,不残留延迟。
   ════════════════════════════════════════════════════════════ */

/* ── I. 滚动入场编排(首页卡片 / 侧栏卡片 / 分页 / 归档时间轴 /
   标签云 / 分类树 / 页脚) ───────────── */
@media (prefers-reduced-motion: no-preference) {
  #recent-posts.masonry .recent-post-item.ui-reveal,
  #aside-content .card-widget.ui-reveal,
  #pagination .pagination.ui-reveal,
  .article-sort-item.ui-reveal,
  .article-sort-title.ui-reveal,
  .tag-cloud-list.ui-reveal,
  .category-lists.ui-reveal,
  #footer .footer-other.ui-reveal {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 0.65s ease, translate 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  #recent-posts.masonry .recent-post-item.ui-reveal.ui-revealed,
  #aside-content .card-widget.ui-reveal.ui-revealed,
  #pagination .pagination.ui-reveal.ui-revealed,
  .article-sort-item.ui-reveal.ui-revealed,
  .article-sort-title.ui-reveal.ui-revealed,
  .tag-cloud-list.ui-reveal.ui-revealed,
  .category-lists.ui-reveal.ui-revealed,
  #footer .footer-other.ui-reveal.ui-revealed {
    opacity: 1;
    translate: 0 0;
  }
}

/* ── J. 卡片标题 hover 下划线扫入(与 accent 抬升同语言) ─────── */
#recent-posts.masonry .recent-post-item > .recent-post-info > .article-title {
  padding-bottom: 3px;
  background-image: linear-gradient(90deg, rgba(7, 193, 96, 0.4), #07C160);
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--theme-accent-current, #07C160) 40%, transparent),
    var(--theme-accent-current, #07C160));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.35s ease, color 0.2s ease;
}
@media (hover: hover) {
  #recent-posts.masonry .recent-post-item > .recent-post-info > .article-title:hover {
    background-size: 100% 2px;
  }
}

/* ── K. 侧栏头像 lazyload 淡入(1x1 占位 → 真图不再跳变) ─────── */
#aside-content .avatar-img img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#aside-content .avatar-img img.loaded,
#aside-content .avatar-img img.error {
  opacity: 1;
}

/* ── L. 跨页 View Transitions (已废弃移除 2026-09) ─────────────
   Chromium 跨文档 View Transitions (@view-transition { navigation: auto; })
   在含持续运行 WebGL Canvas 的多页面静态网站中极易发生 Compositor 与
   GPU 进程竞争死锁，导致页面卡在交叉淡化中间态（双页半透明重叠假死）。
   现已彻底废弃移除，恢复浏览器原生极速跳转，零延迟、零卡死风险。 */

/* ── M. 目录百分比徽标:数值变化时轻脉冲(JS 节流 ≥0.9s/次) ────── */
@media (prefers-reduced-motion: no-preference) {
  #aside-content #card-toc .toc-percentage.toc-pulse {
    animation: tocPulse 0.6s ease;
  }
  @keyframes tocPulse {
    0% { transform: scale(1); }
    35% {
      transform: scale(1.18);
      color: var(--theme-accent-current, #07C160);
      border-color: var(--theme-accent-current, #07C160);
    }
    100% { transform: scale(1); }
  }
}

/* ════════════════════════════════════════════════════════════
   第五轮(2026-08-28):全站动效推广 + 残留色修补
   ════════════════════════════════════════════════════════════ */

/* ── N. TOC 激活项:Butterfly 默认 #00c4b6 青绿块(又一漏网硬编码,
   与 D 板块的 #8b6f47 棕色同源)→ 主题色浅底 + 左侧指示条滑入 ── */
#aside-content #card-toc .toc-content .toc-link {
  border-left: 2px solid transparent;
  transition: color 0.2s ease, background-color 0.25s ease, border-color 0.25s ease;
}
#aside-content #card-toc .toc-content .toc-link.active {
  background: rgba(7, 193, 96, 0.10);
  background: color-mix(in srgb, var(--theme-accent-current, #07C160) 12%, transparent);
  color: var(--theme-accent-current, #07C160) !important;
  border-left-color: var(--theme-accent-current, #07C160);
  font-weight: 600;
}

/* ── P. 主题切换颜色过渡(html.theme-gliding 由 JS 在 themechange 时
   挂载 ~550ms):消灭换主题瞬间背景/卡片/导航的颜色硬切。
   只列大表面,不碰 * 通配,避免全页重绘风暴。 */
html.theme-gliding body,
html.theme-gliding #nav,
html.theme-gliding #footer,
html.theme-gliding #web_bg,
html.theme-gliding .card-widget,
html.theme-gliding .recent-post-item,
html.theme-gliding #pagination .page-number,
html.theme-gliding #pagination .extend {
  transition: background-color 0.45s ease, border-color 0.45s ease,
              color 0.45s ease, box-shadow 0.45s ease, translate 0.25s ease;
}
/* 审计修复(2026-08-28): 板块 C 的 ID 选择器特异性更高,其过渡列表
   没有 background-color/color,首页卡片换主题时还是会硬切——这里
   加一条 ID 前缀的同列表规则把它盖回去 */
html.theme-gliding #recent-posts .recent-post-item {
  transition: background-color 0.45s ease, border-color 0.45s ease,
              color 0.45s ease, box-shadow 0.45s ease, translate 0.25s ease;
}

/* ── Q. 文章内图片 lazyload 淡入(1x1 占位 → 真图 0.45s 淡入,
   类由 JS 挂载;只动 opacity,不碰 fm-* 布局防线) ── */
#article-container img.ui-img-wait {
  opacity: 0;
}
#article-container img.ui-img-done {
  animation: uiImgIn 0.45s ease;
}
@keyframes uiImgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── R. 代码块/表格内部滚动条主题化(根滚动条已隐藏,内部滚动器
   保留但收细、上主题色) ── */
#article-container pre::-webkit-scrollbar,
#article-container .table-wrap::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
#article-container pre::-webkit-scrollbar-thumb,
#article-container .table-wrap::-webkit-scrollbar-thumb {
  background: rgba(7, 193, 96, 0.35);
  background: color-mix(in srgb, var(--theme-accent-current, #07C160) 35%, transparent);
  border-radius: 3px;
}
#article-container pre::-webkit-scrollbar-track,
#article-container .table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
#article-container pre,
#article-container .table-wrap {
  scrollbar-width: thin;
  /* Firefox 用 scrollbar-color 上色 (拇指色/轨道色与上面 webkit 一致) */
  scrollbar-color: rgba(7, 193, 96, 0.35) transparent;
  scrollbar-color: color-mix(in srgb, var(--theme-accent-current, #07C160) 35%, transparent) transparent;
}

/* ── S. 页脚:链接 hover 下划线扫入(currentColor,水光底色上自适应) ── */
#footer .footer-copyright a,
#footer .footer-other a {
  position: relative;
  text-decoration: none;
}
#footer .footer-copyright a::after,
#footer .footer-other a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  opacity: 0.75;
  transition: width 0.25s ease;
}
@media (hover: hover) {
  #footer .footer-copyright a:hover::after,
  #footer .footer-other a:hover::after {
    width: 100%;
  }
}