/* ==========================================================
   notes-responsive.css — Notes 响应式
   ------------------------------------------------------------

   加载序: CSS 第 32 / 37 (index.html <head> 第 32 个 <link>; 后加载的覆盖先加载的)
   ★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
     (单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
      加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
   [Backlog #156 · 2026-10-03] 新建, 跟 life-reading-responsive.css
   (#145) 同结构 (4 档断点, 1024 / 768 / 480 / 360):
       §7 4 档断点 (主模态 + PDF 模态都按此收缩)
   ========================================================== */

/* §7.1 1024px 及以下 — 网格改 1 列, 容器收缩,
   [Backlog #196] 两栏筛选栏折叠成单栏 (抄 life-photography.css:404-407)
   —— 1024 以下每栏只剩 ~500px, 子级 chip 会折成 3~4 行, 比单栏更糟。 */
@media (max-width: 1024px) {
    #notes-modal .notes-filter-bar {
        flex-direction: column;
        gap: 8px;
    }
    #notes-modal .notes-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 12px;
    }
    #notes-modal .notes-inner {
        width: 95vw;
    }
    #notes-modal .notes-header {
        padding: 18px 24px 14px;
    }
    #notes-modal .notes-body {
        padding: 18px 24px 40px;
    }
    .notes-pdf-modal .notes-pdf-container {
        width: 95vw;
        height: 90vh;
    }
}

/* §7.2 768px 及以下 — 中屏, 字号微缩 */
@media (max-width: 768px) {
    #notes-modal .notes-inner {
        max-height: 95vh;
    }
    #notes-modal .notes-title {
        font-size: 1.15rem;
    }
    #notes-modal .notes-item {
        padding: 12px 14px;
    }
    #notes-modal .notes-item-title {
        font-size: 14px;
    }
    /* [Backlog #267 · 2026-10-23] 原来的 `height: 168px` **撤掉** ——
       缩略图改竖版(595/846)后, 写死 height 会把比例覆盖回横版
       (实测 768px 下比例变成 1.134, 页面被压成横条)。 */
    .notes-pdf-modal .notes-pdf-title {
        font-size: 0.9rem;
        padding-right: 40px;
    }
    .notes-pdf-modal .notes-pdf-subtitle {
        font-size: 0.6rem;
    }
    .notes-pdf-modal .notes-pdf-notice {
        font-size: 9.5px;
        padding: 4px 12px;
    }
}

/* §7.3 480px 及以下 — 窄屏, padding 收紧 */
@media (max-width: 480px) {
    #notes-modal .notes-header {
        padding: 14px 18px 12px;
    }
    #notes-modal .notes-body {
        padding: 14px 18px 30px;
    }
    #notes-modal .notes-chip {
        font-size: 11px;
        padding: 3px 10px;
    }
    /* [Backlog #221] 窄屏: 父级已降到 11px, 子级若跟着降会到 10px 不可读;
       反过来把子级**抬回**父级同号, 靠缩进而非字号表达从属。
       缩进也收窄, 否则 480px 下子级行只剩不到一行的可放 chip 宽度。 */
    #notes-modal .notes-chip--sub {
        font-size: 11px;
        padding: 2px 8px;
    }
    #notes-modal .notes-filter-row--sub {
        padding-left: 8px;
    }
    #notes-modal .notes-chip-sep {
        margin: 0 3px;
    }
    /* [Backlog #267 · 2026-10-23] 原来的 `height: 150px` **撤掉** ——
       缩略图改成竖版(595/846)后, 写死 height 会把比例覆盖回横版。
       窄屏靠 `aspect-ratio` 随卡宽缩放即可。 */
    .notes-pdf-modal .notes-pdf-container {
        height: 95vh;
    }
    .notes-pdf-modal .notes-pdf-header {
        padding: 10px 16px;
    }
}

/* §7.4 360px 及以下 — 极窄屏, 网格与卡片压缩 */
@media (max-width: 360px) {
    #notes-modal .notes-grid {
        gap: 8px;
    }
    #notes-modal .notes-item {
        padding: 10px 12px;
    }
    #notes-modal .notes-item-title {
        font-size: 13px;
    }
    /* [Backlog #267] 原来的 `height: 132px` **撤掉** —— 同一个坑(比例被覆盖回横版)。
       极窄屏改成**两列**: 竖版预览单列会有 400px 高, 38 张卡滚不到底。 */
    #notes-modal .notes-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ==========================================================
   §7.5 宽屏加密 · 2026-10-03 建立, #196 · 2026-10-09 扩档)
   ------------------------------------------------------------
   [Backlog #166] 原始两档:
     ≥1200px  2 → 3 列
     ≥1600px  3 → 4 列, gap 12 → 10px, 缩略图 200 → 170px
   当时的判断是「瓶颈不在容器而在列数」—— **不准确**。

   [Backlog #196] 实测推翻:
     视口  1800 / 1920 / 2560 → inner 全部 = 1400px, 列数全部 = 4
   因为 .notes-inner 是 `width: min(95vw, 1400px)` (notes.css:95),
   95vw 在 1474px 视口就已经超过 1400 上限, 再加宽视口**一点用没有**。
   这与 Reading §10.27 记的是同一个坑 (那里是 max-width:1080px 顶住了 3 列)。
   → 加列必须**同时**放开容器上限, 否则卡片被压扁而信息量不变:
     缩略图是 object-fit:contain + object-position:center top,
     渲染尺寸由**高度**决定, 卡变窄只会在两侧多留白, 横向空间全浪费。

   [Backlog #267 · 2026-10-23] **本段档位作废**: 缩略图改竖版后, 列数不再需要写死
   (auto-fill + 窄轨道自适应), 「越宽屏把缩略图缩到 135px」的补偿也不需要了。
     ≥1200  容器 1400  3 列  卡 433px   维持
     ≥1600  容器 1400  4 列  卡 323px   维持 (#166 成果)
     ≥1800  容器 1760  5 列  卡 ~329px  新增
     ≥2400  容器 2080  6 列  卡 ~322px  新增
   缩略图 200 → 170 → 150 → 135px; 135px 是可读下限,
   再低就看不出是 PDF 首页了 (不是「好看」问题, 是信息量归零)。
   ========================================================== */
@media (min-width: 1600px) {
    #notes-modal .notes-grid {
        gap: 12px;
    }
    #notes-modal .notes-item {
        padding: 12px 13px;
    }
    #notes-modal .notes-item-title {
        font-size: 15px;
    }
}

/* [Backlog #196] ≥1800: 放开容器上限到 1760, 配合 5 列。
   1760 是按「(1760 − 38×2 body padding − 4×10 gap) ÷ 5 ≈ 329px」反推的,
   即 5 列之后卡片仍保持 #166 锚定的 ~325px 卡宽, 不靠压扁换列数。 */
@media (min-width: 1800px) {
    #notes-modal .notes-inner {
        width: min(95vw, 1760px);
    }
    #notes-modal .notes-grid {
        gap: 12px;
    }
    #notes-modal .notes-item {
        padding: 11px 12px;
    }
    #notes-modal .notes-item-title {
        font-size: 14px;
    }
}

/* [Backlog #196] ≥2400: 2080 ÷ 5 列 → 6 列, 卡宽仍 ~322px。
   超宽屏 (2K/4K) 下 4 列会显得空, 这一档把它们拉回 6 列。 */
@media (min-width: 2400px) {
    #notes-modal .notes-inner {
        width: min(95vw, 2080px);
    }
    #notes-modal .notes-grid {
        gap: 12px;
    }
    #notes-modal .notes-item {
        padding: 10px 11px;
    }
    #notes-modal .notes-item-title {
        font-size: 13px;
    }
}