/* ==========================================================================
   VPNOh — deepdoc.css
   深度指南页(排查手册 troubleshooting.html)专属样式:
   文档页头、元信息行、症状索引、正文内组件间距与内边距。
   全部取值引用 base.css 的 :root 设计令牌,不新增硬编码颜色。
   ========================================================================== */

/* --- 文档页头 ------------------------------------------------------------ */
.doc-hero{
  position:relative;
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.07) 0%,rgba(var(--accent-rgb),0) 100%);
  overflow-x:clip;
}
.doc-hero h1{margin-top:14px}
.doc-hero .sec-lede{max-width:68ch}

.doc-meta{
  display:flex;flex-wrap:wrap;
  gap:8px 22px;
  margin-top:var(--sp-5);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.01em;
  color:var(--text-muted);
}
.doc-meta li{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.doc-meta svg{width:13px;height:13px;flex:none;color:var(--accent)}

/* --- 症状索引(分诊台) --------------------------------------------------- */
.symptom-index{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:10px;
  margin-top:var(--sp-5);
  margin-bottom:var(--sp-6);
}
.symptom-index a{
  display:flex;flex-direction:column;gap:5px;
  min-width:0;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  box-shadow:var(--hl-edge);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.symptom-index a:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft);
}
.symptom-index .s-name{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--text);
}
.symptom-index .s-name::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:none;
}
.symptom-index .s-where{font-size:12.5px;line-height:1.6;color:var(--text-muted)}

/* --- 正文内组件间距与内边距 ---------------------------------------------- */
.prose pre{margin-top:var(--sp-3);margin-bottom:var(--sp-4)}
.prose .table-scroll{margin-top:var(--sp-4);margin-bottom:var(--sp-5)}
.prose .callout{margin-top:var(--sp-5);margin-bottom:var(--sp-5)}
.prose .callout p{margin-bottom:0}
.prose .callout p+p{margin-top:8px}
.prose .stat-band{margin-top:var(--sp-6);margin-bottom:var(--sp-6)}
.prose .promo-block{margin-top:var(--sp-7);margin-bottom:var(--sp-7)}
.prose .promo-block h3{margin-top:0;margin-bottom:0}
.prose .promo-block p{margin-bottom:0}

/* --- 窄屏 ---------------------------------------------------------------- */
@media (max-width:768px){
  .doc-hero{padding-top:var(--sp-6);padding-bottom:var(--sp-5)}
  .symptom-index{grid-template-columns:minmax(0,1fr);margin-top:var(--sp-4);margin-bottom:var(--sp-5)}
}