/* ==========================================================================
   VPNHF · 深度指南页（怎么选）专属样式
   只服务 manual.html：刊头 / 正文栏宽 / 自查清单 / 结语卡 / 相关页面
   颜色、字体、圆角、投影一律引用 base.css 的 :root 令牌
   ========================================================================== */

/* --------------------------------------------------------------------------
   刊头
   -------------------------------------------------------------------------- */

.doc-head{
  position:relative;
  padding-top:52px;
  padding-bottom:6px;
}

.doc-head-inner{
  max-width:720px;
  margin-inline:auto;
  min-width:0;
}

.doc-title{
  margin:16px 0 0;
  font-size:clamp(30px, 3.9vw, 44px);
  line-height:1.14;
  letter-spacing:-.025em;
}

.doc-lead{
  margin:16px 0 0;
  font-size:16.5px;
  line-height:1.76;
  color:var(--text-muted);
}

.doc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}

.doc-meta li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  overflow:hidden;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}

.doc-meta .meta-key{
  color:var(--accent-dark);
  font-weight:700;
}

/* --------------------------------------------------------------------------
   正文栏
   -------------------------------------------------------------------------- */

.doc-body{
  padding-top:22px;
  padding-bottom:30px;
}

.doc-prose{
  max-width:720px;
  margin-inline:auto;
  font-size:16px;
  line-height:1.86;
}

.doc-prose .toc-tabs{
  margin-top:4px;
}

.prose .table-scroll{
  margin:18px 0 24px;
}

.prose .data-table caption{
  padding-bottom:10px;
}

.doc-note{
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   自查清单（覆盖 .prose ul 的默认样式）
   -------------------------------------------------------------------------- */

.prose .doc-checklist{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:20px 0 24px;
  padding:0;
  list-style:none;
}

.prose .doc-checklist li{
  position:relative;
  min-width:0;
  margin:0;
  padding:12px 14px 12px 44px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  font-size:14.5px;
  line-height:1.72;
  color:var(--text);
}

.prose .doc-checklist li::before{
  content:"✓";
  position:absolute;
  top:12px;
  left:13px;
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border-radius:var(--radius-xs);
  background:var(--accent-08);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

/* --------------------------------------------------------------------------
   结语卡（沿用 .card--grad 的渐变面）
   -------------------------------------------------------------------------- */

.prose .doc-conclusion{
  margin:26px 0 0;
  padding:24px 22px;
}

.prose .doc-conclusion h3{
  margin:0 0 8px;
  font-size:19px;
  line-height:1.36;
  color:var(--bg-top);
}

.prose .doc-conclusion p{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--on-ink-78);
}

/* --------------------------------------------------------------------------
   相关页面
   -------------------------------------------------------------------------- */

.doc-next{
  margin:36px 0 0;
  padding-top:22px;
  border-top:1px dashed var(--border);
}

.doc-next h3{
  margin:0 0 6px;
  font-size:17px;
}

.doc-next p{
  margin:0;
  font-size:13.5px;
  color:var(--text-muted);
}

.prose .doc-next-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.prose .doc-next-list li{
  margin:0;
  min-width:0;
}

.prose .doc-next-list a{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  color:var(--text);
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:border-color .16s ease, color .16s ease;
}

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

.doc-next-note{
  display:block;
  font-size:12px;
  font-weight:400;
  line-height:1.6;
  color:var(--text-muted);
}

.prose .doc-next-list .is-wide{
  grid-column:1 / -1;
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width:900px){
  .doc-head{padding-top:34px;}
  .doc-head-inner{max-width:100%;}
  .doc-prose{
    max-width:100%;
    font-size:15.5px;
    line-height:1.82;
  }
}

@media (max-width:640px){
  .doc-title{font-size:28px;}
  .doc-lead{font-size:15.5px;}
  .doc-meta li{font-size:10.5px;padding:4px 9px;}
  .prose .doc-checklist li{
    padding:11px 12px 11px 40px;
    font-size:14px;
  }
  .prose .doc-checklist li::before{
    top:11px;
    left:11px;
  }
  .prose .doc-next-list{grid-template-columns:minmax(0,1fr);}
  .prose .doc-conclusion{padding:20px 18px;}
}