/* Math pictures (public/js/mathviz): shown one part at a time, with "Show again". Reduced motion: the finished
   picture at once, no button. */
.mv-visual { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.mv-visual .mv-svg { display: block; width: 100%; max-width: 560px; height: auto; max-height: 52vh; margin: 0 auto;
  background: var(--sg-paper, #FFFFFF); border-radius: var(--cl-radius-md, 12px); }
.mv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 560px; }
.mv-say { flex: 1 1 auto; margin: 0; min-height: 2.7em; font: 600 16px/1.35 var(--cl-font-body, Inter, system-ui, sans-serif);
  color: var(--cl-text, #12304C); }
.mv-replay { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  border: 2px solid var(--cl-navy, #0B4A78); border-radius: 999px; background: var(--cl-white, #FFFFFF);
  color: var(--cl-navy, #0B4A78); font: 700 16px/1 var(--cl-font-body, Inter, system-ui, sans-serif); cursor: pointer; }
.mv-replay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;
  stroke-linejoin: round; }
.mv-replay:hover { background: var(--cl-sky-light, #EEF5FB); }
.mv-replay:focus-visible { outline: 3px solid var(--cl-sun, #F5B700); outline-offset: 2px; }

.mv-svg .mv-node { transition: opacity .45s ease; }
.mv-svg .mv-hidden, .mv-svg .mv-off { opacity: 0; }
.mv-svg .mv-dim { opacity: .22; }
/* Word pictures (science, social studies, ELA): a current, a wind or heat flows along its dashes a few times, then
   rests (never a loop that keeps pulling the eye). Every flowing dash pattern is 20 long. */
.mv-svg .mv-flow { animation: mv-flow 1.6s linear 4; }
@keyframes mv-flow { to { stroke-dashoffset: -40; } }

@media (max-width: 420px) {
  .mv-foot { flex-wrap: wrap; }
  .mv-say { font-size: 15px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-svg .mv-node { transition: none; }
  .mv-svg .mv-flow { animation: none; }
  .mv-replay { display: none; }
}