/* ==========================================================================
   VPNAY — deepdoc.css
   深度指南页(manual.html / AI 访问指南)专属样式。
   仅补充 base.css 与 components.css 未覆盖的排版与页头节奏,
   颜色/圆角/字体一律引用 :root 令牌。
   ========================================================================== */

/* ---------- 页头 ---------- */
.doc-head{padding-top:56px;padding-bottom:8px}
.doc-h1{
  margin-top:14px;
  font-family:var(--font-display);
  font-size:clamp(32px,4.4vw,56px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.03em;
}
.doc-lead{margin-top:20px;max-width:46em}
.doc-facts{margin-top:26px}
.doc-head .cta-row{margin-top:28px}
.doc-intro{
  margin-top:24px;
  max-width:56em;
  font-size:14.5px;
  line-height:1.85;
  color:var(--muted);
}
.doc-intro a{
  color:var(--accent);
  font-weight:600;
  border-bottom:1px solid var(--accent-22);
}
.doc-intro a:hover{border-bottom-color:var(--accent)}
.doc-draw{
  margin-top:34px;
  width:100%;
  height:auto;
  color:var(--doodle);
}

/* ---------- 正文排版 ---------- */
.prose{padding-top:8px;padding-bottom:8px}
.prose > section{padding-top:8px}
.prose > section:first-of-type h2{margin-top:26px}
.prose h2{
  margin-top:58px;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.24;
}
.prose h3{
  margin-top:30px;
  font-size:17.5px;
  line-height:1.4;
}
.prose h4{margin-top:22px}
.prose p{
  margin-top:14px;
  font-size:15.5px;
  line-height:1.88;
  color:var(--ink);
}
.prose > section > p,
.prose > section > ul,
.prose > section > ol,
.prose > section > .callout,
.prose > section > blockquote{max-width:80ch}
.prose p a,
.prose li a{
  color:var(--accent);
  font-weight:600;
  border-bottom:1px solid var(--accent-22);
}
.prose p a:hover,
.prose li a:hover{border-bottom-color:var(--accent)}
.prose strong{font-weight:700}

/* 无序列表:彩色圆点 */
.prose ul{
  list-style:none;
  margin-top:14px;
  padding-left:0;
  display:grid;
  gap:9px;
}
.prose ul li{
  position:relative;
  padding-left:18px;
  font-size:15.5px;
  line-height:1.85;
  color:var(--ink);
}
.prose ul li::before{
  content:'';
  position:absolute;
  left:2px;
  top:.75em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-2);
}

/* 有序列表:等宽序号圆标 */
.prose ol{
  counter-reset:docstep;
  list-style:none;
  margin-top:14px;
  padding-left:0;
  display:grid;
  gap:11px;
}
.prose ol li{
  position:relative;
  counter-increment:docstep;
  padding-left:32px;
  font-size:15.5px;
  line-height:1.85;
  color:var(--ink);
  min-width:0;
}
.prose ol li::before{
  content:counter(docstep);
  position:absolute;
  left:0;
  top:.28em;
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border:1px solid var(--accent-22);
  border-radius:50%;
  background:var(--accent-08);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  color:var(--accent-2);
}

/* 表格与代码块的上边距 */
.prose .table-scroll{margin-top:22px}
.prose pre{margin-top:20px}
.prose .callout{margin-top:22px}
.prose blockquote{margin-top:20px}

/* 章末延伸阅读行 */
.doc-more{
  margin-top:26px;
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
}

/* 表格内标签垂直居中 */
.prose .data-table .tag{vertical-align:middle}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .doc-head{padding-top:44px}
}

@media (max-width:640px){
  .doc-h1{font-size:32px;letter-spacing:-.02em}
  .doc-lead{font-size:16px}
  .prose h2{margin-top:46px}
  .prose h3{margin-top:26px}
  .prose p,
  .prose ul li,
  .prose ol li{font-size:15px;line-height:1.85}
  .doc-draw{margin-top:26px}
}

@media (prefers-reduced-motion:reduce){
  .doc-intro a,
  .prose p a,
  .prose li a{transition:none}
}