/* Hreyfing — meal plan (L4): week list, recipe dialog, swap dialog, grocery list, balanced plate. */

.meal-disclaimer {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  font-size: 0.9375rem;
  max-width: 68ch;
  margin-bottom: var(--s4);
}
.meal-disclaimer .icon { flex: none; margin-top: 3px; }

/* ---------- Week ---------- */
.meal-jump { grid-column: 1 / -1; margin: 0; }
.meal-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
@media (max-width: 479.98px) {
  [data-testid="meals-page"] .tab { padding: 10px 12px; gap: 6px; }
}
.meal-week {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .meal-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.meal-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s4);
  box-shadow: var(--shadow);
  min-width: 0;
}
.meal-day.is-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow); }
.meal-day-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  font-size: 1.125rem;
  margin: 0 0 var(--s3);
}
.meal-day-date { font-weight: 500; font-size: 0.9375rem; }

.meal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.meal-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  border-top: 1px solid var(--border);
  padding-top: var(--s2);
}
.meal-row:first-child { border-top: 0; padding-top: 0; }
.meal-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}
.meal-slot .icon { width: 1.05em; height: 1.05em; flex: none; }
.meal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  min-width: 0;
  padding: 6px 8px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.meal:hover { background: var(--surface-2); }
.meal-name { font-weight: 600; color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.meal:hover .meal-name { text-decoration-thickness: 2px; }
.meal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.875rem; }
.meal-meta .badge { font-size: 0.75rem; padding: 0 8px; }
.meal-meta .badge .icon { width: 0.95em; height: 0.95em; }

@media (max-width: 479.98px) {
  .meal-row { grid-template-columns: minmax(0, 1fr) auto; }
  .meal-slot { grid-column: 1 / -1; }
  .meal { padding-left: 0; }
}

/* ---------- Recipe dialog ---------- */
.recipe h3 { font-size: 1.0625rem; margin: 0 0 var(--s2); }
.recipe-meta .badge .icon { width: 1em; height: 1em; }
.recipe-ingredients,
.recipe-subs,
.recipe-labels,
.prep-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; }
.recipe-steps { margin: 0; padding-left: 1.5rem; display: flex; flex-direction: column; gap: var(--s2); }
.recipe-steps li::marker { font-weight: 700; color: var(--primary); }
.servings-control { gap: var(--s2); }
.servings-count { min-width: 6.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.recipe-foot { font-size: 0.875rem; }

/* ---------- Swap dialog ---------- */
.swap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.swap-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-ctl);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.swap-option:hover { border-color: var(--primary); background: var(--primary-soft); }
.swap-name { font-weight: 600; }
.swap-meta { font-size: 0.875rem; }

/* ---------- Grocery ---------- */
.grocery-head { align-items: center; }
.grocery-status { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }
.grocery-aisles {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grocery-aisles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grocery-aisle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s4);
  min-width: 0;
}
.grocery-aisle h3 { font-size: 1rem; margin: 0 0 var(--s2); }
.grocery-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.grocery-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  min-height: 44px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.grocery-item:first-child { border-top: 0; }
.grocery-item input { margin-top: 2px; }
.grocery-label { display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 0; cursor: pointer; min-width: 0; flex: 1; }
.grocery-qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.grocery-name { font-weight: 500; overflow-wrap: anywhere; }
.grocery-for { flex-basis: 100%; font-size: 0.8125rem; }
.grocery-item.is-done .grocery-qty,
.grocery-item.is-done .grocery-name { text-decoration: line-through; color: var(--muted); }

/* ---------- Balanced plate ---------- */
.plate-wrap {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 560px) {
  .plate-wrap { grid-template-columns: 9rem minmax(0, 1fr); }
  .plate-note { grid-column: 1 / -1; }
}
.plate {
  width: 9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid var(--surface-2);
  box-shadow: 0 0 0 1px var(--border);
  background: conic-gradient(var(--chart-1) 0 50%, var(--chart-3) 50% 75%, var(--chart-2) 75% 96%, var(--chart-4) 96% 100%);
}
.plate-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.plate-legend li { display: flex; gap: var(--s2); align-items: flex-start; }
.plate-swatch { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 5px; border: 1px solid var(--border); }
.plate-veg { background: var(--chart-1); }
.plate-protein { background: var(--chart-3); }
.plate-carb { background: var(--chart-2); }
.plate-fat { background: var(--chart-4); }

@media (forced-colors: active) {
  .plate { background: Canvas; border-color: CanvasText; }
  .plate-swatch { forced-color-adjust: none; }
}

@media print {
  .meal-swap-btn, .grocery-head .btn { display: none; }
}