/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Страница проекта: шапка, обзор, задачи, отчёты, настройки, выбор проекта для новой задачи.
   Файл подключён в index.html после screens.css; значения — только из tokens.css, шрифты в rem, обе темы через переменные.
   Размер заголовка внутри проекта задаёт shell.css (.screen[data-screen="project"] .page-title). */

/* ---------- Шапка: название, ниже тип и статус одной строкой ---------- */
.pj-head { gap: var(--space-2); margin-bottom: var(--space-5); }
.pj-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; min-width: 0; }
.pj-kind__t { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.pj-kind__t::after { content: '·'; margin-left: var(--space-3); color: var(--color-ink3); }

/* ---------- Тело вкладки ---------- */
.pj-body { display: grid; gap: var(--space-8); min-width: 0; }
.pj-over { display: grid; gap: var(--space-8); min-width: 0; }
.pj-sec { min-width: 0; }
.pj-now { color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); max-width: var(--layout-measure); overflow-wrap: anywhere; }
.pj-chatlink { margin: 0; }
.pj-pick { margin-bottom: var(--space-4); max-width: var(--layout-measure); }
.pj-list { max-width: none; }

/* ---------- Строка задачи и отчёта: название слева, статус справа; время и дата мелко и серым ---------- */
.trow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
  min-height: var(--size-control); padding: var(--space-4) var(--space-6);
}
.trow__main { flex: 1 1 10rem; min-width: 0; display: grid; gap: var(--space-1); }
.trow__name { overflow-wrap: anywhere; }
.trow__meta { color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.trow__meta .mono { font-size: inherit; color: inherit; }
.trow__sum {
  color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
  max-width: var(--layout-measure); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.trow__side { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1) var(--space-4); }
.trow--report { align-items: flex-start; }

/* ---------- Пустые состояния внутри вкладки ---------- */
.pj-body .empty { max-width: none; }

/* ---------- Настройки проекта: раздел «Скиллы» ---------- */
.sk { display: grid; gap: var(--space-4); min-width: 0; }
.sk .dsec__top { margin-bottom: 0; }
.sk__lead { max-width: var(--layout-measure); }
.sk__warn { max-width: none; }
.sk__sub { margin-bottom: var(--space-2); }
.sk__addwrap { min-width: 0; }
.sk__add:empty, .sk__panel:empty, .sk__status:empty { display: none; }
.sk__add, .sk__panel { display: grid; gap: var(--space-3); min-width: 0; }
.sk__listbox { min-width: 0; }
.sk__listbox .empty { max-width: none; }
.sk__listbox[aria-busy="true"] .sk__list { opacity: .85; }

/* Строка скилла: имя и метки, ниже источник и версия, затем кнопки. Внимание выделяет слово и значок, не заливка. */
.list.sk__list > li.sk__row { display: grid; gap: var(--space-3); align-items: start; justify-content: stretch; padding: var(--space-4) var(--space-6); }
.sk__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; }
.sk__name { overflow-wrap: anywhere; min-width: 0; }
.sk__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.sk__facts { display: grid; gap: var(--space-1) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0; min-width: 0; }
.sk__facts > div { display: grid; gap: var(--space-1); min-width: 0; }
.sk__facts dt { color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.sk__facts dd { margin: 0; color: var(--color-ink); font: var(--text-ui-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.sk__note { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); max-width: var(--layout-measure); overflow-wrap: anywhere; }
.sk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sk__confirm { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg2); }
a.sk__src { min-height: var(--size-touch-min); text-decoration: underline; }

/* Строка результата действия */
.sk__result { display: flex; align-items: flex-start; gap: var(--space-2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.sk__result .ic { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; }
.sk__result--ok { color: var(--color-ink2); }
.sk__result--ok .ic { color: var(--color-ok-text); }
.sk__result--danger { color: var(--color-danger-text); }

/* ---------- Потоки «Скиллы»: форма ссылки, карточки предпросмотра, показа и диффа (project-skills-flows.js) ---------- */
.skf__form { display: grid; gap: var(--space-4); min-width: 0; max-width: var(--layout-narrow); }
.skf__field { display: grid; gap: var(--space-2); min-width: 0; }
.skf__label { color: var(--color-ink); }
.skf__two { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.skf__input {
  width: 100%; min-width: 0; min-height: var(--size-control); padding: 0 var(--space-3);
  background: var(--color-bg2); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-md);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.skf__input::placeholder { color: var(--color-ink3); opacity: 1; }
.skf__input:hover { border-color: var(--color-ink3); }
.skf__input[aria-invalid="true"] { border-color: var(--color-danger-text); }
.skf__err { margin: 0; color: var(--color-danger-text); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.skf__err:empty { display: none; }
.skf__err > span { display: flex; align-items: flex-start; gap: var(--space-2); }
.skf__err .ic { width: 1rem; height: 1rem; margin-top: 0.1rem; }

.skf__slot { min-width: 0; }
.skf__slot:empty, .skf__note:empty { display: none; }
.sk__panel:has(> .skf__slot:empty):has(> .skf__note:empty) { display: none; }
.skf__note { display: flex; align-items: flex-start; gap: var(--space-2); 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; }
.skf__note .ic { width: 1rem; height: 1rem; margin-top: 0.1rem; }
.skf__note[data-tone="ok"] .ic { color: var(--color-ok-text); }
.skf__note[data-tone="danger"] { color: var(--color-danger-text); }

.skf { display: grid; gap: var(--space-5); min-width: 0; }
.skf.card > * + * { margin-top: 0; }
.skf__title { overflow-wrap: anywhere; }
.skf__body { display: grid; gap: var(--space-5); min-width: 0; }
.skf__sec { display: grid; gap: var(--space-2); min-width: 0; }
.skf__h { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.skf__facts { margin: 0; }
.skf__src { display: grid; gap: var(--space-1); min-width: 0; }
.skf__srcname, .skf__url { overflow-wrap: anywhere; }
a.skf__a { text-decoration: underline; overflow-wrap: anywhere; }
.skf__disc { margin: 0; }
.skf__same { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.skf__same .ic { color: var(--color-ok-text); }

/* Файлы и находки: список с прокруткой по высоте, длинные пути переносятся */
.skf__scroll, .skf__pre { max-height: 20rem; overflow: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg2); min-width: 0; }
.skf__scroll { padding: var(--space-1) 0; }
.skf__files, .skf__finds { display: grid; gap: 0; margin: 0; padding: 0; list-style-type: none; min-width: 0; }
.skf__file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-4); min-width: 0; }
.skf__file + .skf__file { border-top: 1px solid var(--color-line); }
.skf__file .ic { width: 1rem; height: 1rem; color: var(--color-warn-text); }
.skf__path { overflow-wrap: anywhere; min-width: 0; }
.skf__size { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); font-variant-numeric: tabular-nums; }
.skf__flag { color: var(--color-warn-text); font: var(--text-ui-strong-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.skf__finds { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg2); }
.skf__find { display: grid; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); min-width: 0; }
.skf__find + .skf__find { border-top: 1px solid var(--color-line); }
.skf__lvl { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); color: var(--color-ink); }
.skf__lvl .ic { width: 1rem; height: 1rem; }
.skf__find--danger .skf__lvl .ic { color: var(--color-danger-text); }
.skf__find--warn .skf__lvl .ic { color: var(--color-warn-text); }
.skf__find--info .skf__lvl .ic { color: var(--color-ink3); }
.skf__fbody { display: grid; gap: var(--space-1); min-width: 0; }
.skf__fwhere { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--color-ink2); overflow-wrap: anywhere; }
.skf__fmsg { color: var(--color-ink); font: var(--text-ui-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.skf__fex { display: block; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--color-ink2); }

/* SKILL.md и дифф: текст как есть, ограниченная высота, прокрутка и фокус с клавиатуры */
pre.skf__pre { margin: 0; padding: var(--space-3) var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-ink); font: var(--text-mono-weight) var(--text-mono-size)/var(--text-mono-line) var(--font-mono); }
pre.skf__diff { white-space: pre; overflow-wrap: normal; }
.skf__ln--add { color: var(--color-ok-text); }
.skf__ln--del { color: var(--color-danger-text); }
.skf__chg { display: grid; gap: var(--space-2); min-width: 0; }
.skf__chg + .skf__chg { margin-top: var(--space-3); }

/* Подтверждение: причины и галочка */
.skf__extra { align-items: flex-start; max-width: none; }
.skf__extrabody { display: grid; gap: var(--space-2); min-width: 0; flex: 1 1 12rem; }
.skf__reasons { margin: 0; padding-left: var(--space-5); }
.skf__check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--size-touch-min); padding: var(--space-2) 0; cursor: pointer; color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.skf__cb { flex: none; width: var(--size-icon); height: var(--size-icon); margin: var(--space-1) 0 0; accent-color: var(--color-acc); cursor: pointer; }
.skf__acts .btn { white-space: normal; text-align: center; }
.skf[aria-busy="true"] .skf__body { opacity: .85; }

@media (max-width: 40rem) {
  .list.sk__list > li.sk__row { padding: var(--space-4); }
  .sk__acts .btn { flex: 1 1 auto; }
  .skf.card { padding: var(--space-4); }
  .skf__file { padding: var(--space-2) var(--space-3); }
  .skf__pre, .skf__scroll { max-height: 16rem; }
}

/* ---------- Вкладки «Сейчас», «Отчёты», «Настройки» и отчёт задачи: плитки макета C2 ---------- */
.pjn, .pjr, .pjs, .pjt { display: grid; gap: var(--tile-gap); min-width: 0; }
.pjn-bh { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.pjn-bh .caption, .pjn-sum .caption { margin: 0; }
.pjn-h { margin: 0; }
.pjn-blk > .dsec__none { margin: 0; }

/* Сводка «Сейчас в работе» */
.pjn-sum { display: grid; gap: var(--space-4); min-width: 0; }
.pjn-sum__t { display: grid; gap: var(--space-2); min-width: 0; }
.pjn-sum__w { margin: 0; overflow-wrap: anywhere; }
.pjn-sum__p { display: grid; gap: var(--space-2); max-width: var(--layout-narrow); }
.pjn-sum__p .mono { margin: 0; }
.pjn-sum__a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; }
.pjn-bar { appearance: none; -webkit-appearance: none; width: 100%; height: var(--space-2); border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-panel2); color: var(--color-acc); }
.pjn-bar::-webkit-progress-bar { background: var(--color-panel2); }
.pjn-bar::-webkit-progress-value { background: var(--color-acc); border-radius: var(--radius-pill); }
.pjn-bar::-moz-progress-bar { background: var(--color-acc); border-radius: var(--radius-pill); }

.pjn-cols { display: grid; gap: var(--tile-gap); min-width: 0; }
.pjn-col { display: grid; gap: var(--tile-gap); align-content: start; min-width: 0; }
@media (min-width: 64rem) {
  .pjn-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Путь задачи */
.pjn-path { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pjn-path > li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch-min); min-width: 0; }
.pjn-path > li + li { border-top: 1px solid var(--color-line); }
.pjn-path__i { display: inline-flex; flex: none; color: var(--color-ok-text); }
.pjn-path > li[data-now] .pjn-path__i { color: var(--color-acc-text); }
.pjn-path__t { overflow-wrap: anywhere; min-width: 0; }

/* Требует внимания */
.pjn-att { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pjn-att > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: var(--size-touch-min); padding: var(--space-2) 0; min-width: 0; }
.pjn-att > li + li { border-top: 1px solid var(--color-line); }
.pjn-att__i { display: inline-flex; flex: none; color: var(--color-warn-text); }
.pjn-att__t { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

/* Исполнители: строка, по нажатию — подробности */
.pjn-exl { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pjn-ex { min-width: 0; }
.pjn-ex + .pjn-ex { border-top: 1px solid var(--color-line); }
.pjn-ex__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: var(--size-touch-min); padding: var(--space-2) 0; min-width: 0; }
.pjn-ex__n { overflow-wrap: anywhere; min-width: 0; }
summary.pjn-ex__row { cursor: pointer; list-style: none; }
summary.pjn-ex__row::-webkit-details-marker { display: none; }
summary.pjn-ex__row::after { content: '›'; margin-left: auto; color: var(--color-ink3); transition: transform var(--duration-fast) var(--ease-out); }
details[open] > summary.pjn-ex__row::after { transform: rotate(90deg); }
.pjn-ex__warn { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-warn-text); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pjn-ex__warn .ic { margin-top: 0.1rem; }
.pjn-facts { display: grid; gap: var(--space-2) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0 0 var(--space-3); min-width: 0; }
.pjn-facts > div { display: grid; gap: var(--space-1); min-width: 0; }
.pjn-facts dt, .pjn-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Лента событий */
.pjn-feed { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pjn-feed > li { display: grid; grid-template-columns: minmax(2.75rem, auto) var(--size-icon) minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-2) 0; min-width: 0; }
.pjn-feed > li[hidden] { display: none; }
.pjn-feed > li + li { border-top: 1px solid var(--color-line); }
.pjn-feed__t { white-space: nowrap; color: var(--color-ink2); }
.pjn-feed__i { display: inline-flex; margin-top: 0.1rem; color: var(--color-ink3); }
.pjn-feed > li[data-tone="ok"] .pjn-feed__i { color: var(--color-ok-text); }
.pjn-feed > li[data-tone="warn"] .pjn-feed__i { color: var(--color-warn-text); }
.pjn-feed > li[data-tone="bad"] .pjn-feed__i { color: var(--color-danger-text); }
.pjn-feed__x { overflow-wrap: anywhere; min-width: 0; }
.pjn-blk > .btn--text { margin-top: var(--space-2); }

/* Отчёты: строка работы — название и дата, состояние, «Открыть» */
.pjr-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pjr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--size-control); padding: var(--space-3) 0; min-width: 0; }
.pjr-row + .pjr-row { border-top: 1px solid var(--color-line); }
.pjr-row__m { flex: 1 1 12rem; display: grid; gap: var(--space-1); min-width: 0; }
.pjr-row__m p { margin: 0; }
.pjr-row__t { overflow-wrap: anywhere; }

/* Настройки: подпись слева, значение справа */
.pjs-list { display: grid; gap: 0; margin: 0; }
.pjs-row { display: grid; gap: var(--space-1) var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: baseline; padding: var(--space-3) 0; min-width: 0; }
.pjs-row + .pjs-row { border-top: 1px solid var(--color-line); }
.pjs-row__k, .pjs-row__v { margin: 0; overflow-wrap: anywhere; }
.pjs-row__k { color: var(--color-ink2); }
@media (min-width: 40rem) {
  .pjs-row { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); }
}

/* Отчёт задачи: шапка и четыре раздела */
.pjt-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.pjt-head__t { display: grid; gap: var(--space-2); min-width: 0; flex: 1 1 14rem; }
.pjt-head__t p { margin: 0; }
.pjt-head__n { overflow-wrap: anywhere; }
.pjt-head__s { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pjt-grid { display: grid; gap: var(--tile-gap); min-width: 0; }
.pjt-sec { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.pjt-sec__x { margin: 0; max-width: var(--layout-measure); overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .pjt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Узкий экран (390 px) ---------- */
@media (max-width: 40rem) {
  .pjr-row .btn { flex: 1 1 100%; }
  .pjt-head__s .btn { flex: 1 1 auto; }
  .pjn-sum__a .btn { flex: 1 1 100%; }
  .trow { padding: var(--space-4); }
  .trow__side { margin-left: 0; justify-content: flex-start; }
  .pj-body, .pj-over { gap: var(--space-6); }
  .pj-chatlink .btn { width: 100%; }
}