/* MovieClipper UI kit · components/warnings.css
   ----------------------------------------------------------------------------
   Замечания по задаче: чип «Есть замечания», строка причины и «Подробнее».

   Правила оформления те же, что у остальных компонентов кита: только токены,
   цвет означает состояние (частичный — значит «не всё хорошо, но работает»),
   тап-цель не меньше 44px. Никаких новых статусов: чип здесь — дополнение
   к строке задачи, а не замена статуса. */

.warn-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}

.warn-chip[hidden] { display: none; }

/* Причина в основном виде: одна строка, без стены текста. */
.warn-line {
  margin: 0;
  font-size: var(--type-sm);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.warn-body { min-width: 0; display: grid; gap: var(--sp-1); }

/* Детали — за «Подробнее», чтобы основной вид оставался читаемым. */
.warn-details { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); }

.warn-item { display: grid; gap: var(--sp-1); }

.warn-item__text { font-size: var(--type-xs); color: var(--muted); }

.warn-item .endpoint {
  display: block;
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  word-break: break-word;
}