/* ============================================================
   ЭКРАН «СЕГОДНЯ» (page-today.js)
   ------------------------------------------------------------
   Витрина состояния дня: кольцо калорий, быстрые действия с едой,
   тренировка дня, вес и серия.
   Ни одной формы — только числа, одна главная кнопка действия и два
   коротких входа в запись еды.
   Цвета, размеры и отступы — исключительно из css/tokens.css.
   ============================================================ */

/* ---------- Шапка ---------- */
.td-head {
  margin-bottom: var(--s4);
}

.td-head__greeting {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}

.td-head__date {
  margin: var(--s1) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ---------- Общая карточка экрана ---------- */
.td-card {
  padding: var(--s5) var(--s4);
}

/* Карточка-приглашение: единственное действие по центру. */
.td-card--cta {
  text-align: center;
}

/* ---------- Кольцо калорий ---------- */
.td-cal {
  text-align: center;
}

.td-ring {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0 auto;
}

.td-ring__svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Отсчёт от 12 часов по часовой стрелке — так читают любой циферблат. */
  transform: rotate(-90deg);
}

/* Дорожка на тон темнее карточки: на белом --surface-2 её почти не было
   видно, и незаполненная часть кольца читалась как разрыв. */
.td-ring__track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 11;
}

.td-ring__value {
  fill: none;
  stroke: var(--accent);
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur) var(--ease);
}

/* Перебор нормы — предупреждение, а не ошибка: человек не сделал ничего
   непоправимого, поэтому янтарный, а не красный. */
.td-ring__value--over {
  stroke: var(--warning);
}

.td-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Главное число экрана: сжатый шрифт (.num из style.css) и самый крупный
   кегль — остаток калорий должен считываться с расстояния. */
.td-ring__num {
  font-size: var(--fs-display);
}

/* «Съедено из нормы»: числа сжатым шрифтом, служебные слова — мелкие и
   приглушённые, чтобы взгляд цеплялся за цифры, а не за предлоги. */
.td-cal__sum {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: var(--fs-h2);
}

.td-cal__sum-of {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  color: var(--muted);
}

.td-cal__burned {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ---------- Полосы БЖУ ---------- */
.td-macros {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s5);
  text-align: left;
}

.td-macro__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s1);
}

/* Подпись нутриента — надзаголовок (.eyebrow), окрашенный в цвет своей
   полосы: так подпись и полоса связываются без легенды. */
.td-macro__value {
  font-size: var(--fs-h3);
}

.td-macro__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.td-macro__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur) var(--ease);
}

/* Три нутриента различаются цветом: одинаковые полосы невозможно
   сопоставить с подписью, не перечитывая её каждый раз. */
.td-macro--p .td-macro__fill { background: var(--data-protein); }
.td-macro--f .td-macro__fill { background: var(--data-fat); }
.td-macro--c .td-macro__fill { background: var(--data-carb); }

.td-macro--p .td-macro__label { color: var(--data-protein); }
.td-macro--f .td-macro__label { color: var(--data-fat); }
.td-macro--c .td-macro__label { color: var(--data-carb); }

/* ---------- Быстрые действия с едой ----------
   Ряд из двух кнопок под кольцом калорий. Вес второстепенный: карточная
   поверхность с контуром, подпись цвета текста, а цвет действия — только у
   иконки. Залитые оранжевые кнопки спорили бы с «Начать» в блоке
   тренировки, а на экране должно быть одно главное действие.
   Иконка над подписью: подпись сжатым капсом в одну строку никогда не
   переносится, а кнопка получает высоту, за которую удобно взяться. */
.td-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.td-quick__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-width: 0;
  min-height: 72px;
  padding: var(--s3) var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.td-quick__icon {
  display: inline-flex;
  color: var(--accent);
}

.td-quick__label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

.td-quick__btn:active {
  background: var(--surface-2);
}

/* ---------- Блок тренировки (.hero из style.css) ----------
   Тёмный блок с фотографией и белым заголовком. Заголовок крупнее, чем у
   карточек: это главное действие дня. */
.td-workout {
  margin-bottom: var(--s3);
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.td-workout__title {
  font-size: var(--fs-display);
}

.td-workout__btn {
  margin-top: var(--s4);
}

/* Приглашение без подписки: текст по центру на том же тёмном блоке. */
.td-workout--locked {
  text-align: center;
  justify-content: center;
}

.td-workout--locked .td-empty__icon {
  color: var(--accent);
}

.td-workout--locked .td-empty__title {
  color: var(--hero-text);
}

.td-workout--locked .td-empty__text {
  color: var(--hero-muted);
}

/* Разделы без действия (отдых, «сделано») ведут внутрь ссылкой, а не
   кнопкой: кнопка обещает действие, которого сейчас нет. */
.td-workout__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--tap-min);
  margin-top: var(--s2);
  padding: 0;
  border: none;
  background: none;
  color: var(--hero-text);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  cursor: pointer;
}

.td-workout__link svg {
  color: var(--accent);
}

/* Идущая тренировка: оранжевая полоса по левому краю тёмного блока —
   человек в процессе, это должно бросаться в глаза. */
.td-workout--active {
  box-shadow: inset 4px 0 0 var(--accent);
}

/* Сделано и отдых — блок спокойнее: без фото, обычный тёмный фон. */
.td-workout--done,
.td-workout--rest {
  background-image: none;
  min-height: 0;
}

.td-workout--done .td-workout__title,
.td-workout--rest .td-workout__title {
  font-size: var(--fs-h1);
  color: var(--hero-muted);
}

/* ---------- Плитки «вес» и «серия» ---------- */
.td-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.td-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.td-tile:active {
  background: var(--surface-2);
}

/* Надзаголовок плитки (.eyebrow) с иконкой в цвет действия. */
.td-tile__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s1);
}

.td-tile__label svg {
  color: var(--accent);
}

/* Значение плитки — крупное число (.num); единица рядом мельче и тише,
   чтобы «72,4 кг» читалось как показание табло, а не как фраза. */
.td-tile__value {
  font-size: var(--fs-h1);
}

.td-tile__unit {
  margin-left: var(--s1);
  font-size: var(--fs-h3);
  color: var(--muted);
}

.td-tile__delta {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Снижение веса не красим зелёным, а рост — красным: цель бывает любой,
   и приложение не вправе решать, какая динамика «хорошая». */
.td-tile__delta--up,
.td-tile__delta--down {
  font-weight: var(--fw-semibold);
  color: var(--text);
}

/* ---------- Пустые состояния ---------- */
.td-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.td-empty__title {
  margin: 0;
  font-size: var(--fs-h2);
}

.td-empty__text {
  margin: var(--s2) 0 var(--s4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
}

.td-empty .btn {
  width: auto;
  min-width: 180px;
  margin: 0 auto;
}

/* ---------- Скелетон под кольцо ---------- */
.td-skel-ring {
  height: 176px;
  border-radius: var(--radius-lg);
}

/* ---------- Узкие экраны ---------- */
@media (max-width: 360px) {
  .td-ring {
    width: 152px;
    height: 152px;
  }

  .td-tiles {
    grid-template-columns: 1fr;
  }

  .td-quick {
    gap: var(--s2);
  }

  /* Три действия в ряд: на 360px «ЧТО СЪЕСТЬ?» не хватало трёх пикселей и
     она обрезалась многоточием. Отдаём подписи поля кнопки и снимаем
     разрядку — кегль не трогаем, он и так на нижней ступени для кнопок. */
  .td-quick__btn {
    padding-left: var(--s1);
    padding-right: var(--s1);
  }

  .td-quick__label {
    letter-spacing: 0;
  }
}

/* Совсем узкие экраны (320px): подпись на ступень мельче, иначе третья
   кнопка всё равно не помещается. */
@media (max-width: 340px) {
  .td-quick__label {
    font-size: var(--fs-sm);
  }
}