{
  "kind": "html",
  "title": "Kraków → Lisbon: pick a flight",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:linear-gradient(180deg,#e3f0ff 0%,#f5f9ff 45%,#ffffff 100%);color:#0b2545;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;min-height:100vh}\n.wrap{max-width:520px;margin:0 auto;padding:20px 18px 28px}\n.eyebrow{font-size:13px;font-weight:700;color:#0060c7;letter-spacing:.02em}\nh1{font-size:24px;line-height:1.2;margin:4px 0 4px;letter-spacing:-.01em}\n.sub{color:#4a5d78;font-size:15px;margin:0 0 16px}\n.opt{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:#fff;border:2px solid transparent;border-radius:18px;padding:14px 14px 12px;margin-bottom:12px;box-shadow:0 4px 16px rgba(11,37,69,.08);cursor:pointer;position:relative;transition:border-color .18s,box-shadow .18s,transform .15s}\n.opt:active{transform:scale(.98)}\n.opt.on{border-color:#0a84ff;box-shadow:0 8px 22px rgba(10,132,255,.22)}\n.hd{display:flex;align-items:center;gap:10px}\n.av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-content:center;color:#fff;font-weight:800;font-size:17px}\n.al{flex:1;min-width:0}\n.al b{display:block;font-size:15px}\n.al small{color:#4a5d78;font-size:13px}\n.pr{text-align:right;font-variant-numeric:tabular-nums}\n.pr b{display:block;font-size:21px;letter-spacing:-.01em}\n.pr small{color:#4a5d78;font-size:12px}\n.rt{display:flex;align-items:center;gap:10px;margin:12px 0 10px}\n.end{font-variant-numeric:tabular-nums}\n.end b{display:block;font-size:19px;line-height:1.1}\n.end small{color:#4a5d78;font-size:12px;font-weight:600}\n.end.r{text-align:right}\n.mid{flex:1;text-align:center;font-size:12px;color:#4a5d78}\n.ln{position:relative;height:12px;margin:3px 0;display:flex;align-items:center;justify-content:space-evenly}\n.ln:before{content:\"\";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid #b9cbe3}\n.ln i{position:relative;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #0a84ff}\n.ln:after{content:\"\";position:absolute;right:-2px;top:50%;width:6px;height:6px;border-radius:50%;background:#0b2545;transform:translateY(-50%)}\n.ln span{position:absolute;left:-2px;top:50%;width:6px;height:6px;border-radius:50%;background:#0b2545;transform:translateY(-50%)}\n.ft{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #edf2f9;padding-top:10px}\n.bd{font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:#eef3fa;color:#34506f}\n.bd.pick{background:#0062cc;color:#fff}\n.co{font-size:12px;color:#2e6b3f;font-weight:600;font-variant-numeric:tabular-nums}\n.ck{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:#0a84ff;color:#fff;display:grid;place-content:center;font-size:14px;font-weight:800;opacity:0;transform:scale(.6);transition:all .18s;box-shadow:0 2px 6px rgba(10,132,255,.4)}\n.opt.on .ck{opacity:1;transform:none}\n.bag{display:flex;align-items:center;gap:12px;width:100%;font:inherit;color:inherit;text-align:left;background:#fff;border:0;border-radius:16px;padding:12px 14px;min-height:60px;box-shadow:0 2px 10px rgba(11,37,69,.06);cursor:pointer;margin-top:4px}\n.bag svg{flex:none}\n.bag span{flex:1;font-weight:600}\n.bag small{display:block;font-weight:400;color:#4a5d78;font-size:13px}\n.sw{flex:none;width:48px;height:28px;border-radius:14px;background:#c9d5e6;position:relative;transition:background .18s}\n.sw:after{content:\"\";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s}\n.bag.on .sw{background:#0a72e0}\n.bag.on .sw:after{transform:translateX(20px)}\n.bag.inc .sw{display:none}\n.foot{margin-top:20px}\nbutton.main{width:100%;font:inherit;font-weight:700;font-size:17px;border:0;border-radius:16px;padding:16px;min-height:56px;background:#0a72e0;color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(10,132,255,.32);font-variant-numeric:tabular-nums;transition:transform .15s,opacity .2s}\nbutton.alt{width:100%;font:inherit;font-weight:600;border:0;border-radius:14px;padding:14px;min-height:48px;background:transparent;color:#0060c7;cursor:pointer;margin-top:6px}\nbutton.main:active,button.alt:active,.bag:active{transform:scale(.98)}\nbutton:disabled{opacity:.5;cursor:default;transform:none}\n.status{text-align:center;color:#4a5d78;font-size:14px;min-height:20px;margin-top:6px}\n.done{color:#0060c7}\n</style>\n<div class=\"wrap\">\n  <div class=\"eyebrow\" id=\"eyebrow\"></div>\n  <h1 id=\"title\"></h1>\n  <p class=\"sub\" id=\"sub\"></p>\n  <div id=\"list\"></div>\n  <button class=\"bag\" id=\"bag\"><svg width=\"34\" height=\"34\" viewBox=\"0 0 34 34\" aria-hidden=\"true\"><rect width=\"34\" height=\"34\" rx=\"10\" fill=\"#e3f0ff\"/><rect x=\"10\" y=\"11\" width=\"14\" height=\"15\" rx=\"3\" fill=\"none\" stroke=\"#0a72e0\" stroke-width=\"2\"/><path d=\"M14 11V8.5h6V11M14 15v7M20 15v7\" stroke=\"#0a72e0\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"/></svg><span id=\"bagTxt\"></span><i class=\"sw\"></i></button>\n  <div class=\"foot\"><button class=\"main\" id=\"go\"></button><button class=\"alt\" id=\"alt\"></button><div class=\"status\" id=\"status\"></div></div>\n</div>\n<script>\n// The card's content. Change only this object.\n// answer.data: {flight:\"FR 2417\", airline:\"Ryanair\", bag:true, price_eur:183, agent_pick:true} or {action:\"more_options\"}\nvar CARD = {\n  eyebrow: \"Fri 4 Dec · 1 adult · cabin bag included\",\n  title: \"Kraków → Lisbon: pick a flight\",\n  sub: \"Three good options. I'd take the Ryanair: direct, mid-morning and fair.\",\n  pick: \"FR 2417\",\n  flights: [\n    { id: \"FR 2417\", airline: \"Ryanair\", color: \"#073590\", dep: \"11:25\", arr: \"14:20\", from: \"KRK\", to: \"LIS\", dur: \"3 h 55 min\", stops: [], price: 148, bag: 35, co2: 175, badge: \"Best balance\" },\n    { id: \"W6 1305\", airline: \"Wizz Air\", color: \"#c6007e\", dep: \"06:10\", arr: \"12:40\", from: \"KRK\", to: \"LIS\", dur: \"7 h 30 min\", stops: [\"FCO\"], price: 92, bag: 38, co2: 214, badge: \"Cheapest\" },\n    { id: \"TP 1281\", airline: \"TAP Air Portugal\", color: \"#12784a\", dep: \"07:00\", arr: \"09:45\", from: \"KRK\", to: \"LIS\", dur: \"3 h 45 min\", stops: [], price: 239, bag: 0, co2: 189, badge: \"Fastest\" }\n  ],\n  direct: \"Direct\", oneStop: \"1 stop · \", stopsWord: \" stops · \",\n  pickNote: \" · my pick\",\n  perPerson: \"one way\",\n  co2: \"kg CO₂\",\n  bagLabel: \"Add a checked bag\",\n  bagSub: \"23 kg, dropped at the desk\",\n  bagIncluded: \"Checked bag included\",\n  primary: \"Book {airline} · €{price}\",\n  secondary: \"Show me more flights\",\n  sending: \"Sending…\",\n  doneTitle: \"Booking your flight\",\n  doneSub: \"I'll send the boarding pass when check-in opens.\",\n  preview: \"Preview only: open this card in Bridgit to answer.\"\n};\n\nvar sent = false, sel = CARD.pick, bag = false, cards = [];\nfunction $(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; }\nfunction cur(){ return CARD.flights.filter(function(f){ return f.id === sel; })[0]; }\n\n[\"eyebrow\", \"title\", \"sub\"].forEach(function(k){ $(k).textContent = CARD[k]; });\n$(\"alt\").textContent = CARD.secondary;\n\nCARD.flights.forEach(function(f){\n  var b = el(\"button\", \"opt\"), hd = el(\"div\", \"hd\"), av = el(\"div\", \"av\", f.airline.charAt(0)), al = el(\"div\", \"al\"), pr = el(\"div\", \"pr\");\n  av.style.background = f.color;\n  al.appendChild(el(\"b\", null, f.airline)); al.appendChild(el(\"small\", null, f.id));\n  pr.appendChild(el(\"b\", null, \"€\" + f.price)); pr.appendChild(el(\"small\", null, CARD.perPerson));\n  hd.appendChild(av); hd.appendChild(al); hd.appendChild(pr); b.appendChild(hd);\n  var rt = el(\"div\", \"rt\"), a = el(\"div\", \"end\"), z = el(\"div\", \"end r\"), mid = el(\"div\", \"mid\"), ln = el(\"div\", \"ln\");\n  a.appendChild(el(\"b\", null, f.dep)); a.appendChild(el(\"small\", null, f.from));\n  z.appendChild(el(\"b\", null, f.arr)); z.appendChild(el(\"small\", null, f.to));\n  ln.appendChild(el(\"span\")); f.stops.forEach(function(){ ln.appendChild(el(\"i\")); });\n  mid.appendChild(el(\"div\", null, f.dur)); mid.appendChild(ln);\n  mid.appendChild(el(\"div\", null, !f.stops.length ? CARD.direct : f.stops.length === 1 ? CARD.oneStop + f.stops[0] : f.stops.length + CARD.stopsWord + f.stops.join(\", \")));\n  rt.appendChild(a); rt.appendChild(mid); rt.appendChild(z); b.appendChild(rt);\n  var ft = el(\"div\", \"ft\"), isPick = f.id === CARD.pick;\n  ft.appendChild(el(\"span\", \"bd\" + (isPick ? \" pick\" : \"\"), (isPick ? \"★ \" : \"\") + f.badge + (isPick ? CARD.pickNote : \"\")));\n  ft.appendChild(el(\"span\", \"co\", \"🌱 \" + f.co2 + \" \" + CARD.co2)); b.appendChild(ft);\n  b.appendChild(el(\"span\", \"ck\", \"✓\"));\n  b.onclick = function(){ if (sent) return; sel = f.id; render(); };\n  cards.push({ f: f, b: b }); $(\"list\").appendChild(b);\n});\n\n$(\"bag\").onclick = function(){ if (sent || !cur().bag) return; bag = !bag; render(); };\n\nfunction price(){ var f = cur(); return f.price + (bag && f.bag ? f.bag : 0); }\nfunction render(){\n  var f = cur();\n  cards.forEach(function(c){ c.b.classList.toggle(\"on\", c.f.id === sel); c.b.setAttribute(\"aria-pressed\", c.f.id === sel ? \"true\" : \"false\"); });\n  var t = $(\"bagTxt\"), bb = $(\"bag\");\n  t.textContent = \"\";\n  if (f.bag) { t.appendChild(document.createTextNode(CARD.bagLabel + \" (+€\" + f.bag + \")\")); t.appendChild(el(\"small\", null, CARD.bagSub)); }\n  else t.appendChild(document.createTextNode(\"✓ \" + CARD.bagIncluded));\n  bb.classList.toggle(\"on\", bag && !!f.bag); bb.classList.toggle(\"inc\", !f.bag);\n  bb.setAttribute(\"aria-pressed\", bag && f.bag ? \"true\" : \"false\");\n  $(\"go\").textContent = CARD.primary.replace(\"{airline}\", f.airline).replace(\"{price}\", price());\n}\n\nfunction send(answer){\n  if (sent) return;\n  var B = window.Bridgit || window.Bridget;\n  if (!B || !B.respond) { $(\"status\").textContent = CARD.preview; return; }\n  sent = true;\n  document.querySelectorAll(\"button\").forEach(function(b){ b.disabled = true; });\n  $(\"status\").textContent = CARD.sending;\n  B.respond(JSON.stringify(answer));\n}\n$(\"go\").onclick = function(){\n  var f = cur();\n  send({ flight: f.id, airline: f.airline, bag: f.bag ? bag : true, price_eur: price(), agent_pick: f.id === CARD.pick });\n};\n$(\"alt\").onclick = function(){ send({ action: \"more_options\" }); };\ndocument.addEventListener(\"bridgit:answered\", function(e){\n  e.preventDefault();\n  $(\"title\").textContent = \"✓ \" + CARD.doneTitle; $(\"title\").className = \"done\";\n  $(\"sub\").textContent = CARD.doneSub; $(\"status\").textContent = \"\";\n  setTimeout(function(){ $(\"title\").scrollIntoView({ block: \"center\" }); }, 400);\n});\nrender();\n</script>\n",
  "expires_in_seconds": 21600
}