/* Table — сетка ячеек, сгруппированных по столбцам и строкам.
   Оси component set: Type (Default / Mixed) × Columns (Two / Three / Four).
   Мастер Figma: 4926:12004 (файл-библиотека P6cIX4bYZRbWPcXtA2i2EQ).

   Разметка — семантический <table> внутри обёртки .table: обёртка держит
   скругление, тень и внешнюю рамку, таблица — саму сетку.
   Число колонок задаётся разметкой, отдельного модификатора не нужно:
   table-layout: fixed делит ширину поровну. */

.table {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* Фон обёртки виден только в разделительных линиях (они рисуются поверх ячеек
     как inset-тени) — в Figma это заливка контейнера, просвечивающая в gap 1px. */
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  /* Inter Variable по умолчанию сужает глифы осью opsz — переносы уезжают
     относительно Figma. */
  font-optical-sizing: none;
}

/* Рамка 1px: в Figma stroke лежит ВНУТРИ и не раздвигает габарит (600×176),
   поэтому не border, а кольцо поверх ячеек. Inset-тень тут не годится — её
   перекрыли бы дочерние ячейки. */
.table::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-gray-50);
  border-radius: inherit;
  pointer-events: none;
}

/* Вертикальные разделители — настоящий зазор 1px между колонками (в Figma это
   gap контейнера, и он ЗАБИРАЕТ ширину: при 600px колонки по 299.5, а не по 300).
   border-spacing даёт такой же зазор и по внешним краям — компенсируем это
   расширением таблицы на 2px и сдвигом на -1px; лишнее срезает overflow обёртки.
   Вертикальный зазор 0 — строки идут вплотную. */
.table__grid {
  width: calc(100% + 2px);
  margin: 0 -1px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 1px 0;
}

/* Ячейка. Нижняя линия — inset-тень: как и stroke в Figma, она не меняет
   высоту строки (12 + 20 + 12 = 44). */
.table__cell {
  box-sizing: border-box;
  height: var(--spacing-44);
  padding: var(--spacing-12) var(--spacing-16);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: break-word;
  word-break: break-word;
  background: var(--color-gray-0);
  color: var(--color-gray-900);
  box-shadow: inset 0 -1px 0 0 var(--color-gray-50);
}

/* Шапка: заливка gray-25, текст gray-700 (.text-body-12m). */
.table__cell--head {
  background: var(--color-gray-25);
  color: var(--color-gray-700);
}

/* Type=Mixed — зебра: чередование начинается со ВТОРОЙ строки данных. */
.table--mixed .table__row:nth-child(even) .table__cell {
  background: var(--color-gray-25);
}