/* ==========================================================================
   VPNDX — deepdoc.css
   深度指南页（故障排查大全）专属样式。
   仅定义本页新增的排版构件；组件级样式一律复用 base.css / components.css。
   ========================================================================== */

/* ---------------------------------------------------------- page head */
.doc-head{
  padding-top:56px;
  padding-bottom:40px;
}
.doc-head h1{
  font-size:clamp(40px, 4vw, 56px);
  margin-bottom:20px;
}
.doc-head .lede{max-width:40em;margin-bottom:24px}
.doc-head .fact-row{margin-top:4px}

/* ------------------------------------------------------- document body */
.doc{position:relative}

.doc-sec{
  position:relative;
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow-soft);
  padding-top:32px;
  padding-bottom:32px;
  padding-left:32px;
  padding-right:32px;
  margin-bottom:20px;
  min-width:0;
}
.doc-sec::before{
  content:"";
  position:absolute;
  top:0;
  left:32px;
  width:72px;
  height:3px;
  border-radius:0 0 2px 2px;
  background:linear-gradient(90deg, var(--blue), var(--accent));
}
.doc-sec h2{
  margin:0 0 18px;
  padding-right:52px;
}
.doc-sec h3{
  display:block;
  margin:30px 0 12px;
  font-size:18px;
}
.doc-sec h3::before{
  content:"";
  display:inline-block;
  width:3px;
  height:15px;
  margin-right:10px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--blue), var(--accent));
  vertical-align:-2px;
}
.doc-sec h2 + h3{margin-top:6px}
.doc-sec p{
  font-size:16px;
  line-height:1.75;
  max-width:66em;
}
.doc-sec .table-scroll{margin:4px 0 20px}
.doc-sec .callout{margin:22px 0 6px}
.doc-sec .cmd{margin:4px 0 20px}

.doc-no{
  position:absolute;
  top:30px;
  right:32px;
  font:700 13px/1 var(--font-mono);
  letter-spacing:.18em;
  color:color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ----------------------------------------------------- numbered steps */
.sym-steps{
  counter-reset:step;
  display:grid;
  gap:12px;
  margin:0 0 20px;
  max-width:66em;
}
.sym-steps > li{
  counter-increment:step;
  position:relative;
  padding-left:44px;
  font-size:15px;
  line-height:1.72;
}
.sym-steps > li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:0;
  top:1px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
  background:var(--candy-blue);
  color:var(--accent-dark);
  font:600 12px/1 var(--font-mono);
  letter-spacing:.04em;
}
.sym-steps strong{color:var(--text);font-weight:600}

/* --------------------------------------------------------- bullet list */
.sym-list{
  display:grid;
  gap:10px;
  margin:0 0 20px;
  max-width:66em;
}
.sym-list > li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.72;
}
.sym-list > li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--accent);
}
.sym-list strong{color:var(--text);font-weight:600}

/* --------------------------------------------------------- code block */
.cmd{
  background:var(--terminal);
  color:var(--terminal-text);
  border-radius:var(--r);
  padding:16px 18px;
  font:500 13px/1.85 var(--font-mono);
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-deep);
}
.cmd code{
  font-size:inherit;
  color:inherit;
  overflow-wrap:normal;
  word-break:normal;
  white-space:pre;
}

/* ------------------------------------------------------ related block */
.related{
  margin-top:48px;
}
.related .sec-title{margin-bottom:8px}
.related .sec-lede{margin-bottom:24px}
.related .post-card p{margin-bottom:0}

/* -------------------------------------------------------- responsive */
@media (max-width:768px){
  .doc-head{padding-top:40px;padding-bottom:28px}
  .doc-head h1{font-size:clamp(28px, 7.4vw, 40px)}
  .doc-sec{
    padding-top:22px;
    padding-bottom:22px;
    padding-left:18px;
    padding-right:18px;
  }
  .doc-sec::before{left:18px}
  .doc-sec h2{padding-right:0}
  .doc-no{display:none}
  .sym-steps > li{padding-left:38px}
}