/* Generic 2-D board (matrix.js). Load after viz.css. matrix.js sets --mx (cell size) from the container width;
   when even the minimum size does not fit, the board scrolls inside .mx and the page never widens. */
.mx{--mx:40px;display:flex;overflow-x:auto;overscroll-behavior-x:contain}
.mx-in{position:relative;flex:none;margin:0 auto;padding:8px}
.mx-grid{display:grid;grid-auto-rows:var(--mx);gap:4px}

.mx-c{
  position:relative;display:grid;place-items:center;border:1.5px solid var(--frame-2);border-radius:6px;background:var(--sheet);
  font-family:var(--mono);font-weight:700;font-size:max(var(--fs-label), calc(var(--mx) * .34));font-variant-ligatures:none;color:var(--ink);
  transition:background-color .25s, border-color .25s, color .25s, opacity .25s, box-shadow .25s
}
.mx-t{position:relative;display:block;line-height:1;white-space:nowrap}
.mx-t.mx-sm{font-size:.78em}
.mx-t.mx-xs{font-size:max(var(--fs-label), .6em)}
.mx-hs .mx-t{padding-top:calc(var(--mx) * .2)} /* room for the sub-label */
.mx-s{
  position:absolute;left:3px;top:2px;font-style:normal;font-weight:600;line-height:1;color:var(--ink-3);
  font-size:max(var(--fs-label), calc(var(--mx) * .2));pointer-events:none
}

/* whole-row / whole-column bands (rowCls, colCls); a cell's own class wins over its band */
.mx-c:is(.b-cur,.b-probe){background:var(--probe-tint)}
.mx-c.b-ok{background:var(--ok-tint)}
.mx-c:is(.b-hit,.b-dep){background:var(--mark-tint);border-color:var(--mark)}
.mx-c.b-wall{background:var(--grid)}
.mx-c.b-dim{opacity:.4}
.mx-c.b-skip{opacity:.35}

/* group tints, reused in turn */
.mx-c.g0{--tint:var(--ok)}
.mx-c.g1{--tint:var(--mark)}
.mx-c.g2{--tint:var(--ink-3)}
.mx-c.g3{--tint:var(--probe)}
.mx-c:is(.g0,.g1,.g2,.g3){background:color-mix(in srgb, var(--tint) 22%, var(--paper));border-color:var(--tint)}

/* cell states */
.mx-c.dep{background:var(--mark-tint);border-color:var(--mark);color:var(--mark)}
.mx-c.probe{background:var(--probe-tint);border-color:var(--probe)}
.mx-c.cur{background:var(--probe-tint);border:2px solid var(--ink);box-shadow:0 8px 14px -8px var(--shadow);z-index:1}
.mx-c.cur:is(.g0,.g1,.g2,.g3){background:color-mix(in srgb, var(--tint) 45%, var(--paper))}
.mx-c.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.mx-c.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.mx-c.wall{background:var(--ink-2);border-color:var(--ink-2);color:var(--paper)}
:root[data-theme="dark"] .mx-c.wall{background:var(--ink-4);border-color:var(--ink-4);color:var(--ink)}
.mx-c.skip{opacity:.35;border-style:dashed}
.mx-c.dim{opacity:.4}
.mx-c:is(.hit,.wall) .mx-s{color:inherit;opacity:.8}

/* header labels */
.mx-h{
  display:grid;place-items:center;border-radius:6px;font-family:var(--mono);font-weight:600;color:var(--ink-3);
  font-size:max(var(--fs-label), calc(var(--mx) * .32));font-variant-ligatures:none;white-space:nowrap;
  transition:background-color .25s, color .25s, box-shadow .25s
}
.mx-corner{font-size:max(var(--fs-label), calc(var(--mx) * .24));color:var(--ink-3)}
.mx-h:is(.cur,.probe){background:var(--probe-tint);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--probe)}
.mx-h.ok{background:var(--ok-tint);color:var(--ok);font-weight:700}
.mx-h:is(.hit,.dep){background:var(--mark-tint);color:var(--mark);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--mark)}
.mx-h:is(.dim,.skip){opacity:.4}

/* overlays: region outlines, arrows + path (svg), the glide ring */
.mx-regs{position:absolute;inset:0;pointer-events:none;z-index:2}
.mx-reg{
  position:absolute;border:2px solid var(--ink-3);border-radius:8px;
  transition:left calc(var(--dur) * .5) cubic-bezier(.2,.8,.2,1), top calc(var(--dur) * .5) cubic-bezier(.2,.8,.2,1),
    width calc(var(--dur) * .5) cubic-bezier(.2,.8,.2,1), height calc(var(--dur) * .5) cubic-bezier(.2,.8,.2,1), border-color .25s
}
.mx-reg.cur{border-color:var(--ink)}
.mx-reg.probe{border-color:var(--probe)}
.mx-reg.ok{border-color:var(--ok)}
.mx-reg:is(.hit,.dep){border-color:var(--mark)}
.mx-reg:is(.dim,.skip){border-color:var(--ink-4);border-style:dashed}

.mx-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.mx-a{--ac:var(--mark)}
.mx-a.cur{--ac:var(--ink)}
.mx-a.probe{--ac:var(--probe)}
.mx-a.ok{--ac:var(--ok)}
.mx-a:is(.dim,.skip){--ac:var(--ink-4)}
.mx-a .ln{fill:none;stroke:var(--ac);stroke-width:2;stroke-linecap:round}
.mx-a .hd{fill:var(--ac)}
.mx-path{
  --pc:var(--mark);fill:none;stroke:var(--pc);stroke-opacity:.38;stroke-width:calc(var(--mx) * .22);
  stroke-linecap:round;stroke-linejoin:round
}
.mx-dot{--pc:var(--mark);fill:var(--pc)}
:is(.mx-path,.mx-dot).ok{--pc:var(--ok)}
:is(.mx-path,.mx-dot).probe{--pc:var(--probe)}
:is(.mx-path,.mx-dot):is(.dim,.skip){--pc:var(--ink-4)}

.mx-ring{
  position:absolute;left:0;top:0;border:2.5px solid var(--ink);border-radius:9px;pointer-events:none;z-index:3;
  transition:transform calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), opacity .2s
}
.mx-ring.off{opacity:0}

@media (prefers-reduced-motion: reduce){
  .mx-ring{transition:opacity .2s}
  .mx-reg{transition:border-color .25s}
}