/* An independent agenda/detail design inspired by the supplied calendar reference.
   Cookbook Gallery cards and the top-level navigation are unchanged. */
:root[data-layout] #main.planner-page {
  --planner-accent: var(--green);
  --planner-on-accent: var(--primary-ink);
  max-width: 1500px;
  padding: 1.8rem 2rem;
}
:root[data-theme=garden] #main.planner-page {
  --planner-accent: #b84d40;
  --planner-on-accent: #fff;
}
.planner-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.4rem; }
.planner-toolbar .eyebrow { margin-bottom:.35rem; font-size:.6rem; }
.planner-toolbar h1 { margin:0; font-size:1.9rem; letter-spacing:-.025em; }
.planner-week-controls { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-left:auto; }
#planner-date-range { font-size:.84rem; color:var(--muted); text-align:center; }
.planner-toolbar button { font-size:.8rem; }
.planner-shell { display:grid; grid-template-columns:280px minmax(0,1fr); height:calc(100dvh - 275px); min-height:440px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.planner-agenda { min-width:0; overflow-y:auto; overscroll-behavior:contain; border-right:1px solid var(--line); padding:1.4rem .8rem 1rem; }
.agenda-heading { padding:0 .7rem .4rem; }
.agenda-heading h2 { font:600 .9rem -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin-bottom:.4rem; }
.agenda-heading p { margin-bottom:.8rem; }
/* Specific selectors isolate this calendar from the experimental layout previews. */
#main.planner-page .week-grid { display:flex; flex-direction:column; gap:0; margin:0; }
#main.planner-page .day-card { display:block; padding:.8rem 0 1.25rem; min-height:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.agenda-day-heading { display:flex; gap:.6rem; align-items:center; padding:0 .7rem .6rem; }
.agenda-date { display:flex; gap:.55rem; align-items:center; flex:1; }
.agenda-number { font-size:2.5rem; font-weight:700; letter-spacing:-.07em; line-height:1; font-variant-numeric:tabular-nums; }
.agenda-day-label { display:flex; flex-direction:column; text-transform:uppercase; font-size:.66rem; line-height:1.3; letter-spacing:.015em; }
.agenda-day-label strong { font-weight:700; }
.agenda-day-label>span { color:var(--muted); }
.today .agenda-number { color:var(--planner-accent); }
#main.planner-page .add-meal { margin:0; padding:.3rem .5rem; color:var(--planner-accent); font-size:1.5rem; line-height:1; flex-shrink:0; }
#main.planner-page .planned { display:flex; align-items:stretch; padding:0; margin:0 .1rem; background:transparent; color:var(--ink); border-radius:5px; position:relative; }
#main.planner-page .planned + .planned { margin-top:1px; }
#main.planner-page .planned::after { content:''; position:absolute; height:1px; background:var(--line); bottom:0; left:2.75rem; right:.6rem; pointer-events:none; }
#main.planner-page .planned.is-selected { background:var(--planner-accent); color:var(--planner-on-accent); }
#main.planner-page .planned.is-selected::after { display:none; }
#main.planner-page .planned-select { position:static; flex:1; min-width:0; display:flex; justify-content:flex-start; text-align:left; gap:.65rem; padding:.65rem .6rem; color:inherit; background:transparent; border:0; border-radius:5px; font-size:.82rem; font-weight:400; line-height:1.45; }
.planned-select>span:last-child { overflow-wrap:anywhere; }
.meal-slot-icon { width:1.25rem; flex-shrink:0; text-align:center; font-size:1rem; }
#main.planner-page .remove-planned { position:static; color:inherit; padding:.4rem .5rem; border-radius:0 5px 5px 0; font-size:1rem; opacity:.65; }
#main.planner-page .remove-planned:hover,#main.planner-page .remove-planned:focus-visible { opacity:1; }
.no-meals { font-size:.75rem; color:var(--muted); margin:0 .7rem 0 2.8rem; padding:.6rem 0; border-top:1px solid var(--line); }
.agenda-legend { padding:.5rem .7rem 0; font-size:.65rem; }
.planner-recipe { min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:1.8rem; container-type:inline-size; container-name:meal-recipe; scroll-margin-top:1rem; }
.planner-recipe>.empty { margin:2rem auto; padding:3rem 1rem; border:0; }
.planner-recipe .detail-heading { align-items:flex-start; flex-direction:column; gap:1rem; }
.planner-recipe .recipe-title { font-size:2rem; line-height:1.15; letter-spacing:-.035em; margin-bottom:1rem; overflow-wrap:anywhere; }
.planner-recipe .detail-heading .lead { font-size:.93rem; margin-bottom:.8rem; }
.planner-recipe .detail-photo,.planner-photo-placeholder { width:100%; height:170px; border-radius:8px; object-fit:cover; }
.planner-photo-placeholder { display:grid; place-items:center; background:radial-gradient(ellipse at top right,var(--wash),transparent 70%),var(--soft); color:var(--placeholder-ink); font-size:4rem; }
.planner-recipe .recipe-actions { padding:1rem 0; gap:.4rem; align-items:flex-start; }
.planner-recipe .recipe-actions button { font-size:.76rem; padding:.6rem .65rem; }
.planner-recipe .recipe-meta { gap:.75rem; flex-wrap:wrap; padding:1rem 0; font-size:.8rem; }
.planner-recipe .recipe-meta input { padding:.45rem; width:70px; }
#main.planner-page .planner-recipe .recipe-columns { grid-template-columns:1fr; gap:1.5rem; margin:1.5rem 0; }
.planner-recipe .recipe-columns h2 { font-size:1.4rem; margin-bottom:1rem; }
.planner-recipe .recipe-columns .section-heading { flex-wrap:wrap; margin-bottom:.5rem; }
.planner-recipe .section-heading button { font-size:.75rem; padding:0; }
.planner-recipe .checklist label { font-size:.87rem; font-weight:400; }
.planner-recipe .checklist li { padding:.6rem 0; }
.planner-recipe .steps label { font-size:.94rem; }
.planner-recipe .notes { padding:1.1rem; font-size:.85rem; }
.planner-recipe .source { font-size:.75rem; }
.planner-footnote { margin:1rem 0 0; font-size:.74rem; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* When there is room, place the photo + ingredients alongside the method. */
@container meal-recipe (min-width:650px) {
  .planner-recipe .recipe-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.85fr); column-gap:1.7rem; grid-template-areas:'summary photo' 'meta photo' 'actions ingredients' 'steps ingredients' 'notes ingredients' 'source ingredients' 'danger ingredients'; align-items:start; }
  .planner-recipe .detail-heading { display:contents; }
  .planner-recipe .detail-heading>div:first-child { grid-area:summary; }
  .planner-recipe .detail-heading>.detail-photo,.planner-recipe .detail-heading>.planner-photo-placeholder { grid-area:photo; }
  .planner-recipe .recipe-meta { grid-area:meta; }
  .planner-recipe .recipe-actions { grid-area:actions; margin-bottom:1.5rem; }
  #main.planner-page .planner-recipe .recipe-columns { display:contents; }
  .planner-recipe .recipe-columns>section:first-child { grid-area:ingredients; background:var(--soft); border-radius:8px; padding:1.2rem; }
  .planner-recipe .recipe-columns>section:last-child { grid-area:steps; }
  .planner-recipe .notes { grid-area:notes; }
  .planner-recipe .source { grid-area:source; }
  .planner-recipe .danger-zone { grid-area:danger; }
}
@media(max-width:1100px) {
  .planner-toolbar { gap:.7rem; }
  .planner-toolbar>div:first-child { margin-right:auto; }
  .planner-week-controls { margin-left:0; }
  .planner-shell { grid-template-columns:250px minmax(0,1fr); }
}
@media(max-width:850px) {
  :root[data-layout] #main.planner-page { padding:1.5rem 1.1rem; }
  .planner-toolbar h1 { font-size:1.7rem; }
  .planner-week-controls { order:2; flex-basis:100%; justify-content:space-between; gap:.3rem; }
  #planner-date-range { font-size:.73rem; }
  .planner-shell { grid-template-columns:1fr; height:auto; min-height:0; }
  .planner-agenda { border-right:0; border-bottom:1px solid var(--line); max-height:380px; }
  .planner-recipe { padding:1.3rem; overflow:visible; }
  .planner-recipe .recipe-title { font-size:1.8rem; }
}
/* Cooking keeps only the selected recipe; leaving it restores the agenda. */
:root[data-layout] .cooking #main.planner-page { max-width:1300px; }
.cooking .planner-toolbar,.cooking .planner-agenda,.cooking .planner-footnote { display:none; }
.cooking .planner-shell { display:block; height:auto; min-height:0; border:0; overflow:visible; }
.cooking .planner-recipe { overflow:visible; padding:0; }
.cooking .planner-recipe .checklist label,.cooking .planner-recipe .steps label { font-size:1.2rem; }
@media print {
  .planner-toolbar,.planner-agenda,.planner-footnote { display:none!important; }
  .planner-shell { display:block; height:auto; min-height:0; border:0; overflow:visible; }
  .planner-recipe { padding:0; overflow:visible; container-type:normal; }
  .planner-recipe .recipe-detail { display:block; }
  #main.planner-page .planner-recipe .recipe-columns { display:grid; grid-template-columns:1fr 1.5fr; }
}