/* ─────────────────────────────────────────────────────────────────────────
   convert.css — страница /convert поверх языка холста.

   Здесь только то, чего нет в canvas.css: зона перетаскивания, панель
   параметров и очередь файлов. Всё остальное (карточки, кнопки, типографика,
   FAQ, сетка) переиспользуется — иначе конвертер выглядел бы чужой страницей.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Зона перетаскивания ──────────────────────────────────────────────── */

.cvt-drop {
  margin-top: 30px; padding: 52px 28px; border-radius: var(--cv-r);
  border: 1.5px dashed var(--cv-line-strong); background: var(--cv-card);
  cursor: pointer; text-align: center;
  transition: border-color .2s, background-color .2s;
}
.cvt-drop:hover { border-color: var(--cv-accent-soft); }
/* Состояние «файл над зоной» ставит JS: без явной подсветки непонятно, куда
   именно отпускать. */
.cvt-drop[data-over="1"] { border-color: var(--cv-accent); background: var(--cv-fill2); }
.cvt-drop:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 3px; }

.cvt-drop-ico {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 16px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--cv-accent-soft); border: 1px solid var(--cv-accent);
  color: var(--cv-text-hi);
}
.cvt-drop-title { margin-top: 14px; font-size: 22px; font-weight: 700; }
.cvt-drop-hint { margin-top: 6px; font-size: 15px; color: var(--cv-mute); }
.cvt-exts {
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 14px;
  font-family: var(--font-mono, 'JetBrains Mono'), monospace; font-size: 11px; color: var(--cv-mute);
}
.cvt-exts span { padding: 4px 9px; border-radius: 6px; background: var(--cv-fill); }

/* ── Панель параметров ────────────────────────────────────────────────── */

.cvt-bar {
  margin-top: 14px; padding: 16px 18px; border-radius: 16px;
  background: var(--cv-card); border: 1px solid var(--cv-line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.cvt-bar-label {
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-mute);
}
.cvt-fmts { display: flex; gap: 6px; flex-wrap: wrap; }
.cvt-fmt {
  padding: 9px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--cv-line); background: transparent; color: var(--cv-mute);
  font-family: var(--font-mono, 'JetBrains Mono'), monospace; font-size: 12px; letter-spacing: .05em;
  transition: background-color .2s, color .2s, border-color .2s;
}
.cvt-fmt:hover { color: var(--cv-text); }
.cvt-fmt[aria-pressed="true"] {
  background: var(--cv-accent-soft); border-color: var(--cv-accent); color: var(--cv-text-hi);
}
/* Формат, который не тянет браузер (нет кодировщика) — гасим, но оставляем
   кликабельным: по клику объясняем причину, а не просто игнорируем нажатие. */
.cvt-fmt[data-unsupported="1"] { opacity: .42; }

.cvt-quality { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cvt-quality input { accent-color: var(--cv-accent); width: 130px; }
.cvt-quality output {
  font-family: var(--font-mono, 'JetBrains Mono'), monospace; font-size: 12px;
  color: var(--cv-text-hi); width: 38px;
}

/* ── Очередь ──────────────────────────────────────────────────────────── */

.cvt-queue {
  margin-top: 14px; border-radius: 18px; overflow: hidden;
  background: var(--cv-card); border: 1px solid var(--cv-line);
}
.cvt-queue[hidden] { display: none; }
.cvt-queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--cv-line);
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-mute);
}
.cvt-queue-actions { display: flex; gap: 8px; }
.cvt-mini {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cv-line-strong); background: transparent; color: var(--cv-mute);
  font-family: inherit; font-size: 11px; letter-spacing: .07em;
}
.cvt-mini:hover { color: var(--cv-text); border-color: var(--cv-accent); }

.cvt-row {
  display: grid; grid-template-columns: 52px 1fr auto auto; gap: 16px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--cv-line-soft);
}
.cvt-row:last-child { border-bottom: 0; }
.cvt-thumb {
  width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--cv-line);
  background-size: cover; background-position: center; background-color: var(--cv-fill);
  display: grid; place-items: center; font-size: 18px; color: var(--cv-mute);
}
.cvt-name {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cvt-meta {
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  font-size: 11px; color: var(--cv-mute); margin-top: 3px;
}
.cvt-size { text-align: right; font-family: var(--font-mono, 'JetBrains Mono'), monospace; font-size: 13px; }
.cvt-delta { font-size: 11px; margin-top: 3px; }
/* Зелёный — файл похудел, розовый — потяжелел. Цвет здесь несёт смысл, а не
   украшает: это первое, на что смотрят после конвертации. */
.cvt-delta--down { color: var(--cv-green); }
.cvt-delta--up { color: var(--cv-pink); }

.cvt-get {
  padding: 10px 16px; border-radius: 9px; font-size: 14px; font-weight: 700; white-space: nowrap;
  background: var(--cv-accent-soft); border: 1px solid var(--cv-accent); color: var(--cv-text-hi);
}
.cvt-get[aria-disabled="true"] {
  background: var(--cv-fill); border-color: var(--cv-line); color: var(--cv-mute); pointer-events: none;
}

/* ── Уведомление ──────────────────────────────────────────────────────── */

.cvt-note {
  margin-top: 14px; padding: 16px 18px; border-radius: 16px;
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--cv-fill); border: 1px solid var(--cv-line-strong);
}
.cvt-note[hidden] { display: none; }
.cvt-note-ico {
  flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--cv-accent-soft); color: var(--cv-text-hi); font-weight: 700; font-size: 14px;
}
.cvt-note-title { font-size: 15px; font-weight: 700; color: var(--cv-text); }
.cvt-note-text { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--cv-dim); }
.cvt-note-close {
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  color: var(--cv-mute); font-size: 18px; line-height: 1;
}

/* ── Где выполняется конвертация ──────────────────────────────────────────
   Ключевой блок честности: изображения не покидают компьютер, документы
   уходят на сервер. Пользователь должен видеть это ДО загрузки файла, а не
   узнавать постфактум. */

.cvt-where { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.cvt-where-item {
  padding: 14px 16px; border-radius: 14px;
  background: var(--cv-fill); border: 1px solid var(--cv-line);
  font-size: 13.5px; line-height: 1.5; color: var(--cv-dim);
}
.cvt-where-item b { display: block; color: var(--cv-text); font-size: 14px; margin-bottom: 4px; }
.cvt-where-item--local { border-color: var(--cv-green); }
.cvt-where-item--server { border-color: var(--cv-line-strong); }

/* ── Плитки направлений ───────────────────────────────────────────────── */

.cvt-pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.cvt-pair {
  display: flex; align-items: center; justify-content: center; padding: 16px 12px;
  border-radius: 12px; background: var(--cv-fill); border: 1px solid var(--cv-line);
  color: var(--cv-text); font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  font-size: 13px; letter-spacing: .03em; transition: border-color .2s;
}
.cvt-pair:hover { border-color: var(--cv-accent); }

/* ── Мобильные ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .cvt-pairs { grid-template-columns: repeat(2, 1fr); }
  .cvt-where { grid-template-columns: 1fr; }
  .cvt-quality { margin-left: 0; width: 100%; }
  /* Размер и кнопка переезжают под имя файла: в четыре колонки на телефоне
     имя сжимается до многоточия и строка перестаёт читаться. */
  .cvt-row { grid-template-columns: 44px 1fr; row-gap: 10px; }
  .cvt-size, .cvt-get { grid-column: 2; text-align: left; }
  .cvt-get { justify-self: start; }
}

/* Выбор формата результата для серверных файлов: у документа направлений много,
   и навязывать одно неправильно. Стоит в строке очереди, под именем файла. */
.cvt-target {
  margin-top: 6px; padding: 4px 8px; border-radius: 7px;
  background: var(--cv-fill); border: 1px solid var(--cv-line); color: var(--cv-text);
  font-family: var(--font-mono, 'JetBrains Mono'), monospace; font-size: 11px; cursor: pointer;
}
.cvt-target:hover { border-color: var(--cv-accent); }