/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экран «Проекты» (макет C2): сводка, сегменты со счётчиками и сетка стеклянных плиток. Подключён в index.html после overview.css;
   значения — только из tokens.css, размеры в rem. Плитка — общий класс .tile из base.css (на ссылке class="tile prj-tile").
   Заголовок экрана и ошибка связи — общие, лежат в screens.css. Префикс prj- (pj- занят листом «Проект» в project.css).
   Ниже, после плиток, остались строки .plist/.pcard__*: их использует экран «Обзор». */

/* ---------- Сводка под заголовком ---------- */
.prj-sum { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.prj-sum[hidden] { display: none; }
.prj-sum__a { color: var(--color-ink); font-weight: var(--weight-medium); }

/* ---------- Сегменты: таблетки со счётчиками вместо подчёркнутых вкладок kit ---------- */
.prj-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-5); }
.prj-bar[hidden] { display: none; }
.prj-hint { margin: 0; }
.ui-seg.prj-seg { gap: var(--space-2); border-bottom: 0; }
.prj-seg .ui-seg__b {
  padding-inline: var(--space-4); border-radius: var(--radius-pill); white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.prj-seg .ui-seg__b::after { display: none; }
.prj-seg .ui-seg__b:hover:not(:disabled) { background: var(--color-panel2); }
.prj-seg .ui-seg__b[aria-selected="true"] { background: var(--color-ink); color: var(--color-bg); }
.prj-seg .ui-seg__b[aria-selected="true"] .ui-seg__n { color: inherit; }
.prj-seg .ui-seg__b:focus-visible { border-radius: var(--radius-pill); }

/* ---------- Сетка плиток ---------- */
.prj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr)); gap: var(--tile-gap); list-style: none; margin: 0; padding: 0; }
.prj-grid > li { display: flex; min-width: 0; }
.prj-tile {
  --prj-tone: var(--color-ink3);
  display: grid; align-content: start; gap: var(--space-3); width: 100%; min-height: var(--size-touch-min);
  color: inherit; text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.prj-tile > * { min-width: 0; }
.prj-tile:hover { transform: translateY(calc(var(--space-1) * -1)); background-image: linear-gradient(var(--surface-inner-hover), var(--surface-inner-hover)); border-color: var(--color-line2); }
.prj-tile:focus-visible { border-radius: var(--tile-radius); }
.prj-tile[data-state="awaiting"], .prj-tile[data-state="warning"] { --prj-tone: var(--color-warn); }
.prj-tile[data-state="running"] { --prj-tone: var(--color-acc); }
.prj-tile[data-state="done"] { --prj-tone: var(--color-ok); }
.prj-tile[data-state="stopped"] { --prj-tone: var(--color-danger); }

.prj-tile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--size-icon); }
.prj-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink); }
.prj-badge {
  flex: none; display: inline-grid; place-items: center; min-width: var(--size-icon); height: var(--size-icon); padding-inline: var(--space-1);
  border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-bg); font: var(--weight-medium) var(--text-label-size)/1 var(--font-sans);
}
.prj-status { display: flex; }
.prj-doing { display: block; overflow-wrap: anywhere; }

.prj-stage { display: grid; gap: var(--space-2); }
.prj-stage__t { color: var(--color-ink2); }
.prj-meter {
  display: block; width: 100%; height: var(--space-1); border: 0; border-radius: var(--radius-pill); overflow: hidden;
  appearance: none; -webkit-appearance: none; background: var(--color-line2); color: var(--prj-tone);
}
.prj-meter::-webkit-progress-bar { background: var(--color-line2); border-radius: var(--radius-pill); }
.prj-meter::-webkit-progress-value { background: var(--prj-tone); border-radius: var(--radius-pill); }
.prj-meter::-moz-progress-bar { background: var(--prj-tone); border-radius: var(--radius-pill); }

.prj-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--color-ink2); }
.prj-meta__i { min-width: 0; overflow-wrap: anywhere; }
.prj-meta .mono { font-size: inherit; color: var(--color-ink); }
.prj-meta__i[data-kind="rc"]::before {
  content: ""; display: inline-block; width: var(--size-status-dot); height: var(--size-status-dot); margin-right: var(--space-2);
  border-radius: var(--radius-round); background: var(--color-ink3); vertical-align: middle;
}
.prj-meta__i[data-rc="active"]::before { background: var(--color-ok); }
.prj-meta__i[data-rc="starting"]::before { background: var(--color-warn); }
.prj-meta__i[data-rc="failed"]::before { background: var(--color-danger); }

.prj-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--surface-edge); color: var(--color-ink3);
}
.prj-foot__c { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.prj-foot .mono { font-size: inherit; }

@media (max-width: 47.9375rem) {
  .prj-hint { display: none; }
  .ui-seg.prj-seg { gap: var(--space-1); }
  .prj-seg .ui-seg__b { padding-inline: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .prj-tile, .prj-seg .ui-seg__b { transition: none; }
  .prj-tile:hover { transform: none; }
}

/* ---------- Строки списка: экран «Обзор» (решения и «Идёт сейчас») ---------- */
.plist, .list.plist { display: grid; gap: 0; }
.plist > li, .list.plist > li { display: block; padding: 0; min-height: 0; }
.plist > li { border-top: 1px solid var(--color-line); }
.list.plist > li:first-child { border-top: 0; }
.plist > li:hover { background: var(--color-panel2); }
.pcard__a {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
  height: 100%; min-height: var(--size-control); padding: var(--space-4) var(--space-6);
  color: inherit; text-decoration: none;
}
.pcard__a:focus-visible { outline-offset: calc(var(--size-focus-offset) * -1); }
.pcard__main { flex: 1 1 10rem; min-width: 0; display: grid; gap: var(--space-1); }
.pcard__meta { color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pcard__meta .mono { font-size: inherit; color: inherit; }
.pcard__name { overflow-wrap: anywhere; }
.pcard__now { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pcard__counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-1); color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.pcard__counts .mono { font-size: inherit; color: inherit; }
.pcard__side { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1) var(--space-4); }
.pcard__time { white-space: nowrap; color: var(--color-ink3); font-size: var(--text-label-size); }
@media (max-width: 40rem) {
  .pcard__a { padding: var(--space-4); }
  .pcard__side { margin-left: 0; justify-content: flex-start; }
}

/* Блок групп прежнего вида экрана: на него ещё ссылается проверка каркаса (tests/pult-shell.test.mjs). */
.pgroups { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }