/* 本文件只放 Bootstrap 覆盖不到的东西。
   颜色一律走 Bootstrap 的 CSS 变量，不写死十六进制——换主题（比如深色模式）
   时才不用改这里。全站唯一写死颜色的地方是 app/code_style.py 的语法着色，
   因为那一套没有对应的 Bootstrap 变量。 */

/* --- 页面栏宽 ------------------------------------------------------------- */
/* 导航与正文共用 --page-width，两者始终对齐；长文页把它调宽以容纳侧边目录 */
.page-shell { max-width: var(--page-width, 44rem); }

/* --- 浮动目录 ------------------------------------------------------------- */

/* 浮在正文左边的留白里。
   用 fixed 而不是把它排进布局：它不占宽度，所以正文栏宽与其他页面一样是
   --page-width，导航栏不会因为进文章页而变宽；同时它跟着视口滚动，
   往下读多久都看得见。
   左偏移 = 居中正文栏左边的留白宽度 − 目录宽度。留白不够时由
   d-none d-xl-block 直接隐藏，max() 保证再窄也不会贴到屏幕边缘。 */
.toc-float {
  position: fixed;
  /* 让开吸顶的导航栏 */
  top: calc(var(--nav-height, 3.5rem) + .75rem);
  left: max(1rem, calc((100vw - var(--page-width, 44rem)) / 2 - 15rem));
  width: 13.5rem;
  max-height: calc(100vh - var(--nav-height, 3.5rem) - 1.5rem);
  overflow-y: auto;
  z-index: 1;   /* 低于导航栏（Bootstrap 的 sticky-top 是 1020） */
}

.toc {
  padding-right: .85rem;
  border-right: 2px solid var(--bs-border-color);
  font-size: .82rem;
}
.toc-title {
  margin-bottom: .4rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.toc a {
  display: block;
  padding: .12rem 0;
  line-height: 1.45;
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.toc a:hover { color: var(--bs-primary); }
.toc-l1 > a { font-weight: 600; color: var(--bs-body-color); }
.toc-l2 { padding-left: .7rem; }
.toc-l3 { padding-left: 1.4rem; }

/* 目录里的编号。与正文的 .h-num 同一个值，只是更淡一点——
   目录要能扫，不该抢正文的注意力。 */
.toc-num {
  display: inline-block;
  min-width: 1.9em;
  margin-right: .35em;
  color: var(--bs-tertiary-color, var(--bs-secondary-color));
  opacity: .75;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* 窄屏放不下侧栏，目录折叠在正文上方——总比整个消失好。
   侧栏本身是 d-none d-lg-block，视口窄于 992px 时它是不存在的。 */
.toc-inline {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  font-size: .85rem;
}
.toc-inline > summary {
  padding: .45rem .8rem;
  cursor: pointer;
  color: var(--bs-secondary-color);
  font-size: .82rem;
}
.toc-inline > ul { padding: 0 .8rem .6rem; }
.toc-inline a { color: var(--bs-secondary-color); text-decoration: none; display: block; padding: .1rem 0; }
.toc-inline a:hover { color: var(--bs-primary); }
.toc-inline .toc-l1 > a { font-weight: 600; color: var(--bs-body-color); }

/* --- 页脚 ----------------------------------------------------------------- */

.footer-body { font-size: .85rem; }
.footer-body p:last-child { margin-bottom: 0; }

/* --- 返回顶部 ------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.back-to-top:hover { color: var(--bs-primary); border-color: var(--bs-primary); }

/* --- 正文排版：紧凑 ------------------------------------------------------- */

.fooleng-body { font-size: .95rem; line-height: 1.7; }
.fooleng-body > :first-child { margin-top: 0; }
.fooleng-body p { margin-bottom: .8rem; }

/* 导航栏吸顶之后，从目录跳标题会停在导航栏底下。留出它的高度 + 一点余量。 */
.fooleng-body h1,
.fooleng-body h2,
.fooleng-body h3,
.fooleng-body h4,
.fooleng-body h5,
.fooleng-body h6 {
  scroll-margin-top: calc(var(--nav-height, 3.5rem) + .75rem);
}

/* 标题是一套比例，比 Bootstrap 默认的 h1–h6 紧凑一档：
   页面标题（post.html 的 .h4 = 1.5rem）> 正文 h1 1.3 > h2 1.15 > h3 1.05 > h4 .98 > h5/h6 .93。
   正文 h1 必须小于页面标题，否则文章里出现 h1 时会和标题打架。 */
.fooleng-body h1,
.fooleng-body h2,
.fooleng-body h3,
.fooleng-body h4,
.fooleng-body h5,
.fooleng-body h6 {
  margin-top: 1.6rem;
  margin-bottom: .5rem;
  font-weight: 600;
  line-height: 1.35;
}
.fooleng-body h1 { font-size: 1.3rem; margin-top: 1.8rem; }
.fooleng-body h2 { font-size: 1.15rem; }
.fooleng-body h3 { font-size: 1.05rem; margin-top: 1.3rem; }
.fooleng-body h4 { font-size: .98rem; margin-top: 1.1rem; }
.fooleng-body h5,
.fooleng-body h6 { font-size: .93rem; margin-top: 1rem; }

/* 标题自动编号。数字是服务端插进 DOM 的 span，所以能选中、能复制、能被搜到。 */
.h-num {
  margin-right: .45em;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.fooleng-body blockquote {
  margin: 1rem 0;
  padding: .4rem 1rem;
  border-left: .25rem solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}
.fooleng-body blockquote p:last-child { margin-bottom: 0; }

.fooleng-body table { width: 100%; margin: 1rem 0; font-size: .9rem; }
.fooleng-body table th,
.fooleng-body table td { border: 1px solid var(--bs-border-color); padding: .35rem .6rem; }
.fooleng-body table thead th { background: var(--bs-tertiary-bg); font-weight: 600; }

/* --- 代码：GitHub 那种观感，数值全部取自 Bootstrap 的变量 ------------------ */

.fooleng-body :not(pre) > code {
  padding: .2em .4em;
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-tertiary-bg);
  color: var(--bs-code-color);
  font-family: var(--bs-font-monospace);
  font-size: .875em;
}

.code-block {
  margin: 1rem 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  background: var(--bs-tertiary-bg);
}
.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .25rem .35rem .25rem .75rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.code-lang { font-size: .72rem; color: var(--bs-secondary-color); }
.code-copy {
  border: 1px solid transparent;
  background: none;
  border-radius: var(--bs-border-radius-sm);
  padding: .1rem .45rem;
  font-size: .75rem;
  color: var(--bs-secondary-color);
  cursor: pointer;
}
.code-copy:hover { border-color: var(--bs-border-color); color: var(--bs-body-color); }
.code-copy.is-done { color: var(--bs-success); border-color: currentColor; }

.fooleng-body .code-block pre {
  margin: 0;
  padding: .85rem 1rem;
  background: transparent;
  border-radius: 0;
  font-family: var(--bs-font-monospace);
  font-size: .85em;      /* GitHub 用 85% */
  line-height: 1.45;
}

/* shell 类语言的命令与参数在 Pygments 里是**裸文本**——BashLexer 把它们当
   Text 输出，而 Token.Text 在配色里没有类，于是一个 span 都没有，整块读起来
   和正文同色、不像代码。给这类块一个基础色，命令就显出来了；
   注释、字符串、关键字仍走各自 span 的颜色（span 自己的颜色优先）。 */
.fooleng-body pre code[class*="language-sh"],
.fooleng-body pre code[class*="language-bash"],
.fooleng-body pre code[class*="language-zsh"],
.fooleng-body pre code[class*="language-shell"],
.fooleng-body pre code[class*="language-console"] {
  color: #8250df;
}

/* --- Mermaid ------------------------------------------------------------- */

/* Mermaid 把 <pre class="mermaid"> 换成 SVG。换之前那一瞬间会露出源码，
   先让它别闪；画好之后宽度交给 SVG 自己。 */
.fooleng-body pre.mermaid {
  margin: 1.25rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  font-family: var(--bs-font-monospace);
  font-size: .85em;
  overflow-x: auto;
}
.fooleng-body pre.mermaid[data-processed] {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: center;
}
.fooleng-body pre.mermaid svg { max-width: 100%; height: auto; }
/* 正文里手写的裸 <pre>（没走围栏语法的那种）也给同一套观感 */
.fooleng-body > pre {
  padding: .85rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  font-family: var(--bs-font-monospace);
  font-size: .85em;
  overflow-x: auto;
}

/* --- 公式：与代码块同一种框，都是「独立成块的展示物」 ---------------------- */

.math-block {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  overflow-x: auto;
}

/* --- 图片 ---------------------------------------------------------------- */

/* 限制高度，免得一张长截图占满好几屏；点击放大交给 .lightbox */
.fooleng-body img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 26rem;
  margin: .9rem auto;
  border-radius: var(--bs-border-radius);
  cursor: zoom-in;
}

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: 92vh;
  margin: 0 auto;
  border-radius: var(--bs-border-radius);
  cursor: zoom-out;
}

/* --- 文件管理页的缩略图 ---------------------------------------------------- */

.file-thumb {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-tertiary-bg);
}
img.file-thumb { object-fit: cover; cursor: zoom-in; }
.file-thumb-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}

/* --- 非图片文件的下载卡片 -------------------------------------------------- */

/* 用 inline-block 是为了能安全地嵌在段落里 */
.fooleng-file {
  display: inline-flex; align-items: center; gap: .6rem;
  max-width: 30rem; margin: .5rem 0; padding: .5rem .8rem;
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  text-decoration: none; color: inherit; background: var(--bs-body-bg);
  font-size: .9rem;
}
.fooleng-file:hover { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.fooleng-file-ext {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--bs-danger); min-width: 2.2rem; text-align: center;
}
.fooleng-file-body { display: flex; flex-direction: column; line-height: 1.3; }
.fooleng-file-name { font-weight: 500; }
.fooleng-file-size { font-size: .78rem; color: var(--bs-secondary-color); }
.fooleng-file-action { color: var(--bs-primary); font-size: .85rem; white-space: nowrap; }

/* --- 编辑器 --------------------------------------------------------------- */

/* CodeMirror 与阅读页的代码块同一套观感，编辑时看到的就是发布后的样子 */
/* 拖拽带：一条窄带，不是大虚线框——它要一直待在编辑框上方看得见的地方 */
.dropzone {
  display: flex;
  align-items: center;
  padding: .35rem .7rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color);
  font-size: .82rem;
}
.dropzone.is-over { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); }

/* 高度由 editor.html 里的 fitEditorHeight 按内容算，这里给的是 JS 失效时的兜底 */
.CodeMirror {
  height: auto;
  min-height: 24rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-font-monospace);
  font-size: .875rem;
  line-height: 1.6;
  padding: .4rem 0;
}
.CodeMirror-focused { border-color: var(--bs-primary); }
.CodeMirror-cursor { border-left: 2px solid var(--bs-body-color); }
.CodeMirror-selected { background: var(--bs-primary-bg-subtle) !important; }

/* markdown token 配色，对齐 GitHub 的排版语义：标题重、标记符号淡 */
.cm-s-default .cm-header { color: var(--bs-body-color); font-weight: 700; }
.cm-s-default .cm-formatting { color: var(--bs-secondary-color); opacity: .65; }
.cm-s-default .cm-link { color: var(--bs-primary); }
.cm-s-default .cm-url { color: var(--bs-secondary-color); }
.cm-s-default .cm-comment { color: var(--bs-secondary-color); font-style: italic; }
.cm-s-default .cm-quote { color: var(--bs-success); }
.cm-s-default .cm-strong { font-weight: 700; }