/* =====================================================
   Нутриенты: расширенная сводка на главной и модалка
   с разбивкой по приёмам.
   ===================================================== */

/* ----------------- Расширенная сводка нутриентов ----------------- */
.nutri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 9px;
}
.nutri-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 12px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur) var(--ease);
}
.nutri-tile:active { transform: scale(0.98); }
/* Полоска заполненности по верхнему краю плитки. */
.nutri-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--fill-track);
}
.nutri-fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  transition: width 0.6s var(--ease);
}
.nutri-fill.over { background: var(--color-danger); }
.nutri-fill.under { background: var(--color-accent); }
.nutri-val { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.nutri-val i { font-size: 11px; font-weight: 600; color: var(--text-muted); font-style: normal; margin-left: 2px; }
.nutri-label { font-size: 11.5px; color: var(--text-secondary); }

/* Пустое состояние: данных о нутриентах ещё нет. Занимает всю ширину сетки. */
.nutri-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 16px 14px 8px;
}
.nutri-empty-ic {
  width: 46px;
  height: 46px;
  margin-bottom: 5px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--surface-2));
  color: var(--color-primary);
}
.nutri-empty-ic svg { width: 24px; height: 24px; }
.nutri-empty-t { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.nutri-empty-s { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); max-width: 280px; }

/* ----------------- Модалка нутриентов (разбивка по приёмам) ----------------- */
.nm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.nm-h-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.nm-h-date { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.nm-close {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nm-close svg { width: 18px; height: 18px; }
.nm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}
.nm-chip {
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.nm-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.nm-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.nm-total-val {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-primary);
}
.nm-total-val i {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  font-style: normal;
  margin-left: 3px;
}
.nm-total-val.over { color: var(--color-danger); }
.nm-total-val.under { color: var(--color-accent); }
.nm-total-ref { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.nm-track {
  height: 8px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background: var(--fill-track);
  overflow: hidden;
}
.nm-track > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  transition: width 0.6s var(--ease);
}
.nm-track.over > span { background: var(--color-danger); }
.nm-track.under > span { background: var(--color-accent); }
.nm-status { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.nm-status.over { color: var(--color-danger); }
.nm-status.under { color: var(--color-accent); }
.nm-desc { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.nm-list-title {
  margin: 20px 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.nm-list { display: flex; flex-direction: column; gap: 13px; }
.nm-row { display: flex; flex-direction: column; gap: 5px; }
.nm-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nm-val { flex: none; font-size: 14px; font-weight: 800; color: var(--text-primary); }
.nm-val i { font-size: 11px; font-weight: 600; color: var(--text-muted); font-style: normal; margin-left: 2px; }
.nm-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.nm-sub svg { width: 13px; height: 13px; flex: none; }
.nm-bar { height: 6px; border-radius: var(--r-pill); background: var(--fill-track); overflow: hidden; }
.nm-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  transition: width 0.6s var(--ease);
}
.nm-empty { padding: 18px 4px; text-align: center; color: var(--text-muted); font-size: 13px; }