/* ==========================================================================
   交互题型运行时样式 —— 选择题 / 打字填空 / 排序 / 配对
   ==========================================================================

   为什么是**一个独立文件**而不是写进 style.css 或模板里：
     1. 导出的 .apkg 必须能在**离线**环境跑（Anki 不能引外部 CSS），
        所以 app/templates_repo.py 在构建模板时把本文件**逐字内联**进
        模板 CSS；
     2. 站内预览直接 <link> 引这一份。
     同一个源 → 站内看到的就是导出后得到的，不会漂移。
     这与 anki-prettify 的处理方式相反（那份刻意解耦），原因是：
       · prettify 的样式表里有 img{} / a{} / table{} 这类**全局元素选择器**，
         引进来会改样整个站点，只能站内另写近似样式；
       · 本文件的每一条规则都以 .ix-root 作用域限定，天生不会外溢，
         所以可以两边共用同一份。

   ⚠️ 改这个文件 = 同时改了「站内预览」与「导出到 Anki 的卡片」。
      调样式时请两边都看一眼。
   ========================================================================== */

/* ---------- 变量：优先继承宿主主题，无宿主时用兜底值 ----------
   Anki 端宿主是 .card（templates_repo._BASE_CSS 定义了 --text/--border/...），
   站点端宿主是 :root（style.css 定义了 --text-primary/--border-subtle/...）。
   两级 var() 嵌套让两边各取所需，且暗色主题跟着宿主走，不会出现暗底暗字。 */
.ix-root {
  --ix-ink: var(--text, var(--text-primary, #1f2329));
  --ix-muted: var(--muted, var(--text-muted, #8a919f));
  --ix-line: var(--border, var(--border-subtle, #e5e7eb));
  --ix-surface: var(--surface, var(--bg-subtle, #f7f8fa));
  --ix-accent: var(--accent, #185fa5);
  --ix-accent-soft: var(--accent-soft, #e6f1fb);
  --ix-ok: #15803d;
  --ix-ok-soft: #e8f6ec;
  --ix-bad: #b91c1c;
  --ix-bad-soft: #fdeceb;
  --ix-near: #b45309;
  --ix-near-soft: #fdf4e3;

  box-sizing: border-box;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ix-ink);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ix-root *,
.ix-root *::before,
.ix-root *::after { box-sizing: border-box; }

/* 交互脚本没跑起来时（老 WebView / 脚本被拦），.ix-src 里的原始文本仍然可见，
   这是有意的降级：用户至少能自己读题看答案，而不是看到一张空白卡。 */
.ix-root .ix-src { white-space: pre-wrap; }

/* 暗色：Anki 桌面/AnkiDroid 的夜间模式类挂在 body 或 .card 上，
   站点用 [data-theme="dark"]。只覆盖**状态色**，正文色继续继承宿主。 */
.nightMode .ix-root,
.night_mode .ix-root,
.nightmode .ix-root,
[data-theme="dark"] .ix-root {
  --ix-ok: #4ade80;
  --ix-ok-soft: rgba(34, 197, 94, 0.16);
  --ix-bad: #f87171;
  --ix-bad-soft: rgba(239, 68, 68, 0.16);
  --ix-near: #fbbf24;
  --ix-near-soft: rgba(245, 158, 11, 0.16);
}

.ix-root [hidden] { display: none !important; }

/* ---------- 题眉 / 题干 ---------- */
.ix-root .ix-kicker {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ix-muted);
  margin-bottom: 12px;
}
.ix-root .ix-q {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 16px;
  white-space: pre-wrap;
}
.ix-root .ix-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ix-muted);
}

/* ---------- 选择题 ---------- */
.ix-root .ix-opts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ix-root .ix-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  font: inherit;
  line-height: 1.6;
  color: inherit;
  background: var(--ix-surface);
  border: 1.5px solid var(--ix-line);
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background 0.15s;
}
.ix-root .ix-opt:hover { border-color: var(--ix-accent); }
.ix-root .ix-opt-key {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  line-height: 22px;
  margin-top: 1px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--ix-line);
  color: var(--ix-ink);
}
.ix-root .ix-opt-txt { flex: 1; min-width: 0; }
.ix-root .ix-opt.is-picked {
  border-color: var(--ix-accent);
  background: var(--ix-accent-soft);
}
.ix-root .ix-opt.is-picked .ix-opt-key { background: var(--ix-accent); color: #fff; }
.ix-root .ix-opt.is-correct { border-color: var(--ix-ok); background: var(--ix-ok-soft); }
.ix-root .ix-opt.is-correct .ix-opt-key { background: var(--ix-ok); color: #fff; }
.ix-root .ix-opt.is-wrong { border-color: var(--ix-bad); background: var(--ix-bad-soft); }
.ix-root .ix-opt.is-wrong .ix-opt-key { background: var(--ix-bad); color: #fff; }
.ix-root.is-locked .ix-opt { cursor: default; }
.ix-root.is-locked .ix-opt:hover { border-color: var(--ix-line); }
.ix-root.is-locked .ix-opt.is-correct:hover { border-color: var(--ix-ok); }
.ix-root.is-locked .ix-opt.is-wrong:hover { border-color: var(--ix-bad); }

/* ---------- 打字填空 ---------- */
.ix-root .ix-sent {
  font-size: 18px;
  line-height: 2.2;
  white-space: pre-wrap;
}
.ix-root .ix-blank {
  display: inline-block;
  min-width: 72px;
  max-width: 100%;
  margin: 0 3px;
  padding: 1px 6px;
  font: inherit;
  color: inherit;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ix-accent);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ix-root .ix-blank:focus { background: var(--ix-accent-soft); }
.ix-root .ix-blank.is-correct { border-bottom-color: var(--ix-ok); color: var(--ix-ok); font-weight: 600; }
.ix-root .ix-blank.is-wrong { border-bottom-color: var(--ix-bad); color: var(--ix-bad); }
.ix-root .ix-blank.is-near { border-bottom-color: var(--ix-near); color: var(--ix-near); }
.ix-root .ix-blank.is-empty { border-bottom-style: dashed; }
/* 揭示态：把挖空换成正确答案（绿色下划线），与用户输入形成对照 */
.ix-root .ix-reveal {
  padding: 0 6px;
  font-weight: 700;
  color: var(--ix-ok);
  border-bottom: 2px solid var(--ix-ok);
}

/* ---------- 排序 / 配对 共用的“卡片”基底 ---------- */
.ix-root .ix-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ix-root .ix-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--ix-surface);
  border: 1.5px solid var(--ix-line);
  border-radius: 10px;
  cursor: grab;
  /* touch-action:none 让移动端拖拽时不触发页面滚动——
     否则手指一移动页面就跟着滚，元素永远追不上手指。 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.ix-root .ix-grip {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: -2px;
  color: var(--ix-muted);
}
.ix-root .ix-num {
  flex: 0 0 auto;
  min-width: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ix-muted);
}
.ix-root .ix-txt { flex: 1; min-width: 0; }
.ix-root .ix-item.is-dragging {
  opacity: 0.94;
  cursor: grabbing;
  border-color: var(--ix-accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.ix-root .ix-item.is-sel { border-color: var(--ix-accent); background: var(--ix-accent-soft); }
.ix-root .ix-item.is-correct { border-color: var(--ix-ok); background: var(--ix-ok-soft); }
.ix-root .ix-item.is-wrong { border-color: var(--ix-bad); background: var(--ix-bad-soft); }
.ix-root.is-locked .ix-item { cursor: default; }

/* ---------- 配对 ---------- */
.ix-root .ix-cols {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ix-root .ix-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ix-root .ix-card {
  position: relative;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.55;
  color: inherit;
  text-align: left;
  background: var(--ix-surface);
  border: 1.5px solid var(--ix-line);
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background 0.15s;
}
.ix-root .ix-card:hover { border-color: var(--ix-accent); }
.ix-root .ix-card.is-sel { border-color: var(--ix-accent); background: var(--ix-accent-soft); }
/* 已配对的角标：左右两侧同一个数字 = 同一组，这是配对的唯一视觉表达 */
.ix-root .ix-card.is-linked::after {
  content: attr(data-badge);
  position: absolute;
  top: -7px;
  right: -7px;
  width: 19px;
  height: 19px;
  line-height: 19px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--ix-accent);
  border-radius: 50%;
}
.ix-root .ix-card.is-correct { border-color: var(--ix-ok); background: var(--ix-ok-soft); }
.ix-root .ix-card.is-correct::after { background: var(--ix-ok); }
.ix-root .ix-card.is-wrong { border-color: var(--ix-bad); background: var(--ix-bad-soft); }
.ix-root .ix-card.is-wrong::after { background: var(--ix-bad); }
.ix-root.is-locked .ix-card { cursor: default; }
.ix-root.is-locked .ix-card:hover { border-color: var(--ix-line); }

/* ---------- 操作条 / 按钮 ---------- */
.ix-root .ix-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}
.ix-root .ix-btn {
  padding: 8px 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: inherit;
  background: var(--ix-surface);
  border: 1.5px solid var(--ix-line);
  border-radius: 9px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.ix-root .ix-btn:hover { border-color: var(--ix-accent); }
.ix-root .ix-btn--primary {
  color: #fff;
  background: var(--ix-accent);
  border-color: var(--ix-accent);
}
.ix-root .ix-btn--primary:hover { opacity: 0.88; }
.ix-root .ix-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- 判定结果条 ---------- */
.ix-root .ix-verdict {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1.5px solid var(--ix-line);
  border-radius: 10px;
}
.ix-root .ix-verdict.is-ok { color: var(--ix-ok); background: var(--ix-ok-soft); border-color: var(--ix-ok); }
.ix-root .ix-verdict.is-bad { color: var(--ix-bad); background: var(--ix-bad-soft); border-color: var(--ix-bad); }
.ix-root .ix-verdict.is-near { color: var(--ix-near); background: var(--ix-near-soft); border-color: var(--ix-near); }
.ix-root .ix-verdict.is-info { color: var(--ix-muted); }
.ix-root .ix-verdict .ix-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.9;
  white-space: pre-wrap;
}

/* ---------- 站内预览容器里的微调（不影响 Anki） ---------- */
/* .card-face 里已经有较大的内边距，交互元素再撑一圈就太松了 */
.card-face .ix-root .ix-q { margin-bottom: 14px; }
.card-face .ix-root .ix-bar { margin-top: 14px; }