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

/* ---------- Страница задачи ---------- */
.tk { display: grid; gap: var(--space-6); min-width: 0; }
.tk .cap, .pl .cap { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.tk-head { display: grid; gap: var(--space-4); min-width: 0; }
.tk-crumb { margin: 0; }
.tk-crumb .link { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
.tk-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.tk-title { margin: 0; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-line) var(--text-h2-family); letter-spacing: var(--text-h2-track); }
.tk-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tk-note { margin: 0; color: var(--color-ink2); }

/* Переключатель «План / Ход работы / Итог» */
.tk-views { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tk-views__a {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); padding: 0 var(--space-5);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-ink2); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.tk-views__a:hover { background: var(--color-panel2); color: var(--color-ink); }
.tk-views__a[aria-current="page"] { background: var(--color-acc-soft); border-color: transparent; color: var(--color-acc-soft-text); }

/* Меню «…» */
.tk-menu { position: relative; }
.tk-menu__btn { min-width: var(--size-touch-min); padding: 0 var(--space-3); }
.tk-menu__list {
  position: absolute; z-index: 5; inset-block-start: calc(100% + var(--space-2)); inset-inline-end: 0; display: grid; min-width: 14rem; padding: var(--space-2);
  background: var(--color-panel); border: 1px solid var(--color-line2); border-radius: var(--radius-md); box-shadow: var(--surface-shadow);
}
.tk-menu__item {
  display: flex; align-items: center; min-height: var(--size-touch-min); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink); text-align: start; cursor: pointer;
}
.tk-menu__item:hover { background: var(--color-panel2); }
.tk-menu__item--danger { color: var(--color-danger-text); }

/* Окно «Закрыть вручную» (стоит в body, вне .tk) */
.tk-dlg { display: grid; gap: var(--space-3); }
.tk-dlg .label { color: var(--color-ink2); }
.tk-dlg .input, .pl-form__area {
  width: 100%; min-height: var(--size-control); padding: var(--space-3) var(--space-4); box-sizing: border-box;
  background: var(--color-panel2); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-md); font: inherit;
}
.tk-dlg .input:focus-visible, .pl-form__area:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.tk-dlg__err, .pl-form__err { margin: 0; color: var(--color-danger-text); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.tk-dlg__err[hidden], .pl-form__err[hidden], .pl-form[hidden], .tk-passport[hidden] { display: none; }

/* «Что делал агент» */
.tk-agent { display: grid; gap: var(--space-4); }
.tk-agent__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tk-agent__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface-inner); border-radius: var(--inner-radius); min-width: 0;
}
.tk-agent__t { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.tk-agent__rep { flex: 1 1 100%; margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; max-width: var(--layout-measure); }
.tk-agent__none { margin: 0; color: var(--color-ink2); }

/* ---------- Экран «План» ---------- */
.pl-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.pl-col { display: grid; gap: var(--space-5); min-width: 0; align-content: start; }
.pl-card { display: grid; gap: var(--space-5); }
.pl-card .label, .pl-block .label { margin: 0; }
.pl-card__title { margin: 0; overflow-wrap: anywhere; text-wrap: balance; font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); }
.pl-card__goal { margin: 0; max-width: var(--layout-measure); overflow-wrap: anywhere; font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--font-sans); }
.pl-card__steps { display: grid; gap: var(--space-4); }
.pl-note { margin: 0; color: var(--color-ink2); }
.pl-wave { display: grid; gap: var(--space-2); }
.pl-wave__h { margin: 0; }
.pl-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pl-step {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface-inner); border-radius: var(--inner-radius); min-width: 0;
}
.pl-step__t { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--font-sans); }
.pl-card__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pl-hint { flex: 1 1 100%; }

/* Форма «Доработать» */
.pl-form { display: grid; gap: var(--space-3); max-width: var(--layout-measure); }
.pl-form__act { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pl-form__area { resize: vertical; }
.pl-result { min-height: 0; }
.pl-result:empty { display: none; }
.pl-result[data-tone="danger"] { color: var(--color-danger-text); }
.pl-result[data-tone="warn"] { color: var(--color-warn-text); }
.pl-result[data-tone="ok"] { color: var(--color-ok-text); }

/* Вопросы, допущения, итоговые проверки, факты */
.pl-block { display: grid; gap: var(--space-3); }
.pl-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pl-list li { padding-inline-start: var(--space-4); position: relative; overflow-wrap: anywhere; }
.pl-list li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .7em; width: var(--space-1); height: var(--space-1); border-radius: var(--radius-round); background: var(--color-ink3); }
.pl-facts__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

@media (min-width: 64rem) {
  .pl-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 40rem) {
  .tk-ctl > .btn, .pl-card__act > .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-views__a { transition: none; }
}