/* vx-site.css —— 本站对组件库的"接线层"。组件库原件（同目录 vx.css 等）一字不改，只在这里：
 *   ① 把 --vx-* 映射到站点色（亮/暗两套自动跟随，含"跟随系统"的暗色）；
 *   ② 视觉块的 figure/figcaption 版式、窄屏不溢出；
 *   ③ 课程页的克制滚动揭示（纯 CSS，reduced-motion 与截图态直接终态）；
 *   ④ 与 guard.js 共存：可交互画布恢复指针与触控。
 * 本文件不写裸色值——颜色全部取自 style.css 的站点变量（contrast_check.py 查的是那一份）。 */

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --vx-brand: var(--accent);
  --vx-brand-soft: var(--accent-bg);
  --vx-accent: var(--warm);
  --vx-ink: var(--ink);
  --vx-muted: var(--muted);
  --vx-line: var(--line);
  --vx-paper: var(--surface);
  --vx-panel: var(--bg-alt);
  --vx-warn: var(--danger);
  --vx-ok: var(--accent);
  --vx-font: inherit;
}
/* 暗色下分子原子色与分类色的第 8 色要换浅，否则暗底看不见（两种暗色入口都要覆盖） */
:root[data-theme="dark"] { --vx-cat-8: var(--ink); --vx-atom-c: var(--ink-soft); --vx-bond: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --vx-cat-8: var(--ink); --vx-atom-c: var(--ink-soft); --vx-bond: var(--muted); }
}

/* ── 视觉块容器 ── */
.md figure.vxf { margin: 1.6em 0; padding: 14px 14px 10px; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--surface); max-width: 100%; overflow: hidden; }
.md figure.vxf > .vxb { max-width: 100%; }
.md figure.vxf figcaption.vx-cap { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.md figure.vxf .vx-tag { display: inline-block; font-size: 12px; padding: 0 6px; margin-right: 6px; border-radius: 4px;
  color: var(--warm); background: var(--warm-bg); font-weight: 600; }
.md .vx-molgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.md .vx-molgrid .vx-mol canvas { aspect-ratio: 4 / 3; }
.md .vx-molname { font-size: 13px; color: var(--ink-soft); text-align: center; margin-top: 4px; }
.md figure.vxf svg { max-width: 100%; }

/* ── 与 guard.js 共存：正文禁选不影响拖拽画布 ── */
.md figure.vxf canvas, .md figure.vxf .vx-graph svg { touch-action: none; -webkit-touch-callout: none; }

/* ── 课程页滚动揭示：只作用于二级标题与视觉块，位移 12px，不晃眼 ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.vx-static) .md > h2, html:not(.vx-static) .md figure.vxf {
      animation: vxs-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes vxs-rise { from { opacity: .001; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .md figure.vxf { padding: 10px 8px 8px; margin-left: 0; margin-right: 0; }
}
@media print { .md figure.vxf { break-inside: avoid; } }

/* 长裸链接在 390px 窄屏会把整页撑出横向滚动（v12 实拍在《数据泄漏》逮到），允许在任意处断行 */
.md p a, .md li a, .md td a { overflow-wrap: anywhere; }