/* ============================================================
   VPNTea · deepdoc.css
   排查手册专属布局：文档封面、症状索引、诊断流程与参数表
   ============================================================ */

.doc-hero{
  padding-top:clamp(54px,7vw,88px);
  padding-bottom:clamp(42px,6vw,72px);
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.doc-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:clamp(32px,6vw,84px);
  align-items:end;
}
.doc-hero-grid>*{min-width:0}
.doc-hero h1{
  max-width:760px;
  font-size:clamp(42px,5vw,68px);
  line-height:1.1;
}
.doc-hero h1 em{font-style:normal;color:var(--accent)}
.doc-lead{
  margin-top:22px;
  max-width:760px;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.9;
}
.doc-lead strong{color:var(--ink)}
.doc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.doc-facts{
  display:grid;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 2px);
  overflow:hidden;
}
.doc-fact{
  display:grid;
  grid-template-columns:minmax(96px,.7fr) minmax(0,1.3fr);
  gap:18px;
  align-items:center;
  background:var(--bg-panel);
  padding:15px 17px;
}
.doc-fact dt{
  font-family:var(--font-mono);
  color:var(--accent-dark);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.doc-fact dd{
  color:var(--ink);
  font-size:13.5px;
  font-weight:600;
}

.doc-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
}
.doc-intro{
  max-width:900px;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.9;
}
.doc-intro p+p{margin-top:14px}
.doc-intro a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.doc-toc-wrap{
  position:relative;
  min-width:0;
}
.doc-article{
  max-width:980px;
  margin-inline:auto;
  min-width:0;
}
.doc-section{
  padding-top:clamp(58px,7vw,88px);
  padding-bottom:clamp(58px,7vw,88px);
  border-bottom:1px solid var(--border);
}
.doc-section:last-child{border-bottom:0}
.doc-section-head{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:22px;
  align-items:start;
  margin-bottom:28px;
}
.doc-section-head>*{min-width:0}
.doc-chapter{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border:1px solid var(--accent);
  border-radius:var(--r);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}
.doc-section h2{
  font-size:clamp(27px,3vw,39px);
  margin-bottom:10px;
}
.doc-section-head p{
  max-width:760px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}
.doc-copy{
  max-width:860px;
  margin-left:auto;
}
.doc-copy h3{
  margin-top:34px;
  margin-bottom:12px;
  font-size:20px;
}
.doc-copy h3:first-child{margin-top:0}
.doc-copy p{
  margin-bottom:17px;
  color:var(--ink);
  font-size:15.5px;
  line-height:1.95;
}
.doc-copy a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.doc-copy a.btn-main{
  color:var(--bg);
  text-decoration:none;
}
.doc-copy ul:not(.check-list),
.doc-copy ol:not(.step-list){
  margin:0 0 20px 24px;
}
.doc-copy ul:not(.check-list){list-style:disc}
.doc-copy ol:not(.step-list){list-style:decimal}
.doc-copy li{
  margin-bottom:9px;
  line-height:1.85;
}
.doc-copy .step-list{
  margin-top:24px;
  margin-bottom:28px;
}
.doc-copy .step-list p{margin-bottom:0}
.doc-copy .callout p{
  margin-bottom:0;
  font-size:14px;
  line-height:1.85;
}
.doc-copy pre{margin:22px 0}
.doc-copy .table-slide{margin:24px 0}
.doc-copy .line-table td{
  white-space:normal;
  vertical-align:top;
  line-height:1.7;
}
.doc-copy .line-table th{white-space:nowrap}

.flow-box{
  margin:24px 0;
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 2px);
  background:var(--bg-panel);
  overflow:hidden;
}
.flow-title{
  padding:13px 17px;
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono);
  color:var(--accent-dark);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
}
.flow-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.flow-step{
  position:relative;
  min-width:0;
  padding:18px;
  border-right:1px solid var(--border);
}
.flow-step:last-child{border-right:0}
.flow-step b{
  display:block;
  margin-bottom:7px;
  font-size:14px;
}
.flow-step p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.75;
}
.flow-step::after{
  content:"→";
  position:absolute;
  right:-8px;
  top:50%;
  z-index:2;
  width:16px;
  background:var(--bg-panel);
  color:var(--accent-dark);
  text-align:center;
  transform:translateY(-50%);
}
.flow-step:last-child::after{display:none}

.symptom-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}
.symptom-card{
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--bg);
  padding:18px;
}
.symptom-card b{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
}
.symptom-card p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.75;
}
.symptom-card .mono{
  display:block;
  margin-bottom:7px;
  color:var(--accent-dark);
  font-size:11.5px;
  letter-spacing:.08em;
}

.ticket-panel{
  margin-top:30px;
  border:1px solid var(--accent);
  border-radius:calc(var(--r) + 2px);
  background:var(--bg-panel);
  padding:26px;
}
.ticket-panel h3{margin-top:0}
.ticket-panel p{color:var(--muted)}
.ticket-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

@media (max-width:900px){
  .doc-hero-grid{grid-template-columns:1fr}
  .doc-facts{max-width:620px}
  .doc-section-head{grid-template-columns:58px minmax(0,1fr)}
  .doc-chapter{width:46px;height:46px}
}

@media (max-width:720px){
  .flow-steps{grid-template-columns:1fr}
  .flow-step{
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .flow-step:last-child{border-bottom:0}
  .flow-step::after{
    content:"↓";
    right:auto;
    left:22px;
    top:auto;
    bottom:-9px;
    transform:none;
  }
  .symptom-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .doc-hero h1{font-size:clamp(32px,9vw,40px)}
  .doc-fact{grid-template-columns:1fr;gap:4px}
  .doc-section-head{grid-template-columns:1fr;gap:14px}
  .doc-copy{margin-left:0}
  .ticket-panel{padding:21px 18px}
}