/* Essen: the Wochenplan grid, recipe ideas and the pantry ("Vorrat"). */
@layer features {
  .meals .page-header { align-items: center; }
  .meals-panel { display: grid; gap: var(--space-4); }
  .meals-panel[hidden] { display: none; }
  .meals-panel.narrow { width: min(100%, 880px); }
  .meals-weekbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .meals-range { flex: 0 1 auto; min-width: 0; text-align: center; }
  @media (max-width: 599px) {
    .meals-range { flex: 1 1 0; font-size: var(--text-md); }
  }

  .meal-week { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .meal-day { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); }
  .meal-day.today { border-color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
  /* Days already past keep the look of every other day (no inverted card and slot colours); only
     their title is muted. */
  .meal-day.past .meal-day-title { color: var(--color-text-muted); }
  /* Phones: this week starts at today; the past days unfold with "Frühere Tage zeigen". */
  .meals-past-toggle { justify-self: start; }
  @media (max-width: 599px) {
    .meal-week.fold-past .meal-day.past { display: none; }
  }
  @media (min-width: 600px) {
    .meals-past-toggle { display: none; }
  }
  .meal-day-title { font-size: var(--text-md); overflow-wrap: break-word; hyphens: auto; }
  .meal-cells { display: grid; gap: var(--space-2); }
  .meal-cell {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
  }
  .meal-cell:disabled { cursor: default; }
  .meal-cell.empty .meal-text { color: var(--color-text-muted); }
  .meal-text { overflow-wrap: break-word; hyphens: auto; font-weight: var(--weight-bold); }
  .meal-slot, .meal-recipe { font-size: var(--text-xs); color: var(--color-text-muted); }
  .meal-slot { font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

  .recipe-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .recipe-card { align-content: start; }
  .recipe-detail .recipe-list { display: grid; gap: var(--space-1); padding-left: 1.4em; }
  .recipe-detail ul.recipe-list { list-style: disc; }
  .recipe-detail ol.recipe-list { list-style: decimal; }
  .recipe-missing { font-weight: var(--weight-bold); }
  .recipe-save { border-top: 1px solid var(--color-line); padding-top: var(--space-4); }
  .recipe-save-note:empty { display: none; }
  .recipe-save-note.replaces { color: var(--color-text); font-weight: var(--weight-bold); }
  .pantry-summary p { overflow-wrap: anywhere; }

  .pantry-photos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .pantry-photo { display: flex; align-items: center; gap: var(--space-2); }
  .pantry-photo img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }

  /* Wide screens: the whole week side by side, once a day column has about 170 px (below that, dish
     names break mid-word; the week then wraps into rows). */
  @media (min-width: 1440px) {
    .meal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .meal-day { padding: var(--space-3); }
  }

  @media (hover: hover) and (pointer: fine) {
    .meal-cell:not(:disabled):hover { border-color: var(--color-field-border); }
  }
}