/* One recipe sheet, using the approved paper, pencil and kitchen palette. */
#plan-review { margin: 20px 0 34px; scroll-margin-top: 24px; }
#plan-review[hidden], .review-dish-actions[hidden] { display: none; }
.notebook-plan[hidden],.first-week[hidden],.plan-heading[hidden] { display:none; }
.review-heading { display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.review-heading h1 { font-family:Georgia,serif; font-size:clamp(36px,4vw,42px); margin:5px 0 12px; line-height:1.15; }
.review-heading h1:focus { outline:none; }
.review-heading .eyebrow { color:var(--red); }
.review-count { display:inline; background:linear-gradient(transparent 52%,var(--wheat) 52%); font-weight:600; }
.review-dish { position:relative; margin-top:16px; scroll-margin-top:90px; padding:26px 28px; background:var(--white); border:1px solid var(--line); border-radius:var(--panel-radius); max-width:780px; }
.review-dish > .meal-art { float:right; width:140px; height:110px; object-fit:contain; margin:0 0 12px 18px; border-radius:42% 48% 43% 39%; }
.review-dish > h2 { font-family:Georgia,serif; font-size:clamp(27px,4vw,36px); line-height:1.15; margin:8px 0 12px; }
.review-dish > h2:focus { outline:none; }
.review-dish > .meal-art img { width:85px; height:95px; }
.review-dish > .meal-art img+img { width:65px; height:75px; }
.review-progress { display:block; width:100%; max-width:none; height:6px; accent-color:var(--green); margin-top:16px; border:0; }
.review-progress::-webkit-progress-bar { background:var(--line); }.review-progress::-webkit-progress-value { background:var(--green); }.review-progress::-moz-progress-bar { background:var(--green); }
.notebook-plan .day .review-day-status { display:block; font-size:13px; font-weight:600; margin-top:8px; text-transform:none; letter-spacing:normal; background:linear-gradient(transparent 52%,var(--wheat) 52%); }
.notebook-plan .day .review-day-status.approved { color:var(--green); background:none; }
.review-change-note { font-size:14px; color:var(--red); }
.review-proposed-recipe h3 { font:26px/1.2 Georgia,serif; margin:18px 0 10px; }
.review-proposed-recipe summary { min-height:44px; padding:12px 0; }
.meal-swap-choices label:has(input:checked) { background:var(--sage); }
#app .notebook-plan :is(.change-meal,.swap-meal) { background:var(--white); border:1px solid var(--line); border-radius:var(--button-radius); padding:10px 14px; text-decoration:none; }
.review-day { display:inline; background:linear-gradient(transparent 45%,var(--blue) 45%); font-weight:600; text-transform:capitalize; }
.review-ingredients { clear:both; padding-left:20px; line-height:1.65; columns:2; column-gap:32px; }
.review-ingredients li { break-inside:avoid; }
.review-recipe { clear:both; margin:8px 0; }
.review-recipe summary { min-height:44px; padding:10px 0; cursor:pointer; }
.review-recipe ol { padding-left:22px; line-height:1.6; }
.review-recipe li { margin-bottom:12px; }
.review-dish-actions,.review-editor-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; justify-content:flex-start; }
.review-error:empty,.review-change-status:empty { display:none; }
.review-error { color:var(--red); }
.review-error button,.review-change-status button { display:block; margin-top:12px; }
.meal-change-editor { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); max-width:700px; }
.meal-change-editor form { width:100%; }
.meal-change-editor textarea { display:block; box-sizing:border-box; width:100%; min-height:100px; max-height:40vh; font:inherit; padding:12px; background:var(--white); border:1px solid var(--line); border-radius:var(--button-radius); resize:none; }
.meal-change-editor label { display:block; font-weight:600; }
.review-reply { border-top:1px solid var(--line); margin-top:20px; padding-top:12px; }
.review-reply p { white-space:pre-wrap; overflow-wrap:anywhere; }
.review-finished { font:24px/1.4 Georgia,serif; padding:26px; background:var(--wheat); max-width:580px; border-radius:var(--panel-radius); }
#app .notebook-plan .meal-actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
#app .notebook-plan .meal-actions > * { min-height:44px; text-align:left; }
#app .notebook-plan .cook-card:has(> .cook-ask) { justify-content:flex-start; }
.plan-ready-notice { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:14px 18px; margin-bottom:20px; background:var(--blue); border-radius:var(--panel-radius); }
.plan-ready-notice p { margin:0; flex:1 1 180px; }
.plan-ready-notice button,.plan-ready-notice a { min-height:44px; }
#app .first-week .fw-card { grid-template-columns:minmax(0,1fr) auto; text-align:left; }
#app .first-week .fw-card > span:last-child { grid-column:1; }
.fw-card .fw-state { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:13px; color:var(--muted); }
.fw-card.done .fw-state { text-decoration:underline; text-decoration-color:var(--ochre); text-decoration-thickness:3px; text-underline-offset:4px; }
.meal-swap-choices { border:0; padding:0; display:grid; gap:0; }
.meal-swap-choices label { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--white); font-weight:400; }
#app .meal-swap-choices input { width:18px; height:18px; min-height:18px; flex:0 0 auto; margin:0; }
.meal-experience { max-width:640px; margin-top:14px; }
.meal-experience summary { min-height:44px; cursor:pointer; padding:12px 0; }
.meal-experience fieldset { border:0; padding:0; margin:12px 0; }
.meal-experience legend { font-weight:600; margin-bottom:8px; }
.meal-again { display:flex; gap:8px; flex-wrap:wrap; }
.meal-experience-tags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; }
.meal-experience :is(.meal-again,.meal-experience-tags) label { display:flex; align-items:center; gap:8px; min-height:44px; font-weight:400; margin:0; }
.meal-experience :is(input[type=radio],input[type=checkbox]) { width:18px; height:18px; margin:0; }
.meal-experience textarea { width:100%; box-sizing:border-box; font:inherit; padding:12px; border:1px solid var(--line); border-radius:var(--button-radius); background:var(--white); }
@media(max-width:900px) {
 .review-dish { width:100%; box-sizing:border-box; }
 #app .review-heading h1 { font-size:26px; margin:0; }.review-dish-actions { flex-direction:column; }.review-dish-actions button { text-align:left; }
 .review-heading { display:flex; gap:8px 14px; }.review-count { margin:0; font-size:14px; }
 .review-dish { padding:18px 16px; }.review-dish > .meal-art { width:100px; height:90px; margin-left:8px; }
 .review-dish > .meal-art img { width:65px; height:80px; }.review-dish > .meal-art img+img { width:45px; height:60px; }
 .review-ingredients { columns:1; }.meal-change-editor textarea { font-size:16px; }
 .meal-experience-tags { grid-template-columns:1fr; }.meal-experience textarea { font-size:16px; }
 .review-dish-actions > button { flex:1 1 auto; }
}
@media(forced-colors:active) {.review-count,.review-day { text-decoration:underline; }.review-dish,.plan-ready-notice { border:1px solid CanvasText; }}

.review-done { min-height:44px; }
#app .meal-swap-choices label { margin:0; }
#app .meal-swap-choices label:has(:focus-visible) { outline:2px solid var(--green); outline-offset:2px; border-radius:var(--button-radius); position:relative; }
#app .meal-swap-choices input:focus { outline:none; box-shadow:none; }
.meal-swap-choices .meal-art { flex:0 0 52px; width:52px; height:52px; }
.meal-swap-choices .meal-art img { width:100%; height:100%; object-fit:contain; }
@media(max-width:900px) {
 #plan-review { margin-top:8px; }
 .review-progress { margin-top:10px; }
 .review-dish { margin-top:12px; scroll-margin-top:82px; }
 .review-dish > h2 { font-size:27px; }
 .review-dish-actions { flex-direction:row; }
 .review-dish-actions [data-approve] { flex-basis:100%; }
 .review-dish-actions [data-change],.review-dish-actions [data-idea] { font-size:14px; padding:10px; }
}

#app .first-week .fw-card { grid-template-columns:52px minmax(0,1fr) auto; column-gap:12px; }
.fw-art { width:52px; height:52px; object-fit:contain; grid-column:1; grid-row:1 / span 2; background:var(--wheat); border-radius:40% 46% 38% 43%; }
.fw-card[data-step=groceries] .fw-art { background:var(--blue); }
.fw-card[data-step=change] .fw-art { background:var(--sage); }
#app .first-week .fw-card > strong, #app .first-week .fw-card > span:last-child { grid-column:2; }
#app .first-week .fw-state { grid-column:3; }
@media(max-width:900px) { .notebook[data-setup=true] .page-footer { padding-right:96px; } }

.plan-heading .page-heading:has(.share-week) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; align-items:center; }
.plan-heading .page-heading:has(.share-week) h1 { grid-column:1; grid-row:1; }
.plan-heading .page-heading:has(.share-week) .lede { grid-column:1 / -1; }
#app .plan-heading .share-week { grid-column:2; grid-row:1; padding:10px; background:var(--blue); color:var(--ink); border-color:var(--blue); }
#app .plan-heading .share-week:hover { background:var(--sage); border-color:var(--green); }
#app .plan-options>summary { display:list-item; list-style:disclosure-closed inside; min-height:44px; padding:12px 0; text-decoration:underline; text-underline-offset:4px; }
#app .plan-options[open]>summary { list-style-type:disclosure-open; }

.review-tick { vertical-align:middle; flex:none; }

/* The week at a glance: one card per meal, approve many from here, open one to read or change it (owner direction, November 4). */
.review-rail { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.review-card { position:relative; display:flex; min-width:0; background:var(--white); border:1px solid var(--line); border-radius:var(--panel-radius); }
.review-card:hover { border-color:var(--green); }
#app .review-card-open { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; min-height:44px; padding:14px; text-align:left; background:transparent; border:0; border-radius:var(--panel-radius); color:var(--ink); font-weight:400; }
.review-card-open .meal-art { display:block; width:88px; height:72px; margin:0 44px 6px 0; }
.review-card-open .meal-art img { width:100%; height:100%; object-fit:contain; }
.review-card-day { font-size:13px; font-weight:600; text-transform:capitalize; background:linear-gradient(transparent 45%,var(--blue) 45%); }
.review-card-open strong { font:600 19px/1.2 Georgia,serif; overflow-wrap:anywhere; }
.review-card-facts { font-size:13px; color:var(--muted); }
.review-card-status { margin-top:auto; padding-top:8px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.review-card.is-todo .review-card-status,.review-card.is-failed .review-card-status { font-weight:400; }
.review-card.is-approved { background:var(--sage); }
.review-card.is-approved .review-card-status { color:var(--green); }
.review-card.is-changed .review-card-status,.review-card.is-failed .review-card-status { color:var(--red); }
.review-card.is-idea .review-card-status,.review-card.is-reply .review-card-status,.review-card.is-working .review-card-status { background:linear-gradient(transparent 52%,var(--wheat) 52%); }
.review-card.is-ticked { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.review-card-tick { position:absolute; top:0; right:0; display:grid; place-items:center; width:48px; height:48px; margin:0; cursor:pointer; }
#app .review-card-tick input { width:24px; height:24px; min-height:24px; margin:0; accent-color:var(--green); cursor:pointer; }
.review-rail-hint,.review-rail-held { margin:12px 0 0; font-size:14px; }
.review-rail-held { background:linear-gradient(transparent 52%,var(--wheat) 52%); display:inline-block; }
.review-rail-hint { color:var(--muted); }
.review-bulk { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.review-bulk [hidden] { display:none; }
.review-error:not(:empty) { margin:12px 0 0; }
#app .review-back { display:inline-flex; align-items:center; min-height:44px; margin-top:6px; scroll-margin-top:82px; }
.review-saved { font-weight:600; color:var(--green); }

/* While Frank works, and what she comes back with. The note stays with the person the whole way through. */
.meal-change-editor > * + * { margin-top:14px; }
.review-working { display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:start; padding:16px; background:var(--wheat); border-radius:var(--panel-radius); scroll-margin-block:90px; }
.review-working:focus { outline:none; }
.review-working .frank-mascot { width:64px; height:auto; }
.review-working h3 { font:600 21px/1.2 Georgia,serif; margin:0 0 6px; }
.review-working p { margin:0 0 6px; }
.review-asked { font-weight:600; overflow-wrap:anywhere; white-space:pre-wrap; }
.review-working .thinking-dots { display:inline-flex; gap:5px; align-items:center; height:24px; }
.review-working .thinking-dots i { display:block; width:7px; height:7px; border-radius:50%; background:var(--ink); animation:review-thinking 1.2s ease-in-out infinite; }
.review-working .thinking-dots i:nth-child(2) { animation-delay:.15s; }
.review-working .thinking-dots i:nth-child(3) { animation-delay:.3s; }
.review-idea,.review-reply { scroll-margin-top:90px; }
.review-idea:focus,.review-reply:focus,.review-change-status:focus { outline:none; }
.review-idea-label { display:inline-block; margin:0; font-weight:600; background:linear-gradient(transparent 52%,var(--wheat) 52%); }
.review-idea-reply { white-space:pre-wrap; overflow-wrap:anywhere; }
.review-idea-note { margin:12px 0 0; font-size:14px; color:var(--muted); }
.review-reply { border-top:0; margin-top:0; padding-top:0; }
.review-proposed-recipe ul { padding-left:20px; line-height:1.6; }
.review-proposed-recipe ol { padding-left:22px; line-height:1.6; }
.review-idea + .review-change-status:empty + form,.review-idea + form { border-top:1px solid var(--line); padding-top:14px; }
@keyframes review-thinking { 0%,60%,100% { opacity:.35;transform:translateY(0); } 30% { opacity:1;transform:translateY(-3px); } }
@media(prefers-reduced-motion:reduce) { .review-working .thinking-dots i { animation:none; opacity:.65; } }

/* Touch and small screens swipe sideways through the week; a mouse keeps the whole week in view. */
@media(hover:none),(pointer:coarse),(max-width:700px) {
 .review-rail { display:flex; gap:10px; margin-inline:-18px; padding:2px 18px 10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:18px; scrollbar-width:none; }
 .review-rail::-webkit-scrollbar { display:none; }
 .review-card { flex:0 0 min(70vw,260px); scroll-snap-align:start; }
 .review-bulk > .primary { flex:1 1 100%; }
}
@media(forced-colors:active) { .review-card { border:1px solid CanvasText; }.review-card.is-ticked { border-width:3px; }.review-working { border:1px solid CanvasText; }.review-working .thinking-dots i { background:CanvasText; } }