/* ============================================================
   css/panels/panels-writing.css — 「外文 · 写作」（第 5 窗口，前缀 wr- 独占）
   ------------------------------------------------------------
   这一份只写「写作」那一块特有的排版：今天写什么那一行、倒计时、字数、
   问题地图（一稿之后只给指向）、二稿对比、揭开的改法、错误库、两档清理。
   公共零件（返回头 / 目录行 / 按钮 / 分段 / 选择行 / 抽屉）一律复用，
   这里**不重写**：类名重复两处＝改一处不生效（长期规则 #214）。
   令牌一律吃 --ec-*（唯一一份在 panels-learning.css），这里**不新增变量**。
   铁律：不用 emoji、不用渐变字、不用彩色边框、细线为主、触摸目标 44。
   窄屏 <370 收紧、≥400 放宽、深色成套、prefers-reduced-motion 有替代。
   动效口径照手册 2.4：按钮 0.16s + :active scale(.96)，列表行只挪 4px。
   ============================================================ */

/* ===== 页首第一视觉（今天写什么）=====
   第 11 窗口修（甲方实报「那些页所有内容都贴着边」）：这一块与下面那条脚注都是
   **直接挂在 #vocab-content 上的**，而它们只有纵向内边距 —— 于是标题与说明从屏幕最左边贴到最右边。
   2028w12learn1 统一：三档留白不再各写一遍，改成认全模块那一个 --ec-gutter
   （定义在 panels-ec-ui.css，<370=14 / 平时=24 / ≥400=26）。 */
.wr-lead { padding: 2px 0 14px; margin-left: var(--ec-gutter); margin-right: var(--ec-gutter); }
.wr-lead-en {
    font-family: 'Playfair Display', 'Great Vibes', serif; font-style: italic;
    font-size: 13px; letter-spacing: 0.06em; color: var(--ec-faint); margin-bottom: 4px;
}
.wr-lead-h {
    font-family: var(--font-display, var(--font-body)); font-size: 24px; line-height: 1.28;
    color: var(--ec-ink); letter-spacing: 0.01em;
}
.wr-lead-sub { margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: var(--ec-sub); }

/* ===== 一排真数字（细线上下夹，不堆卡片）===== */
.wr-facts {
    display: flex; align-items: stretch; flex-wrap: wrap;
    border-top: 1px solid var(--ec-line); border-bottom: 1px solid var(--ec-line);
    margin-top: 4px;
}
.wr-fact { flex: 1 1 25%; min-width: 72px; padding: 13px 4px 11px; text-align: center; border-left: 1px solid var(--ec-line); }
.wr-fact:first-child { border-left: 0; }
.wr-fact-v { display: block; font-size: 17px; color: var(--ec-ink); line-height: 1.15; }
.wr-fact-v i { font-style: normal; font-size: 10.5px; color: var(--ec-faint); margin-left: 1px; }
.wr-fact-k { display: block; font-size: 11px; color: var(--ec-sub); margin-top: 5px; }

/* ===== 首页与列表里的小零件 ===== */
.wr-hint-line { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--ec-sub); }
.wr-foot-note {
    margin: 22px 24px 4px; padding: 14px 0 0;
    border-top: 1px solid var(--ec-line-soft);
    font-size: 11.5px; line-height: 1.8; color: var(--ec-faint);
}
.wr-empty-note { font-size: 12.5px; line-height: 1.85; color: var(--ec-sub); padding: 4px 0 2px; }
.wr-dot {
    flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ec-line-strong); margin-top: 2px;
}
.wr-dot.is-writing { background: var(--ec-rose-ink); }
.wr-dot.is-revised { background: var(--ec-sage-ink); }
.wr-dot.is-done { background: var(--ec-gold-ink); }

/* ===== 出一篇：选择行（复用 .ec-choice，这里只排里面那两行字）===== */
.wr-choices { margin-top: 2px; }
.wr-choice-t { display: block; font-size: 13.5px; color: var(--ec-ink); }
.wr-choice-d { display: block; font-size: 11.5px; color: var(--ec-sub); margin-top: 2px; line-height: 1.6; }

/* ===== 写作界面：题目与要求 ===== */
.wr-brief { padding: 2px 0 12px; border-bottom: 1px solid var(--ec-line-soft); }
.wr-brief-topic {
    font-family: var(--font-display, var(--font-body)); font-size: 19px; line-height: 1.4;
    color: var(--ec-ink);
}
.wr-brief-line { margin-top: 8px; font-size: 12.5px; line-height: 1.8; color: var(--ec-sub); }
.wr-brief-meta { margin-top: 10px; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 11px; color: var(--ec-faint); }
.wr-material {
    font-size: 13px; line-height: 1.95; color: var(--ec-ink);
    border: 1px solid var(--ec-line-soft); border-radius: var(--ec-radius-s);
    background: var(--ec-surface-2); padding: 13px 15px;
}

/* 倒计时（在返回头右侧）：只有快到点与超时才变色，平时安静 */
.wr-clock { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ec-sub); letter-spacing: 0.04em; }
.wr-clock.is-soon { color: var(--ec-gold-ink); }
.wr-clock.is-over { color: var(--ec-rose-ink); }

/* 写的那一大块 */
/* ★ 2028w12learn2（第二批）：甲方实报「如果写多了，键盘会遮住输入栏」。
   全站那套键盘避让是 --kbd-h（由导航脚本实时更新，见 css/core.css:384），
   这一屏从前来没接 —— 现在给 .wr-page 垫上键盘高度，输入区与下面那两颗按钮
   都能滚到键盘上方（安卓恒为 0，零影响）。 */
.wr-page { padding-bottom: var(--kbd-h, 0px); }
.wr-field { padding: 4px 0 0; }
.wr-text {
    min-height: 220px; line-height: 1.95; font-size: 14px;
    font-family: var(--font-display, var(--font-body));
}
.wr-count { margin-top: 7px; font-size: 11.5px; color: var(--ec-faint); }
.wr-count.is-warn { color: var(--ec-rose-ink); }

/* ===== 批改结果：分 / 七个维度 / 总评 / 写得好的地方 ===== */
.wr-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 0 12px; }
.wr-score-v { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--ec-ink); }
.wr-score-k { font-size: 12.5px; color: var(--ec-sub); }
.wr-score-note { font-size: 11px; color: var(--ec-faint); margin-left: auto; }

.wr-dims { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 12px; }
.wr-dim { display: grid; grid-template-columns: 66px 1fr 30px; align-items: center; gap: 10px; }
.wr-dim-k { font-size: 12px; color: var(--ec-sub); }
.wr-track { position: relative; height: 1.5px; border-radius: 2px; background: var(--ec-line); }
.wr-track-fill {
    position: absolute; left: 0; top: -0.5px; height: 2.5px; border-radius: 2px;
    background: var(--ec-rose-ink); transition: width 0.5s var(--ec-ease);
}
.wr-dim[data-level="high"] .wr-track-fill { background: var(--ec-sage-ink); }
.wr-dim[data-level="low"] .wr-track-fill { background: var(--ec-gold-ink); }
.wr-dim-v { font-size: 12.5px; color: var(--ec-ink); text-align: right; font-variant-numeric: tabular-nums; }

.wr-note {
    padding: 12px 0 2px; font-size: 13px; line-height: 1.9; color: var(--ec-ink);
    border-top: 1px solid var(--ec-line-soft);
}
.wr-good { padding: 12px 0 2px; }
.wr-good-t { font-size: 11.5px; color: var(--ec-sage-ink); letter-spacing: 0.06em; margin-bottom: 6px; }
.wr-good-row { font-size: 12.5px; line-height: 1.8; color: var(--ec-sub); padding-left: 10px; position: relative; }
.wr-good-row::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 4px; height: 1px; background: var(--ec-line-strong); }

.wr-warn {
    margin: 2px 0 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.75; color: var(--ec-ink);
    border: 1px solid rgba(201,140,140,0.4); border-radius: var(--ec-radius-s);
    background: rgba(201,140,140,0.08);
}

/* ===== 问题地图（一稿之后只给指向）/ 揭开的改法 ===== */
.wr-clues { padding-top: 12px; border-top: 1px solid var(--ec-line-soft); }
.wr-clues-t { font-size: 11.5px; color: var(--ec-rose-ink); letter-spacing: 0.06em; margin-bottom: 8px; }
.wr-clue { padding: 10px 0 11px; border-bottom: 1px solid var(--ec-line-soft); }
.wr-clue:last-child { border-bottom: 0; }
.wr-clue-top { display: flex; align-items: center; gap: 8px; }
.wr-clue-idx {
    flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--ec-line-strong); color: var(--ec-sub);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-style: italic; font-size: 11px;
}
.wr-clue-kind { font-size: 12px; color: var(--ec-rose-ink); }
.wr-clue-where { font-size: 11px; color: var(--ec-faint); }
.wr-clue-quote {
    margin-top: 7px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.7;
    color: var(--ec-ink); background: var(--ec-fill); border-radius: 6px; padding: 7px 9px; word-break: break-word;
}
.wr-clue-hunch { margin-top: 7px; font-size: 13px; line-height: 1.8; color: var(--ec-ink); }
.wr-clue-why { margin-top: 6px; font-size: 12.5px; line-height: 1.8; color: var(--ec-sub); }
.wr-clue-fix {
    margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--ec-sage-ink);
    font-size: 12.5px; line-height: 1.85; color: var(--ec-ink); word-break: break-word;
}

/* ===== 稿子原文与两稿对比 ===== */
.wr-essay {
    margin-top: 12px; padding: 13px 15px;
    border: 1px solid var(--ec-line-soft); border-radius: var(--ec-radius-s);
    background: var(--ec-surface-2);
    font-size: 13px; line-height: 1.95; color: var(--ec-ink); white-space: pre-wrap; word-break: break-word;
}
.wr-diff-line { font-size: 12.5px; line-height: 1.8; color: var(--ec-ink); padding-bottom: 8px; }
.wr-diff-rows { padding-bottom: 4px; }
.wr-diff-row {
    display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--ec-line-soft); font-size: 12px;
}
.wr-diff-quote {
    flex: 1 1 auto; min-width: 0; color: var(--ec-sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-diff-mark { flex: 0 0 auto; color: var(--ec-faint); }
.wr-diff-row[data-state="done"] .wr-diff-mark { color: var(--ec-sage-ink); }
.wr-diff-row[data-state="left"] .wr-diff-mark { color: var(--ec-rose-ink); }

/* ===== 错误库 ===== */
.wr-micro {
    padding: 12px 0 13px; border-bottom: 1px solid var(--ec-line-soft);
}
.wr-micro:last-child { border-bottom: 0; }
.wr-micro-t { font-size: 13.5px; color: var(--ec-ink); }
.wr-micro-w { margin: 5px 0 9px; font-size: 12px; line-height: 1.75; color: var(--ec-sub); }
.wr-err-fixed { cursor: default; opacity: 0.8; padding-left: 2px; }
.wr-err-fixed:active { padding-left: 2px; background: none; }

/* ===== 这一块存了什么：两档清理 ===== */
.wr-clear-row { padding: 12px 0 13px; border-bottom: 1px solid var(--ec-line-soft); }
.wr-clear-row:last-child { border-bottom: 0; }
.wr-clear-t { font-size: 13.5px; color: var(--ec-ink); }
.wr-clear-w { margin: 5px 0 10px; font-size: 12px; line-height: 1.75; color: var(--ec-sub); }

/* ===== 怎么用（问答，与语法那一页同款排版）===== */
.wr-faq { padding: 12px 0 13px; border-bottom: 1px solid var(--ec-line-soft); }
.wr-faq:last-child { border-bottom: 0; }
.wr-faq-q { font-size: 13px; color: var(--ec-ink); padding-bottom: 5px; }
.wr-faq-a { font-size: 12.5px; line-height: 1.85; color: var(--ec-sub); }

/* ===== 窄屏 <370：收紧一点，不许横向溢出 ===== */
@media (max-width: 369px) {
    .wr-lead-h { font-size: 21px; }
    .wr-fact { flex: 1 1 50%; padding: 11px 2px 9px; }
    .wr-fact:nth-child(3) { border-left: 0; }
    .wr-dim { grid-template-columns: 58px 1fr 26px; gap: 8px; }
    .wr-brief-topic { font-size: 17px; }
    .wr-text { min-height: 190px; }
    .wr-clue-quote { font-size: 11.5px; }
}

/* ===== 大屏（≥400）：留白放宽，别把字挤在一起 ===== */
@media (min-width: 400px) {
    .wr-lead-h { font-size: 25px; }
    .wr-text { min-height: 260px; }
    .wr-dim { grid-template-columns: 72px 1fr 32px; }
}

/* ===== 深色（成套，不是零散补几条）===== */
[data-theme-mode="dark"] .wr-clue-quote { background: rgba(212,184,140,0.10); }
[data-theme-mode="dark"] .wr-clue-fix { border-left-color: var(--ec-sage-ink); }
[data-theme-mode="dark"] .wr-material,
[data-theme-mode="dark"] .wr-essay { background: var(--ec-surface-2); border-color: var(--ec-line-soft); }
[data-theme-mode="dark"] .wr-warn {
    border-color: rgba(208,166,166,0.42); background: rgba(208,166,166,0.10);
}

/* ===== 减少动效（系统设置里关掉动效的人）===== */
@media (prefers-reduced-motion: reduce) {
    .wr-track-fill { transition: none; }
    .wr-lead, .wr-fact, .wr-clue { animation: none; }
}