/* ==========================================================================
   VPNWI · deepdoc.css
   深度指南页(handbook.html)专属样式:文档头、正文列宽、编号清单、
   误区块、表格脚注。颜色 / 圆角 / 字体一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---------- 文档列宽 ---------- */
.doc-shell{width:100%;max-width:920px;margin:0 auto;min-width:0;}

.doc-head{min-width:0;}
.doc-head .sec-kicker{margin-bottom:10px;}
.doc-head h1 .no-break{
  background-image:linear-gradient(180deg,transparent 64%,var(--tint-accent-2) 64%,var(--tint-accent-2) 95%,transparent 95%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

.doc-lead{
  margin-top:16px;
  max-width:800px;
  font-size:16.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.doc-lead strong{color:var(--text);font-weight:600;}
.doc-lead a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

.doc-meta{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.doc-meta .chip{height:26px;}

/* ---------- 长文正文 ---------- */
.doc-article{min-width:0;}
.doc-article h2{padding-top:10px;}
.doc-article .table-scroll{margin:0 0 18px;}
.doc-article .callout{margin:0 0 18px;}
.doc-article .topo-band{margin:6px 0 26px;}

.tbl-note{
  margin:-8px 0 18px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  color:var(--text-faint);
}

/* ---------- 编号清单 ---------- */
.check-list{
  counter-reset:checkitem;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.check-list li{
  position:relative;
  display:block;
  padding:14px 16px 14px 60px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--r-m);
  box-shadow:var(--shadow-1);
  font-size:14.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.check-list li::before{
  counter-increment:checkitem;
  content:counter(checkitem,decimal-leading-zero);
  position:absolute;
  left:16px;
  top:14px;
  padding:5px 8px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1;
  color:var(--accent);
  background:var(--tint-accent);
  border:1px solid var(--accent-ring);
}
.check-list li strong{color:var(--text);font-weight:600;}

/* ---------- 误区块 ---------- */
.myth-list{display:flex;flex-direction:column;gap:10px;margin:0 0 18px;}
.myth-item{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  background:var(--bg-subtle);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--warn);
  border-radius:var(--r-m);
}
.myth-label{
  padding-top:3px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--warn);
  white-space:nowrap;
}
.myth-text{font-size:14.5px;line-height:1.75;color:var(--text-muted);}
.myth-text strong{color:var(--text);font-weight:600;}

/* ---------- 结语条 ---------- */
.doc-takeaway{
  margin:0 0 18px;
  padding:18px 20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
  font-size:15px;
  line-height:1.8;
  color:var(--text);
}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .doc-lead{font-size:15.5px;}
  .doc-meta{gap:6px;}
  .myth-item{grid-template-columns:1fr;gap:6px;}
  .myth-label{padding-top:0;}
  .check-list li{padding:12px 14px 12px 58px;font-size:14px;}
  .check-list li::before{left:14px;top:12px;}
  .doc-takeaway{padding:16px;}
}