/* Задачи. Список дел, а не система управления проектами: одна плоская лента,
 * сгруппированная по срокам, и один жест — закрыть.
 */

.tk-groups { display: grid; gap: var(--s4); }

.tk-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0 var(--s2) var(--s2);
  font-size: var(--t-footnote);
  font-weight: 600;
  color: var(--ink-2);
}
.tk-group-head.overdue { color: var(--expense); }
.tk-group-head .n { color: var(--ink-3); font-weight: 500; }

.tk {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  position: relative;
}
.tk + .tk::before {
  content: "";
  position: absolute;
  top: 0; left: calc(var(--s4) + 28px + var(--s3)); right: 0;
  height: .5px;
  background: var(--hairline);
}

/* Кружок-галочка. 28 пикселей плюс отступ — палец попадает, не задевая
   соседнюю строку; меньше делать нельзя. */
.tk-check {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: -1px;
  border: 1.8px solid var(--hairline-strong);
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color .15s linear, background .15s linear, transform .12s var(--ease);
}
.tk-check svg {
  width: 15px; height: 15px;
  stroke: var(--ink-on-accent);
  fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .14s linear, transform .18s var(--ease);
}
.tk-check:active { transform: scale(.88); }
.tk.done .tk-check { border-color: var(--income); background: var(--income); }
.tk.done .tk-check svg { opacity: 1; transform: none; }

.tk-body { flex: 1; min-width: 0; }
.tk-title {
  font-size: var(--t-callout);
  font-weight: 500;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.tk.done .tk-title { color: var(--ink-3); text-decoration: line-through; }
.tk-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.tk-meta .due.overdue { color: var(--expense); font-weight: 600; }
.tk-meta .due.today { color: var(--accent-text); font-weight: 600; }

/* Приоритет — полоска слева, а не цветной текст: текст задачи должен
   читаться одинаково у всех, важность — периферийным зрением. */
.tk[data-prio="2"]::after,
.tk[data-prio="1"]::after {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.tk[data-prio="2"]::after { background: var(--expense); }
.tk[data-prio="1"]::after { background: var(--warn); }

.tk-open {
  flex: none;
  width: 30px; height: 30px;
  border: 0;
  background: none;
  border-radius: var(--r-row);
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.tk-open:active { background: var(--surface-3); }
.tk-open svg { width: 16px; height: 16px; stroke: currentColor; fill: none;
               stroke-width: 2; stroke-linecap: round; }

.repeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--t-caption2);
  font-weight: 600;
}

/* Плавающая кнопка «новая задача». На телефоне — над таб-баром справа;
   на десктопе она не нужна: там есть кнопка в шапке. */
.tk-fab {
  position: fixed;
  right: var(--s4);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s4));
  z-index: 45;
  width: 54px; height: 54px;
  border: 0;
  border-radius: 27px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(10, 132, 255, .34);
  transition: transform .12s var(--ease);
}
.tk-fab:active { transform: scale(.92); }
.tk-fab svg { width: 26px; height: 26px; stroke: currentColor; fill: none;
              stroke-width: 2.2; stroke-linecap: round; }

@media (min-width: 900px) { .tk-fab { display: none; } }

.tk-history { margin-top: var(--s3); }
.tk-history .h-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 7px 0;
  font-size: var(--t-footnote);
  border-top: .5px solid var(--hairline);
}