/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Блок «Материалы» (классы pm-): зона загрузки, очередь с прогрессом, список загруженного. Значения — только из tokens.css, размеры в rem.
   Подключается в index.html после project-add.css. Блок лежит в плитке (вкладка «Настройки») и в окне «Добавить проект»:
   внутри плитки рамок по всем сторонам нет — зона и сообщения на фоне вложенного элемента (--surface-inner), строки отделены линиями. */

.pjs-wrap { display: grid; gap: var(--tile-gap); min-width: 0; }
.pm { display: grid; gap: var(--space-4); min-width: 0; color: var(--color-ink); }
.pm [hidden] { display: none; }
.pm-h { margin: 0; }
.pm-intro { margin: 0; overflow-wrap: anywhere; }

/* ---------- Сообщение о недоступной загрузке ---------- */
.pm-notice { border: 0; background: var(--surface-inner); border-radius: var(--inner-radius); }
.pm-note { margin: 0; color: var(--color-warn-text); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }

/* ---------- Зона перетаскивания ---------- */
.pm-drop {
  display: grid; justify-items: center; gap: var(--space-2); box-sizing: border-box; min-width: 0;
  padding: var(--space-6) var(--space-5); text-align: center;
  background: var(--surface-inner); border-radius: var(--inner-radius);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.pm-drop[data-over="true"] { background: var(--color-acc-soft); outline: var(--size-focus-width) dashed var(--color-acc); outline-offset: calc(var(--size-focus-width) * -2); }
.pm-drop__ic { width: var(--size-icon-lg); height: var(--size-icon-lg); color: var(--color-ink3); }
.pm-drop[data-over="true"] .pm-drop__ic { color: var(--color-acc-soft-text); }
.pm-drop__t { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); overflow-wrap: anywhere; }
.pm-drop__h { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pm-choose { margin-top: var(--space-2); }
.pm-file { display: none; }

/* ---------- Очередь и загруженное ---------- */
.pm-sec { display: grid; gap: var(--space-2); min-width: 0; }
.pm-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; }
.pm-sec__t { margin: 0; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); }
.pm-all { flex: none; }
.pm-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; min-width: 0; }
.pm-item { display: grid; gap: var(--space-2); padding: var(--space-3) 0; min-width: 0; }
.pm-item + .pm-item { border-top: 1px solid var(--color-line); }
.pm-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); min-width: 0; }
.pm-item__name { min-width: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); overflow-wrap: anywhere; }
.pm-item__size { flex: none; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); white-space: nowrap; }
.pm-item__st { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; min-width: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pm-item__st .ic { flex: none; width: var(--size-icon); height: var(--size-icon); }
.pm-item[data-status="done"] .pm-item__st .ic { color: var(--color-ok-text); }
.pm-item__err, .pm-item__err .ic { color: var(--color-danger-text); }
.pm-item__names { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pm-item__p { display: grid; gap: var(--space-1); min-width: 0; }
.pm-item__a { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.pm-item__a:empty { display: none; }
.pm-btn { min-height: var(--size-touch-min); }

/* ---------- Прогресс ---------- */
.pm-bar { display: block; width: 100%; height: var(--space-2); appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--color-line2); overflow: hidden; accent-color: var(--color-acc); }
.pm-bar::-webkit-progress-bar { background: var(--color-line2); border-radius: var(--radius-pill); }
.pm-bar::-webkit-progress-value { background: var(--color-acc); border-radius: var(--radius-pill); }
.pm-bar::-moz-progress-bar { background: var(--color-acc); border-radius: var(--radius-pill); }

.pm .btn:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* ---------- Окно «Добавить проект»: шаг «Материалы» ---------- */
.pa-materials { display: grid; gap: var(--space-4); min-width: 0; }
.pa-materials__lead { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.pa-materials__wait { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }

@media (max-width: 47.9375rem) {
  .pm-drop { padding: var(--space-5) var(--space-4); }
  .pm-choose { width: 100%; }
  .pm-item__a .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-drop { transition: none; }
}