/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Таймлайн агентов вкладки «Сейчас» (project-now-timeline.js). Значения — только из tokens.css, обе темы через переменные.
   Положение полос и меток задаёт скрипт через переменные узла: --l (слева), --w (ширина), --row (ряд внутри дорожки), --rows (рядов в дорожке).
   Состояние полосы различается не только цветом: у каждой своя рамка и подпись в обозначениях и в aria-label.
   Движение — только opacity, при prefers-reduced-motion его нет. На узком экране шкала прокручивается по горизонтали. */

.tl { --tl-label: 14rem; --tl-axis: 1.75rem; --tl-row: 2.75rem; --tl-bar: 1.125rem; display: grid; gap: var(--space-3); min-width: 0; }
.tl__none { margin: 0; color: var(--color-ink2); }
.tl__body { display: grid; gap: var(--space-3); min-width: 0; }
.tl__cap { margin: 0; }

/* Шкала и дорожки */
.tl__scroll { overflow-x: auto; min-width: 0; border-radius: var(--radius-sm); }
.tl__scroll:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.tl__chart { position: relative; min-width: 51rem; }
.tl__axis { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr); height: var(--tl-axis); align-items: end; }
.tl__ticks { position: relative; height: var(--tl-axis); }
.tl__tick { position: absolute; left: var(--l, 0); bottom: var(--space-1); transform: translateX(-50%); white-space: nowrap; color: var(--color-ink2); font: var(--text-mono-weight) var(--text-caption-size)/1 var(--font-num); font-variant-numeric: var(--num-features); }
.tl__tick--start { transform: none; }
.tl__tick--end { transform: translateX(-100%); }
.tl__grid { position: absolute; top: var(--tl-axis); bottom: 0; left: var(--tl-label); right: 0; pointer-events: none; }
.tl__gl { position: absolute; left: var(--l, 0); top: 0; bottom: 0; width: 1px; background: var(--color-line2); }
.tl__now { position: absolute; left: var(--l, 0); top: calc(var(--space-1) * -1); bottom: 0; border-left: var(--size-progress) solid var(--color-acc); transform: translateX(-50%); }
.tl__nowdot { position: absolute; left: var(--l, 0); top: calc(var(--space-1) * -1); width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-acc); transform: translate(-50%, -50%); animation: tl-pulse-dot var(--duration-ambient) var(--ease-in-out) infinite; }

.tl__lanes { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-line2); }
.tl__lane { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr); align-items: center; min-height: var(--tl-row); height: calc(var(--rows, 1) * var(--tl-row)); border-top: 1px solid var(--color-line2); }
.tl__who { min-width: 0; padding-right: var(--space-3); }
.tl__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.tl__meta { margin: 0; }
.tl__track { position: relative; align-self: stretch; }

/* Полосы: слева направо по времени, у каждой состояния своя рамка */
.tl__bar { position: absolute; left: var(--l, 0); width: var(--w, 0); min-width: 1.875rem; top: calc(var(--row, 0) * var(--tl-row) + (var(--tl-row) - var(--tl-bar)) / 2);
  height: var(--tl-bar); box-sizing: border-box; display: flex; align-items: center; padding: 0 var(--space-1); overflow: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius-xs); background: var(--color-panel2); color: var(--color-ink2);
  font: var(--text-mono-weight) var(--text-caption-size)/1 var(--font-num); font-variant-numeric: var(--num-features); white-space: nowrap; }
.tl__txt { position: relative; z-index: 1; }
.tl__bar--done { background: var(--color-track); border-color: var(--color-track); color: var(--color-ink); }
.tl__bar--run { background: var(--color-acc-soft); border-color: var(--color-acc); color: var(--color-acc-soft-text); }
.tl__bar--fix { background: var(--color-warn-soft); border-color: var(--color-warn); border-style: dashed; color: var(--color-warn-soft-text); }
.tl__bar--lead { background: var(--color-panel2); border-color: var(--color-line); color: var(--color-ink2); }
.tl__bar--stop { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger-soft-text); }
.tl__bar--wait { background: transparent; border-color: var(--color-line); border-style: dotted; color: var(--color-ink2); }
.tl__bar--live::before { content: ""; position: absolute; inset: 0; background: var(--color-acc); opacity: 0; animation: tl-pulse var(--duration-ambient) var(--ease-in-out) infinite; }

/* Обозначения */
.tl__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.tl__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.tl__sw { display: inline-block; width: 1.5rem; height: 0.75rem; box-sizing: border-box; border: 1px solid var(--color-line); border-radius: var(--radius-xs); }
.tl__sw--done { background: var(--color-track); border-color: var(--color-track); }
.tl__sw--run { background: var(--color-acc-soft); border-color: var(--color-acc); }
.tl__sw--fix { background: var(--color-warn-soft); border-color: var(--color-warn); border-style: dashed; }
.tl__sw--lead { background: var(--color-panel2); }
.tl__sw--stop { background: var(--color-danger-soft); border-color: var(--color-danger); }
.tl__sw--wait { background: transparent; border-style: dotted; }
.tl__note { margin: 0; }

@keyframes tl-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.25; } }
@keyframes tl-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Узкий экран: подписи дорожек уже, шкала прокручивается */
@media (max-width: 47.9375rem) {
  .tl { --tl-label: 9rem; }
  .tl__chart { min-width: 44rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl__nowdot, .tl__bar--live::before { animation: none; }
}