:root{color-scheme:light;font:clamp(16px,1.1vw,23px)/1.4 system-ui,sans-serif;color:#182d28;background:#f4f3eb}
*{box-sizing:border-box}
body{margin:0}
.top{background:#183c33;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:1rem max(4vw,1rem);gap:1rem}
.brand,.eyebrow,.footer{font-size:.72rem;font-weight:800;letter-spacing:.14em}
h1,h2,h3,p{margin:0}
h1{font-size:1.45rem}
main{max-width:115rem;margin:auto;padding:1.5rem max(4vw,1rem)}
#signin{max-width:28rem;margin:2rem auto;width:calc(100% - 2rem)}
#login-status{margin-top:.6rem}
#session-controls{flex-wrap:wrap;justify-content:flex-end;color:#182d28}
#calendar-status{margin-bottom:1rem;padding:.65rem .8rem;border-radius:.5rem;background:#e2eee9;color:#194739}
#calendar-status.calendar-error{background:#fce8e3;color:#822b20}
.recipe{flex:1;min-width:0}
.recipe summary{cursor:pointer;min-height:44px;padding:.4rem 0}
.recipe h4{margin:.65rem 0 .2rem}
.recipe p{white-space:pre-wrap;margin-bottom:.45rem}
#recipe-fields textarea{font:inherit;padding:.45rem;border:1px solid #a5b7a8;border-radius:.5rem;resize:vertical}
.intro,.heading,.controls{display:flex;align-items:center;gap:.5rem}
.intro,.heading{justify-content:space-between}
.intro{margin-bottom:1.2rem;flex-wrap:wrap;gap:1rem}
.intro h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;margin:.2rem 0}
#mode,.footer,small,.muted{color:#52635c}
section{background:#fffdf7;border:1px solid #d6ded3;border-radius:1rem;padding:1rem;min-width:0}
.heading{margin-bottom:.75rem;flex-wrap:wrap}
.heading h2{font-size:1.25rem}
#days,.panels{display:grid;gap:.65rem}
#days{grid-template-columns:repeat(7,minmax(0,1fr))}
.panels{grid-template-columns:1.25fr 1fr;margin-top:.8rem}
.intro .controls{flex-wrap:wrap}
.nav-button{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .65rem;border-radius:.5rem;background:#235941;color:#fff;font-weight:650;text-decoration:none}
#shopping,#shopping:not([hidden]) + #status{max-width:42rem;margin-inline:auto}
#shopping .heading{margin-top:1rem}
#shopping .check{flex:1;min-height:52px}
#shopping .check input{width:1.4rem;min-width:1.4rem}
#grocery-undo{justify-content:space-between;background:#e2eee9;padding:.5rem .7rem;border-radius:.5rem;margin-bottom:.5rem}
#completed-groceries summary{cursor:pointer;min-height:44px;padding:.55rem 0}
.day{background:#eef2e8;border-radius:.65rem;padding:.6rem;min-height:7rem;overflow-wrap:anywhere}
.day[data-today]{outline:2px solid #51795d;outline-offset:-2px;background:#e3efdc}
.day h3{font-size:.95rem;margin-bottom:.3rem}
.day button{width:100%;text-align:left}
.day button + button{margin-top:.35rem}
button,select,input{font:inherit;min-height:44px;border:1px solid #a5b7a8;border-radius:.5rem;background:#fffdf7;color:inherit;padding:.35rem .6rem}
button{cursor:pointer;font-weight:650;min-width:44px}
button:hover{background:#e4eee3}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #317450;outline-offset:2px}
.top select{color:#182d28}
ul{margin:0;padding:0;list-style:none}
li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.22rem 0;border-bottom:1px solid #e5e8de;overflow-wrap:anywhere}
.check{display:flex;align-items:center;gap:.5rem;min-height:44px}
.check input{width:1.15rem;min-width:1.15rem;accent-color:#286145;margin:0}
.check:has(input){cursor:pointer}
.task-owner{font-size:.85rem;color:#315c4e;margin-top:.55rem}
.section-links{display:none}
.done{text-decoration:line-through;color:#52635c}
.ideas,.footer{margin-top:1rem}
dialog{max-width:min(28rem,92vw);width:100%;border:1px solid #a5b7a8;border-radius:1rem;background:#fffdf7;color:inherit}
dialog::backdrop{background:#183c3380}
form label{display:grid;margin:.6rem 0}
form .controls{justify-content:flex-end;margin-top:1rem}
.primary{background:#235941;color:white}
.primary:hover{background:#183c33}
[hidden]{display:none!important}
@media(max-width:950px){#days{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:570px){#days,.panels{grid-template-columns:1fr}.day{min-height:0}.top label{font-size:.85rem}}
@media(max-width:950px){
  .section-links{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
  .section-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .65rem;border:1px solid #a5b7a8;border-radius:.5rem;color:#183c33;background:#fffdf7}
}