/* =============================================================================
 * theme.css —— 《爪型三角形最值问题》主题样式
 * -----------------------------------------------------------------------------
 * 风格：浅色学术风；青绿主线条 + 赭橙"爪" + 正红结论，与系列内其他主题区分开。
 *   · 动画只动 transform / opacity（GPU 合成）
 *   · ⚠️ 动画状态段（[data-step] / .is-on）必须留在文件**末尾**，否则被同权重规则覆盖
 *     （slidekit/AGENTS.md 坑 E3）
 * ========================================================================== */

/* ------------------------------------------------------------------ 基线 */
/* 全站禁止选中文字：触摸屏上"点击推进"很容易变成"选中整页文字"，出现一片蓝色高亮。 */
html, body {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- 0. 变量 */
:root {
  --bg:        #FBFAF7;
  --ink:       #1C2434;
  --ink-2:     #5B6577;
  --ink-3:     #8B94A6;
  --geo:       #0E7490;   /* 三角形 / 底边主线条 */
  --geo-2:     #38BDF8;   /* 次级辅助线 */
  --diag:      #C2410C;   /* "爪"AD 与角度弧（暖色，与边区分） */
  --accent:    #D92D20;   /* 结论 / 答案 */
  --accent-l:  #FEE4E2;
  --equal:     #7F56D9;   /* 等号成立 / 不等式 / 辅助线（作高 AE） */
  --equal-l:   #F4EBFF;
  --fill-a:    rgba(14, 116, 144, .15);   /* 直角三角形填充（勾股定理法） */
  --fill-b:    rgba(127, 86, 217, .15);
  --axis:      #9AA3B2;
  --line:      #DDE1EA;
  --cn: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --math: "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #E9EAE6;
  font-family: var(--cn);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- 1. 舞台 */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  background: var(--bg);
  transform-origin: 50% 50%;
  overflow: hidden;
}

/* 下 120 / 右 110：给一体机四周工具栏留安全区（规范第二节）。
   本主题最宽的页面是 P7 的双栏卡片，右边距按此定标。 */
.slide {
  position: absolute; inset: 0;
  padding: 70px 110px 120px;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease, transform 300ms ease;
  transform: translateY(14px);
}
.slide.active {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}

/* ------------------------------------------------------------ 1.5 品牌 logo */
#brand {
  position: absolute; top: 36px; right: 46px;
  width: 160px; height: 45px;
  object-fit: contain;
  z-index: 50;
  opacity: .92;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 2. 页头 */
.head { text-align: center; margin-bottom: 14px; }
/* "方法一 / 方法二"标签：一节课讲多解时，让学生随时知道现在讲的是第几种 */
.head__kicker {
  display: inline-block; margin-bottom: 8px;
  font-size: 22px; font-weight: 700; letter-spacing: 2px;
  color: var(--equal); background: var(--equal-l);
  border-radius: 999px; padding: 5px 22px;
}
.head__title {
  font-size: 52px; font-weight: 700; line-height: 1.2; letter-spacing: .5px;
}
.head__title .katex { font-size: 1em; }
.head__formula { margin-top: 5px; font-size: 24px; color: var(--ink-2); }
/* 讲多解时：方法标签与大标题**同一行**，标签在左 */
.head--row {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.head--row .head__kicker { margin-bottom: 0; flex: none; }
.head--row .head__title { font-size: 48px; }

/* 顶部题干条（P4–P8）：一行紧凑题干，学生随时能对照题目 */
.stem-bar__k { font-weight: 700; color: var(--geo); margin-right: 10px; }
.stem-bar {
  flex: none; margin-bottom: 10px;
  padding: 8px 26px; text-align: center;
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  font-size: 26px; line-height: 1.5; color: var(--ink);
}

/* ---------------------------------------------------------------- 3. 封面 */
/* 版式照《平面向量》那套：深色底 + 左侧文字（kicker/标题/副题/红线/授课教师）+ 右侧配图 */
.slide--cover {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0B2A31 0%, #10414C 55%, #0B2A31 100%);
  color: #fff;
}
.slide--cover::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.10) 1.4px, transparent 1.4px);
  background-size: 40px 40px;
  opacity: .45;
}
.cover__inner {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 56px;
  padding-left: 40px;
}
.cover__text { flex: 1; min-width: 0; }
.cover__title {
  font-size: 96px; font-weight: 800; line-height: 1.1;
  color: #ffffff; letter-spacing: 4px;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .30);
}
.cover__sub {
  margin-top: 22px; font-size: 44px; font-weight: 500;
  color: #A9E6EA; letter-spacing: 3px;
}
.cover__rule {
  width: 180px; height: 7px; border-radius: 4px;
  margin: 40px 0 30px;
  background: linear-gradient(90deg, #FB923C, rgba(251, 146, 60, .05));
}
.cover__tags {
  font-size: 26px; color: #9FD8DE; letter-spacing: 2px;
  margin-bottom: 26px;
}
.cover__by {
  font-size: 30px; color: #CFEEEF; letter-spacing: 2px;
}
.cover__by b { color: #fff; font-weight: 700; letter-spacing: 4px; }
.cover__by span { margin-left: 26px; }
.cover__fig { flex: 0 0 auto; width: 620px; height: 470px; opacity: .95; }
.cover__fig svg { width: 100%; height: 100%; }

/* 深色封面/结束页上的图形配色（改成青+橙，与深底对比） */
.slide--cover .side   { stroke: #5EEAD4; }
.slide--cover .diag   { stroke: #FB923C; }
.slide--cover .vtx    { fill: #5EEAD4; stroke: #0B2A31; }
.slide--cover .vtx--claw { fill: #FB923C; stroke: #0B2A31; }
.slide--cover .vlabel { fill: #E6F7FA; stroke: #0B2A31; }
.slide--cover .mark   { fill: #FDBA74; stroke: #0B2A31; }
.slide--cover .fill-a { fill: rgba(94, 234, 212, .26); }
.slide--cover .fill-b { fill: rgba(251, 146, 60, .28); }

/* -------------------------------------------------------------- 3.5 结束页 */
/* 与封面同一套深色底，内容换成居中大字（版式同样照《平面向量》） */
.slide--end { flex-direction: column; }
.thanks-end {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px; text-align: center;
}
.thanks-end__main {
  font-size: 96px; font-weight: 800; letter-spacing: 10px; color: #fff;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .35);
}
.thanks-end__sub {
  font-size: 56px; font-weight: 700; letter-spacing: 8px; color: #5EEAD4;
}
.thanks-end__en {
  font-size: 26px; letter-spacing: 12px; color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------- 4. 动画页（通用） */
.slide--anim, .slide--text { display: flex; flex-direction: column; }

.figwrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  padding: 0 10px;
}
/* 交给 SVG 的 preserveAspectRatio 适配：填满图区且不变形 */
.fig { width: 100%; height: 100%; }

/* 说明文字只留"结论"——解释性语言由老师现场讲，不占版面 */
.caption { text-align: center; min-height: 92px; padding: 10px 0 0; }
.caption__conc {
  font-size: 33px; font-weight: 700; color: var(--accent); letter-spacing: 0; line-height: 1.35;
}
.caption__sub {
  margin-top: 8px; font-size: 26px; color: var(--ink-2); letter-spacing: .5px;
}
.caption__sub--dim { color: var(--ink-3); font-size: 24px; }

/* 左文右图。
   ⚠️ 用 flex 而不是 grid：实测 grid（template-rows: minmax(0,1fr)）下，
   左栏 .body--left 的高度会塌成 6px（只剩 padding-top），文字画到框外压住结论条；
   flex 在此处的尺寸行为更好推理，也和系列内动画页的 .figwrap 模式一致。
   ⚠️ 另外不要给左栏写 align-self: start —— 同样会塌。 */
.split { flex: 1; min-height: 0; display: flex; gap: 40px; align-items: stretch; }
.split--stem > .stem { width: 660px; flex: none; align-self: center; }
.split--stem > .figwrap { flex: 1; min-width: 0; }
.split--fig  > .body--left { flex: 1; min-width: 0; }
.split--fig  > .figwrap { width: 800px; flex: none; }

/* 正文列（P3–P5、P7、P8 用） */
.body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.body--left { justify-content: flex-start; gap: 7px; padding-top: 4px; }
.body--center { justify-content: center; align-items: center; }
/* 高度由内容决定（不要参与 flex 分配）—— 用于"上方文字 + 下方通栏图"的页面 */
.body--auto { flex: none; }
/* 两栏并排的小块（P4 的"设参数"与"思考方向"） */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
/* P3 的图区通栏（题干在上、图在下） */
.figwrap--wide { padding: 0 4px; }

/* ------------------------------------------------------------ 5. 题干 */
.stem {
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  padding: 26px 34px;
}
.stem__k {
  font-size: 26px; font-weight: 700; letter-spacing: 2px; color: var(--geo);
  margin-bottom: 14px;
}
.stem__p { font-size: 34px; line-height: 1.62; }
.stem__p--ask { font-weight: 700; color: var(--accent); }
/* P3：题干在上、图在下 —— 题干是一块通栏卡片 */
.stem--top { flex: none; margin-bottom: 6px; }
/* P9 课后练习：题干居中放大 */
.stem--big { width: 1220px; max-width: 100%; padding: 36px 54px; }
.stem--big .stem__k { font-size: 30px; }
.stem--big .stem__p { font-size: 38px; line-height: 1.75; }

/* ------------------------------------------------------------ 6. 卡片与公式行 */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch;
}
.card {
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  padding: 9px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.card--wide { padding: 5px 22px; }
.card__h {
  font-size: 29px; font-weight: 700; color: var(--geo); margin-bottom: 3px;
}
.line { font-size: 31px; line-height: 1.6; }
.line--res { font-weight: 700; color: var(--accent); }

.lead { font-size: 28px; line-height: 1.5; color: var(--ink); }

/* 目标条 */
.target {
  background: var(--equal-l); border-left: 8px solid var(--equal);
  border-radius: 12px; padding: 18px 30px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  /* 默认字号：整句直接写在 .target 里时（P3）不会退回到 16px */
  font-size: 32px;
}
.target__k { font-size: 30px; font-weight: 700; color: var(--equal); }
.target__v { font-size: 40px; font-weight: 700; color: var(--ink); }

/* 思考方向 */
.think {
  background: #fff; border: 2px dashed var(--geo-2); border-radius: 16px;
  padding: 12px 26px;
}
.think__l { font-size: 32px; line-height: 1.6; }
.think__l--ans { color: var(--geo); font-weight: 700; }

/* 前置说明条（设参数 / 目标）：两条并排的小行，带彩色小标签 */
.prep {
  background: #fff; border: 2px solid var(--line); border-radius: 18px;
  padding: 8px 28px;
}
.prep__row {
  display: grid; grid-template-columns: 118px 1fr; gap: 18px; align-items: center;
  padding: 4px 0;
}
.prep__k {
  font-size: 23px; font-weight: 700; letter-spacing: 2px; color: #fff;
  background: var(--geo); border-radius: 9px; text-align: center; padding: 5px 0;
}
.prep__v { font-size: 31px; line-height: 1.5; }

/* 长等式块 */
.eqbox {
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  padding: 6px 26px; text-align: center;
  font-size: 33px; line-height: 1.5;
}
.eqbox--lg { font-size: 28px; line-height: 1.4; }
/* P7：分式化简的等式链 —— 左对齐、逐行出现（每行一个 data-step） */
.eqbox--steps { text-align: left; padding: 0 30px 0 46px; }
.eq-line { font-size: 27px; line-height: 1.22; }

/* 提示条 */
.note {
  padding: 12px 28px; font-size: 27px; line-height: 1.55; color: var(--ink-2);
  background: #fff; border-left: 8px solid var(--line); border-radius: 10px;
}
.note b { color: var(--accent); font-weight: 700; }
.note--warn { border-left-color: var(--accent); background: var(--accent-l); color: var(--ink); }

/* 答案条 */
.answer {
  align-self: center;
  padding: 6px 42px; border-radius: 16px;
  background: var(--accent); color: #fff;
  font-size: 34px; font-weight: 700; letter-spacing: 1px;
}
.answer .katex { color: #fff; }
.answer .katex .mord, .answer .katex .mbin, .answer .katex .mrel { color: #fff; }

/* ------------------------------------------------------------ 7. 套路 / 易错点 */
.steps, .warns, .reqs {
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  padding: 20px 34px;
}
.steps__h, .warns__h, .reqs__h {
  font-size: 28px; font-weight: 700; letter-spacing: 2px; margin-bottom: 12px;
}
.steps__h { color: var(--geo); }
.warns__h { color: var(--accent); }
.reqs__h  { color: var(--geo); }

.step-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center;
  font-size: 30px; line-height: 1.45; padding: 4px 0;
}
.step-row__n {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--geo); color: #fff;
  font-size: 24px; font-weight: 700; line-height: 44px; text-align: center;
}
.warn-row {
  font-size: 28px; line-height: 1.45; padding: 4px 0; color: var(--ink);
}
.warns { border-color: #F5C6C2; }
.req-row { font-size: 30px; line-height: 1.55; padding: 5px 0; }

/* P9 方法总结：两栏并列（求平方三法 / 求最值两法）+ 底部一句话 */
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.sum-col {
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  padding: 16px 28px;
}
.sum-col__h { font-size: 30px; font-weight: 700; color: var(--geo); margin-bottom: 10px; }
.sum-row {
  display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: baseline;
  padding: 7px 0; font-size: 26px; line-height: 1.5;
}
.sum-row__k { font-weight: 700; color: var(--accent); }

/* 爪型三角形小结（P9 底部）：一行一项 */
.claw-sum {
  background: #fff; border: 2px solid var(--line); border-left: 8px solid var(--geo);
  border-radius: 18px; padding: 16px 30px;
}
.claw-sum__h { font-size: 30px; font-weight: 700; color: var(--geo); margin-bottom: 8px; }
.claw-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline;
  padding: 6px 0; font-size: 27px; line-height: 1.5;
}
.claw-row__k {
  font-size: 23px; font-weight: 700; color: #fff; background: var(--geo);
  border-radius: 8px; text-align: center; padding: 3px 0; letter-spacing: 2px;
}

/* 课后练习 / 下节课预习（P10）*/
.hw-card {
  width: 1240px; max-width: 100%;
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  padding: 24px 44px;
}
.hw-card__k { font-size: 28px; font-weight: 700; color: var(--geo); margin-bottom: 10px; }
.hw-card .stem__p { font-size: 34px; line-height: 1.7; }
/* 预习卡用"探究色"，与必做作业区分开 */
.hw-card--next { border-color: #D9CCF7; border-left: 8px solid var(--equal); }
.hw-card--next .hw-card__k { color: var(--equal); }
.hw-card--next .stem__p { font-size: 30px; }

.summary {
  margin-top: 2px; padding: 18px 34px; border-radius: 16px;
  background: var(--ink); color: #fff;
  font-size: 34px; font-weight: 700; letter-spacing: 1px;
}
.summary em { font-style: normal; color: #FFC9A3; margin: 0 8px; }

.hint {
  padding: 16px 34px; border-radius: 14px;
  background: var(--equal-l); border-left: 8px solid var(--equal);
  font-size: 30px; color: var(--ink);
}

/* ------------------------------------------------------------ 8. 工具栏 */
#toolbar {
  position: absolute; left: 48px; bottom: 34px;
  display: flex; align-items: center; gap: 12px; z-index: 60;
}
#hud {
  position: absolute; right: 48px; bottom: 34px;
  display: flex; align-items: center; z-index: 60;
  pointer-events: none;
}
.hud-page {
  font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: 1px;
  background: rgba(255,255,255,.86);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 12px 22px; min-width: 96px; text-align: center;
}
.tbtn {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line); color: var(--ink);
  font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cn);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, transform 120ms ease;
}
.tbtn:active { border-color: var(--accent); transform: scale(.94); }
.tbtn.is-hidden { display: none; }

/* ------------------------------------------------ 9. SVG 图元（几何专用） */
.side      { stroke: var(--geo); stroke-width: 6; fill: none; stroke-linecap: round; }
/* "爪"AD：暖色粗线，与三角形的边区分开 */
.diag      { stroke: var(--diag); stroke-width: 7; fill: none; stroke-linecap: round; }
/* 角度弧：不参与"描边生长"，可以安全地用虚线 */
.arc       { stroke: var(--diag); stroke-width: 3.5; fill: none; stroke-dasharray: 9 7; stroke-linecap: round; }
.arc--2    { stroke: var(--geo); }
/* 坐标轴 */
.axis      { stroke: var(--axis); stroke-width: 3; fill: none; stroke-linecap: round; }
/* 坐标轴**正方向**的箭头（实心三角，画在轴末端） */
.axis-arrow { fill: var(--axis); stroke: none; }
/* 正交分解的虚线（A 到坐标轴的投影） */
.proj { stroke: var(--equal); stroke-width: 4; fill: none; stroke-dasharray: 11 8; stroke-linecap: round; }
/* 高 AE（辅助线，与"爪"和三角形的边都区分开） */
.alt       { stroke: var(--equal); stroke-width: 5; fill: none; stroke-linecap: round; }
/* 两个直角三角形的淡色填充（勾股定理法里分步出现，说明"拆成了哪两块"）。
   ⚠️ 这里**不能**写 opacity —— 会盖过图元的 opacity="0" 属性（系列内踩过），
   显隐一律交给 scenes.js 的 show()/hide()。 */
.fill-a    { fill: var(--fill-a); stroke: none; }
.fill-b    { fill: var(--fill-b); stroke: none; }
/* 顶点与标签 */
.vtx       { fill: var(--geo); stroke: #fff; stroke-width: 3; }
.vtx--hl   { fill: var(--accent); stroke: #fff; stroke-width: 3; }
/* 爪的根 D：与 AD 同色，标出"爪型"的支点 */
.vtx--claw { fill: var(--diag); stroke: #fff; stroke-width: 3.5; }
/* 垂足 E（辅助点） */
.vtx--aux  { fill: var(--equal); stroke: #fff; stroke-width: 3; }
.vlabel {
  font-family: var(--math); font-style: italic; font-size: 42px;
  fill: var(--ink); font-weight: 600;
  /* 白色描边：顶点字母常常压在几条线交汇处，没有描边就"糊"在图里 */
  paint-order: stroke fill; stroke: var(--bg); stroke-width: 8px; stroke-linejoin: round;
}
/* 图内标注 */
.mark {
  font-family: var(--cn); font-size: 29px; font-weight: 700; fill: var(--accent);
  paint-order: stroke fill; stroke: var(--bg); stroke-width: 8px; stroke-linejoin: round;
}
.mark--geo   { fill: var(--geo); }
.mark--diag  { fill: var(--diag); }
.mark--equal { fill: var(--equal); }
.mark--ink   { fill: var(--ink-2); font-weight: 400; }
.axis-name {
  font-family: var(--math); font-style: italic; font-size: 30px; fill: var(--axis);
  paint-order: stroke fill; stroke: var(--bg); stroke-width: 8px; stroke-linejoin: round;
}
/* 直角标记（作高 AE 的垂足 E 处） */
.right-angle { stroke: var(--ink); stroke-width: 3.5; fill: none; }

svg text { -webkit-user-select: none; user-select: none; }
svg, .fig { -webkit-tap-highlight-color: transparent; }

/* =============================================================================
 * 10. 动画状态段 —— 必须留在文件末尾（坑 E3：同权重靠文件顺序决胜）
 * ========================================================================== */

/* 默认隐藏：所有带 data-step 的元素，只有加了 .is-on 才出现 */
[data-step] { opacity: 0; }
[data-step].is-on { opacity: 1; }

/* SVG 图元同理：建图时写 opacity="0" 属性；scenes.js 用内联 style.opacity 控制显隐
   （内联优先级最高，清空后自动回落到属性值，reset 无残留）。 */
svg .is-on { opacity: 1; }

/* 需要位移动画的元素 */
.rise       { transform: translateY(26px); transition: opacity 520ms ease, transform 520ms ease; }
.rise.is-on { transform: translateY(0); }

/* 瞬时模式（?stage=K / ?finish=1 / ?selftest=1）：整棵子树关掉过渡。
   ⚠️ headless + `--virtual-time-budget` 会快进 setTimeout，**但 CSS 过渡不跟着推进**
   （slidekit 坑 E6）—— 不关过渡，截图抓到的是淡入到一半的灰蒙蒙状态。 */
.instant, .instant *, .instant *::before, .instant *::after { transition: none !important; }

/* ⚠️ 描边生长由 JS 逐帧写 stroke-dashoffset（rAF），这里**绝不能**再加
   `transition: stroke-dashoffset` —— 两者叠加会让渲染值一直"追赶"每帧的目标值。 */

/* class 驱动的淡入（HTML 文字元素与图形元素通用） */
.side, .diag, .arc, .alt, .proj, .axis, .axis-arrow, .vtx, .vtx--aux, .vlabel, .mark, .axis-name, .right-angle,
.fill-a, .fill-b,
.card, .target, .think, .prep, .eqbox, .note, .answer, .steps, .warns, .reqs, .hint,
.stem, .lead, .summary, .sum-col, .claw-sum, .hw-card {
  transition: opacity 420ms ease;
}