/* =====================================================
   Раздел «Активность»: расход за период, карточки упражнений,
   история тренировок и подробности по тапу.
   Общие примитивы (.tcard, .tstat, .chip) берём из trends.css —
   раздел должен выглядеть частью того же приложения, а не отдельной вкладкой.
   ===================================================== */

#view-activity.is-loading { opacity: 0.6; transition: opacity var(--dur) var(--ease); }

.act-periods { margin-bottom: 10px; }
#act-tabs { margin-bottom: 14px; }

/* ----------------- Главное число периода ----------------- */
.act-hero { display: flex; flex-direction: column; gap: 12px; }
.act-hero-top { display: flex; flex-direction: column; gap: 2px; }
.act-hero-num {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--text-primary);
  line-height: 1.05;
}
.act-hero-unit {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-muted);
  margin-left: 6px;
  letter-spacing: 0;
}
.act-hero-cap { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.act-hero-today {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: 11px;
}
.act-hero-today b { color: var(--text-primary); }
.act-hero-today svg { width: 17px; height: 17px; color: var(--color-accent); }
.act-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
}
.act-hero-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

.act-tiles { margin-bottom: 14px; }
.act-chart-card { padding-bottom: 10px; }
.act-chart {
  width: 100%;
  height: 190px;
  display: block;
  /* Вертикальную прокрутку страницы оставляем системе, горизонтальное ведение
     забираем себе — им человек листает подсказку по столбикам. */
  touch-action: pan-y;
}
.act-chart-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.act-chart-legend i {
  flex: 0 0 auto;
  width: 14px;
  height: 0;
  border-top: 1.5px dashed var(--color-accent);
}
.act-chart-legend b { margin-left: auto; font-weight: 600; opacity: 0.7; }

/* ----------------- Заголовок блока со ссылкой ----------------- */
.act-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 2px 9px;
}
.act-block-head span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: -0.2px;
}
.act-link {
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
}

/* ----------------- Строка тренировки ----------------- */
.act-list { display: flex; flex-direction: column; gap: 9px; }
.act-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 12px 13px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.act-row:active { transform: scale(0.985); }
.act-row-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.act-row-icon svg { width: 18px; height: 18px; }
.act-row-main { flex: 1; min-width: 0; }
.act-row-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-row-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.act-row-kcal {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: right;
}
.act-row-kcal span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.act-row-chev { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }

/* ----------------- Карточка упражнения ----------------- */
.act-ex-cards { margin-bottom: 4px; }
.act-ex .tcard-name { display: inline-flex; align-items: center; gap: 5px; }
.act-ex-icon { width: 13px; height: 13px; color: var(--color-primary); }
/* Подпись метрики под числом. Без неё «60 кг» у жима не отличить от тоннажа,
   а «7.35 км» — от суммы за месяц. */
.act-ex-metric {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 1px;
}
.act-ex-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.act-ex-when { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
/* Без спарклайна карточка заканчивается текстом, и нижний отступ под график
   выглядит обрезанным. */
.act-ex.no-spark { padding-bottom: 12px; }
/* Рост и падение подсвечиваем нейтрально по смыслу «больше/меньше»: в силовых
   рост объёма — прогресс, но у разгрузочной недели снижение это план, а не провал. */
.tcard-delta.is-up { color: var(--color-primary); }
.tcard-delta.is-down { color: var(--text-muted); }

/* ----------------- Пустой раздел ----------------- */
.act-empty { text-align: center; padding: 26px 18px; }
.act-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.act-empty-icon svg { width: 26px; height: 26px; }
.act-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.act-empty-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.act-empty-text i { color: var(--text-primary); font-style: normal; font-weight: 600; }

/* ----------------- Подробности (подраздел) ----------------- */
/* Дата — кнопка: тап открывает нативный календарь и переносит запись на
   выбранный день. Скрытый <input type="date"> лежит рядом и позиционируется
   от этой обёртки, иначе на iOS календарь всплывает не у кнопки. */
.act-wo-head { position: relative; }
.act-wo-date {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.act-wo-date:active { transform: scale(0.97); }
.act-wo-date .tstat-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
}
.act-wo-date .tstat-label svg { width: 11px; height: 11px; }

.act-sess-card { padding: 4px 0; margin-bottom: 0; }
.act-sess {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.act-sess:last-child { border-bottom: none; }
.act-sess-date {
  flex: 0 0 68px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
/* Время — второй строкой под датой: в один день тренировок может быть две, и
   различает их только оно. */
.act-sess-date span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.act-sess-body { flex: 1; font-size: 13px; color: var(--text-primary); }
.act-sess-kcal { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); }

.act-ex-list { padding: 4px 0; margin-bottom: 0; }
.act-exrow {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.act-exrow:last-child { border-bottom: none; }
.act-exrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.act-exrow-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.act-exrow-name svg { width: 14px; height: 14px; color: var(--color-primary); }
.act-exrow-kcal { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.act-exrow-meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.act-exrow-note { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }

.act-comment {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.act-comment svg { width: 16px; height: 16px; color: var(--color-primary); flex: 0 0 auto; margin-top: 1px; }

.act-hint {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
  padding: 0 2px;
}
.act-hint svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

/* ----------------- Удаление тренировки: фолбэк-кнопка ----------------- */
/* Показывается, только если нативную нижнюю кнопку Telegram отдать не вышло
   (веб, старый клиент). Липнет к низу подраздела: карточка тренировки длинная,
   и кнопка в общем потоке уехала бы за край экрана. */
.act-wo-delbar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: auto calc(-1 * var(--spacing-md)) 0;
  padding: 10px var(--spacing-md)
    calc(10px + env(safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg-app) 62%, transparent);
}
/* Собственный нижний отступ подраздела панели мешает — кнопка повисает над
   пустой полосой вместо того, чтобы прижаться к краю. Тело и карточку тянем на
   всю высоту, иначе margin-top: auto некуда уводить панель на коротком экране. */
.subview:has(.act-wo-delbar:not([hidden])) { padding-bottom: 0; }
.subview-body:has(.act-wo-delbar:not([hidden])) { flex: 1 0 auto; }
.subview-body:has(.act-wo-delbar:not([hidden])) > .tdetail { flex: 1 0 auto; }

/* На ПК подраздел — центрированная модалка, там панель не липнет. */
@media (min-width: 900px) {
  .subview:has(.act-wo-delbar:not([hidden])) { padding-bottom: 40px; }
  .subview-body:has(.act-wo-delbar:not([hidden])) { flex: 0 1 auto; }
  .act-wo-delbar { position: static; margin: 0; padding: 0; background: none; }
}

/* ----------------- Объявление о переезде «Рецептов» ----------------- */
.moved-notice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--surface));
}
.moved-notice-icon { color: var(--color-primary); flex: 0 0 auto; margin-top: 1px; }
.moved-notice-icon svg { width: 20px; height: 20px; }
.moved-notice-body { flex: 1; min-width: 0; }
.moved-notice-title {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.moved-notice-text { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.moved-notice-actions { display: flex; gap: 8px; margin-top: 11px; }
.moved-notice-actions .chip.primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}