/* 「AI 通识课」在 style.css 之上的改动：培玉配色、中文字体、更大的字号（适老）、新的框类型、页脚。
   配色取自 peiyuMath/brand/peiyu/theme.json，和 kit/style.py 一致。 */
:root {
  --paper: #f7f4ee;
  --paper-2: #efeae0;
  --card-2: #ece7dc;
  --ink: #1a2822;
  --ink-2: #44514a;
  --stone: #7a756a;
  --teal: #2f7a56;          /* 松绿：主色 */
  --teal-soft: #dcebe1;
  --sea: #3e5c76;           /* 黛蓝：AI 的回答 */
  --amber: #966524;         /* 赤金：强调 */
  --mark: #f1e2c0;
  --red: #b5452f;           /* 朱色：错、危险 */
  --red-soft: #f3ddd6;
  --green: #2f7a56;
  --green-soft: #dcebe1;
  --sans: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "IBM Plex Sans", system-ui, sans-serif;
  --display: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --teal: #5fb48a; --amber: #d9a441; --sea: #8fb0cc; --red: #e07a62; }
}
:root[data-theme="dark"] { --teal: #5fb48a; --amber: #d9a441; --sea: #8fb0cc; --red: #e07a62; }

body { font-size: 17px; line-height: 1.8; }
h1, h2, h3 { letter-spacing: 0; }

/* 新的框：演示（构造例子）、活动、分人群、不插电 */
.callout.demo { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--mark); }
.callout.demo > b:first-child { color: var(--amber); }
.callout.activity { border-color: color-mix(in srgb, var(--sea) 45%, transparent); }
.callout.activity > b:first-child { color: var(--sea); }
.callout.track { border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.callout.track > b:first-child { color: var(--teal); }
.callout.unplugged > b:first-child { color: var(--amber); }

/* 信号灯 */
.lamp { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; vertical-align: -0.05em; margin-right: 6px; }
.lamp.g { background: #2f7a56; } .lamp.y { background: #d9a441; } .lamp.r { background: #b5452f; }

/* 出处角标和来源列表 */
sup.cite a { text-decoration: none; font-size: 0.75em; color: var(--sea); }
ol.sources { font-size: 14px; line-height: 1.6; word-break: break-all; }

/* 互动：选项按钮、卡片、记录表 */
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.choices button { font: inherit; font-size: 15px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; min-height: 40px; }
.choices button.on { border-color: var(--teal); background: var(--teal-soft); font-weight: 600; }
.choices button.bad { border-color: var(--red); background: var(--red-soft); }
.aicard { border: 2px solid var(--sea); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--card); }
.aicard .who { font: 600 12px var(--mono); color: var(--sea); }
.feedback { font-size: 15px; margin-top: 6px; min-height: 1.5em; }
.feedback.ok { color: var(--teal); } .feedback.no { color: var(--red); }
table.log input, table.log select { width: 100%; font: inherit; font-size: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.calc label { display: inline-flex; gap: 6px; align-items: center; margin: 4px 12px 4px 0; }
.calc input { width: 6em; font: inherit; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }

/* 页脚 */
footer p { margin: 4px 0; }
footer .credit { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
footer .credit img { flex: none; }
footer .credit b { font-weight: 600; color: var(--ink-2); }
footer .fine { font-size: 13px; opacity: 0.85; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: inline; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline; }

/* 模块首页顶部的视频（course.js 的 videoBlock）。16:9，随宽度缩放；手机上贴边。 */
.lecture-video { margin: 32px auto 0; max-width: 960px; }
.lecture-video video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; border-radius: 12px; }
.lecture-video .vmeta { font-size: 16px; color: var(--ink-2); margin: 10px 2px 0; line-height: 1.6; }
/* 视频区的按钮：颜色照 csc4801（boxi-cs.github.io/csc4801）一模一样——
   下载视频 = 它总览卡片上的「▶ Video」按钮（.lec .watch：赤金边、浅金底、深色字，悬停 brightness 1.05）；
   字幕 = 它视频播放框里的 .cbtn（纸色底、灰边、深色字，悬停边框和字变青）。焦点环和 csc4801 一样用浏览器默认。
   色值直接写 csc4801 的（不是本站的松绿），字号按本站规矩不小于 16px。 */
:root {
  --csc-paper: #f6f5f1; --csc-ink: #1d232b; --csc-line: #d9dbd4;
  --csc-teal: #0f6e73; --csc-teal-soft: #d5e8e6; --csc-amber: #c27a1a; --csc-mark: #f6e3be;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --csc-paper: #14181d; --csc-ink: #e8e6df; --csc-line: #333b44;
    --csc-teal: #4fb3b0; --csc-teal-soft: #173a3b; --csc-amber: #e3a54b; --csc-mark: #4a3818;
  }
}
:root[data-theme="dark"] {
  --csc-paper: #14181d; --csc-ink: #e8e6df; --csc-line: #333b44;
  --csc-teal: #4fb3b0; --csc-teal-soft: #173a3b; --csc-amber: #e3a54b; --csc-mark: #4a3818;
}
.lecture-video .vacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 2px 0; }
.lecture-video .vbtn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: 7px;
  font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.lecture-video .vbtn.watch { border: 1px solid var(--csc-amber); background: var(--csc-mark); color: var(--csc-ink); }
.lecture-video .vbtn.watch:hover { filter: brightness(1.05); }
.lecture-video .vbtn.cbtn-csc { border: 1px solid var(--csc-line); background: var(--csc-paper); color: var(--csc-ink); }
.lecture-video .vbtn.cbtn-csc:hover { border-color: var(--csc-teal); color: var(--csc-teal); }
@media (max-width: 640px) {
  .lecture-video { margin: 16px -16px 0; }
  .lecture-video video { border-radius: 0; }
  .lecture-video .vmeta { margin: 8px 16px 0; }
  .lecture-video .vacts { margin: 8px 16px 0; }
}
/* 总览卡片上的按钮（index.html）：颜色同样照 csc4801 总览卡片——
   「▶ 视频」= 它的 .lec .watch（赤金边、浅金底、深色字，悬停 brightness 1.05）；「制作中」= .cbtn 配色。
   「打开讲义」保持实心主色（csc4801 的「Open notes」也是实心主色），只把字号和高度提到 16px / 40px。 */
.lec .notes, .lec .watch {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: 7px;
  font-size: 16px; text-decoration: none; box-sizing: border-box;
}
.lec .watch { font-weight: 500; border: 1px solid var(--csc-amber); background: var(--csc-mark); color: var(--csc-ink); cursor: pointer; }
.lec .watch:hover { filter: brightness(1.05); }
.lec.soon .notes { border: 1px solid var(--csc-line); background: var(--csc-paper); color: var(--csc-ink); }
.lec.soon .notes:hover { border-color: var(--csc-teal); color: var(--csc-teal); }

/* 模块页的按钮（app.js 首页 / 章节页 + 各模块 demos.js）：颜色照 csc4801 的对应按钮。
   - 实心主按钮 .btn.primary（「开始 → 第 1 章」、页底「第 1 章 · … →」）= csc4801 .btn.primary：青底 #0f6e73、纸色字 #f6f5f1，悬停 brightness 1.05。
   - 次要按钮 .btn（「本讲目录 ↓」）、演示里的 .cbtn（「暂停」等）、选项按钮 .choices button、章节页底的上一章 / 下一章 .pager
     = csc4801 .cbtn：纸色底 #f6f5f1、灰边 #d9dbd4、深色字 #1d232b，悬停 / 按下时边框和字变青 #0f6e73。
   - 选中：.cbtn.on = csc4801 .cbtn.on（青底纸色字）；.choices button.on = 青边 + 浅青底 #d5e8e6。.choices button.bad（答错）保留本站朱色。
   - 演示里用行内 style 标出的语义色（是 / 否、颜色分类）不动。深色模式用 csc4801 的深色值。字号 16px、最小高度 40px（本站适老规矩）。
   页头导航、卡片、背景都不动。 */
.btn { font-size: 16px; min-height: 40px; border: 1px solid var(--csc-line); background: var(--csc-paper); color: var(--csc-ink); }
.btn:hover, .btn:active { filter: none; border-color: var(--csc-teal); color: var(--csc-teal); }
.btn.primary { background: var(--csc-teal); border-color: var(--csc-teal); color: var(--csc-paper); }
.btn.primary:hover, .btn.primary:active { filter: brightness(1.05); border-color: var(--csc-teal); color: var(--csc-paper); }
.cbtn { font-size: 16px; min-height: 40px; border: 1px solid var(--csc-line); background: var(--csc-paper); color: var(--csc-ink); }
.cbtn:hover:not(:disabled), .cbtn:active:not(:disabled) { border-color: var(--csc-teal); color: var(--csc-teal); }
.cbtn.on, .cbtn.on:hover:not(:disabled) { background: var(--csc-teal); border-color: var(--csc-teal); color: var(--csc-paper); }
.choices button { font-size: 16px; border-color: var(--csc-line); background: var(--csc-paper); color: var(--csc-ink); }
.choices button:hover, .choices button:active { border-color: var(--csc-teal); color: var(--csc-teal); }
.choices button.on { border-color: var(--csc-teal); background: var(--csc-teal-soft); color: var(--csc-ink); }
.choices button.bad { border-color: var(--red); background: var(--red-soft); color: var(--ink); }
.pager a.card { background: var(--csc-paper); border-color: var(--csc-line); color: var(--csc-ink); min-height: 40px; }
.pager a.card:hover, .pager a.card:active { border-color: var(--csc-teal); color: var(--csc-teal); }
.pager small { font-size: 16px; color: inherit; }

/* 顶栏的「中文 / English」语言切换（course.js renderLangSwitch）。按钮配色同 .cbtn（csc4801），16px / 40px。 */
.langsw { flex: none; display: flex; gap: 0; border: 1px solid var(--csc-line); border-radius: 8px; overflow: hidden; }
.langsw a {
  display: flex; align-items: center; min-height: 40px; padding: 0 12px;
  font-size: 16px; text-decoration: none; background: var(--csc-paper); color: var(--csc-ink);
}
.langsw a + a { border-left: 1px solid var(--csc-line); }
.langsw a:hover { color: var(--csc-teal); }
.langsw a.on { background: var(--csc-teal); color: var(--csc-paper); font-weight: 600; }
@media (max-width: 600px) { .langsw a { padding: 0 9px; } }