/* Math 7A formula legibility: one shared visual scale for A4 previews,
   question cards, print previews, parent pages and whiteboard snapshots. */
.content-paragraph:has(.content-formula) {
  line-height: 2.5;
}

.content-paragraph:has(.content-formula-mathml) {
  line-height: 1.8;
}

.content-formula {
  display: inline-block;
  width: auto;
  height: 1.8em;
  max-width: 100%;
  vertical-align: -0.42em;
  object-fit: contain;
}

.content-formula[data-formula-shape="wide"] {
  height: 1.8em;
  vertical-align: -0.42em;
}

.content-formula[data-formula-shape="tall"] {
  height: 2.35em;
  vertical-align: -0.72em;
}

.content-formula-mathml {
  display: inline-block;
  font-family: "Cambria Math", "STIX Two Math", serif;
  font-size: 1.16em;
  line-height: 1;
  vertical-align: -0.16em;
}

.content-formula-mathml math {
  font-size: 1em;
}

/* A browser that cannot draw an imported MathML fragment is switched to the
   matching semantic PNG by app.js.  The fallback keeps the original baseline
   and remains readable instead of leaving a blank or broken formula glyph. */
.content-formula-fallback {
  display: inline-block;
  width: auto;
  height: 1.8em;
  max-width: 100%;
  vertical-align: -0.42em;
  object-fit: contain;
}

.content-inline-diagram {
  display: inline-block;
  width: auto;
  height: 2.9em;
  max-width: 100%;
  object-fit: contain;
  vertical-align: -1.05em;
}

/* A picture that occupies its own content paragraph is a question diagram,
   not an inline symbol. Keep small inline sketches aligned with text, while
   allowing full diagrams imported from Word/PDF to use their natural aspect
   ratio and a readable card/A4 width. */
.content-diagram-frame {
  position: relative;
  display: inline-block;
  width: var(--content-image-width, 7.865%);
  max-width: 100%;
  vertical-align: -1.05em;
}

.content-diagram-frame .content-inline-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  vertical-align: baseline;
}

.content-paragraph:has(> .content-diagram-frame:only-child) {
  margin: .7em 0 1em;
  line-height: 1;
}

.content-paragraph > .content-diagram-frame:only-child {
  display: block;
  margin: 0 auto;
  vertical-align: baseline;
}

.content-paragraph > .content-diagram-frame.image-align-left:only-child {
  margin-left: 0;
  margin-right: auto;
}

.content-paragraph > .content-diagram-frame.image-align-right:only-child {
  margin-left: auto;
  margin-right: 0;
}

@media print {
  .content-diagram-frame .content-inline-diagram {
    max-height: 90mm;
  }
}

.content-table .content-paragraph:has(.content-formula) {
  line-height: 2.35;
}

/* Four visual answer choices are laid out as a 2 × 2 grid. The exported
   drawings often include generous white canvas around the actual figure, so a
   single four-column row becomes unreadably small in the A4 preview. */
.content-table-picture-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55em 1.1em;
}

.content-table-picture-options colgroup,
.content-table-picture-options tbody,
.content-table-picture-options tr { display: contents; }

.content-table-picture-options td {
  display: block;
  min-width: 0;
  padding: .4em .55em !important;
  border: 0 !important;
  text-align: center;
}

.content-table-picture-options .content-paragraph { white-space: normal; }

.whiteboard-question-snapshot .content-paragraph:has(.content-formula) {
  line-height: 2.1;
}

.whiteboard-question-snapshot .content-formula {
  max-height: 44px;
}