/* External Skeleton · Stage 3 · екран «Треки»
   Токени і базові класи (.btn, .link, .micro, .mono, .plan__head/.plan__close,
   .plan__counter, .plan__error, .plan__empty) — з tokens.css/styles.css/plan.css.
   Нових кольорів тут немає навмисно. Мобільний < 900 px, десктоп >= 900 px.

   Прострочене позначається вагою і --text-1, а НЕ --zone-red: червоний у цій
   системі означає недоторканність слота, а не провал. Плутати не можна. */

/* --------------------------------------------- вхід: два рядки в підвалі */

/* .page__foot описано в plan.css під одну кнопку; тут поруч з'явився другий
   вхід — розкладка правиться тут, щоб не чіпати чужий файл. */
.page__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
/* ціль торкання 48 px: підкреслення лишається по тексту, клікабельна зона більша */
.page__foot .link,
.tracks__bar .link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

/* ------------------------------------------------------------ оболонка */

.tracks__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
}
.tracks__summary { margin: 0; }

/* поки їде зріз, повтор запиту вимкнено — стан видно тим самим текстом/3 */
.link[disabled] { color: var(--text-3); cursor: default; }

/* ------------------------------------------------------- рядок трека */

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

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

/* Ціль торкання — уся згорнута строка; з клавіатури це звичайна кнопка
   з aria-expanded. */
.track__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;
}
.track__toggle:focus-visible { outline-offset: 0; }

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

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

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

/* Номером подписываются блоки фокуса в календаре, поэтому он моноширинный
   (цифры одной ширины ищутся взглядом быстрее) и приглушённый: главное в
   строке — название. Мельче названия его делать нельзя — его читают первым. */
.track__number {
  font: var(--w-medium) 16px/22px var(--font-mono);
  color: var(--text-2);
}
/* Тот же приём, что в строке фактов: разделитель принадлежит следующей части,
   поэтому у трека без номера (узла просто нет) он не появляется. */
.track__name > span + span::before {
  content: "\0020\00B7\0020";
  font-weight: var(--w-regular);
  color: var(--text-2);
}

/* Уся суть згорнутого рядка: лічильники, нерозібране і вік активності
   в одному мовчазному моно-рядку. Розкривати нічого не треба. */
.track__facts {
  font: var(--w-regular) 11px/17px var(--font-mono);
  color: var(--text-2);
}
/* роздільник між частинами рядка; порожня (hidden) частина зникає разом зі своїм */
.track__facts > span + span::before { content: "\0020\00B7\0020"; }

.track__overdue,
.track__last.is-stale {
  color: var(--text-1);
  font-weight: var(--w-medium);
}

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

.track__panel {
  padding: 0 0 var(--sp-4) 30px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.track-group__title { margin-bottom: var(--sp-1); }

.track-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.track-item__text {
  font: var(--w-regular) 14px/20px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.track-item__meta {
  font: var(--w-regular) 11px/16px var(--font-mono);
  color: var(--text-2);
}
.track-item__meta > span + span::before { content: "\0020\00B7\0020"; }
.track-item__overdue {
  color: var(--text-1);
  font-weight: var(--w-medium);
}

/* Строка действий есть только у задач группы «на мне». Кнопка получает полную
   цель касания 48 px: панель раскрывают на телефоне, и промах здесь означает
   отметку соседней задачи. */
.track-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-4);
}
.track-item__actions .link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}
/* Отмеченная задача: подчёркивание снимаем — это уже не ссылка, а отметка
   о факте. Цвет выключенного состояния даёт .link[disabled] выше. */
.track-item__actions .link[disabled] { text-decoration: none; }

.track-panel__empty {
  font: var(--w-regular) 13px var(--font-sans);
  color: var(--text-2);
}

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

@media (min-width: 900px) {
  .tracks__list { max-width: 900px; }

  .track__toggle { gap: var(--sp-4); padding: 14px 0; }
  .track__mark { font-size: 15px; }
  .track__name { font-size: 17px; line-height: 24px; }
  .track__number { font-size: 17px; line-height: 24px; }
  .track__facts { font-size: 12px; line-height: 18px; }

  .track__panel { padding-left: 34px; }
  .track-item__text { font-size: 15px; line-height: 22px; }
  .track-item__meta { font-size: 12px; }
}