/* ==========================================================================
   VPNDT · deepdoc.css
   深度指南页（reference.html 故障排查）专属样式：
   页头面板 / 诊断条 / 四层模型 / 章节分隔 / 代码块
   仅补充 components.css 未覆盖的组件，不重复定义既有样式。
   ========================================================================== */

/* ---------- 页头面板 ---------- */
.doc-head{
  position:relative;overflow:hidden;min-width:0;
  background:linear-gradient(180deg,var(--accent-05),var(--bg-panel) 62%);
  border:1px solid var(--border);border-radius:var(--r-panel);
  box-shadow:var(--shadow-panel);
  padding:30px;
}
.doc-head h1{font-size:clamp(28px,3.8vw,44px);margin:10px 0 12px;max-width:26ch}
.doc-head p{color:var(--muted);font-size:15px;max-width:72ch}
.doc-head p + p{margin-top:10px}
.doc-head__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.doc-head__links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:13.5px}

/* ---------- 正文骨架 ---------- */
.doc-body{min-width:0}
.doc-sec{padding-top:34px;padding-bottom:30px;border-top:1px dashed var(--border);min-width:0}
.doc-sec:first-of-type{border-top:0;padding-top:8px}
.doc-sec h2{margin-bottom:4px}
.doc-sec pre{
  background:var(--bg-panel2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:14px 16px;font-size:12.5px;line-height:1.75;color:var(--text);
  overflow-x:auto;max-width:100%;
}
.doc-rule{width:100%;height:10px;margin:10px 0 4px}
.doc-rule path{fill:none;stroke:var(--border);stroke-width:2}

/* ---------- 诊断条（每章开头的三格速览） ---------- */
.dx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 4px}
.dx__cell{
  background:var(--bg-panel2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:12px 14px;min-width:0;
}
.dx__k{
  display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.dx__cell p{font-size:13.5px;color:var(--text);margin:0}

/* ---------- 四层模型 ---------- */
.layer-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 6px}
.layer{
  position:relative;background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:14px;min-width:0;
}
.layer:not(:last-child)::after{
  content:"";position:absolute;right:-14px;top:50%;width:14px;height:2px;background:var(--border);
}
.layer__no{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.06em}
.layer__t{display:block;font-size:14px;margin:6px 0 4px}
.layer p{font-size:12.5px;color:var(--muted);margin:0}

/* ---------- 页尾小注 ---------- */
.doc-foot{
  margin-top:28px;padding-top:16px;border-top:1px dashed var(--border);
  font-size:13px;color:var(--muted);
}

/* ---------- 响应 ---------- */
@media (max-width:900px){
  .layer-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layer:not(:last-child)::after{display:none}
}
@media (max-width:768px){
  .doc-head{padding:22px}
  .dx{grid-template-columns:1fr}
}
@media (max-width:640px){
  .layer-map{grid-template-columns:1fr}
}