/* ===========================================================
   Math steps (muda-math-steps) for ムダシル。
   Diff colors are CSS variables so articles can override them
   on .muda-math-steps. Depends on tokens.css design tokens.
   Spec: docs/plan/仕様書.md 9章 (Obsidian vault, 260707-数式プログラミング)
   =========================================================== */

.muda-math-steps {
	--mstep-del:  #E0201A;   /* deleted parts (upper line) */
	--mstep-add:  #0D5FE0;   /* added parts (lower line) */
	--mstep-both: #7B2D8E;   /* deleted and added on a middle line */
	margin: 24px 0;
}

.muda-math-steps .mstep-row {
	padding: 8px 12px;
	background: var(--paper, #FFFFFF);
	border: 1.5px solid var(--line-soft, #F2ECDE);
	border-radius: var(--r-md, 10px);
	overflow-x: auto;               /* long formulas scroll sideways */
}

.muda-math-steps .mstep-row .katex-display {
	margin: 4px 0;
	overflow-x: visible;            /* scrolling is handled by .mstep-row */
	border: 0;
	padding: 0;
	background: transparent;
}

.mstep-del  { color: var(--mstep-del); }
.mstep-add  { color: var(--mstep-add); }
.mstep-both { color: var(--mstep-both); }

.mstep-sep {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 8px;
}

.mstep-arrow {
	color: var(--ink-mute, #8A8480);
	line-height: 0;
	flex: 0 0 auto;
}

.mstep-note {
	font-size: 0.88em;
	color: var(--ink-soft, #4A4544);
}

.mstep-fallback {
	font-size: 0.85em;
	color: var(--ink-mute, #8A8480);
	word-break: break-all;
}