/* Компоненты (kinozhurnal-design.md §3) */

/* --- Кнопки --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) * 2);
  height: var(--control-h);
  padding: 0 calc(var(--space) * 6);
  border: none;
  border-radius: var(--r-full);
  font: var(--type-body-med);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primary {
  background: linear-gradient(180deg, var(--lamp), var(--lamp-deep));
  color: var(--on-lamp);
  box-shadow: var(--glow-lamp);
}
.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-ghost { background: none; color: var(--text-dim); }
.btn-destructive {
  background: none;
  border: 1px solid var(--signal);
  color: var(--signal);
}
.btn-block { width: 100%; }

/* --- Поля ввода --- */
.field { display: grid; gap: calc(var(--space) * 2); }
.field input, .field textarea {
  height: var(--field-h);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 0 calc(var(--space) * 4);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { height: auto; padding: calc(var(--space) * 3) calc(var(--space) * 4); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--lamp);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .15);
}
.field.error input { border-color: var(--signal); }
.field .error-text { font: var(--type-caption); color: var(--signal); }

/* --- Чипы --- */
.chips {
  display: flex;
  gap: calc(var(--space) * 2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space) 0;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 calc(var(--space) * 4);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: none;
  color: var(--text-dim);
  font: var(--type-caption);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.chip.active {
  border-color: var(--lamp);
  color: var(--lamp);
  background: rgba(232, 163, 61, .08);
}

/* --- Карточка выпуска --- */
.episode-card {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 3);
  background: var(--surface);
  border-radius: var(--r-m);
  padding: calc(var(--space) * 3);
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.episode-card:active { background: var(--surface-2); }
.episode-card .thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 48px;
  border-radius: var(--r-frame);
  background: var(--surface-2);
  object-fit: cover;
  overflow: hidden;
}
.episode-card .meta { flex: 1; min-width: 0; display: grid; gap: var(--space); }
.episode-card .meta .title {
  font: var(--type-body-med);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode-card .check { flex: 0 0 auto; color: var(--ok); }

/* --- Бейдж статуса --- */
.badge {
  font: var(--type-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space) * 2);
}
.badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: currentColor;
}
.badge.ready { color: var(--lamp); }
.badge.failed { color: var(--signal); }
.badge.archived { color: var(--text-faint); }
.badge.progress { color: var(--text-dim); }
.badge.progress::before { animation: badge-pulse 1.2s ease-in-out infinite; }
@keyframes badge-pulse { 50% { opacity: .3; } }

/* --- Таб-бар --- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(31, 27, 22, .88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  z-index: 40;
}
.tabbar-inner { display: flex; width: 100%; max-width: 560px; }
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-faint);
  font: var(--type-caption);
  transition: color var(--t-fast);
}
.tabbar a.active { color: var(--lamp); }
.tabbar svg { width: 24px; height: 24px; }

/* --- Тост --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space) * 4);
  transform: translate(-50%, 8px);
  max-width: min(92vw, 480px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: calc(var(--space) * 3) calc(var(--space) * 4);
  font: var(--type-body);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  z-index: 60;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Bottom sheet --- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 6, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
  z-index: 50;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80dvh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-l) var(--r-l) 0 0;
  padding: calc(var(--space) * 3) calc(var(--space) * 4) calc(env(safe-area-inset-bottom) + var(--space) * 6);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease);
  z-index: 55;
}
.sheet.open { transform: translateY(0); }
.sheet .handle {
  width: 40px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--line);
  margin: 0 auto calc(var(--space) * 4);
}
@media (min-width: 600px) {
  .sheet { max-width: 560px; left: 50%; transform: translate(-50%, 100%); }
  .sheet.open { transform: translate(-50%, 0); }
}

/* --- Кадр плёнки, миниатюра-заглушка --- */
.film-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font: var(--type-mono);
}

/* --- Карточки-секции --- */
.card {
  background: var(--surface);
  border-radius: var(--r-m);
  padding: calc(var(--space) * 4);
}

/* --- Скелетон --- */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s linear infinite;
  border-radius: var(--r-s);
  color: transparent;
}
@keyframes skeleton-wave { to { background-position: -200% 0; } }