/* ==========================================================================
   Markdown 增强：Mermaid 图表 / LaTeX 公式 / 图片大图预览
   --------------------------------------------------------------------------
   与 static/markdown-enhance.js 配套：本文件只负责外观，
   对应的 .mermaid / .math-block / .img-lightbox 元素由脚本按需生成。
   凡是渲染 Markdown 的页面都通过 _markdown_css.html 一并引入
   （与 markdown.css 成对），无需单独记得引这一份。
   同样只管结构，颜色引用 theme.css 的变量，亮色 / 暗色共用一份。
   依赖：theme.css 需先加载
   ========================================================================== */

/* ---------- Mermaid 图表 ---------- */
/* 渲染前这里装的是源码文本，渲染后 mermaid 会把内容替换成 <svg> */
.mermaid {
    margin: 1.25rem 0;
    text-align: center;
    /* 图可能比正文宽，让它自己横向滚动，而不是把整页撑出滚动条。
       纵向同理要给点余量：overflow-x 一设，overflow-y 的 visible 会被算成
       auto，SVG 里稍微出格一点的文字（如下方的节点标签）就会被裁 */
    overflow-x: auto;
    padding: 0.25em 0;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* CDN 不可用时的降级外观：退成代码块，源码仍然可读 */
.mermaid.is-unavailable {
    padding: 1rem;
    border: 1px solid var(--pre-border);
    border-radius: 6px;
    background: var(--bg-subtle);
    text-align: left;
    color: var(--text);
    font-family: "SF Mono", Consolas, Monaco, monospace;
    font-size: 0.875em;
    line-height: 1.5;
    /* 源码里的换行要保留，否则流程图就没法照着读了 */
    white-space: pre;
}

/* ---------- 数学公式 ---------- */
/* 长公式（比如矩阵）会比正文宽，允许它自己横向滚动 */
.math-block {
    margin: 0.75rem 0;
    overflow-x: auto;
    /* 纵向要留出余量：KaTeX 的 \frac / \sqrt / \sum 这类结构有一部分笔画
       是画在行盒之外的（靠 vlist 的偏移叠出来），超出的量很小，
       但裁剪就正好切在盒子边缘上 —— 典型症状就是「分子的上半截没了」。

       这里不能写 overflow-y: visible：CSS 规定另一个轴是 auto/scroll 时，
       visible 会被算成 auto，照样裁剪。所以改用上下内边距把空间让出来：
       裁剪发生在 padding 盒边缘，落进 padding 的那部分笔画是看得见的。

       移动端更容易踩到：iOS Safari 会把布局吸附到设备像素（1px 的取整差异
       就可能让笔画越过盒子边缘），而桌面端同样的公式往往刚好在里面，
       于是表现为「同一个 Safari，手机上被切、电脑上正常」。 */
    overflow-y: hidden;
    padding: 0.6em 0;
}

.math-block .katex-display {
    margin: 0;
}

/* KaTeX 不可用时的降级外观 */
.math-block.is-unavailable {
    font-family: "SF Mono", Consolas, Monaco, monospace;
    white-space: pre-wrap;
}

/* ==========================================================================
   图片大图预览
   --------------------------------------------------------------------------
   结构由 markdown-enhance.js 动态创建，这里只负责外观。
   ========================================================================== */
.img-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, .88);
}

/* hidden 属性在设置了 display 之后会失效，必须显式关掉 */
.img-lightbox[hidden] {
    display: none;
}

.img-lightbox__bar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    color: #f0f0f0;
}

.img-lightbox__btn {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #f0f0f0;
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.img-lightbox__btn:hover {
    background: rgba(255, 255, 255, .18);
}

.img-lightbox__scale {
    min-width: 56px;
    text-align: center;
    font-size: 0.8125rem;
    color: #d8d8d8;
}

.img-lightbox__stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 放大后超出可视区的部分要裁掉，不然会顶开页面 */
    overflow: hidden;
}

.img-lightbox__img {
    /* 尺寸完全交给脚本用 transform 控制：
       这里若再加 max-width/max-height，会和 transform 的缩放叠加，
       导致大图被缩小两次。flex: none 是为了不让 flex 自动把它压小。 */
    flex: none;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    cursor: grab;
    /* 触屏上交给脚本处理手势，避免浏览器抢去做页面滚动 */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.img-lightbox__img.is-dragging {
    cursor: grabbing;
}

/* 预览打开时锁住页面滚动，否则滚轮缩放会带着正文一起动 */
body.is-lightbox-open {
    overflow: hidden;
}