/* MovieClipper UI kit · components/presets.css
   ----------------------------------------------------------------------------
   Экран пресетов: список слева, редактор с превью справа (на 320px — в одну
   колонку, список сверху).

   Превью — не украшение: в нём человек видит, во что превратится кадр, и
   проверяет читаемость субтитров. Поэтому зоны безопасности и блок субтитров
   рисуются явно и всегда, а не «по вкусу». */

.pr-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

@media (max-width: 900px) {
  .pr-split { grid-template-columns: minmax(0, 1fr); }
}

.pr-list { min-width: 0; }

.pr-item {
  display: grid;
  gap: var(--sp-1);
  width: 100%;
  /* Кнопка, а не div: список выбирается с клавиатуры и попадает в обход. */
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.pr-item:hover { background: var(--surface-2); }

.pr-item[aria-current="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pr-item__name { font-weight: 600; }

.pr-item__meta {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--type-xs);
}

.pr-editor { min-width: 0; display: grid; gap: var(--sp-3); }

.pr-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.pr-flags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.pr-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

/* ---- Превью кадра ---------------------------------------------------------- */

.pr-preview {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
}

.pr-frame {
  position: relative;
  width: 100%;
  max-width: 280px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  /* Фон = цвет подложки пресета: для center_blur это то, что стоит за кадром,
     и по нему же считается контраст субтитров. */
  background: #000;
}

.pr-frame__safe {
  position: absolute;
  /* Title Safe — центральные 90%. Полосы по краям срезаются интерфейсом
     площадки и обрезкой при пересборке. */
  inset: 5%;
  border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

.pr-frame__ui {
  position: absolute;
  /* Зона интерфейса площадки: справа кнопки действий, снизу подпись.
     Числа — консервативные, под самый крупный интерфейс из коротких;
     это подсказка «сюда не класть текст», а не измерение площадки. */
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--err) 14%, transparent);
  border-left: 1px dashed color-mix(in srgb, var(--err) 55%, transparent);
  border-top: 1px dashed color-mix(in srgb, var(--err) 55%, transparent);
  pointer-events: none;
}

.pr-frame__sub {
  position: absolute;
  left: 5%;
  right: 5%;
  text-align: center;
  /* Тот же шрифт, что уйдёт в libass (render_fonts.css). Если здесь падает
     на запасной — Safe Zones врут, и человек узнает об этом на готовом клипе. */
  font-family: var(--font-render-onest);
  line-height: 1.25;
  overflow-wrap: break-word;
  pointer-events: none;
}

.pr-frame__cap { font-size: var(--type-xs); color: var(--muted); }

.pr-seg { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

/* ---- Предупреждения о читаемости ------------------------------------------ */

.pr-warn {
  display: grid;
  gap: var(--sp-1);
  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);
  font-size: var(--type-sm);
}

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

/* ---- Поля ------------------------------------------------------------------ */

.pr-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin: 0;
  min-width: 0;
}

.pr-fieldset > legend {
  padding: 0 var(--sp-1);
  font-weight: 600;
  font-size: var(--type-sm);
}

.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
}

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

.pr-field > label { font-size: var(--type-xs); color: var(--muted); }

/* Выключенное поле показывает причину, а не просто серое поле: иначе
   «почему нельзя» остаётся загадкой. */
.pr-field[data-off="true"] { opacity: 0.55; }

.pr-off-note {
  font-size: var(--type-xs);
  color: var(--muted);
  margin: 0;
}

.pr-swatch {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: var(--sp-1);
  vertical-align: -0.15em;
  border: 1px solid var(--line);
  border-radius: 3px;
}

#pr-check {
  display: grid;
  gap: var(--sp-3);
}

#pr-check .btn { justify-self: start; }

#pr-check-result { display: grid; gap: var(--sp-2); }

/* Превью рендера — не украшение, а проверка: рамка отделяет кадр от фона
   страницы, иначе вертикальный ролик сливается с подложкой. */
#pr-check-result video {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #000;
}body[data-app="movieclipper"] .pr-preview {background:var(--media-bg); border-radius:12px; max-height:480px;}
body[data-app="movieclipper"] .pr-split {grid-template-columns:240px minmax(0,1fr); gap:24px;}
body[data-app="movieclipper"] .pr-list {position:sticky; top:24px;}
@media(max-width:900px) {body[data-app="movieclipper"] .pr-split {grid-template-columns:1fr;} body[data-app="movieclipper"] .pr-list {position:static;}}