/* Экран создания презентации. Всё общее живёт в ui.css, здесь только раскладка
   и то, что встречается лишь на этом экране. */

@import url("/static/ui.css");

/* ---- шапка ---- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  height: 46px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.quota { color: var(--muted); font-size: var(--text-sm); }
.quota--out { color: var(--danger); }

main { max-width: 760px; margin: 0 auto; padding: 34px 20px 80px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 14px;
}

/* ---- выбор способа ввода ---- */

.tabs { display: flex; gap: 6px; margin-bottom: 20px; }

.tab {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}

.tab:hover { color: var(--ink); border-color: var(--dim); }
.tab.is-active { color: #fff; background: var(--ink-btn); border-color: var(--ink-btn); }

.row { display: flex; gap: 12px; }
.field--narrow { flex: 1; }

.hint-line { display: block; color: var(--dim); font-style: normal; font-size: 13px; margin-top: 4px; }

/* Скелет жанра показывается до сборки: человек видит, что получит защиту по канону,
   а не случайный набор слайдов. Это же и объясняет, чем мы отличаемся. */
.skeleton {
  margin: -6px 0 18px;
  padding: 10px 12px;
  background: var(--panel-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.check { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 20px; font-size: 14px; }
.check input { width: auto; margin-top: 2px; accent-color: var(--accent); }
.check em { display: block; color: var(--muted); font-style: normal; font-size: 13px; margin-top: 2px; }

input[type="file"] { padding: 9px 12px; cursor: pointer; }

/* ---- результат ---- */

.result-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.result-head > div:first-child { min-width: 0; }
.result-head h1 { font-size: 21px; margin: 0 0 5px; }
.meta { color: var(--muted); font-size: 13px; margin: 0; }
.meta-source { color: var(--accent); font-size: 13px; text-decoration: none; }
.meta-source:hover { text-decoration: underline; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions select { width: auto; }

/* Вопрос об отзыве стоит сразу под результатом: это единственный момент, когда
   человек уже всё увидел и ещё не ушёл. Ниже он его не заметит, выше помешает. */
.ask {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--panel-2);
  border-radius: var(--radius);
  font-size: 14px;
}

.ask__buttons { display: flex; gap: 6px; }
.ask__more { display: flex; gap: 6px; flex: 1; min-width: 260px; }
.ask__more input { flex: 1; font-size: 14px; padding: 7px 10px; }

.warnings {
  margin: 18px 0 0;
  padding: 11px 13px;
  border-left: 2px solid var(--accent);
  background: var(--panel-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--muted);
}

.warnings p { margin: 0 0 6px; }
.warnings p:last-child { margin: 0; }

/* ---- карточки слайдов ---- */

.slides { margin-top: 22px; display: grid; gap: 10px; }

.slide {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color var(--fast);
}

.slide:hover { border-color: var(--dim); }
.slide header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.slide h3 { margin: 0; font-size: 16px; }

.slide .kind {
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.slide p, .slide li { color: var(--ink); font-size: var(--text); }
.slide ul { margin: 10px 0 0; padding-left: 20px; }
.slide .visual { color: var(--dim); font-size: 12px; margin-top: 10px; }

.slide-shot { margin: 12px 0 0; }

.slide-shot img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.slide-shot figcaption { color: var(--dim); font-size: 12px; margin-top: 5px; }

.slide-edit { display: flex; gap: 8px; margin-top: 12px; }
.slide-edit input { flex: 1; font-size: 14px; padding: 8px 11px; }
.slide.is-busy { opacity: .5; pointer-events: none; }

/* ---- история ---- */

.history h2 { font-size: 15px; margin-bottom: 14px; }
.history ul { list-style: none; margin: 0; padding: 0; }

.history li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text);
}

.history li:last-child { border: 0; }
.history a { color: var(--ink); text-decoration: none; transition: color var(--fast); }
.history a:hover { color: var(--accent); }
.history span { color: var(--dim); font-size: 12px; }

/* ---- ожидание ---- */

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
  margin-bottom: 14px;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .row { flex-direction: column; gap: 0; }
  .result-head { flex-direction: column; }
  .actions { width: 100%; flex-wrap: wrap; }
}