/* The cell grid (Chairside.Controls/Components/CellGrid). Every colour is a Chairside token. */
.cg { display: grid; gap: 8px; }
.cg-scroll { overflow: auto; outline: none; overscroll-behavior: contain; }
.cg-scroll:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius-sm); }
.cg-canvas { position: relative; inline-size: max-content; min-inline-size: 100%; }
.cg [data-cell], .cg [data-head] { user-select: none; }
.cg [data-cell] { cursor: cell; }
.cg [data-head] { cursor: s-resize; }
.cg-active { outline: 2px solid var(--accent); outline-offset: -2px; }
.cg-scroll:not(:focus) .cg-active { outline-color: transparent; }
/* What a drag will paint, or what is selected: one outline over the block. */
.cg-sel {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 2px;
}
.cg-sel[data-kind="select"] { border-style: dashed; }
.cg-help { margin: 0; font-size: var(--ui-sm); color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .cg-sel { transition: left 40ms linear, top 40ms linear, width 40ms linear, height 40ms linear; }
}