/* =========================================================
   媒体与图表：导航搜索文字描影（补充 31 尾段）/ mermaid 查看器（补充 47）。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   
   ------------------------------------------------------------------
   需求：让导航里的「搜索」两个字和旁边一级菜单一样有黑色描影。

    前一版为什么错：
     我把 `#nav .nav-search-input` 直接加进给一级菜单上色/描影的那两条大清单里，
     于是输入框拿到了它们的 `0 2px 14px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.45)`。
     结果「搜索」后面出现一块**硬边深色矩形**（放大镜图标和「首页」都是柔和光晕，只有它是个方块）。
     原因：**<input> 自带 `overflow: clip`（UA 样式），它会把内部文本的 text-shadow 裁在自己的盒子里。**
     输入框只有 34×22，而「搜索」两个字就占了 31px 宽 —— 14px 的模糊几乎全被切掉，
     切口是直角，于是"描影"变成"色块"。
     
       14px → 明显方块；8px → 还有方块；4px → 干净；3px / 2px → 干净。
     
      别用 `filter: drop-shadow()` 代替：它按盒子轮廓做投影，反而更像"长方形"。

   
     柔光由「补充 31b」的 <label> 绘制：label 是普通元素，正常继承一级菜单的 14px 柔光，
     不会被输入框的 overflow 裁掉。占位符完全透明后，这条描影只作用于输入中的文字。
      别把 label 也塞进这条规则 —— 它会因此失去那层柔光。
      硬约束仍然成立：**输入框这个盒子放不下 >4px 的描影**，别往 .nav-search-input 上写宽描影。

   
     **<input> 不继承祖先的 text-shadow**（描影只写父层 → input 仍 none；写在 input 自身 → placeholder 跟随）。
     这就是"必须把文字搬出输入框"的根本原因。
   ========================================================= */
html #page-header:not(.nav-fixed):not(.not-top-img) #nav #search-button .nav-search-input {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* =========================================================
   补充 47：mermaid 图表查看器（点开放大阅读）
   ------------------------------------------------------------------
   
   正文栏只有 ~780px，mermaid 按自然宽度渲染（svg 上写死的 max-width），
   稍大的流程图在正文里就是糊的一团；主题的 zoom_pan 只能在原位缩放，没有整屏入口。
   交互与样式故意和 `/js/img-viewer.js`（.zx-iv）保持同一套观感：
   点开遮罩 → × / Esc / 点图区外的遮罩 关闭，打开期间锁住页面滚动。
   脚本：/js/mermaid-viewer.js

   
      图区现在是可拖可缩的交互区（滚轮缩放、按住拖动、双击复位），
      点一下就关会很难用，轻微拖动也会被算成一次点击。关闭改用 × / Esc / 点图区外的遮罩。

    stage 给的是**浅色底**：mermaid 的 default 主题是浅色底画的，
      放到深色遮罩上直接看会发灰；深色主题下换成站内卡片色（主题的 dark 主题本身线条是浅色）。
    尺寸由 JS 算（按视口适应，但不小于原图自然尺寸、上限 2 倍），
      所以这里只管 stage 的滚动，别给 svg 写 width/height !important，会把 JS 的赋值顶掉。
      缩放是改 svg 的 width/height（不是 transform）—— transform 不撑开滚动区，放大了没法拖到边缘。

   ---------------------------------------------------------
   
   ---------------------------------------------------------
   
   和右上角箭头的 svg 图标，大小改小一点，并且改成流程图无法选中文字，没有打开时无法缩放，
   只能通过右上角按钮缩放」。落到这里的是三件事（JS 见 /js/mermaid-viewer.js）：
     · `.zx-mm-bar`  —— 右上角那条工具条，三个按钮：放大镜+ / 放大镜− / 展开
     · `.zx-mm-box`  —— svg 的外层容器；**放大之后它才变成滚动容器**（`.zx-mm-scroll`），
        这点很关键：工具条是绝对定位在 `.mermaid-wrap` 上的，如果让 `.mermaid-wrap` 自己变成
        滚动容器，工具条会跟着内容一起滚走（每放大一次就要找一次按钮）。
     · `.zx-mm-btn`  —— 新加的两个缩放按钮，尺寸小一号（34×25 / 图标 16px → 26×22 / 图标 13px，
        
        。
        放大/缩小带 0.22s 过渡（「放大缩小加上动画」），放大后的容器**不显示滚动条**
        （「不要有蓝色的滚动条」——全站滚动条都是主题那条蓝色 thumb），平移改按住拖动。
    `.mermaid-open-btn` 的定位要**覆盖成 static**：主题写的是 `.mermaid-wrap .mermaid-open-btn
      { position:absolute; top:8px; right:8px }`，现在它被移进工具条、由工具条统一定位；
      不覆盖的话它会从工具条里"飞"到图区的角落，和另外两个重叠。
   ========================================================= */
#article-container .mermaid-wrap {
    /* 与正文图片一致：可点放大（内置 zoom-in，见上面「正文图片给出可点提示」的来回记录） */
    cursor: zoom-in;
    /*
       否则按住一拖就刷出一片蓝，看着像"能选"，其实图里没有可复制的内容 */
    -webkit-user-select: none;
    user-select: none;
    /*
       大 SVG + 全屏背景 canvas 同屏时，默认会和整列正文一起重绘，滚动经过时容易整列闪一下；
       单独成层后重绘被隔离在这一层里，是标准且无副作用的缓解手段（不改布局、不裁剪内容）。 */
    transform: translateZ(0);
}

/* 工具条：[放大镜+][放大镜−][展开] */
#article-container .mermaid-wrap .zx-mm-bar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
}

/*
   
   所以现在没有底色，只有一枚灰图标；悬停只把图标加深，不再加底色、也不再位移。 */
#article-container .mermaid-wrap .zx-mm-btn,
#article-container .mermaid-wrap .mermaid-open-btn {
    position: static; /* ← 见上面 ：把主题的 absolute 顶掉，交给工具条排布 */
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 20%; /* 不显示了，但留着无妨（万一以后加回底色） */
    background: none;
    color: #8a94a0;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease;
}

#article-container .mermaid-wrap .zx-mm-btn svg,
#article-container .mermaid-wrap .mermaid-open-btn svg {
    width: 13px;
    height: 13px;
    display: block;
}

#article-container .mermaid-wrap .zx-mm-btn:hover,
#article-container .mermaid-wrap .mermaid-open-btn:hover,
#article-container .mermaid-wrap .zx-mm-btn:focus-visible,
#article-container .mermaid-wrap .mermaid-open-btn:focus-visible {
    outline: none;
    background: none;
    color: #4c5560;
}

html[data-theme="dark"] #article-container .mermaid-wrap .zx-mm-btn,
html[data-theme="dark"] #article-container .mermaid-wrap .mermaid-open-btn {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] #article-container .mermaid-wrap .zx-mm-btn:hover,
html[data-theme="dark"] #article-container .mermaid-wrap .mermaid-open-btn:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* 到边界的那个按钮点不动了（CSS 见 JS 的 updateBtnState） */
#article-container .mermaid-wrap .zx-mm-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* svg 外层容器：平时就是个普通块（svg 仍是 inline，跟着主题的 text-align:center 居中，
   —— 这一条是刻意的：改成 display:block 会连带去掉 svg 行基线下面那 ~10px 空隙，
      改成 block 会让所有含流程图的文章整体矮 10px，故保持 inline。） */
#article-container .mermaid-wrap .zx-mm-box {
    display: block;
}

/*
   改的是 svg 内联的 width/height，所以直接对这两条加 transition 就能播。
    只给"图区里那个 svg"加，阅读器里那份克隆体（.zx-mv-stage svg）不加 ——
      那边是滚轮连续缩放，加了过渡会拖泥带水。 */
#article-container .mermaid-wrap .zx-mm-box svg {
    transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), height 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 放大之后：这里是滚动容器 —— 滚轮在图上滚的是"看图的哪一部分"，不是滚整页 */
#article-container .mermaid-wrap .zx-mm-box.zx-mm-scroll {
    max-height: 78vh;
    /*
       auto 时滚轮会滚这个容器（平移图）= 反馈；hidden 之后滚轮**碰不到图**，
       事件照常冒泡、页面照常滚。平移只剩一种入口：按住拖动（JS 的 bindPan 写 scrollLeft/Top，
       overflow:hidden 的元素照样可以程序化滚动）。 */
    overflow: hidden;
    /*  必须左对齐：放大的图比容器宽，居中会让**左侧那半截永远滚不到**
       （这是"居中 + 溢出"的经典坑）。1 倍时仍是继承来的居中，位置和改造前一致。 */
    text-align: left;
    cursor: grab;
    /* 滚动条彻底不存在了（连隐藏都省了）；这条保留是给"万一改回 auto"的兜底 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#article-container .mermaid-wrap .zx-mm-box.zx-mm-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* 拖动中 */
#article-container .mermaid-wrap .zx-mm-box.zx-mm-grabbing {
    cursor: grabbing;
}

.zx-mv {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zx-mv.show {
    opacity: 1;
}

.zx-mv-stage {
    max-width: 94vw;
    max-height: 88vh;
    overflow: auto;
    padding: 18px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
    /* 可按住拖动看大图（JS 见 mermaid-viewer.js 的 bindZoomPan） */
    cursor: grab;
    /* 同一份图，这里也不给选中（与正文里的图区口径一致，见「补充 47」的工具条那段） */
    -webkit-user-select: none;
    user-select: none;
}

/* 拖动中 */
.zx-mv-stage.zx-mv-grabbing {
    cursor: grabbing;
}

html[data-theme="dark"] .zx-mv-stage {
    background: var(--zx-d-card);
}

.zx-mv-stage svg {
    display: block;
    margin: 0 auto;
}

/*
    为什么强调"不要"：主题 `*::-webkit-scrollbar-thumb { background: var(--scrollbar-color) }`，
      --scrollbar-color = 主题色 #49b1f5，全站滚动条都是那条 5px 蓝色 thumb。
   · 图片阅读器（.zx-iv，见「补充 45」）：图被 max-width/height 卡住，正常不该有滚动条，这里是兜底
     —— 无头浏览器复现不出来（无头强制用悬浮滚动条、量到宽度 0），真机上主题那套经典滚动条才会现形。
   · 图表阅读器（.zx-mv-stage）：本来就是 overflow:auto 的舞台，但它能**按住拖动平移**（见
     mermaid-viewer.js 的 bindZoomPan），不需要滚动条。
   · 另外照抄主题自己的做法（`html.with-fancybox{--scrollbar-color:transparent}`）：
     阅读器打开期间把滚动条 thumb 设成透明 —— 万一某个浏览器仍把页面滚动条画出来，它也是隐形的。 */
.zx-iv,
.zx-iv *,
.zx-mv-stage {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zx-iv::-webkit-scrollbar,
.zx-iv *::-webkit-scrollbar,
.zx-mv-stage::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html.zx-iv-lock,
html.zx-mv-lock {
    --scrollbar-color: transparent;
}

.zx-mv-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.zx-mv-close:hover {
    background: var(--zx-d-line);
}

.zx-mv-close:active {
    transform: scale(0.92);
}

/* 打开期间锁住页面滚动（滚动条宽度由 JS 补在 html 的 padding-right 上，防横跳） */
html.zx-mv-lock {
    overflow: hidden;
}

@media (max-width: 768px) {
    .zx-mv-stage {
        max-width: 96vw;
        max-height: 84vh;
        padding: 10px;
    }
    .zx-mv-close {
        top: 10px;
        right: 10px;
    }
}