/* 代码块的样式。**和 render.js 配套** —— 那边生成 .codebox 这套结构，
   这边给它上色，两者必须一起改。

   抽出来是因为主页面和分享页都要用：渲染逻辑早就抽成 render.js 共用了，
   样式却还各写一份，改一处另一处就悄悄跟不上（141 行里有 76 行是原样
   拷贝的）。和 ISSUE-033 同一类问题：共用了一半。

   **改这个文件要确认它在 server.py 的 FRONTEND_FILES 里** —— 不在的话
   构建戳不会变，手机上永远是旧样式，而服务端一切正常（ISSUE-033）。 */

/* ── 代码块 ─────────────────────────────────────────────────────
   语言标签浮在右上角，不占正文的行。深浅色各一套配色 ——
   只写一套的话，另一个模式下不是看不清就是刺眼。 */
.codebox {
  position: relative;
  margin: 0 0 1.1em;
}
/* 语言标签和复制按钮浮在右上角，不占正文的行。 */
.codebox .codetop {
  position: absolute;
  top: 5px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
}
.codebox .lang {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-faint);
  pointer-events: none;
  user-select: none;
}
.codebox .copy {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  /* 平时淡一点，别跟代码抢注意力；鼠标进了代码块再显出来。
     触屏没有 hover，所以基线不能是完全看不见。 */
  opacity: .55;
  transition: opacity .14s ease, border-color .14s ease, color .14s ease;
}
.codebox:hover .copy, .codebox .copy:focus-visible { opacity: 1; }
.codebox .copy:hover { border-color: var(--accent); color: var(--accent); }
.codebox .copy.ok { color: var(--accent); border-color: var(--accent); opacity: 1; }
/* 顶栏会盖住第一行代码的右端 —— 给点右内边距让开 */
.codebox pre { padding-right: 5.5em; }
.codebox pre {
  margin: 0;
  padding: .85em 1em;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-x: auto;
  /* 代码块自己横向滚，别把整页撑宽 —— 和表格同一条规矩 */
  overscroll-behavior-x: contain;
}
.codebox code {
  font-family: var(--mono);
  /* 13px 起步：中文正文 16.5px 配等宽 13px 视觉重量才接近。
     和正文同号的话代码会显得又大又吵。 */
  font-size: 13px;
  line-height: 1.72;
  background: none;
  padding: 0;
  color: var(--code-ink);
  /* 代码里的空格和缩进是有意义的，不许折叠；但超长行要能换 */
  white-space: pre;
  tab-size: 4;
}
/* 语法着色。四类就够看出结构了：注释 / 字符串 / 数字 / 关键字。
   再细分下去收益递减，而误标一个词比不标更让人分心。 */
.codebox .c { color: var(--code-cmt); font-style: italic; }
.codebox .s { color: var(--code-str); }
.codebox .n { color: var(--code-num); }
.codebox .k { color: var(--code-kw); font-weight: 600; }
.codebox mark { background: var(--mark); color: inherit; border-radius: 3px; }

/* 图表保留原始 Mermaid；图片在本地沙箱生成，宽图只在画布内滚动。 */
.kb-diagram { margin: 1em 0; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.kb-diagram-canvas { overflow: auto; max-height: 72vh; padding: 16px; overscroll-behavior: contain; }
.kb-diagram-canvas:empty { display: none; }
.kb-diagram .kb-diagram-canvas img { display: block; max-width: none; width: auto; height: auto; margin: 0 auto; }
.kb-diagram-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kb-diagram-status { padding: 14px 16px; font-size: 13px; color: var(--ink-soft); }
.kb-diagram-status[hidden] { display: none; }
.kb-diagram-status button { font: inherit; color: var(--accent); background: none; border: 1px solid var(--line-strong); border-radius: 5px; cursor: pointer; padding: 3px 8px; }
.kb-diagram-source { border-top: 1px solid var(--line); }
.kb-diagram-source summary { padding: 9px 16px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.kb-diagram-source .codebox { margin: 0; }
.kb-diagram-source .codebox pre { border: 0; border-radius: 0; padding-top: 32px; }
.kb-diagram-worker { position: fixed; left: -10000px; top: 0; width: 1000px; height: 1000px; visibility: hidden; pointer-events: none; border: 0; }