/* compact_home_v1: порядок блоков на главной — сперва дневник, потом
   необязательный навигатор. Файл меняет ТОЛЬКО раскладку: размеры, цвета,
   шрифты и примитивы (кольцо, .bar, .glass-card, чипы) берём из дизайн-системы
   (theme.css, app.css), чтобы главная не выглядела собранной из чужих кусков. */

/* Шапка карточки: дата и возврат к сегодня. Кольцо и остаток — строкой ниже,
   поэтому сама карточка больше не flex-строка. */
#view-dashboard .hero-card { display: block; padding: 12px 18px 18px; cursor: default; }
.dash-summary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* Календарь стал чипом с датой: положение в строке новое, вид — тот же
   .hero-cal из дизайн-системы (плитка --surface-2, приглушённая иконка). */
.dash-summary-head .hero-cal {
  position: static;
  width: auto;
  height: 30px;
  gap: 6px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.dash-summary-head .hero-today { position: static; margin-left: auto; }

.dash-energy { display: flex; align-items: center; gap: var(--spacing-md); }
.dash-figures { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Подпись под числом ограничена шириной просвета кольца на её высоте: если
   текст всё же окажется длиннее, он перенесётся по центру, а не наедет на дугу. */
#view-dashboard .ring-label { max-width: 96px; line-height: 1.2; text-align: center; }
/* Ориентир под остатком — той же служебной строкой, что и подпись остатка. */
.dash-target { font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* Шкалы Б/Ж/У рисует общий App.renderMacros (те же .goal-row и .bar, что в
   дневной сводке). Здесь только раскладка: три колонки под остатком, подпись и
   цифры друг под другом — в строку они в такую ширину не помещаются. */
.dash-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Без целей строка пустая — иначе под остатком висит полоса отступа. */
.dash-macros:empty { display: none; }
.dash-macros > * { min-width: 0; }
.dash-macros .goal-row { display: block; margin-bottom: 5px; font-size: 11px; }
.dash-macros .goal-row span:last-child {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  /* Колонка узкая: длинное значение обрезаем многоточием, а не пускаем
     наезжать на соседнюю. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-macros .goal-skel-row + .goal-skel-row { margin: 0; }
/* Приглашение задать цели — во всю ширину: в колонке под белки оно
   разваливалось на четыре строки по два слова. */
.dash-macros .empty { grid-column: 1 / -1; }

/* «План питания под норму» — подвал карточки, а не вставленная в неё плитка:
   пунктирная рамка поверх фона --surface-2 внутри карточки читалась как чужой
   элемент, наклеенный сверху. Тот же приём, что у строки недели в карточке
   «Сегодня»: волосяная линия сверху, приглушённый текст и шеврон. */
#dash-plan-cta .mp-dash-cta {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
#dash-plan-cta .mp-dash-cta:active { opacity: 0.6; }

/* Одно действие под шапкой. В Telegram плавающей кнопки нет вовсе, поэтому
   на главной это единственный способ добавить еду. */
.dash-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: var(--spacing-md);
}
.dash-add svg { width: 20px; height: 20px; }
body[data-view="dashboard"] .fab-add { display: none; }

/* Последние приёмы: та же карточка, что и остальные блоки экрана. */
.dash-diary { margin-bottom: var(--spacing-md); }
.dash-diary-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.dash-diary-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.dash-diary-head .link-btn { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-size: 13px; }
.dash-diary-head svg { width: 15px; height: 15px; }
#dash-recent-meals { padding: 0 16px; }
.dash-meal {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur) var(--ease);
}
.dash-meal:active { transform: scale(0.99); }
.dash-meal + .dash-meal { border-top: 1px solid var(--border); }
.dash-meal-copy { flex: 1; min-width: 0; }
.dash-meal-name { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Тип приёма — иконкой, как в дневнике: подпись «Обед» рядом с иконкой
   читается быстрее, чем одно слово среди цифр. */
.dash-meal-time { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.dash-meal-time svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.dash-meal-kcal { flex: none; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dash-meal-kcal small { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
/* Раскрытие дня целиком. Строки за пределами первых двух въезжают по очереди:
   рост карточки читается как движение, а не как рывок высоты. */
.dash-meal.is-fresh {
  animation: dash-meal-in 0.28s var(--ease) backwards;
  animation-delay: calc((var(--row, 0) - 2) * 45ms);
}
@keyframes dash-meal-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.dash-meal-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 12px 0 14px;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dash-meal-more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}
.dash-meal-more svg.up { transform: rotate(180deg); }

.dash-meal-empty, .dash-meal-retry {
  display: block;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.dash-meal-retry { color: var(--color-primary); font-weight: 700; cursor: pointer; }

/* Нутриенты убраны под раскрытие: заголовок остаётся .card-title, чтобы
   свёрнутая карточка читалась так же, как развёрнутая. */
#view-dashboard #nutrient-card { padding: 0 16px; }
#nutrient-card > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#nutrient-card > summary::-webkit-details-marker { display: none; }
#nutrient-card > summary .card-title { flex: 1; min-width: 0; margin: 0; }
#nutrient-card > summary .nutri-chev { flex: none; width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
#nutrient-card[open] > summary .nutri-chev { transform: rotate(180deg); }
#nutrient-summary { padding-bottom: 16px; }

/* Достижения открываются и из «Прогресса»: на главной серия живёт карточкой,
   но искать её там, где лежит вся остальная динамика, тоже логично. */
.progress-tools { margin-bottom: var(--spacing-md); }

/* На телефоне колонка Б/Ж/У — это треть от того, что осталось от кольца, и
   «160 / 240 г» в 12 px туда не влезает ни на 360 px, ни на 414 px (там кольцо
   вырастает до 132 px и отбирает ширину обратно). Поэтому пороги разные:
   мелкий шрифт цифр — на всех телефонах, а подпись в кольце — только там, где
   само кольцо уменьшено. */
@media (max-width: 480px) {
  .dash-macros { gap: 4px; }
  .dash-macros .goal-row,
  .dash-macros .goal-row span:last-child { font-size: 10px; }
}

/* Кольцо здесь 112 px (app.css), просвет на высоте подписи — около 84 px по
   хорде, а «ККАЛ СЪЕДЕНО» в 10 px занимало 88 и наезжало на дугу. */
@media (max-width: 400px) {
  #view-dashboard .hero-card { padding: 10px 14px 16px; }
  #view-dashboard .ring-label { font-size: 9px; letter-spacing: 0.2px; margin-top: 4px; max-width: 82px; }
  .dash-energy { gap: 12px; }
}

/* Самые узкие экраны: рядом с кольцом остаётся ~130 px, и три колонки в них
   уже не размечаются. Две с переносом читаются, третья уходит на строку ниже. */
@media (max-width: 340px) {
  .dash-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ПК: главная стала линейным сценарием (кольцо → действие → дневник), и в две
   колонки он читается вразнобой. Ширину ограничиваем, чтобы строки не
   растягивались на весь экран. */
@media (min-width: 900px) {
  #view-dashboard:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 640px;
    margin-inline: auto;
  }
  #view-dashboard > * { width: 100%; }
  #view-dashboard > .glass-card { margin-bottom: var(--spacing-md); }
  /* Колонка Б/Ж/У тут втрое шире телефонной — мелкий шрифт в ней выглядит
     случайным. Подпись и значение оставляем друг под другом: в строку они
     перестают помещаться уже на планшете, а ширина карточки от окна не зависит. */
  .dash-macros { gap: 16px; }
  .dash-macros .goal-row { font-size: 12px; }
  .dash-macros .goal-row span:last-child { font-size: 13px; }
}

/* Кто просил меньше движения — получает мгновенное раскрытие. */
@media (prefers-reduced-motion: reduce) {
  .dash-meal.is-fresh { animation: none; }
  .dash-meal-more svg { transition: none; }
}