/* ===== Colors (always light, even when the device is in dark mode) ===== */
:root {
  color-scheme: light; /* keeps the browser's own bits (dropdowns, number boxes) light too */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* pastel green with pink accents */
  --bg: #edf8f0;       /* page background: pastel green */
  --card: #ffffff;     /* cards and bubbles */
  --ink: #2f4a3e;      /* main text: dark leafy green */
  --soft: #6f8d80;     /* faded text: sage */
  --pink: #ff9fb8;     /* the accent: buttons, selected tab, my chat bubbles */
  --mint: #cdeedb;     /* "have it" tags */
  --mintink: #1f6b4d;  /* text on mint */
  --butter: #ffe9a8;   /* highlights */
  --miss: #ffd9e2;     /* "need it" pink */
  --shelf: #cfe6d6;
  /* the fridge picture */
  --fridge: #ffffff;      /* body and doors */
  --door-shade: #eceef2;  /* soft grey shading on the doors */
  --outline: #2e2a2d;     /* bold cartoon outline */
  --door-in: #e9eef2;     /* inside of the door */
  --fridge-in: #f5f9fb;   /* inside the fridge */
  --shelf-line: #cfe0e8;  /* glass shelves */
}


/* ===== Page basics ===== */
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Fredoka', system-ui, sans-serif; min-height: 100vh; }
main { max-width: 560px; margin: 0 auto; padding: 16px; }
h1 { font-size: 26px; margin: 0; }
h2 { font-size: 18px; margin: 18px 0 8px; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
[hidden] { display: none !important; } /* !important: hidden things stay hidden, even if another style says display: flex */

/* ===== Mascot and speech bubble ===== */
.top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#mascot { font-size: 52px; cursor: pointer; border: 0; background: none; padding: 0; line-height: 1; }
.wob { animation: wob .6s; }
@keyframes wob {
  25% { transform: rotate(-14deg) scale(1.1); }
  60% { transform: rotate(12deg) scale(1.1); }
}
.bubble { background: var(--card); border-radius: 20px 20px 20px 4px; padding: 10px 14px; font-size: 15px; flex: 1; }

/* ===== Tabs ===== */
nav { display: flex; gap: 6px; background: var(--card); padding: 6px; border-radius: 999px; margin-bottom: 16px; }
nav button { flex: 1; border: 0; background: none; font: inherit; color: var(--soft); padding: 9px 4px; border-radius: 999px; cursor: pointer; }
nav button.on { background: var(--pink); color: #fff; font-weight: 600; }

/* ===== The fridge picture ===== */
/* overflow: hidden stops the open door from making the page scroll sideways */
.fridge-wrap { display: flex; justify-content: center; padding: 10px 0 24px; overflow: hidden; }
/* Body: white with a bold cartoon outline. Text inside the fridge stays dark, even in dark mode. */
.fridge-box { position: relative; width: min(100%, 280px); background: var(--fridge); color: var(--ink); border: 3px solid var(--outline); border-radius: 24px 24px 12px 12px; padding: 6px 6px 0; cursor: pointer; }
/* Freezer door on top */
.freezer { position: relative; height: 72px; margin-bottom: 6px; background: var(--fridge); border: 3px solid var(--outline); border-radius: 18px 18px 6px 6px; box-shadow: inset -10px -8px 0 var(--door-shade); }
/* Grey handles on the left, like the picture */
.handle { position: absolute; left: 14px; top: 24px; width: 12px; height: 110px; border: 2.5px solid var(--outline); border-radius: 8px; background: linear-gradient(to right, #f4f4f6, #b9bec5); }
.handle.short { top: 12px; height: 42px; }

/* Main compartment: holds the inside and the door on top of it */
.main { position: relative; }
/* Inside: items sit on glass shelves (a line every 60px) */
.inside { min-height: 240px; padding: 0 10px; border: 3px solid var(--outline); border-radius: 6px 6px 10px 10px; background: var(--fridge-in) repeating-linear-gradient(to bottom, transparent 0 54px, var(--shelf-line) 54px 60px); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 4px; }
.inside .empty { height: 54px; display: flex; align-items: center; font-size: 13px; color: var(--soft); }
.food { width: 52px; height: 60px; padding-bottom: 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.food .e { font-size: 28px; line-height: 1; }
.food .q { font-size: 10px; color: var(--soft); background: #fff; border-radius: 999px; padding: 0 5px; margin-top: 2px; white-space: nowrap; }

/* Grey vent at the bottom, with two little feet */
.grill { position: relative; height: 24px; margin: 8px 4px 8px; background: #d3d7dc; border: 3px solid var(--outline); border-radius: 4px; display: flex; align-items: center; justify-content: space-evenly; }
.grill span { width: 18%; height: 3px; border-radius: 2px; background: #858b93; }
.grill::before, .grill::after { content: ""; position: absolute; bottom: -14px; width: 20px; height: 8px; background: #9aa0a7; border: 2.5px solid var(--outline); border-top: 0; border-radius: 0 0 5px 5px; }
.grill::before { left: 10px; }
.grill::after { right: 10px; }
.food.new { animation: dropin .7s .3s both; }      /* waits for the door, then drops onto the shelf */
.food.out { animation: out .35s .3s forwards; }
@keyframes dropin {
  0% { transform: translateY(-50px) scale(.3); opacity: 0; }
  60% { transform: translateY(3px) scale(1.15); opacity: 1; }
  100% { transform: none; }
}

/* The door: handles are on the left, so it's hinged on the RIGHT and swings open to the right in 3D */
.door { position: absolute; inset: 0; border: 0; padding: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; transform-origin: right center; transform-style: preserve-3d; transform: perspective(900px) rotateY(0); transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); }
.fridge-box.open .door { transform: perspective(900px) rotateY(105deg); }
.door-front, .door-back { position: absolute; inset: 0; border: 3px solid var(--outline); border-radius: 6px 6px 10px 10px; backface-visibility: hidden; }
.door-front { background: var(--fridge); box-shadow: inset -10px -8px 0 var(--door-shade); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.door-back { background: var(--door-in) repeating-linear-gradient(to bottom, transparent 0 50px, var(--shelf-line) 50px 56px); transform: rotateY(180deg); }
.magnet { font-size: 34px; transform: rotate(-12deg); }
.count { font-weight: 600; }
.hint { font-size: 12px; color: var(--soft); }

/* Narrow phones: room on the right for the open door */
@media (max-width: 420px) {
  .fridge-wrap { padding-right: 60px; }
}

/* ===== Fridge list and ingredient stickers ===== */
.fridge { background: var(--card); border-radius: 24px; padding: 10px 12px 14px; }
.shelf { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; padding: 6px 4px 10px; border-bottom: 8px solid var(--shelf); border-radius: 0 0 6px 6px; }
.shelf + .shelf { margin-top: 10px; }
.empty { color: var(--soft); font-size: 14px; align-self: center; padding: 0 6px; }
.chip { border: 0; background: var(--butter); border-radius: 16px; padding: 6px 10px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip .e { font-size: 24px; }
.shelf .chip { animation: pop .35s; }
.chip.out { animation: out .3s forwards; }

/* Pop in / fade out animations */
@keyframes pop {
  0% { transform: scale(.3); }
  70% { transform: scale(1.15); }
}
@keyframes out {
  to { transform: translateY(14px) scale(.4); opacity: 0; }
}

/* "Tap to add" sticker picker */
.picker .chip { background: var(--card); }
.picker .chip:hover { background: var(--butter); }
.picker .chip.have { opacity: .4; }

/* Sticker groups (Vegetables, Fruit...) */
.group { margin-bottom: 12px; }
.grouptitle { font-size: 14px; font-weight: 500; color: var(--soft); margin: 0 0 6px 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* My own ingredient: sticker + a little ✕ joined together */
.mine { display: inline-flex; }
.mine .chip { border-radius: 16px 0 0 16px; }
.mine .x { border: 0; background: var(--card); color: var(--soft); border-radius: 0 16px 16px 0; padding: 0 10px 0 4px; font: inherit; font-size: 13px; cursor: pointer; }
.mine .x:hover { color: var(--ink); background: var(--miss); }
/* "+ New ingredient" button */
.newing { border: 2px dashed var(--pink); background: none; color: var(--ink); font: inherit; font-size: 15px; border-radius: 16px; padding: 7px 14px; cursor: pointer; }
.newing:hover { background: var(--card); }
/* Emoji choices when making a new ingredient */
#nName { width: auto; flex: 1 1 160px; }
.palette { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.pick { width: 40px; height: 40px; border: 2px solid transparent; border-radius: 12px; background: var(--bg); font-size: 22px; cursor: pointer; }
.pick.on { border-color: var(--pink); background: var(--butter); }

/* One row in the fridge list */
.item { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 2px dashed var(--miss); }
.item:last-child { border-bottom: 0; }
.item .e { font-size: 26px; }
.item .nm { flex: 1; }
.item.new { animation: pop .35s; }
.item.out { animation: out .3s forwards; }
.qty { background: var(--butter); border-radius: 999px; padding: 4px 12px; font-weight: 500; white-space: nowrap; min-width: 64px; text-align: center; }
.step { border: 0; background: var(--miss); color: var(--ink); width: 30px; height: 30px; border-radius: 50%; font: inherit; cursor: pointer; }

/* Quantity panel that opens when you tap a sticker */
.adder { background: var(--card); border: 2px solid var(--pink); border-radius: 20px; padding: 12px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adder .e { font-size: 26px; }
.adder input { width: 84px; margin: 0; padding: 8px 12px; }
.adder select, .ingrow select { font: inherit; padding: 8px 10px; border-radius: 999px; border: 2px solid var(--miss); background: var(--card); color: var(--ink); }

/* ===== Recipe cards ===== */
.illo { display: block; width: 100%; max-width: 170px; height: auto; margin: 2px auto 4px; }
.card { background: var(--card); border-radius: 22px; padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.meter { font-size: 18px; letter-spacing: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tag { border-radius: 999px; padding: 3px 10px; font-size: 14px; background: var(--mint); color: var(--mintink); }
.tag.no { background: var(--miss); color: var(--ink); }
.tag.short { background: var(--butter); color: var(--ink); } /* have some, but not enough */
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.save { border: 2px solid var(--pink); background: none; color: var(--ink); font: inherit; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.save.on { background: var(--pink); color: #fff; }
.save:disabled { opacity: .6; cursor: wait; }
/* Photo on online recipe cards */
.photo { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 16px; margin: 6px 0; }
/* ===== Recipe Finder chat ===== */
.chat { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 85%; padding: 10px 14px; font-size: 15px; animation: pop .3s; }
/* Pepper's messages: left, white bubble */
.msg.bot { align-self: flex-start; background: var(--card); border-radius: 18px 18px 18px 4px; display: flex; gap: 8px; align-items: flex-start; }
.msg.bot .who { font-size: 20px; line-height: 1.1; }
/* My answers: right, pink bubble */
.msg.me { align-self: flex-end; background: var(--pink); color: #fff; border-radius: 18px 18px 4px 18px; }
/* Recipe cards: full width, no bubble, stacked one below the other */
.msg.wide { display: block; max-width: 100%; width: 100%; padding: 0; background: none; }
/* Reply chips */
.replies { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; justify-content: flex-end; }
.reply { border: 2px solid var(--pink); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; border-radius: 999px; padding: 8px 14px; cursor: pointer; animation: pop .3s; }
.reply:hover { background: var(--pink); color: #fff; }
/* "Pepper is typing" dots */
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--soft); animation: blink 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Dish name above its recipes and videos */
.dish { font-weight: 600; font-size: 16px; margin: 16px 0 8px; }
/* Clickable titles and pictures */
.plain { color: inherit; text-decoration: none; }
.plain:hover { text-decoration: underline; text-decoration-color: var(--pink); }
.thumb { position: relative; display: block; }
.thumb:hover .photo { filter: brightness(1.05); }
/* Round pink play button on video thumbnails */
.play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 22px; display: grid; place-items: center; padding-left: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .2s; }
.thumb:hover .play { transform: scale(1.12); }
.note { color: var(--soft); font-size: 14px; }

/* Link back to where the recipe came from */
.src { display: inline-block; margin-top: 6px; color: var(--ink); background: var(--butter); border-radius: 999px; padding: 3px 12px; font-size: 14px; text-decoration: none; }
.src:hover { background: var(--miss); }

/* ===== Add my own recipe form ===== */
.addbtn { margin-bottom: 12px; }
.form { animation: pop .35s; }
.form label, .form .label { display: block; font-size: 14px; color: var(--soft); margin: 0 0 6px; }
.form label input { margin-top: 4px; }
.ingrow { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.ingrow input { margin: 0; padding: 8px 12px; }
.ingrow .iname { flex: 1; min-width: 0; }
.ingrow .iqty { width: 72px; }
.ingrow .step { flex-shrink: 0; }
#fAddIng { margin-bottom: 14px; }

/* ===== Weekly plan ===== */
.planbtns { justify-content: flex-start; margin-bottom: 12px; }
.day h3 { margin-bottom: 2px; }
.slot { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 2px dashed var(--miss); }
.slotpic { width: 64px; flex-shrink: 0; text-align: center; font-size: 36px; }
.slotpic .illo { width: 64px; height: auto; margin: 0; }
.slotpic .photo { width: 64px; height: 64px; max-height: none; margin: 0; border-radius: 12px; }
.slotbody { flex: 1; min-width: 0; }
.slotbody select { width: 100%; font: inherit; padding: 6px 10px; border-radius: 999px; border: 2px solid var(--miss); background: var(--card); color: var(--ink); margin: 4px 0; }
.meal { font-size: 14px; color: var(--soft); font-weight: 500; }
.meter.small { font-size: 13px; letter-spacing: 1px; }
.save.small { padding: 4px 12px; font-size: 14px; margin-top: 6px; }
.slot.done .slotpic { opacity: .55; }           /* cooked meals look a little faded */
.slotbody select:disabled { opacity: .6; }
.slot.new { animation: pop .35s; }               /* little pop when you tap Cooked it! */

/* Four tabs: smaller text on narrow phones so they fit */
@media (max-width: 420px) {
  nav button { font-size: 13px; padding: 8px 2px; }
}

/* ===== Pop-up panel ("How much is left?" and the fridge check) ===== */
.sheet-back { position: fixed; inset: 0; z-index: 50; padding: 16px; background: rgba(237, 248, 240, .75); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(100%, 520px); max-height: 85vh; overflow: auto; background: var(--card); border-radius: 24px; padding: 18px; animation: pop .3s; box-shadow: 0 10px 40px rgba(255, 143, 174, .35); border: 2px solid var(--miss); }
.sheet h3 { margin: 0 0 4px; font-size: 20px; }
.lrow { margin: 14px 0; }
.lname { display: block; font-weight: 500; margin-bottom: 6px; }
.levels { display: flex; flex-wrap: wrap; gap: 6px; }
.level { border: 2px solid var(--miss); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.level.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.sheet-btns { justify-content: flex-end; margin-top: 8px; }

/* ===== Text inputs ===== */
input { width: 100%; font: inherit; padding: 11px 16px; border-radius: 999px; border: 2px solid var(--miss); background: var(--card); color: var(--ink); margin-bottom: 12px; }

/* Turn off animations for people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}