/* ============================================================
   补充样式（跟读波形 / 安全区叠层 / 试听页入口）
   ============================================================ */

/* ============================================================
   易错点：错 → 对 → 为什么
   ------------------------------------------------------------
   三段式横向对比，中间一个箭头。
   原来"错"和"对"是两个紧挨着的行，没有视觉分隔，
   读完要靠回想区分哪句是哪句。
   ============================================================ */


/* —— 错 / 对 两栏 —— */
.pit-side[data-k="x"] .pit-side[data-k="ok"] 
.pit-side[data-k="x"] .pit-side[data-k="ok"] 
/* —— 中间箭头 —— */

/* —— 讲解（标签显示 tip:）—— */

/* ============================================================
   易错点
   ------------------------------------------------------------
   一条 = 序号 + 错（红左框线，删除线）+ 对（绿左框线）+ 讲解（标签 tip:）。
   错与对各自有底色，中间不需要额外分隔线；
   标签改成行内符号（✕ / ✓），比独立一行标签省 38px 高度。
   ============================================================ */
.pits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pit {
  display: flex;
  gap: 11px;
  background: #fffdf8;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 13px 12px 11px;
  cursor: default;            /* 纯阅读内容，不给手型光标 */
  box-shadow: 0 1px 2px rgba(60, 48, 30, .04);
}

/* 序号：轻微弱化，只用来定位，不抢内容 */
.pit-n {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: .04em;
  padding-top: 3px;
}
.pit-body { flex: 1; min-width: 0; }

/* —— 错 / 对 —— */
.pit-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
}
.pit-row[data-k="x"] {
  background: #faf0ec;
  border-left: 3px solid var(--warn);
  margin-bottom: 6px;
}
.pit-row[data-k="ok"] {
  background: #eef5f0;
  border-left: 3px solid var(--ok);
}
.pit-mark {
  flex: none;
  font-family: "Apple Symbols", "Arial Unicode MS", var(--mono);
  font-size: 12px;
  line-height: 1.42;
}
.pit-row[data-k="x"] .pit-mark { color: var(--warn); }
.pit-row[data-k="ok"] .pit-mark { color: var(--ok); }

.pit-txt {
  font-family: var(--en);
  font-size: 14.5px;
  line-height: 1.42;
  min-width: 0;
}
.pit-row[data-k="x"] .pit-txt {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: rgba(168, 98, 63, .5);
  text-decoration-thickness: 1.5px;
}
.pit-row[data-k="ok"] .pit-txt {
  color: var(--ink);
  font-weight: 600;
}

/* —— 讲解（标签显示 tip:）——
   原来用绝对定位的伪元素 + 写死 padding-left 给文字让位，
   结果标签的实际外框（内容宽 + 左右内边距）比 padding-left 还宽，
   文字被压住 2px。改用 Grid 两列：标签列按内容自适应，
   column-gap 保证间距，不再依赖任何魔法数字。 */
.pit-why {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
  font-family: var(--zh);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
}
.tip-tag {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--ink-4);
  background: var(--paper-3);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  /* 标签比正文小，往下推一点让它和第一行视觉居中 */
  margin-top: 2px;
}
.tip-txt { min-width: 0; }

/* —— 句式 / 易错 —— */
.pattern {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  margin-bottom: 8px;
  cursor: default;
}
.pattern .p {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}
.pattern .eg {
  font-family: var(--en);
  font-size: var(--f-en-sm);
  color: var(--ink);
  line-height: 1.5;
}
.pattern .zh { font-size: var(--f-zh-sm); color: var(--ink-3); margin-top: 3px; }
.pattern .why {
  font-size: 10.5px;
  color: var(--ink-4);
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--rule);
  line-height: 1.55;
}

/* 纯阅读卡片，不可点 —— 不要给手型光标，否则用户会以为能点开 */

/* —— 对比页 iframe —— */
.compare-frame {
  width: 390px;
  height: 844px;
  border: 0;
  border-radius: 30px;
  background: var(--paper);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform-origin: top center;
}
.compare-shell {
  padding: 11px;
  border-radius: 42px;
  background: linear-gradient(160deg, #3a3630, #14130f 42%, #2a2722);
  box-shadow: 0 0 0 1.5px #4d4740, 0 26px 60px rgba(0, 0, 0, 0.6);
  flex: none;
}

/* —— 空状态：第 02–30 课未写 —— */
.empty {
  text-align: center;
  padding: 42px 24px;
  color: var(--ink-4);
}
.empty .ico {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--paper-3);
  display: grid; place-items: center;
}
.empty .ico svg { width: 20px; height: 20px; stroke: var(--ink-4); }
.empty h4 { margin: 0 0 7px; font-size: 0.9rem; color: var(--ink-2); font-weight: 700; }
.empty p { margin: 0; font-size: 11.5px; line-height: 1.7; }

/* —— 校准叠层开关 —— */
.calib-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #f2eee2;
  border: 1px solid var(--rule);
  margin-bottom: 12px;
  font-size: 10.5px;
  color: var(--ink-3);
}
.calib-bar .grow2 { flex: 1; line-height: 1.45; }
.calib-bar b { color: var(--amber); font-weight: 700; }

/* ============================================================
   真实视频播放器
   ============================================================ */

/* ============================================================
   安全区自检页里的真实视频
   ============================================================ */
.vf-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #23211d;
}
.vf-play {
  all: unset;
  box-sizing: border-box;  /* all:unset 会重置全局的 border-box */
  cursor: pointer;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(44,44,44,.82);
  display: grid; place-items: center;
  z-index: 35;
  transition: opacity .18s, transform .12s;
  backdrop-filter: blur(4px);
}
.vf-play:hover { transform: translate(-50%,-50%) scale(1.06); }
.vf-play svg { width: 13px; height: 13px; fill: #f6f1e6; margin-left: 1px; }

/* 旁白男声试听入口 */
.audition-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--f-zh);
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(154, 95, 42, 0.35);
  padding-bottom: 2px;
}
.audition-link:hover { color: var(--ink); border-bottom-color: var(--ink-4); }
.audition-link svg { width: 14px; height: 14px; }