/* Week tab */
.plan-empty .btn.big { min-width: 220px; }
.plan-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r); background: var(--sunk);
}
.plan-bar .hint { flex-basis: 100%; }
.plan-stats { display: flex; gap: 22px; }
.plan-stats > * { display: flex; flex-direction: column; border: 0; background: none; padding: 0; text-align: left; }
.plan-stats b { font: 800 24px/1 var(--display); font-stretch: 85%; }
.plan-stats span { font-size: 13px; color: var(--muted); }
.plan-buy b { color: var(--mustard); }
.plan-buy span { text-decoration: underline; text-underline-offset: 3px; }

.day { display: flex; flex-direction: column; scroll-margin-top: calc(var(--top-h) + 12px); }
.day-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.day-head h3 { margin: 0; font: 800 19px/1 var(--display); font-stretch: 82%; text-transform: uppercase; letter-spacing: .02em; }
.day-head .date { font-size: 13px; color: var(--muted); }
.pill { font: 800 11px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding: 4px 7px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); }
.day.today .day-head { border-color: var(--accent); }
.day.past { opacity: .55; }

.meals { list-style: none; margin: 0; padding: 0; }
.meal {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line);
}
.meal .slot { font: 700 11px/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.meal-main { min-width: 0; border: 0; background: none; text-align: left; padding: 11px 0; display: flex; flex-direction: column; gap: 2px; }
.meal-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.meal-sub { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.meal-sub .buy { color: var(--mustard); font-weight: 600; }
.meal-sub .ok { color: var(--ok); }
.meal.done .meal-name { text-decoration: line-through; color: var(--muted); }
.done-mark { width: 42px; display: grid; place-items: center; color: var(--ok); }
.meal .swap { color: var(--muted); }
@media (max-width: 420px) {
  .meal { grid-template-columns: minmax(0, 1fr) auto; }
  .meal .slot { grid-column: 1 / -1; padding-top: 10px; margin-bottom: -10px; }
}