/* ══ ПАКЕТЫ МОДЕЛЕЙ ══
   Экран «Пакеты» (public/js/15-packages.js). Свой файл, а не строки в
   style.css: тот перевалил за пять тысяч строк, и «где стили пакетов» должно
   отвечаться именем файла.

   Токены (--ink, --muted, --rule, --surface, --hover) объявлены в style.css и
   здесь только используются — второй набор нейтральных цветов разъехался бы с
   первым на первой же правке темы. Своё объявлено ровно одно: «да / может быть /
   нет», потому что этой тройки больше нигде в продукте нет. И объявлено дважды,
   светлой темой и тёмной, — тема переключается классом на body (style.css:67), а
   не медиазапросом, поэтому переопределять надо так же. */

.pkg-container {
  --pkg-yes: #1E6640; --pkg-yes-bg: #E7F5EC;
  --pkg-maybe: #8A6D1F; --pkg-maybe-bg: #FDF2E0;
  --pkg-no: #9B2C24; --pkg-no-bg: #FBEAEA;
  padding: 22px 26px 80px;
  overflow-y: auto;
}
body.dark .pkg-container, [data-theme="noir"] .pkg-container {
  --pkg-yes: #9BE3BC; --pkg-yes-bg: #1E3A2A;
  --pkg-maybe: #E8CC85; --pkg-maybe-bg: #3A3122;
  --pkg-no: #F0AAA3; --pkg-no-bg: #3A2422;
}

.pkg-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.pkg-h { font-size: var(--t-h1, 22px); font-weight: 600; }
.pkg-head-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.pkg-mute { color: var(--muted); }
.pkg-warn { color: var(--danger); }

/* ── список пакетов ── */

.pkg-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.pkg-card {
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface); padding: 14px 16px; cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.pkg-card:hover { background: var(--hover); }
.pkg-card-top { display: flex; align-items: baseline; gap: 10px; }
.pkg-card-title { font-weight: 600; font-size: 16px; flex: 1; }
.pkg-card-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pkg-card-to { margin-top: 2px; }
.pkg-card-meta { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.pkg-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.pkg-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--hover); }
.pkg-chip-mute { color: var(--muted); }
.pkg-chip-link { background: var(--pkg-yes-bg); color: var(--pkg-yes); }
.pkg-v-yes   { background: var(--pkg-yes-bg);   color: var(--pkg-yes); }
.pkg-v-maybe { background: var(--pkg-maybe-bg); color: var(--pkg-maybe); }
.pkg-v-no    { background: var(--pkg-no-bg);    color: var(--pkg-no); }

.pkg-empty {
  max-width: 620px; margin: 40px auto; text-align: center;
  color: var(--muted); line-height: 1.6;
}
.pkg-empty-h { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }

/* ── один пакет ── */

.pkg-about {
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface); padding: 14px 16px; margin-bottom: 20px;
}
.pkg-about-note { margin-top: 6px; white-space: pre-wrap; }
.pkg-about-term { margin-top: 6px; font-size: 13px; }
.pkg-sharebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.pkg-share { display: flex; align-items: center; gap: 6px; flex: 1 1 320px; }
.pkg-share .mdb-share-input { flex: 1; min-width: 180px; }

.pkg-views-btn {
  font: inherit; cursor: pointer; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: inherit;
}
.pkg-views { margin-top: 10px; flex-basis: 100%; }
.pkg-views-row { display: flex; gap: 12px; font-size: 13px; padding: 3px 0; color: var(--muted); }
.pkg-views-ip { font-family: var(--mono); font-size: 12px; }
.pkg-views-more { font-style: italic; }

.pkg-rows-head {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.pkg-rows-head button { margin-left: auto; }

.pkg-row { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
.pkg-row-cover {
  width: 84px; height: 112px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--hover); display: flex; align-items: center; justify-content: center;
}
.pkg-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.pkg-row-nocover { font-size: 11px; color: var(--muted); }
.pkg-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pkg-row-name { font-weight: 600; }
.pkg-row-photos { font-size: 13px; color: var(--muted); }
.pkg-book-sel, .pkg-book-btn { max-width: 280px; }
.pkg-row-note { max-width: 480px; }
.pkg-row-side { width: 260px; flex: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.pkg-row-order { display: flex; gap: 4px; }

.pkg-answer {
  width: 100%; font-size: 13px; padding: 8px 10px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.pkg-answer i { font-style: normal; font-size: 11px; opacity: 0.75; }
.pkg-answer-none { color: var(--muted); background: var(--hover); }

/* ── выбор моделей в диалоге ── */

.pkg-picks { max-height: 46vh; overflow-y: auto; margin-top: 10px; }
.pkg-pick {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.pkg-pick:hover { background: var(--hover); }
.pkg-pick i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }

@media (max-width: 760px) {
  .pkg-container { padding: 16px 14px 70px; }
  .pkg-row { flex-wrap: wrap; }
  .pkg-row-side { width: 100%; align-items: stretch; }
}