/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Вкладка проекта «Файлы»: «Что изменилось», дерево, просмотр файла и дифф. Файл подключён в index.html после project.css;
   значения — только из tokens.css, шрифты в rem, обе темы через переменные. Плитки и вложенные блоки — общий kit (.tile, .tile__inner, .ui-chip). */

.pfx { display: grid; gap: var(--tile-gap); grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.pfx__main { display: grid; gap: var(--tile-gap); min-width: 0; }
.pfx__side { min-width: 0; }
.pfx__tile { display: grid; gap: var(--space-3); align-content: start; }

/* ---------- Шапка плитки ---------- */
.pfx__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; }
.pfx__title { min-width: 0; display: grid; gap: var(--space-1); }
.pfx__title .caption { margin: 0; overflow-wrap: anywhere; }
.pfx__title h2 { margin: 0; }
.pfx__title h2:focus-visible { border-radius: var(--radius-xs); }
.pfx__path { color: var(--color-ink2); overflow-wrap: anywhere; }
.pfx__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); margin-left: auto; }
.pfx__sum { margin: 0; display: inline-flex; gap: var(--space-2); font: var(--weight-medium) var(--text-caption-size)/var(--text-caption-line) var(--font-num); font-variant-numeric: var(--num-features); }
.pfx__add { color: var(--color-ok-text); }
.pfx__del { color: var(--color-danger-text); }
.pfx__body { min-width: 0; }
.pfx__note { margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); max-width: var(--layout-measure); }
.pfx__note + .pfx__note, .pfx__list + .pfx__note, .pfx__tree + .pfx__note { margin-top: var(--space-3); }
.pfx__meta { margin: 0; color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.pfx__meta:empty { display: none; }

/* ---------- Список изменений ---------- */
.pfx__list, .pfx__tree { list-style: none; margin: 0; padding: 0; min-width: 0; }
.pfx__list > li + li { border-top: 1px solid var(--color-line); }
.pfx__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  width: 100%; min-height: var(--size-touch-min); padding: var(--space-2) var(--space-3);
  background: transparent; border: 0; border-radius: var(--inner-radius); text-align: left; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.pfx__row:hover { background: var(--surface-inner-hover); }
.pfx__row[aria-current="true"], .pfx__node[aria-current="true"] { background: var(--surface-inner); }
.pfx__name { min-width: 0; overflow-wrap: anywhere; } /* шрифт и цвет — класс .code из base.css */
.pfx__cnt { display: inline-flex; gap: var(--space-2); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-num); font-variant-numeric: var(--num-features); white-space: nowrap; }

/* ---------- Дерево ---------- */
.pfx__tree--in { margin-left: var(--space-3); padding-left: var(--space-3); border-left: 1px solid var(--color-line); }
.pfx__node {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--size-touch-min); padding: var(--space-1) var(--space-3);
  background: transparent; border: 0; border-radius: var(--inner-radius); text-align: left; color: var(--color-ink); cursor: pointer;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.pfx__node:hover { background: var(--surface-inner-hover); }
.pfx__node .ic { color: var(--color-ink3); }
.pfx__label { min-width: 0; overflow-wrap: anywhere; }
.pfx__size { margin-left: auto; color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-num); white-space: nowrap; }
.pfx__caret { flex: none; width: var(--space-3); height: var(--space-3); display: inline-block; }
.pfx__node--dir .pfx__caret {
  border-block: var(--space-1) solid transparent; border-inline-start: var(--space-2) solid var(--color-ink3);
  width: 0; height: 0; margin-inline-end: var(--space-1); transition: transform var(--duration-fast) var(--ease-out);
}
.pfx__node--dir[aria-expanded="true"] .pfx__caret { transform: rotate(90deg); }

/* ---------- Просмотр: код и дифф ---------- */
.pfx__seg { min-width: 0; overflow-x: auto; }
.pfx__code-wrap { min-width: 0; }
pre.pfx__code {
  --pfx-gutter: 4ch;
  margin: 0; max-height: min(70vh, 40rem); overflow: auto; padding: var(--space-3) 0; counter-reset: pfx-ln;
  background: var(--surface-inner); border-radius: var(--inner-radius); color: var(--color-ink);
  font: var(--text-mono-weight) var(--text-mono-size)/var(--text-mono-line) var(--font-mono); tab-size: 4;
}
.pfx__code code { display: block; min-width: max-content; font: inherit; }
.pfx__l { display: block; padding-inline: var(--space-3); white-space: pre; }
.pfx__code:not([data-diff]) .pfx__l { counter-increment: pfx-ln; }
.pfx__code:not([data-diff]) .pfx__l::before, .pfx__l[data-n]::before {
  display: inline-block; min-width: var(--pfx-gutter); margin-inline-end: var(--space-3); text-align: right; opacity: .7; user-select: none;
}
.pfx__code:not([data-diff]) .pfx__l::before { content: counter(pfx-ln); color: var(--color-ink3); opacity: 1; }
.pfx__l[data-n]::before { content: attr(data-n); }
.pfx__l[data-k="add"] { background: var(--color-ok-soft); color: var(--color-ok-soft-text); }
.pfx__l[data-k="del"] { background: var(--color-danger-soft); color: var(--color-danger-soft-text); }
.pfx__l[data-k="hunk"], .pfx__l[data-k="note"] {
  margin-block: var(--space-1); color: var(--color-ink3); white-space: normal;
  font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans);
}
.pfx__l[data-k="note"] { font-style: italic; }
.pfx__sg { display: inline-block; width: 1.5ch; user-select: none; }
.pfx__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.pfx__foot:empty { display: none; }
.pfx__foot .caption { margin: 0; }
.pfx__idle { margin: 0; color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); max-width: var(--layout-measure); }
.pfx__view:not(.pfx__view--idle) .pfx__idle { display: none; }
.pfx__view--idle .pfx__meta, .pfx__view--idle .pfx__code-wrap, .pfx__view--idle .pfx__foot { display: none; }

/* ---------- Широкий экран: списки слева, просмотр справа ---------- */
@media (min-width: 64rem) {
  .pfx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pfx__side { position: sticky; top: calc(var(--layout-topbar) + var(--space-4)); }
  .pfx__code { max-height: min(75vh, 48rem); }
}

/* ---------- Телефон: пустой просмотр не занимает места ---------- */
@media (max-width: 63.99rem) {
  .pfx__view--idle { display: none; }
  .pfx__row { grid-template-columns: auto minmax(0, 1fr); }
  .pfx__cnt { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .pfx__row, .pfx__node, .pfx__node--dir .pfx__caret { transition: none; }
}