/*
 * Native MathML is the single source of truth for mathematical layout.
 * Text wraps normally; only an individual formula that is genuinely wider
 * than its container becomes a keyboard-focusable horizontal scroller.
 */
.math-copy,
.lecture-equation,
.past-prompt,
.question-prompt {
  min-width: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.math-object {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  vertical-align: baseline;
  line-height: normal;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}

.math-object--matrix {
  max-width: calc(100% - 0.32em);
  margin-inline: 0.16em;
  vertical-align: middle;
}

.math-object[data-overflow] {
  padding-block-end: 0.18em;
}

.math-object[data-overflow]:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.math-inline,
.math-matrix {
  display: block;
  flex: 0 0 auto;
  color: currentColor;
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-rendering: geometricPrecision;
  white-space: nowrap;
}

.math-inline {
  margin-inline: 0.04em;
}

.math-matrix {
  font-size: 1.04em;
}

.math-matrix mtable {
  line-height: 1.08;
}

.math-matrix mtd {
  /* Native MathML rowspacing is rendered too tightly in Chromium/WebView.
     Cell padding gives every row a stable, readable gap on desktop and mobile. */
  padding: 0.18em 0.15em;
}

.math-matrix .math-fence {
  padding-inline: 0.03em;
  font-weight: 400;
}

.math-inline msup,
.math-inline msub,
.math-inline msubsup {
  font-size: 1em;
}

@media (max-width: 680px) {
  .math-object--matrix {
    max-width: calc(100% - 0.2em);
    margin-inline: 0.1em;
  }

  .math-matrix {
    font-size: 1em;
  }

  .math-matrix mtd {
    padding-inline: 0.12em;
  }

  /* Keep tall matrices in the sentence flow. Making them block-level leaves
     commas and full stops stranded on their own line on narrow screens. */
  .math-object--tall {
    display: inline-flex;
    width: auto;
    margin-block: 0.08em;
  }
}

@media (forced-colors: active) {
  .math-object,
  .math-inline,
  .math-matrix {
    forced-color-adjust: auto;
  }
}