/* ============================================================
   演算草稿纸 · 样式（2026-10-05 · 数学会话）
   ------------------------------------------------------------
   用户原话：「你做一个草稿功能吧」→ 选「演算草稿纸：做题时能随手写竖式」。
   用在哪儿：做题页（#quiz-layer：选择题 + 计算训练）和考试页（#exam-layer）。
   入口是一个「✏️ 草稿」按钮，**两种模式两种摆法**：
     · 计算/输入模式：浮在右下角 —— 实测 390×844 时数字键盘底边 520、
       屏幕 844 → **下面 324px 是空的**（PC 1440：键盘底边 536、视口 900 → 空 364px），
       放那儿谁也压不着，而且离数字键盘最近。
     · 选择题模式：挪进顶栏 .quiz-top —— 语文那种长选项滚到下半屏时，
       最后一个选项的**文字右端**会落进右下角按钮的框里（实测 356 > 292），
       学生想选 D 点下去开出来的是草稿纸。顶栏不滚动，压不到东西。
     这个切换在 draft.js 里做（摆按钮()）。
     · 反馈条（.sheet）是 absolute bottom:0，会盖住右下角那块 →
       它一出来按钮就藏（靠 draft.js 的 MutationObserver，不是靠猜）。

   文件是**独立的**（不往 style.css 里追加）：写的时候 style.css 里有别的会话
   没提交的 352 行，追加进去就没法按文件提交了。理由详见 draft.js 头注释。

   颜色**全部走已有皮肤变量**，不新造一套色：
     纸 = var(--card)   格子 = var(--line)   黑笔 = var(--text)   红笔 = var(--red)
   好处：8 套皮肤（科技风深底 / 像素游戏 / 青绿山水…）一个字都不用改，
   `--text` 压 `--card` 本来就是全站保证过对比度的一对（实测四套皮肤色差 0）。
   ============================================================ */

/* ---------- 入口按钮 ---------- */
.draft-fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--blue-text);
  background: var(--card);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  touch-action: manipulation;
}
.draft-fab:active { transform: translateY(2px); border-bottom-width: 2px; }
.draft-fab.hidden { display: none; }

/* 选择题模式：挪进顶栏（.quiz-top）。
   ⚠️ 为什么不能一直待在右下角（2026-10-05 实测出来的）：
      语文那种长选项滚到下半屏时，最后一个选项的**文字右端**正好落进按钮的框里
      （实测：文字右边界 356 > 按钮左边界 292）→ 学生想选 D，点下去开出来的是草稿纸。
      顶栏那一行是 static、永远不滚动，放这儿压不到任何东西。
   计算/输入模式仍旧用右下角那个浮起来的（键盘下面 324px 是空的，离键盘最近、最好按）。 */
.draft-fab.inline {
  position: static;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 12.5px;
  border-bottom-width: 3px;
  box-shadow: none;
}

/* 考试页底部有 .exam-foot（上一题/下一题），按钮要抬到它上面 */
#exam-layer .draft-fab { bottom: 84px; }

/* PC：考试页右侧是常驻答题卡（fixed，宽 300px），按钮改放左下，别骑在答题卡上 */
@media (min-width: 900px) {
  #exam-layer .draft-fab { right: auto; left: 16px; }
}

/* ---------- 草稿纸本体 ---------- */
#draft-sheet {
  position: fixed;
  z-index: 60;                 /* 高于 .layer(20)，也高于错题本/方法卡那些浮层 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 2px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  animation: draft-rise 0.16s ease;
}
#draft-sheet.hidden { display: none; }
@keyframes draft-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 工具条：一行放得下（实测 390px 手机 6 个按钮 342px < 370px），
   flex-wrap 只是兜底 —— 宁可换行，也不许把「收起」挤出屏幕。 */
.draft-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
  background: var(--card);
}
.draft-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 10px;
  min-height: 36px;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.draft-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.draft-btn.on {
  color: var(--blue-text);
  background: var(--blue-light);
  border-color: var(--blue);
}
.draft-x { margin-left: auto; color: var(--blue-text); }
.draft-btn.danger { color: var(--red-text); border-color: var(--red); }

/* 纸：方格底（竖式要对位，方格就是最便宜的教具）。
   ⚠️ 格子画在**纸的 CSS 背景**上、笔画画在**透明 canvas** 上 ——
      橡皮是 destination-out（擦成透明），擦完露出的是格子，不是白块。 */
.draft-paper {
  position: relative;
  flex: 1;
  min-height: 0;
  background-color: var(--card);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
}
#draft-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;          /* 写字时页面不许滚 —— 这是手写的头号坑 */
  cursor: crosshair;
}