/* ================================================================
 * md-enhance.css — 图形与查看器的共享样式（与 md-core.js / md-enhance.js 同一套）
 *
 * 两端都引这一份，换皮只改变量：
 *   · md 分享（阅读器配色）→ 在 md/styles.css 里映射变量
 *   · 志睿源官网（官网品牌色）→ 在 zry/css/base.css 里映射变量
 *
 * 本文件只放**两端一致**的骨架（图形块、角标、查看器、占位）。
 * 正文排版（字号/间距/表格配色）由各端自己的 CSS 控制，互不污染。
 *
 * 变量一律写成 var(--x, 回退值)，即使某一端没映射也不会失去样式。
 * ================================================================ */

/* ── 未水合的图形占位块：没有 JS 时也要能看（显示源码） ───────── */
.md-graph {
    margin: 1.2em 0;
    border: 1px solid var(--mdg-border, #e2e6ec);
    border-radius: var(--mdg-radius, 8px);
    overflow: hidden;
}

.md-graph__fallback {
    margin: 0;
    border: 0;
    border-radius: 0;
    max-height: 420px;
    overflow: auto;
}

/* ── 图形块（清洗后的内嵌 SVG） ───────────────────────────── */
.graph-block {
    position: relative;
    margin: 1.2em 0;
    padding: 10px;
    border: 1px solid var(--mdg-border, #e2e6ec);
    border-radius: var(--mdg-radius, 8px);
    background: var(--mdg-bg, #ffffff);
    cursor: zoom-in;
}

.graph-block:hover {
    border-color: var(--mdg-border-hover, #c3cbd6);
}

.graph-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 内嵌图形统一压到容器宽度，等比缩放（viewBox 已在渲染前补齐） */
.graph-svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.graph-warn {
    margin-bottom: 6px;
    padding: 4px 8px;
    background: var(--mdg-warn-bg, #fff8e6);
    color: var(--mdg-warn-fg, #a06800);
    font-size: 12px;
    border-radius: 4px;
}

.graph-error {
    padding: 8px 0 4px;
    color: var(--mdg-err-fg, #c0341d);
    font-size: 13px;
}

/* ── Mermaid 容器（渲染成功后的 svg 就放在里面） ───────────── */
.mermaid-block {
    position: relative;
    margin: 1.2em 0;
    border: 1px solid var(--mdg-border, #e2e6ec);
    border-radius: var(--mdg-radius, 8px);
    background: var(--mdg-bg, #ffffff);
    overflow: hidden;
}

.mermaid-container {
    padding: 10px;
    overflow-x: auto;
    /* ⚠️ 不能用 flex：SVG 作为 flex item 时，它的 width="100%" 在 auto 尺寸计算里
       解析失败，浏览器回退到 SVG replaced element 的默认宽度 300px —— 图形被压窄，
       甘特图 / 时间线会缩到几乎看不清（官网修复前就是这个症状）。
       用块级容器 + text-align 居中，SVG 才能拿到容器真实宽度。 */
    display: block;
    text-align: center;
}

.mermaid-container svg {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* ── 右上角「点击放大」角标 ────────────────────────────────── */
.graph-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--mdg-hint-bg, rgba(0, 0, 0, .45));
    color: var(--mdg-hint-fg, #ffffff);
    font-size: 11px;
    line-height: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

.graph-block:hover .graph-hint,
.graph-zoomable:hover .graph-hint {
    opacity: 1;
}

@media (hover: none) {
    .graph-hint { opacity: 1; }
}

/* Mermaid 容器复用同一套放大交互 */
.graph-zoomable {
    position: relative;
    cursor: zoom-in;
}

/* ── 图片加载失败占位 ─────────────────────────────────────── */
.img-placeholder {
    background: var(--mdg-ph-bg, #f5f6f8);
    border-radius: 6px;
    padding: 10px;
    margin: 6px 0;
    color: var(--mdg-ph-fg, #8a929c);
    font-size: 14px;
}

/* ================================================================
 * 图形放大查看器（SVG / Mermaid 共用）
 * ================================================================ */
.gv-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--gv-z, 9999);
    display: flex;
    flex-direction: column;
    background: var(--gv-stage-bg, #ffffff);
}

.gv-bar {
    flex: none;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    background: var(--gv-bar-bg, #3b5b7a);
    color: var(--gv-bar-fg, #ffffff);
    gap: 8px;
}

.gv-title {
    flex: 1;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gv-actions { display: flex; align-items: center; gap: 6px; }

.gv-btn {
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: var(--gv-btn-bg, rgba(255, 255, 255, .18));
    color: var(--gv-bar-fg, #ffffff);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
}

.gv-btn:hover { background: var(--gv-btn-bg-hover, rgba(255, 255, 255, .32)); }

.gv-scale {
    min-width: 48px;
    text-align: center;
    font-size: 12px;
    color: var(--gv-scale-fg, #eaf2ff);
}

.gv-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: var(--gv-stage-bg, #ffffff);
    /* 关闭浏览器原生手势，避免与自定义缩放冲突 */
    touch-action: none;
    cursor: grab;
    background-image:
        linear-gradient(45deg, var(--gv-grid, #f4f6f9) 25%, transparent 25%, transparent 75%, var(--gv-grid, #f4f6f9) 75%),
        linear-gradient(45deg, var(--gv-grid, #f4f6f9) 25%, transparent 25%, transparent 75%, var(--gv-grid, #f4f6f9) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.gv-stage:active { cursor: grabbing; }

.gv-content {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.gv-content svg {
    display: block;
    max-width: none !important;
    height: auto;
}

/* 查看器打开时锁住页面滚动 */
body.gv-lock { overflow: hidden; }

@media (max-width: 720px) {
    .gv-bar { height: 44px; padding: 0 8px; }
    .gv-title { font-size: 14px; }
    .gv-btn { min-width: 30px; height: 30px; padding: 0 8px; font-size: 14px; }
    .gv-scale { display: none; }
}

/* graphviz / mindmap：渲染页 iframe 内嵌（shared/md/render/*.html） */
.md-graph-frame {
    background: #fff;
    border-radius: 8px;
}
.graphviz-block,
.mindmap-block,
.formula-block,
.chart-block {
    margin: 12px 0;
}

/* ── 代码高亮（highlight.js / github 主题） ───────────────────
   github.min.css 自带白底与内边距；此处让位给页面自身的
   .rendered pre（--code-bg #f6f8fa）与 .rendered pre code 规则，
   只保留 token 颜色。 */
.rendered pre code.hljs {
    background: transparent;
    padding: 0;
    color: inherit;
}