.student-math-workspace .student-math-problem h2 {
  word-break: keep-all;
}

#studentMathQuestionContext {
  color: #4a5e69;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
#studentMathQuestionContext:empty { display: none; }
#studentMathQuestionContext:has(figure) { white-space: normal; }

.student-math-expression {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .18em;
  margin: 0 auto 10px;
  padding: 4px 0;
  color: #15315d;
  font-size: clamp(27px, 5.5vw, 54px);
  font-weight: 850;
  line-height: 1.18;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
}
.student-math-expression-operator { color: #235ad5; }
#studentMathQuestionVisual:has(> .student-math-expression) {
  display: grid;
  justify-items: center;
  align-content: start;
}
#studentMathQuestionVisual:has(> .student-math-expression) > .student-math-canvas {
  --student-math-canvas-height: 270px;
}
.student-math-page .student-math-visual-table {
  width: min(100%, 640px);
  margin-inline: auto;
  background: #fff;
  border: 1px solid #dbe4ef;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  font-size: clamp(13px, 2.1vw, 16px);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.student-math-page .student-math-visual-table caption {
  padding: 0 4px 8px;
  color: #183145;
  font-weight: 850;
  text-align: left;
}
.student-math-page .student-math-visual-table :is(th, td) {
  border: 0;
  border-bottom: 1px solid #e2eaf4;
  padding: 8px 3px;
  overflow-wrap: anywhere;
}
.student-math-page .student-math-visual-table thead { background: #edf3fa; color: #314f70; }
.student-math-page .student-math-visual-table tbody td { font-weight: 700; }

.student-math-graph-entry { position: relative; width: min(100%, 640px); margin: 0 auto 10px; cursor: crosshair; }
#studentMathQuestionVisual:has(> .student-math-graph-entry) > .student-math-visual-table { margin-bottom: 10px; }
.student-math-graph-entry > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.student-math-graph-entry > svg line { stroke: #315b9c; stroke-width: 2.5; stroke-dasharray: 5 3; }
.student-math-graph-entry > svg [data-graph-guide] { stroke: #82a2cc; stroke-width: 1.2; }
.student-math-graph-entry > svg rect { fill: #1d5bc4; stroke: #fff; stroke-width: 1.5; }
.student-math-graph-entry[data-submitted] { cursor: default; }

#studentMathHint { box-sizing: border-box; }
#studentMathHintCopy, #studentMathWrongBody > p { white-space: pre-line; line-height: 1.55; }
.student-math-answer-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.student-math-answer-comparison > div {
  padding: 8px 10px;
  border: 1px solid #ecd0d7;
  border-radius: 9px;
  background: #fff5f6;
  color: #832b44;
}
.student-math-answer-comparison > div + div { border-color: #b5ddc8; background: #eef9f3; color: #125942; }
.student-math-answer-comparison dt { font-size: 13px; font-weight: 750; }
.student-math-answer-comparison dd { margin: 3px 0 0; font-weight: 850; overflow-wrap: anywhere; }

#studentMathQuestionVisual [data-grade-mark="correct"] { fill: #50b68f60; stroke: #126447; stroke-width: 2; }
#studentMathQuestionVisual [data-grade-mark="missed"] { fill: #50b68f30; stroke: #126447; stroke-width: 2; stroke-dasharray: 5 3; }
#studentMathQuestionVisual [data-grade-mark="wrong"] { fill: #e56a8160; stroke: #9d304d; stroke-width: 2; }

@media (min-width: 900px) and (orientation: landscape) {
  #studentMathQuestionContext { text-align: left; }
  .student-math-workspace[data-direct-numeric="true"] .student-math-problem:not(:has(#studentMathQuestionVisual:not(:empty))) .student-math-question-workspace {
    grid-row: 1 / 3;
  }
  .student-math-workspace[data-graph-entry="true"] .student-math-question-workspace:has(.student-math-graph-entry) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .student-math-workspace[data-graph-entry="true"] #studentMathQuestionVisual:has(> .student-math-graph-entry) { display: contents; }
  .student-math-workspace[data-graph-entry="true"] #studentMathQuestionVisual > .student-math-visual-table {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
  }
  .student-math-workspace[data-graph-entry="true"] .student-math-graph-entry { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .student-math-workspace[data-graph-entry="true"] .student-math-answer-region { grid-column: 2; grid-row: 2; }
}