/* ==========================================================================
   Clash Verge官网 · 协议手册（deepdoc）页面专属样式
   只补 base.css / components.css 未覆盖的部分：章节节奏、长文列宽、
   章节目录的当前项状态、深色面长文补丁。所有取值引用设计令牌。
   ========================================================================== */

/* ---------------------------------------------------- 1 章节节奏与列宽 */
/* .sec 只声明纵向 padding，这里按长文阅读收紧一档 */
.doc-sec {
  padding-top: 78px;
  padding-bottom: 78px;
}

.doc-hero {
  padding-top: 76px;
  padding-bottom: 60px;
}

.doc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.doc-body { max-width: 52em; }

.doc-body > * { min-width: 0; }

/* ------------------------------------- 2 章节目录：当前章节高亮（deepdoc.js） */
.toc-link.is-active {
  border-color: var(--accent-line);
  background: var(--accent-veil);
  color: var(--accent-ink);
}

/* --------------------------- 3 深色面长文补丁：base.css 的 .prose 只按米白面取值 */
.surf-dark .prose,
.surf-panel .prose { color: var(--text-muted); }

.surf-dark .prose h2,
.surf-dark .prose h3,
.surf-dark .prose h4,
.surf-panel .prose h2,
.surf-panel .prose h3,
.surf-panel .prose h4 { color: var(--text); }

.surf-dark .prose strong,
.surf-panel .prose strong { color: var(--text); }

.surf-dark .prose a,
.surf-panel .prose a {
  color: var(--accent);
  border-bottom-color: var(--accent-line);
}

.surf-dark .prose a:hover,
.surf-panel .prose a:hover { border-bottom-color: var(--accent); }

.surf-dark .prose code,
.surf-panel .prose code {
  border-color: var(--warm-line);
  background: var(--bg-panel);
  color: var(--text);
}

.surf-dark .prose li::marker,
.surf-panel .prose li::marker { color: var(--accent); }

.surf-dark .data-table caption,
.surf-panel .data-table caption { color: var(--text-muted); }

/* --------------------------------- 4 正文之外的站内链接（hero 简介、说明块） */
.doc-link {
  color: var(--accent-ink);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 1px;
  transition: border-color .18s ease;
}

.doc-link:hover { border-bottom-color: var(--accent-ink); }

.surf-dark .doc-link,
.surf-panel .doc-link {
  color: var(--accent);
  border-bottom-color: var(--accent-line);
}

.surf-dark .doc-link:hover,
.surf-panel .doc-link:hover { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------ 响应式 */
@media (max-width: 1000px) {
  .doc-sec {
    padding-top: 62px;
    padding-bottom: 62px;
  }
  .doc-hero {
    padding-top: 56px;
    padding-bottom: 48px;
  }
}

@media (max-width: 640px) {
  .doc-sec {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .doc-hero {
    padding-top: 44px;
    padding-bottom: 40px;
  }
  .doc-body { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-link { transition: none; }
}