/* Hallmark · editorial · existing course palette · paired reading pages
 * Pre-emit critique: Philosophy 4, Hierarchy 4, Execution 4, Specificity 5, Restraint 5, Variety 3.
 */
html, body { overflow-x: clip; }
main[id], main [id] { scroll-margin-top: 100px; }
:root {
  --font-zh-body: ui-sans-serif, system-ui, -apple-system, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-zh-display: "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
}
html[lang="zh-CN"] body { font-family: var(--font-zh-body); }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 { font-family: var(--font-zh-display); line-height: 1.4; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; font-style: normal; }
html[lang="zh-CN"] .intro h1 { max-width: 15em; }
.language-switch { display: inline-flex; flex-shrink: 0; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: transparent; white-space: nowrap; }
header .language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 34px; padding: 4px 8px; border-radius: 3px; color: var(--muted); font: 600 13px/1.4 var(--font-zh-body); text-decoration: none; }
header .language-switch a[aria-current="page"] { background: var(--ink); color: var(--paper, var(--bg)); }
header .language-switch a:hover { box-shadow: inset 0 0 0 1px var(--muted); }
header .language-switch a:active { opacity: .75; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent, var(--blue)); outline-offset: 3px; }
.button, .action, header nav > a, footer a { white-space: nowrap; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
header .shell { min-width: 0; }
body > header { position: sticky; top: 0; z-index: 20; background: var(--paper, var(--bg)); }
header .brand { white-space: nowrap; }
video { aspect-ratio: 16 / 9; }
.clip-subtitles {
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 10px 16px;
  border: 1px solid #202a31;
  border-top: 0;
  background: #101417;
  color: #f7f8f6;
  font: 500 .95rem/1.55 ui-sans-serif, system-ui, -apple-system, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  text-align: center;
  white-space: pre-line;
}
.clip-subtitles:not(.is-active) { color: transparent; }
.local-command { max-width: 100%; overflow-x: auto; padding: 20px; background: var(--panel, var(--soft)); border: 1px solid var(--line); font-size: .85rem; }
.clip details { margin-top: 12px; max-width: 780px; }
.clip summary { cursor: pointer; color: var(--accent, var(--blue)); }
.clip details p { color: var(--ink); }
video::cue { font-family: sans-serif; }
@media (max-width: 850px) {
  header nav { display: none !important; }
  header .shell { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
  .header-actions { gap: 0; }
}
@media (max-width: 420px) {
  header .brand { font-size: 14px; }
  .button, .action { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Course visual system: one stable mother theme with chapter-level accents. */
:root {
  color-scheme: light;
  --ink: #1f2937;
  --muted: #65717d;
  --paper: #f7f8f6;
  --surface: #ffffff;
  --soft: #eef3f5;
  --line: #d6ddd8;
  --blue: #285f86;
  --accent: #285f86;
  --page-accent: #285f86;
  --page-soft: #eef3f5;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-soft: 0 3px 12px rgba(31, 41, 55, .07);
}
body.reading-page,
body.course-home { background: var(--paper); color: var(--ink); }
body.reading-page { --accent: var(--page-accent); --blue: var(--page-accent); --soft: var(--page-soft); }
body.reading-page.lesson-k0,
body.reading-page.lesson-k1,
body.reading-page.lesson-k3 { --page-accent: #285f86; --page-soft: #eef3f5; }
body.reading-page.lesson-k2,
body.reading-page.lesson-k6,
body.reading-page.lesson-l2,
body.reading-page.lesson-l3 { --page-accent: #1f7f83; --page-soft: #edf6f3; }
body.reading-page.lesson-k5,
body.reading-page.lesson-k7,
body.reading-page.lesson-l4,
body.reading-page.lesson-l6 { --page-accent: #6b6597; --page-soft: #f1f0f8; }
body.reading-page.lesson-k4,
body.reading-page.lesson-l0,
body.reading-page.lesson-l0-e { --page-accent: #ad7435; --page-soft: #f8f2e9; }
body.reading-page.lesson-l1,
body.reading-page.lesson-l1-o,
body.reading-page.lesson-l1-s { --page-accent: #c45c4d; --page-soft: #fbefec; }
body.reading-page.lesson-k8,
body.reading-page.lesson-l5 { --page-accent: #27866d; --page-soft: #edf6f0; }
body.reading-page h1,
body.reading-page h2,
body.reading-page h3 { font-family: var(--font-display); font-style: normal; }
body.reading-page h1 { color: var(--ink); }
body.reading-page h2 { border-top-color: color-mix(in srgb, var(--page-accent) 46%, var(--line)); }
body.reading-page h3 { color: var(--ink); }
body.reading-page aside summary,
body.reading-page main summary { color: var(--page-accent); }
body.reading-page main details { background: var(--page-soft); border-inline-start-color: var(--page-accent); }
body.reading-page pre { background: var(--page-soft); border-color: var(--line); }
body.reading-page blockquote { border-left-color: var(--page-accent); }
body.reading-page th { background: var(--page-soft); color: var(--ink); }
body.reading-page .lesson-nav { border-top-color: var(--page-accent); }
body.reading-page .lesson-nav a { color: var(--page-accent); }
body.reading-page .language-switch a[aria-current="page"] { background: var(--page-accent); }
body.reading-page .language-switch a:hover { box-shadow: inset 0 0 0 1px var(--page-accent); }
body.reading-page a:focus-visible,
body.course-home a:focus-visible { outline-color: var(--page-accent, var(--accent)); }
html[lang="zh-CN"] body:not(.reading-page) h1,
html[lang="zh-CN"] body:not(.reading-page) h2,
html[lang="zh-CN"] body:not(.reading-page) h3 { font-family: var(--font-display); }
body.reading-page h1,
body.reading-page h2,
body.reading-page h3,
body:not(.reading-page) h1,
body:not(.reading-page) h2,
body:not(.reading-page) h3 { max-width: 100%; overflow-wrap: anywhere; word-break: break-all; white-space: normal; }
@media (max-width: 600px) {
  body:not(.reading-page) .intro h1 { width: 100%; max-width: 9ch; font-size: clamp(2.1rem, 10vw, 3.2rem); }
  body.reading-page .reading-layout { width: calc(100% - 24px); max-width: 100%; margin-inline: auto; }
  body.reading-page .reading-layout main { width: 100%; max-width: 100%; }
  body.reading-page h1 { width: 100%; max-width: 9ch; }
  body > header .shell { width: calc(100% - 24px); max-width: 100%; margin-inline: auto; flex-wrap: nowrap; }
  body > header .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body > header .header-actions { min-width: 0; width: auto; flex: 0 1 auto; margin-left: auto; display: flex; }
  body > header .language-switch { margin-left: auto; }
  body > header .language-switch { flex-shrink: 0; }
}