/* Draft layer on top of meal-plan.css: compact hero with a dish stack, day rows with a day anchor,
   animated compact recipes, a standing shopping list that lifts the open day's items, and a day strip
   on narrow screens. */
html { overflow-anchor:none; } /* the script holds the reader's place while days animate */

/* Hero: lower, so the first days are visible on a laptop without scrolling. */
.mpx-workbench { --mpx-day:44px; --mpx-gap:16px; --mpx-thumb:64px; }
.mp2-page .mp2-heading { grid-template-columns:minmax(0,1fr) 350px; grid-template-areas:"text side" "week side"; gap:0 48px; align-items:start; padding-bottom:0; border-bottom:0; }
.mp2-page .mp2-heading > :first-child { grid-area:text; }
.mp2-page .mp2-heading h1 { font-size:clamp(1.9rem,2.8vw,2.5rem); margin:8px 0 12px; }
.mp2-page .mp2-facts { margin-bottom:12px; }
.mpx-facts-pills { gap:6px; }
.mp2-facts.mpx-facts-pills > span { padding:4px 11px; border-radius:999px; background:#ece2d3; color:var(--deep,#3b2412); font-size:.8rem; line-height:1.35; }
.mp2-page .mp2-idea { font-size:.98rem; line-height:1.6; }
.mp2-page .mp2-actions { margin-top:16px; }

/* Dish stack: the week's photos fanned out; the hovered card rises towards the reader. */
.mpx-hero-side { grid-area:side; --card:112px; --step:44px; margin-bottom:24px; padding:12px 18px 16px; border-radius:16px; background:#ece2d3; }
.mpx-stack { position:relative; width:calc(var(--card) + 4 * var(--step)); height:calc(var(--card) + 32px); margin:0 auto; }
.mpx-stack.is-live { cursor:pointer; }
.mpx-card { position:absolute; top:20px; left:calc(var(--i) * var(--step)); z-index:var(--i); box-sizing:border-box; width:var(--card); height:var(--card); border:4px solid #fffaf3; border-radius:10px; overflow:hidden; background:#fffaf3; box-shadow:0 8px 18px -8px rgba(59,36,18,.45); transform:translateX(var(--x,0px)) translateY(var(--y)) rotate(var(--r)); transition:transform 560ms cubic-bezier(.22,.61,.36,1),box-shadow 560ms ease; }
.mpx-stack.is-live .mpx-card { pointer-events:none; }
.mpx-card img { display:block; width:100%; height:100%; object-fit:cover; }
.mpx-card span { position:absolute; left:6px; bottom:6px; padding:3px 7px; border-radius:999px; background:rgba(255,250,243,.94); font:700 .6rem/1 var(--sans,sans-serif); letter-spacing:.09em; text-transform:uppercase; color:var(--deep,#3b2412); }
.mpx-card[data-rel=before] { --x:-10px; }
.mpx-card[data-rel=after] { --x:10px; }
.mpx-card[data-rel=active] { z-index:10; transform:translateY(-14px) rotate(0deg) scale(1.08); box-shadow:0 22px 34px -14px rgba(59,36,18,.5); }
.mpx-card:focus-visible { outline:3px solid var(--leaf,#4f7a4a); outline-offset:3px; }
.mpx-stack-caption { margin:4px 0 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; font-size:.8rem; line-height:1.3; color:#5f4f3e; }
.mpx-cta { margin-top:10px; padding-top:12px; border-top:1px solid rgba(59,36,18,.12); }
.mpx-cta p { margin:0 0 10px; text-align:center; font:600 .88rem/1.35 var(--serif,Georgia,serif); color:var(--deep,#3b2412); }
.mpx-cta-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mpx-cta .mp2-action { gap:6px; padding:10px 12px; font-size:.84rem; white-space:nowrap; color:var(--cream,#f7f2ee); text-decoration:none; }
.mpx-cta .mpx-cta-more { border-color:rgba(59,36,18,.3); background:transparent; color:var(--deep,#3b2412); }
.mpx-cta .mpx-cta-more:hover { background:rgba(59,36,18,.06); }

/* Week column */
.mp2-workbench.mpx-workbench { grid-template-columns:minmax(0,1fr) 340px; gap:48px; padding-top:0; }
.mpx-week-title { grid-area:week; align-self:end; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:28px 0 0; padding-bottom:12px; }
.mpx-week-title .mp2-text-button { flex:none; padding:4px 0; font-size:.8rem; color:var(--muted,#695d51); }
.mpx-week-title h2 { font-size:1.3rem; margin:0 0 3px; }
.mpx-week-title p { font-size:.82rem; }
.mpx-workbench .mp2-day { scroll-margin-top:16px; box-shadow:0 0 0 1px rgba(228,216,199,0),0 14px 30px -20px rgba(59,36,18,0); transition:background-color 280ms ease,box-shadow 280ms ease,border-color 240ms ease; }
.mpx-workbench .mp2-day > summary { gap:var(--mpx-gap); padding:14px 6px 14px 0; transition:border-color 300ms ease; }
.mpx-workbench .mp2-day[open] { margin-inline:-16px; padding-inline:16px; border-radius:12px; border-bottom-color:transparent; background:#fffaf3; box-shadow:0 0 0 1px #e4d8c7,0 14px 30px -20px rgba(59,36,18,.4); }
.mpx-workbench .mp2-day[open] > summary { border-bottom-color:#efe6da; }
.mpx-workbench .mp2-day[open].is-closing { background-color:rgba(255,250,243,0); box-shadow:0 0 0 1px rgba(228,216,199,0),0 14px 30px -20px rgba(59,36,18,0); transition-duration:460ms; }
.mpx-workbench .mp2-day[open].is-closing > summary { border-bottom-color:transparent; }
.mpx-workbench .mp2-day.is-closing > summary .mp2-chevron svg { transform:none; }
.mpx-workbench .mp2-day.is-closing > summary .mp2-day-title,.mpx-workbench .mp2-day.is-closing .mpx-dayname { color:var(--deep,#3b2412); }
.mpx-dayname { flex:0 0 var(--mpx-day); font:700 .74rem/1 var(--sans,sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--deep,#3b2412); }
.mp2-day[open] > summary .mpx-dayname { color:var(--terra,#ae5a30); }
.mpx-workbench .mp2-day > summary img { flex-basis:var(--mpx-thumb); width:var(--mpx-thumb); height:var(--mpx-thumb); }
.mpx-workbench .mp2-day-title { font-size:1.26rem; line-height:1.25; margin:0 0 4px; }
.mpx-day-sub { display:flex; align-items:baseline; gap:10px; font-size:.79rem; line-height:1.45; }
.mpx-day-time { flex:none; padding:2px 8px; border-radius:999px; background:#efe6d8; font-size:.74rem; font-weight:600; color:#5f4f3e; }
.mpx-day-sub .mp2-day-note { font-size:inherit; color:#8b7b69; }

/* Links between days: a line through the thumbnails, labelled with what carries over. */
.mpx-link { position:relative; display:flex; align-items:center; height:30px; margin:-1px 0; }
.mpx-link::before { content:""; position:absolute; left:calc(var(--mpx-day) + var(--mpx-gap) + var(--mpx-thumb) / 2 - 1px); top:-15px; bottom:-15px; width:2px; border-radius:2px; background:var(--leaf,#4f7a4a); transition:top 240ms ease; }
.mp2-day[open] + .mpx-link::before { top:0; }
.mpx-link span { margin-left:calc(var(--mpx-day) + var(--mpx-gap) * 2 + var(--mpx-thumb)); font-size:.64rem; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#4f6f49; padding:3px 9px; border-radius:999px; background:#e3ecdc; }

/* Compact recipe: time, servings, ingredients. The method lives on the recipe page. */
.mpx-recipe { box-sizing:border-box; padding:14px 0 18px calc(var(--mpx-day) + var(--mpx-gap)); }
.mpx-facts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mpx-pill { display:inline-flex; align-items:center; box-sizing:border-box; min-height:34px; margin:0; padding:0 14px; border-radius:999px; background:#f1e9dd; font-size:.84rem; color:#5f4f3e; }
.mpx-pill strong { margin:0 .3em; color:var(--deep,#3b2412); }
.mpx-servings { display:inline-flex; align-items:center; border-radius:999px; background:#f1e9dd; font-size:.84rem; }
.mpx-servings > span { padding:7px 12px; white-space:nowrap; }
.mpx-servings button { appearance:none; width:34px; height:34px; border:0; border-radius:999px; background:transparent; color:var(--deep,#3b2412); font:500 1.15rem/1 var(--sans,sans-serif); cursor:pointer; }
.mpx-servings button:not([hidden]) + span { padding-inline:2px; min-width:82px; text-align:center; }
.mpx-servings button:hover:not(:disabled) { background:#e5dacb; }
.mpx-servings button:disabled { color:#c9bcab; cursor:default; }
.mpx-full { margin-left:auto; padding-left:8px; font-size:.84rem; font-weight:600; color:var(--terra,#ae5a30); text-underline-offset:4px; }
.mpx-prep { margin:14px 0 0; padding:10px 14px; border-radius:6px; background:#f0e9dd; font-size:.84rem; line-height:1.55; }
.mpx-prep-sources { display:block; margin-top:6px; font-size:.74rem; color:#7d6c59; }
.mpx-prep-sources a { color:inherit; text-underline-offset:3px; }
.mpx-prep strong { display:block; margin-bottom:2px; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--leaf,#4f7a4a); }
.mpx-ing { columns:2; column-gap:32px; margin-top:14px; }
.mpx-ing section { break-inside:avoid; margin-bottom:12px; }
.mpx-ing h4 { margin:0 0 3px; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#7d6c59; }
.mpx-ing ul { list-style:none; margin:0; padding:0; }
.mpx-ing li { padding:5px 0; border-bottom:1px solid var(--hairline,#e7ded4); font-size:.86rem; line-height:1.45; overflow-wrap:anywhere; }
.mpx-amt { font-weight:600; font-variant-numeric:tabular-nums; }
.mpx-recipe.is-scaled .mpx-amt { color:var(--terra,#ae5a30); }
.mpx-recipe .mp2-close-recipe { padding:6px 0 0; font-size:.8rem; }

/* Standing shopping list with its own scroll. */
.mpx-list { position:sticky; top:16px; display:flex; flex-direction:column; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); border:1px solid #cabead; border-radius:10px; background:#fffcf7; overflow:hidden; scroll-margin-top:16px; }
.mpx-list-slot { min-width:0; }
.mpx-list-head { padding:18px 20px 12px; border-bottom:1px solid #e9e2d8; background:#f6efe4; }
.mpx-list-head .eyebrow { font-size:.64rem; margin:0; }
.mpx-list-head h2 { font-size:1.22rem; line-height:1.25; margin:4px 0; }
.mpx-list-hint { margin:0; min-height:1.4em; font-size:.78rem; line-height:1.4; color:var(--muted,#695d51); }
.mpx-list-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.mpx-checklist { list-style:none; margin:0; padding:6px 12px; }
.mpx-checklist li { position:relative; padding:0 8px; border-radius:6px; transition:transform 440ms cubic-bezier(.2,.75,.2,1),background-color 900ms ease; }
.mpx-checklist li.is-lit { border-radius:0; background:rgba(174,90,48,.11); transition:transform 440ms cubic-bezier(.2,.75,.2,1),background-color 450ms ease; }
.mpx-checklist label { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid #eee7dd; font-size:.86rem; line-height:1.4; cursor:pointer; }
.mpx-checklist li.is-lit:first-child { border-radius:6px 6px 0 0; }
.mpx-checklist li.is-lit:has(+ li:not(.is-lit)) { border-radius:0 0 6px 6px; }
.mpx-checklist li.is-lit:first-child:has(+ li:not(.is-lit)) { border-radius:6px; }
.mpx-checklist li.is-lit label { border-bottom-color:rgba(174,90,48,.12); }
.mpx-checklist input { flex:none; align-self:center; width:16px; height:16px; margin:0; accent-color:var(--leaf,#4f7a4a); }
.mpx-row-name { flex:1; min-width:0; }
.mpx-row-name::first-letter { text-transform:uppercase; }
.mpx-row-amt { flex:none; max-width:48%; text-align:right; font-size:.8rem; color:#7d6c59; font-variant-numeric:tabular-nums; border-radius:4px; transition:color 450ms ease; }
.mpx-checklist li.is-lit .mpx-row-amt { color:var(--terra,#ae5a30); }
.mpx-check { margin:6px 20px 16px; padding:10px 12px; border-radius:6px; background:#f4ede2; font-size:.8rem; line-height:1.6; color:#6b5b4a; }
.mpx-check strong { font-weight:600; color:var(--deep,#3b2412); }
.mpx-check span { transition:color 450ms ease; }
.mpx-check span.is-lit { color:var(--terra,#ae5a30); font-weight:600; }
.mpx-checklist input:checked ~ span { color:#a79c8c; text-decoration:line-through; }
.mpx-checklist li.is-bumped .mpx-row-amt { animation:mpx-bump 800ms ease; }
@keyframes mpx-bump { from { background:rgba(174,90,48,.28); } to { background:transparent; } }
.mpx-list-foot { padding:12px 20px 14px; border-top:1px solid #e9e2d8; background:#fbf6ef; }
.mpx-list-tools { display:flex; align-items:center; gap:16px; }
.mpx-list-tools .mp2-action { padding:9px 14px; font-size:.82rem; }
.mpx-list-tools .mp2-text-button { padding:6px 0; font-size:.82rem; }
.mpx-list-foot [role=status] { margin:8px 0 0; font-size:.78rem; }
.mpx-list-foot [role=status]:empty { display:none; }
.mpx-list-note { margin:8px 0 0; font-size:.72rem; line-height:1.5; color:#8b7b69; }

/* Day strip: narrow screens only, where the list sits after the week. */
.mpx-strip { position:fixed; top:0; left:0; right:0; z-index:95; background:rgba(247,242,238,.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline-strong,#d6cbbb); transform:translateY(-105%); visibility:hidden; transition:transform 220ms ease,visibility 0s linear 220ms; }
.mpx-strip.is-in { transform:none; visibility:visible; transition:transform 220ms ease; }
.mpx-strip-inner { display:flex; gap:10px; max-width:1180px; padding-block:10px; box-sizing:border-box; }
.mpx-chip { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px; border:1px solid #d9ccba; border-radius:8px; background:#fffcf7; color:var(--deep,#3b2412); text-decoration:none; font:600 .8rem/1.25 var(--sans,sans-serif); }
.mpx-chip-dish { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.72rem; font-weight:400; color:var(--muted,#695d51); }
.mpx-chip.is-expanded { background:var(--deep,#3b2412); border-color:var(--deep,#3b2412); color:var(--cream,#f7f2ee); }
.mpx-chip.is-expanded .mpx-chip-dish { color:#e6d9c8; }
.mpx-links::after { content:""; position:absolute; top:50%; right:-11px; width:10px; height:2px; background:var(--leaf,#4f7a4a); }
.mpx-chip-list { flex:0 0 auto; padding-inline:18px; background:transparent; }
.mpx-chip:focus-visible { outline:3px solid var(--leaf,#4f7a4a); outline-offset:2px; }

@media(min-width:1001px) {
 .mpx-strip,.mp2-page .mp2-actions { display:none; }
 /* The list never outgrows the week: its slot takes the week's height and the list scrolls inside. */
 .mpx-list-slot { align-self:stretch; contain:size; }
 .mpx-list { max-height:min(calc(100vh - 32px),100%); max-height:min(calc(100dvh - 32px),100%); }
}
@media(max-width:1000px) {
 .mp2-workbench.mpx-workbench { display:block; }
 .mpx-list { position:static; max-height:none; margin-top:32px; scroll-margin-top:76px; }
 .mpx-list-scroll { overflow:visible; }
 .mpx-workbench .mp2-day { scroll-margin-top:76px; }
}
@media(max-width:760px) {
 .mpx-workbench { --mpx-day:34px; --mpx-gap:12px; --mpx-thumb:52px; }
 .mp2-page .mp2-heading { grid-template-columns:1fr; grid-template-areas:"text" "side" "week"; gap:0; }
 .mpx-hero-side { --card:92px; --step:58px; margin:20px 0 0; padding:12px 14px; }
 .mpx-week-title { margin-top:26px; }
 .mpx-workbench .mp2-day > summary { padding-block:13px; }
 .mpx-workbench .mp2-day-title { font-size:1.1rem; }
 .mpx-day-sub { display:block; }
 .mpx-day-sub .mp2-day-note { display:block; margin-top:4px; }
 .mpx-full { padding-left:0; }
 .mpx-link::before { top:-14px; bottom:-14px; }
 .mpx-recipe { padding-left:0; }
 .mpx-full { margin-left:0; width:100%; }
 .mpx-ing { columns:1; }
 .mpx-strip-inner { gap:7px; padding-block:9px; }
 .mpx-chip { padding:10px 2px; font-size:.82rem; }
 .mpx-chip-dish { display:none; }
 .mpx-links::after { right:-8px; width:7px; }
 .mpx-chip-list { padding-inline:10px; }
 .mpx-workbench .mp2-day,.mpx-list { scroll-margin-top:66px; }
}
@media(prefers-reduced-motion:reduce) {
 .mpx-strip,.mpx-strip.is-in { transition:none; }
 .mpx-checklist li,.mpx-checklist li.is-lit { transition:background-color 450ms ease; }
 .mpx-card,.mpx-workbench .mp2-day,.mpx-link::before { transition:none; }
}
@media print {
 .mpx-strip,.mpx-link span,.mpx-hero-side { display:none!important; }
 body:not([data-plan-print="shopping"]) .mpx-list { display:none!important; }
 body[data-plan-print="shopping"] .mp2-workbench.mpx-workbench { display:block!important; padding:0; }
 body[data-plan-print="shopping"] .mp2-days { display:none!important; }
 body[data-plan-print="shopping"] .mpx-list { position:static; max-height:none; overflow:visible; border:0; background:none; }
 body[data-plan-print="shopping"] .mpx-list-scroll { overflow:visible; }
 body[data-plan-print="shopping"] .mpx-checklist { columns:2; column-gap:22px; padding:0; }
 .mpx-checklist li { break-inside:avoid; background:none!important; transform:none!important; }
 .mpx-list-head { padding:0 0 10px; }
 .mpx-list-hint,.mpx-list-tools { display:none!important; }
 .mpx-list-foot { background:none; border:0; padding:10px 0 0; }
}