/* ============================================================
   Clash客户端 · deepdoc.css
   深文档页（knowledge.html）专属样式：
   文档页头氛围 / 章节目录排列 / 正文锚点偏移
   ============================================================ */

/* ---------- 1. 文档页头 ---------- */
.doc-hero{
  position:relative;
  overflow-x:clip;
  padding-top:72px;
  padding-bottom:60px;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.doc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-halo);
  pointer-events:none;
}
.doc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grid-tex);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 78%);
  pointer-events:none;
}
.doc-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,336px);
  gap:48px;
  align-items:start;
}
.doc-hero-inner > *{min-width:0}
.doc-title{margin-top:16px;color:var(--text)}
.doc-lede{max-width:620px}
.doc-chips{margin-top:24px}

/* ---------- 2. 章节目录（复用 .toc 组件，只调整排列） ---------- */
.doc-toc{margin-top:0}
.doc-toc .toc-list{display:grid;grid-template-columns:1fr;gap:4px}
.doc-toc .toc-list a{width:100%;justify-content:flex-start}

/* ---------- 3. 正文 ---------- */
.doc-prose{margin-inline:auto}
.doc-prose h2{scroll-margin-top:92px}
.doc-prose h3{scroll-margin-top:92px}

/* ---------- 4. 响应式 ---------- */
@media (max-width:1024px){
  .doc-hero-inner{grid-template-columns:1fr;gap:30px}
  .doc-toc .toc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .doc-hero{padding-top:52px;padding-bottom:44px}
  .doc-prose h2,.doc-prose h3{scroll-margin-top:82px}
}
@media (max-width:560px){
  .doc-toc .toc-list{grid-template-columns:1fr}
  .doc-toc .toc-list a{white-space:normal;padding-block:9px;line-height:1.45}
}