/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Канбан, граф и паспорт прогона (лид L4): project-run-views.js, project-run-passport.js. Стекло — .tile / .tile__inner из base.css,
   значения — только из tokens.css. Телефон — меньше 48rem. Движение — только transform и opacity; при prefers-reduced-motion его нет.
   ПОДКЛЮЧЕНИЕ: <link rel="stylesheet" href="/css/project-run-views.css"> в index.html (закрыт) — патч в отчёте. */

/* ---------- Общее: риски, пустые состояния ---------- */
.rv-risks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.rv-risks[hidden] { display: none; }
.rv-risk {
  display: inline-flex; align-items: center; min-height: var(--space-5); padding-inline: var(--space-2);
  border-radius: var(--radius-pill); background: var(--color-panel2); color: var(--color-ink2);
  font: var(--weight-medium) var(--text-label-size)/1.2 var(--font-sans); white-space: nowrap;
}
.rv-risk[data-tone="warn"] { background: var(--color-warn-soft); color: var(--color-warn-soft-text); }
.rv-risk[data-tone="danger"] { background: var(--color-danger-soft); color: var(--color-danger-soft-text); }
.rv-empty, .rv-col__none, .rv-panel__none { margin: 0; color: var(--color-ink3); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.rv-empty[hidden], .rv-col__none[hidden], [hidden].rv-graph__body, [hidden].rv-kanban__cols, .rv-panel[hidden] { display: none; }

/* ---------- Канбан ---------- */
.rv-kanban__cols { display: grid; grid-template-columns: repeat(5, minmax(13rem, 1fr)); gap: var(--tile-gap); align-items: start; overflow-x: auto; }
.rv-col { display: grid; gap: var(--space-3); align-content: start; }
.rv-col__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.rv-col__t { margin: 0; font: var(--text-h3-weight) var(--text-ui-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); }
.rv-col__n {
  min-width: var(--space-6); padding-inline: var(--space-2); text-align: center; border-radius: var(--radius-pill);
  background: var(--surface-inner); color: var(--color-ink2); font: var(--weight-medium) var(--text-label-size)/var(--space-6) var(--font-num); font-variant-numeric: tabular-nums;
}
.rv-col[data-col="blocked"] .rv-col__n:not([data-n="0"]) { background: var(--color-danger-soft); color: var(--color-danger-soft-text); }
.rv-col__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.rv-card { display: grid; gap: var(--space-1); padding: var(--space-3); position: relative; will-change: transform; }
.rv-card__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.rv-card__id { white-space: nowrap; color: var(--color-ink3); font: var(--weight-medium) var(--text-label-size)/1.2 var(--font-num); font-variant-numeric: tabular-nums; }
.rv-card__st { color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/1.2 var(--font-sans); text-align: right; }
.rv-card__t { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }
.rv-card__who { margin: 0; color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/1.3 var(--font-sans); }
.rv-card .rv-risks { margin-top: var(--space-1); }
.rv-card[data-state="running"] .rv-card__st { color: var(--color-acc-text); }
.rv-card[data-state="done"] .rv-card__st { color: var(--color-ok-text); }
.rv-card[data-state="stopped"] .rv-card__st { color: var(--color-danger-text); }
.rv-card[data-running="true"]::after, .rv-node[data-running="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--color-acc); opacity: 0; animation: rv-pulse var(--duration-ambient) var(--ease-in-out) infinite;
}
@keyframes rv-pulse { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }

/* ---------- Граф ---------- */
.rv-graph__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tile-gap); align-items: start; }
.rv-graph[data-panel="true"] .rv-graph__body { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); }
.rv-graph__scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-block: var(--space-6) var(--space-2); }
.rv-canvas { position: relative; min-width: max-content; }
.rv-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rv-edge {
  stroke: var(--color-line2); stroke-width: 1.5; stroke-linecap: round; opacity: .9;
  transition: stroke var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.rv-edge[data-on="true"] { stroke: var(--color-acc); stroke-width: 2; opacity: 1; }
.rv-edge[data-on="false"] { opacity: .15; }
.rv-waves { position: relative; display: flex; gap: var(--space-12); align-items: flex-start; }
.rv-wave { flex: 0 0 16rem; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.rv-wave__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-inline: var(--space-1); }
.rv-wave__t { margin: 0; font: var(--text-h3-weight) var(--text-ui-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); }
.rv-wave__n { color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/1 var(--font-num); font-variant-numeric: tabular-nums; }
.rv-wave__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rv-wave__item { display: block; }

.rv-node {
  position: relative; display: grid; gap: var(--space-1); width: 100%; min-height: var(--size-touch-min); padding: var(--space-3);
  text-align: left; cursor: pointer; color: inherit; font: inherit; border: 0;
  transition: background-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.rv-node__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.rv-node__id { color: var(--color-ink3); font: var(--weight-medium) var(--text-label-size)/1.2 var(--font-num); font-variant-numeric: tabular-nums; }
.rv-node__t { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }
.rv-node__who, .rv-node__deps { color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/1.3 var(--font-sans); }
.rv-node__deps { display: none; }
.rv-node[data-state="done"] { box-shadow: inset 0 0 0 1px var(--color-ok-soft); }
.rv-node[data-state="stopped"] { box-shadow: inset 0 0 0 1px var(--color-danger-soft-text); }
.rv-node[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--color-acc); background: var(--surface-inner-hover); }
.rv-node:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
/* Наведение: сама задача и её цепочка яркие, остальное приглушено. */
.rv-graph[data-hl="true"] .rv-node[data-rel="dim"] { opacity: .35; }
.rv-node[data-rel="up"], .rv-node[data-rel="down"] { background: var(--surface-inner-hover); }
.rv-node[data-rel="self"] { background: var(--surface-inner-hover); box-shadow: inset 0 0 0 1px var(--color-ink3); }

/* Три индикатора гейтов с подсказкой «тесты», «ревью», «проверки». */
.rv-gates { display: inline-flex; gap: var(--space-1); }
.rv-gate {
  position: relative; width: var(--size-status-dot); height: var(--size-status-dot); border-radius: var(--radius-round);
  background: var(--color-line2); flex: none;
}
.rv-gate[data-state="passed"] { background: var(--color-ok); }
.rv-gate[data-state="issue"] { background: var(--color-danger); }
.rv-gate[data-state="skipped"] { background: transparent; box-shadow: inset 0 0 0 1px var(--color-ink3); }
.rv-gates .rv-gate[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: var(--z-sticky); bottom: calc(100% + var(--space-2)); right: 0;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--color-panel); border: 1px solid var(--color-line2);
  color: var(--color-ink); font: var(--text-label-weight) var(--text-label-size)/1.2 var(--font-sans); white-space: nowrap;
  opacity: 0; transform: translateY(var(--space-1)); pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.rv-gates .rv-gate[data-tip]:hover::after { opacity: 1; transform: none; }

/* Боковая панель задачи */
.rv-panel { display: grid; gap: var(--space-4); align-content: start; position: sticky; top: var(--space-4); }
.rv-panel__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.rv-panel__id { margin: 0; color: var(--color-ink3); font: var(--weight-medium) var(--text-label-size)/1.2 var(--font-num); }
.rv-panel__t { margin: var(--space-1) 0 0; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); overflow-wrap: anywhere; }
.rv-panel__x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; margin: calc(var(--space-2) * -1);
  width: var(--size-touch-min); height: var(--size-touch-min); border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--color-ink2); font-size: var(--text-h3-size); line-height: 1; cursor: pointer;
}
.rv-panel__x:hover { color: var(--color-ink); background: var(--surface-inner); }
.rv-panel__dl { display: grid; gap: var(--space-3); margin: 0; }
.rv-panel__row { display: grid; gap: var(--space-1); }
.rv-panel__row dt { color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/1.2 var(--font-sans); }
.rv-panel__row dd { margin: 0; color: var(--color-ink); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }
.rv-panel__gates, .rv-panel__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.rv-panel__gates li { display: flex; align-items: center; gap: var(--space-2); }
.rv-panel__a { display: flex; }

/* ---------- Паспорт ---------- */
.rv-pass { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.rv-pass__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
@media (min-width: 80rem) { .rv-pass__list { justify-content: space-between; gap: var(--space-3) var(--space-5); } }
.rv-pass__c { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.rv-pass__l { color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/1.2 var(--font-sans); }
.rv-pass__v { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rv-pass__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.rv-pass__run { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; color: var(--color-ink3); font: var(--text-label-weight) var(--text-label-size)/1.2 var(--font-sans); }
.rv-pass__run[hidden] { display: none; }
.rv-pass__id { font: var(--text-label-weight) var(--text-label-size)/1.2 var(--font-num); color: var(--color-ink2); overflow-wrap: anywhere; }
.rv-pass__copy, .rv-pass__more {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--color-acc-text); font: var(--weight-medium) var(--text-label-size)/1 var(--font-sans); cursor: pointer;
}
.rv-pass__copy:hover, .rv-pass__more:hover { background: var(--surface-inner); }
.rv-pass__more { display: none; }
.rv-pass .rv-risk { white-space: normal; }

/* ---------- Планшет и меньше ---------- */
@media (max-width: 63.9375rem) {
  .rv-graph[data-panel="true"] .rv-graph__body { grid-template-columns: minmax(0, 1fr); }
  .rv-panel { position: static; }
}

/* ---------- Телефон ---------- */
@media (max-width: 47.9375rem) {
  /* Канбан: колонки листаются вбок со snap. */
  .rv-kanban__cols {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    gap: var(--space-3); padding-bottom: var(--space-2);
  }
  .rv-col { flex: 0 0 min(85%, 20rem); scroll-snap-align: start; }
  /* Граф: вертикальный список волн, стрелок нет — зависимости словами в карточке. */
  .rv-graph__scroll { overflow: visible; padding-block: 0; }
  .rv-canvas { min-width: 0; }
  .rv-edges { display: none; }
  .rv-waves { flex-direction: column; gap: var(--space-5); }
  .rv-wave { flex: none; width: 100%; }
  .rv-node__deps { display: block; }
  .rv-gates .rv-gate[data-tip]::after { display: none; }
  /* Паспорт: две колонки, остальное по «Подробнее». */
  .rv-pass__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .rv-pass[data-open="false"] .rv-pass__c[data-more="true"] { display: none; }
  .rv-pass__more { display: inline-flex; }
}

/* ---------- Без движения ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv-node, .rv-edge, .rv-gates .rv-gate::after { transition: none; }
  .rv-card[data-running="true"]::after, .rv-node[data-running="true"]::after { animation: none; opacity: .6; }
}