/* ===========================================================================
   深入理解 AI Agent — 把 Material 主题「去装饰」,复刻 icyfenix.cn 的扁平风
   ===========================================================================
   设计参考:实测 icyfenix.cn 的 computed style(2026-07)
     - navbar 57px / 白底 / 1px 浅灰下划线
     - sidebar 320px / 白底 / 1px 浅灰右边线
     - 主文字色 #2c3e50(深蓝灰,而非纯黑)
     - h1 41.6px
     - 正文 16px / 1.7
     - 链接默认与正文同色,hover 时变蓝(扁平、不张扬)
   策略:不换主题(保留 Material 的搜索/多语言/暗色/i18n/分享卡等所有功能),
   只用 CSS 关掉它的「卡片化」「阴影」「圆角」「紫色调」等装饰,
   让页面回归「白底 + 左侧栏 + 文字」的扁平形态。
   =========================================================================== */

/* ── 0. 设计 token(对齐 fenix 实测值) ─────────────────────────── */

:root {
  --md-text-font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
                  "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", SFMono-Regular, Consolas,
                  Menlo, monospace;

  /* fenix 调色板 */
  --fenix-ink:        #2c3e50;   /* 主文字 + h1 + 链接默认色 */
  --fenix-ink-soft:   #57606a;   /* 次级文字 */
  --fenix-ink-mute:   #8b949e;   /* 弱化文字 */
  --fenix-border:     #eaecef;   /* navbar/sidebar 的细分隔线 */
  --fenix-link:       #3884fe;   /* fenix 实测的正文链接蓝 */
  --fenix-link-hover: #42b983;   /* fenix 经典墨绿 hover */
  --fenix-bg:         #ffffff;
  --fenix-bg-soft:    #f6f8fa;
  --fenix-code-bg:    rgba(27, 31, 35, 0.05);
  --fenix-code-ink:   #476582;

  /* 让 Material 也用上这些 token */
  --md-primary-fg-color:        #2c3e50;
  --md-primary-bg-color:        #ffffff;
  --md-default-fg-color:        #2c3e50;
  --md-default-fg-color--soft:  #57606a;
  --md-accent-fg-color:         #42b983;
}

/* ── 1. 关掉 Material 的卡片化、阴影、圆角 ────────────────────── */

/* 全局去掉 box-shadow —— 这是 Material 最显眼的装饰 */
.md-header,
.md-sidebar,
.md-tabs,
.md-search,
.md-nav,
.md-typeset .admonition,
.md-typeset details,
.md-typeset pre,
.md-typeset table:not([class]) {
  box-shadow: none !important;
}

/* navbar:扁平、白底、单线分隔(对齐 fenix 的 57px / 1px #eaecef) */
.md-header {
  background-color: var(--fenix-bg) !important;
  border-bottom: 1px solid var(--fenix-border) !important;
  color: var(--fenix-ink) !important;
  height: 57px;
  box-shadow: none !important;
  transition: none;
}
.md-header__title { color: var(--fenix-ink) !important; font-weight: 600; }
.md-header__topic { color: var(--fenix-ink) !important; }

/* 顶部 header 里的搜索框 —— 扁平化 */
.md-search__input {
  background-color: var(--fenix-bg-soft) !important;
  color: var(--fenix-ink) !important;
  border-radius: 4px !important;
}
.md-search__input::placeholder { color: var(--fenix-ink-mute); }

/* ── 2. 侧边栏:更宽、白底、单线分隔 ─────────────────────────── */

.md-sidebar {
  width: 320px;       /* fenix 的实测宽度 */
}
@media screen and (min-width: 1220px) {
  .md-sidebar--primary {
    border-right: 1px solid var(--fenix-border);
  }
}

/* 侧边栏链接 —— 扁平、深蓝灰、无 hover 背景,只在 hover 时变墨绿 */
.md-nav__item {
  border-left: 2px solid transparent;
  transition: border-color .12s;
}
.md-nav__link {
  color: var(--fenix-ink) !important;
  font-size: 0.84rem;
  margin: 0;
  padding: 6px 12px 6px 0;
  transition: color .12s;
}
.md-nav__link:hover,
.md-nav__link:hover * {
  color: var(--fenix-link-hover) !important;
}
/* 章节折叠头(<label for="...">):必须让它的整个区域接收点击并显示手型光标,
   否则用户的鼠标点击会落在 <li> 上而不是 label 上,checkbox 不会翻转,
   章节看起来"点不开也收不起"。 */
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link {
  position: relative;
  z-index: 2;                /* 在 <li> 之上接收点击 */
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;               /* 占满整个章节条宽度,不只文字部分 */
  box-sizing: border-box;
  pointer-events: auto !important;   /* Material sets pointer-events:none on some labels */
}
/* 章节项本身不要拦截点击 — pointer-events: none 让点击穿透到 label */
.md-sidebar--primary .md-nav__item--nested {
  position: relative;
  cursor: pointer;
}
/* 桌面端 sticky 站点标题(Material 默认 z-index:1)必须盖过章节
   label(z-index:2),否则侧栏滚动时章节名会叠在站点标题上。 */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    z-index: 3;
  }
}
/* 当前激活的章节 —— 左侧一条墨绿色竖线(像 fenix 当前章节的视觉提示) */
.md-nav__item--active {
  border-left-color: var(--fenix-link-hover);
}
.md-nav__item--active > .md-nav__link {
  color: var(--fenix-link-hover) !important;
  font-weight: 500;
}

/* 章节分组标题(第1章/第2章...) —— 稍粗、深蓝灰 */
.md-nav__title {
  color: var(--fenix-ink) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── 3. 正文排版 ─────────────────────────────────────────────── */

.md-typeset {
  font-size: 0.78rem;          /* 中文密集排版,比 fenix 16px 略小更舒服 */
  line-height: 1.65;
  color: var(--fenix-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset blockquote {
  margin-block: 0.9em;
  orphans: 3;
  widows: 3;
}

/* h1 —— 章节标题(对齐 fenix 41.6px) */
.md-typeset h1 {
  color: var(--fenix-ink) !important;
  font-weight: 600 !important;
  font-size: 1.85rem !important;   /* ≈ 29.6px,比 fenix 略小,适合中文 */
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 1.2rem;
  padding-bottom: 0;
  border: none;
}
/* h2 —— 简洁,只一条细分隔线 */
.md-typeset h2 {
  color: var(--fenix-ink);
  font-weight: 600;
  font-size: 1.55rem;
  margin-top: 2.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
  border-left: none;
  border-bottom: 1px solid var(--fenix-border);
}

/* h3 —— 小标题,深蓝灰 */
.md-typeset h3 {
  color: var(--fenix-ink);
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 1.8rem;
}

/* ── 4. 链接 —— 默认与正文同色,hover 变墨绿(对齐 fenix) ────── */

.md-typeset a,
.md-typeset a:visited,
.md-typeset a:-webkit-any-link {
  color: var(--fenix-link) !important;
  text-decoration: none;
  border-bottom: none;
  transition: color .12s;
}
.md-typeset a:hover {
  color: var(--fenix-link-hover) !important;
  text-decoration: none;
  border-bottom: none;
}

/* ── 5. 行内代码 + 代码块 —— 对齐 fenix 浅灰底 + 蓝灰字 ───────── */

.md-typeset code {
  color: var(--fenix-code-ink) !important;
  background-color: var(--fenix-code-bg) !important;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  font-size: 0.85em;
  word-break: break-word;
}
/* 代码块<pre>:沿用 Material 的语法高亮主题,只调字号/边距。
   注意:不要强行换深色背景,会破坏 Material 的浅色高亮配色。 */
.md-typeset pre > code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.md-typeset pre {
  margin: 1rem 0;
  border-radius: 4px;
  /* 给代码块一个稳定的浅灰底,让它在正文里清晰可辨。
     不要用 Material 默认的纯白(在白底正文里融成一团)。 */
  background: var(--fenix-bg-soft) !important;
}

/* ── 6. 表格 —— 去掉 Material 的强对比,扁平化 ─────────────────── */

.md-typeset table:not([class]) {
  border: 1px solid var(--fenix-border);
  border-radius: 4px;
  box-shadow: none !important;
  font-size: 0.85rem;
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1.2rem 0;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 8px 12px;           /* 行距更宽松 */
  border: none;
  vertical-align: top;
}
.md-typeset table:not([class]) th {
  background: var(--fenix-bg-soft);
  color: var(--fenix-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--fenix-border);
  text-align: left;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--fenix-border);
}
.md-typeset table:not([class]) tr:nth-child(even) {
  background: var(--fenix-bg);     /* 偶数行不要花哨的灰条 */
}
.md-typeset table:not([class]) tr:hover td {
  background: var(--fenix-bg-soft);   /* hover 时淡淡提示 */
}
/* 表格里的链接保持低视觉权重,不要满表蓝绿一片 */
.md-typeset table:not([class]) a {
  color: var(--fenix-link);
}
.md-typeset table:not([class]) a:hover {
  color: var(--fenix-link-hover);
}

/* ── 7. 引用块 —— 极简左竖线,无背景填充 ───────────────────────── */

.md-typeset blockquote {
  border-left: 3px solid var(--fenix-border);
  background: transparent;
  color: var(--fenix-ink-soft);
  padding: 0.2rem 1rem;
  border-radius: 0;
}

/* ── 8. 关掉首页 hero 区的紫色渐变(改回 fenix 那种纯净白底) ──── */

.hero {
  background: var(--fenix-bg);
  border: none;
  border-radius: 0;
  padding: 4rem 1rem 2rem;
  text-align: center;
}
.hero h1 {
  color: var(--fenix-ink);
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.hero .hero-formula {
  color: var(--fenix-link-hover);   /* 墨绿公式色 */
  font-size: 1.2rem;
  margin: 1rem 0 1.6rem;
  font-family: var(--md-code-font);
}
.hero .cta {
  background: var(--fenix-ink);
  color: var(--fenix-bg);
  border-radius: 4px;            /* 不用胶囊形,扁平 */
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.88rem;
  border: none;
}
.hero .cta:hover {
  background: var(--fenix-link-hover);
  opacity: 1;
  transform: none;
}
.hero .cta.secondary {
  background: transparent;
  color: var(--fenix-ink);
  border: 1px solid var(--fenix-border);
}
.hero .cta.secondary:hover {
  border-color: var(--fenix-link-hover);
  color: var(--fenix-link-hover);
}

/* ── 9. 章节卡片网格 —— 扁平化(去掉浮起+阴影) ────────────────── */

/* 首页三列统计(10 章 / 88 实验 / 5 语言) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1.4rem 0 2rem;
  padding: 0;
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
}
.stat-row p {
  background: var(--fenix-bg);
  border: 1px solid var(--fenix-border);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--fenix-ink-soft);
}
.stat-row p strong {
  display: block;
  color: var(--fenix-ink);
  font-size: 0.95rem;
  margin-bottom: 3px;
  font-weight: 600;
}

/* 章节卡片网格(首页 + 各章实验索引页通用) */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--fenix-border);
  border: 1px solid var(--fenix-border);
  border-radius: 4px;
  overflow: hidden;
  margin: 1.4rem 0;
}
/* Markdown 会把每个 exp-card 包一层 <p>:清零其边距并让卡片撑满
   格子,否则模拟 1px 边框的灰底会从缝隙里透出成大块灰带。 */
.exp-grid > p {
  margin: 0;
}
.exp-card {
  display: block;
  height: 100%;
  box-sizing: border-box;
  background: var(--fenix-bg);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--fenix-ink);
  border: none;
  border-radius: 0;
  transition: background .12s;
}
.exp-card:hover {
  background: var(--fenix-bg-soft);
  border-color: transparent;
  transform: none;
  box-shadow: none !important;
}
.exp-card .exp-title {
  display: block;
  color: var(--fenix-ink);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
  line-height: 1.4;
}
.exp-card:hover .exp-title {
  color: var(--fenix-link-hover);
}
.exp-card .exp-desc {
  display: block;
  color: var(--fenix-ink-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ── 10. 移动端调整 ─────────────────────────────────────────── */

@media screen and (max-width: 600px) {
  .md-typeset { font-size: 15px; }
  .md-typeset h1 { font-size: 2rem; }
  .md-typeset h2 { font-size: 1.3rem; }
  .hero { padding: 2.5rem 1rem 1.5rem; }
  .hero h1 { font-size: 2rem; }
}

/* ── 11. 暗色模式同步 —— 保持 fenix 风格,只是反色 ──────────────── */

[data-md-color-scheme="slate"] {
  --fenix-ink:        #e6edf3;
  --fenix-ink-soft:   #8b949e;
  --fenix-ink-mute:   #6e7681;
  --fenix-border:     #30363d;
  --fenix-bg:         #0d1117;
  --fenix-bg-soft:    #161b22;
  --fenix-code-bg:    rgba(240, 246, 252, 0.08);
  --fenix-code-ink:   #79c0ff;
  --fenix-link:       #e6edf3;
  --fenix-link-hover: #42b983;
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-sidebar--primary {
  background-color: var(--fenix-bg) !important;
  border-color: var(--fenix-border) !important;
}
[data-md-color-scheme="slate"] .exp-card,
[data-md-color-scheme="slate"] .hero {
  background: var(--fenix-bg);
}