/* =========================================================================
   Перегляд завдання. Поверхні, підписи, поля, бейджі та кнопки належать
   Stoneware; тут — лише трек власних елементів запису й мобільна композиція.
   ========================================================================= */

.task-details__body,
.task-details__form {
  display: grid;
  gap: var(--fs-space-4);
}

/*
 * Смуга виконання закриває підсумок: показник, з чого він складається, і дія,
 * що його оновлює. Тон — стан завдання, тому активне, прострочене й виконане
 * розрізняються ще до того, як прочитано слово в бейджі; рейка при лівому краї
 * та розмита заливка — той самий прийом, яким tone позначає рядок списку.
 */
.task-details__scope {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1.6fr) auto;
  gap: var(--fs-space-3) var(--fs-space-4);
  align-items: center;
  margin: -10px -18px;
  padding: 12px 18px;
  background: var(--fs-scope-surface, transparent);
  box-shadow: inset 3px 0 0 var(--fs-scope-line, transparent);
}

.task-details__scope[data-tone="primary"] {
  --fs-scope-line: var(--fs-color-primary);
  --fs-scope-surface: color-mix(in srgb, var(--fs-color-primary-subtle) 42%, var(--fs-color-surface));
}

.task-details__scope[data-tone="success"] {
  --fs-scope-line: var(--fs-color-success);
  --fs-scope-surface: color-mix(in srgb, var(--fs-color-success-subtle) 42%, var(--fs-color-surface));
}

.task-details__scope[data-tone="danger"] {
  --fs-scope-line: var(--fs-color-danger);
  --fs-scope-surface: color-mix(in srgb, var(--fs-color-danger-subtle) 42%, var(--fs-color-surface));
}

.task-details__scope[data-tone="neutral"] {
  --fs-scope-line: var(--fs-color-border);
  --fs-scope-surface: var(--fs-color-surface-subtle);
}

/*
 * План і факт — це дані, а не форма: без рамки, без роздільника й без поверхні
 * поля. Обведене число читається як disabled input, у який хтось спробує ввести
 * значення.
 */
.task-details__measures {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-space-2) var(--fs-space-5);
  min-width: 0;
}

.task-details__measure {
  display: grid;
  grid-template-columns: 14px minmax(0, auto);
  gap: 0 6px;
  min-width: 0;
}

.task-details__measure-icon {
  grid-row: 1 / span 2;
  align-self: center;
  width: 14px;
  height: 14px;
  background: var(--fs-color-text-secondary);
  mask: var(--fs-measure-icon) center / 14px 14px no-repeat;
  -webkit-mask: var(--fs-measure-icon) center / 14px 14px no-repeat;
}

.task-details__measure-label {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.3;
}

.task-details__measure-value {
  font-size: var(--fs-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.task-details__scope-action {
  justify-self: end;
}

.task-details__scope-action:empty {
  display: none;
}

/*
 * Секція запису — підпис і те, що він називає. Власної поверхні вона не має:
 * панель уже є карткою, а рамка навколо кожної секції робила з неї картку в
 * картці, а там, де секція несе вкладений список, — картку в картці в картці.
 */
.task-details .fs-form-section > .fs-section-label {
  min-height: 32px;
  padding-block: 0 8px;
}

.task-details .fs-section-label__meta {
  gap: var(--fs-space-3);
}

/*
 * Ціль запису: рядок вкладеного списку на всю ширину. Номер стоїть першим —
 * запис може нести двадцять цілей, і без нього на конкретну неможливо послатися.
 */
.task-details__target {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fs-space-3);
  padding: var(--fs-space-3);
}

/*
 * Закритий рядок цілі — це рядок списку, а не заголовок картки: номер,
 * назва, факт і план, шкала, дія й шеврон. Власного маркера details не
 * малює: він стояв би перед номером і збивав першу колонку кожного рядка.
 */
.task-details__target-head {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2) var(--fs-space-3);
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}

.task-details__target-head::-webkit-details-marker {
  display: none;
}

.task-details__target-head:focus-visible {
  outline: 2px solid var(--fs-color-primary);
  outline-offset: 2px;
}

/*
 * План і факт цілі — це дані, а не форма: без рамки, роздільника й
 * поверхні поля. Вони забирають вільне місце рядка, тому шкала й дія
 * завжди притиснуті до правого краю — туди, де їх тримає кожен інший список.
 */
.task-details__target-figures {
  flex: 1 1 160px;
  min-width: 0;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Розкрита частина цілі: те, чого не видно в рядку, і її обговорення. */
.task-details__target-body {
  display: grid;
  gap: var(--fs-space-3);
  min-width: 0;
}

/*
 * Шеврон — спільний глиф розкриття; тут йому задано лише місце в
 * рядку й тиший колір, а його геометрію та поворот володіє Stoneware.
 */
.task-details__target-head .fs-datalist__chevron {
  flex: 0 0 8px;
  color: var(--fs-color-text-muted);
}

/*
 * Смуга цілі в її закритому рядку. Та сама шкала, що й у списку: колір
 * заливки не залежить від значення, а відсоток завжди стоїть текстом поруч.
 */
.task-details__progress {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  flex: 0 0 auto;
  min-width: 0;
}

.task-details__progress-track {
  width: 96px;
  height: 6px;
  overflow: hidden;
  background: var(--fs-color-border-subtle);
  border: 0;
  border-radius: var(--fs-radius-pill);
  appearance: none;
  -webkit-appearance: none;
}

.task-details__progress-track::-webkit-progress-bar {
  background: var(--fs-color-border-subtle);
  border-radius: inherit;
}

.task-details__progress-track::-webkit-progress-value {
  background: var(--fs-color-primary);
  border-radius: inherit;
}

.task-details__progress-track::-moz-progress-bar {
  background: var(--fs-color-primary);
  border-radius: inherit;
}

.task-details__progress-value {
  min-width: 34px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/*
 * Під час правки плану показаний відсоток уже не є збереженим, і про це
 * має бути сказано словом, а не відтінком смуги.
 */
.task-details__progress-was {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Опис починається коротким і росте під текст, тому власного скрола не має. */
.task-details__form textarea[data-autogrow] {
  min-height: 64px;
  overflow-y: hidden;
}

.task-details__target-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border: 1px solid var(--fs-color-primary-line);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.task-details__target-title {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Стан або дія цілі стоять у кінці рядка — те саме місце, що й у списку. */
.task-details__target-action {
  margin-left: auto;
}

.task-details__target-action:empty {
  display: none;
}

/* Той самий рядок обговорення, що й у списку: гліф, підпис і те, що всередині. */
.task-details__discussion-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  color: var(--fs-color-primary-text);
  cursor: pointer;
  font-size: var(--fs-text-xs);
  font-weight: 600;
  list-style: none;
}

.task-details__discussion-summary::-webkit-details-marker {
  display: none;
}

.task-details__discussion[data-empty="true"] .task-details__discussion-summary {
  color: var(--fs-color-text-secondary);
  font-weight: 500;
}

.task-details__discussion-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentcolor;
  mask: url("/stoneware/icons/task/comment.svg") center / 13px 13px no-repeat;
  -webkit-mask: url("/stoneware/icons/task/comment.svg") center / 13px 13px no-repeat;
}

.task-details__discussion[data-empty="true"] .task-details__discussion-icon {
  mask-image: url("/stoneware/icons/task/document-add.svg");
  -webkit-mask-image: url("/stoneware/icons/task/document-add.svg");
}

.task-details__discussion[open] > .task-details__discussion-summary {
  margin-bottom: var(--fs-space-2);
}

/* Незворотна дія тримається лівого краю, primary — правого. */
.task-details__actions-destructive {
  margin-right: auto;
}

.task-details__actions-destructive:empty {
  display: none;
}

@media (max-width: 760px) {
  /*
   * Форма запису лишається у дві колонки й на телефоні.
   *
   * Одна колонка коштувала рядка на кожне поле: підпис плюс контрол плюс
   * проміжок — це 70px, і «Загальна інформація» з «Датами» займали сім таких
   * рядків, тобто більше екрана, ніж усі показники завдання разом. Дата,
   * пріоритет і число читаються й у півширини; повну ширину лишають собі ті,
   * кому вона потрібна для введення, — назва, опис, composite-пікери та
   * ієрархії. Правило брендбука «одна колонка на mobile» лишається типовим для
   * форм; тут воно свідомо звужене до полів, які справді довгі.
   */
  .task-details .fs-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-space-2) var(--fs-space-3);
  }

  .task-details .fs-field--wide,
  .task-details .task-details__field--wide-mobile {
    grid-column: 1 / -1;
  }

  /* Секції запису теж тиснуться: 16px між ними на телефоні читаються як порожнеча. */
  .task-details__body,
  .task-details__form {
    gap: var(--fs-space-3);
  }

  /*
   * Рядок цілі на телефоні перестає бути потоком, що переноситься, і стає
   * маленькою сіткою з фіксованим порядком: номер, назва й дія — на першій
   * лінії, цифри — під назвою, шкала — під ними на всю ширину. Перенесенням
   * flex давав різний порядок для різних довжин назви, і два сусідні рядки
   * цілей виглядали як два різні компоненти.
   */
  .task-details__target-head {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 8px;
    gap: 6px var(--fs-space-2);
    align-items: center;
  }

  .task-details__target-number {
    grid-column: 1;
    grid-row: 1;
  }

  /* Назву цілі на вузькому екрані переносимо, а не зрізаємо: зрізана не називає нічого. */
  .task-details__target-title {
    grid-column: 2;
    grid-row: 1;
    overflow: visible;
    white-space: normal;
  }

  .task-details__target-action {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
  }

  .task-details__target-head .fs-datalist__chevron {
    grid-column: 4;
    grid-row: 1;
  }

  .task-details__target-figures {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: var(--fs-text-xs);
  }

  .task-details__progress {
    grid-column: 2 / -1;
    grid-row: 3;
    flex: 1 1 auto;
  }

  .task-details__progress-track {
    flex: 1 1 auto;
    width: auto;
  }

  /* Вкладений рядок тримає падінги під палець, а не під курсор. */
  .task-details__target {
    gap: var(--fs-space-2);
    padding: 10px 12px;
  }

  /*
   * Складові смуги виконання стають двома колонками. Одним потоком, що
   * переноситься, три показники давали три різні довжини рядка й читалися
   * як речення, а не як таблиця цифр.
   */
  .task-details__measures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-space-2) var(--fs-space-3);
  }

  .task-details__measures > .task-details__measure:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .task-details__actions-destructive {
    margin-right: 0;
  }

  /*
   * На телефоні смуга виконання складається: показник, під ним його складові,
   * і дія на всю ширину — три колонки тут дали б три вузькі стовпчики цифр.
   */
  .task-details__scope {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fs-space-3);
    margin: 0;
    padding: 12px;
  }

  .task-details__scope-action {
    justify-self: stretch;
  }

  .task-details__scope-action .action-button {
    width: 100%;
  }
}

/* =========================================================================
   Історія змін запису.

   Ці класи малює task-details.js, а стилі до них досі жили тільки в CSS
   інтеграції Skork — тобто на розгортанні без цієї інтеграції історія змін
   показувалась без оформлення взагалі, а платформа залежала від стилів свого
   споживача. Тепер вони тут, у власній номенклатурі й на токенах Stoneware
   замість сирих `--brand-*` і шістнадцяткових значень.
   ========================================================================= */

.tasks-history-toggle {
  display: grid;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-2);
}

.tasks-history-toggle__summary {
  color: var(--fs-color-primary-text);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

.tasks-history-toggle__summary::marker {
  color: var(--fs-color-primary-text);
}

.tasks-history__list {
  display: grid;
  gap: var(--fs-space-2);
}

.tasks-history__entry {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.tasks-history__message {
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  line-height: 1.35;
}

.tasks-history__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-2);
  flex-wrap: wrap;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 500;
  line-height: 1.25;
}

.tasks-history__empty {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.35;
}

.tasks-history__field {
  color: var(--fs-color-primary-text);
  font-weight: 600;
}

/* Було й стало: два стани одного поля, тому вони — пара, а не два різні бейджі. */
.tasks-history__from,
.tasks-history__to {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  line-height: 1.2;
  vertical-align: baseline;
}

.tasks-history__from {
  color: var(--fs-color-danger-text);
  background: var(--fs-color-danger-subtle);
}

.tasks-history__to {
  color: var(--fs-color-success-text);
  background: var(--fs-color-success-subtle);
}