/* MovieClipper UI kit · components/studio.css
   ----------------------------------------------------------------------------
   Стили экрана «Студия» — единственные, которых не было в ките: строка задачи
   с прогрессом и галерея клипов.

   НОВОГО ЗДЕСЬ ДВА БЛОКА, всё остальное взято из data.css/status.css:

     .st-job  — строка очереди: заголовок источника, чип статуса, полоса
                прогресса, причина сбоя и кнопка отмены;
     .st-clip — карточка клипа с плеером и подписью.

   Почему не переиспользованы карточки аналитики: там клип показывается
   как СЛЕДОК отбора (только лучший, с полосой скора), а здесь — результат
   конкретной задачи, с плеером и таймкодом. Разные смыслы, разные блоки.

   Переменные — только из colors_and_type.css. Своих цветов нет: акцент,
   статусные окраски и радиусы берутся из токенов, как на всех остальных
   экранах кита.
*/

.st-job {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* ---- «Дополнительно»: редкие опции за раскрывашкой --------------------------
   Форма создаёт задачу основным путём (источник → «Создать задачу»); всё, что
   настраивают не каждый раз, живёт под summary, а не на первом экране. */
.advanced {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-2);
}

.advanced > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--muted);
  font-size: var(--type-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.advanced > summary::-webkit-details-marker { display: none; }

.advanced > summary::before {
  content: "＋";
  flex: none;
  color: var(--accent);
  font-weight: 700;
}

.advanced[open] > summary::before { content: "−"; }

.advanced > summary:hover { color: var(--text); }

.advanced-body {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}

.st-job-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

/* Источник может быть путём до диска или длинной ссылкой: обрезаем по
   одной строке, полный текст — в title. */
.st-job-title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-job-meta {
  color: var(--muted);
  font-size: var(--type-xs);
}

/* Причина сбоя — не мелким серым: «стало плохо» должно читаться сразу,
   иначе задача выглядит просто «красной» без причины. */
.st-job-err {
  color: color-mix(in srgb, var(--err) 35%, var(--text));
  font-size: var(--type-xs);
  word-break: break-word;
}

/* ---- Галерея клипов ------------------------------------------------------- */

.st-clip {
  margin: var(--sp-2) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
}

.st-clip video {
  display: block;
  width: 100%;
  /* Превью не тянем целиком: метаданных достаточно, чтобы показать первый
     кадр, а файл при этом не грузится целиком при открытии списка. */
  max-height: 420px;
  background: var(--bg);
}

.st-clip figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--type-xs);
}

.st-clip figcaption > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .st-clip video { max-height: 60vh; }
}

/* Workspace uses the shared palette and spacing scale. */
.studio-workspace { display:grid; grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); gap:var(--sp-4); align-items:start; }
#studio-new { position:sticky; top:var(--sp-4); }
.studio-workspace > *, .st-job-head > * { min-width:0; }
.st-preset-field { margin-top:var(--sp-3); }
.st-filters, .st-job-actions, .st-clip-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.st-filters [aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
.st-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-3); }
.st-clip figcaption { display:grid; }
.st-clip video { height:300px; object-fit:contain; }
.st-clip-actions { padding:0 var(--sp-3) var(--sp-3); }
.st-clip-actions .btn { min-height:44px; }
#st-sync:empty { display:none; }
#st-source { min-width:0; }
@media (max-width:900px) { .studio-workspace { grid-template-columns:1fr; } #studio-new { position:static; } }
@media (max-width:420px) { .st-gallery { grid-template-columns:1fr; } .st-filters { gap:var(--sp-1); } }

.st-job { min-width:0; grid-template-columns:minmax(0,1fr); }
.st-job-meta { overflow-wrap:anywhere; }