/* 站点自定义样式：向 OI Wiki 的阅读体验靠拢 */

/* 行内与行间公式的排版微调 */
.md-typeset .arithmatex {
  overflow-x: auto;
  overflow-y: hidden;
}

/* 行间公式左右留白，窄屏可横向滚动而不撑破版面 */
.md-typeset .MathJax,
.md-typeset mjx-container[display="true"],
.md-typeset .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0;
}

/* ------------------------------------------------------------------
   行间公式紧贴上下文
   pymdownx.arithmatex 要求 $$...$$ 自成一段，源码里公式前后必须空行。
   若不做处理，KaTeX 自带的 1em 外边距会与相邻段落的边距叠加，公式
   看起来"浮"在中间、和上下文脱节。这里把两部分间距都压小，让公式
   紧贴上下文字（缩进关系仍由正文的缩进体现）。
   ------------------------------------------------------------------ */
.md-typeset .arithmatex {
  margin: 0.45em 0;
}

/* KaTeX 的行间公式自己还有一层外边距，一并压掉 */
.md-typeset .arithmatex .katex-display,
.md-typeset .arithmatex .MathJax {
  margin: 0.15em 0;
}

/* 紧挨着公式的段落：把它朝向公式那一侧的边距也压小，
   否则外边距折叠后仍会留下约 1em 的空当 */
.md-typeset p:has(+ .arithmatex),
.md-typeset p:has(+ .admonition .arithmatex) {
  margin-bottom: 0.3em;
}

.md-typeset .arithmatex + p {
  margin-top: 0.3em;
}

/* 定义、定理一类的提示框标题加粗，便于扫读 */
.md-typeset .admonition > .admonition-title {
  font-weight: 600;
}

/* 表格更紧凑，且允许宽表横向滚动 */
.md-typeset table:not([class]) {
  font-size: 0.75rem;
  display: block;
  overflow-x: auto;
}

/* 正文行距略增，中文长段落更易读 */
.md-typeset {
  line-height: 1.75;
}

/* 插图：居中、限宽，图注用小字 */
.md-typeset figure {
  margin: 1.2rem 0;
  text-align: center;
}

.md-typeset figure img {
  display: inline-block;
  max-width: min(100%, 34rem);
  height: auto;
}

.md-typeset figcaption {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* ------------------------------------------------------------------
   顶栏配色
   浅色模式：#D9E2F9（浅蓝）；深色模式：#222E4E（同色相的深海军蓝）。
   Material 拿 --md-primary-fg-color 当顶栏底色、--md-primary-bg-color 当
   其上的文字色——底色一换，文字必须跟着换，否则默认的白字/深字会看不见。
   另需注意浅色模式下 --md-typeset-a-color 就等于 var(--md-primary-fg-color)：
   不单独钉住，正文里的链接会一起变成 #D9E2F9，在白底上基本读不出来。
   选择器带上 :root 是因为 <html> 上的 data-md-color-scheme 由 JS 写入，
   首屏（或禁用 JS 时）还没有这个属性。
   ------------------------------------------------------------------ */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #d9e2f9;
  --md-primary-fg-color--light: #e8eefc;
  --md-primary-fg-color--dark: #bccdef;
  --md-primary-bg-color: #1b2a4a;
  --md-primary-bg-color--light: rgba(27, 42, 74, 0.82);
  --md-typeset-a-color: #4051b5; /* 正文链接维持原来的 indigo */
}

/* 深色模式：换成同色相的深海军蓝，文字用近乎中性的白（偏灰蓝会显脏） */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #222e4e;
  --md-primary-fg-color--light: #2b3757;
  --md-primary-fg-color--dark: #1a2340;
  --md-primary-bg-color: #eef2fa;
  --md-primary-bg-color--light: rgba(238, 242, 250, 0.7);
  --md-typeset-a-color: #5488e8; /* Material 给暗背景配的链接色，保持不动 */
}

/* 按钮也吃 --md-primary-*，一并钉回 indigo，免得以后用到时是浅色 */
.md-typeset .md-button {
  color: #4051b5;
  border-color: #4051b5;
}

.md-typeset .md-button--primary {
  background-color: #4051b5;
  border-color: #4051b5;
  color: #fff;
}

/* 桌面端搜索框的内嵌底色要跟顶栏配套：
   浅色顶栏上不能用 Material 默认的 rgba(0,0,0,.26)（会糊成一块灰），
   深色顶栏上则改用淡淡的白，而不是让浅色规则继续生效。 */
@media screen and (min-width: 60em) {
  :root .md-search__form,
  [data-md-color-scheme="default"] .md-search__form {
    background-color: rgba(27, 42, 74, 0.08);
  }

  :root .md-search__form:hover,
  [data-md-color-scheme="default"] .md-search__form:hover {
    background-color: rgba(27, 42, 74, 0.14);
  }

  [data-md-color-scheme="slate"] .md-search__form {
    background-color: rgba(238, 242, 250, 0.12);
  }

  [data-md-color-scheme="slate"] .md-search__form:hover {
    background-color: rgba(238, 242, 250, 0.18);
  }
}

/* ------------------------------------------------------------------
   回到顶部时不显示顶栏阴影
   Material 自己用 .md-header--shadow 控制阴影，判断条件是
   "滚动量 >= 顶栏高度"，逻辑上到顶就该移除；但那条链路是异步管线
   驱动的（带 debounce），快速滚回顶部时可能慢一拍、留下残影。
   这里用一个小脚本按 scrollY 直接给 <html> 加 .at-top 钉死。
   阴影值写成与 Material 原声明同样的两段式，长度一致才能平滑过渡。
   ------------------------------------------------------------------ */
html.at-top .md-header,
html.at-top .md-tabs {
  box-shadow: 0 0 0.2rem #0000, 0 0.2rem 0.4rem #0000;
}

/* ------------------------------------------------------------------
   浅色模式下顶栏底部的发丝描边
   顶栏是浅蓝 #D9E2F9、页面是白色，两者对比度只有 1.30，交界几乎看不出；
   而滚到顶部时阴影又被去掉（见上面的 .at-top），所以补一条描边把边界
   交代清楚。描边取 #C0CDE8：对顶栏 1.23、对页面 1.60，看得见但不抢眼。
   开了顶部标签页后，整条顶栏其实是 .md-header + .md-tabs 两截（两者是
   兄弟节点），描边要落在最下面那一截——宽屏落在标签栏，窄屏标签栏被
   Material 隐藏（断点 76.234375em），就退回标题栏，避免中间多出一条线。
   ------------------------------------------------------------------ */
.md-header,
.md-tabs {
  border-bottom: 1px solid #c0cde8;
}

/* 深色模式的顶栏本身就是深色，与页面已有足够区分，不需要描边 */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  border-bottom: none;
}

@media screen and (min-width: 76.234375em) {
  .md-header {
    border-bottom: none;
  }
}

/* ------------------------------------------------------------------
   顶栏右上角的个人入口（头像 + 昵称）
   模板覆盖见 overrides/partials/source.html：Material 原本在这里渲染
   「GitHub 图标 + 仓库名」，现在换成 GitHub 头像和「天澜微雨」。
   这个片段还被窄屏抽屉顶部的 .md-nav__source 引用，所以下面的规则
   在两处同时生效。

   .md-source__icon 是 Material 按 1.2rem 的 svg 设计的盒子：宽 2rem、高 2.4rem
   （= 顶栏高度），svg 靠 margin 摆在 x = 0.6rem、垂直居中处。昵称的位置不受
   这个盒子影响——Material 用 .md-source__icon + .md-source__repository 把名字
   的起点钉在 x = 2rem（盒子的右边缘）。所以头像只要按盒子摆位即可：
     左右：取 0.4rem，头像占 0.4 ~ 2rem，右边缘正好落在名字起点上，不重叠
           （1.6rem 的头像若按盒子居中会是 0.2 ~ 1.8rem，离名字稍远一点）；
     上下：盒子高 2.4rem，(2.4 - 1.6) / 2 = 0.4rem，垂直居中。
   盒子的宽度保持 2rem 不动，名字的起始位置就与原来完全一致。
   ------------------------------------------------------------------ */
.md-source__icon img {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  object-fit: cover;
  /* 用逻辑属性写左右外边距，RTL 下自动镜像（站内目前只有 ltr） */
  margin: 0.4rem 0 0;
  margin-inline-start: 0.4rem;
  /* 环形描边而不是 border：不占布局，头像尺寸不受影响。
     中性灰在浅色顶栏（#D9E2F9 / 抽屉的 #BCCDEF）和深色顶栏（#222E4E）
     上都看得见，不用分配色方案各写一套。 */
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.35);
}

/* 昵称是中文，Material 给仓库名定的 0.65rem（窄屏约 10px、桌面端约 13px）
   在这个字号下笔画容易糊，抬到 0.7rem；比顶栏标题小一号，仍是次要信息的观感。 */
.md-source__repository {
  font-size: 0.7rem;
}

/* ------------------------------------------------------------------
   顶栏的"收起 / 展开左侧目录"按钮
   Material 没有桌面端的侧栏折叠功能：移动端那个汉堡是抽屉，由 __drawer
   复选框驱动，宽屏下相关 CSS 根本不生效。所以按钮由 sidebar-toggle.js
   注入，折叠状态记在 <html> 上的 .hd-sidebar-collapsed。
   .md-main__inner 本身就是 flex 容器、.md-content 是 flex-grow:1，
   因此只要把侧栏移出流，正文会自动补位。
   ------------------------------------------------------------------ */

/* 权重取 (0,2,0) 与 Material 的 .md-header__button:not([hidden]) 打平，
   靠"后加载"取胜——否则按钮在窄屏也会冒出来，和汉堡重复 */
.md-header__button.hd-sidebar-toggle {
  background: none;
  border: 0;
  display: none; /* 窄屏用汉堡抽屉即可 */
}

/* 两个 chevron 只显示一个；权重必须高过 Material 的 .md-icon svg（0,1,1） */
.hd-sidebar-toggle svg.hd-toggle-icon--expand {
  display: none;
}

html.hd-sidebar-collapsed .hd-sidebar-toggle svg.hd-toggle-icon--collapse {
  display: none;
}

html.hd-sidebar-collapsed .hd-sidebar-toggle svg.hd-toggle-icon--expand {
  display: block;
}

/* 折叠规则整体限定在宽屏：窄屏下这条侧栏是抽屉，若 .hd-sidebar-collapsed
   一直留着（例如在宽屏折叠后把窗口拉窄），抽屉会被一并藏掉 */
@media screen and (min-width: 76.25em) {
  .md-header__button.hd-sidebar-toggle {
    display: inline-block;
  }

  /* 收起时用负外边距把侧栏"抽"出去：flex 项的**外**尺寸变成 0，
     正文（.md-content 是 flex-grow:1）自然补位；侧栏本身的盒子仍在，
     内容不会被动裁切，只是整体左移、淡出。
     注意不要在这里加 overflow（hidden/clip 都不行）：Material 的侧栏在
     桌面端依赖内容正常溢出（内部还有一层 overflow-y:auto 的滚动层），
     一裁就会把整棵导航树裁没。
     时长要和 sidebar-toggle.js 里的 ANIM_MS 保持一致。 */
  .md-sidebar--primary {
    transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s linear;
  }

  html.hd-sidebar-collapsed .md-sidebar--primary {
    margin-left: -12.1rem;
    opacity: 0;
    pointer-events: none;
  }
}

/* ------------------------------------------------------------------
   右侧"本页目录"加宽
   Material 把两条侧栏都钉死在 12.1rem，中文标题较长时（"代数闭不等于极大：
   可数的代数闭子域 ℚ̄"）会在目录里折成两三行，看着很碎。
   这里在宽屏下把右侧目录加宽到 16.5rem，同时把 .md-grid 的上限从 61rem
   提到 65.4rem，增量都是 4.4rem。
   ------------------------------------------------------------------ */
@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary {
    width: 16.5rem;
  }

  /* grid 的左边缘必须钉住，不能再用 Material 的 auto 外边距居中：
     那样 4.4rem 的增量会被左右平分，而左栏仍是 12.1rem、右栏变成
     16.5rem，正文列整体偏左 (16.5 - 12.1) / 2 = 2.2rem——左侧目录一
     展开就看得出来。下面按宽度分两段钉左边缘，让增量只落在右侧。
     本段（76.25em ~ 87.25em）空间不够，grid 到不了 65.4rem 上限，
     于是 正文列中心 = vw/2 + (L - 4.4rem) / 2，令它等于 vw/2 得
     L = 4.4rem（代价是正文列被压窄一点）。 */
  .md-grid {
    max-width: 65.4rem;
    margin-left: 4.4rem;
    margin-right: auto;
  }
}

/* 够宽时（>= 87.25em = 1396px）：grid 能达到 65.4rem 上限。把左边缘放在
   "原来的 61rem 盒子居中"时的位置上，于是左栏、正文列都停在原地（正文列
   本来就居中），只有目录向右长出去 4.4rem。
   4.4rem 与 (100% - 61rem) / 2 在 1396px 处正好相等，两段是连续的。 */
@media screen and (min-width: 87.25em) {
  .md-grid {
    margin-left: calc((100% - 61rem) / 2);
  }
}

/* ------------------------------------------------------------------
   上面那条 width 只管盒子，文字仍会在 230px 处折行！
   WebKit 内核（Chrome / Safari）下 Material 还有一条 padding：
       [dir=ltr] .md-sidebar__inner { padding-right: calc(100% - 11.5rem) }
   它把侧栏的**内容盒**钉死在 11.5rem（= 230px），多出来的宽度全被算成
   内边距（那是给经典滚动条留的余地，两条侧栏都被这条规则管着）。
   所以必须把二级侧栏的这条 padding 一起改掉，目录文字才会用上新宽度；
   否则只是盒子变宽、折行位置纹丝不动。这里保留 Material 的 0.6rem 余量，
   即内容盒 = 16.5 - 0.6 = 15.9rem。
   左栏（一级侧栏）仍沿用 Material 原值，不受影响。
   ------------------------------------------------------------------ */
@media screen and (min-width: 76.25em) {
  @supports selector(::-webkit-scrollbar) {
    [dir="ltr"] .md-sidebar--secondary .md-sidebar__inner {
      padding-right: calc(100% - 15.9rem);
    }

    [dir="rtl"] .md-sidebar--secondary .md-sidebar__inner {
      padding-left: calc(100% - 15.9rem);
    }
  }
}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .md-sidebar--primary {
    transition: none;
  }
}