/* ============================================================
   学途 · 课程资料（cm-*）
   ============================================================
   单独一个文件，不往 pages.css 里加 —— pages.css 已经有 3000+ 行，
   而且这一页的类名前缀是 cm-，和旧的 kb- 系列不冲突，独立更清楚。

   两种视图：
     · 教材（Hello 算法）→ .cm-reader，一次只铺「一张」
     · 课程索引（csdiy）→ .cm-card，一张课程卡 + 外链
   ============================================================ */

/* ---------- 整体骨架：和旧版 .kb-wrap 同样的尺寸，不重新发明 ---------- */
.cm-wrap { position: relative; display: flex; height: 100%; }

.cm-side {
    width: 280px;
    margin-right: 20px;
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: width .28s cubic-bezier(.4,0,.2,1), margin-right .28s cubic-bezier(.4,0,.2,1);
}

/* ---------- 左栏可收起：安静读正文 ----------
   280 / 290 是配对的两个数 —— 改 .cm-side 宽度时同步改把手与感应带的 left。 */
.cm-wrap.cm-immersive .cm-side { width: 0; margin-right: 0; }

/* 分隔线上的透明感应带：只负责判断「鼠标靠到线边了吗」，本身看不见 */
.cm-collapse-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 278px;
    width: 24px;
    z-index: 4;
    transition: left .28s cubic-bezier(.4,0,.2,1);
}
.cm-wrap.cm-immersive .cm-collapse-zone { left: -12px; }

.cm-collapse-handle {
    position: absolute;
    top: 50%;
    left: 290px;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    opacity: 0;
    transition: opacity .2s, left .28s cubic-bezier(.4,0,.2,1), background .2s, color .2s, border-color .2s;
}
/* 收起后常驻半透明，否则找不到怎么展开 */
.cm-wrap.cm-immersive .cm-collapse-handle { left: 0; opacity: .45; }

/* 显形条件（按靶子从大到小）：
     1) 鼠标进左边目录栏 —— 任何人想看目录都会把鼠标移过去，这是主要入口
     2) 鼠标落在分隔线那条感应带上
     3) 鼠标直接压在把手上（它 z-index 高于感应带又压在带子正中，
        漏了这条会「看不见 → 挡住带子 → 永不显形」死锁）
     4) 键盘 Tab 聚焦
   读正文时（鼠标在右栏）仍然隐藏，不打扰。
   必须排在上面两条之后：特指度同为 (0,3,0) 时靠源码顺序取胜。 */
.cm-wrap .cm-side:hover ~ .cm-collapse-handle,
.cm-wrap .cm-collapse-zone:hover ~ .cm-collapse-handle,
.cm-wrap .cm-collapse-handle:hover,
.cm-wrap .cm-collapse-handle:focus-visible { opacity: 1; }
.cm-collapse-handle:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.cm-tree { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-right: 4px; }

.cm-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }

/* ---------- 侧栏：四层靠【字号 + 字重 + 缩进】分开 ----------
   原来四层是 .78 / .80 / .79 / .76 rem、字重 700/600/400/400 ——
   相邻只差 0.01rem，肉眼分不出谁是谁，所以整棵树看起来是「一团平的」。
   现在拉开成 4 档，相邻至少差 0.08rem，字重也逐级减： */
.cm-group-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 12px 8px 4px;
    font-size: .72rem;          /* 层 1：组标签（教材 / 课程索引）——最小、最淡 */
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--faint);
}
.cm-group-note { font-size: .66rem; font-weight: 400; color: var(--faint); opacity: .8; }
.cm-group-head .kb-count { margin-left: auto; font-weight: 400; }

.cm-group-kids { padding-left: 4px; }

/* 书 / 学科：和旧版 .kb-sub 一致的手感 */
.cm-book {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    padding: 7px 8px 7px 20px;  /* 左内边距 20 → 加上 .cm-group-kids 的 4，这级落在 24px */
    font-size: .88rem;          /* 层 2：书 / 学科（Hello 算法）——最大最深 */
    font-weight: 650;
    color: var(--ink);
    border-radius: 7px;
    transition: background var(--transition);
}
.cm-book:hover { background: var(--canvas); }
.cm-book i { font-size: .68rem; color: var(--faint); width: 10px; }
.cm-book span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 目录树的缩进靠这几层的 padding-left **累加**叠出来（容器是嵌套的），最终每级差 16px：
     L1 大类 .cm-group-head    0        +  8 =  8
     L2 书   .cm-book          4        + 20 = 24
     L3 章   .cm-chapter       4+28     +  8 = 40
     L4 节   .cm-sec           4+28+16  +  8 = 56
   实测文字起点 112 / 128 / 144 / 160，相邻级差都是 16。
   改的时候要**四级一起看** —— 容器嵌套、值是累加的，只动中间一层相邻两级就会挤在一起。
   历史坑：原本 L1 和 L2 的文字起点完全相同（只靠 ▸ 三角区分），用户报「一二三级之间没有缩进」。 */
.cm-chapters { padding-left: 28px; }

/* 章（教材）与课程（索引）共用这一行 */
.cm-chapter {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    padding: 6px 8px;
    font-size: .80rem;          /* 层 3：章 / 课程（第 11 章 排序） */
    font-weight: 450;
    color: var(--muted);
    border-radius: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.cm-chapter:hover { background: var(--canvas); color: var(--ink); }
.cm-chapter.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.cm-chapter i { font-size: .68rem; color: var(--faint); width: 10px; flex-shrink: 0; }
.cm-chapter span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 节 = 「一张」：侧栏第四层。缩进要跟章拉开（原来 12 → 14 只差 2px，
   加上字号也几乎一样，四层叠在一起就是一团） */
/* 注意：这些容器是【嵌套】的 —— .cm-secs 在 .cm-chapters 里，
   所以缩进是累加的（4+28+16），不是各自相对侧栏。按累计值调，别按单层值。 */
.cm-secs { padding-left: 16px; }
.cm-sec {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px 8px;
    font-size: .76rem;          /* 层 4：节 = 一张（11.1 排序算法）——最小 */
    font-weight: 400;
    color: var(--faint);
    border-radius: 6px;
    border-left: 2px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cm-sec:hover { background: var(--canvas); color: var(--ink); }
.cm-sec.active { color: var(--brand); border-left-color: var(--brand); background: var(--brand-tint); }

/* ---------- 阅读器 ---------- */
.cm-reader { display: flex; flex-direction: column; min-height: 100%; }

.cm-reader-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 12px;
    background: var(--canvas);
}

.cm-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: .78rem;
    color: var(--faint);
}
.cm-crumb i { font-size: .6rem; }
.cm-crumb-cur { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 正文栏宽：跟可用宽度自适应，不再写死。
   原来是固定 44em ≈ 591px —— 左栏一收起，右边空出一大块，文字还是那么窄，
   白空着（用户原话：宽度太低了）。改成按比例吃满可用宽度，两头留钳制：

     clamp(下限 38em, 比例 68%, 上限 64em)

   窗口宽 / 左栏收起时都会跟着变；窄屏不会窄到读不了，超宽屏不会拉成一条长线。
   要调手感只改这三个数：下限、百分比、上限。 */
.cm-page {
    flex: 1;
    width: 100%;
    /* 分两栏后总宽要比单栏时大 —— 否则每栏只剩 20 来字。
       下限 52em 是「每栏至少 25 字」的经验值。 */
    max-width: clamp(52em, 80%, 76em);
    margin: 0 auto;
    padding: 4px 0 28px;

    /* 正文分两栏（用户要求）：一栏一行 33 字，图跟着从 591 → 448px。
       注意 CSS 分栏是「左栏填满 → 再填右栏」，所以同一屏里左右两栏
       显示的不是相邻内容（左栏开头是「图 1」时，右栏开头可能已经是「图 7」）。
       实测一张 2110px 高 = 滚两屏多，读完左栏要滚回顶部读右栏。
       要改成「一屏一翻」的书页式，得配合横向分页，不是纯 CSS 能做的。 */
    column-count: 2;
    column-gap: 2.6em;
}

/* ---------- 正文标题层级：只用【字号 + 字重】，不用颜色、不用图标 ----------
   逐级放大、逐级减轻 —— 四档都明显大于正文（.84rem），且相邻至少差 0.1rem，
   不然眼睛分不出来。

   为什么必须写死：renderMD 把 `##` 渲染成 <h3>、`###` → <h4>、`####` → <h5>，
   而这里原本【没有任何标题规则】，全吃浏览器默认值再乘父级 .84rem：
       ##  → h3 = 1.17em → .98rem
       ### → h4 = 1em    → .84rem   ← 和正文一样大
       ####→ h5 = .83em  → .70rem   ← 比正文还小
   于是「标题越深、字号越小」，读起来就是乱的。 */
.cm-page .md-h1 { font-size: 1.50rem; font-weight: 700; }   /* `#`   章名  */
.cm-page h3     { font-size: 1.20rem; font-weight: 650; }   /* `##`  节    */
.cm-page h4     { font-size: 1.00rem; font-weight: 600; }   /* `###`       */
.cm-page h5     { font-size: .92rem;  font-weight: 600; }   /* `####`      */

.cm-page .md-h1,
.cm-page h3,
.cm-page h4,
.cm-page h5 {
    color: var(--ink);
    line-height: 1.45;
    margin: 24px 0 10px;
    break-after: avoid;      /* 标题别被留在栏底、正文跑到下一栏 */
}

/* 分栏后这些不能从中间被劈开 */
.cm-page .md-fig,
.cm-page pre,
.cm-page table,
.cm-page .md-callout-tag { break-inside: avoid; }

/* 表格横跨两栏 —— 数据类型那种表有 6 列，塞进 448px 的一栏里
   只能靠横向滚动看，跨栏才读得下来。（报纸排版里表格跨栏也是惯例） */
.cm-page .md-table-wrap { column-span: all; }
/* 一张的开头就是标题时不要留那么大的上边距 */
.cm-page > .md-h1:first-child,
.cm-page > h3:first-child,
.cm-page > h4:first-child { margin-top: 0; }
/* 标题后面紧跟正文时收紧一点，别让标题飘着 */
.cm-page .md-h1 + p,
.cm-page h3 + p,
.cm-page h4 + p,
.cm-page h5 + p { margin-top: 0; }

/* 翻张 */
.cm-pager {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 右边留出 76px 让开右下角的 AI 悬浮球（#chatFab 56px + 间距）——
       不留的话「下一张」正好压在它下面，点不到。 */
    padding: 10px 76px 10px 0;
    background: var(--canvas);
    border-top: 1px solid var(--line);
}
.cm-pager-info { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.cm-pager .btn[disabled] { opacity: .4; cursor: default; }

/* ---------- 课程卡（索引类） ---------- */
.cm-card-view { display: flex; justify-content: center; padding-top: 12px; }

.cm-card {
    width: 100%;
    max-width: 44em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px 28px;
}

.cm-card-title { margin: 12px 0 8px; font-size: 1.15rem; color: var(--ink); }
.cm-card-meta { font-size: .78rem; color: var(--faint); margin-bottom: 14px; }
.cm-card-sum { font-size: .86rem; line-height: 1.8; color: var(--muted); margin-bottom: 20px; }

.cm-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-card-nolink { font-size: .76rem; color: var(--faint); }

/* ---------- 补 renderMD 不认的三类语法（见 course-materials.js 的 renderMarkdown） ---------- */

/* `#` 一级标题（章名）的字号在正文层级那一节里定，见上面的 .cm-page .md-h1 */

/* 插图：Hello 算法 16 章 400+ 张图全靠这条 */
.md-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.md-link { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-2); }
.md-link:hover { color: var(--brand-deep); border-bottom-color: var(--brand); }

/* ---------- 图：整块 + 图注 ----------
   源文件里图号写成 `**<1>**` 单独一行、紧挨在图片上方（292 处，100% 如此），
   原来渲染成一条加粗的「<1>」浮在图上面 —— 既是噪声、又让图没有说明。
   现在合成一个 <figure>：图在上，图注「图 1」在下。 */
.md-fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 22px 0;
}
.md-fig .md-img { margin: 0; }          /* 间距由 .md-fig 统一给 */
.md-fig-cap {
    margin-top: 8px;
    font-size: .72rem;
    color: var(--faint);
    letter-spacing: .02em;
}

/* ---------- 代码块的语言条 ----------
   源文件里语言写成 `**Python**` 单独一行、紧跟代码围栏（416 处，100% 如此），
   原来渲染成一条加粗的「Python」飘在代码上方。现在做成代码块头上的一条标签。 */
.md-code-lang {
    display: inline-block;
    margin: 18px 0 0;
    padding: 4px 12px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--faint);
    background: var(--sunk);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.md-code-lang + pre {
    margin-top: 0;
    border-radius: 0 8px 8px 8px;
}

/* ---------- 代码块本体 ----------
   全站原本【没有任何 pre 样式】，代码一直是浏览器默认的裸等宽字：
   没底色、没边框、长行直接撑破正文栏。 */
.cm-page pre {
    margin: 0 0 18px;
    padding: 14px 16px;
    overflow-x: auto;          /* 长行横向滚动，别撑破正文栏 */
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.7;
}
.cm-page pre code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    color: var(--ink);
    background: none;
    padding: 0;
    white-space: pre;
}
/* 行内代码（正文里的 `nums` 这种） */
.cm-page :not(pre) > code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--sunk);
    font-size: .84em;
    color: var(--brand-deep);
}

/* ---------- 提示块标签 ----------
   `**提示**` / `**参考解答**`（112 处）原来是加粗正文，和上下文糊在一起。 */
.md-callout-tag {
    margin: 20px 0 6px;
    padding-left: 10px;
    border-left: 3px solid var(--brand-2);
    font-size: .78rem;
    font-weight: 650;
    color: var(--brand-deep);
}