/* ============================================================================
 * 教材 · 样式
 * ----------------------------------------------------------------------------
 * ⚠️ 颜色 / 阴影 / 圆角一律用 style.css 里的 token（--brand / --surface / --line …），
 *    别写死颜色值 —— 以后换肤这里才不用动。
 * ⚠️ 页图统一 696×983，靠 `aspect-ratio` 先把位置占住：
 *    这样**图片还没加载完**，跳页也能算准该滚到哪儿。
 * ========================================================================== */

/* ⚠️ 2026-10-18：这一页**没有顶栏**，但 style.css 默认给了
   `body { padding-top: var(--topbar-h) }` —— 不抵消就会在顶上留 56px 空白
   （用户先后报过两次"上面空一块"，一次是阅览屏、一次就是这里）。 */
body { padding-top: 0; }

/* ---------------- 选书屏 ---------------- */
.tb-app { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }

.tb-subj { display: flex; flex-wrap: wrap; gap: 8px; }

/* 被「小程序中心」用浮动窗口嵌进来时（地址带 ?embed=1），浮窗自己有标题栏和关闭，
   页面里这个「返回小程序」就多余了 —— 藏掉（跟闹钟的 .embed-hide 一个套路）。 */
.embed .embed-hide { display: none !important; }

/* ⚠️ 2026-10-18：「返回小程序」改成了左上角统一的 `.app-exit`（在 style.css 里），
   这里原来的 .tb-head-row / .tb-goback 一并删掉，别留死样式。 */

.tb-book {
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--surface, #fff); border: 1px solid var(--line, #e4e7ed);
  border-radius: var(--radius-lg, 14px); padding: 20px;
  box-shadow: var(--sh-1, 0 1px 3px rgba(16, 24, 40, .05));
}
.tb-cover {
  flex: 0 0 auto; width: 190px; aspect-ratio: 696 / 983;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  background: var(--surface-3, #eef1f5);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .16);
  transition: transform var(--dur-2, .2s) var(--ease, ease);
}
.tb-cover:hover { transform: translateY(-2px); }
.tb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tb-info { flex: 1 1 auto; min-width: 0; }
.tb-info h2 { font-size: 19px; margin: 0 0 6px; }
.tb-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.tb-tag {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-soft, #eef6e8); color: var(--brand-d, #2e7a42);
}
.tb-tip { font-size: 12.5px; color: var(--text-3, #8b95a3); line-height: 1.8; }

.tb-empty {
  padding: 40px 20px; text-align: center; color: var(--text-3, #8b95a3);
  border: 1px dashed var(--line, #e4e7ed); border-radius: var(--radius-lg, 14px);
}

/* ---------------- 阅览屏 ---------------- */
/* 阅览是**整屏覆盖**：教材页要尽量大，别被外面的 1080 宽度卡住 */
.tb-read {
  position: fixed; inset: 0; z-index: var(--z-win, 1300);
  background: var(--bg, #f6f7f5);
  display: flex; flex-direction: column;
  /* ⚠️ 顶栏留白**不能写死** `--topbar-h`：这页如果没插顶栏，就会空出 56px（用户报的"上面空一块"）。
     现在改成 JS 按**实际顶栏高度**设 padding-top（没有顶栏就是 0），见 app.js 的 openReader。 */
  padding-top: 0;
}
.tb-read.hidden { display: none; }

/* ⚠️ 高度由 JS 量出来写进 --tb-bar-h（收起=0，展开=真实高度）。
   不用 transform 滑走 —— 那样 flex 里还占着位置，下面的画布不会跟着变大。 */
.tb-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  height: var(--tb-bar-h, 61px);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, #e4e7ed);
  transition: height var(--dur-2, .2s) var(--ease, ease),
              padding var(--dur-2, .2s) var(--ease, ease),
              opacity var(--dur-1, .13s) var(--ease, ease);
}
.tb-read.bar-off .tb-bar {
  height: 0; padding-top: 0; padding-bottom: 0;
  opacity: 0; pointer-events: none;
  border-bottom-width: 0;      /* 留 1px 边框就会量出 height:1，画布也跟着差 1px */
}
/* 量高度时临时关掉过渡，否则半路量到的是动到一半的值（踩过：量成 21px） */
.tb-read.no-anim .tb-bar { transition: none !important; }

/* 收起后顶上那个小把手 —— 只在收起时出现 */
.tb-bar-open {
  position: fixed; left: 50%; top: 0;
  transform: translate(-50%, -100%);
  z-index: 3;
  padding: 5px 14px 4px;
  border: 1px solid var(--line, #e4e7ed); border-top: none;
  border-radius: 0 0 10px 10px;
  background: var(--surface, #fff);
  color: var(--text-2, #58616f);
  font-size: 12px; line-height: 1.4; cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-2, .2s) var(--ease, ease),
              opacity var(--dur-1, .13s) var(--ease, ease);
}
.tb-read.bar-off .tb-bar-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.tb-bar-open:hover { color: var(--text, #161a20); background: var(--surface-3, #eef1f5); }

@media (prefers-reduced-motion: reduce) {
  .tb-bar, .tb-bar-open { transition: none; }
}
.tb-back { flex: 0 0 auto; }
.tb-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; font-weight: 600; color: var(--text, #161a20);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.tb-mode { flex-wrap: nowrap; }
.tb-sep { width: 1px; height: 20px; background: var(--line, #e4e7ed); }

.tb-zbtn {
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line, #e4e7ed); background: var(--surface, #fff);
  color: var(--text-2, #58616f); font-size: 16px; line-height: 1;
}
.tb-zbtn:hover { background: var(--surface-3, #eef1f5); color: var(--text, #161a20); }
.tb-zbtn.tb-fit { width: auto; padding: 0 10px; font-size: 12.5px; }
.tb-zval {
  font-size: 12.5px; color: var(--text-2, #58616f);
  font-variant-numeric: tabular-nums; min-width: 42px; text-align: center;
}

/* ---- 两栏舞台 ---- */
.tb-stage {
  flex: 1 1 auto; min-height: 0;      /* ← 必须：不然里面的 overflow 不生效，整页会被撑高 */
  display: flex; gap: 10px; padding: 10px;
}
.tb-pane {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4e7ed);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}
.tb-pane.hidden { display: none; }

.tb-jump {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, #e4e7ed);
  background: var(--surface-2, #fafbfc);
  font-size: 12.5px; color: var(--text-2, #58616f);
}
/* ⚠️ style.css 里有条全局的 `input { width: 100% }`，这里必须用 flex 锁死宽度，
   否则这个输入框会把整行撑满、按钮被挤成两行（第一次截图就是这样）。 */
.tb-jinput {
  flex: 0 0 72px; width: 72px; height: 30px; padding: 0 8px;
  border: 1px solid var(--line, #e4e7ed); border-radius: 7px;
  background: var(--surface, #fff); color: var(--text, #161a20);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.tb-jinput:focus { outline: 2px solid var(--brand-soft, #d8ead0); border-color: var(--brand, #3e8e22); }
.tb-jbtn { flex: 0 0 auto; height: 30px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
.tb-jlabel { flex: 0 0 auto; white-space: nowrap; }
.tb-now { flex: 0 0 auto; margin-left: auto; color: var(--text-3, #8b95a3); font-variant-numeric: tabular-nums; }

/* ---- 图片列（竖向瀑布，往下滑） ---- */
.tb-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: auto;
  padding: 12px;
  background: var(--surface-3, #eef1f5);
  scroll-behavior: smooth;
}
.tb-page {
  width: var(--pgw, 520px);
  aspect-ratio: 696 / 983;          /* ← 先把高度占住，图片慢慢加载也不会跳 */
  margin: 0 auto 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .10);
  overflow: hidden;
  position: relative;
}
.tb-page img {
  width: 100%; height: 100%; display: block; object-fit: contain;
}
.tb-page .tb-pno {
  position: absolute; right: 6px; bottom: 4px;
  font-size: 11px; color: rgba(0, 0, 0, .28);
  background: rgba(255, 255, 255, .72);
  padding: 0 5px; border-radius: 4px;
  opacity: 0; transition: opacity var(--dur-1, .13s) var(--ease, ease);
}
.tb-page:hover .tb-pno { opacity: 1; }

/* 窄屏：双排时两栏各占一半，页宽自动收到能放下 */
@media (max-width: 820px) {
  .tb-page { width: min(var(--pgw, 520px), 100%); }
  .tb-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-scroll { scroll-behavior: auto; }
  .tb-cover { transition: none; }
}