/* ==========================================================================
   冲击波英语 · 语法与写作精品课 · 写作打卡（Write & Review）
   文件位置：/learn/assets/write-review.css
   --------------------------------------------------------------------------
   ★ 全部选择器都以 .wr- 开头，避免和课次页已有的
     .material-tab / .exam-card / .document-card 打架。
   ★ 配色沿用 lesson.css 里的 --gh-* 一套（navy/teal/gold/rust/ink/grey/line/card），
     不另起一套色，否则一眼就看出是后贴上去的。
   --------------------------------------------------------------------------
   ★★★ 2026-10-29：这套样式现在有**两个宿主面板**

     ① #panel-writereview —— 左侧第三个页签「写作打卡」整个面板（本脚本新建）
     ② #panel-handout    —— 学生讲义里的「Write here 正文写在这里」
                            作文框下面注入的一条 .wr-ho 按钮行 + 一个 .wr-fb 结果区

     ⚠️ 踩过的坑（写在这里防止以后又踩）：
        --wr-* 这九个变量原来**只声明在 #panel-writereview 下**。
        讲义面板不在那个选择器里 ⇒ 注入进去的按钮、字数、批改结果
        全部 var() 解析失败 → 按钮没底色、文字没颜色，看上去像「样式丢了」。
        所以变量作用域必须是 `#panel-writereview, #panel-handout`。
        （和 2026-10-28 打印那次 .rv-* 只写在 .me-report 下是同一类错。）
   ========================================================================== */

#panel-writereview,
#panel-handout {
  --wr-navy: #0B3B5C;
  --wr-teal: #0E6B74;
  --wr-gold: #B4861E;
  --wr-rust: #B3441E;
  --wr-ink: #2B2118;
  --wr-grey: #6E655B;
  --wr-line: #EFE3C6;
  --wr-card: #FFFCF3;
  --wr-ok: #12866A;
}

/* ---------------- 顶部说明 ---------------- */
.wr-intro {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-left: 4px solid var(--wr-gold);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
}
.wr-intro h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--wr-navy);
}
.wr-intro p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--wr-grey);
}
.wr-intro .wr-en {
  display: block;
  color: #9A9086;
  font-size: 12.5px;
  margin-top: 2px;
}

/* ---------------- 本课任务 ---------------- */
.wr-task {
  background: #fff;
  border: 1px solid var(--wr-line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
}
.wr-task-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.wr-task-head b {
  font-size: 15px;
  color: var(--wr-navy);
}
.wr-chip {
  display: inline-block;
  font-size: 12px;
  line-height: 1.6;
  padding: 2px 9px;
  border-radius: 999px;
  background: #EEF6F6;
  color: var(--wr-teal);
  border: 1px solid #CFE4E4;
}
.wr-chip--gold {
  background: #FBF3DE;
  color: #8A5A12;
  border-color: #EAD9A8;
}
.wr-task p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--wr-ink);
}
.wr-task .wr-zh {
  color: var(--wr-grey);
  font-size: 13px;
}
.wr-task ul {
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--wr-ink);
}
.wr-task ul li b {
  color: var(--wr-teal);
}

/* ---------------- 写作区 ---------------- */
.wr-editor {
  background: #fff;
  border: 1px solid var(--wr-line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 14px;
}
.wr-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.wr-editor-head b {
  font-size: 16px;
  color: var(--wr-navy);
  font-family: Georgia, "Times New Roman", serif;
}
.wr-editor-head span {
  font-size: 12.5px;
  color: #9A9086;
}
.wr-count {
  font-size: 12.5px;
  color: var(--wr-grey);
  font-variant-numeric: tabular-nums;
}
.wr-count.is-short { color: var(--wr-rust); }
.wr-count.is-good  { color: var(--wr-ok); }

#wrText {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid #DED6C4;
  border-radius: 10px;
  background: #FFFDF8;
  color: var(--wr-ink);
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 15.5px;
  line-height: 1.85;
}
#wrText:focus {
  outline: none;
  border-color: var(--wr-teal);
  box-shadow: 0 0 0 3px rgba(14, 107, 116, .12);
}

/* ---------------- 按钮 ---------------- */
.wr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.wr-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.wr-btn:active { transform: translateY(1px); }
.wr-btn--primary {
  background: var(--wr-teal);
  color: #fff;
  box-shadow: 0 6px 16px rgba(14, 107, 116, .22);
}
.wr-btn--primary:hover { background: #0B5B63; }
.wr-btn--ghost {
  background: #fff;
  color: var(--wr-teal);
  border-color: #CFE4E4;
}
.wr-btn--ghost:hover { background: #F2F8F8; }
.wr-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.wr-hint {
  font-size: 12.5px;
  color: #9A9086;
}

/* 转圈：AI 批改一般 5–10 秒，必须给个明确「在干活」的信号 */
.wr-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wr-spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes wr-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   讲义里的「Write here」那条按钮行（#panel-handout）
   --------------------------------------------------------------------------
   注入位置：紧跟在 .gh-q（作文框外面那个框）之后，所以
     · 上面要留一点空，别贴着 .gh-q 的下边框；
     · 下面那个 #wrHoFb 是同级兄弟，隐藏时不能占位（.wr-fb[hidden] 已管）。
   不加边框、不加底色 —— 它长在 .document-card 里面，
   再套一层卡片会变成「框里套框」。
   ========================================================================== */
.wr-ho {
  margin: 12px 0 0;
}
/* 讲义里按钮比写作打卡面板里略小一点：这一行是「顺手点一下」，
   不该抢走作文框的视觉重量。 */
.wr-ho .wr-btn {
  padding: 9px 20px;
  font-size: 14px;
}
.wr-ho .wr-count,
.wr-ho .wr-hint {
  font-size: 12.5px;
}
/* 结果区紧贴按钮行，且左右与 .gh-q 对齐（.gh-q 自身没有外边距，不用补） */
.wr-ho + .wr-fb {
  margin: 14px 0 18px;
}

/* 打印讲义时把这条按钮行收掉 —— 纸上的「AI 精批」按钮点不动，只会添乱。
   #wrHoFb 里的批改内容**不隐藏**：那是孩子要带走的东西。 */
@media print {
  .wr-ho { display: none !important; }
}

/* ---------------- 批改结果 ---------------- */
.wr-fb {
  margin: 0 0 16px;
  border: 1px solid #CFE4E4;
  border-radius: 12px;
  background: #FBFEFE;
  padding: 18px;
}
.wr-fb[hidden] { display: none; }

.wr-fb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.wr-score {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid var(--wr-teal);
  color: var(--wr-navy);
  line-height: 1;
}
.wr-score b { font-size: 25px; font-family: Georgia, serif; }
.wr-score small { font-size: 11px; color: #9A9086; margin-top: 3px; }
.wr-band { flex: 1 1 220px; min-width: 180px; }
.wr-band p {
  margin: 0 0 5px;
  font-size: 15.5px;
  color: var(--wr-ink);
  line-height: 1.6;
}
.wr-stars { color: var(--wr-gold); font-size: 16px; letter-spacing: 2px; }
.wr-stars i { font-style: normal; color: #E2D9C6; }

.wr-block { margin-top: 14px; }
.wr-block h4 {
  margin: 0 0 7px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--wr-grey);
  font-weight: 700;
}
.wr-good {
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--wr-ink);
}
.wr-good li::marker { color: var(--wr-ok); }

.wr-fix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.wr-fix th {
  text-align: left;
  background: #FBF3DE;
  color: #8A5A12;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-bottom: 1px solid #EAD9A8;
  white-space: nowrap;
}
.wr-fix td {
  padding: 8px 10px;
  border-bottom: 1px solid #F0EADC;
  vertical-align: top;
  line-height: 1.65;
}
.wr-fix tr:last-child td { border-bottom: none; }
.wr-fix .wr-wrong { color: var(--wr-rust); text-decoration: line-through; text-decoration-color: rgba(179, 68, 30, .45); }
.wr-fix .wr-right { color: var(--wr-ok); font-weight: 600; }
.wr-fix .wr-why { color: var(--wr-grey); font-size: 13px; }

.wr-next {
  margin: 0;
  padding: 11px 14px;
  background: #FBF3DE;
  border-left: 3px solid var(--wr-gold);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: #6B4A10;
}

.wr-rewrite {
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px dashed #CFE4E4;
  border-radius: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.9;
  color: var(--wr-ink);
  white-space: pre-wrap;
}

/* ---------------- 打卡记录 ---------------- */
.wr-log {
  background: #fff;
  border: 1px solid var(--wr-line);
  border-radius: 12px;
  padding: 16px 18px;
}
.wr-log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.wr-log-head b {
  font-size: 15px;
  color: var(--wr-navy);
}
.wr-log-head span {
  font-size: 12.5px;
  color: #9A9086;
}
.wr-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wr-log-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed #EFE7D6;
  font-size: 13.5px;
  color: var(--wr-ink);
}
.wr-log-list li:last-child { border-bottom: none; }
.wr-log-list .wr-d {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--wr-grey);
  font-size: 12.5px;
}
.wr-log-list .wr-s {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--wr-teal);
  font-variant-numeric: tabular-nums;
}
.wr-log-list .wr-b {
  flex: 1 1 180px;
  color: var(--wr-grey);
  font-size: 13px;
}
.wr-empty {
  margin: 0;
  font-size: 13.5px;
  color: #9A9086;
  line-height: 1.8;
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 640px) {
  .wr-score { width: 62px; height: 62px; border-width: 2px; }
  .wr-score b { font-size: 21px; }
  .wr-fix { font-size: 12.5px; }
  .wr-fix th, .wr-fix td { padding: 6px 7px; }
  #wrText { min-height: 160px; font-size: 15px; }
}