/**
 * 帮助教程三栏：左分类目录导航 | 中间正文 | 右页内标题导航
 * 仅由 post-detail-toc.ejs 在 isHelperDoc 时引入，避免与普通文章 TOC 全局规则打架。
 */

/*
 * matery / my.css 里 body 常用 overflow-x:hidden，会导致子元素 position:sticky 无法相对视口固定。
 * clip 可裁切横向溢出且不建立同类滚动包含块，侧栏导航可随正文滚动始终贴在视口内。
 */
html:has(main.post-container.helperdoc-page-shell),
body:has(main.post-container.helperdoc-page-shell) {
    overflow-x: clip;
}

main.post-container.helperdoc-page-shell {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.helperdoc-layout,
.helperdoc-body-anchor {
    overflow-x: visible;
    overflow-y: visible;
}

/* ── 帮助教程页：外层容器全宽，撑开让 anchor 居中 ── */
.helperdoc-page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 覆盖 matery 大屏 .post-container 的 margin-left:330px、width:80%，否则整块三栏偏右、缝看起来不对称 */
@media only screen and (min-width: 993px) {
    main.post-container.helperdoc-page-shell,
    main.post-container.content.helperdoc-page-shell {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.helperdoc-layout {
    position: relative;
    width: 100%;
    --helperdoc-nav-width: 292px;
    --helperdoc-outline-width: 196px;
    --helperdoc-center-max: 1080px;
    --helperdoc-side-gap: 36px;
    --helperdoc-sticky-top: 84px;
    --helperdoc-sticky-bottom-gap: 12px;
}

/*
 * 两翼 1fr + 中间主列（max）+ 翼栏：主列在视口中居中，左右目录挂在两侧（与 .helperdoc-hero-anchor 同轨）。
 * 缝 = 独立轨 --helperdoc-side-gap，左右对称。
 */
.helperdoc-body-anchor {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, var(--helperdoc-center-max))
        var(--helperdoc-side-gap)
        var(--helperdoc-outline-width)
        minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.helperdoc-layout #main-content {
    grid-column: 2;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    min-width: 0;
    float: none;
}

.helperdoc-layout #toc-aside {
    grid-column: 4;
}

.helperdoc-layout.helperdoc-has-left-nav .helperdoc-body-anchor {
    grid-template-columns:
        minmax(0, 1fr)
        var(--helperdoc-nav-width)
        var(--helperdoc-side-gap)
        minmax(0, var(--helperdoc-center-max))
        var(--helperdoc-side-gap)
        var(--helperdoc-outline-width)
        minmax(0, 1fr);
}

.helperdoc-layout.helperdoc-has-left-nav #toc-aside-2 {
    grid-column: 2;
}

.helperdoc-layout.helperdoc-has-left-nav #main-content {
    grid-column: 4;
}

.helperdoc-layout.helperdoc-has-left-nav #toc-aside {
    grid-column: 6;
}

/* ── 左右侧栏：挂在主列两侧，滚动时 sticky 贴在视口（宽屏）；内部列表再各自 overflow:auto ── */
@media only screen and (min-width: 1261px) {
    .helperdoc-layout #toc-aside-2,
    .helperdoc-layout #toc-aside {
        position: -webkit-sticky;
        position: sticky;
        top: var(--helperdoc-sticky-top);
        align-self: start;
        z-index: 6;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        float: none;
        max-height: calc(100vh - var(--helperdoc-sticky-top) - var(--helperdoc-sticky-bottom-gap));
        max-height: calc(100dvh - var(--helperdoc-sticky-top) - var(--helperdoc-sticky-bottom-gap));
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

@media only screen and (max-width: 1260px) {
    .helperdoc-layout #toc-aside-2,
    .helperdoc-layout #toc-aside {
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        float: none;
    }
}

/* 卡片填满侧栏高度，sticky 由外层 #toc-aside 承担 */
.helperdoc-layout .toc-widget {
    position: relative;
    top: auto;
    width: 100%;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.helperdoc-layout .toc-widget.card {
    overflow: visible;
}

.helperdoc-layout .toc-widget > .toc-title {
    flex-shrink: 0;
}

/* ── 左栏：分类文章目录 ── */
.helperdoc-layout .helperdoc-nav-widget {
    border-radius: 24px;
    border: 1px solid rgba(197, 214, 242, 0.9);
    box-shadow: 0 20px 48px rgba(30, 62, 123, 0.08) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

.helperdoc-layout .helperdoc-nav-widget .toc-title {
    color: var(--easybr-blue-900);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(197, 214, 242, 0.55);
    margin-bottom: 8px;
}

.helperdoc-layout .helperdoc-nav-widget .toc-title i {
    color: var(--easybr-blue-700);
    font-size: 0.95em;
}

.helperdoc-layout .helperdoc-nav-content ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.helperdoc-layout .helperdoc-nav-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 10px 10px;
}

.helperdoc-layout .helperdoc-nav-content::-webkit-scrollbar {
    width: 4px;
}

.helperdoc-layout .helperdoc-nav-content::-webkit-scrollbar-thumb {
    background: rgba(116, 151, 225, 0.35);
    border-radius: 4px;
}

/* ── 右栏：tocbot 页内大纲 ── */
.helperdoc-layout .helperdoc-outline-widget {
    border-radius: 20px;
    border: 1px solid rgba(211, 222, 241, 0.92);
    box-shadow: 0 14px 34px rgba(30, 62, 123, 0.05) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

.helperdoc-layout .helperdoc-outline-widget .toc-title {
    color: #183153;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(211, 222, 241, 0.72);
    margin-bottom: 0;
}

.helperdoc-layout .helperdoc-outline-widget .toc-title i {
    color: #5e7aac;
    font-size: 0.92em;
}

.helperdoc-layout #toc-aside .toc-widget,
.helperdoc-layout #toc-aside-2 .toc-widget {
    background: rgba(255, 255, 255, 0.96) !important;
}

.helperdoc-layout #toc-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 10px 10px;
}

.helperdoc-layout .helperdoc-outline-widget #toc-content {
    padding: 12px 14px 16px;
}

.helperdoc-layout #toc-content::-webkit-scrollbar {
    width: 4px;
}

.helperdoc-layout #toc-content::-webkit-scrollbar-thumb {
    background: rgba(116, 151, 225, 0.35);
    border-radius: 4px;
}

.helperdoc-layout #toc-content ol,
.helperdoc-layout #toc-content ol li {
    padding-left: 0;
}

.helperdoc-layout #toc-content .toc-link {
    display: block;
    padding: 8px 0 8px 14px;
    border-left: 2px solid transparent;
    color: #627697;
    font-size: 0.95rem;
    line-height: 1.6;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.helperdoc-layout #toc-content .toc-link:hover {
    color: var(--easybr-blue-800);
    font-weight: 600;
    text-decoration: none;
    transform: translateX(2px);
}

.helperdoc-layout #toc-content .toc-link::before {
    display: none;
}

.helperdoc-layout #toc-content .is-active-link {
    color: var(--easybr-blue-800);
    font-weight: 700;
    border-left-color: rgba(29, 102, 219, 0.38);
}

/* ── 左栏列表链接（与 EasyBR 主色一致） ── */
.helperdoc-layout .helperdoc-nav-content li + li {
    margin-top: 4px;
}

.helperdoc-layout .helperdoc-nav-content a,
.helperdoc-nav-drawer-body a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--easybr-muted);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.55;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.helperdoc-layout .helperdoc-nav-content a::before,
.helperdoc-nav-drawer-body a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(96, 115, 143, 0.35);
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.helperdoc-layout .helperdoc-nav-content a:hover,
.helperdoc-nav-drawer-body a:hover {
    color: var(--easybr-blue-800);
    background: rgba(29, 87, 210, 0.06);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.helperdoc-layout .helperdoc-nav-content a:hover::before,
.helperdoc-nav-drawer-body a:hover::before {
    background: var(--easybr-blue-500);
}

.helperdoc-layout .helperdoc-nav-content a.active-article,
.helperdoc-nav-drawer-body a.active-article {
    color: var(--easybr-blue-800);
    border-color: transparent;
    background: rgba(29, 87, 210, 0.08);
    box-shadow: none;
    font-weight: 700;
}

.helperdoc-layout .helperdoc-nav-content a.active-article::before,
.helperdoc-nav-drawer-body a.active-article::before {
    background: linear-gradient(135deg, var(--easybr-blue-700) 0%, var(--easybr-blue-500) 100%);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgba(29, 87, 210, 0.12);
}

/* ── FAB / 抽屉 / 遮罩 ── */
body.helperdoc-nav-open {
    overflow: hidden;
}

.helperdoc-nav-fab {
    position: fixed;
    left: calc(18px + env(safe-area-inset-left, 0px));
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1100;
    min-width: 96px;
    height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(196, 214, 243, 0.9);
    border-radius: 999px;
    color: #183153;
    cursor: pointer;
    touch-action: manipulation;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(12, 38, 89, 0.16);
    backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
}

.helperdoc-nav-open .helperdoc-nav-fab {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
}

.helperdoc-nav-fab i {
    color: #1d66db;
    font-size: 1rem;
    pointer-events: none;
}

.helperdoc-nav-fab span {
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0;
    pointer-events: none;
}

.helperdoc-nav-drawer {
    position: fixed;
    left: 16px;
    top: 88px;
    bottom: 16px;
    display: none;
    width: min(320px, calc(100vw - 32px));
    z-index: 1001;
    border-radius: 24px;
    border: 1px solid rgba(197, 214, 242, 0.9);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 60px rgba(12, 38, 89, 0.18);
    transform: translateX(-120%);
    transition: transform 0.22s ease;
    overflow: hidden;
}

.helperdoc-nav-open .helperdoc-nav-drawer {
    transform: translateX(0);
}

.helperdoc-nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(197, 214, 242, 0.9);
}

.helperdoc-nav-drawer-header button {
    border: none;
    background: transparent;
    color: #183153;
    font-size: 1.1rem;
    cursor: pointer;
}

.helperdoc-nav-drawer-body {
    height: calc(100% - 62px);
    overflow: auto;
    padding: 14px 18px 18px;
}

.helperdoc-nav-drawer-body ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.helperdoc-nav-drawer-body li + li {
    margin-top: 8px;
}

.helperdoc-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1000;
    background: rgba(5, 13, 25, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.helperdoc-nav-open .helperdoc-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ── 断点：左侧章节树先收（1500px），右侧 TOC 再收（1260px） ── */
@media only screen and (max-width: 1500px) {
    .helperdoc-body-anchor,
    .helperdoc-layout.helperdoc-has-left-nav .helperdoc-body-anchor {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, var(--helperdoc-center-max))
            var(--helperdoc-side-gap)
            var(--helperdoc-outline-width)
            minmax(0, 1fr);
    }

    .helperdoc-layout #toc-aside-2 {
        display: none !important;
    }

    .helperdoc-layout #main-content,
    .helperdoc-layout.helperdoc-has-left-nav #main-content {
        grid-column: 2;
    }

    .helperdoc-layout #toc-aside,
    .helperdoc-layout.helperdoc-has-left-nav #toc-aside {
        grid-column: 4;
    }

    .helperdoc-nav-fab {
        display: inline-flex !important;
    }

    .helperdoc-nav-drawer,
    .helperdoc-overlay {
        display: block !important;
    }
}

@media only screen and (max-width: 1260px) {
    .helperdoc-body-anchor,
    .helperdoc-layout.helperdoc-has-left-nav .helperdoc-body-anchor {
        grid-template-columns: minmax(0, 1fr);
    }

    .helperdoc-layout #main-content,
    .helperdoc-layout.helperdoc-has-left-nav #main-content {
        grid-column: 1;
    }

    .helperdoc-layout #toc-aside {
        display: none !important;
    }
}

@media only screen and (max-width: 992px) {
    .helperdoc-body-anchor {
        padding: 0 12px;
    }

    .helperdoc-nav-drawer {
        left: 12px;
        top: 78px;
        bottom: 12px;
        width: min(86vw, 360px);
    }
}

@media only screen and (max-width: 640px) {
    .helperdoc-nav-fab {
        left: calc(14px + env(safe-area-inset-left, 0px));
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        min-width: 88px;
        height: 46px;
        padding: 0 14px;
    }

    .helperdoc-nav-drawer {
        left: 10px;
        top: 74px;
        bottom: 10px;
        width: min(90vw, 340px);
        border-radius: 22px;
    }
}

@media only screen and (max-width: 768px) {
    .helperdoc-layout .helperdoc-nav-content a,
    .helperdoc-nav-drawer-body a {
        padding: 11px 12px;
        border-radius: 14px;
    }
}