/* External Skeleton · Stage 5 · екран «Люди» — «кого я чекаю». Токени і
   базові класи (.btn, .link, .micro, .mono, .plan__head/.plan__close,
   .plan__error, .plan__error-text, .plan__empty, .plan__note) — з
   tokens.css/styles.css/plan.css. Нових кольорів тут немає навмисно:
   жодних health-score, світлофорів і оцінок «людина проблемна» — та сама
   заборона, що й для екрана треків (tracks.css). Мобільний < 900 px,
   десктоп >= 900 px. */

.people__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: var(--touch-min);
}

/* ------------------------------------------- підказки на злиття дублів */

.people-merge {
  margin: var(--sp-2) 0 var(--sp-6);
}

.people-merge__hint {
  font: var(--w-regular) 12.5px/1.5 var(--font-sans);
  color: var(--text-2);
  margin: 0 0 var(--sp-3);
}

.people-merge__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.people-merge__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
}

.people-merge__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  font: var(--w-semibold) 15px/20px var(--font-sans);
  color: var(--text-1);
}
/* Роздільник належить другому імені — той самий прийом, що й скрізь у
   застосунку (track__name, ref-track): зникає разом з відсутньою частиною. */
.people-merge__names > span + span::before {
  content: "\0020/\0020";
  font-weight: var(--w-regular);
  color: var(--text-2);
}

/* Причина співпадіння («same surname» тощо) — текст від сервера, не оцінка
   важливості. Обводка замість заливки — той самий тихий прийом, що й у
   card__tag--context: пояснення «чому саме ця пара», а не попередження. */
.people-merge__reason {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-4);
  font: var(--w-regular) 11px/14px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin: 0;
}

.people-merge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.people-merge__actions .btn { min-height: var(--touch-min); }

/* ---------------------------------------- картки-групи (28.09, замість пар) */

.people-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin: 0 0 var(--sp-2);
}
.people-group__chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: var(--w-medium) 13px/18px var(--font-sans);
  color: var(--text-1);
}

.people-group__members {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
  padding: 0;
  list-style: none;
}
.people-group__member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--divider);
}
.people-group__member:last-child { border-bottom: 0; }

.people-group__keep,
.people-group__check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--touch-min);
  color: var(--text-2);
}
.people-group__keep input,
.people-group__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--text-1);
}

.people-group__name {
  font: var(--w-semibold) 14px/20px var(--font-sans);
  color: var(--text-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.people-group__reject {
  font-size: 12px;
  min-height: var(--touch-min);
}

/* Тост відміни — над секцією підказок, з'являється лише після «merge all». */
.people-group__toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  font: var(--w-regular) 13px/18px var(--font-sans);
  color: var(--text-1);
}
.people-group__toast .link { min-height: var(--touch-min); }

/* ------------------------------------------------------- список людей */

.people__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-2);
}

.person { border-bottom: 1px solid var(--divider); }

/* Ціль торкання — уся згорнута строка, як і в рядку трека. */
.person__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-3) 0;
  border: 0;
  border-radius: var(--radius-8);
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.person__toggle:focus-visible { outline-offset: 0; }

.person__mark {
  flex: none;
  width: 18px;
  margin-top: 2px;
  font: var(--w-medium) 14px/22px var(--font-mono);
  color: var(--text-2);
  text-align: center;
}

.person__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.person__name {
  font: var(--w-semibold) 16px/22px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.person__meta {
  font: var(--w-regular) 11px/17px var(--font-mono);
  color: var(--text-2);
}

/* Pending — головне число екрана: скільки людина тримає на собі прямо
   зараз. Виділення лише розміром і вагою шрифту, без кольору й значків —
   та сама вимога, що діє для лічильників на екрані треків. */
.person__pending {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  margin-top: 2px;
}
.person__pending-n {
  font: var(--w-semibold) 22px/26px var(--font-mono);
  color: var(--text-1);
}
.person__pending-label {
  color: var(--text-2);
}

/* ------------------------------------------------------------- панель */

.person__panel {
  padding: 0 0 var(--sp-4) 30px;
}

.person-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.person-task {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.person-task__text {
  font: var(--w-regular) 14px/20px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.person-task__track {
  font: var(--w-regular) 11px/16px var(--font-mono);
  color: var(--text-2);
}

.people-panel__empty,
.people-panel__note {
  font: var(--w-regular) 13px var(--font-sans);
  color: var(--text-2);
  margin: 0;
}

/* ================================================== desktop >= 900 px */

@media (min-width: 900px) {
  .people__list,
  .people-merge { max-width: 900px; }

  .person__toggle { gap: var(--sp-4); padding: 14px 0; }
  .person__mark { font-size: 15px; }
  .person__name { font-size: 17px; line-height: 24px; }
  .person__meta { font-size: 12px; line-height: 18px; }
  .person__pending-n { font-size: 26px; line-height: 30px; }

  .person__panel { padding-left: 34px; }
  .person-task__text { font-size: 15px; line-height: 22px; }
  .person-task__track { font-size: 12px; }
}

/* ================================================ 004a · повестки людей
   Признаки «reports to me» / «check often» — тумблеры-обводки: состояние читается
   накреслением, не цветом. Повестка (agenda-person.js) — тихий текст, без красного и
   процентов (БП-11); ⚑ и чипы — agenda.css. */

.person__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 0 var(--sp-3) 30px;
}
.person-flag {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: none;
  font: var(--w-regular) 12px var(--font-mono);
  color: var(--text-2);
  cursor: pointer;
}
.person-flag[aria-pressed="true"] { border-color: var(--text-2); color: var(--text-1); }
.person-flag:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
.person__flags .link { font-size: 12px; color: var(--text-2); }

.people-unmatched { margin: var(--sp-2) 0 var(--sp-4); }
.people-unmatched__list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.people-unmatched__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--divider);
}
.people-unmatched__name { font: var(--w-semibold) 15px/20px var(--font-sans); color: var(--text-1); }
.people-unmatched__note { font: var(--w-regular) 11px/16px var(--font-mono); color: var(--text-2); }
.people-unmatched select,
.agenda-whose__select,
.agenda-blocker__reason {
  min-height: 40px;
  max-width: 100%;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: var(--bg-0);
  color: var(--text-1);
  font: var(--w-regular) 14px var(--font-sans);
}

.agenda-person { display: flex; flex-direction: column; gap: var(--sp-3); }
.agenda-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 36px;
}
.agenda-section__title { margin: 0; color: var(--text-2); }
.agenda-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.agenda-item,
.agenda-task {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) 0 var(--sp-3);
  border-bottom: 1px solid var(--divider);
}
.agenda-item__top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.agenda-item__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.agenda-item__text {
  font: var(--w-regular) 14px/20px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.agenda-item__meta { font: var(--w-regular) 11px/16px var(--font-mono); color: var(--text-2); }
.agenda-item__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.agenda-act {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: none;
  font: var(--w-medium) 13px var(--font-sans);
  color: var(--text-1);
  cursor: pointer;
}
.agenda-act[aria-expanded="true"] { border-color: var(--text-2); }
.agenda-act[disabled], .agenda-flag[disabled] { color: var(--text-3); cursor: default; }
.agenda-act:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
.agenda-asked { min-height: 36px; }
.agenda-whose,
.agenda-blocker { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.agenda-blocker__reason { min-height: 40px; flex: 1 1 200px; }

.agenda-task__label { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.agenda-task__check { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--text-1); }
.agenda-task__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.agenda-undo, .agenda-error {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0;
  font: var(--w-regular) 13px/18px var(--font-sans);
  color: var(--text-2);
}
.agenda-undo__label { font-size: 12px; }
.agenda-selbar {
  position: sticky;
  bottom: 0;
  padding: var(--sp-2) 0;
  background: var(--bg-0);
}
.agenda-panel .agenda-selbar { background: var(--bg-1); }

/* ---------------------------------------- срез 2: «скопировать сообщение» */
.agenda-compose { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-2) 0; }
.agenda-compose__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.agenda-compose__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--divider);
}
.agenda-compose__item.is-excluded .agenda-compose__item-text { color: var(--text-3); }
.agenda-compose__item-text { font: var(--w-regular) 14px/20px var(--font-sans); color: var(--text-1); }
.agenda-compose__remove { flex: none; font-size: 12px; }
.agenda-compose__text {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-10);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: 14px;
  line-height: 20px;
}
.agenda-compose__cancel { align-self: flex-start; }

@media (min-width: 900px) {
  .person__flags { padding-left: 34px; }
  .agenda-item__text { font-size: 15px; line-height: 22px; }
}