:root{
  --bg:#F7F2E9;
  --card:#FFFDF8;
  --ink:#2E2A22;
  --muted:#8C8370;
  --sage:#6B8F5C;
  --sage-dark:#4F6C43;
  --mustard:#E0A93A;
  --mustard-dark:#B8801E;
  --line:#E4DCC8;
  --red-pin:#B4553F;
  --shadow: 0 6px 16px rgba(46,42,34,0.10);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(46,42,34,0.045) 1px, transparent 0);
  background-size: 22px 22px;
  color:var(--ink);
  font-family:'Inter', sans-serif;
  padding:0 0 80px 0;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- Header ---------- */
header{
  padding:48px 28px 36px;
  text-align:center;
  position:relative;
}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--sage-dark);
  margin-bottom:10px;
}
h1{
  font-family:'Fraunces', serif;
  font-weight:900;
  font-size:clamp(36px, 6vw, 58px);
  margin:0 0 8px;
  line-height:1.02;
}
h1 em{
  font-style:italic;
  font-weight:500;
  color:var(--sage-dark);
}
.sub{
  font-size:16px;
  color:var(--muted);
  max-width:480px;
  margin:0 auto;
}

/* ---------- Section labels ---------- */
.section-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 18px;
}
.section-head .num{
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--mustard-dark);
  font-size:15px;
}
.section-head h2{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:24px;
  margin:0;
}

/* ---------- Layout ---------- */
.layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:36px;
  align-items:start;
  margin-top:20px;
}
@media (max-width: 880px){
  .layout{grid-template-columns:1fr;}
}

/* ---------- Week strip ---------- */
.week-strip{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:22px 16px;
  padding-top:6px;
}
.day-card{
  background:var(--card);
  border-radius:3px;
  box-shadow:var(--shadow);
  padding:16px 14px 14px;
  min-height:168px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .15s ease;
}
.day-card:nth-child(odd){transform:rotate(-1.1deg);}
.day-card:nth-child(even){transform:rotate(1.1deg);}
.day-card:hover{transform:rotate(0deg) translateY(-3px);}
.pin{
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e07a63, var(--red-pin));
  box-shadow:0 2px 3px rgba(0,0,0,0.25);
}
.day-name{
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11.5px;
  color:var(--muted);
  margin-bottom:8px;
}
.day-meal{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:18px;
  line-height:1.2;
  flex-grow:1;
}
.day-meal.empty{
  color:var(--muted);
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-style:italic;
  font-size:14px;
}
.day-emoji{font-size:22px; display:block; margin-bottom:4px;}
.pick-btn{
  margin-top:10px;
  border:none;
  background:var(--sage);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12.5px;
  padding:7px 10px;
  border-radius:20px;
  cursor:pointer;
  align-self:flex-start;
}
.pick-btn:hover{background:var(--sage-dark);}
.clear-x{
  position:absolute;
  top:8px; right:10px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:15px;
  cursor:pointer;
  line-height:1;
}
.clear-x:hover{color:var(--red-pin);}

/* ---------- Grocery list (receipt style) ---------- */
.receipt{
  background:var(--card);
  border-radius:2px;
  box-shadow:var(--shadow);
  padding:26px 22px 24px;
  position:sticky;
  top:24px;
  background-image: repeating-linear-gradient(transparent, transparent 27px, var(--line) 28px);
}
.receipt h2{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:21px;
  margin:0 0 4px;
}
.receipt .count{
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:16px;
  display:block;
}
.grocery-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:5px 0;
  font-size:14.5px;
}
.grocery-item input[type=checkbox]{
  accent-color: var(--sage);
  width:15px; height:15px;
  flex-shrink:0;
  margin-top:2px;
}
.grocery-item label{
  cursor:pointer;
}
.grocery-item.checked label{
  text-decoration:line-through;
  color:var(--muted);
}
.qty{
  font-weight:700;
  color:var(--mustard-dark);
  margin-right:2px;
}
.empty-note{
  color:var(--muted);
  font-size:13.5px;
  font-style:italic;
  line-height:1.5;
}

/* ---------- Meal library ---------- */
.library{margin-top:64px;}
.meal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:18px;
}
.meal-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px;
  cursor:pointer;
  transition:box-shadow .15s ease, transform .15s ease;
  position:relative;
}
.meal-card:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
.meal-card .emoji{font-size:28px; display:block; margin-bottom:8px;}
.meal-card .name{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:17px;
  margin-bottom:4px;
}
.meal-card .ing-count{
  font-size:12.5px;
  color:var(--muted);
}
.meal-card .del{
  position:absolute; top:10px; right:10px;
  border:none; background:transparent; color:var(--muted);
  font-size:14px; cursor:pointer; opacity:0; transition:opacity .15s;
}
.meal-card:hover .del{opacity:1;}
.meal-card .del:hover{color:var(--red-pin);}

.add-card{
  border:2px dashed var(--line);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  color:var(--sage-dark);
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:16px;
  min-height:110px;
  background:transparent;
}
.add-card:hover{border-color:var(--sage); background:rgba(107,143,92,0.06);}
.add-card .plus{font-size:26px; line-height:1;}

/* ---------- Modal ---------- */
.overlay{
  position:fixed; inset:0;
  background:rgba(46,42,34,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:20px;
}
.overlay.open{display:flex;}
.modal{
  background:var(--card);
  border-radius:10px;
  max-width:480px;
  width:100%;
  max-height:86vh;
  overflow-y:auto;
  padding:28px;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.modal h3{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:22px;
  margin:0 0 18px;
}
.field-row{margin-bottom:14px;}
.field-row label{
  display:block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:5px;
}
.field-row input, .field-row select, .field-row textarea{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  background:#fff;
}
.field-row textarea{
  resize:vertical;
  min-height:80px;
  line-height:1.5;
}
.name-emoji-row{display:flex; gap:10px;}
.name-emoji-row .field-row:first-child{width:64px;}
.name-emoji-row .field-row:last-child{flex-grow:1;}
.ing-row{
  display:grid;
  grid-template-columns:1fr 70px 78px 30px;
  gap:8px;
  margin-bottom:8px;
  align-items:center;
}
.ing-row input{
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13.5px;
}
.rm-ing{
  background:transparent; border:none; color:var(--muted);
  font-size:16px; cursor:pointer;
}
.rm-ing:hover{color:var(--red-pin);}
.add-ing-btn{
  background:transparent;
  border:1px dashed var(--line);
  color:var(--sage-dark);
  font-weight:600;
  font-size:13px;
  padding:8px;
  border-radius:6px;
  width:100%;
  cursor:pointer;
  margin-top:4px;
}
.add-ing-btn:hover{border-color:var(--sage);}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:22px;
}
.btn{
  padding:10px 18px;
  border-radius:20px;
  border:none;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
}
.btn-ghost{background:transparent; color:var(--muted);}
.btn-ghost:hover{color:var(--ink);}
.btn-primary{background:var(--sage); color:#fff;}
.btn-primary:hover{background:var(--sage-dark);}

.picker-list{display:flex; flex-direction:column; gap:8px; max-height:400px; overflow-y:auto;}
.picker-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
}
.picker-item:hover{border-color:var(--sage); background:rgba(107,143,92,0.06);}
.picker-item .emoji{font-size:20px;}
.picker-item .name{font-family:'Fraunces',serif; font-weight:600; font-size:15px;}

.loading-note{
  text-align:center; color:var(--muted); font-size:13px; padding:30px;
}
footer{
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  margin-top:60px;
}