/* ============================================================
   作品详情页：左侧悬浮栏（目录 + 点赞）｜2026-10-19
   只被 works/work_detail.html 引入
   ------------------------------------------------------------
   形态：viewport 左侧固定浮层，上部是页面目录（或单页作品的预留位），
   下部是点赞。面板右缘贴一枚 24×64 的毛玻璃细条标签（iOS 26 液态玻璃）：
   点它 → 整条向左滑出视口，只剩标签常显；再点 → 滑回。

   为什么必须 fixed 悬浮而不与正文并排：
   正文 .work-page 是通顶布局，cover 等模组可能占满 100vw；把 article
   塞进分栏容器会改变正文可用宽度、破坏通顶模组几何。浮层是唯一不干扰
   文档流的做法（与改版前右侧目录同理，只是换了边）。

   深浅自动翻面（与导航同一套范式）：
   work-rail.js 调 main.js 导出的采样探针，按"栏底下压着的内容"判色，
   只切 .is-dark 一个类；这里只有 --rail-glass / --rail-fg 等变量翻面，
   透明度、模糊、阴影一律不动 → 切换只有 0.24s 底色渐变，与导航同参数。

   z-index 66：高于正文模组，低于导航(1000)、低于防保存浮层(9999)。
   ============================================================ */

.wp-rail {
    /* ---------- 几何令牌 ---------- */
    --rail-w: 220px;                          /* 面板宽度（原右侧目录 216，近似对齐） */
    --rail-gap: 16px;                         /* 离视口左缘 */
    --rail-tab-w: 24px;                        /* 收起态常显标签：24×64（用户指令） */
    --rail-tab-h: 64px;
    --rail-vgap: 24px;                         /* 上下呼吸间距（贴导航上方 / 视口下方） */
    --rail-shift: calc(var(--rail-w) + var(--rail-gap));  /* 收起时的位移量 */

    /* ---------- 主题令牌（浅色） ---------- */
    --rail-glass: 251, 251, 253;              /* 玻璃底色 RGB，与导航同族 */
    --rail-fg: #1d1d1f;
    --rail-fg-2: rgba(29, 29, 31, 0.6);
    --rail-line: rgba(0, 0, 0, 0.08);
    --rail-hover: rgba(0, 0, 0, 0.05);
    --rail-accent: #0071e3;

    position: fixed;
    left: var(--rail-gap);
    /* ★ 2026-10-20 用户两步指令：
       ①「左栏太长，改到约现在一半」→ 面板高 = 可用高度的一半（1080p 下 984 / 2 = 492px）；
          可用高度 = 视口高 − 导航高 − 上下呼吸（--rail-vgap × 2）。
       ②「应该和视口居中」→ 上缘 =（视口高 − 面板高）/ 2，即垂直方向居中于视口，
          不再贴着导航往下挂，半边留白改成上下各一半。
       --rail-avail 抽成变量是为了两个断点共用一条公式，不写死 px（否则换分辨率就错位）。
       vh 兜底 + @supports 升 dvh，和 nav.css 移动菜单同一套写法。 */
    --rail-avail: calc(100vh - var(--nav-height) - var(--rail-vgap) * 2);  /* 导航下方到视口底的净高 */
    height: calc(var(--rail-avail) / 2);                 /* 面板高 = 净高的一半 */
    top: calc((100vh - var(--rail-avail) / 2) / 2);      /* 垂直居中：上缘 =（视口高 − 面板高）/ 2 */
    width: var(--rail-w);                     /* 面板宽；标签绝对定位在 left:100% 探出 */
    z-index: 66;
    /* 收起动画：苹果式缓出曲线。位移用 transform（合成层，不引起重排） */
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    /* 子元素不能有自己的 backdrop-filter 祖先链问题——本层不放 filter，
       模糊全部由 .wp-rail-panel 自己承载 */
}

/* 深色主题：整组变量翻面（底色/文字/分隔线/悬停/强调色） */
.wp-rail.is-dark {
    --rail-glass: 34, 34, 34;
    --rail-fg: #f5f5f7;
    --rail-fg-2: rgba(245, 245, 247, 0.62);
    --rail-line: rgba(255, 255, 255, 0.16);
    --rail-hover: rgba(255, 255, 255, 0.1);
    --rail-accent: #2997ff;                   /* 深底上的苹果蓝（浅色蓝对比不足） */
}

/* JS 初始化前不播动画：窄屏初始收起时不会出现"进场先滑一下"的怪相 */
.wp-rail:not(.is-ready) { transition: none; }

/* 动态视口：移动端地址栏收放时 100vh 会算错，能升 dvh 就升（与 nav.css 移动菜单同套路）。
   只换 --rail-avail，height 与 top 都从它派生，一处改动两处生效 */
@supports (height: 100dvh) {
    .wp-rail {
        --rail-avail: calc(100dvh - var(--nav-height) - var(--rail-vgap) * 2);
    }
}

/* 收起态：整条左移出视口，标签正好停在左缘（x=0..24） */
.wp-rail[data-state="closed"] {
    transform: translateX(calc(-1 * var(--rail-shift)));
}

/* ---------- 面板 ---------- */

.wp-rail-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;                         /* 圆角裁掉内部滚动条的直角 */
    /* ★ 2026-10-20 用户指定：不透明度 + 模糊与**胶囊导航**（.nav-glass）对齐——
       原 alpha 0.58 / blur 16px → 0.35 / 5px。
       基准值出处：components/nav.css 的 .nav-glass（background 0.35、filter blur 5px，
       即 2026-10-15 iOS 26 液态玻璃改造后的定档值）；--rail-glass 的 RGB 与
       --nav-glass 本来就是同值（浅 251,251,253 / 深 34,34,34），所以对齐后两处
       玻璃面彻底同源，只剩圆角与尺寸不同。
       ⚠️ 两边是各自写死的字面量（没抽公共令牌），导航那边再改数值时这里必须同步。 */
    background: rgba(var(--rail-glass), 0.35);
    -webkit-backdrop-filter: saturate(180%) blur(5px);   /* 与 .nav-glass 同参数 */
    backdrop-filter: saturate(180%) blur(5px);
    /* 兜底描边：不支持 mask 挖空的环境下仍有均匀亮边（同 .nav-glass 降级策略） */
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px rgba(0, 0, 0, 0.04),
        0 8px 28px rgba(0, 0, 0, 0.10);
    color: var(--rail-fg);
    transition:
        background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1),
        color 0.24s cubic-bezier(0.28, 0.11, 0.32, 1);
}

/* 收起后把面板设为不可见（延迟到动画结束）：滑出视口的目录链接
   仍在 DOM 里，不隐藏的话 Tab 键会把焦点送进看不见的链接 */
.wp-rail[data-state="closed"] .wp-rail-panel {
    visibility: hidden;
    transition:
        background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1),
        color 0.24s cubic-bezier(0.28, 0.11, 0.32, 1),
        visibility 0s linear 0.42s;
}

/* 液态玻璃·折射边缘（同 .nav-glass::before 的 1px 渐变环做法：
   伪元素铺满 + padding 1px + 双 mask 挖空，只留边缘一环） */
.wp-rail-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.40) 0%,
        rgba(255, 255, 255, 0.12) 35%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(0, 0, 0, 0.16) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    /* z-index 0：折射环必须垫在内容下面（导航那套玻璃层是 z-index:-1 的子元素，
       这里的伪元素如果压在上面，会把顶部文字的一层白纱盖出来） */
    z-index: 0;
}

/* 液态玻璃·顶部高光弧（已删除，2026-10-20 用户要求「左栏内的白色渐变删掉」）
   ── 墓碑：原规则是
        .wp-rail-panel::after {
            content:""; position:absolute; inset:0;
            border-radius:inherit;
            background: radial-gradient(
                ellipse 90% 55% at 50% -12%,
                rgba(255,255,255,.20) 0%,
                rgba(255,255,255,.05) 55%,
                transparent 78%);
            pointer-events:none; z-index:0;
        }
   ── 为什么删：它是椭圆径向白渐变，铺满整个面板、只染上半部，
      在浅色模式下叠在 58% 白玻璃之上，视觉上就是面板里"从顶部一路白下来"
      的那条白色渐变（用户截图指的正是它）。删掉后顶部高光消失，面板底色
      由玻璃本身 + 1px 折射环决定，整块均匀。
   ── 不要顺手删 ::before：那一条是 1px 的折射边缘环（双 mask 挖空，
      只留边缘），负责面板边界定义，不是面状渐变。
   ── 想恢复"湿玻璃"光泽：把上面墓碑里的规则原样放回即可（无需其他配套改动）。 */

/* ---------- 目录区 ---------- */

.wp-rail-toc {
    /* flex:1 + min-height:0 = 目录长时可滚动，点赞区永远锁在底部 */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 10px 6px;
    /* 抬到玻璃伪元素之上（.wp-rail-panel::before/::after 是 z-index:0 的装饰层） */
    position: relative;
    z-index: 1;
}

.wp-rail-head {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 6px 8px;
}

.wp-rail-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--rail-fg);
}

.wp-rail-count {
    font-size: 11px;
    color: var(--rail-fg-2);
}

.wp-rail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;             /* 滚到尽头不把整页带着滚 */
    padding: 0 2px 2px;
    /* 细滚动条：不抢视觉，深浅色自动跟随文字色 */
    scrollbar-width: thin;
    scrollbar-color: var(--rail-fg-2) transparent;
}
.wp-rail-body::-webkit-scrollbar { width: 6px; }
.wp-rail-body::-webkit-scrollbar-thumb {
    background: var(--rail-fg-2);              /* 自带 0.6 透明度，不再叠 opacity */
    border-radius: 3px;
}
.wp-rail-body::-webkit-scrollbar-track { background: transparent; }

/* 单页作品（没有目录树）的预留位：弱化灰字，撑住与多页作品一致的版面 */
.wp-rail-empty {
    padding: 10px 6px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--rail-fg-2);
}

/* ---------- 目录树：在栏内的深浅色适配（结构样式仍在 work_detail_toc.css） ---------- */

.wp-rail .wp-toc-link {
    color: var(--rail-fg);
    font-size: 12.5px;
    padding: 5px 7px;
}
.wp-rail .wp-toc-link:hover {
    background: var(--rail-hover);
}
.wp-rail .wp-toc-row { min-height: 30px; }
.wp-rail .wp-toc-sub { border-left-color: var(--rail-line); }

/* 折叠箭头：原规则用 var(--color-text-sub)（永远深灰），深色玻璃上看不见，
   这里只换描边色，几何（5×5、旋转角）一字不动 */
.wp-rail .wp-toc-caret::before {
    border-right-color: var(--rail-fg-2);
    border-bottom-color: var(--rail-fg-2);
}

/* 当前页：蓝色胶囊高亮；深色底上换成更亮的蓝，保证对比度 */
.wp-rail .wp-toc-item.is-current > .wp-toc-row > .wp-toc-link {
    background: rgba(0, 113, 227, 0.14);
    color: var(--rail-accent);
    font-weight: 600;
}
.wp-rail.is-dark .wp-toc-item.is-current > .wp-toc-row > .wp-toc-link {
    background: rgba(41, 151, 255, 0.20);
}

/* ---------- 点赞区（按钮本体样式在 work_like.css） ---------- */

.wp-rail-like {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 0.5px solid var(--rail-line);
    position: relative;
    z-index: 1;                                /* 同 .wp-rail-toc：压在玻璃装饰层之上 */
}

/* 深色玻璃上的点赞 chip：白色 0.55 的底在深底上会发灰，改成极淡白提亮 */
.wp-rail.is-dark .work-like-btn { background: rgba(255, 255, 255, 0.10); }
.wp-rail.is-dark .work-like-btn:hover { background: rgba(255, 255, 255, 0.16); }

/* 深色玻璃上的红心：浅色态的 #e0245e 在深底上偏闷，换成更亮的红 */
.wp-rail.is-dark .work-like-btn.is-liked { color: #ff5b78; }

/* ---------- 收起/展开标签：24×64 iOS 26 液态玻璃细条 ---------- */

.wp-rail-tab {
    position: absolute;
    left: 100%;                               /* 贴面板右缘探出 */
    top: 50%;
    transform: translateY(-50%);              /* 垂直居中 */
    width: var(--rail-tab-w);
    height: var(--rail-tab-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* 只有右侧两角是圆的：左边与面板贴合，观感是"从面板边缘长出来的一条" */
    border-radius: 0 12px 12px 0;
    border: 0.5px solid rgba(255, 255, 255, 0.26);
    border-left: none;
    /* 2026-10-20 用户指定：与胶囊导航（.nav-glass）对齐——原 0.34 / blur 10px
       改为 0.35 / blur 5px，与上面 .wp-rail-panel 同参数（一条悬浮栏内外不分家） */
    background: rgba(var(--rail-glass), 0.35);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset -1px 0 1px rgba(255, 255, 255, 0.10),
        2px 4px 14px rgba(0, 0, 0, 0.08);
    color: var(--rail-fg-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1),
        color 0.18s ease;
}

/* 标签的折射边缘：与面板同一套挖空环，圆角跟随（右下/右上两角） */
.wp-rail-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.10) 40%,
        rgba(0, 0, 0, 0.14) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* 竖向细条的高光：横向渐变改成"顶部亮、向下渐隐"的竖条高光 */
.wp-rail-tab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.20) 0%,
        transparent 58%
    );
    pointer-events: none;
}

.wp-rail-tab:hover { color: var(--rail-fg); }
.wp-rail-tab:focus-visible {
    outline: 2px solid var(--rail-accent);
    outline-offset: 2px;
}

/* 图标：Lucide panel-left-close / panel-left-open（ISC 许可），
   两态同几何（同一个 18×18 方框 + x=9 竖线），只有箭头方向相反 */
.wp-rail-tab-icon {
    position: relative;
    z-index: 1;                                /* 压在 ::before/::after 之上 */
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 展开态显示"收起"图标（箭头朝面板内），收起态显示"展开"图标（箭头朝外） */
.wp-rail[data-state="open"] .wp-rail-tab-open { display: none; }
.wp-rail[data-state="closed"] .wp-rail-tab-close { display: none; }

/* ---------- 窄屏遮罩（点外部收起） ---------- */

.wp-rail-scrim {
    display: none;
}

/* 只在窄屏生效的一层：≥769px 用户是"用桌面方式"看目录，
   点外部收起反而会误伤（点正文就把目录关掉了） */
@media (max-width: 768px) {
    .wp-rail-scrim.is-on {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 62;                           /* 低于浮栏(66)，高于正文 */
        background: rgba(0, 0, 0, 0.12);
    }
}

/* ---------- 窄屏形态（≤768px） ---------- */

@media (max-width: 768px) {
    .wp-rail {
        /* 78vw 兜底：超窄屏（320px）上也不会占满整屏，露出的边缘提示"可点外部收起" */
        --rail-w: min(240px, 78vw);
        --rail-gap: 12px;
        --rail-tab-w: 26px;                    /* 触控面加成：24 偏窄 */
        --rail-tab-h: 60px;
        /* 窄屏只收紧上下呼吸间距；高度仍由上面的 top + height 公式算出（同样是半屏） */
        --rail-vgap: 12px;
    }
    .wp-rail-panel { border-radius: 14px; }
    .wp-rail-tab { border-radius: 0 11px 11px 0; }
}

/* ---------- 尊重系统"减少动态效果" ---------- */

@media (prefers-reduced-motion: reduce) {
    .wp-rail { transition: none; }
    .wp-rail-panel,
    .wp-rail-tab { transition: background 0.2s ease, color 0.2s ease; }
}