/* ============================================================
   Раздел «nutrition» — стили компонентов, появившихся при редизайне.
   Всё оформление берётся из css/tokens.css: литеральных цветов,
   произвольных кеглей и отступов вне сетки здесь быть не должно.
   Старые правила этого раздела пока живут в style.css и вытесняются
   по мере переписывания экранов.

   Файл подключается ПОСЛЕ style.css, поэтому правила с той же
   специфичностью здесь перекрывают прежние — этим и пользуемся,
   чтобы не трогать style.css.
   ============================================================ */

/* ============================================================
   ШАПКА: СЧЁТЧИК СЕРИИ
   ============================================================ */

/* Иконка внутри плашки серии наследует цвет текста (раньше цвет нёс
   эмодзи-огонёк, то есть картинка решала за палитру). */
.diary-streak {
  gap: var(--s1);
  padding: var(--s1) var(--s3);
  background: var(--accent-soft);
  /* Мелкий оранжевый текст на светлой подложке — только --accent-text:
     яркий --accent даёт здесь около 3:1, для 13px этого мало. */
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  box-shadow: none;
}

.diary-streak__num {
  font-variant-numeric: tabular-nums;
}

/* Плашка ставится hidden, пока серия не загрузилась или равна нулю, но
   display:inline-flex перебивает атрибут hidden — без этого правила на экране
   висел пустой кружок. */
.diary-streak[hidden] {
  display: none;
}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ДАТЫ
   ============================================================ */

/* Кнопки-стрелки теперь содержат SVG — центрируем содержимое. */
.diary-datebar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
}

/* Дата — сжатым шрифтом в верхнем регистре, как заголовок табло; ISO-строка
   под ней остаётся мелкой служебной подписью. */
.diary-datebar__date {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.diary-datebar__iso {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-btn);
  color: var(--muted);
}

/* ---------- Мини-календарь (общий .cal-pop из app.js) ----------
   Правила уточнены до контейнера дневника, чтобы не трогать календарь
   тренировок. Выбранный день — оранжевая заливка, сегодня — оранжевая
   точка под числом вместо тонкой обводки. */
.diary-datebar__cal .cal-pop {
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.diary-datebar__cal .cal-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.diary-datebar__cal .cal-nav {
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

.diary-datebar__cal .cal-nav:active {
  background: var(--accent-soft);
}

.diary-datebar__cal .cal-dow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.diary-datebar__cal .cal-cell {
  position: relative;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.diary-datebar__cal button.cal-cell:active {
  background: var(--surface-2);
}

.diary-datebar__cal .cal-cell--today {
  box-shadow: none;
  color: var(--accent-text);
  font-weight: var(--fw-bold);
}

.diary-datebar__cal .cal-cell--today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.diary-datebar__cal .cal-cell--selected {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--fw-bold);
}

.diary-datebar__cal .cal-cell--selected::after {
  background: var(--on-accent);
}

.diary-datebar__cal button.cal-cell--selected:active {
  background: var(--accent-press);
}

.diary-datebar__nav:active {
  background: var(--accent-soft);
}

.diary-datebar__nav:disabled {
  opacity: .4;
  cursor: default;
}

/* Подпись даты — тоже кнопка (открывает мини-календарь), а две строки текста
   давали высоту около 36px. Доводим зону нажатия до --tap-min. */
.diary-datebar__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
}

/* ============================================================
   ПРИЁМЫ ПИЩИ
   ============================================================ */

.diary-meal__head {
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

/* Название приёма — надзаголовок (.eyebrow) на шаг крупнее базового:
   рядом стоит иконка 24px, и 11px подпись при ней терялась. */
.diary-meal__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
}

/* Иконка приёма пищи — подложка цвета действия вместо разноцветного эмодзи. */
.diary-meal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Сумма приёма — крупное число сжатым шрифтом, единица мельче и тише. */
.diary-meal__kcal {
  font-size: var(--fs-h2);
  color: var(--text);
}

.diary-meal__kcal-unit {
  margin-left: var(--s1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--muted);
}

/* Название записи переносится на вторую строку, а не режется: с бейджем
   количества даже «Кофе с молоком 250 мл» не влезал в одну и терял хвост. */
.diary-entry__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  line-height: var(--lh-heading);
}

/* Калории записи — тем же сжатым шрифтом, что и сумма приёма. */
.diary-entry__kcal {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* Приём пищи БЕЗ записей: одна строка вместо карточки с пустым состоянием.
   Пять пустых состояний на экране (общее + по одному в каждом приёме)
   повторяли одну и ту же мысль пять раз. */
.diary-meal-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 52px;
  margin-bottom: var(--s2);
  padding: 0 var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.diary-meal-row:active {
  transform: scale(.99);
  background: var(--surface-2);
}

.diary-meal-row__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--data-neutral);
}

/* Название пустого приёма набрано так же, как заголовки-надзаголовки в
   заполненных карточках, только крупнее: строка читается как «слот» дня. */
.diary-meal-row__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  color: var(--text);
}

/* «Плюс» в строке пустого приёма — подсказка, что строка добавляет. */
.diary-meal-row__add {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}

/* Кнопка «Добавить» внутри карточки приёма пищи: вложенный блок, поэтому
   заливка --surface-2 и ни границы, ни тени. */
.diary-meal__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--s3);
  padding: 0 var(--s3);
  border: none;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.diary-meal__add:active {
  background: var(--accent-soft);
}

/* ============================================================
   ЗАПИСЬ ДНЕВНИКА
   ============================================================ */

/* Зона нажатия удаления — 44px вместо прежних 32 на 32 px. Кнопка стоит впритык
   к зоне открытия редактора, и на маленькой мишени промах приводил к
   мгновенному удалению записи. */
.diary-entry__del {
  width: var(--tap-min);
  height: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--radius);
  color: var(--muted);
}

.diary-entry__del:active {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ============================================================
   ПУСТОЕ СОСТОЯНИЕ ДНЯ (одно на экран)
   Тёмный блок с фотографией (.hero из style.css) — тот же приём, что у
   тренировки дня на «Сегодня». Старые правила .diary-empty* в style.css
   красили его как серую подпись по центру — перекрываем.
   ============================================================ */

.diary-empty {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  margin-bottom: var(--s3);
  padding: var(--s5);
  text-align: left;
  color: var(--hero-text);
}

.diary-empty__title {
  margin: var(--s2) 0 0;
  font-size: var(--fs-h1);
  color: var(--hero-text);
}

.diary-empty__text {
  margin: var(--s2) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--hero-muted);
}

.diary-empty__cta {
  margin-top: var(--s4);
}

/* Второй вход (лист со всеми способами) — ссылка, а не вторая кнопка:
   на афише должно быть одно главное действие. */
.diary-empty__more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--s1);
  min-height: var(--tap-min);
  margin-top: var(--s1);
  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;
}

.diary-empty__more svg {
  color: var(--accent);
}

/* Ошибка загрузки дня: заголовок — как заголовок секции, иконка — статус. */
.diary-error__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s3);
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  color: var(--danger);
}

.diary-error__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

/* ============================================================
   ИТОГ ДНЯ
   Карточка-табло: главное число крупно, БЖУ — три числа в ряд в цветах
   нутриентов, прогресс — толстая дорожка с оранжевой заливкой.
   ============================================================ */

.diary-total {
  padding: var(--s5) var(--s4) var(--s4);
}

/* Надзаголовок над числом, а не рядом: «Итого за день (нетто)» вместе с
   44px числом в одну строку не помещается на 375px. */
.diary-total__row {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  margin-bottom: var(--s3);
}

/* .eyebrow задан в style.css раньше старого .diary-total__caption (15px),
   поэтому кегль и плотность приходится повторить здесь. */
.diary-total__caption {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--muted);
}

.diary-total__value {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--text);
}

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

.diary-total__macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.diary-total__macro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.diary-total__macro-value {
  font-size: var(--fs-h2);
  color: var(--text);
}

.diary-total__macro-unit {
  margin-left: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.diary-total__macro--p .diary-total__macro-label { color: var(--data-protein); }
.diary-total__macro--f .diary-total__macro-label { color: var(--data-fat); }
.diary-total__macro--c .diary-total__macro-label { color: var(--data-carb); }

.diary-progress__track {
  height: 10px;
  background: var(--surface-3);
}

.diary-progress__fill {
  background: var(--accent);
}

/* Подписи под дорожкой: длинная левая («с учётом тренировок») не делит
   строку с остатком пополам, а уводит остаток на свою строку целиком. */
.diary-progress__labels {
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.diary-progress__hint {
  margin-left: auto;
  white-space: nowrap;
}

/* Баланс «съедено − сожжено = итого»: числа сжатым шрифтом; сожжённое —
   предупреждающий цвет, итог — оранжевый текст (читаемый на светлом). */
.diary-balance {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.diary-balance__burned {
  color: var(--warning);
}

.diary-balance__net {
  color: var(--accent-text);
}

/* Подсказка «цель не задана» над кнопкой настройки цели. */
.diary-total__nogoal-hint {
  margin: 0 0 var(--s2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
}

.diary-total__nogoal-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-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;
}

/* ============================================================
   СЕКЦИЯ «АКТИВНОСТЬ» (расход калорий)
   ============================================================ */

.diary-act__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

/* Заголовок и сумма секции — как у приёма пищи: надзаголовок + число. */
.diary-act__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
}

.diary-act__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
}

.diary-act__total {
  font-size: var(--fs-h2);
  color: var(--text);
  white-space: nowrap;
}

.diary-act-item__kcal {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.diary-act__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.diary-act-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
}

.diary-act-item:first-child {
  border-top: none;
}

.diary-act-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
}

.diary-act-item__main {
  flex: 1;
  min-width: 0;
}

.diary-act-item__name {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-act-item__meta {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.diary-act-item__kcal {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.diary-act-item__del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.diary-act-item__del:active {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Замок вместо кнопки удаления у записей AI-тренера: они принадлежат
   журналу тренировок, дневник их только показывает. */
.diary-act-item__locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  color: var(--data-neutral);
}

/* ---------- Фолбэк-заглушка «Активность» (если App.paywall недоступен) ---------- */

.diary-act-locked {
  text-align: center;
}

.diary-act-locked__title {
  margin: 0 0 var(--s1);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.diary-act-locked__sub {
  margin: 0 0 var(--s4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--muted);
}

/* ---------- Чипы типа активности ---------- */

.act-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}

.act-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  flex: 1 1 auto;
  min-height: var(--tap-min);
  padding: 0 var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.act-chip.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* Чипы (тип активности и приём пищи) — мини-кнопки: тот же сжатый капс,
   что у .btn, поэтому белая подпись на оранжевом проходит по контрасту. */
.act-chip,
.page-diary .meal-chip,
.diary-sheet .meal-chip {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
}

.page-diary .meal-chip.is-active,
.diary-sheet .meal-chip.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* ============================================================
   НИЖНИЕ ЛИСТЫ (единый паттерн формы и подтверждения)
   ============================================================ */

/* Лист — по-настоящему приподнятая поверхность, поэтому --surface + тень
   и НИКАКОЙ границы. */
.diary-sheet__panel {
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-2);
  padding: var(--s2) var(--gutter) calc(var(--safe-bottom) + var(--s5));
}

.diary-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  margin: var(--s1) auto var(--s4);
}

.diary-sheet__title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

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

/* Заголовок группы листа — надзаголовок сжатым шрифтом с разрядкой. */
.diary-sheet__group-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
  margin: 0 var(--s1) var(--s2);
}

/* Пункт листа: вложенный блок листа — заливка без границы и тени. */
.diary-sheet__item {
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--fs-body);
}

.diary-sheet__item:active {
  background: var(--accent-soft);
}

.diary-sheet__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  font-size: 0; /* гасим прежний эмодзи-кегль */
}

.diary-sheet__item-body {
  flex: 1;
  min-width: 0;
}

.diary-sheet__item-label {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

/* Пояснение под подписью: чем этот способ отличается от соседнего. */
.diary-sheet__item-hint {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--muted);
}

.diary-sheet__item-lock {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  opacity: 1;
}

.diary-sheet__item--locked .diary-sheet__item-icon {
  opacity: 1;
  color: var(--muted);
}

/* Главный пункт листа — «Сфотографировать». Камеры в таббаре больше нет,
   и самый быстрый способ записать еду должен находиться взглядом первым:
   подложка цвета действия и залитая иконка вместо серой плашки. Размер
   иконки прежний — иначе подпись главного пункта съезжала вправо от
   подписей остальных, и столбец текста ломался. */
.diary-sheet__item--primary {
  min-height: 64px;
  background: var(--accent-soft);
}

.diary-sheet__item--primary .diary-sheet__item-icon {
  background: var(--accent);
  color: var(--on-accent);
}

.diary-sheet__item--primary .diary-sheet__item-label {
  color: var(--accent-text);
}

.diary-sheet__item--primary:active {
  background: var(--border);
}

/* ============================================================
   ВАЛИДАЦИЯ ФОРМ НА МЕСТЕ
   ============================================================ */

/* Поле с ошибкой: подсветка говорит ГДЕ, тост — ЧТО. Раньше был только тост,
   и проблемное поле приходилось искать глазами. */
.field__input.is-invalid,
.field--invalid .field__input {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field__input.is-invalid:focus,
.field--invalid .field__input:focus {
  border-color: var(--danger);
  outline: none;
}

/* ============================================================
   ПЛАВАЮЩАЯ КНОПКА «+»
   ============================================================ */

/* Приподнятая плавающая кнопка: оранжевый круг, кольцо цвета фона страницы
   и оранжевое свечение. Кольцо отделяет круг от контента под ним в обеих
   темах (на чёрном белая обводка выглядела бы заплаткой), свечение делает
   кнопку главным действием экрана даже на тёмном фоне, где мягкой тени нет. */
.diary-fab {
  width: 60px;
  height: 60px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0; /* внутри теперь SVG, а не символ «+» */
  box-shadow: 0 0 0 4px var(--bg), var(--shadow-accent);
}

.diary-fab:active {
  background: var(--accent-press);
}

/* display:flex из style.css перебивает атрибут hidden — без этого правила
   скрытая на пустом дне «+» оставалась бы на экране. */
.diary-fab[hidden] {
  display: none;
}

/* Запас снизу под плавающую «+»: она висит над таббаром (16px + 64px),
   а общий нижний отступ #view рассчитан только на таббар. Без запаса круг
   закрывал правый край последней строки страницы. */
.page-diary {
  padding-bottom: var(--s7);
}

/* ============================================================
   БЫСТРЫЙ ПОВТОР («Недавние» / «Вчера»)
   ============================================================ */

.yday__item {
  background: var(--surface-2);
}

.yday__title {
  font-family: var(--font-display);
  letter-spacing: var(--ls-eyebrow);
}

/* Скелетон строки быстрого повтора. Без своей высоты он брал 160px от
   .skeleton-block, и лист открывался тремя огромными пульсирующими плитами
   вместо намёка на будущие строки списка. */
.yday__skeleton {
  height: 56px;
  margin-bottom: var(--s2);
}

/* Тело строки — тоже кнопка (автозаполняет форму), а две строки текста давали
   высоту около 35px. Доводим зону нажатия до --tap-min. */
.yday__body {
  justify-content: center;
  min-height: var(--tap-min);
}

/* Кнопка быстрого добавления — полноценная зона нажатия 44px. */
.yday__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0;
}

.yday__add:active {
  background: var(--accent);
  color: var(--on-accent);
}

/* ============================================================
   AI-ПАНЕЛИ: ИКОНКИ В ЗАГОЛОВКАХ И КНОПКАХ
   ============================================================ */

.diary-recommend__title,
.plan-locked__title,
.plan-shopping__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Заметка AI-тренера: иконка отдельно от текста, текст не переносится под неё. */
.diary-recommend__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  background: var(--accent-soft);
  color: var(--text);
}

/* Кнопка замены блюда в плане меню — зона нажатия 44px. */
.plan-dish__swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: var(--tap-min);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
}

.plan-dish__swap:active {
  background: var(--accent-soft);
}

.plan-meal__icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

/* ============================================================
   КАРТОЧКА «НАПОМИНАНИЯ О ЕДЕ»
   ============================================================ */

/* Шеврон свёртки — одна иконка с поворотом (раньше был символ стрелка-треугольник).
   Разворот на 180° к её собственному повороту даёт «вверх». */
.acc-fold__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

/* Кнопка удаления времени напоминания — зона нажатия 44px. */
.mr-time-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0;
}

.mr-time-del:active {
  background: var(--danger-soft);
  color: var(--danger);
}

.mr-time-add__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}

/* «Что съесть?» внизу итога дня: строка-действие во всю ширину карточки,
   отделённая волосяной линией, — продолжение вопроса «сколько осталось». */
.diary-suggest {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--s4);
  padding: var(--s3) 0 0;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.diary-suggest__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.diary-suggest__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.diary-suggest__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: var(--lh-heading);
}

.diary-suggest__sub {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.diary-suggest__end {
  flex-shrink: 0;
  color: var(--muted);
}

.diary-suggest:active {
  opacity: .7;
}

/* Вторая строка-действие идёт вплотную к первой: одна линия-разделитель
   на пару, без двойного отступа. */
.diary-suggest + .diary-suggest--plan {
  margin-top: var(--s3);
}

/* ============================================================
   ЛИСТ «ДОБАВИТЬ ЕДУ»: библиотека, свой продукт, рецепт
   ============================================================ */

/* Заголовок с крестиком: в режиме списков у листа нет кнопки «Отмена»,
   а после нескольких «+» подряд закрыть его нужно одним тапом. */
.fsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.fsheet__head .diary-sheet__title {
  margin: 0;
}

.fsheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: calc(-1 * var(--s2));
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 0;
}

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

/* Приём пищи — одной строкой из четырёх чипов: он сверху, и две строки
   по два чипа съедали бы место списков. */
.fsheet__meal {
  margin-bottom: var(--s3);
}

.fsheet__meal .meal-chips {
  flex-wrap: nowrap;
  gap: var(--s1);
}

.diary-sheet .fsheet__meal .meal-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--s1);
  font-size: var(--fs-xs);
}

.fsheet__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--tap-min);
  margin: calc(-1 * var(--s2)) 0 var(--s1);
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
}

.fsheet__back svg {
  transform: rotate(180deg);
}

.manual-unit-hint {
  margin: calc(-1 * var(--s2)) 2px var(--s3);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* «Запомнить в Мои продукты». */
.fsheet__keep {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  cursor: pointer;
}

.fsheet__keep[hidden] {
  display: none;
}

.fsheet__keep input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.fsheet__keep small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--muted);
}

/* «Ввести своё блюдо», «Свой продукт», «Новый рецепт» — пунктирная строка:
   действие «создать», а не ещё одна запись списка. */
.fsearch__own,
.flib__new {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--tap-min);
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
}

.fsearch__own svg,
.flib__new svg {
  flex-shrink: 0;
}

.fsearch__own:active,
.flib__new:active {
  background: var(--accent-soft);
}

.flib__new {
  margin: 0 0 var(--s2);
}

.flib {
  margin-top: var(--s1);
}

.flib[hidden] {
  display: none;
}

/* Вкладки — прокручиваемая строка: пять подписей на узком экране не
   помещаются, а переносить их на вторую строку — терять место списка. */
.flib__tabs {
  display: flex;
  gap: var(--s1);
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.flib__tabs::-webkit-scrollbar {
  display: none;
}

.flib__tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  white-space: nowrap;
}

.flib__tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.flib__body {
  margin-top: var(--s3);
}

.flib__item {
  gap: var(--s2);
}

.flib__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: var(--tap-min);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 0;
}

.flib__edit:active {
  background: var(--surface);
}

/* Уже добавлено (лист открыт дальше) — зелёная галочка вместо «+». */
.yday__add.is-done,
.yday__add.is-done:active {
  background: var(--success-soft);
  color: var(--success);
}

/* Подсказки-пояснения в листах продукта и рецепта. */
.diary-sheet p.field__hint {
  margin: calc(-1 * var(--s2)) 2px var(--s3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

/* ---------- Рецепт ---------- */

.recipe__title {
  margin-top: var(--s3);
}

.recipe-ing {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.recipe-ing__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s1) var(--s1) var(--s3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.recipe-ing__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.recipe-ing__name {
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recipe-ing__kcal {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.diary-sheet .recipe-ing__grams {
  flex: 0 0 72px;
  width: 72px;
  min-height: 40px;
  padding: 0 var(--s2);
  text-align: right;
}

.recipe-ing__unit {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.recipe-ing__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0;
}

.recipe-ing__remove:active {
  background: var(--surface);
}

.recipe__own-toggle {
  margin: 0 0 var(--s3);
}

.recipe-own {
  margin: 0 0 var(--s3);
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.recipe__yield {
  margin-top: var(--s2);
}

/* Итог рецепта: всё блюдо, 100 г и порция — крупные цифры, как на «Сегодня». */
.recipe-sum {
  margin: 0 0 var(--s4);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}

.recipe-sum:empty {
  display: none;
}

.recipe-sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--border);
}

.recipe-sum__row:first-child {
  border-top: none;
}

.recipe-sum__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.recipe-sum__label small,
.recipe-sum__val small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--muted);
}

.recipe-sum__val {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: right;
}

.recipe-sum__val b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text);
}