/* ============================================
   AoliDeli — Meal Planner
   Compact · Clean · Database-style
   ============================================ */
.planner { padding: 30px 0 80px; background: var(--white); }

/* Ingredient images */
.ing-img { width:40px; height:40px; object-fit:cover; border-radius:8px; vertical-align:middle; display:inline-block; }

/* Sticky summary bar — Page 3 */
.sum-sticky {
  position: sticky;
  top: 58px;
  z-index: 50;
  background: #f8f3ee;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.sum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 2px;
}
.sum-box {
  text-align: center;
  padding: 3px 4px;
  background: #fff;
  border-radius: 4px;
}
.sum-val {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark);
}
.sum-val-sm {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--dark);
}
.sum-lbl {
  font-size: 0.5rem;
  color: var(--gray);
  line-height: 1.2;
}
.sum-bar {
  height: 10px;
  background: #e8e0d8;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 3px;
}
.sum-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.15s;
}

/* Source citation */
.src-ref {
  font-size: 0.5rem;
  color: #bbb;
  text-align: right;
  padding: 2px 8px 4px;
  line-height: 1.2;
}
.planner-container { max-width: 720px; margin: 0 auto; }

/* Steps */
.steps { display:flex; justify-content:center; gap:6px; margin-bottom:28px; }
.step {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:600;
  background:var(--gray-light); color:var(--gray);
  transition:var(--transition);
}
.step.active { background:var(--green); color:var(--white); }
.step.done { background:var(--gold); color:var(--white); }

/* Card */
.card {
  background:var(--cream); border-radius:10px; padding:28px;
  box-shadow:var(--shadow); margin-bottom:20px;
}
.card h3 {
  font-family:var(--font-serif); font-size:1.1rem;
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid var(--gray-light);
}

/* Form */
.form-r2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.form-r3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px; }
.form-g label { display:block; font-size:0.75rem; font-weight:500; margin-bottom:3px; color:var(--gray); }
.form-g input, .form-g select {
  width:100%; padding:8px 10px; font-size:0.82rem;
  border:1.5px solid var(--gray-light); border-radius:6px;
  font-family:var(--font-sans); background:var(--white);
  outline:none; transition:var(--transition);
}
.form-g input:focus, .form-g select:focus { border-color:var(--green); }

/* Result card */
.rc {
  background:linear-gradient(135deg,var(--green-deep),var(--green));
  border-radius:12px; padding:24px; color:var(--white); margin-bottom:20px;
}
.rc-big { font-family:var(--font-serif); font-size:2.6rem; font-weight:700; line-height:1; }
.rc-label { font-size:0.78rem; opacity:0.7; margin-top:4px; }
.rc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.rc-item { text-align:center; padding:10px; background:rgba(255,255,255,0.1); border-radius:6px; }
.rc-item .n { font-family:var(--font-serif); font-size:1.2rem; font-weight:600; }
.rc-item .l { font-size:0.65rem; opacity:0.7; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }

/* Macro bars */
.mb { margin:16px 0; }
.mr { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ml { width:60px; font-size:0.78rem; font-weight:500; text-align:right; }
.mbb { flex:1; height:20px; background:var(--gray-light); border-radius:10px; overflow:hidden; }
.mbf { height:100%; border-radius:10px; transition:width 0.5s ease; }
.mbf.mt { background:#E8734A; }
.mbf.vg { background:#5CB85C; }
.mbf.cb { background:#F0AD4E; }
.mbf.ot { background:#5BC0DE; }
.mp { font-size:0.78rem; font-weight:500; color:var(--gray); width:32px; }

/* Ingredient section */
.is {
  margin-bottom:18px;
  background:#f8f5f0;
  border-radius:10px;
  padding:2px 0;
}
.ish {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-serif); font-size:1rem;
  padding:10px 14px 8px;
  margin-bottom:8px;
  border-left:3px solid var(--gold);
  border-bottom:1px solid #e8e2da;
  cursor:pointer;
  user-select:none;
}
.ish .kcal-info {
  font-family:var(--font-sans); font-size:0.72rem;
  font-weight:400; color:#999; margin-left:auto;
}
.ish .arrow { font-size:0.7rem; transition:transform 0.3s ease; }
.ish .arrow.open { transform:rotate(90deg); }

.ig { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.ig.collapsed { display:none; }

.ip {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  background:#fcfaf7;
  border-radius:8px;
  border:1px solid #e8e2da;
  transition:var(--transition);
}
.ip:hover { border-color:var(--gold); background:#fbf8f3; }
.ip .ing-img, .ip .emoji { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ip .emoji { font-size:1.3rem; width:40px; text-align:center; }
.ip .info { flex:1; min-width:0; padding:0 2px; }
.ip .info .n { font-size:0.82rem; font-weight:600; color:var(--green-deep); line-height:1.3; }
.ip .info .d { font-size:0.65rem; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.ip .qty { display:flex; align-items:center; gap:3px; flex-shrink:0; margin-left:2px; }
.ip .qty button {
  width:26px; height:26px; border-radius:50%;
  border:1px solid #ddd8d0; background:#fff;
  color:#555; font-size:0.85rem; font-weight:600;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.18s ease;
  line-height:1;
}
.ip .qty button:active { transform:scale(0.92); }
.ip .qty button:hover { background:var(--green); color:var(--white); border-color:var(--green); }
.ip .qty .num { font-size:0.8rem; font-weight:600; min-width:18px; text-align:center; color:var(--dark); }
.ip .qty .g { font-size:0.6rem; color:#999; width:22px; text-align:left; margin-left:-1px; }

/* Ca:P bar */
.cap { text-align:center; padding:14px; background:var(--cream); border-radius:8px; margin:16px 0; }
.cap .bar-wrap { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; }
.cap .bar-wrap .bar {
  width:160px; height:5px; background:var(--gray-light); border-radius:3px; position:relative;
}
.cap .bar-wrap .bar .ind {
  height:100%; border-radius:3px; transition:width 0.4s ease;
}
.cap .bar-wrap .bar .ind.ok { background:var(--green); }
.cap .bar-wrap .bar .ind.low { background:var(--gold); }
.cap .bar-wrap .bar .ind.high { background:#d9534f; }

/* Calendar */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin:12px 0; }
.cal-d {
  aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  border-radius:6px; font-size:0.72rem; cursor:pointer;
  transition:var(--transition); background:var(--cream);
}
.cal-d:hover { background:var(--gold-light); }
.cal-d.has { background:var(--green-mist); color:var(--green-deep); font-weight:600; }
.cal-d.active { outline:2px solid var(--gold); outline-offset:-2px; }
.cal-d .dn { font-size:0.95rem; }
.cal-d .dd { font-size:0.45rem; margin-top:2px; }
.cal-empty { background:transparent; cursor:default; }
.cal-header {
  aspect-ratio:unset; padding:8px 0 4px;
  font-size:0.85rem; font-weight:600;
  color:var(--gray); background:transparent;
  cursor:default; border-radius:0;
}
.cal-header:hover { background:transparent; }

/* History list */
.hl { }
.hli {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--gray-light);
  cursor:pointer; font-size:0.72rem; transition:var(--transition);
}
.hli:hover { background:var(--cream); margin:0 -8px; padding:6px 8px; border-radius:4px; }

/* Detail popup */
.detail { margin-top:12px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.detail-item { text-align:center; padding:8px; background:var(--cream); border-radius:6px; }
.detail-item .n { font-weight:700; }
.detail-item .l { font-size:0.7rem; color:var(--gray); }

/* Buttons */
.btns { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

@media (max-width:600px) {
  .form-r2, .form-r3 { grid-template-columns:1fr; }
  .ig { grid-template-columns:1fr; }
  .rc-grid { grid-template-columns:1fr; }
}