/* =========================================================================
   VPNAJ · deepdoc.css
   Page styles for the troubleshooting handbook (排查手册).
   Only layout specific to this page lives here; every colour, radius and
   shadow comes from the tokens declared in base.css.
   ========================================================================= */

.doc{
  --doc-col:820px;
}

/* ── document head ─────────────────────────────────────────────────── */

.doc-head{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  width:100%;
  max-width:var(--doc-col);
  margin-inline:auto;
  padding-bottom:var(--sp-5);
}

.doc-head::after{
  content:"";
  display:block;
  width:72px;
  height:2px;
  margin-top:var(--sp-4);
  border-radius:var(--r-pill);
  background:var(--accent);
  opacity:.5;
}

.doc-kicker{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.doc-kicker::before{
  content:"";
  width:14px;
  height:1px;
  flex:none;
  background:var(--accent);
}

.doc-head h1{
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--text);
}

.doc-head .lede{
  max-width:100%;
  margin:0;
  text-align:left;
  font-size:15.5px;
  line-height:1.85;
}

.doc-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 16px;
  margin-top:var(--sp-2);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--text-muted);
}
.doc-meta li{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.doc-meta li + li::before{
  content:"·";
  margin-right:16px;
  color:var(--ink-25);
}

/* ── column alignment for the toc + body ───────────────────────────── */

.doc .toc-tabs,
.doc-prose,
.doc-foot{
  width:100%;
  max-width:var(--doc-col);
  margin-inline:auto;
}

.doc .toc-tabs{
  margin-bottom:var(--sp-6);
}

/* ── chapters ──────────────────────────────────────────────────────── */

.doc-prose{
  max-width:none;
}

.doc-prose > .chapter + .chapter{
  margin-top:clamp(40px,5.6vw,72px);
}

.chapter > h2:first-of-type{
  margin-top:0;
}

.chapter-num{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--accent-dark);
  opacity:.85;
}

.chapter h3:first-of-type{
  margin-top:var(--sp-5);
}

/* ── symptom index ─────────────────────────────────────────────────── */

.doc-prose .symptom-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:10px;
  margin:var(--sp-5) 0 var(--sp-5);
  margin-left:0;
}

.doc-prose .symptom-grid li{
  list-style:none;
  margin-top:0;
  min-width:0;
}

.symptom-card{
  display:flex;
  flex-direction:column;
  gap:3px;
  height:100%;
  padding:14px 16px;
  border-radius:var(--r-tile);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--border), var(--lift-soft);
  transition:transform .18s ease, box-shadow .18s ease;
}
.symptom-card:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--accent-30), 0 18px 30px -24px var(--accent-45);
}

.symptom-tag{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--accent-dark);
}

.symptom-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  line-height:1.4;
}

.symptom-note{
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ── decision flow ─────────────────────────────────────────────────── */

.flow{
  counter-reset:flow;
  display:flex;
  flex-direction:column;
  margin-top:var(--sp-5);
  margin-left:14px;
}

.flow-step{
  position:relative;
  padding:0 0 20px 34px;
  border-left:1px dashed var(--border);
}
.flow-step:last-child{
  border-left-color:transparent;
  padding-bottom:0;
}

.flow-step::before{
  counter-increment:flow;
  content:counter(flow);
  position:absolute;
  left:-14px;
  top:0;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:none;
  border-radius:50%;
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--border);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent-dark);
}

.flow-step h4{
  margin:0 0 4px;
  font-size:14.5px;
  font-weight:600;
  color:var(--text);
  line-height:1.5;
}

.flow-step p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ── ticket checklist ──────────────────────────────────────────────── */

.ticket-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:var(--sp-5);
}

.ticket-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--r-tile);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--border), var(--lift-soft);
}

.ticket-idx{
  flex:none;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:var(--r-chip);
  background:var(--accent-08);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--accent-dark);
}

.ticket-item p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
  min-width:0;
}

/* ── footer block ──────────────────────────────────────────────────── */

.doc-foot{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  margin-top:clamp(40px,5.6vw,72px);
}

.related-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.related-list li{
  list-style:none;
  margin-top:0;
}
.related-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 2px;
  border-bottom:1px solid var(--ink-07);
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  transition:color .18s ease;
}
.related-list li:last-child a{border-bottom:0}
.related-list a:hover{color:var(--accent-dark)}
.related-list a::before{
  content:"";
  flex:none;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-30);
}

/* ── prose overrides scoped to this page ───────────────────────────── */

.doc-prose pre{
  margin-top:var(--sp-4);
}

.doc-prose .table-scroll{
  margin-top:var(--sp-5);
}

.doc-prose .node-table caption{
  padding-top:0;
}

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width:768px){
  .doc-head h1{font-size:clamp(28px,7.2vw,38px)}
  .doc-head .lede{font-size:14.5px}
  .doc-meta{font-size:11px;gap:4px 12px}
  .doc-meta li + li::before{margin-right:12px}
  .flow{margin-left:12px}
  .flow-step{padding-left:30px}
  .flow-step::before{width:26px;height:26px;left:-13px}
}

@media (max-width:640px){
  .symptom-card{padding:12px 14px}
  .ticket-item{padding:12px 14px;gap:12px}
  .related-list a{font-size:13.5px}
}