/* ============================================================
   VPNBN · deepdoc.css
   Page layer for the AI access deep guide (zh-CN/troubleshooting.html):
   sky hero with clouds, doc meta row, article rhythm, doc tables,
   related-reading spacing. All colours come from base.css tokens.
   ============================================================ */

/* ------------------------------------------------------------
   hero
   ------------------------------------------------------------ */
.doc-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:56px;
  padding-bottom:0;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 58%,var(--sky-low) 100%);
}
.doc-hero .cloud{
  position:absolute;
  z-index:1;
  width:210px;
  height:64px;
  border-radius:var(--r-pill);
  background:var(--cloud);
  pointer-events:none;
}
.doc-hero .cloud::before,
.doc-hero .cloud::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}
.doc-hero .cloud::before{left:34px;top:-30px;width:92px;height:92px}
.doc-hero .cloud::after{right:30px;top:-18px;width:66px;height:66px}
.doc-hero .cloud-a{top:34px;left:4%}
.doc-hero .cloud-b{top:104px;right:6%;transform:scale(.8)}

.doc-hero-inner{
  position:relative;
  z-index:2;
  max-width:920px;
  margin:0 auto;
  padding-bottom:40px;
  text-align:center;
}
.doc-hero h1{margin:14px 0 0}
.doc-hero .lead{margin:16px auto 0;max-width:760px}
.doc-hero .btn-row{justify-content:center;margin-top:26px}
.doc-hero .fact-strip{margin:30px auto 0;max-width:900px}

.doc-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 22px;
  margin:18px 0 0;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
}
.doc-meta span{position:relative;white-space:nowrap}
.doc-meta span + span::before{
  content:"";
  position:absolute;
  left:-11px;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--border-strong);
  transform:translateY(-50%);
}

.doc-scope{
  max-width:720px;
  margin:22px auto 0;
  font-size:14.5px;
  line-height:1.72;
  color:var(--text-muted);
}
.doc-scope a{
  color:var(--accent-dark);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ------------------------------------------------------------
   article rhythm
   ------------------------------------------------------------ */
.doc-article{max-width:880px;padding-bottom:8px}
.doc-article .toc-tabs{margin-top:8px}

.doc-sec{
  border-top:1px solid var(--border-soft);
  padding-top:6px;
  padding-bottom:30px;
}
.doc-sec:first-of-type{border-top:0;padding-top:0}
.doc-article > .doc-sec:last-child{padding-bottom:0}

.doc-article h2{
  position:relative;
  padding-left:18px;
  margin-top:44px;
}
.doc-article h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.14em;
  bottom:.14em;
  width:5px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--teal-line) 100%);
}
.doc-article h3{margin-top:26px}
.doc-article pre{margin:20px 0}
.doc-article .doc-sec[id]{scroll-margin-top:56px}

/* ------------------------------------------------------------
   doc tables
   ------------------------------------------------------------ */
.doc-table-wrap{margin:22px 0}

.doc-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.62;
  background:var(--bg-panel);
}
.doc-table caption{
  caption-side:top;
  text-align:left;
  padding:14px 18px 6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-muted);
}
.doc-table th,
.doc-table td{
  padding:11px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--border-soft);
  word-break:keep-all;
}
.doc-table th{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text);
  background:var(--bg-panel2);
  white-space:nowrap;
}
.doc-table td{color:#2C3352}
.doc-table td:first-child{font-weight:700;color:var(--text)}
.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table tbody tr:hover td{background:rgba(213,229,244,.35)}

/* ------------------------------------------------------------
   related reading
   ------------------------------------------------------------ */
.doc-related .post-card h3{font-size:16.5px}

/* ------------------------------------------------------------
   narrow screens
   ------------------------------------------------------------ */
@media (max-width:768px){
  .doc-hero{padding-top:40px}
  .doc-hero .cloud{display:none}
  .doc-hero .fact-strip{margin-top:24px}
  .doc-article h2{padding-left:14px}
  .doc-article h2::before{width:4px}
}
@media (max-width:640px){
  .doc-meta{font-size:12px;gap:6px 18px}
  .doc-meta span + span::before{left:-9px}
  .doc-sec{padding-bottom:22px}
  .doc-article h2{margin-top:34px}
}