/* Math Tutor concise teacher output V5.7 */

/*
 * Math Tutor teacher output typography V5.2
 * Load this file AFTER the original /static/style.css.
 * It keeps KaTeX formulas and Chinese text at a visually consistent size.
 */

:root {
  --tutor-text-size: clamp(15px, 0.28vw + 14px, 17px);
  --tutor-small-size: clamp(13px, 0.18vw + 12.5px, 14.5px);
  --tutor-title-size: clamp(17px, 0.35vw + 16px, 20px);
  --tutor-text-line-height: 1.9;
  --tutor-math-line-height: 1.55;
  --tutor-text-color: #171717;
  --tutor-muted-color: #4b5563;
  --tutor-rule-color: rgba(15, 23, 42, 0.10);
  --tutor-content-width: 980px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

/* ---------- Output containers ---------- */

#selectedType,
#candidateList,
#firstReaction,
#generalMethod,
#solutionSteps,
#finalAnswer,
#mistakes,
#selectedType *,
#candidateList *,
#firstReaction *,
#generalMethod *,
#solutionSteps *,
#finalAnswer *,
#mistakes * {
  color: var(--tutor-text-color) !important;
}

#selectedType,
#candidateList,
#firstReaction,
#generalMethod,
#solutionSteps,
#finalAnswer,
#mistakes {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* ---------- Error fallback ---------- */

.katex-error,
.math-error,
.latex-error,
.render-error,
.latex-fallback,
.math-fallback {
  color: var(--tutor-text-color) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* ---------- Unified body typography ---------- */

.rich-line {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.5rem auto;
  padding: 0;
  font-size: var(--tutor-text-size) !important;
  font-weight: 400;
  line-height: var(--tutor-text-line-height);
  letter-spacing: 0.008em;
  color: var(--tutor-text-color) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.center-line,
#firstReaction .text-line,
#generalMethod .text-line,
.highlight-body .text-line,
#finalAnswer .text-line {
  text-align: center !important;
}

#firstReaction,
#generalMethod,
.highlight-body {
  padding-inline: clamp(0.5rem, 4vw, 4.5rem);
}

#firstReaction .rich-line,
#generalMethod .rich-line,
.highlight-body .rich-line {
  max-width: var(--tutor-content-width);
  margin-left: auto;
  margin-right: auto;
}

#firstReaction .rich-line,
#generalMethod .rich-line {
  margin-top: 0.44rem;
  margin-bottom: 0.44rem;
}

#generalMethod {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0.02rem;
}

/* ---------- Highlight sections ---------- */

#solutionSteps {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: none !important;
}

#solutionSteps > li,
#solutionSteps > li.solution-highlight {
  list-style: none !important;
}

#solutionSteps > li::marker,
#solutionSteps > li.solution-highlight::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

.solution-highlight {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1.25rem 0.25rem 1.45rem;
  border-bottom: 1px solid var(--tutor-rule-color);
}

.solution-highlight:last-child {
  border-bottom: 0;
}

.highlight-title {
  display: block;
  width: 100%;
  margin: 0 0 0.9rem;
  padding-left: 0.25rem;
  color: var(--tutor-text-color) !important;
  font-size: var(--tutor-title-size) !important;
  font-weight: 760;
  line-height: 1.55;
  text-align: left;
  letter-spacing: 0.005em;
}

.highlight-body {
  width: 100%;
  max-width: 100%;
}

/* ---------- Formula rows ---------- */

.formula-line,
.math-block {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center !important;
}

.formula-line {
  margin-top: 0.48rem;
  margin-bottom: 0.48rem;
  font-size: var(--tutor-text-size) !important;
  line-height: var(--tutor-math-line-height);
}

.math-block {
  margin: 0 auto;
  padding: 0.12rem 0;
  overflow: hidden !important;
  font-size: var(--tutor-text-size) !important;
  line-height: var(--tutor-math-line-height) !important;
}

/*
 * Important fix:
 * app_v5.js adds .math-rendered to BOTH inline and display formulas.
 * Do not use one absolute font-size for both; inherit for inline math,
 * and use the body size for display math.
 */
.math-inline.math-rendered {
  font-size: inherit !important;
  line-height: inherit !important;
}

.math-block.math-rendered {
  font-size: var(--tutor-text-size) !important;
  line-height: var(--tutor-math-line-height) !important;
}

.math-inline {
  display: inline-block;
  max-width: 100%;
  margin: 0 0.1em;
  vertical-align: -0.08em;
  color: var(--tutor-text-color) !important;
  white-space: nowrap;
  font-size: inherit !important;
  line-height: 1 !important;
}

/* KaTeX defaults to 1.21em. Reset it so math and Chinese are balanced. */
.math-inline > .katex,
.math-inline .katex {
  font-size: 1.02em !important;
  line-height: 1 !important;
}

.math-block > .katex,
.math-block .katex,
.formula-line .katex-display > .katex {
  font-size: 1.06em !important;
  line-height: 1.2 !important;
}

.rich-inline-title .math-inline,
.candidate-rich-title .math-inline,
.evidence-list .math-inline,
#mistakes .math-inline {
  vertical-align: -0.07em;
  font-size: inherit !important;
}

.rich-inline-title .math-inline .katex,
.candidate-rich-title .math-inline .katex,
.evidence-list .math-inline .katex,
#mistakes .math-inline .katex {
  font-size: 1.01em !important;
}

.katex,
.katex *,
.katex-display,
.katex-display * {
  color: var(--tutor-text-color) !important;
}

.katex-display {
  margin: 0.18rem 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: var(--tutor-math-line-height) !important;
}

.katex-display > .katex,
.math-rendered,
.math-rendered .katex {
  max-width: 100%;
}

.katex-display > .katex {
  display: inline-block;
  white-space: nowrap;
  transform-origin: center center;
}

/* Remove the old generic absolute size that made inline math inconsistent. */
.math-rendered {
  color: var(--tutor-text-color) !important;
}

.compact-formula-line,
.compact-formula-line .math-block {
  font-size: calc(var(--tutor-text-size) * 0.96) !important;
}

.compact-formula-line .katex {
  font-size: 1.04em !important;
}

.latex-fallback {
  display: inline-block;
  max-width: 100%;
  text-align: inherit;
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.math-block.latex-fallback {
  display: block;
  text-align: center;
  font-size: var(--tutor-text-size) !important;
}

/* ---------- Type judgement and lists ---------- */

.rich-inline-title,
.candidate-rich-title {
  line-height: 1.72;
}

.evidence-list,
#mistakes {
  padding-left: 1.35rem;
}

.evidence-list li,
#mistakes li {
  margin: 0.46rem 0;
  font-size: var(--tutor-text-size) !important;
  line-height: 1.75;
  color: #374151 !important;
}

.list-line-content .rich-line {
  margin: 0;
  font-size: inherit !important;
  line-height: inherit;
  text-align: left !important;
}

.empty-content {
  color: #6b7280 !important;
  text-align: center;
}

/* ---------- Final answer ---------- */

#finalAnswer .formula-line {
  margin: 0.25rem auto;
}

#finalAnswer .math-block {
  padding: 0.32rem 0;
  font-size: calc(var(--tutor-text-size) * 1.04) !important;
}

#finalAnswer .math-block .katex {
  font-size: 1.08em !important;
}

/* ---------- Neutralize legacy red inline styles ---------- */

#firstReaction [style*="color: red"],
#generalMethod [style*="color: red"],
#solutionSteps [style*="color: red"],
#mistakes [style*="color: red"],
#firstReaction [style*="color:red"],
#generalMethod [style*="color:red"],
#solutionSteps [style*="color:red"],
#mistakes [style*="color:red"] {
  color: var(--tutor-text-color) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  :root {
    --tutor-text-size: 15px;
    --tutor-title-size: 17px;
    --tutor-text-line-height: 1.82;
  }

  #firstReaction,
  #generalMethod,
  .highlight-body {
    padding-inline: 0.25rem;
  }

  .solution-highlight {
    padding: 1rem 0 1.18rem;
  }

  .highlight-title {
    margin-bottom: 0.7rem;
  }

  .math-inline > .katex,
  .math-inline .katex {
    font-size: 1em !important;
  }

  .math-block > .katex,
  .math-block .katex,
  .formula-line .katex-display > .katex {
    font-size: 1.03em !important;
  }
}


/* =========================================================
   V5.7 简洁教师板书风格
   ========================================================= */

:root {
  --tutor-text-size: clamp(15px, 0.18vw + 14.3px, 16.5px);
  --tutor-title-size: clamp(16px, 0.22vw + 15.3px, 18px);
  --tutor-text-line-height: 1.78;
  --tutor-math-line-height: 1.42;
  --tutor-content-width: 920px;
}

/* 卡片留白更克制 */
#resultSection > .card,
#resultSection > article.card {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

/* 第一反应、通法：短行居中 */
#firstReaction,
#generalMethod {
  padding-inline: clamp(0.5rem, 5vw, 5rem);
}

#firstReaction .rich-line,
#generalMethod .rich-line {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  line-height: 1.72 !important;
}

/* 公式上下间距统一 */
.formula-line,
.math-block {
  margin-top: 0.28rem !important;
  margin-bottom: 0.28rem !important;
  padding-top: 0.04rem !important;
  padding-bottom: 0.04rem !important;
}

.katex-display {
  margin-top: 0.1rem !important;
  margin-bottom: 0.1rem !important;
}

/* 解题步骤恢复有序编号，版式贴近参考图 */
#solutionSteps {
  display: block !important;
  margin: 0 !important;
  padding: 0 0 0 2.25rem !important;
  list-style: decimal outside !important;
  counter-reset: list-item !important;
}

#solutionSteps > li,
#solutionSteps > li.solution-highlight {
  display: list-item !important;
  position: relative;
  margin: 0 !important;
  padding: 1.05rem 0 1.15rem 0.35rem !important;
  list-style: decimal outside !important;
  border-bottom: 1px solid var(--tutor-rule-color);
}

#solutionSteps > li:first-child {
  padding-top: 0.25rem !important;
}

#solutionSteps > li:last-child {
  border-bottom: 0;
  padding-bottom: 0.25rem !important;
}

#solutionSteps > li::marker,
#solutionSteps > li.solution-highlight::marker {
  content: normal !important;
  display: inline !important;
  color: #111 !important;
  font-size: var(--tutor-text-size) !important;
  font-weight: 400;
}

.highlight-title {
  margin: 0 0 0.45rem !important;
  padding: 0 !important;
  font-size: var(--tutor-title-size) !important;
  line-height: 1.48 !important;
  font-weight: 700;
  text-align: center !important;
}

.highlight-body {
  padding-inline: clamp(0.25rem, 4vw, 4rem);
}

.highlight-body .rich-line {
  margin-top: 0.2rem !important;
  margin-bottom: 0.2rem !important;
  line-height: 1.7 !important;
}

/* 行内公式与中文基线 */
.math-inline {
  vertical-align: -0.075em !important;
  margin-left: 0.04em !important;
  margin-right: 0.04em !important;
}

.math-inline .katex {
  font-size: 1em !important;
}

/* 判断依据使用简洁黑点 */
.evidence-list {
  margin-top: 0.2rem !important;
  margin-bottom: 0.55rem !important;
  padding-left: 1.25rem !important;
  list-style: disc outside !important;
}

.evidence-list > li {
  display: list-item !important;
  margin: 0.28rem 0 !important;
  line-height: 1.62 !important;
  list-style: disc outside !important;
  color: #292929 !important;
}

.evidence-list > li::marker {
  color: #000 !important;
}

/* 常见易错点：用伪元素保证始终出现黑色圆点 */
#mistakes {
  display: block !important;
  max-width: 940px;
  margin: 0.15rem auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#mistakes > li,
#mistakes > li.mistake-item {
  display: block !important;
  position: relative;
  margin: 0.42rem 0 !important;
  padding: 0 0 0 1.15rem !important;
  list-style: none !important;
  line-height: 1.72 !important;
  text-align: left !important;
  color: #222 !important;
}

#mistakes > li::before,
#mistakes > li.mistake-item::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #000 !important;
  font-size: 1.05em;
  line-height: inherit;
  font-weight: 700;
}

#mistakes .list-line-content,
#mistakes .list-line-content .rich-line {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  text-align: left !important;
}

/* 最终答案紧凑 */
#finalAnswer .formula-line,
#finalAnswer .math-block {
  margin-top: 0.12rem !important;
  margin-bottom: 0.12rem !important;
}

/* 小屏 */
@media (max-width: 768px) {
  #solutionSteps {
    padding-left: 1.65rem !important;
  }

  #solutionSteps > li,
  #solutionSteps > li.solution-highlight {
    padding-left: 0.15rem !important;
  }

  .highlight-body {
    padding-inline: 0.15rem;
  }
}

/* =========================================================
   V5.8 行内公式视觉对齐修复
   目标：中文、字母公式、上下标在同一视觉水平线上
   ========================================================= */

/*
 * V5.7 使用负 vertical-align 调整整个公式盒子，
 * 在中文字体环境下会使公式看起来下沉。
 * V5.8 改为“视觉中线对齐”，同时恢复 KaTeX 合理的内部行高。
 */
.math-inline,
.math-inline.math-rendered,
.rich-inline-title .math-inline,
.candidate-rich-title .math-inline,
.evidence-list .math-inline,
#mistakes .math-inline,
#firstReaction .math-inline,
#generalMethod .math-inline,
#solutionSteps .math-inline,
#selectedType .math-inline,
#candidateList .math-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  max-width: none !important;
  margin: 0 0.055em !important;
  padding: 0 !important;
  position: relative;
  top: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
  white-space: nowrap;
  font-size: inherit !important;
  line-height: 1 !important;
}

/* 公式主体与正文保持接近的视觉高度 */
.math-inline > .katex,
.math-inline .katex,
.rich-inline-title .math-inline .katex,
.candidate-rich-title .math-inline .katex,
.evidence-list .math-inline .katex,
#mistakes .math-inline .katex,
#firstReaction .math-inline .katex,
#generalMethod .math-inline .katex,
#solutionSteps .math-inline .katex,
#selectedType .math-inline .katex,
#candidateList .math-inline .katex {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  vertical-align: baseline !important;
  font-size: 1.035em !important;
  line-height: 1.15 !important;
}

/* KaTeX 的可见 HTML 层不再额外改变行盒高度 */
.math-inline .katex-html {
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
}

/* 避免 MathML 隐藏层参与视觉高度计算 */
.math-inline .katex-mathml {
  position: absolute !important;
}

/* 统一含公式正文行的行高，避免有公式的行突然变高或变低 */
.rich-line.text-line,
.list-line-content .rich-line,
.evidence-list li,
#mistakes li,
.rich-inline-title,
.candidate-rich-title {
  line-height: 1.78 !important;
}

/* 独立公式不使用行内公式的中线规则 */
.math-block .katex,
.formula-line .katex-display > .katex,
#finalAnswer .math-block .katex {
  display: inline-block !important;
  vertical-align: baseline !important;
}

/* 小屏保持相同视觉比例 */
@media (max-width: 768px) {
  .math-inline > .katex,
  .math-inline .katex {
    font-size: 1.025em !important;
  }
}