/* 接入文档页专用。变量和基础样式沿用 layout.css，这里只写文档自己的那套。
   长文页面停留久，是全站最适合挂广告的地方——广告位在最后一节。 */

.doc-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  max-width: 1440px; margin: 0 auto; padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--rule);
}
.doc-nav-right { display: flex; align-items: center; gap: var(--space-md); }
.doc-nav .nav-link {
  font-family: var(--font-cn); font-size: 13.5px; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out);
}
.doc-nav .nav-link:hover { color: var(--ink); }
.doc-nav .nav-cta {
  font-family: var(--font-cn); font-size: 13.5px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule-hi); border-radius: var(--radius);
  padding: 7px 15px; white-space: nowrap;
  transition: border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.doc-nav .nav-cta:hover { border-color: var(--gold); color: var(--gold); }

/* 两栏：左边目录跟着滚，右边正文。 */
.doc-shell {
  max-width: 1440px; margin: 0 auto;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
}

.toc { position: sticky; top: var(--space-lg); display: flex; flex-direction: column; gap: 2px; }
.toc-title {
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em;
  color: var(--neutral); margin-bottom: var(--space-xs);
}
.toc a {
  font-family: var(--font-cn); font-size: 13px; color: var(--muted);
  text-decoration: none; padding: 5px 0 5px 10px;
  border-left: 1px solid var(--rule);
  transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.toc a:hover { color: var(--ink); border-left-color: var(--rule-hi); }
.toc a.on { color: var(--gold); border-left-color: var(--gold); }

.doc { min-width: 0; }
.doc-head { padding-bottom: var(--space-md); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-lg); }
.doc-head h1 {
  margin: 0 0 6px; font-family: var(--font-title);
  font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.2;
}
.doc-head p { margin: 0; font-family: var(--font-cn); font-size: 15px; color: var(--muted); line-height: 1.75; }

.sec { padding-top: var(--space-xl); scroll-margin-top: var(--space-md); }
.sec:first-of-type { padding-top: 0; }
.sec h2 {
  margin: 0 0 var(--space-sm); font-family: var(--font-title);
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--rule);
}
.sec h3 {
  margin: var(--space-md) 0 var(--space-xs);
  font-family: var(--font-cn); font-size: 14px; font-weight: 600;
}
.sec p { font-family: var(--font-cn); font-size: 14px; color: var(--muted); line-height: 1.8; margin: 0 0 var(--space-sm); }
.sec ul { margin: 0 0 var(--space-sm); padding-left: 20px; }
.sec li { font-family: var(--font-cn); font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 5px; }
.sec b { color: var(--ink); font-weight: 600; }
.sec code {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--gold); background: var(--paper-2);
  padding: 1px 5px; border: 1px solid var(--rule);
}
.sec pre code { color: inherit; background: none; padding: 0; border: 0; font-size: inherit; }

/* 代码块：横向能滚，页面本身不横滚。 */
.doc pre {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.8;
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-sm);
  overflow-x: auto; white-space: pre; color: var(--ink);
}

.code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-sm);
}
.code-bar .label { font-family: var(--font-cn); font-size: 13px; font-weight: 600; color: var(--muted); }

/* 表格：报错码、上限这类对照信息 */
.tbl-wrap { overflow-x: auto; margin: 0 0 var(--space-sm); }
.tbl { border-collapse: collapse; width: 100%; min-width: 480px; }
.tbl th {
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em;
  color: var(--neutral); font-weight: 500; text-align: left;
  padding: 0 var(--space-md) var(--space-xs) 0; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.tbl td {
  font-family: var(--font-cn); font-size: 13.5px; color: var(--muted);
  padding: 10px var(--space-md) 10px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; line-height: 1.7;
}
.tbl td:first-child { font-family: var(--font-mono); font-size: 13px; color: var(--gold); white-space: nowrap; }
.tbl td.plain { font-family: var(--font-cn); color: var(--muted); white-space: normal; }
.tbl tr:last-child td { border-bottom: 0; }

/* 带序号的操作步骤（各工具怎么配那页用） */
.steps-list { margin: 0 0 var(--space-sm); padding-left: 20px; }
.steps-list li {
  font-family: var(--font-cn); font-size: 14px; color: var(--muted);
  line-height: 1.8; margin-bottom: 7px;
}
.steps-list li::marker { color: var(--gold); font-family: var(--font-title); font-weight: 600; font-size: 14px; }

/* 提示条：容易踩的坑单独拎出来 */
.note {
  border-left: 2px solid var(--gold); background: var(--gold-soft);
  padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-sm);
}
.note p { margin: 0; color: var(--ink); font-size: 13.5px; }

.doc-foot {
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em; color: var(--neutral);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.doc-foot a { color: var(--neutral); text-decoration: none; }
.doc-foot a:hover { color: var(--gold); }

/* ── 广告位 ─────────────────────────────────────────────
   三个坑位：正文上方横幅、目录下方竖幅、正文末尾横幅。
   接上广告平台之前一律 hidden，页面上不留空洞、不放占位图。
   接的时候只要把广告代码塞进对应容器再去掉 hidden 就行，别改这里的尺寸。 */
.ad-slot { display: block; }
.ad-slot[hidden] { display: none !important; }
.ad-banner {
  min-height: 90px; margin: 0 0 var(--space-lg);
  border: 1px solid var(--rule); background: var(--paper-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ad-banner-foot { margin: var(--space-lg) 0 0; }
.ad-rail {
  margin-top: var(--space-md); min-height: 250px;
  border: 1px solid var(--rule); background: var(--paper-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ad-tag {
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em;
  color: var(--neutral); margin-bottom: 6px;
}

@media (max-width: 900px) {
  .doc-shell { grid-template-columns: 1fr; gap: var(--space-lg); }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-sm); }
  .toc-title { width: 100%; margin-bottom: 0; }
  .toc a { border-left: 0; padding: 3px 0; }
  .toc a.on { border-left: 0; }
  .ad-rail { display: none; }
}

@media (max-width: 640px) {
  .doc-nav { padding: var(--space-md); }
  .doc-nav .nav-link { display: none; }
  .doc-shell { padding-left: var(--space-md); padding-right: var(--space-md); }
}