/* 天枢 IDC · 文档中心（帮助中心）样式
   ---------------------------------------------------------------
   独立一份（跟 user.css 同样思路 ✓）：只服务 /help 与 /help/{slug}，
   不动那份全站共用的 app.css ✗。

   列表页：顶部大搜索 → 文档卡片网格 + 侧栏（公告 / 求助）
   详情页：三栏 = 左「全部文档」+ 中正文 + 右「本文目录」（左右都 sticky ✓）
   窄屏：三栏塌成一栏 ✓，左侧文档导航变成一行横滑胶囊 ✓，目录隐藏 ✓ */

/* ==================== ① 列表页：顶部搜索 ==================== */
.doc-hero {
    background: linear-gradient(135deg, #f3f9fe 0%, #e6f0fb 100%);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 30px 26px 26px;
    text-align: center;
}

.doc-hero h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: .5px; }
.doc-hero p { color: var(--c-text-dim); font-size: 13.5px; margin: 0 0 18px; }

.doc-search { position: relative; max-width: 620px; margin: 0 auto; display: flex; gap: 8px; }
.doc-search .di {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #98a2b3; font-size: 17px; pointer-events: none;
}
.doc-search input {
    flex: 1; min-width: 0;
    padding: 13px 16px 13px 44px; font-size: 14.5px;
    border-radius: 999px; background: #fff; border: 1px solid var(--c-border);
    box-shadow: 0 4px 14px rgba(16, 28, 45, .06);
}
.doc-search .btn { border-radius: 999px; padding: 0 24px; flex: 0 0 auto; }

.doc-hot {
    margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; align-items: center;
    font-size: 12.5px; color: var(--c-text-dim);
}
.doc-hot a {
    color: var(--c-primary); background: #fff; border: 1px solid var(--c-border);
    border-radius: 999px; padding: 4px 12px; text-decoration: none;
    transition: border-color .14s ease, background .14s ease;
}
@media (hover: hover) { .doc-hot a:hover { border-color: var(--c-primary); background: var(--c-primary-light); } }

.doc-kw { margin: 18px 0 0; font-size: 13.5px; color: var(--c-text-mid); }

/* ==================== ② 列表页：卡片网格 ==================== */
.doc-list-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-top: 20px; }
.doc-list-main { flex: 1 1 600px; min-width: 0; }
.doc-list-side { flex: 0 1 300px; min-width: 0; display: grid; gap: 16px; }

.doc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }

.doc-card {
    display: block; background: var(--c-white);
    border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: 18px; color: inherit; text-decoration: none;
    transition: border-color .16s ease, box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) {
    .doc-card:hover { border-color: var(--c-primary); box-shadow: 0 8px 22px rgba(24, 95, 165, .10); transform: translateY(-2px); }
}
.doc-card-ico {
    width: 36px; height: 36px; border-radius: 10px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-primary-light); color: var(--c-primary); font-size: 18px;
}
.doc-card-t { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 7px; line-height: 1.5; }
.doc-card-s {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; color: var(--c-text-dim); line-height: 1.75; min-height: 45px;
}
.doc-card-f {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-border);
    font-size: 12px; color: var(--c-text-dim);
}

/* ==================== ③ 详情页：三栏骨架 ==================== */
.doc-layout {
    display: grid; gap: 22px; align-items: start;
    grid-template-columns: 216px minmax(0, 1fr) 200px;
}
.doc-layout.no-toc { grid-template-columns: 216px minmax(0, 1fr); }

.doc-side, .doc-toc { position: sticky; top: calc(var(--nav-h) + 16px); }

.doc-side-h, .doc-toc-h {
    font-size: 12px; font-weight: 600; letter-spacing: .6px;
    color: var(--c-text-dim); margin-bottom: 10px;
}
.doc-side-nav a {
    display: block; padding: 9px 12px; margin-bottom: 4px;
    border-left: 2px solid transparent; border-radius: 6px;
    font-size: 13.5px; color: var(--c-text-mid); text-decoration: none; line-height: 1.55;
    transition: background .14s ease, color .14s ease;
}
@media (hover: hover) { .doc-side-nav a:hover { background: var(--c-hover-bg); color: var(--c-primary); } }
.doc-side-nav a.on {
    background: var(--c-primary-light); color: var(--c-primary-dark);
    border-left-color: var(--c-primary); font-weight: 600;
}
.doc-side-cta {
    margin-top: 14px; padding: 12px 14px; line-height: 1.8;
    background: #f8fafc; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--c-text-dim);
}
.doc-side-cta a { color: var(--c-primary); font-weight: 600; }

/* 本文目录 */
.doc-toc nav a {
    display: block; padding: 4px 0 4px 10px; line-height: 1.6;
    border-left: 2px solid var(--c-border);
    font-size: 12.5px; color: var(--c-text-dim); text-decoration: none;
    transition: color .14s ease, border-color .14s ease;
}
.doc-toc nav a.lv3 { padding-left: 22px; font-size: 12px; }
@media (hover: hover) { .doc-toc nav a:hover { color: var(--c-primary); } }
.doc-toc nav a.cur { color: var(--c-primary); border-left-color: var(--c-primary); font-weight: 600; }

/* ==================== ④ 详情页：正文排版 ==================== */
.doc-head { padding-bottom: 16px; border-bottom: 1px solid var(--c-border); margin-bottom: 20px; }
.doc-head h1 { font-size: 23px; margin: 0 0 10px; line-height: 1.45; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--c-text-dim); }
.doc-meta i { margin-right: 4px; }

.doc-body { font-size: 14.5px; line-height: 1.95; color: var(--c-text); }
.doc-body > *:first-child { margin-top: 0; }
.doc-body h2 {
    font-size: 18px; margin: 30px 0 10px; padding-left: 12px; line-height: 1.5;
    border-left: 4px solid var(--c-primary);
}
.doc-body h3 { font-size: 16px; margin: 24px 0 8px; }
/* h3 前面点一根小色条：后台写出来的正文基本都用 h3（实测 3 篇里 2 篇 ✓），
   不给层次的话整篇看着是一坨 ✗ */
.doc-body h3::before {
    content: ''; display: inline-block;
    width: 3px; height: 13px; margin-right: 8px; vertical-align: -1px;
    background: var(--c-primary); border-radius: 2px;
}
.doc-body h2, .doc-body h3 { scroll-margin-top: calc(var(--nav-h) + 14px); }
.doc-body p { margin: 10px 0; }
.doc-body ul, .doc-body ol { padding-left: 22px; margin: 10px 0; }
.doc-body li { margin: 5px 0; }
.doc-body a { color: var(--c-primary); text-decoration: underline; }
.doc-body strong, .doc-body b { font-weight: 600; }
.doc-body code {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
    background: #f4f6f8; padding: 2px 6px; border-radius: 4px;
}
.doc-body pre {
    background: #1f2733; color: #e6edf3; padding: 14px 16px; border-radius: 10px;
    overflow-x: auto; font-size: 13px; line-height: 1.7; margin: 14px 0;
}
.doc-body pre code { background: transparent; color: inherit; padding: 0; }
.doc-body blockquote {
    margin: 14px 0; padding: 10px 16px;
    background: #f7fafd; border-left: 3px solid var(--c-primary); color: var(--c-text-mid);
}
.doc-body img { max-width: 100%; height: auto; border-radius: 8px; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
.doc-body th, .doc-body td { border: 1px solid var(--c-border); padding: 9px 12px; text-align: left; }
.doc-body th { background: var(--c-th-bg); font-weight: 600; }
.doc-body hr { border: 0; border-top: 1px dashed var(--c-border); margin: 22px 0; }

/* ==================== ⑤ 详情页：翻页 + 求助 ==================== */
.doc-pager { display: flex; gap: 12px; margin-top: 16px; }
.doc-pager a {
    flex: 1 1 0; min-width: 0; padding: 13px 16px;
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius);
    color: inherit; text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
@media (hover: hover) { .doc-pager a:hover { border-color: var(--c-primary); box-shadow: 0 6px 16px rgba(24, 95, 165, .08); } }
.doc-pager .lbl { display: block; font-size: 12px; color: var(--c-text-dim); margin-bottom: 4px; }
.doc-pager .ttl { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-pager .right { text-align: right; }
.doc-pager .gap { flex: 1 1 0; }

.doc-help {
    margin-top: 16px; padding: 16px 18px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(135deg, #f3f9fe, #eaf3fc);
    border: 1px solid var(--c-border); border-radius: var(--radius);
}
.doc-help .t { flex: 1 1 240px; min-width: 0; font-size: 13.5px; color: var(--c-text-mid); line-height: 1.8; }
.doc-help .t b { display: block; font-size: 15px; color: var(--c-text); margin-bottom: 3px; }

/* ==================== ⑥ 响应式 ==================== */
@media (max-width: 1080px) {
    .doc-layout, .doc-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
    .doc-side, .doc-toc { position: static; }
    /* 左导航在窄屏 = 一行横滑胶囊（跟客户区侧栏同一手法 ✓） */
    .doc-side-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .doc-side-nav::-webkit-scrollbar { display: none; }
    .doc-side-nav a {
        flex: 0 0 auto; white-space: nowrap; margin: 0; padding: 7px 14px;
        border: 1px solid var(--c-border); border-left-width: 1px;
        border-radius: 999px; background: var(--c-white);
    }
    .doc-side-nav a.on { border-color: var(--c-primary); }
    .doc-side-h, .doc-side-cta { display: none; }
    .doc-toc { display: none; }
}

@media (max-width: 560px) {
    .doc-hero { padding: 22px 16px 20px; border-radius: 12px; }
    .doc-hero h1 { font-size: 21px; }
    .doc-hero p { margin-bottom: 14px; }
    .doc-search { flex-direction: column; }
    .doc-search .di { top: 24px; }
    .doc-search .btn { width: 100%; padding: 12px 0; }
    .doc-card { padding: 15px; }
    .doc-head h1 { font-size: 20px; }
    .doc-pager { flex-direction: column; }
    .doc-pager .gap { display: none; }
    .doc-help .btn { width: 100%; text-align: center; }
}