/* ==================================================================
   cells.css — «зошит у клітинку» (.cs-svg — креслить cells.js): сітка, цифри, коми, знаки, риски, тони.
   Розмір і рамку аркуша (host: --cs-fit, --cs-cell-max…, «чорнило» зошита) задає material.css матеріалу.
   Токени — engine/lab.css.
   ================================================================== */

.cs-svg { display: block; margin: 0 auto; max-width: none; user-select: none; -webkit-user-select: none; }
.cs-svg { --cs-c: var(--nb-ink); }
.cs-grid { fill: none; stroke: var(--nb-grid); stroke-width: 1px; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.cs-rule { fill: none; stroke: var(--nb-margin-line); stroke-width: 2px; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.cs-band { fill: var(--hl); opacity: .6; }

.cs-el { transform-box: fill-box; transform-origin: center; }
.cs-el.is-hidden { opacity: 0; visibility: hidden; }
.cs-t-help { --cs-c: var(--accent); }   /* перенесення, позичання, дописані нулі */
.cs-t-side { --cs-c: var(--muted); }    /* обчислення збоку — «олівцем» */
.cs-t-ok { --cs-c: var(--ok); }
.cs-t-bad { --cs-c: var(--no); }
.cs-t-rem { --cs-c: var(--link); }      /* остача */

.cs-num { font-family: var(--font-hand-math); font-weight: 400; fill: var(--cs-c); }
.cs-d .cs-num, .cs-comma .cs-num, .cs-ghost { text-anchor: middle; }
.cs-hand { font-family: var(--font-hand); font-weight: 600; fill: var(--cs-c); }
.cs-d .cs-num { transition: opacity .24s; }
.cs-cell { fill: transparent; }
/* цифра кроку — лише тихе тло клітинки, без обведення (сусідні зливаються в одну смугу) */
.cs-el.is-focus .cs-cell { fill: var(--hl); }
.cs-el.is-ref .cs-cell { fill: var(--hl); stroke: var(--accent); stroke-width: .07; }
/* кома клітинки не займає й тла не має: підсвічена — кольором */
.cs-comma.is-focus .cs-num, .cs-comma.is-ref .cs-num { fill: var(--accent); }
.cs-strike { fill: none; stroke: var(--no); stroke-width: .06; stroke-linecap: round; visibility: hidden; }
.cs-el.is-old .cs-strike { visibility: visible; }
.cs-el.is-old .cs-num { opacity: .5; }
.cs-stroke { fill: none; stroke: var(--cs-c); stroke-width: .065; stroke-linecap: round; stroke-linejoin: round; }
.cs-thin { stroke-width: .045; }
.cs-box { stroke-width: .075; }
.cs-fill { fill: var(--cs-c); }
.cs-ghost { fill: var(--link); pointer-events: none; }
/* до першого кроку: приклад блідо — що розв'язуватимемо */
.cs-svg.is-preview .cs-area { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .cs-d .cs-num { transition: none; }
}