/* 写作台（2026-09-02）
 *
 * 视觉取材于孩子真实在写的那张纸：方格稿纸。绿格线、宋体正文、朱笔批注——
 * 这三样是中文作文课的物质现实，比任何通用卡片更贴题。
 * 颜色一律走 style.css 已有的 token，不另起一套；只在稿纸绿和朱批红上加两个专用变量。
 *
 * 一条克制的原则：孩子写的字是主角。评价、档位、按钮都退到它后面去。
 */
:root {
  --essay-grid: rgba(120, 160, 130, .34);      /* 稿纸格线 */
  --essay-grid-soft: rgba(120, 160, 130, .13);
  --essay-zhu: #b0332a;                         /* 朱批：只用在"要改的那一处" */
  --essay-zhu-wash: rgba(176, 51, 42, .07);
  --essay-met: #3d7a52;                         /* 到了 */
  --essay-strength: #b8860b;                    /* 亮点 */
  --essay-serif: 'Songti SC', 'STSong', 'SimSun', Georgia, serif;
}

/* ── 写作台：接管板书区，跟听写台同一套占位方式 ───────────────────────── */
/* 写作台要比听写台高：听写只有进度点和三个按钮，写作要摊开一整篇作文。
   板书面板实测只有 166px 可视高——那点地方连稿纸都放不下（9/2 实测第 3 屏
   稿纸区被挤没了，孩子看不见自己写的字，而那正是这一屏的主角）。
   所以往上盖住摄像头预览：写作的时候本来也不需要看画面。 */
#essay-stage {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
  top: auto; height: min(640px, 78vh); min-height: 380px;
  display: flex; flex-direction: column;
  background: var(--card); backdrop-filter: var(--glass-blur, none);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 -18px 44px rgba(30, 50, 90, .14);
  overflow: hidden;
}
#essay-stage.hidden { display: none; }

.essay-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); flex: none;
}
.essay-head .et {
  font-family: var(--essay-serif); font-size: 17px; font-weight: 600; letter-spacing: .5px;
}
.essay-head .stage-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--essay-grid-soft); color: var(--ink-soft);
  border: 1px solid var(--essay-grid); letter-spacing: .3px;
}
.essay-head .sp { flex: 1; }
.essay-head button { padding: 7px 13px; font-size: 13.5px; border-radius: 9px; }

.essay-body { flex: 1; overflow-y: auto; padding: 20px 22px 26px; }
.essay-body::-webkit-scrollbar { width: 8px; }
.essay-body::-webkit-scrollbar-thumb { background: var(--essay-grid); border-radius: 4px; }

/* ── 步骤条：四步，走到哪亮到哪 ─────────────────────────────────────── */
.essay-steps { display: flex; align-items: center; gap: 0; margin: 0 0 20px; }
.essay-steps .s {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft);
}
.essay-steps .s .n {
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  border: 1.4px solid var(--essay-grid); font-size: 11.5px; font-variant-numeric: tabular-nums;
  background: transparent; transition: all .2s ease;
}
.essay-steps .s.on .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.essay-steps .s.on { color: var(--ink); font-weight: 500; }
.essay-steps .s.done .n { background: var(--essay-met); border-color: var(--essay-met); color: #fff; }
.essay-steps .bar { flex: 1; height: 1.4px; background: var(--essay-grid-soft); margin: 0 9px; }

/* ── 题目卡：题面用宋体，像卷子上印的那样 ───────────────────────────── */
.essay-prompt {
  font-family: var(--essay-serif); font-size: 16px; line-height: 1.9;
  padding: 16px 18px; border-left: 3px solid var(--essay-grid);
  background: var(--essay-grid-soft); border-radius: 0 10px 10px 0; margin: 0 0 18px;
  white-space: pre-wrap;
}

/* ── 老师的第一个问题：这是引导的全部，不给方向清单 ─────────────────── */
.essay-ask {
  font-family: var(--essay-serif); font-size: 17.5px; line-height: 1.85;
  margin: 0 0 8px; text-wrap: balance;
}
.essay-ask-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.7; }

/* ── 稿纸：识别出来的正文落在方格上 ─────────────────────────────────── */
.essay-paper {
  position: relative; border: 1px solid var(--essay-grid); border-radius: 10px;
  background:
    linear-gradient(var(--essay-grid-soft) 1px, transparent 1px) 0 0 / 100% 34px,
    var(--card);
  padding: 14px 16px; min-height: 180px;
}
.essay-paper textarea {
  width: 100%; min-height: 200px; border: 0; background: transparent; padding: 0;
  font-family: var(--essay-serif); font-size: 16.5px; line-height: 34px;
  color: var(--ink); resize: vertical; outline: none;
}
.essay-paper textarea::selection { background: rgba(47, 107, 255, .16); }

.essay-meta {
  display: flex; align-items: center; gap: 14px; margin: 10px 2px 0;
  font-size: 12.5px; color: var(--ink-soft);
}
.essay-meta .n { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.essay-meta .warn { color: var(--essay-zhu); }

/* 未识别字：▢ 要显眼，但不能吓人 */
.essay-unclear {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--essay-zhu-wash); color: var(--essay-zhu);
  padding: 3px 9px; border-radius: 7px; font-size: 12.5px;
}

/* ── 六维出档 ──────────────────────────────────────────────────────── */
.essay-dims { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin: 4px 0 20px; }
.essay-dim { background: var(--card); padding: 14px 16px; }
.essay-dim .top { display: flex; align-items: baseline; gap: 10px; }
.essay-dim .nm { font-family: var(--essay-serif); font-size: 15.5px; font-weight: 600; }
.essay-dim .lv {
  font-size: 11.5px; padding: 2.5px 9px; border-radius: 999px; letter-spacing: .4px;
  border: 1px solid var(--essay-grid); color: var(--ink-soft); background: transparent;
}
.essay-dim .lv.met { color: var(--essay-met); border-color: var(--essay-met); }
.essay-dim .lv.strength { color: var(--essay-strength); border-color: var(--essay-strength);
  background: rgba(184, 134, 11, .07); }
.essay-dim .asks { font-size: 12px; color: var(--ink-soft); margin-left: auto; }
.essay-dim .quote {
  font-family: var(--essay-serif); font-size: 14.5px; line-height: 1.8; margin: 9px 0 0;
  padding-left: 12px; border-left: 2px solid var(--essay-grid); color: var(--ink);
}
.essay-dim .note { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); margin: 7px 0 0; }
.essay-dim .typos { margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.essay-dim .typo {
  font-size: 13px; padding: 3px 9px; border-radius: 7px;
  background: var(--essay-zhu-wash); color: var(--essay-zhu); font-family: var(--essay-serif);
}
.essay-dim .typo b { font-weight: 600; }

/* ── 只给一条：整页最重的一块 ───────────────────────────────────────── */
.essay-onefix {
  border: 1.4px solid var(--essay-zhu); border-radius: 12px; overflow: hidden; margin: 0 0 8px;
}
.essay-onefix .hd {
  background: var(--essay-zhu-wash); padding: 9px 16px; font-size: 12px;
  letter-spacing: .8px; color: var(--essay-zhu);
}
.essay-onefix .bd { padding: 15px 17px; }
.essay-onefix .say {
  font-family: var(--essay-serif); font-size: 17px; line-height: 1.85; margin: 0; text-wrap: balance;
}
.essay-onefix .q {
  font-family: var(--essay-serif); font-size: 14.5px; line-height: 1.8;
  margin: 11px 0 0; padding-left: 12px; border-left: 2px solid var(--essay-zhu); color: var(--ink-soft);
}

.essay-allgood {
  font-family: var(--essay-serif); font-size: 17px; line-height: 1.85;
  padding: 16px 18px; border: 1.4px solid var(--essay-met); border-radius: 12px;
  color: var(--essay-met); text-wrap: balance;
}

/* ── 底部动作条 ────────────────────────────────────────────────────── */
.essay-foot {
  display: flex; gap: 10px; align-items: center; padding: 13px 18px;
  border-top: 1px solid var(--line); flex: none;
}
.essay-foot .sp { flex: 1; }
.essay-foot .hint { font-size: 12.5px; color: var(--ink-soft); }
.essay-foot button.primary { min-width: 132px; }

/* ── 等待态 ────────────────────────────────────────────────────────── */
.essay-wait { display: flex; align-items: center; gap: 11px; padding: 26px 4px; color: var(--ink-soft); font-size: 14px; }
.essay-wait .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: essay-pulse 1.1s ease-in-out infinite;
}
.essay-wait .dot:nth-child(2) { animation-delay: .18s; }
.essay-wait .dot:nth-child(3) { animation-delay: .36s; }
@keyframes essay-pulse { 0%,100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .essay-wait .dot { animation: none; opacity: .7; } }

@media (max-width: 640px) {
  .essay-body { padding: 16px 14px 22px; }
  .essay-dim .asks { display: none; }
  .essay-steps .s span:not(.n) { display: none; }
}

/* 折起来的题目：孩子手里有卷子，这里只是"再看一眼"。
   板书面板实测只有 166px 可视高，主次必须让给老师问的那一句。 */
.essay-fold { margin: 4px 0 0; }
.essay-fold summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--ink-soft);
  padding: 6px 0; user-select: none;
}
.essay-fold summary::-webkit-details-marker { display: none; }
.essay-fold summary::before { content: '＋ '; color: var(--accent); font-family: var(--mono, monospace); }
.essay-fold[open] summary::before { content: '− '; }
.essay-fold summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.essay-fold .essay-prompt { margin: 6px 0 0; font-size: 14.5px; line-height: 1.8; }

/* ══ 2026-09-03 重新设计：三个入口 / 两把尺子 / 引证锚回原文的反馈页 ══════ */

/* ── 第 0 步：今天怎么写 + 用哪把尺子 ─────────────────────────────────── */
.essay-entries, .essay-rubrics { display: grid; gap: 9px; margin: 10px 0 0; }
.essay-entries { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.essay-rubrics { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.essay-entry, .essay-rubric {
  text-align: left; background: var(--card); border: 1.4px solid var(--line);
  border-radius: 12px; padding: 13px 15px; cursor: pointer; color: inherit;
  font-family: inherit; transition: border-color .15s, background .15s;
}
.essay-entry:hover, .essay-rubric:hover { border-color: var(--accent); }
.essay-entry b, .essay-rubric b { display: block; font-size: 15px; margin-bottom: 3px; }
.essay-entry span, .essay-rubric span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
/* 选中的那把尺子：只描边不填色——第 0 步没有主角，别跟"今天就改这一句"抢 */
.essay-rubric.on { border-color: var(--accent); border-width: 2px; padding: 12px 14px; }
.essay-rubric.on b { color: var(--accent); }

/* ── 灵感库 ───────────────────────────────────────────────────────────── */
.essay-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.essay-cat {
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 4px 13px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.essay-cat.on { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.essay-sparklist { display: grid; gap: 7px; }
.essay-spark {
  text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 14.5px; line-height: 1.65; cursor: pointer;
  color: inherit; font-family: var(--essay-serif);
}
.essay-spark:hover { border-color: var(--accent); }

/* ── 反馈页：左原文 / 右尺子 ──────────────────────────────────────────── */
/* 「今天就改这一句」是页面上【唯一的实色元素】。别的全是低对比度的浅底——
   信息全给了，注意力没有被分散。这就是「全展开 + 高亮一条」的落地方式。 */
/* 朱批条要【短】：真人实测第一版引了一整句 33 字的原文 + 一段绕圈子的话，
   把反馈页上半屏整个吃掉，原文和维度栏被挤到屏幕外——而那两样才是这一屏的主体。
   引文截断到 24 字（点一下就跳到原文里那一整句，不必在这儿铺开），并给整条封顶。 */
.essay-onefix { cursor: pointer; max-height: 152px; overflow: hidden; }
.essay-onefix .say { font-size: 15.5px; line-height: 1.7; }
.essay-onefix .q { margin-top: 8px; font-size: 13.5px; }
.essay-onefix .hd { background: var(--essay-zhu); color: #fff; font-weight: 650; }

.essay-feed { display: grid; grid-template-columns: 1fr 176px; gap: 12px; margin: 12px 0 0; }
.essay-paperview {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 14px 16px; font-family: var(--essay-serif); font-size: 15px; line-height: 2.05;
  max-height: 320px; overflow-y: auto; white-space: normal;
}
/* 被引用过的句子自带浅底：孩子扫一眼就知道老师读到了他哪几句 */
.essay-paperview mark {
  background: var(--essay-grid-soft); color: inherit; border-radius: 3px; padding: 1px 2px;
  transition: background .18s;
}
/* 【选中态不能只靠底色深浅】加一道下划线，浅底之间才一眼分得开 */
.essay-paperview mark.on {
  background: rgba(184, 134, 11, .22);
  box-shadow: 0 0 0 2px rgba(184, 134, 11, .22), inset 0 -2px 0 var(--accent);
}
.essay-paperview mark[data-d="__fix"].on {
  background: var(--essay-zhu-wash);
  box-shadow: 0 0 0 2px var(--essay-zhu-wash), inset 0 -2px 0 var(--essay-zhu);
}

.essay-rail { display: flex; flex-direction: column; gap: 5px; }
.essay-railhd { font-size: 11.5px; letter-spacing: 1px; color: var(--ink-soft); padding: 0 2px 2px; }
.essay-rdim {
  display: flex; align-items: center; gap: 7px; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 9px; font-size: 13px; color: inherit; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.essay-rdim:hover { border-color: var(--accent); }
.essay-rdim[aria-pressed="true"] { border-color: var(--accent); background: var(--essay-grid-soft); }
.essay-rdim .dot { width: 13px; text-align: center; line-height: 1; }
.essay-rdim .nm { flex: 1; }
.essay-rdim .lv { font-size: 11px; color: var(--ink-soft); }
/* 三档用形状分，颜色只帮忙。【「还没到」绝不用红色】——它不是错，是还没走到；
   红色留给错别字，那才是确定的错。 */
.essay-rdim.strength .dot { color: var(--essay-strength); }
.essay-rdim.met .dot { color: var(--essay-met); }
.essay-rdim.not_yet .dot { color: var(--line); }
/* 引不出原文的维度点了不亮，鼠标上去也该看得出来 */
.essay-rdim[data-noquote] { opacity: .72; }

.essay-dimnote { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); margin: 9px 2px 0; min-height: 1.2em; }
.essay-dimnote b { color: var(--ink); margin-right: 6px; }

.essay-typobar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--essay-zhu);
}
.essay-typobar > b { letter-spacing: .5px; }
.essay-typobar .typo { border: 1px solid var(--essay-zhu-wash); border-radius: 6px; padding: 1px 7px; }

@media (max-width: 620px) {
  /* 单列堆叠，顺序即优先级：改哪一句 → 原文 → 维度 → 错别字 */
  .essay-feed { grid-template-columns: 1fr; }
  .essay-rail { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .essay-railhd { display: none; }
  .essay-rdim { flex: 0 0 auto; }
}

/* ── 写作讨论（W4/W5）：只在评价出来之后开 ───────────────────────────── */
.essay-chat-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.essay-chat-hd .hint { font-size: 12px; color: var(--ink-soft); }
.essay-chat {
  display: flex; flex-direction: column; gap: 9px;
  max-height: 300px; overflow-y: auto; padding: 2px;
}
.essay-chat .msg {
  max-width: 82%; padding: 9px 13px; border-radius: 13px; font-size: 14.5px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}
.essay-chat .msg.teacher {
  align-self: flex-start; background: var(--card); border: 1px solid var(--line);
  font-family: var(--essay-serif);
}
.essay-chat .msg.child { align-self: flex-end; background: var(--essay-grid-soft); }
/* 出站扫描拦下过替写句子：留一个小手势，孩子看得见"老师本来要替我写，被拦住了" */
.essay-chat .msg .guarded { margin-left: 6px; opacity: .55; font-size: 12px; }

.essay-foot #essay-say {
  flex: 1; min-width: 90px; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; font-family: inherit; background: var(--card); color: inherit;
}
.essay-foot #essay-say:focus { outline: none; border-color: var(--accent); }
.essay-foot #essay-mic { padding: 6px 11px; font-size: 15px; }
.essay-foot #essay-mic.on { border-color: var(--essay-zhu); color: var(--essay-zhu); }
.essay-speak { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ── 低段那一屏（1-2 年级）：只有回应和摘出来的那一句 ────────────────── */
/* 没有维度、没有"改这一句"、没有错别字栏。
   依据《儿童读写三十讲》：低段「写错字了不要紧，语无伦次也不要紧，重要的是喜欢写」。 */
.essay-respond { margin-bottom: 14px; }
.essay-respond .say {
  font-family: var(--essay-serif); font-size: 17px; line-height: 1.9; margin: 0 0 14px;
  text-wrap: balance;
}
.essay-respond .pick {
  border: 1.4px solid var(--essay-strength); border-radius: 12px; padding: 13px 16px;
  background: rgba(184, 134, 11, .06);
}
.essay-respond .pick > b {
  display: block; font-size: 12px; letter-spacing: .8px; color: var(--essay-strength); margin-bottom: 7px;
}
.essay-respond .pick .q {
  font-family: var(--essay-serif); font-size: 16px; line-height: 1.85; margin: 0;
}
.essay-respond .pick .why { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 0; }

/* ── 第四入口 · 写作里程（B4，2026-09-03）────────────────────────────── */
/* 「我就是想写写」跟另外三个入口视觉上要有区别：它不是一条评价链的开头。
   用朱砂色的细边把它跟上面三条隔开——一眼看得出这条路不通向出档。 */
.essay-entry.free { border-color: var(--essay-zhu); background: var(--essay-zhu-wash); }
.essay-entry.free > b { color: var(--essay-zhu); }

.essay-mile {
  margin: 18px 2px 0; font-size: 13px; color: var(--ink-soft); text-align: center;
}
.essay-mile b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── 文体骨架（B3）─────────────────────────────────────────────────── */
/* 【视觉上必须跟六维分得开】它是并排的另一件事，不是维度的一部分。
   六维用的是右栏的按钮列，骨架横着排——形状不同，一眼不会看混。 */
.essay-skelhint {
  margin: 14px 0 0; padding: 12px 15px; border-left: 2.5px solid var(--essay-grid);
  background: var(--essay-grid-soft); border-radius: 0 9px 9px 0;
}
.essay-skelhint > b { display: block; font-size: 13px; margin-bottom: 8px; }
.essay-skelhint ol { margin: 0; padding-left: 18px; }
.essay-skelhint li { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.essay-skelhint li b { color: var(--ink); margin-right: 6px; }
.essay-skelhint .note { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }

.essay-skel { margin: 14px 0 0; }
.essay-skel .hd {
  font-size: 12px; letter-spacing: .8px; color: var(--ink-soft); margin-bottom: 8px;
}
.essay-skel .hd .n { font-variant-numeric: tabular-nums; color: var(--ink); }
.essay-skel .row { display: flex; flex-wrap: wrap; gap: 8px; }
.essay-skel .p {
  flex: 1 1 150px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
}
.essay-skel .p.hit { border-color: var(--essay-met); background: var(--essay-grid-soft); }
.essay-skel .p.missing { opacity: .72; border-style: dashed; }
.essay-skel .p > b { display: block; font-size: 13.5px; }
.essay-skel .p .s { font-size: 11.5px; color: var(--ink-soft); }
.essay-skel .p.hit .s { color: var(--essay-met); }
.essay-skel .p .q {
  display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.essay-skel .note { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }

/* 文体切换（确认屏上那一小条） */
.essay-genre { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.essay-genre > summary { cursor: pointer; padding: 4px 0; }
.essay-genre > summary b { color: var(--ink); }
.essay-genre .pick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.essay-genre .g {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: inherit; cursor: pointer; text-align: left; font-family: inherit;
}
.essay-genre .g.on { border-color: var(--accent); }
.essay-genre .g > b { display: block; font-size: 13px; }
.essay-genre .g > span { font-size: 11.5px; color: var(--ink-soft); }

/* ── 发现故事的四问（B5）───────────────────────────────────────────── */
.essay-paper.sm textarea { min-height: 92px; }
.essay-found { margin: 14px 0 0; padding-left: 20px; }
.essay-found li { margin-bottom: 10px; }
.essay-found .q { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.essay-found .a {
  display: block; font-family: var(--essay-serif); font-size: 15px; line-height: 1.8; margin-top: 2px;
}
.essay-findclose {
  margin: 14px 0 0; padding: 13px 16px; border: 1.4px solid var(--essay-strength);
  border-radius: 12px; background: rgba(184, 134, 11, .06);
}
.essay-findclose .q { font-family: var(--essay-serif); font-size: 15.5px; line-height: 1.8; margin: 0; }
.essay-findclose .why { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.essay-findclose .say { font-size: 15px; line-height: 1.8; margin: 11px 0 0; }
.essay-progress { margin: 14px 0 0; font-size: 12px; color: var(--ink-soft); }

/* ── 我写过的（B4 第三件事）─────────────────────────────────────────── */
/* 【只是目录，不是成绩单】没有档位、没有分数、没有"改了没改"。 */
.essay-milebox { margin: 12px 0 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; }
.essay-milebox .row { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.essay-milebox .row b {
  font-size: 20px; font-variant-numeric: tabular-nums; margin-left: 10px;
}
.essay-milebox .row b:first-child { margin-left: 0; }
.essay-milebox .row span { font-size: 12.5px; color: var(--ink-soft); }
/* 一周一行，四行——正好对上底下那句"最近四周"。
   14 列铺满整宽时每格 27px，又胖又不像日历（2026-09-03 浏览器实测量的）。 */
.essay-milebox .grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px;
  max-width: 196px;
}
.essay-milebox .grid i {
  aspect-ratio: 1; border-radius: 3px; background: var(--essay-grid-soft);
  border: 1px solid var(--essay-grid);
}
.essay-milebox .grid i.on { background: var(--essay-zhu); border-color: var(--essay-zhu); }
.essay-milebox .note { display: block; margin-top: 9px; font-size: 12px; color: var(--ink-soft); }

.essay-works { display: flex; flex-direction: column; gap: 9px; }
.essay-works .wk { padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; }
.essay-works .wk .t { font-size: 14px; }
.essay-works .wk .o {
  font-family: var(--essay-serif); font-size: 13px; color: var(--ink-soft);
  line-height: 1.7; margin-top: 3px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.essay-works .wk .m {
  margin-top: 6px; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}