  
    = MAX) return "Full tank. Some days cost more than others. Be curious, not judgmental.";
    return "You still have capacity left. Notice what helps you keep it steady.";
  }
  function barColor(value) {
    const pct = Math.max(0, value) / MAX;
    if (value < 0) return "#EFC7D4";
    if (pct > 0.6) return "#1D9E75";
    if (pct > 0.3) return "#DDB9C5";
    return "#EFC7D4";
  }
  function showToast(msg) {
    const t = qs("#st-toast");
    t.textContent = msg;
    t.classList.add("show");
    clearTimeout(t._timer);
    t._timer = setTimeout(() => t.classList.remove("show"), 2200);
  }
  function renderIcons() {
    const wrap = qs("#st-spoon-icons");
    wrap.innerHTML = "";
    const show = Math.min(MAX, 20);
    const safeCurrent = Math.max(0, current);
    for (let i = 0; i < show; i++) {
      const d = document.createElement("div");
      d.className = "st-spoon-icon " + (i < safeCurrent ? "active" : "used");
      d.textContent = "🥄";
      wrap.appendChild(d);
    }
  }
  function renderBottomStatus() {
    const bubble = qs("#st-bottom-spoon");
    const valueEl = qs("#st-bottom-value");
    const labelEl = qs("#st-bottom-label");
    bubble.classList.remove("positive", "low", "empty", "negative");
    valueEl.textContent = current;
    if (current < 0) {
      bubble.classList.add("negative");
      labelEl.textContent = "borrowed";
    } else if (current === 0) {
      bubble.classList.add("empty");
      labelEl.textContent = "empty";
    } else if (current <= Math.max(2, Math.floor(MAX * 0.35))) {
      bubble.classList.add("low");
      labelEl.textContent = "remaining";
    } else {
      bubble.classList.add("positive");
      labelEl.textContent = "remaining";
    }
  }
  function renderLog() {
    const wrap = qs("#st-log");
    if (eventLog.length === 0) {
      wrap.innerHTML = "<p class=\"st-log-empty\">Nothing logged yet — your day is ahead of you.</p>";
      return;
    }
    wrap.innerHTML = [...eventLog].reverse().map((e, idx) =>
      "<div class=\"st-log-entry\">" +
        "<div class=\"st-log-main\">" +
          "<span class=\"st-l-label\">" + esc(e.name) + "</span>" +
          "<span class=\"" + (e.type === "drain" ? "st-l-drain" : "st-l-gain") + "\">" +
            (e.type === "drain" ? "−" : "+") + e.value +
          "</span>" +
        "</div>" +
        "<button type=\"button\" class=\"st-log-remove-btn\" data-remove-index=\"" + idx + "\">✕</button>" +
      "</div>"
    ).join("");
    wrap.querySelectorAll("[data-remove-index]").forEach(btn => {
      btn.addEventListener("click", () => {
        const reverseIndex = Number(btn.dataset.removeIndex);
        const actualIndex = eventLog.length - 1 - reverseIndex;
        removeLogEntry(actualIndex);
      });
    });
  }
  function renderGrid(type) {
    const items = type === "drain" ? drainItems : restoreItems;
    const grid = qs("#st-" + type + "-grid");
    grid.innerHTML = "";
    if (items.length === 0) {
      grid.innerHTML = "<p class=\"st-empty-hint\">Add " + (type === "drain" ? "an activity" : "a rest option") + " above to get started.</p>";
      updateHeight();
      return;
    }
    items.forEach(item => {
      const card = document.createElement("div");
      card.className = "st-item-card" + (type === "restore" ? " restore-card" : "");
      const canUse = type === "drain" ? current >= item.value : true;
      const useLabel = type === "drain" ? "Subtract" : "Add back";
      const useCls = "st-use-btn" + (type === "drain" ? " drain-use" : " restore-use") + (canUse ? "" : " disabled");
      const subText = type === "drain"
        ? ("Costs " + item.value + " spoon" + (item.value !== 1 ? "s" : ""))
        : ("+" + item.value + " spoon" + (item.value !== 1 ? "s" : ""));
      card.innerHTML =
        "<div class=\"st-card-info\">" +
          "<span class=\"st-card-name\">" + esc(item.name) + "</span>" +
          "<span class=\"st-card-sub\">" + subText + "</span>" +
        "</div>" +
        "<div class=\"st-card-actions\">" +
          "<button type=\"button\" class=\"" + useCls + "\" data-id=\"" + item.id + "\" data-type=\"" + type + "\">" + useLabel + "</button>" +
          "<button type=\"button\" class=\"st-del-btn\" data-del-id=\"" + item.id + "\" data-del-type=\"" + type + "\">✕</button>" +
        "</div>";
      grid.appendChild(card);
    });
    grid.querySelectorAll("[data-id]").forEach(btn => {
      btn.addEventListener("click", () => useItem(Number(btn.dataset.id), btn.dataset.type));
    });
    grid.querySelectorAll("[data-del-id]").forEach(btn => {
      btn.addEventListener("click", () => deleteItem(Number(btn.dataset.delId), btn.dataset.delType));
    });
  }
  function render() {
    const safe = Math.max(0, current);
    const pct = safe / MAX;
    qs("#st-count").textContent = safe;
    qs("#st-spoon-max-label").textContent = "/ " + MAX;
    qs("#st-slider-val").textContent = MAX;
    qs("#st-bar").style.width = (pct * 100) + "%";
    qs("#st-bar").style.backgroundColor = barColor(current);
    qs("#st-reflect-text").textContent = getReflection(current);
    renderIcons();
    renderLog();
    renderGrid("drain");
    renderGrid("restore");
    renderBottomStatus();
    updateHeight();
  }
  function addItem(type) {
    const nameEl = qs(type === "drain" ? "#st-drain-name" : "#st-restore-name");
    const valEl = qs(type === "drain" ? "#st-drain-cost" : "#st-restore-gain");
    const name = nameEl.value.trim().replace(/\s+/g, " ");
    const value = Math.max(1, Math.min(20, parseInt(valEl.value, 10) || 1));
    if (!name) {
      nameEl.focus();
      showToast("Please enter a name first.");
      return;
    }
    const item = { id: nextId++, name, value };
    if (type === "drain") drainItems.push(item);
    else restoreItems.push(item);
    nameEl.value = "";
    valEl.value = type === "drain" ? 2 : 1;
    saveData();
    render();
    showToast("Item added.");
  }
  function useItem(id, type) {
    const items = type === "drain" ? drainItems : restoreItems;
    const item = items.find(i => i.id === id);
    if (!item) return;
    if (type === "drain") {
      if (current < item.value) {
        showToast("Not enough spoons right now.");
        return;
      }
      current -= item.value;
      eventLog.push({ name: item.name, value: item.value, type: "drain" });
    } else {
      const before = current;
      current = Math.min(MAX, current + item.value);
      const actual = current - before;
      eventLog.push({ name: item.name, value: actual, type: "restore" });
    }
    render();
  }
  function removeLogEntry(index) {
    const entry = eventLog[index];
    if (!entry) return;
    if (entry.type === "drain") current += entry.value;
    else current -= entry.value;
    eventLog.splice(index, 1);
    render();
    showToast("Log entry removed.");
  }
  function deleteItem(id, type) {
    const arr = type === "drain" ? drainItems : restoreItems;
    const idx = arr.findIndex(i => i.id === id);
    if (idx !== -1) arr.splice(idx, 1);
    saveData();
    render();
  }
  function onSliderChange(val) {
    const n = parseInt(val, 10);
    MAX = n;
    current = n;
    eventLog.length = 0;
    saveData();
    render();
  }
  function resetDay() {
    current = MAX;
    eventLog.length = 0;
    render();
    showToast("New day started.");
  }
  loadData();
  qs("#st-max-slider").addEventListener("input", (e) => onSliderChange(e.target.value));
  qs("#st-add-drain").addEventListener("click", () => addItem("drain"));
  qs("#st-add-restore").addEventListener("click", () => addItem("restore"));
  qs("#st-reset-btn").addEventListener("click", resetDay);
  qs("#st-clear-btn").addEventListener("click", clearSavedData);
  qs("#st-drain-name").addEventListener("keydown", (e) => {
    if (e.key === "Enter") addItem("drain");
  });
  qs("#st-restore-name").addEventListener("keydown", (e) => {
    if (e.key === "Enter") addItem("restore");
  });
  render();
})();
</script>
</body>
</html>'
>
  