/* ==========================================================================
   C6VPN · deepdoc.css
   问题诊断页专属样式:页头、症状索引、章节节奏、正文内组件微调
   颜色与圆角一律引用 base.css 的令牌,不新增任何字面量。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头
   -------------------------------------------------------------------------- */
.guide-head{
  position:relative;
  padding-block:var(--sp-7) var(--sp-5);
}
.guide-head h1{
  margin-top:var(--sp-2);
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.16;
  letter-spacing:-.025em;
  max-width:20em;
}
.guide-lead{
  margin-top:var(--sp-4);
  max-width:760px;
  font-size:15.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.guide-lead a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
.guide-head .fact-strip{margin-top:var(--sp-5)}

/* --------------------------------------------------------------------------
   2. 症状索引卡
   -------------------------------------------------------------------------- */
.symptom-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(206px,1fr));
  gap:12px;
  margin-block:var(--sp-4) var(--sp-6);
}
.symptom-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:16px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 var(--hl-1),var(--shadow-soft);
  transition:transform var(--dur) ease,box-shadow var(--dur) ease,border-color var(--dur) ease;
}
.symptom-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:inset 0 1px 0 var(--hl-1),var(--shadow-lift);
}
.symptom-k{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--accent-dark);
}
.symptom-t{
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  color:var(--text);
}
.symptom-d{
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   3. 章节节奏与编号
   -------------------------------------------------------------------------- */
.reading-wrap{
  display:block;
  min-width:0;
  max-width:100%;
  counter-reset:chap;
}
.chapter{
  counter-increment:chap;
  padding-block:var(--sp-6);
  border-top:1px solid var(--border);
}
.chapter:first-of-type{
  border-top:0;
  padding-top:var(--sp-5);
}
.chapter > h2:first-child{margin-top:0}
.chapter > h2::before{
  content:counter(chap,decimal-leading-zero);
  display:block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--accent-dark);
}

/* --------------------------------------------------------------------------
   4. 正文内组件微调(只作用于本页 .prose 作用域)
   -------------------------------------------------------------------------- */
.prose .steps{
  padding-left:0;
  margin-block:var(--sp-4);
  list-style:none;
}
.prose .check-list{
  padding-left:0;
  margin-block:var(--sp-4);
  list-style:none;
}
.prose .table-scroll{margin-block:var(--sp-4)}
.prose .callout{margin-block:var(--sp-5)}
.prose .rt-country{white-space:nowrap}

/* --------------------------------------------------------------------------
   5. 窄屏
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .symptom-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

@media (max-width:640px){
  .guide-head{padding-block:var(--sp-6) var(--sp-4)}
  .chapter{padding-block:var(--sp-5)}
  .symptom-grid{grid-template-columns:minmax(0,1fr);gap:10px}
}