/* ============================================================
   十年回看 · 阅读页（封面书架 ＋ 书页排版）
   ------------------------------------------------------------
   2026-09-30 老板：「阅读页做成类似别人小说那种界面，一点进去就是一本书；
   现在手机上看到的是 3 个列表，有点奇怪。」

   参考苹果「图书」App 的三招，**只借这三招**：
     ① 书库＝封面网格（封面在上、书名在下、小灰字标期数）
     ② 打开＝沉浸阅读（栏宽收窄、字号放大、顶部一条阅读进度线）
     ③ 阅读进度（读到哪一本、读到哪儿）
   ★ 不做「精选集」分组 —— 只有 6 期，越分越乱。
   ★ 封面是**纯排版封面**：期号 ＋ 书名 ＋ 左侧书脊细条，**不用任何图片**
     ⇒ 零算力、不涉图片版权、不涉肖像与标志词。
   ★ 列数用 auto-fill + minmax 自适应，**不写宽度断点**（全站一套版式）。
   ★ 一律用变量取色 ⇒ 暗色主题自动跟随（暗色那段只覆盖 :root）。

   ★★ 为什么单开一个文件、不并进 style.css：
     1) 当时有并行会话正在写 style.css（实测 3 秒前刚被改过），
        并进去有被整体覆盖的风险；
     2) 本文件在 style.css **之后**加载 ⇒ 同名规则天然压过它；
     3) bump-assets.py 是按目录扫的全部 js/css，新文件自动进指纹。
   ============================================================ */

/* ---------- 书库抬头一行 ---------- */
.shelf-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;margin:2px 0 18px;
  font-size:13px;color:var(--ink-4);
}
.shelf-head b{font-weight:500;color:var(--ink-body)}

/* ---------- 接着读 ---------- */
.cont{
  display:flex;align-items:center;gap:15px;margin:0 0 26px;
  padding:15px 17px;border:1px solid var(--line-2);border-radius:var(--r-md);
  background:var(--bg-3);color:inherit;text-decoration:none;
  transition:box-shadow .18s ease-out,border-color .18s ease-out;
}
.cont:hover{text-decoration:none;box-shadow:var(--shadow-card);border-color:var(--line)}
.cont-cover{
  position:relative;flex:none;width:46px;height:61px;overflow:hidden;
  border-radius:2px 5px 5px 2px;box-shadow:var(--shadow-card);
}
.cont-cover i,.bp-mini i,.bk-spine{
  position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(0,0,0,.24);
}
.bp-mini i{width:3px}
.cont-body{flex:1 1 auto;min-width:0}
.cont-label{display:block;font-size:12px;letter-spacing:.08em;color:var(--ink-4)}
.cont-title{
  display:block;margin-top:3px;font-size:16.5px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cont-bar{
  display:block;margin-top:10px;height:3px;border-radius:2px;
  background:var(--line-2);overflow:hidden;
}
.cont-bar i{display:block;height:100%;background:var(--accent);border-radius:2px}
.cont-pct{display:block;margin-top:6px;font-size:12px;color:var(--ink-4)}

/* ---------- 书架 ---------- */
.shelf{
  display:grid;gap:22px 16px;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
}
/* 手机 390 ⇒ 2 列（每本约 163 宽）｜720 内容宽 ⇒ 4 列（每本约 156 宽） */
.bk{display:block;color:inherit;text-decoration:none;min-width:0}
.bk:hover,.bk:hover .bk-name{text-decoration:none}

.bk-cover{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:3/4;padding:13px 13px 12px 19px;overflow:hidden;
  border-radius:3px 8px 8px 3px;
  box-shadow:var(--shadow-card);
  transition:transform .18s ease-out,box-shadow .18s ease-out;
}
.bk:hover .bk-cover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.bk-seq{font-size:15px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.bk-flag{
  position:absolute;top:11px;right:11px;padding:1px 7px;
  font-size:11px;color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);
}
.bk-foot{display:block}
.bk-name{display:block;font-size:13.5px;font-weight:500;line-height:1.4;color:#F4F2ED}
.bk-brand{
  display:block;margin-top:8px;padding-top:7px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.62);
}
.bk-meta{display:block;margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.bk-sub{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:4px;font-size:12.5px;line-height:1.6;color:var(--ink-4);
}

/* ============================================================
   书页（单期页）
   ============================================================ */

/* 整列收窄：一行别放太多字，眼睛才不累（620~660 是中文的舒服区） */
.wrap.bookcol{max-width:660px}

/* 顶部阅读进度线：钉在页内视口顶上 —— 也就是外壳顶栏的下缘 */
.bp-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:40;pointer-events:none}
.bp-prog i{display:block;height:100%;width:0;background:var(--accent)}

/* 书名页：小封面 ＋ 期号行 ＋ 英文副题 */
.bp-bookhead{display:flex;gap:13px;align-items:flex-start;margin:16px 0 0}
.bp-mini{
  position:relative;flex:none;width:38px;height:51px;overflow:hidden;
  border-radius:2px 5px 5px 2px;box-shadow:var(--shadow-card);
}
.bp-meta{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-4)}
.bp-en{display:block;margin-top:3px;font-size:12.5px;letter-spacing:.04em;color:var(--ink-5)}

.bp-orn{display:flex;align-items:center;gap:10px;margin:22px 0 4px}
.bp-orn i{flex:1 1 auto;height:1px;background:var(--line)}
.bp-orn b{flex:none;width:4px;height:4px;background:var(--ink-5);transform:rotate(45deg)}

/* 正文：段首缩进 ＋ 更松的行距 —— 中文书的样子。
   ★ 必须显式写字号行距：style.css 末尾那一层把 .article p 压到了 16px/1.78，
     本文件在后面加载，这里写死才能拿到书页该有的读数。 */
.book #ep-body p{
  text-indent:2em;font-size:17px;line-height:1.92;margin:0 0 18px;
}
.book h3{
  font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.14em;
  color:var(--ink-4);border-bottom:0;padding-bottom:0;margin:32px 0 12px;
}
.book blockquote{
  margin:0 0 14px;padding:0 0 0 18px;
  border-left:2px solid var(--ink-4);border-radius:0;background:transparent;
  font-family:var(--font-text);font-size:18px;line-height:1.9;color:var(--ink);
}
.book .art-note{font-size:12.5px;color:var(--ink-5)}

/* 页脚：像书末的页码 */
.bp-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:38px;padding-top:15px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;
}
.bp-foot .done{color:var(--green);font-weight:500}

/* ---------- 标题行：书名 ＋ 时长 ＋ 收听按钮（2026-09-30 老板要求）----------
   「收听本期」放标题右边 ⇒ 按钮不再单独占一条，下面的播放卡片在外壳里整块收起，
   正文因此提前一屏。长书名会自己换行，不会把按钮挤没。 */
.bp-title{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:12px}
.bp-title h1{flex:1 1 auto;min-width:0;margin:0}
.bp-title .ep-dur{flex:none;margin-left:auto}
.bp-title .btn{flex:none}
/* .btn 是 inline-flex，会把 [hidden] 的浏览器默认样式盖掉
   （直连打开时用原生播放器，这个按钮该藏住） */
.bp-title .btn[hidden]{display:none}

/* 外壳里：播放卡片整块收起 —— 音频走底部那条全站播放条，按钮已在标题行 */
html.tyl-in-shell .ep-player{display:none}