From 57fae0df49ee67aad7ffa49909158b2ffdf1e583 Mon Sep 17 00:00:00 2001
From: Torres <torres@mackwnox.ca>
Date: Tue, 10 Nov 2026 21:21:27 -0400
Subject: [PATCH] app: no-build PWA frontend (fidelity port) + image mirror
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- app/static/index.html: single-file app — DOM/CSS/stack engine ported
  verbatim from reference/mockup-001-fidelity.html (DEPTH/SC/TY/DIM, drag/
  fly/undo, one .topcard, no-lock commits, stamps, dossier sheet,
  pull-to-close, empty state); production deltas only (UI-SPEC §7): deck
  buffer + cursor refill (40/page), optimistic swipe persistence with
  2s/5s/10s/15s retry queue + toast, badge-once-per-session, real list
  filters + search (server-side), real Matches screen, /img/{id} everywhere
  with placeholder fallback, SW registration, safe areas, desktop centering
- manifest.json + sw.js (precache shell, network-first API, cache-first imgs)
- icons: 192/512/maskable/apple-touch-180, dark tile with the brand
  accent-gradient mark (Pillow)
- app/imgfetch.py: local mirror, hunt's Chrome-120 UA, ~1s pacing,
  skip-existing, .part writes atomic, per-item failure isolation,
  fetched/skipped/failed summary; verified: --limit 15 -> 15 fetched, full
  run 5 more, re-run 0 fetched 20 skipped (20/20 mirrored)
---
 .gitignore                             |   1 +
 app/imgfetch.py                        | 114 ++++
 app/static/icons/apple-touch-icon.png  | Bin 0 -> 1301 bytes
 app/static/icons/icon-192.png          | Bin 0 -> 1421 bytes
 app/static/icons/icon-512-maskable.png | Bin 0 -> 3996 bytes
 app/static/icons/icon-512.png          | Bin 0 -> 4837 bytes
 app/static/index.html                  | 733 +++++++++++++++++++++++++
 app/static/manifest.json               |  28 +
 app/static/sw.js                       |  67 +++
 9 files changed, 943 insertions(+)
 create mode 100644 app/imgfetch.py
 create mode 100644 app/static/icons/apple-touch-icon.png
 create mode 100644 app/static/icons/icon-192.png
 create mode 100644 app/static/icons/icon-512-maskable.png
 create mode 100644 app/static/icons/icon-512.png
 create mode 100644 app/static/index.html
 create mode 100644 app/static/manifest.json
 create mode 100644 app/static/sw.js

diff --git a/.gitignore b/.gitignore
index f564ead..306fe8b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ __pycache__/
 
 # scratch
 scratch/
+.venv/
diff --git a/app/imgfetch.py b/app/imgfetch.py
new file mode 100644
index 0000000..44f9908
--- /dev/null
+++ b/app/imgfetch.py
@@ -0,0 +1,114 @@
+"""Bike-Tinder local image mirror.
+
+Downloads each active listing's card image once into data/img/{id}.webp.
+
+  .venv/bin/python -m app.imgfetch --db data/bike-tinder.sqlite3
+  .venv/bin/python -m app.imgfetch --limit 15
+
+Polite by design: ~1 req/s (sleep between fetches), skip-existing, crash-safe
+(partial bytes land in .part and are atomically renamed), per-item failures
+never kill the run. Honest end summary: `fetched N · skipped M · failed K`.
+
+UA + habits match the hunt scanner (reference/motorcycle-hunt-scan.py) so the
+CDN sees the same client as the crawl. Stdlib only — no requests dependency.
+"""
+import argparse
+import os
+import sys
+import time
+import urllib.error
+import urllib.request
+
+from . import db
+
+# Same UA string the hunt scanner uses.
+UA = ('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 '
+      '(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36')
+
+SLEEP = 1.0
+TIMEOUT = 20
+
+
+def is_webp(buf):
+    return (len(buf) >= 12 and buf[:4] == b'RIFF' and buf[8:12] == b'WEBP')
+
+
+def fetch_one(img_url, dst):
+    """Download img_url -> dst. Returns 'fetched' or an error string."""
+    part = dst + '.part'
+    req = urllib.request.Request(
+        img_url, headers={
+            'User-Agent': UA,
+            'Accept-Language': 'en-CA,en;q=0.9',
+            'Accept': 'image/avif,image/webp,image/*,*/*;q=0.8',
+        })
+    try:
+        with urllib.request.urlopen(req, timeout=TIMEOUT) as resp:
+            if getattr(resp, 'status', 200) != 200:
+                return 'HTTP %s' % resp.status
+            buf = resp.read()
+        if not is_webp(buf):
+            return 'not webp (%d bytes, %r)' % (len(buf), buf[:8])
+        with open(part, 'wb') as fh:
+            fh.write(buf)
+        os.replace(part, dst)   # atomic: never a half file under the final name
+        return 'fetched'
+    except urllib.error.HTTPError as e:
+        return 'HTTP %s' % e.code
+    except Exception as e:      # noqa: BLE001 — one bad item never kills the run
+        return '%s: %s' % (type(e).__name__, e)
+    finally:
+        if os.path.exists(part):
+            try:
+                os.remove(part)
+            except OSError:
+                pass
+
+
+def run_fetch(db_path, img_dir, limit=None, sleep=SLEEP, quiet=False):
+    conn = db.connect(db_path)
+    db.init_db(conn)
+    rows = conn.execute(
+        "SELECT id, img_url FROM listings"
+        " WHERE status='active' AND img_url IS NOT NULL"
+        " ORDER BY id").fetchall()
+    conn.close()
+
+    os.makedirs(img_dir, exist_ok=True)
+    fetched = skipped = failed = 0
+    for row in rows:
+        if limit is not None and fetched >= limit:
+            break
+        dst = os.path.join(img_dir, '%d.webp' % row['id'])
+        if os.path.exists(dst):
+            skipped += 1
+            continue
+        result = fetch_one(row['img_url'], dst)
+        if result == 'fetched':
+            fetched += 1
+        else:
+            failed += 1
+            if not quiet:
+                print('  fail  id=%d %s' % (row['id'], result))
+        time.sleep(sleep)
+    return {'fetched': fetched, 'skipped': skipped, 'failed': failed}
+
+
+def main(argv=None):
+    ap = argparse.ArgumentParser(description='Bike-Tinder image mirror')
+    ap.add_argument('--db', default='data/bike-tinder.sqlite3')
+    ap.add_argument('--img-dir', default='data/img')
+    ap.add_argument('--limit', type=int, default=None,
+                    help='stop after this many downloads (small test runs)')
+    ap.add_argument('--sleep', type=float, default=SLEEP,
+                    help='seconds between fetches (default %.1f)' % SLEEP)
+    args = ap.parse_args(argv)
+
+    res = run_fetch(args.db, args.img_dir, limit=args.limit, sleep=args.sleep)
+    print('fetched %d · skipped %d · failed %d' % (
+        res['fetched'], res['skipped'], res['failed']))
+    return 0
+
+
+if __name__ == '__main__':
+    sys.exit(main())
diff --git a/app/static/icons/apple-touch-icon.png b/app/static/icons/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..4500220741b765ddce58df71a2c8bc138de0c013
GIT binary patch
literal 1301
zcmeAS@N?(olHy`uVBq!ia0vp^TR@nD2}o{QKQWbof#r^;i(^Q|oVRzQ^F-Vw+8*8)
zED!r$C!q1f!NHK*!>J>%!IV|(z{vx=OoAr@Bi*K~Syat<*tPdeMces9Z`Z9`zw7?@
zRcq#Ho(-{mCAE0tjobJ0n_nc?hW%olkpDnI(!zs{Z&G7(3LTlT8h@FNt^fbi&E-gz
zzEYCt?Z?4-OFwE(_nW)0@~6`G=-E5=R{mMf`FF1L>x&C&dy7xsn6<F-tIg@(bGE%I
z{8G+;?Cy2J^o%(B(;xbluMU&>ySI7GZ>x7aXJ;=iy#LQ6^k?H1J;{w-|8Bo`i*4v!
z_2%5g`_>(q-%IaE&f4zp9@VM2>gBn>-8~Vm^?!dCUQ3#^>YyRBWagdt--$h6XDqTR
zIOFCf_5J>phl`nHj3-Y#_V?=S=W#RM?0h_9X-~=C-?#3zoAybbj##Utv}=8x&2^^K
zbK=L}q%M))tzTO^<55IMPsz&PkFI@~dTOR---bKaWsK~6-c48Td-bpMk8t_~qp*vy
zg?lP*Jd9Y-WAe`Kf98Wpsi*ncAMW#0NPZBNdXB&S<~~35#}!Vq_Y_#v7pF5x-hFyl
zarHD^eVMS|R$pxozb`O6^zfVQh2nDtF2}TXdAphOE6cp*`L=aRkMMLJqr-_C)}OFA
z$Ju^x-?ZruzgTy3_XX8=n!Mv#eBy=PJ-H1HmPH2zmwvzMa;(#R+Br6MqeoAac{d$w
z?71uNo!-nWnPxPnKq2{i<kHOt8+nW+{VXOtEZ=nFfkWF&9(5Vb6pOh!AR(2*oa{zt
zQY;=i9J|KDcJqP5v1dGTK&tKj!zA(zahp@K#L*07;|`dOCvMb+z04_4IPB9V%$M?G
zt`1N-QSC6NJC~%NdN)wW;$*=gs6#iJHiL9;v}|_AX^3Fov!~oCOA3F#Z#LGCpBGb5
zlX27N$C-uBZNWf)0kt~1S<DJQKk?$f^7;#pQcrRm-^F^m;54`U=U<UJ5p7p<5A(SL
z>BKq<G3~=|!bRO>fT`|lMxxQJ|Mikv5+pYt78E?Y-u*<u3BlvLj-HU%=Q7jy=*2y?
zQr#0DR^I+_6ezp<i87O9>n9L1-=9hH>84{q)_ea;43d|h_bDsQvX@g{>>>J~qvPB8
z<95Gy2}oWAvDdrv{oW-bY5EYze(!!_#-_c0|8Dz|ZBcx8YV_5UE4p1*Ewese_|~5P
zx^l{sHK(kPrvcMV!PJM}{`PDRv+WBhe|f>n?X6Cb@xhIe<sZugCGG0-jlztNI3|Za
tWe=LARxp7_MunOE<N-$`Ix_DuPsyEj;{nUG2w-u?;OXk;vd$@?2>=p@R+s<)

literal 0
HcmV?d00001

diff --git a/app/static/icons/icon-192.png b/app/static/icons/icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7d84035f615a95b44e042613791f408503366e0
GIT binary patch
literal 1421
zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE2}s`E_d9@rfi=X_#WAE}&fB}OeZuY%tq;!!
zzH@u~Re?oGLr`M_BgcNl6z>*Z6=R+l1;(Zpk4X1_W*7G|JYQs!#&&exrhePfecyh^
z_3S#f=*qgP7u#BO)!5lDE8N<mA2pxhDW8K1tHLBE0Z+z`B@95@l{6V9iZpm|(Mfn;
zPA${!+#mnS&ZvDpxaQ9qiF1Dc{&XeY-E#MJxOGL8oA0sj_icIo^N!EDy+_%0zVGe5
zl{?Qqe|fQjf!F>{S8mSdllt4&JpW>I_x9trHtEgB7&83SJLetUP;JiUwv&<9KmTpj
z>~h=O@BdmiFuXm@l~ECu7oq-mPL<g4yX}j8!xt55-appw<L|;_{yt}m(A(4O88ua>
z3U(BhH($+&TNZue!{hB|xBp~X_SQ~r-F7`+?_$<l!nT5jHJ|TBX<yzZ)9}sRUsBCz
z3d4ncFFQMK>ik+?EaAm)qHK2g^5<t3-`mM7^}2eUl<nWI)l*krG01lKy=J-1ll&9n
z0#&Cr{D1XtXZBTtc!$KDXT{e%KXbt-*g^S6_@!T&=dWIl|GbxDCX>;fXVb3BJuXk_
zYnW8GFMWB{uhslv>moPHFrM9f^VzeiIq_^a8NI%oyuy9ec=nfYxpgr+&2BPsEzkXS
zadXu{sb}mb(q_N?5^?Xu9)_EB%IVRUyQ+Sj?w__UcJUsD*5hW?uRiXXIFr%nM%tG(
zQzaK%yZvU}@%O0{1Q$HJpX|SI`Tj3I{!d>Y=+<yy^Rb(^p0KQFnRn{)=My{vRY5Ne
znOo-NRGnd1xcuLjoFXO&XX=IE$||{;j86VqwrLF)Cj0hFDtx(eK6$dR!k3iG$!tIa
zW>w}G0kwvJw5rdRGj@2fGM;7j92m#5Lb(`WnB`h`kTG5$V?g>jY`<Oxx`V^^=9d|a
zS__vKMfHP>nF=!I<g(*HhrL?9^(3c2)h4j}w*KR)Bvy5ZlmF8#7*6-kMsoV8Ok0T4
z_b`;Mk7unqH#_~;^UtZ=H&m1z8t2W*JPVYSi*xY?Imp`K?(FG}^PV1l8E>x}zsIbS
zk?YG9p1GfZUbm@|VJyw>fA0Rm(t6In-17fLEGGQ6r<a+Y77Y0Q&f-FG*{zrM=fm`)
zR?9H5RvE=qdo63&^<DqMW{Yim|NLP3b>-e`!}H<+-yd?=KASF|?I3vZZxt|HTeD`E
zF6eksXU+3P;yItjx6t#;-S>JktoU8AqrGa`f3+Qdo-l|A-hID+!ST&94PtF;wpF@c
zR=XrDIJvnw^L25=`hUOn{=E3&%aV$#e<Cy2Idm_p|0DBaqo(|V;5NTwFEYdTMc;V&
zEBpKA*C)M~PmvB-x&N1f(5sVv%T3rEmi{|+*kjT0&zoCko60$K1C!V@_p~aW{lN>(
zog9|G*0=3jR&{4z=bo=_d>v)6r?!85B22#$21lXxkNHi^*Jo~gN2UOaSq4v6KbLh*
G2~7af+<iL$

literal 0
HcmV?d00001

diff --git a/app/static/icons/icon-512-maskable.png b/app/static/icons/icon-512-maskable.png
new file mode 100644
index 0000000000000000000000000000000000000000..b16d57011f68901b3f7fe74fb3e607b4125d9b12
GIT binary patch
literal 3996
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

literal 0
HcmV?d00001

diff --git a/app/static/icons/icon-512.png b/app/static/icons/icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b95f446fbf2e4416be95e8c97040327bd27ad1b
GIT binary patch
literal 4837
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
Rz|U7;T~P4qvOs>ue*vFMN?8B^

literal 0
HcmV?d00001

diff --git a/app/static/index.html b/app/static/index.html
new file mode 100644
index 0000000..0efa349
--- /dev/null
+++ b/app/static/index.html
@@ -0,0 +1,733 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="robots" content="noindex">
+<title>Bike-Tinder</title>
+<link rel="manifest" href="/manifest.json">
+<meta name="theme-color" content="#0b0b0e">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="Bike-Tinder">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<style>
+:root{
+  --bg:#0b0b0e; --card:#141419; --text:#fff; --mut:rgba(255,255,255,.62);
+  --accent1:#ff7854; --accent2:#fd267d; --like:#46d369; --nope:#fd4d5c; --maybe:#ffb43a;
+}
+*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
+html,body{height:100%}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased}
+.app{position:relative;display:flex;flex-direction:column;height:100%;max-width:520px;margin:0 auto}
+/* header */
+header{height:calc(50px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top,0px) 16px 0}
+.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:.2px}
+.flame{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent1),var(--accent2))}
+.pill{font-size:12px;color:var(--mut);background:#1b1b21;border:1px solid #26262e;border-radius:999px;padding:5px 10px}
+.pill b{color:#fff}
+/* stage + cards */
+.stage{position:relative;flex:1;padding:6px 14px 2px;min-height:0}
+.card{position:absolute;left:14px;right:14px;top:6px;bottom:34px;border-radius:18px;overflow:hidden;background:var(--card);
+  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.5);will-change:transform;touch-action:none}
+.nophoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#141419 0 14px,#18181f 14px 28px);color:#55555f;font-size:13px;text-align:center;padding:24px;line-height:1.6}
+.card .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.card .grad{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.88) 100%)}
+.card .info{position:absolute;left:16px;right:16px;bottom:14px;z-index:3}
+.chips{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
+.chip{font-size:11px;font-weight:600;letter-spacing:.4px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
+.title{font-size:23px;font-weight:800;line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.price{font-size:20px;font-weight:600;margin-top:2px}
+.sub{font-size:13px;color:var(--mut);margin-top:3px}
+.stamp{position:absolute;top:26px;z-index:4;font-weight:800;letter-spacing:2px;font-size:26px;padding:6px 12px;border:3px solid;border-radius:10px;opacity:0;pointer-events:none}
+.stamp.like{left:20px;transform:rotate(-14deg);color:var(--like);border-color:var(--like);background:rgba(70,211,105,.08)}
+.stamp.nope{right:20px;transform:rotate(14deg);color:var(--nope);border-color:var(--nope);background:rgba(253,77,92,.08)}
+.stamp.maybe{left:50%;top:auto;bottom:130px;transform:translateX(-50%);color:var(--maybe);border-color:var(--maybe);background:rgba(255,180,58,.08)}
+/* actions */
+.actions{height:86px;display:flex;align-items:center;justify-content:center;gap:16px}
+.act{border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
+.act:active{transform:scale(.92)}
+.undo{width:42px;height:42px;background:#1d1d24;color:#f5c451;font-size:18px}
+.x{width:58px;height:58px;background:#fff;color:#fd5068;font-size:26px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.4)}
+.s{width:58px;height:58px;background:#1d1d24;color:var(--maybe);font-size:24px;border:1px solid #2a2a33}
+.h{width:62px;height:62px;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;font-size:26px;box-shadow:0 8px 22px rgba(253,38,125,.35)}
+/* tabs */
+nav{height:calc(68px + env(safe-area-inset-bottom,0px));display:flex;align-items:stretch;border-top:1px solid #1d1d24;background:#0d0d10;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));position:relative;z-index:60}
+.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;letter-spacing:.3px;color:#6f6f7a;cursor:pointer}
+.tab.on{color:#fff}
+.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
+/* fullscreen detail dossier — iOS-style sheet: top gap + grabber, drag down to close */
+.dback{position:absolute;inset:0;z-index:69;background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .28s}
+.dback.on{opacity:1}
+.detail{position:absolute;top:26px;left:0;right:0;bottom:0;z-index:70;background:#0f0f13;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.45);transform:translateY(103%);transition:transform .3s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;overflow:hidden}
+.detail.on{transform:translateY(0)}
+.dgrab{flex:none;height:26px;display:flex;align-items:center;justify-content:center;background:#0f0f13;cursor:grab;touch-action:none}
+.dgrab i{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);display:block}
+.dclose{position:absolute;top:38px;left:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:0;font-size:17px;z-index:5;cursor:pointer}
+.dhero{position:relative;height:34%;min-height:190px;flex:none;background:#17171c;touch-action:none}
+.dphoto{width:100%;height:100%;object-fit:cover;display:block}
+.dphoto.ph{opacity:.25}
+.dherograd{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,rgba(15,15,19,.95))}
+.dbody{flex:1;overflow-y:auto;padding:14px 18px 20px}
+.dtitle{font-size:20px;font-weight:800;line-height:1.2}
+.drow{display:flex;align-items:baseline;gap:10px;margin-top:5px}
+.dprice{font-size:19px;font-weight:700}
+.dsub{font-size:12.5px;color:var(--mut)}
+.dchips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
+.dsec{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7b7b88;margin:18px 0 8px}
+.specs{border-top:1px solid #1f1f27}
+.spec{display:flex;justify-content:space-between;gap:14px;padding:9px 2px;border-bottom:1px solid #1f1f27;font-size:13.5px}
+.spec .k{color:#8f8f9c}
+.spec .v{font-weight:600;text-align:right}
+.spec .v.z{color:#5a5a66;font-weight:500}
+.dnotes{font-size:13.5px;line-height:1.5;color:#b9b9c2}
+.dopen{display:inline-block;margin-top:16px;color:#ff9a76;font-weight:600;font-size:14px;text-decoration:none}
+.dacts{flex:none;display:flex;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px));border-top:1px solid #1d1d24;background:#0d0d10}
+.dact{flex:1;height:48px;border-radius:14px;border:1px solid #2a2a33;background:#16161b;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
+.dact:active{transform:scale(.97)}
+.dact.no{color:#fd7b89}
+.dact.mb{color:var(--maybe)}
+.dact.lk{background:linear-gradient(135deg,var(--accent1),var(--accent2));border:0;box-shadow:0 8px 22px rgba(253,38,125,.3)}
+.ibtn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:14px;z-index:4;cursor:pointer}
+/* empty */
+.empty{position:absolute;inset:6px 14px 2px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #2a2a33;border-radius:18px;color:var(--mut);text-align:center;padding:24px;font-size:13.5px}
+.empty.on{display:flex}
+.empty b{color:#fff;font-size:16px}
+/* list screen */
+.list{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:50;padding-bottom:68px}
+.list.on{display:flex}
+.lhead{padding:14px 16px 8px}
+.lhead h1{font-size:20px;font-weight:800}
+.lhead .sub{margin-top:2px}
+.filters{display:flex;gap:7px;padding:4px 16px 10px;overflow-x:auto}
+.fchip{font-size:12px;padding:6px 11px;border-radius:999px;background:#1b1b21;border:1px solid #26262e;color:var(--mut);white-space:nowrap;cursor:pointer}
+.fchip.on{background:#fff;color:#111;border-color:#fff;font-weight:600}
+.lrows{flex:1;overflow-y:auto;padding:0 10px 12px}
+.row{display:flex;gap:11px;align-items:center;padding:9px 8px;border-radius:14px;cursor:pointer}
+.row + .row{border-top:1px solid #1a1a1f}
+.thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#1a1a20;flex:none}
+.thumb.ph{display:flex;align-items:center;justify-content:center;color:#4a4a55;font-size:20px}
+.rmain{flex:1;min-width:0}
+.rtitle{font-size:14.5px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rsub{font-size:12px;color:var(--mut);margin-top:2px}
+.rright{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
+.rprice{font-size:14px;font-weight:700}
+.rc{display:flex;gap:5px}
+.rbtn{width:26px;height:26px;border-radius:50%;border:1px solid #2a2a33;background:#16161b;color:#8a8a95;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
+.rbtn.on.like{background:rgba(70,211,105,.15);border-color:var(--like);color:var(--like)}
+.rbtn.on.maybe{background:rgba(255,180,58,.15);border-color:var(--maybe);color:var(--maybe)}
+.rbtn.on.nope{background:rgba(253,77,92,.15);border-color:var(--nope);color:var(--nope)}
+/* matches screen (production) */
+.matches{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:50;padding-bottom:68px}
+.matches.on{display:flex}
+.msec{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7b7b88;margin:10px 18px 0}
+.mempty{margin:10px 18px;font-size:13.5px;color:var(--mut)}
+/* stub screens */
+.stub{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg);z-index:50;color:var(--mut);text-align:center;padding:40px;font-size:13.5px}
+.stub.on{display:flex}
+.stub b{color:#fff;font-size:17px}
+/* production additions (UI-SPEC §7 deltas) */
+.search{margin:0 16px 8px;width:calc(100% - 32px);background:#1b1b21;border:1px solid #26262e;border-radius:10px;color:#fff;font-size:14px;padding:9px 14px;outline:none}
+.search::placeholder{color:#6f6f7a}
+.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);background:#1d1d24;border:1px solid #2a2a33;color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;z-index:80;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
+.toast.on{opacity:1}
+</style>
+</head>
+<body>
+<div class="app">
+  <header>
+    <div class="brand"><span class="flame"></span>Bike-Tinder</div>
+    <div class="pill" id="pill">—</div>
+  </header>
+
+  <div class="stage" id="stage">
+    <div class="empty" id="empty"><b>You're all caught up.</b>New bikes arrive nightly — next import 08:30.<br>↺ brings the last card back.</div>
+  </div>
+
+  <div class="actions" id="actions">
+    <button class="act undo" id="btnUndo" title="Undo">↺</button>
+    <button class="act x" id="btnNope" title="Nope">✕</button>
+    <button class="act s" id="btnMaybe" title="Maybe">★</button>
+    <button class="act h" id="btnLike" title="Like">♥</button>
+  </div>
+
+  <nav>
+    <div class="tab on" data-tab="deck"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="13" height="16" rx="2.5"/><path d="M8.5 2.5h9A2.5 2.5 0 0 1 20 5v12"/></svg>Deck</div>
+    <div class="tab" data-tab="list"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></svg>List</div>
+    <div class="tab" data-tab="matches"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Matches</div>
+    <div class="tab" data-tab="trends"><svg viewBox="0 0 24 24"><path d="M5 20V10M12 20V4M19 20v-7"/></svg>Trends</div>
+  </nav>
+
+  <div class="dback" id="dback"></div>
+  <div class="detail" id="detail">
+    <div class="dgrab" id="dgrab"><i></i></div>
+    <button class="dclose" id="dclose">⌄</button>
+    <div class="dhero"><img class="dphoto" id="dphoto" alt=""><div class="dherograd"></div></div>
+    <div class="dbody" id="dbody">
+      <div class="dtitle" id="dtitle"></div>
+      <div class="drow"><div class="dprice" id="dprice"></div><div class="dsub" id="dsub"></div></div>
+      <div class="dchips" id="dchips"></div>
+      <div class="dsec">The machine</div>
+      <div class="specs" id="dspecs"></div>
+      <div class="dsec">Seller's notes</div>
+      <div class="dnotes" id="dnotes"></div>
+      <a class="dopen" id="dopen" href="#" target="_blank" rel="noopener">Open on Kijiji ↗</a>
+    </div>
+    <div class="dacts">
+      <button class="dact no" id="dNo">✕ Nope</button>
+      <button class="dact mb" id="dMb">★ Maybe</button>
+      <button class="dact lk" id="dLk">♥ Like</button>
+    </div>
+  </div>
+
+  <div class="list" id="listScreen">
+    <div class="lhead"><h1>All bikes</h1><div class="sub" id="lsub">—</div></div>
+    <input class="search" id="lsearch" type="search" placeholder="Search titles" autocomplete="off">
+    <div class="filters" id="fdec">
+      <div class="fchip on" data-d="all">All</div><div class="fchip" data-d="like">Liked</div><div class="fchip" data-d="maybe">Maybe</div><div class="fchip" data-d="nope">Noped</div><div class="fchip" data-d="undecided">Undecided</div>
+    </div>
+    <div class="filters" id="fsort">
+      <div class="fchip on" data-s="score">Score</div><div class="fchip" data-s="price" id="fprice">Price ↕</div><div class="fchip" data-s="newest">Newest</div><div class="fchip" data-s="km">km</div>
+    </div>
+    <div class="lrows" id="lrows"></div>
+  </div>
+
+  <div class="matches" id="matchesScreen">
+    <div class="lhead"><h1>Your shortlist</h1></div>
+    <div class="msec" id="mlikeSec">♥ Liked (0)</div>
+    <div class="lrows" id="mlike"></div>
+    <div class="msec" id="mmaybeSec">★ Maybe (0)</div>
+    <div class="lrows" id="mmaybe"></div>
+    <div class="mempty" id="mempty">No likes yet — swipe right on the deck.</div>
+  </div>
+
+  <div class="stub" id="stubTrends"><b>Trends — Phase 3</b>The deck learns your taste as you swipe.</div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const $=id=>document.getElementById(id);
+const stage=$('stage');
+const DEPTH=5;                 // a 5-card live stack at all times
+const SC=.026, TY=16, DIM=.08; // per-depth step: scale, y-offset, dimming
+let pile=[];                   // top-first [{d,el}] — every card its own swipable object
+let hist=[];                   // undo history: full payloads
+let dragEl=null, sx=0, sy=0, dx=0, dy=0, moved=false;
+let buffer=[];                 // deck feed from GET /api/deck (payloads)
+let deckCursor=null, deckLoaded=false, deckLoading=false;
+
+/* ---------- production wiring: API + retry queue + toast ---------- */
+let toastTimer=null;
+function toast(msg){
+  const t=$('toast'); t.textContent=msg; t.classList.add('on');
+  clearTimeout(toastTimer); toastTimer=setTimeout(()=>t.classList.remove('on'),2500);
+}
+async function getJSON(url){
+  try{
+    const res=await fetch(url);
+    if(!res.ok){ if(!navigator.onLine) toast('Offline — retrying'); return null; }
+    return await res.json();
+  }catch(e){ if(!navigator.onLine) toast('Offline — retrying'); return null; }
+}
+/* swipe persistence: optimistic, never waits; failures retry 2s/5s/10s then
+   every 15s while the tab lives. Last write per listing wins; the queue runs
+   serially so reorderings can't land out of sequence. */
+const pend=new Map(); // listing_id -> {act, fails, warned}
+let qRunning=false, qTimer=null, qWarned=false;
+function enqueue(listingId, act){ // act: 'like'|'nope'|'maybe'|null (delete)
+  pend.set(listingId,{act,fails:0});
+  scheduleQueue();
+}
+function queDelay(op){ return op.fails===1?2000:op.fails===2?5000:op.fails===3?10000:15000; }
+function scheduleQueue(){
+  if(qRunning||!pend.size||qTimer) return;
+  qTimer=setTimeout(runQueue,0);
+}
+async function runQueue(){
+  qTimer=null; qRunning=true;
+  try{
+    const ops=[...pend.entries()];
+    let minDelay=0;
+    for(const [id,op] of ops){
+      if(!pend.has(id)) continue;                 // replaced mid-batch
+      const p=pend.get(id);
+      if(p!==op) continue;
+      try{
+        const res= p.act==null
+          ? await fetch('/api/swipe/'+id,{method:'DELETE'})
+          : await fetch('/api/swipe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({listing_id:id,action:p.act})});
+        if(res.ok){ pend.delete(id); }
+        else { p.fails++; if(!qWarned){ qWarned=true; toast("Couldn't save — retrying"); } minDelay=Math.max(minDelay,queDelay(p)); }
+      }catch(e){
+        p.fails++; if(!qWarned){ qWarned=true; toast("Couldn't save — retrying"); }
+        minDelay=Math.max(minDelay,queDelay(p));
+      }
+    }
+  }finally{ qRunning=false; }
+  if(pend.size){ qTimer=setTimeout(runQueue,Math.max(minDelay||15000,1000)); }
+}
+/* optimistic decision set for list/matches + deck commits share this */
+function setDecision(id, act){
+  updateRowDecision(id, act);      // optimistic paint
+  enqueue(id, act);
+}
+
+/* ---------- payload -> display helpers ---------- */
+const REGION_NAMES={ns:'NS',nb:'NB'};
+function fmtNum(n){ return n==null?null:Number(n).toLocaleString('en-US'); }
+function cardChips(it){           // max 3: seller chip + first 2 extras
+  const out=[];
+  if(it.seller_type==='dealer') out.push('Dealer');
+  out.push(...(it.extras||[]).slice(0,2));
+  return out.slice(0,3);
+}
+function subFor(it){
+  const parts=[];
+  if(it.location) parts.push(it.location);
+  parts.push(REGION_NAMES[it.region]||it.region||'');
+  let s=parts.filter(Boolean).join(', ');
+  if(it.seller_type==='dealer') s+=' · dealer';
+  else if(it.seller_type==='private') s+=' · private';
+  return s;
+}
+function priceFor(it){
+  if(it.price_display) return it.price_display;
+  if(it.price_num!=null) return '$'+fmtNum(it.price_num);
+  return '—';
+}
+function relSeen(fs){
+  if(!fs) return '—';
+  const d=new Date(fs), now=new Date();
+  if(isNaN(d)) return '—';
+  const days=Math.floor((now-d)/86400000);
+  return days<=0?'Today':(days===1?'1 day ago':days+' days ago');
+}
+function ccFrom(it){
+  const m=((it.title||'')+' '+((it.desc||'').split(' [also listed:')[0])).match(/(\d[\d,]*)\s*cc/i);
+  return m?(fmtNum(m[1].replace(/,/g,''))+' cc'):null;
+}
+function catFromUrl(url){
+  const m=(url||'').match(/\/v-([^/]+)\//);
+  if(!m) return null;
+  const words=m[1].split('-').filter(Boolean).map(w=>w[0].toUpperCase()+w.slice(1));
+  return words.length?words.join(' '):null;
+}
+
+/* ---------- docs/mockup core: cards, layer, pile ---------- */
+function isTop(el){ return pile[0]&&pile[0].el===el; }
+function setStamps(el,a,b,c){
+  el.querySelector('.stamp.like').style.opacity=a;
+  el.querySelector('.stamp.nope').style.opacity=b;
+  el.querySelector('.stamp.maybe').style.opacity=c;
+}
+function cardNode(item){
+  const el=document.createElement('div');
+  el.className='card';
+  el.innerHTML=`${item.img?`<img class="photo" src="${item.img}" alt="" draggable="false">`:`<div class="nophoto">Photo pending — thumbnail backfill queued</div>`}
+    <div class="grad"></div>
+    <div class="stamp like">LIKE</div>
+    <div class="stamp nope">NOPE</div>
+    <div class="stamp maybe">MAYBE</div>
+    <button class="ibtn">ⓘ</button>
+    <div class="info"><div class="chips">${cardChips(item).map(x=>`<span class="chip">${x}</span>`).join('')}</div><div class="title"></div><div class="price"></div><div class="sub"></div></div>`;
+  // text set via textContent — data is untrusted (titles carry junk chars)
+  const info=el.querySelector('.info');
+  info.querySelector('.title').textContent=item.title||'';
+  info.querySelector('.price').textContent=priceFor(item);
+  info.querySelector('.sub').textContent=subFor(item);
+  const ph=el.querySelector('.photo');
+  if(ph) ph.addEventListener('error',()=>{
+    ph.remove();
+    el.insertAdjacentHTML('afterbegin','<div class="nophoto">Photo pending — thumbnail backfill queued</div>');
+  });
+  el.addEventListener('pointerdown',down);
+  el.addEventListener('pointermove',move);
+  el.addEventListener('pointerup',upH);
+  el.addEventListener('pointercancel',upH);
+  const ib=el.querySelector('.ibtn');
+  ib.addEventListener('pointerdown',e=>e.stopPropagation());
+  ib.addEventListener('click',e=>{ e.stopPropagation(); if(isTop(el)) openDetail(item,{type:'deck'}); });
+  return {d:item,el};
+}
+function layer(el,d,anim){
+  el.classList.toggle('topcard',d===0);
+  el.style.transition=anim?'transform .22s cubic-bezier(.2,.8,.3,1), filter .22s ease, opacity .22s ease':'none';
+  el.style.transform=`translateY(${TY*d}px) scale(${1-SC*d})`;
+  el.style.filter=`brightness(${1-DIM*d})`;
+  el.style.opacity='1';
+  el.style.zIndex=10-d;
+  el.style.pointerEvents=d===0?'auto':'none';
+}
+function relayer(){ pile.forEach((c,d)=>layer(c.el,d,true)); }
+function fillPile(){
+  while(pile.length<DEPTH&&buffer.length){
+    const item=buffer.shift();
+    const entry=cardNode(item), d=pile.length;
+    entry.el.style.transition='none';
+    entry.el.style.transform=`translateY(${TY*(d+2)}px) scale(${1-SC*(d+2)})`;
+    entry.el.style.opacity='0';
+    stage.appendChild(entry.el);
+    pile.push(entry);
+    void entry.el.offsetWidth;
+    layer(entry.el,d,true);
+  }
+  relayer();
+}
+/* deck feed: cursor pages of 40; refill whenever the buffer thins */
+async function loadDeck(){
+  if(deckLoading||deckLoaded) return;
+  deckLoading=true;
+  try{
+    const res=await getJSON('/api/deck?limit=40'+(deckCursor?('&cursor='+encodeURIComponent(deckCursor)):''));
+    if(!res) { setTimeout(()=>loadDeck(),15000); return; }
+    if(res.items&&res.items.length){
+      buffer.push(...res.items);
+      fillPile();
+    }
+    deckCursor=res.next_cursor||null;
+    if(!deckCursor) deckLoaded=true;
+  }finally{ deckLoading=false; }
+}
+function maybeRefill(){
+  if(buffer.length<DEPTH&&deckCursor&&!deckLoaded) loadDeck();
+  if(!pile.length&&!buffer.length&&(deckLoaded||(!deckCursor&&!deckLoading))) $('empty').classList.add('on');
+}
+
+/* ---------- docs/mockup core: commit / fly / undo — no lock ---------- */
+function commit(el,dir){
+  if(!isTop(el)) return;
+  const t=pile.shift();
+  hist.push(t.d);
+  setDecision(t.d.id, dir==='maybe'?'maybe':dir);   // optimistic persist
+  flyOut(el,dir);
+  fillPile(); relayer();
+  maybeRefill();
+}
+function flyOut(el,dir){
+  const x= dir==='maybe'?0:(dir==='like'?620:-620);
+  const y= dir==='maybe'?-780:40;
+  const rot= dir==='maybe'?0:(dir==='like'?26:-26);
+  setStamps(el, dir==='like'?1:0, dir==='nope'?1:0, dir==='maybe'?1:0);
+  el.classList.remove('topcard');
+  el.style.zIndex=12; el.style.pointerEvents='none';
+  el.style.transition='transform .3s ease-in, opacity .3s';
+  el.style.transform=`translate(${x}px,${y}px) rotate(${rot}deg)`;
+  el.style.opacity=.15;
+  setTimeout(()=>{ el.remove(); },420);
+}
+function undo(){
+  if(!hist.length) return;
+  const item=hist.pop();
+  setDecision(item.id, null);                        // DELETE through the queue
+  const entry=cardNode(item);
+  entry.el.style.transition='none';
+  entry.el.style.transform='translateY(-46px) scale(1.02)';
+  entry.el.style.opacity='0';
+  stage.appendChild(entry.el);
+  pile.unshift(entry);
+  if(pile.length>DEPTH){ const drop=pile.pop(); drop.el.remove(); buffer.unshift(drop.d); }
+  void entry.el.offsetWidth;
+  relayer();
+  $('empty').classList.remove('on');
+}
+$('btnLike').onclick=()=>{ if(pile[0]) commit(pile[0].el,'like'); };
+$('btnNope').onclick=()=>{ if(pile[0]) commit(pile[0].el,'nope'); };
+$('btnMaybe').onclick=()=>{ if(pile[0]) commit(pile[0].el,'maybe'); };
+$('btnUndo').onclick=undo;
+
+/* ---------- docs/mockup core: drag — only the top card is grabbable ---------- */
+function down(e){
+  const el=e.currentTarget;
+  if(!isTop(el)) return;
+  dragEl=el; moved=false; sx=e.clientX; sy=e.clientY; dx=0; dy=0;
+  try{ el.setPointerCapture(e.pointerId) }catch(_){}
+  el.style.transition='none';
+}
+function move(e){
+  const el=e.currentTarget;
+  if(dragEl!==el) return;
+  dx=e.clientX-sx; dy=e.clientY-sy;
+  if(Math.abs(dx)>6||Math.abs(dy)>6) moved=true;
+  const rot=Math.max(-12,Math.min(12,dx/12));
+  el.style.transform=`translate(${dx}px,${dy}px) rotate(${rot}deg)`;
+  setStamps(el, Math.max(0,Math.min(1,dx/120)), Math.max(0,Math.min(1,-dx/120)), dy<-20?Math.max(0,Math.min(1,-dy/130)):0);
+}
+function upH(e){
+  const el=e.currentTarget;
+  if(dragEl!==el) return;
+  dragEl=null;
+  const w=stage.clientWidth||360;
+  el.style.transition='transform .3s cubic-bezier(.2,.8,.3,1)';
+  if(dx>w*0.35) commit(el,'like');
+  else if(dx<-w*0.35) commit(el,'nope');
+  else if(dy<-140) commit(el,'maybe');
+  else { el.style.transform=''; setStamps(el,0,0,0); if(!moved && e.type==='pointerup' && isTop(el)) openDetail(pile[0].d,{type:'deck'}); }
+}
+
+/* ---------- docs/mockup core: fullscreen dossier ---------- */
+let dCtx=null;
+function openDetail(data,ctx){
+  dCtx=ctx||null;
+  const ph=$('dphoto');
+  if(data.img){ ph.src=data.img; ph.classList.remove('ph'); }
+  else { ph.removeAttribute('src'); ph.classList.add('ph'); }
+  ph.onerror=()=>{ ph.removeAttribute('src'); ph.classList.add('ph'); };
+  $('dtitle').textContent=data.title||'';
+  $('dprice').textContent=priceFor(data);
+  $('dsub').textContent=subFor(data);
+  $('dchips').innerHTML=cardChips(data).map(x=>`<span class="chip">${x}</span>`).join('');
+  const rows=[
+    ["Year",data.year!=null?String(data.year):null],
+    ["Odometer",data.km!=null?(fmtNum(data.km)+' km'):null],
+    ["Engine",ccFrom(data)],
+    ["Family",data.family],
+    ["Category",catFromUrl(data.url)],
+    ["Location",subFor(data).split(' · ')[0]],
+    ["Seller",data.seller_type==='dealer'?'Dealer':(data.seller_type==='private'?'Private':null)],
+    ["Source","Kijiji"],
+    ["First seen",relSeen(data.first_seen)],
+  ];
+  $('dspecs').innerHTML=rows.map(r=>`<div class="spec"><span class="k">${r[0]}</span><span class="v${(!r[1]||r[1]==='—')?' z':''}">${r[1]||'—'}</span></div>`).join('');
+  $('dnotes').textContent=(data.desc||'').split(' [also listed:')[0]||'';
+  $('dopen').href=data.url||'#';
+  $('detail').classList.add('on'); $('dback').classList.add('on');
+  $('dbody').scrollTop=0;
+}
+function closeDetail(){ const d=$('detail'); d.style.transition=''; d.style.transform=''; d.classList.remove('on'); $('dback').classList.remove('on'); dCtx=null; }
+$('dclose').onclick=closeDetail;
+$('dclose').addEventListener('pointerdown',e=>e.stopPropagation());
+/* pull-down-to-close (grabber bar + photo) */
+let dDragY=null;
+function dStart(e){ dDragY=e.clientY; $('detail').style.transition='none'; try{e.currentTarget.setPointerCapture(e.pointerId)}catch(_){} }
+function dMoveH(e){ if(dDragY===null) return; const dy=Math.max(0,e.clientY-dDragY); $('detail').style.transform=`translateY(${dy}px)`; }
+function dEndH(e){ if(dDragY===null) return; const dy=Math.max(0,e.clientY-dDragY); dDragY=null;
+  if(dy>110){ closeDetail(); }
+  else { const d=$('detail'); d.style.transition='transform .25s cubic-bezier(.2,.8,.3,1)'; d.style.transform=''; } }
+[document.querySelector('.dgrab'),document.querySelector('.dhero')].forEach(el=>{ if(!el) return; el.addEventListener('pointerdown',dStart); el.addEventListener('pointermove',dMoveH); el.addEventListener('pointerup',dEndH); el.addEventListener('pointercancel',dEndH); });
+function dAction(a){
+  const ctx=dCtx; closeDetail();
+  if(!ctx) return;
+  if(ctx.type==='deck'){
+    if(pile[0]) commit(pile[0].el, a==='like'?'like':(a==='nope'?'nope':'maybe'));
+  } else {
+    setDecision(ctx.it.id, a==='like'?'like':(a==='nope'?'nope':'maybe'));
+    if(ctx.screen==='list') renderList();
+    else renderMatches();
+  }
+}
+$('dNo').onclick=()=>dAction('nope'); $('dMb').onclick=()=>dAction('maybe'); $('dLk').onclick=()=>dAction('like');
+
+/* ---------- list screen (real filters + search) ---------- */
+let listItems=[];
+const listCtl={decision:'all',sort:'score',q:'',priceDir:1};
+async function fetchList(){
+  let items=[],total=0,offset=0;
+  do{
+    const q=listCtl.q?'&q='+encodeURIComponent(listCtl.q):'';
+    const res=await getJSON(`/api/list?decision=${listCtl.decision}&sort=${listCtl.sort}${q}&limit=200&offset=${offset}`);
+    if(!res) break;
+    total=res.total;
+    items.push(...res.items);
+    offset+=res.items.length;
+    if(!res.items.length||offset>=total||offset>=500) break;
+  }while(true);
+  listItems=items;
+  renderList();
+}
+function thumbFor(it){
+  if(it.img) return `<img class="thumb" src="/img/${it.id}" alt="" data-i="${it.id}">`;
+  return `<div class="thumb ph">◍</div>`;
+}
+function rowHTML(it){
+  const on=act=>it.decision===act;
+  return `
+   <div class="row" data-i="${it.id}">
+     ${thumbFor(it)}
+     <div class="rmain"><div class="rtitle"></div><div class="rsub"></div></div>
+     <div class="rright"><div class="rprice"></div>
+       <div class="rc" data-i="${it.id}">
+         <button class="rbtn like${on('like')?' on':''}" data-s="like">♥</button>
+         <button class="rbtn maybe${on('maybe')?' on':''}" data-s="maybe">★</button>
+         <button class="rbtn nope${on('nope')?' on':''}" data-s="nope">✕</button>
+       </div>
+     </div>
+   </div>`;
+}
+function attachThumbFallbacks(box){
+  box.querySelectorAll('img.thumb').forEach(im=>im.addEventListener('error',()=>{
+    const d=document.createElement('div'); d.className='thumb ph'; d.textContent='◍';
+    im.replaceWith(d);
+  }));
+}
+function renderList(){
+  $('lrows').innerHTML=listItems.map(rowHTML).join('');
+  attachThumbFallbacks($('lrows'));
+  listItems.forEach(it=>{
+    const el=$('lrows').querySelector(`.row[data-i="${it.id}"]`);
+    if(!el) return;
+    el.querySelector('.rtitle').textContent=it.title||'';
+    el.querySelector('.rsub').textContent=subFor(it);
+    el.querySelector('.rprice').textContent=priceFor(it);
+  });
+  if(!listItems.length) $('lrows').innerHTML='<div class="mempty">No bikes match.</div>';
+}
+/* optimistic decision updates for whichever screens show this listing */
+function updateRowDecision(id, act){
+  const find=[listItems];
+  for(const arr of find){
+    const it=arr.find(x=>x.id===id);
+    if(it) it.decision=act;
+  }
+  const el=$('lrows').querySelector(`.rc[data-i="${id}"]`);
+  if(el) el.querySelectorAll('.rbtn').forEach(b=>b.classList.toggle('on',b.dataset.s===act));
+  ['mlike','mmaybe'].forEach(sec=>{
+    const box=$(sec);
+    if(box.querySelector(`.rc[data-i="${id}"]`)) refreshRowStateInMatches(id,act);
+  });
+}
+function refreshRowStateInMatches(id,act){
+  // a changed decision may move the row between sections — refetch quietly
+  fetchMatches();
+}
+$('lrows').addEventListener('click',e=>{
+  const b=e.target.closest('.rbtn');
+  if(!b){
+    const row=e.target.closest('.row'); if(!row) return;
+    const id=+row.dataset.i;
+    const it=listItems.find(x=>x.id===id);
+    if(it) openDetail(it,{type:'row',it,screen:'list'});
+    return;
+  }
+  const id=+b.closest('.rc').dataset.i, s=b.dataset.s;
+  const it=listItems.find(x=>x.id===id);
+  if(!it) return;
+  const next= it.decision===s?null:s;      // tapping the lit button clears
+  setDecision(id,next);
+  if(next===null && (listCtl.decision===s)) renderList();   // row leaves a filtered view
+});
+$('fdec').addEventListener('click',e=>{
+  const chip=e.target.closest('.fchip'); if(!chip) return;
+  $('fdec').querySelectorAll('.fchip').forEach(c=>c.classList.toggle('on',c===chip));
+  listCtl.decision=chip.dataset.d;
+  fetchList();
+});
+$('fsort').addEventListener('click',e=>{
+  const chip=e.target.closest('.fchip'); if(!chip) return;
+  const s=chip.dataset.s;
+  if(s==='price'){
+    if(listCtl.sort==='price_asc'||listCtl.sort==='price_desc'){
+      listCtl.priceDir= listCtl.sort==='price_asc'?1:-1;       // toggle on re-tap
+      if(listCtl.priceDir===1) listCtl.sort='price_desc';
+      else listCtl.sort='price_asc';
+    } else { listCtl.sort='price_asc'; listCtl.priceDir=0; }
+  } else { listCtl.sort=s; }
+  $('fsort').querySelectorAll('.fchip').forEach(c=>{
+    const cs=c.dataset.s;
+    c.classList.toggle('on', cs==='score'?listCtl.sort==='score':cs==='newest'?listCtl.sort==='newest':cs==='km'?listCtl.sort==='km':(listCtl.sort==='price_asc'||listCtl.sort==='price_desc'));
+  });
+  $('fprice').textContent= listCtl.sort==='price_asc'?'Price ↑':listCtl.sort==='price_desc'?'Price ↓':'Price ↕';
+  fetchList();
+});
+let searchTimer=null;
+$('lsearch').addEventListener('input',e=>{
+  clearTimeout(searchTimer);
+  searchTimer=setTimeout(()=>{ listCtl.q=e.target.value.trim(); fetchList(); },300);
+});
+
+/* ---------- matches screen (production: REAL) ---------- */
+let mItems={like:[],maybe:[]};
+async function fetchMatches(){
+  mItems.like=[];
+  mItems.maybe=[];
+  const [l,m]=await Promise.all([
+    getJSON('/api/list?decision=like&limit=500'),
+    getJSON('/api/list?decision=maybe&limit=500'),
+  ]);
+  if(l) mItems.like=l.items;
+  if(m) mItems.maybe=m.items;
+  renderMatches();
+}
+function renderMatches(){
+  $('mlike').innerHTML=mItems.like.map(rowHTML).join('');
+  $('mmaybe').innerHTML=mItems.maybe.map(rowHTML).join('');
+  attachThumbFallbacks($('mlike'));
+  attachThumbFallbacks($('mmaybe'));
+  mItems.like.concat(mItems.maybe).forEach(it=>{
+    [['mlike',mItems.like],['mmaybe',mItems.maybe]].forEach(([boxId])=>{
+      const el=$(boxId).querySelector(`.row[data-i="${it.id}"]`);
+      if(!el) return;
+      el.querySelector('.rtitle').textContent=it.title||'';
+      el.querySelector('.rsub').textContent=subFor(it);
+      el.querySelector('.rprice').textContent=priceFor(it);
+    });
+  });
+  $('mlikeSec').textContent='♥ Liked ('+mItems.like.length+')';
+  $('mmaybeSec').textContent='★ Maybe ('+mItems.maybe.length+')';
+  $('mempty').style.display= (mItems.like.length||mItems.maybe.length)?'none':'';
+}
+['mlike','mmaybe'].forEach(sec=>{
+  $(sec).addEventListener('click',e=>{
+    const b=e.target.closest('.rbtn');
+    if(!b){
+      const row=e.target.closest('.row'); if(!row) return;
+      const id=+row.dataset.i;
+      const it=mItems.like.concat(mItems.maybe).find(x=>x.id===id);
+      if(it) openDetail(it,{type:'row',it,screen:'matches'});
+      return;
+    }
+    const id=+b.closest('.rc').dataset.i, s=b.dataset.s;
+    const it=mItems.like.concat(mItems.maybe).find(x=>x.id===id);
+    if(!it) return;
+    const next= it.decision===s?null:s;
+    setDecision(id,next);
+    fetchMatches();
+  });
+});
+
+/* ---------- header + badge ---------- */
+let badgeFired=false;
+async function loadStats(){
+  const res=await getJSON('/api/stats');
+  if(!res) return;
+  $('pill').innerHTML=`<b>${res.live}</b> live`+(res.new>0?` · <b>${res.new}</b> new`:'');
+  $('lsub').innerHTML=`${res.live} active · `+(res.new>0?`<b style="color:#fff">${res.new} new</b>`:res.new+' new')+' since your last visit';
+  if(!badgeFired){
+    badgeFired=true;
+    fetch('/api/badge/seen',{method:'POST'}).catch(()=>{});
+  }
+}
+
+/* ---------- tabs ---------- */
+document.querySelectorAll('.tab').forEach(t=>t.onclick=()=>{
+  const name=t.dataset.tab;
+  document.querySelectorAll('.tab').forEach(x=>x.classList.toggle('on',x===t));
+  $('listScreen').classList.toggle('on',name==='list');
+  $('matchesScreen').classList.toggle('on',name==='matches');
+  $('stubTrends').classList.toggle('on',name==='trends');
+  if(name==='list') fetchList();          // fresh decisions every visit
+  else if(name==='matches') fetchMatches();
+});
+
+/* ---------- desktop keyboard arrows (DESIGN.md: v1 frontend) ---------- */
+document.addEventListener('keydown',e=>{
+  if(e.target.tagName==='INPUT'||$('detail').classList.contains('on')) return;
+  if(e.key==='ArrowRight'){ if(pile[0]) commit(pile[0].el,'like'); }
+  else if(e.key==='ArrowLeft'){ if(pile[0]) commit(pile[0].el,'nope'); }
+  else if(e.key==='ArrowUp'){ if(pile[0]) commit(pile[0].el,'maybe'); }
+  else if(e.key==='Backspace'){ undo(); }
+});
+
+/* ---------- boot ---------- */
+loadStats();
+loadDeck();
+
+/* PWA */
+if('serviceWorker' in navigator && (location.protocol==='https:'||location.hostname==='localhost'||location.hostname==='127.0.0.1')){
+  navigator.serviceWorker.register('/sw.js').catch(()=>{});
+}
+</script>
+</body>
+</html>
diff --git a/app/static/manifest.json b/app/static/manifest.json
new file mode 100644
index 0000000..e72d29f
--- /dev/null
+++ b/app/static/manifest.json
@@ -0,0 +1,28 @@
+{
+  "name": "Bike-Tinder",
+  "short_name": "Bike-Tinder",
+  "description": "Swipe through Nova Scotia and New Brunswick motorcycle listings.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#0b0b0e",
+  "theme_color": "#0b0b0e",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
diff --git a/app/static/sw.js b/app/static/sw.js
new file mode 100644
index 0000000..2241f98
--- /dev/null
+++ b/app/static/sw.js
@@ -0,0 +1,67 @@
+/* Bike-Tinder service worker.
+- Precache the app shell at install; index.html + sw.js are served with
+  Cache-Control: no-cache so updates are picked up.
+- /api/* : network-first; offline -> 503 JSON (the page toasts "Offline").
+- /img/* : cache-first with network fill (mirrored thumbnails stay usable
+  offline once seen).
+- Everything else (shell/navigation): network-first, fall back to cache.
+*/
+const VERSION = 'bike-tinder-v1';
+const SHELL = [
+  '/',
+  '/manifest.json',
+  '/apple-touch-icon.png',
+  '/icons/icon-192.png',
+  '/icons/icon-512.png',
+  '/icons/icon-512-maskable.png'
+];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(VERSION)
+      .then((c) => c.addAll(SHELL))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== VERSION).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', (e) => {
+  const req = e.request;
+  if (req.method !== 'GET') return;
+  const url = new URL(req.url);
+
+  if (url.pathname.startsWith('/api/')) {
+    e.respondWith(
+      fetch(req).catch(() => new Response(JSON.stringify({ error: 'offline' }),
+        { status: 503, headers: { 'Content-Type': 'application/json' } }))
+    );
+    return;
+  }
+
+  if (url.pathname.startsWith('/img/')) {
+    e.respondWith(
+      caches.match(req).then((hit) => hit || fetch(req).then((res) => {
+        if (res.ok) {
+          const clone = res.clone();
+          caches.open(VERSION).then((c) => c.put(req, clone));
+        }
+        return res;
+      }).catch(() => new Response('', { status: 404 })))
+    );
+    return;
+  }
+
+  // shell + navigation: network first, cache fallback (offline launch)
+  e.respondWith(
+    fetch(req).then((res) => res).catch(() =>
+      caches.match(req).then((hit) => hit || caches.match('/'))
+    )
+  );
+});