@charset "utf-8";
/* ==========================================================================
   冲击波英语成长中心 · 复述范文面板（Retelling Examples）
   --------------------------------------------------------------------------
   独立样式表：只服务 #panel-retell，不改动 lesson.css，
   把「万一样式有问题」的影响范围锁死在这一个新面板里。
   设计令牌沿用 assets/styles.css 的 :root 变量。
   版本串：?v=20260923c

   🔴🔴 权重铁律（2026-09-24 踩坑，动这个文件前务必先读）
   --------------------------------------------------------------------------
   本面板内容根节点是 <article class="lesson-document rt-doc">，
   而 lesson.css 第 170 行有：
       .lesson-document p { color: var(--ink);
                            font-size: clamp(1.05rem, 1.45vw, 1.28rem); }
   权重 = (0, 1, 1)  ——  1 个 class + 1 个元素。

   本文件若只写 `.rt-quote-en { color: #fff }`，权重只有 (0, 1, 0) —— **输给它**。
   后果不是「颜色有点偏」，而是：

       .rt-quote 底色 = #14211c 深墨绿
       .rt-quote-en / -zh / -by 字色被 lesson.css 夺走 = var(--ink) = **也是 #14211c**
       ⇒ 对比度 1.00，肉眼 100% 看不见（杨老师两次反馈「名言看不清」的真因）

   实测证据（Chrome CDP 读线上 L1 计算样式，修复前）：
       .rt-quote      background-color: rgb(20, 33, 28)
       .rt-quote-en   color: rgb(20, 33, 28)   WCAG 对比度 1.00  🔴
       .rt-quote-zh   color: rgb(20, 33, 28)   WCAG 对比度 1.00  🔴
       .rt-quote-by   color: rgb(20, 33, 28)   WCAG 对比度 1.00  🔴
       另：-zh / -by 的 font-size 也被夺走（18.56px，应为 17.92 / 14.08px）

   ⇒ 铁律一：本文件里**凡是要覆盖 p 的样式，选择器至少带两个 class**。
             统一加 `.rt-doc ` 前缀，权重升到 (0,2,0)+ 即可稳赢 lesson.css。
     铁律二：**深色底上的文字，颜色再补 `!important` 兜底**。
             因为「看不见」是不可接受的失败，宁可稍微强硬。
     铁律三：改完必须用 `_retell/build/cdp_contrast.py` 跑一遍对比度实测，
             不能只看代码「应该没问题」。
   ========================================================================== */

/* ---------- 面板容器 ---------- */
.rt-doc h2 {
  margin: 0 0 12px;
  padding-bottom: 9px;
  font-size: clamp(1.12rem, 2vw, 1.5rem);
  border-bottom: 2px solid rgba(248, 196, 93, 0.55);
}
.rt-block { margin-bottom: 34px; min-width: 0; }
.rt-doc p { margin: 0 0 11px; overflow-wrap: anywhere; }

/* ---------- 中文辅助层 ---------- */
.rt-doc .rt-zh {
  background: rgba(207, 238, 218, 0.42);
  border-left: 3px solid #7cbf9a;
  border-radius: 0 12px 12px 0;
  padding: 9px 13px;
  color: #24463a;
  font-size: 0.95rem;
}
.rt-doc .rt-zh-lg { font-size: 1rem; }

.rt-doc .rt-tip {
  background: rgba(248, 196, 93, 0.16);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 0.9rem;
  color: #5c4a1f;
}
.rt-sub { margin: 22px 0 10px; font-size: 1.02rem; }
.rt-table-wrap { max-width: 100%; overflow-x: auto; }

/* ---------- 故事骨架 / 名言存折 表格 ---------- */
.rt-doc table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.rt-doc th,
.rt-doc td {
  border: 1px solid var(--line, rgba(20, 33, 28, 0.12));
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.rt-doc th { background: rgba(20, 33, 28, 0.05); font-weight: 800; }
.rt-skeleton td:first-child { font-weight: 700; }

/* ---------- 三阶范本 ---------- */
.rt-model {
  min-width: 0;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line, rgba(20, 33, 28, 0.12));
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 240, 0.6));
}
.rt-model-3 {
  border-color: rgba(217, 107, 66, 0.4);
  background: linear-gradient(180deg, rgba(248, 196, 93, 0.14), rgba(255, 255, 251, 0.75));
}
.rt-model-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.rt-model-head h3 { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 1rem; }
/* 深色小药丸 → 白字加 !important（铁律二） */
.rt-doc .rt-step {
  background-color: #14211c;
  color: #ffffff !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.rt-doc .rt-count {
  white-space: nowrap;
  font-size: 0.78rem;
  color: #4a5b52;               /* 原为 --muted #65776f，小字太淡 */
  background: rgba(20, 33, 28, 0.07);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------- 寓意（意味深长的结尾） ---------- */
.rt-moral-wrap {
  padding: 20px 22px;
  border: 1px solid rgba(217, 107, 66, 0.34);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(248, 196, 93, 0.2), rgba(255, 255, 251, 0.7));
}
.rt-doc .rt-moral-line {
  margin: 0 0 12px !important;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem) !important;
  font-weight: 900;
  line-height: 1.34;
}

/* ---------- 今日名言（深色卡） ---------- */
/* 背景：必须拆成 background-color + background-image。
   若把渐变与纯色写在同一条 background 简写里，一旦渐变不被支持或被覆盖，
   纯色底会跟着一起丢失，而 color:#fff 仍在 → 变成「白底白字」，名言同样消失。 */
.rt-quote {
  margin: 0 0 18px;
  padding: 26px 20px;
  border-radius: 22px;
  text-align: center;
  background-color: #14211c;
  background-image: radial-gradient(circle at 92% 2%, rgba(248, 196, 93, 0.26),
                    rgba(248, 196, 93, 0) 14rem);
  color: #ffffff;
}

/* 🔴 深色卡上的文字：一律夺回控制权。
   `.rt-doc .rt-quote *` 权重 (0,2,0) > `.lesson-document p` (0,1,1)；
   再加 !important —— 这一层是「名言看得见」的最后一道保险，别删。 */
.rt-doc .rt-quote,
.rt-doc .rt-quote * { color: #ffffff !important; }

/* 以下三条权重 (0,3,0) > 上面的 (0,2,0)，所以能各自覆盖 * 规则。
   字体大小也必须在这里显式声明 —— lesson.css 的 `.lesson-document p` 还带了
   font-size: clamp(...)，不加就会被夺走（实测出处小字被撑到 18.56px）。 */
.rt-doc .rt-quote .rt-quote-en {
  margin: 0 0 8px !important;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem) !important;
  font-weight: 900;
  line-height: 1.34;
}
.rt-doc .rt-quote .rt-quote-zh {
  margin: 0 !important;
  color: #ffdf9b !important;    /* 提亮一档的金色，与白字拉开层级 */
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.5;
}
.rt-doc .rt-quote .rt-quote-by {
  margin: 10px 0 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
.rt-link-line {
  background: rgba(207, 238, 218, 0.5);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 0.94rem;
}

/* ---------- 四个孩子 ---------- */
.rt-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
  margin-top: 6px;
}
.rt-case {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line, rgba(20, 33, 28, 0.12));
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 240, 0.55));
}
.rt-case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rt-who { font-weight: 900; font-size: 1.05rem; }
.rt-doc .rt-tag {
  background: rgba(207, 238, 218, 0.75);
  color: #2c4a3c;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
.rt-case p:last-child { margin-bottom: 0; }

/* ---------- 名言存折 ---------- */
.rt-doc .rt-bank { font-size: 0.92rem; }
.rt-doc .rt-bank td:nth-child(1) { width: 46px; text-align: center; font-weight: 800; color: #3f5148; }
.rt-doc .rt-bank td:nth-child(2) { font-weight: 700; }   /* 名言本体加粗，一眼扫得到 */
.rt-doc .rt-bank td:nth-child(4) { color: #3f5148; font-size: 0.87rem; }
.rt-doc .rt-bank td:nth-child(5) {
  white-space: nowrap;
  letter-spacing: 0.14em;
  color: #3f5148;             /* 原为 --muted #65776f，☐ 打勾格太淡看不清 */
  font-size: 1rem;
}
.rt-now { background: rgba(248, 196, 93, 0.22); }
.rt-now td { font-weight: 700; }
/* 复习提示行：深底金字 → !important 兜底（铁律二） */
.rt-doc .rt-row-hi td {
  background-color: #14211c;   /* 用 background-color 而非简写，避免整条样式失效 */
  color: #ffdf9b !important;
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
}

/* ---------- 提示条 ---------- */
.rt-note {
  padding: 13px 16px;
  border-left: 4px solid var(--gold, #f8c45d);
  border-radius: 16px;
  background: rgba(20, 33, 28, 0.05);
  font-size: 0.95rem;
}
.rt-note-end { margin-top: 6px; }

/* ---------- 移动端（家长多用手机） ---------- */
@media (max-width: 640px) {
  .rt-block { margin-bottom: 26px; }
  .rt-model,
  .rt-moral-wrap { padding: 14px; }
  .rt-quote { padding: 22px 15px; }
  .rt-doc .rt-quote .rt-quote-en { font-size: 1.4rem !important; }
  .rt-doc .rt-quote .rt-quote-zh { font-size: 1.18rem; }
  .rt-doc .rt-quote .rt-quote-by { font-size: 0.86rem; }
  .rt-doc th,
  .rt-doc td { padding: 7px 8px; }
  .rt-cases { grid-template-columns: minmax(0, 1fr); }

  /* 🔴 名言存折在手机上 5 列会被挤成一条条竖排小字 → 改成「一句一块」的卡片式 */
  .rt-doc .rt-bank,
  .rt-doc .rt-bank tbody,
  .rt-doc .rt-bank tr,
  .rt-doc .rt-bank td { display: block; width: 100%; }
  .rt-doc .rt-bank thead { display: none; }
  .rt-doc .rt-bank { font-size: 0.98rem; }
  .rt-doc .rt-bank tr {
    border: 1px solid var(--line, rgba(20, 33, 28, 0.12));
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 9px;
    background: rgba(255, 255, 255, 0.68);
  }
  .rt-doc .rt-bank td {
    border: none;
    padding: 2px 0;
    text-align: left !important;
    width: auto !important;
  }
  .rt-doc .rt-bank td:nth-child(1) {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    font-weight: 800;
  }
  .rt-doc .rt-bank td:nth-child(2) { font-size: 1.03rem; line-height: 1.45; }
  .rt-doc .rt-bank td:nth-child(3) { color: #24463a; }
  .rt-doc .rt-bank td:nth-child(4)::before { content: "来自 · "; color: #6a7d73; }
  .rt-doc .rt-bank td:nth-child(5) { font-size: 1.05rem; margin-top: 5px; }
  .rt-doc .rt-bank td:nth-child(5)::before { content: "复习 "; color: #6a7d73; letter-spacing: 0; }
  .rt-doc .rt-bank tr.rt-row-hi {
    background-color: #14211c;
    border-color: #14211c;
  }
  .rt-doc .rt-bank tr.rt-row-hi td { text-align: center !important; }
}