/* Люди, дедлайни, чат по задачі.
   Окремий файл, щоб не конкурувати за app.css. Усі кольори — з токенів
   :root у app.css, тому тема перемикається разом із рештою порталу. */

/* ---------------- аватари ---------------- */
.tp-av{
  --av-h:160;
  flex:none; display:inline-grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  font-family:var(--sans); font-size:.63rem; font-weight:700; letter-spacing:.01em;
  color:hsl(var(--av-h) 42% 26%);
  background:hsl(var(--av-h) 44% 88%);
  border:1px solid hsl(var(--av-h) 36% 78%);
  text-transform:uppercase; line-height:1; user-select:none;
}
.tp-av-sm{width:19px; height:19px; font-size:.55rem}
.tp-av-lg{width:36px; height:36px; font-size:.83rem}
.tp-av-more{
  flex:none; display:inline-grid; place-items:center; width:24px; height:24px;
  border-radius:50%; font-size:.6rem; font-weight:650; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--rule);
}
.tp-av-none{color:var(--ink-3); background:var(--surface-2); border-style:dashed}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tp-av{
    color:hsl(var(--av-h) 55% 84%);
    background:hsl(var(--av-h) 26% 26%);
    border-color:hsl(var(--av-h) 22% 36%);
  }
}
:root[data-theme="dark"] .tp-av{
  color:hsl(var(--av-h) 55% 84%);
  background:hsl(var(--av-h) 26% 26%);
  border-color:hsl(var(--av-h) 22% 36%);
}

/* ---------------- плашки на картці канбану / каскаду ---------------- */
.tp-badges{display:inline-flex; align-items:center; gap:5px; margin-left:auto; flex:none}
.tp-due{
  display:inline-flex; align-items:center; gap:3.5px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; font-weight:500;
  color:var(--ink-3); white-space:nowrap;
}
.tp-due svg{flex:none; opacity:.8}
/* Прострочене: акцент на самій даті, не заливка всієї картки. */
.tp-due.over{color:var(--danger); font-weight:650; background:var(--danger-soft);
  padding:2px 6px; border-radius:5px}
.tp-due.soon{color:var(--open); font-weight:600}

/* Тонка позначка збоку — помітна, але не кричить. */
.card.is-overdue{box-shadow:var(--lift), inset 3px 0 0 var(--danger)}
.card.is-duesoon{box-shadow:var(--lift), inset 3px 0 0 var(--open)}
.trow.is-overdue{box-shadow:inset 3px 0 0 var(--danger)}
.trow.is-duesoon{box-shadow:inset 3px 0 0 var(--open)}
.trow .tp-badges{margin-left:auto; padding-left:6px}

/* ---------------- люди і дедлайн: один компактний рядок ----------------
   Ніяких рамок із підписами: аватар-кружечок сам показує людину, роль живе
   в тултипі. Рядок стає в лінію з плашками стадії/пріоритету/версії. */
.tp-people{display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-height:26px}
/* Аватар + ІМ'Я: без імені рядок із кружечків не читався. Підписів-ролей
   немає — роль передає порядок і око перед спостерігачами. */
.tp-p{
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  /* Стеля ширини: довге ім'я обрізається ellipsis (повне — у tooltip),
     інакше одне прізвище виштовхує дедлайн на другий рядок. */
  max-width:148px;
  background:var(--surface); border:1px solid var(--rule); padding:2px 8px 2px 2px;
  border-radius:999px; font:inherit; color:inherit; line-height:1; min-height:26px;
  transition:border-color .14s ease;
}
.tp-p:hover{border-color:var(--accent)}
.tp-p .tp-av{width:20px; height:20px; font-size:.56rem}
.tp-pn{
  font-size:.75rem; font-weight:600; letter-spacing:-.005em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* На десктопі — повне ім'я; коротка форма живе в розмітці й вмикається
   медіазапитом на мобілці. */
.tp-pn-short{display:none}
.tp-p.is-empty{padding:1px; border-color:transparent; background:transparent}
/* Постановник → відповідальний читаються як напрямок. */
.tp-pgroup{display:inline-flex; align-items:center; gap:4px; min-width:0; flex-wrap:wrap}
.tp-arrow{color:var(--ink-3); font-size:.8rem; line-height:1; opacity:.75; flex:none}
.tp-pdiv{width:1px; height:16px; background:var(--rule-2); margin:0 1px; flex:none}
.tp-av-add{
  color:var(--ink-3); background:var(--surface-2); border-style:dashed;
  border-color:var(--rule-2);
}
.tp-p:hover .tp-av-add{color:var(--accent-ink); background:var(--accent-soft)}
.tp-av-mini{width:19px; height:19px}

/* Спостерігачі: око стоїть ПЕРЕД їхніми аватарами, щоб зв'язок був видимий. */
.tp-wgroup{display:inline-flex; align-items:center; gap:4px; min-width:0; flex-wrap:wrap}
.tp-eye{display:inline-grid; place-items:center; color:var(--ink-3); flex:none}
.tp-more{
  cursor:pointer; font:inherit; font-family:var(--mono); font-size:10px; font-weight:600;
  min-height:24px; padding:3px 8px; border-radius:999px; line-height:1;
  border:1px solid var(--rule); background:var(--surface-2); color:var(--ink-2);
}
.tp-more:hover{border-color:var(--accent); color:var(--accent-ink)}

/* Плашка дедлайну: іконка + значення, без підпису «ДЕДЛАЙН» над нею. */
.tp-duebtn{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; font:inherit;
  font-size:.75rem; font-weight:600; line-height:1; padding:4px 9px;
  border-radius:999px; border:1px solid var(--rule); background:var(--surface);
  color:var(--ink-2); transition:.14s ease; min-height:26px; white-space:nowrap;
}
.tp-duebtn:hover{border-color:var(--rule-2); color:var(--ink)}
.tp-duebtn svg{flex:none; opacity:.8}
.tp-duebtn.is-empty{color:var(--ink-3); font-weight:500; border-style:dashed}
.tp-duebtn.is-over{
  border-color:var(--danger); background:var(--danger-soft); color:var(--danger);
}
.tp-duebtn.is-soon{border-color:var(--open); color:var(--open)}

/* ---------------- розкладка картки: опис + чат ----------------
   Дві колонки потребують ширини: у 640px опис і чат виходили по ~300px,
   тобто дві вузькі смужки замість робочого простору. Модалка з чатом
   ширша за звичайну, пропорція 62/38 — опис головний, чат допоміжний. */
#cardModal .sheet{max-width:1100px}
/* Середина картки: забирає решту висоти між закріпленими шапкою і футером
   і НЕ прокручується сама — прокручуються дві колонки всередині, кожна
   окремо. `flex:1 1 auto` + `min-height:0` обов'язкові разом: без
   min-height:0 флекс-дитина не стискається нижче вмісту, і замість скролу
   колонок розпирало б усю модалку. */
.sheet-split{
  display:grid; gap:0; padding:0; overflow:hidden;
  flex:1 1 auto; min-height:0;
  grid-template-columns:minmax(0,62fr) minmax(340px,38fr);
}
.sheet-split > .cm-main{
  padding:15px 18px 18px; overflow-y:auto; display:grid; gap:13px;
  align-content:start; min-height:0; min-width:0;
  scrollbar-gutter:stable;
}
/* Смуги прокрутки видимі, але не грубі: користувач має бачити, ЩО саме
   прокручується — опис і переписка окремо. */
.sheet-split > .cm-main::-webkit-scrollbar,
.tp-feed::-webkit-scrollbar,
#cmEditor::-webkit-scrollbar{width:10px}
.sheet-split > .cm-main::-webkit-scrollbar-thumb,
.tp-feed::-webkit-scrollbar-thumb,
#cmEditor::-webkit-scrollbar-thumb{
  background:var(--rule-2); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
}
.sheet-split > .cm-main::-webkit-scrollbar-thumb:hover,
.tp-feed::-webkit-scrollbar-thumb:hover,
#cmEditor::-webkit-scrollbar-thumb:hover{background:var(--ink-3); background-clip:content-box}
.sheet-split > .cm-main,
.tp-feed,
#cmEditor{scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent}
.tp-chat{
  border-left:1px solid var(--rule); background:var(--surface-3);
  display:flex; flex-direction:column; min-height:0; min-width:0;
}
/* Шапка — рівно один рядок ≈40px. Заголовка «Переписка по задачі» тут не
   треба: панель і так очевидно чат, знизу в ній поле введення. */
.tp-chat-head{
  flex:none; min-height:40px; padding:0 10px 0 13px;
  border-bottom:1px solid var(--rule); background:var(--surface);
  display:flex; align-items:center; gap:10px;
}
.tp-chat-lbl{
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------------- перемикач сповіщень ----------------
   Один елемент: дзвіночок із підписом «Сповіщення». Стан — перекреслений
   дзвіночок і сірий колір. Про походження стану (явний вибір чи дефолт)
   інтерфейс не повідомляє: це внутрішня механіка, не справа користувача. */
.tp-notif{margin-left:auto; display:flex; align-items:center}
.tp-bell{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; font:inherit;
  font-size:.76rem; font-weight:600; line-height:1; padding:5px 9px;
  border-radius:999px; border:1px solid var(--rule); background:var(--surface);
  color:var(--ink-3); transition:.14s ease; min-height:28px; white-space:nowrap;
}
.tp-bell svg{flex:none}
.tp-bell:hover{border-color:var(--rule-2); color:var(--ink-2)}
.tp-bell.is-on{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);
}
/* min-height 34px, не 32: зона натискання дотягує до пальця на телефоні.
   Вага самого тогла НЕ змінюється — розмір перемикача задає .tp-switch-track
   (34x20), тут росте лише висота рядка-кнопки навколо нього. */
.tp-switch{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:transparent; border:0; padding:4px 0; font:inherit; color:inherit;
  min-height:34px; text-align:left;
}
.tp-switch-track{
  flex:none; position:relative; width:34px; height:20px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--rule-2); transition:.16s ease;
}
.tp-switch-knob{
  position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:1px solid var(--rule-2); transition:.16s ease;
}
.tp-switch.is-on .tp-switch-track{background:var(--accent); border-color:var(--accent)}
.tp-switch.is-on .tp-switch-knob{left:16px; background:var(--accent-on); border-color:transparent}
.tp-switch-lbl{font-size:.8rem; font-weight:550; line-height:1.25}
.tp-notif-src{
  font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3);
}
.tp-reset{
  background:transparent; border:0; padding:2px 0; cursor:pointer; font:inherit;
  font-size:.74rem; color:var(--accent); text-decoration:underline;
  text-underline-offset:2px;
}
.tp-hint{margin:0; font-size:.78rem; line-height:1.45; color:var(--ink-3)}

/* Особисті налаштування. Живуть у розділі «Налаштування профілю»
   (переїхали з «Користувачів» 16.09). margin-top тут більше не потрібен:
   відступ між картками задає сітка .prof-wrap. */
.tp-profile{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:15px 16px; display:grid; gap:9px;
}
.tp-profile h3{margin:0; font-size:.95rem; font-weight:650; letter-spacing:-.012em}

/* ---------------- стрічка повідомлень ---------------- */
.tp-feed{
  flex:1; min-height:0; overflow-y:auto; padding:12px 13px;
  display:flex; flex-direction:column; gap:11px;
}
.tp-feed.drop-on{outline:2px dashed var(--accent); outline-offset:-6px}
.tp-feed-empty{
  margin:auto; text-align:center; color:var(--ink-3); display:grid; gap:8px;
  justify-items:center; padding:22px 10px;
}
.tp-feed-empty p{margin:0; font-size:.83rem; line-height:1.5}
.tp-day{display:flex; align-items:center; gap:9px; color:var(--ink-3)}
.tp-day::before,.tp-day::after{content:""; flex:1; height:1px; background:var(--rule)}
.tp-day span{
  font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase;
}
.tp-msg{display:flex; gap:8px; align-items:flex-start}
.tp-msg-b{
  min-width:0; flex:1; background:var(--surface); border:1px solid var(--rule);
  border-radius:10px; padding:7px 10px 8px; display:grid; gap:5px;
}
.tp-msg.is-mine .tp-msg-b{background:var(--accent-soft); border-color:transparent}
.tp-msg-h{display:flex; align-items:center; gap:7px; min-width:0}
.tp-msg-h b{font-size:.78rem; font-weight:650; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tp-msg-h span{font-family:var(--mono); font-size:9px; color:var(--ink-3); flex:none}
/* Позначка правки — коротко і дрібно, без дати. */
.tp-edited{
  font-family:var(--mono); font-style:normal; font-size:8.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); opacity:.85; flex:none;
}
/* Дії над СВОЇМ повідомленням. На десктопі з'являються на ховері, на
   мобілці видимі постійно (там ховера немає). */
.tp-msg-act{
  margin-left:auto; flex:none; display:flex; gap:1px;
  opacity:0; transition:opacity .14s ease;
}
.tp-msg:hover .tp-msg-act,.tp-msg-act:focus-within{opacity:1}
.tp-msg-act button{
  display:grid; place-items:center; width:24px; height:24px; border-radius:6px;
  cursor:pointer; background:transparent; border:0; color:var(--ink-3);
}
.tp-msg-act button:hover{background:var(--surface-2); color:var(--ink)}
.tp-msg-act button[data-del]:hover{background:var(--danger-soft); color:var(--danger)}
/* Поки повідомлення в дорозі — приглушене, без кнопок дій. */
.tp-msg.is-sending .tp-msg-b{opacity:.6}

/* Режим правки — біля самого повідомлення, не внизу модалки. */
.tp-edit{display:grid; gap:6px}
.tp-edit-ta{
  font:inherit; font-size:.855rem; line-height:1.5; resize:none; width:100%;
  padding:7px 9px; border-radius:8px; border:1px solid var(--accent);
  background:var(--surface); color:var(--ink); min-height:40px; max-height:160px;
}
.tp-edit-ta:focus{outline:none}
.tp-edit-foot{display:flex; justify-content:flex-end; gap:6px}
.tp-msg-t{font-size:.855rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.tp-msg-imgs{display:flex; gap:5px; flex-wrap:wrap}
.tp-msg-imgs img{
  max-width:150px; max-height:150px; border-radius:7px; display:block;
  border:1px solid var(--rule); object-fit:cover;
}
.tp-msg-files{display:grid; gap:4px}
.tp-msg-file{
  display:flex; align-items:center; gap:6px; min-height:30px; padding:4px 8px;
  border-radius:7px; background:var(--surface-2); border:1px solid var(--rule);
  font-size:.79rem; font-weight:500; color:var(--ink-2); text-decoration:none;
}
.tp-msg-file:hover{border-color:var(--rule-2); color:var(--accent-ink)}
.tp-msg-file svg{flex:none; color:var(--ink-3)}
.tp-msg-file span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------------- поле введення ---------------- */
.tp-compose{
  flex:none; border-top:1px solid var(--rule); background:var(--surface);
  padding:9px 10px; display:grid; gap:7px;
  /* Клавіатура на мобілці не має перекривати поле. */
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));
}
.tp-pending{display:flex; gap:5px; flex-wrap:wrap}
.tp-chipfile{
  display:inline-flex; align-items:center; gap:5px; padding:3px 5px 3px 8px;
  border-radius:999px; background:var(--surface-2); border:1px solid var(--rule);
  font-size:.74rem; font-weight:500; max-width:100%;
}
.tp-chipfile button{
  flex:none; display:grid; place-items:center; width:18px; height:18px;
  border-radius:50%; background:transparent; border:0; cursor:pointer; color:var(--ink-3);
}
.tp-chipfile button:hover{background:var(--danger-soft); color:var(--danger)}
.tp-compose-row{display:flex; align-items:flex-end; gap:7px}
.tp-attach,.tp-send{
  flex:none; display:grid; place-items:center; width:36px; height:36px;
  border-radius:9px; cursor:pointer; border:1px solid var(--rule);
  background:var(--surface-2); color:var(--ink-2); transition:.14s ease;
}
.tp-attach:hover{border-color:var(--rule-2); color:var(--accent-ink)}
.tp-send{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.tp-send:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.tp-send:disabled{opacity:.55; cursor:default}
#tpInput{
  flex:1; min-width:0; resize:none; font:inherit; font-size:.86rem; line-height:1.45;
  padding:8px 10px; border-radius:9px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink); min-height:36px; max-height:140px;
}
#tpInput:focus{outline:none; border-color:var(--accent)}

/* ---------------- вкладки (мобілка) ---------------- */
.tp-tabs{display:none}
.tp-tab{
  flex:1; min-height:44px; cursor:pointer; font:inherit; font-size:.86rem; font-weight:600;
  background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.tp-tab.is-on{color:var(--accent-ink); border-bottom-color:var(--accent)}
.tp-tabn{
  font-family:var(--mono); font-size:9.5px; font-weight:600; min-width:17px;
  padding:1px 4px; border-radius:999px; background:var(--surface-2); color:var(--ink-3);
}
.tp-tab.is-on .tp-tabn{background:var(--accent-soft); color:var(--accent-ink)}

/* ---------------- вибір людей ---------------- */
.tp-pick-sheet{max-height:calc(100vh - 40px)}
.tp-pick-sheet .sheet-title{display:grid; gap:2px; flex:1; min-width:0}
.tp-pick-hint{font-family:var(--mono); font-size:9px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3)}
.tp-pick-search{
  flex:none; display:flex; align-items:center; gap:8px; padding:9px 14px;
  border-bottom:1px solid var(--rule); background:var(--surface); color:var(--ink-3);
}
.tp-pick-search input{
  flex:1; min-width:0; font:inherit; font-size:.87rem; background:transparent;
  border:0; color:var(--ink); min-height:34px;
}
/* ПРИЧИНА «подвійної рамки» над полем пошуку: обводок малювалось ДВІ —
   глобальна :focus-visible на самому <input> (app.css) і ще одна,
   inset box-shadow на цій обгортці. Обидві акцентного кольору, між ними
   просвіт — звідси «рамка в рамці».

   Лишаємо РІВНО ОДНУ і саме на обгортці: інпут прозорий і без рамки,
   тому обводка по його краю виглядає вужчою за смужку пошуку, у якій
   лежить ще й лупа. Глобальне правило не чіпаємо — воно потрібне решті
   порталу; гасимо outline адресно, тільки для цього поля, і тільки тому,
   що видимий фокус тут дає обгортка. Доступність не постраждала:
   фокус з клавіатури видно, просто однією лінією. */
.tp-pick-search:focus-within{background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--accent)}
.tp-pick-search input:focus,
.tp-pick-search input:focus-visible{outline:none}
.tp-pick-list{flex:1; min-height:0; overflow-y:auto; padding:6px}
/* Рядок ≥ 52px: реальна мішень для пальця, а не рядок випадайки. */
.tp-pick-row{
  width:100%; display:flex; align-items:center; gap:10px; min-height:52px;
  padding:7px 10px; border-radius:9px; cursor:pointer; text-align:left;
  background:transparent; border:1px solid transparent; font:inherit; color:inherit;
}
.tp-pick-row:hover{background:var(--surface-2)}
.tp-pick-row.is-on{background:var(--accent-soft); border-color:var(--accent)}
.tp-pick-txt{display:grid; gap:1px; min-width:0; flex:1}
.tp-pick-txt b{font-size:.87rem; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.tp-pick-txt span{font-size:.75rem; color:var(--ink-3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.tp-pick-tick{
  flex:none; display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; border:1.5px solid var(--rule-2); color:transparent;
}
.tp-pick-row.is-on .tp-pick-tick{background:var(--accent); border-color:var(--accent);
  color:var(--accent-on)}
.tp-pick-clear{margin-top:2px; border-top:1px solid var(--rule); border-radius:0 0 9px 9px}

/* ---------------- дедлайн ---------------- */
.tp-date{
  font:inherit; font-size:.9rem; padding:9px 11px; border-radius:9px; min-height:44px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink); width:100%;
}
.tp-date:focus{outline:none; border-color:var(--accent)}

/* ================= КОМПАКТНИЙ ВЕРХ КАРТКИ =================
   Усе нижче — тільки в модалці задачі (.cm-main), щоб не зачепити інші
   модалки порталу, які використовують ті самі класи .fld / .chk / .edtools. */

.cm-main .cmtitle{padding-bottom:6px}

/* Плашки стадії/пріоритету/версії стають в один рядок із людьми. Дрібні
   підписи «СТАДІЯ / ПРІОРИТЕТ / ВЕРСІЯ» подвоювали ширину кожної плашки —
   значення говорять самі, роль лишається в tooltip. */
.cm-main #cmTags{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.cm-main #cmTags .cfield-lbl{display:none}
.cm-main #cmTags .cfield-face{padding-top:5px; padding-bottom:5px; min-height:28px}
.cm-main #cmTags,.cm-main #tpPeople{min-width:0}
/* Плашки і люди — одна стрічка, а не два рядки поспіль. */
.cm-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.cm-meta-div{width:1px; height:18px; background:var(--rule-2); flex:none}
@media (max-width:560px){
  /* На телефоні розділювач між групами лише плутає — групи й так
     переносяться на свої рядки. */
  .cm-meta-div{display:none}
  .cm-meta{gap:7px}
  /* Плашки не мусять розтягуватись на весь рядок кожна: три поспіль з'їдали
     три рядки над описом. Ширина — під вміст. */
  .cm-main #cmTags .cfield{width:auto; flex:0 0 auto}
  .cm-main #cmTags .cfield-face{width:auto}
}

/* Опис: панель інструментів В ОДИН рядок, без переносу на другий. */
.cm-main .edtools{flex-wrap:nowrap; overflow-x:auto; padding:5px 6px; gap:2px}
.cm-main .edtools::-webkit-scrollbar{height:0}
.cm-main .edtools button{padding:4px 7px; min-width:26px}
.cm-main .edhint{padding:5px 10px; font-size:.72rem; line-height:1.4}

/* ---------------- чекліст: рядок ≈34px, а не 56 ---------------- */
.cm-main .checks{display:grid; gap:0}
.cm-main .chk{
  /* Рядки списку не повинні виглядати як окремі поля введення: без рамки і
     фону, розділення — тонка лінія. */
  background:transparent; border:0; border-radius:0;
  border-bottom:1px solid var(--rule);
  padding:2px 2px 2px 0; gap:7px; min-height:34px; align-items:center;
}
.cm-main .chk:last-child{border-bottom:0}
.cm-main .chk:hover{background:var(--surface-3)}
.cm-main .chk.chk-over{box-shadow:inset 0 2px 0 var(--accent)}
/* Зона тику чекбокса більша за сам чекбокс — через padding, не через розмір. */
.cm-main .chk input[type=checkbox]{
  width:15px; height:15px; margin:0; box-sizing:content-box; padding:9px 6px;
}
.cm-main .chk-t{
  font-size:.87rem; line-height:1.35; padding:3px 0;
  /* Довгий пункт не роздуває рядок: максимум два рядки. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
/* Під час редагування обмеження знімаємо, інакше не видно, що набираєш. */
.cm-main .chk-t:focus{-webkit-line-clamp:unset; display:block; overflow:visible}
.cm-main .chk-grip{padding:6px 2px}
.cm-main .chk-move .iconbtn{padding:3px}
.cm-main .chk [data-del]{padding:5px}

/* Поле «Новий пункт…» — у масштаб рядка списку, не 56px. */
.cm-main .addchk{gap:6px; margin-top:5px}
.cm-main .addchk input{padding:6px 10px; font-size:.86rem; border-radius:8px; min-height:34px}
.cm-main .addchk .btn{min-height:34px; padding-top:5px; padding-bottom:5px}

.cm-main .fld > span{font-size:9.5px; letter-spacing:.09em}
.cm-main .files{gap:4px}
.cm-main .file{padding:6px 10px; font-size:.84rem; min-height:34px}
.cm-main .dropzone{padding:9px 11px}

/* ================= МОБІЛКА =================
   Чат збоку тут не вміщається — обидві частини стають вкладками, і в потоці
   лишається рівно одна. Панель на всю висоту листа, поле введення внизу. */
/* Дві колонки тримаємо лише поки на кожну є місце. Нижче 900px опис і чат
   перетворилися б у дві вузькі смужки — тому одна колонка і вкладки. */
@media (max-width:900px){
  /* Одна колонка — але на всю доступну ширину, не 720px: звужувати лист,
     коли вміст уже в один стовпець, немає сенсу. */
  #cardModal .sheet{max-width:860px}
  .sheet-split{grid-template-columns:minmax(0,1fr)}
  .tp-tabs{display:flex; flex:none; border-bottom:1px solid var(--rule);
    background:var(--surface); padding:0 6px}
  .tp-chat{border-left:0; border-top:0}
  .sheet-split[data-tab="desc"] > .tp-chat{display:none}
  .sheet-split[data-tab="chat"] > .cm-main{display:none}
  .sheet-split[data-tab="chat"]{overflow:hidden}
}
@media (max-width:560px){
  .modal{padding:0}
  /* dvh — щоб футер із «Зберегти» не ховався під адресним рядком браузера. */
  .sheet{
    max-width:none; max-height:100vh; height:100vh;
    max-height:100dvh; height:100dvh; border-radius:0; border:0;
  }
  #cardModal .sheet{max-width:none}
  .sheet-split > .cm-main{padding:13px 14px 20px}
  /* Службовий рядок лишається рядком і на телефоні — він з кружечків,
     переноситься сам, і дедлайн не обрізається, бо він плашка, не поле. */
  .tp-people{gap:5px}
  .tp-duebtn{min-height:32px}
  /* Місця мало: ім'я коротшає до «Кирило К.» (повне лишається в tooltip),
     а ширина обмежена, щоб два імені стали в рядок без переповнення. */
  .tp-p{max-width:46vw}
  .tp-pn{font-size:.74rem}
  .tp-pn .tp-pn-full{display:none}
  .tp-pn .tp-pn-short{display:inline}
  .tp-feed{padding:10px 11px}
  .tp-msg-imgs img{max-width:118px; max-height:118px}
  .tp-attach,.tp-send{width:44px; height:44px}
  #tpInput{min-height:44px; font-size:.95rem}
  .tp-pick-search input{font-size:1rem; min-height:44px}
  .tp-pick-row{min-height:56px}
  .tp-date{font-size:1rem}
  .tp-bell{min-height:32px}
  /* Ховера немає — дії над своїм повідомленням видимі постійно. */
  .tp-msg-act{opacity:1}
  .tp-msg-act button{width:30px; height:30px}
  /* Ручка перетягування і на мобілці видима: без неї функція виглядає
     відсутньою, бо підсвітити її нічим. */
  .cm-main .chk-grip{color:var(--ink-3); padding:8px 3px}
  .cm-main .chk-move{opacity:1}
  .cm-main .chk{min-height:42px}
  .cm-main .addchk input,.cm-main .addchk .btn{min-height:40px}
}