/* ===== cv-eli5 設計系統 ===== */
:root {
  --paper: #FAF7F1;
  --paper-deep: #F3EEE3;
  --ink: #232B37;
  --ink-dim: #5C6673;
  --ink-faint: #8B94A0;
  --line: #E5DFD0;
  --line-strong: #D4CAB2;
  --indigo: #0E7490;
  --indigo-soft: #E0EEF2;
  --amber: #B45309;
  --code-bg: #F0EADB;
  --maxw: 46rem;
  --radius: 10px;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --serif: "Songti TC", "Noto Serif CJK TC", "PMingLiU", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== 頂欄 ===== */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.app-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}
.app-home:hover { text-decoration: none; }

.app-mark { color: var(--indigo); font-size: 18px; }

.app-sub {
  color: var(--ink-faint);
  font-family: var(--ui);
  font-size: 12px;
}

.app-main { max-width: var(--maxw); margin: 0 auto; padding: 28px 22px 72px; }

.app-foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px 48px;
  color: var(--ink-faint);
  font-family: var(--ui);
  font-size: 12px;
}

/* ===== 首頁（章節列表） ===== */
.home-head { margin: 8px 0 4px; }
.home-head h1 {
  margin: 0 0 4px;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: .01em;
}
.home-head .home-lead {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
}

.ch-list { list-style: none; margin: 24px 0 0; padding: 0; }

.ch-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
}
.ch-item:first-child { border-top: 1px solid var(--line); }

.ch-item:hover { background: var(--paper-deep); }

.ch-item .ch-emoji { font-size: 22px; line-height: 1.3; }
.ch-item .ch-meta { flex: 1; min-width: 0; }
.ch-item .ch-num {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .06em;
}
.ch-item .ch-title {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}
.ch-item .ch-sub {
  display: block;
  color: var(--ink-dim);
  font-family: var(--ui);
  font-size: 13px;
  margin-top: 1px;
}
.ch-item .ch-done {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--indigo);
  white-space: nowrap;
  margin-top: 2px;
}

/* ===== 章節頁 ===== */
.ch-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--ui);
  font-size: 13px;
}

.ch-nav .nav-link { color: var(--ink-dim); }
.ch-nav .nav-sep { color: var(--ink-faint); }
.ch-nav .nav-cur {
  color: var(--indigo);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-header { margin: 0 0 26px; }
.ch-header .ch-kicker {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--indigo);
  text-transform: uppercase;
}
.ch-header h1 {
  margin: 6px 0 6px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: .01em;
}
.ch-header .ch-subtitle {
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--ui);
  font-size: 15px;
}

.analogy {
  margin: 0 0 30px;
  padding: 18px 20px;
  background: var(--indigo-soft);
  border-left: 4px solid var(--indigo);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.analogy .analogy-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.analogy p { margin: 0 0 10px; }
.analogy p:last-child { margin-bottom: 0; }

section.ch-section { margin: 0 0 32px; scroll-margin-top: 96px; }

.ch-section h2 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: .01em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.ch-section p { margin: 0 0 14px; }
.ch-section p:last-child { margin-bottom: 0; }

.ch-section strong { color: var(--ink); }

.ch-section code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.terms {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.terms li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  font-size: 15px;
}
.terms .t-plain { color: var(--ink); font-weight: 700; }
.terms .t-formal { color: var(--indigo); font-family: var(--ui); }
.terms .t-en { color: var(--ink-faint); font-family: var(--ui); font-size: 13px; }

/* ===== 圖表 ===== */
.figure {
  margin: 22px 0;
  padding: 18px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.figure .fig-title {
  margin: 0 0 12px;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.figure svg { display: block; width: 100%; height: auto; }
.figure .fig-caption {
  margin: 12px 0 0;
  color: var(--ink-dim);
  font-family: var(--ui);
  font-size: 13px;
}

/* ===== Quiz ===== */
.quiz { margin: 30px 0 0; }
.quiz h2 {
  margin: 0 0 4px;
  font-size: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.quiz .quiz-hint { color: var(--ink-faint); font-family: var(--ui); font-size: 13px; margin: 0 0 16px; }

.q-block {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.q-block .q-text { margin: 0 0 12px; font-weight: 700; }

.q-option {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 10px 12px;
  text-align: left;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}
.q-option:hover:not(:disabled) { border-color: var(--indigo); background: var(--indigo-soft); }
.q-option:disabled { cursor: default; }
.q-option.correct { background: #E4F3E6; border-color: #2F855A; color: #1F5C3D; }
.q-option.wrong { background: #FBE9E6; border-color: #C05621; color: #8C3A1B; }
.q-option.answer-reveal { border-color: #2F855A; }

.q-explain {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-dim);
  background: var(--paper-deep);
  border-radius: 7px;
}
.q-explain[hidden] { display: none; }

.quiz-score {
  margin: 0 0 20px;
  padding: 12px 16px;
  font-family: var(--ui);
  font-weight: 700;
  color: var(--indigo);
  background: var(--indigo-soft);
  border-radius: var(--radius);
}
.quiz-score[hidden] { display: none; }

/* ===== 讀完 + 前後章 ===== */
.read-complete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FFF;
}
.read-complete .done-btn {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  color: #FFF;
  background: var(--indigo);
  border: 1px solid var(--indigo);
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
}
.read-complete .done-btn.done { background: #2F855A; border-color: #2F855A; }
.read-complete .done-note { color: var(--ink-dim); font-family: var(--ui); font-size: 13px; }

.ch-pager {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--ui);
}
.ch-pager a {
  flex: 1;
  padding: 12px 14px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FFF;
  font-size: 14px;
  color: var(--ink);
}
.ch-pager a:hover { border-color: var(--indigo); text-decoration: none; }
.ch-pager a:empty { display: none; }

/* ===== 註記（合併自 assets/vanilla/css/annotation.css） ===== */
.ch-nav .annotate-toggle {
  flex: none;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #FFF;
  color: var(--indigo);
  font-size: 13px;
  font-family: var(--ui);
  cursor: pointer;
}

.ch-nav .annotate-toggle.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #FFF;
}

.annotation-toolbar {
  position: sticky;
  top: 53px;
  z-index: 9;
  display: flex;
  gap: 6px;
  align-items: center;
  margin: -8px -22px 16px;
  padding: 8px 22px;
  overflow-x: auto;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  font-family: var(--ui);
}

.annotation-toolbar[hidden] { display: none; }

.annotation-tool,
.annotation-action {
  flex: none;
  min-width: 52px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #FFF;
  font-size: 13px;
  font-family: var(--ui);
  cursor: pointer;
}

.annotation-tool.selected {
  background: var(--indigo-soft);
  border-color: var(--indigo);
  color: var(--indigo);
  font-weight: 700;
}

.annotation-action { color: var(--ink-dim); }
.annotation-action:hover { border-color: var(--indigo); color: var(--indigo); }
.annotation-action:disabled { opacity: .4; cursor: default; }

body.annotation-active { overscroll-behavior: contain; }
body.annotation-active section.ch-section {
  user-select: none;
  -webkit-user-select: none;
}

section.ch-section.annotatable { position: relative; }
section.ch-section.annotatable > :not(.annotation-canvas) { position: relative; z-index: 1; }
section.ch-section .annotation-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

section.ch-section.annotating .annotation-canvas {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}

/* ===== 窄螢幕 ===== */
@media (max-width: 520px) {
  body { font-size: 16px; }
  .app-main { padding: 20px 16px 64px; }
  .app-foot { padding: 0 16px 40px; }
  .ch-header h1 { font-size: 25px; }
  .annotation-toolbar { margin: -8px -16px 14px; padding: 8px 16px; }
}