/* math formula editor — a WYSIWYG MathLive equation field, plus static markup for previews.
   The formula is HTML (not SVG), so there is no canvas selection and no SVG zoom; the field
   sits large and centred in the stage and edits itself. */

/* the interactive equation field fills the stage, big and centred */
.dia-math .flow-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.dia-math .flow-stage .math-field {
  display: block;
  width: 100%;
  max-width: 640px;
  min-height: 96px;
  font-size: 2rem;
  padding: 18px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
}
.dia-math .flow-stage .math-field:focus-within { border-color: var(--accent); }

/* raw-LaTeX editor in the Properties panel */
.dia-math .flow-props .flow-panel-body { width: 320px; max-width: 80vw; }
.dia-math .math-src {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  resize: vertical;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  outline: none;
}
.dia-math .math-src:focus { border-color: var(--accent); }

/* static rendered formula — Source-tab preview and the "You get" examples */
.math-out {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 16px 20px;
  font-size: 1.6rem;
  overflow-x: auto;
}