/* 代码框（CodeMirror 5）。原来的 textarea 被 fromTextArea 藏起来，这层接管它的位置。
   三页（做题/作业/试卷）+ 社区题解 + 讲解编辑共用，所以样式写在一处，别再各页覆盖。

   位置关系：CM 的 div 插在原 textarea 后面，父容器（.pc-code / .rb-sec）已经有
   border + border-radius + overflow:hidden，所以这里必须无边框无圆角贴边，
   否则会出现「卡片里套一个小卡片」的双层框。 */

.CodeMirror {
  height: 260px;
  /* 代码里中文注释、中文输出都常见，等宽字体后面必须留中文兜底，
     否则「变量」两个字会被渲染成比例字体，跟旁边的代码错位 */
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", "Microsoft YaHei", "PingFang SC", monospace);
  font-size: 13.5px;
  line-height: 1.7;
  border: 0;
  border-radius: 0;
  /* 这里必须是 hidden，不能 auto。CodeMirror 自己有一套滚动容器
     （.CodeMirror-scroll），外层再 auto 就会在右边和下边各多出一条滚动条，
     跟里面的那条并排出现，看着像框坏了。resize 只要 overflow 不是 visible
     就能生效，hidden 一样可以拖高度 */
  overflow: hidden;
  resize: vertical;
  /* 主题 css 没加载上时的兜底配色，比纯白纯黑温和 */
  background: #fbfbfd;
  color: #2b2b36;
}

/* 行号栏：跟正文同底色，只把数字调淡，不要画一条硬线 */
.CodeMirror-gutters {
  border-right: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: transparent;
}
.CodeMirror-linenumber { padding: 0 10px 0 12px; opacity: .5; }

.CodeMirror-scroll { padding: 6px 0; }

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like { padding: 0 14px; }

/* 当前行：只加一条极淡的底色，别用高亮色——代码本来就有颜色了 */
.CodeMirror-activeline-background {
  background: color-mix(in srgb, currentColor 6%, transparent);
}

/* 括号匹配。跟着主题的括号色走，只加粗+下划线，不另设颜色 */
.CodeMirror-matchingbracket {
  text-decoration: underline;
  font-weight: 600;
}

/* 只读（交卷后回看）：光标不再闪，选中文字仍然能复制 */
.CodeMirror.CodeMirror-readonly .CodeMirror-cursor { display: none; }
.CodeMirror.CodeMirror-readonly { cursor: default; }

/* 试卷页交卷后整块代码区压暗一点，跟 .pc-exam.is-result .pc-code-ta 原来的处理对齐 */
.pc-exam.is-result .CodeMirror { opacity: .92; }

/* 窄屏：行号栏收窄，字小一号，别把代码挤成一条竖线 */
@media (max-width: 720px) {
  .CodeMirror { height: 220px; font-size: 12.5px; }
  .CodeMirror-linenumber { padding: 0 6px 0 8px; }
  .CodeMirror pre.CodeMirror-line,
  .CodeMirror pre.CodeMirror-line-like { padding: 0 10px; }
}

/* ============ 字号调节 ============
   代码框顶上一窄条，右对齐放 A- / A+。**不能做成浮层**——代码框不折行，
   长行横向溢出，浮层压住的那几十像素里全是字，给行容器加 padding 也拦不住
   （实测：padding-right 56px 加上了，字符照样从按钮底下穿过去）。
   独占一行多花 26px 高度，换任何情况下都不糊字。 */

.cm-fs-bar {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 4px; height: 26px; padding: 0 8px;
  background: color-mix(in srgb, currentColor 3%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  opacity: .55; transition: opacity .15s;
}
.cm-fs-bar:hover,
.cm-fs-bar:focus-within { opacity: 1; }
.cm-fs-bar button {
  width: 22px; height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  cursor: pointer; user-select: none;
}
.cm-fs-bar button:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.cm-fs-bar button:active { transform: scale(.94); }

/* ============ 皮肤色板 ============
   每套皮肤一个 key，跟后端 code_themes.py 里的 key 一一对应。
   token 配色由 CodeMirror 自己的 theme css 负责，这里只补两件它不管的事：
   深色皮肤在浅色页面里的过渡阴影，以及行号栏在深色下的可读性。 */

.cm-s-monokai.CodeMirror, .cm-s-dracula.CodeMirror, .cm-s-material-darker.CodeMirror,
.cm-s-material.CodeMirror, .cm-s-night.CodeMirror, .cm-s-nord.CodeMirror,
.cm-s-ayu-dark.CodeMirror, .cm-s-panda-syntax.CodeMirror,
.cm-s-gruvbox-dark.CodeMirror, .cm-s-solarized.CodeMirror {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}