/* ============================================================
   xs 教程书 — 章节模板样式（book.css）
   依赖 style.css 的设计变量；八段式章节 + 参考页条目
   ============================================================ */

/* ---------------- 章节布局 ---------------- */
.ch-wrap {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 44px;
  padding: 40px 0 90px;
  align-items: start;
}

.ch-side {
  position: sticky; top: calc(var(--nav-h) + 24px);
  max-height: calc(100vh - var(--nav-h) - 60px);
  overflow-y: auto;
  scrollbar-width: thin;
  min-width: 0;
  padding-left: 2px;
}
.ch-side-title {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
  margin: 18px 0 10px 14px;
}
.ch-side-title:first-child { margin-top: 0; }
.ch-side a {
  display: block;
  color: var(--muted); text-decoration: none;
  font-size: .84rem; line-height: 1.5;
  padding: 5px 14px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: color .2s, border-color .2s, background .2s;
}
.ch-side a:hover { color: var(--text); background: var(--surface); }
.ch-side a.active {
  color: var(--cyan-soft);
  border-left-color: var(--cyan);
  background: rgba(34, 211, 238, .06);
}

/* ---------------- 章头 ---------------- */
.ch-main { min-width: 0; }
.ch-progress {
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .1em;
  color: var(--cyan);
  margin-bottom: 10px;
}
.ch-vol {
  display: inline-block;
  font-size: .76rem; font-weight: 600;
  color: var(--violet);
  background: rgba(139, 92, 246, .1);
  border: 1px solid rgba(139, 92, 246, .3);
  border-radius: 999px;
  padding: 3px 13px;
  margin-bottom: 14px;
}
.ch-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -.015em; line-height: 1.3;
  margin-bottom: 14px;
}
.ch-lead {
  color: var(--muted); font-size: 1rem;
  padding: 14px 18px;
  border-left: 3px solid var(--cyan);
  background: linear-gradient(90deg, rgba(34,211,238,.06), transparent 70%);
  border-radius: 0 12px 12px 0;
  margin-bottom: 8px;
}

/* ---------------- 八段正文 ---------------- */
.book-sec { margin-bottom: 52px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.book-sec > h2 {
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.book-sec > h3 {
  font-size: 1.05rem; font-weight: 700;
  margin: 26px 0 12px;
  color: var(--text);
}
.book-sec p { color: var(--muted); margin-bottom: 13px; font-size: .94rem; }
.book-sec p strong, .book-sec li strong { color: var(--text); font-weight: 600; }
.book-sec ul, .book-sec ol { color: var(--muted); padding-left: 22px; margin-bottom: 13px; font-size: .94rem; }
.book-sec li { margin-bottom: 6px; }
.book-sec li code, .book-sec p code { white-space: normal; }
.book-sec table { /* 复用 doc-table 视觉 */ }
.book-sec .doc-table { margin: 14px 0 20px; }

/* 导读框 */
.intro-note {
  border: 1px solid rgba(139, 92, 246, .28);
  background: rgba(139, 92, 246, .06);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: .9rem; color: var(--muted);
  margin-bottom: 30px;
}
.intro-note strong { color: #c4b5fd; }

/* ---------------- 代码块（五件套） ---------------- */
.code-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 14px 0 20px;
  background: #0a101c;
  overflow: hidden;
  box-shadow: 0 14px 38px -22px rgba(2, 6, 17, .9);
}
.code-head {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px;
  background: rgba(148, 163, 184, .05);
  border-bottom: 1px solid var(--border);
}
.code-file {
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 600;
  color: var(--cyan-soft);
}
.code-tag {
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  color: var(--green);
  border: 1px solid rgba(52, 211, 153, .35);
  background: rgba(52, 211, 153, .08);
  border-radius: 5px;
  padding: 1px 8px;
}
.code-head .spacer { flex: 1; }
.code-src, .code-copy {
  font-size: .72rem; text-decoration: none;
  color: var(--dim);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono);
  padding: 3px 8px; border-radius: 6px;
  transition: color .2s, background .2s;
}
.code-src:hover, .code-copy:hover { color: var(--cyan-soft); background: var(--surface-2); }
.code-copy.ok { color: var(--green); }
pre.code-code {
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: .8rem; line-height: 1.72;
  color: #c3cdda;
  overflow-x: auto;
  tab-size: 4;
  margin: 0;
}
pre.code-code code { background: none; border: none; padding: 0; color: inherit; white-space: pre; }

/* ---------------- 终端块 ---------------- */
.term-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 14px 0 20px;
  background: #080d16;
  overflow: hidden;
}
.term-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: rgba(148, 163, 184, .05);
  border-bottom: 1px solid var(--border);
}
.term-head .term-dot { width: 10px; height: 10px; border-radius: 50%; }
.term-head .term-dot.r { background: #ff5f57; }
.term-head .term-dot.y { background: #febc2e; }
.term-head .term-dot.g { background: #28c840; }
.term-head span.lbl {
  margin-left: 6px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--dim);
}
pre.term-code {
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: .78rem; line-height: 1.8;
  color: #9fb0c3;
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.term-code .t-p { color: var(--cyan); }
.term-code .t-ok { color: var(--green); }
.term-code .t-dim { color: #5b6b7f; }
.term-code .t-hl { color: var(--cyan-soft); }

/* ---------------- 避坑框 ---------------- */
.book-pit {
  border: 1px solid rgba(251, 191, 36, .3);
  background: rgba(251, 191, 36, .04);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
}
.pit-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .94rem;
  color: var(--amber);
  margin-bottom: 10px;
}
.pit-title svg { width: 17px; height: 17px; }
.book-pit dl { margin: 0 0 4px; }
.book-pit dt {
  font-family: var(--font-mono);
  font-size: .72rem; color: var(--amber);
  opacity: .85; margin-top: 8px;
}
.book-pit dd { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }

/* 错误 / 正确 对照 */
.code-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 12px;
}
.code-pair .cp {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #0a101c;
}
.code-pair .cp-bad  { border-color: rgba(248, 113, 113, .32); }
.code-pair .cp-good { border-color: rgba(52, 211, 153, .32); }
.code-pair .cp-head {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
}
.cp-bad  .cp-head { color: var(--red);   background: rgba(248, 113, 113, .07); }
.cp-good .cp-head { color: var(--green); background: rgba(52, 211, 153, .06); }
.code-pair pre {
  margin: 0; padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: .74rem; line-height: 1.65;
  color: #c3cdda;
  overflow-x: auto;
}
.code-pair pre code { background: none; border: none; padding: 0; color: inherit; white-space: pre; }

/* ---------------- 练习框 ---------------- */
.book-ex {
  border: 1px solid rgba(34, 211, 238, .26);
  background: rgba(34, 211, 238, .035);
  border-radius: 12px;
  padding: 16px 19px;
  margin: 14px 0;
}
.ex-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ex-level {
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  border-radius: 5px; padding: 2px 9px;
}
.ex-level.l1 { color: var(--green);  border: 1px solid rgba(52,211,153,.4);  background: rgba(52,211,153,.07); }
.ex-level.l2 { color: var(--cyan-soft); border: 1px solid rgba(34,211,238,.4);  background: rgba(34,211,238,.07); }
.ex-level.l3 { color: var(--amber);  border: 1px solid rgba(251,191,36,.4);  background: rgba(251,191,36,.07); }
.ex-name { font-weight: 700; font-size: .93rem; color: var(--text); }
.book-ex p { font-size: .88rem; color: var(--muted); margin: 4px 0 8px; }
.ex-check {
  font-size: .82rem; color: var(--muted);
  border-top: 1px dashed rgba(34, 211, 238, .25);
  padding-top: 8px; margin-top: 8px;
}
.ex-check b { color: var(--cyan-soft); font-weight: 600; }

/* ---------------- 小结速查表 ---------------- */
.book-sum table {
  width: 100%; border-collapse: collapse;
  font-size: .86rem;
  border: 1px solid rgba(52, 211, 153, .28);
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0 20px;
}
.book-sum th {
  text-align: left; font-weight: 600; color: var(--green);
  background: rgba(52, 211, 153, .06);
  padding: 9px 16px;
  border-bottom: 1px solid rgba(52, 211, 153, .2);
}
.book-sum td {
  padding: 8px 16px;
  color: var(--muted);
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}
.book-sum tr:last-child td { border-bottom: none; }
.book-sum td:first-child { color: var(--text); white-space: nowrap; }
.book-sum td code { font-size: .8rem; }

/* ---------------- 章尾：翻页 + 双框 ---------------- */
.ch-links {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 44px 0 18px;
}
.ch-link {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  background: var(--surface);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ch-link:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.ch-link.next { text-align: right; align-items: flex-end; margin-left: auto; }
.ch-link .cl-dir {
  font-family: var(--font-mono);
  font-size: .7rem; color: var(--dim);
}
.ch-link .cl-title { font-size: .92rem; font-weight: 600; color: var(--text); }
.ch-link:hover .cl-title { color: var(--cyan-soft); }

.ch-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 19px;
  margin: 14px 0;
  background: var(--surface);
}
.ch-box-title {
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .12em;
  margin-bottom: 12px;
}
.ch-api-box  .ch-box-title { color: var(--cyan-soft); }
.ch-xrt-box  .ch-box-title { color: #c4b5fd; }
.ch-xrt-box  { border-color: rgba(139, 92, 246, .28); background: rgba(139, 92, 246, .04); }
.ch-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
a.ch-pill {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--cyan-soft);
  text-decoration: none;
  border: 1px solid rgba(34, 211, 238, .28);
  background: rgba(34, 211, 238, .06);
  padding: 4px 12px; border-radius: 999px;
  transition: background .2s, border-color .2s;
}
a.ch-pill:hover { background: rgba(34, 211, 238, .14); }
a.ch-pill small { color: var(--dim); }
.ch-xrt-box ul { margin: 0; padding-left: 20px; }
.ch-xrt-box li { font-size: .86rem; color: var(--muted); margin-bottom: 6px; }
.ch-box.ch-xrt-box li a { color: #c4b5fd; }

/* ---------------- 总目录页 ---------------- */
.vol-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(148,163,184,.05), rgba(148,163,184,.022));
  margin-bottom: 22px;
  overflow: hidden;
}
.vol-head {
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vol-no {
  font-family: var(--font-mono);
  font-size: .78rem; font-weight: 700;
  color: var(--cyan);
  background: rgba(34, 211, 238, .08);
  border: 1px solid rgba(34, 211, 238, .25);
  padding: 3px 11px; border-radius: 7px;
}
.vol-name { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.vol-desc { flex-basis: 100%; font-size: .85rem; color: var(--muted); margin-top: 2px; }
.vol-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: .74rem; color: var(--dim);
}
.ch-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 16px; align-items: center;
  padding: 11px 26px;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
  transition: background .2s;
}
.ch-row:last-child { border-bottom: none; }
.ch-row:hover { background: rgba(148, 163, 184, .04); }
.ch-row .no {
  font-family: var(--font-mono);
  font-size: .78rem; color: var(--dim);
}
.ch-row .ttl { font-size: .92rem; color: var(--muted); }
.ch-row a.ttl { color: var(--text); text-decoration: none; }
.ch-row a.ttl:hover { color: var(--cyan-soft); }
.ch-row a.ttl::after { content: " →"; color: var(--cyan); opacity: 0; transition: opacity .2s; }
.ch-row a.ttl:hover::after { opacity: 1; }
.st-badge {
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  padding: 2px 10px; border-radius: 999px;
}
.st-done { color: var(--green); border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.st-plan { color: var(--dim); border: 1px dashed var(--border); }

/* ---------------- 参考页条目 ---------------- */
.ref-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0;
  background: linear-gradient(180deg, rgba(148,163,184,.045), rgba(148,163,184,.02));
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.ref-item > h3 {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 1rem; font-weight: 700;
  color: var(--cyan-soft);
  margin-bottom: 6px;
}
.ref-kind {
  font-family: var(--font-ui);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  padding: 2px 10px; border-radius: 999px;
}
.rk-life { color: #c4b5fd; border: 1px solid rgba(139,92,246,.4); background: rgba(139,92,246,.08); }
.rk-http { color: var(--cyan-soft); border: 1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.07); }
.rk-ws   { color: var(--green);  border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.rk-api  { color: var(--amber);  border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.07); }
.ref-desc { font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.ref-sig {
  font-family: var(--font-mono);
  font-size: .8rem; line-height: 1.7;
  color: #c3cdda;
  background: #0a101c;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  padding: 11px 16px;
  overflow-x: auto;
  margin-bottom: 14px;
  white-space: pre;
}
.ref-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ref-meta span {
  font-size: .74rem; color: var(--muted);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 3px 11px; border-radius: 7px;
}
.ref-meta span b { color: var(--text); font-weight: 600; }
.ref-item .doc-table { margin: 10px 0 14px; }

/* 契约卡（参考页顶部的全局硬规则） */
.contract-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 18px 0 26px;
}
.contract-card {
  border: 1px solid rgba(139, 92, 246, .3);
  background: rgba(139, 92, 246, .05);
  border-radius: 12px;
  padding: 15px 17px;
}
.contract-card b { display: block; font-size: .88rem; color: #c4b5fd; margin-bottom: 6px; }
.contract-card p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* ---------------- 图示（简易流程图容器） ---------------- */
.diagram {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 16px 0 20px;
  font-family: var(--font-mono);
  font-size: .78rem; line-height: 1.9;
  color: var(--muted);
  overflow-x: auto;
  background: rgba(6, 10, 19, .5);
  white-space: pre;
}
.diagram b { color: var(--cyan-soft); font-weight: 600; }
.diagram i { color: #c4b5fd; font-style: normal; }
.diagram em { color: var(--green); font-style: normal; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
  .ch-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 18px; }
  .ch-side {
    position: sticky; top: var(--nav-h); z-index: 50;
    display: flex; align-items: center; gap: 4px;
    max-height: none; overflow-x: auto; overflow-y: hidden;
    padding: 10px 0 12px;
    margin-bottom: 10px;
    background: rgba(6, 10, 19, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .ch-side::-webkit-scrollbar { display: none; }
  .ch-side-title { display: none; }
  .ch-side a {
    white-space: nowrap;
    border-left: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px;
  }
  .ch-side a.active { border-color: rgba(34, 211, 238, .45); }
  .code-pair { grid-template-columns: 1fr; }
  .contract-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ch-links { grid-template-columns: 1fr; }
  .ch-link.next { align-items: flex-start; text-align: left; }
}