/*!
 * base.css — 幻灯片结构层
 * 只管排版骨架，所有颜色/字体走 CSS 变量，由主题文件提供。
 */

.slide {
  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.6;
  box-sizing: border-box;
  transform-origin: top left;
  -webkit-font-smoothing: antialiased;
}
.slide *, .slide *::before, .slide *::after { box-sizing: border-box; }
:where(.slide) :where(h1, h2, p, ul, li, blockquote) {
  margin: 0; padding: 0; list-style: none;
}

.ly {
  position: absolute;
  inset: 0;
  padding: var(--pad, 72px);
  display: flex;
  flex-direction: column;
}

/* 空槽位占位提示（仅编辑态可见） */
.is-empty::before {
  content: attr(data-ph);
  opacity: .28;
  font-style: normal;
}

/* ---------- 通用页眉 ---------- */
.pg-head { flex: 0 0 auto; margin-bottom: 36px; }
.pg-title {
  font-family: var(--font-title);
  font-size: 46px;
  font-weight: var(--w-title, 700);
  line-height: 1.25;
  letter-spacing: var(--ls-title, -.01em);
  color: var(--fg);
  position: relative;
  padding-left: var(--title-pad, 0);
}
.pg-title::before {
  content: "";
  position: absolute;
  left: 0; top: .18em;
  width: var(--title-bar-w, 0);
  height: .68em;
  background: var(--accent);
  border-radius: 3px;
}
.pg-summary {
  margin-top: 14px;
  font-size: 21px;
  color: var(--muted);
  max-width: 900px;
  padding-left: var(--title-pad, 0);
}

/* ---------- 封面 ---------- */
.ly-cover { justify-content: center; }
.cv-bar {
  position: absolute; left: 0; top: 0;
  width: var(--cover-bar-w, 10px); height: 100%;
  background: var(--accent-grad, var(--accent));
}
.cv-main { max-width: 940px; }
.cv-title {
  font-family: var(--font-title);
  font-size: 82px;
  font-weight: var(--w-cover, 800);
  line-height: 1.12;
  letter-spacing: var(--ls-title, -.02em);
  color: var(--cover-fg, var(--fg));
}
.cv-sub {
  margin-top: 26px;
  font-size: 26px;
  color: var(--muted);
  line-height: 1.5;
}
.cv-meta {
  position: absolute;
  left: var(--pad, 72px); bottom: var(--pad, 72px);
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ---------- 章节页 ---------- */
.ly-section { justify-content: center; }
.sc-index {
  font-family: var(--font-title);
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: var(--index-op, .18);
  position: absolute;
  right: var(--pad, 72px);
  top: 50%;
  transform: translateY(-50%);
}
.sc-main { max-width: 780px; position: relative; z-index: 1; }
.sc-title {
  font-family: var(--font-title);
  font-size: 60px;
  font-weight: var(--w-title, 700);
  line-height: 1.2;
}
.sc-sub { margin-top: 20px; font-size: 23px; color: var(--muted); }

/* ---------- 要点列表 ---------- */
.bl-list { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.ly-bullets.is-dense .bl-list { gap: 14px; }
.bl-item { display: flex; align-items: flex-start; gap: 22px; }
.bl-num {
  flex: 0 0 auto;
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.3;
  min-width: 46px;
  opacity: var(--num-op, 1);
}
.bl-body { flex: 1; min-width: 0; }
.bl-label { font-size: 27px; font-weight: 700; line-height: 1.35; color: var(--fg); }
.ly-bullets.is-dense .bl-label { font-size: 24px; }
.bl-detail { margin-top: 5px; font-size: 19px; color: var(--muted); line-height: 1.55; }
.ly-bullets.is-dense .bl-detail { font-size: 17px; }

/* ---------- 数据卡 ---------- */
.mt-grid { flex: 1; display: grid; gap: 26px; align-content: center;
  grid-template-columns: repeat(var(--n, 3), 1fr); }
.ly-metrics[data-count="1"] { --n: 1; }
.ly-metrics[data-count="2"] { --n: 2; }
.ly-metrics[data-count="3"] { --n: 3; }
.ly-metrics[data-count="4"] { --n: 4; }
.mt-card {
  background: var(--card);
  border: var(--card-border, none);
  border-radius: var(--radius, 16px);
  padding: 34px 30px;
  box-shadow: var(--shadow, none);
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: center;
}
.mt-value {
  font-family: var(--font-title);
  font-size: 62px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--accent);
  letter-spacing: -.02em;
}
.ly-metrics[data-count="4"] .mt-value { font-size: 50px; }
.mt-label { margin-top: 14px; font-size: 22px; font-weight: 700; color: var(--card-fg, var(--fg)); }
.mt-detail { margin-top: 7px; font-size: 17px; color: var(--muted); line-height: 1.5; }

/* ---------- 双栏 ---------- */
.tc-grid { flex: 1; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 42px; align-items: start; padding-top: 8px; }
.tc-split { background: var(--line); height: 100%; }
.tc-head {
  font-family: var(--font-title);
  font-size: 28px; font-weight: 700; color: var(--accent);
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 3px solid var(--accent);
}
.tc-list { display: flex; flex-direction: column; gap: 16px; }
.tc-list li { display: flex; gap: 12px; font-size: 20px; line-height: 1.55; color: var(--fg); }
.tc-list li::before { content: "—"; color: var(--accent); flex: 0 0 auto; }

/* ---------- 时间线 ---------- */
.tl-track { flex: 1; display: grid; align-content: center; position: relative;
  grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; padding-top: 30px; }
.ly-timeline[data-count="2"] { --n: 2; }
.ly-timeline[data-count="3"] { --n: 3; }
.ly-timeline[data-count="4"] { --n: 4; }
.ly-timeline[data-count="5"] { --n: 5; }
/* 连接线画在每个节点上，随圆点走，避免居中布局后线点脱节 */
.tl-line { display: none; }
.tl-step::before {
  content: "";
  position: absolute;
  top: 13px;            /* 圆点中心：margin-top 4px + 18px/2 */
  left: 0; right: 0;
  height: 3px;
  background: var(--line);
  z-index: 0;
}
.tl-step:first-child::before { left: 50%; }
.tl-step:last-child::before { right: 50%; }
.tl-step { position: relative; padding: 0 18px; text-align: center; }
.tl-dot {
  width: 18px; height: 18px; border-radius: 50%;
  z-index: 1;
  background: var(--accent);
  border: 4px solid var(--bg);
  margin: 4px auto 22px;
  position: relative; z-index: 1;
}
.tl-tag {
  font-family: var(--font-title);
  font-size: 21px; font-weight: 800; color: var(--accent); letter-spacing: .02em;
}
.tl-label { margin-top: 10px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.tl-detail { margin-top: 8px; font-size: 16px; color: var(--muted); line-height: 1.5; }

/* ---------- 对比 ---------- */
.cp-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-content: center; }
.cp-col {
  background: var(--card);
  border: var(--card-border, none);
  border-top: 5px solid var(--tone-c, var(--accent));
  border-radius: var(--radius, 16px);
  padding: 30px 32px;
  box-shadow: var(--shadow, none);
  min-height: 300px;
}
.cp-col[data-tone="good"] { --tone-c: var(--ok); }
.cp-col[data-tone="bad"]  { --tone-c: var(--warn); }
.cp-head {
  font-family: var(--font-title);
  font-size: 27px; font-weight: 700; margin-bottom: 22px;
  color: var(--tone-c, var(--accent));
}
.cp-list { display: flex; flex-direction: column; gap: 15px; }
.cp-list li { display: flex; align-items: flex-start; gap: 13px; font-size: 19px; line-height: 1.55; }
.cp-mark {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 9px;
  border-radius: 50%; background: var(--tone-c, var(--accent));
}

/* ---------- 金句 ---------- */
.ly-quote { justify-content: center; align-items: center; text-align: center; padding: 72px 130px; }
.qt-mark {
  font-family: var(--font-title);
  font-size: 130px; line-height: .8; color: var(--accent);
  opacity: var(--quote-op, .3); margin-bottom: 8px;
}
.qt-text {
  font-family: var(--font-title);
  font-size: 42px; font-weight: var(--w-title, 700); line-height: 1.45;
  letter-spacing: -.01em;
}
.qt-by { margin-top: 34px; display: flex; align-items: baseline; gap: 12px; justify-content: center; }
.qt-author { font-size: 21px; font-weight: 700; color: var(--accent); }
.qt-role { font-size: 18px; color: var(--muted); }
.qt-role:empty, .qt-role.is-empty { display: none; }

/* ---------- 结尾 ---------- */
.ly-end { justify-content: center; align-items: center; text-align: center; }
.en-title {
  font-family: var(--font-title);
  font-size: 72px; font-weight: var(--w-cover, 800); line-height: 1.15;
}
.en-sub { margin-top: 20px; font-size: 23px; color: var(--muted); }
.en-bar { margin-top: 40px; width: 92px; height: 6px; border-radius: 3px; background: var(--accent-grad, var(--accent)); }

/* ---------- 图表 ---------- */
.ch-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.ch-svg { width: 100%; height: 100%; max-height: 380px; }
.ch-empty { color: var(--muted); font-size: 20px; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-ytick, .ch-xtick { fill: var(--muted); font-size: 15px; font-family: var(--font-body); }
.ch-xtick { font-size: 16px; }
.ch-val { fill: var(--fg); font-size: 16px; font-weight: 700; font-family: var(--font-title); }
.ch-line { stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 4; }
.ch-hole { fill: var(--bg); }
.ch-legend { fill: var(--fg); font-size: 18px; font-family: var(--font-body); }
.ch-legend-v { fill: var(--muted); font-weight: 700; }
.ch-insight {
  flex: 0 0 auto; margin-top: 18px; padding: 14px 20px;
  background: var(--card); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm, 8px);
  font-size: 18px; color: var(--card-fg, var(--fg));
}

/* ---------- 渲染失败兜底 ---------- */
.ly-error { align-items: center; justify-content: center; color: var(--warn); font-size: 20px; }

/* ---------- 图表配色兜底 ---------- */
.slide {
  --s1: var(--accent);
  --s2: var(--accent2);
  --s3: var(--ok);
  --s4: var(--warn);
  --s5: var(--muted);
  --s6: var(--accent);
}