/* ============================================================
   产品中心 / 产品手册（第 160 轮）
   ------------------------------------------------------------
   为什么单独一个文件：
     手册页是**内容页**，它的排版规则（正文标题层级、表格、代码、图片）
     与全站组件层（admin.css）职责不同；混进 admin.css 会让 4000 行再涨。
     但**变量**仍然只用 theme.css 那套（--text / --muted / --border / --accent），
     所以明暗色自动跟随，不新增任何色值。

   🔴 字号只用五档：24 / 16 / 14 / 12（+ 30 仅统计数字，本文件不用）。
      闸门 `audit-font-ladder.py` 会扫本文件。
   🔴 圆角只用 0 / 6 / 10 / 999（`--admin-r-*`）；贴边裁字的容器一律 0。
   🔴 正文排版**唯一来源** = `.doc-prose`：所有型号手册都套这一个类，
      字体/字号/颜色/行高全站一致（发哥：「所有产品手册的内容、文字字体字号颜色都是统一的」）。
   ============================================================ */

/* ---------------- ① 二级菜单行（顶栏内部第二行） ---------------- */
.hub-subnav {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.hub-subnav-inner {
    /* 🔴 第 165 轮：这一行改由内部的 `.doc-subnav-grid` 排版（与正文三栏同网格），
       外层只保留高度，不再做 flex / 横向滚动。 */
    height: 40px;
}

.hub-subnav-inner::-webkit-scrollbar { display: none; }

.hub-subnav-list {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.hub-subnav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color .15s ease;
}

.hub-subnav-link:hover { color: var(--text); }

.hub-subnav-link.is-active {
    color: var(--accent);
    font-weight: 600;
}

/* 激活项底部 2px 品牌线：与顶栏一级菜单的"当前项加粗"是同一套语义 */
.hub-subnav-link.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--accent);
}

/* ---------------- ①·补 二级菜单行 = 型号选择器 + 板块按钮（第 165 轮定稿） ----------------
   发哥：
     「产品系列 + 产品型号两个下拉，加起来不超过侧边栏宽度」
     「产品手册、软件下载这些按钮和系列/型号同一行，但垂直位置跟内容页的内容对齐」
     「下拉框要自己写 CSS，做成跟网站同风格」

   一行用**与正文三栏完全相同的网格**（260 / 1fr / 220）：
     列1 = 两个下拉各 half；列2 = 板块按钮，padding-left 用与 `.doc-main` 同一公式 → 对齐正文；
     列3 = 空占位。
   ------------------------------------------------------------ */
.doc-subnav-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 220px;
    align-items: center;
    height: 40px;
}

.doc-subnav-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.doc-subnav-picker .doc-select-top {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* 自定义下拉（不是系统原生外观）：去箭头 → 自绘箭头 + 统一圆角/边框/悬停 */
.doc-select-top {
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--admin-r-sm, 6px);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2366707F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 6px;
    color: var(--text);
    font-size: 12px;
    line-height: 26px;
    text-overflow: ellipsis;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.doc-select-top:hover {
    border-color: var(--accent);
    background-color: var(--bg);
}

.doc-select-top:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* 暗色主题：箭头换成浅灰（data URI 里的颜色不跟 CSS 变量走，只能单独覆盖） */
html.dark .doc-select-top {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 列2：板块按钮。padding-left 与 `.doc-main` 完全同一公式 → 水平对齐正文左边缘 */
.doc-subnav-menus {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding-left: max(32px, calc((100% - 920px) / 2));
}

.doc-menutab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: color .15s ease;
}

.doc-menutab:hover { color: var(--text); }

.doc-menutab.is-active {
    color: var(--accent);
    font-weight: 600;
}

.doc-menutab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: var(--accent);
}



/* ---------------- ② 产品中心首页 ---------------- */
.doc-hero {
    padding: 8px 0 4px;
}

.doc-hero h1 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--text);
}

.doc-hero p {
    margin: 8px 0 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted);
}

/* 二级菜单介绍卡：与 DeepSeek 文档首页那种"入口卡"同构 */
.doc-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.doc-entry {
    display: block;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--admin-r-sm, 6px);
    background: var(--surface);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.doc-entry:hover {
    border-color: var(--accent);
}

.doc-entry-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text);
}

.doc-entry-desc {
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted);
}

/* 型号索引：系列名 + 一行链接（不是卡片，发哥要的是"产品中心首页"） */
.doc-index-group {
    margin-top: 28px;
}

.doc-index-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text);
}

.doc-index-count {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--muted);
}

.doc-index-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.doc-index-links a {
    font-size: 14px;
    line-height: 22px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.doc-index-links a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---------------- ③ 三栏版面（左 型号+目录 / 中 正文 / 右 本页目录） ---------------- */
.doc-layout {
    display: grid;
    /* 🔴 第 164 轮：三栏之间**不留空隙**（gap 0）——
       发哥要「内容栏和右边栏纯白色」，留 32px 缝隙会露出页面底色，
       看起来像两张白纸分开。改用 1px 分隔线（左栏右边框 / 右栏左边框）。 */
    grid-template-columns: 260px minmax(0, 1fr) 220px;
    gap: 0;
    align-items: start;
}

/* 左右两栏吸顶：偏移量用 JS 量出来的真实顶栏高度（含二级菜单行） */
.doc-side,
.doc-toc {
    position: sticky;
    top: calc(var(--hub-head-h, 104px) + 16px);
    max-height: calc(100vh - var(--hub-head-h, 104px) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 🔴 第 164 轮（发哥第 3 条）：
   「侧边栏要浅灰色，内容栏和右边栏要纯白色」
   → 左栏用页面底色（--bg = #F8F9FA），中/右栏用卡片白（--surface = #FFFFFF）。
     侧栏 min-height 撑满可视区，浅灰色块才不会被内容高度截断成"半截"。 */
.doc-side {
    background: var(--bg);
    padding: 16px 14px;
    min-height: calc(100vh - var(--hub-head-h, 104px) - 40px);
    border-right: 1px solid var(--border);
}

.doc-toc {
    background: var(--surface);
    padding-left: 16px;
    border-left: 1px solid var(--border);
    /* 右栏白底同样撑满可视区（目录通常比正文短，不撑就会留一半灰底） */
    min-height: calc(100vh - var(--hub-head-h, 104px) - 40px);
}

/* ---------------- ④ 左栏：系列 / 型号 两个下拉 + 目录 ---------------- */
.doc-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.doc-picker label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-picker-label {
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
}

.doc-select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--admin-r-sm, 6px);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
}

.doc-select:focus {
    outline: none;
    border-color: var(--accent);
}

.doc-chapters {
    margin-top: 14px;
}

.doc-side-title {
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
    letter-spacing: .04em;
}

/* 左栏引导（产品中心首页「怎么找资料」） */
.doc-side-steps {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 24px;
}

/* 左栏当前型号（软件下载页的补充信息） */
.doc-side-model {
    margin-top: 6px;
    color: var(--text);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.doc-chapter-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--border);
}

.doc-chapter-link {
    display: block;
    padding: 4px 0 4px 10px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 22px;
    color: var(--text);
    text-decoration: none;
}

.doc-chapter-link:hover {
    color: var(--accent);
    border-left-color: var(--accent);
}

.doc-chapter-link.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.doc-chapter-sub {
    margin: 2px 0 6px;
    padding: 0 0 0 10px;
    list-style: none;
}

.doc-chapter-sub a {
    display: block;
    padding: 2px 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
    text-decoration: none;
}

.doc-chapter-sub a:hover { color: var(--accent); }

/* ---------------- ⑤ 中栏：正文 ---------------- */
/* 🔴 第 164 轮：白底铺满**整列**（不是只铺正文宽度）。
   阅读宽度用「自适应左右 padding」实现：
     列宽 > 920 → padding = (列宽-920)/2，正文正好 920 且居中；
     列宽 < 920 → padding = 32，正文随列宽收缩。
   好处：不用在三个视图里各套一层 inner，白底天然是整栏白。 */
.doc-main {
    min-width: 0;
    background: var(--surface);
    padding-top: 24px;
    padding-bottom: 40px;
    padding-left: max(32px, calc((100% - 920px) / 2));
    padding-right: max(32px, calc((100% - 920px) / 2));

    /* 🔴 内容短（比如首页只有两个入口卡）时，白底也要撑到屏幕底部 ——
       否则会变成"半张白纸"，下面露出页面底色，看起来像布局没铺满。 */
    min-height: calc(100vh - var(--hub-head-h, 104px) - 40px);
}

.doc-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
}

.doc-crumb a {
    color: var(--muted);
    text-decoration: none;
}

.doc-crumb a:hover { color: var(--accent); }

.doc-title {
    margin: 8px 0 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--text);
}

.doc-meta {
    margin-top: 6px;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
}

/* 积木块：块与块之间靠留白分层，不画框（画框会让长手册像一堆卡片） */
.doc-block + .doc-block {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.doc-block-title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text);
    scroll-margin-top: calc(var(--hub-head-h, 104px) + 16px);
}

.doc-block-img {
    margin-top: 12px;
    max-width: 100%;
    height: auto;
    border-radius: var(--admin-r-sm, 6px);
}

/* ---------------- ⑥ 正文排版唯一来源：.doc-prose ---------------- */
.doc-prose {
    font-size: 14px;
    line-height: 1.85;
    color: var(--text);
    word-break: break-word;
}

.doc-prose > :first-child { margin-top: 0; }
.doc-prose > :last-child { margin-bottom: 0; }

.doc-prose p { margin: 12px 0; font-size: 14px; }

.doc-prose h2 {
    margin: 28px 0 10px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text);
    scroll-margin-top: calc(var(--hub-head-h, 104px) + 16px);
}

.doc-prose h3,
.doc-prose h4 {
    margin: 20px 0 8px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text);
    scroll-margin-top: calc(var(--hub-head-h, 104px) + 16px);
}

.doc-prose ul,
.doc-prose ol {
    margin: 12px 0;
    padding-left: 22px;
}

.doc-prose ul { list-style: disc; }
.doc-prose ol { list-style: decimal; }
.doc-prose li { margin: 4px 0; font-size: 14px; }
.doc-prose li > ul,
.doc-prose li > ol { margin: 4px 0; }

.doc-prose a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--admin-accent-soft, rgba(226, 35, 26, .28));
}

.doc-prose a:hover { border-bottom-color: var(--accent); }

.doc-prose strong { font-weight: 600; }

.doc-prose code {
    padding: 1px 5px;
    border-radius: var(--admin-r-xs, 5px);
    background: var(--bg);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
}

.doc-prose pre {
    margin: 12px 0;
    padding: 12px;
    overflow-x: auto;                 /* 代码块可以横滚，不是文字裁切 */
    border: 1px solid var(--border);
    border-radius: var(--admin-r-sm, 6px);
    background: var(--bg);
}

.doc-prose pre code {
    padding: 0;
    background: none;
    font-size: 12px;
    line-height: 1.7;
}

.doc-prose blockquote {
    margin: 12px 0;
    padding: 6px 12px;
    border-left: 3px solid var(--accent);
    background: var(--bg);
    color: var(--muted);
    font-size: 14px;
}

.doc-prose table {
    width: 100%;
    margin: 14px 0;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 18px;
}

.doc-prose th,
.doc-prose td {
    padding: 6px 10px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.doc-prose th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text);
}

.doc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--admin-r-sm, 6px);
}

.doc-prose hr {
    margin: 24px 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* ---------------- ⑦ 右栏：本页目录 ---------------- */
.doc-toc-list {
    margin: 8px 0 0;
    padding: 0 0 0 10px;
    list-style: none;
    border-left: 1px solid var(--border);
}

.doc-toc-list a {
    display: block;
    padding: 2px 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
    text-decoration: none;
}

.doc-toc-list a:hover { color: var(--accent); }

.doc-toc-list a[data-toc-active] {
    color: var(--accent);
    font-weight: 600;
}

.doc-toc-sub { padding-left: 10px; }

/* ---------------- ⑧ 空态 ---------------- */
.doc-empty {
    padding: 40px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--admin-r-sm, 6px);
    text-align: center;
    background: var(--surface);
}

.doc-empty-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text);
}

.doc-empty-desc {
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted);
}

/* ---------------- ⑨ 手机 / 窄屏（发哥：只考虑电脑和手机） ---------------- */
@media (max-width: 1279px) {
    /* 中等宽度先收掉右栏「本页目录」：正文优先，目录只是辅助 */
    .doc-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .doc-toc { display: none; }
}

@media (max-width: 767px) {
    /* 手机上三栏全部竖排：型号选择 → 目录 → 正文 */
    .doc-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .doc-side {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .doc-picker {
        flex-direction: row;
    }

    .doc-picker label { flex: 1 1 0; min-width: 0; }

    /* 🔴 下拉默认按内容撑宽（选中的型号名很长）→ 会顶出屏幕右边缘。
       手机上必须把宽度钉死在容器里，长文本由浏览器自己省略。 */
    .doc-select { width: 100%; min-width: 0; max-width: 100%; }

    .doc-hero h1 { font-size: 24px; }

    .doc-entry-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 积木块作为跳转目标时的预留高度（与标题/二级菜单吸顶同一口径） */
.doc-block {
    scroll-margin-top: calc(var(--hub-head-h, 104px) + 16px);
}

/* ---------------- ⑩ 两栏版面（软件下载页 / 产品中心首页：无「本页目录」） ---------------- */
.doc-layout-2 {
    grid-template-columns: 260px minmax(0, 1fr);
}

/* 资源行：一行一个，不画卡片（与手册正文同样的视觉重量） */
.doc-srow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.doc-srow:first-child { border-top: 1px solid var(--border); }

.doc-srow-title {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text);
}

.doc-srow-meta {
    margin-top: 2px;
    font-size: 12px;
    line-height: 18px;
    color: var(--muted);
}

@media (max-width: 767px) {
    .doc-layout-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   手机端最终覆盖（第 160 轮 · 必须放在文件最后）
   ------------------------------------------------------------
   🔴 为什么再写一遍：`.doc-layout-2` 定义在文件靠后 + 同特异性，
      会把前面媒体查询里的「1 列」覆盖掉（软件下载页会退化成两栏）。
   🔴 `.doc-side` / `.doc-main` 补 `min-width: 0`：grid 子项默认
      `min-width: auto`，里面的 `<select>` 一旦内容长就撑破整列 ——
      实测 390px 下型号下拉被顶出屏幕右边缘，就是这条缺的。
   ============================================================ */
@media (max-width: 767px) {
    .doc-layout,
    .doc-layout-2 { grid-template-columns: minmax(0, 1fr); }

    .doc-side,
    .doc-main { min-width: 0; max-width: 100%; }

    /* 手机是单列：左右栏的分隔线/整屏高度都不要（会撑出滚动条） */
    .doc-side { border-right: 0; border-bottom: 1px solid var(--border); min-height: auto; }
    .doc-main { padding: 16px; min-height: auto; }

    .doc-picker { flex-wrap: wrap; }
    .doc-picker label { flex: 1 1 calc(50% - var(--sp-1)); min-width: 0; }

    .doc-select { width: 100%; min-width: 0; max-width: 100%; }

    /* 🔴 表格**不**做 fixed 布局：手机上让它保持自然宽度、由 .doc-table-wrap 横滚。
       fixed + width:100% 会把两列压到 180px 左右，规格值全变成碎行（实测更难读）。 */
}

/* 表格滚动容器（第 160 轮）：手机上让表格自己横滚，页面不横滚 */
.doc-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior: contain;
}

/* ---------------- ⑪ 手机：二级菜单行改单列（第 165 轮） ----------------
   390px 下 260px 的选择器列放不下，改成「上：两个下拉占满 / 下：板块按钮」两行。 */
@media (max-width: 767px) {
    .hub-subnav-inner { height: auto; }

    .doc-subnav-grid {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        padding: 8px 0;
        gap: 6px;
    }

    .doc-subnav-picker { width: 100%; }
    .doc-subnav-picker .doc-select-top { flex: 1 1 0; }
    .doc-subnav-menus { padding-left: 0; overflow-x: auto; }
    .doc-menutab { height: 34px; }
}