Cookbook — Nutrition facts panel

: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-sm: 0 1px 2px rgba(43, 38, 34, 0.1);
  --sh-lg: 0 10px 30px rgba(43, 38, 34, 0.1);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(232, 163, 61, 0.1), transparent 60%),
    var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px;
}

/* ---------- Header ---------- */
.page-head {
  margin-bottom: clamp(24px, 4vw, 44px);
}

.kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tomato-d);
}

.page-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lede {
  max-width: 56ch;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 1.02rem;
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* ---------- Hero photo ---------- */
.hero-photo {
  position: sticky;
  top: 24px;
}

.photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, #f6c98a, transparent 55%),
    radial-gradient(140% 120% at 90% 100%, #b8351e, transparent 60%),
    linear-gradient(150deg, var(--clay), var(--tomato) 55%, #8e2c1a);
  box-shadow: var(--sh-lg);
  border: 6px solid var(--paper);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.blob-a {
  width: 46%;
  height: 46%;
  left: 8%;
  top: 14%;
  background: radial-gradient(circle at 35% 30%, #ffd98a, transparent 70%);
}

.blob-b {
  width: 38%;
  height: 38%;
  right: 6%;
  top: 38%;
  background: radial-gradient(circle at 40% 35%, #ff9b6b, transparent 72%);
}

.blob-c {
  width: 50%;
  height: 36%;
  left: 24%;
  bottom: 8%;
  background: radial-gradient(circle at 50% 40%, rgba(124, 138, 107, 0.95), transparent 72%);
}

.garnish {
  position: absolute;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28));
  user-select: none;
}

.g1 { top: 12%; right: 14%; transform: rotate(-12deg); }
.g2 { bottom: 16%; left: 12%; transform: rotate(10deg); }
.g3 { top: 46%; left: 16%; transform: rotate(-6deg); }
.g4 { bottom: 22%; right: 18%; transform: rotate(8deg); }

.photo-cap {
  margin: 12px 2px 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Nutrition label ---------- */
.label {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--sh-lg);
}

.label-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.label-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  letter-spacing: -0.01em;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
  justify-content: space-between;
}

.serv-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--cream);
}

.stepper button {
  border: 0;
  background: transparent;
  width: 38px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.stepper button:hover {
  background: var(--tomato);
  color: #fff;
}

.stepper button:active {
  background: var(--tomato-d);
}

.stepper input {
  width: 58px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.basis-toggle {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  background: var(--cream);
}

.basis-btn {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.basis-btn:hover {
  color: var(--ink);
}

.basis-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--sh-sm);
}

.serv-line {
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Rules ---------- */
.rule {
  background: var(--ink);
  border-radius: 2px;
}

.rule-thick {
  height: 9px;
  margin: 16px 0 14px;
}

.rule-med {
  height: 4px;
  margin: 18px 0 16px;
}

/* ---------- Calories ---------- */
.calories {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.cal-label {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
}

.cal-value {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tomato-d);
  margin-left: auto;
}

.cal-unit {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  width: 100%;
  text-align: right;
}

/* ---------- Macros ---------- */
.macros-h {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.macro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.macro-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}

.dot-carbs { background: var(--saffron); }
.dot-protein { background: var(--sage); }
.dot-fat { background: var(--clay); }

.macro-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.macro-grams {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.macro-pct {
  min-width: 48px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bar {
  height: 12px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fill-carbs { background: linear-gradient(90deg, var(--saffron), #f0b85a); }
.fill-protein { background: linear-gradient(90deg, var(--sage), #93a07f); }
.fill-fat { background: linear-gradient(90deg, var(--clay), #d68d72); }

/* ---------- Table ---------- */
.nf-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.nf-table thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 8px;
  border-bottom: 2px solid var(--ink);
}

.nf-table .t-amt,
.nf-table .t-dv {
  text-align: right;
}

.nf-table tbody td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.nf-table tbody tr:last-child td {
  border-bottom: 0;
}

.nf-table .row-name {
  font-weight: 600;
  color: var(--ink);
}

.nf-table tr.is-sub .row-name {
  padding-left: 18px;
  font-weight: 500;
  color: var(--ink-2);
}

.nf-table .cell-amt {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.nf-table .cell-dv {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.dv-pill {
  display: inline-block;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: rgba(124, 138, 107, 0.16);
  color: #4d5a3e;
}

.dv-pill.is-high {
  background: rgba(214, 69, 43, 0.14);
  color: var(--tomato-d);
}

.dv-pill.is-low {
  background: rgba(43, 38, 34, 0.06);
  color: var(--ink-2);
}

.dv-note {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.page-foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 50;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .hero-photo {
    position: static;
  }
  .photo-frame {
    aspect-ratio: 16 / 11;
  }
  .controls {
    flex-direction: column;
    align-items: stretch;
  }
  .basis-toggle {
    justify-content: center;
  }
}

@media print {
  body {
    background: #fff;
  }
  .hero-photo,
  .controls,
  .page-foot,
  .toast {
    display: none !important;
  }
  .label {
    box-shadow: none;
    border: 1.5px solid #000;
  }
  .layout {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bar-fill,
  .toast {
    transition: none;
  }
}

(function () {
  "use strict";

  /* ---------------------------------------------------------------
   * Base recipe nutrition data.
   * All amounts are TOTALS for the whole pot at the BASE serving count.
   * The panel derives per-serving / per-100g values from these.
   * ------------------------------------------------------------- */
  var BASE_SERVINGS = 4;
  var TOTAL_WEIGHT_G = 1280; // whole pot, grams

  // Macros in grams (totals for whole pot) + energy per gram.
  var MACRO_KCAL = { carbs: 4, protein: 4, fat: 9 };
  var MACROS = {
    carbs: { name: "Carbohydrate", grams: 188 },
    protein: { name: "Protein", grams: 64 },
    fat: { name: "Fat", grams: 56 },
  };

  // Detailed nutrients: totals for whole pot. unit + Daily Value reference.
  // dv = recommended daily amount in the same unit (0 = no %DV shown).
  var NUTRIENTS = [
    { key: "fat", name: "Total Fat", grams: 56, unit: "g", dv: 78 },
    { key: "satfat", name: "Saturated Fat", grams: 11.2, unit: "g", dv: 20, sub: true },
    { key: "transfat", name: "Trans Fat", grams: 0, unit: "g", dv: 0, sub: true },
    { key: "chol", name: "Cholesterol", grams: 0.024, unit: "mg", dv: 300, scale: 1000 },
    { key: "sodium", name: "Sodium", grams: 2.28, unit: "mg", dv: 2300, scale: 1000 },
    { key: "carbs", name: "Total Carbohydrate", grams: 188, unit: "g", dv: 275 },
    { key: "fiber", name: "Dietary Fiber", grams: 44, unit: "g", dv: 28, sub: true },
    { key: "sugar", name: "Total Sugars", grams: 24, unit: "g", dv: 0, sub: true },
    { key: "addsugar", name: "Added Sugars", grams: 6, unit: "g", dv: 50, sub: true },
    { key: "protein", name: "Protein", grams: 64, unit: "g", dv: 50 },
    { key: "vitd", name: "Vitamin D", grams: 0.0000024, unit: "mcg", dv: 20, scale: 1000000 },
    { key: "calcium", name: "Calcium", grams: 0.62, unit: "mg", dv: 1300, scale: 1000 },
    { key: "iron", name: "Iron", grams: 0.0148, unit: "mg", dv: 18, scale: 1000 },
    { key: "potassium", name: "Potassium", grams: 3.52, unit: "mg", dv: 4700, scale: 1000 },
  ];

  /* ---------------- State ---------------- */
  var state = {
    servings: BASE_SERVINGS,
    basis: "serving", // "serving" | "100g"
  };

  /* ---------------- Helpers ---------------- */
  function totalKcal() {
    return (
      MACROS.carbs.grams * MACRO_KCAL.carbs +
      MACROS.protein.grams * MACRO_KCAL.protein +
      MACROS.fat.grams * MACRO_KCAL.fat
    );
  }

  // Fraction of the whole pot represented by ONE display unit.
  function portionFraction() {
    if (state.basis === "100g") {
      return 100 / TOTAL_WEIGHT_G;
    }
    return 1 / state.servings;
  }

  function fmt(n) {
    if (n === 0) return "0";
    var abs = Math.abs(n);
    if (abs >= 100) return Math.round(n).toString();
    if (abs >= 10) return (Math.round(n * 10) / 10).toString();
    if (abs >= 1) return (Math.round(n * 10) / 10).toString();
    return (Math.round(n * 100) / 100).toString();
  }

  function toast(msg) {
    var el = document.getElementById("toast");
    if (!el) return;
    el.textContent = msg;
    el.classList.add("show");
    clearTimeout(toast._t);
    toast._t = setTimeout(function () {
      el.classList.remove("show");
    }, 2000);
  }

  /* ---------------- Render ---------------- */
  function render() {
    var frac = portionFraction();

    // Servings readout + portion weight
    var servReadout = document.getElementById("serv-readout");
    var weightReadout = document.getElementById("weight-readout");
    servReadout.textContent =
      state.servings + (state.servings === 1 ? " serving" : " servings");
    var perServingG = Math.round(TOTAL_WEIGHT_G / state.servings);
    weightReadout.textContent = "≈ " + perServingG + " g per serving";

    // Calories
    var cal = Math.round(totalKcal() * frac);
    document.getElementById("cal-value").textContent = cal.toLocaleString();
    document.getElementById("cal-unit").textContent =
      state.basis === "100g" ? "per 100 g" : "per serving";

    // Macro bars — share of energy (independent of basis)
    var energy = {
      carbs: MACROS.carbs.grams * MACRO_KCAL.carbs,
      protein: MACROS.protein.grams * MACRO_KCAL.protein,
      fat: MACROS.fat.grams * MACRO_KCAL.fat,
    };
    var energyTotal = energy.carbs + energy.protein + energy.fat;

    document.querySelectorAll(".macro").forEach(function (li) {
      var key = li.getAttribute("data-macro");
      var grams = MACROS[key].grams * frac;
      var pct = Math.round((energy[key] / energyTotal) * 100);
      li.querySelector("[data-grams]").textContent = fmt(grams) + " g";
      li.querySelector("[data-pct]").textContent = pct + "%";
      li.querySelector("[data-fill]").style.width = pct + "%";
      var bar = li.querySelector(".bar");
      bar.setAttribute(
        "aria-label",
        MACROS[key].name + ": " + pct + " percent of energy, " + fmt(grams) + " grams"
      );
    });

    // Detailed table
    var tbody = document.getElementById("nf-rows");
    tbody.innerHTML = "";
    NUTRIENTS.forEach(function (n) {
      var displayGrams = n.grams * frac; // grams of the base nutrient store
      var scale = n.scale || 1;
      var amount = displayGrams * scale; // converted to display unit (mg/mcg)

      var tr = document.createElement("tr");
      if (n.sub) tr.className = "is-sub";

      var nameTd = document.createElement("td");
      nameTd.className = "row-name";
      nameTd.textContent = n.name;

      var amtTd = document.createElement("td");
      amtTd.className = "cell-amt";
      amtTd.textContent = fmt(amount) + " " + n.unit;

      var dvTd = document.createElement("td");
      dvTd.className = "cell-dv";
      if (n.dv > 0) {
        // %DV uses the same display unit; dv stored in display unit already.
        var dvPct = Math.round((amount / n.dv) * 100);
        var pill = document.createElement("span");
        pill.className = "dv-pill";
        if (dvPct >= 20) pill.classList.add("is-high");
        else if (dvPct < 5) pill.classList.add("is-low");
        pill.textContent = dvPct + "%";
        dvTd.appendChild(pill);
      } else {
        dvTd.textContent = "—";
      }

      tr.appendChild(nameTd);
      tr.appendChild(amtTd);
      tr.appendChild(dvTd);
      tbody.appendChild(tr);
    });
  }

  /* ---------------- Events ---------------- */
  var servInput = document.getElementById("servings");

  function setServings(v) {
    v = Math.max(1, Math.min(24, Math.round(v) || 1));
    state.servings = v;
    servInput.value = v;
    render();
  }

  servInput.addEventListener("input", function () {
    var v = parseInt(servInput.value, 10);
    if (!isNaN(v)) {
      state.servings = Math.max(1, Math.min(24, v));
      render();
    }
  });

  servInput.addEventListener("blur", function () {
    setServings(parseInt(servInput.value, 10));
  });

  document.getElementById("serv-minus").addEventListener("click", function () {
    setServings(state.servings - 1);
    toast("Scaled to " + state.servings + " servings");
  });

  document.getElementById("serv-plus").addEventListener("click", function () {
    setServings(state.servings + 1);
    toast("Scaled to " + state.servings + " servings");
  });

  document.querySelectorAll(".basis-btn").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var basis = btn.getAttribute("data-basis");
      if (basis === state.basis) return;
      state.basis = basis;
      document.querySelectorAll(".basis-btn").forEach(function (b) {
        var on = b === btn;
        b.classList.toggle("is-active", on);
        b.setAttribute("aria-pressed", on ? "true" : "false");
      });
      render();
      toast(basis === "100g" ? "Showing per 100 g" : "Showing per serving");
    });
  });

  /* ---------------- Init ---------------- */
  render();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cookbook — Nutrition Facts Panel</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>
  <div class="page">
    <header class="page-head" role="banner">
      <p class="kicker">The Cookbook · Nutrition</p>
      <h1>Sun-Dried Tomato &amp; White Bean Stew</h1>
      <p class="lede">
        A hearty one-pot supper finished with charred lemon and a fistful of
        fresh herbs. Below: a clean, label-style nutrition panel you can scale
        to your table.
      </p>
    </header>

    <main class="layout" role="main">
      <!-- Decorative "food photo" -->
      <section class="hero-photo" aria-hidden="true">
        <div class="photo-frame">
          <div class="blob blob-a"></div>
          <div class="blob blob-b"></div>
          <div class="blob blob-c"></div>
          <div class="garnish g1">🍅</div>
          <div class="garnish g2">🌿</div>
          <div class="garnish g3">🍋</div>
          <div class="garnish g4">🧄</div>
        </div>
        <p class="photo-cap">Serves 4 · Ready in 45 min · One pot</p>
      </section>

      <!-- Nutrition Facts label -->
      <section class="label" aria-labelledby="nf-title">
        <div class="label-top">
          <h2 id="nf-title" class="label-title">Nutrition Facts</h2>

          <div class="controls">
            <div class="serv-field">
              <label for="servings">Servings</label>
              <div class="stepper">
                <button type="button" id="serv-minus" aria-label="Decrease servings">−</button>
                <input
                  type="number"
                  id="servings"
                  inputmode="numeric"
                  min="1"
                  max="24"
                  step="1"
                  value="4"
                  aria-describedby="serv-hint"
                />
                <button type="button" id="serv-plus" aria-label="Increase servings">+</button>
              </div>
            </div>

            <div class="basis-toggle" role="group" aria-label="Show values per">
              <button type="button" class="basis-btn is-active" data-basis="serving" aria-pressed="true">
                Per serving
              </button>
              <button type="button" class="basis-btn" data-basis="100g" aria-pressed="false">
                Per 100 g
              </button>
            </div>
          </div>
        </div>

        <p id="serv-hint" class="serv-line">
          <span id="serv-readout">4 servings</span> ·
          <span id="weight-readout">≈ 320 g per serving</span>
        </p>

        <div class="rule rule-thick"></div>

        <!-- Big calories -->
        <div class="calories" aria-live="polite">
          <span class="cal-label">Calories</span>
          <span class="cal-value" id="cal-value">412</span>
          <span class="cal-unit" id="cal-unit">per serving</span>
        </div>

        <div class="rule rule-med"></div>

        <!-- Macro bars -->
        <div class="macros" aria-live="polite">
          <h3 class="macros-h">Macronutrient split</h3>
          <ul class="macro-list">
            <li class="macro" data-macro="carbs">
              <div class="macro-head">
                <span class="dot dot-carbs"></span>
                <span class="macro-name">Carbohydrate</span>
                <span class="macro-grams" data-grams>—</span>
                <span class="macro-pct" data-pct>—</span>
              </div>
              <div class="bar" role="img" aria-label="Carbohydrate share of energy">
                <span class="bar-fill fill-carbs" data-fill></span>
              </div>
            </li>
            <li class="macro" data-macro="protein">
              <div class="macro-head">
                <span class="dot dot-protein"></span>
                <span class="macro-name">Protein</span>
                <span class="macro-grams" data-grams>—</span>
                <span class="macro-pct" data-pct>—</span>
              </div>
              <div class="bar" role="img" aria-label="Protein share of energy">
                <span class="bar-fill fill-protein" data-fill></span>
              </div>
            </li>
            <li class="macro" data-macro="fat">
              <div class="macro-head">
                <span class="dot dot-fat"></span>
                <span class="macro-name">Fat</span>
                <span class="macro-grams" data-grams>—</span>
                <span class="macro-pct" data-pct>—</span>
              </div>
              <div class="bar" role="img" aria-label="Fat share of energy">
                <span class="bar-fill fill-fat" data-fill></span>
              </div>
            </li>
          </ul>
        </div>

        <div class="rule rule-med"></div>

        <!-- Breakdown table -->
        <table class="nf-table" aria-describedby="dv-note">
          <caption class="sr-only">Detailed nutrient breakdown with percent Daily Value</caption>
          <thead>
            <tr>
              <th scope="col" class="t-name">Nutrient</th>
              <th scope="col" class="t-amt">Amount</th>
              <th scope="col" class="t-dv">% DV</th>
            </tr>
          </thead>
          <tbody id="nf-rows">
            <!-- rows injected by script.js -->
          </tbody>
        </table>

        <p id="dv-note" class="dv-note">
          * Percent Daily Values are based on a 2,000 calorie diet.
        </p>
      </section>
    </main>

    <footer class="page-foot" role="contentinfo">
      <p>Illustrative cookbook UI · fictional recipe &amp; nutrition data.</p>
    </footer>
  </div>

  <div id="toast" class="toast" role="status" aria-live="polite"></div>

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