/* ==========================================================
   life-reading.css — 阅读 (Reading) 模块
   ------------------------------------------------------------
   [Backlog #129 · 2026-09-30] 由 life-finance.css 改名重构而来。
   改名原因: 原模块叫 Finance / Investments & Insights, 但内容全是读过的书,
   名实不符。改为 Reading / Non-fiction & Fiction。

   加载序: CSS 第 29 / 37 (index.html <head> 第 29 个 <link>; 后加载的覆盖先加载的)
   ★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
     (单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
      加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
   结构 (与 life-photography.css §1 筛选栏 + §3 画廊严格对称):
       1. 筛选栏 .reading-filter-bar (3 行: type / category / status)
          + .reading-chip 系列 (中英标签 + ·N 计数 + --more 折叠按钮)
       2. 计数条 .reading-summary
       3. 两栏容器 .reading-cols (左非虚构 / 右虚构)
       4. 栏头 .reading-col-head + 折叠分组 .reading-group (原生 <details>/<summary>)
       5. 书籍网格 .reading-books-grid + 单本书卡 .reading-book-card
   [Backlog #175] 原 §4「二级分组标题」(.reading-section*, 即「社科 Social Science」
       标题) 与原 §5 内的 .reading-inline-* 已随该层级下线整块删除; 后续节号
       相应前移一位, 故本文件现为 §1-§5。改节号前请先 grep 引用方。
   响应式与覆盖节已迁出 -> life-reading-responsive.css (§7 / §9 / §10)

   主题色: reading 卡片沿用 life-layout.css 的 #reading-card --theme-color。
   卡片视觉 100% 继承原 .finance-book-card 的纸雕语言 (八角切角 + 双层硬投影),
   只加两个新元素: .reading-book-cat (分类角标) + .reading-book-note (★ 用户标注)。


   [Backlog #145 · 2026-10-01] 本文件已解耦为两个 CSS:
       life-reading.css              本文件  —— §1-§5 基础样式 (#200 删原 §4 后节号前移)
       life-reading-responsive.css   响应式 + 覆盖 (§7 / §9 / §10)
     ★ 两者用两个独立 <link> 引入, **不用 @import** (file:// 下 @import 受
       Origin=null 限制会静默失败, 详见新文件头注的 CORS 铁律)。
     ★ 本文件不再含任何 @media —— 改断点请去 responsive 文件, 避免两处打架。

   【深海纸雕铁律】
   - 硬边: 全文件 border-radius: 0, 切角一律 clip-path: polygon()
   - 物理投影: 卡 3px 4px 0 + 0 6px 14px + inset 高光, hover -2px/-4px 抬升
   - 纯色: 卡底 rgba(255,252,240,0.96), pill 单色, 无渐变底
   - 不用 backdrop-filter (Backlog #128 已在 life-modal.css §14 统一给模态外壳加模糊)
   ========================================================== */


/* ==========================================================
   1. 筛选栏 (对齐 life-photography.css §1 .photo-filter-bar)
   ------------------------------------------------------------
   每行: 左侧固定 label (Cinzel 小字) + 右侧 chip 列表 (flex-wrap)
   ========================================================== */
.reading-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: var(--space-2) 0 var(--space-6);
    padding: 14px var(--space-7) var(--space-6);
    background: rgba(255, 252, 240, 0.6);
    border: 1px solid rgba(10, 31, 36, 0.1);
}

.reading-filter-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.reading-filter-label {
    font-family: var(--font-serif-cjk);
    font-size:var(--type-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(10, 31, 36, 0.55);
    white-space: nowrap;
    padding-top: 5px;
    min-width: 88px;
}

.reading-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

/* ---- chip 本体 ---- */
.reading-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:var(--type-caption-sm);
    line-height: 1;
    color: rgba(10, 31, 36, 0.75);
    background: rgba(255, 252, 240, 0.9);
    border: 1px solid rgba(10, 31, 36, 0.18);
    border-radius: 0;
    padding: 5px 11px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.reading-chip:hover {
    background: rgba(10, 31, 36, 0.06);
    border-color: rgba(10, 31, 36, 0.35);
}

.reading-chip.is-active {
    background: var(--theme-color, #6b4d8a);
    color: var(--role-paper);
    border-color: var(--theme-color, #6b4d8a);
}

.reading-chip__label-cn {
    font-family: 'Noto Serif SC', 'STZhongsong', 'Songti SC', 'PingFang SC', 'Microsoft YaHei', serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: var(--space-2);
}

.reading-chip__label-en {
    opacity: 0.75;
    font-size:var(--type-micro-sm);
    letter-spacing: 0.1em;
    font-family: var(--font-serif-cjk);
}

.reading-chip__count {
    font-size: var(--type-micro-sm);
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: 0.04em;
}

.reading-chip.is-active .reading-chip__count {
    opacity: 0.9;
}

/* "更多 +N" / "收起" 折叠按钮: 虚线边框 + italic 弱化 (对齐 .photo-chip--more) */
.reading-chip--more {
    border-style: dashed;
    opacity: 0.75;
    font-style: italic;
    letter-spacing: 0.05em;
}

.reading-chip--more:hover {
    border-style: solid;
    opacity: 1;
    background: rgba(107, 77, 138, 0.08);
}


/* ==========================================================
   2. 计数条 (对齐 .photo-summary)
   ========================================================== */
.reading-summary {
    font-family: var(--font-serif-cjk);
    font-size:var(--type-caption-sm);
    font-weight: 500;
    color: rgba(10, 31, 36, 0.55);
    padding: var(--space-1) var(--space-2) var(--space-6);
    display: flex;
    gap: var(--space-7);
    flex-wrap: wrap;
}

.reading-summary__count {
    color: var(--theme-color, #6b4d8a);
    font-weight: 700;
}


/* ==========================================================
   3. 两栏容器: 左非虚构 / 右虚构
   ========================================================== */
/* [Backlog #164] 模态根显式打开交互 — 与 #notes-modal 同根因同解。
   #content-wrapper { pointer-events: none } (portfolio-layout.css:60) 是**可继承**属性,
   #reading-modal 写在它内部 (index.html L1865), 整棵子树继承 none ——
   现状是「头部 / 筛选栏 / 栏中标题」靠 .collage-modal-close 与 .collage-modal-body
   各自声明 auto 才能点动 (“父继承 none + 子声明 auto” 的穿透模式),
   任何一个新加的子元素都会默默死掉, 且难以定位。
   在根上打开一次后代自动恢复, 不再依赖“恰好每个可点元素都补了一次”。 */
#reading-modal {
    pointer-events: auto !important;
}

/* [Backlog #164] × 按钮加纸底实色: 原规则是 background: transparent,
   在 §14 的粗纸底 + 纸纹深度下对比度不足, 用户反馈“看不到右上角的×”。
   改成米白实色底 + 深墨边框, 与 Notes 的 .notes-close 同一套语言 (不透明 > 透明铁律)。 */
#reading-modal .collage-modal-close {
    background: rgba(255, 252, 240, 0.94) !important;
    border: 1px solid rgba(10, 31, 36, 0.28) !important;
    color: rgba(10, 31, 36, 0.82) !important;
    width: 34px;
    height: 34px;
    font-size: 20px;
}

#reading-modal .collage-modal-close:hover {
    background: rgba(179, 21, 21, 0.12) !important;
    border-color: rgba(179, 21, 21, 0.55) !important;
    color: rgba(179, 21, 21, 0.95) !important;
}
.reading-cols {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
    padding-bottom: var(--space-10);
}

.reading-col {
    flex: 1 1 0;
    min-width: 0;   /* 允许内部 grid 收缩, 防横向溢出 */
}

/* 虚构栏内容少, 给窄一点; 非虚构是主体 */
.reading-col--nonfiction {
    flex: 1.35 1 0;
}

.reading-col--fiction {
    flex: 1 1 0;
}

.reading-col-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    padding: 0 var(--space-1) var(--space-5);
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(10, 31, 36, 0.14);
}

.reading-col-icon {
    font-size: var(--icon-reading);
}

.reading-col-title-zh {
    font-family: var(--font-cjk);
    font-size:var(--type-section-sm);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(10, 31, 36, 0.92);
}

.reading-col-title-en {
    font-family: var(--font-serif-cjk);
    font-size: var(--type-caption);
    font-style: italic;
    letter-spacing: 0.1em;
    color: rgba(10, 31, 36, 0.5);
}


/* ==========================================================
   4. 折叠分组 (原生 <details>/<summary>, 零 JS)
   ------------------------------------------------------------
   .reading-group        → 唯一的分组容器 (两栏同构, 每个分类一个 <details>)
   [Backlog #175] 原 .reading-inline-group (社科内平铺分类) 随「社科」层级下线,
   与 §4 的 .reading-section* 一并删除 —— 不留无消费者的样式。
   ========================================================== */
.reading-group {
    margin-bottom: 18px;
}

.reading-group-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    cursor: pointer;
    padding: 5px var(--space-1);
    margin-bottom: var(--space-5);
    border-bottom: 1px dashed rgba(10, 31, 36, 0.2);
    list-style: none;               /* 去掉 Chrome 默认三角 */
    transition: border-color 0.2s ease;
}

.reading-group-head::-webkit-details-marker {
    display: none;
}

.reading-group-head:hover {
    border-bottom-color: rgba(10, 31, 36, 0.45);
}

/* 折叠指示三角 (纯 CSS, 展开时旋转 90°) */
.reading-group-head::before {
    content: '▸';
    font-size:var(--type-caption-sm);
    color: rgba(10, 31, 36, 0.5);
    transition: transform 0.2s ease;
    display: inline-block;
}

.reading-group[open] > .reading-group-head::before {
    transform: rotate(90deg);
}

.reading-group-title {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-4);
}

.reading-group-title-zh {
    font-family: var(--font-cjk);
    font-size: var(--type-body);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(10, 31, 36, 0.9);
}

.reading-group-title-en {
    font-family: var(--font-serif-cjk);
    font-size: var(--type-caption-sm);
    font-style: italic;
    letter-spacing: 0.08em;
    color: rgba(10, 31, 36, 0.5);
}

.reading-group-count {
    margin-left: auto;
    font-family: var(--font-serif-cjk);
    font-size:var(--type-micro);
    letter-spacing: 0.1em;
    color: rgba(10, 31, 36, 0.45);
    white-space: nowrap;
}

/* ==========================================================
   5. 书籍网格 + 单本书卡 (继承原 .finance-book-card 纸雕语言)
   ========================================================== */
.reading-books-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 var(--space-1);
}

.reading-book-card {
    position: relative;
    background: rgba(255, 252, 240, 0.96);
    /* 八角切角 (与原 .finance-book-card 完全一致) */
    clip-path: polygon(
        12px 0, calc(100% - 12px) 0,
        100% 12px, 100% calc(50% - 6px),
        calc(100% - 12px) 50%, 100% calc(50% + 6px),
        100% calc(100% - 12px), calc(100% - 12px) 100%,
        12px 100%, 0 calc(100% - 12px),
        0 calc(50% + 6px), 12px 50%,
        0 calc(50% - 6px), 0 12px
    );
    box-shadow:
        3px 4px 0 rgba(0, 0, 0, 0.18),
        0 6px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 14px var(--space-7) var(--space-7);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}

.reading-book-card:hover {
    transform: translate(-2px, -4px);
    box-shadow:
        4px 6px 0 rgba(0, 0, 0, 0.22),
        0 10px 20px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 状态 pill */
.reading-book-status {
    display: inline-block;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: var(--type-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--space-2) 9px;
    margin-bottom: var(--space-4);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(46, 125, 50, 0.92);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* 在读 = 黄 + 脉动圆点 */
.reading-book-card--reading .reading-book-status {
    background: rgba(245, 197, 66, 0.95);
    color: rgba(40, 30, 10, 0.95);
    position: relative;
    padding-left: 21px;
}

.reading-book-card--reading .reading-book-status::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(180, 50, 30, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
    animation: readingStatusPulse 1.6s ease-in-out infinite;
}

@keyframes readingStatusPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.45; transform: translateY(-50%) scale(0.75); }
}

/* 标题 */
.reading-book-title {
    margin: 0 0 3px;
    line-height: 1.32;
}

.reading-book-title-zh {
    display: block;
    font-family: var(--font-cjk);
    font-size:var(--type-body);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(20, 20, 25, 0.94);
}

/* 分类角标 */
.reading-book-cat {
    display: inline-block;
    font-family: 'PingFang SC', -apple-system, sans-serif;
    font-size: var(--type-micro);
    letter-spacing: 0.08em;
    color: rgba(10, 31, 36, 0.55);
    border: 1px solid rgba(10, 31, 36, 0.16);
    padding: 1px var(--space-3);
    margin-bottom: var(--space-4);
}

/* 作者 */
.reading-book-author {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: 7px;
    border-top: 1px solid rgba(20, 20, 25, 0.1);
}

.reading-book-author-zh {
    font-family: var(--font-cjk);
    font-size: var(--type-body-sm);
    font-weight: 500;
    color: rgba(95, 60, 175, 0.9);
}

.reading-book-author-en {
    font-family: var(--font-serif-cjk);
    font-size: var(--type-caption-sm);
    font-style: italic;
    color: rgba(95, 60, 175, 0.68);
}

/* ★ 用户指定标注 (洞穴奇案 / 其实不识字) */
.reading-book-note {
    margin-top: 7px;
    font-family: 'PingFang SC', -apple-system, sans-serif;
    font-size: var(--type-caption-sm);
    line-height: 1.4;
    color: rgba(179, 21, 21, 0.9);
    background: rgba(179, 21, 21, 0.06);
    border-left: 2px solid rgba(179, 21, 21, 0.4);
    padding: 3px 7px;
}

/* ==========================================================
   6.4.5 Reading → Notes 跳转按钮 (Backlog #186)
   ------------------------------------------------------------
   为什么另起一个 class 而不复用 .resume-jump-link:
     · .resume-jump-link 的手型光标靠 resume-modal.css 里的 body class 规则给
       (body.resume-modal-open .resume-jump-link), 而 reading 模态开着时 body 上没有那个
       class —— 直接复用会得到一个「点得动但没有手指光标」的按钮, 这与 #184 §10.26
       踩过的 pointer-events/cursor 族坑是同一面。
     · 与 #184 保留 .notes-module-card 独立 class 同一决策: 视觉同族, class 各自独立。
   视觉照搬 .resume-jump-link 的形状 (4px 八角切角 + 描边 + hover 反色),
   但色值取 reading 卡片自己的纸雕族, 不引 var(--theme-color): #174 已实测过
   浅金主题色压在米白卡纸上对比度≈0, reading 卡底同为 rgba(255,252,240,.96), 同理。
   ========================================================== */
.reading-jump-link {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 4px 10px;
    font-family: 'PingFang SC', -apple-system, sans-serif;
    font-size: var(--type-caption-sm);
    line-height: 1.2;
    color: rgba(10, 31, 36, 0.82);
    background: rgba(10, 31, 36, 0.06);
    border: 1px solid rgba(10, 31, 36, 0.28);
    border-radius: 0;                       /* 铁律 #2: 切角一律 clip-path */
    clip-path: polygon(
        4px 0%,
        calc(100% - 4px) 0%,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        0% calc(100% - 4px),
        0% 4px
    );
    cursor: pointer;                       /* ⚠ 必须自带: reading 模态没有 resume 的 body class */
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                transform 0.15s ease;
    user-select: none;
}
.reading-jump-link:hover {
    background-color: rgba(10, 31, 36, 0.92);
    color: rgba(255, 224, 130, 0.95);
    border-color: rgba(10, 31, 36, 0.85);
    transform: translateX(2px);
}
.reading-jump-link:focus-visible {
    outline: 2px solid rgba(0, 80, 100, 0.6);
    outline-offset: 2px;
}

/* ==========================================================
   6.5 外文/英文原名 (Backlog #130 新增 / #133 移到书名正下方)
   ------------------------------------------------------------
   位置理由 (#133): 原名是"书名的一部分"(译自什么), 不是"作者的补充信息"。
   原先排在作者行下方, 视觉上会被误读成作者/译者的注脚;
   现由 JS 插在 title 之后, 并把 title 的下边距从 6px 收到 3px 让两者贴紧。
   本行与书名同属一个"标题块", 下边距 8px 再交给后面的分类角标。

   中译本才需要显示"原名" (如 倦怠社会 → Müdigkeitsgesellschaft)。
   查不到确证的一律不渲染该行 (JS 侧 if (book.original) 门控), 不编造。

   字体铁律 (#123): 本行可能是拉丁 / 日文假名 / 中文标签混排,
   因此只设**一个**同时含 CJK 字形的 font-family 栈, 靠浏览器逐字符回退。
   绝不单独给 __text 设纯拉丁字体 (日文假名会掉宋体)。
   同理不设 italic —— 假名斜体形变难看, 且与"中文非斜体"铁律冲突。
   ========================================================== */
.reading-book-original {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif-cjk);
    font-size: var(--type-caption-sm);
    line-height: 1.45;
    color: rgba(95, 60, 175, 0.74);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* [Backlog #137] 「原名」小标签已从 DOM 移除, 对应样式一并删除。
   保留说明: 原样式是极细描边 + 主题色的小胶囊, 24 本书各挂一个属于重复噪音。
   若日后想恢复标签, 直接加回 .reading-book-original__label 规则并在
   buildBookCard 里 append 一个 span 即可。 */


/* ==========================================================
   6.6 在读置顶区 (Backlog #137)
   ------------------------------------------------------------
   结构完全对齐 life-photography 的 pinnedSection:
     .photo-section--pinned > .photo-section-label + .photo-grid
     → .reading-reading-now  > __head + .reading-books-grid--now
   视觉也照抄 photography 的规格: 11px Cinzel 大写 + 3px 左边线 + 古铜色,
   这样两个模态的"置顶区"是同一套视觉语言, 不会显得像两个不同模块。
   铁律: 硬边 > 圆角 (无 border-radius), 纯色 (无 gradient),
         不透明 > 透明 (实色底), 中英混排只设一个含 CJK 字形的字体栈 (#123)。
   ========================================================== */
.reading-reading-now {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: 26px;
    padding: 14px var(--space-7) var(--space-7);
    background: var(--role-paper);                       /* 实色米白, 跟书卡同底 */
    border: 1px solid rgba(95, 60, 175, 0.18);
    clip-path: polygon(                      /* 八角切角 4px (铁律) */
        4px 0, calc(100% - 4px) 0,
        100% 4px, 100% calc(100% - 4px),
        calc(100% - 4px) 100%, 4px 100%,
        0 calc(100% - 4px), 0 4px
    );
}

/* hidden 属性: JS 侧 readingNow.length === 0 时置 true */
.reading-reading-now[hidden] {
    display: none;
}

.reading-reading-now__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding-left: var(--space-5);
    border-left: 3px solid #b87333;          /* 古铜色, 同 photography pinned */
    line-height: 1;
}

.reading-reading-now__icon {
    font-size:var(--icon-reading-now);
    color: #b87333;
}

.reading-reading-now__title-zh {
    font-family: var(--font-cjk);
    font-size:var(--type-caption);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #b87333;
}

.reading-reading-now__title-en {
    font-family: var(--font-serif-cjk);
    font-size:var(--type-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(184, 115, 51, 0.78);
}

.reading-reading-now__count {
    margin-left: auto;
    font-family: var(--font-cjk);
    font-size:var(--type-caption-sm);
    letter-spacing: 0.06em;
    color: rgba(95, 60, 175, 0.6);
}

/* 在读区横跨整宽, 所以给更宽的列数 (分类区在两栏内只有 2 列) */
.reading-books-grid--now {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}