/* 石油公文写作助手 —— 页面样式
 *
 * 设计意图：这是给石油企业文秘用的工具，读者多是四五十岁、第一次用 AI 的人。
 * 所以整页按"公文"的视觉习惯来做：
 *   - 顶部一条公文红反线（红头文件里标题下面那条线），一眼看出这是写公文的地方；
 *   - 表单部分用无衬线体（界面），文稿部分（大纲标题、全文）用宋体，让人一看就知道"这块是我的稿子"；
 *   - 左边一条竖线串起 1234 四步，做完一步圆圈变蓝，没轮到的一步是灰的，避免用户不知道下一步点哪。
 * 颜色只有三种有含义：红＝提醒和出错，蓝＝可以点、正在做，绿＝做完了。
 * 字体全部用系统自带的，不连任何外网，断网也能打开。
 */

/* ---------- 颜色和字体的统一定义，改这里就能改全站 ---------- */
:root {
  --ink: #23262b;        /* 正文墨色 */
  --ink-mid: #58606a;    /* 次要文字 */
  --ink-dim: #6b727b;    /* 说明、占位文字 */
  --paper: #ffffff;      /* 纸面（每一步的白底） */
  --desk: #e8e9ec;       /* 页面底色，像桌面 */
  --rule: #d2d6db;       /* 边框、分隔线 */
  --rule-soft: #e6e9ec;
  --seal: #9c2a21;       /* 公文红：反线、免责声明、错误 */
  --seal-bg: #fbf0ee;
  --mark: #1b4b7a;       /* 交互蓝：按钮、焦点、正在生成 */
  --mark-soft: #eef3f8;
  --done: #1d6b3f;       /* 完成绿 */

  --ui-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
             "Helvetica Neue", Arial, sans-serif;
  --doc-font: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC",
              "SimSun", "STSong", serif;
}

*, *::before, *::after { box-sizing: border-box; }
[v-cloak] { display: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 24px 20px 64px;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.6;
}

/* 整页内容限宽，长行不好读 */
#app { max-width: 880px; margin: 0 auto; }

/* ---------- 报头：标题 + 公文红反线 ---------- */
.masthead { padding-bottom: 10px; border-bottom: 2px solid var(--seal); }

.masthead h1 {
  margin: 0;
  font-family: var(--doc-font);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.3;
}

.masthead__sub {
  margin: 4px 0 0;
  color: var(--ink-mid);
  font-size: 14px;
  letter-spacing: 1px;
}

/* ---------- 免责声明：常驻在页面顶部，不可关闭 ---------- */
.notice {
  margin: 0 0 28px;
  padding: 10px 14px;
  background: var(--seal-bg);
  border-left: 4px solid var(--seal);
  color: var(--seal);
  font-size: 13.5px;
  line-height: 1.65;
}

/* ---------- 四步的竖线和序号圆圈 ---------- */
.step { position: relative; padding: 0 0 26px 46px; }

/* 串起各步的竖线；最后一步不画 */
.step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--rule);
}
.step:last-child::before { display: none; }

.step__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-dim);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 28px;
}

/* 这一步可以动手了 */
.step.is-ready .step__num { border-color: var(--mark); color: var(--mark); }
/* 这一步已经做完了 */
.step.is-done .step__num { border-color: var(--mark); background: var(--mark); color: #fff; }
/* 还轮不到这一步：标题和说明都压暗 */
.step.is-todo .step__head h2 { color: var(--ink-dim); }

.step__head { margin-bottom: 10px; padding-top: 3px; }

.step__head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
}

.step__head p {
  margin: 2px 0 0;
  color: var(--ink-mid);
  font-size: 13.5px;
}

/* ---------- 每一步的白底面板 ---------- */
.panel {
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ---------- 表单 ---------- */
.field { display: block; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field__name {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
}

.field__note {
  display: block;
  margin: 5px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.55;
}

input, select, textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  /* 16px 是故意的：手机 Safari 在小于 16px 的输入框上会自动放大页面 */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
}

textarea { resize: vertical; }

select {
  /* 关掉系统默认样式后自己画一个小三角，保证各浏览器长得一样 */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mid) 50%),
                    linear-gradient(135deg, var(--ink-mid) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mark);
  box-shadow: 0 0 0 3px rgba(27, 75, 122, .16);
}

input::placeholder, textarea::placeholder { color: #a9b0b8; }

/* 写作设置里的两列布局，窄屏自动变一列 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 20px;
}
.grid .field { margin-bottom: 0; }
.grid .field--wide { grid-column: 1 / -1; }

/* 自定义字数的小输入框 */
.chars { margin-top: 8px; max-width: 180px; }

/* ---------- 折叠：写作设置 ---------- */
.fold {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--mark);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fold:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
.fold__arrow { font-size: 11px; }
.fold__summary {
  flex: 1;
  color: var(--ink-dim);
  font-weight: 400;
  font-size: 13px;
  text-align: right;
}

.fold-body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-soft); }

/* ---------- 按钮 ---------- */
button {
  min-height: 44px;            /* 手指点得到 */
  padding: 10px 22px;
  border: 1px solid var(--mark);
  border-radius: 3px;
  background: #fff;
  color: var(--mark);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--mark-soft); }
button:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
button.is-primary { background: var(--mark); color: #fff; }
button.is-primary:hover:not(:disabled) { background: #163d63; }
button:disabled { border-color: var(--rule); background: #f2f3f5; color: var(--ink-dim); cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- 状态提示 ---------- */
.hint { margin: 0; color: var(--ink-dim); font-size: 13.5px; }
.hint + .actions, .actions + .hint { margin-top: 12px; }

.working {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  color: var(--mark);
  font-size: 14px;
  font-weight: 600;
}

/* 正在生成时跳动的小圆点 */
.dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mark);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.done-mark { color: var(--done); font-size: 14px; font-weight: 600; }

/* 主页面那条错误提示。吸在视口底部（终审 I-4）：它在 <main> 末尾，十六节的
   长稿点第 3 步或工作区顶部的按钮出错时，红条落在几千像素以下，用户只看到
   "点了没反应"。
   - z-index 20：明确低于弹窗遮罩（.mask 50 / .mask--top 60），红条不会压住
     弹窗——弹窗里另有 .dialog__tip 显示同一句话。
   - bottom 12px 比 body 的 padding-bottom（桌面 64px、窄屏 48px）小得多，
     所以滚到页面最底时红条会落回它本来的位置、不再吸着，最后一个按钮
     （红条上方 20px）完整露出来，375px 下也挡不住——不新造关闭按钮。
   - 弹窗内部不用 .alert（用的是 .dialog__tip），不存在"弹窗里也吸底"的问题；
     .alert--inline 是留给行内提示的变体，明确取消吸附，免得以后误用。 */
.alert {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  /* 重写冲突时红条里带着整段新文字，窄屏下别盖住半个屏幕 */
  max-height: 40vh;
  overflow: auto;
  margin: 20px 0 0;
  padding: 12px 14px;
  background: var(--seal-bg);
  border-left: 4px solid var(--seal);
  color: var(--seal);
  font-size: 14.5px;
  line-height: 1.65;
  box-shadow: 0 2px 10px rgba(35, 38, 43, .16);
}
.alert--inline { position: static; margin: 12px 0 0; box-shadow: none; }

.boot { padding: 30px 0; color: var(--ink-mid); }

/* ---------- 大纲 ---------- */
.outline { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-soft); }

.outline__title {
  font-family: var(--doc-font);
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

.outline__list { margin: 14px 0 0; padding: 0; list-style: none; }
.outline__item { margin-bottom: 14px; }

.outline__h1 { font-family: var(--doc-font); font-size: 16px; font-weight: 600; }
.outline__h2 { font-family: var(--doc-font); font-size: 15px; }

/* 二级标题往右缩进，用一条浅竖线表示从属关系 */
.outline__children {
  margin: 8px 0 0 14px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--rule-soft);
  list-style: none;
}
.outline__children > li { margin-bottom: 8px; }
.outline__children > li:last-child { margin-bottom: 0; }

/* 模型给的"这一节写什么"，只读，供用户判断大纲好不好 */
.outline__hint { margin: 4px 0 0; color: var(--ink-dim); font-size: 13px; line-height: 1.5; }

.outline__go { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }

/* ---------- 勾选框和它旁边那行字 ---------- */
.checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mid);
  font-size: 14px;
  cursor: pointer;
}

/* 大纲每一条前面的勾选框 */
.outline__row { display: flex; align-items: center; gap: 10px; }
.outline__row input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; }
.outline__row .outline__h1, .outline__row .outline__h2 { flex: 1 1 auto; min-width: 0; }

/* ---------- "只写其中几节" ---------- */
.partly { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.partly__title {
  margin: 0 0 10px;
  color: var(--ink-mid);
  font-size: 14px;
  font-weight: 600;
}

/* ---------- 全文 ---------- */
.draft {
  min-height: 420px;
  padding: 18px 20px;
  font-family: var(--doc-font);
  font-size: 16.5px;
  line-height: 1.95;
}

/* 生成过程中显示的只读区域：自动往下滚，末尾带一个闪动光标 */
.draft--live {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--mark);
  border-radius: 3px;
  background: #fff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 3px rgba(27, 75, 122, .12);
}
.draft--live:empty::before { content: "模型正在下笔……"; color: var(--ink-dim); }

.caret {
  display: inline-block;
  width: .55em;
  color: var(--mark);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.meta { margin: 12px 0 0; color: var(--ink-dim); font-size: 13px; }

/* 系统里关了动画的人，就不要闪 */
@media (prefers-reduced-motion: reduce) {
  .dot, .caret { animation: none; }
  * { transition: none !important; }
}

/* ---------- 顶栏：登录态与余额 ----------
   放在报头红线上方，靠右排一行小字，相当于红头文件右上角的编号栏：
   要一眼看得见，但不能压过标题。 */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--ink-mid);
}
.topbar__phone { font-weight: 600; color: var(--ink); }
.topbar__credits b { color: var(--mark); font-size: 16px; }
.topbar__hint { color: var(--ink-dim); }

/* 顶栏这两个按钮比正文按钮小一圈，所以要盖掉全局 button 的 44px 最小高度 */
.topbar__link {
  min-height: 0;
  padding: 4px 6px;
  border: none;
  background: none;
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.topbar__link:hover:not(:disabled) { background: none; color: var(--seal); }

/* ---------- 弹窗 ----------
   弹窗就是一张浮起来的"纸"：白底、4px 圆角，跟每一步的面板同一套；
   标题用宋体，和报头一脉相承。投影取墨色，不用纯黑。 */
.mask {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;   /* 不用 center：弹窗内容可能比视口还高（比如重写失败时
                                那一整段结果），center 会让顶部和底部都跑到视口外、
                                够不着也滚不到（审查 N-5） */
  justify-content: center;
  padding: 16px;
  overflow-y: auto;          /* 弹窗本身比视口高时，遮罩层要能滚，不然内容够不着 */
  background: rgba(35, 38, 43, .45);
  z-index: 50;
}

/* 选择框、任务框要能盖住页面上别的弹窗 */
.mask--top { z-index: 60; }

.dialog {
  width: 100%;
  max-width: 380px;
  padding: 22px;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 10px 30px rgba(35, 38, 43, .28);
}
.dialog h3 {
  margin: 0 0 6px;
  font-family: var(--doc-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
.dialog__note { margin: 0 0 16px; color: var(--ink-dim); font-size: 13px; }
.dialog__tip {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--mark);
  background: var(--mark-soft);
  color: var(--mark);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  /* 重写失败时这里可能塞进一整段重写结果（几百字）：.mask 是
     align-items:center 且没有滚动，不设上限的话 375px 下弹窗会被撑得
     比视口还高、上下都够不着——"让用户自己复制"的那段文字反而复制不到。
     和 .rewrite__src 同一个写法（照审查建议） */
  max-height: 160px;
  overflow: auto;
}
.dialog .actions { margin-top: 18px; }

/* 验证码输入框和"获取验证码"按钮并排 */
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1 1 auto; min-width: 0; }
.code-row button {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  color: var(--ink-mid);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.code-row button:disabled { color: var(--ink-dim); cursor: not-allowed; }

/* ---------- 按钮上方的报价行 ----------
   沿用页面里已有的"左竖条 + 淡底"写法（免责声明是红的），这条是蓝的：
   蓝＝跟这次操作有关的提示，不是警告。真出问题的那句才用公文红。 */
.quote {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--mark);
  background: var(--mark-soft);
  color: var(--ink-mid);
  font-size: 14px;
}
.quote b { color: var(--mark); font-size: 16px; }
.quote--wait { border-left-color: var(--rule); background: #f5f6f8; color: var(--ink-dim); }

.quote__bad {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 2px;
  background: var(--seal-bg);
  color: var(--seal);
  font-weight: 600;
}

/* ---------- 视图切换：顶栏里的"写稿 / 我的稿子" ---------- */
.topbar__link.is-on { color: var(--mark); font-weight: 600; }

/* ---------- 一屏的标题行 ---------- */
.viewhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--seal);
}
.viewhead h2 {
  margin: 0;
  font-family: var(--doc-font);
  font-size: 20px;
  letter-spacing: 1px;
}

/* ---------- 我的稿子：照公文目录的样子排 ----------
   左边标题、右边日期、中间一条虚线牵引，是文秘每天都在翻的形态，不用学。 */
.docs { margin: 0; padding: 0; list-style: none; }

.doc-row { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.doc-row:first-child { border-top: 1px solid var(--rule-soft); }

.doc-row__line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }

.doc-row__title {
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  font-family: var(--doc-font);
  font-size: 16.5px;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;   /* 标题混进长串英文/编号时也不撑出横向滚动条，照抄 .draft--live 的写法 */
}
.doc-row__title:hover { color: var(--mark); }
.doc-row__title:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

.doc-row__leader {
  flex: 1 1 auto;
  min-width: 16px;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-3px);
}
.doc-row__time { color: var(--ink-dim); font-size: 13px; white-space: nowrap; }

.doc-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 5px;
  color: var(--ink-dim);
  font-size: 13px;
}
.doc-row__done { color: var(--done); }
.doc-row__partial { color: var(--seal); }   /* "只写了一部分"，提醒别当成品用（R-F）。
                                               用公文红那个已有变量，不新造 --warn */
.doc-row__acts { margin-left: auto; display: flex; gap: 12px; }

.linkbtn {
  padding: 0;
  border: none;
  background: none;
  color: var(--mark);
  font-size: 13px;
  cursor: pointer;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn--danger { color: var(--seal); }

/* 生成进行中，"打开 / 删除 / 标题"这三个换稿入口要灰掉（终审 C-2）。
   上面那条通用的 button:disabled 会给它们铺一层灰底——文字按钮铺灰底很怪，
   这里只取"变淡 + 不可点"这两样，不要底色。特异性 0,2,0 压得住 0,1,1。 */
.doc-row__title:disabled,
.linkbtn:disabled { background: none; color: var(--ink-dim); cursor: not-allowed; }
.doc-row__title:disabled:hover,
.linkbtn:disabled:hover { color: var(--ink-dim); text-decoration: none; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  color: var(--ink-dim);
  font-size: 13.5px;
}

.empty {
  margin: 0;
  padding: 28px 16px;
  border: 1px dashed var(--rule);
  color: var(--ink-dim);
  text-align: center;
}

/* ---------- 这次生成的结果（还没存进稿子）----------
   和下面的工作区是两块不同的东西，可能同屏出现（审查 T23-11）：加一条底部虚线
   和一点留白，让"这次生成的"和"稿子里存的"看着是两段，不是一块乱糟糟的内容 */
.stream-result {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--rule);
}

/* ---------- 稿件工作区：左正文右清单 ---------- */
/* "这篇只写了一部分"：沿用页首免责声明那套公文红竖条，不新造颜色（V-9）*/
.notice-partial {
  margin: 0 0 14px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7;
  color: var(--ink); background: var(--seal-bg); border-left: 3px solid var(--seal);
}

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
.workspace__doc { min-width: 0; }

.sec { margin-bottom: 18px; }
.sec:last-child { margin-bottom: 0; }

.sec__head {
  margin: 0 0 8px;
  font-family: var(--doc-font);
  font-size: 16px;
  font-weight: 600;
}
.sec__head--plain { color: var(--ink-dim); font-weight: 400; }

/* 任务 27：带子节的一级标题自己没有存储行，补在它第一个叶子小节前面，比
   .sec__head 高一级——字号字重比照 .step__head h2 / .outline__title 那一档，
   不新造尺度。只读文字，不是输入框。 */
.sec__parent {
  margin: 0 0 8px;
  font-family: var(--doc-font);
  font-size: 18px;
  font-weight: 700;
}

.draft--sec { min-height: 140px; }

/* 从清单点过来时让这一节闪一下，告诉用户"就是这儿" */
.sec--flash .draft--sec { box-shadow: 0 0 0 2px var(--mark); }

.sec__paras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.sec__paras-label { color: var(--ink-dim); font-size: 13px; }

/* ---------- 待补充清单 ----------
   用公文红的左竖条，和页首那条免责声明同一个写法：都是"请你亲自看一眼"的意思 */
.workspace__todo {
  align-self: start;
  padding: 12px 14px;
  border-left: 3px solid var(--seal);
  background: var(--seal-bg);
}
.todo__head { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.todo__empty, .todo__foot { margin: 0; color: var(--ink-mid); font-size: 13px; line-height: 1.6; }
.todo__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e8d8d5; }

.todo { margin: 0; padding: 0; list-style: none; }
.todo__item { margin-bottom: 12px; }
.todo__item:last-child { margin-bottom: 0; }

.todo__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.todo__btn:hover .todo__text { text-decoration: underline; }

.todo__kind {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 2px;
  background: #fff;
  color: var(--seal);
  font-size: 12px;
}
.todo__kind--可疑数字 { color: var(--mark); }
.todo__text { font-family: var(--doc-font); font-size: 14.5px; color: var(--ink); }
.todo__where { display: block; margin-top: 2px; color: var(--ink-dim); font-size: 12px; }
.todo__note { margin: 2px 0 0; color: var(--ink-dim); font-size: 12px; }

/* ---------- 重写弹窗里那段原文 ---------- */
.rewrite__src {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--rule);
  background: #f7f8f9;
  font-family: var(--doc-font);
  font-size: 14.5px;
  line-height: 1.7;
  max-height: 140px;
  overflow: auto;
}

.field__note--warn { color: var(--seal); }
.todo__foot--warn { color: var(--seal); }

/* ---------- 润色结果：改过的段落整段带底色 ----------
   只做段落级，不做逐字对比（SPEC 第 4 节 Non-goals 第 12 条）。
   底色用很浅的暖黄：既不像"出错"（那是公文红），也不像"可点"（那是交互蓝）。 */
.polished__p {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-left: 3px solid transparent;
  font-family: var(--doc-font);
  font-size: 15.5px;
  line-height: 1.9;
  white-space: pre-wrap;
}
.polished__p.is-changed { border-left-color: #c8922a; background: #fdf7e8; }

.chg { margin-bottom: 12px; }
.chg:last-of-type { margin-bottom: 0; }
.chg__name { margin: 0 0 3px; font-size: 13px; font-weight: 600; }
.chg__line { margin: 0 0 3px; font-size: 13px; line-height: 1.6; word-break: break-all; }
.chg__tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 2px;
  background: #fff;
  font-size: 12px;
}
.chg__tag--add { color: var(--seal); }
.chg__tag--del { color: var(--ink-dim); }

/* ---------- 手机（约 375px 宽）---------- */
@media (max-width: 640px) {
  body { padding: 16px 12px 48px; font-size: 15px; }
  .masthead h1 { font-size: 23px; letter-spacing: 1px; }
  .notice { margin-bottom: 22px; }
  .step { padding: 0 0 22px 38px; }
  .step::before { left: 13px; top: 30px; }
  .step__num { width: 28px; height: 28px; font-size: 14px; line-height: 24px; }
  .step__head h2 { font-size: 17px; }
  .panel { padding: 14px; }
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .fold { flex-wrap: wrap; }
  .fold__summary { flex-basis: 100%; text-align: left; }
  .actions button { flex: 1 1 100%; }
  .draft { min-height: 320px; padding: 14px; font-size: 16px; }
  .draft--live { max-height: 340px; }
  /* .draft 这条同特异性、源码顺序更靠后，不加这行会把分节输入框的 140px
     压回 320px——375px 下一篇六节要多滚一千多像素（审查：手工验收第 18 条）*/
  .draft--sec { min-height: 140px; }
  .outline__children { margin-left: 8px; padding-left: 10px; }
  .topbar { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .dialog { padding: 18px; }
  /* 弹窗里的两个按钮不铺满一行，"登录"和"先不登录"并排更好点 */
  .dialog .actions button { flex: 1 1 auto; }

  /* 窄屏：标题占满一行，时间挪到下面那行小字里 */
  .doc-row__leader, .doc-row__time { display: none; }
  .doc-row__meta::after {
    content: attr(data-time);
    margin-left: auto;
  }
  .doc-row__acts { margin-left: 0; width: 100%; }
  .viewhead { flex-wrap: wrap; }

  /* 窄屏：清单挪到正文下面 */
  .workspace { grid-template-columns: 1fr; }
  .sec__paras { gap: 8px; }
}

/* ---------- 我的风格（阶段 4 第二块） ---------- */
.stylefiles { margin: 8px 0; padding-left: 20px; color: var(--ink-mid); }
.stylefiles--warn { margin: 4px 0 0; color: inherit; }      /* 列在红字提示里的重合片段，跟着提示变红 */
.styletable { width: 100%; border-collapse: collapse; margin: 8px 0; }
.styletable td { padding: 6px 8px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.styletable__nowrap { white-space: nowrap; }
/* 提炼那块的红字框和下面的"提炼"按钮之间留一点空（复验发现两者贴在一起） */
.alert--inline + .actions { margin-top: 14px; }
/* 几个文字按钮之间留空，不然读成"修改删除同意管理员查看"；窄屏换行时上下也不贴在一起 */
.styletable__acts { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ---------- 充值（阶段 4 第三块） ---------- */
.dialog--pay { max-width: 420px; }
.dialog--pay:focus { outline: none; }        /* 弹层本身只是为了接住 Esc 才能聚焦（tabindex=-1），不画焦点框 */
.payqr { margin-top: 14px; text-align: center; }
.payqr__img { width: auto; max-width: 100%; image-rendering: pixelated; }   /* 按原尺寸显示，不做非整数缩放 */
.payqr__phone { display: none; }             /* 只在窄屏（手机）上出现 */
.dialog__tip--ok { border-left-color: #1d6b3f; background: #eaf5ee; color: #1d6b3f; }
.payhist { margin-top: 14px; font-size: 13px; }
.payhist summary { cursor: pointer; color: var(--ink-mid); }
@media (max-width: 640px) {
  .payqr__phone { display: block; }
}


/* ---------- 单选一行（提意见的"能不能交"，内测上线计划一） ---------- */
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.choice-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }
.choice-row input { display: inline-block; width: 18px; height: 18px; margin: 0; }