/* ==========================================================================
   VPNDH · deepdoc.css
   深度指南页（流媒体解锁全攻略）专属样式。
   只做版式与容器层面的补充，颜色与阴影一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---------- 1. 页头 ---------- */
.doc-head{
  position:relative;
  overflow-x:clip;
  padding-bottom:var(--sp-6);
}
.doc-head .wrap{position:relative;z-index:1}
.doc-head .lede{
  max-width:60ch;
  margin-top:var(--sp-4);
}
.doc-arc{
  position:absolute;
  z-index:0;
  right:-40px;
  top:18px;
  width:min(720px,86%);
  height:auto;
  color:var(--ink-08);
  pointer-events:none;
}

.doc-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  margin:var(--sp-5) 0 0;
  padding-top:var(--sp-4);
  border-top:1px dashed var(--ink-12);
  font-size:12.5px;
  color:var(--text-muted);
}
.doc-facts li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
}
.doc-facts li::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}
.doc-facts .mono{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}

/* ---------- 2. 正文容器 ---------- */
.doc{
  position:relative;
  padding-bottom:var(--sp-9);
}
.doc-body{
  max-width:820px;
  min-width:0;
}

/* 复用 .prose 的排版语言，但解除其阅读宽度限制 */
.doc-body .prose{max-width:100%}
.doc-body .prose > h2:first-child{margin-top:0}

.doc-body section + section{
  margin-top:var(--sp-8);
  padding-top:var(--sp-7);
  border-top:1px dashed var(--ink-12);
}

.doc-intro{margin-bottom:var(--sp-7)}

/* 章节内的步骤块与提示块在 prose 里保持间距 */
.doc-body .prose .steps{margin:1.2em 0}
.doc-body .prose .callout{margin:1.2em 0}
.doc-body .prose .table-scroll{margin:1.2em 0}
.doc-body .prose .table-scroll table{min-width:640px}

/* ---------- 3. 文末相关阅读 ---------- */
.doc-next{
  margin-top:var(--sp-8);
  padding-top:var(--sp-7);
  border-top:1px dashed var(--ink-12);
  min-width:0;
}
.doc-next > h2{
  margin:0 0 var(--sp-5);
  font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);
  letter-spacing:-.02em;
}
.doc-next .post-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ---------- 4. 响应式 ---------- */
@media (max-width:980px){
  .doc-arc{width:min(560px,92%)}
  .doc-body{max-width:100%}
}
@media (max-width:760px){
  .doc-arc{display:none}
  .doc-head{padding-bottom:var(--sp-5)}
  .doc-facts{gap:8px 16px;font-size:12px}
  .doc-body section + section{
    margin-top:var(--sp-7);
    padding-top:var(--sp-6);
  }
  .doc-next{margin-top:var(--sp-7);padding-top:var(--sp-6)}
}
@media (max-width:640px){
  .doc-next .post-grid{grid-template-columns:minmax(0,1fr)}
  .doc-body .prose .table-scroll table{min-width:560px}
}