Cookbook — Cook Mode (full-screen step-by-step + timers)

:root {
  --cream: #faf6ef;
  --paper: #fffdf8;
  --ink: #2b2622;
  --ink-2: #5c534a;
  --muted: #8a7f73;
  --tomato: #d6452b;
  --tomato-d: #b8351e;
  --saffron: #e8a33d;
  --sage: #7c8a6b;
  --clay: #c8775a;
  --line: rgba(43, 38, 34, 0.12);
  --line-2: rgba(43, 38, 34, 0.2);
  --ok: #3f8f5f;
  --warn: #d98a2b;
  --danger: #c8412b;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(43, 38, 34, 0.1);
  --sh-2: 0 10px 30px rgba(43, 38, 34, 0.1);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--r-sm);
}
.skip:focus { left: 8px; }

:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tomato);
}
.dish {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wakelock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(63, 143, 95, 0.15);
  animation: pulse 2.4s ease-in-out infinite;
}
.wakelock.is-off .dot { background: var(--muted); box-shadow: none; animation: none; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  padding: 9px 16px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: #fff; box-shadow: var(--sh-1); }
.btn:active { transform: translateY(1px); }
.btn--solid {
  background: var(--tomato);
  border-color: var(--tomato);
  color: #fff;
}
.btn--solid:hover { background: var(--tomato-d); border-color: var(--tomato-d); }
.btn--ghost { background: transparent; }
.btn--big {
  font-size: 16px;
  padding: 16px 26px;
  min-height: 56px;
  min-width: 120px;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.iconbtn {
  border: none;
  background: transparent;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
}
.iconbtn:hover { background: var(--cream); }

/* ---------- Progress ---------- */
.progress {
  height: 5px;
  background: rgba(214, 69, 43, 0.12);
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--saffron), var(--tomato));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Stage ---------- */
.stage {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 8px;
  display: flex;
  flex-direction: column;
}
.stage__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.stage__time {
  color: var(--clay);
  font-variant-numeric: tabular-nums;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
  animation: rise 0.35s ease;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.card__photo {
  height: 190px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(90% 80% at 85% 25%, var(--saffron), transparent 60%),
    radial-gradient(120% 120% at 75% 95%, var(--tomato), transparent 65%),
    radial-gradient(100% 100% at 25% 90%, var(--clay), transparent 70%),
    linear-gradient(135deg, #f3c98a, var(--tomato-d));
  position: relative;
}
.card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -40px 60px rgba(43, 38, 34, 0.18);
}
.card__emoji {
  font-size: 76px;
  filter: drop-shadow(0 6px 10px rgba(43, 38, 34, 0.3));
  z-index: 1;
}
.card__body { padding: 26px 28px 30px; }
.card__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.card__text {
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.65;
}

/* ---------- Inline timer ---------- */
.timerwrap {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
}
.timer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.timer__btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  padding: 14px 22px;
  min-height: 52px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, transform 0.12s ease;
}
.timer__btn:hover { background: #6c7a5b; }
.timer__btn:active { transform: translateY(1px); }
.timer.is-running .timer__btn { background: var(--clay); }
.timer.is-done .timer__btn { background: var(--tomato); }
.timer__dur { opacity: 0.85; font-weight: 600; }
.timer__clock {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.timer.is-running .timer__clock { color: var(--clay); }
.timer.is-done .timer__clock { color: var(--tomato); animation: flash 0.8s ease infinite; }
@keyframes flash { 50% { opacity: 0.35; } }
.timer__reset {
  border: 1px solid var(--line-2);
  background: transparent;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-2);
}
.timer__reset:hover { background: var(--cream); }
.timer__label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
}

/* ---------- Controls ---------- */
.controls {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
  background: linear-gradient(to top, var(--cream) 70%, transparent);
}
.dots {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}
.dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.dots button:hover { transform: scale(1.25); }
.dots button[aria-current="true"] {
  background: var(--tomato);
  border-color: var(--tomato);
}
.dots button.is-done { background: var(--sage); border-color: var(--sage); }

.hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 auto 18px;
  padding: 0 24px;
}
kbd {
  font-family: var(--sans);
  font-size: 11px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- Drawer ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(43, 38, 34, 0.4);
  z-index: 30;
  animation: fade 0.2s ease;
}
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(43, 38, 34, 0.18);
  z-index: 40;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 22px;
}
.drawer.is-open { transform: translateX(0); }
.drawer[aria-hidden="true"] { visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
}
.drawer__serves {
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.ing {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}
.ing li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
}
.ing li:hover { background: var(--cream); }
.ing .qty {
  font-weight: 700;
  color: var(--tomato);
  min-width: 78px;
  font-variant-numeric: tabular-nums;
}
.ing li.is-checked {
  color: var(--muted);
  text-decoration: line-through;
}
.ing li.is-checked .qty { color: var(--muted); }
.drawer__foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--sh-2);
  animation: toastIn 0.25s ease;
}
.toast--done { background: var(--tomato); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 720px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .topbar__right { width: 100%; justify-content: space-between; }
  .controls { flex-wrap: wrap; }
  .dots { order: 3; width: 100%; }
  .btn--big { flex: 1; min-width: 0; }
  .card__photo { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

(function () {
  "use strict";

  // ---------- Recipe data (fictional) ----------
  var STEPS = [
    {
      emoji: "🍅",
      title: "Char the tomatoes",
      text: "Halve 6 ripe Roma tomatoes, toss with olive oil and flaky salt, and blister cut-side down in a dry cast-iron pan over high heat until deeply browned.",
      hint: "~6 min",
      timer: { seconds: 360, label: "Blister tomatoes — flip at 4:00" }
    },
    {
      emoji: "🧄",
      title: "Bloom the saffron",
      text: "Crush a generous pinch of saffron threads and steep in 2 tbsp warm stock. Soften 3 sliced garlic cloves in the tomato fat until just golden and fragrant.",
      hint: "~3 min",
      timer: { seconds: 180, label: "Steep saffron & soften garlic" }
    },
    {
      emoji: "🍚",
      title: "Toast the orzo",
      text: "Add 300 g orzo to the pan and stir constantly until the edges turn nutty and amber. This builds a toasty backbone before any liquid goes in.",
      hint: "~2 min",
      timer: { seconds: 120, label: "Toast orzo to amber" }
    },
    {
      emoji: "🍋",
      title: "Simmer to creamy",
      text: "Pour in the saffron stock plus 700 ml hot vegetable broth, a ladle at a time. Stir often, scraping the charred tomato into the grains, until plump and creamy.",
      hint: "~12 min",
      timer: { seconds: 720, label: "Simmer until al dente" }
    },
    {
      emoji: "🌿",
      title: "Finish & fold",
      text: "Off the heat, fold in cold butter, lemon zest, torn basil and a fistful of grated pecorino. Loosen with a splash of broth so it ribbons off the spoon.",
      hint: "~2 min",
      timer: null
    },
    {
      emoji: "🥄",
      title: "Plate & rest",
      text: "Spoon into warm shallow bowls, top with the charred tomato halves and a crack of pepper. Rest one minute so the flavours settle, then serve.",
      hint: "~1 min",
      timer: { seconds: 60, label: "Rest before serving" }
    }
  ];

  var INGREDIENTS = [
    { qty: "6", name: "Roma tomatoes, halved" },
    { qty: "1 pinch", name: "Saffron threads" },
    { qty: "300 g", name: "Orzo pasta" },
    { qty: "3 cloves", name: "Garlic, sliced" },
    { qty: "700 ml", name: "Hot vegetable broth" },
    { qty: "30 g", name: "Cold butter" },
    { qty: "1", name: "Lemon, zested" },
    { qty: "1 handful", name: "Fresh basil" },
    { qty: "40 g", name: "Pecorino, grated" },
    { qty: "to taste", name: "Olive oil, salt, pepper" }
  ];

  // ---------- State ----------
  var current = 0;
  var seen = STEPS.map(function () { return false; });
  // independent timer state per step
  var timers = STEPS.map(function (s) {
    return s.timer
      ? { remaining: s.timer.seconds, total: s.timer.seconds, running: false, done: false, intervalId: null }
      : null;
  });

  // ---------- Elements ----------
  var $ = function (id) { return document.getElementById(id); };
  var stepNow = $("stepNow"), stepTotal = $("stepTotal"), stepTimeHint = $("stepTimeHint");
  var stepTitle = $("stepTitle"), stepText = $("stepText"), stepEmoji = $("stepEmoji");
  var progressBar = $("progressBar"), live = $("live"), dotsEl = $("dots");
  var prevBtn = $("prevBtn"), nextBtn = $("nextBtn");
  var timerWrap = $("timerWrap"), timerBox = $("timerBox"), timerToggle = $("timerToggle");
  var timerToggleLabel = $("timerToggleLabel"), timerDuration = $("timerDuration");
  var timerClock = $("timerClock"), timerReset = $("timerReset"), timerLabel = $("timerLabel");

  stepTotal.textContent = STEPS.length;

  // ---------- Toast ----------
  function toast(msg, kind) {
    var box = $("toasts");
    var el = document.createElement("div");
    el.className = "toast" + (kind === "done" ? " toast--done" : "");
    el.textContent = msg;
    box.appendChild(el);
    setTimeout(function () {
      el.style.transition = "opacity .3s ease";
      el.style.opacity = "0";
      setTimeout(function () { el.remove(); }, 300);
    }, 2800);
  }

  function announce(msg) { live.textContent = ""; setTimeout(function () { live.textContent = msg; }, 30); }

  function fmt(sec) {
    var m = Math.floor(sec / 60), s = sec % 60;
    return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
  }

  // ---------- Beep ----------
  function beep() {
    try {
      var Ctx = window.AudioContext || window.webkitAudioContext;
      if (!Ctx) return;
      var ctx = new Ctx();
      [0, 0.22, 0.44].forEach(function (offset) {
        var osc = ctx.createOscillator(), gain = ctx.createGain();
        osc.type = "sine";
        osc.frequency.value = 880;
        osc.connect(gain); gain.connect(ctx.destination);
        var t = ctx.currentTime + offset;
        gain.gain.setValueAtTime(0.0001, t);
        gain.gain.exponentialRampToValueAtTime(0.25, t + 0.02);
        gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.18);
        osc.start(t); osc.stop(t + 0.2);
      });
      setTimeout(function () { ctx.close(); }, 900);
    } catch (e) { /* no audio */ }
  }

  // ---------- Dots ----------
  STEPS.forEach(function (_, i) {
    var li = document.createElement("li");
    var b = document.createElement("button");
    b.type = "button";
    b.setAttribute("aria-label", "Go to step " + (i + 1));
    b.addEventListener("click", function () { go(i); });
    li.appendChild(b);
    dotsEl.appendChild(li);
  });
  var dotBtns = dotsEl.querySelectorAll("button");

  // ---------- Ingredients ----------
  var ingList = $("ingList");
  INGREDIENTS.forEach(function (ing) {
    var li = document.createElement("li");
    li.innerHTML = '<span class="qty"></span><span class="nm"></span>';
    li.querySelector(".qty").textContent = ing.qty;
    li.querySelector(".nm").textContent = ing.name;
    li.setAttribute("role", "button");
    li.tabIndex = 0;
    function toggle() { li.classList.toggle("is-checked"); }
    li.addEventListener("click", toggle);
    li.addEventListener("keydown", function (e) {
      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
    });
    ingList.appendChild(li);
  });

  // ---------- Timer rendering for current step ----------
  function paintTimer() {
    var t = timers[current];
    var def = STEPS[current].timer;
    if (!def) { timerWrap.hidden = true; return; }
    timerWrap.hidden = false;
    timerLabel.textContent = def.label;
    timerDuration.textContent = "· " + fmt(def.total);
    timerClock.textContent = fmt(t.remaining);
    timerBox.classList.toggle("is-running", t.running);
    timerBox.classList.toggle("is-done", t.done);
    timerReset.hidden = !(t.running || t.done || t.remaining !== t.total);
    timerToggleLabel.textContent = t.done ? "Done ✓" : (t.running ? "Pause" : (t.remaining === t.total ? "Start" : "Resume"));
  }

  function tick(idx) {
    var t = timers[idx];
    t.remaining -= 1;
    if (t.remaining <= 0) {
      t.remaining = 0;
      stopInterval(idx);
      t.running = false;
      t.done = true;
      beep();
      var msg = "⏲ Timer done — " + STEPS[idx].timer.label;
      toast(msg, "done");
      announce(msg);
    }
    if (idx === current) paintTimer();
  }

  function stopInterval(idx) {
    if (timers[idx].intervalId) { clearInterval(timers[idx].intervalId); timers[idx].intervalId = null; }
  }

  function startTimer(idx) {
    var t = timers[idx];
    if (t.done) return;
    t.running = true;
    stopInterval(idx);
    t.intervalId = setInterval(function () { tick(idx); }, 1000);
    if (idx === current) paintTimer();
    announce("Timer started: " + fmt(t.remaining) + " remaining");
  }

  function pauseTimer(idx) {
    var t = timers[idx];
    t.running = false;
    stopInterval(idx);
    if (idx === current) paintTimer();
    announce("Timer paused at " + fmt(t.remaining));
  }

  function resetTimer(idx) {
    var t = timers[idx];
    stopInterval(idx);
    t.remaining = t.total;
    t.running = false;
    t.done = false;
    if (idx === current) paintTimer();
  }

  timerToggle.addEventListener("click", function () {
    var t = timers[current];
    if (!t || t.done) return;
    if (t.running) pauseTimer(current); else startTimer(current);
  });
  timerReset.addEventListener("click", function () { resetTimer(current); });

  // ---------- Navigation ----------
  function render() {
    var s = STEPS[current];
    stepNow.textContent = current + 1;
    stepEmoji.textContent = s.emoji;
    stepTitle.textContent = s.title;
    stepText.textContent = s.text;
    stepTimeHint.textContent = s.hint;
    progressBar.style.width = (((current + 1) / STEPS.length) * 100) + "%";

    prevBtn.disabled = current === 0;
    nextBtn.textContent = "";
    if (current === STEPS.length - 1) {
      nextBtn.innerHTML = "Finish <span aria-hidden=\"true\">🎉</span>";
    } else {
      nextBtn.innerHTML = "Next <span aria-hidden=\"true\">→</span>";
    }

    dotBtns.forEach(function (b, i) {
      b.setAttribute("aria-current", i === current ? "true" : "false");
      b.classList.toggle("is-done", seen[i] && i !== current);
    });

    paintTimer();
  }

  function go(i) {
    if (i < 0 || i >= STEPS.length) return;
    seen[current] = true;
    current = i;
    seen[current] = true;
    render();
    announce("Step " + (current + 1) + " of " + STEPS.length + ": " + STEPS[current].title);
  }

  prevBtn.addEventListener("click", function () { go(current - 1); });
  nextBtn.addEventListener("click", function () {
    if (current === STEPS.length - 1) {
      toast("🎉 Recipe complete — buon appetito!", "done");
      announce("Recipe complete.");
    } else {
      go(current + 1);
    }
  });

  // ---------- Keyboard ----------
  document.addEventListener("keydown", function (e) {
    if ($("drawer").classList.contains("is-open")) return;
    var tag = (e.target.tagName || "").toLowerCase();
    if (e.key === "ArrowRight") { e.preventDefault(); go(current + 1); }
    else if (e.key === "ArrowLeft") { e.preventDefault(); go(current - 1); }
    else if (e.key === " " && tag !== "button" && tag !== "li") {
      var t = timers[current];
      if (t && !t.done) { e.preventDefault(); if (t.running) pauseTimer(current); else startTimer(current); }
    }
  });

  // ---------- Drawer ----------
  var drawer = $("drawer"), scrim = $("scrim"), ingredientsBtn = $("ingredientsBtn"), drawerClose = $("drawerClose");
  function openDrawer() {
    drawer.classList.add("is-open");
    drawer.setAttribute("aria-hidden", "false");
    scrim.hidden = false;
    ingredientsBtn.setAttribute("aria-expanded", "true");
    drawerClose.focus();
  }
  function closeDrawer() {
    drawer.classList.remove("is-open");
    drawer.setAttribute("aria-hidden", "true");
    scrim.hidden = true;
    ingredientsBtn.setAttribute("aria-expanded", "false");
    ingredientsBtn.focus();
  }
  ingredientsBtn.addEventListener("click", openDrawer);
  drawerClose.addEventListener("click", closeDrawer);
  scrim.addEventListener("click", closeDrawer);
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && drawer.classList.contains("is-open")) closeDrawer();
  });

  // ---------- Wake lock ----------
  var wakeText = $("wakeText"), wakeNote = $("wakeNote"), wakeLock = null;
  if ("wakeLock" in navigator) {
    navigator.wakeLock.request("screen").then(function (lock) {
      wakeLock = lock;
      wakeText.textContent = "Screen stays on";
      document.addEventListener("visibilitychange", function () {
        if (wakeLock !== null && document.visibilityState === "visible") {
          navigator.wakeLock.request("screen").then(function (l) { wakeLock = l; }).catch(function () {});
        }
      });
    }).catch(function () {
      wakeNote.classList.add("is-off");
      wakeText.textContent = "Keep screen awake manually";
    });
  } else {
    wakeNote.classList.add("is-off");
    wakeText.textContent = "Keep your screen awake";
  }

  // ---------- Init ----------
  seen[0] = true;
  render();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cook Mode — Charred Tomato &amp; Saffron Orzo</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip" href="#step-region">Skip to current step</a>

  <header class="topbar" role="banner">
    <div class="topbar__left">
      <span class="kicker">Cook Mode</span>
      <h1 class="dish">Charred Tomato &amp; Saffron Orzo</h1>
    </div>
    <div class="topbar__right">
      <p class="wakelock" id="wakeNote" aria-live="polite">
        <span class="dot" aria-hidden="true"></span>
        <span id="wakeText">Screen stays on</span>
      </p>
      <button class="btn btn--ghost" id="ingredientsBtn" aria-haspopup="dialog" aria-controls="drawer" aria-expanded="false">
        <span aria-hidden="true">🧺</span> Ingredients
      </button>
    </div>
  </header>

  <div class="progress" role="presentation">
    <div class="progress__bar" id="progressBar" style="width:0%"></div>
  </div>

  <main class="stage" id="step-region" role="main">
    <p class="stage__meta">
      <span class="stage__count">Step <span id="stepNow">1</span> of <span id="stepTotal">6</span></span>
      <span class="stage__time" id="stepTimeHint">~5 min</span>
    </p>

    <section class="card" aria-labelledby="stepTitle" id="stepCard">
      <div class="card__photo" id="stepPhoto" aria-hidden="true">
        <span class="card__emoji" id="stepEmoji">🍅</span>
      </div>
      <div class="card__body">
        <h2 class="card__title" id="stepTitle">Loading step…</h2>
        <p class="card__text" id="stepText"></p>

        <div class="timerwrap" id="timerWrap" hidden>
          <div class="timer" id="timerBox">
            <button class="timer__btn" id="timerToggle" type="button" aria-describedby="timerLabel">
              <span id="timerToggleLabel">Start</span> <span id="timerDuration" class="timer__dur"></span>
            </button>
            <span class="timer__clock" id="timerClock" aria-hidden="true">00:00</span>
            <button class="timer__reset" id="timerReset" type="button" hidden>Reset</button>
          </div>
          <span class="timer__label" id="timerLabel">Optional step timer</span>
        </div>
      </div>
    </section>

    <p class="live" id="live" aria-live="assertive"></p>
  </main>

  <nav class="controls" aria-label="Step navigation">
    <button class="btn btn--big btn--ghost" id="prevBtn" type="button">
      <span aria-hidden="true">←</span> Prev
    </button>
    <ol class="dots" id="dots" aria-label="Recipe steps"></ol>
    <button class="btn btn--big btn--solid" id="nextBtn" type="button">
      Next <span aria-hidden="true">→</span>
    </button>
  </nav>

  <p class="hint">Tip: use <kbd>←</kbd> <kbd>→</kbd> to move between steps · <kbd>Space</kbd> starts the step timer</p>

  <!-- Ingredients drawer -->
  <div class="scrim" id="scrim" hidden></div>
  <aside class="drawer" id="drawer" role="dialog" aria-modal="true" aria-labelledby="drawerTitle" aria-hidden="true">
    <div class="drawer__head">
      <h2 id="drawerTitle">Ingredients</h2>
      <button class="iconbtn" id="drawerClose" type="button" aria-label="Close ingredients">✕</button>
    </div>
    <p class="drawer__serves">Serves 4 · 6 steps · ~35 min total</p>
    <ul class="ing" id="ingList"></ul>
    <p class="drawer__foot">🌿 Tap an item to check it off your mise en place.</p>
  </aside>

  <div class="toasts" id="toasts" aria-live="polite" aria-atomic="false"></div>

  <script src="script.js"></script>
</body>
</html>