*{box-sizing:border-box}[hidden]{display:none!important}
:root{--ink:#29342a;--green:#244c36;--cream:#f6f2e7;--paper:#fffdf7;--line:#dcd9c9;--orange:#ffbb8d;--muted:#526057;font:16px/1.5 "Segoe UI",sans-serif;color:var(--ink);background:var(--cream)}
body,h1,h2,p{margin:0}.wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.bar{border-bottom:1px solid var(--line);background:var(--paper)}.top,.inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.top{justify-content:space-between;min-height:69px}.brand{color:var(--green);font-size:25px;letter-spacing:-.06em;font-weight:850;text-decoration:none}.brand span{color:#aa4c25}nav{display:flex;gap:16px}nav a,footer{color:var(--muted)}
button,input,select{font:inherit;color:inherit;border:1px solid #a8b1a2;border-radius:8px;min-height:44px;padding:7px 11px;background:var(--paper)}button{cursor:pointer;font-weight:650}button:disabled{opacity:.55;cursor:default}.primary{background:var(--green);color:white;border-color:var(--green);border-radius:8px;padding:9px 14px;display:inline-block;text-decoration:none;font-weight:700}button:hover:not(:disabled){border-color:var(--green);filter:brightness(.96)}:focus-visible{outline:2px solid #386c4a;outline-offset:2px}:is(input,select):focus{outline:1px solid #386c4a;outline-offset:1px;border-color:#386c4a}
.hero{display:grid;grid-template-columns:1fr 1.1fr;margin:24px 0 17px;border-radius:19px;overflow:hidden;background:#254431;color:#fff8e9}.intro{padding:clamp(23px,5vw,60px)}.label{font-size:13px;font-weight:700}.intro .label{color:#ffc8a5}.intro h1{font-size:clamp(40px,6.1vw,82px);letter-spacing:-.073em;line-height:1.03;margin:.13em 0 .2em}.intro p{max-width:34ch}.intro .primary{margin-top:16px;background:var(--orange);color:#2c3025}.photo{min-height:220px;background:#b48859 url('/dinner.webp') center/cover no-repeat}
.workspace{display:grid;grid-template-columns:1fr .85fr;gap:14px;align-items:start}.board{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:19px;min-width:0;scroll-margin-top:12px}h2{font-size:24px;letter-spacing:-.045em}.recipe{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:11px 0}.recipe label,form label{font-weight:650}.timeline{display:grid;grid-template-columns:1fr 1fr;gap:8px}.timeline>div{display:grid;gap:5px;background:#edf1df;padding:10px 12px;border-radius:9px}.timeline>div+div{background:#fbead9}.timeline input,#actual{width:80px}.timeline .label{color:#435548}#total{font-size:17px;font-weight:750;margin:10px 0}details{border-block-start:1px solid var(--line);padding-block:9px}summary{cursor:pointer;font-weight:650}#pantry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:8px}#pantry label{display:grid;gap:3px;font-size:13px}#pantry input{width:100%;min-width:0}#cook{border-top:1px solid var(--line);padding-top:9px}#cook .inline{margin-top:5px}.shopping p{color:var(--muted);margin:4px 0 8px}.shopping article{display:grid;grid-template-columns:minmax(75px,1fr) minmax(80px,1fr) auto;gap:7px;align-items:center;border-top:1px solid var(--line);padding:9px 0}.shopping small{display:block;color:#81512c}.shopping input{width:100%;min-width:0}.notice{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:8px}#status{min-height:1.5em;margin:10px 0;color:#405e47}#shared input{width:100%}footer{border-top:1px solid var(--line);padding:11px 0 23px;font-size:13px}
@media(prefers-reduced-motion:no-preference){button,a{transition:background-color 150ms,border-color 150ms}button:active:not(:disabled){transform:translateY(1px)}}
@media(max-width:740px){.wrap{width:calc(100% - 24px)}.hero,.workspace{grid-template-columns:1fr}.photo{min-height:170px}.hero{margin-top:13px}.top nav{display:none}.top button{font-size:13px}.board{padding:13px}}
@media(max-width:740px){.intro{padding:18px 20px}.photo{min-height:136px}}

/* Form controls */
.quantity {
  display: inline-grid;
  grid-template-columns: 44px minmax(28px, 44px) 44px;
  width: max-content;
  max-width: 100%;
  align-items: center;
  background: #fffdf8;
  border: 1px solid #c6cfbc;
  border-radius: 11px;
}
.quantity button,
.quantity input {
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0;
  min-width: 0;
}
.quantity button { color: var(--green); font-size: 21px; }
.quantity button:hover:not(:disabled) { background: #e8f0e2; }
.quantity input[type="number"] {
  width: 100%;
  text-align: center;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.quantity input::-webkit-inner-spin-button,
.quantity input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.quantity :is(input, button):focus-visible { outline: 1px solid var(--green); outline-offset: -2px; }
.buyer { display: grid; gap: 3px; color: var(--muted); font-size: 12px; font-weight: 650; min-width: 0; }
.buyer input { font-size: 14px; background: #f8faf5; border-color: #b8c4b5; }
.shopping article > button { align-self: end; }
.recipe select { background: #f8faf5; border-color: #b8c4b5; }
@media (max-width: 390px) {
  .timeline > div { padding-inline: 8px; min-width: 0; }
  .shopping article { grid-template-columns: minmax(64px, 1fr) minmax(68px, 1fr) auto; }
}