/* Stonon - Visual Beautification
 * Supplementary CSS layer for enhanced visual polish.
 * Safe to remove anytime.
 */


/* 1. Article Cards — Depth & Hover Lift */
.post-entry {
    border-radius: var(--radius);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.post-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .post-entry {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .post-entry:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.post-entry-pinned {
    border-left: 3px solid var(--primary);
}

/* 2. Typography — Heading Polish */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
    line-height: 1.3;
}

h1 { letter-spacing: -0.02em; }

.post-single h1 {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.post-single h2 {
    font-size: 1.65rem;
    font-weight: 650;
    margin-top: 2.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.post-single h3 {
    font-size: 1.3rem;
    font-weight: 600;
}

.post-single p { line-height: 1.8; }

.post-single blockquote {
    border-inline-start: 3px solid var(--tertiary);
    padding: 0.8rem 1.2rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--code-bg);
}

/* 3. Header — Subtle Blur & Depth */
.header {
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--border);
}

:root[data-theme="dark"] .header {
    background: var(--entry);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* 4. Links & Interactive Elements */
a { transition: color .15s ease; }

.post-single a {
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.post-single a:hover { text-decoration-thickness: 2px; }

.terms-tags a,
.post-tags a {
    transition: all .2s ease;
    font-weight: 500;
}

.terms-tags a:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 5. Code Blocks — Refined */
.post-single pre {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-single code {
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-size: 0.9em;
}

.post-single :not(pre) > code {
    background: var(--code-bg);
}

/* 6. Images — Smooth Radius & Shadow */
.post-single img {
    border-radius: var(--radius);
    transition: transform .3s ease, box-shadow .3s ease;
}

.post-single img:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 7. Article Navigation — Refined */
.post-nav-links a {
    transition: all .2s ease;
    border-radius: var(--radius);
}

.post-nav-links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 8. Copyright Notice — Subtle Card */
.cc-license {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--code-bg);
}

/* 9. Search — Polished Input & Results */
.searchbox input {
    padding: 12px 18px;
    width: 100%;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--entry);
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.searchbox input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.searchbox input::placeholder {
    color: var(--secondary);
    font-weight: 400;
}

.searchResults {
    margin: 16px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.searchResults li {
    list-style: none;
    border-radius: var(--radius);
    padding: 14px 18px;
    position: relative;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--entry);
    border: 1px solid var(--border);
    transition: all .25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.searchResults li:hover,
.searchResults li:focus-within {
    transform: translateY(-2px);
    border-color: var(--tertiary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.searchResults li svg {
    color: var(--secondary);
    transition: color .2s ease, transform .2s ease;
}

.searchResults li:hover svg {
    color: var(--primary);
    transform: translateX(4px);
}

.searchResults li .entry-link {
    position: absolute;
    inset: 0;
}

.searchResults li .entry-link:focus {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.searchResults .search-loading,
.searchResults .search-error {
    justify-content: center;
    font-weight: normal;
    color: var(--secondary);
    font-size: 0.95rem;
    padding: 24px 18px;
}

.searchResults .search-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid var(--tertiary);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

.searchResults .search-error {
    color: #e74c3c;
}

/* 9b. 搜索结果「加载更多」按钮：与 .search-entry 同套卡片样式但居中、无悬浮上浮效果 */
.searchResults li.search-load-more {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0 0;
    justify-content: center;
}
.searchResults li.search-load-more:hover,
.searchResults li.search-load-more:focus-within {
    transform: none;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.searchResults li.search-load-more::after {
    display: none;
}

.search-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--primary);
    background: var(--entry);
    border: 1.5px solid var(--tertiary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    line-height: 1.5;
}
.search-load-more-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.search-load-more-btn:active {
    transform: translateY(0);
}
.search-load-more-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 10. Scrollbar — Subtle & Slim */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--tertiary);
    border-radius: 4px;
    transition: background .2s ease;
}
::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

/* 11. Focus Rings — Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 12. Selection Highlight */
::selection {
    background: var(--primary);
    color: var(--theme);
}

/* 13. Page Entry — Disabled to prevent mobile flash */
/* .main { animation: fadeIn .3s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
} */

@media (prefers-reduced-motion) {
    .main { animation: none; }
    .post-entry { transition: none; }
}

/* 14. Mobile Refinements */
@media screen and (max-width: 768px) {
    .post-entry:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .terms-tags a:hover {
        transform: none;
        box-shadow: none;
    }
    .searchbox input {
        padding: 10px 14px;
        font-size: 16px;
    }
}
/* 15. Footer — Remove underline, no hover highlight, smaller font */
.footer-powered {
    font-size: 0.55rem !important;
    opacity: 0.7;
}

.footer-powered a {
    text-decoration: none !important;
    cursor: text !important;
    color: inherit !important;
    transition: none !important;
}

.footer-powered a:hover,
.footer-powered a:focus {
    text-decoration: none !important;
    color: inherit !important;
    opacity: 1;
}

/* 16. Floating TOC widget — button toggle + popup, integrated into nav-widget
   初始隐藏：HTML 里 <aside> 位于 <article> 前，首次渲染会出现在文章顶部；
   等 JS 把它 insertBefore 到 nav-widget 内部后，再加 .ready 显示，
   避免加载时"按钮从文章顶部跳到右下角"的闪烁。 */
.toc-widget {
    position: relative;
    display: none;
    justify-content: center;
}

.toc-widget.ready {
    display: flex;
}

.toc-widget-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 10px;
    border-radius: 64px;
    background: var(--tertiary);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: transform .2s ease, color .2s ease, background .2s ease;
    filter: drop-shadow(0px 0px 0px var(--theme));
}

.toc-widget-btn:hover {
    color: var(--primary);
    transform: scale(1.08);
}

.toc-widget-btn[aria-expanded="true"] {
    color: var(--primary);
    background: var(--border);
    transform: scale(1.05);
}

.toc-widget-btn svg {
    width: 100%;
    height: 100%;
}

.toc-widget-popup {
    position: absolute;
    bottom: 0;
    right: calc(100% + 0.75rem);
    width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 12px 14px;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--secondary);
    /* 主题风格细滚动条 */
    scrollbar-width: thin;
    scrollbar-color: var(--tertiary) transparent;
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}

[data-theme="dark"] .toc-widget-popup {
    background: var(--entry);
}

.toc-widget-popup.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.toc-widget-popup::-webkit-scrollbar {
    width: 6px;
}

.toc-widget-popup::-webkit-scrollbar-track {
    background: transparent;
}

.toc-widget-popup::-webkit-scrollbar-thumb {
    background: var(--tertiary);
    border-radius: 3px;
}

.toc-widget-popup::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

.toc-widget-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.toc-widget-popup #TableOfContents {
    margin: 0;
    padding: 0;
}

.toc-widget-popup ul {
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
}

.toc-widget-popup ul ul {
    padding-inline-start: 12px;
    margin: 2px 0;
}

.toc-widget-popup li {
    margin: 0;
}

.toc-widget-popup a {
    display: block;
    color: var(--secondary);
    text-decoration: none !important;
    padding: 3px 8px;
    margin: 1px 0;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toc-widget-popup a:hover {
    color: var(--primary);
    background: var(--border);
}

.toc-widget-popup a.active {
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
    background: var(--border);
}

/* 弹层在小屏占满宽度，避免溢出 */
@media screen and (max-width: 600px) {
    .toc-widget-popup {
        position: fixed;
        bottom: 8rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: 320px;
        max-height: 50vh;
    }
}

@media (prefers-reduced-motion) {
    .toc-widget-btn,
    .toc-widget-popup {
        transition: none;
    }
    .toc-widget-btn:hover {
        transform: none;
    }
}

/* 17. 粘性页脚 Sticky Footer — 内容短也把 footer 压到文档最底部
   body 使用 flex column，main 占满剩余空间；footer 随 main 下推

   注意：绝对不能改动 .main 的水平布局（margin:auto / max-width），
   这是 PaperMod 列表页 / 文章页共用的布局规则，否则会出现"分类/标签/
   归档/搜索全部居中"的异常。水平布局保持 main.css 默认，粘性页脚
   只通过 body min-height + flex-direction + main flex:1 实现，
   不干预 main 的 max-width 与 margin。 */
html,
body {
    height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > main.main {
    flex: 1 0 auto;
    width: 100%;
    /* -------- 让分页条（footer.page-footer）无论正文是否为空都"沉"到 main 的底部靠近版权条 --------
       FailureExperience 1118015：用户说"底部固定"不是 position:fixed 悬浮在视口底，
       而是"内容空了别跟着 header 飘到上面，贴到版权条上方"。
       实现：
         1) main.main 自己也是 column flex 容器；
         2) 中间留一个 flex:1 的"空白占位条" .main-spacer（JS 在初始化时插入），
            没文章时 spacer 吃满 main 的剩余高度，把 footer.page-footer 撑到最下沿；
         3) 有文章时文章高度 > 视口，spacer 高度自然缩成 0，不影响正常间距。
       另：margin-top:auto 方案在文章 display:none 后前面 11 个隐藏 article 仍然占用 flex
       item 的"隐式空间"（它们虽然 display:none，但 flex-item gap/顺序让 auto margin
       只能顶到隐藏文章下方），所以改用显式 spacer + gap:0 更稳。 */
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* 【首页文章卡片间距恢复原版 hugo-PaperMod-master】
   之前：beautify.css 给每个 .post-entry 额外加了 margin-top:var(--gap)，与原生 margin-bottom:var(--gap)
        叠加后，在 flex-column main 里（margin 不折叠）相邻文章间距变成 2×gap，比原版大 1 倍。
   现在：去掉通用 margin-top，仅保留第一篇（first-of-type）的顶部 margin 控制它与 home-info 的距离，
        其它文章只靠原生 margin-bottom:var(--gap) 产生 1×gap 的相邻间距，与原版完全一致。 */
body > main.main > article.post-entry:first-of-type {
    margin-top: calc(var(--gap) * 0.5);
}
/* 空白占位条：吃满 main.main 的剩余高度，把 footer.page-footer 沉到最下沿
   该节点由 list-pagination.js 的 init() 注入（<div class="main-spacer"></div>）。 */
body > main.main > .main-spacer {
    flex: 1 1 auto;
    min-height: 0;
}
/* 保证 footer.page-footer 不收缩 */
body > main.main > footer.page-footer,
body > main.main > .page-footer {
    flex-shrink: 0;
}
body > main.main > .page-header {
    flex-shrink: 0;
}
/* 列表/分类/标签/归档/搜索 页的 page-header：与首页 post-entry 对齐（左对齐、满宽），不要居中
   根因：PaperMod 原生 .page-header{ margin:24px auto var(--content-gap) auto } 在 flex-column main 下，
         auto margin 会吃掉 cross-axis 剩余空间，让 page-header 宽度收缩到内容宽度（100~160px）并居中。
         而首页的 .post-entry 没有 auto margin，默认 stretch 到 720px 左对齐。两者不对齐。 */
body.list > main.main > .page-header {
    margin-inline: 0 !important;   /* 去掉左右 auto margin，解除居中 */
    width: 100%;                   /* 显式占满 main 内容宽度（与 .post-entry 同宽：720px） */
}
body > main.main > .post-entry,
body > main.main > article {
    flex-shrink: 0;
}

body > footer.footer {
    flex-shrink: 0;
}
/* 【Fancybox 灯箱：让图片在视口里居中 + 等比 fit】
   · 根因：Fancybox v5 把 .fancybox__content 宽度按图片等比缩放算（竖图只 263px），
           但 CSS 给 img 加 min-width:85vw=700px 后 img 溢出 content 437px，
           content 自身被 Fancybox 定位在 left=280，导致 img 跟着跑到右侧。
   · 解决：把 .fancybox__content 强制 = 视口尺寸 + flex 居中，
           img 用 max-width/max-height + width:auto + height:auto 等比 fit 居中显示。
   · Panzoom minScale=1 保证不被压成 156px；maxScale=10 用户可滚轮放大 10× */
.fancybox__slide.is-selected .fancybox__content {
    width: 95vw !important;
    height: 95vh !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.fancybox__slide img.fancybox-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* -------- 归档分页条（上一页 / 下一页 / 页码）：居中 + 自适应满屏 + 版权条同款分隔线 --------
   · 对齐 Stack 样板 (hugo-theme-stack-master) 的分页结构：
     - 外层 .page-footer：100% 宽 + border-top 一条横线（和版权条横线贯穿效果一致）
     - 内层 nav.pagination：**max-width = main-width + gap*2 + 居中 + 左右 padding=gap**（和正文内容区完全同网格）
       → flex 排布，justify-content:center（整体居中），page-num/hide-on-mobile 分级响应式显示
     - prev / next：不占满左右两端（不贴边），而是作为 flex 项参与居中（和 Stack 一样"对称地夹在中间"）
     - 页码自适应分级：
       · <480px (xs)   : only prev · curr · next（2个固定页+当前页+省略号由 CSS hide-on-mobile 隐藏）
       · <768px (sm)   : 1 · curr±1 · last（5个单位+省略号）
       · <1024px (md)  : 1 · curr±2 · last（7个单位+省略号）
       · ≥1024px (lg)  : 1 · curr±3 · last（9个单位+省略号）
       （比 Stack 的 hide-on-mobile 更细：用 CSS 类 hide-xs/sm/md 逐级隐藏）
*/
.page-footer {
    width: 100%;                  /* 自适应：随视口宽度拉伸 */
    flex-shrink: 0;
    /* 去掉顶部分隔线横线：用户反馈太碍眼 */
    margin-top: calc(var(--gap) * 0.5);
    padding-top: calc(var(--gap) * 0.7);
    padding-bottom: calc(var(--gap) * 0.7);
}
/* -------- 首页顶部分页条（page-footer-top）：和底部分页条同款样式，但间距独立调节 --------
     · margin-top: 0（紧贴 home-info / page-header 下方，不需要上留空）
     · margin-bottom: 给它加上与底部 page-footer.margin-top 对称的空距，和首篇 .post-entry 之间形成 1×gap 级的视觉呼吸
     · padding-top/bottom 与底部保持完全一致（内部 pill 的上下留白统一）*/
.page-footer.page-footer-top {
    margin-top: 0;
    margin-bottom: calc(var(--gap) * 0.5);
    padding-top: calc(var(--gap) * 0.7);
    padding-bottom: calc(var(--gap) * 0.7);
}
.page-footer .pagination {
    max-width: calc(var(--main-width) + var(--gap) * 2);   /* 跟版权/内容同网格宽度 */
    margin-inline: auto;                 /* 内容居中对齐（核心：分页条整体水平居中） */
    padding-inline: var(--gap);          /* 与 main.main 的左右 padding 对齐，按钮与正文左右边缘同步 */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;            /* 所有项作为一组居中（prev / page-nums / next 居中对称） */
    flex-wrap: wrap;
    gap: 8px;                           /* 各 pill 之间的间距（和 Stack 的视觉密度对齐） */
}
.page-footer .pagination a {
    color: var(--theme);
    font-size: 13px;
    line-height: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: calc(36px / 2);
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    text-decoration: none;
    cursor: pointer;
    flex: 0 0 auto;                    /* 不拉伸，按自身宽度占位（避免 prev/next 变巨宽破坏居中） */
}
.page-footer .pagination a:hover:not([aria-disabled="true"]):not(.is-active) {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
    background: color-mix(in oklab, var(--primary) 88%, var(--entry));
}
.page-footer .pagination a.is-active {
    /* 当前页：白底 + 主题色描边 + 主题色字（"实心轮廓"风，一眼看见在哪一页） */
    background: var(--entry);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 1px 0 0 color-mix(in oklab, var(--primary) 22%, transparent);
    cursor: default;
}
.page-footer .pagination a[aria-disabled="true"],
.page-footer .pagination a.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}
.page-footer .pagination a.page-num {
    padding: 0;                  /* 36x36 圆 */
    font-weight: 600;
}
.page-footer .pagination a.page-num.is-active { /* 选中数字 pill 描边略加粗 */
    border-width: 1.5px;
}
.page-footer .pagination .page-ellipsis {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 28px;
    height: 36px;
    padding-bottom: 6px;
    color: var(--secondary);
    font-size: 16px;
    letter-spacing: 2px;
    pointer-events: none;
    user-select: none;
    flex: 0 0 auto;
}
.page-footer .pagination .prev,
.page-footer .pagination .next {
    /* 作为"对称胶囊"参与居中，不再把 next 强行贴右 margin:auto */
}

/* -------- 响应式页码分级（和 Stack 样板 "hide-on-mobile" 思路一致 + 扩展为 4 级）--------
   规则（Hugo 模板 / JS 都给 page-num 打上 class: hide-xs/hide-sm/hide-md）
     page-num 本身总显示；hide-* 在对应断点下 display:none
     省略号(.page-ellipsis)也带同名 hide-* class，同步隐藏
   显示窗口：
     xs (<480) ：只保留 [1, curr, last, prev, next, 两侧省略号留 DOM（但 ellipsis 如相邻数字都 hide 则 JS 不生成或 CSS 也 hide）]
     sm (<768) ：显示 1 + curr±1 + last（中间如不连续则出现省略号）
     md (<1024)：显示 1 + curr±2 + last
     lg (≥1024)：显示 1 + curr±3 + last
*/
.page-footer .pagination .prev,
.page-footer .pagination .next {
    /* 核心：覆盖 PaperMod 原版 .pagination .next { margin-inline-start: auto }，否则 justify-content:center 会被"强制把 next 甩到右缘"破坏 */
    margin: 0 !important;
}
.page-footer .pagination .hide-xs { display: inline-flex; }
.page-footer .pagination .hide-sm { display: inline-flex; }
.page-footer .pagination .hide-md { display: inline-flex; }

@media (max-width: 1023px) {
    .page-footer .pagination .hide-md { display: none !important; }
}
@media (max-width: 767px) {
    .page-footer .pagination .hide-sm { display: none !important; }
}
@media (max-width: 479px) {
    .page-footer .pagination .hide-xs { display: none !important; }
}
/* 【强制兜底】省略号永远不随断点隐藏 —— 哪怕将来有人/脚本给 .page-ellipsis 再打
   上 hide-xs/hide-sm/hide-md，这里也会用更高 specificity 把 display 盖回 inline-flex。
   原因：省略号 = "有页码被截断"的语义锚点，小屏上数字可以少，但截断的提示不能没。*/
.page-footer .pagination .page-ellipsis,
.page-footer .pagination .page-ellipsis.hide-xs,
.page-footer .pagination .page-ellipsis.hide-sm,
.page-footer .pagination .page-ellipsis.hide-md {
    display: inline-flex !important;
}

/* 小屏：pagination 紧凑一点；hide-* 已经处理了数量，这里只管 pill 尺寸和换行 */
@media (max-width: 560px) {
    .page-footer .pagination a {
        line-height: 32px;
        height: 32px;
        min-width: 32px;
        padding: 0 12px;
        font-size: 12.5px;
        border-radius: calc(32px / 2);
    }
    .page-footer .pagination a.page-num { padding: 0; }
    .page-footer .pagination .page-ellipsis {
        min-width: 20px;
        height: 32px;
        font-size: 14px;
        padding-bottom: 4px;
    }
    .page-footer .pagination {
        gap: 6px;
    }
}


/* -------- 归档年份导航条（顶部独立栏）--------
   · 横向滚动条（年份多了不换行，overflow-x:auto）
   · 顺序：最新年份（2026）最左靠前 → 往年（2020）最右靠后
   · 取消 sticky：固定在顶部会遮挡文章，滚动时正常跟页面一起走（用户明确要求）*/
.archive-years-nav {
    display: flex;
    flex-wrap: nowrap;                  /* 一行，绝不换行；溢出触发横滚条 */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 10px 2px 14px 2px;
    margin: 0 0 8px 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.archive-years-nav::-webkit-scrollbar {
    height: 8px;
}
.archive-years-nav::-webkit-scrollbar-thumb {
    background: var(--tertiary);
    border-radius: 4px;
}
.archive-years-nav::-webkit-scrollbar-track {
    background: transparent;
}

.archive-year-chip {
    flex: 0 0 auto;                     /* 不被压缩，保持原始宽度，溢出才出现水平滚动条 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;               /* 圆头 pill */
    background: var(--entry);           /* 与下方月份 chip 同源：白底/条目底 + 细描边，亮色模式不再是灰色 tertiary */
    border: 1px solid var(--border);
    color: var(--primary);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    cursor: pointer;
}
.archive-year-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
    background: color-mix(in oklab, var(--primary) 10%, var(--entry));
}
.archive-year-chip.is-active {
    background: var(--primary);
    color: var(--theme);
    border-color: var(--primary);
    transform: translateY(-1px);
}
.archive-year-chip .year {
    letter-spacing: 0.02em;
}
.archive-year-chip .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 19px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--theme);           /* 与月份 chip.count 一致：中性底 + 主题色数字 */
    color: var(--primary);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}
.archive-year-chip.is-active .count {
    background: var(--theme);
    color: var(--primary);
    border-color: transparent;
}

/* 小屏：更紧凑 */
@media (max-width: 600px) {
    .archive-years-nav {
        padding: 8px 0 12px 0;
        gap: 8px;
    }
    .archive-year-chip {
        padding: 7px 14px;
        font-size: 13.5px;
    }
    .archive-year-chip .count {
        min-width: 20px;
        height: 17px;
        font-size: 10.5px;
        padding: 0 6px;
    }
}

/* -------- 归档月份导航条（年份芯片条下方）--------
   · 样式复用年份 chip：同色系、同结构，但字号/间距略小（形成层级：年份大、月份小）
   · 默认只显示当前选中年份下"实际有文章"的月份（1-12 月中空白月份不显示，避免占位）
   · 第一个 chip 恒为「全部」（代表当前年份不按月筛）
   · 横向溢出同样出现水平滚动条 */
.archive-months-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 6px 2px 14px 2px;
    margin: 0 0 calc(var(--gap) * 0.7) 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border);
}
.archive-months-nav[hidden],
.archive-months-nav.is-empty {
    display: none !important;
}
.archive-months-nav::-webkit-scrollbar {
    height: 7px;
}
.archive-months-nav::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--tertiary) 85%, var(--primary) 15%);
    border-radius: 4px;
}

.archive-month-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--entry);
    border: 1px solid var(--border);
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    cursor: pointer;
}
.archive-month-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
    background: color-mix(in oklab, var(--primary) 10%, var(--entry));
}
.archive-month-chip.is-active {
    background: var(--primary);
    color: var(--theme);
    border-color: var(--primary);
    transform: translateY(-1px);
}
.archive-month-chip .month {
    letter-spacing: 0.01em;
}
.archive-month-chip .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 17px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--theme);
    color: var(--primary);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.archive-month-chip.is-active .count {
    background: var(--theme);
    color: var(--primary);
    border-color: transparent;
}

@media (max-width: 600px) {
    .archive-months-nav {
        padding: 4px 0 12px 0;
        gap: 6px;
    }
    .archive-month-chip {
        padding: 5px 11px;
        font-size: 12.5px;
    }
    .archive-month-chip .count {
        min-width: 18px;
        height: 16px;
        font-size: 10.5px;
        padding: 0 5px;
    }
}

/* -------- 年份容器（正文内） --------
   · 年份小标题已无意义：年份 chip 条在顶部可选，正文不再重复显示年份。
   · 月份节点（.archive-month-header）保留作为列表内的分隔锚点。 */
.archive-year {
    margin-top: 0;
    padding: 0 0 calc(var(--gap) * 1.1) 0;
}
.archive-year:not(:last-of-type) {
    border-bottom: none;
    margin-bottom: 0;
}

/* 正文内的年份小标题 = 完全不显示（用户选择年份后即可，正文里再来一份是冗余） */
.archive-year-header {
    display: none !important;
}
.archive-year-header .archive-count {
    color: var(--secondary);
    background: var(--tertiary);
    border-radius: 999px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    min-width: 18px;
    text-align: center;
    opacity: 0.75;
    vertical-align: unset;
    top: unset;
}

/* -------- 月份块 --------
   原 archive.css 用两列 flex（月份标题 200px 固定宽 + 文章），
   主内容区只有 720px 宽，200px 让文章区只剩 520px，信息密度低且视觉割裂。
   改为：月份节点（小圆点 + 月份名），文章列表全宽，与搜索结果 .searchResults 对齐。 */
.archive-month {
    display: block;
    padding: 0;
}
.archive-month:not(:last-of-type) {
    border-bottom: none;
    margin-bottom: var(--content-gap);
}

.archive-month-header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0 0 12px 2px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary);
    letter-spacing: 0.03em;
}
.archive-month-header::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tertiary);
    border: 2px solid var(--border);
    box-shadow: 0 0 0 3px var(--entry);  /* 小"时间轴锚点"效果，不夸张 */
}
.archive-month-header a.archive-header-link {
    color: inherit;
    text-decoration: none;
}
.archive-month-header .archive-count {
    font-size: 12px;
    opacity: 0.75;
    vertical-align: middle;
}

/* -------- 文章列表栅格：与 .searchResults 完全一致的 gap -------- */
.archive-posts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
}

/* -------- 文章条目卡片：与 .post-entry / .searchResults li 同套卡片样式 --------
   变量一致 → 亮暗主题自动跟随。 */
.archive-entry {
    position: relative;
    margin: 0;
    padding: 14px 18px;
    background: var(--entry);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.archive-entry:hover,
.archive-entry:focus-within {
    transform: translateY(-2px);
    border-color: var(--tertiary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* 标题：跟 .post-entry / .searchResults li 同级 */
.archive-entry-title {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.45;
    color: var(--primary);
}
.archive-entry-title .entry-hint {
    color: var(--secondary);
}

/* 元信息：与 .entry-footer 同级 */
.archive-meta {
    color: var(--secondary);
    font-size: 12.5px;
    line-height: 1.4;
}

/* 卡片全可点（.entry-link 已经是 absolute full area），这里加 focus 可见性 */
.archive-entry .entry-link:focus {
    outline: 2px solid var(--secondary);
    outline-offset: -3px;
    border-radius: var(--radius);
}

/* -------- 小屏适配：更紧凑，标题略小 -------- */
@media (max-width: 600px) {
    .archive-entry {
        padding: 12px 14px;
    }
    .archive-entry-title {
        font-size: 15px;
    }
    .archive-year-header {
        font-size: 14px;
        padding: 5px 14px 5px 12px;
    }
}


/* ============================================================
   （TEMP HIDE POST ENTRIES 已移除 — 恢复正常显示）
   ============================================================ */

/* ============================================================
   18. 零成本性能美化（纯 CSS：不加载资源 / 不碰 backdrop-filter / 不跑 JS）
   平滑滚动 · 中文字体渲染 · Markdown 表格
   ============================================================ */

/* 18a. 平滑滚动：点 TOC / 返回顶部 / 页内锚点时丝滑过渡（仅点击时触发，零常驻开销） */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* 18b. 中文字体渲染精修：锐利度 + 亚像素平滑，纯 CSS 渲染提示，无额外计算 */
html,
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 18c. Markdown 表格增强：表头底色 + 行 hover 高亮 + 边框合并
   排除逻辑与 md-content.css 一致（不碰代码高亮表格），黑白灰自适应 */
.md-content table:not(.highlighttable, .highlight table, .gist .highlight) {
    border-collapse: collapse;
}

.md-content table:not(.highlighttable, .highlight table, .gist .highlight) thead th {
    background: var(--code-bg);
    font-weight: 600;
}

.md-content table:not(.highlighttable, .highlight table, .gist .highlight) tbody tr:hover {
    background: var(--code-bg);
}