/* =========================================================
   切换动画：正文 tabs 分栏动画（补充 51）/ 单双栏切换动画（补充 52）/ 滚动条配色。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   补充 50：右侧目录「按标题折叠」—— 修主题展开规则的"子树全开"
   ------------------------------------------------------------------
   主题（Butterfly 5.7）本来就带折叠模式：`toc.expand: false` 时
   `#card-toc .toc-content:not(.is-expand) .toc-child { display: none }`，
   JS 给「当前标题的祖先 li」加 `.active`，再靠
   `.toc-item.active .toc-child { display: block }` 展开。
   但这条是**后代选择器**：只要 active 链上有一个靠根的 item（测试页全文一个大 H1 必中），
   
   → 这里反过来：**把"非 active 项的下一级"重新按住**（`:not(.active) > .toc-child`）。
     净效果 = 只有 active 链上每一层的**直隶下一级**露出来（读到哪层展开哪层的二级），
     非 active 分支的更深层一律收起。特异性比主题那条高一档，不用 !important。
   
     「全文只有一个大 H1」的页面里二级（h3）会被当孙级藏掉，
     换成 `:not(.active)` 反向命中才正确。
   ========================================================= */
#aside-content #card-toc .toc-content:not(.is-expand) .toc-item:not(.active) > .toc-child {
    display: none;
}

/* =========================================================
   补充 51：正文「分栏 tabs」切换动画（交叉淡化 + 容器高度补间）
   ------------------------------------------------------------------
   结构：.tabs > .nav-tabs > button.tab(.active)
              > .tab-contents > .tab-item-content(.active)
   主题的切栏是「旧栏瞬间 display:none + 新栏从 opacity:0 淡入」，缺了退场，
   中间会出现空白窗口，观感就是硬切。
   - 不再用 display 切栏：非活动栏 absolute + opacity:0 + visibility:hidden，
     活动栏回到文档流；淡出 0.3s、淡入 0.45s（缩短两栏文字的重叠窗口）。
   - visibility 写进 transition：转 visible 立即生效、转 hidden 在结束时生效。
   - 容器高度无法用 CSS 过渡，由 /js/tabs-anim.js 在点击时补间（两边都是 450ms）。
   ========================================================= */
#article-container .tabs > .tab-contents {
    /* 给绝对定位的非活动栏做参照 */
    position: relative;
}

#article-container .tabs > .tab-contents > .tab-item-content {
    /* 替掉主题的 display:none —— 必须 display:block 才能参与淡出 */
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    /*  transition 取"变到哪个状态"的那条规则：
       这里是**淡出**方向（→ 非活动），故意比淡入快（0.3s < 0.45s），
       好让"两栏文字重叠"的窗口短一点，不至于看着发糊。 */
    transition: opacity 0.3s cubic-bezier(0.33, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.33, 0, 0.2, 1),
                visibility 0.3s;
}

#article-container .tabs > .tab-contents > .tab-item-content.active {
    /* 活动栏回到文档流：由它决定容器高度 */
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* 淡入方向：稍慢一点、看得清 */
    transition: opacity 0.45s cubic-bezier(0.33, 0, 0.2, 1),
                transform 0.45s cubic-bezier(0.33, 0, 0.2, 1);
    /* 关掉主题的 keyframes 动画（tabshow），这里统一交给 transition */
    animation: none;
}

/* 切换按钮补一点"按下"的手感（主题那条 `.tab` 已有 transition: all .4s） */
#article-container .tabs > .nav-tabs > .tab:active {
    transform: translateY(1px);
}

/* =========================================================
   
   ------------------------------------------------------------------
   机制：右下角浮动按钮 `#hide-aside-btn` → 主题给 <html> 加/去 `hide-aside` 类
        （见主题 source/js/main.js 的 'hide-aside-btn' 分支：`$htmlDom.toggle('hide-aside')`）。
   主题原来的处理（source/css/_layout/aside.styl:397-405）：
        html.hide-aside .layout { justify-content: center }
        html.hide-aside .layout > .aside-content { display: none }   ← **瞬隐**，就是"硬切"的根
        html.hide-aside .layout > div:first-child { width: 80% }
   → 这里把 `display:none` 盖成「宽度收缩到 0 + 淡出」，用 transition 平滑过渡；
     内容区宽度 74%↔80% 由主题自带的 `transition: all .3s` 负责，会跟着缓动。
    收起后要 `visibility:hidden`（并写进 transition）→ 过渡结束时才真正隐藏，
      否则"看不见了还占着鼠标点击"。展开时 visibility 会立刻恢复可见。
   ========================================================= */
#aside-content {
    transition: opacity 0.35s cubic-bezier(0.33, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.33, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.33, 0, 0.2, 1),
                visibility 0.35s;
}

html.hide-aside .layout > .aside-content {
    display: block !important;   /* 关键：盖掉主题的 display:none，改成宽度收缩 */
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/*  关键补充：主题在 hide-aside 时把 `.layout` 的 justify-content 翻成 center，
   但 justify-content **不是可动画属性** —— 一翻，正文的左边缘就**瞬间右跳 ~144px**
   
   改成：一直 flex-start，用 **margin-left 居中**（margin 可过渡，
   正文元素自带 `transition: all .3s`，所以 0 → 10% 会平滑移动）。 */
html.hide-aside .layout {
    justify-content: flex-start !important;
}
html.hide-aside .layout > div:first-child {
    width: 80% !important;         /* 与主题一致的窄阅读栏 */
    margin-left: 10% !important;   /* 左右各留 10%，代替 justify-content:center 的居中 */
}

/* 页面右侧滚动条：灰色细条，悬停时变粗（transparent 边框在 hover 时归零实现） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #c0c4cc;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    border-width: 0;
    background-color: #9aa0ab;
}
html {
    scrollbar-color: #c0c4cc transparent;
}