/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║           C++ 编程语法文档 · 公共样式表                        ║
 * ║           适用于第 01 - 10 章及 index.html                    ║
 * ║                                                              ║
 * ║  使用方式：在每个 HTML 的 <head> 中引入本文件                   ║
 * ║  <link rel="stylesheet" href="CSS/style.css">                ║
 * ║                                                              ║
 * ║  章节专属样式（仅该章使用）请保留在各章 HTML 的 <style> 中       ║
 * ║                                                              ║
 * ║  水印文字通过 data-ch 属性控制，无需修改此文件：                  ║
 * ║  <header class="chapter-header" data-ch="Ch.1">              ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════════════════════════════════
   § 0  CSS 变量（Design Tokens）
   ════════════════════════════════════════════════════════════════ */
:root {
  /* 背景 & 表面 */
  --bg:        #F7F6F2;
  --surface:   #FFFFFF;
  --border:    #E4E2D8;
  --border-md: #CCC9BD;

  /* 文字层级 */
  --text-primary:   #1A1916;
  --text-secondary: #5C5A52;
  --text-muted:     #8C8A82;

  /* 主色：紫 */
  --accent:        #4A3FBF;
  --accent-light:  #EEEDFE;
  --accent-mid:    #7F77DD;
  --accent-dark:   #3C3489;

  /* 辅色：青绿 */
  --teal:          #0F6E56;
  --teal-light:    #E1F5EE;
  --teal-mid:      #1D9E75;

  /* 辅色：琥珀 */
  --amber:         #854F0B;
  --amber-light:   #FAEEDA;
  --amber-mid:     #EF9F27;

  /* 辅色：珊瑚红 */
  --coral:         #993C1D;
  --coral-light:   #FAECE7;
  --coral-mid:     #D85A30;

  /* 辅色：粉 */
  --pink-light:    #FBEAF0;
  --pink-mid:      #D4537E;
  --pink-dark:     #72243E;

  /* 辅色：蓝 */
  --blue:          #0C447C;
  --blue-light:    #E6F1FB;
  --blue-mid:      #2473B8;

  /* 代码块配色（Catppuccin Mocha 系） */
  --code-bg:    #1E1C2E;
  --code-text:  #CDD6F4;
  --code-kw:    #CBA6F7;   /* 关键字   keyword  */
  --code-str:   #A6E3A1;   /* 字符串   string   */
  --code-num:   #FAB387;   /* 数字     number   */
  --code-cmt:   #6C7086;   /* 注释     comment  */
  --code-fn:    #89B4FA;   /* 函数名   function */
  --code-type:  #F38BA8;   /* 类型     type     */
  --code-macro: #89DCEB;   /* 宏       macro    */
  --code-op:    #F5C2E7;   /* 运算符    operator */
  --code-ln:    #45475A;   /* 行号     line-no  */
  --code-out:   #A6E3A1;   /* 输出标注  output   */
  --code-punc:  #BAC2DE;   /* 标点     punct    */

  /* 间距 & 圆角
     注：第 6-10 章源码使用 --r-sm/md/lg，已通过别名兼容 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* 阴影（--shadow 是 --shadow-card 的别名，两者等价） */
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}


/* ════════════════════════════════════════════════════════════════
   § 1  全局重置 & 基础
   ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* 行内代码 */
code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: #EEEDFE;
  color: var(--accent-dark);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #D3CFFA;
}

/* 分割线 */
.divider { height: 1px; background: var(--border); margin: 28px 0; }


/* ════════════════════════════════════════════════════════════════
   § 2  章节页头（Chapter Header）
   ════════════════════════════════════════════════════════════════ */
.chapter-header {
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  padding: 48px 48px 36px;
  margin-bottom: 40px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: relative;
  overflow: hidden;
}

/* 水印文字：通过 data-ch 属性控制，每章不同
   用法：<header class="chapter-header" data-ch="Ch.1"> */
.chapter-header::before {
  content: attr(data-ch);
  position: absolute;
  right: 36px; top: 24px;
  font-size: 72px;
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -2px;
  font-family: 'JetBrains Mono', monospace;
}

/* 面包屑导航（方案 B，替换原 eyebrow 文字） */
.chapter-eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent-mid);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chapter-eyebrow a {
  color: var(--accent-mid);
  text-decoration: none;
  transition: color .15s;
}
.chapter-eyebrow a:hover { color: var(--accent); }
.eyebrow-sep { color: var(--text-muted); font-size: 10px; }

.chapter-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.5px;
  margin-bottom: 14px;
}
.chapter-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.7;
}


/* ════════════════════════════════════════════════════════════════
   § 3  目录（TOC）
   ════════════════════════════════════════════════════════════════ */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-card);
}
.toc-title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.toc-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}
.toc-list a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .15s;
}
.toc-list a:hover { color: var(--accent); }
.toc-num {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-mid);
  min-width: 28px;
  font-family: 'JetBrains Mono', monospace;
}


/* ════════════════════════════════════════════════════════════════
   § 4  Section 卡片
   ════════════════════════════════════════════════════════════════ */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
.section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent-mid);
  margin-bottom: 6px;
}
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.section-body p {
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.8;
}
.section-body p:last-child { margin-bottom: 0; }

/* 小节标题 */
.sub-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub-title::before {
  content: '';
  display: block;
  width: 3px; height: 16px;
  background: var(--accent);
  border-radius: 2px;
}


/* ════════════════════════════════════════════════════════════════
   § 5  代码块（Code Block）
   ════════════════════════════════════════════════════════════════ */
.code-block {
  background: var(--code-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 20px 0;
  font-size: 13.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.code-header {
  background: #16141F;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2A2840;
}
.code-dots { display: flex; gap: 6px; }
.code-dot { width: 11px; height: 11px; border-radius: 50%; }
.code-dot.red   { background: #FF5F57; }
.code-dot.amber { background: #FEBC2E; }
.code-dot.green { background: #28C840; }
.code-lang {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: #6C7086;
  letter-spacing: .06em;
}
.code-body { padding: 18px 0; overflow-x: auto; }
.code-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.65;
}
.code-table tr:hover { background: rgba(255,255,255,.03); }
.ln {
  width: 40px;
  padding: 0 6px 0 18px;
  color: var(--code-ln);
  text-align: right;
  user-select: none;
  font-size: 12.5px;
  vertical-align: top;
}
.cd {
  padding: 0 18px 0 14px;
  color: var(--code-text);
  white-space: pre;
}

/* 语法高亮 Token */
.kw   { color: var(--code-kw); }
.str  { color: var(--code-str); }
.num  { color: var(--code-num); }
.cmt  { color: var(--code-cmt); font-style: italic; }
.fn   { color: var(--code-fn); }
.typ  { color: var(--code-type); }
.type { color: var(--code-type); }   /* 别名，兼容第1-3章 */
.mac  { color: var(--code-macro); }
.op   { color: var(--code-op); }
.pnc  { color: var(--code-punc); }
.punc { color: var(--code-punc); }   /* 别名，兼容第1-3章 */
.out  { color: var(--code-out); }
.ok   { color: var(--teal);  font-weight: 700; }
.no   { color: var(--coral); font-weight: 700; }

/* 代码行高亮 */
.hl      td { background: rgba(74, 63,191,.07) !important; }
.hl-warn td { background: rgba(153,60, 29,.07) !important; }
.hl-ref  td { background: rgba(166,227,161,.07) !important; }
.hl-row  td { background: rgba(74, 63,191,.07) !important; }

/* 输出注释行 */
.code-out-row td.cd { color: #6C7086; font-style: italic; }


/* ════════════════════════════════════════════════════════════════
   § 6  Callout 提示框
   ════════════════════════════════════════════════════════════════ */
.callout {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 18px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.7;
  border-left: 3px solid;
}
.callout-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.callout.tip    { background: var(--teal-light);   border-color: var(--teal-mid);   color: var(--teal); }
.callout.warn   { background: var(--amber-light);  border-color: var(--amber-mid);  color: var(--amber); }
.callout.danger { background: var(--coral-light);  border-color: var(--coral-mid);  color: var(--coral); }
.callout.info   { background: var(--accent-light); border-color: var(--accent-mid); color: var(--accent-dark); }
.callout.perf   { background: var(--blue-light);   border-color: var(--blue-mid);   color: var(--blue); }
.callout b { font-weight: 700; }

/* 行内代码在不同颜色的 callout 背景下，自动换成同色系，不再用统一的紫色药丸 */
.callout code { border: none; }
.callout.tip    code { background: rgba(29,158,117,.12);  color: var(--teal); }
.callout.warn   code { background: rgba(239,159,39,.16);  color: var(--amber); }
.callout.danger code { background: rgba(216,90,48,.14);   color: var(--coral); }
.callout.info   code { background: rgba(74,63,191,.12);   color: var(--accent-dark); }
.callout.perf   code { background: rgba(36,115,184,.13);  color: var(--blue); }


/* ════════════════════════════════════════════════════════════════
   § 7  Pass Card（传值 vs 引用对比卡，第8/10章共用）
   ════════════════════════════════════════════════════════════════ */
.pass-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.pass-head {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pass-head.val-h { background: var(--blue-light); }
.pass-head.ref-h { background: var(--amber-light); }
.pass-icon { font-size: 18px; }
.pass-title { font-size: 13.5px; font-weight: 700; }
.val-h .pass-title { color: var(--blue); }
.ref-h .pass-title { color: var(--amber); }
.pass-body {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  border-top: 1px solid var(--border);
}


/* ════════════════════════════════════════════════════════════════
   § 8  运算符优先级标记（第2/4/7章共用）
   ════════════════════════════════════════════════════════════════ */
.op-pri {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════
   § 9  通用表格（Advice Table，第8/10章共用）
   ════════════════════════════════════════════════════════════════ */
.advice-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.advice-table thead tr { background: var(--teal-light); }
.advice-table th {
  padding: 9px 13px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--teal);
  border-bottom: 1px solid #9FE1CB;
}
.advice-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.advice-table tr:last-child td { border-bottom: none; }
.advice-table tr:nth-child(even) td { background: #F7FEFC; }
.advice-rec {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
}


/* ════════════════════════════════════════════════════════════════
   § 10  Operator Symbol 表格（第2/4章共用）
   ════════════════════════════════════════════════════════════════ */
.op-sym {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
}


/* ════════════════════════════════════════════════════════════════
   § 11  Comp Table（补码表，第2/8章共用）
   ════════════════════════════════════════════════════════════════ */
.comp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 20px 0;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.comp-table thead tr { background: #1E1C2E; }
.comp-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #6C7086;
  border-bottom: 1px solid #2A2840;
}
.comp-table th:first-child { color: var(--code-text); }
.comp-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.comp-table tr:last-child td { border-bottom: none; }
.comp-table td:first-child { color: var(--text-primary); font-weight: 500; }


/* ════════════════════════════════════════════════════════════════
   § 12  页脚 & 章节导航按钮
   ════════════════════════════════════════════════════════════════ */
.doc-footer {
  text-align: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
.chapter-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  transition: background .15s;
}
.nav-btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-mid);
}
.nav-btn:hover       { background: var(--accent-dark); }
.nav-btn.ghost:hover { background: var(--accent-light); }