/* Стили «Задачи»: строка задачи там, где она показана (UX.md §7), страница «Задачи», блок «Сегодня» и пометки задач в итогах.
   Цвета только из theme.css. Строка — в две строки: текст и под ним тихий источник; слева кружок своей задачи или аватар
   ответственного, справа плашка срока и «⋯». Строки разделяет воздух; тёплая только просрочка. */
.tk-list { display: flex; flex-direction: column; }
.tk-row { --tk-line: 23px; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; column-gap: 12px; align-items: start; width: calc(100% + 16px); margin-inline: -8px; padding: 10px 8px; border-radius: 12px; transition: background-color .12s; }
.tk-row:hover { background: var(--hover); }
.tk-lead { display: flex; justify-content: center; padding-top: 1px; min-height: 22px; }
.tk-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tk-text { display: block; font-size: 15px; line-height: var(--tk-line); font-weight: 450; color: var(--foreground); text-decoration: none; overflow-wrap: anywhere; }
a.tk-text:hover { color: var(--accent-ink); }
/* Источник — одна строка: имя и встреча обрезаются многоточием, дата не уступает никогда, проекты уступают первыми. */
.tk-src { display: flex; min-width: 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); white-space: nowrap; }
.tk-src-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-src-date { flex: none; }
.tk-src-more { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-src-more::before { content: "·"; padding-inline: .45em; }
.tk-src-more:first-child::before { content: none; }
.tk-unsaved { font-size: 13px; line-height: 20px; color: var(--late); }
.tk-row.is-done .tk-text { color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: var(--border-strong); }

/* Кружок: пустое кольцо, намёк на галочку под курсором, залит, когда сделано. Цель нажатия — 44×44. */
.tk-check { position: relative; width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; color: transparent; cursor: pointer; transition: border-color .12s, background-color .12s, color .12s, transform .08s; }
.tk-check::after { content: ""; position: absolute; inset: -12px; }
.tk-check .w-i { width: 12px; height: 12px; stroke-width: 3; }
.tk-check:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tk-check:active { transform: scale(.92); }
.tk-check:disabled { cursor: default; opacity: .6; }
.tk-check.is-on { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
/* На месте кружка чужой задачи — аватар ответственного; без ответственного — пунктирное кольцо. */
.tk-nobody { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--border-strong); color: var(--muted-foreground); }
.tk-nobody.is-someone { border-style: solid; border-color: transparent; background: var(--secondary); }
.tk-nobody .w-i { width: 12px; height: 12px; }

/* Управление строки — плашка срока, «Принять», «Спросить», «⋯» — берёт палец целиком: коробка 44 px в высоту, а видна
   только плашка внутри; отрицательные поля держат строку в её высоте. */
.tk-when, .tk-side { display: flex; align-items: center; min-height: var(--tk-line); }
.tk-when { justify-content: flex-end; }
.tk-side { gap: 2px; }
.tk-due, .tk-ctl { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-block: calc((var(--tk-line) - 44px) / 2); padding: 0; border: 0; background: none; color: var(--muted-foreground); font: inherit; }
.tk-due-face { display: inline-block; max-width: 12em; height: 22px; padding: 0 8px; border-radius: 8px; background: var(--sunken); font-size: 13px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; transition: background-color .12s, color .12s; }
.tk-due.is-late .tk-due-face { background: var(--late-bg); color: var(--late); }
.tk-due.is-button { min-width: 44px; cursor: pointer; }
.tk-due.is-button:hover .tk-due-face, .tk-due.is-button[aria-expanded="true"] .tk-due-face { background: var(--secondary); color: var(--foreground); }
.tk-due.is-late.is-button:hover .tk-due-face, .tk-due.is-late.is-button[aria-expanded="true"] .tk-due-face { color: var(--late); }
/* Без срока (или день назван заголовком) — тихий календарик, но видимый: нажать на срок можно всегда. */
.tk-due.is-bare .tk-due-face { padding: 0 4px; background: transparent; }
.tk-due.is-bare .w-i { width: 15px; height: 15px; vertical-align: -3px; }
.tk-ctl { cursor: pointer; }
.tk-ctl-face { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--body); white-space: nowrap; transition: background-color .12s, color .12s; }
.tk-ctl:hover .tk-ctl-face { background: var(--secondary); color: var(--foreground); }
.tk-accept .tk-ctl-face { color: var(--accent-ink); }
.tk-accept:hover .tk-ctl-face { background: var(--accent-soft); color: var(--accent-ink); }
.tk-ctl:disabled { cursor: default; opacity: .6; }
.tk-due:focus-visible, .tk-ctl:focus-visible { outline: none; }
.tk-due:focus-visible .tk-due-face, .tk-ctl:focus-visible .tk-ctl-face { outline: 2px solid var(--ring); outline-offset: 1px; }
/* «⋯» виден всегда, в обеих темах: цвет текста строки, а не полупрозрачный серый. */
.tk-row .tk-more { width: 44px; height: 44px; margin: calc((var(--tk-line) - 44px) / 2) -10px calc((var(--tk-line) - 44px) / 2) 0; color: var(--body); }
.tk-row .tk-more:hover, .tk-row .tk-more[aria-expanded="true"] { color: var(--foreground); }
.tk-menu-for { padding: 0 10px 8px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-date { display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 4px; }
.tk-date-label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-size: 13px; color: var(--muted-foreground); }
.tk-date .w-btn { height: 40px; } /* as tall as the date beside it */
.tk-confirm { padding: 10px; }
.tk-confirm p { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--foreground); overflow-wrap: anywhere; }
.tk-confirm .w-actions { justify-content: flex-end; }

/* Слова, из которых взят срок, цитата и принятие — тихая подпись текста по наведению и фокусу (aria-describedby),
   поверх соседних строк, а не рамкой в строке; карточка задачи показывает их целиком. */
.tk-said { position: absolute; z-index: 4; inset-inline-start: 42px; top: calc(100% - 6px); display: flex; flex-direction: column; gap: 2px; max-width: min(520px, calc(100% - 50px)); padding: 6px 10px; border-radius: 8px; background: var(--w-tip); color: var(--w-tip-fg); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, visibility 0s .12s; }
.tk-row:hover .tk-said, .tk-row:focus-within .tk-said { opacity: 1; visibility: visible; transition: opacity .12s .4s, visibility 0s .4s; }
.tk-row:has(.w-pop) .tk-said { display: none; }
.tk-said-quote { font-style: italic; quotes: "«" "»"; }
/* The words said on the card of a task: in italics and grey, so they never read as the task or its deadline. */
.tk-quote { display: block; margin: 4px 0 2px; padding-left: 10px; border-left: 2px solid var(--border-strong); font-size: 13px; line-height: 20px; font-style: italic; color: var(--muted-foreground); overflow-wrap: anywhere; quotes: "«" "»"; }

/* Узкая колонка («Сегодня», «С прошлой встречи»): плашка срока — в строке под текстом, перед источником. */
.tk-row.is-compact { --tk-line: 21px; grid-template-columns: 22px minmax(0, 1fr) auto; }
.tk-row.is-compact .tk-text { font-size: 14px; }
.tk-meta { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 20px; margin-top: 2px; }
.tk-meta .tk-src { flex: 1 1 auto; }
.tk-meta .tk-due { --tk-line: 20px; justify-content: flex-start; }
.tk-meta .tk-due.is-button { min-width: 0; }
.tk-meta .tk-due-face { height: 20px; padding: 0 6px; line-height: 20px; }
.tk-meta .tk-due.is-bare .tk-due-face { padding: 0; }
/* «Принять» и «Спросить» узкой строки — под текстом, своей строкой: рядом с «⋯» тексту не осталось бы места. */
.tk-row.is-compact .tk-side { display: contents; }
.tk-row.is-compact .tk-side > .w-popwrap { grid-column: -2; grid-row: 1; align-self: start; display: flex; align-items: center; min-height: var(--tk-line); }
.tk-row.is-compact .tk-side > .tk-ctl { grid-column: 2 / -1; grid-row: 2; justify-self: start; margin-block: -6px -10px; margin-inline-start: -10px; }

/* Страница. */
.w-home.tk-page { max-width: none; margin-left: 0; }
.tk-bar { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tk-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.tk-filter { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; border-radius: 9px; font-size: 13px; color: var(--body); transition: background-color .12s; }
.tk-filter:hover, .tk-filter[aria-expanded="true"] { background: var(--secondary); }
.tk-filter .w-i { width: 14px; height: 14px; color: var(--muted-foreground); }
.tk-body { padding-top: 8px; }
.tk-clear { display: flex; align-items: center; gap: 6px; margin: 20px 0 -8px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.tk-clear .w-i { width: 14px; height: 14px; color: var(--accent-ink); }
.tk-group { margin-top: 24px; }
.tk-group-h { margin: 0 0 4px; font-size: 14px; line-height: 22px; font-weight: 560; letter-spacing: -.008em; color: var(--foreground); }
.tk-group.is-late .tk-group-h { color: var(--late); }
/* Заголовок группы и один раз на группу — сколько задач ждут ответа. */
.tk-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; }
.tk-group-head > .tk-group-h, .tk-group-head > .w-h3 { margin: 0; }
.tk-group-note { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
/* «Поручено мной» — группы по человеку: аватар и имя; текст строк — под именем. */
.tk-person { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 28px; margin-bottom: 4px; }
.tk-person .tk-group-h { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-group.is-person .tk-row { grid-template-columns: 24px minmax(0, 1fr) auto auto; column-gap: 10px; }
.tk-more-rows { display: inline-flex; align-items: center; min-height: 32px; margin-top: 2px; }
.tk-done { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--border); }
.tk-fold { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 2px; border-radius: 8px; font-size: 14px; color: var(--muted-foreground); transition: color .12s; }
.tk-fold:hover { color: var(--foreground); }
.tk-fold .w-i { width: 14px; height: 14px; }
.tk-fold + .tk-list { margin-top: 4px; }

/* Блок «Мои задачи» на «Сегодня». */
.tk-today .tk-list { margin-top: 6px; }
.tk-all { display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; font-size: 13px; }

/* Принятие обязательства: строка, которая просит действия (отклонено, не нужно), ряд предложений одной встречи. */
.tk-acc { font-size: 13px; line-height: 20px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.tk-acc.is-pending { color: var(--accent-ink); }
.tk-acc.is-overdue { color: var(--late); }
.tk-reasons { flex-wrap: wrap; }
.tk-other { display: flex; align-items: flex-end; gap: 8px; padding-top: 8px; }
.tk-pending { margin-block: 4px; }
.tk-pending-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13px; line-height: 20px; color: var(--body); }
.tk-pending-head > span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-pending-head > .w-btn { flex: none; }
.tk-new { display: inline-flex; align-items: center; height: 18px; margin-inline-end: 6px; padding: 0 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 2px; }

/* «Изменить срок»: чипы — радиокнопки одной формы, календарь и необязательный комментарий. */
.tk-due-pick { display: flex; flex-direction: column; gap: 10px; padding: 8px 10px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tk-chips legend { padding: 0 0 6px; }
.tk-chip { position: relative; display: inline-flex; }
.tk-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tk-chip span { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); font-size: 13px; color: var(--body); }
.tk-chip small { color: var(--muted-foreground); }
.tk-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.tk-chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.tk-comment { min-height: 56px; resize: vertical; }
.tk-due-pick .w-actions { justify-content: flex-end; }

/* Плашка первого открытия; фильтры и «⋯» страницы с недельным дайджестом. */
.tk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tk-weekly[aria-checked="true"] > .w-i { color: var(--accent-ink); }
.tk-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--secondary); font-size: 14px; line-height: 21px; color: var(--body); }
.tk-intro p { flex: 1 1 240px; margin: 0; overflow-wrap: anywhere; }
.tk-today .tk-intro { margin-top: 6px; }

/* Карточка задачи: текст — заголовок, под ним цитата, тихие факты, принятие, один ряд кнопок и форма нажатой под ним,
   история — последние записи, старые свёрнуты. */
.tk-card { display: flex; flex-direction: column; gap: 12px; max-width: 680px; margin-top: 12px; }
.tk-card p { margin: 0; }
.tk-card-text { overflow-wrap: anywhere; }
.tk-card .tk-quote { margin: 0; }
.tk-facts { margin: 0; }
.tk-fact-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tk-fact-person > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.tk-card .tk-acc { font-size: 14px; line-height: 21px; }
.tk-card-answers { flex-wrap: wrap; }
.tk-card-step { max-width: 480px; }
.tk-card-step .tk-due-pick, .tk-card-step .tk-date { padding-inline: 0; }
.tk-card .tk-date { max-width: 420px; }
.tk-card-more { display: none; }
.tk-transfer { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.tk-similar { padding: 10px 12px; border-radius: 12px; background: var(--secondary); font-size: 14px; line-height: 21px; color: var(--body); }
.tk-similar p { margin-bottom: 8px; overflow-wrap: anywhere; }
.tk-card-history { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tk-card-history .w-h3 { margin: 0; }
.tk-card-history .tk-fold { align-self: flex-start; }
.tk-history, .tk-history-older { margin: 0; padding-left: 18px; font-size: 13px; line-height: 21px; color: var(--muted-foreground); }
.tk-history li, .tk-history-older li { overflow-wrap: anywhere; }

/* Пометки задачи в итогах встречи. */
.w-item-done, .w-item-moved { color: var(--muted-foreground); }
.w-item-gone { color: var(--late); }
.w-item-acc { text-decoration: none; }
.w-item-acc:hover { color: var(--accent-ink); }

@media (max-width: 760px) {
  .tk-row { padding-block: 12px; }
  /* «Принять» и «Спросить» на телефоне — своей строкой под текстом, как в узкой колонке: справа остаются плашка и «⋯». */
  .tk-side { display: contents; }
  .tk-side > .w-popwrap { grid-column: -2; grid-row: 1; align-self: start; display: flex; align-items: center; min-height: var(--tk-line); }
  .tk-side > .tk-ctl { grid-column: 2 / -1; grid-row: 2; justify-self: start; margin-block: -6px -10px; margin-inline-start: -10px; }
  .tk-row .tk-said { max-width: calc(100% - 50px); }
  .tk-due-face { max-width: 9em; }
  .tk-menu-for { white-space: normal; }
  .tk-date .w-input, .tk-date .w-btn { min-height: 44px; }
  /* На телефоне на карточке у предложения две кнопки — «Принять» и «Изменить срок»; «Отклонить» уходит в «⋯» (r3 R3.4). */
  .tk-card-answers > .tk-card-reject { display: none; }
  .tk-card-more { display: inline-flex; margin-inline-start: auto; }
  .tk-card-answers > .w-btn { min-height: 44px; }
  .tk-chip span { min-height: 44px; }
  /* Фильтр остаётся в 32 px, но берёт палец: цель — 44 px за его краями, как у кнопок (app.css). */
  .tk-filter { position: relative; }
  .tk-filter::before { content: ""; position: absolute; inset: -6px 0; }
}