/* ==========================================================================
   课外必背小古文 · 学习库样式
   与主应用同一套配色/圆角，但阅读器改成整页，长文更舒服
   ========================================================================== */

/* 顶部返回按钮 */
.back-icon { text-decoration: none; }
.back-icon svg { width: 26px; height: 26px; }

/* 已读进度：顶栏下方右对齐的小牌，不占内容宽度 */
.list-head {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 10px;
}
.count-badge {
  background: var(--green-light);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 搜索 + 筛选 */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
/* 「全部 / 未读」组合按钮：与「不注音 / 生字 / 全文」共用一套外观 */
.filter-seg {
  flex: 0 0 auto;
  border-radius: 12px;
}
.filter-seg button { font-size: 13.5px; font-weight: 600; padding: 8px 13px; }
.search-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 11px;
  display: inline-flex;
  color: var(--ink-3);
  pointer-events: none;
}
.search-icon svg { width: 17px; height: 17px; }
.search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.search-input:focus { border-color: var(--green); }
.search-input::-webkit-search-cancel-button { display: none; }

.seg-toggle {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  /* 「随机连读」带喇叭图标，与「全部 / 未读」同款样式也要能内联居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.seg-toggle.active { background: var(--green); border-color: var(--green); color: #fdfaf2; }
/* 随机连读开启时同样用高亮态，风格与「全部 / 未读」统一 */
.seg-toggle[data-on="1"] { background: var(--green); border-color: var(--green); color: #fdfaf2; }
.seg-toggle > span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seg-toggle svg { display: block; width: 15px; height: 15px; margin: auto; }

/* 工具栏：搜索框可伸缩，「全部 / 未读」「连读」不压缩，三样排成一行 */
.seg-toggle { flex: 0 0 auto; }
.filter-seg { flex: 0 0 auto; }

/* 分组标题 */
.group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 2px 8px;
}
.group-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.group-count { font-size: 11.5px; color: var(--ink-2); }
.group-random {
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--blue);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.group-random svg { width: 12px; height: 12px; }
.group-random:active { background: var(--blue-light); }

/* 列表项：古文条目左侧用蓝色区分于古诗词 */
#gw-list .item { border-left-color: var(--blue); }
#gw-list .item.in-book { border-left-color: var(--green); }
#gw-list .item.done { opacity: .62; }
#gw-list .item.done .item-title { text-decoration: none; }
#gw-list .item-index { background: var(--blue-light); color: var(--blue); }
#gw-list .item.in-book .item-index { background: var(--green-light); color: var(--green); }
#gw-list .item-reason.read { background: var(--green-light); color: var(--green); }
/* 列表项右侧播放键：与首页同款圆形播放器按钮，配色走天水碧（小古文主色） */
#gw-list .item-read { color: var(--blue); }
#gw-list .item-read[data-on="1"] { background: var(--blue); border-color: var(--blue); color: #fffdf8; }

/* 随机连读时高亮当前篇，用户随时能接管 */
#gw-list .item.reading {
  border-left-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-light), var(--shadow);
}
#gw-list .item-meta span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- 整页阅读器 ---------------- */
body.reader-open { overflow: hidden; }

.reader {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  animation: readerIn .22s cubic-bezier(.2, .8, .3, 1);
}
.reader[hidden] { display: none; }
@keyframes readerIn { from { opacity: .4; transform: translateY(14px) } to { opacity: 1; transform: none } }

.reader-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + var(--safe-top)) calc(14px + var(--safe-right)) 12px calc(14px + var(--safe-left));
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.reader-back,
.reader-done {
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
}
.reader-back { color: var(--green); }
.reader-back svg { width: 20px; height: 20px; }
.reader-progress {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.reader-done {
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--card);
}
.reader-done .done-icon { display: inline-flex; }
.reader-done .done-icon svg { width: 16px; height: 16px; }
.reader-done.is-done {
  background: var(--green);
  border-color: var(--green);
  color: #fdfaf2;
}

/* 顶栏右侧的「已读」小字：真正的开关是工具条里的 SVG 勾选按钮 */
.reader-bar-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}
.reader-bar-count.is-done { color: var(--green); }

.reader-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px calc(18px + var(--safe-right)) calc(40px + var(--safe-bottom)) calc(18px + var(--safe-left));
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.reader-body h2 {
  margin: 0 0 10px;
  font-family: var(--font-poem);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 1.5px;
  /* 与正文同一条中轴 */
  text-align: center;
}
/* 出处 / 朝代 / 作者标签跟着正文居中 */
.reader-body .meta { justify-content: center; }
/* 阅读辅助工具条：拆成两行，每行都排成一行不换行
   一行 = 对齐 / 字号 / 注音（有档位文字），一行 = 朗读 / 译文 / 播放译文 / 标记已读（纯图标） */
.reader-actions {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reader-actions::-webkit-scrollbar { display: none; }
.reader-actions.icon-row {
  margin-top: 8px;
  margin-bottom: 4px;
}
.mini-btn,
.reader-actions .seg.mini {
  /* 统一高度与圆角，四组按钮排在一起像同一条工具条 */
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--green);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.mini-btn.ghost { color: var(--ink-2); }
.mini-btn[data-on="1"] { background: var(--green); border-color: var(--green); color: #fdfaf2; }
/* 纯图标按钮（朗读 / 译文 / 播放译文 / 标记已读）：方形，图标居中，图标行等宽 */
.icon-row .mini-btn { padding: 0; width: 38px; min-height: 34px; flex: 0 0 auto; }
.icon-row .mini-btn svg { width: 17px; height: 17px; }
/* 状态全靠图标表达：▶ 未开始 / 朗读中、⏸ 播放中、译文开关「划掉文档」= 收起译文 */
#rd-read-btn .pause-glyph,
#rd-trans-toggle .pause-glyph,
#rd-trans-read .pause-glyph { display: none; }
#rd-read-btn[data-on="1"] .play-glyph,
#rd-trans-toggle[data-on="1"] .play-glyph,
#rd-trans-read[data-on="1"] .play-glyph { display: none; }
#rd-read-btn[data-on="1"] .pause-glyph,
#rd-trans-toggle[data-on="1"] .pause-glyph,
#rd-trans-read[data-on="1"] .pause-glyph { display: inline-flex; }
/* 「标记已读」：点亮前是描边勾，已读后整颗高亮 */
.done-btn { color: var(--ink-2); }
.done-btn.is-done { background: var(--green); border-color: var(--green); color: #fdfaf2; }
/* 对齐组合按钮：三个 SVG 图标（左 / 中 / 右），选中态与注音档位一致 */
.icon-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
}
.icon-seg button svg { display: block; width: 16px; height: 16px; }

/* 字号组合按钮：A－ / A＋ 同宽，与注音档位同款 */
.font-seg button {
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 9px;
  min-width: 0;
}
.font-seg button + button { border-left: 1px solid var(--line); }

.reader-text {
  /* 正文字体由 --font-poem 统一指定（思源宋体，缺字回退系统宋体） */
  font-family: var(--font-poem);
  font-size: 19px;   /* 由 JS 按用户字号覆盖；默认档见 js/classic.js 的 DEFAULT_FONT */
  /* 古文正文行距降一档：2.2 → 2.0 → 1.8，段落更紧凑、一屏多读几行 */
  line-height: 1.8;
  /* 正文块自身居中：max-width: fit-content + margin auto，短文不会贴着左边缘 */
  max-width: fit-content;
  margin: 18px auto 22px;
  /* 行内文字也居中：小古文多为短句，逐句居中更像碑帖 */
  text-align: center;
  letter-spacing: 1.4px;
}
/* 对齐方式交给用户选（工具条上的三个 SVG 图标）：
   古诗居中好看；《少年中国说》一类长古文左对齐更好读。
   右对齐时文字也靠右，整块仍保持居中不越界。 */
.reader-body .reader-text[data-align="left"] { text-align: left; }
.reader-body .reader-text[data-align="right"] { text-align: right; }

.trans-box {
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 16px;
}
.trans-box[hidden] { display: none; }
.trans-box h3 {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--green);
  font-weight: 700;
}
.trans-box p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-2);
}

.reader-tip {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}

/* 上一篇 / 下一篇：读完直接翻，不必退回索引页 */
.reader-nav {
  display: flex;
  gap: 10px;
  margin: 26px 0 4px;
}
.reader-nav button {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--green);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.reader-nav button.next { justify-content: flex-end; text-align: right; }
.reader-nav button:disabled { opacity: .42; cursor: not-allowed; }
.reader-nav .nav-label {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  display: block;
}
.reader-nav .nav-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 译文朗读按钮：贴在译文标题右侧 */
.trans-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.trans-head h3 { margin: 0; }
.trans-read {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--green);
  border-radius: 10px;
  padding: 5px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.trans-read svg { width: 16px; height: 16px; display: block; }
.trans-read .pause-glyph { display: none; }
.trans-read[data-on="1"] .play-glyph { display: none; }
.trans-read[data-on="1"] .pause-glyph { display: inline-flex; }
.trans-read[data-on="1"] { background: var(--green); border-color: var(--green); color: #fffdf8; }
.trans-read:disabled { opacity: .5; cursor: not-allowed; }

@media (min-width: 700px) {
  .reader-body { padding-top: 28px; }
}

/* ==========================================================================
   阅读辅助：生字注音 + 朗读
   ========================================================================== */

/* 注音正文：ruby 让拼音压在汉字上方，行高留足避免遮挡 */
.reader-text.with-pinyin {
  /* 注音档同步降一档：2.9 → 2.7 → 2.5，仍留足空间不压到拼音 */
  line-height: 2.5;
  letter-spacing: 1.8px;
  /* 注音渲染成 ruby + <br>，改成 normal 才不会因为保留空白把居中挤歪 */
  white-space: normal;
}
.reader-text ruby,
.poem-text ruby {
  ruby-align: center;
  ruby-position: over;
}
.reader-text rt,
.poem-text rt {
  font-family: var(--font-ui);
  font-size: .52em;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  /* rt 默认会撑高行距，这里压一下，保证与未注音版本视觉密度接近 */
  line-height: 1.05;
}

/* 朗读按钮：图标 + 文字，播放中高亮 */
/* 喇叭图标与文字同在按钮里：用 flex 居中，不再靠 vertical-align 硬偏移 */
.mini-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.mini-btn .btn-icon svg {
  display: block;
  width: 15px;
  height: 15px;
  margin: auto;
}
.mini-btn[data-on="1"] .wave1 { opacity: 1; }
.mini-btn[data-on="0"] .wave1,
.mini-btn[data-on="0"] .wave2 { opacity: .38; }
.mini-btn[data-on="1"] .wave2 {
  opacity: 1;
  animation: wavePulse 1.1s ease-in-out infinite;
}
.mini-btn[data-on="1"] .wave1 { animation: wavePulse 1.1s ease-in-out .18s infinite; }
@keyframes wavePulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
.mini-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 阅读器内的注音档位：复用全局 .seg.mini，这里只压一下字号便于窄屏并排 */
.reader-actions .seg.mini { padding: 2px; }
.reader-actions .seg.mini button {
  font-size: 12.5px;
  padding: 5px 9px;
  border-radius: 8px;
}
/* 窄屏（iPhone SE 一类）：档位按钮再收一点，两行工具条仍然各自排成一行 */
@media (max-width: 380px) {
  .reader-actions { gap: 6px; }
  .reader-actions .seg.mini button { padding: 5px 7px; font-size: 12px; }
  .icon-row .mini-btn { width: 34px; min-height: 32px; }
  .mini-btn { font-size: 12.5px; }
}