/* 小节笔记（t-20261021-uvpy）：右栏第一个标签、窗口（右栏放大）与右栏笔记页标签共用。
   纸面和旧康奈尔笔记同一张纸：阅读层的纸色与细线（reading-content.css 给 .board-doc 的同一组映射），
   标题、正文、加粗、表格都走阅读层；这里只排外框、下拉、目录、空页、状态记号和正文链接。
   蓝只给可点与当前，红是没生成出来，黄是资料更新过，灰只做结构。笔记里先不显示掌握状态（人类 10/21）。 */

#sectionNotes { flex: 1; min-width: 0; min-height: 0; }
.sn { --board-paper: var(--reading-paper); --board-border: var(--reading-rule); display: flex; min-width: 0; min-height: 0; height: 100%; color: var(--ink); }
.sn-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid var(--board-border); border-radius: var(--r-md); background: var(--board-paper); }
.sn-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sn-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 选字胶囊和引用浮层挂在笔记页上，随页滚动 */
.sn-page { position: relative; }
.note-pane.rp-pane.is-on { display: flex; height: 100%; min-height: 0; }
.note-pane .sn { flex: 1; }

/* 右栏顶部一个下拉（和顶栏切换课程同一种：按钮 + kaopy.css 的 .menu 浮层）：按钮写当前页，菜单按单元分组列出全部小节。
   窗口里有目录，侧栏标签上有页名，都不出这一条 */
.sn-bar { position: relative; flex: none; padding: 6px 8px; border-bottom: 1px solid var(--board-border); }
.sn-bar:empty, .sp-primary .sn-bar { display: none; }
.sn-pick__btn { display: flex; align-items: center; gap: 6px; width: 100%; height: var(--control-h-sm); padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-ui); font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease; }
.sn-pick__btn:hover, .sn-pick__btn[aria-expanded="true"] { border-color: var(--board-border); background: var(--surface-subtle); }
.sn-pick__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sn-pick__no { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }
.sn-pick__no:empty { display: none; }
.sn-pick__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-pick__btn .icon { flex: none; color: var(--muted); transition: transform 140ms ease; }
.sn-pick__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.sn-pick__menu { top: calc(100% - 2px); right: 8px; left: 8px; min-width: 0; max-height: min(420px, 60vh); }
.menu.sn-pick__menu .sn-pick__opt { align-items: baseline; gap: 0; padding: 5px 10px 5px 26px; border-radius: var(--r-xs); color: var(--ink); line-height: 1.45; }
.menu.sn-pick__menu .sn-pick__opt.is-unit { padding-left: 10px; font-weight: 600; }
.menu.sn-pick__menu .sn-pick__opt.is-unit:not(:first-child) { margin-top: 6px; }
.menu.sn-pick__menu .sn-pick__opt:focus-visible { outline: none; background: var(--surface-subtle); box-shadow: inset 0 0 0 2px var(--accent); }
.menu.sn-pick__menu .sn-pick__opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.sn-pick__opt[aria-selected="true"] .sn-toc__no { color: inherit; }

/* 页面：康奈尔外壳只填主栏；侧栏和底栏留出空位（以后放错题与重点、学生自己的批注）。页名和旧笔记同一个阅读层标题 */
.sn-shell.cornell-workspace { background: transparent; }
.sn-note { max-width: 1080px; margin-inline: auto; }
.sn .cornell-workspace__page-title { font-family: 'Kaopy Reading Latin', var(--font-sans); font-size: 20px; color: var(--reading-heading); letter-spacing: .02em; }
/* 侧栏和底栏现在都是空位：不画、不占宽度，正文页一栏居中（放进内容以后才按康奈尔两栏排）。
   一栏时整页限宽 42rem：窗口里一行不超过四十来个字 */
.sn-note > :is(.sn-note__cues, .sn-note__summary):empty { display: none; }
.sn-note:has(> .sn-note__cues:empty) { grid-template-columns: minmax(0, 1fr); max-width: 42rem; }
.sn-note:has(> .sn-note__cues:empty) > :is(.cornell-workspace__page-header, .sn-note__main) { grid-column: 1; }
.sn-message { margin: 24px 16px; color: var(--muted); font-size: var(--fs-ui); }
.sn-message.is-error { color: var(--danger); }

/* 资料更新过：页眉下一行，前面一个黄点（和目录行尾的同一个记号），带「重新生成」（和地图浮窗里的同一个按钮）；不铺色块 */
.sn-stale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--marker-ink); font-size: var(--fs-caption); line-height: 1.5; }
.sn-stale::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--marker); }
.sn-stale.is-fresh::before { content: none; }
.sn-stale__retry { padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface); color: var(--accent-strong); font: inherit; line-height: 1.7; cursor: pointer; }
.sn-stale__retry:hover { background: var(--accent-soft); }

/* 没生成：一张虚线空页，中间「＋」；生成中：同一张空页转圈；没生成出来：空页 + 重新生成 */
.sn-blank { display: grid; justify-items: center; gap: 12px; padding: 32px 8px 24px; text-align: center; }
.sn-blank__page { display: grid; place-items: center; width: 96px; aspect-ratio: 3 / 4; padding: 0;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--muted); font: inherit; }
button.sn-blank__page { cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease; }
button.sn-blank__page:hover, button.sn-blank__page:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); outline: none; }
.sn-blank__plus { font-size: 28px; font-weight: 400; line-height: 1; }
.sn-blank__copy { max-width: 26em; margin: 0; color: var(--muted); font-size: var(--fs-ui); line-height: 1.6; }
.sn-blank__copy.is-failed { color: var(--danger); }

/* 目录行与单元页的小节行：已生成的字是墨色，没生成的字是浅灰；
   行尾只在生成中（转圈）、没生成出来（红点）、资料更新过（黄点）时有一个记号 */
.sn-toc__row, .sn-unit-list__row { display: flex; align-items: baseline; width: 100%; border: 0; border-radius: var(--r-xs); background: none;
  color: var(--ink); font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer; }
:is(.sn-toc__row, .sn-unit-list__row):hover, :is(.sn-toc__row, .sn-unit-list__row):focus-visible { background: var(--surface-subtle); outline: none; }
:is(.sn-toc__row, .sn-unit-list__row):focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
:is(.sn-toc__row, .sn-unit-list__row):not([data-status="ready"]):not(.is-unit) { color: var(--faint); }
.sn-toc__no { flex: none; min-width: 2.2em; color: var(--faint); font-variant-numeric: tabular-nums; }
.sn-toc__text, .sn-unit-list__title { flex: 1; min-width: 0; }
.sn-state { flex: none; align-self: center; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; }
.sn-state[data-status="failed"] { background: var(--danger); }
.sn-state[data-status="stale"] { background: var(--marker); }
.sn-state[data-status="generating"] { width: 10px; height: 10px; border: 1.5px solid var(--border-strong); border-top-color: var(--accent); animation: sn-spin 900ms linear infinite; }

/* 单元页：单元简介下面列出它的小节 */
.sn-unit-list { display: grid; gap: 1px; margin: 18px 0 0; padding: 0; list-style: none; }
.sn-unit-list__row { padding: 6px 8px; }

/* 窗口左侧的目录（Kindle 式）：只在笔记窗口出现。单元一行粗体，小节缩进；当前页淡蓝底蓝字 */
.sn-toc { display: none; }
.sp-primary .sn-toc { display: block; flex: none; width: clamp(180px, 20%, 260px); min-height: 0; margin-right: 14px; padding: 0 4px 16px 0; overflow-y: auto; scrollbar-width: thin; }
/* 笔记助手的气泡钉在窗口左下角、压在目录上：目录底下留出气泡的高度，最后几行能滚到它上面 */
.sp-primary #pane-board .sn-toc { padding-bottom: 76px; }
.sn-toc__units, .sn-toc__subs { margin: 0; padding: 0; list-style: none; }
.sn-toc__unit + .sn-toc__unit { margin-top: 12px; }
.sn-toc__row { padding: 4px 8px; line-height: 1.45; }
.sn-toc__row.is-unit { font-weight: 600; }
.sn-toc__subs .sn-toc__row { padding-left: 16px; }
.sn-toc__row[aria-current="page"], .sn-toc__row[aria-current="page"]:hover { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.sn-toc__row[aria-current="page"] .sn-toc__no { color: inherit; }

/* 板书（t-20261021-uvpy 人类 10/22「简洁清晰，像板书一样讲核心要点，次要要点快速补充，整体一览无余」）。
   只挂在 .sn-content 下（.cornell-rich-content 别处也在用），选择器带 .sn 前缀压过后加载的阅读层。
   四级：## 是分块标题（墨水蓝 + 通栏细线）→ ### 是小标题（墨色粗体，与正文同大）→ 正文与一级要点（墨色）
   → 嵌套要点与引用里的补充（小一号、淡一档、无底色）。
   不铺色块：标题去掉底色块，引用去掉米色底，加粗只加字重，==标记== 是一道贴字脚的淡黄。
   颜色全部取阅读层 token 或它们的混色，深色跟着 token 走，不另定义。 */
.sn .sn-content {
  --sn-minor: color-mix(in srgb, var(--reading-ink) 70%, var(--reading-paper));
  --sn-hair: color-mix(in srgb, var(--reading-rule) 70%, var(--reading-paper));
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
}
.sn .sn-content > * + * { margin-top: .5em; }
.sn .sn-content p + p { margin-top: .35em; }
/* 渲染器把标题降一级：# → h2，## → h3，### → h4。
   页眉已经写了小节名：正文开头再写一遍的 # 不再画 */
.sn .sn-content > h2:first-child { display: none; }
.sn .sn-content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-sans); line-height: 1.45; letter-spacing: 0; }
.sn .sn-content :is(h1, h2, h3) {
  display: block; width: auto; margin: 1.3em 0 .4em; padding: 0 0 .2em; border: 0; border-bottom: 1px solid var(--reading-rule);
  border-radius: 0; background: none; color: var(--reading-heading); font-size: 1.08em; font-weight: 650;
}
.sn .sn-content h1::before { content: none; }
.sn .sn-content h4 {
  width: auto; margin: .9em 0 .2em; padding: 0; border-radius: 0; background: none;
  color: var(--reading-ink-strong); font-size: 1em; font-weight: 650;
}
.sn .sn-content :is(h5, h6) { margin: .7em 0 .1em; color: var(--reading-ink-strong); font-size: .94em; font-weight: 600; }
.sn .sn-content > :is(h1, h2, h3, h4):first-child, .sn .sn-content > h2:first-child + * { margin-top: .1em; }

/* 重点要轻：加粗只加字重；==标记== 一道贴着字脚的淡黄，不铺满字身 */
.sn .sn-content strong { padding: 0; background: none; color: var(--reading-ink-strong); font-weight: 650; }
.sn .sn-content mark {
  padding: 0 .05em; color: inherit; font-weight: inherit;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--reading-marker) 70%, transparent) 62%, color-mix(in srgb, var(--reading-marker) 70%, transparent) 94%, transparent 94%);
}
.sn .sn-content em { padding: 0; background: none; color: var(--reading-annotation); font-family: inherit; text-decoration: none; }

/* 要点：一级要点紧凑、记号淡；嵌套要点是次要补充，小一号、淡一档、左边一条细线 */
.sn .sn-content :is(ul, ol) { gap: .15em; padding-inline-start: 1.25em; }
.sn .sn-content li { padding-inline-start: .05em; }
.sn .sn-content li::marker { color: var(--faint); font-weight: 400; }
.sn .sn-content ol > li::marker { color: var(--reading-heading); font-size: .92em; }
.sn .sn-content li > :is(ul, ol) {
  margin-top: .1em; padding-inline-start: 1.1em; border-inline-start: 0;
  color: var(--sn-minor); font-size: .9em; line-height: 1.6;
}
.sn .sn-content li > :is(ul, ol) strong { color: inherit; }
.sn .sn-content li > p + p { margin-top: .25em; }
/* 引用里是补充：不铺底色，左边一条细线，小一号、淡一档 */
.sn .sn-content blockquote {
  gap: .2em; margin: .3em 0; padding: 0 0 0 .8em; border: 0; border-inline-start: 2px solid var(--reading-rule); border-radius: 0;
  background: none; --reading-ground: var(--reading-paper); color: var(--sn-minor); font-size: .9em; line-height: 1.6;
}
.sn .sn-content blockquote strong { color: inherit; }
.sn .sn-content hr { margin: .8em 0; border-top-color: var(--sn-hair); }

/* 表格：只有细线，表头不铺底，上下两道稍深的线收住；字小一号、格距收紧 */
.sn .sn-content table { margin: .2em 0; border-block: 1px solid var(--reading-rule); font-size: .88em; line-height: 1.5; }
.sn .sn-content :is(th, td) { padding: .32em .6em .32em 0; border-bottom: 1px solid var(--sn-hair); }
.sn .sn-content :is(th, td):last-child { padding-right: 0; }
.sn .sn-content :is(th, td):first-child { min-width: 5.5em; }
.sn .sn-content th { border-bottom-color: var(--reading-rule); background: none; color: var(--reading-ink-strong); font-family: var(--font-sans); font-weight: 600; }
.sn .sn-content td strong { font-weight: 600; }
.sn .sn-content .cornell-math--display { margin: 8px 0; }

/* 正文链接（选择器带上 .sn-content，压过阅读层统一的 a 样式），存在感都压低：
   知识点是墨色字 + 一道细下划线（本页的淡蓝，别的小节稍深的蓝，指一下或点开都和以前一样）；
   资料引用只写页码的（「p5」「L3 p19–21」）整段是小号灰字，像页码角标；
   写了一段话的保持正文字号，只带一道很淡的点线，后面补一个更小的灰色页码角标；
   失效的降成普通文字，后面一个浅灰「已失效」 */
.sn .sn-content a.sn-link { color: inherit; text-decoration: none; cursor: pointer; border-radius: 2px; }
.sn .sn-content a.sn-link--map { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.sn .sn-content a.sn-link--map.is-local { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sn .sn-content a.sn-link--map.is-remote { text-decoration-color: color-mix(in srgb, var(--accent) 80%, transparent); }
.sn .sn-content a.sn-link--src { text-decoration: underline dotted color-mix(in srgb, var(--faint) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: .24em; }
.sn .sn-content a.sn-link--src.is-cite { color: var(--faint); font-size: .78em; font-weight: 400; text-decoration: none; white-space: nowrap; }
.sn .sn-content a.sn-link--src.is-cite :is(strong, mark, em) { padding: 0; background: none; color: inherit; font-weight: inherit; }
/* 标题自己有一道通栏细线：标题里的知识点链接不再另画文字下划线，免得标题下面叠两条线 */
.sn .sn-content :is(h1, h2, h3, h4, h5, h6) a.sn-link--map { text-decoration: none; }
.sn .sn-content a.sn-link:hover, .sn .sn-content a.sn-link.is-peek { background: var(--accent-soft); color: var(--accent-strong); }
.sn .sn-content a.sn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sn-content .sn-link__page { display: inline; min-width: 0; min-height: 0; margin-left: 1px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--faint); font-family: var(--font-sans); font-size: 10px; font-weight: 400; line-height: 0; vertical-align: super; }
.sn-dead { color: inherit; }
.sn-dead__tag { margin-left: 4px; color: var(--faint); font-family: var(--font-sans); font-size: var(--fs-caption); }

/* 页眉第一行：单元名在左，右端几个图标键（问这一节、上一节、下一节）；字都在悬停提示和读屏里 */
.sn-head { display: flex; align-items: center; gap: 8px; }
.sn-head:has(.sn-tools) { min-height: 28px; }
.sn-head .cornell-workspace__eyebrow { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-tools { flex: none; display: flex; align-items: center; gap: 2px; margin-right: -6px; }
.sn-tool { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.sn-tool:hover:not(:disabled), .sn-tool:focus-visible { background: var(--accent-soft); color: var(--accent-strong); }
.sn-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sn-tool:disabled { opacity: .35; cursor: default; }
.sn-tool--ask { color: var(--accent-strong); }
.sn-icon { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .sn-tool { width: 36px; height: 36px; } }

/* 正文里被问的那几句：一层盖在正文上的淡虚下划线（不挡点击、不碰正文），点它或左栏的气泡都打开那条旁问；
   指针停在任一处，另一处跟着变实 */
.sn-note__main { position: relative; }
.sn-asks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sn-ask__line { position: absolute; height: 0; margin-top: 1px; border-bottom: 1.5px dashed color-mix(in srgb, var(--accent) 48%, transparent); transition: border-color 140ms ease; }
.sn-ask__line.is-hot { border-bottom-style: solid; border-bottom-color: var(--accent); }
.sn-note__main.is-ask-hover .sn-content { cursor: pointer; }

/* 页眉「问到这一节 N」：一行，收起；点开列出来源图标、引文前几个字、回答首句，点一条打开那条旁问 */
.sn-else { margin-top: 8px; }
.sn-else__head { display: inline-flex; align-items: center; gap: 6px; margin-left: -7px; padding: 3px 8px 3px 7px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 12.5px/1.4 var(--font-sans); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.sn-else__head:hover, .sn-else.is-open .sn-else__head { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.sn-else__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sn-else__ico { width: 15px; height: 15px; }
.sn-else__n { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.sn-else__chev { width: 14px; height: 14px; transition: transform 160ms ease; }
.sn-else.is-open .sn-else__chev { transform: rotate(180deg); }
.sn-else__list { margin: 6px 0 0; padding: 0 0 0 2px; list-style: none; border-left: 2px solid var(--board-border); animation: sn-else-in 180ms cubic-bezier(.2, .8, .2, 1); }
.sn-else__list[hidden] { display: none; }
@keyframes sn-else-in { from { opacity: 0; transform: translateY(-3px); } }
.sn-else__row { display: grid; grid-template-columns: 16px minmax(0, 14em) minmax(0, 1fr); align-items: center; gap: 4px 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 400 13px/1.5 var(--font-sans); text-align: left; cursor: pointer; transition: background-color 140ms ease; }
.sn-else__row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sn-else__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sn-else__src { width: 15px; height: 15px; color: var(--muted); }
.sn-else__quote { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.sn-else__ans { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 12.5px; }
/* 右栏窄：引文一行，回答首句换到下一行 */
@container (max-width: 40rem) {
  .sn-else__row { grid-template-columns: 16px minmax(0, 1fr); }
  .sn-else__ans { grid-column: 2; }
}
@media (max-width: 767px) {
  .sn-else__row { grid-template-columns: 16px minmax(0, 1fr); }
  .sn-else__ans { grid-column: 2; }
}

@keyframes sn-spin { to { transform: rotate(360deg); } }
/* 转圈是进度，不是装饰：系统减弱动画时 kaopy.css 全局停掉动画，这里放慢保留，否则生成中看着像卡住 */
@media (prefers-reduced-motion: reduce) {
  .sn-state[data-status="generating"], .sn-blank .km-note__spin { animation: sn-spin 1600ms linear infinite !important; }
  .sn-else__list { animation: none; }
  .sn-else__chev, .sn-ask__line, .sn-tool { transition: none; }
}
