/* Деление в столбик — сетка и роли клеток (общие стили в stolbik-trainer-common.css) */
.app--stolbik #gridBoard {
  position: relative;
  display: grid;
  --sqr: 2;
  background-color: #f3f1ed;
  background-image:
    linear-gradient(to right, rgba(80, 70, 60, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(80, 70, 60, 0.14) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}

.app--stolbik .cv,
.app--stolbik .ch {
  position: absolute;
  background: var(--t);
  z-index: 1;
  pointer-events: none;
}

.app--stolbik .cv {
  width: 3px;
  left: calc((var(--scc) - 1) * var(--cell));
  top: 0;
  height: calc(var(--sqr) * var(--cell));
}

.app--stolbik .ch {
  height: 3px;
  left: calc((var(--scc) - 1) * var(--cell));
  top: calc((var(--sqr) - 1) * var(--cell) - 1px);
  width: calc((var(--sc) - var(--scc) + 1) * var(--cell));
}

.app--stolbik .sc.is-dividend,
.app--stolbik .sc.is-bringdown {
  color: var(--cd);
}

.app--stolbik .sc.is-divisor {
  color: var(--cv);
}

.app--stolbik .sc.is-quotient {
  color: var(--cq);
}

.app--stolbik .sc.is-product {
  color: var(--cpr);
}

.app--stolbik .sc.is-remainder {
  color: var(--cr);
}

.app--stolbik .si.is-quotient {
  color: var(--cq);
}

.app--stolbik .si.is-product {
  color: var(--cpr);
}

.app--stolbik .si.is-remainder {
  color: var(--cr);
}

.app--stolbik .si.is-bringdown {
  color: var(--cb);
}