/* ===========================================================================
   深入理解 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;
}

/* Prefer Korean glyph forms only while viewing the Korean edition. Keeping
   this override language-scoped avoids changing Chinese glyphs site-wide. */
html[lang="ko"] {
  --md-text-font: "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic",
                  "Noto Sans SC", "PingFang SC", -apple-system,
                  blinkmacsystemfont, "Segoe UI", helvetica, arial, sans-serif;
}

/* ── 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); }

/* ── 1b. 整页布局:全宽(fenix/VitePress 几何)──────────────────
   Material 默认把整页装进 61rem 的 .md-grid 盒子:1920px 屏上两侧
   各浪费 ~350px,正文却只有 ~660px,宽图和代码块很挤。桌面端解除
   上限:header 与左侧栏贴住视口左缘;正文限制在书页式行宽内
   (~50 汉字/行),与右侧大纲作为一个整体在剩余空间居中——正文的
   margin-left:auto 和大纲的 margin-right:auto 平分空白,大纲因此
   紧贴正文而不是漂到视口最右缘。
   只在桌面端覆写:移动端抽屉几何被 Material 硬编码(见 2 节)。 */
@media screen and (min-width: 76.25em) {
  .md-grid { max-width: 100%; }
  .md-header__inner { padding-left: 0.8rem; padding-right: 0.8rem; }
  .md-content { max-width: 42rem; margin-left: auto; margin-right: 0; }
  .md-sidebar--secondary { margin-right: auto; }
}

/* Material turns the chapter navigation into a drawer below 76.25rem and
   already provides its own menu button there. On persistent-sidebar layouts,
   expose the companion control added in the header override. Hiding the
   primary sidebar removes it from the flex layout, so the article and its
   outline automatically recenter in the newly available reading space. */
.sidebar-toggle:not([hidden]) {
  display: none;
}
@media screen and (min-width: 76.25em) {
  .sidebar-toggle:not([hidden]) {
    display: inline-flex;
  }
  .sidebar-toggle svg {
    transition: transform 0.15s ease;
  }
  .sidebar-nav-collapsed .sidebar-toggle svg {
    transform: scaleX(-1);
  }
  .sidebar-nav-collapsed .md-sidebar--primary {
    display: none;
  }
}

/* ── 2. 左侧栏(书的目录树):白底、单线分隔 ─────────────────────
   结构(navigation.sections + navigation.indexes):
     <li class="md-nav__item--section md-nav__item--nested">
       <div class="md-nav__container md-nav__link">
         <a>章节标题(点击进入正文)</a>
         <label>折叠箭头(点击展开/收起)</label>
       </div>
       <nav>…配套实验…</nav>
     </li>
   桌面端的折叠行为由 nav-collapse.js 注入的 CSS 控制。 */

/* 宽度只在桌面端覆写:移动端抽屉的收起位置被 Material 硬编码为
   -12.1rem,改宽会让抽屉在收起时露出一条边(之前的 320px 全局
   覆写正是这个 bug 的来源)。 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 15.5rem;
    padding-left: 0.6rem;   /* 全宽布局下不让内容贴死视口左缘 */
    border-right: 1px solid var(--fenix-border);
  }
}

/* 侧边栏链接 —— 扁平、深蓝灰、无 hover 背景,只在 hover 时变墨绿 */
.md-nav__link {
  color: var(--fenix-ink) !important;
  font-size: 0.78rem;
  margin: 0;
  padding: 6px 0 6px 0;
  transition: color .12s;
}
.md-nav__link:hover,
.md-nav__link:hover * {
  color: var(--fenix-link-hover) !important;
}

/* 章节标题行:标题 <a> 占满剩余宽度,箭头 <label> 靠右。
   flex-start 让箭头对齐标题的第一行(居中时,折成两行的长标题
   会把箭头挤到两行中间,和单行章节高低不一);箭头在首行内的
   垂直居中由 nav-collapse.js 注入的 label padding 完成。 */
.md-sidebar--primary .md-nav__item--nested > .md-nav__container {
  display: flex;
  align-items: flex-start;
  padding: 0;
}

/* 章节之间稍微多一点呼吸感(Material 默认 1.25em) */
.md-sidebar--primary .md-nav__item--section {
  margin: 1.4em 0;
}
.md-sidebar--primary .md-nav__item--nested > .md-nav__container > a.md-nav__link {
  flex: 1;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* 当前页面对应的链接 —— 墨绿高亮 + 左侧 2px 指示条(VitePress 风) */
.md-sidebar--primary a.md-nav__link--active,
.md-sidebar--primary a.md-nav__link--active * {
  color: var(--fenix-link-hover) !important;
}
.md-sidebar--primary a.md-nav__link--active {
  border-left: 2px solid var(--fenix-link-hover);
  padding-left: 8px;
  margin-left: -10px;
}
/* 配套实验子项已有自己的 1px 从属线(下方 2b),不叠加指示条;
   子项规则特异性更高,border/padding 本就不会被覆盖,这里只还原
   margin,避免子项整体左移 10px。 */
.md-sidebar--primary .md-nav__item--nested .md-nav a.md-nav__link--active {
  margin-left: 0;
}

/* 展开后的子项(配套实验)—— 缩进一层、次级颜色、左侧细线示从属 */
.md-sidebar--primary .md-nav__item--nested .md-nav .md-nav__link {
  padding-left: 0.7rem;
  border-left: 1px solid var(--fenix-border);
  color: var(--fenix-ink-soft) !important;
  font-weight: 400;
}
.md-sidebar--primary .md-nav__item--nested .md-nav .md-nav__link:hover,
.md-sidebar--primary .md-nav__item--nested .md-nav .md-nav__link:hover * {
  color: var(--fenix-link-hover) !important;
}
.md-sidebar--primary .md-nav__item--nested .md-nav a.md-nav__link--active {
  border-left-color: var(--fenix-link-hover);
}

/* 侧栏顶部的 sticky 站点标题:压过下方内容,避免滚动时叠字;
   背景跟随 fenix 底色(否则暗色模式下露出 Material 默认底色的色块) */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    z-index: 3;
    background: var(--fenix-bg);
    box-shadow: none;
  }
}

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

/* ── 2b. 右侧栏(本页大纲):弱化存在感,阅读时的"你在这里" ──── */

/* 同上:宽度只在桌面端覆写(移动端的收起位置同样被硬编码)。
   13.5rem 让大部分中文标题单行放下,不再折成两行。 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary {
    width: 13.5rem;
    padding-right: 0.6rem;
  }
}
.md-nav--secondary .md-nav__title {
  color: var(--fenix-ink-mute) !important;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: none;
  background: transparent;
}
.md-nav--secondary .md-nav__link {
  color: var(--fenix-ink-soft) !important;
  font-size: 0.72rem;
  padding: 4px 0;
}
.md-nav--secondary .md-nav__link:hover,
.md-nav--secondary .md-nav__link:hover * {
  color: var(--fenix-link-hover) !important;
}
/* 当前阅读位置(toc.follow 跟随滚动) */
.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__link--active * {
  color: var(--fenix-link-hover) !important;
  font-weight: 500;
}
/* 大纲的层级缩进线 */
.md-nav--secondary .md-nav__list .md-nav__list {
  border-left: 1px solid var(--fenix-border);
  padding-left: 0.55rem;
}

/* ── 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;
  /* 让正文区背景与 header/侧栏一致(否则 Material slate 的默认底色
     略浅,sticky 站点标题处会露出一块深色矩形)。 */
  --md-default-bg-color: #0d1117;
  --md-default-fg-color: #e6edf3;
}
[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);
}

/* ── 12. Arabic / RTL edition ─────────────────────────────────── */

html[dir="rtl"] body {
  font-family: "Noto Naskh Arabic", Amiri, "Noto Sans Arabic",
               -apple-system, BlinkMacSystemFont, sans-serif;
}

html[dir="rtl"] .md-typeset {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .md-typeset pre,
html[dir="rtl"] .md-typeset code,
html[dir="rtl"] .md-typeset kbd,
html[dir="rtl"] .md-typeset samp,
html[dir="rtl"] .md-typeset .highlight,
html[dir="rtl"] .md-typeset .arithmatex,
html[dir="rtl"] .md-typeset .mermaid {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

html[dir="rtl"] .md-typeset blockquote {
  border-left: 0;
  border-right: 0.2rem solid var(--fenix-border);
  padding-left: 0;
  padding-right: 0.8rem;
}

html[dir="rtl"] .md-typeset ul,
html[dir="rtl"] .md-typeset ol {
  margin-left: 0;
  margin-right: 1.25em;
}

html[dir="rtl"] .md-typeset table:not([class]) th,
html[dir="rtl"] .md-typeset table:not([class]) td {
  text-align: right;
}