/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Вкладка «Работы»: переключатель разделов, «Ведущие агенты» (общая картина, фильтры, карточки, расход), оболочка раздела «План».
   Графитовая тема: поверхности --surface-tile, вместо рамок мягкое свечение (тень), ждущая решения работа светится янтарём.
   Телефон (390) первичен: всё одной колонкой; сетка карточек и две колонки сверху — от 48rem и 64rem. Только токены. Движение гасится при prefers-reduced-motion. */

.pjw { --pjw-card-min: 18.75rem; display: grid; gap: var(--space-4); min-width: 0; }
.pjw-switch { min-width: 0; overflow-x: auto; }
.pjw-panels, .pjw-panel, .pjw-leads, .pjw-plan { min-width: 0; }
.pjw-panel[hidden] { display: none; }
.pjw-leads { display: grid; gap: var(--space-4); }

/* ---------- Состояния и ошибка раздела ---------- */
.pjw-empty { display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-4); border-radius: var(--tile-radius); background: var(--surface-inner); }
.pjw-empty__t { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.pjw-empty__s { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.pjw-fail { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5) var(--space-4); border-radius: var(--tile-radius); background: var(--surface-inner); }
.pjw-fail .btn { min-height: var(--size-touch-min); }
.pjw-sub { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

/* ---------- Общая картина и расход ---------- */
.pjw-top { display: grid; gap: var(--space-4); min-width: 0; }
.pjw-ov[hidden], .pjw-sp[hidden] { display: none; }
.pjw-ov, .pjw-sp { min-width: 0; }
.pjw-tile {
  display: grid; gap: var(--space-3); align-content: start; min-width: 0; height: 100%; padding: var(--tile-pad);
  background: var(--surface-tile); border-radius: var(--tile-radius); box-shadow: var(--shadow-md);
}
.pjw-tile__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); min-width: 0; }
.pjw-tile__h .label { margin: 0; }
.pjw-tile__v { color: var(--color-ink2); font: var(--text-mono-weight) var(--text-mono-size)/var(--text-mono-line) var(--font-num); font-variant-numeric: var(--num-features); }
.pjw-split { display: flex; gap: var(--space-1); height: var(--space-2); min-width: 0; border-radius: var(--radius-pill); overflow: hidden; }
.pjw-split > i { flex: var(--n, 1) 1 0; min-width: var(--space-1); border-radius: var(--radius-pill); background: var(--color-ink3); }
.pjw-split > i[data-s="run"] { background: var(--color-acc); }
.pjw-split > i[data-s="wait"] { background: var(--color-warn); }
.pjw-split > i[data-s="ok"] { background: var(--color-dot-ok); }
.pjw-split > i[data-s="stuck"] { background: var(--color-danger); }
.pjw-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.pjw-legend li { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.pjw-legend b { color: var(--color-ink); font-weight: 500; font-variant-numeric: var(--num-features); }
.pjw-foot { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.pjw-foot b { color: var(--color-ink); font-weight: 500; font-variant-numeric: var(--num-features); }

.pjw-spend { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
.pjw-spend li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; min-width: 0; }
.pjw-spend__t { min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.pjw-spend__v { color: var(--color-ink2); text-align: end; font: var(--text-mono-weight) var(--text-mono-size)/var(--text-mono-line) var(--font-num); font-variant-numeric: var(--num-features); }
.pjw-spend .pjw-bar3 { grid-column: 1 / -1; }

/* ---------- Точка и полоса 3px ---------- */
.pjw-dot { display: inline-block; flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-ink3); }
.pjw-dot[data-s="run"] { background: var(--color-acc); }
.pjw-dot[data-s="wait"] { background: var(--color-warn); }
.pjw-dot[data-s="ok"] { background: var(--color-dot-ok); }
.pjw-dot[data-s="stuck"] { background: var(--color-danger); }
.pjw-bar3 { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: var(--size-progress); border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-track); color: var(--color-acc); }
.pjw-bar3::-webkit-progress-bar { background: var(--color-track); border-radius: var(--radius-pill); }
.pjw-bar3::-webkit-progress-value { background: var(--color-acc); border-radius: var(--radius-pill); transition: width var(--duration-base) var(--ease-out); }
.pjw-bar3::-moz-progress-bar { background: var(--color-acc); border-radius: var(--radius-pill); }

/* ---------- Фильтры ---------- */
.pjw-bar__in { display: grid; gap: var(--space-3); min-width: 0; }
.pjw-bar__t { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; color: var(--color-ink); font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--font-head); }
.pjw-n { color: var(--color-ink3); font: var(--text-mono-weight) var(--text-mono-size)/var(--text-mono-line) var(--font-num); font-variant-numeric: var(--num-features); }
.pjw-flt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); min-width: 0; border-radius: var(--radius-ctl); background: var(--surface-inner); }
.pjw-flt__b {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; min-height: var(--size-touch-min); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-item); background: transparent; color: var(--color-ink2); cursor: pointer;
  font: var(--text-button-weight) var(--text-button-size)/var(--text-button-line) var(--font-sans); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pjw-flt__b:hover { color: var(--color-ink); }
.pjw-flt__b[aria-pressed="true"] { background: var(--surface-tile); color: var(--color-ink); box-shadow: var(--shadow-sm); }
.pjw-flt__n { color: var(--color-ink3); font-variant-numeric: var(--num-features); }
.pjw-flt__b:focus-visible, .pjw-card__act:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* ---------- Карточки работ ---------- */
.pjw-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.pjw-card {
  display: grid; gap: var(--space-2); align-content: start; min-width: 0; padding: var(--space-4);
  background: var(--surface-tile); border-radius: var(--tile-radius); box-shadow: var(--shadow-md);
}
.pjw-card.is-live { box-shadow: var(--shadow-md), var(--shadow-glow); }
.pjw-card[data-attn="true"] { box-shadow: var(--shadow-md), var(--shadow-attn-glow); }
.pjw-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); min-width: 0; color: var(--color-ink2); font: var(--text-label-weight) var(--text-label-size)/var(--text-label-line) var(--font-sans); }
.pjw-card__meta { font-family: var(--font-num); font-variant-numeric: var(--num-features); }
.pjw-card__title { margin: 0; min-width: 0; color: var(--color-ink); overflow-wrap: anywhere; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--font-head); }
.pjw-card__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; min-width: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.pjw-card__phrase { min-width: 0; overflow-wrap: anywhere; }
.pjw-card__since { color: var(--color-ink3); }
.pjw-card[data-kind="wait"] .pjw-card__phrase { color: var(--color-warn-text); }
.pjw-card[data-kind="stuck"] .pjw-card__phrase { color: var(--color-danger-text); }
.pjw-card__hint { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.pjw-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-width: 0; }
.pjw-card__step { color: var(--color-ink2); font: var(--text-mono-weight) var(--text-mono-size)/var(--text-mono-line) var(--font-num); font-variant-numeric: var(--num-features); }
.pjw-card__act { min-height: var(--size-touch-min); }

@media (min-width: 48rem) {
  .pjw-bar__in { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: center; }
  .pjw-flt { grid-template-columns: repeat(4, auto); }
  .pjw-flt__b { min-height: var(--size-ctl); }
  .pjw-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pjw-card-min)), 1fr)); }
  .pjw-card__act { min-height: var(--size-ctl-sm); }
}
@media (min-width: 64rem) {
  .pjw-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pjw-top > [hidden] + *, .pjw-top > :only-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .pjw-flt__b, .pjw-bar3::-webkit-progress-value { transition: none; }
}