#nutrition {
  padding-bottom: calc(var(--bottom-nav-height, 74px) + 34px);
}

#nutrition .card {
  margin-top: 14px;
}

.nutrition-date-nav {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: end;
  gap: 8px;
  margin: 12px 0 2px;
}

.nutrition-date-nav label {
  display: grid;
  gap: 5px;
  color: var(--bf-muted);
  font-size: 0.72rem;
}

.nutrition-date-nav button {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
}

.nutrition-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.nutrition-today {
  display: grid;
  gap: 14px;
}

.nutrition-day-summary {
  max-width: 46ch;
  margin: 0;
  color: #ddd;
  line-height: 1.5;
}

.nutrition-primary-action {
  width: 100%;
  min-height: 52px;
}

.nutrition-primary-actions {
  display: grid;
  gap: 9px;
}

.nutrition-primary-actions .secondary {
  width: 100%;
  min-height: 46px;
}

.nutrition-metric-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--bf-line);
  border-radius: 12px;
  background: #111;
}

.nutrition-metric-grid article > div:first-child {
  display: grid;
  gap: 3px;
}

.nutrition-metric-grid small,
.nutrition-metric-grid article > span {
  color: var(--bf-muted);
  font-size: 0.7rem;
}

.nutrition-progress,
.hydration-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #2b2b2b;
}

.nutrition-progress i,
.hydration-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bf-red);
  transition: width 200ms ease;
}

.nutrition-wide-action {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
}

.nutrition-records {
  display: grid;
  gap: 18px;
}

.nutrition-history > p {
  margin: 8px 0 14px;
}

#nutritionRecentMeals {
  display: grid;
  gap: 9px;
}

.nutrition-recent-meal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--bf-line);
  border-radius: 12px;
  background: #111;
}

.nutrition-recent-meal > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.nutrition-recent-meal p,
.nutrition-recent-meal small {
  margin: 0;
  overflow-wrap: anywhere;
}

.nutrition-recent-meal small {
  color: var(--bf-muted);
}

.nutrition-recent-meal button {
  min-height: 44px;
}

.nutrition-hydration-section,
.nutrition-entry-methods {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--bf-line);
}

.nutrition-hydration-section h3,
.nutrition-entry-methods h3,
.nutrition-entry-methods p {
  margin: 0;
}

.nutrition-method-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.nutrition-method-actions button {
  min-width: 0;
  min-height: 48px;
  padding-inline: 10px;
}

#mealList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.nutrition-meal {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--bf-line);
  border-radius: 13px;
  background: #111;
}

.meal-photo,
.meal-placeholder {
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: #191919;
}

.meal-photo {
  padding: 0;
}

.meal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meal-placeholder {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

.meal-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.meal-copy > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.meal-copy time,
.meal-copy small,
.meal-copy span {
  color: var(--bf-muted);
  font-size: 0.72rem;
}

.meal-copy p {
  margin: 0;
  overflow: hidden;
  color: #ddd;
  font-size: 0.78rem;
  text-overflow: ellipsis;
}

.meal-copy .record-actions {
  margin-top: 3px;
}

.hydration-progress {
  height: 8px;
  margin-top: 13px;
}

.hydration-progress span {
  background: linear-gradient(90deg, #2775ca, #6db9ff);
}

.hydration-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.hydration-quick button {
  min-width: 0;
  min-height: 44px;
  padding-inline: 5px;
  font-size: 0.67rem;
}

.hydration-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--bf-line);
  border-radius: 11px;
  background: #111;
}

.hydration-record > div:first-child {
  display: grid;
}

.hydration-record span {
  color: var(--bf-muted);
  font-size: 0.72rem;
}

.nutrition-editor-dialog {
  max-height: min(90vh, 760px);
  overflow: auto;
}

#nutritionMealForm {
  display: grid;
  gap: 11px;
  margin-top: 14px;
}

#nutritionMealForm label,
#nutritionTargetsForm label,
.nutrition-food-row label {
  display: grid;
  gap: 5px;
  color: var(--bf-muted);
  font-size: 0.72rem;
}

#nutritionMealForm h3 {
  margin: 3px 0 0;
}

#nutritionFoodItems {
  display: grid;
  gap: 12px;
}

.nutrition-food-row {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--bf-line-strong);
  border-radius: 12px;
}

.nutrition-food-row legend {
  padding-inline: 5px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.food-row-main {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.9fr;
  gap: 7px;
}

.food-row-macros {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.nutrition-food-row .field {
  min-width: 0;
  padding-inline: 8px;
}

.remove-nutrition-food {
  min-height: 44px;
}

#analysisItems {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.analysis-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--bf-line-strong);
  border-radius: 13px;
  background: #111;
}

.analysis-item-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.analysis-item-name {
  overflow-wrap: break-word;
  word-break: normal;
  font-size: 1rem;
}

.analysis-item-quantity,
.analysis-item-macros {
  color: var(--bf-muted);
  line-height: 1.4;
}

.analysis-item-quantity {
  white-space: nowrap;
}

.analysis-item-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
}

.analysis-item-macros > span {
  white-space: nowrap;
}

.analysis-item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.analysis-item-actions button {
  min-height: 46px;
}

.analysis-totals {
  margin-top: 12px;
  padding: 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: #ddd;
}

.analysis-item-dialog {
  width: min(100%, 520px);
  max-height: min(90vh, 760px);
  overflow: auto;
}

#analysisItemModal {
  z-index: 95;
  align-items: end;
}

#analysisItemModal .analysis-item-dialog {
  margin-bottom: 0;
  border-radius: 18px 18px 0 0;
}

#analysisItemForm,
.quantity-editor {
  display: grid;
  gap: 11px;
}

#analysisItemForm label {
  display: grid;
  gap: 5px;
  color: var(--bf-muted);
}

.quantity-wheel {
  display: grid;
  grid-template-rows: 44px 58px 44px;
  align-items: center;
  max-width: 220px;
  margin-inline: auto;
  touch-action: pan-x;
}

.quantity-wheel strong {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-block: 1px solid var(--bf-red);
  font-size: 1.4rem;
}

.analysis-macro-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 430px) {
  .food-row-main,
  .food-row-macros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .food-row-main label:first-child {
    grid-column: 1 / -1;
  }

  .nutrition-meal {
    grid-template-columns: 64px 1fr;
  }

  .meal-photo,
  .meal-placeholder {
    width: 64px;
    height: 64px;
  }

  .nutrition-method-actions {
    grid-template-columns: 1fr;
  }

  .nutrition-recent-meal {
    grid-template-columns: 1fr;
  }

  .nutrition-recent-meal button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nutrition-progress i,
  .hydration-progress span {
    transition: none;
  }

  .quantity-wheel strong {
    scroll-behavior: auto;
  }
}