{
  "kind": "html",
  "title": "File this receipt as an expense?",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#eceff3;color:#1e2530;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif}\n.wrap{max-width:820px;margin:0 auto;padding:18px 16px 110px;display:grid;gap:16px}\n@media(min-width:760px){.wrap{grid-template-columns:1fr 1fr;align-items:start}}\nh1{font-size:22px;margin:0 0 4px;grid-column:1/-1}\n.rc{background:#fff;padding:18px 18px 22px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.08);transform:rotate(-1deg);position:relative}\n.rc:after{content:\"\";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,#fff 6px) 0 0/12px 8px,linear-gradient(45deg,transparent 6px,#fff 6px) 0 0/12px 8px}\n.rc h2{text-align:center;font-size:16px;margin:0 0 2px}\n.rc .c{text-align:center;color:#6b7480;margin:0 0 10px;font-size:12px}\n.l{display:flex;justify-content:space-between;padding:2px 0}\n.hr{border-top:1px dashed #b8c0ca;margin:8px 0}\n.tot{font-weight:700;font-size:16px}\n.side{background:#fff;border-radius:16px;padding:16px;box-shadow:0 1px 0 #d9dee5}\n.f{margin-bottom:14px}\n.f label{display:block;font-size:13px;font-weight:600;color:#56606c;margin-bottom:6px}\n.chips{display:flex;flex-wrap:wrap;gap:8px}\n.chips button{font:inherit;font-size:14px;border:1.5px solid #cfd6df;background:#fff;border-radius:99px;padding:8px 12px;cursor:pointer}\n.chips button.on{border-color:#1a73e8;background:#e8f0fe;color:#0b57d0}\nselect,textarea{width:100%;font:inherit;border:1.5px solid #cfd6df;border-radius:10px;padding:10px;background:#fff}\ntextarea{resize:vertical;min-height:64px}\n.warn{background:#fff4e5;border-radius:10px;padding:8px 10px;font-size:14px;color:#8a4b00;margin-bottom:14px}\n.bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #d9dee5;padding:12px 16px 12px}\n.bar .in{max-width:820px;margin:0 auto;display:flex;gap:10px}\n.bar button{font:inherit;font-weight:700;border:0;border-radius:12px;padding:14px;min-height:48px;cursor:pointer}\n.sub{flex:1;background:#1a73e8;color:#fff}\n.per{background:#eceff3;color:#1e2530}\n</style>\n<div class=\"wrap\">\n  <h1>File this receipt as an expense?</h1>\n  <div class=\"rc\">\n    <h2>CAFÉ NORDLYS</h2>\n    <p class=\"c\">Rynek Główny 12, Kraków · NIP 676-12-34-567<br>31.10.2026 12:48 · Table 7</p>\n    <div class=\"l\"><span>2 × Flat white</span><span>28.00</span></div>\n    <div class=\"l\"><span>1 × Smoked salmon bagel</span><span>34.00</span></div>\n    <div class=\"l\"><span>1 × Shakshuka</span><span>39.00</span></div>\n    <div class=\"l\"><span>1 × Sparkling water</span><span>9.00</span></div>\n    <div class=\"hr\"></div>\n    <div class=\"l\"><span>Net</span><span>101.85</span></div>\n    <div class=\"l\"><span>VAT 8%</span><span>8.15</span></div>\n    <div class=\"l tot\"><span>TOTAL PLN</span><span>110.00</span></div>\n    <div class=\"hr\"></div>\n    <div class=\"l\"><span>Card ****4417</span><span>APPROVED</span></div>\n  </div>\n  <div class=\"side\">\n    <div class=\"warn\">Lunch for 2 is over the 90 zł solo limit, so it needs a client name.</div>\n    <div class=\"f\"><label>Category</label><div class=\"chips\" id=\"cat\"><button data-v=\"client_meal\" class=\"on\">Client meal</button><button data-v=\"team_meal\">Team meal</button><button data-v=\"travel_meal\">Travel</button></div></div>\n    <div class=\"f\"><label for=\"client\">Client or project</label><select id=\"client\"><option value=\"\">Choose…</option><option>Harbor Logistics</option><option selected>Fern &amp; Pine Studio</option><option>Internal</option></select></div>\n    <div class=\"f\"><label for=\"note\">Note for finance (optional)</label><textarea id=\"note\" maxlength=\"300\" placeholder=\"e.g. Kick-off for the Q1 redesign\"></textarea></div>\n  </div>\n</div>\n<div class=\"bar\"><div class=\"in\"><button class=\"per\" id=\"per\">It's personal</button><button class=\"sub\" id=\"sub\">Submit 110.00 zł</button></div></div>\n<script>\nvar cat='client_meal',sent=false;\ndocument.querySelectorAll('#cat button').forEach(function(b){b.onclick=function(){document.querySelectorAll('#cat button').forEach(function(x){x.classList.remove('on')});b.classList.add('on');cat=b.dataset.v}});\nfunction send(o){if(sent)return;sent=true;(window.Bridgit||window.Bridget).respond(JSON.stringify(o))}\ndocument.getElementById('sub').onclick=function(){send({action:'submit',category:cat,client:document.getElementById('client').value||null,note:document.getElementById('note').value.trim(),amount_pln:110.00})};\ndocument.getElementById('per').onclick=function(){send({action:'personal'})};\n</script>\n"
}