/* ==========================================================================
   文档中心专有区块样式
   --------------------------------------------------------------------------
   加载顺序：header.html 的 common/pages.css → 页面模板里的 static/css/news.css
             → 本文件（排在 news.css 后面，靠源序复用它的卡片/分页规则）

   为什么沿用 news.css 的骨架：
     www 本身没有独立的「文档中心」页，它的 help/helpcate/helpcontent 四个
     文件都是三五行 include，指向 default/news/*；
     而 v10 的侧栏（public/news-side.html）里「新闻动态 / 文档中心 / 官网公告」
     本来就是并列三栏。所以文档中心直接复用 .et-main 外壳，
     面包屑 / 搜索卡 / 分类栏 / 列表 / 分页全部继承 news.css，视觉上同源。

   本文件只补 www 没有的三块：
     ① .doc-grid / .doc-card —— 文档中心首页的分类卡栅格
     ② .doc-nav             —— 文章页左侧的文档目录树
     ③ .doc-empty           —— 轻量空态

   卡片配色沿用 www 的「面板卡」配方（见 news.css .newsPage_left_list）：
     底色 linear-gradient(1turn,#fff,#f7f9fd) + 2px 白描边 + 8/8/20 淡蓝投影，
   在 --banner_background(#f3f7ff) 的页面上比纯白卡更有层次。
   ========================================================================== */


/* ---------------------------------------------------------------
   0. 顶部基线：文档中心与文章页留一样的空白
   ---------------------------------------------------------------
   www 的 .et-main（列表骨架）比 .articleContent 多让 20px（40 vs 20）。
   文档中心是「面包屑 + 搜索卡 + 分类栅格」的复合页，走的是列表骨架，
   顶部就比文章页多空一条 —— 用户对着文章页截图说「这里也空白太多」。
   这里把它按到文章页的 20px 上：导航下方 20px 就是面包屑 / 右栏卡片顶。

   ★ 必须限定 min-width：手机端（≤768）的收口写在 news-blocks.css 里，
     而本文件加载更晚，不限定宽度会把手机端的 -168px 按回去。 */
@media screen and (min-width: 769px) {
  .et-main {
    margin-top: calc(-1 * (var(--banner_height) - var(--navheight) - 20px));
  }
}


/* ---------------------------------------------------------------
   1. 分类卡栅格（help.html / help-view.html）
   --------------------------------------------------------------- */
.doc-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.et-main .doc-card {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  border: 2px solid #fff;
  border-radius: 2px;
  background: linear-gradient(1turn, #fff, #f7f9fd);
  box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.et-main .doc-card:hover {
  box-shadow: 8px 8px 24px rgba(55, 99, 170, 0.2);
  transform: translateY(-2px);
}

/* 卡头：图标 + 分类名 + 篇数 */
.et-main .doc-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e9eef3;
}

.et-main .doc-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navright_block);
  color: var(--Original);
  font-size: 20px;
}

.et-main .doc-card__name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--txtcl);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.et-main .doc-card__count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--txtdesc);
  font-family: "codeB";
}

/* 卡身：最多 6 条文档 */
.et-main .doc-card__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 6px 0 0;
}

.et-main .doc-card__list .doc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 0;
  border-bottom: 1px dashed #e9eef3;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--txtdesc);
  transition: color 0.3s ease;
}

.et-main .doc-card__list .doc-link:last-child {
  border-bottom: none;
}

.et-main .doc-card__list .doc-link .doc-link__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 悬停才出现的小箭头，避免静态时右侧太吵 */
.et-main .doc-card__list .doc-link .doc-link__go {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--Original);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.et-main .doc-card__list .doc-link:hover {
  color: var(--Original);
}

.et-main .doc-card__list .doc-link:hover .doc-link__go {
  opacity: 1;
  transform: translateX(0);
}

/* 卡脚：查看全部 */
.et-main .doc-card__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--txtdesc);
  transition: color 0.3s ease;
}

.et-main .doc-card__more:hover {
  color: var(--Original);
}

.et-main .doc-card__more i {
  font-size: 13px;
}


/* ---------------------------------------------------------------
   2. 文档目录树（help-details.html 左侧）
   ---------------------------------------------------------------
   放在 .et-right 里（.main-row 默认 flex-direction:row-reverse，
   DOM 顺序 [et-left, et-right] 渲染成 [目录在左, 正文在右]，
   与 www 的 KeepToTheleft 相反 —— 这正是文档页想要的排布）。 */
.et-main .doc-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
  padding: 20px;
  gap: 16px;
}

.et-main .doc-nav .doc-nav__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--txtcl);
}

.et-main .doc-nav .doc-nav__head .develop {
  width: 18px;
  height: 18px;
  font-size: 16px;
  color: var(--Original);
}

/* 目录搜索（本地过滤，不跳页） */
.et-main .doc-nav .doc-nav__search {
  position: relative;
  width: 100%;
}

.et-main .doc-nav .doc-nav__search input {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 10px;
  border: 1px solid #e1e6f0;
  border-radius: 2px;
  outline: none;
  font-size: 13px;
  color: var(--txtcl);
  background: #fff;
  transition: border-color 0.3s ease;
}

.et-main .doc-nav .doc-nav__search input::placeholder {
  color: #b4bdd0;
}

.et-main .doc-nav .doc-nav__search input:focus {
  border-color: var(--Original);
}

.et-main .doc-nav .doc-nav__search .develop {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  font-size: 15px;
  color: #b4bdd0;
  pointer-events: none;
}

.et-main .doc-nav .doc-nav__body {
  width: 100%;
  max-height: 620px;
  overflow-y: auto;
}

.et-main .doc-nav .doc-nav__group + .doc-nav__group {
  margin-top: 6px;
}

.et-main .doc-nav .doc-nav__group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--txtcl);
  transition: background 0.3s ease, color 0.3s ease;
}

.et-main .doc-nav .doc-nav__group-head:hover {
  background: var(--navright_block);
  color: var(--Original);
}

.et-main .doc-nav .doc-nav__group-head .develop {
  width: 16px;
  height: 16px;
  font-size: 13px;
  color: var(--txtdesc);
  transition: transform 0.3s ease;
}

.et-main .doc-nav .doc-nav__group.is-open .doc-nav__group-head .develop {
  transform: rotate(180deg);
}

.et-main .doc-nav .doc-nav__group-head .doc-nav__group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.et-main .doc-nav .doc-nav__group-head .doc-nav__group-num {
  font-size: 12px;
  font-weight: 400;
  color: var(--txtdesc);
  font-family: "codeB";
}

/* 折叠：默认只展开当前分类，其余收起（由 JS 加 is-open） */
.et-main .doc-nav .doc-nav__group-list {
  display: none;
  flex-direction: column;
  padding: 2px 0 6px;
}

.et-main .doc-nav .doc-nav__group.is-open .doc-nav__group-list {
  display: flex;
}

.et-main .doc-nav .doc-nav__item {
  position: relative;
  display: block;
  padding: 8px 8px 8px 16px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--txtdesc);
  transition: background 0.3s ease, color 0.3s ease;
}

.et-main .doc-nav .doc-nav__item:hover {
  background: var(--navright_block);
  color: var(--Original);
}

.et-main .doc-nav .doc-nav__item.is-active {
  background: var(--navright_block);
  color: var(--Original);
  font-weight: 500;
}

.et-main .doc-nav .doc-nav__item.is-active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--gradient1);
}


/* ---------------------------------------------------------------
   3. 本页导读（help-details.html 正文上方）
   ---------------------------------------------------------------
   由正文的 h2/h3 自动生成，不足 2 条时 JS 不显示整块。
   www 有类似的 .guide-box（内页通用区块），这里按文档页压缩一档。 */
.et-main .doc-toc {
  width: 100%;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 2px;
  background: var(--navright_block);
  border-left: 3px solid var(--Original);
}

.et-main .doc-toc .doc-toc__head {
  font-size: 13px;
  font-weight: 600;
  color: var(--txtcl);
  margin-bottom: 6px;
}

.et-main .doc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: doctoc;
}

/* 层级编号：h2 走主序号（1. 2. 3.），h3 走 "主序号.子序号"（1.1 1.2）。
   关键点是 h3 只递增子计数器、不再递增主计数器，
   所以 tocsub 要用 .doc-toc__lv2 而不是 li 去 reset —— 否则每个 h3 都会重置成 1。 */
.et-main .doc-toc li {
  counter-increment: doctoc;
  font-size: 13px;
  line-height: 1.9;
}

.et-main .doc-toc li.doc-toc__lv2 {
  counter-reset: doctocsub;
}

.et-main .doc-toc li.doc-toc__lv3 {
  counter-increment: doctocsub;
  padding-left: 18px;
}

.et-main .doc-toc li a {
  color: var(--txtdesc);
  transition: color 0.3s ease;
}

.et-main .doc-toc li a:hover {
  color: var(--Original);
}

.et-main .doc-toc li a::before {
  content: counter(doctoc) ". ";
  color: var(--Original);
  font-weight: 500;
}

.et-main .doc-toc li.doc-toc__lv3 a::before {
  content: counter(doctoc) "." counter(doctocsub) " ";
}


/* ---------------------------------------------------------------
   4. 轻量空态
   ---------------------------------------------------------------
   www 的 .nullValue 是给「整页找不到」用的（40px 行高 + 主体色），
   分类为空 / 搜索无结果只需要一行灰字。 */
.et-main .doc-empty {
  width: 100%;
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--txtdesc);
}

.et-main .doc-empty .develop {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  font-size: 36px;
  color: #d5dced;
}


/* ---------------------------------------------------------------
   5. 搜索结果项（help-result.html）
   ---------------------------------------------------------------
   www 的 newssearch 版式：结果总数提示 + 复用 .news-list 的 .news-item。
   这里只补「来源」那行小字与高亮命中词。 */
.et-main .doc-result-tip {
  width: 100%;
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--txtdesc);
}

.et-main .doc-result-tip b {
  font-weight: 500;
  color: var(--Original);
}

.et-main .doc-result-from {
  font-size: 12px;
  font-weight: 400;
  color: var(--txtdesc);
  font-family: "codeB";
}

.et-main .doc-hit {
  color: var(--Original);
  font-weight: 600;
}


/* ---------------------------------------------------------------
   6. 移动端兜底
   --------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  .doc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .et-main .doc-card {
    padding: 18px 16px;
  }

  .et-main .doc-nav {
    padding: 14px;
  }

  .et-main .doc-nav .doc-nav__body {
    max-height: none;
  }
}