/* =========================================================================
 * Tasks list page. Everything below belongs to the canonical record list:
 * the feature declares its column track, the labels its mobile card needs
 * and the anatomy of an opened record. Panels, rows, badges, chevron and the
 * opened surface come from Stoneware and are never redrawn here.
 * ========================================================================= */

/*
 * Завдання | Стан | Прогрес | Відповідальний | Дії | chevron.
 * State and progress are the decision, so they stand next to the name and are
 * read in the same eye movement; who owns the task follows to qualify it.
 * "Оновлено" left the closed row entirely: a timestamp that nobody scans held
 * a full column of a list whose subject is state and progress, and it is still
 * read in the record's own metadata line once the record is opened.
 * The head and the row read the same track, so a column never drifts from its
 * own title.
 */
.tasks-list .tasks-list__grid {
  grid-template-columns:
    minmax(240px, 2.4fr)
    minmax(150px, 0.9fr)
    minmax(150px, 0.9fr)
    minmax(140px, 1fr)
    52px
    24px;
  gap: var(--fs-space-3);
}

/* A group heading is a divider with a name, not a second list header. */
.tasks-list__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  padding: var(--fs-space-2) var(--fs-space-4);
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-surface-subtle);
  border-bottom: 1px solid var(--fs-color-border-subtle);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tasks-list__group-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
}

.tasks-cell {
  display: grid;
  gap: 2px;
  align-content: center;
  min-width: 0;
}

/* On desktop the column title already names the value. */
.tasks-cell__label {
  display: none;
}

/*
 * A caption said as a glyph. "Відповідальний" is the longest word the card
 * carries and it did not fit the 72px its caption track is given: it ran under
 * the name it was captioning and the two overlapped. The glyph fits, and the
 * word stays in the row for the screen reader and in the tooltip — colour and
 * shape never carry a caption on their own.
 */
.tasks-cell__label-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: var(--fs-color-text-muted);
  mask: var(--tasks-icon) center / 14px 14px no-repeat;
  -webkit-mask: var(--tasks-icon) center / 14px 14px no-repeat;
}

/*
 * Identity is a glyph and a body beside it. The glyph names the kind of task
 * the record is, which is the first thing the list is filtered by in the reader's
 * head — "which of these are sales tasks" — and it is answered before a word is
 * read. It never carries the meaning alone: the words stand in the metadata line.
 */
.tasks-cell--identity {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--fs-space-2);
  align-items: start;
  align-content: start;
}

.tasks-cell__type {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--fs-color-primary);
  mask: var(--tasks-icon) center / 18px 18px no-repeat;
  -webkit-mask: var(--tasks-icon) center / 18px 18px no-repeat;
}

.tasks-cell__identity-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tasks-cell__title {
  overflow-wrap: anywhere;
  font-size: var(--fs-text-md);
  font-weight: 600;
  line-height: 1.3;
}

/* Metadata is one run of parts; the separator belongs to the gap between them. */
.tasks-cell__meta {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tasks-cell__meta > span + span::before {
  content: " · ";
}

/* The type is the subject of the record, so its words carry the page's own accent. */
.tasks-cell__type-name {
  color: var(--fs-color-primary-text);
  font-weight: 600;
}

/*
 * Розмір розмови в закритому рядку. Стоїть у тій самій метаряді, що номер і тип,
 * бо відповідає на те саме питання «що це за запис» — і приходить разом зі списком,
 * тому запис відкривають, коли там є про що читати, а не щоб це з'ясувати.
 */
.tasks-cell__thread-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--fs-color-primary-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

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

.tasks-cell__latest-comment {
  display: -webkit-box;
  overflow: hidden;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tasks-cell__value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-text-sm);
}

/* Figures under a figures column line up digit under digit. */
.tasks-cell__value--figures {
  font-variant-numeric: tabular-nums;
}

.tasks-cell__value--muted {
  color: var(--fs-color-text-muted);
}

.tasks-cell__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/*
 * Priority as a dot before the state badge. Only a priority that departs from
 * the default gets one: said in a badge, "Звичайний" on every record turned the
 * state column into two badges deep and reported nothing. The dot never carries
 * it alone — it keeps a tooltip and a screen-reader word — and it takes the same
 * five semantic tones every other marker on the page takes.
 */
.tasks-priority {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: var(--fs-color-text-muted);
  border-radius: var(--fs-radius-pill);
}

/* The slot of a record at the default priority: it holds the place, it says nothing. */
.tasks-priority--none {
  background: transparent;
}

.tasks-priority[data-tone="warning"] {
  background: var(--fs-color-warning);
}

.tasks-priority[data-tone="danger"] {
  background: var(--fs-color-danger);
}

.tasks-priority[data-tone="neutral"] {
  background: var(--fs-color-text-muted);
}

.tasks-priority[data-tone="primary"] {
  background: var(--fs-color-primary);
}

.tasks-priority[data-tone="success"] {
  background: var(--fs-color-success);
}

/*
 * The bar measures and the number states the value: the fill stays primary at
 * every percentage, and the record's own state is said by its badge.
 */
.tasks-progress {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tasks-progress__bar {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  min-width: 0;
}

.tasks-progress__track {
  flex: 1 1 auto;
  min-width: 40px;
  height: 6px;
  overflow: hidden;
  background: var(--fs-color-border-subtle);
  border: 0;
  border-radius: var(--fs-radius-pill);
  appearance: none;
  -webkit-appearance: none;
}

.tasks-progress__track::-webkit-progress-bar {
  background: var(--fs-color-border-subtle);
  border-radius: inherit;
}

.tasks-progress__track::-webkit-progress-value {
  background: var(--fs-color-primary);
  border-radius: inherit;
}

.tasks-progress__track::-moz-progress-bar {
  background: var(--fs-color-primary);
  border-radius: inherit;
}

.tasks-progress__value {
  flex: 0 0 auto;
  min-width: 34px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/*
 * What the bar is an average of. On its own "62%" was a figure with nothing
 * behind it: a task's progress is the mean of its targets, and how many of
 * those are closed is the thing the list is opened to find out.
 */
.tasks-progress__caption {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* The two folder pickers are fields of the filter panel, not a second block. */
.tasks-filters__folders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--fs-space-3);
  margin-top: var(--fs-space-3);
}

.tasks-multi-picker__empty {
  display: block;
  padding: var(--fs-space-2);
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
}

/* --- Opened record ------------------------------------------------------ */

.tasks-detail {
  display: grid;
  gap: var(--fs-space-3);
}

/*
 * A section is its label and what the label names, nothing between them. The
 * label itself is the compact Stoneware variant: the panel strip it used to
 * borrow spent 40px of height and 16px of left inset per section, so three
 * short sections stood taller than the figures they introduced and none of
 * them started at the same edge as its own content.
 */
.tasks-detail__section {
  display: grid;
  gap: var(--fs-space-2);
  min-width: 0;
}

.tasks-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 var(--fs-space-4);
}

/* Facts are rows separated by a hairline, not six little cards. */
.tasks-fact {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 4px 0;
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/* The glyph names the measure beside its word, exactly as a column title does. */
.tasks-fact__label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
}

.tasks-fact__icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentcolor;
  mask: var(--tasks-icon) center / 13px 13px no-repeat;
  -webkit-mask: var(--tasks-icon) center / 13px 13px no-repeat;
}

.tasks-fact > strong {
  font-size: var(--fs-text-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.tasks-detail__text {
  margin: 0;
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*
 * Author and system timestamps. They are asked for once, after everything else
 * has been read, so they are one quiet line rather than four more fact rows
 * competing with the deadline for the same weight.
 */
.tasks-detail__meta {
  margin: 0;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  line-height: 1.5;
}

.tasks-detail__meta > span + span::before {
  content: " · ";
}

.tasks-detail__empty {
  margin: 0;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

/*
 * Перехід на запис — одна дія, і на кожній ширині вона стоїть в одному місці.
 * На desktop це icon-кнопка в колонці дій рядка, тому тут вона була б другою
 * кнопкою до того самого місця; на mobile колонки дій немає взагалі, і перехід
 * живе тут, унизу розкритої картки.
 */
.tasks-detail__actions {
  display: none;
  justify-content: flex-end;
}

/*
 * № | Ціль | Виконання | Прогрес | 💬 | Дія. The number is a track of its own rather
 * than the first thing inside the name cell: inside the cell it pushed every
 * name 30px past the word that titles its column, and each value after it read
 * as slightly out of line with its own heading. The two control columns are one
 * glyph wide each — the same width the row action takes in every other list.
 */
.tasks-targets__grid {
  grid-template-columns: 22px minmax(0, 1.7fr) minmax(0, 1fr) minmax(140px, 0.9fr) 56px 36px;
  gap: var(--fs-space-2);
}

.tasks-cell--target-thread {
  align-content: center;
  justify-items: end;
}

.tasks-cell--target-action {
  align-content: center;
  justify-items: end;
}

/* One target is one block: the divider belongs between targets, not between a
   target and its own discussion. */
.tasks-target-item + .tasks-target-item {
  border-top: 1px solid var(--fs-color-border-subtle);
}

/*
 * The number is the anchor. Twenty identically shaped rows cannot be counted,
 * referred to in a comment or found again after scrolling; a numbered one can.
 */
.tasks-target-item__number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* A finished target says so with the success glyph the rest of the product uses. */
.tasks-target-item__done {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--fs-color-success);
  mask: url("/stoneware/icons/task/check-circle.svg") center / 20px 20px no-repeat;
  -webkit-mask: url("/stoneware/icons/task/check-circle.svg") center / 20px 20px no-repeat;
}

/*
 * Лічильник розмови цілі: скільки там написано і вхід туди.
 *
 * Раніше на цьому місці стояв цілий компонент коментарів під кожною ціллю,
 * складений у `<details>`. Двадцять цілей означали двадцять один компонент
 * у розкритій картці, а секція цілей ставала переважно обговоренням. Тепер
 * ціль каже одне число, а читають його в одній панелі внизу запису.
 *
 * Порожній лічильник тихий не лише тому, що там нічого немає: ціль не можна
 * позначити виконаною, доки під нею не написано жодного коментаря, — тож нуль
 * поруч є й поясненням, чому сусідня галочка відмовить.
 */
.tasks-thread-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-pill);
  font: inherit;
  font-size: var(--fs-text-xs);
  font-weight: 600;
  cursor: pointer;
}

.tasks-thread-counter:hover,
.tasks-thread-counter:focus-visible {
  border-color: var(--fs-color-primary);
}

.tasks-thread-counter[data-empty="true"] {
  color: var(--fs-color-text-muted);
  font-weight: 500;
}

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

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

.tasks-thread-counter__value {
  font-variant-numeric: tabular-nums;
}

.tasks-thread-counter[aria-expanded="true"] {
  color: var(--fs-color-primary-text);
  background: var(--fs-color-surface);
  border-color: var(--fs-color-primary);
}

/*
 * Слот під рядком цілі. Порожній, доки читач не попросить цю ціль: панель одна
 * на весь запис і переїжджає в той слот, який назвали. Тому в DOM ніколи немає
 * двадцяти тредів, але коментар усе одно пишеться там, де стоїть його предмет.
 */
.tasks-target-item__thread:empty {
  display: none;
}

/* Відступ рівно на трек номера, щоб тред стояв під назвою цілі, а не під її числом. */
.tasks-target-item__thread {
  padding-left: calc(22px + var(--fs-space-2));
}

.tasks-target-thread {
  margin: 0 0 var(--fs-space-3);
  padding: var(--fs-space-2) var(--fs-space-3) var(--fs-space-3);
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.tasks-target-thread__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--fs-space-2);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
}

.tasks-target-thread__title {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-target-thread__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;
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 900px) {
  .tasks-list .tasks-list__grid {
    grid-template-columns:
      minmax(200px, 2.2fr)
      minmax(140px, 0.9fr)
      minmax(140px, 0.9fr)
      minmax(130px, 1fr)
      52px
      24px;
    gap: var(--fs-space-2);
  }
}

/*
 * The row stops being a grid of columns and becomes a record card. It is a card
 * of four short lines, not six tall ones: state and progress share a line
 * because they are read together, the values that stack keep the label their
 * column title used to give them, and the paddings are the ones a thumb needs
 * rather than the ones a mouse pointer could afford.
 */
@media (max-width: 760px) {
  .tasks-list .tasks-list__grid,
.fs-datalist--responsive.tasks-list .fs-datalist__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px var(--fs-space-2);
    padding: 10px 12px;
  }

  .tasks-list .tasks-cell {
    display: grid;
    grid-template-columns: minmax(72px, 0.3fr) minmax(0, 1fr);
    gap: var(--fs-space-2);
    align-items: baseline;
  }

  .tasks-list .tasks-cell__label {
    display: block;
    color: var(--fs-color-text-secondary);
    font-size: var(--fs-text-xs);
    font-weight: 600;
  }

  /*
   * Identity and state first, then what qualifies them, then the action. Every
   * cell states its place, because an unplaced one would jump ahead of the
   * title it belongs to.
   */
  .tasks-list .tasks-cell--identity {
    grid-column: 1 / 3;
    grid-template-columns: 20px minmax(0, 1fr);
    order: 1;
  }

  .tasks-list .tasks-cell__type {
    width: 16px;
    height: 16px;
    mask-size: 16px 16px;
    -webkit-mask-size: 16px 16px;
  }

  /* State and progress are one decision, so they are one line of the card. */
  .tasks-list .tasks-cell--state {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    order: 2;
  }

  .tasks-list .tasks-cell--state .tasks-cell__label {
    display: none;
  }

  .tasks-list .tasks-cell--progress {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    order: 3;
  }

  .tasks-list .tasks-cell--progress .tasks-cell__label {
    display: none;
  }

  /* Тримає весь рядок: колонку дій поруч із ним прибрано, і ділити її вже нема з ким. */
  .tasks-list .tasks-cell--assignee {
    grid-column: 1 / -1;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    order: 4;
  }

  .tasks-list .tasks-cell--assignee .tasks-cell__label {
    display: flex;
    align-items: center;
  }

  /*
   * Картка має один жест: натиснути її — розкрити. Раніше їх було два, у двох
   * різних кутах: icon-кнопка переходу ділила рядок із відповідальним, а chevron
   * стояв окремою колонкою в першому рядку — два різні наслідки від двох сусідніх
   * дотиків, і жоден з них не був більшим за палець. Рядок картки і так є
   * `<summary>`, тобто вся вона вже розкриває запис; тепер це єдине, що вона
   * робить, а перехід стоїть однією кнопкою внизу розкритої картки.
   */
  .tasks-list .tasks-cell--actions,
.tasks-list .fs-datalist__chevron {
    display: none;
  }

  /* The stacked row labels itself, so its column titles would be four empty lines. */
  .tasks-detail .fs-nested-list__head {
    display: none;
  }

  /*
   * A target becomes a card too: the number keeps the first track so the list
   * stays countable, and its values run underneath the name it belongs to.
   */
  .tasks-targets__grid {
    grid-template-columns: 22px minmax(0, 1fr) auto auto;
    gap: 6px var(--fs-space-2);
  }

  /*
   * Scoped to the target grid on purpose: the card above places its own state
   * and progress in two columns, and an unscoped rule here would move those too.
   */
  .tasks-targets__grid .tasks-cell--target-name {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
  }

  .tasks-targets__grid .tasks-cell--done,
.tasks-targets__grid .tasks-cell--progress {
    grid-column: 2 / -1;
  }

  /*
   * Одна колонка, а не підпис плюс значення.
   *
   * Мобільна картка дає кожній клітинці трек підпису `minmax(72px, 0.3fr)`.
   * Клітинка дії шириною 36px успадковувала його теж: підпис у ній прихований,
   * але трек лишався, і кнопка ставала в другу колонку — за 72px від власного
   * лівого краю, тобто за правим краєм екрана. Саме так «Позначити виконаною»
   * вилазила за межі картки й тягла за собою горизонтальний скрол сторінки.
   */
  .tasks-targets__grid .tasks-cell--target-thread {
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
  }

  .tasks-targets__grid .tasks-cell--target-action {
    grid-column: 4;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
  }

  .tasks-targets__grid .tasks-cell--target-thread .tasks-cell__label,
.tasks-targets__grid .tasks-cell--target-action .tasks-cell__label {
    display: none;
  }

  .tasks-facts {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0 var(--fs-space-3);
  }

  .tasks-detail__actions {
    display: flex;
    justify-content: stretch;
  }

  .tasks-detail__actions .action-button {
    width: 100%;
  }
}