/**
 * Тег и бейдж.
 *
 * Тег — статичная подпись (тип генерации, статус, «Скоро»).
 * Бейдж — метка версии в списке («Топ», «Новинка», ТЗ 9.2).
 */

.tag {
  display: inline-flex;
  align-items: center;
  height: var(--h-tag);
  padding: 0 9px;
  border-radius: 6px;
  font-size: 11.5px;
  border: 1px solid var(--line2);
  color: var(--tx2);
  background: var(--surface);
  white-space: nowrap;
}

.tag--acc {
  background: var(--acc-bg);
  color: var(--acc);
  border-color: transparent;
  font-weight: 600;
}

.tag--soon {
  color: var(--mut);
}

/* Цветовая кодировка типов генерации. Палитра различения одна на обе темы,
   меняется только светлота базового цвета (ТЗ 3.1). */
.tag--img { color: var(--img); background: var(--img-bg); border-color: transparent; }
.tag--vid { color: var(--vid); background: var(--vid-bg); border-color: transparent; }
.tag--aud { color: var(--aud); background: var(--aud-bg); border-color: transparent; }
.tag--txt { color: var(--txt); background: var(--txt-bg); border-color: transparent; }
.tag--d3  { color: var(--d3);  background: var(--d3-bg);  border-color: transparent; }
.tag--utl { color: var(--utl); background: var(--utl-bg); border-color: transparent; }

/* Метка версии. «Новинка» — заливная, «Топ» — контурная со звездой (ТЗ 9.2). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 17px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

.badge--new {
  background: var(--acc);
  color: var(--acc-ink);
}

.badge--top {
  border: 1px solid var(--acc);
  color: var(--acc);
}

.badge--top svg {
  width: 8px;
  height: 8px;
}

/* Статус точкой: успех / предупреждение / ошибка. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.status--warn::before { background: var(--warn); }
.status--err::before  { background: var(--err); }