/* Meal planner: intentionally compact, touch-first and visually aligned with the recipe library. */
.site-tabs { width: min(1180px, calc(100% - 32px)); margin: 22px auto 0; display: flex; gap: 8px; }
.site-tab { border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); padding: 10px 16px; font-weight: 700; }
.site-tab[aria-selected="true"] { background: var(--ink); color: white; border-color: var(--ink); }
[hidden] { display: none !important; }
.planner { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 60px; }
.planner-intro { max-width: 720px; }
.planner-intro h2 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3.5rem); }
.planner-intro p { color: var(--muted); line-height: 1.6; }
.planner-card { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 8px 25px rgba(75,51,30,.06); }
.planner-card h3 { margin: 0 0 6px; }
.planner-help { margin: 0 0 16px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.attendance-wrap, .shopping-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.attendance-toggle { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #f3ebe1; color: var(--muted); font-weight: 700; }
.attendance-toggle.active { background: var(--sage); color: white; border-color: var(--sage); }
.planner-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.planner-field { display: grid; gap: 7px; font-weight: 700; font-size: .9rem; }
.planner-field input, .planner-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: white; color: var(--ink); resize: vertical; }
.planner-field--wide { grid-column: 1 / -1; }
.planner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.planner-primary, .planner-secondary { border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 700; }
.planner-primary { background: var(--tomato); color: white; }
.planner-secondary { background: #eee3d6; color: var(--ink); }

.plan-grid-ui { display: grid; grid-template-columns: minmax(42px, .42fr) repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; align-items: stretch; }
.plan-grid__corner, .plan-grid__meal, .plan-grid__day { min-width: 0; }
.plan-grid__corner, .plan-grid__day { align-self: center; color: var(--muted); font-size: .78rem; font-weight: 700; }
.plan-grid__meal { padding-bottom: 2px; text-align: center; color: var(--ink); font-size: .82rem; font-weight: 700; }
.plan-cell { position: relative; display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 112px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: white; text-align: left; color: var(--ink); }
.plan-cell strong { display: block; margin-bottom: 6px; font-size: .88rem; line-height: 1.18; }
.plan-cell small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.plan-cell__note { margin-top: 5px; color: var(--sage-dark, #58705c) !important; font-weight: 700; }
.plan-cell.leftover { background: #eef3e8; border-color: #c8d8bd; }
.plan-cell.batch { background: #fff2d3; border-color: #e9cf8b; }
.plan-cell.empty { display: grid; place-items: center; min-height: 58px; opacity: .45; cursor: default; }
.plan-cell.empty strong { margin: 0; font-size: .72rem; }
.swap-hint { position: absolute; right: 6px; bottom: 6px; border-radius: 999px; padding: 3px 7px; background: var(--ink); color: white; font-size: .62rem; font-weight: 700; }

.shopping-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.shopping-group { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: white; }
.shopping-group h4 { margin: 0 0 10px; font-family: "Fraunces", serif; }
.shopping-group ul { margin: 0; padding: 0; list-style: none; }
.shopping-list { display: grid; gap: 0; }
.shopping-group .shopping-item { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 12px; align-items: center; width: 100%; padding: 8px 0; border-bottom: 1px solid var(--line); }
.shopping-group .shopping-item:last-child { border-bottom: 0; }
.shopping-group .shopping-item__text { display: block; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.shopping-item.is-found .shopping-item__text { color: var(--muted); text-decoration: line-through; opacity: .65; }
.shopping-found-toggle, .shopping-copy { border: 0; border-radius: 999px; font-weight: 700; cursor: pointer; }
.shopping-group .shopping-found-toggle { justify-self: end; flex: none; min-width: 76px; margin: 0; padding: 7px 10px; background: #eee3d6; color: var(--ink); font-size: .72rem; white-space: nowrap; }
.shopping-item.is-found .shopping-found-toggle { background: var(--sage); color: white; }
.shopping-copy { display: inline-flex; justify-content: center; margin: 6px 0 14px; padding: 10px 15px; background: var(--tomato); color: white; }
.shopping-copy--bottom { margin: 16px 0 0; }
.planner-summary { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f2e8dc; color: var(--muted); line-height: 1.5; }

@media (max-width: 650px) {
  .site-tabs { margin-top: 14px; }
  .site-tab { flex: 1; }
  .planner-fields, .shopping-groups { grid-template-columns: 1fr; }
  .planner-card { padding: 16px; }
  .plan-grid-ui { grid-template-columns: 34px repeat(2, minmax(0, 1fr)); gap: 5px; }
  .plan-grid__corner, .plan-grid__day { font-size: .7rem; }
  .plan-grid__meal { font-size: .72rem; }
  .plan-cell { min-height: 104px; padding: 8px 7px; border-radius: 9px; }
  .plan-cell strong { font-size: .76rem; line-height: 1.14; }
  .plan-cell small { font-size: .64rem; line-height: 1.28; }
  .shopping-group .shopping-item { column-gap: 8px; }
  .shopping-group .shopping-found-toggle { min-width: 70px; padding: 7px 8px; font-size: .68rem; }
  .shopping-copy { width: 100%; }
}