/* H2 Math app styles that the kit does not have: the graph module and a few stage widgets.
   Everything is prefixed mx- so it cannot clash with kit.css. */
.mx-graph { user-select: none; -webkit-user-select: none; position: relative; width: 100%; height: 100%; min-height: 0; }
.mx-graph > canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.mx-graph .kit-corner { z-index: 2; }
.mx-reset { min-height: 36px; padding: 4px 10px; font-size: .85rem; opacity: .92; }
.mx-stack { display: flex; flex-direction: column; width: 100%; height: 100%; }
.mx-stack > .mx-graph { flex: 1 1 0; border-bottom: 1px solid var(--line); }
.mx-stack > .mx-graph:last-child { border-bottom: 0; }
.mx-tag { position: absolute; left: 8px; top: 6px; font: 600 12px var(--font); color: var(--muted); pointer-events: none; z-index: 1;
  background: color-mix(in srgb, var(--stage) 85%, transparent); padding: 1px 6px; border-radius: 5px; }
.mx-info { position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px);
  font: 13px/1.35 var(--font); font-variant-numeric: tabular-nums; color: var(--ink);
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px; pointer-events: none; }
.mx-info:empty { display: none; }
.mx-info b { font-weight: 700; }
.mx-num .kit-row-body { gap: 4px; }
.mx-num input { width: 4.2em; min-height: var(--tap); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); text-align: center; }
@media (max-width: 760px) {
  .mx-info { font-size: 12px; padding: 3px 6px; }
  .mx-num input { width: 3.6em; }
}