/* ============================================================================
 * chapters-manage-dual.css —— 正文「两版对比」弹层（P4）
 *
 * 【形态】自己一层固定遮罩，不复用 .mo-mask：那个是「一条公告 + 一个知道了」的窄卡片，
 *   塞不下两栏并排的流式正文。类名统一 cd- 前缀，避免和 mo- 体系串味。
 * 【计费口径】.cd-note 就是标题旁那句「本功能按两版计费」，用 --warn（提醒不是报错），
 *   常驻不可关 —— 用户点之前就得看见价。
 * 【P0】零硬编码色值：颜色一律 var(--token)，本文件不许出现十六进制色与 rgb 函数。
 * 【窄屏】860px 以下两栏叠成单栏（竖着比横着读得下去）。
 * ========================================================================== */

.cd-mask {
  position: fixed; inset: 0; z-index: var(--z-modal, 60);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
  background: color-mix(in srgb, var(--bg0) 78%, transparent);
}

.cd-panel {
  width: 100%; max-width: 920px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px 18px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl, 18px);
  box-shadow: var(--elev-overlay);
}

/* ---------- 头部：标题 + 计费口径 + 关闭 ---------- */
.cd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-head b { font-size: var(--text-md); color: var(--ink); }

/* 「本功能按两版计费」：常驻、不可关，--warn 低对比 —— 是提醒，不是错误 */
.cd-note {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--warn-dim); border-radius: var(--radius-pill, 9999px);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  font-size: var(--text-xs, 12px); line-height: 1.6; white-space: nowrap;
}

/* 关闭：44×44 触控区（WCAG 2.5.5），推到右上角 */
.cd-x {
  margin-left: auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-pill, 9999px);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color var(--motion-fast, 150ms) var(--ease-standard, ease);
}
.cd-x:hover { color: var(--ink); }
.cd-x:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- 状态条 / 错误条 ---------- */
.cd-tip { font-size: var(--text-sm, 13px); line-height: 1.7; color: var(--muted); }
.cd-err {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--danger-dim); border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: var(--text-sm, 13px); line-height: 1.7;
}

/* ---------- 两栏 ---------- */
.cd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.cd-col {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg, 14px);
  background: var(--surface-2);
}
.cd-col-h {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm, 13px); font-weight: 700; color: var(--ink);
}
.cd-meta { margin-left: auto; font-weight: 400; font-size: var(--text-xs, 12px); color: var(--meta); }

/* 正文区：固定高度 + 内部滚动，两栏高度不随字数跳（并排才好比） */
.cd-txt {
  flex: 1 1 auto; min-height: 220px; max-height: 46vh; overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--bd); border-radius: var(--radius-sm, 8px);
  background: var(--card); color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--text-sm, 13px); line-height: var(--leading-body, 1.7);
  white-space: pre-wrap; word-break: break-word;
}

/* 「用这版」：流式期间由 JS 置 disabled，这里只补禁用态观感 */
.cd-pick { align-self: flex-end; padding: 6px 16px; font-size: var(--text-sm, 13px); }
.cd-pick:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ---------- 窄屏：两栏叠成单栏 ---------- */
@media (max-width: 860px) {
  .cd-cols { grid-template-columns: 1fr; }
  .cd-txt { min-height: 150px; max-height: 32vh; }
  .cd-panel { padding: 12px 12px 14px; }
}