/* ============================================================
   作品详情页：目录树本体 + 页尾翻页（计划书 §8.3）
   2026-09-26 ｜ 2026-10-19 改版：只被 works/work_detail.html 引入
   ------------------------------------------------------------
   本文件现在只管两件事：
     1) 目录树长什么样（缩进、折叠箭头、当前页高亮）；
     2) 页尾"上一页 / 下一页"翻页条。
   目录的外壳（左侧悬浮栏、毛玻璃、收起标签、深浅翻面）已迁到
   work_rail.css —— 原先"窄屏顶部下拉横条 + 桌面 ≥1800px 右侧侧栏"
   两套外壳全部退役，只剩左侧悬浮栏一种形态。

   折叠交互仍是零 JS：树分支用 checkbox + label（:checked 控制子级显隐），
   当前页高亮 is-current、祖先链默认展开由服务端输出，
   「直达子页 URL → 刷新 → 停留在当前页并展开所在分支」由此保证。
   ============================================================ */

/* ---------- 目录树 ---------- */

.wp-toc-list,
.wp-toc-sub ul { list-style: none; }
.wp-toc-list { margin: 0; padding: 0; }

/* 子级容器：默认随父级 checkbox 折叠；缩进 + 左侧淡色缩进线
   （与编辑器左栏列表 indent guides 同语义） */
.wp-toc-sub {
    display: none;
    margin-left: 15px;
    padding-left: 12px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.wp-toc-branch-toggle:checked ~ .wp-toc-sub { display: block; }

.wp-toc-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;      /* 行高统一，叶子页（无箭头）与分支页对齐 */
}

/* 折叠箭头：label（分支）或占位 span（叶子），同一几何保证纵向对齐 */
.wp-toc-caret {
    flex: none;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
/* 箭头本体：小 chevron，右向；勾选（展开）后转 90° 朝下 */
.wp-toc-caret::before {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--color-text-sub);
    border-bottom: 1.5px solid var(--color-text-sub);
    transform: rotate(-45deg);        /* 右向 */
    transition: transform 0.2s ease;
}
.wp-toc-branch-toggle:checked + .wp-toc-row .wp-toc-caret::before {
    transform: rotate(45deg);         /* 朝下 */
}
/* 叶子页没有子级：占位透明，仅撑几何 */
.wp-toc-caret-leaf { cursor: default; }
.wp-toc-caret-leaf::before { content: none; }

.wp-toc-link {
    flex: 1 1 auto;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.wp-toc-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* 当前页：蓝色高亮胶囊（--color-accent），刷底色弱化边框。
   悬浮栏内的深浅适配版本在 work_rail.css（.wp-rail .wp-toc-*） */
.wp-toc-item.is-current > .wp-toc-row > .wp-toc-link {
    background: rgba(0, 113, 227, 0.1);
    color: var(--color-accent);
    font-weight: 600;
}

/* ---------- 页尾翻页条 ---------- */

/* 文档流位置：article.work-page 之后、footer 之前；
   与正文内容区（1484px 居中）对齐，宽度用 padding 套 --gutter-home */
.wp-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 12px;
    max-width: calc(1484px + 2 * var(--gutter-home));
    margin: 0 auto;
    padding: 40px var(--gutter-home) 72px;
}

.wp-pager-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    min-width: 0;              /* 允许内部长标题省略，撑破网格 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.wp-pager-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 113, 227, 0.35);
}
.wp-pager-next { grid-column: 3; text-align: right; }

.wp-pager-dir {
    font-size: 12px;
    color: var(--color-text-sub);
}
.wp-pager-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 首页/末页的灰态占位：不可点、弱化——保持左右按钮位置对称 */
.wp-pager-btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* 中间「第 X / N 页」指示 */
.wp-pager-index {
    align-self: center;
    padding: 0 8px;
    font-size: 13px;
    color: var(--color-text-sub);
    white-space: nowrap;
}

/* ---------- 移动端（≤768px） ---------- */

@media (max-width: 768px) {
    .wp-pager {
        /* 纵向折叠：页码指示置顶，上/下按钮并排一行 */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "index index"
            "prev  next";
        row-gap: 10px;
        padding: 28px 16px 56px;
    }
    .wp-pager-index {
        grid-area: index;
        justify-self: center;
    }
    .wp-pager-prev { grid-area: prev; }
    .wp-pager-next { grid-area: next; }
    .wp-pager-title { font-size: 14px; }
}

/* 尊重系统"减少动画"偏好（与 base.css 的 .reveal 同规矩） */
@media (prefers-reduced-motion: reduce) {
    .wp-toc-caret::before,
    .wp-pager-btn { transition: none; }
    a.wp-pager-btn:hover { transform: none; }
}