{
  "kind": "html",
  "title": "Evening medicines, 21:00",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#f4f1ff;color:#231d3d;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif}\n.wrap{max-width:520px;margin:0 auto;padding:20px 18px 28px}\n.eyebrow{font-size:13px;font-weight:600;color:#5d5580;margin:0 0 4px;letter-spacing:.02em}\nh1{font-size:24px;line-height:1.2;margin:0 0 16px;letter-spacing:-.01em}\n.box{background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 1px 2px rgba(60,40,140,.06),0 10px 24px -16px rgba(60,40,140,.35)}\n.week{margin-bottom:14px}\n.whead{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px}\n.whead b{font-weight:650}\n.whead span{color:#5d5580;font-variant-numeric:tabular-nums}\n.days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;color:#5d5580}\n.dot{width:22px;height:22px;border-radius:50%;margin:0 auto 4px;border:2px solid #c9bff5;background:transparent}\n.dot.t{background:#7c5cff;border-color:#7c5cff}\n.dot.now{border:2px dashed #7c5cff}\n.days .today{color:#5536e0;font-weight:700}\n.list{display:grid;gap:12px}\n.med{transition:box-shadow .18s}\n.top{display:flex;gap:14px;align-items:center}\n.pillbox{flex:none;width:56px;height:56px;border-radius:16px;background:#f6f3ff;display:grid;place-content:center}\n.pill{display:block}\n.cap{width:40px;height:16px;border-radius:99px;transform:rotate(-35deg);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 0 0 1px rgba(40,60,140,.18)}\n.tab{width:30px;height:30px;border-radius:50%;position:relative;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06)}\n.tab::after{content:\"\";position:absolute;left:6px;right:6px;top:14px;height:2px;border-radius:2px;background:rgba(0,0,0,.12)}\n.gel{width:34px;height:22px;border-radius:50%;position:relative;transform:rotate(-20deg)}\n.gel::after{content:\"\";position:absolute;left:6px;top:4px;width:9px;height:5px;border-radius:50%;background:rgba(255,255,255,.7)}\n.name{font-weight:650;margin:0}\n.dose{font-size:14px;color:#3f3763;margin:1px 0 0}\n.note{font-size:13px;color:#6b6390;margin:2px 0 0}\n.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}\n.btn{font:inherit;font-weight:650;min-height:48px;border-radius:14px;border:1.5px solid #e2dcfa;background:#fff;color:#3f3763;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .15s}\n.btn.taken.on{background:#dff7ec;border-color:#5fcf9f;color:#0f6b45}\n.btn.skip.on{background:#f1edff;border-color:#7c5cff;color:#4a2fd1}\n.btn:active,.chip:active,.go:active{transform:scale(.98)}\n.why{display:none;flex-wrap:wrap;gap:8px;margin-top:12px}\n.why.open{display:flex}\n.why p{width:100%;margin:0;font-size:13px;color:#6b6390}\n.chip{font:inherit;font-size:14px;min-height:48px;padding:0 14px;border-radius:99px;border:1.5px solid #e2dcfa;background:#faf9ff;color:#3f3763;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .15s}\n.chip.on{background:#7c5cff;border-color:#7c5cff;color:#fff}\n.go{display:block;width:100%;margin-top:20px;font:inherit;font-weight:700;font-size:17px;min-height:54px;border:0;border-radius:16px;background:#6a48f5;color:#fff;cursor:pointer;box-shadow:0 10px 22px -12px #6a48f5;transition:opacity .18s,transform .15s}\n.go:disabled{opacity:.45;box-shadow:none}\n.status{text-align:center;font-size:14px;color:#5d5580;min-height:20px;margin:10px 0 0}\nbutton:disabled{cursor:default}\n</style>\n<div class=\"wrap\">\n  <p class=\"eyebrow\" id=\"eyebrow\"></p>\n  <h1 id=\"title\"></h1>\n  <div class=\"box week\">\n    <div class=\"whead\"><b id=\"weekLabel\"></b><span id=\"weekCount\"></span></div>\n    <div class=\"days\" id=\"days\"></div>\n  </div>\n  <div class=\"list\" id=\"list\"></div>\n  <button class=\"go\" id=\"go\" disabled></button>\n  <p class=\"status\" id=\"status\"></p>\n</div>\n<script>\n// answer.data: {\"taken\":[ids],\"skipped\":[{\"id\",\"reason\"}],\"at\":\"HH:MM\"}; reason is null if none was picked\n// The card's content. Change only this object.\nvar CARD = {\n  eyebrow: \"Sunday 2 Nov · 21:00 reminder\",\n  title: \"Evening medicines, 21:00\",\n  weekLabel: \"This week\",\n  days: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n  history: [1, 1, 0, 1, 1, 1],\n  taken: \"Taken\",\n  skip: \"Skip\",\n  whyLabel: \"Why skip it?\",\n  reasons: [\n    { id: \"forgot_earlier\", label: \"Forgot earlier\" },\n    { id: \"side_effects\", label: \"Side effects\" },\n    { id: \"ran_out\", label: \"Ran out\" }\n  ],\n  save: \"Save evening dose\",\n  confirm: \"✓ Evening dose saved. Sleep well\",\n  meds: [\n    { id: \"atorvastatin\", name: \"Atorvastatin\", dose: \"20 mg · 1 tablet\", note: \"With water, after food\", shape: \"tab\", colors: [\"#ffd9e4\"] },\n    { id: \"vitamin_d\", name: \"Vitamin D3\", dose: \"2000 IU · 1 softgel\", note: \"With your evening meal\", shape: \"gel\", colors: [\"#ffc93d\"] },\n    { id: \"magnesium\", name: \"Magnesium\", dose: \"250 mg · 1 capsule\", note: \"An hour before bed\", shape: \"cap\", colors: [\"#6aa8ff\", \"#f2f5ff\"] }\n  ]\n};\n\nvar $ = function (id) { return document.getElementById(id); };\nfunction el(tag, cls, text) { var e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; }\nvar choice = {}, sent = false;\n$(\"eyebrow\").textContent = CARD.eyebrow;\n$(\"title\").textContent = CARD.title;\n$(\"weekLabel\").textContent = CARD.weekLabel;\nvar done = CARD.history.filter(Boolean).length;\n$(\"weekCount\").textContent = done + \" of \" + CARD.history.length + \" evenings\";\n\nCARD.days.forEach(function (d, i) {\n  var col = el(\"div\", i === CARD.history.length ? \"today\" : \"\"), dot = el(\"div\", \"dot\");\n  if (i < CARD.history.length) dot.classList.add(CARD.history[i] ? \"t\" : \"m\");\n  else if (i === CARD.history.length) dot.classList.add(\"now\");\n  col.appendChild(dot); col.appendChild(document.createTextNode(d)); $(\"days\").appendChild(col);\n});\n\nCARD.meds.forEach(function (m) {\n  var card = el(\"div\", \"box med\"), top = el(\"div\", \"top\");\n  var box = el(\"div\", \"pillbox\"), pill = el(\"i\", \"pill \" + m.shape);\n  pill.style.background = m.colors.length > 1 ? \"linear-gradient(90deg,\" + m.colors[0] + \" 50%,\" + m.colors[1] + \" 50%)\" : m.colors[0];\n  box.appendChild(pill); top.appendChild(box);\n  var info = el(\"div\", \"\");\n  info.appendChild(el(\"p\", \"name\", m.name));\n  info.appendChild(el(\"p\", \"dose\", m.dose));\n  info.appendChild(el(\"p\", \"note\", m.note));\n  top.appendChild(info); card.appendChild(top);\n\n  var acts = el(\"div\", \"acts\"), bt = el(\"button\", \"btn taken\", \"✓ \" + CARD.taken), bs = el(\"button\", \"btn skip\", CARD.skip);\n  acts.appendChild(bt); acts.appendChild(bs); card.appendChild(acts);\n  var why = el(\"div\", \"why\"); why.appendChild(el(\"p\", \"\", CARD.whyLabel));\n  var chips = CARD.reasons.map(function (r) {\n    var c = el(\"button\", \"chip\", r.label);\n    c.onclick = function () {\n      if (sent) return;\n      choice[m.id].reason = choice[m.id].reason === r.id ? null : r.id; paint();\n    };\n    why.appendChild(c); return c;\n  });\n  card.appendChild(why); $(\"list\").appendChild(card);\n\n  bt.onclick = function () { if (!sent) { choice[m.id] = { v: \"taken\" }; paint(); } };\n  bs.onclick = function () { if (!sent) { choice[m.id] = { v: \"skip\", reason: (choice[m.id] || {}).reason || null }; paint(); } };\n  m.ui = { bt: bt, bs: bs, why: why, chips: chips };\n});\n\nfunction paint() {\n  var t = 0, s = 0;\n  CARD.meds.forEach(function (m) {\n    var c = choice[m.id] || {};\n    m.ui.bt.classList.toggle(\"on\", c.v === \"taken\");\n    m.ui.bs.classList.toggle(\"on\", c.v === \"skip\");\n    m.ui.why.classList.toggle(\"open\", c.v === \"skip\");\n    m.ui.chips.forEach(function (ch, i) { ch.classList.toggle(\"on\", c.reason === CARD.reasons[i].id); });\n    if (c.v === \"taken\") t++; if (c.v === \"skip\") s++;\n  });\n  var left = CARD.meds.length - t - s;\n  $(\"go\").disabled = left > 0;\n  $(\"go\").textContent = left > 0 ? CARD.save + \" · \" + left + \" to go\" : CARD.save + \" · \" + t + \" taken\" + (s ? \", \" + s + \" skipped\" : \"\");\n}\npaint();\n\n$(\"go\").onclick = function () {\n  if (sent) return;\n  var bridge = window.Bridgit || window.Bridget;\n  if (!bridge) { $(\"status\").textContent = \"Preview only: open this card in Bridgit to answer.\"; return; }\n  sent = true;\n  var now = new Date(), pad = function (n) { return (n < 10 ? \"0\" : \"\") + n; };\n  var answer = { taken: [], skipped: [], at: pad(now.getHours()) + \":\" + pad(now.getMinutes()) };\n  CARD.meds.forEach(function (m) {\n    var c = choice[m.id];\n    if (c.v === \"taken\") answer.taken.push(m.id); else answer.skipped.push({ id: m.id, reason: c.reason || null });\n  });\n  document.querySelectorAll(\"button\").forEach(function (b) { b.disabled = true; });\n  $(\"status\").textContent = \"Sending…\";\n  (window.Bridgit || window.Bridget).respond(JSON.stringify(answer));\n};\n\ndocument.addEventListener(\"bridgit:answered\", function (e) {\n  e.preventDefault();\n  sent = true;\n  document.querySelectorAll(\"button\").forEach(function (b) { b.disabled = true; });\n  $(\"title\").textContent = CARD.confirm;\n  $(\"status\").textContent = \"\";\n  setTimeout(function () { $(\"title\").scrollIntoView({ block: \"center\", behavior: \"smooth\" }); }, 400);\n});\n</script>\n",
  "expires_in_seconds": 7200
}