/* qa-tools — /naughty: метки невидимых символов.

   Инструмент показывает строки, часть которых не видно в принципе, и
   часть которых способна развернуть соседний текст. Поэтому каждый
   невидимый и управляющий символ рисуется меткой — маленькой плашкой с
   именем. Метка это <i>, а не <span>, чтобы курсивное начертание само
   отделяло её от содержимого строки даже без цвета.
   Всё берётся из токенов: своих значений цвета и кегля здесь нет. */
.ch{
  display:inline-block;vertical-align:baseline;
  padding:0 var(--space-3);margin:0 var(--space-2);
  border-radius:var(--radius-sm);
  background:var(--accent-quiet);color:var(--accent-text);
  border:1px solid var(--border-accent);
  font:var(--fw-semibold) var(--text-micro)/1.6 var(--font-ui);
  letter-spacing:var(--ls-caps);font-style:normal;
  transition:background-color var(--dur-theme) var(--ease-theme),
             border-color var(--dur-theme) var(--ease-theme),
             color var(--dur-theme) var(--ease-theme)}

/* Пустая строка и пробел — тоже тест-кейсы, и на экране они выглядят
   как ничего. Метка нужна, чтобы отличить «здесь пусто» от «здесь
   ничего не отрисовалось». Цвет приглушённее: это не символ, а
   отсутствие символа. */
.ch--empty{background:var(--surface-app);color:var(--text-faint);
  border-color:var(--border-subtle)}
/* Пробел по краям: метка шириной с пробел, без подписи. */
.ch--sp{padding:0;min-width:.6em;background:var(--surface-app);
  border-color:var(--border-subtle)}

/* Сама строка набирается моноширинным: в ней важен каждый символ, и
   ширина знака должна быть предсказуемой. Перенос — как в редакторах
   (правило проекта): рвём только то, что иначе не помещается. */
.naughty__s{font-family:var(--font-mono);color:var(--text-heading);
  overflow-wrap:anywhere}
/* Ширины колонок: строка узкая, объяснение занимает основное место,
   кнопка по содержимому. Без этого таблица отдаёт половину ширины
   коротким строкам вроде «0» и «-1». */
.naughty td:first-child{width:26%}
.naughty td:last-child{width:1%;white-space:nowrap}