/* ==========================================================================
   Площадки РСЯ
   ========================================================================== */
/* Своя сетка: колонок столько же, сколько у n-грамм, но состав другой -
   вместо score и потерь тут категория, цена клика и кампания. */
#p-scroller {
  /* 866 фиксированных + 100 зазоров: колонок столько же, состав другой. */
  --table-min: 966px;
}
#p-scroller .table-head,
#p-scroller .table-foot,
#p-scroller .row {
  grid-template-columns: 30px 40px minmax(150px, 1.4fr) 98px 70px 54px 82px 58px 58px minmax(110px, 1fr) 96px;
}
.c-cat { overflow: hidden; }
.c-camp {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-3); font-size: 11px;
}

/* Таблица площадок виртуализирована так же, как таблица n-грамм: рисуются
   только видимые строки, а высоту прокрутки держит распорка. Ширину она
   держит тоже - иначе строки оборвались бы по видимой части при
   горизонтальной прокрутке. На аккаунте
   целиком площадок под пять тысяч, и рисовать их все означало заметную паузу
   на каждом щелчке по фильтру. Строки позиционируются абсолютно внутри
   распорки - это и есть то, ради чего в общем правиле стоит position:
   absolute. */
#p-spacer { position: relative; min-width: var(--table-min); }

/* Подсветка живёт В ЯЧЕЙКЕ и означает «посмотрите», а не «плохо»: высокий CTR
   при дешёвом клике в сети чаще признак накрутки, чем удачной площадки.
   Заливка строки говорит о другом (защищена, уже исключена), поэтому цвета
   разные и не спорят: строка - состояние, ячейка - сочетание чисел. */
.cell-anomaly {
  background: var(--att-bg);
  color: var(--att-text);
  font-weight: 600;
  border-radius: 3px;
  padding: 1px 4px;
  margin: 0 -4px;
  box-shadow: inset 0 0 0 1px var(--att-line);
}

/* Поля подсветки стоят в строку и под одной подписью: по одному их не крутят,
   втроём они задают одно правило. Три отдельных поля с тремя подсказками
   занимали треть экрана настроек и читались как три независимые настройки. */
.inline-fields { display: flex; flex-wrap: wrap; gap: 14px; row-gap: 8px; align-items: center; }
.inline-fields .mini {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2);
}
.inline-fields .mini input { width: 72px; }

/* Свёрнутые списки проекта: их правят редко, а места они занимают больше,
   чем все настройки прогона вместе. */
.settings.lists > summary { cursor: pointer; }
.settings.lists[open] { padding-bottom: 6px; }

/* Списки площадок: подпись отдельной строкой, подсказка под полем.
   В общем `.label` подпись и подсказка стоят рядом через space-between -
   в узкой колонке они делили ширину пополам, и читались обе плохо. */
.settings.lists .lists-lead { margin: 0 14px 10px; }
.settings.lists .lists-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.settings.lists textarea {
  min-height: 168px; resize: vertical;
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.55;
}
.settings.lists .hint { line-height: 1.5; }
.settings.lists .hint code {
  font-size: 11px; padding: 0 3px;
  background: var(--surface-2); border-radius: 3px;
}


/* Справка живёт в окне: в колонке она не помещалась - заголовок ломался
   на три строки, а текста там на несколько экранов. */
#help-body .help-pane { padding: 0; }
#help-body .nested-help { border: none; background: transparent; }
#help-body .nested-help > summary { display: none; }
#help-body .help { max-height: none; padding: 0; }
#help-modal .modal-box { max-width: 720px; }


/* Подсказка под полем прижата к левому краю поля, а не к краю колонки.
   В колонке параметров ширина большая, и любое другое выравнивание отрывает
   объяснение от того, что оно объясняет. */
.field > .hint { text-align: left; align-self: stretch; }