/* Экран «Задачи» (.tk-): список с группами по сроку, шторка новой задачи, карточка. Цвета — токены base.css. */

.tk-screen,
.tk-card,
.task-check {
  --tk-on: #fff; /* галочка на зелёном кружке «выполнено» — в обеих темах белая */
}

/* ---------- список ---------- */
.tk-logo { width: 32px; height: 32px; border-radius: 50%; background: var(--success); color: var(--tk-on); display: grid; place-items: center; flex: none; margin-right: 10px; }
.tk-chips { padding-top: 12px; }
.btn.tk-create { background: var(--success); color: var(--tk-on); }
/* .screen уже кончается над нижним меню — второй раз его высоту не прибавляем */
.tk-screen .fab { bottom: 16px; }
.tk-groups { padding-bottom: 104px; }
.tk-sec { margin: 0; }
.tk-group { margin: 0; padding: 14px 16px 6px; font-size: 15px; font-weight: 500; color: var(--text-3); display: flex; align-items: baseline; gap: 6px; }
.tk-group.over { color: var(--danger-text); }
.tk-gcnt { font-weight: 400; color: var(--text-4); }
.tk-group.over .tk-gcnt { color: inherit; opacity: 0.75; }
.tk-block { background: var(--surface); }

.tk-row { position: relative; display: flex; align-items: flex-start; min-height: 64px; padding-right: 12px; background: var(--surface); }
.tk-row:not(:last-child)::after { content: ''; position: absolute; left: 56px; right: 0; bottom: 0; border-bottom: 0.5px solid var(--line); }
/* Кружок 24 px, а зона касания — вся левая колонка строки (56 px шириной, на всю высоту) */
.tk-check { flex: none; align-self: stretch; width: 56px; min-height: 56px; display: flex; justify-content: center; padding-top: 12px; }
.tk-circle { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--text-4); display: grid; place-items: center; color: var(--tk-on); transition: background 120ms, border-color 120ms, transform 100ms var(--ease-out); }
.tk-check:active .tk-circle { transform: scale(0.88); }
.tk-row.done .tk-circle { background: var(--success); border-color: var(--success); }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 11px 0 12px; color: var(--text); }
.tk-main:active { opacity: 0.7; }
.tk-title { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tk-row.done .tk-title { color: var(--text-4); text-decoration: line-through; }
/* Мета-строка не переносится: длинное имя ответственного сжимается первым, высота строк одинаковая */
.tk-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.tk-meta > * { flex: none; white-space: nowrap; }
.tk-meta .deadline { gap: 4px; }
.tk-when { font-size: 13px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.tk-link { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; color: var(--text-3); }
.tk-link svg.ic { flex: none; }
.tk-meta > .tk-resp { flex: 0 1 auto; min-width: 20px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); overflow: hidden; }
.tk-resp .av { width: 20px; height: 20px; font-size: 9px; flex: none; }
/* Чипы «Мои · Все · Выполненные» на вид 36 px, а нажимаются полосой 44 px (невидимый запас сверху и снизу) */
.tk-chips .chip::before { content: ''; position: absolute; inset: -6px -5px; }

.tk-snack { position: fixed; left: 12px; right: 84px; bottom: calc(var(--tabbar-h) + var(--tabbar-pad) + 16px); z-index: 30; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 14px; border-radius: 14px; background: var(--text); color: var(--surface); font-size: 15px; box-shadow: var(--shadow-pop); animation: tk-up 220ms var(--ease-out); }
.tk-snack button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 600; color: var(--surface); background: color-mix(in srgb, var(--surface) 18%, transparent); }
.tk-snack button:active { background: color-mix(in srgb, var(--surface) 28%, transparent); }
@keyframes tk-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- быстрые сроки (новая задача и карточка) ---------- */
.tk-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-qchip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font-size: 15px; cursor: pointer; transition: transform 100ms var(--ease-out); }
.tk-qchip:active { transform: scale(0.97); }
.tk-qchip.on { border-color: var(--primary); background: var(--primary-soft); color: var(--link); }
.tk-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }

/* ---------- шторка «Новая задача» ---------- */
.tk-new-title { display: block; width: 100%; border: 0; outline: none; resize: none; background: transparent; color: var(--text); font-size: 18px; line-height: 1.35; padding: 6px 0 10px; border-bottom: 0.5px solid var(--line); }
.tk-new-title::placeholder, .tk-new-desc::placeholder { color: var(--text-4); }
.tk-label { margin: 14px 0 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3); }
.tk-form { margin-top: 10px; }
.tk-new-desc { display: block; width: 100%; min-height: 88px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; line-height: 1.4; resize: vertical; outline: none; }
.tk-new-desc:focus { border-color: var(--primary); }
.tk-x { width: 44px; height: 44px; margin-right: -8px; display: grid; place-items: center; flex: none; color: var(--text-4); position: relative; z-index: 2; }
/* Карточка: привязанная сделка/контакт — вся строка открывает запись; справа ✏️ и ✕ */
.tk-acts { display: flex; flex: none; margin-right: -8px; }
.tk-acts .tk-x { margin-right: 0; }
/* ✕ «Очистить срок» из Field — 32 px; в карточке задачи даём ему 44 px, центр значка на прежнем месте */
.tk-card .frow button.fact { width: 44px; height: 44px; margin-right: -6px; }
.tk-open { color: var(--link); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- карточка задачи ---------- */
.tk-card .detail-body { padding-bottom: 24px; }
.tk-foot { flex: none; padding: 10px 16px calc(10px + var(--safe-bottom)); background: var(--surface); border-top: 0.5px solid var(--line); }
.tk-banner { display: flex; align-items: center; gap: 8px; margin: 10px 8px 0; padding: 10px 14px; border-radius: var(--radius); font-size: 15px; }
.tk-banner.done { background: var(--success-soft); color: var(--success); }
.tk-banner.over { background: var(--danger-soft); color: var(--danger-text); }
.tk-card .frow:has(+ .tk-quick-row) { border-bottom: 0; }
.tk-quick-row { padding: 0 0 14px; border-bottom: 0.5px solid var(--line); }
.tk-quick-row:last-child { border-bottom: 0; }
.tk-over { color: var(--danger-text); }

/* Совместимость: кружок дела в таймлайне карточки сделки (deal.js). */
.task-check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--text-4); display: grid; place-items: center; flex: none; color: var(--tk-on); }
.task-check.done { background: var(--success); border-color: var(--success); }

@media (hover: hover) and (pointer: fine) {
  .tk-row:hover { background: var(--surface-2); }
  .tk-check:hover .tk-circle { border-color: var(--success); }
  .tk-qchip:hover { border-color: var(--text-4); }
  .tk-qchip.on:hover { border-color: var(--primary); }
  .tk-x:hover { color: var(--text-2); }
  .btn.tk-create:hover { background: var(--success); filter: brightness(0.94); }
}

@media (min-width: 1024px) {
  .tk-scroll { padding: 0 24px; }
  .tk-groups { max-width: 880px; padding-bottom: 40px; }
  .tk-group { padding: 18px 4px 8px; }
  .tk-block { border-radius: var(--radius); overflow: hidden; }
  .tk-snack { left: auto; right: 24px; bottom: 24px; width: 400px; }
  .detail.tk-card { width: min(720px, calc(100vw - 120px)); }
  .tk-card .detail-body { padding: 0 12px 24px; }
  .tk-foot { padding: 12px 20px; }
}