/* 不全书 · 编辑器样式（正文页侧）。颜色取自 topic.css 的主题变量。 */

/* ---------------------------------------------------------------- 浮动按钮 */

.hb-editbtn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  padding: 8px 14px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 999px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}

.hb-editbtn:hover { background: var(--topic-accent, #8e3b2f); color: #fff; }

/* ---------------------------------------------------------------- 工具条 */

.hb-toolbar {
  position: sticky;
  top: 0;
  z-index: 55;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 7px 9px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 9px;
  background: var(--topic-panel, #f6f3ec);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.hb-title {
  flex: 1 1 200px;
  min-width: 140px;
  padding: 5px 8px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 6px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.hb-btn {
  padding: 4px 9px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 6px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.hb-btn:hover { background: var(--topic-mark-bg, #f0e7d8); }
.hb-save { font-weight: 700; }
.hb-save.hb-dirty { background: #8e3b2f; color: #fff; border-color: #8e3b2f; }
.hb-exit { margin-left: auto; }
.hb-sep { width: 1px; height: 20px; background: var(--topic-border, #c9c2b6); margin: 0 3px; }

.hb-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--topic-text, #222);
  cursor: pointer;
}

/* ---------------------------------------------------------------- 编辑态 */

.hb-editing .hb-region { outline: 1px dashed var(--topic-border, #c9c2b6); outline-offset: 8px; }
.hb-editing .hb-region:focus { outline-color: var(--topic-accent, #8e3b2f); }
.hb-editing table { border-collapse: collapse; }
.hb-editing table td,
.hb-editing table th { border: 1px solid var(--topic-border, #b9b2a6); padding: 3px 8px; }
.hb-editing [contenteditable] :focus { outline: none; }

.hb-source {
  width: 100%;
  min-height: 62vh;
  padding: 12px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 8px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  font-family: Consolas, "Microsoft YaHei Mono", monospace;
  font-size: 13.5px;
  line-height: 1.65;
  resize: vertical;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- 提示 */

.hb-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  z-index: 90;
  max-width: 70vw;
  padding: 9px 16px;
  border-radius: 8px;
  background: #2c2a27;
  color: #f7f4ee;
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: all .28s ease;
}

.hb-toast.on { opacity: 1; transform: translate(-50%, 0); }
.hb-toast-bad { background: #8e3b2f; }

/* ---------------------------------------------------------------- 对话框 */

.hb-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 15, .42);
}

.hb-dialog {
  width: min(560px, 92vw);
  max-height: 78vh;
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 10px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .26);
}

.hb-dialog h3 { margin: 0 0 10px; font-size: 16px; }
.hb-muted { color: var(--topic-muted, #7d766b); font-size: 13px; }
.hb-backup-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.hb-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 6px;
  font-size: 13px;
}

/* ---------------------------------------------------------------- 查找替换 */

.hb-editbtn.hb-findbtn { right: 132px; }

.hb-find {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 88;
  width: min(680px, 94vw);
  max-height: 76vh;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 10px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  font-size: 13px;
}

.hb-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }

.hb-find input[type="text"],
.hb-find .hb-fq,
.hb-find .hb-fr {
  flex: 1 1 150px;
  min-width: 120px;
  padding: 5px 8px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 6px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  font: inherit;
  font-size: 13px;
}

.hb-fopts label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  cursor: pointer;
}

.hb-fcount { margin-left: auto; color: var(--topic-muted, #7d766b); font-size: 12.5px; }
.hb-frepall { font-weight: 700; }

.hb-fresults {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  max-height: 42vh;
  overflow: auto;
  border-top: 1px solid var(--topic-border, #c9c2b6);
}

.hb-fresults li {
  padding: 5px 7px;
  border-bottom: 1px dotted var(--topic-border, #d6d0c4);
  cursor: pointer;
  line-height: 1.5;
}

.hb-fresults li:hover { background: var(--topic-mark-bg, #f0e7d8); }
.hb-fresults li.on { background: var(--topic-mark-bg, #f0e7d8); font-weight: 600; }
.hb-fr-id { color: var(--topic-accent, #8e3b2f); }
.hb-fr-snip { color: var(--topic-muted, #7d766b); }

mark.hb-hit { background: #ffe08a; color: inherit; }
mark.hb-hit.hb-hit-on { background: #ff9f43; }


/* ================================================================ 手机校对条 */

.hb-proof {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--topic-border, #c9c2b6);
  background: var(--topic-panel, #f6f3ec);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}

.hb-pbtn {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--topic-border, #c9c2b6);
  border-radius: 8px;
  background: var(--topic-bg, #fff);
  color: var(--topic-text, #222);
  font: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}

.hb-pbtn:active { background: var(--topic-mark-bg, #f0e7d8); }
.hb-ok { font-weight: 700; }
.hb-proof-done .hb-ok { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.hb-bad { color: #a03327; }

.hb-progress {
  flex: 0 0 auto;
  margin-left: auto;
  padding-right: 4px;
  color: var(--topic-muted, #7d766b);
  font-size: 12.5px;
}

/* 校对条在时：右下角浮动按钮抬起来，正文底部留出空间 */
body:has(.hb-proof) .hb-editbtn { bottom: 64px; }
body:has(.hb-proof) .hb-findbtn { bottom: 64px; }
body:has(.hb-proof) article.topic { padding-bottom: 76px; }

@media (max-width: 860px) {
  .hb-pbtn { padding: 9px 10px; font-size: 13px; }
  .hb-progress { display: none; }        /* 窄屏优先保证按钮不被挤 */
}