/* ═══════════════════════════════════════════════════════════════════
   单句训练台 · 句级精练
   ───────────────────────────────────────────────────────────────────
   Listenleap 模式的核心不是「内容多」，是「把一段素材切成单句原子，
   让同一份素材长出四种训练形态」：
     单句循环 · 盲听遮蔽 · 变速拆解 · 逐句填词
   本文件给这四种形态一个统一的视觉与交互外壳。

   命名规范：sq- 前缀（sentence），与听力台的 ls- 区隔。
   单位一律走 --u，主题走 --ink-N / --c-*，保证双主题自动适配。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 听力台的标签切换 ─────────────────────────────────────────── */
.ls-tabs {
  display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap;
  margin-bottom: calc(16 * var(--u));
}
.ls-tab {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: calc(2 * var(--u));
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  background: var(--glass-1); cursor: pointer;
  font: inherit; text-align: left; transition: background .15s, border-color .15s;
}
.ls-tab:hover { background: var(--hover); }
.ls-tab b { font-size: calc(13 * var(--u)); font-weight: 800; color: var(--ink-1); letter-spacing: calc(-.2 * var(--u)); }
.ls-tab span { font-size: calc(10.5 * var(--u)); color: var(--ink-4); font-weight: 600; }
.ls-tab.on {
  background: color-mix(in srgb, var(--c-sky) 14%, transparent);
  border-color: color-mix(in srgb, var(--c-sky) 40%, transparent);
}
.ls-tab.on b { color: var(--c-sky); }

/* ── 容器 ───────────────────────────────────────────────────────── */
.sq-wrap { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }

/* 一句导语 —— 说明「为什么多这一层」，不重复大标题 */
.sq-lead {
  font-size: calc(12.5 * var(--u)); line-height: calc(19 * var(--u));
  color: var(--ink-3); margin-bottom: calc(12 * var(--u));
  padding-left: calc(10 * var(--u)); border-left: calc(2 * var(--u)) solid var(--c-sky);
}
.sq-lead b { color: var(--ink-1); font-weight: 800; }
.sq-lead-n { color: var(--ink-4); font-size: calc(11 * var(--u)); margin-left: calc(6 * var(--u)); }

/* ── 模式切换条 ─────────────────────────────────────────────────── */
.sq-modes {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  flex-wrap: wrap; padding: calc(8 * var(--u));
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  background: var(--glass-1);
}
.sq-mode {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(7 * var(--u)) calc(13 * var(--u));
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: calc(12.5 * var(--u)); font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.sq-mode:hover { color: var(--ink-1); background: var(--hover); }
.sq-mode.on {
  background: color-mix(in srgb, var(--c-sky) 16%, transparent);
  border-color: color-mix(in srgb, var(--c-sky) 42%, transparent);
  color: var(--ink-1);
}
.sq-mode b { font-weight: 800; }
.sq-mode span { font-size: calc(10.5 * var(--u)); color: var(--ink-4); font-weight: 600; }
.sq-mode.on span { color: var(--c-sky); }

/* ── 播放控制条 ─────────────────────────────────────────────────── */
.sq-bar {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  flex-wrap: wrap; padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  background: var(--glass-1);
}
.sq-bar audio { flex: 1 1 calc(260 * var(--u)); min-width: calc(180 * var(--u)); height: calc(34 * var(--u)); }

.sq-speed { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); }
.sq-speed-l { font-size: calc(10.5 * var(--u)); color: var(--ink-4); font-weight: 700; margin-right: calc(3 * var(--u)); }
.sq-sp {
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: calc(11 * var(--u)); font-weight: 700;
  cursor: pointer;
}
.sq-sp:hover { background: var(--hover); color: var(--ink-1); }
.sq-sp.on {
  background: color-mix(in srgb, var(--c-violet) 18%, transparent);
  color: var(--c-violet);
  border-color: color-mix(in srgb, var(--c-violet) 40%, transparent);
}

.sq-toggle {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  padding: calc(6 * var(--u)) calc(11 * var(--u));
  border: 1px solid var(--glass-line-2); border-radius: var(--r);
  background: var(--glass-2); color: var(--ink-2);
  font: inherit; font-size: calc(11.5 * var(--u)); font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s;
}
.sq-toggle:hover { background: var(--hover); color: var(--ink-1); }
.sq-toggle.on {
  background: color-mix(in srgb, var(--c-teal) 16%, transparent);
  border-color: color-mix(in srgb, var(--c-teal) 42%, transparent);
  color: var(--c-teal);
}

/* ── 置信度提示 ─────────────────────────────────────────────────── */
.sq-conf {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(10.5 * var(--u)); color: var(--ink-4);
}
.sq-conf i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; display: block; }
.sq-conf.hi i { background: var(--c-teal); }
.sq-conf.mid i { background: var(--c-amber); }
.sq-conf.lo i { background: var(--c-rose); }

/* ── 句子列表 ───────────────────────────────────────────────────── */
.sq-list { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }

.sq-sent {
  display: grid;
  grid-template-columns: calc(46 * var(--u)) 1fr;
  gap: calc(10 * var(--u));
  align-items: start;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.sq-sent:hover { background: var(--hover); }
.sq-sent.cur {
  background: color-mix(in srgb, var(--c-sky) 15%, transparent);
  border-color: color-mix(in srgb, var(--c-sky) 50%, transparent);
}

.sq-idx {
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u));
  padding-top: calc(1 * var(--u));
}
.sq-n { font-size: calc(10.5 * var(--u)); color: var(--ink-4); font-weight: 700; font-variant-numeric: tabular-nums; }
.sq-t { font-size: calc(9.5 * var(--u)); color: var(--ink-4); font-variant-numeric: tabular-nums; opacity: .72; }

.sq-body { min-width: 0; }
.sq-en {
  font-size: calc(13.5 * var(--u)); line-height: calc(21 * var(--u));
  color: var(--ink-1); font-weight: 600;
}
.sq-spk {
  display: inline-block; margin-right: calc(6 * var(--u));
  font-size: calc(9.5 * var(--u)); font-weight: 800; letter-spacing: .04em;
  color: var(--c-sky); vertical-align: calc(1.5 * var(--u));
}

/* 盲听遮蔽：隐藏英文，只留时间与序号 */
.sq-list.blind .sq-en {
  color: transparent; background: var(--track);
  border-radius: calc(3 * var(--u)); user-select: none;
}
.sq-list.blind .sq-spk { color: transparent; background: var(--track); border-radius: calc(2 * var(--u)); }
.sq-list.blind .sq-sent.revealed .sq-en { color: var(--ink-1); background: transparent; }
.sq-list.blind .sq-sent.revealed .sq-spk { color: var(--c-sky); background: transparent; }

/* 填词模式：挖空 */
.sq-blank {
  display: inline-block; min-width: calc(38 * var(--u));
  border-bottom: calc(1.5 * var(--u)) solid var(--c-amber);
  color: transparent; user-select: none;
}
.sq-blank.filled { color: var(--c-teal); border-bottom-color: var(--c-teal); }
.sq-blank.bad { color: var(--c-rose); border-bottom-color: var(--c-rose); }

/* ── 跟读记录 ───────────────────────────────────────────────────── */
.sq-shadow {
  display: flex; align-items: center; gap: calc(9 * var(--u)); flex-wrap: wrap;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  background: var(--glass-1);
}
.sq-shadow-h {
  font-size: calc(11 * var(--u)); font-weight: 800; color: var(--ink-2);
  display: flex; align-items: center; gap: calc(6 * var(--u)); flex-wrap: wrap;
}
.sq-rec {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border: 1px solid color-mix(in srgb, var(--c-rose) 40%, transparent);
  border-radius: var(--r); background: color-mix(in srgb, var(--c-rose) 12%, transparent);
  color: var(--c-rose); font: inherit; font-size: calc(12 * var(--u)); font-weight: 800;
  cursor: pointer;
}
.sq-rec:hover { background: color-mix(in srgb, var(--c-rose) 20%, transparent); }
.sq-rec.on { background: var(--c-rose); color: #fff; animation: sq-pulse 1.1s ease-in-out infinite; }
@keyframes sq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* 三维自评：对应官方 PR 维度 */
.sq-axes { display: flex; gap: calc(7 * var(--u)); flex-wrap: wrap; }
.sq-axis {
  display: flex; flex-direction: column; gap: calc(3 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--glass-line-2); border-radius: var(--r);
  background: var(--glass-2); min-width: calc(112 * var(--u));
}
.sq-axis-h {
  font-size: calc(10.5 * var(--u)); font-weight: 800; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: calc(8 * var(--u));
}
.sq-axis-h em { font-style: normal; color: var(--ink-4); font-weight: 700; }
.sq-axis-o { display: flex; gap: calc(3 * var(--u)); }
.sq-ax {
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: calc(5 * var(--u)); border: 1px solid var(--glass-line-2);
  background: transparent; color: var(--ink-4);
  font: inherit; font-size: calc(10.5 * var(--u)); font-weight: 800;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.sq-ax:hover { background: var(--hover); color: var(--ink-1); }
.sq-ax.on {
  background: color-mix(in srgb, var(--c-teal) 20%, transparent);
  border-color: color-mix(in srgb, var(--c-teal) 50%, transparent);
  color: var(--c-teal);
}

/* ── 载入态 ─────────────────────────────────────────────────────── */
.sq-empty {
  padding: calc(26 * var(--u)); text-align: center;
  border: 1px dashed var(--glass-line-2); border-radius: var(--r-lg);
  color: var(--ink-4); font-size: calc(12.5 * var(--u)); line-height: calc(20 * var(--u));
}
.sq-empty b { color: var(--ink-2); font-weight: 800; }

/* ── 响应式 ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sq-sent { grid-template-columns: calc(38 * var(--u)) 1fr; gap: calc(8 * var(--u)); }
  .sq-en { font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u)); }
}
@media (max-width: 640px) {
  .sq-bar audio { flex-basis: 100%; }
  .sq-axis { min-width: calc(96 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .sq-rec.on { animation: none; }
}